Add side panels with widget cards and Claude Code usage stats to quick settings

ags/widget/ClaudeUsage.tsx

@@ -0,0 +1,56 @@
+import { Gtk } from "ags/gtk3"
+import { createPoll } from "ags/time"
+import { shell } from "../lib/utils"
+
+type ClaudeUsage = {
+  available: boolean
+  tokens: number
+  costUsd: number
+}
+
+const usage = createPoll<ClaudeUsage>(
+  { available: false, tokens: 0, costUsd: 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 }
+    }
+  },
+)
+
+function formatTokens(tokens: number) {
+  if (tokens >= 1000000) return `${(tokens / 1000000).toFixed(2)}M`
+  if (tokens >= 1000) return `${(tokens / 1000).toFixed(1)}K`
+  return `${tokens}`
+}
+
+export function ClaudeUsageCard() {
+  return (
+    <box class="side-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 />
+      </box>
+      <label
+        class="side-card-empty"
+        label="No admin key set"
+        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))} />
+        </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)}`)} />
+        </box>
+      </box>
+    </box>
+  )
+}

ags/widget/QuickSettings.tsx

@@ -3,6 +3,7 @@ import { Astal, Gtk } from "ags/gtk3"
 import { createState } from "ags"
 import { createPoll, interval } from "ags/time"
 import { sh, shell } from "../lib/utils"
+import { ClaudeUsageCard } from "./ClaudeUsage"
 
 export const QUICKSETTINGS_WINDOW = "quick-settings"
 
@@ -306,6 +307,55 @@ function CalendarSection() {
   )
 }
 
+const uptime = createPoll("", 60000, shell("uptime -p"), (stdout) =>
+  stdout.trim().replace(/^up /, ""),
+)
+
+function UptimeCard() {
+  return (
+    <box class="side-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 />
+      </box>
+      <label class="side-card-value" label={uptime} xalign={0} halign={Gtk.Align.START} wrap />
+    </box>
+  )
+}
+
+const weather = createPoll("Loading...", 600000, shell("omarchy-weather-status"), (stdout) =>
+  stdout.trim(),
+)
+
+function WeatherCard() {
+  return (
+    <box class="side-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 />
+      </box>
+      <label class="side-card-value" label={weather} xalign={0} halign={Gtk.Align.START} wrap />
+    </box>
+  )
+}
+
+function LeftPanel() {
+  return (
+    <box class="qs-side-panel" vertical spacing={10}>
+      <UptimeCard />
+      <WeatherCard />
+    </box>
+  )
+}
+
+function RightPanel() {
+  return (
+    <box class="qs-side-panel" vertical spacing={10}>
+      <ClaudeUsageCard />
+    </box>
+  )
+}
+
 export default function QuickSettings() {
   const { TOP } = Astal.WindowAnchor
 
@@ -321,13 +371,19 @@ export default function QuickSettings() {
       visible={false}
       application={app}
     >
-      <box class="panel quick-settings control-center" vertical spacing={12}>
-        <Header />
-        <CalendarSection />
-        <Toggles />
-        <VolumeSlider />
-        <BrightnessSlider />
-        <MediaPlayer />
+      <box class="panel quick-settings-shell" spacing={12}>
+        <LeftPanel />
+        <box class="qs-divider" vexpand />
+        <box class="quick-settings control-center" vertical spacing={12}>
+          <Header />
+          <CalendarSection />
+          <Toggles />
+          <VolumeSlider />
+          <BrightnessSlider />
+          <MediaPlayer />
+        </box>
+        <box class="qs-divider" vexpand />
+        <RightPanel />
       </box>
     </window>
   )