Indietro

Una dashboard per l'uso di Claude sull'M5Stack Basic — limiti del piano e spesa API sulla scrivania

L'M5Stack Basic sulla tastiera di un portatile che mostra la dashboard — un account Claude Max all'88% del limite settimanale, la sessione di 5 ore al 30% e 142M di token oggi

Uso Claude ogni giorno, e la domanda che mi pongo più spesso non riguarda il codice. È “quanto mi resta della settimana?”. La schermata /usage di Claude Code risponde, ma solo quando mi fermo a digitarla. Volevo la risposta sulla scrivania, come un orologio che mostra l’ora.

L’M5Stack Basic è adatto allo scopo. È un dispositivo finito: uno schermo da 2 pollici 320×240, tre pulsanti, una batteria e un ESP32 in un case da 54 mm. Niente breadboard, niente saldature.

Questo articolo descrive la dashboard: cosa mostra, come i dati arrivano da Claude allo schermo, come il dispositivo si connette senza alcuna configurazione e i passi per costruirne una tua. L’interfaccia è stata progettata sull’M5Stack Core in Velxio prima di toccare l’hardware, ed è la strada che consiglio se vuoi costruirne una. Puoi anche eseguire questo firmware nel tuo browser, su dati demo, senza il dispositivo.

La dashboard sul dispositivo: guardala su YouTube.

Tutto il codice, il firmware e il bridge su PC, è su GitHub con licenza MIT: velxio/m5claude. La sezione “Il codice, parte per parte” qui sotto illustra cosa fa ciascun file.

L’hardware

L'M5Stack Basic v2.7 — un ESP32 con schermo IPS da 2 pollici 320x240, tre pulsanti, USB-C, uno slot microSD e una batteria da 110 mAh

La scheda è l’M5Stack Basic Core IoT Development Kit v2.7:

Non serve altro: la dashboard usa solo ciò che è nel case. La scheda non ha IMU, microfono, LED né orologio in tempo reale, quindi la dashboard sfrutta tutto il resto: lo schermo e i pulsanti, l’altoparlante per gli avvisi, la retroilluminazione per risparmiare batteria e il chip di alimentazione per mostrare la carica.

Cosa mostra lo schermo

La dashboard funziona con due tipi di account Claude, e con diversi di ciascuno:

Per entrambi, mostra i token al giorno dell’ultima settimana, suddivisi in input, output, letture cache e scritture cache, e per modello.

Ci sono quattro viste. B passa alla successiva, A e C cambiano account, tenere premuto B chiede al PC dati aggiornati, e tenere premuto C apre le impostazioni. Queste sono tutte le schermate, con l’animazione che ogni vista riproduce quando si apre:

Un tour animato di tutte le schermate — la panoramica con tre account, le viste limiti, token e ripartizione, un'organizzazione API, la panoramica a singolo account, la batteria in carica, le impostazioni in inglese e spagnolo, la richiesta di approvazione e la schermata di attesa

Panoramica. Una scheda per account. Il layout si adatta a quanti account ci sono — un account riempie lo schermo, due hanno schede più alte con una riga per l’uso di oggi, e tre o più diventano un elenco scorrevole.

La panoramica con un account Claude Max — il limite settimanale come anello, la sessione di 5 ore e i limiti per modello sulla destra, e i token di oggi con un grafico di sette giorni

La panoramica con due account Max e un'organizzazione API — percentuale settimanale, barre della sessione di 5 ore e dei 7 giorni, orari di reset e spesa di sette giorni per l'account API

Limiti. Il limite settimanale come anello, con la sessione e i limiti per modello accanto. I nomi dei modelli arrivano da Claude stesso, quindi le righe seguono qualunque limite abbia il tuo piano. I colori cambiano al 60% (ambra) e all’85% (rosso).

La vista limiti — un anello settimanale al 67%, la sessione di 5 ore al 42%, e i limiti settimanali di Opus e Sonnet

Token. Oggi, gli ultimi sette giorni e la cifra in dollari, poi i token al giorno con una linea tratteggiata sulla media. Per un abbonamento, la cifra in dollari è quanto costerebbero gli stessi token ai prezzi di listino API. Non è un addebito, ma è un modo utile per vedere quanto intensamente usi il piano.

