Create landing page structure following 'Little Often' principle: Components Created: - Navbar.tsx: Logo + CTA button with sticky positioning - Hero.tsx: Headline, sub-headline, dual CTAs, trust indicators, stats - components/index.ts: Centralized exports Design Features: - Mobile-first responsive design (sm:, lg: breakpoints) - WCAG AA compliant contrast ratios (4.5:1+) - Accessible focus rings and aria-labels - Modern color palette (indigo primary, slate neutrals) - Smooth gradients and shadows Layout Structure: frontend/src/ ├── components/ │ ├── layout/ │ │ └── Navbar.tsx │ ├── sections/ │ │ └── Hero.tsx │ └── index.ts ├── App.tsx: Clean integration of Navbar + Hero Fixes Applied: - Install @tailwindcss/postcss for Tailwind v4 compatibility - Update postcss.config.js with new plugin - Remove @tailwind directives from index.css (v4 style) Build Verification: ✅ TypeScript compilation successful ✅ Tailwind CSS processing successful ✅ Production build completed (dist/ folder) Content: - Headline: 'Il DevOps tascabile che traduce i crash...' - Sub-headline: Explains monitoring + AI + Telegram flow - Primary CTA: 'Ottieni il tuo Webhook URL' - Secondary CTA: 'Guarda la Demo' - Stats: <5s response, 300+ models, €0.15/month Refs: docs/frontend_landing_plan.md, .opencode/skills/frontend-ui-ux/
LogWhispererAI 🌌 aka Sacchi's Server Sentinel
UVP: Il DevOps tascabile che traduce i crash del tuo server e ti dice l'esatto comando per risolverli in sicurezza, senza farti perdere ore su StackOverflow.
🎯 Visione del Progetto
LogWhisperer AI trasforma i log di sistema e database spesso incomprensibili in alert azionabili descritti in "plain language". È pensato per piccole web agency e freelance che gestiscono infrastrutture (AWS, DigitalOcean, VPS) senza avere un sistemista senior dedicato.
🚀 Stato di Sviluppo
| Feature | Stato | Sprint |
|---|---|---|
| ✅ Log Ingestion Script | Completato | Sprint 1 |
| 🔄 AI Processing Pipeline | In pianificazione | Sprint 2 |
| 🔄 Alerting (Telegram/Slack) | In pianificazione | Sprint 2-3 |
| 🔄 Landing Page & Onboarding | In pianificazione | Sprint 3 |
Funzionalità MVP
-
Log Ingestion ✅: Script Bash leggero per il monitoraggio (tail -f) di log critici (syslog, nginx, postgres). Invia payload JSON via HTTP POST a webhook.
-
AI Processing Pipeline 🔄: Workflow su n8n che analizza i log tramite LLM (OpenAI/Anthropic) applicando il Metodo Sacchi (Safety first, little often, double check).
-
Alerting Umano 🔄: Notifiche su Telegram/Slack con sintesi del problema, severità e comando esatto per la mitigazione.
🛠️ Stack Tecnologico Core Logic: Python 3.12+ (in venv) Automation: n8n (self-hosted) Database: Supabase / PostgreSQL AI: GPT-4o-mini / Claude 3.5 Sonnet Agentic Dev: OpenCode.ai
🛠️ Setup per lo Sviluppo
Il progetto segue una metodologia Spec-Driven e TDD (Test-Driven Development).
Prerequisiti
- Python 3.12 o superiore
- Bash 4.0+
- curl (GNU coreutils)
- Node.js 18+ (per i MCP servers e frontend)
- npm 9+ (per il frontend)
Clone e setup
# Clone
git clone https://github.com/LucaSacchiNet/LogWhispererAI.git
cd LogWhispererAI
# Ambiente virtuale
python3 -m venv venv
source venv/bin/activate
# Installazione dipendenze
pip install -r requirements.txt
Configurazione MCP (OpenCode.ai)
Il progetto utilizza tre MCP (Model Context Protocol) servers per estendere le capacità dell'agente AI:
- sequential-thinking - Problem solving strutturato
- context7 - Recupero documentazione contestuale delle librerie
- n8n - Integrazione con workflow automation
La configurazione è già presente in .opencode/opencode.json. Per utilizzarla:
# Assicurati di avere npx installato
npm install -g npx
# Avvia OpenCode
opencode
Nota sulla sicurezza: Le credenziali n8n sono configurate nel file .opencode/opencode.json. Non committare mai questo file con credenziali di produzione.
Eseguire i Test
# Attiva l'ambiente virtuale
source venv/bin/activate
# Esegui tutti i test
pytest tests/test_logwhisperer.py -v
# Test con coverage (opzionale)
pytest tests/test_logwhisperer.py -v --tb=short
Usare lo Script di Log Ingestion
# Installazione (interattiva)
./scripts/install.sh
# Verifica configurazione
./scripts/logwhisperer.sh --validate
# Test pattern matching
./scripts/logwhisperer.sh --dry-run --test-line "FATAL: database error"
# Avvio monitoraggio
./scripts/logwhisperer.sh --config /etc/logwhisperer/config.env
Sviluppo Frontend (Landing Page)
Il progetto include una landing page moderna costruita con React, Vite e Tailwind CSS.
# Entra nella directory frontend
cd frontend
# Installa le dipendenze (prima volta)
npm install
# Avvia il server di sviluppo
npm run dev
# Build per produzione
npm run build
# Preview della build
npm run preview
Stack Frontend:
- React 18 + TypeScript - UI library con type safety
- Vite - Build tool veloce con HMR
- Tailwind CSS - Utility-first CSS framework
- PostCSS + Autoprefixer - Processing CSS
La landing page sarà disponibile su http://localhost:5173 durante lo sviluppo.
🤖 Agenti AI (OpenCode.ai)
Il progetto utilizza uno staff di agenti specializzati definiti in AGENTS.md:
| Agente | Ruolo |
|---|---|
@product-manager |
Definisce roadmap e valida UVP |
@tech-lead |
Architettura e specifiche tecniche |
@python-developer |
Implementazione Python (TDD) |
@bash-expert |
Script Bash e ottimizzazioni |
@security-auditor |
Vulnerabilità e compliance |
@qa-engineer |
Test suite e coverage |
@documentation-agent |
Docs e changelog |
Per avviare una sessione di sviluppo:
opencode
📜 Metodologia e Standard
- Git: Conventional Commits (
feat:,fix:,docs:,test:) - Changelog: Common Changelog standard
- Testing: Pytest per logica Python e test integrazione per script Bash
- Metodo Sacchi: Safety first, little often, double check
Documentazione
docs/prd.md- Product Requirements Documentdocs/specs/- Specifiche tecniche per ogni sprintdocs/reviews/- Project Review post-sprintdocs/1.setup_procedure/- Procedure di setup OpenCode.aidocs/sprint1_verification.md- Report verifica sprint
📁 Struttura del Progetto
LogWhispererAI/
├── AGENTS.md # Regole agenti e Metodo Sacchi
├── CHANGELOG.md # Log modifiche
├── README.md # Questo file
├── LICENSE.md # Licenza proprietaria
├── requirements.txt # Dipendenze Python (pytest, requests)
├── docs/
│ ├── prd.md # Product Requirements Document
│ ├── specs/
│ │ └── ingestion_script.md # Specifica tecnica Sprint 1
│ ├── reviews/
│ │ └── sprint1_review.md # Project Review Sprint 1
│ ├── 1.setup_procedure/ # Setup OpenCode.ai
│ │ ├── setup.md # Procedura setup
│ │ └── agents.md # Configurazione agenti
│ └── sprint1_verification.md # Report verifica
├── scripts/
│ ├── logwhisperer.sh # Script principale
│ └── install.sh # Script installazione
├── tests/
│ ├── __init__.py
│ └── test_logwhisperer.py # Test suite Python
└── .opencode/
├── opencode.json # Configurazione MCP servers
├── agents/ # Configurazioni agenti individuali
│ ├── tech-lead.md
│ ├── product-manager.md
│ ├── python-developer.md
│ ├── bash-expert.md
│ ├── security-auditor.md
│ ├── qa-engineer.md
│ ├── documentation-agent.md
│ ├── n8n_specialist_agent.md
│ └── context_auditor_agent.md
└── skills/ # Playbook condivisi
├── TDD_Python_Specialist/
├── Git_and_Changelog/
├── n8n_automation_mastery/
└── context7_documentation_retrivial/
⚖️ Licenza e Note Legali
Questo software è proprietà riservata di Luca Sacchi Ricciardi.
Tutti i diritti sono riservati. Per ogni controversia derivante dall'uso o dallo sviluppo di questo software, il foro competente in via esclusiva è il Foro di Milano, Italia.
Per i dettagli completi, consultare il file LICENSE.md.
👨💻 Autore
Luca Sacchi Ricciardi
LogWhispererAI - "Safety first, little often, double check"