@privateclaw/privateclaw-relay 0.1.6 → 0.1.8

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.6",
+  "version": "0.1.8",
   "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",