# Railtracks Timeline Visualizer

A React-based timeline visualizer for Railtracks agentic flows

## 🚀 Quick Start

### As an NPM Package

1. **Install the package:**

   ```bash
   npm install @railtownai/railtracks-timeline
   ```

2. **Import and use in your React app:**

   ```tsx
   import { TimelineVisualizer } from "@railtownai/railtracks-timeline";
   import { AgentRun } from "@railtownai/railtracks-timeline";

   function App() {
     // Option 1: Pass JSON string (backward compatible)
     const jsonData = JSON.stringify(agentRunData);

     // Option 2: Pass AgentRun object directly (new feature)
     const agentRunData: AgentRun = {
       name: "My Agent",
       run_id: "run-456",
       start_time: 1725792000,
       end_time: 1725795600,
       status: "Completed",
       nodes: [
         // ... your agent nodes
       ]
     };

     return (
       <div>
         {/* Using JSON string */}
         <TimelineVisualizer data={jsonData} />

         {/* Using AgentRun object directly */}
         <TimelineVisualizer data={agentRunData} />
       </div>
     );
   }
   ```

### Optional `style` Prop

You can specify the timeline view style using the optional `style` prop:

```tsx
<TimelineVisualizer data={agentRunData} style="tree" />
```

or

```tsx
<TimelineVisualizer data={agentRunData} style="flat" />
```

If omitted, the default is `flat`.

## 🎨 Features

- **Configurable View Style**: Use the `style` prop to switch between `tree` and `flat` timeline views

- **Interactive Flow Visualization**: Visualize agentic flows with nodes and edges in a timeline view
- **Timeline Navigation**: Step through the flow execution timeline
- **Flexible Data Input**: Accept both JSON strings and AgentRun objects directly
- **Type Safety**: Full TypeScript support with AgentRun interface
- **Responsive Design**: Works on different screen sizes

## 📄 License

MIT

## 📞 Support

For issues and questions, please [open an issue on GitHub](https://github.com/RailtownAI/railtracks-timeline/issues).