comisai 1.0.16 → 1.0.17

package/node_modules/@comis/web/dist/assets/pipeline-list-BPW8hV-q.js

@@ -0,0 +1,518 @@
+import{a as g,I as c,b as n,A as h,s as f,f as _,i as x,n as y,r as p,t as w}from"./index-CEcM1R_C.js";import"./ic-breadcrumb-CUMpp3BL.js";import"./ic-confirm-dialog-CCDbB04e.js";import{e as $,s as C}from"./extract-variables-BM5qyK-s.js";import"./ic-empty-state-60l2ePhd.js";import"./ic-icon-xeGTVhVG.js";var k=Object.defineProperty,A=Object.getOwnPropertyDescriptor,d=(e,t,r,i)=>{for(var s=i>1?void 0:i?A(t,r):t,a=e.length-1,o;a>=0;a--)(o=e[a])&&(s=(i?o(t,r,s):o(s))||s);return i&&s&&k(t,r,s),s};const b={draft:"#6b7280",running:"#06b6d4",completed:"#22c55e",failed:"#ef4444",cancelled:"#f97316"};function m(e){if(!e)return"Never";const t=Date.now()-e;if(t<0)return"just now";const r=Math.floor(t/1e3);if(r<60)return"just now";const i=Math.floor(r/60);if(i<60)return`${i}m ago`;const s=Math.floor(i/60);if(s<24)return`${s}h ago`;const a=Math.floor(s/24);return a<30?`${a}d ago`:new Date(e).toISOString().slice(0,10)}let l=class extends g{constructor(){super(...arguments),this.rpcClient=null,this._rpcStatusUnsub=null,this._pipelines=[],this._searchQuery="",this._loading=!0,this._deleteTarget=null,this._sortKey="savedAt",this._sortAsc=!1,this._showVariablePrompt=!1,this._variableNames=[],this._pendingExecuteData=null}get _breadcrumbs(){return[{label:"Pipelines"}]}connectedCallback(){super.connectedCallback()}disconnectedCallback(){super.disconnectedCallback(),this._rpcStatusUnsub?.(),this._rpcStatusUnsub=null}updated(e){e.has("rpcClient")&&this.rpcClient&&(this._rpcStatusUnsub?.(),this.rpcClient.status==="connected"?this._loadPipelines():this._rpcStatusUnsub=this.rpcClient.onStatusChange(t=>{t==="connected"&&(this._rpcStatusUnsub=null,this._loadPipelines())}))}async _loadPipelines(){this._loading=!0;let e=[],t=[];if(this.rpcClient){const[i,s]=await Promise.allSettled([this.rpcClient.call("graph.list",{limit:100}),this.rpcClient.call("graph.status",{})]);i.status==="fulfilled"&&i.value?.entries&&(e=i.value.entries.map(a=>({id:a.id,label:a.label,source:"saved",nodeCount:a.nodeCount,agentCount:0,savedAt:a.updatedAt,status:"draft"}))),s.status==="fulfilled"&&s.value?.graphs&&(t=s.value.graphs.map(a=>({id:a.graphId,label:a.label??a.graphId,source:"executed",nodeCount:0,agentCount:0,lastRun:a.startedAt,status:a.status,graphId:a.graphId})))}const r=[...e];for(const i of t){const s=r.findIndex(a=>a.label.toLowerCase()===i.label.toLowerCase());if(s>=0){const a=r[s];r[s]={...a,lastRun:i.lastRun,status:i.status,graphId:i.graphId}}else r.push(i)}this._pipelines=r,this._loading=!1}get _filtered(){let e=this._pipelines;if(this._searchQuery){const t=this._searchQuery.toLowerCase();e=e.filter(r=>r.label.toLowerCase().includes(t))}return[...e].sort((t,r)=>{const i=t[this._sortKey],s=r[this._sortKey];if(i==null&&s==null)return 0;if(i==null)return 1;if(s==null)return-1;const a=i<s?-1:i>s?1:0;return this._sortAsc?a:-a})}_navigate(e){this.dispatchEvent(new CustomEvent("navigate",{detail:e,bubbles:!0,composed:!0}))}_handleSort(e){this._sortKey===e?this._sortAsc=!this._sortAsc:(this._sortKey=e,this._sortAsc=e==="label")}_sortArrow(e){return this._sortKey!==e?"":this._sortAsc?"▲":"▼"}_sortArrowClass(e){return this._sortKey===e?"sort-arrow sort-arrow--active":"sort-arrow"}_handleRowClick(e){e.source==="executed"&&e.graphId?this._navigate(`pipelines/${e.graphId}`):this._navigate(`pipelines/${e.id}/edit`)}_handleEdit(e,t){t.stopPropagation(),this._navigate(`pipelines/${e.id}/edit`)}async _handleQuickExecute(e,t){if(t.stopPropagation(),!this.rpcClient){c.show("Not connected to daemon","error");return}let r=null;try{r=await this.rpcClient.call("graph.load",{id:e.id})}catch{c.show("Could not load pipeline from server","error");return}if(!r)return;const i=r.nodes.map(a=>a.task),s=$(i);if(s.length>0){this._pendingExecuteData=r,this._variableNames=s,this._showVariablePrompt=!0;return}await this._executeGraphPayload(r,r.nodes.map(a=>a.task))}async _onVariableConfirm(e){this._showVariablePrompt=!1;const t=this._pendingExecuteData;if(this._pendingExecuteData=null,!t||!this.rpcClient)return;const r=t.nodes.map(i=>C(i.task,e.detail.values));await this._executeGraphPayload(t,r)}async _executeGraphPayload(e,t){if(this.rpcClient)try{const r={nodes:e.nodes.map((a,o)=>({nodeId:a.nodeId??a.id,task:t[o],agentId:a.agentId,dependsOn:a.dependsOn,maxSteps:a.maxSteps,timeoutMs:a.timeoutMs,barrierMode:a.barrierMode,model:a.modelId,retries:a.retries,type_id:a.typeId,type_config:a.typeConfig,context_mode:a.contextMode})),label:e.settings.label,onFailure:e.settings.onFailure,timeoutMs:e.settings.timeoutMs,budget:e.settings.budget};if(e.nodes.some(a=>a.typeId==="approval-gate"))try{const a=await this.rpcClient.call("obs.channels.all"),o=Array.isArray(a)?a:a?.channels??[];o.length>0&&(r._callerChannelType=o[0].channelType,r._callerChannelId=o[0].channelId)}catch{}const s=await this.rpcClient.call("graph.execute",r);s?.graphId?(c.show("Pipeline started","success"),this._navigate(`pipelines/${s.graphId}`)):(c.show("Pipeline started","success"),await this._loadPipelines())}catch(r){c.show(`Failed to execute: ${r instanceof Error?r.message:"Unknown error"}`,"error")}}async _handleDuplicate(e,t){if(t.stopPropagation(),!this.rpcClient){c.show("Not connected to daemon","error");return}let r,i,s;try{const u=await this.rpcClient.call("graph.load",{id:e.id});r=u.nodes,i=u.edges,s=u.settings}catch{c.show("Could not load pipeline from server","error");return}const a=crypto.randomUUID(),o=`${s.label} (copy)`,v={...s,label:o};try{await this.rpcClient.call("graph.save",{id:a,label:o,nodes:r,edges:i,settings:v}),c.show(`Duplicated as "${o}"`,"success"),this._loadPipelines()}catch(u){c.show(`Failed to duplicate: ${u instanceof Error?u.message:"Unknown error"}`,"error")}}_handleDeleteClick(e,t){t.stopPropagation(),this._deleteTarget=e}async _confirmDelete(){if(!this._deleteTarget)return;const e=this._deleteTarget;this._deleteTarget=null;try{await this.rpcClient?.call("graph.delete",{id:e.id}),c.show(`Deleted "${e.label}"`,"success")}catch(t){c.show(`Failed to delete: ${t instanceof Error?t.message:"Unknown error"}`,"error")}this._loadPipelines()}_cancelDelete(){this._deleteTarget=null}_renderStatusDot(e){const t=b[e??"draft"]??b.draft,r=(e??"draft").charAt(0).toUpperCase()+(e??"draft").slice(1);return n`<span class="status-text">
+      <span
+        class="status-dot ${e==="running"?"status-dot--running":""}"
+        style="--dot-color: ${t}"
+      ></span>
+      ${r}
+    </span>`}render(){return n`
+      <ic-breadcrumb .items=${this._breadcrumbs}></ic-breadcrumb>
+
+      <div class="page-header" role="region" aria-label="Pipelines">
+        <h1 class="page-title">Pipelines</h1>
+        <div style="display: flex; gap: 8px; align-items: center;">
+          <button
+            class="history-btn"
+            @click=${()=>this._navigate("pipelines/history")}
+          >
+            <ic-icon name="list" size="16px"></ic-icon>
+            History
+          </button>
+          <button
+            class="create-btn"
+            @click=${()=>this._navigate("pipelines/new")}
+          >
+            <ic-icon name="plus" size="16px"></ic-icon>
+            New Pipeline
+          </button>
+        </div>
+      </div>
+
+      ${this._renderContent()}
+      ${this._deleteTarget?n`
+            <ic-confirm-dialog
+              open
+              variant="danger"
+              title="Delete Pipeline"
+              message=${`Are you sure you want to delete "${this._deleteTarget.label}"? This cannot be undone.`}
+              confirmLabel="Delete"
+              @confirm=${this._confirmDelete}
+              @cancel=${this._cancelDelete}
+            ></ic-confirm-dialog>
+          `:h}
+      <ic-variable-prompt
+        ?open=${this._showVariablePrompt}
+        .variables=${this._variableNames}
+        .pipelineLabel=${this._pendingExecuteData?.settings.label??""}
+        @confirm=${this._onVariableConfirm}
+        @cancel=${()=>{this._showVariablePrompt=!1,this._pendingExecuteData=null}}
+      ></ic-variable-prompt>
+    `}_renderContent(){if(this._loading)return n`<ic-skeleton-view variant="list"></ic-skeleton-view>`;if(this._pipelines.length===0)return n`
+        <ic-empty-state
+          icon="git-branch"
+          message="No pipelines created"
+          description="Build an execution graph to orchestrate multi-agent workflows."
+        >
+          <button
+            class="create-btn"
+            @click=${()=>this._navigate("pipelines/new")}
+          >
+            <ic-icon name="plus" size="16px"></ic-icon>
+            New Pipeline
+          </button>
+        </ic-empty-state>
+      `;const e=this._filtered;return n`
+      <div class="search-bar">
+        <input
+          class="search-input"
+          type="search"
+          placeholder="Search pipelines..."
+          .value=${this._searchQuery}
+          @input=${t=>{this._searchQuery=t.target.value}}
+        />
+      </div>
+
+      ${e.length===0?n`<div class="no-results">No pipelines match your search.</div>`:n`
+            ${this._renderTable(e)} ${this._renderMobileList(e)}
+          `}
+    `}_renderTable(e){return n`
+      <div class="grid-table" role="table">
+        <div class="grid-header" role="row">
+          <div
+            class="cell"
+            role="columnheader"
+            @click=${()=>this._handleSort("label")}
+          >
+            Name
+            <span class=${this._sortArrowClass("label")}
+              >${this._sortArrow("label")}</span
+            >
+          </div>
+          <div
+            class="cell"
+            role="columnheader"
+            @click=${()=>this._handleSort("nodeCount")}
+          >
+            Nodes
+            <span class=${this._sortArrowClass("nodeCount")}
+              >${this._sortArrow("nodeCount")}</span
+            >
+          </div>
+          <div
+            class="cell"
+            role="columnheader"
+            @click=${()=>this._handleSort("agentCount")}
+          >
+            Agents
+            <span class=${this._sortArrowClass("agentCount")}
+              >${this._sortArrow("agentCount")}</span
+            >
+          </div>
+          <div
+            class="cell"
+            role="columnheader"
+            @click=${()=>this._handleSort("status")}
+          >
+            Status
+            <span class=${this._sortArrowClass("status")}
+              >${this._sortArrow("status")}</span
+            >
+          </div>
+          <div
+            class="cell"
+            role="columnheader"
+            @click=${()=>this._handleSort("savedAt")}
+          >
+            Last Run
+            <span class=${this._sortArrowClass("savedAt")}
+              >${this._sortArrow("savedAt")}</span
+            >
+          </div>
+          <div class="cell actions-header" role="columnheader">Actions</div>
+        </div>
+        ${e.map(t=>this._renderRow(t))}
+      </div>
+    `}_renderRow(e){const t=m(e.lastRun??e.savedAt);return n`
+      <div
+        class="grid-row"
+        role="row"
+        @click=${()=>this._handleRowClick(e)}
+      >
+        <div class="cell" role="cell">
+          <span class=${"pipeline-label"}>${e.label}</span>
+        </div>
+        <div class="cell" role="cell">${e.nodeCount}</div>
+        <div class="cell" role="cell">${e.agentCount}</div>
+        <div class="cell" role="cell">
+          ${this._renderStatusDot(e.status)}
+        </div>
+        <div class="cell dim-text" role="cell">${t}</div>
+        <div class="cell actions-cell" role="cell">
+          <button
+            class="action-btn"
+            aria-label="Edit ${e.label}"
+            @click=${i=>this._handleEdit(e,i)}
+          >
+            <ic-icon name="edit" size="16px"></ic-icon>
+          </button>
+          ${e.source==="saved"?n`
+                <button
+                  class="action-btn action-btn--run"
+                  aria-label="Run ${e.label}"
+                  @click=${i=>this._handleQuickExecute(e,i)}
+                >
+                  <ic-icon name="play" size="16px"></ic-icon>
+                </button>
+                <button
+                  class="action-btn"
+                  aria-label="Duplicate ${e.label}"
+                  @click=${i=>this._handleDuplicate(e,i)}
+                >
+                  <ic-icon name="copy" size="16px"></ic-icon>
+                </button>
+                <button
+                  class="action-btn action-btn--danger"
+                  aria-label="Delete ${e.label}"
+                  @click=${i=>this._handleDeleteClick(e,i)}
+                >
+                  <ic-icon name="trash" size="16px"></ic-icon>
+                </button>
+              `:h}
+        </div>
+      </div>
+    `}_renderMobileList(e){return n`
+      <div class="mobile-list">
+        ${e.map(t=>n`
+            <div
+              class="mobile-card"
+              @click=${()=>this._handleRowClick(t)}
+            >
+              <div class="card-header">
+                <span class="card-label">${t.label}</span>
+                ${this._renderStatusDot(t.status)}
+              </div>
+              <div class="card-meta">
+                <span>${t.nodeCount} nodes</span>
+                <span>${t.agentCount} agents</span>
+                <span>${m(t.lastRun??t.savedAt)}</span>
+              </div>
+              <div class="card-actions">
+                <button
+                  class="action-btn"
+                  aria-label="Edit ${t.label}"
+                  @click=${r=>this._handleEdit(t,r)}
+                >
+                  <ic-icon name="edit" size="16px"></ic-icon>
+                </button>
+                ${t.source==="saved"?n`
+                      <button
+                        class="action-btn action-btn--run"
+                        aria-label="Run ${t.label}"
+                        @click=${r=>this._handleQuickExecute(t,r)}
+                      >
+                        <ic-icon name="play" size="16px"></ic-icon>
+                      </button>
+                      <button
+                        class="action-btn action-btn--danger"
+                        aria-label="Delete ${t.label}"
+                        @click=${r=>this._handleDeleteClick(t,r)}
+                      >
+                        <ic-icon name="trash" size="16px"></ic-icon>
+                      </button>
+                    `:h}
+              </div>
+            </div>
+          `)}
+      </div>
+    `}};l.styles=[f,_,x`
+      :host {
+        display: block;
+      }
+
+      .page-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: var(--ic-space-lg, 1.5rem);
+      }
+
+      .page-title {
+        font-size: var(--ic-text-2xl, 1.5rem);
+        font-weight: 700;
+        margin: 0;
+      }
+
+      .create-btn {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--ic-space-xs, 0.25rem);
+        padding: var(--ic-space-sm, 0.5rem) var(--ic-space-md, 0.75rem);
+        background: var(--ic-accent, #3b82f6);
+        color: #fff;
+        border: none;
+        border-radius: var(--ic-radius-md, 0.5rem);
+        font-size: var(--ic-text-sm, 0.875rem);
+        font-weight: 500;
+        font-family: inherit;
+        cursor: pointer;
+        transition: background var(--ic-transition, 150ms ease);
+      }
+
+      .create-btn:hover {
+        background: var(--ic-accent-hover, #2563eb);
+      }
+
+      .history-btn {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--ic-space-xs, 0.25rem);
+        padding: var(--ic-space-sm, 0.5rem) var(--ic-space-md, 0.75rem);
+        background: transparent;
+        color: var(--ic-text-dim, #6b7280);
+        border: 1px solid var(--ic-border, #374151);
+        border-radius: var(--ic-radius-md, 0.5rem);
+        font-size: var(--ic-text-sm, 0.875rem);
+        font-weight: 500;
+        font-family: inherit;
+        cursor: pointer;
+        transition: color var(--ic-transition, 150ms ease),
+          border-color var(--ic-transition, 150ms ease);
+      }
+
+      .history-btn:hover {
+        color: var(--ic-text, #f3f4f6);
+        border-color: var(--ic-text-dim, #6b7280);
+      }
+
+      /* Search bar */
+      .search-bar {
+        margin-bottom: var(--ic-space-md, 0.75rem);
+      }
+
+      .search-input {
+        width: 100%;
+        max-width: 320px;
+        padding: 8px 12px;
+        background: var(--ic-surface-2, #1f2937);
+        border: 1px solid var(--ic-border, #374151);
+        border-radius: var(--ic-radius-md, 0.5rem);
+        color: var(--ic-text, #f3f4f6);
+        font-size: var(--ic-text-sm, 0.875rem);
+        font-family: inherit;
+      }
+
+      .search-input:focus {
+        border-color: var(--ic-accent, #3b82f6);
+        outline: none;
+      }
+
+      .search-input::placeholder {
+        color: var(--ic-text-dim, #6b7280);
+      }
+
+      /* Grid-based table - 6 columns */
+      .grid-table {
+        display: grid;
+        grid-template-columns: minmax(140px, 2fr) 70px 70px 110px 120px auto;
+        width: 100%;
+      }
+
+      .grid-header {
+        display: contents;
+      }
+
+      .grid-header .cell {
+        font-size: var(--ic-text-xs, 0.75rem);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        color: var(--ic-text-dim, #6b7280);
+        padding: var(--ic-space-sm, 0.5rem) var(--ic-space-md, 0.75rem);
+        border-bottom: 1px solid var(--ic-border, #374151);
+        cursor: pointer;
+        user-select: none;
+        white-space: nowrap;
+      }
+
+      .grid-header .cell:hover {
+        color: var(--ic-text-muted, #9ca3af);
+      }
+
+      .grid-header .cell.actions-header {
+        cursor: default;
+        text-align: right;
+      }
+
+      .grid-header .cell.actions-header:hover {
+        color: var(--ic-text-dim, #6b7280);
+      }
+
+      .sort-arrow {
+        display: inline-block;
+        margin-left: 4px;
+        font-size: 0.625rem;
+        opacity: 0.5;
+      }
+
+      .sort-arrow--active {
+        opacity: 1;
+        color: var(--ic-accent, #3b82f6);
+      }
+
+      .grid-row {
+        display: contents;
+        cursor: pointer;
+      }
+
+      .grid-row .cell {
+        padding: var(--ic-space-sm, 0.5rem) var(--ic-space-md, 0.75rem);
+        border-bottom: 1px solid var(--ic-border, #374151);
+        font-size: var(--ic-text-sm, 0.875rem);
+        display: flex;
+        align-items: center;
+        transition: background var(--ic-transition, 150ms ease);
+      }
+
+      .grid-row:hover .cell {
+        background: var(--ic-surface-2, #1f2937);
+      }
+
+      .grid-row .cell.actions-cell {
+        justify-content: flex-end;
+        white-space: nowrap;
+      }
+
+      .pipeline-label {
+        font-weight: 500;
+        color: var(--ic-text, #f3f4f6);
+      }
+
+      .pipeline-label--draft {
+        font-weight: 600;
+      }
+
+      /* Status dot */
+      .status-dot {
+        display: inline-block;
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        background: var(--dot-color, #6b7280);
+        margin-right: 6px;
+        vertical-align: middle;
+        flex-shrink: 0;
+      }
+
+      .status-dot--running {
+        animation: pulse 1.5s ease-in-out infinite;
+      }
+
+      @keyframes pulse {
+        0%,
+        100% {
+          opacity: 1;
+        }
+        50% {
+          opacity: 0.4;
+        }
+      }
+
+      .status-text {
+        display: inline-flex;
+        align-items: center;
+      }
+
+      /* Action buttons */
+      .action-btn {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 32px;
+        height: 32px;
+        padding: 0;
+        background: transparent;
+        border: 1px solid transparent;
+        border-radius: var(--ic-radius-sm, 0.25rem);
+        color: var(--ic-text-dim, #6b7280);
+        cursor: pointer;
+        transition: background var(--ic-transition, 150ms ease),
+          color var(--ic-transition, 150ms ease),
+          border-color var(--ic-transition, 150ms ease);
+      }
+
+      .action-btn:hover {
+        background: var(--ic-surface-2, #1f2937);
+        color: var(--ic-text, #f3f4f6);
+        border-color: var(--ic-border, #374151);
+      }
+
+      .action-btn--danger:hover {
+        color: var(--ic-error, #f87171);
+        border-color: var(--ic-error, #f87171);
+      }
+
+      .action-btn--run:hover {
+        color: var(--ic-success, #22c55e);
+        border-color: var(--ic-success, #22c55e);
+      }
+
+      .dim-text {
+        color: var(--ic-text-dim, #6b7280);
+      }
+
+      /* Mobile responsive cards */
+      .mobile-list {
+        display: none;
+      }
+
+      @media (max-width: 767px) {
+        .grid-table {
+          display: none;
+        }
+        .mobile-list {
+          display: flex;
+          flex-direction: column;
+          gap: 8px;
+        }
+        .mobile-card {
+          background: var(--ic-surface, #111827);
+          border: 1px solid var(--ic-border, #374151);
+          border-radius: var(--ic-radius-md, 0.5rem);
+          padding: 12px;
+          cursor: pointer;
+          transition: border-color var(--ic-transition, 150ms ease);
+        }
+        .mobile-card:hover {
+          border-color: var(--ic-accent, #3b82f6);
+        }
+        .card-header {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin-bottom: 8px;
+        }
+        .card-label {
+          font-weight: 600;
+          font-size: var(--ic-text-sm, 0.875rem);
+          color: var(--ic-text, #f3f4f6);
+        }
+        .card-meta {
+          display: flex;
+          gap: 12px;
+          font-size: var(--ic-text-xs, 0.75rem);
+          color: var(--ic-text-dim, #6b7280);
+          margin-bottom: 8px;
+        }
+        .card-actions {
+          display: flex;
+          gap: 4px;
+          justify-content: flex-end;
+        }
+      }
+
+      .no-results {
+        text-align: center;
+        padding: var(--ic-space-xl, 2rem);
+        color: var(--ic-text-dim, #6b7280);
+        font-size: var(--ic-text-sm, 0.875rem);
+      }
+    `];d([y({attribute:!1})],l.prototype,"rpcClient",2);d([p()],l.prototype,"_pipelines",2);d([p()],l.prototype,"_searchQuery",2);d([p()],l.prototype,"_loading",2);d([p()],l.prototype,"_deleteTarget",2);d([p()],l.prototype,"_sortKey",2);d([p()],l.prototype,"_sortAsc",2);d([p()],l.prototype,"_showVariablePrompt",2);d([p()],l.prototype,"_variableNames",2);d([p()],l.prototype,"_pendingExecuteData",2);l=d([w("ic-pipeline-list")],l);export{l as IcPipelineList};