comisai 1.0.23 → 1.0.25

package/node_modules/@comis/web/dist/assets/index-FLPhHz8p.js

@@ -0,0 +1,2792 @@
+const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/chat-console-BumBaIgO.js","assets/decorate-BvWYovGE.js","assets/ic-chat-message-FdQcZsSQ.js","assets/directive-BOYXJ-K-.js","assets/ic-icon-BGNCCPpZ.js","assets/ic-budget-segment-bar-zLsMzjDO.js","assets/ic-relative-time-B3UAnTqg.js","assets/ic-tag-CvMVQFRR.js","assets/ic-tool-call-DMPHsLyx.js","assets/ic-empty-state-CM3Wbj2f.js","assets/ic-search-input-B02AGw1i.js","assets/session-key-parser-Dkqcj2Ss.js","assets/memory-inspector-D5Re9ptG.js","assets/ic-data-table-CKIvr-ag.js","assets/ic-confirm-dialog-DGlPbV1T.js","assets/ic-detail-panel-DiCe4hLr.js","assets/agent-list-6Uotjatr.js","assets/agent-detail-ru-AhppM.js","assets/ic-breadcrumb-DqN6G3gc.js","assets/agent-editor-hjwRuFVp.js","assets/ic-array-editor-BLoEyeLS.js","assets/workspace-manager-DlvBixiq.js","assets/skills-BCOGPf6s.js","assets/ic-tabs-yBjkWKJH.js","assets/mcp-management-5jyScQis.js","assets/models-D5vu07MR.js","assets/ic-connection-dot-BgYiK2N4.js","assets/channel-list-FkfeOLBQ.js","assets/channel-detail-BBCKtmne.js","assets/message-center-cRLK6ZmG.js","assets/scheduler-VafN_8xi.js","assets/session-list-DfCm8Cec.js","assets/session-detail-BpZ_8Yih.js","assets/ic-layer-waterfall-WkaFyu-l.js","assets/observe-view-CalNNEmd.js","assets/observability-types-D0tkwElU.js","assets/ic-delivery-row-B3YwjjuM.js","assets/context-engine-BENY3pWE.js","assets/billing-view-CxysXH0p.js","assets/ic-time-range-picker-DXbYeBmY.js","assets/delivery-view-BCnkPsAp.js","assets/diagnostics-view-C_jQFG2H.js","assets/subagents-l-auUraL.js","assets/security-QQXMRTlo.js","assets/ic-select-BqfZISjw.js","assets/approvals-C-K6hN2U.js","assets/config-editor-C9BSwHGy.js","assets/setup-wizard-C-z477CG.js","assets/pipeline-list-BHlaBKww.js","assets/extract-variables-B7-Doo7l.js","assets/pipeline-builder-DUYDGwZf.js","assets/ic-graph-canvas-ByRjij68.js","assets/pipeline-monitor-BhtpNEHf.js","assets/pipeline-history-BAO8brOe.js","assets/pipeline-history-detail-DectIoQt.js","assets/context-dag-browser-BHm00mJD.js","assets/media-test-DGTCtM8-.js","assets/media-config-J9oT9PPs.js"])))=>i.map(i=>d[i]);
+import{c as e,f as t,h as n,i as r,l as i,m as a,n as o,o as s,r as c,s as l,t as u,u as d}from"./decorate-BvWYovGE.js";(function(){let e=document.createElement(`link`).relList;if(e&&e.supports&&e.supports(`modulepreload`))return;for(let e of document.querySelectorAll(`link[rel="modulepreload"]`))n(e);new MutationObserver(e=>{for(let t of e)if(t.type===`childList`)for(let e of t.addedNodes)e.tagName===`LINK`&&e.rel===`modulepreload`&&n(e)}).observe(document,{childList:!0,subtree:!0});function t(e){let t={};return e.integrity&&(t.integrity=e.integrity),e.referrerPolicy&&(t.referrerPolicy=e.referrerPolicy),e.crossOrigin===`use-credentials`?t.credentials=`include`:e.crossOrigin===`anonymous`?t.credentials=`omit`:t.credentials=`same-origin`,t}function n(e){if(e.ep)return;e.ep=!0;let n=t(e);fetch(e.href,n)}})();function f(e,t,n){let r={Authorization:`Bearer ${t}`,"Content-Type":`application/json`};async function i(t,n){let i=`${e}${t}`,a=await fetch(i,{...n,headers:{...r,...n?.headers}});if(!a.ok){let e=await a.text(),t=(e.length>200?e.slice(0,200)+`...`:e).replace(/https?:\/\/[^\s"')]+/g,`[URL]`).replace(/[A-Za-z0-9_-]{20,}/g,`[REDACTED]`);throw Error(`Request failed (${a.status}): ${t}`)}return a.json()}async function a(t,n){let i=`${e}${t}`,a=await fetch(i,{...n,headers:{...r,...n?.headers}});if(!a.ok){let e=await a.text(),t=(e.length>200?e.slice(0,200)+`...`:e).replace(/https?:\/\/[^\s"')]+/g,`[URL]`).replace(/[A-Za-z0-9_-]{20,}/g,`[REDACTED]`);throw Error(`Request failed (${a.status}): ${t}`)}return a.text()}return{async getAgents(){let e=await i(`/api/agents`),t=e.agents??e.routing?.agents??[];return Array.isArray(t)?t:Object.entries(e).map(([e,t])=>({id:e,provider:t.provider??`unknown`,model:t.model??`unknown`,status:`active`}))},async getChannels(){let e=await i(`/api/channels`),t=e.channels??[];return Array.isArray(t)?t:Object.entries(e).map(([e,t])=>({type:t.type??e,name:e,enabled:t.enabled??!1,status:t.enabled?`healthy`:`disconnected`}))},async getActivity(e=50){return(await i(`/api/activity?limit=${e}`)).entries??[]},async searchMemory(e,t=10){return(await i(`/api/memory/search?q=${encodeURIComponent(e)}&limit=${t}`)).results??[]},async getMemoryStats(){return i(`/api/memory/stats`)},async chat(e,t,n){return i(`/api/chat`,{method:`POST`,body:JSON.stringify({message:e,agentId:t,sessionKey:n})})},async getChatHistory(){return(await i(`/api/chat/history`)).messages??[]},async health(){return(await fetch(`${e}/api/health`)).json()},subscribeEvents(n){let r=`${e}/api/events?token=${encodeURIComponent(t)}`,i=new EventSource(r);i.onmessage=e=>{try{n(`message`,JSON.parse(e.data))}catch{n(`message`,e.data)}};for(let e of[`message:received`,`message:sent`,`message:streaming`,`session:created`,`session:expired`,`audit:event`,`skill:executed`,`scheduler:job_completed`,`scheduler:heartbeat_check`,`system:error`,`ping`])i.addEventListener(e,(t=>{try{n(e,t.data?JSON.parse(t.data):{})}catch{n(e,t.data)}}));return i.onerror=()=>{n(`error`,{message:`SSE connection error`})},()=>{i.close()}},async browseMemory(e){if(n)return n(`memory.browse`,e);let t=new URLSearchParams;e.offset!==void 0&&t.set(`offset`,String(e.offset)),e.limit!==void 0&&t.set(`limit`,String(e.limit)),e.type&&t.set(`type`,e.type),e.trust&&t.set(`trust`,e.trust),e.agentId&&t.set(`agentId`,e.agentId),e.from!==void 0&&t.set(`from`,String(e.from)),e.to!==void 0&&t.set(`to`,String(e.to));let r=t.toString();return i(`/api/memory/browse${r?`?${r}`:``}`)},async deleteMemory(e){if(n){await n(`memory.delete`,{id:e});return}await i(`/api/memory/${encodeURIComponent(e)}`,{method:`DELETE`})},async deleteMemoryBulk(e){return n?n(`memory.delete`,{ids:e}):i(`/api/memory/bulk-delete`,{method:`POST`,body:JSON.stringify({ids:e})})},async exportMemory(e){return n?n(`memory.export`,e?{ids:e}:{}):a(`/api/memory/export`,{method:`POST`,body:JSON.stringify({ids:e})})},async listSessions(e){if(n)return((await n(`session.list`,e??{})).sessions??[]).map(e=>{let t=String(e.sessionKey??e.key??``),n=`unknown`,r=t.split(`:`);return r[0]===`agent`&&r.length>=3&&(n=r[1]??`unknown`),{key:t,agentId:String(e.agentId??n),channelType:String(e.kind??e.channelType??`unknown`),messageCount:Number(e.messageCount??0),totalTokens:Number(e.totalTokens??0),inputTokens:Number(e.inputTokens??0),outputTokens:Number(e.outputTokens??0),toolCalls:Number(e.toolCalls??0),compactions:Number(e.compactions??0),resetCount:Number(e.resetCount??0),createdAt:Number(e.createdAt??Date.now()),lastActiveAt:Number(e.updatedAt??e.lastActiveAt??Date.now())}});let t=new URLSearchParams;e?.agentId&&t.set(`agentId`,e.agentId),e?.channelType&&t.set(`channelType`,e.channelType),e?.search&&t.set(`search`,e.search);let r=t.toString();return i(`/api/sessions${r?`?${r}`:``}`)},async getSessionDetail(e){return n?n(`session.history`,{session_key:e}):i(`/api/sessions/${encodeURIComponent(e)}`)},async resetSession(e){if(n){await n(`session.reset`,{session_key:e});return}await i(`/api/sessions/${encodeURIComponent(e)}/reset`,{method:`POST`})},async compactSession(e){if(n){await n(`session.compact`,{session_key:e});return}await i(`/api/sessions/${encodeURIComponent(e)}/compact`,{method:`POST`})},async deleteSession(e){if(n){await n(`session.delete`,{session_key:e});return}await i(`/api/sessions/${encodeURIComponent(e)}`,{method:`DELETE`})},async exportSession(e){return n?n(`session.export`,{session_key:e}):a(`/api/sessions/${encodeURIComponent(e)}/export`)},async resetSessionsBulk(e){return n?n(`session.reset`,{keys:e}):i(`/api/sessions/bulk-reset`,{method:`POST`,body:JSON.stringify({keys:e})})},async exportSessionsBulk(e){return n?n(`session.export`,{keys:e}):a(`/api/sessions/bulk-export`,{method:`POST`,body:JSON.stringify({keys:e})})},async deleteSessionsBulk(e){return n?n(`session.delete`,{keys:e}):i(`/api/sessions/bulk-delete`,{method:`POST`,body:JSON.stringify({keys:e})})}}}var p=[{pattern:`dashboard`,view:`ic-dashboard`},{pattern:`agents`,view:`ic-agent-list`},{pattern:`agents/:id`,view:`ic-agent-detail`},{pattern:`agents/:id/edit`,view:`ic-agent-editor`},{pattern:`agents/:id/workspace`,view:`ic-workspace-manager`},{pattern:`channels`,view:`ic-channel-list`},{pattern:`channels/:type`,view:`ic-channel-detail`},{pattern:`messages`,view:`ic-message-center`},{pattern:`messages/:type`,view:`ic-message-center`},{pattern:`skills`,view:`ic-skills-view`},{pattern:`mcp`,view:`ic-mcp-management`},{pattern:`chat`,view:`ic-chat-console`},{pattern:`chat/:sessionKey`,view:`ic-chat-console`},{pattern:`memory`,view:`ic-memory-inspector`},{pattern:`sessions`,view:`ic-session-list-view`},{pattern:`sessions/:key`,view:`ic-session-detail`},{pattern:`scheduler`,view:`ic-scheduler-view`},{pattern:`scheduler/:jobId`,view:`ic-scheduler-view`},{pattern:`models`,view:`ic-models-view`},{pattern:`observe/overview`,view:`ic-observe-dashboard`},{pattern:`observe/context`,view:`ic-context-engine-view`},{pattern:`observe/billing`,view:`ic-billing-view`},{pattern:`observe/delivery`,view:`ic-delivery-view`},{pattern:`observe/diagnostics`,view:`ic-diagnostics-view`},{pattern:`context`,view:`ic-context-dag-browser`},{pattern:`subagents`,view:`ic-subagents-view`},{pattern:`media`,view:`ic-media-test-view`},{pattern:`media/config`,view:`ic-media-config-view`},{pattern:`security`,view:`ic-security-view`},{pattern:`approvals`,view:`ic-approvals-view`},{pattern:`config`,view:`ic-config-editor`},{pattern:`setup`,view:`ic-setup-wizard`},{pattern:`pipelines`,view:`ic-pipeline-list`},{pattern:`pipelines/new`,view:`ic-pipeline-builder`},{pattern:`pipelines/history`,view:`ic-pipeline-history`},{pattern:`pipelines/history/:graphId`,view:`ic-pipeline-history-detail`},{pattern:`pipelines/:graphId`,view:`ic-pipeline-monitor`},{pattern:`pipelines/:graphId/edit`,view:`ic-pipeline-builder`}];function m(){return p.map(e=>{let t=e.pattern.split(`/`);return{pattern:e.pattern,view:e.view,segments:t,segmentCount:t.length}}).sort((e,t)=>t.segmentCount-e.segmentCount)}var h={view:`ic-dashboard`,route:`dashboard`,params:{},query:{}};function g(e,t){let n=e.split(`/`);for(let e of t){if(n.length!==e.segmentCount)continue;let t={},r=!0;for(let i=0;i<e.segments.length;i++){let a=e.segments[i],o=n[i];if(a.startsWith(`:`))t[a.slice(1)]=o;else if(a!==o){r=!1;break}}if(r)return{view:e.view,route:e.pattern,params:t,query:{}}}return null}var _=[{from:`observe`,to:`observe/overview`}];function v(e,t=`dashboard`){let n=m();function r(){let e=window.location.hash.replace(/^#\/?/,``);if(!e)return{...h};let t=e.indexOf(`?`),r=t>=0?e.slice(0,t):e,i=t>=0?e.slice(t+1):``,a={};if(i)for(let e of i.split(`&`)){let t=e.indexOf(`=`);if(t>=0){let n=decodeURIComponent(e.slice(0,t)),r=decodeURIComponent(e.slice(t+1));n&&(a[n]=r)}else e&&(a[decodeURIComponent(e)]=``)}for(let e of _)if(r===e.from){let t=i?`#/${e.to}?${i}`:`#/${e.to}`;history.replaceState(null,``,t);let r=g(e.to,n);return r?{...r,query:a}:{...h,query:a}}let o=g(r,n);return o?{...o,query:a}:{...h,query:a}}function i(){e(r())}return{navigate(e){window.location.hash=`#/${e}`},current(){return r()},start(){window.addEventListener(`hashchange`,i),i()},stop(){window.removeEventListener(`hashchange`,i)},setQuery(e){let t=r(),n={...t.query,...e},i=Object.entries(n).filter(([,e])=>e!==``).map(([e,t])=>`${encodeURIComponent(e)}=${encodeURIComponent(t)}`).join(`&`),a=i?`#/${t.route}?${i}`:`#/${t.route}`;history.replaceState(null,``,a)}}}var y=3e4,ee=3e4,te=1e4,ne=1e3,re=3e4,ie=10;function b(){let e=null,t=`disconnected`,n=1,r=0,i=null,a=null,o=null,s=``,c=``,l=!1,u=new Map,d=new Set,f=new Set;function p(e){if(t!==e){t=e;for(let t of d)t(e)}}function m(){a!==null&&(clearInterval(a),a=null),o!==null&&(clearTimeout(o),o=null)}function h(){i!==null&&(clearTimeout(i),i=null)}function g(e){for(let[t,n]of u)clearTimeout(n.timer),n.reject(Error(e)),u.delete(t)}function _(){m(),a=setInterval(()=>{if(e===null||e.readyState!==globalThis.WebSocket.OPEN)return;let t=n++;e.send(JSON.stringify({jsonrpc:`2.0`,method:`system.ping`,id:t})),o=setTimeout(()=>{u.delete(t),e!==null&&e.close()},te),u.set(t,{resolve:()=>{o!==null&&(clearTimeout(o),o=null)},reject:()=>{o!==null&&(clearTimeout(o),o=null)},timer:setTimeout(()=>{u.delete(t)},y)})},ee)}function v(){if(l)return;if(r>=ie){p(`disconnected`);return}p(`reconnecting`);let e=Math.min(ne*2**r,re);r++,i=setTimeout(()=>{b(s,c)},e)}function b(t,n){let i=`${t}?token=${encodeURIComponent(n)}`;e=new globalThis.WebSocket(i),e.onopen=()=>{r=0,p(`connected`),_()},e.onmessage=e=>{let t;try{t=JSON.parse(e.data)}catch{return}if(!(t.method===`heartbeat`&&t.id==null)){if(t.method&&t.id==null){console.debug(`[rpc] notification received:`,t.method);for(let e of f)try{e(t.method,t.params)}catch(e){console.warn(`[rpc] notification handler error:`,e)}return}if(t.id!=null){let e=u.get(t.id);e&&(clearTimeout(e.timer),u.delete(t.id),t.error?e.reject(Error(`RPC error (${t.error.code}): ${t.error.message}`)):e.resolve(t.result))}}},e.onclose=t=>{if(m(),e=null,t.code>=4e3&&t.code<5e3){g(`Connection rejected: `+(t.reason||`auth error`)),p(`disconnected`);return}l||v()},e.onerror=()=>{}}return{get status(){return t},connect(e,t){l=!1,s=e,c=t,r=0,b(e,t)},disconnect(){l=!0,h(),m(),g(`Client disconnected`),p(`disconnected`),e!==null&&(e.close(),e=null)},call(t,r){return new Promise((i,a)=>{if(e===null||e.readyState!==globalThis.WebSocket.OPEN){a(Error(`Not connected`));return}let o=n++,s=setTimeout(()=>{u.delete(o),a(Error(`RPC request timed out after ${y}ms`))},y);u.set(o,{resolve:i,reject:a,timer:s});let c=JSON.stringify({jsonrpc:`2.0`,method:t,...r===void 0?{}:{params:r},id:o});try{e.send(c)}catch(e){clearTimeout(s),u.delete(o),a(Error(`Send failed: `+(e instanceof Error?e.message:String(e))))}})},onStatusChange(e){return d.add(e),()=>{d.delete(e)}},onNotification(e){return f.add(e),()=>{f.delete(e)}}}}function ae(){let e={connectionStatus:`disconnected`,pendingApprovals:0,errorCount:0,agentCount:0,channelCount:0,sessionCount:0,systemHealth:null,activeAgents:[],activeChannels:[]},t=new Set;function n(){for(let e of t)e()}return{get connectionStatus(){return e.connectionStatus},get pendingApprovals(){return e.pendingApprovals},get errorCount(){return e.errorCount},get agentCount(){return e.agentCount},get channelCount(){return e.channelCount},get sessionCount(){return e.sessionCount},get systemHealth(){return e.systemHealth},get activeAgents(){return e.activeAgents},get activeChannels(){return e.activeChannels},subscribe(e){return t.add(e),()=>{t.delete(e)}},getSnapshot(){return Object.freeze({...e})},update(t){e={...e,...t},n()}}}var oe=`message:received.message:sent.message:streaming.session:created.session:expired.audit:event.skill:executed.skill:rejected.observability:metrics.observability:token_usage.scheduler:job_started.scheduler:job_completed.scheduler:heartbeat_check.scheduler:heartbeat_alert.scheduler:heartbeat_delivered.scheduler:task_extracted.system:error.approval:requested.approval:resolved.graph:started.graph:node_updated.graph:completed.config:patched.diagnostic:channel_health.diagnostic:billing_snapshot.skill:loaded.skill:registry_reset.model:catalog_loaded.observability:reset.channel:registered.channel:deregistered.agent:hot_added.agent:hot_removed.security:injection_detected.security:injection_rate_exceeded.security:memory_tainted.security:warn.secret:accessed.secret:modified.model:fallback_attempt.model:fallback_exhausted.model:auth_cooldown.provider:degraded.provider:recovered.session:sub_agent_spawned.session:sub_agent_completed.session:sub_agent_archived.session:sub_agent_spawn_rejected.session:sub_agent_spawn_started.session:sub_agent_spawn_queued.session:sub_agent_lifecycle_ended.ping`.split(`.`);function se(){let e=null,t=!1,n=new Map;function r(e){if(!e)return{};try{return JSON.parse(e)}catch{return e}}function i(e,t){let r=n.get(e);if(r)for(let e of r)e(t);document.dispatchEvent(new CustomEvent(e,{detail:t}))}return{get connected(){return t},start(n,a){e!==null&&e.close();let o=`${n}/api/events?token=${encodeURIComponent(a)}`;e=new EventSource(o),e.onopen=()=>{t=!0},e.onerror=()=>{t=!1};for(let t of oe)e.addEventListener(t,(e=>{i(t,r(e.data))}));e.onmessage=e=>{i(`message`,r(e.data))}},stop(){e!==null&&(e.close(),e=null),t=!1,n.clear()},addEventListener(e,t){return n.has(e)||n.set(e,new Set),n.get(e).add(t),()=>{let r=n.get(e);r&&(r.delete(t),r.size===0&&n.delete(e))}}}}var ce=class{constructor(e,t,n,r=3e4){this._timer=null,this._host=e,this._rpcClient=t,this._onData=n,this._intervalMs=r,this._host.addController(this)}hostConnected(){this._poll(),this._timer=setInterval(()=>this._poll(),this._intervalMs)}hostDisconnected(){this._timer!==null&&(clearInterval(this._timer),this._timer=null)}async _poll(){try{let[e,t,n]=await Promise.all([this._rpcClient.call(`agent.list`),this._rpcClient.call(`channel.list`),this._rpcClient.call(`session.list`,{})]);this._onData({agents:e.agents.length,channels:t.channels.length,sessions:n.total,agentIds:e.agents,sessionEntries:n.sessions?.slice(0,20)??[]}),this._host.requestUpdate()}catch{}}},x=[{id:`home`,label:`Home`,items:[{route:`dashboard`,label:`Dashboard`,icon:`▣`}]},{id:`operate`,label:`Operate`,items:[{route:`agents`,label:`Agents`,icon:`⬤`,badge:`agentCount`},{route:`channels`,label:`Channels`,icon:`◎`,badge:`channelCount`},{route:`messages`,label:`Messages`,icon:`○`},{route:`chat`,label:`Chat`,icon:`▬`},{route:`sessions`,label:`Sessions`,icon:`◷`,badge:`sessionCount`},{route:`subagents`,label:`Sub-Agents`,icon:`◔`},{route:`pipelines`,label:`Pipelines`,icon:`◈`}]},{id:`observe`,label:`Observe`,items:[{route:`observe`,label:`Overview`,icon:`△`,badge:`errorCount`},{route:`observe/context`,label:`Context Engine`,icon:`◥`},{route:`context`,label:`Context DAG`,icon:`◖`},{route:`observe/billing`,label:`Billing`,icon:`◇`},{route:`observe/delivery`,label:`Delivery`,icon:`▷`},{route:`observe/diagnostics`,label:`Diagnostics`,icon:`□`}]},{id:`configure`,label:`Configure`,items:[{route:`skills`,label:`Skills`,icon:`⚒`},{route:`mcp`,label:`MCP Servers`,icon:`⚖`},{route:`models`,label:`Models`,icon:`⌸`},{route:`memory`,label:`Memory`,icon:`◉`},{route:`scheduler`,label:`Scheduler`,icon:`▨`},{route:`security`,label:`Security`,icon:`☖`},{route:`media`,label:`Media`,icon:`▶`},{route:`approvals`,label:`Approvals`,icon:`✓`,badge:`pendingApprovals`},{route:`config`,label:`Config`,icon:`⚙`}]}],le={route:`setup`,label:`Setup`,icon:`▶`},S=`ic_sidebar_collapsed`,C=class extends i{constructor(...e){super(...e),this.currentRoute=`dashboard`,this.pendingApprovals=0,this.errorCount=0,this.agentCount=0,this.channelCount=0,this.sessionCount=0,this.open=!1,this._collapsed=!1}static{this.styles=[c,o,n`
+      :host {
+        display: block;
+      }
+
+      .sidebar {
+        display: flex;
+        flex-direction: column;
+        width: 240px;
+        height: 100vh;
+        background: var(--ic-surface);
+        border-right: 1px solid var(--ic-border);
+        position: sticky;
+        top: 0;
+        transition: width var(--ic-transition);
+        overflow: hidden;
+      }
+
+      .sidebar.collapsed {
+        width: 64px;
+      }
+
+      nav {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        padding: var(--ic-space-sm) 0;
+        overflow-y: auto;
+      }
+
+      .section-header {
+        display: flex;
+        align-items: center;
+        padding: 6px 16px 4px;
+        font-size: 11px;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        color: var(--ic-text-dim);
+        user-select: none;
+        margin-top: 4px;
+      }
+
+      .section-header:first-of-type {
+        margin-top: 0;
+      }
+
+      .collapsed .section-header {
+        justify-content: center;
+        padding: 6px 0;
+      }
+
+      .collapsed .section-label {
+        display: none;
+      }
+
+      .collapsed .section-header::after {
+        content: "";
+        display: block;
+        width: 16px;
+        height: 1px;
+        background: var(--ic-border);
+      }
+
+      .nav-item {
+        display: flex;
+        align-items: center;
+        gap: var(--ic-space-sm);
+        padding: var(--ic-space-sm) var(--ic-space-md);
+        background: none;
+        border: none;
+        border-left: 3px solid transparent;
+        color: var(--ic-text-muted);
+        cursor: pointer;
+        font-family: inherit;
+        font-size: var(--ic-text-sm);
+        width: 100%;
+        text-align: left;
+        transition: color var(--ic-transition), background var(--ic-transition),
+          border-color var(--ic-transition);
+        white-space: nowrap;
+      }
+
+      .nav-item:hover {
+        color: var(--ic-text);
+        background: var(--ic-surface-2);
+      }
+
+      .nav-item[aria-current="page"] {
+        color: var(--ic-accent);
+        background: rgba(59, 130, 246, 0.1);
+        border-left-color: var(--ic-accent);
+      }
+
+      .nav-icon {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 20px;
+        height: 20px;
+        font-size: 14px;
+        flex-shrink: 0;
+      }
+
+      .nav-label {
+        flex: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .collapsed .nav-label {
+        display: none;
+      }
+
+      .badge {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        min-width: 18px;
+        height: 18px;
+        padding: 0 5px;
+        border-radius: 9px;
+        font-size: 11px;
+        font-weight: 600;
+        color: white;
+        background: var(--ic-error);
+        flex-shrink: 0;
+      }
+
+      .collapsed .badge {
+        display: none;
+      }
+
+      .divider {
+        height: 1px;
+        background: var(--ic-border);
+        margin: var(--ic-space-sm) var(--ic-space-md);
+      }
+
+      .sidebar-footer {
+        padding: var(--ic-space-sm);
+        border-top: 1px solid var(--ic-border);
+      }
+
+      .collapse-btn {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        padding: var(--ic-space-sm);
+        background: none;
+        border: none;
+        color: var(--ic-text-dim);
+        cursor: pointer;
+        font-family: inherit;
+        font-size: var(--ic-text-sm);
+        transition: color var(--ic-transition);
+      }
+
+      .collapse-btn:hover {
+        color: var(--ic-text);
+      }
+
+      .logout-btn {
+        display: flex;
+        align-items: center;
+        gap: var(--ic-space-sm);
+        width: 100%;
+        padding: var(--ic-space-sm) var(--ic-space-md);
+        background: none;
+        border: none;
+        border-left: 3px solid transparent;
+        color: var(--ic-text-dim);
+        cursor: pointer;
+        font-family: inherit;
+        font-size: var(--ic-text-sm);
+        text-align: left;
+        transition: color var(--ic-transition);
+      }
+
+      .logout-btn:hover {
+        color: var(--ic-error);
+      }
+
+      .collapsed .logout-label {
+        display: none;
+      }
+
+      /* Mobile overlay */
+      .overlay {
+        display: none;
+      }
+
+      @media (max-width: 767px) {
+        .sidebar {
+          position: fixed;
+          z-index: 50;
+          left: 0;
+          top: 0;
+          transform: translateX(-100%);
+          transition: transform var(--ic-transition-slow);
+        }
+
+        :host([open]) .sidebar {
+          transform: translateX(0);
+          width: 240px;
+        }
+
+        :host([open]) .sidebar.collapsed {
+          width: 240px;
+        }
+
+        :host([open]) .collapsed .nav-label,
+        :host([open]) .collapsed .badge,
+        :host([open]) .collapsed .logout-label,
+        :host([open]) .collapsed .section-label {
+          display: inline;
+        }
+
+        :host([open]) .collapsed .section-header::after {
+          display: none;
+        }
+
+        :host([open]) .overlay {
+          display: block;
+          position: fixed;
+          inset: 0;
+          background: rgba(0, 0, 0, 0.5);
+          z-index: 49;
+        }
+      }
+
+      @media (min-width: 768px) and (max-width: 1023px) {
+        .sidebar:not(.collapsed) {
+          width: 64px;
+        }
+
+        .sidebar:not(.collapsed) .nav-label,
+        .sidebar:not(.collapsed) .badge,
+        .sidebar:not(.collapsed) .logout-label,
+        .sidebar:not(.collapsed) .section-label {
+          display: none;
+        }
+
+        .sidebar:not(.collapsed) .section-header {
+          justify-content: center;
+          padding: 6px 0;
+        }
+
+        .sidebar:not(.collapsed) .section-header::after {
+          content: "";
+          display: block;
+          width: 16px;
+          height: 1px;
+          background: var(--ic-border);
+        }
+      }
+    `]}connectedCallback(){super.connectedCallback();try{let e=localStorage.getItem(S);e!==null&&(this._collapsed=JSON.parse(e))}catch{}}_isActive(e){if(this.currentRoute===e)return!0;if(!this.currentRoute.startsWith(e+`/`))return!1;for(let t of x)for(let n of t.items)if(n.route.length>e.length&&(this.currentRoute===n.route||this.currentRoute.startsWith(n.route+`/`)))return!1;return!0}_navigate(e){this.dispatchEvent(new CustomEvent(`navigate`,{detail:e}))}_logout(){this.dispatchEvent(new CustomEvent(`logout`))}_toggleCollapse(){this._collapsed=!this._collapsed;try{localStorage.setItem(S,JSON.stringify(this._collapsed))}catch{}}_closeOverlay(){this.dispatchEvent(new CustomEvent(`close`))}_getBadgeValue(e){switch(e.badge){case`pendingApprovals`:return this.pendingApprovals;case`errorCount`:return this.errorCount;case`agentCount`:return this.agentCount;case`channelCount`:return this.channelCount;case`sessionCount`:return this.sessionCount;default:return 0}}_renderNavItem(e){let n=this._isActive(e.route),r=this._getBadgeValue(e);return t`
+      <button
+        class="nav-item"
+        aria-current=${n?`page`:d}
+        @click=${()=>this._navigate(e.route)}
+      >
+        <span class="nav-icon">${e.icon}</span>
+        <span class="nav-label">${e.label}</span>
+        ${r>0?t`<span class="badge">${r}</span>`:d}
+      </button>
+    `}render(){return t`
+      <div class="overlay" @click=${this._closeOverlay}></div>
+      <div class="sidebar ${this._collapsed?`collapsed`:``}">
+        <nav role="navigation" aria-label="Main navigation">
+          ${x.map(e=>t`
+            <div class="section-header">
+              <span class="section-label">${e.label}</span>
+            </div>
+            ${e.items.map(e=>this._renderNavItem(e))}
+          `)}
+          <div class="divider"></div>
+          ${this._renderNavItem(le)}
+        </nav>
+        <div class="sidebar-footer">
+          <button
+            class="logout-btn"
+            @click=${this._logout}
+            aria-label="Logout"
+          >
+            <span class="nav-icon">\u2BBB</span>
+            <span class="logout-label">Logout</span>
+          </button>
+          <button
+            class="collapse-btn"
+            @click=${this._toggleCollapse}
+            aria-label=${this._collapsed?`Expand sidebar`:`Collapse sidebar`}
+          >
+            ${this._collapsed?`»`:`«`}
+          </button>
+        </div>
+      </div>
+    `}};u([l()],C.prototype,`currentRoute`,void 0),u([l({type:Number})],C.prototype,`pendingApprovals`,void 0),u([l({type:Number})],C.prototype,`errorCount`,void 0),u([l({type:Number})],C.prototype,`agentCount`,void 0),u([l({type:Number})],C.prototype,`channelCount`,void 0),u([l({type:Number})],C.prototype,`sessionCount`,void 0),u([l({type:Boolean,reflect:!0})],C.prototype,`open`,void 0),u([s()],C.prototype,`_collapsed`,void 0),C=u([e(`ic-sidebar`)],C);var w=class extends i{constructor(...e){super(...e),this.connectionStatus=`disconnected`,this.notificationCount=0,this.sidebarCollapsed=!1,this.tokenId=``,this._menuOpen=!1,this._boundCloseMenu=this._closeMenuOnOutsideClick.bind(this)}static{this.styles=[c,o,n`
+      :host {
+        display: block;
+      }
+
+      .topbar {
+        display: flex;
+        align-items: center;
+        height: 48px;
+        padding: 0 var(--ic-space-md);
+        background: var(--ic-surface);
+        border-bottom: 1px solid var(--ic-border);
+      }
+
+      .hamburger {
+        display: none;
+        align-items: center;
+        justify-content: center;
+        width: 32px;
+        height: 32px;
+        padding: 0;
+        margin-right: var(--ic-space-sm);
+        background: none;
+        border: none;
+        color: var(--ic-text-muted);
+        cursor: pointer;
+        font-size: 18px;
+      }
+
+      .hamburger:hover {
+        color: var(--ic-text);
+      }
+
+      @media (max-width: 767px) {
+        .hamburger {
+          display: flex;
+        }
+      }
+
+      .brand {
+        font-size: 1.125rem;
+        font-weight: 700;
+        color: var(--ic-text);
+        display: flex;
+        align-items: center;
+        gap: var(--ic-space-xs);
+      }
+
+      .brand-icon {
+        width: 80px;
+        height: 32px;
+        object-fit: contain;
+      }
+
+      .spacer {
+        flex: 1;
+      }
+
+      .status-area {
+        display: flex;
+        align-items: center;
+        gap: var(--ic-space-md);
+      }
+
+      /* Connection status */
+      .connection {
+        display: flex;
+        align-items: center;
+        gap: var(--ic-space-xs);
+      }
+
+      .connection-dot {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        flex-shrink: 0;
+      }
+
+      .connection-dot.connected {
+        background: var(--ic-success);
+      }
+
+      .connection-dot.reconnecting {
+        background: var(--ic-warning);
+        animation: pulse 1.5s ease-in-out infinite;
+      }
+
+      .connection-dot.disconnected {
+        background: var(--ic-error);
+      }
+
+      @keyframes pulse {
+        0%, 100% { opacity: 1; }
+        50% { opacity: 0.4; }
+      }
+
+      .connection-text {
+        font-size: var(--ic-text-xs);
+        color: var(--ic-text-dim);
+      }
+
+      /* Notification bell */
+      .bell-btn {
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 32px;
+        height: 32px;
+        padding: 0;
+        background: none;
+        border: none;
+        color: var(--ic-text-muted);
+        cursor: pointer;
+        font-size: 16px;
+      }
+
+      .bell-btn:hover {
+        color: var(--ic-text);
+      }
+
+      .bell-badge {
+        position: absolute;
+        top: 2px;
+        right: 2px;
+        min-width: 14px;
+        height: 14px;
+        padding: 0 3px;
+        border-radius: 7px;
+        font-size: 10px;
+        font-weight: 600;
+        color: white;
+        background: var(--ic-error);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      /* User menu */
+      .user-menu {
+        position: relative;
+      }
+
+      .avatar-btn {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 32px;
+        height: 32px;
+        padding: 0;
+        border-radius: 50%;
+        background: var(--ic-surface-2);
+        border: 1px solid var(--ic-border);
+        color: var(--ic-text-muted);
+        cursor: pointer;
+        font-family: inherit;
+        font-size: var(--ic-text-xs);
+        font-weight: 600;
+      }
+
+      .avatar-btn:hover {
+        border-color: var(--ic-accent);
+        color: var(--ic-text);
+      }
+
+      .dropdown {
+        position: absolute;
+        top: 100%;
+        right: 0;
+        margin-top: var(--ic-space-xs);
+        min-width: 180px;
+        background: var(--ic-surface);
+        border: 1px solid var(--ic-border);
+        border-radius: var(--ic-radius-md);
+        box-shadow: var(--ic-shadow-lg);
+        z-index: 100;
+        padding: var(--ic-space-sm) 0;
+      }
+
+      .dropdown-info {
+        padding: var(--ic-space-sm) var(--ic-space-md);
+        font-size: var(--ic-text-xs);
+        color: var(--ic-text-dim);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .dropdown-divider {
+        height: 1px;
+        background: var(--ic-border);
+        margin: var(--ic-space-xs) 0;
+      }
+
+      .dropdown-action {
+        display: block;
+        width: 100%;
+        padding: var(--ic-space-sm) var(--ic-space-md);
+        background: none;
+        border: none;
+        color: var(--ic-text-muted);
+        cursor: pointer;
+        font-family: inherit;
+        font-size: var(--ic-text-sm);
+        text-align: left;
+      }
+
+      .dropdown-action:hover {
+        background: var(--ic-surface-2);
+        color: var(--ic-error);
+      }
+    `]}connectedCallback(){super.connectedCallback(),document.addEventListener(`click`,this._boundCloseMenu)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener(`click`,this._boundCloseMenu)}_closeMenuOnOutsideClick(e){let t=e.composedPath();this._menuOpen&&!t.includes(this)&&(this._menuOpen=!1)}_toggleSidebar(){this.dispatchEvent(new CustomEvent(`toggle-sidebar`))}_toggleMenu(){this._menuOpen=!this._menuOpen}_logout(){this._menuOpen=!1,this.dispatchEvent(new CustomEvent(`logout`))}_getAvatarText(){return this.tokenId&&this.tokenId.length>=2?this.tokenId.slice(0,2).toUpperCase():`OP`}_getStatusText(){switch(this.connectionStatus){case`connected`:return`Connected`;case`reconnecting`:return`Reconnecting`;case`disconnected`:return`Disconnected`;default:return`Unknown`}}render(){return t`
+      <div class="topbar">
+        <button
+          class="hamburger"
+          @click=${this._toggleSidebar}
+          aria-label="Toggle navigation"
+        >
+          \u2630
+        </button>
+        <div class="brand">
+          <img class="brand-icon" src="${`/app/`}comis-logo.png" alt="Comis" />
+        </div>
+        <div class="spacer"></div>
+        <aside role="complementary" aria-label="System status">
+          <div class="status-area">
+            <div class="connection" aria-live="polite">
+              <span class="connection-dot ${this.connectionStatus}"></span>
+              <span class="connection-text">${this._getStatusText()}</span>
+            </div>
+            <button
+              class="bell-btn"
+              aria-label="Notifications${this.notificationCount>0?`, ${this.notificationCount} pending`:``}"
+            >
+              \u{1F514}
+              ${this.notificationCount>0?t`<span class="bell-badge">${this.notificationCount}</span>`:d}
+            </button>
+            <div class="user-menu">
+              <button
+                class="avatar-btn"
+                @click=${this._toggleMenu}
+                aria-label="User menu"
+                aria-expanded=${this._menuOpen}
+              >
+                ${this._getAvatarText()}
+              </button>
+              ${this._menuOpen?t`
+                    <div class="dropdown">
+                      <div class="dropdown-info">
+                        ${this.tokenId?`${this.tokenId.slice(0,6)}${`*`.repeat(Math.min(8,Math.max(0,this.tokenId.length-10)))}${this.tokenId.length>10?this.tokenId.slice(-4):``}`:`Operator`}
+                      </div>
+                      <div class="dropdown-divider"></div>
+                      <button
+                        class="dropdown-action"
+                        @click=${this._logout}
+                      >
+                        Logout
+                      </button>
+                    </div>
+                  `:d}
+            </div>
+          </div>
+        </aside>
+      </div>
+    `}};u([l()],w.prototype,`connectionStatus`,void 0),u([l({type:Number})],w.prototype,`notificationCount`,void 0),u([l({type:Boolean})],w.prototype,`sidebarCollapsed`,void 0),u([l()],w.prototype,`tokenId`,void 0),u([s()],w.prototype,`_menuOpen`,void 0),w=u([e(`ic-topbar`)],w);var ue=[{id:`v-dashboard`,label:`Dashboard`,category:`view`,icon:`home`,action:`dashboard`},{id:`v-agents`,label:`Agents`,category:`view`,icon:`users`,action:`agents`},{id:`v-sessions`,label:`Sessions`,category:`view`,icon:`message-circle`,action:`sessions`},{id:`v-channels`,label:`Channels`,category:`view`,icon:`radio`,action:`channels`},{id:`v-chat`,label:`Chat Console`,category:`view`,icon:`message-square`,action:`chat`},{id:`v-memory`,label:`Memory Inspector`,category:`view`,icon:`database`,action:`memory`},{id:`v-skills`,label:`Skills`,category:`view`,icon:`zap`,action:`skills`},{id:`v-models`,label:`Models`,category:`view`,icon:`cpu`,action:`models`},{id:`v-scheduler`,label:`Scheduler`,category:`view`,icon:`clock`,action:`scheduler`},{id:`v-pipelines`,label:`Pipelines`,category:`view`,icon:`git-branch`,action:`pipelines`},{id:`v-observe`,label:`Observability`,category:`view`,icon:`bar-chart-2`,action:`observe/overview`},{id:`v-billing`,label:`Billing`,category:`view`,icon:`dollar-sign`,action:`observe/billing`},{id:`v-delivery`,label:`Delivery`,category:`view`,icon:`send`,action:`observe/delivery`},{id:`v-diagnostics`,label:`Diagnostics`,category:`view`,icon:`activity`,action:`observe/diagnostics`},{id:`v-context`,label:`Context Engine`,category:`view`,icon:`layers`,action:`observe/context`},{id:`v-security`,label:`Security`,category:`view`,icon:`shield`,action:`security`},{id:`v-config`,label:`Settings`,category:`view`,icon:`settings`,action:`config`},{id:`v-setup`,label:`Setup Wizard`,category:`view`,icon:`compass`,action:`setup`}],de=[{id:`c-refresh`,label:`Refresh Data`,category:`command`,icon:`refresh-cw`,action:`refresh`},{id:`c-sidebar`,label:`Toggle Sidebar`,category:`command`,icon:`sidebar`,action:`toggle-sidebar`},{id:`c-logout`,label:`Logout`,category:`command`,icon:`log-out`,action:`logout`},{id:`c-shortcuts`,label:`Show Keyboard Shortcuts`,category:`command`,icon:`help-circle`,action:`show-shortcuts`}],fe=[`view`,`agent`,`session`,`command`],pe={view:`Views`,agent:`Agents`,session:`Sessions`,command:`Commands`},T=class extends i{constructor(...e){super(...e),this.open=!1,this.agents=[],this.sessions=[],this._query=``,this._activeIndex=-1,this._results=[]}static{this.styles=[c,o,r,n`
+      :host {
+        display: block;
+      }
+
+      .backdrop {
+        position: fixed;
+        inset: 0;
+        background: rgba(0, 0, 0, 0.5);
+        z-index: 100;
+        display: flex;
+        align-items: flex-start;
+        justify-content: center;
+        padding-top: 15vh;
+      }
+
+      .palette {
+        background: var(--ic-surface, #111827);
+        border: 1px solid var(--ic-border, #374151);
+        border-radius: var(--ic-radius-lg, 0.75rem);
+        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
+        max-width: 640px;
+        width: 90%;
+        max-height: 400px;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+      }
+
+      .search-input {
+        width: 100%;
+        padding: var(--ic-space-md, 0.75rem) var(--ic-space-lg, 1rem);
+        background: transparent;
+        border: none;
+        border-bottom: 1px solid var(--ic-border, #374151);
+        color: var(--ic-text, #f3f4f6);
+        font-size: 1rem;
+        font-family: inherit;
+        outline: none;
+        box-sizing: border-box;
+      }
+
+      .search-input::placeholder {
+        color: var(--ic-text-dim, #6b7280);
+      }
+
+      .results {
+        overflow-y: auto;
+        flex: 1;
+        padding: var(--ic-space-xs, 0.25rem) 0;
+      }
+
+      .category-header {
+        padding: var(--ic-space-xs, 0.25rem) var(--ic-space-md, 0.75rem);
+        font-size: 0.6875rem;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        color: var(--ic-text-dim, #6b7280);
+        margin-top: var(--ic-space-xs, 0.25rem);
+      }
+
+      .result-item {
+        display: flex;
+        align-items: center;
+        gap: var(--ic-space-sm, 0.5rem);
+        padding: var(--ic-space-sm, 0.5rem) var(--ic-space-md, 0.75rem);
+        cursor: pointer;
+        color: var(--ic-text, #f3f4f6);
+        font-size: var(--ic-text-sm, 0.875rem);
+        transition: background 0.1s;
+      }
+
+      .result-item:hover,
+      .result-item[aria-selected="true"] {
+        background: var(--ic-accent, #3b82f6);
+        color: #fff;
+      }
+
+      .result-icon {
+        width: 16px;
+        height: 16px;
+        flex-shrink: 0;
+        opacity: 0.7;
+      }
+
+      .result-label {
+        flex: 1;
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .result-shortcut {
+        font-size: 0.6875rem;
+        color: var(--ic-text-dim, #6b7280);
+        font-family: var(--ic-font-mono, monospace);
+        flex-shrink: 0;
+      }
+
+      .result-item[aria-selected="true"] .result-shortcut {
+        color: rgba(255, 255, 255, 0.7);
+      }
+
+      .no-results {
+        padding: var(--ic-space-lg, 1rem);
+        text-align: center;
+        color: var(--ic-text-dim, #6b7280);
+        font-size: var(--ic-text-sm, 0.875rem);
+      }
+
+      .footer {
+        border-top: 1px solid var(--ic-border, #374151);
+        padding: var(--ic-space-xs, 0.25rem) var(--ic-space-md, 0.75rem);
+        display: flex;
+        gap: var(--ic-space-md, 0.75rem);
+        font-size: 0.6875rem;
+        color: var(--ic-text-dim, #6b7280);
+      }
+
+      .footer kbd {
+        background: var(--ic-surface-2, #1f2937);
+        border: 1px solid var(--ic-border, #374151);
+        border-radius: 3px;
+        padding: 1px 4px;
+        font-size: 0.625rem;
+        font-family: inherit;
+      }
+    `]}updated(e){e.has(`open`)&&this.open&&(this._query=``,this._activeIndex=-1,this._results=this._filterResults(``),this.updateComplete.then(()=>{(this.shadowRoot?.querySelector(`.search-input`))?.focus()}))}_getAllItems(){let e=[...ue];for(let t of this.agents)e.push({id:`a-${t.id}`,label:t.name??t.id,category:`agent`,icon:`user`,action:`agents/${t.id}`});for(let t of this.sessions.slice(0,20))e.push({id:`s-${t.key}`,label:`${t.agentId}: ${t.key}`,category:`session`,icon:`message-circle`,action:`sessions/${t.key}`});return e.push(...de),e}_filterResults(e){let t=this._getAllItems();if(!e)return t.filter(e=>e.category===`view`||e.category===`command`).slice(0,20);let n=e.toLowerCase();return t.filter(e=>e.label.toLowerCase().includes(n)).slice(0,20)}_getGroupedResults(){let e=new Map;for(let t of this._results){let n=e.get(t.category);n||(n=[],e.set(t.category,n)),n.push(t)}return fe.filter(t=>e.has(t)).map(t=>({category:t,items:e.get(t)}))}_handleInput(e){this._query=e.target.value,this._results=this._filterResults(this._query),this._activeIndex=this._results.length>0?0:-1}_handleKeydown(e){switch(e.key){case`ArrowDown`:e.preventDefault(),this._results.length>0&&(this._activeIndex=Math.min(this._activeIndex+1,this._results.length-1),this._scrollActiveIntoView());break;case`ArrowUp`:e.preventDefault(),this._results.length>0&&(this._activeIndex=Math.max(this._activeIndex-1,0),this._scrollActiveIntoView());break;case`Enter`:e.preventDefault(),this._activeIndex>=0&&this._activeIndex<this._results.length&&this._executeItem(this._results[this._activeIndex]);break;case`Escape`:e.preventDefault(),this._close();break}}_scrollActiveIntoView(){this.updateComplete.then(()=>{(this.shadowRoot?.querySelector(`#result-${this._activeIndex}`))?.scrollIntoView({block:`nearest`})})}_executeItem(e){e.category===`command`?this.dispatchEvent(new CustomEvent(`command`,{detail:e.action,bubbles:!0,composed:!0})):this.dispatchEvent(new CustomEvent(`navigate`,{detail:e.action,bubbles:!0,composed:!0})),this._close()}_close(){this._query=``,this._activeIndex=-1,this.dispatchEvent(new CustomEvent(`close`,{bubbles:!0,composed:!0}))}_handleBackdropClick(e){e.target.classList.contains(`backdrop`)&&this._close()}render(){if(!this.open)return d;let e=this._getGroupedResults(),n=0;return t`
+      <div class="backdrop" @click=${this._handleBackdropClick}>
+        <div class="palette" role="dialog" aria-label="Command palette">
+          <input
+            class="search-input"
+            type="text"
+            placeholder="Search views, agents, sessions, commands..."
+            role="combobox"
+            aria-expanded="true"
+            aria-controls="palette-results"
+            aria-activedescendant=${this._activeIndex>=0?`result-${this._activeIndex}`:``}
+            aria-autocomplete="list"
+            .value=${this._query}
+            @input=${this._handleInput}
+            @keydown=${this._handleKeydown}
+          />
+          <div class="results" id="palette-results" role="listbox" aria-label="Search results">
+            ${this._results.length===0?t`<div class="no-results">No results found</div>`:e.map(e=>t`
+                  <div class="category-header">${pe[e.category]??e.category}</div>
+                  ${e.items.map(e=>{let r=n++;return t`
+                      <div
+                        id="result-${r}"
+                        class="result-item"
+                        role="option"
+                        aria-selected=${r===this._activeIndex?`true`:`false`}
+                        @click=${()=>this._executeItem(e)}
+                        @pointerenter=${()=>{this._activeIndex=r}}
+                      >
+                        <ic-icon class="result-icon" name=${e.icon} size="16px"></ic-icon>
+                        <span class="result-label">${e.label}</span>
+                        ${e.shortcut?t`<span class="result-shortcut">${e.shortcut}</span>`:d}
+                      </div>
+                    `})}
+                `)}
+          </div>
+          <div class="footer">
+            <span><kbd>&uarr;</kbd><kbd>&darr;</kbd> Navigate</span>
+            <span><kbd>Enter</kbd> Select</span>
+            <span><kbd>Esc</kbd> Close</span>
+          </div>
+        </div>
+      </div>
+    `}};u([l({type:Boolean})],T.prototype,`open`,void 0),u([l({attribute:!1})],T.prototype,`agents`,void 0),u([l({attribute:!1})],T.prototype,`sessions`,void 0),u([s()],T.prototype,`_query`,void 0),u([s()],T.prototype,`_activeIndex`,void 0),u([s()],T.prototype,`_results`,void 0),T=u([e(`ic-command-palette`)],T);var me={sm:`16px`,md:`24px`,lg:`48px`},E=class extends i{constructor(...e){super(...e),this.mode=`spinner`,this.size=`md`,this.lines=3}static{this.styles=[c,n`
+      :host {
+        display: block;
+      }
+
+      /* --- Spinner --- */
+      .spinner {
+        border: 2px solid var(--ic-border);
+        border-top-color: var(--ic-accent);
+        border-radius: 50%;
+        animation: spin 0.8s linear infinite;
+      }
+
+      @keyframes spin {
+        to {
+          transform: rotate(360deg);
+        }
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .spinner {
+          animation: none;
+          border-top-color: var(--ic-accent);
+          opacity: 0.7;
+        }
+      }
+
+      /* --- Skeleton --- */
+      .skeleton-container {
+        display: flex;
+        flex-direction: column;
+        gap: var(--ic-space-sm);
+      }
+
+      .skeleton-line {
+        height: 12px;
+        background: var(--ic-surface-2);
+        border-radius: var(--ic-radius-sm);
+        position: relative;
+        overflow: hidden;
+      }
+
+      .skeleton-line::after {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: linear-gradient(
+          90deg,
+          transparent,
+          rgba(255, 255, 255, 0.05),
+          transparent
+        );
+        animation: shimmer 1.5s ease-in-out infinite;
+      }
+
+      @keyframes shimmer {
+        0% {
+          transform: translateX(-100%);
+        }
+        100% {
+          transform: translateX(100%);
+        }
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .skeleton-line::after {
+          animation: none;
+          display: none;
+        }
+      }
+    `]}render(){return this.mode===`skeleton`?this._renderSkeleton():this._renderSpinner()}_renderSpinner(){let e=me[this.size]??me.md;return t`
+      <div
+        class="spinner"
+        style="width: ${e}; height: ${e};"
+        role="status"
+        aria-label="Loading"
+      ></div>
+    `}_renderSkeleton(){let e=[`100%`,`80%`,`60%`];return t`
+      <div
+        class="skeleton-container"
+        role="status"
+        aria-label="Loading"
+      >
+        ${Array.from({length:this.lines},(e,t)=>t).map(n=>t`<div
+              class="skeleton-line"
+              style="width: ${e[n%e.length]};"
+            ></div>`)}
+      </div>
+    `}};u([l()],E.prototype,`mode`,void 0),u([l()],E.prototype,`size`,void 0),u([l({type:Number})],E.prototype,`lines`,void 0),E=u([e(`ic-loading`)],E);var D=class extends i{constructor(...e){super(...e),this.variant=`dashboard`,this._showSkeleton=!1,this._delayTimer=null}static{this.styles=[c,n`
+      :host {
+        display: block;
+      }
+
+      .skeleton-container {
+        padding: var(--ic-space-md, 0.75rem) 0;
+      }
+
+      .skeleton-hidden {
+        visibility: hidden;
+      }
+
+      /* Dashboard variant */
+      .skeleton-stats {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: var(--ic-space-md);
+        margin-bottom: var(--ic-space-lg);
+      }
+
+      @media (max-width: 639px) {
+        .skeleton-stats {
+          grid-template-columns: 1fr;
+        }
+      }
+
+      .skeleton-stat-card {
+        background: var(--ic-surface, #111827);
+        border: 1px solid var(--ic-border, #374151);
+        border-radius: var(--ic-radius-md);
+        padding: var(--ic-space-md) var(--ic-space-lg);
+        height: 80px;
+      }
+
+      .skeleton-content-block {
+        background: var(--ic-surface, #111827);
+        border: 1px solid var(--ic-border, #374151);
+        border-radius: var(--ic-radius-lg);
+        padding: var(--ic-space-lg);
+      }
+
+      /* List variant */
+      .skeleton-search {
+        height: 40px;
+        background: var(--ic-surface, #111827);
+        border: 1px solid var(--ic-border, #374151);
+        border-radius: var(--ic-radius-md);
+        margin-bottom: var(--ic-space-md);
+        max-width: 320px;
+      }
+
+      .skeleton-row {
+        display: flex;
+        gap: var(--ic-space-md);
+        padding: var(--ic-space-sm) var(--ic-space-md);
+        border-bottom: 1px solid var(--ic-border, #374151);
+      }
+
+      .skeleton-row-cell {
+        flex: 1;
+      }
+
+      /* Detail variant */
+      .skeleton-detail-header {
+        margin-bottom: var(--ic-space-lg);
+      }
+
+      .skeleton-two-col {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: var(--ic-space-lg);
+      }
+
+      @media (max-width: 767px) {
+        .skeleton-two-col {
+          grid-template-columns: 1fr;
+        }
+      }
+
+      .skeleton-block {
+        background: var(--ic-surface, #111827);
+        border: 1px solid var(--ic-border, #374151);
+        border-radius: var(--ic-radius-lg);
+        padding: var(--ic-space-lg);
+        min-height: 150px;
+      }
+
+      /* Editor variant */
+      .skeleton-editor-block {
+        background: var(--ic-surface, #111827);
+        border: 1px solid var(--ic-border, #374151);
+        border-radius: var(--ic-radius-lg);
+        padding: var(--ic-space-lg);
+        min-height: 300px;
+      }
+    `]}connectedCallback(){super.connectedCallback(),this._delayTimer=setTimeout(()=>{this._showSkeleton=!0},150)}disconnectedCallback(){super.disconnectedCallback(),this._delayTimer&&=(clearTimeout(this._delayTimer),null)}_renderDashboard(){return t`
+      <div class="skeleton-stats">
+        <div class="skeleton-stat-card"><ic-loading mode="skeleton" lines="2"></ic-loading></div>
+        <div class="skeleton-stat-card"><ic-loading mode="skeleton" lines="2"></ic-loading></div>
+        <div class="skeleton-stat-card"><ic-loading mode="skeleton" lines="2"></ic-loading></div>
+      </div>
+      <div class="skeleton-content-block"><ic-loading mode="skeleton" lines="6"></ic-loading></div>
+    `}_renderList(){return t`
+      <div class="skeleton-search"></div>
+      <div class="skeleton-content-block">
+        ${Array.from({length:8},()=>t`
+          <div class="skeleton-row">
+            <div class="skeleton-row-cell"><ic-loading mode="skeleton" lines="1"></ic-loading></div>
+            <div class="skeleton-row-cell"><ic-loading mode="skeleton" lines="1"></ic-loading></div>
+            <div class="skeleton-row-cell"><ic-loading mode="skeleton" lines="1"></ic-loading></div>
+          </div>
+        `)}
+      </div>
+    `}_renderDetail(){return t`
+      <div class="skeleton-detail-header">
+        <ic-loading mode="skeleton" lines="2"></ic-loading>
+      </div>
+      <div class="skeleton-two-col">
+        <div class="skeleton-block"><ic-loading mode="skeleton" lines="5"></ic-loading></div>
+        <div class="skeleton-block"><ic-loading mode="skeleton" lines="5"></ic-loading></div>
+      </div>
+    `}_renderTable(){return t`
+      <div class="skeleton-content-block">
+        <ic-loading mode="skeleton" lines="1"></ic-loading>
+        ${Array.from({length:8},()=>t`
+          <div class="skeleton-row">
+            <div class="skeleton-row-cell"><ic-loading mode="skeleton" lines="1"></ic-loading></div>
+            <div class="skeleton-row-cell"><ic-loading mode="skeleton" lines="1"></ic-loading></div>
+          </div>
+        `)}
+      </div>
+    `}_renderEditor(){return t`
+      <div class="skeleton-detail-header">
+        <ic-loading mode="skeleton" lines="1"></ic-loading>
+      </div>
+      <div class="skeleton-editor-block"><ic-loading mode="skeleton" lines="8"></ic-loading></div>
+    `}render(){return t`
+      <div class=${this._showSkeleton?`skeleton-container`:`skeleton-container skeleton-hidden`} role="status" aria-label="Loading content">
+        ${(()=>{switch(this.variant){case`dashboard`:return this._renderDashboard();case`list`:return this._renderList();case`detail`:return this._renderDetail();case`table`:return this._renderTable();case`editor`:return this._renderEditor()}})()}
+      </div>
+    `}};u([l()],D.prototype,`variant`,void 0),u([s()],D.prototype,`_showSkeleton`,void 0),D=u([e(`ic-skeleton-view`)],D);var O,k={success:`var(--ic-success)`,error:`var(--ic-error)`,warning:`var(--ic-warning)`,info:`var(--ic-info)`},he=5,ge=0,A=class extends i{static{O=this}constructor(...e){super(...e),this._toasts=[],this._timers=new Map}static{this.styles=[c,n`
+      :host {
+        position: fixed;
+        bottom: var(--ic-space-lg);
+        right: var(--ic-space-lg);
+        z-index: 10000;
+        display: flex;
+        flex-direction: column;
+        gap: var(--ic-space-sm);
+        pointer-events: none;
+      }
+
+      .toast {
+        display: flex;
+        align-items: center;
+        gap: var(--ic-space-sm);
+        background: var(--ic-surface);
+        border: 1px solid var(--ic-border);
+        border-radius: var(--ic-radius-md);
+        padding: var(--ic-space-sm) var(--ic-space-md);
+        min-width: 16rem;
+        max-width: 24rem;
+        box-shadow: var(--ic-shadow-lg);
+        pointer-events: auto;
+        animation: toast-enter var(--ic-transition-slow) ease forwards;
+      }
+
+      .toast--exiting {
+        animation: toast-exit var(--ic-transition) ease forwards;
+      }
+
+      @keyframes toast-enter {
+        from {
+          opacity: 0;
+          transform: translateX(1rem);
+        }
+        to {
+          opacity: 1;
+          transform: translateX(0);
+        }
+      }
+
+      @keyframes toast-exit {
+        from {
+          opacity: 1;
+        }
+        to {
+          opacity: 0;
+        }
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .toast,
+        .toast--exiting {
+          animation: none;
+        }
+      }
+
+      .toast__border {
+        width: 4px;
+        align-self: stretch;
+        border-radius: 2px;
+        flex-shrink: 0;
+      }
+
+      .toast__message {
+        flex: 1;
+        font-size: var(--ic-text-sm);
+        color: var(--ic-text);
+      }
+
+      .toast__close {
+        background: none;
+        border: none;
+        color: var(--ic-text-dim);
+        cursor: pointer;
+        padding: var(--ic-space-xs);
+        font-size: var(--ic-text-sm);
+        line-height: 1;
+        flex-shrink: 0;
+        border-radius: var(--ic-radius-sm);
+        transition: color var(--ic-transition);
+      }
+
+      .toast__close:hover {
+        color: var(--ic-text);
+      }
+    `]}static{this._instance=null}connectedCallback(){super.connectedCallback(),O._instance=this,this._onDocumentToast=this._onDocumentToast.bind(this),document.addEventListener(`ic-toast`,this._onDocumentToast)}disconnectedCallback(){super.disconnectedCallback(),O._instance===this&&(O._instance=null),document.removeEventListener(`ic-toast`,this._onDocumentToast);for(let e of this._timers.values())clearTimeout(e);this._timers.clear()}static show(e,t=`info`,n=4e3){O._instance&&O._instance._addToast(e,t,n)}_onDocumentToast(e){let{message:t,variant:n=`info`,duration:r=4e3}=e.detail;this._addToast(t,n,r)}_addToast(e,t,n){let r=++ge,i={id:r,message:e,variant:t,duration:n},a=[...this._toasts,i];for(;a.length>he;){let e=a[0];this._clearTimer(e.id),a=a.slice(1)}this._toasts=a;let o=setTimeout(()=>{this._removeToast(r)},n);this._timers.set(r,o)}_removeToast(e){this._clearTimer(e),this._toasts=this._toasts.filter(t=>t.id!==e)}_clearTimer(e){let t=this._timers.get(e);t!==void 0&&(clearTimeout(t),this._timers.delete(e))}render(){return t`
+      <div role="alert" aria-live="polite">
+        ${this._toasts.map(e=>{let n=k[e.variant]??k.info;return t`
+            <div class="toast" data-variant=${e.variant}>
+              <div class="toast__border" style="background: ${n}"></div>
+              <span class="toast__message">${e.message}</span>
+              <button
+                class="toast__close"
+                aria-label="Close notification"
+                @click=${()=>this._removeToast(e.id)}
+              >\u2715</button>
+            </div>
+          `})}
+      </div>
+    `}};u([s()],A.prototype,`_toasts`,void 0),A=O=u([e(`ic-toast`)],A);var j=class{constructor(e,t,n){this._unsubs=[],this._host=e,this._eventDispatcher=t,this._events=n,this._host.addController(this)}hostConnected(){for(let[e,t]of Object.entries(this._events)){let n=this._eventDispatcher.addEventListener(e,t);this._unsubs.push(n)}}hostDisconnected(){for(let e of this._unsubs)e();this._unsubs=[]}},M=class extends i{constructor(...e){super(...e),this.data=[],this.width=80,this.height=24,this.color=`var(--ic-accent)`}static{this.styles=[c,n`
+      :host {
+        display: inline-block;
+      }
+
+      svg {
+        display: block;
+        width: 100%;
+        height: 100%;
+      }
+    `]}_buildPoints(){let{data:e,width:t,height:n}=this;if(e.length===0)return``;if(e.length===1)return`${t/2},${n/2}`;let r=Math.max(...e),i=r-Math.min(...e),a=t/(e.length-1);return e.map((e,t)=>`${t*a},${i===0?n/2:1+(r-e)/i*(n-2)}`).join(` `)}render(){if(this.data.length===0)return t``;let e=this._buildPoints();if(this.data.length===1){let[n,r]=e.split(`,`).map(Number);return t`
+        <svg
+          viewBox="0 0 ${this.width} ${this.height}"
+          preserveAspectRatio="none"
+        >
+          ${a`<circle cx=${n} cy=${r} r="2" fill=${this.color} />`}
+        </svg>
+      `}return t`
+      <svg
+        viewBox="0 0 ${this.width} ${this.height}"
+        preserveAspectRatio="none"
+      >
+        ${a`<polyline
+          points=${e}
+          fill="none"
+          stroke=${this.color}
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />`}
+      </svg>
+    `}};u([l({attribute:!1})],M.prototype,`data`,void 0),u([l({type:Number})],M.prototype,`width`,void 0),u([l({type:Number})],M.prototype,`height`,void 0),u([l()],M.prototype,`color`,void 0),M=u([e(`ic-sparkline`)],M);var N=class extends i{constructor(...e){super(...e),this.label=``,this.value=``,this.trend=``,this.trendValue=``,this.threshold=`normal`,this.sparklineData=[],this.delta=``,this.deltaDirection=`flat`}static{this.styles=[c,o,n`
+      :host {
+        display: block;
+        min-width: 8rem;
+        flex: 1;
+      }
+
+      .card {
+        background: var(--ic-surface);
+        border: 1px solid var(--ic-border);
+        border-radius: var(--ic-radius-md);
+        padding: var(--ic-space-md) var(--ic-space-lg);
+      }
+
+      .value-row {
+        display: flex;
+        align-items: baseline;
+        gap: var(--ic-space-sm);
+      }
+
+      .value {
+        font-size: var(--ic-text-2xl);
+        font-weight: 700;
+        color: var(--ic-text);
+        line-height: 1.2;
+      }
+
+      .trend {
+        display: inline-flex;
+        align-items: center;
+        gap: 2px;
+        font-size: var(--ic-text-xs);
+      }
+
+      .trend--up {
+        color: var(--ic-success);
+      }
+
+      .trend--down {
+        color: var(--ic-error);
+      }
+
+      .trend--flat {
+        color: var(--ic-text-dim);
+      }
+
+      .label {
+        font-size: var(--ic-text-xs);
+        color: var(--ic-text-dim);
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        margin-top: var(--ic-space-xs);
+      }
+
+      .card--warning {
+        border-left: 3px solid var(--ic-warning);
+      }
+
+      .card--critical {
+        border-left: 3px solid var(--ic-error);
+      }
+
+      .threshold-icon {
+        font-size: var(--ic-text-sm);
+        flex-shrink: 0;
+      }
+
+      .threshold-icon--warning {
+        color: var(--ic-warning);
+      }
+
+      .threshold-icon--critical {
+        color: var(--ic-error);
+      }
+
+      /* Delta indicator */
+      .delta {
+        display: inline-flex;
+        align-items: center;
+        gap: 2px;
+        font-size: var(--ic-text-xs);
+        margin-left: auto;
+      }
+
+      .delta--up {
+        color: var(--ic-success);
+      }
+
+      .delta--down {
+        color: var(--ic-error);
+      }
+
+      .delta--flat {
+        color: var(--ic-text-dim);
+      }
+
+      /* Sparkline area */
+      .sparkline-area {
+        margin-top: var(--ic-space-xs);
+        width: 100%;
+        height: 24px;
+      }
+    `]}_renderTrend(){if(!this.trend)return d;let e={up:`↑`,down:`↓`,flat:`—`}[this.trend]??``;return t`<span class=${`trend trend--${this.trend}`}>${e}${this.trendValue?` ${this.trendValue}`:``}</span>`}_renderDelta(){if(!this.delta)return d;let e={up:`↑`,down:`↓`,flat:`—`}[this.deltaDirection]??``;return t`<span class=${`delta delta--${this.deltaDirection}`}>${e} ${this.delta}</span>`}_renderThresholdIcon(){return this.threshold===`warning`?t`<span class="threshold-icon threshold-icon--warning" aria-hidden="true">\u26A0</span>`:this.threshold===`critical`?t`<span class="threshold-icon threshold-icon--critical" aria-hidden="true">\u26D4</span>`:d}_renderSparkline(){return this.sparklineData.length===0?d:t`
+      <div class="sparkline-area">
+        <ic-sparkline
+          .data=${this.sparklineData}
+          height=${24}
+          color="var(--ic-accent)"
+        ></ic-sparkline>
+      </div>
+    `}render(){let e=this.threshold===`normal`?`card`:`card card--${this.threshold}`,n=this.delta?`, ${this.deltaDirection} ${this.delta}`:``;return t`
+      <div class=${e} role="group" aria-label=${this.threshold===`normal`?`${this.label}: ${this.value}${n}`:`${this.label}: ${this.value}${n} (${this.threshold})`}>
+        <div class="value-row">
+          ${this._renderThresholdIcon()}
+          <span class="value">${this.value}</span>
+          ${this._renderTrend()}
+          ${this._renderDelta()}
+        </div>
+        ${this._renderSparkline()}
+        <div class="label">${this.label}</div>
+      </div>
+    `}};u([l()],N.prototype,`label`,void 0),u([l()],N.prototype,`value`,void 0),u([l()],N.prototype,`trend`,void 0),u([l()],N.prototype,`trendValue`,void 0),u([l()],N.prototype,`threshold`,void 0),u([l({attribute:!1})],N.prototype,`sparklineData`,void 0),u([l()],N.prototype,`delta`,void 0),u([l()],N.prototype,`deltaDirection`,void 0),N=u([e(`ic-stat-card`)],N);var P=class extends i{constructor(...e){super(...e),this.value=0,this.label=``,this.showPercent=!0,this.thresholds={green:80,yellow:90}}static{this.styles=[c,n`
+      :host {
+        display: block;
+      }
+
+      .label {
+        font-size: var(--ic-text-xs);
+        color: var(--ic-text-dim);
+        margin-bottom: var(--ic-space-xs);
+      }
+
+      .bar-container {
+        display: flex;
+        align-items: center;
+        gap: var(--ic-space-sm);
+      }
+
+      .track {
+        flex: 1;
+        height: 6px;
+        background: var(--ic-surface-alt, #1f2937);
+        border-radius: 3px;
+        overflow: hidden;
+      }
+
+      .fill {
+        height: 100%;
+        border-radius: 3px;
+        transition: width 0.3s ease;
+      }
+
+      .percent {
+        font-size: var(--ic-text-xs);
+        color: var(--ic-text-dim);
+        font-family: var(--ic-font-mono, ui-monospace, monospace);
+        min-width: 2.5em;
+        text-align: right;
+      }
+    `]}_getColor(){let{value:e,thresholds:t}=this;return e<t.green?`var(--ic-success)`:e<t.yellow?`var(--ic-warning)`:`var(--ic-error)`}render(){let e=Math.min(this.value,100),n=this._getColor();return t`
+      ${this.label?t`<div class="label">${this.label}</div>`:d}
+      <div
+        class="bar-container"
+        role="progressbar"
+        aria-valuenow=${this.value}
+        aria-valuemin=${0}
+        aria-valuemax=${100}
+      >
+        <div class="track">
+          <div
+            class="fill"
+            style="width: ${e}%; background-color: ${n};"
+          ></div>
+        </div>
+        ${this.showPercent?t`<span class="percent">${Math.round(this.value)}%</span>`:d}
+      </div>
+    `}};u([l({type:Number})],P.prototype,`value`,void 0),u([l()],P.prototype,`label`,void 0),u([l({type:Boolean})],P.prototype,`showPercent`,void 0),u([l({attribute:!1})],P.prototype,`thresholds`,void 0),P=u([e(`ic-progress-bar`)],P);var F=class extends i{constructor(...e){super(...e),this.value=0,this.label=``,this.trend=0,this.size=`md`}static{this.styles=[c,n`
+      :host {
+        display: inline-block;
+        text-align: center;
+      }
+
+      :host([size="sm"]) {
+        --gauge-size: 60px;
+      }
+
+      :host,
+      :host([size="md"]) {
+        --gauge-size: 100px;
+      }
+
+      :host([size="lg"]) {
+        --gauge-size: 140px;
+      }
+
+      .gauge-svg {
+        width: var(--gauge-size);
+        height: var(--gauge-size);
+      }
+
+      .value-text {
+        font-weight: 700;
+        fill: var(--ic-text, #f9fafb);
+      }
+
+      .trend-up {
+        fill: var(--ic-success);
+      }
+
+      .trend-down {
+        fill: var(--ic-error);
+      }
+
+      .trend-flat {
+        fill: var(--ic-text-dim);
+      }
+
+      .label {
+        display: block;
+        font-size: var(--ic-text-xs);
+        color: var(--ic-text-dim);
+        margin-top: var(--ic-space-xs);
+      }
+    `]}_getClampedValue(){return Math.max(0,Math.min(100,this.value))}_getArcColor(){let e=this._getClampedValue();return e<60?`var(--ic-success)`:e<=80?`var(--ic-warning)`:`var(--ic-error)`}_getTrendChar(){return this.trend>0?`↑`:this.trend<0?`↓`:`—`}_getTrendClass(){return this.trend>0?`trend-up`:this.trend<0?`trend-down`:`trend-flat`}render(){let e=this._getClampedValue(),n=2*Math.PI*42,r=n-e/100*n;return t`
+      <svg
+        class="gauge-svg"
+        viewBox="0 0 100 100"
+        preserveAspectRatio="xMidYMid meet"
+      >
+        <!-- Background circle -->
+        ${a`
+          <circle
+            cx=${50}
+            cy=${50}
+            r=${42}
+            fill="none"
+            stroke="var(--ic-surface-2, #1f2937)"
+            stroke-width="8"
+          />
+        `}
+        <!-- Value arc -->
+        ${a`
+          <circle
+            cx=${50}
+            cy=${50}
+            r=${42}
+            fill="none"
+            stroke=${this._getArcColor()}
+            stroke-width="8"
+            stroke-linecap="round"
+            stroke-dasharray=${n}
+            stroke-dashoffset=${r}
+            transform="rotate(-90 ${50} ${50})"
+            class="value-arc"
+          />
+        `}
+        <!-- Percentage text -->
+        ${a`
+          <text
+            x=${50}
+            y=${48}
+            text-anchor="middle"
+            dominant-baseline="central"
+            font-size="18"
+            class="value-text"
+          >${e}%</text>
+        `}
+        <!-- Trend indicator -->
+        ${a`
+          <text
+            x=${50}
+            y=${66}
+            text-anchor="middle"
+            dominant-baseline="central"
+            font-size="12"
+            class=${this._getTrendClass()}
+          >${this._getTrendChar()}</text>
+        `}
+      </svg>
+      ${this.label?t`<span class="label">${this.label}</span>`:``}
+    `}};u([l({type:Number})],F.prototype,`value`,void 0),u([l()],F.prototype,`label`,void 0),u([l({type:Number})],F.prototype,`trend`,void 0),u([l({reflect:!0})],F.prototype,`size`,void 0),F=u([e(`ic-metric-gauge`)],F);var I={active:`var(--ic-success)`,idle:`var(--ic-warning)`,suspended:`var(--ic-text-dim)`,error:`var(--ic-error)`,unknown:`var(--ic-text-dim)`},_e=new Intl.NumberFormat(`en-US`,{style:`currency`,currency:`USD`}),L=class extends i{constructor(...e){super(...e),this.name=``,this.provider=``,this.model=``,this.status=`unknown`,this.agentId=``,this.messagesToday=0,this.tokenUsageToday=0,this.costToday=0,this.budgetUtilization=0,this.suspended=!1}static{this.styles=[c,o,n`
+      :host {
+        display: block;
+      }
+
+      .card {
+        background: var(--ic-surface);
+        border: 1px solid var(--ic-border);
+        border-radius: 0.75rem;
+        padding: 1.25rem;
+        transition: border-color 0.15s;
+        cursor: pointer;
+        display: flex;
+        flex-direction: column;
+      }
+
+      .card:hover {
+        border-color: var(--ic-border-hover, #374151);
+      }
+
+      .card:focus-visible {
+        outline: 2px solid var(--ic-accent);
+        outline-offset: 2px;
+      }
+
+      .card--suspended {
+        opacity: 0.65;
+      }
+
+      .card-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 0.75rem;
+      }
+
+      .agent-name {
+        font-size: 1rem;
+        font-weight: 600;
+        color: var(--ic-text);
+      }
+
+      .status-badge {
+        display: flex;
+        align-items: center;
+        gap: 0.375rem;
+        padding: 0.25rem 0.625rem;
+        border-radius: 9999px;
+        font-size: 0.75rem;
+        font-weight: 500;
+        text-transform: capitalize;
+      }
+
+      .status-dot {
+        width: 0.375rem;
+        height: 0.375rem;
+        border-radius: 50%;
+      }
+
+      .card-details {
+        display: flex;
+        flex-direction: column;
+        gap: 0.375rem;
+        flex: 1;
+      }
+
+      .detail-row {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        font-size: 0.8125rem;
+      }
+
+      .detail-label {
+        color: var(--ic-text-dim);
+      }
+
+      .detail-value {
+        color: var(--ic-text-muted);
+        font-family: ui-monospace, monospace;
+        font-size: 0.75rem;
+      }
+
+      .budget-bar {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+      }
+
+      .budget-track {
+        flex: 1;
+        height: 4px;
+        background: var(--ic-surface-2, #1f2937);
+        border-radius: 2px;
+        overflow: hidden;
+        min-width: 40px;
+      }
+
+      .budget-fill {
+        height: 100%;
+        border-radius: 2px;
+        transition: width 0.3s;
+      }
+
+      .budget-pct {
+        font-family: ui-monospace, monospace;
+        font-size: 0.75rem;
+        color: var(--ic-text-muted);
+        min-width: 2.5rem;
+        text-align: right;
+      }
+
+      .card-actions {
+        display: flex;
+        gap: 0.5rem;
+        margin-top: 0.75rem;
+        padding-top: 0.75rem;
+        border-top: 1px solid var(--ic-border);
+      }
+
+      .action-btn {
+        flex: 1;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0.375rem 0.5rem;
+        background: transparent;
+        border: 1px solid var(--ic-border);
+        border-radius: 0.375rem;
+        color: var(--ic-text-dim);
+        font-size: 0.75rem;
+        font-family: inherit;
+        cursor: pointer;
+        transition: background 0.15s, color 0.15s, border-color 0.15s;
+      }
+
+      .action-btn:hover {
+        background: var(--ic-surface-2, #1f2937);
+        color: var(--ic-text);
+        border-color: var(--ic-text-dim);
+      }
+
+      .action-btn--danger:hover {
+        color: var(--ic-error, #f87171);
+        border-color: var(--ic-error, #f87171);
+      }
+    `]}_formatTokens(e){if(e>=1e6){let t=e/1e6;return t%1==0?`${t}M`:`${t.toFixed(1)}M`}if(e>=1e3){let t=e/1e3;return t%1==0?`${t}K`:`${t.toFixed(1)}K`}return String(e)}_budgetColor(e){return e>=90?`var(--ic-error)`:e>=70?`var(--ic-warning)`:`var(--ic-success)`}_handleClick(){this.dispatchEvent(new CustomEvent(`navigate`,{detail:`agents/${this.agentId||this.name}`,bubbles:!0,composed:!0}))}_handleKeydown(e){(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),this._handleClick())}_handleAction(e,t){t.stopPropagation(),this.dispatchEvent(new CustomEvent(`agent-action`,{detail:{action:e,agentId:this.agentId||this.name},bubbles:!0,composed:!0}))}render(){let e=this.suspended?`suspended`:this.status,n=I[e]??I.unknown,r=e===`active`?`1a`:`0d`,i=this.messagesToday>0||this.tokenUsageToday>0,a=new Intl.NumberFormat(`en-US`),o=this.costToday>0,s=this.budgetUtilization>0,c=Math.min(100,Math.max(0,this.budgetUtilization));return t`
+      <div
+        class="card ${this.suspended?`card--suspended`:``}"
+        role="link"
+        tabindex="0"
+        @click=${this._handleClick}
+        @keydown=${this._handleKeydown}
+      >
+        <div class="card-header">
+          <span class="agent-name">${this.name||`Unnamed Agent`}</span>
+          <span
+            class="status-badge"
+            style="background: ${n}${r}; color: ${n}"
+          >
+            <span class="status-dot" style="background: ${n}"></span>
+            ${e}
+          </span>
+        </div>
+
+        <div class="card-details">
+          <div class="detail-row">
+            <span class="detail-label">Provider</span>
+            <span class="detail-value">${this.provider||`---`}</span>
+          </div>
+          <div class="detail-row">
+            <span class="detail-label">Model</span>
+            <span class="detail-value">${this.model||`---`}</span>
+          </div>
+          ${i?t`
+                <div class="detail-row">
+                  <span class="detail-label">Messages</span>
+                  <span class="detail-value">${a.format(this.messagesToday)}</span>
+                </div>
+                <div class="detail-row">
+                  <span class="detail-label">Tokens</span>
+                  <span class="detail-value">${this._formatTokens(this.tokenUsageToday)}</span>
+                </div>
+              `:``}
+          ${o?t`
+                <div class="detail-row">
+                  <span class="detail-label">Cost Today</span>
+                  <span class="detail-value">${_e.format(this.costToday)}</span>
+                </div>
+              `:d}
+          ${s?t`
+                <div class="detail-row">
+                  <span class="detail-label">Budget</span>
+                  <div class="budget-bar">
+                    <div class="budget-track">
+                      <div
+                        class="budget-fill"
+                        style="width: ${c}%; background: ${this._budgetColor(c)}"
+                      ></div>
+                    </div>
+                    <span class="budget-pct">${c}%</span>
+                  </div>
+                </div>
+              `:d}
+        </div>
+
+        <div class="card-actions">
+          <button
+            class="action-btn"
+            aria-label="Configure ${this.name||`agent`}"
+            @click=${e=>this._handleAction(`configure`,e)}
+          >Configure</button>
+          ${this.suspended?t`<button
+                class="action-btn"
+                aria-label="Resume ${this.name||`agent`}"
+                @click=${e=>this._handleAction(`resume`,e)}
+              >Resume</button>`:t`<button
+                class="action-btn"
+                aria-label="Suspend ${this.name||`agent`}"
+                @click=${e=>this._handleAction(`suspend`,e)}
+              >Suspend</button>`}
+          <button
+            class="action-btn action-btn--danger"
+            aria-label="Delete ${this.name||`agent`}"
+            @click=${e=>this._handleAction(`delete`,e)}
+          >Delete</button>
+        </div>
+      </div>
+    `}};u([l({type:String})],L.prototype,`name`,void 0),u([l({type:String})],L.prototype,`provider`,void 0),u([l({type:String})],L.prototype,`model`,void 0),u([l({type:String})],L.prototype,`status`,void 0),u([l({type:String})],L.prototype,`agentId`,void 0),u([l({type:Number})],L.prototype,`messagesToday`,void 0),u([l({type:Number})],L.prototype,`tokenUsageToday`,void 0),u([l({type:Number})],L.prototype,`costToday`,void 0),u([l({type:Number})],L.prototype,`budgetUtilization`,void 0),u([l({type:Boolean})],L.prototype,`suspended`,void 0),L=u([e(`ic-agent-card`)],L);var R={healthy:{color:`var(--ic-success)`,label:`Healthy`,severity:`green`,pulse:!1,icon:`check-circle`},idle:{color:`var(--ic-success)`,label:`Idle`,severity:`green`,pulse:!1,icon:`pause-circle`},stale:{color:`var(--ic-warning)`,label:`Stale`,severity:`yellow`,pulse:!1,icon:`clock`},"startup-grace":{color:`var(--ic-warning)`,label:`Starting`,severity:`yellow`,pulse:!0,icon:`loader`},stuck:{color:`var(--ic-error)`,label:`Stuck`,severity:`red`,pulse:!1,icon:`alert-triangle`},errored:{color:`var(--ic-error)`,label:`Error`,severity:`red`,pulse:!1,icon:`x-circle`},disconnected:{color:`var(--ic-text-dim)`,label:`Disconnected`,severity:`gray`,pulse:!1,icon:`wifi-off`},unknown:{color:`var(--ic-text-dim)`,label:`Unknown`,severity:`gray`,pulse:!1,icon:`help-circle`}},ve=new Set(Object.keys(R)),ye={connected:`healthy`,running:`healthy`,error:`errored`,stopped:`disconnected`,reconnecting:`healthy`};function z(e){let t=e.toLowerCase().trim();return ve.has(t)?t:ye[t]??`unknown`}function B(e){return R[z(e)]}function V(e){return e===`healthy`||e===`idle`}var be={telegram:`M20.3 3.5L2.6 10.3c-1.2.5-1.2 1.2-.2 1.5l4.5 1.4 1.7 5.3c.2.6.1.8.7.8.4 0 .7-.2.9-.4l2.2-2.1 4.5 3.3c.8.5 1.4.2 1.6-.8l2.9-13.6c.3-1.3-.5-1.9-1.6-1.2zM8.4 13l8.7-5.4c.4-.3.8-.1.5.2l-7.1 6.4-.3 3.1-1.8-4.3z`,discord:`M19.5 5.6A16 16 0 0015.5 4a12 12 0 00-.5 1.1 15 15 0 00-6 0A12 12 0 008.5 4 16 16 0 004.5 5.6 17 17 0 002 18.6a16 16 0 005 2.5c.4-.6.8-1.2 1.1-1.8a10 10 0 01-1.7-1l.4-.3a11.5 11.5 0 0010.4 0l.4.3c-.5.4-1.1.7-1.7 1 .3.6.7 1.2 1.1 1.8a16 16 0 005-2.5A17 17 0 0019.5 5.6zM8.3 16c-1 0-1.8-1-1.8-2.1s.8-2.1 1.8-2.1 1.9 1 1.8 2.1S9.4 16 8.3 16zm7.4 0c-1 0-1.8-1-1.8-2.1s.8-2.1 1.8-2.1 1.9 1 1.8 2.1S16.8 16 15.7 16z`,slack:`M5.1 15c0 1-.8 1.8-1.8 1.8S1.5 16 1.5 15s.8-1.8 1.8-1.8h1.8V15zm.9 0c0-1 .8-1.8 1.8-1.8s1.8.8 1.8 1.8v4.5c0 1-.8 1.8-1.8 1.8S6 20.5 6 19.5V15zM9 5.1c-1 0-1.8-.8-1.8-1.8S8 1.5 9 1.5s1.8.8 1.8 1.8v1.8H9zm0 .9c1 0 1.8.8 1.8 1.8S10 9.6 9 9.6H4.5c-1 0-1.8-.8-1.8-1.8S3.5 6 4.5 6H9zm9.9 1.8c0-1 .8-1.8 1.8-1.8s1.8.8 1.8 1.8-.8 1.8-1.8 1.8h-1.8V7.8zm-.9 0c0 1-.8 1.8-1.8 1.8S14.4 8.8 14.4 7.8V3.3c0-1 .8-1.8 1.8-1.8s1.8.8 1.8 1.8v4.5zM15 18.9c1 0 1.8.8 1.8 1.8s-.8 1.8-1.8 1.8-1.8-.8-1.8-1.8v-1.8H15zm0-.9c-1 0-1.8-.8-1.8-1.8s.8-1.8 1.8-1.8h4.5c1 0 1.8.8 1.8 1.8s-.8 1.8-1.8 1.8H15z`,whatsapp:`M17.5 14.4c-.3-.1-1.6-.8-1.9-.9-.3-.1-.5-.1-.7.1-.2.3-.7.9-.9 1.1-.2.2-.3.2-.6.1-.3-.1-1.2-.4-2.3-1.4-.9-.8-1.4-1.7-1.6-2-.2-.3 0-.5.1-.6l.4-.5c.1-.2.2-.3.2-.5.1-.2 0-.3 0-.5s-.7-1.6-.9-2.2c-.3-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.3-.3.3-1 1-1 2.5s1.1 2.9 1.2 3.1c.2.2 2.1 3.2 5 4.5.7.3 1.3.5 1.7.6.7.2 1.3.2 1.8.1.6-.1 1.6-.7 1.9-1.3.2-.6.2-1.2.2-1.3-.1-.1-.3-.2-.6-.3zM12 2C6.5 2 2 6.5 2 12c0 1.8.5 3.5 1.3 4.9L2 22l5.2-1.4c1.4.8 3 1.2 4.8 1.2 5.5 0 10-4.5 10-10S17.5 2 12 2z`,line:`M22 10.8c0-4.8-4.8-8.7-10.8-8.7S.4 6 .4 10.8c0 4.3 3.8 7.9 9 8.6.3.1.8.2.9.5.1.3.1.6 0 .9l-.1.9c0 .3-.2 1.1.9.6s6.2-3.7 8.5-6.3c1.6-1.6 2.4-3.4 2.4-5.2zM7.5 13.3H5.7c-.3 0-.5-.2-.5-.5V9.2c0-.3.2-.5.5-.5s.5.2.5.5v3.1h1.3c.3 0 .5.2.5.5s-.2.5-.5.5zm1.9-.5c0 .3-.2.5-.5.5s-.5-.2-.5-.5V9.2c0-.3.2-.5.5-.5s.5.2.5.5v3.6zm5 0c0 .2-.1.4-.3.4l-.2.1-2.5-3.4v3c0 .3-.2.5-.5.5s-.5-.2-.5-.5V9.2c0-.2.1-.4.3-.4h.1l2.6 3.5V9.2c0-.3.2-.5.5-.5s.5.2.5.5v3.6zm3.5.5h-1.8c-.3 0-.5-.2-.5-.5V9.2c0-.3.2-.5.5-.5s.5.2.5.5v3.1h1.3c.3 0 .5.2.5.5s-.2.5-.5.5z`,signal:`M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm0 3c3.9 0 7 3.1 7 7s-3.1 7-7 7-7-3.1-7-7 3.1-7 7-7zm0 3a4 4 0 100 8 4 4 0 000-8zm0 2.5a1.5 1.5 0 110 3 1.5 1.5 0 010-3z`,imessage:`M12 2C6.5 2 2 5.8 2 10.5c0 2.7 1.5 5.1 3.8 6.7-.2 1-.6 2.5-1.8 3.8 2.1-.3 3.8-1.1 4.8-1.8.9.2 2 .3 3.2.3 5.5 0 10-3.8 10-8.5S17.5 2 12 2z`,irc:`M4 4h16v12H5.2L4 17.2V4zm2 2v8h12V6H6zm2 2h8v1H8V8zm0 3h6v1H8v-1z`},xe={telegram:`var(--ic-telegram)`,discord:`var(--ic-discord)`,slack:`var(--ic-slack)`,whatsapp:`var(--ic-whatsapp)`,line:`var(--ic-line)`,signal:`var(--ic-signal)`,imessage:`var(--ic-imessage)`,irc:`var(--ic-irc)`},Se=`M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2z`,H=class extends i{constructor(...e){super(...e),this.platform=``,this.size=`20px`}static{this.styles=[c,n`
+      :host {
+        display: inline-flex;
+        align-items: center;
+      }
+
+      svg {
+        display: block;
+      }
+    `]}render(){let e=this.platform.toLowerCase(),n=be[e]??Se,r=xe[e]??`var(--ic-text-dim)`;return t`
+      <svg
+        width=${this.size}
+        height=${this.size}
+        viewBox="0 0 24 24"
+        fill=${r}
+        aria-hidden="true"
+      >
+        ${a`<path d=${n} />`}
+      </svg>
+    `}};u([l()],H.prototype,`platform`,void 0),u([l()],H.prototype,`size`,void 0),H=u([e(`ic-platform-icon`)],H);var U=class extends i{constructor(...e){super(...e),this.channelType=``,this.name=``,this.status=`disconnected`,this.enabled=!1,this.uptime=0,this.channelId=``}static{this.styles=[c,o,n`
+      :host {
+        display: inline-block;
+      }
+
+      .badge {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.5rem;
+        padding: 0.5rem 0.875rem;
+        background: var(--ic-surface);
+        border: 1px solid var(--ic-border);
+        border-radius: 0.5rem;
+        font-size: 0.8125rem;
+        transition: border-color 0.15s;
+        cursor: pointer;
+      }
+
+      .badge:hover {
+        border-color: var(--ic-border-hover, #374151);
+      }
+
+      .badge:focus-visible {
+        outline: 2px solid var(--ic-accent);
+        outline-offset: 2px;
+      }
+
+      .channel-name {
+        color: var(--ic-text-muted);
+        font-weight: 500;
+        text-transform: capitalize;
+      }
+
+      .status-dot {
+        width: 0.5rem;
+        height: 0.5rem;
+        border-radius: 50%;
+        margin-left: 0.25rem;
+      }
+
+      .status-dot.pulse {
+        animation: pulse 2s ease-in-out infinite;
+      }
+
+      @keyframes pulse {
+        0%, 100% { opacity: 1; }
+        50% { opacity: 0.4; }
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .status-dot.pulse { animation: none; }
+      }
+
+      .uptime {
+        font-size: var(--ic-text-xs);
+        color: var(--ic-text-dim);
+      }
+
+      .disabled-label {
+        font-size: 0.6875rem;
+        color: var(--ic-text-dim);
+        margin-left: 0.125rem;
+      }
+    `]}_formatUptime(e){if(e<60)return`0m`;let t=Math.floor(e/86400),n=Math.floor(e%86400/3600),r=Math.floor(e%3600/60);return t>0?`${t}d ${n}h`:n>0?`${n}h`:`${r}m`}_handleClick(){this.dispatchEvent(new CustomEvent(`navigate`,{detail:`channels/${this.channelId||this.channelType}`,bubbles:!0,composed:!0}))}_handleKeydown(e){(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),this._handleClick())}render(){let e=B(this.status),n=this.name||this.channelType,r=this.uptime>0&&V(z(this.status));return t`
+      <div
+        class="badge"
+        role="link"
+        tabindex="0"
+        @click=${this._handleClick}
+        @keydown=${this._handleKeydown}
+      >
+        <ic-platform-icon .platform=${this.channelType} size="16px"></ic-platform-icon>
+        <span class="channel-name">${n}</span>
+        <span class="status-dot ${e.pulse?`pulse`:``}" style="background: ${e.color}"></span>
+        <span class="status-label" style="font-size: 0.6875rem; color: ${e.color};">${e.label}</span>
+        ${r?t`<span class="uptime">${this._formatUptime(this.uptime)}</span>`:``}
+        ${this.enabled?``:t`<span class="disabled-label">(off)</span>`}
+      </div>
+    `}};u([l({type:String})],U.prototype,`channelType`,void 0),u([l({type:String})],U.prototype,`name`,void 0),u([l({type:String})],U.prototype,`status`,void 0),u([l({type:Boolean})],U.prototype,`enabled`,void 0),u([l({type:Number})],U.prototype,`uptime`,void 0),u([l({type:String})],U.prototype,`channelId`,void 0),U=u([e(`ic-channel-badge`)],U);var W=class extends i{constructor(...e){super(...e),this.options=[],this.selected=new Set}static{this.styles=[c,o,n`
+      :host {
+        display: block;
+      }
+
+      .chips {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--ic-space-xs);
+      }
+
+      .chip {
+        border-radius: 9999px;
+        padding: 0.25rem 0.75rem;
+        font-size: var(--ic-text-xs);
+        cursor: pointer;
+        transition: all 0.15s;
+        font-family: inherit;
+        line-height: 1.5;
+      }
+
+      .chip--unselected {
+        background: transparent;
+        color: var(--ic-text-dim);
+        border: 1px solid var(--ic-border);
+      }
+
+      .chip--unselected:hover {
+        border-color: var(--ic-text-dim);
+      }
+    `]}_toggleChip(e){let t=new Set(this.selected);t.has(e)?t.delete(e):t.add(e),this.selected=t,this.dispatchEvent(new CustomEvent(`filter-change`,{detail:{selected:t},bubbles:!0,composed:!0}))}_toggleAll(){let e=this.options.every(e=>this.selected.has(e.value))?new Set:new Set(this.options.map(e=>e.value));this.selected=e,this.dispatchEvent(new CustomEvent(`filter-change`,{detail:{selected:e},bubbles:!0,composed:!0}))}_renderChip(e,n,r,i){if(n){let n=i??`var(--ic-accent)`;return t`
+        <button
+          class="chip"
+          style="background: ${n}33; color: ${n}; border: 1px solid ${n};"
+          @click=${r}
+        >
+          ${e}
+        </button>
+      `}return t`
+      <button class="chip chip--unselected" @click=${r}>
+        ${e}
+      </button>
+    `}render(){let e=this.options.length>0&&this.options.every(e=>this.selected.has(e.value));return t`
+      <div class="chips">
+        ${this._renderChip(`All`,e,()=>this._toggleAll())}
+        ${this.options.map(e=>this._renderChip(e.label,this.selected.has(e.value),()=>this._toggleChip(e.value),e.color))}
+      </div>
+    `}};u([l({attribute:!1})],W.prototype,`options`,void 0),u([l({attribute:!1})],W.prototype,`selected`,void 0),W=u([e(`ic-filter-chips`)],W);var G={"message:received":{label:`MSG IN`,color:`#3b82f6`},"message:sent":{label:`MSG OUT`,color:`#22c55e`},"message:streaming":{label:`STREAM`,color:`#8b5cf6`},"session:created":{label:`SESSION`,color:`#06b6d4`},"session:expired":{label:`EXPIRED`,color:`#6b7280`},"audit:event":{label:`AUDIT`,color:`#f59e0b`},"skill:loaded":{label:`SKILL`,color:`#10b981`},"skill:executed":{label:`SKILL RUN`,color:`#10b981`},"skill:rejected":{label:`REJECTED`,color:`#ef4444`},"scheduler:job_started":{label:`JOB START`,color:`#8b5cf6`},"scheduler:job_completed":{label:`JOB DONE`,color:`#22c55e`},"scheduler:heartbeat_check":{label:`HEARTBEAT`,color:`#06b6d4`},"scheduler:task_extracted":{label:`TASK`,color:`#f59e0b`},"system:error":{label:`ERROR`,color:`#ef4444`}},Ce=Object.entries(G).map(([e,t])=>({value:e,label:t.label,color:t.color}));function we(e){let t=Date.now()-e,n=Math.floor(t/1e3);if(n<60)return`${n}s ago`;let r=Math.floor(n/60);if(r<60)return`${r}m ago`;let i=Math.floor(r/60);return i<24?`${i}h ago`:`${Math.floor(i/24)}d ago`}function Te(e,t){if(e===`message:received`||e===`message:sent`){let e=t.channelType??t.channelId??``,n=t.text??``,r=n.length>60?n.slice(0,57)+`...`:n;return e?`[${e}] ${r}`:r}if(e===`system:error`)return(t.message??t.error??`Unknown error`).slice(0,80);if(e===`skill:executed`||e===`skill:loaded`)return t.skillName??t.name??`unknown skill`;if(e===`scheduler:job_completed`||e===`scheduler:job_started`)return t.taskId??t.jobId??``;if(e===`audit:event`)return t.action??t.type??`audit event`;let n=Object.keys(t).slice(0,2);return n.length===0?``:n.map(e=>`${e}: ${String(t[e]).slice(0,30)}`).join(`, `)}var K=class extends i{constructor(...e){super(...e),this.entries=[],this.sseSubscribe=null,this._liveEntries=[],this._activeFilters=new Set,this._paused=!1,this._pauseBuffer=[],this._unsubscribe=null,this._nextLiveId=1e5}static{this.styles=[c,o,n`
+      :host {
+        display: block;
+      }
+
+      .feed-container {
+        background: var(--ic-surface);
+        border: 1px solid var(--ic-border);
+        border-radius: 0.75rem;
+        overflow: hidden;
+      }
+
+      .feed-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0.875rem 1.25rem;
+        border-bottom: 1px solid var(--ic-border);
+      }
+
+      .feed-title {
+        font-size: 0.875rem;
+        font-weight: 600;
+        color: var(--ic-text);
+      }
+
+      .header-controls {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+      }
+
+      .live-indicator {
+        display: flex;
+        align-items: center;
+        gap: 0.375rem;
+        font-size: 0.75rem;
+        color: var(--ic-success);
+      }
+
+      .live-dot {
+        width: 0.375rem;
+        height: 0.375rem;
+        border-radius: 50%;
+        background: var(--ic-success);
+        animation: pulse 2s infinite;
+      }
+
+      @keyframes pulse {
+        0%,
+        100% {
+          opacity: 1;
+        }
+        50% {
+          opacity: 0.4;
+        }
+      }
+
+      .paused-indicator {
+        display: flex;
+        align-items: center;
+        gap: 0.375rem;
+        font-size: 0.75rem;
+        color: var(--ic-warning);
+      }
+
+      .paused-dot {
+        width: 0.375rem;
+        height: 0.375rem;
+        border-radius: 50%;
+        background: var(--ic-warning);
+      }
+
+      .pause-btn {
+        background: transparent;
+        border: 1px solid var(--ic-border);
+        border-radius: var(--ic-radius-sm, 0.25rem);
+        padding: 0.125rem 0.5rem;
+        font-size: var(--ic-text-xs);
+        color: var(--ic-text-dim);
+        cursor: pointer;
+        font-family: inherit;
+      }
+
+      .pause-btn:hover {
+        border-color: var(--ic-text-dim);
+        color: var(--ic-text);
+      }
+
+      .feed-filters {
+        padding: 0.5rem 1.25rem;
+        border-bottom: 1px solid var(--ic-border);
+      }
+
+      .feed-list {
+        max-height: 28rem;
+        overflow-y: auto;
+      }
+
+      .feed-item {
+        display: flex;
+        align-items: flex-start;
+        gap: 0.75rem;
+        padding: 0.625rem 1.25rem;
+        border-bottom: 1px solid var(--ic-border);
+        font-size: 0.8125rem;
+      }
+
+      .feed-item:last-child {
+        border-bottom: none;
+      }
+
+      .event-badge {
+        padding: 0.125rem 0.5rem;
+        border-radius: 0.25rem;
+        font-size: 0.625rem;
+        font-weight: 600;
+        letter-spacing: 0.025em;
+        white-space: nowrap;
+        flex-shrink: 0;
+      }
+
+      .event-summary {
+        color: var(--ic-text-muted);
+        flex: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .event-time {
+        color: var(--ic-text-dim);
+        font-size: 0.75rem;
+        white-space: nowrap;
+        flex-shrink: 0;
+      }
+
+      .empty-state {
+        padding: 2rem 1.25rem;
+        text-align: center;
+        color: var(--ic-text-dim);
+        font-size: 0.875rem;
+      }
+    `]}connectedCallback(){super.connectedCallback(),this._startSse()}disconnectedCallback(){super.disconnectedCallback(),this._stopSse()}updated(e){e.has(`sseSubscribe`)&&(this._stopSse(),this._startSse())}_startSse(){this.sseSubscribe&&(this._unsubscribe=this.sseSubscribe((e,t)=>{if(e===`ping`||e===`error`)return;let n={id:this._nextLiveId++,event:e,payload:t??{},timestamp:Date.now()};this._paused?this._pauseBuffer=[n,...this._pauseBuffer].slice(0,200):this._liveEntries=[n,...this._liveEntries].slice(0,200)}))}_stopSse(){this._unsubscribe?.(),this._unsubscribe=null}_mergedEntries(){let e=[...this.entries].reverse(),t=[...this._liveEntries,...e],n=new Set,r=[];for(let e of t)if(!n.has(e.id)&&(n.add(e.id),r.push(e),r.length>=200))break;return r}_onFilterChange(e){this._activeFilters=e.detail.selected}_togglePause(){this._paused?(this._liveEntries=[...this._pauseBuffer,...this._liveEntries].slice(0,200),this._pauseBuffer=[],this._paused=!1):this._paused=!0}render(){let e=this._mergedEntries(),n=this._activeFilters.size===0?e:e.filter(e=>this._activeFilters.has(e.event)),r=this._unsubscribe!==null;return t`
+      <div class="feed-container" aria-label="Activity feed">
+        <div class="feed-header">
+          <span class="feed-title">Recent Activity</span>
+          <div class="header-controls">
+            ${r?this._paused?t`
+                      <span class="paused-indicator">
+                        <span class="paused-dot"></span>
+                        Paused
+                      </span>
+                    `:t`
+                      <span class="live-indicator">
+                        <span class="live-dot"></span>
+                        Live
+                      </span>
+                    `:d}
+            ${r?t`
+                    <button
+                      class="pause-btn"
+                      @click=${this._togglePause}
+                      aria-label=${this._paused?`Resume live feed`:`Pause live feed`}
+                    >
+                      ${this._paused?`Resume (${this._pauseBuffer.length})`:`Pause`}
+                    </button>
+                  `:d}
+          </div>
+        </div>
+
+        <div class="feed-filters">
+          <ic-filter-chips
+            .options=${Ce}
+            .selected=${this._activeFilters}
+            @filter-change=${this._onFilterChange}
+          ></ic-filter-chips>
+        </div>
+
+        <div class="feed-list" aria-live="polite">
+          ${n.length===0?t`
+                  <div class="empty-state">No activity yet</div>
+                `:n.map(e=>{let n=G[e.event]??{label:e.event.toUpperCase(),color:`#6b7280`},r=Te(e.event,e.payload);return t`
+                  <div class="feed-item">
+                    <span
+                      class="event-badge"
+                      style="background: ${n.color}1a; color: ${n.color}"
+                    >
+                      ${n.label}
+                    </span>
+                    <span class="event-summary">${r}</span>
+                    <span class="event-time">${we(e.timestamp)}</span>
+                  </div>
+                `})}
+        </div>
+      </div>
+    `}};u([l({attribute:!1})],K.prototype,`entries`,void 0),u([l({attribute:!1})],K.prototype,`sseSubscribe`,void 0),u([s()],K.prototype,`_liveEntries`,void 0),u([s()],K.prototype,`_activeFilters`,void 0),u([s()],K.prototype,`_paused`,void 0),u([s()],K.prototype,`_pauseBuffer`,void 0),K=u([e(`ic-activity-feed`)],K);var Ee=6e4,q={agents:`agents`,sessions:`sessions`,messages:`observe/delivery`,tokens:`observe/billing`,cost:`observe/billing`,errors:`observe/diagnostics`,health:`observe/overview`,context:`observe/context`,channels:`channels`,activity:`observe/delivery`};function De(e){if(e<0)return`0m`;let t=Math.floor(e/86400),n=Math.floor(e%86400/3600),r=Math.floor(e%3600/60),i=[];return t>0&&i.push(`${t}d`),(n>0||t>0)&&i.push(`${n}h`),i.push(`${r}m`),i.join(` `)}function J(e){return new Intl.NumberFormat(`en-US`).format(e)}function Oe(e){if(e>=1e6){let t=e/1e6;return t%1==0?`${t}M`:`${t.toFixed(1)}M`}if(e>=1e3){let t=e/1e3;return t%1==0?`${t}K`:`${t.toFixed(1)}K`}return String(e)}var ke=new Intl.NumberFormat(`en-US`,{style:`currency`,currency:`USD`});function Ae(e,t,n){return e<t?`var(--ic-success)`:e<n?`var(--ic-warning)`:`var(--ic-error)`}function je(e,t,n){return e<t?``:e<n?`(Warning)`:`(Critical)`}var Y=class extends i{constructor(...e){super(...e),this.apiClient=null,this.rpcClient=null,this.eventDispatcher=null,this._loadState=`loading`,this._error=``,this._agents=[],this._channels=[],this._activity=[],this._systemHealth=null,this._deliveryStats=null,this._messagesToday=0,this._tokenUsageToday=0,this._sessionCount=0,this._errorCount=0,this._totalCost=0,this._prevMessages=0,this._prevTokens=0,this._prevCost=0,this._mcpStatus=`---`,this._contextSummary=null,this._tokenSparklineData=[],this._costSparklineData=[],this._agentBilling=new Map,this._sse=null,this._rpcRefreshInterval=null,this._reloadDebounce=null}static{this.styles=[c,o,n`
+      :host {
+        display: block;
+      }
+
+      .dashboard-grid {
+        display: grid;
+        grid-template-columns: 1fr;
+        gap: 1.5rem;
+      }
+
+      /* Stats row -- 3-column grid (responsive) */
+      .stats-row {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: var(--ic-space-md);
+      }
+
+      @media (max-width: 1023px) {
+        .stats-row {
+          grid-template-columns: repeat(2, 1fr);
+        }
+      }
+
+      @media (max-width: 639px) {
+        .stats-row {
+          grid-template-columns: 1fr;
+        }
+      }
+
+      /* Clickable stat card link wrappers */
+      .stat-card-link {
+        cursor: pointer;
+        border-radius: var(--ic-radius-md);
+        transition: transform 0.1s;
+      }
+
+      .stat-card-link:hover {
+        transform: translateY(-1px);
+      }
+
+      .stat-card-link:focus-visible {
+        outline: 2px solid var(--ic-accent);
+        outline-offset: 2px;
+      }
+
+      /* Info cards row */
+      .info-cards-row {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: var(--ic-space-lg);
+      }
+
+      @media (max-width: 767px) {
+        .info-cards-row {
+          grid-template-columns: 1fr;
+        }
+      }
+
+      .info-card {
+        background: var(--ic-surface);
+        border: 1px solid var(--ic-border);
+        border-radius: var(--ic-radius-lg);
+        padding: var(--ic-space-lg);
+      }
+
+      .info-card--link {
+        cursor: pointer;
+        transition: border-color 0.15s;
+      }
+
+      .info-card--link:hover {
+        border-color: var(--ic-border-hover, #374151);
+      }
+
+      .info-card--link:focus-visible {
+        outline: 2px solid var(--ic-accent);
+        outline-offset: 2px;
+      }
+
+      .info-card-title {
+        font-size: var(--ic-text-sm);
+        font-weight: 600;
+        color: var(--ic-text);
+        margin-bottom: var(--ic-space-md);
+      }
+
+      .info-row {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: var(--ic-space-xs) 0;
+        font-size: var(--ic-text-sm);
+      }
+
+      .info-label {
+        color: var(--ic-text-dim);
+      }
+
+      .info-value {
+        color: var(--ic-text);
+        font-family: var(--ic-font-mono, ui-monospace, monospace);
+      }
+
+      /* Context engine summary grid */
+      .context-summary-grid {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: var(--ic-space-md);
+        align-items: start;
+      }
+
+      .context-metric {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: var(--ic-space-xs);
+      }
+
+      .context-metric-label {
+        font-size: var(--ic-text-xs);
+        color: var(--ic-text-dim);
+      }
+
+      .context-metric-value {
+        font-size: var(--ic-text-lg);
+        font-weight: 600;
+        color: var(--ic-text);
+        font-family: var(--ic-font-mono, ui-monospace, monospace);
+      }
+
+      /* Sparklines row */
+      .sparklines-row {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: var(--ic-space-lg);
+      }
+
+      @media (max-width: 639px) {
+        .sparklines-row {
+          grid-template-columns: 1fr;
+        }
+      }
+
+      .sparkline-card {
+        background: var(--ic-surface);
+        border: 1px solid var(--ic-border);
+        border-radius: var(--ic-radius-lg);
+        padding: var(--ic-space-md) var(--ic-space-lg);
+        cursor: pointer;
+        transition: border-color 0.15s;
+      }
+
+      .sparkline-card:hover {
+        border-color: var(--ic-border-hover, #374151);
+      }
+
+      .sparkline-card:focus-visible {
+        outline: 2px solid var(--ic-accent);
+        outline-offset: 2px;
+      }
+
+      .sparkline-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: var(--ic-space-md);
+      }
+
+      .sparkline-title {
+        font-size: var(--ic-text-sm);
+        font-weight: 600;
+        color: var(--ic-text-dim);
+      }
+
+      /* Section styles */
+      .section {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+      }
+
+      .section-title {
+        font-size: 0.875rem;
+        font-weight: 600;
+        color: var(--ic-text-dim);
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+      }
+
+      .section-title--link {
+        cursor: pointer;
+      }
+
+      .section-title--link:hover {
+        color: var(--ic-accent);
+      }
+
+      .section-title--link:focus-visible {
+        outline: 2px solid var(--ic-accent);
+        outline-offset: 2px;
+      }
+
+      .agents-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+        gap: 0.75rem;
+      }
+
+      .agent-card-wrapper {
+        position: relative;
+      }
+
+      .agent-cost-badge {
+        position: absolute;
+        top: 0.5rem;
+        right: 0.5rem;
+        padding: 0.125rem 0.5rem;
+        background: var(--ic-accent);
+        color: #fff;
+        font-size: 0.6875rem;
+        font-weight: 600;
+        border-radius: 9999px;
+        font-family: var(--ic-font-mono, ui-monospace, monospace);
+        pointer-events: none;
+      }
+
+      .channels-row {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.5rem;
+      }
+
+      /* Loading & error states */
+      .state-container {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 3rem;
+        color: var(--ic-text-dim);
+        font-size: 0.875rem;
+      }
+
+      .error-container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 0.75rem;
+        padding: 3rem;
+      }
+
+      .error-message {
+        color: var(--ic-error);
+        font-size: 0.875rem;
+      }
+
+      .retry-btn {
+        padding: 0.5rem 1rem;
+        background: var(--ic-surface);
+        border: 1px solid var(--ic-border);
+        border-radius: 0.375rem;
+        color: var(--ic-text);
+        font-size: 0.8125rem;
+        cursor: pointer;
+        font-family: inherit;
+      }
+
+      .retry-btn:hover {
+        background: var(--ic-surface-alt, #374151);
+      }
+
+      .loading-spinner {
+        width: 1.5rem;
+        height: 1.5rem;
+        border: 2px solid var(--ic-border);
+        border-top-color: var(--ic-accent);
+        border-radius: 50%;
+        animation: spin 0.8s linear infinite;
+      }
+
+      @keyframes spin {
+        to {
+          transform: rotate(360deg);
+        }
+      }
+
+      .empty-text {
+        color: var(--ic-text-dim);
+        font-size: 0.8125rem;
+      }
+
+      .stat-value-placeholder {
+        color: var(--ic-text-dim);
+      }
+
+      .no-data-placeholder {
+        color: var(--ic-text-dim);
+        font-size: var(--ic-text-sm);
+        padding: var(--ic-space-md) 0;
+      }
+    `]}connectedCallback(){super.connectedCallback(),this._initSse()}disconnectedCallback(){super.disconnectedCallback(),this._reloadDebounce!==null&&(clearTimeout(this._reloadDebounce),this._reloadDebounce=null),this._stopRpcRefresh()}updated(e){e.has(`apiClient`)&&this.apiClient&&this._loadData(),e.has(`rpcClient`)&&(this._stopRpcRefresh(),this._startRpcRefresh(),this._loadRpcData()),e.has(`eventDispatcher`)&&this.eventDispatcher&&!this._sse&&this._initSse()}_navigate(e){this.dispatchEvent(new CustomEvent(`navigate`,{detail:e,bubbles:!0,composed:!0}))}_makeKeyHandler(e){return t=>{(t.key===`Enter`||t.key===` `)&&(t.preventDefault(),this._navigate(e))}}_scheduleReload(e=300){this._reloadDebounce!==null&&clearTimeout(this._reloadDebounce),this._reloadDebounce=setTimeout(()=>{this._reloadDebounce=null,this._loadData()},e)}_initSse(){!this.eventDispatcher||this._sse||(this._sse=new j(this,this.eventDispatcher,{"message:received":()=>{this._messagesToday++},"message:sent":()=>{this._messagesToday++},"session:created":()=>{this._sessionCount++},"system:error":()=>{this._errorCount++},"observability:token_usage":()=>{this._scheduleReload()},"diagnostic:channel_health":()=>{this._scheduleReload(500)},"diagnostic:billing_snapshot":()=>{this._scheduleReload()},"agent:hot_added":()=>{this._scheduleReload()},"agent:hot_removed":()=>{this._scheduleReload()},"channel:registered":()=>{this._scheduleReload()},"channel:deregistered":()=>{this._scheduleReload()},"observability:metrics":()=>{this._scheduleReload(500)}}))}_startRpcRefresh(){this._rpcRefreshInterval===null&&(this._rpcRefreshInterval=setInterval(()=>{this._loadRpcData()},Ee))}_stopRpcRefresh(){this._rpcRefreshInterval!==null&&(clearInterval(this._rpcRefreshInterval),this._rpcRefreshInterval=null)}async _loadRpcData(){if(!this.rpcClient||this.rpcClient.status!==`connected`)return;let e=this.rpcClient,[t,n,r,i,a,o,s,c]=await Promise.allSettled([e.call(`gateway.status`),e.call(`obs.delivery.stats`),e.call(`obs.billing.total`,{sinceMs:864e5}),e.call(`obs.billing.total`,{sinceMs:1728e5}),e.call(`session.list`,{}),e.call(`mcp.list`),e.call(`obs.context.pipeline`,{limit:50}),e.call(`obs.billing.usage24h`)]);if(t.status===`fulfilled`&&(this._systemHealth=t.value),n.status===`fulfilled`){let e=n.value,t=Number(e.total??e.totalDelivered??0),r=Number(e.successes??0),i=Number(e.failures??e.failed??0),a=Number(e.avgLatencyMs??0);this._deliveryStats={successRate:t>0?r/t*100:0,avgLatencyMs:a,totalDelivered:t,failed:i},this._messagesToday=t,this._errorCount=i}if(r.status===`fulfilled`){let e=Number(r.value.totalTokens??0),t=Number(r.value.totalCost??0);if(this._tokenUsageToday=e,this._totalCost=t,i.status===`fulfilled`){let n=Number(i.value.totalTokens??0),r=Number(i.value.totalCost??0);this._prevTokens=Math.max(0,n-e),this._prevCost=Math.max(0,r-t)}this._prevMessages=0}if(a.status===`fulfilled`&&(this._sessionCount=Number(a.value.total??0)),o.status===`fulfilled`){let e=o.value;if(!e.servers||e.total===0)this._mcpStatus=`N/A`;else{let t=e.servers.filter(e=>e.status===`connected`).length;this._mcpStatus=`${t}/${e.total}`}}if(s.status===`fulfilled`){let e=s.value;if(e&&e.length>0){let t=e.filter(e=>e.cacheHitTokens>0).length,n=e.reduce((e,t)=>e+t.budgetUtilization,0)/e.length,r=e.reduce((e,t)=>e+t.tokensEvicted,0);this._contextSummary={cacheHitRate:Math.round(t/e.length*100),budgetUtilization:Math.round(n),totalEvictions:r,reReads:e.length-t}}else this._contextSummary=null}c.status===`fulfilled`&&Array.isArray(c.value)&&(this._tokenSparklineData=c.value.map(e=>e.tokens)),await Promise.allSettled([this._loadCostSparkline(),this._loadAgentBilling()])}async _loadCostSparkline(){if(!this.rpcClient)return;let e=Array.from({length:7},(e,t)=>this.rpcClient.call(`obs.billing.total`,{sinceMs:864e5*(t+1)})),t=(await Promise.allSettled(e)).map(e=>e.status===`fulfilled`?Number(e.value.totalCost??0):0),n=t.map((e,n)=>n===0?e:Math.max(0,e-t[n-1]));this._costSparklineData=n.reverse()}async _loadSparklineData(){!this.rpcClient||this.rpcClient.status!==`connected`||await Promise.allSettled([(async()=>{let e=await this.rpcClient.call(`obs.billing.usage24h`);this._tokenSparklineData=e.map(e=>e.tokens)})(),this._loadCostSparkline()])}async _loadAgentBilling(){if(!this.rpcClient||this._agents.length===0)return;let e=await Promise.allSettled(this._agents.slice(0,20).map(e=>this.rpcClient.call(`obs.billing.byAgent`,{agentId:e.id}))),t=new Map;e.forEach((e,n)=>{e.status===`fulfilled`&&t.set(this._agents[n].id,{cost:e.value.totalCost??0,tokens:e.value.totalTokens??0})}),this._agentBilling=t}async _loadData(){if(this.apiClient){this._loadState=`loading`,this._error=``;try{let[e,t,n]=await Promise.all([this.apiClient.getAgents().catch(()=>[]),this.apiClient.getChannels().catch(()=>[]),this.apiClient.getActivity(50).catch(()=>[])]);this._agents=e,this._channels=t,this._activity=n,this._loadState=`loaded`,this._loadRpcData()}catch(e){this._error=e instanceof Error?e.message:`Failed to load dashboard data`,this._loadState=`error`}}}_computeDelta(e,t){if(t<=0)return e>0?{trend:`up`,trendValue:`+100%`}:{trend:`flat`,trendValue:``};let n=Math.round((e-t)/t*100);return n>0?{trend:`up`,trendValue:`+${n}%`}:n<0?{trend:`down`,trendValue:`${n}%`}:{trend:`flat`,trendValue:``}}_getSseSubscriber(){return this.apiClient?this.apiClient.subscribeEvents.bind(this.apiClient):null}_renderSystemHealth(){if(!this._systemHealth)return t`
+        <div class="info-card info-card--link" role="link" tabindex="0"
+          @click=${()=>this._navigate(q.health)}
+          @keydown=${this._makeKeyHandler(q.health)}
+          aria-label="View system overview"
+        >
+          <div class="info-card-title">System Health</div>
+          <div class="info-row">
+            <span class="info-label">Loading...</span>
+            <span class="info-value">---</span>
+          </div>
+        </div>
+      `;let e=this._systemHealth,n=e.memoryUsage??0,r=Math.round(n/1024/1024),i=e.eventLoopDelay??0,a=Ae(i,50,100),o=e.uptime??0,s=e.nodeVersion??`---`;return t`
+      <div class="info-card info-card--link" role="link" tabindex="0"
+        @click=${()=>this._navigate(q.health)}
+        @keydown=${this._makeKeyHandler(q.health)}
+        aria-label="View system overview"
+      >
+        <div class="info-card-title">System Health</div>
+        <div class="info-row">
+          <span class="info-label">Uptime</span>
+          <span class="info-value">${De(o)}</span>
+        </div>
+        <div class="info-row">
+          <span class="info-label">Memory (RSS)</span>
+          <span class="info-value">${r} MB</span>
+        </div>
+        <div class="info-row">
+          <span class="info-label">Event Loop Delay</span>
+          <span class="info-value" style="color: ${a}">
+            ${i.toFixed(1)}ms ${je(i,50,100)}
+          </span>
+        </div>
+        <div class="info-row">
+          <span class="info-label">Node.js</span>
+          <span class="info-value">${s}</span>
+        </div>
+        <div class="info-row">
+          <span class="info-label">MCP Servers</span>
+          <span class="info-value">${this._mcpStatus}</span>
+        </div>
+        ${e.cpuUsage==null?d:t`
+              <div class="info-row">
+                <span class="info-label">CPU</span>
+                <div style="flex: 1; max-width: 60%; margin-left: auto;">
+                  <ic-progress-bar
+                    .value=${Math.round(e.cpuUsage)}
+                    .showPercent=${!0}
+                    .thresholds=${{green:70,yellow:90}}
+                  ></ic-progress-bar>
+                </div>
+              </div>
+            `}
+      </div>
+    `}_renderContextSummary(){if(!this._contextSummary)return t`
+        <div class="info-card info-card--link" role="link" tabindex="0"
+          @click=${()=>this._navigate(q.context)}
+          @keydown=${this._makeKeyHandler(q.context)}
+          aria-label="View context engine"
+        >
+          <div class="info-card-title">Context Engine</div>
+          <div class="no-data-placeholder">No pipeline data</div>
+        </div>
+      `;let e=this._contextSummary;return t`
+      <div class="info-card info-card--link" role="link" tabindex="0"
+        @click=${()=>this._navigate(q.context)}
+        @keydown=${this._makeKeyHandler(q.context)}
+        aria-label="View context engine"
+      >
+        <div class="info-card-title">Context Engine</div>
+        <div class="context-summary-grid">
+          <div class="context-metric">
+            <span class="context-metric-value">${e.cacheHitRate}%</span>
+            <span class="context-metric-label">Cache Hit Rate</span>
+          </div>
+          <div class="context-metric">
+            <ic-metric-gauge
+              .value=${e.budgetUtilization}
+              label="Budget Used"
+              size="sm"
+            ></ic-metric-gauge>
+          </div>
+          <div class="context-metric">
+            <span class="context-metric-value">${J(e.reReads)}</span>
+            <span class="context-metric-label">Re-reads</span>
+          </div>
+          <div class="context-metric">
+            <span class="context-metric-value">${J(e.totalEvictions)}</span>
+            <span class="context-metric-label">Evictions</span>
+          </div>
+        </div>
+      </div>
+    `}render(){if(this._loadState===`loading`)return t`<ic-skeleton-view variant="dashboard"></ic-skeleton-view>`;if(this._loadState===`error`)return t`
+        <div class="error-container">
+          <span class="error-message">${this._error}</span>
+          <button class="retry-btn" @click=${()=>this._loadData()}>Retry</button>
+        </div>
+      `;let e=this._agents.filter(e=>e.status===`active`).length,n=this.rpcClient!=null,r=this._computeDelta(this._messagesToday,this._prevMessages),i=this._computeDelta(this._tokenUsageToday,this._prevTokens),a=this._computeDelta(this._totalCost,this._prevCost);return t`
+      <div class="dashboard-grid" role="region" aria-label="Dashboard">
+        <!-- Stats row: 6 stat cards with click-to-navigate -->
+        <div class="stats-row" aria-live="polite">
+          <div class="stat-card-link" role="link" tabindex="0"
+            @click=${()=>this._navigate(q.agents)}
+            @keydown=${this._makeKeyHandler(q.agents)}
+            aria-label="View all agents"
+          >
+            <ic-stat-card
+              label="Active Agents"
+              .value=${`${e}/${this._agents.length}`}
+            ></ic-stat-card>
+          </div>
+          <div class="stat-card-link" role="link" tabindex="0"
+            @click=${()=>this._navigate(q.sessions)}
+            @keydown=${this._makeKeyHandler(q.sessions)}
+            aria-label="View all sessions"
+          >
+            <ic-stat-card
+              label="Sessions"
+              .value=${n?J(this._sessionCount):`---`}
+            ></ic-stat-card>
+          </div>
+          <div class="stat-card-link" role="link" tabindex="0"
+            @click=${()=>this._navigate(q.messages)}
+            @keydown=${this._makeKeyHandler(q.messages)}
+            aria-label="View message delivery"
+          >
+            <ic-stat-card
+              label="Messages Today"
+              .value=${n?J(this._messagesToday):`---`}
+              .trend=${n?r.trend:``}
+              .trendValue=${n?r.trendValue:``}
+            ></ic-stat-card>
+          </div>
+          <div class="stat-card-link" role="link" tabindex="0"
+            @click=${()=>this._navigate(q.tokens)}
+            @keydown=${this._makeKeyHandler(q.tokens)}
+            aria-label="View token billing"
+          >
+            <ic-stat-card
+              label="Tokens Today"
+              .value=${n?Oe(this._tokenUsageToday):`---`}
+              .trend=${n?i.trend:``}
+              .trendValue=${n?i.trendValue:``}
+            ></ic-stat-card>
+          </div>
+          <div class="stat-card-link" role="link" tabindex="0"
+            @click=${()=>this._navigate(q.cost)}
+            @keydown=${this._makeKeyHandler(q.cost)}
+            aria-label="View cost billing"
+          >
+            <ic-stat-card
+              label="Cost Today"
+              .value=${n?ke.format(this._totalCost):`---`}
+              .trend=${n?a.trend:``}
+              .trendValue=${n?a.trendValue:``}
+            ></ic-stat-card>
+          </div>
+          <div class="stat-card-link" role="link" tabindex="0"
+            @click=${()=>this._navigate(q.errors)}
+            @keydown=${this._makeKeyHandler(q.errors)}
+            aria-label="View error diagnostics"
+          >
+            <ic-stat-card
+              label="Errors"
+              .value=${n?J(this._errorCount):`---`}
+              .threshold=${this._errorCount>10?`critical`:this._errorCount>3?`warning`:`normal`}
+            ></ic-stat-card>
+          </div>
+        </div>
+
+        <!-- Info cards row: System Health + Context Engine Summary (clickable) -->
+        <div class="info-cards-row">
+          ${this._renderSystemHealth()}
+          ${this._renderContextSummary()}
+        </div>
+
+        <!-- Sparklines row -->
+        <div class="sparklines-row">
+          <div class="sparkline-card" role="link" tabindex="0"
+            @click=${()=>this._navigate(q.tokens)}
+            @keydown=${this._makeKeyHandler(q.tokens)}
+            aria-label="View token usage details"
+          >
+            <div class="sparkline-header">
+              <span class="sparkline-title">Token Usage (24h)</span>
+              <ic-sparkline
+                .data=${this._tokenSparklineData}
+                width=${120}
+                height=${32}
+                color="var(--ic-accent)"
+              ></ic-sparkline>
+            </div>
+          </div>
+          <div class="sparkline-card" role="link" tabindex="0"
+            @click=${()=>this._navigate(q.cost)}
+            @keydown=${this._makeKeyHandler(q.cost)}
+            aria-label="View cost trend details"
+          >
+            <div class="sparkline-header">
+              <span class="sparkline-title">Cost Trend (7d)</span>
+              <ic-sparkline
+                .data=${this._costSparklineData}
+                width=${120}
+                height=${32}
+                color="var(--ic-success)"
+              ></ic-sparkline>
+            </div>
+          </div>
+        </div>
+
+        <!-- Agents section -->
+        <div class="section">
+          <span class="section-title section-title--link"
+            role="link" tabindex="0"
+            @click=${()=>this._navigate(q.agents)}
+            @keydown=${this._makeKeyHandler(q.agents)}
+          >Agents</span>
+          <div class="agents-grid">
+            ${this._agents.length===0?t`<div class="empty-text">No agents configured</div>`:this._agents.map(e=>{let n=this._agentBilling.get(e.id);return t`
+                    <div class="agent-card-wrapper">
+                      <ic-agent-card
+                        .name=${e.name??e.id}
+                        .provider=${e.provider}
+                        .model=${e.model}
+                        .status=${e.status}
+                        .agentId=${e.id}
+                        .messagesToday=${e.messagesToday??0}
+                        .tokenUsageToday=${e.tokenUsageToday??0}
+                      ></ic-agent-card>
+                      ${n?t`<div class="agent-cost-badge">${ke.format(n.cost)}</div>`:d}
+                    </div>
+                  `})}
+          </div>
+        </div>
+
+        <!-- Channels section -->
+        <div class="section">
+          <span class="section-title section-title--link"
+            role="link" tabindex="0"
+            @click=${()=>this._navigate(q.channels)}
+            @keydown=${this._makeKeyHandler(q.channels)}
+          >Channels</span>
+          <div class="channels-row">
+            ${this._channels.length===0?t`<div class="empty-text">No channels configured</div>`:this._channels.map(e=>t`
+                    <ic-channel-badge
+                      .channelType=${e.type}
+                      .name=${e.name}
+                      .status=${e.status}
+                      .enabled=${e.enabled}
+                      .uptime=${e.uptime}
+                    ></ic-channel-badge>
+                  `)}
+          </div>
+        </div>
+
+        <!-- Activity section -->
+        <div class="section">
+          <ic-activity-feed
+            .entries=${this._activity}
+            .sseSubscribe=${this._getSseSubscriber()}
+          ></ic-activity-feed>
+        </div>
+      </div>
+    `}};u([l({attribute:!1})],Y.prototype,`apiClient`,void 0),u([l({attribute:!1})],Y.prototype,`rpcClient`,void 0),u([l({attribute:!1})],Y.prototype,`eventDispatcher`,void 0),u([s()],Y.prototype,`_loadState`,void 0),u([s()],Y.prototype,`_error`,void 0),u([s()],Y.prototype,`_agents`,void 0),u([s()],Y.prototype,`_channels`,void 0),u([s()],Y.prototype,`_activity`,void 0),u([s()],Y.prototype,`_systemHealth`,void 0),u([s()],Y.prototype,`_deliveryStats`,void 0),u([s()],Y.prototype,`_messagesToday`,void 0),u([s()],Y.prototype,`_tokenUsageToday`,void 0),u([s()],Y.prototype,`_sessionCount`,void 0),u([s()],Y.prototype,`_errorCount`,void 0),u([s()],Y.prototype,`_totalCost`,void 0),u([s()],Y.prototype,`_prevMessages`,void 0),u([s()],Y.prototype,`_prevTokens`,void 0),u([s()],Y.prototype,`_prevCost`,void 0),u([s()],Y.prototype,`_mcpStatus`,void 0),u([s()],Y.prototype,`_contextSummary`,void 0),u([s()],Y.prototype,`_tokenSparklineData`,void 0),u([s()],Y.prototype,`_costSparklineData`,void 0),u([s()],Y.prototype,`_agentBilling`,void 0),Y=u([e(`ic-dashboard`)],Y);var Me=`modulepreload`,Ne=function(e){return`/app/`+e},X={},Z=function(e,t,n){let r=Promise.resolve();if(t&&t.length>0){let e=document.getElementsByTagName(`link`),i=document.querySelector(`meta[property=csp-nonce]`),a=i?.nonce||i?.getAttribute(`nonce`);function o(e){return Promise.all(e.map(e=>Promise.resolve(e).then(e=>({status:`fulfilled`,value:e}),e=>({status:`rejected`,reason:e}))))}r=o(t.map(t=>{if(t=Ne(t,n),t in X)return;X[t]=!0;let r=t.endsWith(`.css`),i=r?`[rel="stylesheet"]`:``;if(n)for(let n=e.length-1;n>=0;n--){let i=e[n];if(i.href===t&&(!r||i.rel===`stylesheet`))return}else if(document.querySelector(`link[href="${t}"]${i}`))return;let o=document.createElement(`link`);if(o.rel=r?`stylesheet`:Me,r||(o.as=`script`),o.crossOrigin=``,o.href=t,a&&o.setAttribute(`nonce`,a),document.head.appendChild(o),r)return new Promise((e,n)=>{o.addEventListener(`load`,e),o.addEventListener(`error`,()=>n(Error(`Unable to preload CSS for ${t}`)))})}))}function i(e){let t=new Event(`vite:preloadError`,{cancelable:!0});if(t.payload=e,window.dispatchEvent(t),!t.defaultPrevented)throw e}return r.then(t=>{for(let e of t||[])e.status===`rejected`&&i(e.reason);return e().catch(i)})},Pe={"ic-chat-console":()=>Z(()=>import(`./chat-console-BumBaIgO.js`),__vite__mapDeps([0,1,2,3,4,5,6,7,8,9,10,11])),"ic-memory-inspector":()=>Z(()=>import(`./memory-inspector-D5Re9ptG.js`),__vite__mapDeps([12,1,13,6,7,14,10,15])),"ic-agent-list":()=>Z(()=>import(`./agent-list-6Uotjatr.js`),__vite__mapDeps([16,1,13,7,4,14,9,10])),"ic-agent-detail":()=>Z(()=>import(`./agent-detail-ru-AhppM.js`),__vite__mapDeps([17,1,6,7,14,18])),"ic-agent-editor":()=>Z(()=>import(`./agent-editor-hjwRuFVp.js`),__vite__mapDeps([19,1,7,20,18])),"ic-workspace-manager":()=>Z(()=>import(`./workspace-manager-DlvBixiq.js`),__vite__mapDeps([21,1,6,7,14,9,4,18])),"ic-skills-view":()=>Z(()=>import(`./skills-BCOGPf6s.js`),__vite__mapDeps([22,1,7,14,9,4,10,23])),"ic-mcp-management":()=>Z(()=>import(`./mcp-management-5jyScQis.js`),__vite__mapDeps([24,1,6,7,14,9,4])),"ic-models-view":()=>Z(()=>import(`./models-D5vu07MR.js`),__vite__mapDeps([25,1,7,26,4,9,10,23])),"ic-channel-list":()=>Z(()=>import(`./channel-list-FkfeOLBQ.js`),__vite__mapDeps([27,1,14,9,4])),"ic-channel-detail":()=>Z(()=>import(`./channel-detail-BBCKtmne.js`),__vite__mapDeps([28,1,6,7,26,4,9,18,23])),"ic-message-center":()=>Z(()=>import(`./message-center-cRLK6ZmG.js`),__vite__mapDeps([29,1,6,14,9,4,18])),"ic-scheduler-view":()=>Z(()=>import(`./scheduler-VafN_8xi.js`),__vite__mapDeps([30,1,6,7,4,9,23])),"ic-session-list-view":()=>Z(()=>import(`./session-list-DfCm8Cec.js`),__vite__mapDeps([31,1,13,6,7,14,9,4,10,11])),"ic-session-detail":()=>Z(()=>import(`./session-detail-BpZ_8Yih.js`),__vite__mapDeps([32,1,2,3,4,5,33,6,7,8,14,9,18,11])),"ic-observe-dashboard":()=>Z(()=>import(`./observe-view-CalNNEmd.js`),__vite__mapDeps([34,1,35,6,7,36,9,4,23])),"ic-context-engine-view":()=>Z(()=>import(`./context-engine-BENY3pWE.js`),__vite__mapDeps([37,1,5,33,6,9,4])),"ic-billing-view":()=>Z(()=>import(`./billing-view-CxysXH0p.js`),__vite__mapDeps([38,1,39,9,4])),"ic-delivery-view":()=>Z(()=>import(`./delivery-view-BCnkPsAp.js`),__vite__mapDeps([40,1,6,39,36,7,9,4,15])),"ic-diagnostics-view":()=>Z(()=>import(`./diagnostics-view-C_jQFG2H.js`),__vite__mapDeps([41,1,35,6,7,39,9,4])),"ic-subagents-view":()=>Z(()=>import(`./subagents-l-auUraL.js`),__vite__mapDeps([42,1,6,7,14,9,4])),"ic-security-view":()=>Z(()=>import(`./security-QQXMRTlo.js`),__vite__mapDeps([43,1,6,7,26,4,9,20,44,23])),"ic-approvals-view":()=>Z(()=>import(`./approvals-C-K6hN2U.js`),__vite__mapDeps([45,1])),"ic-config-editor":()=>Z(()=>import(`./config-editor-C9BSwHGy.js`),__vite__mapDeps([46,1,6,7,14,9,4,20,44,23])),"ic-setup-wizard":()=>Z(()=>import(`./setup-wizard-C-z477CG.js`),__vite__mapDeps([47,1,4])),"ic-pipeline-list":()=>Z(()=>import(`./pipeline-list-BHlaBKww.js`),__vite__mapDeps([48,1,4,14,9,49,18])),"ic-pipeline-builder":()=>Z(()=>import(`./pipeline-builder-DUYDGwZf.js`),__vite__mapDeps([50,1,51,3,14,49,18])),"ic-pipeline-monitor":()=>Z(()=>import(`./pipeline-monitor-BhtpNEHf.js`),__vite__mapDeps([52,1,51,3,14,18])),"ic-pipeline-history":()=>Z(()=>import(`./pipeline-history-BAO8brOe.js`),__vite__mapDeps([53,1,4,14,9,18])),"ic-pipeline-history-detail":()=>Z(()=>import(`./pipeline-history-detail-DectIoQt.js`),__vite__mapDeps([54,1,2,3,4,14,18])),"ic-context-dag-browser":()=>Z(()=>import(`./context-dag-browser-BHm00mJD.js`),__vite__mapDeps([55,1,6,7,9,4,10,15])),"ic-media-test-view":()=>Z(()=>import(`./media-test-DGTCtM8-.js`),__vite__mapDeps([56,1,9,4,23])),"ic-media-config-view":()=>Z(()=>import(`./media-config-J9oT9PPs.js`),__vite__mapDeps([57,1]))},Q=`comis_token`,$=class extends i{constructor(...e){super(...e),this._authenticated=!1,this._authError=``,this._currentView=`ic-dashboard`,this._currentRoute=`dashboard`,this._routeParams={},this._connectionStatus=`disconnected`,this._pendingApprovals=0,this._errorCount=0,this._agentCount=0,this._channelCount=0,this._sessionCount=0,this._sidebarOpen=!1,this._viewLoading=!1,this._commandPaletteOpen=!1,this._shortcutsHelpOpen=!1,this._agentList=[],this._sessionList=[],this._loadedViews=new Set,this._pendingGotoKey=null,this._apiClient=null,this._router=null,this._rpcClient=null,this._globalState=null,this._eventDispatcher=null,this._stateUnsubscribe=null,this._approvalUnsub=null,this._approvalResolvedUnsub=null,this._errorUnsub=null,this._pollingController=null,this._token=``,this._boundKeyHandler=this._handleGlobalKeydown.bind(this),this._gotoWaiting=!1}static{this.styles=n`
+    :host {
+      display: block;
+      min-height: 100vh;
+      background: var(--ic-bg, #030712);
+      color: var(--ic-text, #f3f4f6);
+      font-family: var(--ic-font-sans, ui-sans-serif, system-ui, sans-serif);
+    }
+
+    .auth-container {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      min-height: 100vh;
+      padding: 1rem;
+    }
+
+    .auth-card {
+      background: var(--ic-surface, #111827);
+      border: 1px solid var(--ic-border, #374151);
+      border-radius: var(--ic-radius-lg, 0.75rem);
+      padding: 2rem;
+      max-width: 24rem;
+      width: 100%;
+    }
+
+    .auth-title {
+      font-size: 1.5rem;
+      font-weight: 700;
+      margin-bottom: 0.25rem;
+    }
+
+    .auth-subtitle {
+      color: var(--ic-text-muted, #9ca3af);
+      margin-bottom: 1.5rem;
+      font-size: 0.875rem;
+    }
+
+    .auth-input {
+      width: 100%;
+      padding: 0.625rem 0.75rem;
+      background: var(--ic-surface-2, #1f2937);
+      border: 1px solid #4b5563;
+      border-radius: var(--ic-radius-md, 0.5rem);
+      color: var(--ic-text, #f3f4f6);
+      font-size: 0.875rem;
+      outline: none;
+      box-sizing: border-box;
+    }
+
+    .auth-input:focus {
+      border-color: var(--ic-accent, #3b82f6);
+    }
+
+    .auth-input::placeholder {
+      color: var(--ic-text-dim, #6b7280);
+    }
+
+    .auth-btn {
+      width: 100%;
+      padding: 0.625rem;
+      margin-top: 1rem;
+      background: var(--ic-accent, #3b82f6);
+      color: white;
+      border: none;
+      border-radius: var(--ic-radius-md, 0.5rem);
+      font-size: 0.875rem;
+      font-weight: 500;
+      cursor: pointer;
+    }
+
+    .auth-btn:hover {
+      background: var(--ic-accent-hover, #2563eb);
+    }
+
+    .auth-error {
+      color: var(--ic-error, #f87171);
+      font-size: 0.75rem;
+      margin-top: 0.5rem;
+    }
+
+    /* Shell layout: sidebar + main area */
+    .shell {
+      display: flex;
+      min-height: 100vh;
+    }
+
+    .shell-main {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      min-width: 0;
+    }
+
+    .content {
+      flex: 1;
+      padding: var(--ic-space-lg, 1.5rem);
+      max-width: 1440px;
+      width: 100%;
+      margin: 0 auto;
+      box-sizing: border-box;
+      overflow-y: auto;
+    }
+
+    /* Placeholder for unimplemented views */
+    .placeholder {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      min-height: 300px;
+      color: var(--ic-text-dim, #6b7280);
+      font-size: 1rem;
+    }
+
+    .placeholder-title {
+      font-size: 1.25rem;
+      font-weight: 600;
+      margin-bottom: 0.5rem;
+      color: var(--ic-text-muted, #9ca3af);
+    }
+
+    /* Keyboard shortcuts help overlay */
+    .shortcuts-backdrop {
+      position: fixed;
+      inset: 0;
+      background: rgba(0, 0, 0, 0.5);
+      z-index: 99;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .shortcuts-panel {
+      background: var(--ic-surface, #111827);
+      border: 1px solid var(--ic-border, #374151);
+      border-radius: var(--ic-radius-lg, 0.75rem);
+      padding: 1.5rem;
+      max-width: 400px;
+      width: 90%;
+      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
+    }
+
+    .shortcuts-title {
+      font-size: 1.125rem;
+      font-weight: 600;
+      margin-bottom: 1rem;
+    }
+
+    .shortcuts-table {
+      width: 100%;
+      border-collapse: collapse;
+    }
+
+    .shortcuts-table td {
+      padding: 0.375rem 0;
+      font-size: 0.875rem;
+    }
+
+    .shortcuts-table td:first-child {
+      color: var(--ic-text-dim, #6b7280);
+      padding-right: 1rem;
+      white-space: nowrap;
+    }
+
+    .shortcuts-table kbd {
+      background: var(--ic-surface-2, #1f2937);
+      border: 1px solid var(--ic-border, #374151);
+      border-radius: 3px;
+      padding: 2px 6px;
+      font-size: 0.75rem;
+      font-family: inherit;
+    }
+  `}connectedCallback(){super.connectedCallback();let e=sessionStorage.getItem(Q);e&&this._initWithToken(e),document.addEventListener(`keydown`,this._boundKeyHandler)}disconnectedCallback(){super.disconnectedCallback(),this._cleanup(),document.removeEventListener(`keydown`,this._boundKeyHandler),this._pendingGotoKey&&=(clearTimeout(this._pendingGotoKey),null)}_isInputTarget(e){let t=e.target?.tagName;return!!(t===`INPUT`||t===`TEXTAREA`||t===`SELECT`||e.target?.isContentEditable)}_handleGlobalKeydown(e){if((e.ctrlKey||e.metaKey)&&e.key===`k`){e.preventDefault(),this._commandPaletteOpen=!this._commandPaletteOpen;return}if(e.key===`Escape`){if(this._commandPaletteOpen){this._commandPaletteOpen=!1;return}if(this._shortcutsHelpOpen){this._shortcutsHelpOpen=!1;return}this.dispatchEvent(new CustomEvent(`close-overlay`,{bubbles:!0,composed:!0})),this._sidebarOpen&&=!1;return}if(!this._isInputTarget(e)&&!this._commandPaletteOpen){if(e.key===`?`&&!e.ctrlKey&&!e.metaKey&&!e.altKey){this._shortcutsHelpOpen=!this._shortcutsHelpOpen;return}if(this._gotoWaiting){switch(this._gotoWaiting=!1,this._pendingGotoKey&&=(clearTimeout(this._pendingGotoKey),null),e.key.toLowerCase()){case`d`:this._router?.navigate(`dashboard`);return;case`a`:this._router?.navigate(`agents`);return;case`c`:this._router?.navigate(`chat`);return;case`s`:this._router?.navigate(`sessions`);return;case`o`:this._router?.navigate(`observe/overview`);return}return}e.key===`g`&&!e.ctrlKey&&!e.metaKey&&!e.altKey&&(this._gotoWaiting=!0,this._pendingGotoKey=setTimeout(()=>{this._gotoWaiting=!1,this._pendingGotoKey=null},500))}}_handleCommand(e){switch(e){case`refresh`:window.location.reload();break;case`toggle-sidebar`:this._sidebarOpen=!this._sidebarOpen;break;case`logout`:this._handleLogout();break;case`show-shortcuts`:this._shortcutsHelpOpen=!0;break}}_initWithToken(e){this._token=e;let t=`${window.location.protocol}//${window.location.host}`;this._apiClient=f(t,e),this._apiClient.getAgents().then(()=>{sessionStorage.setItem(Q,e),this._authenticated=!0,this._authError=``,this._rpcClient=b();let n=`${window.location.protocol===`https:`?`wss:`:`ws:`}//${window.location.host}/ws`;this._rpcClient.connect(n,e);let r=this._rpcClient;this._apiClient=f(t,e,(e,t)=>r.call(e,t)),this._globalState=ae(),this._rpcClient.onStatusChange(e=>{this._globalState?.update({connectionStatus:e})}),this._eventDispatcher=se(),this._eventDispatcher.start(t,e),this._approvalUnsub=this._eventDispatcher.addEventListener(`approval:requested`,()=>{let e=this._globalState.getSnapshot();this._globalState.update({pendingApprovals:e.pendingApprovals+1})}),this._approvalResolvedUnsub=this._eventDispatcher.addEventListener(`approval:resolved`,()=>{let e=this._globalState.getSnapshot();this._globalState.update({pendingApprovals:Math.max(0,e.pendingApprovals-1)})}),this._errorUnsub=this._eventDispatcher.addEventListener(`system:error`,()=>{let e=this._globalState.getSnapshot();this._globalState.update({errorCount:(e.errorCount??0)+1})}),this._stateUnsubscribe=this._globalState.subscribe(()=>{let e=this._globalState.getSnapshot();this._connectionStatus=e.connectionStatus,this._pendingApprovals=e.pendingApprovals,this._errorCount=e.errorCount,this._agentCount=e.agentCount,this._channelCount=e.channelCount,this._sessionCount=e.sessionCount}),this._pollingController=new ce(this,this._rpcClient,e=>{this._agentCount=e.agents,this._channelCount=e.channels,this._sessionCount=e.sessions,this._agentList=e.agentIds.map(e=>({id:e})),this._sessionList=e.sessionEntries.map(e=>({key:e.sessionKey,agentId:e.agentId}))},3e4),this._pollingController.hostConnected(),this._router=v(e=>{this._currentView=e.view,this._currentRoute=e.route,this._routeParams=e.params}),this._router.start()}).catch(()=>{this._authError=`Invalid token or server unreachable`,sessionStorage.removeItem(Q)})}_handleLogin(e){e.preventDefault();let t=e.target.querySelector(`input`).value.trim();if(!t){this._authError=`Please enter a token`;return}this._initWithToken(t)}_handleLogout(){sessionStorage.removeItem(Q),this._authenticated=!1,this._cleanup(),this._apiClient=null,this._token=``}_cleanup(){this._pollingController&&=(this._pollingController.hostDisconnected(),null),this._rpcClient?.disconnect(),this._rpcClient=null,this._eventDispatcher?.stop(),this._eventDispatcher=null,this._stateUnsubscribe?.(),this._stateUnsubscribe=null,this._approvalUnsub?.(),this._approvalUnsub=null,this._approvalResolvedUnsub?.(),this._approvalResolvedUnsub=null,this._errorUnsub?.(),this._errorUnsub=null,this._globalState=null,this._router?.stop(),this._router=null}_renderAuth(){return t`
+      <div class="auth-container">
+        <div class="auth-card">
+          <div class="auth-title">Comis</div>
+          <div class="auth-subtitle">Enter your gateway token to continue</div>
+          <form @submit=${this._handleLogin}>
+            <input
+              class="auth-input"
+              type="password"
+              placeholder="Gateway bearer token"
+              autocomplete="off"
+            />
+            ${this._authError?t`<div class="auth-error">${this._authError}</div>`:d}
+            <button class="auth-btn" type="submit">Connect</button>
+          </form>
+        </div>
+      </div>
+    `}_renderApp(){return t`
+      <div class="shell">
+        <ic-sidebar
+          .currentRoute=${this._currentRoute}
+          .pendingApprovals=${this._pendingApprovals}
+          .errorCount=${this._errorCount}
+          .agentCount=${this._agentCount}
+          .channelCount=${this._channelCount}
+          .sessionCount=${this._sessionCount}
+          ?open=${this._sidebarOpen}
+          @navigate=${e=>{this._router?.navigate(e.detail),this._sidebarOpen=!1}}
+          @logout=${()=>this._handleLogout()}
+          @close=${()=>{this._sidebarOpen=!1}}
+        ></ic-sidebar>
+        <div class="shell-main">
+          <ic-topbar
+            .connectionStatus=${this._connectionStatus}
+            .notificationCount=${this._pendingApprovals}
+            .tokenId=${this._token}
+            @toggle-sidebar=${()=>{this._sidebarOpen=!this._sidebarOpen}}
+            @logout=${()=>this._handleLogout()}
+          ></ic-topbar>
+          <main class="content" role="main" aria-label="Main content" @navigate=${e=>{this._router?.navigate(e.detail)}}>
+            ${this._renderView()}
+          </main>
+        </div>
+      </div>
+      ${this._commandPaletteOpen?t`
+        <ic-command-palette
+          ?open=${this._commandPaletteOpen}
+          .agents=${this._agentList}
+          .sessions=${this._sessionList}
+          @navigate=${e=>{this._router?.navigate(e.detail),this._commandPaletteOpen=!1}}
+          @close=${()=>{this._commandPaletteOpen=!1}}
+          @command=${e=>this._handleCommand(e.detail)}
+        ></ic-command-palette>
+      `:d}
+      ${this._shortcutsHelpOpen?this._renderShortcutsHelp():d}
+      <ic-toast></ic-toast>
+    `}_renderShortcutsHelp(){return t`
+      <div class="shortcuts-backdrop" @click=${e=>{e.target.classList.contains(`shortcuts-backdrop`)&&(this._shortcutsHelpOpen=!1)}}>
+        <div class="shortcuts-panel" role="dialog" aria-label="Keyboard shortcuts">
+          <div class="shortcuts-title">Keyboard Shortcuts</div>
+          <table class="shortcuts-table">
+            <tbody>
+              <tr><td><kbd>Ctrl</kbd>+<kbd>K</kbd></td><td>Command Palette</td></tr>
+              <tr><td><kbd>Esc</kbd></td><td>Close Overlay</td></tr>
+              <tr><td><kbd>?</kbd></td><td>Toggle This Help</td></tr>
+              <tr><td><kbd>G</kbd> then <kbd>D</kbd></td><td>Go to Dashboard</td></tr>
+              <tr><td><kbd>G</kbd> then <kbd>A</kbd></td><td>Go to Agents</td></tr>
+              <tr><td><kbd>G</kbd> then <kbd>C</kbd></td><td>Go to Chat</td></tr>
+              <tr><td><kbd>G</kbd> then <kbd>S</kbd></td><td>Go to Sessions</td></tr>
+              <tr><td><kbd>G</kbd> then <kbd>O</kbd></td><td>Go to Observability</td></tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    `}async _loadViewIfNeeded(e){if(this._loadedViews.has(e))return;let t=Pe[e];if(t){this._viewLoading=!0;try{await t(),this._loadedViews.add(e)}finally{this._viewLoading=!1}}}_getSkeletonVariant(){switch(this._currentView){case`ic-dashboard`:return`dashboard`;case`ic-agent-detail`:case`ic-session-detail`:case`ic-channel-detail`:case`ic-chat-console`:case`ic-message-center`:return`detail`;case`ic-config-editor`:case`ic-pipeline-builder`:case`ic-workspace-manager`:return`editor`;case`ic-billing-view`:case`ic-delivery-view`:case`ic-diagnostics-view`:case`ic-observe-dashboard`:case`ic-context-engine-view`:case`ic-memory-inspector`:case`ic-media-test-view`:case`ic-media-config-view`:return`table`;default:return`list`}}_renderView(){if(!this._loadedViews.has(this._currentView)&&Pe[this._currentView])return this._loadViewIfNeeded(this._currentView),t`<ic-skeleton-view variant=${this._getSkeletonVariant()}></ic-skeleton-view>`;switch(this._currentView){case`ic-dashboard`:return t`<ic-dashboard .apiClient=${this._apiClient} .rpcClient=${this._rpcClient} .eventDispatcher=${this._eventDispatcher}></ic-dashboard>`;case`ic-chat-console`:return t`<ic-chat-console
+          .apiClient=${this._apiClient}
+          .rpcClient=${this._rpcClient}
+          .eventDispatcher=${this._eventDispatcher}
+          .sessionKey=${this._routeParams.sessionKey??``}
+          .authToken=${this._token}
+        ></ic-chat-console>`;case`ic-memory-inspector`:return t`<ic-memory-inspector .apiClient=${this._apiClient} .rpcClient=${this._rpcClient}></ic-memory-inspector>`;case`ic-agent-list`:return t`<ic-agent-list .apiClient=${this._apiClient} .rpcClient=${this._rpcClient} .eventDispatcher=${this._eventDispatcher}></ic-agent-list>`;case`ic-agent-detail`:return t`<ic-agent-detail .apiClient=${this._apiClient} .rpcClient=${this._rpcClient} .eventDispatcher=${this._eventDispatcher} .agentId=${this._routeParams.id??``}></ic-agent-detail>`;case`ic-agent-editor`:return t`<ic-agent-editor .rpcClient=${this._rpcClient} .agentId=${this._routeParams.id??``}></ic-agent-editor>`;case`ic-workspace-manager`:return t`<ic-workspace-manager
+          .rpcClient=${this._rpcClient}
+          .agentId=${this._routeParams.id??``}
+        ></ic-workspace-manager>`;case`ic-skills-view`:return t`<ic-skills-view .apiClient=${this._apiClient} .rpcClient=${this._rpcClient} .eventDispatcher=${this._eventDispatcher}></ic-skills-view>`;case`ic-mcp-management`:return t`<ic-mcp-management .rpcClient=${this._rpcClient} .apiClient=${this._apiClient} .eventDispatcher=${this._eventDispatcher}></ic-mcp-management>`;case`ic-models-view`:return t`<ic-models-view .apiClient=${this._apiClient} .rpcClient=${this._rpcClient} .eventDispatcher=${this._eventDispatcher}></ic-models-view>`;case`ic-channel-list`:return t`<ic-channel-list
+          .apiClient=${this._apiClient}
+          .rpcClient=${this._rpcClient}
+          .eventDispatcher=${this._eventDispatcher}
+          @navigate=${e=>{this._router?.navigate(e.detail)}}
+        ></ic-channel-list>`;case`ic-channel-detail`:return t`<ic-channel-detail
+          .apiClient=${this._apiClient}
+          .rpcClient=${this._rpcClient}
+          .eventDispatcher=${this._eventDispatcher}
+          .channelType=${this._routeParams.type??``}
+          @navigate=${e=>{this._router?.navigate(e.detail)}}
+        ></ic-channel-detail>`;case`ic-message-center`:return t`<ic-message-center
+          .rpcClient=${this._rpcClient}
+          .eventDispatcher=${this._eventDispatcher}
+          .channelType=${this._routeParams.type??``}
+          @navigate=${e=>{this._router?.navigate(e.detail)}}
+        ></ic-message-center>`;case`ic-scheduler-view`:return t`<ic-scheduler-view
+          .rpcClient=${this._rpcClient}
+          .eventDispatcher=${this._eventDispatcher}
+          .routeParams=${this._routeParams}
+        ></ic-scheduler-view>`;case`ic-session-list-view`:return t`<ic-session-list-view .apiClient=${this._apiClient} .rpcClient=${this._rpcClient} .eventDispatcher=${this._eventDispatcher}></ic-session-list-view>`;case`ic-session-detail`:return t`<ic-session-detail .apiClient=${this._apiClient} .rpcClient=${this._rpcClient} .sessionKey=${this._routeParams.key??``}></ic-session-detail>`;case`ic-subagents-view`:return t`<ic-subagents-view .rpcClient=${this._rpcClient} .apiClient=${this._apiClient} .eventDispatcher=${this._eventDispatcher}></ic-subagents-view>`;case`ic-security-view`:return t`<ic-security-view .rpcClient=${this._rpcClient} .apiClient=${this._apiClient} .eventDispatcher=${this._eventDispatcher}></ic-security-view>`;case`ic-approvals-view`:return t`<ic-approvals-view .rpcClient=${this._rpcClient} .apiClient=${this._apiClient}></ic-approvals-view>`;case`ic-config-editor`:return t`<ic-config-editor .rpcClient=${this._rpcClient}></ic-config-editor>`;case`ic-setup-wizard`:return t`<ic-setup-wizard .rpcClient=${this._rpcClient}></ic-setup-wizard>`;case`ic-observe-dashboard`:return t`<ic-observe-view .rpcClient=${this._rpcClient} .eventDispatcher=${this._eventDispatcher} .initialTab=${`overview`}></ic-observe-view>`;case`ic-context-engine-view`:return t`<ic-context-engine-view .rpcClient=${this._rpcClient} .eventDispatcher=${this._eventDispatcher}></ic-context-engine-view>`;case`ic-context-dag-browser`:return t`<ic-context-dag-browser .rpcClient=${this._rpcClient}></ic-context-dag-browser>`;case`ic-media-test-view`:return t`<ic-media-test-view .rpcClient=${this._rpcClient} .apiClient=${this._apiClient}></ic-media-test-view>`;case`ic-media-config-view`:return t`<ic-media-config-view .rpcClient=${this._rpcClient}></ic-media-config-view>`;case`ic-billing-view`:return t`<ic-billing-view .rpcClient=${this._rpcClient} .eventDispatcher=${this._eventDispatcher}></ic-billing-view>`;case`ic-delivery-view`:return t`<ic-delivery-view .rpcClient=${this._rpcClient}></ic-delivery-view>`;case`ic-diagnostics-view`:return t`<ic-diagnostics-view .rpcClient=${this._rpcClient} .eventDispatcher=${this._eventDispatcher}></ic-diagnostics-view>`;case`ic-pipeline-list`:return t`<ic-pipeline-list .rpcClient=${this._rpcClient}></ic-pipeline-list>`;case`ic-pipeline-builder`:return t`<ic-pipeline-builder .rpcClient=${this._rpcClient} .graphId=${this._routeParams.graphId??``}></ic-pipeline-builder>`;case`ic-pipeline-monitor`:return t`<ic-pipeline-monitor .rpcClient=${this._rpcClient} .graphId=${this._routeParams.graphId??``} .eventDispatcher=${this._eventDispatcher}></ic-pipeline-monitor>`;case`ic-pipeline-history`:return t`<ic-pipeline-history .rpcClient=${this._rpcClient}></ic-pipeline-history>`;case`ic-pipeline-history-detail`:return t`<ic-pipeline-history-detail .rpcClient=${this._rpcClient} .graphId=${this._routeParams.graphId??``}></ic-pipeline-history-detail>`;default:return this._renderPlaceholder()}}_renderPlaceholder(){return t`
+      <div class="placeholder">
+        <div class="placeholder-title">${this._currentView.replace(/^ic-/,``).replace(/-/g,` `).replace(/\b\w/g,e=>e.toUpperCase())}</div>
+        <div>Coming soon</div>
+      </div>
+    `}render(){return this._authenticated?this._renderApp():this._renderAuth()}};u([s()],$.prototype,`_authenticated`,void 0),u([s()],$.prototype,`_authError`,void 0),u([s()],$.prototype,`_currentView`,void 0),u([s()],$.prototype,`_currentRoute`,void 0),u([s()],$.prototype,`_routeParams`,void 0),u([s()],$.prototype,`_connectionStatus`,void 0),u([s()],$.prototype,`_pendingApprovals`,void 0),u([s()],$.prototype,`_errorCount`,void 0),u([s()],$.prototype,`_agentCount`,void 0),u([s()],$.prototype,`_channelCount`,void 0),u([s()],$.prototype,`_sessionCount`,void 0),u([s()],$.prototype,`_sidebarOpen`,void 0),u([s()],$.prototype,`_viewLoading`,void 0),u([s()],$.prototype,`_commandPaletteOpen`,void 0),u([s()],$.prototype,`_shortcutsHelpOpen`,void 0),u([s()],$.prototype,`_agentList`,void 0),u([s()],$.prototype,`_sessionList`,void 0),u([s()],$.prototype,`_token`,void 0),$=u([e(`ic-app`)],$);export{A as a,j as i,z as n,V as r,B as t};