Repository navigation
Interface design
Link to the prototype created with the help of figma make
Santiago Manco, during the Prototype Testing phase, commented: "I think the color palette and the page design are perfect, and I feel it can provide an excellent user experience.
For the pages that have not yet been developed, instead of displaying a message saying they are under construction, it might be better to simply omit them to avoid confusing users with non-existent functionalities.
Be careful with API keys, since they are currently being placed in a regular input field, which could lead to security issues. It would also be advisable to consider hiding the endpoints."
Feedback addressed in implementation:
- Pages under construction were removed entirely from the navigation — only Login and Dashboard are exposed.
- API keys are handled exclusively through environment variables (
.env,.env.local) and are never exposed in the UI or client-side code.
The login screen provides email/password authentication backed by Supabase. It follows the dark slate color palette established in the prototype.
Key elements:
- Email and password input fields with validation feedback
- "Iniciar sesión" button with loading state during authentication
- Error messages displayed inline on failed login attempts
- Automatic redirect to Dashboard on successful login
The dashboard is the primary workspace for DevOps engineers. It is divided into two panels:
Left panel — Incident list (sidebar):
- Displays all incidents sorted by creation date (most recent first)
- Each incident card shows: title, container name, severity badge, status badge, and incident type badge
- Critical incident count displayed in the header
- Real-time updates via Supabase Realtime — new incidents appear without page reload
- "Nuevo incidente" button to manually create an incident
Right panel — Incident detail:
- Metadata cards: container name, server, detection time, current status
- Severity and incident type badges
- Logs section: raw container logs collected from Loki (monospace, scrollable)
- Agent reasoning section: full markdown output from the LangGraph analysis (root cause, recommended actions, urgency)
- Loading indicator ("Analizando...") while LangGraph is processing
- Empty state when no incident is selected
Header:
- Sentinel logo and project name
- Critical incident counter badge
- Notification controls (enable/snooze for 15 minutes)
- Logout button
Accessible from the "Nuevo incidente" button in the dashboard header. Allows engineers to manually report incidents not captured by automatic detection.
Fields:
- Title (text)
- Container name (text)
- Severity (dropdown: critical, high, medium, low)
- Description (textarea, optional)
On submission, the incident is created via POST /api/incidents/ and the LangGraph engine is triggered automatically. The modal closes on success and the new incident appears in the sidebar via Realtime.
For incidents with severity critical or high, the system dispatches browser-native notifications when the Dashboard is open. Each notification:
- Displays the incident title and container name
- Deep-links to the incident detail on click (
?incident=<uuid>) - Includes a 90-second cooldown per incident to avoid spam
- Can be globally snoozed for 15 minutes from the dashboard header
User opens http://localhost:5173
↓
[Not authenticated] → Login page
↓
Enter email + password → Supabase Auth
↓
[Authenticated] → Dashboard
↓
Incident appears in sidebar (automatic detection or manual creation)
↓
Click incident → Detail panel opens
↓
View logs from Loki
↓
Wait for LangGraph analysis (~30s)
↓
Read agent reasoning: incident type, root cause, recommended actions
↓
[Optional] Receive browser notification for critical incidents
↓
Mark as resolved or continue monitoring