@optilogic/chat 1.0.0-beta.8 → 1.0.0

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,6 +56,24 @@ 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;
+}
+
+/**
+ * Potential response (sub-agent intermediate AI response)
+ */
+export interface PotentialResponse {
+  id: string;
+  content: string;
+  timestamp: number;
+  agentName?: string | null;
+  parentAgent?: string | null;
+  depth?: number;
 }
 
 /**
@@ -53,6 +85,12 @@ export interface StatusItem {
   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;
 }
 
 /**
@@ -69,6 +107,12 @@ export interface ThinkingStep {
   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;
 }
 
 /**
@@ -96,8 +140,14 @@ export interface AgentResponseState {
   memory: MemoryItem[];
   /** Status updates from the agent */
   statusUpdates: StatusItem[];
+  /** Potential responses (sub-agent intermediate AI responses) */
+  potentialResponses?: PotentialResponse[];
+  /** Custom timeline entries (consumer-provided) */
+  customTimelineEntries?: TimelineEntry[];
   /** 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) */
@@ -110,13 +160,21 @@ export interface AgentResponseState {
  * WebSocket message payload for agent responses
  */
 export interface AgentMessage {
-  type: "status" | "thinking" | "tool_call" | "knowledge" | "memory" | "response" | "status_update";
+  type: "status" | "thinking" | "tool_call" | "knowledge" | "memory" | "response" | "status_update" | "potential_response";
   /** 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;
@@ -170,6 +228,8 @@ export const initialAgentResponseState: AgentResponseState = {
   knowledge: [],
   memory: [],
   statusUpdates: [],
+  potentialResponses: [],
+  customTimelineEntries: [],
   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={maxHeight !== "none" ? "overflow-y-auto" : ""}
+      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 pl-2">
+        {/* 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>
+  );
+}

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

@@ -0,0 +1,84 @@
+import type { ReactNode } from "react";
+import { ChevronDown, ChevronRight } from "lucide-react";
+import type { AgentRun } from "./types";
+import { TimelineItem } from "./TimelineItem";
+
+interface TimelineAgentBlockProps {
+  block: AgentRun;
+  renderMarkdown?: (content: string) => ReactNode;
+  /** If true, skip the collapsible header and render entries directly */
+  isSingleAgent: boolean;
+  /** Controlled collapsed state (lifted to AgentTimeline) */
+  isCollapsed: boolean;
+  onToggleCollapsed: () => void;
+  /** Set of entry IDs whose content is expanded (lifted to AgentTimeline) */
+  expandedItems: Set<string>;
+  onToggleItemExpanded: (entryId: string) => void;
+}
+
+export function TimelineAgentBlock({
+  block,
+  renderMarkdown,
+  isSingleAgent,
+  isCollapsed,
+  onToggleCollapsed,
+  expandedItems,
+  onToggleItemExpanded,
+}: TimelineAgentBlockProps) {
+  const indentPx = block.depth * 16;
+
+  // Skip header only for a single root-level agent (depth 0).
+  // If filtering leaves only a sub-agent, still show the header for context.
+  if (isSingleAgent && block.depth === 0) {
+    return (
+      <div style={{ paddingLeft: `${indentPx}px` }}>
+        {block.entries.map((displayEntry, i) => (
+          <TimelineItem
+            key={displayEntry.entry.id + "-" + i}
+            displayEntry={displayEntry}
+            renderMarkdown={renderMarkdown}
+            isExpanded={expandedItems.has(displayEntry.entry.id)}
+            onToggleExpanded={() => onToggleItemExpanded(displayEntry.entry.id)}
+          />
+        ))}
+      </div>
+    );
+  }
+
+  return (
+    <div style={{ paddingLeft: `${indentPx}px` }}>
+      {/* Agent header */}
+      <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"
+      >
+        {isCollapsed ? (
+          <ChevronRight className="w-3 h-3 text-muted-foreground flex-shrink-0" />
+        ) : (
+          <ChevronDown className="w-3 h-3 text-muted-foreground flex-shrink-0" />
+        )}
+        <span className="text-xs font-medium text-foreground/80">
+          {block.agentName}
+        </span>
+        <span className="text-[10px] text-muted-foreground/60">
+          ({block.entries.reduce((sum, e) => sum + e.count, 0)})
+        </span>
+      </button>
+
+      {/* Entries */}
+      {!isCollapsed && (
+        <div className="ml-4">
+          {block.entries.map((displayEntry, i) => (
+            <TimelineItem
+              key={displayEntry.entry.id + "-" + i}
+              displayEntry={displayEntry}
+              renderMarkdown={renderMarkdown}
+              isExpanded={expandedItems.has(displayEntry.entry.id)}
+              onToggleExpanded={() => onToggleItemExpanded(displayEntry.entry.id)}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,97 @@
+import type { ReactNode } from "react";
+import {
+  Brain,
+  Wrench,
+  BookOpen,
+  HardDrive,
+  Activity,
+  MessageSquare,
+  AlertCircle,
+} from "lucide-react";
+import type { DisplayEntry, TimelineEntryType } from "./types";
+
+const ICON_MAP: Record<TimelineEntryType, typeof Brain> = {
+  thinking: Brain,
+  tool_call: Wrench,
+  knowledge: BookOpen,
+  memory: HardDrive,
+  status_update: Activity,
+  ai_response: MessageSquare,
+  error: AlertCircle,
+};
+
+interface TimelineItemProps {
+  displayEntry: DisplayEntry;
+  renderMarkdown?: (content: string) => ReactNode;
+  /** Controlled expanded state (lifted to AgentTimeline) */
+  isExpanded: boolean;
+  onToggleExpanded: () => void;
+}
+
+export function TimelineItem({
+  displayEntry,
+  renderMarkdown,
+  isExpanded,
+  onToggleExpanded,
+}: TimelineItemProps) {
+  const { entry, count } = displayEntry;
+
+  const Icon = ICON_MAP[entry.type] ?? Activity;
+
+  // Determine if content is long enough to warrant truncation
+  const isLong = entry.content.length > 200 || entry.content.split("\n").length > 3;
+  const canExpand = isLong || entry.type === "ai_response";
+
+  return (
+    <div className="py-1 flex items-start gap-2 group">
+      {/* Type icon */}
+      <Icon className="w-3.5 h-3.5 text-muted-foreground flex-shrink-0 mt-0.5" />
+
+      {/* Content */}
+      <div className="min-w-0 flex-1">
+        {isExpanded && entry.type === "ai_response" && renderMarkdown ? (
+          // Expanded AI response: rendered markdown
+          <div>
+            {renderMarkdown(entry.content)}
+            <button
+              onClick={onToggleExpanded}
+              className="text-[10px] text-muted-foreground/70 hover:text-muted-foreground mt-1"
+            >
+              Show less
+            </button>
+          </div>
+        ) : isExpanded ? (
+          // Expanded non-AI: plain text
+          <div>
+            <pre className="text-xs text-muted-foreground whitespace-pre-wrap font-mono">
+              {entry.content}
+            </pre>
+            <button
+              onClick={onToggleExpanded}
+              className="text-[10px] text-muted-foreground/70 hover:text-muted-foreground mt-1"
+            >
+              Show less
+            </button>
+          </div>
+        ) : (
+          // Collapsed: truncated with optional expand
+          <div className="flex items-baseline gap-1.5 min-w-0">
+            <div
+              className={`text-xs text-muted-foreground min-w-0 ${canExpand ? "line-clamp-2 cursor-pointer hover:text-foreground/80" : ""}`}
+              onClick={canExpand ? onToggleExpanded : undefined}
+            >
+              {entry.content}
+            </div>
+
+            {/* Dedup count badge */}
+            {count > 1 && (
+              <span className="text-[10px] text-muted-foreground/60 whitespace-nowrap flex-shrink-0">
+                (x{count})
+              </span>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,14 @@
+// Components
+export { AgentTimeline, createTimelineUIState } from "./AgentTimeline";
+export type { TimelineUIState } from "./AgentTimeline";
+
+// Utilities
+export { buildTimelineEntries, groupIntoAgentRuns, deduplicateEntries } from "./utils";
+
+// Types
+export type {
+  TimelineEntry,
+  TimelineEntryType,
+  AgentRun,
+  DisplayEntry,
+} from "./types";

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

@@ -0,0 +1,49 @@
+/** All possible timeline entry types */
+export type TimelineEntryType =
+  | "thinking"
+  | "tool_call"
+  | "knowledge"
+  | "memory"
+  | "status_update"
+  | "ai_response"
+  | "error";
+
+/** A single event in the agent execution timeline */
+export interface TimelineEntry {
+  /** Unique ID for React keys */
+  id: string;
+  /** Discriminated type for icon and rendering */
+  type: TimelineEntryType;
+  /** The agent that produced this entry */
+  agentName: string | null;
+  /** The parent agent (null for root agent) */
+  parentAgent: string | null;
+  /** Nesting depth (0 = root) */
+  depth: number;
+  /** Display content (may be long) */
+  content: string;
+  /** Original title from the WebSocket message */
+  title: string | null;
+  /** Millisecond timestamp for ordering */
+  timestamp: number;
+}
+
+/** A consecutive run of messages from the same agent */
+export interface AgentRun {
+  /** Agent name (display label) */
+  agentName: string;
+  /** Parent agent name (null for root) */
+  parentAgent: string | null;
+  /** Depth in agent hierarchy */
+  depth: number;
+  /** The entries belonging to this run, in order, after dedup */
+  entries: DisplayEntry[];
+}
+
+/** After dedup — count > 1 means consecutive identical messages collapsed */
+export interface DisplayEntry {
+  /** The underlying timeline entry (first of the group if deduped) */
+  entry: TimelineEntry;
+  /** How many consecutive identical messages were collapsed into this one */
+  count: number;
+}