comisai 1.0.16 → 1.0.18

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

@@ -0,0 +1,972 @@
+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`
+      :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;
+      }
+    `];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>
+      </div>
+    `}};A.styles=[F,ht,B`
+      :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;
+      }
+    `];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`
+      :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;
+      }
+    `];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}
+
+        <!-- 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}
+      </svg>
+    `}};T.styles=[F,B`
+      :host {
+        display: block;
+        width: ${z}px;
+        height: ${R}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;
+      }
+    `];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>
+
+      <!-- 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`
+    :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;
+      }
+    }
+  `];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};