comisai 1.0.42 → 1.0.45

package/node_modules/@comis/web/dist/assets/pipeline-builder-DwLB9aCL.js

@@ -0,0 +1,1495 @@
+import{S as e,_ as t,d as n,g as r,h as i,m as a,n as o,o as s,p as c,r as l,t as u,y as d}from"./decorate-C2wzL86z.js";import{a as f}from"./index-IIyLteKK.js";import"./ic-breadcrumb-CamOsLdw.js";import"./ic-confirm-dialog-JnoEg4kp.js";import{a as p,i as m,n as h,o as g,r as _,t as v}from"./ic-graph-canvas-Dllu1VH-.js";import{n as y,t as b}from"./extract-variables-pqBMrtGG.js";var x=50,S={label:`Untitled Pipeline`,onFailure:`fail-fast`};function C(){let e=[],t=[],n={...S},r=new Set,i=null,a={..._},o=null,s=!1,c=[],l=[],u=new Set;function d(){for(let e of u)e()}function f(){return structuredClone({nodes:e,edges:t,settings:n})}function p(){c.push(f()),c.length>x&&c.shift(),l=[]}function m(r){e=structuredClone(r.nodes),t=structuredClone(r.edges),n=structuredClone(r.settings)}return{subscribe(e){return u.add(e),()=>{u.delete(e)}},getSnapshot(){return Object.freeze({nodes:[...e],edges:[...t],settings:{...n},selectedNodeIds:new Set(r),selectedEdgeId:i,viewport:{...a},validationResult:o,isDirty:s,canUndo:c.length>0,canRedo:l.length>0})},addNode(t){p(),e.push(t),s=!0,d()},updateNode(t,n){p(),e=e.map(e=>e.id===t?{...e,...n,id:e.id}:e),s=!0,d()},removeNode(n){p(),e=e.filter(e=>e.id!==n),t=t.filter(e=>e.source!==n&&e.target!==n),s=!0,d()},addEdge(e,n){p();let r={id:`${e}->${n}`,source:e,target:n};t.push(r),s=!0,d()},removeEdge(e){p(),t=t.filter(t=>t.id!==e),s=!0,d()},updateSettings(e){p(),n={...n,...e},s=!0,d()},moveNodes(t){p();for(let{nodeId:n,position:r}of t)e=e.map(e=>e.id===n?{...e,position:r}:e);s=!0,d()},selectNode(e,t=!1){i=null,t?(r=new Set(r),r.add(e)):r=new Set([e]),d()},selectAll(){r=new Set(e.map(e=>e.id)),d()},clearSelection(){r=new Set,i=null,d()},selectEdge(e){i=e,r=new Set,d()},clearEdgeSelection(){i=null,d()},setViewport(e){a={...e},d()},setValidation(e){o=e,d()},undo(){c.length!==0&&(l.push(f()),m(c.pop()),s=!0,d())},redo(){l.length!==0&&(c.push(f()),m(l.pop()),s=!0,d())},markClean(){s=!1,d()},reset(){e=[],t=[],n={...S},r=new Set,i=null,a={..._},o=null,s=!1,c=[],l=[],d()}}}function w(e,t,n){if(t===n)return!0;let r=new Map;for(let t of e){let e=r.get(t.source);e||(e=[],r.set(t.source,e)),e.push(t.target)}let i=r.get(t);i||(i=[],r.set(t,i)),i.push(n);let a=new Set,o=[n];for(;o.length>0;){let e=o.pop();if(e===t)return!0;if(a.has(e))continue;a.add(e);let n=r.get(e);if(n)for(let e of n)a.has(e)||o.push(e)}return!1}var T=class extends r{constructor(...e){super(...e),this.settings={label:`Untitled Pipeline`,onFailure:`fail-fast`},this.hasErrors=!1,this.isDirty=!1,this.validateResult=``,this._validating=!1}static{this.styles=[l,e`
+      :host {
+        display: block;
+      }
+
+      .settings-bar {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 8px;
+        align-items: center;
+        padding: 8px 12px;
+        min-height: 48px;
+        background: var(--ic-surface);
+        border-bottom: 1px solid var(--ic-border);
+      }
+
+      .field {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+      }
+
+      .field label {
+        font-size: var(--ic-text-xs);
+        color: var(--ic-text-muted);
+        white-space: nowrap;
+      }
+
+      .field input,
+      .field select {
+        background: var(--ic-surface-2);
+        border: 1px solid var(--ic-border);
+        border-radius: var(--ic-radius-sm);
+        padding: 4px 8px;
+        color: var(--ic-text);
+        font-size: var(--ic-text-sm);
+        font-family: inherit;
+      }
+
+      .field input:focus,
+      .field select:focus {
+        border-color: var(--ic-accent);
+        outline: none;
+      }
+
+      .field-label-input {
+        width: 160px;
+      }
+
+      .field-number {
+        width: 80px;
+      }
+
+      .field-cost {
+        width: 90px;
+      }
+
+      .spacer {
+        flex: 1;
+      }
+
+      .btn-validate {
+        padding: 4px 14px;
+        background: var(--ic-accent);
+        color: var(--ic-text);
+        border: none;
+        border-radius: var(--ic-radius-sm);
+        font-size: var(--ic-text-sm);
+        font-family: inherit;
+        cursor: pointer;
+        white-space: nowrap;
+      }
+
+      .btn-validate:hover {
+        filter: brightness(1.1);
+      }
+
+      .btn-validate:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+
+      .btn-save {
+        padding: 4px 14px;
+        background: var(--ic-surface-2);
+        color: var(--ic-text-muted);
+        border: 1px solid var(--ic-border);
+        border-radius: var(--ic-radius-sm);
+        font-size: var(--ic-text-sm);
+        font-family: inherit;
+        cursor: pointer;
+        white-space: nowrap;
+      }
+      .btn-save:hover:not(:disabled) {
+        background: var(--ic-accent);
+        color: var(--ic-text);
+        border-color: var(--ic-accent);
+      }
+      .btn-save:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+
+      .btn-run {
+        padding: 4px 14px;
+        background: #22c55e;
+        color: #fff;
+        border: none;
+        border-radius: var(--ic-radius-sm);
+        font-size: var(--ic-text-sm);
+        font-family: inherit;
+        cursor: pointer;
+        white-space: nowrap;
+      }
+
+      .btn-run:hover:not(:disabled) {
+        filter: brightness(1.1);
+      }
+
+      .btn-run:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+
+      .validate-result {
+        width: 100%;
+        padding: 4px 12px;
+        font-size: var(--ic-text-xs);
+        color: var(--ic-text-muted);
+      }
+
+      .validate-result.is-error {
+        color: var(--ic-error);
+      }
+    `]}_dispatchSettingsChange(e){this.dispatchEvent(new CustomEvent(`settings-change`,{detail:e,bubbles:!0,composed:!0}))}_onLabelChange(e){let t=e.target.value;this._dispatchSettingsChange({label:t})}_onPolicyChange(e){let t=e.target.value;this._dispatchSettingsChange({onFailure:t})}_onTimeoutChange(e){let t=e.target.value,n=t?parseInt(t,10):void 0;this._dispatchSettingsChange({timeoutMs:n&&n>0?n:void 0})}_onMaxTokensChange(e){let t=e.target.value,n=t?parseInt(t,10):void 0,r=this.settings.budget??{};this._dispatchSettingsChange({budget:{...r,maxTokens:n&&n>0?n:void 0}})}_onMaxCostChange(e){let t=e.target.value,n=t?parseFloat(t):void 0,r=this.settings.budget??{};this._dispatchSettingsChange({budget:{...r,maxCost:n&&n>0?n:void 0}})}_onValidate(){this.dispatchEvent(new CustomEvent(`validate`,{bubbles:!0,composed:!0}))}_onSaveDraft(){this.dispatchEvent(new CustomEvent(`save-draft`,{bubbles:!0,composed:!0}))}_onRun(){this.dispatchEvent(new CustomEvent(`run`,{bubbles:!0,composed:!0}))}render(){let e=this.validateResult.startsWith(`Error:`);return d`
+      <div class="settings-bar">
+        <div class="field">
+          <label>Label:</label>
+          <input
+            class="field-label-input"
+            type="text"
+            placeholder="Pipeline label"
+            .value=${this.settings.label}
+            @input=${this._onLabelChange}
+          />
+        </div>
+        <div class="field">
+          <label>Policy:</label>
+          <select .value=${this.settings.onFailure} @change=${this._onPolicyChange}>
+            <option value="fail-fast" ?selected=${this.settings.onFailure===`fail-fast`}>fail-fast</option>
+            <option value="continue" ?selected=${this.settings.onFailure===`continue`}>continue</option>
+          </select>
+        </div>
+        <div class="field">
+          <label>Timeout:</label>
+          <input
+            class="field-number"
+            type="number"
+            min="0"
+            placeholder="ms"
+            .value=${this.settings.timeoutMs==null?``:String(this.settings.timeoutMs)}
+            @input=${this._onTimeoutChange}
+          />
+        </div>
+        <div class="field">
+          <label>Max Tokens:</label>
+          <input
+            class="field-number"
+            type="number"
+            min="0"
+            placeholder="0"
+            .value=${this.settings.budget?.maxTokens==null?``:String(this.settings.budget.maxTokens)}
+            @input=${this._onMaxTokensChange}
+          />
+        </div>
+        <div class="field">
+          <label>Max Cost:</label>
+          <input
+            class="field-cost"
+            type="number"
+            min="0"
+            step="0.01"
+            placeholder="$0.00"
+            .value=${this.settings.budget?.maxCost==null?``:String(this.settings.budget.maxCost)}
+            @input=${this._onMaxCostChange}
+          />
+        </div>
+        <div class="spacer"></div>
+        <button
+          class="btn-validate"
+          ?disabled=${this._validating}
+          @click=${this._onValidate}
+        >
+          ${this._validating?`Validating...`:`Validate`}
+        </button>
+        <button
+          class="btn-save"
+          ?disabled=${!this.isDirty}
+          @click=${this._onSaveDraft}
+        >
+          Save Draft
+        </button>
+        <button
+          class="btn-run"
+          ?disabled=${this.hasErrors}
+          title=${this.hasErrors?`Fix validation errors before running`:`Run pipeline`}
+          @click=${this._onRun}
+        >
+          Run
+        </button>
+      </div>
+      ${this.validateResult?d`<div class="validate-result ${e?`is-error`:``}">${this.validateResult}</div>`:t}
+    `}};u([a({attribute:!1})],T.prototype,`settings`,void 0),u([a({type:Boolean})],T.prototype,`hasErrors`,void 0),u([a({type:Boolean})],T.prototype,`isDirty`,void 0),u([a()],T.prototype,`validateResult`,void 0),u([c()],T.prototype,`_validating`,void 0),T=u([i(`ic-graph-settings`)],T);var E=class extends r{constructor(...e){super(...e),this.validationResult=null,this._expandErrors=!1,this._expandWarnings=!1}static{this.styles=[l,e`
+      :host {
+        display: block;
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        z-index: 10;
+        pointer-events: auto;
+      }
+
+      .validation-bar {
+        background: var(--ic-surface);
+        border-top: 1px solid var(--ic-border);
+      }
+
+      .status-row {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        padding: 6px 12px;
+        min-height: 32px;
+        cursor: default;
+      }
+
+      .status-icon {
+        font-size: 14px;
+        line-height: 1;
+      }
+
+      .status-icon.valid {
+        color: #22c55e;
+      }
+
+      .status-icon.invalid {
+        color: var(--ic-error);
+      }
+
+      .badge {
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+        padding: 2px 8px;
+        border-radius: 9999px;
+        font-size: var(--ic-text-xs);
+        cursor: pointer;
+        user-select: none;
+      }
+
+      .badge:hover {
+        filter: brightness(1.2);
+      }
+
+      .badge-error {
+        background: color-mix(in srgb, var(--ic-error) 15%, transparent);
+        color: var(--ic-error);
+      }
+
+      .badge-warning {
+        background: color-mix(in srgb, #eab308 15%, transparent);
+        color: #eab308;
+      }
+
+      .valid-text {
+        font-size: var(--ic-text-xs);
+        color: #22c55e;
+      }
+
+      .message-list {
+        max-height: 200px;
+        overflow-y: auto;
+        border-top: 1px solid var(--ic-border);
+      }
+
+      .message-row {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 4px 12px;
+        font-size: var(--ic-text-xs);
+        cursor: pointer;
+        color: var(--ic-text-muted);
+      }
+
+      .message-row:hover {
+        background: var(--ic-surface-2);
+      }
+
+      .message-severity {
+        flex-shrink: 0;
+        width: 12px;
+        text-align: center;
+      }
+
+      .message-severity.error {
+        color: var(--ic-error);
+      }
+
+      .message-severity.warning {
+        color: #eab308;
+      }
+
+      .message-text {
+        flex: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .message-nodes {
+        flex-shrink: 0;
+        font-family: var(--ic-font-mono);
+        color: var(--ic-text-dim);
+      }
+    `]}_onMessageClick(e){e.nodeIds&&e.nodeIds.length>0&&this.dispatchEvent(new CustomEvent(`highlight-nodes`,{detail:{nodeIds:e.nodeIds},bubbles:!0,composed:!0}))}render(){if(!this.validationResult)return t;let{valid:e,errors:n,warnings:r}=this.validationResult,i=n.length,a=r.length;return d`
+      <div class="validation-bar">
+        <div class="status-row">
+          ${i>0?d`<span class="status-icon invalid">\u2716</span>`:d`<span class="status-icon valid">\u2714</span>`}
+          ${i>0?d`<span
+                class="badge badge-error"
+                @click=${()=>{this._expandErrors=!this._expandErrors}}
+              >${i} error${i===1?``:`s`}</span>`:t}
+          ${a>0?d`<span
+                class="badge badge-warning"
+                @click=${()=>{this._expandWarnings=!this._expandWarnings}}
+              >${a} warning${a===1?``:`s`}</span>`:t}
+          ${e&&a===0?d`<span class="valid-text">Valid</span>`:t}
+        </div>
+        ${this._expandErrors&&i>0?this._renderMessageList(n):t}
+        ${this._expandWarnings&&a>0?this._renderMessageList(r):t}
+      </div>
+    `}_renderMessageList(e){return d`
+      <div class="message-list">
+        ${e.map(e=>d`
+            <div class="message-row" @click=${()=>this._onMessageClick(e)}>
+              <span class="message-severity ${e.severity}">${e.severity===`error`?`✖`:`⚠`}</span>
+              <span class="message-text">${e.message}</span>
+              ${e.nodeIds&&e.nodeIds.length>0?d`<span class="message-nodes">${e.nodeIds.join(`, `)}</span>`:t}
+            </div>
+          `)}
+      </div>
+    `}};u([a({attribute:!1})],E.prototype,`validationResult`,void 0),u([c()],E.prototype,`_expandErrors`,void 0),u([c()],E.prototype,`_expandWarnings`,void 0),E=u([i(`ic-graph-validation`)],E);function D(e,t){let n=[],r=[];if(e.length===0)return n.push({severity:`error`,message:`Graph must have at least 1 node`}),{valid:!1,errors:n,warnings:r};e.length>20&&n.push({severity:`error`,message:`Graph exceeds maximum of 20 nodes (current: ${e.length})`});let i=new Set,a=new Set;for(let t of e)a.has(t.id)?n.push({severity:`error`,message:`Duplicate node ID "${t.id}"`,nodeIds:[t.id]}):a.add(t.id),i.add(t.id);for(let t of e){(!t.task||t.task.trim().length===0)&&n.push({severity:`error`,message:`Node "${t.id}" has no task defined`,nodeIds:[t.id]});for(let e of t.dependsOn)e===t.id&&n.push({severity:`error`,message:`Node "${t.id}" has a self-dependency`,nodeIds:[t.id]});for(let e of t.dependsOn)e!==t.id&&!i.has(e)&&n.push({severity:`error`,message:`Node "${t.id}" depends on missing node "${e}"`,nodeIds:[t.id]})}let o=new Map,s=new Map;for(let t of e)o.set(t.id,0),s.set(t.id,[]);for(let e of t){let t=s.get(e.source);t&&t.push(e.target),o.set(e.target,(o.get(e.target)??0)+1)}for(let t of e)for(let e of t.dependsOn)if(i.has(e)){let n=s.get(e);n&&!n.includes(t.id)&&(n.push(t.id),o.set(t.id,(o.get(t.id)??0)+1))}let c=[];for(let[e,t]of o)t===0&&c.push(e);let l=0;for(;c.length>0;){let e=c.shift();l++;let t=s.get(e);if(t)for(let e of t){let t=(o.get(e)??1)-1;o.set(e,t),t===0&&c.push(e)}}if(l<i.size){let e=[];for(let[t,n]of o)n>0&&e.push(t);n.push({severity:`error`,message:`Cycle detected involving nodes: ${e.join(`, `)}`,nodeIds:e})}let u=new Set;for(let e of t)u.add(e.source),u.add(e.target);for(let t of e)for(let e of t.dependsOn)i.has(e)&&(u.add(t.id),u.add(e));for(let t of e){if(!t.agentId){let e=t.typeConfig;typeof e?.agent==`string`&&e.agent!==``||Array.isArray(e?.agents)&&e.agents.length>0||Array.isArray(e?.voters)&&e.voters.length>0||Array.isArray(e?.reviewers)&&e.reviewers.length>0||Array.isArray(e?.mappers)&&e.mappers.length>0||r.push({severity:`warning`,message:`Node "${t.id}" has no agent assigned`,nodeIds:[t.id]})}t.barrierMode&&t.dependsOn.length<=1&&r.push({severity:`warning`,message:`Node "${t.id}" has barrier mode "${t.barrierMode}" but only ${t.dependsOn.length} dependency`,nodeIds:[t.id]}),e.length>1&&!u.has(t.id)&&r.push({severity:`warning`,message:`Node "${t.id}" is disconnected from the graph`,nodeIds:[t.id]}),t.typeId&&!t.typeConfig&&n.push({severity:`error`,message:`Node "${t.id}" has typeId "${t.typeId}" but no typeConfig`,nodeIds:[t.id]}),!t.typeId&&t.typeConfig&&n.push({severity:`error`,message:`Node "${t.id}" has typeConfig but no typeId`,nodeIds:[t.id]}),t.typeId&&(t.retries??0)>0&&[`debate`,`vote`,`map-reduce`,`collaborate`].includes(t.typeId)&&r.push({severity:`warning`,message:`Node "${t.id}" has retries on a "${t.typeId}" node -- retrying multi-agent execution is expensive`,nodeIds:[t.id]}),t.typeId===`approval-gate`&&(t.retries??0)>0&&r.push({severity:`warning`,message:`Node "${t.id}" has retries on an approval-gate -- retrying will re-prompt the user`,nodeIds:[t.id]}),t.contextMode&&t.contextMode!==`full`&&t.dependsOn.length===0&&r.push({severity:`warning`,message:`Node "${t.id}" has contextMode "${t.contextMode}" but no dependencies to receive context from`,nodeIds:[t.id]})}return{valid:n.length===0,errors:n,warnings:r}}var O={agent:{label:`Agent`,description:`Run a single sub-agent with explicit driver config`},debate:{label:`Debate`,description:`Multi-round adversarial debate between agents`},vote:{label:`Vote`,description:`Parallel independent voting by multiple agents`},refine:{label:`Refine`,description:`Sequential refinement chain through reviewers`},collaborate:{label:`Collaborate`,description:`Sequential multi-perspective collaboration`},"approval-gate":{label:`Approval Gate`,description:`Human approval checkpoint with timeout`},"map-reduce":{label:`Map-Reduce`,description:`Parallel map tasks then single reduce`}};function k(e){switch(e){case`agent`:return{agent:``,model:``,max_steps:10};case`debate`:return{agents:[],rounds:2,synthesizer:``};case`vote`:return{voters:[],prompt_suffix:``,verdict_format:``,min_voters:0};case`refine`:return{reviewers:[]};case`collaborate`:return{agents:[],rounds:1};case`approval-gate`:return{message:``,timeout_minutes:60};case`map-reduce`:return{mappers:[],reducer:``,reducer_prompt:``};default:return{}}}var A=class extends r{constructor(...e){super(...e),this.node=null,this.allNodes=[],this.allEdges=[],this.rpcClient=null,this._agents=[],this._models=[],this._allowAgents=[],this._agentsLoading=!0,this._modelsLoading=!0,this._showVariables=!1,this._cycleErrors=new Map,this._agentsLoaded=!1,this._modelsLoaded=!1,this._allowListLoaded=!1,this._textareaRef=null}static{this.styles=[l,o,e`
+      :host {
+        display: block;
+        width: 320px;
+        border-left: 1px solid var(--ic-border);
+        overflow-y: auto;
+        background: var(--ic-surface);
+        padding: 16px;
+      }
+
+      .section-header {
+        font-size: var(--ic-text-sm);
+        font-weight: 600;
+        color: var(--ic-text);
+        margin: 16px 0 8px;
+      }
+
+      .section-header:first-of-type {
+        margin-top: 0;
+      }
+
+      h3 {
+        margin: 0 0 4px;
+        font-size: var(--ic-text-base);
+        color: var(--ic-text);
+      }
+
+      .node-id-label {
+        font-size: var(--ic-text-xs);
+        color: var(--ic-text-muted);
+        margin-bottom: 12px;
+      }
+
+      /* Form elements */
+      textarea,
+      input[type="text"],
+      input[type="number"],
+      select {
+        width: 100%;
+        padding: 6px 8px;
+        border: 1px solid var(--ic-border);
+        border-radius: var(--ic-radius-sm);
+        background: var(--ic-bg);
+        color: var(--ic-text);
+        font-family: var(--ic-font-sans);
+        font-size: var(--ic-text-sm);
+      }
+
+      textarea {
+        resize: vertical;
+        font-family: var(--ic-font-mono);
+        line-height: 1.4;
+      }
+
+      textarea:focus,
+      input:focus,
+      select:focus {
+        outline: 2px solid var(--ic-accent);
+        outline-offset: -1px;
+        border-color: var(--ic-accent);
+      }
+
+      /* Variables toggle */
+      .variables-toggle {
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+        margin-top: 4px;
+        padding: 2px 8px;
+        border: 1px solid var(--ic-border);
+        border-radius: var(--ic-radius-sm);
+        background: transparent;
+        color: var(--ic-text-muted);
+        font-size: var(--ic-text-xs);
+        cursor: pointer;
+      }
+
+      .variables-toggle:hover {
+        background: var(--ic-surface-2);
+        color: var(--ic-text);
+      }
+
+      .variables-list {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 4px;
+        margin-top: 6px;
+      }
+
+      .variable-chip {
+        display: inline-block;
+        padding: 2px 8px;
+        border: 1px solid var(--ic-border);
+        border-radius: 9999px;
+        background: var(--ic-surface-2);
+        color: var(--ic-text-muted);
+        font-family: var(--ic-font-mono);
+        font-size: var(--ic-text-xs);
+        cursor: pointer;
+        user-select: none;
+      }
+
+      .variable-chip:hover {
+        background: color-mix(in srgb, var(--ic-accent) 15%, transparent);
+        color: var(--ic-accent);
+        border-color: var(--ic-accent);
+      }
+
+      .no-variables {
+        font-size: var(--ic-text-xs);
+        color: var(--ic-text-dim);
+        font-style: italic;
+      }
+
+      /* Agent info */
+      .agent-row {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+
+      .agent-row select {
+        flex: 1;
+      }
+
+      .status-dot {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        flex-shrink: 0;
+      }
+
+      .status-dot--active {
+        background: var(--ic-success, #22c55e);
+      }
+
+      .status-dot--suspended {
+        background: var(--ic-danger, #ef4444);
+      }
+
+      .agent-info {
+        font-size: var(--ic-text-xs);
+        color: var(--ic-text-muted);
+        margin-top: 4px;
+      }
+
+      .allowlist-warning {
+        margin-top: 6px;
+        padding: 6px 8px;
+        border-radius: var(--ic-radius-sm);
+        background: color-mix(in srgb, var(--ic-warning, #f59e0b) 10%, transparent);
+        border: 1px solid color-mix(in srgb, var(--ic-warning, #f59e0b) 30%, transparent);
+        color: var(--ic-warning, #f59e0b);
+        font-size: var(--ic-text-xs);
+      }
+
+      /* Dependency checkboxes */
+      .dep-list {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+      }
+
+      .dep-item {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        font-size: var(--ic-text-sm);
+        color: var(--ic-text);
+      }
+
+      .dep-item input[type="checkbox"] {
+        width: auto;
+        margin: 0;
+        cursor: pointer;
+      }
+
+      .dep-task-preview {
+        color: var(--ic-text-muted);
+        font-size: var(--ic-text-xs);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        max-width: 150px;
+      }
+
+      .cycle-error {
+        color: var(--ic-danger, #ef4444);
+        font-size: var(--ic-text-xs);
+        margin-left: 4px;
+      }
+
+      /* Constraint fields */
+      .constraint-row {
+        margin-bottom: 8px;
+      }
+
+      .constraint-label {
+        font-size: var(--ic-text-xs);
+        color: var(--ic-text-muted);
+        margin-bottom: 2px;
+      }
+
+      .constraint-help {
+        font-size: var(--ic-text-xs);
+        color: var(--ic-text-dim);
+        margin-top: 2px;
+      }
+
+      /* Actions */
+      .actions {
+        display: flex;
+        gap: 8px;
+        margin-top: 16px;
+      }
+
+      .btn {
+        flex: 1;
+        padding: 6px 12px;
+        border: 1px solid var(--ic-border);
+        border-radius: var(--ic-radius-sm);
+        font-size: var(--ic-text-sm);
+        cursor: pointer;
+        text-align: center;
+      }
+
+      .btn-accent {
+        background: color-mix(in srgb, var(--ic-accent) 10%, transparent);
+        color: var(--ic-accent);
+        border-color: color-mix(in srgb, var(--ic-accent) 30%, transparent);
+      }
+
+      .btn-accent:hover {
+        background: color-mix(in srgb, var(--ic-accent) 20%, transparent);
+      }
+
+      .btn-danger {
+        background: color-mix(in srgb, var(--ic-danger, #ef4444) 10%, transparent);
+        color: var(--ic-danger, #ef4444);
+        border-color: color-mix(in srgb, var(--ic-danger, #ef4444) 30%, transparent);
+      }
+
+      .btn-danger:hover {
+        background: color-mix(in srgb, var(--ic-danger, #ef4444) 20%, transparent);
+      }
+
+      /* Loading state */
+      .loading {
+        font-size: var(--ic-text-xs);
+        color: var(--ic-text-dim);
+        font-style: italic;
+      }
+
+      .empty-state {
+        padding: 32px 16px;
+        text-align: center;
+        color: var(--ic-text-muted);
+        font-size: var(--ic-text-sm);
+      }
+
+      /* Node type system */
+      .type-select {
+        width: 100%;
+        padding: 6px 8px;
+        background: var(--ic-input-bg);
+        color: var(--ic-text);
+        border: 1px solid var(--ic-border);
+        border-radius: 4px;
+        font-size: var(--ic-text-sm);
+        margin-bottom: 8px;
+      }
+
+      .type-description {
+        font-size: var(--ic-text-xs);
+        color: var(--ic-text-secondary);
+        margin-bottom: 12px;
+      }
+
+      .type-agent-list {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+        margin-bottom: 8px;
+      }
+
+      .type-agent-row {
+        display: flex;
+        gap: 4px;
+        align-items: center;
+      }
+
+      .type-agent-row select {
+        flex: 1;
+      }
+
+      .type-remove-btn {
+        background: none;
+        border: 1px solid var(--ic-border);
+        color: var(--ic-text-secondary);
+        border-radius: 4px;
+        padding: 4px 8px;
+        cursor: pointer;
+        font-size: var(--ic-text-xs);
+      }
+
+      .type-remove-btn:hover {
+        border-color: var(--ic-error);
+        color: var(--ic-error);
+      }
+
+      .type-add-btn {
+        background: none;
+        border: 1px dashed var(--ic-border);
+        color: var(--ic-text-secondary);
+        border-radius: 4px;
+        padding: 6px;
+        cursor: pointer;
+        font-size: var(--ic-text-xs);
+        width: 100%;
+        text-align: center;
+      }
+
+      .type-add-btn:hover {
+        border-color: var(--ic-accent);
+        color: var(--ic-accent);
+      }
+
+      .type-mapper-row {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+        padding: 8px;
+        border: 1px solid var(--ic-border);
+        border-radius: 4px;
+        margin-bottom: 4px;
+      }
+
+      .type-mapper-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+    `]}connectedCallback(){super.connectedCallback(),this._loadAgents(),this._loadModels(),this._loadAllowList()}updated(e){e.has(`rpcClient`)&&this.rpcClient&&(this._agentsLoaded||this._loadAgents(),this._modelsLoaded||this._loadModels(),this._allowListLoaded||this._loadAllowList())}async _loadAgents(){if(this._agentsLoaded||!this.rpcClient){this._agentsLoading=!1;return}let e=this.rpcClient;try{let t=(await e.call(`agents.list`)).agents??[],n=await Promise.allSettled(t.map(t=>e.call(`agents.get`,{agentId:t})));this._agents=n.filter(e=>e.status===`fulfilled`).map(e=>({id:e.value.agentId,model:e.value.config?.model??`unknown`,provider:e.value.config?.provider??`unknown`,suspended:e.value.suspended===!0})).sort((e,t)=>e.id.localeCompare(t.id)),this._agentsLoaded=!0}catch{this._agents=[]}finally{this._agentsLoading=!1}}async _loadModels(){if(this._modelsLoaded||!this.rpcClient){this._modelsLoading=!1;return}try{let e=await this.rpcClient.call(`models.list`,{});this._models=(e.providers??[]).flatMap(e=>(e.models??[]).map(t=>({provider:e.name,modelId:typeof t==`string`?t:t.modelId}))),this._modelsLoaded=!0}catch{this._models=[]}finally{this._modelsLoading=!1}}async _loadAllowList(){if(!(this._allowListLoaded||!this.rpcClient))try{let e=await this.rpcClient.call(`config.read`,{section:`security`});this._allowAgents=e?.agentToAgent?.allowAgents??[],this._allowListLoaded=!0}catch{this._allowAgents=[],this._allowListLoaded=!0}}render(){if(!this.node)return d`<div class="empty-state">Select a node to edit</div>`;let e=this.node,n=this._getDependencies(e).length;return d`
+      ${this._renderHeader(e)}
+      ${this._renderTask(e)}
+      ${e.typeId?t:this._renderAgent(e)}
+      ${this._renderDependencies(e)}
+      ${this._renderConstraints(e,n)}
+      ${this._renderRetries(e)}
+      ${this._renderContextMode(e)}
+      ${this._renderNodeType(e)}
+      ${this._renderModelOverride(e)}
+      ${this._renderActions(e)}
+    `}_renderHeader(e){return d`
+      <h3>${e.id}</h3>
+      <div class="node-id-label">Node ID: ${e.id}</div>
+    `}_renderTask(e){let n=this._getDependencies(e);return d`
+      <div class="section-header">Task</div>
+      <textarea
+        rows="4"
+        .value=${e.task}
+        @input=${t=>{let n=t.target;this._textareaRef=n,this._dispatchNodeUpdate(e.id,{task:n.value})}}
+        placeholder="Describe the task for this node..."
+      ></textarea>
+      <button
+        class="variables-toggle"
+        @click=${()=>{this._showVariables=!this._showVariables}}
+      >
+        ${this._showVariables?`▼`:`▶`} Variables
+      </button>
+      ${this._showVariables?this._renderVariablesList(n):t}
+    `}_renderVariablesList(e){return e.length===0?d`<div class="no-variables">No dependencies -- add dependencies to use variables</div>`:d`
+      <div class="variables-list">
+        ${e.map(e=>d`
+            <span
+              class="variable-chip"
+              @click=${()=>this._insertVariable(`{{${e.source}.result}}`)}
+            >{{${e.source}.result}}</span>
+          `)}
+      </div>
+    `}_insertVariable(e){let t=this._textareaRef??this.renderRoot.querySelector(`textarea`);if(!t)return;let n=t.selectionStart,r=t.selectionEnd,i=t.value,a=i.substring(0,n)+e+i.substring(r);t.value=a,t.selectionStart=t.selectionEnd=n+e.length,t.focus(),this.node&&this._dispatchNodeUpdate(this.node.id,{task:a})}_renderAgent(e){let n=this._agents.find(t=>t.id===e.agentId),r=this._allowAgents.length>0&&e.agentId!=null&&e.agentId!==``&&!this._allowAgents.includes(e.agentId);return d`
+      <div class="section-header">Agent</div>
+      ${this._agentsLoading?d`<div class="loading">Loading agents...</div>`:d`
+            <div class="agent-row">
+              <select
+                .value=${e.agentId??``}
+                @change=${t=>{let n=t.target.value;this._dispatchNodeUpdate(e.id,{agentId:n||void 0})}}
+              >
+                <option value="">-- No agent (uses default) --</option>
+                ${this._agents.map(t=>d`
+                    <option value=${t.id} ?selected=${t.id===e.agentId}>
+                      ${t.id}${t.suspended?` (suspended)`:``}
+                    </option>
+                  `)}
+              </select>
+              ${n?d`<span
+                    class="status-dot ${n.suspended?`status-dot--suspended`:`status-dot--active`}"
+                    title=${n.suspended?`Suspended`:`Active`}
+                  ></span>`:t}
+            </div>
+            ${n?d`<div class="agent-info">${n.model} (${n.provider})</div>`:t}
+            ${r?d`<div class="allowlist-warning">This agent is not in the security allowlist and may be restricted</div>`:t}
+          `}
+    `}_renderDependencies(e){let n=this.allNodes.filter(t=>t.id!==e.id).slice().sort((e,t)=>{let n=e.position.y-t.position.y;return n===0?e.position.x-t.position.x:n});return n.length===0?d`
+        <div class="section-header">Dependencies</div>
+        <div class="loading">No other nodes in graph</div>
+      `:d`
+      <div class="section-header">Dependencies</div>
+      <div class="dep-list">
+        ${n.map(n=>{let r=this.allEdges.some(t=>t.source===n.id&&t.target===e.id),i=this._cycleErrors.get(n.id)??!1;return d`
+            <label class="dep-item">
+              <input
+                type="checkbox"
+                .checked=${r}
+                @change=${t=>{let r=t.target.checked;this._handleDependencyChange(e.id,n.id,r)}}
+              />
+              <span>${n.id}</span>
+              <span class="dep-task-preview">${this._truncate(n.task,30)}</span>
+              ${i?d`<span class="cycle-error">Would create cycle</span>`:t}
+            </label>
+          `})}
+      </div>
+    `}_handleDependencyChange(e,t,r){if(r){if(w(this.allEdges,t,e)){let e=new Map(this._cycleErrors);e.set(t,!0),this._cycleErrors=e,n(()=>{let e=new Map(this._cycleErrors);e.delete(t),this._cycleErrors=e},2e3);return}this.dispatchEvent(new CustomEvent(`edge-add`,{detail:{source:t,target:e},bubbles:!0,composed:!0}))}else this.dispatchEvent(new CustomEvent(`edge-remove`,{detail:{source:t,target:e},bubbles:!0,composed:!0}))}_renderConstraints(e,n){return d`
+      <div class="section-header">Constraints</div>
+
+      ${n>=2?d`
+            <div class="constraint-row">
+              <div class="constraint-label">Barrier Mode</div>
+              <select
+                .value=${e.barrierMode??`all`}
+                @change=${t=>{let n=t.target.value;this._dispatchNodeUpdate(e.id,{barrierMode:n})}}
+              >
+                <option value="all">all</option>
+                <option value="majority">majority</option>
+                <option value="best-effort">best-effort</option>
+              </select>
+              <div class="constraint-help">
+                ${{all:`Wait for all dependencies to complete`,majority:`Proceed when >50% of dependencies complete`,"best-effort":`Proceed when any dependency completes`}[e.barrierMode??`all`]}
+              </div>
+            </div>
+          `:t}
+
+      <div class="constraint-row">
+        <div class="constraint-label">Timeout (ms)</div>
+        <input
+          type="number"
+          min="0"
+          step="1000"
+          placeholder="Default"
+          .value=${e.timeoutMs==null?``:String(e.timeoutMs)}
+          @change=${t=>{let n=t.target.value;this._dispatchNodeUpdate(e.id,{timeoutMs:n?Number(n):void 0})}}
+        />
+      </div>
+
+      <div class="constraint-row">
+        <div class="constraint-label">Max Steps</div>
+        <input
+          type="number"
+          min="1"
+          max="50"
+          placeholder="Default"
+          .value=${e.maxSteps==null?``:String(e.maxSteps)}
+          @change=${t=>{let n=t.target.value;this._dispatchNodeUpdate(e.id,{maxSteps:n?Number(n):void 0})}}
+        />
+      </div>
+    `}_renderRetries(e){return d`
+      <div class="constraint-row">
+        <div class="constraint-label">Retries</div>
+        <input
+          type="number"
+          min="0"
+          max="3"
+          step="1"
+          placeholder="0"
+          .value=${e.retries==null?``:String(e.retries)}
+          @change=${t=>{let n=t.target.value;this._dispatchNodeUpdate(e.id,{retries:n?Number(n):void 0})}}
+        />
+        <div class="constraint-help">Automatic retry with exponential backoff (0-3)</div>
+      </div>
+    `}_renderContextMode(e){return d`
+      <div class="constraint-row">
+        <div class="constraint-label">Context Mode</div>
+        <select
+          .value=${e.contextMode??`full`}
+          @change=${t=>{let n=t.target.value;this._dispatchNodeUpdate(e.id,{contextMode:n===`full`?void 0:n})}}
+        >
+          <option value="full">full (complete upstream outputs)</option>
+          <option value="summary">summary (truncated + shared dir ref)</option>
+          <option value="none">none (inline templates only)</option>
+        </select>
+      </div>
+    `}_renderNodeType(e){return d`
+      <div class="section-header">Node Type</div>
+      <select
+        class="type-select"
+        .value=${e.typeId??``}
+        @change=${t=>{let n=t.target.value;n===``?this._dispatchNodeUpdate(e.id,{typeId:void 0,typeConfig:void 0}):this._dispatchNodeUpdate(e.id,{typeId:n,typeConfig:k(n)})}}
+      >
+        <option value="">Standard (no type driver)</option>
+        ${Object.entries(O).map(([t,n])=>d`
+            <option value=${t} ?selected=${e.typeId===t}>${n.label}</option>
+          `)}
+      </select>
+      ${e.typeId&&O[e.typeId]?d`<div class="type-description">${O[e.typeId].description}</div>`:t}
+      ${e.typeId?this._renderTypeConfigForm(e):t}
+    `}_renderTypeConfigForm(e){let n=e.typeConfig??{};switch(e.typeId){case`agent`:return this._renderAgentTypeConfig(e,n);case`debate`:return this._renderDebateTypeConfig(e,n);case`vote`:return this._renderVoteTypeConfig(e,n);case`refine`:return this._renderRefineTypeConfig(e,n);case`collaborate`:return this._renderCollaborateTypeConfig(e,n);case`approval-gate`:return this._renderApprovalGateTypeConfig(e,n);case`map-reduce`:return this._renderMapReduceTypeConfig(e,n);default:return t}}_renderAgentTypeConfig(e,t){return d`
+      <div class="constraint-row">
+        <div class="constraint-label">Agent</div>
+        <select
+          .value=${String(t.agent??``)}
+          @change=${n=>{let r=n.target.value;this._dispatchNodeUpdate(e.id,{typeConfig:{...t,agent:r||void 0}})}}
+        >
+          <option value="">-- Select agent --</option>
+          ${this._agents.map(e=>d`
+            <option value=${e.id} ?selected=${e.id===t.agent}>${e.id}${e.suspended?` (suspended)`:``}</option>
+          `)}
+        </select>
+      </div>
+      <div class="constraint-row">
+        <div class="constraint-label">Model</div>
+        <select
+          .value=${String(t.model??``)}
+          @change=${n=>{let r=n.target.value;this._dispatchNodeUpdate(e.id,{typeConfig:{...t,model:r||void 0}})}}
+        >
+          <option value="">-- Default --</option>
+          ${this._models.map(e=>d`
+            <option value=${e.modelId} ?selected=${e.modelId===t.model}>${e.modelId}</option>
+          `)}
+        </select>
+      </div>
+      <div class="constraint-row">
+        <div class="constraint-label">Max Steps</div>
+        <input type="number" min="1" max="50" placeholder="10"
+          .value=${t.max_steps==null?``:String(t.max_steps)}
+          @change=${n=>{let r=n.target.value;this._dispatchNodeUpdate(e.id,{typeConfig:{...t,max_steps:r?Number(r):void 0}})}}
+        />
+      </div>
+    `}_renderDebateTypeConfig(e,t){let n=Array.isArray(t.agents)?t.agents:[];return d`
+      <div class="constraint-label">Debate Agents (min 2)</div>
+      <div class="type-agent-list">
+        ${n.map((r,i)=>d`
+          <div class="type-agent-row">
+            <select .value=${r} @change=${r=>{let a=r.target.value,o=[...n];o[i]=a,this._dispatchNodeUpdate(e.id,{typeConfig:{...t,agents:o}})}}>
+              <option value="">-- Select agent --</option>
+              ${this._agents.map(e=>d`<option value=${e.id} ?selected=${e.id===r}>${e.id}${e.suspended?` (suspended)`:``}</option>`)}
+            </select>
+            <button class="type-remove-btn" @click=${()=>{this._dispatchNodeUpdate(e.id,{typeConfig:{...t,agents:n.filter((e,t)=>t!==i)}})}}>Remove</button>
+          </div>
+        `)}
+        <button class="type-add-btn" @click=${()=>{this._dispatchNodeUpdate(e.id,{typeConfig:{...t,agents:[...n,``]}})}}>+ Add agent</button>
+      </div>
+      <div class="constraint-row">
+        <div class="constraint-label">Rounds</div>
+        <input type="number" min="1" max="5" placeholder="2"
+          .value=${t.rounds==null?``:String(t.rounds)}
+          @change=${n=>{let r=n.target.value;this._dispatchNodeUpdate(e.id,{typeConfig:{...t,rounds:r?Number(r):void 0}})}}
+        />
+      </div>
+      <div class="constraint-row">
+        <div class="constraint-label">Synthesizer</div>
+        <select .value=${String(t.synthesizer??``)} @change=${n=>{let r=n.target.value;this._dispatchNodeUpdate(e.id,{typeConfig:{...t,synthesizer:r||void 0}})}}>
+          <option value="">-- None --</option>
+          ${this._agents.map(e=>d`<option value=${e.id} ?selected=${e.id===t.synthesizer}>${e.id}${e.suspended?` (suspended)`:``}</option>`)}
+        </select>
+      </div>
+    `}_renderVoteTypeConfig(e,t){let n=Array.isArray(t.voters)?t.voters:[];return d`
+      <div class="constraint-label">Voters (min 2)</div>
+      <div class="type-agent-list">
+        ${n.map((r,i)=>d`
+          <div class="type-agent-row">
+            <select .value=${r} @change=${r=>{let a=r.target.value,o=[...n];o[i]=a,this._dispatchNodeUpdate(e.id,{typeConfig:{...t,voters:o}})}}>
+              <option value="">-- Select agent --</option>
+              ${this._agents.map(e=>d`<option value=${e.id} ?selected=${e.id===r}>${e.id}${e.suspended?` (suspended)`:``}</option>`)}
+            </select>
+            <button class="type-remove-btn" @click=${()=>{this._dispatchNodeUpdate(e.id,{typeConfig:{...t,voters:n.filter((e,t)=>t!==i)}})}}>Remove</button>
+          </div>
+        `)}
+        <button class="type-add-btn" @click=${()=>{this._dispatchNodeUpdate(e.id,{typeConfig:{...t,voters:[...n,``]}})}}>+ Add voter</button>
+      </div>
+      <div class="constraint-row">
+        <div class="constraint-label">Verdict Format</div>
+        <input type="text" placeholder="YES or NO with justification"
+          .value=${String(t.verdict_format??``)}
+          @change=${n=>{let r=n.target.value;this._dispatchNodeUpdate(e.id,{typeConfig:{...t,verdict_format:r||void 0}})}}
+        />
+      </div>
+      <div class="constraint-row">
+        <div class="constraint-label">Prompt Suffix</div>
+        <textarea rows="2" placeholder="Additional instructions for voters..."
+          .value=${String(t.prompt_suffix??``)}
+          @change=${n=>{let r=n.target.value;this._dispatchNodeUpdate(e.id,{typeConfig:{...t,prompt_suffix:r||void 0}})}}
+        ></textarea>
+      </div>
+      <div class="constraint-row">
+        <div class="constraint-label">Min Voters</div>
+        <input type="number" min="0" max="20" placeholder="0 (all)"
+          .value=${t.min_voters==null?``:String(t.min_voters)}
+          @change=${n=>{let r=n.target.value;this._dispatchNodeUpdate(e.id,{typeConfig:{...t,min_voters:r?Number(r):void 0}})}}
+        />
+      </div>
+    `}_renderRefineTypeConfig(e,t){let n=Array.isArray(t.reviewers)?t.reviewers:[];return d`
+      <div class="constraint-label">Reviewers (min 2, sequential order)</div>
+      <div class="type-agent-list">
+        ${n.map((r,i)=>d`
+          <div class="type-agent-row">
+            <select .value=${r} @change=${r=>{let a=r.target.value,o=[...n];o[i]=a,this._dispatchNodeUpdate(e.id,{typeConfig:{...t,reviewers:o}})}}>
+              <option value="">-- Select agent --</option>
+              ${this._agents.map(e=>d`<option value=${e.id} ?selected=${e.id===r}>${e.id}${e.suspended?` (suspended)`:``}</option>`)}
+            </select>
+            <button class="type-remove-btn" @click=${()=>{this._dispatchNodeUpdate(e.id,{typeConfig:{...t,reviewers:n.filter((e,t)=>t!==i)}})}}>Remove</button>
+          </div>
+        `)}
+        <button class="type-add-btn" @click=${()=>{this._dispatchNodeUpdate(e.id,{typeConfig:{...t,reviewers:[...n,``]}})}}>+ Add reviewer</button>
+      </div>
+    `}_renderCollaborateTypeConfig(e,t){let n=Array.isArray(t.agents)?t.agents:[];return d`
+      <div class="constraint-label">Collaborators (min 2)</div>
+      <div class="type-agent-list">
+        ${n.map((r,i)=>d`
+          <div class="type-agent-row">
+            <select .value=${r} @change=${r=>{let a=r.target.value,o=[...n];o[i]=a,this._dispatchNodeUpdate(e.id,{typeConfig:{...t,agents:o}})}}>
+              <option value="">-- Select agent --</option>
+              ${this._agents.map(e=>d`<option value=${e.id} ?selected=${e.id===r}>${e.id}${e.suspended?` (suspended)`:``}</option>`)}
+            </select>
+            <button class="type-remove-btn" @click=${()=>{this._dispatchNodeUpdate(e.id,{typeConfig:{...t,agents:n.filter((e,t)=>t!==i)}})}}>Remove</button>
+          </div>
+        `)}
+        <button class="type-add-btn" @click=${()=>{this._dispatchNodeUpdate(e.id,{typeConfig:{...t,agents:[...n,``]}})}}>+ Add collaborator</button>
+      </div>
+      <div class="constraint-row">
+        <div class="constraint-label">Rounds</div>
+        <input type="number" min="1" max="3" placeholder="1"
+          .value=${t.rounds==null?``:String(t.rounds)}
+          @change=${n=>{let r=n.target.value;this._dispatchNodeUpdate(e.id,{typeConfig:{...t,rounds:r?Number(r):void 0}})}}
+        />
+      </div>
+    `}_renderApprovalGateTypeConfig(e,t){return d`
+      <div class="constraint-row">
+        <div class="constraint-label">Message</div>
+        <textarea rows="2" placeholder="Approval request message..."
+          .value=${String(t.message??``)}
+          @change=${n=>{let r=n.target.value;this._dispatchNodeUpdate(e.id,{typeConfig:{...t,message:r||void 0}})}}
+        ></textarea>
+      </div>
+      <div class="constraint-row">
+        <div class="constraint-label">Timeout (min)</div>
+        <input type="number" min="1" max="1440" placeholder="60"
+          .value=${t.timeout_minutes==null?``:String(t.timeout_minutes)}
+          @change=${n=>{let r=n.target.value;this._dispatchNodeUpdate(e.id,{typeConfig:{...t,timeout_minutes:r?Number(r):void 0}})}}
+        />
+      </div>
+    `}_renderMapReduceTypeConfig(e,t){let n=Array.isArray(t.mappers)?t.mappers:[];return d`
+      <div class="constraint-label">Mappers (min 2)</div>
+      <div class="type-agent-list">
+        ${n.map((r,i)=>d`
+          <div class="type-mapper-row">
+            <div class="type-mapper-header">
+              <span class="constraint-label">Mapper ${i+1}</span>
+              <button class="type-remove-btn" @click=${()=>{this._dispatchNodeUpdate(e.id,{typeConfig:{...t,mappers:n.filter((e,t)=>t!==i)}})}}>Remove</button>
+            </div>
+            <select .value=${r.agent??``} @change=${a=>{let o=a.target.value,s=[...n];s[i]={...r,agent:o},this._dispatchNodeUpdate(e.id,{typeConfig:{...t,mappers:s}})}}>
+              <option value="">-- Select agent --</option>
+              ${this._agents.map(e=>d`<option value=${e.id} ?selected=${e.id===r.agent}>${e.id}${e.suspended?` (suspended)`:``}</option>`)}
+            </select>
+            <input type="text" placeholder="Task suffix (optional)"
+              .value=${r.task_suffix??``}
+              @change=${a=>{let o=a.target.value,s=[...n];s[i]={...r,task_suffix:o||void 0},this._dispatchNodeUpdate(e.id,{typeConfig:{...t,mappers:s}})}}
+            />
+          </div>
+        `)}
+        <button class="type-add-btn" @click=${()=>{this._dispatchNodeUpdate(e.id,{typeConfig:{...t,mappers:[...n,{agent:``}]}})}}>+ Add mapper</button>
+      </div>
+      <div class="constraint-row">
+        <div class="constraint-label">Reducer Agent</div>
+        <select .value=${String(t.reducer??``)} @change=${n=>{let r=n.target.value;this._dispatchNodeUpdate(e.id,{typeConfig:{...t,reducer:r||void 0}})}}>
+          <option value="">-- Select agent --</option>
+          ${this._agents.map(e=>d`<option value=${e.id} ?selected=${e.id===t.reducer}>${e.id}${e.suspended?` (suspended)`:``}</option>`)}
+        </select>
+      </div>
+      <div class="constraint-row">
+        <div class="constraint-label">Reducer Prompt</div>
+        <textarea rows="2" placeholder="Instructions for the reducer..."
+          .value=${String(t.reducer_prompt??``)}
+          @change=${n=>{let r=n.target.value;this._dispatchNodeUpdate(e.id,{typeConfig:{...t,reducer_prompt:r||void 0}})}}
+        ></textarea>
+      </div>
+    `}_renderModelOverride(e){let t=new Map;for(let e of this._models){let n=t.get(e.provider);n||(n=[],t.set(e.provider,n)),n.push(e.modelId)}return d`
+      <div class="section-header">Model Override</div>
+      ${this._modelsLoading?d`<div class="loading">Loading models...</div>`:d`
+            <select
+              .value=${e.modelId??``}
+              @change=${t=>{let n=t.target.value;this._dispatchNodeUpdate(e.id,{modelId:n||void 0})}}
+            >
+              <option value="">-- Use agent default --</option>
+              ${[...t.entries()].map(([t,n])=>d`
+                  <optgroup label=${t}>
+                    ${n.map(t=>d`
+                        <option
+                          value=${t}
+                          ?selected=${t===e.modelId}
+                        >
+                          ${t}
+                        </option>
+                      `)}
+                  </optgroup>
+                `)}
+            </select>
+          `}
+    `}_renderActions(e){return d`
+      <div class="actions">
+        <button
+          class="btn btn-accent"
+          @click=${()=>{this.dispatchEvent(new CustomEvent(`node-duplicate`,{detail:{nodeId:e.id},bubbles:!0,composed:!0}))}}
+        >
+          Duplicate
+        </button>
+        <button
+          class="btn btn-danger"
+          @click=${()=>{this.dispatchEvent(new CustomEvent(`node-delete`,{detail:{nodeId:e.id},bubbles:!0,composed:!0}))}}
+        >
+          Delete
+        </button>
+      </div>
+    `}_getDependencies(e){return this.allEdges.filter(t=>t.target===e.id)}_dispatchNodeUpdate(e,t){this.dispatchEvent(new CustomEvent(`node-update`,{detail:{nodeId:e,partial:t},bubbles:!0,composed:!0}))}_truncate(e,t){return e.length>t?e.slice(0,t-1)+`…`:e}};u([a({attribute:!1})],A.prototype,`node`,void 0),u([a({attribute:!1})],A.prototype,`allNodes`,void 0),u([a({attribute:!1})],A.prototype,`allEdges`,void 0),u([a({attribute:!1})],A.prototype,`rpcClient`,void 0),u([c()],A.prototype,`_agents`,void 0),u([c()],A.prototype,`_models`,void 0),u([c()],A.prototype,`_allowAgents`,void 0),u([c()],A.prototype,`_agentsLoading`,void 0),u([c()],A.prototype,`_modelsLoading`,void 0),u([c()],A.prototype,`_showVariables`,void 0),u([c()],A.prototype,`_cycleErrors`,void 0),A=u([i(`ic-node-editor`)],A);function j(){return{nodes:[{id:`step-1`,task:`Research the latest developments in renewable energy technology. Focus on solar, wind, and battery storage advances from the past year.`,dependsOn:[],position:{x:300,y:50}},{id:`step-2`,task:`Analyze the research findings and identify the top 3 most promising technologies.
+
+Research data:
+{{step-1.result}}`,dependsOn:[`step-1`],position:{x:300,y:220}},{id:`step-3`,task:`Write a concise executive summary based on the analysis.
+
+Analysis:
+{{step-2.result}}`,dependsOn:[`step-2`],position:{x:300,y:390}}],edges:[{id:`step-1->step-2`,source:`step-1`,target:`step-2`},{id:`step-2->step-3`,source:`step-2`,target:`step-3`}],settings:{label:`Linear Chain`}}}function M(){return{nodes:[{id:`start`,task:`Define the key aspects to investigate about the given topic. List 2 focus areas, one per line.`,dependsOn:[],position:{x:300,y:50}},{id:`worker-1`,task:`Investigate the first focus area from the plan. Provide detailed findings.
+
+Plan:
+{{start.result}}`,dependsOn:[`start`],position:{x:180,y:220}},{id:`worker-2`,task:`Investigate the second focus area from the plan. Provide detailed findings.
+
+Plan:
+{{start.result}}`,dependsOn:[`start`],position:{x:420,y:220}},{id:`merge`,task:`Synthesize both sets of findings into a unified report.
+
+Findings 1:
+{{worker-1.result}}
+
+Findings 2:
+{{worker-2.result}}`,dependsOn:[`worker-1`,`worker-2`],position:{x:300,y:390}}],edges:[{id:`start->worker-1`,source:`start`,target:`worker-1`},{id:`start->worker-2`,source:`start`,target:`worker-2`},{id:`worker-1->merge`,source:`worker-1`,target:`merge`},{id:`worker-2->merge`,source:`worker-2`,target:`merge`}],settings:{label:`Fan-out Fan-in`}}}function N(){return{nodes:[{id:`track-a1`,task:`Gather quantitative data and statistics on the topic.`,dependsOn:[],position:{x:200,y:50}},{id:`track-a2`,task:`Create charts and visualizations from the quantitative data.
+
+Data:
+{{track-a1.result}}`,dependsOn:[`track-a1`],position:{x:200,y:220}},{id:`track-b1`,task:`Collect qualitative insights and expert opinions on the topic.`,dependsOn:[],position:{x:450,y:50}},{id:`track-b2`,task:`Summarize the qualitative insights into key themes.
+
+Insights:
+{{track-b1.result}}`,dependsOn:[`track-b1`],position:{x:450,y:220}}],edges:[{id:`track-a1->track-a2`,source:`track-a1`,target:`track-a2`},{id:`track-b1->track-b2`,source:`track-b1`,target:`track-b2`}],settings:{label:`Parallel Tracks`}}}function P(){return{nodes:[{id:`worker-1`,task:`Monitor social media channels for brand mentions and sentiment.`,dependsOn:[],position:{x:150,y:100}},{id:`worker-2`,task:`Check system health dashboards and report any anomalies.`,dependsOn:[],position:{x:350,y:100}},{id:`worker-3`,task:`Review and categorize incoming support tickets by priority.`,dependsOn:[],position:{x:550,y:100}}],edges:[],settings:{label:`Independent Workers`}}}function F(){return{nodes:[{id:`top`,task:`Break down the project requirements into technical and business categories.`,dependsOn:[],position:{x:300,y:50}},{id:`left`,task:`Evaluate the technical requirements and estimate implementation effort.
+
+Requirements:
+{{top.result}}`,dependsOn:[`top`],position:{x:180,y:220}},{id:`right`,task:`Assess the business requirements and estimate business value.
+
+Requirements:
+{{top.result}}`,dependsOn:[`top`],position:{x:420,y:220}},{id:`bottom`,task:`Create a prioritized roadmap combining technical effort and business value.
+
+Technical evaluation:
+{{left.result}}
+
+Business evaluation:
+{{right.result}}`,dependsOn:[`left`,`right`],position:{x:300,y:390}}],edges:[{id:`top->left`,source:`top`,target:`left`},{id:`top->right`,source:`top`,target:`right`},{id:`left->bottom`,source:`left`,target:`bottom`},{id:`right->bottom`,source:`right`,target:`bottom`}],settings:{label:`Diamond`}}}function I(){return{nodes:[{id:`research`,task:`Research the given topic and prepare a comprehensive briefing document with key facts, statistics, and relevant context.`,dependsOn:[],position:{x:300,y:50}},{id:`debate`,task:`Debate the implications and best course of action based on the research.
+
+Research briefing:
+{{research.result}}`,dependsOn:[`research`],typeId:`debate`,typeConfig:{agents:[],rounds:2},position:{x:300,y:220}},{id:`conclusion`,task:`Based on the debate transcript, write a balanced conclusion with actionable recommendations.
+
+Debate outcome:
+{{debate.result}}`,dependsOn:[`debate`],position:{x:300,y:390}}],edges:[{id:`research->debate`,source:`research`,target:`debate`},{id:`debate->conclusion`,source:`debate`,target:`conclusion`}],settings:{label:`Debate Pipeline`}}}function L(){return{nodes:[{id:`research`,task:`Research the given topic thoroughly and prepare a comprehensive briefing with key facts and arguments for and against.`,dependsOn:[],position:{x:300,y:50}},{id:`vote`,task:`Based on the research, vote on the best course of action.
+
+Research briefing:
+{{research.result}}`,dependsOn:[`research`],typeId:`vote`,typeConfig:{voters:[],verdict_format:`YES or NO with one-line justification`},position:{x:300,y:220}},{id:`summarize`,task:`Summarize the voting results and recommend next steps based on the majority decision.
+
+Vote results:
+{{vote.result}}`,dependsOn:[`vote`],position:{x:300,y:390}}],edges:[{id:`research->vote`,source:`research`,target:`vote`},{id:`vote->summarize`,source:`vote`,target:`summarize`}],settings:{label:`Vote Pipeline`}}}function R(){return{nodes:[{id:`draft`,task:`Write a first draft addressing the given topic. Include all key points but don't worry about polish.`,dependsOn:[],position:{x:300,y:50}},{id:`refine`,task:`Review and refine the draft. Each reviewer improves upon the previous version.
+
+Draft:
+{{draft.result}}`,dependsOn:[`draft`],typeId:`refine`,typeConfig:{reviewers:[]},position:{x:300,y:220}},{id:`publish`,task:`Format the refined document for publication. Add headers, sections, and a summary.
+
+Refined content:
+{{refine.result}}`,dependsOn:[`refine`],position:{x:300,y:390}}],edges:[{id:`draft->refine`,source:`draft`,target:`refine`},{id:`refine->publish`,source:`refine`,target:`publish`}],settings:{label:`Refine Chain`}}}function z(){return{nodes:[{id:`plan`,task:`Break the topic into distinct sub-topics that can be researched independently. List each sub-topic clearly.`,dependsOn:[],position:{x:300,y:50}},{id:`analyze`,task:`Each mapper researches their assigned sub-topic in depth.
+
+Sub-topics:
+{{plan.result}}`,dependsOn:[`plan`],typeId:`map-reduce`,typeConfig:{mappers:[],reducer:``,reducer_prompt:`Synthesize all mapper outputs into a comprehensive report with sections for each sub-topic.`},position:{x:300,y:220}},{id:`report`,task:`Format the synthesized analysis into a polished final report with executive summary.
+
+Analysis:
+{{analyze.result}}`,dependsOn:[`analyze`],position:{x:300,y:390}}],edges:[{id:`plan->analyze`,source:`plan`,target:`analyze`},{id:`analyze->report`,source:`analyze`,target:`report`}],settings:{label:`Map-Reduce Pipeline`}}}function B(){return{nodes:[{id:`prepare`,task:`Analyze the request and prepare a detailed action plan. Include cost estimates and risk assessment.`,dependsOn:[],position:{x:300,y:50}},{id:`approve`,task:`Review the action plan and approve or deny execution.
+
+Action plan:
+{{prepare.result}}`,dependsOn:[`prepare`],typeId:`approval-gate`,typeConfig:{message:`Please review the action plan and reply APPROVE or DENY.`,timeout_minutes:60},position:{x:300,y:220}},{id:`execute`,task:`Execute the approved action plan.
+
+Approved plan:
+{{prepare.result}}
+
+Approval:
+{{approve.result}}`,dependsOn:[`approve`],position:{x:300,y:390}}],edges:[{id:`prepare->approve`,source:`prepare`,target:`approve`},{id:`approve->execute`,source:`approve`,target:`execute`}],settings:{label:`Approval Gate Pipeline`}}}function V(){return{nodes:[],edges:[],settings:{label:`Untitled Pipeline`}}}var H=[{id:`linear-chain`,name:`Linear Chain`,description:`Sequential pipeline: each step depends on the previous one.`,nodeCount:`3 nodes`,icon:`↓`,create:j},{id:`fan-out-fan-in`,name:`Fan-out Fan-in`,description:`Parallel workers with a single merge point.`,nodeCount:`4 nodes`,icon:`↔`,create:M},{id:`parallel-tracks`,name:`Parallel Tracks`,description:`Two independent streams running side by side.`,nodeCount:`4 nodes`,icon:`≡`,create:N},{id:`independent-workers`,name:`Independent Workers`,description:`Unconnected nodes that run in parallel with no dependencies.`,nodeCount:`3 nodes`,icon:`☰`,create:P},{id:`diamond`,name:`Diamond`,description:`Fork into two paths, then converge at the end.`,nodeCount:`4 nodes`,icon:`◈`,create:F},{id:`debate`,name:`Debate Pipeline`,description:`Research, multi-agent debate, then synthesize conclusions.`,nodeCount:`3 nodes`,icon:`⚔`,create:I},{id:`vote-pipeline`,name:`Vote Pipeline`,description:`Research a topic, have multiple agents vote, then summarize results.`,nodeCount:`3 nodes`,icon:`✔`,create:L},{id:`refine-chain`,name:`Refine Chain`,description:`Draft content, refine through sequential reviewers, then publish.`,nodeCount:`3 nodes`,icon:`✎`,create:R},{id:`map-reduce`,name:`Map-Reduce`,description:`Split work across parallel mappers, then reduce into a single output.`,nodeCount:`3 nodes`,icon:`⇄`,create:z},{id:`approval-gate`,name:`Approval Gate`,description:`Prepare an action, wait for human approval, then execute.`,nodeCount:`3 nodes`,icon:`☑`,create:B},{id:`blank`,name:`Blank Canvas`,description:`Start from scratch with an empty graph.`,nodeCount:`0 nodes`,icon:`➕`,create:V}],U=class extends r{constructor(...e){super(...e),this.open=!1,this._showJsonImport=!1,this._jsonError=``,this._jsonText=``,this._onKeyDown=e=>{if(e.key===`Escape`){e.preventDefault(),this._fireCancel();return}if(e.key===`Tab`){let t=this.shadowRoot?.querySelectorAll(`button:not([disabled]), textarea`);if(!t||t.length===0)return;let n=t[0],r=t[t.length-1],i=this.shadowRoot?.activeElement;e.shiftKey&&i===n?(e.preventDefault(),r.focus()):!e.shiftKey&&i===r&&(e.preventDefault(),n.focus())}}}static{this.styles=[l,o,e`
+      :host {
+        display: contents;
+      }
+
+      .backdrop {
+        position: fixed;
+        inset: 0;
+        background: rgba(0, 0, 0, 0.6);
+        z-index: 9999;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .dialog {
+        max-width: 40rem;
+        width: calc(100% - var(--ic-space-lg) * 2);
+        max-height: calc(100vh - var(--ic-space-lg) * 2);
+        overflow-y: auto;
+        background: var(--ic-surface);
+        border: 1px solid var(--ic-border);
+        border-radius: var(--ic-radius-lg);
+        padding: var(--ic-space-lg);
+        box-shadow: var(--ic-shadow-lg);
+      }
+
+      .header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: var(--ic-space-md);
+      }
+
+      .title {
+        font-size: var(--ic-text-lg);
+        font-weight: 600;
+        color: var(--ic-text);
+        margin: 0;
+      }
+
+      .toggle-link {
+        background: none;
+        border: none;
+        color: var(--ic-accent);
+        font-size: var(--ic-text-sm);
+        cursor: pointer;
+        padding: 0;
+        font-family: inherit;
+        text-decoration: underline;
+      }
+
+      .toggle-link:hover {
+        color: var(--ic-accent-hover);
+      }
+
+      /* Template grid */
+
+      .template-grid {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: var(--ic-space-md);
+        margin-bottom: var(--ic-space-lg);
+      }
+
+      @media (max-width: 480px) {
+        .template-grid {
+          grid-template-columns: 1fr;
+        }
+      }
+
+      .template-card {
+        border: 1px solid var(--ic-border);
+        border-radius: var(--ic-radius-md);
+        padding: var(--ic-space-md);
+        cursor: pointer;
+        transition:
+          border-color var(--ic-transition),
+          background var(--ic-transition);
+        text-align: center;
+        background: transparent;
+        color: inherit;
+        font-family: inherit;
+        width: 100%;
+      }
+
+      .template-card:hover {
+        border-color: var(--ic-accent);
+        background: var(--ic-surface-2, rgba(255, 255, 255, 0.03));
+      }
+
+      .card-icon {
+        font-size: 2rem;
+        line-height: 1;
+        margin-bottom: var(--ic-space-xs);
+      }
+
+      .card-name {
+        font-size: var(--ic-text-sm);
+        font-weight: 600;
+        color: var(--ic-text);
+        margin-bottom: var(--ic-space-xs);
+      }
+
+      .card-desc {
+        font-size: var(--ic-text-xs);
+        color: var(--ic-text-muted);
+        line-height: 1.4;
+        margin-bottom: var(--ic-space-xs);
+      }
+
+      .card-meta {
+        font-size: var(--ic-text-xs);
+        color: var(--ic-text-dim, var(--ic-text-muted));
+      }
+
+      /* JSON import */
+
+      .json-section {
+        margin-bottom: var(--ic-space-lg);
+      }
+
+      .json-textarea {
+        width: 100%;
+        min-height: 12rem;
+        padding: var(--ic-space-sm);
+        background: var(--ic-surface-2, var(--ic-surface));
+        color: var(--ic-text);
+        border: 1px solid var(--ic-border);
+        border-radius: var(--ic-radius-md);
+        font-family: monospace;
+        font-size: var(--ic-text-sm);
+        resize: vertical;
+      }
+
+      .json-textarea::placeholder {
+        color: var(--ic-text-muted);
+      }
+
+      .json-error {
+        color: var(--ic-error);
+        font-size: var(--ic-text-xs);
+        margin-top: var(--ic-space-xs);
+      }
+
+      .import-btn {
+        margin-top: var(--ic-space-sm);
+        padding: var(--ic-space-sm) var(--ic-space-md);
+        background: var(--ic-accent);
+        border: 1px solid var(--ic-accent);
+        border-radius: var(--ic-radius-md);
+        color: #fff;
+        font-size: var(--ic-text-sm);
+        font-family: inherit;
+        cursor: pointer;
+        transition: background var(--ic-transition);
+      }
+
+      .import-btn:hover {
+        background: var(--ic-accent-hover);
+      }
+
+      /* Footer */
+
+      .footer {
+        display: flex;
+        justify-content: flex-end;
+      }
+
+      .cancel-btn {
+        padding: var(--ic-space-sm) var(--ic-space-md);
+        border-radius: var(--ic-radius-md);
+        font-size: var(--ic-text-sm);
+        font-family: inherit;
+        cursor: pointer;
+        background: transparent;
+        border: 1px solid var(--ic-border);
+        color: var(--ic-text-muted);
+        transition:
+          background var(--ic-transition),
+          border-color var(--ic-transition);
+      }
+
+      .cancel-btn:hover {
+        border-color: var(--ic-text-dim, var(--ic-text-muted));
+        color: var(--ic-text);
+      }
+    `]}updated(e){e.has(`open`)&&this.open&&(this._showJsonImport=!1,this._jsonError=``,this._jsonText=``,this.updateComplete.then(()=>{(this.shadowRoot?.querySelector(`button.template-card, button.cancel-btn`))?.focus()}))}_onBackdropClick(e){e.target.classList.contains(`backdrop`)&&this._fireCancel()}_onTemplateClick(e){let{nodes:t,edges:n,settings:r}=e.create();this.dispatchEvent(new CustomEvent(`template-select`,{detail:{nodes:t,edges:n,settings:r},bubbles:!0,composed:!0})),this._fireCancel()}_onToggleJsonImport(){this._showJsonImport=!this._showJsonImport,this._jsonError=``}_onJsonInput(e){this._jsonText=e.target.value,this._jsonError=``}_onJsonImport(){let e=this._jsonText.trim();if(!e){this._jsonError=`Please paste JSON content.`;return}let t;try{t=JSON.parse(e)}catch{this._jsonError=`Invalid JSON. Please check your syntax.`;return}let n=t.nodes;if(!Array.isArray(n)||n.length===0){this._jsonError=`JSON must contain a "nodes" array with at least one node.`;return}for(let e=0;e<n.length;e++){let t=n[e];if(!t||typeof t!=`object`){this._jsonError=`Node at index ${e} is not a valid object.`;return}let r=t.nodeId??t.id;if(typeof r!=`string`||!r){this._jsonError=`Node at index ${e} is missing "nodeId" or "id" (string).`;return}if(typeof t.task!=`string`||!t.task){this._jsonError=`Node at index ${e} is missing "task" (string).`;return}}let{nodes:r,edges:i}=G(n),a={label:typeof t.label==`string`&&t.label?t.label:`Imported Pipeline`,onFailure:t.onFailure===`continue`?`continue`:`fail-fast`};typeof t.timeoutMs==`number`&&(a.timeoutMs=t.timeoutMs),this.dispatchEvent(new CustomEvent(`template-select`,{detail:{nodes:r,edges:i,settings:a},bubbles:!0,composed:!0})),this._fireCancel()}_fireCancel(){this.dispatchEvent(new CustomEvent(`cancel`))}render(){return this.open?d`
+      <div
+        class="backdrop"
+        @click=${this._onBackdropClick}
+        @keydown=${this._onKeyDown}
+      >
+        <div
+          class="dialog"
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby="picker-title"
+        >
+          <div class="header">
+            <h2 class="title" id="picker-title">Choose a Template</h2>
+            <button
+              class="toggle-link"
+              @click=${this._onToggleJsonImport}
+            >
+              ${this._showJsonImport?`Back to templates`:`Or import JSON`}
+            </button>
+          </div>
+
+          ${this._showJsonImport?this._renderJsonImport():this._renderTemplateGrid()}
+
+          <div class="footer">
+            <button class="cancel-btn" @click=${this._fireCancel}>
+              Cancel
+            </button>
+          </div>
+        </div>
+      </div>
+    `:t}_renderTemplateGrid(){return d`
+      <div class="template-grid">
+        ${H.map(e=>d`
+            <button
+              class="template-card"
+              @click=${()=>this._onTemplateClick(e)}
+            >
+              <div class="card-icon">${e.icon}</div>
+              <div class="card-name">${e.name}</div>
+              <div class="card-desc">${e.description}</div>
+              <div class="card-meta">${e.nodeCount}</div>
+            </button>
+          `)}
+      </div>
+    `}_renderJsonImport(){return d`
+      <div class="json-section">
+        <textarea
+          class="json-textarea"
+          rows="12"
+          placeholder="Paste ExecutionGraph JSON..."
+          .value=${this._jsonText}
+          @input=${this._onJsonInput}
+        ></textarea>
+        ${this._jsonError?d`<div class="json-error">${this._jsonError}</div>`:t}
+        <button class="import-btn" @click=${this._onJsonImport}>
+          Import
+        </button>
+      </div>
+    `}};u([a({type:Boolean,reflect:!0})],U.prototype,`open`,void 0),u([c()],U.prototype,`_showJsonImport`,void 0),u([c()],U.prototype,`_jsonError`,void 0),u([c()],U.prototype,`_jsonText`,void 0),U=u([i(`ic-template-picker`)],U);var W=170;function G(e){let t=[],n=[];for(let r=0;r<e.length;r++){let i=e[r],a=(i.nodeId??i.id).trim(),o=i.task.trim(),s=Array.isArray(i.dependsOn)?i.dependsOn.filter(e=>typeof e==`string`):[],c={id:a,task:o,dependsOn:s,position:{x:300,y:50+r*W},...typeof i.agentId==`string`&&i.agentId?{agentId:i.agentId}:{},...typeof i.maxSteps==`number`?{maxSteps:i.maxSteps}:{},...typeof i.timeoutMs==`number`?{timeoutMs:i.timeoutMs}:{},...i.barrierMode===`all`||i.barrierMode===`majority`||i.barrierMode===`best-effort`?{barrierMode:i.barrierMode}:{},...typeof i.model==`string`&&i.model?{modelId:i.model}:typeof i.modelId==`string`&&i.modelId?{modelId:i.modelId}:{},...typeof i.retries==`number`&&i.retries>=0&&i.retries<=3?{retries:i.retries}:{},...i.contextMode===`full`||i.contextMode===`summary`||i.contextMode===`none`?{contextMode:i.contextMode}:i.context_mode===`full`||i.context_mode===`summary`||i.context_mode===`none`?{contextMode:i.context_mode}:{},typeId:i.typeId,typeConfig:i.typeConfig&&typeof i.typeConfig==`object`?i.typeConfig:void 0};t.push(c);for(let e of s)n.push({id:`${e}->${a}`,source:e,target:a})}return{nodes:t,edges:n}}var K=24,q=class extends r{constructor(...e){super(...e),this.rpcClient=null,this.graphId=``,this._graphState=null,this._stateUnsub=null,this._rpcStatusUnsub=null,this._serverLoadDone=!1,this._nodeCounter=0,this._viewport={x:0,y:0,scale:1},this._nodes=[],this._edges=[],this._selectedNodeIds=new Set,this._selectedEdgeId=null,this._showDeleteConfirm=!1,this._deleteMessage=``,this._snapToGrid=!1,this._validationResult=null,this._settings={label:`Untitled Pipeline`,onFailure:`fail-fast`},this._highlightNodeIds=[],this._validateResultText=``,this._showTemplatePicker=!1,this._showVariablePrompt=!1,this._variableNames=[],this._draftId=``,this._isDirty=!1,this._pendingDeleteNodeIds=[],this._pendingDeleteEdgeId=null,this._validationTimer=null,this._beforeUnloadHandler=e=>{this._isDirty&&e.preventDefault()},this._hashChangeHandler=()=>{this._isDirty&&this._builderHash&&(window.confirm(`You have unsaved changes. Leave anyway?`)||(window.location.hash=this._builderHash))},this._builderHash=``,this._onKeyDown=e=>{let t=e.composedPath()[0];if(t instanceof HTMLInputElement||t instanceof HTMLTextAreaElement||t instanceof HTMLSelectElement||t instanceof Element&&t.closest(`[contenteditable]`))return;let n=e.metaKey||e.ctrlKey;if(n&&e.shiftKey&&e.key===`z`){e.preventDefault(),this._graphState?.redo();return}if(n&&!e.shiftKey&&e.key===`z`){e.preventDefault(),this._graphState?.undo();return}if(n&&e.key===`a`){e.preventDefault(),this._graphState?.selectAll();return}if(n&&e.key===`d`){e.preventDefault(),this._duplicateSelected();return}if(!n){if(e.key===`Backspace`||e.key===`Delete`){e.preventDefault(),this._deleteSelected();return}if(e.key===`Escape`){this._graphState?.clearSelection(),this.renderRoot.querySelector(`ic-graph-canvas`)?.cancelInteraction();return}if(e.key===`n`||e.key===`N`){this._addNodeAtViewportCenter();return}if(e.key===`f`||e.key===`F`){this._fitView();return}if(e.key===`l`||e.key===`L`){this._autoLayout();return}if(e.key===`+`||e.key===`=`){this._zoomStep(1);return}if(e.key===`-`){this._zoomStep(-1);return}if(e.key===`0`){this._graphState?.setViewport({x:0,y:0,scale:1});return}if(e.key===`Tab`){e.preventDefault(),this._cycleNodeSelection(e.shiftKey?-1:1);return}if(e.key===`ArrowUp`||e.key===`ArrowDown`||e.key===`ArrowLeft`||e.key===`ArrowRight`){e.preventDefault(),this._nudgeSelected(e.key);return}}}}static{this.styles=[l,o,e`
+    :host { display: block; height: 100%; }
+    .builder-container { display: flex; flex-direction: column; height: calc(100vh - 120px); }
+    .toolbar { display: flex; gap: 4px; padding: 4px 0; }
+    .toolbar-btn { padding: 4px 12px; background: var(--ic-surface-2); border: 1px solid var(--ic-border);
+      border-radius: var(--ic-radius-sm); color: var(--ic-text-muted); font-size: var(--ic-text-xs); cursor: pointer; }
+    .toolbar-btn:hover { background: var(--ic-accent); color: var(--ic-text); }
+    .toolbar-btn--active { background: var(--ic-accent); color: var(--ic-text); border-color: var(--ic-accent); }
+    .builder-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);
+      background: var(--ic-bg); overflow: hidden; }
+    .mobile-message { display: none; text-align: center; padding: 3rem 1.5rem; color: var(--ic-text-muted); }
+    .mobile-message h2 { font-size: 1.25rem; font-weight: 600; margin-bottom: 0.5rem; }
+    .mobile-message p { font-size: var(--ic-text-sm); color: var(--ic-text-dim); }
+    @media (max-width: 767px) {
+      .builder-container { display: none; }
+      .mobile-message { display: block; }
+    }
+  `]}connectedCallback(){super.connectedCallback(),this._graphState=C(),this._stateUnsub=this._graphState.subscribe(()=>{let e=this._graphState.getSnapshot();this._viewport=e.viewport,this._nodes=e.nodes,this._edges=e.edges,this._selectedNodeIds=e.selectedNodeIds,this._selectedEdgeId=e.selectedEdgeId,this._settings=e.settings,this._isDirty=e.isDirty,this._validationTimer&&s(this._validationTimer),this._validationTimer=n(()=>{let e=D(this._nodes,this._edges);this._graphState?.setValidation(e),this._validationResult=e},150)});let e=this._graphState.getSnapshot();this._viewport=e.viewport,this._nodes=e.nodes,this._edges=e.edges,this._selectedNodeIds=e.selectedNodeIds,this._selectedEdgeId=e.selectedEdgeId,this._settings=e.settings,document.addEventListener(`keydown`,this._onKeyDown),window.addEventListener(`beforeunload`,this._beforeUnloadHandler),this._builderHash=window.location.hash,window.addEventListener(`hashchange`,this._hashChangeHandler),this.graphId?(this._draftId=this.graphId,this._loadGraph()):(this._draftId=crypto.randomUUID(),this._showTemplatePicker=!0)}disconnectedCallback(){document.removeEventListener(`keydown`,this._onKeyDown),window.removeEventListener(`beforeunload`,this._beforeUnloadHandler),window.removeEventListener(`hashchange`,this._hashChangeHandler),this._rpcStatusUnsub?.(),this._rpcStatusUnsub=null,this._validationTimer&&=(s(this._validationTimer),null),this._stateUnsub&&=(this._stateUnsub(),null),this._graphState=null,super.disconnectedCallback()}updated(e){e.has(`rpcClient`)&&this.rpcClient&&this.graphId&&!this._serverLoadDone&&(this._rpcStatusUnsub?.(),this.rpcClient.status===`connected`?this._loadGraph():this._rpcStatusUnsub=this.rpcClient.onStatusChange(e=>{e===`connected`&&!this._serverLoadDone&&(this._rpcStatusUnsub=null,this._loadGraph())}))}get _breadcrumbs(){let e=[{label:`Pipelines`,route:`pipelines`}];return this.graphId?(e.push({label:this.graphId}),e.push({label:`Edit`})):e.push({label:`New Pipeline`}),e}_onNodeSelect(e){let{nodeId:t,multi:n}=e.detail;this._graphState?.selectNode(t,n)}_onNodeDragEnd(e){this._graphState?.moveNodes(e.detail.moves)}_onEdgeCreate(e){let{source:t,target:n}=e.detail,r=this._graphState?.getSnapshot();if(!r||t===n||r.edges.some(e=>e.source===t&&e.target===n)||w(r.edges,t,n))return;this._graphState?.addEdge(t,n);let i=r.nodes.find(e=>e.id===n);i&&!i.dependsOn.includes(t)&&this._graphState?.updateNode(n,{dependsOn:[...i.dependsOn,t]})}_onCanvasClick(){this._graphState?.clearSelection()}_onHighlightNodes(e){this._highlightNodeIds=e.detail.nodeIds,n(()=>{this._highlightNodeIds=[]},3e3)}_onNodeUpdate(e){this._graphState?.updateNode(e.detail.nodeId,e.detail.partial)}_onNodeDelete(e){this._graphState?.selectNode(e.detail.nodeId),this._deleteSelected()}_onNodeDuplicate(e){this._graphState?.selectNode(e.detail.nodeId),this._duplicateSelected()}_onEditorEdgeAdd(e){let{source:t,target:n}=e.detail;if(!this._graphState)return;let r=this._graphState.getSnapshot();if(t===n||r.edges.some(e=>e.source===t&&e.target===n)||w(r.edges,t,n))return;this._graphState.addEdge(t,n);let i=r.nodes.find(e=>e.id===n);i&&!i.dependsOn.includes(t)&&this._graphState.updateNode(n,{dependsOn:[...i.dependsOn,t]})}_onEditorEdgeRemove(e){let{source:t,target:n}=e.detail;if(!this._graphState)return;let r=this._graphState.getSnapshot(),i=`${t}->${n}`;r.edges.find(e=>e.id===i)&&this._graphState.removeEdge(i);let a=r.nodes.find(e=>e.id===n);if(a){let e=a.dependsOn.filter(e=>e!==t);this._graphState.updateNode(n,{dependsOn:e})}}async _onValidate(){if(!this.rpcClient||!this._graphState)return;let e=this._graphState.getSnapshot(),t={nodes:e.nodes.map(t=>{let n=e.edges.filter(e=>e.target===t.id).map(e=>e.source);return{nodeId:t.id,task:t.task,agentId:t.agentId,dependsOn:n,maxSteps:t.maxSteps,timeoutMs:t.timeoutMs,barrierMode:t.barrierMode,model:t.modelId,retries:t.retries,type_id:t.typeId,type_config:t.typeConfig,context_mode:t.contextMode}}),label:e.settings.label||void 0,onFailure:e.settings.onFailure,timeoutMs:e.settings.timeoutMs,budget:e.settings.budget};try{let n=await this.rpcClient.call(`graph.define`,t);this._validateResultText=`Valid: ${n.nodeCount??e.nodes.length} nodes${Array.isArray(n.executionOrder)?`, order: ${n.executionOrder.join(` -> `)}`:``}`}catch(e){this._validateResultText=`Error: ${e instanceof Error?e.message:String(e)}`}}_addNodeAtViewportCenter(){if(!this._graphState)return;let e=this._graphState.getSnapshot();this._nodeCounter=Math.max(this._nodeCounter,e.nodes.length);let t;do this._nodeCounter++,t=`node-${this._nodeCounter}`;while(e.nodes.some(e=>e.id===t));let n=this.renderRoot.querySelector(`.canvas-area`)?.getBoundingClientRect(),r=200,i=200;if(n){let e=p(n.left+n.width/2,n.top+n.height/2,n,this._viewport);r=e.x-200/2,i=e.y-80/2}this._graphState.addNode({id:t,task:``,dependsOn:[],position:{x:r,y:i}})}_duplicateSelected(){if(!this._graphState)return;let e=this._graphState.getSnapshot();if(e.selectedNodeIds.size!==0)for(let t of e.selectedNodeIds){let n=e.nodes.find(e=>e.id===t);if(!n)continue;let r=`${n.id}-copy`,i=1,a=new Set(e.nodes.map(e=>e.id));for(;a.has(r);)i++,r=`${n.id}-copy-${i}`;a.add(r),this._graphState.addNode({id:r,task:n.task,agentId:n.agentId,dependsOn:[],maxSteps:n.maxSteps,timeoutMs:n.timeoutMs,barrierMode:n.barrierMode,modelId:n.modelId,retries:n.retries,typeId:n.typeId,typeConfig:n.typeConfig?{...n.typeConfig}:void 0,contextMode:n.contextMode,position:{x:n.position.x+60,y:n.position.y+40}})}}_deleteSelected(){if(!this._graphState)return;let e=this._graphState.getSnapshot();if(e.selectedEdgeId&&e.selectedNodeIds.size===0){this._graphState.removeEdge(e.selectedEdgeId);return}if(e.selectedNodeIds.size===0)return;let t=[...e.selectedNodeIds],n=[];for(let r of t)for(let t of e.edges)t.source===r&&!e.selectedNodeIds.has(t.target)&&n.push(`"${t.target}" depends on "${r}"`);if(n.length>0)this._deleteMessage=`Deleting will break dependencies:\n${n.join(`
+`)}`,this._pendingDeleteNodeIds=t,this._showDeleteConfirm=!0;else for(let e of t)this._graphState.removeNode(e)}_confirmDelete(){if(this._graphState){for(let e of this._pendingDeleteNodeIds)this._graphState.removeNode(e);this._pendingDeleteEdgeId&&this._graphState.removeEdge(this._pendingDeleteEdgeId),this._showDeleteConfirm=!1,this._pendingDeleteNodeIds=[],this._pendingDeleteEdgeId=null}}_fitView(){if(!this._graphState)return;let e=this._graphState.getSnapshot();if(e.nodes.length===0)return;let t=this.renderRoot.querySelector(`.canvas-area`)?.getBoundingClientRect();if(!t)return;let n=h(e.nodes,t.width,t.height);this._graphState.setViewport(n)}_autoLayout(){if(!this._graphState)return;let e=this._graphState.getSnapshot();if(e.nodes.length===0)return;let t=v(e.nodes,e.edges),n=[];for(let[e,r]of t.positions)n.push({nodeId:e,position:r});this._graphState.moveNodes(n)}_zoomStep(e){if(!this._graphState)return;let t=this.renderRoot.querySelector(`.canvas-area`)?.getBoundingClientRect();if(!t)return;let n=t.width/2,r=t.height/2,i=e>0?-100:100,a=g(this._viewport,n,r,i,m,2);this._graphState.setViewport(a)}_cycleNodeSelection(e){if(!this._graphState)return;let t=this._graphState.getSnapshot();if(t.nodes.length===0)return;let n=[...t.nodes].sort((e,t)=>e.position.y===t.position.y?e.position.x-t.position.x:e.position.y-t.position.y),r=-1;if(t.selectedNodeIds.size===1){let e=[...t.selectedNodeIds][0];r=n.findIndex(t=>t.id===e)}let i=r+e;i<0&&(i=n.length-1),i>=n.length&&(i=0),this._graphState.selectNode(n[i].id)}_nudgeSelected(e){if(!this._graphState)return;let t=this._graphState.getSnapshot();if(t.selectedNodeIds.size===0)return;let n=0,r=0;switch(e){case`ArrowUp`:r=-24;break;case`ArrowDown`:r=K;break;case`ArrowLeft`:n=-24;break;case`ArrowRight`:n=K;break}let i=[];for(let e of t.selectedNodeIds){let a=t.nodes.find(t=>t.id===e);if(!a)continue;let o=a.position.x+n,s=a.position.y+r;this._snapToGrid&&(o=Math.round(o/K)*K,s=Math.round(s/K)*K),i.push({nodeId:e,position:{x:o,y:s}})}this._graphState.moveNodes(i)}async _loadGraph(){if(!(!this._graphState||!this.graphId)&&this.rpcClient)try{let e=await this.rpcClient.call(`graph.load`,{id:this.graphId});if(e&&this._graphState){this._graphState.reset();let t=[],n=[];for(let n of e.nodes){let e={id:n.id??n.nodeId,task:n.task??``,agentId:n.agentId??n.agent,dependsOn:n.dependsOn??[],maxSteps:n.maxSteps,timeoutMs:n.timeoutMs,barrierMode:n.barrierMode,modelId:n.modelId??n.model,retries:typeof n.retries==`number`?n.retries:void 0,contextMode:n.contextMode===`full`||n.contextMode===`summary`||n.contextMode===`none`?n.contextMode:n.context_mode===`full`||n.context_mode===`summary`||n.context_mode===`none`?n.context_mode:void 0,typeId:n.typeId,typeConfig:n.typeConfig&&typeof n.typeConfig==`object`?n.typeConfig:void 0,position:n.position??{x:0,y:0}};t.push(e)}if(e.edges&&e.edges.length>0)for(let t of e.edges)n.push(t);else for(let e of t)for(let t of e.dependsOn)n.push({id:`${t}->${e.id}`,source:t,target:e.id});if(t.length>0&&t.every(e=>e.position.x===0&&e.position.y===0)){let e=v(t,n);for(let n of t){let t=e.positions.get(n.id);t&&(n.position=t)}}for(let e of t)this._graphState.addNode(e);for(let e of n)this._graphState.addEdge(e.source,e.target);let r={...e.settings,...e.label?{label:e.label}:{}};Object.keys(r).length>0&&this._graphState.updateSettings(r),this._serverLoadDone=!0}}catch{}}_onTemplateSelect(e){if(!this._graphState)return;let{nodes:t,edges:n,settings:r}=e.detail;this._graphState.reset();for(let e of t)this._graphState.addNode(e);for(let e of n)this._graphState.addEdge(e.source,e.target);(r.label||r.onFailure)&&this._graphState.updateSettings(r),this._showTemplatePicker=!1}async _onSaveDraft(){if(!this._graphState)return;let e=this._graphState.getSnapshot();if(!this.rpcClient){f.show(`Cannot save: not connected to daemon`,`error`);return}try{await this.rpcClient.call(`graph.save`,{id:this._draftId,label:e.settings.label,nodes:e.nodes,edges:e.edges,settings:e.settings}),this._graphState.markClean(),f.show(`Pipeline saved`,`success`)}catch(e){f.show(`Save failed: ${e instanceof Error?e.message:`Unknown error`}`,`error`)}}async _onRun(){if(!this.rpcClient||!this._graphState)return;let e=this._graphState.getSnapshot(),t=b(e.nodes.map(e=>e.task));if(t.length>0){this._variableNames=t,this._showVariablePrompt=!0;return}await this._executeGraph(e.nodes.map(e=>e.task))}async _onVariableConfirm(e){if(this._showVariablePrompt=!1,!this.rpcClient||!this._graphState)return;let t=this._graphState.getSnapshot().nodes.map(t=>y(t.task,e.detail.values));await this._executeGraph(t)}async _executeGraph(e){if(!this.rpcClient||!this._graphState)return;let t=this._graphState.getSnapshot(),n={nodes:t.nodes.map((n,r)=>{let i=t.edges.filter(e=>e.target===n.id).map(e=>e.source);return{nodeId:n.id,task:e[r],agentId:n.agentId,dependsOn:i,maxSteps:n.maxSteps,timeoutMs:n.timeoutMs,barrierMode:n.barrierMode,model:n.modelId,retries:n.retries,type_id:n.typeId,type_config:n.typeConfig,context_mode:n.contextMode}}),label:t.settings.label||void 0,onFailure:t.settings.onFailure,timeoutMs:t.settings.timeoutMs,budget:t.settings.budget};try{let e=await this.rpcClient.call(`graph.execute`,n);this.dispatchEvent(new CustomEvent(`navigate`,{detail:`pipelines/${e.graphId}`,bubbles:!0,composed:!0}))}catch(e){f.show(`Run failed: ${e instanceof Error?e.message:String(e)}`,`error`)}}render(){let e=this._graphState?.getSnapshot(),n=e&&e.selectedNodeIds.size===1?e.nodes.find(t=>e.selectedNodeIds.has(t.id))??null:null;return d`
+      <ic-breadcrumb .items=${this._breadcrumbs}
+        @navigate=${e=>this.dispatchEvent(new CustomEvent(`navigate`,{detail:e.detail,bubbles:!0,composed:!0}))}
+      ></ic-breadcrumb>
+      <div class="mobile-message">
+        <h2>Desktop Required</h2>
+        <p>The pipeline builder requires a desktop browser. Please use a screen wider than 768px.</p>
+      </div>
+      <div class="builder-container">
+        <ic-graph-settings
+          .settings=${this._settings}
+          .hasErrors=${(this._validationResult?.errors.length??0)>0}
+          .isDirty=${this._isDirty}
+          .validateResult=${this._validateResultText}
+          @settings-change=${e=>this._graphState?.updateSettings(e.detail)}
+          @validate=${this._onValidate}
+          @save-draft=${this._onSaveDraft}
+          @run=${this._onRun}
+        ></ic-graph-settings>
+        <div class="toolbar">
+          <button class="toolbar-btn ${this._snapToGrid?`toolbar-btn--active`:``}"
+            @click=${()=>{this._snapToGrid=!this._snapToGrid}}
+            title="Snap to grid (24px)">Grid</button>
+          <button class="toolbar-btn"
+            @click=${()=>{this._showTemplatePicker=!0}}
+            title="Choose a template">Templates</button>
+        </div>
+        <div class="builder-body">
+          <div class="canvas-area">
+            <ic-graph-canvas
+              .viewport=${this._viewport}
+              .nodes=${this._nodes}
+              .edges=${this._edges}
+              .selectedNodeIds=${this._selectedNodeIds}
+              .selectedEdgeId=${this._selectedEdgeId}
+              .snapToGrid=${this._snapToGrid}
+              .highlightNodeIds=${this._highlightNodeIds}
+              @viewport-change=${e=>{this._graphState?.setViewport(e.detail)}}
+              @edge-select=${e=>{this._graphState?.selectEdge(e.detail)}}
+              @node-select=${this._onNodeSelect}
+              @node-drag-end=${this._onNodeDragEnd}
+              @edge-create=${this._onEdgeCreate}
+              @canvas-click=${this._onCanvasClick}
+            ></ic-graph-canvas>
+            <ic-graph-validation
+              .validationResult=${this._validationResult}
+              @highlight-nodes=${this._onHighlightNodes}
+            ></ic-graph-validation>
+          </div>
+          ${n?d`
+            <ic-node-editor
+              .node=${n}
+              .allNodes=${this._nodes}
+              .allEdges=${this._edges}
+              .rpcClient=${this.rpcClient}
+              @node-update=${this._onNodeUpdate}
+              @node-delete=${this._onNodeDelete}
+              @node-duplicate=${this._onNodeDuplicate}
+              @edge-add=${this._onEditorEdgeAdd}
+              @edge-remove=${this._onEditorEdgeRemove}
+            ></ic-node-editor>
+          `:t}
+        </div>
+      </div>
+      <ic-confirm-dialog
+        ?open=${this._showDeleteConfirm}
+        title="Delete Node"
+        .message=${this._deleteMessage}
+        variant="danger"
+        confirmLabel="Delete"
+        @confirm=${this._confirmDelete}
+        @cancel=${()=>{this._showDeleteConfirm=!1,this._pendingDeleteNodeIds=[],this._pendingDeleteEdgeId=null}}
+      ></ic-confirm-dialog>
+      <ic-template-picker
+        ?open=${this._showTemplatePicker}
+        @template-select=${this._onTemplateSelect}
+        @cancel=${()=>{this._showTemplatePicker=!1}}
+      ></ic-template-picker>
+      <ic-variable-prompt
+        ?open=${this._showVariablePrompt}
+        .variables=${this._variableNames}
+        .pipelineLabel=${this._settings.label}
+        @confirm=${this._onVariableConfirm}
+        @cancel=${()=>{this._showVariablePrompt=!1}}
+      ></ic-variable-prompt>
+    `}};u([a({attribute:!1})],q.prototype,`rpcClient`,void 0),u([a()],q.prototype,`graphId`,void 0),u([c()],q.prototype,`_viewport`,void 0),u([c()],q.prototype,`_nodes`,void 0),u([c()],q.prototype,`_edges`,void 0),u([c()],q.prototype,`_selectedNodeIds`,void 0),u([c()],q.prototype,`_selectedEdgeId`,void 0),u([c()],q.prototype,`_showDeleteConfirm`,void 0),u([c()],q.prototype,`_deleteMessage`,void 0),u([c()],q.prototype,`_snapToGrid`,void 0),u([c()],q.prototype,`_validationResult`,void 0),u([c()],q.prototype,`_settings`,void 0),u([c()],q.prototype,`_highlightNodeIds`,void 0),u([c()],q.prototype,`_validateResultText`,void 0),u([c()],q.prototype,`_showTemplatePicker`,void 0),u([c()],q.prototype,`_showVariablePrompt`,void 0),u([c()],q.prototype,`_variableNames`,void 0),u([c()],q.prototype,`_draftId`,void 0),u([c()],q.prototype,`_isDirty`,void 0),q=u([i(`ic-pipeline-builder`)],q);export{q as IcPipelineBuilder};