La vista token — 2,84M di token oggi, 20,8M in sette giorni, un valore API di $84,20 e un grafico a barre dei token al giorno

La vista token sul dispositivo, con 142M di token oggi e 296M in sette giorni

Ripartizione. I token della settimana per tipo e per modello. Con Claude Code, le letture cache sono di solito la maggior parte del totale.

La vista ripartizione — una barra impilata dei token di input, output, lettura cache e scrittura cache, e la quota di ciascun modello

La vista ripartizione sul dispositivo — quasi tutti i 296M di token di una settimana sono letture cache, divise tra Opus e Fable

Il puntino accanto all’orologio mostra il collegamento — verde quando i dati sono freschi, ambra quando sono obsoleti, rosso quando nessun PC è connesso. Le foto mostrano il mio account. Gli screenshot usano account demo.

Batteria, suono e impostazioni

Accanto all’orologio c’è la batteria, disegnata come la disegnano i telefoni — il livello, e un fulmine con un riempimento che sale durante la carica. Il chip di alimentazione IP5306 riporta solo quattro livelli (25, 50, 75 e 100%), quindi il numero si muove a passi di 25.

L'intestazione durante la carica — 75% con un fulmine e una batteria verde, accanto al puntino del collegamento e all'orologio

Lo speaker è usato per gli avvisi. Quando un limite di sessione o settimanale supera il 90% (o l’80%, se lo scegli), il dispositivo riproduce un breve doppio trillo e mostra quale account e quale limite. Quando un limite si resetta, riproduce un trillo ascendente. Anche le richieste di approvazione da un nuovo computer emettono un suono. I clic dei pulsanti sono opzionali.

Tenere premuto C apre le impostazioni. A e C si spostano, B cambia un valore, e tenere premuto B chiude la schermata. Le impostazioni sono salvate sul dispositivo.

La schermata impostazioni — lingua, luminosità, suoni, soglia di avviso, spegnimento schermo a batteria, attenuazione notturna, computer associati e versione del firmware

Le stesse schermate in spagnolo — le impostazioni e la panoramica

La panoramica in spagnolo

Far durare 110 mAh

Il primo firmware prosciugava la batteria in ben meno di un’ora. La CPU girava a 240 MHz, lo schermo si ridisegnava ogni secondo, e la radio trasmetteva a piena potenza con un intervallo di connessione di 15–30 ms. Niente di tutto ciò serve per mostrare un numero che cambia una volta al minuto. A batteria, il firmware ora fa questo:

Per un uso tutto il giorno lontano dalla scrivania, il Battery Module 13.2 si impila sotto il Basic e aggiunge 1500 mAh.

Come funziona

I dati fluiscono dal login e dai transcript di Claude Code e dall'Admin API verso il bridge Python, poi via USB o Bluetooth LE verso l'M5Stack, che disegna solo ciò che riceve

La regola di progettazione è che il dispositivo non sa nulla. Non conserva credenziali di Claude né impostazioni Wi-Fi. Un piccolo programma sul PC, il bridge, raccoglie tutto e invia al dispositivo un’istantanea da disegnare. Questo tiene i segreti lontani da un dispositivo che sta su una scrivania, e significa che cambiare computer o rete non richiede alcuna riconfigurazione.

Da dove arrivano i dati

Il bridge è composto da circa 1.100 righe di Python con due dipendenze (pyserial e bleak). Legge tre fonti:

  1. Limiti del piano, dal login di Claude Code. Ogni directory di configurazione di Claude Code (~/.claude, ~/.claude-work, …) contiene il login di un account. Il bridge le trova tutte e usa ciascun token per leggere gli stessi limiti mostrati dalla schermata /usage di Claude Code. Legge solo il token e non lo rinnova mai, perché il rinnovo ruoterebbe il token e disconnetterebbe Claude Code.
  2. Token, dai transcript di Claude Code. Ogni risposta che Claude Code riceve viene scritta in un file JSONL sotto projects/, con il suo utilizzo di token e il modello. Il bridge li somma per giorno, rimuove i duplicati (una sessione ripresa copia i messaggi precedenti in un nuovo file) e ne calcola il prezzo con il listino API.
  3. Spesa per le organizzazioni API, dalla Usage and Cost Admin API. usage_report/messages fornisce i token per giorno e per modello. cost_report fornisce la spesa reale. Entrambi richiedono una chiave Admin API (sk-ant-admin01-...).

