comisai 1.0.37 → 1.0.41

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

@@ -0,0 +1,972 @@
+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};