comisai 1.0.42 → 1.0.45

package/node_modules/@comis/web/dist/assets/pipeline-monitor-5Cpf53xw.js

@@ -1,972 +0,0 @@
-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,o as f,r as p,s as m,t as h}from"./system-time-B0nBw4nV.js";import{a as g}from"./index-D_ZV_sV5.js";import"./ic-breadcrumb-1qP0UJ5v.js";import"./ic-confirm-dialog-Wdt0QSRg.js";import{n as _,t as v}from"./ic-graph-canvas-BoTtvCKw.js";var y=2e3,b=1e3;function x(){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,p=null,m=null,g=null,_=[],v=null,x=new Set;function S(){for(let e of x)e()}function C(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 w(i){e=i.graphId,t=i.status,n=i.isTerminal,a=i.executionOrder,o=i.stats,r=C(_,i.nodes),l=!1,u=null,g===null&&i.status===`running`&&(g=d(),s=0,k()),n&&(D(),O()),S()}function T(e){u=e instanceof Error?e.message:String(e),l=!1,S()}async function E(e,t){try{w(await e.call(`graph.status`,{graphId:t}))}catch(e){T(e)}}function D(){p!==null&&(h(p),p=null)}function O(){m!==null&&(h(m),m=null)}function k(){O(),m=f(()=>{g!==null&&(s=d()-g,S())},b)}function A(){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 x.add(e),()=>{x.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,S()},startPolling(t,r,a,o){D(),O(),v=t,e=r,_=a,i=o,g=null,n=!1,E(t,r),p=f(()=>{E(t,r)},y)},stopPolling(){D(),O()},destroy(){D(),O(),x.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},A(),S()}}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},D(),O(),l=!1,u=null,S()}else if(i===`graph:started`){if(a.graphId!==e)return;g===null&&(g=d(),s=0,k()),S()}},suspendPolling(){D()},resumePolling(){n||v&&(E(v,e),D(),p=f(()=>{E(v,e)},y))}}}function S(e,t){let n={hostConnected(){},hostDisconnected(){},loadGraph(e){return t.call(`graph.load`,{id:e})},getGraphStatus(e){return t.call(`graph.status`,{graphId:e})},async cancelGraph(e){await t.call(`graph.cancel`,{graphId:e})},async steerSubagent(e){await t.call(`subagent.steer`,e)}};return e.addController(n),n}var C=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;
-      }
-
-      .bar {
-        display: flex;
-        align-items: center;
-        gap: 1rem;
-        padding: var(--ic-space-sm) var(--ic-space-md);
-        background: var(--ic-surface);
-        border-bottom: 1px solid var(--ic-border);
-        font-size: var(--ic-text-sm);
-        color: var(--ic-text);
-        flex-wrap: wrap;
-      }
-
-      /* Status badge pills */
-      .status-badge {
-        display: inline-flex;
-        align-items: center;
-        padding: 2px 10px;
-        border-radius: 9999px;
-        font-weight: 600;
-        font-size: var(--ic-text-xs);
-        text-transform: capitalize;
-        line-height: 1.4;
-      }
-      .status-badge--running {
-        background: color-mix(in srgb, var(--ic-info, #06b6d4) 20%, transparent);
-        color: var(--ic-info, #06b6d4);
-      }
-      .status-badge--completed {
-        background: color-mix(in srgb, var(--ic-success, #22c55e) 20%, transparent);
-        color: var(--ic-success, #22c55e);
-      }
-      .status-badge--failed {
-        background: color-mix(in srgb, var(--ic-error, #ef4444) 20%, transparent);
-        color: var(--ic-error, #ef4444);
-      }
-      .status-badge--cancelled {
-        background: color-mix(in srgb, var(--ic-warning, #eab308) 20%, transparent);
-        color: var(--ic-warning, #eab308);
-      }
-
-      .elapsed,
-      .progress,
-      .tokens {
-        font-variant-numeric: tabular-nums;
-        color: var(--ic-text-muted);
-      }
-
-      .cancel-btn {
-        margin-left: auto;
-        padding: 4px 12px;
-        border-radius: var(--ic-radius-sm);
-        border: 1px solid var(--ic-error, #ef4444);
-        background: color-mix(in srgb, var(--ic-error) 15%, transparent);
-        color: var(--ic-error, #ef4444);
-        font-size: var(--ic-text-xs);
-        font-weight: 600;
-        cursor: pointer;
-        transition: background var(--ic-transition);
-      }
-      .cancel-btn:hover {
-        background: color-mix(in srgb, var(--ic-error) 25%, transparent);
-      }
-      .cancel-btn:focus-visible {
-        outline: 2px solid var(--ic-accent);
-        outline-offset: 2px;
-      }
-
-      .outputs-btn {
-        margin-left: auto;
-        padding: 4px 12px;
-        border: 1px solid color-mix(in srgb, var(--ic-accent, #3b82f6) 30%, transparent);
-        border-radius: var(--ic-radius-sm);
-        background: color-mix(in srgb, var(--ic-accent, #3b82f6) 10%, transparent);
-        color: var(--ic-accent, #3b82f6);
-        font-size: var(--ic-text-xs);
-        font-weight: 600;
-        cursor: pointer;
-        transition: background var(--ic-transition);
-      }
-      .outputs-btn:hover {
-        background: color-mix(in srgb, var(--ic-accent, #3b82f6) 20%, transparent);
-      }
-      .outputs-btn:focus-visible {
-        outline: 2px solid var(--ic-accent);
-        outline-offset: 2px;
-      }
-    `]}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>
-    `}_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()],C.prototype,`graphStatus`,void 0),l([c({type:Boolean})],C.prototype,`isTerminal`,void 0),l([c({type:Number})],C.prototype,`elapsedMs`,void 0),l([c({attribute:!1})],C.prototype,`stats`,void 0),C=l([e(`ic-monitor-status-bar`)],C);var w={pending:`#6b7280`,ready:`#a78bfa`,running:`#06b6d4`,completed:`#22c55e`,failed:`#ef4444`,skipped:`#9ca3af`};function T(e){return e==null?`--`:p(e).toLocaleTimeString()}function E(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 D=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;
-        border-left: 1px solid var(--ic-border);
-        overflow-y: auto;
-        background: var(--ic-surface);
-        padding: 16px;
-      }
-
-      .header {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        margin-bottom: var(--ic-space-md, 12px);
-      }
-
-      .header h3 {
-        margin: 0;
-        font-size: var(--ic-text-sm, 14px);
-        font-weight: 600;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        flex: 1;
-        min-width: 0;
-      }
-
-      .close-btn {
-        background: none;
-        border: none;
-        color: var(--ic-text-muted, #9ca3af);
-        cursor: pointer;
-        font-size: 18px;
-        padding: 4px;
-        line-height: 1;
-        flex-shrink: 0;
-      }
-      .close-btn:hover {
-        color: var(--ic-text);
-      }
-
-      .section-header {
-        font-size: var(--ic-text-xs, 11px);
-        color: var(--ic-text-dim, #6b7280);
-        text-transform: uppercase;
-        margin-top: var(--ic-space-md, 12px);
-        margin-bottom: var(--ic-space-xs, 4px);
-        letter-spacing: 0.05em;
-        font-weight: 600;
-      }
-
-      .status-badge {
-        display: inline-block;
-        padding: 2px 8px;
-        border-radius: 9999px;
-        font-size: var(--ic-text-xs, 11px);
-        font-weight: 600;
-        color: #fff;
-        text-transform: uppercase;
-        letter-spacing: 0.03em;
-      }
-
-      .retry-badge {
-        display: inline-block;
-        padding: 2px 6px;
-        margin-left: 6px;
-        border-radius: 9999px;
-        font-size: 10px;
-        font-weight: 600;
-        color: #f97316;
-        background: rgba(249, 115, 22, 0.15);
-        text-transform: uppercase;
-        letter-spacing: 0.03em;
-        vertical-align: middle;
-      }
-
-      .field-row {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        padding: 3px 0;
-        font-size: var(--ic-text-xs, 11px);
-      }
-
-      .field-label {
-        color: var(--ic-text-dim, #6b7280);
-      }
-
-      .field-value {
-        color: var(--ic-text);
-        max-width: 180px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-
-      .field-value.mono {
-        font-family: var(--ic-font-mono, monospace);
-      }
-
-      .task-box {
-        background: var(--ic-surface-2, #1e1e2e);
-        border: 1px solid var(--ic-border);
-        border-radius: var(--ic-radius-sm, 4px);
-        padding: 8px;
-        font-size: var(--ic-text-xs, 11px);
-        max-height: 120px;
-        overflow-y: auto;
-        word-wrap: break-word;
-        white-space: pre-wrap;
-        line-height: 1.5;
-      }
-
-      .dep-row {
-        display: flex;
-        align-items: center;
-        gap: 6px;
-        padding: 2px 0;
-        font-size: var(--ic-text-xs, 11px);
-      }
-
-      .dep-dot {
-        width: 8px;
-        height: 8px;
-        border-radius: 50%;
-        flex-shrink: 0;
-      }
-
-      .dep-label {
-        font-family: var(--ic-font-mono, monospace);
-      }
-
-      pre.output-block {
-        font-family: var(--ic-font-mono, monospace);
-        font-size: var(--ic-text-xs, 11px);
-        white-space: pre-wrap;
-        word-break: break-all;
-        background: var(--ic-surface-2, #1e1e2e);
-        border: 1px solid var(--ic-border);
-        border-radius: var(--ic-radius-sm, 4px);
-        padding: 8px;
-        margin: 4px 0;
-        max-height: 200px;
-        overflow-y: auto;
-        line-height: 1.4;
-      }
-
-      pre.error-block {
-        font-family: var(--ic-font-mono, monospace);
-        font-size: var(--ic-text-xs, 11px);
-        white-space: pre-wrap;
-        word-break: break-all;
-        background: var(--ic-surface-2, #1e1e2e);
-        border: 1px solid var(--ic-error, #ef4444);
-        border-radius: var(--ic-radius-sm, 4px);
-        padding: 8px;
-        margin: 4px 0;
-        max-height: 200px;
-        overflow-y: auto;
-        color: var(--ic-error, #ef4444);
-        line-height: 1.4;
-      }
-
-      .truncated-note {
-        font-size: 10px;
-        color: var(--ic-text-dim, #6b7280);
-        font-style: italic;
-        margin-top: 2px;
-      }
-
-      .view-full-btn,
-      .steer-btn,
-      .send-btn,
-      .copy-btn,
-      .modal-close-btn {
-        background: var(--ic-surface-2, #1e1e2e);
-        border: 1px solid var(--ic-border);
-        color: var(--ic-text);
-        padding: 4px 12px;
-        border-radius: var(--ic-radius-sm, 4px);
-        cursor: pointer;
-        font-size: var(--ic-text-xs, 11px);
-        margin-top: 4px;
-      }
-      .view-full-btn:hover,
-      .steer-btn:hover,
-      .send-btn:hover,
-      .copy-btn:hover,
-      .modal-close-btn:hover {
-        background: var(--ic-border);
-      }
-
-      .steer-btn {
-        background: var(--ic-accent, #3b82f6);
-        border-color: var(--ic-accent, #3b82f6);
-        color: #fff;
-      }
-      .steer-btn:hover {
-        opacity: 0.9;
-        background: var(--ic-accent, #3b82f6);
-      }
-
-      .send-btn {
-        background: var(--ic-accent, #3b82f6);
-        border-color: var(--ic-accent, #3b82f6);
-        color: #fff;
-      }
-      .send-btn:hover {
-        opacity: 0.9;
-        background: var(--ic-accent, #3b82f6);
-      }
-
-      .steer-area {
-        margin-top: 8px;
-      }
-
-      .steer-area textarea {
-        width: 100%;
-        min-height: 60px;
-        background: var(--ic-surface-2, #1e1e2e);
-        border: 1px solid var(--ic-border);
-        border-radius: var(--ic-radius-sm, 4px);
-        color: var(--ic-text);
-        padding: 8px;
-        font-family: var(--ic-font-sans);
-        font-size: var(--ic-text-xs, 11px);
-        resize: vertical;
-      }
-
-      .steer-area .send-row {
-        display: flex;
-        justify-content: flex-end;
-        margin-top: 4px;
-      }
-
-      /* Modal overlay */
-      .modal-backdrop {
-        position: fixed;
-        inset: 0;
-        background: rgba(0, 0, 0, 0.7);
-        z-index: 100;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
-
-      .modal-content {
-        background: var(--ic-surface, #181825);
-        border: 1px solid var(--ic-border);
-        border-radius: var(--ic-radius-md, 8px);
-        max-width: 640px;
-        width: 90%;
-        max-height: 80vh;
-        display: flex;
-        flex-direction: column;
-        padding: 16px;
-      }
-
-      .modal-header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        margin-bottom: 12px;
-      }
-
-      .modal-header h4 {
-        margin: 0;
-        font-size: var(--ic-text-sm, 14px);
-      }
-
-      .modal-actions {
-        display: flex;
-        gap: 8px;
-      }
-
-      .modal-body {
-        overflow-y: auto;
-        flex: 1;
-        min-height: 0;
-      }
-
-      .modal-body pre {
-        font-family: var(--ic-font-mono, monospace);
-        font-size: var(--ic-text-xs, 11px);
-        white-space: pre-wrap;
-        word-break: break-all;
-        margin: 0;
-        line-height: 1.4;
-      }
-
-      .empty-state {
-        color: var(--ic-text-dim, #6b7280);
-        font-size: var(--ic-text-xs, 11px);
-        font-style: italic;
-        padding: 8px 0;
-      }
-    `]}_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=w[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">${T(e.startedAt)}</span>
-      </div>
-      <div class="field-row">
-        <span class="field-label">Completed</span>
-        <span class="field-value">${T(e.completedAt)}</span>
-      </div>
-      <div class="field-row">
-        <span class="field-label">Duration</span>
-        <span class="field-value">${E(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: ${w[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})],D.prototype,`node`,void 0),l([c({attribute:!1})],D.prototype,`allNodes`,void 0),l([o()],D.prototype,`_showFullOutput`,void 0),l([o()],D.prototype,`_steerMode`,void 0),l([o()],D.prototype,`_steerText`,void 0),D=l([e(`ic-node-detail-panel`)],D);var O=28,k=4,A=80,j=20,M=2,N=200,P={running:`#06b6d4`,completed:`#22c55e`,failed:`#ef4444`,skipped:`#9ca3af`,pending:`#4b5563`,ready:`#a78bfa`},F=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;
-        background: var(--ic-surface);
-        border-top: 1px solid var(--ic-border);
-        overflow-x: auto;
-        overflow-y: auto;
-      }
-
-      svg {
-        display: block;
-      }
-
-      .bar {
-        cursor: pointer;
-      }
-
-      .bar:hover {
-        filter: brightness(1.2);
-      }
-
-      .label-text {
-        font-family: var(--ic-font-mono, monospace);
-        font-size: 10px;
-        fill: var(--ic-text-muted, #9ca3af);
-        dominant-baseline: central;
-      }
-
-      .time-marker {
-        font-size: 9px;
-        fill: var(--ic-text-dim, #6b7280);
-        text-anchor: middle;
-        dominant-baseline: hanging;
-      }
-
-      .time-line {
-        stroke: var(--ic-border, #374151);
-        stroke-width: 0.5;
-        stroke-dasharray: 2 2;
-      }
-
-      .row-bg {
-        fill: var(--ic-surface-2, #1e1e2e);
-        opacity: 0.3;
-      }
-
-      .selected-highlight {
-        stroke: var(--ic-accent, #3b82f6);
-        stroke-width: 2;
-        fill: none;
-      }
-    `]}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=j+n.length*(O+k)+k,c=Math.max(N,600),l=A+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=A+e*1e3*d;return i`
-            <line class="time-line" x1="${t}" y1="${j}" x2="${t}" y2="${s}" />
-            <text class="time-marker" x="${t}" y="2">${e}s</text>
-          `})}
-
-        <!-- Rows -->
-        ${n.map((e,t)=>{let n=j+t*(O+k)+k,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=P[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=P.skipped,g=.5,_=!0);return i`
-            <!-- Alternating row background -->
-            ${t%2==1?i`<rect class="row-bg" x="0" y="${n}" width="${l}" height="${O}" />`:u}
-
-            <!-- Node label -->
-            <text class="label-text" x="4" y="${n+O/2}">
-              ${f}
-            </text>
-
-            <!-- Bar -->
-            ${_?i`
-                <rect
-                  class="bar"
-                  x="${A+p}"
-                  y="${n+4}"
-                  width="${m}"
-                  height="${O-8}"
-                  rx="${M}"
-                  ry="${M}"
-                  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="${A+p-1}"
-                      y="${n+3}"
-                      width="${m+2}"
-                      height="${O-6}"
-                      rx="${M+1}"
-                      ry="${M+1}"
-                    />`:u}
-              `:u}
-          `})}
-      </svg>
-    `}_onBarClick(e){this.dispatchEvent(new CustomEvent(`node-inspect`,{bubbles:!0,composed:!0,detail:{nodeId:e}}))}};l([c({attribute:!1})],F.prototype,`nodes`,void 0),l([c({attribute:!1})],F.prototype,`executionOrder`,void 0),l([c({type:Number})],F.prototype,`elapsedMs`,void 0),l([c()],F.prototype,`selectedNodeId`,void 0),F=l([e(`ic-execution-timeline`)],F);var I=160,L=120,R=8,z=4,B=3,V={pending:`#6b7280`,ready:`#a78bfa`,running:`#06b6d4`,completed:`#22c55e`,failed:`#ef4444`,skipped:`#9ca3af`},H=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*I,this._dragStartMinimapY=(e.clientY-t.top)/t.height*L,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*I,r=(e.clientY-t.top)/t.height*L,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: ${I}px;
-        height: ${L}px;
-        background: var(--ic-surface, #181825);
-        border: 1px solid var(--ic-border);
-        border-radius: var(--ic-radius-md, 8px);
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
-        overflow: hidden;
-        user-select: none;
-        touch-action: none;
-      }
-
-      svg {
-        display: block;
-        width: 100%;
-        height: 100%;
-      }
-
-      .viewport-rect {
-        fill: none;
-        stroke: var(--ic-accent, #3b82f6);
-        stroke-opacity: 0.4;
-        stroke-width: 1.5;
-        cursor: grab;
-      }
-
-      .viewport-rect.dragging {
-        cursor: grabbing;
-        stroke-opacity: 0.7;
-      }
-
-      .viewport-fill {
-        fill: var(--ic-accent, #3b82f6);
-        fill-opacity: 0.05;
-      }
-    `]}_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=I-R*2,r=L-R*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=(I-r)/2,s=(L-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,z)}" height="${Math.max(80*n,B)}" fill="${V[t.status??`pending`]??V.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=_<I*.95||v<L*.95;return t`
-      <svg
-        viewBox="0 0 ${I} ${L}"
-        @pointerdown=${this._onPointerDown}
-        @pointermove=${this._onPointerMove}
-        @pointerup=${this._onPointerUp}
-        @pointercancel=${this._onPointerUp}
-      >
-        <!-- Node dots -->
-        ${c}
-
-        <!-- 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})],H.prototype,`nodes`,void 0),l([c({attribute:!1})],H.prototype,`viewport`,void 0),l([c({type:Number})],H.prototype,`containerWidth`,void 0),l([c({type:Number})],H.prototype,`containerHeight`,void 0),l([o()],H.prototype,`_dragging`,void 0),H=l([e(`ic-graph-minimap`)],H);var U=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,this._controller=null,this._capturedRpcClient=null}static{this.styles=[s,a,n`
-    :host { display: block; height: 100%; }
-
-    .monitor-container {
-      display: flex;
-      flex-direction: column;
-      height: calc(100vh - 120px);
-    }
-
-    .monitor-body {
-      display: flex;
-      flex: 1;
-      overflow: hidden;
-    }
-
-    .canvas-area {
-      flex: 1;
-      position: relative;
-      border: 1px solid var(--ic-border);
-      border-radius: var(--ic-radius-md);
-      overflow: hidden;
-    }
-
-    .minimap-container {
-      position: absolute;
-      bottom: 12px;
-      right: 12px;
-      z-index: 10;
-    }
-
-    .loading-container {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      flex: 1;
-      color: var(--ic-text-muted);
-      font-size: var(--ic-text-sm);
-    }
-
-    .error-banner {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      padding: var(--ic-space-sm) var(--ic-space-md);
-      background: color-mix(in srgb, var(--ic-error) 15%, transparent);
-      border: 1px solid var(--ic-error);
-      border-radius: var(--ic-radius-sm);
-      color: var(--ic-error);
-      font-size: var(--ic-text-sm);
-      margin-bottom: var(--ic-space-sm);
-    }
-
-    .error-banner button {
-      padding: 4px 12px;
-      background: var(--ic-surface-2);
-      border: 1px solid var(--ic-border);
-      border-radius: var(--ic-radius-sm);
-      color: var(--ic-text);
-      font-size: var(--ic-text-xs);
-      cursor: pointer;
-    }
-    .error-banner button:hover {
-      background: var(--ic-border);
-    }
-
-    /* Screen-reader-only text for ARIA live region */
-    .sr-only {
-      position: absolute;
-      width: 1px;
-      height: 1px;
-      padding: 0;
-      margin: -1px;
-      overflow: hidden;
-      clip: rect(0, 0, 0, 0);
-      white-space: nowrap;
-      border: 0;
-    }
-
-    /* Graph outputs modal */
-    .outputs-overlay {
-      position: fixed;
-      inset: 0;
-      background: rgba(0, 0, 0, 0.5);
-      z-index: 100;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    .outputs-modal {
-      background: var(--ic-surface);
-      border: 1px solid var(--ic-border);
-      border-radius: var(--ic-radius-md);
-      width: 600px;
-      max-width: 90vw;
-      max-height: 80vh;
-      display: flex;
-      flex-direction: column;
-    }
-
-    .outputs-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding: 12px 16px;
-      border-bottom: 1px solid var(--ic-border);
-    }
-
-    .outputs-header h3 {
-      margin: 0;
-      font-size: var(--ic-text-base);
-    }
-
-    .outputs-close {
-      border: none;
-      background: none;
-      color: var(--ic-text-muted);
-      cursor: pointer;
-      font-size: var(--ic-text-base);
-      padding: 4px 8px;
-    }
-    .outputs-close:hover {
-      color: var(--ic-text);
-    }
-
-    .outputs-body {
-      padding: 16px;
-      overflow-y: auto;
-      flex: 1;
-    }
-
-    .output-entry {
-      margin-bottom: 16px;
-    }
-    .output-entry:last-child {
-      margin-bottom: 0;
-    }
-
-    .output-node-id {
-      font-weight: 600;
-      font-size: var(--ic-text-sm);
-      color: var(--ic-accent);
-      margin-bottom: 4px;
-    }
-
-    .output-text {
-      margin: 0;
-      padding: 8px;
-      background: var(--ic-bg);
-      border: 1px solid var(--ic-border);
-      border-radius: var(--ic-radius-sm);
-      font-size: var(--ic-text-xs);
-      font-family: var(--ic-font-mono);
-      white-space: pre-wrap;
-      word-break: break-word;
-      max-height: 200px;
-      overflow-y: auto;
-    }
-
-    .outputs-empty {
-      text-align: center;
-      color: var(--ic-text-muted);
-      padding: 24px;
-      font-size: var(--ic-text-sm);
-    }
-
-    /* Mobile responsive: show summary instead of canvas */
-    .mobile-summary { display: none; }
-
-    @media (max-width: 767px) {
-      .monitor-container { display: none; }
-      .mobile-summary {
-        display: block;
-        padding: 1.5rem;
-        color: var(--ic-text-muted);
-        text-align: center;
-      }
-      .mobile-summary h2 {
-        font-size: 1.25rem;
-        font-weight: 600;
-        margin-bottom: 0.5rem;
-      }
-      .mobile-summary .node-list {
-        text-align: left;
-        font-size: var(--ic-text-sm);
-        margin-top: 1rem;
-      }
-      .mobile-summary .node-item {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        padding: 4px 0;
-      }
-      .mobile-summary .status-dot {
-        width: 8px;
-        height: 8px;
-        border-radius: 50%;
-        flex-shrink: 0;
-      }
-    }
-  `]}_ensureController(){return this._controller&&this._capturedRpcClient!==this.rpcClient&&(this.removeController(this._controller),this._controller=null,this._capturedRpcClient=null),!this._controller&&this.rpcClient&&(this._capturedRpcClient=this.rpcClient,this._controller=S(this,this.rpcClient)),this._controller}connectedCallback(){super.connectedCallback(),this._ensureController(),this._monitorState=x(),this._stateUnsub=this._monitorState.subscribe(()=>{let e=this._monitorState.getSnapshot();this._snapshot=e,this._announceNodeChanges(e.nodes)}),this._initMonitor()}updated(e){e.has(`rpcClient`)&&this._ensureController()}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(){let e=this._ensureController();if(!e||!this.rpcClient||!this.graphId||!this._monitorState)return;let t=[],n=[];try{let r=await e.loadGraph(this.graphId);if(r?.nodes?.length){let e=r.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=r.edges&&r.edges.length>0?r.edges:e.flatMap(e=>e.dependsOn.map(t=>({id:`${t}->${e.id}`,source:t,target:e.id})));if(e.length>0&&e.every(e=>e.position.x===0&&e.position.y===0)){let t=v(e,i);for(let n of e){let e=t.positions.get(n.id);e&&(n.position=e)}}t=e,n=i}}catch{}if(t.length===0)try{let r=await e.getGraphStatus(this.graphId),i=r.executionOrder.map(e=>({id:e,task:e,dependsOn:[],position:{x:0,y:0}})),a=[];if(i.length>1)for(let e=1;e<r.executionOrder.length;e++)a.push({id:`${r.executionOrder[e-1]}->${r.executionOrder[e]}`,source:r.executionOrder[e-1],target:r.executionOrder[e]});let o=v(i,a);t=i.map(e=>{let t=o.positions.get(e.id);return t?{...e,position:t}:e}),n=a}catch{t=[],n=[]}t.length>0&&(this._monitorState.startPolling(this.rpcClient,this.graphId,t,n),m(()=>{t.length>0&&(this._viewport=_(t,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=f(()=>{if(!this.eventDispatcher||!this._monitorState)return;let t=this.eventDispatcher.connected;t&&!e?(this._monitorState.resumePolling(),m(()=>{this._monitorState?.suspendPolling()},500)):!t&&e&&this._monitorState.resumePolling(),e=t},3e3);this._sseUnsubs.push(()=>h(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(){this._showCancelConfirm=!1;let e=this._ensureController();if(e)try{await e.cancelGraph(this.graphId),g.show(`Pipeline cancelled`,`warning`)}catch(e){g.show(`Cancel failed: ${e instanceof Error?e.message:String(e)}`,`error`)}}async _onSteer(e){let t=this._ensureController();if(t)try{await t.steerSubagent({target:e.detail.runId,message:e.detail.message}),g.show(`Steer message sent`,`success`)}catch(e){g.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})],U.prototype,`rpcClient`,void 0),l([c()],U.prototype,`graphId`,void 0),l([c({attribute:!1})],U.prototype,`eventDispatcher`,void 0),l([o()],U.prototype,`_snapshot`,void 0),l([o()],U.prototype,`_viewport`,void 0),l([o()],U.prototype,`_showCancelConfirm`,void 0),l([o()],U.prototype,`_liveAnnouncement`,void 0),U=l([e(`ic-pipeline-monitor`)],U);export{U as IcPipelineMonitor};