import{i as y,A as p,b as s,a as d,r as l,t as u}from"./vendor-lit-B2r-dKc0.js";import{aJ as f,aK as c}from"./app-session-runtime-CeFJDILJ.js";import"./vendor-mini-lit-CpUQub-j.js";import"./vendor-lucide-B9Yl1Gez.js";import"./vendor-marked-_iteVaMm.js";import"./app-review-C3CmcSYC.js";import"./app-panel-workspace-C3XDRCgE.js";import"./app-routing-C_r2pdnC.js";import"./app-message-reducer-wATqnZGf.js";import"./vendor-sortable-B1o3v0Qs.js";import"./app-inbox-CaZD85aD.js";import"./app-pr-walkthrough-WipZACSB.js";var m=Object.defineProperty,v=Object.getOwnPropertyDescriptor,a=(t,o,e,n)=>{for(var r=n>1?void 0:n?v(o,e):o,h=t.length-1,g;h>=0;h--)(g=t[h])&&(r=(n?g(o,e,r):g(r))||r);return n&&r&&m(o,e,r),r};function x(t){return t==null||typeof t!="number"||!Number.isFinite(t)?"—":`${Math.round(t*100)}%`}let i=class extends y{constructor(){super(...arguments),this.open=!1,this.anchor="right",this._loading=!1,this._error="",this._aggregate=null,this._sessions=[],this._delegates=[]}createRenderRoot(){return this}updated(t){t.has("open")&&this.open&&this._fetchData()}async _fetchData(){this._loading=!0,this._error="";try{const o={Authorization:`Bearer ${localStorage.getItem("gateway.token")||""}`};if(this.goalId){const e=await fetch(`/api/goals/${this.goalId}/cost/breakdown`,{headers:o});if(!e.ok)throw new Error(`${e.status}`);const n=await e.json();this._aggregate=n.aggregate,this._sessions=n.sessions||[],this._delegates=[]}else if(this.sessionId){const e=await fetch(`/api/sessions/${this.sessionId}/cost/breakdown`,{headers:o});if(!e.ok)throw new Error(`${e.status}`);const n=await e.json();this._aggregate=n.session,this._delegates=n.delegates||[],this._sessions=[]}}catch{this._error="Failed to load cost data"}finally{this._loading=!1}}_renderTokenRow(t,o,e){return s`
			<div style="display:flex;justify-content:space-between;align-items:center;padding:2px 0;">
				<span style="color:var(--muted-foreground)">${t}</span>
				<span style="font-variant-numeric:tabular-nums;display:flex;gap:12px;">
					<span>${f(o)}</span>
					${e!==void 0?s`<span style="min-width:50px;text-align:right;">${c(e)}</span>`:p}
				</span>
			</div>`}_renderSessionEntry(t){const o=t.role?s`<span style="font-weight:500">${t.title}</span> <span style="opacity:0.6;font-size:11px">${t.role}</span>`:t.assistantType==="goal"?s`<span style="font-weight:500">${t.title}</span> <span style="opacity:0.6;font-size:11px">goal assistant</span>`:s`<span style="font-weight:500">${t.title}</span>`,e=t.inputTokens+t.outputTokens+t.cacheReadTokens+t.cacheWriteTokens;return s`
			<div style="display:flex;justify-content:space-between;align-items:center;padding:3px 0;gap:8px;">
				<div style="min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;">${o}</div>
				<div style="display:flex;gap:12px;flex-shrink:0;font-variant-numeric:tabular-nums;">
					<span style="opacity:0.6;font-size:11px;">${f(e)}</span>
					<span style="font-weight:500;min-width:50px;text-align:right;">${c(t.totalCost)}</span>
				</div>
			</div>`}_renderCacheHitRow(t){return s`
			<div data-testid="cost-cache-hit" style="display:flex;justify-content:space-between;align-items:center;padding:2px 0;">
				<span style="color:var(--muted-foreground)">Cache hit</span>
				<span style="font-variant-numeric:tabular-nums;">${x(t)}</span>
			</div>`}_renderBreakdown(t){const o=[{label:"Input tokens",tokens:t.inputTokens},{label:"Output tokens",tokens:t.outputTokens}];return t.cacheReadTokens&&o.push({label:"Cache read",tokens:t.cacheReadTokens}),t.cacheWriteTokens&&o.push({label:"Cache write",tokens:t.cacheWriteTokens}),s`
			${o.map(e=>this._renderTokenRow(e.label,e.tokens))}
			${this._renderCacheHitRow(t.cacheHitRate)}
		`}render(){if(!this.open)return p;const t=this.anchor==="right"?"right:0;":"left:0;",o=this.goalId?"top:100%;margin-top:6px;":"bottom:100%;margin-bottom:6px;";return s`
			<div style="position:fixed;inset:0;z-index:40;" @click=${e=>{e.stopPropagation(),this.dispatchEvent(new Event("close"))}}></div>
			<div style="
				position:absolute;${o}${t}z-index:50;
				background:var(--popover);color:var(--popover-foreground);
				border:1px solid var(--border);border-radius:8px;
				padding:12px 14px;min-width:300px;max-width:400px;
				max-height:70vh;overflow-y:auto;
				box-shadow:0 4px 12px rgba(0,0,0,0.15);font-size:12px;
			">
				${this._loading?s`<div style="text-align:center;padding:12px;color:var(--muted-foreground)">Loading…</div>`:p}
				${this._error?s`<div style="color:var(--destructive)">${this._error}</div>`:p}
				${!this._loading&&!this._error&&this._aggregate?s`
					<div style="font-weight:600;font-size:13px;margin-bottom:8px;display:flex;justify-content:space-between;align-items:center;">
						<span>Cost Breakdown</span>
						<span style="font-size:14px;font-weight:700;">${c(this._aggregate.totalCost)}</span>
					</div>

					<div style="border-bottom:1px solid var(--border);margin-bottom:8px;padding-bottom:8px;">
						${this._renderBreakdown(this._aggregate)}
					</div>

					${this._sessions.length>0?s`
						<div style="font-weight:600;margin-bottom:4px;">By Agent</div>
						<div style="max-height:200px;overflow-y:auto;margin-bottom:4px;">
							${this._sessions.map(e=>this._renderSessionEntry(e))}
						</div>
					`:p}

					${this._delegates.length>0?s`
						<div style="font-weight:600;margin-bottom:4px;">Delegates</div>
						<div style="max-height:200px;overflow-y:auto;margin-bottom:4px;">
							${this._delegates.map(e=>this._renderSessionEntry(e))}
						</div>
					`:p}
				`:p}
			</div>
		`}};a([d({type:Boolean})],i.prototype,"open",2);a([d()],i.prototype,"sessionId",2);a([d()],i.prototype,"goalId",2);a([d()],i.prototype,"anchor",2);a([l()],i.prototype,"_loading",2);a([l()],i.prototype,"_error",2);a([l()],i.prototype,"_aggregate",2);a([l()],i.prototype,"_sessions",2);a([l()],i.prototype,"_delegates",2);i=a([u("cost-popover")],i);export{i as CostPopover};
