comisai 1.0.42 → 1.0.44

package/node_modules/@comis/web/dist/assets/chat-console-Dz_CizN8.js

@@ -0,0 +1,522 @@
+import{S as e,_ as t,a as n,d as r,f as i,g as a,h as o,l as s,m as c,n as l,p as u,r as d,t as f,u as p,y as m}from"./decorate-C2wzL86z.js";import{a as h}from"./index-dqPriKJN.js";import"./ic-tag-C5SwX7RT.js";import"./ic-relative-time-DCCDywYC.js";import"./ic-search-input-zfYWKjl4.js";import"./ic-empty-state-f_kVNpuc.js";import{n as g,r as _}from"./session-key-parser-CzslOQQP.js";import{n as v,r as y}from"./ic-tool-call-D1ykqLeH.js";import"./ic-chat-message-CkDdrYHc.js";import"./ic-budget-segment-bar-Dw6vzCTO.js";var b=class extends a{constructor(...e){super(...e),this.sessions=[],this.selectedKey=``,this.filter=``,this.open=!1}static{this.styles=[d,l,e`
+      :host {
+        display: block;
+      }
+
+      .sidebar {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        border-right: 1px solid var(--ic-border);
+        background: var(--ic-surface);
+        width: 280px;
+        overflow: hidden;
+      }
+
+      .sidebar-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: var(--ic-space-sm) var(--ic-space-md);
+        border-bottom: 1px solid var(--ic-border);
+      }
+
+      .sidebar-title {
+        font-size: var(--ic-text-sm);
+        font-weight: 600;
+        color: var(--ic-text);
+      }
+
+      .new-btn {
+        display: flex;
+        align-items: center;
+        gap: var(--ic-space-xs);
+        padding: 0.375rem 0.75rem;
+        background: var(--ic-accent);
+        color: white;
+        border: none;
+        border-radius: var(--ic-radius-md);
+        font-size: var(--ic-text-xs);
+        font-family: inherit;
+        cursor: pointer;
+      }
+
+      .new-btn:hover {
+        opacity: 0.9;
+      }
+
+      .sidebar-search {
+        padding: var(--ic-space-sm) var(--ic-space-md);
+        border-bottom: 1px solid var(--ic-border);
+      }
+
+      .session-list {
+        flex: 1;
+        overflow-y: auto;
+        padding: var(--ic-space-xs) 0;
+      }
+
+      .session-item {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+        padding: var(--ic-space-sm) var(--ic-space-md);
+        cursor: pointer;
+        border-bottom: 1px solid color-mix(in srgb, var(--ic-border) 50%, transparent);
+        transition: background 0.15s;
+      }
+
+      .session-item:hover {
+        background: var(--ic-surface-2);
+      }
+
+      .session-item--active {
+        background: color-mix(in srgb, var(--ic-accent) 10%, transparent);
+        border-left: 3px solid var(--ic-accent);
+      }
+
+      .session-key {
+        font-size: var(--ic-text-sm);
+        font-weight: 500;
+        color: var(--ic-text);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .session-meta {
+        display: flex;
+        align-items: center;
+        gap: var(--ic-space-xs);
+        font-size: var(--ic-text-xs);
+        color: var(--ic-text-dim);
+      }
+
+      .msg-count {
+        font-size: var(--ic-text-xs);
+        color: var(--ic-text-dim);
+      }
+    `]}_renderSessionItem(e){let t=e.key===this.selectedKey?`session-item session-item--active`:`session-item`,n=_(e.key),r=n?g(n):e.key.length>8?e.key.slice(0,8):e.key,i=n?.channelId??e.channelType;return m`
+      <div
+        class=${t}
+        @click=${()=>this.dispatchEvent(new CustomEvent(`session-selected`,{detail:{key:e.key},bubbles:!0,composed:!0}))}
+        role="button"
+        tabindex="0"
+        @keydown=${t=>{(t.key===`Enter`||t.key===` `)&&(t.preventDefault(),this.dispatchEvent(new CustomEvent(`session-selected`,{detail:{key:e.key},bubbles:!0,composed:!0})))}}
+      >
+        <span class="session-key" title=${e.key}>${r}</span>
+        <div class="session-meta">
+          <ic-tag variant="accent" size="sm">${i}</ic-tag>
+          <span class="msg-count">${e.messageCount}</span>
+          <ic-relative-time .timestamp=${e.lastActivity}></ic-relative-time>
+        </div>
+      </div>
+    `}render(){return m`
+      <aside class="sidebar">
+        <div class="sidebar-header">
+          <span class="sidebar-title">Sessions</span>
+          <button class="new-btn" @click=${()=>this.dispatchEvent(new CustomEvent(`new-session`,{bubbles:!0,composed:!0}))}>
+            <ic-icon name="plus" size="14px"></ic-icon>
+            New
+          </button>
+        </div>
+        <div class="sidebar-search">
+          <ic-search-input
+            placeholder="Filter sessions..."
+            debounce="200"
+            @search=${e=>this.dispatchEvent(new CustomEvent(`filter-changed`,{detail:{value:e.detail},bubbles:!0,composed:!0}))}
+          ></ic-search-input>
+        </div>
+        <div class="session-list">
+          ${this.sessions.map(e=>this._renderSessionItem(e))}
+        </div>
+      </aside>
+    `}};f([c({type:Array})],b.prototype,`sessions`,void 0),f([c({type:String})],b.prototype,`selectedKey`,void 0),f([c({type:String})],b.prototype,`filter`,void 0),f([c({type:Boolean})],b.prototype,`open`,void 0),b=f([o(`ic-session-sidebar`)],b);var x=class extends a{constructor(...e){super(...e),this.messages=[],this.streaming=!1,this.sending=!1,this.loading=!1,this.hasSession=!1,this.streamingContent=``,this.streamingTokens=0,this.authToken=``,this.hasNewMessages=!1}static{this.styles=[d,e`
+      :host {
+        display: block;
+        flex: 1;
+        overflow-y: auto;
+      }
+
+      .message-area {
+        flex: 1;
+        overflow-y: auto;
+        padding: var(--ic-space-md);
+        display: flex;
+        flex-direction: column;
+        gap: var(--ic-space-sm);
+      }
+
+      .thinking-indicator {
+        display: flex;
+        align-items: center;
+        gap: var(--ic-space-sm);
+        padding: var(--ic-space-sm);
+        color: var(--ic-text-dim);
+        font-size: var(--ic-text-sm);
+      }
+
+      .typing-dots {
+        display: flex;
+        gap: 4px;
+      }
+
+      .typing-dot {
+        width: 6px;
+        height: 6px;
+        background: var(--ic-text-dim);
+        border-radius: 50%;
+        animation: dot-pulse 1.5s infinite;
+      }
+
+      .typing-dot:nth-child(2) {
+        animation-delay: 0.15s;
+      }
+
+      .typing-dot:nth-child(3) {
+        animation-delay: 0.3s;
+      }
+
+      @keyframes dot-pulse {
+        0%, 80%, 100% { opacity: 0.3; }
+        40% { opacity: 1; }
+      }
+
+      .thinking-label {
+        font-style: italic;
+      }
+
+      .streaming-indicator {
+        display: flex;
+        align-items: center;
+        gap: var(--ic-space-sm);
+        padding: var(--ic-space-xs) var(--ic-space-md);
+        color: var(--ic-text-dim);
+        font-size: var(--ic-text-xs);
+      }
+
+      .token-counter {
+        font-family: ui-monospace, monospace;
+      }
+
+      .new-messages-btn {
+        position: sticky;
+        bottom: var(--ic-space-md);
+        align-self: center;
+        padding: 0.375rem 1rem;
+        background: var(--ic-accent);
+        color: white;
+        border: none;
+        border-radius: var(--ic-radius-md);
+        font-size: var(--ic-text-xs);
+        cursor: pointer;
+        font-family: inherit;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+      }
+    `]}_formatTokens(e){return e===0?``:e<1e3?`${e} tokens`:`${(e/1e3).toFixed(1)}k tokens`}_renderMessage(e){if(e.role===`tool`){let t=e.content;try{t=JSON.parse(e.content)}catch{}return m`
+        <ic-tool-call .toolName=${`tool`} .output=${t} .status=${`success`}></ic-tool-call>
+      `}return m`
+      <ic-chat-message
+        .role=${e.role}
+        .content=${e.content}
+        .timestamp=${e.timestamp}
+        .messageId=${e.id}
+        .mediaToken=${this.authToken}
+        @retry=${e=>this.dispatchEvent(new CustomEvent(`retry`,{detail:e.detail,bubbles:!0,composed:!0}))}
+        @delete=${e=>this.dispatchEvent(new CustomEvent(`delete`,{detail:e.detail,bubbles:!0,composed:!0}))}
+      ></ic-chat-message>
+      ${e.toolCalls?.map(e=>m`
+          <ic-tool-call
+            .toolName=${e.name}
+            .input=${typeof e.input==`string`?e.input:JSON.stringify(e.input,null,2)}
+            .output=${typeof e.output==`string`?e.output:JSON.stringify(e.output,null,2)}
+            .status=${e.status===`running`?`running`:e.status===`error`?`error`:`success`}
+          ></ic-tool-call>
+        `)}
+    `}_renderStreamingIndicator(){return this.streamingContent?m`
+        <ic-chat-message
+          .role=${`assistant`} .content=${this.streamingContent}
+          .timestamp=${s()} .showActions=${!1}
+        ></ic-chat-message>
+        <div class="streaming-indicator">
+          <span class="token-counter">${this._formatTokens(this.streamingTokens)}</span>
+        </div>
+      `:m`
+      <div class="streaming-indicator">
+        <div class="typing-dots">
+          <span class="typing-dot"></span>
+          <span class="typing-dot"></span>
+          <span class="typing-dot"></span>
+        </div>
+        <span class="token-counter">${this._formatTokens(this.streamingTokens)}</span>
+      </div>
+    `}render(){return this.loading?m`<ic-skeleton-view variant="detail"></ic-skeleton-view>`:this.hasSession?this.messages.length===0&&!this.streaming&&!this.sending?m`
+        <div class="message-area">
+          <ic-empty-state icon="chat" message="No messages yet" description="Start a conversation."></ic-empty-state>
+        </div>
+      `:m`
+      <div class="message-area">
+        ${this.messages.map(e=>this._renderMessage(e))}
+        ${this.sending&&!this.streaming?m`<div class="thinking-indicator">
+              <div class="typing-dots">
+                <span class="typing-dot"></span><span class="typing-dot"></span><span class="typing-dot"></span>
+              </div>
+              <span class="thinking-label">Thinking...</span>
+            </div>`:t}
+        ${this.streaming?this._renderStreamingIndicator():t}
+        ${this.hasNewMessages?m`<button class="new-messages-btn"
+              @click=${()=>this.dispatchEvent(new CustomEvent(`scroll-to-bottom`,{bubbles:!0,composed:!0}))}
+            >New messages</button>`:t}
+      </div>
+    `:m`
+        <div class="message-area">
+          <ic-empty-state icon="chat" message="Select a session"
+            description="Choose a session from the sidebar or create a new one."
+          ></ic-empty-state>
+        </div>
+      `}};f([c({type:Array})],x.prototype,`messages`,void 0),f([c({type:Boolean})],x.prototype,`streaming`,void 0),f([c({type:Boolean})],x.prototype,`sending`,void 0),f([c({type:Boolean})],x.prototype,`loading`,void 0),f([c({type:Boolean})],x.prototype,`hasSession`,void 0),f([c({type:String})],x.prototype,`streamingContent`,void 0),f([c({type:Number})],x.prototype,`streamingTokens`,void 0),f([c({type:String})],x.prototype,`authToken`,void 0),f([c({type:Boolean})],x.prototype,`hasNewMessages`,void 0),x=f([o(`ic-message-renderer`)],x);var S=[{command:`/new`,description:`Start a new session`,icon:`plus`},{command:`/reset`,description:`Reset current session`,icon:`refresh`},{command:`/export`,description:`Export session as JSONL`,icon:`download`},{command:`/compact`,description:`Compact current session context`,icon:`compress`},{command:`/switch`,description:`Switch to another agent`,icon:`agents`},{command:`/help`,description:`Show available commands`,icon:`chat`}],C=5,w=10*1024*1024,T=120,E=class extends a{constructor(...e){super(...e),this.apiClient=null,this.rpcClient=null,this.eventDispatcher=null,this.sessionKey=``,this.authToken=``,this._sessions=[],this._activeSession=``,this._messages=[],this._agents=[],this._selectedAgent=`default`,this._loading=!0,this._searchQuery=``,this._sidebarOpen=!1,this._hasNewMessages=!1,this._inputValue=``,this._sending=!1,this._attachments=[],this._recording=!1,this._recordingDuration=0,this._transcribing=!1,this._dragOver=!1,this._showSlashMenu=!1,this._slashFilter=``,this._slashSelectedIndex=0,this._streaming=!1,this._streamingTokens=0,this._streamingContent=``,this._budgetSegments=[],this._budgetTotal=0,this._userScrolledUp=!1,this._streamBuffer=``,this._rafPending=!1,this._eventUnsubs=[],this._rpcStatusUnsub=null,this._dataLoaded=!1,this._mediaRecorder=null,this._audioChunks=[],this._recordingTimer=null}static{this.styles=[d,l,e`
+      :host { display: flex; height: calc(100vh - 6.5rem); max-height: calc(100vh - 6.5rem); overflow: hidden; }
+      /* --- Sidebar --- */
+      .sidebar { width: 280px; min-width: 280px; background: var(--ic-surface); border-right: 1px solid var(--ic-border); display: flex; flex-direction: column; height: 100%; overflow: hidden; }
+      .sidebar-header { display: flex; align-items: center; justify-content: space-between; padding: var(--ic-space-md); border-bottom: 1px solid var(--ic-border); flex-shrink: 0; }
+      .sidebar-title { font-size: var(--ic-text-base); font-weight: 600; }
+      .new-btn { display: inline-flex; align-items: center; gap: 4px; background: var(--ic-accent); color: white; border: none; border-radius: var(--ic-radius-md); padding: var(--ic-space-xs) var(--ic-space-sm); font-size: var(--ic-text-xs); font-family: inherit; cursor: pointer; font-weight: 500; transition: background var(--ic-transition); }
+      .new-btn:hover { background: var(--ic-accent-hover); }
+      .sidebar-search { padding: var(--ic-space-sm) var(--ic-space-md); flex-shrink: 0; }
+      .session-list { flex: 1; overflow-y: auto; }
+      .session-item { display: flex; flex-direction: column; gap: 4px; padding: var(--ic-space-sm) var(--ic-space-md); cursor: pointer; border-left: 3px solid transparent; transition: background var(--ic-transition); }
+      .session-item:hover { background: var(--ic-surface-2); }
+      .session-item--active { background: var(--ic-surface-2); border-left-color: var(--ic-accent); }
+      .session-key { font-family: var(--ic-font-mono); font-size: var(--ic-text-xs); color: var(--ic-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+      .session-meta { display: flex; align-items: center; gap: var(--ic-space-sm); }
+      .msg-count { font-size: var(--ic-text-xs); color: var(--ic-text-dim); background: var(--ic-surface-2); padding: 1px 6px; border-radius: 9999px; }
+      /* --- Conversation Area --- */
+      .conversation { flex: 1; display: flex; flex-direction: column; min-width: 0; height: 100%; overflow: hidden; }
+      .conv-header { display: flex; align-items: center; gap: var(--ic-space-md); padding: var(--ic-space-md); border-bottom: 1px solid var(--ic-border); flex-shrink: 0; }
+      .agent-select { background: var(--ic-surface-2); border: 1px solid var(--ic-border); border-radius: var(--ic-radius-md); color: var(--ic-text); font-size: var(--ic-text-sm); padding: var(--ic-space-xs) var(--ic-space-sm); font-family: inherit; }
+      .session-info { display: flex; align-items: center; gap: var(--ic-space-sm); margin-left: auto; font-size: var(--ic-text-xs); color: var(--ic-text-dim); }
+      .session-info-key { font-family: var(--ic-font-mono); }
+      .message-area { flex: 1; overflow-y: auto; padding: var(--ic-space-lg) var(--ic-space-xl); display: flex; flex-direction: column; gap: var(--ic-space-sm); position: relative; max-width: 900px; margin: 0 auto; width: 100%; }
+      .new-messages-btn { position: sticky; bottom: var(--ic-space-sm); align-self: center; background: var(--ic-accent); color: white; border: none; border-radius: 9999px; padding: var(--ic-space-xs) var(--ic-space-md); font-size: var(--ic-text-xs); font-family: inherit; cursor: pointer; box-shadow: var(--ic-shadow-md); z-index: 1; }
+      .new-messages-btn:hover { background: var(--ic-accent-hover); }
+      /* --- Input Bar --- */
+      .input-bar { display: flex; flex-direction: column; padding: var(--ic-space-md); border-top: 1px solid var(--ic-border); gap: var(--ic-space-sm); flex-shrink: 0; position: relative; }
+      .attachment-strip { display: flex; gap: var(--ic-space-sm); flex-wrap: wrap; }
+      .attachment-preview { display: flex; align-items: center; gap: 4px; padding: 4px 8px; background: var(--ic-surface-2); border-radius: var(--ic-radius-sm); font-size: var(--ic-text-xs); color: var(--ic-text); }
+      .attachment-preview img { width: 48px; height: 48px; object-fit: cover; border-radius: var(--ic-radius-sm); }
+      .attachment-remove { background: none; border: none; color: var(--ic-text-dim); cursor: pointer; padding: 2px; font-size: var(--ic-text-xs); line-height: 1; border-radius: var(--ic-radius-sm); }
+      .attachment-remove:hover { color: var(--ic-error); }
+      .input-row { display: flex; align-items: flex-end; gap: var(--ic-space-sm); }
+      .input-textarea { flex: 1; min-height: 2.5rem; max-height: 8rem; background: var(--ic-surface-2); border: 1px solid var(--ic-border); border-radius: var(--ic-radius-md); color: var(--ic-text); font-size: var(--ic-text-sm); padding: var(--ic-space-sm) var(--ic-space-md); resize: none; font-family: inherit; line-height: 1.5; outline: none; transition: border-color var(--ic-transition); }
+      .input-textarea:focus { border-color: var(--ic-accent); }
+      .input-textarea:disabled { opacity: 0.5; cursor: not-allowed; }
+      .voice-btn { display: inline-flex; align-items: center; justify-content: center; background: none; border: none; color: var(--ic-text-muted); cursor: pointer; padding: var(--ic-space-sm); border-radius: 50%; transition: color var(--ic-transition), background var(--ic-transition); }
+      .voice-btn:hover { color: var(--ic-text); }
+      .voice-btn--recording { background: var(--ic-error); color: white; }
+      .voice-btn--recording:hover { background: var(--ic-error); color: white; }
+      .voice-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+      .recording-indicator { display: flex; align-items: center; gap: var(--ic-space-xs); }
+      .recording-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ic-error); animation: pulse 1.5s ease-in-out infinite; }
+      @media (prefers-reduced-motion: reduce) {
+      .recording-dot { animation: none; opacity: 0.7; }
+      }
+      @keyframes pulse {
+      0%, 100% { opacity: 1; }
+      50% { opacity: 0.3; }
+      }
+      .recording-time { color: var(--ic-error); font-family: var(--ic-font-mono); font-size: var(--ic-text-xs); }
+      .send-btn { display: inline-flex; align-items: center; justify-content: center; background: var(--ic-accent); color: white; border: none; border-radius: var(--ic-radius-md); padding: var(--ic-space-sm) var(--ic-space-md); cursor: pointer; transition: opacity var(--ic-transition); }
+      .send-btn:disabled { opacity: 0.4; cursor: not-allowed; }
+      .send-btn:hover:not(:disabled) { opacity: 0.9; }
+      /* --- Drag overlay --- */
+      .drag-overlay { position: absolute; inset: 0; border: 2px dashed var(--ic-accent); background: color-mix(in srgb, var(--ic-accent) 10%, transparent); display: flex; align-items: center; justify-content: center; gap: var(--ic-space-sm); z-index: 5; font-size: var(--ic-text-sm); color: var(--ic-accent); pointer-events: none; }
+      /* --- Slash command menu --- */
+      .slash-menu { position: absolute; bottom: 100%; left: var(--ic-space-md); right: var(--ic-space-md); background: var(--ic-surface); border: 1px solid var(--ic-border); border-radius: var(--ic-radius-md); box-shadow: var(--ic-shadow-lg); max-height: 12rem; overflow-y: auto; z-index: 100; }
+      .slash-item { display: flex; align-items: center; gap: var(--ic-space-sm); padding: var(--ic-space-sm) var(--ic-space-md); cursor: pointer; transition: background var(--ic-transition); }
+      .slash-item:hover,
+      .slash-item--active { background: var(--ic-surface-2); }
+      .slash-cmd { font-family: var(--ic-font-mono); color: var(--ic-text); font-size: var(--ic-text-sm); }
+      .slash-desc { color: var(--ic-text-dim); font-size: var(--ic-text-xs); }
+      /* --- Budget bar --- */
+      .budget-bar-area { padding: 0 var(--ic-space-md); flex-shrink: 0; border-top: 1px solid var(--ic-border); }
+      /* --- Streaming indicator --- */
+      .streaming-indicator { display: flex; align-items: center; gap: var(--ic-space-sm); padding: var(--ic-space-sm) var(--ic-space-md); }
+      .typing-dots { display: flex; gap: 4px; }
+      .typing-dot { width: 6px; height: 6px; background: var(--ic-text-muted); border-radius: 50%; animation: bounce 1.2s infinite; }
+      .typing-dot:nth-child(2) { animation-delay: 0.15s; }
+      .typing-dot:nth-child(3) { animation-delay: 0.3s; }
+      @keyframes bounce {
+      0%, 60%, 100% { transform: scale(1); }
+      30% { transform: scale(1.4); }
+      }
+      @media (prefers-reduced-motion: reduce) {
+      .typing-dot { animation: none; }
+      .typing-dot:nth-child(1) { opacity: 0.4; }
+      .typing-dot:nth-child(2) { opacity: 0.7; }
+      .typing-dot:nth-child(3) { opacity: 1; }
+      }
+      .thinking-indicator { display: flex; align-items: center; gap: var(--ic-space-sm); padding: var(--ic-space-sm) var(--ic-space-md); color: var(--ic-text-muted); font-size: 0.85rem; }
+      .thinking-label { color: var(--ic-text-muted); font-size: 0.85rem; }
+      .token-counter { font-family: var(--ic-font-mono); font-size: var(--ic-text-xs); color: var(--ic-text-dim); }
+      /* Mobile toggle */
+      .mobile-toggle { display: none; background: none; border: none; color: var(--ic-text); cursor: pointer; padding: var(--ic-space-xs); }
+      /* Loading center */
+      .loading-center { display: flex; justify-content: center; padding: var(--ic-space-2xl); }
+      /* Responsive: mobile */
+      @media (max-width: 767px) {
+      .sidebar { display: none; }
+      .sidebar--open { display: flex; position: absolute; top: 0; left: 0; z-index: 10; height: 100%; box-shadow: var(--ic-shadow-lg); }
+      .mobile-toggle { display: inline-flex; }
+      }
+    `]}connectedCallback(){super.connectedCallback(),this._setupEventListeners()}disconnectedCallback(){super.disconnectedCallback();for(let e of this._eventUnsubs)e();this._eventUnsubs=[],this._rpcStatusUnsub?.(),this._rpcStatusUnsub=null,this._recordingTimer!==null&&n(this._recordingTimer),this._mediaRecorder?.state===`recording`&&this._mediaRecorder.stop();for(let e of this._attachments)e.previewUrl&&URL.revokeObjectURL(e.previewUrl)}updated(e){e.has(`_messages`)&&!this._userScrolledUp&&this._scrollToBottom(),e.has(`rpcClient`)&&this.rpcClient&&(this._rpcStatusUnsub?.(),this.rpcClient.status===`connected`?this._initialLoad():this._rpcStatusUnsub=this.rpcClient.onStatusChange(e=>{e===`connected`&&!this._dataLoaded&&this._initialLoad()})),e.has(`apiClient`)&&this.apiClient&&this._agents.length<=1&&this._loadAgents()}_initialLoad(){this._dataLoaded||(this._dataLoaded=!0,this._loadSessions())}_onDocEvent(e,t){let n=e=>t(e.detail);document.addEventListener(e,n),this._eventUnsubs.push(()=>document.removeEventListener(e,n))}_setupEventListeners(){let e=e=>{e.sessionKey===this._activeSession&&this._appendMessage(e)};this._onDocEvent(`message:received`,e),this._onDocEvent(`message:sent`,e),this._onDocEvent(`session:created`,e=>{let t={key:String(e.sessionKey??``),agentId:String(e.agentId??`unknown`),channelType:String(e.channelType??`web`),messageCount:0,lastActivity:s()};this._sessions=[t,...this._sessions]}),this._onDocEvent(`message:streaming`,e=>this._handleStreamingEvent(e)),this.rpcClient&&this._eventUnsubs.push(this.rpcClient.onNotification((e,t)=>{e===`notification.message`?this._handleNotificationMessage(t):e===`notification.attachment`&&this._handleNotificationAttachment(t)}))}_handleStreamingEvent(e){e.sessionKey===this._activeSession&&(this._streaming||(this._streaming=!0,this._streamingTokens=0,this._streamingContent=``,this._streamBuffer=``),typeof e.content==`string`&&(this._streamBuffer+=e.content,this._rafPending||(this._rafPending=!0,requestAnimationFrame(()=>{this._streamingContent=this._streamBuffer,this._rafPending=!1}))),typeof e.tokens==`number`&&(this._streamingTokens=e.tokens),e.done===!0&&(this._streamingContent=this._streamBuffer,this._streamBuffer.trim()&&(this._messages=[...this._messages,{id:crypto.randomUUID(),role:`assistant`,content:this._streamBuffer,timestamp:s()}]),this._streaming=!1,this._streamingTokens=0,this._streamingContent=``,this._streamBuffer=``,this._rafPending=!1,this._focusInput()))}_handleNotificationMessage(e){let t=e,n=typeof t?.text==`string`?t.text:``;n&&(console.debug(`[chat] notification.message received, length:`,n.length),this._messages=[...this._messages,{id:crypto.randomUUID(),role:`assistant`,content:n,timestamp:typeof t?.timestamp==`number`?t.timestamp:s()}],this._syncSessionMessageCount(),this._scrollToBottom())}_handleNotificationAttachment(e){let t=e,n=typeof t?.url==`string`?t.url:``;if(!n)return;console.debug(`[chat] notification.attachment received:`,t?.type,t?.fileName);let r=t?.type??`file`,i=t?.fileName??`attachment`,a=typeof t?.caption==`string`?t.caption:``,o=t?.mimeType??``,c=JSON.stringify({url:n,type:r,mimeType:o,fileName:i}),l=a?`${a}\n\n<!-- attachment:${c} -->`:`<!-- attachment:${c} -->`;this._messages=[...this._messages,{id:crypto.randomUUID(),role:`assistant`,content:l,timestamp:typeof t?.timestamp==`number`?t.timestamp:s()}],this._syncSessionMessageCount(),this._scrollToBottom()}_appendMessage(e){let t={id:String(e.id??crypto.randomUUID()),role:e.role??`assistant`,content:String(e.content??``),timestamp:e.timestamp??s()};this._messages=[...this._messages,t],this._userScrolledUp&&(this._hasNewMessages=!0)}async _loadSessions(){if(!this.rpcClient){this._loading=!1;return}try{let e=(await this.rpcClient.call(`session.list`,{kind:`dm`}))?.sessions??[];if(this._sessions=e.map(e=>({key:e.sessionKey,agentId:e.agentId,channelType:e.channelId.startsWith(`web:`)?`web`:e.kind,messageCount:e.messageCount??0,lastActivity:e.updatedAt})),this._loading=!1,this.sessionKey){let e=this._sessions.find(e=>e.key===this.sessionKey);e&&(this._activeSession=e.key,this._loadSessionHistory())}}catch{this._sessions=[],this._loading=!1}}async _loadSessionHistory(){if(!(!this.rpcClient||!this._activeSession)){this._loading=!0;try{let e=(await this.rpcClient.call(`session.history`,{session_key:this._activeSession}))?.messages??[];this._messages=e.map(e=>({id:e.id??crypto.randomUUID(),role:e.role,content:e.role===`assistant`?v(e.content):e.role===`user`?y(e.content):e.content,timestamp:e.timestamp??0,toolCalls:e.toolCalls})).filter(e=>e.content!==``||e.role!==`assistant`)}catch{this._messages=[]}finally{this._loading=!1,this._scrollToBottom()}this._loadBudgetData()}}async _loadBudgetData(){if(!this.rpcClient||!this._activeSession){this._budgetSegments=[],this._budgetTotal=0;return}let e=this._sessions.find(e=>e.key===this._activeSession)?.agentId??`default`;try{let t=(await this.rpcClient.call(`obs.context.pipeline`,{agentId:e,limit:1}))?.snapshots?.[0]??null;if(!t){this._budgetSegments=[],this._budgetTotal=0;return}let n=t.tokensLoaded??0,r=t.tokensEvicted??0,i=t.tokensMasked??0,a=t.budgetUtilization??0,o=a>0?Math.round(n/a):0,s=Math.max(0,o-n),c=[];n>0&&c.push({label:`Loaded`,tokens:n,color:`var(--ic-accent)`}),r>0&&c.push({label:`Evicted`,tokens:r,color:`var(--ic-warning)`}),i>0&&c.push({label:`Masked`,tokens:i,color:`var(--ic-text-dim)`}),s>0&&c.push({label:`Available`,tokens:s,color:`var(--ic-surface-2)`}),this._budgetSegments=c,this._budgetTotal=o}catch{this._budgetSegments=[],this._budgetTotal=0}}async _loadAgents(){if(this.apiClient)try{let e=await this.apiClient.getAgents();this._agents=e.length>0?e.map(e=>({id:e.id,name:e.name??e.id,model:e.model})):[{id:`default`,name:`Default`,model:`unknown`}]}catch{this._agents=[{id:`default`,name:`Default`,model:`unknown`}]}}_createNewSession(){let e=`web:${this._selectedAgent}:${crypto.randomUUID()}`,t={key:e,agentId:this._selectedAgent,channelType:`web`,messageCount:0,lastActivity:s()};this._sessions=[t,...this._sessions],this._activeSession=e,this._messages=[]}_selectSession(e){this._activeSession=e,this._sidebarOpen=!1,this._loadSessionHistory()}_handleScroll(){if(!this._messageArea)return;let{scrollTop:e,scrollHeight:t,clientHeight:n}=this._messageArea,r=t-e-n<50;this._userScrolledUp=!r,r&&(this._hasNewMessages=!1)}_scrollToBottom(){requestAnimationFrame(()=>{this._messageArea&&(this._messageArea.scrollTop=this._messageArea.scrollHeight,this._userScrolledUp=!1,this._hasNewMessages=!1)})}_focusInput(){this.updateComplete.then(()=>{r(()=>{this._textarea&&!this._textarea.disabled&&this._textarea.focus()},0)})}_handleInput(e){let t=e.target;this._inputValue=t.value,t.style.height=`auto`,t.style.height=`${Math.min(t.scrollHeight,128)}px`,this._inputValue.startsWith(`/`)?(this._slashFilter=this._inputValue.slice(1),this._showSlashMenu=!0,this._slashSelectedIndex=0):this._showSlashMenu=!1}_handleKeydown(e){if(this._showSlashMenu){let t=this._getFilteredSlashCommands();if(e.key===`ArrowDown`){e.preventDefault(),this._slashSelectedIndex=(this._slashSelectedIndex+1)%t.length;return}if(e.key===`ArrowUp`){e.preventDefault(),this._slashSelectedIndex=(this._slashSelectedIndex-1+t.length)%t.length;return}if(e.key===`Enter`||e.key===`Tab`){e.preventDefault(),t.length>0&&this._executeSlashCommand(t[this._slashSelectedIndex].command);return}if(e.key===`Escape`){e.preventDefault(),this._showSlashMenu=!1;return}}e.key===`Enter`&&!e.shiftKey&&(e.preventDefault(),this._sendMessage())}_pushMsg(e,t){this._messages=[...this._messages,{id:crypto.randomUUID(),role:e,content:t,timestamp:s()}]}async _chatRoundTrip(e,t){if(this.apiClient)try{let t=await this.apiClient.chat(e,this._selectedAgent,this._activeSession??void 0),n=t.response?v(t.response):``;n&&this._pushMsg(`assistant`,n)}catch(e){this._pushMsg(`error`,e instanceof Error?e.message:t)}}async _sendMessage(){let e=this._inputValue.trim();if(!(e===``&&this._attachments.length===0||this._sending)&&this.apiClient&&!(!this._activeSession&&(this._createNewSession(),!this._activeSession))){this._sending=!0,e&&this._pushMsg(`user`,e),this._inputValue=``,this._textarea&&(this._textarea.style.height=`auto`),this._scrollToBottom();for(let e of this._attachments)e.previewUrl&&URL.revokeObjectURL(e.previewUrl);this._attachments=[],await this._chatRoundTrip(e,`Failed to send message`),this._sending=!1,this._syncSessionMessageCount(),this._scrollToBottom(),this._focusInput()}}_syncSessionMessageCount(){if(!this._activeSession)return;let e=this._messages.filter(e=>e.role!==`error`).length;this._sessions=this._sessions.map(t=>t.key===this._activeSession?{...t,messageCount:e,lastActivity:s()}:t)}async _transcribeBlob(e){if(!this.rpcClient){h.show(`Transcription unavailable -- not connected`,`error`);return}this._transcribing=!0;try{let t=new Uint8Array(await e.arrayBuffer()),n=``;for(let e=0;e<t.length;e++)n+=String.fromCharCode(t[e]);let r=(await this.rpcClient.call(`audio.transcribe`,{audio:btoa(n),format:`webm`}))?.text??``;r&&(this._inputValue+=(this._inputValue?` `:``)+r)}catch{h.show(`Transcription failed`,`error`)}finally{this._transcribing=!1}}async _startRecording(){if(!navigator.mediaDevices){h.show(`Microphone access not available`,`error`);return}try{let e=await navigator.mediaDevices.getUserMedia({audio:!0});this._mediaRecorder=new MediaRecorder(e),this._audioChunks=[],this._recording=!0,this._recordingDuration=0,this._recordingTimer=p(()=>{this._recordingDuration++,this._recordingDuration>=T&&(h.show(`Maximum recording duration reached`,`warning`),this._stopRecording())},1e3),this._mediaRecorder.ondataavailable=e=>{e.data.size>0&&this._audioChunks.push(e.data)},this._mediaRecorder.onerror=()=>{h.show(`Recording error occurred`,`error`),this._resetRecordingState()},this._mediaRecorder.onstop=async()=>{await this._transcribeBlob(new Blob(this._audioChunks,{type:`audio/webm`})),e.getTracks().forEach(e=>e.stop())},this._mediaRecorder.start()}catch{h.show(`Microphone access denied`,`error`)}}_stopRecording(){this._mediaRecorder&&this._mediaRecorder.state===`recording`&&this._mediaRecorder.stop(),this._resetRecordingState()}_resetRecordingState(){this._recording=!1,this._recordingTimer!==null&&(n(this._recordingTimer),this._recordingTimer=null)}_handleDragOver(e){e.preventDefault(),this._dragOver=!0}_handleDragLeave(){this._dragOver=!1}_handleDrop(e){e.preventDefault(),this._dragOver=!1;let t=e.dataTransfer?.files;if(t)for(let e=0;e<t.length;e++){let n=t[e];if(this._attachments.length>=C){h.show(`Maximum 5 attachments per message`,`warning`);break}if(n.size>w){h.show(`File too large (max 10MB): ${n.name}`,`error`);continue}let r=`file`,i;n.type.startsWith(`image/`)?(r=`image`,i=URL.createObjectURL(n)):n.type.startsWith(`audio/`)&&(r=`audio`);let a={id:crypto.randomUUID(),file:n,type:r,previewUrl:i};this._attachments=[...this._attachments,a]}}_removeAttachment(e){let t=this._attachments.find(t=>t.id===e);t?.previewUrl&&URL.revokeObjectURL(t.previewUrl),this._attachments=this._attachments.filter(t=>t.id!==e)}_getFilteredSlashCommands(){if(!this._slashFilter)return[...S];let e=this._slashFilter.toLowerCase();return S.filter(t=>t.command.toLowerCase().includes(e)||t.description.toLowerCase().includes(e))}async _executeSlashCommand(e){switch(this._showSlashMenu=!1,this._inputValue=``,e){case`/new`:await this._createNewSession();break;case`/reset`:if(this._activeSession&&this.rpcClient)try{await this.rpcClient.call(`session.reset`,{session_key:this._activeSession}),h.show(`Session reset`,`success`),await this._loadSessionHistory()}catch{h.show(`Failed to reset session`,`error`)}break;case`/export`:if(this._activeSession&&this.rpcClient)try{let e=(await this.rpcClient.call(`session.export`,{session_key:this._activeSession}))?.data??``;if(e){let t=new Blob([e],{type:`application/jsonl`}),n=URL.createObjectURL(t),r=document.createElement(`a`);r.href=n,r.download=`session-${this._activeSession.slice(0,8)}.jsonl`,r.click(),URL.revokeObjectURL(n)}}catch{h.show(`Failed to export session`,`error`)}break;case`/compact`:if(this._activeSession&&this.rpcClient)try{await this.rpcClient.call(`session.compact`,{session_key:this._activeSession}),h.show(`Session compacted`,`success`)}catch{h.show(`Failed to compact session`,`error`)}break;case`/switch`:{let e=this.shadowRoot?.querySelector(`.agent-select`);e&&e.focus();break}case`/help`:{let e=S.map(e=>`${e.command} - ${e.description}`).join(`
+`),t={id:crypto.randomUUID(),role:`system`,content:`Available commands:\n${e}`,timestamp:s()};this._messages=[...this._messages,t];break}}}async _handleRetry(e){let{messageId:t}=e.detail,n=this._messages.findIndex(e=>e.id===t);if(n<0)return;let r;for(let e=n-1;e>=0;e--)if(this._messages[e].role===`user`){r=this._messages[e];break}this._messages=this._messages.filter(e=>e.id!==t),r&&this.apiClient&&(this._sending=!0,this._scrollToBottom(),await this._chatRoundTrip(r.content,`Retry failed`),this._sending=!1,this._scrollToBottom(),this._focusInput())}_handleDelete(e){let{messageId:t}=e.detail;this._messages=this._messages.filter(e=>e.id!==t)}get _filteredSessions(){if(!this._searchQuery)return this._sessions;let e=this._searchQuery.toLowerCase();return this._sessions.filter(t=>t.key.toLowerCase().includes(e)||(t.label?.toLowerCase().includes(e)??!1))}_formatTokens(e){return e>=1e3?`${(e/1e3).toFixed(1)}K tokens`:`${e} tokens`}_renderSidebar(){return m`
+      <ic-session-sidebar
+        .sessions=${this._filteredSessions}
+        .selectedKey=${this._activeSession}
+        .filter=${this._searchQuery}
+        ?open=${this._sidebarOpen}
+        @session-selected=${e=>this._selectSession(e.detail.key)}
+        @filter-changed=${e=>{this._searchQuery=e.detail.value}}
+        @new-session=${()=>this._createNewSession()}
+      ></ic-session-sidebar>
+    `}_renderConversation(){return m`
+      <div
+        class="conversation"
+        @dragover=${this._handleDragOver}
+        @dragleave=${this._handleDragLeave}
+        @drop=${this._handleDrop}
+      >
+        ${this._renderConvHeader()}
+        ${this._renderMessageArea()}
+        ${this._activeSession||this._messages.length>0||!this._loading?this._renderInputBar():t}
+        ${this._dragOver?m`<div class="drag-overlay"><ic-icon name="attach" size="24px"></ic-icon> Drop files here</div>`:t}
+      </div>
+    `}_renderConvHeader(){return m`
+      <div class="conv-header">
+        <button
+          class="mobile-toggle"
+          @click=${()=>{this._sidebarOpen=!this._sidebarOpen}}
+          aria-label="Toggle sidebar"
+        >
+          <ic-icon name="menu" size="20px"></ic-icon>
+        </button>
+        <select
+          class="agent-select"
+          .value=${this._selectedAgent}
+          @change=${e=>{this._selectedAgent=e.target.value}}
+        >
+          ${this._agents.map(e=>m`<option value=${e.id}>${e.name} (${e.model})</option>`)}
+        </select>
+        ${this._activeSession?m`
+              <div class="session-info">
+                <span class="session-info-key">${(()=>{let e=_(this._activeSession);return e?g(e):this._activeSession.slice(0,8)})()}</span>
+                <span>${this._messages.length} messages</span>
+              </div>
+            `:t}
+      </div>
+    `}_renderMessageArea(){return m`
+      <ic-message-renderer
+        .messages=${this._messages}
+        ?streaming=${this._streaming}
+        ?sending=${this._sending}
+        ?loading=${this._loading}
+        ?hasSession=${!!this._activeSession}
+        .streamingContent=${this._streamingContent}
+        .streamingTokens=${this._streamingTokens}
+        .authToken=${this.authToken??``}
+        ?hasNewMessages=${this._hasNewMessages}
+        @retry=${this._handleRetry}
+        @delete=${this._handleDelete}
+        @scroll-to-bottom=${()=>this._scrollToBottom()}
+        @scroll=${this._handleScroll}
+      ></ic-message-renderer>
+    `}_renderInputBar(){let e=this._getFilteredSlashCommands(),n=this._inputValue.trim()===``&&this._attachments.length===0||this._sending;return m`
+      <div class="input-bar">
+        ${this._showSlashMenu&&e.length>0?m`
+              <div class="slash-menu" role="listbox">
+                ${e.map((e,t)=>m`
+                    <div
+                      class="slash-item ${t===this._slashSelectedIndex?`slash-item--active`:``}"
+                      role="option"
+                      aria-selected=${t===this._slashSelectedIndex}
+                      @click=${()=>this._executeSlashCommand(e.command)}
+                    >
+                      <ic-icon name=${e.icon} size="16px" color="var(--ic-text-muted)"></ic-icon>
+                      <span class="slash-cmd">${e.command}</span>
+                      <span class="slash-desc">${e.description}</span>
+                    </div>
+                  `)}
+              </div>
+            `:t}
+        ${this._budgetSegments.length>0?m`
+          <div class="budget-bar-area">
+            <ic-budget-segment-bar
+              .segments=${this._budgetSegments}
+              .total=${this._budgetTotal}
+            ></ic-budget-segment-bar>
+          </div>
+        `:t}
+        ${this._attachments.length>0?m`
+              <div class="attachment-strip">
+                ${this._attachments.map(e=>this._renderAttachmentPreview(e))}
+              </div>
+            `:t}
+        <div class="input-row">
+          ${this._renderVoiceButton()}
+          <textarea
+            class="input-textarea"
+            placeholder="Type a message... (Enter to send, Shift+Enter for newline)"
+            maxlength="10000"
+            .value=${this._inputValue}
+            ?disabled=${this._sending}
+            @input=${this._handleInput}
+            @keydown=${this._handleKeydown}
+          ></textarea>
+          <button
+            class="send-btn"
+            ?disabled=${n}
+            @click=${this._sendMessage}
+            aria-label="Send message"
+          >
+            <ic-icon name="send" size="18px"></ic-icon>
+          </button>
+        </div>
+      </div>
+    `}_renderVoiceButton(){return this._transcribing?m`
+        <button class="voice-btn" disabled aria-label="Transcribing">
+          <ic-loading size="sm"></ic-loading>
+        </button>
+      `:this._recording?m`
+        <div class="recording-indicator">
+          <span class="recording-dot"></span>
+          <span class="recording-time">${`${Math.floor(this._recordingDuration/60)}:${(this._recordingDuration%60).toString().padStart(2,`0`)}`}</span>
+          <button
+            class="voice-btn voice-btn--recording"
+            @click=${this._stopRecording}
+            aria-label="Stop recording"
+          >
+            <ic-icon name="stop" size="18px"></ic-icon>
+          </button>
+        </div>
+      `:m`
+      <button
+        class="voice-btn"
+        @click=${this._startRecording}
+        aria-label="Start voice recording"
+      >
+        <ic-icon name="microphone" size="18px"></ic-icon>
+      </button>
+    `}_renderAttachmentPreview(e){return m`
+      <div class="attachment-preview">
+        ${e.type===`image`&&e.previewUrl?m`<img src=${e.previewUrl} alt=${e.file.name}>`:e.type===`audio`?m`<ic-icon name="audio-wave" size="16px"></ic-icon>`:m`<ic-icon name="attach" size="16px"></ic-icon>`}
+        <span>${e.file.name}</span>
+        <button
+          class="attachment-remove"
+          @click=${()=>this._removeAttachment(e.id)}
+          aria-label="Remove attachment"
+        >\u2715</button>
+      </div>
+    `}render(){return m`
+      ${this._renderSidebar()}
+      ${this._renderConversation()}
+    `}};f([c({attribute:!1})],E.prototype,`apiClient`,void 0),f([c({attribute:!1})],E.prototype,`rpcClient`,void 0),f([c({attribute:!1})],E.prototype,`eventDispatcher`,void 0),f([c()],E.prototype,`sessionKey`,void 0),f([c()],E.prototype,`authToken`,void 0),f([u()],E.prototype,`_sessions`,void 0),f([u()],E.prototype,`_activeSession`,void 0),f([u()],E.prototype,`_messages`,void 0),f([u()],E.prototype,`_agents`,void 0),f([u()],E.prototype,`_selectedAgent`,void 0),f([u()],E.prototype,`_loading`,void 0),f([u()],E.prototype,`_searchQuery`,void 0),f([u()],E.prototype,`_sidebarOpen`,void 0),f([u()],E.prototype,`_hasNewMessages`,void 0),f([u()],E.prototype,`_inputValue`,void 0),f([u()],E.prototype,`_sending`,void 0),f([u()],E.prototype,`_attachments`,void 0),f([u()],E.prototype,`_recording`,void 0),f([u()],E.prototype,`_recordingDuration`,void 0),f([u()],E.prototype,`_transcribing`,void 0),f([u()],E.prototype,`_dragOver`,void 0),f([u()],E.prototype,`_showSlashMenu`,void 0),f([u()],E.prototype,`_slashFilter`,void 0),f([u()],E.prototype,`_slashSelectedIndex`,void 0),f([u()],E.prototype,`_streaming`,void 0),f([u()],E.prototype,`_streamingTokens`,void 0),f([u()],E.prototype,`_streamingContent`,void 0),f([u()],E.prototype,`_budgetSegments`,void 0),f([u()],E.prototype,`_budgetTotal`,void 0),f([i(`.message-area`)],E.prototype,`_messageArea`,void 0),f([i(`.input-textarea`)],E.prototype,`_textarea`,void 0),E=f([o(`ic-chat-console`)],E);export{E as IcChatConsole};