@railtownai/railtracks-visualizer 0.0.24 → 0.0.26

package/dist/types/components/nodes/AgentNode.d.ts

@@ -23,5 +23,6 @@ export declare const getOverviewLlmDetails: (llmDetails: LLMDetails[]) => LLMDet
 export declare const sumTotalCost: (llmDetails: LLMDetails[]) => number;
 export declare const sumTotalInputTokens: (llmDetails: LLMDetails[]) => number;
 export declare const sumTotalOutputTokens: (llmDetails: LLMDetails[]) => number;
+export declare const sumTotalLatency: (llmDetails: LLMDetails[]) => number;
 export declare const AgentNode: React.FC<AgentNodeProps>;
 export {};

package/dist/types/components/nodes/AgentNodeInputRenderer.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { LLMContent } from "../../dto/AgentRunNode";
+interface InputArrayRendererProps {
+    input: LLMContent[];
+}
+export declare const InputArrayRenderer: React.FC<InputArrayRendererProps>;
+export {};

package/dist/types/components/nodes/CodeBlock.d.ts

@@ -2,6 +2,7 @@ import React from "react";
 interface CodeBlockProps {
     content: string;
     language?: string;
+    showHeader?: boolean;
 }
 export declare const CodeBlock: React.FC<CodeBlockProps>;
 export {};

package/dist/types/components/ui/header.d.ts

@@ -1,10 +1,11 @@
 import React from "react";
 import { JsonFile } from "../../hooks/useApi";
