@optilogic/chat 1.0.0-beta.10 → 1.0.0-beta.12

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;
+}

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

@@ -0,0 +1,189 @@
+import type { TimelineEntry, AgentRun, DisplayEntry } from "./types";
+import type { AgentResponseState } from "../agent-response/types";
+
+/**
+ * Build a flat, chronologically sorted array of TimelineEntry from the
+ * accumulator state. Maps each typed array (toolCalls, knowledge, etc.)
+ * to unified TimelineEntry objects with per-source stable IDs.
+ */
+export function buildTimelineEntries(state: AgentResponseState): TimelineEntry[] {
+  const entries: TimelineEntry[] = [];
+
+  // Thinking steps (structured)
+  if (state.thinkingSteps) {
+    let idx = 0;
+    for (const step of state.thinkingSteps) {
+      entries.push({
+        id: `tl-think-${idx++}`,
+        type: "thinking",
+        agentName: step.agentName ?? null,
+        parentAgent: step.parentAgent ?? null,
+        depth: step.depth ?? 0,
+        content: step.content,
+        title: step.label,
+        timestamp: step.timestamp ?? 0,
+      });
+    }
+  } else if (state.thinking) {
+    // Plain text thinking (legacy) — single entry
+    entries.push({
+      id: "tl-think-0",
+      type: "thinking",
+      agentName: null,
+      parentAgent: null,
+      depth: 0,
+      content: state.thinking,
+      title: null,
+      timestamp: state.thinkingStartTime ?? 0,
+    });
+  }
+
+  // Tool calls
+  let toolIdx = 0;
+  for (const tool of state.toolCalls) {
+    entries.push({
+      id: `tl-tool-${toolIdx++}`,
+      type: "tool_call",
+      agentName: tool.agentName ?? null,
+      parentAgent: tool.parentAgent ?? null,
+      depth: tool.depth ?? 0,
+      content: tool.name,
+      title: null,
+      timestamp: tool.timestamp,
+    });
+  }
+
+  // Knowledge items
+  let knowIdx = 0;
+  for (const item of state.knowledge) {
+    entries.push({
+      id: `tl-know-${knowIdx++}`,
+      type: "knowledge",
+      agentName: item.agentName ?? null,
+      parentAgent: item.parentAgent ?? null,
+      depth: item.depth ?? 0,
+      content: item.content,
+      title: item.source,
+      timestamp: item.timestamp,
+    });
+  }
+
+  // Memory items
+  let memIdx = 0;
+  for (const item of state.memory) {
+    entries.push({
+      id: `tl-mem-${memIdx++}`,
+      type: "memory",
+      agentName: item.agentName ?? null,
+      parentAgent: item.parentAgent ?? null,
+      depth: item.depth ?? 0,
+      content: item.content,
+      title: item.type,
+      timestamp: item.timestamp,
+    });
+  }
+
+  // Status updates
+  let statIdx = 0;
+  for (const item of state.statusUpdates) {
+    entries.push({
+      id: `tl-stat-${statIdx++}`,
+      type: "status_update",
+      agentName: item.agentName ?? item.agent ?? null,
+      parentAgent: item.parentAgent ?? null,
+      depth: item.depth ?? 0,
+      content: item.message,
+      title: null,
+      timestamp: item.timestamp,
+    });
+  }
+
+  // Potential responses → ai_response timeline entries
+  if (state.potentialResponses) {
+    let respIdx = 0;
+    for (const resp of state.potentialResponses) {
+      entries.push({
+        id: `tl-resp-${respIdx++}`,
+        type: "ai_response",
+        agentName: resp.agentName ?? null,
+        parentAgent: resp.parentAgent ?? null,
+        depth: resp.depth ?? 0,
+        content: resp.content,
+        title: null,
+        timestamp: resp.timestamp,
+      });
+    }
+  }
+
+  // Merge any custom timeline entries (consumer-provided)
+  if (state.customTimelineEntries) {
+    entries.push(...state.customTimelineEntries);
+  }
+
+  // Sort chronologically
+  entries.sort((a, b) => a.timestamp - b.timestamp);
+
+  return entries;
+}
+
+/**
+ * Group a sorted array of timeline entries into consecutive "agent runs".
+ * A new run starts whenever the agentName changes.
+ * Each run's entries are deduplicated.
+ */
+export function groupIntoAgentRuns(entries: TimelineEntry[]): AgentRun[] {
+  const runs: AgentRun[] = [];
+  let currentRun: AgentRun | null = null;
+
+  for (const entry of entries) {
+    const name = entry.agentName || "Agent";
+
+    if (!currentRun || currentRun.agentName !== name) {
+      // Start a new run
+      currentRun = {
+        agentName: name,
+        parentAgent: entry.parentAgent,
+        depth: entry.depth,
+        entries: [],
+      };
+      runs.push(currentRun);
+    }
+
+    currentRun.entries.push({ entry, count: 1 });
+  }
+
+  // Deduplicate within each run
+  for (const run of runs) {
+    run.entries = deduplicateEntries(run.entries);
+  }
+
+  return runs;
+}
+
+/**
+ * Collapse consecutive entries with identical type AND content into
+ * a single DisplayEntry with count > 1.
+ * Handles patterns like "Loading documents" appearing 8 times.
+ */
+export function deduplicateEntries(entries: DisplayEntry[]): DisplayEntry[] {
+  if (entries.length === 0) return [];
+
+  const result: DisplayEntry[] = [entries[0]];
+
+  for (let i = 1; i < entries.length; i++) {
+    const prev = result[result.length - 1];
+    const curr = entries[i];
+
+    if (
+      prev.entry.type === curr.entry.type &&
+      prev.entry.content === curr.entry.content
+    ) {
+      // Merge into previous
+      prev.count += curr.count;
+    } else {
+      result.push({ ...curr });
+    }
+  }
+
+  return result;
+}

