@agentproto/apps 0.6.0 → 0.8.0

package/dist/session-viewer.mjs

@@ -0,0 +1,539 @@
+import { defineApp } from '@agentproto/app-kit';
+import { defineAgent } from '@agentproto/agent';
+import { defineWorkflow } from '@agentproto/workflow';
+
+/**
+ * @agentproto/apps v0.1.0
+ * Ready-made agentproto apps (teams of agents + workflows) built on app-kit.
+ */
+
+var narrator = {
+  agent: defineAgent({
+    schema: "agent/v1",
+    id: "@agentproto/session-narrator",
+    description: "Reads a daemon session's transcript and narrates it in plain English \u2014 what happened, what was decided, what's left.",
+    model: "claude-sonnet-5",
+    boundaries: [
+      "Read-only \u2014 never spawn, kill, resume, or write to any session",
+      "Narrate only what the transcript actually shows, never speculate about intent"
+    ],
+    tools: ["conversation_read", "session_list"],
+    workflows: [{ ref: "narrate-session" }]
+  }),
+  body: [
+    "You narrate a daemon session's conversation for a human who doesn't want to read the raw transcript.",
+    "",
+    'Given a session id or name, call `conversation_read` with `format: "json"` to get the',
+    "structured turn list (`meta` + `messages`, each `{ role, text, toolCalls?, ts }`). If the",
+    "session id is ambiguous or unknown, call `session_list` first to resolve it by label.",
+    "",
+    "Write a short plain-English narration:",
+    "- What the user asked for.",
+    "- What the assistant did, grouped into a few natural beats (not a line-by-line tool log).",
+    "- Any open question, decision point, or unfinished step at the end of the transcript.",
+    "",
+    "Skip tool-call plumbing details unless they're the point (e.g. a failing command, a real",
+    "decision). If `conversation.conversation` comes back null, say plainly that this session has",
+    "no readable conversation (e.g. a bare shell PTY) instead of guessing."
+  ].join("\n")
+};
+var narrateSession = defineWorkflow({
+  id: "narrate-session",
+  name: "Narrate Session",
+  description: "Read a daemon session's transcript and narrate it in plain English.",
+  version: "0.1.0",
+  inputs: {},
+  outputs: {},
+  steps: [
+    {
+      id: "narrate",
+      kind: "agent",
+      agent: { ref: "@agentproto/session-narrator" },
+      prompt: "Narrate the session named in the run input (or the most recently started session if none was given): what the user asked for, what the assistant did, and what \u2014 if anything \u2014 is still open at the end of the transcript."
+    }
+  ]
+});
+
+// src/session-viewer/ui.ts
+var SESSION_VIEWER_TOOLS = ["session_list", "conversation_read"];
+var APP_ID = "@agentproto/session-viewer";
+var SESSION_VIEWER_HTML = `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Session Viewer</title>
+<style>
+*{box-sizing:border-box;margin:0;padding:0}
+:root{
+  --bg:#0d1117;--bg2:#161b22;--bg3:#21262d;--border:#30363d;
+  --text:#e6edf3;--text2:#8b949e;--text3:#6e7681;
+  --green:#3fb950;--yellow:#d29922;--red:#f85149;--blue:#58a6ff;--purple:#bc8cff;
+}
+html,body{height:100%;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:13px;background:var(--bg);color:var(--text)}
+#app{display:flex;height:100%;overflow:hidden}
+
+/* sidebar */
+#sidebar{width:250px;min-width:190px;background:var(--bg2);border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0}
+#sidebar-hdr{padding:10px 12px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px}
+#sidebar-hdr h1{font-size:11px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.06em;flex:1}
+#archived-toggle{display:flex;align-items:center;gap:5px;font-size:10.5px;color:var(--text2);padding:6px 12px;border-bottom:1px solid var(--border);cursor:pointer;user-select:none}
+#archived-toggle input{cursor:pointer}
+#refresh-btn{background:none;border:none;cursor:pointer;color:var(--text2);font-size:14px;line-height:1;padding:2px 4px;border-radius:4px;font-family:inherit}
+#refresh-btn:hover{color:var(--text);background:var(--bg3)}
+#session-list{flex:1;overflow-y:auto;padding:4px 0}
+.si{padding:8px 12px;cursor:pointer;border-left:2px solid transparent}
+.si:hover{background:var(--bg3)}
+.si.active{background:var(--bg3);border-left-color:var(--blue)}
+.si .sn{font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.si .sm{font-size:10.5px;color:var(--text2);margin-top:3px;display:flex;gap:5px;align-items:center;flex-wrap:wrap}
+.badge{display:inline-block;padding:1px 6px;border-radius:10px;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.02em}
+.b-run{background:rgba(63,185,80,.15);color:var(--green)}
+.b-wait{background:rgba(88,166,255,.15);color:var(--blue)}
+.b-idle{background:rgba(139,148,158,.12);color:var(--text2)}
+.b-end{background:rgba(139,148,158,.1);color:var(--text3)}
+.b-err{background:rgba(248,81,73,.15);color:var(--red)}
+#empty-sidebar{padding:14px 12px;color:var(--text2);font-size:11.5px}
+
+/* main */
+#main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
+#header{padding:12px 18px;border-bottom:1px solid var(--border);background:var(--bg2);flex-shrink:0}
+#header .htitle{font-size:14px;font-weight:700;display:flex;align-items:center;gap:8px}
+.pulse{width:7px;height:7px;border-radius:50%;background:var(--green);flex:none;box-shadow:0 0 0 0 rgba(63,185,80,.4);animation:pulse 2s infinite}
+@keyframes pulse{70%{box-shadow:0 0 0 6px rgba(63,185,80,0)}100%{box-shadow:0 0 0 0 rgba(63,185,80,0)}}
+#header .hfacts{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
+.fact{font-size:10.5px;font-weight:600;background:var(--bg3);border:1px solid var(--border);color:var(--text2);padding:3px 9px;border-radius:999px}
+#empty-main,#loading-main,#error-main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--text2);gap:8px;text-align:center;padding:24px}
+#empty-main .ico,#loading-main .ico{font-size:30px}
+#error-main{color:var(--red)}
+
+/* transcript */
+#transcript{flex:1;overflow-y:auto;padding:14px 18px;display:flex;flex-direction:column;gap:10px}
+.msg{display:flex;flex-direction:column;max-width:78%}
+.msg.role-user{align-self:flex-end;align-items:flex-end}
+.msg.role-assistant,.msg.role-tool{align-self:flex-start;align-items:flex-start}
+.msg.role-system{align-self:center;max-width:90%}
+.bubble{border-radius:10px;padding:9px 12px;font-size:13px;line-height:1.55;white-space:pre-wrap;word-break:break-word}
+.role-user .bubble{background:var(--blue);color:#04101c;border-bottom-right-radius:3px}
+.role-assistant .bubble{background:var(--bg2);border:1px solid var(--border);border-bottom-left-radius:3px}
+.role-system .bubble{background:transparent;border:1px dashed var(--border);color:var(--text2);font-size:11.5px;text-align:center}
+.mrow{display:flex;align-items:center;gap:6px;margin-bottom:3px}
+.mrole{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text3)}
+.mtime{font-size:10px;color:var(--text3);font-variant-numeric:tabular-nums}
+
+.chip{margin-top:6px;border:1px solid var(--border);border-radius:8px;background:var(--bg3);overflow:hidden;cursor:pointer;width:100%}
+.chip .ch{padding:6px 10px;font-size:11.5px;display:flex;align-items:center;gap:7px;color:var(--text2)}
+.chip .ch .ci{color:var(--yellow);flex:none}
+.chip.tool-result .ch .ci{color:var(--purple)}
+.chip .ch .cname{font-weight:600;color:var(--text)}
+.chip .ch .cprev{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text3)}
+.chip .ch .cchev{flex:none;transition:transform .12s;color:var(--text3);font-size:10px}
+.chip.open .ch .cchev{transform:rotate(90deg)}
+.chip pre{display:none;margin:0;border-top:1px solid var(--border);padding:9px 11px;font-family:Menlo,Monaco,'Courier New',monospace;font-size:11px;line-height:1.5;color:var(--text2);white-space:pre-wrap;word-break:break-word;max-height:320px;overflow:auto}
+.chip.open pre{display:block}
+.reasoning{margin-bottom:6px;font-size:11.5px;font-style:italic;color:var(--text2);border-left:2px solid var(--border);padding-left:8px}
+
+#statusbar{padding:5px 18px;font-size:10.5px;color:var(--text2);border-top:1px solid var(--border);background:var(--bg2);flex-shrink:0;display:flex;justify-content:space-between}
+</style>
+</head>
+<body>
+<div id="app">
+  <div id="sidebar">
+    <div id="sidebar-hdr">
+      <h1>Sessions</h1>
+      <button id="refresh-btn" title="Refresh" type="button">&#8635;</button>
+    </div>
+    <label id="archived-toggle"><input type="checkbox" id="archived-check"> show archived</label>
+    <div id="session-list"></div>
+  </div>
+  <div id="main">
+    <div id="header" style="display:none"></div>
+    <div id="empty-main"><div class="ico">&#128172;</div><div>Pick a session to read its conversation</div></div>
+    <div id="transcript" style="display:none"></div>
+    <div id="statusbar" style="display:none">
+      <span id="status-left"></span>
+      <span id="status-right"></span>
+    </div>
+  </div>
+</div>
+<script>
+var callTool = null;
+var APP_ID = ${JSON.stringify(APP_ID)};
+
+// app_tool_call wraps its dispatch result at least once (its own text-result
+// body is the JSON-stringified inner MCP tool result); peel back through
+// nested {content:[{type:"text",text:...}]} shells until the payload stops
+// looking like one \u2014 works whichever layer the host's bridge already
+// unwrapped. With conversation_read's format:"json" this resolves straight
+// to the { meta, messages } object; with session_list, straight to
+// { sessions: [...] }.
+function unwrapText(result) {
+  var cur = result;
+  for (var i = 0; i < 4; i++) {
+    if (typeof cur === "string") {
+      try { cur = JSON.parse(cur); continue; } catch (e) { return cur; }
+    }
+    if (cur && Array.isArray(cur.content) && cur.content[0] && typeof cur.content[0].text === "string") {
+      cur = cur.content[0].text;
+      continue;
+    }
+    break;
+  }
+  return cur;
+}
+
+function callApp(tool, args) {
+  return callTool("app_tool_call", { appId: APP_ID, tool: tool, args: args || {} }).then(unwrapText);
+}
+
+function escHtml(s) {
+  return String(s == null ? "" : s).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+
+function fmtTime(ts) {
+  if (!ts) return "";
+  try { return new Date(ts).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", second: "2-digit" }); }
+  catch (e) { return ""; }
+}
+
+function fmtClock(iso) {
+  if (!iso) return "";
+  try { return new Date(iso).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }); }
+  catch (e) { return ""; }
+}
+
+function fmtRelative(iso) {
+  if (!iso) return "";
+  var ms = Date.now() - new Date(iso).getTime();
+  if (!isFinite(ms)) return "";
+  var s = Math.round(ms / 1000);
+  if (s < 5) return "just now";
+  if (s < 60) return s + "s ago";
+  var m = Math.round(s / 60);
+  if (m < 60) return m + "m ago";
+  var h = Math.round(m / 60);
+  if (h < 24) return h + "h ago";
+  return Math.round(h / 24) + "d ago";
+}
+
+function fmtDuration(startIso, endIso) {
+  var end = endIso ? new Date(endIso).getTime() : Date.now();
+  var start = new Date(startIso).getTime();
+  if (!isFinite(start) || !isFinite(end)) return "";
+  var s = Math.max(0, Math.round((end - start) / 1000));
+  if (s < 60) return s + "s";
+  var m = Math.floor(s / 60);
+  if (m < 60) return m + "m " + (s % 60) + "s";
+  var h = Math.floor(m / 60);
+  return h + "h " + (m % 60) + "m";
+}
+
+function prettyArgs(raw) {
+  if (raw == null) return "";
+  if (typeof raw !== "string") return JSON.stringify(raw, null, 2);
+  try { return JSON.stringify(JSON.parse(raw), null, 2); } catch (e) { return raw; }
+}
+
+function firstLine(s, max) {
+  var t = String(s == null ? "" : s).split("\\n")[0];
+  return t.length > max ? t.slice(0, max) + "\\u2026" : t;
+}
+
+// ============================================================
+// state
+// ============================================================
+
+var sessions = [];
+var activeId = null;
+var includeArchived = false;
+var currentMeta = null;
+var lastMessageCount = -1;
+var sidebarTimer = null;
+var convoTimer = null;
+
+function findSession(id) {
+  for (var i = 0; i < sessions.length; i++) if (sessions[i].id === id) return sessions[i];
+  return null;
+}
+
+function isLive(s) {
+  return !!s && (s.status === "running" || s.status === "starting");
+}
+
+// ============================================================
+// sidebar
+// ============================================================
+
+function displayBadge(s) {
+  if (s.status === "running") {
+    if (s.busy) return { label: "working", cls: "b-run" };
+    if (s.awaitingInput) return { label: "waiting", cls: "b-wait" };
+    return { label: "idle", cls: "b-idle" };
+  }
+  if (s.status === "starting") return { label: "starting", cls: "b-wait" };
+  if (s.status === "error" || s.status === "killed") return { label: s.status, cls: "b-err" };
+  return { label: s.status || "exited", cls: "b-end" };
+}
+
+function renderSidebar() {
+  var el = document.getElementById("session-list");
+  if (sessions.length === 0) {
+    el.innerHTML = '<div id="empty-sidebar">No sessions yet.</div>';
+    return;
+  }
+  var html = "";
+  for (var i = 0; i < sessions.length; i++) {
+    var s = sessions[i];
+    var label = s.label || s.title || s.name || (s.command ? String(s.command).split("/").pop() : null) || s.id.slice(0, 10);
+    var db = displayBadge(s);
+    var active = s.id === activeId ? " active" : "";
+    html += '<div class="si' + active + '" data-id="' + escHtml(s.id) + '">'
+      + '<div class="sn">' + escHtml(label) + "</div>"
+      + '<div class="sm">'
+      + '<span class="badge ' + db.cls + '">' + escHtml(db.label) + "</span>"
+      + "<span>" + escHtml(s.kind || "") + "</span>"
+      + "<span>" + escHtml(fmtRelative(s.startedAt)) + "</span>"
+      + "</div></div>";
+  }
+  el.innerHTML = html;
+  var rows = el.querySelectorAll(".si");
+  for (var j = 0; j < rows.length; j++) {
+    rows[j].addEventListener("click", (function (id) { return function () { selectSession(id); }; })(rows[j].getAttribute("data-id")));
+  }
+}
+
+function loadSessions() {
+  return callApp("session_list", { kind: "all", includeArchived: includeArchived }).then(function (data) {
+    sessions = (data && data.sessions) || [];
+    renderSidebar();
+    if (activeId) {
+      var hdr = document.getElementById("header");
+      if (hdr.style.display !== "none") renderHeader();
+    }
+  }).catch(function (e) {
+    document.getElementById("status-left").textContent = "sessions: " + e.message;
+  });
+}
+
+// ============================================================
+// header
+// ============================================================
+
+function renderHeader() {
+  var s = findSession(activeId);
+  var meta = currentMeta || {};
+  var el = document.getElementById("header");
+  el.style.display = "block";
+
+  var title = meta.title || (s && (s.label || s.title)) || activeId;
+  var live = s && isLive(s);
+  var pulse = live ? '<span class="pulse"></span>' : "";
+
+  var facts = [];
+  if (meta.model || (s && s.model)) facts.push(escHtml(meta.model || (s && s.model)));
+  if (s && s.adapterSlug) facts.push(escHtml(s.adapterSlug));
+  if (s && s.kind) facts.push(escHtml(s.kind));
+  if (s) { var db = displayBadge(s); facts.push(escHtml(db.label)); }
+  if (s && s.cwd) facts.push('<span title="' + escHtml(s.cwd) + '">' + escHtml(s.cwd.length > 46 ? "\\u2026" + s.cwd.slice(-44) : s.cwd) + "</span>");
+  var started = (meta.startedAt || (s && s.startedAt));
+  if (started) facts.push("started " + escHtml(fmtClock(started)) + " (" + escHtml(fmtRelative(started)) + ")");
+  var ended = meta.endedAt || (s && s.endedAt);
+  if (ended) facts.push("ran " + escHtml(fmtDuration(started, ended)));
+  else if (started) facts.push("running " + escHtml(fmtDuration(started)));
+  if (meta.messageCount != null) facts.push(meta.messageCount + " messages");
+  if (meta.toolCallCount != null) facts.push(meta.toolCallCount + " tool calls");
+  if (meta.tokens && (meta.tokens.input != null || meta.tokens.output != null)) {
+    facts.push("tokens " + (meta.tokens.input || 0) + "\\u2192" + (meta.tokens.output || 0));
+  }
+  if (meta.costUsd != null) facts.push("$" + Number(meta.costUsd).toFixed(4));
+
+  el.innerHTML = '<div class="htitle">' + pulse + escHtml(title) + "</div>"
+    + '<div class="hfacts">' + facts.map(function (f) { return '<span class="fact">' + f + "</span>"; }).join("") + "</div>";
+}
+
+// ============================================================
+// transcript
+// ============================================================
+
+function renderToolCallChip(tc) {
+  var args = prettyArgs(tc.args);
+  return '<div class="chip tool-call"><div class="ch"><span class="ci">&#9656;</span>'
+    + '<span class="cname">' + escHtml(tc.name || "tool") + "</span>"
+    + '<span class="cprev">' + escHtml(firstLine(args, 64)) + "</span>"
+    + '<span class="cchev">&#9656;</span></div><pre>' + escHtml(args) + "</pre></div>";
+}
+
+function renderToolResultChip(m) {
+  var text = m.text || "";
+  return '<div class="chip tool-result"><div class="ch"><span class="ci">&#128295;</span>'
+    + '<span class="cname">' + escHtml(m.toolName || "result") + "</span>"
+    + '<span class="cprev">' + escHtml(firstLine(text, 64)) + "</span>"
+    + '<span class="cchev">&#9656;</span></div><pre>' + escHtml(text) + "</pre></div>";
+}
+
+function renderMessage(m) {
+  var time = m.ts ? '<span class="mtime">' + fmtTime(m.ts) + "</span>" : "";
+  if (m.role === "system") {
+    return '<div class="msg role-system"><div class="bubble">' + escHtml(m.text || "") + "</div></div>";
+  }
+  if (m.role === "tool") {
+    return '<div class="msg role-tool">' + renderToolResultChip(m) + "</div>";
+  }
+  if (m.role === "user") {
+    return '<div class="msg role-user"><div class="mrow"><span class="mrole">You</span>' + time + "</div>"
+      + '<div class="bubble">' + escHtml(m.text || "") + "</div></div>";
+  }
+  // assistant
+  var inner = "";
+  if (m.reasoning) inner += '<div class="reasoning">' + escHtml(m.reasoning) + "</div>";
+  if (m.text) inner += escHtml(m.text);
+  var body = inner ? '<div class="bubble">' + inner + "</div>" : "";
+  var chips = (m.toolCalls || []).map(renderToolCallChip).join("");
+  return '<div class="msg role-assistant"><div class="mrow"><span class="mrole">Assistant</span>' + time + "</div>"
+    + body + chips + "</div>";
+}
+
+function renderTranscript(messages) {
+  var el = document.getElementById("transcript");
+  var atBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 80;
+  el.style.display = "flex";
+  document.getElementById("empty-main").style.display = "none";
+  var errEl = document.getElementById("error-main");
+  if (errEl) errEl.style.display = "none";
+  if (messages.length === 0) {
+    el.innerHTML = '<div style="color:var(--text2);text-align:center;padding:20px">(empty conversation)</div>';
+    return;
+  }
+  el.innerHTML = messages.map(renderMessage).join("");
+  if (atBottom) el.scrollTop = el.scrollHeight;
+
+  var chips = el.querySelectorAll(".chip");
+  for (var i = 0; i < chips.length; i++) {
+    chips[i].querySelector(".ch").addEventListener("click", (function (chip) {
+      return function () { chip.classList.toggle("open"); };
+    })(chips[i]));
+  }
+}
+
+function renderNoConversation(reason) {
+  document.getElementById("transcript").style.display = "none";
+  document.getElementById("empty-main").style.display = "none";
+  var el = document.getElementById("error-main");
+  el.style.display = "flex";
+  el.innerHTML = '<div class="ico">&#128683;</div><div>No readable conversation for this session'
+    + (reason ? '<br><span style="font-size:11px;color:var(--text3)">' + escHtml(reason) + "</span>" : "")
+    + "</div>";
+}
+
+// ============================================================
+// selection + polling
+// ============================================================
+
+function clearConvoPoll() {
+  if (convoTimer) { clearTimeout(convoTimer); convoTimer = null; }
+}
+
+function scheduleConvoPoll() {
+  clearConvoPoll();
+  var s = findSession(activeId);
+  if (!isLive(s)) return;
+  convoTimer = setTimeout(function () {
+    loadConversation(activeId, { silent: true });
+  }, 3500);
+}
+
+function loadConversation(id, opts) {
+  opts = opts || {};
+  var requestedId = id;
+  if (!opts.silent) {
+    document.getElementById("transcript").style.display = "none";
+    document.getElementById("empty-main").style.display = "none";
+    var errEl = document.getElementById("error-main");
+    errEl.style.display = "flex";
+    errEl.innerHTML = '<div class="ico">&#8987;</div><div>Loading\\u2026</div>';
+  }
+  document.getElementById("status-left").textContent = "loading\\u2026";
+  return callApp("conversation_read", { idOrName: id, format: "json" }).then(function (data) {
+    if (activeId !== requestedId) return; // switched away meanwhile
+    if (!data || !Array.isArray(data.messages)) {
+      currentMeta = null;
+      renderHeader();
+      renderNoConversation(data && data.reason);
+      clearConvoPoll();
+      document.getElementById("status-left").textContent = "no conversation";
+      return;
+    }
+    currentMeta = data.meta || {};
+    lastMessageCount = data.messages.length;
+    renderHeader();
+    renderTranscript(data.messages);
+    document.getElementById("status-left").textContent = data.messages.length + " messages";
+    document.getElementById("status-right").textContent = "updated " + fmtTime(Date.now());
+    scheduleConvoPoll();
+  }).catch(function (e) {
+    if (activeId !== requestedId) return;
+    document.getElementById("status-left").textContent = "error: " + e.message;
+    if (!opts.silent) renderNoConversation(e.message);
+  });
+}
+
+function selectSession(id) {
+  if (activeId === id) return;
+  activeId = id;
+  currentMeta = null;
+  lastMessageCount = -1;
+  clearConvoPoll();
+  renderSidebar();
+  document.getElementById("statusbar").style.display = "flex";
+  renderHeader();
+  loadConversation(id, {});
+}
+
+// ============================================================
+// boot
+// ============================================================
+
+document.getElementById("refresh-btn").addEventListener("click", function () {
+  loadSessions();
+  if (activeId) loadConversation(activeId, {});
+});
+document.getElementById("archived-check").addEventListener("change", function (e) {
+  includeArchived = !!e.target.checked;
+  loadSessions();
+});
+
+window.McpApp.connect()
+  .then(function (bridge) {
+    callTool = bridge.callTool;
+    return loadSessions();
+  })
+  .then(function () {
+    sidebarTimer = setInterval(loadSessions, 5000);
+    if (!activeId && sessions.length > 0) selectSession(sessions[0].id);
+  })
+  .catch(function (err) {
+    document.getElementById("empty-main").innerHTML =
+      '<div class="ico">&#9888;</div><div>Standalone mode \\u2014 no host bridge (' + escHtml(err.message) + ")</div>";
+  });
+</script>
+</body>
+</html>`;
+
+// src/session-viewer/index.ts
+var sessionViewer = defineApp({
+  id: "@agentproto/session-viewer",
+  name: "Session Viewer",
+  version: "0.1.0",
+  description: "Read a daemon session as a clean conversation \u2014 turns, tool calls, timestamps.",
+  agents: [narrator],
+  workflows: [narrateSession],
+  ui: {
+    html: SESSION_VIEWER_HTML,
+    title: "Session Viewer",
+    tools: [...SESSION_VIEWER_TOOLS]
+  }
+});
+
+export { narrateSession, narrator, sessionViewer };
+//# sourceMappingURL=session-viewer.mjs.map
+//# sourceMappingURL=session-viewer.mjs.map

