Skip to content

ui.md

Latest commit

 

History

History
162 lines (104 loc) · 7.18 KB

ui.md

File metadata and controls

162 lines (104 loc) · 7.18 KB
Raw

Web UI

The web UI is a React + Vite single-page application served by the FastAPI backend.

URLs:

  • Docker Compose: http://localhost (frontend on port 80, backend on port 8000)
  • Local dev: http://localhost:5173 (Vite dev server with HMR)

Chat page

The main investigation interface.

Input area — type a message and press Enter or click Send. The agent starts streaming its response immediately. A Stop button cancels an in-flight request mid-stream.

Streaming response — agent tokens appear in real time as the LLM reasons. Tool calls appear as collapsible cards as they complete, showing the tool name, arguments, and result. A contextual status label ("Digging through CloudTrail…", "Checking Lambda metrics…") appears while each tool runs.

Follow-up suggestions — after an investigation completes, up to 3 drill-down question chips appear above the input box. Clicking one sends it immediately as the next message. The chips are generated by the agent in the same final tool call at no extra cost and disappear once you start a new message.

Tool call inspector — each tool call card is collapsed by default; click to expand and see the full arguments and result JSON.

Cost card — after each agent response, a collapsible card shows:

  • Input tokens / Output tokens
  • Per-component USD cost breakdown
  • Total cost for the turn
  • Latency in milliseconds

Evidence panel — an Evidence button in the chat header (shown once the session has messages) opens a slide-over panel rendering the session's replayable evidence pack (GET /api/sessions/{id}/evidence). It groups the investigation's ranked hypotheses, each with its cited evidence linked to the supporting tool call, the verbatim query/command that ran, and a deterministic AWS-console deeplink. Replay cards offer copy-to-clipboard and a full JSON export. See evidence_pack.md.

Session continuity — the session ID is stored in the URL. Refreshing the page or sharing the URL resumes the same conversation from where it left off (SQLite/Postgres backends only — memory backend loses history on restart).

Session history sidebar

Lists all past sessions sorted by last activity. Each entry shows:

  • Session title (first user message, truncated)
  • Time since last active (relative, e.g. "3 hours ago")
  • Model used

Actions:

  • Click any session to load it in the chat view with full history restored
  • New chat button starts a fresh session with a new UUID
  • ⋯ menu on each session row:
    • Rename — shows an inline input pre-filled with the current title; Enter or blur saves, Escape cancels
    • Delete — soft-deletes the session; it disappears from the list immediately but data is preserved in the database

History page

Accessible from the sidebar. Shows a searchable list of all past sessions.

Search — filters sessions by keyword matching the title or any user message. Results show a short content snippet from the first matching message.

Session list — displays title, last active time, model, and a content snippet. Click any row to open the session in the chat page.

Dashboard page

Stats are automatically refreshed every 30 seconds — no manual page reload needed.

See dashboard.md for full details on each panel.

Monitoring page

Shows the live incident feed produced by the event-driven consumer. See monitoring.md for full details.

Accessible from the sidebar for all authenticated users. Each card shows the affected service, root cause summary, confidence level, and timestamp. Click any card to open the Alert Detail page, which includes an Investigate button that opens a new chat session with the incident context pre-loaded.

Send test event (admin only) — appears in the header next to the refresh button. Puts a synthetic Lambda error alarm into the SQS queue. A toast confirms dispatch and the resulting investigation card appears within ~30s via auto-refresh. Shows an error toast if event monitoring is not yet configured.

Settings page

Shows active configuration. Four tabs (admins see all four; regular users see the last three):

AWS Configuration (admin only, default tab for admins) — editable fields for SNS Topic ARN, SQS Queue URL, and AWS Region. Values are stored in database-backed app config for SQLite/PostgreSQL deployments. Includes:

  • Event Monitoring section — shows Enabled / Disabled status; Create Infrastructure button provisions the SQS queue and 9 EventBridge rules; Teardown button removes them (with confirmation).
  • Run checks button that validates IAM permissions for every AWS service the agent uses.

Environment — read-only view of all .env values. Sensitive fields (LLM_API_KEY, DATABASE_URL, JWT_SECRET, etc.) are masked by default; click the eye icon to reveal. SNS and SQS values are intentionally omitted here — manage them in the AWS Configuration tab.

Agent config — read-only agent behaviour settings: max tool calls, timeout, tool response cap, summarization threshold, poll interval, event consumer status.

Integrations — Slack, GitHub, PagerDuty, Datadog connection stubs (not yet wired up).

First-run setup page

Accessible at /init before any users exist. A 4-step wizard guides the admin through initial setup:

  1. Create account — email + password for the admin user
  2. AWS Configuration — region selector and optional SNS Topic ARN for alert delivery
  3. Permission check — verifies IAM permissions per service; required services (CloudWatch, Lambda, SQS, EventBridge) are highlighted; "Continue anyway" is always available
  4. Enable event monitoring — creates the SQS queue, 9 EventBridge rules, and aggregate Lambda alarm; shows a success summary with queue URL and rule list; includes a Skip option that finishes onboarding without event infrastructure

The page redirects away automatically once onboarding is complete. Event monitoring can still be enabled or torn down later from Settings without forcing users back through onboarding.

Login page

Shown when JWT_SECRET is set in .env. Accessible at /login.

  • Register tab — create the first account (auto-admin) or subsequent accounts
  • Login tab — email + password; stores the JWT in localStorage on success

If auth is disabled (JWT_SECRET unset), the login page is skipped entirely and all users get full access.

Team page

Admin-only. Accessible from the sidebar (hidden for user role). Shows all registered users in a table with name, email, role, and created date.

  • Add user — create a new user with email, name, password, and role
  • Change role — inline dropdown to promote/demote between admin and user
  • Delete user — removes the account immediately

Non-admins who navigate to /users see an "Admin access required" message instead of the table.

Dark mode

The UI respects the system dark/light mode preference automatically. No toggle is needed.

Theme and design

  • Font: Inter Variable (Google Fonts) with a full system fallback stack
  • Framework: React 18 + Tailwind CSS
  • Icons: Lucide React
  • Build tool: Vite with HMR in development