feat: add web UI with editorial dashboard, analytics, and chameleon mascot

Adds `llm-log ui` command serving a browser-based dashboard at localhost:8080.

Web UI:
- Dashboard with real-time animated metrics, area charts, provider bars
- Requests page with pagination, filters, sorting, click-to-copy values
- Analytics with tabbed sections (Cost/Tokens/Performance), summary strips
- Pixel-art chameleon mascot — roams UI, changes color per provider, interactive

Backend:
- Fix zero-time bug in DashboardStats/Analytics
- Fix unbounded dashboard cache, NULL cursor pagination
- Refactor Analytics into sub-methods, extract timeFilter helper

Quality:
- Code splitting (React.lazy), WCAG contrast, ARIA labels
- Mobile responsive, prefers-reduced-motion, search debounce
- Chart colors tokenized, typography normalized, animations polished

Author: lanesket

.github/workflows/build.yml

@@ -17,6 +17,13 @@ jobs:
       - uses: actions/setup-go@v6
         with:
           go-version-file: go.mod
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: npm
+          cache-dependency-path: web/package-lock.json
+      - name: Build web UI
+        run: cd web && npm ci && npm run build
       - run: go vet ./...
       - run: go test ./...
 
@@ -31,6 +38,11 @@ jobs:
       - uses: actions/setup-go@v6
         with:
           go-version-file: go.mod
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: npm
+          cache-dependency-path: web/package-lock.json
       - uses: goreleaser/goreleaser-action@v6
         with:
           version: latest

.gitignore

@@ -12,3 +12,8 @@ completions/
 .DS_Store
 
 .claude/settings.local.json
+
+# Web UI
+web/node_modules/
+web/dist/
+!web/dist/index.html

.goreleaser.yml

@@ -2,6 +2,8 @@ version: 2
 
 before:
   hooks:
+    - go mod tidy
+    - cd web && npm ci && npm run build
     - go build -o /tmp/llm-log-completions ./cmd/llm-log
     - mkdir -p completions
     - sh -c "/tmp/llm-log-completions completion bash > completions/llm-log.bash"

CHANGELOG.md

@@ -1,8 +1,15 @@
 # Changelog
 
-## [0.4.0] — 2026-03-21
+## [0.4.0] — 2026-03-22
 
 ### Added
+- **Web UI** — `llm-log ui` opens a browser-based dashboard at `localhost:9923`
+  - **Dashboard** — real-time metrics with animated counters, area charts, provider breakdown bars, top models table
+  - **Requests** — paginated table with sorting, filtering, search (debounced), page size selector, click-to-open detail dialog
+  - **Request Detail** — full-page view with copyable values (model, provider, endpoint, ID, metrics), two-column JSON viewer
+  - **Analytics** — tabbed sections (Cost / Tokens / Performance) with summary strips, 10 chart types including heatmap
+- **Chameleon mascot** — pixel-art pet that roams the UI, changes color to match the dominant provider, sleeps when proxy is off, reacts to clicks (pet / startle), has a terminal "home"
+- **Click-to-copy** — model names, providers, endpoints, request IDs, metric values are all copyable with visual feedback
 - **7 new providers** — Groq, Together AI, Fireworks, DeepSeek, Mistral, Perplexity, xAI
   - DeepSeek: custom cache token support (`prompt_cache_hit_tokens`)
   - Perplexity: Sonar API format (`/v1/sonar` endpoint)
@@ -11,9 +18,16 @@
 - **Wire format parsers moved to `provider/wire` subpackage** — clear separation between providers (domain → format mapping) and wire formats (response parsing)
 - Deduplicated Chat Completions parsing via `usageMapper` callback — adding new OpenAI-compatible providers requires only a usage mapper function
 - Removed unused `statusCode` parameter from `Format.Parse` interface
+- **Analytics refactored** — split into 7 sub-methods with proper row scoping
+- **Dashboard cache** — replaced unbounded map with single-entry cache
+- **`timeFilter` helper** — extracted shared WHERE clause builder to `helpers.go`
+- Code splitting — Dashboard and Analytics lazy-loaded (recharts deferred)
 
 ### Fixed
 - **Error responses (4xx/5xx) are now tracked** — model name is recovered from the request body when the API response doesn't include it
+- **Zero-time bug** — `DashboardStats` and `Analytics` now handle all-time queries correctly (IsZero check)
+- **NULL cursor pagination** — COALESCE for nullable sort columns prevents skipped records
+- **Proxy port** — unified constant, no more magic numbers
 
 ## [0.3.0] — 2026-03-19
 

Makefile

@@ -1,7 +1,7 @@
 VERSION ?= $(shell git describe --tags --always --dirty 2>/dev/null || echo dev)
 LDFLAGS  = -s -w -X github.com/lanesket/llm.log/internal/cli.Version=$(VERSION)
 
-.PHONY: build test lint clean setup-hooks
+.PHONY: build test lint clean setup-hooks build-ui dev-ui
 
 build:
 	go build -ldflags "$(LDFLAGS)" -o llm-log ./cmd/llm-log
