@railtownai/railtracks-visualizer 0.0.8 → 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 (12) hide show
  1. package/LICENSE +201 -201
  2. package/README.md +52 -52
  3. package/dist/cjs/index.js +1 -1
  4. package/dist/cjs/index.js.map +1 -1
  5. package/dist/esm/index.js +1 -1
  6. package/dist/esm/index.js.map +1 -1
  7. package/dist/types/AgenticFlowVisualizer.d.ts +7 -0
  8. package/dist/types/AgenticFlowVisualizer.d.ts.map +1 -1
  9. package/dist/types/App.d.ts.map +1 -1
  10. package/dist/types/index.d.ts +2 -0
  11. package/dist/types/index.d.ts.map +1 -1
  12. package/package.json +93 -93
package/dist/esm/index.js CHANGED
@@ -1,2 +1,2 @@
1
- import e,{useState as t,useMemo as n,useEffect as o,useRef as r,useCallback as a}from"react";import l,{useReactFlow as i,Handle as s,Position as c,useNodesState as d,useEdgesState as p,addEdge as f,Controls as m,Background as u,ReactFlowProvider as g}from"reactflow";import{PanelLeft as b,PanelRight as h,RefreshCw as x}from"lucide-react";!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===n&&o.firstChild?o.insertBefore(r,o.firstChild):o.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.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 w=({id:o,sourceX:r,sourceY:a,targetX:l,targetY:i,sourcePosition:s,targetPosition:c,style:d={},markerEnd:p,bidirectional:f=!1,data:m,clientToSvgCoords:u,svgRef:g,onInspect:b})=>{var h;t(!1);const x=()=>{var e;switch(null===(e=null==m?void 0:m.details)||void 0===e?void 0:e.state){case"Open":return"#000000";case"Completed":return"#15803d";case"Error":return"#ef4444";default:return d.stroke||"#6366f1"}},[w,v]=n(()=>{const t=`M ${r} ${a} Q ${(r+l)/2} ${(a+i)/2} ${l} ${i}`,n=[];if(f){const t=x();n.push(e.createElement("defs",{key:`${o}-markers`},e.createElement("marker",{id:`${o}-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:t})),e.createElement("marker",{id:`${o}-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:t}))))}return[t,n]},[r,a,l,i,o,f,null===(h=null==m?void 0:m.details)||void 0===h?void 0:h.state]),_=Object.assign(Object.assign({},d),{stroke:x(),strokeWidth:d.strokeWidth||4,cursor:"pointer"});return e.createElement("g",{"data-edge-id":o},v,e.createElement("path",{id:o,className:"react-flow__edge-path",d:w,markerEnd:f?`url(#${o}-arrowhead-forward)`:p,markerStart:f?`url(#${o}-arrowhead-backward)`:void 0,style:_}),(null==m?void 0:m.label)&&e.createElement("foreignObject",{x:(r+l)/2-50,y:(a+i)/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(),b&&m&&b(m)},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 "))},v=({data:t,id:n})=>{var o;const{fitView:r}=i(),a=(null===(o=t.edges)||void 0===o?void 0:o.some(e=>e.source===n))||!1;return e.createElement(e.Fragment,null,e.createElement("div",{className:"agent-node",onClick:()=>{r({nodes:[{id:n}],duration:800,padding:.1,minZoom:.5,maxZoom:1.5}),t.onInspect&&t.onInspect({label:t.label,description:t.description,nodeType:t.nodeType,step:t.step,time:t.time,icon:t.icon})},style:{cursor:"pointer"}},e.createElement(s,{type:"target",position:c.Top,style:{background:"#6366f1"}}),e.createElement("div",{className:"agent-header"},e.createElement("div",{className:"agent-icon"},t.icon||"📋"),e.createElement("div",{className:"agent-label"},t.label)),t.description&&e.createElement("div",{className:"agent-description"},t.description),t.step&&e.createElement("div",{className:"agent-meta"},e.createElement("span",{className:"step"},"Step: ",t.step),t.time&&e.createElement("span",{className:"time"},new Date(1e3*t.time).toLocaleTimeString())),a&&e.createElement(s,{type:"source",position:c.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 "))},_=({stamps:t,currentStep:n,isPlaying:r,onStepChange:a,onPlayPause:l})=>{const i=t.length>0?Math.max(...t.map(e=>e.step)):0,s=t.length>0?Math.min(...t.map(e=>e.step)):0,c=i-s+1;return o(()=>{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:l,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"}},r?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:c},(o,r)=>{var l;const i=s+r,c=i===n,d=i<n,p=t.some(e=>e.step===i);let f="white";c?f="#6366f1":d?f="#fef3c7":p&&(f="#e5e7eb");const m=`Step ${i}${p?` - ${(null===(l=t.find(e=>e.step===i))||void 0===l?void 0:l.identifier)||""}`:" - No activity"}`;return e.createElement("button",{key:i,onClick:()=>a(i),"data-bs-toggle":"tooltip","data-bs-placement":"top","data-bs-title":m,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," / ",i))},y=({stamps:t,currentStep:n,onStepChange:o,onToggle:r})=>{const a=t.length>0?Math.max(...t.map(e=>e.step)):0,l=t.length>0?Math.min(...t.map(e=>e.step)):0,i=a-l+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(b,{size:16}))),e.createElement("div",{style:{flex:1,overflowY:"auto",padding:"8px 0 16px 0"}},Array.from({length:i},(r,a)=>{const i=l+a,s=i===n,c=i<n,d=t.some(e=>e.step===i),p=(e=>{const n=t.filter(t=>t.step===e);if(0===n.length)return null;const o=e-1,r=t.filter(e=>e.step===o);return 0===r.length?null:Math.min(...n.map(e=>e.time))-Math.max(...r.map(e=>e.time))})(i),f=(e=>{var n;const o=t.filter(t=>t.step===e);return 0===o.length?`Step ${e}`:(null===(n=o[0])||void 0===n?void 0:n.identifier)||`Step ${e}`})(i);return e.createElement("div",{key:i,onClick:()=>d&&o(i),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 ",i),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 "))},E=(e,t)=>e.length<=t?e:e.substring(0,t)+"...",k={agent:v},z=({flowData:s,width:c="100%",height:g="1000px",className:x=""})=>{var v,z,N,S;const C=s;if(!C)return e.createElement("div",{style:{width:"number"==typeof c?`${c}px`:c,height:"number"==typeof g?`${g}px`:g,border:"1px solid #e5e7eb",borderRadius:"8px",background:"#f9fafb",position:"relative",minWidth:"800px",minHeight:"600px",display:"flex",alignItems:"center",justifyContent:"center"},className:x},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 T=r(null),j=r(null),[$,F]=t({width:"number"==typeof c?c:800,height:"number"==typeof g?g:600}),[I,R]=t(0),[M,O]=t(!1),P=r(null),[A,L]=t(!1),[D,B]=t(!1),[W,U]=t(null),X=n(()=>{const e=C.stamps||C.steps||[];return e.length>0?Math.max(...e.map(e=>e.step)):0},[C.stamps,C.steps]);o(()=>(M?P.current=setInterval(()=>{R(e=>e>=X?(O(!1),e):e+1)},250):P.current&&(clearInterval(P.current),P.current=null),()=>{P.current&&clearInterval(P.current)}),[M,X]),o(()=>{const e=C.stamps||C.steps||[];e.length>0&&R(Math.max(...e.map(e=>e.step)))},[C.stamps,C.steps]),o(()=>{const e=()=>{if(T.current){const e=T.current.getBoundingClientRect();F({width:e.width||("number"==typeof c?c:800),height:e.height||("number"==typeof g?g:600)})}};if(e(),window.ResizeObserver&&T.current){const t=new ResizeObserver(e);return t.observe(T.current),()=>t.disconnect()}return window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)},[c,g]);const Y=n(()=>((e,t)=>{new Map(e.map(e=>[e.identifier,e]));const n=new Map,o=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),o.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),o.set(e.identifier,e.parent.identifier))});const r=e.filter(e=>!o.has(e.identifier)),a=new Map,l=(e,t)=>{a.set(e,t);for(const o of n.get(e)||[])l(o,t+1)};r.forEach(e=>l(e.identifier,0));const i=[];e.forEach(e=>{var t;const n=null!==(t=a.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 o=0;for(const e of t)o+=d(e);return o+=100*(t.length-1),s.set(e,o),o};r.forEach(e=>d(e.identifier));const p=new Map,f=(e,t,o)=>{const r=s.get(e)||c,a=300*o+100,l=n.get(e)||[];if(0===l.length)p.set(e,{x:t+r/2-100,y:a});else{let n=t;for(const e of l){const t=s.get(e)||c;f(e,n,o+1),n+=t+100}const r=l[0],i=l[l.length-1],d=p.get(r),m=p.get(i),u=(d.x+m.x)/2;p.set(e,{x:u,y:a})}};let m=0;for(const e of r)f(e.identifier,m,0),m+=(s.get(e.identifier)||c)+200;return p})(C.nodes,C.edges||[]),[C.nodes,C.edges]),H=a(e=>C.nodes.filter(t=>t.stamp.step<=e),[C.nodes]),J=a(e=>(C.edges||[]).filter(t=>t.stamp.step<=e),[C.edges]),V=a(e=>{U({type:"node",data:e}),B(!0)},[]),Z=a(e=>{const t=J(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"});U({type:"edge",data:n}),B(!0)},[J,I]),q=n(()=>{const e=H(I),t=J(I);return e.map(e=>{var n,o;const r=Y.get(e.identifier)||{x:0,y:0},{description:a}=(e=>{var t,n;let o=e.node_type,r="";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];r=`${n.model_name} (${n.model_provider})`,o=`${e.node_type}\n${r}`}}return{description:o,modelInfo:r}})(e),l=e.stamp.step===I;return{id:e.identifier,type:"agent",position:r,data:{label:e.node_type,description:a,nodeType:e.node_type,step:null===(n=e.stamp)||void 0===n?void 0:n.step,time:null===(o=e.stamp)||void 0===o?void 0:o.time,isActive:l,onInspect:V,id:e.identifier,edges:t},style:{filter:l?"drop-shadow(0 4px 8px rgba(99, 102, 241, 0.3))":"none"}}})},[Y,I,H,J,V]),G=n(()=>J(I).filter(e=>e.source&&e.target).map(e=>{var t,n,o,r;const a=e.stamp.step===I;return{id:e.identifier,type:"default",source:e.source,target:e.target,animated:a,bidirectional:!0,style:{stroke:a?"#6366f1":"#9ca3af",strokeWidth:a?3:2},label:(null===(t=e.stamp)||void 0===t?void 0:t.identifier)?E(String(e.stamp.identifier),50):void 0,data:{label:(null===(n=e.stamp)||void 0===n?void 0:n.identifier)?E(String(e.stamp.identifier),50):void 0,source:e.source,target:e.target,step:null===(o=e.stamp)||void 0===o?void 0:o.step,time:null===(r=e.stamp)||void 0===r?void 0:r.time,details:e.details}}}),[I,J]),[Q,K,ee]=d(q),[te,ne,oe]=p(G);o(()=>{K(q)},[q,K]),o(()=>{ne(G)},[G,ne]);const re=a(e=>ne(t=>f(e,t)),[ne]),ae=a(e=>{R(e),O(!1)},[]),le=a(()=>{O(e=>!e)},[]),ie=(e,t)=>{var n;if(!j.current)return{x:0,y:0};const o=j.current.createSVGPoint();o.x=e,o.y=t;const r=o.matrixTransform(null===(n=j.current.getScreenCTM())||void 0===n?void 0:n.inverse());return{x:r.x,y:r.y}},se=i();return o(()=>{if(q.length>0&&se){const e=new Map;G.forEach(t=>{const n=e.get(t.source)||0;e.set(t.source,n+1);const o=e.get(t.target)||0;e.set(t.target,o+1)});let t="",n=0;e.forEach((e,o)=>{e>n&&(n=e,t=o)}),!t&&q.length>0&&(t=q[0].id),t&&setTimeout(()=>{se.fitView({nodes:[{id:t}],duration:1e3,padding:.2,minZoom:.2,maxZoom:1.5})},500)}},[q,G,se]),e.createElement("div",{ref:T,style:{width:"number"==typeof c?`${c}px`:c,height:"number"==typeof g?`${g}px`:g,border:"1px solid #e5e7eb",borderRadius:"8px",overflow:"hidden",position:"relative",minWidth:"800px",minHeight:"600px"},className:x},e.createElement("div",{className:"side-panel "+(A?"expanded":"collapsed")},!A&&e.createElement("button",{className:"panel-toggle",onClick:()=>L(!A),title:"Expand Panel"},e.createElement(b,{size:20})),A&&e.createElement("div",{className:"panel-content"},e.createElement(y,{stamps:C.stamps||C.steps||[],currentStep:I,onStepChange:ae,onToggle:()=>L(!1)}))),e.createElement(l,{nodes:Q,edges:te,onNodesChange:ee,onEdgesChange:oe,onConnect:re,nodeTypes:k,edgeTypes:{default:t=>e.createElement(w,Object.assign({},t,{clientToSvgCoords:ie,svgRef:j,onInspect:Z}))},attributionPosition:"bottom-left",style:{width:A?"calc(100% - 280px)":"100%",height:"calc(100% - 60px)",marginLeft:A?"280px":"0"},defaultViewport:{x:0,y:0,zoom:1},onInit:e=>{if(T.current){const e=T.current.querySelector("svg");e&&(j.current=e)}}},e.createElement(m,null),e.createElement(u,{color:"#f3f4f6",gap:16})),e.createElement("div",{className:"right-drawer "+(D?"open":"")},e.createElement("div",{className:"drawer-toggle",onClick:()=>B(!D)},e.createElement(h,{size:20})),D&&W&&e.createElement("div",{className:"drawer-content"},e.createElement("div",{className:"drawer-header"},e.createElement("h3",null,"node"===W.type?"Node Details":"Edge Details")),e.createElement("div",{className:"drawer-body"},"node"===W.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"},W.data.label||"N/A")),W.data.description&&e.createElement("div",{className:"detail-row"},e.createElement("span",{className:"detail-label"},"Description:"),e.createElement("span",{className:"detail-value"},W.data.description)),W.data.nodeType&&e.createElement("div",{className:"detail-row"},e.createElement("span",{className:"detail-label"},"Type:"),e.createElement("span",{className:"detail-value"},W.data.nodeType)),W.data.step&&e.createElement("div",{className:"detail-row"},e.createElement("span",{className:"detail-label"},"Step:"),e.createElement("span",{className:"detail-value"},W.data.step)),W.data.time&&e.createElement("div",{className:"detail-row"},e.createElement("span",{className:"detail-label"},"Time:"),e.createElement("span",{className:"detail-value"},new Date(1e3*W.data.time).toLocaleString())),W.data.icon&&e.createElement("div",{className:"detail-row"},e.createElement("span",{className:"detail-label"},"Icon:"),e.createElement("span",{className:"detail-value"},W.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"},W.data.id||"N/A")),W.data.source&&e.createElement("div",{className:"detail-row"},e.createElement("span",{className:"detail-label"},"Source:"),e.createElement("span",{className:"detail-value"},W.data.source)),W.data.target&&e.createElement("div",{className:"detail-row"},e.createElement("span",{className:"detail-label"},"Target:"),e.createElement("span",{className:"detail-value"},W.data.target)),W.data.label&&e.createElement("div",{className:"detail-row"},e.createElement("span",{className:"detail-label"},"Label:"),e.createElement("span",{className:"detail-value"},W.data.label)),W.data.step&&e.createElement("div",{className:"detail-row"},e.createElement("span",{className:"detail-label"},"Step:"),e.createElement("span",{className:"detail-value"},W.data.step)),W.data.time&&e.createElement("div",{className:"detail-row"},e.createElement("span",{className:"detail-label"},"Time:"),e.createElement("span",{className:"detail-value"},new Date(1e3*W.data.time).toLocaleString())),(null===(z=null===(v=W.data)||void 0===v?void 0:v.details)||void 0===z?void 0:z.input_args)&&Array.isArray(W.data.details.input_args)&&W.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(W.data.details.input_args[0])?W.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(W.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===(S=null===(N=W.data)||void 0===N?void 0:N.details)||void 0===S?void 0:S.output,null,2)))))))),A&&e.createElement("div",{style:{marginLeft:"280px",marginTop:"100px"}},e.createElement(_,{stamps:C.stamps||C.steps||[],currentStep:I,isPlaying:M,onStepChange:ae,onPlayPause:le})),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: ${A?"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 `))},N=t=>e.createElement(g,null,e.createElement(z,Object.assign({},t)));function S(e,t,n,o){return new(n||(n=Promise))(function(r,a){function l(e){try{s(o.next(e))}catch(e){a(e)}}function i(e){try{s(o.throw(e))}catch(e){a(e)}}function s(e){var t;e.done?r(e.value):(t=e.value,t instanceof n?t:new n(function(e){e(t)})).then(l,i)}s((o=o.apply(e,t||[])).next())})}"function"==typeof SuppressedError&&SuppressedError;const C="/api",T=()=>{const{listJsonFiles:e,loadJsonFile:n,loading:r,error:l}=(()=>{const[e,n]=t(!1),[o,r]=t(null);return{loading:e,error:o,listJsonFiles:a(()=>S(void 0,void 0,void 0,function*(){n(!0),r(null);try{console.log("Fetching files from:",`${C}/files`);const e=yield fetch(`${C}/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 r(t),[]}finally{n(!1)}}),[]),loadJsonFile:a(e=>S(void 0,void 0,void 0,function*(){n(!0),r(null);try{const t=yield fetch(`${C}/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 r(t),null}finally{n(!1)}}),[]),triggerRefresh:a(()=>S(void 0,void 0,void 0,function*(){n(!0),r(null);try{const e=yield fetch(`${C}/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 r(t),null}finally{n(!1)}}),[])}})(),[i,s]=t({availableFiles:[],currentFile:null,flowData:null,loading:!1,error:null});o(()=>{c()},[]);const c=a(()=>S(void 0,void 0,void 0,function*(){const t=yield e();s(e=>Object.assign(Object.assign({},e),{availableFiles:t}))}),[e]),d=a(e=>S(void 0,void 0,void 0,function*(){s(e=>Object.assign(Object.assign({},e),{loading:!0,error:null}));try{const t=yield n(e);s(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){s(t=>Object.assign(Object.assign({},t),{loading:!1,error:e instanceof Error?e.message:"Unknown error occurred"}))}}),[n]),p=a(()=>S(void 0,void 0,void 0,function*(){yield c()}),[c]);return Object.assign(Object.assign({},i),{loading:i.loading||r,error:i.error||(null==l?void 0:l.message)||null,loadFile:d,refreshFiles:p})},j=({files:t,currentFile:n,onFileSelect:o,onRefresh:r,loading:a=!1,disabled:l=!1})=>e.createElement("div",{style:{display:"flex",alignItems:"center",gap:"8px"}},e.createElement("select",{value:n||"",onChange:e=>o(e.target.value),disabled:l,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:a||l,title:"Refresh files",style:{background:"none",border:"none",cursor:"pointer",padding:"4px",borderRadius:"4px"}},e.createElement(x,{size:16,style:{animation:a?"spin 1s linear infinite":"none"}}))),$=()=>{const{availableFiles:t,currentFile:n,flowData:o,loading:r,error:a,loadFile:l,refreshFiles:i}=T();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(j,{files:t,currentFile:n,onFileSelect:e=>{l(e)},onRefresh:i,loading:r,disabled:r}))),a&&e.createElement("div",{className:"error-message"},e.createElement("p",null,"Error: ",a)),e.createElement("div",{className:"visualizer-container"},r?e.createElement("div",{className:"loading-state"},e.createElement("div",{className:"loading-spinner"}),e.createElement("p",null,"Loading flow data...")):o?e.createElement(N,{flowData:o}):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 "))};export{z as AgenticFlowVisualizer,$ as App,w as Edge,j as FileSelector,v as Node,_ as Timeline,y as VerticalTimeline,N as Visualizer};
1
+ import e,{useState as t,useMemo as n,useEffect as o,useRef as r,useCallback as a}from"react";import l,{useReactFlow as i,Handle as s,Position as c,useNodesState as d,useEdgesState as p,addEdge as f,Controls as m,Background as u,ReactFlowProvider as g}from"reactflow";import{PanelLeft as b,PanelRight as h,RefreshCw as x}from"lucide-react";!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===n&&o.firstChild?o.insertBefore(r,o.firstChild):o.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.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 w=({id:o,sourceX:r,sourceY:a,targetX:l,targetY:i,sourcePosition:s,targetPosition:c,style:d={},markerEnd:p,bidirectional:f=!1,data:m,clientToSvgCoords:u,svgRef:g,onInspect:b})=>{var h;t(!1);const x=()=>{var e;switch(null===(e=null==m?void 0:m.details)||void 0===e?void 0:e.state){case"Open":return"#000000";case"Completed":return"#15803d";case"Error":return"#ef4444";default:return d.stroke||"#6366f1"}},[w,v]=n(()=>{const t=`M ${r} ${a} Q ${(r+l)/2} ${(a+i)/2} ${l} ${i}`,n=[];if(f){const t=x();n.push(e.createElement("defs",{key:`${o}-markers`},e.createElement("marker",{id:`${o}-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:t})),e.createElement("marker",{id:`${o}-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:t}))))}return[t,n]},[r,a,l,i,o,f,null===(h=null==m?void 0:m.details)||void 0===h?void 0:h.state]),_=Object.assign(Object.assign({},d),{stroke:x(),strokeWidth:d.strokeWidth||4,cursor:"pointer"});return e.createElement("g",{"data-edge-id":o},v,e.createElement("path",{id:o,className:"react-flow__edge-path",d:w,markerEnd:f?`url(#${o}-arrowhead-forward)`:p,markerStart:f?`url(#${o}-arrowhead-backward)`:void 0,style:_}),(null==m?void 0:m.label)&&e.createElement("foreignObject",{x:(r+l)/2-50,y:(a+i)/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(),b&&m&&b(m)},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 "))},v=({data:t,id:n})=>{var o;const{fitView:r}=i(),a=(null===(o=t.edges)||void 0===o?void 0:o.some(e=>e.source===n))||!1;return e.createElement(e.Fragment,null,e.createElement("div",{className:"agent-node",onClick:()=>{r({nodes:[{id:n}],duration:800,padding:.1,minZoom:.5,maxZoom:1.5}),t.onInspect&&t.onInspect({label:t.label,description:t.description,nodeType:t.nodeType,step:t.step,time:t.time,icon:t.icon})},style:{cursor:"pointer"}},e.createElement(s,{type:"target",position:c.Top,style:{background:"#6366f1"}}),e.createElement("div",{className:"agent-header"},e.createElement("div",{className:"agent-icon"},t.icon||"📋"),e.createElement("div",{className:"agent-label"},t.label)),t.description&&e.createElement("div",{className:"agent-description"},t.description),t.step&&e.createElement("div",{className:"agent-meta"},e.createElement("span",{className:"step"},"Step: ",t.step),t.time&&e.createElement("span",{className:"time"},new Date(1e3*t.time).toLocaleTimeString())),a&&e.createElement(s,{type:"source",position:c.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 "))},_=({stamps:t,currentStep:n,isPlaying:r,onStepChange:a,onPlayPause:l})=>{const i=t.length>0?Math.max(...t.map(e=>e.step)):0,s=t.length>0?Math.min(...t.map(e=>e.step)):0,c=i-s+1;return o(()=>{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:l,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"}},r?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:c},(o,r)=>{var l;const i=s+r,c=i===n,d=i<n,p=t.some(e=>e.step===i);let f="white";c?f="#6366f1":d?f="#fef3c7":p&&(f="#e5e7eb");const m=`Step ${i}${p?` - ${(null===(l=t.find(e=>e.step===i))||void 0===l?void 0:l.identifier)||""}`:" - No activity"}`;return e.createElement("button",{key:i,onClick:()=>a(i),"data-bs-toggle":"tooltip","data-bs-placement":"top","data-bs-title":m,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," / ",i))},y=({stamps:t,currentStep:n,onStepChange:o,onToggle:r})=>{const a=t.length>0?Math.max(...t.map(e=>e.step)):0,l=t.length>0?Math.min(...t.map(e=>e.step)):0,i=a-l+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(b,{size:16}))),e.createElement("div",{style:{flex:1,overflowY:"auto",padding:"8px 0 16px 0"}},Array.from({length:i},(r,a)=>{const i=l+a,s=i===n,c=i<n,d=t.some(e=>e.step===i),p=(e=>{const n=t.filter(t=>t.step===e);if(0===n.length)return null;const o=e-1,r=t.filter(e=>e.step===o);return 0===r.length?null:Math.min(...n.map(e=>e.time))-Math.max(...r.map(e=>e.time))})(i),f=(e=>{var n;const o=t.filter(t=>t.step===e);return 0===o.length?`Step ${e}`:(null===(n=o[0])||void 0===n?void 0:n.identifier)||`Step ${e}`})(i);return e.createElement("div",{key:i,onClick:()=>d&&o(i),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 ",i),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 "))},E=(e,t)=>e.length<=t?e:e.substring(0,t)+"...",k={agent:v},z=({flowData:s,width:c="100%",height:g="1000px",className:x="",defaultZoom:v=1,defaultPan:z={x:0,y:0},disableAutoFit:N=!1,showTimeline:S=!1})=>{var C,T,j,$;const F=s;if(!F)return e.createElement("div",{style:{width:"number"==typeof c?`${c}px`:c,height:"number"==typeof g?`${g}px`:g,border:"1px solid #e5e7eb",borderRadius:"8px",background:"#f9fafb",position:"relative",minWidth:"800px",minHeight:"600px",display:"flex",alignItems:"center",justifyContent:"center"},className:x},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 I=r(null),R=r(null),[M,O]=t({width:"number"==typeof c?c:800,height:"number"==typeof g?g:600}),[P,A]=t(0),[L,D]=t(!1),B=r(null),[W,U]=t(!1),[X,Y]=t(!1),[H,J]=t(null),V=n(()=>{const e=F.stamps||F.steps||[];return e.length>0?Math.max(...e.map(e=>e.step)):0},[F.stamps,F.steps]);o(()=>(L?B.current=setInterval(()=>{A(e=>e>=V?(D(!1),e):e+1)},250):B.current&&(clearInterval(B.current),B.current=null),()=>{B.current&&clearInterval(B.current)}),[L,V]),o(()=>{const e=F.stamps||F.steps||[];e.length>0&&A(Math.max(...e.map(e=>e.step)))},[F.stamps,F.steps]),o(()=>{const e=()=>{if(I.current){const e=I.current.getBoundingClientRect();O({width:e.width||("number"==typeof c?c:800),height:e.height||("number"==typeof g?g:600)})}};if(e(),window.ResizeObserver&&I.current){const t=new ResizeObserver(e);return t.observe(I.current),()=>t.disconnect()}return window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)},[c,g]);const Z=n(()=>((e,t)=>{new Map(e.map(e=>[e.identifier,e]));const n=new Map,o=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),o.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),o.set(e.identifier,e.parent.identifier))});const r=e.filter(e=>!o.has(e.identifier)),a=new Map,l=(e,t)=>{a.set(e,t);for(const o of n.get(e)||[])l(o,t+1)};r.forEach(e=>l(e.identifier,0));const i=[];e.forEach(e=>{var t;const n=null!==(t=a.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 o=0;for(const e of t)o+=d(e);return o+=100*(t.length-1),s.set(e,o),o};r.forEach(e=>d(e.identifier));const p=new Map,f=(e,t,o)=>{const r=s.get(e)||c,a=300*o+100,l=n.get(e)||[];if(0===l.length)p.set(e,{x:t+r/2-100,y:a});else{let n=t;for(const e of l){const t=s.get(e)||c;f(e,n,o+1),n+=t+100}const r=l[0],i=l[l.length-1],d=p.get(r),m=p.get(i),u=(d.x+m.x)/2;p.set(e,{x:u,y:a})}};let m=0;for(const e of r)f(e.identifier,m,0),m+=(s.get(e.identifier)||c)+200;return p})(F.nodes,F.edges||[]),[F.nodes,F.edges]),q=a(e=>F.nodes.filter(t=>t.stamp.step<=e),[F.nodes]),G=a(e=>(F.edges||[]).filter(t=>t.stamp.step<=e),[F.edges]),Q=a(e=>{J({type:"node",data:e}),Y(!0)},[]),K=a(e=>{const t=G(P).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"});J({type:"edge",data:n}),Y(!0)},[G,P]),ee=n(()=>{const e=q(P),t=G(P);return e.map(e=>{var n,o;const r=Z.get(e.identifier)||{x:0,y:0},{description:a}=(e=>{var t,n;let o=e.node_type,r="";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];r=`${n.model_name} (${n.model_provider})`,o=`${e.node_type}\n${r}`}}return{description:o,modelInfo:r}})(e),l=e.stamp.step===P;return{id:e.identifier,type:"agent",position:r,data:{label:e.node_type,description:a,nodeType:e.node_type,step:null===(n=e.stamp)||void 0===n?void 0:n.step,time:null===(o=e.stamp)||void 0===o?void 0:o.time,isActive:l,onInspect:Q,id:e.identifier,edges:t},style:{filter:l?"drop-shadow(0 4px 8px rgba(99, 102, 241, 0.3))":"none"}}})},[Z,P,q,G,Q]),te=n(()=>G(P).filter(e=>e.source&&e.target).map(e=>{var t,n,o,r;const a=e.stamp.step===P;return{id:e.identifier,type:"default",source:e.source,target:e.target,animated:a,bidirectional:!0,style:{stroke:a?"#6366f1":"#9ca3af",strokeWidth:a?3:2},label:(null===(t=e.stamp)||void 0===t?void 0:t.identifier)?E(String(e.stamp.identifier),50):void 0,data:{label:(null===(n=e.stamp)||void 0===n?void 0:n.identifier)?E(String(e.stamp.identifier),50):void 0,source:e.source,target:e.target,step:null===(o=e.stamp)||void 0===o?void 0:o.step,time:null===(r=e.stamp)||void 0===r?void 0:r.time,details:e.details}}}),[P,G]),[ne,oe,re]=d(ee),[ae,le,ie]=p(te);o(()=>{oe(ee)},[ee,oe]),o(()=>{le(te)},[te,le]);const se=a(e=>le(t=>f(e,t)),[le]),ce=a(e=>{A(e),D(!1)},[]),de=a(()=>{D(e=>!e)},[]),pe=(e,t)=>{var n;if(!R.current)return{x:0,y:0};const o=R.current.createSVGPoint();o.x=e,o.y=t;const r=o.matrixTransform(null===(n=R.current.getScreenCTM())||void 0===n?void 0:n.inverse());return{x:r.x,y:r.y}},fe=i();return o(()=>{if(N||!fe||0===ee.length)return;const e=new Map;te.forEach(t=>{const n=e.get(t.source)||0;e.set(t.source,n+1);const o=e.get(t.target)||0;e.set(t.target,o+1)});let t="",n=0;e.forEach((e,o)=>{e>n&&(n=e,t=o)}),!t&&ee.length>0&&(t=ee[0].id),t&&setTimeout(()=>{fe.fitView({nodes:[{id:t}],duration:1e3,padding:.2,minZoom:v,maxZoom:1})},500)},[ee,te,fe,N,v]),e.createElement("div",{ref:I,style:{width:"number"==typeof c?`${c}px`:c,height:"number"==typeof g?`${g}px`:g,border:"1px solid #e5e7eb",borderRadius:"8px",overflow:"hidden",position:"relative",minWidth:"800px",minHeight:"600px"},className:x},S&&e.createElement("div",{className:"side-panel "+(W?"expanded":"collapsed")},!W&&e.createElement("button",{className:"panel-toggle",onClick:()=>U(!W),title:"Expand Panel"},e.createElement(b,{size:20})),W&&e.createElement("div",{className:"panel-content"},e.createElement(y,{stamps:F.stamps||F.steps||[],currentStep:P,onStepChange:ce,onToggle:()=>U(!1)}))),e.createElement(l,{nodes:ne,edges:ae,onNodesChange:re,onEdgesChange:ie,onConnect:se,nodeTypes:k,edgeTypes:{default:t=>e.createElement(w,Object.assign({},t,{clientToSvgCoords:pe,svgRef:R,onInspect:K}))},attributionPosition:"bottom-left",style:{width:S&&W?"calc(100% - 280px)":"100%",height:S&&W?"calc(100% - 60px)":"100%",marginLeft:S&&W?"280px":"0"},defaultViewport:{x:z.x,y:z.y,zoom:v},onInit:e=>{if(I.current){const e=I.current.querySelector("svg");e&&(R.current=e)}}},e.createElement(m,null),e.createElement(u,{color:"#f3f4f6",gap:16})),e.createElement("div",{className:"right-drawer "+(X?"open":"")},e.createElement("div",{className:"drawer-toggle",onClick:()=>Y(!X)},e.createElement(h,{size:20})),X&&H&&e.createElement("div",{className:"drawer-content"},e.createElement("div",{className:"drawer-header"},e.createElement("h3",null,"node"===H.type?"Node Details":"Edge Details")),e.createElement("div",{className:"drawer-body"},"node"===H.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"},H.data.label||"N/A")),H.data.description&&e.createElement("div",{className:"detail-row"},e.createElement("span",{className:"detail-label"},"Description:"),e.createElement("span",{className:"detail-value"},H.data.description)),H.data.nodeType&&e.createElement("div",{className:"detail-row"},e.createElement("span",{className:"detail-label"},"Type:"),e.createElement("span",{className:"detail-value"},H.data.nodeType)),H.data.step&&e.createElement("div",{className:"detail-row"},e.createElement("span",{className:"detail-label"},"Step:"),e.createElement("span",{className:"detail-value"},H.data.step)),H.data.time&&e.createElement("div",{className:"detail-row"},e.createElement("span",{className:"detail-label"},"Time:"),e.createElement("span",{className:"detail-value"},new Date(1e3*H.data.time).toLocaleString())),H.data.icon&&e.createElement("div",{className:"detail-row"},e.createElement("span",{className:"detail-label"},"Icon:"),e.createElement("span",{className:"detail-value"},H.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"},H.data.id||"N/A")),H.data.source&&e.createElement("div",{className:"detail-row"},e.createElement("span",{className:"detail-label"},"Source:"),e.createElement("span",{className:"detail-value"},H.data.source)),H.data.target&&e.createElement("div",{className:"detail-row"},e.createElement("span",{className:"detail-label"},"Target:"),e.createElement("span",{className:"detail-value"},H.data.target)),H.data.label&&e.createElement("div",{className:"detail-row"},e.createElement("span",{className:"detail-label"},"Label:"),e.createElement("span",{className:"detail-value"},H.data.label)),H.data.step&&e.createElement("div",{className:"detail-row"},e.createElement("span",{className:"detail-label"},"Step:"),e.createElement("span",{className:"detail-value"},H.data.step)),H.data.time&&e.createElement("div",{className:"detail-row"},e.createElement("span",{className:"detail-label"},"Time:"),e.createElement("span",{className:"detail-value"},new Date(1e3*H.data.time).toLocaleString())),(null===(T=null===(C=H.data)||void 0===C?void 0:C.details)||void 0===T?void 0:T.input_args)&&Array.isArray(H.data.details.input_args)&&H.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(H.data.details.input_args[0])?H.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(H.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===($=null===(j=H.data)||void 0===j?void 0:j.details)||void 0===$?void 0:$.output,null,2)))))))),S&&W&&e.createElement("div",{style:{marginLeft:"280px",marginTop:"100px"}},e.createElement(_,{stamps:F.stamps||F.steps||[],currentStep:P,isPlaying:L,onStepChange:ce,onPlayPause:de})),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: ${S&&W?"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 `))},N=t=>e.createElement(g,null,e.createElement(z,Object.assign({},t)));function S(e,t,n,o){return new(n||(n=Promise))(function(r,a){function l(e){try{s(o.next(e))}catch(e){a(e)}}function i(e){try{s(o.throw(e))}catch(e){a(e)}}function s(e){var t;e.done?r(e.value):(t=e.value,t instanceof n?t:new n(function(e){e(t)})).then(l,i)}s((o=o.apply(e,t||[])).next())})}"function"==typeof SuppressedError&&SuppressedError;const C="/api",T=()=>{const{listJsonFiles:e,loadJsonFile:n,loading:r,error:l}=(()=>{const[e,n]=t(!1),[o,r]=t(null);return{loading:e,error:o,listJsonFiles:a(()=>S(void 0,void 0,void 0,function*(){n(!0),r(null);try{console.log("Fetching files from:",`${C}/files`);const e=yield fetch(`${C}/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 r(t),[]}finally{n(!1)}}),[]),loadJsonFile:a(e=>S(void 0,void 0,void 0,function*(){n(!0),r(null);try{const t=yield fetch(`${C}/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 r(t),null}finally{n(!1)}}),[]),triggerRefresh:a(()=>S(void 0,void 0,void 0,function*(){n(!0),r(null);try{const e=yield fetch(`${C}/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 r(t),null}finally{n(!1)}}),[])}})(),[i,s]=t({availableFiles:[],currentFile:null,flowData:null,loading:!1,error:null});o(()=>{c()},[]);const c=a(()=>S(void 0,void 0,void 0,function*(){const t=yield e();s(e=>Object.assign(Object.assign({},e),{availableFiles:t}))}),[e]),d=a(e=>S(void 0,void 0,void 0,function*(){s(e=>Object.assign(Object.assign({},e),{loading:!0,error:null}));try{const t=yield n(e);s(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){s(t=>Object.assign(Object.assign({},t),{loading:!1,error:e instanceof Error?e.message:"Unknown error occurred"}))}}),[n]),p=a(()=>S(void 0,void 0,void 0,function*(){yield c()}),[c]);return Object.assign(Object.assign({},i),{loading:i.loading||r,error:i.error||(null==l?void 0:l.message)||null,loadFile:d,refreshFiles:p})},j=({files:t,currentFile:n,onFileSelect:o,onRefresh:r,loading:a=!1,disabled:l=!1})=>e.createElement("div",{style:{display:"flex",alignItems:"center",gap:"8px"}},e.createElement("select",{value:n||"",onChange:e=>o(e.target.value),disabled:l,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:a||l,title:"Refresh files",style:{background:"none",border:"none",cursor:"pointer",padding:"4px",borderRadius:"4px"}},e.createElement(x,{size:16,style:{animation:a?"spin 1s linear infinite":"none"}}))),$=()=>{const{availableFiles:n,currentFile:o,flowData:r,loading:a,error:l,loadFile:i,refreshFiles:s}=T(),[c,d]=t(!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(j,{files:n,currentFile:o,onFileSelect:e=>{i(e)},onRefresh:s,loading:a,disabled:a}),e.createElement("label",{className:"timeline-toggle"},e.createElement("input",{type:"checkbox",checked:c,onChange:e=>d(e.target.checked)}),"Show Timeline"))),l&&e.createElement("div",{className:"error-message"},e.createElement("p",null,"Error: ",l)),e.createElement("div",{className:"visualizer-container"},a?e.createElement("div",{className:"loading-state"},e.createElement("div",{className:"loading-spinner"}),e.createElement("p",null,"Loading flow data...")):r?e.createElement(N,{flowData:r,showTimeline:c}):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 "))};export{z as AgenticFlowVisualizer,$ as App,w as Edge,j as FileSelector,v as Node,_ as Timeline,y as VerticalTimeline,N as Visualizer};
2
2
  //# sourceMappingURL=index.js.map