comisai 1.0.24 → 1.0.25

package/node_modules/@comis/web/dist/assets/channel-list-FkfeOLBQ.js

@@ -0,0 +1,323 @@
+import{c as e,f as t,h as n,l as r,n as i,o as a,r as o,s,t as c,u as l}from"./decorate-BvWYovGE.js";import{a as u,i as d,n as f,r as p,t as m}from"./index-FLPhHz8p.js";import"./ic-confirm-dialog-DGlPbV1T.js";import"./ic-empty-state-CM3Wbj2f.js";var h=class extends r{constructor(...e){super(...e),this.channelType=``,this.name=``,this.status=`disconnected`,this.enabled=!1,this.isStale=!1,this.messageCount=0,this.uptime=0,this.lastActivity=0}static{this.styles=[o,i,n`
+      :host {
+        display: block;
+        min-width: 280px;
+      }
+
+      .card {
+        background: var(--ic-surface);
+        border: 1px solid var(--ic-border);
+        border-radius: 0.75rem;
+        padding: 1.25rem;
+        display: flex;
+        flex-direction: column;
+        gap: 0.75rem;
+        transition: border-color 0.15s;
+      }
+
+      .card:hover {
+        border-color: var(--ic-border-hover, #374151);
+      }
+
+      .card-header {
+        display: flex;
+        align-items: center;
+        gap: 0.625rem;
+      }
+
+      .channel-name {
+        font-size: 1rem;
+        font-weight: 600;
+        color: var(--ic-text);
+        flex: 1;
+        text-transform: capitalize;
+      }
+
+      .status-dot {
+        width: 0.5rem;
+        height: 0.5rem;
+        border-radius: 50%;
+        flex-shrink: 0;
+      }
+
+      .status-dot.pulse {
+        animation: pulse 2s ease-in-out infinite;
+      }
+
+      @keyframes pulse {
+        0%, 100% { opacity: 1; }
+        50% { opacity: 0.4; }
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .status-dot.pulse { animation: none; }
+      }
+
+      .metrics {
+        display: flex;
+        flex-direction: column;
+        gap: 0.375rem;
+      }
+
+      .metric-row {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        font-size: 0.8125rem;
+      }
+
+      .metric-label {
+        color: var(--ic-text-dim);
+      }
+
+      .metric-value {
+        color: var(--ic-text-muted);
+        font-family: ui-monospace, monospace;
+        font-size: 0.75rem;
+      }
+
+      .stale-warning {
+        display: flex;
+        align-items: center;
+        gap: 0.375rem;
+        padding: 0.375rem 0.625rem;
+        background: var(--ic-warning)0d;
+        border: 1px solid var(--ic-warning)33;
+        border-radius: 0.375rem;
+        font-size: 0.75rem;
+        color: var(--ic-warning);
+      }
+
+      .card-actions {
+        display: flex;
+        gap: 0.5rem;
+        padding-top: 0.75rem;
+        border-top: 1px solid var(--ic-border);
+      }
+
+      .action-btn {
+        flex: 1;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0.375rem 0.5rem;
+        background: transparent;
+        border: 1px solid var(--ic-border);
+        border-radius: 0.375rem;
+        color: var(--ic-text-dim);
+        font-size: 0.75rem;
+        font-family: inherit;
+        cursor: pointer;
+        transition: background 0.15s, color 0.15s, border-color 0.15s;
+      }
+
+      .action-btn:hover {
+        background: var(--ic-surface-2, #1f2937);
+        color: var(--ic-text);
+        border-color: var(--ic-text-dim);
+      }
+    `]}_formatUptime(e){if(e<60)return`0m`;let t=Math.floor(e/86400),n=Math.floor(e%86400/3600),r=Math.floor(e%3600/60);return t>0?`${t}d ${n}h`:n>0?`${n}h`:`${r}m`}_formatTimeAgo(e){if(e<=0)return`unknown`;let t=Date.now()-e,n=Math.floor(t/1e3);if(n<60)return`just now`;let r=Math.floor(n/60);if(r<60)return`${r}m ago`;let i=Math.floor(r/60);return i<24?`${i}h ago`:`${Math.floor(i/24)}d ago`}_getHealthVisual(){return this.isStale?m(`stale`):m(this.status)}_handleAction(e,t){t.stopPropagation(),this.dispatchEvent(new CustomEvent(`channel-action`,{detail:{action:e,channelType:this.channelType},bubbles:!0,composed:!0}))}render(){let e=this.name||this.channelType||`Unknown`,n=this._getHealthVisual(),r=this.uptime>0&&p(f(this.status)),i=new Intl.NumberFormat(`en-US`);return t`
+      <div class="card" role="group" aria-label="${e} channel - ${n.label}">
+        <div class="card-header">
+          <ic-platform-icon .platform=${this.channelType} size="20px"></ic-platform-icon>
+          <span class="channel-name">${e}</span>
+          <span
+            class="status-dot ${n.pulse?`pulse`:``}"
+            style="background: ${n.color}"
+            role="status"
+            aria-label="Status: ${n.label}"
+          ></span>
+          <span class="status-text" style="font-size: 0.75rem; color: ${n.color};">${n.label}</span>
+        </div>
+
+        <div class="metrics">
+          <div class="metric-row">
+            <span class="metric-label">Messages</span>
+            <span class="metric-value">${i.format(this.messageCount)}</span>
+          </div>
+          ${r?t`
+                <div class="metric-row">
+                  <span class="metric-label">Uptime</span>
+                  <span class="metric-value">${this._formatUptime(this.uptime)}</span>
+                </div>
+              `:l}
+        </div>
+
+        ${this.isStale&&this.lastActivity>0?t`
+              <div class="stale-warning">
+                Last seen ${this._formatTimeAgo(this.lastActivity)}
+              </div>
+            `:l}
+
+        <div class="card-actions">
+          ${this.enabled?t`
+                <button
+                  class="action-btn"
+                  aria-label="Configure ${e}"
+                  @click=${e=>this._handleAction(`configure`,e)}
+                >Configure</button>
+                <button
+                  class="action-btn"
+                  aria-label="Restart ${e}"
+                  @click=${e=>this._handleAction(`restart`,e)}
+                >Restart</button>
+              `:t`
+                <button
+                  class="action-btn"
+                  aria-label="Enable ${e}"
+                  @click=${e=>this._handleAction(`enable`,e)}
+                >Enable</button>
+              `}
+        </div>
+      </div>
+    `}};c([s({type:String})],h.prototype,`channelType`,void 0),c([s({type:String})],h.prototype,`name`,void 0),c([s({type:String})],h.prototype,`status`,void 0),c([s({type:Boolean})],h.prototype,`enabled`,void 0),c([s({type:Boolean})],h.prototype,`isStale`,void 0),c([s({type:Number})],h.prototype,`messageCount`,void 0),c([s({type:Number})],h.prototype,`uptime`,void 0),c([s({type:Number})],h.prototype,`lastActivity`,void 0),h=c([e(`ic-channel-card`)],h);function g(e){if(e<=0)return`0m`;let t=Math.floor(e/86400),n=Math.floor(e%86400/3600),r=Math.floor(e%3600/60);return t>0?`${t}d ${n}h`:n>0?`${n}h ${r}m`:`${r}m`}function _(e){return e?e.charAt(0).toUpperCase()+e.slice(1):``}var v=class extends r{constructor(...e){super(...e),this.apiClient=null,this.rpcClient=null,this.eventDispatcher=null,this._sse=null,this._reloadDebounce=null,this._loadState=`loading`,this._error=``,this._channels=[],this._staleTypes=new Set,this._actionPending=new Set,this._confirmDisable=null,this._hasLoaded=!1}static{this.styles=[o,i,n`
+      :host {
+        display: block;
+      }
+
+      .page-title {
+        font-size: 1.5rem;
+        font-weight: 700;
+        margin: 0 0 var(--ic-space-sm) 0;
+      }
+
+      /* Summary stats row */
+      .stats-row {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--ic-space-sm, 0.5rem);
+        margin-bottom: var(--ic-space-lg, 1.5rem);
+      }
+
+      .stat-badge {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.25rem;
+        padding: 0.25rem 0.625rem;
+        border-radius: 9999px;
+        font-size: 0.75rem;
+        font-weight: 500;
+        background: var(--ic-surface, #111827);
+        border: 1px solid var(--ic-border, #374151);
+        color: var(--ic-text-muted, #9ca3af);
+      }
+
+      .stat-badge--connected {
+        color: var(--ic-success, #22c55e);
+        border-color: color-mix(in srgb, var(--ic-success, #22c55e) 30%, var(--ic-border, #374151));
+      }
+
+      .stat-badge--disconnected {
+        color: var(--ic-text-dim, #6b7280);
+      }
+
+      .stat-badge--stale {
+        color: var(--ic-warning, #f59e0b);
+        border-color: color-mix(in srgb, var(--ic-warning, #f59e0b) 30%, var(--ic-border, #374151));
+      }
+
+      .stat-count {
+        font-weight: 700;
+      }
+
+      /* Card grid */
+      .card-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+        gap: var(--ic-space-lg, 1.5rem);
+      }
+
+      /* Error state */
+      .error-container {
+        padding: var(--ic-space-xl, 2rem);
+        text-align: center;
+      }
+
+      .error-message {
+        color: var(--ic-error, #f87171);
+        margin-bottom: var(--ic-space-md, 1rem);
+      }
+
+      .retry-btn {
+        padding: 0.5rem 1rem;
+        background: var(--ic-accent, #3b82f6);
+        color: white;
+        border: none;
+        border-radius: var(--ic-radius-md, 0.5rem);
+        cursor: pointer;
+        font-size: var(--ic-text-sm, 0.875rem);
+      }
+
+      .retry-btn:hover {
+        background: var(--ic-accent-hover, #2563eb);
+      }
+
+      /* Loading */
+      .loading-container {
+        display: flex;
+        justify-content: center;
+        padding: var(--ic-space-2xl, 3rem);
+      }
+    `]}connectedCallback(){super.connectedCallback(),this.eventDispatcher&&!this._sse&&(this._sse=new d(this,this.eventDispatcher,{"channel:registered":()=>{this._scheduleReload()},"channel:deregistered":()=>{this._scheduleReload()},"diagnostic:channel_health":()=>{this._scheduleReload(500)}}))}disconnectedCallback(){super.disconnectedCallback(),this._reloadDebounce!==null&&(clearTimeout(this._reloadDebounce),this._reloadDebounce=null)}updated(e){(e.has(`apiClient`)||e.has(`rpcClient`))&&this.apiClient&&!this._hasLoaded&&this._loadData(),e.has(`eventDispatcher`)&&this.eventDispatcher&&!this._sse&&(this._sse=new d(this,this.eventDispatcher,{"channel:registered":()=>{this._scheduleReload()},"channel:deregistered":()=>{this._scheduleReload()},"diagnostic:channel_health":()=>{this._scheduleReload(500)}}))}_scheduleReload(e=300){this._reloadDebounce!==null&&clearTimeout(this._reloadDebounce),this._reloadDebounce=setTimeout(()=>{this._reloadDebounce=null,this._loadData()},e)}async _loadData(){if(this.apiClient){this._loadState=`loading`,this._error=``;try{let e=await this.apiClient.getChannels();this._channels=e.map(e=>({...e,uptime:0,messageCount:0,lastActivity:0})),this._loadState=`loaded`,this._hasLoaded=!0,this.rpcClient&&this.rpcClient.status===`connected`&&Promise.allSettled([this.rpcClient.call(`obs.channels.all`),this.rpcClient.call(`obs.channels.stale`)]).then(([t,n])=>{let r=t.status===`fulfilled`?t.value:null,i=n.status===`fulfilled`?n.value:null,a=new Map((r?.channels??[]).map(e=>[e.channelType,e]));this._channels=e.map(e=>{let t=a.get(e.type);return{...e,uptime:0,messageCount:t?t.messagesSent+t.messagesReceived:0,lastActivity:t?.lastActiveAt??0}}),this._staleTypes=new Set((i?.channels??[]).map(e=>e.channelType))})}catch(e){this._error=e instanceof Error?e.message:`Failed to load channels`,this._loadState=`error`}}}async _handleRestart(e){if(this.rpcClient){this._actionPending=new Set([...this._actionPending,e]);try{await this.rpcClient.call(`channels.restart`,{channel_type:e}),u.show(`${_(e)} restarted`,`success`),await this._loadData()}catch{u.show(`Failed to restart ${e}`,`error`)}finally{let t=new Set(this._actionPending);t.delete(e),this._actionPending=t}}}async _handleEnable(e){if(this.rpcClient){this._actionPending=new Set([...this._actionPending,e]);try{await this.rpcClient.call(`channels.enable`,{channel_type:e}),u.show(`${_(e)} enabled`,`success`),await this._loadData()}catch{u.show(`Failed to enable ${e}`,`error`)}finally{let t=new Set(this._actionPending);t.delete(e),this._actionPending=t}}}async _handleDisable(e){if(this.rpcClient){this._actionPending=new Set([...this._actionPending,e]);try{await this.rpcClient.call(`channels.disable`,{channel_type:e}),u.show(`${_(e)} disabled`,`success`),await this._loadData()}catch{u.show(`Failed to disable ${e}`,`error`)}finally{let t=new Set(this._actionPending);t.delete(e),this._actionPending=t}}}_handleConfigure(e){this.dispatchEvent(new CustomEvent(`navigate`,{detail:`channels/${e}`,bubbles:!1,composed:!1}))}_handleCardAction(e){let{action:t,channelType:n}=e.detail;switch(t){case`configure`:this._handleConfigure(n);break;case`restart`:this._handleRestart(n);break;case`enable`:this._handleEnable(n);break;case`disable`:this._confirmDisable=n;break}}_confirmDisableAction(){this._confirmDisable&&=(this._handleDisable(this._confirmDisable),null)}_cancelDisable(){this._confirmDisable=null}render(){if(this._loadState===`loading`)return t`<ic-skeleton-view variant="list"></ic-skeleton-view>`;if(this._loadState===`error`)return t`
+        <div class="error-container">
+          <div class="error-message">${this._error}</div>
+          <button class="retry-btn" @click=${()=>void this._loadData()}>
+            Retry
+          </button>
+        </div>
+      `;if(this._channels.length===0)return t`
+        <h1 class="page-title">Channels</h1>
+        <ic-empty-state
+          icon="radio"
+          message="No channels connected"
+          description="Connect a chat platform to start receiving messages."
+        >
+          <button class="retry-btn" @click=${()=>{window.location.hash=`#/config`}}>Open Settings</button>
+        </ic-empty-state>
+      `;let e=this._channels.filter(e=>e.enabled&&(e.status===`healthy`||e.status===`idle`)).length,n=this._channels.filter(e=>!e.enabled).length,r=this._channels.filter(e=>e.enabled&&this._staleTypes.has(e.type)).length;return t`
+      <div role="region" aria-label="Channels">
+      <h1 class="page-title">Channels</h1>
+
+      <div class="stats-row">
+        <span class="stat-badge">
+          <span class="stat-count">${this._channels.length}</span> Total
+        </span>
+        <span class="stat-badge stat-badge--connected">
+          <span class="stat-count">${e}</span> Connected
+        </span>
+        <span class="stat-badge stat-badge--disconnected">
+          <span class="stat-count">${n}</span> Disabled
+        </span>
+        ${r>0?t`<span class="stat-badge stat-badge--stale">
+              <span class="stat-count">${r}</span> Stale
+            </span>`:l}
+      </div>
+
+      <div class="card-grid">
+        ${this._channels.map(e=>t`
+            <ic-channel-card
+              .channelType=${e.type}
+              .name=${_(e.type)}
+              .status=${e.enabled?e.status:`disconnected`}
+              ?enabled=${e.enabled}
+              ?isStale=${e.enabled&&this._staleTypes.has(e.type)}
+              .messageCount=${e.messageCount}
+              .uptime=${e.uptime}
+              .lastActivity=${e.lastActivity}
+              @channel-action=${e=>this._handleCardAction(e)}
+            ></ic-channel-card>
+          `)}
+      </div>
+
+      </div>
+
+      <ic-confirm-dialog
+        ?open=${this._confirmDisable!==null}
+        title="Disable Channel"
+        message="Disable ${this._confirmDisable?_(this._confirmDisable):``}? This will disconnect the channel."
+        confirmLabel="Disable"
+        variant="danger"
+        @confirm=${this._confirmDisableAction}
+        @cancel=${this._cancelDisable}
+      ></ic-confirm-dialog>
+    `}};c([s({attribute:!1})],v.prototype,`apiClient`,void 0),c([s({attribute:!1})],v.prototype,`rpcClient`,void 0),c([s({attribute:!1})],v.prototype,`eventDispatcher`,void 0),c([a()],v.prototype,`_loadState`,void 0),c([a()],v.prototype,`_error`,void 0),c([a()],v.prototype,`_channels`,void 0),c([a()],v.prototype,`_staleTypes`,void 0),c([a()],v.prototype,`_actionPending`,void 0),c([a()],v.prototype,`_confirmDisable`,void 0),v=c([e(`ic-channel-list`)],v);export{v as IcChannelList,g as formatUptime};