@optilogic/chat 1.0.0-beta.1 → 1.0.0-beta.11

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

@@ -13,7 +13,10 @@ import {
   type ToolCall,
   type KnowledgeItem,
   type MemoryItem,
+  type StatusItem,
+  type ThinkingStep,
 } from "../types";
+import { buildTimelineEntries } from "../../agent-timeline/utils";
 
 export interface UseAgentResponseAccumulatorOptions {
   /** WebSocket topic to filter messages (optional, for convenience) */
@@ -86,19 +89,56 @@ export function useAgentResponseAccumulator(
             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);
-            return {
+            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": {
@@ -110,13 +150,17 @@ export function useAgentResponseAccumulator(
                 name: toolName,
                 arguments: payload.tool?.arguments,
                 timestamp: Date.now(),
+                agentName: payload.agentName,
+                parentAgent: payload.parentAgent,
+                depth: payload.depth,
               };
-              return {
+              const next = {
                 ...prev,
                 status: newStatus,
                 toolCalls: [...prev.toolCalls, newToolCall],
                 firstMessageTime,
               };
+              return { ...next, timelineEntries: buildTimelineEntries(next) };
             }
             return { ...prev, status: newStatus, firstMessageTime };
           }
@@ -130,13 +174,17 @@ export function useAgentResponseAccumulator(
                 source: payload.knowledge?.source || "unknown",
                 content: knowledgeContent,
                 timestamp: Date.now(),
+                agentName: payload.agentName,
+                parentAgent: payload.parentAgent,
+                depth: payload.depth,
               };
-              return {
+              const next = {
                 ...prev,
                 status: newStatus,
                 knowledge: [...prev.knowledge, newKnowledge],
                 firstMessageTime,
               };
+              return { ...next, timelineEntries: buildTimelineEntries(next) };
             }
             return { ...prev, status: newStatus, firstMessageTime };
           }
@@ -150,13 +198,17 @@ export function useAgentResponseAccumulator(
                 type: payload.memory?.type || "unknown",
                 content: memoryContent,
                 timestamp: Date.now(),
+                agentName: payload.agentName,
+                parentAgent: payload.parentAgent,
+                depth: payload.depth,
               };
-              return {
+              const next = {
                 ...prev,
                 status: newStatus,
                 memory: [...prev.memory, newMemory],
                 firstMessageTime,
               };
+              return { ...next, timelineEntries: buildTimelineEntries(next) };
             }
             return { ...prev, status: newStatus, firstMessageTime };
           }
@@ -170,6 +222,29 @@ export function useAgentResponseAccumulator(
               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 };
+          }
+
           default:
             return { ...prev, status: newStatus, firstMessageTime };
         }

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

@@ -15,10 +15,14 @@ export {
   MetadataRow,
   ThinkingSection,
   ActionBar,
+  HITLSection,
+  TruncatedMessage,
   type ActivityIndicatorsProps,
   type MetadataRowProps,
   type ThinkingSectionProps,
   type ActionBarProps,
+  type HITLSectionProps,
+  type TruncatedMessageProps,
 } from "./components";
 
 // Hooks
@@ -38,6 +42,9 @@ export type {
   ToolCall,
   KnowledgeItem,
   MemoryItem,
+  StatusItem,
+  ThinkingStep,
+  ThinkingContent,
   AgentMessage,
   GenericWebSocketMessage,
 } from "./types";
@@ -46,3 +53,19 @@ export { initialAgentResponseState } from "./types";
 
 // Utilities
 export { formatTime, formatTotalTime } from "./utils";
+
+// Agent Timeline (replaces ThinkingSection for rich execution visibility)
+export {
+  AgentTimeline,
+  createTimelineUIState,
+  buildTimelineEntries,
+  groupIntoAgentRuns,
+  deduplicateEntries,
+} from "../agent-timeline";
+export type {
+  TimelineUIState,
+  TimelineEntry,
+  TimelineEntryType,
+  AgentRun,
+  DisplayEntry,
+} from "../agent-timeline";

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

@@ -4,6 +4,8 @@
  * Type definitions for the library-ready agent response component
  */
 
+import type { TimelineEntry } from "../agent-timeline/types";
+
 /**
  * Status of the agent response cycle
  */
