AI Agent Dashboard — HTML/CSS Kit

The admin side of an AI agent product, designed around how agents are actually run. This kit has 11 connected pages: an overview with conversation, resolution, handoff, latency and spend KPIs; an agent roster with pause and resume switches; an agent configuration screen with prompt, model, tools, knowledge and version tabs next to a working test console; a conversation inbox where tool calls expand inline and a human can take over and reply; a trace waterfall that breaks one run into guardrail, retrieval, model and tool spans; a live log tail; evaluation suites with pass rates and expected-vs-actual failures; usage and cost against a monthly budget; tabbed settings for workspace, API keys, channels, guardrails and team; a sign-in page; and a 404. The interactions work out of the box. Logs stream in and pause, spans open in an inspector, evaluations run with a progress bar, API keys can be created, revealed and copied, and the test console replies through a single respond() function that you swap for your own agent API. The sample data lines up across pages, and model names are neutral placeholders you can rename. It is plain HTML with one CSS design system and about 390 lines of vanilla JavaScript. There is no build step and nothing to install. Open index.html and it works, or copy the markup into React, Vue, Django, Rails or whatever your app uses. The details are already done: dark and light themes that remember the user's choice, an off-canvas mobile sidebar, keyboard-operable tabs and conversation list with deep links, accessible switches, text alternatives for charts, visible keyboard focus and labelled fields throughout. The client-work license covers your own products and consoles you build for clients.