@pageops/sdk 0.1.0

package/dist/client.d.ts

@@ -0,0 +1,12 @@
+import type { ContextSession, ConversationMessage, ConversationThread, PageOpsMountOptions } from './types';
+export declare class PageOpsClient {
+    private options;
+    constructor(options: PageOpsMountOptions);
+    createContext(): Promise<ContextSession>;
+    listConversations(): Promise<ConversationThread[]>;
+    createConversation(contextSessionId: string, title?: string): Promise<ConversationThread>;
+    listMessages(threadId: string): Promise<ConversationMessage[]>;
+    streamQuestion(threadId: string, question: string): Promise<Response>;
+    private request;
+    private base;
+}

package/dist/index.d.ts

@@ -0,0 +1,31 @@
+import './styles.css';
+import type { PageOpsContext, PageOpsMountOptions } from './types';
+declare class PageOpsSDKController {
+    private client;
+    private options;
+    private root;
+    private panel;
+    private context;
+    private currentThread;
+    private conversations;
+    private messages;
+    private steps;
+    private streaming;
+    mount(options: PageOpsMountOptions): void;
+    unmount(): void;
+    open(): void;
+    close(): void;
+    updateContext(options: Partial<PageOpsMountOptions>): void;
+    private renderClosed;
+    private ensureContext;
+    private loadConversations;
+    private newConversation;
+    private selectThread;
+    private ask;
+    private upsertStep;
+    private renderPanel;
+    private renderSteps;
+    private bindPanelEvents;
+}
+export declare const PageOpsSDK: PageOpsSDKController;
+export type { PageOpsMountOptions, PageOpsContext };

package/dist/markdown.d.ts

@@ -0,0 +1 @@
+export declare function renderMarkdown(text: string): string;

package/dist/pageops-sdk.css

