comisai 1.0.16 → 1.0.17

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

@@ -0,0 +1,943 @@
+import{s as $,f as M,i as C,n as p,a as U,b as c,t as D,A as _,I as m,r as d}from"./index-CEcM1R_C.js";import{p as A,f as R}from"./session-key-parser-DPORMVyU.js";import{s as S,a as B}from"./ic-tool-call-7MaXSsCW.js";import"./ic-chat-message-CFyDJd0z.js";import"./ic-search-input-CSOxY9g7.js";import"./ic-tag-CPPUnDLF.js";import"./ic-relative-time-3FqpjeAI.js";import"./ic-empty-state-60l2ePhd.js";import"./ic-icon-xeGTVhVG.js";import"./ic-budget-segment-bar-BtJ6x5mN.js";import"./directive-DoeGSK_T.js";const N=(e,t,s)=>(s.configurable=!0,s.enumerable=!0,Reflect.decorate&&typeof t!="object"&&Object.defineProperty(e,t,s),s);function z(e,t){return(s,a,i)=>{const n=r=>r.renderRoot?.querySelector(e)??null;return N(s,a,{get(){return n(this)}})}}var j=Object.defineProperty,P=Object.getOwnPropertyDescriptor,w=(e,t,s,a)=>{for(var i=a>1?void 0:a?P(t,s):t,n=e.length-1,r;n>=0;n--)(r=e[n])&&(i=(a?r(t,s,i):r(i))||i);return a&&i&&j(t,s,i),i};let y=class extends U{constructor(){super(...arguments),this.sessions=[],this.selectedKey="",this.filter="",this.open=!1}_renderSessionItem(e){const s=e.key===this.selectedKey?"session-item session-item--active":"session-item",a=A(e.key),i=a?R(a):e.key.length>8?e.key.slice(0,8):e.key,n=a?.channelId??e.channelType;return c`
+      <div
+        class=${s}
+        @click=${()=>this.dispatchEvent(new CustomEvent("session-selected",{detail:{key:e.key},bubbles:!0,composed:!0}))}
+        role="button"
+        tabindex="0"
+        @keydown=${r=>{(r.key==="Enter"||r.key===" ")&&(r.preventDefault(),this.dispatchEvent(new CustomEvent("session-selected",{detail:{key:e.key},bubbles:!0,composed:!0})))}}
+      >
+        <span class="session-key" title=${e.key}>${i}</span>
+        <div class="session-meta">
+          <ic-tag variant="accent" size="sm">${n}</ic-tag>
+          <span class="msg-count">${e.messageCount}</span>
+          <ic-relative-time .timestamp=${e.lastActivity}></ic-relative-time>
+        </div>
+      </div>
+    `}render(){return c`
+      <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>
+    `}};y.styles=[$,M,C`
+      :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);
+      }
+    `];w([p({type:Array})],y.prototype,"sessions",2);w([p({type:String})],y.prototype,"selectedKey",2);w([p({type:String})],y.prototype,"filter",2);w([p({type:Boolean})],y.prototype,"open",2);y=w([D("ic-session-sidebar")],y);var F=Object.defineProperty,K=Object.getOwnPropertyDescriptor,v=(e,t,s,a)=>{for(var i=a>1?void 0:a?K(t,s):t,n=e.length-1,r;n>=0;n--)(r=e[n])&&(i=(a?r(t,s,i):r(i))||i);return a&&i&&F(t,s,i),i};let g=class extends U{constructor(){super(...arguments),this.messages=[],this.streaming=!1,this.sending=!1,this.loading=!1,this.hasSession=!1,this.streamingContent="",this.streamingTokens=0,this.authToken="",this.hasNewMessages=!1}_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 c`
+        <ic-tool-call .toolName=${"tool"} .output=${t} .status=${"success"}></ic-tool-call>
+      `}return c`
+      <ic-chat-message
+        .role=${e.role}
+        .content=${e.content}
+        .timestamp=${e.timestamp}
+        .messageId=${e.id}
+        .mediaToken=${this.authToken}
+        @retry=${t=>this.dispatchEvent(new CustomEvent("retry",{detail:t.detail,bubbles:!0,composed:!0}))}
+        @delete=${t=>this.dispatchEvent(new CustomEvent("delete",{detail:t.detail,bubbles:!0,composed:!0}))}
+      ></ic-chat-message>
+      ${e.toolCalls?.map(t=>c`
+          <ic-tool-call
+            .toolName=${t.name}
+            .input=${typeof t.input=="string"?t.input:JSON.stringify(t.input,null,2)}
+            .output=${typeof t.output=="string"?t.output:JSON.stringify(t.output,null,2)}
+            .status=${t.status==="running"?"running":t.status==="error"?"error":"success"}
+          ></ic-tool-call>
+        `)}
+    `}_renderStreamingIndicator(){return this.streamingContent?c`
+        <ic-chat-message
+          .role=${"assistant"} .content=${this.streamingContent}
+          .timestamp=${Date.now()} .showActions=${!1}
+        ></ic-chat-message>
+        <div class="streaming-indicator">
+          <span class="token-counter">${this._formatTokens(this.streamingTokens)}</span>
+        </div>
+      `:c`
+      <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?c`<ic-skeleton-view variant="detail"></ic-skeleton-view>`:this.hasSession?this.messages.length===0&&!this.streaming&&!this.sending?c`
+        <div class="message-area">
+          <ic-empty-state icon="chat" message="No messages yet" description="Start a conversation."></ic-empty-state>
+        </div>
+      `:c`
+      <div class="message-area">
+        ${this.messages.map(e=>this._renderMessage(e))}
+        ${this.sending&&!this.streaming?c`<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>`:_}
+        ${this.streaming?this._renderStreamingIndicator():_}
+        ${this.hasNewMessages?c`<button class="new-messages-btn"
+              @click=${()=>this.dispatchEvent(new CustomEvent("scroll-to-bottom",{bubbles:!0,composed:!0}))}
+            >New messages</button>`:_}
+      </div>
+    `:c`
+        <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>
+      `}};g.styles=[$,C`
+      :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);
+      }
+    `];v([p({type:Array})],g.prototype,"messages",2);v([p({type:Boolean})],g.prototype,"streaming",2);v([p({type:Boolean})],g.prototype,"sending",2);v([p({type:Boolean})],g.prototype,"loading",2);v([p({type:Boolean})],g.prototype,"hasSession",2);v([p({type:String})],g.prototype,"streamingContent",2);v([p({type:Number})],g.prototype,"streamingTokens",2);v([p({type:String})],g.prototype,"authToken",2);v([p({type:Boolean})],g.prototype,"hasNewMessages",2);g=v([D("ic-message-renderer")],g);var V=Object.defineProperty,H=Object.getOwnPropertyDescriptor,l=(e,t,s,a)=>{for(var i=a>1?void 0:a?H(t,s):t,n=e.length-1,r;n>=0;n--)(r=e[n])&&(i=(a?r(t,s,i):r(i))||i);return a&&i&&V(t,s,i),i};const k=[{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"}],J=5,Q=10*1024*1024,q=120;let o=class extends U{constructor(){super(...arguments),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}connectedCallback(){super.connectedCallback(),this._setupEventListeners()}disconnectedCallback(){super.disconnectedCallback();for(const e of this._eventUnsubs)e();this._eventUnsubs=[],this._rpcStatusUnsub?.(),this._rpcStatusUnsub=null,this._recordingTimer!==null&&clearInterval(this._recordingTimer),this._mediaRecorder?.state==="recording"&&this._mediaRecorder.stop();for(const 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(t=>{t==="connected"&&!this._dataLoaded&&this._initialLoad()})),e.has("apiClient")&&this.apiClient&&this._agents.length<=1&&this._loadAgents()}_initialLoad(){this._dataLoaded||(this._dataLoaded=!0,this._loadSessions())}_setupEventListeners(){const e=i=>{const n=i.detail;n.sessionKey===this._activeSession&&this._appendMessage(n)};document.addEventListener("message:received",e),this._eventUnsubs.push(()=>document.removeEventListener("message:received",e));const t=i=>{const n=i.detail;n.sessionKey===this._activeSession&&this._appendMessage(n)};document.addEventListener("message:sent",t),this._eventUnsubs.push(()=>document.removeEventListener("message:sent",t));const s=i=>{const n=i.detail,r={key:String(n.sessionKey??""),agentId:String(n.agentId??"unknown"),channelType:String(n.channelType??"web"),messageCount:0,lastActivity:Date.now()};this._sessions=[r,...this._sessions]};document.addEventListener("session:created",s),this._eventUnsubs.push(()=>document.removeEventListener("session:created",s));const a=i=>{const n=i.detail;if(n.sessionKey===this._activeSession&&(this._streaming||(this._streaming=!0,this._streamingTokens=0,this._streamingContent="",this._streamBuffer=""),typeof n.content=="string"&&(this._streamBuffer+=n.content,this._rafPending||(this._rafPending=!0,requestAnimationFrame(()=>{this._streamingContent=this._streamBuffer,this._rafPending=!1}))),typeof n.tokens=="number"&&(this._streamingTokens=n.tokens),n.done===!0)){if(this._streamingContent=this._streamBuffer,this._streamBuffer.trim()){const r={id:crypto.randomUUID(),role:"assistant",content:this._streamBuffer,timestamp:Date.now()};this._messages=[...this._messages,r]}this._streaming=!1,this._streamingTokens=0,this._streamingContent="",this._streamBuffer="",this._rafPending=!1,this._focusInput()}};if(document.addEventListener("message:streaming",a),this._eventUnsubs.push(()=>document.removeEventListener("message:streaming",a)),this.rpcClient){const i=this.rpcClient.onNotification((r,u)=>{if(r!=="notification.message")return;const h=u,f=typeof h?.text=="string"?h.text:"";if(!f)return;console.debug("[chat] notification.message received, length:",f.length);const x={id:crypto.randomUUID(),role:"assistant",content:f,timestamp:typeof h?.timestamp=="number"?h.timestamp:Date.now()};this._messages=[...this._messages,x],this._syncSessionMessageCount(),this._scrollToBottom()});this._eventUnsubs.push(i);const n=this.rpcClient.onNotification((r,u)=>{if(r!=="notification.attachment")return;const h=u,f=typeof h?.url=="string"?h.url:"";if(!f)return;console.debug("[chat] notification.attachment received:",h?.type,h?.fileName);const x=h?.type??"file",b=h?.fileName??"attachment",T=typeof h?.caption=="string"?h.caption:"",L=h?.mimeType??"",I=JSON.stringify({url:f,type:x,mimeType:L,fileName:b}),E=T?`${T}
+
+<!-- attachment:${I} -->`:`<!-- attachment:${I} -->`,O={id:crypto.randomUUID(),role:"assistant",content:E,timestamp:typeof h?.timestamp=="number"?h.timestamp:Date.now()};this._messages=[...this._messages,O],this._syncSessionMessageCount(),this._scrollToBottom()});this._eventUnsubs.push(n)}}_appendMessage(e){const t={id:String(e.id??crypto.randomUUID()),role:e.role??"assistant",content:String(e.content??""),timestamp:e.timestamp??Date.now()};this._messages=[...this._messages,t],this._userScrolledUp&&(this._hasNewMessages=!0)}async _loadSessions(){if(!this.rpcClient){this._loading=!1;return}try{const t=(await this.rpcClient.call("session.list",{kind:"dm"}))?.sessions??[];if(this._sessions=t.map(s=>({key:s.sessionKey,agentId:s.agentId,channelType:s.channelId.startsWith("web:")?"web":s.kind,messageCount:s.messageCount??0,lastActivity:s.updatedAt})),this._loading=!1,this.sessionKey){const s=this._sessions.find(a=>a.key===this.sessionKey);s&&(this._activeSession=s.key,this._loadSessionHistory())}}catch{this._sessions=[],this._loading=!1}}async _loadSessionHistory(){if(!(!this.rpcClient||!this._activeSession)){this._loading=!0;try{const t=(await this.rpcClient.call("session.history",{session_key:this._activeSession}))?.messages??[];this._messages=t.map(s=>({id:s.id??crypto.randomUUID(),role:s.role,content:s.role==="assistant"?S(s.content):s.role==="user"?B(s.content):s.content,timestamp:s.timestamp??0,toolCalls:s.toolCalls})).filter(s=>s.content!==""||s.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}const t=this._sessions.find(s=>s.key===this._activeSession)?.agentId??"default";try{const a=(await this.rpcClient.call("obs.context.pipeline",{agentId:t,limit:1}))?.snapshots??[];if(a.length===0){this._budgetSegments=[],this._budgetTotal=0;return}const i=a[0],n=i.tokensLoaded??0,r=i.tokensEvicted??0,u=i.tokensMasked??0,h=i.budgetUtilization??0,f=h>0?Math.round(n/h):0,x=Math.max(0,f-n),b=[];n>0&&b.push({label:"Loaded",tokens:n,color:"var(--ic-accent)"}),r>0&&b.push({label:"Evicted",tokens:r,color:"var(--ic-warning)"}),u>0&&b.push({label:"Masked",tokens:u,color:"var(--ic-text-dim)"}),x>0&&b.push({label:"Available",tokens:x,color:"var(--ic-surface-2)"}),this._budgetSegments=b,this._budgetTotal=f}catch{this._budgetSegments=[],this._budgetTotal=0}}async _loadAgents(){if(this.apiClient)try{const e=await this.apiClient.getAgents();this._agents=e.length>0?e.map(t=>({id:t.id,name:t.name??t.id,model:t.model})):[{id:"default",name:"Default",model:"unknown"}]}catch{this._agents=[{id:"default",name:"Default",model:"unknown"}]}}_createNewSession(){const e=`web:${this._selectedAgent}:${crypto.randomUUID()}`,t={key:e,agentId:this._selectedAgent,channelType:"web",messageCount:0,lastActivity:Date.now()};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;const{scrollTop:e,scrollHeight:t,clientHeight:s}=this._messageArea,a=t-e-s<50;this._userScrolledUp=!a,a&&(this._hasNewMessages=!1)}_scrollToBottom(){requestAnimationFrame(()=>{this._messageArea&&(this._messageArea.scrollTop=this._messageArea.scrollHeight,this._userScrolledUp=!1,this._hasNewMessages=!1)})}_focusInput(){this.updateComplete.then(()=>{setTimeout(()=>{this._textarea&&!this._textarea.disabled&&this._textarea.focus()},0)})}_handleInput(e){const 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){const 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())}async _sendMessage(){const e=this._inputValue.trim();if(!(e===""&&this._attachments.length===0||this._sending)&&this.apiClient&&!(!this._activeSession&&(this._createNewSession(),!this._activeSession))){if(this._sending=!0,e){const t={id:crypto.randomUUID(),role:"user",content:e,timestamp:Date.now()};this._messages=[...this._messages,t]}this._inputValue="",this._textarea&&(this._textarea.style.height="auto"),this._scrollToBottom();try{for(const a of this._attachments)a.previewUrl&&URL.revokeObjectURL(a.previewUrl);this._attachments=[];const t=await this.apiClient.chat(e,this._selectedAgent,this._activeSession??void 0),s=t.response?S(t.response):"";if(s){const a={id:crypto.randomUUID(),role:"assistant",content:s,timestamp:Date.now()};this._messages=[...this._messages,a]}}catch(t){const s={id:crypto.randomUUID(),role:"error",content:t instanceof Error?t.message:"Failed to send message",timestamp:Date.now()};this._messages=[...this._messages,s]}finally{this._sending=!1,this._syncSessionMessageCount(),this._scrollToBottom(),this._focusInput()}}}_syncSessionMessageCount(){if(!this._activeSession)return;const e=this._messages.filter(t=>t.role!=="error").length;this._sessions=this._sessions.map(t=>t.key===this._activeSession?{...t,messageCount:e,lastActivity:Date.now()}:t)}async _startRecording(){if(!navigator.mediaDevices){m.show("Microphone access not available","error");return}try{const e=await navigator.mediaDevices.getUserMedia({audio:!0});this._mediaRecorder=new MediaRecorder(e),this._audioChunks=[],this._recording=!0,this._recordingDuration=0,this._recordingTimer=setInterval(()=>{this._recordingDuration++,this._recordingDuration>=q&&(m.show("Maximum recording duration reached","warning"),this._stopRecording())},1e3),this._mediaRecorder.ondataavailable=t=>{t.data.size>0&&this._audioChunks.push(t.data)},this._mediaRecorder.onerror=()=>{m.show("Recording error occurred","error"),this._resetRecordingState()},this._mediaRecorder.onstop=async()=>{const t=new Blob(this._audioChunks,{type:"audio/webm"});this._transcribing=!0;try{const s=await t.arrayBuffer(),a=new Uint8Array(s);let i="";for(let u=0;u<a.length;u++)i+=String.fromCharCode(a[u]);const n=btoa(i),r=await this.rpcClient.call("audio.transcribe",{audio:n,format:"webm"});r?.text&&(this._inputValue+=(this._inputValue?" ":"")+r.text)}catch{m.show("Transcription failed","error")}finally{this._transcribing=!1}e.getTracks().forEach(s=>s.stop())},this._mediaRecorder.start()}catch{m.show("Microphone access denied","error")}}_stopRecording(){this._mediaRecorder&&this._mediaRecorder.state==="recording"&&this._mediaRecorder.stop(),this._resetRecordingState()}_resetRecordingState(){this._recording=!1,this._recordingTimer!==null&&(clearInterval(this._recordingTimer),this._recordingTimer=null)}_handleDragOver(e){e.preventDefault(),this._dragOver=!0}_handleDragLeave(){this._dragOver=!1}_handleDrop(e){e.preventDefault(),this._dragOver=!1;const t=e.dataTransfer?.files;if(t)for(let s=0;s<t.length;s++){const a=t[s];if(this._attachments.length>=J){m.show("Maximum 5 attachments per message","warning");break}if(a.size>Q){m.show(`File too large (max 10MB): ${a.name}`,"error");continue}let i="file",n;a.type.startsWith("image/")?(i="image",n=URL.createObjectURL(a)):a.type.startsWith("audio/")&&(i="audio");const r={id:crypto.randomUUID(),file:a,type:i,previewUrl:n};this._attachments=[...this._attachments,r]}}_removeAttachment(e){const t=this._attachments.find(s=>s.id===e);t?.previewUrl&&URL.revokeObjectURL(t.previewUrl),this._attachments=this._attachments.filter(s=>s.id!==e)}_getFilteredSlashCommands(){if(!this._slashFilter)return[...k];const e=this._slashFilter.toLowerCase();return k.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}),m.show("Session reset","success"),await this._loadSessionHistory()}catch{m.show("Failed to reset session","error")}break;case"/export":if(this._activeSession&&this.rpcClient)try{const t=await this.rpcClient.call("session.export",{session_key:this._activeSession});if(t?.data){const s=new Blob([t.data],{type:"application/jsonl"}),a=URL.createObjectURL(s),i=document.createElement("a");i.href=a,i.download=`session-${this._activeSession.slice(0,8)}.jsonl`,i.click(),URL.revokeObjectURL(a)}}catch{m.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}),m.show("Session compacted","success")}catch{m.show("Failed to compact session","error")}break;case"/switch":{const t=this.shadowRoot?.querySelector(".agent-select");t&&t.focus();break}case"/help":{const t=k.map(a=>`${a.command} - ${a.description}`).join(`
+`),s={id:crypto.randomUUID(),role:"system",content:`Available commands:
+${t}`,timestamp:Date.now()};this._messages=[...this._messages,s];break}}}async _handleRetry(e){const{messageId:t}=e.detail,s=this._messages.findIndex(i=>i.id===t);if(s<0)return;let a;for(let i=s-1;i>=0;i--)if(this._messages[i].role==="user"){a=this._messages[i];break}if(this._messages=this._messages.filter(i=>i.id!==t),a&&this.apiClient){this._sending=!0,this._scrollToBottom();try{const i=await this.apiClient.chat(a.content,this._selectedAgent,this._activeSession??void 0),n=i.response?S(i.response):"";if(n){const r={id:crypto.randomUUID(),role:"assistant",content:n,timestamp:Date.now()};this._messages=[...this._messages,r]}}catch(i){const n={id:crypto.randomUUID(),role:"error",content:i instanceof Error?i.message:"Retry failed",timestamp:Date.now()};this._messages=[...this._messages,n]}finally{this._sending=!1,this._scrollToBottom(),this._focusInput()}}}_handleDelete(e){const{messageId:t}=e.detail;this._messages=this._messages.filter(s=>s.id!==t)}get _filteredSessions(){if(!this._searchQuery)return this._sessions;const 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 c`
+      <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 c`
+      <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():_}
+        ${this._dragOver?c`<div class="drag-overlay"><ic-icon name="attach" size="24px"></ic-icon> Drop files here</div>`:_}
+      </div>
+    `}_renderConvHeader(){return c`
+      <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=>c`<option value=${e.id}>${e.name} (${e.model})</option>`)}
+        </select>
+        ${this._activeSession?c`
+              <div class="session-info">
+                <span class="session-info-key">${(()=>{const e=A(this._activeSession);return e?R(e):this._activeSession.slice(0,8)})()}</span>
+                <span>${this._messages.length} messages</span>
+              </div>
+            `:_}
+      </div>
+    `}_renderMessageArea(){return c`
+      <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(){const e=this._getFilteredSlashCommands(),t=this._inputValue.trim()===""&&this._attachments.length===0||this._sending;return c`
+      <div class="input-bar">
+        ${this._showSlashMenu&&e.length>0?c`
+              <div class="slash-menu" role="listbox">
+                ${e.map((s,a)=>c`
+                    <div
+                      class="slash-item ${a===this._slashSelectedIndex?"slash-item--active":""}"
+                      role="option"
+                      aria-selected=${a===this._slashSelectedIndex}
+                      @click=${()=>this._executeSlashCommand(s.command)}
+                    >
+                      <ic-icon name=${s.icon} size="16px" color="var(--ic-text-muted)"></ic-icon>
+                      <span class="slash-cmd">${s.command}</span>
+                      <span class="slash-desc">${s.description}</span>
+                    </div>
+                  `)}
+              </div>
+            `:_}
+        ${this._budgetSegments.length>0?c`
+          <div class="budget-bar-area">
+            <ic-budget-segment-bar
+              .segments=${this._budgetSegments}
+              .total=${this._budgetTotal}
+            ></ic-budget-segment-bar>
+          </div>
+        `:_}
+        ${this._attachments.length>0?c`
+              <div class="attachment-strip">
+                ${this._attachments.map(s=>this._renderAttachmentPreview(s))}
+              </div>
+            `:_}
+        <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=${t}
+            @click=${this._sendMessage}
+            aria-label="Send message"
+          >
+            <ic-icon name="send" size="18px"></ic-icon>
+          </button>
+        </div>
+      </div>
+    `}_renderVoiceButton(){if(this._transcribing)return c`
+        <button class="voice-btn" disabled aria-label="Transcribing">
+          <ic-loading size="sm"></ic-loading>
+        </button>
+      `;if(this._recording){const e=Math.floor(this._recordingDuration/60),t=this._recordingDuration%60,s=`${e}:${t.toString().padStart(2,"0")}`;return c`
+        <div class="recording-indicator">
+          <span class="recording-dot"></span>
+          <span class="recording-time">${s}</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>
+      `}return c`
+      <button
+        class="voice-btn"
+        @click=${this._startRecording}
+        aria-label="Start voice recording"
+      >
+        <ic-icon name="microphone" size="18px"></ic-icon>
+      </button>
+    `}_renderAttachmentPreview(e){return c`
+      <div class="attachment-preview">
+        ${e.type==="image"&&e.previewUrl?c`<img src=${e.previewUrl} alt=${e.file.name}>`:e.type==="audio"?c`<ic-icon name="audio-wave" size="16px"></ic-icon>`:c`<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 c`
+      ${this._renderSidebar()}
+      ${this._renderConversation()}
+    `}};o.styles=[$,M,C`
+      :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;
+        }
+      }
+    `];l([p({attribute:!1})],o.prototype,"apiClient",2);l([p({attribute:!1})],o.prototype,"rpcClient",2);l([p({attribute:!1})],o.prototype,"eventDispatcher",2);l([p()],o.prototype,"sessionKey",2);l([p()],o.prototype,"authToken",2);l([d()],o.prototype,"_sessions",2);l([d()],o.prototype,"_activeSession",2);l([d()],o.prototype,"_messages",2);l([d()],o.prototype,"_agents",2);l([d()],o.prototype,"_selectedAgent",2);l([d()],o.prototype,"_loading",2);l([d()],o.prototype,"_searchQuery",2);l([d()],o.prototype,"_sidebarOpen",2);l([d()],o.prototype,"_hasNewMessages",2);l([d()],o.prototype,"_inputValue",2);l([d()],o.prototype,"_sending",2);l([d()],o.prototype,"_attachments",2);l([d()],o.prototype,"_recording",2);l([d()],o.prototype,"_recordingDuration",2);l([d()],o.prototype,"_transcribing",2);l([d()],o.prototype,"_dragOver",2);l([d()],o.prototype,"_showSlashMenu",2);l([d()],o.prototype,"_slashFilter",2);l([d()],o.prototype,"_slashSelectedIndex",2);l([d()],o.prototype,"_streaming",2);l([d()],o.prototype,"_streamingTokens",2);l([d()],o.prototype,"_streamingContent",2);l([d()],o.prototype,"_budgetSegments",2);l([d()],o.prototype,"_budgetTotal",2);l([z(".message-area")],o.prototype,"_messageArea",2);l([z(".input-textarea")],o.prototype,"_textarea",2);o=l([D("ic-chat-console")],o);export{o as IcChatConsole};