@railtownai/railtracks-visualizer 0.0.2 → 0.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/App.js CHANGED
@@ -8,82 +8,82 @@ const App = () => {
8
8
  const handleFileSelect = (filename) => {
9
9
  loadFile(filename);
10
10
  };
11
- return (_jsxs("div", { className: "app", children: [_jsxs("div", { className: "app-header", children: [_jsx("h1", { children: "RailTracks Visualizer" }), _jsx("div", { className: "file-selector-container", children: _jsx(FileSelector, { files: availableFiles, currentFile: currentFile, onFileSelect: handleFileSelect, onRefresh: refreshFiles, loading: loading, disabled: loading }) })] }), error && (_jsx("div", { className: "error-message", children: _jsxs("p", { children: ["Error: ", error] }) })), _jsx("div", { className: "visualizer-container", children: loading ? (_jsxs("div", { className: "loading-state", children: [_jsx("div", { className: "loading-spinner" }), _jsx("p", { children: "Loading flow data..." })] })) : flowData ? (_jsx(ReactFlowProvider, { children: _jsx(AgenticFlowVisualizer, { flowData: flowData }) })) : (_jsx("div", { className: "no-data-state", children: _jsx("p", { children: "Please select a file to visualize the flow data" }) })) }), _jsx("style", { children: `
12
- .app {
13
- min-height: 100vh;
14
- background: #f9fafb;
15
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
16
- }
17
-
18
- .app-header {
19
- background: white;
20
- border-bottom: 1px solid #e5e7eb;
21
- padding: 5px;
22
- display: flex;
23
- align-items: center;
24
- justify-content: space-between;
25
- box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
26
- }
27
-
28
- .app-header h1 {
29
- margin: 0;
30
- font-size: 18px;
31
- font-weight: 600;
32
- color: #1f2937;
33
- }
34
-
35
- .file-selector-container {
36
- display: flex;
37
- align-items: center;
38
- }
39
-
40
- .error-message {
41
- background: #fee2e2;
42
- border: 1px solid #fecaca;
43
- color: #991b1b;
44
- padding: 12px 20px;
45
- margin: 20px;
46
- border-radius: 6px;
47
- font-size: 14px;
48
- }
49
-
50
- .visualizer-container {
51
- padding: 20px;
52
- min-height: calc(100vh - 100px);
53
- }
54
-
55
- .loading-state {
56
- display: flex;
57
- flex-direction: column;
58
- align-items: center;
59
- justify-content: center;
60
- height: 400px;
61
- color: #6b7280;
62
- }
63
-
64
- .loading-spinner {
65
- width: 40px;
66
- height: 40px;
67
- border: 4px solid #e5e7eb;
68
- border-top: 4px solid #6366f1;
69
- border-radius: 50%;
70
- animation: spin 1s linear infinite;
71
- margin-bottom: 16px;
72
- }
73
-
74
- @keyframes spin {
75
- 0% { transform: rotate(0deg); }
76
- 100% { transform: rotate(360deg); }
77
- }
78
-
79
- .no-data-state {
80
- display: flex;
81
- align-items: center;
82
- justify-content: center;
83
- height: 400px;
84
- color: #6b7280;
85
- font-size: 16px;
86
- }
11
+ return (_jsxs("div", { className: "app", children: [_jsxs("div", { className: "app-header", children: [_jsx("h1", { children: "RailTracks Visualizer" }), _jsx("div", { className: "file-selector-container", children: _jsx(FileSelector, { files: availableFiles, currentFile: currentFile, onFileSelect: handleFileSelect, onRefresh: refreshFiles, loading: loading, disabled: loading }) })] }), error && (_jsx("div", { className: "error-message", children: _jsxs("p", { children: ["Error: ", error] }) })), _jsx("div", { className: "visualizer-container", children: loading ? (_jsxs("div", { className: "loading-state", children: [_jsx("div", { className: "loading-spinner" }), _jsx("p", { children: "Loading flow data..." })] })) : flowData ? (_jsx(ReactFlowProvider, { children: _jsx(AgenticFlowVisualizer, { flowData: flowData }) })) : (_jsx("div", { className: "no-data-state", children: _jsx("p", { children: "Please select a file to visualize the flow data" }) })) }), _jsx("style", { children: `
12
+ .app {
13
+ min-height: 100vh;
14
+ background: #f9fafb;
15
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
16
+ }
17
+
18
+ .app-header {
19
+ background: white;
20
+ border-bottom: 1px solid #e5e7eb;
21
+ padding: 5px;
22
+ display: flex;
23
+ align-items: center;
24
+ justify-content: space-between;
25
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
26
+ }
27
+
28
+ .app-header h1 {
29
+ margin: 0;
30
+ font-size: 18px;
31
+ font-weight: 600;
32
+ color: #1f2937;
33
+ }
34
+
35
+ .file-selector-container {
36
+ display: flex;
37
+ align-items: center;
38
+ }
39
+
40
+ .error-message {
41
+ background: #fee2e2;
42
+ border: 1px solid #fecaca;
43
+ color: #991b1b;
44
+ padding: 12px 20px;
45
+ margin: 20px;
46
+ border-radius: 6px;
47
+ font-size: 14px;
48
+ }
49
+
50
+ .visualizer-container {
51
+ padding: 20px;
52
+ min-height: calc(100vh - 100px);
53
+ }
54
+
55
+ .loading-state {
56
+ display: flex;
57
+ flex-direction: column;
58
+ align-items: center;
59
+ justify-content: center;
60
+ height: 400px;
61
+ color: #6b7280;
62
+ }
63
+
64
+ .loading-spinner {
65
+ width: 40px;
66
+ height: 40px;
67
+ border: 4px solid #e5e7eb;
68
+ border-top: 4px solid #6366f1;
69
+ border-radius: 50%;
70
+ animation: spin 1s linear infinite;
71
+ margin-bottom: 16px;
72
+ }
73
+
74
+ @keyframes spin {
75
+ 0% { transform: rotate(0deg); }
76
+ 100% { transform: rotate(360deg); }
77
+ }
78
+
79
+ .no-data-state {
80
+ display: flex;
81
+ align-items: center;
82
+ justify-content: center;
83
+ height: 400px;
84
+ color: #6b7280;
85
+ font-size: 16px;
86
+ }
87
87
  ` })] }));
88
88
  };
89
89
  export default App;
@@ -60,15 +60,15 @@ export const Edge = ({ id, sourceX, sourceY, targetX, targetY, sourcePosition, t
60
60
  cursor: "pointer",
61
61
  boxShadow: "0 2px 8px rgba(99,102,241,0.10)",
62
62
  transition: "background 0.2s"
63
- }, children: "Inspect" }) }) })), _jsx("style", { children: `
64
- .edge-label-renderer {
65
- z-index: 8001;
66
- user-select: none;
67
- pointer-events: auto;
68
- }
69
-
70
- .edge-label-button {
71
- pointer-events: auto;
72
- }
63
+ }, children: "Inspect" }) }) })), _jsx("style", { children: `
64
+ .edge-label-renderer {
65
+ z-index: 8001;
66
+ user-select: none;
67
+ pointer-events: auto;
68
+ }
69
+
70
+ .edge-label-button {
71
+ pointer-events: auto;
72
+ }
73
73
  ` })] }));
