feat(ui): make admin settings dynamic based on backend response

This update changes the admin settings page to dynamically render settings fields based on the JSON response from the backend, rather than hardcoding them. This ensures that new settings added to the backend are automatically available in the UI without code changes.

- Specific handling for known fields like name, description, urls, keys, mints, and relays remains to provide a polished UX.
- All other fields are rendered dynamically based on their type (boolean, number, string, array).
- Sensitive fields (keys, passwords) are automatically masked.
- Specific internal/unused fields are ignored.

.dockerignore

@@ -8,4 +8,6 @@ compose.testing.yml
 .todo
 .github
 .vscode
-.DS_Store
+.DS_Store
+**/node_modules
+ui/.next

README.md

@@ -162,7 +162,7 @@ Once built, the UI is automatically served by the FastAPI backend:
 
 - **Dashboard**: `http://localhost:8000/`
 - **Login**: `http://localhost:8000/login`
-- **Models Management**: `http://localhost:8000/model
+- **Models Management**: `http://localhost:8000/model`
 - **Providers Management**: `http://localhost:8000/providers`
 - **Settings**: `http://localhost:8000/settings`
 

pyproject.toml

@@ -1,6 +1,6 @@
 [project]
 name = "routstr"
-version = "0.2.0c"
+version = "0.2.1"
 description = "Payment proxy for your LLM endpoint using cashu and nostr."
 readme = "README.md"
 requires-python = ">=3.11"

routstr/algorithm.py

