@mcp-graph-workflow/mcp-graph 5.1.5 → 5.3.0

package/dist/web/dashboard/dist/assets/graph-tab-BKns5HdW.js

@@ -0,0 +1 @@
+import{r as t,j as e,a as le}from"./index-CZOiKbTP.js";import{u as ne,a as ce,b as de,c as ie,g as W,t as xe,s as ue,d as pe,e as me,i as be,W as he,f as ve,B as fe,C as ge,N as ye}from"./graph-utils-BxUWNvsI.js";import{A as je,S as L,a as Ne,N as _,E as Ce}from"./constants-kpH_c6vY.js";import"./index-Dd4vKyDX.js";const ke=t.memo(function({statuses:b,types:h,direction:j,onStatusToggle:v,onTypeToggle:m,onDirectionChange:n,onClear:u,visibleNodeCount:d,totalNodeCount:i,onExpandAll:N,onCollapseAll:p}){return e.jsxs("div",{className:"flex flex-wrap items-center gap-3 px-4 py-2 border-b border-[var(--color-border)] bg-[var(--color-bg-secondary)] text-xs",children:[e.jsxs("div",{className:"flex items-center gap-1.5",children:[e.jsx("span",{className:"font-medium text-[var(--color-text-muted)]",children:"Status:"}),je.map(l=>e.jsxs("label",{className:"flex items-center gap-1 cursor-pointer",children:[e.jsx("input",{type:"checkbox",checked:b.has(l),onChange:()=>v(l),className:"w-3 h-3"}),e.jsx("span",{className:"w-2 h-2 rounded-full inline-block",style:{background:L[l]}}),e.jsx("span",{children:l.replace("_"," ")})]},l))]}),e.jsx("div",{className:"w-px h-4 bg-[var(--color-border)]"}),e.jsxs("div",{className:"flex items-center gap-1.5",children:[e.jsx("span",{className:"font-medium text-[var(--color-text-muted)]",children:"Type:"}),Ne.map(l=>e.jsxs("label",{className:"flex items-center gap-1 cursor-pointer",children:[e.jsx("input",{type:"checkbox",checked:h.has(l),onChange:()=>m(l),className:"w-3 h-3"}),e.jsx("span",{className:"w-2 h-2 rounded-full inline-block",style:{background:_[l]}}),e.jsx("span",{children:l.replace("_"," ")})]},l))]}),e.jsx("div",{className:"w-px h-4 bg-[var(--color-border)]"}),e.jsxs("div",{className:"flex items-center gap-1.5",children:[e.jsx("span",{className:"font-medium text-[var(--color-text-muted)]",children:"Layout:"}),e.jsxs("select",{value:j,onChange:l=>n(l.target.value),className:"bg-[var(--color-bg)] border border-[var(--color-border)] rounded px-1 py-0.5 text-xs",children:[e.jsx("option",{value:"TB",children:"Top → Down"}),e.jsx("option",{value:"LR",children:"Left → Right"})]})]}),e.jsx("div",{className:"w-px h-4 bg-[var(--color-border)]"}),e.jsxs("div",{className:"flex items-center gap-1.5",children:[e.jsx("button",{onClick:N,className:"px-2 py-0.5 rounded border border-[var(--color-border)] hover:bg-[var(--color-bg-tertiary)] transition-colors",title:i>100?`Warning: ${i} nodes — may be slow`:"Expand all nodes",children:"Expand All"}),e.jsx("button",{onClick:p,className:"px-2 py-0.5 rounded border border-[var(--color-border)] hover:bg-[var(--color-bg-tertiary)] transition-colors",children:"Collapse All"})]}),e.jsx("div",{className:"w-px h-4 bg-[var(--color-border)]"}),e.jsxs("span",{className:"text-[var(--color-text-muted)]",children:["Showing ",d," of ",i]}),e.jsx("button",{onClick:u,className:"text-[var(--color-text-muted)] hover:text-[var(--color-text)] underline",children:"Clear"})]})}),Se=t.memo(function({tree:b,expandedIds:h,selectedNodeId:j,onToggleExpand:v,onSelectNode:m}){const[n,u]=t.useState(!1),d=t.useCallback(()=>u(i=>!i),[]);return n?e.jsx("div",{className:"w-8 border-r border-[var(--color-border)] bg-[var(--color-bg-secondary)] flex flex-col items-center pt-2",children:e.jsx("button",{onClick:d,className:"text-xs text-[var(--color-text-muted)] hover:text-[var(--color-text)] p-1",title:"Show tree panel",children:"▸"})}):e.jsxs("div",{className:"w-64 border-r border-[var(--color-border)] bg-[var(--color-bg-secondary)] flex flex-col min-h-0",children:[e.jsxs("div",{className:"flex items-center justify-between px-3 py-2 border-b border-[var(--color-border)]",children:[e.jsx("span",{className:"text-xs font-medium text-[var(--color-text-muted)]",children:"Hierarchy"}),e.jsx("button",{onClick:d,className:"text-xs text-[var(--color-text-muted)] hover:text-[var(--color-text)]",title:"Collapse panel",children:"◂"})]}),e.jsx("div",{className:"overflow-y-auto flex-1 py-1",children:b.length===0?e.jsx("div",{className:"px-3 py-4 text-xs text-[var(--color-text-muted)] text-center",children:"No nodes"}):b.map(i=>e.jsx($,{item:i,depth:0,expandedIds:h,selectedNodeId:j,onToggleExpand:v,onSelectNode:m},i.node.id))})]})});function $({item:o,depth:b,expandedIds:h,selectedNodeId:j,onToggleExpand:v,onSelectNode:m}){const{node:n,children:u}=o,d=h.has(n.id),i=j===n.id,N=u.length>0,p=L[n.status]||"#9e9e9e",l=_[n.type]||"#6c757d",g=t.useCallback(a=>{a.stopPropagation(),v(n.id)},[n.id,v]),C=t.useCallback(()=>{m(n.id)},[n.id,m]);return e.jsxs(e.Fragment,{children:[e.jsxs("button",{onClick:C,className:`w-full text-left flex items-center gap-1 px-2 py-1 text-xs hover:bg-[var(--color-bg-tertiary)] transition-colors ${i?"bg-[var(--color-bg-tertiary)] font-semibold":""}`,style:{paddingLeft:`${b*16+8}px`},children:[N?e.jsx("span",{onClick:g,className:"w-4 text-center text-[var(--color-text-muted)] hover:text-[var(--color-text)] cursor-pointer shrink-0",children:d?"▾":"▸"}):e.jsx("span",{className:"w-4 shrink-0"}),e.jsx("span",{className:"w-2 h-2 rounded-full shrink-0",style:{background:p},title:n.status.replace("_"," ")}),e.jsx("span",{className:"text-[9px] px-1 rounded shrink-0",style:{background:`${l}20`,color:l},children:n.type.slice(0,3)}),e.jsx("span",{className:"truncate",children:n.title}),N&&e.jsx("span",{className:"text-[9px] text-[var(--color-text-muted)] ml-auto shrink-0",children:u.length})]}),d&&u.map(a=>e.jsx($,{item:a,depth:b+1,expandedIds:h,selectedNodeId:j,onToggleExpand:v,onSelectNode:m},a.node.id))]})}const I=50,we=t.memo(function({nodes:b,allNodes:h=[],onNodeClick:j}){const v=t.useMemo(()=>{const s=new Map;for(const f of h)s.set(f.id,f.title);return s},[h]),[m,n]=t.useState("priority"),[u,d]=t.useState("asc"),[i,N]=t.useState(""),[p,l]=t.useState(0),g=t.useMemo(()=>{if(!i)return b;const s=i.toLowerCase();return b.filter(f=>f.title.toLowerCase().includes(s)||f.type.toLowerCase().includes(s)||f.status.toLowerCase().includes(s)||(f.sprint||"").toLowerCase().includes(s))},[b,i]),C=t.useMemo(()=>[...g].sort((s,f)=>{const w=s[m]??"",E=f[m]??"",y=typeof w=="number"?w-E:String(w).localeCompare(String(E));return u==="asc"?y:-y}),[g,m,u]),a=Math.max(1,Math.ceil(C.length/I)),S=t.useMemo(()=>C.slice(p*I,(p+1)*I),[C,p]),k=s=>{m===s?d(f=>f==="asc"?"desc":"asc"):(n(s),d("asc"))},T=[{key:"title",label:"Title"},{key:"type",label:"Type"},{key:"status",label:"Status"},{key:"priority",label:"Priority"},{key:"xpSize",label:"Size"},{key:"sprint",label:"Sprint"},{key:"parentId",label:"Parent"}];return e.jsxs("div",{className:"border-t border-[var(--color-border)]",children:[e.jsx("div",{className:"px-4 py-2 bg-[var(--color-bg-secondary)]",children:e.jsx("input",{type:"text",placeholder:"Search nodes...",value:i,onChange:s=>N(s.target.value),className:"w-full max-w-xs px-2 py-1 text-sm border border-[var(--color-border)] rounded bg-[var(--color-bg)]"})}),e.jsx("div",{className:"overflow-x-auto max-h-64",children:e.jsxs("table",{className:"w-full text-sm",children:[e.jsx("thead",{children:e.jsx("tr",{className:"bg-[var(--color-bg-tertiary)]",children:T.map(s=>e.jsxs("th",{onClick:()=>k(s.key),className:"px-3 py-1.5 text-left text-xs font-medium text-[var(--color-text-muted)] cursor-pointer hover:text-[var(--color-text)]",children:[s.label,m===s.key&&(u==="asc"?" ↑":" ↓")]},s.key))})}),e.jsx("tbody",{children:S.length===0?e.jsx("tr",{children:e.jsx("td",{colSpan:7,className:"px-3 py-4 text-center text-[var(--color-text-muted)]",children:"No nodes found"})}):S.map(s=>e.jsxs("tr",{onClick:()=>j(s),className:"border-t border-[var(--color-border)] hover:bg-[var(--color-bg-secondary)] cursor-pointer",children:[e.jsx("td",{className:"px-3 py-1.5 max-w-[200px] truncate",children:s.title}),e.jsx("td",{className:"px-3 py-1.5",children:e.jsx("span",{className:"text-[10px] px-1.5 py-0.5 rounded font-medium",style:{background:`${_[s.type]}20`,color:_[s.type]},children:s.type})}),e.jsx("td",{className:"px-3 py-1.5",children:e.jsx("span",{className:"text-[10px] px-1.5 py-0.5 rounded-full font-medium",style:{background:`${L[s.status]}20`,color:L[s.status]},children:s.status.replace("_"," ")})}),e.jsx("td",{className:"px-3 py-1.5 text-center",children:s.priority}),e.jsx("td",{className:"px-3 py-1.5 text-center",children:s.xpSize||"-"}),e.jsx("td",{className:"px-3 py-1.5",children:s.sprint||"-"}),e.jsx("td",{className:"px-3 py-1.5 max-w-[150px] truncate text-[var(--color-text-muted)]",children:s.parentId?v.get(s.parentId)??"-":"-"})]},s.id))})]})}),a>1&&e.jsxs("div",{className:"flex items-center justify-between px-4 py-1.5 bg-[var(--color-bg-secondary)] border-t border-[var(--color-border)] text-xs text-[var(--color-text-muted)]",children:[e.jsxs("span",{children:[C.length," nodes"]}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("button",{disabled:p===0,onClick:()=>l(s=>Math.max(0,s-1)),className:"px-2 py-0.5 rounded border border-[var(--color-border)] disabled:opacity-30",children:"Prev"}),e.jsxs("span",{children:[p+1,"/",a]}),e.jsx("button",{disabled:p>=a-1,onClick:()=>l(s=>Math.min(a-1,s+1)),className:"px-2 py-0.5 rounded border border-[var(--color-border)] disabled:opacity-30",children:"Next"})]})]})]})}),Te=["depends_on","blocks","parent_of","child_of","related_to","priority_over","implements","derived_from"];function Ee({fromId:o,toId:b,fromTitle:h,toTitle:j,onCreated:v,onCancel:m}){const[n,u]=t.useState("depends_on"),[d,i]=t.useState(""),[N,p]=t.useState(!1),[l,g]=t.useState(null),C=t.useCallback(async()=>{p(!0),g(null);try{await le.createEdge({from:o,to:b,relationType:n,reason:d.trim()||void 0}),v()}catch(a){g(a instanceof Error?a.message:"Failed to create edge")}finally{p(!1)}},[o,b,n,d,v]);return e.jsx("div",{className:"fixed inset-0 z-50 flex items-center justify-center bg-black/50",children:e.jsxs("div",{className:"bg-[var(--color-bg)] border border-[var(--color-border)] rounded-lg shadow-xl w-96 p-4",children:[e.jsx("h3",{className:"text-sm font-bold mb-3",children:"Create Relationship"}),e.jsxs("div",{className:"space-y-3 text-sm",children:[e.jsxs("div",{children:[e.jsx("label",{className:"text-xs text-[var(--color-text-muted)] block mb-1",children:"From"}),e.jsx("div",{className:"text-xs bg-[var(--color-bg-tertiary)] px-2 py-1.5 rounded truncate",children:h??o})]}),e.jsxs("div",{children:[e.jsx("label",{className:"text-xs text-[var(--color-text-muted)] block mb-1",children:"To"}),e.jsx("div",{className:"text-xs bg-[var(--color-bg-tertiary)] px-2 py-1.5 rounded truncate",children:j??b})]}),e.jsxs("div",{children:[e.jsx("label",{className:"text-xs text-[var(--color-text-muted)] block mb-1",children:"Relation Type"}),e.jsx("select",{value:n,onChange:a=>u(a.target.value),className:"w-full text-xs px-2 py-1.5 rounded bg-[var(--color-bg-tertiary)] border border-[var(--color-border)] focus:outline-none focus:border-[var(--color-accent)]",children:Te.map(a=>{const S=Ce[a];return e.jsx("option",{value:a,children:S.label},a)})})]}),e.jsxs("div",{children:[e.jsx("label",{className:"text-xs text-[var(--color-text-muted)] block mb-1",children:"Reason (optional)"}),e.jsx("input",{type:"text",value:d,onChange:a=>i(a.target.value),placeholder:"Why this relationship exists...",className:"w-full text-xs px-2 py-1.5 rounded bg-[var(--color-bg-tertiary)] border border-[var(--color-border)] focus:outline-none focus:border-[var(--color-accent)]"})]}),l&&e.jsx("div",{className:"text-xs text-[var(--color-danger)] bg-[var(--color-bg-tertiary)] px-2 py-1.5 rounded",children:l})]}),e.jsxs("div",{className:"flex justify-end gap-2 mt-4",children:[e.jsx("button",{onClick:m,className:"text-xs px-3 py-1.5 rounded bg-[var(--color-bg-tertiary)] hover:bg-[var(--color-border)] transition-colors",children:"Cancel"}),e.jsx("button",{onClick:C,disabled:N,className:"text-xs px-3 py-1.5 rounded bg-[var(--color-accent)] text-white font-medium disabled:opacity-50 hover:opacity-90 transition-opacity",children:N?"Creating...":"Create"})]})]})})}const Le={workflowNode:ve},_e={workflowEdge:he},Pe={hideAttribution:!0};function De({graph:o}){var R,F;const[b,h,j]=ne([]),[v,m,n]=ce([]),[u,d]=t.useState(null),[i,N]=t.useState("TB"),[p,l]=t.useState(new Set),[g,C]=t.useState(new Set),[a,S]=t.useState(new Set),[k,T]=t.useState(null),s=t.useDeferredValue(p),f=t.useDeferredValue(g),w=t.useDeferredValue(i),E=t.useRef(null),y=t.useMemo(()=>de(o.nodes,o.edges),[o.nodes,o.edges]),G=t.useMemo(()=>ie(o.nodes,y),[o.nodes,y]),P=t.useCallback(r=>{S(x=>{const c=new Set(x);return c.has(r)?c.delete(r):c.add(r),c})},[]),V=t.useCallback(()=>{const r=new Set;for(const[x]of y)r.add(x);S(r)},[y]),B=t.useCallback(()=>{S(new Set)},[]),M=t.useCallback((r,x,c)=>{const se=W(o.nodes,a,y),z=xe(se,{statuses:r,types:x},y,a,P),D=z.map(ae=>ae.id);if(ue(E.current,D)&&c===w)return;E.current=D;const re=new Set(D),oe=pe(o.edges,re),O=me(z,oe,c);h(O.nodes),m(O.edges)},[o,h,m,w,a,y,P]);t.useEffect(()=>{M(s,f,w)},[o,M,s,f,w]);const H=t.useCallback((r,x)=>{d(x.data.sourceNode)},[]),Y=t.useCallback(r=>{d(r)},[]),Z=t.useCallback(r=>{const x=o.nodes.find(c=>c.id===r);x&&d(x)},[o.nodes]),K=t.useCallback(r=>{const x=o.nodes.find(c=>c.id===r);x&&d(x)},[o.nodes]),U=t.useCallback(r=>{r.source&&r.target&&r.source!==r.target&&T({fromId:r.source,toId:r.target})},[]),q=t.useCallback(()=>{T(null)},[]),J=t.useCallback(r=>{l(x=>{const c=new Set(x);return c.has(r)?c.delete(r):c.add(r),c})},[]),Q=t.useCallback(r=>{C(x=>{const c=new Set(x);return c.has(r)?c.delete(r):c.add(r),c})},[]),X=t.useCallback(()=>{l(new Set),C(new Set)},[]),A=t.useMemo(()=>W(o.nodes,a,y).filter(x=>!(p.size&&!p.has(x.status)||g.size&&!g.has(x.type))),[o.nodes,a,y,p,g]),ee=k?(R=o.nodes.find(r=>r.id===k.fromId))==null?void 0:R.title:void 0,te=k?(F=o.nodes.find(r=>r.id===k.toId))==null?void 0:F.title:void 0;return e.jsxs("div",{className:"flex flex-col h-full",children:[e.jsx(ke,{statuses:p,types:g,direction:i,onStatusToggle:J,onTypeToggle:Q,onDirectionChange:N,onClear:X,visibleNodeCount:A.length,totalNodeCount:o.nodes.length,onExpandAll:V,onCollapseAll:B}),e.jsxs("div",{className:"flex flex-1 min-h-0",children:[e.jsx(Se,{tree:G,expandedIds:a,selectedNodeId:(u==null?void 0:u.id)??null,onToggleExpand:P,onSelectNode:K}),e.jsx("div",{className:"flex-1 relative",children:o.nodes.length===0?e.jsx("div",{className:"flex items-center justify-center h-full text-[var(--color-text-muted)]",children:e.jsxs("div",{className:"text-center",children:[e.jsx("p",{className:"text-lg mb-2",children:"No nodes in graph"}),e.jsx("p",{className:"text-sm",children:"Import a PRD to get started"})]})}):e.jsxs(be,{nodes:b,edges:v,onNodesChange:j,onEdgesChange:n,onNodeClick:H,onConnect:U,nodeTypes:Le,edgeTypes:_e,nodesDraggable:!1,nodesConnectable:!0,fitView:!0,minZoom:.1,maxZoom:2,proOptions:Pe,children:[e.jsx(fe,{gap:16,size:1}),e.jsx(ge,{showInteractive:!1})]})}),u&&e.jsx(ye,{node:u,edges:o.edges,allNodes:o.nodes,childrenMap:y,onClose:()=>d(null),onNodeNavigate:Z})]}),e.jsx(we,{nodes:A,allNodes:o.nodes,onNodeClick:Y}),k&&e.jsx(Ee,{fromId:k.fromId,toId:k.toId,fromTitle:ee,toTitle:te,onCreated:q,onCancel:()=>T(null)})]})}function ze({graph:o}){return e.jsx("div",{className:"h-full",children:e.jsx(De,{graph:o})})}export{ze as GraphTab};