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

README.md

@@ -38,7 +38,7 @@ The installer automatically exposes scripts from the `scripts/` directory as glo
 - **`blob_glass [on|off|toggle]`**: A quick toggle to enable or disable window transparency on the fly.
 - **`blob_boot [path]`**: Safely updates your Plymouth boot splash image (defaults to `branding/boot_flash.png`) and rebuilds the `initramfs` (GRUB compatible via `mkinitcpio`).
 - **`blob_wifi`**: A streamlined script to connect to the GMU Eduroam Wi-Fi network using `iwd` and `systemd-resolved` (replaces NetworkManager).
-- **`blob_key <set|show|clear|list> [NAME] [VALUE]`**: Stores secrets/env values for widgets and services, e.g. `blob_key set ANTHROPIC_ADMIN_KEY sk-ant-admin01-...` for the Claude Code Usage card in the quick settings panel.
+- **`blob_key <set|show|clear|list> [NAME] [VALUE]`**: Stores secrets/env values for widgets and services, e.g. `blob_key set SOME_TOKEN value`.
 
 ## Installation
 

ags/lib/claude-usage.sh

@@ -1,34 +1,25 @@
 #!/bin/bash
 
-KEY_FILE="$HOME/.config/ags/secrets/ANTHROPIC_ADMIN_KEY"
+PROJECTS_DIR="$HOME/.claude/projects"
+TODAY=$(date -u '+%Y-%m-%d')
 
-if [ ! -f "$KEY_FILE" ]; then
-    echo '{"available":false,"tokens":0,"costUsd":0}'
+if [ ! -d "$PROJECTS_DIR" ]; then
+    echo '{"available":false,"tokens":0,"messages":0}'
     exit 0
 fi
 
-ADMIN_KEY=$(cat "$KEY_FILE")
-TODAY_START=$(date -u '+%Y-%m-%dT00:00:00Z')
-TODAY_END=$(date -u -d tomorrow '+%Y-%m-%dT00:00:00Z')
+FILES=$(find "$PROJECTS_DIR" -name "*.jsonl" -newermt "$TODAY")
 
-USAGE_JSON=$(curl -fsS --max-time 6 \
-    -H "anthropic-version: 2023-06-01" \
-    -H "x-api-key: $ADMIN_KEY" \
-    "https://api.anthropic.com/v1/organizations/usage_report/messages?starting_at=${TODAY_START}&ending_at=${TODAY_END}&bucket_width=1d")
-
-COST_JSON=$(curl -fsS --max-time 6 \
-    -H "anthropic-version: 2023-06-01" \
-    -H "x-api-key: $ADMIN_KEY" \
-    "https://api.anthropic.com/v1/organizations/cost_report?starting_at=${TODAY_START}&ending_at=${TODAY_END}&bucket_width=1d")
-
-if [ -z "$USAGE_JSON" ] || [ -z "$COST_JSON" ]; then
-    echo '{"available":false,"tokens":0,"costUsd":0}'
+if [ -z "$FILES" ]; then
+    echo '{"available":true,"tokens":0,"messages":0}'
     exit 0
 fi
 
-TOKENS=$(echo "$USAGE_JSON" | jq '[(.data // [])[].results[]? | (.uncached_input_tokens // 0) + (.cache_read_input_tokens // 0) + (.cache_creation.ephemeral_1h_input_tokens // 0) + (.cache_creation.ephemeral_5m_input_tokens // 0) + (.output_tokens // 0)] | add // 0')
-
-COST_CENTS=$(echo "$COST_JSON" | jq '[(.data // [])[].results[]?.amount | tonumber] | add // 0')
-
-jq -n --argjson tokens "$TOKENS" --argjson costCents "$COST_CENTS" \
-    '{available: true, tokens: $tokens, costUsd: ($costCents / 100)}'
+jq -s --arg today "$TODAY" '
+  [.[] | select(.timestamp != null and (.timestamp | startswith($today)) and .message.usage != null) | .message.usage] as $usages
+  | {
+      available: true,
+      tokens: ([$usages[] | (.input_tokens // 0) + (.output_tokens // 0) + (.cache_creation_input_tokens // 0) + (.cache_read_input_tokens // 0)] | add // 0),
+      messages: ($usages | length)
+    }
+' $FILES 2>/dev/null || echo '{"available":false,"tokens":0,"messages":0}'

ags/style.css

@@ -349,44 +349,37 @@
   font-size: 13px;
 }
 
-.qs-divider {
-  min-width: 1px;
-  background-color: alpha(@foreground, 0.15);
-}
-
 .qs-side-panel {
-  min-width: 160px;
+  min-width: 170px;
 }
 
-.side-card {
-  background-color: alpha(@color0, 0.6);
-  border-radius: 10px;
+.widget-card {
   padding: 10px;
 }
 
-.side-card-icon {
+.widget-card-icon {
   color: @accent;
   font-size: 14px;
 }
 
-.side-card-title {
+.widget-card-title {
   font-size: 12px;
   font-weight: bold;
   color: @foreground;
 }
 
-.side-card-label {
+.widget-card-label {
   font-size: 12px;
   opacity: 0.8;
 }
 
-.side-card-value {
+.widget-card-value {
   font-size: 13px;
   font-weight: bold;
   color: @foreground;
 }
 
-.side-card-empty {
+.widget-card-empty {
   font-size: 12px;
   opacity: 0.6;
 }

ags/widget/ClaudeUsage.tsx

@@ -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>

ags/widget/QuickSettings.tsx

@@ -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>