orchid-ai 2.0.2 → 2.0.3

package/orchid-ai.css

@@ -382,6 +382,323 @@
   border-bottom-left-radius: 4px;
 }
 
+/* ── Tool / preamble trace (Claude-style timeline, light theme) ── */
+
+.ai-chat-process-trace {
+  --ai-process-bg: #f4f6f8;
+  --ai-process-border: #e4e8ed;
+  --ai-process-rail: #d8dde4;
+  --ai-process-text: #5c6570;
+  --ai-process-text-strong: #2d3748;
+  --ai-process-dot: #9aa5b1;
+  --ai-process-dot-tool: #059669;
+  --ai-process-dot-compile: #4f46e5;
+  --ai-process-dot-mind: #94a3b8;
+  --ai-process-interim-fg: #475569;
+
+  margin: 0 0 12px;
+  border-radius: 12px;
+  border: 1px solid transparent;
+  background: transparent;
+  box-shadow: none;
+  font-size: 12.5px;
+  line-height: 1.45;
+  color: var(--ai-process-text);
+  overflow: visible;
+  transition:
+    background 0.22s ease,
+    border-color 0.22s ease,
+    box-shadow 0.22s ease;
+}
+
+/* Collapsed: no chrome — summary reads as muted underlined text on the bubble background */
+.ai-chat-process-trace:not([open]) {
+  overflow: visible;
+}
+
+.ai-chat-process-trace[open] {
+  overflow: hidden;
+  border-color: var(--ai-process-border);
+  background: linear-gradient(165deg, var(--ai-process-bg) 0%, #eef1f4 100%);
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
+}
+
+.ai-chat-process-trace__summary {
+  cursor: pointer;
+  list-style: none;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 0 10px;
+  margin: 0;
+  font-weight: 500;
+  font-size: 13px;
+  letter-spacing: 0.01em;
+  text-transform: none;
+  color: #6b7280;
+  text-decoration: none;
+  user-select: none;
+  background: transparent;
+  border-bottom: none;
+  transition:
+    color 0.18s ease,
+    padding 0.2s ease,
+    font-size 0.2s ease,
+    font-weight 0.2s ease,
+    letter-spacing 0.2s ease,
+    background 0.22s ease,
+    border-color 0.22s ease;
+}
+
+/* Collapsed: underline only the label — chevron / dots sit beside it, not underlined */
+.ai-chat-process-trace:not([open]) > .ai-chat-process-trace__summary {
+  gap: 5px;
+  width: fit-content;
+  max-width: 100%;
+}
+
+.ai-chat-process-trace:not([open]) > .ai-chat-process-trace__summary:hover {
+  color: #4b5563;
+}
+
+.ai-chat-process-trace:not([open]) > .ai-chat-process-trace__summary:hover .ai-chat-process-trace__summary-text {
+  text-decoration-color: #4b5563;
+}
+
+.ai-chat-process-trace:not([open]) > .ai-chat-process-trace__summary:focus-visible {
+  outline: 2px solid #93c5fd;
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+
+/* Expanded: restore panel header strip inside the tinted card */
+.ai-chat-process-trace[open] > .ai-chat-process-trace__summary {
+  padding: 10px 14px;
+  font-weight: 600;
+  font-size: 12px;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+  color: var(--ai-process-text-strong);
+  text-decoration: none;
+  background: rgba(255, 255, 255, 0.45);
+  border-bottom: 1px solid var(--ai-process-border);
+}
+
+.ai-chat-process-trace__summary::-webkit-details-marker {
+  display: none;
+}
+
+.ai-chat-process-trace__summary-text {
+  flex: 1;
+  text-decoration: none;
+}
+
+.ai-chat-process-trace:not([open]) .ai-chat-process-trace__summary-text {
+  flex: 0 1 auto;
+  text-decoration: underline;
+  text-underline-offset: 3px;
+  text-decoration-thickness: 1px;
+  transition: text-decoration-color 0.18s ease;
+}
+
+.ai-chat-process-trace[open] .ai-chat-process-trace__summary-text {
+  flex: 1;
+  text-decoration: none;
+}
+
+/* Single expand chevron (right); hidden while streaming — dots replace it. */
+.ai-chat-process-trace__summary-chevron {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  min-width: 1.25em;
+  font-size: 15px;
+  font-weight: 700;
+  line-height: 1;
+  opacity: 0.55;
+  text-decoration: none;
+  transition: transform 0.18s ease, opacity 0.15s ease;
+}
+
+.ai-chat-process-trace:not([open]) .ai-chat-process-trace__summary-chevron {
+  opacity: 0.45;
+  min-width: auto;
+}
+
+.ai-chat-process-trace:not([open]) .ai-chat-process-trace__mini-typing span {
+  opacity: 0.72;
+}
+
+.ai-chat-process-trace[open] > .ai-chat-process-trace__summary .ai-chat-process-trace__summary-chevron {
+  transform: rotate(90deg);
+  opacity: 0.78;
+}
+
+.ai-chat-process-trace__mini-typing {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  gap: 3px;
+}
+
+.ai-chat-process-trace__mini-typing span {
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  background: var(--ai-process-dot-tool);
+  opacity: 0.85;
+  animation: ai-chat-process-mini-dot 1.05s ease-in-out infinite;
+}
+
+.ai-chat-process-trace__mini-typing span:nth-child(2) {
+  animation-delay: 0.12s;
+}
+
+.ai-chat-process-trace__mini-typing span:nth-child(3) {
+  animation-delay: 0.24s;
+}
+
+@keyframes ai-chat-process-mini-dot {
+  0%,
+  80%,
+  100% {
+    transform: translateY(0);
+    opacity: 0.35;
+  }
+  40% {
+    transform: translateY(-2px);
+    opacity: 1;
+  }
+}
+
+@keyframes ai-chat-process-pulse {
+  0% {
+    box-shadow: 0 0 0 0 rgba(5, 150, 105, 0.35);
+  }
+  70% {
+    box-shadow: 0 0 0 6px rgba(5, 150, 105, 0);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(5, 150, 105, 0);
+  }
+}
+
+.ai-chat-process-trace__panel {
+  padding: 10px 12px 12px 8px;
+}
+
+.ai-chat-process-trace__timeline {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.ai-chat-process-trace__step {
+  display: flex;
+  align-items: stretch;
+  gap: 10px;
+  margin: 0;
+  padding: 0 0 14px;
+}
+
+.ai-chat-process-trace__step:last-child {
+  padding-bottom: 0;
+}
+
+.ai-chat-process-trace__rail {
+  position: relative;
+  width: 18px;
+  flex-shrink: 0;
+  display: flex;
+  justify-content: center;
+  padding-top: 4px;
+}
+
+.ai-chat-process-trace__rail::after {
+  content: "";
+  position: absolute;
+  top: 13px;
+  bottom: -14px;
+  left: 50%;
+  width: 1px;
+  transform: translateX(-50%);
+  background: var(--ai-process-rail);
+}
+
+.ai-chat-process-trace__step:last-child .ai-chat-process-trace__rail::after {
+  display: none;
+}
+
+.ai-chat-process-trace__dot {
+  position: relative;
+  z-index: 1;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--ai-process-dot);
+  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85);
+}
+
+.ai-chat-process-trace__step--tool .ai-chat-process-trace__dot {
+  background: var(--ai-process-dot-tool);
+}
+
+.ai-chat-process-trace__step--compile .ai-chat-process-trace__dot {
+  background: var(--ai-process-dot-compile);
+}
+
+.ai-chat-process-trace__step--mind .ai-chat-process-trace__dot {
+  background: var(--ai-process-dot-mind);
+}
+
+.ai-chat-process-trace__step--text .ai-chat-process-trace__dot {
+  background: var(--ai-process-dot);
+}
+
+.ai-chat-process-trace__step--interim .ai-chat-process-trace__dot {
+  background: var(--ai-process-dot);
+  animation: ai-chat-process-pulse 1.4s ease-out infinite;
+}
+
+.ai-chat-process-trace__step--live .ai-chat-process-trace__dot {
+  animation: ai-chat-process-pulse 1.2s ease-out infinite;
+}
+
+.ai-chat-process-trace__body {
+  flex: 1;
+  min-width: 0;
+  padding-top: 1px;
+}
+
+.ai-chat-process-trace__line {
+  display: block;
+  color: var(--ai-process-text-strong);
+  font-weight: 500;
+}
+
+.ai-chat-process-trace__step--tool .ai-chat-process-trace__line {
+  color: #047857;
+}
+
+.ai-chat-process-trace__step--compile .ai-chat-process-trace__line {
+  color: #4338ca;
+}
+
+.ai-chat-process-trace__prose {
+  margin: 0;
+  white-space: pre-wrap;
+  word-break: break-word;
+  color: var(--ai-process-interim-fg);
+  font-weight: 400;
+}
+
+.ai-chat-process-trace__step--interim .ai-chat-process-trace__prose {
+  border-left: 2px solid var(--ai-process-rail);
+  padding-left: 10px;
+  margin-left: 2px;
+}
+
 /* ── Markdown Typography (assistant bubbles) ── */
 
 .ai-chat-bubble.assistant p {
@@ -1816,6 +2133,29 @@
   animation-delay: 0.4s;
 }
 
+/* Smaller dots for inline status (next to “Compiling…”) */
+.ai-chat-typing--inline {
+  gap: 4px;
+  padding: 0;
+}
+
+.ai-chat-typing--inline span {
+  width: 5px;
+  height: 5px;
+}
+
+.ai-chat-streaming-status {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin-bottom: 8px;
+}
+
+.ai-chat-streaming-status .ai-chat-status-text {
+  margin: 0;
+}
+
 @keyframes typing {
   0%,
   60%,
@@ -1829,6 +2169,48 @@
   }
 }
 