package/src/components/hitl-interactions/HITLQuestionPanel.tsx

@@ -25,10 +25,17 @@ export interface HITLQuestion {
   receivedAt: number;
 }
 
+export interface HITLResponseData {
+  /** Raw selected option text per question, keyed by question text */
+  selectedOptions: Record<string, string>;
+  /** Freeform text entered by the user (untrimmed) */
+  freeformText: string;
+}
+
 export interface HITLQuestionPanelProps
   extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSubmit"> {
   question: HITLQuestion;
-  onSubmit: (response: string) => void;
+  onSubmit: (response: string, data: HITLResponseData) => void;
   onStop: () => void;
 }
 
@@ -139,7 +146,7 @@ const HITLQuestionPanel = React.forwardRef<
       selectedOptions,
       freeformText
     );
-    onSubmit(combined);
+    onSubmit(combined, { selectedOptions, freeformText });
   }, [canSubmit, question.questions, selectedOptions, freeformText, onSubmit]);
 
   const handleKeyDown = useCallback(

package/src/components/hitl-interactions/index.ts

@@ -7,7 +7,7 @@
 
 // Question panel (interactive input area)
 export { HITLQuestionPanel } from "./HITLQuestionPanel";
-export type { HITLQuestionPanelProps, HITLQuestion } from "./HITLQuestionPanel";
+export type { HITLQuestionPanelProps, HITLQuestion, HITLResponseData } from "./HITLQuestionPanel";
 export { buildResponseString } from "./HITLQuestionPanel";
 
 // Interaction record (read-only history display)

package/src/components/inline-actions/ActionMarkdownRenderer.tsx

@@ -0,0 +1,60 @@
+import { useMemo } from "react";
+import { parseResponseSegments } from "./parseResponseSegments";
+import type { ActionMarkdownRendererProps } from "./types";
+
+/**
+ * Renders agent response text with inline action components.
+ *
+ * Parses the response for ```json:action blocks, renders markdown
+ * segments via the provided renderMarkdown function, and renders
+ * action segments via the component registry.
+ *
+ * Unknown action types fall back to a raw JSON code block display.
+ */
+export function ActionMarkdownRenderer({
+  content,
+  registry,
+  renderMarkdown,
+  onAction,
+  isLatest,
+}: ActionMarkdownRendererProps) {
+  const segments = useMemo(() => parseResponseSegments(content), [content]);
+
+  // If no action blocks found, render as plain markdown (skip extra wrapper divs)
+  if (segments.length === 1 && segments[0].kind === "markdown") {
+    return <>{renderMarkdown(segments[0].content)}</>;
+  }
+
+  return (
+    <>
+      {segments.map((segment, index) => {
+        if (segment.kind === "markdown") {
+          return <div key={`md-${index}`}>{renderMarkdown(segment.content)}</div>;
+        }
+
+        // Action segment — look up registered component
+        const Component = registry[segment.actionType];
+        if (!Component) {
+          // Fallback: render raw JSON as a styled code block
+          return (
+            <pre
+              key={`action-fallback-${index}`}
+              className="my-4 p-4 rounded-lg border border-border bg-muted text-sm font-mono overflow-x-auto"
+            >
+              <code>{JSON.stringify(segment.payload, null, 2)}</code>
+            </pre>
+          );
+        }
+
+        return (
+          <Component
+            key={`action-${segment.actionType}-${index}`}
+            payload={segment.payload}
+            onAction={onAction}
+            isLatest={isLatest}
+          />
+        );
+      })}
+    </>
+  );
+}

package/src/components/inline-actions/index.ts

@@ -0,0 +1,18 @@
+// Components
+export { ActionMarkdownRenderer } from "./ActionMarkdownRenderer";
+
+// Parser
+export { parseResponseSegments } from "./parseResponseSegments";
+
+// Types
+export type {
+  ResponseSegment,
+  MarkdownSegment,
+  ActionSegment,
+  InlineActionProps,
+  ActionComponentRegistry,
+  ActionMarkdownRendererProps,
+} from "./types";
+
+// Prompt template
+export { INLINE_ACTION_PROMPT } from "./prompts";

package/src/components/inline-actions/parseResponseSegments.ts

@@ -0,0 +1,66 @@
+import type { ResponseSegment } from "./types";
+
+/**
+ * Regex to match ```json:action fenced code blocks.
+ * Captures the JSON content between the fences.
+ */
+const ACTION_BLOCK_REGEX = /```json:action\s*\n([\s\S]*?)```/g;
+
+/**
+ * Parse response text into interleaved markdown and action segments.
+ *
+ * Finds ```json:action ... ``` fenced code blocks, extracts them as
+ * action segments, and returns the surrounding text as markdown segments.
+ *
+ * Malformed JSON or blocks missing a "type" field are left as markdown
+ * (rendered as raw code blocks) for graceful degradation.
+ */
+export function parseResponseSegments(text: string): ResponseSegment[] {
+  if (!text) return [];
+
+  const segments: ResponseSegment[] = [];
+  let lastIndex = 0;
+
+  // Reset regex state (global regexes are stateful)
+  ACTION_BLOCK_REGEX.lastIndex = 0;
+
+  let match: RegExpExecArray | null;
+  while ((match = ACTION_BLOCK_REGEX.exec(text)) !== null) {
+    // Add markdown segment for text before this match
+    const before = text.slice(lastIndex, match.index);
+    if (before.trim()) {
+      segments.push({ kind: "markdown", content: before });
+    }
+
+    // Try to parse the JSON content
+    const jsonContent = match[1].trim();
+    let parsed: Record<string, unknown> | null = null;
+    try {
+      parsed = JSON.parse(jsonContent);
+    } catch {
+      // Malformed JSON — fall back to markdown
+    }
+
+    if (parsed && typeof parsed === "object" && typeof parsed.type === "string") {
+      segments.push({
+        kind: "action",
+        actionType: parsed.type as string,
+        payload: parsed,
+      });
+    } else {
+      // Missing "type" field or invalid JSON — render as raw code block
+      const rawBlock = match[0];
+      segments.push({ kind: "markdown", content: rawBlock });
+    }
+
+    lastIndex = match.index + match[0].length;
+  }
+
+  // Add trailing markdown segment
+  const trailing = text.slice(lastIndex);
+  if (trailing.trim()) {
+    segments.push({ kind: "markdown", content: trailing });
+  }
+
+  return segments;
+}

package/src/components/inline-actions/prompts.ts

@@ -0,0 +1,41 @@
+/**
+ * System prompt instructions for agents that emit inline action blocks.
+ *
+ * Import and append to your agent's system prompt so it knows the
+ * json:action format. The XML tags ensure clear boundaries for the LLM.
+ *
+ * When adding a new action type, add an entry under "Available action types"
+ * and create the corresponding React component + registry entry.
+ */
+export const INLINE_ACTION_PROMPT = `
+<inline_actions>
+When your response should include interactive components (like query viewers,
+data tables, or executable actions), embed them as fenced code blocks using
+the \`json:action\` language tag:
+
+\`\`\`json:action
+{
+  "type": "action-type-here",
+  ...action-specific fields
+}
+\`\`\`
+
+Rules:
+- Each block must contain valid JSON with a "type" field.
+- The "type" must match a registered action component on the frontend.
+- Multiple action blocks per response are allowed.
+- Surround action blocks with normal markdown text for user context.
+- The action block is rendered as an interactive component in the chat UI.
+- SQL strings inside JSON must be properly escaped (newlines as \\n, quotes as \\").
+
+Available action types:
+
+- "optimap-query": Displays SQL queries with a button to execute them and
+  update the 3D globe map.
+  Required fields:
+    - type: "optimap-query"
+    - locations_sql: string (the validated locations SQL query)
+    - routes_sql: string (the validated routes SQL query)
+    - database_name: string (the target database name)
+</inline_actions>
+`;