AI Logs View

Dashboard for monitoring Claude API usage, costs, and performance, plus an interactive playground for prompt testing.

The AI Logs view (/admin/ai-logs) provides two tabs: a Dashboard for monitoring all Claude API calls and a Playground for ad-hoc prompt testing.

Dashboard Tab

The dashboard tab displays four sections, all populated by tRPC queries against the aiLogs router.

KPI Cards

Six summary cards across the top show aggregate metrics:

Card	Metric	Source Procedure
Total Calls	Count of all AI usage records	`aiLogs.summary`
Total Tokens	Combined input + output tokens (with input/output breakdown)	`aiLogs.summary`
Estimated Cost	Dollar total with per-call average	`aiLogs.summary`
Avg Latency	Mean response time in milliseconds	`aiLogs.summary`
Errors	Count of calls with `stop_reason = 'error'` and error rate percentage	`aiLogs.summary`
Streaming	Count of streaming calls and percentage of total	`aiLogs.summary`

The summary procedure aggregates across the entire ai_usage table using SQL count(), sum(), avg(), and filtered counts.

Token Usage Chart

A stacked area chart (Recharts AreaChart) shows input and output token consumption over time, grouped by day. Data comes from aiLogs.usageOverTime which uses date_trunc('day', created_at) grouping.

Model Distribution Chart

A horizontal bar chart (Recharts BarChart) shows the number of API calls per Claude model. Data comes from aiLogs.modelDistribution grouped by the model column.

Call Log Table

A paginated table (50 rows per page) listing individual API calls. Each row shows:

Time -- when the call was made
Feature -- the feature tag passed to @repo/ai (e.g., admin-playground, hybrid-search-query)
Model -- Claude model used (displayed without the claude- prefix)
Tokens -- input / output token counts
Cache -- cache read / write token counts (or dash if none)
Latency -- total response time in milliseconds
TTFT -- time to first token (streaming calls only)
Cost -- estimated dollar cost
Stop -- stop reason badge (color-coded: green for end_turn, red for error/refusal)
Mode -- stream or sync

The table supports three filters via dropdown selects:

Model -- filter by specific Claude model
Stop Reason -- filter by end_turn, tool_use, max_tokens, error, or refusal

Filters reset pagination to page 0. The aiLogs.list procedure applies optional where clauses for feature, model, and stopReason.

Call Detail Panel

Clicking a table row opens a detail panel below the table showing the full record for that AI call. The detail view is populated by aiLogs.detail which joins ai_usage with ai_call_details.

The detail panel organizes information in collapsible sections:

Section	Content
Overview	Model badge, stop reason, feature tag, streaming indicator
Identifiers	Usage ID, message ID, batch ID, user ID, organization ID, creation timestamp
Token Usage	Input/output tokens, cache read/write tokens, web search/fetch request counts
Performance	Latency, TTFT, estimated cost, stop sequence
Container	Container ID and expiration (only shown for code execution calls)
System Prompt	The system prompt sent to Claude
Request Configuration	Model, max tokens, temperature, top-p, top-k, effort, cache control, thinking config
Messages Sent	The user/assistant message history sent in the request
Tools Provided	JSON of tool definitions (if any were provided)
Thinking Blocks	Expandable blocks showing Claude's chain-of-thought reasoning
Tool Use	Expandable blocks for each tool invocation showing name, ID, input, and output
Raw Request JSON	Full request payload as formatted JSON
Raw Response JSON	Full response payload as formatted JSON

Playground Tab

The playground provides an interactive interface for sending test prompts to the Claude API with full control over model settings. It uses a streaming SSE connection for real-time response display.

Settings Panel (Left Column)

The settings panel contains:

Prompt fields:

System prompt (optional textarea)
User message (required textarea, supports Ctrl+Enter to submit)

Core toggles:

Model selection (Opus 4.6, Sonnet 4.6, Haiku 4.5)
Extended thinking (on/off)
Prompt caching (on/off)
Web search (on/off, reveals additional config when enabled)
Web fetch (on/off, reveals additional config when enabled)
Code execution (on/off)

Generation settings (collapsible):

Effort level (default/low/medium/high/max)
Max tokens
Temperature (0-1)
Top P, Top K
Stop sequences (comma-separated)

Web search settings (shown when web search is enabled):

Allowed/blocked domains
Max uses
User location (country, region, city, timezone)

Web fetch settings (shown when web fetch is enabled):

Allowed/blocked domains
Max uses
Citations toggle
Max content tokens

Beta features:

Comma-separated beta flag strings

After submission, a "Computed Request" card shows the exact JSON payload sent to the API.

Response Panel (Right Column)

The response panel shows:

Streaming text output with real-time token accumulation
Thinking blocks (expandable, shown when extended thinking is enabled)
Tool use results (web search results, web fetch content, code execution output)
Final response metadata: model, stop reason, token usage with cache breakdown

The streaming is handled by usePlaygroundStream which calls the /api/ai/playground streaming endpoint and processes SSE events incrementally. The consumeStream utility parses text chunks, thinking chunks, tool results, and the final response from the event stream.

Backend

The playground's streaming endpoint is separate from the tRPC mutation. The aiLogs.sendPrompt mutation exists for non-streaming fallback, but the primary path uses a custom streaming route handler.

The buildServerTools helper in ai-logs-helpers.ts converts the playground toggle state into Claude API server-side tool definitions:

Web search: web_search_20260209 with optional domain filters, max uses, and user location
Web fetch: web_fetch_20260209 with optional domain filters, citations, and content token limits
Code execution: code_execution_20260120

All playground calls use the admin-playground feature tag for tracking in the AI logs dashboard.

Component Structure

ai-logs-content.tsx
  |-- Tabs
  |   |-- Dashboard tab
  |   |   |-- ai-logs-dashboard.tsx
  |   |   |   |-- ai-logs-kpi-cards.tsx
  |   |   |   |-- ai-logs-usage-chart.tsx (Recharts AreaChart)
  |   |   |   |-- ai-logs-model-chart.tsx (Recharts BarChart)
  |   |   |   |-- ai-logs-table.tsx (paginated, filterable)
  |   |   |   |-- ai-logs-detail.tsx (collapsible sections)
  |   |
  |   |-- Playground tab
  |       |-- ai-playground.tsx
  |           |-- playground-settings.tsx (left column)
  |           |   |-- settings-fields.tsx (shared input components)
  |           |-- playground-response.tsx (right column)
  |           |   |-- thinking-section.tsx
  |           |   |-- tool-use-section.tsx
  |           |   |-- web-results.tsx
  |           |-- use-playground.ts (streaming hook)
  |           |-- use-playground-settings.ts (form state)
  |           |-- consume-stream.ts (SSE parser)
  |           |-- types.ts (Model, Effort, ThinkingBlock, etc.)

Admin Dashboard Overview -- all admin views and shared patterns
Authorization -- Router Enforcement -- how authorizedProcedure protects these endpoints