@@ -153,9 +153,9 @@ def should_prefer_model(
     # Log provider changes when candidate wins
     if should_replace:
         candidate_provider_name = getattr(
-            candidate_provider, "upstream_name", "unknown"
+            candidate_provider, "provider_type", "unknown"
         )
-        current_provider_name = getattr(current_provider, "upstream_name", "unknown")
+        current_provider_name = getattr(current_provider, "provider_type", "unknown")
         logger.debug(
             f"Model selection for alias '{alias}': choosing {candidate_provider_name} "
             f"(cost: ${candidate_adjusted:.6f}) over {current_provider_name} "

routstr/auth.py

@@ -9,7 +9,7 @@ from sqlmodel import col, update
 from .core import get_logger
 from .core.db import ApiKey, AsyncSession
 from .core.settings import settings
-from .payment.cost_caculation import (
+from .payment.cost_calculation import (
     CostData,
     CostDataError,
     MaxCostData,
@@ -337,7 +337,7 @@ async def pay_for_request(
     stmt = (
         update(ApiKey)
         .where(col(ApiKey.hashed_key) == key.hashed_key)
-        .where(col(ApiKey.balance) >= cost_per_request)
+        .where(col(ApiKey.balance) - col(ApiKey.reserved_balance) >= cost_per_request)
         .values(
             reserved_balance=col(ApiKey.reserved_balance) + cost_per_request,
             total_requests=col(ApiKey.total_requests) + 1,

routstr/core/admin.py

@@ -3,7 +3,7 @@ import secrets
 from datetime import datetime, timezone
 from pathlib import Path
 
-from fastapi import APIRouter, Depends, HTTPException, Request
+from fastapi import APIRouter, Depends, HTTPException, Query, Request
 from fastapi.responses import HTMLResponse, RedirectResponse
 from pydantic import BaseModel
 from sqlmodel import select
@@ -18,6 +18,7 @@ from ..wallet import (
     slow_filter_spend_proofs,
 )
 from .db import ApiKey, ModelRow, UpstreamProviderRow, create_session
+from .log_manager import log_manager
 from .logging import get_logger
 from .settings import SettingsService, settings
 
@@ -2790,6 +2791,186 @@ async def get_provider_models(provider_id: int) -> dict[str, object]:
         }
 
 
+class CreateAccountRequest(BaseModel):
+    provider_type: str
+
+
+@admin_router.post(
+    "/api/upstream-providers/create-account",
+    dependencies=[Depends(require_admin_api)],
+)
+async def create_provider_account_by_type(
+    payload: CreateAccountRequest,
+) -> dict[str, object]:
+    """Create a new account with a provider by provider type (before provider exists in DB)."""
+    from ..upstream import upstream_provider_classes
+
+    provider_class = next(
+        (
+            cls
+            for cls in upstream_provider_classes
+            if cls.provider_type == payload.provider_type
+        ),
+        None,
+    )
+    if not provider_class:
+        raise HTTPException(status_code=404, detail="Provider type not found")
+
+    try:
+        account_data = await provider_class.create_account_static()
+
+        return {
+            "ok": True,
+            "account_data": account_data,
+            "message": "Account created successfully",
+        }
+    except NotImplementedError as e:
+        raise HTTPException(
+            status_code=400,
+            detail=f"Provider does not support account creation: {str(e)}",
+        )
+    except Exception as e:
+        logger.error(
+            f"Failed to create account for provider type {payload.provider_type}: {e}"
+        )
+        raise HTTPException(status_code=500, detail=str(e))
+
+
+class TopupRequest(BaseModel):
+    amount: int
+
+
+@admin_router.post(
+    "/api/upstream-providers/{provider_id}/topup",
+    dependencies=[Depends(require_admin_api)],
+)
+async def initiate_provider_topup(
+    provider_id: int, payload: TopupRequest
+) -> dict[str, object]:
+    """Initiate a Lightning Network top-up for the upstream provider account."""
+    from ..upstream.helpers import _instantiate_provider
+
+    async with create_session() as session:
+        provider = await session.get(UpstreamProviderRow, provider_id)
+        if not provider:
+            raise HTTPException(status_code=404, detail="Provider not found")
+
+        upstream_instance = _instantiate_provider(provider)
+        if not upstream_instance:
+            raise HTTPException(
+                status_code=400, detail="Could not instantiate provider"
+            )
+
+        try:
+            logger.info(
+                f"Initiating top-up for provider {provider_id}",
+                extra={"amount": payload.amount},
+            )
+            topup_data = await upstream_instance.initiate_topup(payload.amount)
+            logger.info(
+                "Top-up initiated successfully",
+                extra={
+                    "provider_id": provider_id,
+                    "invoice_id": topup_data.invoice_id,
+                    "amount": topup_data.amount,
+                },
+            )
+
+            response_data = {
+                "ok": True,
+                "topup_data": {
+                    "invoice_id": topup_data.invoice_id,
+                    "payment_request": topup_data.payment_request,
+                    "amount": topup_data.amount,
+                    "currency": topup_data.currency,
+                    "expires_at": topup_data.expires_at,
+                    "checkout_url": topup_data.checkout_url,
+                },
+                "message": "Top-up initiated successfully",
+            }
+            logger.info("Returning response", extra={"response": response_data})
+            return response_data
+        except NotImplementedError as e:
+            logger.error(f"Provider does not support top-up: {e}")
+            raise HTTPException(
+                status_code=400, detail=f"Provider does not support top-up: {str(e)}"
+            )
+        except Exception as e:
+            logger.error(
+                f"Failed to initiate top-up for provider {provider_id}: {e}",
+                extra={"error_type": type(e).__name__, "error": str(e)},
+            )
+            raise HTTPException(status_code=500, detail=str(e))
+
+
+@admin_router.get(
+    "/api/upstream-providers/{provider_id}/topup/{invoice_id}/status",
+    dependencies=[Depends(require_admin_api)],
+)
+async def check_topup_status(provider_id: int, invoice_id: str) -> dict[str, object]:
+    """Check the status of a Lightning Network top-up invoice."""
+    from ..upstream.helpers import _instantiate_provider
+    from ..upstream.ppqai import PPQAIUpstreamProvider
+
+    async with create_session() as session:
+        provider = await session.get(UpstreamProviderRow, provider_id)
+        if not provider:
+            raise HTTPException(status_code=404, detail="Provider not found")
+
+        upstream_instance = _instantiate_provider(provider)
+        if not upstream_instance:
+            raise HTTPException(
+                status_code=400, detail="Could not instantiate provider"
+            )
+
+        if not isinstance(upstream_instance, PPQAIUpstreamProvider):
+            raise HTTPException(
+                status_code=400,
+                detail="Provider does not support top-up status checking",
+            )
+
+        try:
+            paid = await upstream_instance.check_topup_status(invoice_id)
+            return {"ok": True, "paid": paid}
+        except Exception as e:
+            logger.error(
+                f"Failed to check top-up status for provider {provider_id}: {e}"
+            )
+            raise HTTPException(status_code=500, detail=str(e))
+
+
+@admin_router.get(
+    "/api/upstream-providers/{provider_id}/balance",
+    dependencies=[Depends(require_admin_api)],
+)
+async def get_provider_balance(provider_id: int) -> dict[str, object]:
+    """Get the current account balance for the upstream provider."""
+    from ..upstream.helpers import _instantiate_provider
+
+    async with create_session() as session:
+        provider = await session.get(UpstreamProviderRow, provider_id)
+        if not provider:
+            raise HTTPException(status_code=404, detail="Provider not found")
+
+        upstream_instance = _instantiate_provider(provider)
+        if not upstream_instance:
+            raise HTTPException(
+                status_code=400, detail="Could not instantiate provider"
+            )
+
+        try:
+            balance_data = await upstream_instance.get_balance()
+            return {"ok": True, "balance_data": balance_data}
+        except NotImplementedError as e:
+            raise HTTPException(
+                status_code=400,
+                detail=f"Provider does not support balance checking: {str(e)}",
+            )
+        except Exception as e:
+            logger.error(f"Failed to fetch balance for provider {provider_id}: {e}")
+            raise HTTPException(status_code=500, detail=str(e))
+
+
 @admin_router.get(
     "/api/openrouter-presets",
     dependencies=[Depends(require_admin_api)],
@@ -2865,3 +3046,122 @@ h1 { color: #333; }
 .no-logs { text-align: center; color: #666; padding: 40px; }
 .request-id-display { background-color: #e9ecef; padding: 10px; border-radius: 4px; margin-bottom: 20px; font-family: monospace; }
 """
+
+
+@admin_router.get("/api/usage/metrics", dependencies=[Depends(require_admin_api)])
+async def get_usage_metrics(
+    request: Request,
+    interval: int = Query(
+        default=15, ge=1, le=1440, description="Time interval in minutes"
+    ),
+    hours: int = Query(
+        default=24, ge=1, le=168, description="Hours of history to analyze"
+    ),
+) -> dict:
+    """Get usage metrics aggregated by time interval."""
+    return log_manager.get_usage_metrics(interval=interval, hours=hours)
+
+
+@admin_router.get("/api/usage/summary", dependencies=[Depends(require_admin_api)])
+async def get_usage_summary(
+    request: Request,
+    hours: int = Query(
+        default=24, ge=1, le=168, description="Hours of history to analyze"
+    ),
+) -> dict:
+    """Get summary statistics for the specified time period."""
+    return log_manager.get_usage_summary(hours=hours)
+
+
+@admin_router.get("/api/usage/error-details", dependencies=[Depends(require_admin_api)])
+async def get_error_details(
+    request: Request,
+    hours: int = Query(
+        default=24, ge=1, le=168, description="Hours of history to analyze"
+    ),
+    limit: int = Query(
+        default=100, ge=1, le=1000, description="Maximum number of errors to return"
+    ),
+) -> dict:
+    """Get detailed error information."""
+    return log_manager.get_error_details(hours=hours, limit=limit)
+
+
+@admin_router.get(
+    "/api/usage/revenue-by-model", dependencies=[Depends(require_admin_api)]
+)
+async def get_revenue_by_model(
+    request: Request,
+    hours: int = Query(
+        default=24, ge=1, le=168, description="Hours of history to analyze"
+    ),
+    limit: int = Query(
+        default=20, ge=1, le=100, description="Maximum number of models to return"
+    ),
+) -> dict:
+    """
+    Get revenue breakdown by model.
+    """
+    return log_manager.get_revenue_by_model(hours=hours, limit=limit)
+
+
+@admin_router.get("/api/logs", dependencies=[Depends(require_admin_api)])
+async def get_logs_api(
+    request: Request,
+    date: str | None = None,
+    level: str | None = None,
+    request_id: str | None = None,
+    search: str | None = None,
+    limit: int = 100,
+) -> dict[str, object]:
+    """
+    Get filtered log entries.
+
+    Args:
+        date: Filter by specific date (YYYY-MM-DD)
+        level: Filter by log level
+        request_id: Filter by request ID
+        search: Search text in message and name fields (case-insensitive)
+        limit: Maximum number of entries to return
+
+    Returns:
+        Dict containing logs and filter metadata
+    """
+    log_entries = log_manager.search_logs(
+        date=date,
+        level=level,
+        request_id=request_id,
+        search_text=search,
+        limit=limit,
+    )
+
+    return {
+        "logs": log_entries,
+        "total": len(log_entries),
+        "date": date,
+        "level": level,
+        "request_id": request_id,
+        "search": search,
+        "limit": limit,
+    }
+
+
+@admin_router.get("/api/logs/dates", dependencies=[Depends(require_admin_api)])
+async def get_log_dates_api(request: Request) -> dict[str, object]:
+    logs_dir = Path("logs")
+    dates = []
+
+    if logs_dir.exists():
+        log_files = sorted(
+            logs_dir.glob("app_*.log"), key=lambda x: x.stat().st_mtime, reverse=True
+        )
+
+        for log_file in log_files[:30]:
+            try:
+                filename = log_file.name
+                date_str = filename.replace("app_", "").replace(".log", "")
+                dates.append(date_str)
+            except Exception:
+                continue
+
+    return {"dates": dates}

routstr/core/log_manager.py

@@ -0,0 +1,469 @@
+import json
+from collections import defaultdict
+from datetime import datetime, timedelta, timezone
+from pathlib import Path
+from typing import Any, Iterator
+
+from .logging import get_logger
+
+logger = get_logger(__name__)
+
+
+class LogManager:
+    def __init__(self, logs_dir: Path = Path("logs")):
+        self.logs_dir = logs_dir
+
+    def _yield_log_entries(
+        self,
+        hours_back: int | None = None,
+        specific_date: str | None = None,
+        reverse_files: bool = False,
+        max_files: int | None = None,
+    ) -> Iterator[dict[str, Any]]:
+        """
+        Yields log entries from files.
+
+        Args:
+            hours_back: specific number of hours to look back.
+            specific_date: specific date string (YYYY-MM-DD) to look at.
+            reverse_files: if True, process files in reverse order (newest first).
+            max_files: maximum number of log files to process (most recent if reverse_files is True).
+        """
+        if not self.logs_dir.exists():
+            return
+
+        log_files = []
+        cutoff_date = None
+
+        if specific_date:
+            log_file = self.logs_dir / f"app_{specific_date}.log"
+            if log_file.exists():
+                log_files.append(log_file)
+        else:
+            log_files = sorted(self.logs_dir.glob("app_*.log"))
+            if reverse_files:
+                log_files.reverse()
+
+            # If we only care about hours back, we can optimize file selection
+            if hours_back is not None:
+                cutoff_date = datetime.now(timezone.utc) - timedelta(hours=hours_back)
+                filtered_files = []
+                for log_path in log_files:
+                    try:
+                        file_date_str = log_path.stem.split("_")[1]
+                        file_date = datetime.strptime(
+                            file_date_str, "%Y-%m-%d"
+                        ).replace(tzinfo=timezone.utc)
+                        # Include file if it's from the same day or after the cutoff day
+                        if file_date >= cutoff_date.replace(
+                            hour=0, minute=0, second=0, microsecond=0
+                        ):
+                            filtered_files.append(log_path)
+                    except Exception:
+                        continue
+                log_files = filtered_files
+
+            if max_files is not None and len(log_files) > max_files:
+                log_files = log_files[:max_files]
+
+        for log_file in log_files:
+            try:
+                with open(log_file, "r") as f:
+                    # For reverse search, we might want to read lines in reverse?
+                    # But usually logs are append-only.
+                    # If reverse_files is True, we iterate files newest to oldest.
+                    # But lines within file are still oldest to newest unless we reverse them.
+                    lines = f.readlines()
+                    if reverse_files:
+                        lines.reverse()
+
+                    for line in lines:
+                        try:
+                            entry = json.loads(line.strip())
+
+                            if cutoff_date:
+                                timestamp_str = entry.get("asctime", "")
+                                if not timestamp_str:
+                                    continue
+                                log_time = datetime.strptime(
+                                    timestamp_str, "%Y-%m-%d %H:%M:%S"
+                                )
+                                log_time = log_time.replace(tzinfo=timezone.utc)
+                                if log_time < cutoff_date:
+                                    continue
+
+                            yield entry
+                        except json.JSONDecodeError:
+                            continue
+            except Exception as e:
+                logger.error(f"Error processing log file {log_file}: {e}")
+                continue
+
+    def search_logs(
+        self,
+        date: str | None = None,
+        level: str | None = None,
+        request_id: str | None = None,
+        search_text: str | None = None,
+        limit: int = 100,
+    ) -> list[dict[str, Any]]:
+        """
+        Search through log files and return matching entries.
+        """
+        log_entries: list[dict[str, Any]] = []
+
+        # Use reverse=True to get newest logs first by default
+        # If date is specified, we only look at that file
+
+        search_text_lower = search_text.lower() if search_text else None
+
+        # We iterate efficiently
+        iterator = self._yield_log_entries(
+            specific_date=date,
+            reverse_files=True if not date else False,
+            max_files=7 if not date else None,
+        )
+
+        # If we are searching globally (no date), we might want to limit how far back we go?
+        # PR 228 did: "glob("app_*.log") sorted by mtime reverse [:7]" (last 7 files)
+        # My _yield_log_entries with reverse_files=True does all files.
+        # Let's rely on limit to stop us.
+
+        # Optimization: if we are not searching by date, maybe limit to last 7 files inside _yield?
+        # For now, let's just iterate.
+
+        for log_data in iterator:
+            if not self._matches_filters(
+                log_data, level, request_id, search_text_lower
+            ):
+                continue
+
+            log_entries.append(log_data)
+
+            if len(log_entries) >= limit:
+                break
+
+        # Sort by time descending (newest first)
+        log_entries.sort(key=lambda x: x.get("asctime", ""), reverse=True)
+        return log_entries
+
+    def _matches_filters(
+        self,
+        log_data: dict[str, Any],
+        level: str | None,
+        request_id: str | None,
+        search_text_lower: str | None,
+    ) -> bool:
+        if level and log_data.get("levelname", "").upper() != level.upper():
+            return False
+
+        if request_id and log_data.get("request_id") != request_id:
+            return False
+
+        if search_text_lower:
+            message = str(log_data.get("message", "")).lower()
+            name = str(log_data.get("name", "")).lower()
+            pathname = str(log_data.get("pathname", "")).lower()
+
+            if (
+                search_text_lower not in message
+                and search_text_lower not in name
+                and search_text_lower not in pathname
+            ):
+                return False
+
+        return True
+
+    def get_usage_summary(self, hours: int = 24) -> dict:
+        entries = list(self._yield_log_entries(hours_back=hours))
+        return self._calculate_summary_stats(entries)
+
+    def get_usage_metrics(self, interval: int = 15, hours: int = 24) -> dict:
+        entries = list(self._yield_log_entries(hours_back=hours))
+        return self._aggregate_metrics_by_time(entries, interval, hours)
+
+    def get_error_details(self, hours: int = 24, limit: int = 100) -> dict:
+        errors: list[dict] = []
+        # Iterate newest to oldest for errors?
+        # yield_log_entries sorts files by name (date) ascending by default.
+        # usage stats logic usually expects ascending time for aggregation (though dictionaries don't care).
+        # For error details "last N errors", we probably want newest first.
+
+        # Using list() loads everything into memory, which is what PR 229 did.
+        # For optimization, we could use reverse iterator.
+
+        # Let's just stick to PR 229 logic which filters 'ERROR' level.
+
+        entries = self._yield_log_entries(hours_back=hours)  # oldest to newest
+
+        for entry in entries:
+            if entry.get("levelname", "").upper() == "ERROR":
+                timestamp_str = entry.get("asctime", "")
+                errors.append(
+                    {
+                        "timestamp": timestamp_str,
+                        "message": entry.get("message", ""),
+                        "error_type": entry.get("error_type", "unknown"),
+                        "pathname": entry.get("pathname", ""),
+                        "lineno": entry.get("lineno", 0),
+                        "request_id": entry.get("request_id", ""),
+                    }
+                )
+
+        # Sort reverse time
+        errors.sort(key=lambda x: x["timestamp"], reverse=True)
+        return {"errors": errors[:limit], "total_count": len(errors)}
+
+    def get_revenue_by_model(self, hours: int = 24, limit: int = 20) -> dict:
+        entries = list(self._yield_log_entries(hours_back=hours))
+
+        model_stats: dict[str, dict[str, int | float]] = defaultdict(
+            lambda: {
+                "revenue_msats": 0,
+                "refunds_msats": 0,
+                "requests": 0,
+                "successful": 0,
+                "failed": 0,
+            }
+        )
+
+        for entry in entries:
+            try:
+                model = entry.get("model", "unknown")
+                if not isinstance(model, str):
+                    model = "unknown"
+
+                message = entry.get("message", "").lower()
+
+                if "received proxy request" in message:
+                    model_stats[model]["requests"] += 1
+
+                if (
+                    "completed for streaming" in message
+                    or "completed for non-streaming" in message
+                ):
+                    model_stats[model]["successful"] += 1
+                    cost_data = entry.get("cost_data")
+                    if isinstance(cost_data, dict):
+                        actual_cost = cost_data.get("total_msats", 0)
+                        if isinstance(actual_cost, (int, float)) and actual_cost > 0:
+                            model_stats[model]["revenue_msats"] += actual_cost
+
+                if "revert payment" in message or "upstream request failed" in message:
+                    model_stats[model]["failed"] += 1
+                    if "revert payment" in message:
+                        max_cost = entry.get("max_cost_for_model", 0)
+                        if isinstance(max_cost, (int, float)) and max_cost > 0:
+                            model_stats[model]["refunds_msats"] += max_cost
+
+            except Exception:
+                continue
+
+        models: list[dict[str, Any]] = []
+        total_revenue = 0.0
+
+        for model, stats in model_stats.items():
+            revenue_msats = float(stats["revenue_msats"])
+            refunds_msats = float(stats["refunds_msats"])
+
+            revenue_sats = revenue_msats / 1000
+            refunds_sats = refunds_msats / 1000
+            net_revenue_sats = revenue_sats - refunds_sats
+
+            total_revenue += net_revenue_sats
+
+            requests = int(stats["requests"])
+            successful = int(stats["successful"])
+
+            models.append(
+                {
+                    "model": model,
+                    "revenue_sats": revenue_sats,
+                    "refunds_sats": refunds_sats,
+                    "net_revenue_sats": net_revenue_sats,
+                    "requests": requests,
+                    "successful": successful,
+                    "failed": int(stats["failed"]),
+                    "avg_revenue_per_request": (
+                        revenue_sats / successful if successful > 0 else 0
+                    ),
+                }
+            )
+
+        models.sort(key=lambda x: float(x["net_revenue_sats"]), reverse=True)
+
+        return {
+            "models": models[:limit],
+            "total_revenue_sats": total_revenue,
+            "total_models": len(models),
+        }
+
+    def _calculate_summary_stats(self, entries: list[dict]) -> dict:
+        stats: dict[str, Any] = {
+            "total_entries": 0,
+            "total_requests": 0,
+            "successful_chat_completions": 0,
+            "failed_requests": 0,
+            "total_errors": 0,
+            "total_warnings": 0,
+            "payment_processed": 0,
+            "upstream_errors": 0,
+            "unique_models": set(),
+            "error_types": defaultdict(int),
+            "revenue_msats": 0.0,
+            "refunds_msats": 0.0,
+        }
+
+        for entry in entries:
+            try:
+                stats["total_entries"] += 1
+
+                message = entry.get("message", "").lower()
+                level = entry.get("levelname", "").upper()
+
+                if level == "ERROR":
+                    stats["total_errors"] += 1
+                    if "error_type" in entry:
+                        stats["error_types"][str(entry["error_type"])] += 1
+                elif level == "WARNING":
+                    stats["total_warnings"] += 1
+
+                if "received proxy request" in message:
+                    stats["total_requests"] += 1
+
+                if (
+                    "completed for streaming" in message
+                    or "completed for non-streaming" in message
+                ):
+                    stats["successful_chat_completions"] += 1
+
+                if "upstream request failed" in message or "revert payment" in message:
+                    stats["failed_requests"] += 1
+
+                if "payment processed successfully" in message:
+                    stats["payment_processed"] += 1
+
+                if "upstream" in message and level == "ERROR":
+                    stats["upstream_errors"] += 1
+
+                if "model" in entry:
+                    model = entry["model"]
+                    if isinstance(model, str) and model != "unknown":
+                        stats["unique_models"].add(model)
+
+                if (
+                    "completed for streaming" in message
+                    or "completed for non-streaming" in message
+                ):
+                    cost_data = entry.get("cost_data")
+                    if isinstance(cost_data, dict):
+                        actual_cost = cost_data.get("total_msats", 0)
+                        if isinstance(actual_cost, (int, float)) and actual_cost > 0:
+                            stats["revenue_msats"] += float(actual_cost)
+
+                if "revert payment" in message:
+                    max_cost = entry.get("max_cost_for_model", 0)
+                    if isinstance(max_cost, (int, float)) and max_cost > 0:
+                        stats["refunds_msats"] += float(max_cost)
+
+            except Exception:
+                continue
+
+        revenue_sats = stats["revenue_msats"] / 1000
+        refunds_sats = stats["refunds_msats"] / 1000
+        net_revenue_sats = revenue_sats - refunds_sats
+
+        total_requests = stats["total_requests"]
+        successful = stats["successful_chat_completions"]
+
+        return {
+            "total_entries": stats["total_entries"],
+            "total_requests": total_requests,
+            "successful_chat_completions": successful,
+            "failed_requests": stats["failed_requests"],
+            "total_errors": stats["total_errors"],
+            "total_warnings": stats["total_warnings"],
+            "payment_processed": stats["payment_processed"],
+            "upstream_errors": stats["upstream_errors"],
+            "unique_models_count": len(stats["unique_models"]),
+            "unique_models": sorted(list(stats["unique_models"])),
+            "error_types": dict(stats["error_types"]),
+            "success_rate": (successful / total_requests * 100)
+            if total_requests > 0
+            else 0,
+            "revenue_msats": stats["revenue_msats"],
+            "refunds_msats": stats["refunds_msats"],
+            "revenue_sats": revenue_sats,
+            "refunds_sats": refunds_sats,
+            "net_revenue_msats": stats["revenue_msats"] - stats["refunds_msats"],
+            "net_revenue_sats": net_revenue_sats,
+            "avg_revenue_per_request_msats": (
+                stats["revenue_msats"] / successful if successful > 0 else 0
+            ),
+            "refund_rate": (
+                (stats["failed_requests"] / total_requests * 100)
+                if total_requests > 0
+                else 0
+            ),
+        }
+
+    def _aggregate_metrics_by_time(
+        self, entries: list[dict], interval_minutes: int, hours_back: int
+    ) -> dict:
+        time_buckets: dict[str, dict[str, Any]] = defaultdict(
+            lambda: {"requests": 0, "errors": 0, "revenue_msats": 0.0}
+        )
+
+        for entry in entries:
+            try:
+                timestamp_str = entry.get("asctime", "")
+                if not timestamp_str:
+                    continue
+
+                log_time = datetime.strptime(timestamp_str, "%Y-%m-%d %H:%M:%S")
+                log_time = log_time.replace(tzinfo=timezone.utc)
+
+                # Round down to nearest interval
+                minutes = log_time.minute
+                rounded_minutes = (minutes // interval_minutes) * interval_minutes
+                bucket_time = log_time.replace(
+                    minute=rounded_minutes, second=0, microsecond=0
+                )
+                bucket_key = bucket_time.strftime("%Y-%m-%d %H:%M:%S")
+
+                bucket = time_buckets[bucket_key]
+
+                message = entry.get("message", "").lower()
+                level = entry.get("levelname", "").upper()
+
+                if "received proxy request" in message:
+                    bucket["requests"] += 1
+
+                if level == "ERROR":
+                    bucket["errors"] += 1
+
+                if (
+                    "completed for streaming" in message
+                    or "completed for non-streaming" in message
+                ):
+                    cost_data = entry.get("cost_data")
+                    if isinstance(cost_data, dict):
+                        actual_cost = cost_data.get("total_msats", 0)
+                        if isinstance(actual_cost, (int, float)) and actual_cost > 0:
+                            bucket["revenue_msats"] += float(actual_cost)
+            except Exception:
+                continue
+
+        result = []
+        for bucket_key in sorted(time_buckets.keys()):
+            result.append({"timestamp": bucket_key, **time_buckets[bucket_key]})
+
+        return {
+            "metrics": result,
+            "interval_minutes": interval_minutes,
+            "hours_back": hours_back,
+            "total_buckets": len(result),
+        }
+
+
+log_manager = LogManager()

routstr/core/logging.py

@@ -1,3 +1,40 @@
+"""
+Logging configuration for Routstr.
+
+CRITICAL LOG MESSAGES FOR USAGE STATISTICS:
+===========================================
+The following log messages are parsed by the usage tracking system (routstr/core/admin.py).
+DO NOT modify or remove these messages without updating the usage tracking logic:
+
+1. "Received proxy request" (INFO) - routstr/proxy.py
+   - Used to count total incoming requests
+   - Includes model information in context
+
+    2. "Payment adjustment completed for streaming" (INFO) - routstr/upstream/base.py
+       "Payment adjustment completed for non-streaming" (INFO) - routstr/upstream/base.py
+   - Used to track successful completions and revenue
+   - The 'cost_data.total_msats' field is extracted for revenue calculation
+   - Must include 'cost_data' in extra dict
+
+3. "Payment processed successfully" (INFO) - routstr/auth.py
+   - Used to count successful payment processing events
+   - Tracks payment-related metrics
+
+4. "Upstream request failed, revert payment" (WARNING) - routstr/proxy.py
+   - Used to track failed requests and refunds
+   - The 'max_cost_for_model' field is extracted for refund calculation
+   - Must include 'max_cost_for_model' in extra dict
+
+5. Any ERROR level logs with "upstream" in the message
+   - Used to count upstream provider errors
+   - Helps identify service reliability issues
+
+If you need to modify these messages, ensure you also update the parsing logic in:
+- routstr/core/admin.py:_aggregate_metrics_by_time()
+- routstr/core/admin.py:_get_summary_stats()
+- routstr/core/admin.py:get_revenue_by_model()
+"""
+
 import logging.config
 import logging.handlers
 import os
@@ -155,21 +192,24 @@ class SecurityFilter(logging.Filter):
         """Filter out sensitive information from log records."""
         try:
             message = record.getMessage()
+            standalone_patterns = [
+                r"Bearer\s+([a-zA-Z0-9_\-\.]{10,})",  # Bearer token (must be 10 characters or more to reduce false-positives)
+                r"cashu[A-Z]+([a-zA-Z0-9_\-\.=/+]+)",  # Cashu tokens
+                r"nsec[a-z0-9]+",  # Nostr Public / Private Key
+            ]
+            for pattern in standalone_patterns:
+                message = re.sub(pattern, "[REDACTED]", message, flags=re.IGNORECASE)
 
             for key in self.SENSITIVE_KEYS:
                 if key in message.lower():
-                    patterns = [
-                        rf"{key}[:\s=]+([a-zA-Z0-9_\-\.]+)",  # key: value or key=value
-                        rf'{key}[:\s=]+["\']([^"\']+)["\']',  # key: "value" or key='value'
-                        r"Bearer\s+([a-zA-Z0-9_\-\.]+)",  # Bearer token
-                        r"cashu[A-Z]+([a-zA-Z0-9_\-\.=/+]+)",  # Cashu tokens
+                    key_patterns = [
+                        rf"{key}\s*[:=]\s*([a-zA-Z0-9_\-\.=/+]+)",  # key:value or key=value (including any variant with spaces)
+                        rf'{key}\s*[:=]\s*["\']([^"\']+)["\']',  # key:"value" or key='value' (including any variant with spaces)
                     ]
-
-                    for pattern in patterns:
+                    for pattern in key_patterns:
                         message = re.sub(
                             pattern, f"{key}: [REDACTED]", message, flags=re.IGNORECASE
                         )
-
             record.msg = message
             record.args = ()
 

routstr/core/main.py

@@ -34,9 +34,9 @@ setup_logging()
 logger = get_logger(__name__)
 
 if os.getenv("VERSION_SUFFIX") is not None:
-    __version__ = f"0.2.0c-{os.getenv('VERSION_SUFFIX')}"
+    __version__ = f"0.2.1-{os.getenv('VERSION_SUFFIX')}"
 else:
-    __version__ = "0.2.0c"
+    __version__ = "0.2.1"
 
 
 @asynccontextmanager
@@ -80,8 +80,8 @@ async def lifespan(_: FastAPI) -> AsyncGenerator[None, None]:
         from ..proxy import get_upstreams
         from ..upstream.helpers import refresh_upstreams_models_periodically
 
-        await _update_prices()
-        await initialize_upstreams()
+        _update_prices_task = asyncio.create_task(_update_prices())
+        _initialize_upstreams_task = asyncio.create_task(initialize_upstreams())
 
         btc_price_task = asyncio.create_task(update_prices_periodically())
         pricing_task = asyncio.create_task(update_sats_pricing())
@@ -92,8 +92,15 @@ async def lifespan(_: FastAPI) -> AsyncGenerator[None, None]:
         models_cleanup_task = asyncio.create_task(cleanup_enabled_models_periodically())
         model_maps_refresh_task = asyncio.create_task(refresh_model_maps_periodically())
         payout_task = asyncio.create_task(periodic_payout())
-        nip91_task = asyncio.create_task(announce_provider())
-        providers_task = asyncio.create_task(providers_cache_refresher())
+        if global_settings.nsec:
+            nip91_task = asyncio.create_task(announce_provider())
+        if global_settings.providers_refresh_interval_seconds > 0:
+            providers_task = asyncio.create_task(providers_cache_refresher())
+
+        # ensure both setup tasks complete
+        await asyncio.gather(
+            _update_prices_task, _initialize_upstreams_task, return_exceptions=True
+        )
 
         yield
 
@@ -182,7 +189,6 @@ async def info() -> dict:
         "mints": global_settings.cashu_mints,
         "http_url": global_settings.http_url,
         "onion_url": global_settings.onion_url,
-        "models": [],  # kept for back-compat; prefer /v1/models
     }
 
 
@@ -264,6 +270,33 @@ if UI_DIST_PATH.exists() and UI_DIST_PATH.is_dir():
     async def redirect_transactions_index_txt() -> RedirectResponse:
         return RedirectResponse("/transactions")
 
+    @app.get("/balances", include_in_schema=False)
+    async def serve_balances_ui() -> FileResponse:
+        return FileResponse(UI_DIST_PATH / "balances" / "index.html")
+
+    # Add explicit route for /balances/index.txt to redirect to /balances
+    @app.get("/balances/index.txt", include_in_schema=False)
+    async def redirect_balances_index_txt() -> RedirectResponse:
+        return RedirectResponse("/balances")
+
+    @app.get("/logs", include_in_schema=False)
+    async def serve_logs_ui() -> FileResponse:
+        return FileResponse(UI_DIST_PATH / "logs" / "index.html")
+
+    # Add explicit route for /logs/index.txt to redirect to /logs
+    @app.get("/logs/index.txt", include_in_schema=False)
+    async def redirect_logs_index_txt() -> RedirectResponse:
+        return RedirectResponse("/logs")
+
+    @app.get("/usage", include_in_schema=False)
+    async def serve_usage_ui() -> FileResponse:
+        return FileResponse(UI_DIST_PATH / "usage" / "index.html")
+
+    # Add explicit route for /usage/index.txt to redirect to /usage
+    @app.get("/usage/index.txt", include_in_schema=False)
+    async def redirect_usage_index_txt() -> RedirectResponse:
+        return RedirectResponse("/usage")
+
     @app.get("/unauthorized", include_in_schema=False)
     async def serve_unauthorized_ui() -> FileResponse:
         return FileResponse(UI_DIST_PATH / "unauthorized" / "index.html")

routstr/core/settings.py

@@ -114,7 +114,7 @@ def resolve_bootstrap() -> Settings:
                 )
             except Exception:
                 pass
-        # Map COST_PER_1K_* -> CUSTOM_PER_1K_*
+        # Map COST_PER_1K_* -> FIXED_PER_1K_*
         if (
             "COST_PER_1K_INPUT_TOKENS" in os.environ
             and "FIXED_PER_1K_INPUT_TOKENS" not in os.environ

routstr/payment/__init__.py

@@ -1,4 +1,4 @@
-from .cost_caculation import CostData, CostDataError, MaxCostData, calculate_cost
+from .cost_calculation import CostData, CostDataError, MaxCostData, calculate_cost
 
 __all__ = [
     "CostData",

routstr/payment/models.py

@@ -2,6 +2,7 @@ import asyncio
 import json
 import random
 from pathlib import Path
+from typing import Final
 from urllib.request import urlopen
 
 import httpx
@@ -19,6 +20,14 @@ logger = get_logger(__name__)
 
 models_router = APIRouter()
 
+DEFAULT_EXCLUDED_MODEL_IDS: Final[set[str]] = {
+    "openrouter/auto",
+    "google/gemini-2.5-pro-exp-03-25",
+    "opengvlab/internvl3-78b",
+    "openrouter/sonoma-dusk-alpha",
+    "openrouter/sonoma-sky-alpha",
+}
+
 
 class Architecture(BaseModel):
     modality: str
@@ -89,11 +98,7 @@ def fetch_openrouter_models(source_filter: str | None = None) -> list[dict]:
 
                 if (
                     "(free)" in model.get("name", "")
-                    or model_id == "openrouter/auto"
-                    or model_id == "google/gemini-2.5-pro-exp-03-25"
-                    or model_id == "opengvlab/internvl3-78b"
-                    or model_id == "openrouter/sonoma-dusk-alpha"
-                    or model_id == "openrouter/sonoma-sky-alpha"
+                    or model_id in DEFAULT_EXCLUDED_MODEL_IDS
                 ):
                     continue
 
@@ -130,11 +135,7 @@ async def async_fetch_openrouter_models(source_filter: str | None = None) -> lis
 
                 if (
                     "(free)" in model.get("name", "")
-                    or model_id == "openrouter/auto"
-                    or model_id == "google/gemini-2.5-pro-exp-03-25"
-                    or model_id == "opengvlab/internvl3-78b"
-                    or model_id == "openrouter/sonoma-dusk-alpha"
-                    or model_id == "openrouter/sonoma-sky-alpha"
+                    or model_id in DEFAULT_EXCLUDED_MODEL_IDS
                 ):
                     continue
 

routstr/upstream/__init__.py

@@ -8,6 +8,7 @@ from .ollama import OllamaUpstreamProvider
 from .openai import OpenAIUpstreamProvider
 from .openrouter import OpenRouterUpstreamProvider
 from .perplexity import PerplexityUpstreamProvider
+from .ppqai import PPQAIUpstreamProvider
 from .xai import XAIUpstreamProvider
 
 upstream_provider_classes: list[type[BaseUpstreamProvider]] = [
@@ -20,6 +21,7 @@ upstream_provider_classes: list[type[BaseUpstreamProvider]] = [
     OpenAIUpstreamProvider,
     OpenRouterUpstreamProvider,
     PerplexityUpstreamProvider,
+    PPQAIUpstreamProvider,
     XAIUpstreamProvider,
 ]
 """List of all upstream classes"""

routstr/upstream/base.py

@@ -10,6 +10,7 @@ from typing import TYPE_CHECKING, Mapping
 import httpx
 from fastapi import BackgroundTasks, HTTPException, Request
 from fastapi.responses import Response, StreamingResponse
+from pydantic import BaseModel
 
 from ..auth import adjust_payment_for_tokens
 from ..core import get_logger
@@ -18,7 +19,7 @@ from ..core.db import ApiKey, AsyncSession, create_session
 if TYPE_CHECKING:
     from ..core.db import UpstreamProviderRow
 
-from ..payment.cost_caculation import (
+from ..payment.cost_calculation import (
     CostData,
     CostDataError,
     MaxCostData,
@@ -37,6 +38,17 @@ from ..wallet import recieve_token, send_token
 logger = get_logger(__name__)
 
 
+class TopupData(BaseModel):
+    """Universal top-up data schema for Lightning Network invoices."""
+
+    invoice_id: str
+    payment_request: str
+    amount: int
+    currency: str
+    expires_at: int | None = None
+    checkout_url: str | None = None
+
+
 class BaseUpstreamProvider:
     """Provider for forwarding requests to an upstream AI service API."""
 
@@ -87,7 +99,7 @@ class BaseUpstreamProvider:
         """Get metadata about this provider type for API responses.
 
         Returns:
-            Dict with provider type metadata including id, name, default_base_url, fixed_base_url, platform_url
+            Dict with provider type metadata including id, name, default_base_url, fixed_base_url, platform_url, can_create_account, can_topup, can_show_balance
         """
         return {
             "id": cls.provider_type,
@@ -95,6 +107,9 @@ class BaseUpstreamProvider:
             "default_base_url": cls.default_base_url or "",
             "fixed_base_url": bool(cls.default_base_url),
             "platform_url": cls.platform_url,
+            "can_create_account": False,
+            "can_topup": False,
+            "can_show_balance": False,
         }
 
     def prepare_headers(self, request_headers: dict) -> dict:
@@ -136,6 +151,13 @@ class BaseUpstreamProvider:
                 if headers.pop(auth_header, None) is not None:
                     removed_headers.append(auth_header)
 
+        for header in ["authorization", "accept-encoding"]:
+            if headers.pop(header, None) is not None:
+                removed_headers.append(f"{header} (replaced with routstr-safe version)")
+
+        # Explicitly define the list of supported compression encodings
+        headers["accept-encoding"] = "gzip, deflate, br, identity"
+
         logger.debug(
             "Headers prepared for upstream",
             extra={
@@ -453,11 +475,12 @@ class BaseUpstreamProvider:
                                                 )
                                                 usage_finalized = True
                                                 logger.info(
-                                                    "Token adjustment completed for streaming",
+                                                    "Payment adjustment completed for streaming",
                                                     extra={
                                                         "key_hash": key.hashed_key[:8]
                                                         + "...",
                                                         "cost_data": cost_data,
+                                                        "model": last_model_seen,
                                                         "balance_after_adjustment": fresh_key.balance,
                                                     },
                                                 )
@@ -504,10 +527,15 @@ class BaseUpstreamProvider:
                 await finalize_without_usage()
                 raise
 
+        # Remove inaccurate encoding headers from upstream response
+        response_headers = dict(response.headers)
+        response_headers.pop("content-encoding", None)
+        response_headers.pop("content-length", None)
+
         return StreamingResponse(
             stream_with_cost(max_cost_for_model),
             status_code=response.status_code,
-            headers=dict(response.headers),
+            headers=response_headers,
         )
 
     async def handle_non_streaming_chat_completion(
@@ -556,7 +584,7 @@ class BaseUpstreamProvider:
             response_json["cost"] = cost_data
 
             logger.info(
-                "Token adjustment completed for non-streaming",
+                "Payment adjustment completed for non-streaming",
                 extra={
                     "key_hash": key.hashed_key[:8] + "...",
                     "cost_data": cost_data,
@@ -1832,3 +1860,59 @@ class BaseUpstreamProvider:
             Model object or None if not found
         """
         return self._models_by_id.get(model_id)
+
+    @classmethod
+    async def create_account_static(cls) -> dict[str, object]:
+        """Create a new account with the provider (class method, no instance needed).
+
+        Returns:
+            Dict with account creation details including api_key
+
+        Raises:
+            NotImplementedError: If provider does not support account creation
+        """
+        raise NotImplementedError(
+            f"Provider {cls.provider_type} does not support account creation"
+        )
+
+    async def create_account(self) -> dict[str, object]:
+        """Create a new account with the provider.
+
+        Returns:
+            Dict with account creation details including api_key
+
+        Raises:
+            NotImplementedError: If provider does not support account creation
+        """
+        raise NotImplementedError(
+            f"Provider {self.provider_type} does not support account creation"
+        )
+
+    async def initiate_topup(self, amount: int) -> TopupData:
+        """Initiate a Lightning Network top-up for the provider account.
+
+        Args:
+            amount: Amount in currency units to top up
+
+        Returns:
+            TopupData with standardized invoice information
+
+        Raises:
+            NotImplementedError: If provider does not support top-up
+        """
+        raise NotImplementedError(
+            f"Provider {self.provider_type} does not support top-up"
+        )
+
+    async def get_balance(self) -> dict[str, object]:
+        """Get the current account balance from the provider.
+
+        Returns:
+            Dict with balance information
+
+        Raises:
+            NotImplementedError: If provider does not support balance checking
+        """
+        raise NotImplementedError(
+            f"Provider {self.provider_type} does not support balance checking"
+        )

routstr/upstream/ppqai.py

@@ -0,0 +1,409 @@
+from __future__ import annotations
+
+from typing import TYPE_CHECKING
+
+import httpx
+from pydantic import BaseModel
+
+from ..core.logging import get_logger
+from ..payment.models import Architecture, Model, Pricing, async_fetch_openrouter_models
+from .base import BaseUpstreamProvider, TopupData
+
+if TYPE_CHECKING:
+    from ..core.db import UpstreamProviderRow
+
+logger = get_logger(__name__)
+
+
+class PPQAIModelPricing(BaseModel):
+    ui: dict[str, float]
+    api: dict[str, float]
+
+
+class PPQAIModel(BaseModel):
+    id: str
+    provider: str
+    name: str
+    created_at: int
+    context_length: int
+    pricing: PPQAIModelPricing
+    popular: bool
+
+
+class PPQAIUpstreamProvider(BaseUpstreamProvider):
+    """Upstream provider for PPQ.AI API with Lightning Network top-up support."""
+
+    provider_type = "ppqai"
+    default_base_url = "https://api.ppq.ai"
+    platform_url = "https://ppq.ai/api-docs"
+
+    def __init__(self, api_key: str, provider_fee: float = 1.0):
+        super().__init__(
+            base_url=self.default_base_url, api_key=api_key, provider_fee=provider_fee
+        )
+
+    @classmethod
+    def from_db_row(
+        cls, provider_row: "UpstreamProviderRow"
+    ) -> "PPQAIUpstreamProvider":
+        return cls(
+            api_key=provider_row.api_key,
+            provider_fee=provider_row.provider_fee,
+        )
+
+    @classmethod
+    def get_provider_metadata(cls) -> dict[str, object]:
+        return {
+            "id": cls.provider_type,
+            "name": "PPQ.AI",
+            "default_base_url": cls.default_base_url,
+            "fixed_base_url": True,
+            "platform_url": cls.platform_url,
+            "can_create_account": True,
+            "can_topup": True,
+            "can_show_balance": True,
+        }
+
+    def transform_model_name(self, model_id: str) -> str:
+        return model_id
+
+    @classmethod
+    async def create_account_static(cls) -> dict[str, object]:
+        """Create a new PPQ.AI account without requiring an instance.
+
+        Returns:
+            Dict containing 'credit_id' and 'api_key' for the new account.
+
+        Raises:
+            httpx.HTTPStatusError: If the API request fails.
+        """
+        url = f"{cls.default_base_url}/accounts/create"
+
+        logger.info("Creating new PPQ.AI account", extra={"url": url})
+
+        async with httpx.AsyncClient(timeout=30.0) as client:
+            response = await client.post(url)
+            response.raise_for_status()
+            account_data = response.json()
+
+            logger.info(
+                "Successfully created PPQ.AI account",
+                extra={
+                    "credit_id": account_data.get("credit_id"),
+                    "has_api_key": bool(account_data.get("api_key")),
+                },
+            )
+
+            return account_data
+
+    async def fetch_models(self) -> list[Model]:
+        """Fetch models from PPQ.AI API."""
+        url = f"{self.base_url}/models"
+        headers = {"Authorization": f"Bearer {self.api_key}"}
+
+        logger.debug(
+            "Fetching models from PPQ.AI",
+            extra={"url": url, "has_api_key": bool(self.api_key)},
+        )
+
+        try:
+            async with httpx.AsyncClient(timeout=30.0) as client:
+                response = await client.get(url, headers=headers)
+                response.raise_for_status()
+                data = response.json()
+
+                models_data = data.get("data", [])
+                logger.info(
+                    "Fetched models from PPQ.AI",
+                    extra={"model_count": len(models_data)},
+                )
+
+                or_models = [
+                    Model(**model)  # type: ignore
+                    for model in await async_fetch_openrouter_models()
+                ]
+
+                models = []
+                for model_data in models_data:
+                    try:
+                        ppqai_model = PPQAIModel.parse_obj(model_data)
+                        or_model = next(
+                            (
+                                model
+                                for model in or_models
+                                if model.id == ppqai_model.id
+                            ),
+                            None,
+                        )
+
+                        if or_model:
+                            if input_price := ppqai_model.pricing.api.get(
+                                "input_per_1M"
+                            ):
+                                or_model.pricing.prompt = input_price / 1_000_000
+                            if output_price := ppqai_model.pricing.api.get(
+                                "output_per_1M"
+                            ):
+                                or_model.pricing.completion = output_price / 1_000_000
+                            if cl := ppqai_model.context_length:
+                                or_model.context_length = cl
+                            models.append(or_model)
+                        else:
+                            input_price = ppqai_model.pricing.api.get(
+                                "input_per_1M", 0.0
+                            )
+                            output_price = ppqai_model.pricing.api.get(
+                                "output_per_1M", 0.0
+                            )
+
+                            models.append(
+                                Model(
+                                    id=ppqai_model.id,
+                                    name=ppqai_model.name,
+                                    created=ppqai_model.created_at // 1000,
+                                    description=f"{ppqai_model.provider} model",
+                                    context_length=ppqai_model.context_length,
+                                    architecture=Architecture(
+                                        modality="text->text",
+                                        input_modalities=["text"],
+                                        output_modalities=["text"],
+                                        tokenizer="Unknown",
+                                        instruct_type=None,
+                                    ),
+                                    pricing=Pricing(
+                                        prompt=input_price / 1_000_000,
+                                        completion=output_price / 1_000_000,
+                                        request=0.0,
+                                        image=0.0,
+                                        web_search=0.0,
+                                        internal_reasoning=0.0,
+                                    ),
+                                )
+                            )
+                    except Exception as e:
+                        logger.warning(
+                            "Failed to parse PPQ.AI model",
+                            extra={
+                                "model_id": model_data.get("id", "unknown"),
+                                "error": str(e),
+                                "error_type": type(e).__name__,
+                            },
+                        )
+
+                return models
+
+        except httpx.HTTPStatusError as e:
+            logger.error(
+                "HTTP error fetching models from PPQ.AI",
+                extra={
+                    "status_code": e.response.status_code,
+                    "error": str(e),
+                },
+            )
+            return []
+        except Exception as e:
+            logger.error(
+                "Error fetching models from PPQ.AI",
+                extra={"error": str(e), "error_type": type(e).__name__},
+            )
+            return []
+
+    async def create_account(self) -> dict[str, object]:
+        """Create a new PPQ.AI account.
+
+        Returns:
+            Dict containing 'credit_id' and 'api_key' for the new account.
+
+        Raises:
+            httpx.HTTPStatusError: If the API request fails.
+        """
+        url = f"{self.base_url}/accounts/create"
+
+        logger.info("Creating new PPQ.AI account", extra={"url": url})
+
+        async with httpx.AsyncClient(timeout=30.0) as client:
+            response = await client.post(url)
+            response.raise_for_status()
+            account_data = response.json()
+
+            logger.info(
+                "Successfully created PPQ.AI account",
+                extra={
+                    "credit_id": account_data.get("credit_id"),
+                    "has_api_key": bool(account_data.get("api_key")),
+                },
+            )
+
+            return account_data
+
+    async def create_lightning_topup(
+        self, amount: int, currency: str
+    ) -> dict[str, object]:
+        """Create a Lightning Network top-up invoice for this account.
+
+        Args:
+            amount: Amount to top up (in the specified currency)
+            currency: Currency for the top-up (default: "USD")
+
+        Returns:
+            Dict containing invoice details including 'invoice_id', 'payment_request', etc.
+
+        Raises:
+            httpx.HTTPStatusError: If the API request fails.
+        """
+        url = f"{self.base_url}/topup/create/btc-lightning"
+        headers = {
+            "Authorization": f"Bearer {self.api_key}",
+            "Content-Type": "application/json",
+        }
+        payload = {"amount": amount, "currency": currency}
+
+        logger.info(
+            "Creating Lightning top-up invoice",
+            extra={"url": url, "amount": amount, "currency": currency},
+        )
+
+        async with httpx.AsyncClient(timeout=30.0) as client:
+            print(f"Payload: {payload}", "sending to", url)
+            response = await client.post(url, headers=headers, json=payload)
+            response.raise_for_status()
+            invoice_data = response.json()
+
+            logger.info(
+                "Successfully created Lightning top-up invoice",
+                extra={
+                    "invoice_id": invoice_data.get("invoice_id"),
+                    "amount": amount,
+                    "currency": currency,
+                },
+            )
+
+            return invoice_data
+
+    async def check_topup_status(self, invoice_id: str) -> bool:
+        """Check the status of a Lightning top-up invoice.
+
+        Args:
+            invoice_id: The invoice ID to check
+
+        Returns:
+            True if the invoice is paid (status == "Settled"), False otherwise
+
+        Raises:
+            httpx.HTTPStatusError: If the API request fails.
+        """
+        url = f"{self.base_url}/topup/status/{invoice_id}"
+        headers = {"Authorization": f"Bearer {self.api_key}"}
+
+        logger.debug(
+            "Checking Lightning top-up status",
+            extra={"url": url, "invoice_id": invoice_id},
+        )
+
+        async with httpx.AsyncClient(timeout=30.0) as client:
+            response = await client.get(url, headers=headers)
+            response.raise_for_status()
+            status_data = response.json()
+
+            is_paid = status_data.get("status") == "Settled"
+
+            logger.debug(
+                "Retrieved Lightning top-up status",
+                extra={
+                    "invoice_id": invoice_id,
+                    "status": status_data.get("status"),
+                    "is_paid": is_paid,
+                },
+            )
+
+            return is_paid
+
+    async def initiate_topup(self, amount: int) -> TopupData:
+        """Initiate a Lightning Network top-up for the PPQ.AI account.
+
+        Args:
+            amount: Amount in currency units to top up (will be sent to PPQ.AI API)
+
+        Returns:
+            TopupData with standardized invoice information
+
+        Raises:
+            httpx.HTTPStatusError: If the API request fails
+        """
+        ppq_response = await self.create_lightning_topup(amount, "USD")
+
+        logger.info(
+            "PPQ.AI top-up response",
+            extra={
+                "ppq_response": ppq_response,
+                "invoice_id": ppq_response.get("invoice_id"),
+                "has_lightning_invoice": "lightning_invoice" in ppq_response,
+            },
+        )
+
+        expires_at_value = ppq_response.get("expires_at")
+        checkout_url_value = ppq_response.get("checkout_url")
+
+        topup_data = TopupData(
+            invoice_id=str(ppq_response["invoice_id"]),
+            payment_request=str(ppq_response["lightning_invoice"]),
+            amount=int(ppq_response["amount"])
+            if isinstance(ppq_response["amount"], (int, float, str))
+            else 0,
+            currency=str(ppq_response["currency"]),
+            expires_at=int(expires_at_value)
+            if isinstance(expires_at_value, (int, float, str))
+            and expires_at_value is not None
+            else None,
+            checkout_url=str(checkout_url_value)
+            if checkout_url_value is not None
+            else None,
+        )
+
+        logger.info(
+            "Created TopupData",
+            extra={
+                "invoice_id": topup_data.invoice_id,
+                "payment_request_length": len(topup_data.payment_request),
+                "amount": topup_data.amount,
+            },
+        )
+
+        return topup_data
+
+    async def get_balance(self) -> dict[str, object]:
+        """Get the current account balance from PPQ.AI.
+
+        Returns:
+            Dict with balance information
+
+        Raises:
+            httpx.HTTPStatusError: If the API request fails
+        """
+        return await self.check_balance()
+
+    async def check_balance(self) -> dict[str, object]:
+        """Check the account balance for this PPQ.AI account.
+
+        Returns:
+            Dict containing balance information
+
+        Raises:
+            httpx.HTTPStatusError: If the API request fails.
+        """
+        url = f"{self.base_url}/credits/balance"
+        headers = {"Authorization": f"Bearer {self.api_key}"}
+
+        logger.debug("Checking PPQ.AI account balance", extra={"url": url})
+
+        async with httpx.AsyncClient(timeout=30.0) as client:
+            response = await client.post(url, headers=headers, json={})
+            response.raise_for_status()
+            balance_data = response.json()
+
+            logger.debug(
+                "Retrieved PPQ.AI account balance",
+                extra={"balance": balance_data.get("balance")},
+            )
+
+            return balance_data

tests/integration/test_general_info_endpoints.py

@@ -62,7 +62,6 @@ async def test_root_endpoint_structure_and_performance(
         "mints",
         "http_url",
         "onion_url",
-        "models",
     ]
     for field in required_fields:
         assert field in data, f"Missing required field: {field}"
@@ -75,15 +74,9 @@ async def test_root_endpoint_structure_and_performance(
     assert isinstance(data["mints"], list)
     assert isinstance(data["http_url"], str)
     assert isinstance(data["onion_url"], str)
-    assert isinstance(data["models"], list)
 
-    # Validate models structure if any exist
-    for model in data["models"]:
-        assert isinstance(model, dict)
-        # Models should have at least basic fields
-        model_required_fields = ["id", "name"]
-        for field in model_required_fields:
-            assert field in model, f"Model missing required field: {field}"
+    # Ensure models field is not present (removed as per issue #184)
+    assert "models" not in data, "Models field should not be present in base URL output"
 
     # Verify no database state changes
     diff = await db_snapshot.diff()

tests/unit/test_logging_securityfilter.py

@@ -0,0 +1,118 @@
+"""Unit tests for the logging SecurityFilter.
+
+This module tests that the SecurityFilter correctly identifies and redacts
+sensitive information from log messages without causing false positives.
+
+"""
+
+import logging
+from collections.abc import Callable
+
+import pytest
+
+from routstr.core.logging import SecurityFilter
+
+
+@pytest.fixture
+def security_filter() -> SecurityFilter:
+    """Provide an instance of the SecurityFilter for testing."""
+    return SecurityFilter()
+
+
+@pytest.fixture
+def filter_message(security_filter: SecurityFilter) -> Callable[[str], str]:
+    """A helper fixture to apply the filter to a message string."""
+
+    def _filter(msg: str) -> str:
+        record = logging.LogRecord(
+            name="test_logger",
+            level=logging.INFO,
+            pathname="",
+            lineno=0,
+            msg=msg,
+            args=(),
+            exc_info=None,
+        )
+        security_filter.filter(record)
+        return record.getMessage()
+
+    return _filter
+
+
+def test_redacts_unquoted_key_value_pairs(filter_message: Callable[[str], str]) -> None:
+    """Test that an unquoted key-value pair is correctly redacted."""
+    original = "Processing request with api_key=sk-12345abcdef"
+    expected = "Processing request with api_key: [REDACTED]"
+    assert filter_message(original) == expected
+
+
+def test_redacts_quoted_key_value_pairs(filter_message: Callable[[str], str]) -> None:
+    """Test that a quoted token is correctly redacted."""
+    original = 'User authenticated with token="cashuA123abc"'
+    expected = "User authenticated with token: [REDACTED]"
+    assert filter_message(original) == expected
+
+
+def test_redacts_bearer_token(filter_message: Callable[[str], str]) -> None:
+    """Test that a Bearer token of sufficient length is redacted."""
+    original = "Authorization: Bearer abc1234567890xyzabcdefg"
+    expected = "Authorization: [REDACTED]"
+    assert filter_message(original) == expected
+
+
+def test_redacts_cashu_token(filter_message: Callable[[str], str]) -> None:
+    """Test that a Cashu token is redacted."""
+    original = "Received cashuTOKENeyJ0b2tlbiI6W3siaWQiOiI"
+    expected = "Received [REDACTED]"
+    assert filter_message(original) == expected
+
+
+def test_redacts_nsec_key(filter_message: Callable[[str], str]) -> None:
+    """Test that a full-length Nostr private key is redacted."""
+    original = "Private key is nsec1a8d9f8s7d9f8a7s6d5f4a3s2d1f9a8s7d6f5a4s3d2f1a9s8d7f6a5s4d3f"
+    expected = "Private key is [REDACTED]"
+    assert filter_message(original) == expected
+
+
+def test_ignores_non_sensitive_message(filter_message: Callable[[str], str]) -> None:
+    """Test that a message with no sensitive data is left untouched."""
+    original = "No token pricing configured, using base cost"
+    expected = "No token pricing configured, using base cost"
+    assert filter_message(original) == expected
+
+
+def test_multiple_secrets_in_one_message(filter_message: Callable[[str], str]) -> None:
+    """Test that multiple different secrets in one message are all redacted."""
+    original = 'Auth with Bearer abcdefghijklmnopqrstuvwxyz and api_key="sk-12345"'
+    expected = "Auth with [REDACTED] and api_key: [REDACTED]"
+    assert filter_message(original) == expected
+
+
+def test_redacts_key_with_no_value(filter_message: Callable[[str], str]) -> None:
+    """Test that a key with no value is not redacted."""
+    original = "Request contains api_key and secret."
+    expected = "Request contains api_key and secret."
+    assert filter_message(original) == expected
+
+
+def test_redacts_key_value_with_spaces(filter_message: Callable[[str], str]) -> None:
+    """Test that key-value pairs with extra spaces are correctly redacted."""
+    original = "Auth info:   api_key   =   'sk-12345'"
+    expected = "Auth info:   api_key: [REDACTED]"
+    assert filter_message(original) == expected
+
+
+def test_is_case_insensitive_for_keys(filter_message: Callable[[str], str]) -> None:
+    """Test that key matching is case-insensitive."""
+    original = "TOKEN=sk-abcdef12345"
+    expected = "token: [REDACTED]"
+    assert filter_message(original) == expected
+
+
+def test_is_case_insensitive_for_standalone(
+    filter_message: Callable[[str], str],
+) -> None:
+    """Test that standalone matching is case-insensitive."""
+    original = "Using NSEC1a8d9f8s7d9f8a7s6d5f4a3s2d1f9a8s7d6f5a4s3d2f1a9s8d7f6a5s4d3f and CaShuA123abc"
+    expected = "Using [REDACTED] and [REDACTED]"
+    assert filter_message(original) == expected

ui/app/_register/page.tsx

@@ -1,172 +0,0 @@
-'use client';
-
-import { useAuth } from '@/lib/auth/AuthContext';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { useRouter } from 'next/navigation';
-import { useState } from 'react';
-import { toast } from 'sonner';
-import Link from 'next/link';
-import { ArrowUpCircleIcon } from 'lucide-react';
-import { registerUser, SchemaRegisterProps } from '@/lib/api/services/auth';
-
-export default function NostrRegisterPage() {
-  const router = useRouter();
-  const { connectNostr } = useAuth();
-  const [isLoading, setIsLoading] = useState(false);
-  const [formData, setFormData] = useState<SchemaRegisterProps>({
-    npub: '',
-    name: '',
-  });
-
-  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const { name, value } = e.target;
-    setFormData((prev) => ({ ...prev, [name]: value }));
-  };
-
-  const handleNostrConnect = async () => {
-    setIsLoading(true);
-    try {
-      const publicKey = await connectNostr();
-      if (publicKey) {
-        setFormData((prev) => ({ ...prev, npub: publicKey }));
-        toast.success(
-          'Nostr connected. Please enter your name to complete registration.'
-        );
-      } else {
-        toast.error(
-          'Failed to connect. Please make sure your Nostr extension is installed and enabled.'
-        );
-      }
-    } catch (error) {
-      console.error('Nostr connection error:', error);
-      toast.error('Failed to connect to Nostr. Please try again.');
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const handleRegister = async (e: React.FormEvent) => {
-    e.preventDefault();
-
-    if (!formData.npub || formData.npub.length < 10) {
-      toast.error('Please enter a valid Nostr public key');
-      return;
-    }
-
-    if (!formData.name) {
-      toast.error('Please enter your name');
-      return;
-    }
-
-    setIsLoading(true);
-    try {
-      // Register the user
-      const result = await registerUser(formData);
-      console.log('Registration successful:', result);
-      toast.success('Account created successfully');
-      router.push('/login');
-    } catch (error) {
-      console.error('Registration error:', error);
-      toast.error('Registration failed. Please try again.');
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  return (
-    <div className='flex min-h-screen items-center justify-center p-4'>
-      <div className='w-full max-w-md'>
-        <div className='flex flex-col gap-6'>
-          <form onSubmit={handleRegister}>
-            <div className='flex flex-col gap-6'>
-              <div className='flex flex-col items-center gap-2'>
-                <Link
-                  href='/'
-                  className='flex flex-col items-center gap-2 font-medium'
-                >
-                  <div className='flex h-8 w-8 items-center justify-center rounded-md'>
-                    <ArrowUpCircleIcon className='size-6' />
-                  </div>
-                  <span className='sr-only'>Routstr</span>
-                </Link>
-                <h1 className='text-xl font-bold'>Create an Account</h1>
-                <div className='text-center text-sm'>
-                  Already have an account?{' '}
-                  <Link href='/login' className='underline underline-offset-4'>
-                    Sign in
-                  </Link>
-                </div>
-              </div>
-              <div className='flex flex-col gap-6'>
-                <div className='grid gap-2'>
-                  <Label htmlFor='npub'>Nostr Public Key (npub)</Label>
-                  <Input
-                    id='npub'
-                    name='npub'
-                    type='text'
-                    placeholder='npub1...'
-                    value={formData.npub}
-                    onChange={handleInputChange}
-                    required
-                  />
-                </div>
-                <div className='grid gap-2'>
-                  <Label htmlFor='name'>Name</Label>
-                  <Input
-                    id='name'
-                    name='name'
-                    type='text'
-                    placeholder='John Doe'
-                    value={formData.name}
-                    onChange={handleInputChange}
-                    required
-                  />
-                </div>
-                <Button type='submit' className='w-full' disabled={isLoading}>
-                  {isLoading ? 'Creating account...' : 'Create Account'}
-                </Button>
-              </div>
-              <div className='after:border-border relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t'>
-                <span className='bg-background text-muted-foreground relative z-10 px-2'>
-                  Or
-                </span>
-              </div>
-              <div className='grid gap-4'>
-                <Button
-                  variant='outline'
-                  className='w-full'
-                  onClick={handleNostrConnect}
-                  disabled={isLoading}
-                  type='button'
-                >
-                  <svg
-                    className='mr-2 h-4 w-4'
-                    viewBox='0 0 256 256'
-                    xmlns='http://www.w3.org/2000/svg'
-                  >
-                    <path
-                      d='M158.4 28.4c-31.8-31.8-83.1-31.8-114.9 0s-31.8 83.1 0 114.9l57.4 57.4 57.4-57.4c31.8-31.8 31.8-83.1 0-114.9z'
-                      fill='currentColor'
-                    />
-                    <path
-                      d='M215.8 199.3c-31.8-31.8-83.1-31.8-114.9 0L43.6 256l57.4-57.4c31.8-31.8 31.8-83.1 0-114.9L158.4 28.4 101 85.8c-31.8 31.8-31.8 83.1 0 114.9l114.8-1.4z'
-                      fill='currentColor'
-                    />
-                  </svg>
-                  Connect with Nostr Extension
-                </Button>
-              </div>
-            </div>
-          </form>
-          <div className='text-muted-foreground hover:[&_a]:text-primary text-center text-xs text-balance [&_a]:underline [&_a]:underline-offset-4'>
-            By clicking create account, you agree to our{' '}
-            <Link href='#'>Terms of Service</Link> and{' '}
-            <Link href='#'>Privacy Policy</Link>.
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

ui/app/balances/page.tsx

@@ -0,0 +1,62 @@
+'use client';
+
+import { useCurrencyStore } from '@/lib/stores/currency';
+import { useQuery } from '@tanstack/react-query';
+import { AppSidebar } from '@/components/app-sidebar';
+import { SiteHeader } from '@/components/site-header';
+import { SidebarInset, SidebarProvider } from '@/components/ui/sidebar';
+import { DetailedWalletBalance } from '@/components/detailed-wallet-balance';
+import { TemporaryBalances } from '@/components/temporary-balances';
+import { fetchBtcUsdPrice, btcToSatsRate } from '@/lib/exchange-rate';
+
+export default function BalancesPage() {
+  const { displayUnit } = useCurrencyStore();
+
+  const { data: btcUsdPrice } = useQuery({
+    queryKey: ['btc-usd-price'],
+    queryFn: fetchBtcUsdPrice,
+    refetchInterval: 120_000,
+    staleTime: 60_000,
+  });
+
+  const usdPerSat = btcUsdPrice ? btcToSatsRate(btcUsdPrice) : null;
+
+  return (
+    <SidebarProvider>
+      <AppSidebar variant='inset' />
+      <SidebarInset className='p-0'>
+        <SiteHeader />
+        <div className='container max-w-6xl px-4 py-8 md:px-6 lg:px-8'>
+          <div className='mb-8 flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between'>
+            <div>
+              <h1 className='text-3xl font-bold tracking-tight'>
+                Balances
+              </h1>
+              <p className='text-muted-foreground mt-2'>
+                Monitor and manage wallet balances
+              </p>
+            </div>
+            {/* Global currency toggle is now in SiteHeader */}
+          </div>
+
+          <div className='grid gap-6'>
+            <div className='col-span-full'>
+              <DetailedWalletBalance
+                refreshInterval={30000}
+                displayUnit={displayUnit}
+                usdPerSat={usdPerSat}
+              />
+            </div>
+            <div className='col-span-full'>
+              <TemporaryBalances
+                refreshInterval={60000}
+                displayUnit={displayUnit}
+                usdPerSat={usdPerSat}
+              />
+            </div>
+          </div>
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  );
+}

ui/app/globals.css

@@ -6,8 +6,8 @@
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
+  --font-sans: Geist, sans-serif;
+  --font-mono: Geist Mono, monospace;
   --color-sidebar-ring: var(--sidebar-ring);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
@@ -41,75 +41,152 @@
   --radius-md: calc(var(--radius) - 2px);
   --radius-lg: var(--radius);
   --radius-xl: calc(var(--radius) + 4px);
+  --font-serif: Georgia, serif;
+  --radius: 0.5rem;
+  --tracking-tighter: calc(var(--tracking-normal) - 0.05em);
+  --tracking-tight: calc(var(--tracking-normal) - 0.025em);
+  --tracking-wide: calc(var(--tracking-normal) + 0.025em);
+  --tracking-wider: calc(var(--tracking-normal) + 0.05em);
+  --tracking-widest: calc(var(--tracking-normal) + 0.1em);
+  --tracking-normal: var(--tracking-normal);
+  --shadow-2xl: var(--shadow-2xl);
+  --shadow-xl: var(--shadow-xl);
+  --shadow-lg: var(--shadow-lg);
+  --shadow-md: var(--shadow-md);
+  --shadow: var(--shadow);
+  --shadow-sm: var(--shadow-sm);
+  --shadow-xs: var(--shadow-xs);
+  --shadow-2xs: var(--shadow-2xs);
+  --spacing: var(--spacing);
+  --letter-spacing: var(--letter-spacing);
+  --shadow-offset-y: var(--shadow-offset-y);
+  --shadow-offset-x: var(--shadow-offset-x);
+  --shadow-spread: var(--shadow-spread);
+  --shadow-blur: var(--shadow-blur);
+  --shadow-opacity: var(--shadow-opacity);
+  --color-shadow-color: var(--shadow-color);
+  --color-destructive-foreground: var(--destructive-foreground);
 }
 
 :root {
-  --radius: 0.625rem;
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.147 0.004 49.25);
+  --radius: 0.5rem;
+  --background: oklch(0.99 0 0);
+  --foreground: oklch(0 0 0);
   --card: oklch(1 0 0);
-  --card-foreground: oklch(0.147 0.004 49.25);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.147 0.004 49.25);
-  --primary: oklch(0.216 0.006 56.043);
-  --primary-foreground: oklch(0.985 0.001 106.423);
-  --secondary: oklch(0.97 0.001 106.424);
-  --secondary-foreground: oklch(0.216 0.006 56.043);
-  --muted: oklch(0.97 0.001 106.424);
-  --muted-foreground: oklch(0.553 0.013 58.071);
-  --accent: oklch(0.97 0.001 106.424);
-  --accent-foreground: oklch(0.216 0.006 56.043);
-  --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.923 0.003 48.717);
-  --input: oklch(0.923 0.003 48.717);
-  --ring: oklch(0.709 0.01 56.259);
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
-  --sidebar: oklch(0.985 0.001 106.423);
-  --sidebar-foreground: oklch(0.147 0.004 49.25);
-  --sidebar-primary: oklch(0.216 0.006 56.043);
-  --sidebar-primary-foreground: oklch(0.985 0.001 106.423);
-  --sidebar-accent: oklch(0.97 0.001 106.424);
-  --sidebar-accent-foreground: oklch(0.216 0.006 56.043);
-  --sidebar-border: oklch(0.923 0.003 48.717);
-  --sidebar-ring: oklch(0.709 0.01 56.259);
+  --card-foreground: oklch(0 0 0);
+  --popover: oklch(0.99 0 0);
+  --popover-foreground: oklch(0 0 0);
+  --primary: oklch(0 0 0);
+  --primary-foreground: oklch(1 0 0);
+  --secondary: oklch(0.94 0 0);
+  --secondary-foreground: oklch(0 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.44 0 0);
+  --accent: oklch(0.94 0 0);
+  --accent-foreground: oklch(0 0 0);
+  --destructive: oklch(0.63 0.19 23.03);
+  --border: oklch(0.92 0 0);
+  --input: oklch(0.94 0 0);
+  --ring: oklch(0 0 0);
+  --chart-1: oklch(0.81 0.17 75.35);
+  --chart-2: oklch(0.55 0.22 264.53);
+  --chart-3: oklch(0.72 0 0);
+  --chart-4: oklch(0.92 0 0);
+  --chart-5: oklch(0.56 0 0);
+  --sidebar: oklch(0.99 0 0);
+  --sidebar-foreground: oklch(0 0 0);
+  --sidebar-primary: oklch(0 0 0);
+  --sidebar-primary-foreground: oklch(1 0 0);
+  --sidebar-accent: oklch(0.94 0 0);
+  --sidebar-accent-foreground: oklch(0 0 0);
+  --sidebar-border: oklch(0.94 0 0);
+  --sidebar-ring: oklch(0 0 0);
+  --destructive-foreground: oklch(1 0 0);
+  --font-sans: Geist, sans-serif;
+  --font-serif: Georgia, serif;
+  --font-mono: Geist Mono, monospace;
+  --shadow-color: hsl(0 0% 0%);
+  --shadow-opacity: 0.18;
+  --shadow-blur: 2px;
+  --shadow-spread: 0px;
+  --shadow-offset-x: 0px;
+  --shadow-offset-y: 1px;
+  --letter-spacing: 0em;
+  --spacing: 0.25rem;
+  --shadow-2xs: 0px 1px 2px 0px hsl(0 0% 0% / 0.09);
+  --shadow-xs: 0px 1px 2px 0px hsl(0 0% 0% / 0.09);
+  --shadow-sm:
+    0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 1px 2px -1px hsl(0 0% 0% / 0.18);
+  --shadow:
+    0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 1px 2px -1px hsl(0 0% 0% / 0.18);
+  --shadow-md:
+    0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 2px 4px -1px hsl(0 0% 0% / 0.18);
+  --shadow-lg:
+    0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 4px 6px -1px hsl(0 0% 0% / 0.18);
+  --shadow-xl:
+    0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 8px 10px -1px hsl(0 0% 0% / 0.18);
+  --shadow-2xl: 0px 1px 2px 0px hsl(0 0% 0% / 0.45);
+  --tracking-normal: 0em;
 }
 
 .dark {
-  --background: oklch(0.147 0.004 49.25);
-  --foreground: oklch(0.985 0.001 106.423);
-  --card: oklch(0.216 0.006 56.043);
-  --card-foreground: oklch(0.985 0.001 106.423);
-  --popover: oklch(0.216 0.006 56.043);
-  --popover-foreground: oklch(0.985 0.001 106.423);
-  --primary: oklch(0.923 0.003 48.717);
-  --primary-foreground: oklch(0.216 0.006 56.043);
-  --secondary: oklch(0.268 0.007 34.298);
-  --secondary-foreground: oklch(0.985 0.001 106.423);
-  --muted: oklch(0.268 0.007 34.298);
-  --muted-foreground: oklch(0.709 0.01 56.259);
-  --accent: oklch(0.268 0.007 34.298);
-  --accent-foreground: oklch(0.985 0.001 106.423);
-  --destructive: oklch(0.704 0.191 22.216);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.553 0.013 58.071);
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.216 0.006 56.043);
-  --sidebar-foreground: oklch(0.985 0.001 106.423);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0.001 106.423);
-  --sidebar-accent: oklch(0.268 0.007 34.298);
-  --sidebar-accent-foreground: oklch(0.985 0.001 106.423);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.553 0.013 58.071);
+  --background: oklch(0 0 0);
+  --foreground: oklch(1 0 0);
+  --card: oklch(0.14 0 0);
+  --card-foreground: oklch(1 0 0);
+  --popover: oklch(0.18 0 0);
+  --popover-foreground: oklch(1 0 0);
+  --primary: oklch(1 0 0);
+  --primary-foreground: oklch(0 0 0);
+  --secondary: oklch(0.25 0 0);
+  --secondary-foreground: oklch(1 0 0);
+  --muted: oklch(0.23 0 0);
+  --muted-foreground: oklch(0.72 0 0);
+  --accent: oklch(0.32 0 0);
+  --accent-foreground: oklch(1 0 0);
+  --destructive: oklch(0.69 0.2 23.91);
+  --border: oklch(0.26 0 0);
+  --input: oklch(0.32 0 0);
+  --ring: oklch(0.72 0 0);
+  --chart-1: oklch(0.81 0.17 75.35);
+  --chart-2: oklch(0.58 0.21 260.84);
+  --chart-3: oklch(0.56 0 0);
+  --chart-4: oklch(0.44 0 0);
+  --chart-5: oklch(0.92 0 0);
+  --sidebar: oklch(0.18 0 0);
+  --sidebar-foreground: oklch(1 0 0);
+  --sidebar-primary: oklch(1 0 0);
+  --sidebar-primary-foreground: oklch(0 0 0);
+  --sidebar-accent: oklch(0.32 0 0);
+  --sidebar-accent-foreground: oklch(1 0 0);
+  --sidebar-border: oklch(0.32 0 0);
+  --sidebar-ring: oklch(0.72 0 0);
+  --destructive-foreground: oklch(0 0 0);
+  --radius: 0.5rem;
+  --font-sans: Geist, sans-serif;
+  --font-serif: Georgia, serif;
+  --font-mono: Geist Mono, monospace;
+  --shadow-color: hsl(0 0% 0%);
+  --shadow-opacity: 0.18;
+  --shadow-blur: 2px;
+  --shadow-spread: 0px;
+  --shadow-offset-x: 0px;
+  --shadow-offset-y: 1px;
+  --letter-spacing: 0em;
+  --spacing: 0.25rem;
+  --shadow-2xs: 0px 1px 2px 0px hsl(0 0% 0% / 0.09);
+  --shadow-xs: 0px 1px 2px 0px hsl(0 0% 0% / 0.09);
+  --shadow-sm:
+    0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 1px 2px -1px hsl(0 0% 0% / 0.18);
+  --shadow:
+    0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 1px 2px -1px hsl(0 0% 0% / 0.18);
+  --shadow-md:
+    0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 2px 4px -1px hsl(0 0% 0% / 0.18);
+  --shadow-lg:
+    0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 4px 6px -1px hsl(0 0% 0% / 0.18);
+  --shadow-xl:
+    0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 8px 10px -1px hsl(0 0% 0% / 0.18);
+  --shadow-2xl: 0px 1px 2px 0px hsl(0 0% 0% / 0.45);
 }
 
 @layer base {
@@ -118,6 +195,7 @@
   }
   body {
     @apply bg-background text-foreground;
+    letter-spacing: var(--tracking-normal);
   }
 }
 

ui/app/login/page.tsx

@@ -78,8 +78,8 @@ export default function AdminLoginPage(): ReactElement {
   };
 
   return (
-    <div className='flex min-h-screen items-center justify-center bg-gray-50 p-4'>
-      <Card className='w-full max-w-md'>
+    <div className='flex min-h-screen items-center justify-center bg-background px-4 py-12 text-foreground'>
+      <Card className='w-full max-w-md border border-border/60 bg-card/90 shadow-2xl shadow-black/30 backdrop-blur'>
         <CardHeader className='space-y-1'>
           <CardTitle className='text-center text-2xl font-bold'>
             Admin Login

ui/app/logs/log-details-dialog.tsx

@@ -0,0 +1,205 @@
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Copy, Check } from 'lucide-react';
+import { useState } from 'react';
+
+interface LogEntry {
+  asctime: string;
+  name: string;
+  levelname: string;
+  message: string;
+  pathname: string;
+  lineno: number;
+  version: string;
+  request_id: string;
+  [key: string]: string | number | object | undefined;
+}
+
+interface LogDetailsDialogProps {
+  log: LogEntry | null;
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+const getLevelColor = (level: string): string => {
+  switch (level.toUpperCase()) {
+    case 'TRACE':
+    case 'DEBUG':
+      return 'bg-gray-100 text-gray-800 border-gray-200';
+    case 'INFO':
+      return 'bg-blue-100 text-blue-800 border-blue-200';
+    case 'WARNING':
+      return 'bg-yellow-100 text-yellow-800 border-yellow-200';
+    case 'ERROR':
+      return 'bg-red-100 text-red-800 border-red-200';
+    case 'CRITICAL':
+      return 'bg-purple-100 text-purple-800 border-purple-200';
+    default:
+      return 'bg-gray-100 text-gray-800 border-gray-200';
+  }
+};
+
+export function LogDetailsDialog({
+  log,
+  isOpen,
+  onClose,
+}: LogDetailsDialogProps) {
+  const [copiedField, setCopiedField] = useState<string | null>(null);
+
+  if (!log) return null;
+
+  const copyToClipboard = (text: string, fieldName?: string) => {
+    navigator.clipboard.writeText(text);
+    if (fieldName) {
+      setCopiedField(fieldName);
+      setTimeout(() => setCopiedField(null), 2000);
+    }
+  };
+
+  const allFields = Object.keys(log).filter((key) => key !== 'key');
+  const standardFields = [
+    'asctime',
+    'name',
+    'levelname',
+    'message',
+    'pathname',
+    'lineno',
+    'version',
+    'request_id',
+  ];
+  const extraFields = allFields.filter((key) => !standardFields.includes(key));
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent className='max-h-[90vh] w-[95vw] max-w-[95vw] overflow-hidden'>
+        <DialogHeader>
+          <DialogTitle className='flex items-center gap-2'>
+            <Badge variant='outline' className={getLevelColor(log.levelname)}>
+              {log.levelname}
+            </Badge>
+            <span>Log Entry Details</span>
+          </DialogTitle>
+          <DialogDescription>
+            {log.asctime} • {log.name} • {log.pathname}:{log.lineno}
+          </DialogDescription>
+        </DialogHeader>
+
+        <ScrollArea className='h-[75vh] w-full overflow-x-auto'>
+          <div className='space-y-6'>
+            <div>
+              <h4 className='mb-2 text-sm font-medium'>Message</h4>
+              <div className='bg-muted max-h-48 overflow-auto rounded-md p-3'>
+                <pre className='font-mono text-sm whitespace-pre break-all'>
+                  {log.message}
+                </pre>
+              </div>
+            </div>
+
+            <div>
+              <h4 className='mb-3 text-sm font-medium'>Standard Fields</h4>
+              <div className='grid grid-cols-1 gap-3'>
+                {standardFields.map((field) => (
+                  <div key={field} className='flex flex-col space-y-1'>
+                    <div className='flex items-center justify-between gap-2'>
+                      <span className='text-muted-foreground text-xs font-medium uppercase'>
+                        {field}
+                      </span>
+                      {field === 'request_id' && (
+                        <Button
+                          variant='outline'
+                          size='sm'
+                          onClick={() => copyToClipboard(String(log[field as keyof LogEntry] || ''), field)}
+                          className='h-6 flex-shrink-0 px-2'
+                        >
+                          {copiedField === field ? (
+                            <>
+                              <Check className='mr-1 h-3 w-3' />
+                              Copied
+                            </>
+                          ) : (
+                            <>
+                              <Copy className='mr-1 h-3 w-3' />
+                              Copy
+                            </>
+                          )}
+                        </Button>
+                      )}
+                    </div>
+                    <div className='bg-muted max-h-32 overflow-auto rounded p-2'>
+                      <pre className='font-mono text-sm break-all whitespace-pre-wrap'>
+                        {String(log[field as keyof LogEntry] || 'N/A')}
+                      </pre>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            {extraFields.length > 0 && (
+              <div>
+                <h4 className='mb-3 text-sm font-medium'>Additional Fields</h4>
+                <div className='grid grid-cols-1 gap-3'>
+                  {extraFields.map((field) => (
+                    <div key={field} className='flex flex-col space-y-1'>
+                      <span className='text-muted-foreground truncate text-xs font-medium uppercase'>
+                        {field}
+                      </span>
+                      <div className='bg-muted max-h-48 overflow-auto rounded p-2'>
+                        {typeof log[field] === 'object' ? (
+                          <pre className='font-mono text-xs break-all whitespace-pre-wrap'>
+                            {JSON.stringify(log[field], null, 2)}
+                          </pre>
+                        ) : (
+                          <pre className='font-mono text-sm break-all whitespace-pre-wrap'>
+                            {String(log[field] || 'N/A')}
+                          </pre>
+                        )}
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            <div>
+              <div className='mb-3 flex items-center justify-between'>
+                <h4 className='text-sm font-medium'>Raw JSON</h4>
+                <Button
+                  variant='outline'
+                  size='sm'
+                  onClick={() => copyToClipboard(JSON.stringify(log, null, 2), 'json')}
+                  className='h-6 px-2'
+                >
+                  {copiedField === 'json' ? (
+                    <>
+                      <Check className='mr-1 h-3 w-3' />
+                      Copied
+                    </>
+                  ) : (
+                    <>
+                      <Copy className='mr-1 h-3 w-3' />
+                      Copy
+                    </>
+                  )}
+                </Button>
+              </div>
+              <div className='bg-muted max-h-64 overflow-auto rounded-md p-4'>
+                <pre className='text-xs break-all whitespace-pre-wrap'>
+                  {JSON.stringify(log, null, 2)}
+                </pre>
+              </div>
+            </div>
+          </div>
+        </ScrollArea>
+      </DialogContent>
+    </Dialog>
+  );
+}

ui/app/logs/log-entry-card.tsx

@@ -0,0 +1,122 @@
+import { Badge } from '@/components/ui/badge';
+import { Eye } from 'lucide-react';
+
+interface LogEntry {
+  asctime: string;
+  name: string;
+  levelname: string;
+  message: string;
+  pathname: string;
+  lineno: number;
+  version: string;
+  request_id: string;
+  [key: string]: string | number | object | undefined;
+}
+
+interface LogEntryCardProps {
+  entry: LogEntry;
+  onClick: (entry: LogEntry) => void;
+}
+
+const getLevelColor = (level: string): string => {
+  switch (level.toUpperCase()) {
+    case 'TRACE':
+    case 'DEBUG':
+      return 'bg-gray-100 text-gray-800 border-gray-200';
+    case 'INFO':
+      return 'bg-blue-100 text-blue-800 border-blue-200';
+    case 'WARNING':
+      return 'bg-yellow-100 text-yellow-800 border-yellow-200';
+    case 'ERROR':
+      return 'bg-red-100 text-red-800 border-red-200';
+    case 'CRITICAL':
+      return 'bg-purple-100 text-purple-800 border-purple-200';
+    default:
+      return 'bg-gray-100 text-gray-800 border-gray-200';
+  }
+};
+
+export function LogEntryCard({ entry, onClick }: LogEntryCardProps) {
+  const extraFields = Object.keys(entry).filter(
+    (key) =>
+      ![
+        'asctime',
+        'name',
+        'levelname',
+        'message',
+        'pathname',
+        'lineno',
+        'version',
+        'request_id',
+      ].includes(key)
+  );
+
+  return (
+    <div
+      className='bg-card hover:bg-accent/50 group mb-4 cursor-pointer overflow-hidden rounded-lg border p-3 transition-colors duration-200 sm:p-4'
+      onClick={() => onClick(entry)}
+    >
+      <div className='mb-3 flex min-w-0 flex-col gap-2 sm:flex-row sm:items-center sm:justify-between'>
+        <div className='flex min-w-0 flex-wrap items-center gap-2'>
+          <Badge variant='outline' className={getLevelColor(entry.levelname)}>
+            {entry.levelname}
+          </Badge>
+          <span className='text-muted-foreground truncate text-xs sm:text-sm'>
+            {entry.asctime}
+          </span>
+          <Badge variant='secondary' className='truncate text-xs'>
+            {entry.name}
+          </Badge>
+        </div>
+        <div className='flex min-w-0 items-center gap-2'>
+          <div className='text-muted-foreground truncate text-xs'>
+            {entry.pathname}:{entry.lineno}
+          </div>
+          <Eye className='text-muted-foreground h-4 w-4 flex-shrink-0 opacity-0 transition-opacity group-hover:opacity-100' />
+        </div>
+      </div>
+
+      <div className='mb-2 line-clamp-3 overflow-hidden font-mono text-xs break-words sm:text-sm'>
+        {entry.message}
+      </div>
+
+      {entry.request_id && entry.request_id !== 'no-request-id' && (
+        <div className='mb-2 min-w-0'>
+          <div className='inline-block max-w-full'>
+            <Badge variant='outline' className='text-xs'>
+              <span className='inline-block max-w-[250px] truncate sm:max-w-[400px]'>
+                Request ID: {entry.request_id}
+              </span>
+            </Badge>
+          </div>
+        </div>
+      )}
+
+      {extraFields.length > 0 && (
+        <div className='mt-3 min-w-0 border-t pt-3'>
+          <div className='mb-2 text-xs font-medium'>Additional Fields:</div>
+          <div className='grid grid-cols-1 gap-2'>
+            {extraFields.slice(0, 4).map((key) => (
+              <div
+                key={key}
+                className='min-w-0 overflow-hidden text-xs break-words'
+              >
+                <span className='font-medium break-all'>{key}:</span>{' '}
+                <span className='text-muted-foreground break-all'>
+                  {typeof entry[key] === 'object'
+                    ? JSON.stringify(entry[key])
+                    : String(entry[key])}
+                </span>
+              </div>
+            ))}
+            {extraFields.length > 4 && (
+              <div className='text-muted-foreground text-xs'>
+                ...and {extraFields.length - 4} more fields
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

ui/app/logs/log-filters.tsx

@@ -0,0 +1,296 @@
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover';
+import { Calendar } from '@/components/ui/calendar';
+import { CalendarIcon, Filter, X } from 'lucide-react';
+import { useState, useEffect } from 'react';
+import { format } from 'date-fns';
+import { cn } from '@/lib/utils';
+
+interface LogFiltersProps {
+  selectedDate: string;
+  selectedLevel: string;
+  requestId: string;
+  searchText: string;
+  limit: number;
+  onDateChange: (date: string) => void;
+  onLevelChange: (level: string) => void;
+  onRequestIdChange: (requestId: string) => void;
+  onSearchTextChange: (searchText: string) => void;
+  onLimitChange: (limit: number) => void;
+  onClearFilters: () => void;
+}
+
+const LOG_LEVELS = ['TRACE', 'DEBUG', 'INFO', 'WARNING', 'ERROR', 'CRITICAL'];
+const PRESET_LIMITS = ['25', '50', '100', '200', '500', '1000'];
+
+export function LogFilters({
+  selectedDate,
+  selectedLevel,
+  requestId,
+  searchText,
+  limit,
+  onDateChange,
+  onLevelChange,
+  onRequestIdChange,
+  onSearchTextChange,
+  onLimitChange,
+  onClearFilters,
+}: LogFiltersProps) {
+  const isPreset = PRESET_LIMITS.includes(limit.toString());
+
+  const [customLimit, setCustomLimit] = useState<string>(
+    isPreset ? '' : limit.toString()
+  );
+  const [isCustom, setIsCustom] = useState<boolean>(!isPreset);
+  const [date, setDate] = useState<Date | undefined>(
+    selectedDate && selectedDate !== 'all'
+      ? new Date(selectedDate + 'T00:00:00')
+      : undefined
+  );
+
+  useEffect(() => {
+    const currentIsPreset = PRESET_LIMITS.includes(limit.toString());
+    setIsCustom(!currentIsPreset);
+    if (!currentIsPreset) {
+      setCustomLimit(limit.toString());
+    }
+  }, [limit]);
+
+  useEffect(() => {
+    if (selectedDate === 'all' || !selectedDate) {
+      setDate(undefined);
+    } else {
+      const d = new Date(selectedDate + 'T00:00:00');
+      setDate(isNaN(d.getTime()) ? undefined : d);
+    }
+  }, [selectedDate]);
+
+  const handleLimitChange = (value: string) => {
+    if (value === 'custom') {
+      setIsCustom(true);
+      setCustomLimit(limit.toString());
+    } else {
+      setIsCustom(false);
+      setCustomLimit('');
+      onLimitChange(Number(value));
+    }
+  };
+
+  const handleCustomLimitChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    setCustomLimit(value);
+  };
+
+  const handleCustomLimitApply = () => {
+    const numValue = parseInt(customLimit);
+    if (!isNaN(numValue) && numValue > 0) {
+      onLimitChange(numValue);
+    } else {
+      setIsCustom(false);
+      setCustomLimit('');
+      onLimitChange(100);
+    }
+  };
+
+  const handleCustomLimitKeyDown = (
+    e: React.KeyboardEvent<HTMLInputElement>
+  ) => {
+    if (e.key === 'Enter') {
+      handleCustomLimitApply();
+    }
+  };
+
+  const handleDateSelect = (selectedDate: Date | undefined) => {
+    setDate(selectedDate);
+    if (selectedDate) {
+      onDateChange(format(selectedDate, 'yyyy-MM-dd'));
+    } else {
+      onDateChange('all');
+    }
+  };
+
+  return (
+    <Card className='mb-6'>
+      <CardHeader>
+        <CardTitle className='flex items-center gap-2'>
+          <Filter className='h-5 w-5' />
+          Filters
+        </CardTitle>
+        <CardDescription>
+          Filter logs by date, level, request ID, text search, and limit
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div className='grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3'>
+          <div className='space-y-2'>
+            <Label htmlFor='date'>Date</Label>
+            <Popover>
+              <PopoverTrigger asChild>
+                <Button
+                  variant='outline'
+                  className={cn(
+                    'w-full justify-start text-left font-normal',
+                    !date && 'text-muted-foreground'
+                  )}
+                >
+                  <CalendarIcon className='mr-2 h-4 w-4' />
+                  {date ? format(date, 'PPP') : <span>Pick a date</span>}
+                </Button>
+              </PopoverTrigger>
+              <PopoverContent className='w-auto p-0' align='start'>
+                <Calendar
+                  mode='single'
+                  selected={date}
+                  onSelect={handleDateSelect}
+                  initialFocus
+                />
+              </PopoverContent>
+            </Popover>
+            {date && (
+              <Button
+                type='button'
+                variant='ghost'
+                size='sm'
+                onClick={() => handleDateSelect(undefined)}
+                className='w-full'
+              >
+                <X className='mr-2 h-4 w-4' />
+                Clear date
+              </Button>
+            )}
+          </div>
+
+          <div className='space-y-2'>
+            <Label htmlFor='level'>Log Level</Label>
+            <Select value={selectedLevel} onValueChange={onLevelChange}>
+              <SelectTrigger>
+                <SelectValue placeholder='Select level' />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value='all'>All levels</SelectItem>
+                {LOG_LEVELS.map((level) => (
+                  <SelectItem key={level} value={level}>
+                    {level}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div className='space-y-2'>
+            <Label htmlFor='request-id'>Request ID</Label>
+            <Input
+              id='request-id'
+              type='text'
+              placeholder='Search by request ID'
+              value={requestId}
+              onChange={(e) => onRequestIdChange(e.target.value)}
+            />
+          </div>
+
+          <div className='space-y-2'>
+            <Label htmlFor='search-text' className='flex items-center gap-1'>
+              <span>Text Search</span>
+              <span className='text-muted-foreground text-xs font-normal'>
+                (can be slow)
+              </span>
+            </Label>
+            <Input
+              id='search-text'
+              type='text'
+              placeholder='Search in message and name'
+              value={searchText}
+              onChange={(e) => onSearchTextChange(e.target.value)}
+            />
+          </div>
+
+          <div className='space-y-2'>
+            <Label htmlFor='limit'>Limit</Label>
+            {isCustom ? (
+              <div className='flex gap-2'>
+                <Input
+                  id='limit'
+                  type='number'
+                  min='1'
+                  placeholder='Enter custom limit'
+                  value={customLimit}
+                  onChange={handleCustomLimitChange}
+                  onKeyDown={handleCustomLimitKeyDown}
+                  onBlur={handleCustomLimitApply}
+                  autoFocus
+                  className='flex-1'
+                />
+                <Button
+                  type='button'
+                  variant='secondary'
+                  size='sm'
+                  onClick={() => {
+                    setIsCustom(false);
+                    setCustomLimit('');
+                    if (!isPreset) {
+                      onLimitChange(100);
+                    }
+                  }}
+                >
+                  Cancel
+                </Button>
+              </div>
+            ) : (
+              <Select
+                value={isPreset ? limit.toString() : 'custom'}
+                onValueChange={handleLimitChange}
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder='Select limit' />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value='25'>25</SelectItem>
+                  <SelectItem value='50'>50</SelectItem>
+                  <SelectItem value='100'>100</SelectItem>
+                  <SelectItem value='200'>200</SelectItem>
+                  <SelectItem value='500'>500</SelectItem>
+                  <SelectItem value='1000'>1000</SelectItem>
+                  <SelectItem value='custom'>Custom...</SelectItem>
+                </SelectContent>
+              </Select>
+            )}
+            {!isCustom && !isPreset && (
+              <p className='text-muted-foreground text-xs'>Custom: {limit}</p>
+            )}
+          </div>
+
+          <div className='space-y-2'>
+            <Label>&nbsp;</Label>
+            <Button
+              onClick={onClearFilters}
+              variant='outline'
+              className='w-full'
+            >
+              Clear Filters
+            </Button>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

ui/app/logs/page.tsx

@@ -0,0 +1,178 @@
+'use client';
+
+import { useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { AppSidebar } from '@/components/app-sidebar';
+import { SiteHeader } from '@/components/site-header';
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { FileText, RefreshCw } from 'lucide-react';
+import { apiClient } from '@/lib/api/client';
+import { SidebarInset, SidebarProvider } from '@/components/ui/sidebar';
+import { LogEntry, LogsResponse } from './types';
+import { LogFilters } from './log-filters';
+import { LogEntryCard } from './log-entry-card';
+import { LogDetailsDialog } from './log-details-dialog';
+
+export default function LogsPage() {
+  const [selectedDate, setSelectedDate] = useState<string>('all');
+  const [selectedLevel, setSelectedLevel] = useState<string>('all');
+  const [requestId, setRequestId] = useState<string>('');
+  const [searchText, setSearchText] = useState<string>('');
+  const [limit, setLimit] = useState<number>(100);
+  const [selectedLog, setSelectedLog] = useState<LogEntry | null>(null);
+  const [isDialogOpen, setIsDialogOpen] = useState<boolean>(false);
+
+  const {
+    data: logsData,
+    refetch: refetchLogs,
+    isLoading,
+  } = useQuery({
+    queryKey: [
+      'logs',
+      selectedDate,
+      selectedLevel,
+      requestId,
+      searchText,
+      limit,
+    ],
+    queryFn: () =>
+      apiClient.get<LogsResponse>('/admin/api/logs', {
+        date: selectedDate === 'all' ? undefined : selectedDate,
+        level: selectedLevel === 'all' ? undefined : selectedLevel,
+        request_id: requestId || undefined,
+        search: searchText || undefined,
+        limit: limit,
+      }),
+    refetchInterval: 30000,
+  });
+
+  const handleClearFilters = () => {
+    setSelectedDate('all');
+    setSelectedLevel('all');
+    setRequestId('');
+    setSearchText('');
+    setLimit(100);
+  };
+
+  const handleLogClick = (entry: LogEntry) => {
+    setSelectedLog(entry);
+    setIsDialogOpen(true);
+  };
+
+  return (
+    <SidebarProvider>
+      <AppSidebar variant='inset' />
+      <SidebarInset className='overflow-x-hidden p-0'>
+        <SiteHeader />
+        <div className='container max-w-6xl overflow-x-hidden px-3 py-4 sm:px-4 sm:py-8 md:px-6 lg:px-8'>
+          <div className='mb-6 flex flex-col gap-3 sm:mb-8 sm:gap-4 lg:flex-row lg:items-start lg:justify-between'>
+            <div>
+              <h1 className='flex items-center gap-2 text-2xl font-bold tracking-tight sm:text-3xl'>
+                <FileText className='h-6 w-6 sm:h-8 sm:w-8' />
+                System Logs
+              </h1>
+              <p className='text-muted-foreground mt-1 text-sm sm:mt-2 sm:text-base'>
+                View and filter application logs
+              </p>
+            </div>
+            <Button
+              onClick={() => refetchLogs()}
+              variant='outline'
+              size='sm'
+              className='self-start'
+            >
+              <RefreshCw className='mr-2 h-4 w-4' />
+              Refresh
+            </Button>
+          </div>
+
+          <LogFilters
+            selectedDate={selectedDate}
+            selectedLevel={selectedLevel}
+            requestId={requestId}
+            searchText={searchText}
+            limit={limit}
+            onDateChange={setSelectedDate}
+            onLevelChange={setSelectedLevel}
+            onRequestIdChange={setRequestId}
+            onSearchTextChange={setSearchText}
+            onLimitChange={setLimit}
+            onClearFilters={handleClearFilters}
+          />
+
+          <Card>
+            <CardHeader>
+              <CardTitle className='flex flex-col items-start gap-2 sm:flex-row sm:items-center sm:justify-between'>
+                <span className='text-lg sm:text-xl'>Log Entries</span>
+                {logsData && (
+                  <Badge variant='secondary' className='text-xs sm:text-sm'>
+                    {logsData.logs.length} entries
+                  </Badge>
+                )}
+              </CardTitle>
+              {(selectedDate !== 'all' ||
+                selectedLevel !== 'all' ||
+                requestId ||
+                searchText) && (
+                <CardDescription className='text-xs sm:text-sm'>
+                  Showing logs
+                  {selectedDate !== 'all' && ` for ${selectedDate}`}
+                  {selectedLevel !== 'all' && ` with level ${selectedLevel}`}
+                  {requestId && ` with request ID ${requestId}`}
+                  {searchText && ` matching "${searchText}"`}
+                </CardDescription>
+              )}
+            </CardHeader>
+            <CardContent className='overflow-hidden p-3 sm:p-6'>
+              {isLoading ? (
+                <div className='flex items-center justify-center py-8'>
+                  <RefreshCw className='h-6 w-6 animate-spin' />
+                  <span className='ml-2 text-sm sm:text-base'>
+                    Loading logs...
+                  </span>
+                </div>
+              ) : logsData?.logs && logsData.logs.length > 0 ? (
+                <>
+                  <ScrollArea className='h-[500px] w-full sm:h-[600px]'>
+                    <div className='space-y-2 pr-3'>
+                      {logsData.logs.map((entry, index) => (
+                        <LogEntryCard
+                          key={`${entry.request_id}-${entry.asctime}-${entry.lineno}-${index}`}
+                          entry={entry}
+                          onClick={handleLogClick}
+                        />
+                      ))}
+                    </div>
+                  </ScrollArea>
+                </>
+              ) : (
+                <div className='text-muted-foreground py-8 text-center'>
+                  <FileText className='mx-auto mb-4 h-10 w-10 opacity-50 sm:h-12 sm:w-12' />
+                  <p className='text-sm sm:text-base'>No log entries found</p>
+                  <p className='text-xs sm:text-sm'>
+                    Try adjusting your filters or check back later
+                  </p>
+                </div>
+              )}
+            </CardContent>
+          </Card>
+
+          <LogDetailsDialog
+            log={selectedLog}
+            isOpen={isDialogOpen}
+            onClose={() => setIsDialogOpen(false)}
+          />
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  );
+}

ui/app/logs/types.ts

@@ -0,0 +1,25 @@
+export interface LogEntry {
+  asctime: string;
+  name: string;
+  levelname: string;
+  message: string;
+  pathname: string;
+  lineno: number;
+  version: string;
+  request_id: string;
+  [key: string]: string | number | object | undefined;
+}
+
+export interface LogsResponse {
+  logs: LogEntry[];
+  total: number;
+  date: string | null;
+  level: string | null;
+  request_id: string | null;
+  search: string | null;
+  limit: number;
+}
+
+export interface DatesResponse {
+  dates: string[];
+}

ui/app/model/page.tsx

@@ -34,7 +34,6 @@ export default function ModelsPage() {
   const { models = [], groups = [] } = modelsData || {};
 
   const groupedModels = useMemo(() => {
-    if (!models) return {};
     return groupAndSortModelsByProvider(models);
   }, [models]);
 
@@ -43,7 +42,14 @@ export default function ModelsPage() {
   }, [groups]);
 
   const providerInfo = useMemo(() => {
-    return Object.entries(groupedModels).map(([provider, providerModels]) => {
+    const allProviders = new Set([
+      ...Object.keys(groupedModels),
+      ...groups.map((g) => g.provider),
+    ]);
+    console.log(allProviders);
+
+    return Array.from(allProviders).map((provider) => {
+      const providerModels = groupedModels[provider] || [];
       const groupData = groupDataMap.get(provider);
       const activeModels = providerModels.filter(
         (m) => m.isEnabled && !m.soft_deleted
@@ -59,7 +65,7 @@ export default function ModelsPage() {
         hasGroupApiKey: !!groupData?.group_api_key,
       };
     });
-  }, [groupedModels, groupDataMap]);
+  }, [groupedModels, groupDataMap, groups]);
 
   return (
     <SidebarProvider>
@@ -158,9 +164,9 @@ export default function ModelsPage() {
                         </div>
                       </TabsContent>
 
-                      {Object.entries(groupedModels).map(
-                        ([provider, providerModels]) => {
-                          const groupData = groupDataMap.get(provider);
+                      {providerInfo.map(
+                        ({ provider, totalModels, groupData }) => {
+                          const providerModels = groupedModels[provider] || [];
 
                           return (
                             <TabsContent key={provider} value={provider}>
@@ -190,15 +196,55 @@ export default function ModelsPage() {
                                           {groupData.group_url}
                                         </span>
                                       )}
+                                      {totalModels === 0 && (
+                                        <span className='text-muted-foreground'>
+                                          No models configured
+                                        </span>
+                                      )}
                                     </div>
                                   </div>
                                 </div>
-                                <ModelSelector
-                                  filterProvider={provider}
-                                  groupData={groupData}
-                                  showProviderActions={true}
-                                  showDeleteAllButton={false}
-                                />
+                                {totalModels === 0 ? (
+                                  <Alert>
+                                    <AlertCircle className='h-4 w-4' />
+                                    <AlertDescription>
+                                      <div className='space-y-2'>
+                                        <p className='font-medium'>
+                                          No models found for this provider
+                                        </p>
+                                        <div className='text-sm space-y-1'>
+                                          <p className='font-medium'>Common issues:</p>
+                                          <ul className='list-disc list-inside space-y-1 ml-2'>
+                                            <li>
+                                              <strong>API credentials:</strong> Check if the API key is correct and has the right permissions
+                                            </li>
+                                            <li>
+                                              <strong>Base URL:</strong> Verify the base URL is correct for your provider
+                                            </li>
+                                            <li>
+                                              <strong>Network access:</strong> Ensure the server can reach the provider&apos;s API endpoint
+                                            </li>
+                                            <li>
+                                              <strong>Provider status:</strong> The upstream provider might be temporarily unavailable
+                                            </li>
+                                          </ul>
+                                          {groupData?.group_url && (
+                                            <p className='mt-2 text-xs text-muted-foreground'>
+                                              Current endpoint: <code className='bg-muted px-1 rounded'>{groupData.group_url}</code>
+                                            </p>
+                                          )}
+                                        </div>
+                                      </div>
+                                    </AlertDescription>
+                                  </Alert>
+                                ) : (
+                                  <ModelSelector
+                                    filterProvider={provider}
+                                    groupData={groupData}
+                                    showProviderActions={true}
+                                    showDeleteAllButton={false}
+                                  />
+                                )}
                               </div>
                             </TabsContent>
                           );

ui/app/page.tsx

@@ -5,81 +5,349 @@ import { useQuery } from '@tanstack/react-query';
 import { AppSidebar } from '@/components/app-sidebar';
 import { SiteHeader } from '@/components/site-header';
 import { SidebarInset, SidebarProvider } from '@/components/ui/sidebar';
-import { DetailedWalletBalance } from '@/components/detailed-wallet-balance';
-import { TemporaryBalances } from '@/components/temporary-balances';
-import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
-import type { DisplayUnit } from '@/lib/types/units';
+import { UsageMetricsChart } from '@/components/usage-metrics-chart';
+import { UsageSummaryCards } from '@/components/usage-summary-cards';
+import { ErrorDetailsTable } from '@/components/error-details-table';
+import { RevenueByModelTable } from '@/components/revenue-by-model-table';
+import { DashboardBalanceSummary } from '@/components/dashboard-balance-summary';
+import { AdminService } from '@/lib/api/services/admin';
+import { Button } from '@/components/ui/button';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { RefreshCw } from 'lucide-react';
+import { useCurrencyStore } from '@/lib/stores/currency';
 import { fetchBtcUsdPrice, btcToSatsRate } from '@/lib/exchange-rate';
+import { CheatSheet } from '@/components/landing/cheat-sheet';
+import { ConfigurationService } from '@/lib/api/services/configuration';
 
-export default function Page() {
-  const [displayUnit, setDisplayUnit] = useState<DisplayUnit>('sat');
+export default function DashboardPage() {
+  const [timeRange, setTimeRange] = useState('24');
+  const [interval, setInterval] = useState('15');
+  const { displayUnit } = useCurrencyStore();
+  const [isAuthenticated, setIsAuthenticated] = useState(() => {
+    if (typeof window === 'undefined') {
+      return false;
+    }
+    return ConfigurationService.isTokenValid();
+  });
 
+  useEffect(() => {
+    if (typeof window === 'undefined') {
+      return;
+    }
+
+    const syncAuthState = (): void => {
+      setIsAuthenticated(ConfigurationService.isTokenValid());
+    };
+
+    syncAuthState();
+    window.addEventListener('storage', syncAuthState);
+
+    return () => {
+      window.removeEventListener('storage', syncAuthState);
+    };
+  }, []);
+  
   const { data: btcUsdPrice } = useQuery({
     queryKey: ['btc-usd-price'],
     queryFn: fetchBtcUsdPrice,
+    enabled: isAuthenticated,
     refetchInterval: 120_000,
     staleTime: 60_000,
   });
 
   const usdPerSat = btcUsdPrice ? btcToSatsRate(btcUsdPrice) : null;
 
-  useEffect(() => {
-    if (displayUnit === 'usd' && usdPerSat === null) {
-      setDisplayUnit('sat');
-    }
-  }, [displayUnit, usdPerSat]);
+  const {
+    data: metricsData,
+    isLoading: metricsLoading,
+    refetch: refetchMetrics,
+  } = useQuery({
+    queryKey: ['usage-metrics', interval, timeRange],
+    queryFn: () =>
+      AdminService.getUsageMetrics(parseInt(interval), parseInt(timeRange)),
+    enabled: isAuthenticated,
+    refetchInterval: 60_000,
+    staleTime: 30_000,
+  });
+
+  const {
+    data: summaryData,
+    isLoading: summaryLoading,
+    refetch: refetchSummary,
+  } = useQuery({
+    queryKey: ['usage-summary', timeRange],
+    queryFn: () => AdminService.getUsageSummary(parseInt(timeRange)),
+    enabled: isAuthenticated,
+    refetchInterval: 60_000,
+    staleTime: 30_000,
+  });
+
+  const {
+    data: errorData,
+    isLoading: errorLoading,
+    refetch: refetchErrors,
+  } = useQuery({
+    queryKey: ['usage-errors', timeRange],
+    queryFn: () => AdminService.getErrorDetails(parseInt(timeRange), 100),
+    enabled: isAuthenticated,
+    refetchInterval: 60_000,
+    staleTime: 30_000,
+  });
+
+  const {
+    data: revenueByModelData,
+    isLoading: revenueByModelLoading,
+    refetch: refetchRevenueByModel,
+  } = useQuery({
+    queryKey: ['revenue-by-model', timeRange],
+    queryFn: () => AdminService.getRevenueByModel(parseInt(timeRange), 20),
+    enabled: isAuthenticated,
+    refetchInterval: 60_000,
+    staleTime: 30_000,
+  });
+
+  if (!isAuthenticated) {
+    return <CheatSheet />;
+  }
+
+  const handleRefresh = () => {
+    refetchMetrics();
+    refetchSummary();
+    refetchErrors();
+    refetchRevenueByModel();
+  };
 
   return (
     <SidebarProvider>
       <AppSidebar variant='inset' />
       <SidebarInset className='p-0'>
         <SiteHeader />
-        <div className='container max-w-6xl px-4 py-8 md:px-6 lg:px-8'>
-          <div className='mb-8 flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between'>
+        <div className='container max-w-7xl px-4 py-8 md:px-6 lg:px-8'>
+          <div className='mb-8'>
+            <h1 className='text-3xl font-bold tracking-tight mb-6'>Dashboard</h1>
+            <DashboardBalanceSummary displayUnit={displayUnit} usdPerSat={usdPerSat} />
+          </div>
+
+          <div className='mb-6 flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between'>
             <div>
-              <h1 className='text-3xl font-bold tracking-tight'>
-                Admin Dashboard
-              </h1>
-              <p className='text-muted-foreground mt-2'>
-                Monitor and manage wallet balances
+              <h2 className='text-xl font-semibold tracking-tight'>
+                Usage Analytics
+              </h2>
+              <p className='text-muted-foreground text-sm mt-1'>
+                Monitor requests, errors, and revenue over the last {timeRange} hours
               </p>
             </div>
-            <div className='flex items-center'>
-              <ToggleGroup
-                type='single'
-                value={displayUnit}
-                onValueChange={(value) => {
-                  if (value) {
-                    setDisplayUnit(value as DisplayUnit);
-                  }
-                }}
-                variant='outline'
-                size='sm'
-              >
-                <ToggleGroupItem value='msat'>mSAT</ToggleGroupItem>
-                <ToggleGroupItem value='sat'>sat</ToggleGroupItem>
-                <ToggleGroupItem value='usd' disabled={!usdPerSat}>
-                  USD
-                </ToggleGroupItem>
-              </ToggleGroup>
+            <div className='flex items-center gap-4'>
+              <Select value={timeRange} onValueChange={setTimeRange}>
+                <SelectTrigger className='w-[180px]'>
+                  <SelectValue placeholder='Select time range' />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value='1'>Last Hour</SelectItem>
+                  <SelectItem value='6'>Last 6 Hours</SelectItem>
+                  <SelectItem value='24'>Last 24 Hours</SelectItem>
+                  <SelectItem value='72'>Last 3 Days</SelectItem>
+                  <SelectItem value='168'>Last Week</SelectItem>
+                </SelectContent>
+              </Select>
+              <Select value={interval} onValueChange={setInterval}>
+                <SelectTrigger className='w-[180px]'>
+                  <SelectValue placeholder='Select interval' />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value='5'>5 Minutes</SelectItem>
+                  <SelectItem value='15'>15 Minutes</SelectItem>
+                  <SelectItem value='30'>30 Minutes</SelectItem>
+                  <SelectItem value='60'>1 Hour</SelectItem>
+                </SelectContent>
+              </Select>
+              <Button onClick={handleRefresh} variant='outline' size='icon'>
+                <RefreshCw className='h-4 w-4' />
+              </Button>
             </div>
           </div>
 
-          <div className='grid gap-6'>
-            <div className='col-span-full'>
-              <DetailedWalletBalance
-                refreshInterval={30000}
-                displayUnit={displayUnit}
-                usdPerSat={usdPerSat}
-              />
+          <div className='space-y-6'>
+            {summaryLoading ? (
+              <div className='text-center py-8'>Loading summary...</div>
+            ) : summaryData ? (
+              <UsageSummaryCards summary={summaryData} />
+            ) : null}
+
+            <div className='grid gap-6 lg:grid-cols-2'>
+              {metricsLoading ? (
+                <div className='text-center py-8 col-span-2'>
+                  Loading metrics...
+                </div>
+              ) : metricsData && metricsData.metrics.length > 0 ? (
+                <>
+                  <div className="col-span-full">
+                    <UsageMetricsChart
+                      data={metricsData.metrics.map((m) => ({
+                        ...m,
+                        revenue_sats: m.revenue_msats / 1000,
+                        refunds_sats: m.refunds_msats / 1000,
+                        net_revenue_sats:
+                          (m.revenue_msats - m.refunds_msats) / 1000,
+                      })) as Array<Record<string, unknown> & { timestamp: string }>}
+                      title='Revenue Over Time (sats)'
+                      dataKeys={[
+                        {
+                          key: 'revenue_sats',
+                          name: 'Revenue',
+                          color: '#10b981',
+                        },
+                        {
+                          key: 'net_revenue_sats',
+                          name: 'Net Revenue',
+                          color: '#059669',
+                        },
+                        {
+                          key: 'refunds_sats',
+                          name: 'Refunds',
+                          color: '#ef4444',
+                        },
+                      ]}
+                    />
+                  </div>
+                  <UsageMetricsChart
+                    data={metricsData.metrics as Array<Record<string, unknown> & { timestamp: string }>}
+                    title='Request Volume'
+                    dataKeys={[
+                      {
+                        key: 'total_requests',
+                        name: 'Total Requests',
+                        color: '#3b82f6',
+                      },
+                      {
+                        key: 'successful_chat_completions',
+                        name: 'Successful',
+                        color: '#22c55e',
+                      },
+                      {
+                        key: 'failed_requests',
+                        name: 'Failed',
+                        color: '#f43f5e',
+                      },
+                    ]}
+                  />
+                  <UsageMetricsChart
+                    data={metricsData.metrics as Array<Record<string, unknown> & { timestamp: string }>}
+                    title='Error Tracking'
+                    dataKeys={[
+                      {
+                        key: 'errors',
+                        name: 'Errors',
+                        color: '#f97316',
+                      },
+                      {
+                        key: 'warnings',
+                        name: 'Warnings',
+                        color: '#eab308',
+                      },
+                      {
+                        key: 'upstream_errors',
+                        name: 'Upstream Errors',
+                        color: '#dc2626',
+                      },
+                    ]}
+                  />
+                  <UsageMetricsChart
+                    data={metricsData.metrics as Array<Record<string, unknown> & { timestamp: string }>}
+                    title='Payment Activity'
+                    dataKeys={[
+                      {
+                        key: 'payment_processed',
+                        name: 'Payments Processed',
+                        color: '#8b5cf6',
+                      },
+                    ]}
+                  />
+                  <div className="space-y-6">
+                    {summaryData && summaryData.unique_models.length > 0 && (
+                      <Card>
+                        <CardHeader>
+                          <CardTitle>Active Models</CardTitle>
+                        </CardHeader>
+                        <CardContent>
+                          <div className='flex flex-wrap gap-2'>
+                            {summaryData.unique_models.map((model) => (
+                              <span
+                                key={model}
+                                className='bg-secondary text-secondary-foreground inline-flex items-center rounded-md px-2.5 py-0.5 text-xs font-semibold'
+                              >
+                                {model}
+                              </span>
+                            ))}
+                          </div>
+                        </CardContent>
+                      </Card>
+                    )}
+                    {summaryData &&
+                      summaryData.error_types &&
+                      Object.keys(summaryData.error_types).length > 0 && (
+                        <Card>
+                          <CardHeader>
+                            <CardTitle>Error Types Distribution</CardTitle>
+                          </CardHeader>
+                          <CardContent>
+                            <div className='space-y-2'>
+                              {Object.entries(summaryData.error_types)
+                                .sort(([, a], [, b]) => b - a)
+                                .map(([type, count]) => (
+                                  <div
+                                    key={type}
+                                    className='flex items-center justify-between'
+                                  >
+                                    <span className='text-sm font-medium'>{type}</span>
+                                    <span className='text-muted-foreground text-sm'>
+                                      {count}
+                                    </span>
+                                  </div>
+                                ))}
+                            </div>
+                          </CardContent>
+                        </Card>
+                      )}
+                  </div>
+                </>
+              ) : (
+                <Card className='col-span-2'>
+                  <CardHeader>
+                    <CardTitle>No Data Available</CardTitle>
+                  </CardHeader>
+                  <CardContent>
+                    <p className='text-muted-foreground'>
+                      No metrics data found for the selected time range. This
+                      could be because no requests have been logged yet or the
+                      log files are not available.
+                    </p>
+                  </CardContent>
+                </Card>
+              )}
             </div>
-            <div className='col-span-full'>
-              <TemporaryBalances
-                refreshInterval={60000}
-                displayUnit={displayUnit}
-                usdPerSat={usdPerSat}
+
+            {revenueByModelLoading ? (
+              <div className='text-center py-8'>Loading revenue by model...</div>
+            ) : revenueByModelData && revenueByModelData.models.length > 0 ? (
+              <RevenueByModelTable 
+                models={revenueByModelData.models}
+                totalRevenue={revenueByModelData.total_revenue_sats}
               />
-            </div>
+            ) : null}
+
+            {errorLoading ? (
+              <div className='text-center py-8'>Loading errors...</div>
+            ) : errorData ? (
+              <ErrorDetailsTable errors={errorData.errors} />
+            ) : null}
           </div>
         </div>
       </SidebarInset>

ui/app/providers/page.tsx

@@ -51,9 +51,282 @@ import {
 } from '@/components/ui/select';
 import { Switch } from '@/components/ui/switch';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { toast } from 'sonner';
 
+function ProviderBalance({ providerId }: { providerId: number }) {
+  const [isTopupDialogOpen, setIsTopupDialogOpen] = useState(false);
+  const [topupAmount, setTopupAmount] = useState('');
+  const [topupError, setTopupError] = useState('');
+  const [isHovered, setIsHovered] = useState(false);
+  const [invoiceData, setInvoiceData] = useState<{
+    payment_request: string;
+    invoice_id: string;
+  } | null>(null);
+  const [paymentStatus, setPaymentStatus] = useState<'pending' | 'paid' | null>(
+    null
+  );
+  const queryClient = useQueryClient();
+
+  const { data: balanceData, isLoading, error } = useQuery({
+    queryKey: ['provider-balance', providerId],
+    queryFn: () => AdminService.getProviderBalance(providerId),
+    refetchInterval: 30000,
+    refetchOnWindowFocus: true,
+    retry: 1,
+  });
+
+  const { data: statusData } = useQuery({
+    queryKey: ['topup-status', providerId, invoiceData?.invoice_id],
+    queryFn: () =>
+      AdminService.checkTopupStatus(providerId, invoiceData!.invoice_id),
+    enabled: !!invoiceData && paymentStatus === 'pending',
+    refetchInterval: 2000,
+  });
+
+  useEffect(() => {
+    if (statusData?.paid === true) {
+      setPaymentStatus('paid');
+      queryClient.invalidateQueries({
+        queryKey: ['provider-balance', providerId],
+      });
+      toast.success('Payment received!', {
+        description: 'Your balance has been updated.',
+      });
+    }
+  }, [statusData, queryClient, providerId]);
+
+  const topupMutation = useMutation({
+    mutationFn: async (amount: number) => {
+      console.log('Calling top-up API with:', { providerId, amount });
+      try {
+        const result = await AdminService.initiateProviderTopup(providerId, amount);
+        console.log('API returned:', result);
+        return result;
+      } catch (err) {
+        console.error('API call failed:', err);
+        throw err;
+      }
+    },
+    onSuccess: (data) => {
+      console.log('Top-up response:', data);
+      console.log('Type of data:', typeof data);
+      console.log('Keys in data:', Object.keys(data || {}));
+      
+      if (
+        data?.topup_data?.payment_request &&
+        data?.topup_data?.invoice_id
+      ) {
+        setInvoiceData({
+          payment_request: data.topup_data.payment_request as string,
+          invoice_id: data.topup_data.invoice_id as string,
+        });
+        setPaymentStatus('pending');
+      } else {
+        console.error('Missing invoice data:', data);
+        console.error('topup_data:', data?.topup_data);
+        toast.error('No invoice returned from provider');
+        setIsTopupDialogOpen(false);
+      }
+    },
+    onError: (error: Error) => {
+      console.error('Top-up mutation error:', error);
+      toast.error(`Failed to initiate top-up: ${error.message}`);
+    },
+  });
+
+  const handleTopup = () => {
+    const amount = parseFloat(topupAmount);
+
+    if (isNaN(amount)) {
+      setTopupError('Please enter a valid amount');
+      return;
+    }
+
+    if (amount < 1 || amount > 500) {
+      setTopupError('Amount must be between $1 and $500');
+      return;
+    }
+
+    topupMutation.mutate(amount);
+  };
+
+  const handleCloseDialog = () => {
+    setIsTopupDialogOpen(false);
+    setTopupAmount('');
+    setTopupError('');
+    setInvoiceData(null);
+    setPaymentStatus(null);
+  };
+
+  if (isLoading) {
+    return <Skeleton className='h-9 w-24' />;
+  }
+
+  if (error || !balanceData?.ok || !balanceData.balance_data) {
+    return null;
+  }
+
+  const balance = balanceData.balance_data;
+  let displayValue = 'N/A';
+
+  if (typeof balance.balance === 'number') {
+    displayValue = `$${balance.balance.toFixed(2)}`;
+  } else if (typeof balance.balance === 'string') {
+    displayValue = balance.balance;
+  } else if (balance.amount !== undefined) {
+    displayValue = `$${Number(balance.amount).toFixed(2)}`;
+  }
+
+  return (
+    <>
+      <Button
+        variant='outline'
+        size='sm'
+        onClick={() => setIsTopupDialogOpen(true)}
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
+        className='w-full font-mono sm:w-auto'
+      >
+        {isHovered ? 'Top Up' : displayValue}
+      </Button>
+
+      <Dialog open={isTopupDialogOpen} onOpenChange={handleCloseDialog}>
+        <DialogContent className='sm:max-w-md'>
+          <DialogHeader>
+            <DialogTitle>
+              {paymentStatus === 'paid'
+                ? 'Payment Confirmed!'
+                : 'Top Up Balance'}
+            </DialogTitle>
+            <DialogDescription>
+              {paymentStatus === 'paid'
+                ? 'Your account balance has been updated.'
+                : invoiceData
+                  ? 'Scan the QR code or copy the Lightning invoice to pay.'
+                  : 'Enter the amount you want to add to your account balance.'}
+            </DialogDescription>
+          </DialogHeader>
+
+          {paymentStatus === 'paid' ? (
+            <div className='flex flex-col items-center gap-4 py-6'>
+              <div className='rounded-full bg-green-100 p-3 dark:bg-green-900'>
+                <svg
+                  className='h-12 w-12 text-green-600 dark:text-green-400'
+                  fill='none'
+                  strokeLinecap='round'
+                  strokeLinejoin='round'
+                  strokeWidth='2'
+                  viewBox='0 0 24 24'
+                  stroke='currentColor'
+                >
+                  <path d='M5 13l4 4L19 7'></path>
+                </svg>
+              </div>
+              <p className='text-center font-semibold'>
+                Top-up successful!
+              </p>
+            </div>
+          ) : invoiceData ? (
+            <div className='flex flex-col items-center gap-4 py-4'>
+              <div className='rounded-lg border-2 border-gray-200 p-2 dark:border-gray-800'>
+                {/* eslint-disable-next-line @next/next/no-img-element */}
+                <img
+                  src={`https://api.qrserver.com/v1/create-qr-code/?size=256x256&data=${encodeURIComponent(invoiceData.payment_request)}`}
+                  alt='Lightning Invoice QR Code'
+                  className='h-64 w-64'
+                />
+              </div>
+              <div className='w-full space-y-2'>
+                <Label htmlFor='invoice'>Lightning Invoice</Label>
+                <div className='flex gap-2'>
+                  <Input
+                    id='invoice'
+                    value={invoiceData.payment_request}
+                    readOnly
+                    className='font-mono text-xs'
+                  />
+                  <Button
+                    size='sm'
+                    variant='outline'
+                    onClick={() => {
+                      navigator.clipboard.writeText(
+                        invoiceData.payment_request
+                      );
+                      toast.success('Invoice copied to clipboard!');
+                    }}
+                  >
+                    Copy
+                  </Button>
+                </div>
+              </div>
+              {paymentStatus === 'pending' && (
+                <p className='text-muted-foreground text-center text-sm'>
+                  Waiting for payment...
+                </p>
+              )}
+            </div>
+          ) : (
+            <div className='grid gap-4 py-4'>
+              <div className='grid gap-2'>
+                <Label htmlFor='topup_amount'>Amount (USD)</Label>
+                <Input
+                  id='topup_amount'
+                  type='number'
+                  placeholder='Enter amount (1-500)'
+                  value={topupAmount}
+                  onChange={(e) => {
+                    setTopupAmount(e.target.value);
+                    setTopupError('');
+                  }}
+                  min='1'
+                  max='500'
+                  step='0.01'
+                />
+                {topupError && (
+                  <p className='text-sm text-red-600 dark:text-red-400'>
+                    {topupError}
+                  </p>
+                )}
+              </div>
+            </div>
+          )}
+
+          <DialogFooter>
+            {paymentStatus === 'paid' ? (
+              <Button onClick={handleCloseDialog} className='w-full'>
+                Done
+              </Button>
+            ) : invoiceData ? (
+              <Button
+                variant='outline'
+                onClick={handleCloseDialog}
+                className='w-full'
+              >
+                Cancel
+              </Button>
+            ) : (
+              <>
+                <Button variant='outline' onClick={handleCloseDialog}>
+                  Cancel
+                </Button>
+                <Button
+                  onClick={handleTopup}
+                  disabled={topupMutation.isPending || !topupAmount}
+                >
+                  {topupMutation.isPending
+                    ? 'Processing...'
+                    : 'Generate Invoice'}
+                </Button>
+              </>
+            )}
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}
+
 export default function ProvidersPage() {
   const queryClient = useQueryClient();
   const [editingProvider, setEditingProvider] =
@@ -64,6 +337,7 @@ export default function ProvidersPage() {
     new Set()
   );
   const [viewingModels, setViewingModels] = useState<number | null>(null);
+  const [isCreatingAccount, setIsCreatingAccount] = useState(false);
 
   const [formData, setFormData] = useState<CreateUpstreamProvider>({
     provider_type: 'openrouter',
@@ -71,8 +345,13 @@ export default function ProvidersPage() {
     api_key: '',
     api_version: null,
     enabled: true,
+    provider_fee: 1.06,
   });
 
+  const getProviderFeePlaceholder = (type: string) => {
+    return type === 'openrouter' ? 'Default: 1.06 (6%)' : 'Default: 1.01 (1%)';
+  };
+
   const { data: providerTypes = [] } = useQuery({
     queryKey: ['provider-types'],
     queryFn: () => AdminService.getProviderTypes(),
@@ -138,6 +417,30 @@ export default function ProvidersPage() {
     },
   });
 
+  const handleCreateAccount = async () => {
+    setIsCreatingAccount(true);
+    try {
+      const response = await AdminService.createProviderAccountByType(
+        formData.provider_type
+      );
+      if (response.ok && response.account_data.api_key) {
+        setFormData({
+          ...formData,
+          api_key: String(response.account_data.api_key),
+        });
+        toast.success('Account created successfully! API key has been filled in.');
+      } else {
+        toast.success('Account created, but no API key returned.');
+      }
+    } catch (error: unknown) {
+      const errorMessage =
+        error instanceof Error ? error.message : 'Unknown error';
+      toast.error(`Failed to create account: ${errorMessage}`);
+    } finally {
+      setIsCreatingAccount(false);
+    }
+  };
+
   const resetForm = () => {
     setFormData({
       provider_type: 'openrouter',
@@ -149,7 +452,11 @@ export default function ProvidersPage() {
   };
 
   const handleCreate = () => {
-    createMutation.mutate(formData);
+    const data = { ...formData };
+    if (data.provider_fee === undefined || data.provider_fee === null) {
+      data.provider_fee = data.provider_type === 'openrouter' ? 1.06 : 1.01;
+    }
+    createMutation.mutate(data);
   };
 
   const handleEdit = (provider: UpstreamProvider) => {
@@ -160,6 +467,7 @@ export default function ProvidersPage() {
       api_key: '',
       api_version: provider.api_version || null,
       enabled: provider.enabled,
+      provider_fee: provider.provider_fee,
     });
     setIsEditDialogOpen(true);
   };
@@ -171,6 +479,7 @@ export default function ProvidersPage() {
       base_url: formData.base_url,
       api_version: formData.api_version,
       enabled: formData.enabled,
+      provider_fee: formData.provider_fee,
     };
     if (formData.api_key) {
       updateData.api_key = formData.api_key;
@@ -199,6 +508,16 @@ export default function ProvidersPage() {
     return providerType?.platform_url || null;
   };
 
+  const canCreateAccount = (type: string) => {
+    const providerType = providerTypes.find((pt) => pt.id === type);
+    return providerType?.can_create_account || false;
+  };
+
+  const canShowBalance = (type: string) => {
+    const providerType = providerTypes.find((pt) => pt.id === type);
+    return providerType?.can_show_balance || false;
+  };
+
   const toggleProviderExpansion = (providerId: number) => {
     const newExpanded = new Set(expandedProviders);
     if (newExpanded.has(providerId)) {
@@ -253,11 +572,12 @@ export default function ProvidersPage() {
                       <Select
                         value={formData.provider_type}
                         onValueChange={(value) => {
-                          setFormData({
-                            ...formData,
+                          setFormData((prev) => ({
+                            ...prev,
                             provider_type: value,
                             base_url: getDefaultBaseUrl(value),
-                          });
+                            provider_fee: value === 'openrouter' ? 1.06 : 1.01,
+                          }));
                         }}
                       >
                         <SelectTrigger>
@@ -292,15 +612,30 @@ export default function ProvidersPage() {
                     <div className='grid gap-2'>
                       <div className='flex items-center justify-between'>
                         <Label htmlFor='api_key'>API Key</Label>
-                        {getPlatformUrl(formData.provider_type) && (
-                          <a
-                            href={getPlatformUrl(formData.provider_type)!}
-                            target='_blank'
-                            rel='noopener noreferrer'
-                            className='text-xs text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300'
+                        {canCreateAccount(formData.provider_type) ? (
+                          <Button
+                            type='button'
+                            variant='outline'
+                            size='sm'
+                            onClick={handleCreateAccount}
+                            disabled={isCreatingAccount}
+                            className='h-6 text-xs'
                           >
-                            Get Your API Key Here →
-                          </a>
+                            {isCreatingAccount
+                              ? 'Creating...'
+                              : 'Create Account'}
+                          </Button>
+                        ) : (
+                          getPlatformUrl(formData.provider_type) && (
+                            <a
+                              href={getPlatformUrl(formData.provider_type)!}
+                              target='_blank'
+                              rel='noopener noreferrer'
+                              className='text-xs text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300'
+                            >
+                              Get Your API Key Here →
+                            </a>
+                          )
                         )}
                       </div>
                       <Input
@@ -339,6 +674,33 @@ export default function ProvidersPage() {
                       />
                       <Label htmlFor='enabled'>Enabled</Label>
                     </div>
+                    <div className='grid gap-2'>
+                      <Label htmlFor='provider_fee'>
+                        Provider Fee (Multiplier)
+                      </Label>
+                      <Input
+                        id='provider_fee'
+                        type='number'
+                        step='0.001'
+                        min='1.0'
+                        value={formData.provider_fee || ''}
+                        onChange={(e) =>
+                          setFormData({
+                            ...formData,
+                            provider_fee: e.target.value
+                              ? parseFloat(e.target.value)
+                              : undefined,
+                          })
+                        }
+                        placeholder={getProviderFeePlaceholder(
+                          formData.provider_type
+                        )}
+                      />
+                      <p className='text-muted-foreground text-xs'>
+                        1.01 means +1% e.g. currency exchange, card
+                        fees, etc.
+                      </p>
+                    </div>
                   </div>
                   <DialogFooter>
                     <Button
@@ -410,7 +772,11 @@ export default function ProvidersPage() {
                             {provider.base_url}
                           </CardDescription>
                         </div>
-                        <div className='grid grid-cols-3 gap-2 sm:flex sm:flex-nowrap'>
+                        <div className='flex flex-wrap items-center gap-2'>
+                          {canShowBalance(provider.provider_type) &&
+                            provider.api_key && (
+                              <ProviderBalance providerId={provider.id} />
+                            )}
                           <Button
                             variant='outline'
                             size='sm'
@@ -674,11 +1040,12 @@ export default function ProvidersPage() {
                 <Select
                   value={formData.provider_type}
                   onValueChange={(value) => {
-                    setFormData({
-                      ...formData,
+                    setFormData((prev) => ({
+                      ...prev,
                       provider_type: value,
                       base_url: getDefaultBaseUrl(value),
-                    });
+                      provider_fee: value === 'openrouter' ? 1.06 : 1.01,
+                    }));
                   }}
                 >
                   <SelectTrigger>
@@ -753,7 +1120,7 @@ export default function ProvidersPage() {
                 </div>
               )}
               <div className='flex items-center space-x-2'>
-                <Switch
+                      <Switch
                   id='edit_enabled'
                   checked={formData.enabled}
                   onCheckedChange={(checked) =>
@@ -762,6 +1129,33 @@ export default function ProvidersPage() {
                 />
                 <Label htmlFor='edit_enabled'>Enabled</Label>
               </div>
+              <div className='grid gap-2'>
+                <Label htmlFor='edit_provider_fee'>
+                  Provider Fee (Multiplier)
+                </Label>
+                <Input
+                  id='edit_provider_fee'
+                  type='number'
+                  step='0.001'
+                  min='1.0'
+                  value={formData.provider_fee || ''}
+                  onChange={(e) =>
+                    setFormData({
+                      ...formData,
+                      provider_fee: e.target.value
+                        ? parseFloat(e.target.value)
+                        : undefined,
+                    })
+                  }
+                  placeholder={getProviderFeePlaceholder(
+                    formData.provider_type
+                  )}
+                />
+                <p className='text-muted-foreground text-xs'>
+                  1.01 means +1% e.g. currency exchange, card
+                  fees, etc.
+                </p>
+              </div>
             </div>
             <DialogFooter>
               <Button

ui/components/app-sidebar.tsx

@@ -2,10 +2,12 @@
 
 import * as React from 'react';
 import {
+  FileTextIcon,
   DatabaseIcon,
   LayoutDashboardIcon,
   ServerIcon,
   SettingsIcon,
+  WalletIcon,
 } from 'lucide-react';
 import Image from 'next/image';
 
@@ -34,6 +36,16 @@ const data = {
       url: '/',
       icon: LayoutDashboardIcon,
     },
+    {
+      title: 'Balances',
+      url: '/balances',
+      icon: WalletIcon,
+    },
+    {
+      title: 'Logs',
+      url: '/logs',
+      icon: FileTextIcon,
+    },
     {
       title: 'Models',
       url: '/model',
@@ -49,26 +61,6 @@ const data = {
       url: '/settings',
       icon: SettingsIcon,
     },
-    // {
-    //   title: 'Transactions',
-    //   url: '/transactions',
-    //   icon: ReceiptIcon,
-    // },
-    // {
-    //   title: 'Credit',
-    //   url: '/credits',
-    //   icon: FolderIcon,
-    // },
-    // {
-    //   title: 'Users',
-    //   url: '/users',
-    //   icon: UsersIcon,
-    // },
-    // {
-    //   title: 'Organizations',
-    //   url: '/organizations',
-    //   icon: FolderIcon,
-    // },
   ],
   documents: [],
 };

ui/components/currency-toggle.tsx

@@ -0,0 +1,74 @@
+'use client';
+
+import { useCurrencyStore } from '@/lib/stores/currency';
+import { useQuery } from '@tanstack/react-query';
+import { fetchBtcUsdPrice, btcToSatsRate } from '@/lib/exchange-rate';
+import { useEffect } from 'react';
+import type { DisplayUnit } from '@/lib/types/units';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { Button } from '@/components/ui/button';
+import { Coins } from 'lucide-react';
+
+export function CurrencyToggle() {
+  const { displayUnit, setDisplayUnit } = useCurrencyStore();
+
+  const { data: btcUsdPrice } = useQuery({
+    queryKey: ['btc-usd-price'],
+    queryFn: fetchBtcUsdPrice,
+    refetchInterval: 120_000,
+    staleTime: 60_000,
+  });
+
+  const usdPerSat = btcUsdPrice ? btcToSatsRate(btcUsdPrice) : null;
+
+  useEffect(() => {
+    if (displayUnit === 'usd' && usdPerSat === null) {
+      setDisplayUnit('sat');
+    }
+  }, [displayUnit, usdPerSat, setDisplayUnit]);
+
+  const getLabel = (unit: DisplayUnit) => {
+    switch (unit) {
+      case 'msat':
+        return 'mSAT';
+      case 'sat':
+        return 'sat';
+      case 'usd':
+        return 'USD';
+      default:
+        return unit;
+    }
+  };
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" size="sm" className="h-9 w-9 px-0 gap-2 w-auto px-3 font-normal">
+          <Coins className="h-4 w-4" />
+          <span className="hidden sm:inline-block">{getLabel(displayUnit)}</span>
+          <span className="sm:hidden uppercase">{displayUnit}</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={() => setDisplayUnit('msat')}>
+          Millisatoshis (mSAT)
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setDisplayUnit('sat')}>
+          Satoshis (sat)
+        </DropdownMenuItem>
+        <DropdownMenuItem 
+          onClick={() => setDisplayUnit('usd')}
+          disabled={!usdPerSat}
+        >
+          US Dollar (USD)
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+

ui/components/dashboard-balance-summary.tsx

@@ -0,0 +1,99 @@
+'use client';
+
+import { useQuery } from '@tanstack/react-query';
+import { WalletService, BalanceDetail } from '@/lib/api/services/wallet';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { convertToMsat, formatFromMsat } from '@/lib/currency';
+import { Wallet, User, Coins } from 'lucide-react';
+import type { DisplayUnit } from '@/lib/types/units';
+
+interface DashboardBalanceSummaryProps {
+  displayUnit?: DisplayUnit;
+  usdPerSat?: number | null;
+}
+
+export function DashboardBalanceSummary({
+  displayUnit = 'sat',
+  usdPerSat = null,
+}: DashboardBalanceSummaryProps) {
+  const { data } = useQuery({
+    queryKey: ['detailed-wallet-balance'],
+    queryFn: async () => {
+      return WalletService.getDetailedBalances();
+    },
+    refetchInterval: 30000,
+  });
+
+  const calculateTotals = (balances: BalanceDetail[]) => {
+    let totalWallet = 0;
+    let totalUser = 0;
+    let totalOwner = 0;
+
+    balances.forEach((detail) => {
+      if (!detail.error) {
+        const walletMsat = convertToMsat(
+          detail.wallet_balance || 0,
+          detail.unit
+        );
+        const userMsat = convertToMsat(detail.user_balance || 0, detail.unit);
+        const ownerMsat = convertToMsat(detail.owner_balance || 0, detail.unit);
+
+        totalWallet += walletMsat;
+        totalUser += userMsat;
+        totalOwner += ownerMsat;
+      }
+    });
+
+    return { totalWallet, totalUser, totalOwner };
+  };
+
+  const totals = data
+    ? calculateTotals(data)
+    : { totalWallet: 0, totalUser: 0, totalOwner: 0 };
+
+  const formatAmount = (msatAmount: number): string =>
+    formatFromMsat(msatAmount, displayUnit, usdPerSat);
+
+  const cards = [
+    {
+      title: 'Your Balance',
+      value: formatAmount(totals.totalOwner),
+      icon: Coins,
+      color: 'text-green-600',
+      bgColor: 'bg-green-100 dark:bg-green-900/20',
+    },
+    {
+      title: 'Total Wallet',
+      value: formatAmount(totals.totalWallet),
+      icon: Wallet,
+      color: 'text-blue-600',
+      bgColor: 'bg-blue-100 dark:bg-blue-900/20',
+    },
+    {
+      title: 'User Balance',
+      value: formatAmount(totals.totalUser),
+      icon: User,
+      color: 'text-purple-600',
+      bgColor: 'bg-purple-100 dark:bg-purple-900/20',
+    },
+  ];
+
+  return (
+    <div className='grid gap-4 md:grid-cols-3'>
+      {cards.map((card) => (
+        <Card key={card.title}>
+          <CardHeader className='flex flex-row items-center justify-between space-y-0 pb-2'>
+            <CardTitle className='text-sm font-medium'>{card.title}</CardTitle>
+            <div className={`rounded-full p-2 ${card.bgColor}`}>
+              <card.icon className={`h-4 w-4 ${card.color}`} />
+            </div>
+          </CardHeader>
+          <CardContent>
+            <div className='text-2xl font-bold'>{card.value}</div>
+          </CardContent>
+        </Card>
+      ))}
+    </div>
+  );
+}
+

ui/components/error-details-table.tsx

@@ -0,0 +1,78 @@
+'use client';
+
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { Badge } from '@/components/ui/badge';
+import { ErrorDetail } from '@/lib/api/services/admin';
+
+interface ErrorDetailsTableProps {
+  errors: ErrorDetail[];
+}
+
+export function ErrorDetailsTable({ errors }: ErrorDetailsTableProps) {
+  if (errors.length === 0) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle>Recent Errors</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <p className='text-muted-foreground text-center py-8'>
+            No errors found in the selected time period
+          </p>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Recent Errors ({errors.length})</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className='max-h-[400px] overflow-y-auto'>
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>Timestamp</TableHead>
+                <TableHead>Type</TableHead>
+                <TableHead>Message</TableHead>
+                <TableHead>Location</TableHead>
+                <TableHead>Request ID</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {errors.map((error, index) => (
+                <TableRow key={index}>
+                  <TableCell className='font-mono text-xs'>
+                    {new Date(error.timestamp).toLocaleString()}
+                  </TableCell>
+                  <TableCell>
+                    <Badge variant='destructive'>{error.error_type}</Badge>
+                  </TableCell>
+                  <TableCell className='max-w-md truncate'>
+                    {error.message}
+                  </TableCell>
+                  <TableCell className='font-mono text-xs'>
+                    {error.pathname}:{error.lineno}
+                  </TableCell>
+                  <TableCell className='font-mono text-xs'>
+                    {error.request_id || '-'}
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

ui/components/landing/cheat-sheet.tsx

@@ -0,0 +1,746 @@
+'use client';
+
+import { type JSX, useCallback, useEffect, useMemo, useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import {
+  Bolt,
+  Copy,
+  KeyRound,
+  RefreshCcw,
+  ShieldCheck,
+  Terminal,
+} from 'lucide-react';
+import { toast } from 'sonner';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Textarea } from '@/components/ui/textarea';
+import { Input } from '@/components/ui/input';
+import { Badge } from '@/components/ui/badge';
+import { Separator } from '@/components/ui/separator';
+import { ConfigurationService } from '@/lib/api/services/configuration';
+
+type NodeInfo = {
+  name: string;
+  description: string;
+  version: string;
+  npub?: string | null;
+  mints: string[];
+  http_url?: string | null;
+  onion_url?: string | null;
+};
+
+type WalletSnapshot = {
+  apiKey: string;
+  balanceMsats: number;
+  reservedMsats: number;
+};
+
+type RefundReceipt = {
+  token?: string;
+  recipient?: string;
+  sats?: string;
+  msats?: string;
+};
+
+const DEFAULT_BASE_URL = 'http://127.0.0.1:8000';
+
+async function fetchNodeInfo(baseUrl: string): Promise<NodeInfo> {
+  const response = await fetch(`${baseUrl}/v1/info`, {
+    cache: 'no-store',
+    headers: { 'Content-Type': 'application/json' },
+  });
+
+  if (!response.ok) {
+    const errorText = await response.text();
+    throw new Error(errorText || 'Unable to load node info');
+  }
+
+  const payload = (await response.json()) as NodeInfo;
+  return {
+    ...payload,
+    mints: Array.isArray(payload.mints) ? payload.mints : [],
+  };
+}
+
+async function fetchWalletInfo(
+  baseUrl: string,
+  apiKey: string
+): Promise<WalletSnapshot> {
+  const response = await fetch(`${baseUrl}/v1/balance/info`, {
+    cache: 'no-store',
+    headers: {
+      'Content-Type': 'application/json',
+      Authorization: `Bearer ${apiKey}`,
+    },
+  });
+
+  if (!response.ok) {
+    const errorText = await response.text();
+    throw new Error(errorText || 'Unable to load wallet info');
+  }
+
+  const payload = (await response.json()) as {
+    api_key: string;
+    balance: number;
+    reserved?: number;
+  };
+
+  return {
+    apiKey: payload.api_key || apiKey,
+    balanceMsats: payload.balance ?? 0,
+    reservedMsats: payload.reserved ?? 0,
+  };
+}
+
+function normalizeBaseUrl(url: string): string {
+  const trimmed = url.trim();
+  if (!trimmed) {
+    return '';
+  }
+  return trimmed.replace(/\/+$/, '');
+}
+
+function formatMsats(msats: number): string {
+  return new Intl.NumberFormat('en-US').format(msats);
+}
+
+function formatSats(msats: number): string {
+  return new Intl.NumberFormat('en-US').format(Math.floor(msats / 1000));
+}
+
+export function CheatSheet(): JSX.Element {
+  const [baseUrl, setBaseUrl] = useState(() =>
+    typeof window === 'undefined' ? '' : ConfigurationService.getLocalBaseUrl()
+  );
+  const [initialToken, setInitialToken] = useState('');
+  const [topupToken, setTopupToken] = useState('');
+  const [apiKeyInput, setApiKeyInput] = useState('');
+  const [walletInfo, setWalletInfo] = useState<WalletSnapshot | null>(null);
+  const [refundReceipt, setRefundReceipt] = useState<RefundReceipt | null>(null);
+  const [isCreatingKey, setIsCreatingKey] = useState(false);
+  const [isTopupLoading, setIsTopupLoading] = useState(false);
+  const [isRefunding, setIsRefunding] = useState(false);
+  const [isSyncingBalance, setIsSyncingBalance] = useState(false);
+  const [hasInteractedCreate, setHasInteractedCreate] = useState(false);
+  const [hasInteractedManage, setHasInteractedManage] = useState(false);
+  const [hasInteractedTopup, setHasInteractedTopup] = useState(false);
+
+  useEffect(() => {
+    if (!baseUrl && typeof window !== 'undefined') {
+      setBaseUrl(ConfigurationService.getLocalBaseUrl());
+    }
+  }, [baseUrl]);
+
+  const normalizedBaseUrl = useMemo(
+    () => normalizeBaseUrl(baseUrl) || DEFAULT_BASE_URL,
+    [baseUrl]
+  );
+
+  const activeApiKey = apiKeyInput.trim();
+
+  const {
+    data: nodeInfo,
+    isLoading: isInfoLoading,
+    isError: isInfoError,
+    refetch: refetchNodeInfo,
+  } = useQuery({
+    queryKey: ['node-info', normalizedBaseUrl],
+    queryFn: () => fetchNodeInfo(normalizedBaseUrl),
+    enabled: Boolean(normalizedBaseUrl),
+    refetchInterval: 300_000,
+    staleTime: 120_000,
+  });
+
+  const handleCopy = useCallback(async (value: string): Promise<void> => {
+    if (!value) {
+      return;
+    }
+    if (typeof navigator === 'undefined' || !navigator.clipboard) {
+      toast.error('Clipboard API unavailable');
+      return;
+    }
+    try {
+      await navigator.clipboard.writeText(value);
+      toast.success('Copied to clipboard');
+    } catch (error) {
+      console.error(error);
+      toast.error('Unable to copy');
+    }
+  }, []);
+
+  const handleCreateKey = useCallback(async (): Promise<void> => {
+    if (!initialToken.trim()) {
+      toast.error('Cashu token required');
+      return;
+    }
+
+    setIsCreatingKey(true);
+    setRefundReceipt(null);
+
+    try {
+      const params = new URLSearchParams({
+        initial_balance_token: initialToken.trim(),
+      });
+      const response = await fetch(
+        `${normalizedBaseUrl}/v1/balance/create?${params.toString()}`,
+        {
+          method: 'GET',
+          headers: { 'Content-Type': 'application/json' },
+        }
+      );
+      if (!response.ok) {
+        const errorText = await response.text();
+        throw new Error(errorText || 'Failed to create API key');
+      }
+      const payload = (await response.json()) as {
+        api_key: string;
+        balance: number;
+      };
+      const snapshot: WalletSnapshot = {
+        apiKey: payload.api_key,
+        balanceMsats: payload.balance ?? 0,
+        reservedMsats: 0,
+      };
+      setApiKeyInput(snapshot.apiKey);
+      setWalletInfo(snapshot);
+      setInitialToken('');
+      toast.success('API key ready');
+    } catch (error) {
+      console.error(error);
+      toast.error(
+        error instanceof Error ? error.message : 'Failed to create API key'
+      );
+    } finally {
+      setIsCreatingKey(false);
+    }
+  }, [initialToken, normalizedBaseUrl]);
+
+  const handleSyncBalance = useCallback(async (): Promise<void> => {
+    if (!activeApiKey) {
+      toast.error('Paste an API key first');
+      return;
+    }
+
+    setIsSyncingBalance(true);
+    try {
+      const snapshot = await fetchWalletInfo(normalizedBaseUrl, activeApiKey);
+      setWalletInfo(snapshot);
+      toast.success('Balance synced');
+    } catch (error) {
+      console.error(error);
+      toast.error(
+        error instanceof Error ? error.message : 'Failed to sync balance'
+      );
+    } finally {
+      setIsSyncingBalance(false);
+    }
+  }, [activeApiKey, normalizedBaseUrl]);
+
+  const handleTopup = useCallback(async (): Promise<void> => {
+    if (!activeApiKey) {
+      toast.error('Paste an API key first');
+      return;
+    }
+    if (!topupToken.trim()) {
+      toast.error('Cashu token required for top-up');
+      return;
+    }
+
+    setIsTopupLoading(true);
+    setRefundReceipt(null);
+    try {
+      const response = await fetch(`${normalizedBaseUrl}/v1/balance/topup`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${activeApiKey}`,
+        },
+        body: JSON.stringify({ cashu_token: topupToken.trim() }),
+      });
+      if (!response.ok) {
+        const errorText = await response.text();
+        throw new Error(errorText || 'Failed to top up');
+      }
+      const payload = (await response.json()) as { msats: number };
+      toast.success(`Added ${formatSats(payload.msats)} sats`);
+      setTopupToken('');
+      const snapshot = await fetchWalletInfo(normalizedBaseUrl, activeApiKey);
+      setWalletInfo(snapshot);
+    } catch (error) {
+      console.error(error);
+      toast.error(error instanceof Error ? error.message : 'Top-up failed');
+    } finally {
+      setIsTopupLoading(false);
+    }
+  }, [activeApiKey, normalizedBaseUrl, topupToken]);
+
+  const handleRefund = useCallback(async (): Promise<void> => {
+    if (!activeApiKey) {
+      toast.error('Paste an API key first');
+      return;
+    }
+
+    setIsRefunding(true);
+    try {
+      const response = await fetch(`${normalizedBaseUrl}/v1/balance/refund`, {
+        method: 'POST',
+        headers: {
+          Authorization: `Bearer ${activeApiKey}`,
+        },
+      });
+      if (!response.ok) {
+        const errorText = await response.text();
+        throw new Error(errorText || 'Refund failed');
+      }
+      const payload = (await response.json()) as RefundReceipt;
+      setRefundReceipt(payload);
+      setWalletInfo(null);
+      toast.success('Refund requested');
+    } catch (error) {
+      console.error(error);
+      toast.error(error instanceof Error ? error.message : 'Refund failed');
+    } finally {
+      setIsRefunding(false);
+    }
+  }, [activeApiKey, normalizedBaseUrl]);
+
+  const handleRefreshInfo = useCallback(async (): Promise<void> => {
+    const result = await refetchNodeInfo();
+    if (result.error) {
+      toast.error('Unable to refresh node info');
+    } else {
+      toast.success('Node info refreshed');
+    }
+  }, [refetchNodeInfo]);
+
+  const curlSnippet = useMemo(() => {
+    const keyPreview = activeApiKey || 'YOUR_API_KEY';
+    return [
+      `curl -X POST "${normalizedBaseUrl}/v1/chat/completions"`,
+      `  -H "Authorization: Bearer ${keyPreview}"`,
+      '  -H "Content-Type: application/json"',
+      "  -d '{",
+      '    "model": "openai/gpt-4o-mini",',
+      '    "messages": [',
+      '      {"role":"system","content":"You are Routstr."},',
+      '      {"role":"user","content":"Ping the node"}',
+      '    ]',
+      "  }'",
+    ].join('\n');
+  }, [activeApiKey, normalizedBaseUrl]);
+
+  const showCreateDetails =
+    hasInteractedCreate || initialToken.trim().length > 0;
+  const showManageDetails = hasInteractedManage || Boolean(walletInfo);
+  const showTopupDetails =
+    hasInteractedTopup || topupToken.trim().length > 0;
+  const refundToken = refundReceipt?.token ?? null;
+  const canTopup = Boolean(activeApiKey);
+
+  return (
+    <div className='min-h-screen bg-gradient-to-b from-background via-background to-muted'>
+      <main className='mx-auto flex w-full max-w-6xl flex-col gap-8 px-4 py-10 sm:px-6 lg:px-8'>
+        <section className='relative space-y-3 text-center md:text-left'>
+          <div className='absolute right-0 top-0 hidden md:block'>
+            <Button asChild size='sm' className='px-3 text-xs'>
+              <a href='/login'>Admin</a>
+            </Button>
+          </div>
+          <div className='inline-flex items-center gap-2 rounded-full border px-3 py-1 text-[0.65rem] uppercase tracking-wider text-muted-foreground'>
+            <Bolt className='h-4 w-4 text-primary' />
+            Routstr cheat sheet
+          </div>
+          <h1 className='text-3xl font-semibold tracking-tight sm:text-4xl'>
+            Node Identity and Cheat Sheet
+          </h1>
+          <div className='md:hidden'>
+            <Button asChild size='sm' className='w-full sm:w-auto'>
+              <a href='/login'>Admin</a>
+            </Button>
+          </div>
+        </section>
+
+        <section className='grid gap-4 lg:grid-cols-2'>
+          <Card>
+            <CardHeader className='flex flex-row items-start justify-between gap-4'>
+              <div>
+                <CardTitle className='flex items-center gap-2 text-lg'>
+                  <ShieldCheck className='h-4 w-4 text-primary' />
+                  Node identity
+                </CardTitle>
+                <p className='text-xs uppercase tracking-wide text-muted-foreground'>
+                  /v1/info snapshot
+                </p>
+              </div>
+              <Button
+                variant='ghost'
+                size='sm'
+                className='gap-1 text-xs'
+                onClick={handleRefreshInfo}
+                disabled={isInfoLoading}
+              >
+                <RefreshCcw className='h-4 w-4' />
+                Refresh
+              </Button>
+            </CardHeader>
+            <CardContent className='space-y-4'>
+              {isInfoLoading && (
+                <p className='text-muted-foreground text-sm'>
+                  Loading node profile…
+                </p>
+              )}
+              {isInfoError && !isInfoLoading && (
+                <p className='text-destructive text-sm'>
+                  Unable to reach /v1/info at {normalizedBaseUrl}
+                </p>
+              )}
+              {nodeInfo && (
+                <>
+                  <div className='space-y-2'>
+                    <p className='text-2xl font-medium'>{nodeInfo.name}</p>
+                    <p className='text-muted-foreground text-sm'>
+                      {nodeInfo.description}
+                    </p>
+                  </div>
+                  <dl className='grid gap-4 sm:grid-cols-2'>
+                    <div>
+                      <dt className='text-muted-foreground text-xs uppercase tracking-wide'>
+                        Version
+                      </dt>
+                      <dd className='text-base font-medium'>
+                        {nodeInfo.version}
+                      </dd>
+                    </div>
+                    <div>
+                      <dt className='text-muted-foreground text-xs uppercase tracking-wide'>
+                        HTTP
+                      </dt>
+                      <dd className='text-base font-medium break-all'>
+                        {nodeInfo.http_url || normalizedBaseUrl}
+                      </dd>
+                    </div>
+                    {nodeInfo.onion_url && (
+                      <div className='sm:col-span-2'>
+                        <dt className='text-muted-foreground text-xs uppercase tracking-wide'>
+                          Onion
+                        </dt>
+                        <dd className='text-base font-medium break-all'>
+                          {nodeInfo.onion_url}
+                        </dd>
+                      </div>
+                    )}
+                    {nodeInfo.npub && (
+                      <div className='sm:col-span-2'>
+                        <dt className='text-muted-foreground text-xs uppercase tracking-wide'>
+                          npub
+                        </dt>
+                        <dd className='flex items-center gap-2 break-all text-sm font-mono'>
+                          {nodeInfo.npub}
+                          <Button
+                            variant='ghost'
+                            size='icon'
+                            className='h-8 w-8'
+                            onClick={() => handleCopy(nodeInfo.npub ?? '')}
+                          >
+                            <Copy className='h-4 w-4' />
+                          </Button>
+                        </dd>
+                      </div>
+                    )}
+                  </dl>
+                  <div className='space-y-2'>
+                    <p className='text-xs uppercase tracking-wide text-muted-foreground'>
+                      Cashu mints
+                    </p>
+                    <div className='flex flex-wrap gap-2'>
+                      {nodeInfo.mints.length ? (
+                        nodeInfo.mints.map((mint) => (
+                          <Badge
+                            key={mint}
+                            variant='secondary'
+                            className='font-mono text-xs'
+                          >
+                            {mint}
+                          </Badge>
+                        ))
+                      ) : (
+                        <p className='text-muted-foreground text-sm'>
+                          No mint list published
+                        </p>
+                      )}
+                    </div>
+                  </div>
+                </>
+              )}
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader className='flex flex-row items-center justify-between'>
+              <CardTitle className='flex items-center gap-2 text-lg'>
+                <Terminal className='h-4 w-4 text-primary' />
+                Quick docs
+              </CardTitle>
+              <span className='text-xs uppercase tracking-wide text-muted-foreground'>
+                curl-ready
+              </span>
+            </CardHeader>
+            <CardContent className='space-y-4'>
+              <div className='flex items-center gap-2'>
+                <Input
+                  value={baseUrl}
+                  placeholder={normalizedBaseUrl}
+                  onChange={(event) => setBaseUrl(event.target.value)}
+                  className='text-sm'
+                />
+                <Button
+                  variant='outline'
+                  size='icon'
+                  className='h-9 w-9'
+                  onClick={() => handleCopy(normalizedBaseUrl)}
+                >
+                  <Copy className='h-4 w-4' />
+                </Button>
+              </div>
+              <div className='rounded-lg bg-muted p-4 font-mono text-sm leading-6'>
+                <pre className='whitespace-pre-wrap break-all'>{curlSnippet}</pre>
+              </div>
+              <div className='flex gap-2'>
+                <Button
+                  variant='secondary'
+                  className='gap-2'
+                  onClick={() => handleCopy(curlSnippet)}
+                >
+                  <Copy className='h-4 w-4' />
+                  Copy curl
+                </Button>
+                <Button variant='outline' asChild className='gap-2'>
+                  <a
+                    href='https://docs.routstr.com'
+                    target='_blank'
+                    rel='noreferrer'
+                  >
+                    <Terminal className='h-4 w-4' />
+                    Full docs
+                  </a>
+                </Button>
+              </div>
+            </CardContent>
+          </Card>
+        </section>
+
+        <Card>
+          <CardHeader className='space-y-1'>
+            <CardTitle className='flex items-center gap-2 text-xl'>
+              <KeyRound className='h-5 w-5 text-primary' />
+              API key workflow
+            </CardTitle>
+            <p className='text-xs uppercase tracking-wide text-muted-foreground'>
+              Sections expand as soon as you interact
+            </p>
+          </CardHeader>
+          <CardContent className='space-y-6'>
+            <section className='space-y-2'>
+              <header className='flex items-center justify-between text-[0.7rem] uppercase tracking-wider text-muted-foreground'>
+                <span>1 · Create key</span>
+                {showCreateDetails && (
+                  <span className='text-primary'>Cashu token detected</span>
+                )}
+              </header>
+              <Textarea
+                value={initialToken}
+                onChange={(event) => setInitialToken(event.target.value)}
+                placeholder='cashuA1...'
+                rows={showCreateDetails ? 4 : 2}
+                className='font-mono text-sm transition-all duration-200'
+                onFocus={() => setHasInteractedCreate(true)}
+              />
+              {showCreateDetails && (
+                <div className='flex flex-wrap gap-2'>
+                  <Button
+                    onClick={handleCreateKey}
+                    disabled={isCreatingKey}
+                    className='gap-2'
+                  >
+                    {isCreatingKey ? 'Creating…' : 'Create API key'}
+                  </Button>
+                  <span className='text-xs text-muted-foreground'>
+                    Redeems instantly and returns <code>sk-</code> key.
+                  </span>
+                </div>
+              )}
+            </section>
+
+            <Separator />
+
+            <section className='space-y-2'>
+              <header className='flex items-center justify-between text-[0.7rem] uppercase tracking-wider text-muted-foreground'>
+                <span>2 · Manage key</span>
+                {walletInfo && (
+                  <span className='text-primary'>
+                    {formatSats(walletInfo.balanceMsats)} sats
+                  </span>
+                )}
+              </header>
+              <div className='flex flex-col gap-2 sm:flex-row'>
+                <Input
+                  value={apiKeyInput}
+                  onChange={(event) => {
+                    setApiKeyInput(event.target.value);
+                    setWalletInfo(null);
+                  }}
+                  placeholder='sk-...'
+                  className='font-mono text-sm'
+                  onFocus={() => setHasInteractedManage(true)}
+                />
+                <div className='flex gap-2'>
+                  <Button
+                    variant='outline'
+                    size='icon'
+                    className='h-10 w-10'
+                    onClick={() => handleCopy(activeApiKey)}
+                    disabled={!activeApiKey}
+                  >
+                    <Copy className='h-4 w-4' />
+                  </Button>
+                  <Button
+                    variant='secondary'
+                    size='sm'
+                    className='gap-1'
+                    onClick={handleSyncBalance}
+                    disabled={isSyncingBalance || !activeApiKey}
+                  >
+                    <RefreshCcw className='h-4 w-4' />
+                    Sync
+                  </Button>
+                </div>
+              </div>
+              {showManageDetails && (
+                <div className='grid gap-3 sm:grid-cols-2'>
+                  <div className='rounded-lg border p-3'>
+                    <p className='text-[0.65rem] uppercase tracking-wide text-muted-foreground'>
+                      Spendable
+                    </p>
+                    <p className='text-xl font-semibold'>
+                      {walletInfo
+                        ? `${formatSats(walletInfo.balanceMsats)} sats`
+                        : '—'}
+                    </p>
+                    {walletInfo && (
+                      <p className='text-muted-foreground text-xs'>
+                        {formatMsats(walletInfo.balanceMsats)} msats
+                      </p>
+                    )}
+                  </div>
+                  <div className='rounded-lg border p-3'>
+                    <p className='text-[0.65rem] uppercase tracking-wide text-muted-foreground'>
+                      Reserved
+                    </p>
+                    <p className='text-xl font-semibold'>
+                      {walletInfo
+                        ? `${formatSats(walletInfo.reservedMsats)} sats`
+                        : '—'}
+                    </p>
+                    {walletInfo && (
+                      <p className='text-muted-foreground text-xs'>
+                        {formatMsats(walletInfo.reservedMsats)} msats
+                      </p>
+                    )}
+                  </div>
+                </div>
+              )}
+            </section>
+
+            <Separator />
+
+            <section className='space-y-2'>
+              <header className='flex items-center justify-between text-[0.7rem] uppercase tracking-wider text-muted-foreground'>
+                <span>3 · Top up</span>
+                {showTopupDetails && (
+                  <span className={canTopup ? 'text-primary' : 'text-destructive'}>
+                    {canTopup ? 'Ready to redeem' : 'Paste API key first'}
+                  </span>
+                )}
+              </header>
+              <Textarea
+                value={topupToken}
+                onChange={(event) => setTopupToken(event.target.value)}
+                placeholder='cashuB1...'
+                rows={showTopupDetails ? 3 : 1}
+                className='font-mono text-sm transition-all duration-200'
+                onFocus={() => setHasInteractedTopup(true)}
+                disabled={!canTopup}
+              />
+              {showTopupDetails && (
+                <div className='flex flex-wrap gap-2'>
+                  <Button
+                    onClick={handleTopup}
+                    disabled={isTopupLoading || !canTopup}
+                    variant='outline'
+                    className='gap-2'
+                  >
+                    {isTopupLoading ? 'Topping up…' : 'Top up this key'}
+                  </Button>
+                  <span className='text-xs text-muted-foreground'>
+                    {canTopup
+                      ? (
+                          <>
+                            Adds balance to the same <code>sk-</code> token.
+                          </>
+                        )
+                      : 'Enter your sk- key above to unlock top ups.'}
+                  </span>
+                </div>
+              )}
+            </section>
+
+            <Separator />
+
+            <section className='space-y-2'>
+              <header className='flex items-center justify-between text-[0.7rem] uppercase tracking-wider text-muted-foreground'>
+                <span>4 · Refund</span>
+                {refundReceipt && <span className='text-primary'>Done</span>}
+              </header>
+              <div className='flex flex-wrap gap-2'>
+                <Button
+                  onClick={handleRefund}
+                  disabled={isRefunding}
+                  variant='destructive'
+                  className='gap-2'
+                >
+                  {isRefunding ? 'Processing…' : 'Refund remaining balance'}
+                </Button>
+                <span className='text-xs text-muted-foreground'>
+                  Burns the key and returns a fresh Cashu token.
+                </span>
+              </div>
+              {refundToken && (
+                <div className='space-y-2 rounded-lg border bg-muted/30 p-4'>
+                  <div className='flex items-center justify-between text-[0.7rem] uppercase tracking-wider text-muted-foreground'>
+                    <span>Cashu refund token</span>
+                    <Button
+                      variant='outline'
+                      size='sm'
+                      className='gap-1 text-xs'
+                      onClick={() => handleCopy(refundToken)}
+                    >
+                      <Copy className='h-3 w-3' />
+                      Copy
+                    </Button>
+                  </div>
+                  <Textarea
+                    value={refundToken}
+                    readOnly
+                    rows={4}
+                    className='font-mono text-xs'
+                  />
+                </div>
+              )}
+            </section>
+          </CardContent>
+        </Card>
+      </main>
+    </div>
+  );
+}
+

ui/components/revenue-by-model-table.tsx

@@ -0,0 +1,106 @@
+'use client';
+
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Progress } from '@/components/ui/progress';
+import { ModelRevenueData } from '@/lib/api/services/admin';
+import { useCurrencyStore } from '@/lib/stores/currency';
+import { useQuery } from '@tanstack/react-query';
+import { fetchBtcUsdPrice, btcToSatsRate } from '@/lib/exchange-rate';
+import { formatFromMsat, convertToMsat } from '@/lib/currency';
+
+interface RevenueByModelTableProps {
+  models: ModelRevenueData[];
+  totalRevenue: number;
+}
+
+export function RevenueByModelTable({
+  models,
+  totalRevenue,
+}: RevenueByModelTableProps) {
+  const { displayUnit } = useCurrencyStore();
+  const { data: btcUsdPrice } = useQuery({
+    queryKey: ['btc-usd-price'],
+    queryFn: fetchBtcUsdPrice,
+    refetchInterval: 120_000,
+    staleTime: 60_000,
+  });
+  const usdPerSat = btcUsdPrice ? btcToSatsRate(btcUsdPrice) : null;
+
+  const formatAmount = (sats: number) =>
+    formatFromMsat(convertToMsat(sats, 'sat'), displayUnit, usdPerSat);
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Revenue by Model</CardTitle>
+        <p className="text-sm text-muted-foreground">
+          Total Revenue: <span className="font-mono font-medium text-foreground">{formatAmount(totalRevenue)}</span>
+        </p>
+      </CardHeader>
+      <CardContent>
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Model</TableHead>
+              <TableHead className="text-right">Requests</TableHead>
+              <TableHead className="text-right">Successful</TableHead>
+              <TableHead className="text-right">Failed</TableHead>
+              <TableHead className="text-right">Revenue</TableHead>
+              <TableHead className="w-[100px]">Share</TableHead>
+              <TableHead className="text-right">Refunds</TableHead>
+              <TableHead className="text-right">Net Revenue</TableHead>
+              <TableHead className="text-right">Avg/Request</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {models.length === 0 ? (
+              <TableRow>
+                <TableCell colSpan={9} className="text-center text-muted-foreground">
+                  No model data available
+                </TableCell>
+              </TableRow>
+            ) : (
+              models.map((model) => {
+                const share = totalRevenue > 0 ? (model.revenue_sats / totalRevenue) * 100 : 0;
+                return (
+                  <TableRow key={model.model}>
+                    <TableCell className="font-medium">{model.model}</TableCell>
+                    <TableCell className="text-right font-mono">{model.requests}</TableCell>
+                    <TableCell className="text-right text-green-600 font-mono">{model.successful}</TableCell>
+                    <TableCell className="text-right text-red-600 font-mono">{model.failed}</TableCell>
+                    <TableCell className="text-right font-mono">
+                      {formatAmount(model.revenue_sats)}
+                    </TableCell>
+                    <TableCell>
+                      <div className="flex items-center gap-2">
+                        <Progress value={share} className="h-2" />
+                        <span className="text-xs text-muted-foreground w-8 text-right">{share.toFixed(0)}%</span>
+                      </div>
+                    </TableCell>
+                    <TableCell className="text-right text-red-500 font-mono">
+                      {formatAmount(model.refunds_sats)}
+                    </TableCell>
+                    <TableCell className="text-right font-semibold font-mono">
+                      {formatAmount(model.net_revenue_sats)}
+                    </TableCell>
+                    <TableCell className="text-right text-muted-foreground font-mono">
+                      {formatAmount(model.avg_revenue_per_request)}
+                    </TableCell>
+                  </TableRow>
+                );
+              })
+            )}
+          </TableBody>
+        </Table>
+      </CardContent>
+    </Card>
+  );
+}

ui/components/settings/admin-settings.tsx

@@ -18,6 +18,7 @@ import { Textarea } from '@/components/ui/textarea';
 import { Alert, AlertDescription } from '@/components/ui/alert';
 import { AlertCircle, Save, RefreshCw, Eye, EyeOff } from 'lucide-react';
 import { toast } from 'sonner';
+import { Switch } from '@/components/ui/switch';
 
 interface SettingsData {
   name?: string;
@@ -28,9 +29,32 @@ interface SettingsData {
   http_url?: string;
   onion_url?: string;
   cashu_mints?: string[];
+  relays?: string[];
   [key: string]: unknown;
 }
 
+const HANDLED_KEYS = [
+  'name',
+  'description',
+  'http_url',
+  'onion_url',
+  'npub',
+  'nsec',
+  'cashu_mints',
+  'relays',
+  'admin_password',
+  'id',
+  'updated_at',
+];
+
+const IGNORED_KEYS = [
+  'upstream_base_url',
+  'upstream_api_key',
+  'upstream_provider_fee',
+  'exchange_fee',
+  'models_path',
+];
+
 interface PasswordData {
   current_password: string;
   new_password: string;
@@ -44,6 +68,7 @@ export function AdminSettings() {
   const [error, setError] = useState<string>('');
   const [showSecrets, setShowSecrets] = useState(false);
   const [newMint, setNewMint] = useState('');
+  const [newRelay, setNewRelay] = useState('');
   const [passwordData, setPasswordData] = useState<PasswordData>({
     current_password: '',
     new_password: '',
@@ -129,7 +154,7 @@ export function AdminSettings() {
     }
   };
 
-  const handleInputChange = (field: string, value: string | boolean) => {
+  const handleInputChange = (field: string, value: unknown) => {
     setSettings((prev) => ({
       ...prev,
       [field]: value,
@@ -153,6 +178,23 @@ export function AdminSettings() {
     }));
   };
 
+  const addRelay = () => {
+    if (newRelay.trim()) {
+      setSettings((prev) => ({
+        ...prev,
+        relays: [...(prev.relays || []), newRelay.trim()],
+      }));
+      setNewRelay('');
+    }
+  };
+
+  const removeRelay = (index: number) => {
+    setSettings((prev) => ({
+      ...prev,
+      relays: prev.relays?.filter((_, i) => i !== index) || [],
+    }));
+  };
+
   const renderSecretField = (
     field: string,
     label: string,
@@ -162,7 +204,7 @@ export function AdminSettings() {
     const displayValue = showSecrets ? value : value ? '••••••••' : '';
 
     return (
-      <div className='space-y-2'>
+      <div key={field} className='space-y-2'>
         <Label htmlFor={field}>{label}</Label>
         <div className='flex gap-2'>
           <Input
@@ -190,6 +232,89 @@ export function AdminSettings() {
     );
   };
 
+  const renderDynamicField = (key: string, value: unknown) => {
+    const label = key
+      .split('_')
+      .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+      .join(' ');
+
+    if (typeof value === 'boolean') {
+      return (
+        <div
+          key={key}
+          className='flex items-center justify-between space-y-0 py-4'
+        >
+          <Label htmlFor={key}>{label}</Label>
+          <Switch
+            id={key}
+            checked={value}
+            onCheckedChange={(checked) => handleInputChange(key, checked)}
+          />
+        </div>
+      );
+    }
+
+    if (typeof value === 'number') {
+      return (
+        <div key={key} className='space-y-2'>
+          <Label htmlFor={key}>{label}</Label>
+          <Input
+            id={key}
+            type='number'
+            value={value}
+            onChange={(e) => {
+              const val = e.target.value === '' ? 0 : Number(e.target.value);
+              handleInputChange(key, val);
+            }}
+          />
+        </div>
+      );
+    }
+
+    if (Array.isArray(value)) {
+      const strValue = value.join(', ');
+      return (
+        <div key={key} className='space-y-2'>
+          <Label htmlFor={key}>{label}</Label>
+          <Textarea
+            id={key}
+            value={strValue}
+            onChange={(e) => {
+              const arr = e.target.value
+                .split(',')
+                .map((s) => s.trim())
+                .filter((s) => s !== '');
+              handleInputChange(key, arr);
+            }}
+            placeholder='Comma separated values'
+            rows={2}
+          />
+        </div>
+      );
+    }
+
+    const isSecret =
+      key.includes('key') ||
+      key.includes('password') ||
+      key.includes('secret') ||
+      key.includes('nsec');
+
+    if (isSecret) {
+      return renderSecretField(key, label);
+    }
+
+    return (
+      <div key={key} className='space-y-2'>
+        <Label htmlFor={key}>{label}</Label>
+        <Input
+          id={key}
+          value={(value as string) || ''}
+          onChange={(e) => handleInputChange(key, e.target.value)}
+        />
+      </div>
+    );
+  };
+
   if (loading) {
     return (
       <div className='flex items-center justify-center py-8'>
@@ -337,6 +462,73 @@ export function AdminSettings() {
           </CardContent>
         </Card>
 
+        {/* Relays */}
+        <Card>
+          <CardHeader>
+            <CardTitle>Nostr Relays</CardTitle>
+            <CardDescription>
+              Configure Nostr relays for communication
+            </CardDescription>
+          </CardHeader>
+          <CardContent className='space-y-4'>
+            <div className='space-y-2'>
+              <Label htmlFor='newRelay'>Add Relay URL</Label>
+              <div className='flex gap-2'>
+                <Input
+                  id='newRelay'
+                  value={newRelay}
+                  onChange={(e) => setNewRelay(e.target.value)}
+                  placeholder='wss://relay.example.com'
+                />
+                <Button onClick={addRelay} disabled={!newRelay.trim()}>
+                  Add Relay
+                </Button>
+              </div>
+            </div>
+
+            {settings.relays && settings.relays.length > 0 && (
+              <div className='space-y-2'>
+                <Label>Configured Relays</Label>
+                <div className='space-y-2'>
+                  {settings.relays.map((relay, index) => (
+                    <div
+                      key={index}
+                      className='flex items-center gap-2 rounded border p-2'
+                    >
+                      <span className='flex-1 text-sm'>{relay}</span>
+                      <Button
+                        variant='outline'
+                        size='sm'
+                        onClick={() => removeRelay(index)}
+                      >
+                        Remove
+                      </Button>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+          </CardContent>
+        </Card>
+
+        {/* Other Settings */}
+        <Card>
+          <CardHeader>
+            <CardTitle>Advanced Settings</CardTitle>
+            <CardDescription>
+              Configure additional node settings
+            </CardDescription>
+          </CardHeader>
+          <CardContent className='space-y-4'>
+            {Object.keys(settings)
+              .filter(
+                (key) =>
+                  !HANDLED_KEYS.includes(key) && !IGNORED_KEYS.includes(key)
+              )
+              .map((key) => renderDynamicField(key, settings[key]))}
+          </CardContent>
+        </Card>
+
         <Card className='mt-6'>
           <CardFooter className='flex justify-between'>
             <Button

ui/components/site-header.tsx

@@ -8,6 +8,7 @@ import { useRouter } from 'next/navigation';
 import { adminLogout } from '@/lib/api/services/auth';
 import { toast } from 'sonner';
 import { ThemeToggle } from '@/components/theme-toggle';
+import { CurrencyToggle } from '@/components/currency-toggle';
 
 export function SiteHeader() {
   const router = useRouter();
@@ -35,6 +36,7 @@ export function SiteHeader() {
           <h1 className='text-base font-medium lg:hidden'>Routstr Node</h1>
         </div>
         <div className='flex items-center gap-2'>
+          <CurrencyToggle />
           <ThemeToggle />
           <Button
             variant='ghost'

ui/components/ui/calendar.tsx

@@ -0,0 +1,72 @@
+'use client';
+
+import * as React from 'react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { DayPicker } from 'react-day-picker';
+
+import { cn } from '@/lib/utils';
+import { buttonVariants } from '@/components/ui/button';
+
+export type CalendarProps = React.ComponentProps<typeof DayPicker>;
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  ...props
+}: CalendarProps) {
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn('p-3', className)}
+      classNames={{
+        months: 'flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0',
+        month: 'space-y-4',
+        caption: 'flex justify-center pt-1 relative items-center',
+        caption_label: 'text-sm font-medium',
+        nav: 'space-x-1 flex items-center',
+        button_previous: cn(
+          buttonVariants({ variant: 'outline' }),
+          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 absolute left-1'
+        ),
+        button_next: cn(
+          buttonVariants({ variant: 'outline' }),
+          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 absolute right-1'
+        ),
+        month_grid: 'w-full border-collapse space-y-1',
+        weekdays: 'flex',
+        weekday:
+          'text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]',
+        week: 'flex w-full mt-2',
+        day: cn(
+          buttonVariants({ variant: 'ghost' }),
+          'h-9 w-9 p-0 font-normal aria-selected:opacity-100'
+        ),
+        day_button: 'h-9 w-9 p-0 font-normal',
+        range_end: 'day-range-end',
+        selected:
+          'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground',
+        today: 'bg-accent text-accent-foreground',
+        outside:
+          'day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30',
+        disabled: 'text-muted-foreground opacity-50',
+        range_middle:
+          'aria-selected:bg-accent aria-selected:text-accent-foreground',
+        hidden: 'invisible',
+        ...classNames,
+      }}
+      components={{
+        Chevron: ({ orientation }) => {
+          if (orientation === 'left') {
+            return <ChevronLeft className='h-4 w-4' />;
+          }
+          return <ChevronRight className='h-4 w-4' />;
+        },
+      }}
+      {...props}
+    />
+  );
+}
+Calendar.displayName = 'Calendar';
+
+export { Calendar };

ui/components/usage-metrics-chart.tsx

@@ -0,0 +1,114 @@
+'use client';
+
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import {
+  Area,
+  AreaChart,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+  Legend,
+  CartesianGrid,
+} from 'recharts';
+
+interface UsageMetricsChartProps {
+  data: Array<Record<string, unknown> & { timestamp: string }>;
+  title: string;
+  dataKeys: Array<{
+    key: string;
+    name: string;
+    color: string;
+  }>;
+}
+
+export function UsageMetricsChart({
+  data,
+  title,
+  dataKeys,
+}: UsageMetricsChartProps) {
+  const formattedData = data.map((item) => ({
+    ...item,
+    time: new Date(item.timestamp).toLocaleTimeString([], {
+      hour: '2-digit',
+      minute: '2-digit',
+    }),
+  }));
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>{title}</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <ResponsiveContainer width='100%' height={300}>
+          <AreaChart data={formattedData}>
+            <defs>
+              {dataKeys.map((dataKey) => (
+                <linearGradient
+                  key={dataKey.key}
+                  id={`color${dataKey.key}`}
+                  x1='0'
+                  y1='0'
+                  x2='0'
+                  y2='1'
+                >
+                  <stop
+                    offset='5%'
+                    stopColor={dataKey.color}
+                    stopOpacity={0.3}
+                  />
+                  <stop
+                    offset='95%'
+                    stopColor={dataKey.color}
+                    stopOpacity={0}
+                  />
+                </linearGradient>
+              ))}
+            </defs>
+            <CartesianGrid strokeDasharray='3 3' className='stroke-muted/30' />
+            <XAxis
+              dataKey='time'
+              className='text-xs'
+              tick={{ fill: 'hsl(var(--muted-foreground))' }}
+              tickLine={false}
+              axisLine={false}
+              minTickGap={32}
+            />
+            <YAxis
+              className='text-xs'
+              tick={{ fill: 'hsl(var(--muted-foreground))' }}
+              tickLine={false}
+              axisLine={false}
+              width={40}
+            />
+            <Tooltip
+              contentStyle={{
+                backgroundColor: 'hsl(var(--background))',
+                border: '1px solid hsl(var(--border))',
+                borderRadius: '8px',
+                boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1)',
+              }}
+              itemStyle={{ fontSize: '12px' }}
+              labelStyle={{ fontSize: '12px', color: 'hsl(var(--muted-foreground))', marginBottom: '8px' }}
+            />
+            <Legend wrapperStyle={{ fontSize: '12px', paddingTop: '16px' }} />
+            {dataKeys.map((dataKey) => (
+              <Area
+                key={dataKey.key}
+                type='monotone'
+                dataKey={dataKey.key}
+                stroke={dataKey.color}
+                fillOpacity={1}
+                fill={`url(#color${dataKey.key})`}
+                name={dataKey.name}
+                strokeWidth={2}
+                animationDuration={1000}
+              />
+            ))}
+          </AreaChart>
+        </ResponsiveContainer>
+      </CardContent>
+    </Card>
+  );
+}

ui/components/usage-summary-cards.tsx

@@ -0,0 +1,131 @@
+'use client';
+
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { UsageSummary } from '@/lib/api/services/admin';
+import {
+  CheckCircle2,
+  XCircle,
+  AlertTriangle,
+  Activity,
+  Database,
+  CreditCard,
+  TrendingUp,
+  DollarSign,
+  TrendingDown,
+  Coins,
+} from 'lucide-react';
+import { useCurrencyStore } from '@/lib/stores/currency';
+import { useQuery } from '@tanstack/react-query';
+import { fetchBtcUsdPrice, btcToSatsRate } from '@/lib/exchange-rate';
+import { formatFromMsat } from '@/lib/currency';
+
+interface UsageSummaryCardsProps {
+  summary: UsageSummary;
+}
+
+export function UsageSummaryCards({ summary }: UsageSummaryCardsProps) {
+  const { displayUnit } = useCurrencyStore();
+  const { data: btcUsdPrice } = useQuery({
+    queryKey: ['btc-usd-price'],
+    queryFn: fetchBtcUsdPrice,
+    refetchInterval: 120_000,
+    staleTime: 60_000,
+  });
+  const usdPerSat = btcUsdPrice ? btcToSatsRate(btcUsdPrice) : null;
+
+  const formatAmount = (msat: number) =>
+    formatFromMsat(msat, displayUnit, usdPerSat);
+
+  const cards = [
+    {
+      title: 'Total Requests',
+      value: summary.total_requests.toLocaleString(),
+      icon: Activity,
+      color: 'text-blue-500',
+    },
+    {
+      title: 'Successful Completions',
+      value: summary.successful_chat_completions.toLocaleString(),
+      icon: CheckCircle2,
+      color: 'text-green-500',
+    },
+    {
+      title: 'Revenue',
+      value: formatAmount(summary.revenue_msats),
+      icon: Coins,
+      color: 'text-green-600',
+    },
+    {
+      title: 'Net Revenue',
+      value: formatAmount(summary.net_revenue_msats),
+      icon: DollarSign,
+      color: 'text-emerald-600',
+    },
+    {
+      title: 'Refunds',
+      value: formatAmount(summary.refunds_msats),
+      icon: TrendingDown,
+      color: 'text-red-500',
+    },
+    {
+      title: 'Avg Revenue/Request',
+      value: formatAmount(summary.avg_revenue_per_request_msats),
+      icon: CreditCard,
+      color: 'text-cyan-500',
+    },
+    {
+      title: 'Success Rate',
+      value: `${summary.success_rate.toFixed(1)}%`,
+      icon: TrendingUp,
+      color: 'text-emerald-500',
+    },
+    {
+      title: 'Refund Rate',
+      value: `${summary.refund_rate.toFixed(1)}%`,
+      icon: XCircle,
+      color: 'text-orange-500',
+    },
+    {
+      title: 'Failed Requests',
+      value: summary.failed_requests.toLocaleString(),
+      icon: XCircle,
+      color: 'text-red-400',
+    },
+    {
+      title: 'Errors',
+      value: summary.total_errors.toLocaleString(),
+      icon: AlertTriangle,
+      color: 'text-orange-500',
+    },
+    {
+      title: 'Unique Models',
+      value: summary.unique_models_count.toLocaleString(),
+      icon: Database,
+      color: 'text-purple-500',
+    },
+    {
+      title: 'Upstream Errors',
+      value: summary.upstream_errors.toLocaleString(),
+      icon: AlertTriangle,
+      color: 'text-yellow-500',
+    },
+  ];
+
+  return (
+    <div className='grid gap-6 md:grid-cols-2 lg:grid-cols-4'>
+      {cards.map((card) => (
+        <Card key={card.title} className="hover:bg-muted/50 transition-colors">
+          <CardHeader className='flex flex-row items-center justify-between space-y-0 pb-2'>
+            <CardTitle className='text-sm font-medium text-muted-foreground'>{card.title}</CardTitle>
+            <div className={`p-2 rounded-full bg-secondary`}>
+                <card.icon className={`h-4 w-4 ${card.color}`} />
+            </div>
+          </CardHeader>
+          <CardContent>
+            <div className='text-2xl font-bold tracking-tight'>{card.value}</div>
+          </CardContent>
+        </Card>
+      ))}
+    </div>
+  );
+}

ui/lib/api/client.ts

@@ -64,6 +64,11 @@ class ApiClient {
         data,
         config
       );
+      console.log(`POST response from ${endpoint}:`, {
+        status: response.status,
+        data: response.data,
+        headers: response.headers,
+      });
       return response.data;
     } catch (error) {
       this.handleAuthError(error);

ui/lib/api/services/admin.ts

@@ -7,6 +7,9 @@ export const ProviderTypeSchema = z.object({
   default_base_url: z.string(),
   fixed_base_url: z.boolean(),
   platform_url: z.string().nullable(),
+  can_create_account: z.boolean(),
+  can_topup: z.boolean(),
+  can_show_balance: z.boolean(),
 });
 
 export const UpstreamProviderSchema = z.object({
@@ -797,11 +800,113 @@ export class AdminService {
     return await apiClient.post<{ ok: boolean }>('/admin/api/logout', {});
   }
 
+  static async getLogs(
+    date?: string,
+    level?: string,
+    requestId?: string,
+    search?: string,
+    limit: number = 100
+  ): Promise<LogResponse> {
+    const params = new URLSearchParams();
+    if (date) params.append('date', date);
+    if (level) params.append('level', level);
+    if (requestId) params.append('request_id', requestId);
+    if (search) params.append('search', search);
+    params.append('limit', limit.toString());
+
+    return await apiClient.get<LogResponse>(`/admin/api/logs?${params.toString()}`);
+  }
+
+  static async getLogDates(): Promise<{ dates: string[] }> {
+    return await apiClient.get<{ dates: string[] }>('/admin/api/logs/dates');
+  }
+
   static async getTemporaryBalances(): Promise<TemporaryBalance[]> {
     return await apiClient.get<TemporaryBalance[]>(
       '/admin/api/temporary-balances'
     );
   }
+
+  static async getUsageMetrics(
+    interval: number = 15,
+    hours: number = 24
+  ): Promise<UsageMetrics> {
+    return await apiClient.get<UsageMetrics>(
+      `/admin/api/usage/metrics?interval=${interval}&hours=${hours}`
+    );
+  }
+
+  static async getUsageSummary(hours: number = 24): Promise<UsageSummary> {
+    return await apiClient.get<UsageSummary>(
+      `/admin/api/usage/summary?hours=${hours}`
+    );
+  }
+
+  static async getErrorDetails(
+    hours: number = 24,
+    limit: number = 100
+  ): Promise<ErrorDetails> {
+    return await apiClient.get<ErrorDetails>(
+      `/admin/api/usage/error-details?hours=${hours}&limit=${limit}`
+    );
+  }
+
+  static async getRevenueByModel(
+    hours: number = 24,
+    limit: number = 20
+  ): Promise<RevenueByModel> {
+    return await apiClient.get<RevenueByModel>(
+      `/admin/api/usage/revenue-by-model?hours=${hours}&limit=${limit}`
+    );
+  }
+
+  static async createProviderAccountByType(
+    providerType: string
+  ): Promise<{
+    ok: boolean;
+    account_data: Record<string, unknown>;
+    message: string;
+  }> {
+    return await apiClient.post<{
+      ok: boolean;
+      account_data: Record<string, unknown>;
+      message: string;
+    }>('/admin/api/upstream-providers/create-account', {
+      provider_type: providerType,
+    });
+  }
+
+  static async initiateProviderTopup(
+    providerId: number,
+    amount: number
+  ): Promise<{ ok: boolean; topup_data: Record<string, unknown>; message: string }> {
+    return await apiClient.post<{
+      ok: boolean;
+      topup_data: Record<string, unknown>;
+      message: string;
+    }>(`/admin/api/upstream-providers/${providerId}/topup`, {
+      amount: amount,
+    });
+  }
+
+  static async checkTopupStatus(
+    providerId: number,
+    invoiceId: string
+  ): Promise<{ ok: boolean; paid: boolean }> {
+    return await apiClient.get<{
+      ok: boolean;
+      paid: boolean;
+    }>(`/admin/api/upstream-providers/${providerId}/topup/${invoiceId}/status`);
+  }
+
+  static async getProviderBalance(
+    providerId: number
+  ): Promise<{ ok: boolean; balance_data: Record<string, unknown> }> {
+    return await apiClient.get<{
+      ok: boolean;
+      balance_data: Record<string, unknown>;
+    }>(`/admin/api/upstream-providers/${providerId}/balance`);
+  }
 }
 
 export const TemporaryBalanceSchema = z.object({
@@ -814,3 +919,99 @@ export const TemporaryBalanceSchema = z.object({
 });
 
 export type TemporaryBalance = z.infer<typeof TemporaryBalanceSchema>;
+
+export interface UsageMetricData {
+  timestamp: string;
+  total_requests: number;
+  successful_chat_completions: number;
+  failed_requests: number;
+  errors: number;
+  warnings: number;
+  payment_processed: number;
+  upstream_errors: number;
+  revenue_msats: number;
+  refunds_msats: number;
+  [key: string]: unknown;
+}
+
+export interface UsageMetrics {
+  metrics: UsageMetricData[];
+  interval_minutes: number;
+  hours_back: number;
+  total_buckets: number;
+}
+
+export interface UsageSummary {
+  total_entries: number;
+  total_requests: number;
+  successful_chat_completions: number;
+  failed_requests: number;
+  total_errors: number;
+  total_warnings: number;
+  payment_processed: number;
+  upstream_errors: number;
+  unique_models_count: number;
+  unique_models: string[];
+  error_types: Record<string, number>;
+  success_rate: number;
+  revenue_msats: number;
+  refunds_msats: number;
+  revenue_sats: number;
+  refunds_sats: number;
+  net_revenue_msats: number;
+  net_revenue_sats: number;
+  avg_revenue_per_request_msats: number;
+  refund_rate: number;
+}
+
+export interface ErrorDetail {
+  timestamp: string;
+  message: string;
+  error_type: string;
+  pathname: string;
+  lineno: number;
+  request_id: string;
+}
+
+export interface ErrorDetails {
+  errors: ErrorDetail[];
+  total_count: number;
+}
+
+export interface ModelRevenueData {
+  model: string;
+  revenue_sats: number;
+  refunds_sats: number;
+  net_revenue_sats: number;
+  requests: number;
+  successful: number;
+  failed: number;
+  avg_revenue_per_request: number;
+}
+
+export interface RevenueByModel {
+  models: ModelRevenueData[];
+  total_revenue_sats: number;
+  total_models: number;
+}
+
+export interface LogEntry {
+  asctime: string;
+  name: string;
+  levelname: string;
+  message: string;
+  pathname?: string;
+  lineno?: number;
+  request_id?: string;
+  [key: string]: unknown;
+}
+
+export interface LogResponse {
+  logs: LogEntry[];
+  total: number;
+  date: string | null;
+  level: string | null;
+  request_id: string | null;
+  search: string | null;
+  limit: number;
+}

ui/lib/auth/ProtectedRoute.tsx

@@ -9,8 +9,10 @@ export function ProtectedRoute({ children }: { children: React.ReactNode }) {
   const pathname = usePathname();
 
   useEffect(() => {
-    const publicPaths = ['/login', '/_register', '/unauthorized'];
-    const isPublicPath = publicPaths.some((path) => pathname.startsWith(path));
+    const publicPaths = ['/', '/login', '/unauthorized'];
+    const isPublicPath = publicPaths.some((path) =>
+      path === '/' ? pathname === '/' : pathname.startsWith(path)
+    );
 
     if (!isPublicPath && !ConfigurationService.isTokenValid()) {
       router.push('/login');

ui/lib/currency.ts

@@ -25,7 +25,8 @@ export function formatFromMsat(
 
   if (displayUnit === 'sat') {
     const sats = amountMsat / 1000;
-    return `${sats.toLocaleString()} sats`;
+    // Format as integer for sats
+    return `${Math.floor(sats).toLocaleString()} sats`;
   }
 
   if (usdPerSat === null) {
@@ -34,12 +35,11 @@ export function formatFromMsat(
 
   const sats = amountMsat / 1000;
   const usd = sats * usdPerSat;
-  const precision = Math.abs(usd) >= 1 ? 2 : 4;
   const formatter = new Intl.NumberFormat(undefined, {
     style: 'currency',
     currency: 'USD',
-    minimumFractionDigits: precision,
-    maximumFractionDigits: Math.max(precision, 6),
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
   });
   return formatter.format(usd);
 }

ui/lib/stores/currency.ts

@@ -0,0 +1,21 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+import type { DisplayUnit } from '@/lib/types/units';
+
+interface CurrencyState {
+  displayUnit: DisplayUnit;
+  setDisplayUnit: (unit: DisplayUnit) => void;
+}
+
+export const useCurrencyStore = create<CurrencyState>()(
+  persist(
+    (set) => ({
+      displayUnit: 'sat',
+      setDisplayUnit: (unit) => set({ displayUnit: unit }),
+    }),
+    {
+      name: 'currency-storage',
+    }
+  )
+);
+

uv.lock

@@ -1878,7 +1878,7 @@ wheels = [
 
 [[package]]
 name = "routstr"
-version = "0.2.0c0"
+version = "0.2.1"
 source = { editable = "." }
 dependencies = [
     { name = "aiosqlite" },
@@ -1923,7 +1923,7 @@ requires-dist = [
     { name = "marshmallow", specifier = ">=3.13,<4.0" },
     { name = "mdurl", specifier = "==0.1.2" },
     { name = "nostr", specifier = ">=0.0.2" },
-    { name = "pillow", specifier = ">=10.0.0" },
+    { name = "pillow", specifier = ">=10" },
     { name = "python-json-logger", specifier = ">=2.0.0" },
     { name = "secp256k1", git = "https://github.com/saschanaz/secp256k1-py?branch=upgrade060" },
     { name = "sqlmodel", specifier = ">=0.0.24" },