@@ -22,6 +24,12 @@ export interface ToolCall {
   name: string;
   arguments?: Record<string, unknown>;
   timestamp: number;
+  /** Agent that made this call (multi-agent scenarios) */
+  agentName?: string | null;
+  /** Parent agent name */
+  parentAgent?: string | null;
+  /** Nesting depth in agent hierarchy */
+  depth?: number;
 }
 
 /**
@@ -32,6 +40,12 @@ export interface KnowledgeItem {
   source: string;
   content: string;
   timestamp: number;
+  /** Agent that retrieved this (multi-agent scenarios) */
+  agentName?: string | null;
+  /** Parent agent name */
+  parentAgent?: string | null;
+  /** Nesting depth in agent hierarchy */
+  depth?: number;
 }
 
 /**
@@ -42,8 +56,60 @@ export interface MemoryItem {
   type: string;
   content: string;
   timestamp: number;
+  /** Agent that accessed this (multi-agent scenarios) */
+  agentName?: string | null;
+  /** Parent agent name */
+  parentAgent?: string | null;
+  /** Nesting depth in agent hierarchy */
+  depth?: number;
+}
+
+/**
+ * Status update information from the agent
+ */
+export interface StatusItem {
+  id: string;
+  message: string;
+  timestamp: number;
+  /** Optional agent name if in multi-agent scenario */
+  agent?: string;
+  /** Agent that produced this (multi-agent scenarios) */
+  agentName?: string | null;
+  /** Parent agent name */
+  parentAgent?: string | null;
+  /** Nesting depth in agent hierarchy */
+  depth?: number;
+}
+
+/**
+ * A single step in structured thinking content
+ */
+export interface ThinkingStep {
+  /** Unique identifier for the step */
+  id: string;
+  /** Label/title shown in the collapsible header */
+  label: string;
+  /** Content of the thinking step */
+  content: string;
+  /** Nesting depth (0 = root level, 1 = first indent, etc.) */
+  depth: number;
+  /** Whether this step should start collapsed (default: false) */
+  isCollapsed?: boolean;
+  /** Timestamp for timeline ordering */
+  timestamp?: number;
+  /** Agent that produced this (multi-agent scenarios) */
+  agentName?: string | null;
+  /** Parent agent name */
+  parentAgent?: string | null;
 }
 
+/**
+ * Union type for thinking content
+ * - string: plain text (backward compatible)
+ * - ThinkingStep[]: structured with collapsible sub-sections
+ */
+export type ThinkingContent = string | ThinkingStep[];
+
 /**
  * State shape for the agent response component
  */
