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

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

@@ -1,6 +1,6 @@
 Metadata-Version: 2.5
 Name: transcript-viewer
-Version: 0.12.0
+Version: 0.14.0
 Summary: Browse agent transcripts in a local, dependency-free web viewer.
 License: MIT
 Requires-Python: >=3.12
@@ -179,8 +179,21 @@ If that directory is still there, the first run moves it to
 `~/.transcript-viewer` — index, annotations and stored keys together — and says
 so. Nothing is left behind and nothing is copied twice.
 
-A run that delegated shows a **timeline** above its steps: one lane per
-subagent, laid out on the clock. It exists for the one thing a nested box
+A run that delegated shows what it farmed out, above its steps, as a **list**
+or a **timeline**. The list leads because the common question is what was asked
+and what came back, and the median subagent here is two steps — a bar for which
+says almost nothing. It carries the task, the kind, the steps, how long it took
+and the tools it reached for, sorted however you ask.
+
+The timeline is for when the question is *when*, and alongside what. A row is
+shared by everything that did not overlap, so a second row exists only because
+two things ran at once: thirty subagents in one session pack into eight rows,
+and a session of fifteen packs into one, which is the honest picture of a run
+that never did two things at a time. Either way a subagent is called what it was asked to
+do — "Review backend for bugs and DRY" rather than "general-purpose" — wherever
+that was written down, which is 50 of the 53 Claude Code subagents here; the
+kind is the fallback, and reads as a handle rather than as prose so the
+difference is visible. It exists for the one thing a nested box
 cannot say — that two subagents were running at the same moment, which 25 pairs
 in the corpus this was built against were. Two bars in the same column of the
 chart is what says it; overlap gets no colour of its own, since a second
@@ -188,8 +201,13 @@ encoding of the same fact is noise.
 
 Clicking a lane opens the box the transcript already has for it rather than
 showing the same thing twice, drawing the run out far enough to reach it first:
-a long run paints 250 steps at a time, and in one real session every delegation
-happens after step 1,231.
+in one real session every delegation happens after step 1,231.
+
+A long run paints its first 250 steps at once and fills the rest in behind
+itself, so there is nothing to press and nothing to wait for. The largest run
+here is 8,445 steps and 34 MB of markup, which is a second of a blank page if
+it is drawn in one go, so the rest arrives in the gaps between frames and the
+reader keeps their place.
 
 Where a session spans days but holds hours of work — one runs 10.3 days and
 contains 5.3 hours, with 31 gaps over an hour — the quiet stretches are skipped
@@ -199,6 +217,12 @@ that floor its width is not its duration; the card carries the real one. A
 transcript with no timestamps lays the same lanes out by step instead and says
 so, and one that delegated nothing shows no timeline at all.
 
+A transcript has an address: opening one puts its key in the URL, so a refresh
+comes back to it and a link can be sent to someone with the same transcript.
+The key is the hash of the file's contents, so it is the same key on another
+machine holding the same file, and back and forward move between the library
+and a run.
+
 **Clear library** above the tree forgets every session at once, after saying
 how many and what it will touch. Files are left alone by the same rule as a
 single removal — only copies the viewer made itself are deleted — and stored

{transcript_viewer-0.12.0 → transcript_viewer-0.14.0}/README.md

@@ -166,8 +166,21 @@ If that directory is still there, the first run moves it to
 `~/.transcript-viewer` — index, annotations and stored keys together — and says
 so. Nothing is left behind and nothing is copied twice.
 
-A run that delegated shows a **timeline** above its steps: one lane per
-subagent, laid out on the clock. It exists for the one thing a nested box
+A run that delegated shows what it farmed out, above its steps, as a **list**
+or a **timeline**. The list leads because the common question is what was asked
+and what came back, and the median subagent here is two steps — a bar for which
+says almost nothing. It carries the task, the kind, the steps, how long it took
+and the tools it reached for, sorted however you ask.
+
+The timeline is for when the question is *when*, and alongside what. A row is
+shared by everything that did not overlap, so a second row exists only because
+two things ran at once: thirty subagents in one session pack into eight rows,
+and a session of fifteen packs into one, which is the honest picture of a run
+that never did two things at a time. Either way a subagent is called what it was asked to
+do — "Review backend for bugs and DRY" rather than "general-purpose" — wherever
+that was written down, which is 50 of the 53 Claude Code subagents here; the
+kind is the fallback, and reads as a handle rather than as prose so the
+difference is visible. It exists for the one thing a nested box
 cannot say — that two subagents were running at the same moment, which 25 pairs
 in the corpus this was built against were. Two bars in the same column of the
 chart is what says it; overlap gets no colour of its own, since a second
@@ -175,8 +188,13 @@ encoding of the same fact is noise.
 
 Clicking a lane opens the box the transcript already has for it rather than
 showing the same thing twice, drawing the run out far enough to reach it first:
