Baseline: omarchy.agents as shipped
Panel.qml, Main.qml, Agent.qml and the provider assets exactly as they ship in omarchy-dev 4.0.0.r1744.gf002044 (shell/plugins/agents/), alongside the manifest `omarchy plugin clone` generates. Kept on its own branch so `git diff stock..master` shows precisely what this fork changes.
This commit is contained in:
@@ -0,0 +1,930 @@
|
||||
import QtQuick
|
||||
import QtQuick.Controls
|
||||
import Quickshell
|
||||
import Quickshell.Io
|
||||
import qs.Commons
|
||||
import qs.Ui
|
||||
|
||||
Panel {
|
||||
id: root
|
||||
moduleName: "omarchy.agents"
|
||||
ipcTarget: "omarchy.agents"
|
||||
manageIpc: false
|
||||
|
||||
readonly property color foreground: bar ? bar.foreground : Color.foreground
|
||||
readonly property color urgent: bar ? bar.urgent : Color.urgent
|
||||
readonly property color dim: Qt.darker(foreground, 1.55)
|
||||
readonly property color surface: Color.popups.background
|
||||
readonly property color track: Style.selectedFillFor(foreground, Color.accent)
|
||||
readonly property string fontFamily: bar ? bar.fontFamily : Style.font.family
|
||||
|
||||
readonly property var providers: usage.enabledProviders
|
||||
// The selection follows the provider, not the slot it happens to sit in: a
|
||||
// provider whose first scan lands while the panel is open would otherwise
|
||||
// shift the list underneath you and swap out what you were reading.
|
||||
property string selectedProviderId: ""
|
||||
readonly property int providerIndex: {
|
||||
for (var i = 0; i < providers.length; i++)
|
||||
if (providers[i].providerId === selectedProviderId) return i
|
||||
return 0
|
||||
}
|
||||
readonly property var provider: providers.length > 0 ? providers[providerIndex] : null
|
||||
|
||||
property bool cursorActive: false
|
||||
|
||||
// Countdowns and "updated" read this instead of Date.now() so the
|
||||
// panel keeps telling the truth while it sits open.
|
||||
property double nowMs: Date.now()
|
||||
|
||||
readonly property var limits: limitWindows(provider)
|
||||
readonly property var models: modelRows(provider)
|
||||
readonly property var headline: bindingWindow(provider)
|
||||
readonly property var balance: provider ? (provider.balance || null) : null
|
||||
// A prepaid account runs low the way a subscription window fills up: the
|
||||
// last 10% of the funded credits lights the same alarm.
|
||||
readonly property bool balanceAlarming: !!balance && balance.funded > 0
|
||||
&& balance.remaining / balance.funded <= 0.1
|
||||
readonly property bool alarming: (!!headline && headline.percent >= 0.9) || balanceAlarming
|
||||
|
||||
function clamp(v, lo, hi) { return Math.max(lo, Math.min(hi, v)) }
|
||||
function alpha(c, a) { return Qt.rgba(c.r, c.g, c.b, a) }
|
||||
|
||||
function selectProvider(index) {
|
||||
if (providers.length === 0) return
|
||||
var wrapped = ((index % providers.length) + providers.length) % providers.length
|
||||
selectedProviderId = providers[wrapped].providerId
|
||||
}
|
||||
|
||||
function refreshNow() {
|
||||
usage.refreshAll(true)
|
||||
}
|
||||
|
||||
function launchAgent() {
|
||||
if (root.bar) root.bar.run("omarchy-agent --pick")
|
||||
root.close()
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------- limits
|
||||
//
|
||||
// Both providers report the same two shapes: a short rolling session window
|
||||
// and a long weekly one. Everything below normalizes them into one record so
|
||||
// the meters and the hero speak a single language.
|
||||
|
||||
// Claude spells its windows out ("Session (5-hour)"), Codex abbreviates
|
||||
// them ("5h window", "30m window"). Both have to land on the same record.
|
||||
function windowIsLong(text) {
|
||||
return text.indexOf("week") >= 0 || text.indexOf("7-day") >= 0 || text.indexOf("seven") >= 0
|
||||
|| text.indexOf("month") >= 0 || text.indexOf("30-day") >= 0
|
||||
}
|
||||
|
||||
function windowSpanMs(label) {
|
||||
var text = String(label || "").toLowerCase()
|
||||
if (text.indexOf("month") >= 0 || text.indexOf("30-day") >= 0) return 30 * 24 * 3600 * 1000
|
||||
if (windowIsLong(text)) return 7 * 24 * 3600 * 1000
|
||||
var hours = text.match(/(\d+)\s*-?\s*h(?:our)?\b/)
|
||||
if (hours) return Number(hours[1]) * 3600 * 1000
|
||||
var minutes = text.match(/(\d+)\s*-?\s*m(?:in(?:ute)?s?)?\b/)
|
||||
if (minutes) return Number(minutes[1]) * 60 * 1000
|
||||
return 0
|
||||
}
|
||||
|
||||
function windowTitle(label) {
|
||||
var text = String(label || "").toLowerCase()
|
||||
if (text.indexOf("month") >= 0) return "Monthly"
|
||||
if (windowIsLong(text)) return "Weekly"
|
||||
if (text.indexOf("session") >= 0 || windowSpanMs(label) > 0) return "Session"
|
||||
var plain = String(label || "").replace(/\s*\(.*\)\s*/, "").trim()
|
||||
return plain === "" ? "Limit" : plain
|
||||
}
|
||||
|
||||
// A collector that already knows which window a limit belongs to says so,
|
||||
// and that beats reading it back out of the label: a model-scoped limit is
|
||||
// titled after its model, and a name like "Opus 5 (1M context)" would parse
|
||||
// as a one-minute window.
|
||||
function limitWindow(label, percent, resetAt, title) {
|
||||
return {
|
||||
title: String(title || "") !== "" ? String(title) : windowTitle(label),
|
||||
percent: Number(percent),
|
||||
resetAt: String(resetAt || "")
|
||||
}
|
||||
}
|
||||
|
||||
function limitWindows(p) {
|
||||
if (!p) return []
|
||||
var out = []
|
||||
var list = p.limits || []
|
||||
for (var i = 0; i < list.length; i++) {
|
||||
var entry = list[i] || {}
|
||||
var percent = Number(entry.percent)
|
||||
if (percent >= 0) out.push(limitWindow(entry.label, percent, entry.resetsAt, entry.title))
|
||||
}
|
||||
return out
|
||||
}
|
||||
|
||||
// The window that decides how much room is left — the fullest one, since
|
||||
// that is what stops the next prompt.
|
||||
function bindingWindow(p) {
|
||||
var windows = limitWindows(p)
|
||||
var best = null
|
||||
for (var i = 0; i < windows.length; i++) {
|
||||
if (!best || windows[i].percent > best.percent) best = windows[i]
|
||||
}
|
||||
return best
|
||||
}
|
||||
|
||||
function resetMsFor(w) {
|
||||
if (!w || w.resetAt === "") return -1
|
||||
var ms = new Date(w.resetAt).getTime()
|
||||
return isFinite(ms) ? ms - root.nowMs : -1
|
||||
}
|
||||
|
||||
function formatDuration(ms) {
|
||||
if (!(ms > 0)) return "now"
|
||||
var minutes = Math.floor(ms / 60000)
|
||||
var hours = Math.floor(minutes / 60)
|
||||
var days = Math.floor(hours / 24)
|
||||
if (days > 0) return days + "d " + (hours % 24) + "h"
|
||||
if (hours > 0) return hours + "h " + (minutes % 60) + "m"
|
||||
return Math.max(1, minutes) + "m"
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------- balance
|
||||
//
|
||||
// Prepaid agents report a credit ledger instead of rate-limit windows: the
|
||||
// record's balance object carries remaining, funded, and spent amounts.
|
||||
|
||||
function currencyPrefix(currency) {
|
||||
var code = String(currency || "USD").toUpperCase()
|
||||
if (code === "USD") return "$"
|
||||
if (code === "EUR") return "€"
|
||||
if (code === "GBP") return "£"
|
||||
return code + " "
|
||||
}
|
||||
|
||||
function formatMoney(value, currency) {
|
||||
var amount = Number(value)
|
||||
if (!isFinite(amount)) amount = 0
|
||||
return currencyPrefix(currency) + amount.toFixed(2)
|
||||
}
|
||||
|
||||
function balanceDetailText(b) {
|
||||
if (!b || !(b.funded > 0)) return ""
|
||||
var text = formatMoney(b.spent, b.currency) + " spent of " + formatMoney(b.funded, b.currency) + " funded"
|
||||
if (b.estimated) text += " · estimated"
|
||||
return text
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------- content
|
||||
|
||||
// The plan you pay for, under the name of the tool it pays for. Limits live
|
||||
// in their own section; the hero just says what this is.
|
||||
function heroMeta(p) {
|
||||
if (!p) return ""
|
||||
if (String(p.usageStatusText || "") !== "") return p.usageStatusText
|
||||
var tier = String(p.tierLabel || "")
|
||||
if (tier === "") return "Subscription"
|
||||
return tier.charAt(0).toUpperCase() + tier.slice(1)
|
||||
}
|
||||
|
||||
// Local calendar date, recomputed from nowMs so a panel left open across
|
||||
// midnight moves the "Today" row with the clock.
|
||||
function todayDate() {
|
||||
var now = new Date(root.nowMs)
|
||||
return now.getFullYear()
|
||||
+ "-" + String(now.getMonth() + 1).padStart(2, "0")
|
||||
+ "-" + String(now.getDate()).padStart(2, "0")
|
||||
}
|
||||
|
||||
function dayName(date) {
|
||||
var parsed = new Date(String(date || "") + "T00:00:00")
|
||||
if (isNaN(parsed.getTime())) return String(date || "")
|
||||
return ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"][parsed.getDay()]
|
||||
}
|
||||
|
||||
function dayLabel(date, today) {
|
||||
if (today) return "Today"
|
||||
return dayName(date)
|
||||
}
|
||||
|
||||
function dayTooltip(day, today) {
|
||||
if (!day) return ""
|
||||
var parsed = new Date(String(day.date) + "T00:00:00")
|
||||
var label = isNaN(parsed.getTime())
|
||||
? String(day.date)
|
||||
: dayName(day.date) + " " + (parsed.getMonth() + 1) + "/" + parsed.getDate()
|
||||
var text = label + " · " + usage.formatTokenCount(Number(day.messageCount || 0)) + " tokens"
|
||||
// Prompt and session counts only exist for today, so they ride along here
|
||||
// instead of taking a section of their own. Billing-API agents never
|
||||
// count prompts, and "0 prompts" would read as a quiet day, not a gap.
|
||||
if (today && provider && provider.hasPromptStats !== false)
|
||||
text += " · " + Number(provider.todayPrompts || 0) + " prompts · "
|
||||
+ Number(provider.todaySessions || 0) + " sessions"
|
||||
return text
|
||||
}
|
||||
|
||||
function weekPeak(p) {
|
||||
var days = p ? (p.recentDays || []) : []
|
||||
var peak = 0
|
||||
for (var i = 0; i < days.length; i++) peak = Math.max(peak, Number(days[i].messageCount || 0))
|
||||
return peak
|
||||
}
|
||||
|
||||
function modelRows(p) {
|
||||
var usageByModel = p ? (p.modelUsage || {}) : {}
|
||||
var rows = []
|
||||
for (var id in usageByModel) {
|
||||
var bucket = usageByModel[id] || {}
|
||||
var input = Number(bucket.inputTokens || 0)
|
||||
var output = Number(bucket.outputTokens || 0)
|
||||
var cacheRead = Number(bucket.cacheReadInputTokens || 0)
|
||||
var cacheWrite = Number(bucket.cacheCreationInputTokens || 0)
|
||||
rows.push({
|
||||
name: usage.friendlyModelName(id),
|
||||
total: input + output + cacheRead + cacheWrite,
|
||||
input: input,
|
||||
output: output,
|
||||
cacheRead: cacheRead,
|
||||
cacheWrite: cacheWrite
|
||||
})
|
||||
}
|
||||
rows.sort(function(a, b) { return b.total - a.total })
|
||||
return rows.slice(0, 4)
|
||||
}
|
||||
|
||||
function modelTooltip(row) {
|
||||
if (!row) return ""
|
||||
return "In " + usage.formatTokenCount(row.input)
|
||||
+ " · out " + usage.formatTokenCount(row.output)
|
||||
+ " · cache read " + usage.formatTokenCount(row.cacheRead)
|
||||
+ " · cache write " + usage.formatTokenCount(row.cacheWrite)
|
||||
}
|
||||
|
||||
// Only speaks up when the numbers cover more than this machine.
|
||||
function footerText() {
|
||||
if (usage.syncStatusText !== "") return usage.syncStatusText
|
||||
if (provider && provider.syncEnabled && provider.syncDeviceCount > 0)
|
||||
return "Merged from " + provider.syncDeviceCount + " device" + (provider.syncDeviceCount === 1 ? "" : "s")
|
||||
return ""
|
||||
}
|
||||
|
||||
// Agents that ship a white mark carry an `assets/<id>-light.svg` twin for
|
||||
// light surfaces; marks that work on both (Claude's brand-orange) ship one
|
||||
// file. The luminance check decides which candidate to try first.
|
||||
function colorChannelLuminance(value) {
|
||||
var channel = Number(value)
|
||||
if (!isFinite(channel)) return 0
|
||||
return channel <= 0.03928 ? channel / 12.92 : Math.pow((channel + 0.055) / 1.055, 2.4)
|
||||
}
|
||||
|
||||
function colorLuminance(color) {
|
||||
return 0.2126 * colorChannelLuminance(color.r)
|
||||
+ 0.7152 * colorChannelLuminance(color.g)
|
||||
+ 0.0722 * colorChannelLuminance(color.b)
|
||||
}
|
||||
|
||||
// Marks resolve by convention, so a new agent's data file needs nothing
|
||||
// from this panel: assets/<id>.svg if it ships one, the module's bar glyph
|
||||
// if it doesn't.
|
||||
function iconCandidatesForProvider(p, surfaceColor) {
|
||||
if (!p) return []
|
||||
var candidates = []
|
||||
if (colorLuminance(surfaceColor || Color.background) >= 0.5)
|
||||
candidates.push(Qt.resolvedUrl("assets/" + p.providerId + "-light.svg"))
|
||||
candidates.push(Qt.resolvedUrl("assets/" + p.providerId + ".svg"))
|
||||
return candidates
|
||||
}
|
||||
|
||||
// Nothing to report, nothing in the bar: Bar.qml collapses a slot whose item
|
||||
// is invisible, so the icon appears the moment the first scan finds usage and
|
||||
// stays away entirely on a machine that has never run either CLI.
|
||||
visible: providers.length > 0
|
||||
implicitWidth: button.implicitWidth
|
||||
implicitHeight: button.implicitHeight
|
||||
|
||||
onProviderIndexChanged: if (panelFlick) panelFlick.contentY = 0
|
||||
onOpenedChanged: if (opened) {
|
||||
cursorActive = false
|
||||
nowMs = Date.now()
|
||||
if (panelFlick) panelFlick.contentY = 0
|
||||
usage.refreshLimits()
|
||||
Qt.callLater(function() { keyCatcher.forceActiveFocus() })
|
||||
}
|
||||
|
||||
Main {
|
||||
id: usage
|
||||
settings: root.settings
|
||||
}
|
||||
|
||||
// Cheap enough to keep running: it only re-evaluates text bindings, and a
|
||||
// stale "resets in 2h" on a panel that is open is worse than a timer.
|
||||
Timer {
|
||||
interval: 30000
|
||||
running: root.opened
|
||||
repeat: true
|
||||
onTriggered: root.nowMs = Date.now()
|
||||
}
|
||||
|
||||
IpcHandler {
|
||||
target: root.ipcTarget
|
||||
function open(): void { root.open() }
|
||||
function close(): void { root.close() }
|
||||
function show(): void { root.open() }
|
||||
function hide(): void { root.close() }
|
||||
function toggle(): void { root.toggle() }
|
||||
function refresh(): string { root.refreshNow(); return "ok" }
|
||||
function next(): string { root.selectProvider(root.providerIndex + 1); return "ok" }
|
||||
}
|
||||
|
||||
BarIconButton {
|
||||
id: button
|
||||
anchors.fill: parent
|
||||
bar: root.bar
|
||||
text: ""
|
||||
active: root.alarming
|
||||
onPressed: function(buttonCode) {
|
||||
if (buttonCode === Qt.RightButton) root.launchAgent()
|
||||
else if (buttonCode === Qt.MiddleButton) root.selectProvider(root.providerIndex + 1)
|
||||
else root.toggle()
|
||||
}
|
||||
}
|
||||
|
||||
KeyboardPanel {
|
||||
id: panel
|
||||
anchorItem: button
|
||||
owner: root
|
||||
bar: root.bar
|
||||
open: root.opened
|
||||
focusTarget: keyCatcher
|
||||
contentWidth: panel.fittedContentWidth(Style.space(380))
|
||||
// Taller than the control panels on purpose: this one is a dashboard, and
|
||||
// the whole point is reading limits and history without scrolling.
|
||||
contentHeight: panel.fittedContentHeight(column.implicitHeight, Style.space(640))
|
||||
|
||||
PanelKeyCatcher {
|
||||
id: keyCatcher
|
||||
anchors.fill: parent
|
||||
|
||||
onMoveRequested: function(dx, dy) {
|
||||
if (dx !== 0) {
|
||||
root.cursorActive = true
|
||||
root.selectProvider(root.providerIndex + dx)
|
||||
}
|
||||
if (dy !== 0)
|
||||
panelFlick.contentY = root.clamp(panelFlick.contentY + dy * Style.space(56), 0,
|
||||
Math.max(0, panelFlick.contentHeight - panelFlick.height))
|
||||
}
|
||||
onActivateRequested: root.refreshNow()
|
||||
onCloseRequested: root.close()
|
||||
onTabRequested: function(direction) { root.switchPanel(direction) }
|
||||
onTextKey: function(t) { if (t === "r" || t === "R") root.refreshNow() }
|
||||
|
||||
Flickable {
|
||||
id: panelFlick
|
||||
anchors.fill: parent
|
||||
contentWidth: width
|
||||
contentHeight: column.implicitHeight
|
||||
clip: true
|
||||
boundsBehavior: Flickable.StopAtBounds
|
||||
flickableDirection: Flickable.VerticalFlick
|
||||
interactive: contentHeight > height
|
||||
ScrollBar.vertical: ScrollBar { policy: ScrollBar.AsNeeded }
|
||||
|
||||
Column {
|
||||
id: column
|
||||
width: panelFlick.width
|
||||
spacing: Style.space(12)
|
||||
|
||||
// ---------- Hero: provider mark · name · plan ----------
|
||||
PanelHero {
|
||||
id: hero
|
||||
visible: !!root.provider
|
||||
width: parent.width
|
||||
title: root.provider ? root.provider.providerName : ""
|
||||
meta: root.heroMeta(root.provider)
|
||||
foreground: root.foreground
|
||||
fontFamily: root.fontFamily
|
||||
|
||||
iconComponent: Component {
|
||||
Item {
|
||||
id: heroMark
|
||||
property var candidates: root.iconCandidatesForProvider(root.provider, root.surface)
|
||||
// Provider objects are rebuilt on every refresh, which churns the
|
||||
// array's identity without changing its content. Restart the fallback
|
||||
// walk only when the URLs change: re-pointing source at a URL whose
|
||||
// load already failed emits no statusChanged, so an identity-only
|
||||
// reset would strand the walker on a missing -light twin.
|
||||
property string candidatesKey: candidates.join("\n")
|
||||
property int candidateIndex: 0
|
||||
onCandidatesKeyChanged: candidateIndex = 0
|
||||
|
||||
width: Style.font.display
|
||||
height: Style.font.display
|
||||
|
||||
Image {
|
||||
id: heroMarkImage
|
||||
anchors.fill: parent
|
||||
source: heroMark.candidateIndex < heroMark.candidates.length ? heroMark.candidates[heroMark.candidateIndex] : ""
|
||||
sourceSize.width: Style.font.display * 2
|
||||
sourceSize.height: Style.font.display * 2
|
||||
fillMode: Image.PreserveAspectFit
|
||||
// Advancing source from inside its own status change trips the
|
||||
// binding-loop detector; defer the step one tick.
|
||||
onStatusChanged: if (status === Image.Error && heroMark.candidateIndex < heroMark.candidates.length)
|
||||
Qt.callLater(function() { heroMark.candidateIndex++ })
|
||||
}
|
||||
|
||||
Text {
|
||||
anchors.centerIn: parent
|
||||
visible: heroMarkImage.status !== Image.Ready
|
||||
text: button.text
|
||||
color: root.foreground
|
||||
font.family: root.fontFamily
|
||||
font.pixelSize: Style.font.display
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Text {
|
||||
visible: root.providers.length === 0
|
||||
width: parent.width
|
||||
topPadding: Style.space(24)
|
||||
text: "No AI coding subscriptions found.\nAgents show up here once you've used them."
|
||||
color: root.dim
|
||||
font.family: root.fontFamily
|
||||
font.pixelSize: Style.font.body
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
wrapMode: Text.WordWrap
|
||||
}
|
||||
|
||||
// ---------- Provider switch ----------
|
||||
Row {
|
||||
id: providerSwitch
|
||||
visible: root.providers.length > 1
|
||||
width: parent.width
|
||||
spacing: Style.spacing.md
|
||||
|
||||
readonly property real cellWidth: root.providers.length > 0
|
||||
? (width - spacing * (root.providers.length - 1)) / root.providers.length
|
||||
: 0
|
||||
|
||||
Repeater {
|
||||
model: root.providers
|
||||
|
||||
Button {
|
||||
required property var modelData
|
||||
required property int index
|
||||
|
||||
width: providerSwitch.cellWidth
|
||||
text: modelData.providerName
|
||||
selected: index === root.providerIndex
|
||||
hasCursor: root.cursorActive && index === root.providerIndex
|
||||
bordered: true
|
||||
foreground: root.foreground
|
||||
fontFamily: root.fontFamily
|
||||
fontSize: Style.font.bodySmall
|
||||
verticalPadding: Style.spacing.controlPaddingY
|
||||
onClicked: {
|
||||
root.cursorActive = true
|
||||
root.selectProvider(index)
|
||||
}
|
||||
onHovered: function(isHovered) { if (isHovered) root.cursorActive = true }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ---------- Status ----------
|
||||
BorderSurface {
|
||||
visible: !!root.provider && String(root.provider.usageStatusText || "") !== ""
|
||||
width: parent.width
|
||||
implicitHeight: statusText.implicitHeight + Style.spacing.xl * 2
|
||||
color: root.alpha(root.urgent, 0.10)
|
||||
borderSpec: Border.flat(root.alpha(root.urgent, 0.35), 1)
|
||||
radius: Style.cornerRadius
|
||||
|
||||
Text {
|
||||
id: statusText
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
anchors.leftMargin: Style.space(12)
|
||||
anchors.rightMargin: Style.space(12)
|
||||
text: root.provider ? String(root.provider.authHelpText || "") : ""
|
||||
color: root.dim
|
||||
font.family: root.fontFamily
|
||||
font.pixelSize: Style.font.caption
|
||||
wrapMode: Text.WordWrap
|
||||
}
|
||||
}
|
||||
|
||||
// ---------- Balance / limits ----------
|
||||
PanelSeparator {
|
||||
visible: balanceSection.visible || limitsSection.visible
|
||||
foreground: root.foreground
|
||||
}
|
||||
|
||||
Column {
|
||||
id: balanceSection
|
||||
visible: !!root.balance
|
||||
width: parent.width
|
||||
spacing: Style.space(10)
|
||||
|
||||
// The meter shows what is left, not what is used: a prepaid
|
||||
// account drains toward empty rather than filling toward a cap.
|
||||
readonly property real ratio: root.balance && root.balance.funded > 0
|
||||
? root.clamp(root.balance.remaining / root.balance.funded, 0, 1)
|
||||
: -1
|
||||
|
||||
PanelSectionHeader {
|
||||
width: parent.width
|
||||
text: "BALANCE"
|
||||
foreground: root.foreground
|
||||
fontFamily: root.fontFamily
|
||||
}
|
||||
|
||||
Item {
|
||||
width: parent.width
|
||||
implicitHeight: Math.max(balanceLabel.implicitHeight, balanceValue.implicitHeight)
|
||||
|
||||
Text {
|
||||
id: balanceLabel
|
||||
text: "Prepaid credits"
|
||||
color: root.foreground
|
||||
font.family: root.fontFamily
|
||||
font.pixelSize: Style.font.body
|
||||
anchors.left: parent.left
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
|
||||
Text {
|
||||
id: balanceValue
|
||||
text: root.balance ? root.formatMoney(root.balance.remaining, root.balance.currency) : ""
|
||||
color: root.balanceAlarming ? root.urgent : root.foreground
|
||||
font.family: root.fontFamily
|
||||
font.pixelSize: Style.font.caption
|
||||
anchors.right: parent.right
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
}
|
||||
|
||||
Meter {
|
||||
visible: balanceSection.ratio >= 0
|
||||
width: parent.width
|
||||
value: balanceSection.ratio
|
||||
alarming: root.balanceAlarming
|
||||
}
|
||||
|
||||
Text {
|
||||
visible: text !== ""
|
||||
width: parent.width
|
||||
text: root.balanceDetailText(root.balance)
|
||||
color: root.dim
|
||||
font.family: root.fontFamily
|
||||
font.pixelSize: Style.font.caption
|
||||
}
|
||||
}
|
||||
|
||||
Column {
|
||||
id: limitsSection
|
||||
visible: root.limits.length > 0
|
||||
width: parent.width
|
||||
spacing: Style.space(10)
|
||||
|
||||
PanelSectionHeader {
|
||||
text: "LIMITS"
|
||||
foreground: root.foreground
|
||||
fontFamily: root.fontFamily
|
||||
}
|
||||
|
||||
Repeater {
|
||||
model: root.limits
|
||||
|
||||
LimitRow {
|
||||
required property var modelData
|
||||
width: limitsSection.width
|
||||
window: modelData
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ---------- Usage ----------
|
||||
PanelSeparator {
|
||||
visible: usageSection.visible
|
||||
foreground: root.foreground
|
||||
}
|
||||
|
||||
Column {
|
||||
id: usageSection
|
||||
visible: !!root.provider && root.provider.recentDays && root.provider.recentDays.length > 0
|
||||
width: parent.width
|
||||
spacing: Style.spacing.md
|
||||
|
||||
readonly property var days: root.provider ? (root.provider.recentDays || []) : []
|
||||
readonly property real peak: Math.max(1, root.weekPeak(root.provider))
|
||||
|
||||
PanelSectionHeader {
|
||||
width: parent.width
|
||||
text: "TOKENS BY DAY"
|
||||
foreground: root.foreground
|
||||
fontFamily: root.fontFamily
|
||||
}
|
||||
|
||||
Repeater {
|
||||
model: usageSection.days
|
||||
|
||||
DayRow {
|
||||
required property var modelData
|
||||
required property int index
|
||||
|
||||
width: usageSection.width
|
||||
day: modelData
|
||||
ratio: Number(modelData.messageCount || 0) / usageSection.peak
|
||||
// By date, not by position: the Claude stats-cache fallback can
|
||||
// hand us a window that stops short of today.
|
||||
today: String(modelData.date || "") === root.todayDate()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ---------- Models ----------
|
||||
PanelSeparator {
|
||||
visible: modelSection.visible
|
||||
foreground: root.foreground
|
||||
}
|
||||
|
||||
Column {
|
||||
id: modelSection
|
||||
visible: root.models.length > 0
|
||||
width: parent.width
|
||||
spacing: Style.spacing.md
|
||||
|
||||
PanelSectionHeader {
|
||||
width: parent.width
|
||||
text: "TOKENS BY MODEL"
|
||||
foreground: root.foreground
|
||||
fontFamily: root.fontFamily
|
||||
}
|
||||
|
||||
Repeater {
|
||||
model: root.models
|
||||
|
||||
ModelRow {
|
||||
required property var modelData
|
||||
width: modelSection.width
|
||||
row: modelData
|
||||
// Scaled to the heaviest model, so the top row is always full —
|
||||
// the same scale-to-peak the weekly chart uses for its busiest day.
|
||||
share: modelData.total / Math.max(1, root.models[0].total)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Text {
|
||||
visible: text !== ""
|
||||
width: parent.width
|
||||
topPadding: Style.space(2)
|
||||
text: root.footerText()
|
||||
color: root.dim
|
||||
font.family: root.fontFamily
|
||||
font.pixelSize: Style.font.caption
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
elide: Text.ElideRight
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// A limit window: label and percentage, meter, and reset countdown.
|
||||
component LimitRow: Column {
|
||||
id: limitRow
|
||||
property var window: null
|
||||
|
||||
readonly property bool alarming: window && window.percent >= 0.9
|
||||
|
||||
spacing: Style.space(6)
|
||||
|
||||
Item {
|
||||
width: parent.width
|
||||
implicitHeight: Math.max(limitLabel.implicitHeight, limitValue.implicitHeight)
|
||||
|
||||
Text {
|
||||
id: limitLabel
|
||||
// A model-scoped window is titled after its model, and those names run
|
||||
// long enough to reach the percentage, so the title gives way first.
|
||||
text: limitRow.window ? limitRow.window.title : ""
|
||||
color: root.foreground
|
||||
font.family: root.fontFamily
|
||||
font.pixelSize: Style.font.body
|
||||
elide: Text.ElideRight
|
||||
anchors.left: parent.left
|
||||
anchors.right: limitValue.left
|
||||
anchors.rightMargin: Style.spacing.sm
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
|
||||
Text {
|
||||
id: limitValue
|
||||
text: limitRow.window && limitRow.window.percent >= 0
|
||||
? Math.round(limitRow.window.percent * 100) + "%"
|
||||
: "—"
|
||||
color: limitRow.alarming ? root.urgent : root.foreground
|
||||
font.family: root.fontFamily
|
||||
font.pixelSize: Style.font.caption
|
||||
anchors.right: parent.right
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
}
|
||||
|
||||
Meter {
|
||||
width: parent.width
|
||||
value: limitRow.window ? limitRow.window.percent : -1
|
||||
alarming: limitRow.alarming
|
||||
}
|
||||
|
||||
Text {
|
||||
id: resetText
|
||||
width: parent.width
|
||||
text: {
|
||||
var remainingMs = root.resetMsFor(limitRow.window)
|
||||
return remainingMs > 0 ? "Resets in " + root.formatDuration(remainingMs) : ""
|
||||
}
|
||||
color: root.dim
|
||||
font.family: root.fontFamily
|
||||
font.pixelSize: Style.font.caption
|
||||
}
|
||||
}
|
||||
|
||||
// Rounded track showing the percentage of the allowance used.
|
||||
component Meter: Item {
|
||||
id: meter
|
||||
property real value: -1
|
||||
property bool alarming: false
|
||||
property real thickness: Math.max(Style.space(4), Math.round(Style.spacing.controlHeight * 0.14))
|
||||
|
||||
implicitHeight: thickness
|
||||
|
||||
Rectangle {
|
||||
id: meterTrack
|
||||
anchors.fill: parent
|
||||
radius: height / 2
|
||||
color: root.track
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
anchors.left: meterTrack.left
|
||||
anchors.verticalCenter: meterTrack.verticalCenter
|
||||
height: meterTrack.height
|
||||
radius: meterTrack.radius
|
||||
width: meterTrack.width * root.clamp(meter.value, 0, 1)
|
||||
color: meter.alarming ? root.urgent : root.foreground
|
||||
|
||||
Behavior on width {
|
||||
NumberAnimation { duration: 160; easing.type: Easing.OutCubic }
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// One row per day: label, bar, tokens. Today is picked out in full
|
||||
// foreground so the week reads as a run-up to right now.
|
||||
component DayRow: Item {
|
||||
id: dayRow
|
||||
property var day: null
|
||||
property real ratio: 0
|
||||
property bool today: false
|
||||
|
||||
implicitHeight: Math.max(dayLabel.implicitHeight, dayValue.implicitHeight) + Style.spacing.sm
|
||||
|
||||
Text {
|
||||
id: dayLabel
|
||||
text: root.dayLabel(dayRow.day ? dayRow.day.date : "", dayRow.today)
|
||||
color: dayRow.today ? root.foreground : root.dim
|
||||
font.family: root.fontFamily
|
||||
font.pixelSize: Style.font.caption
|
||||
font.bold: dayRow.today
|
||||
anchors.left: parent.left
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
width: Style.space(52)
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
id: dayTrack
|
||||
anchors.left: dayLabel.right
|
||||
anchors.right: dayValue.left
|
||||
anchors.leftMargin: Style.space(8)
|
||||
anchors.rightMargin: Style.space(10)
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
height: Math.max(Style.space(4), Math.round(Style.spacing.controlHeight * 0.14))
|
||||
radius: height / 2
|
||||
color: root.track
|
||||
|
||||
Rectangle {
|
||||
anchors.left: parent.left
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
height: parent.height
|
||||
radius: parent.radius
|
||||
width: parent.width * root.clamp(dayRow.ratio, 0, 1)
|
||||
color: dayRow.today ? root.foreground : root.alpha(root.foreground, 0.55)
|
||||
|
||||
Behavior on width {
|
||||
NumberAnimation { duration: 160; easing.type: Easing.OutCubic }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Text {
|
||||
id: dayValue
|
||||
text: usage.formatTokenCount(dayRow.day ? Number(dayRow.day.messageCount || 0) : 0)
|
||||
color: dayRow.today ? root.foreground : root.dim
|
||||
font.family: root.fontFamily
|
||||
font.pixelSize: Style.font.caption
|
||||
font.bold: true
|
||||
horizontalAlignment: Text.AlignRight
|
||||
anchors.right: parent.right
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
width: Style.space(52)
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
id: dayHover
|
||||
anchors.fill: parent
|
||||
hoverEnabled: true
|
||||
acceptedButtons: Qt.NoButton
|
||||
}
|
||||
|
||||
PanelToolTip {
|
||||
visible: dayHover.containsMouse
|
||||
text: root.dayTooltip(dayRow.day, dayRow.today)
|
||||
fontFamily: root.fontFamily
|
||||
}
|
||||
}
|
||||
|
||||
// Model rows read as a table: the share bar fills the row behind the label
|
||||
// instead of stacking under it, which keeps the whole dashboard on one screen.
|
||||
component ModelRow: Item {
|
||||
id: modelRow
|
||||
property var row: null
|
||||
property real share: 0
|
||||
|
||||
implicitHeight: modelName.implicitHeight + Style.spacing.lg
|
||||
|
||||
Rectangle {
|
||||
anchors.fill: parent
|
||||
radius: Style.cornerRadius
|
||||
color: root.alpha(root.foreground, 0.05)
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
anchors.left: parent.left
|
||||
anchors.top: parent.top
|
||||
anchors.bottom: parent.bottom
|
||||
width: parent.width * root.clamp(modelRow.share, 0, 1)
|
||||
radius: Style.cornerRadius
|
||||
color: root.alpha(root.foreground, 0.14)
|
||||
|
||||
Behavior on width {
|
||||
NumberAnimation { duration: 160; easing.type: Easing.OutCubic }
|
||||
}
|
||||
}
|
||||
|
||||
Text {
|
||||
id: modelName
|
||||
text: modelRow.row ? modelRow.row.name : ""
|
||||
color: root.foreground
|
||||
font.family: root.fontFamily
|
||||
font.pixelSize: Style.font.bodySmall
|
||||
elide: Text.ElideRight
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: Style.space(8)
|
||||
anchors.right: modelTokens.left
|
||||
anchors.rightMargin: Style.space(8)
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
|
||||
Text {
|
||||
id: modelTokens
|
||||
text: modelRow.row ? usage.formatTokenCount(modelRow.row.total) : ""
|
||||
color: root.dim
|
||||
font.family: root.fontFamily
|
||||
font.pixelSize: Style.font.bodySmall
|
||||
font.bold: true
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: Style.space(8)
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
id: modelHover
|
||||
anchors.fill: parent
|
||||
hoverEnabled: true
|
||||
acceptedButtons: Qt.NoButton
|
||||
}
|
||||
|
||||
PanelToolTip {
|
||||
visible: modelHover.containsMouse
|
||||
text: root.modelTooltip(modelRow.row)
|
||||
fontFamily: root.fontFamily
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user