Read Claude Code usage from local session logs, redesign panel as separate cards
This commit is contained in:
+12
-12
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user