comisai 1.0.15 → 1.0.17

package/node_modules/@comis/web/dist/assets/agent-detail-BG9MGWWj.js

@@ -0,0 +1,615 @@
+import{s as x,i as _,n as u,a as $,b as s,t as w,S as k,I as h,A as n,f as C,r as v}from"./index-CEcM1R_C.js";import"./ic-breadcrumb-CUMpp3BL.js";import"./ic-tag-CPPUnDLF.js";import"./ic-confirm-dialog-CCDbB04e.js";import"./ic-relative-time-3FqpjeAI.js";var S=Object.defineProperty,D=Object.getOwnPropertyDescriptor,g=(e,t,a,i)=>{for(var r=i>1?void 0:i?D(t,a):t,c=e.length-1,l;c>=0;c--)(l=e[c])&&(r=(i?l(t,a,r):l(r))||r);return i&&r&&S(t,a,r),r};function y(e){return e.toLocaleString("en-US")}let p=class extends ${constructor(){super(...arguments),this.label="",this.used=0,this.total=0,this.warnThreshold=70,this.dangerThreshold=90}render(){if(this.total===0)return s`
+        <div class="header">
+          <span class="label">${this.label}</span>
+          <span class="unlimited">unlimited</span>
+        </div>
+      `;const e=Math.min(100,Math.round(this.used/this.total*100)),t=e>=this.dangerThreshold?"bar-fill--danger":e>=this.warnThreshold?"bar-fill--warning":"bar-fill--success";return s`
+      <div class="header">
+        <span class="label">${this.label}</span>
+        <span class="values">${y(this.used)} / ${y(this.total)} (${e}%)</span>
+      </div>
+      <div class="track">
+        <div
+          class="bar-fill ${t}"
+          style="width: ${e}%"
+        ></div>
+      </div>
+    `}};p.styles=[x,_`
+      :host {
+        display: block;
+      }
+
+      .header {
+        display: flex;
+        justify-content: space-between;
+        align-items: baseline;
+        margin-bottom: 4px;
+      }
+
+      .label {
+        font-size: var(--ic-text-sm, 0.875rem);
+        color: var(--ic-text, #f3f4f6);
+        font-weight: 500;
+      }
+
+      .values {
+        font-size: var(--ic-text-xs, 0.75rem);
+        color: var(--ic-text-dim, #6b7280);
+      }
+
+      .track {
+        width: 100%;
+        height: 8px;
+        background: var(--ic-surface-2, #1f2937);
+        border-radius: var(--ic-radius-sm, 0.25rem);
+        overflow: hidden;
+      }
+
+      .bar-fill {
+        height: 100%;
+        border-radius: var(--ic-radius-sm, 0.25rem);
+        transition: width var(--ic-transition, 150ms ease);
+        min-width: 0;
+      }
+
+      .bar-fill--success {
+        background: var(--ic-success);
+      }
+
+      .bar-fill--warning {
+        background: var(--ic-warning);
+      }
+
+      .bar-fill--danger {
+        background: var(--ic-error);
+      }
+
+      .unlimited {
+        font-size: var(--ic-text-xs, 0.75rem);
+        color: var(--ic-text-dim, #6b7280);
+        font-style: italic;
+      }
+    `];g([u()],p.prototype,"label",2);g([u({type:Number})],p.prototype,"used",2);g([u({type:Number})],p.prototype,"total",2);g([u({type:Number})],p.prototype,"warnThreshold",2);g([u({type:Number})],p.prototype,"dangerThreshold",2);p=g([w("ic-budget-bar")],p);var T=Object.defineProperty,P=Object.getOwnPropertyDescriptor,d=(e,t,a,i)=>{for(var r=i>1?void 0:i?P(t,a):t,c=e.length-1,l;c>=0;c--)(l=e[c])&&(r=(i?l(t,a,r):l(r))||r);return i&&r&&T(t,a,r),r};function M(e){if(e>=1e6){const t=e/1e6;return t%1===0?`${t}M`:`${t.toFixed(1)}M`}if(e>=1e3){const t=e/1e3;return t%1===0?`${t}K`:`${t.toFixed(1)}K`}return String(e)}function I(e){return new Intl.NumberFormat("en-US",{style:"currency",currency:"USD",minimumFractionDigits:2,maximumFractionDigits:2}).format(e)}function b(e){return e.toLocaleString("en-US")}const R={closed:"success",open:"error","half-open":"warning"};let o=class extends ${constructor(){super(...arguments),this.apiClient=null,this.rpcClient=null,this.eventDispatcher=null,this._sse=null,this._reloadDebounce=null,this.agentId="",this._agent=null,this._billing=null,this._skills=[],this._loadState="loading",this._error="",this._actionPending=!1,this._heartbeatState=null,this._deleteRequested=!1}connectedCallback(){super.connectedCallback(),this._initSse()}updated(e){(e.has("agentId")||e.has("rpcClient"))&&this.agentId&&this.rpcClient&&this._loadData(),e.has("eventDispatcher")&&this.eventDispatcher&&!this._sse&&this._initSse()}disconnectedCallback(){super.disconnectedCallback(),this._reloadDebounce!==null&&(clearTimeout(this._reloadDebounce),this._reloadDebounce=null)}_initSse(){!this.eventDispatcher||this._sse||(this._sse=new k(this,this.eventDispatcher,{"observability:token_usage":()=>{this._scheduleReload()},"scheduler:heartbeat_delivered":()=>{this._scheduleReload()}}))}_scheduleReload(e=300){this._reloadDebounce!==null&&clearTimeout(this._reloadDebounce),this._reloadDebounce=setTimeout(()=>{this._reloadDebounce=null,this._loadData()},e)}async _loadData(){if(!(!this.rpcClient||!this.agentId)){this._loadState="loading",this._error="";try{const e=await this.rpcClient.call("agents.get",{agentId:this.agentId});this._agent=this._mapToAgentDetail(e),this._loadState="loaded";const t=this.rpcClient;Promise.allSettled([t.call("obs.billing.byAgent",{agentId:this.agentId}),t.call("skills.list",{agentId:this.agentId}).then(a=>a.skills??[]),t.call("heartbeat.states",{}).then(a=>(a.agents??[]).find(i=>i.agentId===this.agentId)??null)]).then(([a,i,r])=>{this._billing=a.status==="fulfilled"?a.value:null,this._skills=i.status==="fulfilled"&&Array.isArray(i.value)?i.value:[],this._heartbeatState=r.status==="fulfilled"?r.value:null})}catch(e){this._error=e instanceof Error?e.message:"Failed to load agent",this._loadState="error"}}}_mapToAgentDetail(e){const t=e.config,a=t.circuitBreaker,i=t.contextGuard,r=t.sdkRetry,c=t.modelFailover,l=t.rag,m=t.session?.resetPolicy,f=t.concurrency;return{id:e.agentId,name:t.name??e.agentId,status:e.suspended?"suspended":"active",model:t.model??"",provider:t.provider??"",maxSteps:t.maxSteps,temperature:t.temperature,thinkingLevel:t.thinkingLevel,maxTokens:t.maxTokens,maxContextChars:t.maxContextChars,budgets:t.budgets,circuitBreaker:a?{state:"closed",failures:0,threshold:a.failureThreshold,resetTimeoutMs:a.resetTimeoutMs}:void 0,safety:{contextGuard:i?{enabled:i.enabled,warnPct:i.warnPercent,blockPct:i.blockPercent}:void 0,sdkRetry:r?{enabled:r.enabled,maxRetries:r.maxRetries,baseDelayMs:r.baseDelayMs}:void 0,modelFailover:c?{fallbackCount:(c.fallbackModels??[]).length}:void 0},rag:l?{enabled:l.enabled,maxResults:l.maxResults,minScore:l.minScore,trustLevels:l.includeTrustLevels}:void 0,sessionPolicy:m?{resetMode:m.mode,idleTimeoutMs:m.idleTimeoutMs,dailyResetHour:m.dailyResetHour,timezone:m.dailyResetTimezone}:void 0,concurrency:f?{maxConcurrent:f.maxConcurrentRuns,maxQueued:f.maxQueuedPerSession,queueMode:"followup"}:void 0,routingBindings:t.routingBindings}}_navigate(e){this.dispatchEvent(new CustomEvent("navigate",{detail:e,bubbles:!0,composed:!0}))}async _handleSuspendResume(){if(!this.rpcClient||!this._agent||this._actionPending)return;this._actionPending=!0;const e=this._agent.status==="suspended",t=e?"agents.resume":"agents.suspend",a=e?"resumed":"suspended";try{await this.rpcClient.call(t,{agentId:this.agentId}),h.show(`Agent ${this.agentId} ${a}`,"success"),await this._loadData()}catch(i){h.show(`Failed to ${e?"resume":"suspend"} agent: ${i instanceof Error?i.message:"Unknown error"}`,"error")}finally{this._actionPending=!1}}async _handleDelete(){if(!(!this.rpcClient||this._actionPending)){this._actionPending=!0;try{await this.rpcClient.call("agents.delete",{agentId:this.agentId}),h.show(`Agent ${this.agentId} deleted`,"success"),this._navigate("agents")}catch(e){h.show(`Failed to delete agent: ${e instanceof Error?e.message:"Unknown error"}`,"error")}finally{this._actionPending=!1}}}render(){switch(this._loadState){case"loading":return s`<ic-skeleton-view variant="detail"></ic-skeleton-view>`;case"error":return s`
+          <div class="error-container">
+            <div class="error-message">${this._error}</div>
+            <button class="retry-btn" @click=${()=>this._loadData()}>Retry</button>
+          </div>
+        `;case"loaded":return this._renderDetail()}}_renderDetail(){if(!this._agent)return n;const e=this._agent,t=e.status==="suspended",a=t?"Resume":"Suspend";return s`
+      <div class="header">
+        <div class="header-left">
+          <ic-breadcrumb
+            .items=${[{label:"Agents",route:"agents"},{label:e.name??e.id}]}
+            @navigate=${i=>this._navigate(i.detail)}
+          ></ic-breadcrumb>
+          <div class="agent-title">
+            <h1>${e.name??e.id}</h1>
+            <ic-tag variant=${t?"warning":"success"}>${e.status}</ic-tag>
+          </div>
+        </div>
+        <div class="header-actions">
+          <button
+            class="btn btn--secondary"
+            @click=${()=>this._navigate(`agents/${this.agentId}/workspace`)}
+          >Workspace</button>
+          <button
+            class="btn btn--primary"
+            @click=${()=>this._navigate(`agents/${this.agentId}/edit`)}
+          >Edit</button>
+          <button
+            class="btn btn--secondary"
+            ?disabled=${this._actionPending}
+            @click=${()=>this._handleSuspendResume()}
+          >${a}</button>
+          <button
+            class="btn btn--danger"
+            ?disabled=${this._actionPending}
+            @click=${()=>this._requestDelete()}
+          >Delete</button>
+        </div>
+      </div>
+
+      <div class="detail-layout">
+        <div class="left-column">
+          ${this._renderIdentityCard()}
+          ${this._renderStatsCard()}
+          ${this._renderConfigCard()}
+        </div>
+        <div class="right-column">
+          ${this._renderBudgetGaugesCard()}
+          ${this._renderCircuitBreakerCard()}
+          ${this._renderSkillsCard()}
+          ${this._renderHeartbeatCard()}
+        </div>
+      </div>
+
+      <ic-confirm-dialog
+        ?open=${this._deleteRequested}
+        title="Delete Agent"
+        message=${`Delete agent "${this.agentId}"? This action cannot be undone.`}
+        variant="danger"
+        confirmLabel="Delete"
+        @confirm=${()=>this._handleDelete()}
+        @cancel=${()=>{this._deleteRequested=!1}}
+      ></ic-confirm-dialog>
+    `}_requestDelete(){this._deleteRequested=!0}_renderIdentityCard(){const e=this._agent,t=[{label:"Agent ID",value:e.id,mono:!0},{label:"Display Name",value:e.name},{label:"Provider",value:e.provider},{label:"Model",value:e.model},{label:"Temperature",value:e.temperature!==void 0?String(e.temperature):"default"},{label:"Max Steps",value:e.maxSteps!==void 0?String(e.maxSteps):"default"},{label:"Max Tokens",value:e.maxTokens!==void 0?b(e.maxTokens):"default"},{label:"Thinking Level",value:e.thinkingLevel??"default"}];return s`
+      <div class="card">
+        <h3 class="card-title">Identity</h3>
+        ${t.map(a=>s`
+            <div class="identity-row">
+              <span class="identity-label">${a.label}</span>
+              <span class="identity-value ${a.mono?"identity-value--mono":""}">${a.value??"-"}</span>
+            </div>
+          `)}
+      </div>
+    `}_renderStatsCard(){const e=this._billing,t=b(e?.messagesToday??0),a=M(e?.tokensToday??0),i=String(e?.activeSessions??0),r=I(e?.costToday??0);return s`
+      <div class="card">
+        <h3 class="card-title">Stats</h3>
+        <div class="stat-grid">
+          <ic-stat-card label="Messages Today" value=${t}></ic-stat-card>
+          <ic-stat-card label="Tokens Today" value=${a}></ic-stat-card>
+          <ic-stat-card label="Cost Today" value=${r}></ic-stat-card>
+          <ic-stat-card label="Active Sessions" value=${i}></ic-stat-card>
+        </div>
+      </div>
+    `}_renderConfigCard(){const e=this._agent,t=e.sessionPolicy&&(e.sessionPolicy.resetMode||e.sessionPolicy.idleTimeoutMs),a=e.concurrency&&(e.concurrency.maxConcurrent||e.concurrency.maxQueued),i=e.safety&&(e.safety.contextGuard||e.safety.sdkRetry||e.safety.modelFailover);return!t&&!a&&!i?n:s`
+      <div class="card">
+        <h3 class="card-title">Configuration</h3>
+
+        ${t?s`
+          <div class="config-group">
+            <h4 class="config-group-title">Session Policy</h4>
+            ${e.sessionPolicy?.resetMode?s`
+              <div class="identity-row">
+                <span class="identity-label">Reset Mode</span>
+                <span class="identity-value">${e.sessionPolicy.resetMode}</span>
+              </div>
+            `:n}
+            ${e.sessionPolicy?.idleTimeoutMs?s`
+              <div class="identity-row">
+                <span class="identity-label">Idle Timeout</span>
+                <span class="identity-value">${b(e.sessionPolicy.idleTimeoutMs)}ms</span>
+              </div>
+            `:n}
+            ${e.sessionPolicy?.timezone?s`
+              <div class="identity-row">
+                <span class="identity-label">Timezone</span>
+                <span class="identity-value">${e.sessionPolicy.timezone}</span>
+              </div>
+            `:n}
+          </div>
+        `:n}
+
+        ${a?s`
+          <div class="config-group">
+            <h4 class="config-group-title">Concurrency</h4>
+            ${e.concurrency?.maxConcurrent!==void 0?s`
+              <div class="identity-row">
+                <span class="identity-label">Max Concurrent</span>
+                <span class="identity-value">${e.concurrency.maxConcurrent}</span>
+              </div>
+            `:n}
+            ${e.concurrency?.maxQueued!==void 0?s`
+              <div class="identity-row">
+                <span class="identity-label">Queue Mode</span>
+                <span class="identity-value">${e.concurrency.queueMode??"followup"}</span>
+              </div>
+            `:n}
+          </div>
+        `:n}
+
+        ${i?s`
+          <div class="config-group">
+            <h4 class="config-group-title">Safety</h4>
+            ${e.safety?.contextGuard?s`
+              <div class="identity-row">
+                <span class="identity-label">Context Guard</span>
+                <span class="identity-value">
+                  ${e.safety.contextGuard.enabled?"enabled":"disabled"}
+                  (warn: ${e.safety.contextGuard.warnPct}%, block: ${e.safety.contextGuard.blockPct}%)
+                </span>
+              </div>
+            `:n}
+            ${e.safety?.sdkRetry?s`
+              <div class="identity-row">
+                <span class="identity-label">SDK Retry</span>
+                <span class="identity-value">
+                  ${e.safety.sdkRetry.enabled?"enabled":"disabled"}
+                  (${e.safety.sdkRetry.maxRetries} retries)
+                </span>
+              </div>
+            `:n}
+            ${e.safety?.modelFailover?s`
+              <div class="identity-row">
+                <span class="identity-label">Model Failover</span>
+                <span class="identity-value">${e.safety.modelFailover.fallbackCount} fallback models</span>
+              </div>
+            `:n}
+          </div>
+        `:n}
+      </div>
+    `}_renderBudgetGaugesCard(){const e=this._agent,t=this._billing,a=e.budgets,i=a&&(a.perExecution!==void 0||a.perHour!==void 0||a.perDay!==void 0);return s`
+      <div class="card">
+        <h3 class="card-title">Budget</h3>
+        ${i?s`
+          <div class="budget-gauges">
+            ${a.perExecution!==void 0?s`
+              <ic-metric-gauge
+                .value=${this._budgetPct(t?.budgetUsed?.perExecution?.used??0,a.perExecution)}
+                label="Per Exec"
+              ></ic-metric-gauge>
+            `:n}
+            ${a.perHour!==void 0?s`
+              <ic-metric-gauge
+                .value=${this._budgetPct(t?.budgetUsed?.perHour?.used??0,a.perHour)}
+                label="Per Hour"
+              ></ic-metric-gauge>
+            `:n}
+            ${a.perDay!==void 0?s`
+              <ic-metric-gauge
+                .value=${this._budgetPct(t?.budgetUsed?.perDay?.used??0,a.perDay)}
+                label="Per Day"
+              ></ic-metric-gauge>
+            `:n}
+          </div>
+        `:s`
+          <p class="budget-empty">No budget set</p>
+        `}
+      </div>
+    `}_budgetPct(e,t){return t<=0?0:Math.min(100,Math.round(e/t*100))}_renderCircuitBreakerCard(){const e=this._agent?.circuitBreaker;if(!e)return n;const t=R[e.state]??"default";return s`
+      <div class="card">
+        <h3 class="card-title">Circuit Breaker</h3>
+        <div class="circuit-breaker">
+          <div class="cb-row">
+            <span class="cb-label">State:</span>
+            <ic-tag variant=${t}>${e.state}</ic-tag>
+          </div>
+          <div class="cb-row">
+            <span class="cb-label">Failures:</span>
+            <span>${e.failures}</span>
+          </div>
+          ${e.threshold!==void 0?s`
+            <div class="cb-row">
+              <span class="cb-label">Threshold:</span>
+              <span>${e.threshold}</span>
+            </div>
+          `:n}
+          ${e.resetTimeoutMs!==void 0?s`
+            <div class="cb-row">
+              <span class="cb-label">Reset:</span>
+              <span>${b(e.resetTimeoutMs)}ms</span>
+            </div>
+          `:n}
+        </div>
+      </div>
+    `}_renderSkillsCard(){const e=this._skills,t=e.length;return s`
+      <div class="card">
+        <h3 class="card-title">Skills (${t})</h3>
+        ${t>0?s`
+              <div class="skill-chips">
+                ${e.map(a=>{const i=a.source==="bundled"?"built-in":a.source==="local"?"prompt":a.source==="workspace"?"mcp":"built-in",r=a.source==="bundled"?"info":a.source==="local"?"success":"warning";return s`<ic-tag variant=${r} title=${a.description||a.name}>${a.name} (${i})</ic-tag>`})}
+              </div>
+            `:s`<p class="muted">No skills configured</p>`}
+      </div>
+    `}_renderHeartbeatCard(){const e=this._heartbeatState;if(!e)return n;const t=Date.now(),a=e.backoffUntilMs>t,i=e.consecutiveErrors>0,r=e.tickStartedAtMs>0;let c,l;return e.enabled?a?(c="backoff",l="warning"):i?(c="error",l="error"):(c="healthy",l="success"):(c="disabled",l="default"),s`
+      <div class="card">
+        <h3 class="card-title">Heartbeat</h3>
+        <div class="heartbeat-info">
+          <div class="hb-row">
+            <span class="hb-label">Status:</span>
+            <ic-tag variant=${l}>${c}</ic-tag>
+            ${r?s`<span class="hb-running">running...</span>`:n}
+          </div>
+          <div class="hb-row">
+            <span class="hb-label">Interval:</span>
+            <span>${this._formatInterval(e.intervalMs)}</span>
+          </div>
+          ${e.lastRunMs>0?s`
+            <div class="hb-row">
+              <span class="hb-label">Last run:</span>
+              <ic-relative-time .timestamp=${e.lastRunMs}></ic-relative-time>
+            </div>
+          `:n}
+          ${e.nextDueMs>0?s`
+            <div class="hb-row">
+              <span class="hb-label">Next due:</span>
+              <ic-relative-time .timestamp=${e.nextDueMs}></ic-relative-time>
+            </div>
+          `:n}
+          ${i?s`
+            <div class="hb-row">
+              <span class="hb-label">Errors:</span>
+              <span>${e.consecutiveErrors} consecutive${e.lastErrorKind?` (${e.lastErrorKind})`:""}</span>
+            </div>
+          `:n}
+        </div>
+      </div>
+    `}_formatInterval(e){return e>=36e5?`Every ${Math.round(e/36e5)}h`:e>=6e4?`Every ${Math.round(e/6e4)}m`:`Every ${Math.round(e/1e3)}s`}};o.styles=[x,C,_`
+      :host {
+        display: block;
+      }
+
+      /* Header */
+      .header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: var(--ic-space-lg, 1.5rem);
+      }
+
+      .header-left {
+        display: flex;
+        flex-direction: column;
+        gap: var(--ic-space-xs, 0.25rem);
+      }
+
+      .agent-title {
+        display: flex;
+        align-items: center;
+        gap: var(--ic-space-sm, 0.5rem);
+      }
+
+      .agent-title h1 {
+        font-size: var(--ic-text-xl, 1.25rem);
+        font-weight: 700;
+        margin: 0;
+      }
+
+      .header-actions {
+        display: flex;
+        gap: var(--ic-space-sm, 0.5rem);
+      }
+
+      .btn {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--ic-space-xs, 0.25rem);
+        padding: var(--ic-space-sm, 0.5rem) var(--ic-space-md, 0.75rem);
+        border: 1px solid var(--ic-border, #374151);
+        border-radius: var(--ic-radius-md, 0.5rem);
+        font-size: var(--ic-text-sm, 0.875rem);
+        font-weight: 500;
+        font-family: inherit;
+        cursor: pointer;
+        transition: background var(--ic-transition, 150ms ease),
+          border-color var(--ic-transition, 150ms ease),
+          color var(--ic-transition, 150ms ease);
+      }
+
+      .btn--primary {
+        background: var(--ic-accent, #3b82f6);
+        color: #fff;
+        border-color: var(--ic-accent, #3b82f6);
+      }
+
+      .btn--primary:hover {
+        background: var(--ic-accent-hover, #2563eb);
+      }
+
+      .btn--secondary {
+        background: transparent;
+        color: var(--ic-text, #f3f4f6);
+      }
+
+      .btn--secondary:hover {
+        background: var(--ic-surface-2, #1f2937);
+        border-color: var(--ic-accent, #3b82f6);
+      }
+
+      .btn--danger {
+        background: transparent;
+        color: var(--ic-error, #f87171);
+        border-color: var(--ic-error, #f87171);
+      }
+
+      .btn--danger:hover {
+        background: color-mix(in srgb, var(--ic-error, #f87171) 10%, transparent);
+      }
+
+      .btn:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+
+      /* Two-column layout */
+      .detail-layout {
+        display: grid;
+        grid-template-columns: 3fr 2fr;
+        gap: var(--ic-space-lg, 1.5rem);
+      }
+
+      .left-column,
+      .right-column {
+        display: flex;
+        flex-direction: column;
+        gap: var(--ic-space-lg, 1.5rem);
+      }
+
+      /* Card */
+      .card {
+        background: var(--ic-surface, #111827);
+        border: 1px solid var(--ic-border, #374151);
+        border-radius: var(--ic-radius-md, 0.5rem);
+        padding: var(--ic-space-lg, 1.5rem);
+      }
+
+      .card-title {
+        font-size: var(--ic-text-md, 1rem);
+        font-weight: 600;
+        margin: 0 0 var(--ic-space-md, 0.75rem) 0;
+      }
+
+      /* Identity rows */
+      .identity-row {
+        display: flex;
+        justify-content: space-between;
+        align-items: baseline;
+        padding: var(--ic-space-xs, 0.25rem) 0;
+        border-bottom: 1px solid color-mix(in srgb, var(--ic-border, #374151) 50%, transparent);
+      }
+
+      .identity-row:last-child {
+        border-bottom: none;
+      }
+
+      .identity-label {
+        font-size: var(--ic-text-sm, 0.875rem);
+        color: var(--ic-text-dim, #858d9d);
+      }
+
+      .identity-value {
+        font-size: var(--ic-text-sm, 0.875rem);
+        color: var(--ic-text, #f3f4f6);
+        font-weight: 500;
+      }
+
+      .identity-value--mono {
+        font-family: var(--ic-font-mono, monospace);
+        font-size: var(--ic-text-xs, 0.75rem);
+      }
+
+      /* Stats 2x2 grid */
+      .stat-grid {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: var(--ic-space-sm, 0.5rem);
+      }
+
+      /* Config groups */
+      .config-group {
+        margin-bottom: var(--ic-space-md, 0.75rem);
+      }
+
+      .config-group:last-child {
+        margin-bottom: 0;
+      }
+
+      .config-group-title {
+        font-size: var(--ic-text-xs, 0.75rem);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        color: var(--ic-text-dim, #858d9d);
+        margin: 0 0 var(--ic-space-xs, 0.25rem) 0;
+      }
+
+      /* Budget gauges */
+      .budget-gauges {
+        display: flex;
+        justify-content: space-around;
+        gap: var(--ic-space-md, 0.75rem);
+      }
+
+      .budget-empty {
+        color: var(--ic-text-dim, #858d9d);
+        font-size: var(--ic-text-sm, 0.875rem);
+        font-style: italic;
+        text-align: center;
+        padding: var(--ic-space-md, 0.75rem) 0;
+      }
+
+      /* Circuit breaker */
+      .circuit-breaker {
+        display: flex;
+        flex-direction: column;
+        gap: var(--ic-space-xs, 0.25rem);
+      }
+
+      .cb-row {
+        display: flex;
+        align-items: center;
+        gap: var(--ic-space-sm, 0.5rem);
+        font-size: var(--ic-text-sm, 0.875rem);
+      }
+
+      .cb-label {
+        color: var(--ic-text-dim, #858d9d);
+        min-width: 80px;
+      }
+
+      /* Skills */
+      .skill-chips {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--ic-space-xs, 0.25rem);
+      }
+
+      .muted {
+        color: var(--ic-text-dim, #858d9d);
+        font-size: var(--ic-text-sm, 0.875rem);
+        font-style: italic;
+      }
+
+      /* Heartbeat */
+      .heartbeat-info {
+        display: flex;
+        flex-direction: column;
+        gap: var(--ic-space-xs, 0.25rem);
+      }
+
+      .hb-row {
+        display: flex;
+        align-items: center;
+        gap: var(--ic-space-sm, 0.5rem);
+        font-size: var(--ic-text-sm, 0.875rem);
+      }
+
+      .hb-label {
+        color: var(--ic-text-dim, #858d9d);
+        min-width: 100px;
+      }
+
+      .hb-running {
+        color: var(--ic-accent, #3b82f6);
+        font-size: var(--ic-text-xs, 0.75rem);
+        font-style: italic;
+      }
+
+      /* Error state */
+      .error-container {
+        text-align: center;
+        padding: var(--ic-space-2xl, 3rem);
+        color: var(--ic-text-muted, #9ca3af);
+      }
+
+      .error-message {
+        margin-bottom: var(--ic-space-md, 0.75rem);
+        color: var(--ic-error, #f87171);
+      }
+
+      .retry-btn {
+        padding: var(--ic-space-sm, 0.5rem) var(--ic-space-md, 0.75rem);
+        background: transparent;
+        border: 1px solid var(--ic-border, #374151);
+        border-radius: var(--ic-radius-md, 0.5rem);
+        color: var(--ic-text, #f3f4f6);
+        font-size: var(--ic-text-sm, 0.875rem);
+        font-family: inherit;
+        cursor: pointer;
+      }
+
+      .retry-btn:hover {
+        border-color: var(--ic-accent, #3b82f6);
+        color: var(--ic-accent, #3b82f6);
+      }
+
+      /* Responsive */
+      @media (max-width: 767px) {
+        .detail-layout {
+          grid-template-columns: 1fr;
+        }
+
+        .stat-grid {
+          grid-template-columns: 1fr;
+        }
+
+        .header {
+          flex-direction: column;
+          align-items: flex-start;
+          gap: var(--ic-space-sm, 0.5rem);
+        }
+
+        .budget-gauges {
+          flex-wrap: wrap;
+        }
+      }
+    `];d([u({attribute:!1})],o.prototype,"apiClient",2);d([u({attribute:!1})],o.prototype,"rpcClient",2);d([u({attribute:!1})],o.prototype,"eventDispatcher",2);d([u()],o.prototype,"agentId",2);d([v()],o.prototype,"_agent",2);d([v()],o.prototype,"_billing",2);d([v()],o.prototype,"_skills",2);d([v()],o.prototype,"_loadState",2);d([v()],o.prototype,"_error",2);d([v()],o.prototype,"_actionPending",2);d([v()],o.prototype,"_heartbeatState",2);d([v()],o.prototype,"_deleteRequested",2);o=d([w("ic-agent-detail")],o);export{o as IcAgentDetail,M as formatTokens};