@railtownai/railtracks-visualizer 0.0.10 → 0.0.11

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.
Files changed (10) hide show
  1. package/dist/cjs/index.js +1 -1
  2. package/dist/cjs/index.js.map +1 -1
  3. package/dist/esm/index.js +1 -1
  4. package/dist/esm/index.js.map +1 -1
  5. package/dist/types/AgenticFlowVisualizer.d.ts +7 -0
  6. package/dist/types/AgenticFlowVisualizer.d.ts.map +1 -1
  7. package/dist/types/App.d.ts.map +1 -1
  8. package/dist/types/index.d.ts +2 -0
  9. package/dist/types/index.d.ts.map +1 -1
  10. package/package.json +1 -1
package/dist/cjs/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";var e=require("react"),t=require("reactflow"),n=require("lucide-react");!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var a=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&a.firstChild?a.insertBefore(o,a.firstChild):a.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}(".react-flow{direction:ltr}.react-flow__container{height:100%;left:0;position:absolute;top:0;width:100%}.react-flow__pane{cursor:-webkit-grab;cursor:grab;z-index:1}.react-flow__pane.selection{cursor:pointer}.react-flow__pane.dragging{cursor:-webkit-grabbing;cursor:grabbing}.react-flow__viewport{pointer-events:none;transform-origin:0 0;z-index:2}.react-flow__renderer{z-index:4}.react-flow__selection{z-index:6}.react-flow__nodesselection-rect:focus,.react-flow__nodesselection-rect:focus-visible{outline:none}.react-flow .react-flow__edges{overflow:visible;pointer-events:none}.react-flow__connection-path,.react-flow__edge-path{stroke:#b1b1b7;stroke-width:1;fill:none}.react-flow__edge{cursor:pointer;pointer-events:visibleStroke}.react-flow__edge.animated path{stroke-dasharray:5;-webkit-animation:dashdraw .5s linear infinite;animation:dashdraw .5s linear infinite}.react-flow__edge.animated path.react-flow__edge-interaction{stroke-dasharray:none;-webkit-animation:none;animation:none}.react-flow__edge.inactive{pointer-events:none}.react-flow__edge.selected,.react-flow__edge:focus,.react-flow__edge:focus-visible{outline:none}.react-flow__edge.selected .react-flow__edge-path,.react-flow__edge:focus .react-flow__edge-path,.react-flow__edge:focus-visible .react-flow__edge-path{stroke:#555}.react-flow__edge-textwrapper{pointer-events:all}.react-flow__edge-textbg{fill:#fff}.react-flow__edge .react-flow__edge-text{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.react-flow__connection{pointer-events:none}.react-flow__connection .animated{stroke-dasharray:5;-webkit-animation:dashdraw .5s linear infinite;animation:dashdraw .5s linear infinite}.react-flow__connectionline{z-index:1001}.react-flow__nodes{pointer-events:none;transform-origin:0 0}.react-flow__node{box-sizing:border-box;cursor:-webkit-grab;cursor:grab;pointer-events:all;position:absolute;transform-origin:0 0;-webkit-user-select:none;-moz-user-select:none;user-select:none}.react-flow__node.dragging{cursor:-webkit-grabbing;cursor:grabbing}.react-flow__nodesselection{pointer-events:none;transform-origin:left top;z-index:3}.react-flow__nodesselection-rect{cursor:-webkit-grab;cursor:grab;pointer-events:all;position:absolute}.react-flow__handle{background:#1a192b;border:1px solid #fff;border-radius:100%;height:6px;min-height:5px;min-width:5px;pointer-events:none;position:absolute;width:6px}.react-flow__handle.connectionindicator{cursor:crosshair;pointer-events:all}.react-flow__handle-bottom{bottom:-4px;left:50%;top:auto;transform:translate(-50%)}.react-flow__handle-top{left:50%;top:-4px;transform:translate(-50%)}.react-flow__handle-left{left:-4px;top:50%;transform:translateY(-50%)}.react-flow__handle-right{right:-4px;top:50%;transform:translateY(-50%)}.react-flow__edgeupdater{cursor:move;pointer-events:all}.react-flow__panel{margin:15px;position:absolute;z-index:5}.react-flow__panel.top{top:0}.react-flow__panel.bottom{bottom:0}.react-flow__panel.left{left:0}.react-flow__panel.right{right:0}.react-flow__panel.center{left:50%;transform:translateX(-50%)}.react-flow__attribution{background:hsla(0,0%,100%,.5);font-size:10px;margin:0;padding:2px 3px}.react-flow__attribution a{color:#999;text-decoration:none}@-webkit-keyframes dashdraw{0%{stroke-dashoffset:10}}@keyframes dashdraw{0%{stroke-dashoffset:10}}.react-flow__edgelabel-renderer{height:100%;pointer-events:none;position:absolute;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}.react-flow__edge.updating .react-flow__edge-path{stroke:#777}.react-flow__edge-text{font-size:10px}.react-flow__node.selectable:focus,.react-flow__node.selectable:focus-visible{outline:none}.react-flow__node-default,.react-flow__node-group,.react-flow__node-input,.react-flow__node-output{background-color:#fff;border:1px solid #1a192b;border-radius:3px;color:#222;font-size:12px;padding:10px;text-align:center;width:150px}.react-flow__node-default.selectable:hover,.react-flow__node-group.selectable:hover,.react-flow__node-input.selectable:hover,.react-flow__node-output.selectable:hover{box-shadow:0 1px 4px 1px rgba(0,0,0,.08)}.react-flow__node-default.selectable.selected,.react-flow__node-default.selectable:focus,.react-flow__node-default.selectable:focus-visible,.react-flow__node-group.selectable.selected,.react-flow__node-group.selectable:focus,.react-flow__node-group.selectable:focus-visible,.react-flow__node-input.selectable.selected,.react-flow__node-input.selectable:focus,.react-flow__node-input.selectable:focus-visible,.react-flow__node-output.selectable.selected,.react-flow__node-output.selectable:focus,.react-flow__node-output.selectable:focus-visible{box-shadow:0 0 0 .5px #1a192b}.react-flow__node-group{background-color:hsla(0,0%,94%,.25)}.react-flow__nodesselection-rect,.react-flow__selection{background:rgba(0,89,220,.08);border:1px dotted rgba(0,89,220,.8)}.react-flow__nodesselection-rect:focus,.react-flow__nodesselection-rect:focus-visible,.react-flow__selection:focus,.react-flow__selection:focus-visible{outline:none}.react-flow__controls{box-shadow:0 0 2px 1px rgba(0,0,0,.08)}.react-flow__controls-button{align-items:center;background:#fefefe;border:none;border-bottom:1px solid #eee;box-sizing:content-box;cursor:pointer;display:flex;height:16px;justify-content:center;padding:5px;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:16px}.react-flow__controls-button:hover{background:#f4f4f4}.react-flow__controls-button svg{max-height:12px;max-width:12px;width:100%}.react-flow__controls-button:disabled{pointer-events:none}.react-flow__controls-button:disabled svg{fill-opacity:.4}.react-flow__minimap{background-color:#fff}.react-flow__minimap svg{display:block}.react-flow__resize-control{position:absolute}.react-flow__resize-control.left,.react-flow__resize-control.right{cursor:ew-resize}.react-flow__resize-control.bottom,.react-flow__resize-control.top{cursor:ns-resize}.react-flow__resize-control.bottom.right,.react-flow__resize-control.top.left{cursor:nwse-resize}.react-flow__resize-control.bottom.left,.react-flow__resize-control.top.right{cursor:nesw-resize}.react-flow__resize-control.handle{background-color:#3367d9;border:1px solid #fff;border-radius:1px;height:4px;transform:translate(-50%,-50%);width:4px}.react-flow__resize-control.handle.left{left:0;top:50%}.react-flow__resize-control.handle.right{left:100%;top:50%}.react-flow__resize-control.handle.top{left:50%;top:0}.react-flow__resize-control.handle.bottom{left:50%;top:100%}.react-flow__resize-control.handle.bottom.left,.react-flow__resize-control.handle.top.left{left:0}.react-flow__resize-control.handle.bottom.right,.react-flow__resize-control.handle.top.right{left:100%}.react-flow__resize-control.line{border:0 solid #3367d9}.react-flow__resize-control.line.left,.react-flow__resize-control.line.right{height:100%;top:0;transform:translate(-50%);width:1px}.react-flow__resize-control.line.left{border-left-width:1px;left:0}.react-flow__resize-control.line.right{border-right-width:1px;left:100%}.react-flow__resize-control.line.bottom,.react-flow__resize-control.line.top{height:1px;left:0;transform:translateY(-50%);width:100%}.react-flow__resize-control.line.top{border-top-width:1px;top:0}.react-flow__resize-control.line.bottom{border-bottom-width:1px;top:100%}");const a=({id:t,sourceX:n,sourceY:a,targetX:o,targetY:r,sourcePosition:l,targetPosition:i,style:s={},markerEnd:c,bidirectional:d=!1,data:p,clientToSvgCoords:f,svgRef:u,onInspect:m})=>{var g;e.useState(!1);const b=()=>{var e;switch(null===(e=null==p?void 0:p.details)||void 0===e?void 0:e.state){case"Open":return"#000000";case"Completed":return"#15803d";case"Error":return"#ef4444";default:return s.stroke||"#6366f1"}},[h,x]=e.useMemo(()=>{const l=`M ${n} ${a} Q ${(n+o)/2} ${(a+r)/2} ${o} ${r}`,i=[];if(d){const n=b();i.push(e.createElement("defs",{key:`${t}-markers`},e.createElement("marker",{id:`${t}-arrowhead-forward`,markerWidth:"10",markerHeight:"7",refX:"9",refY:"3.5",orient:"auto",markerUnits:"strokeWidth"},e.createElement("polygon",{points:"0 0, 10 3.5, 0 7",fill:n})),e.createElement("marker",{id:`${t}-arrowhead-backward`,markerWidth:"10",markerHeight:"7",refX:"1",refY:"3.5",orient:"auto",markerUnits:"strokeWidth"},e.createElement("polygon",{points:"10 0, 0 3.5, 10 7",fill:n}))))}return[l,i]},[n,a,o,r,t,d,null===(g=null==p?void 0:p.details)||void 0===g?void 0:g.state]),w=Object.assign(Object.assign({},s),{stroke:b(),strokeWidth:s.strokeWidth||4,cursor:"pointer"});return e.createElement("g",{"data-edge-id":t},x,e.createElement("path",{id:t,className:"react-flow__edge-path",d:h,markerEnd:d?`url(#${t}-arrowhead-forward)`:c,markerStart:d?`url(#${t}-arrowhead-backward)`:void 0,style:w}),(null==p?void 0:p.label)&&e.createElement("foreignObject",{x:(n+o)/2-50,y:(a+r)/2-20,width:"100",height:"40",style:{overflow:"visible",pointerEvents:"none"}},e.createElement("div",{className:"edge-label-renderer",style:{display:"flex",alignItems:"center",justifyContent:"center",width:"100%",height:"100%",pointerEvents:"auto"}},e.createElement("button",{className:"edge-label-button",onClick:e=>{e.stopPropagation(),m&&p&&m(p)},style:{background:"#6366f1",color:"white",border:"none",borderRadius:6,padding:"4px 12px",fontSize:12,fontWeight:600,cursor:"pointer",boxShadow:"0 2px 8px rgba(99,102,241,0.10)",transition:"background 0.2s"}},"Inspect"))),e.createElement("style",null,"\n .edge-label-renderer {\n z-index: 8001;\n user-select: none;\n pointer-events: auto;\n }\n\n .edge-label-button {\n pointer-events: auto;\n }\n "))},o=({data:n,id:a})=>{var o;const{fitView:r}=t.useReactFlow(),l=(null===(o=n.edges)||void 0===o?void 0:o.some(e=>e.source===a))||!1;return e.createElement(e.Fragment,null,e.createElement("div",{className:"agent-node",onClick:()=>{r({nodes:[{id:a}],duration:800,padding:.1,minZoom:.5,maxZoom:1.5}),n.onInspect&&n.onInspect({label:n.label,description:n.description,nodeType:n.nodeType,step:n.step,time:n.time,icon:n.icon})},style:{cursor:"pointer"}},e.createElement(t.Handle,{type:"target",position:t.Position.Top,style:{background:"#6366f1"}}),e.createElement("div",{className:"agent-header"},e.createElement("div",{className:"agent-icon"},n.icon||"📋"),e.createElement("div",{className:"agent-label"},n.label)),n.description&&e.createElement("div",{className:"agent-description"},n.description),n.step&&e.createElement("div",{className:"agent-meta"},e.createElement("span",{className:"step"},"Step: ",n.step),n.time&&e.createElement("span",{className:"time"},new Date(1e3*n.time).toLocaleTimeString())),l&&e.createElement(t.Handle,{type:"source",position:t.Position.Bottom,style:{background:"#6366f1"}})),e.createElement("style",null,"\n .agent-node {\n padding: 12px;\n border-radius: 8px;\n background: white;\n border: 2px solid #e5e7eb;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n min-width: 200px;\n max-width: 250px;\n transition: all 0.2s ease;\n position: relative;\n z-index: -5;\n }\n \n .agent-node:hover {\n border-color: #6366f1;\n box-shadow: 0 4px 8px rgba(99, 102, 241, 0.2);\n }\n \n .agent-header {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-bottom: 8px;\n }\n \n .agent-icon {\n font-size: 20px;\n }\n \n .agent-label {\n font-weight: 600;\n color: #1f2937;\n font-size: 14px;\n word-break: break-word;\n }\n \n .agent-description {\n color: #6b7280;\n font-size: 12px;\n line-height: 1.4;\n word-break: break-word;\n white-space: pre-line;\n }\n \n .agent-meta {\n margin-top: 8px;\n padding-top: 8px;\n border-top: 1px solid #e5e7eb;\n display: flex;\n justify-content: space-between;\n font-size: 10px;\n color: #9ca3af;\n }\n \n .step {\n background: #f3f4f6;\n padding: 2px 6px;\n border-radius: 4px;\n }\n \n .time {\n font-family: monospace;\n }\n \n .react-flow__handle {\n width: 8px;\n height: 8px;\n border: 2px solid #6366f1;\n }\n "))},r=({stamps:t,currentStep:n,isPlaying:a,onStepChange:o,onPlayPause:r})=>{const l=t.length>0?Math.max(...t.map(e=>e.step)):0,i=t.length>0?Math.min(...t.map(e=>e.step)):0,s=l-i+1;return e.useEffect(()=>{const e=document.querySelectorAll('[data-bs-toggle="tooltip"]'),t=Array.from(e).map(e=>new window.bootstrap.Tooltip(e));return()=>{t.forEach(e=>e.dispose())}},[t,n]),e.createElement("div",{style:{position:"absolute",bottom:0,left:0,right:0,height:"60px",backgroundColor:"white",borderTop:"1px solid #e5e7eb",display:"flex",alignItems:"center",padding:"0 16px",gap:"12px",zIndex:10}},e.createElement("button",{onClick:r,style:{width:"32px",height:"32px",borderRadius:"50%",border:"1px solid #d1d5db",backgroundColor:"white",display:"flex",alignItems:"center",justifyContent:"center",cursor:"pointer",transition:"all 0.2s ease"},onMouseEnter:e=>{e.currentTarget.style.backgroundColor="#f3f4f6"},onMouseLeave:e=>{e.currentTarget.style.backgroundColor="white"}},a?e.createElement("div",{style:{display:"flex",gap:"2px"}},e.createElement("div",{style:{width:"3px",height:"12px",backgroundColor:"#374151"}}),e.createElement("div",{style:{width:"3px",height:"12px",backgroundColor:"#374151"}})):e.createElement("div",{style:{width:0,height:0,borderLeft:"8px solid #374151",borderTop:"6px solid transparent",borderBottom:"6px solid transparent",marginLeft:"2px"}})),e.createElement("div",{style:{flex:1,display:"flex",alignItems:"center",gap:"8px",padding:"0 8px"}},Array.from({length:s},(a,r)=>{var l;const s=i+r,c=s===n,d=s<n,p=t.some(e=>e.step===s);let f="white";c?f="#6366f1":d?f="#fef3c7":p&&(f="#e5e7eb");const u=`Step ${s}${p?` - ${(null===(l=t.find(e=>e.step===s))||void 0===l?void 0:l.identifier)||""}`:" - No activity"}`;return e.createElement("button",{key:s,onClick:()=>o(s),"data-bs-toggle":"tooltip","data-bs-placement":"top","data-bs-title":u,style:{width:"16px",height:"16px",borderRadius:"50%",border:c?"2px solid #6366f1":"1px solid #d1d5db",backgroundColor:f,cursor:"pointer",transition:"all 0.2s ease",position:"relative"},onMouseEnter:e=>{c||(e.currentTarget.style.backgroundColor=d?"#fde68a":p?"#d1d5db":"#f3f4f6")},onMouseLeave:e=>{c||(e.currentTarget.style.backgroundColor=d?"#fef3c7":p?"#e5e7eb":"white")}})})),e.createElement("div",{style:{fontSize:"12px",color:"#6b7280",minWidth:"60px",textAlign:"right"}},n," / ",l))},l=({stamps:t,currentStep:a,onStepChange:o,onToggle:r})=>{const l=t.length>0?Math.max(...t.map(e=>e.step)):0,i=t.length>0?Math.min(...t.map(e=>e.step)):0,s=l-i+1;return e.createElement("div",{style:{width:"100%",height:"100%",backgroundColor:"white",display:"flex",flexDirection:"column",overflow:"hidden"}},e.createElement("div",{style:{padding:"16px",borderBottom:"1px solid #e5e7eb",backgroundColor:"#f9fafb",display:"flex",justifyContent:"space-between",alignItems:"flex-start"}},e.createElement("div",null,e.createElement("h3",{style:{margin:0,fontSize:"16px",fontWeight:600,color:"#1f2937"}},"Timeline"),e.createElement("p",{style:{margin:"4px 0 0 0",fontSize:"12px",color:"#6b7280"}},"Click to jump to step")),r&&e.createElement("button",{onClick:r,style:{border:"none",background:"none",cursor:"pointer",color:"#6b7280",padding:"4px",display:"flex",alignItems:"center",justifyContent:"center",transition:"color 0.2s ease"},title:"Collapse Panel"},e.createElement(n.PanelLeft,{size:16}))),e.createElement("div",{style:{flex:1,overflowY:"auto",padding:"8px 0 16px 0"}},Array.from({length:s},(n,r)=>{const l=i+r,s=l===a,c=l<a,d=t.some(e=>e.step===l),p=(e=>{const n=t.filter(t=>t.step===e);if(0===n.length)return null;const a=e-1,o=t.filter(e=>e.step===a);return 0===o.length?null:Math.min(...n.map(e=>e.time))-Math.max(...o.map(e=>e.time))})(l),f=(e=>{var n;const a=t.filter(t=>t.step===e);return 0===a.length?`Step ${e}`:(null===(n=a[0])||void 0===n?void 0:n.identifier)||`Step ${e}`})(l);return e.createElement("div",{key:l,onClick:()=>d&&o(l),style:{padding:"12px 16px",borderBottom:"1px solid #f3f4f6",cursor:d?"pointer":"default",backgroundColor:s?"#f0f9ff":"transparent",borderLeft:s?"4px solid #6366f1":"4px solid transparent",transition:"all 0.2s ease",position:"relative"},onMouseEnter:e=>{d&&!s&&(e.currentTarget.style.backgroundColor="#f8fafc")},onMouseLeave:e=>{d&&!s&&(e.currentTarget.style.backgroundColor="transparent")}},e.createElement("div",{style:{display:"flex",alignItems:"center",gap:"8px",marginBottom:"4px"}},e.createElement("div",{style:{width:"12px",height:"12px",borderRadius:"50%",backgroundColor:s?"#6366f1":c?"#fbbf24":d?"#9ca3af":"#e5e7eb",border:s?"2px solid #6366f1":"1px solid #d1d5db",flexShrink:0}}),e.createElement("span",{style:{fontSize:"14px",fontWeight:s?600:500,color:s?"#1f2937":"#6b7280"}},"Step ",l),p&&e.createElement("span",{style:{fontSize:"11px",color:"#9ca3af",backgroundColor:"#f3f4f6",padding:"2px 6px",borderRadius:"4px",marginLeft:"auto"}},(e=>e<1e3?`${e.toFixed(0)}ms`:e<6e4?`${(e/1e3).toFixed(1)}s`:`${(e/6e4).toFixed(1)}m`)(p))),e.createElement("div",{style:{fontSize:"13px",color:d?"#1f2937":"#9ca3af",lineHeight:"1.4",wordBreak:"break-word",fontStyle:d?"normal":"italic"}},d?f:"No activity"),s&&e.createElement("div",{style:{position:"absolute",right:"8px",top:"50%",transform:"translateY(-50%)",width:"6px",height:"6px",borderRadius:"50%",backgroundColor:"#6366f1",animation:"pulse 2s infinite"}}))})),e.createElement("style",null,"\n @keyframes pulse {\n 0% {\n opacity: 1;\n }\n 50% {\n opacity: 0.5;\n }\n 100% {\n opacity: 1;\n }\n }\n "))},i=(e,t)=>e.length<=t?e:e.substring(0,t)+"...",s={agent:o},c=({flowData:o,width:c="100%",height:d="1000px",className:p=""})=>{var f,u,m,g;const b=o;if(!b)return e.createElement("div",{style:{width:"number"==typeof c?`${c}px`:c,height:"number"==typeof d?`${d}px`:d,border:"1px solid #e5e7eb",borderRadius:"8px",background:"#f9fafb",position:"relative",minWidth:"800px",minHeight:"600px",display:"flex",alignItems:"center",justifyContent:"center"},className:p},e.createElement("div",{style:{textAlign:"center"}},e.createElement("div",{style:{fontSize:"16px",color:"#6b7280",marginBottom:"8px"}},"No flow data available"),e.createElement("div",{style:{fontSize:"14px",color:"#9ca3af"}},"Please provide flowData prop")));const h=e.useRef(null),x=e.useRef(null),[w,v]=e.useState({width:"number"==typeof c?c:800,height:"number"==typeof d?d:600}),[_,y]=e.useState(0),[E,k]=e.useState(!1),z=e.useRef(null),[N,S]=e.useState(!1),[C,T]=e.useState(!1),[j,F]=e.useState(null),R=e.useMemo(()=>{const e=b.stamps||b.steps||[];return e.length>0?Math.max(...e.map(e=>e.step)):0},[b.stamps,b.steps]);e.useEffect(()=>(E?z.current=setInterval(()=>{y(e=>e>=R?(k(!1),e):e+1)},250):z.current&&(clearInterval(z.current),z.current=null),()=>{z.current&&clearInterval(z.current)}),[E,R]),e.useEffect(()=>{const e=b.stamps||b.steps||[];e.length>0&&y(Math.max(...e.map(e=>e.step)))},[b.stamps,b.steps]),e.useEffect(()=>{const e=()=>{if(h.current){const e=h.current.getBoundingClientRect();v({width:e.width||("number"==typeof c?c:800),height:e.height||("number"==typeof d?d:600)})}};if(e(),window.ResizeObserver&&h.current){const t=new ResizeObserver(e);return t.observe(h.current),()=>t.disconnect()}return window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)},[c,d]);const $=e.useMemo(()=>((e,t)=>{new Map(e.map(e=>[e.identifier,e]));const n=new Map,a=new Map;e.forEach(e=>n.set(e.identifier,[])),t.length>0?t.forEach(e=>{var t;e.source&&e.target&&(null===(t=n.get(e.source))||void 0===t||t.push(e.target),a.set(e.target,e.source))}):e.forEach(e=>{var t;e.parent&&e.parent.identifier!==e.identifier&&(null===(t=n.get(e.parent.identifier))||void 0===t||t.push(e.identifier),a.set(e.identifier,e.parent.identifier))});const o=e.filter(e=>!a.has(e.identifier)),r=new Map,l=(e,t)=>{r.set(e,t);for(const a of n.get(e)||[])l(a,t+1)};o.forEach(e=>l(e.identifier,0));const i=[];e.forEach(e=>{var t;const n=null!==(t=r.get(e.identifier))&&void 0!==t?t:0;i[n]||(i[n]=[]),i[n].push(e.identifier)});const s=new Map,c=200,d=e=>{const t=n.get(e)||[];if(0===t.length)return s.set(e,c),c;let a=0;for(const e of t)a+=d(e);return a+=100*(t.length-1),s.set(e,a),a};o.forEach(e=>d(e.identifier));const p=new Map,f=(e,t,a)=>{const o=s.get(e)||c,r=300*a+100,l=n.get(e)||[];if(0===l.length)p.set(e,{x:t+o/2-100,y:r});else{let n=t;for(const e of l){const t=s.get(e)||c;f(e,n,a+1),n+=t+100}const o=l[0],i=l[l.length-1],d=p.get(o),u=p.get(i),m=(d.x+u.x)/2;p.set(e,{x:m,y:r})}};let u=0;for(const e of o)f(e.identifier,u,0),u+=(s.get(e.identifier)||c)+200;return p})(b.nodes,b.edges||[]),[b.nodes,b.edges]),M=e.useCallback(e=>b.nodes.filter(t=>t.stamp.step<=e),[b.nodes]),I=e.useCallback(e=>(b.edges||[]).filter(t=>t.stamp.step<=e),[b.edges]),P=e.useCallback(e=>{F({type:"node",data:e}),T(!0)},[]),O=e.useCallback(e=>{const t=I(_).find(t=>t.source===e.source&&t.target===e.target),n=Object.assign(Object.assign({},e),{id:(null==t?void 0:t.identifier)||"N/A"});F({type:"edge",data:n}),T(!0)},[I,_]),A=e.useMemo(()=>{const e=M(_),t=I(_);return e.map(e=>{var n,a;const o=$.get(e.identifier)||{x:0,y:0},{description:r}=(e=>{var t,n;let a=e.node_type,o="";if(null===(n=null===(t=e.details)||void 0===t?void 0:t.internals)||void 0===n?void 0:n.llm_details){const t=e.details.internals.llm_details;if(t.length>0){const n=t[t.length-1];o=`${n.model_name} (${n.model_provider})`,a=`${e.node_type}\n${o}`}}return{description:a,modelInfo:o}})(e),l=e.stamp.step===_;return{id:e.identifier,type:"agent",position:o,data:{label:e.node_type,description:r,nodeType:e.node_type,step:null===(n=e.stamp)||void 0===n?void 0:n.step,time:null===(a=e.stamp)||void 0===a?void 0:a.time,isActive:l,onInspect:P,id:e.identifier,edges:t},style:{filter:l?"drop-shadow(0 4px 8px rgba(99, 102, 241, 0.3))":"none"}}})},[$,_,M,I,P]),L=e.useMemo(()=>I(_).filter(e=>e.source&&e.target).map(e=>{var t,n,a,o;const r=e.stamp.step===_;return{id:e.identifier,type:"default",source:e.source,target:e.target,animated:r,bidirectional:!0,style:{stroke:r?"#6366f1":"#9ca3af",strokeWidth:r?3:2},label:(null===(t=e.stamp)||void 0===t?void 0:t.identifier)?i(String(e.stamp.identifier),50):void 0,data:{label:(null===(n=e.stamp)||void 0===n?void 0:n.identifier)?i(String(e.stamp.identifier),50):void 0,source:e.source,target:e.target,step:null===(a=e.stamp)||void 0===a?void 0:a.step,time:null===(o=e.stamp)||void 0===o?void 0:o.time,details:e.details}}}),[_,I]),[B,D,W]=t.useNodesState(A),[H,U,X]=t.useEdgesState(L);e.useEffect(()=>{D(A)},[A,D]),e.useEffect(()=>{U(L)},[L,U]);const Y=e.useCallback(e=>U(n=>t.addEdge(e,n)),[U]),V=e.useCallback(e=>{y(e),k(!1)},[]),J=e.useCallback(()=>{k(e=>!e)},[]),q=(e,t)=>{var n;if(!x.current)return{x:0,y:0};const a=x.current.createSVGPoint();a.x=e,a.y=t;const o=a.matrixTransform(null===(n=x.current.getScreenCTM())||void 0===n?void 0:n.inverse());return{x:o.x,y:o.y}},Z=t.useReactFlow();return e.useEffect(()=>{if(A.length>0&&Z){const e=new Map;L.forEach(t=>{const n=e.get(t.source)||0;e.set(t.source,n+1);const a=e.get(t.target)||0;e.set(t.target,a+1)});let t="",n=0;e.forEach((e,a)=>{e>n&&(n=e,t=a)}),!t&&A.length>0&&(t=A[0].id),t&&setTimeout(()=>{Z.fitView({nodes:[{id:t}],duration:1e3,padding:.2,minZoom:.2,maxZoom:1.5})},500)}},[A,L,Z]),e.createElement("div",{ref:h,style:{width:"number"==typeof c?`${c}px`:c,height:"number"==typeof d?`${d}px`:d,border:"1px solid #e5e7eb",borderRadius:"8px",overflow:"hidden",position:"relative",minWidth:"800px",minHeight:"600px"},className:p},e.createElement("div",{className:"side-panel "+(N?"expanded":"collapsed")},!N&&e.createElement("button",{className:"panel-toggle",onClick:()=>S(!N),title:"Expand Panel"},e.createElement(n.PanelLeft,{size:20})),N&&e.createElement("div",{className:"panel-content"},e.createElement(l,{stamps:b.stamps||b.steps||[],currentStep:_,onStepChange:V,onToggle:()=>S(!1)}))),e.createElement(t,{nodes:B,edges:H,onNodesChange:W,onEdgesChange:X,onConnect:Y,nodeTypes:s,edgeTypes:{default:t=>e.createElement(a,Object.assign({},t,{clientToSvgCoords:q,svgRef:x,onInspect:O}))},attributionPosition:"bottom-left",style:{width:N?"calc(100% - 280px)":"100%",height:"calc(100% - 60px)",marginLeft:N?"280px":"0"},defaultViewport:{x:0,y:0,zoom:1},onInit:e=>{if(h.current){const e=h.current.querySelector("svg");e&&(x.current=e)}}},e.createElement(t.Controls,null),e.createElement(t.Background,{color:"#f3f4f6",gap:16})),e.createElement("div",{className:"right-drawer "+(C?"open":"")},e.createElement("div",{className:"drawer-toggle",onClick:()=>T(!C)},e.createElement(n.PanelRight,{size:20})),C&&j&&e.createElement("div",{className:"drawer-content"},e.createElement("div",{className:"drawer-header"},e.createElement("h3",null,"node"===j.type?"Node Details":"Edge Details")),e.createElement("div",{className:"drawer-body"},"node"===j.type?e.createElement(e.Fragment,null,e.createElement("div",{className:"detail-row"},e.createElement("span",{className:"detail-label"},"Label:"),e.createElement("span",{className:"detail-value"},j.data.label||"N/A")),j.data.description&&e.createElement("div",{className:"detail-row"},e.createElement("span",{className:"detail-label"},"Description:"),e.createElement("span",{className:"detail-value"},j.data.description)),j.data.nodeType&&e.createElement("div",{className:"detail-row"},e.createElement("span",{className:"detail-label"},"Type:"),e.createElement("span",{className:"detail-value"},j.data.nodeType)),j.data.step&&e.createElement("div",{className:"detail-row"},e.createElement("span",{className:"detail-label"},"Step:"),e.createElement("span",{className:"detail-value"},j.data.step)),j.data.time&&e.createElement("div",{className:"detail-row"},e.createElement("span",{className:"detail-label"},"Time:"),e.createElement("span",{className:"detail-value"},new Date(1e3*j.data.time).toLocaleString())),j.data.icon&&e.createElement("div",{className:"detail-row"},e.createElement("span",{className:"detail-label"},"Icon:"),e.createElement("span",{className:"detail-value"},j.data.icon))):e.createElement(e.Fragment,null,e.createElement("div",{className:"detail-row"},e.createElement("span",{className:"detail-label"},"ID:"),e.createElement("span",{className:"detail-value"},j.data.id||"N/A")),j.data.source&&e.createElement("div",{className:"detail-row"},e.createElement("span",{className:"detail-label"},"Source:"),e.createElement("span",{className:"detail-value"},j.data.source)),j.data.target&&e.createElement("div",{className:"detail-row"},e.createElement("span",{className:"detail-label"},"Target:"),e.createElement("span",{className:"detail-value"},j.data.target)),j.data.label&&e.createElement("div",{className:"detail-row"},e.createElement("span",{className:"detail-label"},"Label:"),e.createElement("span",{className:"detail-value"},j.data.label)),j.data.step&&e.createElement("div",{className:"detail-row"},e.createElement("span",{className:"detail-label"},"Step:"),e.createElement("span",{className:"detail-value"},j.data.step)),j.data.time&&e.createElement("div",{className:"detail-row"},e.createElement("span",{className:"detail-label"},"Time:"),e.createElement("span",{className:"detail-value"},new Date(1e3*j.data.time).toLocaleString())),(null===(u=null===(f=j.data)||void 0===f?void 0:f.details)||void 0===u?void 0:u.input_args)&&Array.isArray(j.data.details.input_args)&&j.data.details.input_args.length>0&&e.createElement(e.Fragment,null,e.createElement("div",{className:"detail-row"},e.createElement("span",{className:"detail-label"},"Inputs"),e.createElement("span",{className:"detail-value",style:{overflowY:"auto",maxHeight:"300px"}},Array.isArray(j.data.details.input_args[0])?j.data.details.input_args[0].map((t,n)=>e.createElement("div",{key:(null==t?void 0:t.role)||n,style:{marginBottom:8}},e.createElement("span",{className:"detail-label"},"Role:"),e.createElement("span",{className:"detail-value"},(null==t?void 0:t.role)||"Unknown"),e.createElement("span",{className:"detail-label"},"Content:"),e.createElement("span",{className:"detail-value"},(null==t?void 0:t.content)||"No content"))):e.createElement("span",{className:"detail-value"},JSON.stringify(j.data.details.input_args[0],null,2)))),e.createElement("div",{className:"detail-row"},e.createElement("span",{className:"detail-label"},"Outputs"),e.createElement("span",{className:"detail-value"},JSON.stringify(null===(g=null===(m=j.data)||void 0===m?void 0:m.details)||void 0===g?void 0:g.output,null,2)))))))),N&&e.createElement("div",{style:{marginLeft:"280px",marginTop:"100px"}},e.createElement(r,{stamps:b.stamps||b.steps||[],currentStep:_,isPlaying:E,onStepChange:V,onPlayPause:J})),e.createElement("style",null,`\n .react-flow__edge-label {\n font-size: 10px;\n background: white;\n padding: 2px 4px;\n border-radius: 4px;\n border: 1px solid #e5e7eb;\n max-width: 150px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n /* Right Drawer Styles */\n .right-drawer {\n position: absolute;\n top: 0;\n right: 0;\n height: 100%;\n z-index: 1000;\n display: flex;\n align-items: flex-start;\n transition: transform 0.3s ease;\n margin-left: ${N?"280px":"0"}; /* Account for vertical timeline when visible */\n }\n\n .right-drawer:not(.open) {\n transform: translateX(calc(100% - 50px));\n }\n\n .right-drawer.open {\n transform: translateX(0);\n }\n\n .drawer-toggle {\n width: 50px;\n height: 50px;\n background: none;\n color: #6b7280;\n border: none;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: color 0.2s ease;\n margin-top: 20px;\n }\n\n .drawer-toggle:hover {\n color: #374151;\n }\n\n .drawer-content {\n background: white;\n border: 1px solid #e5e7eb;\n border-radius: 8px 0 0 8px;\n width: 400px;\n height: calc(100% - 40px);\n margin-top: 20px;\n display: flex;\n flex-direction: column;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n animation: drawerSlideIn 0.3s ease-out;\n }\n\n .drawer-header {\n padding: 16px 20px;\n border-bottom: 1px solid #e5e7eb;\n background: #f9fafb;\n display: flex;\n justify-content: space-between;\n align-items: center;\n flex-shrink: 0;\n }\n\n .drawer-header h3 {\n margin: 0;\n font-size: 16px;\n font-weight: 600;\n color: #1f2937;\n }\n\n .close-button {\n background: none;\n border: none;\n font-size: 20px;\n color: #6b7280;\n cursor: pointer;\n padding: 4px;\n width: 28px;\n height: 28px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 6px;\n transition: all 0.2s ease;\n }\n\n .close-button:hover {\n background: #e5e7eb;\n color: #1f2937;\n }\n\n .drawer-body {\n padding: 20px;\n overflow-y: auto;\n flex: 1;\n width: 100%;\n box-sizing: border-box;\n }\n\n .detail-row {\n display: grid;\n grid-template-columns: 100px 1fr;\n margin-bottom: 12px;\n align-items: flex-start;\n gap: 8px;\n }\n\n .detail-row:last-child {\n margin-bottom: 0;\n }\n\n .detail-label {\n font-weight: 600;\n color: #6b7280;\n font-size: 13px;\n word-break: break-word;\n }\n\n .detail-value {\n color: #1f2937;\n font-size: 13px;\n word-break: break-word;\n flex: 1;\n width: 100%;\n overflow: visible;\n text-overflow: unset;\n max-width: unset;\n white-space: pre-line;\n line-height: 1.4;\n }\n\n @keyframes drawerSlideIn {\n from {\n opacity: 0;\n transform: translateX(20px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n }\n\n /* Scoreboard Styles */\n .scoreboard {\n position: absolute;\n top: 20px;\n left: 50%;\n transform: translateX(-50%);\n background: white;\n border: 1px solid #e5e7eb;\n border-radius: 8px;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n z-index: 1000;\n min-width: 400px;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n }\n\n .scoreboard-header {\n padding: 12px 16px;\n border-bottom: 1px solid #e5e7eb;\n background: #f9fafb;\n text-align: center;\n }\n\n .scoreboard-header h3 {\n margin: 0;\n font-size: 14px;\n font-weight: 600;\n color: #1f2937;\n }\n\n .scoreboard-content {\n padding: 16px;\n display: flex;\n justify-content: space-around;\n align-items: center;\n gap: 20px;\n }\n\n .scoreboard-item {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 4px;\n }\n\n .scoreboard-label {\n font-size: 12px;\n color: #6b7280;\n font-weight: 500;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n }\n\n .scoreboard-count {\n font-size: 18px;\n font-weight: 700;\n padding: 6px 12px;\n border-radius: 6px;\n min-width: 40px;\n text-align: center;\n }\n\n .scoreboard-count.open {\n background: #fef3c7;\n color: #92400e;\n }\n\n .scoreboard-count.completed {\n background: #d1fae5;\n color: #065f46;\n }\n\n .scoreboard-count.error {\n background: #fee2e2;\n color: #991b1b;\n }\n\n .scoreboard-count.error.clickable {\n transition: all 0.2s ease;\n }\n\n .scoreboard-count.error.clickable:hover {\n background: #fecaca;\n transform: scale(1.05);\n box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);\n }\n\n /* Side Panel Styles */\n .side-panel {\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n z-index: 1000;\n display: flex;\n flex-direction: column;\n transition: all 0.3s ease;\n }\n\n .side-panel.collapsed {\n width: 60px;\n }\n\n .side-panel.expanded {\n width: 280px;\n }\n\n .panel-toggle {\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n background: none;\n cursor: pointer;\n color: #6b7280;\n transition: color 0.2s ease;\n padding: 8px;\n margin: 20px 0 0 0;\n }\n\n .panel-toggle:hover {\n color: #374151;\n }\n\n .panel-content {\n flex: 1;\n background: white;\n border-right: 1px solid #e5e7eb;\n box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);\n overflow: hidden;\n }\n\n\n `))},d=n=>e.createElement(t.ReactFlowProvider,null,e.createElement(c,Object.assign({},n)));function p(e,t,n,a){return new(n||(n=Promise))(function(o,r){function l(e){try{s(a.next(e))}catch(e){r(e)}}function i(e){try{s(a.throw(e))}catch(e){r(e)}}function s(e){var t;e.done?o(e.value):(t=e.value,t instanceof n?t:new n(function(e){e(t)})).then(l,i)}s((a=a.apply(e,t||[])).next())})}"function"==typeof SuppressedError&&SuppressedError;const f="/api",u=()=>{const{listJsonFiles:t,loadJsonFile:n,loading:a,error:o}=(()=>{const[t,n]=e.useState(!1),[a,o]=e.useState(null);return{loading:t,error:a,listJsonFiles:e.useCallback(()=>p(void 0,void 0,void 0,function*(){n(!0),o(null);try{console.log("Fetching files from:",`${f}/files`);const e=yield fetch(`${f}/files`);if(console.log("Response status:",e.status),!e.ok)throw new Error(`HTTP error! status: ${e.status}`);const t=yield e.json();return console.log("Files received:",t),t}catch(e){console.error("Error fetching files:",e);const t={message:e instanceof Error?e.message:"Unknown error occurred",status:e instanceof Error&&"status"in e?e.status:void 0};return o(t),[]}finally{n(!1)}}),[]),loadJsonFile:e.useCallback(e=>p(void 0,void 0,void 0,function*(){n(!0),o(null);try{const t=yield fetch(`${f}/json/${e}`);if(!t.ok)throw new Error(`HTTP error! status: ${t.status}`);return yield t.json()}catch(e){const t={message:e instanceof Error?e.message:"Unknown error occurred",status:e instanceof Error&&"status"in e?e.status:void 0};return o(t),null}finally{n(!1)}}),[]),triggerRefresh:e.useCallback(()=>p(void 0,void 0,void 0,function*(){n(!0),o(null);try{const e=yield fetch(`${f}/refresh`,{method:"POST"});if(!e.ok)throw new Error(`HTTP error! status: ${e.status}`);return yield e.json()}catch(e){const t={message:e instanceof Error?e.message:"Unknown error occurred",status:e instanceof Error&&"status"in e?e.status:void 0};return o(t),null}finally{n(!1)}}),[])}})(),[r,l]=e.useState({availableFiles:[],currentFile:null,flowData:null,loading:!1,error:null});e.useEffect(()=>{i()},[]);const i=e.useCallback(()=>p(void 0,void 0,void 0,function*(){const e=yield t();l(t=>Object.assign(Object.assign({},t),{availableFiles:e}))}),[t]),s=e.useCallback(e=>p(void 0,void 0,void 0,function*(){l(e=>Object.assign(Object.assign({},e),{loading:!0,error:null}));try{const t=yield n(e);l(t?n=>Object.assign(Object.assign({},n),{currentFile:e,flowData:t,loading:!1,error:null}):e=>Object.assign(Object.assign({},e),{loading:!1,error:"Failed to load file data"}))}catch(e){l(t=>Object.assign(Object.assign({},t),{loading:!1,error:e instanceof Error?e.message:"Unknown error occurred"}))}}),[n]),c=e.useCallback(()=>p(void 0,void 0,void 0,function*(){yield i()}),[i]);return Object.assign(Object.assign({},r),{loading:r.loading||a,error:r.error||(null==o?void 0:o.message)||null,loadFile:s,refreshFiles:c})},m=({files:t,currentFile:a,onFileSelect:o,onRefresh:r,loading:l=!1,disabled:i=!1})=>e.createElement("div",{style:{display:"flex",alignItems:"center",gap:"8px"}},e.createElement("select",{value:a||"",onChange:e=>o(e.target.value),disabled:i,style:{cursor:"pointer",padding:"8px 16px 8px 16px",borderRadius:"4px",fontSize:"14px",border:"1px solid #ccc",appearance:"none",WebkitAppearance:"none",MozAppearance:"none"}},e.createElement("option",{value:""},"Select a RailTracks Run..."),t.map(t=>e.createElement("option",{key:t.name,value:t.name},t.name))),e.createElement("button",{onClick:e=>{e.stopPropagation(),r()},disabled:l||i,title:"Refresh files",style:{background:"none",border:"none",cursor:"pointer",padding:"4px",borderRadius:"4px"}},e.createElement(n.RefreshCw,{size:16,style:{animation:l?"spin 1s linear infinite":"none"}})));exports.AgenticFlowVisualizer=c,exports.App=()=>{const{availableFiles:t,currentFile:n,flowData:a,loading:o,error:r,loadFile:l,refreshFiles:i}=u();return e.createElement("div",{className:"app"},e.createElement("div",{className:"app-header"},e.createElement("h1",null,"RailTracks Visualizer"),e.createElement("div",{className:"file-selector-container"},e.createElement(m,{files:t,currentFile:n,onFileSelect:e=>{l(e)},onRefresh:i,loading:o,disabled:o}))),r&&e.createElement("div",{className:"error-message"},e.createElement("p",null,"Error: ",r)),e.createElement("div",{className:"visualizer-container"},o?e.createElement("div",{className:"loading-state"},e.createElement("div",{className:"loading-spinner"}),e.createElement("p",null,"Loading flow data...")):a?e.createElement(d,{flowData:a}):e.createElement("div",{className:"no-data-state"},e.createElement("p",null,"Please select a file to visualize the flow data"))),e.createElement("style",null,"\n .app {\n min-height: 100vh;\n background: #f9fafb;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n }\n\n .app-header {\n background: white;\n border-bottom: 1px solid #e5e7eb;\n padding: 5px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n }\n\n .app-header h1 {\n margin: 0;\n font-size: 18px;\n font-weight: 600;\n color: #1f2937;\n }\n\n .file-selector-container {\n display: flex;\n align-items: center;\n }\n\n .error-message {\n background: #fee2e2;\n border: 1px solid #fecaca;\n color: #991b1b;\n padding: 12px 20px;\n margin: 20px;\n border-radius: 6px;\n font-size: 14px;\n }\n\n .visualizer-container {\n padding: 20px;\n min-height: calc(100vh - 100px);\n }\n\n .loading-state {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 400px;\n color: #6b7280;\n }\n\n .loading-spinner {\n width: 40px;\n height: 40px;\n border: 4px solid #e5e7eb;\n border-top: 4px solid #6366f1;\n border-radius: 50%;\n animation: spin 1s linear infinite;\n margin-bottom: 16px;\n }\n\n @keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n\n .no-data-state {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 400px;\n color: #6b7280;\n font-size: 16px;\n }\n "))},exports.Edge=a,exports.FileSelector=m,exports.Node=o,exports.Timeline=r,exports.VerticalTimeline=l,exports.Visualizer=d;
1
+ "use strict";var e=require("react"),t=require("reactflow"),n=require("lucide-react");!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var a=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&a.firstChild?a.insertBefore(o,a.firstChild):a.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}(".react-flow{direction:ltr}.react-flow__container{height:100%;left:0;position:absolute;top:0;width:100%}.react-flow__pane{cursor:-webkit-grab;cursor:grab;z-index:1}.react-flow__pane.selection{cursor:pointer}.react-flow__pane.dragging{cursor:-webkit-grabbing;cursor:grabbing}.react-flow__viewport{pointer-events:none;transform-origin:0 0;z-index:2}.react-flow__renderer{z-index:4}.react-flow__selection{z-index:6}.react-flow__nodesselection-rect:focus,.react-flow__nodesselection-rect:focus-visible{outline:none}.react-flow .react-flow__edges{overflow:visible;pointer-events:none}.react-flow__connection-path,.react-flow__edge-path{stroke:#b1b1b7;stroke-width:1;fill:none}.react-flow__edge{cursor:pointer;pointer-events:visibleStroke}.react-flow__edge.animated path{stroke-dasharray:5;-webkit-animation:dashdraw .5s linear infinite;animation:dashdraw .5s linear infinite}.react-flow__edge.animated path.react-flow__edge-interaction{stroke-dasharray:none;-webkit-animation:none;animation:none}.react-flow__edge.inactive{pointer-events:none}.react-flow__edge.selected,.react-flow__edge:focus,.react-flow__edge:focus-visible{outline:none}.react-flow__edge.selected .react-flow__edge-path,.react-flow__edge:focus .react-flow__edge-path,.react-flow__edge:focus-visible .react-flow__edge-path{stroke:#555}.react-flow__edge-textwrapper{pointer-events:all}.react-flow__edge-textbg{fill:#fff}.react-flow__edge .react-flow__edge-text{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.react-flow__connection{pointer-events:none}.react-flow__connection .animated{stroke-dasharray:5;-webkit-animation:dashdraw .5s linear infinite;animation:dashdraw .5s linear infinite}.react-flow__connectionline{z-index:1001}.react-flow__nodes{pointer-events:none;transform-origin:0 0}.react-flow__node{box-sizing:border-box;cursor:-webkit-grab;cursor:grab;pointer-events:all;position:absolute;transform-origin:0 0;-webkit-user-select:none;-moz-user-select:none;user-select:none}.react-flow__node.dragging{cursor:-webkit-grabbing;cursor:grabbing}.react-flow__nodesselection{pointer-events:none;transform-origin:left top;z-index:3}.react-flow__nodesselection-rect{cursor:-webkit-grab;cursor:grab;pointer-events:all;position:absolute}.react-flow__handle{background:#1a192b;border:1px solid #fff;border-radius:100%;height:6px;min-height:5px;min-width:5px;pointer-events:none;position:absolute;width:6px}.react-flow__handle.connectionindicator{cursor:crosshair;pointer-events:all}.react-flow__handle-bottom{bottom:-4px;left:50%;top:auto;transform:translate(-50%)}.react-flow__handle-top{left:50%;top:-4px;transform:translate(-50%)}.react-flow__handle-left{left:-4px;top:50%;transform:translateY(-50%)}.react-flow__handle-right{right:-4px;top:50%;transform:translateY(-50%)}.react-flow__edgeupdater{cursor:move;pointer-events:all}.react-flow__panel{margin:15px;position:absolute;z-index:5}.react-flow__panel.top{top:0}.react-flow__panel.bottom{bottom:0}.react-flow__panel.left{left:0}.react-flow__panel.right{right:0}.react-flow__panel.center{left:50%;transform:translateX(-50%)}.react-flow__attribution{background:hsla(0,0%,100%,.5);font-size:10px;margin:0;padding:2px 3px}.react-flow__attribution a{color:#999;text-decoration:none}@-webkit-keyframes dashdraw{0%{stroke-dashoffset:10}}@keyframes dashdraw{0%{stroke-dashoffset:10}}.react-flow__edgelabel-renderer{height:100%;pointer-events:none;position:absolute;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}.react-flow__edge.updating .react-flow__edge-path{stroke:#777}.react-flow__edge-text{font-size:10px}.react-flow__node.selectable:focus,.react-flow__node.selectable:focus-visible{outline:none}.react-flow__node-default,.react-flow__node-group,.react-flow__node-input,.react-flow__node-output{background-color:#fff;border:1px solid #1a192b;border-radius:3px;color:#222;font-size:12px;padding:10px;text-align:center;width:150px}.react-flow__node-default.selectable:hover,.react-flow__node-group.selectable:hover,.react-flow__node-input.selectable:hover,.react-flow__node-output.selectable:hover{box-shadow:0 1px 4px 1px rgba(0,0,0,.08)}.react-flow__node-default.selectable.selected,.react-flow__node-default.selectable:focus,.react-flow__node-default.selectable:focus-visible,.react-flow__node-group.selectable.selected,.react-flow__node-group.selectable:focus,.react-flow__node-group.selectable:focus-visible,.react-flow__node-input.selectable.selected,.react-flow__node-input.selectable:focus,.react-flow__node-input.selectable:focus-visible,.react-flow__node-output.selectable.selected,.react-flow__node-output.selectable:focus,.react-flow__node-output.selectable:focus-visible{box-shadow:0 0 0 .5px #1a192b}.react-flow__node-group{background-color:hsla(0,0%,94%,.25)}.react-flow__nodesselection-rect,.react-flow__selection{background:rgba(0,89,220,.08);border:1px dotted rgba(0,89,220,.8)}.react-flow__nodesselection-rect:focus,.react-flow__nodesselection-rect:focus-visible,.react-flow__selection:focus,.react-flow__selection:focus-visible{outline:none}.react-flow__controls{box-shadow:0 0 2px 1px rgba(0,0,0,.08)}.react-flow__controls-button{align-items:center;background:#fefefe;border:none;border-bottom:1px solid #eee;box-sizing:content-box;cursor:pointer;display:flex;height:16px;justify-content:center;padding:5px;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:16px}.react-flow__controls-button:hover{background:#f4f4f4}.react-flow__controls-button svg{max-height:12px;max-width:12px;width:100%}.react-flow__controls-button:disabled{pointer-events:none}.react-flow__controls-button:disabled svg{fill-opacity:.4}.react-flow__minimap{background-color:#fff}.react-flow__minimap svg{display:block}.react-flow__resize-control{position:absolute}.react-flow__resize-control.left,.react-flow__resize-control.right{cursor:ew-resize}.react-flow__resize-control.bottom,.react-flow__resize-control.top{cursor:ns-resize}.react-flow__resize-control.bottom.right,.react-flow__resize-control.top.left{cursor:nwse-resize}.react-flow__resize-control.bottom.left,.react-flow__resize-control.top.right{cursor:nesw-resize}.react-flow__resize-control.handle{background-color:#3367d9;border:1px solid #fff;border-radius:1px;height:4px;transform:translate(-50%,-50%);width:4px}.react-flow__resize-control.handle.left{left:0;top:50%}.react-flow__resize-control.handle.right{left:100%;top:50%}.react-flow__resize-control.handle.top{left:50%;top:0}.react-flow__resize-control.handle.bottom{left:50%;top:100%}.react-flow__resize-control.handle.bottom.left,.react-flow__resize-control.handle.top.left{left:0}.react-flow__resize-control.handle.bottom.right,.react-flow__resize-control.handle.top.right{left:100%}.react-flow__resize-control.line{border:0 solid #3367d9}.react-flow__resize-control.line.left,.react-flow__resize-control.line.right{height:100%;top:0;transform:translate(-50%);width:1px}.react-flow__resize-control.line.left{border-left-width:1px;left:0}.react-flow__resize-control.line.right{border-right-width:1px;left:100%}.react-flow__resize-control.line.bottom,.react-flow__resize-control.line.top{height:1px;left:0;transform:translateY(-50%);width:100%}.react-flow__resize-control.line.top{border-top-width:1px;top:0}.react-flow__resize-control.line.bottom{border-bottom-width:1px;top:100%}");const a=({id:t,sourceX:n,sourceY:a,targetX:o,targetY:r,sourcePosition:l,targetPosition:i,style:s={},markerEnd:c,bidirectional:d=!1,data:p,clientToSvgCoords:f,svgRef:u,onInspect:m})=>{var g;e.useState(!1);const b=()=>{var e;switch(null===(e=null==p?void 0:p.details)||void 0===e?void 0:e.state){case"Open":return"#000000";case"Completed":return"#15803d";case"Error":return"#ef4444";default:return s.stroke||"#6366f1"}},[h,x]=e.useMemo(()=>{const l=`M ${n} ${a} Q ${(n+o)/2} ${(a+r)/2} ${o} ${r}`,i=[];if(d){const n=b();i.push(e.createElement("defs",{key:`${t}-markers`},e.createElement("marker",{id:`${t}-arrowhead-forward`,markerWidth:"10",markerHeight:"7",refX:"9",refY:"3.5",orient:"auto",markerUnits:"strokeWidth"},e.createElement("polygon",{points:"0 0, 10 3.5, 0 7",fill:n})),e.createElement("marker",{id:`${t}-arrowhead-backward`,markerWidth:"10",markerHeight:"7",refX:"1",refY:"3.5",orient:"auto",markerUnits:"strokeWidth"},e.createElement("polygon",{points:"10 0, 0 3.5, 10 7",fill:n}))))}return[l,i]},[n,a,o,r,t,d,null===(g=null==p?void 0:p.details)||void 0===g?void 0:g.state]),w=Object.assign(Object.assign({},s),{stroke:b(),strokeWidth:s.strokeWidth||4,cursor:"pointer"});return e.createElement("g",{"data-edge-id":t},x,e.createElement("path",{id:t,className:"react-flow__edge-path",d:h,markerEnd:d?`url(#${t}-arrowhead-forward)`:c,markerStart:d?`url(#${t}-arrowhead-backward)`:void 0,style:w}),(null==p?void 0:p.label)&&e.createElement("foreignObject",{x:(n+o)/2-50,y:(a+r)/2-20,width:"100",height:"40",style:{overflow:"visible",pointerEvents:"none"}},e.createElement("div",{className:"edge-label-renderer",style:{display:"flex",alignItems:"center",justifyContent:"center",width:"100%",height:"100%",pointerEvents:"auto"}},e.createElement("button",{className:"edge-label-button",onClick:e=>{e.stopPropagation(),m&&p&&m(p)},style:{background:"#6366f1",color:"white",border:"none",borderRadius:6,padding:"4px 12px",fontSize:12,fontWeight:600,cursor:"pointer",boxShadow:"0 2px 8px rgba(99,102,241,0.10)",transition:"background 0.2s"}},"Inspect"))),e.createElement("style",null,"\n .edge-label-renderer {\n z-index: 8001;\n user-select: none;\n pointer-events: auto;\n }\n\n .edge-label-button {\n pointer-events: auto;\n }\n "))},o=({data:n,id:a})=>{var o;const{fitView:r}=t.useReactFlow(),l=(null===(o=n.edges)||void 0===o?void 0:o.some(e=>e.source===a))||!1;return e.createElement(e.Fragment,null,e.createElement("div",{className:"agent-node",onClick:()=>{r({nodes:[{id:a}],duration:800,padding:.1,minZoom:.5,maxZoom:1.5}),n.onInspect&&n.onInspect({label:n.label,description:n.description,nodeType:n.nodeType,step:n.step,time:n.time,icon:n.icon})},style:{cursor:"pointer"}},e.createElement(t.Handle,{type:"target",position:t.Position.Top,style:{background:"#6366f1"}}),e.createElement("div",{className:"agent-header"},e.createElement("div",{className:"agent-icon"},n.icon||"📋"),e.createElement("div",{className:"agent-label"},n.label)),n.description&&e.createElement("div",{className:"agent-description"},n.description),n.step&&e.createElement("div",{className:"agent-meta"},e.createElement("span",{className:"step"},"Step: ",n.step),n.time&&e.createElement("span",{className:"time"},new Date(1e3*n.time).toLocaleTimeString())),l&&e.createElement(t.Handle,{type:"source",position:t.Position.Bottom,style:{background:"#6366f1"}})),e.createElement("style",null,"\n .agent-node {\n padding: 12px;\n border-radius: 8px;\n background: white;\n border: 2px solid #e5e7eb;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n min-width: 200px;\n max-width: 250px;\n transition: all 0.2s ease;\n position: relative;\n z-index: -5;\n }\n \n .agent-node:hover {\n border-color: #6366f1;\n box-shadow: 0 4px 8px rgba(99, 102, 241, 0.2);\n }\n \n .agent-header {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-bottom: 8px;\n }\n \n .agent-icon {\n font-size: 20px;\n }\n \n .agent-label {\n font-weight: 600;\n color: #1f2937;\n font-size: 14px;\n word-break: break-word;\n }\n \n .agent-description {\n color: #6b7280;\n font-size: 12px;\n line-height: 1.4;\n word-break: break-word;\n white-space: pre-line;\n }\n \n .agent-meta {\n margin-top: 8px;\n padding-top: 8px;\n border-top: 1px solid #e5e7eb;\n display: flex;\n justify-content: space-between;\n font-size: 10px;\n color: #9ca3af;\n }\n \n .step {\n background: #f3f4f6;\n padding: 2px 6px;\n border-radius: 4px;\n }\n \n .time {\n font-family: monospace;\n }\n \n .react-flow__handle {\n width: 8px;\n height: 8px;\n border: 2px solid #6366f1;\n }\n "))},r=({stamps:t,currentStep:n,isPlaying:a,onStepChange:o,onPlayPause:r})=>{const l=t.length>0?Math.max(...t.map(e=>e.step)):0,i=t.length>0?Math.min(...t.map(e=>e.step)):0,s=l-i+1;return e.useEffect(()=>{const e=document.querySelectorAll('[data-bs-toggle="tooltip"]'),t=Array.from(e).map(e=>new window.bootstrap.Tooltip(e));return()=>{t.forEach(e=>e.dispose())}},[t,n]),e.createElement("div",{style:{position:"absolute",bottom:0,left:0,right:0,height:"60px",backgroundColor:"white",borderTop:"1px solid #e5e7eb",display:"flex",alignItems:"center",padding:"0 16px",gap:"12px",zIndex:10}},e.createElement("button",{onClick:r,style:{width:"32px",height:"32px",borderRadius:"50%",border:"1px solid #d1d5db",backgroundColor:"white",display:"flex",alignItems:"center",justifyContent:"center",cursor:"pointer",transition:"all 0.2s ease"},onMouseEnter:e=>{e.currentTarget.style.backgroundColor="#f3f4f6"},onMouseLeave:e=>{e.currentTarget.style.backgroundColor="white"}},a?e.createElement("div",{style:{display:"flex",gap:"2px"}},e.createElement("div",{style:{width:"3px",height:"12px",backgroundColor:"#374151"}}),e.createElement("div",{style:{width:"3px",height:"12px",backgroundColor:"#374151"}})):e.createElement("div",{style:{width:0,height:0,borderLeft:"8px solid #374151",borderTop:"6px solid transparent",borderBottom:"6px solid transparent",marginLeft:"2px"}})),e.createElement("div",{style:{flex:1,display:"flex",alignItems:"center",gap:"8px",padding:"0 8px"}},Array.from({length:s},(a,r)=>{var l;const s=i+r,c=s===n,d=s<n,p=t.some(e=>e.step===s);let f="white";c?f="#6366f1":d?f="#fef3c7":p&&(f="#e5e7eb");const u=`Step ${s}${p?` - ${(null===(l=t.find(e=>e.step===s))||void 0===l?void 0:l.identifier)||""}`:" - No activity"}`;return e.createElement("button",{key:s,onClick:()=>o(s),"data-bs-toggle":"tooltip","data-bs-placement":"top","data-bs-title":u,style:{width:"16px",height:"16px",borderRadius:"50%",border:c?"2px solid #6366f1":"1px solid #d1d5db",backgroundColor:f,cursor:"pointer",transition:"all 0.2s ease",position:"relative"},onMouseEnter:e=>{c||(e.currentTarget.style.backgroundColor=d?"#fde68a":p?"#d1d5db":"#f3f4f6")},onMouseLeave:e=>{c||(e.currentTarget.style.backgroundColor=d?"#fef3c7":p?"#e5e7eb":"white")}})})),e.createElement("div",{style:{fontSize:"12px",color:"#6b7280",minWidth:"60px",textAlign:"right"}},n," / ",l))},l=({stamps:t,currentStep:a,onStepChange:o,onToggle:r})=>{const l=t.length>0?Math.max(...t.map(e=>e.step)):0,i=t.length>0?Math.min(...t.map(e=>e.step)):0,s=l-i+1;return e.createElement("div",{style:{width:"100%",height:"100%",backgroundColor:"white",display:"flex",flexDirection:"column",overflow:"hidden"}},e.createElement("div",{style:{padding:"16px",borderBottom:"1px solid #e5e7eb",backgroundColor:"#f9fafb",display:"flex",justifyContent:"space-between",alignItems:"flex-start"}},e.createElement("div",null,e.createElement("h3",{style:{margin:0,fontSize:"16px",fontWeight:600,color:"#1f2937"}},"Timeline"),e.createElement("p",{style:{margin:"4px 0 0 0",fontSize:"12px",color:"#6b7280"}},"Click to jump to step")),r&&e.createElement("button",{onClick:r,style:{border:"none",background:"none",cursor:"pointer",color:"#6b7280",padding:"4px",display:"flex",alignItems:"center",justifyContent:"center",transition:"color 0.2s ease"},title:"Collapse Panel"},e.createElement(n.PanelLeft,{size:16}))),e.createElement("div",{style:{flex:1,overflowY:"auto",padding:"8px 0 16px 0"}},Array.from({length:s},(n,r)=>{const l=i+r,s=l===a,c=l<a,d=t.some(e=>e.step===l),p=(e=>{const n=t.filter(t=>t.step===e);if(0===n.length)return null;const a=e-1,o=t.filter(e=>e.step===a);return 0===o.length?null:Math.min(...n.map(e=>e.time))-Math.max(...o.map(e=>e.time))})(l),f=(e=>{var n;const a=t.filter(t=>t.step===e);return 0===a.length?`Step ${e}`:(null===(n=a[0])||void 0===n?void 0:n.identifier)||`Step ${e}`})(l);return e.createElement("div",{key:l,onClick:()=>d&&o(l),style:{padding:"12px 16px",borderBottom:"1px solid #f3f4f6",cursor:d?"pointer":"default",backgroundColor:s?"#f0f9ff":"transparent",borderLeft:s?"4px solid #6366f1":"4px solid transparent",transition:"all 0.2s ease",position:"relative"},onMouseEnter:e=>{d&&!s&&(e.currentTarget.style.backgroundColor="#f8fafc")},onMouseLeave:e=>{d&&!s&&(e.currentTarget.style.backgroundColor="transparent")}},e.createElement("div",{style:{display:"flex",alignItems:"center",gap:"8px",marginBottom:"4px"}},e.createElement("div",{style:{width:"12px",height:"12px",borderRadius:"50%",backgroundColor:s?"#6366f1":c?"#fbbf24":d?"#9ca3af":"#e5e7eb",border:s?"2px solid #6366f1":"1px solid #d1d5db",flexShrink:0}}),e.createElement("span",{style:{fontSize:"14px",fontWeight:s?600:500,color:s?"#1f2937":"#6b7280"}},"Step ",l),p&&e.createElement("span",{style:{fontSize:"11px",color:"#9ca3af",backgroundColor:"#f3f4f6",padding:"2px 6px",borderRadius:"4px",marginLeft:"auto"}},(e=>e<1e3?`${e.toFixed(0)}ms`:e<6e4?`${(e/1e3).toFixed(1)}s`:`${(e/6e4).toFixed(1)}m`)(p))),e.createElement("div",{style:{fontSize:"13px",color:d?"#1f2937":"#9ca3af",lineHeight:"1.4",wordBreak:"break-word",fontStyle:d?"normal":"italic"}},d?f:"No activity"),s&&e.createElement("div",{style:{position:"absolute",right:"8px",top:"50%",transform:"translateY(-50%)",width:"6px",height:"6px",borderRadius:"50%",backgroundColor:"#6366f1",animation:"pulse 2s infinite"}}))})),e.createElement("style",null,"\n @keyframes pulse {\n 0% {\n opacity: 1;\n }\n 50% {\n opacity: 0.5;\n }\n 100% {\n opacity: 1;\n }\n }\n "))},i=(e,t)=>e.length<=t?e:e.substring(0,t)+"...",s={agent:o},c=({flowData:o,width:c="100%",height:d="1000px",className:p="",defaultZoom:f=1,defaultPan:u={x:0,y:0},disableAutoFit:m=!1,showTimeline:g=!1})=>{var b,h,x,w;const v=o;if(!v)return e.createElement("div",{style:{width:"number"==typeof c?`${c}px`:c,height:"number"==typeof d?`${d}px`:d,border:"1px solid #e5e7eb",borderRadius:"8px",background:"#f9fafb",position:"relative",minWidth:"800px",minHeight:"600px",display:"flex",alignItems:"center",justifyContent:"center"},className:p},e.createElement("div",{style:{textAlign:"center"}},e.createElement("div",{style:{fontSize:"16px",color:"#6b7280",marginBottom:"8px"}},"No flow data available"),e.createElement("div",{style:{fontSize:"14px",color:"#9ca3af"}},"Please provide flowData prop")));const _=e.useRef(null),y=e.useRef(null),[E,k]=e.useState({width:"number"==typeof c?c:800,height:"number"==typeof d?d:600}),[z,N]=e.useState(0),[S,C]=e.useState(!1),T=e.useRef(null),[j,F]=e.useState(!1),[R,$]=e.useState(!1),[M,I]=e.useState(null),P=e.useMemo(()=>{const e=v.stamps||v.steps||[];return e.length>0?Math.max(...e.map(e=>e.step)):0},[v.stamps,v.steps]);e.useEffect(()=>(S?T.current=setInterval(()=>{N(e=>e>=P?(C(!1),e):e+1)},250):T.current&&(clearInterval(T.current),T.current=null),()=>{T.current&&clearInterval(T.current)}),[S,P]),e.useEffect(()=>{const e=v.stamps||v.steps||[];e.length>0&&N(Math.max(...e.map(e=>e.step)))},[v.stamps,v.steps]),e.useEffect(()=>{const e=()=>{if(_.current){const e=_.current.getBoundingClientRect();k({width:e.width||("number"==typeof c?c:800),height:e.height||("number"==typeof d?d:600)})}};if(e(),window.ResizeObserver&&_.current){const t=new ResizeObserver(e);return t.observe(_.current),()=>t.disconnect()}return window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)},[c,d]);const O=e.useMemo(()=>((e,t)=>{new Map(e.map(e=>[e.identifier,e]));const n=new Map,a=new Map;e.forEach(e=>n.set(e.identifier,[])),t.length>0?t.forEach(e=>{var t;e.source&&e.target&&(null===(t=n.get(e.source))||void 0===t||t.push(e.target),a.set(e.target,e.source))}):e.forEach(e=>{var t;e.parent&&e.parent.identifier!==e.identifier&&(null===(t=n.get(e.parent.identifier))||void 0===t||t.push(e.identifier),a.set(e.identifier,e.parent.identifier))});const o=e.filter(e=>!a.has(e.identifier)),r=new Map,l=(e,t)=>{r.set(e,t);for(const a of n.get(e)||[])l(a,t+1)};o.forEach(e=>l(e.identifier,0));const i=[];e.forEach(e=>{var t;const n=null!==(t=r.get(e.identifier))&&void 0!==t?t:0;i[n]||(i[n]=[]),i[n].push(e.identifier)});const s=new Map,c=200,d=e=>{const t=n.get(e)||[];if(0===t.length)return s.set(e,c),c;let a=0;for(const e of t)a+=d(e);return a+=100*(t.length-1),s.set(e,a),a};o.forEach(e=>d(e.identifier));const p=new Map,f=(e,t,a)=>{const o=s.get(e)||c,r=300*a+100,l=n.get(e)||[];if(0===l.length)p.set(e,{x:t+o/2-100,y:r});else{let n=t;for(const e of l){const t=s.get(e)||c;f(e,n,a+1),n+=t+100}const o=l[0],i=l[l.length-1],d=p.get(o),u=p.get(i),m=(d.x+u.x)/2;p.set(e,{x:m,y:r})}};let u=0;for(const e of o)f(e.identifier,u,0),u+=(s.get(e.identifier)||c)+200;return p})(v.nodes,v.edges||[]),[v.nodes,v.edges]),A=e.useCallback(e=>v.nodes.filter(t=>t.stamp.step<=e),[v.nodes]),L=e.useCallback(e=>(v.edges||[]).filter(t=>t.stamp.step<=e),[v.edges]),B=e.useCallback(e=>{I({type:"node",data:e}),$(!0)},[]),D=e.useCallback(e=>{const t=L(z).find(t=>t.source===e.source&&t.target===e.target),n=Object.assign(Object.assign({},e),{id:(null==t?void 0:t.identifier)||"N/A"});I({type:"edge",data:n}),$(!0)},[L,z]),W=e.useMemo(()=>{const e=A(z),t=L(z);return e.map(e=>{var n,a;const o=O.get(e.identifier)||{x:0,y:0},{description:r}=(e=>{var t,n;let a=e.node_type,o="";if(null===(n=null===(t=e.details)||void 0===t?void 0:t.internals)||void 0===n?void 0:n.llm_details){const t=e.details.internals.llm_details;if(t.length>0){const n=t[t.length-1];o=`${n.model_name} (${n.model_provider})`,a=`${e.node_type}\n${o}`}}return{description:a,modelInfo:o}})(e),l=e.stamp.step===z;return{id:e.identifier,type:"agent",position:o,data:{label:e.node_type,description:r,nodeType:e.node_type,step:null===(n=e.stamp)||void 0===n?void 0:n.step,time:null===(a=e.stamp)||void 0===a?void 0:a.time,isActive:l,onInspect:B,id:e.identifier,edges:t},style:{filter:l?"drop-shadow(0 4px 8px rgba(99, 102, 241, 0.3))":"none"}}})},[O,z,A,L,B]),H=e.useMemo(()=>L(z).filter(e=>e.source&&e.target).map(e=>{var t,n,a,o;const r=e.stamp.step===z;return{id:e.identifier,type:"default",source:e.source,target:e.target,animated:r,bidirectional:!0,style:{stroke:r?"#6366f1":"#9ca3af",strokeWidth:r?3:2},label:(null===(t=e.stamp)||void 0===t?void 0:t.identifier)?i(String(e.stamp.identifier),50):void 0,data:{label:(null===(n=e.stamp)||void 0===n?void 0:n.identifier)?i(String(e.stamp.identifier),50):void 0,source:e.source,target:e.target,step:null===(a=e.stamp)||void 0===a?void 0:a.step,time:null===(o=e.stamp)||void 0===o?void 0:o.time,details:e.details}}}),[z,L]),[U,X,Y]=t.useNodesState(W),[V,J,q]=t.useEdgesState(H);e.useEffect(()=>{X(W)},[W,X]),e.useEffect(()=>{J(H)},[H,J]);const Z=e.useCallback(e=>J(n=>t.addEdge(e,n)),[J]),G=e.useCallback(e=>{N(e),C(!1)},[]),Q=e.useCallback(()=>{C(e=>!e)},[]),K=(e,t)=>{var n;if(!y.current)return{x:0,y:0};const a=y.current.createSVGPoint();a.x=e,a.y=t;const o=a.matrixTransform(null===(n=y.current.getScreenCTM())||void 0===n?void 0:n.inverse());return{x:o.x,y:o.y}},ee=t.useReactFlow();return e.useEffect(()=>{if(m||!ee||0===W.length)return;const e=new Map;H.forEach(t=>{const n=e.get(t.source)||0;e.set(t.source,n+1);const a=e.get(t.target)||0;e.set(t.target,a+1)});let t="",n=0;e.forEach((e,a)=>{e>n&&(n=e,t=a)}),!t&&W.length>0&&(t=W[0].id),t&&setTimeout(()=>{ee.fitView({nodes:[{id:t}],duration:1e3,padding:.2,minZoom:f,maxZoom:1})},500)},[W,H,ee,m,f]),e.createElement("div",{ref:_,style:{width:"number"==typeof c?`${c}px`:c,height:"number"==typeof d?`${d}px`:d,border:"1px solid #e5e7eb",borderRadius:"8px",overflow:"hidden",position:"relative",minWidth:"800px",minHeight:"600px"},className:p},g&&e.createElement("div",{className:"side-panel "+(j?"expanded":"collapsed")},!j&&e.createElement("button",{className:"panel-toggle",onClick:()=>F(!j),title:"Expand Panel"},e.createElement(n.PanelLeft,{size:20})),j&&e.createElement("div",{className:"panel-content"},e.createElement(l,{stamps:v.stamps||v.steps||[],currentStep:z,onStepChange:G,onToggle:()=>F(!1)}))),e.createElement(t,{nodes:U,edges:V,onNodesChange:Y,onEdgesChange:q,onConnect:Z,nodeTypes:s,edgeTypes:{default:t=>e.createElement(a,Object.assign({},t,{clientToSvgCoords:K,svgRef:y,onInspect:D}))},attributionPosition:"bottom-left",style:{width:g&&j?"calc(100% - 280px)":"100%",height:g&&j?"calc(100% - 60px)":"100%",marginLeft:g&&j?"280px":"0"},defaultViewport:{x:u.x,y:u.y,zoom:f},onInit:e=>{if(_.current){const e=_.current.querySelector("svg");e&&(y.current=e)}}},e.createElement(t.Controls,null),e.createElement(t.Background,{color:"#f3f4f6",gap:16})),e.createElement("div",{className:"right-drawer "+(R?"open":"")},e.createElement("div",{className:"drawer-toggle",onClick:()=>$(!R)},e.createElement(n.PanelRight,{size:20})),R&&M&&e.createElement("div",{className:"drawer-content"},e.createElement("div",{className:"drawer-header"},e.createElement("h3",null,"node"===M.type?"Node Details":"Edge Details")),e.createElement("div",{className:"drawer-body"},"node"===M.type?e.createElement(e.Fragment,null,e.createElement("div",{className:"detail-row"},e.createElement("span",{className:"detail-label"},"Label:"),e.createElement("span",{className:"detail-value"},M.data.label||"N/A")),M.data.description&&e.createElement("div",{className:"detail-row"},e.createElement("span",{className:"detail-label"},"Description:"),e.createElement("span",{className:"detail-value"},M.data.description)),M.data.nodeType&&e.createElement("div",{className:"detail-row"},e.createElement("span",{className:"detail-label"},"Type:"),e.createElement("span",{className:"detail-value"},M.data.nodeType)),M.data.step&&e.createElement("div",{className:"detail-row"},e.createElement("span",{className:"detail-label"},"Step:"),e.createElement("span",{className:"detail-value"},M.data.step)),M.data.time&&e.createElement("div",{className:"detail-row"},e.createElement("span",{className:"detail-label"},"Time:"),e.createElement("span",{className:"detail-value"},new Date(1e3*M.data.time).toLocaleString())),M.data.icon&&e.createElement("div",{className:"detail-row"},e.createElement("span",{className:"detail-label"},"Icon:"),e.createElement("span",{className:"detail-value"},M.data.icon))):e.createElement(e.Fragment,null,e.createElement("div",{className:"detail-row"},e.createElement("span",{className:"detail-label"},"ID:"),e.createElement("span",{className:"detail-value"},M.data.id||"N/A")),M.data.source&&e.createElement("div",{className:"detail-row"},e.createElement("span",{className:"detail-label"},"Source:"),e.createElement("span",{className:"detail-value"},M.data.source)),M.data.target&&e.createElement("div",{className:"detail-row"},e.createElement("span",{className:"detail-label"},"Target:"),e.createElement("span",{className:"detail-value"},M.data.target)),M.data.label&&e.createElement("div",{className:"detail-row"},e.createElement("span",{className:"detail-label"},"Label:"),e.createElement("span",{className:"detail-value"},M.data.label)),M.data.step&&e.createElement("div",{className:"detail-row"},e.createElement("span",{className:"detail-label"},"Step:"),e.createElement("span",{className:"detail-value"},M.data.step)),M.data.time&&e.createElement("div",{className:"detail-row"},e.createElement("span",{className:"detail-label"},"Time:"),e.createElement("span",{className:"detail-value"},new Date(1e3*M.data.time).toLocaleString())),(null===(h=null===(b=M.data)||void 0===b?void 0:b.details)||void 0===h?void 0:h.input_args)&&Array.isArray(M.data.details.input_args)&&M.data.details.input_args.length>0&&e.createElement(e.Fragment,null,e.createElement("div",{className:"detail-row"},e.createElement("span",{className:"detail-label"},"Inputs"),e.createElement("span",{className:"detail-value",style:{overflowY:"auto",maxHeight:"300px"}},Array.isArray(M.data.details.input_args[0])?M.data.details.input_args[0].map((t,n)=>e.createElement("div",{key:(null==t?void 0:t.role)||n,style:{marginBottom:8}},e.createElement("span",{className:"detail-label"},"Role:"),e.createElement("span",{className:"detail-value"},(null==t?void 0:t.role)||"Unknown"),e.createElement("span",{className:"detail-label"},"Content:"),e.createElement("span",{className:"detail-value"},(null==t?void 0:t.content)||"No content"))):e.createElement("span",{className:"detail-value"},JSON.stringify(M.data.details.input_args[0],null,2)))),e.createElement("div",{className:"detail-row"},e.createElement("span",{className:"detail-label"},"Outputs"),e.createElement("span",{className:"detail-value"},JSON.stringify(null===(w=null===(x=M.data)||void 0===x?void 0:x.details)||void 0===w?void 0:w.output,null,2)))))))),g&&j&&e.createElement("div",{style:{marginLeft:"280px",marginTop:"100px"}},e.createElement(r,{stamps:v.stamps||v.steps||[],currentStep:z,isPlaying:S,onStepChange:G,onPlayPause:Q})),e.createElement("style",null,`\n .react-flow__edge-label {\n font-size: 10px;\n background: white;\n padding: 2px 4px;\n border-radius: 4px;\n border: 1px solid #e5e7eb;\n max-width: 150px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n /* Right Drawer Styles */\n .right-drawer {\n position: absolute;\n top: 0;\n right: 0;\n height: 100%;\n z-index: 1000;\n display: flex;\n align-items: flex-start;\n transition: transform 0.3s ease;\n margin-left: ${g&&j?"280px":"0"}; /* Account for vertical timeline when visible */\n }\n\n .right-drawer:not(.open) {\n transform: translateX(calc(100% - 50px));\n }\n\n .right-drawer.open {\n transform: translateX(0);\n }\n\n .drawer-toggle {\n width: 50px;\n height: 50px;\n background: none;\n color: #6b7280;\n border: none;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: color 0.2s ease;\n margin-top: 20px;\n }\n\n .drawer-toggle:hover {\n color: #374151;\n }\n\n .drawer-content {\n background: white;\n border: 1px solid #e5e7eb;\n border-radius: 8px 0 0 8px;\n width: 400px;\n height: calc(100% - 40px);\n margin-top: 20px;\n display: flex;\n flex-direction: column;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n animation: drawerSlideIn 0.3s ease-out;\n }\n\n .drawer-header {\n padding: 16px 20px;\n border-bottom: 1px solid #e5e7eb;\n background: #f9fafb;\n display: flex;\n justify-content: space-between;\n align-items: center;\n flex-shrink: 0;\n }\n\n .drawer-header h3 {\n margin: 0;\n font-size: 16px;\n font-weight: 600;\n color: #1f2937;\n }\n\n .close-button {\n background: none;\n border: none;\n font-size: 20px;\n color: #6b7280;\n cursor: pointer;\n padding: 4px;\n width: 28px;\n height: 28px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 6px;\n transition: all 0.2s ease;\n }\n\n .close-button:hover {\n background: #e5e7eb;\n color: #1f2937;\n }\n\n .drawer-body {\n padding: 20px;\n overflow-y: auto;\n flex: 1;\n width: 100%;\n box-sizing: border-box;\n }\n\n .detail-row {\n display: grid;\n grid-template-columns: 100px 1fr;\n margin-bottom: 12px;\n align-items: flex-start;\n gap: 8px;\n }\n\n .detail-row:last-child {\n margin-bottom: 0;\n }\n\n .detail-label {\n font-weight: 600;\n color: #6b7280;\n font-size: 13px;\n word-break: break-word;\n }\n\n .detail-value {\n color: #1f2937;\n font-size: 13px;\n word-break: break-word;\n flex: 1;\n width: 100%;\n overflow: visible;\n text-overflow: unset;\n max-width: unset;\n white-space: pre-line;\n line-height: 1.4;\n }\n\n @keyframes drawerSlideIn {\n from {\n opacity: 0;\n transform: translateX(20px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n }\n\n /* Scoreboard Styles */\n .scoreboard {\n position: absolute;\n top: 20px;\n left: 50%;\n transform: translateX(-50%);\n background: white;\n border: 1px solid #e5e7eb;\n border-radius: 8px;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n z-index: 1000;\n min-width: 400px;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n }\n\n .scoreboard-header {\n padding: 12px 16px;\n border-bottom: 1px solid #e5e7eb;\n background: #f9fafb;\n text-align: center;\n }\n\n .scoreboard-header h3 {\n margin: 0;\n font-size: 14px;\n font-weight: 600;\n color: #1f2937;\n }\n\n .scoreboard-content {\n padding: 16px;\n display: flex;\n justify-content: space-around;\n align-items: center;\n gap: 20px;\n }\n\n .scoreboard-item {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 4px;\n }\n\n .scoreboard-label {\n font-size: 12px;\n color: #6b7280;\n font-weight: 500;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n }\n\n .scoreboard-count {\n font-size: 18px;\n font-weight: 700;\n padding: 6px 12px;\n border-radius: 6px;\n min-width: 40px;\n text-align: center;\n }\n\n .scoreboard-count.open {\n background: #fef3c7;\n color: #92400e;\n }\n\n .scoreboard-count.completed {\n background: #d1fae5;\n color: #065f46;\n }\n\n .scoreboard-count.error {\n background: #fee2e2;\n color: #991b1b;\n }\n\n .scoreboard-count.error.clickable {\n transition: all 0.2s ease;\n }\n\n .scoreboard-count.error.clickable:hover {\n background: #fecaca;\n transform: scale(1.05);\n box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);\n }\n\n /* Side Panel Styles */\n .side-panel {\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n z-index: 1000;\n display: flex;\n flex-direction: column;\n transition: all 0.3s ease;\n }\n\n .side-panel.collapsed {\n width: 60px;\n }\n\n .side-panel.expanded {\n width: 280px;\n }\n\n .panel-toggle {\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n background: none;\n cursor: pointer;\n color: #6b7280;\n transition: color 0.2s ease;\n padding: 8px;\n margin: 20px 0 0 0;\n }\n\n .panel-toggle:hover {\n color: #374151;\n }\n\n .panel-content {\n flex: 1;\n background: white;\n border-right: 1px solid #e5e7eb;\n box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);\n overflow: hidden;\n }\n\n\n `))},d=n=>e.createElement(t.ReactFlowProvider,null,e.createElement(c,Object.assign({},n)));function p(e,t,n,a){return new(n||(n=Promise))(function(o,r){function l(e){try{s(a.next(e))}catch(e){r(e)}}function i(e){try{s(a.throw(e))}catch(e){r(e)}}function s(e){var t;e.done?o(e.value):(t=e.value,t instanceof n?t:new n(function(e){e(t)})).then(l,i)}s((a=a.apply(e,t||[])).next())})}"function"==typeof SuppressedError&&SuppressedError;const f="/api",u=()=>{const{listJsonFiles:t,loadJsonFile:n,loading:a,error:o}=(()=>{const[t,n]=e.useState(!1),[a,o]=e.useState(null);return{loading:t,error:a,listJsonFiles:e.useCallback(()=>p(void 0,void 0,void 0,function*(){n(!0),o(null);try{console.log("Fetching files from:",`${f}/files`);const e=yield fetch(`${f}/files`);if(console.log("Response status:",e.status),!e.ok)throw new Error(`HTTP error! status: ${e.status}`);const t=yield e.json();return console.log("Files received:",t),t}catch(e){console.error("Error fetching files:",e);const t={message:e instanceof Error?e.message:"Unknown error occurred",status:e instanceof Error&&"status"in e?e.status:void 0};return o(t),[]}finally{n(!1)}}),[]),loadJsonFile:e.useCallback(e=>p(void 0,void 0,void 0,function*(){n(!0),o(null);try{const t=yield fetch(`${f}/json/${e}`);if(!t.ok)throw new Error(`HTTP error! status: ${t.status}`);return yield t.json()}catch(e){const t={message:e instanceof Error?e.message:"Unknown error occurred",status:e instanceof Error&&"status"in e?e.status:void 0};return o(t),null}finally{n(!1)}}),[]),triggerRefresh:e.useCallback(()=>p(void 0,void 0,void 0,function*(){n(!0),o(null);try{const e=yield fetch(`${f}/refresh`,{method:"POST"});if(!e.ok)throw new Error(`HTTP error! status: ${e.status}`);return yield e.json()}catch(e){const t={message:e instanceof Error?e.message:"Unknown error occurred",status:e instanceof Error&&"status"in e?e.status:void 0};return o(t),null}finally{n(!1)}}),[])}})(),[r,l]=e.useState({availableFiles:[],currentFile:null,flowData:null,loading:!1,error:null});e.useEffect(()=>{i()},[]);const i=e.useCallback(()=>p(void 0,void 0,void 0,function*(){const e=yield t();l(t=>Object.assign(Object.assign({},t),{availableFiles:e}))}),[t]),s=e.useCallback(e=>p(void 0,void 0,void 0,function*(){l(e=>Object.assign(Object.assign({},e),{loading:!0,error:null}));try{const t=yield n(e);l(t?n=>Object.assign(Object.assign({},n),{currentFile:e,flowData:t,loading:!1,error:null}):e=>Object.assign(Object.assign({},e),{loading:!1,error:"Failed to load file data"}))}catch(e){l(t=>Object.assign(Object.assign({},t),{loading:!1,error:e instanceof Error?e.message:"Unknown error occurred"}))}}),[n]),c=e.useCallback(()=>p(void 0,void 0,void 0,function*(){yield i()}),[i]);return Object.assign(Object.assign({},r),{loading:r.loading||a,error:r.error||(null==o?void 0:o.message)||null,loadFile:s,refreshFiles:c})},m=({files:t,currentFile:a,onFileSelect:o,onRefresh:r,loading:l=!1,disabled:i=!1})=>e.createElement("div",{style:{display:"flex",alignItems:"center",gap:"8px"}},e.createElement("select",{value:a||"",onChange:e=>o(e.target.value),disabled:i,style:{cursor:"pointer",padding:"8px 16px 8px 16px",borderRadius:"4px",fontSize:"14px",border:"1px solid #ccc",appearance:"none",WebkitAppearance:"none",MozAppearance:"none"}},e.createElement("option",{value:""},"Select a RailTracks Run..."),t.map(t=>e.createElement("option",{key:t.name,value:t.name},t.name))),e.createElement("button",{onClick:e=>{e.stopPropagation(),r()},disabled:l||i,title:"Refresh files",style:{background:"none",border:"none",cursor:"pointer",padding:"4px",borderRadius:"4px"}},e.createElement(n.RefreshCw,{size:16,style:{animation:l?"spin 1s linear infinite":"none"}})));exports.AgenticFlowVisualizer=c,exports.App=()=>{const{availableFiles:t,currentFile:n,flowData:a,loading:o,error:r,loadFile:l,refreshFiles:i}=u(),[s,c]=e.useState(!1);return e.createElement("div",{className:"app"},e.createElement("div",{className:"app-header"},e.createElement("h1",null,"RailTracks Visualizer"),e.createElement("div",{className:"file-selector-container"},e.createElement(m,{files:t,currentFile:n,onFileSelect:e=>{l(e)},onRefresh:i,loading:o,disabled:o}),e.createElement("label",{className:"timeline-toggle"},e.createElement("input",{type:"checkbox",checked:s,onChange:e=>c(e.target.checked)}),"Show Timeline"))),r&&e.createElement("div",{className:"error-message"},e.createElement("p",null,"Error: ",r)),e.createElement("div",{className:"visualizer-container"},o?e.createElement("div",{className:"loading-state"},e.createElement("div",{className:"loading-spinner"}),e.createElement("p",null,"Loading flow data...")):a?e.createElement(d,{flowData:a,showTimeline:s}):e.createElement("div",{className:"no-data-state"},e.createElement("p",null,"Please select a file to visualize the flow data"))),e.createElement("style",null,"\n .app {\n min-height: 100vh;\n background: #f9fafb;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n }\n\n .app-header {\n background: white;\n border-bottom: 1px solid #e5e7eb;\n padding: 5px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n }\n\n .app-header h1 {\n margin: 0;\n font-size: 18px;\n font-weight: 600;\n color: #1f2937;\n }\n\n .file-selector-container {\n display: flex;\n align-items: center;\n gap: 20px;\n }\n\n .timeline-toggle {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 14px;\n color: #374151;\n cursor: pointer;\n user-select: none;\n }\n\n .timeline-toggle input[type=\"checkbox\"] {\n cursor: pointer;\n }\n\n .error-message {\n background: #fee2e2;\n border: 1px solid #fecaca;\n color: #991b1b;\n padding: 12px 20px;\n margin: 20px;\n border-radius: 6px;\n font-size: 14px;\n }\n\n .visualizer-container {\n padding: 20px;\n min-height: calc(100vh - 100px);\n }\n\n .loading-state {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 400px;\n color: #6b7280;\n }\n\n .loading-spinner {\n width: 40px;\n height: 40px;\n border: 4px solid #e5e7eb;\n border-top: 4px solid #6366f1;\n border-radius: 50%;\n animation: spin 1s linear infinite;\n margin-bottom: 16px;\n }\n\n @keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n\n .no-data-state {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 400px;\n color: #6b7280;\n font-size: 16px;\n }\n "))},exports.Edge=a,exports.FileSelector=m,exports.Node=o,exports.Timeline=r,exports.VerticalTimeline=l,exports.Visualizer=d;
2
2
  //# sourceMappingURL=index.js.map