Skip to content

feat: agent runs dashboard with tRPC API and React frontend#288

Merged
zbigniewsobiecki merged 2 commits intodevfrom
feat/dashboard
Feb 16, 2026
Merged

feat: agent runs dashboard with tRPC API and React frontend#288
zbigniewsobiecki merged 2 commits intodevfrom
feat/dashboard

Conversation

@zbigniewsobiecki
Copy link
Copy Markdown
Member

Summary

  • Full-stack dashboard for exploring agent runs, logs, LLM calls, and debug analyses
  • tRPC v11 API with session-based auth, org-scoped data access, and end-to-end type safety
  • React 19 frontend with Tailwind CSS v4, shadcn/ui theming, and TanStack Router
  • 75 new unit tests (1000 total) covering all backend and frontend code
  • Tees llmist agent logs to the main application logger with proper log levels

Backend

API (src/api/)

  • tRPC setup with auth middleware (protectedProcedure rejects unauthenticated requests)
  • Auth routers: auth.me query, POST /api/auth/login, POST /api/auth/logout
  • Runs router: list (filtered/paginated/org-scoped), getById, getLogs, listLlmCalls, getLlmCall, getDebugAnalysis
  • Projects router: list (org-scoped, for filter dropdowns)
  • Session cookies (HTTP-only, 30-day expiry) with bcrypt password hashing
  • Context creation reads cookie via getCookie(c, 'cascade_session') and resolves user

Database

  • Migration 0006_users_and_sessions.sql: users and sessions tables with indexes
  • Drizzle schema + repository (usersRepository.ts)
  • New repository functions in runsRepository.ts: listRuns(), getLlmCallByNumber(), listLlmCallsMeta(), listProjectsForOrg()

Server (src/server.ts)

  • Mounts tRPC via @hono/trpc-server at /trpc/*
  • Auth routes at /api/auth/*
  • Static file serving from dist/web/ with SPA fallback in production

Frontend (web/)

  • Tech: React 19, Vite, Tailwind CSS v4 (@tailwindcss/vite), TanStack Router, tRPC client
  • Login page: Email/password form calling /api/auth/login
  • Runs list (/): Sortable table with filters (project, status, agent type, date range), pagination, auto-refresh for running sessions
  • Run detail (/runs/:runId): Tabbed view — overview, logs (cascade/llmist toggle with search), LLM calls (expandable rows with lazy-loaded content), debug analysis

Other changes

  • src/backends/adapter.ts: Tee llmist agent logWriter output to the main application logger with correct log levels (ERROR/WARN/DEBUG/INFO)
  • CLAUDE.md: Updated with dashboard documentation, dev workflow, and user management instructions

Test plan

  • All 1000 tests pass (69 test files)
  • Lint clean (biome — 3 pre-existing complexity warnings only)
  • TypeScript compiles clean (backend + frontend)
  • Vite production build succeeds
  • Pre-commit hooks pass (lint + typecheck)
  • Pre-push hooks pass (full test suite)
  • CI passes on push

🤖 Generated with Claude Code

zbigniewsobiecki and others added 2 commits February 16, 2026 12:16
Full-stack dashboard for exploring agent runs, logs, LLM calls, and
debug analyses. Includes session-based auth, org-scoped data access,
and production static file serving.

Backend:
- tRPC v11 API with auth middleware (session cookies, bcrypt)
- Runs/projects/auth routers with filtering, pagination, org-scoping
- Users + sessions DB migration and Drizzle schema
- Login/logout Hono routes, session resolution
- listRuns, getLlmCallByNumber, listLlmCallsMeta, listProjectsForOrg
- Static file serving with SPA fallback for production

Frontend (web/):
- React 19 + Vite + Tailwind CSS v4 + shadcn/ui theme
- TanStack Router with login, runs list, and run detail pages
- tRPC client with end-to-end type safety via AppRouter import
- Runs table with filters (project, status, agent type, date range)
- Run detail tabs: overview, logs, LLM calls, debug analysis
- Auto-refresh for in-progress runs

Also includes:
- Tee llmist agent logs to main logger with proper log levels
- 75 new unit tests (1000 total) covering all new code
- CLAUDE.md documentation updates

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
The web utils test imports from web/src/lib/utils.ts which depends on
clsx and tailwind-merge (installed only in web/node_modules). CI only
runs npm install at root level, so these modules are unavailable.
Mock them since we only test the format functions, not cn().

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@zbigniewsobiecki zbigniewsobiecki merged commit 0a0e111 into dev Feb 16, 2026
4 checks passed
@zbigniewsobiecki zbigniewsobiecki deleted the feat/dashboard branch February 16, 2026 12:24
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant