PyPI - ghost-reader - Versions diffs - 0.0.1__py3-none-any.whl - Mend

ghost-reader 0.0.1__py3-none-any.whl

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (39) hide show

ghost_reader/.release-version +1 -0
ghost_reader/__init__.py +3 -0
ghost_reader/agent_loader.py +64 -0
ghost_reader/cli.py +1124 -0
ghost_reader/constants.py +75 -0
ghost_reader/defaults/__init__.py +1 -0
ghost_reader/defaults/personas/__init__.py +1 -0
ghost_reader/defaults/personas/dex.yaml +30 -0
ghost_reader/defaults/personas/elena.yaml +30 -0
ghost_reader/defaults/personas/mara.yaml +30 -0
ghost_reader/defaults/personas/pip.yaml +30 -0
ghost_reader/defaults/personas/rook.yaml +30 -0
ghost_reader/defaults/templates/__init__.py +1 -0
ghost_reader/defaults/templates/blog-review.html +384 -0
ghost_reader/defaults/templates/report.html +1293 -0
ghost_reader/dialogue.py +283 -0
ghost_reader/errors.py +2 -0
ghost_reader/feedback_store.py +56 -0
ghost_reader/io.py +59 -0
ghost_reader/models.py +227 -0
ghost_reader/paths.py +68 -0
ghost_reader/project.py +277 -0
ghost_reader/release.py +56 -0
ghost_reader/report.py +264 -0
ghost_reader/reviews.py +89 -0
ghost_reader/revision.py +165 -0
ghost_reader/round.py +155 -0
ghost_reader/server.py +281 -0
ghost_reader/sync.py +112 -0
ghost_reader/telemetry.py +111 -0
ghost_reader/time.py +20 -0
ghost_reader/validators.py +66 -0
ghost_reader/verify.py +255 -0
ghost_reader-0.0.1.dist-info/METADATA +221 -0
ghost_reader-0.0.1.dist-info/RECORD +39 -0
ghost_reader-0.0.1.dist-info/WHEEL +5 -0
ghost_reader-0.0.1.dist-info/entry_points.txt +2 -0
ghost_reader-0.0.1.dist-info/licenses/LICENSE +21 -0
ghost_reader-0.0.1.dist-info/top_level.txt +1 -0

ghost_reader/defaults/templates/report.html ADDED Viewed