@@ -17,3 +17,10 @@ clean:
 
 setup-hooks:
 	git config core.hooksPath .githooks
+
+build-ui:
+	cd web && npm ci && npm run build
+	go build -ldflags "$(LDFLAGS)" -o llm-log ./cmd/llm-log
+
+dev-ui:
+	go run -ldflags "$(LDFLAGS)" ./cmd/llm-log ui --dev

README.md

@@ -30,7 +30,8 @@ A local proxy that sits between your apps and LLM APIs. It intercepts requests,
 - **All API formats** — Chat Completions, Responses API, Anthropic Messages
 - **Real costs** — auto-updated pricing for 780+ models, cache token breakdowns
 - **Claude Code aware** — on a subscription? see what you'd pay without it. On API keys? see your actual spend
-- **TUI dashboard** — overview, charts, cost breakdown, request inspector
+- **Web UI** — browser-based dashboard with real-time charts, analytics, and detailed request inspection
+- **TUI dashboard** — terminal-based overview, charts, cost breakdown, request inspector
 - **Minimal overhead** — logging is async and never blocks your requests
 - **Single binary** — pure Go, no CGO, no dependencies
 
@@ -66,7 +67,19 @@ After setup, **open a new terminal** (or run `source ~/.zshrc`) — then every L
 > Tools that route through their own servers (Cursor Pro, VS Code Copilot with built-in subscription) won't be logged.
 > If the tool supports your own API key, requests go directly to the provider and llm.log captures them.
 
