@pageops/sdk 0.1.35 → 0.1.36

package/README.md

@@ -1,9 +1,11 @@
 # PageOps SDK source baseline
 
 This directory restores the maintainable SDK boundary from the verified public
-`@pageops/sdk@0.1.34` artifacts. Version `0.1.35` adds developer-gated source
-controls and conversation presentation behavior directly to the SDK instead of
-patching host DOM from a business application.
+`@pageops/sdk@0.1.34` artifacts. Version `0.1.35` added developer-gated source
+controls and conversation presentation behavior directly to the SDK. Version
+`0.1.36` renders the public execution timeline as thought/tool/read/search/data
+activity, collapses it when answer text starts, and allows casual chat without
+injecting page/source business context.
 
 `src/index.js` is the readable ESM runtime baseline, `src/styles.css` preserves
 the 0.1.34 styles, and `src/extensions.css` contains the new non-minified style

package/dist/pageops-sdk.css

@@ -1,9 +1,8 @@
 .pageops-sdk{--po-text: #172033;--po-muted: #64748b;--po-border: #dbe5f5;--po-soft-border: #e2e8f0;--po-surface: #ffffff;--po-soft: #f8fafc;--po-panel: #fbfdff;--po-primary: #2563eb;--po-primary-dark: #1d4ed8;--po-shadow: 0 24px 70px rgb(15 23 42 / 18%);color:var(--po-text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.pageops-sdk *,.pageops-sdk *:before,.pageops-sdk *:after{box-sizing:border-box}.pageops-sdk button,.pageops-sdk input,.pageops-sdk textarea,.pageops-sdk select{font:inherit}.pageops-sdk button{cursor:pointer}.po-fab{position:fixed;top:var(--pageops-fab-top,50%);right:24px;bottom:auto;z-index:2147483000;border:0;border-radius:999px;padding:12px 18px;background:linear-gradient(135deg,#2563eb,#14b8a6);color:#fff;font-weight:800;box-shadow:0 18px 42px #2563eb47;transform:translateY(-50%);cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}.po-fab.po-fab-dragging{cursor:grabbing}.po-panel{position:fixed;inset:40px;z-index:2147483000;display:grid;grid-template-columns:250px minmax(0,1fr) 340px;min-height:520px;overflow:hidden;border:1px solid var(--po-border);border-radius:24px;background:var(--po-surface);box-shadow:var(--po-shadow)}.po-sidebar{display:flex;min-width:0;min-height:0;flex-direction:column;gap:12px;overflow:hidden;border-right:1px solid #dbeafe;background:#eef5ff;padding:16px}.po-brand{display:flex;align-items:center;gap:10px}.po-brand strong,.po-brand span{display:block}.po-brand span{margin-top:2px;color:var(--po-muted);font-size:12px}.po-logo{width:34px;height:34px;flex:0 0 auto;border-radius:12px;background:linear-gradient(135deg,#5eead4,#2563eb)}.po-new,.po-composer button{border:0;border-radius:10px;background:var(--po-primary);color:#fff;font-weight:750}.po-new{width:100%;padding:10px 12px}.po-search,.po-composer textarea{width:100%;border:1px solid #cbd5e1;border-radius:10px;background:#fff;color:var(--po-text);outline:none}.po-search{padding:9px 10px}.po-thread-list{display:grid;align-content:start;gap:8px;min-height:0;overflow:auto}.po-thread-row{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 32px;align-items:center;border:1px solid transparent;border-radius:10px}.po-thread-row.active{border-color:#bfdbfe;background:#fff}.po-thread{display:grid;gap:4px;width:100%;border:0;border-radius:10px;background:transparent;color:#334155;padding:9px 10px;text-align:left}.po-thread-row.active .po-thread{color:var(--po-text)}.po-thread span{color:#94a3b8;font-size:12px}.po-thread-delete{display:grid;width:28px;height:28px;place-items:center;border:0;border-radius:6px;background:transparent;color:#94a3b8;opacity:0}.po-thread-row:hover .po-thread-delete,.po-thread-row:focus-within .po-thread-delete{opacity:1}.po-thread-delete:hover{background:#fee2e2;color:#b91c1c}.po-thread-delete:disabled{cursor:not-allowed;opacity:.35}.po-trash-icon{position:relative;width:11px;height:12px;border:1.5px solid currentcolor;border-top:0;border-radius:0 0 2px 2px}.po-trash-icon:before{position:absolute;top:-4px;left:-2px;width:13px;border-top:1.5px solid currentcolor;content:""}.po-trash-icon:after{position:absolute;top:-6px;left:3px;width:4px;height:2px;border:1.5px solid currentcolor;border-bottom:0;border-radius:2px 2px 0 0;content:""}.po-conversation-error{margin:0;color:#b91c1c;font-size:12px}.po-chat{display:flex;min-width:0;min-height:0;flex-direction:column;background:linear-gradient(180deg,#fff,var(--po-panel));padding:22px 26px}.po-chat header,.po-trace header{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--po-soft-border);padding-bottom:14px}.po-chat header p,.po-chat header h2,.po-trace header h2{margin:0}.po-chat header p,.po-chat header span{color:var(--po-muted);font-size:12px}.po-chat header h2,.po-trace header h2{font-size:20px;letter-spacing:0}.po-chat-title{min-width:0}.po-chat-title h2{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.po-audience{display:none;flex:0 0 auto;align-items:center;gap:8px}.po-audience>span{white-space:nowrap}.po-audience-options{display:grid;grid-template-columns:44px;height:32px;overflow:hidden;border:1px solid #cbd5e1;border-radius:6px;background:#f8fafc}.po-audience-options button{min-width:0;border:0;border-right:1px solid #e2e8f0;background:transparent;color:#475569;padding:0 8px;font-size:12px;font-weight:650}.po-audience-options button:last-child{border-right:0}.po-audience-options button[aria-pressed=true]{background:var(--po-primary);color:#fff}.po-audience-options button:disabled{cursor:not-allowed;opacity:.55}.po-messages{display:grid;align-content:start;gap:14px;min-height:0;flex:1;overflow:auto;padding:18px 4px 18px 0}.po-message{display:grid;max-width:82%;gap:6px;border:1px solid var(--po-soft-border);border-radius:14px;padding:11px 13px;line-height:1.55;white-space:pre-wrap;word-break:break-word}.po-message b{font-size:12px;opacity:.78}.po-message.user{justify-self:end;border-color:var(--po-primary);background:var(--po-primary);color:#fff}.po-message.assistant{justify-self:start;background:var(--po-soft)}.po-message.run-selected{border-color:#93c5fd;box-shadow:0 0 0 2px #3b82f614}.po-answer-meta{display:flex;min-width:0;align-items:center;flex-wrap:wrap;gap:6px 10px;border-top:1px solid var(--po-soft-border);margin-top:5px;padding-top:8px;color:var(--po-muted);font-size:11px}.po-answer-meta.selected{color:#1d4ed8}.po-run-id{display:flex;min-width:0;max-width:100%;align-items:center;gap:5px}.po-run-id code{display:block;max-width:148px;overflow:hidden;background:transparent;color:inherit;padding:0;text-overflow:ellipsis;white-space:nowrap}.po-answer-meta button{border:0;background:transparent;color:var(--po-primary-dark);padding:2px 0;font-size:11px;font-weight:700}.po-answer-meta button:hover{text-decoration:underline}.po-message.streaming{border-color:#bfdbfe;background:#eff6ff}.po-message.answer-error{border-color:#fecaca;background:#fff7f7;color:#991b1b}.po-message.answer-error>strong{color:#7f1d1d}.po-stream-stopped{justify-self:start;color:var(--po-muted);font-size:12px}.po-ai-waiting{display:inline-flex;align-items:center;gap:9px;min-height:24px;color:#475569}.po-ai-spinner{width:16px;height:16px;flex:0 0 auto;border:2px solid #bfdbfe;border-top-color:var(--po-primary);border-radius:50%;animation:po-ai-spin .7s linear infinite}.po-typing-cursor{display:inline-block;width:2px;height:1em;margin-left:3px;background:var(--po-primary);vertical-align:-.12em;animation:po-typing-cursor .8s steps(1,end) infinite}@keyframes po-ai-spin{to{transform:rotate(360deg)}}@keyframes po-typing-cursor{50%{opacity:0}}.po-message code{border-radius:5px;background:#eaf0ff;color:var(--po-primary-dark);padding:1px 5px}.po-message pre{max-width:100%;margin:8px 0;overflow:auto;border:1px solid var(--po-border);border-radius:6px;background:#f8fafc;padding:10px 12px;white-space:pre}.po-message pre code{border-radius:0;background:transparent;color:#1f2937;padding:0}.po-message h2,.po-message h3,.po-message h4,.po-message p{margin:8px 0}.po-message table{width:100%;margin:12px 0;border-collapse:collapse;border-radius:10px;font-size:14px}.po-message th,.po-message td{border:1px solid var(--po-border);padding:8px 10px;text-align:left;vertical-align:top}.po-message th{background:#eef5ff;color:#334155;font-weight:800}.po-composer{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:10px;border-top:1px solid var(--po-soft-border);padding-top:12px}.po-composer textarea{min-height:88px;resize:vertical;padding:10px}.po-composer button{min-height:44px;padding:0 16px}.po-composer .po-stop{display:grid;width:44px;height:44px;min-height:44px;place-items:center;border:1px solid #fecaca;background:#fff;color:#dc2626;padding:0}.po-stop span{width:12px;height:12px;border-radius:2px;background:currentcolor}.po-trace{display:flex;min-height:0;flex-direction:column;border-left:1px solid var(--po-soft-border);background:#fafbff}.po-trace header{padding:18px}.po-trace header button{width:32px;height:32px;border:1px solid #cbd5e1;border-radius:10px;background:#fff;color:#334155;font-size:20px;line-height:1}.po-trace section{display:grid;align-content:start;gap:12px;min-height:0;overflow:auto;padding:16px}.po-steps{display:grid;gap:12px}.po-source-uploader{display:grid;gap:8px;padding-bottom:4px}.po-source-uploader p{margin:0;color:var(--po-muted);font-size:12px;line-height:1.5}.po-upload-button{display:inline-flex;justify-content:center;border:1px solid #bfdbfe;border-radius:6px;background:#eff6ff;color:var(--po-primary-dark);padding:8px 10px;font-weight:750;cursor:pointer}.po-source-reference{display:grid;grid-template-columns:1fr 1fr;overflow:hidden;border:1px solid #cbd5e1;border-radius:6px;background:#fff}.po-source-reference label{display:flex;align-items:center;justify-content:center;gap:6px;min-height:32px;color:#475569;font-size:12px;font-weight:700;cursor:pointer}.po-source-reference label+label{border-left:1px solid #cbd5e1}.po-source-reference label:has(input:checked){background:#eef2ff;color:var(--po-primary-dark)}.po-source-reference input{accent-color:var(--po-primary)}.po-source-reference-value,.po-source-remark{box-sizing:border-box;width:100%;border:1px solid #cbd5e1;border-radius:6px;background:#fff;color:var(--po-text);padding:8px 9px;font:inherit;font-size:12px;outline:none}.po-source-reference-value:focus,.po-source-remark:focus{border-color:var(--po-primary);box-shadow:0 0 0 2px #4f46e51f}.po-source-remark{min-height:54px;resize:vertical}.po-upload-button input{display:none}.po-upload-status{color:#166534!important}.po-upload-progress{height:7px;overflow:hidden;border-radius:999px;background:#dbeafe}.po-upload-progress span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#2563eb,#14b8a6);transition:width .2s ease}.po-upload-empty{color:#92400e!important}.po-source-selector{display:grid;gap:5px;color:var(--po-muted);font-size:12px;font-weight:700}.po-source-selector select{width:100%;border:1px solid #cbd5e1;border-radius:6px;background:#fff;color:var(--po-text);padding:7px 8px;font-size:12px;outline:none}.po-source-selector select:focus{border-color:var(--po-primary);box-shadow:0 0 0 2px #4f46e51f}.po-source-selector select:disabled{cursor:not-allowed;opacity:.62}.po-source-list{display:grid;gap:6px}.po-source-item{display:grid;gap:3px;border:1px solid #dbeafe;border-radius:6px;background:#f8fbff;padding:8px}.po-source-item.selected{border-color:#93c5fd;background:#eff6ff;box-shadow:0 0 0 1px #3b82f61f}.po-source-item strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.po-source-item span{color:var(--po-muted);font-size:12px}.po-composer textarea:disabled,.po-composer button:disabled{cursor:not-allowed;opacity:.62}.po-upload-error{color:#b91c1c!important}.po-step{border:1px solid var(--po-soft-border);border-radius:8px;background:#fff;padding:12px}.po-step.running{border-color:#bfdbfe;background:#eff6ff}.po-step.completed{border-color:#bbf7d0}.po-step.failed{border-color:#fecaca;background:#fff1f2}.po-step.cancelled{border-color:#cbd5e1;background:#f8fafc}.po-step summary{display:grid;grid-template-columns:9px minmax(0,1fr) auto;align-items:start;gap:9px;cursor:pointer}.po-step summary::marker{display:none;content:""}.po-step[data-static] summary{cursor:default}.po-step-dot{width:8px;height:8px;margin-top:5px;border:2px solid #94a3b8;border-radius:50%;background:#fff}.po-step.running .po-step-dot{border-color:#2563eb;animation:po-step-pulse 1.2s ease-in-out infinite}.po-step.completed .po-step-dot{border-color:#16a34a;background:#16a34a}.po-step.failed .po-step-dot{border-color:#dc2626;background:#dc2626}.po-step-copy{display:grid;min-width:0;gap:4px}.po-step-copy strong{font-size:13px}.po-step-copy small{color:var(--po-muted);font-size:12px;font-weight:500;line-height:1.45}.po-step-status{color:var(--po-muted);font-size:11px;white-space:nowrap}.po-step-metrics{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0}.po-step-metrics span{border:1px solid #dbeafe;border-radius:4px;background:#f8fbff;color:#475569;padding:2px 6px;font-size:11px}.po-step-details{display:grid;gap:8px;margin:10px 0 0 18px;border-top:1px solid var(--po-soft-border);padding-top:9px}.po-step-details div{display:grid;gap:3px}.po-step-details span{color:var(--po-muted);font-size:11px}.po-step-details p{overflow-wrap:anywhere;margin:0;color:#334155;font-size:12px;line-height:1.5;white-space:pre-wrap}.po-trace-state{display:flex;align-items:center;gap:8px;border:1px solid var(--po-soft-border);border-radius:8px;background:#fff;color:var(--po-muted);padding:12px;font-size:12px}.po-trace-state.failed{border-color:#fecaca;color:#b91c1c}@keyframes po-step-pulse{50%{opacity:.35}}@media(max-width:900px){.po-panel{inset:12px;grid-template-columns:1fr;overflow:auto}.po-sidebar,.po-trace{min-height:220px;border:0}.po-chat{min-height:520px}.po-chat header{align-items:flex-start;flex-wrap:wrap}.po-audience{width:100%;justify-content:space-between}.po-message{max-width:94%}}@media(max-width:600px){.po-fab{right:12px}}@media(prefers-reduced-motion:reduce){.po-ai-spinner,.po-step-dot,.po-typing-cursor{animation:none}}
 .po-thinking-process {
-  margin: 4px 0 2px;
-  border: 1px solid #d8e0ec;
-  border-radius: 6px;
-  background: #f7f9fc;
+  margin: 14px 0 4px;
+  border-top: 1px solid #e2e8f0;
+  border-bottom: 1px solid #e2e8f0;
   color: #334155;
 }
 
@@ -12,14 +11,15 @@
   align-items: center;
   justify-content: space-between;
   gap: 12px;
-  min-height: 34px;
-  padding: 0 10px;
+  min-height: 40px;
+  padding: 0 2px;
   cursor: pointer;
   font-size: 12px;
 }
 
 .po-thinking-process > summary strong {
-  font-size: 12px;
+  color: #64748b;
+  font-size: 13px;
   font-weight: 700;
 }
 