@@ -52,14 +118,20 @@ export interface AgentResponseState {
   status: AgentResponseStatus;
   /** Accumulated thinking/reasoning text */
   thinking: string;
+  /** Structured thinking steps (if provided, takes precedence over thinking string) */
+  thinkingSteps?: ThinkingStep[];
   /** Tool calls made during processing */
   toolCalls: ToolCall[];
   /** Knowledge items retrieved */
   knowledge: KnowledgeItem[];
   /** Memory items accessed */
   memory: MemoryItem[];
+  /** Status updates from the agent */
+  statusUpdates: StatusItem[];
   /** Final response text */
   response: string;
+  /** Timeline entries derived from all accumulator arrays (for AgentTimeline) */
+  timelineEntries?: TimelineEntry[];
   /** Timestamp when first thinking message was received (for timer) */
   thinkingStartTime: number | null;
   /** Timestamp when response was completed (for final timer display) */
@@ -72,13 +144,21 @@ export interface AgentResponseState {
  * WebSocket message payload for agent responses
  */
 export interface AgentMessage {
-  type: "status" | "thinking" | "tool_call" | "knowledge" | "memory" | "response";
+  type: "status" | "thinking" | "tool_call" | "knowledge" | "memory" | "response" | "status_update";
   /** Message content - for simple string payloads */
   message?: string;
   /** Alternative content field */
   content?: string;
   /** For status messages */
   status?: string;
+  /** Agent name (multi-agent scenarios) */
+  agentName?: string | null;
+  /** Parent agent name (multi-agent scenarios) */
+  parentAgent?: string | null;
+  /** Agent nesting depth (0 = root) */
+  depth?: number;
+  /** Title/label for timeline display */
+  title?: string | null;
   /** For tool_call messages */
   tool?: {
     id: string;
@@ -97,6 +177,20 @@ export interface AgentMessage {
     type: string;
     content: string;
   };
+  /** For status_update messages */
+  statusUpdate?: {
+    id: string;
+    message: string;
+    agent?: string;
+  };
+  /** For structured thinking step messages */
+  thinkingStep?: {
+    id?: string;
+    label: string;
+    content: string;
+    depth?: number;
+    isCollapsed?: boolean;
+  };
 }
 
 /**
@@ -117,6 +211,7 @@ export const initialAgentResponseState: AgentResponseState = {
   toolCalls: [],
   knowledge: [],
   memory: [],
+  statusUpdates: [],
   response: "",
   thinkingStartTime: null,
   responseCompleteTime: null,

package/src/components/agent-timeline/AgentTimeline.tsx

@@ -0,0 +1,256 @@
+import { useMemo, useRef, useState, useCallback, type ReactNode } from "react";
+import {
+  Brain,
+  Wrench,
+  BookOpen,
+  HardDrive,
+  Activity,
+  MessageSquare,
+  AlertCircle,
+  ChevronsDownUp,
+  ChevronsUpDown,
+} from "lucide-react";
+import type { TimelineEntry, TimelineEntryType } from "./types";
+import { groupIntoAgentRuns } from "./utils";
+import { TimelineAgentBlock } from "./TimelineAgentBlock";
+
+/** Externalized UI state that survives component remounts */
+export interface TimelineUIState {
+  expandedItems: Set<string>;
+  collapsedRuns: Set<string>;
+  activeFilters: Set<TimelineEntryType>;
+}
+
+export function createTimelineUIState(): TimelineUIState {
+  return {
+    expandedItems: new Set(),
+    collapsedRuns: new Set(),
+    activeFilters: new Set(),
+  };
+}
+
+/** Icon + label config for each entry type */
+const TYPE_CONFIG: {
+  type: TimelineEntryType;
+  icon: typeof Brain;
+  label: string;
+}[] = [
+  { type: "status_update", icon: Activity, label: "Status" },
+  { type: "thinking", icon: Brain, label: "Thinking" },
+  { type: "tool_call", icon: Wrench, label: "Tools" },
+  { type: "knowledge", icon: BookOpen, label: "Knowledge" },
+  { type: "memory", icon: HardDrive, label: "Memory" },
+  { type: "ai_response", icon: MessageSquare, label: "AI" },
+  { type: "error", icon: AlertCircle, label: "Errors" },
+];
+
+interface AgentTimelineProps {
+  entries: TimelineEntry[];
+  renderMarkdown?: (content: string) => ReactNode;
+  /**
+   * External UI state store. When provided, expand/collapse/filter state
+   * is read from and written to this object (which should be ref-backed
+   * in the parent) so it survives component remounts during streaming.
+   */
+  uiState?: TimelineUIState;
+  /**
+   * Maximum height of the scrollable timeline container.
+   * Defaults to "300px". Set to "none" to disable.
+   */
+  maxHeight?: string;
+}
+
+export function AgentTimeline({ entries, renderMarkdown, uiState, maxHeight = "300px" }: AgentTimelineProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  // Render tick: forces re-renders AND invalidates useMemo deps when we mutate Sets in-place
+  const [renderTick, setRenderTick] = useState(0);
+  const forceRender = useCallback(() => setRenderTick((t) => t + 1), []);
+
+  // Resolve state: prefer external uiState (ref-backed, survives remounts)
+  // Fall back to internal state if no external store provided
+  const [internalExpandedItems] = useState<Set<string>>(() => new Set());
+  const [internalCollapsedRuns] = useState<Set<string>>(() => new Set());
+  const [internalActiveFilters] = useState<Set<TimelineEntryType>>(() => new Set());
+
+  const expandedItems = uiState?.expandedItems ?? internalExpandedItems;
+  const collapsedRuns = uiState?.collapsedRuns ?? internalCollapsedRuns;
+  const activeFilters = uiState?.activeFilters ?? internalActiveFilters;
+
+  // Compute which types actually exist in the entries
+  const availableTypes = useMemo(() => {
+    const types = new Set<TimelineEntryType>();
+    for (const entry of entries) {
+      types.add(entry.type);
+    }
+    return types;
+  }, [entries]);
+
+  // Filter entries, then group into runs
+  // eslint-disable-next-line react-hooks/exhaustive-deps -- renderTick invalidates when mutated Sets change
+  const filteredEntries = useMemo(
+    () =>
+      activeFilters.size === 0
+        ? entries
+        : entries.filter((e) => activeFilters.has(e.type)),
+    [entries, activeFilters, renderTick],
+  );
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const agentRuns = useMemo(() => groupIntoAgentRuns(filteredEntries), [filteredEntries, renderTick]);
+
+  // --- Mutators (mutate the set in-place + trigger re-render) ---
+
+  const toggleFilter = useCallback((type: TimelineEntryType) => {
+    if (activeFilters.has(type)) {
+      activeFilters.delete(type);
+    } else {
+      activeFilters.add(type);
+    }
+    forceRender();
+  }, [activeFilters, forceRender]);
+
+  const clearFilters = useCallback(() => {
+    activeFilters.clear();
+    forceRender();
+  }, [activeFilters, forceRender]);
+
+  const toggleItemExpanded = useCallback((entryId: string) => {
+    if (expandedItems.has(entryId)) {
+      expandedItems.delete(entryId);
+    } else {
+      expandedItems.add(entryId);
+    }
+    forceRender();
+  }, [expandedItems, forceRender]);
+
+  const collapseAll = useCallback(() => {
+    collapsedRuns.clear();
+    agentRuns.forEach((run, i) => {
+      collapsedRuns.add(`${run.agentName}-${i}`);
+    });
+    expandedItems.clear();
+    forceRender();
+  }, [agentRuns, collapsedRuns, expandedItems, forceRender]);
+
+  const expandAll = useCallback(() => {
+    collapsedRuns.clear();
+    agentRuns.forEach((run, i) => {
+      collapsedRuns.add(`${run.agentName}-${i}:expanded`);
+    });
+    forceRender();
+  }, [agentRuns, collapsedRuns, forceRender]);
+
+  if (entries.length === 0) return null;
+
+  const isSingle = agentRuns.length === 1;
+  const hasActiveFilter = activeFilters.size > 0;
+
+  const scrollStyle = maxHeight !== "none" ? { maxHeight } : undefined;
+
+  return (
+    <div
+      ref={containerRef}
+      className={`-mt-1 ${maxHeight !== "none" ? "overflow-y-auto scrollbar-thin" : ""}`}
+      style={scrollStyle}
+    >
+      {/* Filter + controls bar (sticky within scroll container) */}
+      <div className="sticky top-0 z-10 bg-background flex items-center gap-1 py-1.5 mb-1 border-b border-border/50 flex-wrap">
+        {/* Type filter chips */}
+        {TYPE_CONFIG.filter((tc) => availableTypes.has(tc.type)).map((tc) => {
+          const isActive = activeFilters.has(tc.type);
+          const count = entries.filter((e) => e.type === tc.type).length;
+          return (
+            <button
+              key={tc.type}
+              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"
+              }`}
+              title={`${isActive ? "Hide" : "Show only"} ${tc.label}`}
+            >
+              <tc.icon className="w-3 h-3" />
+              <span>{count}</span>
+            </button>
+          );
+        })}
+
+        {/* Clear filter button */}
+        {hasActiveFilter && (
+          <button
+            onClick={clearFilters}
+            className="text-[10px] text-muted-foreground/60 hover:text-muted-foreground px-1"
+          >
+            Clear
+          </button>
+        )}
+
+        {/* Spacer */}
+        <div className="flex-1" />
+
+        {/* Collapse/expand all */}
+        {!isSingle && (
+          <>
+            <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"
+              title="Collapse all"
+            >
+              <ChevronsDownUp className="w-3 h-3" />
+            </button>
+            <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"
+              title="Expand all"
+            >
+              <ChevronsUpDown className="w-3 h-3" />
+            </button>
+          </>
+        )}
+      </div>
+
+      {/* Timeline content */}
+      {filteredEntries.length === 0 ? (
+        <div className="text-[10px] text-muted-foreground/50 py-2 text-center">
+          No entries match the selected filters
+        </div>
+      ) : (
+        <div className="space-y-0.5">
+          {agentRuns.map((run, i) => {
+            const runKey = `${run.agentName}-${i}`;
+            const defaultCollapsed = run.depth > 0;
+            const isCollapsed = collapsedRuns.has(runKey)
+              ? true
+              : collapsedRuns.has(`${runKey}:expanded`)
+                ? false
+                : defaultCollapsed;
+
+            return (
+              <TimelineAgentBlock
+                key={runKey}
+                block={run}
+                renderMarkdown={renderMarkdown}
+                isSingleAgent={isSingle}
+                isCollapsed={isCollapsed}
+                onToggleCollapsed={() => {
+                  if (isCollapsed) {
+                    collapsedRuns.delete(runKey);
+                    collapsedRuns.add(`${runKey}:expanded`);
+                  } else {
+                    collapsedRuns.delete(`${runKey}:expanded`);
+                    collapsedRuns.add(runKey);
+                  }
+                  forceRender();
+                }}
+                expandedItems={expandedItems}
+                onToggleItemExpanded={toggleItemExpanded}
+              />
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}