Read Claude Code usage from local session logs, redesign panel as separate cards

This commit is contained in:
2026-07-27 11:54:11 -04:00
parent c68e8c38cb
commit 9b839ffaf1
5 changed files with 47 additions and 65 deletions
+12 -12
View File
@@ -5,18 +5,18 @@ import { shell } from "../lib/utils"
type ClaudeUsage = {
available: boolean
tokens: number
costUsd: number
messages: number
}
const usage = createPoll<ClaudeUsage>(
{ available: false, tokens: 0, costUsd: 0 },
{ available: false, tokens: 0, messages: 0 },
60000,
shell("bash $HOME/.config/ags/lib/claude-usage.sh"),
(stdout) => {
try {
return JSON.parse(stdout.trim())
} catch {
return { available: false, tokens: 0, costUsd: 0 }
return { available: false, tokens: 0, messages: 0 }
}
},
)
@@ -29,26 +29,26 @@ function formatTokens(tokens: number) {
export function ClaudeUsageCard() {
return (
<box class="side-card" vertical spacing={6}>
<box class="panel widget-card" vertical spacing={6}>
<box spacing={8}>
<label class="side-card-icon" label={""} />
<label class="side-card-title" label="Claude Code" xalign={0} halign={Gtk.Align.START} hexpand />
<label class="widget-card-icon" label={""} />
<label class="widget-card-title" label="Claude Code" xalign={0} halign={Gtk.Align.START} hexpand />
</box>
<label
class="side-card-empty"
label="No admin key set"
class="widget-card-empty"
label="No usage logs found"
xalign={0}
halign={Gtk.Align.START}
visible={usage.as((u) => !u.available)}
/>
<box vertical spacing={4} visible={usage.as((u) => u.available)}>
<box spacing={8}>
<label class="side-card-label" label="Tokens today" xalign={0} halign={Gtk.Align.START} hexpand />
<label class="side-card-value" label={usage.as((u) => formatTokens(u.tokens))} />
<label class="widget-card-label" label="Tokens today" xalign={0} halign={Gtk.Align.START} hexpand />
<label class="widget-card-value" label={usage.as((u) => formatTokens(u.tokens))} />
</box>
<box spacing={8}>
<label class="side-card-label" label="Cost today" xalign={0} halign={Gtk.Align.START} hexpand />
<label class="side-card-value" label={usage.as((u) => `$${u.costUsd.toFixed(2)}`)} />
<label class="widget-card-label" label="Messages today" xalign={0} halign={Gtk.Align.START} hexpand />
<label class="widget-card-value" label={usage.as((u) => `${u.messages}`)} />
</box>
</box>
</box>