Codesteward Dashboard

A unified, modular web dashboard for the Codesteward platform.
Monitor AI coding agent activity, explore code graphs, and review security findings — all in one place.

---

Screenshots

Overview — audit metrics, activity timeline, agent distribution, and code graph stats

Graph Visualizer — interactive force-directed layout with edge type filtering

Features

Audit Proxy

• Session tracking — browse sessions by agent, project, branch, and user
• Event log — flat view of all intercepted LLM API calls
• Token usage — input/output/cache token breakdowns per session
• Activity timeline — hourly event volume chart
• Agent distribution — donut chart of activity by AI agent (Claude Code, Codex, Gemini CLI, Cline)

Code Graph

• Graph Explorer — search and browse nodes (functions, classes, methods, files) with relationship detail
• Graph Visualizer — interactive force-directed graph with draggable nodes, zoom/pan, edge type filtering, and adjacency highlighting
• Query Console — run named queries (lexical, referential, semantic, dependency) or raw Cypher/Gremlin
• Stats — node/edge counts, language breakdown, edge type distribution

Taint Analysis

• Findings overview — taint-flow security findings from source to sink
• CWE classification — findings grouped by CWE identifier
• Severity badges — visual severity indicators

Analytics

• Activity heatmap, token usage over time, per-user/per-model breakdowns, cache hit rates, project treemap

Module System

Each backend is independently optional. If a service isn't configured, the dashboard shows a friendly "not configured" state — never an error. Works with any subset: audit-only, graph-only, or all three.

Tech Stack

Layer	Technology
Framework	Nuxt 4
UI	Vue 3 + Nuxt UI v3
Styling	Tailwind CSS v4
Charts	Apache ECharts (via vue-echarts)
Graph Server Protocol	MCP SDK (SSE transport)
Icons	@iconify/vue (heroicons + simple-icons)
Fonts	Inter + JetBrains Mono

Quick Start

Prerequisites

• Node.js 18+
• Yarn 4+
• At least one Codesteward backend running:
  • Audit Proxy + ClickHouse — for audit data
  • codesteward-mcp (graph server) — for code graph and taint data

Install & Run

cd dashboard
yarn install
yarn dev

The dashboard starts at http://localhost:4000.

Environment Variables

# ClickHouse connection (server-side)
NUXT_CLICKHOUSE_URL=http://localhost:8123
NUXT_CLICKHOUSE_DB=audit
NUXT_CLICKHOUSE_USER=default
NUXT_CLICKHOUSE_PASSWORD=

# MCP graph server (server-side)
NUXT_GRAPH_SERVER_URL=http://localhost:3000

# Public URLs (client-side, for status display)
NUXT_PUBLIC_PROXY_URL=http://localhost:8080
NUXT_PUBLIC_GRAPH_URL=http://localhost:3000

# Optional
NUXT_PUBLIC_DEFAULT_TIME_RANGE=24h
NUXT_PUBLIC_ROWS_PER_PAGE=50

Architecture

Browser  →  Nuxt (SPA on :4000)  →  Nitro server routes  →  Backends
                                          │
                                          ├─ /api/clickhouse  →  ClickHouse HTTP (:8123)
                                          ├─ /api/graph       →  MCP SSE client → codesteward-mcp (:3000)
                                          └─ /api/proxy-health → Audit proxy healthz (:8080)

• All backend credentials stay server-side — never exposed to the browser
• ClickHouse queries are parameterized — no SQL injection risk
• Graph queries go through MCP protocol — proper SSE transport with the MCP SDK
• Read-only — the dashboard never writes to any backend

Graph Backend Support

The dashboard works with both Neo4j and JanusGraph behind the MCP server. Named queries (lexical, referential, semantic, dependency) work identically on both. The Query Console automatically shows the correct raw query option (Cypher for Neo4j, Gremlin for JanusGraph) based on the active backend.

Production Build

cd dashboard
yarn build
yarn preview    # preview locally

See the Nuxt deployment docs for deploying to various platforms.

License

Apache 2.0 — see LICENSE for details.

Built by bitkaio.