claude-farm-widget Svelte Themes

Claude Farm Widget

A pixel-art farm widget showing real-time Claude Code token usage. Built with Tauri, Svelte, and Phaser.js.

Claude Farm Widget

A cozy pixel-art desktop widget that shows your real-time Claude Code token usage — inspired by the idle game aesthetic of Rusty's Retirement.

A farmer tends his crops while your tokens roll in. INPUT, OUTPUT, and CACHE usage are displayed as chunky pixel progress bars at the bottom, alongside total cost and context window percentage.


Preview

Animated farm scene with farmer, cow, chickens, and sheep. Stats panel updates live as you use Claude Code.


Features

  • Live token tracking — INPUT, OUTPUT, CACHE tokens with pixel progress bars
  • Cost display — calculates spend in USD using Sonnet 4.6 pricing
  • Context window % — shows how full your current session context is
  • Animated farm scene — farmer, cow, 2 chickens, sheep with idle state machines
  • Drifting clouds, farmhouse, trees, fence, and crop patch
  • Updates every 2 seconds via file watcher on `/.claude/projects/`
  • Cross-platform — Mac and Windows via Tauri v2

Tech Stack

Layer Choice
Desktop shell Tauri v2 (Rust)
Frontend Svelte 5 + SvelteKit + Vite
Animation Phaser.js 3
Language TypeScript
Styling Tailwind CSS v4
Font Press Start 2P

How It Works

The Rust backend walks ~/.claude/projects/**/*.jsonl and sums all token fields across every session file. It polls for changes every 2 seconds and pushes updated stats to the frontend via a Tauri event (usage_updated). The Svelte store subscribes to this event and the UI re-renders reactively.

Pricing used (Sonnet 4.6):

  • Input: $3.00 / MTok
  • Output: $15.00 / MTok
  • Cache write: $3.75 / MTok
  • Cache read: $0.30 / MTok

Getting Started

Prerequisites

Dev

npm install
npm run tauri dev

Build

npm run tauri build

Produces a .dmg on Mac and .msi on Windows inside src-tauri/target/release/bundle/.


Project Structure

claude-farm-widget/
├── src/
│   ├── components/
│   │   ├── FarmScene.svelte   # Phaser canvas mount
│   │   └── StatsPanel.svelte  # Token bars + cost display
│   ├── lib/
│   │   ├── farm-scene.ts      # Phaser.Scene — characters + animation
│   │   ├── usage-store.ts     # Svelte writable store (Tauri IPC)
│   │   └── usage-types.ts     # TypeScript interfaces
│   └── routes/
│       └── +page.svelte       # Root layout
├── src-tauri/
│   └── src/
│       ├── usage.rs           # JSONL parser + file watcher
│       └── lib.rs             # Tauri app setup
└── assets/
    ├── sprites/               # Character sprite sheets (swap in here)
    └── bg/                    # Background tiles

Roadmap

  • Replace placeholder graphics with real pixel-art sprite sheets (Kenney.nl packs)
  • Per-model cost breakdown
  • Daily / weekly usage reset toggle
  • macOS menu bar mode

License

MIT

Top categories

Loading Svelte Themes