@@ -30,15 +30,103 @@
 
 .po-thinking-content {
   display: grid;
+  gap: 10px;
+  padding: 12px 2px 14px;
+}
+
+.po-thinking-note,
+.po-thinking-activity {
+  display: grid;
+  grid-template-columns: 20px minmax(0, 1fr);
   gap: 8px;
-  padding: 9px;
-  border-top: 1px solid #e2e8f0;
+  align-items: start;
+}
+
+.po-thinking-note {
+  padding-bottom: 4px;
+  color: #1f2937;
+}
+
+.po-thinking-note strong,
+.po-thinking-activity strong {
+  display: block;
+  color: #475569;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.po-thinking-note p {
+  margin: 4px 0 0;
+  color: #334155;
+  font-size: 13px;
+  line-height: 1.65;
+}
+
+.po-thinking-activity-copy > span:not(.po-thinking-metrics) {
+  display: block;
+  margin-top: 2px;
+  color: #7b8798;
+  font-size: 12px;
+  line-height: 1.45;
+}
+
+.po-thinking-icon {
+  width: 17px;
+  height: 17px;
+  margin-top: 1px;
+  fill: none;
+  stroke: #8491a5;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 1.7;
+}
+
+.po-thinking-activity.running .po-thinking-icon,
+.po-thinking-note.running .po-thinking-icon {
+  stroke: #2563eb;
+}
+
+.po-thinking-activity.failed .po-thinking-icon,
+.po-thinking-note.failed .po-thinking-icon {
+  stroke: #b91c1c;
+}
+
+.po-thinking-metrics {
+  display: block;
+  margin-top: 3px;
+  color: #94a3b8;
+  font-size: 11px;
+}
+
+.po-thinking-detail {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 7px;
+  margin-top: 5px;
+  color: #94a3b8;
+  font-size: 11px;
+}
+
+.po-thinking-detail code {
+  overflow: hidden;
+  max-width: 100%;
+  padding: 0;
+  background: transparent;
+  color: #64748b;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.po-thinking-state {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: #64748b;
+  font-size: 12px;
 }
 
