comisai 1.0.24 → 1.0.26

package/node_modules/@comis/web/dist/assets/{pipeline-monitor-Bip16T7e.js → pipeline-monitor-DG7RbIOO.js}

@@ -1,24 +1,4 @@
-import{s as F,i as B,n as g,a as G,b as l,t as q,f as ht,r as P,A as h,w as H,I as Q}from"./index-CEcM1R_C.js";import{N as it,b as at,a as nt,c as mt}from"./ic-graph-canvas-C8FuSMe1.js";import"./ic-breadcrumb-CUMpp3BL.js";import"./ic-confirm-dialog-CCDbB04e.js";import"./directive-DoeGSK_T.js";const ot=2e3,ft=1e3;function vt(){let t="",e="running",s=!1,r=[],i=[],o=[],a={total:0,completed:0,failed:0,skipped:0,running:0,pending:0},p=0,x=null,v=!0,S=null,m=null,I=null,n=null,_=[],y=null;const N=new Set;function f(){for(const d of N)d()}function X(d,b){return d.map(c=>{const u=b[c.id];return{id:c.id,task:c.task,agentId:c.agentId,modelId:c.modelId,status:u?.status??"pending",runId:u?.runId,output:u?.output,error:u?.error,startedAt:u?.startedAt,completedAt:u?.completedAt,durationMs:u?.durationMs,retryAttempt:u?.retryAttempt,retriesRemaining:u?.retriesRemaining,dependsOn:c.dependsOn,position:{x:c.position.x,y:c.position.y}}})}function U(d){t=d.graphId,e=d.status,s=d.isTerminal,o=d.executionOrder,a=d.stats,r=X(_,d.nodes),v=!1,S=null,n===null&&d.status==="running"&&(n=Date.now(),p=0,D()),s&&($(),M()),f()}function C(d){S=d instanceof Error?d.message:String(d),v=!1,f()}async function w(d,b){try{const c=await d.call("graph.status",{graphId:b});U(c)}catch(c){C(c)}}function $(){m!==null&&(clearInterval(m),m=null)}function M(){I!==null&&(clearInterval(I),I=null)}function D(){M(),I=setInterval(()=>{n!==null&&(p=Date.now()-n,f())},ft)}function st(){let d=0,b=0,c=0,u=0,k=0;for(const gt of r)switch(gt.status){case"completed":d++;break;case"failed":b++;break;case"skipped":c++;break;case"running":u++;break;default:k++;break}a={total:r.length,completed:d,failed:b,skipped:c,running:u,pending:k}}return{subscribe(d){return N.add(d),()=>{N.delete(d)}},getSnapshot(){return Object.freeze({graphId:t,graphStatus:e,isTerminal:s,nodes:[...r],edges:[...i],executionOrder:[...o],stats:{...a},elapsedMs:p,selectedNodeId:x,loading:v,error:S})},selectNode(d){x=d,f()},startPolling(d,b,c,u){$(),M(),y=d,t=b,_=c,i=u,n=null,s=!1,w(d,b),m=setInterval(()=>{w(d,b)},ot)},stopPolling(){$(),M()},destroy(){$(),M(),N.clear()},applyEvent(d,b){if(d==="graph:node_updated"){const c=b;if(c.graphId!==t)return;const u=r.findIndex(k=>k.id===c.nodeId);if(u>=0){const k=r[u];r[u]={...k,status:c.status,durationMs:c.durationMs??k.durationMs,error:c.error??k.error,startedAt:c.status==="running"&&k.startedAt==null?c.timestamp:k.startedAt,completedAt:c.status==="completed"||c.status==="failed"?c.timestamp:k.completedAt},st(),f()}}else if(d==="graph:completed"){const c=b;if(c.graphId!==t)return;e=c.status,s=!0,a={total:c.nodeCount,completed:c.nodesCompleted,failed:c.nodesFailed,skipped:c.nodesSkipped,running:0,pending:0},$(),M(),v=!1,S=null,f()}else if(d==="graph:started"){if(b.graphId!==t)return;n===null&&(n=Date.now(),p=0,D()),f()}},suspendPolling(){$()},resumePolling(){s||y&&(w(y,t),$(),m=setInterval(()=>{w(y,t)},ot))}}}var bt=Object.defineProperty,xt=Object.getOwnPropertyDescriptor,J=(t,e,s,r)=>{for(var i=r>1?void 0:r?xt(e,s):e,o=t.length-1,a;o>=0;o--)(a=t[o])&&(i=(r?a(e,s,i):a(i))||i);return r&&i&&bt(e,s,i),i};let W=class extends G{constructor(){super(...arguments),this.graphStatus="running",this.isTerminal=!1,this.elapsedMs=0,this.stats={total:0,completed:0,failed:0,skipped:0,running:0,pending:0}}render(){const t=`status-badge status-badge--${this.graphStatus}`;return l`
-      <div class="bar">
-        <span class=${t} role="status">${this.graphStatus}</span>
-        <span class="elapsed">${this._formatElapsed(this.elapsedMs)}</span>
-        <span class="progress">${this.stats.completed}/${this.stats.total} nodes complete</span>
-        <span class="tokens">N/A</span>
-        ${this.isTerminal?l`
-              <button
-                class="outputs-btn"
-                aria-label="View graph outputs"
-                @click=${this._onViewOutputs}
-              >View Outputs</button>
-            `:l`
-              <button
-                class="cancel-btn"
-                aria-label="Cancel pipeline execution"
-                @click=${this._onCancel}
-              >Cancel</button>
-            `}
-      </div>
-    `}_formatElapsed(t){const e=Math.floor(t/1e3),s=Math.floor(e/60),r=e%60;return s>0?`${s}m ${String(r).padStart(2,"0")}s`:`${r}s`}_onCancel(){this.dispatchEvent(new CustomEvent("cancel",{bubbles:!0,composed:!0}))}_onViewOutputs(){this.dispatchEvent(new CustomEvent("view-outputs",{bubbles:!0,composed:!0}))}};W.styles=[F,B`
+import{c as e,f as t,h as n,l as r,m as i,n as a,o,r as s,s as c,t as l,u}from"./decorate-BvWYovGE.js";import{a as d}from"./index-BBkuC-EU.js";import"./ic-breadcrumb-DqN6G3gc.js";import"./ic-confirm-dialog-DGlPbV1T.js";import{n as f,t as p}from"./ic-graph-canvas-ByRjij68.js";var m=2e3,h=1e3;function g(){let e=``,t=`running`,n=!1,r=[],i=[],a=[],o={total:0,completed:0,failed:0,skipped:0,running:0,pending:0},s=0,c=null,l=!0,u=null,d=null,f=null,p=null,g=[],_=null,v=new Set;function y(){for(let e of v)e()}function b(e,t){return e.map(e=>{let n=t[e.id];return{id:e.id,task:e.task,agentId:e.agentId,modelId:e.modelId,status:n?.status??`pending`,runId:n?.runId,output:n?.output,error:n?.error,startedAt:n?.startedAt,completedAt:n?.completedAt,durationMs:n?.durationMs,retryAttempt:n?.retryAttempt,retriesRemaining:n?.retriesRemaining,dependsOn:e.dependsOn,position:{x:e.position.x,y:e.position.y}}})}function x(i){e=i.graphId,t=i.status,n=i.isTerminal,a=i.executionOrder,o=i.stats,r=b(g,i.nodes),l=!1,u=null,p===null&&i.status===`running`&&(p=Date.now(),s=0,E()),n&&(w(),T()),y()}function S(e){u=e instanceof Error?e.message:String(e),l=!1,y()}async function C(e,t){try{x(await e.call(`graph.status`,{graphId:t}))}catch(e){S(e)}}function w(){d!==null&&(clearInterval(d),d=null)}function T(){f!==null&&(clearInterval(f),f=null)}function E(){T(),f=setInterval(()=>{p!==null&&(s=Date.now()-p,y())},h)}function D(){let e=0,t=0,n=0,i=0,a=0;for(let o of r)switch(o.status){case`completed`:e++;break;case`failed`:t++;break;case`skipped`:n++;break;case`running`:i++;break;default:a++;break}o={total:r.length,completed:e,failed:t,skipped:n,running:i,pending:a}}return{subscribe(e){return v.add(e),()=>{v.delete(e)}},getSnapshot(){return Object.freeze({graphId:e,graphStatus:t,isTerminal:n,nodes:[...r],edges:[...i],executionOrder:[...a],stats:{...o},elapsedMs:s,selectedNodeId:c,loading:l,error:u})},selectNode(e){c=e,y()},startPolling(t,r,a,o){w(),T(),_=t,e=r,g=a,i=o,p=null,n=!1,C(t,r),d=setInterval(()=>{C(t,r)},m)},stopPolling(){w(),T()},destroy(){w(),T(),v.clear()},applyEvent(i,a){if(i===`graph:node_updated`){let t=a;if(t.graphId!==e)return;let n=r.findIndex(e=>e.id===t.nodeId);if(n>=0){let e=r[n];r[n]={...e,status:t.status,durationMs:t.durationMs??e.durationMs,error:t.error??e.error,startedAt:t.status===`running`&&e.startedAt==null?t.timestamp:e.startedAt,completedAt:t.status===`completed`||t.status===`failed`?t.timestamp:e.completedAt},D(),y()}}else if(i===`graph:completed`){let r=a;if(r.graphId!==e)return;t=r.status,n=!0,o={total:r.nodeCount,completed:r.nodesCompleted,failed:r.nodesFailed,skipped:r.nodesSkipped,running:0,pending:0},w(),T(),l=!1,u=null,y()}else if(i===`graph:started`){if(a.graphId!==e)return;p===null&&(p=Date.now(),s=0,E()),y()}},suspendPolling(){w()},resumePolling(){n||_&&(C(_,e),w(),d=setInterval(()=>{C(_,e)},m))}}}var _=class extends r{constructor(...e){super(...e),this.graphStatus=`running`,this.isTerminal=!1,this.elapsedMs=0,this.stats={total:0,completed:0,failed:0,skipped:0,running:0,pending:0}}static{this.styles=[s,n`
       :host {
         display: block;
       }
@@ -109,106 +89,27 @@ import{s as F,i as B,n as g,a as G,b as l,t as q,f as ht,r as P,A as h,w as H,I
         outline: 2px solid var(--ic-accent);
         outline-offset: 2px;
       }
-    `];J([g()],W.prototype,"graphStatus",2);J([g({type:Boolean})],W.prototype,"isTerminal",2);J([g({type:Number})],W.prototype,"elapsedMs",2);J([g({attribute:!1})],W.prototype,"stats",2);W=J([q("ic-monitor-status-bar")],W);var _t=Object.defineProperty,yt=Object.getOwnPropertyDescriptor,j=(t,e,s,r)=>{for(var i=r>1?void 0:r?yt(e,s):e,o=t.length-1,a;o>=0;o--)(a=t[o])&&(i=(r?a(e,s,i):a(i))||i);return r&&i&&_t(e,s,i),i};const ct={pending:"#6b7280",ready:"#a78bfa",running:"#06b6d4",completed:"#22c55e",failed:"#ef4444",skipped:"#9ca3af"};function lt(t){return t==null?"--":new Date(t).toLocaleTimeString()}function wt(t){if(t==null)return"--";const e=t/1e3;if(e>=60){const s=Math.floor(e/60),r=Math.floor(e%60);return`${s}m ${r.toString().padStart(2,"0")}s`}return`${e.toFixed(1)}s`}let A=class extends G{constructor(){super(...arguments),this.node=null,this.allNodes=[],this._showFullOutput=!1,this._steerMode=!1,this._steerText=""}_dispatchClose(){this.dispatchEvent(new CustomEvent("close",{bubbles:!0,composed:!0}))}_dispatchSteer(){const t=this.node;!t?.runId||!this._steerText.trim()||(this.dispatchEvent(new CustomEvent("steer",{bubbles:!0,composed:!0,detail:{runId:t.runId,message:this._steerText.trim()}})),this._steerMode=!1,this._steerText="")}_openFullOutput(){this._showFullOutput=!0}_closeFullOutput(){this._showFullOutput=!1}async _copyFullOutput(){const t=this.node?.output??this.node?.error??"";try{await navigator.clipboard.writeText(t)}catch{}}render(){const t=this.node;return t?l`
-      ${this._renderHeader(t)}
-      ${this._renderStatus(t)}
-      ${this._renderTiming(t)}
-      ${this._renderTask(t)}
-      ${this._renderDependencies(t)}
-      ${this._renderOutput(t)}
-      ${this._renderError(t)}
-      ${this._renderSteer(t)}
-      ${this._showFullOutput?this._renderModal(t):h}
-    `:h}_renderHeader(t){return l`
-      <div class="header">
-        <h3 title=${t.id}>${t.id}</h3>
-        <button class="close-btn" @click=${this._dispatchClose} title="Close">&times;</button>
-      </div>
-    `}_renderStatus(t){const e=ct[t.status]??"#6b7280",s=t.retryAttempt!=null&&t.retryAttempt>0;return l`
-      <div class="section-header">Status</div>
-      <div style="margin-bottom: 6px">
-        <span class="status-badge" style="background: ${e}">${t.status}</span>
-        ${s?l`<span class="retry-badge">(retrying)</span>`:h}
-      </div>
-      ${s?l`<div class="field-row">
-            <span class="field-label">Retry</span>
-            <span class="field-value">Attempt ${t.retryAttempt}${t.retriesRemaining!=null?` (${t.retriesRemaining} remaining)`:""}</span>
-          </div>`:h}
-      ${t.agentId?l`<div class="field-row">
-            <span class="field-label">Agent</span>
-            <span class="field-value">${t.agentId}</span>
-          </div>`:h}
-      ${t.modelId?l`<div class="field-row">
-            <span class="field-label">Model</span>
-            <span class="field-value">${t.modelId}</span>
-          </div>`:h}
-      ${t.runId?l`<div class="field-row">
-            <span class="field-label">Run ID</span>
-            <span class="field-value mono" title=${t.runId}>${t.runId}</span>
-          </div>`:h}
-    `}_renderTiming(t){return l`
-      <div class="section-header">Timing</div>
-      <div class="field-row">
-        <span class="field-label">Started</span>
-        <span class="field-value">${lt(t.startedAt)}</span>
-      </div>
-      <div class="field-row">
-        <span class="field-label">Completed</span>
-        <span class="field-value">${lt(t.completedAt)}</span>
-      </div>
-      <div class="field-row">
-        <span class="field-label">Duration</span>
-        <span class="field-value">${wt(t.durationMs)}</span>
-      </div>
-    `}_renderTask(t){return l`
-      <div class="section-header">Task</div>
-      <div class="task-box">${t.task}</div>
-    `}_renderDependencies(t){return t.dependsOn.length?l`
-      <div class="section-header">Dependencies</div>
-      ${t.dependsOn.map(e=>{const r=this.allNodes.find(o=>o.id===e)?.status??"pending",i=ct[r]??"#6b7280";return l`
-          <div class="dep-row">
-            <span class="dep-dot" style="background: ${i}"></span>
-            <span class="dep-label">${e}</span>
-          </div>
-        `})}
-    `:h}_renderOutput(t){if(!t.output)return h;const s=t.output.length>300?t.output.slice(0,300)+"...":t.output,r=t.output.endsWith("... [truncated]");return l`
-      <div class="section-header">Output</div>
-      <pre class="output-block">${s}</pre>
-      ${r?l`<div class="truncated-note">Output may be truncated by server</div>`:h}
-      <button class="view-full-btn" @click=${this._openFullOutput}>View Full Output</button>
-    `}_renderError(t){return t.error?l`
-      <div class="section-header">Error</div>
-      <pre class="error-block">${t.error}</pre>
-    `:h}_renderSteer(t){return t.status!=="running"||!t.runId?h:l`
-      <div class="section-header">Steer</div>
-      ${this._steerMode?l`
-            <div class="steer-area">
-              <textarea
-                placeholder="Enter new instructions..."
-                .value=${this._steerText}
-                @input=${e=>{this._steerText=e.target.value}}
-              ></textarea>
-              <div class="send-row">
-                <button class="send-btn" @click=${this._dispatchSteer}>Send</button>
-              </div>
-            </div>
-          `:l`<button class="steer-btn" @click=${()=>{this._steerMode=!0}}>Steer</button>`}
-    `}_renderModal(t){const e=t.output??t.error??"",s=t.output?"Full Output":"Error Details";return l`
-      <div class="modal-backdrop" @click=${this._closeFullOutput}>
-        <div class="modal-content" @click=${r=>r.stopPropagation()}>
-          <div class="modal-header">
-            <h4>${s} - ${t.id}</h4>
-            <div class="modal-actions">
-              <button class="copy-btn" @click=${this._copyFullOutput}>Copy</button>
-              <button class="modal-close-btn" @click=${this._closeFullOutput}>Close</button>
-            </div>
-          </div>
-          <div class="modal-body">
-            <pre>${e}</pre>
-          </div>
-        </div>
+    `]}render(){return t`
+      <div class="bar">
+        <span class=${`status-badge status-badge--${this.graphStatus}`} role="status">${this.graphStatus}</span>
+        <span class="elapsed">${this._formatElapsed(this.elapsedMs)}</span>
+        <span class="progress">${this.stats.completed}/${this.stats.total} nodes complete</span>
+        <span class="tokens">N/A</span>
+        ${this.isTerminal?t`
+              <button
+                class="outputs-btn"
+                aria-label="View graph outputs"
+                @click=${this._onViewOutputs}
+              >View Outputs</button>
+            `:t`
+              <button
+                class="cancel-btn"
+                aria-label="Cancel pipeline execution"
+                @click=${this._onCancel}
+              >Cancel</button>
+            `}
       </div>
-    `}};A.styles=[F,ht,B`
+    `}_formatElapsed(e){let t=Math.floor(e/1e3),n=Math.floor(t/60),r=t%60;return n>0?`${n}m ${String(r).padStart(2,`0`)}s`:`${r}s`}_onCancel(){this.dispatchEvent(new CustomEvent(`cancel`,{bubbles:!0,composed:!0}))}_onViewOutputs(){this.dispatchEvent(new CustomEvent(`view-outputs`,{bubbles:!0,composed:!0}))}};l([c()],_.prototype,`graphStatus`,void 0),l([c({type:Boolean})],_.prototype,`isTerminal`,void 0),l([c({type:Number})],_.prototype,`elapsedMs`,void 0),l([c({attribute:!1})],_.prototype,`stats`,void 0),_=l([e(`ic-monitor-status-bar`)],_);var v={pending:`#6b7280`,ready:`#a78bfa`,running:`#06b6d4`,completed:`#22c55e`,failed:`#ef4444`,skipped:`#9ca3af`};function y(e){return e==null?`--`:new Date(e).toLocaleTimeString()}function b(e){if(e==null)return`--`;let t=e/1e3;return t>=60?`${Math.floor(t/60)}m ${Math.floor(t%60).toString().padStart(2,`0`)}s`:`${t.toFixed(1)}s`}var x=class extends r{constructor(...e){super(...e),this.node=null,this.allNodes=[],this._showFullOutput=!1,this._steerMode=!1,this._steerText=``}static{this.styles=[s,a,n`
       :host {
         display: block;
         width: 320px;
@@ -505,54 +406,106 @@ import{s as F,i as B,n as g,a as G,b as l,t as q,f as ht,r as P,A as h,w as H,I
         font-style: italic;
         padding: 8px 0;
       }
-    `];j([g({attribute:!1})],A.prototype,"node",2);j([g({attribute:!1})],A.prototype,"allNodes",2);j([P()],A.prototype,"_showFullOutput",2);j([P()],A.prototype,"_steerMode",2);j([P()],A.prototype,"_steerText",2);A=j([q("ic-node-detail-panel")],A);var $t=Object.defineProperty,St=Object.getOwnPropertyDescriptor,K=(t,e,s,r)=>{for(var i=r>1?void 0:r?St(e,s):e,o=t.length-1,a;o>=0;o--)(a=t[o])&&(i=(r?a(e,s,i):a(i))||i);return r&&i&&$t(e,s,i),i};const Y=28,Z=4,tt=80,rt=20,et=2,kt=200,dt={running:"#06b6d4",completed:"#22c55e",failed:"#ef4444",skipped:"#9ca3af",pending:"#4b5563",ready:"#a78bfa"};let V=class extends G{constructor(){super(...arguments),this.nodes=[],this.executionOrder=[],this.elapsedMs=0,this.selectedNodeId=null}render(){if(!this.executionOrder.length)return l`<svg width="100%" height="100%"></svg>`;const t=new Map(this.nodes.map(n=>[n.id,n])),e=this.executionOrder.map(n=>t.get(n)).filter(n=>n!=null);if(!e.length)return l`<svg width="100%" height="100%"></svg>`;const s=e.filter(n=>n.startedAt!=null).map(n=>n.startedAt),r=s.length>0?Math.min(...s):0,i=Math.max(this.elapsedMs,1e3),o=e.length,a=rt+o*(Y+Z)+Z,p=Math.max(kt,600),x=tt+p+16,v=p/i,S=i/1e3;let m;S<5?m=1:S<60?m=5:m=10;const I=[];for(let n=m;n*1e3<=i;n+=m)I.push(n);return l`
-      <svg width="${x}" height="${a}" viewBox="0 0 ${x} ${a}">
-        <!-- Time markers -->
-        ${I.map(n=>{const _=tt+n*1e3*v;return H`
-            <line class="time-line" x1="${_}" y1="${rt}" x2="${_}" y2="${a}" />
-            <text class="time-marker" x="${_}" y="2">${n}s</text>
-          `})}
-
-        <!-- Rows -->
-        ${e.map((n,_)=>{const y=rt+_*(Y+Z)+Z,N=n.id===this.selectedNodeId,f=n.retryAttempt!=null&&n.retryAttempt>0,X=n.id.length>10?n.id.slice(0,9)+"…":n.id,U=f?`${X} (R${n.retryAttempt})`:X;let C=0,w=0,$=dt[n.status]??"#4b5563",M=1,D=!1;if(n.status==="running"&&n.startedAt!=null)C=(n.startedAt-r)*v,w=Math.max((i-(n.startedAt-r))*v,4),M=.8,D=!0;else if((n.status==="completed"||n.status==="failed")&&n.startedAt!=null){C=(n.startedAt-r)*v;const st=n.completedAt??r+i;w=Math.max((st-n.startedAt)*v,4),D=!0}else n.status==="skipped"&&(C=0,w=8,$=dt.skipped,M=.5,D=!0);return H`
-            <!-- Alternating row background -->
-            ${_%2===1?H`<rect class="row-bg" x="0" y="${y}" width="${x}" height="${Y}" />`:h}
-
-            <!-- Node label -->
-            <text class="label-text" x="4" y="${y+Y/2}">
-              ${U}
-            </text>
-
-            <!-- Bar -->
-            ${D?H`
-                <rect
-                  class="bar"
-                  x="${tt+C}"
-                  y="${y+4}"
-                  width="${w}"
-                  height="${Y-8}"
-                  rx="${et}"
-                  ry="${et}"
-                  fill="${$}"
-                  opacity="${M}"
-                  stroke="${f?"#f97316":"none"}"
-                  stroke-width="${f?"1.5":"0"}"
-                  data-node-id="${n.id}"
-                  @click=${()=>this._onBarClick(n.id)}
-                />
-                ${N?H`<rect
-                      class="selected-highlight"
-                      x="${tt+C-1}"
-                      y="${y+3}"
-                      width="${w+2}"
-                      height="${Y-6}"
-                      rx="${et+1}"
-                      ry="${et+1}"
-                    />`:h}
-              `:h}
-          `})}
-      </svg>
-    `}_onBarClick(t){this.dispatchEvent(new CustomEvent("node-inspect",{bubbles:!0,composed:!0,detail:{nodeId:t}}))}};V.styles=[F,B`
+    `]}_dispatchClose(){this.dispatchEvent(new CustomEvent(`close`,{bubbles:!0,composed:!0}))}_dispatchSteer(){let e=this.node;!e?.runId||!this._steerText.trim()||(this.dispatchEvent(new CustomEvent(`steer`,{bubbles:!0,composed:!0,detail:{runId:e.runId,message:this._steerText.trim()}})),this._steerMode=!1,this._steerText=``)}_openFullOutput(){this._showFullOutput=!0}_closeFullOutput(){this._showFullOutput=!1}async _copyFullOutput(){let e=this.node?.output??this.node?.error??``;try{await navigator.clipboard.writeText(e)}catch{}}render(){let e=this.node;return e?t`
+      ${this._renderHeader(e)}
+      ${this._renderStatus(e)}
+      ${this._renderTiming(e)}
+      ${this._renderTask(e)}
+      ${this._renderDependencies(e)}
+      ${this._renderOutput(e)}
+      ${this._renderError(e)}
+      ${this._renderSteer(e)}
+      ${this._showFullOutput?this._renderModal(e):u}
+    `:u}_renderHeader(e){return t`
+      <div class="header">
+        <h3 title=${e.id}>${e.id}</h3>
+        <button class="close-btn" @click=${this._dispatchClose} title="Close">&times;</button>
+      </div>
+    `}_renderStatus(e){let n=v[e.status]??`#6b7280`,r=e.retryAttempt!=null&&e.retryAttempt>0;return t`
+      <div class="section-header">Status</div>
+      <div style="margin-bottom: 6px">
+        <span class="status-badge" style="background: ${n}">${e.status}</span>
+        ${r?t`<span class="retry-badge">(retrying)</span>`:u}
+      </div>
+      ${r?t`<div class="field-row">
+            <span class="field-label">Retry</span>
+            <span class="field-value">Attempt ${e.retryAttempt}${e.retriesRemaining==null?``:` (${e.retriesRemaining} remaining)`}</span>
+          </div>`:u}
+      ${e.agentId?t`<div class="field-row">
+            <span class="field-label">Agent</span>
+            <span class="field-value">${e.agentId}</span>
+          </div>`:u}
+      ${e.modelId?t`<div class="field-row">
+            <span class="field-label">Model</span>
+            <span class="field-value">${e.modelId}</span>
+          </div>`:u}
+      ${e.runId?t`<div class="field-row">
+            <span class="field-label">Run ID</span>
+            <span class="field-value mono" title=${e.runId}>${e.runId}</span>
+          </div>`:u}
+    `}_renderTiming(e){return t`
+      <div class="section-header">Timing</div>
+      <div class="field-row">
+        <span class="field-label">Started</span>
+        <span class="field-value">${y(e.startedAt)}</span>
+      </div>
+      <div class="field-row">
+        <span class="field-label">Completed</span>
+        <span class="field-value">${y(e.completedAt)}</span>
+      </div>
+      <div class="field-row">
+        <span class="field-label">Duration</span>
+        <span class="field-value">${b(e.durationMs)}</span>
+      </div>
+    `}_renderTask(e){return t`
+      <div class="section-header">Task</div>
+      <div class="task-box">${e.task}</div>
+    `}_renderDependencies(e){return e.dependsOn.length?t`
+      <div class="section-header">Dependencies</div>
+      ${e.dependsOn.map(e=>t`
+          <div class="dep-row">
+            <span class="dep-dot" style="background: ${v[this.allNodes.find(t=>t.id===e)?.status??`pending`]??`#6b7280`}"></span>
+            <span class="dep-label">${e}</span>
+          </div>
+        `)}
+    `:u}_renderOutput(e){return e.output?t`
+      <div class="section-header">Output</div>
+      <pre class="output-block">${e.output.length>300?e.output.slice(0,300)+`...`:e.output}</pre>
+      ${e.output.endsWith(`... [truncated]`)?t`<div class="truncated-note">Output may be truncated by server</div>`:u}
+      <button class="view-full-btn" @click=${this._openFullOutput}>View Full Output</button>
+    `:u}_renderError(e){return e.error?t`
+      <div class="section-header">Error</div>
+      <pre class="error-block">${e.error}</pre>
+    `:u}_renderSteer(e){return e.status!==`running`||!e.runId?u:t`
+      <div class="section-header">Steer</div>
+      ${this._steerMode?t`
+            <div class="steer-area">
+              <textarea
+                placeholder="Enter new instructions..."
+                .value=${this._steerText}
+                @input=${e=>{this._steerText=e.target.value}}
+              ></textarea>
+              <div class="send-row">
+                <button class="send-btn" @click=${this._dispatchSteer}>Send</button>
+              </div>
+            </div>
+          `:t`<button class="steer-btn" @click=${()=>{this._steerMode=!0}}>Steer</button>`}
+    `}_renderModal(e){let n=e.output??e.error??``,r=e.output?`Full Output`:`Error Details`;return t`
+      <div class="modal-backdrop" @click=${this._closeFullOutput}>
+        <div class="modal-content" @click=${e=>e.stopPropagation()}>
+          <div class="modal-header">
+            <h4>${r} - ${e.id}</h4>
+            <div class="modal-actions">
+              <button class="copy-btn" @click=${this._copyFullOutput}>Copy</button>
+              <button class="modal-close-btn" @click=${this._closeFullOutput}>Close</button>
+            </div>
+          </div>
+          <div class="modal-body">
+            <pre>${n}</pre>
+          </div>
+        </div>
+      </div>
+    `}};l([c({attribute:!1})],x.prototype,`node`,void 0),l([c({attribute:!1})],x.prototype,`allNodes`,void 0),l([o()],x.prototype,`_showFullOutput`,void 0),l([o()],x.prototype,`_steerMode`,void 0),l([o()],x.prototype,`_steerText`,void 0),x=l([e(`ic-node-detail-panel`)],x);var S=28,C=4,w=80,T=20,E=2,D=200,O={running:`#06b6d4`,completed:`#22c55e`,failed:`#ef4444`,skipped:`#9ca3af`,pending:`#4b5563`,ready:`#a78bfa`},k=class extends r{constructor(...e){super(...e),this.nodes=[],this.executionOrder=[],this.elapsedMs=0,this.selectedNodeId=null}static{this.styles=[s,n`
       :host {
         display: block;
         height: 200px;
@@ -604,31 +557,58 @@ import{s as F,i as B,n as g,a as G,b as l,t as q,f as ht,r as P,A as h,w as H,I
         stroke-width: 2;
         fill: none;
       }
-    `];K([g({attribute:!1})],V.prototype,"nodes",2);K([g({attribute:!1})],V.prototype,"executionOrder",2);K([g({type:Number})],V.prototype,"elapsedMs",2);K([g()],V.prototype,"selectedNodeId",2);V=K([q("ic-execution-timeline")],V);var It=Object.defineProperty,Mt=Object.getOwnPropertyDescriptor,L=(t,e,s,r)=>{for(var i=r>1?void 0:r?Mt(e,s):e,o=t.length-1,a;o>=0;o--)(a=t[o])&&(i=(r?a(e,s,i):a(i))||i);return r&&i&&It(e,s,i),i};const z=160,R=120,pt=8,Ot=4,Ct=3,ut={pending:"#6b7280",ready:"#a78bfa",running:"#06b6d4",completed:"#22c55e",failed:"#ef4444",skipped:"#9ca3af"};let T=class extends G{constructor(){super(...arguments),this.nodes=[],this.viewport={x:0,y:0,scale:1},this.containerWidth=800,this.containerHeight=600,this._dragging=!1,this._dragStartMinimapX=0,this._dragStartMinimapY=0,this._dragStartVpX=0,this._dragStartVpY=0,this._onPointerDown=t=>{t.preventDefault(),t.currentTarget.setPointerCapture(t.pointerId),this._dragging=!0;const e=t.currentTarget.getBoundingClientRect();this._dragStartMinimapX=(t.clientX-e.left)/e.width*z,this._dragStartMinimapY=(t.clientY-e.top)/e.height*R,this._dragStartVpX=this.viewport.x,this._dragStartVpY=this.viewport.y},this._onPointerMove=t=>{if(!this._dragging)return;t.preventDefault();const e=t.currentTarget.getBoundingClientRect(),s=(t.clientX-e.left)/e.width*z,r=(t.clientY-e.top)/e.height*R,i=s-this._dragStartMinimapX,o=r-this._dragStartMinimapY,a=this._computeBounds(),p=this._computeScale(a.graphW,a.graphH),x=i/p,v=o/p,S=this._dragStartVpX-x*this.viewport.scale,m=this._dragStartVpY-v*this.viewport.scale;this.dispatchEvent(new CustomEvent("viewport-change",{bubbles:!0,composed:!0,detail:{x:S,y:m,scale:this.viewport.scale}}))},this._onPointerUp=t=>{this._dragging&&(this._dragging=!1,t.currentTarget.releasePointerCapture(t.pointerId))}}_computeBounds(){if(!this.nodes.length)return{minX:0,minY:0,maxX:400,maxY:300,graphW:400,graphH:300};let t=1/0,e=1/0,s=-1/0,r=-1/0;for(const o of this.nodes)t=Math.min(t,o.position.x),e=Math.min(e,o.position.y),s=Math.max(s,o.position.x+it),r=Math.max(r,o.position.y+at);const i=40;return t-=i,e-=i,s+=i,r+=i,{minX:t,minY:e,maxX:s,maxY:r,graphW:s-t,graphH:r-e}}_computeScale(t,e){const s=z-pt*2,r=R-pt*2;return Math.min(s/t,r/e,1)}render(){const t=this._computeBounds(),e=this._computeScale(t.graphW,t.graphH),s=t.graphW*e,r=t.graphH*e,i=(z-s)/2,o=(R-r)/2,a=this.nodes.map(f=>{const X=i+(f.position.x-t.minX)*e,U=o+(f.position.y-t.minY)*e,C=Math.max(it*e,Ot),w=Math.max(at*e,Ct),$=ut[f.status??"pending"]??ut.pending;return H`<rect x="${X}" y="${U}" width="${C}" height="${w}" fill="${$}" rx="1" />`}),p=this.viewport,x=-p.x/p.scale,v=-p.y/p.scale,S=this.containerWidth/p.scale,m=this.containerHeight/p.scale,I=i+(x-t.minX)*e,n=o+(v-t.minY)*e,_=S*e,y=m*e,N=_<z*.95||y<R*.95;return l`
-      <svg
-        viewBox="0 0 ${z} ${R}"
-        @pointerdown=${this._onPointerDown}
-        @pointermove=${this._onPointerMove}
-        @pointerup=${this._onPointerUp}
-        @pointercancel=${this._onPointerUp}
-      >
-        <!-- Node dots -->
-        ${a}
+    `]}render(){if(!this.executionOrder.length)return t`<svg width="100%" height="100%"></svg>`;let e=new Map(this.nodes.map(e=>[e.id,e])),n=this.executionOrder.map(t=>e.get(t)).filter(e=>e!=null);if(!n.length)return t`<svg width="100%" height="100%"></svg>`;let r=n.filter(e=>e.startedAt!=null).map(e=>e.startedAt),a=r.length>0?Math.min(...r):0,o=Math.max(this.elapsedMs,1e3),s=T+n.length*(S+C)+C,c=Math.max(D,600),l=w+c+16,d=c/o,f=o/1e3,p;p=f<5?1:f<60?5:10;let m=[];for(let e=p;e*1e3<=o;e+=p)m.push(e);return t`
+      <svg width="${l}" height="${s}" viewBox="0 0 ${l} ${s}">
+        <!-- Time markers -->
+        ${m.map(e=>{let t=w+e*1e3*d;return i`
+            <line class="time-line" x1="${t}" y1="${T}" x2="${t}" y2="${s}" />
+            <text class="time-marker" x="${t}" y="2">${e}s</text>
+          `})}
 
-        <!-- Viewport rectangle -->
-        ${N?H`
-            <rect class="viewport-fill" x="${I}" y="${n}" width="${_}" height="${y}" />
-            <rect
-              class="viewport-rect ${this._dragging?"dragging":""}"
-              x="${I}" y="${n}" width="${_}" height="${y}"
-            />
-          `:h}
+        <!-- Rows -->
+        ${n.map((e,t)=>{let n=T+t*(S+C)+C,r=e.id===this.selectedNodeId,s=e.retryAttempt!=null&&e.retryAttempt>0,c=e.id.length>10?e.id.slice(0,9)+`…`:e.id,f=s?`${c} (R${e.retryAttempt})`:c,p=0,m=0,h=O[e.status]??`#4b5563`,g=1,_=!1;if(e.status===`running`&&e.startedAt!=null)p=(e.startedAt-a)*d,m=Math.max((o-(e.startedAt-a))*d,4),g=.8,_=!0;else if((e.status===`completed`||e.status===`failed`)&&e.startedAt!=null){p=(e.startedAt-a)*d;let t=e.completedAt??a+o;m=Math.max((t-e.startedAt)*d,4),_=!0}else e.status===`skipped`&&(p=0,m=8,h=O.skipped,g=.5,_=!0);return i`
+            <!-- Alternating row background -->
+            ${t%2==1?i`<rect class="row-bg" x="0" y="${n}" width="${l}" height="${S}" />`:u}
+
+            <!-- Node label -->
+            <text class="label-text" x="4" y="${n+S/2}">
+              ${f}
+            </text>
+
+            <!-- Bar -->
+            ${_?i`
+                <rect
+                  class="bar"
+                  x="${w+p}"
+                  y="${n+4}"
+                  width="${m}"
+                  height="${S-8}"
+                  rx="${E}"
+                  ry="${E}"
+                  fill="${h}"
+                  opacity="${g}"
+                  stroke="${s?`#f97316`:`none`}"
+                  stroke-width="${s?`1.5`:`0`}"
+                  data-node-id="${e.id}"
+                  @click=${()=>this._onBarClick(e.id)}
+                />
+                ${r?i`<rect
+                      class="selected-highlight"
+                      x="${w+p-1}"
+                      y="${n+3}"
+                      width="${m+2}"
+                      height="${S-6}"
+                      rx="${E+1}"
+                      ry="${E+1}"
+                    />`:u}
+              `:u}
+          `})}
       </svg>
-    `}};T.styles=[F,B`
+    `}_onBarClick(e){this.dispatchEvent(new CustomEvent(`node-inspect`,{bubbles:!0,composed:!0,detail:{nodeId:e}}))}};l([c({attribute:!1})],k.prototype,`nodes`,void 0),l([c({attribute:!1})],k.prototype,`executionOrder`,void 0),l([c({type:Number})],k.prototype,`elapsedMs`,void 0),l([c()],k.prototype,`selectedNodeId`,void 0),k=l([e(`ic-execution-timeline`)],k);var A=160,j=120,M=8,N=4,P=3,F={pending:`#6b7280`,ready:`#a78bfa`,running:`#06b6d4`,completed:`#22c55e`,failed:`#ef4444`,skipped:`#9ca3af`},I=class extends r{constructor(...e){super(...e),this.nodes=[],this.viewport={x:0,y:0,scale:1},this.containerWidth=800,this.containerHeight=600,this._dragging=!1,this._dragStartMinimapX=0,this._dragStartMinimapY=0,this._dragStartVpX=0,this._dragStartVpY=0,this._onPointerDown=e=>{e.preventDefault(),e.currentTarget.setPointerCapture(e.pointerId),this._dragging=!0;let t=e.currentTarget.getBoundingClientRect();this._dragStartMinimapX=(e.clientX-t.left)/t.width*A,this._dragStartMinimapY=(e.clientY-t.top)/t.height*j,this._dragStartVpX=this.viewport.x,this._dragStartVpY=this.viewport.y},this._onPointerMove=e=>{if(!this._dragging)return;e.preventDefault();let t=e.currentTarget.getBoundingClientRect(),n=(e.clientX-t.left)/t.width*A,r=(e.clientY-t.top)/t.height*j,i=n-this._dragStartMinimapX,a=r-this._dragStartMinimapY,o=this._computeBounds(),s=this._computeScale(o.graphW,o.graphH),c=i/s,l=a/s,u=this._dragStartVpX-c*this.viewport.scale,d=this._dragStartVpY-l*this.viewport.scale;this.dispatchEvent(new CustomEvent(`viewport-change`,{bubbles:!0,composed:!0,detail:{x:u,y:d,scale:this.viewport.scale}}))},this._onPointerUp=e=>{this._dragging&&(this._dragging=!1,e.currentTarget.releasePointerCapture(e.pointerId))}}static{this.styles=[s,n`
       :host {
         display: block;
-        width: ${z}px;
-        height: ${R}px;
+        width: ${A}px;
+        height: ${j}px;
         background: var(--ic-surface, #181825);
         border: 1px solid var(--ic-border);
         border-radius: var(--ic-radius-md, 8px);
@@ -661,115 +641,27 @@ import{s as F,i as B,n as g,a as G,b as l,t as q,f as ht,r as P,A as h,w as H,I
         fill: var(--ic-accent, #3b82f6);
         fill-opacity: 0.05;
       }
-    `];L([g({attribute:!1})],T.prototype,"nodes",2);L([g({attribute:!1})],T.prototype,"viewport",2);L([g({type:Number})],T.prototype,"containerWidth",2);L([g({type:Number})],T.prototype,"containerHeight",2);L([P()],T.prototype,"_dragging",2);T=L([q("ic-graph-minimap")],T);var Nt=Object.defineProperty,At=Object.getOwnPropertyDescriptor,E=(t,e,s,r)=>{for(var i=r>1?void 0:r?At(e,s):e,o=t.length-1,a;o>=0;o--)(a=t[o])&&(i=(r?a(e,s,i):a(i))||i);return r&&i&&Nt(e,s,i),i};let O=class extends G{constructor(){super(...arguments),this.rpcClient=null,this.graphId="",this.eventDispatcher=null,this._snapshot=null,this._viewport={x:0,y:0,scale:1},this._showCancelConfirm=!1,this._liveAnnouncement="",this._monitorState=null,this._stateUnsub=null,this._sseUnsubs=[],this._previousNodeStatuses=new Map,this._containerWidth=800,this._containerHeight=600,this._resizeObserver=null}connectedCallback(){super.connectedCallback(),this._monitorState=vt(),this._stateUnsub=this._monitorState.subscribe(()=>{const t=this._monitorState.getSnapshot();this._snapshot=t,this._announceNodeChanges(t.nodes)}),this._initMonitor()}firstUpdated(){const t=this.renderRoot.querySelector(".canvas-area");t&&(this._resizeObserver=new ResizeObserver(e=>{for(const s of e)this._containerWidth=s.contentRect.width,this._containerHeight=s.contentRect.height}),this._resizeObserver.observe(t))}disconnectedCallback(){for(const t of this._sseUnsubs)t();this._sseUnsubs=[],this._monitorState?.destroy(),this._monitorState=null,this._stateUnsub?.(),this._stateUnsub=null,this._resizeObserver?.disconnect(),this._resizeObserver=null,this._previousNodeStatuses.clear(),super.disconnectedCallback()}async _initMonitor(){if(!this.rpcClient||!this.graphId||!this._monitorState)return;let t=[],e=[];try{const s=await this.rpcClient.call("graph.load",{id:this.graphId});if(s?.nodes?.length){const r=s.nodes.map(a=>({id:a.id??a.nodeId,task:a.task??"",agentId:a.agentId??a.agent,dependsOn:a.dependsOn??[],maxSteps:a.maxSteps,timeoutMs:a.timeoutMs,barrierMode:a.barrierMode,modelId:a.modelId??a.model,position:a.position??{x:0,y:0}})),i=s.edges&&s.edges.length>0?s.edges:r.flatMap(a=>a.dependsOn.map(p=>({id:`${p}->${a.id}`,source:p,target:a.id})));if(r.length>0&&r.every(a=>a.position.x===0&&a.position.y===0)){const a=nt(r,i);for(const p of r){const x=a.positions.get(p.id);x&&(p.position=x)}}t=r,e=i}}catch{}if(t.length===0)try{const s=await this.rpcClient.call("graph.status",{graphId:this.graphId}),r=s.executionOrder.map(a=>({id:a,task:a,dependsOn:[],position:{x:0,y:0}})),i=[];if(r.length>1)for(let a=1;a<s.executionOrder.length;a++)i.push({id:`${s.executionOrder[a-1]}->${s.executionOrder[a]}`,source:s.executionOrder[a-1],target:s.executionOrder[a]});const o=nt(r,i);t=r.map(a=>{const p=o.positions.get(a.id);return p?{...a,position:p}:a}),e=i}catch{t=[],e=[]}t.length>0&&(this._monitorState.startPolling(this.rpcClient,this.graphId,t,e),setTimeout(()=>{t.length>0&&(this._viewport=mt(t,this._containerWidth||800,this._containerHeight||600))},200),this._wireSSE())}_wireSSE(){for(const r of this._sseUnsubs)r();if(this._sseUnsubs=[],!this.eventDispatcher||!this._monitorState)return;const t=["graph:started","graph:node_updated","graph:completed"];for(const r of t)this._sseUnsubs.push(this.eventDispatcher.addEventListener(r,i=>{i.graphId===this.graphId&&this._monitorState?.applyEvent(r,i)}));this.eventDispatcher.connected&&this._monitorState.suspendPolling();let e=this.eventDispatcher.connected;const s=setInterval(()=>{if(!this.eventDispatcher||!this._monitorState)return;const r=this.eventDispatcher.connected;r&&!e?(this._monitorState.resumePolling(),setTimeout(()=>{this._monitorState?.suspendPolling()},500)):!r&&e&&this._monitorState.resumePolling(),e=r},3e3);this._sseUnsubs.push(()=>clearInterval(s))}get _breadcrumbs(){return[{label:"Pipelines",route:"pipelines"},{label:this.graphId||"Monitor"}]}get _nodeStatuses(){const t=new Map;if(!this._snapshot)return t;for(const e of this._snapshot.nodes)t.set(e.id,e.status);return t}get _edgeStatuses(){const t=new Map;if(!this._snapshot)return t;const e=this._nodeStatuses;for(const s of this._snapshot.edges){const r=e.get(s.source)??"",i=e.get(s.target)??"";r==="completed"&&i==="completed"?t.set(s.id,"completed"):r==="running"||i==="running"?t.set(s.id,"running"):r==="failed"||i==="failed"?t.set(s.id,"failed"):(r==="skipped"||i==="skipped")&&t.set(s.id,"skipped")}return t}get _selectedNode(){return this._snapshot?.selectedNodeId?this._snapshot.nodes.find(t=>t.id===this._snapshot.selectedNodeId)??null:null}get _canvasNodes(){return this._snapshot?this._snapshot.nodes.map(t=>({id:t.id,task:t.task,agentId:t.agentId,dependsOn:t.dependsOn,position:t.position})):[]}_announceNodeChanges(t){const e=[];for(const s of t)if(this._previousNodeStatuses.get(s.id)!==s.status)switch(s.status){case"running":e.push(`Node ${s.id} started executing`);break;case"completed":e.push(`Node ${s.id} completed successfully`);break;case"failed":e.push(`Node ${s.id} failed`);break}this._previousNodeStatuses.clear();for(const s of t)this._previousNodeStatuses.set(s.id,s.status);e.length>0&&(this._liveAnnouncement=e.join(". "))}_onNodeInspect(t){this._monitorState?.selectNode(t.detail.nodeId)}_onCanvasClick(){this._monitorState?.selectNode(null)}_onViewportChange(t){this._viewport=t.detail}_onMinimapViewportChange(t){this._viewport=t.detail}_onCancelRequest(){this._showCancelConfirm=!0}async _onCancelConfirm(){if(this._showCancelConfirm=!1,!!this.rpcClient)try{await this.rpcClient.call("graph.cancel",{graphId:this.graphId}),Q.show("Pipeline cancelled","warning")}catch(t){Q.show(`Cancel failed: ${t instanceof Error?t.message:String(t)}`,"error")}}async _onSteer(t){if(this.rpcClient)try{await this.rpcClient.call("subagent.steer",{target:t.detail.runId,message:t.detail.message}),Q.show("Steer message sent","success")}catch(e){Q.show(`Steer failed: ${e instanceof Error?e.message:String(e)}`,"error")}}_onDetailClose(){this._monitorState?.selectNode(null)}_onViewOutputs(){this.graphId&&(window.location.hash=`#/pipelines/history/${this.graphId}`)}render(){const t=this._snapshot;return l`
-      <ic-breadcrumb .items=${this._breadcrumbs}
-        @navigate=${e=>this.dispatchEvent(new CustomEvent("navigate",{detail:e.detail,bubbles:!0,composed:!0}))}
-      ></ic-breadcrumb>
-
-      ${this._renderMobileSummary(t)}
-
-      <div class="monitor-container">
-        ${t?.error&&!t.loading?l`
-              <div class="error-banner">
-                <span>${t.error}</span>
-                <button @click=${()=>this._initMonitor()}>Retry</button>
-              </div>
-            `:h}
-
-        ${!t||t.loading?l`<div class="loading-container">Loading execution data...</div>`:l`
-              <ic-monitor-status-bar
-                .graphStatus=${t.graphStatus}
-                ?isTerminal=${t.isTerminal}
-                .elapsedMs=${t.elapsedMs}
-                .stats=${t.stats}
-                @cancel=${this._onCancelRequest}
-                @view-outputs=${this._onViewOutputs}
-              ></ic-monitor-status-bar>
-
-              <div class="monitor-body">
-                <div class="canvas-area">
-                  <ic-graph-canvas
-                    read-only
-                    .viewport=${this._viewport}
-                    .nodes=${this._canvasNodes}
-                    .edges=${t.edges}
-                    .selectedNodeIds=${new Set}
-                    .selectedEdgeId=${null}
-                    .nodeStatuses=${this._nodeStatuses}
-                    .edgeStatuses=${this._edgeStatuses}
-                    .highlightNodeIds=${[]}
-                    @viewport-change=${this._onViewportChange}
-                    @node-inspect=${this._onNodeInspect}
-                    @canvas-click=${this._onCanvasClick}
-                  ></ic-graph-canvas>
-
-                  <div class="minimap-container">
-                    <ic-graph-minimap
-                      .nodes=${this._canvasNodes.map(e=>({id:e.id,position:e.position,status:this._nodeStatuses.get(e.id)}))}
-                      .viewport=${this._viewport}
-                      .containerWidth=${this._containerWidth}
-                      .containerHeight=${this._containerHeight}
-                      @viewport-change=${this._onMinimapViewportChange}
-                    ></ic-graph-minimap>
-                  </div>
-                </div>
-
-                ${this._selectedNode?l`
-                      <ic-node-detail-panel
-                        .node=${this._selectedNode}
-                        .allNodes=${t.nodes}
-                        @close=${this._onDetailClose}
-                        @steer=${this._onSteer}
-                      ></ic-node-detail-panel>
-                    `:h}
-              </div>
-
-              <ic-execution-timeline
-                .nodes=${t.nodes}
-                .executionOrder=${t.executionOrder}
-                .elapsedMs=${t.elapsedMs}
-                .selectedNodeId=${t.selectedNodeId}
-                @node-inspect=${this._onNodeInspect}
-              ></ic-execution-timeline>
-            `}
-      </div>
-
-      <!-- A11Y-03: ARIA live region for execution event announcements -->
-      <div class="sr-only" role="status" aria-live="polite" aria-atomic="true">
-        ${this._liveAnnouncement}
-      </div>
-
-      <!-- Cancel confirmation dialog -->
-      <ic-confirm-dialog
-        ?open=${this._showCancelConfirm}
-        title="Cancel Pipeline"
-        message="Are you sure you want to cancel this pipeline execution? Running nodes will be terminated."
-        variant="danger"
-        confirmLabel="Cancel Pipeline"
-        @confirm=${this._onCancelConfirm}
-        @cancel=${()=>{this._showCancelConfirm=!1}}
-      ></ic-confirm-dialog>
+    `]}_computeBounds(){if(!this.nodes.length)return{minX:0,minY:0,maxX:400,maxY:300,graphW:400,graphH:300};let e=1/0,t=1/0,n=-1/0,r=-1/0;for(let i of this.nodes)e=Math.min(e,i.position.x),t=Math.min(t,i.position.y),n=Math.max(n,i.position.x+200),r=Math.max(r,i.position.y+80);return e-=40,t-=40,n+=40,r+=40,{minX:e,minY:t,maxX:n,maxY:r,graphW:n-e,graphH:r-t}}_computeScale(e,t){let n=A-M*2,r=j-M*2;return Math.min(n/e,r/t,1)}render(){let e=this._computeBounds(),n=this._computeScale(e.graphW,e.graphH),r=e.graphW*n,a=e.graphH*n,o=(A-r)/2,s=(j-a)/2,c=this.nodes.map(t=>i`<rect x="${o+(t.position.x-e.minX)*n}" y="${s+(t.position.y-e.minY)*n}" width="${Math.max(200*n,N)}" height="${Math.max(80*n,P)}" fill="${F[t.status??`pending`]??F.pending}" rx="1" />`),l=this.viewport,d=-l.x/l.scale,f=-l.y/l.scale,p=this.containerWidth/l.scale,m=this.containerHeight/l.scale,h=o+(d-e.minX)*n,g=s+(f-e.minY)*n,_=p*n,v=m*n,y=_<A*.95||v<j*.95;return t`
+      <svg
+        viewBox="0 0 ${A} ${j}"
+        @pointerdown=${this._onPointerDown}
+        @pointermove=${this._onPointerMove}
+        @pointerup=${this._onPointerUp}
+        @pointercancel=${this._onPointerUp}
+      >
+        <!-- Node dots -->
+        ${c}
 
-      <!-- View Outputs navigates to history detail page -->
-    `}_renderMobileSummary(t){if(!t)return l`
-        <div class="mobile-summary">
-          <h2>Pipeline Monitor</h2>
-          <p>Loading...</p>
-        </div>
-      `;const e={pending:"#6b7280",ready:"#a78bfa",running:"#06b6d4",completed:"#22c55e",failed:"#ef4444",skipped:"#9ca3af"};return l`
-      <div class="mobile-summary">
-        <h2>Pipeline: ${t.graphId}</h2>
-        <p>Status: ${t.graphStatus} | ${t.stats.completed}/${t.stats.total} complete</p>
-        <div class="node-list">
-          ${t.nodes.map(s=>l`
-            <div class="node-item">
-              <span class="status-dot" style="background: ${e[s.status]??"#6b7280"}"></span>
-              <span>${s.id}: ${s.status}</span>
-            </div>
-          `)}
-        </div>
-      </div>
-    `}};O.styles=[F,ht,B`
+        <!-- Viewport rectangle -->
+        ${y?i`
+            <rect class="viewport-fill" x="${h}" y="${g}" width="${_}" height="${v}" />
+            <rect
+              class="viewport-rect ${this._dragging?`dragging`:``}"
+              x="${h}" y="${g}" width="${_}" height="${v}"
+            />
+          `:u}
+      </svg>
+    `}};l([c({attribute:!1})],I.prototype,`nodes`,void 0),l([c({attribute:!1})],I.prototype,`viewport`,void 0),l([c({type:Number})],I.prototype,`containerWidth`,void 0),l([c({type:Number})],I.prototype,`containerHeight`,void 0),l([o()],I.prototype,`_dragging`,void 0),I=l([e(`ic-graph-minimap`)],I);var L=class extends r{constructor(...e){super(...e),this.rpcClient=null,this.graphId=``,this.eventDispatcher=null,this._snapshot=null,this._viewport={x:0,y:0,scale:1},this._showCancelConfirm=!1,this._liveAnnouncement=``,this._monitorState=null,this._stateUnsub=null,this._sseUnsubs=[],this._previousNodeStatuses=new Map,this._containerWidth=800,this._containerHeight=600,this._resizeObserver=null}static{this.styles=[s,a,n`
     :host { display: block; height: 100%; }
 
     .monitor-container {
@@ -969,4 +861,112 @@ import{s as F,i as B,n as g,a as G,b as l,t as q,f as ht,r as P,A as h,w as H,I
         flex-shrink: 0;
       }
     }
-  `];E([g({attribute:!1})],O.prototype,"rpcClient",2);E([g()],O.prototype,"graphId",2);E([g({attribute:!1})],O.prototype,"eventDispatcher",2);E([P()],O.prototype,"_snapshot",2);E([P()],O.prototype,"_viewport",2);E([P()],O.prototype,"_showCancelConfirm",2);E([P()],O.prototype,"_liveAnnouncement",2);O=E([q("ic-pipeline-monitor")],O);export{O as IcPipelineMonitor};
+  `]}connectedCallback(){super.connectedCallback(),this._monitorState=g(),this._stateUnsub=this._monitorState.subscribe(()=>{let e=this._monitorState.getSnapshot();this._snapshot=e,this._announceNodeChanges(e.nodes)}),this._initMonitor()}firstUpdated(){let e=this.renderRoot.querySelector(`.canvas-area`);e&&(this._resizeObserver=new ResizeObserver(e=>{for(let t of e)this._containerWidth=t.contentRect.width,this._containerHeight=t.contentRect.height}),this._resizeObserver.observe(e))}disconnectedCallback(){for(let e of this._sseUnsubs)e();this._sseUnsubs=[],this._monitorState?.destroy(),this._monitorState=null,this._stateUnsub?.(),this._stateUnsub=null,this._resizeObserver?.disconnect(),this._resizeObserver=null,this._previousNodeStatuses.clear(),super.disconnectedCallback()}async _initMonitor(){if(!this.rpcClient||!this.graphId||!this._monitorState)return;let e=[],t=[];try{let n=await this.rpcClient.call(`graph.load`,{id:this.graphId});if(n?.nodes?.length){let r=n.nodes.map(e=>({id:e.id??e.nodeId,task:e.task??``,agentId:e.agentId??e.agent,dependsOn:e.dependsOn??[],maxSteps:e.maxSteps,timeoutMs:e.timeoutMs,barrierMode:e.barrierMode,modelId:e.modelId??e.model,position:e.position??{x:0,y:0}})),i=n.edges&&n.edges.length>0?n.edges:r.flatMap(e=>e.dependsOn.map(t=>({id:`${t}->${e.id}`,source:t,target:e.id})));if(r.length>0&&r.every(e=>e.position.x===0&&e.position.y===0)){let e=p(r,i);for(let t of r){let n=e.positions.get(t.id);n&&(t.position=n)}}e=r,t=i}}catch{}if(e.length===0)try{let n=await this.rpcClient.call(`graph.status`,{graphId:this.graphId}),r=n.executionOrder.map(e=>({id:e,task:e,dependsOn:[],position:{x:0,y:0}})),i=[];if(r.length>1)for(let e=1;e<n.executionOrder.length;e++)i.push({id:`${n.executionOrder[e-1]}->${n.executionOrder[e]}`,source:n.executionOrder[e-1],target:n.executionOrder[e]});let a=p(r,i);e=r.map(e=>{let t=a.positions.get(e.id);return t?{...e,position:t}:e}),t=i}catch{e=[],t=[]}e.length>0&&(this._monitorState.startPolling(this.rpcClient,this.graphId,e,t),setTimeout(()=>{e.length>0&&(this._viewport=f(e,this._containerWidth||800,this._containerHeight||600))},200),this._wireSSE())}_wireSSE(){for(let e of this._sseUnsubs)e();if(this._sseUnsubs=[],!this.eventDispatcher||!this._monitorState)return;for(let e of[`graph:started`,`graph:node_updated`,`graph:completed`])this._sseUnsubs.push(this.eventDispatcher.addEventListener(e,t=>{t.graphId===this.graphId&&this._monitorState?.applyEvent(e,t)}));this.eventDispatcher.connected&&this._monitorState.suspendPolling();let e=this.eventDispatcher.connected,t=setInterval(()=>{if(!this.eventDispatcher||!this._monitorState)return;let t=this.eventDispatcher.connected;t&&!e?(this._monitorState.resumePolling(),setTimeout(()=>{this._monitorState?.suspendPolling()},500)):!t&&e&&this._monitorState.resumePolling(),e=t},3e3);this._sseUnsubs.push(()=>clearInterval(t))}get _breadcrumbs(){return[{label:`Pipelines`,route:`pipelines`},{label:this.graphId||`Monitor`}]}get _nodeStatuses(){let e=new Map;if(!this._snapshot)return e;for(let t of this._snapshot.nodes)e.set(t.id,t.status);return e}get _edgeStatuses(){let e=new Map;if(!this._snapshot)return e;let t=this._nodeStatuses;for(let n of this._snapshot.edges){let r=t.get(n.source)??``,i=t.get(n.target)??``;r===`completed`&&i===`completed`?e.set(n.id,`completed`):r===`running`||i===`running`?e.set(n.id,`running`):r===`failed`||i===`failed`?e.set(n.id,`failed`):(r===`skipped`||i===`skipped`)&&e.set(n.id,`skipped`)}return e}get _selectedNode(){return this._snapshot?.selectedNodeId?this._snapshot.nodes.find(e=>e.id===this._snapshot.selectedNodeId)??null:null}get _canvasNodes(){return this._snapshot?this._snapshot.nodes.map(e=>({id:e.id,task:e.task,agentId:e.agentId,dependsOn:e.dependsOn,position:e.position})):[]}_announceNodeChanges(e){let t=[];for(let n of e)if(this._previousNodeStatuses.get(n.id)!==n.status)switch(n.status){case`running`:t.push(`Node ${n.id} started executing`);break;case`completed`:t.push(`Node ${n.id} completed successfully`);break;case`failed`:t.push(`Node ${n.id} failed`);break}this._previousNodeStatuses.clear();for(let t of e)this._previousNodeStatuses.set(t.id,t.status);t.length>0&&(this._liveAnnouncement=t.join(`. `))}_onNodeInspect(e){this._monitorState?.selectNode(e.detail.nodeId)}_onCanvasClick(){this._monitorState?.selectNode(null)}_onViewportChange(e){this._viewport=e.detail}_onMinimapViewportChange(e){this._viewport=e.detail}_onCancelRequest(){this._showCancelConfirm=!0}async _onCancelConfirm(){if(this._showCancelConfirm=!1,this.rpcClient)try{await this.rpcClient.call(`graph.cancel`,{graphId:this.graphId}),d.show(`Pipeline cancelled`,`warning`)}catch(e){d.show(`Cancel failed: ${e instanceof Error?e.message:String(e)}`,`error`)}}async _onSteer(e){if(this.rpcClient)try{await this.rpcClient.call(`subagent.steer`,{target:e.detail.runId,message:e.detail.message}),d.show(`Steer message sent`,`success`)}catch(e){d.show(`Steer failed: ${e instanceof Error?e.message:String(e)}`,`error`)}}_onDetailClose(){this._monitorState?.selectNode(null)}_onViewOutputs(){this.graphId&&(window.location.hash=`#/pipelines/history/${this.graphId}`)}render(){let e=this._snapshot;return t`
+      <ic-breadcrumb .items=${this._breadcrumbs}
+        @navigate=${e=>this.dispatchEvent(new CustomEvent(`navigate`,{detail:e.detail,bubbles:!0,composed:!0}))}
+      ></ic-breadcrumb>
+
+      ${this._renderMobileSummary(e)}
+
+      <div class="monitor-container">
+        ${e?.error&&!e.loading?t`
+              <div class="error-banner">
+                <span>${e.error}</span>
+                <button @click=${()=>this._initMonitor()}>Retry</button>
+              </div>
+            `:u}
+
+        ${!e||e.loading?t`<div class="loading-container">Loading execution data...</div>`:t`
+              <ic-monitor-status-bar
+                .graphStatus=${e.graphStatus}
+                ?isTerminal=${e.isTerminal}
+                .elapsedMs=${e.elapsedMs}
+                .stats=${e.stats}
+                @cancel=${this._onCancelRequest}
+                @view-outputs=${this._onViewOutputs}
+              ></ic-monitor-status-bar>
+
+              <div class="monitor-body">
+                <div class="canvas-area">
+                  <ic-graph-canvas
+                    read-only
+                    .viewport=${this._viewport}
+                    .nodes=${this._canvasNodes}
+                    .edges=${e.edges}
+                    .selectedNodeIds=${new Set}
+                    .selectedEdgeId=${null}
+                    .nodeStatuses=${this._nodeStatuses}
+                    .edgeStatuses=${this._edgeStatuses}
+                    .highlightNodeIds=${[]}
+                    @viewport-change=${this._onViewportChange}
+                    @node-inspect=${this._onNodeInspect}
+                    @canvas-click=${this._onCanvasClick}
+                  ></ic-graph-canvas>
+
+                  <div class="minimap-container">
+                    <ic-graph-minimap
+                      .nodes=${this._canvasNodes.map(e=>({id:e.id,position:e.position,status:this._nodeStatuses.get(e.id)}))}
+                      .viewport=${this._viewport}
+                      .containerWidth=${this._containerWidth}
+                      .containerHeight=${this._containerHeight}
+                      @viewport-change=${this._onMinimapViewportChange}
+                    ></ic-graph-minimap>
+                  </div>
+                </div>
+
+                ${this._selectedNode?t`
+                      <ic-node-detail-panel
+                        .node=${this._selectedNode}
+                        .allNodes=${e.nodes}
+                        @close=${this._onDetailClose}
+                        @steer=${this._onSteer}
+                      ></ic-node-detail-panel>
+                    `:u}
+              </div>
+
+              <ic-execution-timeline
+                .nodes=${e.nodes}
+                .executionOrder=${e.executionOrder}
+                .elapsedMs=${e.elapsedMs}
+                .selectedNodeId=${e.selectedNodeId}
+                @node-inspect=${this._onNodeInspect}
+              ></ic-execution-timeline>
+            `}
+      </div>
+
+      <!-- A11Y-03: ARIA live region for execution event announcements -->
+      <div class="sr-only" role="status" aria-live="polite" aria-atomic="true">
+        ${this._liveAnnouncement}
+      </div>
+
+      <!-- Cancel confirmation dialog -->
+      <ic-confirm-dialog
+        ?open=${this._showCancelConfirm}
+        title="Cancel Pipeline"
+        message="Are you sure you want to cancel this pipeline execution? Running nodes will be terminated."
+        variant="danger"
+        confirmLabel="Cancel Pipeline"
+        @confirm=${this._onCancelConfirm}
+        @cancel=${()=>{this._showCancelConfirm=!1}}
+      ></ic-confirm-dialog>
+
+      <!-- View Outputs navigates to history detail page -->
+    `}_renderMobileSummary(e){if(!e)return t`
+        <div class="mobile-summary">
+          <h2>Pipeline Monitor</h2>
+          <p>Loading...</p>
+        </div>
+      `;let n={pending:`#6b7280`,ready:`#a78bfa`,running:`#06b6d4`,completed:`#22c55e`,failed:`#ef4444`,skipped:`#9ca3af`};return t`
+      <div class="mobile-summary">
+        <h2>Pipeline: ${e.graphId}</h2>
+        <p>Status: ${e.graphStatus} | ${e.stats.completed}/${e.stats.total} complete</p>
+        <div class="node-list">
+          ${e.nodes.map(e=>t`
+            <div class="node-item">
+              <span class="status-dot" style="background: ${n[e.status]??`#6b7280`}"></span>
+              <span>${e.id}: ${e.status}</span>
+            </div>
+          `)}
+        </div>
+      </div>
+    `}};l([c({attribute:!1})],L.prototype,`rpcClient`,void 0),l([c()],L.prototype,`graphId`,void 0),l([c({attribute:!1})],L.prototype,`eventDispatcher`,void 0),l([o()],L.prototype,`_snapshot`,void 0),l([o()],L.prototype,`_viewport`,void 0),l([o()],L.prototype,`_showCancelConfirm`,void 0),l([o()],L.prototype,`_liveAnnouncement`,void 0),L=l([e(`ic-pipeline-monitor`)],L);export{L as IcPipelineMonitor};