-interface AgentRun {
+import { RealTimeLastUpdate } from "../../hooks/useRailtracksStream";
+export interface AgentRunMenuItem {
     id: number;
     name: string;
-    runId: string;
-    sessionId: string;
+    run_id: string;
+    session_id: string;
 }
 interface HeaderProps {
     availableFiles: JsonFile[];
@@ -13,11 +14,13 @@ interface HeaderProps {
     onRefresh: () => void;
     loading: boolean;
     isMultipleAgentRuns: boolean;
-    agentRuns: AgentRun[];
-    selectedAgentRun: number;
-    onAgentRunSelect: (runIndex: number) => void;
+    agentRuns: AgentRunMenuItem[];
+    selectedAgentRunId: string | null;
+    onAgentRunSelect: (runId: string) => void;
     showTimeline: boolean;
     onTimelineToggle: (checked: boolean) => void;
+    realTimeConnected?: boolean;
+    realTimeLastUpdate?: RealTimeLastUpdate | null;
 }
 export declare const Header: React.FC<HeaderProps>;
 export {};

package/dist/types/dto/AgentRun.d.ts

@@ -8,21 +8,6 @@ import { AgentRunStep } from "./AgentRunStep";
  * This interface defines the structure for agent flow data that can be visualized
  * in the RailTracks UI. It contains the execution graph (nodes and edges) along
  * with timing information and session metadata.
- *
- * @example
- * ```typescript
- * const agentRun: AgentRun = {
- *   session_id: "session_123",
- *   name: "Customer Support Agent",
- *   run_id: "run_456",
- *   nodes: [...],
- *   edges: [...],
- *   stamps: [
- *     { step: 1, time: 1640995200, identifier: "start" },
- *     { step: 2, time: 1640995201, identifier: "user_input" }
- *   ]
- * };
- * ```
  */
 export interface AgentRun {
     /** Unique identifier for the agent session this run belongs to */
@@ -31,6 +16,12 @@ export interface AgentRun {
     name: string;
     /** Unique identifier for this specific agent run */
     run_id: string;
+    /** Start time of the agent run (unix timestamp) */
+    start_time: number;
+    /** End time of the agent run (unix timestamp) */
+    end_time: number;
+    /** Status of the agent run (Completed, Failed, etc.) */
+    status: string;
     /** Array of nodes representing the agent's execution steps */
     nodes: AgentRunNode[];
     /** Optional array of edges connecting the nodes in the execution flow */

package/dist/types/dto/AgentRunEdge.d.ts

@@ -1,27 +1,5 @@
-/**
- * Represents a timestamped event for an edge
- */
-export interface EdgeStamp {
-    /** The sequential step number in the agent execution */
-    step: number;
-    /** Unix timestamp when this event occurred */
-    time: number;
-    /** Unique identifier for this stamp */
-    identifier: string;
-}
-/**
- * Represents detailed information about an edge
- */
-export interface EdgeDetails {
-    /** Optional status information for the edge */
-    status?: string;
-    /** Optional array of input arguments passed to the target node */
-    input_args?: any[];
-    /** Optional object of input keyword arguments passed to the target node */
-    input_kwargs?: any;
-    /** Optional output data from the source node */
-    output?: any;
-}
+import { AgentRunEdgeStamp } from "./AgentRunEdgeStamp";
+import { AgentRunEdgeDetails } from "./AgentRunEdgeDetails";
 /**
  * Represents an edge connecting nodes in the agent execution flow
  *
@@ -29,27 +7,6 @@ export interface EdgeDetails {
  * Edges represent the flow of data and control between different execution steps,
  * with timing information and optional execution details.
  *
- * @example
- * ```typescript
- * const edge: AgentRunEdge = {
- *   identifier: "edge_123",
- *   source: "node_1",
- *   target: "node_2",
- *   stamp: {
- *     step: 2,
- *     time: 1640995201,
- *     identifier: "edge_1_to_2"
- *   },
- *   details: {
- *     state: "completed",
- *     status: "success",
- *     input_args: ["Hello world"],
- *     input_kwargs: { temperature: 0.7 },
- *     output: { response: "Hi there!" }
- *   },
- *   parent: null
- * };
- * ```
  */
 export interface AgentRunEdge {
     /** Unique identifier for this edge */
@@ -59,9 +16,9 @@ export interface AgentRunEdge {
     /** Identifier of the target node this edge connects to */
     target: string;
     /** Timestamp information for when this edge was traversed */
-    stamp: EdgeStamp;
+    stamp: AgentRunEdgeStamp;
     /** Detailed information about the edge's execution */
-    details: EdgeDetails;
+    details: AgentRunEdgeDetails;
     /** Reference to the parent edge, or null if this is a root edge */
     parent: AgentRunEdge | null;
 }

package/dist/types/dto/AgentRunEdgeDetails.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Represents detailed information about an edge
+ */
+export interface AgentRunEdgeDetails {
+    /** Optional status information for the edge */
+    status?: string;
+    /** Optional array of input arguments passed to the target node */
+    input_args?: any[];
+    /** Optional object of input keyword arguments passed to the target node */
+    input_kwargs?: any;
+    /** Optional output data from the source node */
+    output?: any;
+}

package/dist/types/dto/AgentRunEdgeStamp.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Represents a timestamped event for an edge
+ */
+export interface AgentRunEdgeStamp {
+    /** The sequential step number in the agent execution */
+    step: number;
+    /** Unix timestamp when this event occurred */
+    time: number;
+    /** Unique identifier for this stamp */
+    identifier: string;
+}

package/dist/types/dto/AgentRunNode.d.ts

@@ -15,7 +15,10 @@ export interface NodeStamp {
 export interface LLMContent {
     /** Role of the message sender (e.g., "user", "assistant", "system") */
     role: string;
-    /** The actual content of the message */
+    /** The actual content of the message.
+     * For tool calls, they can be a function call.
+     * For tool responses, it can be json.
+     * For LLM responses, it can be a string or a json object. */
     content: any;
 }
 /**
@@ -38,12 +41,16 @@ export interface LLMDetails {
     total_cost: number | null;
     /** System fingerprint for the model (null if not available) */
     system_fingerprint: string | null;
+    /** Total time taken for the node to execute in SECONDS.
+     * Older agent runs (backwards compatible) won't have latency parameter
+     * so we need to make it optional. */
+    latency?: number | null;
 }
 /**
  * Represents latency information for a node execution
  */
 export interface NodeLatency {
-    /** Total time taken for the node to execute in milliseconds */
+    /** Total time taken for the node to execute in SECONDS */
     total_time: number;
 }
 /**
@@ -69,40 +76,11 @@ export interface NodeDetails {
  * Each node represents a discrete action or decision point in the agent's workflow,
  * with timing information, execution details, and optional LLM interaction data.
  *
- * @example
- * ```typescript
- * const node: AgentRunNode = {
- *   identifier: "node_123",
- *   node_type: "llm_call",
- *   name: "Generate Response",
- *   stamp: {
- *     step: 1,
- *     time: 1640995200,
- *     identifier: "llm_call_1"
- *   },
- *   details: {
- *     internals: {
- *       llm_details: [{
- *         model_name: "gpt-4",
- *         model_provider: "openai",
- *         input: [{ role: "user", content: "Hello" }],
- *         output: { role: "assistant", content: "Hi there!" },
- *         input_tokens: 5,
- *         output_tokens: 3,
- *         total_cost: 0.0001,
- *         system_fingerprint: "fp_123"
- *       }],
- *       latency: { total_time: 1500 }
- *     }
- *   },
- *   parent: null
- * };
- * ```
  */
 export interface AgentRunNode {
     /** Unique identifier for this node */
     identifier: string;
-    /** Type of node (e.g., "llm_call", "tool_call", "decision") */
+    /** Type of node (e.g., "Tool", "Agent", "Coordinator") */
     node_type: string;
     /** Optional human-readable name for this node */
     name?: string;

package/dist/types/dto/AgentSession.d.ts

@@ -1,2 +1,13 @@
 import { AgentRun } from "./AgentRun";
-export type AgentSession = AgentRun[];
+export type AgentSession = {
+    /** Unique identifier for the agent session */
+    session_id: string;
+    /** Name of the agent session */
+    name: string;
+    /** Start time of the agent session (unix timestamp) */
+    start_time: number;
+    /** End time of the agent session (unix timestamp) */
+    end_time: number;
+    /** Array of agent runs */
+    runs: AgentRun[];
+};

package/dist/types/dto/index.d.ts

@@ -0,0 +1,9 @@
+import { AgentRun } from "./AgentRun";
+import { AgentRunEdge } from "./AgentRunEdge";
+import { AgentRunEdgeDetails } from "./AgentRunEdgeDetails";
+import { AgentRunEdgeStamp } from "./AgentRunEdgeStamp";
+import { AgentRunNode } from "./AgentRunNode";
+import { AgentRunStamp } from "./AgentRunStamp";
+import { AgentRunStep } from "./AgentRunStep";
+import { AgentSession } from "./AgentSession";
+export type { AgentRun, AgentSession, AgentRunNode, AgentRunEdge, AgentRunEdgeDetails, AgentRunEdgeStamp, AgentRunStamp, AgentRunStep };

package/dist/types/hooks/index.d.ts

@@ -1,5 +1,6 @@
 export { useApi } from "./useApi";
 export { useFlowData } from "./useFlowData";
+export { useRailtracksStream } from "./useRailtracksStream";
 export type { JsonFile, ApiError } from "./useApi";
 export type { FlowDataState } from "./useFlowData";
 export type { AgentRunNode } from "../dto/AgentRunNode";

package/dist/types/hooks/useApi.d.ts

@@ -1,3 +1,4 @@
+import { AgentSession } from "../dto/AgentSession";
 export interface JsonFile {
     name: string;
     size?: number;
@@ -11,6 +12,6 @@ export declare const useApi: () => {
     loading: boolean;
     error: ApiError | null;
     listJsonFiles: () => Promise<JsonFile[]>;
-    loadJsonFile: (filename: string) => Promise<any>;
-    triggerRefresh: () => Promise<any>;
+    loadJsonFile: (filename: string) => Promise<AgentSession | null>;
+    triggerRefresh: () => Promise<JsonFile[] | null>;
 };

package/dist/types/hooks/useFlowData.d.ts

@@ -1,9 +1,9 @@
 import { JsonFile } from "./useApi";
-import { AgentRun } from "../dto/AgentRun";
+import type { AgentSession } from "../dto";
 export interface FlowDataState {
     availableFiles: JsonFile[];
     currentFile: string | null;
-    flowData: AgentRun | null;
+    flowData: AgentSession | null;
     loading: boolean;
     error: string | null;
 }
@@ -14,5 +14,5 @@ export declare const useFlowData: () => {
     refreshFiles: () => Promise<void>;
     availableFiles: JsonFile[];
     currentFile: string | null;
-    flowData: AgentRun | null;
+    flowData: AgentSession | null;
 };

package/dist/types/hooks/useRailtracksStream.d.ts

@@ -0,0 +1,18 @@
+interface StreamMessage {
+    type: "connected" | "file_updated" | "keepalive";
+    filename?: string;
+    timestamp?: number;
+    [key: string]: any;
+}
+export interface RealTimeLastUpdate {
+    filename: string;
+    timestamp: Date;
+}
+declare const useRailtracksStream: (onMessage?: (data: StreamMessage) => void) => {
+    isConnected: boolean;
+    isConnecting: boolean;
+    error: string | null;
+    reconnect: () => Promise<void>;
+    disconnect: () => void;
+};
+export { useRailtracksStream };

package/dist/types/lib/theme.d.ts

@@ -16,6 +16,8 @@ export interface Theme {
         accentForeground: string;
         destructive: string;
         destructiveForeground: string;
+        success: string;
+        successForeground: string;
         border: string;
         mutedBorder: string;
         input: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@railtownai/railtracks-visualizer",
-  "version": "0.0.24",
+  "version": "0.0.26",
   "license": "Apache-2.0",
   "author": "Railtown AI",
   "description": "A visualizer for RailTracks agentic flows",
@@ -48,6 +48,7 @@
     "lucide-react": "0.525.0",
     "moment": "2.30.1",
     "react-countup": "6.5.3",
+    "react-textarea-autosize": "8.5.9",
     "vaul": "1.1.2"
   },
   "scripts": {