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>
+12 -14
View File
@@ -313,12 +313,12 @@ const uptime = createPoll("", 60000, shell("uptime -p"), (stdout) =>
function UptimeCard() {
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="Uptime" xalign={0} halign={Gtk.Align.START} hexpand />
<label class="widget-card-icon" label={""} />
<label class="widget-card-title" label="Uptime" xalign={0} halign={Gtk.Align.START} hexpand />
</box>
<label class="side-card-value" label={uptime} xalign={0} halign={Gtk.Align.START} wrap />
<label class="widget-card-value" label={uptime} xalign={0} halign={Gtk.Align.START} wrap />
</box>
)
}
@@ -329,19 +329,19 @@ const weather = createPoll("Loading...", 600000, shell("omarchy-weather-status")
function WeatherCard() {
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="Weather" xalign={0} halign={Gtk.Align.START} hexpand />
<label class="widget-card-icon" label={""} />
<label class="widget-card-title" label="Weather" xalign={0} halign={Gtk.Align.START} hexpand />
</box>
<label class="side-card-value" label={weather} xalign={0} halign={Gtk.Align.START} wrap />
<label class="widget-card-value" label={weather} xalign={0} halign={Gtk.Align.START} wrap />
</box>
)
}
function LeftPanel() {
return (
<box class="qs-side-panel" vertical spacing={10}>
<box class="qs-side-panel" vertical spacing={12}>
<UptimeCard />
<WeatherCard />
</box>
@@ -350,7 +350,7 @@ function LeftPanel() {
function RightPanel() {
return (
<box class="qs-side-panel" vertical spacing={10}>
<box class="qs-side-panel" vertical spacing={12}>
<ClaudeUsageCard />
</box>
)
@@ -371,10 +371,9 @@ export default function QuickSettings() {
visible={false}
application={app}
>
<box class="panel quick-settings-shell" spacing={12}>
<box spacing={12}>
<LeftPanel />
<box class="qs-divider" vexpand />
<box class="quick-settings control-center" vertical spacing={12}>
<box class="panel quick-settings control-center" vertical spacing={12}>
<Header />
<CalendarSection />
<Toggles />
@@ -382,7 +381,6 @@ export default function QuickSettings() {
<BrightnessSlider />
<MediaPlayer />
</box>
<box class="qs-divider" vexpand />
<RightPanel />
</box>
</window>