💧 Su Sayacı

Claude Code ve Codex'te tükettiğin tokenları gerçek dünya su karşılığına çeviren, resmî "su tüketim raporu" estetiğinde tek sayfalık görselleştirme + paylaşım kartı.

Veriler tamamen yerel okunur (~/.claude/projects, ~/.codex/sessions). Hiçbir şey dışarı gönderilmez.

Parçalar

| Dosya | Görevi | |---|---| | lib/usage.js | Ortak toplama mantığı (bağımlılık yok). Hem sunucu hem CLI kullanır. | | server.js | Lokal önizleme sunucusu (/api/usage + statik dosyalar). | | bin/cli.js | npx su-sayaci — terminal özeti, SVG kart, paylaşım linki. | | public/index.html | Animasyonlu rapor. Veriyi /api/usage'tan veya paylaşılan linkin #d= parçasından okur. |

Lokal çalıştırma

node server.js            # http://localhost:4789

CLI

node bin/cli.js                       # terminal özeti + su-karti.png + paylaşım linki
node bin/cli.js --tariff=high --open  # kötümser tarife, linki tarayıcıda aç
node bin/cli.js --no-png              # kartı PNG'ye çevirme (sadece SVG bırak)
node bin/cli.js --url-base=https://ALANADIN   # paylaşım linki kök adresini ayarla

Kart önce su-karti.svg olarak yazılır, sonra makinedeki bir araçla (Chrome/Edge/Chromium headless, ya da rsvg-convert/cairosvg/inkscape/macOS Quick Look) su-karti.png'ye çevrilir (X/WhatsApp'a hazır). Hiçbiri yoksa SVG bırakılır. Ekstra npm bağımlılığı yoktur.

npx su-sayaci olarak çalışması için pakete npm publish gerekir (veya repoda npx .).

Paylaşım linki nasıl çalışır

CLI, toplanmış veriyi base64url olarak linkin #d= parçasına gömer. Parça sunucuya gitmez; rapor sayfası onu tarayıcıda çözüp statik olarak render eder. Yani site tamamen statik bir dosya olarak yayınlanabilir, backend gerektirmez.

Herkese açık yayınlama (statik + ücretsiz alan adı)

Rapor sayfası backend istemediği için public/ klasörünü herhangi bir statik hosta koyabilirsin.

1. Repo + host: public/ içeriğini bir GitHub reposuna koy, Cloudflare Pages veya GitHub Pages'e bağla. Build komutu yok; yayın klasörü = public/.
2. Ücretsiz alan adı: https://github.com/DigitalPlatDev/FreeDomain üzerinden bir subdomain al (PR + DNS kaydı). CNAME'i Pages adresine yönlendir.
3. CLI'yi domaine bağla: bin/cli.js içindeki PUBLIC_BASE sabitini (veya SU_SAYACI_URL ortam değişkenini) yeni alan adınla değiştir; paylaşım linkleri oraya gider.

Sosyal önizleme (OG görseli)

public/og.png genel (kişiselleştirilmemiş) bir kart; linkler paylaşıldığında bu görünür. Kişiye özel sayıyı link önizlemesinde göstermek istenirse, tarayıcı botları # parçasını ve JS'i okuyamadığı için sunucu tarafı OG üretimi gerekir (ör. Cloudflare Pages Functions): sayıyı ?l=... query'sine koyup fonksiyonun PNG döndürmesi. Şu anki akışta kişiye özel kart, CLI'nin ürettiği su-karti.svg olarak ayrıca paylaşılır.

Dürüstlük notu

Token → su çevrimi tahminîdir; literatürdeki tarifeler arasında ~80 kat fark vardır. Bu yüzden üç tarife (iyimser/orta/kötümser) seçilebilir ve her yerde "tahminîdir" denir.