@optilogic/chat 1.3.4 → 1.3.6

package/dist/index.d.cts

@@ -332,6 +332,41 @@ interface AgentResponseClassNames {
     /** Classes for the response content section (background, padding) */
     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.
+ */
+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;
+}
 interface AgentResponseProps extends React.HTMLAttributes<HTMLDivElement> {
     /** The response state to render */
     state: AgentResponseState;
@@ -418,6 +453,21 @@ 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;
 }
 /**
  * AgentResponse Component
@@ -468,6 +518,14 @@ interface ActivityIndicatorsProps extends React.HTMLAttributes<HTMLDivElement> {
     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;
 }
 /**
  * ActivityIndicators Component
@@ -511,6 +569,16 @@ 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;
 }
 /**
  * MetadataRow Component
@@ -591,6 +659,15 @@ 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;
 }
 /**
  * ActionBar Component
@@ -873,6 +950,18 @@ interface UserPromptInputProps extends Omit<React.HTMLAttributes<HTMLDivElement>
     onTagCreate?: (tag: string) => void;
     /** Callback when a tag is deleted */
     onTagDelete?: (tag: string) => void;
+    /** Tour anchors threaded onto internal sub-elements. */
+    anchors?: UserPromptInputAnchors;
+}
+/**
+ * Tour anchors (`data-tour` attribute values) for elements inside the
+ * UserPromptInput that the caller cannot otherwise reach.
+ */
+interface UserPromptInputAnchors {
+    /** Send button (rendered when not submitting). */
+    sendButton?: string;
+    /** Stop button (rendered while submitting if `onStop` is provided). */
+    stopButton?: string;
 }
 interface UserPromptInputRef {
     /** Focus the editor */
@@ -979,4 +1068,4 @@ declare function parseResponseSegments(text: string): ResponseSegment[];
  */
 declare const INLINE_ACTION_PROMPT = "\n<inline_actions>\nWhen your response should include interactive components (like query viewers,\ndata tables, or executable actions), embed them as fenced code blocks using\nthe `json:action` language tag:\n\n```json:action\n{\n  \"type\": \"action-type-here\",\n  ...action-specific fields\n}\n```\n\nRules:\n- Each block must contain valid JSON with a \"type\" field.\n- The \"type\" must match a registered action component on the frontend.\n- Multiple action blocks per response are allowed.\n- Surround action blocks with normal markdown text for user context.\n- The action block is rendered as an interactive component in the chat UI.\n- SQL strings inside JSON must be properly escaped (newlines as \\n, quotes as \\\").\n\nAvailable action types:\n\n- \"optimap-query\": Displays SQL queries with a button to execute them and\n  update the 3D globe map.\n  Required fields:\n    - type: \"optimap-query\"\n    - locations_sql: string (the validated locations SQL query)\n    - routes_sql: string (the validated routes SQL query)\n    - database_name: string (the target database name)\n</inline_actions>\n";
 
-export { ActionBar, type ActionBarProps, type ActionComponentRegistry, ActionMarkdownRenderer, type ActionMarkdownRendererProps, type ActionSegment, ActivityIndicators, type ActivityIndicatorsProps, type AgentMessage, AgentResponse, type AgentResponseProps, type AgentResponseState, type AgentResponseStatus, type AgentRun, AgentTimeline, type DisplayEntry, type FeedbackValue, type GenericWebSocketMessage, type HITLInteraction, HITLInteractionRecord, type HITLInteractionRecordProps, type HITLQuestion, HITLQuestionPanel, type HITLQuestionPanelProps, type HITLResponseData, HITLSection, type HITLSectionProps, INLINE_ACTION_PROMPT, type InlineActionProps, type KnowledgeItem, type MarkdownSegment, type MemoryItem, MetadataRow, type MetadataRowProps, type PotentialResponse, type ResponseSegment, type StatusItem, type ThinkingContent, ThinkingSection, type ThinkingSectionProps, type ThinkingStep, type TimelineEntry, type TimelineEntryType, type TimelineUIState, type ToolCall, TruncatedMessage, type TruncatedMessageProps, type UseAgentResponseAccumulatorOptions, type UseAgentResponseAccumulatorReturn, type UseThinkingTimerOptions, UserPrompt, UserPromptInput, type UserPromptInputProps, type UserPromptInputRef, type UserPromptProps, buildResponseString, buildTimelineEntries, createTimelineUIState, deduplicateEntries, formatTime, formatTotalTime, groupIntoAgentRuns, initialAgentResponseState, parseResponseSegments, reduceAgentMessage, useAgentResponseAccumulator, useThinkingTimer };
+export { ActionBar, type ActionBarProps, type ActionComponentRegistry, ActionMarkdownRenderer, type ActionMarkdownRendererProps, type ActionSegment, ActivityIndicators, type ActivityIndicatorsProps, type AgentMessage, AgentResponse, type AgentResponseAnchors, type AgentResponseClassNames, type AgentResponseProps, type AgentResponseState, type AgentResponseStatus, type AgentRun, AgentTimeline, type DisplayEntry, type FeedbackValue, type GenericWebSocketMessage, type HITLInteraction, HITLInteractionRecord, type HITLInteractionRecordProps, type HITLQuestion, HITLQuestionPanel, type HITLQuestionPanelProps, type HITLResponseData, HITLSection, type HITLSectionProps, INLINE_ACTION_PROMPT, type InlineActionProps, type KnowledgeItem, type MarkdownSegment, type MemoryItem, MetadataRow, type MetadataRowProps, type PotentialResponse, type ResponseSegment, type StatusItem, type ThinkingContent, ThinkingSection, type ThinkingSectionProps, type ThinkingStep, type TimelineEntry, type TimelineEntryType, type TimelineUIState, type ToolCall, TruncatedMessage, type TruncatedMessageProps, type UseAgentResponseAccumulatorOptions, type UseAgentResponseAccumulatorReturn, type UseThinkingTimerOptions, UserPrompt, UserPromptInput, type UserPromptInputProps, type UserPromptInputRef, type UserPromptProps, buildResponseString, buildTimelineEntries, createTimelineUIState, deduplicateEntries, formatTime, formatTotalTime, groupIntoAgentRuns, initialAgentResponseState, parseResponseSegments, reduceAgentMessage, useAgentResponseAccumulator, useThinkingTimer };

package/dist/index.d.ts

@@ -332,6 +332,41 @@ interface AgentResponseClassNames {
     /** Classes for the response content section (background, padding) */
     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.
+ */
+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;
+}
 interface AgentResponseProps extends React.HTMLAttributes<HTMLDivElement> {
     /** The response state to render */
     state: AgentResponseState;
@@ -418,6 +453,21 @@ 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;
 }
 /**
  * AgentResponse Component
@@ -468,6 +518,14 @@ interface ActivityIndicatorsProps extends React.HTMLAttributes<HTMLDivElement> {
     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;
 }
 /**
  * ActivityIndicators Component
@@ -511,6 +569,16 @@ 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;
 }
 /**
  * MetadataRow Component
@@ -591,6 +659,15 @@ 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;
 }
 /**
  * ActionBar Component
@@ -873,6 +950,18 @@ interface UserPromptInputProps extends Omit<React.HTMLAttributes<HTMLDivElement>
     onTagCreate?: (tag: string) => void;
     /** Callback when a tag is deleted */
     onTagDelete?: (tag: string) => void;
+    /** Tour anchors threaded onto internal sub-elements. */
+    anchors?: UserPromptInputAnchors;
+}
+/**
+ * Tour anchors (`data-tour` attribute values) for elements inside the
+ * UserPromptInput that the caller cannot otherwise reach.
+ */
+interface UserPromptInputAnchors {
+    /** Send button (rendered when not submitting). */
+    sendButton?: string;
+    /** Stop button (rendered while submitting if `onStop` is provided). */
+    stopButton?: string;
 }
 interface UserPromptInputRef {
     /** Focus the editor */
@@ -979,4 +1068,4 @@ declare function parseResponseSegments(text: string): ResponseSegment[];
  */
 declare const INLINE_ACTION_PROMPT = "\n<inline_actions>\nWhen your response should include interactive components (like query viewers,\ndata tables, or executable actions), embed them as fenced code blocks using\nthe `json:action` language tag:\n\n```json:action\n{\n  \"type\": \"action-type-here\",\n  ...action-specific fields\n}\n```\n\nRules:\n- Each block must contain valid JSON with a \"type\" field.\n- The \"type\" must match a registered action component on the frontend.\n- Multiple action blocks per response are allowed.\n- Surround action blocks with normal markdown text for user context.\n- The action block is rendered as an interactive component in the chat UI.\n- SQL strings inside JSON must be properly escaped (newlines as \\n, quotes as \\\").\n\nAvailable action types:\n\n- \"optimap-query\": Displays SQL queries with a button to execute them and\n  update the 3D globe map.\n  Required fields:\n    - type: \"optimap-query\"\n    - locations_sql: string (the validated locations SQL query)\n    - routes_sql: string (the validated routes SQL query)\n    - database_name: string (the target database name)\n</inline_actions>\n";
 
-export { ActionBar, type ActionBarProps, type ActionComponentRegistry, ActionMarkdownRenderer, type ActionMarkdownRendererProps, type ActionSegment, ActivityIndicators, type ActivityIndicatorsProps, type AgentMessage, AgentResponse, type AgentResponseProps, type AgentResponseState, type AgentResponseStatus, type AgentRun, AgentTimeline, type DisplayEntry, type FeedbackValue, type GenericWebSocketMessage, type HITLInteraction, HITLInteractionRecord, type HITLInteractionRecordProps, type HITLQuestion, HITLQuestionPanel, type HITLQuestionPanelProps, type HITLResponseData, HITLSection, type HITLSectionProps, INLINE_ACTION_PROMPT, type InlineActionProps, type KnowledgeItem, type MarkdownSegment, type MemoryItem, MetadataRow, type MetadataRowProps, type PotentialResponse, type ResponseSegment, type StatusItem, type ThinkingContent, ThinkingSection, type ThinkingSectionProps, type ThinkingStep, type TimelineEntry, type TimelineEntryType, type TimelineUIState, type ToolCall, TruncatedMessage, type TruncatedMessageProps, type UseAgentResponseAccumulatorOptions, type UseAgentResponseAccumulatorReturn, type UseThinkingTimerOptions, UserPrompt, UserPromptInput, type UserPromptInputProps, type UserPromptInputRef, type UserPromptProps, buildResponseString, buildTimelineEntries, createTimelineUIState, deduplicateEntries, formatTime, formatTotalTime, groupIntoAgentRuns, initialAgentResponseState, parseResponseSegments, reduceAgentMessage, useAgentResponseAccumulator, useThinkingTimer };
+export { ActionBar, type ActionBarProps, type ActionComponentRegistry, ActionMarkdownRenderer, type ActionMarkdownRendererProps, type ActionSegment, ActivityIndicators, type ActivityIndicatorsProps, type AgentMessage, AgentResponse, type AgentResponseAnchors, type AgentResponseClassNames, type AgentResponseProps, type AgentResponseState, type AgentResponseStatus, type AgentRun, AgentTimeline, type DisplayEntry, type FeedbackValue, type GenericWebSocketMessage, type HITLInteraction, HITLInteractionRecord, type HITLInteractionRecordProps, type HITLQuestion, HITLQuestionPanel, type HITLQuestionPanelProps, type HITLResponseData, HITLSection, type HITLSectionProps, INLINE_ACTION_PROMPT, type InlineActionProps, type KnowledgeItem, type MarkdownSegment, type MemoryItem, MetadataRow, type MetadataRowProps, type PotentialResponse, type ResponseSegment, type StatusItem, type ThinkingContent, ThinkingSection, type ThinkingSectionProps, type ThinkingStep, type TimelineEntry, type TimelineEntryType, type TimelineUIState, type ToolCall, TruncatedMessage, type TruncatedMessageProps, type UseAgentResponseAccumulatorOptions, type UseAgentResponseAccumulatorReturn, type UseThinkingTimerOptions, UserPrompt, UserPromptInput, type UserPromptInputProps, type UserPromptInputRef, type UserPromptProps, buildResponseString, buildTimelineEntries, createTimelineUIState, deduplicateEntries, formatTime, formatTotalTime, groupIntoAgentRuns, initialAgentResponseState, parseResponseSegments, reduceAgentMessage, useAgentResponseAccumulator, useThinkingTimer };

package/dist/index.js

@@ -7,7 +7,18 @@ import { SlateEditor, Text } from '@optilogic/editor';
 
 // src/components/agent-response/AgentResponse.tsx
 var ActivityIndicators = React11.forwardRef(
-  ({ 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;
     if (!hasAnyActivity) return null;
     return /* @__PURE__ */ jsxs("div", { ref, className: cn("flex items-center gap-2", className), ...props, children: [
@@ -15,6 +26,7 @@ var ActivityIndicators = React11.forwardRef(
         /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
           "button",
           {
+            "data-tour": statusUpdateAnchor,
             className: "flex items-center gap-1 text-muted-foreground hover:text-foreground transition-colors",
             onClick: (e) => e.stopPropagation(),
             children: [
@@ -35,6 +47,7 @@ var ActivityIndicators = React11.forwardRef(
         /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
           "button",
           {
+            "data-tour": toolCallsAnchor,
             className: "flex items-center gap-1 text-muted-foreground hover:text-foreground transition-colors",
             onClick: (e) => e.stopPropagation(),
             children: [
@@ -55,6 +68,7 @@ var ActivityIndicators = React11.forwardRef(
         /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
           "button",
           {
+            "data-tour": knowledgeAnchor,
             className: "flex items-center gap-1 text-muted-foreground hover:text-foreground transition-colors",
             onClick: (e) => e.stopPropagation(),
             children: [
@@ -75,6 +89,7 @@ var ActivityIndicators = React11.forwardRef(
         /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
           "button",
           {
+            "data-tour": memoryAnchor,
             className: "flex items-center gap-1 text-muted-foreground hover:text-foreground transition-colors",
             onClick: (e) => e.stopPropagation(),
             children: [
@@ -137,6 +152,11 @@ var MetadataRow = React11.forwardRef(
     statusContent,
     status,
     elapsedTime,
+    thinkingToggleAnchor,
+    statusUpdateAnchor,
+    toolCallsAnchor,
+    knowledgeAnchor,
+    memoryAnchor,
     className,
     ...props
   }, ref) => {
@@ -172,8 +192,9 @@ var MetadataRow = React11.forwardRef(
           hasThinking ? /* @__PURE__ */ jsx(
             "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",
+              className: "flex items-center gap-1.5 hover:bg-hover -ml-1.5 pl-1.5 pr-2 py-0.5 rounded transition-colors shrink-0",
               children: leftContent
             }
           ) : /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1.5 shrink-0", children: leftContent }),
@@ -184,7 +205,11 @@ var MetadataRow = React11.forwardRef(
               toolCalls,
               knowledge,
               memory,
-              statusUpdates
+              statusUpdates,
+              statusUpdateAnchor,
+              toolCallsAnchor,
+              knowledgeAnchor,
+              memoryAnchor
             }
           )
         ]
@@ -204,7 +229,7 @@ var ThinkingStepItem = ({ step, renderMarkdown }) => {
       "button",
       {
         onClick: toggleCollapse,
-        className: "w-full flex items-center gap-1.5 py-1.5 px-2 hover:bg-muted/50 transition-colors text-left",
+        className: "w-full flex items-center gap-1.5 py-1.5 px-2 hover:bg-hover transition-colors text-left",
         style: { paddingLeft: `${indentPadding + 8}px` },
         children: [
           isCollapsed ? /* @__PURE__ */ jsx(ChevronRight, { className: "w-3 h-3 text-muted-foreground flex-shrink-0" }) : /* @__PURE__ */ jsx(ChevronDown, { className: "w-3 h-3 text-muted-foreground flex-shrink-0" }),
@@ -255,6 +280,9 @@ var ActionBar = React11.forwardRef(
     feedback,
     onFeedbackChange,
     onResponseCopy,
+    copyAnchor,
+    thumbsUpAnchor,
+    thumbsDownAnchor,
     className,
     ...props
   }, ref) => {
@@ -295,8 +323,9 @@ var ActionBar = React11.forwardRef(
             /* @__PURE__ */ jsx(
               "button",
               {
+                "data-tour": copyAnchor,
                 onClick: handleCopy,
-                className: "p-1.5 rounded hover:bg-muted transition-colors text-muted-foreground hover:text-foreground",
+                className: "p-1.5 rounded hover:bg-hover transition-colors text-muted-foreground hover:text-foreground",
                 title: copied ? "Copied!" : "Copy response",
                 children: copied ? /* @__PURE__ */ jsx(Check, { className: "w-4 h-4 text-green-500" }) : /* @__PURE__ */ jsx(Copy, { className: "w-4 h-4" })
               }
@@ -304,9 +333,10 @@ var ActionBar = React11.forwardRef(
             /* @__PURE__ */ jsx(
               "button",
               {
+                "data-tour": thumbsUpAnchor,
                 onClick: handleThumbsUp,
                 className: cn(
-                  "p-1.5 rounded hover:bg-muted transition-colors",
+                  "p-1.5 rounded hover:bg-hover transition-colors",
                   isThumbsUp ? "text-green-500" : "text-muted-foreground hover:text-foreground"
                 ),
                 title: "Good response",
@@ -316,9 +346,10 @@ var ActionBar = React11.forwardRef(
             /* @__PURE__ */ jsx(
               "button",
               {
+                "data-tour": thumbsDownAnchor,
                 onClick: handleThumbsDown,
                 className: cn(
-                  "p-1.5 rounded hover:bg-muted transition-colors",
+                  "p-1.5 rounded hover:bg-hover transition-colors",
                   isThumbsDown ? "text-red-500" : "text-muted-foreground hover:text-foreground"
                 ),
                 title: "Poor response",
@@ -606,7 +637,7 @@ var HITLSection = React11.forwardRef(
             "button",
             {
               onClick: toggleExpanded,
-              className: "w-full flex items-center gap-2 py-2 px-3 hover:bg-muted/50 transition-colors text-left",
+              className: "w-full flex items-center gap-2 py-2 px-3 hover:bg-hover transition-colors text-left",
               children: [
                 isExpanded ? /* @__PURE__ */ jsx(ChevronDown, { className: "w-3.5 h-3.5 text-muted-foreground flex-shrink-0" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "w-3.5 h-3.5 text-muted-foreground flex-shrink-0" }),
                 /* @__PURE__ */ jsx(MessageCircleQuestion, { className: "w-3.5 h-3.5 text-muted-foreground flex-shrink-0" }),
@@ -1123,7 +1154,7 @@ function TimelineAgentBlock({
       "button",
       {
         onClick: onToggleCollapsed,
-        className: "w-full flex items-center gap-1.5 py-1 hover:bg-muted/50 -ml-1 pl-1 pr-2 rounded transition-colors text-left",
+        className: "w-full flex items-center gap-1.5 py-1 hover:bg-hover -ml-1 pl-1 pr-2 rounded transition-colors text-left",
         children: [
           isCollapsed ? /* @__PURE__ */ jsx(ChevronRight, { className: "w-3 h-3 text-muted-foreground flex-shrink-0" }) : /* @__PURE__ */ jsx(ChevronDown, { className: "w-3 h-3 text-muted-foreground flex-shrink-0" }),
           /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-foreground/80", children: block.agentName }),
@@ -1239,7 +1270,7 @@ function AgentTimeline({ entries, renderMarkdown, uiState, maxHeight = "300px" }
               "button",
               {
                 onClick: () => toggleFilter(tc.type),
-                className: `inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-[10px] transition-colors ${isActive ? "bg-accent text-accent-foreground ring-1 ring-accent-foreground/20" : "text-muted-foreground/60 hover:text-muted-foreground hover:bg-muted/50"}`,
+                className: `inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-[10px] transition-colors ${isActive ? "bg-accent text-accent-foreground ring-1 ring-accent-foreground/20" : "text-muted-foreground/60 hover:text-muted-foreground hover:bg-hover"}`,
                 title: `${isActive ? "Hide" : "Show only"} ${tc.label}`,
                 children: [
                   /* @__PURE__ */ jsx(tc.icon, { className: "w-3 h-3" }),
@@ -1263,7 +1294,7 @@ function AgentTimeline({ entries, renderMarkdown, uiState, maxHeight = "300px" }
               "button",
               {
                 onClick: collapseAll,
-                className: "inline-flex items-center gap-0.5 text-[10px] text-muted-foreground/60 hover:text-muted-foreground px-1 py-0.5 rounded hover:bg-muted/50 transition-colors",
+                className: "inline-flex items-center gap-0.5 text-[10px] text-muted-foreground/60 hover:text-muted-foreground px-1 py-0.5 rounded hover:bg-hover transition-colors",
                 title: "Collapse all",
                 children: /* @__PURE__ */ jsx(ChevronsDownUp, { className: "w-3 h-3" })
               }
@@ -1272,7 +1303,7 @@ function AgentTimeline({ entries, renderMarkdown, uiState, maxHeight = "300px" }
               "button",
               {
                 onClick: expandAll,
-                className: "inline-flex items-center gap-0.5 text-[10px] text-muted-foreground/60 hover:text-muted-foreground px-1 py-0.5 rounded hover:bg-muted/50 transition-colors",
+                className: "inline-flex items-center gap-0.5 text-[10px] text-muted-foreground/60 hover:text-muted-foreground px-1 py-0.5 rounded hover:bg-hover transition-colors",
                 title: "Expand all",
                 children: /* @__PURE__ */ jsx(ChevronsUpDown, { className: "w-3 h-3" })
               }
@@ -1329,6 +1360,7 @@ var AgentResponse = React11.forwardRef(
     renderThinkingMarkdown,
     timelineMaxHeight,
     classNames,
+    anchors,
     className,
     ...props
   }, ref) => {
@@ -1387,10 +1419,15 @@ var AgentResponse = React11.forwardRef(
                   statusUpdates: state.statusUpdates,
                   statusContent,
                   status: state.status,
-                  elapsedTime
+                  elapsedTime,
+                  thinkingToggleAnchor: anchors?.thinkingToggle,
+                  statusUpdateAnchor: anchors?.statusUpdate,
+                  toolCallsAnchor: anchors?.toolCalls,
+                  knowledgeAnchor: anchors?.knowledge,
+                  memoryAnchor: anchors?.memory
                 }
               ),
-              hasTimelineEntries ? thinkingExpanded && /* @__PURE__ */ jsx("div", { className: "pb-3 border-t border-border", children: /* @__PURE__ */ jsx(
+              hasTimelineEntries ? thinkingExpanded && /* @__PURE__ */ jsx("div", { className: "pb-3 border-t border-border", "data-tour": anchors?.thinkingSection, children: /* @__PURE__ */ jsx(
                 AgentTimeline,
                 {
                   entries: state.timelineEntries,
@@ -1401,6 +1438,7 @@ var AgentResponse = React11.forwardRef(
               ) }) : /* @__PURE__ */ jsx(
                 ThinkingSection,
                 {
+                  "data-tour": anchors?.thinkingSection,
                   content: state.thinkingSteps && state.thinkingSteps.length > 0 ? state.thinkingSteps : state.thinking,
                   isExpanded: thinkingExpanded,
                   renderMarkdown: renderThinkingMarkdown
@@ -1434,7 +1472,10 @@ var AgentResponse = React11.forwardRef(
               totalTimeSeconds,
               feedback,
               onFeedbackChange,
-              onResponseCopy
+              onResponseCopy,
+              copyAnchor: anchors?.copyAction,
+              thumbsUpAnchor: anchors?.thumbsUp,
+              thumbsDownAnchor: anchors?.thumbsDown
             }
           )
         ]
@@ -1564,6 +1605,7 @@ var UserPromptInput = React11.forwardRef(
     enableTags = false,
     onTagCreate,
     onTagDelete,
+    anchors,
     className,
     ...props
   }, ref) => {
@@ -1683,6 +1725,7 @@ var UserPromptInput = React11.forwardRef(
             isSubmitting && onStop ? /* @__PURE__ */ jsx(Tooltip, { content: stopTooltip, disabled: !stopTooltip, children: /* @__PURE__ */ jsx(
               IconButton,
               {
+                "data-tour": anchors?.stopButton,
                 icon: /* @__PURE__ */ jsx(Square, {}),
                 variant: "filled",
                 size: "sm",
@@ -1693,6 +1736,7 @@ var UserPromptInput = React11.forwardRef(
             ) }) : /* @__PURE__ */ jsx(
               IconButton,
               {
+                "data-tour": anchors?.sendButton,
                 icon: isSubmitting ? /* @__PURE__ */ jsx(Loader2, { className: "animate-spin" }) : /* @__PURE__ */ jsx(Send, {}),
                 variant: "filled",
                 size: "sm",