-## Dashboard
+## Web UI
+
+```bash
+llm-log ui   # opens http://localhost:9923
+```
+
+| Page | What it shows |
+|------|---------------|
+| **Dashboard** | Real-time metrics (animated), area charts (requests/cost/tokens), provider breakdown, top models |
+| **Requests** | Paginated table with sorting, filters, search. Click a row to see full detail with copyable values |
+| **Analytics** | Tabbed sections — Cost (over time, cumulative, by provider, distribution, top expensive), Tokens (over time, avg/model, cache hit rate), Performance (latency, heatmap) |
+
+## TUI Dashboard
 
 ```bash
 llm-log dashboard   # or: llm-log dash

internal/cli/daemon.go

@@ -3,13 +3,10 @@ package cli
 import (
 	"fmt"
 	"log"
-	"net"
 	"os"
-	"os/exec"
 	"os/signal"
 	"path/filepath"
 	"syscall"
-	"time"
 
 	"github.com/lanesket/llm.log/internal/daemon"
 	"github.com/lanesket/llm.log/internal/format"
@@ -42,23 +39,9 @@ var startCmd = &cobra.Command{
 		clearEnvFile()
 		deactivateSystemProxy()
 
-		exe, err := os.Executable()
+		pid, err := daemon.StartDaemon(proxyAddr, daemonSysProcAttr())
 		if err != nil {
-			return fmt.Errorf("find executable: %w", err)
-		}
-		proc := exec.Command(exe, "run")
-		proc.Stdout = nil
-		proc.Stderr = nil
-		proc.SysProcAttr = daemonSysProcAttr()
-
-		if err := proc.Start(); err != nil {
-			return fmt.Errorf("start daemon: %w", err)
-		}
-
-		// Wait for the proxy to actually start listening before activating env
-		if !waitForPort(proxyAddr, 5*time.Second) {
-			_ = proc.Process.Kill()
-			return fmt.Errorf("daemon failed to start — check ~/.llm.log/llm-log.log")
+			return err
 		}
 
 		// Refresh CA bundle (system CAs may have changed since setup)
@@ -69,7 +52,7 @@ var startCmd = &cobra.Command{
 		}
 		activateSystemProxy()
 
-		fmt.Printf("Started llm-log daemon (PID %d) on %s\n", proc.Process.Pid, proxyAddr)
+		fmt.Printf("Started llm-log daemon (PID %d) on %s\n", pid, proxyAddr)
 		fmt.Println("HTTPS_PROXY is now active for new terminals and apps")
 		return nil
 	},
@@ -80,19 +63,6 @@ func hasStaleProxyState() bool {
 	return err == nil
 }
 
-func waitForPort(addr string, timeout time.Duration) bool {
-	deadline := time.Now().Add(timeout)
-	for time.Now().Before(deadline) {
-		conn, err := net.DialTimeout("tcp", addr, 100*time.Millisecond)
-		if err == nil {
-			conn.Close()
-			return true
-		}
-		time.Sleep(50 * time.Millisecond)
-	}
-	return false
-}
-
 var stopCmd = &cobra.Command{
 	Use:   "stop",
 	Short: "Stop the proxy daemon",

internal/cli/ui.go

@@ -0,0 +1,67 @@
+package cli
+
+import (
+	"fmt"
+	"io/fs"
+	"net/http"
+	"os/exec"
+	"runtime"
+
+	"github.com/lanesket/llm.log/internal/storage"
+	"github.com/lanesket/llm.log/internal/ui"
+	"github.com/lanesket/llm.log/web"
+	"github.com/spf13/cobra"
+)
+
+var uiCmd = &cobra.Command{
+	Use:   "ui",
+	Short: "Open web dashboard",
+	RunE: func(cmd *cobra.Command, args []string) error {
+		port, _ := cmd.Flags().GetInt("port")
+		devMode, _ := cmd.Flags().GetBool("dev")
+
+		dataDir := DataDir()
+
+		store, err := storage.Open(dataDir)
+		if err != nil {
+			return fmt.Errorf("open database: %w", err)
+		}
+		defer store.Close()
+
+		var webFS fs.FS
+		if !devMode {
+			sub, err := fs.Sub(web.DistFS, "dist")
+			if err != nil {
+				return fmt.Errorf("embed fs: %w", err)
+			}
+			webFS = sub
+		}
+
+		srv := ui.New(store, dataDir, webFS, devMode)
+
+		addr := fmt.Sprintf("127.0.0.1:%d", port)
+		url := fmt.Sprintf("http://%s", addr)
+		fmt.Printf("llm.log UI running at %s\n", url)
+
+		if !devMode {
+			openBrowser(url)
+		}
+
+		return http.ListenAndServe(addr, srv)
+	},
+}
+
+func init() {
+	uiCmd.Flags().Int("port", 9923, "port for the web UI server")
+	uiCmd.Flags().Bool("dev", false, "development mode (API only, no static files)")
+	rootCmd.AddCommand(uiCmd)
+}
+
+func openBrowser(url string) {
+	switch runtime.GOOS {
+	case "darwin":
+		exec.Command("open", url).Start()
+	case "linux":
+		exec.Command("xdg-open", url).Start()
+	}
+}

internal/daemon/start.go

@@ -0,0 +1,48 @@
+package daemon
+
+import (
+	"fmt"
+	"net"
+	"os"
+	"os/exec"
+	"syscall"
+	"time"
+)
+
+// StartDaemon forks a new process running "llm-log run" and waits for it to
+// start listening on the given address. Returns the PID of the new process.
+func StartDaemon(addr string, procAttr *syscall.SysProcAttr) (int, error) {
+	exe, err := os.Executable()
+	if err != nil {
+		return 0, fmt.Errorf("find executable: %w", err)
+	}
+	proc := exec.Command(exe, "run")
+	proc.Stdout = nil
+	proc.Stderr = nil
+	proc.SysProcAttr = procAttr
+
+	if err := proc.Start(); err != nil {
+		return 0, fmt.Errorf("start daemon: %w", err)
+	}
+
+	// Wait for the proxy to actually start listening
+	if !waitForPort(addr, 5*time.Second) {
+		_ = proc.Process.Kill()
+		return 0, fmt.Errorf("daemon failed to start — check ~/.llm.log/llm-log.log")
+	}
+
+	return proc.Process.Pid, nil
+}
+
+func waitForPort(addr string, timeout time.Duration) bool {
+	deadline := time.Now().Add(timeout)
+	for time.Now().Before(deadline) {
+		conn, err := net.DialTimeout("tcp", addr, 100*time.Millisecond)
+		if err == nil {
+			conn.Close()
+			return true
+		}
+		time.Sleep(50 * time.Millisecond)
+	}
+	return false
+}

internal/proxy/batcher_test.go

@@ -41,9 +41,25 @@ func (m *mockStore) Recent(_ int, _, _ time.Time, _, _ string) ([]storage.Record
 }
 func (m *mockStore) Get(_ int64) (*storage.Record, error)     { return nil, nil }
 func (m *mockStore) Sources(_, _ time.Time) ([]string, error) { return nil, nil }
+func (m *mockStore) List(_ storage.ListFilter) (*storage.ListResult, error) {
+	return &storage.ListResult{}, nil
+}
+func (m *mockStore) DashboardStats(_, _ time.Time) (*storage.DashboardData, error) {
+	return &storage.DashboardData{}, nil
+}
 func (m *mockStore) PrunePreview(_ time.Time) (storage.PruneStats, error) {
 	return storage.PruneStats{}, nil
 }
+func (m *mockStore) Analytics(_, _ time.Time, _ string) (*storage.AnalyticsData, error) {
+	return &storage.AnalyticsData{}, nil
+}
+func (m *mockStore) SearchByBody(_ string, _, _ time.Time, _, _ int) ([]int64, error) {
+	return nil, nil
+}
+func (m *mockStore) Filters(_, _ time.Time) (*storage.FilterOptions, error) {
+	return &storage.FilterOptions{}, nil
+}
+func (m *mockStore) MaxID() (int64, error)                  { return 0, nil }
 func (m *mockStore) PruneBodies(_ time.Time) (int64, error) { return 0, nil }
 func (m *mockStore) Vacuum() error                          { return nil }
 func (m *mockStore) Close() error                           { return nil }