ui-svelte: add Playground page with chat interface

[mostlygeek]

Add a new Playground page with tabbed interface for Chat, Images, and
Audio. The Chat tab is fully functional with streaming responses and
markdown rendering.

• Add Chat tab with model selection and streaming responses
• Add markdown rendering with syntax highlighting (marked + highlight.js)
• Add Images and Audio placeholder tabs
• Persist selected model and tab in localStorage
• Support streaming cancellation and new chat functionality

https://claude.ai/code/session_01AKRAvCcarx2kKLVTsCcbfD

Summary by CodeRabbit

• New Features

  • Added a Playground UI with tabbed interface featuring Chat with streaming responses and markdown rendering, Image generation, Audio transcription, and Text-to-speech capabilities.
  • Chat interface includes model selection, system prompts, temperature settings, message editing, and regeneration.
  • Enhanced configuration handling for environment variable macros within YAML files.

• Backend Improvements

  • Added new endpoints for audio voice retrieval and streaming chat completions.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

• 🔍 Trigger a full review

Walkthrough

This PR introduces a new Svelte-based Playground UI (ui-svelte/) with tabbed Chat, Images, Audio, and Speech interfaces, replacing the legacy React UI (ui/). It adds streaming chat capability via SSE, markdown rendering with syntax highlighting, and Markdown support for chat messages. Backend changes include environment macro substitution logic that respects YAML comments and a new /v1/audio/voices endpoint with proxy support.

Changes

Cohort / File(s)	Summary
UI Framework Migration ui/*	Deleted entire legacy React UI including App.tsx, components, contexts, pages, configuration, and all related dependencies. Removes APIProvider, ThemeProvider, Header, Models, Activity, LogViewer pages and their associated types/styles.
Svelte UI Framework ui-svelte/package.json, ui-svelte/src/main.ts, ui-svelte/vite.config.ts	Added dependencies for markdown rendering (remark-parse, remark-gfm, remark-rehype, unified, unist-util-visit), syntax highlighting (highlight.js), UI components (lucide-svelte), and HAST types. Configured Vite proxy for /v1 backend route and imported highlight.js stylesheet.
Playground Route & Navigation ui-svelte/src/App.svelte, ui-svelte/src/components/Header.svelte, ui-svelte/src/routes/Playground.svelte	Added Playground route to App.svelte with persistent tab state (Chat, Images, Speech, Audio). Updated Header.svelte with Playground navigation link. Playground.svelte implements tabbed interface using persistentStore for selected tab persistence.
Chat Interface & Streaming ui-svelte/src/components/playground/ChatInterface.svelte, ui-svelte/src/lib/chatApi.ts, ui-svelte/src/components/playground/ChatMessage.svelte	Implemented ChatInterface with model selection, streaming responses via SSE, reasoning content timing, message editing/regeneration, and auto-scroll. chatApi.ts provides streamChatCompletion async generator parsing SSE data:data lines, handling [DONE], and supporting AbortSignal cancellation. ChatMessage.svelte renders role-based styled messages with Markdown and code highlighting.
Markdown & Syntax Highlighting ui-svelte/src/lib/markdown.ts	Implemented renderMarkdown() using Unified stack (remark-parse, remark-gfm, remark-rehype, rehype-stringify) with custom hljs integration for syntax highlighting and HTML escaping for XSS protection. Handles parsing errors with safe fallback.
Audio & Speech Interfaces ui-svelte/src/components/playground/AudioInterface.svelte, ui-svelte/src/components/playground/SpeechInterface.svelte, ui-svelte/src/lib/audioApi.ts, ui-svelte/src/lib/speechApi.ts	Added AudioInterface for audio file transcription with model selection, file validation (MP3/WAV, 25MB limit), drag-and-drop support, and copy-to-clipboard. SpeechInterface converts text to speech with model/voice selection, fetches available voices, auto-play option, and audio download. audioApi.ts uploads audio files to /v1/audio/transcriptions; speechApi.ts generates speech via /v1/audio/speech.
Image Generation Interface ui-svelte/src/components/playground/ImageInterface.svelte, ui-svelte/src/lib/imageApi.ts	Added ImageInterface with model/size selection, prompt input, and generation workflow with AbortController cancellation and error handling. imageApi.ts POSTs to /v1/images/generations with prompt, model, and size parameters.
UI Components & Utilities ui-svelte/src/components/playground/PlaceholderTab.svelte, ui-svelte/src/components/playground/ExpandableTextarea.svelte	Added PlaceholderTab for reusable "To be implemented" placeholders. ExpandableTextarea provides inline textarea with full-screen modal editing capability, auto-focus, and keyboard shortcuts (Escape to close, Enter to save).
Type Definitions ui-svelte/src/lib/types.ts	Added new exported interfaces: ChatMessage (role, content, optional reasoning_content, reasoningTimeMs), ChatCompletionRequest, ImageGenerationRequest/Response, AudioTranscriptionRequest/Response, SpeechGenerationRequest for API type safety.
Backend Config: Comment-Aware Macro Substitution proxy/config/config.go, proxy/config/config_test.go	Enhanced substituteEnvMacros to strip YAML comments before scanning environment macros, preventing macro expansion inside comments. Added substituteEnvMacrosInString helper for separate scanning/substitution stages. Includes fallback to original substitution on invalid YAML. Added comprehensive test coverage for comment handling in various positions (plain, indented, inline).
Audio Voices Endpoint cmd/simple-responder/simple-responder.go, proxy/proxymanager.go, proxy/proxymanager_test.go	Added GET /v1/audio/voices endpoint to simple-responder returning hardcoded voices array. Added proxyGETModelHandler in ProxyManager for routing GET requests to local/peer handlers with model parameter validation. Refactored proxyOAIPostFormHandler to dynamically select nextHandler (local or peer). Includes test suite validating response format and error cases.
Test Infrastructure proxy/helpers_test.go	Updated getTestSimpleResponderConfigPort to normalize paths to UNIX-style slashes via filepath.ToSlash for cross-platform YAML test config generation.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~70 minutes

Possibly related PRs

• mostlygeek/llama-swap#487 — Adds the ui-svelte Svelte UI port with identical Playground components, routes, and types
• mostlygeek/llama-swap#496 — Modifies proxy/config/config.go's environment macro substitution to ignore macros in YAML comments
• mostlygeek/llama-swap#470 — Related changes to proxy/config/config.go environment macro handling

Suggested labels

enhancement, UI

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 33.33% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'ui-svelte: add Playground page with chat interface' is clear, concise, and directly reflects the main change: adding a new Playground page with a chat interface to the ui-svelte codebase.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch claude/fix-audio-voices-test-wgMae

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}