@railtownai/railtracks-visualizer 0.0.2 → 0.0.3

package/dist/AgenticFlowVisualizer.js

@@ -419,292 +419,292 @@ const AgenticFlowVisualizer = ({ flowData: propFlowData, width = "100%", height
                                 // Edge Details
                                 _jsxs(_Fragment, { children: [_jsxs("div", { className: "detail-row", children: [_jsx("span", { className: "detail-label", children: "ID:" }), _jsx("span", { className: "detail-value", children: selectedData.data.id || "N/A" })] }), selectedData.data.source && (_jsxs("div", { className: "detail-row", children: [_jsx("span", { className: "detail-label", children: "Source:" }), _jsx("span", { className: "detail-value", children: selectedData.data.source })] })), selectedData.data.target && (_jsxs("div", { className: "detail-row", children: [_jsx("span", { className: "detail-label", children: "Target:" }), _jsx("span", { className: "detail-value", children: selectedData.data.target })] })), selectedData.data.label && (_jsxs("div", { className: "detail-row", children: [_jsx("span", { className: "detail-label", children: "Label:" }), _jsx("span", { className: "detail-value", children: selectedData.data.label })] })), selectedData.data.step && (_jsxs("div", { className: "detail-row", children: [_jsx("span", { className: "detail-label", children: "Step:" }), _jsx("span", { className: "detail-value", children: selectedData.data.step })] })), selectedData.data.time && (_jsxs("div", { className: "detail-row", children: [_jsx("span", { className: "detail-label", children: "Time:" }), _jsx("span", { className: "detail-value", children: new Date(selectedData.data.time * 1000).toLocaleString() })] })), selectedData.data?.details?.input_args &&
                                             Array.isArray(selectedData.data.details.input_args) &&
-                                            selectedData.data.details.input_args.length > 0 && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "detail-row", children: [_jsx("span", { className: "detail-label", children: "Inputs" }), _jsx("span", { className: "detail-value", style: { overflowY: "auto", maxHeight: "300px" }, children: Array.isArray(selectedData.data.details.input_args[0]) ? (selectedData.data.details.input_args[0].map((arg, index) => (_jsxs("div", { style: { marginBottom: 8 }, children: [_jsx("span", { className: "detail-label", children: "Role:" }), _jsx("span", { className: "detail-value", children: arg?.role || "Unknown" }), _jsx("span", { className: "detail-label", children: "Content:" }), _jsx("span", { className: "detail-value", children: arg?.content || "No content" })] }, arg?.role || index)))) : (_jsx("span", { className: "detail-value", children: JSON.stringify(selectedData.data.details.input_args[0], null, 2) })) })] }), _jsxs("div", { className: "detail-row", children: [_jsx("span", { className: "detail-label", children: "Outputs" }), _jsx("span", { className: "detail-value", children: JSON.stringify(selectedData.data?.details?.output, null, 2) })] })] }))] })) })] }))] }), showTimelines && (_jsx("div", { style: { marginLeft: "280px", marginTop: "100px" }, children: _jsx(Timeline, { stamps: flowData.stamps || flowData.steps || [], currentStep: currentStep, isPlaying: isPlaying, onStepChange: handleStepChange, onPlayPause: handlePlayPause }) })), _jsx("style", { children: `
-          .react-flow__edge-label {
-            font-size: 10px;
-            background: white;
-            padding: 2px 4px;
-            border-radius: 4px;
-            border: 1px solid #e5e7eb;
-            max-width: 150px;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-          }
-
-          /* Right Drawer Styles */
-          .right-drawer {
-            position: absolute;
-            top: 0;
-            right: 0;
-            height: 100%;
-            z-index: 1000;
-            display: flex;
-            align-items: flex-start;
-            transition: transform 0.3s ease;
-            margin-left: ${showTimelines ? "280px" : "0"}; /* Account for vertical timeline when visible */
-          }
-
-          .right-drawer:not(.open) {
-            transform: translateX(calc(100% - 50px));
-          }
-
-          .right-drawer.open {
-            transform: translateX(0);
-          }
-
-          .drawer-toggle {
-            width: 50px;
-            height: 50px;
-            background: none;
-            color: #6b7280;
-            border: none;
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            transition: color 0.2s ease;
-            margin-top: 20px;
-          }
-
-          .drawer-toggle:hover {
-            color: #374151;
-          }
-
-          .drawer-content {
-            background: white;
-            border: 1px solid #e5e7eb;
-            border-radius: 8px 0 0 8px;
-            width: 400px;
-            height: calc(100% - 40px);
-            margin-top: 20px;
-            display: flex;
-            flex-direction: column;
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-            animation: drawerSlideIn 0.3s ease-out;
-          }
-
-          .drawer-header {
-            padding: 16px 20px;
-            border-bottom: 1px solid #e5e7eb;
-            background: #f9fafb;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            flex-shrink: 0;
-          }
-
-          .drawer-header h3 {
-            margin: 0;
-            font-size: 16px;
-            font-weight: 600;
-            color: #1f2937;
-          }
-
-          .close-button {
-            background: none;
-            border: none;
-            font-size: 20px;
-            color: #6b7280;
-            cursor: pointer;
-            padding: 4px;
-            width: 28px;
-            height: 28px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            border-radius: 6px;
-            transition: all 0.2s ease;
-          }
-
-          .close-button:hover {
-            background: #e5e7eb;
-            color: #1f2937;
-          }
-
-          .drawer-body {
-            padding: 20px;
-            overflow-y: auto;
-            flex: 1;
-            width: 100%;
-            box-sizing: border-box;
-          }
-
-          .detail-row {
-            display: grid;
-            grid-template-columns: 100px 1fr;
-            margin-bottom: 12px;
-            align-items: flex-start;
-            gap: 8px;
-          }
-
-          .detail-row:last-child {
-            margin-bottom: 0;
-          }
-
-          .detail-label {
-            font-weight: 600;
-            color: #6b7280;
-            font-size: 13px;
-            word-break: break-word;
-          }
-
-          .detail-value {
-            color: #1f2937;
-            font-size: 13px;
-            word-break: break-word;
-            flex: 1;
-            width: 100%;
-            overflow: visible;
-            text-overflow: unset;
-            max-width: unset;
-            white-space: pre-line;
-            line-height: 1.4;
-          }
-
-          @keyframes drawerSlideIn {
-            from {
-              opacity: 0;
-              transform: translateX(20px);
-            }
-            to {
-              opacity: 1;
-              transform: translateX(0);
-            }
-          }
-
-          /* Scoreboard Styles */
-          .scoreboard {
-            position: absolute;
-            top: 20px;
-            left: 50%;
-            transform: translateX(-50%);
-            background: white;
-            border: 1px solid #e5e7eb;
-            border-radius: 8px;
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-            z-index: 1000;
-            min-width: 400px;
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-          }
-
-          .scoreboard-header {
-            padding: 12px 16px;
-            border-bottom: 1px solid #e5e7eb;
-            background: #f9fafb;
-            text-align: center;
-          }
-
-          .scoreboard-header h3 {
-            margin: 0;
-            font-size: 14px;
-            font-weight: 600;
-            color: #1f2937;
-          }
-
-          .scoreboard-content {
-            padding: 16px;
-            display: flex;
-            justify-content: space-around;
-            align-items: center;
-            gap: 20px;
-          }
-
-          .scoreboard-item {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            gap: 4px;
-          }
-
-          .scoreboard-label {
-            font-size: 12px;
-            color: #6b7280;
-            font-weight: 500;
-            text-transform: uppercase;
-            letter-spacing: 0.5px;
-          }
-
-          .scoreboard-count {
-            font-size: 18px;
-            font-weight: 700;
-            padding: 6px 12px;
-            border-radius: 6px;
-            min-width: 40px;
-            text-align: center;
-          }
-
-          .scoreboard-count.open {
-            background: #fef3c7;
-            color: #92400e;
-          }
-
-          .scoreboard-count.completed {
-            background: #d1fae5;
-            color: #065f46;
-          }
-
-          .scoreboard-count.error {
-            background: #fee2e2;
-            color: #991b1b;
-          }
-
-          .scoreboard-count.error.clickable {
-            transition: all 0.2s ease;
-          }
-
-          .scoreboard-count.error.clickable:hover {
-            background: #fecaca;
-            transform: scale(1.05);
-            box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
-          }
-
-          /* Side Panel Styles */
-          .side-panel {
-            position: absolute;
-            top: 0;
-            left: 0;
-            height: 100%;
-            z-index: 1000;
-            display: flex;
-            flex-direction: column;
-            transition: all 0.3s ease;
-          }
-
-          .side-panel.collapsed {
-            width: 60px;
-          }
-
-          .side-panel.expanded {
-            width: 280px;
-          }
-
-          .panel-toggle {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            border: none;
-            background: none;
-            cursor: pointer;
-            color: #6b7280;
-            transition: color 0.2s ease;
-            padding: 8px;
-            margin: 20px 0 0 0;
-          }
-
-          .panel-toggle:hover {
-            color: #374151;
-          }
-
-          .panel-content {
-            flex: 1;
-            background: white;
-            border-right: 1px solid #e5e7eb;
-            box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
-            overflow: hidden;
-          }
-
-
+                                            selectedData.data.details.input_args.length > 0 && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "detail-row", children: [_jsx("span", { className: "detail-label", children: "Inputs" }), _jsx("span", { className: "detail-value", style: { overflowY: "auto", maxHeight: "300px" }, children: Array.isArray(selectedData.data.details.input_args[0]) ? (selectedData.data.details.input_args[0].map((arg, index) => (_jsxs("div", { style: { marginBottom: 8 }, children: [_jsx("span", { className: "detail-label", children: "Role:" }), _jsx("span", { className: "detail-value", children: arg?.role || "Unknown" }), _jsx("span", { className: "detail-label", children: "Content:" }), _jsx("span", { className: "detail-value", children: arg?.content || "No content" })] }, arg?.role || index)))) : (_jsx("span", { className: "detail-value", children: JSON.stringify(selectedData.data.details.input_args[0], null, 2) })) })] }), _jsxs("div", { className: "detail-row", children: [_jsx("span", { className: "detail-label", children: "Outputs" }), _jsx("span", { className: "detail-value", children: JSON.stringify(selectedData.data?.details?.output, null, 2) })] })] }))] })) })] }))] }), showTimelines && (_jsx("div", { style: { marginLeft: "280px", marginTop: "100px" }, children: _jsx(Timeline, { stamps: flowData.stamps || flowData.steps || [], currentStep: currentStep, isPlaying: isPlaying, onStepChange: handleStepChange, onPlayPause: handlePlayPause }) })), _jsx("style", { children: `
+          .react-flow__edge-label {
+            font-size: 10px;
+            background: white;
+            padding: 2px 4px;
+            border-radius: 4px;
+            border: 1px solid #e5e7eb;
+            max-width: 150px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+
+          /* Right Drawer Styles */
+          .right-drawer {
+            position: absolute;
+            top: 0;
+            right: 0;
+            height: 100%;
+            z-index: 1000;
+            display: flex;
+            align-items: flex-start;
+            transition: transform 0.3s ease;
+            margin-left: ${showTimelines ? "280px" : "0"}; /* Account for vertical timeline when visible */
+          }
+
+          .right-drawer:not(.open) {
+            transform: translateX(calc(100% - 50px));
+          }
+
+          .right-drawer.open {
+            transform: translateX(0);
+          }
+
+          .drawer-toggle {
+            width: 50px;
+            height: 50px;
+            background: none;
+            color: #6b7280;
+            border: none;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: color 0.2s ease;
+            margin-top: 20px;
+          }
+
+          .drawer-toggle:hover {
+            color: #374151;
+          }
+
+          .drawer-content {
+            background: white;
+            border: 1px solid #e5e7eb;
+            border-radius: 8px 0 0 8px;
+            width: 400px;
+            height: calc(100% - 40px);
+            margin-top: 20px;
+            display: flex;
+            flex-direction: column;
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            animation: drawerSlideIn 0.3s ease-out;
+          }
+
+          .drawer-header {
+            padding: 16px 20px;
+            border-bottom: 1px solid #e5e7eb;
+            background: #f9fafb;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            flex-shrink: 0;
+          }
+
+          .drawer-header h3 {
+            margin: 0;
+            font-size: 16px;
+            font-weight: 600;
+            color: #1f2937;
+          }
+
+          .close-button {
+            background: none;
+            border: none;
+            font-size: 20px;
+            color: #6b7280;
+            cursor: pointer;
+            padding: 4px;
+            width: 28px;
+            height: 28px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 6px;
+            transition: all 0.2s ease;
+          }
+
+          .close-button:hover {
+            background: #e5e7eb;
+            color: #1f2937;
+          }
+
+          .drawer-body {
+            padding: 20px;
+            overflow-y: auto;
+            flex: 1;
+            width: 100%;
+            box-sizing: border-box;
+          }
+
+          .detail-row {
+            display: grid;
+            grid-template-columns: 100px 1fr;
+            margin-bottom: 12px;
+            align-items: flex-start;
+            gap: 8px;
+          }
+
+          .detail-row:last-child {
+            margin-bottom: 0;
+          }
+
+          .detail-label {
+            font-weight: 600;
+            color: #6b7280;
+            font-size: 13px;
+            word-break: break-word;
+          }
+
+          .detail-value {
+            color: #1f2937;
+            font-size: 13px;
+            word-break: break-word;
+            flex: 1;
+            width: 100%;
+            overflow: visible;
+            text-overflow: unset;
+            max-width: unset;
+            white-space: pre-line;
+            line-height: 1.4;
+          }
+
+          @keyframes drawerSlideIn {
+            from {
+              opacity: 0;
+              transform: translateX(20px);
+            }
+            to {
+              opacity: 1;
+              transform: translateX(0);
+            }
+          }
+
+          /* Scoreboard Styles */
+          .scoreboard {
+            position: absolute;
+            top: 20px;
+            left: 50%;
+            transform: translateX(-50%);
+            background: white;
+            border: 1px solid #e5e7eb;
+            border-radius: 8px;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+            z-index: 1000;
+            min-width: 400px;
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+          }
+
+          .scoreboard-header {
+            padding: 12px 16px;
+            border-bottom: 1px solid #e5e7eb;
+            background: #f9fafb;
+            text-align: center;
+          }
+
+          .scoreboard-header h3 {
+            margin: 0;
+            font-size: 14px;
+            font-weight: 600;
+            color: #1f2937;
+          }
+
+          .scoreboard-content {
+            padding: 16px;
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+            gap: 20px;
+          }
+
+          .scoreboard-item {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 4px;
+          }
+
+          .scoreboard-label {
+            font-size: 12px;
+            color: #6b7280;
+            font-weight: 500;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+          }
+
+          .scoreboard-count {
+            font-size: 18px;
+            font-weight: 700;
+            padding: 6px 12px;
+            border-radius: 6px;
+            min-width: 40px;
+            text-align: center;
+          }
+
+          .scoreboard-count.open {
+            background: #fef3c7;
+            color: #92400e;
+          }
+
+          .scoreboard-count.completed {
+            background: #d1fae5;
+            color: #065f46;
+          }
+
+          .scoreboard-count.error {
+            background: #fee2e2;
+            color: #991b1b;
+          }
+
+          .scoreboard-count.error.clickable {
+            transition: all 0.2s ease;
+          }
+
+          .scoreboard-count.error.clickable:hover {
+            background: #fecaca;
+            transform: scale(1.05);
+            box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
+          }
+
+          /* Side Panel Styles */
+          .side-panel {
+            position: absolute;
+            top: 0;
+            left: 0;
+            height: 100%;
+            z-index: 1000;
+            display: flex;
+            flex-direction: column;
+            transition: all 0.3s ease;
+          }
+
+          .side-panel.collapsed {
+            width: 60px;
+          }
+
+          .side-panel.expanded {
+            width: 280px;
+          }
+
+          .panel-toggle {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border: none;
+            background: none;
+            cursor: pointer;
+            color: #6b7280;
+            transition: color 0.2s ease;
+            padding: 8px;
+            margin: 20px 0 0 0;
+          }
+
+          .panel-toggle:hover {
+            color: #374151;
+          }
+
+          .panel-content {
+            flex: 1;
+            background: white;
+            border-right: 1px solid #e5e7eb;
+            box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
+            overflow: hidden;
+          }
+
+
         ` })] }));
 };
 export default AgenticFlowVisualizer;