package/dist/session-viewer.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/session-viewer/agents/narrator.ts","../src/session-viewer/workflows/narrate-session.ts","../src/session-viewer/ui.ts","../src/session-viewer/index.ts"],"names":[],"mappings":"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","file":"session-viewer.mjs","sourcesContent":["import { defineAgent } from \"@agentproto/agent\"\nimport type { AgentEntry } from \"@agentproto/app-kit\"\n\nexport const narrator: AgentEntry = {\n  agent: defineAgent({\n    schema: \"agent/v1\",\n    id: \"@agentproto/session-narrator\",\n    description:\n      \"Reads a daemon session's transcript and narrates it in plain English — what happened, what was decided, what's left.\",\n    model: \"claude-sonnet-5\",\n    boundaries: [\n      \"Read-only — never spawn, kill, resume, or write to any session\",\n      \"Narrate only what the transcript actually shows, never speculate about intent\",\n    ],\n    tools: [\"conversation_read\", \"session_list\"],\n    workflows: [{ ref: \"narrate-session\" }],\n  }),\n  body: [\n    \"You narrate a daemon session's conversation for a human who doesn't want to read the raw transcript.\",\n    \"\",\n    \"Given a session id or name, call `conversation_read` with `format: \\\"json\\\"` to get the\",\n    \"structured turn list (`meta` + `messages`, each `{ role, text, toolCalls?, ts }`). If the\",\n    \"session id is ambiguous or unknown, call `session_list` first to resolve it by label.\",\n    \"\",\n    \"Write a short plain-English narration:\",\n    \"- What the user asked for.\",\n    \"- What the assistant did, grouped into a few natural beats (not a line-by-line tool log).\",\n    \"- Any open question, decision point, or unfinished step at the end of the transcript.\",\n    \"\",\n    \"Skip tool-call plumbing details unless they're the point (e.g. a failing command, a real\",\n    \"decision). If `conversation.conversation` comes back null, say plainly that this session has\",\n    \"no readable conversation (e.g. a bare shell PTY) instead of guessing.\",\n  ].join(\"\\n\"),\n}\n","import { defineWorkflow } from \"@agentproto/workflow\"\n\nexport const narrateSession = defineWorkflow({\n  id: \"narrate-session\",\n  name: \"Narrate Session\",\n  description: \"Read a daemon session's transcript and narrate it in plain English.\",\n  version: \"0.1.0\",\n  inputs: {},\n  outputs: {},\n  steps: [\n    {\n      id: \"narrate\",\n      kind: \"agent\",\n      agent: { ref: \"@agentproto/session-narrator\" },\n      prompt:\n        \"Narrate the session named in the run input (or the most recently started session if \" +\n        \"none was given): what the user asked for, what the assistant did, and what — if \" +\n        \"anything — is still open at the end of the transcript.\",\n    },\n  ],\n})\n","/**\n * Session Viewer — a self-contained MCP App panel for `session-viewer`.\n *\n * Talks to the daemon only through the `window.McpApp.connect()` bridge\n * (never a direct `fetch`): every action round-trips through the app's own\n * `app_tool_call` gateway tool, `{ appId, tool, args }` — same convention as\n * `media-viewer`/`mail-triage`. Read-only by design: `session_list` picks a\n * session (live or finished), `conversation_read` renders it as a clean\n * conversation — no spawn/kill/resume action lives here.\n *\n * Live sessions are polled (`conversation_read` has no push channel over\n * this bridge — see the PR's feasibility note on a real event/PTY stream);\n * a finished session is fetched once and left alone.\n */\n\nexport const SESSION_VIEWER_TOOLS = [\"session_list\", \"conversation_read\"] as const\n\nconst APP_ID = \"@agentproto/session-viewer\"\n\nexport const SESSION_VIEWER_HTML = `<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Session Viewer</title>\n<style>\n*{box-sizing:border-box;margin:0;padding:0}\n:root{\n  --bg:#0d1117;--bg2:#161b22;--bg3:#21262d;--border:#30363d;\n  --text:#e6edf3;--text2:#8b949e;--text3:#6e7681;\n  --green:#3fb950;--yellow:#d29922;--red:#f85149;--blue:#58a6ff;--purple:#bc8cff;\n}\nhtml,body{height:100%;font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;font-size:13px;background:var(--bg);color:var(--text)}\n#app{display:flex;height:100%;overflow:hidden}\n\n/* sidebar */\n#sidebar{width:250px;min-width:190px;background:var(--bg2);border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0}\n#sidebar-hdr{padding:10px 12px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px}\n#sidebar-hdr h1{font-size:11px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.06em;flex:1}\n#archived-toggle{display:flex;align-items:center;gap:5px;font-size:10.5px;color:var(--text2);padding:6px 12px;border-bottom:1px solid var(--border);cursor:pointer;user-select:none}\n#archived-toggle input{cursor:pointer}\n#refresh-btn{background:none;border:none;cursor:pointer;color:var(--text2);font-size:14px;line-height:1;padding:2px 4px;border-radius:4px;font-family:inherit}\n#refresh-btn:hover{color:var(--text);background:var(--bg3)}\n#session-list{flex:1;overflow-y:auto;padding:4px 0}\n.si{padding:8px 12px;cursor:pointer;border-left:2px solid transparent}\n.si:hover{background:var(--bg3)}\n.si.active{background:var(--bg3);border-left-color:var(--blue)}\n.si .sn{font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n.si .sm{font-size:10.5px;color:var(--text2);margin-top:3px;display:flex;gap:5px;align-items:center;flex-wrap:wrap}\n.badge{display:inline-block;padding:1px 6px;border-radius:10px;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.02em}\n.b-run{background:rgba(63,185,80,.15);color:var(--green)}\n.b-wait{background:rgba(88,166,255,.15);color:var(--blue)}\n.b-idle{background:rgba(139,148,158,.12);color:var(--text2)}\n.b-end{background:rgba(139,148,158,.1);color:var(--text3)}\n.b-err{background:rgba(248,81,73,.15);color:var(--red)}\n#empty-sidebar{padding:14px 12px;color:var(--text2);font-size:11.5px}\n\n/* main */\n#main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}\n#header{padding:12px 18px;border-bottom:1px solid var(--border);background:var(--bg2);flex-shrink:0}\n#header .htitle{font-size:14px;font-weight:700;display:flex;align-items:center;gap:8px}\n.pulse{width:7px;height:7px;border-radius:50%;background:var(--green);flex:none;box-shadow:0 0 0 0 rgba(63,185,80,.4);animation:pulse 2s infinite}\n@keyframes pulse{70%{box-shadow:0 0 0 6px rgba(63,185,80,0)}100%{box-shadow:0 0 0 0 rgba(63,185,80,0)}}\n#header .hfacts{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}\n.fact{font-size:10.5px;font-weight:600;background:var(--bg3);border:1px solid var(--border);color:var(--text2);padding:3px 9px;border-radius:999px}\n#empty-main,#loading-main,#error-main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--text2);gap:8px;text-align:center;padding:24px}\n#empty-main .ico,#loading-main .ico{font-size:30px}\n#error-main{color:var(--red)}\n\n/* transcript */\n#transcript{flex:1;overflow-y:auto;padding:14px 18px;display:flex;flex-direction:column;gap:10px}\n.msg{display:flex;flex-direction:column;max-width:78%}\n.msg.role-user{align-self:flex-end;align-items:flex-end}\n.msg.role-assistant,.msg.role-tool{align-self:flex-start;align-items:flex-start}\n.msg.role-system{align-self:center;max-width:90%}\n.bubble{border-radius:10px;padding:9px 12px;font-size:13px;line-height:1.55;white-space:pre-wrap;word-break:break-word}\n.role-user .bubble{background:var(--blue);color:#04101c;border-bottom-right-radius:3px}\n.role-assistant .bubble{background:var(--bg2);border:1px solid var(--border);border-bottom-left-radius:3px}\n.role-system .bubble{background:transparent;border:1px dashed var(--border);color:var(--text2);font-size:11.5px;text-align:center}\n.mrow{display:flex;align-items:center;gap:6px;margin-bottom:3px}\n.mrole{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text3)}\n.mtime{font-size:10px;color:var(--text3);font-variant-numeric:tabular-nums}\n\n.chip{margin-top:6px;border:1px solid var(--border);border-radius:8px;background:var(--bg3);overflow:hidden;cursor:pointer;width:100%}\n.chip .ch{padding:6px 10px;font-size:11.5px;display:flex;align-items:center;gap:7px;color:var(--text2)}\n.chip .ch .ci{color:var(--yellow);flex:none}\n.chip.tool-result .ch .ci{color:var(--purple)}\n.chip .ch .cname{font-weight:600;color:var(--text)}\n.chip .ch .cprev{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text3)}\n.chip .ch .cchev{flex:none;transition:transform .12s;color:var(--text3);font-size:10px}\n.chip.open .ch .cchev{transform:rotate(90deg)}\n.chip pre{display:none;margin:0;border-top:1px solid var(--border);padding:9px 11px;font-family:Menlo,Monaco,'Courier New',monospace;font-size:11px;line-height:1.5;color:var(--text2);white-space:pre-wrap;word-break:break-word;max-height:320px;overflow:auto}\n.chip.open pre{display:block}\n.reasoning{margin-bottom:6px;font-size:11.5px;font-style:italic;color:var(--text2);border-left:2px solid var(--border);padding-left:8px}\n\n#statusbar{padding:5px 18px;font-size:10.5px;color:var(--text2);border-top:1px solid var(--border);background:var(--bg2);flex-shrink:0;display:flex;justify-content:space-between}\n</style>\n</head>\n<body>\n<div id=\"app\">\n  <div id=\"sidebar\">\n    <div id=\"sidebar-hdr\">\n      <h1>Sessions</h1>\n      <button id=\"refresh-btn\" title=\"Refresh\" type=\"button\">&#8635;</button>\n    </div>\n    <label id=\"archived-toggle\"><input type=\"checkbox\" id=\"archived-check\"> show archived</label>\n    <div id=\"session-list\"></div>\n  </div>\n  <div id=\"main\">\n    <div id=\"header\" style=\"display:none\"></div>\n    <div id=\"empty-main\"><div class=\"ico\">&#128172;</div><div>Pick a session to read its conversation</div></div>\n    <div id=\"transcript\" style=\"display:none\"></div>\n    <div id=\"statusbar\" style=\"display:none\">\n      <span id=\"status-left\"></span>\n      <span id=\"status-right\"></span>\n    </div>\n  </div>\n</div>\n<script>\nvar callTool = null;\nvar APP_ID = ${JSON.stringify(APP_ID)};\n\n// app_tool_call wraps its dispatch result at least once (its own text-result\n// body is the JSON-stringified inner MCP tool result); peel back through\n// nested {content:[{type:\"text\",text:...}]} shells until the payload stops\n// looking like one — works whichever layer the host's bridge already\n// unwrapped. With conversation_read's format:\"json\" this resolves straight\n// to the { meta, messages } object; with session_list, straight to\n// { sessions: [...] }.\nfunction unwrapText(result) {\n  var cur = result;\n  for (var i = 0; i < 4; i++) {\n    if (typeof cur === \"string\") {\n      try { cur = JSON.parse(cur); continue; } catch (e) { return cur; }\n    }\n    if (cur && Array.isArray(cur.content) && cur.content[0] && typeof cur.content[0].text === \"string\") {\n      cur = cur.content[0].text;\n      continue;\n    }\n    break;\n  }\n  return cur;\n}\n\nfunction callApp(tool, args) {\n  return callTool(\"app_tool_call\", { appId: APP_ID, tool: tool, args: args || {} }).then(unwrapText);\n}\n\nfunction escHtml(s) {\n  return String(s == null ? \"\" : s).replace(/&/g, \"&amp;\").replace(/</g, \"&lt;\").replace(/>/g, \"&gt;\").replace(/\"/g, \"&quot;\");\n}\n\nfunction fmtTime(ts) {\n  if (!ts) return \"\";\n  try { return new Date(ts).toLocaleTimeString([], { hour: \"2-digit\", minute: \"2-digit\", second: \"2-digit\" }); }\n  catch (e) { return \"\"; }\n}\n\nfunction fmtClock(iso) {\n  if (!iso) return \"\";\n  try { return new Date(iso).toLocaleTimeString([], { hour: \"2-digit\", minute: \"2-digit\" }); }\n  catch (e) { return \"\"; }\n}\n\nfunction fmtRelative(iso) {\n  if (!iso) return \"\";\n  var ms = Date.now() - new Date(iso).getTime();\n  if (!isFinite(ms)) return \"\";\n  var s = Math.round(ms / 1000);\n  if (s < 5) return \"just now\";\n  if (s < 60) return s + \"s ago\";\n  var m = Math.round(s / 60);\n  if (m < 60) return m + \"m ago\";\n  var h = Math.round(m / 60);\n  if (h < 24) return h + \"h ago\";\n  return Math.round(h / 24) + \"d ago\";\n}\n\nfunction fmtDuration(startIso, endIso) {\n  var end = endIso ? new Date(endIso).getTime() : Date.now();\n  var start = new Date(startIso).getTime();\n  if (!isFinite(start) || !isFinite(end)) return \"\";\n  var s = Math.max(0, Math.round((end - start) / 1000));\n  if (s < 60) return s + \"s\";\n  var m = Math.floor(s / 60);\n  if (m < 60) return m + \"m \" + (s % 60) + \"s\";\n  var h = Math.floor(m / 60);\n  return h + \"h \" + (m % 60) + \"m\";\n}\n\nfunction prettyArgs(raw) {\n  if (raw == null) return \"\";\n  if (typeof raw !== \"string\") return JSON.stringify(raw, null, 2);\n  try { return JSON.stringify(JSON.parse(raw), null, 2); } catch (e) { return raw; }\n}\n\nfunction firstLine(s, max) {\n  var t = String(s == null ? \"\" : s).split(\"\\\\n\")[0];\n  return t.length > max ? t.slice(0, max) + \"\\\\u2026\" : t;\n}\n\n// ============================================================\n// state\n// ============================================================\n\nvar sessions = [];\nvar activeId = null;\nvar includeArchived = false;\nvar currentMeta = null;\nvar lastMessageCount = -1;\nvar sidebarTimer = null;\nvar convoTimer = null;\n\nfunction findSession(id) {\n  for (var i = 0; i < sessions.length; i++) if (sessions[i].id === id) return sessions[i];\n  return null;\n}\n\nfunction isLive(s) {\n  return !!s && (s.status === \"running\" || s.status === \"starting\");\n}\n\n// ============================================================\n// sidebar\n// ============================================================\n\nfunction displayBadge(s) {\n  if (s.status === \"running\") {\n    if (s.busy) return { label: \"working\", cls: \"b-run\" };\n    if (s.awaitingInput) return { label: \"waiting\", cls: \"b-wait\" };\n    return { label: \"idle\", cls: \"b-idle\" };\n  }\n  if (s.status === \"starting\") return { label: \"starting\", cls: \"b-wait\" };\n  if (s.status === \"error\" || s.status === \"killed\") return { label: s.status, cls: \"b-err\" };\n  return { label: s.status || \"exited\", cls: \"b-end\" };\n}\n\nfunction renderSidebar() {\n  var el = document.getElementById(\"session-list\");\n  if (sessions.length === 0) {\n    el.innerHTML = '<div id=\"empty-sidebar\">No sessions yet.</div>';\n    return;\n  }\n  var html = \"\";\n  for (var i = 0; i < sessions.length; i++) {\n    var s = sessions[i];\n    var label = s.label || s.title || s.name || (s.command ? String(s.command).split(\"/\").pop() : null) || s.id.slice(0, 10);\n    var db = displayBadge(s);\n    var active = s.id === activeId ? \" active\" : \"\";\n    html += '<div class=\"si' + active + '\" data-id=\"' + escHtml(s.id) + '\">'\n      + '<div class=\"sn\">' + escHtml(label) + \"</div>\"\n      + '<div class=\"sm\">'\n      + '<span class=\"badge ' + db.cls + '\">' + escHtml(db.label) + \"</span>\"\n      + \"<span>\" + escHtml(s.kind || \"\") + \"</span>\"\n      + \"<span>\" + escHtml(fmtRelative(s.startedAt)) + \"</span>\"\n      + \"</div></div>\";\n  }\n  el.innerHTML = html;\n  var rows = el.querySelectorAll(\".si\");\n  for (var j = 0; j < rows.length; j++) {\n    rows[j].addEventListener(\"click\", (function (id) { return function () { selectSession(id); }; })(rows[j].getAttribute(\"data-id\")));\n  }\n}\n\nfunction loadSessions() {\n  return callApp(\"session_list\", { kind: \"all\", includeArchived: includeArchived }).then(function (data) {\n    sessions = (data && data.sessions) || [];\n    renderSidebar();\n    if (activeId) {\n      var hdr = document.getElementById(\"header\");\n      if (hdr.style.display !== \"none\") renderHeader();\n    }\n  }).catch(function (e) {\n    document.getElementById(\"status-left\").textContent = \"sessions: \" + e.message;\n  });\n}\n\n// ============================================================\n// header\n// ============================================================\n\nfunction renderHeader() {\n  var s = findSession(activeId);\n  var meta = currentMeta || {};\n  var el = document.getElementById(\"header\");\n  el.style.display = \"block\";\n\n  var title = meta.title || (s && (s.label || s.title)) || activeId;\n  var live = s && isLive(s);\n  var pulse = live ? '<span class=\"pulse\"></span>' : \"\";\n\n  var facts = [];\n  if (meta.model || (s && s.model)) facts.push(escHtml(meta.model || (s && s.model)));\n  if (s && s.adapterSlug) facts.push(escHtml(s.adapterSlug));\n  if (s && s.kind) facts.push(escHtml(s.kind));\n  if (s) { var db = displayBadge(s); facts.push(escHtml(db.label)); }\n  if (s && s.cwd) facts.push('<span title=\"' + escHtml(s.cwd) + '\">' + escHtml(s.cwd.length > 46 ? \"\\\\u2026\" + s.cwd.slice(-44) : s.cwd) + \"</span>\");\n  var started = (meta.startedAt || (s && s.startedAt));\n  if (started) facts.push(\"started \" + escHtml(fmtClock(started)) + \" (\" + escHtml(fmtRelative(started)) + \")\");\n  var ended = meta.endedAt || (s && s.endedAt);\n  if (ended) facts.push(\"ran \" + escHtml(fmtDuration(started, ended)));\n  else if (started) facts.push(\"running \" + escHtml(fmtDuration(started)));\n  if (meta.messageCount != null) facts.push(meta.messageCount + \" messages\");\n  if (meta.toolCallCount != null) facts.push(meta.toolCallCount + \" tool calls\");\n  if (meta.tokens && (meta.tokens.input != null || meta.tokens.output != null)) {\n    facts.push(\"tokens \" + (meta.tokens.input || 0) + \"\\\\u2192\" + (meta.tokens.output || 0));\n  }\n  if (meta.costUsd != null) facts.push(\"$\" + Number(meta.costUsd).toFixed(4));\n\n  el.innerHTML = '<div class=\"htitle\">' + pulse + escHtml(title) + \"</div>\"\n    + '<div class=\"hfacts\">' + facts.map(function (f) { return '<span class=\"fact\">' + f + \"</span>\"; }).join(\"\") + \"</div>\";\n}\n\n// ============================================================\n// transcript\n// ============================================================\n\nfunction renderToolCallChip(tc) {\n  var args = prettyArgs(tc.args);\n  return '<div class=\"chip tool-call\"><div class=\"ch\"><span class=\"ci\">&#9656;</span>'\n    + '<span class=\"cname\">' + escHtml(tc.name || \"tool\") + \"</span>\"\n    + '<span class=\"cprev\">' + escHtml(firstLine(args, 64)) + \"</span>\"\n    + '<span class=\"cchev\">&#9656;</span></div><pre>' + escHtml(args) + \"</pre></div>\";\n}\n\nfunction renderToolResultChip(m) {\n  var text = m.text || \"\";\n  return '<div class=\"chip tool-result\"><div class=\"ch\"><span class=\"ci\">&#128295;</span>'\n    + '<span class=\"cname\">' + escHtml(m.toolName || \"result\") + \"</span>\"\n    + '<span class=\"cprev\">' + escHtml(firstLine(text, 64)) + \"</span>\"\n    + '<span class=\"cchev\">&#9656;</span></div><pre>' + escHtml(text) + \"</pre></div>\";\n}\n\nfunction renderMessage(m) {\n  var time = m.ts ? '<span class=\"mtime\">' + fmtTime(m.ts) + \"</span>\" : \"\";\n  if (m.role === \"system\") {\n    return '<div class=\"msg role-system\"><div class=\"bubble\">' + escHtml(m.text || \"\") + \"</div></div>\";\n  }\n  if (m.role === \"tool\") {\n    return '<div class=\"msg role-tool\">' + renderToolResultChip(m) + \"</div>\";\n  }\n  if (m.role === \"user\") {\n    return '<div class=\"msg role-user\"><div class=\"mrow\"><span class=\"mrole\">You</span>' + time + \"</div>\"\n      + '<div class=\"bubble\">' + escHtml(m.text || \"\") + \"</div></div>\";\n  }\n  // assistant\n  var inner = \"\";\n  if (m.reasoning) inner += '<div class=\"reasoning\">' + escHtml(m.reasoning) + \"</div>\";\n  if (m.text) inner += escHtml(m.text);\n  var body = inner ? '<div class=\"bubble\">' + inner + \"</div>\" : \"\";\n  var chips = (m.toolCalls || []).map(renderToolCallChip).join(\"\");\n  return '<div class=\"msg role-assistant\"><div class=\"mrow\"><span class=\"mrole\">Assistant</span>' + time + \"</div>\"\n    + body + chips + \"</div>\";\n}\n\nfunction renderTranscript(messages) {\n  var el = document.getElementById(\"transcript\");\n  var atBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 80;\n  el.style.display = \"flex\";\n  document.getElementById(\"empty-main\").style.display = \"none\";\n  var errEl = document.getElementById(\"error-main\");\n  if (errEl) errEl.style.display = \"none\";\n  if (messages.length === 0) {\n    el.innerHTML = '<div style=\"color:var(--text2);text-align:center;padding:20px\">(empty conversation)</div>';\n    return;\n  }\n  el.innerHTML = messages.map(renderMessage).join(\"\");\n  if (atBottom) el.scrollTop = el.scrollHeight;\n\n  var chips = el.querySelectorAll(\".chip\");\n  for (var i = 0; i < chips.length; i++) {\n    chips[i].querySelector(\".ch\").addEventListener(\"click\", (function (chip) {\n      return function () { chip.classList.toggle(\"open\"); };\n    })(chips[i]));\n  }\n}\n\nfunction renderNoConversation(reason) {\n  document.getElementById(\"transcript\").style.display = \"none\";\n  document.getElementById(\"empty-main\").style.display = \"none\";\n  var el = document.getElementById(\"error-main\");\n  el.style.display = \"flex\";\n  el.innerHTML = '<div class=\"ico\">&#128683;</div><div>No readable conversation for this session'\n    + (reason ? '<br><span style=\"font-size:11px;color:var(--text3)\">' + escHtml(reason) + \"</span>\" : \"\")\n    + \"</div>\";\n}\n\n// ============================================================\n// selection + polling\n// ============================================================\n\nfunction clearConvoPoll() {\n  if (convoTimer) { clearTimeout(convoTimer); convoTimer = null; }\n}\n\nfunction scheduleConvoPoll() {\n  clearConvoPoll();\n  var s = findSession(activeId);\n  if (!isLive(s)) return;\n  convoTimer = setTimeout(function () {\n    loadConversation(activeId, { silent: true });\n  }, 3500);\n}\n\nfunction loadConversation(id, opts) {\n  opts = opts || {};\n  var requestedId = id;\n  if (!opts.silent) {\n    document.getElementById(\"transcript\").style.display = \"none\";\n    document.getElementById(\"empty-main\").style.display = \"none\";\n    var errEl = document.getElementById(\"error-main\");\n    errEl.style.display = \"flex\";\n    errEl.innerHTML = '<div class=\"ico\">&#8987;</div><div>Loading\\\\u2026</div>';\n  }\n  document.getElementById(\"status-left\").textContent = \"loading\\\\u2026\";\n  return callApp(\"conversation_read\", { idOrName: id, format: \"json\" }).then(function (data) {\n    if (activeId !== requestedId) return; // switched away meanwhile\n    if (!data || !Array.isArray(data.messages)) {\n      currentMeta = null;\n      renderHeader();\n      renderNoConversation(data && data.reason);\n      clearConvoPoll();\n      document.getElementById(\"status-left\").textContent = \"no conversation\";\n      return;\n    }\n    currentMeta = data.meta || {};\n    lastMessageCount = data.messages.length;\n    renderHeader();\n    renderTranscript(data.messages);\n    document.getElementById(\"status-left\").textContent = data.messages.length + \" messages\";\n    document.getElementById(\"status-right\").textContent = \"updated \" + fmtTime(Date.now());\n    scheduleConvoPoll();\n  }).catch(function (e) {\n    if (activeId !== requestedId) return;\n    document.getElementById(\"status-left\").textContent = \"error: \" + e.message;\n    if (!opts.silent) renderNoConversation(e.message);\n  });\n}\n\nfunction selectSession(id) {\n  if (activeId === id) return;\n  activeId = id;\n  currentMeta = null;\n  lastMessageCount = -1;\n  clearConvoPoll();\n  renderSidebar();\n  document.getElementById(\"statusbar\").style.display = \"flex\";\n  renderHeader();\n  loadConversation(id, {});\n}\n\n// ============================================================\n// boot\n// ============================================================\n\ndocument.getElementById(\"refresh-btn\").addEventListener(\"click\", function () {\n  loadSessions();\n  if (activeId) loadConversation(activeId, {});\n});\ndocument.getElementById(\"archived-check\").addEventListener(\"change\", function (e) {\n  includeArchived = !!e.target.checked;\n  loadSessions();\n});\n\nwindow.McpApp.connect()\n  .then(function (bridge) {\n    callTool = bridge.callTool;\n    return loadSessions();\n  })\n  .then(function () {\n    sidebarTimer = setInterval(loadSessions, 5000);\n    if (!activeId && sessions.length > 0) selectSession(sessions[0].id);\n  })\n  .catch(function (err) {\n    document.getElementById(\"empty-main\").innerHTML =\n      '<div class=\"ico\">&#9888;</div><div>Standalone mode \\\\u2014 no host bridge (' + escHtml(err.message) + \")</div>\";\n  });\n</script>\n</body>\n</html>`\n","/**\n * `session-viewer` — a single-agent agentproto app for reading daemon\n * sessions as a clean conversation.\n *\n * The panel (`ui.ts`) picks a session — live or finished — from\n * `session_list` and renders its transcript via `conversation_read`: user/\n * assistant turns, collapsible tool calls, timestamps, a metadata header.\n * Read-only, no spawn/kill/resume action. The bundled `session-narrator`\n * agent is a complementary plain-English narrator over the same\n * `conversation_read` data — usable standalone via `app_run`, independent\n * of the panel.\n */\n\nimport { defineApp, type AppHandle } from \"@agentproto/app-kit\"\nimport { narrator } from \"./agents/narrator.js\"\nimport { narrateSession } from \"./workflows/narrate-session.js\"\nimport { SESSION_VIEWER_HTML, SESSION_VIEWER_TOOLS } from \"./ui.js\"\n\nexport const sessionViewer: AppHandle = defineApp({\n  id: \"@agentproto/session-viewer\",\n  name: \"Session Viewer\",\n  version: \"0.1.0\",\n  description: \"Read a daemon session as a clean conversation — turns, tool calls, timestamps.\",\n  agents: [narrator],\n  workflows: [narrateSession],\n  ui: {\n    html: SESSION_VIEWER_HTML,\n    title: \"Session Viewer\",\n    tools: [...SESSION_VIEWER_TOOLS],\n  },\n})\n\nexport { narrator, narrateSession }\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agentproto/apps",
-  "version": "0.6.0",
+  "version": "0.8.0",
   "description": "@agentproto/apps — a home for ready-made agentproto apps (teams of agents + their workflows), declared with @agentproto/app-kit. Import a team (code-team, content-team, …) and use any of its agents/workflows from your own host: in-process via toMastraAgents(), or emit its manifests to disk.",
   "keywords": [
     "agentproto",
@@ -54,6 +54,16 @@
       "import": "./dist/media-viewer.mjs",
       "default": "./dist/media-viewer.mjs"
     },
+    "./ops-panel": {
+      "types": "./dist/ops-panel/index.d.ts",
+      "import": "./dist/ops-panel.mjs",
+      "default": "./dist/ops-panel.mjs"
+    },
+    "./session-viewer": {
+      "types": "./dist/session-viewer/index.d.ts",
+      "import": "./dist/session-viewer.mjs",
+      "default": "./dist/session-viewer.mjs"
+    },
     "./package.json": "./package.json"
   },
   "files": [
@@ -66,7 +76,7 @@
   },
   "dependencies": {
     "@agentproto/agent": "0.2.1",
-    "@agentproto/app-kit": "0.6.0",
+    "@agentproto/app-kit": "0.6.1",
     "@agentproto/workflow": "0.2.0"
   },
   "peerDependencies": {