74
74
  };
@@ -25,76 +25,76 @@ const Node = ({ data, id }) => {
25
25
  });
26
26
  }
27
27
  };
28
- return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "agent-node", onClick: handleNodeClick, style: { cursor: "pointer" }, children: [_jsx(Handle, { type: "target", position: Position.Top, style: { background: "#6366f1" } }), _jsxs("div", { className: "agent-header", children: [_jsx("div", { className: "agent-icon", children: data.icon || "📋" }), _jsx("div", { className: "agent-label", children: data.label })] }), data.description && _jsx("div", { className: "agent-description", children: data.description }), data.step && (_jsxs("div", { className: "agent-meta", children: [_jsxs("span", { className: "step", children: ["Step: ", data.step] }), data.time && _jsx("span", { className: "time", children: new Date(data.time * 1000).toLocaleTimeString() })] })), hasOutgoingEdges && _jsx(Handle, { type: "source", position: Position.Bottom, style: { background: "#6366f1" } })] }), _jsx("style", { children: `
29
- .agent-node {
30
- padding: 12px;
31
- border-radius: 8px;
32
- background: white;
33
- border: 2px solid #e5e7eb;
34
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
35
- min-width: 200px;
36
- max-width: 250px;
37
- transition: all 0.2s ease;
38
- position: relative;
39
- z-index: -5;
40
- }
41
-
42
- .agent-node:hover {
43
- border-color: #6366f1;
44
- box-shadow: 0 4px 8px rgba(99, 102, 241, 0.2);
45
- }
46
-
47
- .agent-header {
48
- display: flex;
49
- align-items: center;
50
- gap: 8px;
51
- margin-bottom: 8px;
52
- }
53
-
54
- .agent-icon {
55
- font-size: 20px;
56
- }
57
-
58
- .agent-label {
59
- font-weight: 600;
60
- color: #1f2937;
61
- font-size: 14px;
62
- word-break: break-word;
63
- }
64
-
65
- .agent-description {
66
- color: #6b7280;
67
- font-size: 12px;
68
- line-height: 1.4;
69
- word-break: break-word;
70
- white-space: pre-line;
71
- }
72
-
73
- .agent-meta {
74
- margin-top: 8px;
75
- padding-top: 8px;
76
- border-top: 1px solid #e5e7eb;
77
- display: flex;
78
- justify-content: space-between;
79
- font-size: 10px;
80
- color: #9ca3af;
81
- }
82
-
83
- .step {
84
- background: #f3f4f6;
85
- padding: 2px 6px;
86
- border-radius: 4px;
87
- }
88
-
89
- .time {
90
- font-family: monospace;
91
- }
92
-
93
- .react-flow__handle {
94
- width: 8px;
95
- height: 8px;
96
- border: 2px solid #6366f1;
97
- }
28
+ return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "agent-node", onClick: handleNodeClick, style: { cursor: "pointer" }, children: [_jsx(Handle, { type: "target", position: Position.Top, style: { background: "#6366f1" } }), _jsxs("div", { className: "agent-header", children: [_jsx("div", { className: "agent-icon", children: data.icon || "📋" }), _jsx("div", { className: "agent-label", children: data.label })] }), data.description && _jsx("div", { className: "agent-description", children: data.description }), data.step && (_jsxs("div", { className: "agent-meta", children: [_jsxs("span", { className: "step", children: ["Step: ", data.step] }), data.time && _jsx("span", { className: "time", children: new Date(data.time * 1000).toLocaleTimeString() })] })), hasOutgoingEdges && _jsx(Handle, { type: "source", position: Position.Bottom, style: { background: "#6366f1" } })] }), _jsx("style", { children: `
29
+ .agent-node {
30
+ padding: 12px;
31
+ border-radius: 8px;
32
+ background: white;
33
+ border: 2px solid #e5e7eb;
34
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
35
+ min-width: 200px;
36
+ max-width: 250px;
37
+ transition: all 0.2s ease;
38
+ position: relative;
39
+ z-index: -5;
40
+ }
41
+
42
+ .agent-node:hover {
43
+ border-color: #6366f1;
44
+ box-shadow: 0 4px 8px rgba(99, 102, 241, 0.2);
45
+ }
46
+
47
+ .agent-header {
48
+ display: flex;
49
+ align-items: center;
50
+ gap: 8px;
51
+ margin-bottom: 8px;
52
+ }
53
+
54
+ .agent-icon {
55
+ font-size: 20px;
56
+ }
57
+
58
+ .agent-label {
59
+ font-weight: 600;
60
+ color: #1f2937;
61
+ font-size: 14px;
62
+ word-break: break-word;
63
+ }
64
+
65
+ .agent-description {
66
+ color: #6b7280;
67
+ font-size: 12px;
68
+ line-height: 1.4;
69
+ word-break: break-word;
70
+ white-space: pre-line;
71
+ }
72
+
73
+ .agent-meta {
74
+ margin-top: 8px;
75
+ padding-top: 8px;
76
+ border-top: 1px solid #e5e7eb;
77
+ display: flex;
78
+ justify-content: space-between;
79
+ font-size: 10px;
80
+ color: #9ca3af;
81
+ }
82
+
83
+ .step {
84
+ background: #f3f4f6;
85
+ padding: 2px 6px;
86
+ border-radius: 4px;
87
+ }
88
+
89
+ .time {
90
+ font-family: monospace;
91
+ }
92
+
93
+ .react-flow__handle {
94
+ width: 8px;
95
+ height: 8px;
96
+ border: 2px solid #6366f1;
97
+ }
98
98
  ` })] }));
99
99
  };
100
100
  export { Node };
@@ -139,18 +139,18 @@ const VerticalTimeline = ({ stamps, currentStep, onStepChange, onToggle }) => {
139
139
  backgroundColor: "#6366f1",
140
140
  animation: "pulse 2s infinite"
141
141
  } }))] }, step));
142
- }) }), _jsx("style", { children: `
143
- @keyframes pulse {
144
- 0% {
145
- opacity: 1;
146
- }
147
- 50% {
148
- opacity: 0.5;
149
- }
150
- 100% {
151
- opacity: 1;
152
- }
153
- }
142
+ }) }), _jsx("style", { children: `
143
+ @keyframes pulse {
144
+ 0% {
145
+ opacity: 1;
146
+ }
147
+ 50% {
148
+ opacity: 0.5;
149
+ }
150
+ 100% {
151
+ opacity: 1;
152
+ }
153
+ }
154
154
  ` })] }));
