@cad0p/pi-usage 0.11.3 → 0.11.4

package/omarchy/cad0p.pi-usage/UsageContent.qml

@@ -0,0 +1,1001 @@
+import QtQuick
+import QtQuick.Controls
+import qs.Commons
+import qs.Ui
+import "UsageLogic.js" as Logic
+
+// The scrolling body of the AI Usage panel: one collapsible section per
+// provider, all in one list. Panel.qml mounts it inside the bar popup; the
+// dev harness mounts it in a plain window.
+//
+// The rows (LimitRow, Meter, DayRow, ModelRow) and every type size, color
+// and spacing are carried over from Omarchy's built-in Agents panel
+// (plugins/agents/Panel.qml, MIT, by Omarchy), so an expanded section reads
+// exactly like one of its tabs.
+Item {
+  id: root
+
+  // Main.qml, or anything with the same providers / expandedOverrides /
+  // setExpanded / newestUpdate / refreshing surface.
+  property var usage: null
+  property color foreground: Color.foreground
+  property color urgent: Color.urgent
+  property string fontFamily: Style.font.family
+  property double nowMs: Date.now()
+  // Stand-in mark for a provider that ships no SVG: the bar glyph.
+  property string fallbackGlyph: "󱚣"
+
+  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 bool lightSurface: colorLuminance(surface) >= 0.5
+
+  readonly property var providers: usage ? usage.providers : []
+  readonly property var overrides: usage ? usage.expandedOverrides : ({})
+  readonly property string defaultExpanded: Logic.defaultExpandedId(providers)
+
+  // Keyboard cursor over the section headers. It follows the provider, not
+  // the slot, so a record that lands while the panel is open does not move
+  // it underneath you.
+  property bool cursorActive: false
+  property string cursorId: ""
+  readonly property int cursorIndex: {
+    for (var i = 0; i < providers.length; i++) if (providers[i].providerId === cursorId) return i
+    return 0
+  }
+
+  readonly property real contentImplicitHeight: column.implicitHeight
+  readonly property alias flick: panelFlick
+
+  implicitHeight: column.implicitHeight
+
+  function alpha(c, a) { return Qt.rgba(c.r, c.g, c.b, a) }
+
+  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)
+  }
+
+  function expanded(id) { return Logic.isExpanded(id, overrides, defaultExpanded) }
+
+  function setExpanded(id, value) {
+    if (usage) usage.setExpanded(id, value)
+  }
+
+  function toggle(id) { setExpanded(id, !expanded(id)) }
+
+  function sectionItem(index) { return sectionRepeater.itemAt(index) }
+
+  function resetView() {
+    cursorActive = false
+    cursorId = providers.length > 0 ? providers[0].providerId : ""
+    panelFlick.contentY = 0
+  }
+
+  // ------------------------------------------------------------- keyboard
+
+  function maxScroll() { return Math.max(0, panelFlick.contentHeight - panelFlick.height) }
+
+  function scrollTo(y) { panelFlick.contentY = Logic.clamp(y, 0, maxScroll()) }
+
+  function ensureVisible(item) {
+    if (!item) return
+    var margin = Style.space(6)
+    var top = item.mapToItem(column, 0, 0).y
+    var bottom = top + item.height
+    if (top < panelFlick.contentY + margin) scrollTo(top - margin)
+    else if (bottom > panelFlick.contentY + panelFlick.height - margin) scrollTo(bottom + margin - panelFlick.height)
+  }
+
+  // j/k walk the headers. An open section taller than the viewport is paged
+  // through first, so nothing in it is skipped on the way to the next one.
+  function moveCursor(dy) {
+    if (providers.length === 0) return
+    if (!cursorActive) {
+      cursorActive = true
+      if (cursorId === "") cursorId = providers[0].providerId
+      ensureVisible(sectionItem(cursorIndex) ? sectionItem(cursorIndex).header : null)
+      return
+    }
+    var step = Style.space(56)
+    var current = sectionItem(cursorIndex)
+    if (current && expanded(providers[cursorIndex].providerId)) {
+      var top = current.mapToItem(column, 0, 0).y
+      var bottom = top + current.height
+      if (dy > 0 && bottom > panelFlick.contentY + panelFlick.height + 1 && panelFlick.contentY < maxScroll()) {
+        scrollTo(panelFlick.contentY + step)
+        return
+      }
+      if (dy < 0 && top < panelFlick.contentY - 1) {
+        scrollTo(panelFlick.contentY - step)
+        return
+      }
+    }
+    var next = Logic.clamp(cursorIndex + dy, 0, providers.length - 1)
+    if (next === cursorIndex) {
+      scrollTo(panelFlick.contentY + dy * step)
+      return
+    }
+    cursorId = providers[next].providerId
+    var section = sectionItem(next)
+    if (section) ensureVisible(section.header)
+  }
+
+  function toggleCursor() {
+    if (providers.length === 0) return
+    cursorActive = true
+    var id = providers[cursorIndex].providerId
+    if (cursorId === "") cursorId = id
+    toggle(id)
+    Qt.callLater(function() {
+      var section = sectionItem(cursorIndex)
+      if (section) ensureVisible(section.header)
+    })
+  }
+
+  function setCursorExpanded(value) {
+    if (providers.length === 0) return
+    cursorActive = true
+    var id = providers[cursorIndex].providerId
+    if (cursorId === "") cursorId = id
+    setExpanded(id, value)
+  }
+
+  function footerText() {
+    if (usage && usage.refreshing) return "Refreshing…"
+    var at = usage ? String(usage.newestUpdate || "") : ""
+    if (at === "") return ""
+    var ms = new Date(at).getTime()
+    if (!isFinite(ms)) return ""
+    var age = root.nowMs - ms
+    return age < 60000 ? "Updated just now" : "Updated " + Logic.compactDuration(age) + " ago"
+  }
+
+  // ---------------------------------------------------------------- list
+
+  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(8)
+
+      Text {
+        visible: root.providers.length === 0
+        width: parent.width
+        topPadding: Style.space(24)
+        bottomPadding: Style.space(24)
+        text: "No AI usage records found.\nRun piquota omarchy, or use an agent once."
+        color: root.dim
+        font.family: root.fontFamily
+        font.pixelSize: Style.font.body
+        horizontalAlignment: Text.AlignHCenter
+        wrapMode: Text.WordWrap
+      }
+
+      Repeater {
+        id: sectionRepeater
+        model: root.providers
+
+        ProviderSection {
+          required property var modelData
+          required property int index
+          width: column.width
+          provider: modelData
+          sectionIndex: index
+          isLast: index === root.providers.length - 1
+        }
+      }
+
+      Text {
+        textFormat: Text.PlainText
+        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
+      }
+    }
+  }
+
+  // ------------------------------------------------------------ section
+
+  component ProviderSection: Column {
+    id: section
+    property var provider: null
+    property int sectionIndex: 0
+    property bool isLast: false
+    property alias header: headerSurface
+
+    readonly property bool open: !!provider && root.expanded(provider.providerId)
+    readonly property var head: Logic.headline(provider)
+    readonly property var limitList: provider && (!provider.accounts || provider.accounts.length === 0)
+      ? Logic.limitWindows(provider.limits) : []
+    readonly property var accountList: Logic.accountRows(provider)
+    readonly property var balance: provider ? provider.balance : null
+    readonly property bool balanceAlarming: Logic.balanceAlarming(balance)
+    readonly property var models: Logic.modelRows(provider)
+    readonly property bool hasDays: Logic.hasDays(provider)
+
+    spacing: Style.space(12)
+
+    // ---------- Header: mark · name · plan · headline ----------
+    CursorSurface {
+      id: headerSurface
+      width: parent.width
+      hasCursor: root.cursorActive && root.cursorIndex === section.sectionIndex
+      foreground: root.foreground
+      implicitHeight: headerContent.implicitHeight + Style.spacing.lg * 2
+
+      MouseArea {
+        anchors.fill: parent
+        hoverEnabled: true
+        cursorShape: Qt.PointingHandCursor
+        onEntered: {
+          root.cursorActive = true
+          root.cursorId = section.provider.providerId
+        }
+        onClicked: {
+          root.cursorId = section.provider.providerId
+          root.toggle(section.provider.providerId)
+        }
+      }
+
+      Item {
+        id: headerContent
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.leftMargin: Style.space(8)
+        anchors.rightMargin: Style.space(8)
+        implicitHeight: Math.max(mark.height, labels.implicitHeight, trailing.implicitHeight)
+
+        Mark {
+          id: mark
+          providerId: section.provider ? section.provider.providerId : ""
+          size: Style.font.display
+          anchors.left: parent.left
+          anchors.verticalCenter: parent.verticalCenter
+        }
+
+        Column {
+          id: labels
+          anchors.left: mark.right
+          anchors.leftMargin: Style.space(14)
+          anchors.right: trailing.left
+          anchors.rightMargin: Style.space(10)
+          anchors.verticalCenter: parent.verticalCenter
+          spacing: Style.space(2)
+
+          Row {
+            width: parent.width
+            spacing: Style.space(8)
+
+            Text {
+              id: nameText
+              textFormat: Text.PlainText
+              text: section.provider ? section.provider.providerName : ""
+              width: Math.min(implicitWidth, parent.width - (chip.visible ? chip.width + parent.spacing : 0))
+              color: root.foreground
+              font.family: root.fontFamily
+              font.pixelSize: Style.font.title
+              font.bold: true
+              elide: Text.ElideRight
+              anchors.verticalCenter: parent.verticalCenter
+            }
+
+            BorderSurface {
+              id: chip
+              readonly property string label: Logic.statusChip(section.provider)
+              visible: label !== ""
+              width: chipText.implicitWidth + Style.space(10)
+              height: chipText.implicitHeight + Style.space(2)
+              anchors.verticalCenter: parent.verticalCenter
+              color: root.alpha(root.urgent, 0.10)
+              borderSpec: Border.flat(root.alpha(root.urgent, 0.35), 1)
+              radius: Style.cornerRadius
+
+              Text {
+                id: chipText
+                textFormat: Text.PlainText
+                anchors.centerIn: parent
+                text: chip.label
+                color: root.urgent
+                font.family: root.fontFamily
+                font.pixelSize: Style.font.caption
+                font.bold: true
+              }
+            }
+          }
+
+          Text {
+            textFormat: Text.PlainText
+            width: parent.width
+            text: Logic.headerMeta(section.provider).toUpperCase()
+            visible: text !== ""
+            color: root.dim
+            font.family: root.fontFamily
+            font.pixelSize: Style.font.caption
+            font.bold: true
+            font.letterSpacing: 1.2
+            elide: Text.ElideRight
+          }
+        }
+
+        Row {
+          id: trailing
+          anchors.right: parent.right
+          anchors.verticalCenter: parent.verticalCenter
+          spacing: Style.space(10)
+
+          Column {
+            visible: !!section.head
+            anchors.verticalCenter: parent.verticalCenter
+            spacing: Style.space(2)
+
+            Text {
+              textFormat: Text.PlainText
+              anchors.right: parent.right
+              text: section.head ? Math.round(section.head.percent * 100) + "%" : ""
+              color: section.head && section.head.percent >= 0.9 ? root.urgent : root.foreground
+              font.family: root.fontFamily
+              font.pixelSize: Style.font.title
+              font.bold: true
+            }
+
+            Text {
+              textFormat: Text.PlainText
+              anchors.right: parent.right
+              text: {
+                if (!section.head) return ""
+                var ms = Logic.resetMs(section.head, root.nowMs)
+                return section.head.title + (ms > 0 ? " · " + Logic.compactDuration(ms) : "")
+              }
+              color: root.dim
+              font.family: root.fontFamily
+              font.pixelSize: Style.font.caption
+            }
+          }
+
+          Text {
+            textFormat: Text.PlainText
+            anchors.verticalCenter: parent.verticalCenter
+            text: section.open ? "󰅀" : "󰅂"
+            color: root.dim
+            font.family: root.fontFamily
+            font.pixelSize: Style.font.icon
+          }
+        }
+      }
+    }
+
+    // A folded section still shows how full its headline window is.
+    Meter {
+      visible: !section.open && !!section.head
+      width: parent.width
+      value: section.head ? section.head.percent : -1
+      alarming: !!section.head && section.head.percent >= 0.9
+    }
+
+    // ---------- Body: the built-in tab, section by section ----------
+    Column {
+      id: body
+      visible: section.open
+      width: parent.width
+      spacing: Style.space(14)
+
+      // Status
+      BorderSurface {
+        visible: !!section.provider && section.provider.usageStatusText !== "" && section.provider.authHelpText !== ""
+        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
+          textFormat: Text.PlainText
+          anchors.left: parent.left
+          anchors.right: parent.right
+          anchors.verticalCenter: parent.verticalCenter
+          anchors.leftMargin: Style.space(12)
+          anchors.rightMargin: Style.space(12)
+          text: section.provider
+            ? (section.provider.ready ? section.provider.usageStatusText + ": " : "") + section.provider.authHelpText
+            : ""
+          color: root.dim
+          font.family: root.fontFamily
+          font.pixelSize: Style.font.caption
+          wrapMode: Text.WordWrap
+        }
+      }
+
+      // Balance
+      Column {
+        visible: !!section.balance
+        width: parent.width
+        spacing: Style.space(10)
+
+        readonly property real ratio: section.balance && section.balance.funded > 0
+          ? Logic.clamp(section.balance.remaining / section.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
+            textFormat: Text.PlainText
+            text: section.balance ? Logic.formatMoney(section.balance.remaining, section.balance.currency) : ""
+            color: section.balanceAlarming ? root.urgent : root.foreground
+            font.family: root.fontFamily
+            font.pixelSize: Style.font.caption
+            anchors.right: parent.right
+            anchors.verticalCenter: parent.verticalCenter
+          }
+        }
+
+        Meter {
+          visible: parent.ratio >= 0
+          width: parent.width
+          value: parent.ratio
+          alarming: section.balanceAlarming
+        }
+
+        Text {
+          textFormat: Text.PlainText
+          visible: text !== ""
+          width: parent.width
+          text: Logic.balanceDetailText(section.balance)
+          color: root.dim
+          font.family: root.fontFamily
+          font.pixelSize: Style.font.caption
+        }
+      }
+
+      // Limits (single account)
+      Column {
+        id: limitsSection
+        visible: section.limitList.length > 0
+        width: parent.width
+        spacing: Style.space(10)
+
+        PanelSectionHeader {
+          text: "LIMITS"
+          foreground: root.foreground
+          fontFamily: root.fontFamily
+        }
+
+        Repeater {
+          model: section.limitList
+
+          LimitRow {
+            required property var modelData
+            width: limitsSection.width
+            window: modelData
+          }
+        }
+      }
+
+      // Accounts (multi-account): one row per account, every window
+      Column {
+        id: accountsSection
+        visible: section.accountList.length > 0
+        width: parent.width
+        spacing: Style.space(10)
+
+        PanelSectionHeader {
+          text: "ACCOUNTS"
+          foreground: root.foreground
+          fontFamily: root.fontFamily
+        }
+
+        Repeater {
+          model: section.accountList
+
+          AccountRow {
+            required property var modelData
+            width: accountsSection.width
+            account: modelData
+          }
+        }
+      }
+
+      // Tokens by day
+      Column {
+        id: usageSection
+        visible: section.hasDays
+        width: parent.width
+        spacing: Style.spacing.md
+
+        readonly property var days: section.provider ? Logic.recentDayRows(section.provider) : []
+        readonly property real peak: Math.max(1, Logic.weekPeak(section.provider))
+
+        PanelSectionHeader {
+          width: parent.width
+          text: "TOKENS BY DAY"
+          foreground: root.foreground
+          fontFamily: root.fontFamily
+        }
+
+        Repeater {
+          model: usageSection.days
+
+          DayRow {
+            required property var modelData
+            width: usageSection.width
+            day: modelData
+            provider: section.provider
+            ratio: Number(modelData.messageCount || 0) / usageSection.peak
+            today: String(modelData.date || "") === Logic.todayDate(root.nowMs)
+          }
+        }
+      }
+
+      // Tokens by model
+      Column {
+        id: modelSection
+        visible: section.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: section.models
+
+          ModelRow {
+            required property var modelData
+            width: modelSection.width
+            row: modelData
+            share: modelData.total / Math.max(1, section.models[0].total)
+          }
+        }
+      }
+
+      Item { width: 1; height: Style.space(2) }
+    }
+
+    PanelSeparator {
+      visible: !section.isLast
+      foreground: root.foreground
+    }
+  }
+
+  // Provider mark: assets/<id>.svg, then the family without the pi- prefix,
+  // each with a -light twin first on light surfaces; the bar glyph otherwise.
+  component Mark: Item {
+    id: markItem
+    property string providerId: ""
+    property real size: Style.font.display
+    property var candidates: Logic.iconCandidates(providerId, root.lightSurface)
+    // Restart the fallback walk only when the URLs change: re-pointing source
+    // at a URL whose load already failed emits no statusChanged.
+    property string candidatesKey: candidates.join("\n")
+    property int candidateIndex: 0
+    onCandidatesKeyChanged: candidateIndex = 0
+
+    width: size
+    height: size
+
+    Image {
+      id: markImage
+      anchors.fill: parent
+      source: markItem.candidateIndex < markItem.candidates.length ? Qt.resolvedUrl(markItem.candidates[markItem.candidateIndex]) : ""
+      sourceSize.width: markItem.size * 2
+      sourceSize.height: markItem.size * 2
+      fillMode: Image.PreserveAspectFit
+      onStatusChanged: if (status === Image.Error && markItem.candidateIndex < markItem.candidates.length)
+        Qt.callLater(function() { markItem.candidateIndex++ })
+    }
+
+    Text {
+      textFormat: Text.PlainText
+      anchors.centerIn: parent
+      visible: markImage.status !== Image.Ready
+      text: root.fallbackGlyph
+      color: root.foreground
+      font.family: root.fontFamily
+      font.pixelSize: markItem.size
+    }
+  }
+
+  // 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
+        textFormat: Text.PlainText
+        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
+        textFormat: Text.PlainText
+        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 {
+      textFormat: Text.PlainText
+      width: parent.width
+      text: {
+        var remainingMs = Logic.resetMs(limitRow.window, root.nowMs)
+        return remainingMs > 0 ? "Resets in " + Logic.formatDuration(remainingMs) : ""
+      }
+      color: root.dim
+      font.family: root.fontFamily
+      font.pixelSize: Style.font.caption
+    }
+  }
+
+  // One account of a multi-account provider: its slot, then every window as
+  // a column of tag, percentage, reset and a mini meter, aligned across rows
+  // like a table. A failed account is dimmed and says why.
+  component AccountRow: Item {
+    id: accountRow
+    property var account: null
+
+    readonly property var windows: account ? account.windows : []
+    readonly property bool ok: !!account && account.ok
+    readonly property real columnGap: Style.space(12)
+
+    implicitHeight: Math.max(slotText.implicitHeight, ok && windows.length > 0 ? windowColumns.implicitHeight : statusLine.implicitHeight)
+    opacity: ok ? 1 : 0.55
+
+    Text {
+      id: slotText
+      textFormat: Text.PlainText
+      text: accountRow.account ? accountRow.account.id : ""
+      color: root.foreground
+      font.family: root.fontFamily
+      font.pixelSize: Style.font.bodySmall
+      font.bold: true
+      width: Style.space(30)
+      anchors.left: parent.left
+      anchors.top: parent.top
+    }
+
+    Row {
+      id: windowColumns
+      visible: accountRow.ok && accountRow.windows.length > 0
+      anchors.left: slotText.right
+      anchors.leftMargin: Style.space(6)
+      anchors.right: parent.right
+      anchors.top: parent.top
+      spacing: accountRow.columnGap
+
+      readonly property real cellWidth: accountRow.windows.length > 0
+        ? (width - spacing * (accountRow.windows.length - 1)) / accountRow.windows.length
+        : 0
+
+      Repeater {
+        model: accountRow.windows
+
+        Column {
+          id: cell
+          required property var modelData
+          readonly property bool alarming: modelData.percent >= 0.9
+          width: windowColumns.cellWidth
+          spacing: Style.space(4)
+
+          Item {
+            width: parent.width
+            implicitHeight: cellPercent.implicitHeight
+
+            Text {
+              id: cellTag
+              textFormat: Text.PlainText
+              anchors.left: parent.left
+              anchors.verticalCenter: parent.verticalCenter
+              width: Math.min(implicitWidth, Math.max(0, cellReset.x - cellPercent.implicitWidth - Style.space(8)))
+              elide: Text.ElideRight
+              text: Logic.windowTag(cell.modelData.title)
+              color: root.dim
+              font.family: root.fontFamily
+              font.pixelSize: Style.font.caption
+            }
+
+            Text {
+              id: cellPercent
+              textFormat: Text.PlainText
+              anchors.left: cellTag.right
+              anchors.leftMargin: Style.space(4)
+              anchors.verticalCenter: parent.verticalCenter
+              text: Math.round(cell.modelData.percent * 100) + "%"
+              color: cell.alarming ? root.urgent : root.foreground
+              font.family: root.fontFamily
+              font.pixelSize: Style.font.caption
+              font.bold: true
+            }
+
+            Text {
+              id: cellReset
+              textFormat: Text.PlainText
+              anchors.right: parent.right
+              text: {
+                var ms = Logic.resetMs(cell.modelData, root.nowMs)
+                return ms > 0 ? Logic.compactDuration(ms) : ""
+              }
+              color: root.dim
+              font.family: root.fontFamily
+              font.pixelSize: Style.font.caption
+            }
+          }
+
+          Meter {
+            width: parent.width
+            thickness: Math.max(Style.space(3), Math.round(Style.spacing.controlHeight * 0.1))
+            value: cell.modelData.percent
+            alarming: cell.alarming
+          }
+        }
+      }
+    }
+
+    Text {
+      id: statusLine
+      visible: !accountRow.ok || accountRow.windows.length === 0
+      textFormat: Text.PlainText
+      anchors.left: slotText.right
+      anchors.leftMargin: Style.space(6)
+      anchors.right: parent.right
+      anchors.verticalCenter: slotText.verticalCenter
+      text: accountRow.account && accountRow.account.status !== "" ? accountRow.account.status : "No usage windows"
+      color: root.dim
+      font.family: root.fontFamily
+      font.pixelSize: Style.font.caption
+      elide: Text.ElideRight
+    }
+  }
+
+  // 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 * Logic.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 var provider: null
+    property real ratio: 0
+    property bool today: false
+
+    implicitHeight: Math.max(dayLabel.implicitHeight, dayValue.implicitHeight) + Style.spacing.sm
+
+    Text {
+      id: dayLabel
+      textFormat: Text.PlainText
+      text: Logic.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 {
+      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 * Logic.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
+      textFormat: Text.PlainText
+      text: Logic.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: Logic.dayTooltip(dayRow.day, dayRow.today, dayRow.provider)
+      fontFamily: root.fontFamily
+    }
+  }
+
+  // Model rows read as a table: the share bar fills the row behind the label.
+  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 * Logic.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
+      textFormat: Text.PlainText
+      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
+      textFormat: Text.PlainText
+      text: modelRow.row ? Logic.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: Logic.modelTooltip(modelRow.row)
+      fontFamily: root.fontFamily
+    }
+  }
+}