repo-reader è un applicativo pensato per esplorare un repository locale, leggere la documentazione presente nelle cartelle docs e offrire un punto di ingresso unico per navigazione, anteprima Markdown e, in una fase successiva, editing guidato dei contenuti.
L’idea di partenza nasce dal mini applicativo già esistente nel repository sorgente che mi hai mostrato: un server Node.js avvia una finestra del browser, permette di navigare le cartelle, aprire file Markdown e gestire alcune azioni base sul repository. Questo progetto vuole evolvere quella base in un prodotto impacchettabile via npm, più completo e più semplice da integrare in altri progetti.
L’interfaccia nuova parte sempre in modalità visualizzazione. Quando serve modificare un file si passa alla modalità modifica con un toggle dedicato, così l’intera area di lavoro cambia contesto senza tenere preview ed editor divisi inutilmente.
Prima di fare qualunque modifica al repository, gli agenti GitHub Copilot devono leggere questo README per allinearsi su architettura, stato corrente e regole di lavoro. Se il README cambia in modo sostanziale, va riletto prima di intervenire di nuovo sul codice.
L’obiettivo è distribuire repo-reader come strumento installabile nelle devDependencies di un progetto e avviabile con un comando breve da terminale. In prospettiva, il tool dovrà fornire:
- una finestra desktop dedicata, senza dipendere da un server Node avviato manualmente;
- una navigazione del repository e della documentazione in stile file explorer, con filtro rapido e apertura di file collegati dai Markdown;
- un visualizzatore Markdown integrato;
- funzionalità di editing assistito per file testuali e documentazione tramite Monaco Editor;
- una base estendibile per comandi futuri legati alla gestione del repository.
Dal mini-app mostrato emergono già alcuni comportamenti utili da preservare o rifattorizzare:
- avvio automatico dell’interfaccia;
- lista dei file e delle cartelle del repository;
- apertura dei file Markdown in una vista dedicata;
- placeholder per le cartelle;
- apertura del repository in VS Code o di cartelle specifiche nell’Explorer di Windows;
- gestione di heartbeat e chiusura del processo quando la finestra si chiude.
Questi punti sono un buon riferimento per il primo rilascio, ma l’architettura va spostata verso un’app desktop distribuita come pacchetto npm, non come semplice server HTTP locale.
La soluzione più adatta, in base a quanto si vede ora, è una desktop app costruita con Electron e affiancata da un layer di rendering moderno per l’interfaccia. In parallelo, per l’editing guidato, Monaco Editor è una scelta naturale perché offre una UX molto vicina a un IDE senza dover incorporare un editor completo.
- Electron per creare finestra, lifecycle e integrazione con il sistema operativo.
- Un processo main per accesso al filesystem, dialog, shell e gestione repository.
- Un renderer UI per navigazione, preview, ricerca e azioni contestuali.
- Monaco Editor per editing assistito, validazione e anteprima del contenuto.
- Un parser Markdown e una pipeline di rendering separata dalla UI.
- Un piccolo layer CLI o un bin npm per l’avvio rapido del tool.
Se l’obiettivo è farlo installare come devDependency, conviene prevedere:
- un pacchetto con
binper esporre un comando tiporepo-reader; - uno script di avvio che individui il repository corrente;
- un fallback che permetta di passare il percorso del repository come argomento;
- una configurazione chiara di build e packaging per Windows, macOS e Linux.
- Creare la struttura del progetto Electron.
- Separare la logica di filesystem, navigazione e rendering Markdown dal bootstrap iniziale.
- Definire un comando di avvio unico da terminale.
- Rendere configurabile la root del repository da esplorare.
- Implementare un file explorer interno.
- Filtrare e classificare correttamente documentazione, cartelle e file supportati.
- Aprire file Markdown in preview integrata.
- Gestire placeholder e stati vuoti in modo coerente.
- Integrare Monaco Editor nella vista principale o in un pannello dedicato.
- Aggiungere apertura file, modifica e salvataggio controllato.
- Introdurre sintassi, evidenziazione e auto-complete per Markdown e file testuali.
- Escludere o proteggere i file binari e i percorsi sensibili.
- Aggiungere comandi contestuali per aprire cartelle e file in editor esterni.
- Integrare operazioni utili come ricerca nel repository e refresh della vista.
- Prevedere hook per future funzioni di gestione Git o documentazione.
- Preparare build per desktop app.
- Pubblicare il pacchetto npm con metadata, bin e documentazione d’uso.
- Verificare il comportamento quando il progetto viene installato come devDependency.
- Aggiungere una guida rapida per l’uso nel README del progetto ospitante.
- Definire il nome definitivo del pacchetto e il comando CLI esposto.
- Creare la nuova struttura Electron partendo dalla logica già presente nel mini-app.
- Scegliere l’architettura del renderer: HTML semplice, framework leggero oppure UI moderna con componenti.
- Stabilire il perimetro della prima release: sola lettura, oppure lettura più editing base.
I file che hai mostrato sono già sufficienti per definire il comportamento di partenza, ma non ancora per il prodotto finale. La priorità dovrebbe essere trasformare il server monolitico attuale in moduli separati: boot, filesystem, rendering, UI e comandi. Questo rende più semplice introdurre Electron e Monaco senza riscrivere tutto in un solo passaggio.
- Installare le dipendenze del progetto con
npm install. - Avviare l'app con
npm run start. - In alternativa, dopo la pubblicazione del pacchetto, usare il comando esposto da
bincomerepo-reader --root <percorso-repository>.
La base iniziale ora include:
- un comando CLI che avvia Electron puntando al repository selezionato;
- una finestra desktop dedicata;
- navigazione delle cartelle del repository con filtro e breadcrumb;
- anteprima Markdown integrata;
- un editor Monaco attivato solo in modalità modifica, con salvataggio diretto;
- apertura della cartella nel file manager e in VS Code quando disponibile;
- stampa del documento ed esportazione PDF tramite un menu compatto.
- una finestra di stampa/esportazione con frontespizio, indice automatico, numerazione dei paragrafi H2-H4 e intestazione/piè di pagina ripetuti;
- watermark di classificazione distribuito su ogni pagina del documento esportato;
- una dialog dedicata per i parametri di stampa, con autore e organizzazione gestiti separatamente.
- cambio workspace protetto da conferma quando ci sono modifiche non salvate;
- apertura di una cartella trascinata sull'area di lavoro come nuovo workspace.
Il progetto mantiene due canali di distribuzione distinti e complementari.
Per la distribuzione come applicazione desktop autonoma e' ora prevista la build con Electron Forge.
Comandi principali:
npm run devper l'avvio in sviluppo tramite Forge.npm run packageper produrre il pacchetto applicativo non installante.npm run makeper generare gli artefatti di distribuzione.npm run make:winper generare in modo esplicito gli artefatti Windows, incluso l'installer Squirrel.
Comportamento applicativo previsto in modalita' desktop:
- l'utente puo' trascinare una cartella sull'area di lavoro per aprirla come workspace;
- se esistono modifiche non salvate, l'app chiede se salvare, proseguire senza salvare o annullare il cambio workspace;
- durante il drag-and-drop compare un overlay esplicito sull'area di lavoro;
- l'app puo' essere usata anche senza avere il repository di sviluppo del progetto aperto localmente.
Il primo packaging con Squirrel produceva l'installer ma non creava correttamente la voce nel menu Start. La causa non era Forge in se', ma l'assenza della gestione degli eventi Squirrel all'avvio dell'app.
Per correggere questo comportamento sono stati aggiunti:
electron-squirrel-startupnel runtime dell'app;- la chiusura immediata dell'app quando viene lanciata con gli switch di installazione/aggiornamento/rimozione di Squirrel;
- una configurazione esplicita di
shortcutNamee dell'icona.iconella build Forge.
Questo e' il passaggio che permette a Squirrel di completare correttamente la creazione e l'aggiornamento degli shortcut, incluso quello del menu Start.
In aggiunta, durante installazione e aggiornamento vengono registrate voci di menu contestuale in Windows per:
- cartelle;
- file
.md; - file
.mdx.
Queste voci permettono di aprire rapidamente il percorso selezionato in Repo Reader senza passare dalla finestra di selezione workspace.
Resta invariata la modalita' di utilizzo come tool installabile nelle devDependencies di un altro progetto.
In questo scenario:
- il pacchetto espone il comando
repo-readertramitebin; - l'avvio continua a passare da
src/cli.js; - il workspace iniziale puo' essere dedotto dalla cartella corrente oppure passato con
--root.
Esempio:
npm install --save-dev repo-reader
npx repo-reader --root .Per evitare che la UI diventi troppo densa, la linea migliore è spostare le azioni meno frequenti in un menu overflow e introdurre un vero document focus mode:
- barra superiore ridotta alle sole azioni primarie e al toggle di modalità;
- sidebar comprimibile o richiudibile in un rail più stretto;
- stampa, export PDF e altre azioni secondarie dentro un menu contestuale;
- area documento estesa quasi a tutta la finestra quando si lavora in lettura o modifica.
In pratica, il documento deve restare il centro della schermata e il resto dell’interfaccia deve arretrare quando non è necessario.