comisai 1.0.16 → 1.0.18

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

@@ -0,0 +1,323 @@
+import{s as y,f as w,i as $,n as c,a as C,g as _,c as x,d as S,A as g,b as l,t as D,S as v,I as u,r as m}from"./index-CEcM1R_C.js";import"./ic-confirm-dialog-CCDbB04e.js";import"./ic-empty-state-60l2ePhd.js";import"./ic-icon-xeGTVhVG.js";var T=Object.defineProperty,A=Object.getOwnPropertyDescriptor,p=(e,t,s,a)=>{for(var i=a>1?void 0:a?A(t,s):t,d=e.length-1,n;d>=0;d--)(n=e[d])&&(i=(a?n(t,s,i):n(i))||i);return a&&i&&T(t,s,i),i};let o=class extends C{constructor(){super(...arguments),this.channelType="",this.name="",this.status="disconnected",this.enabled=!1,this.isStale=!1,this.messageCount=0,this.uptime=0,this.lastActivity=0}_formatUptime(e){if(e<60)return"0m";const t=Math.floor(e/86400),s=Math.floor(e%86400/3600),a=Math.floor(e%3600/60);return t>0?`${t}d ${s}h`:s>0?`${s}h`:`${a}m`}_formatTimeAgo(e){if(e<=0)return"unknown";const t=Date.now()-e,s=Math.floor(t/1e3);if(s<60)return"just now";const a=Math.floor(s/60);if(a<60)return`${a}m ago`;const i=Math.floor(a/60);return i<24?`${i}h ago`:`${Math.floor(i/24)}d ago`}_getHealthVisual(){return this.isStale?_("stale"):_(this.status)}_handleAction(e,t){t.stopPropagation(),this.dispatchEvent(new CustomEvent("channel-action",{detail:{action:e,channelType:this.channelType},bubbles:!0,composed:!0}))}render(){const e=this.name||this.channelType||"Unknown",t=this._getHealthVisual(),s=this.uptime>0&&x(S(this.status)),a=new Intl.NumberFormat("en-US");return l`
+      <div class="card" role="group" aria-label="${e} channel - ${t.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 ${t.pulse?"pulse":""}"
+            style="background: ${t.color}"
+            role="status"
+            aria-label="Status: ${t.label}"
+          ></span>
+          <span class="status-text" style="font-size: 0.75rem; color: ${t.color};">${t.label}</span>
+        </div>
+
+        <div class="metrics">
+          <div class="metric-row">
+            <span class="metric-label">Messages</span>
+            <span class="metric-value">${a.format(this.messageCount)}</span>
+          </div>
+          ${s?l`
+                <div class="metric-row">
+                  <span class="metric-label">Uptime</span>
+                  <span class="metric-value">${this._formatUptime(this.uptime)}</span>
+                </div>
+              `:g}
+        </div>
+
+        ${this.isStale&&this.lastActivity>0?l`
+              <div class="stale-warning">
+                Last seen ${this._formatTimeAgo(this.lastActivity)}
+              </div>
+            `:g}
+
+        <div class="card-actions">
+          ${this.enabled?l`
+                <button
+                  class="action-btn"
+                  aria-label="Configure ${e}"
+                  @click=${i=>this._handleAction("configure",i)}
+                >Configure</button>
+                <button
+                  class="action-btn"
+                  aria-label="Restart ${e}"
+                  @click=${i=>this._handleAction("restart",i)}
+                >Restart</button>
+              `:l`
+                <button
+                  class="action-btn"
+                  aria-label="Enable ${e}"
+                  @click=${i=>this._handleAction("enable",i)}
+                >Enable</button>
+              `}
+        </div>
+      </div>
+    `}};o.styles=[y,w,$`
+      :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);
+      }
+    `];p([c({type:String})],o.prototype,"channelType",2);p([c({type:String})],o.prototype,"name",2);p([c({type:String})],o.prototype,"status",2);p([c({type:Boolean})],o.prototype,"enabled",2);p([c({type:Boolean})],o.prototype,"isStale",2);p([c({type:Number})],o.prototype,"messageCount",2);p([c({type:Number})],o.prototype,"uptime",2);p([c({type:Number})],o.prototype,"lastActivity",2);o=p([D("ic-channel-card")],o);var P=Object.defineProperty,k=Object.getOwnPropertyDescriptor,h=(e,t,s,a)=>{for(var i=a>1?void 0:a?k(t,s):t,d=e.length-1,n;d>=0;d--)(n=e[d])&&(i=(a?n(t,s,i):n(i))||i);return a&&i&&P(t,s,i),i};function O(e){if(e<=0)return"0m";const t=Math.floor(e/86400),s=Math.floor(e%86400/3600),a=Math.floor(e%3600/60);return t>0?`${t}d ${s}h`:s>0?`${s}h ${a}m`:`${a}m`}function b(e){return e?e.charAt(0).toUpperCase()+e.slice(1):""}let r=class extends C{constructor(){super(...arguments),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}connectedCallback(){super.connectedCallback(),this.eventDispatcher&&!this._sse&&(this._sse=new v(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 v(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{const e=await this.apiClient.getChannels();this._channels=e.map(t=>({...t,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,s])=>{const a=t.status==="fulfilled"?t.value:null,i=s.status==="fulfilled"?s.value:null,d=new Map((a?.channels??[]).map(n=>[n.channelType,n]));this._channels=e.map(n=>{const f=d.get(n.type);return{...n,uptime:0,messageCount:f?f.messagesSent+f.messagesReceived:0,lastActivity:f?.lastActiveAt??0}}),this._staleTypes=new Set((i?.channels??[]).map(n=>n.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(`${b(e)} restarted`,"success"),await this._loadData()}catch{u.show(`Failed to restart ${e}`,"error")}finally{const 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(`${b(e)} enabled`,"success"),await this._loadData()}catch{u.show(`Failed to enable ${e}`,"error")}finally{const 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(`${b(e)} disabled`,"success"),await this._loadData()}catch{u.show(`Failed to disable ${e}`,"error")}finally{const 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){const{action:t,channelType:s}=e.detail;switch(t){case"configure":this._handleConfigure(s);break;case"restart":this._handleRestart(s);break;case"enable":this._handleEnable(s);break;case"disable":this._confirmDisable=s;break}}_confirmDisableAction(){this._confirmDisable&&(this._handleDisable(this._confirmDisable),this._confirmDisable=null)}_cancelDisable(){this._confirmDisable=null}render(){if(this._loadState==="loading")return l`<ic-skeleton-view variant="list"></ic-skeleton-view>`;if(this._loadState==="error")return l`
+        <div class="error-container">
+          <div class="error-message">${this._error}</div>
+          <button class="retry-btn" @click=${()=>{this._loadData()}}>
+            Retry
+          </button>
+        </div>
+      `;if(this._channels.length===0)return l`
+        <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>
+      `;const e=this._channels.filter(a=>a.enabled&&(a.status==="healthy"||a.status==="idle")).length,t=this._channels.filter(a=>!a.enabled).length,s=this._channels.filter(a=>a.enabled&&this._staleTypes.has(a.type)).length;return l`
+      <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">${t}</span> Disabled
+        </span>
+        ${s>0?l`<span class="stat-badge stat-badge--stale">
+              <span class="stat-count">${s}</span> Stale
+            </span>`:g}
+      </div>
+
+      <div class="card-grid">
+        ${this._channels.map(a=>l`
+            <ic-channel-card
+              .channelType=${a.type}
+              .name=${b(a.type)}
+              .status=${a.enabled?a.status:"disconnected"}
+              ?enabled=${a.enabled}
+              ?isStale=${a.enabled&&this._staleTypes.has(a.type)}
+              .messageCount=${a.messageCount}
+              .uptime=${a.uptime}
+              .lastActivity=${a.lastActivity}
+              @channel-action=${i=>this._handleCardAction(i)}
+            ></ic-channel-card>
+          `)}
+      </div>
+
+      </div>
+
+      <ic-confirm-dialog
+        ?open=${this._confirmDisable!==null}
+        title="Disable Channel"
+        message="Disable ${this._confirmDisable?b(this._confirmDisable):""}? This will disconnect the channel."
+        confirmLabel="Disable"
+        variant="danger"
+        @confirm=${this._confirmDisableAction}
+        @cancel=${this._cancelDisable}
+      ></ic-confirm-dialog>
+    `}};r.styles=[y,w,$`
+      :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);
+      }
+    `];h([c({attribute:!1})],r.prototype,"apiClient",2);h([c({attribute:!1})],r.prototype,"rpcClient",2);h([c({attribute:!1})],r.prototype,"eventDispatcher",2);h([m()],r.prototype,"_loadState",2);h([m()],r.prototype,"_error",2);h([m()],r.prototype,"_channels",2);h([m()],r.prototype,"_staleTypes",2);h([m()],r.prototype,"_actionPending",2);h([m()],r.prototype,"_confirmDisable",2);r=h([D("ic-channel-list")],r);export{r as IcChannelList,O as formatUptime};