@privateclaw/privateclaw-relay 0.1.5 → 0.1.7

package/dist/web/scripts/chat.js

@@ -1,4 +1,4 @@
-import { applyTranslations, bindLocaleSelect, onLocaleChange, t } from "./i18n.js?v=20260316-3";
+import { applyTranslations, bindLocaleSelect, onLocaleChange, t } from "./i18n.js?v=20260318-1";
 import {
   createIdentity,
   decodeBase64,
@@ -7,7 +7,7 @@ import {
   inviteUsesNonDefaultRelay,
   readFileAsAttachment,
 } from "./protocol-web.js?v=20260316-1";
-import { PrivateClawWebSessionClient } from "./session-client.js?v=20260316-1";
+import { PrivateClawWebSessionClient } from "./session-client.js?v=20260318-1";
 
 const MAX_INLINE_ATTACHMENT_BYTES = 5 * 1024 * 1024;
 const QR_SCAN_MAX_DIMENSION = 1440;
@@ -60,6 +60,7 @@ const state = {
   client: null,
   invite: null,
   messages: [],
+  expandedThinkingTraceIds: new Set(),
   commands: [],
   participants: [],
   selectedAttachments: [],
@@ -582,6 +583,7 @@ function clearObjectUrls() {
 function resetConversationState() {
   clearObjectUrls();
   state.messages = [];
+  state.expandedThinkingTraceIds.clear();
   state.commands = [];
   state.participants = [];
   state.selectedAttachments = [];
@@ -749,6 +751,145 @@ function renderAttachments(attachments) {
   return container;
 }
 
+function isThinkingTraceMessage(message) {
+  return typeof message?.thinkingStatus === "string";
+}
+
+function isThinkingTraceActive(message) {
+  return message?.thinkingStatus === "started" || message?.thinkingStatus === "streaming";
+}
+
+function createThinkingTraceBadge({ label, tone = "neutral" }) {
+  const badge = document.createElement("span");
+  badge.className = `thinking-trace-badge ${tone}`;
+  badge.textContent = label;
+  return badge;
+}
+
+function getThinkingTraceIcon(kind, { active = false, failed = false } = {}) {
+  if (failed || kind === "error") {
+    return "!";
+  }
+  if (active || kind === "thought") {
+    return "◎";
+  }
+  if (kind === "result") {
+    return "✓";
+  }
+  return "⚙";
+}
+
+function renderThinkingTraceEntry(entry) {
+  const card = document.createElement("div");
+  card.className = `thinking-trace-entry ${entry.kind || "thought"}`;
+
+  const header = document.createElement("div");
+  header.className = "thinking-trace-entry-header";
+
+  const icon = document.createElement("span");
+  icon.className = `thinking-trace-icon ${entry.kind || "thought"}`;
+  icon.textContent = getThinkingTraceIcon(entry.kind);
+
+  const title = document.createElement("strong");
+  title.textContent = entry.title || t("chat.thinkingTraceFallbackTitle");
+
+  header.append(icon, title);
+  if (entry.toolName) {
+    header.append(createThinkingTraceBadge({ label: entry.toolName, tone: "tool" }));
+  }
+
+  card.append(header);
+  if (typeof entry.text === "string" && entry.text.trim() !== "") {
+    const body = document.createElement("div");
+    body.className = "thinking-trace-entry-body";
+    body.append(renderRichText(entry.text));
+    card.append(body);
+  }
+  return card;
+}
+
+function renderThinkingTrace(message) {
+  const entries = Array.isArray(message.thinkingEntries) ? message.thinkingEntries : [];
+  const latestEntry = entries[entries.length - 1] || null;
+  const active = isThinkingTraceActive(message);
+  const failed = message.thinkingStatus === "failed";
+  const title = latestEntry?.title || t("chat.thinkingTraceFallbackTitle");
+  const previewSource =
+    (typeof message.thinkingSummary === "string" && message.thinkingSummary.trim()) ||
+    (typeof latestEntry?.text === "string" && latestEntry.text.trim()) ||
+    t("chat.pendingLabel");
+
+  const card = document.createElement(entries.length > 0 ? "details" : "div");
+  card.className = `thinking-trace-card${active ? " active" : ""}${failed ? " failed" : ""}`;
+  if (card instanceof HTMLDetailsElement) {
+    card.open = active && state.expandedThinkingTraceIds.has(message.id);
+    card.addEventListener("toggle", () => {
+      if (card.open && active) {
+        state.expandedThinkingTraceIds.add(message.id);
+      } else {
+        state.expandedThinkingTraceIds.delete(message.id);
+      }
+    });
+  }
+
+  const summary = document.createElement(entries.length > 0 ? "summary" : "div");
+  summary.className = "thinking-trace-summary";
+
+  const header = document.createElement("div");
+  header.className = "thinking-trace-header";
+
+  const headerMain = document.createElement("div");
+  headerMain.className = "thinking-trace-header-main";
+
+  const icon = document.createElement("span");
+  icon.className = `thinking-trace-icon ${failed ? "error" : latestEntry?.kind || "thought"}${active ? " active" : ""}`;
+  icon.textContent = getThinkingTraceIcon(latestEntry?.kind, { active, failed });
+
+  const heading = document.createElement("strong");
+  heading.textContent = title;
+
+  headerMain.append(icon, heading);
+  header.append(headerMain);
+
+  const badges = document.createElement("div");
+  badges.className = "thinking-trace-badges";
+  badges.append(
+    createThinkingTraceBadge({
+      label: active
+        ? t("chat.thinkingTraceLive")
+        : failed
+          ? t("chat.thinkingTraceFailed")
+          : t("chat.thinkingTraceDone"),
+      tone: failed ? "error" : active ? "live" : "done",
+    }),
+  );
+  if (latestEntry?.toolName) {
+    badges.append(createThinkingTraceBadge({ label: latestEntry.toolName, tone: "tool" }));
+  }
+  badges.append(createThinkingTraceBadge({
+    label: t("chat.thinkingTraceSteps", { count: String(entries.length) }),
+  }));
+  header.append(badges);
+
+  const preview = document.createElement("p");
+  preview.className = "thinking-trace-preview";
+  preview.textContent = previewSource;
+
+  summary.append(header, preview);
+  card.append(summary);
+
+  if (entries.length > 0) {
+    const history = document.createElement("div");
+    history.className = "thinking-trace-history";
+    for (const entry of entries) {
+      history.append(renderThinkingTraceEntry(entry));
+    }
+    card.append(history);
+  }
+
+  return card;
+}
+
 function upsertMessage(message) {
   if (message.isPending && message.replyTo) {
     const repliedIndex = state.messages.findIndex(
@@ -768,6 +909,14 @@ function upsertMessage(message) {
 
   const existingIndex = state.messages.findIndex((item) => item.id === message.id);
   if (existingIndex >= 0) {
+    if (isThinkingTraceMessage(message) && !isThinkingTraceActive(message) && !(message.thinkingEntries?.length > 0)) {
+      state.messages.splice(existingIndex, 1);
+      state.expandedThinkingTraceIds.delete(message.id);
+      return;
+    }
+    if (isThinkingTraceMessage(message) && !isThinkingTraceActive(message)) {
+      state.expandedThinkingTraceIds.delete(message.id);
+    }
     const existingMessage = state.messages[existingIndex];
     state.messages[existingIndex] = {
       ...message,
@@ -781,12 +930,17 @@ function upsertMessage(message) {
     return;
   }
 
+  if (isThinkingTraceMessage(message) && !isThinkingTraceActive(message) && !(message.thinkingEntries?.length > 0)) {
+    state.expandedThinkingTraceIds.delete(message.id);
+    return;
+  }
+
   if (message.isPending) {
     state.messages.push(message);
     return;
   }
 
-  if (message.replyTo) {
+  if (message.replyTo && !isThinkingTraceMessage(message)) {
     const repliedIndex = state.messages.findIndex(
       (item) => item.id === message.replyTo && item.sender === "user",
     );
@@ -800,6 +954,9 @@ function upsertMessage(message) {
       (item) => !(item.sender === "assistant" && item.isPending && item.replyTo === message.replyTo),
     );
   }
+  if (isThinkingTraceMessage(message) && !isThinkingTraceActive(message)) {
+    state.expandedThinkingTraceIds.delete(message.id);
+  }
   state.messages.push(message);
 }
 
@@ -822,6 +979,9 @@ function renderMessages() {
 
     const bubble = document.createElement("div");
     bubble.className = "message-bubble";
+    if (isThinkingTraceMessage(message)) {
+      bubble.classList.add("thinking-bubble");
+    }
 
     const label = document.createElement("span");
     label.className = "message-label";
@@ -838,7 +998,9 @@ function renderMessages() {
 
     const body = document.createElement("div");
     body.className = "message-text";
-    if (message.isPending && message.sender !== "user") {
+    if (isThinkingTraceMessage(message)) {
+      body.append(renderThinkingTrace(message));
+    } else if (message.isPending && message.sender !== "user") {
       const pendingLabel = document.createElement("p");
       pendingLabel.textContent = t("chat.pendingLabel");
       body.append(pendingLabel, createPendingIndicator());

package/dist/web/scripts/i18n.js

@@ -261,6 +261,11 @@ const BUNDLES = {
       youLabel: "You",
       peerLabelFallback: "Participant",
       pendingLabel: "Thinking…",
+      thinkingTraceFallbackTitle: "Thinking",
+      thinkingTraceLive: "Live",
+      thinkingTraceDone: "Done",
+      thinkingTraceFailed: "Failed",
+      thinkingTraceSteps: "{count} steps",
       mutedLabel: "Bot muted",
       commandSourceOpenclaw: "OpenClaw",
       commandSourcePlugin: "Plugin",
@@ -527,6 +532,11 @@ const BUNDLES = {
       youLabel: "你",
       peerLabelFallback: "成员",
       pendingLabel: "思考中…",
+      thinkingTraceFallbackTitle: "思考过程",
+      thinkingTraceLive: "进行中",
+      thinkingTraceDone: "已完成",
+      thinkingTraceFailed: "失败",
+      thinkingTraceSteps: "{count} 步",
       mutedLabel: "机器人已静音",
       commandSourceOpenclaw: "OpenClaw",
       commandSourcePlugin: "插件",
@@ -793,6 +803,11 @@ const BUNDLES = {
       youLabel: "你",
       peerLabelFallback: "成員",
       pendingLabel: "思考中…",
+      thinkingTraceFallbackTitle: "思考過程",
+      thinkingTraceLive: "進行中",
+      thinkingTraceDone: "已完成",
+      thinkingTraceFailed: "失敗",
+      thinkingTraceSteps: "{count} 步",
       mutedLabel: "機器人已靜音",
       commandSourceOpenclaw: "OpenClaw",
       commandSourcePlugin: "外掛",

package/dist/web/scripts/session-client.js

@@ -59,6 +59,52 @@ function parseParticipants(value) {
     }));
 }
 
+function parseThinkingStatus(value) {
+  switch (value) {
+    case "started":
+    case "streaming":
+    case "completed":
+    case "failed":
+      return value;
+    default:
+      return "completed";
+  }
+}
+
+function parseThinkingEntryKind(value) {
+  switch (value) {
+    case "thought":
+    case "action":
+    case "result":
+    case "error":
+      return value;
+    default:
+      return null;
+  }
+}
+
+function parseThinkingEntries(value) {
+  if (!Array.isArray(value)) {
+    return [];
+  }
+  return value
+    .filter((item) => item && typeof item === "object")
+    .flatMap((item) => {
+      const kind = parseThinkingEntryKind(item.kind);
+      if (!kind) {
+        return [];
+      }
+      return [{
+        id: typeof item.id === "string" ? item.id : createMessageId("thinking-entry"),
+        kind,
+        title: typeof item.title === "string" ? item.title : "",
+        text: typeof item.text === "string" ? item.text : "",
+        sentAt: normalizeTimestamp(item.sentAt),
+        toolName: typeof item.toolName === "string" ? item.toolName : null,
+      }];
+    });
+}
+
 export class PrivateClawWebSessionClient extends EventTarget {
   constructor(invite, { identity }) {
     super();
@@ -263,6 +309,7 @@ export class PrivateClawWebSessionClient extends EventTarget {
           appVersion: "privateclaw_web/0.1.0",
           appId: this.identity.appId,
           deviceLabel: "PrivateClaw Web",
+          supportsThinkingTrace: true,
           ...(this.identity.displayName ? { displayName: this.identity.displayName } : {}),
           sentAt: new Date().toISOString(),
         });
@@ -334,6 +381,23 @@ export class PrivateClawWebSessionClient extends EventTarget {
         });
         return;
       }
+      case "thinking_message": {
+        this.#dispatch("message", {
+          message: {
+            id: typeof payload.messageId === "string" ? payload.messageId : this.#nextLocalMessageId(),
+            sender: "assistant",
+            text: "",
+            sentAt: normalizeTimestamp(payload.sentAt),
+            replyTo: typeof payload.replyTo === "string" ? payload.replyTo : null,
+            isPending: false,
+            attachments: [],
+            thinkingStatus: parseThinkingStatus(payload.status),
+            thinkingSummary: typeof payload.summary === "string" ? payload.summary : "",
+            thinkingEntries: parseThinkingEntries(payload.entries),
+          },
+        });
+        return;
+      }
       case "participant_message": {
         const senderAppId = typeof payload.senderAppId === "string" ? payload.senderAppId : "unknown-app";
         this.#dispatch("message", {
@@ -429,6 +493,7 @@ export class PrivateClawWebSessionClient extends EventTarget {
           appVersion: "privateclaw_web/0.1.0",
           appId: this.identity.appId,
           deviceLabel: "PrivateClaw Web",
+          supportsThinkingTrace: true,
           ...(this.identity.displayName ? { displayName: this.identity.displayName } : {}),
           sentAt: new Date().toISOString(),
         });

package/dist/web/styles.css

@@ -984,6 +984,11 @@ a:focus {
   border-color: rgba(255, 127, 159, 0.28);
 }
 
+.message-bubble.thinking-bubble {
+  background: linear-gradient(180deg, rgba(143, 125, 255, 0.22), rgba(62, 217, 255, 0.08));
+  border-color: rgba(143, 125, 255, 0.24);
+}
+
 .message-text {
   color: var(--text);
   line-height: 1.6;
@@ -1020,6 +1025,181 @@ a:focus {
   text-decoration: underline;
 }
 
+.thinking-trace-card {
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 18px;
+  background: rgba(7, 12, 26, 0.28);
+  padding: 12px;
+}
+
+details.thinking-trace-card > summary {
+  list-style: none;
+  cursor: pointer;
+}
+
+details.thinking-trace-card > summary::-webkit-details-marker {
+  display: none;
+}
+
+.thinking-trace-card.active {
+  border-color: rgba(143, 125, 255, 0.3);
+}
+
+.thinking-trace-card.failed {
+  border-color: rgba(255, 127, 159, 0.38);
+  background: rgba(62, 10, 24, 0.26);
+}
+
+.thinking-trace-summary {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.thinking-trace-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.thinking-trace-header-main {
+  min-width: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.thinking-trace-header-main strong {
+  font-size: 0.98rem;
+}
+
+.thinking-trace-icon {
+  width: 26px;
+  height: 26px;
+  border-radius: 999px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  font-size: 0.92rem;
+  background: rgba(255, 255, 255, 0.08);
+  color: var(--text);
+}
+
+.thinking-trace-icon.thought,
+.thinking-trace-icon.active {
+  background: rgba(143, 125, 255, 0.2);
+  color: rgba(230, 224, 255, 0.96);
+}
+
+.thinking-trace-icon.active {
+  animation: pulse 1.2s ease-in-out infinite;
+}
+
+.thinking-trace-icon.action {
+  background: rgba(62, 217, 255, 0.18);
+  color: rgba(204, 247, 255, 0.96);
+}
+
+.thinking-trace-icon.result {
+  background: rgba(92, 255, 196, 0.18);
+  color: rgba(218, 255, 241, 0.98);
+}
+
+.thinking-trace-icon.error {
+  background: rgba(255, 127, 159, 0.22);
+  color: rgba(255, 230, 237, 0.98);
+}
+
+.thinking-trace-preview {
+  margin: 0;
+  color: var(--text-muted);
+  white-space: pre-wrap;
+}
+
+.thinking-trace-badges {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+.thinking-trace-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 10px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.08);
+  color: var(--text-muted);
+  font-size: 0.82rem;
+  font-weight: 600;
+}
+
+.thinking-trace-badge.live {
+  background: rgba(143, 125, 255, 0.16);
+  color: rgba(233, 228, 255, 0.96);
+}
+
+.thinking-trace-badge.done {
+  background: rgba(92, 255, 196, 0.14);
+  color: rgba(220, 255, 243, 0.98);
+}
+
+.thinking-trace-badge.error {
+  background: rgba(255, 127, 159, 0.18);
+  color: rgba(255, 233, 239, 0.98);
+}
+
+.thinking-trace-badge.tool {
+  background: rgba(62, 217, 255, 0.16);
+  color: rgba(208, 247, 255, 0.98);
+}
+
+.thinking-trace-history {
+  margin-top: 12px;
+  padding-top: 12px;
+  border-top: 1px solid rgba(255, 255, 255, 0.08);
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.thinking-trace-entry {
+  border-radius: 16px;
+  padding: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  background: rgba(255, 255, 255, 0.04);
+}
+
+.thinking-trace-entry.thought {
+  border-color: rgba(143, 125, 255, 0.2);
+}
+
+.thinking-trace-entry.action {
+  border-color: rgba(62, 217, 255, 0.2);
+}
+
+.thinking-trace-entry.result {
+  border-color: rgba(92, 255, 196, 0.2);
+}
+
+.thinking-trace-entry.error {
+  border-color: rgba(255, 127, 159, 0.24);
+}
+
+.thinking-trace-entry-header {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.thinking-trace-entry-body {
+  margin-top: 8px;
+}
+
 .mermaid-card {
   border: 1px solid var(--line);
   border-radius: 16px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@privateclaw/privateclaw-relay",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "description": "Blind WebSocket relay for PrivateClaw encrypted sessions with local CLI startup and optional Tailscale Funnel or Cloudflare Tunnel exposure",
   "type": "module",
   "main": "./dist/index.js",