@pingagent/sdk 0.1.0

package/dist/web-server.js

@@ -0,0 +1,1036 @@
+import {
+  ContactManager,
+  LocalStore,
+  PingAgentClient,
+  ensureTokenValid,
+  loadIdentity,
+  updateStoredToken
+} from "./chunk-4SRPVWK4.js";
+
+// src/web-server.ts
+import * as fs from "fs";
+import * as http from "http";
+import * as path from "path";
+import { SCHEMA_TEXT } from "@pingagent/schemas";
+var DEFAULT_PORT = 3846;
+var DEFAULT_ROOT = "~/.pingagent";
+function resolvePath(p) {
+  if (!p || !p.startsWith("~")) return p;
+  return path.join(process.env.HOME || process.env.USERPROFILE || "", p.slice(1));
+}
+function listProfiles(rootDir) {
+  const root = resolvePath(rootDir);
+  const profiles = [];
+  if (!fs.existsSync(root) || !fs.statSync(root).isDirectory()) return profiles;
+  const defaultIdentity = path.join(root, "identity.json");
+  if (fs.existsSync(defaultIdentity)) {
+    try {
+      const id = loadIdentity(defaultIdentity);
+      profiles.push({
+        id: "default",
+        did: id.did,
+        identityPath: defaultIdentity,
+        storePath: path.join(root, "store.db")
+      });
+    } catch {
+      profiles.push({ id: "default", identityPath: defaultIdentity, storePath: path.join(root, "store.db") });
+    }
+  }
+  const profilesDir = path.join(root, "profiles");
+  if (fs.existsSync(profilesDir) && fs.statSync(profilesDir).isDirectory()) {
+    for (const name of fs.readdirSync(profilesDir)) {
+      const sub = path.join(profilesDir, name);
+      if (!fs.statSync(sub).isDirectory()) continue;
+      const idPath = path.join(sub, "identity.json");
+      if (fs.existsSync(idPath)) {
+        try {
+          const id = loadIdentity(idPath);
+          profiles.push({ id: name, did: id.did, identityPath: idPath, storePath: path.join(sub, "store.db") });
+        } catch {
+          profiles.push({ id: name, identityPath: idPath, storePath: path.join(sub, "store.db") });
+        }
+      }
+    }
+  }
+  let names;
+  try {
+    names = fs.readdirSync(root);
+  } catch {
+    return profiles;
+  }
+  for (const name of names) {
+    if (name === "profiles" || name === "identity.json" || name === "store.db") continue;
+    const sub = path.join(root, name);
+    if (!fs.statSync(sub).isDirectory()) continue;
+    const idPath = path.join(sub, "identity.json");
+    if (fs.existsSync(idPath) && !profiles.some((p) => p.id === name)) {
+      try {
+        const id = loadIdentity(idPath);
+        profiles.push({ id: name, did: id.did, identityPath: idPath, storePath: path.join(sub, "store.db") });
+      } catch {
+        profiles.push({ id: name, identityPath: idPath, storePath: path.join(sub, "store.db") });
+      }
+    }
+  }
+  return profiles;
+}
+async function getContextForProfile(profile, serverUrl) {
+  await ensureTokenValid(profile.identityPath, serverUrl);
+  const identity = loadIdentity(profile.identityPath);
+  const store = new LocalStore(profile.storePath);
+  const contactManager = new ContactManager(store);
+  const client = new PingAgentClient({
+    serverUrl,
+    identity,
+    accessToken: identity.accessToken ?? "",
+    store,
+    onTokenRefreshed: (token, expiresAt) => updateStoredToken(token, expiresAt, profile.identityPath)
+  });
+  return { client, contactManager, myDid: identity.did };
+}
+var clientCache = /* @__PURE__ */ new Map();
+async function startWebServer(opts) {
+  const port = opts.port ?? DEFAULT_PORT;
+  const serverUrl = opts.serverUrl;
+  const rootDir = opts.rootDir ? resolvePath(opts.rootDir) : resolvePath(DEFAULT_ROOT);
+  let profiles;
+  let fixedContext = null;
+  if (opts.fixedIdentityPath && opts.fixedStorePath) {
+    const identityPath = resolvePath(opts.fixedIdentityPath);
+    const storePath = resolvePath(opts.fixedStorePath);
+    fixedContext = await getContextForProfile({ id: "fixed", identityPath, storePath }, serverUrl);
+    profiles = [{ id: "fixed", did: fixedContext.myDid, identityPath, storePath }];
+  } else {
+    profiles = listProfiles(opts.rootDir ?? DEFAULT_ROOT);
+    if (profiles.length === 0) {
+      throw new Error(`No identity found in ${rootDir}. Run: pingagent init`);
+    }
+  }
+  const html = getHtml(!!opts.fixedIdentityPath);
+  const server = http.createServer(async (req, res) => {
+    const url = new URL(req.url || "/", `http://${req.headers.host}`);
+    const pathname = url.pathname;
+    const raw = url.searchParams.get("profile") || req.headers["x-profile"];
+    const profileId = Array.isArray(raw) ? raw[0] : raw;
+    const origin = req.headers.origin || "";
+    const allowOrigin = /^https?:\/\/(localhost|127\.0\.0\.1)(:\d+)?$/.test(origin) ? origin : "null";
+    res.setHeader("Access-Control-Allow-Origin", allowOrigin);
+    res.setHeader("Access-Control-Allow-Methods", "GET, POST, OPTIONS");
+    res.setHeader("Access-Control-Allow-Headers", "Content-Type, X-Profile");
+    if (req.method === "OPTIONS") {
+      res.writeHead(204);
+      res.end();
+      return;
+    }
+    if (pathname === "/" || pathname === "/index.html") {
+      res.writeHead(200, { "Content-Type": "text/html; charset=utf-8" });
+      res.end(html);
+      return;
+    }
+    if (pathname.startsWith("/api/")) {
+      try {
+        if (pathname === "/api/profiles" || pathname === "/api/profiles/") {
+          res.writeHead(200, { "Content-Type": "application/json; charset=utf-8" });
+          res.end(JSON.stringify({ profiles: profiles.map((p) => ({ id: p.id, did: p.did })) }));
+          return;
+        }
+        let ctx = fixedContext;
+        if (!ctx) {
+          const pid = (typeof profileId === "string" ? profileId : null) || (profiles.length === 1 ? profiles[0].id : null);
+          if (!pid) {
+            res.writeHead(400, { "Content-Type": "application/json; charset=utf-8" });
+            res.end(JSON.stringify({ error: "Select a profile first (?profile=xxx)" }));
+            return;
+          }
+          const cached = clientCache.get(pid);
+          if (cached) ctx = cached;
+          else {
+            const p = profiles.find((x) => x.id === pid);
+            if (!p) throw new Error(`Unknown profile: ${pid}`);
+            ctx = await getContextForProfile(p, serverUrl);
+            clientCache.set(pid, ctx);
+          }
+        }
+        const result = await handleApi(pathname, req, ctx.client, ctx.contactManager, ctx.myDid, serverUrl);
+        res.writeHead(200, { "Content-Type": "application/json; charset=utf-8" });
+        res.end(JSON.stringify(result));
+      } catch (err) {
+        res.writeHead(500, { "Content-Type": "application/json; charset=utf-8" });
+        res.end(JSON.stringify({ error: err?.message ?? "Internal error" }));
+      }
+      return;
+    }
+    res.writeHead(404);
+    res.end("Not found");
+  });
+  server.listen(port, "127.0.0.1", () => {
+    console.log(`PingAgent Web: http://127.0.0.1:${port}`);
+    if (fixedContext) {
+      console.log(`  DID: ${fixedContext.myDid}`);
+    } else {
+      console.log(`  Profiles: ${profiles.map((p) => p.id).join(", ")}`);
+    }
+    console.log(`  Server: ${serverUrl}`);
+  });
+  return server;
+}
+async function handleApi(pathname, req, client, contactManager, myDid, serverUrl) {
+  const parts = pathname.slice(5).split("/").filter(Boolean);
+  if (parts[0] === "me") {
+    return { did: myDid, serverUrl };
+  }
+  if (parts[0] === "profile") {
+    if (req.method === "GET") {
+      const res = await client.getProfile();
+      if (!res.ok) throw new Error(res.error?.message ?? "Failed to get profile");
+      return res.data;
+    }
+    if (req.method === "POST") {
+      const body = await readBody(req);
+      const profile = {};
+      if (body?.display_name != null) profile.display_name = body.display_name;
+      if (body?.bio != null) profile.bio = body.bio;
+      if (Array.isArray(body?.capabilities)) profile.capabilities = body.capabilities;
+      else if (typeof body?.capabilities === "string") profile.capabilities = body.capabilities.split(",").map((s) => s.trim()).filter(Boolean);
+      if (Array.isArray(body?.tags)) profile.tags = body.tags;
+      else if (typeof body?.tags === "string") profile.tags = body.tags.split(",").map((s) => s.trim()).filter(Boolean);
+      if (typeof body?.discoverable === "boolean") profile.discoverable = body.discoverable;
+      const res = await client.updateProfile(profile);
+      if (!res.ok) throw new Error(res.error?.message ?? "Failed to update profile");
+      return res.data;
+    }
+  }
+  if (parts[0] === "feed") {
+    if (parts[1] === "publish" && req.method === "POST") {
+      const body = await readBody(req);
+      const text = String(body?.text ?? "").trim();
+      if (!text) throw new Error("Missing text");
+      const res = await client.publishPost({ text, artifact_ref: body?.artifact_ref });
+      if (!res.ok) throw new Error(res.error?.message ?? "Failed to publish");
+      return res.data;
+    }
+    if (parts[1] === "public") {
+      const url = new URL(req.url || "", "http://x");
+      const limit = parseInt(url.searchParams.get("limit") ?? "20", 10);
+      const since = url.searchParams.get("since");
+      const res = await client.listFeedPublic({ limit, since: since ? parseInt(since, 10) : void 0 });
+      if (!res.ok) throw new Error(res.error?.message ?? "Failed to list feed");
+      return res.data;
+    }
+    if (parts[1] === "by_did") {
+      const url = new URL(req.url || "", "http://x");
+      const did = url.searchParams.get("did") || myDid;
+      const limit = parseInt(url.searchParams.get("limit") ?? "20", 10);
+      const res = await client.listFeedByDid(did, { limit });
+      if (!res.ok) throw new Error(res.error?.message ?? "Failed to list feed");
+      return res.data;
+    }
+  }
+  if (parts[0] === "channels") {
+    if (!parts[1] || parts[1] === "mine") {
+      const listRes = await client.listConversations({ type: "channel" });
+      if (!listRes.ok) throw new Error(listRes.error?.message ?? "Failed to list channels");
+      return { channels: listRes.data?.conversations ?? [] };
+    }
+    if (parts[1] === "discover") {
+      const url = new URL(req.url || "", "http://x");
+      const limit = parseInt(url.searchParams.get("limit") ?? "20", 10);
+      const q = url.searchParams.get("q") || void 0;
+      const res = await client.discoverChannels({ limit, query: q });
+      if (!res.ok) throw new Error(res.error?.message ?? "Failed to discover channels");
+      return res.data;
+    }
+    if (parts[1] === "create" && req.method === "POST") {
+      const body = await readBody(req);
+      const name = String(body?.name ?? "").trim();
+      if (!name) throw new Error("Missing name");
+      const res = await client.createChannel({
+        name,
+        alias: body?.alias,
+        description: body?.description,
+        discoverable: body?.discoverable
+      });
+      if (!res.ok) throw new Error(res.error?.message ?? "Failed to create channel");
+      return res.data;
+    }
+    if (parts[1] === "update" && req.method === "PATCH") {
+      const body = await readBody(req);
+      const alias = String(body?.alias ?? "").trim();
+      if (!alias) throw new Error("Missing alias");
+      const res = await client.updateChannel({
+        alias,
+        name: body?.name,
+        description: body?.description,
+        discoverable: body?.discoverable
+      });
+      if (!res.ok) throw new Error(res.error?.message ?? "Failed to update channel");
+      return res.data;
+    }
+    if (parts[1] === "delete" && req.method === "DELETE") {
+      const body = await readBody(req);
+      const alias = String(body?.alias ?? "").trim();
+      if (!alias) throw new Error("Missing alias");
+      const res = await client.deleteChannel(alias);
+      if (!res.ok) throw new Error(res.error?.message ?? "Failed to delete channel");
+      return res.data;
+    }
+    if (parts[1] === "join" && req.method === "POST") {
+      const body = await readBody(req);
+      const alias = String(body?.alias ?? "").trim().replace(/^@ch\//, "");
+      if (!alias) throw new Error("Missing alias");
+      const res = await client.joinChannel(alias);
+      if (!res.ok) throw new Error(res.error?.message ?? "Failed to join channel");
+      return res.data;
+    }
+  }
+  if (parts[0] === "contacts") {
+    const list = contactManager.list();
+    return { contacts: list };
+  }
+  if (parts[0] === "conversations" && !parts[1]) {
+    const listRes = await client.listConversations({ type: "dm" });
+    if (!listRes.ok) throw new Error(listRes.error?.message ?? "Failed to list conversations");
+    const convos = listRes.data?.conversations ?? [];
+    const contacts = contactManager.list();
+    const byDid = new Map(contacts.map((c) => [c.did, c]));
+    const enriched = convos.map((c) => ({
+      ...c,
+      display_name: byDid.get(c.target_did)?.display_name ?? byDid.get(c.target_did)?.alias
+    }));
+    return { conversations: enriched };
+  }
+  if (parts[0] === "conversations" && parts[1] && parts[2] === "messages") {
+    const conversationId = decodeURIComponent(parts[1]);
+    const sinceSeq = parseInt(new URL(req.url || "", "http://x").searchParams.get("since_seq") ?? "0", 10) || 0;
+    const toMsg = (m) => ({
+      message_id: m.message_id,
+      seq: m.seq,
+      sender_did: m.sender_did,
+      schema: m.schema,
+      payload: m.payload,
+      ts_ms: m.ts_ms,
+      isMe: m.sender_did === myDid
+    });
+    const seen = /* @__PURE__ */ new Set();
+    const merged = [];
+    for (const box of ["ready", "strangers"]) {
+      const fetchRes = await client.fetchInbox(conversationId, { sinceSeq, limit: 100, box });
+      if (!fetchRes.ok) continue;
+      for (const m of fetchRes.data?.messages ?? []) {
+        if (m.message_id && !seen.has(m.message_id)) {
+          seen.add(m.message_id);
+          merged.push(toMsg(m));
+        }
+      }
+    }
+    merged.sort((a, b) => (a.ts_ms ?? 0) - (b.ts_ms ?? 0));
+    const hm = client.getHistoryManager();
+    if (hm) {
+      const stored = hm.list(conversationId, { limit: 100 });
+      for (const m of stored) {
+        if (!seen.has(m.message_id)) {
+          seen.add(m.message_id);
+          merged.push({
+            message_id: m.message_id,
+            seq: m.seq,
+            sender_did: m.sender_did,
+            schema: m.schema,
+            payload: m.payload,
+            ts_ms: m.ts_ms,
+            isMe: m.sender_did === myDid
+          });
+        }
+      }
+      merged.sort((a, b) => (a.ts_ms ?? 0) - (b.ts_ms ?? 0));
+    }
+    return { messages: merged };
+  }
+  if (parts[0] === "conversations" && parts[1] && parts[2] === "send" && req.method === "POST") {
+    const conversationId = decodeURIComponent(parts[1]);
+    const body = await readBody(req);
+    const text = body?.text ?? body?.message ?? "";
+    if (!text) throw new Error("Missing text or message");
+    const sendRes = await client.sendMessage(conversationId, SCHEMA_TEXT, { text });
+    if (!sendRes.ok) throw new Error(sendRes.error?.message ?? "Failed to send");
+    return { ok: true, message_id: sendRes.data?.message_id };
+  }
+  if (parts[0] === "open" && req.method === "POST") {
+    const body = await readBody(req);
+    const targetDid = String(body?.target_did ?? body?.did ?? "").trim();
+    if (!targetDid) throw new Error("Missing target_did");
+    const openRes = await client.openConversation(targetDid);
+    if (!openRes.ok) throw new Error(openRes.error?.message ?? "Failed to open conversation");
+    const conv = openRes.data;
+    if (!conv.trusted && body?.send_contact_request) {
+      const msg = typeof body?.message === "string" ? body.message : void 0;
+      await client.sendContactRequest(conv.conversation_id, msg);
+    }
+    return { conversation_id: conv.conversation_id, type: conv.type, trusted: conv.trusted };
+  }
+  throw new Error("Unknown API");
+}
+function readBody(req) {
+  return new Promise((resolve, reject) => {
+    const chunks = [];
+    req.on("data", (c) => chunks.push(c));
+    req.on("end", () => {
+      try {
+        const raw = Buffer.concat(chunks).toString("utf-8");
+        resolve(raw ? JSON.parse(raw) : {});
+      } catch (e) {
+        reject(new Error("Invalid JSON"));
+      }
+    });
+    req.on("error", reject);
+  });
+}
+function getHtml(fixedOnly) {
+  const profilePicker = fixedOnly ? "" : `
+    <div class="profile-picker" id="profilePicker">
+      <div class="profile-label">\u9009\u62E9 Profile \u767B\u5F55</div>
+      <div class="profile-list" id="profileList"></div>
+    </div>
+    <div class="profile-current" id="profileCurrent" style="display:none">
+      <span>\u5F53\u524D: <strong id="currentProfileName"></strong></span>
+      <button class="profile-switch-btn" id="switchProfileBtn">\u5207\u6362</button>
+    </div>`;
+  return `<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>PingAgent Web - \u672C\u5730\u8C03\u8BD5\u4E0E\u5BA1\u8BA1</title>
+  <style>
+    * { box-sizing: border-box; }
+    body { font-family: ui-sans-serif, system-ui, sans-serif; margin: 0; background: #0f0f12; color: #e4e4e7; }
+    .layout { display: flex; height: 100vh; }
+    .sidebar { width: 280px; border-right: 1px solid #27272a; overflow-y: auto; }
+    .main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
+    .header { padding: 12px 16px; border-bottom: 1px solid #27272a; font-size: 13px; color: #a1a1aa; }
+    .header strong { color: #fafafa; }
+    .list { padding: 8px 0; }
+    .list-item { padding: 10px 16px; cursor: pointer; font-size: 14px; border-left: 3px solid transparent; }
+    .list-item:hover { background: #18181b; }
+    .list-item.active { background: #18181b; border-left-color: #3b82f6; }
+    .list-item .sub { font-size: 12px; color: #71717a; margin-top: 2px; }
+    .messages { flex: 1; overflow-y: auto; padding: 16px; }
+    .msg { max-width: 75%; margin-bottom: 12px; padding: 10px 14px; border-radius: 12px; font-size: 14px; }
+    .msg.me { margin-left: auto; background: #3b82f6; color: #fff; }
+    .msg.other { background: #27272a; }
+    .msg .meta { font-size: 11px; color: #71717a; margin-bottom: 4px; }
+    .msg.me .meta { color: rgba(255,255,255,0.7); }
+    .input-area { padding: 12px 16px; border-top: 1px solid #27272a; display: flex; gap: 8px; }
+    .input-area input { flex: 1; padding: 10px 14px; border: 1px solid #3f3f46; border-radius: 8px; background: #18181b; color: #fafafa; font-size: 14px; }
+    .input-area input:focus { outline: none; border-color: #3b82f6; }
+    .input-area button { padding: 10px 20px; background: #3b82f6; color: #fff; border: none; border-radius: 8px; cursor: pointer; font-size: 14px; }
+    .input-area button:hover { background: #2563eb; }
+    .input-area button:disabled { opacity: 0.5; cursor: not-allowed; }
+    .empty { padding: 24px; text-align: center; color: #71717a; font-size: 14px; }
+    .add-conv { padding: 12px 16px; border-bottom: 1px solid #27272a; }
+    .add-conv input { width: 100%; padding: 8px 12px; border: 1px solid #3f3f46; border-radius: 6px; background: #18181b; color: #fafafa; font-size: 13px; }
+    .add-conv button { margin-top: 8px; padding: 8px 12px; background: #27272a; color: #e4e4e7; border: none; border-radius: 6px; cursor: pointer; font-size: 13px; }
+    .add-conv button:hover { background: #3f3f46; }
+    .error { color: #f87171; font-size: 13px; padding: 8px 0; }
+    .profile-picker { padding: 12px 16px; border-bottom: 1px solid #27272a; }
+    .profile-label { font-size: 12px; color: #71717a; margin-bottom: 8px; }
+    .profile-list .profile-btn { display: block; width: 100%; padding: 8px 12px; margin-bottom: 4px; background: #27272a; color: #e4e4e7; border: none; border-radius: 6px; cursor: pointer; font-size: 13px; text-align: left; }
+    .profile-list .profile-btn:hover { background: #3f3f46; }
+    .profile-list .profile-btn .sub { font-size: 11px; color: #71717a; }
+    .profile-current { padding: 12px 16px; border-bottom: 1px solid #27272a; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
+    .profile-current span { font-size: 13px; color: #a1a1aa; }
+    .profile-switch-btn { padding: 4px 10px; font-size: 12px; background: #27272a; color: #e4e4e7; border: none; border-radius: 6px; cursor: pointer; }
+    .profile-switch-btn:hover { background: #3f3f46; }
+    .section-label { font-size: 11px; color: #71717a; padding: 8px 16px 4px; text-transform: uppercase; }
+    .panel { display: none; flex-direction: column; flex: 1; min-height: 0; }
+    .panel.active { display: flex; }
+    .panel-content { flex: 1; overflow-y: auto; padding: 16px; }
+    .form-group { margin-bottom: 12px; }
+    .form-group label { display: block; font-size: 12px; color: #71717a; margin-bottom: 4px; }
+    .form-group input, .form-group textarea { width: 100%; padding: 8px 12px; border: 1px solid #3f3f46; border-radius: 6px; background: #18181b; color: #fafafa; font-size: 13px; }
+    .form-group textarea { min-height: 60px; resize: vertical; }
+    .btn-primary { padding: 8px 16px; background: #3b82f6; color: #fff; border: none; border-radius: 6px; cursor: pointer; font-size: 13px; }
+    .btn-primary:hover { background: #2563eb; }
+    .btn-secondary { padding: 8px 16px; background: #27272a; color: #e4e4e7; border: none; border-radius: 6px; cursor: pointer; font-size: 13px; }
+    .btn-secondary:hover { background: #3f3f46; }
+    .nav-item { padding: 10px 16px; cursor: pointer; font-size: 14px; border-left: 3px solid transparent; display: flex; align-items: center; gap: 8px; }
+    .nav-item:hover { background: #18181b; }
+    .nav-item.active { background: #18181b; border-left-color: #3b82f6; }
+  </style>
+</head>
+<body>
+  <div class="layout">
+    <div class="sidebar">
+      <div class="header"><strong>PingAgent Web</strong><br>\u672C\u5730\u8C03\u8BD5\u4E0E\u5BA1\u8BA1</div>
+      ${profilePicker}
+      <div class="add-conv">
+        <input type="text" id="newDid" placeholder="\u8F93\u5165 DID \u6216\u522B\u540D\u65B0\u5EFA\u4F1A\u8BDD">
+        <button id="openConv">\u6253\u5F00\u4F1A\u8BDD</button>
+      </div>
+      <div class="section-label">\u4F1A\u8BDD</div>
+      <div class="list" id="convList"></div>
+      <div class="section-label">\u8054\u7CFB\u4EBA</div>
+      <div class="list" id="contactList"></div>
+      <div class="section-label">\u9891\u9053</div>
+      <div class="list" id="channelList"></div>
+      <div class="add-conv">
+        <button id="discoverChannelsBtn" class="btn-secondary" style="width:100%">\u53D1\u73B0\u9891\u9053</button>
+        <button id="createChannelBtn" class="btn-secondary" style="width:100%;margin-top:4px">\u521B\u5EFA\u9891\u9053</button>
+      </div>
+      <div class="section-label">Feed</div>
+      <div class="nav-item" id="navFeed">\u53D1\u5E03\u52A8\u6001</div>
+      <div class="section-label">Profile</div>
+      <div class="nav-item" id="navProfile">\u7F16\u8F91\u8D44\u6599</div>
+    </div>
+    <div class="main">
+      <div class="header" id="mainHeader">\u9009\u62E9\u4F1A\u8BDD\u6216\u65B0\u5EFA</div>
+      <div id="dmPanel" class="panel active">
+        <div class="messages" id="messages"></div>
+        <div class="input-area" id="inputArea" style="display:none">
+          <input type="text" id="msgInput" placeholder="\u8F93\u5165\u6D88\u606F..." autocomplete="off">
+          <button id="sendBtn">\u53D1\u9001</button>
+        </div>
+      </div>
+      <div id="feedPanel" class="panel">
+        <div class="panel-content">
+          <div class="form-group">
+            <label>\u53D1\u5E03 Feed</label>
+            <textarea id="feedText" placeholder="\u5206\u4EAB\u52A8\u6001..." rows="3"></textarea>
+            <button id="publishFeedBtn" class="btn-primary" style="margin-top:8px">\u53D1\u5E03</button>
+          </div>
+          <div style="margin-top:16px">
+            <div class="section-label">\u52A8\u6001\u6D41</div>
+            <div id="feedTimeline"></div>
+          </div>
+        </div>
+      </div>
+      <div id="profilePanel" class="panel">
+        <div class="panel-content">
+          <div class="form-group">
+            <label>\u6635\u79F0 (display_name)</label>
+            <input type="text" id="profileDisplayName" placeholder="\u6635\u79F0">
+          </div>
+          <div class="form-group">
+            <label>\u7B80\u4ECB (bio)</label>
+            <textarea id="profileBio" placeholder="\u7B80\u77ED\u4ECB\u7ECD" rows="3"></textarea>
+          </div>
+          <div class="form-group">
+            <label>\u6807\u7B7E (tags, \u9017\u53F7\u5206\u9694)</label>
+            <input type="text" id="profileTags" placeholder="coding, devops">
+          </div>
+          <div class="form-group">
+            <label>\u80FD\u529B (capabilities, \u9017\u53F7\u5206\u9694)</label>
+            <input type="text" id="profileCapabilities" placeholder="coding, testing">
+          </div>
+          <button id="saveProfileBtn" class="btn-primary">\u4FDD\u5B58</button>
+        </div>
+      </div>
+      <div id="discoverPanel" class="panel">
+        <div class="panel-content">
+          <div class="form-group">
+            <input type="text" id="discoverQuery" placeholder="\u641C\u7D22\u9891\u9053...">
+            <button id="discoverSearchBtn" class="btn-primary" style="margin-top:8px">\u641C\u7D22</button>
+          </div>
+          <div id="discoverChannelList"></div>
+        </div>
+      </div>
+      <div id="createChannelPanel" class="panel">
+        <div class="panel-content">
+          <div class="form-group">
+            <label>\u9891\u9053\u540D\u79F0</label>
+            <input type="text" id="createChannelName" placeholder="\u540D\u79F0" required>
+          </div>
+          <div class="form-group">
+            <label>\u522B\u540D (\u53EF\u9009, \u5982 my-channel)</label>
+            <input type="text" id="createChannelAlias" placeholder="alias">
+          </div>
+          <div class="form-group">
+            <label>\u63CF\u8FF0 (\u53EF\u9009)</label>
+            <input type="text" id="createChannelDesc" placeholder="\u63CF\u8FF0">
+          </div>
+          <button id="createChannelSubmitBtn" class="btn-primary">\u521B\u5EFA</button>
+          <button id="createChannelBackBtn" class="btn-secondary" style="margin-left:8px">\u8FD4\u56DE</button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <script>
+    const API = '';
+    let me = {}, conversations = [], contacts = [], channels = [], currentConv = null, currentView = 'dm';
+    let selectedProfile = sessionStorage.getItem('pingagent_web_profile') || null;
+    const profilePickerEl = document.getElementById('profilePicker');
+    const profileCurrentEl = document.getElementById('profileCurrent');
+    const switchProfileBtn = document.getElementById('switchProfileBtn');
+    let profilesCache = null;
+
+    function showProfileCurrent() {
+      if (profileCurrentEl && profilePickerEl) {
+        profileCurrentEl.style.display = 'flex';
+        profilePickerEl.style.display = 'none';
+        const nameEl = document.getElementById('currentProfileName');
+        if (nameEl) nameEl.textContent = selectedProfile || '';
+      }
+    }
+
+    function showProfilePicker() {
+      if (profileCurrentEl && profilePickerEl) {
+        profileCurrentEl.style.display = 'none';
+        profilePickerEl.style.display = '';
+        currentConv = null;
+        document.getElementById('inputArea').style.display = 'none';
+        document.getElementById('messages').innerHTML = '';
+        document.getElementById('mainHeader').innerHTML = '<strong>\u9009\u62E9 Profile \u767B\u5F55</strong>';
+      }
+    }
+
+    async function loadProfiles() {
+      if (!profilePickerEl) return [];
+      if (profilesCache) return profilesCache;
+      const { profiles } = await fetch(API + '/api/profiles')
+        .then(r => r.json())
+        .catch(() => ({ profiles: [] }));
+      profilesCache = Array.isArray(profiles) ? profiles : [];
+      return profilesCache;
+    }
+
+    function renderProfileList(profiles) {
+      const listEl = document.getElementById('profileList');
+      if (!listEl) return;
+      listEl.innerHTML = (profiles || []).map(p =>
+        '<button class="profile-btn" data-id="' + p.id + '">' + p.id + '<div class="sub">' + (p.did || '').slice(0, 32) + '...</div></button>'
+      ).join('');
+      listEl.querySelectorAll('.profile-btn').forEach(btn => {
+        btn.addEventListener('click', async () => {
+          selectedProfile = btn.dataset.id || null;
+          if (selectedProfile) sessionStorage.setItem('pingagent_web_profile', selectedProfile);
+          showProfileCurrent();
+          await loadDataForProfile();
+        });
+      });
+    }
+
+    function showPanel(panelId) {
+      document.querySelectorAll('.panel').forEach(p => p.classList.remove('active'));
+      const el = document.getElementById(panelId);
+      if (el) el.classList.add('active');
+      currentView = panelId.replace('Panel', '');
+      document.querySelectorAll('.nav-item').forEach(n => n.classList.remove('active'));
+      const navMap = { feed: 'navFeed', profile: 'navProfile' };
+      const nav = document.getElementById(navMap[currentView]);
+      if (nav) nav.classList.add('active');
+    }
+
+    async function loadDataForProfile() {
+      const headerEl = document.getElementById('mainHeader');
+      try {
+        await loadMe();
+        await loadConversations();
+        await loadContacts();
+        await loadChannels();
+      } catch (e) {
+        const msg = (e && e.message) ? e.message : '\u52A0\u8F7D\u5931\u8D25';
+        if (headerEl) headerEl.innerHTML = '<span class="error">' + msg.replace(/</g, '&lt;') + '</span>';
+        conversations = [];
+        contacts = [];
+        channels = [];
+        renderConvList();
+        renderContactList();
+        renderChannelList();
+      }
+    }
+
+    async function switchProfile() {
+      selectedProfile = null;
+      sessionStorage.removeItem('pingagent_web_profile');
+      const profiles = await loadProfiles();
+      renderProfileList(profiles);
+      showProfilePicker();
+    }
+
+    async function api(path, opts = {}) {
+      let url = API + path;
+      if (profilePickerEl && selectedProfile) {
+        url += (path.includes('?') ? '&' : '?') + 'profile=' + encodeURIComponent(selectedProfile);
+      }
+      const res = await fetch(url, opts);
+      const data = await res.json().catch(() => ({}));
+      if (data.error) throw new Error(data.error);
+      return data;
+    }
+
+    async function loadMe() {
+      me = await api('/api/me');
+      document.getElementById('mainHeader').innerHTML = '<strong>' + (me.did || 'Loading...').slice(0, 40) + '...</strong>';
+    }
+
+    async function loadConversations() {
+      const data = await api('/api/conversations');
+      conversations = data.conversations || [];
+      renderConvList();
+    }
+
+    async function loadContacts() {
+      const data = await api('/api/contacts');
+      contacts = data.contacts || [];
+      renderContactList();
+    }
+
+    async function loadChannels() {
+      try {
+        const data = await api('/api/channels');
+        channels = data.channels || [];
+        renderChannelList();
+      } catch (e) {
+        channels = [];
+        renderChannelList();
+      }
+    }
+
+    function renderChannelList() {
+      const el = document.getElementById('channelList');
+      if (!el) return;
+      if (!channels.length) {
+        el.innerHTML = '<div class="empty">\u6682\u65E0\u9891\u9053</div>';
+        return;
+      }
+      el.innerHTML = channels.map(c => {
+        const name = (c.target_did || c.conversation_id || '').slice(0, 24) + (c.target_did ? '...' : '');
+        const convId = (c.conversation_id || '').replace(/"/g, '&quot;');
+        const targetDid = (c.target_did || '').replace(/"/g, '&quot;');
+        return '<div class="list-item channel-item' + (currentConv?.conversation_id === c.conversation_id && currentConv?.isChannel ? ' active' : '') + '" data-id="' + convId + '" data-did="' + targetDid + '">\u9891\u9053 ' + name + '</div>';
+      }).join('');
+      el.querySelectorAll('.channel-item').forEach(n => {
+        n.addEventListener('click', () => selectChannel(n.dataset.id, n.dataset.did));
+      });
+    }
+
+    async function selectChannel(convId, targetDid) {
+      currentConv = { conversation_id: convId, target_did: targetDid, isChannel: true };
+      renderConvList();
+      renderChannelList();
+      showPanel('dmPanel');
+      document.getElementById('inputArea').style.display = 'flex';
+      document.getElementById('mainHeader').innerHTML = '<strong>\u9891\u9053 ' + (targetDid || convId).slice(0, 40) + '</strong>';
+      await loadMessages(convId);
+    }
+
+    async function loadProfile() {
+      try {
+        const p = await api('/api/profile');
+        document.getElementById('profileDisplayName').value = p.display_name || '';
+        document.getElementById('profileBio').value = p.bio || '';
+        document.getElementById('profileTags').value = (p.tags || []).join(', ');
+        document.getElementById('profileCapabilities').value = (p.capabilities || []).join(', ');
+      } catch (e) {
+        document.getElementById('profilePanel').querySelector('.panel-content').innerHTML = '<div class="error">\u52A0\u8F7D\u5931\u8D25: ' + (e.message || '') + '</div>';
+      }
+    }
+
+    async function saveProfile() {
+      try {
+        const display_name = document.getElementById('profileDisplayName').value.trim();
+        const bio = document.getElementById('profileBio').value.trim();
+        const tags = document.getElementById('profileTags').value.split(',').map(s => s.trim()).filter(Boolean);
+        const capabilities = document.getElementById('profileCapabilities').value.split(',').map(s => s.trim()).filter(Boolean);
+        await api('/api/profile', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ display_name, bio, tags, capabilities })
+        });
+        alert('\u4FDD\u5B58\u6210\u529F');
+      } catch (e) {
+        alert('\u4FDD\u5B58\u5931\u8D25: ' + e.message);
+      }
+    }
+
+    async function publishFeed() {
+      const text = document.getElementById('feedText').value.trim();
+      if (!text) return;
+      try {
+        await api('/api/feed/publish', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ text })
+        });
+        document.getElementById('feedText').value = '';
+        await loadFeedTimeline();
+      } catch (e) {
+        alert('\u53D1\u5E03\u5931\u8D25: ' + e.message);
+      }
+    }
+
+    async function loadFeedTimeline() {
+      const el = document.getElementById('feedTimeline');
+      try {
+        const data = await api('/api/feed/by_did?did=' + encodeURIComponent(me.did || '') + '&limit=30');
+        const posts = (data.posts || []).slice(0, 30);
+        if (!posts.length) {
+          el.innerHTML = '<div class="empty">\u6682\u65E0\u52A8\u6001\uFF0C\u53BB\u53D1\u5E03\u4E00\u6761\u5427</div>';
+          return;
+        }
+        el.innerHTML = posts.map(p => {
+          const time = new Date(p.ts_ms).toLocaleString();
+          const text = (p.text || '').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+          return '<div class="msg" style="margin-bottom:12px"><div class="meta">' + time + '</div>' + text + '</div>';
+        }).join('');
+      } catch (e) {
+        el.innerHTML = '<div class="error">\u52A0\u8F7D\u5931\u8D25: ' + (e.message || '') + '</div>';
+      }
+    }
+
+    async function discoverChannels() {
+      showPanel('discoverPanel');
+      document.getElementById('mainHeader').innerHTML = '<strong>\u53D1\u73B0\u9891\u9053</strong>';
+      await doDiscoverChannels();
+    }
+
+    async function doDiscoverChannels() {
+      const el = document.getElementById('discoverChannelList');
+      const q = document.getElementById('discoverQuery')?.value?.trim() || '';
+      try {
+        const url = '/api/channels/discover?limit=20' + (q ? '&q=' + encodeURIComponent(q) : '');
+        const data = await api(url);
+        const list = data.channels || [];
+        if (!list.length) {
+          el.innerHTML = '<div class="empty">\u6682\u65E0\u9891\u9053</div>';
+          return;
+        }
+        el.innerHTML = list.map(ch => {
+          const alias = (ch.alias || '').replace(/"/g, '&quot;');
+          const name = (ch.name || ch.alias || '').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+          const desc = (ch.description || '').slice(0, 60).replace(/</g, '&lt;');
+          return '<div class="msg" style="margin-bottom:12px"><strong>' + name + '</strong> <code>' + alias + '</code><div class="sub">' + desc + '</div><button class="btn-secondary join-channel-btn" data-alias="' + alias.replace(/@ch//g, '') + '" style="margin-top:6px">\u52A0\u5165</button></div>';
+        }).join('');
+        el.querySelectorAll('.join-channel-btn').forEach(btn => {
+          btn.addEventListener('click', async () => {
+            const alias = btn.dataset.alias;
+            try {
+              await api('/api/channels/join', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ alias }) });
+              alert('\u52A0\u5165\u6210\u529F');
+              await loadChannels();
+              showPanel('dmPanel');
+              document.getElementById('mainHeader').innerHTML = '<strong>\u9891\u9053</strong>';
+            } catch (e) {
+              alert('\u52A0\u5165\u5931\u8D25: ' + e.message);
+            }
+          });
+        });
+      } catch (e) {
+        el.innerHTML = '<div class="error">\u52A0\u8F7D\u5931\u8D25: ' + (e.message || '') + '</div>';
+      }
+    }
+
+    function showCreateChannel() {
+      showPanel('createChannelPanel');
+      document.getElementById('mainHeader').innerHTML = '<strong>\u521B\u5EFA\u9891\u9053</strong>';
+      document.getElementById('createChannelName').value = '';
+      document.getElementById('createChannelAlias').value = '';
+      document.getElementById('createChannelDesc').value = '';
+    }
+
+    async function createChannelSubmit() {
+      const name = document.getElementById('createChannelName').value.trim();
+      if (!name) { alert('\u8BF7\u8F93\u5165\u9891\u9053\u540D\u79F0'); return; }
+      const alias = document.getElementById('createChannelAlias').value.trim() || undefined;
+      const description = document.getElementById('createChannelDesc').value.trim() || undefined;
+      try {
+        const data = await api('/api/channels/create', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ name, alias, description })
+        });
+        alert('\u521B\u5EFA\u6210\u529F');
+        await loadChannels();
+        if (data.conversation_id) selectChannel(data.conversation_id, data.alias || '');
+        showPanel('dmPanel');
+      } catch (e) {
+        alert('\u521B\u5EFA\u5931\u8D25: ' + e.message);
+      }
+    }
+
+    function renderContactList() {
+      const el = document.getElementById('contactList');
+      if (!el) return;
+      if (!contacts.length) {
+        el.innerHTML = '<div class="empty">\u6682\u65E0\u8054\u7CFB\u4EBA</div>';
+        return;
+      }
+      el.innerHTML = contacts.map(c => {
+        const name = (c.display_name || c.alias || c.did || '').slice(0, 28);
+        const did = (c.did || '').replace(/"/g, '&quot;');
+        const convId = (c.conversation_id || '').replace(/"/g, '&quot;');
+        return '<div class="list-item contact-item" data-did="' + did + '" data-conv-id="' + convId + '">' + name + '</div>';
+      }).join('');
+      el.querySelectorAll('.contact-item').forEach(n => {
+        n.addEventListener('click', () => {
+          const did = n.dataset.did;
+          const convId = n.dataset.convId;
+          if (did) openConversationWithDid(did, convId);
+        });
+      });
+    }
+
+    async function openConversationWithDid(targetDid, knownConvId) {
+      if (!targetDid) return;
+      if (knownConvId) {
+        await loadConversations();
+        selectConv(knownConvId, targetDid);
+        return;
+      }
+      try {
+        const data = await api('/api/open', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ target_did: targetDid, send_contact_request: false })
+        });
+        if (data.conversation_id) {
+          await loadConversations();
+          selectConv(data.conversation_id, targetDid);
+        }
+      } catch (e) {
+        alert('\u6253\u5F00\u4F1A\u8BDD\u5931\u8D25: ' + e.message);
+      }
+    }
+
+    function renderConvList() {
+      const el = document.getElementById('convList');
+      if (!conversations.length) {
+        el.innerHTML = '<div class="empty">\u6682\u65E0\u4F1A\u8BDD<br>\u8F93\u5165 DID \u65B0\u5EFA</div>';
+        return;
+      }
+      el.innerHTML = conversations.map(c => {
+        const name = c.display_name || c.target_did?.slice(0, 24) + '...';
+        const sub = c.trusted ? 'DM' : '\u5F85\u6279\u51C6';
+        return '<div class="list-item' + (currentConv?.conversation_id === c.conversation_id ? ' active' : '') + '" data-id="' + c.conversation_id + '" data-did="' + (c.target_did||'') + '">' + name + '<div class="sub">' + sub + '</div></div>';
+      }).join('');
+      el.querySelectorAll('.list-item').forEach(n => n.addEventListener('click', () => selectConv(n.dataset.id, n.dataset.did)));
+    }
+
+    async function selectConv(convId, targetDid) {
+      currentConv = { conversation_id: convId, target_did: targetDid, isChannel: false };
+      renderConvList();
+      renderChannelList();
+      showPanel('dmPanel');
+      document.getElementById('inputArea').style.display = 'flex';
+      document.getElementById('mainHeader').innerHTML = '<strong>' + (targetDid || convId).slice(0, 50) + '</strong>';
+      await loadMessages(convId);
+    }
+
+    async function loadMessages(convId, since) {
+      const el = document.getElementById('messages');
+      if (!since) el.innerHTML = '';
+      try {
+        const data = await api('/api/conversations/' + encodeURIComponent(convId) + '/messages' + (since ? '?since_seq=' + since : ''));
+        const msgs = data.messages || [];
+        msgs.forEach(m => {
+          const div = document.createElement('div');
+          div.className = 'msg ' + (m.isMe ? 'me' : 'other');
+          const meta = new Date(m.ts_ms).toLocaleString() + ' ' + (m.isMe ? '(\u6211)' : (m.sender_did || '').slice(0, 16) + '...');
+          let body = '';
+          if (m.schema === 'pingagent.text@1' && m.payload?.text) body = m.payload.text;
+          else body = JSON.stringify(m.payload || m).slice(0, 200);
+          div.innerHTML = '<div class="meta">' + meta + '</div>' + body.replace(/</g, '&lt;').replace(/>/g, '&gt;');
+          el.appendChild(div);
+        });
+        if (!since && msgs.length === 0) el.innerHTML = '<div class="empty">\u6682\u65E0\u6D88\u606F</div>';
+        el.scrollTop = el.scrollHeight;
+      } catch (e) {
+        el.innerHTML = '<div class="error">\u52A0\u8F7D\u5931\u8D25: ' + (e.message || '\u672A\u77E5\u9519\u8BEF') + '</div>';
+      }
+    }
+
+    async function sendMessage() {
+      const input = document.getElementById('msgInput');
+      const text = input.value.trim();
+      if (!text || !currentConv) return;
+      try {
+        await api('/api/conversations/' + encodeURIComponent(currentConv.conversation_id) + '/send', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ text })
+        });
+        input.value = '';
+        await loadMessages(currentConv.conversation_id);
+      } catch (e) {
+        document.getElementById('messages').innerHTML += '<div class="error">\u53D1\u9001\u5931\u8D25: ' + e.message + '</div>';
+      }
+    }
+
+    async function openConversation() {
+      const input = document.getElementById('newDid');
+      const targetDid = input.value.trim();
+      if (!targetDid) return;
+      try {
+        const data = await api('/api/open', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ target_did: targetDid, send_contact_request: true })
+        });
+        input.value = '';
+        await loadConversations();
+        if (data.conversation_id) selectConv(data.conversation_id, targetDid);
+      } catch (e) {
+        alert('\u6253\u5F00\u5931\u8D25: ' + e.message);
+      }
+    }
+
+    document.getElementById('openConv').addEventListener('click', openConversation);
+    document.getElementById('newDid').addEventListener('keydown', e => { if (e.key === 'Enter') openConversation(); });
+    document.getElementById('sendBtn').addEventListener('click', sendMessage);
+    document.getElementById('msgInput').addEventListener('keydown', e => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sendMessage(); } });
+    document.getElementById('navFeed')?.addEventListener('click', () => { showPanel('feedPanel'); document.getElementById('mainHeader').innerHTML = '<strong>Feed</strong>'; loadFeedTimeline(); });
+    document.getElementById('navProfile')?.addEventListener('click', () => { showPanel('profilePanel'); document.getElementById('mainHeader').innerHTML = '<strong>\u7F16\u8F91 Profile</strong>'; loadProfile(); });
+    document.getElementById('discoverChannelsBtn')?.addEventListener('click', discoverChannels);
+    document.getElementById('createChannelBtn')?.addEventListener('click', showCreateChannel);
+    document.getElementById('publishFeedBtn')?.addEventListener('click', publishFeed);
+    document.getElementById('saveProfileBtn')?.addEventListener('click', saveProfile);
+    document.getElementById('discoverSearchBtn')?.addEventListener('click', doDiscoverChannels);
+    document.getElementById('createChannelSubmitBtn')?.addEventListener('click', createChannelSubmit);
+    document.getElementById('createChannelBackBtn')?.addEventListener('click', () => { showPanel('discoverPanel'); document.getElementById('mainHeader').innerHTML = '<strong>\u53D1\u73B0\u9891\u9053</strong>'; });
+
+    function showProfileCurrent() {
+      if (!profilePickerEl) return;
+      profilePickerEl.style.display = 'none';
+      if (profileCurrentEl) {
+        profileCurrentEl.style.display = 'flex';
+        const nameEl = document.getElementById('currentProfileName');
+        if (nameEl) nameEl.textContent = selectedProfile || '';
+      }
+      if (switchProfileBtn) {
+        switchProfileBtn.onclick = async () => {
+          await switchProfile();
+        };
+      }
+    }
+
+    async function init() {
+      if (!profilePickerEl) {
+        await loadMe();
+        await loadConversations();
+        await loadContacts();
+        return;
+      }
+      const profiles = await loadProfiles();
+      if (profiles.length === 0) {
+        document.getElementById('mainHeader').innerHTML = '<strong>\u65E0\u53EF\u7528 Profile\uFF0C\u8BF7\u5148 pingagent init</strong>';
+        return;
+      }
+      if (profiles.length === 1 && !selectedProfile) {
+        selectedProfile = profiles[0].id;
+        sessionStorage.setItem('pingagent_web_profile', selectedProfile);
+      }
+      if (selectedProfile && profiles.some(p => p.id === selectedProfile)) {
+        showProfileCurrent();
+        await loadDataForProfile();
+        return;
+      }
+      renderProfileList(profiles);
+      showProfilePicker();
+    }
+    init();
+  </script>
+</body>
+</html>`;
+}
+export {
+  startWebServer
+};