pennyrouter 0.3.19 → 0.3.21

package/standalone/viewer.py

@@ -0,0 +1,232 @@
+#!/usr/bin/env python3
+"""Local, dependency-free browser for penny-compare reports.
+
+Run with: python3 apps/compare/viewer.py
+"""
+from __future__ import annotations
+
+import argparse
+import json
+import sqlite3
+from pathlib import Path
+from http.server import BaseHTTPRequestHandler, ThreadingHTTPServer
+from urllib.parse import parse_qs, urlparse
+
+HERE = Path(__file__).resolve().parent
+REPORTS = HERE / "reports"
+
+
+def json_file(path: Path):
+    try:
+        return json.loads(path.read_text())
+    except (OSError, ValueError):
+        return None
+
+
+def find_transcript(side: dict) -> Path | None:
+    direct = Path(side.get("transcript_path", "")) if side.get("transcript_path") else None
+    if direct and direct.exists():
+        return direct
+    sid, harness = side.get("session_id"), side.get("harness")
+    if harness == "opencode":
+        stored = side.get("transcript_path", "")
+        database = stored.split("#", 1)[0] if "#" in stored else str(Path.home() / ".local/share/opencode/opencode.db")
+        path = Path(database)
+        return path if path.exists() else None
+    if not sid:
+        return None
+    roots = []
+    if harness == "claude-code":
+        roots = [Path.home() / ".claude" / "projects"]
+    elif harness == "codex":
+        roots = [Path.home() / ".codex" / "sessions"]
+    for root in roots:
+        if not root.exists():
+            continue
+        for path in root.rglob("*.jsonl"):
+            if path.stem == sid or sid in path.name:
+                return path
+            if harness == "claude-code":
+                try:
+                    with path.open() as handle:
+                        first = handle.readline()
+                    if json.loads(first).get("sessionId") == sid:
+                        return path
+                except (OSError, ValueError):
+                    pass
+    return None
+
+
+def text_content(value) -> str:
+    if isinstance(value, str):
+        return value
+    if isinstance(value, list):
+        parts = []
+        for item in value:
+            if isinstance(item, str):
+                parts.append(item)
+            elif isinstance(item, dict):
+                if item.get("type") in ("text", "output_text", "input_text"):
+                    parts.append(str(item.get("text") or item.get("content") or ""))
+        return "\n".join(p for p in parts if p)
+    return ""
+
+
+def read_turns(side: dict) -> list[dict]:
+    if side.get("harness") == "opencode":
+        stored = side.get("transcript_path", "")
+        session_id = side.get("session_id") or (stored.split("#", 1)[1] if "#" in stored else "")
+        database = stored.split("#", 1)[0] if "#" in stored else str(Path.home() / ".local/share/opencode/opencode.db")
+        if not session_id:
+            return []
+        turns = []
+        try:
+            db = sqlite3.connect(f"file:{database}?mode=ro", uri=True, timeout=0.2)
+            rows = db.execute(
+                "select data from part where session_id = ? order by time_created, id",
+                (session_id,),
+            )
+            for (raw,) in rows:
+                try:
+                    obj = json.loads(raw)
+                except (TypeError, ValueError):
+                    continue
+                if obj.get("type") != "text" or not str(obj.get("text") or "").strip():
+                    continue
+                # OpenCode's text parts do not carry role; assistant parts have a time field,
+                # while the initial prompt is the only user text part in normal sessions.
+                role = "assistant" if obj.get("time") else "user"
+                turns.append({"role": role, "text": str(obj["text"]), "timestamp": None, "id": None})
+            db.close()
+        except (OSError, sqlite3.Error):
+            return []
+        return turns
+    path = find_transcript(side)
+    if not path:
+        return []
+    harness = side.get("harness")
+    turns = []
+    try:
+        lines = path.read_text().splitlines()
+    except OSError:
+        return turns
+    for raw in lines:
+        try:
+            obj = json.loads(raw)
+        except ValueError:
+            continue
+        payload = obj.get("payload") or {}
+        role, content = None, ""
+        if harness == "claude-code":
+            message = obj.get("message") or {}
+            role, content = message.get("role"), text_content(message.get("content"))
+        else:
+            if obj.get("type") == "response_item" and payload.get("type") == "message":
+                role, content = payload.get("role"), text_content(payload.get("content"))
+            elif obj.get("type") == "event_msg" and payload.get("type") == "agent_message":
+                role, content = "assistant", text_content(payload.get("message"))
+        if role not in ("user", "assistant") or not content.strip():
+            continue
+        turns.append({
+            "role": role,
+            "text": content,
+            "timestamp": obj.get("timestamp"),
+            "id": (obj.get("message", {}).get("id") if harness == "claude-code" else payload.get("id")),
+        })
+    return turns
+
+
+def report_summaries():
+    result = []
+    for path in sorted(REPORTS.glob("compare-*.json"), reverse=True):
+        report = json_file(path)
+        if not report:
+            continue
+        result.append({
+            "id": path.name,
+            "created_at": report.get("created_at"),
+            "pricing_profile": report.get("pricing_profile"),
+            "left": report.get("left", {}), "right": report.get("right", {}),
+            "savings": report.get("savings_native_minus_penny", {}),
+        })
+    return result
+
+
+def full_report(name: str):
+    if Path(name).name != name or not name.startswith("compare-"):
+        return None
+    report = json_file(REPORTS / name)
+    if not report:
+        return None
+    for side_name in ("left", "right"):
+        side = report.get(side_name, {})
+        transcript = find_transcript(side)
+        side["turns"] = read_turns(side)
+        side["transcript_available"] = bool(transcript)
+        side["transcript_path"] = str(transcript) if transcript else ""
+    return report
+
+
+PAGE = r'''<!doctype html>
+<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
+<title>Penny Compare</title><style>
+:root{color-scheme:dark;--bg:#0d1117;--panel:#151c25;--line:#273443;--muted:#8b9aaa;--text:#edf4f7;--green:#55e6a5;--blue:#79b8ff;--amber:#ffc857}
+*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 85% -10%,#19332f 0,#0d1117 38%);color:var(--text);font:14px/1.5 Inter,ui-sans-serif,system-ui,sans-serif}main{max-width:1440px;margin:auto;padding:34px 28px 70px}h1{font-size:31px;margin:0;letter-spacing:-.04em}h2{font-size:18px;margin:0 0 15px}.eyebrow{color:var(--green);font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase}.top{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:28px}.top p{color:var(--muted);margin:8px 0 0}.select{background:var(--panel);border:1px solid var(--line);color:var(--text);border-radius:9px;padding:10px 12px;min-width:310px}.panel{background:color-mix(in srgb,var(--panel) 92%,transparent);border:1px solid var(--line);border-radius:14px;padding:20px;box-shadow:0 15px 45px #0002}.summary{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}.metric{padding:16px;border:1px solid var(--line);border-radius:10px;background:#10161e}.metric label{display:block;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.08em}.metric strong{display:block;font-size:23px;margin-top:5px}.good{color:var(--green)}.bad{color:#ff8a8a}.compare{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px}.sidehead{display:flex;justify-content:space-between;align-items:start;border-bottom:1px solid var(--line);padding-bottom:13px;margin-bottom:14px}.role{font-weight:750;font-size:17px}.model,.meta{color:var(--muted);font-size:12px}.statrow{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid #22303c}.statrow span:first-child{color:var(--muted)}.bar{height:7px;background:#26323c;border-radius:99px;margin-top:14px;overflow:hidden}.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--blue),var(--green));border-radius:inherit}.turngrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.turns{display:flex;flex-direction:column;gap:7px;max-height:520px;overflow:auto}.turn{border:1px solid var(--line);background:#10161e;border-radius:9px;padding:11px 13px;cursor:pointer;text-align:left;color:var(--text)}.turn:hover,.turn.active{border-color:var(--green);background:#162620}.turntop{display:flex;justify-content:space-between;color:var(--muted);font-size:11px;text-transform:uppercase}.turntext{display:block;margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.detail{margin-top:14px;background:#0b1016;border:1px solid var(--line);border-radius:10px;padding:16px;min-height:145px}.detail pre{font:13px/1.6 ui-monospace,SFMono-Regular,monospace;white-space:pre-wrap;overflow-wrap:anywhere;margin:8px 0 0;color:#d6e3e8}.empty{color:var(--muted);padding:25px 4px}.session{font:11px ui-monospace,monospace;color:var(--muted);word-break:break-all;margin-top:12px}@media(max-width:800px){main{padding:22px 14px}.top,.compare,.turngrid{display:block}.select{margin-top:18px;width:100%;min-width:0}.summary{grid-template-columns:1fr 1fr}.compare>.panel,.turngrid>.panel{margin-bottom:14px}}
+</style></head><body><main><div class="top"><div><div class="eyebrow">Penny Router / Lab</div><h1>Comparison reports</h1><p>Inspect the cost, token shape, and actual transcript behind every run.</p></div><select id="reports" class="select"></select></div><div id="app"></div></main><script>
+const $=s=>document.querySelector(s), fmt=n=>Number(n||0).toLocaleString(), money=n=>'$'+Math.abs(Number(n||0)).toFixed(4), money2=n=>'$'+Math.abs(Number(n||0)).toFixed(2), pct=n=>Math.abs(Number(n||0)).toFixed(0)+'%';
+let report;
+function savingCopy(value, percent, noun){const saved=Number(value||0)>=0;return {label:saved?'Penny '+noun:'Penny '+noun.replace('savings','cost'), amount:(saved?'':'−')+money(value), detail:pct(percent)+(saved?' less than native':' more than native')};}
+function sideCard(side){const t=side.totals||{}, max=Math.max((report.left.totals||{}).total||0,(report.right.totals||{}).total||0,1);return `<section class="panel"><div class="sidehead"><div><div class="role">${esc(side.label||side.role||'Side')}</div><div class="model">${esc(side.variant||'')} · ${esc(side.harness||'')}</div></div><div class="eyebrow">${esc(side.role||'')}</div></div><div class="statrow"><span>Cost</span><b>${money(t.cost)}</b></div><div class="statrow"><span>Total tokens</span><b>${fmt(t.total)}</b></div><div class="statrow"><span>Input / cache read</span><b>${fmt(t.fresh_input)} / ${fmt(t.cache_read)}</b></div><div class="statrow"><span>Output</span><b>${fmt(t.output)}</b></div><div class="statrow"><span>Model calls</span><b>${fmt(side.call_count)}</b></div><div class="bar"><i style="width:${Math.max(2,(t.total||0)/max*100)}%"></i></div><div class="session"><span>session ${esc(side.session_id||'not recorded')}</span><span class="transcript-label">JSONL path</span><span class="transcript-path">${esc(side.transcript_path||'Transcript unavailable for this older report')}</span></div></section>`}
+function esc(v){return String(v??'').replace(/[&<>"']/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]))}
+function turns(side,which){let list=side.turns||[];return `<section class="panel"><div class="sidehead"><h2>${esc(side.label||which)} turns</h2><span class="meta">${list.length} messages</span></div><div class="turns">${list.length?list.map((x,i)=>`<button class="turn turn-${esc(x.role)}" aria-expanded="false" data-side="${which}" data-index="${i}"><span class="turntop"><span>${esc(x.timestamp||'')}</span></span><span class="turntext">${esc(x.text.slice(0,320))}${x.text.length>320?'…':''}</span></button>`).join(''):'<div class="empty">No linked JSONL transcript found.</div>'}</div></section>`}
+function render(){let l=report.left||{},r=report.right||{},s=report.savings_native_minus_penny||{},c=savingCopy(s.cost,s.cost_percent,'savings'),t=savingCopy(s.tokens,s.token_percent,'token savings');$('#app').innerHTML=`<div class="summary"><div class="metric"><label>${c.label}</label><strong class="${s.cost>=0?'good':'bad'}">${s.cost>=0?'':'−'}${money2(s.cost)} (${pct(s.cost_percent)})</strong></div><div class="metric"><label>${t.label}</label><strong class="${s.tokens>=0?'good':'bad'}">${s.tokens>=0?'':'−'}${fmt(s.tokens)} (${pct(s.token_percent)})</strong></div><div class="metric"><label>Run date</label><strong>${esc(new Date(report.created_at).toLocaleDateString())}</strong><span class="meta">${esc(new Date(report.created_at).toLocaleTimeString())}</span></div><div class="metric"><label>Pricing</label><strong>${esc(report.pricing_profile||'standard')}</strong><span class="meta">${esc(l.call_count||0)} vs ${esc(r.call_count||0)} calls</span></div></div><div class="compare">${sideCard(l)}${sideCard(r)}</div><div class="turngrid">${turns(l,'left')}${turns(r,'right')}</div>`;document.querySelectorAll('.turn').forEach(b=>b.onclick=()=>{const side=report[b.dataset.side],x=side.turns[Number(b.dataset.index)],expanded=b.classList.toggle('expanded');document.querySelectorAll('.turn').forEach(other=>{if(other!==b){other.classList.remove('expanded','active');other.setAttribute('aria-expanded','false');const otherSide=report[other.dataset.side],otherTurn=otherSide.turns[Number(other.dataset.index)];other.querySelector('.turntext').textContent=otherTurn.text.slice(0,320)+(otherTurn.text.length>320?'…':'')}});b.classList.toggle('active',expanded);b.setAttribute('aria-expanded',String(expanded));b.querySelector('.turntext').textContent=expanded?x.text.slice(0):x.text.slice(0,320)+(x.text.length>320?'…':'')})}
+async function load(){let list=await fetch('/api/reports').then(r=>r.json());$('#reports').innerHTML=list.map(x=>`<option value="${esc(x.id)}">${new Date(x.created_at).toLocaleString()} · ${esc(x.left.label||'left')} vs ${esc(x.right.label||'right')}</option>`).join('');if(!list.length){$('#app').innerHTML='<div class="panel empty">No reports found in apps/compare/reports.</div>';return}async function choose(id){report=await fetch('/api/report?id='+encodeURIComponent(id)).then(r=>r.json());render()}$('#reports').onchange=()=>choose($('#reports').value);choose(list[0].id)}load();
+</script></body></html>'''
+
+
+class Handler(BaseHTTPRequestHandler):
+    def send_json(self, value, status=200):
+        body = json.dumps(value).encode()
+        self.send_response(status); self.send_header("Content-Type", "application/json"); self.send_header("Content-Length", str(len(body))); self.end_headers(); self.wfile.write(body)
+    def do_GET(self):
+        parsed = urlparse(self.path)
+        if parsed.path == "/":
+            enhancement = '''<style>:root{color-scheme:light;--paper:#f3ede1;--paper-raised:#fbf7ef;--paper-sunk:#e8e0d0;--line:#d8cfbd;--line-strong:#b9ad96;--navy:#233044;--navy-soft:#3e4c61;--ink:#1c1814;--ink-soft:#4d473f;--ink-faint:#837a6e;--brick:#b23a2c;--brick-deep:#8f2b1f;--brick-tint:#f4e2dd;--green:#2f7d4f;--green-tint:#dcecdf}body{background-color:var(--paper);background-image:radial-gradient(rgba(28,24,20,.022) 1px,transparent 1px),radial-gradient(rgba(28,24,20,.018) 1px,transparent 1px);background-size:7px 7px,11px 11px;color:var(--ink);font-family:Arial,system-ui,sans-serif}.top p,.model,.meta,.barlabel{color:var(--ink-faint)}h1,h2{color:var(--navy)}.eyebrow{color:var(--brick)}.select{background:var(--paper-raised);border-color:var(--line-strong);color:var(--ink)}.panel,.metric{background:var(--paper-raised);border-color:var(--line);box-shadow:0 1px 2px rgba(28,24,20,.05),0 10px 28px -14px rgba(28,24,20,.18)}.statrow{border-color:var(--line)}.statrow span:first-child{color:var(--ink-soft)}.bar{background:var(--paper-sunk)}.bar i{background:linear-gradient(90deg,#2f7d4f,#d49b35 58%,#b23a2c)}.barlabel{font-size:12px;margin-top:7px}.session{display:none}.turn{background:var(--paper-raised);border-color:var(--line);color:var(--ink)}.turn:hover,.turn.active{border-color:var(--brick);background:var(--brick-tint)}.turntop{color:var(--ink-faint)}.detail{background:var(--paper-sunk);border-color:var(--line)}.detail pre{color:var(--ink)}.good{color:var(--green)}.bad{color:var(--brick)}</style><script>new MutationObserver(()=>document.querySelectorAll('.bar').forEach(bar=>{if(bar.nextElementSibling?.classList.contains('barlabel'))return;const row=[...bar.closest('.panel').querySelectorAll('.statrow')].find(x=>x.firstElementChild?.textContent==='Total tokens');if(!row)return;const label=document.createElement('div');label.className='barlabel';label.textContent='total tokens '+row.lastElementChild.textContent;bar.after(label)})).observe(document.documentElement,{childList:true,subtree:true});</script>'''
+            enhancement += '''<style>
+.compare,.turngrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
+.compare>.panel,.turngrid>.panel,.turns,.detail{min-width:0}
+.turn{display:block;width:88%;min-width:0;border-color:var(--line);border-radius:16px;padding:13px 16px;transition:border-color .15s,box-shadow .15s}
+.turn-user{align-self:flex-end;background:#e9f0fb;border-color:#d8e3f2;color:#172b4d}
+.turn-assistant{align-self:flex-start;background:var(--paper-raised)}
+.turn:hover,.turn.active{border-color:var(--line-strong);background:inherit;box-shadow:0 0 0 2px rgba(62,76,97,.08)}
+.turn-user:hover,.turn-user.active{background:#e9f0fb}
+.turntop{justify-content:flex-end;gap:12px;min-width:0}.turntop span{min-width:0;overflow-wrap:anywhere;font-size:10px}
+.turntext{white-space:normal;overflow-wrap:anywhere;word-break:break-word}
+.session{display:grid;gap:4px;word-break:break-word;overflow-wrap:anywhere}
+.transcript-label{font:10px Arial,system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)}
+.transcript-path{display:block}
+@media(max-width:800px){.compare,.turngrid{display:block}}
+</style>'''
+            enhancement += '''<script>new MutationObserver(()=>document.querySelectorAll('.bar i').forEach(fill=>{const width=parseFloat(fill.style.width);if(width>0)fill.style.backgroundSize=(10000/width)+'% 100%'})).observe(document.documentElement,{childList:true,subtree:true});</script>'''
+            body = PAGE.replace("</head>", enhancement + "</head>").encode(); self.send_response(200); self.send_header("Content-Type", "text/html; charset=utf-8"); self.send_header("Content-Length", str(len(body))); self.end_headers(); self.wfile.write(body); return
+        if parsed.path == "/api/reports": self.send_json(report_summaries()); return
+        if parsed.path == "/api/report":
+            data = full_report(parse_qs(parsed.query).get("id", [""])[0]); self.send_json(data or {"error": "report not found"}, 404 if not data else 200); return
+        self.send_error(404)
+    def log_message(self, fmt, *args): pass
+
+
+def main():
+    global REPORTS
+    parser = argparse.ArgumentParser(description="View penny-compare reports in a browser")
+    parser.add_argument("--port", type=int, default=8788)
+    parser.add_argument("--reports", type=Path, default=REPORTS)
+    args = parser.parse_args()
+    REPORTS = args.reports.resolve()
+    server = ThreadingHTTPServer(("127.0.0.1", args.port), Handler)
+    print(f"Penny Compare viewer: http://127.0.0.1:{args.port}")
+    try: server.serve_forever()
+    except KeyboardInterrupt: pass
+
+
+if __name__ == "__main__": main()