@firstpick/pi-package-webui 0.5.3 → 0.5.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@firstpick/pi-package-webui",
-  "version": "0.5.3",
+  "version": "0.5.4",
   "description": "Pi Web UI companion package with a local browser UI CLI plus /webui-start and /webui-status commands.",
   "license": "MIT",
   "homepage": "https://github.com/Firstp1ck/npm-packages/tree/main/pi-package-webui#readme",

package/public/app.js

@@ -516,6 +516,9 @@ const STREAM_OUTPUT_TOOLCALL_GUARD_MS = 220;
 const STREAM_OUTPUT_MIN_VISIBLE_MS = 900;
 const TOOL_LIVE_UPDATE_THROTTLE_MS = 80;
 const UNEXPOSED_THINKING_TEXT = "No thinking content was exposed by the provider.";
+const THINKING_FORMAT_OPEN_TAG_REGEX = /^<think\b[^>]*>/i;
+const THINKING_FORMAT_CLOSE_TAG_REGEX = /<\/think\s*>/i;
+const CHANNEL_THINKING_FORMAT_OPEN_TAG_REGEX = /^<\|([a-z][\w-]*)>/i;
 const TODO_PROGRESS_LINE_REGEX = /^\s*(?:(?:[-*]|\d+[.)])\s*)?\[(?: |x|X|-)\]\s+.+$/;
 const TODO_PROGRESS_PARTIAL_LINE_REGEX = /^\s*(?:(?:[-*]|\d+[.)])\s*)?\[(?: |x|X|-)?\]?\s*.*$/;
 const CHAT_SCROLL_KEYS = new Set(["ArrowDown", "ArrowUp", "End", "Home", "PageDown", "PageUp", " "]);
@@ -13446,6 +13449,89 @@ function visibleThinkingText(text) {
   return value;
 }
 