@@ -0,0 +1 @@
+.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{font:inherit}.pageops-sdk button{cursor:pointer}.po-fab{position:fixed;right:24px;bottom:24px;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}.po-panel{position:fixed;top:40px;right:40px;bottom:40px;left: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{display:grid;gap:4px;width:100%;border:1px solid transparent;border-radius:10px;background:transparent;color:#334155;padding:9px 10px;text-align:left}.po-thread.active{border-color:#bfdbfe;background:#fff;color:var(--po-text)}.po-thread span{color:#94a3b8;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:-.02em}.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.streaming{border-color:#bfdbfe;background:#eff6ff}.po-message code{border-radius:5px;background:#eaf0ff;color:var(--po-primary-dark);padding:1px 5px}.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-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-step{border:1px solid var(--po-soft-border);border-radius:14px;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 summary{display:flex;justify-content:space-between;gap:8px;cursor:pointer}.po-step summary::marker{color:var(--po-muted)}.po-step pre{overflow:auto;margin:10px 0 0;border-radius:12px;background:#0f172a;color:#e2e8f0;padding:12px;font-size:12px;white-space:pre-wrap}@media(max-width:900px){.po-panel{top:12px;right:12px;bottom:12px;left:12px;grid-template-columns:1fr;overflow:auto}.po-sidebar,.po-trace{min-height:220px;border:0}.po-chat{min-height:520px}.po-message{max-width:94%}}

package/dist/pageops-sdk.es.js

@@ -0,0 +1,222 @@
+var y = Object.defineProperty;
+var $ = (n, t, e) => t in n ? y(n, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[t] = e;
+var l = (n, t, e) => $(n, typeof t != "symbol" ? t + "" : t, e);
+class v {
+  constructor(t) {
+    this.options = t;
+  }
+  async createContext() {
+    var e, s;
+    const t = ((s = (e = this.options).getPageContext) == null ? void 0 : s.call(e)) ?? {};
+    return this.request("/context/session", {
+      method: "POST",
+      body: JSON.stringify({
+        app_id: this.options.appId,
+        env: this.options.env,
+        route: t.route,
+        url: t.url ?? location.href,
+        title: t.title ?? document.title,
+        tenant_id: t.tenantId,
+        user_role: t.userRole,
+        build_version: t.buildVersion
+      })
+    });
+  }
+  async listConversations() {
+    return (await this.request("/conversations")).conversations;
+  }
+  async createConversation(t, e) {
+    return this.request("/conversations", {
+      method: "POST",
+      body: JSON.stringify({ context_session_id: t, title: e })
+    });
+  }
+  async listMessages(t) {
+    return (await this.request(`/conversations/${encodeURIComponent(t)}/messages`)).messages;
+  }
+  streamQuestion(t, e) {
+    return fetch(`${this.base()}/question/stream`, {
+      method: "POST",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify({ thread_id: t, question: e })
+    });
+  }
+  async request(t, e) {
+    const s = await fetch(`${this.base()}${t}`, {
+      ...e,
+      headers: { "content-type": "application/json", ...(e == null ? void 0 : e.headers) ?? {} }
+    }), r = await s.json();
+    if (!s.ok) throw new Error(r.message ?? "PageOps 请求失败");
+    return r;
+  }
+  base() {
+    return this.options.apiBase.replace(/\/$/, "");
+  }
+}
+function w(n) {
+  return n.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function m(n) {
+  return w(n).replace(/`([^`]+)`/g, "<code>$1</code>").replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>");
+}
+function x(n, t) {
+  const e = n[t], s = n[t + 1];
+  if (!(e != null && e.includes("|")) || !/^\s*\|?\s*:?-{3,}:?\s*(\|\s*:?-{3,}:?\s*)+\|?\s*$/.test(s ?? "")) return null;
+  const r = [];
+  let i = t;
+  for (; i < n.length && n[i].includes("|") && n[i].trim(); )
+    r.push(n[i]), i += 1;
+  const d = (c) => c.trim().replace(/^\|/, "").replace(/\|$/, "").split("|").map((o) => m(o.trim())), p = d(r[0]).map((c) => `<th>${c}</th>`).join(""), u = r.slice(2).map((c) => `<tr>${d(c).map((o) => `<td>${o}</td>`).join("")}</tr>`).join("");
+  return { html: `<table><thead><tr>${p}</tr></thead><tbody>${u}</tbody></table>`, next: i };
+}
+function b(n) {
+  const t = n.split(`
+`), e = [];
+  for (let s = 0; s < t.length; s += 1) {
+    const r = x(t, s);
+    if (r) {
+      e.push(r.html), s = r.next - 1;
+      continue;
+    }
+    const i = t[s];
+    i.startsWith("### ") ? e.push(`<h4>${m(i.slice(4))}</h4>`) : i.startsWith("## ") ? e.push(`<h3>${m(i.slice(3))}</h3>`) : i.startsWith("# ") ? e.push(`<h2>${m(i.slice(2))}</h2>`) : i.startsWith("- ") ? e.push(`<li>${m(i.slice(2))}</li>`) : i.trim() ? e.push(`<p>${m(i)}</p>`) : e.push("<br>");
+  }
+  return e.join("");
+}
+async function S(n, t) {
+  var i, d;
+  const e = n.getReader(), s = new TextDecoder();
+  let r = "";
+  for (; ; ) {
+    const { done: p, value: u } = await e.read();
+    if (p) break;
+    r += s.decode(u, { stream: !0 });
+    const c = r.split(`
+
+`);
+    r = c.pop() ?? "";
+    for (const o of c) {
+      const a = (i = o.match(/^event: (.+)$/m)) == null ? void 0 : i[1], h = (d = o.match(/^data: (.+)$/m)) == null ? void 0 : d[1];
+      a && h && t(a, JSON.parse(h));
+    }
+  }
+}
+class T {
+  constructor() {
+    l(this, "client", null);
+    l(this, "options", null);
+    l(this, "root", null);
+    l(this, "panel", null);
+    l(this, "context", null);
+    l(this, "currentThread", null);
+    l(this, "conversations", []);
+    l(this, "messages", []);
+    l(this, "steps", []);
+    l(this, "streaming", "");
+  }
+  mount(t) {
+    this.unmount(), this.options = t, this.client = new v(t), this.root = document.createElement("div"), this.root.className = "pageops-sdk", (t.container ?? document.body).appendChild(this.root), this.renderClosed();
+  }
+  unmount() {
+    var t;
+    (t = this.root) == null || t.remove(), this.root = null, this.panel = null, this.context = null, this.currentThread = null, this.conversations = [], this.messages = [], this.steps = [], this.streaming = "";
+  }
+  open() {
+    this.root && (this.root.innerHTML = "", this.panel = document.createElement("div"), this.panel.className = "po-panel", this.root.appendChild(this.panel), this.loadConversations(), this.renderPanel());
+  }
+  close() {
+    this.renderClosed();
+  }
+  updateContext(t) {
+    this.options && (this.options = { ...this.options, ...t }, this.client = new v(this.options));
+  }
+  renderClosed() {
+    var t;
+    this.root && (this.root.innerHTML = '<button class="po-fab" type="button">多轮问答</button>', (t = this.root.querySelector("button")) == null || t.addEventListener("click", () => this.open()));
+  }
+  async ensureContext() {
+    if (this.context) return this.context;
+    if (!this.client) throw new Error("PageOps SDK 未初始化");
+    return this.context = await this.client.createContext(), this.context;
+  }
+  async loadConversations() {
+    this.client && (this.conversations = await this.client.listConversations(), this.renderPanel());
+  }
+  async newConversation() {
+    if (!this.client) return;
+    const t = await this.ensureContext();
+    this.currentThread = await this.client.createConversation(t.id, t.route || document.title || "新的问答"), this.conversations = [this.currentThread, ...this.conversations], this.messages = [], this.steps = [], this.streaming = "", this.renderPanel();
+  }
+  async selectThread(t) {
+    this.client && (this.currentThread = t, this.messages = await this.client.listMessages(t.id), this.steps = [], this.streaming = "", this.renderPanel());
+  }
+  async ask(t) {
+    if (!this.client || (this.currentThread || await this.newConversation(), !this.currentThread)) return;
+    this.messages.push({ id: `local-${Date.now()}`, role: "user", content: t, metadata_json: {} }), this.steps = [], this.streaming = "", this.renderPanel();
+    const e = await this.client.streamQuestion(this.currentThread.id, t);
+    if (!e.ok || !e.body) throw new Error("PageOps 流式问答失败");
+    await S(e.body, (s, r) => {
+      s === "step" && this.upsertStep(r), s === "delta" && (this.streaming += String(r.content ?? "")), s === "done" && this.selectThread(this.currentThread), s === "error" && this.upsertStep({ id: "error", title: "执行失败", status: "failed", details: r }), this.renderPanel();
+    });
+  }
+  upsertStep(t) {
+    const e = this.steps.findIndex((s) => s.id === t.id);
+    this.steps = e === -1 ? [...this.steps, t] : this.steps.map((s) => s.id === t.id ? { ...s, ...t } : s);
+  }
+  renderPanel() {
+    this.panel && (this.panel.innerHTML = `
+      <aside class="po-sidebar">
+        <div class="po-brand"><div class="po-logo"></div><div><strong>PageOps 问答</strong><span>页面工程专家</span></div></div>
+        <button class="po-new" data-action="new">+ 新建问答</button>
+        <input class="po-search" placeholder="搜索问答" />
+        <div class="po-thread-list">${this.conversations.map((t) => {
+      var e;
+      return `
+          <button class="po-thread ${t.id === ((e = this.currentThread) == null ? void 0 : e.id) ? "active" : ""}" data-thread="${t.id}">
+            <strong>${f(t.title)}</strong><span>${C(t.created_at)}</span>
+          </button>`;
+    }).join("")}</div>
+      </aside>
+      <main class="po-chat">
+        <header><div><p>问数回答</p><h2>${this.currentThread ? f(this.currentThread.title) : "未选择问答"}</h2></div><span>Markdown · 流式输出</span></header>
+        <section class="po-messages">
+          ${this.messages.map((t) => `<article class="po-message ${t.role}"><b>${t.role === "user" ? "你" : "PageOps 分析"}</b><div>${t.role === "assistant" ? b(t.content) : f(t.content)}</div></article>`).join("")}
+          ${this.streaming ? `<article class="po-message assistant streaming"><b>PageOps 分析</b><div>${b(this.streaming)}</div></article>` : ""}
+        </section>
+        <form class="po-composer"><textarea placeholder="请输入页面分析问题，Enter 发送，Shift + Enter 换行"></textarea><button type="submit">发送</button></form>
+      </main>
+      <aside class="po-trace"><header><h2>执行过程</h2><button data-action="close">×</button></header><section>${this.renderSteps()}</section></aside>
+    `, this.bindPanelEvents());
+  }
+  renderSteps() {
+    return (this.steps.length ? this.steps : [{ id: "idle", title: "等待任务", status: "pending", details: { message: "发送消息后展示执行过程。" } }]).map((e) => `<details class="po-step ${e.status}" ${e.status === "running" || e.status === "failed" ? "open" : ""}><summary><strong>${f(e.title)}</strong><span>${e.status}</span></summary><pre>${f(JSON.stringify(e.details ?? {}, null, 2))}</pre></details>`).join("");
+  }
+  bindPanelEvents() {
+    var t, e, s, r, i, d, p, u, c;
+    (e = (t = this.panel) == null ? void 0 : t.querySelector('[data-action="new"]')) == null || e.addEventListener("click", () => void this.newConversation()), (r = (s = this.panel) == null ? void 0 : s.querySelector('[data-action="close"]')) == null || r.addEventListener("click", () => this.close()), (i = this.panel) == null || i.querySelectorAll("[data-thread]").forEach((o) => {
+      o.addEventListener("click", () => {
+        const a = this.conversations.find((h) => h.id === o.dataset.thread);
+        a && this.selectThread(a);
+      });
+    }), (p = (d = this.panel) == null ? void 0 : d.querySelector("form")) == null || p.addEventListener("submit", (o) => {
+      var g;
+      o.preventDefault();
+      const a = (g = this.panel) == null ? void 0 : g.querySelector("textarea"), h = a == null ? void 0 : a.value.trim();
+      h && (a.value = "", this.ask(h));
+    }), (c = (u = this.panel) == null ? void 0 : u.querySelector("textarea")) == null || c.addEventListener("keydown", (o) => {
+      var h, g;
+      const a = o;
+      a.key === "Enter" && !a.shiftKey && (a.preventDefault(), (g = (h = this.panel) == null ? void 0 : h.querySelector("form")) == null || g.requestSubmit());
+    });
+  }
+}
+function f(n) {
+  return n.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+function C(n) {
+  return new Intl.DateTimeFormat("zh-CN", { month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit" }).format(new Date(n));
+}
+const E = new T();
+export {
+  E as PageOpsSDK
+};

package/dist/pageops-sdk.umd.cjs

@@ -0,0 +1,23 @@
+(function(l,o){typeof exports=="object"&&typeof module<"u"?o(exports):typeof define=="function"&&define.amd?define(["exports"],o):(l=typeof globalThis<"u"?globalThis:l||self,o(l.PageOpsSDK={}))})(this,(function(l){"use strict";var C=Object.defineProperty;var O=(l,o,m)=>o in l?C(l,o,{enumerable:!0,configurable:!0,writable:!0,value:m}):l[o]=m;var d=(l,o,m)=>O(l,typeof o!="symbol"?o+"":o,m);class o{constructor(t){this.options=t}async createContext(){var e,s;const t=((s=(e=this.options).getPageContext)==null?void 0:s.call(e))??{};return this.request("/context/session",{method:"POST",body:JSON.stringify({app_id:this.options.appId,env:this.options.env,route:t.route,url:t.url??location.href,title:t.title??document.title,tenant_id:t.tenantId,user_role:t.userRole,build_version:t.buildVersion})})}async listConversations(){return(await this.request("/conversations")).conversations}async createConversation(t,e){return this.request("/conversations",{method:"POST",body:JSON.stringify({context_session_id:t,title:e})})}async listMessages(t){return(await this.request(`/conversations/${encodeURIComponent(t)}/messages`)).messages}streamQuestion(t,e){return fetch(`${this.base()}/question/stream`,{method:"POST",headers:{"content-type":"application/json"},body:JSON.stringify({thread_id:t,question:e})})}async request(t,e){const s=await fetch(`${this.base()}${t}`,{...e,headers:{"content-type":"application/json",...(e==null?void 0:e.headers)??{}}}),i=await s.json();if(!s.ok)throw new Error(i.message??"PageOps 请求失败");return i}base(){return this.options.apiBase.replace(/\/$/,"")}}function m(r){return r.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}function f(r){return m(r).replace(/`([^`]+)`/g,"<code>$1</code>").replace(/\*\*([^*]+)\*\*/g,"<strong>$1</strong>")}function w(r,t){const e=r[t],s=r[t+1];if(!(e!=null&&e.includes("|"))||!/^\s*\|?\s*:?-{3,}:?\s*(\|\s*:?-{3,}:?\s*)+\|?\s*$/.test(s??""))return null;const i=[];let n=t;for(;n<r.length&&r[n].includes("|")&&r[n].trim();)i.push(r[n]),n+=1;const u=h=>h.trim().replace(/^\|/,"").replace(/\|$/,"").split("|").map(c=>f(c.trim())),g=u(i[0]).map(h=>`<th>${h}</th>`).join(""),v=i.slice(2).map(h=>`<tr>${u(h).map(c=>`<td>${c}</td>`).join("")}</tr>`).join("");return{html:`<table><thead><tr>${g}</tr></thead><tbody>${v}</tbody></table>`,next:n}}function $(r){const t=r.split(`
+`),e=[];for(let s=0;s<t.length;s+=1){const i=w(t,s);if(i){e.push(i.html),s=i.next-1;continue}const n=t[s];n.startsWith("### ")?e.push(`<h4>${f(n.slice(4))}</h4>`):n.startsWith("## ")?e.push(`<h3>${f(n.slice(3))}</h3>`):n.startsWith("# ")?e.push(`<h2>${f(n.slice(2))}</h2>`):n.startsWith("- ")?e.push(`<li>${f(n.slice(2))}</li>`):n.trim()?e.push(`<p>${f(n)}</p>`):e.push("<br>")}return e.join("")}async function S(r,t){var n,u;const e=r.getReader(),s=new TextDecoder;let i="";for(;;){const{done:g,value:v}=await e.read();if(g)break;i+=s.decode(v,{stream:!0});const h=i.split(`
+
+`);i=h.pop()??"";for(const c of h){const a=(n=c.match(/^event: (.+)$/m))==null?void 0:n[1],p=(u=c.match(/^data: (.+)$/m))==null?void 0:u[1];a&&p&&t(a,JSON.parse(p))}}}class x{constructor(){d(this,"client",null);d(this,"options",null);d(this,"root",null);d(this,"panel",null);d(this,"context",null);d(this,"currentThread",null);d(this,"conversations",[]);d(this,"messages",[]);d(this,"steps",[]);d(this,"streaming","")}mount(t){this.unmount(),this.options=t,this.client=new o(t),this.root=document.createElement("div"),this.root.className="pageops-sdk",(t.container??document.body).appendChild(this.root),this.renderClosed()}unmount(){var t;(t=this.root)==null||t.remove(),this.root=null,this.panel=null,this.context=null,this.currentThread=null,this.conversations=[],this.messages=[],this.steps=[],this.streaming=""}open(){this.root&&(this.root.innerHTML="",this.panel=document.createElement("div"),this.panel.className="po-panel",this.root.appendChild(this.panel),this.loadConversations(),this.renderPanel())}close(){this.renderClosed()}updateContext(t){this.options&&(this.options={...this.options,...t},this.client=new o(this.options))}renderClosed(){var t;this.root&&(this.root.innerHTML='<button class="po-fab" type="button">多轮问答</button>',(t=this.root.querySelector("button"))==null||t.addEventListener("click",()=>this.open()))}async ensureContext(){if(this.context)return this.context;if(!this.client)throw new Error("PageOps SDK 未初始化");return this.context=await this.client.createContext(),this.context}async loadConversations(){this.client&&(this.conversations=await this.client.listConversations(),this.renderPanel())}async newConversation(){if(!this.client)return;const t=await this.ensureContext();this.currentThread=await this.client.createConversation(t.id,t.route||document.title||"新的问答"),this.conversations=[this.currentThread,...this.conversations],this.messages=[],this.steps=[],this.streaming="",this.renderPanel()}async selectThread(t){this.client&&(this.currentThread=t,this.messages=await this.client.listMessages(t.id),this.steps=[],this.streaming="",this.renderPanel())}async ask(t){if(!this.client||(this.currentThread||await this.newConversation(),!this.currentThread))return;this.messages.push({id:`local-${Date.now()}`,role:"user",content:t,metadata_json:{}}),this.steps=[],this.streaming="",this.renderPanel();const e=await this.client.streamQuestion(this.currentThread.id,t);if(!e.ok||!e.body)throw new Error("PageOps 流式问答失败");await S(e.body,(s,i)=>{s==="step"&&this.upsertStep(i),s==="delta"&&(this.streaming+=String(i.content??"")),s==="done"&&this.selectThread(this.currentThread),s==="error"&&this.upsertStep({id:"error",title:"执行失败",status:"failed",details:i}),this.renderPanel()})}upsertStep(t){const e=this.steps.findIndex(s=>s.id===t.id);this.steps=e===-1?[...this.steps,t]:this.steps.map(s=>s.id===t.id?{...s,...t}:s)}renderPanel(){this.panel&&(this.panel.innerHTML=`
+      <aside class="po-sidebar">
+        <div class="po-brand"><div class="po-logo"></div><div><strong>PageOps 问答</strong><span>页面工程专家</span></div></div>
+        <button class="po-new" data-action="new">+ 新建问答</button>
+        <input class="po-search" placeholder="搜索问答" />
+        <div class="po-thread-list">${this.conversations.map(t=>{var e;return`
+          <button class="po-thread ${t.id===((e=this.currentThread)==null?void 0:e.id)?"active":""}" data-thread="${t.id}">
+            <strong>${b(t.title)}</strong><span>${T(t.created_at)}</span>
+          </button>`}).join("")}</div>
+      </aside>
+      <main class="po-chat">
+        <header><div><p>问数回答</p><h2>${this.currentThread?b(this.currentThread.title):"未选择问答"}</h2></div><span>Markdown · 流式输出</span></header>
+        <section class="po-messages">
+          ${this.messages.map(t=>`<article class="po-message ${t.role}"><b>${t.role==="user"?"你":"PageOps 分析"}</b><div>${t.role==="assistant"?$(t.content):b(t.content)}</div></article>`).join("")}
+          ${this.streaming?`<article class="po-message assistant streaming"><b>PageOps 分析</b><div>${$(this.streaming)}</div></article>`:""}
+        </section>
+        <form class="po-composer"><textarea placeholder="请输入页面分析问题，Enter 发送，Shift + Enter 换行"></textarea><button type="submit">发送</button></form>
+      </main>
+      <aside class="po-trace"><header><h2>执行过程</h2><button data-action="close">×</button></header><section>${this.renderSteps()}</section></aside>
+    `,this.bindPanelEvents())}renderSteps(){return(this.steps.length?this.steps:[{id:"idle",title:"等待任务",status:"pending",details:{message:"发送消息后展示执行过程。"}}]).map(e=>`<details class="po-step ${e.status}" ${e.status==="running"||e.status==="failed"?"open":""}><summary><strong>${b(e.title)}</strong><span>${e.status}</span></summary><pre>${b(JSON.stringify(e.details??{},null,2))}</pre></details>`).join("")}bindPanelEvents(){var t,e,s,i,n,u,g,v,h;(e=(t=this.panel)==null?void 0:t.querySelector('[data-action="new"]'))==null||e.addEventListener("click",()=>void this.newConversation()),(i=(s=this.panel)==null?void 0:s.querySelector('[data-action="close"]'))==null||i.addEventListener("click",()=>this.close()),(n=this.panel)==null||n.querySelectorAll("[data-thread]").forEach(c=>{c.addEventListener("click",()=>{const a=this.conversations.find(p=>p.id===c.dataset.thread);a&&this.selectThread(a)})}),(g=(u=this.panel)==null?void 0:u.querySelector("form"))==null||g.addEventListener("submit",c=>{var y;c.preventDefault();const a=(y=this.panel)==null?void 0:y.querySelector("textarea"),p=a==null?void 0:a.value.trim();p&&(a.value="",this.ask(p))}),(h=(v=this.panel)==null?void 0:v.querySelector("textarea"))==null||h.addEventListener("keydown",c=>{var p,y;const a=c;a.key==="Enter"&&!a.shiftKey&&(a.preventDefault(),(y=(p=this.panel)==null?void 0:p.querySelector("form"))==null||y.requestSubmit())})}}function b(r){return r.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;")}function T(r){return new Intl.DateTimeFormat("zh-CN",{month:"2-digit",day:"2-digit",hour:"2-digit",minute:"2-digit"}).format(new Date(r))}const P=new x;l.PageOpsSDK=P,Object.defineProperty(l,Symbol.toStringTag,{value:"Module"})}));

package/dist/stream.d.ts

@@ -0,0 +1,2 @@
+export type StreamHandler = (event: string, data: any) => void;
+export declare function readEventStream(body: ReadableStream<Uint8Array>, handler: StreamHandler): Promise<void>;

package/dist/types.d.ts

@@ -0,0 +1,51 @@
+export interface PageOpsContext {
+    route?: string;
+    url?: string;
+    title?: string;
+    tenantId?: string;
+    userRole?: string;
+    buildVersion?: string;
+}
+export interface PageOpsMountOptions {
+    apiBase: string;
+    appId: string;
+    env: string;
+    getPageContext?: () => PageOpsContext;
+    container?: HTMLElement;
+}
+export interface ContextSession {
+    id: string;
+    app_id: string;
+    env: string;
+    route?: string;
+    url?: string;
+    title?: string;
+    tenant_id?: string;
+    user_role?: string;
+    build_version?: string;
+}
+export interface ConversationThread {
+    id: string;
+    context_session_id: string;
+    title: string;
+    created_at: string;
+}
+export interface ConversationMessage {
+    id: string;
+    role: string;
+    content: string;
+    evidence_bundle_id?: string | null;
+    metadata_json: Record<string, unknown>;
+}
+export interface ExecutionStep {
+    id: string;
+    title: string;
+    status: 'pending' | 'running' | 'completed' | 'failed';
+    details?: Record<string, unknown>;
+}
+export interface StreamDonePayload {
+    message_id: string;
+    answer: Record<string, unknown>;
+    bundle_id: string;
+    llm: Record<string, unknown>;
+}

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@pageops/sdk",
+  "version": "0.1.0",
+  "description": "PageOps embeddable frontend SDK",
+  "type": "module",
+  "main": "dist/pageops-sdk.umd.cjs",
+  "module": "dist/pageops-sdk.es.js",
+  "types": "dist/index.d.ts",
+  "style": "dist/pageops-sdk.css",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/pageops-sdk.es.js",
+      "require": "./dist/pageops-sdk.umd.cjs"
+    },
+    "./dist/pageops-sdk.css": "./dist/pageops-sdk.css"
+  },
+  "files": ["dist"],
+  "scripts": {
+    "build": "vite build && tsc --emitDeclarationOnly",
+    "pack:check": "npm pack --dry-run"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "@types/node": "22.10.2",
+    "typescript": "5.8.3",
+    "vite": "6.3.5"
+  },
+  "engines": {
+    "node": ">=20"
+  }
+}