Due lezioni imparate usandolo con account reali:

L’istantanea

Ogni aggiornamento produce una riga JSON di circa 600 byte:

{"v":1,"ts":1792770195,"tz":3600,"acc":[
 {"n":"Personal","p":"Max 20x","k":"sub","ok":1,
  "s":[42,1792778235],"w":[67,1793037195],"x":[["Opus",54,1793037195],["Sonnet",31,1793037195]],
  "td":2840000,"tk":[2310000,1480000,15900000,1120000],"c":84.2,"ct":11.35,
  "d":[1900000,3400000,2600000,4100000,3300000,2670000,2840000],"m":[["Opus",61],["Sonnet",34],["Haiku",5]]}]}

s, w e x sono i limiti di sessione, settimanali e per modello come [percentuale, ora di reset]. d sono i token al giorno. ts e tz sono l’orologio del PC e l’offset UTC. L’M5Stack Basic non ha un orologio in tempo reale né un database dei fusi orari, quindi il dispositivo prende entrambi dall’istantanea e conta i secondi da lì. È sufficiente per “si resetta tra 2h 14m” e “mar 04:00”.

Connessione senza configurazione

Volevo zero configurazione. Digitare una password Wi-Fi su un dispositivo con tre pulsanti è sgradevole. Salvare l’indirizzo IP del PC sul dispositivo si rompe appena cambi computer. Così il dispositivo supporta due collegamenti, e nessuno dei due richiede impostazioni.

USB. Collega il cavo. Il bridge cerca le porte seriali il cui chip USB è quello di un M5Stack (CH9102 o CP2104). Apre la porta senza commutare DTR e RTS, così l’ESP32 non si resetta, e attende un saluto. Il firmware invia {"hello":"m5claude",...} ogni due secondi finché non arrivano dati. Se non arriva alcun saluto entro pochi secondi, il bridge rilascia la porta e la lascia stare per un po’, così altre schede ESP32 e strumenti di flashing non vengono influenzati.

Bluetooth LE. Il firmware pubblicizza un servizio GATT con due caratteristiche: una su cui il PC scrive righe, e una su cui il dispositivo invia notifiche. Il bridge cerca l’UUID del servizio e si connette. Non c’è alcuna finestra di associazione di Windows, e nulla da scegliere da un elenco.

Poiché qualsiasi computer nel raggio d’azione potrebbe trovare il dispositivo, ogni nuovo PC viene approvato una volta, sul dispositivo:

La richiesta di approvazione: "Nuovo computer, DESKTOP-STUDIO. Consentire l'invio dei dati di utilizzo?" con Nega sul pulsante A e Consenti sul pulsante C

Lo scambio di associazione: saluto dal dispositivo, nome e id stabile del PC dal bridge, una risposta in sospeso, la richiesta sullo schermo, poi ok, una richiesta di aggiornamento e le istantanee

Il bridge conserva un id casuale in ~/.m5claude/pc_id. Il dispositivo memorizza gli id di un massimo di quattro PC approvati in NVS. Un PC conosciuto viene accettato subito, e tenere premuto A all’accensione li dimentica tutti. Un dispositivo già connesso via USB viene saltato sul Bluetooth, così non gli viene chiesto di approvare due volte lo stesso PC.

Finché il bridge non è in esecuzione, il dispositivo mostra cosa fare:

La schermata di attesa: "In attesa del tuo PC. Esegui m5claude-bridge sul tuo computer. Si connette automaticamente via USB o Bluetooth."

Il firmware

Il firmware è uno sketch Arduino compilato con arduino-cli sul core arduino-esp32 2.0. Usa tre librerie:

Il codice dell’interfaccia non dipende dall’hardware. Disegna su un target LovyanGFX e legge i tre pulsanti. Tutto ciò che è specifico della scheda (il pannello, USB, BLE, NVS) vive nello sketch.

Alcuni dettagli che lo fanno sembrare un prodotto invece di una demo:

