# 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
```