Un'interfaccia web comoda per l'agente AI da console pi

Lavorare nel terminale è ottimo finché il contesto sta in una schermata. L'agente di coding da console pi è eccellente per modifiche rapide, ma una sessione di debugging di un'ora si trasforma in un caos di chiamate di funzione, codice generato e messaggi di errore. Buona fortuna a trovare il punto in quel flusso in cui il modello è andato fuori pista, o a ricordare quale file stava modificando venti minuti fa.

Lo sviluppatore agegr ha risolto questo problema in modo molto pratico: ha scritto una shell web locale chiamata pi-web. Lo strumento legge i file di log dell'agente pi e avvia una comoda dashboard visiva nel browser.

Cos'è pi-web e come funziona

Nel suo nucleo, pi-web è un wrapper attorno all'agente da console pi. Invece di riscrivere l'agente stesso, l'autore ha creato un frontend che analizza i file .jsonl dalla directory ~/.pi/agent/sessions.

L'applicazione funziona completamente in locale. Puoi avviarla senza alcuna installazione preliminare con un singolo comando:

npx @agegr/pi-web@latest

Il server si avvierà sulla porta 30 e aprirà automaticamente una scheda nel browser. Se la porta è occupata o hai bisogno di un accesso solo locale, i parametri sono facilmente modificabili tramite flag:

pi-web --port 8080 --hostname 127.0.0.1

Cosa cambia nel flusso di lavoro

Il problema principale dei dialoghi AI da console è la perdita di struttura. Nel terminale, tutto sembra un muro solido di testo. L'interfaccia web scompone la stessa sessione in blocchi visivi chiari.

Ramificazione visiva delle sessioni

Quando l'agente AI inizia a incontrare vicoli ciechi, nella console devi o resettare il dialogo o generare una lunga cronologia di tentativi. Pi-web ha due percorsi per la sperimentazione sicura:

• Fork crea un file di sessione .jsonl separato. Puoi andare per una nuova strada preservando il vecchio risultato.
• La modifica da un messaggio selezionato crea un ramo aggiuntivo all'interno della stessa sessione.

Visualizzazione dei file accanto alla chat

Mentre l'agente modifica il codice o scrive documentazione, puoi tracciare le modifiche direttamente nel pannello adiacente. L'explorer del progetto è a sinistra, e l'area di anteprima è a destra. Il visualizzatore integrato mostra non solo file sorgente e diff. Gestisce con facilità immagini, audio, PDF e documenti DOCX.

Controllo trasparente di token e impostazioni

La barra superiore mostra i token spesi, il costo della sessione e lo stato di compressione del contesto. Niente più speculazioni su quanto dei tuoi limiti è stato utilizzato e quale prompt di sistema è attivo al momento.

La gestione del modello e della chiave API è stata spostata anche dai file JSON della console a un'interfaccia grafica. Attraverso i pannelli delle impostazioni, puoi cambiare il modello predefinito, testare le connessioni e attivare/disattivare le skill dell'agente.

Supporto per Git worktrees

Se usi Git worktrees per lavorare in parallelo su più branch, la barra laterale di pi-web può cambiare ambiente al volo. L'explorer dei file e le nuove sessioni si adattano automaticamente al checkout selezionato.

Come è progettata l'architettura

Il progetto è scritto in TypeScript usando il framework Next.js. La struttura del repository è semplice e diretta.

La cartella app/api contiene gli endpoint per lavorare con l'agente:

• agent/ gestisce l'avvio delle sessioni e lo streaming degli eventi tramite Server-Sent Events (SSE).
• files/ gestisce la lettura dei file, le diff e il tracciamento delle modifiche.
• models-config/ e skills/ gestiscono le configurazioni dell'agente.

La sicurezza è gestita dal modulo lib/file-access.ts. Limita il file manager al progetto corrente e alle directory coinvolte nella sessione. Non sarai in grado di leggere un file di sistema casuale attraverso l'interfaccia utente.

A chi tornerà utile questo progetto

Se usi attivamente l'agente di coding pi, dovresti assolutamente provare pi-web. Il progetto risolve il problema principale degli strumenti CLI — la mancanza di chiarezza visiva.

L'interfaccia diventa particolarmente comoda in due casi:

• Quando si fa debugging di task complessi che richiedono di tornare frequentemente a passaggi passati e confrontare varianti di soluzione.
• Quando si lavora con file multimediali e documentazione, quando la possibilità di visualizzare rapidamente i risultati nel browser fa risparmiare tempo.

Lo strumento è sviluppato attivamente: ha già oltre 16.000 stelle su GitHub e commit recenti. Hai solo bisogno di Node.js e dell'agente pi installati per eseguirlo, quindi la configurazione richiederà letteralmente un paio di minuti.