transcript-viewer 0.11.2__tar.gz → 0.12.0__tar.gz

{transcript_viewer-0.11.2 → transcript_viewer-0.12.0}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.5
 Name: transcript-viewer
-Version: 0.11.2
+Version: 0.12.0
 Summary: Browse agent transcripts in a local, dependency-free web viewer.
 License: MIT
 Requires-Python: >=3.12

{transcript_viewer-0.11.2 → transcript_viewer-0.12.0}/pyproject.toml

@@ -1,6 +1,6 @@
 [project]
 name = "transcript-viewer"
-version = "0.11.2"
+version = "0.12.0"
 description = "Browse agent transcripts in a local, dependency-free web viewer."
 readme = "README.md"
 requires-python = ">=3.12"

{transcript_viewer-0.11.2 → transcript_viewer-0.12.0}/src/transcript_viewer/page.html

@@ -388,14 +388,17 @@ pre{background:var(--sunk);border-radius:7px;padding:10px;overflow:auto;font-siz
 #lanes>summary .fine em{font-style:normal;color:var(--accent)}
 .lanes-body{padding:2px 16px 12px;border-top:1px solid var(--line)}
 .lane{display:grid;grid-template-columns:150px 1fr;gap:0 12px;align-items:center}
-.lane.tight{grid-template-columns:118px 1fr;gap:0 10px}
+/* Denser than the roomy version, but still a row you can aim at: thirty of
+   these is a screenful, and a 13px row with an 8px bar read as a scatter
+   plot rather than a set of lanes. */
+.lane.tight{grid-template-columns:150px 1fr;gap:0 12px}
 .lane-name{display:flex;align-items:baseline;gap:7px;min-width:0}
 .lane-name .kind{font:12px var(--font-mono);color:var(--accent);overflow:hidden;
   text-overflow:ellipsis;white-space:nowrap}
 .lane-name .kind.main{color:var(--ink);font-weight:600}
 .lane-name .n{font:10px var(--font-mono);color:var(--faint);margin-left:auto;flex:none}
 .track{position:relative;height:22px}
-.lane.tight .track{height:13px}
+.lane.tight .track{height:19px}
 .track .rule{position:absolute;left:0;right:0;top:50%;height:1px;background:var(--line)}
 .track .tick{position:absolute;top:0;bottom:0;width:1px;background:var(--line);opacity:.45}
 /* A floor, so a four-minute subagent in a thirty-hour run is still a target.
@@ -403,7 +406,7 @@ pre{background:var(--sunk);border-radius:7px;padding:10px;overflow:auto;font-siz
    the tooltip carry the real one. */
 .bar{position:absolute;top:50%;transform:translateY(-50%);height:14px;min-width:7px;
   border-radius:3px;background:var(--accent);opacity:.85;cursor:pointer;border:0;padding:0}
-.lane.tight .bar{height:8px}
+.lane.tight .bar{height:11px}
 .bar:hover,.bar:focus-visible{opacity:1;outline:1px solid var(--ink);outline-offset:1px}
 .bar.main{background:var(--ink);opacity:.85;cursor:default}
 .bar.main:hover{outline:none;opacity:.85}
@@ -416,11 +419,13 @@ pre{background:var(--sunk);border-radius:7px;padding:10px;overflow:auto;font-siz
    rather than repeated into each row. */
 .lanes-tracks{position:relative}
 .bandlayer{position:absolute;left:162px;right:0;top:0;bottom:0;pointer-events:none}
-.lane.tight ~ .bandlayer,.lanes-tracks:has(.lane.tight) .bandlayer{left:128px}
-.gapmark{position:absolute;top:0;bottom:0;width:0;border-left:1px dashed var(--line)}
-.gapmark:after{content:"";position:absolute;left:-2px;top:0;bottom:0;width:5px;
-  background:var(--bg);opacity:.9;border-left:1px dashed var(--muted);
-  border-right:1px dashed var(--muted);opacity:.35}
+.lane.tight ~ .bandlayer,.lanes-tracks:has(.lane.tight) .bandlayer{left:162px}
+/* Where the axis was cut. One thin line, and only for the cuts worth seeing —
+   one session skips 152 quiet stretches, and marking every one turned the
+   whole chart into vertical stripes. The rest are still skipped; they are
+   simply not each announced. */
+.gapmark{position:absolute;top:0;bottom:0;width:0;
+  border-left:1px dashed var(--line);opacity:.7}
 /* Conversations that belong to the record rather than to any step. */
 .loose{margin-top:18px;padding-top:12px;border-top:1px solid var(--line)}
 .loose-head{font:11px var(--font-mono);color:var(--muted);margin-bottom:8px}
@@ -2272,11 +2277,39 @@ function pick(key){
   fetch("/api/trajectory?id="+encodeURIComponent(key)).then(r=>r.json()).then(t=>{
     if(t.error){main.innerHTML=`<div class="empty">${esc(t.error)}</div>`;return}
     traj=t;limit=PAGE_SIZE;query="";lens="all";tab="trajectory";extra=null;RENAMING=false;render();
+    // The first screenful is up; bring the rest along behind it.
+    fillRest();
   });
 }
 
 const toggle=r=>{show[r]=!show[r];limit=PAGE_SIZE;render()};
-const more=()=>{limit+=PAGE_SIZE*4;render()};
+/* The rest of a long run, drawn without being asked for.
+
+   A transcript used to stop at 250 steps behind a Show more button. Nobody
+   wants a button; they want the transcript. But the largest run here is 8,445
+   steps and 34 MB of markup, which is a second of the page doing nothing if it
+   is all drawn at once — so the first screenful still paints immediately and
+   the rest arrives in the gaps between frames, keeping the reader's place each
+   time. By the time anyone scrolls, it is there. */
+const FILL_CHUNK = 500;
+let FILLING = 0;
+
+function fillRest() {
+  clearTimeout(FILLING);
+  if (!traj || tab !== "trajectory") return;
+  const idle = globalThis.requestIdleCallback || ((fn) => setTimeout(fn, 32));
+  FILLING = setTimeout(() => {
+    idle(() => {
+      if (!traj || tab !== "trajectory") return;
+      if (limit >= traj.steps.length) return;
+      const at = main.scrollTop;
+      limit += FILL_CHUNK;
+      render();
+      main.scrollTop = at;
+      fillRest();
+    });
+  }, 0);
+}
 const toggleRaw=()=>{
   raw=!raw;
   // Boxes flipped by hand were disagreeing with the old setting, not this one.
@@ -2526,7 +2559,7 @@ function timeScale(lo, hi, busy) {
   return {
     posOf,
     room,
-    gaps: gaps.map(([a, b]) => ({ at: posOf(a), took: duration(b - a) })),
+    gaps: gaps.map(([a, b]) => ({ at: posOf(a), ms: b - a, took: duration(b - a) })),
     kept,
     skipped,
   };
@@ -2591,7 +2624,14 @@ function drawLanes(t) {
   const scale = timeScale(lo, hi, busy);
   const bands = together(timed);
 
-  const breaks = scale.gaps.map((g) =>
+  // Every quiet stretch is skipped; only the large ones are marked. Drawing a
+  // line for all 152 of one session's turned the chart into vertical stripes,
+  // and a mark every few pixels tells a reader nothing they can act on.
+  const worth = scale.gaps
+    .slice()
+    .sort((a, b) => b.ms - a.ms)
+    .slice(0, 8);
+  const breaks = worth.map((g) =>
     `<span class="gapmark" style="left:${g.at}%" title="nothing running for ${esc(g.took)}"></span>`
   ).join("");
 
@@ -2750,6 +2790,18 @@ function laneCard(ev, id) {
    first. A lane from a record where nothing spawned it is found in the block
    after the run instead — which only exists in the plain view, so a lens or a
    search is cleared to get back to it rather than failing quietly. */
+/* Put an element at the top of the reading area, with room to breathe. */
+function laneScroll(el) {
+  const main = document.getElementById("main");
+  if (!main || !el.getBoundingClientRect || !main.getBoundingClientRect) {
+    if (el.scrollIntoView) el.scrollIntoView({ behavior: "smooth", block: "start" });
+    return;
+  }
+  const top =
+    main.scrollTop + el.getBoundingClientRect().top - main.getBoundingClientRect().top - 16;
+  main.scrollTo({ top: Math.max(0, top), behavior: "smooth" });
+}
+
 function openLane(id) {
   laneCard(null);
   const lane = LANES.find((l) => l.id === id);
@@ -2783,9 +2835,11 @@ function openLane(id) {
   box.classList.add("found");
   // After the fold, not before: opening changes the height, and scrolling to
   // where the box used to end leaves the reader above what they asked for.
-  requestAnimationFrame(() =>
-    box.scrollIntoView({ behavior: "smooth", block: "center" }),
-  );
+  //
+  // To the top of it, not the middle. Centring a box puts a subagent of any
+  // length halfway through itself, when what was asked for was the subagent —
+  // which starts at its first step.
+  requestAnimationFrame(() => laneScroll(box));
   setTimeout(() => box.classList.remove("found"), 1400);
 }
 
@@ -2913,8 +2967,8 @@ function trajectoryTab(t,e,branches,branchSteps,counts,q){
     </div>
     ${shown.map(({s,i})=>step(s,t,0,i,"")).join("")
       ||`<div class="empty">Nothing matches.</div>`}
-    ${total>shown.length?`<div class="more"><button onclick="more()">Show more —
-        ${num(shown.length)} of ${num(total)} steps</button></div>`:""}
+    ${total>shown.length?`<div class="more"><span class="fine">
+        drawing the rest — ${num(shown.length)} of ${num(total)} steps</span></div>`:""}
     ${(()=>{
       // Only in the plain view: a lens or a search is a question about the
       // steps of this run, and answering it with whole other conversations

{transcript_viewer-0.11.2 → transcript_viewer-0.12.0}/tests/page.test.js

@@ -2124,3 +2124,100 @@ test("a lane whose box is filtered away brings the view back rather than failing
   assert.strictEqual(out.query, "");
   assert.strictEqual(out.found, true);
 });
+
+test("a lane lands on the top of what it opened, not the middle of it", () => {
+  // Centring put a long subagent halfway through itself. What was asked for is
+  // the subagent, which starts at its first step.
+  const moved = [];
+  const box = {
+    open: false,
+    classList: { add() {}, remove() {} },
+    getBoundingClientRect: () => ({ top: 900 }),
+  };
+  const main = {
+    scrollTop: 200,
+    getBoundingClientRect: () => ({ top: 60 }),
+    scrollTo: (opts) => moved.push(opts),
+  };
+  global.__el = { main, box };
+
+  run(`
+    document.getElementById = (id) => (id === "main" ? globalThis.__el.main : null);
+    laneScroll(globalThis.__el.box);
+  `);
+
+  assert.strictEqual(moved.length, 1, "it should scroll the reading area itself");
+  // 200 + 900 - 60 - 16 of breathing room.
+  assert.strictEqual(moved[0].top, 1024);
+  assert.strictEqual(moved[0].behavior, "smooth");
+});
+
+test("landing does not scroll above the top of the run", () => {
+  const moved = [];
+  global.__el2 = {
+    main: {
+      scrollTop: 0,
+      getBoundingClientRect: () => ({ top: 60 }),
+      scrollTo: (o) => moved.push(o),
+    },
+    box: { getBoundingClientRect: () => ({ top: 10 }) },
+  };
+  run(`
+    document.getElementById = (id) => (id === "main" ? globalThis.__el2.main : null);
+    laneScroll(globalThis.__el2.box);
+  `);
+  assert.strictEqual(moved[0].top, 0, "never a negative offset");
+});
+
+test("the box a lane opened is marked, and the mark is a real rule", () => {
+  const style = page.slice(page.indexOf("<style>"), page.indexOf("</style>"));
+  assert.match(style, /\.branch\.found\{/, "the class must style something");
+  const script = page.slice(page.indexOf("<script>"), page.lastIndexOf("</script>"));
+  assert.match(script, /classList\.add\("found"\)/, "and something must set it");
+});
+
+test("a long run fills itself in rather than offering a button", () => {
+  const steps = [];
+  for (let i = 0; i < 900; i++) {
+    steps.push({ step_id: i + 1, source: "agent", message: "working" });
+  }
+  const html = run(`
+    traj = {steps: ${JSON.stringify(steps)}};
+    cur = "k"; INDEX = [{key:"k"}]; lens = "all"; query = ""; limit = 250;
+    return trajectoryTab(traj, {}, [], new Set(), {all: 900}, "");
+  `);
+  assert.ok(!/Show more/.test(html), "nobody wants a button; they want the transcript");
+  assert.match(html, /drawing the rest/, "but it should say more is coming");
+  assert.match(html, /250 of 900 steps/);
+});
+
+test("once everything is drawn it says nothing at all", () => {
+  const steps = [{ step_id: 1, source: "user", message: "hi" }];
+  const html = run(`
+    traj = {steps: ${JSON.stringify(steps)}};
+    cur = "k"; INDEX = [{key:"k"}]; lens = "all"; query = ""; limit = 250;
+    return trajectoryTab(traj, {}, [], new Set(), {all: 1}, "");
+  `);
+  assert.ok(!/drawing the rest/.test(html));
+});
+
+test("filling holds the reader's place, and stops when the run is done", () => {
+  const out = run(`
+    const steps = [];
+    for (let i = 0; i < 1200; i++) steps.push({step_id:i+1, source:"agent", message:"x"});
+    traj = {steps}; cur = "k"; INDEX = [{key:"k"}];
+    lens = "all"; query = ""; tab = "trajectory"; limit = 250;
+    main.scrollTop = 400;
+
+    // Run the scheduler by hand: each tick draws one more chunk.
+    let ticks = 0;
+    globalThis.setTimeout = (fn) => { if (ticks++ < 50) fn(); return 0; };
+    globalThis.clearTimeout = () => {};
+    globalThis.requestIdleCallback = (fn) => fn();
+
+    fillRest();
+    return { limit, steps: traj.steps.length, at: main.scrollTop };
+  `);
+  assert.strictEqual(out.limit >= out.steps, true, `stopped at ${out.limit} of ${out.steps}`);
+  assert.strictEqual(out.at, 400, "the reader stays where they were");
+});

{transcript_viewer-0.11.2 → transcript_viewer-0.12.0}/uv.lock

@@ -388,7 +388,7 @@ wheels = [
 
 [[package]]
 name = "transcript-viewer"
-version = "0.11.2"
+version = "0.12.0"
 source = { editable = "." }
 dependencies = [
     { name = "atif-make" },