@oversk7/pi-web-dsh-style 1.2.0 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oversk7/pi-web-dsh-style",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "An unofficial DSH-styled Windows browser UI for pi coding agent with configurable LAN and native frp relay access",
   "type": "module",
   "license": "MIT",

package/transcript.ts

@@ -8,6 +8,9 @@ export interface RenderedBlock {
   name?: string;
   arguments?: unknown;
   argumentsText?: string;
+  subagent?: { type: string; task: string; prompt: string };
+  subagentFeedback?: { target: string; type: string; task: string; message: string };
+  subagentResult?: { target: string; type: string; task: string };
   result?: { content: string; isError: boolean; details?: unknown };
   running?: boolean;
 }
@@ -37,11 +40,56 @@ export interface RenderedMessage {
 }
 
 export function browserMessages(messages: RenderedMessage[]): RenderedMessage[] {
+  type AgentIdentity = { id: string; type: string; task: string };
+  const agents = new Map<string, AgentIdentity>();
+  const names = new Map<string, string>();
+  const types = new Map<string, string | null>();
+  const text = (value: unknown): string => typeof value === "string" ? value : "";
+  const lookup = (target: string): AgentIdentity | undefined => agents.get(target) || agents.get(names.get(target) || types.get(target.toLowerCase()) || "");
   return messages.map((message) => !message.blocks ? message : {
     ...message,
     blocks: message.blocks.map((block) => {
       if (block.type !== "toolCall") return block;
-      const { arguments: _arguments, result, ...visible } = block;
+      const { arguments: args, result, ...visible } = block;
+      // Keep display fields without sending every tool's raw arguments to the browser.
+      const record = args && typeof args === "object" ? args as Json : {};
+      const toolName = block.name?.toLowerCase();
+      if (toolName === "agent") {
+        const resumed = lookup(text(record.resume));
+        if (args && typeof args === "object") {
+          visible.subagent = {
+            type: text(record.subagent_type) || resumed?.type || "",
+            task: text(record.description) || resumed?.task || "",
+            prompt: text(record.prompt),
+          };
+          visible.argumentsText = visible.subagent.task;
+        }
+        const details = result?.details && typeof result.details === "object" ? result.details as Json : {};
+        const receiptField = (label: string): string => result?.content.match(new RegExp(`^${label}:[ \\t]*(.*)$`, "m"))?.[1]?.trim() || "";
+        const id = text(details.agentId) || receiptField("Agent ID") || resumed?.id;
+        if (id && !result?.isError) {
+          const identity = {
+            id,
+            type: visible.subagent?.type || text(details.subagentType) || receiptField("Type"),
+            task: visible.subagent?.task || text(details.description) || receiptField("Description"),
+          };
+          agents.set(id, identity);
+          if (text(record.name)) names.set(text(record.name), id);
+          // A type is a useful fallback only when it identifies one agent unambiguously.
+          const typeKey = identity.type.toLowerCase();
+          if (typeKey) {
+            const previous = types.get(typeKey);
+            types.set(typeKey, previous === undefined || previous === id ? id : null);
+          }
+        }
+      } else if ((toolName === "steer_subagent" || toolName === "get_subagent_result") && args && typeof args === "object") {
+        const target = text(record.agent_id);
+        const identity = lookup(target);
+        const agent = { target, type: identity?.type || "", task: identity?.task || "" };
+        if (toolName === "steer_subagent") visible.subagentFeedback = { ...agent, message: text(record.message) };
+        else visible.subagentResult = agent;
+        visible.argumentsText = [identity?.type || target, identity?.task].filter(Boolean).join(" · ");
+      }
       return result
         ? { ...visible, result: { content: result.content, isError: result.isError } }
         : visible;

package/web/app.css

@@ -312,6 +312,20 @@ body[data-workspace-dragging] .YDXeBa_projectRow[draggable=true]{cursor:grabbing
 .CY-8Ka_root[data-state=running] .CY-8Ka_leading,.CY-8Ka_root[data-state=running] .CY-8Ka_title{color:var(--dsw-alias-state-business-primary)}
 .CY-8Ka_root[data-state=error] .CY-8Ka_leading,.CY-8Ka_root[data-state=error] .CY-8Ka_title{color:var(--dsw-alias-state-error-primary)}
 
+/* Agent delegation details */
+.pi-subagentDetail{display:flex;flex-direction:column;gap:12px;padding:10px 14px 14px;min-width:0}
+.pi-subagentField{min-width:0}
+.pi-subagentLabel{margin-bottom:4px;color:var(--dsw-alias-label-tertiary);font-size:12px;line-height:18px}
+.pi-subagentText{margin:0;color:var(--dsw-alias-label-primary);font:13px/21px var(--dsw-font-family);white-space:pre-wrap;overflow-wrap:anywhere}
+.pi-subagentField .Y0dWHa_payload{min-height:0}
+.pi-subagentNotice{color:var(--dsw-alias-label-secondary);font-size:13px;line-height:21px;overflow-wrap:anywhere}
+.pi-subagentResult{min-width:0;overflow-wrap:anywhere}
+.pi-subagentResult ._markdown_1nba0_5{font-size:13px;line-height:21px}
+.pi-subagentResult.Y0dWHa_payloadError{color:var(--dsw-alias-state-error-primary)}
+.pi-subagentConversation{min-width:0}
+.pi-subagentConversation summary{cursor:pointer;color:var(--dsw-alias-label-secondary);font-size:12px;line-height:20px;margin-bottom:6px}
+.pi-subagentConversation summary:focus-visible{outline:1px solid var(--dsw-alias-state-business-primary);outline-offset:2px}
+
 /* Extension notifications */
 .pi-toast{z-index:1500;box-sizing:border-box;position:fixed;right:24px;bottom:24px;max-width:min(420px,calc(100vw - 48px));background:var(--dsw-specific-menu);border:1px solid var(--dsw-alias-border-l2);box-shadow:var(--dsw-shadow-lv3);color:var(--dsw-alias-label-primary);border-radius:12px;padding:10px 14px;font-size:13px;line-height:20px;animation:pi-toast-in .16s var(--ds-ease-in-out)}
 .pi-toast-warning{border-color:var(--dsw-alias-state-warn-secondary);color:var(--dsw-alias-state-warn-label)}

package/web/app.js

@@ -1573,6 +1573,93 @@ function compactionUsageSummary(usage) {
   };
 }
 
+function subagentPresentation(tool) {
+  const toolName = (tool?.name || tool?.toolName || "").toLowerCase();
+  if (!["agent", "steer_subagent", "get_subagent_result"].includes(toolName)) return null;
+  const rawOutput = tool.result?.content || tool.text || "";
+  const isError = Boolean(tool.result?.isError || tool.isError);
+  if (toolName === "get_subagent_result") {
+    const header = /^Agent: ([^\r\n]+)\r?\nType: ([^|\r\n]+)\s*\|\s*Status: ([^|\r\n]+)[^\r\n]*\r?\nDescription: ([^\r\n]*)\r?\n(?:\r?\n)?/.exec(rawOutput);
+    const status = isError ? "error" : header?.[3]?.trim().toLowerCase() || (tool.running ? "fetching" : "");
+    const body = header ? rawOutput.slice(header[0].length) : rawOutput;
+    const trace = /\r?\n\r?\n--- Agent Conversation ---\r?\n/.exec(body);
+    return {
+      retrieval: true,
+      target: tool.subagentResult?.target || header?.[1] || "",
+      type: tool.subagentResult?.type || header?.[2]?.trim() || "",
+      task: tool.subagentResult?.task || header?.[4] || "",
+      prompt: "",
+      status,
+      output: trace ? body.slice(0, trace.index) : body,
+      conversation: trace ? body.slice(trace.index + trace[0].length) : "",
+      isError: isError || ["error", "failed"].includes(status),
+    };
+  }
+  if (toolName === "steer_subagent") {
+    const feedback = tool.subagentFeedback;
+    const sent = !isError && /^Steering message sent to agent .+\./.test(rawOutput.trim());
+    return {
+      feedback: true,
+      target: feedback?.target || rawOutput.match(/^Steering message sent to agent (.+?)\. (?:The agent|$)/)?.[1] || "",
+      type: feedback?.type || "",
+      task: feedback?.task || "",
+      prompt: feedback?.message || "",
+      promptUnavailable: tool.type === "toolCall" && typeof feedback?.message !== "string",
+      output: sent ? "" : rawOutput,
+      isError,
+    };
+  }
+  const receipt = !isError && /^Agent started in background\.(?:\r?\n|$)/.test(rawOutput.trim());
+  const receiptField = (label) => receipt ? rawOutput.match(new RegExp(`^${label}:\\s*(.*)$`, "m"))?.[1]?.trim() || "" : "";
+  return {
+    type: tool.subagent?.type || receiptField("Type"),
+    task: tool.subagent?.task || receiptField("Description"),
+    prompt: tool.subagent?.prompt || "",
+    promptUnavailable: tool.type === "toolCall" && typeof tool.subagent?.prompt !== "string",
+    output: receipt ? "" : rawOutput,
+    isError,
+  };
+}
+
+function subagentTitle(agent, fallback) {
+  if (agent?.feedback || agent?.retrieval) {
+    const target = agent.type || (agent.target.length > 24 ? `${agent.target.slice(0, 21)}…` : agent.target) || "Agent";
+    return agent.retrieval ? `${t("查看结果")} ← ${target}` : `${t("补充指令")} → ${target}`;
+  }
+  return agent?.type ? `Agent · ${agent.type}` : fallback;
+}
+
+function subagentStatusLabel(status) {
+  return { completed: "已完成", done: "已完成", running: "运行中", pending: "等待执行", queued: "等待执行", scheduled: "等待执行", error: "失败", failed: "失败", aborted: "已取消", cancelled: "已取消", canceled: "已取消", fetching: "正在获取结果" }[status] || status;
+}
+
+function subagentSummary(agent) {
+  if (agent.retrieval) return [agent.task, t(subagentStatusLabel(agent.status))].filter(Boolean).join(" · ");
+  return agent.feedback
+    ? [agent.task, agent.prompt.replace(/\s+/g, " ").slice(0, 120)].filter(Boolean).join(" · ")
+    : agent.task;
+}
+
+function renderSubagentDetail(agent) {
+  const field = (label, value) => value ? `<div class="pi-subagentField"><div class="pi-subagentLabel">${label}</div><pre class="pi-subagentText" translate="no">${esc(value)}</pre></div>` : "";
+  if (agent.retrieval) {
+    const label = agent.isError ? "失败原因" : agent.status === "running" ? "当前进展" : "执行结果";
+    const result = agent.output
+      ? `<div class="pi-subagentField"><div class="pi-subagentLabel">${label}</div><div class="pi-subagentResult ${agent.isError ? "Y0dWHa_payloadError" : ""}"><div class="_markdown_1nba0_5">${markdown(agent.output)}</div></div></div>`
+      : `<div class="pi-subagentNotice">${agent.status === "fetching" ? "正在获取结果" : agent.status === "running" ? "子 agent 仍在运行，尚无结果。" : "暂无结果内容。"}</div>`;
+    const conversation = agent.conversation ? `<details class="pi-subagentConversation"><summary>执行记录</summary><pre class="pi-subagentText" translate="no">${esc(agent.conversation)}</pre></details>` : "";
+    return `<div class="Sxvs8a_body pi-subagentDetail">${field("结果来源", [agent.type, agent.task].filter(Boolean).join(" · ") || agent.target)}${agent.status ? `<div class="pi-subagentField"><div class="pi-subagentLabel">状态</div><div>${esc(subagentStatusLabel(agent.status))}</div></div>` : ""}${result}${conversation}</div>`;
+  }
+  const label = agent.feedback ? "指令内容" : "提示词";
+  const identity = agent.feedback
+    ? field("目标 agent", [agent.type, agent.task].filter(Boolean).join(" · ") || agent.target)
+    : field("类型", agent.type) + field("委派任务", agent.task);
+  const notice = agent.feedback
+    ? "当前运行时未提供完整指令内容。请等待所有会话空闲，在设置 → 维护中重新加载运行时，然后刷新页面。"
+    : "当前运行时未提供完整提示词。请等待所有会话空闲，在设置 → 维护中重新加载运行时，然后刷新页面。";
+  return `<div class="Sxvs8a_body pi-subagentDetail">${identity}${field(label, agent.prompt)}${agent.promptUnavailable ? `<div class="pi-subagentField"><div class="pi-subagentLabel">${label}</div><div class="pi-subagentNotice">${notice}</div></div>` : ""}${agent.output ? `<div class="pi-subagentField"><div class="pi-subagentLabel">${agent.isError ? "失败" : "结果"}</div><pre class="Y0dWHa_payload ${agent.isError ? "Y0dWHa_payloadError" : ""}" translate="no">${esc(agent.output)}</pre></div>` : ""}</div>`;
+}
+
 function renderMessageDetail(msg, blockIndex) {
   if (msg.kind === "compaction") {
     const usage = compactionUsageSummary(msg.usage);
@@ -1589,6 +1676,8 @@ function renderMessageDetail(msg, blockIndex) {
   if (block?.type === "thinking") {
     return `<div class="Y0dWHa_thinkingQuote"><pre class="Y0dWHa_payload">${esc(block.thinking || "")}</pre></div>`;
   }
+  const agent = subagentPresentation(block || msg);
+  if (agent) return renderSubagentDetail(agent);
   const argsText = block?.argumentsText || "";
   const output = block?.result?.content || (msg.kind === "bashExecution" ? msg.output : msg.text) || "";
   const isError = block ? block.result?.isError : msg.kind === "toolResult" && msg.isError;
@@ -1704,15 +1793,16 @@ function renderMessage(msg, messageIndex) {
     return `<div class="pi-assistantMessageGroup">${content}${error}${actions}</div>`;
   }
   if (msg.kind === "toolResult") {
-    const output = msg.text || "";
+    const agent = subagentPresentation(msg);
+    const output = agent ? agent.output : msg.text || "";
     const lineCount = output ? output.split("\n").length : 0;
-    const hasDetail = output !== "";
+    const hasDetail = Boolean(agent ? agent.type || agent.task || agent.target || agent.status || agent.prompt || output : output);
     const toolKey = `result:${msg.toolCallId || msg.timestamp || msg.toolName || "tool"}`;
     const expanded = hasDetail && S.expandedTools.has(toolKey);
     return `<div class="Md3f7G_flowItem" data-chat-flow-kind="tool-result"><div class="ztWv_q_callRow" data-tool-key="${esc(toolKey)}"><div class="CY-8Ka_card">
-      <div class="CY-8Ka_root" data-state="${msg.isError ? "error" : "ok"}" ${hasDetail ? `role="button" data-expandable aria-expanded="${expanded}" data-action="toggle-tool"` : ""}>
-        <span class="CY-8Ka_leading">${ICONS.bash}</span><span class="CY-8Ka_title">${esc(msg.toolName || "Tool")}</span><span class="CY-8Ka_sep"></span>
-        <span class="CY-8Ka_summary ${msg.isError ? "CY-8Ka_errorSummary" : ""}">${msg.isError ? "失败" : "完成"}${lineCount ? ` · ${lineCount} 行输出` : ""}</span>
+      <div class="CY-8Ka_root" data-state="${agent?.isError || msg.isError ? "error" : agent?.status === "running" ? "running" : "ok"}" ${hasDetail ? `role="button" data-expandable aria-expanded="${expanded}" data-action="toggle-tool"` : ""}>
+        <span class="CY-8Ka_leading">${ICONS.bash}</span><span class="CY-8Ka_title">${esc(subagentTitle(agent, msg.toolName || "Tool"))}</span><span class="CY-8Ka_sep"></span>
+        <span class="CY-8Ka_summary ${agent?.isError || msg.isError ? "CY-8Ka_errorSummary" : ""}">${agent ? esc(subagentSummary(agent) || (msg.isError ? "失败" : "")) : `${msg.isError ? "失败" : "完成"}${lineCount ? ` · ${lineCount} 行输出` : ""}`}</span>
       </div>
       ${hasDetail ? `<div class="Sxvs8a_root" ${expanded ? "" : "hidden"}>${expanded ? renderMessageDetail(msg) : ""}</div>` : ""}
     </div></div></div>`;
@@ -1749,13 +1839,14 @@ function renderBlock(block, msg, idx, messageIndex) {
   }
   if (block.type === "toolCall") {
     const result = block.result;
-    const state = result ? (result.isError ? "error" : "ok") : block.running ? "running" : "ok";
+    const agent = subagentPresentation(block);
+    const state = agent?.isError || result?.isError ? "error" : agent?.status === "running" || block.running ? "running" : "ok";
     const argsText = block.argumentsText || "";
-    const resultText = result?.content || "";
+    const resultText = agent ? agent.output : result?.content || "";
     const resultLines = resultText ? resultText.split("\n").length : 0;
-    const hasDetail = argsText !== "" || resultText !== "";
+    const hasDetail = Boolean(agent ? agent.type || agent.task || agent.target || agent.status || agent.prompt || agent.promptUnavailable || resultText : argsText || resultText);
     const resultHint = resultLines ? `${resultLines} 行输出` : state === "running" ? "运行中" : "";
-    const summary = [argsText, resultHint].filter(Boolean).join(" · ");
+    const summary = agent ? subagentSummary(agent) : [argsText, resultHint].filter(Boolean).join(" · ");
     const toolKey = `call:${block.id || `${block.name || "tool"}:${idx}`}`;
     const expanded = hasDetail && S.expandedTools.has(toolKey);
     return `<div class="Md3f7G_flowItem" data-chat-flow-kind="tool-call">
@@ -1763,8 +1854,8 @@ function renderBlock(block, msg, idx, messageIndex) {
         <div class="CY-8Ka_card"><div class="CY-8Ka_root" data-sample="${esc(block.name || "tool")}" data-variant="${esc(block.name || "tool")}" data-state="${state}" ${hasDetail ? `role="button" data-expandable aria-expanded="${expanded}" data-action="toggle-tool"` : ""}>
           <span class="CY-8Ka_leading"><span class="CY-8Ka_iconIdle">${ICONS.bash}</span></span>
           <span class="CY-8Ka_visuallyHidden">${state === "error" ? "失败" : state === "running" ? "运行中" : "完成"}</span>
-          <span class="CY-8Ka_title">${esc(block.name || "Tool")}</span><span class="CY-8Ka_sep"></span>
-          <span class="CY-8Ka_summary ${result?.isError ? "CY-8Ka_errorSummary" : ""}">${esc(summary)}</span>
+          <span class="CY-8Ka_title">${esc(subagentTitle(agent, block.name || "Tool"))}</span><span class="CY-8Ka_sep"></span>
+          <span class="CY-8Ka_summary ${state === "error" ? "CY-8Ka_errorSummary" : ""}">${esc(summary)}</span>
         </div>
         ${hasDetail ? `<div class="Sxvs8a_root" data-block-index="${idx}" ${expanded ? "" : "hidden"}>${expanded ? renderMessageDetail(msg, idx) : ""}</div>` : ""}
         </div>

package/web/i18n.js

@@ -1,6 +1,10 @@
 // Browser-only UI copy. Chinese is the source language; unknown text (including
 // user messages, paths and server responses) is left untouched.
 const english = {
+  "查看结果": "View result", "结果来源": "Result from", "执行结果": "Agent result", "当前进展": "Progress", "执行记录": "Execution transcript", "状态": "Status", "失败原因": "Failure reason", "等待执行": "Pending", "已取消": "Canceled", "正在获取结果": "Fetching result", "子 agent 仍在运行，尚无结果。": "The agent is still running; no result yet.", "暂无结果内容。": "No result content available.",
+  "类型": "Type", "委派任务": "Delegated task", "提示词": "Prompt", "结果": "Result", "补充指令": "Additional instructions", "目标 agent": "Target agent", "指令内容": "Instruction content",
+  "当前运行时未提供完整指令内容。请等待所有会话空闲，在设置 → 维护中重新加载运行时，然后刷新页面。": "The current runtime did not provide the full instructions. Wait until all sessions are idle, reload the runtime in Settings → Maintenance, then refresh the page.",
+  "当前运行时未提供完整提示词。请等待所有会话空闲，在设置 → 维护中重新加载运行时，然后刷新页面。": "The current runtime did not provide the full prompt. Wait until all sessions are idle, reload the runtime in Settings → Maintenance, then refresh the page.",
   "刚刚": "just now", "选择模型": "Select model", "内置": "Built-in", "模板": "Prompt", "扩展": "Extension", "技能": "Skill", "命令": "Command",
   "文件预览": "File preview", "文件": "File", "正在读取": "Reading", "无法预览": "Preview unavailable", "正在加载文件…": "Loading file…", "文件预览失败": "File preview failed", "预览": "Preview", "源代码": "Source code", "返回对话": "Back to chat", "查看源码": "View source", "查看预览": "View preview", "源码": "Source", "在系统文件管理器中定位": "Show in file manager", "关闭预览": "Close preview", "纯文本模式": "Plain text mode",
   "关闭侧边栏": "Close sidebar", "调整侧边栏宽度": "Resize sidebar", "调整文件预览宽度": "Resize file preview", "可拖动排序": "drag to reorder", "新会话": "New session", "等待输入": "Waiting for input", "会话操作": "Session actions", "工作区操作": "Workspace actions", "新建会话": "New session", "没有匹配的会话": "No matching sessions", "暂无会话": "No sessions yet", "没有工作区。点击 + 添加一个目录。": "No workspaces. Click + to add a folder.", "收起侧边栏": "Collapse sidebar", "展开侧边栏": "Expand sidebar", "工作区": "Workspaces", "搜索会话": "Search sessions", "搜索会话…": "Search sessions…", "视图选项": "View options", "添加工作区": "Add workspace", "会话": "Sessions", "设置": "Settings", "选择工作区": "Select workspace", "和你的代码库对话": "Chat with your codebase", "Web 预览版": "Web preview", "正在创建会话…": "Creating session…", "这个会话由 pi coding agent 驱动": "This session runs on pi coding agent",