comisai 1.0.15 → 1.0.17

package/node_modules/@comis/web/dist/assets/channel-detail-CaInesJM.js

@@ -0,0 +1,681 @@
+import{a as b,S as y,I as h,b as t,A as u,s as _,f as x,i as k,n as m,r as c,t as $}from"./index-CEcM1R_C.js";import"./ic-breadcrumb-CUMpp3BL.js";import"./ic-tabs-B7QtM_v8.js";import"./ic-icon-xeGTVhVG.js";import"./ic-connection-dot-CnT1b8xr.js";import"./ic-relative-time-3FqpjeAI.js";import"./ic-tag-CPPUnDLF.js";import"./ic-empty-state-60l2ePhd.js";var w=Object.defineProperty,T=Object.getOwnPropertyDescriptor,r=(e,i,a,n)=>{for(var l=n>1?void 0:n?T(i,a):i,o=e.length-1,d;o>=0;o--)(d=e[o])&&(l=(n?d(i,a,l):d(l))||l);return n&&l&&w(i,a,l),l};const f=[{key:"transcribeAudio",label:"Voice Transcription",description:"Transcribe inbound audio/voice attachments to text (STT)"},{key:"analyzeImages",label:"Image Analysis",description:"Analyze inbound images using vision AI"},{key:"describeVideos",label:"Video Description",description:"Generate text descriptions of inbound video attachments"},{key:"extractDocuments",label:"Document Extraction",description:"Extract text from PDF, CSV, and other document attachments"},{key:"understandLinks",label:"Link Understanding",description:"Fetch and inject content from URLs in message text"}],A={telegram:[{key:"botToken",label:"Bot Token",type:"secret"},{key:"webhookUrl",label:"Webhook URL",type:"text",placeholder:"https://..."},{key:"ackReaction.enabled",label:"Ack Reaction",type:"toggle"},{key:"ackReaction.emoji",label:"Ack Emoji",type:"text",placeholder:"👀"}],discord:[{key:"botToken",label:"Bot Token",type:"secret"},{key:"guildId",label:"Guild ID",type:"text"}],slack:[{key:"botToken",label:"Bot Token",type:"secret"},{key:"appToken",label:"App Token",type:"secret"},{key:"signingSecret",label:"Signing Secret",type:"secret"},{key:"mode",label:"Mode",type:"select",options:["socket","http"]}],whatsapp:[{key:"authDir",label:"Auth Directory",type:"text"},{key:"printQR",label:"Print QR Code",type:"toggle"}],line:[{key:"channelSecret",label:"Channel Secret",type:"secret"},{key:"webhookPath",label:"Webhook Path",type:"text",placeholder:"/webhooks/line"}],signal:[{key:"baseUrl",label:"Base URL",type:"text",placeholder:"http://127.0.0.1:8080"},{key:"account",label:"Account",type:"text"},{key:"cliPath",label:"CLI Path",type:"text"}],irc:[{key:"host",label:"Host",type:"text"},{key:"port",label:"Port",type:"text"},{key:"nick",label:"Nick",type:"text"},{key:"tls",label:"TLS",type:"toggle"},{key:"nickservPassword",label:"NickServ Password",type:"secret"},{key:"channels",label:"Channels",type:"list"}],imessage:[{key:"binaryPath",label:"Binary Path",type:"text"},{key:"account",label:"Account",type:"text"}]};function g(e){return e?e.charAt(0).toUpperCase()+e.slice(1):""}function D(e,i){return i.split(".").reduce((a,n)=>a!=null&&typeof a=="object"?a[n]:void 0,e)}let s=class extends b{constructor(){super(...arguments),this.apiClient=null,this.rpcClient=null,this.eventDispatcher=null,this.channelType="",this._loadState="loading",this._error="",this._config={},this._enabled=!1,this._status="disconnected",this._deliveryTrace=[],this._activityData=[],this._channelLastActiveAt=0,this._channelMessagesSent=0,this._channelMessagesReceived=0,this._connectionMode="",this._lastError="",this._actionPending=!1,this._queueStatus=null,this._capabilities=null,this._mediaProcessing={transcribeAudio:!0,analyzeImages:!0,describeVideos:!0,extractDocuments:!0,understandLinks:!0},this._sse=null,this._reloadDebounce=null,this._hasLoaded=!1,this._previousChannelType=""}connectedCallback(){super.connectedCallback(),this._initSse()}disconnectedCallback(){super.disconnectedCallback(),this._reloadDebounce!==null&&(clearTimeout(this._reloadDebounce),this._reloadDebounce=null)}updated(e){e.has("channelType")&&this.channelType&&this.channelType!==this._previousChannelType?(this._previousChannelType=this.channelType,this._hasLoaded=!1,this._loadData()):(e.has("rpcClient")||e.has("apiClient"))&&this.rpcClient&&this.channelType&&!this._hasLoaded&&this._loadData(),e.has("eventDispatcher")&&this.eventDispatcher&&!this._sse&&this._initSse()}_initSse(){!this.eventDispatcher||this._sse||(this._sse=new y(this,this.eventDispatcher,{"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.rpcClient||!this.channelType)){this._loadState="loading",this._error="";try{const e=await this.rpcClient.call("channels.get",{channel_type:this.channelType});this._config=e??{};const i=this._config.status??"";this._enabled=this._config.enabled??(i==="running"||i==="connected"),this._status=this._config.status??"disconnected",this._connectionMode=this._config.connectionMode??"",this._lastError=this._config.lastError??"";const[a,n,l,o,d]=await Promise.allSettled([this.rpcClient.call("config.read",{section:"channels"}),this.rpcClient.call("obs.delivery.recent",{type:this.channelType,limit:10}),this.rpcClient.call("obs.channels.get",{channelId:this.channelType}),this.rpcClient.call("delivery.queue.status",{channel_type:this.channelType}),this.rpcClient.call("channels.capabilities",{channel_type:this.channelType})]);if(a.status==="fulfilled"){const v=a.value?.[this.channelType]?.mediaProcessing;v&&(this._mediaProcessing={transcribeAudio:v.transcribeAudio!==!1,analyzeImages:v.analyzeImages!==!1,describeVideos:v.describeVideos!==!1,extractDocuments:v.extractDocuments!==!1,understandLinks:v.understandLinks!==!1})}if(n.status==="fulfilled"){const p=n.value;this._deliveryTrace=p?.deliveries??p?.entries??[]}else this._deliveryTrace=[];if(l.status==="fulfilled"&&l.value?.channel){const p=l.value.channel;this._channelLastActiveAt=p.lastActiveAt??0,this._channelMessagesSent=p.messagesSent??0,this._channelMessagesReceived=p.messagesReceived??0}o.status==="fulfilled"&&o.value?this._queueStatus=o.value:this._queueStatus=null,d.status==="fulfilled"&&d.value?.features?this._capabilities=d.value.features:this._capabilities=null,this._activityData=this._deriveActivityFromTraces(this._deliveryTrace),this._loadState="loaded",this._hasLoaded=!0}catch(e){this._error=e instanceof Error?e.message:"Failed to load channel configuration",this._loadState="error"}}}async _handleRestart(){if(this.rpcClient){this._actionPending=!0;try{await this.rpcClient.call("channels.restart",{channel_type:this.channelType}),h.show(`${g(this.channelType)} restarted`,"success"),await this._loadData()}catch{h.show(`Failed to restart ${this.channelType}`,"error")}finally{this._actionPending=!1}}}async _handleToggleEnabled(){if(this.rpcClient){this._actionPending=!0;try{this._enabled?(await this.rpcClient.call("channels.disable",{channel_type:this.channelType}),this._enabled=!1,h.show(`${g(this.channelType)} disabled`,"success")):(await this.rpcClient.call("channels.enable",{channel_type:this.channelType}),this._enabled=!0,h.show(`${g(this.channelType)} enabled`,"success")),await this._loadData()}catch{h.show(`Failed to ${this._enabled?"disable":"enable"} ${this.channelType}`,"error")}finally{this._actionPending=!1}}}async _handleMediaToggle(e,i){if(this.rpcClient){this._mediaProcessing={...this._mediaProcessing,[e]:i};try{await this.rpcClient.call("config.patch",{section:"channels",key:`${this.channelType}.mediaProcessing.${e}`,value:i});const a=f.find(n=>n.key===e)?.label??e;h.show(`${a} ${i?"enabled":"disabled"}`,"success")}catch{this._mediaProcessing={...this._mediaProcessing,[e]:!i},h.show("Failed to update media processing","error")}}}_renderMediaProcessing(){return t`
+      <div class="section">
+        <h3 class="section-title">Media Processing</h3>
+        <div class="media-toggle-list">
+          ${f.map(e=>t`
+              <div class="media-toggle-item">
+                <div class="media-toggle-info">
+                  <span class="media-toggle-label">${e.label}</span>
+                  <span class="media-toggle-desc">${e.description}</span>
+                </div>
+                <label class="toggle-switch">
+                  <input
+                    type="checkbox"
+                    .checked=${this._mediaProcessing[e.key]??!0}
+                    ?disabled=${this._actionPending}
+                    @change=${i=>{const a=i.target.checked;this._handleMediaToggle(e.key,a)}}
+                  />
+                  <span class="toggle-slider"></span>
+                </label>
+              </div>
+            `)}
+        </div>
+      </div>
+    `}_renderField(e){const i=D(this._config,e.key);switch(e.type){case"secret":return t`
+          <div class="field">
+            <label>${e.label}</label>
+            <div class="field-value secret">${i?"••••••••":"Not set"}</div>
+          </div>
+        `;case"toggle":return t`
+          <div class="field">
+            <label>${e.label}</label>
+            <div class="field-value">${i?"Enabled":"Disabled"}</div>
+          </div>
+        `;case"list":{const a=Array.isArray(i)?i:[];return t`
+          <div class="field">
+            <label>${e.label}</label>
+            <div class="field-value list">${a.length>0?a.join(", "):"None"}</div>
+          </div>
+        `}default:return t`
+          <div class="field">
+            <label>${e.label}</label>
+            <div class="field-value">${i!=null&&i!==""?String(i):"—"}</div>
+          </div>
+        `}}_renderPlatformFields(){const e=A[this.channelType];return!e||e.length===0?t`
+        <div class="section">
+          <h3 class="section-title">Platform Configuration</h3>
+          <p class="section-hint">No platform-specific fields defined for ${g(this.channelType)}</p>
+        </div>
+      `:t`
+      <div class="section">
+        <h3 class="section-title">${g(this.channelType)} Configuration</h3>
+        <div class="fields-grid">
+          ${e.map(i=>this._renderField(i))}
+        </div>
+      </div>
+    `}_renderAllowFrom(){const e=Array.isArray(this._config.allowFrom)?this._config.allowFrom:[];return t`
+      <div class="section">
+        <h3 class="section-title">Allow From</h3>
+        ${e.length===0?t`<p class="section-hint">No restrictions \u2014 all senders allowed</p>`:t`
+              <ul class="allow-list">
+                ${e.map(i=>t`
+                    <li class="allow-item">
+                      <ic-icon name="user" size="14px"></ic-icon>
+                      ${i}
+                    </li>
+                  `)}
+              </ul>
+            `}
+      </div>
+    `}_renderStreamingConfig(){const e=this._config.streaming;return t`
+      <div class="section">
+        <h3 class="section-title">Streaming</h3>
+        ${e?t`
+              <div class="config-grid">
+                <div class="config-item">
+                  <span class="config-label">Chunk Mode</span>
+                  <span class="config-value">${e.chunkMode||"—"}</span>
+                </div>
+                <div class="config-item">
+                  <span class="config-label">Pacing</span>
+                  <span class="config-value">${e.pacingMs?`${e.pacingMs}ms`:"—"}</span>
+                </div>
+                <div class="config-item">
+                  <span class="config-label">Typing Indicator</span>
+                  <span class="config-value">${e.typingMode||"—"}</span>
+                </div>
+              </div>
+            `:t`<p class="section-hint">Default settings</p>`}
+      </div>
+    `}_renderAutoReply(){const e=this._config.autoReply;return t`
+      <div class="section">
+        <h3 class="section-title">Auto-Reply</h3>
+        ${e?t`
+              <div class="config-grid">
+                <div class="config-item">
+                  <span class="config-label">Group Activation</span>
+                  <span class="config-value">${e.groupActivation||"—"}</span>
+                </div>
+                <div class="config-item">
+                  <span class="config-label">Cooldown</span>
+                  <span class="config-value">${e.cooldownMs?`${e.cooldownMs}ms`:"—"}</span>
+                </div>
+              </div>
+            `:t`<p class="section-hint">Not configured</p>`}
+      </div>
+    `}_renderSendPolicy(){const e=this._config.sendPolicy,i=Array.isArray(e?.rules)?e.rules:[];return t`
+      <div class="section">
+        <h3 class="section-title">Send Policy</h3>
+        ${i.length===0?t`<p class="section-hint">No send policy rules</p>`:t`
+              <ul class="policy-list">
+                ${i.map(a=>t`<li class="policy-item">${String(a)}</li>`)}
+              </ul>
+            `}
+      </div>
+    `}_formatTimeAgo(e){if(e<=0)return"unknown";const i=Date.now()-e,a=Math.floor(i/1e3);if(a<60)return"just now";const n=Math.floor(a/60);if(n<60)return`${n}m ago`;const l=Math.floor(n/60);return l<24?`${l}h ago`:`${Math.floor(l/24)}d ago`}_deriveActivityFromTraces(e){if(e.length===0)return[];const i=Date.now(),a=new Array(24).fill(0);for(const n of e){const l=n.timestamp??n.deliveredAt??0,o=Math.floor((i-l)/36e5);o>=0&&o<24&&a[23-o]++}return a}_renderDeliveryQueuePanel(){if(!this._queueStatus)return u;const e=this._queueStatus;return t`
+      <div class="section">
+        <h3 class="section-title">Delivery Queue</h3>
+        <div class="config-grid">
+          <div class="config-item">
+            <span class="config-label">Pending</span>
+            <span class="config-value" style="${e.pending>0?"color: var(--ic-warning)":""}">${e.pending}</span>
+          </div>
+          <div class="config-item">
+            <span class="config-label">In Flight</span>
+            <span class="config-value">${e.inFlight}</span>
+          </div>
+          <div class="config-item">
+            <span class="config-label">Failed</span>
+            <span class="config-value" style="${e.failed>0?"color: var(--ic-error)":""}">${e.failed}</span>
+          </div>
+          <div class="config-item">
+            <span class="config-label">Delivered</span>
+            <span class="config-value">${e.delivered}</span>
+          </div>
+        </div>
+      </div>
+    `}_renderCapabilitiesMatrix(){if(!this._capabilities)return u;const e=this._capabilities,i=[{label:"Reactions",supported:e.reactions},{label:"Edit Messages",supported:e.editMessages},{label:"Delete Messages",supported:e.deleteMessages},{label:"Fetch History",supported:e.fetchHistory},{label:"Attachments",supported:e.attachments},{label:"Threads",supported:e.threads},{label:"Mentions",supported:e.mentions},{label:"Buttons",supported:e.buttons},{label:"Cards",supported:e.cards},{label:"Effects",supported:e.effects}];return t`
+      <div class="section">
+        <h3 class="section-title">Platform Capabilities</h3>
+        <div class="config-grid">
+          ${i.map(a=>t`
+              <div class="capability-row">
+                <span class="config-label">${a.label}</span>
+                <ic-icon
+                  name=${a.supported?"check":"x"}
+                  size="16px"
+                  color=${a.supported?"var(--ic-success)":"var(--ic-text-dim)"}
+                ></ic-icon>
+              </div>
+            `)}
+        </div>
+      </div>
+    `}_renderDeliveryTrace(){return t`
+      <div class="section">
+        <h3 class="section-title">Recent Deliveries</h3>
+        ${this._deliveryTrace.length===0?t`<p class="section-hint">No recent deliveries</p>`:t`
+              <div class="trace-grid" role="table" aria-label="Recent deliveries">
+                <div role="row" style="display:contents">
+                  <div role="columnheader">Time</div>
+                  <div role="columnheader">Status</div>
+                  <div role="columnheader">Latency</div>
+                </div>
+                ${this._deliveryTrace.map((e,i)=>t`
+                    <div role="row" class="${i%2===1?"trace-row-even":""}" style="display:contents">
+                      <div role="cell"><ic-relative-time .timestamp=${e.timestamp??e.deliveredAt??0}></ic-relative-time></div>
+                      <div role="cell"><ic-tag variant=${e.success??e.status==="delivered"?"success":"error"}>${e.success!==void 0?e.success?"delivered":"failed":e.status??"unknown"}</ic-tag></div>
+                      <div role="cell">${e.latencyMs}ms</div>
+                    </div>
+                  `)}
+              </div>
+            `}
+      </div>
+    `}_renderActivitySparkline(){const e=Math.max(...this._activityData,1);return t`
+      <div class="section">
+        <h3 class="section-title">Message Activity (24h)</h3>
+        ${this._activityData.length===0?t`<p class="section-hint">No activity data available</p>`:t`
+              <div class="sparkline">
+                ${this._activityData.map(i=>t`
+                    <div
+                      class="spark-bar"
+                      style="height: ${i/e*100}%"
+                      title="${i} messages"
+                    ></div>
+                  `)}
+              </div>
+            `}
+      </div>
+    `}render(){return this._loadState==="loading"?t`
+        <div class="loading-container">
+          <ic-loading size="lg"></ic-loading>
+        </div>
+      `:this._loadState==="error"?t`
+        <div class="error-container">
+          <div class="error-message">${this._error}</div>
+          <button class="retry-btn" @click=${()=>{this._loadData()}}>Retry</button>
+        </div>
+      `:t`
+      <div class="channel-detail">
+        <ic-breadcrumb
+          .items=${[{label:"Channels",route:"channels"},{label:g(this.channelType)}]}
+          @navigate=${e=>{this.dispatchEvent(new CustomEvent("navigate",{detail:e.detail,bubbles:!1,composed:!1}))}}
+        ></ic-breadcrumb>
+
+        <div class="header-row">
+          <div class="header-left">
+            <ic-icon name=${this.channelType} size="32px"></ic-icon>
+            <h1 class="page-title">${g(this.channelType)}</h1>
+            <ic-connection-dot status=${this._status} size="10px" showLabel></ic-connection-dot>
+            ${this._connectionMode?t`<span class="connection-mode-badge">${this._connectionMode}</span>`:u}
+          </div>
+          <div class="header-actions">
+            <button class="btn btn-warning" @click=${()=>{this._handleRestart()}} ?disabled=${this._actionPending}>
+              Restart
+            </button>
+            <button
+              class="btn ${this._enabled?"btn-danger":"btn-primary"}"
+              @click=${()=>{this._handleToggleEnabled()}}
+              ?disabled=${this._actionPending}
+            >
+              ${this._enabled?"Disable":"Enable"}
+            </button>
+          </div>
+        </div>
+
+        ${this._lastError?t`
+              <div class="error-banner">
+                <ic-icon name="alert-circle" size="16px" color="var(--ic-error)"></ic-icon>
+                <span>${this._lastError}</span>
+              </div>
+            `:u}
+
+        ${this._channelLastActiveAt>0?t`
+              <div class="last-message-row">
+                <ic-icon name="message-circle" size="14px"></ic-icon>
+                <span>Last message:</span>
+                <span
+                  class="last-message-time"
+                  title=${new Date(this._channelLastActiveAt).toISOString()}
+                >${this._formatTimeAgo(this._channelLastActiveAt)}</span>
+              </div>
+            `:u}
+
+        <ic-tabs
+          .tabs=${[{id:"config",label:"Configuration"},{id:"streaming",label:"Streaming"},{id:"activity",label:"Activity"}]}
+        >
+          <div data-tab="config">
+            ${this._renderPlatformFields()}
+            ${this._renderAllowFrom()}
+            ${this._renderMediaProcessing()}
+          </div>
+          <div data-tab="streaming">
+            ${this._renderStreamingConfig()}
+            ${this._renderAutoReply()}
+            ${this._renderSendPolicy()}
+          </div>
+          <div data-tab="activity">
+            ${this._renderDeliveryQueuePanel()}
+            ${this._renderCapabilitiesMatrix()}
+            ${this._renderDeliveryTrace()}
+            ${this._renderActivitySparkline()}
+          </div>
+        </ic-tabs>
+      </div>
+    `}};s.styles=[_,x,k`
+      :host {
+        display: block;
+      }
+
+      .channel-detail {
+        display: flex;
+        flex-direction: column;
+        gap: var(--ic-space-md, 1rem);
+      }
+
+      /* Header */
+      .header-row {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: var(--ic-space-md, 1rem);
+        flex-wrap: wrap;
+      }
+
+      .header-left {
+        display: flex;
+        align-items: center;
+        gap: var(--ic-space-sm, 0.5rem);
+      }
+
+      .page-title {
+        font-size: 1.5rem;
+        font-weight: 700;
+        margin: 0;
+      }
+
+      .header-actions {
+        display: flex;
+        gap: var(--ic-space-sm, 0.5rem);
+      }
+
+      /* Buttons */
+      .btn {
+        padding: 0.5rem 1rem;
+        font-size: var(--ic-text-sm, 0.875rem);
+        font-weight: 500;
+        border-radius: var(--ic-radius-md, 0.5rem);
+        border: 1px solid transparent;
+        cursor: pointer;
+        transition: background var(--ic-transition, 150ms), border-color var(--ic-transition, 150ms);
+      }
+
+      .btn:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+
+      .btn-primary {
+        background: var(--ic-accent, #3b82f6);
+        color: white;
+      }
+
+      .btn-primary:hover:not(:disabled) {
+        background: var(--ic-accent-hover, #2563eb);
+      }
+
+      .btn-warning {
+        background: var(--ic-warning, #f59e0b);
+        color: #000;
+      }
+
+      .btn-warning:hover:not(:disabled) {
+        background: #d97706;
+      }
+
+      .btn-danger {
+        background: var(--ic-error, #f87171);
+        color: #000;
+      }
+
+      .btn-danger:hover:not(:disabled) {
+        background: #ef4444;
+      }
+
+      /* Section cards */
+      .section {
+        background: var(--ic-surface, #111827);
+        border: 1px solid var(--ic-border, #374151);
+        border-radius: var(--ic-radius-md, 0.5rem);
+        padding: var(--ic-space-md, 1rem);
+      }
+
+      .section-title {
+        font-size: var(--ic-text-sm, 0.875rem);
+        font-weight: 600;
+        color: var(--ic-text-muted, #9ca3af);
+        margin: 0 0 var(--ic-space-sm, 0.5rem) 0;
+      }
+
+      .section-hint {
+        color: var(--ic-text-dim, #6b7280);
+        font-size: var(--ic-text-sm, 0.875rem);
+        margin: 0;
+      }
+
+      /* Config grid */
+      .config-grid {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: var(--ic-space-sm, 0.5rem);
+      }
+
+      .config-item {
+        display: flex;
+        flex-direction: column;
+        gap: var(--ic-space-2xs, 0.125rem);
+      }
+
+      .config-label {
+        font-size: var(--ic-text-xs, 0.75rem);
+        color: var(--ic-text-dim, #6b7280);
+      }
+
+      .config-value {
+        font-size: var(--ic-text-sm, 0.875rem);
+        color: var(--ic-text, #f3f4f6);
+      }
+
+      /* Field layout */
+      .fields-grid {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: var(--ic-space-sm, 0.5rem);
+      }
+
+      .field {
+        display: flex;
+        flex-direction: column;
+        gap: var(--ic-space-2xs, 0.125rem);
+      }
+
+      .field label {
+        font-size: var(--ic-text-xs, 0.75rem);
+        color: var(--ic-text-dim, #6b7280);
+      }
+
+      .field-value {
+        font-size: var(--ic-text-sm, 0.875rem);
+        color: var(--ic-text, #f3f4f6);
+        background: var(--ic-surface-2, #1f2937);
+        padding: var(--ic-space-xs, 0.25rem) var(--ic-space-sm, 0.5rem);
+        border-radius: var(--ic-radius-sm, 0.25rem);
+        min-height: 1.75rem;
+        display: flex;
+        align-items: center;
+      }
+
+      .field-value.secret {
+        font-family: var(--ic-font-mono, ui-monospace, monospace);
+        color: var(--ic-text-dim, #6b7280);
+      }
+
+      .field-value.list {
+        flex-wrap: wrap;
+        gap: var(--ic-space-xs, 0.25rem);
+      }
+
+      /* Allow-from list */
+      .allow-list {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        display: flex;
+        flex-direction: column;
+        gap: var(--ic-space-xs, 0.25rem);
+      }
+
+      .allow-item {
+        display: flex;
+        align-items: center;
+        gap: var(--ic-space-xs, 0.25rem);
+        font-size: var(--ic-text-sm, 0.875rem);
+        color: var(--ic-text, #f3f4f6);
+        padding: var(--ic-space-xs, 0.25rem) var(--ic-space-sm, 0.5rem);
+        background: var(--ic-surface-2, #1f2937);
+        border-radius: var(--ic-radius-sm, 0.25rem);
+      }
+
+      /* Delivery trace grid (CSS grid + ARIA roles for happy-dom compat) */
+      .trace-grid {
+        display: grid;
+        grid-template-columns: 1fr auto auto;
+        font-size: var(--ic-text-sm, 0.875rem);
+      }
+
+      .trace-grid [role="columnheader"] {
+        text-align: left;
+        padding: var(--ic-space-xs, 0.25rem) var(--ic-space-sm, 0.5rem);
+        color: var(--ic-text-dim, #6b7280);
+        font-weight: 500;
+        font-size: var(--ic-text-xs, 0.75rem);
+        border-bottom: 1px solid var(--ic-border, #374151);
+      }
+
+      .trace-grid [role="cell"] {
+        padding: var(--ic-space-xs, 0.25rem) var(--ic-space-sm, 0.5rem);
+        border-bottom: 1px solid var(--ic-border, #374151);
+      }
+
+      .trace-row-even [role="cell"] {
+        background: color-mix(in srgb, var(--ic-surface-2, #1f2937) 30%, transparent);
+      }
+
+      /* Sparkline */
+      .sparkline {
+        display: flex;
+        align-items: flex-end;
+        gap: 2px;
+        height: 60px;
+        padding: var(--ic-space-xs, 0.25rem) 0;
+      }
+
+      .spark-bar {
+        width: 4px;
+        min-height: 1px;
+        background: var(--ic-accent, #3b82f6);
+        border-radius: 1px 1px 0 0;
+        transition: opacity var(--ic-transition, 150ms);
+        flex-shrink: 0;
+      }
+
+      .spark-bar:hover {
+        opacity: 0.7;
+      }
+
+      /* Capability rows */
+      .capability-row {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: var(--ic-space-xs, 0.25rem) var(--ic-space-sm, 0.5rem);
+        border-bottom: 1px solid var(--ic-border, #374151);
+      }
+
+      .capability-row:last-child {
+        border-bottom: none;
+      }
+
+      /* Send policy list */
+      .policy-list {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        display: flex;
+        flex-direction: column;
+        gap: var(--ic-space-xs, 0.25rem);
+      }
+
+      .policy-item {
+        font-size: var(--ic-text-sm, 0.875rem);
+        color: var(--ic-text, #f3f4f6);
+        padding: var(--ic-space-xs, 0.25rem) var(--ic-space-sm, 0.5rem);
+        background: var(--ic-surface-2, #1f2937);
+        border-radius: var(--ic-radius-sm, 0.25rem);
+      }
+
+      /* Error / loading */
+      .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);
+      }
+
+      /* Error banner */
+      .error-banner {
+        display: flex;
+        align-items: flex-start;
+        gap: var(--ic-space-sm, 0.5rem);
+        padding: var(--ic-space-sm, 0.5rem) var(--ic-space-md, 1rem);
+        background: color-mix(in srgb, var(--ic-error, #f87171) 10%, transparent);
+        border-left: 3px solid var(--ic-error, #f87171);
+        border-radius: var(--ic-radius-sm, 0.25rem);
+        color: var(--ic-error, #f87171);
+        font-size: var(--ic-text-sm, 0.875rem);
+        line-height: 1.4;
+      }
+
+      .error-banner ic-icon {
+        flex-shrink: 0;
+        margin-top: 2px;
+      }
+
+      /* Connection mode badge */
+      .connection-mode-badge {
+        display: inline-flex;
+        align-items: center;
+        padding: 0.125rem 0.5rem;
+        background: var(--ic-surface-2, #1f2937);
+        border: 1px solid var(--ic-border, #374151);
+        border-radius: var(--ic-radius-sm, 0.25rem);
+        font-size: var(--ic-text-xs, 0.75rem);
+        color: var(--ic-text-dim, #6b7280);
+        text-transform: lowercase;
+      }
+
+      /* Last message time in stats section */
+      .last-message-row {
+        display: flex;
+        align-items: center;
+        gap: var(--ic-space-xs, 0.25rem);
+        font-size: var(--ic-text-sm, 0.875rem);
+        color: var(--ic-text-muted, #9ca3af);
+      }
+
+      .last-message-time {
+        color: var(--ic-text, #f3f4f6);
+      }
+
+      .loading-container {
+        display: flex;
+        justify-content: center;
+        padding: var(--ic-space-2xl, 3rem);
+      }
+
+      /* Media processing toggles */
+      .media-toggle-list {
+        display: flex;
+        flex-direction: column;
+        gap: var(--ic-space-xs, 0.25rem);
+      }
+
+      .media-toggle-item {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: var(--ic-space-xs, 0.25rem) var(--ic-space-sm, 0.5rem);
+        background: var(--ic-surface-2, #1f2937);
+        border-radius: var(--ic-radius-sm, 0.25rem);
+      }
+
+      .media-toggle-info {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+      }
+
+      .media-toggle-label {
+        font-size: var(--ic-text-sm, 0.875rem);
+        color: var(--ic-text, #f3f4f6);
+        font-weight: 500;
+      }
+
+      .media-toggle-desc {
+        font-size: var(--ic-text-xs, 0.75rem);
+        color: var(--ic-text-dim, #6b7280);
+      }
+
+      .toggle-switch {
+        position: relative;
+        width: 36px;
+        height: 20px;
+        flex-shrink: 0;
+      }
+
+      .toggle-switch input {
+        opacity: 0;
+        width: 0;
+        height: 0;
+      }
+
+      .toggle-slider {
+        position: absolute;
+        cursor: pointer;
+        inset: 0;
+        background: var(--ic-border, #374151);
+        border-radius: 10px;
+        transition: background var(--ic-transition, 150ms);
+      }
+
+      .toggle-slider::before {
+        content: "";
+        position: absolute;
+        width: 16px;
+        height: 16px;
+        left: 2px;
+        bottom: 2px;
+        background: white;
+        border-radius: 50%;
+        transition: transform var(--ic-transition, 150ms);
+      }
+
+      .toggle-switch input:checked + .toggle-slider {
+        background: var(--ic-accent, #3b82f6);
+      }
+
+      .toggle-switch input:checked + .toggle-slider::before {
+        transform: translateX(16px);
+      }
+
+      .toggle-switch input:disabled + .toggle-slider {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+    `];r([m({attribute:!1})],s.prototype,"apiClient",2);r([m({attribute:!1})],s.prototype,"rpcClient",2);r([m({attribute:!1})],s.prototype,"eventDispatcher",2);r([m()],s.prototype,"channelType",2);r([c()],s.prototype,"_loadState",2);r([c()],s.prototype,"_error",2);r([c()],s.prototype,"_config",2);r([c()],s.prototype,"_enabled",2);r([c()],s.prototype,"_status",2);r([c()],s.prototype,"_deliveryTrace",2);r([c()],s.prototype,"_activityData",2);r([c()],s.prototype,"_channelLastActiveAt",2);r([c()],s.prototype,"_channelMessagesSent",2);r([c()],s.prototype,"_channelMessagesReceived",2);r([c()],s.prototype,"_connectionMode",2);r([c()],s.prototype,"_lastError",2);r([c()],s.prototype,"_actionPending",2);r([c()],s.prototype,"_queueStatus",2);r([c()],s.prototype,"_capabilities",2);r([c()],s.prototype,"_mediaProcessing",2);s=r([$("ic-channel-detail")],s);export{s as IcChannelDetail};