feat(infra): developer dashboard — event browser UI

[Depo-dev]

Context

Phase 3 of the PRD describes a developer dashboard — a UI for browsing events, viewing indexer status, and managing API keys. This is the operational interface that differentiates Trident from a raw API: it gives both operators and dApp developers a visual way to verify the indexer is working and to explore what events their contracts are generating.

Without a dashboard, debugging a silent indexer issue requires reading JSON from curl, which is inaccessible to non-technical stakeholders and slow even for engineers.

What needs to be built

Tech stack

Next.js 15 App Router + Tailwind CSS + shadcn/ui

Rationale:

• Next.js App Router gives us server components for the initial data load (fast first paint, SEO for the public explorer)
• Tailwind + shadcn/ui provides a professional design system with minimal setup
• Can be deployed to Vercel (free tier) or served as a static export from the Go API's embed.FS

Location: dashboard/ at the monorepo root, with its own package.json.

Authentication

On first visit, the dashboard shows a login screen prompting for the API URL and an API key. These are stored in localStorage (appropriate for a developer tool — not a consumer app). Once entered, they persist across browser sessions.

A Disconnect button clears the stored credentials and returns to the login screen.

Pages

1. Events Browser (/)

The primary view. A filterable, paginated table of soroban_events:

Column	Notes
Ledger	Monospace, links to Stellar Expert ledger page
Timestamp	Relative ("2 minutes ago") with absolute on hover
Contract	Truncated strkey with copy button
Topic 0	The primary event type (transfer, mint, etc.)
Tx Hash	Truncated, links to Stellar Expert transaction
Type	CONTRACT / SYSTEM / DIAGNOSTIC badge

Filter bar (above the table): contract ID input, topic_0 dropdown (populated from recent values), ledger range inputs, network selector.

Live mode toggle: when enabled, the table polls the WebSocket and prepends new events without a page refresh. A "N new events" banner appears at the top, and clicking it scrolls to the new rows.

Event detail drawer: clicking a row opens a right-side drawer showing the full event JSON, decoded data field, all four topics, and a link to the Stellar Expert transaction.

2. Indexer Status (/status)

Data from GET /v1/stats/indexer:

• Lag gauge: a half-donut chart showing current lag vs threshold. Green < 50 ledgers, yellow 50-200, red > 200.
• Events/min chart: a sparkline of events indexed per minute over the last hour (requires polling system_state or adding a time-series table — document the dependency)
• Last poll time: relative timestamp with status indicator (green dot = healthy, red = stalled)
• Total events indexed: large number with thousands separator
• Uptime: time since last restart (requires a started_at field in system_state)

3. Contract Leaderboard (/contracts)

Data from GET /v1/stats/contracts:

A ranked list of contracts by event volume. Columns: rank, contract ID (truncated + copy), event count, last seen ledger, last seen time. Clicking a contract ID pre-fills the Events Browser filter and navigates to /.

Include a ledger range picker at the top (defaults to "last 10,000 ledgers").

4. API Keys (/keys) — Admin only

Only accessible if the admin key was used to log in (check by calling GET /v1/admin/keys — returns 403 if not admin):

• Table of all API keys (label, tier, created at, status)
• "Create Key" button: opens a modal, prompts for label and tier, shows the raw key once after creation with a copy button and a "This key will not be shown again" warning
• "Revoke" button on each row (with confirmation dialog)

Acceptance criteria

• npm run build produces a valid Next.js build with zero type errors
• Events Browser displays events and supports all filter combinations
• Live mode updates the table within 1 second of a new event being indexed
• Event detail drawer shows the full JSON payload correctly rendered (use react-json-view or similar)
• Indexer Status page shows correct lag and updates every 10 seconds via polling
• Contract Leaderboard clicking a contract navigates to Events Browser with filter applied
• API Keys page only accessible with admin key; shows correct key management UI
• Works on mobile screens (min 375px width) — responsive layout required
• No console errors on any page
• Deployed to Vercel and linked from the docs site (feat(docs): developer documentation site #71)

Dependencies

• feat(go-api): health endpoint with dependency liveness checks #43 (health endpoint)
• feat(indexer): write indexer lag and throughput to system_state #62 (system_state stats)
• feat(db): API key storage table and CRUD in Go API #63 (API key management endpoints)
• feat(go-api): analytics endpoint — events per contract #73 (contracts analytics endpoint)
• feat(go-api): analytics endpoint — indexer throughput and lag #74 (indexer stats endpoint)

[JoesWalker]

@JoesWalker has applied to work on this issue as part of the Stellar Wave Program's 6th wave.

Hi maintainers, I'd like to claim this issue!

I’m a Full Stack Developer specializing in Next.js/React (TypeScript + Tailwind) and Node.js (PostgreSQL + Prisma/Drizzle).

My Approach for This Issue
Context: I’ll implement this by [insert 1 sentence specific to the issue, e.g., updates the database schema for X and linking it to the Y component].

Frontend: Deliver clean, reusable components with responsive layouts, hover/focus states, and semantic HTML.

Backend/Infra: Secure API routes (REST/GraphQL), proper data validation, and clean migrations if required.

Testing & QA: Write unit/integration tests for critical paths and verify breakpoints.

I can start immediately and will share progress updates directly in the PR (complete with screenshots/videos). Ready when you are!

ℹ️ Repo Maintainers: To accept this application, review their application or assign @JoesWalker to this issue.