Disegnare senza PSRAM, e le strisce diagonali

Un frame completo da 320×240 a 16 bit è di 150 KB. Il blocco di memoria libera più grande dell’ESP32, con il Bluetooth in esecuzione, è più piccolo. Così l’interfaccia viene disegnata quattro volte per frame in una banda da 320×60 (38 KB). Ogni passata disegna tutto spostato verso l’alto dell’offset della banda, e le parti che cadono fuori dalla banda vengono ritagliate.

La prima volta che è stato eseguito sulla scheda, lo schermo mostrava strisce diagonali, e i pulsanti della richiesta di approvazione apparivano due volte, in alto e in basso. La configurazione del pannello è stato il mio primo sospetto. L’ho riscritta a mano dalla documentazione di M5Stack, e nulla è cambiato. La causa era altrove:

Con un solo buffer, la banda successiva viene disegnata nel buffer mentre la DMA lo sta ancora inviando. Con due buffer, uno viene disegnato mentre l'altro viene inviato, e la CPU attende il trasferimento prima di riutilizzare un buffer

LovyanGFX invia uno sprite al pannello con la DMA, in background. Il mio ciclo iniziava a disegnare la banda successiva nello stesso buffer mentre la precedente era ancora in fase di invio, così il pannello riceveva metà di una banda e metà della successiva. La correzione usa due buffer a turno e attende il trasferimento precedente prima di inviare:

for (int y = 0, k = 0; y < 240; y += 60, k ^= 1) {
  LGFX_Sprite& band = bands[k];
  band.fillScreen(BG);
  draw_ui(band, /*offset_y=*/y);   // runs while the other buffer is still being sent
  lcd.waitDMA();                    // the other buffer's transfer has finished
  band.pushSprite(&lcd, 0, y);      // starts this buffer's transfer
}
lcd.waitDMA();

Costa un buffer aggiuntivo da 38 KB, su circa 275 KB di RAM libera.

Il codice, parte per parte

Scarica il codice con git clone https://github.com/velxio/m5claude.git, oppure come ZIP dal pulsante Code del repository. Ha due metà che non condividono nulla tranne il protocollo: bridge/ gira sul PC, mentre firmware/ e src/ girano sull’M5Stack.

Sull’M5Stack

firmware/m5claude/m5claude.ino: tutto ciò che è specifico della scheda.

src/app/app.cpp: il protocollo, indipendente dal collegamento.

src/model/: i dati.

src/ui/: le schermate.

Sul PC

Il bridge vive in bridge/m5claude_bridge/. Le sue uniche dipendenze sono pyserial e bleak. Le chiamate HTTPS usano la libreria standard.

__main__.py: la riga di comando e il loop principale.

autostart.py registra il bridge per l’avvio all’accesso senza finestra: la chiave di registro Run con pythonw su Windows, un LaunchAgent su macOS, un’unità utente systemd su Linux.

config.py: gli account.

sources/: un file per ogni fonte di dati.

pricing.py contiene i prezzi di listino delle API per famiglia di modelli. Stima il valore dell’utilizzo dell’abbonamento.

snapshot.py: costruisce lo snapshot.

hub.py conserva lo snapshot più recente e lo fornisce a ogni dispositivo connesso. Un collegamento lento riceve solo l’ultimo, mai un arretrato.

transports/: un file per ogni collegamento.

Il README del repository ha lo stesso percorso sotto forma di tabelle, più la risoluzione dei problemi.

Costruisci la tua

L’ordine che consiglio: progetta le schermate in Velxio, poi flasha la scheda, poi collega il bridge.

1. Eseguilo e modificalo sull’M5Stack Core in Velxio

Velxio simula l’M5Stack Core con il suo schermo da 320×240, i pulsanti A, B e C e il chip della batteria. Disporre uno schermo da 2 pollici richiede molte piccole regolazioni (un’etichetta due pixel troppo in basso, un numero che non entra nella sua card), e ognuna richiede secondi nel browser invece di un ciclo di flash.

