Update src/reasoning_panel.py

src/reasoning_panel.py

@@ -154,7 +154,189 @@ def build_panel_data(
 
 def _escape_script_json(d: Any) -> str:
     s = json.dumps(d, ensure_ascii=False)
-    return s.replace("</",
+    return s.replace("</", "<\\/")  # prevent </script> breakage
+
+
+def render_reasoning_panel(
+    panel_data: List[Dict[str, Any]],
+    assessment: str,
+    plan: str,
+    citations: List[Dict[str, Any]] = None,
+    height: int = 720,
+    key: str = None
+):
+    """Render dual-pane (SOAP viewer ↔ Reasoning Panel) as an inline component.
+
+    Left pane shows the claims extracted from Assessment+Plan (read-only preview),
+    which keeps scroll-sync deterministic and fast. The editable textareas remain
+    on the Streamlit page above this component.
+    """
+    citations = citations or []
+    data_js = _escape_script_json(panel_data)
+    refs_js = _escape_script_json(citations)
+
+    left_claims_html = "".join(
+        f'<p class="soap-claim"><span class="marker"></span>{html.escape(d.get("claim",""))}</p>'
+        for d in panel_data
+    )
+
+    html_code = f"""
+    <div id="rpv4-root">
+      <style>
+        :root {{
+          --bg: #ffffff; --fg: #111; --muted: #6b7280; --surface: #f8fafc; --accent: #2563eb;
+          --accent-weak: rgba(37,99,235,.08); --border: #e5e7eb;
+        }}
+        @media (prefers-color-scheme: dark) {{
+          :root {{
+            --bg: #0b0f17; --fg: #eaeef5; --muted: #a8b3cf; --surface: #111827; --accent: #60a5fa;
+            --accent-weak: rgba(96,165,250,.12); --border: #263145;
+          }}
+        }}
+        #rpv4-root {{ font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; color: var(--fg); }}
+        .grid {{ display: grid; grid-template-columns: 1fr 0.9fr; gap: 16px; align-items: start; }}
+        @media (max-width: 980px) {{ .grid {{ grid-template-columns: 1fr; }} }}
+        .panel {{ background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; overflow: auto; max-height: {int(height)-20}px; }}
+        .sec {{ margin: 10px 0 8px; font-size: 14px; letter-spacing:.3px; color:var(--muted); text-transform:uppercase; }}
+        .soap-claim {{ position: relative; margin: 8px 0; padding: 8px 10px 8px 26px; border-radius: 8px; }}
+        .soap-claim.active {{ background: var(--accent-weak); outline: 1px solid var(--accent); }}
+        .marker {{ position: absolute; left: 8px; top: 14px; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }}
+        .soap-claim.active .marker {{ background: var(--accent); }}
+        .claim-card {{ border-bottom: 1px dashed var(--border); padding: 10px 6px; }}
+        .claim-title {{ cursor: pointer; font-weight: 600; }}
+        .features {{ margin-top: 8px; }}
+        .feat {{ display:flex; align-items:center; gap:8px; font-size:13px; margin:3px 0; }}
+        .bar {{ flex:1; height:8px; background:var(--border); border-radius:4px; }}
+        .fill {{ height:8px; background:var(--accent); }}
+        .refs {{ margin-top: 6px; display:flex; flex-wrap:wrap; gap:6px; }}
+        .ref {{ padding:3px 6px; background: var(--accent-weak); border:1px solid var(--border); border-radius:6px; cursor:pointer; }}
+        .ref:hover {{ border-color: var(--accent); }}
+        dialog#evidence {{ border: 1px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--fg); max-width: 680px; }}
+        dialog::backdrop {{ background: rgba(0,0,0,.45); }}
+        .ev-title {{ font-weight:600; margin-bottom:6px; }}
+        .ev-body {{ white-space: pre-wrap; line-height:1.4; }}
+        .kbd {{ font: 12px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono"; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 2px 6px; color: var(--muted); }}
+      </style>
+
+      <div class="grid">
+        <div class="panel" id="soap-pane">
+          <div class="sec" style="margin-top:0;">SOAP — Assessment & Plan</div>
+          {left_claims_html}
+        </div>
+        <div class="panel" id="reason-pane">
+          <div style="display:flex;justify-content:space-between;align-items:center;">
+            <div class="sec" style="margin:0;">REASONING PANEL</div>
+            <div class="kbd" title="Keyboard shortcuts">↑/↓ select • Esc close modal</div>
+          </div>
+          <div id="claims"></div>
+        </div>
+      </div>
+
+      <dialog id="evidence">
+        <div class="ev-title"></div>
+        <div class="ev-body"></div>
+        <div style="margin-top:10px;display:flex;justify-content:flex-end;">
+          <button id="closeEv" class="ref">Close (Esc)</button>
+        </div>
+      </dialog>
+
+      <script>
+        const data = {data_js};
+        const allRefs = {refs_js};
+        const claimsEl = document.getElementById('claims');
+        const soap = document.getElementById('soap-pane');
+        const evidence = document.getElementById('evidence');
+        const evTitle = evidence.querySelector('.ev-title');
+        const evBody = evidence.querySelector('.ev-body');
+        const closeEv = document.getElementById('closeEv');
+
+        function pct(n) {{ return Math.round(n * 100); }}
+
+        function render() {{
+          claimsEl.innerHTML = '';
+          data.forEach((d, idx) => {{
+            const card = document.createElement('div');
+            card.className = 'claim-card';
+            const title = document.createElement('div');
+            title.className = 'claim-title';
+            title.textContent = d.claim || `Claim ${idx+1}`;
+            title.addEventListener('click', () => activate(idx, true));
+            card.appendChild(title);
+
+            const feats = document.createElement('div');
+            feats.className = 'features';
+            (d.features || []).forEach(f => {{
+              const row = document.createElement('div'); row.className = 'feat';
+              const name = document.createElement('div'); name.textContent = f.token;
+              const bar = document.createElement('div'); bar.className = 'bar';
+              const fill = document.createElement('div'); fill.className = 'fill'; fill.style.width = (pct(f.weight)) + '%';
+              const perc = document.createElement('div'); perc.textContent = (pct(f.weight)) + '%';
+              bar.appendChild(fill);
+              row.appendChild(name); row.appendChild(bar); row.appendChild(perc);
+              feats.appendChild(row);
+            }});
+            card.appendChild(feats);
+
+            const refs = document.createElement('div');
+            refs.className = 'refs';
+            (d.refs || []).forEach(r => {{
+              const b = document.createElement('button');
+              b.className = 'ref';
+              b.textContent = r.label || 'Reference';
+              b.title = 'Open evidence snippet';
+              b.addEventListener('click', () => openEvidence(r));
+              refs.appendChild(b);
+            }});
+            card.appendChild(refs);
+
+            claimsEl.appendChild(card);
+          }});
+        }}
+
+        function openEvidence(ref) {{
+          evTitle.textContent = ref.label || 'Evidence';
+          evBody.textContent = ref.snippet || 'Snippet not available for this reference.';
+          evidence.showModal();
+        }}
+        closeEv.addEventListener('click', () => evidence.close());
+        document.addEventListener('keydown', (e) => {{
+          if (e.key === 'Escape') evidence.close();
+          if (['ArrowDown','ArrowUp'].includes(e.key)) {{
+             e.preventDefault();
+             navigate(e.key === 'ArrowDown' ? 1 : -1);
+          }}
+        }});
+
+        function activate(idx, scroll) {{
+          // Highlight claim in left pane
+          const claimEls = soap.querySelectorAll('.soap-claim');
+          claimEls.forEach(el => el.classList.remove('active'));
+          const el = claimEls[idx];
+          if (el) {{
+            el.classList.add('active');
+            if (scroll) el.scrollIntoView({{behavior:'smooth', block:'center'}});
+          }}
+          // Highlight card title (optional)
+          const cardTitles = document.querySelectorAll('.claim-title');
+          cardTitles.forEach((t, i) => t.style.color = (i===idx ? 'var(--accent)' : 'inherit'));
+          window.__rpv4_index = idx;
+        }}
+
+        function navigate(delta) {{
+          const max = (data || []).length;
+          const curr = (window.__rpv4_index || 0);
+          const next = Math.max(0, Math.min(max-1, curr + delta));
+          activate(next, true);
+        }}
+
+        render();
+        // Initial activation
+        activate(0, false);
+      </script>
+    </div>
+    """
+    components.html(html_code, height=height, scrolling=True)
+