Playground Studio

Feature: Playground Studio — unified AI testing workspace for /dashboard/playground. Plans: 17-playground-studio-redesign.plan.md + _orchestration/master-plan-group-C.md Status: Released in v3.8.6

Overview

Playground Studio transforms /dashboard/playground from a simple Monaco-based editor into a full-featured testing workspace. It replaces the legacy page.tsx with a PlaygroundStudio shell that renders four tabs and a shared config pane.

┌ Playground ──────────────────────────────────────────────────────────┐
│ [💬 Chat] [⚖ Compare] [{} API] [🔧 Build]     142↑ 38↓ · $0.002 </>│
├──────────────────────────────────────────┬───────────────────────────┤
│  {active tab content}                    │ ─ Config                  │
│                                          │ Endpoint  [chat ∨]        │
│                                          │ Model     [gpt-5.4 ∨]     │
│                                          │ System    [textarea]      │
│                                          │ Temp      ▕▕▔▔ 0.7        │
│                                          │ Presets [▾ load][save]    │
│                                          │ [✨ Improve prompt]        │
└──────────────────────────────────────────┴───────────────────────────┘

Tabs

Chat Tab

Evolves ChatPlayground.tsx into a multi-turn streaming workbench:

• Full markdown rendering via MarkdownMessage.tsx (code blocks, tables, lists, links).
• System prompt sourced from the shared Config pane.
• Token/cost per message (prompt + completion tokens).
• Regenerate last response.
• Sends to POST /v1/chat/completions with SSE streaming.

Compare Tab

The key differentiator for a proxy: run 1 prompt across up to 4 models in parallel.

• Up to 4 columns, each independently streaming from /v1/chat/completions.
• + Add model button (Cmd+K shortcut) to add columns.
• Run all ▶ triggers all streams simultaneously via Promise.all + per-column AbortController.
• Global Cancel all aborts every in-flight stream.
• Per-column ProviderMetrics shows TTFT, TPS, tokens, and estimated cost in real time.
• Metrics labelled "client-side estimate" (D12) — measured from first SSE chunk.

API Tab

Preserves 100% of the original Monaco editor for power users (D14):

• 10 endpoints: chat completions, completions, embeddings, images, audio, speech, transcriptions, moderations, rerank, search.
• Multimodal file upload.
• SSE streaming with real-time output.
• Wrapped as ApiTab.tsx (lazy-loaded, ssr: false).

Build Tab

Tools/function calling and structured output UI:

• ToolsBuilder.tsx — add/edit/remove tools[] with JSON schema editor per tool. Validates parameters via ToolDefinitionSchema (Zod).
• StructuredOutputEditor.tsx — toggle JSON mode + JSON schema editor. Validates response against schema via StructuredOutputSchema (Zod).
• Sends request to /v1/chat/completions with tools[] and/or response_format.

Config Pane (Shared)

StudioConfigPane.tsx — always visible, collapsible.

State is lifted to PlaygroundStudio.tsx and passed down to all tabs. Switching tabs preserves config state.

Top Bar

StudioTopBar.tsx:

• Tab switcher (role="tablist").
• TokenCostCounter — live token (↑/↓) and estimated cost display.
• Export code button (</>) — opens ExportCodeModal.

Export Code Modal

ExportCodeModal.tsx uses codeExport.ts to generate curl / Python / TypeScript snippets from the current PlaygroundState. API key placeholder is always $OMNIROUTE_API_KEY (D11).

Prompt Improver

ImprovePromptButton.tsx → useImprovePrompt.ts → POST /api/playground/improve-prompt:

1. Modal warns "will consume quota".
2. On confirm, sends { system, prompt, model, tone } to the route.
3. Route calls /v1/chat/completions internally with promptImprover.META_SYSTEM_PROMPT.
4. Returns { improvedSystem?, improvedPrompt?, tokensIn, tokensOut }.
5. UI patches the Config pane system prompt and the Chat tab user prompt.

Presets

PresetPicker.tsx → usePresets.ts → /api/playground/presets/*:

• Stored in playground_presets SQLite table (migration 084_playground_presets.sql).
• Each preset stores: name, endpoint, model, system, params_json, created_at.
• CRUD: GET list, POST create, GET /:id, PUT /:id, DELETE /:id.

Stream Metrics

useStreamMetrics.ts + streamMetrics.ts (pure function):

• start() — records request start time.
• onFirstChunk() — records TTFT.
• onChunk(n) — accumulates completion token count.
• finish(usage?) — computes final metrics: ttftMs, totalMs, tps, tokensIn, tokensOut, costUsd.
• Pricing from static table in src/lib/playground/types.ts (labelled "estimated" — D13).

Backend Routes

Auth: optional (REQUIRE_API_KEY). Errors via buildErrorBody() (Hard Rule #12).

Key Files

Troubleshooting

References

• Master plan: _tasks/features-v3.8.6/refactorpages/_orchestration/master-plan-group-C.md
• Feature plan: _tasks/features-v3.8.6/refactorpages/17-playground-studio-redesign.plan.md
• Code export: src/lib/playground/codeExport.ts
• Prompt improver: src/lib/playground/promptImprover.ts
• Search Tools Studio: docs/frameworks/SEARCH_TOOLS_STUDIO.md