transcript-viewer 0.6.1__tar.gz → 0.7.0__tar.gz

{transcript_viewer-0.6.1 → transcript_viewer-0.7.0}/PKG-INFO

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

{transcript_viewer-0.6.1 → transcript_viewer-0.7.0}/pyproject.toml

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

{transcript_viewer-0.6.1 → transcript_viewer-0.7.0}/src/transcript_viewer/page.html

@@ -36,6 +36,8 @@
   --user:var(--accent); --agent:var(--ink); --system:var(--muted); --tool:var(--accent);
   --user-bg:var(--soft); --agent-bg:transparent; --system-bg:transparent;
   --j-key:var(--accent); --j-str:var(--ink); --j-num:var(--muted); --j-lit:var(--muted);
+  --sh-cmd:var(--accent); --sh-str:var(--ink); --sh-flag:var(--muted);
+  --sh-op:var(--muted); --sh-var:var(--accent); --sh-com:var(--faint);
 }
 *{box-sizing:border-box;margin:0}
 a{color:var(--accent);text-decoration:none}
@@ -409,6 +411,26 @@ pre{background:var(--sunk);border-radius:7px;padding:10px;overflow:auto;font-siz
 
 /* JSON syntax colours */
 .j-key{color:var(--j-key)}
+/* A command reads as a command: one gutter mark, then the script as written. */
+.sh{background:var(--bg);border-radius:7px;padding:10px 12px 10px 26px;margin:0;
+  position:relative;overflow-x:auto;white-space:pre;font:12px/1.6 var(--font-mono);
+  color:var(--ink)}
+.sh::before{content:"$";position:absolute;left:11px;top:10px;color:var(--faint);
+  user-select:none}
+.sh-cmd{color:var(--sh-cmd)}
+.sh-str{color:var(--sh-str)}
+.sh-flag{color:var(--sh-flag)}
+.sh-op{color:var(--sh-op);font-weight:500}
+.sh-var{color:var(--sh-var)}
+.sh-com{color:var(--sh-com);font-style:italic}
+/* What the call was for, beside what it was called. */
+.tdesc{color:var(--muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;
+  white-space:nowrap;flex:1;min-width:0}
+.tflip{margin-left:auto;flex:none;font:11px/1 var(--font-mono);color:var(--faint);
+  border:1px solid var(--line);border-radius:20px;padding:3px 8px;cursor:pointer}
+.tflip:hover{color:var(--ink);border-color:var(--accent)}
+.turl{display:block;margin:0 0 8px;font-size:12.5px;overflow-wrap:anywhere}
+.tasked{color:var(--muted);font-size:12.5px;line-height:1.55}
 .j-str{color:var(--j-str)}
 .j-num{color:var(--j-num)}
 .j-lit{color:var(--j-lit)}
@@ -768,6 +790,151 @@ const escText = (s) =>
 
 // Colourise a JSON value. Runs over already-escaped text, so nothing it emits
 // can introduce markup.
+/* A shell command, coloured. Every piece is escaped as it is taken, so nothing
+   in a log can reach the DOM as markup, and the result is passed through
+   autolink so paths and URLs inside a command stay clickable. */
+const SH_OPS = "|&;<>()";
+
+function sh(src) {
+  const s = String(src ?? "");
+  let out = "",
+    i = 0,
+    // Whether the next word is the thing being run, rather than an argument.
+    fresh = true;
+  const put = (cls, text) => {
+    out += cls ? `<span class="${cls}">${esc(text)}</span>` : esc(text);
+  };
+
+  while (i < s.length) {
+    const ch = s[i];
+
+    if (ch === "\n") { out += "\n"; i++; fresh = true; continue; }
+    if (ch === " " || ch === "\t") { out += ch; i++; continue; }
+
+    // A # only starts a comment where a word could start.
+    if (ch === "#" && fresh) {
+      let j = s.indexOf("\n", i);
+      if (j < 0) j = s.length;
+      put("sh-com", s.slice(i, j));
+      i = j;
+      continue;
+    }
+
+    if (ch === "'" || ch === '"') {
+      let j = i + 1;
+      while (j < s.length) {
+        if (s[j] === "\\" && ch === '"') { j += 2; continue; }
+        if (s[j] === ch) { j++; break; }
+        j++;
+      }
+      put("sh-str", s.slice(i, j));
+      i = j;
+      fresh = false;
+      continue;
+    }
+
+    if (ch === "$") {
+      const m = /^\$(?:\{[^}]*\}|[A-Za-z_]\w*|[@*?#$!0-9])/.exec(s.slice(i));
+      if (m) { put("sh-var", m[0]); i += m[0].length; fresh = false; continue; }
+    }
+
+    if (SH_OPS.includes(ch)) {
+      let j = i;
+      while (j < s.length && SH_OPS.includes(s[j])) j++;
+      const op = s.slice(i, j);
+      put("sh-op", op);
+      i = j;
+      // What follows a pipe or a semicolon is another command; what follows a
+      // redirect is the file it is being written to, which is not one.
+      fresh = !/[<>]/.test(op);
+      continue;
+    }
+
+    let j = i;
+    while (j < s.length && !" \t\n'\"$".includes(s[j]) && !SH_OPS.includes(s[j])) j++;
+    const word = s.slice(i, j);
+    put(fresh ? "sh-cmd" : word[0] === "-" ? "sh-flag" : "", word);
+    i = j;
+    fresh = false;
+  }
+  return out;
+}
+
+const shBlock = (command) => `<pre class="sh">${autolink(sh(command))}</pre>`;
+
+/* What a call is worth showing as, when it is not worth showing as JSON. Only
+   the shapes that carry a command or an address get a body of their own; the
+   rest gain a title, which is the part that was missing everywhere. */
+const TOOLVIEW = {
+  Bash: {
+    title: (a) => a.description || "",
+    body: (a) =>
+      shBlock(a.command || "") +
+      (a.timeout ? `<div class="tasked">timeout ${num(a.timeout)} ms</div>` : ""),
+  },
+  WebFetch: {
+    title: (a) => {
+      try { return new URL(a.url).hostname.replace(/^www\./, ""); }
+      catch (e) { return a.url || ""; }
+    },
+    body: (a) =>
+      `<div class="turl">${autolink(esc(a.url || ""))}</div>` +
+      (a.prompt ? `<div class="tasked">${esc(a.prompt)}</div>` : ""),
+  },
+  WebSearch: { title: (a) => a.query || "" },
+  // The end of a path is the part worth reading; the full one is on hover.
+  Read: { title: (a) => short(a.file_path) },
+  Write: { title: (a) => short(a.file_path) },
+  Edit: { title: (a) => short(a.file_path) },
+  NotebookEdit: { title: (a) => short(a.notebook_path) },
+  Skill: { title: (a) => a.skill || "" },
+  Task: { title: (a) => a.description || "" },
+  TaskCreate: { title: (a) => a.subject || a.description || "" },
+  ToolSearch: { title: (a) => a.query || "" },
+  Grep: { title: (a) => a.pattern || "" },
+  Glob: { title: (a) => a.pattern || "" },
+};
+
+/* Every call rendered so far, so one box can be redrawn without repainting the
+   page and losing the reader's place. */
+const CALLS = {};
+// Boxes the reader has flipped. Absent means "do as the page is doing".
+const TOOLRAW = {};
+
+const toolIsRaw = (id) => (id in TOOLRAW ? TOOLRAW[id] : raw);
+
+function toolBody(id) {
+  const held = CALLS[id];
+  if (!held) return "";
+  const { c, r } = held;
+  const view = TOOLVIEW[c.function_name];
+  const shown =
+    !toolIsRaw(id) && view && view.body
+      ? view.body(c.arguments || {})
+      : `<pre class="json">${hjson(c.arguments)}</pre>`;
+  return (
+    `<div class="io in"><span class="iol">call</span>${shown}</div>` +
+    (r && r.content
+      ? `<div class="io out"><span class="iol">output</span>${
+          typeof r.content === "string" ? pre(r.content) : body(r.content)
+        }</div>`
+      : "") +
+    (aiOn() ? callSummary(c.tool_call_id) : "")
+  );
+}
+
+/* Flip one box between what it says and what it is. Redrawing just this box
+   keeps every other box open and the page where the reader left it. */
+function flipTool(ev, id) {
+  ev.preventDefault();
+  ev.stopPropagation();
+  TOOLRAW[id] = !toolIsRaw(id);
+  const box = document.getElementById("tb-" + id);
+  if (box) box.innerHTML = toolBody(id);
+  const flip = document.getElementById("tf-" + id);
+  if (flip) flip.textContent = toolIsRaw(id) ? "formatted" : "raw";
+}
+
 function hjson(value, indent = 2) {
   let text;
   try {
@@ -838,6 +1005,8 @@ function pre(content) {
 
 const esc=s=>String(s??"").replace(/[&<>"]/g,c=>({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;"}[c]));
 const num=n=>(n??0).toLocaleString();
+/* How many sessions are in the library, said the same way everywhere. */
+const showCount=()=>{count.textContent=`${num(INDEX.length)} session${INDEX.length===1?"":"s"}`};
 /* One size formatter. Everything used to divide by 1048576 and say MB, so a
    900-byte log read as "0.0 MB" and a 144 GB bucket as "147456.0 MB". Each step
    keeps three significant figures, which is as much as anyone reads. */
@@ -870,7 +1039,7 @@ function reveal(a){
 async function openFiles(files){
   if(!files||!files.length)return;
   const names=[...files].map(f=>f.name);
-  count.textContent=`opening ${names.length} file${names.length>1?"s":""}…`;
+  count.textContent=`opening ${num(names.length)} file${names.length>1?"s":""}…`;
   const problems=[];
   let first=null;
   for(const file of files){
@@ -884,7 +1053,7 @@ async function openFiles(files){
   }
   const fresh=await fetch("/api/index").then(r=>r.json());
   INDEX=fresh.sessions||[];GROUPS=fresh.groups||[];TAGS=fresh.tags||[];AI=fresh.ai||{};DOWNLOADS=fresh.downloads||DOWNLOADS;
-  count.textContent=INDEX.length+" sessions";drawList();
+  showCount();drawList();
   if(first!==null)pick(first);
   if(problems.length)note(problems.join("\n"));
   picker.value="";
@@ -1015,10 +1184,10 @@ async function openLibrary(){
   try{
     const d=await readIndex();
     INDEX=d.sessions||[];GROUPS=d.groups||[];TAGS=d.tags||[];AI=d.ai||{};DOWNLOADS=d.downloads||DOWNLOADS;
-    bootSay("Drawing "+INDEX.length+" sessions…",0,0);
+    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)));
-    count.textContent=INDEX.length+" sessions";drawList();showLibrary();
+    showCount();drawList();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);
@@ -1117,13 +1286,13 @@ function drawList(){
           <button title="Remove these sessions from the library" class="dang"
             onclick="event.stopPropagation();dropGroup('${esc(r.path)}')">✕</button>
         </span>`}
-        <span class="rc">${r.count}</span></div>`;
+        <span class="rc">${num(r.count)}</span></div>`;
   }).join("");
 
   tagbar.innerHTML=TAGS.map(t=>{
     const on=!!ACTIVE_TAGS[t.name];
     return `<span class="pill tag${on?" on":""}" onclick="toggleTag('${esc(t.name)}')">
-      ${esc(t.name)}<b>${t.count}</b></span>`;
+      ${esc(t.name)}<b>${num(t.count)}</b></span>`;
   }).join("");
 }
 
@@ -1685,7 +1854,7 @@ async function planUrl(){
     showLibrary();
     closeUrl();
     showProgress(0,0);
-    if(result)note(`Added ${result.added} session${result.added===1?"":"s"} — ${result.into}`);
+    if(result)note(`Added ${num(result.added)} session${result.added===1?"":"s"} — ${result.into}`);
     return;
   }
 
@@ -1712,8 +1881,8 @@ async function planUrl(){
     const size=p.bytes?` · ${bytes(p.bytes)}`:"";
     const sample=p.names.length?` — ${p.names.slice(0,3).join(", ")}${
       p.count>3?", …":""}`:"";
-    setUrlState(`${p.count} file${p.count===1?"":"s"} in ${p.label}${size}${sample}\n`
-      +`→ ${p.into}`, `Download ${p.count}`);
+    setUrlState(`${num(p.count)} file${p.count===1?"":"s"} in ${p.label}${size}${sample}\n`
+      +`→ ${p.into}`, `Download ${num(p.count)}`);
   }catch(e){
     err.textContent=e.message;err.hidden=false;
     setUrlState("","Look");PLANNED=null;
@@ -1874,7 +2043,7 @@ async function annotate(key,fields){
 async function refreshIndex(){
   const d=await fetch("/api/index").then(r=>r.json());
   INDEX=d.sessions||[];GROUPS=d.groups||[];TAGS=d.tags||[];AI=d.ai||{};DOWNLOADS=d.downloads||DOWNLOADS;
-  count.textContent=INDEX.length+" sessions";
+  showCount();
   drawList();
   if(!cur)showLibrary();
 }
@@ -1919,7 +2088,12 @@ function pick(key){
 
 const toggle=r=>{show[r]=!show[r];limit=PAGE_SIZE;render()};
 const more=()=>{limit+=PAGE_SIZE*4;render()};
-const toggleRaw=()=>{raw=!raw;render()};
+const toggleRaw=()=>{
+  raw=!raw;
+  // Boxes flipped by hand were disagreeing with the old setting, not this one.
+  for(const id of Object.keys(TOOLRAW))delete TOOLRAW[id];
+  render();
+};
 
 /* Open or close every tool call and branch at once. Applied to the elements
    already on screen rather than by repainting: a repaint would drop the reader
@@ -2094,7 +2268,8 @@ function trajectoryTab(t,e,branches,branchSteps,counts,q){
       <span class="fsep"></span>
       <span class="chip${OPEN_ALL?" on":""}" id="xall" onclick="toggleExpand()">${
         OPEN_ALL?"collapse all":"expand all"}</span>
-      <span class="chip${raw?" on":""}" onclick="toggleRaw()">raw text</span>
+      <span class="chip${raw?" on":""}" onclick="toggleRaw()"
+        title="Show messages and calls as they were recorded. A single box can still disagree.">raw</span>
       ${q?`<span class="hits">${num(total)} of ${num(t.steps.length)} match “${esc(query)}”</span>`:""}
     </div>
     ${shown.map(({s,i})=>step(s,t,0,i,"")).join("")
@@ -2277,7 +2452,7 @@ function branchNav(branches){
         <span class="sid">${b.stepId}</span>
         <b>${esc(label)}</b>
         <span>${esc(x.description||"")||"—"}</span>
-        <em>${b.sub?b.sub.steps.length+" steps":"external"}</em>
+        <em>${b.sub?num(b.sub.steps.length)+" steps":"external"}</em>
       </button>`;
     }).join("")+`</div></div>`;
 }
@@ -2305,7 +2480,7 @@ function step(s,ctx,depth,idx,prefix){
   const on=starredSteps().includes(key);
   let h=`<div class="step ${s.source}" id="step-${key}">
     <div class="gut">
-      <a class="sid" href="#step-${key}" title="step ${s.step_id}">${s.step_id}</a>
+      <a class="sid" href="#step-${key}" title="step ${num(s.step_id)}">${num(s.step_id)}</a>
       <span class="sstar${on?" on":""}" onclick="toggleStep(event,'${key}')"
         title="${on?"Remove from favourites":"Add to favourites"}">
         <svg width="11" height="11" viewBox="0 0 24 24" fill="${on?"currentColor":"none"}"
@@ -2322,15 +2497,18 @@ function step(s,ctx,depth,idx,prefix){
   for(const c of s.tool_calls||[]){
     const r=(s.observation?.results||[]).find(x=>x.source_call_id===c.tool_call_id);
     const refs=r?.subagent_trajectory_ref||[];
+    // An id of its own, so one box can be redrawn without repainting the page.
+    // A call recorded without one still needs somewhere to be kept.
+    const id=String(c.tool_call_id||`${key}c${Object.keys(CALLS).length}`);
+    CALLS[id]={c,r};
+    const view=TOOLVIEW[c.function_name];
+    const said=view&&view.title?String(view.title(c.arguments||{})||""):"";
     h+=`<details class="tool"${OPEN_ALL?" open":""}><summary><span class="tname">${esc(c.function_name)}</span>
-        ${refs.length?`<span class="pill br">delegates</span>`:""}</summary>
-      <div class="tbody">
-        <div class="io in"><span class="iol">call</span>
-          <pre class="json">${hjson(c.arguments)}</pre></div>
-        ${r?.content?`<div class="io out"><span class="iol">output</span>
-          ${typeof r.content==="string"?pre(r.content):body(r.content)}</div>`:""}
-        ${aiOn()?callSummary(c.tool_call_id):""}
-      </div></details>`;
+        ${said?`<span class="tdesc" title="${esc(said)}">${esc(said)}</span>`:""}
+        ${refs.length?`<span class="pill br">delegates</span>`:""}
+        <span class="tflip" id="tf-${esc(id)}" onclick="flipTool(event,'${esc(id)}')"
+          title="Show this call as it was recorded">${toolIsRaw(id)?"formatted":"raw"}</span></summary>
+      <div class="tbody" id="tb-${esc(id)}">${toolBody(id)}</div></details>`;
     for(const ref of refs)h+=branch(ref,ctx,depth);
   }
   return h+`</div>`;
@@ -2349,7 +2527,7 @@ function branch(ref,ctx,depth){
   return `<details class="branch"${OPEN_ALL?" open":""}><summary>
       <b>${esc(label)}</b>
       <span class="desc">${esc(x.description||"")}</span>
-      <span class="pill br">${sub.steps.length} steps</span>
+      <span class="pill br">${num(sub.steps.length)} steps</span>
       ${depth?`<span class="pill">depth ${depth+1}</span>`:""}
     </summary><div class="inner">
       ${sub.steps.map(s=>step(s,sub,depth+1,null,esc(sub.trajectory_id||"sub")+"-")).join("")}

{transcript_viewer-0.6.1 → transcript_viewer-0.7.0}/tests/page.test.js

@@ -1480,3 +1480,145 @@ test("a failure to open leaves the reason on screen", async () => {
   assert.match(text.textContent, /Could not open your library/);
   assert.strictEqual(el.hidden, false, "a blank window would say nothing at all");
 });
+
+// ---- how a tool call reads ---------------------------------------------------
+
+test("a command is coloured as a command, not printed as JSON", () => {
+  const html = run(`return shBlock('ls -la /tmp')`);
+  assert.match(html, /class="sh"/, "it should be a shell block");
+  assert.match(html, /class="sh-cmd">ls</, "the thing being run is the command");
+  assert.match(html, /class="sh-flag">-la</, "a flag reads as a flag");
+});
+
+test("what follows a pipe is another command", () => {
+  const html = run(`return sh('grep -rn foo src/ | head -5')`);
+  const commands = [...html.matchAll(/class="sh-cmd">([^<]+)</g)].map((m) => m[1]);
+  assert.deepStrictEqual(commands, ["grep", "head"]);
+});
+
+test("a quoted string is one piece, whatever is inside it", () => {
+  const html = run(`return sh('grep "no assistant turns" src/')`);
+  assert.match(html, /class="sh-str">&quot;no assistant turns&quot;</);
+  // The words inside must not be mistaken for commands of their own.
+  const commands = [...html.matchAll(/class="sh-cmd">([^<]+)</g)].map((m) => m[1]);
+  assert.deepStrictEqual(commands, ["grep"]);
+});
+
+test("a comment is a comment only where a word could start", () => {
+  const commented = run(`return sh('# count them\\nwc -l x')`);
+  assert.match(commented, /class="sh-com"># count them</);
+  const inside = run(`return sh('curl https://x/a#b')`);
+  assert.ok(!/sh-com/.test(inside), "a # inside a word is part of the word");
+});
+
+test("a variable is picked out in either spelling", () => {
+  const html = run(`return sh('echo $HOME and \${PATH}')`);
+  const vars = [...html.matchAll(/class="sh-var">([^<]+)</g)].map((m) => m[1]);
+  assert.deepStrictEqual(vars, ["$HOME", "${PATH}"]);
+});
+
+test("markup in a command cannot reach the page as markup", () => {
+  const html = run(`return sh('echo "<img src=x onerror=alert(1)>"')`);
+  assert.ok(!html.includes("<img"), "it must be escaped");
+  assert.match(html, /&lt;img/);
+});
+
+test("a path in a command still opens in Finder, and a URL still opens", () => {
+  const withPath = run(`return shBlock('ls /Users/someone/Documents')`);
+  assert.match(withPath, /api\/reveal\?path=/, "a path should still reveal");
+  const withUrl = run(`return shBlock('curl -s https://pypi.org/simple/')`);
+  assert.match(withUrl, /<a href="https:\/\/pypi\.org\/simple\/"/);
+});
+
+test("a call says what it was for, beside what it was called", () => {
+  const title = run(
+    `return TOOLVIEW.Bash.title({command:"ls",description:"List vault root"})`,
+  );
+  assert.strictEqual(title, "List vault root");
+  const fetched = run(
+    `return TOOLVIEW.WebFetch.title({url:"https://help.obsidian.md/plugins/templates"})`,
+  );
+  assert.strictEqual(fetched, "help.obsidian.md");
+});
+
+test("a fetch shows its address as a link and its question as prose", () => {
+  const html = run(
+    `return TOOLVIEW.WebFetch.body({url:"https://example.com/a",prompt:"What does it say?"})`,
+  );
+  assert.match(html, /<a href="https:\/\/example\.com\/a"/);
+  assert.match(html, /What does it say\?/);
+});
+
+test("a malformed address does not stop the box drawing", () => {
+  const title = run(`return TOOLVIEW.WebFetch.title({url:"not a url"})`);
+  assert.strictEqual(title, "not a url");
+});
+
+test("one box can be shown raw without the rest following", () => {
+  const out = run(`
+    raw = false;
+    CALLS["a"] = {c:{function_name:"Bash",tool_call_id:"a",arguments:{command:"ls",description:"d"}}, r:null};
+    CALLS["b"] = {c:{function_name:"Bash",tool_call_id:"b",arguments:{command:"pwd",description:"d"}}, r:null};
+    TOOLRAW["a"] = true;
+    return [toolBody("a"), toolBody("b")];
+  `);
+  assert.match(out[0], /class="json"/, "the flipped one shows what was recorded");
+  assert.match(out[1], /class="sh"/, "its neighbour is untouched");
+});
+
+test("the page-wide raw setting is what a box does until it is told otherwise", () => {
+  const out = run(`
+    raw = true;
+    CALLS["c"] = {c:{function_name:"Bash",tool_call_id:"c",arguments:{command:"ls"}}, r:null};
+    const following = toolBody("c");
+    TOOLRAW["c"] = false;
+    const flipped = toolBody("c");
+    raw = false;
+    return [following, flipped];
+  `);
+  assert.match(out[0], /class="json"/, "it follows the page by default");
+  assert.match(out[1], /class="sh"/, "and can disagree once flipped");
+});
+
+test("a tool with no view of its own still gets its JSON", () => {
+  const html = run(`
+    CALLS["z"] = {c:{function_name:"SomethingNew",tool_call_id:"z",arguments:{a:1}}, r:null};
+    return toolBody("z");
+  `);
+  assert.match(html, /class="json"/);
+});
+
+test("a redirect target is a file, not a command", () => {
+  const html = run(`return sh('wc -l a.txt > /tmp/out.txt')`);
+  const commands = [...html.matchAll(/class="sh-cmd">([^<]+)</g)].map((m) => m[1]);
+  assert.deepStrictEqual(commands, ["wc"], "only wc is being run");
+});
+
+test("a subshell still starts a command", () => {
+  const html = run(`return sh('(cd /tmp && ls)')`);
+  const commands = [...html.matchAll(/class="sh-cmd">([^<]+)</g)].map((m) => m[1]);
+  assert.deepStrictEqual(commands, ["cd", "ls"]);
+});
+
+test("changing the page-wide setting means it, even for boxes flipped by hand", () => {
+  const out = run(`
+    raw = false;
+    CALLS["g"] = {c:{function_name:"Bash",tool_call_id:"g",arguments:{command:"ls"}}, r:null};
+    TOOLRAW["g"] = true;               // this box was asked for the recording
+    const before = toolBody("g");
+    render = () => {};                 // the repaint is not what is under test
+    toggleRaw();                        // now the whole page is
+    const after = toolBody("g");
+    return [before, after, raw];
+  `);
+  assert.match(out[0], /class="json"/, "it was showing the recording");
+  assert.match(out[1], /class="json"/, "and still does, because the page now says so");
+  assert.strictEqual(out[2], true);
+});
+
+test("a file path is titled by its end, where the name is", () => {
+  const title = run(
+    `return TOOLVIEW.Read.title({file_path:"/private/tmp/very/long/way/down/ARCHITECTURE.md"})`,
+  );
+  assert.strictEqual(title, "down/ARCHITECTURE.md");
+});

{transcript_viewer-0.6.1 → transcript_viewer-0.7.0}/tests/test_style.py

@@ -110,3 +110,40 @@ def test_sizes_go_through_one_formatter():
     )
     assert "1048576" not in code, "a size is still being divided by hand"
     assert code.count("function bytes(") == 1
+
+
+# Numbers a reader sees are formatted in one place, so a corpus of thousands
+# reads as "2,258 sessions" rather than "2258 sessions". These are the shapes
+# that reached the screen raw before anyone looked.
+RAW_NUMBERS = (
+    (r"\.length\s*\+\s*[\"']", "a count concatenated onto a string"),
+    (r"\$\{[^}]*\.length\}\s*(?:session|step|file|result|match)", "${…length} beside a noun"),
+    (r"\$\{\s*[a-zA-Z_$][\w.$]*\.count\s*\}", "${…count}"),
+    (r"\$\{\s*[a-zA-Z_$][\w.$]*\.added\s*\}", "${…added}"),
+    (r"\$\{\s*s\.step_id\s*\}", "${s.step_id}"),
+)
+
+
+@pytest.mark.parametrize(("pattern", "what"), RAW_NUMBERS, ids=[w for _, w in RAW_NUMBERS])
+def test_a_number_on_screen_goes_through_the_formatter(pattern, what):
+    script = PAGE[PAGE.index("<script>") : PAGE.rindex("</script>")]
+    hits = []
+    for i, line in enumerate(script.splitlines(), start=1):
+        stripped = line.strip()
+        if stripped.startswith("//") or stripped.startswith("*"):
+            continue
+        for match in re.finditer(pattern, line):
+            around = line[max(0, match.start() - 14) : match.end() + 3]
+            if "num(" in around or "bytes(" in around:
+                continue
+            hits.append(f"line {i}: {stripped[:90]}")
+    assert not hits, f"{what} without num(): " + "; ".join(hits)
+
+
+def test_the_session_count_is_said_in_one_place():
+    """It was written out three times, and one of them was already wrong."""
+    script = PAGE[PAGE.index("<script>") : PAGE.rindex("</script>")]
+    assert "const showCount=" in script, "the count should have a single home"
+    assert script.count('count.textContent=') <= 2, (
+        "the session count is being written in more than one place again"
+    )

{transcript_viewer-0.6.1 → transcript_viewer-0.7.0}/uv.lock

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