@optilogic/chat 1.3.3 → 1.3.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@optilogic/chat",
-  "version": "1.3.3",
+  "version": "1.3.5",
   "description": "Chat UI components for Optilogic - AgentResponse and related components for LLM interactions",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -24,8 +24,8 @@
     "README.md"
   ],
   "dependencies": {
-    "@optilogic/editor": "1.3.3",
-    "@optilogic/core": "1.3.3"
+    "@optilogic/core": "1.3.5",
+    "@optilogic/editor": "1.3.5"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",

package/src/components/agent-response/AgentResponse.tsx

@@ -22,6 +22,42 @@ export interface AgentResponseClassNames {
   response?: string;
 }
 
+/**
+ * Tour anchors (`data-tour` attribute values) to attach to specific elements
+ * inside an AgentResponse so a tour or test harness can target them.
+ *
+ * Each value, when provided, is rendered as `data-tour={value}` on the
+ * corresponding element. Omit a field to skip stamping the attribute on that
+ * element. Pair with the matching CSS selector form:
+ *
+ *   <AgentResponse anchors={{ copyAction: "chat-action-copy" }} />
+ *   // selector: '[data-tour="chat-action-copy"]'
+ *
+ * This is the standard convention in the @optilogic component library for
+ * threading tour IDs into elements that are rendered by internal
+ * sub-components and not otherwise reachable from the caller.
+ */
+export interface AgentResponseAnchors {
+  /** Status updates popover trigger in the metadata row (live status indicator). */
+  statusUpdate?: string;
+  /** Thinking expand/collapse toggle button in the metadata row. */
+  thinkingToggle?: string;
+  /** Thinking section content panel (when expanded). */
+  thinkingSection?: string;
+  /** Tool calls popover trigger in the metadata row. */
+  toolCalls?: string;
+  /** Knowledge popover trigger in the metadata row. */
+  knowledge?: string;
+  /** Memory popover trigger in the metadata row. */
+  memory?: string;
+  /** Copy button in the action bar. */
+  copyAction?: string;
+  /** Thumbs up button in the action bar. */
+  thumbsUp?: string;
+  /** Thumbs down button in the action bar. */
+  thumbsDown?: string;
+}
+
 export interface AgentResponseProps extends React.HTMLAttributes<HTMLDivElement> {
   /** The response state to render */
   state: AgentResponseState;
@@ -121,6 +157,22 @@ export interface AgentResponseProps extends React.HTMLAttributes<HTMLDivElement>
    * />
    */
   classNames?: AgentResponseClassNames;
+
+  /**
+   * Tour anchors threaded into internal sub-components. See
+   * {@link AgentResponseAnchors} for the available element keys.
+   *
+   * @example
+   * <AgentResponse
+   *   state={state}
+   *   anchors={{
+   *     copyAction: "chat-action-copy",
+   *     thumbsUp: "chat-action-thumbs-up",
+   *     thumbsDown: "chat-action-thumbs-down",
+   *   }}
+   * />
+   */
+  anchors?: AgentResponseAnchors;
 }
 
 /**
@@ -175,6 +227,7 @@ const AgentResponse = React.forwardRef<HTMLDivElement, AgentResponseProps>(
       renderThinkingMarkdown,
       timelineMaxHeight,
       classNames,
+      anchors,
       className,
       ...props
     },
@@ -280,12 +333,17 @@ const AgentResponse = React.forwardRef<HTMLDivElement, AgentResponseProps>(
                 statusContent={statusContent}
                 status={state.status}
                 elapsedTime={elapsedTime}
+                thinkingToggleAnchor={anchors?.thinkingToggle}
+                statusUpdateAnchor={anchors?.statusUpdate}
+                toolCallsAnchor={anchors?.toolCalls}
+                knowledgeAnchor={anchors?.knowledge}
+                memoryAnchor={anchors?.memory}
               />
 
               {/* Thinking Content - AgentTimeline when timeline entries exist, ThinkingSection otherwise */}
               {hasTimelineEntries ? (
                 thinkingExpanded && (
-                  <div className="pb-3 border-t border-border">
+                  <div className="pb-3 border-t border-border" data-tour={anchors?.thinkingSection}>
                     <AgentTimeline
                       entries={state.timelineEntries!}
                       renderMarkdown={renderThinkingMarkdown}
@@ -296,6 +354,7 @@ const AgentResponse = React.forwardRef<HTMLDivElement, AgentResponseProps>(
                 )
               ) : (
                 <ThinkingSection
+                  data-tour={anchors?.thinkingSection}
                   content={
                     state.thinkingSteps && state.thinkingSteps.length > 0
                       ? state.thinkingSteps
@@ -343,6 +402,9 @@ const AgentResponse = React.forwardRef<HTMLDivElement, AgentResponseProps>(
             feedback={feedback}
             onFeedbackChange={onFeedbackChange}
             onResponseCopy={onResponseCopy}
+            copyAnchor={anchors?.copyAction}
+            thumbsUpAnchor={anchors?.thumbsUp}
+            thumbsDownAnchor={anchors?.thumbsDown}
           />
         )}
       </div>

package/src/components/agent-response/components/ActionBar.tsx

@@ -24,6 +24,15 @@ export interface ActionBarProps extends React.HTMLAttributes<HTMLDivElement> {
   onFeedbackChange?: (feedback: FeedbackValue) => void;
   /** Callback when response is copied */
   onResponseCopy?: (response: string) => void;
+  /**
+   * Tour anchor (rendered as `data-tour`) on the copy button.
+   * Use with the `data-tour` convention to target this button from a tour step.
+   */
+  copyAnchor?: string;
+  /** Tour anchor (`data-tour`) on the thumbs up button. */
+  thumbsUpAnchor?: string;
+  /** Tour anchor (`data-tour`) on the thumbs down button. */
+  thumbsDownAnchor?: string;
 }
 
 /**
@@ -51,6 +60,9 @@ const ActionBar = React.forwardRef<HTMLDivElement, ActionBarProps>(
       feedback,
       onFeedbackChange,
       onResponseCopy,
+      copyAnchor,
+      thumbsUpAnchor,
+      thumbsDownAnchor,
       className,
       ...props
     },
@@ -97,6 +109,7 @@ const ActionBar = React.forwardRef<HTMLDivElement, ActionBarProps>(
         <div className="flex items-center gap-1">
           {/* Copy button */}
           <button
+            data-tour={copyAnchor}
             onClick={handleCopy}
             className="p-1.5 rounded hover:bg-muted transition-colors text-muted-foreground hover:text-foreground"
             title={copied ? "Copied!" : "Copy response"}
@@ -110,6 +123,7 @@ const ActionBar = React.forwardRef<HTMLDivElement, ActionBarProps>(
 
           {/* Thumbs up */}
           <button
+            data-tour={thumbsUpAnchor}
             onClick={handleThumbsUp}
             className={cn(
               "p-1.5 rounded hover:bg-muted transition-colors",
@@ -124,6 +138,7 @@ const ActionBar = React.forwardRef<HTMLDivElement, ActionBarProps>(
 
           {/* Thumbs down */}
           <button
+            data-tour={thumbsDownAnchor}
             onClick={handleThumbsDown}
             className={cn(
               "p-1.5 rounded hover:bg-muted transition-colors",

package/src/components/agent-response/components/ActivityIndicators.tsx

@@ -18,6 +18,14 @@ export interface ActivityIndicatorsProps extends React.HTMLAttributes<HTMLDivEle
   memory: MemoryItem[];
   /** Status updates to display */
   statusUpdates?: StatusItem[];
+  /** Tour anchor (`data-tour`) on the status updates popover trigger. */
+  statusUpdateAnchor?: string;
+  /** Tour anchor (`data-tour`) on the tool calls popover trigger. */
+  toolCallsAnchor?: string;
+  /** Tour anchor (`data-tour`) on the knowledge popover trigger. */
+  knowledgeAnchor?: string;
+  /** Tour anchor (`data-tour`) on the memory popover trigger. */
+  memoryAnchor?: string;
 }
 
 /**
@@ -34,7 +42,21 @@ export interface ActivityIndicatorsProps extends React.HTMLAttributes<HTMLDivEle
  * />
  */
 const ActivityIndicators = React.forwardRef<HTMLDivElement, ActivityIndicatorsProps>(
-  ({ toolCalls, knowledge, memory, statusUpdates = [], className, ...props }, ref) => {
+  (
+    {
+      toolCalls,
+      knowledge,
+      memory,
+      statusUpdates = [],
+      statusUpdateAnchor,
+      toolCallsAnchor,
+      knowledgeAnchor,
+      memoryAnchor,
+      className,
+      ...props
+    },
+    ref,
+  ) => {
     const hasAnyActivity =
       toolCalls.length > 0 || knowledge.length > 0 || memory.length > 0 || statusUpdates.length > 0;
 
@@ -47,6 +69,7 @@ const ActivityIndicators = React.forwardRef<HTMLDivElement, ActivityIndicatorsPr
           <Popover>
             <PopoverTrigger asChild>
               <button
+                data-tour={statusUpdateAnchor}
                 className="flex items-center gap-1 text-muted-foreground hover:text-foreground transition-colors"
                 onClick={(e) => e.stopPropagation()}
               >
@@ -77,6 +100,7 @@ const ActivityIndicators = React.forwardRef<HTMLDivElement, ActivityIndicatorsPr
           <Popover>
             <PopoverTrigger asChild>
               <button
+                data-tour={toolCallsAnchor}
                 className="flex items-center gap-1 text-muted-foreground hover:text-foreground transition-colors"
                 onClick={(e) => e.stopPropagation()}
               >
@@ -109,6 +133,7 @@ const ActivityIndicators = React.forwardRef<HTMLDivElement, ActivityIndicatorsPr
           <Popover>
             <PopoverTrigger asChild>
               <button
+                data-tour={knowledgeAnchor}
                 className="flex items-center gap-1 text-muted-foreground hover:text-foreground transition-colors"
                 onClick={(e) => e.stopPropagation()}
               >
@@ -139,6 +164,7 @@ const ActivityIndicators = React.forwardRef<HTMLDivElement, ActivityIndicatorsPr
           <Popover>
             <PopoverTrigger asChild>
               <button
+                data-tour={memoryAnchor}
                 className="flex items-center gap-1 text-muted-foreground hover:text-foreground transition-colors"
                 onClick={(e) => e.stopPropagation()}
               >

package/src/components/agent-response/components/MetadataRow.tsx

@@ -32,6 +32,16 @@ export interface MetadataRowProps extends React.HTMLAttributes<HTMLDivElement> {
   status: AgentResponseStatus;
   /** Elapsed time in seconds */
   elapsedTime: number;
+  /** Tour anchor (`data-tour`) on the thinking expand/collapse toggle button. */
+  thinkingToggleAnchor?: string;
+  /** Tour anchor forwarded to the status updates popover trigger inside ActivityIndicators. */
+  statusUpdateAnchor?: string;
+  /** Tour anchor forwarded to the tool calls popover trigger inside ActivityIndicators. */
+  toolCallsAnchor?: string;
+  /** Tour anchor forwarded to the knowledge popover trigger inside ActivityIndicators. */
+  knowledgeAnchor?: string;
+  /** Tour anchor forwarded to the memory popover trigger inside ActivityIndicators. */
+  memoryAnchor?: string;
 }
 
 /**
@@ -65,6 +75,11 @@ const MetadataRow = React.forwardRef<HTMLDivElement, MetadataRowProps>(
       statusContent,
       status,
       elapsedTime,
+      thinkingToggleAnchor,
+      statusUpdateAnchor,
+      toolCallsAnchor,
+      knowledgeAnchor,
+      memoryAnchor,
       className,
       ...props
     },
@@ -127,6 +142,7 @@ const MetadataRow = React.forwardRef<HTMLDivElement, MetadataRowProps>(
         {/* Left content - clickable when there's thinking */}
         {hasThinking ? (
           <button
+            data-tour={thinkingToggleAnchor}
             onClick={onToggle}
             className="flex items-center gap-1.5 hover:bg-muted/50 -ml-1.5 pl-1.5 pr-2 py-0.5 rounded transition-colors shrink-0"
           >
@@ -150,6 +166,10 @@ const MetadataRow = React.forwardRef<HTMLDivElement, MetadataRowProps>(
           knowledge={knowledge}
           memory={memory}
           statusUpdates={statusUpdates}
+          statusUpdateAnchor={statusUpdateAnchor}
+          toolCallsAnchor={toolCallsAnchor}
+          knowledgeAnchor={knowledgeAnchor}
+          memoryAnchor={memoryAnchor}
         />
       </div>
     );

package/src/components/agent-response/hooks/useAgentResponseAccumulator.ts

@@ -1,7 +1,10 @@
 /**
  * useAgentResponseAccumulator Hook
  *
- * Accumulates agent response messages into a unified state
+ * Accumulates agent response messages into a unified state.
+ *
+ * Thin wrapper around `reduceAgentMessage` — the pure reducer can be used
+ * directly outside React for replaying historical events.
  */
 
 import { useState, useCallback } from "react";
@@ -10,14 +13,8 @@ import {
   type AgentResponseState,
   type AgentMessage,
   type GenericWebSocketMessage,
-  type ToolCall,
-  type KnowledgeItem,
-  type MemoryItem,
-  type StatusItem,
-  type ThinkingStep,
-  type PotentialResponse,
 } from "../types";
-import { buildTimelineEntries } from "../../agent-timeline/utils";
+import { reduceAgentMessage } from "../reducer";
 
 export interface UseAgentResponseAccumulatorOptions {
   /** WebSocket topic to filter messages (optional, for convenience) */
@@ -54,7 +51,6 @@ export function useAgentResponseAccumulator(
 
   const handleMessage = useCallback(
     (message: unknown) => {
-      // If topic filter is provided, check for matching topic
       let payload: AgentMessage;
 
       if (topic) {
@@ -62,216 +58,10 @@ export function useAgentResponseAccumulator(
         if (msg.topic !== topic) return;
         payload = msg.message;
       } else {
-        // Assume message is the payload directly
         payload = message as AgentMessage;
       }
 
-      setState((prev) => {
-        // If we receive a non-status message while idle, transition to processing
-        let newStatus = prev.status;
-        const isFirstMessage = prev.status === "idle" && payload.type !== "status";
-        if (isFirstMessage) {
-          newStatus = "processing";
-        }
-
-        // Track first message time for total time calculation
-        const firstMessageTime =
-          prev.firstMessageTime ?? (isFirstMessage ? Date.now() : null);
-
-        switch (payload.type) {
-          case "status":
-            // "Harness connected" resets to idle
-            if (
-              payload.message === "Harness connected" ||
-              payload.status === "Harness connected"
-            ) {
-              return { ...initialAgentResponseState };
-            }
-            return { ...prev, status: newStatus };
-
-          case "thinking": {
-            // Check if this is a structured thinking step
-            if (payload.thinkingStep) {
-              const newStep: ThinkingStep = {
-                id: payload.thinkingStep.id || `step-${Date.now()}`,
-                label: payload.thinkingStep.label,
-                content: payload.thinkingStep.content,
-                depth: payload.thinkingStep.depth ?? payload.depth ?? 0,
-                isCollapsed: payload.thinkingStep.isCollapsed,
-                timestamp: Date.now(),
-                agentName: payload.agentName,
-                parentAgent: payload.parentAgent,
-              };
-              const thinkingStartTime = prev.thinkingStartTime ?? Date.now();
-              const next = {
-                ...prev,
-                status: newStatus,
-                thinkingSteps: [...(prev.thinkingSteps || []), newStep],
-                thinkingStartTime,
-                firstMessageTime,
-              };
-              return { ...next, timelineEntries: buildTimelineEntries(next) };
-            }
-
-            // Plain text thinking — concatenate for backward compat AND
-            // push a ThinkingStep so the timeline gets individual entries.
-            const newThinking = payload.message || payload.content || "";
-            // Add line break between thinking messages
-            const separator = prev.thinking && newThinking ? "\n\n" : "";
-            // Set thinkingStartTime on first thinking message
-            const thinkingStartTime =
-              prev.thinkingStartTime ?? (newThinking ? Date.now() : null);
-            const prevSteps = prev.thinkingSteps || [];
-            const plainStep: ThinkingStep = {
-              id: `step-${prevSteps.length}`,
-              label: newThinking,
-              content: newThinking,
-              depth: payload.depth ?? 0,
-              timestamp: Date.now(),
-              agentName: payload.agentName,
-              parentAgent: payload.parentAgent,
-            };
-            const next = {
-              ...prev,
-              status: newStatus,
-              thinking: prev.thinking + separator + newThinking,
-              thinkingSteps: [...prevSteps, plainStep],
-              thinkingStartTime,
-              firstMessageTime,
-            };
-            return { ...next, timelineEntries: buildTimelineEntries(next) };
-          }
-
-          case "tool_call": {
-            // Handle both formats: { message: "ToolName" } or { tool: { id, name, arguments } }
-            const toolName = payload.message || payload.tool?.name;
-            if (toolName) {
-              const newToolCall: ToolCall = {
-                id: payload.tool?.id || `tool-${Date.now()}`,
-                name: toolName,
-                arguments: payload.tool?.arguments,
-                timestamp: Date.now(),
-                agentName: payload.agentName,
-                parentAgent: payload.parentAgent,
-                depth: payload.depth,
-              };
-              const next = {
-                ...prev,
-                status: newStatus,
-                toolCalls: [...prev.toolCalls, newToolCall],
-                firstMessageTime,
-              };
-              return { ...next, timelineEntries: buildTimelineEntries(next) };
-            }
-            return { ...prev, status: newStatus, firstMessageTime };
-          }
-
-          case "knowledge": {
-            // Handle both formats: { message: "content" } or { knowledge: { id, source, content } }
-            const knowledgeContent = payload.message || payload.knowledge?.content;
-            if (knowledgeContent) {
-              const newKnowledge: KnowledgeItem = {
-                id: payload.knowledge?.id || `knowledge-${Date.now()}`,
-                source: payload.knowledge?.source || "unknown",
-                content: knowledgeContent,
-                timestamp: Date.now(),
-                agentName: payload.agentName,
-                parentAgent: payload.parentAgent,
-                depth: payload.depth,
-              };
-              const next = {
-                ...prev,
-                status: newStatus,
-                knowledge: [...prev.knowledge, newKnowledge],
-                firstMessageTime,
-              };
-              return { ...next, timelineEntries: buildTimelineEntries(next) };
-            }
-            return { ...prev, status: newStatus, firstMessageTime };
-          }
-
-          case "memory": {
-            // Handle both formats: { message: "content" } or { memory: { id, type, content } }
-            const memoryContent = payload.message || payload.memory?.content;
-            if (memoryContent) {
-              const newMemory: MemoryItem = {
-                id: payload.memory?.id || `memory-${Date.now()}`,
-                type: payload.memory?.type || "unknown",
-                content: memoryContent,
-                timestamp: Date.now(),
-                agentName: payload.agentName,
-                parentAgent: payload.parentAgent,
-                depth: payload.depth,
-              };
-              const next = {
-                ...prev,
-                status: newStatus,
-                memory: [...prev.memory, newMemory],
-                firstMessageTime,
-              };
-              return { ...next, timelineEntries: buildTimelineEntries(next) };
-            }
-            return { ...prev, status: newStatus, firstMessageTime };
-          }
-
-          case "response":
-            return {
-              ...prev,
-              status: "complete",
-              response: payload.message || payload.content || "",
-              responseCompleteTime: Date.now(),
-              firstMessageTime: prev.firstMessageTime ?? Date.now(),
-            };
-
-          case "status_update": {
-            const statusMessage = payload.message || payload.statusUpdate?.message;
-            if (statusMessage) {
-              const newStatusItem: StatusItem = {
-                id: payload.statusUpdate?.id || `status-${Date.now()}`,
-                message: statusMessage,
-                agent: payload.statusUpdate?.agent,
-                timestamp: Date.now(),
-                agentName: payload.agentName,
-                parentAgent: payload.parentAgent,
-                depth: payload.depth,
-              };
-              const next = {
-                ...prev,
-                status: newStatus,
-                statusUpdates: [...prev.statusUpdates, newStatusItem],
-                firstMessageTime,
-              };
-              return { ...next, timelineEntries: buildTimelineEntries(next) };
-            }
-            return { ...prev, status: newStatus, firstMessageTime };
-          }
-
-          case "potential_response": {
-            const respContent = payload.message || payload.content || "";
-            if (respContent) {
-              const newResp: PotentialResponse = {
-                id: `resp-${Date.now()}`,
-                content: respContent,
-                timestamp: Date.now(),
-                agentName: payload.agentName,
-                parentAgent: payload.parentAgent,
-                depth: payload.depth,
-              };
-              const next = {
-                ...prev,
-                status: newStatus,
-                potentialResponses: [...(prev.potentialResponses || []), newResp],
-                firstMessageTime,
-              };
-              return { ...next, timelineEntries: buildTimelineEntries(next) };
-            }
-            return { ...prev, status: newStatus, firstMessageTime };
-          }
-
-          default:
-            return { ...prev, status: newStatus, firstMessageTime };
-        }
-      });
+      setState((prev) => reduceAgentMessage(prev, payload));
     },
     [topic]
   );

package/src/components/agent-response/index.ts

@@ -7,7 +7,11 @@
 
 // Main component
 export { AgentResponse } from "./AgentResponse";
-export type { AgentResponseProps, AgentResponseClassNames } from "./AgentResponse";
+export type {
+  AgentResponseProps,
+  AgentResponseClassNames,
+  AgentResponseAnchors,
+} from "./AgentResponse";
 
 // Sub-components (for advanced customization)
 export {
@@ -52,6 +56,9 @@ export type {
 
 export { initialAgentResponseState } from "./types";
 
+// Pure reducer (for non-React replay of AgentMessage streams)
+export { reduceAgentMessage } from "./reducer";
+
 // Utilities
 export { formatTime, formatTotalTime } from "./utils";