@@ -0,0 +1,1293 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==" type="image/png">
+  <title>Ghost Reader Report</title>
+  <style>
+    /* ═══════════════════════════════════════════════
+       Design tokens — warm editorial manuscript review
+       ═══════════════════════════════════════════════ */
+    :root {
+      color-scheme: light;
+      /* Backgrounds */
+      --bg: #FAF9F5;
+      --panel: #FFFFFF;
+      /* Text */
+      --ink: #141413;
+      --text-body: #3D3D3A;
+      --muted: #87867F;
+      /* Borders */
+      --line: #D1CFC5;
+      --line-light: #F0EEE6;
+      /* Accents */
+      --accent: #D97757;
+      --accent-hover: #B85C3E;
+      --accent-soft: rgba(217, 119, 87, 0.12);
+      --accent-strong: rgba(217, 119, 87, 0.18);
+      /* Semantic */
+      --strength: #788C5D;
+      --strength-soft: rgba(120, 140, 93, 0.16);
+      --concern: #B04A3F;
+      --concern-soft: rgba(176, 74, 63, 0.10);
+      --concern-strong: rgba(176, 74, 63, 0.16);
+      --warning: #C78E3F;
+      /* Persona dots */
+      --dot-mara: #788C5D;
+      --dot-dex: #B04A3F;
+      --dot-pip: #D97757;
+      --dot-elena: #87867F;
+      --dot-rook: #C78E3F;
+      /* Persona score bars */
+      --score-engagement: #788C5D;
+      --score-character: #D97757;
+      --score-pacing: #3D3D3A;
+      --score-genre-fit: #E3DACC;
+      /* Typography */
+      --serif: ui-serif, Georgia, "Times New Roman", Times, serif;
+      --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+      --mono: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
+      /* Spacing — 4pt grid */
+      --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;  --sp-4: 16px;
+      --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
+      /* Radius */
+      --radius-xs: 4px;
+      --radius-row: 8px;
+      --radius-panel: 12px;
+      --radius-pill: 999px;
+      /* Borders */
+      --border: 1.5px solid var(--line);
+      --border-light: 1px solid var(--line-light);
+      /* Shadows — warm tint */
+      --shadow-sm: 0 1px 2px rgba(20,20,19,0.06);
+      --shadow-md: 0 4px 10px rgba(20,20,19,0.08);
+      --shadow-lg: 0 12px 28px rgba(20,20,19,0.12);
+      /* Transitions */
+      --t-fast: 0.12s ease;
+      --t-card: 0.15s ease;
+    }
+    /* ═══════════════════════════════════════════════
+       Reset & base
+       ═══════════════════════════════════════════════ */
+    * { box-sizing: border-box; }
+    body {
+      margin: 0;
+      background: var(--bg);
+      color: var(--ink);
+      font-family: var(--sans);
+      font-size: 15px;
+      line-height: 1.55;
+      -webkit-font-smoothing: antialiased;
+      text-rendering: optimizeLegibility;
+    }
+    h1, h2, h3 {
+      margin: 0;
+      font-family: var(--serif);
+      font-weight: 500;
+      line-height: 1.2;
+    }
+    h1 { font-size: 20px; letter-spacing: -0.01em; white-space: nowrap; }
+    h2 { font-size: 17px; letter-spacing: -0.01em; margin-bottom: 10px; }
+    h3 { font-size: 14px; margin-bottom: 8px; }
+    p { margin: 0 0 10px; }
+    /* ═══════════════════════════════════════════════
+       Buttons — 5 states, 36px height
+       ═══════════════════════════════════════════════ */
+    button {
+      display: inline-flex; align-items: center; justify-content: center;
+      height: 36px; padding: 0 16px;
+      font-family: var(--sans); font-size: 14px; font-weight: 500;
+      border-radius: var(--radius-row); border: var(--border);
+      background: var(--panel); color: var(--ink);
+      cursor: pointer;
+      transition: background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
+    }
+    button:hover { background: var(--line-light); border-color: var(--text-body); }
+    button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+    button:active { transform: scale(0.97); }
+    button:disabled { opacity: 0.45; cursor: default; }
+    button.primary {
+      background: var(--accent); color: var(--panel);
+      border-color: var(--accent);
+    }
+    button.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
+    button.primary:disabled { opacity: 0.5; cursor: default; transform: none; }
+    button.pill {
+      border-radius: var(--radius-pill);
+      height: 28px; padding: 4px 12px; font-size: 12px;
+    }
+    /* ═══════════════════════════════════════════════
+       Inputs
+       ═══════════════════════════════════════════════ */
+    textarea, input[type="text"] {
+      border: var(--border);
+      border-radius: var(--radius-row);
+      padding: 5px 8px;
+      font-family: var(--sans); font-size: 12px;
+      width: 100%;
+      color: var(--ink); background: var(--panel);
+      transition: border-color var(--t-fast), box-shadow var(--t-fast);
+    }
+    textarea::placeholder, input[type="text"]::placeholder { color: var(--muted); }
+    textarea:focus, input[type="text"]:focus {
+      border-color: var(--accent); outline: none;
+      box-shadow: 0 0 0 3px rgba(217, 119, 87, 0.15);
+    }
+    textarea { min-height: 36px; resize: vertical; }
+    pre {
+      margin: 0; white-space: pre-wrap; overflow-wrap: anywhere;
+      background: var(--line-light);
+      border: var(--border); border-radius: var(--radius-xs);
+      padding: 12px; font-size: 12px; max-height: 240px; overflow: auto;
+    }
+    /* ═══════════════════════════════════════════════
+       Top bar — sticky
+       ═══════════════════════════════════════════════ */
+    .topbar {
+      position: sticky; top: 0; z-index: 10;
+      display: flex; justify-content: space-between; align-items: center;
+      gap: 12px; padding: 10px clamp(16px, 4vw, 40px);
+      border-bottom: var(--border); background: var(--panel);
+      flex-wrap: wrap;
+    }
+    .topbar-left { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
+    .topbar-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
+    .topbar-btn:disabled { opacity: 0.5; cursor: default; transform: none; }
+    .selection-badge {
+      font-size: 13px; color: var(--muted); white-space: nowrap;
+    }
+    .selection-badge.has-selection { color: var(--accent); font-weight: 600; }
+    /* ═══════════════════════════════════════════════
+       Meta pills
+       ═══════════════════════════════════════════════ */
+    .meta {
+      display: flex; flex-wrap: wrap; gap: 8px; margin: 0;
+      color: var(--muted); font-size: 13px;
+    }
+    .pill {
+      border: var(--border); border-radius: var(--radius-pill);
+      padding: 3px 10px; background: var(--bg);
+      font-size: 12px; font-family: var(--mono); letter-spacing: 0.04em;
+    }
+    .round-indicator {
+      font-size: 12px; color: var(--muted);
+      padding: 2px 10px; border: var(--border); border-radius: var(--radius-pill);
+      white-space: nowrap; background: var(--bg);
+    }
+    .round-nav-btn {
+      font-size: 12px; min-height: 26px; padding: 2px 8px;
+      border-radius: var(--radius-xs); line-height: 1;
+    }
+    .round-nav-btn:disabled { opacity: 0.35; cursor: default; transform: none; }
+    .hint-text { font-size: 11px; color: var(--muted); margin-left: 2px; }
+    /* ═══════════════════════════════════════════════
+       Two-panel main — content + annotation sidebar
+       ═══════════════════════════════════════════════ */
+    main {
+      display: grid;
+      grid-template-columns: 1fr 360px;
+    }
+    .story-panel {
+      padding: 28px clamp(20px, 5vw, 52px) 40px;
+      overflow-y: auto; max-height: calc(100vh - 57px);
+      position: sticky; top: 57px;
+    }
+    .annotation-panel {
+      padding: 20px 22px 40px;
+      overflow-y: auto; max-height: calc(100vh - 57px);
+      position: sticky; top: 57px;
+      border-left: var(--border); background: var(--bg);
+    }
+    /* ═══════════════════════════════════════════════
+       Story text — editorial reading surface
+       ═══════════════════════════════════════════════ */
+    .story-content { max-width: 65ch; margin: 0 auto; }
+    .story-content h2 {
+      font-family: var(--serif); font-weight: 500; margin-bottom: 4px;
+    }
+    .story-content > .summary {
+      font-family: var(--sans); font-size: 13px; color: var(--muted);
+      margin-bottom: 16px;
+    }
+    .story-paragraph {
+      padding: 10px 12px; margin: 2px 0;
+      border-radius: var(--radius-row);
+      border-left: 3px solid transparent;
+      transition: background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
+      scroll-margin-top: 16px; cursor: default;
+    }
+    .story-paragraph.has-comments {
+      border-left-color: var(--strength);
+      background: rgba(120, 140, 93, 0.06);
+      cursor: pointer;
+    }
+    .story-paragraph.has-comments:hover {
+      background: rgba(120, 140, 93, 0.10);
+      box-shadow: 0 0 0 1.5px rgba(120, 140, 93, 0.12);
+    }
+    .story-paragraph:target,
+    .story-paragraph.focused,
+    .story-paragraph.synced {
+      background: rgba(217, 119, 87, 0.12);
+      border-left-color: var(--accent);
+      box-shadow: 0 0 0 2px rgba(217, 119, 87, 0.2);
+    }
+    .story-paragraph.has-selected {
+      background: rgba(217, 119, 87, 0.08);
+      border-left-color: var(--accent);
+    }
+    .story-paragraph p {
+      font-family: var(--serif); font-size: 16px; line-height: 1.7;
+      overflow-wrap: anywhere; margin: 0;
+    }
+    .paragraph-label {
+      font-family: var(--mono); font-size: 11px;
+      color: var(--muted); margin-bottom: 4px;
+      user-select: none; letter-spacing: 0.05em;
+    }
+    .comment-count {
+      display: inline-block;
+      font-family: var(--mono); font-size: 11px;
+      color: var(--strength); margin-left: 6px; font-weight: 600;
+    }
+    .selected-count {
+      display: inline-block;
+      font-family: var(--mono); font-size: 11px;
+      color: var(--accent); margin-left: 4px;
+    }
+    /* ═══════════════════════════════════════════════
+       Persona filter
+       ═══════════════════════════════════════════════ */
+    .persona-filter {
+      display: flex; gap: 6px; margin-bottom: 18px; flex-wrap: wrap;
+      position: sticky; top: 0; background: var(--bg);
+      padding-bottom: 10px; z-index: 2;
+    }
+    .persona-filter button {
+      height: 28px; padding: 4px 12px;
+      font-size: 12px; border-radius: var(--radius-pill);
+    }
+    .persona-filter button.active {
+      background: var(--accent); color: var(--panel); border-color: var(--accent);
+    }
+    /* ═══════════════════════════════════════════════
+       Reader type tag
+       ═══════════════════════════════════════════════ */
+    .reader-type-tag {
+      font-size: 11px; color: var(--muted); font-style: italic;
+    }
+    .focus-primary { color: var(--ink); }
+    .focus-secondary { color: var(--muted); }
+    /* ═══════════════════════════════════════════════
+       Persona profile card
+       ═══════════════════════════════════════════════ */
+    .persona-profile-card {
+      border: var(--border); border-radius: var(--radius-row);
+      padding: 10px 14px; margin-bottom: 16px; background: var(--panel);
+    }
+    .profile-header {
+      display: flex; align-items: center; gap: 8px;
+      margin-bottom: 8px; flex-wrap: wrap;
+    }
+    .profile-focus {
+      font-size: 12px; color: var(--muted); margin-bottom: 6px;
+    }
+    .profile-scores {
+      display: flex; gap: 14px; margin-bottom: 8px; flex-wrap: wrap;
+    }
+    .profile-score-bar {
+      display: flex; align-items: center; gap: 4px;
+    }
+    .profile-score-label {
+      font-family: var(--mono); font-size: 10px; font-weight: 600;
+      color: var(--muted); width: 12px;
+    }
+    .profile-score-meter {
+      width: 44px; height: 5px; background: var(--line-light);
+      border-radius: var(--radius-pill); overflow: hidden;
+    }
+    .profile-score-meter span {
+      display: block; height: 100%; border-radius: inherit;
+    }
+    .profile-score-value {
+      font-family: var(--mono); font-size: 10px;
+      color: var(--text-body); min-width: 16px;
+    }
+    .profile-summary {
+      font-size: 12px; color: var(--muted); font-style: italic; line-height: 1.4;
+    }
+    /* ═══════════════════════════════════════════════
+       Comment groups and cards
+       ═══════════════════════════════════════════════ */
+    .comment-group {
+      margin-bottom: 18px;
+      border: var(--border); border-radius: var(--radius-row);
+      background: var(--panel); overflow: hidden;
+      scroll-margin-top: 16px;
+    }
+    .comment-group.synced {
+      border-color: var(--accent);
+      box-shadow: 0 0 0 2px rgba(217, 119, 87, 0.15);
+    }
+    .comment-group-header {
+      padding: 10px 12px; background: var(--line-light);
+      border-bottom: var(--border-light);
+      display: flex; align-items: baseline; gap: 8px;
+      cursor: pointer; transition: background var(--t-fast);
+    }
+    .comment-group-header:hover { background: #E6E3DA; }
+    .paragraph-ref {
+      font-family: var(--mono); font-weight: 600; font-size: 13px;
+      color: var(--accent); flex-shrink: 0;
+    }
+    .paragraph-snippet {
+      font-size: 12px; color: var(--muted);
+      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+    }
+    .group-meta {
+      font-family: var(--mono); font-size: 11px;
+      color: var(--muted); margin-left: auto; flex-shrink: 0;
+    }
+    .comment-card {
+      padding: 10px 12px; border-bottom: var(--border-light);
+    }
+    .comment-card:last-child { border-bottom: none; }
+    .comment-card.concern {
+      border-left: 3px solid var(--concern); padding-left: 9px;
+    }
+    .comment-card.strength {
+      border-left: 3px solid var(--strength); padding-left: 9px;
+    }
+    .comment-card.selected { background: var(--accent-soft); }
+    .comment-card.selected.concern { background: var(--concern-soft); }
+    .comment-card.filtered-out { display: none; }
+    .comment-card-head {
+      display: flex; align-items: center; gap: 8px;
+      margin-bottom: 6px; flex-wrap: wrap;
+    }
+    .persona-dot {
+      width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
+    }
+    .persona-dot.mara { background: var(--dot-mara); }
+    .persona-dot.dex  { background: var(--dot-dex); }
+    .persona-dot.pip  { background: var(--dot-pip); }
+    .persona-dot.elena { background: var(--dot-elena); }
+    .persona-dot.rook { background: var(--dot-rook); }
+    .persona-name { font-weight: 600; font-size: 13px; }
+    .item-id {
+      font-family: var(--mono); font-size: 11px; color: var(--muted);
+    }
+    .kind-badge {
+      font-family: var(--mono); font-size: 11px;
+      text-transform: uppercase; letter-spacing: .05em;
+      padding: 1px 6px; border-radius: var(--radius-xs); font-weight: 600;
+    }
+    .kind-badge.concern { color: var(--concern); background: var(--concern-soft); }
+    .kind-badge.strength { color: var(--strength); background: var(--strength-soft); }
+    .include-check {
+      display: inline-flex; align-items: center; gap: 5px;
+      font-size: 12px; font-weight: 600; color: var(--muted);
+      margin-left: auto; cursor: pointer; user-select: none;
+      padding: 3px 10px; border: var(--border); border-radius: var(--radius-pill);
+      transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
+    }
+    .include-check:has(input:checked) {
+      background: var(--accent-soft); color: var(--accent);
+      border-color: var(--accent);
+    }
+    .include-check:hover { border-color: var(--accent); }
+    .include-check input { margin: 0; cursor: pointer; accent-color: var(--accent); }
+    .comment-card-body { font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
+    .comment-text { margin-bottom: 4px; }
+    .comment-effect { font-size: 12px; color: var(--concern); margin-bottom: 2px; }
+    .comment-hint { font-size: 12px; color: var(--accent); }
+    .comment-card-inputs {
+      margin-top: 8px; padding-top: 8px;
+      border-top: 1.5px dashed var(--line); display: grid; gap: 6px;
+    }
+    .input-row { display: flex; align-items: center; gap: 6px; }
+    .input-row label {
+      font-family: var(--mono); font-size: 11px;
+      color: var(--muted); white-space: nowrap; flex-shrink: 0; min-width: 52px;
+    }
+    .input-row input { flex: 1; min-width: 0; font-size: 12px; padding: 4px 8px; }
+    /* ═══════════════════════════════════════════════
+       Dialogue thread
+       ═══════════════════════════════════════════════ */
+    .dialogue-thread {
+      margin-top: 8px; padding: 8px 10px;
+      background: var(--line-light);
+      border-left: 3px solid var(--line); border-radius: var(--radius-xs);
+    }
+    .dialogue-thread .input-row {
+      margin-top: 8px; padding-top: 8px; border-top: 1.5px dashed var(--line);
+    }
+    .dialogue-turn { margin-bottom: 8px; }
+    .dialogue-turn:last-of-type { margin-bottom: 0; }
+    .dialogue-role {
+      font-family: var(--mono); font-size: 11px;
+      text-transform: uppercase; letter-spacing: .05em; margin-bottom: 2px;
+    }
+    .dialogue-role.user { color: var(--accent); font-weight: 600; }
+    .dialogue-role.persona { color: var(--muted); }
+    .dialogue-text { font-size: 12px; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; }
+    /* ═══════════════════════════════════════════════
+       Toast
+       ═══════════════════════════════════════════════ */
+    .toast {
+      position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
+      background: var(--ink); color: var(--panel);
+      padding: 8px 18px; border-radius: var(--radius-pill);
+      font-family: var(--sans); font-size: 13px;
+      z-index: 100; pointer-events: none; opacity: 0;
+      transition: opacity 300ms ease;
+    }
+    .toast.show { opacity: 1; }
+    /* ═══════════════════════════════════════════════
+       Footer
+       ═══════════════════════════════════════════════ */
+    .report-footer {
+      margin-top: var(--sp-8); padding: 20px clamp(16px, 4vw, 40px);
+      border-top: 1px solid var(--line);
+      font-family: var(--mono); font-size: 12px; color: var(--muted);
+      text-align: center;
+    }
+    /* ═══════════════════════════════════════════════
+       Responsive
+       ═══════════════════════════════════════════════ */
+    @media (max-width: 860px) {
+      main { grid-template-columns: 1fr; }
+      .story-panel { position: static; max-height: none; padding-bottom: 20px; }
+      .annotation-panel { position: static; max-height: none; border-left: none; border-top: var(--border); }
+      .story-content { max-width: none; }
+      .topbar { flex-direction: column; align-items: flex-start; }
+      .topbar-right { width: 100%; }
+      .topbar-right button { flex: 1; }
+    }
+    /* ═══════════════════════════════════════════════
+       Reduced motion
+       ═══════════════════════════════════════════════ */
+    @media (prefers-reduced-motion: reduce) {
+      *, *::before, *::after {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.01ms !important;
+      }
+      .card:hover { transform: none; }
+      button:active { transform: none; }
+    }
+  </style>
+</head>
+<body>
+  <header class="topbar">
+    <div class="topbar-left">
+      <h1>Ghost Reader Report</h1>
+      <div class="meta" id="report-meta"></div>
+    </div>
+    <div class="topbar-right">
+      <button id="prev-round-btn" class="round-nav-btn" disabled>&#9664;</button>
+      <span class="round-indicator" id="round-indicator">Round 1</span>
+      <button id="next-round-btn" class="round-nav-btn" disabled>&#9654;</button>
+      <span class="selection-badge" id="selection-badge">No items selected</span>
+      <button id="copy-refine-btn" class="topbar-btn" onclick="copyRefinePrompt()" disabled
+        title="Iterate on review quality — keep selected items, regenerate the rest, continue dialogue">Refine Reviews</button>
+      <button id="copy-revision-btn" class="topbar-btn" onclick="copyRevisionPrompt()" disabled
+        title="Generate a story revision handoff prompt from selected feedback">Revise Story</button>
+      <button id="submit-feedback-btn" class="primary" onclick="submitFeedback()"
+        disabled style="display:none">Submit Feedback</button>
+    </div>
+  </header>
+  <main>
+    <section class="story-panel" id="story-panel"></section>
+    <section class="annotation-panel" id="annotation-panel"></section>
+  </main>
+  <footer class="report-footer" id="report-footer">
+  </footer>
+  <div class="toast" id="toast"></div>
+  <pre id="feedback-yaml" hidden></pre>
+  <pre id="refine-prompt" hidden></pre>
+  <pre id="revision-prompt" hidden></pre>
+  <script type="application/json" id="payload-data">__GHOST_READER_PAYLOAD__</script>
+  <script>
+    const payload = JSON.parse(document.getElementById("payload-data").textContent);
+    const meta = document.getElementById("report-meta");
+    const storyPanel = document.getElementById("story-panel");
+    const annotationPanel = document.getElementById("annotation-panel");
+    const yamlBox = document.getElementById("feedback-yaml");
+    const refinePromptBox = document.getElementById("refine-prompt");
+    const revisionPromptBox = document.getElementById("revision-prompt");
+    const copyRefineButton = document.getElementById("copy-refine-btn");
+    const copyRevisionButton = document.getElementById("copy-revision-btn");
+    const selectionBadge = document.getElementById("selection-badge");
+    const roundIndicator = document.getElementById("round-indicator");
+    const prevRoundBtn = document.getElementById("prev-round-btn");
+    const nextRoundBtn = document.getElementById("next-round-btn");
+    const reportFooter = document.getElementById("report-footer");
+    const toast = document.getElementById("toast");
+    const selectedFeedbackIds = new Set((payload.feedback_summary?.selected_items || []).map((item) => item.target_id));
+    const feedbackNotes = payload.feedback_summary?.user_notes || {};
+    const dialogueQuestions = {};
+    let activePersona = null;
+    let toastTimer = null;
+    let dialogueDebounce = null;
+    let currentRound = (payload.current_round != null) ? payload.current_round : 1;
+    let roundIds = payload.round_ids || [1];
+    let dialogueThreads = payload.dialogue_threads || {};
+    let storyUnit = payload.story_unit || '';
+    let projectRoot = (payload.commands && payload.commands.project_root) ? payload.commands.project_root : '';
+    function esc(value) {
+      return String(value ?? "").replace(/[&<>"']/g, (ch) => ({
+        "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#039;"
+      }[ch]));
+    }
+    function formatFocus(focus) {
+      if (!focus) return "";
+      if (typeof focus === "string") return esc(focus);
+      if (typeof focus === "object") {
+        var parts = [];
+        if (Array.isArray(focus.primary) && focus.primary.length) {
+          parts.push('<span class="focus-primary">' + esc(focus.primary.join(", ")) + '</span>');
+        }
+        if (Array.isArray(focus.secondary) && focus.secondary.length) {
+          parts.push('<span class="focus-secondary">' + esc(focus.secondary.join(", ")) + '</span>');
+        }
+        return parts.join(" &bull; ");
+      }
+      return esc(String(focus));
+    }
+    function yamlQuote(value) {
+      return JSON.stringify(String(value ?? ""));
+    }
+    function yamlDump(obj, indent) {
+      indent = indent || 0;
+      var prefix = "";
+      for (var i = 0; i < indent; i++) { prefix += "  "; }
+      if (obj === null || obj === undefined) return "null";
+      if (typeof obj === "string") return yamlQuote(obj);
+      if (typeof obj === "number" || typeof obj === "boolean") return String(obj);
+      if (Array.isArray(obj)) {
+        if (!obj.length) return "[]";
+        return obj.map(function(item) {
+          if (typeof item === "object" && item !== null) {
+            var itemLines = yamlDump(item, indent + 1).split("\n");
+            return prefix + "- " + itemLines[0].trim() + (itemLines.length > 1 ? "\n" + itemLines.slice(1).join("\n") : "");
+          }
+          return prefix + "- " + yamlDump(item, indent);
+        }).join("\n");
+      }
+      if (typeof obj === "object") {
+        var keys = Object.keys(obj);
+        if (!keys.length) return "{}";
+        return keys.map(function(key) {
+          var val = obj[key];
+          if (typeof val === "object" && val !== null) {
+            return prefix + key + ":\n" + yamlDump(val, indent + 1);
+          }
+          return prefix + key + ": " + yamlDump(val, indent);
+        }).join("\n");
+      }
+      return String(obj);
+    }
+    function expandLocators(item) {
+      const result = new Set();
+      for (const evidence of item.evidence || []) {
+        const locator = evidence.locator;
+        if (!locator) continue;
+        const rangeMatch = locator.match(/^([a-z]+)(\d+)\s*[-–]\s*([a-z]+)(\d+)$/i);
+        if (rangeMatch && rangeMatch[1].toLowerCase() === rangeMatch[3].toLowerCase()) {
+          const prefix = rangeMatch[1];
+          const start = Number(rangeMatch[2]);
+          const end = Number(rangeMatch[4]);
+          for (let i = start; i <= end; i += 1) result.add(prefix + i);
+        } else {
+          result.add(locator);
+        }
+      }
+      return result;
+    }
+    let _groupsCache = null;
+    function paragraphGroups() {
+      if (_groupsCache) return _groupsCache;
+      const source = payload.source_text || {};
+      const groups = [];
+      for (const para of source.paragraphs || []) {
+        const items = [];
+        for (const review of payload.reviews) {
+          for (const item of [...(review.strengths || []), ...(review.concerns || [])]) {
+            const kind = item.id.startsWith("s") ? "strength" : "concern";
+            const itemLocs = expandLocators(item);
+            const paraLocs = new Set(para.locators || []);
+            let matched = false;
+            for (const loc of itemLocs) {
+              if (paraLocs.has(loc)) { matched = true; break; }
+            }
+            if (matched) {
+              items.push({ review, item, kind, target: review.persona_id + ":" + item.id });
+            }
+          }
+        }
+        if (items.length) {
+          groups.push({
+            paragraphId: para.id,
+            text: para.text,
+            items
+          });
+        }
+      }
+      _groupsCache = groups;
+      return groups;
+    }
+    function selectedCountForParagraph(paraId) {
+      const groups = paragraphGroups();
+      const group = groups.find((g) => String(g.paragraphId) === String(paraId));
+      if (!group) return 0;
+      return group.items.filter((entry) => selectedFeedbackIds.has(entry.target)).length;
+    }
+    function renderStory() {
+      const source = payload.source_text || {};
+      if (!source.found || !source.paragraphs?.length) {
+        storyPanel.innerHTML = "";
+        return;
+      }
+      const groups = paragraphGroups();
+      const paraHasComments = new Set(groups.map((g) => String(g.paragraphId)));
+      const paragraphs = source.paragraphs.map((para) => {
+        const hasComments = paraHasComments.has(String(para.id));
+        const commentCount = groups.filter((g) => String(g.paragraphId) === String(para.id)).reduce((sum, g) => sum + g.items.length, 0);
+        const selCount = selectedCountForParagraph(para.id);
+        return '<div class="story-paragraph' +
+          (hasComments ? ' has-comments' : '') +
+          (selCount > 0 ? ' has-selected' : '') +
+          '" id="para-' + esc(para.id) + '" data-paragraph-id="' + esc(para.id) + '">' +
+          '<div class="paragraph-label">Paragraph ' + esc(para.id) +
+            (commentCount ? '<span class="comment-count">' + commentCount + ' annotation' + (commentCount !== 1 ? 's' : '') + '</span>' : '') +
+            (selCount ? '<span class="selected-count">(' + selCount + ' selected)</span>' : '') +
+          '</div>' +
+          '<p>' + esc(para.text) + '</p></div>';
+      }).join("");
+      storyPanel.innerHTML = '<div class="story-content"><h2>Story Text</h2><p class="summary">Hover a highlighted passage to see its annotations. Click to scroll the annotation panel.</p><div class="story-paragraphs">' + paragraphs + '</div></div>';
+    }
+    function renderDialogueThread(review, itemId, target) {
+      var thread = dialogueThreads[target] || dialogueThreads[itemId] || null;
+      var turns = (thread && thread.turns) ? thread.turns : [];
+      var threadId = (thread && thread.thread_id) ? thread.thread_id : target;
+      var dialogueQ = dialogueQuestions[threadId] || "";
+      var html = '<div class="dialogue-thread" data-thread-id="' + esc(threadId) + '">';
+      for (var i = 0; i < turns.length; i++) {
+        var turn = turns[i];
+        var userText = turn.user || "";
+        var personaText = turn.persona || "";
+        if (userText) {
+          html += '<div class="dialogue-turn"><div class="dialogue-role user">You</div><div class="dialogue-text">' + esc(userText) + '</div></div>';
+        }
+        if (personaText) {
+          html += '<div class="dialogue-turn"><div class="dialogue-role persona">' + esc(review.persona_name || review.persona_id) + '</div><div class="dialogue-text">' + esc(personaText) + '</div></div>';
+        }
+        if (!userText && !personaText && turn.text) {
+          html += '<div class="dialogue-turn"><div class="dialogue-text">' + esc(turn.text) + '</div></div>';
+        }
+      }
+      html += '<div class="input-row"><label for="ask-' + esc(target.replace(/:/g, "-")) + '">Ask ' + esc(review.persona_name || review.persona_id) + '</label><input type="text" id="ask-' + esc(target.replace(/:/g, "-")) + '" data-dialogue="' + esc(threadId) + '" placeholder="Follow-up question for this persona..." value="' + esc(dialogueQ) + '"></div>';
+      html += '</div>';
+      return html;
+    }
+    function renderPersonaProfileCard(personaId) {
+      if (!personaId) return '<div class="persona-profile-card" id="persona-profile-card" style="display:none"></div>';
+      var review = null;
+      for (var i = 0; i < payload.reviews.length; i++) {
+        if (payload.reviews[i].persona_id === personaId) {
+          review = payload.reviews[i];
+          break;
+        }
+      }
+      if (!review) return '<div class="persona-profile-card" id="persona-profile-card" style="display:none"></div>';
+      var scores = review.scores || {};
+      var scoreKeys = ["engagement", "character", "pacing", "genre_fit"];
+      var scoreLabels = { engagement: "E", character: "C", pacing: "P", genre_fit: "G" };
+      var scoreBars = scoreKeys.map(function(key) {
+        var val = Number(scores[key]) || 0;
+        var pct = Math.max(0, Math.min(10, val)) * 10;
+        return '<div class="profile-score-bar"><span class="profile-score-label">' + scoreLabels[key] + '</span><div class="profile-score-meter"><span style="width:' + pct + '%;background:var(--score-' + key.replace(/_/g, '-') + ')"></span></div><span class="profile-score-value">' + val + '</span></div>';
+      }).join("");
+      var wouldContinue = review.overall?.would_continue;
+      var summary = review.overall?.summary || "";
+      return '<div class="persona-profile-card" id="persona-profile-card">' +
+        '<div class="profile-header">' +
+          '<span class="persona-dot ' + esc(review.persona_id) + '"></span>' +
+          '<span class="persona-name">' + esc(review.persona_name || review.persona_id) + '</span>' +
+          '<span class="reader-type-tag">' + esc(review.reader_type || "") + '</span>' +
+          (wouldContinue != null
+            ? (wouldContinue ? '<span class="pill" style="background:var(--strength-soft);color:var(--strength);border-color:var(--strength)">would continue</span>' : '<span class="pill" style="background:var(--concern-soft);color:var(--concern);border-color:var(--concern)">would pause</span>')
+            : '') +
+        '</div>' +
+        '<div class="profile-focus">' + formatFocus(review.review_focus) + '</div>' +
+        '<div class="profile-scores">' + scoreBars + '</div>' +
+        (summary ? '<div class="profile-summary">' + esc(summary.length > 240 ? summary.substring(0, 240) + "..." : summary) + '</div>' : '') +
+      '</div>';
+    }
+    function renderAnnotationPanel() {
+      const groups = paragraphGroups();
+      if (!groups.length) {
+        annotationPanel.innerHTML = '<p class="summary">No review annotations found for the story text.</p>';
+        return;
+      }
+      const filterHtml = '<div class="persona-filter"><button data-filter="all" class="active pill">All</button>' +
+        payload.reviews.map((r) => '<button data-filter="' + esc(r.persona_id) + '" class="pill">' + esc(r.persona_name || r.persona_id) + '</button>').join("") +
+        '</div>';
+      const profileCardHtml = renderPersonaProfileCard(activePersona);
+      const groupHtml = groups.map((group) => {
+        const selCount = group.items.filter((entry) => selectedFeedbackIds.has(entry.target)).length;
+        const cards = group.items.map((entry) => {
+          const checked = selectedFeedbackIds.has(entry.target) ? " checked" : "";
+          const note = feedbackNotes[entry.target] || "";
+          const dialogueThreadHtml = renderDialogueThread(entry.review, entry.item.id, entry.target);
+          return '<div class="comment-card ' + entry.kind +
+            (checked ? ' selected' : '') +
+            '" data-target="' + esc(entry.target) + '" data-persona="' + esc(entry.review.persona_id) + '">' +
+            '<div class="comment-card-head">' +
+              '<span class="persona-dot ' + esc(entry.review.persona_id) + '"></span>' +
+              '<span class="persona-name">' + esc(entry.review.persona_name || entry.review.persona_id) + '</span>' +
+              '<span class="item-id">' + esc(entry.item.id) + '</span>' +
+              '<span class="kind-badge ' + entry.kind + '">' + (entry.kind === "strength" ? "Strength" : "Concern") + '</span>' +
+              (entry.review.reader_type ? '<span class="reader-type-tag">' + esc(entry.review.reader_type) + '</span>' : '') +
+              '<label class="include-check"><input type="checkbox" data-select="' + esc(entry.target) + '"' + checked + '> Include</label>' +
+            '</div>' +
+            '<div class="comment-card-body">' +
+              '<div class="comment-text">' + esc(entry.item.reason) + '</div>' +
+              (entry.item.reader_effect ? '<div class="comment-effect">Effect: ' + esc(entry.item.reader_effect) + '</div>' : '') +
+              (entry.item.revision_hint ? '<div class="comment-hint">Hint: ' + esc(entry.item.revision_hint) + '</div>' : '') +
+            '</div>' +
+            dialogueThreadHtml +
+            '<div class="comment-card-inputs">' +
+              '<div class="input-row">' +
+                '<label for="note-' + esc(entry.target.replace(/:/g, "-")) + '">Your note</label>' +
+                '<input type="text" id="note-' + esc(entry.target.replace(/:/g, "-")) + '" data-note="' + esc(entry.target) + '" placeholder="Add your feedback on this point…" value="' + esc(note) + '">' +
+              '</div>' +
+            '</div>' +
+          '</div>';
+        }).join("");
+        return '<div class="comment-group" id="group-p' + esc(group.paragraphId) + '" data-paragraph-id="' + esc(group.paragraphId) + '">' +
+          '<div class="comment-group-header" data-scroll-to="' + esc(group.paragraphId) + '">' +
+            '<span class="paragraph-ref">Para ' + esc(group.paragraphId) + '</span>' +
+            '<span class="paragraph-snippet">' + esc(group.text.substring(0, 110)) + '</span>' +
+            '<span class="group-meta">' + group.items.length + ' annotation' + (group.items.length !== 1 ? 's' : '') +
+              (selCount ? ', ' + selCount + ' selected' : '') + '</span>' +
+          '</div>' +
+          cards +
+        '</div>';
+      }).join("");
+      annotationPanel.innerHTML = filterHtml + profileCardHtml + groupHtml;
+      applyFilter();
+    }
+    function applyFilter() {
+      const cards = annotationPanel.querySelectorAll(".comment-card");
+      const groups = annotationPanel.querySelectorAll(".comment-group");
+      const filterButtons = annotationPanel.querySelectorAll(".persona-filter button");
+      filterButtons.forEach((btn) => {
+        btn.classList.toggle("active", btn.dataset.filter === (activePersona || "all"));
+      });
+      var profileCard = document.getElementById("persona-profile-card");
+      if (activePersona && activePersona !== "all") {
+        if (profileCard) {
+          profileCard.outerHTML = renderPersonaProfileCard(activePersona);
+        } else {
+          var filterEl = annotationPanel.querySelector(".persona-filter");
+          if (filterEl) {
+            filterEl.insertAdjacentHTML("afterend", renderPersonaProfileCard(activePersona));
+          }
+        }
+      } else {
+        if (profileCard) {
+          profileCard.style.display = "none";
+        }
+      }
+      if (!activePersona || activePersona === "all") {
+        cards.forEach((c) => c.classList.remove("filtered-out"));
+        groups.forEach((g) => { g.style.display = ""; });
+        return;
+      }
+      cards.forEach((c) => {
+        c.classList.toggle("filtered-out", c.dataset.persona !== activePersona);
+      });
+      groups.forEach((g) => {
+        const visible = g.querySelectorAll(".comment-card:not(.filtered-out)").length;
+        g.style.display = visible ? "" : "none";
+      });
+    }
+    function updateSelectedStates() {
+      document.querySelectorAll(".comment-card").forEach((card) => {
+        card.classList.toggle("selected", selectedFeedbackIds.has(card.dataset.target));
+      });
+      document.querySelectorAll(".story-paragraph").forEach((para) => {
+        const selCount = selectedCountForParagraph(para.dataset.paragraphId);
+        para.classList.toggle("has-selected", selCount > 0);
+        const selSpan = para.querySelector(".selected-count");
+        if (selSpan) {
+          selSpan.textContent = selCount > 0 ? "(" + selCount + " selected)" : "";
+          selSpan.style.display = selCount > 0 ? "" : "none";
+        }
+      });
+      document.querySelectorAll(".comment-group").forEach((group) => {
+        const selCount = selectedCountForParagraph(group.dataset.paragraphId);
+        const meta = group.querySelector(".group-meta");
+        if (meta) {
+          const visibleCards = group.querySelectorAll(".comment-card:not(.filtered-out)").length;
+          meta.textContent = visibleCards + ' annotation' + (visibleCards !== 1 ? 's' : '') +
+            (selCount ? ', ' + selCount + ' selected' : '');
+        }
+      });
+      const hasSelection = selectedFeedbackIds.size > 0;
+      copyRefineButton.disabled = !hasSelection;
+      copyRevisionButton.disabled = !hasSelection;
+    }
+    function buildFeedback() {
+      var itemUidMap = {};
+      for (var ri = 0; ri < payload.reviews.length; ri++) {
+        var review = payload.reviews[ri];
+        var allItems = (review.strengths || []).concat(review.concerns || []);
+        for (var ii = 0; ii < allItems.length; ii++) {
+          var revItem = allItems[ii];
+          var key = review.persona_id + ":" + revItem.id;
+          if (revItem.item_uid) itemUidMap[key] = revItem.item_uid;
+        }
+      }
+      const selectedTargets = new Set([...document.querySelectorAll("input[data-select]:checked")].map((input) => input.dataset.select));
+      const fb = {
+        schema_version: 2,
+        session_id: payload.session_id,
+        round_id: currentRound,
+        mode: "revise",
+        refinement_pass: 0,
+        selected_items: []
+      };
+      if (selectedTargets.size) {
+        for (const target of [...selectedTargets].sort()) {
+          const noteInput = document.querySelector('input[data-note="' + CSS.escape(target) + '"]');
+          const note = noteInput ? noteInput.value.trim() : (feedbackNotes[target] || "");
+          var threadId = target;
+          var dialogueQ = "";
+          var card = document.querySelector('.comment-card[data-target="' + CSS.escape(target) + '"]');
+          if (card) {
+            var dialInput = card.querySelector('input[data-dialogue]');
+            if (dialInput) {
+              dialogueQ = dialInput.value.trim();
+              threadId = dialInput.dataset.dialogue || target;
+            }
+          }
+          const item = {
+            target_id: target,
+            item_uid: itemUidMap[target] || target,
+            thread_id: threadId
+          };
+          if (note) item.note = note;
+          if (dialogueQ) item.dialogue_question = dialogueQ;
+          fb.selected_items.push(item);
+        }
+      } else {
+        fb.selected_items = [];
+      }
+      fb.helpfulness_rating = null;
+      const lines = [
+        "schema_version: 2",
+        "session_id: " + yamlQuote(payload.session_id),
+        "round_id: " + currentRound,
+        "mode: revise",
+        "refinement_pass: 0",
+        "selected_items:"
+      ];
+      if (!fb.selected_items.length) {
+        lines.push("  []");
+      } else {
+        for (const item of fb.selected_items) {
+          lines.push("  - target_id: " + yamlQuote(item.target_id));
+          lines.push("    item_uid: " + yamlQuote(item.item_uid));
+          lines.push("    thread_id: " + yamlQuote(item.thread_id));
+          if (item.note) lines.push("    note: " + yamlQuote(item.note));
+          if (item.dialogue_question) lines.push("    dialogue_question: " + yamlQuote(item.dialogue_question));
+        }
+      }
+      lines.push("helpfulness_rating: null");
+      yamlBox.textContent = lines.join("\n");
+      const badge = selectionBadge;
+      if (selectedTargets.size) {
+        badge.textContent = selectedTargets.size + " item" + (selectedTargets.size !== 1 ? "s" : "") + " selected";
+        badge.classList.add("has-selection");
+      } else {
+        badge.textContent = "No items selected";
+        badge.classList.remove("has-selection");
+      }
+      selectedFeedbackIds.clear();
+      for (const target of selectedTargets) {
+        selectedFeedbackIds.add(target);
+      }
+      updateSelectedStates();
+      if (fb.selected_items.length > 0) {
+        buildRefinePrompt(fb);
+        buildRevisionPrompt(fb);
+      }
+      updateSubmitButton();
+      return fb;
+    }
+    function buildRefinePrompt(fb) {
+      fb.mode = "refine";
+      fb.round_id = currentRound;
+      var threads = {};
+      if (typeof dialogueThreads !== "undefined") {
+        Object.keys(dialogueThreads).forEach(function(tid) {
+          threads[tid] = dialogueThreads[tid];
+        });
+      }
+      refinePromptBox.textContent =
+        "# Ghost Reader Refine Prompt\n\n" +
+        "Action: refine\n" +
+        "Project root: " + projectRoot + "\n" +
+        "Session ID: " + payload.session_id + "\n" +
+        "Round: " + currentRound + "\n" +
+        "Story unit: " + (storyUnit || "") + "\n\n" +
+        "```yaml\n" + yamlDump(fb) + "\n```\n\n" +
+        (Object.keys(threads).length ? "Dialogue thread state:\n```yaml\n" + yamlDump(threads) + "\n```\n" : "");
+    }
+    function buildRevisionPrompt(fb) {
+      fb.mode = "revise";
+      fb.round_id = currentRound;
+      revisionPromptBox.textContent =
+        "# Ghost Reader Revision Prompt\n\n" +
+        "Action: revise\n" +
+        "Project root: " + projectRoot + "\n" +
+        "Session ID: " + payload.session_id + "\n" +
+        "Round: " + currentRound + "\n" +
+        "Story unit: " + (storyUnit || "") + "\n\n" +
+        "```yaml\n" + yamlDump(fb) + "\n```\n";
+    }
+    function copyRefinePrompt() {
+      copyText(refinePromptBox.textContent).then(function() {
+        showToast("Refine prompt copied — paste into an LLM with Ghost Reader skill");
+      });
+    }
+    function copyRevisionPrompt() {
+      copyText(revisionPromptBox.textContent).then(function() {
+        showToast("Revision prompt copied");
+      });
+    }
+    async function copyText(value) {
+      if (navigator.clipboard && window.isSecureContext) {
+        await navigator.clipboard.writeText(value);
+      } else {
+        const holder = document.createElement("textarea");
+        holder.value = value;
+        holder.style.position = "fixed";
+        holder.style.opacity = "0";
+        document.body.appendChild(holder);
+        holder.select();
+        document.execCommand("copy");
+        holder.remove();
+      }
+    }
+    function showToast(message) {
+      toast.textContent = message;
+      toast.classList.add("show");
+      clearTimeout(toastTimer);
+      toastTimer = setTimeout(() => { toast.classList.remove("show"); }, 2000);
+    }
+    function scrollToParagraph(paragraphId) {
+      const el = document.getElementById("para-" + paragraphId);
+      if (!el) return;
+      document.querySelectorAll(".story-paragraph.focused").forEach((p) => p.classList.remove("focused"));
+      el.classList.add("focused");
+      el.scrollIntoView({ behavior: "smooth", block: "center" });
+    }
+    function scrollToGroup(paragraphId) {
+      const el = document.getElementById("group-p" + paragraphId);
+      if (!el) return;
+      el.scrollIntoView({ behavior: "smooth", block: "start" });
+    }
+    function updateRoundUI() {
+      roundIndicator.textContent = "Round " + currentRound;
+      var idx = roundIds.indexOf(currentRound);
+      prevRoundBtn.disabled = idx <= 0;
+      nextRoundBtn.disabled = idx < 0 || idx >= roundIds.length - 1;
+    }
+    function hoverPair(paraId) {
+      var para = document.getElementById("para-" + paraId);
+      var group = document.getElementById("group-p" + paraId);
+      if (para) para.classList.add("synced");
+      if (group) group.classList.add("synced");
+    }
+    function unhoverPair(paraId) {
+      var para = document.getElementById("para-" + paraId);
+      var group = document.getElementById("group-p" + paraId);
+      if (para) para.classList.remove("synced");
+      if (group) group.classList.remove("synced");
+    }
+    document.addEventListener("mouseenter", function(evt) {
+      var para = evt.target.closest(".story-paragraph.has-comments");
+      if (para) { hoverPair(para.dataset.paragraphId); return; }
+      var group = evt.target.closest(".comment-group");
+      if (group && group.dataset.paragraphId) { hoverPair(group.dataset.paragraphId); }
+    }, true);
+    document.addEventListener("mouseleave", function(evt) {
+      var para = evt.target.closest(".story-paragraph.has-comments");
+      if (para) { unhoverPair(para.dataset.paragraphId); return; }
+      var group = evt.target.closest(".comment-group");
+      if (group && group.dataset.paragraphId) { unhoverPair(group.dataset.paragraphId); }
+    }, true);
+    var _scrollSyncBusy = false;
+    var _scrollSyncTimer = null;
+    function dominantVisibleParaId(container) {
+      var children = container.querySelectorAll(".story-paragraph.has-comments, .comment-group");
+      var best = null;
+      var bestArea = 0;
+      var viewTop = 0;
+      var viewBottom = window.innerHeight || document.documentElement.clientHeight;
+      for (var i = 0; i < children.length; i++) {
+        var r = children[i].getBoundingClientRect();
+        if (r.bottom < 0 || r.top > viewBottom) continue;
+        var visibleTop = Math.max(r.top, viewTop);
+        var visibleBottom = Math.min(r.bottom, viewBottom);
+        var area = Math.max(0, visibleBottom - visibleTop);
+        if (area > bestArea) { bestArea = area; best = children[i]; }
+      }
+      if (!best) return null;
+      if (best.classList.contains("story-paragraph")) return best.dataset.paragraphId;
+      if (best.classList.contains("comment-group")) return best.dataset.paragraphId;
+      return null;
+    }
+    function scrollToPair(paraId, sourcePanel) {
+      if (!paraId) return;
+      _scrollSyncBusy = true;
+      clearTimeout(_scrollSyncTimer);
+      if (sourcePanel !== storyPanel) {
+        var para = document.getElementById("para-" + paraId);
+        if (para) para.scrollIntoView({ behavior: "smooth", block: "start" });
+      }
+      if (sourcePanel !== annotationPanel) {
+        var group = document.getElementById("group-p" + paraId);
+        if (group) group.scrollIntoView({ behavior: "smooth", block: "start" });
+      }
+      _scrollSyncTimer = setTimeout(function() { _scrollSyncBusy = false; }, 600);
+    }
+    storyPanel.addEventListener("scroll", function() {
+      if (_scrollSyncBusy) return;
+      var paraId = dominantVisibleParaId(storyPanel);
+      if (paraId) scrollToPair(paraId, storyPanel);
+    }, { passive: true });
+    annotationPanel.addEventListener("scroll", function() {
+      if (_scrollSyncBusy) return;
+      var paraId = dominantVisibleParaId(annotationPanel);
+      if (paraId) scrollToPair(paraId, annotationPanel);
+    }, { passive: true });
+    function init() {
+      renderStory();
+      renderAnnotationPanel();
+      buildFeedback();
+      updateRoundUI();
+      meta.innerHTML = [
+        "Session " + esc(payload.session_id),
+        storyUnit ? esc(storyUnit) : null,
+        payload.reviews.length + " persona reviews"
+      ].filter(Boolean).map((x) => '<span class="pill">' + x + '</span>').join("");
+      // Footer with generation metadata
+      var generatedDate = payload.generated_at || new Date().toISOString().slice(0, 10);
+      reportFooter.innerHTML = 'Ghost Reader &mdash; persona-driven fiction review &middot; session ' +
+        esc(payload.session_id) + ' &middot; generated ' + esc(generatedDate);
+    }
+    document.addEventListener("input", (event) => {
+      if (event.target.matches("input[data-select]")) {
+        const target = event.target.dataset.select;
+        document.querySelectorAll('input[data-select="' + CSS.escape(target) + '"]').forEach((input) => {
+          input.checked = event.target.checked;
+        });
+        if (event.target.checked) {
+          selectedFeedbackIds.add(target);
+        } else {
+          selectedFeedbackIds.delete(target);
+        }
+        buildFeedback();
+      }
+      if (event.target.matches("input[data-note]")) {
+        feedbackNotes[event.target.dataset.note] = event.target.value;
+        buildFeedback();
+      }
+      if (event.target.matches("input[data-dialogue]")) {
+        dialogueQuestions[event.target.dataset.dialogue] = event.target.value;
+        clearTimeout(dialogueDebounce);
+        dialogueDebounce = setTimeout(() => buildFeedback(), 400);
+      }
+    });
+    document.addEventListener("click", (event) => {
+      const storyPara = event.target.closest(".story-paragraph.has-comments");
+      if (storyPara) {
+        const paraId = storyPara.dataset.paragraphId;
+        scrollToGroup(paraId);
+        return;
+      }
+      const groupHeader = event.target.closest(".comment-group-header");
+      if (groupHeader && groupHeader.dataset.scrollTo) {
+        scrollToParagraph(groupHeader.dataset.scrollTo);
+        return;
+      }
+      if (event.target.matches(".persona-filter button")) {
+        activePersona = event.target.dataset.filter === "all" ? null : event.target.dataset.filter;
+        applyFilter();
+        return;
+      }
+    });
+    var isServerMode = window.location.protocol === "http:" || window.location.protocol === "https:";
+    var submitFeedbackBtn = document.getElementById("submit-feedback-btn");
+    function updateSubmitButton() {
+      if (!isServerMode) return;
+      submitFeedbackBtn.style.display = "";
+      var hasSelection = selectedFeedbackIds.size > 0;
+      submitFeedbackBtn.disabled = !hasSelection;
+      if (hasSelection) {
+        submitFeedbackBtn.textContent = "Submit Feedback (" + selectedFeedbackIds.size + ")";
+      } else {
+        submitFeedbackBtn.textContent = "Submit Feedback";
+      }
+    }
+    async function submitFeedback() {
+      if (!isServerMode) return;
+      var fb = buildFeedback();
+      if (!fb.selected_items || !fb.selected_items.length) {
+        showToast("No items selected for feedback");
+        return;
+      }
+      submitFeedbackBtn.disabled = true;
+      submitFeedbackBtn.textContent = "Submitting...";
+      try {
+        var resp = await fetch("/api/feedback", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(fb)
+        });
+        var data = await resp.json();
+        if (!resp.ok || data.error) {
+          throw new Error(data.error || "Server error");
+        }
+        var dialoguePosted = 0;
+        for (var i = 0; i < fb.selected_items.length; i++) {
+          var item = fb.selected_items[i];
+          var safeTarget = item.target_id.replace(/:/g, "-");
+          var dialInput = document.getElementById("ask-" + safeTarget);
+          if (dialInput && dialInput.value.trim()) {
+            var parts = item.target_id.split(":");
+            await fetch("/api/dialogue", {
+              method: "POST",
+              headers: { "Content-Type": "application/json" },
+              body: JSON.stringify({
+                persona_id: parts[0],
+                item_id: parts[1],
+                text: "**User:** " + dialInput.value.trim(),
+                thread_id: item.thread_id,
+                round_id: currentRound,
+                item_uid: item.item_uid
+              })
+            });
+            dialoguePosted++;
+          }
+        }
+        var msg = "Feedback submitted — agent is processing";
+        if (dialoguePosted) msg += " (" + dialoguePosted + " dialogue question" + (dialoguePosted !== 1 ? "s" : "") + ")";
+        showToast(msg);
+      } catch (err) {
+        showToast("Error: " + (err.message || "Failed to submit"));
+        updateSubmitButton();
+      }
+    }
+    prevRoundBtn.addEventListener("click", function() {
+      var idx = roundIds.indexOf(currentRound);
+      if (idx > 0) {
+        currentRound = roundIds[idx - 1];
+        updateRoundUI();
+      }
+    });
+    nextRoundBtn.addEventListener("click", function() {
+      var idx = roundIds.indexOf(currentRound);
+      if (idx >= 0 && idx < roundIds.length - 1) {
+        currentRound = roundIds[idx + 1];
+        updateRoundUI();
+      }
+    });
+    init();
+  </script>
+</body>
+</html>