@chenacc/agentbridge 0.2.4 → 0.2.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chenacc/agentbridge",
-  "version": "0.2.4",
+  "version": "0.2.6",
   "description": "Control local coding agents from a phone through a secure WeChat QR web console.",
   "license": "MIT",
   "type": "module",

package/public/styles.css

@@ -412,6 +412,28 @@ select { appearance: none; background-image: linear-gradient(45deg, transparent
 .event-entry.tool .event-body { color: var(--ink-2); font-size: 13px; }  /* 底板是浅色玻璃，次级文字不能再用 45% 黑 */
 .event-entry.error .event-body { color: var(--err); }
 
+/* 中间过程只占一行：说清在用什么工具做什么，细节折进去。手机上一屏能看更多对话。 */
+.tool-line { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.event-entry.tool-compact .event-body,
+.event-entry.step .event-body { padding-top: 1px; }
+.step-detail, .tool-output { margin-top: 4px; }
+.step-detail > summary,
+.tool-output > summary {
+  cursor: pointer;
+  font-size: 12px;
+  color: var(--ink-3, var(--ink-2));
+  opacity: .82;
+  list-style: none;
+}
+.step-detail > summary::-webkit-details-marker,
+.tool-output > summary::-webkit-details-marker { display: none; }
+.step-detail > summary::before,
+.tool-output > summary::before { content: "▸ "; }
+.step-detail[open] > summary::before,
+.tool-output[open] > summary::before { content: "▾ "; }
+.step-detail .message-markdown,
+.tool-output pre { margin-top: 6px; opacity: .9; font-size: 12px; }
+
 /* ---------- 无底板可读性：给字形描边，而不是给文字垫一层遮罩 ---------- */
 /* 文字层底板保持透明（用户要求），可读性全部来自整页遮罩的地板——**不再给字形描边**：
    之前那圈 1px + 2px 的白色 text-shadow 会把每个字的边缘糊掉，这正是"文字很模糊"的来源。

package/public/transcript.js

@@ -221,26 +221,43 @@ function entryFor(event, label, text, className, supportsMarkdown, { formatMessa
 }
 
 /**
- * Tool calls get the two affordances a person actually needs: the command is
- * copyable, and a long output collapses instead of pushing the conversation off the
- * screen. Both work without JavaScript state — `<details>` is the disclosure.
+ * Tool calls get one line that says what is being done, and the raw material
+ * behind a disclosure.
+ *
+ * The phone is read at a glance, on a narrow screen, often while walking: the
+ * command and its output are the least useful thing on it. So the row is
+ * "调用 Bash · 检查端口占用" and everything else waits behind 详情 — still one tap
+ * away for the moment it matters, never in the way.
  */
+function toolSummary(event) {
+  const payload = event.payload ?? {};
+  const name = String(payload.type ?? payload.toolName ?? payload.name ?? "工具");
+  // "What is it doing" is the title when the Agent gave us one. A raw command is not a
+  // summary — the whole point of this row is to keep it out of the reader's way — so the
+  // command contributes at most its program name.
+  const stated = String(payload.title ?? payload.description ?? "").trim();
+  const command = String(payload.command ?? "").trim();
+  const program = command ? command.split(/\s+/)[0] : "";
+  const purpose = stated
+    ? (stated.length > 60 ? `${stated.slice(0, 60)}…` : stated)
+    : (program ? `${program} …` : "");
+  const suffix = payload.status ? ` · ${payload.status}` : "";
+  return { name, purpose, suffix };
+}
+
 function toolEntry(event, label, text, options) {
   const cached = cachedEntry(options.cache, event);
   if (cached) return cached;
-  const body = String(text ?? "");
-  const long = body.length > 240;
-  const command = typeof event.payload?.command === "string" ? event.payload.command : "";
-  const copy = command
-    ? `<button class="tool-copy" type="button" data-copy-tool="${escapeHtml(body)}">复制命令</button>`
+  const body = String(text ?? "").trim();
+  const { name, purpose, suffix } = toolSummary(event);
+  const headline = purpose ? `调用 ${name} · ${purpose}${suffix}` : `调用 ${name}${suffix}`;
+  const details = body
+    ? `<details class="tool-output"><summary>详情</summary><pre>${escapeHtml(body)}</pre></details>`
     : "";
-  const shown = long
-    ? `<details class="tool-output"><summary>展开完整输出（${body.length} 字符）</summary><pre>${escapeHtml(body)}</pre></details>`
-    : `<div class="message-markdown"><p>${escapeHtml(body)}</p></div>`;
   const entry = {
     key: entryKey(event),
-    className: "tool",
-    html: `<time class="event-time">${formatTime(event.time, options.formatMessageTime)}</time><div class="event-body"><strong>${escapeHtml(label)}</strong>${copy}${shown}</div>`,
+    className: "tool tool-compact",
+    html: `<time class="event-time">${formatTime(event.time, options.formatMessageTime)}</time><div class="event-body"><strong>${escapeHtml(label)}</strong><p class="tool-line">${escapeHtml(headline)}</p>${details}</div>`,
   };
   return rememberEntry(options.cache, event, entry);
 }
@@ -307,6 +324,28 @@ function inputEntry(event, options, settledOutcome) {
   return rememberEntry(options.cache, event, entry, cacheKey);
 }
 
+/**
+ * A row that stays out of the way until asked: the summary line is what the
+ * reader needs, the text is one tap down.
+ *
+ * Intermediate assistant messages are progress, not answers. Rendering them in
+ * full turned one request into a wall of overlapping drafts on a phone screen.
+ */
+function collapsedEntry(event, label, summary, text, className, options) {
+  // A streaming row changes on every chunk, so it must never be cached — caching it
+  // froze the collapsed text at the first batch while the answer kept growing.
+  const stable = event.kind !== "message.delta";
+  const cached = stable ? cachedEntry(options.cache, event) : null;
+  if (cached) return cached;
+  const content = renderMessageMarkdown(String(text ?? ""), options.math ? { math: options.math } : undefined);
+  const entry = {
+    key: entryKey(event),
+    className,
+    html: `<time class="event-time">${formatTime(event.time, options.formatMessageTime)}</time><div class="event-body"><strong>${escapeHtml(label)}</strong><details class="step-detail"><summary>${escapeHtml(summary)}</summary><div class="message-markdown">${content}</div></details></div>`,
+  };
+  return stable ? rememberEntry(options.cache, event, entry) : entry;
+}
+
 /** Turn a session's events into the list of transcript entries to display. */
 export function buildEntries(relevant, options = {}) {
   const statusLabel = options.statusLabel ?? ((kind) => DEFAULT_STATUS_LABELS[kind] ?? kind);
@@ -321,6 +360,14 @@ export function buildEntries(relevant, options = {}) {
       settledInputs.set(event.payload.requestId, event.payload.outcome ?? "answered");
     }
   }
+  // Only the last assistant message of a turn is the answer; everything before it is
+  // the work that produced it.
+  const finalAssistantOfTurn = new Map();
+  for (const event of relevant) {
+    if (event.kind === "message.completed" && event.payload?.role === "assistant") {
+      finalAssistantOfTurn.set(event.turnId, event.eventId ?? entryKey(event));
+    }
+  }
 
   const renderedDeltas = new Set();
   const entries = [];
@@ -328,7 +375,15 @@ export function buildEntries(relevant, options = {}) {
     if (event.kind === "message.delta") {
       if (completedTurns.has(event.turnId) || renderedDeltas.has(event.turnId)) continue;
       renderedDeltas.add(event.turnId);
-      entries.push(entryFor(event, "Agent 正在回复", textByTurn.get(event.turnId) ?? "", "assistant", true, settings));
+      // Live text is progress, so it stays collapsed until the answer itself lands.
+      entries.push(collapsedEntry(
+        event,
+        "Agent 正在回复",
+        "正在生成回答…（点开可看实时输出）",
+        textByTurn.get(event.turnId) ?? "",
+        "assistant streaming",
+        settings,
+      ));
     } else if (event.kind === "message.completed") {
       // An assistant message that carried only tool calls has no text. Rendering it makes
       // an empty "Agent" bubble between the tool rows is pure noise, so skip it — unless it
@@ -336,7 +391,20 @@ export function buildEntries(relevant, options = {}) {
       const messageText = String(event.payload.text ?? "");
       const messageAttachments = Array.isArray(event.payload.attachments) ? event.payload.attachments : [];
       if (!messageText.trim() && messageAttachments.length === 0) continue;
-      entries.push(entryFor(event, event.payload.role === "user" ? "你" : "Agent", messageText, event.payload.role, true, settings));
+      if (event.payload.role === "user") {
+        entries.push(entryFor(event, "你", messageText, "user", true, settings));
+        continue;
+      }
+      const isFinal = finalAssistantOfTurn.get(event.turnId) === (event.eventId ?? entryKey(event));
+      if (isFinal || messageAttachments.length > 0) {
+        // The answer, and anything carrying an attachment: both are content the reader
+        // came for, so they render in full.
+        entries.push(entryFor(event, "Agent", messageText, "assistant", true, settings));
+      } else {
+        const lead = messageText.trim().split(/\r?\n/).find((line) => line.trim()) ?? "";
+        const summary = lead.length > 48 ? `中间过程 · ${lead.slice(0, 48)}…` : `中间过程 · ${lead || "已处理"}`;
+        entries.push(collapsedEntry(event, "Agent", summary, messageText, "assistant step", settings));
+      }
     } else if (event.kind === "tool.started" || event.kind === "tool.completed") {
       const label = event.kind.endsWith("started") ? "工具开始" : "工具完成";
       const detail = event.payload.command ? String(event.payload.command) : `${event.payload.type ?? "tool"}${event.payload.status ? ` · ${event.payload.status}` : ""}`;