2c6c961e08
- Render structured artifacts from agent results with type-aware formatting: code blocks with syntax highlighting and copy button, terminal-style command output, search result cards, and text findings - Make FinalResult panel collapsible (default collapsed) with scrollable content (max-h-96) to prevent dominating the chat view - Add clickable URL detection in summaries and artifact content - Fix code block contrast for both light and dark mode - Animate progress bar with pulse ring on active step and gradient shimmer on connecting lines - Fix tab-switching bug: use module-level orchestrationStore singleton so orchestration state survives route navigation - Remove sample/demo data seeding and clean up persisted localStorage entries from previous sample sessions - Remove showSampleBadge prop from PageHeader - Regenerate proto types for new Artifact message and ArtifactType enum - Update README project structure (remove deleted data/ directory) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
98 lines
3.8 KiB
Markdown
98 lines
3.8 KiB
Markdown
# llm-multiverse-ui
|
|
|
|
Web frontend for the **llm-multiverse** orchestration system. Built with SvelteKit 5, TypeScript, Tailwind CSS v4, and gRPC-Web (Connect).
|
|
|
|
## Prerequisites
|
|
|
|
- Node.js 20+
|
|
- A running llm-multiverse gRPC backend (the UI proxies requests through Vite/your production reverse proxy)
|
|
|
|
## Getting Started
|
|
|
|
```bash
|
|
# Install dependencies
|
|
npm install
|
|
|
|
# Generate protobuf TypeScript definitions (only needed after .proto changes)
|
|
npm run generate
|
|
|
|
# Start the dev server
|
|
npm run dev
|
|
```
|
|
|
|
The app starts at `http://localhost:5173` by default.
|
|
|
|
## Scripts
|
|
|
|
| Command | Description |
|
|
| ------------------- | ------------------------------------------------ |
|
|
| `npm run dev` | Start Vite dev server with HMR |
|
|
| `npm run build` | Production build |
|
|
| `npm run preview` | Preview the production build locally |
|
|
| `npm run check` | Run svelte-check for TypeScript/Svelte errors |
|
|
| `npm run lint` | Run ESLint |
|
|
| `npm run format` | Format code with Prettier |
|
|
| `npm run generate` | Regenerate protobuf TypeScript from `.proto` files |
|
|
|
|
## Using the UI
|
|
|
|
### Landing Page
|
|
|
|
The root page (`/`) links to every section of the app.
|
|
|
|
### Chat (`/chat`)
|
|
|
|
The main interface for interacting with the orchestrator.
|
|
|
|
- **Sessions** are listed in the left sidebar. Click **+ New Chat** to start a session, or select an existing one. On mobile, tap the hamburger menu to open the sidebar.
|
|
- Type a message and press **Enter** (or the **Send** button) to send it. While the orchestrator is processing, a progress indicator and thinking section show the current state.
|
|
- **Session Config** (gear icon / "Config" button) opens a right sidebar where you can adjust the override level, disable specific tools, grant permissions, and save/load presets.
|
|
- If a request fails, an error banner appears with a **Retry** button.
|
|
- Navigation links to Lineage, Memory, and Audit are in the header (hidden on small screens).
|
|
|
|
### Agent Lineage (`/lineage`)
|
|
|
|
Visualizes the agent spawn tree as an interactive SVG diagram.
|
|
|
|
- Click a node to view agent details (ID, type, depth, children) in a side panel.
|
|
- A legend at the bottom shows agent type colors.
|
|
- Supports dark mode with theme-aware SVG colors.
|
|
|
|
### Memory Candidates (`/memory`)
|
|
|
|
Lists memory candidates captured during orchestration, grouped by session.
|
|
|
|
- **Source filter** — filter by Tool Output, Model Knowledge, or Web.
|
|
- **Confidence slider** — set a minimum confidence threshold.
|
|
- Each card shows the candidate content, source badge, and a confidence bar.
|
|
|
|
### Audit Log (`/audit`)
|
|
|
|
Timeline view of orchestration events for each session.
|
|
|
|
- Select a session from the dropdown, then optionally filter by event type (State Change, Tool, Error, Message).
|
|
- Events are displayed chronologically with date separators and color-coded badges.
|
|
|
|
### Theme
|
|
|
|
Use the theme toggle (sun/moon icon in any header) to cycle between **System**, **Light**, and **Dark** modes. The preference is persisted in localStorage.
|
|
|
|
## Project Structure
|
|
|
|
```
|
|
src/
|
|
lib/
|
|
components/ Svelte components (Backdrop, PageHeader, MessageInput, ...)
|
|
composables/ Reactive composables (useOrchestration)
|
|
proto/ Generated protobuf TypeScript
|
|
services/ gRPC client (orchestrator)
|
|
stores/ Svelte 5 reactive stores (sessions, audit, memory, theme, ...)
|
|
types/ TypeScript types and helpers (lineage, resultSource)
|
|
utils/ Shared utilities (date formatting, session config)
|
|
routes/
|
|
chat/ Chat page
|
|
lineage/ Agent lineage visualization
|
|
memory/ Memory candidates browser
|
|
audit/ Audit log timeline
|
|
```
|