+function escapeRegExp(value) {
+  return String(value).replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+
+function isPartialThinkingFormatOpenTag(text) {
+  const value = String(text || "").trimStart().toLowerCase();
+  if (!value) return false;
+  if ("<think>".startsWith(value)) return true;
+  if (value === "<|" || /^<\|[a-z][\w-]*$/i.test(value)) return true;
+  return /^<think\b[^>]*$/i.test(value);
+}
+
+function stripPartialThinkingFormatClose(text, closeTag = "</think>") {
+  const value = String(text || "");
+  const lower = value.toLowerCase();
+  const expected = String(closeTag || "").toLowerCase();
+  const start = lower.lastIndexOf("<");
+  if (start < 0) return value;
+  const partial = lower.slice(start).trimEnd();
+  return expected.startsWith(partial) ? value.slice(0, start) : value;
+}
+
+function stripThinkingFormatOutputSeparator(text) {
+  return String(text || "").replace(/^(?:[ \t]*\r?\n)+/, "").replace(/^[ \t]+/, "");
+}
+
+function joinedThinkingFormatParts(parts) {
+  return parts.map((part) => String(part || "")).filter((part) => part.length > 0).join("\n\n");
+}
+
+function thinkingFormatOpenMatch(text) {
+  const value = String(text || "");
+  const think = THINKING_FORMAT_OPEN_TAG_REGEX.exec(value);
+  if (think) return { raw: think[0], closeRegex: THINKING_FORMAT_CLOSE_TAG_REGEX, closeTag: "</think>" };
+  const channel = CHANNEL_THINKING_FORMAT_OPEN_TAG_REGEX.exec(value);
+  if (!channel) return null;
+  const name = channel[1];
+  return { raw: channel[0], closeRegex: new RegExp(`<${escapeRegExp(name)}\\|>`, "i"), closeTag: `<${name}|>` };
+}
+
+function splitThinkingFormatText(text, { streaming = false } = {}) {
+  let rest = String(text ?? "").trimStart();
+  if (!rest) return null;
+  if (!thinkingFormatOpenMatch(rest)) {
+    return streaming && isPartialThinkingFormatOpenTag(rest)
+      ? { hasThinkingFormat: true, thinkingText: "", finalText: "", complete: false }
+      : null;
+  }
+
+  const thinkingParts = [];
+  let open = thinkingFormatOpenMatch(rest);
+  while (open) {
+    const afterOpen = rest.slice(open.raw.length);
+    const close = open.closeRegex.exec(afterOpen);
+    if (!close) {
+      thinkingParts.push(streaming ? stripPartialThinkingFormatClose(afterOpen, open.closeTag) : afterOpen);
+      return { hasThinkingFormat: true, thinkingText: joinedThinkingFormatParts(thinkingParts), finalText: "", complete: false };
+    }
+
+    thinkingParts.push(afterOpen.slice(0, close.index));
+    rest = afterOpen.slice(close.index + close[0].length);
+    const next = rest.trimStart();
+    open = thinkingFormatOpenMatch(next);
+    if (open) {
+      rest = next;
+      continue;
+    }
+    break;
+  }
+
+  return {
+    hasThinkingFormat: true,
+    thinkingText: joinedThinkingFormatParts(thinkingParts),
+    finalText: stripThinkingFormatOutputSeparator(rest),
+    complete: true,
+  };
+}
+
+function appendThinkingFormatDisplayMessages(displayMessages, base, parsed) {
+  const thinking = visibleThinkingText(parsed?.thinkingText || "");
+  if (thinking) displayMessages.push({ ...base, role: "thinking", title: "thinking", content: thinking, thinking });
+}
+
 function isAssistantToolCallPart(part) {
   return !!(part && typeof part === "object" && (part.type === "toolCall" || part.toolCall));
 }
@@ -13495,6 +13581,13 @@ function assistantDisplayMessages(message) {
   const base = { timestamp: message.timestamp };
   const content = message.content;
   if (typeof content === "string") {
+    const parsed = splitThinkingFormatText(content);
+    if (parsed?.hasThinkingFormat) {
+      const displayMessages = [];
+      appendThinkingFormatDisplayMessages(displayMessages, base, parsed);
+      if (parsed.finalText.trim()) displayMessages.push({ ...message, title: "final output", content: parsed.finalText });
+      return displayMessages;
+    }
     return content.trim() ? [{ ...message, title: "final output" }] : [];
   }
   if (!Array.isArray(content)) {
@@ -13518,6 +13611,16 @@ function assistantDisplayMessages(message) {
       displayMessages.push({ ...base, role: "toolCall", title: `tool call: ${toolName}`, toolName, toolCallId, arguments: args, content: args });
       continue;
     }
+    const primitiveText = part !== undefined && part !== null && typeof part !== "object" ? String(part) : "";
+    const textForThinkingFormat = primitiveText || (part && typeof part === "object" && (part.type === "text" || typeof part.text === "string") ? assistantTextPartText(part) || part.text : "");
+    if (textForThinkingFormat) {
+      const parsed = splitThinkingFormatText(textForThinkingFormat);
+      if (parsed?.hasThinkingFormat) {
+        appendThinkingFormatDisplayMessages(displayMessages, base, parsed);
+        if (parsed.finalText.trim() && !assistantHasToolCallAfter(content, index)) finalParts.push(part && typeof part === "object" ? { ...part, type: "text", text: parsed.finalText } : { type: "text", text: parsed.finalText });
+        continue;
+      }
+    }
     const finalPart = assistantFinalOutputPart(part);
     if (finalPart) {
       if (!assistantHasToolCallAfter(content, index)) finalParts.push(finalPart);
@@ -16683,6 +16786,12 @@ function removeStreamBubble() {
   renderRunIndicator({ scroll: false });
 }
 
+function streamRenderableAssistantText() {
+  const assistantText = stripTodoProgressLines(streamRawText, { streaming: true });
+  const parsed = splitThinkingFormatText(assistantText, { streaming: true });
+  return parsed?.hasThinkingFormat ? stripTodoProgressLines(parsed.finalText, { streaming: true }) : assistantText;
+}
+
 function scheduleStreamBubbleHide() {
   if (!streamBubble) return;
   const visibleForMs = streamBubbleVisibleSince ? performance.now() - streamBubbleVisibleSince : STREAM_OUTPUT_MIN_VISIBLE_MS;
@@ -16690,16 +16799,27 @@ function scheduleStreamBubbleHide() {
   clearTimeout(streamBubbleHideTimer);
   streamBubbleHideTimer = setTimeout(() => {
     streamBubbleHideTimer = null;
-    if (stripTodoProgressLines(streamRawText, { streaming: true }) || !streamBubble) return;
+    if (streamRenderableAssistantText() || !streamBubble) return;
     removeStreamBubble();
   }, delayMs);
 }
 
+function syncStreamingThinkingFormat(assistantText) {
+  const parsed = splitThinkingFormatText(assistantText, { streaming: true });
+  if (!parsed?.hasThinkingFormat) return null;
+  const thinking = visibleThinkingText(parsed.thinkingText);
+  if (thinking) setStreamingThinkingText(thinking);
+  if (parsed.complete && streamThinkingBubble) streamThinkingBubble.classList.add("complete");
+  return parsed;
+}
+
 function renderStreamingAssistantText() {
   const assistantText = stripTodoProgressLines(streamRawText, { streaming: true });
-  if (assistantText) {
+  const thinkingFormat = syncStreamingThinkingFormat(assistantText);
+  const finalText = thinkingFormat?.hasThinkingFormat ? stripTodoProgressLines(thinkingFormat.finalText, { streaming: true }) : assistantText;
+  if (finalText) {
     ensureStreamBubble();
-    renderStreamingMarkdown(streamText, assistantText);
+    renderStreamingMarkdown(streamText, finalText);
   } else {
     scheduleStreamBubbleHide();
   }
@@ -16793,26 +16913,39 @@ function assistantStreamingMessage(event) {
   return partial?.role === "assistant" ? partial : null;
 }
 
-function assistantTextFromMessage(message) {
+function assistantTextFromMessage(message, { streaming = false } = {}) {
+  void streaming;
   const content = message?.content;
   if (typeof content === "string") return content;
   if (!Array.isArray(content)) return null;
   const parts = [];
   for (let index = 0; index < content.length; index += 1) {
     const part = content[index];
-    const text = assistantTextPartText(part);
+    const text = assistantTextPartText(part) || (part && typeof part === "object" && typeof part.text === "string" ? part.text : part !== undefined && part !== null && typeof part !== "object" ? String(part) : "");
     if (text && !assistantHasToolCallAfter(content, index)) parts.push(text);
   }
   return parts.length ? parts.join("\n\n") : "";
 }
 
-function assistantThinkingTextFromMessage(message) {
+function assistantThinkingTextFromMessage(message, { streaming = false } = {}) {
   const content = message?.content;
+  if (typeof content === "string") {
+    const parsed = splitThinkingFormatText(content, { streaming });
+    return parsed?.hasThinkingFormat ? visibleThinkingText(parsed.thinkingText) : null;
+  }
   if (!Array.isArray(content)) return null;
-  const parts = content
-    .filter((part) => part && typeof part === "object" && (part.type === "thinking" || typeof part.thinking === "string"))
-    .map((part) => visibleThinkingText(assistantThinkingText(part)))
-    .filter((text) => text.trim());
+  const parts = [];
+  for (const part of content) {
+    if (part && typeof part === "object" && (part.type === "thinking" || typeof part.thinking === "string")) {
+      const thinking = visibleThinkingText(assistantThinkingText(part));
+      if (thinking.trim()) parts.push(thinking);
+      continue;
+    }
+    const text = assistantTextPartText(part) || (part && typeof part === "object" && typeof part.text === "string" ? part.text : part !== undefined && part !== null && typeof part !== "object" ? String(part) : "");
+    const parsed = splitThinkingFormatText(text, { streaming });
+    const thinking = parsed?.hasThinkingFormat ? visibleThinkingText(parsed.thinkingText) : "";
+    if (thinking.trim()) parts.push(thinking);
+  }
   return parts.length ? parts.join("\n\n") : "";
 }
 
@@ -16826,7 +16959,7 @@ function setStreamingThinkingText(text) {
 
 function syncStreamingThinkingFromMessage(event, { placeholder = "" } = {}) {
   if (!thinkingOutputVisible) return true;
-  const text = assistantThinkingTextFromMessage(assistantStreamingMessage(event));
+  const text = assistantThinkingTextFromMessage(assistantStreamingMessage(event), { streaming: true });
   if (text === null) return false;
   return setStreamingThinkingText(text || placeholder);
 }
@@ -16848,13 +16981,13 @@ function handleMessageUpdate(event) {
     }
     scrollChatToBottom();
   } else if (update.type === "thinking_end") {
-    const finalThinking = assistantThinkingTextFromMessage(assistantStreamingMessage(event)) || thinkingDeltaText(update);
+    const finalThinking = assistantThinkingTextFromMessage(assistantStreamingMessage(event), { streaming: true }) || thinkingDeltaText(update);
     if (finalThinking) setStreamingThinkingText(finalThinking);
     streamThinkingBubble?.classList.add("complete");
     setRunIndicatorActivity("Finished thinking; waiting for the next output or action…", { scroll: false });
   } else if (update.type === "text_delta" || update.type === "text_end") {
     const delta = update.type === "text_delta" ? update.delta || "" : "";
-    const partialText = assistantTextFromMessage(assistantStreamingMessage(event));
+    const partialText = assistantTextFromMessage(assistantStreamingMessage(event), { streaming: true });
     if (typeof partialText === "string") streamRawText = partialText;
     else if (update.type === "text_end" && typeof update.content === "string") streamRawText = update.content;
     else streamRawText += delta;

package/tests/mobile-static.test.mjs

@@ -747,6 +747,8 @@ assert.match(app, /appendText\(preview, toolResultPreviewText\(message, 10\), "c
 assert.match(app, /function assistantDisplayMessages\(message\)/, "assistant history should split thinking and tool-call parts out of the final Assistant output card");
 assert.match(app, /function assistantHasToolCallAfter\(content, index\)/, "assistant text that precedes a tool call should be detectable and suppressible");
 assert.match(app, /if \(!assistantHasToolCallAfter\(content, index\)\) finalParts\.push\(finalPart\);/, "assistant history should not render pre-tool-call assistant text as final output");
+assert.match(app, /typeof content === "string"[\s\S]*?splitThinkingFormatText\(content\)[\s\S]*?content: parsed\.finalText/, "assistant string messages with tagged <think> output should render final text separately");
+assert.match(app, /const textForThinkingFormat[\s\S]*?splitThinkingFormatText\(textForThinkingFormat\)[\s\S]*?appendThinkingFormatDisplayMessages\(displayMessages, base, parsed\)[\s\S]*?finalParts\.push/, "assistant text parts with tagged <think> output should split into thinking and final-output cards");
 assert.match(app, /return content\.trim\(\) \? \[\{ \.\.\.message, title: "final output" \}\] : \[\]/, "assistant messages with stripped empty text should not render empty final-output cards");
 assert.match(app, /function isEmptyAssistantTextPart\(part\)[\s\S]*?part\.type === "text"[\s\S]*?!assistantTextPartText\(part\)\.trim\(\)/, "empty assistant text parts should be recognized as skippable provider metadata");
 assert.match(app, /if \(isEmptyAssistantTextPart\(part\)\) continue;/, "empty assistant text parts should not render as assistant-event cards");
@@ -754,6 +756,10 @@ assert.match(app, /function assistantFinalOutputPart\(part\)[\s\S]*?if \(part\.t
 assert.match(app, /\["assistant", "toolExecution"\]\.includes\(transcriptMessage\.role\) \? messageIndex : -1/, "final Assistant output and paired tool action cards should keep the source message index for feedback");
 assert.match(app, /function ensureStreamingThinkingBubble\(\)[\s\S]*if \(!thinkingOutputVisible\) return false/, "live thinking should respect the show/hide thinking-output toggle");
 assert.match(app, /const UNEXPOSED_THINKING_TEXT = "No thinking content was exposed by the provider\."/, "frontend should name the provider no-thinking placeholder for suppression");
+assert.match(app, /THINKING_FORMAT_OPEN_TAG_REGEX/, "frontend should recognize tagged <think> provider output");
+assert.match(app, /CHANNEL_THINKING_FORMAT_OPEN_TAG_REGEX = \/\^<\\\|\(\[a-z\]\[\\w-\]\*\)>\/i/, "frontend should recognize tagged <|channel> provider output");
+assert.match(app, /function thinkingFormatOpenMatch\(text\)[\s\S]*?CHANNEL_THINKING_FORMAT_OPEN_TAG_REGEX[\s\S]*?closeRegex: new RegExp\(`<\$\{escapeRegExp\(name\)\}\\\\\|>`/, "channel-style tagged output should create a matching <channel|> close delimiter");
+assert.match(app, /function splitThinkingFormatText\(text, \{ streaming = false \} = \{\}\)[\s\S]*?thinkingFormatOpenMatch\(rest\)[\s\S]*?finalText: stripThinkingFormatOutputSeparator\(rest\)/, "tagged thinking output should split thinking text from final response text");
 assert.match(app, /function visibleThinkingText\(text\)[\s\S]*?trimmed === UNEXPOSED_THINKING_TEXT[\s\S]*?return "";/, "provider no-thinking placeholders should normalize to empty thinking output");
 assert.match(app, /if \(isThinkingPart\) \{[\s\S]*?visibleThinkingText\(assistantThinkingText\(part\)\)[\s\S]*?if \(thinking\) displayMessages\.push/, "assistant transcript splitting should skip empty or unexposed thinking parts");
 assert.match(app, /message\.role === "thinking"[\s\S]*?visibleThinkingText\(message\.thinking \|\| textFromContent\(message\.content\)\)[\s\S]*?if \(thinkingOutputVisible && thinkingText\) appendText\(body, thinkingText, "thinking-text"\);/, "thinking cards should suppress empty and provider no-thinking placeholder output");
@@ -766,15 +772,17 @@ assert.match(app, /function thinkingDeltaText\(update\) \{[\s\S]*?return visible
 assert.match(app, /const THINKING_VISIBILITY_STORAGE_KEY = "pi-webui-thinking-visible"/, "thinking visibility should persist in browser storage");
 assert.match(app, /function setThinkingOutputVisible\(visible[\s\S]*renderAllMessages\(\{ preserveScroll: true \}\)/, "thinking visibility changes should immediately re-render the transcript");
 assert.match(app, /function assistantStreamingMessage\(event\)/, "live streaming should read the authoritative partial assistant message from RPC events like the TUI");
-assert.match(app, /assistantThinkingTextFromMessage\(assistantStreamingMessage\(event\)\) \|\| thinkingDeltaText\(update\)/, "live thinking end should replace deltas with the final partial-message thinking content");
+assert.match(app, /assistantThinkingTextFromMessage\(assistantStreamingMessage\(event\), \{ streaming: true \}\) \|\| thinkingDeltaText\(update\)/, "live thinking end should replace deltas with the final partial-message thinking content");
 assert.match(app, /if \(typeof partialText === "string"\) streamRawText = partialText;/, "live assistant text should synchronize from partial messages instead of relying only on deltas");
 assert.match(app, /const TODO_PROGRESS_LINE_REGEX = /, "frontend should recognize live todo progress lines that will be moved into the todo widget");
 assert.match(app, /function stripTodoProgressLines\(text, \{ streaming = false \} = \{\}\)/, "live Assistant output should strip todo-progress lines before rendering final-output text");
 assert.match(app, /function renderStreamingAssistantText\(\)[\s\S]*?const assistantText = stripTodoProgressLines\(streamRawText, \{ streaming: true \}\)/, "streamed Assistant text should classify from accumulated output without flashing partial todo-progress lines");
+assert.match(app, /function syncStreamingThinkingFormat\(assistantText\)[\s\S]*?splitThinkingFormatText\(assistantText, \{ streaming: true \}\)[\s\S]*?setStreamingThinkingText\(thinking\)/, "tagged <think> streaming output should update the live thinking card instead of flashing raw tags");
+assert.match(app, /const finalText = thinkingFormat\?\.hasThinkingFormat \? stripTodoProgressLines\(thinkingFormat\.finalText, \{ streaming: true \}\) : assistantText;/, "tagged <think> streaming output should render only final response text in the Assistant card");
 assert.match(app, /const STREAM_OUTPUT_HIDE_DELAY_MS = 300/, "stream output hiding should be debounced to prevent rapid flicker");
 assert.match(app, /const STREAM_OUTPUT_TOOLCALL_GUARD_MS = 220/, "live assistant text should be briefly guarded so pre-tool-call text can be suppressed");
 assert.match(app, /function scheduleStreamBubbleHide\([\s\S]*?STREAM_OUTPUT_MIN_VISIBLE_MS/, "stream output cards should observe a minimum visible duration before hiding");
-assert.match(app, /if \(assistantText\) \{[\s\S]*?renderStreamingMarkdown\(streamText, assistantText\);[\s\S]*?\} else \{\n\s+scheduleStreamBubbleHide\(\);/, "empty filtered stream output should schedule hide while visible stream output renders as Markdown");
+assert.match(app, /if \(finalText\) \{[\s\S]*?renderStreamingMarkdown\(streamText, finalText\);[\s\S]*?\} else \{\n\s+scheduleStreamBubbleHide\(\);/, "empty filtered stream output should schedule hide while visible stream output renders as Markdown");
 assert.match(app, /if \(streamToolCallSeen \|\| streamBubble\) renderStreamingAssistantText\(\);\n\s+else scheduleStreamingAssistantTextRender\(\);/, "live assistant text should wait briefly before showing unless it is already visible or follows a tool call");
 assert.match(app, /streamToolCallSeen = true;\n\s+suppressStreamingAssistantTextBeforeToolCall\(\);/, "tool-call starts should remove pending assistant text from the live transcript");
 assert.match(app, /const created = appendMessage\(\{ role: "assistant", title: "final output"/, "live Assistant cards should be created only for final output text without a noisy Assistant label");