|
| 1 | +import { setIcon } from 'obsidian'; |
| 2 | + |
| 3 | +import type { |
| 4 | + CreditsUsageQuota, |
| 5 | + CreditsUsageSnapshot, |
| 6 | + QoderRuntimeStatus, |
| 7 | +} from '../../../core/types/services'; |
| 8 | +import { getLocale, t } from '../../../i18n/i18n'; |
| 9 | +import { getQoderAccountUsageUrl } from '../../../qoder/config/cli-edition'; |
| 10 | +import { ClickPopover } from './toolbar/click-popover'; |
| 11 | + |
| 12 | +/** Usage snapshots older than this are refreshed when the panel opens. */ |
| 13 | +const USAGE_CACHE_TTL_MS = 60_000; |
| 14 | + |
| 15 | +export interface CreditsUsageButtonCallbacks { |
| 16 | + /** Latest snapshot known to the runtime catalog (from the startup probe). */ |
| 17 | + getCachedUsage: () => CreditsUsageSnapshot | null; |
| 18 | + /** Runs a dedicated idle query against the CLI; null when unavailable. */ |
| 19 | + fetchUsage: () => Promise<CreditsUsageSnapshot | null>; |
| 20 | + subscribeRuntimeStatus?: (listener: (status: QoderRuntimeStatus) => void) => () => void; |
| 21 | +} |
| 22 | + |
| 23 | +function formatCount(value: number | undefined): string { |
| 24 | + return String(value ?? 0); |
| 25 | +} |
| 26 | + |
| 27 | +function formatRenewalDate(timestamp: number): string { |
| 28 | + try { |
| 29 | + return new Date(timestamp).toLocaleDateString(getLocale(), { |
| 30 | + year: 'numeric', |
| 31 | + month: 'short', |
| 32 | + day: 'numeric', |
| 33 | + }); |
| 34 | + } catch { |
| 35 | + return new Date(timestamp).toDateString(); |
| 36 | + } |
| 37 | +} |
| 38 | + |
| 39 | +/** IDE-style tier label: org editions get the green pill, personal tiers plain text. */ |
| 40 | +function describeUserTier(userType: string | undefined): { text: string; plain: boolean } | null { |
| 41 | + if (userType === 'teams') return { text: 'Teams', plain: false }; |
| 42 | + if (userType === 'personal_standard') return { text: t('credits.tierTrial'), plain: true }; |
| 43 | + return null; |
| 44 | +} |
| 45 | + |
| 46 | +/** The server uses a year-9999 timestamp for plans that never renew. */ |
| 47 | +function isSentinelExpiry(timestamp: number): boolean { |
| 48 | + return new Date(timestamp).getUTCFullYear() >= 9999; |
| 49 | +} |
| 50 | + |
| 51 | +/** |
| 52 | + * Nav-row button showing overall credits usage with a popover panel that |
| 53 | + * mirrors the Qoder IDE usage view: plan quota, add-on quota and the |
| 54 | + * organization resource package, each with a segmented progress bar. |
| 55 | + */ |
| 56 | +export class CreditsUsageButton { |
| 57 | + private readonly container: HTMLElement; |
| 58 | + private readonly buttonEl: HTMLElement; |
| 59 | + private readonly panelEl: HTMLElement; |
| 60 | + private readonly popover: ClickPopover; |
| 61 | + private readonly unsubscribeRuntimeStatus: (() => void) | null; |
| 62 | + private refreshBtnEl: HTMLElement | null = null; |
| 63 | + private snapshot: CreditsUsageSnapshot | null; |
| 64 | + private fetchedAt = 0; |
| 65 | + private loading = false; |
| 66 | + |
| 67 | + constructor(parentEl: HTMLElement, private readonly callbacks: CreditsUsageButtonCallbacks) { |
| 68 | + this.container = parentEl.createDiv({ cls: 'qoderian-credits-container' }); |
| 69 | + this.buttonEl = this.container.createDiv({ cls: 'qoderian-input-nav-btn qoderian-credits-btn' }); |
| 70 | + setIcon(this.buttonEl, 'gauge'); |
| 71 | + |
| 72 | + this.panelEl = this.container.createDiv({ cls: 'qoderian-credits-panel' }); |
| 73 | + this.popover = new ClickPopover( |
| 74 | + this.container, |
| 75 | + this.buttonEl, |
| 76 | + this.panelEl, |
| 77 | + 'qoderian-credits--open', |
| 78 | + ); |
| 79 | + this.buttonEl.addEventListener('click', this.handleButtonClick); |
| 80 | + |
| 81 | + this.snapshot = callbacks.getCachedUsage(); |
| 82 | + this.unsubscribeRuntimeStatus = callbacks.subscribeRuntimeStatus?.((status) => { |
| 83 | + this.snapshot = callbacks.getCachedUsage() ?? this.snapshot; |
| 84 | + this.updateButton(); |
| 85 | + this.renderPanel(); |
| 86 | + if (status.kind === 'ready' && !this.snapshot) void this.refresh(false); |
| 87 | + }) ?? null; |
| 88 | + |
| 89 | + this.updateButton(); |
| 90 | + this.renderPanel(); |
| 91 | + } |
| 92 | + |
| 93 | + destroy(): void { |
| 94 | + this.unsubscribeRuntimeStatus?.(); |
| 95 | + this.buttonEl.removeEventListener('click', this.handleButtonClick); |
| 96 | + this.popover.destroy(); |
| 97 | + this.container.remove(); |
| 98 | + } |
| 99 | + |
| 100 | + /** Fetches a fresh snapshot; cached snapshots within the TTL are kept. */ |
| 101 | + async refresh(force: boolean): Promise<void> { |
| 102 | + if (this.loading) return; |
| 103 | + if (!force && this.snapshot && Date.now() - this.fetchedAt < USAGE_CACHE_TTL_MS) return; |
| 104 | + |
| 105 | + this.loading = true; |
| 106 | + this.refreshBtnEl?.addClass('qoderian-credits-refresh--spinning'); |
| 107 | + try { |
| 108 | + const snapshot = await this.callbacks.fetchUsage(); |
| 109 | + if (snapshot) { |
| 110 | + this.snapshot = snapshot; |
| 111 | + this.fetchedAt = Date.now(); |
| 112 | + } |
| 113 | + } finally { |
| 114 | + this.loading = false; |
| 115 | + this.updateButton(); |
| 116 | + this.renderPanel(); |
| 117 | + } |
| 118 | + } |
| 119 | + |
| 120 | + private readonly handleButtonClick = (): void => { |
| 121 | + // ClickPopover's own handler runs first and flips aria-expanded. |
| 122 | + if (this.buttonEl.getAttribute('aria-expanded') === 'true') { |
| 123 | + void this.refresh(false); |
| 124 | + } |
| 125 | + }; |
| 126 | + |
| 127 | + private updateButton(): void { |
| 128 | + const percent = this.snapshot?.totalUsagePercentage; |
| 129 | + if (typeof percent === 'number') { |
| 130 | + this.buttonEl.setAttribute('title', t('credits.trigger', { percent: Math.round(percent) })); |
| 131 | + } else { |
| 132 | + this.buttonEl.setAttribute('title', t('credits.unavailable')); |
| 133 | + } |
| 134 | + } |
| 135 | + |
| 136 | + private renderPanel(): void { |
| 137 | + this.panelEl.empty(); |
| 138 | + |
| 139 | + const header = this.panelEl.createDiv({ cls: 'qoderian-credits-header' }); |
| 140 | + header.createSpan({ cls: 'qoderian-credits-title', text: t('credits.title') }); |
| 141 | + const actions = header.createDiv({ cls: 'qoderian-credits-header-actions' }); |
| 142 | + actions.createEl('a', { |
| 143 | + cls: 'qoderian-credits-details-link', |
| 144 | + text: t('credits.viewDetails'), |
| 145 | + attr: { href: getQoderAccountUsageUrl() }, |
| 146 | + }); |
| 147 | + this.refreshBtnEl = actions.createDiv({ cls: 'qoderian-credits-refresh' }); |
| 148 | + setIcon(this.refreshBtnEl, 'refresh-cw'); |
| 149 | + this.refreshBtnEl.setAttribute('role', 'button'); |
| 150 | + this.refreshBtnEl.setAttribute('tabindex', '0'); |
| 151 | + this.refreshBtnEl.setAttribute('aria-label', t('common.refresh')); |
| 152 | + if (this.loading) this.refreshBtnEl.addClass('qoderian-credits-refresh--spinning'); |
| 153 | + this.refreshBtnEl.addEventListener('click', (event) => { |
| 154 | + event.stopPropagation(); |
| 155 | + void this.refresh(true); |
| 156 | + }); |
| 157 | + |
| 158 | + if (!this.snapshot) { |
| 159 | + this.panelEl.createDiv({ cls: 'qoderian-credits-empty', text: t('credits.unavailable') }); |
| 160 | + return; |
| 161 | + } |
| 162 | + |
| 163 | + if (this.snapshot.userQuota) { |
| 164 | + const tier = describeUserTier(this.snapshot.userType); |
| 165 | + this.renderQuotaSection(this.snapshot.userQuota, { |
| 166 | + title: t('credits.planCredits'), |
| 167 | + ...(tier ? { badge: tier.text, badgePlain: tier.plain } : {}), |
| 168 | + ...(typeof this.snapshot.expiresAt === 'number' && !isSentinelExpiry(this.snapshot.expiresAt) |
| 169 | + ? { trailing: t('credits.renewsOn', { date: formatRenewalDate(this.snapshot.expiresAt) }) } |
| 170 | + : {}), |
| 171 | + }); |
| 172 | + } |
| 173 | + if (this.snapshot.addOnQuota && hasQuotaNumbers(this.snapshot.addOnQuota)) { |
| 174 | + this.renderQuotaSection(this.snapshot.addOnQuota, { title: t('credits.addOnCredits') }); |
| 175 | + } |
| 176 | + const orgPackage = this.snapshot.orgResourcePackage; |
| 177 | + if (orgPackage?.available && hasQuotaNumbers(orgPackage)) { |
| 178 | + this.renderQuotaSection({ |
| 179 | + total: orgPackage.cap, |
| 180 | + used: orgPackage.used, |
| 181 | + remaining: orgPackage.remaining, |
| 182 | + percentage: orgPackage.percentage, |
| 183 | + }, { title: t('credits.resourcePackage') }); |
| 184 | + } |
| 185 | + } |
| 186 | + |
| 187 | + private renderQuotaSection( |
| 188 | + quota: CreditsUsageQuota, |
| 189 | + options: { title: string; badge?: string; badgePlain?: boolean; trailing?: string }, |
| 190 | + ): void { |
| 191 | + const section = this.panelEl.createDiv({ cls: 'qoderian-credits-section' }); |
| 192 | + |
| 193 | + const head = section.createDiv({ cls: 'qoderian-credits-section-head' }); |
| 194 | + const titleWrap = head.createDiv({ cls: 'qoderian-credits-section-title-wrap' }); |
| 195 | + titleWrap.createSpan({ cls: 'qoderian-credits-section-title', text: options.title }); |
| 196 | + if (options.badge) { |
| 197 | + const badge = titleWrap.createSpan({ cls: 'qoderian-credits-badge', text: options.badge }); |
| 198 | + if (options.badgePlain) badge.addClass('qoderian-credits-badge--plain'); |
| 199 | + } |
| 200 | + if (options.trailing) { |
| 201 | + head.createSpan({ cls: 'qoderian-credits-trailing', text: options.trailing }); |
| 202 | + } |
| 203 | + |
| 204 | + const percent = clampPercent(quota); |
| 205 | + const bar = section.createDiv({ cls: 'qoderian-credits-bar' }); |
| 206 | + const fill = bar.createDiv({ cls: 'qoderian-credits-bar-fill' }); |
| 207 | + fill.style.width = `${percent}%`; |
| 208 | + |
| 209 | + const numbers = section.createDiv({ cls: 'qoderian-credits-numbers' }); |
| 210 | + const usageNums = numbers.createDiv({ cls: 'qoderian-credits-usage-nums' }); |
| 211 | + usageNums.createSpan({ cls: 'qoderian-credits-used-num', text: formatCount(quota.used) }); |
| 212 | + usageNums.createSpan({ |
| 213 | + cls: 'qoderian-credits-total-num', |
| 214 | + text: ` / ${formatCount(quota.total)} `, |
| 215 | + }); |
| 216 | + usageNums.createSpan({ |
| 217 | + cls: 'qoderian-credits-used-percent', |
| 218 | + text: `(${t('credits.usedPercent', { percent })})`, |
| 219 | + }); |
| 220 | + numbers.createSpan({ |
| 221 | + cls: 'qoderian-credits-left', |
| 222 | + text: t('credits.left', { count: formatCount(quota.remaining) }), |
| 223 | + }); |
| 224 | + } |
| 225 | +} |
| 226 | + |
| 227 | +function hasQuotaNumbers(quota: CreditsUsageQuota): boolean { |
| 228 | + return typeof quota.total === 'number' || typeof quota.used === 'number'; |
| 229 | +} |
| 230 | + |
| 231 | +function clampPercent(quota: CreditsUsageQuota): number { |
| 232 | + const derived = typeof quota.total === 'number' && quota.total > 0 |
| 233 | + ? ((quota.used ?? 0) / quota.total) * 100 |
| 234 | + : 0; |
| 235 | + const percent = Math.round(quota.percentage ?? derived); |
| 236 | + return Math.min(100, Math.max(0, percent)); |
| 237 | +} |
0 commit comments