+/* ── Building Block (streaming code-block placeholder) ── */
+
+.ai-building-block {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+  padding: 8px 12px;
+  border-radius: 8px;
+  margin: 6px 0 0;
+  background: #f3f4f6;
+  border: 1px solid #e5e7eb;
+}
+
+.ai-building-block__label {
+  font-size: 13px;
+  font-weight: 600;
+  color: #4b5563;
+}
+
+.ai-building-block__dots {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.ai-building-block__dot {
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: #9ca3af;
+  animation: typing 1.4s infinite;
+}
+
+.ai-building-block__dots .ai-building-block__dot:nth-child(2) {
+  animation-delay: 0.2s;
+}
+
+.ai-building-block__dots .ai-building-block__dot:nth-child(3) {
+  animation-delay: 0.4s;
+}
+
 /* ── Input Area ── */
 
 .ai-chat-input-form {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orchid-ai",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "description": "Shared Orchid AI chat UI and visualization components",
   "main": "src/index.js",
   "types": "src/index.d.ts",

package/src/components/ChatWindow.jsx

@@ -22,13 +22,14 @@ export default function ChatWindow({
   emptyDescription,
   suggestions = DEFAULT_SUGGESTIONS,
   suggestionsDisabled = false,
+  showProcessTracePanel = true,
 }) {
   const exportPrefix = appName.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '');
   const bottomRef = useRef(null);
 
   useEffect(() => {
     bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
-  }, [messages, loading]);
+  }, [messages, loading, statusText]);
 
   const renderEmptyState = () => {
     if (!aiEnabled) {
@@ -100,13 +101,32 @@ export default function ChatWindow({
     );
   };
 
+  const lastMsg = messages?.[messages.length - 1];
+  const hasStreamingMessage = lastMsg?.isStreaming === true;
+
   return (
     <div className="ai-chat-window">
       {messages?.length === 0 && !loading && renderEmptyState()}
-      {(messages ?? []).map((msg, i) => (
-        <Message key={i} role={msg.role} content={msg.content} truncated={msg.truncated} exportPrefix={exportPrefix} />
-      ))}
-      {loading && (
+      {(messages ?? []).map((msg, i) => {
+        const isLast = i === (messages?.length ?? 0) - 1;
+        const streamingStatusText =
+          loading && isLast && msg.role === 'assistant' && msg.isStreaming ? statusText : undefined;
+        return (
+          <Message
+            key={i}
+            role={msg.role}
+            content={msg.content}
+            truncated={msg.truncated}
+            exportPrefix={exportPrefix}
+            isStreaming={msg.isStreaming}
+            streamingStatusText={streamingStatusText}
+            processTrace={msg.processTrace}
+            processInterimLive={msg.processInterimLive}
+            showProcessTracePanel={showProcessTracePanel}
+          />
+        );
+      })}
+      {loading && !hasStreamingMessage && (
         <div className="ai-chat-message assistant">
           <div className="ai-chat-avatar assistant">AI</div>
           <div className="ai-chat-bubble assistant">

package/src/components/Message.jsx

@@ -1,14 +1,66 @@
-import React, { useRef, useState, useMemo } from "react";
+import React, { useRef, useState, useMemo, useEffect } from "react";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import AiVisualization from "./visualizations/AiVisualization";
 import { resolveChartBlock } from "./visualizations/parseChartBlock";
 import { isChartMarkdownLanguage } from "./visualizations/chartSchema";
+import { orchidAiProcessTraceHasDisplayableContent, orchidAiProcessTraceEntryKind } from "../orchidAiProcessTrace";
 
 const IS_DEV = process.env.NODE_ENV === "development";
 
-const TITLE_RE = /<!--\s*title:\s*([^-][^>]*?)\s*-->/i;
+/**
+ * Returns the substring up to (not including) the last unclosed ``` opener,
+ * or null when all code blocks are closed. Used to safely render partial
+ * markdown during streaming without passing broken fences to ReactMarkdown.
+ */
+function getStreamingPrefix(content) {
+  const parts = content.split("```");
+  if (parts.length % 2 === 0) {
+    return content.slice(0, content.lastIndexOf("```"));
+  }
+  return null;
+}
+
+/** Extracts the language identifier from the currently-open (unclosed) code fence. */
+function getOpenBlockLanguage(content) {
+  const lastIdx = content.lastIndexOf("```");
+  if (lastIdx === -1) return "";
+  const after = content.slice(lastIdx + 3);
+  return after.split("\n")[0].trim().toLowerCase();
+}
+
+const CODE_LANGS = new Set([
+  "javascript","js","typescript","ts","jsx","tsx",
+  "python","py","ruby","rb","go","rust","java",
+  "c","cpp","c++","cs","php","bash","sh","zsh",
+  "html","css","yaml","yml","xml","markdown","md",
+]);
+
+function getBlockLabel(lang) {
+  const l = (lang || '').toLowerCase();
+  if (l.includes('orchid-ai-chart') || l.includes('hemiq-chart')) return 'Generating visualization';
+  if (l === 'json') return 'Generating data';
+  if (l === 'sql') return 'Generating query';
+  if (CODE_LANGS.has(l)) return 'Generating code';
+  if (!l) return 'Generating…';
+  return `Generating ${lang}`;
+}
+
+const TITLE_COMMENT_RE = /<!--\s*title:\s*([^-][^>]*?)\s*-->/gi;
 
+/** Prefer the last `<!--title:...-->` so end-of-reply titles work; still removes legacy start-of-reply comments. */
+function peelOrchidAiTitleComment(content, isUser) {
+  if (isUser) return { responseTitle: null, renderContent: content };
+  const s = String(content ?? "");
+  const matches = [...s.matchAll(TITLE_COMMENT_RE)];
+  if (matches.length === 0) return { responseTitle: null, renderContent: content };
+  const m = matches[matches.length - 1];
+  const full = m[0];
+  const idx = m.index;
+  const responseTitle = m[1].trim();
+  const renderContent = (s.slice(0, idx) + s.slice(idx + full.length)).replace(/^\s+/, "").replace(/\s+$/, "");
+  return { responseTitle, renderContent };
+}
 /** Split on http(s) URLs for lightweight linkify in user bubbles (plain text, not full markdown). */
 const URL_INLINE_RE = /(https?:\/\/[^\s<>`]+)/gi;
 
@@ -48,21 +100,110 @@ function UserBubbleContent({ content }) {
   ));
 }
 
-export default function Message({ role, content, truncated, exportPrefix = "orchid-ai" }) {
+function ProcessTracePanel({ processTrace, processInterimLive, isStreaming, showProcessTracePanel }) {
+  if (showProcessTracePanel === false) return null;
+
+  const autoCollapsed = !isStreaming && processTrace?.defaultCollapsed !== false;
+  const [expanded, setExpanded] = useState(() => !autoCollapsed);
+
+  useEffect(() => {
+    setExpanded(!autoCollapsed);
+  }, [autoCollapsed]);
+
+  const hasContent = orchidAiProcessTraceHasDisplayableContent(processTrace, processInterimLive, {
+    isStreaming,
+  });
+  if (!hasContent) return null;
+
+  const items = processTrace?.items ?? [];
+
+  return (
+    <details
+      className="ai-chat-process-trace"
+      open={expanded}
+      onToggle={(e) => setExpanded(e.target.open)}
+    >
+      <summary className="ai-chat-process-trace__summary">
+        <span className="ai-chat-process-trace__summary-text">Working</span>
+        {isStreaming ? (
+          <span className="ai-chat-process-trace__mini-typing" aria-hidden title="In progress">
+            <span />
+            <span />
+            <span />
+          </span>
+        ) : (
+          <span className="ai-chat-process-trace__summary-chevron" aria-hidden>
+            ▸
+          </span>
+        )}
+      </summary>
+      <div className="ai-chat-process-trace__panel">
+        <ul className="ai-chat-process-trace__timeline">
+          {items.map((entry, i) => {
+            const lane = orchidAiProcessTraceEntryKind(entry);
+            const isLiveStatus = isStreaming && !processInterimLive && i === items.length - 1 && entry.type === "status";
+            return (
+              <li
+                key={i}
+                className={`ai-chat-process-trace__step ai-chat-process-trace__step--${lane}${isLiveStatus ? " ai-chat-process-trace__step--live" : ""}`}
+              >
+                <div className="ai-chat-process-trace__rail" aria-hidden>
+                  <span className="ai-chat-process-trace__dot" />
+                </div>
+                <div className="ai-chat-process-trace__body">
+                  {entry.type === "status" ? (
+                    <span className="ai-chat-process-trace__line">{entry.value}</span>
+                  ) : (
+                    <div className="ai-chat-process-trace__prose">
+                      {entry.value}
+                    </div>
+                  )}
+                </div>
+              </li>
+            );
+          })}
+          {processInterimLive ? (
+            <li className="ai-chat-process-trace__step ai-chat-process-trace__step--text ai-chat-process-trace__step--interim">
+              <div className="ai-chat-process-trace__rail" aria-hidden>
+                <span className="ai-chat-process-trace__dot" />
+              </div>
+              <div className="ai-chat-process-trace__body">
+                <div className="ai-chat-process-trace__prose">{processInterimLive}</div>
+              </div>
+            </li>
+          ) : null}
+        </ul>
+      </div>
+    </details>
+  );
+}
+
+export default function Message({
+  role,
+  content,
+  truncated,
+  exportPrefix = "orchid-ai",
+  isStreaming = false,
+  streamingStatusText,
+  processTrace,
+  processInterimLive = "",
+  showProcessTracePanel = true,
+}) {
   const isUser = role === "user";
   const [copied, setCopied] = useState(false);
   const [isPrinting, setIsPrinting] = useState(false);
   const messageRef = useRef(null);
 
   // Extract AI-provided title comment and strip it from rendered content
-  const { responseTitle, renderContent } = useMemo(() => {
-    if (isUser) return { responseTitle: null, renderContent: content };
-    const match = TITLE_RE.exec(content);
-    return {
-      responseTitle: match ? match[1].trim() : null,
-      renderContent: match ? content.replace(match[0], "").replace(/^\s+/, "") : content,
-    };
-  }, [content, isUser]);
+  const { responseTitle, renderContent } = useMemo(
+    () => peelOrchidAiTitleComment(content, isUser),
+    [content, isUser]
+  );
+
+  // When streaming, detect an unclosed code block so we can show a labeled placeholder
+  // instead of passing a broken fence to ReactMarkdown.
+  const streamingPrefix = !isUser && isStreaming ? getStreamingPrefix(renderContent) : null;
+  const openBlockLabel = streamingPrefix !== null ? getBlockLabel(getOpenBlockLanguage(renderContent)) : null;
 
   const handleCopy = () => {
     const stripChartBlocks = (value) =>
@@ -86,9 +227,16 @@ export default function Message({ role, content, truncated, exportPrefix = "orch
     const bubbleContent = messageRef.current.querySelector(".ai-chat-message-content");
     if (!bubbleContent) return;
 
+    /** Omit interim “Working” tray + streaming status from PDF title fallback. */
+    const plainForTitle = (() => {
+      const c = bubbleContent.cloneNode(true);
+      c.querySelectorAll(".ai-chat-process-trace, .ai-chat-streaming-status").forEach((n) => n.remove());
+      return (c.textContent || "").trim();
+    })();
+
     // Build filename from AI-provided title or first meaningful line
     const titleText = responseTitle ||
-      (bubbleContent.textContent || "").split("\n").map((l) => l.trim()).find(Boolean) ||
+      plainForTitle.split("\n").map((l) => l.trim()).find(Boolean) ||
       "response";
     const slug = titleText.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "").slice(0, 48) || "response";
     const now = new Date();
@@ -98,7 +246,11 @@ export default function Message({ role, content, truncated, exportPrefix = "orch
     setIsPrinting(true);
 
     const clone = bubbleContent.cloneNode(true);
-    clone.querySelectorAll(".ai-chart-export-actions, .ai-chat-message-actions").forEach((n) => n.remove());
+    clone
+      .querySelectorAll(
+        ".ai-chart-export-actions, .ai-chat-message-actions, .ai-chat-process-trace, .ai-chat-streaming-status"
+      )
+      .forEach((n) => n.remove());
 
     setIsPrinting(true);
     const previousTitle = document.title;
@@ -133,6 +285,12 @@ export default function Message({ role, content, truncated, exportPrefix = "orch
     window.print();
   };
 
+  // Hide the duplicate inline status row when the collapsible Process panel already lists statuses.
+  const processPanelVisible =
+    !isUser &&
+    showProcessTracePanel !== false &&
+    orchidAiProcessTraceHasDisplayableContent(processTrace, processInterimLive, { isStreaming });
+
   const markdownComponents = {
     pre({ children, ...props }) {
       const onlyChild = React.Children.toArray(children)[0];
@@ -203,8 +361,42 @@ export default function Message({ role, content, truncated, exportPrefix = "orch
       </div>
       <div className={`ai-chat-bubble ${role}`}>
         <div className="ai-chat-message-content">
+          {!isUser ? (
+            <ProcessTracePanel
+              processTrace={processTrace}
+              processInterimLive={processInterimLive}
+              isStreaming={isStreaming}
+              showProcessTracePanel={showProcessTracePanel}
+            />
+          ) : null}
+          {!isUser && isStreaming && streamingStatusText && !processPanelVisible ? (
+            <div className="ai-chat-streaming-status" aria-live="polite">
+              <span className="ai-chat-status-text">{streamingStatusText}</span>
+              <div className="ai-chat-typing ai-chat-typing--inline" aria-hidden>
+                <span />
+                <span />
+                <span />
+              </div>
+            </div>
+          ) : null}
           {isUser ? (
             <UserBubbleContent content={content} />
+          ) : streamingPrefix !== null ? (
+            <>
+              {streamingPrefix && (
+                <ReactMarkdown remarkPlugins={[remarkGfm]} components={markdownComponents}>{streamingPrefix}</ReactMarkdown>
+              )}
+              <div className="ai-building-block" role="status" aria-label={openBlockLabel || "Building content"}>
+                {openBlockLabel ? (
+                  <span className="ai-building-block__label">{openBlockLabel}</span>
+                ) : null}
+                <div className="ai-building-block__dots" aria-hidden>
+                  <span className="ai-building-block__dot" />
+                  <span className="ai-building-block__dot" />
+                  <span className="ai-building-block__dot" />
+                </div>
+              </div>
+            </>
           ) : (
             <ReactMarkdown remarkPlugins={[remarkGfm]} components={markdownComponents}>{renderContent}</ReactMarkdown>
           )}
@@ -214,7 +406,7 @@ export default function Message({ role, content, truncated, exportPrefix = "orch
             </div>
           )}
         </div>
-        {!isUser && (
+        {!isUser && !isStreaming && (
           <div className="ai-chat-message-actions">
             <button
               type="button"

package/src/components/visualizations/chartSchema.js

@@ -91,15 +91,16 @@ function normalizeYAxis(axis) {
   return { label, categories };
 }
 
+/** When models omit `xAxis.label`, charts still need a string for the axis caption. */
+const DEFAULT_CATEGORY_AXIS_LABEL = "Category";
+
 function normalizeCategoryAxis(axis) {
   if (!isObject(axis) || !Array.isArray(axis.categories)) {
     return null;
   }
 
-  const label = typeof axis.label === "string" ? axis.label.trim() : "";
-  if (!label) {
-    return null;
-  }
+  const rawLabel = typeof axis.label === "string" ? axis.label.trim() : "";
+  const label = rawLabel || DEFAULT_CATEGORY_AXIS_LABEL;
 
   const categories = axis.categories
     .map((category) => {
@@ -171,9 +172,48 @@ function normalizeSeries(series, allowedCategoryKeys) {
   return normalized.length > 0 ? normalized : null;
 }
 
+/**
+ * Distinct categorical `y` values from dot_chart payloads (series-based and/or flat `points`).
+ */
+function collectDotChartYCategoryKeys(payload) {
+  const ordered = [];
+  const seen = new Set();
+  const addKey = (rawY) => {
+    const key = String(rawY ?? "").trim();
+    if (!key || seen.has(key)) {
+      return;
+    }
+    seen.add(key);
+    ordered.push(key);
+  };
+
+  if (Array.isArray(payload.series)) {
+    for (const entry of payload.series) {
+      if (!isObject(entry) || !Array.isArray(entry.points)) {
+        continue;
+      }
+      for (const pt of entry.points) {
+        if (!isObject(pt)) {
+          continue;
+        }
+        addKey(pt.y);
+      }
+    }
+  }
+  if (Array.isArray(payload.points)) {
+    for (const pt of payload.points) {
+      if (!isObject(pt)) {
+        continue;
+      }
+      addKey(pt.y);
+    }
+  }
+  return ordered;
+}
+
 /**
  * Dot charts: models often send yAxis.label only and put category keys in point.y.
- * Build categories from series points when yAxis.categories is missing or invalid.
+ * Infer categories from `series[].points` and/or top-level `points`.
  */
 function mergeDotChartYAxisWithInferredCategories(payload) {
   if (!isObject(payload) || payload.type !== DOT_CHART_TYPE) {
@@ -188,37 +228,30 @@ function mergeDotChartYAxisWithInferredCategories(payload) {
   }
 
   const yLabel = typeof yRaw.label === "string" ? yRaw.label.trim() : "";
-  if (!yLabel || !Array.isArray(payload.series)) {
+  if (!yLabel) {
     return yRaw;
   }
 
-  const seen = new Map();
-  for (const entry of payload.series) {
-    if (!isObject(entry) || !Array.isArray(entry.points)) {
-      continue;
-    }
-    for (const pt of entry.points) {
-      if (!isObject(pt)) {
-        continue;
-      }
-      const k = String(pt.y || "").trim();
-      if (!k || seen.has(k)) {
-        continue;
-      }
-      const disp =
-        typeof pt.label === "string" && pt.label.trim() ? String(pt.label).trim() : k;
-      seen.set(k, disp);
-    }
-  }
-
-  if (seen.size === 0) {
+  const keys = collectDotChartYCategoryKeys(payload);
+  if (keys.length === 0) {
     return yRaw;
   }
 
-  const categories = [...seen.entries()].map(([key, label]) => ({ key: key, label: label }));
+  const categories = keys.map((key) => ({ key: key, label: key }));
   return { ...yRaw, categories: categories };
 }
 
+/** Prefer `series`; otherwise wrap flat `points` for {@link normalizeSeries}. */
+function getDotChartSeriesInput(payload) {
+  if (Array.isArray(payload.series) && payload.series.length > 0) {
+    return payload.series;
+  }
+  if (Array.isArray(payload.points) && payload.points.length > 0) {
+    return [{ name: "Points", points: payload.points }];
+  }
+  return null;
+}
+
 function normalizeValueSeries(series, allowedCategoryKeys, options = {}) {
   const { allowNegativeValues = true } = options;
 
@@ -560,6 +593,23 @@ function tryCoerceHistogramBinsFromLLM(bins) {
       continue;
     }
 
+    /** e.g. `"8"` or `"12"` — treat as unit-width bucket [n, n + 1) for numeric axes */
+    const loneNumMatch = /^(\d+(?:\.\d+)?)\s*$/i.exec(rangeStr);
+    if (loneNumMatch) {
+      const a = Number(loneNumMatch[1]);
+      if (!Number.isFinite(a)) {
+        return null;
+      }
+      work.push({
+        start: a,
+        end: a + 1,
+        value: value,
+        label: rangeStr,
+        open: false,
+      });
+      continue;
+    }
+
     return null;
   }
 
@@ -1137,8 +1187,9 @@ export function validateDotChartPayload(payload) {
     return { valid: false, error: "Invalid yAxis. Expected label and at least one category with key/label." };
   }
 
+  const seriesInput = getDotChartSeriesInput(payload);
   const series = normalizeSeries(
-    payload.series,
+    seriesInput,
     yAxis.categories.map((category) => category.key)
   );
   if (!series) {

package/src/constants/visualizationInstructions.js

@@ -14,9 +14,9 @@ table | bar_chart | line_chart | stacked_bar_chart | grouped_bar_chart | dot_cha
 
 Do not invent other type names. For several metrics at a glance use **stat_cards** (\`cards\`: [{ \`label\` or \`title\`, \`value\`, optional \`subtitle\`, \`unit\`, \`trend\`: up|down|neutral }]); for tabular listings use **table**; category counts use **bar_chart** (\`bars\`: [{ "label", "value" }], values ≥ 0). **table**: either \`columns\`: [{ "key", "label" }] with \`rows\`: objects keyed by those keys, OR \`columns\` as a string array (headers) with each \`row\` a string array of values in column order.
 
-**line_chart** / **stacked_bar_chart** / **grouped_bar_chart**: \`xAxis.categories\` (≥2 entries with key+label), \`yAxis\` with label, \`series[].points\` with x = category key and numeric value.
+**line_chart** / **stacked_bar_chart** / **grouped_bar_chart**: \`xAxis\` must include **\`label\`** (human-readable axis title, e.g. \`"Date"\`, \`"Week"\`) **and** \`categories\` (≥2 objects, each with \`key\` + \`label\`). \`yAxis\` must include \`label\`. \`series[].points\`: \`x\` = each category’s \`key\`, \`value\` = number (stacked/grouped: values ≥ 0).
 
-**timeline**: \`items\` or \`events\` with label, start, end (ISO 8601). **dot_chart**: numeric \`x\`, categorical \`y\` per point; \`yAxis.categories\` may be omitted (inferred from point \`y\` / \`label\`). **histogram**: bins as \`start\`/\`end\`/\`value\`, or \`range\` (\`"0-1"\`, \`"6+"\`) with \`count\` or \`value\`. **scatter_plot**: standard numeric axes/series.
+**timeline**: \`items\` or \`events\` with label, start, end (ISO 8601). **dot_chart**: numeric \`x\`, categorical \`y\` (row/category key) per point; optional per-point \`label\` for tooltips only. Use either \`series\`: [{ \`name\`, \`points\` }] **or** a top-level \`points\` array; \`yAxis\` needs \`label\`; \`yAxis.categories\` may be omitted (inferred from distinct \`y\`). **histogram**: bins prefer \`start\`, \`end\`, \`value\` (non-negative, end > start); or \`range\` + \`count\`/\`value\` where \`range\` is \`"min-max"\`, \`"8"\` (single numeric bucket), or \`"6+"\` (open upper). **scatter_plot**: standard numeric axes/series.
 
 In prose-only replies (capabilities, no data): do not include an orchid-ai-chart block. When rendering data, skip long schema tutorials—output valid JSON only in the fence.
 ~10 table rows unless the user asks for more.

package/src/hooks/useOrchidAiChat.js

@@ -1,15 +1,25 @@
 import { useState, useCallback, useRef } from 'react';
+import {
+  ORCHID_AI_SSE_STATUS_CLEAR_STREAM,
+  orchidAiStatusClearsStreamBuffer,
+} from '../orchidAiStreamingTitle';
+import {
+  augmentLiveProcessTraceSnapshot,
+  createOrchidAiProcessTraceCollector,
+  snapshotOrchidAiProcessTraceItems,
+  orchidAiProcessTraceHasDisplayableContent,
+} from '../orchidAiProcessTrace';
 
 /**
  * Default status message strings. Export these so server-side code can import
  * and reference the same values, making it easy to keep client and server in sync
  * or swap them out per-app.
  *
- * Set showStatus: false on the hook to disable status display entirely.
+ * Set showStatus: false on the hook to suppress status display entirely.
  */
 export const ORCHID_AI_DEFAULT_STATUS = {
   thinking: 'Thinking',
-  compilingResponse: 'Compiling response',
+  compilingResponse: ORCHID_AI_SSE_STATUS_CLEAR_STREAM,
   lookingUpData: 'Looking up data',
 };
 
@@ -32,12 +42,8 @@ export function useOrchidAiChat({ endpoint, buildBody, getHeaders, showStatus =
   const [loading, setLoading] = useState(false);
   const [statusText, setStatusText] = useState('');
 
-  // Track messages in a ref so sendMessage always reads the latest without needing
-  // messages in its dependency array (avoids capturing stale history).
   const messagesRef = useRef(initialMessages);
 
-  // Keep latest callbacks in refs so sendMessage identity stays stable regardless
-  // of whether the parent re-creates buildBody/getHeaders each render.
   const buildBodyRef = useRef(buildBody);
   const getHeadersRef = useRef(getHeaders);
   buildBodyRef.current = buildBody;
@@ -70,10 +76,39 @@ export function useOrchidAiChat({ endpoint, buildBody, getHeaders, showStatus =
 
         const contentType = response.headers.get('content-type') ?? '';
 
-        if (contentType.includes('text/event-stream')) {
+        if (contentType.includes('text/event-stream') && response.body) {
           const reader = response.body.getReader();
           const decoder = new TextDecoder();
           let buffer = '';
+          const collector = createOrchidAiProcessTraceCollector();
+
+          addMessage({
+            role: 'assistant',
+            content: '',
+            isStreaming: true,
+            processTrace: snapshotOrchidAiProcessTraceItems(collector),
+            processInterimLive: '',
+          });
+
+          const patchStreamingAssistant = () => {
+            setMessages((prev) => {
+              const next = [...prev];
+              const last = next[next.length - 1];
+              if (last?.role !== 'assistant' || last?.isStreaming !== true) return prev;
+              next[next.length - 1] = {
+                ...last,
+                content: collector.getLiveMain(),
+                processTrace: augmentLiveProcessTraceSnapshot(
+                  snapshotOrchidAiProcessTraceItems(collector),
+                  collector.getLiveMain(),
+                  collector.getLiveInterim()
+                ),
+                processInterimLive: collector.getLiveInterim(),
+              };
+              messagesRef.current = next;
+              return next;
+            });
+          };
 
           while (true) {
             const { done, value } = await reader.read();
@@ -86,18 +121,50 @@ export function useOrchidAiChat({ endpoint, buildBody, getHeaders, showStatus =
               if (!line.startsWith('data: ')) continue;
               try {
                 const event = JSON.parse(line.slice(6));
-                if (event.type === 'status' && showStatus) {
-                  setStatusText(event.text);
+                if (event.type === 'status') {
+                  if (showStatus) setStatusText(event.text);
+                  collector.onStatus(event.text, {
+                    isClearStream: orchidAiStatusClearsStreamBuffer(event.text),
+                  });
+                  patchStreamingAssistant();
+                } else if (event.type === 'delta') {
+                  collector.onDelta(event.text);
+                  patchStreamingAssistant();
                 } else if (event.type === 'done') {
-                  addMessage({
-                    role: 'assistant',
-                    content: event.response,
-                    truncated: event.truncated,
+                  const rawTrace = collector.buildPersistedTrace();
+                  const trace =
+                    rawTrace && orchidAiProcessTraceHasDisplayableContent(rawTrace, '')
+                      ? rawTrace
+                      : undefined;
+                  setMessages((prev) => {
+                    const next = [...prev];
+                    const last = next[next.length - 1];
+                    const finalMsg = {
+                      role: 'assistant',
+                      content: event.response,
+                      truncated: event.truncated === true,
+                      ...(trace ? { processTrace: trace } : {}),
+                    };
+                    if (last?.role === 'assistant' && last?.isStreaming) {
+                      next[next.length - 1] = finalMsg;
+                    } else {
+                      next.push(finalMsg);
+                    }
+                    messagesRef.current = next;
+                    return next;
                   });
                 } else if (event.type === 'error') {
-                  addMessage({
-                    role: 'assistant',
-                    content: event.error || 'Something went wrong.',
+                  setMessages((prev) => {
+                    const next = [...prev];
+                    const last = next[next.length - 1];
+                    const errMsg = { role: 'assistant', content: event.error || 'Something went wrong.' };
+                    if (last?.role === 'assistant' && last?.isStreaming) {
+                      next[next.length - 1] = errMsg;
+                    } else {
+                      next.push(errMsg);
+                    }
+                    messagesRef.current = next;
+                    return next;
                   });
                 }
               } catch {
@@ -106,7 +173,6 @@ export function useOrchidAiChat({ endpoint, buildBody, getHeaders, showStatus =
             }
           }
         } else {
-          // Plain JSON fallback for non-streaming backends
           const data = await response.json();
           if (response.ok) {
             addMessage({ role: 'assistant', content: data.response, truncated: data.truncated });

package/src/index.d.ts

@@ -6,6 +6,15 @@ export interface ChatMessage {
   role: 'user' | 'assistant';
   content: string;
   truncated?: boolean;
+  /** When true, UI may show streaming placeholders (orchid-ai ChatWindow). */
+  isStreaming?: boolean;
+  /** Collapsible interim trace (statuses + pre-final text). Persisted for Hermes-style chats. */
+  processTrace?: {
+    items: Array<{ type: 'status' | 'text'; value: string }>;
+    defaultCollapsed?: boolean;
+  };
+  /** Live tool preamble not yet flushed into processTrace.items (streaming only). */
+  processInterimLive?: string;
 }
 
 export interface ChatWindowProps {
@@ -15,6 +24,8 @@ export interface ChatWindowProps {
   onSuggestionClick?: (text: string) => void;
   aiEnabled?: boolean;
   organisationName?: string;
+  /** When false, tool/interim statuses show inline next to typing dots (Hermes / iLink config). */
+  showProcessTracePanel?: boolean;
   /** Any extra props are forwarded to the root element */
   [key: string]: unknown;
 }
@@ -31,6 +42,13 @@ export interface MessageProps {
   role: 'user' | 'assistant';
   content: string;
   truncated?: boolean;
+  exportPrefix?: string;
+  isStreaming?: boolean;
+  /** Shown above streaming content while server emits status (e.g. “Compiling response”). */
+  streamingStatusText?: string;
+  processTrace?: ChatMessage['processTrace'];
+  processInterimLive?: string;
+  showProcessTracePanel?: boolean;
 }
 
 export const ChatWindow: React.FC<ChatWindowProps>;
@@ -134,6 +152,45 @@ export function validateTablePayload(data: unknown): boolean;
 export function parseChartBlock(block: string): unknown;
 export function resolveChartBlock(block: string): unknown;
 
+// ─── Process trace + SSE markers (Hermes) ───────────────────────────────────
+
+export function orchidAiProcessTraceEntryKind(entry: {
+  type: 'status' | 'text';
+  value: string;
+}): 'text' | 'tool' | 'compile' | 'mind';
+
+export function createOrchidAiProcessTraceCollector(): {
+  onStatus(text: string, opts?: { isClearStream?: boolean }): void;
+  onDelta(text: string): void;
+  getLiveMain(): string;
+  getLiveInterim(): string;
+  getItems(): Array<{ type: 'status' | 'text'; value: string }>;
+  reset(): void;
+  buildPersistedTrace():
+    | { items: Array<{ type: 'status' | 'text'; value: string }>; defaultCollapsed: boolean }
+    | undefined;
+};
+
+export function snapshotOrchidAiProcessTraceItems(
+  collector: ReturnType<typeof createOrchidAiProcessTraceCollector>
+): { items: Array<{ type: 'status' | 'text'; value: string }>; defaultCollapsed: boolean };
+
+export function augmentLiveProcessTraceSnapshot(
+  trace: { items: Array<{ type: 'status' | 'text'; value: string }>; defaultCollapsed: boolean },
+  streamingMain: string,
+  liveInterim?: string
+): { items: Array<{ type: 'status' | 'text'; value: string }>; defaultCollapsed: boolean };
+
+export function orchidAiProcessTraceHasDisplayableContent(
+  trace: ChatMessage['processTrace'] | undefined,
+  liveInterim: string | undefined,
+  options?: { isStreaming?: boolean }
+): boolean;
+
+/** SSE status before post-tool assistant text; client separates interim vs final answer. */
+export const ORCHID_AI_SSE_STATUS_CLEAR_STREAM: string;
+export function orchidAiStatusClearsStreamBuffer(statusText: unknown): boolean;
+
 // ─── Constants ───────────────────────────────────────────────────────────────
 
 export const ORCHID_AI_VISUALIZATION_INSTRUCTIONS: string;

package/src/index.js

@@ -50,3 +50,14 @@ export {
 
 // AI system prompt constant
 export { ORCHID_AI_VISUALIZATION_INSTRUCTIONS } from './constants/visualizationInstructions';
+
+export {
+  augmentLiveProcessTraceSnapshot,
+  createOrchidAiProcessTraceCollector,
+  orchidAiProcessTraceHasDisplayableContent,
+  snapshotOrchidAiProcessTraceItems,
+  orchidAiProcessTraceEntryKind,
+} from './orchidAiProcessTrace';
+
+// SSE + interim/process trace (Hermes)
+export { ORCHID_AI_SSE_STATUS_CLEAR_STREAM, orchidAiStatusClearsStreamBuffer } from './orchidAiStreamingTitle';

package/src/orchidAiProcessTrace.js

@@ -0,0 +1,163 @@
+import { ORCHID_AI_SSE_STATUS_CLEAR_STREAM } from './orchidAiStreamingTitle';
+
+/**
+ * Visual timeline lane for Message.jsx: tool-style statuses vs compile vs generic vs prose.
+ * @param {{ type: 'status' | 'text', value: string }} entry
+ * @returns {'text' | 'tool' | 'compile' | 'mind'}
+ */
+export function orchidAiProcessTraceEntryKind(entry) {
+  if (!entry || entry.type === 'text') return 'text';
+  const t = String(entry.value || '');
+  if (t.trim() === ORCHID_AI_SSE_STATUS_CLEAR_STREAM) return 'compile';
+  if (
+    /^Looking up/i.test(t) ||
+    /^Found \d+/i.test(t) ||
+    /^Searching the web/i.test(t) ||
+    /^Searching knowledge base/i.test(t)
+  ) {
+    return 'tool';
+  }
+  return 'mind';
+}
+
+/**
+ * Collects interim tool/preamble text + statuses for the Hermes / Orchid SSE stream.
+ * Final answer deltas go to getLiveMain(); pre-tool/streaming preamble goes to
+ * getLiveInterim() and (on "Compiling response") into frozen `items`.
+ *
+ * Phase machine:
+ * - `open_answer`: deltas accumulate in main (direct replies, or post-compile answer).
+ * - When a tool-style status arrives (e.g. "Looking up jobs"), migrate main → interim and enter `tool_interim`.
+ * - `tool_interim`: deltas go to interim; on `Compiling response`, flush interim to items and return to `open_answer`.
+ */
+export function createOrchidAiProcessTraceCollector() {
+  /** @type {'open_answer' | 'tool_interim'} */
+  let phase = 'open_answer';
+  let preBuf = '';
+  let mainBuf = '';
+  /** @type {{ type: 'status' | 'text', value: string }[]} */
+  const items = [];
+
+  /** @param {string} text */
+  function toolishStatus(text) {
+    const t = String(text || '');
+    return (
+      /^Looking up/i.test(t) ||
+      /^Found \d+/i.test(t) ||
+      /^Searching the web/i.test(t) ||
+      /^Searching knowledge base/i.test(t)
+    );
+  }
+
+  return {
+    /**
+     * @param {string} text
+     * @param {{ isClearStream?: boolean }} [opts] — true for {@link ORCHID_AI_SSE_STATUS_CLEAR_STREAM}
+     */
+    onStatus(text, opts = {}) {
+      const isClearStream = opts.isClearStream === true;
+      if (isClearStream) {
+        if (preBuf) items.push({ type: 'text', value: preBuf });
+        preBuf = '';
+        phase = 'open_answer';
+        items.push({ type: 'status', value: String(text) });
+        return;
+      }
+      if (toolishStatus(text) && phase === 'open_answer') {
+        phase = 'tool_interim';
+        if (mainBuf) {
+          preBuf = mainBuf;
+          mainBuf = '';
+        }
+      }
+      items.push({ type: 'status', value: String(text) });
+    },
+    /** @param {string} text */
+    onDelta(text) {
+      const t = String(text);
+      if (phase === 'tool_interim') preBuf += t;
+      else mainBuf += t;
+    },
+    getLiveMain() {
+      return mainBuf;
+    },
+    getLiveInterim() {
+      return phase === 'tool_interim' ? preBuf : '';
+    },
+    /** @returns {{ type: 'status' | 'text', value: string }[]} */
+    getItems() {
+      return items;
+    },
+    reset() {
+      phase = 'open_answer';
+      preBuf = '';
+      mainBuf = '';
+      items.length = 0;
+    },
+    /** Persisted shape for assistant bubbles; omit when nothing to show. */
+    buildPersistedTrace() {
+      if (!items.length) return undefined;
+      return {
+        items: items.map((x) => ({ type: x.type, value: x.value })),
+        defaultCollapsed: true,
+      };
+    },
+  };
+}
+
+/** Snapshot `items` for React state / persisted shape (live streaming; not collapsed). */
+export function snapshotOrchidAiProcessTraceItems(collector) {
+  const items = collector.getItems();
+  return {
+    items: items.map((x) => ({ type: x.type, value: x.value })),
+    defaultCollapsed: false,
+  };
+}
+
+/**
+ * Display-only: Hermes sends one `status` ("Thinking") then `delta` chunks for direct replies.
+ * Deltas never become timeline rows, so the Working panel would stay on Thinking forever.
+ * Append a synthetic step while streamed content exists (not persisted — see `buildPersistedTrace`).
+ *
+ * @param {{ items: Array<{ type: 'status' | 'text', value: string }>, defaultCollapsed: boolean }} trace
+ * @param {string} streamingMain
+ * @param {string} [liveInterim]
+ */
+export function augmentLiveProcessTraceSnapshot(trace, streamingMain, liveInterim = '') {
+  if (!trace || !Array.isArray(trace.items)) return trace;
+  const items = trace.items;
+  const mainTrim = typeof streamingMain === 'string' ? streamingMain.trim() : '';
+  const interimTrim = typeof liveInterim === 'string' ? liveInterim.trim() : '';
+
+  const onlyThinking =
+    items.length === 1 &&
+    items[0]?.type === 'status' &&
+    String(items[0].value || '').trim().toLowerCase() === 'thinking';
+
+  if (!onlyThinking) return trace;
+
+  if (mainTrim.length > 0) {
+    return {
+      ...trace,
+      items: [...items, { type: 'status', value: 'Drafting response' }],
+    };
+  }
+  if (interimTrim.length > 0) {
+    return {
+      ...trace,
+      items: [...items, { type: 'status', value: 'Gathering details' }],
+    };
+  }
+  return trace;
+}
+
+/** Whether to render the process trace panel. Pass `{ isStreaming: true }` during SSE so a lone “Thinking” status still opens the live tray. */
+export function orchidAiProcessTraceHasDisplayableContent(trace, liveInterim, options) {
+  const isStreaming = options?.isStreaming === true;
+  if (typeof liveInterim === 'string' && liveInterim.trim() !== '') return true;
+  const list = trace?.items;
+  if (!Array.isArray(list) || list.length === 0) return false;
+  if (isStreaming) return true;
+  if (list.some((i) => i && i.type === 'text' && String(i.value || '').trim() !== '')) return true;
+  return list.length > 1;
+}

package/src/orchidAiStreamingTitle.js

@@ -0,0 +1,12 @@
+/**
+ * SSE `status` emitted by Hermes immediately before streaming the post-tool assistant message.
+ * Clients use this to separate interim text from the final answer (see `orchidAiProcessTrace`).
+ *
+ * Keep in sync with `onStatus?.('Compiling response')` in iLink `orchidAiAnthropicChat.js`.
+ */
+export const ORCHID_AI_SSE_STATUS_CLEAR_STREAM = 'Compiling response';
+
+/** @param {unknown} statusText from `{ type: 'status', text }` */
+export function orchidAiStatusClearsStreamBuffer(statusText) {
+  return typeof statusText === 'string' && statusText.trim() === ORCHID_AI_SSE_STATUS_CLEAR_STREAM;
+}