696b265e4d
- Fix CSV-01 column count: 32 -> 33 (8 meta + 24 slide + 1 caption)
- Add TopicResult Pydantic model + topic_generator.txt prompt
- Make bulk generation async with background task + polling endpoint
- Add POST /api/export/{job_id}/csv for inline edit CSV download
- Split Plan 01-04 Task 2 into 2a/2b/2c (badges, slideviewer, pages)
- Update ProgressIndicator to use polling on /status endpoint
- Add --yes flag and frontend/ prerequisite note to Plan 01-01
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
20 KiB
20 KiB
phase, plan, type, wave, depends_on, files_modified, autonomous, must_haves
| phase | plan | type | wave | depends_on | files_modified | autonomous | must_haves | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 01-core-generation-pipeline | 04 | execute | 3 |
|
|
false |
|
Purpose: Dare all'utente l'interfaccia per interagire con la pipeline di generazione. Questa e' l'unica via di accesso al sistema — senza UI il backend non e' utilizzabile.
Output: SPA React completa con tutte le pagine e componenti per il workflow: configura -> genera -> rivedi -> scarica.
<execution_context> @C:\Users\miche.claude/get-shit-done/workflows/execute-plan.md @C:\Users\miche.claude/get-shit-done/templates/summary.md </execution_context>
@.planning/PROJECT.md @.planning/ROADMAP.md @.planning/STATE.md @.planning/phases/01-core-generation-pipeline/01-CONTEXT.md @.planning/phases/01-core-generation-pipeline/01-01-SUMMARY.md @.planning/phases/01-core-generation-pipeline/01-02-SUMMARY.md @.planning/phases/01-core-generation-pipeline/01-03-SUMMARY.md Task 1: Layout, routing, API hooks, tipi TypeScript, pagine Settings e Dashboard frontend/src/types.ts frontend/src/api/client.ts frontend/src/api/hooks.ts frontend/src/components/Layout.tsx frontend/src/components/Sidebar.tsx frontend/src/App.tsx frontend/src/pages/Dashboard.tsx frontend/src/pages/Settings.tsx 1. Creare frontend/src/types.ts con i tipi TypeScript che rispecchiano gli schemas Pydantic del backend: - CalendarSlot, CalendarRequest, CalendarResponse - SlideContent, GeneratedPost, PostResult, GenerateResponse - JobStatus (job_id: string, status: "running" | "completed" | "failed", total: number, completed: number, current_post: number, results: PostResult[]) - Settings (api_key, llm_model, nicchie_attive, lingua, frequenza_post, brand_name, tono) - SettingsStatus (api_key_configured: boolean, llm_model: string)2. Aggiornare frontend/src/api/client.ts (gia' creato in Plan 01):
- Aggiungere metodi specifici: apiGet<T>, apiPost<T>, apiPut<T>
- Gestione download file: apiDownload(endpoint) -> Blob
3. Creare frontend/src/api/hooks.ts con TanStack Query hooks:
- useSettings(): useQuery per GET /api/settings
- useSettingsStatus(): useQuery per GET /api/settings/status
- useUpdateSettings(): useMutation per PUT /api/settings
- useGenerateCalendar(): useMutation per POST /api/generate/bulk — ritorna {job_id} (async, NON GenerateResponse)
- useGenerateSingle(): useMutation per POST /api/generate/single
- useJobStatus(jobId): useQuery per GET /api/generate/job/{jobId}/status con refetchInterval condizionale (2000ms quando running, disabilitato quando completed/failed)
- useJobResults(jobId): useQuery per GET /api/generate/job/{jobId}
- useDownloadCsv(): funzione che chiama GET /api/export/{jobId}/csv e triggera download browser (CSV originale)
- useDownloadEditedCsv(): funzione che chiama POST /api/export/{jobId}/csv con results modificati e triggera download browser (CSV con edits)
- useFormats(): useQuery per GET /api/calendar/formats
4. Creare frontend/src/components/Layout.tsx:
- Layout wrapper con Sidebar a sinistra e contenuto a destra
- Responsive: sidebar collassabile su mobile
- Tailwind CSS per styling
5. Creare frontend/src/components/Sidebar.tsx:
- Logo/titolo "PostGenerator" in alto
- Navigazione con link: Dashboard, Genera Calendario, Genera Singolo Post, Impostazioni
- Usa react-router-dom NavLink con activeClassName
- Icone da lucide-react
6. Aggiornare frontend/src/App.tsx:
- BrowserRouter con basename="/postgenerator"
- QueryClientProvider con QueryClient
- Layout wrapping
- Routes: / -> Dashboard, /genera -> GenerateCalendar, /genera-singolo -> GenerateSingle, /risultati/:jobId -> OutputReview, /impostazioni -> Settings
7. Creare frontend/src/pages/Dashboard.tsx:
- Card di benvenuto con nome progetto e descrizione breve
- Quick actions: "Genera Calendario" (link), "Impostazioni" (link)
- Se API key non configurata: banner prominente "Configura la tua API key Claude nelle Impostazioni"
- Se ci sono job recenti (check /api/generate/job/latest): mostra ultimo job con link a risultati
- Usa useSettingsStatus() per verificare API key
8. Creare frontend/src/pages/Settings.tsx:
- Form con campi:
- API Key Claude (input password con toggle visibilita', mostra solo ultimi 4 char se gia' configurata)
- Modello LLM (select: claude-sonnet-4-5, claude-haiku-3-5)
- Brand Name (input text, opzionale)
- Tono di voce (input text, default "diretto e concreto")
- Nicchie attive (lista checkbox con le nicchie default + possibilita' di aggiungerne)
- Frequenza post settimanale (number input, 1-7, default 3)
- Pulsante Salva con feedback (successo/errore)
- Usa useSettings() e useUpdateSettings()
NOTA DESIGN: Claude ha discrezione sul design UI. Scegliere uno stile pulito e professionale, NON il solito template generico con gradienti viola. Colori suggeriti: palette terrosa o industriale adatta a B2B.
2. Creare frontend/src/components/BadgeSchwartz.tsx:
- Badge per livello Schwartz (L1-L5)
- Colori progressivi (L5 chiaro -> L1 scuro) per indicare vicinanza all'acquisto
- Tooltip con descrizione livello
3. Creare frontend/src/components/PostCard.tsx:
- Card per singolo post nel risultato
- Mostra: indice, tipo PN (badge), livello Schwartz (badge), formato narrativo, nicchia, data
- Se status=success: mostra cover_title come titolo card, click per espandere
- Se status=failed: card con sfondo rosso chiaro, icona errore, messaggio errore, pulsante "Riprova"
- Pulsante Riprova chiama useGenerateSingle() per rigenerare quel slot
- Click su card success -> espande per mostrare SlideViewer (SlideViewer placeholder prop per ora)
2. Creare frontend/src/components/ProgressIndicator.tsx:
- Riceve job_id come prop
- USA POLLING: chiama GET /api/generate/job/{job_id}/status ogni 2 secondi via useJobStatus(jobId) hook
- Mostra progresso generazione bulk: "Post {completed}/{total} in generazione..."
- Barra di progresso visuale basata su completed/total dal polling response
- Lista dei post con stato: pending (grigio), processing (spinner — il current_post), success (verde check), failed (rosso X)
- Animazione per il post attualmente in generazione (current_post dal polling)
- Quando status diventa "completed": smette di pollare, chiama callback onComplete(jobId)
3. Aggiornare frontend/src/api/hooks.ts:
- Aggiungere useJobStatus(jobId): useQuery per GET /api/generate/job/{jobId}/status con refetchInterval di 2000ms quando status e' "running", disabilitato quando "completed" o "failed"
- Aggiungere useDownloadEditedCsv(): funzione che chiama POST /api/export/{jobId}/csv con i results modificati e triggera download browser
- Aggiornare useGenerateCalendar(): mutation che chiama POST /api/generate/bulk e ritorna {job_id} (non GenerateResponse, dato che ora e' async)
2. Creare frontend/src/pages/OutputReview.tsx:
- Riceve jobId da route params
- Carica risultati con useJobResults(jobId)
- Header con: nome campagna, conteggio successi/falliti, pulsante "Download CSV"
- Griglia di PostCard (3 colonne desktop, 2 tablet, 1 mobile)
- PostCard espandibile con SlideViewer
- GESTIONE STATO EDIT INLINE:
- Mantiene stato locale dei post (copia di GenerateResponse)
- Quando utente edita una slide in SlideViewer, aggiorna lo stato locale via callback
- Il pulsante "Download CSV" invia lo stato locale modificato al backend via POST /api/export/{jobId}/csv (useDownloadEditedCsv hook)
- Questo garantisce che il CSV rifletta le modifiche inline dell'utente
- Se ci sono post falliti: mostra nota "Il CSV contiene solo i N post generati con successo"
- Se tutti i post sono falliti: messaggio "Nessun post generato con successo. Riprova."
3. Creare frontend/src/pages/GenerateSingle.tsx:
- Form per generare un singolo post manualmente:
- Topic (textarea, obbligatorio)
- Tipo contenuto (select: valore, storytelling, news, riprova_sociale, coinvolgimento, promozione)
- Livello Schwartz (select: L1-L5)
- Nicchia (select dalla lista)
- Formato narrativo (select, auto-compilato in base a tipo+livello ma override possibile)
- Al submit: chiama useGenerateSingle()
- Mostra risultato con SlideViewer direttamente nella pagina
- Pulsante download CSV per singolo post
<success_criteria>
- Dashboard mostra stato API key e quick actions
- Settings permette configurazione API key, modello, nicchie, frequenza
- Genera Calendario ha form, async submit con job_id, ProgressIndicator con polling real-time
- ProgressIndicator polla /status e mostra progresso per-item (pending/processing/success/failed)
- Output Review mostra griglia card con badge, slide viewer con edit inline
- Download CSV invia edits al backend via POST e riceve CSV aggiornato
- Post falliti mostrano errore e pulsante Riprova
- Genera Singolo Post ha form completo con anteprima risultato
- Build frontend completa senza errori </success_criteria>