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

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

@@ -1,6 +1,6 @@
 Metadata-Version: 2.5
 Name: transcript-viewer
-Version: 0.6.2
+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.2 → transcript_viewer-0.7.0}/pyproject.toml

@@ -1,6 +1,6 @@
 [project]
 name = "transcript-viewer"
-version = "0.6.2"
+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.2 → 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 {
@@ -1921,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
@@ -2096,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("")
@@ -2324,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>`;

{transcript_viewer-0.6.2 → 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.2 → transcript_viewer-0.7.0}/uv.lock

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