La dashboard è nella galleria di esempi di Velxio, con gli stessi file sorgente del repository:

  1. Apri M5Stack Core: Claude usage dashboard (m5claude) e clicca il pulsante play. Non serve registrarsi. Parte sugli account demo di questo articolo.
  2. Clicca A e C per scegliere un account e B per scorrere le viste. Il simulatore esegue il firmware più lentamente della scheda, quindi per aprire le impostazioni tieni premuto C per qualche secondo.
  3. Per vedere i tuoi numeri, esegui m5claude-bridge snapshot sul tuo PC e incolla la riga che stampa nel monitor seriale. Il primo commento nello sketch contiene una riga di esempio che puoi modificare.
  4. Modifica le schermate in ui.cpp ed esegui di nuovo. Quando ti sembrano giuste, flasha la scheda.

Due cose differiscono dalla scheda: Velxio non ha Bluetooth, quindi quel collegamento è omesso e il monitor seriale è l’unico collegamento, e il codice dello speaker usa le chiamate del core ESP32 Arduino più recente. Ogni modifica è contrassegnata nello sketch.

Per iniziare una dashboard tua da uno schermo vuoto, M5Stack Core: Hello LCD + Buttons è l’esempio più piccolo. Usa M5GFX di M5Stack, che è costruito su LovyanGFX e ne condivide l’API di disegno, quindi il codice si sposta tra i due.

2. Flasha il firmware

git clone https://github.com/velxio/m5claude.git && cd m5claude
arduino-cli core install esp32:esp32
arduino-cli lib install LovyanGFX NimBLE-Arduino ArduinoJson

./firmware/build.sh /dev/ttyUSB0      # Linux / macOS
.\firmware\build.ps1 -Upload          # Windows, finds the COM port by itself

Gli script compilano per l’M5Stack Core con uno schema di partizioni che lascia spazio per un’app grande (PartitionScheme=no_ota). Il firmware è di circa 820 KB. Due impostazioni mi hanno tratto in inganno:

3. Esegui il bridge

pip install -e bridge                # from the repository root; installs pyserial and bleak
m5claude-bridge accounts             # which accounts it found
m5claude-bridge autostart on         # start now, and at every login

autostart on registra il bridge per l’avvio al login, senza finestra. Su Windows aggiunge un valore sotto la chiave di registro Run dell’utente che avvia pythonw. Su macOS installa un LaunchAgent, e su Linux un servizio utente systemd. autostart status mostra se è in esecuzione e le ultime righe del suo log, in ~/.m5claude/bridge.log. Viene eseguito un solo bridge alla volta: un secondo entrerebbe in conflitto per la porta USB e la connessione Bluetooth, quindi esce con un messaggio. Eseguire m5claude-bridge da solo lo mantiene in primo piano, con il log nel terminale.

Gli account Pro e Max vengono trovati dalle directory di configurazione di Claude Code. Per aggiungere un secondo abbonamento, accedi con la sua directory dedicata:

$env:CLAUDE_CONFIG_DIR = "$HOME\.claude-work"; claude    # then /login

Le organizzazioni API necessitano di una chiave Admin API, dalla Claude Console sotto Settings → Admin keys:

m5claude-bridge add-api "Acme API" --key-env ACME_ADMIN_KEY

4. Collega

Collega il cavo USB, oppure lascia il dispositivo sulla scrivania e lascia che il Bluetooth lo trovi. La prima volta via Bluetooth, premi C sul dispositivo per approvare il PC. I dati compaiono entro pochi secondi.

Avvertenze

Prossimi passi

Il codice è su github.com/velxio/m5claude. Issue e pull request sono benvenute.

Grazie a M5Stack per una scheda pronta all’uso fin da subito, e agli autori di LovyanGFX, NimBLE-Arduino, ArduinoJson e bleak.

I link allo store M5Stack su questa pagina sono link affiliati: se acquisti tramite essi, Velxio guadagna una piccola commissione senza costi aggiuntivi per te, e aiuta a mantenere il simulatore gratuito.


Condividi su:
David Montero

Scritto da

David Montero

Creator of Velxio, the open-source circuit and Arduino simulator.

GitHub velxio.dev

Articoli correlati


Articolo precedente
Cute Desktop Robot — un volto che ascolta sull'ESP-VoCat, con il suo emulatore nel browser
Articolo successivo
Raspberry Pi 4 e 5 nel browser — modalità base e modalità Linux, passo dopo passo