-.po-thinking-content .po-step {
-  margin: 0;
-  border-radius: 6px;
-  background: #fff;
+.po-thinking-state.failed {
+  color: #b91c1c;
 }
 
 .po-message-time {

package/dist/pageops-sdk.es.js

@@ -500,6 +500,12 @@ class V {
       return;
     }
     e.innerHTML = R(this.streaming);
+    const thinking = e.closest(".po-message") == null ? void 0 : e.closest(".po-message").querySelector(".po-thinking-process");
+    if (thinking) {
+      thinking.open = !1;
+      const status = thinking.querySelector("summary span");
+      status && (status.textContent = "已思考完成");
+    }
     const t = (r = this.panel) == null ? void 0 : r.querySelector(".po-messages");
     t && (t.scrollTop = t.scrollHeight);
   }
@@ -564,7 +570,7 @@ class V {
     return ["pending", "running"].includes(this.latestAnalysisStatus());
   }
   questionUnavailableReason() {
-    return this.sourceLoadError && !this.sourceSnapshots.length ? "暂时无法读取项目共享代码包，请检查 PageOps 服务连接。" : this.sourceSnapshots.length ? this.isProjectMemoryUpdating() ? "项目记忆正在更新，完成前暂不能问答。" : this.latestAnalysisStatus() === "failed" ? "项目记忆更新失败，请重新上传或重新索引。" : "" : "请先上传代码包后再提问。";
+    return this.sourceSnapshots.length ? this.isProjectMemoryUpdating() ? "项目记忆正在更新，完成前暂不能问答。" : this.latestAnalysisStatus() === "failed" ? "项目记忆更新失败，请重新上传或重新索引。" : "" : "";
   }
   scheduleSourceRefresh() {
     this.stopSourceRefresh(), !(!this.sourceLoadError && !this.isProjectMemoryUpdating()) && (this.sourceRefreshTimer = setTimeout(() => void this.loadSources(), 1500));
@@ -575,7 +581,7 @@ class V {
   renderPanel(e = this.asking, t = !1) {
     var g;
     if (!this.panel) return;
-    const s = (g = this.panel.querySelector(".po-messages")) == null ? void 0 : g.scrollTop, r = this.questionUnavailableReason(), n = r || (this.asking ? "回答生成中，请稍候" : "请输入页面分析问题，Enter 发送，Shift + Enter 换行"), c = !!(r || this.asking), p = r ? '<button type="submit" disabled>暂不可提问</button>' : this.asking ? '<button class="po-stop" type="button" data-action="stop-answer" aria-label="停止输出" title="停止输出"><span aria-hidden="true"></span></button>' : '<button type="submit">发送</button>', m = C.map((o) => `
+    const s = (g = this.panel.querySelector(".po-messages")) == null ? void 0 : g.scrollTop, r = this.questionUnavailableReason(), n = r || (this.asking ? "回答生成中，请稍候" : this.sourceSnapshots.length ? "请输入页面分析问题，Enter 发送，Shift + Enter 换行" : "可直接闲聊；业务问题需先上传代码包"), c = !!(r || this.asking), p = r ? '<button type="submit" disabled>暂不可提问</button>' : this.asking ? '<button class="po-stop" type="button" data-action="stop-answer" aria-label="停止输出" title="停止输出"><span aria-hidden="true"></span></button>' : '<button type="submit">发送</button>', m = C.map((o) => `
       <button type="button" data-audience="${o.value}" aria-pressed="${o.value === this.answerAudience}" ${this.asking ? "disabled" : ""}>${o.label}</button>
     `).join("");
     if (this.panel.innerHTML = `
@@ -684,13 +690,23 @@ class V {
   }
   renderThinkingProcess() {
     if (!this.asking && !this.steps.length && !this.runLoading && !this.runLoadError) return "";
-    const e = this.asking || this.steps.some((t) => t.status === "running"), t = this.asking ? "思考中" : this.runLoading ? "加载中" : this.runLoadError ? "加载失败" : "已思考完成";
-    return `<details class="po-thinking-process" ${e ? "open" : ""}><summary><strong>思考过程</strong><span>${t}</span></summary><div class="po-thinking-content">${this.renderSteps()}</div></details>`;
+    const e = this.asking && !this.streaming, t = this.asking && !this.streaming ? "思考中" : this.runLoading ? "加载中" : this.runLoadError ? "加载失败" : "已思考完成", s = thinkingDuration(this.steps, this.activeQuestionStartedAt);
+    return `<details class="po-thinking-process" ${e ? "open" : ""}><summary><strong>${s ? `用时 ${l(s)}` : "思考过程"}</strong><span>${t}</span></summary><div class="po-thinking-content">${this.renderThinkingSteps()}</div></details>`;
+  }
+  renderThinkingSteps() {
+    if (this.runLoading) return '<div class="po-thinking-state"><span class="po-ai-spinner" aria-hidden="true"></span><span>正在恢复思考过程</span></div>';
+    if (this.runLoadError) return `<div class="po-thinking-state failed">${l(this.runLoadError)}</div>`;
+    const e = this.steps.length ? this.steps : [{ id: "idle", kind: "thinking", title: "理解问题", status: "running", summary: "正在判断问题并规划需要核对的信息。" }];
+    return e.map((t) => {
+      const s = String(t.kind || (String(t.id || "").startsWith("model-turn-") ? "thinking" : "status")), r = thinkingIcon(s), n = (t.metrics || []).length ? `<span class="po-thinking-metrics">${t.metrics.map((c) => l(c)).join(" · ")}</span>` : "", p = (t.details || []).map((c) => `<div class="po-thinking-detail"><span>${l(c.label)}</span>${String(c.value || "").split("\n").filter(Boolean).map((m) => `<code>${l(m)}</code>`).join("")}</div>`).join("");
+      if (s === "thinking") return `<div class="po-thinking-note ${t.status}">${r}<div><strong>${l(t.title)}</strong><p>${l(t.summary || "")}</p>${n}</div></div>`;
+      return `<div class="po-thinking-activity ${t.status}">${r}<div class="po-thinking-activity-copy"><strong>${l(t.title)}</strong><span>${l(t.summary || "")}</span>${n}${p}</div></div>`;
+    }).join("");
   }
   renderExecutionSteps(e = !1) {
     var s, r;
     const t = (s = this.panel) == null ? void 0 : s.querySelector(".po-steps");
-    if (t && (t.innerHTML = this.renderSteps(), this.panel == null || this.panel.querySelectorAll(".po-thinking-content").forEach((n) => n.innerHTML = this.renderSteps()), e)) {
+    if (t && (t.innerHTML = this.renderSteps(), this.panel == null || this.panel.querySelectorAll(".po-thinking-content").forEach((n) => n.innerHTML = this.renderThinkingSteps()), e)) {
       const n = (r = this.panel) == null ? void 0 : r.querySelector(".po-trace > section");
       n && (n.scrollTop = n.scrollHeight);
     }
@@ -776,6 +792,25 @@ function messageTime(a) {
   const e = formatFullTimestamp(a);
   return e ? `<time class="po-message-time" datetime="${l(a)}">${e}</time>` : "";
 }
+function thinkingDuration(a, e) {
+  const t = [...a].reverse().flatMap((s) => s.metrics || []).find((s) => /^耗时\s/.test(s));
+  if (t) return t.replace(/^耗时\s*/, "");
+  if (!e) return "";
+  const s = Date.now() - new Date(e).getTime();
+  if (!Number.isFinite(s) || s < 0) return "";
+  const r = Math.floor(s / 1e3), n = Math.floor(r / 60), c = r % 60;
+  return n ? `${n}m ${c}s` : `${c}s`;
+}
+function thinkingIcon(a) {
+  const e = {
+    read: '<path d="M4 5.5A2.5 2.5 0 0 1 6.5 3H11v14H6.5A2.5 2.5 0 0 0 4 19.5z"/><path d="M20 5.5A2.5 2.5 0 0 0 17.5 3H13v14h4.5a2.5 2.5 0 0 1 2.5 2.5z"/>',
+    search: '<circle cx="11" cy="11" r="6"/><path d="m16 16 4 4"/>',
+    data: '<ellipse cx="12" cy="5" rx="7" ry="3"/><path d="M5 5v6c0 1.7 3.1 3 7 3s7-1.3 7-3V5"/><path d="M5 11v6c0 1.7 3.1 3 7 3s7-1.3 7-3v-6"/>',
+    tool: '<rect x="3" y="4" width="18" height="16" rx="2"/><path d="m7 9 3 3-3 3M13 15h4"/>',
+    thinking: '<path d="M9 18h6M10 22h4"/><path d="M8.5 14.5A6 6 0 1 1 15.5 14.5c-.9.7-1.5 1.5-1.5 2.5h-4c0-1-.6-1.8-1.5-2.5Z"/>'
+  }[a] || '<circle cx="12" cy="12" r="8"/><path d="m9 12 2 2 4-4"/>';
+  return `<svg class="po-thinking-icon" viewBox="0 0 24 24" aria-hidden="true">${e}</svg>`;
+}
 function O(a) {
   return new Intl.DateTimeFormat("zh-CN", {
     timeZone: "Asia/Shanghai",

package/dist/pageops-sdk.umd.cjs

@@ -500,6 +500,12 @@ class V {
       return;
     }
     e.innerHTML = R(this.streaming);
+    const thinking = e.closest(".po-message") == null ? void 0 : e.closest(".po-message").querySelector(".po-thinking-process");
+    if (thinking) {
+      thinking.open = !1;
+      const status = thinking.querySelector("summary span");
+      status && (status.textContent = "已思考完成");
+    }
     const t = (r = this.panel) == null ? void 0 : r.querySelector(".po-messages");
     t && (t.scrollTop = t.scrollHeight);
   }
@@ -564,7 +570,7 @@ class V {
     return ["pending", "running"].includes(this.latestAnalysisStatus());
   }
   questionUnavailableReason() {
-    return this.sourceLoadError && !this.sourceSnapshots.length ? "暂时无法读取项目共享代码包，请检查 PageOps 服务连接。" : this.sourceSnapshots.length ? this.isProjectMemoryUpdating() ? "项目记忆正在更新，完成前暂不能问答。" : this.latestAnalysisStatus() === "failed" ? "项目记忆更新失败，请重新上传或重新索引。" : "" : "请先上传代码包后再提问。";
+    return this.sourceSnapshots.length ? this.isProjectMemoryUpdating() ? "项目记忆正在更新，完成前暂不能问答。" : this.latestAnalysisStatus() === "failed" ? "项目记忆更新失败，请重新上传或重新索引。" : "" : "";
   }
   scheduleSourceRefresh() {
     this.stopSourceRefresh(), !(!this.sourceLoadError && !this.isProjectMemoryUpdating()) && (this.sourceRefreshTimer = setTimeout(() => void this.loadSources(), 1500));
@@ -575,7 +581,7 @@ class V {
   renderPanel(e = this.asking, t = !1) {
     var g;
     if (!this.panel) return;
-    const s = (g = this.panel.querySelector(".po-messages")) == null ? void 0 : g.scrollTop, r = this.questionUnavailableReason(), n = r || (this.asking ? "回答生成中，请稍候" : "请输入页面分析问题，Enter 发送，Shift + Enter 换行"), c = !!(r || this.asking), p = r ? '<button type="submit" disabled>暂不可提问</button>' : this.asking ? '<button class="po-stop" type="button" data-action="stop-answer" aria-label="停止输出" title="停止输出"><span aria-hidden="true"></span></button>' : '<button type="submit">发送</button>', m = C.map((o) => `
+    const s = (g = this.panel.querySelector(".po-messages")) == null ? void 0 : g.scrollTop, r = this.questionUnavailableReason(), n = r || (this.asking ? "回答生成中，请稍候" : this.sourceSnapshots.length ? "请输入页面分析问题，Enter 发送，Shift + Enter 换行" : "可直接闲聊；业务问题需先上传代码包"), c = !!(r || this.asking), p = r ? '<button type="submit" disabled>暂不可提问</button>' : this.asking ? '<button class="po-stop" type="button" data-action="stop-answer" aria-label="停止输出" title="停止输出"><span aria-hidden="true"></span></button>' : '<button type="submit">发送</button>', m = C.map((o) => `
       <button type="button" data-audience="${o.value}" aria-pressed="${o.value === this.answerAudience}" ${this.asking ? "disabled" : ""}>${o.label}</button>
     `).join("");
     if (this.panel.innerHTML = `
@@ -684,13 +690,23 @@ class V {
   }
   renderThinkingProcess() {
     if (!this.asking && !this.steps.length && !this.runLoading && !this.runLoadError) return "";
-    const e = this.asking || this.steps.some((t) => t.status === "running"), t = this.asking ? "思考中" : this.runLoading ? "加载中" : this.runLoadError ? "加载失败" : "已思考完成";
-    return `<details class="po-thinking-process" ${e ? "open" : ""}><summary><strong>思考过程</strong><span>${t}</span></summary><div class="po-thinking-content">${this.renderSteps()}</div></details>`;
+    const e = this.asking && !this.streaming, t = this.asking && !this.streaming ? "思考中" : this.runLoading ? "加载中" : this.runLoadError ? "加载失败" : "已思考完成", s = thinkingDuration(this.steps, this.activeQuestionStartedAt);
+    return `<details class="po-thinking-process" ${e ? "open" : ""}><summary><strong>${s ? `用时 ${l(s)}` : "思考过程"}</strong><span>${t}</span></summary><div class="po-thinking-content">${this.renderThinkingSteps()}</div></details>`;
+  }
+  renderThinkingSteps() {
+    if (this.runLoading) return '<div class="po-thinking-state"><span class="po-ai-spinner" aria-hidden="true"></span><span>正在恢复思考过程</span></div>';
+    if (this.runLoadError) return `<div class="po-thinking-state failed">${l(this.runLoadError)}</div>`;
+    const e = this.steps.length ? this.steps : [{ id: "idle", kind: "thinking", title: "理解问题", status: "running", summary: "正在判断问题并规划需要核对的信息。" }];
+    return e.map((t) => {
+      const s = String(t.kind || (String(t.id || "").startsWith("model-turn-") ? "thinking" : "status")), r = thinkingIcon(s), n = (t.metrics || []).length ? `<span class="po-thinking-metrics">${t.metrics.map((c) => l(c)).join(" · ")}</span>` : "", p = (t.details || []).map((c) => `<div class="po-thinking-detail"><span>${l(c.label)}</span>${String(c.value || "").split("\n").filter(Boolean).map((m) => `<code>${l(m)}</code>`).join("")}</div>`).join("");
+      if (s === "thinking") return `<div class="po-thinking-note ${t.status}">${r}<div><strong>${l(t.title)}</strong><p>${l(t.summary || "")}</p>${n}</div></div>`;
+      return `<div class="po-thinking-activity ${t.status}">${r}<div class="po-thinking-activity-copy"><strong>${l(t.title)}</strong><span>${l(t.summary || "")}</span>${n}${p}</div></div>`;
+    }).join("");
   }
   renderExecutionSteps(e = !1) {
     var s, r;
     const t = (s = this.panel) == null ? void 0 : s.querySelector(".po-steps");
-    if (t && (t.innerHTML = this.renderSteps(), this.panel == null || this.panel.querySelectorAll(".po-thinking-content").forEach((n) => n.innerHTML = this.renderSteps()), e)) {
+    if (t && (t.innerHTML = this.renderSteps(), this.panel == null || this.panel.querySelectorAll(".po-thinking-content").forEach((n) => n.innerHTML = this.renderThinkingSteps()), e)) {
       const n = (r = this.panel) == null ? void 0 : r.querySelector(".po-trace > section");
       n && (n.scrollTop = n.scrollHeight);
     }
@@ -776,6 +792,25 @@ function messageTime(a) {
   const e = formatFullTimestamp(a);
   return e ? `<time class="po-message-time" datetime="${l(a)}">${e}</time>` : "";
 }
+function thinkingDuration(a, e) {
+  const t = [...a].reverse().flatMap((s) => s.metrics || []).find((s) => /^耗时\s/.test(s));
+  if (t) return t.replace(/^耗时\s*/, "");
+  if (!e) return "";
+  const s = Date.now() - new Date(e).getTime();
+  if (!Number.isFinite(s) || s < 0) return "";
+  const r = Math.floor(s / 1e3), n = Math.floor(r / 60), c = r % 60;
+  return n ? `${n}m ${c}s` : `${c}s`;
+}
+function thinkingIcon(a) {
+  const e = {
+    read: '<path d="M4 5.5A2.5 2.5 0 0 1 6.5 3H11v14H6.5A2.5 2.5 0 0 0 4 19.5z"/><path d="M20 5.5A2.5 2.5 0 0 0 17.5 3H13v14h4.5a2.5 2.5 0 0 1 2.5 2.5z"/>',
+    search: '<circle cx="11" cy="11" r="6"/><path d="m16 16 4 4"/>',
+    data: '<ellipse cx="12" cy="5" rx="7" ry="3"/><path d="M5 5v6c0 1.7 3.1 3 7 3s7-1.3 7-3V5"/><path d="M5 11v6c0 1.7 3.1 3 7 3s7-1.3 7-3v-6"/>',
+    tool: '<rect x="3" y="4" width="18" height="16" rx="2"/><path d="m7 9 3 3-3 3M13 15h4"/>',
+    thinking: '<path d="M9 18h6M10 22h4"/><path d="M8.5 14.5A6 6 0 1 1 15.5 14.5c-.9.7-1.5 1.5-1.5 2.5h-4c0-1-.6-1.8-1.5-2.5Z"/>'
+  }[a] || '<circle cx="12" cy="12" r="8"/><path d="m9 12 2 2 4-4"/>';
+  return `<svg class="po-thinking-icon" viewBox="0 0 24 24" aria-hidden="true">${e}</svg>`;
+}
 function O(a) {
   return new Intl.DateTimeFormat("zh-CN", {
     timeZone: "Asia/Shanghai",

package/dist/types.d.ts

@@ -48,6 +48,7 @@ export interface ConversationMessage {
 }
 export interface ExecutionStep {
     id: string;
+    kind?: 'thinking' | 'read' | 'search' | 'data' | 'tool' | 'status';
     title: string;
     status: 'pending' | 'running' | 'completed' | 'failed' | 'cancelled';
     summary?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pageops/sdk",
-  "version": "0.1.35",
+  "version": "0.1.36",
   "description": "PageOps embeddable frontend SDK",
   "type": "module",
   "main": "dist/pageops-sdk.umd.cjs",