155
155
  };
156
156
  export { VerticalTimeline };
package/package.json CHANGED
@@ -1,75 +1,75 @@
1
- {
2
- "name": "@railtownai/railtracks-visualizer",
3
- "version": "0.0.2",
4
- "type": "module",
5
- "license": "Apache-2.0",
6
- "author": "Railtown AI",
7
- "description": "A visualizer for RailTracks agentic flows",
8
- "main": "dist/index.js",
9
- "module": "dist/index.js",
10
- "types": "dist/index.d.ts",
11
- "exports": {
12
- ".": {
13
- "types": "./dist/index.d.ts",
14
- "import": "./dist/index.js",
15
- "require": "./dist/index.js"
16
- }
17
- },
18
- "files": [
19
- "dist"
20
- ],
21
- "repository": {
22
- "type": "git",
23
- "url": "git+https://github.com/railtownai/railtracks-visualizer.git"
24
- },
25
- "keywords": [
26
- "agents",
27
- "visualizer",
28
- "railtracks",
29
- "agentic-flow",
30
- "react",
31
- "typescript"
32
- ],
33
- "dependencies": {
34
- "lucide-react": "0.525.0",
35
- "react": "18.3.1",
36
- "react-dom": "18.3.1",
37
- "reactflow": "11.11.4"
38
- },
39
- "scripts": {
40
- "start": "vite",
41
- "dev": "vite",
42
- "lint": "prettier --check \"src/**/*.{js,jsx,ts,tsx,json,css,md}\"",
43
- "lint:fix": "prettier --write \"src/**/*.{js,jsx,ts,tsx,json,css,md}\"",
44
- "build": "tsc && vite build",
45
- "build:lib": "tsc --project tsconfig.lib.json",
46
- "publish:dry": "npm publish --dry-run",
47
- "test": "vitest",
48
- "test:run": "vitest run",
49
- "test:ui": "vitest --ui",
50
- "up": "ncu -u -x react -x react-dom -x @types/react -x @types/react-dom && npm install"
51
- },
52
- "devDependencies": {
53
- "@testing-library/jest-dom": "6.6.3",
54
- "@testing-library/react": "16.3.0",
55
- "@types/react": "18.3.23",
56
- "@types/react-dom": "18.3.7",
57
- "@vitejs/plugin-react-swc": "3.10.2",
58
- "jsdom": "26.1.0",
59
- "npm-check-updates": "18.0.1",
60
- "prettier": "3.6.2",
61
- "typescript": "5.8.3",
62
- "vite": "7.0.5",
63
- "vitest": "3.2.4"
64
- },
65
- "prettier": {
66
- "singleQuote": false,
67
- "trailingComma": "none",
68
- "arrowParens": "always",
69
- "printWidth": 120,
70
- "tabWidth": 2,
71
- "useTabs": false,
72
- "semi": true,
73
- "bracketSpacing": true
74
- }
75
- }
1
+ {
2
+ "name": "@railtownai/railtracks-visualizer",
3
+ "version": "0.0.3",
4
+ "type": "module",
5
+ "license": "Apache-2.0",
6
+ "author": "Railtown AI",
7
+ "description": "A visualizer for RailTracks agentic flows",
8
+ "main": "dist/index.js",
9
+ "module": "dist/index.js",
10
+ "types": "dist/index.d.ts",
11
+ "exports": {
12
+ ".": {
13
+ "types": "./dist/index.d.ts",
14
+ "import": "./dist/index.js",
15
+ "require": "./dist/index.js"
16
+ }
17
+ },
18
+ "files": [
19
+ "dist"
20
+ ],
21
+ "repository": {
22
+ "type": "git",
23
+ "url": "git+https://github.com/railtownai/railtracks-visualizer.git"
24
+ },
25
+ "keywords": [
26
+ "agents",
27
+ "visualizer",
28
+ "railtracks",
29
+ "agentic-flow",
30
+ "react",
31
+ "typescript"
32
+ ],
33
+ "dependencies": {
34
+ "lucide-react": "0.525.0",
35
+ "react": "18.3.1",
36
+ "react-dom": "18.3.1",
37
+ "reactflow": "11.11.4"
38
+ },
39
+ "scripts": {
40
+ "start": "vite",
41
+ "dev": "vite",
42
+ "lint": "prettier --check \"src/**/*.{js,jsx,ts,tsx,json,css,md}\"",
43
+ "lint:fix": "prettier --write \"src/**/*.{js,jsx,ts,tsx,json,css,md}\"",
44
+ "build": "tsc && vite build",
45
+ "build:lib": "tsc --project tsconfig.lib.json",
46
+ "publish:dry": "npm publish --dry-run",
47
+ "test": "vitest",
48
+ "test:run": "vitest run",
49
+ "test:ui": "vitest --ui",
50
+ "up": "ncu -u -x react -x react-dom -x @types/react -x @types/react-dom && npm install"
51
+ },
52
+ "devDependencies": {
53
+ "@testing-library/jest-dom": "6.6.3",
54
+ "@testing-library/react": "16.3.0",
55
+ "@types/react": "18.3.23",
56
+ "@types/react-dom": "18.3.7",
57
+ "@vitejs/plugin-react-swc": "3.10.2",
58
+ "jsdom": "26.1.0",
59
+ "npm-check-updates": "18.0.1",
60
+ "prettier": "3.6.2",
61
+ "typescript": "5.8.3",
62
+ "vite": "7.0.5",
63
+ "vitest": "3.2.4"
64
+ },
65
+ "prettier": {
66
+ "singleQuote": false,
67
+ "trailingComma": "none",
68
+ "arrowParens": "always",
69
+ "printWidth": 120,
70
+ "tabWidth": 2,
71
+ "useTabs": false,
72
+ "semi": true,
73
+ "bracketSpacing": true
74
+ }
75
+ }
@@ -1,2 +0,0 @@
1
- import "@testing-library/jest-dom";
2
- //# sourceMappingURL=setup.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"setup.d.ts","sourceRoot":"","sources":["../../src/test/setup.ts"],"names":[],"mappings":"AAAA,OAAO,2BAA2B,CAAC"}
@@ -1,22 +0,0 @@
1
- import "@testing-library/jest-dom";
2
- import { vi } from "vitest";
3
- // Mock ResizeObserver for React Flow components
4
- global.ResizeObserver = class ResizeObserver {
5
- observe() { }
6
- unobserve() { }
7
- disconnect() { }
8
- };
9
- // Mock window.matchMedia
10
- Object.defineProperty(window, "matchMedia", {
11
- writable: true,
12
- value: vi.fn().mockImplementation((query) => ({
13
- matches: false,
14
- media: query,
15
- onchange: null,
16
- addListener: vi.fn(), // deprecated
17
- removeListener: vi.fn(), // deprecated
18
- addEventListener: vi.fn(),
19
- removeEventListener: vi.fn(),
20
- dispatchEvent: vi.fn()
21
- }))
22
- });