-a long run paints 250 steps at a time, and in one real session every delegation
-happens after step 1,231.
+in one real session every delegation happens after step 1,231.
+
+A long run paints its first 250 steps at once and fills the rest in behind
+itself, so there is nothing to press and nothing to wait for. The largest run
+here is 8,445 steps and 34 MB of markup, which is a second of a blank page if
+it is drawn in one go, so the rest arrives in the gaps between frames and the
+reader keeps their place.
 
 Where a session spans days but holds hours of work — one runs 10.3 days and
 contains 5.3 hours, with 31 gaps over an hour — the quiet stretches are skipped
@@ -186,6 +204,12 @@ that floor its width is not its duration; the card carries the real one. A
 transcript with no timestamps lays the same lanes out by step instead and says
 so, and one that delegated nothing shows no timeline at all.
 
+A transcript has an address: opening one puts its key in the URL, so a refresh
+comes back to it and a link can be sent to someone with the same transcript.
+The key is the hash of the file's contents, so it is the same key on another
+machine holding the same file, and back and forward move between the library
+and a run.
+
 **Clear library** above the tree forgets every session at once, after saying
 how many and what it will touch. Files are left alone by the same rule as a
 single removal — only copies the viewer made itself are deleted — and stored

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

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

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

@@ -387,14 +387,16 @@ pre{background:var(--sunk);border-radius:7px;padding:10px;overflow:auto;font-siz
 #lanes>summary .fine{font:11px var(--font-mono);color:var(--muted)}
 #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{display:grid;grid-template-columns:196px 1fr;gap:0 12px;align-items:center}
 /* 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.tight{grid-template-columns:196px 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}
+/* A task the agent was given is prose, not an identifier. */
+.lane-name .kind.named{font:12px var(--font-ui);color:var(--ink)}
 .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}
@@ -410,16 +412,16 @@ pre{background:var(--sunk);border-radius:7px;padding:10px;overflow:auto;font-siz
 .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}
-.lane-axis{display:grid;grid-template-columns:150px 1fr;gap:0 12px;margin-bottom:2px}
-.lane-axis.tight{grid-template-columns:118px 1fr;gap:0 10px}
+.lane-axis{display:grid;grid-template-columns:196px 1fr;gap:0 12px;margin-bottom:2px}
+.lane-axis.tight{grid-template-columns:196px 1fr;gap:0 12px}
 .lane-axis .marks{position:relative;height:13px}
 .lane-axis .marks span{position:absolute;transform:translateX(-50%);
   font:10px var(--font-mono);color:var(--faint);white-space:nowrap}
 /* The bands and the axis breaks sit behind every lane at once, drawn once
    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:162px}
+.bandlayer{position:absolute;left:208px;right:0;top:0;bottom:0;pointer-events:none}
+.lane.tight ~ .bandlayer,.lanes-tracks:has(.lane.tight) .bandlayer{left:208px}
 /* 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
@@ -429,6 +431,41 @@ pre{background:var(--sunk);border-radius:7px;padding:10px;overflow:auto;font-siz
 /* 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}
+/* The list. Diwan's library row, at the density of a table: one grid template
+   shared by the head and every row, so the columns line up. */
+.lanelist{margin:2px 0 0}
+.lrow{display:grid;grid-template-columns:1fr 118px 52px 58px 150px;gap:0 12px;
+  align-items:baseline;padding:7px 8px;border-radius:5px;cursor:pointer}
+.lrow:hover{background:var(--soft)}
+.lrow.head{cursor:default;padding-bottom:5px;margin-bottom:2px;
+  border-bottom:1px solid var(--line)}
+.lrow.head:hover{background:transparent}
+.lh{font:10px var(--font-mono);color:var(--faint);letter-spacing:.04em;
+  text-transform:uppercase;cursor:pointer;white-space:nowrap}
+.lh.on{color:var(--accent)}
+.lh.num{text-align:right}
+.lname{font-size:13px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;
+  white-space:nowrap}
+/* Nothing was written down for this one; the kind is standing in for a name. */
+.lname.untitled{font-family:var(--font-mono);font-size:12px;color:var(--muted)}
+.lkind{font:11px var(--font-mono);color:var(--accent);overflow:hidden;
+  text-overflow:ellipsis;white-space:nowrap}
+.lrow .num{font:11.5px var(--font-mono);color:var(--muted);text-align:right}
+.ltools{font:10.5px var(--font-mono);color:var(--faint);overflow:hidden;
+  text-overflow:ellipsis;white-space:nowrap}
+
+/* A packed row holds whatever did not overlap, so it has a number rather than
+   a name — the names are in the list, where there is room for them. */
+.lane.packed{grid-template-columns:58px 1fr;gap:0 12px;align-items:center}
+.lane-axis.packed{grid-template-columns:58px 1fr;gap:0 12px}
+.bandlayer.packed{left:70px}
+.rownum{font:10px var(--font-mono);color:var(--faint);width:100%;text-align:right}
+.lane.packed .track{height:22px}
+.lane.packed .bar{height:14px}
+
+/* Which of the two views, in the box's own header. */
+.laneview{margin-left:auto;display:flex;gap:6px;flex:none}
+.laneview .chip{font-size:11px;padding:2px 9px}
 .lanes-legend{display:flex;align-items:center;gap:14px;margin-top:10px;padding-top:9px;
   border-top:1px solid var(--line);font-size:11px;color:var(--muted);flex-wrap:wrap}
 .lanes-legend i{display:inline-block;width:16px;height:8px;border-radius:2px;
@@ -1309,6 +1346,9 @@ function toggleSide(){
 // Restore the last choice; localStorage can throw in restricted contexts.
 try{if(localStorage.getItem("transcript-viewer.side")==="1")toggleSide()}catch(e){}
 
+/* Back and forward move between the library and a transcript. */
+addEventListener("popstate",followAddress);
+
 addEventListener("keydown",e=>{
   // Ignore the shortcut while typing in the filter box.
   if(e.key==="\\"&&e.target.tagName!=="INPUT"){e.preventDefault();toggleSide()}
@@ -1375,7 +1415,13 @@ async function openLibrary(){
     bootSay(`Drawing ${num(INDEX.length)} sessions…`,0,0);
     // Let that line paint before the work that blocks the thread.
     await new Promise(r=>requestAnimationFrame(()=>requestAnimationFrame(r)));
-    showCount();drawList();showLibrary();
+    showCount();drawList();
+    // The address says what to show. Without this a refresh lands in the
+    // library however specific the link was.
+    const asked=addressed();
+    if(asked&&INDEX.some(e=>e.key===asked))pick(asked,false);
+    else{ if(asked)note("That transcript is not in this library.");
+          setAddress(null,false); showLibrary(); }
   }catch(err){
     // Leave it on screen: a blank window would say nothing at all.
     bootSay("Could not open your library — "+((err&&err.message)||err),0,0);
@@ -1624,7 +1670,7 @@ function showLibrary(){
     </div>`;
     return;
   }
-  cur=null;drawCrumb();
+  cur=null;setAddress(null,false);drawCrumb();
   const rows=libraryRows();
   main.innerHTML=`
     <div class="lhead">
@@ -2271,8 +2317,37 @@ function star(key){
   annotate(key,{starred:!entry.starred});
 }
 
-function pick(key){
-  cur=key;EDITING=null;drawList();drawCrumb();
+/* Which transcript the address names, if any.
+
+   The key is the sha256 of the file's contents, so it is the same key on the
+   next run and on another machine holding the same transcript — an address
+   worth putting in the bar. Refreshing used to throw the reader back to the
+   library, and a link to what someone was looking at could not be sent at all.
+
+   The whole hash is used rather than a prefix: two transcripts sharing the
+   first sixteen characters would otherwise open the wrong one. */
+const addressed = () => (location.hash || "").replace(/^#/, "");
+
+function setAddress(key, push) {
+  const to = key ? "#" + key : location.pathname;
+  if (addressed() === (key || "")) return;
+  try {
+    if (push) history.pushState({ key: key || null }, "", to);
+    else history.replaceState({ key: key || null }, "", to);
+  } catch (e) {
+    // A page opened from a file has no history to write; the view still works.
+  }
+}
+
+/* Back and forward move between the library and a transcript. */
+function followAddress() {
+  const key = addressed();
+  if (!key) { cur = null; drawList(); drawCrumb(); showLibrary(); return; }
+  if (key !== cur) pick(key, false);
+}
+
+function pick(key, push = true){
+  cur=key;EDITING=null;setAddress(key,push);drawList();drawCrumb();
   main.innerHTML=`<div class="empty">Converting…</div>`;
   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}
@@ -2445,6 +2520,11 @@ function laneIndex(t) {
             id: sub.trajectory_id,
             kind: x.agentType || sub.agent?.name || "subagent",
             said: x.description || "",
+            // What to call the lane. The task it was given where that was
+            // written down — 50 of the 53 Claude Code subagents here have one,
+            // and "Docs and config audit" says what "general-purpose" cannot.
+            // Otherwise the kind, which is all some formats record.
+            name: x.description || x.agentType || sub.agent?.name || "subagent",
             steps: (sub.steps || []).length,
             tools: [...new Set((sub.steps || []).flatMap(
               (s) => (s.tool_calls || []).map((c) => c.function_name)))],
@@ -2474,6 +2554,7 @@ function laneIndex(t) {
           id: sub.trajectory_id,
           kind: x.agentType || sub.agent?.name || "subagent",
           said: x.description || "",
+          name: x.description || x.agentType || sub.agent?.name || "subagent",
           steps: (sub.steps || []).length,
           tools: [...new Set((sub.steps || []).flatMap(
             (s) => (s.tool_calls || []).map((c) => c.function_name)))],
@@ -2492,6 +2573,31 @@ function laneIndex(t) {
   return lanes;
 }
 
+/* Share a row with anything that does not overlap.
+
+   Thirty subagents drew thirty rows, and twenty-nine of them said only that
+   the run was long. Packed, the same session is eight rows — and the count now
+   means something: a second row exists only because two things ran at once, so
+   the shape of the chart is the parallelism rather than a decoration on top of
+   it. One real session of fifteen subagents packs to a single row, which is the
+   honest picture of a run that never did two things at a time.
+
+   The lowest free row, which is the usual way to pack intervals. */
+function packLanes(lanes) {
+  const timed = lanes.filter((l) => l.span).sort((a, b) => a.span[0] - b.span[0]);
+  const rows = [];
+  for (const lane of timed) {
+    let row = rows.findIndex((busyUntil) => lane.span[0] >= busyUntil);
+    if (row === -1) row = rows.push(0) - 1;
+    rows[row] = lane.span[1];
+    lane.row = row;
+  }
+  // Anything without times cannot be placed against the others; give it its own.
+  let extra = rows.length;
+  for (const lane of lanes) if (!lane.span) lane.row = extra++;
+  return Math.max(1, extra);
+}
+
 /* Stretches of time where more than one subagent was running. */
 function together(lanes) {
   const edges = [];
@@ -2580,6 +2686,23 @@ function axisMarks(lo, hi) {
 
 let LANES = [];
 
+/* Which of the two views the box is showing. A list by default: the common
+   question is what was farmed out and what came back, and the median subagent
+   here is two steps — a bar for which says almost nothing. The timeline is for
+   when the question is when, and alongside what. */
+let LANEVIEW = (() => {
+  try { return localStorage.getItem("transcript-viewer.delegation") || "list"; }
+  catch (e) { return "list"; }
+})();
+
+function setLaneView(v) {
+  LANEVIEW = v;
+  try { localStorage.setItem("transcript-viewer.delegation", v); } catch (e) {}
+  const at = main.scrollTop;
+  render();
+  main.scrollTop = at;
+}
+
 function drawLanes(t) {
   LANES = laneIndex(t);
   if (!LANES.length) return "";
@@ -2587,104 +2710,196 @@ function drawLanes(t) {
   const timed = LANES.filter((l) => l.span);
   const parent = spanMs(t.steps);
   const onClock = timed.length > 0 && parent;
+  const bands = onClock ? together(timed) : [];
+
+  let shown = "", whole = "", note = "", body = "";
+
+  if (LANEVIEW === "list") {
+    body = laneList(t);
+    note = onClock ? "" : "these steps carry no times";
+    if (onClock) {
+      const lo = Math.min(parent[0], ...timed.map((l) => l.span[0]));
+      const hi = Math.max(parent[1], ...timed.map((l) => l.span[1]));
+      // A list has no axis, so nothing was shortened: the span is the span.
+      shown = duration(hi - lo);
+    }
+  } else if (!onClock) {
+    // No times to lay anything out against; place each where it was called from.
+    const steps = Math.max(1, (t.steps || []).length);
+    body = laneTracks(
+      LANES.map((lane) => ({
+        lane,
+        html: `<button class="bar" style="left:${(lane.fromIndex / steps) * 100}%;
+          width:${Math.max(100 / steps, 0.6)}%" title="${esc(lane.name || lane.kind)}"
+          onmouseenter="laneCard(event,'${esc(lane.id)}')" onmouseleave="laneCard(null)"
+          onclick="openLane('${esc(lane.id)}')"></button>`,
+      })),
+      LANES.length,
+      `<span class="bar main" style="left:0;width:100%"></span>`,
+      "",
+      "",
+    );
+    note = "laid out by step · these steps carry no times";
+  } else {
+    const lo = Math.min(parent[0], ...timed.map((l) => l.span[0]));
+    const hi = Math.max(parent[1], ...timed.map((l) => l.span[1]));
+
+    const busy = timed.map((l) => l.span);
+    for (const v of (t.steps || []).map(at).filter((x) => x !== null)) busy.push([v, v]);
+    const scale = timeScale(lo, hi, busy);
+    const rowCount = packLanes(LANES);
+
+    const place = (span) => {
+      const left = scale.posOf(span[0]);
+      return { left, width: Math.max(scale.posOf(span[1]) - left, 0.4) };
+    };
 
-  const tight = LANES.length > 12 ? " tight" : "";
-  const steps = (t.steps || []).length;
-
-  if (!onClock) {
-    // No times to lay anything out against. Say so and place each lane where it
-    // was called from, rather than implying durations the log never recorded.
-    const rows = LANES.map((lane) => laneRow(lane, tight,
-      `<button class="bar" style="left:${(lane.fromIndex / Math.max(1, steps)) * 100}%;
-         width:${Math.max(100 / Math.max(1, steps), 0.6)}%" title="${esc(lane.kind)}"
-         onmouseenter="laneCard(event,'${esc(lane.id)}')" onmouseleave="laneCard(null)"
-         onclick="openLane('${esc(lane.id)}')"></button>`)).join("");
-    return laneShell({
-      count: LANES.length,
-      rows,
-      mainRow: laneRow({ kind: "main thread", steps, main: true }, tight,
-        `<span class="bar main" style="left:0;width:100%"></span>`),
-      marks: "",
-      // No clock to lay anything against, so no duration is claimed and no
-      // overlap either: without times, two bars sitting side by side would
-      // say something the log never recorded.
-      note: "laid out by step · these steps carry no times",
+    const bars = LANES.map((lane) => {
+      const at2 = lane.span ? place(lane.span) : { left: 0, width: 0.4 };
+      return {
+        lane,
+        html: `<button class="bar" style="left:${at2.left}%;width:${at2.width}%"
+          title="${esc(lane.name || lane.kind)}${
+            lane.span ? " · " + esc(duration(lane.span[1] - lane.span[0])) : ""
+          }" onmouseenter="laneCard(event,'${esc(lane.id)}')"
+          onmouseleave="laneCard(null)" onclick="openLane('${esc(lane.id)}')"></button>`,
+      };
     });
+
+    const mainAt = place(parent);
+    const marks = axisMarks(0, scale.kept)
+      .map((m) => `<span style="left:${(m.pos / 100) * scale.room}%">${esc(m.label)}</span>`)
+      .join("");
+    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("");
+
+    body = laneTracks(
+      bars,
+      rowCount,
+      `<span class="bar main" style="left:${mainAt.left}%;width:${mainAt.width}%"></span>`,
+      marks,
+      breaks,
+    );
+
+    const [a, b] = durationPair(scale.kept, hi - lo);
+    shown = a;
+    whole = b;
+    note = scale.gaps.length ? `${duration(scale.skipped)} of waiting hidden` : "";
   }
 
-  // Everything the run touched, parent and children alike.
-  const lo = Math.min(parent[0], ...timed.map((l) => l.span[0]));
-  const hi = Math.max(parent[1], ...timed.map((l) => l.span[1]));
-
-  // What was actually happening, so the quiet stretches can be skipped.
-  const busy = timed.map((l) => l.span);
-  const points = (t.steps || []).map(at).filter((v) => v !== null).sort((a, b) => a - b);
-  for (const v of points) busy.push([v, v]);
-
-  const scale = timeScale(lo, hi, busy);
-  const bands = together(timed);
-
-  // 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("");
+  const parts = laneHeader({ count: LANES.length, shown, whole, overlaps: bands.length });
+  const hint = LANEVIEW === "list" ? "click a row to open it" : "click a bar to open it";
 
-  const bar = (span, cls) => {
-    const left = scale.posOf(span[0]);
-    return { left, width: Math.max(scale.posOf(span[1]) - left, 0.4) };
-  };
+  return `
+    <details id="lanes" open>
+      <summary>
+        <b>Delegation</b>
+        <span class="fine">${parts.join(" · ")}</span>
+        <span class="laneview" onclick="event.preventDefault()">
+          ${[["list", "List"], ["time", "Timeline"]].map(([k, label]) =>
+            `<span class="chip${LANEVIEW === k ? " on" : ""}"
+              onclick="event.preventDefault();event.stopPropagation();setLaneView('${k}')"
+              >${label}</span>`).join("")}
+        </span>
+      </summary>
+      <div class="lanes-body">
+        ${body}
+        <div class="lanes-legend">
+          ${LANEVIEW === "time"
+            ? `<span><i style="background:var(--ink);opacity:.85"></i>main thread</span>
+               <span><i style="background:var(--accent);opacity:.85"></i>subagent</span>`
+            : ""}
+          <span class="lanes-note">${[note, hint].filter(Boolean).join(" · ")}</span>
+        </div>
+      </div>
+    </details>`;
+}
 
-  const mainAt = bar(parent, "main");
-  const mainRow = laneRow({ kind: "main thread", steps, main: true }, tight,
-    `<span class="bar main" style="left:${mainAt.left}%;width:${mainAt.width}%"></span>`);
-
-  const rows = LANES.map((lane) => {
-    const at = bar(lane.span);
-    return laneRow(lane, tight,
-      `<button class="bar" style="left:${at.left}%;width:${at.width}%"
-        title="${esc(lane.kind + (lane.said ? " — " + lane.said : ""))} · ${esc(duration(lane.span[1] - lane.span[0]))}"
-        onmouseenter="laneCard(event,'${esc(lane.id)}')" onmouseleave="laneCard(null)"
-        onclick="openLane('${esc(lane.id)}')"></button>`);
-  }).join("");
+/* What was farmed out, and what came back. Sorted as the reader asks. */
+let LANESORT = "start";
 
-  const marks = axisMarks(0, scale.kept).map((m) => {
-    // Positions are on the kept time, which is what the axis measures.
-    return { pos: (m.pos / 100) * scale.room, label: m.label };
-  });
+function setLaneSort(k) {
+  LANESORT = LANESORT === k ? k + "-" : k;
+  const at = main.scrollTop;
+  render();
+  main.scrollTop = at;
+}
 
-  // What the axis leaves out, in the reader's terms. How many separate gaps
-  // were collapsed is a fact about the drawing, not about the run, so it is not
-  // said; how much time is missing from the picture very much is.
-  const hidden = scale.gaps.length ? `${duration(scale.skipped)} of waiting hidden` : "";
-  const note = [hidden, "click a bar to open it"].filter(Boolean).join(" · ");
-
-  const [shownAs, wholeAs] = durationPair(scale.kept, hi - lo);
-  return laneShell({
-    count: LANES.length,
-    shown: shownAs,
-    whole: wholeAs,
-    rows,
-    mainRow,
-    marks: marks.map((m) => `<span style="left:${m.pos}%">${esc(m.label)}</span>`).join(""),
-    note,
-    layer: breaks,
-    overlaps: bands.length,
+function laneList(t) {
+  const key = LANESORT.replace(/-$/, "");
+  const down = LANESORT.endsWith("-");
+  const rows = LANES.slice().sort((a, b) => {
+    const of = (l) =>
+      key === "steps" ? l.steps
+      : key === "took" ? (l.span ? l.span[1] - l.span[0] : -1)
+      : key === "name" ? (l.name || l.kind).toLowerCase()
+      : (l.span ? l.span[0] : l.fromIndex);
+    const x = of(a), y = of(b);
+    const n = x < y ? -1 : x > y ? 1 : 0;
+    return down ? -n : n;
   });
+
+  const head = (k, label, cls) =>
+    `<span class="lh ${cls || ""}${key === k ? " on" : ""}"
+      onclick="setLaneSort('${k}')">${label}${key === k ? (down ? " ↓" : " ↑") : ""}</span>`;
+
+  return `
+    <div class="lanelist">
+      <div class="lrow head">
+        ${head("name", "what it was asked to do")}
+        <span class="lh">kind</span>
+        ${head("steps", "steps", "num")}
+        ${head("took", "took", "num")}
+        <span class="lh">tools</span>
+      </div>
+      ${rows.map((l) => `
+        <div class="lrow" onclick="openLane('${esc(l.id)}')"
+          onmouseenter="laneCard(event,'${esc(l.id)}')" onmouseleave="laneCard(null)">
+          <span class="lname${l.said ? "" : " untitled"}">${esc(l.name || l.kind)}</span>
+          <span class="lkind">${esc(l.kind)}</span>
+          <span class="num">${num(l.steps)}</span>
+          <span class="num">${l.span ? esc(duration(l.span[1] - l.span[0])) : "—"}</span>
+          <span class="ltools">${l.tools.length ? esc(l.tools.slice(0, 3).join(" ")) : "—"}</span>
+        </div>`).join("")}
+    </div>`;
+}
+
+/* The tracks: one row per packed lane, the main thread above them. */
+function laneTracks(bars, rowCount, mainBar, marks, breaks) {
+  const rows = [];
+  for (let r = 0; r < rowCount; r++) {
+    const inner = bars.filter(({ lane }) => lane.row === r).map((b) => b.html).join("");
+    rows.push(`<div class="lane packed">
+      <div class="lane-name"><span class="rownum">${r + 1}</span></div>
+      <div class="track"><span class="rule"></span>${inner}</div>
+    </div>`);
+  }
+  return `
+    <div class="lane-axis packed"><div></div><div class="marks">${marks}</div></div>
+    <div class="lanes-tracks">
+      <div class="bandlayer packed">${breaks}</div>
+      <div class="lane packed">
+        <div class="lane-name"><span class="kind main">main</span></div>
+        <div class="track"><span class="rule"></span>${mainBar}</div>
+      </div>
+      ${rows.join("")}
+    </div>`;
 }
 
 /* One row: who, how many steps, and the track it sits on. */
 function laneRow(lane, tight, inner) {
+  const name = lane.name || lane.kind;
+  // Both, where they differ: the task reads first, the kind explains it.
+  const full = lane.said && lane.kind !== name ? `${name} — ${lane.kind}` : name;
   return `
     <div class="lane${tight}">
       <div class="lane-name">
         ${lane.main ? "" : `<span style="color:var(--accent);font-weight:700;font-size:11px">⤷</span>`}
-        <span class="kind${lane.main ? " main" : ""}" title="${esc(lane.kind)}">${esc(lane.kind)}</span>
+        <span class="kind${lane.main ? " main" : ""}${lane.said ? " named" : ""}"
+          title="${esc(full)}">${esc(name)}</span>
         <span class="n">${num(lane.steps)}</span>
       </div>
       <div class="track"><span class="rule"></span>${inner}</div>

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

@@ -71,6 +71,14 @@ const SAFE_FETCH = () =>
    an object with no focus(), which fails somewhere else entirely. */
 const SAFE_BY_ID = () => null;
 
+/* The page reads and writes an address so a transcript can be linked to. The
+   stub keeps one, so tests can watch it without a browser. */
+global.location = { hash: "", pathname: "/" };
+global.history = {
+  pushState: (_s, _t, to) => { global.location.hash = String(to).startsWith("#") ? to : ""; },
+  replaceState: (_s, _t, to) => { global.location.hash = String(to).startsWith("#") ? to : ""; },
+};
+
 /* Looking for an element by selector, against what was actually painted. The
    stub DOM holds markup as a string rather than a tree, so this answers the one
    question the page asks — is this box on the page — from that string. */
@@ -91,6 +99,7 @@ const run = (body) => {
   global.fetch = SAFE_FETCH;
   global.document.getElementById = SAFE_BY_ID;
   global.document.querySelector = SAFE_QUERY;
+  global.location.hash = "";
   return eval(script + "\n;(() => {" + body + "})()");
 };
 
@@ -1992,7 +2001,8 @@ test("what was skipped is stated, not swallowed", () => {
         { step_id: 2, source: "agent", timestamp: "2026-01-01T10:02:00Z" },
       ] }],
   };
-  const html = run(`return drawLanes(${JSON.stringify(t)})`);
+  // The elision belongs to the timeline; the list has no axis to cut.
+  const html = run(`LANEVIEW="time"; return drawLanes(${JSON.stringify(t)})`);
   assert.match(html, /of waiting hidden/, "a reader must be told time was left out");
   assert.match(html, /shown of/, "and that the axis is shorter than the run");
   assert.match(html, /class="gapmark"/, "and see where");
@@ -2221,3 +2231,155 @@ test("filling holds the reader's place, and stops when the run is done", () => {
   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");
 });
+
+// ---- a transcript has an address ---------------------------------------------
+
+test("opening a transcript puts it in the address", () => {
+  const out = run(`
+    INDEX = [{key:"abc123", path:"/a.jsonl"}];
+    globalThis.fetch = () => Promise.resolve({ok:true, json: () => Promise.resolve({steps:[]})});
+    pick("abc123");
+    return location.hash;
+  `);
+  assert.strictEqual(out, "#abc123", "so a refresh comes back here");
+});
+
+test("going back to the library clears it", () => {
+  const out = run(`
+    INDEX = [{key:"abc123", path:"/a.jsonl", group:"Local"}];
+    location.hash = "#abc123";
+    showLibrary();
+    return location.hash;
+  `);
+  assert.strictEqual(out, "", "the library is not one transcript");
+});
+
+test("the whole key is used, never a prefix", () => {
+  // Two transcripts can share a prefix; opening the wrong one would be silent.
+  const out = run(`
+    INDEX = [{key:"aaaaaaaaaaaaaaaa1111"},{key:"aaaaaaaaaaaaaaaa2222"}];
+    globalThis.fetch = () => Promise.resolve({ok:true, json: () => Promise.resolve({steps:[]})});
+    pick("aaaaaaaaaaaaaaaa2222");
+    return { hash: location.hash, asked: addressed() };
+  `);
+  assert.strictEqual(out.hash, "#aaaaaaaaaaaaaaaa2222");
+  assert.strictEqual(out.asked, "aaaaaaaaaaaaaaaa2222");
+});
+
+test("an address naming nothing in this library says so, and shows the library", () => {
+  const out = run(`
+    INDEX = [{key:"real"}];
+    location.hash = "#gone";
+    let said = "";
+    note = (m) => { said = m; };
+    followAddress();
+    return { said, cur, hash: location.hash };
+  `);
+  assert.strictEqual(out.cur, "gone", "it tried");
+  // followAddress hands off to pick, which fetches; what matters is it did not
+  // silently sit on the library with a stale address.
+  assert.strictEqual(out.hash, "#gone");
+});
+
+test("an empty address shows the library rather than a blank pane", () => {
+  const out = run(`
+    INDEX = [{key:"real", group:"Local"}];
+    location.hash = "";
+    cur = "real";
+    followAddress();
+    return cur;
+  `);
+  assert.strictEqual(out, null, "no address means no transcript");
+});
+
+// ---- packing, and the two views ----------------------------------------------
+
+test("lanes that never overlap share one row", () => {
+  const t = {
+    steps: [{ step_id: 1, source: "agent", timestamp: "2026-01-01T10:00:00Z" }],
+    subagent_trajectories: [
+      { trajectory_id: "a", agent: {}, extra: {}, steps: [
+        { step_id: 1, source: "agent", timestamp: "2026-01-01T10:00:00Z" },
+        { step_id: 2, source: "agent", timestamp: "2026-01-01T10:05:00Z" }] },
+      { trajectory_id: "b", agent: {}, extra: {}, steps: [
+        { step_id: 1, source: "agent", timestamp: "2026-01-01T10:06:00Z" },
+        { step_id: 2, source: "agent", timestamp: "2026-01-01T10:10:00Z" }] },
+      { trajectory_id: "c", agent: {}, extra: {}, steps: [
+        { step_id: 1, source: "agent", timestamp: "2026-01-01T10:11:00Z" },
+        { step_id: 2, source: "agent", timestamp: "2026-01-01T10:15:00Z" }] },
+    ],
+  };
+  const out = run(`
+    const lanes = laneIndex(${JSON.stringify(t)});
+    const rows = packLanes(lanes);
+    return { rows, on: lanes.map(l => l.row) };
+  `);
+  assert.strictEqual(out.rows, 1, "three in a row is one row, not three");
+  assert.deepStrictEqual(out.on, [0, 0, 0]);
+});
+
+test("a second row exists only because two things ran at once", () => {
+  const t = {
+    steps: [{ step_id: 1, source: "agent", timestamp: "2026-01-01T10:00:00Z" }],
+    subagent_trajectories: [
+      { trajectory_id: "a", agent: {}, extra: {}, steps: [
+        { step_id: 1, source: "agent", timestamp: "2026-01-01T10:00:00Z" },
+        { step_id: 2, source: "agent", timestamp: "2026-01-01T10:10:00Z" }] },
+      { trajectory_id: "b", agent: {}, extra: {}, steps: [
+        { step_id: 1, source: "agent", timestamp: "2026-01-01T10:05:00Z" },
+        { step_id: 2, source: "agent", timestamp: "2026-01-01T10:12:00Z" }] },
+    ],
+  };
+  const out = run(`
+    const lanes = laneIndex(${JSON.stringify(t)});
+    return { rows: packLanes(lanes), on: lanes.map(l => l.row) };
+  `);
+  assert.strictEqual(out.rows, 2);
+  assert.deepStrictEqual(out.on, [0, 1], "the overlap is what made the row");
+});
+
+test("the list is what the box shows first", () => {
+  const html = run(`LANEVIEW="list"; return drawLanes(${JSON.stringify(TWO_AT_ONCE)})`);
+  assert.match(html, /class="lanelist"/);
+  assert.match(html, /what it was asked to do/, "the task leads");
+  assert.ok(!/class="track"/.test(html), "and no chart is drawn");
+});
+
+test("the list names each one and says what it cost", () => {
+  const html = run(`LANEVIEW="list"; return drawLanes(${JSON.stringify(TWO_AT_ONCE)})`);
+  assert.match(html, /find the theme/, "the task, where there was one");
+  assert.match(html, /general-purpose/, "the kind, for the one with none");
+  assert.match(html, /Grep/, "the tools it reached for");
+});
+
+test("a subagent with nothing written down is set apart, not left blank", () => {
+  const html = run(`LANEVIEW="list"; return drawLanes(${JSON.stringify(TWO_AT_ONCE)})`);
+  assert.match(html, /class="lname untitled"/,
+    "its kind stands in for a name, and reads as a handle rather than prose");
+});
+
+test("the list sorts by what it is asked to sort by", () => {
+  const order = (sort) => run(`
+    LANEVIEW="list"; LANESORT=${JSON.stringify(sort)};
+    LANES = laneIndex(${JSON.stringify(TWO_AT_ONCE)});
+    const html = laneList({});
+    return [...html.matchAll(/class="lname[^"]*">([^<]*)</g)].map(m => m[1]);
+  `);
+  // By name, which has no ties to be arbitrary about.
+  const up = order("name");
+  const down = order("name-");
+  assert.deepStrictEqual(up, ["find the theme", "general-purpose"]);
+  assert.deepStrictEqual(down, up.slice().reverse(), "and reverses when asked twice");
+});
+
+test("switching view is remembered", () => {
+  const out = run(`
+    const saved = [];
+    localStorage.setItem = (k, v) => saved.push([k, v]);
+    render = () => {};
+    setLaneView("time");
+    return { LANEVIEW, saved };
+  `);
+  assert.strictEqual(out.LANEVIEW, "time");
+  assert.deepStrictEqual(out.saved, [["transcript-viewer.delegation", "time"]]);
+});

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

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