remove hardcoded deduction (legacy code)

add apikey refund tracking

.env.example

@@ -14,6 +14,7 @@ UPSTREAM_API_KEY=your-upstream-api-key
 # HTTP_URL=https://api.mynode.com
 # ONION_URL=http://mynode.onion (auto fetched from compose)
 # RELAYS="wss://relay.damus.io,wss://relay.nostr.band,wss://eden.nostr.land,wss://relay.routstr.com"
+# ENABLE_ANALYTICS_SHARING=true
 # CASHU_MINTS="https://mint.minibits.cash/Bitcoin,https://mint.cubabitcoin.org,https://ecashmint.otrta.me"
 # RECEIVE_LN_ADDRESS=
 

.github/workflows/test.yml

@@ -67,7 +67,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: "18"
+          node-version: "20"
           cache: "pnpm"
           cache-dependency-path: ui/pnpm-lock.yaml
 

README.md

@@ -51,14 +51,26 @@ curl https://api.routstr.com/v1/chat/completions \
 
 ## Quick Start (Docker)
 
-If you are a node runner, start a Routstr Core instance and configure upstream access in the dashboard.
+If you are a node runner, start a Routstr Core instance using Docker Compose:
 
-```bash
-docker run -d \
-  --name routstr-proxy \
-  -p 8000:8000 \
-  ghcr.io/routstr/proxy:latest
-```
+1. **Prepare your `.env`**:
+   ```bash
+   ADMIN_PASSWORD=mysecretpassword
+   NAME="My AI Node"
+   DESCRIPTION="Fast access to models"
+   NSEC=yournsec
+   RECEIVE_LN_ADDRESS=yourname@wallet.com
+   ```
+
+2. **Start the services**:
+   ```bash
+   docker compose up -d
+   ```
+
+3. **Configure**:
+   Open [http://localhost:8000/admin/](http://localhost:8000/admin/) to connect your AI providers and set pricing.
+
+For full instructions, see the **[Provider Quick Start Guide](https://docs.routstr.com/provider/quickstart/)**.
 
 ## Development
 

docs/provider/configuration.md

@@ -97,6 +97,7 @@ Announce your node on the network:
 | **Npub**   | Your Nostr public key                |
 | **Nsec**   | Your Nostr private key (for signing) |
 | **Relays** | Relays to publish announcements      |
+| **Share Analytics** | Publish aggregate usage stats to Nostr |
 
 See [Discovery](discovery.md) for details.
 
@@ -122,6 +123,7 @@ Use environment variables for:
 | `DESCRIPTION`        | Node description                  | `A Routstr Node`                     |
 | `NPUB`               | Nostr public key (bech32)         | —                                    |
 | `NSEC`               | Nostr private key                 | —                                    |
+| `ENABLE_ANALYTICS_SHARING` | Enable usage analytics sharing to Nostr | `true`                         |
 | `CASHU_MINTS`        | Comma-separated mint URLs         | `https://mint.minibits.cash/Bitcoin` |
 | `RECEIVE_LN_ADDRESS` | Lightning address for withdrawals | —                                    |
 | `TOR_PROXY_URL`      | SOCKS5 proxy for Tor              | `socks5://127.0.0.1:9050`            |

docs/provider/dashboard.md

@@ -152,6 +152,7 @@ Manage which mints you accept payments from:
 |-------|-------------|
 | **Nsec** | Private key for signing announcements |
 | **Relays** | Where to publish your node advertisement |
+| **Share Analytics** | Toggle publishing aggregate usage stats to Nostr |
 
 ### Security
 

docs/provider/deployment.md

@@ -6,16 +6,7 @@ Production deployment guide for Routstr Provider nodes.
 
 For production, use Docker Compose with persistent storage and optional Tor support.
 
-### Unified Setup (All-in-one)
-To build and run the node with the UI integrated in a single container using the multi-stage build:
-
-```bash
-docker build -f Dockerfile.full -t routstr-full .
-docker run -d -p 8000:8000 --env-file .env routstr-full
-```
-
-### Advanced Setup (Separated UI & Node)
-Use the included `compose.yml` for a more flexible setup that separates the UI build process from the node execution. This is useful for development or when you want to manage Tor as a separate service.
+Use the included `compose.yml` for a flexible setup that handles both the UI and the node execution. This is useful for development or when you want to manage Tor as a separate service.
 
 ```bash
 docker compose up -d
@@ -184,20 +175,16 @@ docker compose up -d
 
 ## Building from Source
 
-### Unified Image (UI + Node)
-The easiest way to build everything from source into a single production-ready image:
+### Using Docker Compose
+The easiest way to build everything from source:
 
 ```bash
-docker build -f Dockerfile.full -t routstr-full .
+docker compose build
 ```
 
 ### Individual Components
-If you prefer building them separately or using Docker Compose:
+If you prefer building the node only (requires manual UI build first):
 
 ```bash
-# Build using compose
-docker compose build
-
-# Or build the node only (requires manual UI build first)
 docker build -t routstr-node .
 ```

docs/provider/quickstart.md

@@ -35,6 +35,7 @@ ADMIN_PASSWORD=mysecretpassword
 # Node Identity
 NAME="My AI Node"
 DESCRIPTION="Fast access to models"
+NSEC=yournsec
 
 # Lightning Payouts
 RECEIVE_LN_ADDRESS=yourname@wallet.com
@@ -43,32 +44,10 @@ RECEIVE_LN_ADDRESS=yourname@wallet.com
 
 ## 2. Start the Node
 
-You can run the pre-built image directly:
+The recommended way to run Routstr is using Docker Compose, which handles the node, the UI, and optional services like Tor.
 
 ```bash
-docker run -d \
-  --name routstr \
-  -p 8000:8000 \
-  --env-file .env \
-  -v routstr-data:/app/data \
-  ghcr.io/routstr/proxy:latest
-```
-
-*Note: The pre-built image does not contain the UI. For the all-in-one experience with the Admin Dashboard, use the Build from Source instructions below.*
-
-### Build from Source (Recommended)
-
-If you want to build the node and UI yourself from source, use the unified Dockerfile:
-
-```bash
-git clone https://github.com/routstr/routstr-core.git
-cd routstr-core
-# Edit your .env with ADMIN_PASSWORD and API keys
-cp .env.example .env
-nano .env
-
-docker build -f Dockerfile.full -t routstr-local .
-docker run -d -p 8000:8000 --env-file .env --name routstr routstr-local
+docker compose up -d
 ```
 
 Verify it's running:
@@ -77,6 +56,15 @@ Verify it's running:
 curl http://localhost:8000/v1/info
 ```
 
+### Build from Source (Optional)
+
+If you've cloned the repository and want to build the images yourself:
+
+```bash
+docker compose build
+docker compose up -d
+```
+
 ---
 
 ## 3. Configure via Dashboard

logs/.gitkeep

@@ -0,0 +1 @@
+

migrations/versions/a776ca70e5fe_add_cashu_refunds_table.py

@@ -0,0 +1,42 @@
+"""add cashu_transactions table
+
+Revision ID: a776ca70e5fe
+Revises: 614c0a740e68
+Create Date: 2026-03-11 22:00:01.554762
+"""
+
+import sqlalchemy as sa
+import sqlmodel
+from alembic import op
+
+# revision identifiers, used by Alembic.
+revision = "a776ca70e5fe"
+down_revision = "614c0a740e68"
+branch_labels = None
+depends_on = None
+
+
+def upgrade() -> None:
+    op.create_table(
+        "cashu_transactions",
+        sa.Column("id", sqlmodel.sql.sqltypes.AutoString(), nullable=False),
+        sa.Column("token", sqlmodel.sql.sqltypes.AutoString(), nullable=False),
+        sa.Column("amount", sa.Integer(), nullable=False),
+        sa.Column("unit", sqlmodel.sql.sqltypes.AutoString(), nullable=False),
+        sa.Column("mint_url", sqlmodel.sql.sqltypes.AutoString(), nullable=True),
+        sa.Column(
+            "type",
+            sqlmodel.sql.sqltypes.AutoString(),
+            nullable=False,
+            server_default="out",
+        ),
+        sa.Column("request_id", sqlmodel.sql.sqltypes.AutoString(), nullable=True),
+        sa.Column("created_at", sa.Integer(), nullable=False),
+        sa.Column("collected", sa.Boolean(), nullable=False),
+        sa.Column("swept", sa.Boolean(), nullable=False),
+        sa.PrimaryKeyConstraint("id"),
+    )
+
+
+def downgrade() -> None:
+    op.drop_table("cashu_transactions")

migrations/versions/b1c2d3e4f5a6_add_upstream_model_id_to_models.py

@@ -0,0 +1,33 @@
+"""add forwarded_model_id to models
+
+Revision ID: b1c2d3e4f5a6
+Revises: a776ca70e5fe
+Create Date: 2026-04-05 00:00:00.000000
+"""
+
+import sqlalchemy as sa
+import sqlmodel
+from alembic import op
+
+# revision identifiers, used by Alembic.
+revision = "b1c2d3e4f5a6"
+down_revision = "a776ca70e5fe"
+branch_labels = None
+depends_on = None
+
+
+def upgrade() -> None:
+    op.add_column(
+        "models",
+        sa.Column(
+            "forwarded_model_id",
+            sqlmodel.sql.sqltypes.AutoString(),
+            nullable=True,
+        ),
+    )
+    # Backfill: set forwarded_model_id = id for all existing rows
+    op.execute("UPDATE models SET forwarded_model_id = id WHERE forwarded_model_id IS NULL")
+
+
+def downgrade() -> None:
+    op.drop_column("models", "forwarded_model_id")

migrations/versions/c3d4e5f6a7b8_add_source_to_cashu_transactions.py

@@ -0,0 +1,36 @@
+"""add source to cashu_transactions
+
+Revision ID: c3d4e5f6a7b8
+Revises: b1c2d3e4f5a6
+Create Date: 2026-04-10 00:00:00.000000
+"""
+
+import sqlalchemy as sa
+import sqlmodel
+from alembic import op
+
+# revision identifiers, used by Alembic.
+revision = "c3d4e5f6a7b8"
+down_revision = "b1c2d3e4f5a6"
+branch_labels = None
+depends_on = None
+
+
+def upgrade() -> None:
+    conn = op.get_bind()
+    inspector = sa.inspect(conn)
+    columns = [col["name"] for col in inspector.get_columns("cashu_transactions")]
+    if "source" not in columns:
+        op.add_column(
+            "cashu_transactions",
+            sa.Column(
+                "source",
+                sqlmodel.sql.sqltypes.AutoString(),
+                nullable=False,
+                server_default="x-cashu",
+            ),
+        )
+
+
+def downgrade() -> None:
+    op.drop_column("cashu_transactions", "source")

plans/other-mints-balance-tracking-plan.md

@@ -0,0 +1,355 @@
+# Plan: Track unsupported incoming mints in `other_mints` and include them in balances
+
+## Goal
+
+When a Cashu token arrives from a mint that is **not** in `settings.cashu_mints`, we currently create/use a wallet for that mint and swap value into the primary mint. Any change/surplus left behind after `melt()` remains in the foreign `token_wallet`, but that balance is not surfaced by `fetch_all_balances()` because it only iterates over configured mints.
+
+This plan adds persistent tracking for those foreign mints in a new database table called `other_mints`, and updates balance reporting to include them.
+
+---
+
+## Current behavior
+
+### Incoming unsupported mint flow
+
+In `routstr/wallet.py`:
+
+- `recieve_token()` deserializes the token
+- if `token_obj.mint not in settings.cashu_mints`, it calls `swap_to_primary_mint(token_obj, wallet)`
+- `swap_to_primary_mint()` calls `token_wallet.melt(...)` to pay the primary mint invoice
+
+### Important detail: change is retained, not discarded
+
+The underlying Cashu wallet library keeps any melt change:
+
+- `Wallet.melt()` constructs blank outputs for change
+- when the melt succeeds, returned change is reconstructed into proofs
+- those proofs are appended to `self.proofs` and stored in the wallet DB
+
+So surplus from unsupported mints is **not discarded**, but it may become invisible operationally.
+
+### Visibility problem
+
+`fetch_all_balances()` currently only loops over:
+
+- `settings.cashu_mints`
+- units `sat` and `msat`
+
+This means balances left on unsupported mints are not shown in admin balance reporting.
+
+---
+
+## Proposed design
+
+## 1. Add a new DB table: `other_mints`
+
+Add a small table in `routstr/core/db.py` to persist unsupported mints we have seen in incoming tokens.
+
+Suggested schema:
+
+- `mint_url: str` primary key
+- `created_at: int`
+- `last_seen_at: int`
+
+Minimal model:
+
+```python
+class OtherMint(SQLModel, table=True):
+    __tablename__ = "other_mints"
+
+    mint_url: str = Field(primary_key=True)
+    created_at: int = Field(default_factory=lambda: int(time.time()))
+    last_seen_at: int = Field(default_factory=lambda: int(time.time()))
+```
+
+Why minimal:
+
+- the only required function is mint discovery/tracking
+- unit handling can remain dynamic via existing balance queries over `sat` and `msat`
+
+---
+
+## 2. Add DB helpers for `other_mints`
+
+In `routstr/core/db.py`, add helper functions:
+
+### `register_other_mint(mint_url: str) -> None`
+
+Behavior:
+
+- if the mint is not present, insert it
+- if it already exists, update `last_seen_at`
+
+### `list_other_mints(session) -> list[str]`
+
+Behavior:
+
+- return all tracked unsupported mint URLs
+
+Optional later:
+
+- `delete_other_mint(...)`
+- admin cleanup helpers
+
+---
+
+## 3. Register unsupported mints during token receipt
+
+Update `recieve_token()` in `routstr/wallet.py`.
+
+Current logic:
+
+```python
+if token_obj.mint not in settings.cashu_mints:
+    return await swap_to_primary_mint(token_obj, wallet)
+```
+
+Planned logic:
+
+```python
+if token_obj.mint not in settings.cashu_mints:
+    await db.register_other_mint(token_obj.mint)
+    return await swap_to_primary_mint(token_obj, wallet)
+```
+
+Why here:
+
+- this is the earliest reliable point where we know the mint came in via an actual token
+- this is exactly the path that can leave foreign-mint change behind
+- it avoids needing to infer unsupported mints later from wallet internals
+
+---
+
+## 4. Update `fetch_all_balances()` to include `other_mints`
+
+Current behavior only includes configured mints.
+
+Planned behavior:
+
+- load tracked unsupported mints from DB
+- combine them with `settings.cashu_mints`
+- dedupe while preserving order
+- fetch balances for all tracked mints across requested units
+
+Conceptual flow:
+
+```python
+tracked_mints = dedupe(settings.cashu_mints + other_mints_from_db)
+```
+
+Then existing per-mint/per-unit balance logic can remain mostly unchanged.
+
+This ensures that retained change on unsupported mints becomes visible in admin balance reporting.
+
+---
+
+## 5. Add a balance source marker
+
+Extend `BalanceDetail` in `routstr/wallet.py` to identify whether a balance row comes from a configured mint or an `other_mints` entry.
+
+Suggested field:
+
+- `source: str` with values:
+  - `"configured"`
+  - `"other"`
+
+Updated shape:
+
+```python
+class BalanceDetail(TypedDict, total=False):
+    mint_url: str
+    unit: str
+    source: str
+    wallet_balance: int
+    user_balance: int
+    owner_balance: int
+    error: str
+```
+
+Why this helps:
+
+- admin can distinguish normal configured wallet balances from foreign/unsupported balances
+- avoids confusion if unexpected mint URLs show up in the balances API/UI
+
+---
+
+## 6. Admin/API impact
+
+Backend impact is minimal because `/admin/api/balances` already returns `fetch_all_balances()` output.
+
+Effects:
+
+- supported mints continue to show as before
+- tracked unsupported mints will also appear
+- UI can optionally display the new `source` field
+
+No API contract break is expected if the frontend ignores unknown fields.
+
+---
+
+## 7. Payout behavior: do not change in phase 1
+
+`periodic_payout()` currently only iterates over `settings.cashu_mints`.
+
+Recommendation for this change:
+
+- **do not** expand `periodic_payout()` to include `other_mints` yet
+- only improve visibility through balance reporting
+
+Reason:
+
+- automatic payout from unsupported/foreign mints may be operationally undesirable
+- visibility should come first, automation second
+
+Possible future phase:
+
+- add optional sweeping/payout support for `other_mints`
+- or provide an admin-triggered withdrawal/sweep flow
+
+---
+
+## 8. Logging improvements (optional)
+
+Optional follow-up improvement in `swap_to_primary_mint()`:
+
+- capture the return value from `token_wallet.melt(...)`
+- if feasible, log any reported change amount
+- otherwise, rely on wallet balance reporting to surface residual amounts
+
+This is useful but not required for the first implementation.
+
+---
+
+## Files to change
+
+### `routstr/core/db.py`
+
+Add:
+
+- `OtherMint` SQLModel
+- `register_other_mint()`
+- `list_other_mints()`
+
+### `migrations/versions/<new_revision>_add_other_mints_table.py`
+
+Create migration to add the `other_mints` table.
+
+### `routstr/wallet.py`
+
+Update:
+
+- `recieve_token()` to register unsupported mints
+- `BalanceDetail` to include `source`
+- `fetch_all_balances()` to include both configured and tracked unsupported mints
+
+### `routstr/core/admin.py`
+
+Likely no backend changes required unless a dedicated `other_mints` API is desired.
+
+---
+
+## Behavior rules
+
+### Register a mint when
+
+- an incoming token is processed
+- the token mint is not in `settings.cashu_mints`
+
+### Do not remove automatically when
+
+- balance reaches zero
+
+Reason:
+
+- historical visibility is useful
+- avoids flapping entries in the admin balance list
+- mint may receive additional unsupported tokens later
+
+Potential future enhancement:
+
+- admin endpoint to prune zero-balance `other_mints`
+
+---
+
+## Edge cases
+
+### A mint later becomes configured
+
+If a mint in `other_mints` is later added to `settings.cashu_mints`:
+
+- deduplication prevents duplicate balance rows
+- `source` should resolve to `configured`
+
+### Unsupported mint with zero balance
+
+A tracked unsupported mint may show zero balances.
+
+Initial recommendation:
+
+- allow it to appear
+- consider later filtering zero-balance `other` rows if the UI becomes noisy
+
+### Units
+
+Balance fetching can continue to query both `sat` and `msat` for each tracked mint.
+
+If a mint has no proofs in one unit, current error/zero handling can continue to apply.
+
+---
+
+## Test plan
+
+### DB tests
+
+- registering a new unsupported mint inserts a row
+- registering the same mint again updates `last_seen_at` without duplication
+- listing other mints returns expected mint URLs
+
+### Wallet tests
+
+#### `recieve_token()`
+
+- when mint is unsupported, `db.register_other_mint()` is called before swap
+- when mint is configured, `db.register_other_mint()` is not called
+
+#### `fetch_all_balances()`
+
+- includes configured mints
+- includes `other_mints` from DB
+- dedupes if a mint exists in both configured and other lists
+- sets `source` correctly
+
+### Regression tests
+
+- existing trusted mint balance reporting remains unchanged
+- `/admin/api/balances` continues to work
+
+---
+
+## Recommended implementation order
+
+1. Add `OtherMint` model to `routstr/core/db.py`
+2. Add Alembic migration for `other_mints`
+3. Add `register_other_mint()` and `list_other_mints()` helpers
+4. Update `recieve_token()` to register unsupported mints
+5. Update `fetch_all_balances()` to union configured + tracked other mints
+6. Add `source` to `BalanceDetail`
+7. Add/adjust tests
+
+---
+
+## Summary
+
+This change solves an operational visibility problem:
+
+- unsupported incoming mints can leave retained change in foreign wallets
+- those funds are currently preserved but not surfaced in balance reporting
+- introducing `other_mints` makes those mints discoverable and auditable
+- expanding `fetch_all_balances()` ensures their balances are visible in admin tooling
+
+Recommended scope for the first pass:
+
+- track unsupported mints in DB
+- include them in balance reporting
+- mark them as `source="other"`
+- do not yet change payout/sweeping behavior

pyproject.toml

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

routstr/algorithm.py

@@ -126,11 +126,24 @@ def create_model_mappings(
         if isinstance(db_id, int):
             providers_by_db_id[db_id] = upstream
 
+    # Group upstreams by URL and keep only the one with the lowest fee for each URL
+    upstreams_by_url: dict[str, list["BaseUpstreamProvider"]] = {}
+    for upstream in upstreams:
+        url = getattr(upstream, "base_url", "")
+        if url not in upstreams_by_url:
+            upstreams_by_url[url] = []
+        upstreams_by_url[url].append(upstream)
+
+    filtered_upstreams: list["BaseUpstreamProvider"] = []
+    for providers in upstreams_by_url.values():
+        best_provider = min(providers, key=lambda p: p.provider_fee)
+        filtered_upstreams.append(best_provider)
+
     # Separate OpenRouter from other providers
     openrouter: "BaseUpstreamProvider" | None = None
     other_upstreams: list["BaseUpstreamProvider"] = []
 
-    for upstream in upstreams:
+    for upstream in filtered_upstreams:
         base_url = getattr(upstream, "base_url", "")
         if base_url == "https://openrouter.ai/api/v1":
             openrouter = upstream
@@ -204,6 +217,10 @@ def create_model_mappings(
                 if prefixed_id not in aliases:
                     aliases.append(prefixed_id)
 
+            # Register forwarded_model_id as a routable alias
+            if model_to_use.forwarded_model_id and model_to_use.forwarded_model_id not in aliases:
+                aliases.append(model_to_use.forwarded_model_id)
+
             # Try to set each alias
             for alias in aliases:
                 _add_candidate(alias, model_to_use, upstream)
@@ -292,6 +309,10 @@ def create_model_mappings(
             if prefixed_id not in aliases:
                 aliases.append(prefixed_id)
 
+        # Register forwarded_model_id as a routable alias
+        if model_to_use.forwarded_model_id and model_to_use.forwarded_model_id not in aliases:
+            aliases.append(model_to_use.forwarded_model_id)
+
         for alias in aliases:
             _add_candidate(alias, model_to_use, upstream_for_override)
         seen_model_provider.add(dedupe_key)

routstr/auth.py

@@ -7,6 +7,7 @@ from datetime import datetime
 from typing import Optional
 
 from fastapi import HTTPException
+from sqlalchemy import case
 from sqlalchemy.exc import IntegrityError
 from sqlmodel import col, select, update
 
@@ -22,6 +23,7 @@ from .payment.cost_calculation import (
 from .wallet import credit_balance, deserialize_token_from_string
 
 logger = get_logger(__name__)
+payments_logger = get_logger("routstr.payments")
 
 # TODO: implement prepaid api key (not like it was before)
 # PREPAID_API_KEY = os.environ.get("PREPAID_API_KEY", None)
@@ -372,12 +374,12 @@ async def validate_bearer_key(
                 },
             )
 
+    key_preview = bearer_key[:10] + "..." if len(bearer_key) > 10 else bearer_key
     logger.error(
-        "Invalid API key format",
+        f"Invalid API key format: preview={key_preview!r} length={len(bearer_key)} "
+        f"(expected 'sk-...' or 'cashu...' token)",
         extra={
-            "key_preview": bearer_key[:10] + "..."
-            if len(bearer_key) > 10
-            else bearer_key,
+            "key_preview": key_preview,
             "key_length": len(bearer_key),
         },
     )
@@ -386,7 +388,7 @@ async def validate_bearer_key(
         status_code=401,
         detail={
             "error": {
-                "message": "Invalid API key",
+                "message": "Invalid API key format. Expected an 'sk-...' API key or a 'cashu...' token.",
                 "type": "invalid_request_error",
                 "code": "invalid_api_key",
             }
@@ -584,6 +586,18 @@ async def pay_for_request(
             "total_requests": billing_key.total_requests,
         },
     )
+    payments_logger.info(
+        "RESERVE",
+        extra={
+            "event": "reserve",
+            "key_hash": key.hashed_key[:8] + "...",
+            "billing_key_hash": billing_key.hashed_key[:8] + "...",
+            "cost_reserved": cost_per_request,
+            "balance": billing_key.balance,
+            "reserved_balance": billing_key.reserved_balance,
+            "total_spent": billing_key.total_spent,
+        },
+    )
 
     return cost_per_request
 
@@ -635,6 +649,17 @@ async def revert_pay_for_request(
     await session.refresh(billing_key)
     if billing_key.hashed_key != key.hashed_key:
         await session.refresh(key)
+    payments_logger.info(
+        "REVERT",
+        extra={
+            "event": "revert",
+            "key_hash": key.hashed_key[:8] + "...",
+            "billing_key_hash": billing_key.hashed_key[:8] + "...",
+            "cost_reverted": cost_per_request,
+            "balance": billing_key.balance,
+            "reserved_balance": billing_key.reserved_balance,
+        },
+    )
     return True
 
 
@@ -728,11 +753,32 @@ async def adjust_payment_for_tokens(
                 },
             )
             # Finalize by releasing reservation and charging max cost
+            if billing_key.reserved_balance < deducted_max_cost:
+                logger.error(
+                    "reserved_balance below deducted_max_cost before MaxCost finalization — clamping to 0",
+                    extra={
+                        "key_hash": key.hashed_key[:8] + "...",
+                        "billing_key_hash": billing_key.hashed_key[:8] + "...",
+                        "reserved_balance": billing_key.reserved_balance,
+                        "deducted_max_cost": deducted_max_cost,
+                        "total_cost_msats": cost.total_msats,
+                        "balance": billing_key.balance,
+                        "total_spent": billing_key.total_spent,
+                        "model": model,
+                    },
+                )
+
+            safe_reserved = case(
+                (col(ApiKey.reserved_balance) >= deducted_max_cost,
+                 col(ApiKey.reserved_balance) - deducted_max_cost),
+                else_=0,
+            )
+
             finalize_stmt = (
                 update(ApiKey)
                 .where(col(ApiKey.hashed_key) == billing_key.hashed_key)
                 .values(
-                    reserved_balance=col(ApiKey.reserved_balance) - deducted_max_cost,
+                    reserved_balance=safe_reserved,
                     balance=col(ApiKey.balance) - cost.total_msats,
                     total_spent=col(ApiKey.total_spent) + cost.total_msats,
                 )
@@ -741,13 +787,17 @@ async def adjust_payment_for_tokens(
 
             # Also update total_spent and reserved_balance on the child key if it's different
             if billing_key.hashed_key != key.hashed_key:
+                child_safe_reserved = case(
+                    (col(ApiKey.reserved_balance) >= deducted_max_cost,
+                     col(ApiKey.reserved_balance) - deducted_max_cost),
+                    else_=0,
+                )
                 child_stmt = (
                     update(ApiKey)
                     .where(col(ApiKey.hashed_key) == key.hashed_key)
                     .values(
                         total_spent=col(ApiKey.total_spent) + cost.total_msats,
-                        reserved_balance=col(ApiKey.reserved_balance)
-                        - deducted_max_cost,
+                        reserved_balance=child_safe_reserved,
                     )
                 )
                 await session.exec(child_stmt)  # type: ignore[call-overload]
@@ -776,10 +826,29 @@ async def adjust_payment_for_tokens(
                         "key_hash": key.hashed_key[:8] + "...",
                         "billing_key_hash": billing_key.hashed_key[:8] + "...",
                         "charged_amount": cost.total_msats,
+                        "input_tokens": cost.input_tokens,
+                        "output_tokens": cost.output_tokens,
                         "new_balance": billing_key.balance,
                         "model": model,
                     },
                 )
+                payments_logger.info(
+                    "FINALIZE",
+                    extra={
+                        "event": "finalize",
+                        "key_hash": key.hashed_key[:8] + "...",
+                        "billing_key_hash": billing_key.hashed_key[:8] + "...",
+                        "model": model,
+                        "cost_reserved": deducted_max_cost,
+                        "cost_charged": cost.total_msats,
+                        "input_tokens": cost.input_tokens,
+                        "output_tokens": cost.output_tokens,
+                        "balance": billing_key.balance,
+                        "reserved_balance": billing_key.reserved_balance,
+                        "total_spent": billing_key.total_spent,
+                        "finalize_type": "max_cost",
+                    },
+                )
             return cost.dict()
 
         case CostData() as cost:
@@ -799,6 +868,8 @@ async def adjust_payment_for_tokens(
                     "cost_difference": cost_difference,
                     "input_msats": cost.input_msats,
                     "output_msats": cost.output_msats,
+                    "input_tokens": cost.input_tokens,
+                    "output_tokens": cost.output_tokens,
                 },
             )
 
@@ -811,12 +882,32 @@ async def adjust_payment_for_tokens(
                         "model": model,
                     },
                 )
+                if billing_key.reserved_balance < deducted_max_cost:
+                    logger.error(
+                        "reserved_balance below deducted_max_cost on exact-cost finalization — clamping to 0",
+                        extra={
+                            "key_hash": key.hashed_key[:8] + "...",
+                            "billing_key_hash": billing_key.hashed_key[:8] + "...",
+                            "reserved_balance": billing_key.reserved_balance,
+                            "deducted_max_cost": deducted_max_cost,
+                            "total_cost_msats": total_cost_msats,
+                            "balance": billing_key.balance,
+                            "total_spent": billing_key.total_spent,
+                            "model": model,
+                        },
+                    )
+
+                exact_safe_reserved = case(
+                    (col(ApiKey.reserved_balance) >= deducted_max_cost,
+                     col(ApiKey.reserved_balance) - deducted_max_cost),
+                    else_=0,
+                )
+
                 finalize_stmt = (
                     update(ApiKey)
                     .where(col(ApiKey.hashed_key) == billing_key.hashed_key)
                     .values(
-                        reserved_balance=col(ApiKey.reserved_balance)
-                        - deducted_max_cost,
+                        reserved_balance=exact_safe_reserved,
                         balance=col(ApiKey.balance) - total_cost_msats,
                         total_spent=col(ApiKey.total_spent) + total_cost_msats,
                     )
@@ -825,13 +916,17 @@ async def adjust_payment_for_tokens(
 
                 # Also update total_spent and reserved_balance on the child key if it's different
                 if billing_key.hashed_key != key.hashed_key:
+                    child_exact_safe_reserved = case(
+                        (col(ApiKey.reserved_balance) >= deducted_max_cost,
+                         col(ApiKey.reserved_balance) - deducted_max_cost),
+                        else_=0,
+                    )
                     child_stmt = (
                         update(ApiKey)
                         .where(col(ApiKey.hashed_key) == key.hashed_key)
                         .values(
                             total_spent=col(ApiKey.total_spent) + total_cost_msats,
-                            reserved_balance=col(ApiKey.reserved_balance)
-                            - deducted_max_cost,
+                            reserved_balance=child_exact_safe_reserved,
                         )
                     )
                     await session.exec(child_stmt)  # type: ignore[call-overload]
@@ -840,44 +935,55 @@ async def adjust_payment_for_tokens(
                 await session.refresh(billing_key)
                 if billing_key.hashed_key != key.hashed_key:
                     await session.refresh(key)
-                return cost.dict()
-
-            # this should never happen why do we handle this???
-            if cost_difference > 0:
-                # Need to charge more than reserved, finalize by releasing reservation and charging total
-                logger.info(
-                    "Additional charge required for token usage",
+                payments_logger.info(
+                    "FINALIZE",
                     extra={
+                        "event": "finalize",
                         "key_hash": key.hashed_key[:8] + "...",
                         "billing_key_hash": billing_key.hashed_key[:8] + "...",
-                        "additional_charge": cost_difference,
-                        "current_balance": billing_key.balance,
-                        "sufficient_balance": billing_key.balance >= cost_difference,
                         "model": model,
+                        "cost_reserved": deducted_max_cost,
+                        "cost_charged": total_cost_msats,
+                        "input_tokens": cost.input_tokens,
+                        "output_tokens": cost.output_tokens,
+                        "balance": billing_key.balance,
+                        "reserved_balance": billing_key.reserved_balance,
+                        "total_spent": billing_key.total_spent,
+                        "finalize_type": "exact",
                     },
                 )
+                return cost.dict()
+
+            # actual cost exceeded discounted reservation (due to tolerance_percentage)
+            if cost_difference > 0:
+                # Always release the reservation and charge min(actual_cost, balance).
+                # Using a CASE expression makes this a single atomic UPDATE — no
+                # multi-level fallback needed and balance can never go negative.
+                chargeable = case(
+                    (col(ApiKey.balance) >= total_cost_msats, total_cost_msats),
+                    else_=col(ApiKey.balance),
+                )
 
                 finalize_stmt = (
                     update(ApiKey)
                     .where(col(ApiKey.hashed_key) == billing_key.hashed_key)
+                    .where(col(ApiKey.reserved_balance) >= deducted_max_cost)
                     .values(
-                        reserved_balance=col(ApiKey.reserved_balance)
-                        - deducted_max_cost,
-                        balance=col(ApiKey.balance) - total_cost_msats,
-                        total_spent=col(ApiKey.total_spent) + total_cost_msats,
+                        reserved_balance=col(ApiKey.reserved_balance) - deducted_max_cost,
+                        balance=col(ApiKey.balance) - chargeable,
+                        total_spent=col(ApiKey.total_spent) + chargeable,
                     )
                 )
                 result = await session.exec(finalize_stmt)  # type: ignore[call-overload]
 
-                # Also update total_spent and reserved_balance on the child key if it's different
                 if billing_key.hashed_key != key.hashed_key:
                     child_stmt = (
                         update(ApiKey)
                         .where(col(ApiKey.hashed_key) == key.hashed_key)
+                        .where(col(ApiKey.reserved_balance) >= deducted_max_cost)
                         .values(
-                            total_spent=col(ApiKey.total_spent) + total_cost_msats,
-                            reserved_balance=col(ApiKey.reserved_balance)
-                            - deducted_max_cost,
+                            reserved_balance=col(ApiKey.reserved_balance) - deducted_max_cost,
+                            total_spent=col(ApiKey.total_spent) + min(billing_key.balance, total_cost_msats),
                         )
                     )
                     await session.exec(child_stmt)  # type: ignore[call-overload]
@@ -885,11 +991,10 @@ async def adjust_payment_for_tokens(
                 await session.commit()
 
                 if result.rowcount:
-                    cost.total_msats = total_cost_msats
                     await session.refresh(billing_key)
                     if billing_key.hashed_key != key.hashed_key:
                         await session.refresh(key)
-
+                    cost.total_msats = total_cost_msats
                     logger.info(
                         "Finalized payment with additional charge",
                         extra={
@@ -900,9 +1005,28 @@ async def adjust_payment_for_tokens(
                             "model": model,
                         },
                     )
+                    payments_logger.info(
+                        "FINALIZE",
+                        extra={
+                            "event": "finalize",
+                            "key_hash": key.hashed_key[:8] + "...",
+                            "billing_key_hash": billing_key.hashed_key[:8] + "...",
+                            "model": model,
+                            "cost_reserved": deducted_max_cost,
+                            "cost_charged": total_cost_msats,
+                            "input_tokens": cost.input_tokens,
+                            "output_tokens": cost.output_tokens,
+                            "balance": billing_key.balance,
+                            "reserved_balance": billing_key.reserved_balance,
+                            "total_spent": billing_key.total_spent,
+                            "finalize_type": "overrun",
+                        },
+                    )
                 else:
+                    # Guard fired: reservation was already released by a concurrent
+                    # finalization for this key. Nothing left to do.
                     logger.warning(
-                        "Failed to finalize additional charge - releasing reservation",
+                        "Finalization skipped - reservation already released",
                         extra={
                             "key_hash": key.hashed_key[:8] + "...",
                             "billing_key_hash": billing_key.hashed_key[:8] + "...",
@@ -910,7 +1034,6 @@ async def adjust_payment_for_tokens(
                             "model": model,
                         },
                     )
-                    await release_reservation_only()
             else:
                 # Refund some of the base cost
                 refund = abs(cost_difference)
@@ -925,12 +1048,33 @@ async def adjust_payment_for_tokens(
                     },
                 )
 
+                if billing_key.reserved_balance < deducted_max_cost:
+                    logger.error(
+                        "reserved_balance below deducted_max_cost on refund finalization — clamping to 0",
+                        extra={
+                            "key_hash": key.hashed_key[:8] + "...",
+                            "billing_key_hash": billing_key.hashed_key[:8] + "...",
+                            "reserved_balance": billing_key.reserved_balance,
+                            "deducted_max_cost": deducted_max_cost,
+                            "total_cost_msats": total_cost_msats,
+                            "refund_amount": refund,
+                            "balance": billing_key.balance,
+                            "total_spent": billing_key.total_spent,
+                            "model": model,
+                        },
+                    )
+
+                refund_safe_reserved = case(
+                    (col(ApiKey.reserved_balance) >= deducted_max_cost,
+                     col(ApiKey.reserved_balance) - deducted_max_cost),
+                    else_=0,
+                )
+
                 refund_stmt = (
                     update(ApiKey)
                     .where(col(ApiKey.hashed_key) == billing_key.hashed_key)
                     .values(
-                        reserved_balance=col(ApiKey.reserved_balance)
-                        - deducted_max_cost,
+                        reserved_balance=refund_safe_reserved,
                         balance=col(ApiKey.balance) - total_cost_msats,
                         total_spent=col(ApiKey.total_spent) + total_cost_msats,
                     )
@@ -939,13 +1083,17 @@ async def adjust_payment_for_tokens(
 
                 # Also update total_spent and reserved_balance on the child key if it's different
                 if billing_key.hashed_key != key.hashed_key:
+                    child_refund_safe_reserved = case(
+                        (col(ApiKey.reserved_balance) >= deducted_max_cost,
+                         col(ApiKey.reserved_balance) - deducted_max_cost),
+                        else_=0,
+                    )
                     child_stmt = (
                         update(ApiKey)
                         .where(col(ApiKey.hashed_key) == key.hashed_key)
                         .values(
                             total_spent=col(ApiKey.total_spent) + total_cost_msats,
-                            reserved_balance=col(ApiKey.reserved_balance)
-                            - deducted_max_cost,
+                            reserved_balance=child_refund_safe_reserved,
                         )
                     )
                     await session.exec(child_stmt)  # type: ignore[call-overload]
@@ -982,6 +1130,24 @@ async def adjust_payment_for_tokens(
                             "model": model,
                         },
                     )
+                    payments_logger.info(
+                        "FINALIZE",
+                        extra={
+                            "event": "finalize",
+                            "key_hash": key.hashed_key[:8] + "...",
+                            "billing_key_hash": billing_key.hashed_key[:8] + "...",
+                            "model": model,
+                            "cost_reserved": deducted_max_cost,
+                            "cost_charged": total_cost_msats,
+                            "refunded": refund,
+                            "input_tokens": cost.input_tokens,
+                            "output_tokens": cost.output_tokens,
+                            "balance": billing_key.balance,
+                            "reserved_balance": billing_key.reserved_balance,
+                            "total_spent": billing_key.total_spent,
+                            "finalize_type": "refund",
+                        },
+                    )
 
             return cost.dict()
 

routstr/balance.py

@@ -5,11 +5,18 @@ from time import monotonic
 from typing import Annotated, NoReturn
 
 from fastapi import APIRouter, Depends, Header, HTTPException
+from fastapi.responses import JSONResponse
 from pydantic import BaseModel
 from sqlmodel import select
 
 from .auth import get_billing_key, validate_bearer_key
-from .core.db import ApiKey, AsyncSession, get_session
+from .core.db import (
+    ApiKey,
+    AsyncSession,
+    CashuTransaction,
+    get_session,
+    store_cashu_transaction,
+)
 from .core.logging import get_logger
 from .core.settings import settings
 from .lightning import lightning_router
@@ -154,9 +161,23 @@ async def topup_wallet_endpoint(
             raise HTTPException(status_code=400, detail="Token already spent")
         elif "invalid" in error_msg.lower() or "decode" in error_msg.lower():
             raise HTTPException(status_code=400, detail="Invalid token format")
+        elif "insufficient" in error_msg.lower() or "melt fee" in error_msg.lower():
+            raise HTTPException(
+                status_code=400,
+                detail=f"Token value is too small to cover swap fees. {error_msg}",
+            )
+        elif "failed to melt" in error_msg.lower():
+            raise HTTPException(
+                status_code=400,
+                detail=f"Failed to swap foreign mint token. {error_msg}",
+            )
         else:
-            raise HTTPException(status_code=400, detail="Failed to redeem token")
-    except Exception:
+            raise HTTPException(status_code=400, detail=f"Failed to redeem token: {error_msg}")
+    except Exception as e:
+        logger.error(
+            "topup_wallet_endpoint: unhandled error",
+            extra={"error": str(e), "error_type": type(e).__name__},
+        )
         raise HTTPException(status_code=500, detail="Internal server error")
     return {"msats": amount_msats}
 
@@ -190,19 +211,57 @@ async def _refund_cache_set(authorization: str, value: dict[str, str]) -> None:
         _refund_cache[key] = (expiry, value)
 
 
-@router.post("/refund")
+@router.post("/refund", response_model=None)
 async def refund_wallet_endpoint(
-    authorization: Annotated[str, Header(...)],
+    authorization: Annotated[str | None, Header()] = None,
+    x_cashu: Annotated[str | None, Header()] = None,
     session: AsyncSession = Depends(get_session),
-) -> dict[str, str]:
-    if not authorization.startswith("Bearer "):
+) -> JSONResponse | dict[str, str]:
+    if x_cashu:
+        # Find the "in" transaction by the original payment token
+        in_tx_result = await session.exec(
+            select(CashuTransaction).where(
+                CashuTransaction.token == x_cashu,
+                CashuTransaction.type == "in",
+            )
+        )
+        in_tx = in_tx_result.first()
+        if in_tx is None:
+            raise HTTPException(status_code=404, detail="Refund not found")
+
+        # Use the request_id to find the associated "out" (refund) transaction
+        if in_tx.request_id is None:
+            raise HTTPException(status_code=404, detail="Refund not found")
+
+        out_tx_result = await session.exec(
+            select(CashuTransaction).where(
+                CashuTransaction.request_id == in_tx.request_id,
+                CashuTransaction.type == "out",
+            )
+        )
+        out_tx = out_tx_result.first()
+        if out_tx is None:
+            raise HTTPException(status_code=404, detail="Refund not found")
+        if out_tx.swept:
+            raise HTTPException(status_code=410, detail="Refund has been swept")
+
+        out_tx.collected = True
+        session.add(out_tx)
+        await session.commit()
+        body: dict[str, str] = {"token": out_tx.token}
+        if out_tx.unit == "sat":
+            body["sats"] = str(out_tx.amount)
+        else:
+            body["msats"] = str(out_tx.amount)
+        return JSONResponse(content=body, headers={"X-Cashu": out_tx.token})
+
+    if authorization is None or not authorization.startswith("Bearer "):
         raise HTTPException(
             status_code=401,
             detail="Invalid authorization. Use 'Bearer <cashu-token>' or 'Bearer <api-key>'",
         )
 
     bearer_value: str = authorization[7:]
-
     key: ApiKey = await validate_bearer_key(bearer_value, session)
 
     if key.total_balance <= 0:
@@ -215,6 +274,12 @@ async def refund_wallet_endpoint(
             detail="Cannot refund child key. Please refund the parent key instead.",
         )
 
+    if key.reserved_balance > 0:
+        raise HTTPException(
+            status_code=400,
+            detail="Cannot refund key. There are ongoing requests for this api key.",
+        )
+
     remaining_balance_msats: int = key.total_balance
 
     if key.refund_currency == "sat":
@@ -251,6 +316,17 @@ async def refund_wallet_endpoint(
         else:
             result["msats"] = str(remaining_balance_msats)
 
+        if "token" in result:
+            logger.info(
+                "refund_wallet_endpoint: cashu token issued",
+                extra={
+                    "path": "/v1/wallet/refund",
+                    "token": result["token"],
+                    "amount": remaining_balance,
+                    "currency": key.refund_currency or "sat",
+                },
+            )
+
     except HTTPException:
         # Re-raise HTTP exceptions (like 400 for balance too small)
         raise
@@ -269,11 +345,34 @@ async def refund_wallet_endpoint(
 
     await _refund_cache_set(bearer_value, result)
 
+    previous_reserved_balance = key.reserved_balance
     key.balance = 0
     key.reserved_balance = 0
     session.add(key)
     await session.commit()
 
+    if "token" in result:
+        try:
+            await store_cashu_transaction(
+                token=result["token"],
+                amount=remaining_balance,
+                unit=key.refund_currency or "sat",
+                mint_url=key.refund_mint_url,
+                typ="out",
+                collected=False,
+                source="apikey",
+            )
+        except Exception:
+            pass  # store_cashu_transaction already logs
+
+    logger.info(
+        "refund_wallet_endpoint: refund successful",
+        extra={
+            "refunded_msats": remaining_balance_msats,
+            "previous_reserved_balance": previous_reserved_balance,
+        },
+    )
+
     return result
 
 
@@ -401,6 +500,27 @@ async def reset_child_key_spent(
     return {"success": True, "message": "Child key balance reset successfully."}
 
 
+@router.get("/cashu-refund/{payment_token_hash}")
+async def get_cashu_refund(
+    payment_token_hash: str,
+    session: AsyncSession = Depends(get_session),
+) -> dict:
+    """Retrieve a stored Cashu refund token by the hash of the original payment token."""
+    result = await session.get(CashuTransaction, payment_token_hash)
+    if result is None:
+        raise HTTPException(status_code=404, detail="Refund not found")
+    if result.swept:
+        raise HTTPException(status_code=410, detail="Refund has been swept")
+    result.collected = True
+    session.add(result)
+    await session.commit()
+    return {
+        "refund_token": result.token,
+        "amount": result.amount,
+        "unit": result.unit,
+    }
+
+
 @router.api_route(
     "/{path:path}",
     methods=["GET", "POST", "PUT", "DELETE"],

routstr/core/admin.py

@@ -1,3 +1,4 @@
+import asyncio
 import json
 import secrets
 from datetime import datetime, timezone
@@ -16,7 +17,13 @@ from ..wallet import (
     send_token,
     slow_filter_spend_proofs,
 )
-from .db import ApiKey, ModelRow, UpstreamProviderRow, create_session
+from .db import (
+    ApiKey,
+    CashuTransaction,
+    ModelRow,
+    UpstreamProviderRow,
+    create_session,
+)
 from .log_manager import log_manager
 from .logging import get_logger
 from .settings import SettingsService, settings
@@ -27,6 +34,8 @@ admin_router = APIRouter(prefix="/admin", include_in_schema=False)
 
 admin_sessions: dict[str, int] = {}
 ADMIN_SESSION_DURATION = 3600
+# Usage analytics remain queryable up to 12 months.
+MAX_USAGE_ANALYTICS_HOURS = 365 * 24
 
 
 def require_admin_api(request: Request) -> None:
@@ -286,6 +295,7 @@ class ModelCreate(BaseModel):
     canonical_slug: str | None = None
     alias_ids: list[str] | None = None
     enabled: bool = True
+    forwarded_model_id: str | None = None
 
 
 @admin_router.post(
@@ -330,6 +340,7 @@ async def upsert_provider_model(
                 json.dumps(payload.alias_ids) if payload.alias_ids else None
             )
             existing_row.enabled = payload.enabled
+            existing_row.forwarded_model_id = payload.forwarded_model_id or payload.id
 
             session.add(existing_row)
             await session.commit()
@@ -362,6 +373,7 @@ async def upsert_provider_model(
                 ),
                 upstream_provider_id=provider_id,
                 enabled=payload.enabled,
+                forwarded_model_id=payload.forwarded_model_id or payload.id,
             )
             session.add(row)
             await session.commit()
@@ -747,7 +759,9 @@ async def get_provider_models(provider_id: int) -> dict[str, object]:
                 )
 
         db_model_ids = {model.id for model in db_models}
-        filtered_remote_models = [m for m in upstream_models if m.id not in db_model_ids]
+        filtered_remote_models = [
+            m for m in upstream_models if m.id not in db_model_ids
+        ]
 
         return {
             "provider": {
@@ -865,12 +879,6 @@ async def initiate_provider_topup(
         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}",
@@ -884,39 +892,69 @@ async def initiate_provider_topup(
 
                 async with httpx.AsyncClient() as client:
                     clean_url = provider.base_url.rstrip("/")
-                    # Proxy the request to upstream Routstr
-                    # Use the actual API key from the database
-                    resp = await client.post(
-                        f"{clean_url}/v1/balance/lightning/invoice",
-                        json={
-                            "amount_sats": int(payload.amount),
-                            "purpose": "topup",
-                            "api_key": provider.api_key,
-                        },
-                        headers={"Authorization": f"Bearer {provider.api_key}"} if provider.api_key else {},
+                    request_json = {
+                        "amount_sats": int(payload.amount),
+                        "purpose": "topup",
+                        "api_key": provider.api_key,
+                    }
+                    headers = (
+                        {"Authorization": f"Bearer {provider.api_key}"}
+                        if provider.api_key
+                        else {}
                     )
 
-                    if resp.status_code == 200:
-                        data = resp.json()
-                        return {
-                            "ok": True,
-                            "topup_data": {
-                                "payment_request": data.get("bolt11"),
-                                "invoice_id": data.get("invoice_id"),
-                                "status": "pending",
-                            },
-                        }
-                    else:
-                        logger.error(f"Upstream topup request failed: {resp.text}")
-                        # Check if it's JSON error
-                        try:
-                            error_detail = resp.json()
-                        except Exception:
-                            error_detail = resp.text
-                        raise HTTPException(
-                            status_code=resp.status_code, detail=error_detail
+                    last_status_code = 500
+                    last_error_detail: object = "Failed to create top-up invoice"
+
+                    # Some upstream Routstr nodes fail the first invoice request after warm-up
+                    # and succeed immediately on retry. Retry once here so the UI stays single-click.
+                    for attempt in range(2):
+                        resp = await client.post(
+                            f"{clean_url}/v1/balance/lightning/invoice",
+                            json=request_json,
+                            headers=headers,
                         )
 
+                        if resp.status_code == 200:
+                            data = resp.json()
+                            return {
+                                "ok": True,
+                                "topup_data": {
+                                    "payment_request": data.get("bolt11"),
+                                    "invoice_id": data.get("invoice_id"),
+                                    "status": "pending",
+                                },
+                            }
+
+                        logger.error(
+                            f"Upstream topup request failed: {resp.text}",
+                            extra={
+                                "provider_id": provider_id,
+                                "attempt": attempt + 1,
+                                "status_code": resp.status_code,
+                            },
+                        )
+                        try:
+                            last_error_detail = resp.json()
+                        except Exception:
+                            last_error_detail = resp.text
+                        last_status_code = resp.status_code
+
+                        if resp.status_code < 500 or attempt == 1:
+                            break
+
+                        await asyncio.sleep(0.2)
+
+                    raise HTTPException(
+                        status_code=last_status_code, detail=last_error_detail
+                    )
+
+            upstream_instance = _instantiate_provider(provider)
+            if not upstream_instance:
+                raise HTTPException(
+                    status_code=400, detail="Could not instantiate provider"
+                )
+
             topup_data = await upstream_instance.initiate_topup(payload.amount)
 
             logger.info(
@@ -977,7 +1015,9 @@ async def check_topup_status(provider_id: int, invoice_id: str) -> dict[str, obj
                 clean_url = provider.base_url.rstrip("/")
                 resp = await client.get(
                     f"{clean_url}/v1/balance/lightning/invoice/{invoice_id}/status",
-                    headers={"Authorization": f"Bearer {provider.api_key}"} if provider.api_key else {},
+                    headers={"Authorization": f"Bearer {provider.api_key}"}
+                    if provider.api_key
+                    else {},
                 )
                 if resp.status_code == 200:
                     status_data = resp.json()
@@ -1025,15 +1065,46 @@ async def get_provider_balance(provider_id: int) -> dict[str, object]:
         if provider.provider_type == "routstr":
             import httpx
 
-            async with httpx.AsyncClient() as client:
-                clean_url = provider.base_url.rstrip("/")
-                headers = {}
-                if provider.api_key:
-                    headers["Authorization"] = f"Bearer {provider.api_key}"
-                resp = await client.get(
-                    f"{clean_url}/v1/balance/info",
-                    headers=headers,
-                )
+            clean_url = provider.base_url.rstrip("/")
+            headers = {}
+            if provider.api_key:
+                headers["Authorization"] = f"Bearer {provider.api_key}"
+
+            async with httpx.AsyncClient(timeout=10.0) as client:
+                try:
+                    resp = await client.get(
+                        f"{clean_url}/v1/balance/info",
+                        headers=headers,
+                    )
+                except httpx.TimeoutException as exc:
+                    logger.error(
+                        "Timed out fetching Routstr provider balance",
+                        extra={
+                            "provider_id": provider_id,
+                            "base_url": clean_url,
+                            "upstream_url": f"{clean_url}/v1/balance/info",
+                            "error": str(exc),
+                        },
+                    )
+                    raise HTTPException(
+                        status_code=504,
+                        detail="Timed out contacting upstream Routstr provider",
+                    ) from exc
+                except httpx.RequestError as exc:
+                    logger.error(
+                        "Failed to fetch Routstr provider balance",
+                        extra={
+                            "provider_id": provider_id,
+                            "base_url": clean_url,
+                            "upstream_url": f"{clean_url}/v1/balance/info",
+                            "error": str(exc),
+                        },
+                    )
+                    raise HTTPException(
+                        status_code=502,
+                        detail="Failed to contact upstream Routstr provider",
+                    ) from exc
+
                 if resp.status_code == 200:
                     data = resp.json()
                     # Return balance in sats
@@ -1082,18 +1153,55 @@ async def get_usage_metrics(
         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"
+        default=24,
+        ge=1,
+        le=MAX_USAGE_ANALYTICS_HOURS,
+        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/dashboard", dependencies=[Depends(require_admin_api)])
+async def get_usage_dashboard(
+    request: Request,
+    interval: int = Query(
+        default=15, ge=1, le=1440, description="Time interval in minutes"
+    ),
+    hours: int = Query(
+        default=24,
+        ge=1,
+        le=MAX_USAGE_ANALYTICS_HOURS,
+        description="Hours of history to analyze",
+    ),
+    error_limit: int = Query(
+        default=100, ge=1, le=1000, description="Maximum number of errors to return"
+    ),
+    model_limit: int = Query(
+        default=20, ge=1, le=100, description="Maximum number of models to return"
+    ),
+) -> dict:
+    """
+    Get all dashboard analytics in one request.
+    This runs one combined aggregation pass and avoids repeated scans.
+    """
+    return log_manager.get_usage_dashboard(
+        interval=interval,
+        hours=hours,
+        error_limit=error_limit,
+        model_limit=model_limit,
+    )
+
+
 @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"
+        default=24,
+        ge=1,
+        le=MAX_USAGE_ANALYTICS_HOURS,
+        description="Hours of history to analyze",
     ),
 ) -> dict:
     """Get summary statistics for the specified time period."""
@@ -1104,7 +1212,10 @@ async def get_usage_summary(
 async def get_error_details(
     request: Request,
     hours: int = Query(
-        default=24, ge=1, le=168, description="Hours of history to analyze"
+        default=24,
+        ge=1,
+        le=MAX_USAGE_ANALYTICS_HOURS,
+        description="Hours of history to analyze",
     ),
     limit: int = Query(
         default=100, ge=1, le=1000, description="Maximum number of errors to return"
@@ -1120,7 +1231,10 @@ async def get_error_details(
 async def get_revenue_by_model(
     request: Request,
     hours: int = Query(
-        default=24, ge=1, le=168, description="Hours of history to analyze"
+        default=24,
+        ge=1,
+        le=MAX_USAGE_ANALYTICS_HOURS,
+        description="Hours of history to analyze",
     ),
     limit: int = Query(
         default=20, ge=1, le=100, description="Maximum number of models to return"
@@ -1216,6 +1330,49 @@ async def get_log_dates_api(request: Request) -> dict[str, object]:
     return {"dates": dates}
 
 
+@admin_router.get("/api/transactions", dependencies=[Depends(require_admin_api)])
+async def get_transactions_api(
+    type: str | None = None,
+    status: str | None = None,
+    search: str | None = None,
+    limit: int = 100,
+) -> dict:
+    async with create_session() as session:
+        from sqlmodel import col
+
+        stmt = select(CashuTransaction)
+        if type:
+            stmt = stmt.where(CashuTransaction.type == type)
+        if status:
+            if status == "collected":
+                stmt = stmt.where(CashuTransaction.collected == True)  # noqa: E712
+            elif status == "swept":
+                stmt = stmt.where(CashuTransaction.swept == True)  # noqa: E712
+            elif status == "pending":
+                stmt = stmt.where(
+                    CashuTransaction.collected == False,  # noqa: E712
+                    CashuTransaction.swept == False,  # noqa: E712
+                )
+
+        if search:
+            search_pattern = f"%{search}%"
+            stmt = stmt.where(
+                (col(CashuTransaction.id).like(search_pattern))
+                | (col(CashuTransaction.token).like(search_pattern))
+                | (col(CashuTransaction.request_id).like(search_pattern))
+            )
+
+        stmt = stmt.order_by(col(CashuTransaction.created_at).desc()).limit(limit)
+
+        results = await session.exec(stmt)
+        transactions = results.all()
+
+        return {
+            "transactions": [tx.dict() for tx in transactions],
+            "total": len(transactions),
+        }
+
+
 @admin_router.post(
     "/api/upstream-providers/{provider_id}/routstr/refund",
     dependencies=[Depends(require_admin_api)],

routstr/core/db.py

@@ -2,12 +2,15 @@ import os
 import pathlib
 import sqlite3
 import time
+import uuid
 from contextlib import asynccontextmanager
 from typing import AsyncGenerator
 
 from alembic import command
 from alembic.config import Config
+from alembic.util.exc import CommandError
 from sqlalchemy import UniqueConstraint
+from sqlalchemy.exc import OperationalError
 from sqlalchemy.ext.asyncio.engine import create_async_engine
 from sqlmodel import Field, Relationship, SQLModel, func, select, update
 from sqlmodel.ext.asyncio.session import AsyncSession
@@ -103,6 +106,10 @@ class ModelRow(SQLModel, table=True):  # type: ignore
         default=None, description="JSON array of model alias IDs"
     )
     enabled: bool = Field(default=True, description="Whether this model is enabled")
+    forwarded_model_id: str | None = Field(
+        default=None,
+        description="Model ID to use when forwarding requests to upstream provider. Defaults to id if not set.",
+    )
     upstream_provider: "UpstreamProviderRow" = Relationship(back_populates="models")
 
 
@@ -128,6 +135,65 @@ class LightningInvoice(SQLModel, table=True):  # type: ignore
     paid_at: int | None = Field(default=None, description="Unix timestamp when paid")
 
 
+class CashuTransaction(SQLModel, table=True):  # type: ignore
+    __tablename__ = "cashu_transactions"
+
+    id: str = Field(
+        primary_key=True,
+        default_factory=lambda: uuid.uuid4().hex,
+        description="Unique transaction identifier",
+    )
+    token: str = Field(description="Serialized Cashu token")
+    amount: int = Field(description="Amount in the token's unit")
+    unit: str = Field(description="Token unit (sat or msat)")
+    mint_url: str | None = Field(default=None, description="Mint URL for the token")
+    type: str = Field(default="out", description="Transaction type: in or out")
+    request_id: str | None = Field(default=None, description="Associated request ID")
+    created_at: int = Field(
+        default_factory=lambda: int(time.time()),
+        description="Unix timestamp",
+    )
+    collected: bool = Field(default=False)
+    swept: bool = Field(default=False)
+    source: str = Field(
+        default="x-cashu",
+        description="Payment source: x-cashu or apikey",
+    )
+
+
+async def store_cashu_transaction(
+    token: str,
+    amount: int,
+    unit: str,
+    mint_url: str | None = None,
+    typ: str = "out",
+    request_id: str | None = None,
+    collected: bool = False,
+    created_at: int | None = None,
+    source: str = "x-cashu",
+) -> None:
+    try:
+        async with create_session() as session:
+            tx = CashuTransaction(
+                token=token,
+                amount=amount,
+                unit=unit,
+                mint_url=mint_url,
+                type=typ,
+                request_id=request_id,
+                collected=collected,
+                created_at=created_at or int(time.time()),
+                source=source,
+            )
+            session.add(tx)
+            await session.commit()
+    except Exception as e:
+        logger.warning(
+            f"Failed to store cashu transaction: {e} (type={typ})",
+            extra={"error": str(e), "type": typ},
+        )
+
+
 class UpstreamProviderRow(SQLModel, table=True):  # type: ignore
     __tablename__ = "upstream_providers"
     __table_args__ = (
@@ -227,6 +293,17 @@ def fix_cashu_migrations() -> None:
             logger.warning(f"Could not check/fix Cashu database {db_file}: {e}")
 
 
+def _clear_alembic_version() -> None:
+    """Clear the alembic_version table so stamp/upgrade can proceed."""
+    sync_url = DATABASE_URL.replace("+aiosqlite", "")
+    from sqlalchemy import create_engine, text
+
+    eng = create_engine(sync_url)
+    with eng.begin() as conn:
+        conn.execute(text("DELETE FROM alembic_version"))
+    eng.dispose()
+
+
 def run_migrations() -> None:
     """Run Alembic migrations programmatically."""
     try:
@@ -248,8 +325,30 @@ def run_migrations() -> None:
         # Set the database URL in the config
         alembic_cfg.set_main_option("sqlalchemy.url", DATABASE_URL)
 
-        # Run migrations to the latest revision
-        command.upgrade(alembic_cfg, "head")
+        try:
+            command.upgrade(alembic_cfg, "head")
+        except CommandError as e:
+            if "Can't locate revision" in str(e):
+                logger.warning(
+                    "Database stamped with unknown revision (likely from another branch). "
+                    "Re-stamping to current head.",
+                    extra={"error": str(e)},
+                )
+                _clear_alembic_version()
+                command.stamp(alembic_cfg, "head")
+            else:
+                raise
+        except OperationalError as e:
+            if "duplicate column name" in str(e).lower():
+                logger.warning(
+                    "Migration hit a column that already exists (likely added via "
+                    "create_all on another branch). Stamping to current head.",
+                    extra={"error": str(e)},
+                )
+                _clear_alembic_version()
+                command.stamp(alembic_cfg, "head")
+            else:
+                raise
 
         logger.info("Database migrations completed successfully")
 

routstr/core/logging.py

@@ -3,36 +3,38 @@ 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).
+The following log messages are parsed by the usage tracking system
+(routstr/core/usage_analytics_store.py and routstr/core/log_manager.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
+2. "Calculated token-based cost" (INFO) - routstr/auth.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
+   - The 'token_cost', 'model', 'input_tokens', and 'output_tokens' fields are extracted for dashboard metrics
 
-3. "Payment processed successfully" (INFO) - routstr/auth.py
+3. "Max cost payment finalized" (INFO) - routstr/auth.py
+   - Used as the successful completion fallback when token usage is unavailable
+   - The 'charged_amount', 'model', 'input_tokens', and 'output_tokens' fields are extracted for dashboard metrics
+
+4. "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
+5. "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
+6. 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()
+- routstr/core/usage_analytics_store.py
+- routstr/core/log_manager.py
 """
 
 import logging.config

routstr/core/main.py

@@ -12,13 +12,17 @@ from starlette.exceptions import HTTPException
 
 from ..auth import periodic_key_reset
 from ..balance import balance_router, deprecated_wallet_router
-from ..nostr import announce_provider, providers_cache_refresher
+from ..nostr import (
+    announce_provider,
+    providers_cache_refresher,
+    publish_usage_analytics,
+)
 from ..nostr.discovery import providers_router
 from ..payment.models import models_router, update_sats_pricing
 from ..payment.price import update_prices_periodically
 from ..proxy import initialize_upstreams, proxy_router, refresh_model_maps_periodically
 from ..upstream.auto_topup import periodic_auto_topup
-from ..wallet import periodic_payout
+from ..wallet import periodic_payout, periodic_refund_sweep
 from .admin import admin_router
 from .db import create_session, init_db, run_migrations
 from .exceptions import general_exception_handler, http_exception_handler
@@ -32,9 +36,9 @@ setup_logging()
 logger = get_logger(__name__)
 
 if os.getenv("VERSION_SUFFIX") is not None:
-    __version__ = f"0.3.0-{os.getenv('VERSION_SUFFIX')}"
+    __version__ = f"0.4.1-{os.getenv('VERSION_SUFFIX')}"
 else:
-    __version__ = "0.3.0"
+    __version__ = "0.4.1"
 
 
 @asynccontextmanager
@@ -45,11 +49,13 @@ async def lifespan(_: FastAPI) -> AsyncGenerator[None, None]:
     pricing_task = None
     payout_task = None
     nip91_task = None
+    analytics_task = None
     providers_task = None
     models_refresh_task = None
     model_maps_refresh_task = None
     key_reset_task = None
     auto_topup_task = None
+    refund_sweep_task = None
 
     try:
         # Run database migrations on startup
@@ -103,10 +109,12 @@ async def lifespan(_: FastAPI) -> AsyncGenerator[None, None]:
         payout_task = asyncio.create_task(periodic_payout())
         if global_settings.nsec:
             nip91_task = asyncio.create_task(announce_provider())
+        analytics_task = asyncio.create_task(publish_usage_analytics())
         if global_settings.providers_refresh_interval_seconds > 0:
             providers_task = asyncio.create_task(providers_cache_refresher())
         key_reset_task = asyncio.create_task(periodic_key_reset())
         auto_topup_task = asyncio.create_task(periodic_auto_topup())
+        refund_sweep_task = asyncio.create_task(periodic_refund_sweep())
 
         yield
 
@@ -130,6 +138,8 @@ async def lifespan(_: FastAPI) -> AsyncGenerator[None, None]:
             payout_task.cancel()
         if nip91_task is not None:
             nip91_task.cancel()
+        if analytics_task is not None:
+            analytics_task.cancel()
         if providers_task is not None:
             providers_task.cancel()
         if models_refresh_task is not None:
@@ -140,6 +150,8 @@ async def lifespan(_: FastAPI) -> AsyncGenerator[None, None]:
             key_reset_task.cancel()
         if auto_topup_task is not None:
             auto_topup_task.cancel()
+        if refund_sweep_task is not None:
+            refund_sweep_task.cancel()
 
         try:
             tasks_to_wait = []
@@ -151,6 +163,8 @@ async def lifespan(_: FastAPI) -> AsyncGenerator[None, None]:
                 tasks_to_wait.append(payout_task)
             if nip91_task is not None:
                 tasks_to_wait.append(nip91_task)
+            if analytics_task is not None:
+                tasks_to_wait.append(analytics_task)
             if providers_task is not None:
                 tasks_to_wait.append(providers_task)
             if models_refresh_task is not None:
@@ -161,6 +175,8 @@ async def lifespan(_: FastAPI) -> AsyncGenerator[None, None]:
                 tasks_to_wait.append(key_reset_task)
             if auto_topup_task is not None:
                 tasks_to_wait.append(auto_topup_task)
+            if refund_sweep_task is not None:
+                tasks_to_wait.append(refund_sweep_task)
 
             if tasks_to_wait:
                 await asyncio.gather(*tasks_to_wait, return_exceptions=True)
@@ -181,7 +197,7 @@ app.add_middleware(
     allow_credentials=True,
     allow_methods=["*"],
     allow_headers=["*"],
-    expose_headers=["x-routstr-request-id"],
+    expose_headers=["x-routstr-request-id", "x-cashu"],
 )
 
 # Add logging middleware

routstr/core/middleware.py

@@ -38,11 +38,6 @@ class LoggingMiddleware(BaseHTTPMiddleware):
             except Exception:
                 pass
 
-        # Extract request info
-        client_host = None
-        if request.client:
-            client_host = request.client.host
-
         # Log incoming request
         logger.info(
             "Incoming request",
@@ -51,7 +46,6 @@ class LoggingMiddleware(BaseHTTPMiddleware):
                 "method": request.method,
                 "path": request.url.path,
                 "query_params": dict(request.query_params),
-                "client_host": client_host,
                 "headers": {
                     k: v
                     for k, v in request.headers.items()
@@ -100,7 +94,6 @@ class LoggingMiddleware(BaseHTTPMiddleware):
                     "path": request.url.path,
                     "status_code": response.status_code,
                     "duration_ms": round(duration * 1000, 2),
-                    "client_host": client_host,
                 },
             )
             if hasattr(response, "headers"):
@@ -120,7 +113,6 @@ class LoggingMiddleware(BaseHTTPMiddleware):
                     "method": request.method,
                     "path": request.url.path,
                     "duration_ms": round(duration * 1000, 2),
-                    "client_host": client_host,
                     "error": str(e),
                     "error_type": type(e).__name__,
                 },

routstr/core/settings.py

@@ -74,6 +74,7 @@ class Settings(BaseSettings):
     enable_pricing_refresh: bool = Field(default=True, env="ENABLE_PRICING_REFRESH")
     enable_models_refresh: bool = Field(default=True, env="ENABLE_MODELS_REFRESH")
     refund_cache_ttl_seconds: int = Field(default=3600, env="REFUND_CACHE_TTL_SECONDS")
+    refund_sweep_ttl_seconds: int = Field(default=604800, env="REFUND_SWEEP_TTL_SECONDS")
 
     # Logging
     log_level: str = Field(default="INFO", env="LOG_LEVEL")
@@ -92,6 +93,20 @@ class Settings(BaseSettings):
 
     # Discovery
     relays: list[str] = Field(default_factory=list, env="RELAYS")
+    enable_analytics_sharing: bool = Field(
+        default=True, env="ENABLE_ANALYTICS_SHARING"
+    )
+
+def _normalize_settings_data(data: dict[str, Any]) -> dict[str, Any]:
+    """Discard unknown keys from persisted settings."""
+    normalized: dict[str, Any] = {}
+    known_fields = Settings.__fields__
+
+    for key, value in data.items():
+        if key in known_fields:
+            normalized[key] = value
+
+    return normalized
 
 
 def _compute_primary_mint(cashu_mints: list[str]) -> str:
@@ -231,16 +246,21 @@ class SettingsService:
 
             db_id, db_data, _updated_at = row
             try:
-                db_json = (
+                db_json_raw = (
                     json.loads(db_data) if isinstance(db_data, str) else dict(db_data)
                 )
+                if not isinstance(db_json_raw, dict):
+                    db_json_raw = {}
             except Exception:
-                db_json = {}
+                db_json_raw = {}
+            db_json = _normalize_settings_data(db_json_raw)
 
+            valid_fields = set(env_resolved.dict().keys())
             merged_dict: dict[str, Any] = dict(env_resolved.dict())
             merged_dict.update(
-                {k: v for k, v in db_json.items() if v not in (None, "", [], {})}
+                {k: v for k, v in db_json.items() if v not in (None, "", [], {}) and k in valid_fields}
             )
+            merged_dict = Settings(**merged_dict).dict()
 
             # Ensure primary_mint is consistent with cashu_mints if not explicitly set
             if not merged_dict.get("primary_mint"):
@@ -248,7 +268,7 @@ class SettingsService:
                     merged_dict.get("cashu_mints", [])
                 )
 
-            if any(k not in db_json for k in merged_dict.keys()):
+            if db_json_raw != merged_dict:
                 await db_session.exec(  # type: ignore
                     text(
                         "UPDATE settings SET data = :data, updated_at = :updated_at WHERE id = 1"
@@ -271,7 +291,7 @@ class SettingsService:
     ) -> Settings:
         async with cls._lock:
             current = cls.get()
-            candidate_dict = {**current.dict(), **partial}
+            candidate_dict = {**current.dict(), **_normalize_settings_data(partial)}
             candidate = Settings(**candidate_dict)
             from sqlmodel import text
 
@@ -305,8 +325,10 @@ class SettingsService:
                 raise RuntimeError("Settings row missing")
             (data_str,) = row
             data = json.loads(data_str) if isinstance(data_str, str) else dict(data_str)
+            valid_fields = set(settings.dict().keys())
             # Update in-place
             for k, v in data.items():
-                setattr(settings, k, v)
+                if k in valid_fields:
+                    setattr(settings, k, v)
             cls._current = settings
             return settings

routstr/nostr/__init__.py

@@ -1,4 +1,5 @@
+from .analytics import publish_usage_analytics
 from .discovery import providers_cache_refresher
 from .listing import announce_provider
 
-__all__ = ["providers_cache_refresher", "announce_provider"]
+__all__ = ["providers_cache_refresher", "announce_provider", "publish_usage_analytics"]

routstr/nostr/analytics.py

@@ -0,0 +1,419 @@
+#!/usr/bin/env python3
+"""
+Nostr usage analytics publisher.
+Publishes a single replaceable analytics snapshot for each provider.
+"""
+
+from __future__ import annotations
+
+import asyncio
+import hashlib
+import json
+import time
+from typing import Any
+
+from nostr.event import Event
+from nostr.key import PrivateKey
+
+from ..core import get_logger
+from ..core.log_manager import log_manager
+from ..core.settings import settings
+from .listing import nsec_to_keypair, publish_to_relay
+
+logger = get_logger(__name__)
+
+ANALYTICS_KIND = 38422
+ANALYTICS_SCHEMA = "routstr.analytics.snapshot.v1"
+DEFAULT_RELAYS = [
+    "wss://relay.nostr.band",
+    "wss://relay.damus.io",
+    "wss://relay.routstr.com",
+    "wss://nos.lol",
+]
+PUBLISH_INTERVAL_SECONDS = 15 * 60
+DISABLED_POLL_SECONDS = 60
+DASHBOARD_WINDOW_HOURS = 24
+DASHBOARD_INTERVAL_MINUTES = 60
+MODEL_LIMIT = 20
+WINDOW_DEFINITIONS: tuple[tuple[str, int, int], ...] = (
+    ("24h", 24, 60),
+    ("7d", 7 * 24, 6 * 60),
+    ("30d", 30 * 24, 24 * 60),
+    ("3m", 90 * 24, 24 * 60),
+    ("1y", 365 * 24, 7 * 24 * 60),
+)
+
+
+def _event_to_dict(ev: Event) -> dict[str, Any]:
+    return {
+        "id": ev.id,
+        "pubkey": ev.public_key,
+        "created_at": ev.created_at,
+        "kind": int(ev.kind) if not isinstance(ev.kind, int) else ev.kind,
+        "tags": ev.tags,
+        "content": ev.content,
+        "sig": ev.signature,
+    }
+
+
+def _resolve_provider_id(public_key_hex: str) -> str:
+    explicit_provider_id = (settings.provider_id or "").strip()
+    if explicit_provider_id:
+        return explicit_provider_id
+    return public_key_hex[:12]
+
+
+def _resolve_endpoint_urls() -> list[str]:
+    urls: list[str] = []
+    http_url = (settings.http_url or "").strip()
+    onion_url = (settings.onion_url or "").strip()
+
+    if http_url and http_url != "http://localhost:8000":
+        urls.append(http_url)
+
+    if onion_url:
+        if onion_url.endswith(".onion") and not (
+            onion_url.startswith("http://") or onion_url.startswith("https://")
+        ):
+            onion_url = f"http://{onion_url}"
+        urls.append(onion_url)
+
+    return urls
+
+
+def _resolve_relays() -> list[str]:
+    configured = [url.strip() for url in settings.relays if url.strip()]
+    return configured if configured else list(DEFAULT_RELAYS)
+
+
+def _to_int(value: Any) -> int:
+    if isinstance(value, bool):
+        return int(value)
+    if isinstance(value, int):
+        return value
+    if isinstance(value, float):
+        return int(value)
+    if isinstance(value, str):
+        try:
+            return int(float(value))
+        except ValueError:
+            return 0
+    return 0
+
+
+def _to_float(value: Any) -> float:
+    if isinstance(value, bool):
+        return float(int(value))
+    if isinstance(value, (int, float)):
+        return float(value)
+    if isinstance(value, str):
+        try:
+            return float(value)
+        except ValueError:
+            return 0.0
+    return 0.0
+
+
+def _aggregate_top_model_usage(
+    model_usage_mix: dict[str, Any],
+) -> tuple[list[dict[str, Any]], dict[str, Any]]:
+    top_models_raw = model_usage_mix.get("top_models", [])
+    mix_metrics_raw = model_usage_mix.get("metrics", [])
+
+    top_models = [model for model in top_models_raw if isinstance(model, str)]
+    metrics = [row for row in mix_metrics_raw if isinstance(row, dict)]
+
+    model_totals: dict[str, dict[str, float | int]] = {
+        model: {
+            "successful_requests": 0,
+            "revenue_msats": 0.0,
+            "total_tokens": 0,
+        }
+        for model in top_models
+    }
+    others = {
+        "successful_requests": 0,
+        "revenue_msats": 0.0,
+        "total_tokens": 0,
+    }
+
+    for metric in metrics:
+        model_counts = metric.get("model_counts", {})
+        model_revenue = metric.get("model_revenue_msats", {})
+        model_tokens = metric.get("model_tokens", {})
+
+        if isinstance(model_counts, dict):
+            for model, count in model_counts.items():
+                if model in model_totals:
+                    model_totals[model]["successful_requests"] += _to_int(count)
+
+        if isinstance(model_revenue, dict):
+            for model, amount in model_revenue.items():
+                if model in model_totals:
+                    model_totals[model]["revenue_msats"] += _to_float(amount)
+
+        if isinstance(model_tokens, dict):
+            for model, token_count in model_tokens.items():
+                if model in model_totals:
+                    model_totals[model]["total_tokens"] += _to_int(token_count)
+
+        others["successful_requests"] += _to_int(metric.get("others", 0))
+        others["revenue_msats"] += _to_float(metric.get("others_revenue_msats", 0.0))
+        others["total_tokens"] += _to_int(metric.get("others_tokens", 0))
+
+    model_rows = [
+        {
+            "model": model,
+            "successful_requests": int(values["successful_requests"]),
+            "revenue_msats": float(values["revenue_msats"]),
+            "total_tokens": int(values["total_tokens"]),
+        }
+        for model, values in model_totals.items()
+    ]
+    model_rows.sort(
+        key=lambda row: _to_int(row.get("successful_requests", 0)),
+        reverse=True,
+    )
+
+    return model_rows, others
+
+
+def _build_summary_payload(summary: dict[str, Any]) -> dict[str, Any]:
+    return {
+        "total_requests": _to_int(summary.get("total_requests", 0)),
+        "successful_chat_completions": _to_int(
+            summary.get("successful_chat_completions", 0)
+        ),
+        "failed_requests": _to_int(summary.get("failed_requests", 0)),
+        "success_rate": _to_float(summary.get("success_rate", 0.0)),
+        "unique_models_count": _to_int(summary.get("unique_models_count", 0)),
+        "input_tokens": _to_int(summary.get("input_tokens", 0)),
+        "output_tokens": _to_int(summary.get("output_tokens", 0)),
+        "total_tokens": _to_int(summary.get("total_tokens", 0)),
+        "revenue_msats": _to_float(summary.get("revenue_msats", 0.0)),
+        "refunds_msats": _to_float(summary.get("refunds_msats", 0.0)),
+        "net_revenue_msats": _to_float(summary.get("net_revenue_msats", 0.0)),
+        "revenue_sats": _to_float(summary.get("revenue_sats", 0.0)),
+        "refunds_sats": _to_float(summary.get("refunds_sats", 0.0)),
+        "net_revenue_sats": _to_float(summary.get("net_revenue_sats", 0.0)),
+    }
+
+
+def _build_window_payload(
+    *,
+    hours: int,
+    interval_minutes: int,
+    model_limit: int,
+) -> dict[str, Any]:
+    dashboard = log_manager.get_usage_dashboard(
+        interval=interval_minutes,
+        hours=hours,
+        error_limit=1,
+        model_limit=model_limit,
+    )
+
+    summary = dashboard.get("summary", {})
+    model_usage_mix = dashboard.get("model_usage_mix", {})
+
+    summary_payload = _build_summary_payload(summary if isinstance(summary, dict) else {})
+    usage_mix_payload = model_usage_mix if isinstance(model_usage_mix, dict) else {}
+    top_model_usage, others_usage = _aggregate_top_model_usage(usage_mix_payload)
+
+    return {
+        "window_hours": hours,
+        "interval_minutes": interval_minutes,
+        "summary": summary_payload,
+        "model_usage_mix": usage_mix_payload,
+        "top_model_usage": top_model_usage,
+        "others_usage": others_usage,
+    }
+
+
+def build_stats_snapshot_payload(
+    provider_id: str,
+    *,
+    public_key_hex: str,
+    generated_at: int,
+    window_hours: int = DASHBOARD_WINDOW_HOURS,
+    interval_minutes: int = DASHBOARD_INTERVAL_MINUTES,
+    model_limit: int = MODEL_LIMIT,
+) -> dict[str, Any]:
+    _ = (window_hours, interval_minutes)
+    windows: dict[str, dict[str, Any]] = {}
+    for key, hours, window_interval_minutes in WINDOW_DEFINITIONS:
+        windows[key] = _build_window_payload(
+            hours=hours,
+            interval_minutes=window_interval_minutes,
+            model_limit=model_limit,
+        )
+
+    primary_window = windows.get("24h", {})
+    summary_payload = (
+        primary_window.get("summary", {})
+        if isinstance(primary_window.get("summary", {}), dict)
+        else {}
+    )
+    usage_mix_payload = (
+        primary_window.get("model_usage_mix", {})
+        if isinstance(primary_window.get("model_usage_mix", {}), dict)
+        else {}
+    )
+    top_model_usage = (
+        primary_window.get("top_model_usage", [])
+        if isinstance(primary_window.get("top_model_usage", []), list)
+        else []
+    )
+    others_usage = (
+        primary_window.get("others_usage", {})
+        if isinstance(primary_window.get("others_usage", {}), dict)
+        else {}
+    )
+
+    return {
+        "schema": ANALYTICS_SCHEMA,
+        "generated_at": generated_at,
+        "provider_id": provider_id,
+        "pubkey": public_key_hex,
+        "npub": settings.npub or "",
+        "endpoint_urls": _resolve_endpoint_urls(),
+        "window_hours": DASHBOARD_WINDOW_HOURS,
+        "interval_minutes": DASHBOARD_INTERVAL_MINUTES,
+        "summary": summary_payload,
+        "model_usage_mix": usage_mix_payload,
+        "top_model_usage": top_model_usage,
+        "others_usage": others_usage,
+        "windows": windows,
+    }
+
+
+def create_stats_snapshot_event(
+    private_key_hex: str,
+    provider_id: str,
+    payload_json: str,
+    *,
+    d_tag: str,
+) -> dict[str, Any]:
+    private_key = PrivateKey(bytes.fromhex(private_key_hex))
+    tags = [
+        ["d", d_tag],
+        ["provider", provider_id],
+        ["schema", ANALYTICS_SCHEMA],
+    ]
+
+    event = Event(
+        public_key=private_key.public_key.hex(),
+        content=payload_json,
+        kind=ANALYTICS_KIND,
+        tags=tags,
+    )
+    private_key.sign_event(event)
+    return _event_to_dict(event)
+
+
+def _fingerprint_payload(payload: dict[str, Any]) -> str:
+    normalized = dict(payload)
+    # Ignore generated timestamp for semantic dedupe.
+    normalized.pop("generated_at", None)
+    payload_json = json.dumps(normalized, separators=(",", ":"), sort_keys=True)
+    return hashlib.sha256(payload_json.encode("utf-8")).hexdigest()
+
+
+async def publish_usage_analytics() -> None:
+    last_payload_hash: str | None = None
+
+    parsed_nsec: str | None = None
+    private_key_hex: str | None = None
+    public_key_hex: str | None = None
+    provider_id: str | None = None
+    warned_missing_nsec = False
+
+    logger.info("Usage analytics sharing task started")
+
+    while True:
+        try:
+            if not settings.enable_analytics_sharing:
+                await asyncio.sleep(DISABLED_POLL_SECONDS)
+                continue
+
+            nsec = (settings.nsec or "").strip()
+            if not nsec:
+                if not warned_missing_nsec:
+                    logger.info("NSEC is not configured; skipping analytics sharing to Nostr")
+                    warned_missing_nsec = True
+                await asyncio.sleep(DISABLED_POLL_SECONDS)
+                continue
+
+            warned_missing_nsec = False
+            if nsec != parsed_nsec or private_key_hex is None or public_key_hex is None:
+                keypair = nsec_to_keypair(nsec)
+                if not keypair:
+                    logger.error("Invalid NSEC; analytics sharing is paused")
+                    await asyncio.sleep(DISABLED_POLL_SECONDS)
+                    continue
+                private_key_hex, public_key_hex = keypair
+                parsed_nsec = nsec
+                provider_id = _resolve_provider_id(public_key_hex)
+                last_payload_hash = None
+
+            if private_key_hex is None or public_key_hex is None:
+                await asyncio.sleep(DISABLED_POLL_SECONDS)
+                continue
+
+            relay_urls = _resolve_relays()
+            if not relay_urls:
+                logger.warning("No Nostr relays configured; analytics sharing skipped")
+                await asyncio.sleep(DISABLED_POLL_SECONDS)
+                continue
+
+            resolved_provider_id = provider_id or _resolve_provider_id(public_key_hex)
+            now_ts = int(time.time())
+            payload = build_stats_snapshot_payload(
+                resolved_provider_id,
+                public_key_hex=public_key_hex,
+                generated_at=now_ts,
+            )
+
+            payload_hash = _fingerprint_payload(payload)
+            if last_payload_hash == payload_hash:
+                await asyncio.sleep(PUBLISH_INTERVAL_SECONDS)
+                continue
+
+            payload_json = json.dumps(payload, separators=(",", ":"), sort_keys=True)
+            d_tag = f"{resolved_provider_id}:stats"
+            event = create_stats_snapshot_event(
+                private_key_hex,
+                resolved_provider_id,
+                payload_json,
+                d_tag=d_tag,
+            )
+
+            success_count = 0
+            for relay_url in relay_urls:
+                if await publish_to_relay(relay_url, event):
+                    success_count += 1
+
+            if success_count > 0:
+                last_payload_hash = payload_hash
+
+            logger.info(
+                "Published analytics snapshot (success=%s/%s provider=%s)",
+                success_count,
+                len(relay_urls),
+                resolved_provider_id,
+                extra={
+                    "relay_success_count": success_count,
+                    "relay_total": len(relay_urls),
+                    "provider_id": resolved_provider_id,
+                },
+            )
+            await asyncio.sleep(PUBLISH_INTERVAL_SECONDS)
+
+        except asyncio.CancelledError:
+            logger.info("Usage analytics sharing task cancelled")
+            break
+        except Exception as e:
+            logger.error(
+                "Usage analytics sharing error",
+                extra={"error": str(e), "error_type": type(e).__name__},
+            )
+            await asyncio.sleep(DISABLED_POLL_SECONDS)

routstr/payment/cost_calculation.py

@@ -16,6 +16,8 @@ class CostData(BaseModel):
     output_msats: int
     total_msats: int
     total_usd: float = 0.0
+    input_tokens: int = 0
+    output_tokens: int = 0
 
 
 class MaxCostData(CostData):
@@ -63,17 +65,64 @@ async def calculate_cost(  # todo: can be sync
             output_msats=0,
             total_msats=0,
             total_usd=0.0,
+            input_tokens=0,
+            output_tokens=0,
         )
 
     usage_data = response_data["usage"]
 
-    usd_cost = 0.0
+    def parse_token_count(value: object) -> int:
+        if isinstance(value, bool):
+            return 0
+        if isinstance(value, int):
+            return max(0, value)
+        if isinstance(value, float):
+            return max(0, int(value))
+        if isinstance(value, str):
+            try:
+                return max(0, int(float(value)))
+            except ValueError:
+                return 0
+        return 0
+
+    input_tokens = parse_token_count(usage_data.get("prompt_tokens", 0))
+    output_tokens = parse_token_count(usage_data.get("completion_tokens", 0))
+    input_tokens = (
+        input_tokens
+        if input_tokens != 0
+        else parse_token_count(usage_data.get("input_tokens", 0))
+    )
+    output_tokens = (
+        output_tokens
+        if output_tokens != 0
+        else parse_token_count(usage_data.get("output_tokens", 0))
+    )
+    input_tokens = (
+        input_tokens
+        if input_tokens != 0
+        else parse_token_count(response_data.get("usage", {}).get("input_tokens", 0))
+    )
+    output_tokens = (
+        output_tokens
+        if output_tokens != 0
+        else parse_token_count(response_data.get("usage", {}).get("output_tokens", 0))
+    )
+
+    usd_cost = 0.0
+    input_usd = 0.0
+    output_usd = 0.0
 
-    # Prioritize cost_details.upstream_inference_cost
     if "cost_details" in usage_data:
         usd_cost = float(
             usage_data["cost_details"].get("upstream_inference_cost", 0) or 0
         )
+        input_usd = float(
+            usage_data["cost_details"].get("upstream_inference_prompt_cost", 0) or 0
+        )
+        output_usd = float(
+            usage_data["cost_details"].get("upstream_inference_completions_cost", 0)
+            or 0
+        )
 
     # Fallback to cost field if upstream_inference_cost is 0
     if usd_cost == 0 and "cost" in usage_data:
@@ -82,12 +131,34 @@ async def calculate_cost(  # todo: can be sync
         except Exception:
             pass
 
+    MSATS_PER_1K_INPUT_TOKENS: float = (
+        float(settings.fixed_per_1k_input_tokens) * 1000.0
+    )
+    MSATS_PER_1K_OUTPUT_TOKENS: float = (
+        float(settings.fixed_per_1k_output_tokens) * 1000.0
+    )
+
     if usd_cost > 0:
         try:
             sats_per_usd = 1.0 / sats_usd_price()
             cost_in_sats = usd_cost * sats_per_usd
             cost_in_msats = math.ceil(cost_in_sats * 1000)
 
+            input_msats = 0
+            output_msats = 0
+
+            if input_usd > 0 or output_usd > 0:
+                input_msats = int((input_usd * sats_per_usd) * 1000)
+                output_msats = int((output_usd * sats_per_usd) * 1000)
+            else:
+                total_tokens = input_tokens + output_tokens
+                if total_tokens > 0:
+                    input_ratio = input_tokens / total_tokens
+                    input_msats = int(cost_in_msats * input_ratio)
+                    output_msats = cost_in_msats - input_msats
+                else:
+                    output_msats = cost_in_msats
+
             logger.info(
                 "Using cost from usage data/details",
                 extra={
@@ -99,11 +170,13 @@ async def calculate_cost(  # todo: can be sync
             )
 
             return CostData(
-                base_msats=-1,
-                input_msats=-1,  # Cost field doesn't break down by token type
-                output_msats=-1,
+                base_msats=0,
+                input_msats=input_msats,
+                output_msats=output_msats,
                 total_msats=cost_in_msats,
                 total_usd=usd_cost,
+                input_tokens=input_tokens,
+                output_tokens=output_tokens,
             )
         except Exception as e:
             logger.warning(
@@ -116,13 +189,6 @@ async def calculate_cost(  # todo: can be sync
             )
             # Fall through to token-based calculation
 
-    MSATS_PER_1K_INPUT_TOKENS: float = (
-        float(settings.fixed_per_1k_input_tokens) * 1000.0
-    )
-    MSATS_PER_1K_OUTPUT_TOKENS: float = (
-        float(settings.fixed_per_1k_output_tokens) * 1000.0
-    )
-
     if not settings.fixed_pricing:
         response_model = response_data.get("model", "")
         logger.debug(
@@ -184,35 +250,14 @@ async def calculate_cost(  # todo: can be sync
             input_msats=0,
             output_msats=0,
             total_msats=max_cost,
+            input_tokens=input_tokens,
+            output_tokens=output_tokens,
         )
 
-    input_tokens = usage_data.get("prompt_tokens", 0)
-    output_tokens = usage_data.get("completion_tokens", 0)
+    calc_input_msats = round(input_tokens / 1000 * MSATS_PER_1K_INPUT_TOKENS, 3)
 
-    # added for response api
-    input_tokens = (
-        input_tokens if input_tokens != 0 else usage_data.get("input_tokens", 0)
-    )
-    output_tokens = (
-        output_tokens if output_tokens != 0 else usage_data.get("output_tokens", 0)
-    )
-
-    # added for response api
-    input_tokens = (
-        input_tokens
-        if input_tokens != 0
-        else response_data.get("usage", {}).get("input_tokens", 0)
-    )
-    output_tokens = (
-        output_tokens
-        if output_tokens != 0
-        else response_data.get("usage", {}).get("output_tokens", 0)
-    )
-
-    input_msats = round(input_tokens / 1000 * MSATS_PER_1K_INPUT_TOKENS, 3)
-
-    output_msats = round(output_tokens / 1000 * MSATS_PER_1K_OUTPUT_TOKENS, 3)
-    token_based_cost = math.ceil(input_msats + output_msats)
+    calc_output_msats = round(output_tokens / 1000 * MSATS_PER_1K_OUTPUT_TOKENS, 3)
+    token_based_cost = math.ceil(calc_input_msats + calc_output_msats)
     total_usd = (token_based_cost / 1000.0) * sats_usd_price()
 
     logger.info(
@@ -220,8 +265,8 @@ async def calculate_cost(  # todo: can be sync
         extra={
             "input_tokens": input_tokens,
             "output_tokens": output_tokens,
-            "input_cost_msats": input_msats,
-            "output_cost_msats": output_msats,
+            "input_cost_msats": calc_input_msats,
+            "output_cost_msats": calc_output_msats,
             "total_cost_msats": token_based_cost,
             "total_usd": total_usd,
             "model": response_data.get("model", "unknown"),
@@ -230,8 +275,10 @@ async def calculate_cost(  # todo: can be sync
 
     return CostData(
         base_msats=0,
-        input_msats=int(input_msats),
-        output_msats=int(output_msats),
+        input_msats=int(calc_input_msats),
+        output_msats=int(calc_output_msats),
         total_msats=token_based_cost,
         total_usd=total_usd,
+        input_tokens=input_tokens,
+        output_tokens=output_tokens,
     )

routstr/payment/models.py

@@ -60,6 +60,7 @@ class Model(BaseModel):
     upstream_provider_id: int | str | None = None
     canonical_slug: str | None = None
     alias_ids: list[str] | None = None
+    forwarded_model_id: str | None = None
 
     def __hash__(self) -> int:
         return hash(self.id)
@@ -177,6 +178,7 @@ def _row_to_model(
         upstream_provider_id=row.upstream_provider_id,
         canonical_slug=getattr(row, "canonical_slug", None),
         alias_ids=json.loads(row.alias_ids) if row.alias_ids else None,
+        forwarded_model_id=getattr(row, "forwarded_model_id", None) or row.id,
     )
 
     if apply_provider_fee:
@@ -329,6 +331,7 @@ def _update_model_sats_pricing(model: Model, sats_to_usd: float) -> Model:
             upstream_provider_id=model.upstream_provider_id,
             canonical_slug=model.canonical_slug,
             alias_ids=model.alias_ids,
+            forwarded_model_id=model.forwarded_model_id,
         )
     except Exception as e:
         logger.error(
@@ -403,10 +406,18 @@ async def update_sats_pricing() -> None:
 
 
 @models_router.get("/v1/models")
-@models_router.get("/models", include_in_schema=False)
+@models_router.get("/v1/models/", include_in_schema=False)
+@models_router.get("/models")
+@models_router.get("/models/", include_in_schema=False)
 async def models(session: AsyncSession = Depends(get_session)) -> dict:
     """Get all available models from all providers with database overrides applied."""
     from ..proxy import get_unique_models
 
     items = get_unique_models()
-    return {"data": items}
+    data = []
+    for model in items:
+        m = model.dict()
+        if model.forwarded_model_id:
+            m["id"] = model.forwarded_model_id
+        data.append(m)
+    return {"data": data}

routstr/proxy.py

@@ -207,7 +207,7 @@ async def proxy(
 
     elif auth := headers.get("authorization", None):
         key = await get_bearer_token_key(
-            headers, path, session, auth, max_cost_for_model
+            headers, path, session, auth, max_cost_for_model, model_id
         )
 
     else:
@@ -387,7 +387,12 @@ async def proxy(
 
 
 async def get_bearer_token_key(
-    headers: dict, path: str, session: AsyncSession, auth: str, min_cost: int = 0
+    headers: dict,
+    path: str,
+    session: AsyncSession,
+    auth: str,
+    min_cost: int = 0,
+    model_id: str = "unknown",
 ) -> ApiKey:
     """Handle bearer token authentication proxy requests."""
     parts = auth.split()
@@ -455,15 +460,16 @@ async def get_bearer_token_key(
         )
         return key
     except Exception as e:
+        key_preview = bearer_key[:20] + "..." if len(bearer_key) > 20 else bearer_key
         logger.error(
-            "Bearer token validation failed",
+            f"Bearer token validation failed: {type(e).__name__}: {e} path={path} model={model_id!r} min_cost={min_cost} key={key_preview!r}",
             extra={
                 "error": str(e),
                 "error_type": type(e).__name__,
                 "path": path,
-                "bearer_key_preview": bearer_key[:20] + "..."
-                if len(bearer_key) > 20
-                else bearer_key,
+                "model_id": model_id,
+                "min_cost_msat": min_cost,
+                "bearer_key_preview": key_preview,
             },
         )
         raise

routstr/upstream/base.py

@@ -1,6 +1,7 @@
 from __future__ import annotations
 
 import asyncio
+import hashlib
 import json
 import re
 import traceback
@@ -15,7 +16,13 @@ from sqlmodel import select
 
 from ..auth import adjust_payment_for_tokens
 from ..core import get_logger
-from ..core.db import ApiKey, AsyncSession, UpstreamProviderRow, create_session
+from ..core.db import (
+    ApiKey,
+    AsyncSession,
+    UpstreamProviderRow,
+    create_session,
+    store_cashu_transaction,
+)
 from ..core.exceptions import UpstreamError
 from ..payment.cost_calculation import (
     CostData,
@@ -203,9 +210,7 @@ class BaseUpstreamProvider:
             return path.replace("v1/", "", 1)
         return path
 
-    def get_request_base_url(
-        self, path: str, model_obj: Model | None = None
-    ) -> str:
+    def get_request_base_url(self, path: str, model_obj: Model | None = None) -> str:
         """Get upstream base URL used when building forwarding URL."""
         return self.base_url.rstrip("/")
 
@@ -447,6 +452,7 @@ class BaseUpstreamProvider:
         key: ApiKey,
         max_cost_for_model: int,
         background_tasks: BackgroundTasks,
+        requested_model: str | None = None,
     ) -> StreamingResponse:
         """Handle streaming chat completion responses with token usage tracking and cost adjustment.
 
@@ -515,11 +521,15 @@ class BaseUpstreamProvider:
                             if isinstance(obj, dict):
                                 if obj.get("model"):
                                     last_model_seen = str(obj.get("model"))
+                                if requested_model:
+                                    obj["model"] = requested_model
 
                                 if isinstance(obj.get("usage"), dict):
                                     # Hold this chunk back to merge cost later
                                     usage_chunk_data = obj
                                     continue
+                                yield b"data: " + json.dumps(obj).encode() + b"\n\n"
+                                continue
                         except json.JSONDecodeError:
                             pass
 
@@ -615,6 +625,7 @@ class BaseUpstreamProvider:
         key: ApiKey,
         session: AsyncSession,
         deducted_max_cost: int,
+        requested_model: str | None = None,
     ) -> Response:
         """Handle non-streaming chat completion responses with token usage tracking and cost adjustment.
 
@@ -650,6 +661,9 @@ class BaseUpstreamProvider:
                 },
             )
 
+            if requested_model:
+                response_json["model"] = requested_model
+
             cost_data = await adjust_payment_for_tokens(
                 key, response_json, session, deducted_max_cost
             )
@@ -709,6 +723,8 @@ class BaseUpstreamProvider:
                 if k.lower() in allowed_headers
             }
 
+            if requested_model:
+                response_json["model"] = requested_model
             return Response(
                 content=json.dumps(response_json).encode(),
                 status_code=response.status_code,
@@ -739,7 +755,11 @@ class BaseUpstreamProvider:
             raise
 
     async def handle_streaming_responses_completion(
-        self, response: httpx.Response, key: ApiKey, max_cost_for_model: int
+        self,
+        response: httpx.Response,
+        key: ApiKey,
+        max_cost_for_model: int,
+        requested_model: str | None = None,
     ) -> StreamingResponse:
         """Handle streaming Responses API responses with token usage tracking and cost adjustment.
 
@@ -809,6 +829,8 @@ class BaseUpstreamProvider:
                             if isinstance(obj, dict):
                                 if obj.get("model"):
                                     last_model_seen = str(obj.get("model"))
+                                if requested_model:
+                                    obj["model"] = requested_model
 
                                 # Track reasoning tokens for Responses API
                                 if usage := obj.get("usage", {}):
@@ -929,6 +951,7 @@ class BaseUpstreamProvider:
         key: ApiKey,
         session: AsyncSession,
         deducted_max_cost: int,
+        requested_model: str | None = None,
     ) -> Response:
         """Handle non-streaming Responses API responses with token usage tracking and cost adjustment.
 
@@ -967,6 +990,9 @@ class BaseUpstreamProvider:
                 },
             )
 
+            if requested_model:
+                response_json["model"] = requested_model
+
             cost_data = await adjust_payment_for_tokens(
                 key, response_json, session, deducted_max_cost
             )
@@ -1026,6 +1052,8 @@ class BaseUpstreamProvider:
                 if k.lower() in allowed_headers
             }
 
+            if requested_model:
+                response_json["model"] = requested_model
             return Response(
                 content=json.dumps(response_json).encode(),
                 status_code=response.status_code,
@@ -1093,6 +1121,174 @@ class BaseUpstreamProvider:
                     },
                 )
 
+    async def handle_streaming_messages_completion(
+        self, response: httpx.Response, key: ApiKey, max_cost_for_model: int
+    ) -> StreamingResponse:
+        async def stream_with_cost(
+            max_cost_for_model: int,
+        ) -> AsyncGenerator[bytes, None]:
+            stored_chunks: list[bytes] = []
+            usage_finalized: bool = False
+            last_model_seen: str | None = None
+            input_tokens: int = 0
+            output_tokens: int = 0
+
+            async def finalize_without_usage() -> bytes | None:
+                nonlocal usage_finalized
+                if usage_finalized:
+                    return None
+                async with create_session() as new_session:
+                    fresh_key = await new_session.get(key.__class__, key.hashed_key)
+                    if not fresh_key:
+                        usage_finalized = True
+                        return None
+                    try:
+                        fallback: dict = {
+                            "model": last_model_seen or "unknown",
+                            "usage": None,
+                        }
+                        cost_data = await adjust_payment_for_tokens(
+                            fresh_key, fallback, new_session, max_cost_for_model
+                        )
+                        usage_finalized = True
+                        return f"event: cost\ndata: {json.dumps({'cost': cost_data})}\n\n".encode()
+                    except Exception:
+                        usage_finalized = True
+                        return None
+
+            try:
+                async for chunk in response.aiter_bytes():
+                    stored_chunks.append(chunk)
+                    try:
+                        decoded_chunk = chunk.decode("utf-8", errors="ignore")
+                        for line in decoded_chunk.split("\n"):
+                            if line.startswith("data: "):
+                                try:
+                                    data = json.loads(line[6:])
+                                    if isinstance(data, dict):
+                                        msg = data.get("message", {})
+                                        if msg and msg.get("model"):
+                                            last_model_seen = str(msg.get("model"))
+
+                                        if usage := msg.get("usage"):
+                                            input_tokens += usage.get("input_tokens", 0)
+                                            output_tokens += usage.get(
+                                                "output_tokens", 0
+                                            )
+
+                                        if usage := data.get("usage"):
+                                            input_tokens += usage.get("input_tokens", 0)
+                                            output_tokens += usage.get(
+                                                "output_tokens", 0
+                                            )
+                                except json.JSONDecodeError:
+                                    pass
+                    except Exception:
+                        pass
+
+                    yield chunk
+
+                usage_data = {
+                    "input_tokens": input_tokens,
+                    "output_tokens": output_tokens,
+                }
+
+                if input_tokens > 0 or output_tokens > 0:
+                    async with create_session() as new_session:
+                        fresh_key = await new_session.get(key.__class__, key.hashed_key)
+                        if fresh_key:
+                            try:
+                                combined_data = {
+                                    "model": last_model_seen or "unknown",
+                                    "usage": usage_data,
+                                }
+                                cost_data = await adjust_payment_for_tokens(
+                                    fresh_key,
+                                    combined_data,
+                                    new_session,
+                                    max_cost_for_model,
+                                )
+                                usage_finalized = True
+                                yield f"event: cost\ndata: {json.dumps({'cost': cost_data})}\n\n".encode()
+                            except Exception:
+                                pass
+
+                if not usage_finalized:
+                    maybe_cost_event = await finalize_without_usage()
+                    if maybe_cost_event is not None:
+                        yield maybe_cost_event
+
+            except httpx.ReadError:
+                if not usage_finalized:
+                    await finalize_without_usage()
+                # Upstream dropped the connection mid-stream; response already started, swallow silently
+            except Exception:
+                if not usage_finalized:
+                    await finalize_without_usage()
+                raise
+            finally:
+                if not usage_finalized:
+                    await finalize_without_usage()
+
+        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=response_headers,
+        )
+
+    async def handle_non_streaming_messages_completion(
+        self,
+        response: httpx.Response,
+        key: ApiKey,
+        session: AsyncSession,
+        deducted_max_cost: int,
+        path: str,
+    ) -> Response:
+        try:
+            content = await response.aread()
+            response_json = json.loads(content)
+
+            if path.endswith("count_tokens") and "usage" not in response_json:
+                input_tokens = response_json.get("input_tokens", 0)
+                response_json["usage"] = {"input_tokens": input_tokens}
+
+            cost_data = await adjust_payment_for_tokens(
+                key, response_json, session, deducted_max_cost
+            )
+            response_json["cost"] = cost_data
+
+            allowed_headers = {
+                "content-type",
+                "cache-control",
+                "date",
+                "vary",
+                "access-control-allow-origin",
+                "access-control-allow-methods",
+                "access-control-allow-headers",
+                "access-control-allow-credentials",
+                "access-control-expose-headers",
+                "access-control-max-age",
+            }
+
+            response_headers = {
+                k: v
+                for k, v in response.headers.items()
+                if k.lower() in allowed_headers
+            }
+
+            return Response(
+                content=json.dumps(response_json).encode(),
+                status_code=response.status_code,
+                headers=response_headers,
+                media_type="application/json",
+            )
+        except Exception:
+            raise
+
     async def forward_request(
         self,
         request: Request,
@@ -1121,6 +1317,10 @@ class BaseUpstreamProvider:
         path = self.normalize_request_path(path, model_obj)
         url = self.build_request_url(path, model_obj)
 
+        original_model_id = (
+            (model_obj.forwarded_model_id or model_obj.id) if model_obj else None
+        )
+
         transformed_body = self.prepare_request_body(request_body, model_obj)
 
         logger.info(
@@ -1192,7 +1392,54 @@ class BaseUpstreamProvider:
                     await client.aclose()
                 return mapped_error
 
-            if path.endswith("chat/completions") or path.endswith("embeddings"):
+            if (
+                path.endswith("chat/completions")
+                or path.endswith("embeddings")
+                or path.endswith("messages")
+                or path.endswith("messages/count_tokens")
+            ):
+                if path.endswith("messages"):
+                    client_wants_streaming = False
+                    if request_body:
+                        try:
+                            request_data = json.loads(request_body)
+                            client_wants_streaming = request_data.get("stream", False)
+                        except json.JSONDecodeError:
+                            pass
+
+                    content_type = response.headers.get("content-type", "")
+                    upstream_is_streaming = "text/event-stream" in content_type
+                    is_streaming = client_wants_streaming and upstream_is_streaming
+
+                    if is_streaming and response.status_code == 200:
+                        result = await self.handle_streaming_messages_completion(
+                            response, key, max_cost_for_model
+                        )
+                        background_tasks = BackgroundTasks()
+                        background_tasks.add_task(response.aclose)
+                        background_tasks.add_task(client.aclose)
+                        result.background = background_tasks
+                        return result
+
+                    if response.status_code == 200:
+                        try:
+                            return await self.handle_non_streaming_messages_completion(
+                                response, key, session, max_cost_for_model, path
+                            )
+                        finally:
+                            await response.aclose()
+                            await client.aclose()
+
+                if path.endswith("messages/count_tokens"):
+                    if response.status_code == 200:
+                        try:
+                            return await self.handle_non_streaming_messages_completion(
+                                response, key, session, max_cost_for_model, path
+                            )
+                        finally:
+                            await response.aclose()
+                            await client.aclose()
+
                 if path.endswith("chat/completions"):
                     client_wants_streaming = False
                     if request_body:
@@ -1232,7 +1479,11 @@ class BaseUpstreamProvider:
                         background_tasks.add_task(response.aclose)
                         background_tasks.add_task(client.aclose)
                         result = await self.handle_streaming_chat_completion(
-                            response, key, max_cost_for_model, background_tasks
+                            response,
+                            key,
+                            max_cost_for_model,
+                            background_tasks,
+                            requested_model=original_model_id,
                         )
                         result.background = background_tasks
                         return result
@@ -1241,7 +1492,11 @@ class BaseUpstreamProvider:
                 if response.status_code == 200:
                     try:
                         return await self.handle_non_streaming_chat_completion(
-                            response, key, session, max_cost_for_model
+                            response,
+                            key,
+                            session,
+                            max_cost_for_model,
+                            requested_model=original_model_id,
                         )
                     finally:
                         await response.aclose()
@@ -1325,9 +1580,7 @@ class BaseUpstreamProvider:
             )
 
             # Don't revert here — proxy.py owns payment revert to avoid double-revert
-            raise UpstreamError(
-                "An unexpected server error occurred", status_code=500
-            )
+            raise UpstreamError("An unexpected server error occurred", status_code=500)
 
     async def forward_responses_request(
         self,
@@ -1358,6 +1611,10 @@ class BaseUpstreamProvider:
         path = self.normalize_request_path(path, model_obj)
         url = self.build_request_url(path, model_obj)
 
+        original_model_id = (
+            (model_obj.forwarded_model_id or model_obj.id) if model_obj else None
+        )
+
         transformed_body = self.prepare_responses_request_body(request_body, model_obj)
 
         logger.info(
@@ -1444,7 +1701,10 @@ class BaseUpstreamProvider:
 
                 if is_streaming and response.status_code == 200:
                     result = await self.handle_streaming_responses_completion(
-                        response, key, max_cost_for_model
+                        response,
+                        key,
+                        max_cost_for_model,
+                        requested_model=original_model_id,
                     )
                     background_tasks = BackgroundTasks()
                     background_tasks.add_task(response.aclose)
@@ -1455,7 +1715,11 @@ class BaseUpstreamProvider:
                 if response.status_code == 200:
                     try:
                         return await self.handle_non_streaming_responses_completion(
-                            response, key, session, max_cost_for_model
+                            response,
+                            key,
+                            session,
+                            max_cost_for_model,
+                            requested_model=original_model_id,
                         )
                     finally:
                         await response.aclose()
@@ -1539,9 +1803,7 @@ class BaseUpstreamProvider:
             )
 
             # Don't revert here — proxy.py owns payment revert to avoid double-revert
-            raise UpstreamError(
-                "An unexpected server error occurred", status_code=500
-            )
+            raise UpstreamError("An unexpected server error occurred", status_code=500)
 
     async def forward_get_request(
         self,
@@ -1679,13 +1941,22 @@ class BaseUpstreamProvider:
                     )
         return None
 
-    async def send_refund(self, amount: int, unit: str, mint: str | None = None) -> str:
+    async def send_refund(
+        self,
+        amount: int,
+        unit: str,
+        mint: str | None = None,
+        payment_token_hash: str | None = None,
+        request_id: str | None = None,
+    ) -> str:
         """Create and send a refund token to the user.
 
         Args:
             amount: Refund amount
             unit: Unit of the refund (sat or msat)
             mint: Optional mint URL for the refund token
+            payment_token_hash: Optional SHA-256 hash of the original payment token for storage
+            request_id: Optional HTTP request ID for tracking
 
         Returns:
             Refund token string
@@ -1715,6 +1986,18 @@ class BaseUpstreamProvider:
                     },
                 )
 
+                try:
+                    await store_cashu_transaction(
+                        token=refund_token,
+                        amount=amount,
+                        unit=unit,
+                        mint_url=mint,
+                        typ="out",
+                        request_id=request_id,
+                    )
+                except Exception:
+                    pass  # store_cashu_transaction already logs
+
                 return refund_token
             except Exception as e:
                 last_exception = e
@@ -1764,6 +2047,8 @@ class BaseUpstreamProvider:
         unit: str,
         max_cost_for_model: int,
         mint: str | None = None,
+        payment_token_hash: str | None = None,
+        request_id: str | None = None,
     ) -> StreamingResponse:
         """Handle streaming response for X-Cashu payment, calculating refund if needed.
 
@@ -1773,6 +2058,7 @@ class BaseUpstreamProvider:
             amount: Payment amount received
             unit: Payment unit (sat or msat)
             max_cost_for_model: Maximum cost for the model
+            payment_token_hash: Optional hash of original payment token for refund storage
 
         Returns:
             StreamingResponse with refund token in header if applicable
@@ -1800,11 +2086,25 @@ class BaseUpstreamProvider:
             if line.startswith("data: "):
                 try:
                     data_json = json.loads(line[6:])
+                    # OpenAI format: usage and model at top level
                     if "usage" in data_json:
                         usage_data = data_json["usage"]
-                        model = data_json.get("model")
+                        model = data_json.get("model") or model
                     elif "model" in data_json and not model:
                         model = data_json["model"]
+                    # Anthropic format: model and input usage inside "message" key
+                    if "message" in data_json:
+                        msg = data_json["message"]
+                        if not model and msg.get("model"):
+                            model = msg["model"]
+                        if msg.get("usage") and not usage_data:
+                            usage_data = msg["usage"]
+                        elif msg.get("usage") and usage_data:
+                            # Merge: message_start has input_tokens, message_delta has output_tokens
+                            merged = dict(usage_data)
+                            for k, v in msg["usage"].items():
+                                merged[k] = merged.get(k, 0) + v
+                            usage_data = merged
                 except json.JSONDecodeError:
                     continue
 
@@ -1844,7 +2144,13 @@ class BaseUpstreamProvider:
                             },
                         )
 
-                        refund_token = await self.send_refund(refund_amount, unit, mint)
+                        refund_token = await self.send_refund(
+                            refund_amount,
+                            unit,
+                            mint,
+                            payment_token_hash,
+                            request_id=request_id,
+                        )
                         response_headers["X-Cashu"] = refund_token
 
                         logger.info(
@@ -1878,6 +2184,19 @@ class BaseUpstreamProvider:
                     },
                 )
 
+        if cost_data:
+            for i, line in enumerate(lines):
+                if line.startswith("data: "):
+                    try:
+                        data_json = json.loads(line[6:])
+                        if "usage" in data_json and data_json["usage"]:
+                            data_json["usage"]["cost_sats"] = (
+                                cost_data.total_msats // 1000
+                            )
+                            lines[i] = "data: " + json.dumps(data_json)
+                    except json.JSONDecodeError:
+                        pass
+
         async def generate() -> AsyncGenerator[bytes, None]:
             for line in lines:
                 yield (line + "\n").encode("utf-8")
@@ -1897,6 +2216,8 @@ class BaseUpstreamProvider:
         unit: str,
         max_cost_for_model: int,
         mint: str | None = None,
+        payment_token_hash: str | None = None,
+        request_id: str | None = None,
     ) -> Response:
         """Handle non-streaming response for X-Cashu payment, calculating refund if needed.
 
@@ -1906,6 +2227,7 @@ class BaseUpstreamProvider:
             amount: Payment amount received
             unit: Payment unit (sat or msat)
             max_cost_for_model: Maximum cost for the model
+            payment_token_hash: Optional hash of original payment token for refund storage
 
         Returns:
             Response with refund token in header if applicable
@@ -1919,6 +2241,9 @@ class BaseUpstreamProvider:
             response_json = json.loads(content_str)
             cost_data = await self.get_x_cashu_cost(response_json, max_cost_for_model)
 
+            if cost_data and "usage" in response_json:
+                response_json["usage"]["cost_sats"] = cost_data.total_msats // 1000
+
             if not cost_data:
                 logger.error(
                     "Failed to calculate cost for response",
@@ -1967,7 +2292,13 @@ class BaseUpstreamProvider:
             )
 
             if refund_amount > 0:
-                refund_token = await self.send_refund(refund_amount, unit, mint)
+                refund_token = await self.send_refund(
+                    refund_amount,
+                    unit,
+                    mint,
+                    payment_token_hash,
+                    request_id=request_id,
+                )
                 response_headers["X-Cashu"] = refund_token
 
                 logger.info(
@@ -1982,7 +2313,7 @@ class BaseUpstreamProvider:
                 )
 
             return Response(
-                content=content_str,
+                content=json.dumps(response_json),
                 status_code=response.status_code,
                 headers=response_headers,
                 media_type="application/json",
@@ -2003,13 +2334,23 @@ class BaseUpstreamProvider:
             emergency_refund = amount
             refund_token = await send_token(emergency_refund, unit=unit, mint_url=mint)
             response.headers["X-Cashu"] = refund_token
+            try:
+                await store_cashu_transaction(
+                    token=refund_token,
+                    amount=emergency_refund,
+                    unit=unit,
+                    mint_url=mint,
+                    typ="out",
+                    request_id=request_id,
+                )
+            except Exception:
+                pass
 
             logger.warning(
                 "Emergency refund issued due to JSON parse error",
                 extra={
                     "original_amount": amount,
                     "refund_amount": emergency_refund,
-                    "deduction": 60,
                 },
             )
 
@@ -2027,6 +2368,8 @@ class BaseUpstreamProvider:
         unit: str,
         max_cost_for_model: int,
         mint: str | None = None,
+        payment_token_hash: str | None = None,
+        request_id: str | None = None,
     ) -> StreamingResponse | Response:
         """Handle chat completion response for X-Cashu payment, detecting streaming vs non-streaming.
 
@@ -2063,11 +2406,25 @@ class BaseUpstreamProvider:
 
             if is_streaming:
                 return await self.handle_x_cashu_streaming_response(
-                    content_str, response, amount, unit, max_cost_for_model, mint
+                    content_str,
+                    response,
+                    amount,
+                    unit,
+                    max_cost_for_model,
+                    mint,
+                    payment_token_hash,
+                    request_id=request_id,
                 )
             else:
                 return await self.handle_x_cashu_non_streaming_response(
-                    content_str, response, amount, unit, max_cost_for_model, mint
+                    content_str,
+                    response,
+                    amount,
+                    unit,
+                    max_cost_for_model,
+                    mint,
+                    payment_token_hash,
+                    request_id=request_id,
                 )
 
         except Exception as e:
@@ -2096,6 +2453,7 @@ class BaseUpstreamProvider:
         max_cost_for_model: int,
         model_obj: Model,
         mint: str | None = None,
+        payment_token_hash: str | None = None,
     ) -> Response | StreamingResponse:
         """Forward request paid with X-Cashu token to upstream service.
 
@@ -2166,7 +2524,13 @@ class BaseUpstreamProvider:
                         },
                     )
 
-                    refund_token = await self.send_refund(amount - 60, unit, mint)
+                    refund_token = await self.send_refund(
+                        amount,
+                        unit,
+                        mint,
+                        payment_token_hash,
+                        request_id=getattr(request.state, "request_id", None),
+                    )
 
                     logger.info(
                         "Refund processed for failed upstream request",
@@ -2197,14 +2561,25 @@ class BaseUpstreamProvider:
                     error_response.headers["X-Cashu"] = refund_token
                     return error_response
 
-                if path.endswith("chat/completions") or path.endswith("embeddings"):
+                if (
+                    path.endswith("chat/completions")
+                    or path.endswith("embeddings")
+                    or path.endswith("messages")
+                    or path.endswith("messages/count_tokens")
+                ):
                     logger.debug(
-                        "Processing completion/embeddings response",
+                        "Processing completion/embeddings/messages response",
                         extra={"path": path, "amount": amount, "unit": unit},
                     )
 
                     result = await self.handle_x_cashu_chat_completion(
-                        response, amount, unit, max_cost_for_model, mint
+                        response,
+                        amount,
+                        unit,
+                        max_cost_for_model,
+                        mint,
+                        payment_token_hash,
+                        request_id=getattr(request.state, "request_id", None),
                     )
                     background_tasks = BackgroundTasks()
                     background_tasks.add_task(response.aclose)
@@ -2279,10 +2654,25 @@ class BaseUpstreamProvider:
         )
 
         try:
+            payment_token_hash = hashlib.sha256(x_cashu_token.encode()).hexdigest()
             headers = dict(request.headers)
             amount, unit, mint = await recieve_token(x_cashu_token)
             headers = self.prepare_headers(dict(request.headers))
 
+            request_id = getattr(request.state, "request_id", None)
+            try:
+                await store_cashu_transaction(
+                    token=x_cashu_token,
+                    amount=amount,
+                    unit=unit,
+                    mint_url=mint,
+                    typ="in",
+                    request_id=request_id,
+                    collected=True,
+                )
+            except Exception:
+                pass
+
             logger.info(
                 "X-Cashu token redeemed for Responses API",
                 extra={"amount": amount, "unit": unit, "path": path, "mint": mint},
@@ -2297,6 +2687,7 @@ class BaseUpstreamProvider:
                 max_cost_for_model,
                 model_obj,
                 mint,
+                payment_token_hash,
             )
         except Exception as e:
             error_message = str(e)
@@ -2356,6 +2747,7 @@ class BaseUpstreamProvider:
         max_cost_for_model: int,
         model_obj: Model,
         mint: str | None = None,
+        payment_token_hash: str | None = None,
     ) -> Response | StreamingResponse:
         """Forward Responses API request paid with X-Cashu token to upstream service.
 
@@ -2427,7 +2819,13 @@ class BaseUpstreamProvider:
                         },
                     )
 
-                    refund_token = await self.send_refund(amount - 60, unit, mint)
+                    refund_token = await self.send_refund(
+                        amount,
+                        unit,
+                        mint,
+                        payment_token_hash,
+                        request_id=getattr(request.state, "request_id", None),
+                    )
 
                     logger.info(
                         "Refund processed for failed upstream Responses API request",
@@ -2465,7 +2863,13 @@ class BaseUpstreamProvider:
                     )
 
                     result = await self.handle_x_cashu_responses_completion(
-                        response, amount, unit, max_cost_for_model, mint
+                        response,
+                        amount,
+                        unit,
+                        max_cost_for_model,
+                        mint,
+                        payment_token_hash,
+                        request_id=getattr(request.state, "request_id", None),
                     )
                     background_tasks = BackgroundTasks()
                     background_tasks.add_task(response.aclose)
@@ -2515,6 +2919,8 @@ class BaseUpstreamProvider:
         unit: str,
         max_cost_for_model: int,
         mint: str | None = None,
+        payment_token_hash: str | None = None,
+        request_id: str | None = None,
     ) -> StreamingResponse | Response:
         """Handle Responses API completion response for X-Cashu payment.
 
@@ -2552,11 +2958,25 @@ class BaseUpstreamProvider:
 
             if is_streaming:
                 return await self.handle_x_cashu_streaming_responses_response(
-                    content_str, response, amount, unit, max_cost_for_model, mint
+                    content_str,
+                    response,
+                    amount,
+                    unit,
+                    max_cost_for_model,
+                    mint,
+                    payment_token_hash,
+                    request_id=request_id,
                 )
             else:
                 return await self.handle_x_cashu_non_streaming_responses_response(
-                    content_str, response, amount, unit, max_cost_for_model, mint
+                    content_str,
+                    response,
+                    amount,
+                    unit,
+                    max_cost_for_model,
+                    mint,
+                    payment_token_hash,
+                    request_id=request_id,
                 )
 
         except Exception as e:
@@ -2583,6 +3003,8 @@ class BaseUpstreamProvider:
         unit: str,
         max_cost_for_model: int,
         mint: str | None = None,
+        payment_token_hash: str | None = None,
+        request_id: str | None = None,
     ) -> StreamingResponse:
         """Handle streaming Responses API response for X-Cashu payment.
 
@@ -2664,7 +3086,13 @@ class BaseUpstreamProvider:
                             },
                         )
 
-                        refund_token = await self.send_refund(refund_amount, unit, mint)
+                        refund_token = await self.send_refund(
+                            refund_amount,
+                            unit,
+                            mint,
+                            payment_token_hash,
+                            request_id=request_id,
+                        )
                         response_headers["X-Cashu"] = refund_token
 
                         logger.info(
@@ -2698,6 +3126,19 @@ class BaseUpstreamProvider:
                     },
                 )
 
+        if cost_data:
+            for i, line in enumerate(lines):
+                if line.startswith("data: "):
+                    try:
+                        data_json = json.loads(line[6:])
+                        if "usage" in data_json and data_json["usage"]:
+                            data_json["usage"]["cost_sats"] = (
+                                cost_data.total_msats // 1000
+                            )
+                            lines[i] = "data: " + json.dumps(data_json)
+                    except json.JSONDecodeError:
+                        pass
+
         async def generate() -> AsyncGenerator[bytes, None]:
             for line in lines:
                 yield (line + "\\n").encode("utf-8")
@@ -2717,6 +3158,8 @@ class BaseUpstreamProvider:
         unit: str,
         max_cost_for_model: int,
         mint: str | None = None,
+        payment_token_hash: str | None = None,
+        request_id: str | None = None,
     ) -> Response:
         """Handle non-streaming Responses API response for X-Cashu payment."""
         logger.debug(
@@ -2728,6 +3171,9 @@ class BaseUpstreamProvider:
             response_json = json.loads(content_str)
             cost_data = await self.get_x_cashu_cost(response_json, max_cost_for_model)
 
+            if cost_data and "usage" in response_json:
+                response_json["usage"]["cost_sats"] = cost_data.total_msats // 1000
+
             if not cost_data:
                 logger.error(
                     "Failed to calculate cost for Responses API response",
@@ -2776,7 +3222,13 @@ class BaseUpstreamProvider:
             )
 
             if refund_amount > 0:
-                refund_token = await self.send_refund(refund_amount, unit, mint)
+                refund_token = await self.send_refund(
+                    refund_amount,
+                    unit,
+                    mint,
+                    payment_token_hash,
+                    request_id=request_id,
+                )
                 response_headers["X-Cashu"] = refund_token
 
                 logger.info(
@@ -2791,7 +3243,7 @@ class BaseUpstreamProvider:
                 )
 
             return Response(
-                content=content_str,
+                content=json.dumps(response_json),
                 status_code=response.status_code,
                 headers=response_headers,
                 media_type="application/json",
@@ -2812,13 +3264,23 @@ class BaseUpstreamProvider:
             emergency_refund = amount
             refund_token = await send_token(emergency_refund, unit=unit, mint_url=mint)
             response.headers["X-Cashu"] = refund_token
+            try:
+                await store_cashu_transaction(
+                    token=refund_token,
+                    amount=emergency_refund,
+                    unit=unit,
+                    mint_url=mint,
+                    typ="out",
+                    request_id=request_id,
+                )
+            except Exception:
+                pass
 
             logger.warning(
                 "Emergency refund issued for Responses API due to JSON parse error",
                 extra={
                     "original_amount": amount,
                     "refund_amount": emergency_refund,
-                    "deduction": 60,
                 },
             )
 
@@ -2861,10 +3323,25 @@ class BaseUpstreamProvider:
         )
 
         try:
+            payment_token_hash = hashlib.sha256(x_cashu_token.encode()).hexdigest()
             headers = dict(request.headers)
             amount, unit, mint = await recieve_token(x_cashu_token)
             headers = self.prepare_headers(dict(request.headers))
 
+            request_id = getattr(request.state, "request_id", None)
+            try:
+                await store_cashu_transaction(
+                    token=x_cashu_token,
+                    amount=amount,
+                    unit=unit,
+                    mint_url=mint,
+                    typ="in",
+                    request_id=request_id,
+                    collected=True,
+                )
+            except Exception:
+                pass
+
             logger.info(
                 "X-Cashu token redeemed successfully",
                 extra={"amount": amount, "unit": unit, "path": path, "mint": mint},
@@ -2879,6 +3356,7 @@ class BaseUpstreamProvider:
                 max_cost_for_model,
                 model_obj,
                 mint,
+                payment_token_hash,
             )
         except Exception as e:
             error_message = str(e)
@@ -2955,6 +3433,7 @@ class BaseUpstreamProvider:
             upstream_provider_id=model.upstream_provider_id,
             canonical_slug=model.canonical_slug,
             alias_ids=model.alias_ids,
+            forwarded_model_id=model.forwarded_model_id,
         )
 
         (
@@ -2978,6 +3457,7 @@ class BaseUpstreamProvider:
             upstream_provider_id=model.upstream_provider_id,
             canonical_slug=model.canonical_slug,
             alias_ids=model.alias_ids,
+            forwarded_model_id=model.forwarded_model_id,
         )
 
     async def fetch_models(self) -> list[Model]:
@@ -3090,7 +3570,7 @@ class BaseUpstreamProvider:
             async with create_session() as session:
                 stmt = select(UpstreamProviderRow).where(
                     UpstreamProviderRow.base_url == self.base_url,
-                    UpstreamProviderRow.api_key == self.api_key
+                    UpstreamProviderRow.api_key == self.api_key,
                 )
                 result = await session.exec(stmt)
 
@@ -3111,15 +3591,24 @@ class BaseUpstreamProvider:
                 diff = set(db_model_ids) - set(model_ids)
 
                 for db_model_id in diff:
-                    found_db_model = next((model_obj for model_obj in db_models if model_obj.id == db_model_id))
+                    found_db_model = next(
+                        (
+                            model_obj
+                            for model_obj in db_models
+                            if model_obj.id == db_model_id
+                        )
+                    )
                     models.append(found_db_model)
 
-                models_with_fees = [self._apply_provider_fee_to_model(m) for m in models]
+                models_with_fees = [
+                    self._apply_provider_fee_to_model(m) for m in models
+                ]
 
                 try:
                     sats_to_usd = sats_usd_price()
                     self._models_cache = [
-                        _update_model_sats_pricing(m, sats_to_usd) for m in models_with_fees
+                        _update_model_sats_pricing(m, sats_to_usd)
+                        for m in models_with_fees
                     ]
                 except Exception:
                     self._models_cache = models_with_fees

routstr/upstream/routstr.py

@@ -83,7 +83,7 @@ class RoutstrUpstreamProvider(BaseUpstreamProvider):
             Balance in satoshis, or None if failed
         """
         url = f"{self.base_url}/v1/balance/info"
-        headers = {"Authorization": f"Bearer {self.api_key}"}
+        headers = {"Authorization": f"Bearer {self.api_key}"} if self.api_key else {}
 
         async with httpx.AsyncClient() as client:
             try:

routstr/wallet.py

@@ -1,11 +1,11 @@
 import asyncio
-import math
+import time
 from typing import TypedDict
 
 from cashu.core.base import Proof, Token
 from cashu.wallet.helpers import deserialize_token_from_string
 from cashu.wallet.wallet import Wallet
-from sqlmodel import col, update
+from sqlmodel import col, select, update
 
 from .core import db, get_logger
 from .core.settings import settings
@@ -34,6 +34,7 @@ async def recieve_token(
 
     wallet.verify_proofs_dleq(token_obj.proofs)
     await wallet.split(proofs=token_obj.proofs, amount=0, include_fees=True)
+
     return token_obj.amount, token_obj.unit, token_obj.mint
 
 
@@ -58,15 +59,86 @@ async def send_token(amount: int, unit: str, mint_url: str | None = None) -> str
     return token
 
 
+async def _calculate_swap_amount(
+    amount_msat: int,
+    token_unit: str,
+    token_mint_url: str,
+    token_wallet: Wallet,
+    primary_wallet: Wallet,
+) -> int:
+    """
+    Calculate the amount to mint on the primary mint after accounting for
+    potential swap fees (melt fees) on the foreign mint.
+    """
+    if settings.primary_mint_unit == "sat":
+        receive_amount = amount_msat // 1000
+    else:
+        receive_amount = amount_msat
+
+    if token_mint_url == settings.primary_mint:
+        logger.info(
+            "swap_to_primary_mint: skipping fee estimation (same mint)",
+            extra={"minted_amount": receive_amount},
+        )
+        return int(receive_amount)
+
+    logger.info(
+        "swap_to_primary_mint: estimating fees",
+        extra={
+            "dummy_amount": receive_amount,
+            "unit": settings.primary_mint_unit,
+        },
+    )
+
+    try:
+        dummy_mint_quote = await primary_wallet.request_mint(receive_amount)
+        dummy_melt_quote = await token_wallet.melt_quote(dummy_mint_quote.request)
+
+        fee_reserve = dummy_melt_quote.fee_reserve
+        if token_unit == "sat":
+            fee_msat = fee_reserve * 1000
+        else:
+            fee_msat = fee_reserve
+
+        amount_msat_after_fee = amount_msat - fee_msat
+
+        if settings.primary_mint_unit == "sat":
+            minted_amount = int(amount_msat_after_fee // 1000)
+        else:
+            minted_amount = int(amount_msat_after_fee)
+
+        if minted_amount <= 0:
+            raise ValueError(f"Fees ({fee_reserve} {token_unit}) exceed token amount")
+
+        logger.info(
+            "swap_to_primary_mint: fee estimation result",
+            extra={
+                "token_amount_sat": amount_msat // 1000,
+                "estimated_fee_sat": fee_msat // 1000,
+                "minted_amount": minted_amount,
+                "minted_unit": settings.primary_mint_unit,
+            },
+        )
+        return minted_amount
+
+    except Exception as e:
+        logger.error(
+            "swap_to_primary_mint: fee estimation failed",
+            extra={"error": str(e)},
+        )
+        raise ValueError(f"Failed to estimate fees: {e}") from e
+
+
 async def swap_to_primary_mint(
     token_obj: Token, token_wallet: Wallet
 ) -> tuple[int, str, str]:
     logger.info(
-        "swap_to_primary_mint",
+        "swap_to_primary_mint: starting",
         extra={
-            "mint": token_obj.mint,
-            "amount": token_obj.amount,
+            "foreign_mint": token_obj.mint,
+            "token_amount": token_obj.amount,
             "unit": token_obj.unit,
+            "primary_mint": settings.primary_mint,
         },
     )
     # Ensure amount is an integer
@@ -81,24 +153,104 @@ async def swap_to_primary_mint(
         amount_msat = token_amount
     else:
         raise ValueError("Invalid unit")
-    estimated_fee_sat = math.ceil(max(amount_msat // 1000 * 0.01, 2)) + 1
-    amount_msat_after_fee = amount_msat - estimated_fee_sat * 1000
     primary_wallet = await get_wallet(settings.primary_mint, settings.primary_mint_unit)
 
-    if settings.primary_mint_unit == "sat":
-        minted_amount = int(amount_msat_after_fee // 1000)
-    else:
-        minted_amount = int(amount_msat_after_fee)
+    minted_amount = await _calculate_swap_amount(
+        amount_msat,
+        token_obj.unit,
+        token_obj.mint,
+        token_wallet,
+        primary_wallet,
+    )
+
     mint_quote = await primary_wallet.request_mint(minted_amount)
+    logger.info(
+        "swap_to_primary_mint: mint quote received",
+        extra={"mint_quote_id": mint_quote.quote},
+    )
 
     melt_quote = await token_wallet.melt_quote(mint_quote.request)
-    _ = await token_wallet.melt(
-        proofs=token_obj.proofs,
-        invoice=mint_quote.request,
-        fee_reserve_sat=melt_quote.fee_reserve,
-        quote_id=melt_quote.quote,
+    total_needed = melt_quote.amount + melt_quote.fee_reserve
+    logger.info(
+        "swap_to_primary_mint: melt quote received",
+        extra={
+            "melt_quote_id": melt_quote.quote,
+            "melt_amount": melt_quote.amount,
+            "melt_fee_reserve": melt_quote.fee_reserve,
+            "total_needed": total_needed,
+            "token_amount": token_amount,
+        },
+    )
+
+    if total_needed > token_amount:
+        logger.warning(
+            "swap_to_primary_mint: insufficient token amount for melt fees",
+            extra={
+                "token_amount": token_amount,
+                "melt_amount": melt_quote.amount,
+                "melt_fee_reserve": melt_quote.fee_reserve,
+                "total_needed": total_needed,
+                "shortfall": total_needed - token_amount,
+            },
+        )
+        raise ValueError(
+            f"Token amount ({token_amount} {token_obj.unit}) is insufficient to cover "
+            f"melt fees. Needed: {total_needed} {token_obj.unit} "
+            f"(amount: {melt_quote.amount} + fee: {melt_quote.fee_reserve})"
+        )
+
+    try:
+        _ = await token_wallet.melt(
+            proofs=token_obj.proofs,
+            invoice=mint_quote.request,
+            fee_reserve_sat=melt_quote.fee_reserve,
+            quote_id=melt_quote.quote,
+        )
+    except Exception as e:
+        logger.error(
+            "swap_to_primary_mint: melt failed",
+            extra={
+                "error": str(e),
+                "error_type": type(e).__name__,
+                "foreign_mint": token_obj.mint,
+                "token_amount": token_amount,
+                "melt_quote_id": melt_quote.quote,
+                "total_needed": total_needed,
+            },
+        )
+        raise ValueError(
+            f"Failed to melt token from foreign mint {token_obj.mint}: {e}"
+        ) from e
+
+    logger.info(
+        "swap_to_primary_mint: melt succeeded, minting on primary",
+        extra={"minted_amount": minted_amount, "mint_quote_id": mint_quote.quote},
+    )
+
+    try:
+        _ = await primary_wallet.mint(minted_amount, quote_id=mint_quote.quote)
+    except Exception as e:
+        logger.error(
+            "swap_to_primary_mint: mint on primary failed after successful melt",
+            extra={
+                "error": str(e),
+                "error_type": type(e).__name__,
+                "minted_amount": minted_amount,
+                "mint_quote_id": mint_quote.quote,
+            },
+        )
+        raise
+
+    logger.info(
+        "swap_to_primary_mint: completed successfully",
+        extra={
+            "foreign_mint": token_obj.mint,
+            "primary_mint": settings.primary_mint,
+            "original_amount": token_amount,
+            "minted_amount": minted_amount,
+            "unit": settings.primary_mint_unit,
+        },
     )
-    _ = await primary_wallet.mint(minted_amount, quote_id=mint_quote.quote)
 
     return int(minted_amount), settings.primary_mint_unit, settings.primary_mint
 
@@ -352,6 +504,61 @@ async def periodic_payout() -> None:
             )
 
 
+async def periodic_refund_sweep() -> None:
+    while True:
+        await asyncio.sleep(60 * 60)  # every hour
+        try:
+            cutoff = int(time.time()) - settings.refund_sweep_ttl_seconds
+            async with db.create_session() as session:
+                stmt = select(db.CashuTransaction).where(
+                    db.CashuTransaction.type == "out",
+                    db.CashuTransaction.collected == False,  # noqa: E712
+                    db.CashuTransaction.swept == False,  # noqa: E712
+                    db.CashuTransaction.created_at < cutoff,
+                )
+                results = await session.exec(stmt)
+                refunds = results.all()
+
+                for refund in refunds:
+                    try:
+                        await recieve_token(refund.token)
+                        refund.swept = True
+                        session.add(refund)
+                        logger.info(
+                            "Swept uncollected refund",
+                            extra={
+                                "id": refund.id,
+                                "amount": refund.amount,
+                                "unit": refund.unit,
+                            },
+                        )
+                    except Exception as e:
+                        error_msg = str(e).lower()
+                        if "already spent" in error_msg:
+                            refund.collected = True
+                            session.add(refund)
+                            logger.info(
+                                "Refund already spent (client collected), marking swept",
+                                extra={
+                                    "id": refund.id,
+                                },
+                            )
+                        else:
+                            logger.warning(
+                                "Failed to sweep refund",
+                                extra={
+                                    "id": refund.id,
+                                    "error": str(e),
+                                },
+                            )
+                await session.commit()
+        except Exception as e:
+            logger.error(
+                "Error in periodic refund sweep",
+                extra={"error": str(e), "error_type": type(e).__name__},
+            )
+
+
 async def send_to_lnurl(amount: int, unit: str, mint: str, address: str) -> int:
     wallet = await get_wallet(mint, unit)
     proofs = wallet._get_proofs_per_keyset(wallet.proofs)[wallet.keyset_id]

tests/integration/conftest.py

@@ -380,6 +380,13 @@ async def integration_session(
         yield session
 
 
+@pytest_asyncio.fixture
+async def patched_db_engine(integration_engine: Any) -> AsyncGenerator[None, None]:
+    """Patch the global db engine so create_session() uses the test engine."""
+    with patch("routstr.core.db.engine", integration_engine):
+        yield
+
+
 class DatabaseSnapshot:
     """Utility to capture and compare database states"""
 

tests/integration/test_admin_provider_balance.py

@@ -0,0 +1,80 @@
+from datetime import datetime, timedelta, timezone
+from unittest.mock import AsyncMock, patch
+
+import httpx
+import pytest
+from sqlmodel.ext.asyncio.session import AsyncSession
+
+from routstr.core.admin import admin_sessions
+from routstr.core.db import UpstreamProviderRow
+
+
+async def _create_routstr_provider() -> UpstreamProviderRow:
+    return UpstreamProviderRow(
+        provider_type="routstr",
+        base_url="https://upstream.example",
+        api_key="",
+        enabled=True,
+    )
+
+
+def _admin_headers() -> dict[str, str]:
+    token = "test-admin-token"
+    admin_sessions[token] = int(
+        (datetime.now(timezone.utc) + timedelta(minutes=5)).timestamp()
+    )
+    return {"Authorization": f"Bearer {token}"}
+
+
+@pytest.mark.integration
+@pytest.mark.asyncio
+async def test_admin_routstr_provider_balance_timeout_returns_504(
+    integration_client: httpx.AsyncClient,
+    integration_session: AsyncSession,
+) -> None:
+    provider = await _create_routstr_provider()
+    integration_session.add(provider)
+    await integration_session.commit()
+    await integration_session.refresh(provider)
+
+    request = httpx.Request("GET", f"{provider.base_url}/v1/balance/info")
+    timeout_error = httpx.ConnectTimeout("Connect timeout", request=request)
+
+    with patch(
+        "httpx.AsyncHTTPTransport.handle_async_request",
+        new=AsyncMock(side_effect=timeout_error),
+    ):
+        response = await integration_client.get(
+            f"/admin/api/upstream-providers/{provider.id}/balance",
+            headers=_admin_headers(),
+        )
+
+    assert response.status_code == 504
+    assert response.json()["detail"] == "Timed out contacting upstream Routstr provider"
+
+
+@pytest.mark.integration
+@pytest.mark.asyncio
+async def test_admin_routstr_provider_balance_request_error_returns_502(
+    integration_client: httpx.AsyncClient,
+    integration_session: AsyncSession,
+) -> None:
+    provider = await _create_routstr_provider()
+    integration_session.add(provider)
+    await integration_session.commit()
+    await integration_session.refresh(provider)
+
+    request = httpx.Request("GET", f"{provider.base_url}/v1/balance/info")
+    request_error = httpx.ConnectError("Connection failed", request=request)
+
+    with patch(
+        "httpx.AsyncHTTPTransport.handle_async_request",
+        new=AsyncMock(side_effect=request_error),
+    ):
+        response = await integration_client.get(
+            f"/admin/api/upstream-providers/{provider.id}/balance",
+            headers=_admin_headers(),
+        )
+
+    assert response.status_code == 502
+    assert response.json()["detail"] == "Failed to contact upstream Routstr provider"

tests/integration/test_balance_negative_on_cost_overrun.py

@@ -0,0 +1,369 @@
+"""
+Integration tests for the balance-goes-negative bug in adjust_payment_for_tokens.
+
+Root cause: when actual token cost exceeds the discounted reservation
+(cost_difference > 0, caused by tolerance_percentage discounting the reservation),
+the finalization UPDATE had no WHERE guard on balance, allowing balance to go negative.
+
+Fix: added `.where(col(ApiKey.balance) >= total_cost_msats)` so the UPDATE is a no-op
+when balance is insufficient, then falls back to charging only deducted_max_cost.
+"""
+
+import uuid
+from unittest.mock import patch
+
+import pytest
+from sqlmodel.ext.asyncio.session import AsyncSession
+
+from routstr.core.db import ApiKey
+from routstr.payment.cost_calculation import CostData
+
+
+def _make_key(balance: int, reserved: int) -> ApiKey:
+    return ApiKey(
+        hashed_key=f"test_{uuid.uuid4().hex}",
+        balance=balance,
+        reserved_balance=reserved,
+        total_spent=0,
+        total_requests=1,
+    )
+
+
+async def _refresh(session: AsyncSession, key: ApiKey) -> ApiKey:
+    await session.refresh(key)
+    return key
+
+
+# ---------------------------------------------------------------------------
+# Helper: build a CostData where token cost > deducted_max_cost
+# ---------------------------------------------------------------------------
+
+def _cost_data(total_msats: int) -> CostData:
+    return CostData(
+        base_msats=0,
+        input_msats=total_msats // 2,
+        output_msats=total_msats - total_msats // 2,
+        total_msats=total_msats,
+        total_usd=0.0,
+        input_tokens=100,
+        output_tokens=100,
+    )
+
+
+# ---------------------------------------------------------------------------
+# Test 1 — exact reproduction of the bug
+#
+# Setup: balance == deducted_max_cost (user has just enough for the reservation,
+#         nothing extra). Actual token cost is 1% higher (tolerance_percentage).
+#
+# Before fix: balance -= total_cost_msats → goes negative.
+# After fix:  WHERE balance >= total_cost_msats fails → fallback charges
+#             deducted_max_cost → balance reaches 0, never negative.
+# ---------------------------------------------------------------------------
+
+@pytest.mark.asyncio
+async def test_balance_never_negative_when_cost_exceeds_reservation(
+    integration_session: AsyncSession,
+) -> None:
+    """Balance must not go negative when actual token cost > discounted reservation."""
+    from routstr.auth import adjust_payment_for_tokens
+
+    deducted_max_cost = 990  # reserved (1% below true max of 1000)
+    actual_token_cost = 1000  # actual cost at true max
+
+    # User has balance exactly equal to the reservation — tight budget
+    key = _make_key(balance=deducted_max_cost, reserved=deducted_max_cost)
+    integration_session.add(key)
+    await integration_session.commit()
+
+    response_data = {"model": "test-model", "usage": {"prompt_tokens": 100, "completion_tokens": 100}}
+
+    with patch(
+        "routstr.auth.calculate_cost",
+        return_value=_cost_data(actual_token_cost),
+    ):
+        await adjust_payment_for_tokens(key, response_data, integration_session, deducted_max_cost)
+
+    await _refresh(integration_session, key)
+
+    assert key.balance >= 0, f"Balance went negative: {key.balance}"
+    assert key.reserved_balance >= 0, f"Reserved balance went negative: {key.reserved_balance}"
+    assert key.reserved_balance == 0, "Reservation must be fully released after finalization"
+
+
+# ---------------------------------------------------------------------------
+# Test 2 — balance is ZERO after the reservation is accounted for
+#           (absolute floor case)
+# ---------------------------------------------------------------------------
+
+@pytest.mark.asyncio
+async def test_balance_floor_at_zero_on_overrun(
+    integration_session: AsyncSession,
+) -> None:
+    """When balance exactly covers deducted_max_cost and cost overruns, balance reaches 0 not negative."""
+    from routstr.auth import adjust_payment_for_tokens
+
+    deducted_max_cost = 500
+    actual_token_cost = 550  # 10% overrun
+
+    key = _make_key(balance=500, reserved=500)
+    integration_session.add(key)
+    await integration_session.commit()
+
+    response_data = {"model": "test-model", "usage": {"prompt_tokens": 50, "completion_tokens": 50}}
+
+    with patch(
+        "routstr.auth.calculate_cost",
+        return_value=_cost_data(actual_token_cost),
+    ):
+        await adjust_payment_for_tokens(key, response_data, integration_session, deducted_max_cost)
+
+    await _refresh(integration_session, key)
+
+    assert key.balance == 0, (
+        f"Expected balance=0 (charged deducted_max_cost fallback), got {key.balance}"
+    )
+    assert key.reserved_balance == 0, f"Reserved balance should be 0, got {key.reserved_balance}"
+    # Fallback charges deducted_max_cost
+    assert key.total_spent == deducted_max_cost, (
+        f"Expected total_spent={deducted_max_cost}, got {key.total_spent}"
+    )
+
+
+# ---------------------------------------------------------------------------
+# Test 3 — balance has enough room: full token cost should be charged
+# ---------------------------------------------------------------------------
+
+@pytest.mark.asyncio
+async def test_full_cost_charged_when_balance_sufficient_for_overrun(
+    integration_session: AsyncSession,
+) -> None:
+    """When balance covers total_cost_msats, the full amount is charged (not just deducted_max_cost)."""
+    from routstr.auth import adjust_payment_for_tokens
+
+    deducted_max_cost = 990
+    actual_token_cost = 1000
+
+    # User has extra balance beyond the reservation
+    key = _make_key(balance=2000, reserved=990)
+    integration_session.add(key)
+    await integration_session.commit()
+
+    response_data = {"model": "test-model", "usage": {"prompt_tokens": 100, "completion_tokens": 100}}
+
+    with patch(
+        "routstr.auth.calculate_cost",
+        return_value=_cost_data(actual_token_cost),
+    ):
+        await adjust_payment_for_tokens(key, response_data, integration_session, deducted_max_cost)
+
+    await _refresh(integration_session, key)
+
+    assert key.balance >= 0, f"Balance went negative: {key.balance}"
+    assert key.reserved_balance == 0, f"Reservation not released: {key.reserved_balance}"
+    assert key.total_spent == actual_token_cost, (
+        f"Expected full charge of {actual_token_cost}, got {key.total_spent}"
+    )
+    assert key.balance == 2000 - actual_token_cost, (
+        f"Expected balance={2000 - actual_token_cost}, got {key.balance}"
+    )
+
+
+# ---------------------------------------------------------------------------
+# Test 4 — concurrent finalizations with cost overrun
+#
+# Multiple requests finish concurrently. Each has a small overrun.
+# None should drive balance negative.
+# ---------------------------------------------------------------------------
+
+@pytest.mark.asyncio
+async def test_concurrent_cost_overruns_never_negative(
+    integration_session: AsyncSession,
+    patched_db_engine: None,
+) -> None:
+    """Concurrent finalization with cost overruns must never produce negative balance."""
+    import asyncio
+
+    from routstr.auth import adjust_payment_for_tokens, pay_for_request
+    from routstr.core.db import create_session
+
+    deducted_max_cost = 990
+    actual_token_cost = 1000
+    n_requests = 5
+
+    # Fund the key with exactly enough for n_requests reservations + a tiny buffer
+    starting_balance = deducted_max_cost * n_requests
+    key_hash = f"test_concurrent_{uuid.uuid4().hex}"
+
+    async with create_session() as session:
+        key = ApiKey(
+            hashed_key=key_hash,
+            balance=starting_balance,
+            reserved_balance=0,
+            total_spent=0,
+            total_requests=0,
+        )
+        session.add(key)
+        await session.commit()
+
+    # Reserve n_requests slots (sequentially, as pay_for_request is atomic)
+    async with create_session() as session:
+        key_to_reserve = await session.get(ApiKey, key_hash)
+        assert key_to_reserve is not None
+        for _ in range(n_requests):
+            await pay_for_request(key_to_reserve, deducted_max_cost, session)
+            await session.refresh(key_to_reserve)
+
+    # Now finalize all concurrently with cost overrun
+    async def finalize() -> None:
+        response_data = {
+            "model": "test-model",
+            "usage": {"prompt_tokens": 100, "completion_tokens": 100},
+        }
+        async with create_session() as session:
+            fresh_key = await session.get(ApiKey, key_hash)
+            assert fresh_key is not None
+            with patch(
+                "routstr.auth.calculate_cost",
+                return_value=_cost_data(actual_token_cost),
+            ):
+                await adjust_payment_for_tokens(
+                    fresh_key, response_data, session, deducted_max_cost
+                )
+
+    await asyncio.gather(*[finalize() for _ in range(n_requests)])
+
+    async with create_session() as session:
+        final_key = await session.get(ApiKey, key_hash)
+        assert final_key is not None
+
+    assert final_key.balance >= 0, (
+        f"Balance went negative after concurrent overruns: {final_key.balance}"
+    )
+    assert final_key.reserved_balance == 0, (
+        f"Reserved balance not fully released: {final_key.reserved_balance}"
+    )
+    assert final_key.total_spent <= starting_balance, (
+        f"Total spent ({final_key.total_spent}) exceeds starting balance ({starting_balance})"
+    )
+    # Every request must have been charged at least deducted_max_cost — no free inference.
+    assert final_key.total_spent == starting_balance, (
+        f"Expected total_spent={starting_balance} (all {n_requests} reservations charged), "
+        f"got {final_key.total_spent} — at least one request got free inference"
+    )
+
+
+# ---------------------------------------------------------------------------
+# Test 5 — overrun with no balance at all (reserved_balance == balance)
+#           simulates a user who topped up to exactly the reservation floor
+# ---------------------------------------------------------------------------
+
+@pytest.mark.asyncio
+async def test_zero_free_balance_overrun_is_safe(
+    integration_session: AsyncSession,
+) -> None:
+    """User with zero free balance (all reserved) should never go negative on overrun."""
+    from routstr.auth import adjust_payment_for_tokens
+
+    deducted_max_cost = 1000
+    actual_token_cost = 1050
+
+    # balance == reserved_balance: zero free balance
+    key = _make_key(balance=1000, reserved=1000)
+    integration_session.add(key)
+    await integration_session.commit()
+
+    response_data = {"model": "test-model", "usage": {"prompt_tokens": 50, "completion_tokens": 100}}
+
+    with patch(
+        "routstr.auth.calculate_cost",
+        return_value=_cost_data(actual_token_cost),
+    ):
+        await adjust_payment_for_tokens(key, response_data, integration_session, deducted_max_cost)
+
+    await _refresh(integration_session, key)
+
+    assert key.balance >= 0, f"Balance went negative: {key.balance}"
+    assert key.reserved_balance >= 0, f"Reserved balance went negative: {key.reserved_balance}"
+
+
+# ---------------------------------------------------------------------------
+# Test 6 — parallel requests: second finalization must not get free inference
+#
+# Root cause of the bug fixed in auth.py:
+#   `.where(col(ApiKey.balance) >= total_cost_msats)` ignores other requests'
+#   reservations, so after Request A charges total_cost_msats, balance can drop
+#   below deducted_max_cost, causing Request B's fallback to release for free.
+#
+# Fix: use `balance - reserved_balance + deducted_max_cost >= total_cost_msats`
+#   so the check accounts for concurrent reservations.
+# ---------------------------------------------------------------------------
+
+
+@pytest.mark.asyncio
+async def test_parallel_requests_no_free_inference(
+    integration_session: AsyncSession,
+    patched_db_engine: None,
+) -> None:
+    """Second parallel finalization must be charged even when first depleted free balance."""
+    import asyncio
+
+    from routstr.auth import adjust_payment_for_tokens
+    from routstr.core.db import create_session
+
+    deducted_max_cost = 100
+    actual_token_cost = 150  # overrun: 50 more than reserved
+
+    # Fund the key with exactly 2 * deducted_max_cost.
+    # Both requests pre-reserved 100 each → balance=200, reserved=200, free=0.
+    # Old check (balance >= total_cost_msats):
+    #   Request A: 200 >= 150 ✓ → charges 150 → balance=50, reserved=100
+    #   Request B: 50 >= 150 ✗ → fallback: 50 >= 100 ✗ → releases FREE
+    # New check (balance - reserved + deducted >= total_cost_msats):
+    #   Both fall to fallback (0 free balance).
+    #   Both charge deducted_max_cost=100 → total_spent=200, balance=0.
+    starting_balance = deducted_max_cost * 2
+    key_hash = f"test_parallel_no_free_{uuid.uuid4().hex}"
+
+    async with create_session() as session:
+        key = ApiKey(
+            hashed_key=key_hash,
+            balance=starting_balance,
+            reserved_balance=deducted_max_cost * 2,  # both slots pre-reserved
+            total_spent=0,
+            total_requests=2,
+        )
+        session.add(key)
+        await session.commit()
+
+    async def finalize() -> None:
+        response_data = {
+            "model": "test-model",
+            "usage": {"prompt_tokens": 50, "completion_tokens": 100},
+        }
+        async with create_session() as session:
+            fresh_key = await session.get(ApiKey, key_hash)
+            assert fresh_key is not None
+            with patch(
+                "routstr.auth.calculate_cost",
+                return_value=_cost_data(actual_token_cost),
+            ):
+                await adjust_payment_for_tokens(
+                    fresh_key, response_data, session, deducted_max_cost
+                )
+
+    await asyncio.gather(finalize(), finalize())
+
+    async with create_session() as session:
+        final_key = await session.get(ApiKey, key_hash)
+        assert final_key is not None
+
+    assert final_key.balance >= 0, f"Balance went negative: {final_key.balance}"
+    assert final_key.reserved_balance == 0, (
+        f"Reserved balance not released: {final_key.reserved_balance}"
+    )
+    # Both requests must have been charged — no free inference.
+    assert final_key.total_spent == starting_balance, (
+        f"Expected total_spent={starting_balance} (both reservations charged), "
+        f"got {final_key.total_spent} — one request got free inference"
+    )

tests/integration/test_insufficient_balance.py

@@ -0,0 +1,240 @@
+"""
+Tests showing how a user hits "Insufficient balance: X mSats required for this model"
+when their balance is too low for the model's cost.
+
+The log line that triggered this:
+  WARNING  Insufficient billing balance during validation
+  ERROR    Bearer token validation failed: HTTPException: 402:
+           {'error': {'message': 'Insufficient balance: 622888 mSats required
+           for this model. 20320 available.', ...}}
+
+This happens in validate_bearer_key (auth.py) when:
+  billing_key.total_balance < min_cost   (model's max cost)
+
+and also in pay_for_request when the atomic UPDATE finds no available balance.
+"""
+
+import uuid
+from unittest.mock import patch
+
+import pytest
+from fastapi import HTTPException
+from httpx import AsyncClient
+from sqlmodel.ext.asyncio.session import AsyncSession
+
+from routstr.core.db import ApiKey
+
+
+def _key(balance: int, reserved: int = 0) -> ApiKey:
+    return ApiKey(
+        hashed_key=f"test_{uuid.uuid4().hex}",
+        balance=balance,
+        reserved_balance=reserved,
+        total_spent=0,
+    )
+
+
+# ---------------------------------------------------------------------------
+# Test 1 — simplest case: balance < model cost → pay_for_request raises 402
+# ---------------------------------------------------------------------------
+
+@pytest.mark.asyncio
+async def test_pay_for_request_raises_402_when_balance_too_low(
+    integration_session: AsyncSession,
+) -> None:
+    """
+    User has 20_000 msats. Model costs 622_888 msats.
+    pay_for_request must raise HTTP 402 with a clear message.
+    """
+    from routstr.auth import pay_for_request
+
+    model_cost = 622_888
+    user_balance = 20_000
+
+    key = _key(balance=user_balance)
+    integration_session.add(key)
+    await integration_session.commit()
+
+    with pytest.raises(HTTPException) as exc_info:
+        await pay_for_request(key, model_cost, integration_session)
+
+    assert exc_info.value.status_code == 402
+    detail = exc_info.value.detail
+    assert isinstance(detail, dict)
+    error = detail["error"]
+    assert error["code"] == "insufficient_balance"
+    assert str(model_cost) in error["message"]
+    assert str(user_balance) in error["message"]
+
+    # Balance must be untouched
+    await integration_session.refresh(key)
+    assert key.balance == user_balance
+    assert key.reserved_balance == 0
+
+
+# ---------------------------------------------------------------------------
+# Test 2 — balance is zero
+# ---------------------------------------------------------------------------
+
+@pytest.mark.asyncio
+async def test_pay_for_request_raises_402_on_zero_balance(
+    integration_session: AsyncSession,
+) -> None:
+    """User with zero balance cannot make any request."""
+    from routstr.auth import pay_for_request
+
+    key = _key(balance=0)
+    integration_session.add(key)
+    await integration_session.commit()
+
+    with pytest.raises(HTTPException) as exc_info:
+        await pay_for_request(key, 1_000, integration_session)
+
+    assert exc_info.value.status_code == 402
+    detail = exc_info.value.detail
+    assert isinstance(detail, dict)
+    assert detail["error"]["code"] == "insufficient_balance"
+
+
+# ---------------------------------------------------------------------------
+# Test 3 — all balance is reserved (total_balance = balance - reserved = 0)
+# ---------------------------------------------------------------------------
+
+@pytest.mark.asyncio
+async def test_pay_for_request_raises_402_when_all_balance_reserved(
+    integration_session: AsyncSession,
+) -> None:
+    """
+    User has 50_000 msats balance but 50_000 is already reserved for in-flight
+    requests. Free balance (total_balance) = 0. Should get 402.
+    """
+    from routstr.auth import pay_for_request
+
+    key = _key(balance=50_000, reserved=50_000)
+    integration_session.add(key)
+    await integration_session.commit()
+
+    with pytest.raises(HTTPException) as exc_info:
+        await pay_for_request(key, 1_000, integration_session)
+
+    assert exc_info.value.status_code == 402
+    # Balance and reserved must be untouched
+    await integration_session.refresh(key)
+    assert key.balance == 50_000
+    assert key.reserved_balance == 50_000
+
+
+# ---------------------------------------------------------------------------
+# Test 4 — balance just one msat below model cost
+# ---------------------------------------------------------------------------
+
+@pytest.mark.asyncio
+async def test_pay_for_request_raises_402_one_msat_short(
+    integration_session: AsyncSession,
+) -> None:
+    """Off-by-one: balance is exactly model_cost - 1."""
+    from routstr.auth import pay_for_request
+
+    model_cost = 10_000
+    key = _key(balance=model_cost - 1)
+    integration_session.add(key)
+    await integration_session.commit()
+
+    with pytest.raises(HTTPException) as exc_info:
+        await pay_for_request(key, model_cost, integration_session)
+
+    assert exc_info.value.status_code == 402
+    await integration_session.refresh(key)
+    assert key.balance == model_cost - 1   # untouched
+    assert key.reserved_balance == 0
+
+
+# ---------------------------------------------------------------------------
+# Test 5 — balance exactly equal to model cost → succeeds
+# ---------------------------------------------------------------------------
+
+@pytest.mark.asyncio
+async def test_pay_for_request_succeeds_when_balance_equals_cost(
+    integration_session: AsyncSession,
+) -> None:
+    """Balance == model cost: the request should be reserved successfully."""
+    from routstr.auth import pay_for_request
+
+    model_cost = 10_000
+    key = _key(balance=model_cost)
+    integration_session.add(key)
+    await integration_session.commit()
+
+    # Should not raise
+    await pay_for_request(key, model_cost, integration_session)
+
+    await integration_session.refresh(key)
+    assert key.reserved_balance == model_cost
+    assert key.balance == model_cost   # balance unchanged, only reserved goes up
+
+
+# ---------------------------------------------------------------------------
+# Test 6 — HTTP layer returns 402 JSON with the right shape
+# ---------------------------------------------------------------------------
+
+@pytest.mark.asyncio
+async def test_http_402_response_shape_on_insufficient_balance(
+    integration_client: AsyncClient,
+    integration_session: AsyncSession,
+) -> None:
+    """
+    End-to-end: POST /v1/chat/completions with a key whose balance is far below
+    the mocked model cost returns HTTP 402 with the expected JSON error body.
+
+    Matches exactly the log snippet in the bug report:
+      'Insufficient balance: X mSats required for this model. Y available.'
+    """
+    from unittest.mock import AsyncMock, MagicMock
+
+    model_cost = 622_888
+    user_balance = 20_320
+
+    key = _key(balance=user_balance)
+    integration_session.add(key)
+    await integration_session.commit()
+
+    # Minimal model stub so proxy routing doesn't 400 before reaching balance check
+    mock_model = MagicMock()
+    mock_model.sats_pricing = None
+
+    # Upstream stub — never reached because balance check fires first
+    mock_upstream = MagicMock()
+    mock_upstream.prepare_headers = MagicMock(return_value={})
+
+    with (
+        patch("routstr.proxy.get_model_instance", return_value=mock_model),
+        patch("routstr.proxy.get_provider_for_model", return_value=[mock_upstream]),
+        # Patch where it is used (proxy imports it at module level)
+        patch(
+            "routstr.proxy.get_max_cost_for_model",
+            new=AsyncMock(return_value=model_cost),
+        ),
+    ):
+        response = await integration_client.post(
+            "/v1/chat/completions",
+            headers={"Authorization": f"Bearer sk-{key.hashed_key}"},
+            json={
+                "model": "gpt-4o",
+                "messages": [{"role": "user", "content": "hello"}],
+            },
+        )
+
+    assert response.status_code == 402
+    body = response.json()
+    # FastAPI wraps HTTPException detail under "detail"
+    error = body["detail"]["error"]
+    assert error["code"] == "insufficient_balance"
+    assert error["type"] == "insufficient_quota"
+    assert str(model_cost) in error["message"]
+    assert str(user_balance) in error["message"]
+
+    # Balance must be completely untouched
+    await integration_session.refresh(key)
+    assert key.balance == user_balance
+    assert key.reserved_balance == 0
+    assert key.total_spent == 0

tests/integration/test_provider_fee_enforcement.py

@@ -0,0 +1,143 @@
+from contextlib import asynccontextmanager
+from typing import Any, AsyncGenerator, cast
+from unittest.mock import patch
+
+import pytest
+
+from routstr.core.db import AsyncSession, ModelRow, UpstreamProviderRow
+from routstr.payment.models import Architecture, Model, Pricing
+from routstr.proxy import refresh_model_maps
+from routstr.upstream.base import BaseUpstreamProvider
+
+
+@pytest.mark.integration
+@pytest.mark.asyncio
+async def test_enforce_lowest_provider_fee_for_same_url(
+    integration_session: Any,
+) -> None:
+    """Test that the algorithm selects the provider with the lowest fee when URLs match."""
+
+    # 1. Create two providers with the same URL but different fees
+    url = "https://api.example.com"
+    p1 = UpstreamProviderRow(
+        provider_type="custom",
+        base_url=url,
+        api_key="key1",
+        enabled=True,
+        provider_fee=1.01,
+    )
+    p2 = UpstreamProviderRow(
+        provider_type="custom",
+        base_url=url,
+        api_key="key2",
+        enabled=True,
+        provider_fee=1.05,
+    )
+
+    integration_session.add(p1)
+    integration_session.add(p2)
+    await integration_session.commit()
+    await integration_session.refresh(p1)
+    await integration_session.refresh(p2)
+
+    assert p1.id is not None
+    assert p2.id is not None
+
+    # 2. Add a model for each provider
+    m1 = ModelRow(
+        id="model-a",
+        name="Model A",
+        created=1,
+        description="desc",
+        context_length=100,
+        architecture='{"modality": "text", "input_modalities": ["text"], "output_modalities": ["text"], "tokenizer": "tiktoken", "instruct_type": "chat"}',
+        pricing='{"prompt": 1.0, "completion": 1.0}',
+        upstream_provider_id=p1.id,
+        enabled=True,
+    )
+    m2 = ModelRow(
+        id="model-a",
+        name="Model A",
+        created=1,
+        description="desc",
+        context_length=100,
+        architecture='{"modality": "text", "input_modalities": ["text"], "output_modalities": ["text"], "tokenizer": "tiktoken", "instruct_type": "chat"}',
+        pricing='{"prompt": 1.0, "completion": 1.0}',
+        upstream_provider_id=p2.id,
+        enabled=True,
+    )
+
+    integration_session.add(m1)
+    integration_session.add(m2)
+    await integration_session.commit()
+
+    # 3. Create mock provider instances
+    class MockProvider(BaseUpstreamProvider):
+        db_id: int
+
+        def __init__(self, db_id: int, base_url: str, api_key: str, fee: float):
+            super().__init__(base_url, api_key, fee)
+            self.db_id = db_id
+            self.provider_type = "custom"
+
+        def get_cached_models(self) -> list[Model]:
+            return [
+                Model(
+                    id="model-a",
+                    name="Model A",
+                    created=1,
+                    description="desc",
+                    context_length=100,
+                    architecture=Architecture(
+                        modality="text",
+                        input_modalities=["text"],
+                        output_modalities=["text"],
+                        tokenizer="tiktoken",
+                        instruct_type="chat",
+                    ),
+                    pricing=Pricing(prompt=1.0, completion=1.0),
+                    enabled=True,
+                    upstream_provider_id=self.db_id,
+                )
+            ]
+
+        async def refresh_models_cache(self) -> None:
+            pass
+
+        def prepare_headers(self, request_headers: dict[str, str]) -> dict[str, str]:
+            return request_headers
+
+    # 4. Inject mock providers into the proxy
+    from routstr import proxy
+
+    assert p1.id is not None
+    assert p2.id is not None
+
+    # Need to patch proxy._upstreams and proxy.create_session
+    mp1: MockProvider = MockProvider(p1.id, url, "key1", 1.01)
+    mp2: MockProvider = MockProvider(p2.id, url, "key2", 1.05)
+
+    with (
+        patch("routstr.proxy._upstreams", [mp1, mp2]),
+        patch("routstr.proxy.create_session") as mock_session_factory,
+    ):
+        # Configure mock_session_factory to return a session that uses the test engine
+        @asynccontextmanager
+        async def mock_create_session() -> AsyncGenerator[AsyncSession, None]:
+            yield integration_session
+
+        mock_session_factory.return_value = mock_create_session()
+
+        await refresh_model_maps()
+
+        # 5. Check which provider is selected for 'model-a'
+        provider_map = proxy.get_provider_for_model("model-a")
+
+        # Assertions
+        assert provider_map is not None
+        assert len(provider_map) >= 1
+
+        # Check the first one, cast to MockProvider to access db_id
+        best_provider = cast(MockProvider, provider_map[0])
+        assert best_provider.db_id == p1.id
+        assert best_provider.provider_fee == 1.01

tests/integration/test_provider_management.py

@@ -3,12 +3,16 @@ Integration tests for provider management functionality.
 Tests GET /v1/providers/ endpoint for listing and managing providers.
 """
 
+import time
+from types import TracebackType
 from typing import Any, Generator
 from unittest.mock import patch
 
 import pytest
 from httpx import AsyncClient
 
+from routstr.core.admin import admin_sessions
+from routstr.core.db import UpstreamProviderRow
 from routstr.nostr.discovery import _PROVIDERS_CACHE
 
 from .utils import ResponseValidator
@@ -678,3 +682,88 @@ async def test_no_database_changes_during_provider_operations(
     assert final_diff["api_keys"]["added"] == []
     assert final_diff["api_keys"]["modified"] == []
     assert final_diff["api_keys"]["removed"] == []
+
+
+@pytest.mark.integration
+@pytest.mark.asyncio
+async def test_admin_routstr_topup_retries_transient_upstream_failure(
+    integration_client: AsyncClient,
+    integration_session: Any,
+) -> None:
+    admin_token = "test-admin-token"
+    admin_sessions[admin_token] = int(time.time()) + 3600
+    integration_client.headers["Authorization"] = f"Bearer {admin_token}"
+
+    provider = UpstreamProviderRow(
+        provider_type="routstr",
+        base_url="https://node.example",
+        api_key="sk-upstream-test",
+        enabled=True,
+        provider_fee=1.01,
+    )
+    integration_session.add(provider)
+    await integration_session.commit()
+    await integration_session.refresh(provider)
+
+    class MockResponse:
+        def __init__(self, status_code: int, data: dict[str, Any] | None = None):
+            self.status_code = status_code
+            self._data = data or {}
+            self.text = str(self._data)
+
+        def json(self) -> dict[str, Any]:
+            return self._data
+
+    class MockAsyncClient:
+        def __init__(self) -> None:
+            self.calls = 0
+
+        async def __aenter__(self) -> "MockAsyncClient":
+            return self
+
+        async def __aexit__(
+            self,
+            exc_type: type[BaseException] | None,
+            exc: BaseException | None,
+            tb: TracebackType | None,
+        ) -> None:
+            return None
+
+        async def post(
+            self, url: str, json: dict[str, Any], headers: dict[str, str]
+        ) -> MockResponse:
+            self.calls += 1
+            assert url == "https://node.example/v1/balance/lightning/invoice"
+            assert json["amount_sats"] == 10
+            assert json["purpose"] == "topup"
+            assert json["api_key"] == "sk-upstream-test"
+            assert headers["Authorization"] == "Bearer sk-upstream-test"
+
+            if self.calls == 1:
+                return MockResponse(500, {"detail": "warmup failure"})
+
+            return MockResponse(
+                200,
+                {
+                    "bolt11": "lnbc1testinvoice",
+                    "invoice_id": "invoice-123",
+                },
+            )
+
+    mock_client = MockAsyncClient()
+
+    try:
+        with patch("httpx.AsyncClient", return_value=mock_client):
+            response = await integration_client.post(
+                f"/admin/api/upstream-providers/{provider.id}/topup",
+                json={"amount": 10},
+            )
+
+        assert response.status_code == 200
+        data = response.json()
+        assert data["ok"] is True
+        assert data["topup_data"]["payment_request"] == "lnbc1testinvoice"
+        assert data["topup_data"]["invoice_id"] == "invoice-123"
+        assert mock_client.calls == 2
+    finally:
+        admin_sessions.pop(admin_token, None)

tests/integration/test_reservation_lifecycle.py

@@ -0,0 +1,268 @@
+"""
+Tests for the reservation lifecycle:
+
+  1. Reserve  → reserved_balance increases, available (total_balance) decreases.
+  2. Reserve  → revert  → reserved_balance restored, balance untouched.
+  3. Reserve  → finalise → reserved_balance released, balance charged.
+  4. Two parallel reserves, only one fits → second blocked with 402.
+  5. Three parallel reserves, two fit, third blocked with 402.
+  6. Sequential reserves until balance exhausted → next request blocked.
+
+Reservation invariant enforced by the atomic WHERE clause in pay_for_request:
+    balance - reserved_balance >= cost_per_request
+"""
+
+import asyncio
+import uuid
+
+import pytest
+from fastapi import HTTPException
+from sqlmodel.ext.asyncio.session import AsyncSession
+
+from routstr.auth import pay_for_request, revert_pay_for_request
+from routstr.core.db import ApiKey, create_session
+
+# ---------------------------------------------------------------------------
+# Helpers
+# ---------------------------------------------------------------------------
+
+def _make_key(balance: int, reserved: int = 0) -> ApiKey:
+    return ApiKey(
+        hashed_key=f"test_{uuid.uuid4().hex}",
+        balance=balance,
+        reserved_balance=reserved,
+        total_spent=0,
+        total_requests=0,
+    )
+
+
+async def _persist(session: AsyncSession, key: ApiKey) -> ApiKey:
+    session.add(key)
+    await session.commit()
+    await session.refresh(key)
+    return key
+
+
+# ---------------------------------------------------------------------------
+# Test 1 — Reserve: reserved_balance increases, available balance decreases
+# ---------------------------------------------------------------------------
+
+@pytest.mark.asyncio
+async def test_reserve_increases_reserved_balance(
+    integration_session: AsyncSession,
+) -> None:
+    """pay_for_request must increment reserved_balance by cost_per_request."""
+    cost = 100
+    key = await _persist(integration_session, _make_key(balance=500))
+
+    await pay_for_request(key, cost, integration_session)
+    await integration_session.refresh(key)
+
+    assert key.reserved_balance == cost
+    assert key.balance == 500  # balance column is NOT decremented on reserve
+    assert key.total_balance == 500 - cost  # available = balance - reserved
+
+
+# ---------------------------------------------------------------------------
+# Test 2 — Revert: reserved_balance restored, balance untouched
+# ---------------------------------------------------------------------------
+
+@pytest.mark.asyncio
+async def test_revert_releases_reservation(
+    integration_session: AsyncSession,
+) -> None:
+    """revert_pay_for_request must release the reservation without touching balance."""
+    cost = 150
+    key = await _persist(integration_session, _make_key(balance=300))
+
+    await pay_for_request(key, cost, integration_session)
+    await integration_session.refresh(key)
+    assert key.reserved_balance == cost
+
+    await revert_pay_for_request(key, integration_session, cost)
+    await integration_session.refresh(key)
+
+    assert key.reserved_balance == 0
+    assert key.balance == 300  # balance unchanged after revert
+
+
+# ---------------------------------------------------------------------------
+# Test 3 — Finalise: reservation released + balance charged
+# ---------------------------------------------------------------------------
+
+@pytest.mark.asyncio
+async def test_finalise_releases_reservation_and_charges_balance(
+    integration_session: AsyncSession,
+) -> None:
+    """adjust_payment_for_tokens must zero reserved_balance and deduct actual cost."""
+    from unittest.mock import patch
+
+    from routstr.auth import adjust_payment_for_tokens
+    from routstr.payment.cost_calculation import CostData
+
+    cost = 100
+    actual = 80  # actual < reserved → refund path
+    key = await _persist(integration_session, _make_key(balance=500))
+
+    await pay_for_request(key, cost, integration_session)
+    await integration_session.refresh(key)
+    assert key.reserved_balance == cost
+
+    cost_data = CostData(
+        base_msats=0,
+        input_msats=40,
+        output_msats=40,
+        total_msats=actual,
+        total_usd=0.0,
+        input_tokens=50,
+        output_tokens=50,
+    )
+    response_data = {"model": "test-model", "usage": {"prompt_tokens": 50, "completion_tokens": 50}}
+
+    with patch("routstr.auth.calculate_cost", return_value=cost_data):
+        await adjust_payment_for_tokens(key, response_data, integration_session, cost)
+
+    await integration_session.refresh(key)
+
+    assert key.reserved_balance == 0
+    assert key.balance == 500 - actual
+    assert key.total_spent == actual
+
+
+# ---------------------------------------------------------------------------
+# Test 4 — Concurrent: second parallel reserve blocked when balance exhausted
+# ---------------------------------------------------------------------------
+
+@pytest.mark.asyncio
+async def test_concurrent_second_reserve_blocked_when_balance_exhausted(
+    patched_db_engine: None,
+) -> None:
+    """When two requests race for the same balance, only one succeeds; the other gets 402."""
+    cost = 300
+    key_hash = f"test_concurrent_{uuid.uuid4().hex}"
+
+    async with create_session() as session:
+        key = ApiKey(
+            hashed_key=key_hash,
+            balance=300,       # exactly enough for ONE reservation
+            reserved_balance=0,
+            total_spent=0,
+            total_requests=0,
+        )
+        session.add(key)
+        await session.commit()
+
+    results: list[str] = []
+
+    async def attempt_reserve() -> None:
+        async with create_session() as session:
+            fresh_key = await session.get(ApiKey, key_hash)
+            assert fresh_key is not None
+            try:
+                await pay_for_request(fresh_key, cost, session)
+                results.append("success")
+            except HTTPException as exc:
+                assert exc.status_code == 402
+                results.append("blocked")
+
+    await asyncio.gather(attempt_reserve(), attempt_reserve())
+
+    assert sorted(results) == ["blocked", "success"], (
+        f"Expected exactly one success and one 402, got: {results}"
+    )
+
+    async with create_session() as session:
+        final = await session.get(ApiKey, key_hash)
+        assert final is not None
+
+    # reserved_balance must equal exactly one reservation (not two)
+    assert final.reserved_balance == cost, (
+        f"Expected reserved_balance={cost}, got {final.reserved_balance}"
+    )
+    assert final.balance == 300, "Balance column must not be modified by reservation"
+
+
+# ---------------------------------------------------------------------------
+# Test 5 — Concurrent: three requests, two fit, third blocked
+# ---------------------------------------------------------------------------
+
+@pytest.mark.asyncio
+async def test_three_parallel_reserves_third_blocked(
+    patched_db_engine: None,
+) -> None:
+    """Balance covers two reservations exactly; the third concurrent request must be blocked."""
+    cost = 100
+    key_hash = f"test_three_parallel_{uuid.uuid4().hex}"
+
+    async with create_session() as session:
+        key = ApiKey(
+            hashed_key=key_hash,
+            balance=200,       # fits exactly 2 reservations of 100
+            reserved_balance=0,
+            total_spent=0,
+            total_requests=0,
+        )
+        session.add(key)
+        await session.commit()
+
+    results: list[str] = []
+
+    async def attempt_reserve() -> None:
+        async with create_session() as session:
+            fresh_key = await session.get(ApiKey, key_hash)
+            assert fresh_key is not None
+            try:
+                await pay_for_request(fresh_key, cost, session)
+                results.append("success")
+            except HTTPException as exc:
+                assert exc.status_code == 402
+                results.append("blocked")
+
+    await asyncio.gather(
+        attempt_reserve(),
+        attempt_reserve(),
+        attempt_reserve(),
+    )
+
+    successes = results.count("success")
+    blocked = results.count("blocked")
+
+    assert successes == 2, f"Expected 2 successes, got {successes}: {results}"
+    assert blocked == 1, f"Expected 1 blocked, got {blocked}: {results}"
+
+    async with create_session() as session:
+        final = await session.get(ApiKey, key_hash)
+        assert final is not None
+
+    assert final.reserved_balance == cost * 2, (
+        f"Expected reserved_balance={cost * 2}, got {final.reserved_balance}"
+    )
+    assert final.balance == 200, "Balance column must not be modified by reservation"
+
+
+# ---------------------------------------------------------------------------
+# Test 6 — Sequential exhaustion: reserve until empty, next request blocked
+# ---------------------------------------------------------------------------
+
+@pytest.mark.asyncio
+async def test_sequential_reserves_block_when_balance_exhausted(
+    integration_session: AsyncSession,
+) -> None:
+    """Repeated reservations should block as soon as available balance drops below cost."""
+    cost = 100
+    key = await _persist(integration_session, _make_key(balance=250))
+
+    # First two succeed (100 + 100 = 200 ≤ 250)
+    await pay_for_request(key, cost, integration_session)
+    await pay_for_request(key, cost, integration_session)
+    await integration_session.refresh(key)
+    assert key.reserved_balance == 200
+    assert key.total_balance == 50  # 250 - 200
+
+    # Third: only 50 available, need 100 → blocked
+    with pytest.raises(HTTPException) as exc_info:
+        await pay_for_request(key, cost, integration_session)
+
+    assert exc_info.value.status_code == 402
+    await integration_session.refresh(key)
+    assert key.reserved_balance == 200  # unchanged after failed reserve

tests/unit/test_balance.py

@@ -0,0 +1,250 @@
+import json
+from unittest.mock import AsyncMock, MagicMock, patch
+
+import pytest
+from fastapi.responses import JSONResponse
+
+from routstr.balance import refund_wallet_endpoint
+from routstr.core.db import ApiKey, CashuTransaction
+
+
+def _make_cashu_tx(
+    token: str,
+    amount: int,
+    unit: str,
+    type: str = "out",
+    request_id: str | None = "req-abc",
+    swept: bool = False,
+    collected: bool = False,
+) -> CashuTransaction:
+    tx = CashuTransaction(token=token, amount=amount, unit=unit, type=type, request_id=request_id)
+    tx.swept = swept
+    tx.collected = collected
+    return tx
+
+
+def _exec_result(tx: CashuTransaction | None) -> MagicMock:
+    result = MagicMock()
+    result.first.return_value = tx
+    return result
+
+
+@pytest.mark.asyncio
+async def test_refund_x_cashu_returns_token() -> None:
+    x_cashu_token = "cashuAtest_token_value"
+    in_tx = _make_cashu_tx(token=x_cashu_token, amount=0, unit="msat", type="in", request_id="req-abc")
+    out_tx = _make_cashu_tx(token="cashuArefund_token", amount=1000, unit="msat", type="out", request_id="req-abc")
+
+    session = MagicMock()
+    session.exec = AsyncMock(side_effect=[_exec_result(in_tx), _exec_result(out_tx)])
+    session.add = MagicMock()
+    session.commit = AsyncMock()
+
+    result = await refund_wallet_endpoint(
+        authorization="Bearer sk-somekey",
+        x_cashu=x_cashu_token,
+        session=session,
+    )
+
+    assert isinstance(result, JSONResponse)
+    body = json.loads(result.body)
+    assert body["token"] == "cashuArefund_token"
+    assert body["msats"] == "1000"
+    assert result.headers["X-Cashu"] == "cashuArefund_token"
+    assert out_tx.collected is True
+
+
+@pytest.mark.asyncio
+async def test_refund_x_cashu_sat_unit() -> None:
+    x_cashu_token = "cashuAsat_token"
+    in_tx = _make_cashu_tx(token=x_cashu_token, amount=0, unit="sat", type="in", request_id="req-sat")
+    out_tx = _make_cashu_tx(token="cashuArefund_sat", amount=500, unit="sat", type="out", request_id="req-sat")
+
+    session = MagicMock()
+    session.exec = AsyncMock(side_effect=[_exec_result(in_tx), _exec_result(out_tx)])
+    session.add = MagicMock()
+    session.commit = AsyncMock()
+
+    result = await refund_wallet_endpoint(
+        authorization="Bearer sk-somekey",
+        x_cashu=x_cashu_token,
+        session=session,
+    )
+
+    assert isinstance(result, JSONResponse)
+    body = json.loads(result.body)
+    assert body["token"] == "cashuArefund_sat"
+    assert body["sats"] == "500"
+    assert "msats" not in body
+    assert result.headers["X-Cashu"] == "cashuArefund_sat"
+
+
+@pytest.mark.asyncio
+async def test_refund_x_cashu_not_found_raises_404() -> None:
+    from fastapi import HTTPException
+
+    session = MagicMock()
+    session.exec = AsyncMock(return_value=_exec_result(None))
+
+    with pytest.raises(HTTPException) as exc_info:
+        await refund_wallet_endpoint(
+            authorization="Bearer sk-somekey",
+            x_cashu="cashuAmissing_token",
+            session=session,
+        )
+
+    assert exc_info.value.status_code == 404
+
+
+@pytest.mark.asyncio
+async def test_refund_x_cashu_swept_raises_410() -> None:
+    from fastapi import HTTPException
+
+    in_tx = _make_cashu_tx(token="cashuAswept_token", amount=0, unit="msat", type="in", request_id="req-swept")
+    out_tx = _make_cashu_tx(token="cashuAswept", amount=100, unit="msat", type="out", request_id="req-swept", swept=True)
+
+    session = MagicMock()
+    session.exec = AsyncMock(side_effect=[_exec_result(in_tx), _exec_result(out_tx)])
+
+    with pytest.raises(HTTPException) as exc_info:
+        await refund_wallet_endpoint(
+            authorization="Bearer sk-somekey",
+            x_cashu="cashuAswept_token",
+            session=session,
+        )
+
+    assert exc_info.value.status_code == 410
+
+
+# ---------------------------------------------------------------------------
+# source field defaults
+# ---------------------------------------------------------------------------
+
+
+def test_cashu_transaction_source_defaults_to_x_cashu() -> None:
+    tx = CashuTransaction(token="cashuAtest", amount=100, unit="msat")
+    assert tx.source == "x-cashu"
+
+
+def test_cashu_transaction_source_can_be_apikey() -> None:
+    tx = CashuTransaction(token="cashuAtest", amount=100, unit="msat", source="apikey")
+    assert tx.source == "apikey"
+
+
+# ---------------------------------------------------------------------------
+# apikey-based refund: token logging and CashuTransaction storage
+# ---------------------------------------------------------------------------
+
+
+def _make_api_key(
+    balance: int = 5000,
+    refund_currency: str | None = "sat",
+    refund_mint_url: str | None = "https://mint.example.com",
+    refund_address: str | None = None,
+    parent_key_hash: str | None = None,
+) -> ApiKey:
+    key = ApiKey(hashed_key="testhash")
+    key.balance = balance
+    key.reserved_balance = 0
+    key.refund_currency = refund_currency
+    key.refund_mint_url = refund_mint_url
+    key.refund_address = refund_address
+    key.parent_key_hash = parent_key_hash
+    key.total_spent = 0
+    key.total_requests = 0
+    return key
+
+
+@pytest.mark.asyncio
+async def test_apikey_refund_stores_cashu_transaction_with_apikey_source() -> None:
+    key = _make_api_key(balance=5000, refund_currency="sat")
+    refund_token = "cashuArefund_apikey_token"
+
+    session = MagicMock()
+    session.add = MagicMock()
+    session.commit = AsyncMock()
+
+    with (
+        patch("routstr.balance.validate_bearer_key", AsyncMock(return_value=key)),
+        patch("routstr.balance.get_billing_key", AsyncMock(return_value=key)),
+        patch("routstr.balance.send_token", AsyncMock(return_value=refund_token)),
+        patch("routstr.balance.store_cashu_transaction", AsyncMock()) as mock_store,
+        patch("routstr.balance._refund_cache_get", AsyncMock(return_value=None)),
+        patch("routstr.balance._refund_cache_set", AsyncMock()),
+    ):
+        result = await refund_wallet_endpoint(
+            authorization="Bearer sk-testhash",
+            x_cashu=None,
+            session=session,
+        )
+
+    assert isinstance(result, dict)
+    assert result["token"] == refund_token
+
+    mock_store.assert_awaited_once()
+    call_kwargs = mock_store.call_args.kwargs
+    assert call_kwargs["source"] == "apikey"
+    assert call_kwargs["token"] == refund_token
+    assert call_kwargs["typ"] == "out"
+
+
+@pytest.mark.asyncio
+async def test_apikey_refund_logs_token() -> None:
+    key = _make_api_key(balance=5000, refund_currency="sat")
+    refund_token = "cashuAlogged_token"
+
+    session = MagicMock()
+    session.add = MagicMock()
+    session.commit = AsyncMock()
+
+    with (
+        patch("routstr.balance.validate_bearer_key", AsyncMock(return_value=key)),
+        patch("routstr.balance.get_billing_key", AsyncMock(return_value=key)),
+        patch("routstr.balance.send_token", AsyncMock(return_value=refund_token)),
+        patch("routstr.balance.store_cashu_transaction", AsyncMock()),
+        patch("routstr.balance._refund_cache_get", AsyncMock(return_value=None)),
+        patch("routstr.balance._refund_cache_set", AsyncMock()),
+        patch("routstr.balance.logger") as mock_logger,
+    ):
+        await refund_wallet_endpoint(
+            authorization="Bearer sk-testhash",
+            x_cashu=None,
+            session=session,
+        )
+
+    calls = [str(c) for c in mock_logger.info.call_args_list]
+    assert any("cashu token issued" in c for c in calls)
+
+
+@pytest.mark.asyncio
+async def test_apikey_refund_log_includes_path() -> None:
+    key = _make_api_key(balance=5000, refund_currency="sat")
+    refund_token = "cashuApath_token"
+
+    session = MagicMock()
+    session.add = MagicMock()
+    session.commit = AsyncMock()
+
+    with (
+        patch("routstr.balance.validate_bearer_key", AsyncMock(return_value=key)),
+        patch("routstr.balance.get_billing_key", AsyncMock(return_value=key)),
+        patch("routstr.balance.send_token", AsyncMock(return_value=refund_token)),
+        patch("routstr.balance.store_cashu_transaction", AsyncMock()),
+        patch("routstr.balance._refund_cache_get", AsyncMock(return_value=None)),
+        patch("routstr.balance._refund_cache_set", AsyncMock()),
+        patch("routstr.balance.logger") as mock_logger,
+    ):
+        await refund_wallet_endpoint(
+            authorization="Bearer sk-testhash",
+            x_cashu=None,
+            session=session,
+        )
+
+    # Find the "cashu token issued" call and verify extra contains the path
+    token_issued_calls = [
+        c for c in mock_logger.info.call_args_list
+        if c.args and "cashu token issued" in c.args[0]
+    ]
+    assert len(token_issued_calls) == 1
+    extra = token_issued_calls[0].kwargs.get("extra", {})
+    assert extra.get("path") == "/v1/wallet/refund"

tests/unit/test_nostr_analytics.py

@@ -0,0 +1,267 @@
+from __future__ import annotations
+
+import asyncio
+from typing import Any
+
+import pytest
+
+from routstr.nostr import analytics
+
+
+def test_aggregate_top_model_usage_sums_metrics() -> None:
+    model_usage_mix = {
+        "top_models": ["openai/gpt-4o", "anthropic/claude-3.5-sonnet"],
+        "metrics": [
+            {
+                "model_counts": {
+                    "openai/gpt-4o": 4,
+                    "anthropic/claude-3.5-sonnet": 2,
+                },
+                "model_revenue_msats": {
+                    "openai/gpt-4o": 1500,
+                    "anthropic/claude-3.5-sonnet": 700,
+                },
+                "model_tokens": {
+                    "openai/gpt-4o": 1200,
+                    "anthropic/claude-3.5-sonnet": 600,
+                },
+                "others": 1,
+                "others_revenue_msats": 300,
+                "others_tokens": 200,
+            },
+            {
+                "model_counts": {
+                    "openai/gpt-4o": 3,
+                    "anthropic/claude-3.5-sonnet": 1,
+                },
+                "model_revenue_msats": {
+                    "openai/gpt-4o": 1000,
+                    "anthropic/claude-3.5-sonnet": 500,
+                },
+                "model_tokens": {
+                    "openai/gpt-4o": 800,
+                    "anthropic/claude-3.5-sonnet": 300,
+                },
+                "others": 2,
+                "others_revenue_msats": 450,
+                "others_tokens": 350,
+            },
+        ],
+    }
+
+    rows, others = analytics._aggregate_top_model_usage(model_usage_mix)
+    assert rows == [
+        {
+            "model": "openai/gpt-4o",
+            "successful_requests": 7,
+            "revenue_msats": 2500.0,
+            "total_tokens": 2000,
+        },
+        {
+            "model": "anthropic/claude-3.5-sonnet",
+            "successful_requests": 3,
+            "revenue_msats": 1200.0,
+            "total_tokens": 900,
+        },
+    ]
+    assert others == {
+        "successful_requests": 3,
+        "revenue_msats": 750.0,
+        "total_tokens": 550,
+    }
+
+
+def test_build_stats_snapshot_payload_schema_and_shape(monkeypatch: Any) -> None:
+    seen_windows: set[tuple[int, int]] = set()
+
+    def fake_usage_dashboard(
+        *, interval: int, hours: int, error_limit: int, model_limit: int
+    ) -> dict[str, Any]:
+        seen_windows.add((hours, interval))
+        assert error_limit == 1
+        assert model_limit == 20
+        return {
+            "summary": {
+                "total_requests": hours,
+                "successful_chat_completions": max(1, hours - 1),
+                "failed_requests": 2,
+                "success_rate": 90.0,
+                "unique_models_count": 2,
+                "input_tokens": 2000,
+                "output_tokens": 1000,
+                "total_tokens": 3000,
+                "revenue_msats": 9000.0,
+                "refunds_msats": 1000.0,
+                "net_revenue_msats": 8000.0,
+                "revenue_sats": 9.0,
+                "refunds_sats": 1.0,
+                "net_revenue_sats": 8.0,
+            },
+            "model_usage_mix": {
+                "top_models": ["openai/gpt-4o"],
+                "metrics": [
+                    {
+                        "timestamp": "2026-03-02 10:00:00",
+                        "model_counts": {"openai/gpt-4o": hours},
+                        "model_revenue_msats": {"openai/gpt-4o": float(hours * 100)},
+                        "model_tokens": {"openai/gpt-4o": hours * 10},
+                        "others": 4,
+                        "others_revenue_msats": 1800.0,
+                        "others_tokens": 400,
+                    }
+                ],
+            },
+        }
+
+    monkeypatch.setattr(
+        analytics.log_manager, "get_usage_dashboard", fake_usage_dashboard
+    )
+    monkeypatch.setattr(analytics.settings, "npub", "npub1example")
+    monkeypatch.setattr(analytics.settings, "http_url", "https://node.example.com")
+    monkeypatch.setattr(analytics.settings, "onion_url", "")
+
+    payload = analytics.build_stats_snapshot_payload(
+        "provider123",
+        public_key_hex="ab" * 32,
+        generated_at=1772451600,
+    )
+
+    assert payload["schema"] == analytics.ANALYTICS_SCHEMA
+    assert payload["provider_id"] == "provider123"
+    assert payload["window_hours"] == 24
+    assert payload["interval_minutes"] == 60
+    assert payload["endpoint_urls"] == ["https://node.example.com"]
+    assert seen_windows == {
+        (24, 60),
+        (7 * 24, 6 * 60),
+        (30 * 24, 24 * 60),
+        (90 * 24, 24 * 60),
+        (365 * 24, 7 * 24 * 60),
+    }
+    assert set(payload["windows"].keys()) == {"24h", "7d", "30d", "3m", "1y"}
+    assert payload["windows"]["1y"]["interval_minutes"] == 7 * 24 * 60
+    assert payload["summary"]["total_requests"] == 24
+    assert payload["top_model_usage"] == [
+        {
+            "model": "openai/gpt-4o",
+            "successful_requests": 24,
+            "revenue_msats": 2400.0,
+            "total_tokens": 240,
+        }
+    ]
+    assert payload["others_usage"] == {
+        "successful_requests": 4,
+        "revenue_msats": 1800.0,
+        "total_tokens": 400,
+    }
+
+
+def test_create_stats_snapshot_event_tags() -> None:
+    private_key_hex = "11" * 32
+    event = analytics.create_stats_snapshot_event(
+        private_key_hex,
+        "provider123",
+        payload_json='{"schema":"routstr.analytics.snapshot.v1"}',
+        d_tag="provider123:stats",
+    )
+
+    tags = event["tags"]
+    assert ["d", "provider123:stats"] in tags
+    assert ["provider", "provider123"] in tags
+    assert ["schema", analytics.ANALYTICS_SCHEMA] in tags
+    assert all(tag[0] != "period" for tag in tags)
+
+
+def test_fingerprint_payload_ignores_generated_at() -> None:
+    a = {"schema": analytics.ANALYTICS_SCHEMA, "generated_at": 1000, "summary": {"x": 1}}
+    b = {"schema": analytics.ANALYTICS_SCHEMA, "generated_at": 2000, "summary": {"x": 1}}
+
+    assert analytics._fingerprint_payload(a) == analytics._fingerprint_payload(b)
+
+
+@pytest.mark.asyncio
+async def test_publish_usage_analytics_skips_when_disabled(monkeypatch: Any) -> None:
+    delays: list[int] = []
+
+    async def fake_sleep(seconds: int) -> None:
+        delays.append(seconds)
+        raise asyncio.CancelledError()
+
+    def fail_build(*args: Any, **kwargs: Any) -> dict[str, Any]:
+        raise AssertionError("build_stats_snapshot_payload should not be called")
+
+    monkeypatch.setattr(analytics.settings, "enable_analytics_sharing", False)
+    monkeypatch.setattr(analytics, "build_stats_snapshot_payload", fail_build)
+    monkeypatch.setattr(analytics.asyncio, "sleep", fake_sleep)
+
+    await analytics.publish_usage_analytics()
+
+    assert delays == [analytics.DISABLED_POLL_SECONDS]
+
+
+@pytest.mark.asyncio
+async def test_publish_usage_analytics_skips_without_nsec(monkeypatch: Any) -> None:
+    delays: list[int] = []
+
+    async def fake_sleep(seconds: int) -> None:
+        delays.append(seconds)
+        raise asyncio.CancelledError()
+
+    def fail_build(*args: Any, **kwargs: Any) -> dict[str, Any]:
+        raise AssertionError("build_stats_snapshot_payload should not be called")
+
+    monkeypatch.setattr(analytics.settings, "enable_analytics_sharing", True)
+    monkeypatch.setattr(analytics.settings, "nsec", "")
+    monkeypatch.setattr(analytics, "build_stats_snapshot_payload", fail_build)
+    monkeypatch.setattr(analytics.asyncio, "sleep", fake_sleep)
+
+    await analytics.publish_usage_analytics()
+
+    assert delays == [analytics.DISABLED_POLL_SECONDS]
+
+
+@pytest.mark.asyncio
+async def test_publish_usage_analytics_dedupes_unchanged_payload(monkeypatch: Any) -> None:
+    published_events: list[dict[str, Any]] = []
+    sleep_calls = 0
+
+    async def fake_sleep(seconds: int) -> None:
+        nonlocal sleep_calls
+        sleep_calls += 1
+        if sleep_calls >= 2:
+            raise asyncio.CancelledError()
+
+    def fake_build_payload(
+        provider_id: str,
+        *,
+        public_key_hex: str,
+        generated_at: int,
+        window_hours: int = 24,
+        interval_minutes: int = 60,
+        model_limit: int = 10,
+    ) -> dict[str, Any]:
+        _ = (public_key_hex, generated_at, window_hours, interval_minutes, model_limit)
+        return {
+            "schema": analytics.ANALYTICS_SCHEMA,
+            "generated_at": generated_at,
+            "provider_id": provider_id,
+            "summary": {"total_requests": 1},
+        }
+
+    async def fake_publish(relay_url: str, event: dict[str, Any]) -> bool:
+        _ = relay_url
+        published_events.append(event)
+        return True
+
+    monkeypatch.setattr(analytics.settings, "enable_analytics_sharing", True)
+    monkeypatch.setattr(analytics.settings, "nsec", "11" * 32)
+    monkeypatch.setattr(analytics.settings, "relays", ["wss://relay.example.com"])
+    monkeypatch.setattr(analytics.settings, "provider_id", "")
+    monkeypatch.setattr(analytics, "build_stats_snapshot_payload", fake_build_payload)
+    monkeypatch.setattr(analytics, "publish_to_relay", fake_publish)
+    monkeypatch.setattr(analytics.asyncio, "sleep", fake_sleep)
+
+    await analytics.publish_usage_analytics()
+
+    assert len(published_events) == 1
+    assert ["schema", analytics.ANALYTICS_SCHEMA] in published_events[0].get("tags", [])

tests/unit/test_settings.py

@@ -2,6 +2,7 @@ import os
 
 import pytest
 from sqlalchemy.ext.asyncio import create_async_engine
+from sqlmodel import text
 from sqlmodel.ext.asyncio.session import AsyncSession
 
 from routstr.core.settings import SettingsService
@@ -11,6 +12,7 @@ from routstr.core.settings import SettingsService
 async def test_settings_seed_from_env_and_persist() -> None:
     os.environ["UPSTREAM_BASE_URL"] = "https://api.test/v1"
     os.environ.pop("ONION_URL", None)
+    os.environ.pop("ENABLE_ANALYTICS_SHARING", None)
 
     engine = create_async_engine("sqlite+aiosqlite:///:memory:")
     async with AsyncSession(engine, expire_on_commit=False) as session:
@@ -19,19 +21,53 @@ async def test_settings_seed_from_env_and_persist() -> None:
         assert settings.upstream_base_url == "https://api.test/v1"
         # ONION_URL may be empty if not discoverable
         assert isinstance(settings.onion_url, str)
+        assert settings.enable_analytics_sharing is True
 
 
 @pytest.mark.asyncio
 async def test_settings_db_precedence_over_env() -> None:
     os.environ["UPSTREAM_BASE_URL"] = "https://api.env/v1"
+    os.environ["ENABLE_ANALYTICS_SHARING"] = "true"
 
     engine = create_async_engine("sqlite+aiosqlite:///:memory:")
     async with AsyncSession(engine, expire_on_commit=False) as session:
         _ = await SettingsService.initialize(session)
-        updated = await SettingsService.update({"name": "DBName"}, session)
+        updated = await SettingsService.update(
+            {"name": "DBName", "enable_analytics_sharing": False}, session
+        )
         assert updated.name == "DBName"
+        assert updated.enable_analytics_sharing is False
 
         # Change env and re-initialize; DB should still win
         os.environ["NAME"] = "EnvName"
+        os.environ["ENABLE_ANALYTICS_SHARING"] = "true"
         again = await SettingsService.initialize(session)
         assert again.name == "DBName"
+        assert again.enable_analytics_sharing is False
+
+
+@pytest.mark.asyncio
+async def test_settings_initialize_discards_unknown_keys() -> None:
+    engine = create_async_engine("sqlite+aiosqlite:///:memory:")
+    async with AsyncSession(engine, expire_on_commit=False) as session:
+        _ = await SettingsService.initialize(session)
+
+        # Simulate older persisted key name and an unknown key.
+        await session.exec(  # type: ignore
+            text(
+                "UPDATE settings SET data = :data WHERE id = 1"
+            ).bindparams(
+                data='{"name":"LegacyNode","nostr_analytics_enabled":false,"unknown_key":123}'
+            )
+        )
+        await session.commit()
+
+        reloaded = await SettingsService.initialize(session)
+        assert reloaded.name == "LegacyNode"
+        assert reloaded.enable_analytics_sharing is True
+
+        row = await session.exec(text("SELECT data FROM settings WHERE id = 1"))  # type: ignore
+        stored_data = row.first()[0]
+        assert '"enable_analytics_sharing": true' in stored_data
+        assert "nostr_analytics_enabled" not in stored_data
+        assert "unknown_key" not in stored_data

tests/unit/test_upstream_routstr.py

@@ -0,0 +1,76 @@
+from types import TracebackType
+from unittest.mock import Mock
+
+import httpx
+import pytest
+
+from routstr.upstream.routstr import RoutstrUpstreamProvider
+
+
+class DummyAsyncClient:
+    def __init__(self, response: Mock | None = None, error: Exception | None = None):
+        self.response = response
+        self.error = error
+        self.calls: list[dict[str, object]] = []
+
+    async def __aenter__(self) -> "DummyAsyncClient":
+        return self
+
+    async def __aexit__(
+        self,
+        exc_type: type[BaseException] | None,
+        exc: BaseException | None,
+        tb: TracebackType | None,
+    ) -> bool:
+        return False
+
+    async def get(
+        self, url: str, headers: dict[str, str], timeout: float
+    ) -> Mock:
+        self.calls.append({"url": url, "headers": headers, "timeout": timeout})
+        if self.error is not None:
+            raise self.error
+        assert self.response is not None
+        return self.response
+
+
+@pytest.mark.asyncio
+async def test_get_balance_omits_auth_header_when_api_key_missing(
+    monkeypatch: pytest.MonkeyPatch,
+) -> None:
+    response = Mock()
+    response.json.return_value = {"balance_msats": 42000}
+    response.raise_for_status.return_value = None
+
+    client = DummyAsyncClient(response=response)
+    monkeypatch.setattr("routstr.upstream.routstr.httpx.AsyncClient", lambda: client)
+
+    provider = RoutstrUpstreamProvider(base_url="https://node.example", api_key="")
+
+    balance = await provider.get_balance()
+
+    assert balance == 42.0
+    assert client.calls == [
+        {
+            "url": "https://node.example/v1/balance/info",
+            "headers": {},
+            "timeout": 10.0,
+        }
+    ]
+
+
+@pytest.mark.asyncio
+async def test_get_balance_returns_none_on_connect_timeout(
+    monkeypatch: pytest.MonkeyPatch,
+) -> None:
+    client = DummyAsyncClient(error=httpx.ConnectTimeout("timed out"))
+    monkeypatch.setattr("routstr.upstream.routstr.httpx.AsyncClient", lambda: client)
+
+    provider = RoutstrUpstreamProvider(
+        base_url="https://node.example",
+        api_key="secret",
+    )
+
+    balance = await provider.get_balance()
+
+    assert balance is None

tests/unit/test_wallet.py

@@ -108,6 +108,92 @@ async def test_credit_balance() -> None:
             assert mock_session.refresh.called
 
 
+@pytest.mark.asyncio
+async def test_swap_to_primary_mint_insufficient_for_fees() -> None:
+    """Token amount is less than melt_quote.amount + melt_quote.fee_reserve."""
+    from routstr.wallet import swap_to_primary_mint
+
+    mock_token = Mock()
+    mock_token.mint = "http://foreign:3338"
+    mock_token.unit = "sat"
+    mock_token.amount = 404
+    mock_token.keysets = ["keyset1"]
+    mock_token.proofs = [{"amount": 404}]
+
+    mock_token_wallet = Mock()
+    mock_token_wallet.load_mint = AsyncMock()
+    mock_token_wallet.load_proofs = AsyncMock()
+
+    mock_primary_wallet = Mock()
+    mock_primary_wallet.load_mint = AsyncMock()
+    mock_primary_wallet.load_proofs = AsyncMock()
+
+    mock_mint_quote = Mock()
+    mock_mint_quote.quote = "mint_quote_123"
+    mock_mint_quote.request = "lnbc1..."
+    mock_primary_wallet.request_mint = AsyncMock(return_value=mock_mint_quote)
+
+    mock_melt_quote = Mock()
+    mock_melt_quote.quote = "melt_quote_123"
+    mock_melt_quote.amount = 400
+    mock_melt_quote.fee_reserve = 12  # total needed: 412 > 404
+    mock_token_wallet.melt_quote = AsyncMock(return_value=mock_melt_quote)
+
+    from routstr.core.settings import settings
+
+    with patch.object(settings, "primary_mint", "http://primary:3338"):
+        with patch.object(settings, "primary_mint_unit", "sat"):
+            with patch("routstr.wallet.get_wallet", return_value=mock_primary_wallet):
+                with pytest.raises(ValueError, match="insufficient to cover melt fees"):
+                    await swap_to_primary_mint(mock_token, mock_token_wallet)
+
+    # melt should never have been called
+    mock_token_wallet.melt.assert_not_called()
+
+
+@pytest.mark.asyncio
+async def test_swap_to_primary_mint_melt_error_wrapped() -> None:
+    """Melt failure from cashu lib is wrapped as ValueError."""
+    from routstr.wallet import swap_to_primary_mint
+
+    mock_token = Mock()
+    mock_token.mint = "http://foreign:3338"
+    mock_token.unit = "sat"
+    mock_token.amount = 5000
+    mock_token.keysets = ["keyset1"]
+    mock_token.proofs = [{"amount": 5000}]
+
+    mock_token_wallet = Mock()
+    mock_token_wallet.load_mint = AsyncMock()
+    mock_token_wallet.load_proofs = AsyncMock()
+
+    mock_primary_wallet = Mock()
+    mock_primary_wallet.load_mint = AsyncMock()
+    mock_primary_wallet.load_proofs = AsyncMock()
+
+    mock_mint_quote = Mock()
+    mock_mint_quote.quote = "mint_quote_456"
+    mock_mint_quote.request = "lnbc1..."
+    mock_primary_wallet.request_mint = AsyncMock(return_value=mock_mint_quote)
+
+    mock_melt_quote = Mock()
+    mock_melt_quote.quote = "melt_quote_456"
+    mock_melt_quote.amount = 4940
+    mock_melt_quote.fee_reserve = 50  # total 4990 < 5000, passes fee check
+    mock_token_wallet.melt_quote = AsyncMock(return_value=mock_melt_quote)
+    mock_token_wallet.melt = AsyncMock(
+        side_effect=Exception("Provided: 5000, needed: 5100 (Code: 11000)")
+    )
+
+    from routstr.core.settings import settings
+
+    with patch.object(settings, "primary_mint", "http://primary:3338"):
+        with patch.object(settings, "primary_mint_unit", "sat"):
+            with patch("routstr.wallet.get_wallet", return_value=mock_primary_wallet):
+                with pytest.raises(ValueError, match="Failed to melt token"):
+                    await swap_to_primary_mint(mock_token, mock_token_wallet)
+
+
 @pytest.mark.asyncio
 async def test_recieve_token_untrusted_mint() -> None:
     mock_wallet = Mock()
@@ -131,3 +217,77 @@ async def test_recieve_token_untrusted_mint() -> None:
                 assert amount == 900
                 assert unit == "sat"
                 assert mint == "http://mint:3338"
+
+
+@pytest.mark.asyncio
+async def test_swap_to_primary_mint_success() -> None:
+    """Test successful swap with dynamic fee calculation."""
+    from routstr.wallet import swap_to_primary_mint
+
+    mock_token = Mock()
+    mock_token.mint = "http://foreign:3338"
+    mock_token.unit = "sat"
+    mock_token.amount = 1000
+    mock_token.keysets = ["keyset1"]
+    mock_token.proofs = [{"amount": 1000}]
+
+    mock_token_wallet = Mock()
+    mock_token_wallet.load_mint = AsyncMock()
+    mock_token_wallet.load_proofs = AsyncMock()
+
+    mock_primary_wallet = Mock()
+    mock_primary_wallet.load_mint = AsyncMock()
+    mock_primary_wallet.load_proofs = AsyncMock()
+
+    # Mocks for the estimation phase
+    # 1. request_mint(dummy_amount=1000) -> invoice_dummy
+    # 2. melt_quote(invoice_dummy) -> fee=10
+
+    # Mocks for the execution phase
+    # 3. request_mint(minted_amount=990) -> invoice_real
+    # 4. melt_quote(invoice_real) -> amount=990, fee=10
+    # 5. melt() -> success
+    # 6. mint() -> success
+
+    mock_mint_quote_dummy = Mock(quote="dummy_quote", request="lnbc_dummy")
+    mock_mint_quote_real = Mock(quote="real_quote", request="lnbc_real")
+
+    # side_effect for request_mint to return dummy then real
+    mock_primary_wallet.request_mint = AsyncMock(
+        side_effect=[mock_mint_quote_dummy, mock_mint_quote_real]
+    )
+
+    mock_melt_quote_dummy = Mock(amount=1000, fee_reserve=10)
+    mock_melt_quote_real = Mock(amount=990, fee_reserve=10)
+
+    # side_effect for melt_quote
+    mock_token_wallet.melt_quote = AsyncMock(
+        side_effect=[mock_melt_quote_dummy, mock_melt_quote_real]
+    )
+
+    mock_token_wallet.melt = AsyncMock(return_value="melted_proofs")
+    mock_primary_wallet.mint = AsyncMock(return_value="minted_proofs")
+
+    from routstr.core.settings import settings
+
+    with patch.object(settings, "primary_mint", "http://primary:3338"):
+        with patch.object(settings, "primary_mint_unit", "sat"):
+            with patch("routstr.wallet.get_wallet", return_value=mock_primary_wallet):
+                amount, unit, mint = await swap_to_primary_mint(
+                    mock_token, mock_token_wallet
+                )
+
+                assert amount == 990  # 1000 - 10
+                assert unit == "sat"
+                assert mint == "http://primary:3338"
+
+                # Verify call order/counts
+                assert mock_primary_wallet.request_mint.call_count == 2
+                # First call with full amount for estimation
+                mock_primary_wallet.request_mint.assert_any_call(1000)
+                # Second call with calculated amount
+                mock_primary_wallet.request_mint.assert_any_call(990)
+
+                assert mock_token_wallet.melt_quote.call_count == 2
+                assert mock_token_wallet.melt.called
+                assert mock_primary_wallet.mint.called

tests/unit/test_x_cashu_cost_sats.py

@@ -0,0 +1,216 @@
+import json
+import os
+from unittest.mock import AsyncMock, patch
+
+import httpx
+import pytest
+
+os.environ.setdefault("UPSTREAM_BASE_URL", "http://test")
+os.environ.setdefault("UPSTREAM_API_KEY", "test")
+
+from routstr.payment.cost_calculation import CostData  # noqa: E402
+from routstr.upstream.base import BaseUpstreamProvider  # noqa: E402
+
+
+def _make_provider() -> BaseUpstreamProvider:
+    return BaseUpstreamProvider(base_url="http://test", api_key="test-key")
+
+
+def _make_httpx_response(status_code: int = 200) -> httpx.Response:
+    return httpx.Response(status_code, headers={})
+
+
+def _make_cost_data(total_msats: int = 5000) -> CostData:
+    return CostData(
+        base_msats=0,
+        input_msats=3000,
+        output_msats=2000,
+        total_msats=total_msats,
+        total_usd=0.00025,
+        input_tokens=100,
+        output_tokens=50,
+    )
+
+
+# ---------------------------------------------------------------------------
+# Non-streaming (chat completions)
+# ---------------------------------------------------------------------------
+
+@pytest.mark.asyncio
+async def test_non_streaming_includes_cost_sats() -> None:
+    provider = _make_provider()
+    cost_data = _make_cost_data(total_msats=5000)
+
+    response_body = {
+        "model": "gpt-4o",
+        "usage": {
+            "prompt_tokens": 100,
+            "completion_tokens": 50,
+            "total_tokens": 150,
+            "cost": 0.00025,
+        },
+    }
+    content_str = json.dumps(response_body)
+    httpx_response = _make_httpx_response()
+
+    with (
+        patch.object(provider, "get_x_cashu_cost", new=AsyncMock(return_value=cost_data)),
+        patch.object(provider, "send_refund", new=AsyncMock(return_value="cashuA_refund_token")),
+    ):
+        response = await provider.handle_x_cashu_non_streaming_response(
+            content_str=content_str,
+            response=httpx_response,
+            amount=10000,
+            unit="msat",
+            max_cost_for_model=10000,
+            mint=None,
+            payment_token_hash=None,
+        )
+
+    body = json.loads(response.body)
+    assert "cost_sats" in body["usage"]
+    assert body["usage"]["cost_sats"] == 5  # 5000 msats // 1000
+
+
+@pytest.mark.asyncio
+async def test_non_streaming_cost_sats_value_rounds_down() -> None:
+    provider = _make_provider()
+    cost_data = _make_cost_data(total_msats=1999)
+
+    response_body = {"model": "gpt-4o", "usage": {"prompt_tokens": 10}}
+    content_str = json.dumps(response_body)
+
+    with (
+        patch.object(provider, "get_x_cashu_cost", new=AsyncMock(return_value=cost_data)),
+        patch.object(provider, "send_refund", new=AsyncMock(return_value="cashuA_refund_token")),
+    ):
+        response = await provider.handle_x_cashu_non_streaming_response(
+            content_str=content_str,
+            response=_make_httpx_response(),
+            amount=10000,
+            unit="msat",
+            max_cost_for_model=10000,
+        )
+
+    body = json.loads(response.body)
+    assert body["usage"]["cost_sats"] == 1  # 1999 // 1000
+
+
+@pytest.mark.asyncio
+async def test_non_streaming_preserves_existing_usage_fields() -> None:
+    provider = _make_provider()
+    cost_data = _make_cost_data(total_msats=3000)
+
+    response_body = {
+        "model": "gpt-4o",
+        "usage": {
+            "prompt_tokens": 100,
+            "completion_tokens": 50,
+            "total_tokens": 150,
+            "cost": 0.00015,
+        },
+    }
+
+    with (
+        patch.object(provider, "get_x_cashu_cost", new=AsyncMock(return_value=cost_data)),
+        patch.object(provider, "send_refund", new=AsyncMock(return_value="cashuA_refund_token")),
+    ):
+        response = await provider.handle_x_cashu_non_streaming_response(
+            content_str=json.dumps(response_body),
+            response=_make_httpx_response(),
+            amount=10000,
+            unit="msat",
+            max_cost_for_model=10000,
+        )
+
+    body = json.loads(response.body)
+    usage = body["usage"]
+    assert usage["prompt_tokens"] == 100
+    assert usage["completion_tokens"] == 50
+    assert usage["total_tokens"] == 150
+    assert usage["cost"] == 0.00015
+    assert usage["cost_sats"] == 3
+
+
+# ---------------------------------------------------------------------------
+# Streaming (chat completions)
+# ---------------------------------------------------------------------------
+
+async def _collect_streaming(response: object) -> list[str]:
+    chunks: list[str] = []
+    async for chunk in response.body_iterator:  # type: ignore[attr-defined]
+        if isinstance(chunk, bytes):
+            chunks.append(chunk.decode("utf-8"))
+        else:
+            chunks.append(str(chunk))
+    return chunks
+
+
+@pytest.mark.asyncio
+async def test_streaming_includes_cost_sats_in_usage_chunk() -> None:
+    provider = _make_provider()
+    cost_data = _make_cost_data(total_msats=7000)
+
+    usage_chunk = {
+        "id": "chatcmpl-123",
+        "model": "gpt-4o",
+        "usage": {"prompt_tokens": 100, "completion_tokens": 50, "total_tokens": 150},
+    }
+    content_str = "\n".join([
+        'data: {"id":"chatcmpl-123","model":"gpt-4o","choices":[]}',
+        f"data: {json.dumps(usage_chunk)}",
+        "data: [DONE]",
+    ])
+
+    with patch.object(provider, "get_x_cashu_cost", new=AsyncMock(return_value=cost_data)):
+        response = await provider.handle_x_cashu_streaming_response(
+            content_str=content_str,
+            response=_make_httpx_response(),
+            amount=10000,
+            unit="msat",
+            max_cost_for_model=10000,
+            mint=None,
+            payment_token_hash=None,
+        )
+
+    chunks = await _collect_streaming(response)
+
+    full_output = "".join(chunks)
+    usage_line = next(
+        line for line in full_output.split("\n") if '"usage"' in line and "cost_sats" in line
+    )
+    data_json = json.loads(usage_line.lstrip("data: ").strip())
+    assert data_json["usage"]["cost_sats"] == 7  # 7000 // 1000
+
+
+@pytest.mark.asyncio
+async def test_streaming_non_usage_chunks_unmodified() -> None:
+    provider = _make_provider()
+    cost_data = _make_cost_data(total_msats=2000)
+
+    regular_chunk = {"id": "chatcmpl-123", "model": "gpt-4o", "choices": [{"delta": {"content": "hi"}}]}
+    usage_chunk = {"id": "chatcmpl-123", "model": "gpt-4o", "usage": {"prompt_tokens": 10}}
+    content_str = "\n".join([
+        f"data: {json.dumps(regular_chunk)}",
+        f"data: {json.dumps(usage_chunk)}",
+        "data: [DONE]",
+    ])
+
+    with patch.object(provider, "get_x_cashu_cost", new=AsyncMock(return_value=cost_data)):
+        response = await provider.handle_x_cashu_streaming_response(
+            content_str=content_str,
+            response=_make_httpx_response(),
+            amount=10000,
+            unit="msat",
+            max_cost_for_model=10000,
+        )
+
+    chunks = await _collect_streaming(response)
+
+    lines = [
+        line for line in "".join(chunks).split("\n")
+        if line.startswith("data: ") and line != "data: [DONE]"
+    ]
+    regular_line_data = json.loads(lines[0][6:])
+    # regular chunk should not have cost_sats injected
+    assert "cost_sats" not in regular_line_data.get("usage", {})

ui/.eslintrc.json

@@ -1,11 +0,0 @@
-{
-  "extends": [
-    "next",
-    "next/core-web-vitals",
-    "eslint:recommended",
-    "plugin:react/recommended",
-    "plugin:@typescript-eslint/recommended",
-    "prettier"
-  ],
-  "plugins": ["react", "@typescript-eslint"]
-}

ui/.gitignore

@@ -42,3 +42,4 @@ next-env.d.ts
 
 # favicon conflicts
 /app/favicon.ico
+.pnpm-store/

ui/.prettierignore

@@ -0,0 +1,5 @@
+pnpm-lock.yaml
+.next
+node_modules
+out
+next-env.d.ts

ui/app/balances/page.tsx

@@ -2,12 +2,11 @@
 
 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';
+import { AppPageShell } from '@/components/app-page-shell';
+import { PageHeader } from '@/components/page-header';
 
 export default function BalancesPage() {
   const { displayUnit } = useCurrencyStore();
@@ -22,39 +21,26 @@ export default function BalancesPage() {
   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>
+    <AppPageShell contentClassName='mx-auto w-full max-w-5xl'>
+      <div className='space-y-6'>
+        <PageHeader
+          title='Balances'
+          description='Monitor and manage wallet balances across cashu mints and temporary stores.'
+        />
 
-          <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 className='grid gap-6'>
+          <DetailedWalletBalance
+            refreshInterval={30000}
+            displayUnit={displayUnit}
+            usdPerSat={usdPerSat}
+          />
+          <TemporaryBalances
+            refreshInterval={60000}
+            displayUnit={displayUnit}
+            usdPerSat={usdPerSat}
+          />
         </div>
-      </SidebarInset>
-    </SidebarProvider>
+      </div>
+    </AppPageShell>
   );
 }

ui/app/globals.css

@@ -1,13 +1,133 @@
 @import 'tailwindcss';
 @import 'tw-animate-css';
 
-@custom-variant dark (&:is(.dark *));
+@custom-variant dark (&:is(.dark *, .red *));
+
+:root {
+  --radius: 0.625rem;
+  --font-geist-sans:
+    ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica,
+    Arial, 'Apple Color Emoji', 'Segoe UI Emoji';
+  --font-geist-mono:
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
+    'Courier New', monospace;
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --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 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --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.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+.red {
+  --background: oklch(0.14 0.03 24);
+  --foreground: oklch(0.9 0.05 28);
+  --card: oklch(0.17 0.04 24);
+  --card-foreground: oklch(0.9 0.05 28);
+  --popover: oklch(0.17 0.04 24);
+  --popover-foreground: oklch(0.9 0.05 28);
+  --primary: oklch(0.78 0.14 25);
+  --primary-foreground: oklch(0.14 0.03 24);
+  --secondary: oklch(0.22 0.05 24);
+  --secondary-foreground: oklch(0.9 0.05 28);
+  --muted: oklch(0.22 0.05 24);
+  --muted-foreground: oklch(0.72 0.04 26);
+  --accent: oklch(0.25 0.08 25);
+  --accent-foreground: oklch(0.92 0.05 28);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(0.72 0.11 25 / 24%);
+  --input: oklch(0.75 0.12 25 / 28%);
+  --ring: oklch(0.62 0.12 24);
+}
+
+html.red {
+  color-scheme: dark;
+}
 
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
-  --font-sans: Geist, sans-serif;
-  --font-mono: Geist Mono, monospace;
+  --color-muted: var(--muted);
+  --color-accent: var(--accent);
+  --color-border: var(--border);
+  --color-card: var(--card);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
   --color-sidebar-ring: var(--sidebar-ring);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
@@ -21,194 +141,34 @@
   --color-chart-3: var(--chart-3);
   --color-chart-2: var(--chart-2);
   --color-chart-1: var(--chart-1);
-  --color-ring: var(--ring);
-  --color-input: var(--input);
-  --color-border: var(--border);
-  --color-destructive: var(--destructive);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-accent: var(--accent);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-muted: var(--muted);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-secondary: var(--secondary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-primary: var(--primary);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-popover: var(--popover);
-  --color-card-foreground: var(--card-foreground);
-  --color-card: var(--card);
-  --radius-sm: calc(var(--radius) - 4px);
-  --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);
+  --radius-2xl: calc(var(--radius) + 8px);
+  --radius-3xl: calc(var(--radius) + 12px);
+  --radius-4xl: calc(var(--radius) + 16px);
 }
 
-:root {
-  --radius: 0.5rem;
-  --background: oklch(0.99 0 0);
-  --foreground: oklch(0 0 0);
-  --card: oklch(1 0 0);
-  --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;
+body {
+  font-family: var(--font-sans);
 }
 
-.dark {
-  --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);
+html,
+body {
+  max-width: 100%;
 }
 
 @layer base {
   * {
     @apply border-border outline-ring/50;
   }
+
   body {
     @apply bg-background text-foreground;
-    letter-spacing: var(--tracking-normal);
   }
-}
 
-/* Custom animations */
-@keyframes shimmer {
-  0% {
-    transform: translateX(-100%);
-  }
-  100% {
-    transform: translateX(100%);
+  button,
+  [type='button'],
+  [type='submit'],
+  [type='reset'],
+  [role='button'] {
+    cursor: pointer;
   }
 }
-
-.animate-shimmer {
-  animation: shimmer 2s infinite;
-}

ui/app/layout.tsx

@@ -1,23 +1,10 @@
 import type { Metadata } from 'next';
-import { Geist, Geist_Mono } from 'next/font/google';
+import { GeistMono } from 'geist/font/mono';
+import { GeistSans } from 'geist/font/sans';
 import './globals.css';
 import { Providers } from './providers';
 import { SuppressHydrationWarning } from '@/components/suppress-hydration-warning';
 
-const geistSans = Geist({
-  variable: '--font-geist-sans',
-  subsets: ['latin'],
-  preload: false,
-  display: 'swap',
-});
-
-const geistMono = Geist_Mono({
-  variable: '--font-geist-mono',
-  subsets: ['latin'],
-  preload: false,
-  display: 'swap',
-});
-
 export const metadata: Metadata = {
   title: 'Routstr',
   description: 'Routstr model management',
@@ -34,7 +21,7 @@ export default function RootLayout({
   return (
     <html lang='en' suppressHydrationWarning>
       <body
-        className={`${geistSans.variable} ${geistMono.variable} font-sans antialiased`}
+        className={`${GeistSans.variable} ${GeistMono.variable} font-sans antialiased`}
       >
         <SuppressHydrationWarning>
           <Providers>{children}</Providers>

ui/app/login/page.tsx

@@ -5,16 +5,10 @@ import type { ChangeEvent, FormEvent, ReactElement } from 'react';
 import { useRouter } from 'next/navigation';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card';
 import { adminLogin } from '@/lib/api/services/auth';
 import { ConfigurationService } from '@/lib/api/services/configuration';
 import { toast } from 'sonner';
+import { AuthPageShell } from '@/components/auth-page-shell';
 
 export default function AdminLoginPage(): ReactElement {
   const router = useRouter();
@@ -78,51 +72,42 @@ export default function AdminLoginPage(): ReactElement {
   };
 
   return (
-    <div className='bg-background text-foreground flex min-h-screen items-center justify-center px-4 py-12'>
-      <Card className='border-border/60 bg-card/90 w-full max-w-md border shadow-2xl shadow-black/30 backdrop-blur'>
-        <CardHeader className='space-y-1'>
-          <CardTitle className='text-center text-2xl font-bold'>
-            Admin Login
-          </CardTitle>
-          <CardDescription className='text-center'>
-            Enter your admin password to access the dashboard
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <form onSubmit={handleSubmit} className='space-y-4'>
-            {allowCustomBaseUrl && (
-              <div className='space-y-2'>
-                <Input
-                  type='text'
-                  placeholder='API URL (https://api.example.com)'
-                  value={baseUrl}
-                  onChange={(event: ChangeEvent<HTMLInputElement>) =>
-                    setBaseUrl(event.target.value)
-                  }
-                  disabled={isLoading}
-                  required
-                />
-              </div>
-            )}
-            <div className='space-y-2'>
-              <Input
-                type='password'
-                placeholder='Admin Password'
-                value={password}
-                onChange={(event: ChangeEvent<HTMLInputElement>) =>
-                  setPassword(event.target.value)
-                }
-                disabled={isLoading}
-                autoFocus
-                required
-              />
-            </div>
-            <Button type='submit' className='w-full' disabled={isLoading}>
-              {isLoading ? 'Logging in...' : 'Login'}
-            </Button>
-          </form>
-        </CardContent>
-      </Card>
-    </div>
+    <AuthPageShell
+      title='Admin Login'
+      description='Enter your admin password to access the dashboard.'
+    >
+      <form onSubmit={handleSubmit} className='space-y-4'>
+        {allowCustomBaseUrl && (
+          <div className='space-y-2'>
+            <Input
+              type='text'
+              placeholder='API URL (https://api.example.com)'
+              value={baseUrl}
+              onChange={(event: ChangeEvent<HTMLInputElement>) =>
+                setBaseUrl(event.target.value)
+              }
+              disabled={isLoading}
+              required
+            />
+          </div>
+        )}
+        <div className='space-y-2'>
+          <Input
+            type='password'
+            placeholder='Admin Password'
+            value={password}
+            onChange={(event: ChangeEvent<HTMLInputElement>) =>
+              setPassword(event.target.value)
+            }
+            disabled={isLoading}
+            autoFocus
+            required
+          />
+        </div>
+        <Button type='submit' className='w-full' disabled={isLoading}>
+          {isLoading ? 'Logging in...' : 'Login'}
+        </Button>
+      </form>
+    </AuthPageShell>
   );
 }

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

@@ -10,18 +10,8 @@ import {
 } 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;
-}
+import { getLogLevelBadgeVariant } from '@/lib/utils/log-level';
+import type { LogEntry } from './types';
 
 interface LogDetailsDialogProps {
   log: LogEntry | null;
@@ -29,24 +19,6 @@ interface LogDetailsDialogProps {
   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,
@@ -79,10 +51,13 @@ export function LogDetailsDialog({
 
   return (
     <Dialog open={isOpen} onOpenChange={onClose}>
-      <DialogContent className='max-h-[90vh] w-[95vw] max-w-[95vw] overflow-hidden'>
+      <DialogContent className='max-h-[92svh] w-full max-w-none overflow-hidden md:max-w-4xl'>
         <DialogHeader>
           <DialogTitle className='flex items-center gap-2'>
-            <Badge variant='outline' className={getLevelColor(log.levelname)}>
+            <Badge
+              variant={getLogLevelBadgeVariant(log.levelname)}
+              className='uppercase'
+            >
               {log.levelname}
             </Badge>
             <span>Log Entry Details</span>
@@ -92,7 +67,7 @@ export function LogDetailsDialog({
           </DialogDescription>
         </DialogHeader>
 
-        <ScrollArea className='h-[75vh] w-full overflow-x-auto'>
+        <ScrollArea className='h-[70svh] w-full overflow-x-auto sm:h-[75vh]'>
           <div className='space-y-6'>
             <div>
               <h4 className='mb-2 text-sm font-medium'>Message</h4>

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

@@ -1,41 +1,13 @@
 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;
-}
+import { ChevronRight } from 'lucide-react';
+import { getLogLevelBadgeVariant } from '@/lib/utils/log-level';
+import type { LogEntry } from './types';
 
 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) =>
@@ -50,73 +22,58 @@ export function LogEntryCard({ entry, onClick }: LogEntryCardProps) {
         'request_id',
       ].includes(key)
   );
+  const hasRequestId =
+    Boolean(entry.request_id) && entry.request_id !== 'no-request-id';
+  const shortPath = entry.pathname.split('/').pop() || entry.pathname;
 
   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'
+      className='bg-card hover:bg-accent/35 group mb-2 cursor-pointer rounded-lg border p-2.5 transition-colors duration-150 sm:p-3'
       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>
+      <div className='flex min-w-0 items-start justify-between gap-2'>
+        <div className='min-w-0 flex-1 space-y-1.5'>
+          <div className='flex min-w-0 flex-wrap items-center gap-1.5'>
+            <Badge
+              variant={getLogLevelBadgeVariant(entry.levelname)}
+              className='h-5 px-1.5 text-[10px] uppercase'
+            >
+              {entry.levelname}
+            </Badge>
+            <span className='text-muted-foreground text-[11px]'>
+              {entry.asctime}
+            </span>
+            <Badge
+              variant='secondary'
+              className='h-5 max-w-[11rem] truncate px-1.5 text-[10px]'
+            >
+              {entry.name}
             </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>
-            )}
+          <p className='line-clamp-1 font-mono text-xs break-words sm:text-sm'>
+            {entry.message}
+          </p>
+
+          <div className='text-muted-foreground flex min-w-0 flex-wrap items-center gap-1.5 text-[11px]'>
+            {hasRequestId ? (
+              <span className='inline-block max-w-[14rem] truncate rounded border px-1.5 py-0.5 font-mono text-[10px] sm:max-w-[20rem]'>
+                {entry.request_id}
+              </span>
+            ) : null}
+            <span className='truncate'>
+              {shortPath}:{entry.lineno}
+            </span>
+            {extraFields.length > 0 ? (
+              <span>{extraFields.length} extra</span>
+            ) : null}
           </div>
         </div>
-      )}
+
+        <div className='pt-0.5'>
+          <ChevronRight className='text-muted-foreground h-4 w-4 opacity-50 transition-opacity group-hover:opacity-90' />
+        </div>
+      </div>
     </div>
   );
 }

ui/app/logs/log-filters.tsx

@@ -1,3 +1,11 @@
+import {
+  useEffect,
+  useState,
+  type ChangeEvent,
+  type KeyboardEvent,
+} from 'react';
+import { format } from 'date-fns';
+import { CalendarIcon, X } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import {
   Card,
@@ -21,20 +29,8 @@ import {
   PopoverTrigger,
 } from '@/components/ui/popover';
 import { Calendar } from '@/components/ui/calendar';
-import { Badge } from '@/components/ui/badge';
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from '@/components/ui/command';
-import { Checkbox } from '@/components/ui/checkbox';
-import { CalendarIcon, Filter, X, Plus } from 'lucide-react';
-import { useState, useEffect } from 'react';
-import { format } from 'date-fns';
 import { cn } from '@/lib/utils';
+import { MultiSelectCommandFilter } from './multi-select-command-filter';
 
 interface LogFiltersProps {
   selectedDate: string;
@@ -97,32 +93,12 @@ const ENDPOINT_OPTIONS = [
   '/embeddings/models',
 ];
 
-interface FilterBadgeProps {
-  value: string;
-  onRemove: (value: string) => void;
-}
-
-function FilterBadge({ value, onRemove }: FilterBadgeProps) {
-  return (
-    <Badge
-      variant='secondary'
-      className='flex items-center gap-1 px-1 font-normal'
-    >
-      {value}
-      <button
-        type='button'
-        onClick={(e) => {
-          e.preventDefault();
-          e.stopPropagation();
-          onRemove(value);
-        }}
-        className='hover:bg-muted-foreground/20 rounded-full'
-      >
-        <X className='h-3 w-3' />
-      </button>
-    </Badge>
-  );
-}
+const STATUS_4XX_CODES = STATUS_CODE_OPTIONS.filter((code) =>
+  code.startsWith('4')
+);
+const STATUS_5XX_CODES = STATUS_CODE_OPTIONS.filter((code) =>
+  code.startsWith('5')
+);
 
 export function LogFilters({
   selectedDate,
@@ -151,7 +127,7 @@ export function LogFilters({
   const [isCustom, setIsCustom] = useState<boolean>(!isPreset);
   const [date, setDate] = useState<Date | undefined>(
     selectedDate && selectedDate !== 'all'
-      ? new Date(selectedDate + 'T00:00:00')
+      ? new Date(`${selectedDate}T00:00:00`)
       : undefined
   );
 
@@ -162,6 +138,7 @@ export function LogFilters({
   useEffect(() => {
     const currentIsPreset = PRESET_LIMITS.includes(limit.toString());
     setIsCustom(!currentIsPreset);
+
     if (!currentIsPreset) {
       setCustomLimit(limit.toString());
     }
@@ -170,88 +147,79 @@ export function LogFilters({
   useEffect(() => {
     if (selectedDate === 'all' || !selectedDate) {
       setDate(undefined);
-    } else {
-      const d = new Date(selectedDate + 'T00:00:00');
-      setDate(isNaN(d.getTime()) ? undefined : d);
+      return;
     }
+
+    const parsedDate = new Date(`${selectedDate}T00:00:00`);
+    setDate(Number.isNaN(parsedDate.getTime()) ? undefined : parsedDate);
   }, [selectedDate]);
 
   const handleLimitChange = (value: string) => {
     if (value === 'custom') {
       setIsCustom(true);
       setCustomLimit(limit.toString());
-    } else {
-      setIsCustom(false);
-      setCustomLimit('');
-      onLimitChange(Number(value));
+      return;
     }
+
+    setIsCustom(false);
+    setCustomLimit('');
+    onLimitChange(Number(value));
   };
 
-  const handleCustomLimitChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const value = e.target.value;
-    setCustomLimit(value);
+  const handleCustomLimitChange = (event: ChangeEvent<HTMLInputElement>) => {
+    setCustomLimit(event.target.value);
   };
 
   const handleCustomLimitApply = () => {
-    const numValue = parseInt(customLimit);
-    if (!isNaN(numValue) && numValue > 0) {
-      onLimitChange(numValue);
-    } else {
-      setIsCustom(false);
-      setCustomLimit('');
-      onLimitChange(100);
+    const numericValue = Number.parseInt(customLimit, 10);
+
+    if (!Number.isNaN(numericValue) && numericValue > 0) {
+      onLimitChange(numericValue);
+      return;
     }
+
+    setIsCustom(false);
+    setCustomLimit('');
+    onLimitChange(100);
   };
 
-  const handleCustomLimitKeyDown = (
-    e: React.KeyboardEvent<HTMLInputElement>
-  ) => {
-    if (e.key === 'Enter') {
+  const handleCustomLimitKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === 'Enter') {
       handleCustomLimitApply();
     }
   };
 
-  const handleDateSelect = (selectedDate: Date | undefined) => {
-    setDate(selectedDate);
-    if (selectedDate) {
-      onDateChange(format(selectedDate, 'yyyy-MM-dd'));
-    } else {
-      onDateChange('all');
-    }
-  };
+  const handleDateSelect = (nextDate: Date | undefined) => {
+    setDate(nextDate);
 
-  const toggleSelection = (
-    current: string[],
-    value: string,
-    onChange: (val: string[]) => void
-  ) => {
-    if (current.includes(value)) {
-      onChange(current.filter((v) => v !== value));
-    } else {
-      onChange([...current, value]);
+    if (nextDate) {
+      onDateChange(format(nextDate, 'yyyy-MM-dd'));
+      return;
     }
+
+    onDateChange('all');
   };
 
   const handleQuickStatusCode = (range: '4xx' | '5xx') => {
-    const codes = STATUS_CODE_OPTIONS.filter((c) => c.startsWith(range[0]));
-    const newSelection = new Set([...selectedStatusCodes]);
-    const allIncluded = codes.every((c) => selectedStatusCodes.includes(c));
+    const rangeCodes = range === '4xx' ? STATUS_4XX_CODES : STATUS_5XX_CODES;
+    const nextSelection = new Set(selectedStatusCodes);
+    const allSelected = rangeCodes.every((code) =>
+      selectedStatusCodes.includes(code)
+    );
 
-    if (allIncluded) {
-      codes.forEach((c) => newSelection.delete(c));
+    if (allSelected) {
+      rangeCodes.forEach((code) => nextSelection.delete(code));
     } else {
-      codes.forEach((c) => newSelection.add(c));
+      rangeCodes.forEach((code) => nextSelection.add(code));
     }
-    onStatusCodesChange(Array.from(newSelection));
+
+    onStatusCodesChange(Array.from(nextSelection));
   };
 
   return (
     <Card className='mb-6'>
       <CardHeader>
-        <CardTitle className='flex items-center gap-2'>
-          <Filter className='h-5 w-5' />
-          Filters
-        </CardTitle>
+        <CardTitle>Filters</CardTitle>
         <CardDescription>
           Filter logs by date, level, request ID, text search, status code,
           method, endpoint and limit
@@ -314,336 +282,62 @@ export function LogFilters({
             </Select>
           </div>
 
-          <div className='space-y-2'>
-            <Label>Status Codes</Label>
-            <Popover>
-              <PopoverTrigger asChild>
-                <Button
-                  variant='outline'
-                  className='w-full justify-start text-left font-normal'
-                >
-                  <div className='flex flex-wrap gap-1'>
-                    {selectedStatusCodes.length > 0 ? (
-                      selectedStatusCodes.map((code) => (
-                        <FilterBadge
-                          key={code}
-                          value={code}
-                          onRemove={(val) =>
-                            toggleSelection(
-                              selectedStatusCodes,
-                              val,
-                              onStatusCodesChange
-                            )
-                          }
-                        />
-                      ))
-                    ) : (
-                      <span className='text-muted-foreground'>All codes</span>
-                    )}
-                  </div>
-                </Button>
-              </PopoverTrigger>
-              <PopoverContent className='w-64 p-0' align='start'>
-                <Command>
-                  <CommandInput
-                    placeholder='Search or add status code...'
-                    value={statusSearch}
-                    onValueChange={setStatusSearch}
-                  />
-                  <CommandList>
-                    {selectedStatusCodes.length > 0 && (
-                      <CommandGroup heading='Selected'>
-                        {selectedStatusCodes.map((code) => (
-                          <CommandItem
-                            key={`selected-${code}`}
-                            onSelect={() =>
-                              toggleSelection(
-                                selectedStatusCodes,
-                                code,
-                                onStatusCodesChange
-                              )
-                            }
-                          >
-                            <Checkbox checked={true} className='mr-2' />
-                            {code}
-                          </CommandItem>
-                        ))}
-                      </CommandGroup>
-                    )}
-                    {statusSearch &&
-                      !STATUS_CODE_OPTIONS.includes(statusSearch) &&
-                      !selectedStatusCodes.includes(statusSearch) && (
-                        <CommandGroup heading='Custom'>
-                          <CommandItem
-                            onSelect={() => {
-                              if (/^\d+$/.test(statusSearch)) {
-                                toggleSelection(
-                                  selectedStatusCodes,
-                                  statusSearch,
-                                  onStatusCodesChange
-                                );
-                                setStatusSearch('');
-                              }
-                            }}
-                          >
-                            <Plus className='mr-2 h-4 w-4' />
-                            Add &quot;{statusSearch}&quot;
-                          </CommandItem>
-                        </CommandGroup>
-                      )}
-                    <CommandEmpty>No results found.</CommandEmpty>
-                    <CommandGroup heading='Quick Filters'>
-                      <CommandItem
-                        onSelect={() => handleQuickStatusCode('4xx')}
-                      >
-                        <Checkbox
-                          checked={STATUS_CODE_OPTIONS.filter((c) =>
-                            c.startsWith('4')
-                          ).every((c) => selectedStatusCodes.includes(c))}
-                          className='mr-2'
-                        />
-                        4xx Errors
-                      </CommandItem>
-                      <CommandItem
-                        onSelect={() => handleQuickStatusCode('5xx')}
-                      >
-                        <Checkbox
-                          checked={STATUS_CODE_OPTIONS.filter((c) =>
-                            c.startsWith('5')
-                          ).every((c) => selectedStatusCodes.includes(c))}
-                          className='mr-2'
-                        />
-                        5xx Errors
-                      </CommandItem>
-                    </CommandGroup>
-                    <CommandGroup heading='Common Codes'>
-                      {STATUS_CODE_OPTIONS.filter(
-                        (code) => !selectedStatusCodes.includes(code)
-                      ).map((code) => (
-                        <CommandItem
-                          key={code}
-                          onSelect={() =>
-                            toggleSelection(
-                              selectedStatusCodes,
-                              code,
-                              onStatusCodesChange
-                            )
-                          }
-                        >
-                          <Checkbox checked={false} className='mr-2' />
-                          {code}
-                        </CommandItem>
-                      ))}
-                    </CommandGroup>
-                  </CommandList>
-                </Command>
-              </PopoverContent>
-            </Popover>
-          </div>
+          <MultiSelectCommandFilter
+            label='Status Codes'
+            emptyLabel='All codes'
+            selectedValues={selectedStatusCodes}
+            onSelectedValuesChange={onStatusCodesChange}
+            options={STATUS_CODE_OPTIONS}
+            searchValue={statusSearch}
+            onSearchValueChange={setStatusSearch}
+            searchPlaceholder='Search or add status code...'
+            popoverClassName='w-[min(16rem,calc(100vw-2rem))] p-0'
+            optionsGroupLabel='Common Codes'
+            canAddCustom={(value) => /^\d+$/.test(value)}
+            quickFilters={[
+              {
+                label: '4xx Errors',
+                checked: STATUS_4XX_CODES.every((code) =>
+                  selectedStatusCodes.includes(code)
+                ),
+                onSelect: () => handleQuickStatusCode('4xx'),
+              },
+              {
+                label: '5xx Errors',
+                checked: STATUS_5XX_CODES.every((code) =>
+                  selectedStatusCodes.includes(code)
+                ),
+                onSelect: () => handleQuickStatusCode('5xx'),
+              },
+            ]}
+          />
 
-          <div className='space-y-2'>
-            <Label>HTTP Methods</Label>
-            <Popover>
-              <PopoverTrigger asChild>
-                <Button
-                  variant='outline'
-                  className='w-full justify-start text-left font-normal'
-                >
-                  <div className='flex flex-wrap gap-1'>
-                    {selectedMethods.length > 0 ? (
-                      selectedMethods.map((method) => (
-                        <FilterBadge
-                          key={method}
-                          value={method}
-                          onRemove={(val) =>
-                            toggleSelection(
-                              selectedMethods,
-                              val,
-                              onMethodsChange
-                            )
-                          }
-                        />
-                      ))
-                    ) : (
-                      <span className='text-muted-foreground'>All methods</span>
-                    )}
-                  </div>
-                </Button>
-              </PopoverTrigger>
-              <PopoverContent className='w-64 p-0' align='start'>
-                <Command>
-                  <CommandInput
-                    placeholder='Search or add method...'
-                    value={methodSearch}
-                    onValueChange={setMethodSearch}
-                  />
-                  <CommandList>
-                    {selectedMethods.length > 0 && (
-                      <CommandGroup heading='Selected'>
-                        {selectedMethods.map((method) => (
-                          <CommandItem
-                            key={`selected-${method}`}
-                            onSelect={() =>
-                              toggleSelection(
-                                selectedMethods,
-                                method,
-                                onMethodsChange
-                              )
-                            }
-                          >
-                            <Checkbox checked={true} className='mr-2' />
-                            {method}
-                          </CommandItem>
-                        ))}
-                      </CommandGroup>
-                    )}
-                    {methodSearch &&
-                      !METHOD_OPTIONS.includes(methodSearch.toUpperCase()) &&
-                      !selectedMethods.includes(methodSearch.toUpperCase()) && (
-                        <CommandGroup heading='Custom'>
-                          <CommandItem
-                            onSelect={() => {
-                              toggleSelection(
-                                selectedMethods,
-                                methodSearch.toUpperCase(),
-                                onMethodsChange
-                              );
-                              setMethodSearch('');
-                            }}
-                          >
-                            <Plus className='mr-2 h-4 w-4' />
-                            Add &quot;{methodSearch.toUpperCase()}&quot;
-                          </CommandItem>
-                        </CommandGroup>
-                      )}
-                    <CommandEmpty>No results found.</CommandEmpty>
-                    <CommandGroup>
-                      {METHOD_OPTIONS.filter(
-                        (method) => !selectedMethods.includes(method)
-                      ).map((method) => (
-                        <CommandItem
-                          key={method}
-                          onSelect={() =>
-                            toggleSelection(
-                              selectedMethods,
-                              method,
-                              onMethodsChange
-                            )
-                          }
-                        >
-                          <Checkbox checked={false} className='mr-2' />
-                          {method}
-                        </CommandItem>
-                      ))}
-                    </CommandGroup>
-                  </CommandList>
-                </Command>
-              </PopoverContent>
-            </Popover>
-          </div>
+          <MultiSelectCommandFilter
+            label='HTTP Methods'
+            emptyLabel='All methods'
+            selectedValues={selectedMethods}
+            onSelectedValuesChange={onMethodsChange}
+            options={METHOD_OPTIONS}
+            searchValue={methodSearch}
+            onSearchValueChange={setMethodSearch}
+            searchPlaceholder='Search or add method...'
+            popoverClassName='w-[min(16rem,calc(100vw-2rem))] p-0'
+            optionsGroupLabel='Methods'
+            normalizeCustomValue={(value) => value.toUpperCase()}
+          />
 
-          <div className='space-y-2'>
-            <Label>Endpoints</Label>
-            <Popover>
-              <PopoverTrigger asChild>
-                <Button
-                  variant='outline'
-                  className='w-full justify-start text-left font-normal'
-                >
-                  <div className='flex flex-wrap gap-1 overflow-hidden'>
-                    {selectedEndpoints.length > 0 ? (
-                      selectedEndpoints.map((endpoint) => (
-                        <FilterBadge
-                          key={endpoint}
-                          value={endpoint}
-                          onRemove={(val) =>
-                            toggleSelection(
-                              selectedEndpoints,
-                              val,
-                              onEndpointsChange
-                            )
-                          }
-                        />
-                      ))
-                    ) : (
-                      <span className='text-muted-foreground'>
-                        All endpoints
-                      </span>
-                    )}
-                  </div>
-                </Button>
-              </PopoverTrigger>
-              <PopoverContent className='w-80 p-0' align='start'>
-                <Command>
-                  <CommandInput
-                    placeholder='Search or add endpoint pattern...'
-                    value={endpointSearch}
-                    onValueChange={setEndpointSearch}
-                  />
-                  <CommandList>
-                    {selectedEndpoints.length > 0 && (
-                      <CommandGroup heading='Selected'>
-                        {selectedEndpoints.map((endpoint) => (
-                          <CommandItem
-                            key={`selected-${endpoint}`}
-                            onSelect={() =>
-                              toggleSelection(
-                                selectedEndpoints,
-                                endpoint,
-                                onEndpointsChange
-                              )
-                            }
-                          >
-                            <Checkbox checked={true} className='mr-2' />
-                            {endpoint}
-                          </CommandItem>
-                        ))}
-                      </CommandGroup>
-                    )}
-                    {endpointSearch &&
-                      !ENDPOINT_OPTIONS.includes(endpointSearch) &&
-                      !selectedEndpoints.includes(endpointSearch) && (
-                        <CommandGroup heading='Custom'>
-                          <CommandItem
-                            onSelect={() => {
-                              toggleSelection(
-                                selectedEndpoints,
-                                endpointSearch,
-                                onEndpointsChange
-                              );
-                              setEndpointSearch('');
-                            }}
-                          >
-                            <Plus className='mr-2 h-4 w-4' />
-                            Add &quot;{endpointSearch}&quot;
-                          </CommandItem>
-                        </CommandGroup>
-                      )}
-                    <CommandEmpty>No results found.</CommandEmpty>
-                    <CommandGroup heading='Common Endpoints'>
-                      {ENDPOINT_OPTIONS.filter(
-                        (endpoint) => !selectedEndpoints.includes(endpoint)
-                      ).map((endpoint) => (
-                        <CommandItem
-                          key={endpoint}
-                          onSelect={() =>
-                            toggleSelection(
-                              selectedEndpoints,
-                              endpoint,
-                              onEndpointsChange
-                            )
-                          }
-                        >
-                          <Checkbox checked={false} className='mr-2' />
-                          {endpoint}
-                        </CommandItem>
-                      ))}
-                    </CommandGroup>
-                  </CommandList>
-                </Command>
-              </PopoverContent>
-            </Popover>
-          </div>
+          <MultiSelectCommandFilter
+            label='Endpoints'
+            emptyLabel='All endpoints'
+            selectedValues={selectedEndpoints}
+            onSelectedValuesChange={onEndpointsChange}
+            options={ENDPOINT_OPTIONS}
+            searchValue={endpointSearch}
+            onSearchValueChange={setEndpointSearch}
+            searchPlaceholder='Search or add endpoint pattern...'
+            popoverClassName='w-[min(20rem,calc(100vw-2rem))] p-0'
+            optionsGroupLabel='Common Endpoints'
+          />
 
           <div className='space-y-2'>
             <Label htmlFor='request-id'>Request ID</Label>
@@ -652,7 +346,7 @@ export function LogFilters({
               type='text'
               placeholder='Search by request ID'
               value={requestId}
-              onChange={(e) => onRequestIdChange(e.target.value)}
+              onChange={(event) => onRequestIdChange(event.target.value)}
             />
           </div>
 
@@ -668,14 +362,14 @@ export function LogFilters({
               type='text'
               placeholder='Search in message and name'
               value={searchText}
-              onChange={(e) => onSearchTextChange(e.target.value)}
+              onChange={(event) => onSearchTextChange(event.target.value)}
             />
           </div>
 
           <div className='space-y-2'>
             <Label htmlFor='limit'>Limit</Label>
             {isCustom ? (
-              <div className='flex gap-2'>
+              <div className='flex flex-col gap-2 sm:flex-row'>
                 <Input
                   id='limit'
                   type='number'
@@ -686,7 +380,7 @@ export function LogFilters({
                   onKeyDown={handleCustomLimitKeyDown}
                   onBlur={handleCustomLimitApply}
                   autoFocus
-                  className='flex-1'
+                  className='flex-1 sm:flex-auto'
                 />
                 <Button
                   type='button'
@@ -695,6 +389,7 @@ export function LogFilters({
                   onClick={() => {
                     setIsCustom(false);
                     setCustomLimit('');
+
                     if (!isPreset) {
                       onLimitChange(100);
                     }
@@ -712,12 +407,11 @@ export function LogFilters({
                   <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>
+                  {PRESET_LIMITS.map((preset) => (
+                    <SelectItem key={preset} value={preset}>
+                      {preset}
+                    </SelectItem>
+                  ))}
                   <SelectItem value='custom'>Custom...</SelectItem>
                 </SelectContent>
               </Select>
@@ -727,8 +421,7 @@ export function LogFilters({
             )}
           </div>
 
-          <div className='space-y-2'>
-            <Label>&nbsp;</Label>
+          <div className='flex items-end sm:col-span-2 lg:col-span-1'>
             <Button
               onClick={onClearFilters}
               variant='outline'

ui/app/logs/multi-select-command-filter.tsx

@@ -0,0 +1,182 @@
+import { Button } from '@/components/ui/button';
+import { Label } from '@/components/ui/label';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover';
+import { Badge } from '@/components/ui/badge';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '@/components/ui/command';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Plus, X } from 'lucide-react';
+
+interface QuickFilterOption {
+  label: string;
+  checked: boolean;
+  onSelect: () => void;
+}
+
+interface MultiSelectCommandFilterProps {
+  label: string;
+  emptyLabel: string;
+  selectedValues: string[];
+  onSelectedValuesChange: (values: string[]) => void;
+  options: string[];
+  searchValue: string;
+  onSearchValueChange: (value: string) => void;
+  searchPlaceholder: string;
+  popoverClassName?: string;
+  selectedGroupLabel?: string;
+  customGroupLabel?: string;
+  quickGroupLabel?: string;
+  optionsGroupLabel?: string;
+  quickFilters?: QuickFilterOption[];
+  normalizeCustomValue?: (value: string) => string;
+  canAddCustom?: (value: string) => boolean;
+}
+
+function FilterBadge({ value }: { value: string }) {
+  return (
+    <Badge
+      variant='secondary'
+      className='flex items-center gap-1 px-1 font-normal'
+    >
+      {value}
+      <X className='h-3 w-3 opacity-70' aria-hidden='true' />
+    </Badge>
+  );
+}
+
+export function MultiSelectCommandFilter({
+  label,
+  emptyLabel,
+  selectedValues,
+  onSelectedValuesChange,
+  options,
+  searchValue,
+  onSearchValueChange,
+  searchPlaceholder,
+  popoverClassName = 'w-64 p-0',
+  selectedGroupLabel = 'Selected',
+  customGroupLabel = 'Custom',
+  quickGroupLabel = 'Quick Filters',
+  optionsGroupLabel = 'Options',
+  quickFilters = [],
+  normalizeCustomValue,
+  canAddCustom,
+}: MultiSelectCommandFilterProps) {
+  const toggleSelection = (value: string) => {
+    if (selectedValues.includes(value)) {
+      onSelectedValuesChange(selectedValues.filter((item) => item !== value));
+      return;
+    }
+
+    onSelectedValuesChange([...selectedValues, value]);
+  };
+
+  const normalizedSearch = normalizeCustomValue
+    ? normalizeCustomValue(searchValue)
+    : searchValue;
+
+  const canShowCustomAction =
+    normalizedSearch.length > 0 &&
+    !options.includes(normalizedSearch) &&
+    !selectedValues.includes(normalizedSearch) &&
+    (canAddCustom ? canAddCustom(normalizedSearch) : true);
+
+  return (
+    <div className='space-y-2'>
+      <Label>{label}</Label>
+      <Popover>
+        <PopoverTrigger asChild>
+          <Button
+            variant='outline'
+            className='w-full justify-start text-left font-normal'
+          >
+            <div className='flex flex-wrap gap-1 overflow-hidden'>
+              {selectedValues.length > 0 ? (
+                selectedValues.map((value) => (
+                  <FilterBadge key={value} value={value} />
+                ))
+              ) : (
+                <span className='text-muted-foreground'>{emptyLabel}</span>
+              )}
+            </div>
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className={popoverClassName} align='start'>
+          <Command>
+            <CommandInput
+              placeholder={searchPlaceholder}
+              value={searchValue}
+              onValueChange={onSearchValueChange}
+            />
+            <CommandList>
+              {selectedValues.length > 0 && (
+                <CommandGroup heading={selectedGroupLabel}>
+                  {selectedValues.map((value) => (
+                    <CommandItem
+                      key={`selected-${value}`}
+                      onSelect={() => toggleSelection(value)}
+                    >
+                      <Checkbox checked={true} className='mr-2' />
+                      {value}
+                    </CommandItem>
+                  ))}
+                </CommandGroup>
+              )}
+
+              {canShowCustomAction && (
+                <CommandGroup heading={customGroupLabel}>
+                  <CommandItem
+                    onSelect={() => {
+                      toggleSelection(normalizedSearch);
+                      onSearchValueChange('');
+                    }}
+                  >
+                    <Plus className='mr-2 h-4 w-4' />
+                    Add &quot;{normalizedSearch}&quot;
+                  </CommandItem>
+                </CommandGroup>
+              )}
+
+              <CommandEmpty>No results found.</CommandEmpty>
+
+              {quickFilters.length > 0 && (
+                <CommandGroup heading={quickGroupLabel}>
+                  {quickFilters.map((filter) => (
+                    <CommandItem key={filter.label} onSelect={filter.onSelect}>
+                      <Checkbox checked={filter.checked} className='mr-2' />
+                      {filter.label}
+                    </CommandItem>
+                  ))}
+                </CommandGroup>
+              )}
+
+              <CommandGroup heading={optionsGroupLabel}>
+                {options
+                  .filter((option) => !selectedValues.includes(option))
+                  .map((option) => (
+                    <CommandItem
+                      key={option}
+                      onSelect={() => toggleSelection(option)}
+                    >
+                      <Checkbox checked={false} className='mr-2' />
+                      {option}
+                    </CommandItem>
+                  ))}
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+}

ui/app/logs/page.tsx

@@ -2,8 +2,6 @@
 
 import { useState, useEffect } 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,
@@ -14,9 +12,18 @@ import {
 } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { ScrollArea } from '@/components/ui/scroll-area';
+import {
+  Empty,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from '@/components/ui/empty';
+import { Skeleton } from '@/components/ui/skeleton';
 import { FileText, RefreshCw } from 'lucide-react';
 import { apiClient } from '@/lib/api/client';
-import { SidebarInset, SidebarProvider } from '@/components/ui/sidebar';
+import { AppPageShell } from '@/components/app-page-shell';
+import { PageHeader } from '@/components/page-header';
 import { LogEntry, LogsResponse } from './types';
 import { LogFilters } from './log-filters';
 import { LogEntryCard } from './log-entry-card';
@@ -135,126 +142,125 @@ export default function LogsPage() {
     setIsDialogOpen(true);
   };
 
+  const hasActiveFilters =
+    selectedDate !== 'all' ||
+    selectedLevel !== 'all' ||
+    Boolean(requestId) ||
+    Boolean(searchText) ||
+    selectedStatusCodes.length > 0 ||
+    selectedMethods.length > 0 ||
+    selectedEndpoints.length > 0;
+
+  const activeFilterDescription = [
+    selectedDate !== 'all' ? `date ${selectedDate}` : null,
+    selectedLevel !== 'all' ? `level ${selectedLevel}` : null,
+    requestId ? `request ID ${requestId}` : null,
+    searchText ? `text "${searchText}"` : null,
+    selectedStatusCodes.length > 0
+      ? `status ${selectedStatusCodes.join(', ')}`
+      : null,
+    selectedMethods.length > 0 ? `method ${selectedMethods.join(', ')}` : null,
+    selectedEndpoints.length > 0
+      ? `endpoint ${selectedEndpoints.join(', ')}`
+      : null,
+  ]
+    .filter(Boolean)
+    .join(' • ');
+
   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'
-            >
+    <AppPageShell contentClassName='mx-auto w-full max-w-5xl overflow-x-hidden'>
+      <div className='space-y-6'>
+        <PageHeader
+          title='System Logs'
+          description='View and filter application logs.'
+          actions={
+            <Button onClick={() => refetchLogs()} variant='outline' size='sm'>
               <RefreshCw className='mr-2 h-4 w-4' />
               Refresh
             </Button>
-          </div>
+          }
+        />
 
-          <LogFilters
-            selectedDate={selectedDate}
-            selectedLevel={selectedLevel}
-            requestId={requestId}
-            searchText={searchText}
-            selectedStatusCodes={selectedStatusCodes}
-            selectedMethods={selectedMethods}
-            selectedEndpoints={selectedEndpoints}
-            limit={limit}
-            onDateChange={setSelectedDate}
-            onLevelChange={setSelectedLevel}
-            onRequestIdChange={setRequestId}
-            onSearchTextChange={setSearchText}
-            onStatusCodesChange={setSelectedStatusCodes}
-            onMethodsChange={setSelectedMethods}
-            onEndpointsChange={setSelectedEndpoints}
-            onLimitChange={setLimit}
-            onClearFilters={handleClearFilters}
-          />
+        <LogFilters
+          selectedDate={selectedDate}
+          selectedLevel={selectedLevel}
+          requestId={requestId}
+          searchText={searchText}
+          selectedStatusCodes={selectedStatusCodes}
+          selectedMethods={selectedMethods}
+          selectedEndpoints={selectedEndpoints}
+          limit={limit}
+          onDateChange={setSelectedDate}
+          onLevelChange={setSelectedLevel}
+          onRequestIdChange={setRequestId}
+          onSearchTextChange={setSearchText}
+          onStatusCodesChange={setSelectedStatusCodes}
+          onMethodsChange={setSelectedMethods}
+          onEndpointsChange={setSelectedEndpoints}
+          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 ||
-                selectedStatusCodes.length > 0 ||
-                selectedMethods.length > 0 ||
-                selectedEndpoints.length > 0) && (
-                <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}"`}
-                  {selectedStatusCodes.length > 0 &&
-                    ` with status ${selectedStatusCodes.join(', ')}`}
-                  {selectedMethods.length > 0 &&
-                    ` with method ${selectedMethods.join(', ')}`}
-                  {selectedEndpoints.length > 0 &&
-                    ` with endpoint ${selectedEndpoints.join(', ')}`}
-                </CardDescription>
+        <Card>
+          <CardHeader>
+            <div className='flex flex-col items-start gap-2 sm:flex-row sm:items-center sm:justify-between'>
+              <CardTitle>Log Entries</CardTitle>
+              {logsData && (
+                <Badge variant='secondary'>
+                  {logsData.logs.length} entries
+                </Badge>
               )}
-            </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>
+            {hasActiveFilters && (
+              <CardDescription>
+                Showing logs filtered by {activeFilterDescription}
+              </CardDescription>
+            )}
+          </CardHeader>
+          <CardContent className='overflow-hidden'>
+            {isLoading ? (
+              <div className='space-y-2'>
+                {Array.from({ length: 8 }).map((_, index) => (
+                  <Skeleton
+                    key={`logs-loading-${index}`}
+                    className='h-16 w-full rounded-lg'
+                  />
+                ))}
+              </div>
+            ) : logsData?.logs && logsData.logs.length > 0 ? (
+              <ScrollArea className='h-[55svh] min-h-[420px] 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>
-              ) : 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>
+              </ScrollArea>
+            ) : (
+              <Empty className='py-8'>
+                <EmptyHeader>
+                  <EmptyMedia variant='icon'>
+                    <FileText className='h-4 w-4' />
+                  </EmptyMedia>
+                  <EmptyTitle>No log entries found</EmptyTitle>
+                  <EmptyDescription>
+                    Try adjusting your filters or check back later.
+                  </EmptyDescription>
+                </EmptyHeader>
+              </Empty>
+            )}
+          </CardContent>
+        </Card>
 
-          <LogDetailsDialog
-            log={selectedLog}
-            isOpen={isDialogOpen}
-            onClose={() => setIsDialogOpen(false)}
-          />
-        </div>
-      </SidebarInset>
-    </SidebarProvider>
+        <LogDetailsDialog
+          log={selectedLog}
+          isOpen={isDialogOpen}
+          onClose={() => setIsDialogOpen(false)}
+        />
+      </div>
+    </AppPageShell>
   );
 }

ui/app/model/page.tsx

@@ -1,329 +1,5 @@
-'use client';
+import { ModelsPage } from '@/components/models-page';
 
-import { ModelSelector } from '@/components/ModelSelector';
-import { ModelTester } from '@/components/ModelTester';
-import { ApiEndpointTester } from '@/components/ApiEndpointTester';
-import { ModelSearchFilter } from '@/components/ModelSearchFilter';
-import { SidebarInset, SidebarProvider } from '@/components/ui/sidebar';
-import { AppSidebar } from '@/components/app-sidebar';
-import { SiteHeader } from '@/components/site-header';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import { useQuery } from '@tanstack/react-query';
-import { AdminService } from '@/lib/api/services/admin';
-import { Skeleton } from '@/components/ui/skeleton';
-import { AlertCircle, Users, Globe } from 'lucide-react';
-import { Alert, AlertDescription } from '@/components/ui/alert';
-import { Badge } from '@/components/ui/badge';
-import { useMemo, useState } from 'react';
-import type { Model } from '@/lib/api/schemas/models';
-import { groupAndSortModelsByProvider } from '@/lib/utils/modelSort';
-
-export default function ModelsPage() {
-  const [filteredModels, setFilteredModels] = useState<Model[]>([]);
-
-  const {
-    data: modelsData,
-    isLoading: isLoadingModels,
-    error: modelsError,
-  } = useQuery({
-    queryKey: ['admin-models-with-providers'],
-    queryFn: () => AdminService.getModelsWithProviders(),
-    refetchOnWindowFocus: false,
-  });
-
-  const { models = [], groups = [] } = modelsData || {};
-
-  const groupedModels = useMemo(() => {
-    return groupAndSortModelsByProvider(models);
-  }, [models]);
-
-  const groupDataMap = useMemo(() => {
-    return new Map(groups.map((group) => [group.provider, group]));
-  }, [groups]);
-
-  const providerInfo = useMemo(() => {
-    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
-      ).length;
-      const totalModels = providerModels.length;
-
-      return {
-        provider,
-        activeModels,
-        totalModels,
-        groupData,
-        hasGroupUrl: !!groupData?.group_url,
-        hasGroupApiKey: !!groupData?.group_api_key,
-      };
-    });
-  }, [groupedModels, groupDataMap, groups]);
-
-  return (
-    <SidebarProvider>
-      <AppSidebar variant='inset' />
-      <SidebarInset>
-        <SiteHeader />
-        <div className='flex flex-1 flex-col'>
-          <div className='@container/main flex flex-1 flex-col gap-4 p-4 md:gap-8 md:p-8'>
-            <div className='mb-6 flex items-center justify-between'>
-              <h1 className='text-2xl font-bold tracking-tight'>
-                Model Management & API Testing
-              </h1>
-            </div>
-
-            <Tabs defaultValue='manage' className='w-full'>
-              <TabsList className='grid w-full grid-cols-3'>
-                <TabsTrigger value='manage'>Manage Models</TabsTrigger>
-                {/*<TabsTrigger value='test-basic'>Basic Testing</TabsTrigger>
-                <TabsTrigger value='test-api'>API Endpoints</TabsTrigger> */}
-              </TabsList>
-
-              <TabsContent value='manage' className='space-y-4'>
-                <div className='text-muted-foreground text-sm'>
-                  Manage your AI models organized by provider groups. Configure
-                  API keys, and organize models by provider groups.
-                </div>
-
-                {isLoadingModels ? (
-                  <div className='space-y-4'>
-                    <Skeleton className='h-[60px] w-full' />
-                    <Skeleton className='h-[400px] w-full' />
-                  </div>
-                ) : modelsError ? (
-                  <Alert variant='destructive'>
-                    <AlertCircle className='h-4 w-4' />
-                    <AlertDescription>
-                      Failed to load models. Please try refreshing the page.
-                    </AlertDescription>
-                  </Alert>
-                ) : (
-                  <Tabs defaultValue='all' className='w-full'>
-                    <div className='space-y-4'>
-                      {/* Provider Tabs Navigation */}
-                      <div className='overflow-x-auto rounded-lg border p-1'>
-                        <TabsList className='grid w-full max-w-full min-w-max auto-cols-fr grid-flow-col gap-1 sm:gap-2'>
-                          <TabsTrigger
-                            value='all'
-                            className='flex items-center gap-1 text-xs whitespace-nowrap sm:gap-2 sm:text-sm'
-                          >
-                            <Globe className='h-3 w-3 sm:h-4 sm:w-4' />
-                            <span className='hidden sm:inline'>All Models</span>
-                            <span className='sm:hidden'>All</span>
-                            <Badge variant='secondary' className='ml-1 text-xs'>
-                              {models.length}
-                            </Badge>
-                          </TabsTrigger>
-                          {providerInfo.map(
-                            ({ provider, activeModels, totalModels }) => (
-                              <TabsTrigger
-                                key={provider}
-                                value={provider}
-                                className='flex min-w-fit items-center gap-1 text-xs whitespace-nowrap sm:gap-2 sm:text-sm'
-                              >
-                                <Users className='h-3 w-3 sm:h-4 sm:w-4' />
-                                <span className='max-w-20 truncate sm:max-w-none'>
-                                  {provider}
-                                </span>
-                                <div className='flex items-center gap-1'>
-                                  <Badge
-                                    variant='secondary'
-                                    className='ml-1 text-xs'
-                                  >
-                                    {activeModels}/{totalModels}
-                                  </Badge>
-                                </div>
-                              </TabsTrigger>
-                            )
-                          )}
-                        </TabsList>
-                      </div>
-
-                      {/* All Models Tab */}
-                      <TabsContent value='all'>
-                        <div className='space-y-4'>
-                          <div className='text-muted-foreground text-sm'>
-                            Overview of all models across all provider groups.
-                          </div>
-                          <ModelSearchFilter
-                            models={models}
-                            onFilteredModelsChange={setFilteredModels}
-                          />
-                          <ModelSelector
-                            filteredModels={filteredModels}
-                            showDeleteAllButton={true}
-                          />
-                        </div>
-                      </TabsContent>
-
-                      {providerInfo.map(
-                        ({ provider, totalModels, groupData }) => {
-                          const providerModels = groupedModels[provider] || [];
-
-                          return (
-                            <TabsContent key={provider} value={provider}>
-                              <div className='space-y-4'>
-                                <div className='flex items-center justify-between'>
-                                  <div>
-                                    <h3 className='flex items-center gap-2 text-lg font-semibold'>
-                                      <Users className='h-5 w-5' />
-                                      {provider}
-                                    </h3>
-                                    <div className='text-muted-foreground flex items-center gap-4 text-sm'>
-                                      {providerModels.filter(
-                                        (m) => m.soft_deleted
-                                      ).length > 0 && (
-                                        <span className='text-orange-600'>
-                                          {
-                                            providerModels.filter(
-                                              (m) => m.soft_deleted
-                                            ).length
-                                          }{' '}
-                                          disabled
-                                        </span>
-                                      )}
-                                      {groupData?.group_url && (
-                                        <span className='flex items-center gap-1'>
-                                          <Globe className='h-3 w-3' />
-                                          {groupData.group_url}
-                                        </span>
-                                      )}
-                                      {totalModels === 0 && (
-                                        <span className='text-muted-foreground'>
-                                          No models configured
-                                        </span>
-                                      )}
-                                    </div>
-                                  </div>
-                                </div>
-                                {totalModels === 0 && (
-                                  <Alert className='mb-4'>
-                                    <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='space-y-1 text-sm'>
-                                          <p className='font-medium'>
-                                            Common issues:
-                                          </p>
-                                          <ul className='ml-2 list-inside list-disc space-y-1'>
-                                            <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='text-muted-foreground mt-2 text-xs'>
-                                              Current endpoint:{' '}
-                                              <code className='bg-muted rounded px-1'>
-                                                {groupData.group_url}
-                                              </code>
-                                            </p>
-                                          )}
-                                        </div>
-                                      </div>
-                                    </AlertDescription>
-                                  </Alert>
-                                )}
-                                <ModelSelector
-                                  filterProvider={provider}
-                                  groupData={groupData}
-                                  showProviderActions={true}
-                                  showDeleteAllButton={false}
-                                />
-                              </div>
-                            </TabsContent>
-                          );
-                        }
-                      )}
-                    </div>
-                  </Tabs>
-                )}
-              </TabsContent>
-
-              <TabsContent value='test-basic' className='space-y-4'>
-                <div className='text-muted-foreground text-sm'>
-                  Test model credentials and connectivity with basic chat
-                  completion requests through the secure proxy (resolves CORS
-                  and Docker network issues). Models can be tested even without
-                  API keys configured (useful for free models or when
-                  authentication is handled elsewhere).
-                </div>
-
-                {isLoadingModels ? (
-                  <div className='space-y-4'>
-                    <Skeleton className='h-[200px] w-full' />
-                    <Skeleton className='h-[100px] w-full' />
-                  </div>
-                ) : modelsError ? (
-                  <Alert variant='destructive'>
-                    <AlertCircle className='h-4 w-4' />
-                    <AlertDescription>
-                      Failed to load models for testing. Please try refreshing
-                      the page.
-                    </AlertDescription>
-                  </Alert>
-                ) : (
-                  <ModelTester models={models} />
-                )}
-              </TabsContent>
-
-              <TabsContent value='test-api' className='space-y-4'>
-                <div className='text-muted-foreground text-sm'>
-                  Comprehensive testing of all OpenAI API endpoints including
-                  chat completions, embeddings, image generation, audio
-                  synthesis, and model listing through the secure proxy
-                  (resolves CORS and Docker network issues). Models can be
-                  tested with or without API keys configured.
-                </div>
-
-                {isLoadingModels ? (
-                  <div className='space-y-4'>
-                    <Skeleton className='h-[300px] w-full' />
-                    <Skeleton className='h-[200px] w-full' />
-                  </div>
-                ) : modelsError ? (
-                  <Alert variant='destructive'>
-                    <AlertCircle className='h-4 w-4' />
-                    <AlertDescription>
-                      Failed to load models for API testing. Please try
-                      refreshing the page.
-                    </AlertDescription>
-                  </Alert>
-                ) : (
-                  <ApiEndpointTester models={models} />
-                )}
-              </TabsContent>
-            </Tabs>
-          </div>
-        </div>
-      </SidebarInset>
-    </SidebarProvider>
-  );
+export default function ModelPage() {
+  return <ModelsPage />;
 }

ui/app/providers.tsx

@@ -3,10 +3,11 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { useState, type ReactNode } from 'react';
-import { Toaster } from 'sonner';
-import { AuthProvider } from '@/lib/auth/AuthContext';
-import { ProtectedRoute } from '@/lib/auth/ProtectedRoute';
+import { AuthProvider } from '@/lib/auth/auth-context';
+import { ProtectedRoute } from '@/lib/auth/protected-route';
 import { ThemeProvider } from '@/components/theme-provider';
+import { TooltipProvider } from '@/components/ui/tooltip';
+import { Toaster } from '@/components/ui/sonner';
 
 interface ProvidersProps {
   children: ReactNode;
@@ -34,12 +35,14 @@ export function Providers({ children }: ProvidersProps) {
         enableSystem
         disableTransitionOnChange
       >
-        <AuthProvider>
-          <ProtectedRoute>
-            {children}
-            <Toaster position='top-right' />
-          </ProtectedRoute>
-        </AuthProvider>
+        <TooltipProvider>
+          <AuthProvider>
+            <ProtectedRoute>
+              {children}
+              <Toaster position='top-right' />
+            </ProtectedRoute>
+          </AuthProvider>
+        </TooltipProvider>
         <ReactQueryDevtools initialIsOpen={false} />
       </ThemeProvider>
     </QueryClientProvider>

ui/app/settings/page.tsx

@@ -4,37 +4,30 @@ import * as React from 'react';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { ServerConfigSettings } from '@/components/settings/server-config-settings';
 import { AdminSettings } from '@/components/settings/admin-settings';
-import { SiteHeader } from '@/components/site-header';
-import { AppSidebar } from '@/components/app-sidebar';
-import { SidebarInset, SidebarProvider } from '@/components/ui/sidebar';
-import { Toaster } from 'sonner';
+import { AppPageShell } from '@/components/app-page-shell';
+import { PageHeader } from '@/components/page-header';
 
 export default function SettingsPage() {
   return (
-    <SidebarProvider>
-      <AppSidebar variant='inset' />
-      <SidebarInset>
-        <SiteHeader />
-        <div className='flex flex-1 flex-col'>
-          <div className='@container/main flex flex-1 flex-col gap-4 p-4 md:gap-8 md:p-8'>
-            <div className='flex items-center'>
-              <h1 className='text-2xl font-bold tracking-tight'>Settings</h1>
-            </div>
-            <Tabs defaultValue='admin' className='w-full'>
-              <TabsList className='mb-4'>
-                <TabsTrigger value='admin'>Admin Settings</TabsTrigger>
-              </TabsList>
-              <TabsContent value='server'>
-                <ServerConfigSettings />
-              </TabsContent>
-              <TabsContent value='admin'>
-                <AdminSettings />
-              </TabsContent>
-            </Tabs>
-          </div>
-        </div>
-      </SidebarInset>
-      <Toaster />
-    </SidebarProvider>
+    <AppPageShell contentClassName='mx-auto w-full max-w-5xl'>
+      <div className='space-y-6'>
+        <PageHeader
+          title='Settings'
+          description='Manage admin authentication, service metadata, and upstream forwarding.'
+        />
+        <Tabs defaultValue='admin' className='w-full'>
+          <TabsList variant='line' className='mb-4 w-full'>
+            <TabsTrigger value='admin'>Admin Settings</TabsTrigger>
+            <TabsTrigger value='server'>Server Config</TabsTrigger>
+          </TabsList>
+          <TabsContent value='server'>
+            <ServerConfigSettings />
+          </TabsContent>
+          <TabsContent value='admin'>
+            <AdminSettings />
+          </TabsContent>
+        </Tabs>
+      </div>
+    </AppPageShell>
   );
 }

ui/app/transactions/page.tsx

@@ -1,20 +1,28 @@
 'use client';
 
-import { useState } from 'react';
-import { SidebarInset, SidebarProvider } from '@/components/ui/sidebar';
-import { AppSidebar } from '@/components/app-sidebar';
-import { SiteHeader } from '@/components/site-header';
+import { useState, useEffect } from 'react';
 import { useQuery } from '@tanstack/react-query';
-import { Skeleton } from '@/components/ui/skeleton';
+import { AppPageShell } from '@/components/app-page-shell';
+import { PageHeader } from '@/components/page-header';
 import {
-  AlertCircle,
-  Copy,
-  RefreshCw,
-  ChevronLeft,
-  ChevronRight,
-} from 'lucide-react';
-import { Alert, AlertDescription } from '@/components/ui/alert';
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Badge } from '@/components/ui/badge';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import {
   Table,
   TableBody,
@@ -23,331 +31,406 @@ import {
   TableHeader,
   TableRow,
 } from '@/components/ui/table';
-import { Badge } from '@/components/ui/badge';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { Skeleton } from '@/components/ui/skeleton';
 import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from '@/components/ui/tooltip';
+  Empty,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from '@/components/ui/empty';
+import {
+  RefreshCw,
+  Search,
+  ArrowDownLeft,
+  ArrowUpRight,
+  Copy,
+  Check,
+  Receipt,
+  Key,
+  Zap,
+} from 'lucide-react';
+import { AdminService, type Transaction } from '@/lib/api/services/admin';
+import { format } from 'date-fns';
 import { toast } from 'sonner';
-import { apiClient } from '@/lib/api/client';
 
-interface Transaction {
-  id: string;
-  created_at: string;
-  token: string;
-  amount: string;
-}
+const STORAGE_KEY = 'routstr-transaction-filters';
 
-interface PaginatedTransactionsResponse {
+function TransactionTable({
+  transactions,
+  copiedId,
+  onCopy,
+  getStatusBadge,
+}: {
   transactions: Transaction[];
-  total: number;
-  page: number;
-  per_page: number;
-  total_pages: number;
+  copiedId: string | null;
+  onCopy: (text: string, id: string) => void;
+  getStatusBadge: (tx: Transaction) => React.ReactNode;
+}) {
+  if (transactions.length === 0) {
+    return (
+      <Empty className='py-8'>
+        <EmptyHeader>
+          <EmptyMedia variant='icon'>
+            <Receipt className='h-4 w-4' />
+          </EmptyMedia>
+          <EmptyTitle>No transactions found</EmptyTitle>
+          <EmptyDescription>
+            Try adjusting your filters or check back later.
+          </EmptyDescription>
+        </EmptyHeader>
+      </Empty>
+    );
+  }
+
+  return (
+    <ScrollArea className='h-[55svh] min-h-[420px] w-full sm:h-[600px]'>
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>Type</TableHead>
+            <TableHead>Amount</TableHead>
+            <TableHead>Status</TableHead>
+            <TableHead>Request ID</TableHead>
+            <TableHead>Mint</TableHead>
+            <TableHead>Date</TableHead>
+            <TableHead className='text-right'>Actions</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {transactions.map((tx) => (
+            <TableRow key={tx.id}>
+              <TableCell>
+                <div className='flex items-center gap-2'>
+                  {tx.type === 'in' ? (
+                    <ArrowDownLeft className='h-4 w-4 text-green-500' />
+                  ) : (
+                    <ArrowUpRight className='h-4 w-4 text-blue-500' />
+                  )}
+                  <span className='capitalize'>{tx.type}</span>
+                </div>
+              </TableCell>
+              <TableCell className='font-mono'>
+                {tx.amount} {tx.unit}
+              </TableCell>
+              <TableCell>{getStatusBadge(tx)}</TableCell>
+              <TableCell>
+                {tx.request_id ? (
+                  <div className='flex items-center gap-1 text-xs'>
+                    <span className='max-w-[150px] truncate font-mono'>
+                      {tx.request_id}
+                    </span>
+                    <Button
+                      variant='ghost'
+                      size='icon'
+                      className='h-4 w-4'
+                      onClick={() => onCopy(tx.request_id!, tx.id + '-req')}
+                    >
+                      {copiedId === tx.id + '-req' ? (
+                        <Check className='h-3 w-3' />
+                      ) : (
+                        <Copy className='h-3 w-3' />
+                      )}
+                    </Button>
+                  </div>
+                ) : (
+                  <span className='text-muted-foreground text-xs'>—</span>
+                )}
+              </TableCell>
+              <TableCell>
+                <div className='flex max-w-[150px] items-center gap-1 truncate text-xs'>
+                  <span className='truncate'>{tx.mint_url}</span>
+                </div>
+              </TableCell>
+              <TableCell className='text-xs whitespace-nowrap'>
+                {format(tx.created_at * 1000, 'yyyy-MM-dd HH:mm:ss')}
+              </TableCell>
+              <TableCell className='text-right'>
+                <Button
+                  variant='ghost'
+                  size='icon'
+                  className='h-8 w-8'
+                  onClick={() => onCopy(tx.token, tx.id + '-token')}
+                  title='Copy Token'
+                >
+                  {copiedId === tx.id + '-token' ? (
+                    <Check className='h-4 w-4' />
+                  ) : (
+                    <Copy className='h-4 w-4' />
+                  )}
+                </Button>
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </ScrollArea>
+  );
 }
 
-const TransactionService = {
-  getAllTransactions: async (): Promise<Transaction[]> => {
-    try {
-      const response = await apiClient.get<Transaction[]>('/api/transactions');
-      return response || [];
-    } catch (error) {
-      console.error('Failed to fetch transactions:', error);
-      throw new Error('Failed to fetch transactions');
-    }
-  },
-
-  getPaginatedTransactions: async (
-    page: number,
-    perPage: number
-  ): Promise<PaginatedTransactionsResponse> => {
-    try {
-      const response = await apiClient.get<PaginatedTransactionsResponse>(
-        `/api/transactions/paginated/${page}/${perPage}`
-      );
-      return response;
-    } catch (error) {
-      console.error('Failed to fetch paginated transactions:', error);
-      throw new Error('Failed to fetch paginated transactions');
-    }
-  },
-
-  getRecentTransactions: async (limit: number): Promise<Transaction[]> => {
-    try {
-      const response = await apiClient.get<Transaction[]>(
-        `/api/transactions/recent/${limit}`
-      );
-      return response || [];
-    } catch (error) {
-      console.error('Failed to fetch recent transactions:', error);
-      throw new Error('Failed to fetch recent transactions');
-    }
-  },
-};
-
 export default function TransactionsPage() {
-  const [currentPage, setCurrentPage] = useState(1);
-  const perPage = 20;
+  const [search, setSearch] = useState('');
+  const [type, setType] = useState<string>('all');
+  const [status, setStatus] = useState<string>('all');
+  const [copiedId, setCopiedId] = useState<string | null>(null);
 
-  // Fetch paginated transactions data
-  const {
-    data: paginationData,
-    isLoading,
-    error,
-    refetch,
-  } = useQuery({
-    queryKey: ['transactions', currentPage, perPage],
+  // Load filters from localStorage on mount
+  useEffect(() => {
+    const saved = localStorage.getItem(STORAGE_KEY);
+    if (saved) {
+      try {
+        const parsed = JSON.parse(saved);
+        if (parsed.search) setSearch(parsed.search);
+        if (parsed.type) setType(parsed.type);
+        if (parsed.status) setStatus(parsed.status);
+      } catch (e) {
+        console.error('Failed to load filters from localStorage', e);
+      }
+    }
+  }, []);
+
+  // Save filters to localStorage whenever they change
+  useEffect(() => {
+    const filters = { search, type, status };
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(filters));
+  }, [search, type, status]);
+
+  const { data, isLoading, refetch, isRefetching } = useQuery({
+    queryKey: ['transactions', type, status, search],
     queryFn: () =>
-      TransactionService.getPaginatedTransactions(currentPage, perPage),
-    refetchOnWindowFocus: false,
-    retry: 1,
-    staleTime: 30000, // 30 seconds
+      AdminService.getTransactions(
+        type === 'all' ? undefined : type,
+        status === 'all' ? undefined : status,
+        search || undefined,
+        100
+      ),
   });
 
-  const transactions = paginationData?.transactions || [];
-  const totalPages = paginationData?.total_pages || 0;
-  const total = paginationData?.total || 0;
-
-  const formatDate = (dateString: string) => {
-    return new Date(dateString).toLocaleString();
+  const handleClearFilters = () => {
+    setSearch('');
+    setType('all');
+    setStatus('all');
   };
 
-  const formatAmount = (amount: string) => {
-    return `${parseInt(amount).toLocaleString()} msats`;
+  const copyToClipboard = (text: string, id: string) => {
+    navigator.clipboard.writeText(text);
+    setCopiedId(id);
+    toast.success('Copied to clipboard');
+    setTimeout(() => setCopiedId(null), 2000);
   };
 
-  const truncateToken = (token: string) => {
-    if (token.length <= 20) return token;
-    return `${token.slice(0, 10)}...${token.slice(-10)}`;
+  const getStatusBadge = (tx: Transaction) => {
+    if (tx.swept)
+      return (
+        <Badge
+          variant='outline'
+          className='border-orange-500/20 bg-orange-500/10 text-orange-500'
+        >
+          Swept
+        </Badge>
+      );
+    if (tx.collected)
+      return (
+        <Badge
+          variant='outline'
+          className='border-green-500/20 bg-green-500/10 text-green-500'
+        >
+          Collected
+        </Badge>
+      );
+    return (
+      <Badge
+        variant='outline'
+        className='border-blue-500/20 bg-blue-500/10 text-blue-500'
+      >
+        Pending
+      </Badge>
+    );
   };
 
-  const copyToClipboard = async (text: string) => {
-    try {
-      await navigator.clipboard.writeText(text);
-      toast.success('Token copied to clipboard!');
-    } catch (error) {
-      console.error('Failed to copy to clipboard:', error);
-      toast.error('Failed to copy token');
-    }
-  };
-
-  const goToPage = (page: number) => {
-    if (page >= 1 && page <= totalPages) {
-      setCurrentPage(page);
-    }
-  };
-
-  const goToPrevious = () => {
-    if (currentPage > 1) {
-      setCurrentPage(currentPage - 1);
-    }
-  };
-
-  const goToNext = () => {
-    if (currentPage < totalPages) {
-      setCurrentPage(currentPage + 1);
+  const hasActiveFilters =
+    type !== 'all' || status !== 'all' || Boolean(search);
+
+  const activeFilterDescription = [
+    type !== 'all' ? `type ${type === 'in' ? 'incoming' : 'outgoing'}` : null,
+    status !== 'all' ? `status ${status}` : null,
+    search ? `search "${search}"` : null,
+  ]
+    .filter(Boolean)
+    .join(' • ');
+
+  const xcashuTxs =
+    data?.transactions.filter((tx) => !tx.source || tx.source === 'x-cashu') ??
+    [];
+  const apikeyTxs =
+    data?.transactions.filter((tx) => tx.source === 'apikey') ?? [];
+
+  const renderCardContent = (txs: Transaction[]) => {
+    if (isLoading) {
+      return (
+        <div className='space-y-2'>
+          {Array.from({ length: 8 }).map((_, index) => (
+            <Skeleton
+              key={`tx-loading-${index}`}
+              className='h-16 w-full rounded-lg'
+            />
+          ))}
+        </div>
+      );
     }
+    return (
+      <TransactionTable
+        transactions={txs}
+        copiedId={copiedId}
+        onCopy={copyToClipboard}
+        getStatusBadge={getStatusBadge}
+      />
+    );
   };
 
   return (
-    <TooltipProvider>
-      <SidebarProvider>
-        <AppSidebar variant='inset' />
-        <SidebarInset>
-          <SiteHeader />
-          <div className='flex flex-1 flex-col'>
-            <div className='@container/main flex flex-1 flex-col gap-4 p-4 md:gap-8 md:p-8'>
-              <div className='mb-6 flex items-center justify-between'>
-                <div>
-                  <h1 className='text-2xl font-bold tracking-tight'>
-                    Transaction History
-                  </h1>
-                  <p className='text-muted-foreground text-sm'>
-                    View all Cashu token transactions processed by the system
-                  </p>
-                </div>
-                <Button
-                  onClick={() => refetch()}
-                  variant='outline'
-                  size='sm'
-                  disabled={isLoading}
-                >
-                  <RefreshCw
-                    className={`mr-2 h-4 w-4 ${isLoading ? 'animate-spin' : ''}`}
+    <AppPageShell contentClassName='mx-auto w-full max-w-5xl overflow-x-hidden'>
+      <div className='space-y-6'>
+        <PageHeader
+          title='Cashu Transactions'
+          description='View all incoming and outgoing Cashu token transactions.'
+          actions={
+            <Button
+              onClick={() => refetch()}
+              variant='outline'
+              size='sm'
+              disabled={isRefetching}
+            >
+              <RefreshCw
+                className={`mr-2 h-4 w-4 ${isRefetching ? 'animate-spin' : ''}`}
+              />
+              Refresh
+            </Button>
+          }
+        />
+
+        <Card className='mb-6'>
+          <CardHeader>
+            <CardTitle>Filters</CardTitle>
+            <CardDescription>
+              Filter transactions by type, status, or search text
+            </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='search'>Search</Label>
+                <div className='relative'>
+                  <Search className='text-muted-foreground absolute top-2.5 left-2.5 h-4 w-4' />
+                  <Input
+                    id='search'
+                    placeholder='Search by ID, token or request ID...'
+                    className='pl-8'
+                    value={search}
+                    onChange={(e) => setSearch(e.target.value)}
                   />
-                  Refresh
+                </div>
+              </div>
+              <div className='space-y-2'>
+                <Label htmlFor='type'>Type</Label>
+                <Select value={type} onValueChange={setType}>
+                  <SelectTrigger>
+                    <SelectValue placeholder='Type' />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value='all'>All Types</SelectItem>
+                    <SelectItem value='in'>Incoming (Payments)</SelectItem>
+                    <SelectItem value='out'>Outgoing (Refunds)</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className='space-y-2'>
+                <Label htmlFor='status'>Status</Label>
+                <Select value={status} onValueChange={setStatus}>
+                  <SelectTrigger>
+                    <SelectValue placeholder='Status' />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value='all'>All Statuses</SelectItem>
+                    <SelectItem value='pending'>Pending</SelectItem>
+                    <SelectItem value='collected'>Collected</SelectItem>
+                    <SelectItem value='swept'>Swept</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className='flex items-end sm:col-span-2 lg:col-span-1'>
+                <Button
+                  onClick={handleClearFilters}
+                  variant='outline'
+                  className='w-full'
+                >
+                  Clear Filters
                 </Button>
               </div>
+            </div>
+          </CardContent>
+        </Card>
 
-              {isLoading ? (
-                <div className='space-y-4'>
-                  {[...Array(5)].map((_, i) => (
-                    <Skeleton key={i} className='h-[120px] w-full' />
-                  ))}
-                </div>
-              ) : error ? (
-                <Alert variant='destructive'>
-                  <AlertCircle className='h-4 w-4' />
-                  <AlertDescription>
-                    Failed to load transactions.{' '}
-                    {error instanceof Error
-                      ? error.message
-                      : 'Please check if the server is running and try refreshing the page.'}
-                  </AlertDescription>
-                </Alert>
-              ) : transactions.length === 0 ? (
-                <div className='py-8 text-center'>
-                  <p className='text-muted-foreground'>
-                    No transactions found.
-                  </p>
-                </div>
-              ) : (
-                <div className='space-y-4'>
-                  <div className='flex items-center justify-between'>
-                    <div className='text-muted-foreground text-sm'>
-                      Showing {(currentPage - 1) * perPage + 1} to{' '}
-                      {Math.min(currentPage * perPage, total)} of {total}{' '}
-                      transactions
-                    </div>
-                    <div className='text-muted-foreground text-sm'>
-                      Page {currentPage} of {totalPages}
-                    </div>
-                  </div>
+        <Tabs defaultValue='x-cashu'>
+          <TabsList className='mb-4'>
+            <TabsTrigger value='x-cashu' className='flex items-center gap-2'>
+              <Zap className='h-4 w-4' />
+              X-Cashu
+              {data && (
+                <Badge variant='secondary' className='ml-1'>
+                  {xcashuTxs.length}
+                </Badge>
+              )}
+            </TabsTrigger>
+            <TabsTrigger value='apikey' className='flex items-center gap-2'>
+              <Key className='h-4 w-4' />
+              API Key Refunds
+              {data && (
+                <Badge variant='secondary' className='ml-1'>
+                  {apikeyTxs.length}
+                </Badge>
+              )}
+            </TabsTrigger>
+          </TabsList>
 
-                  <div className='rounded-md border'>
-                    <Table>
-                      <TableHeader>
-                        <TableRow>
-                          <TableHead className='w-[100px]'>ID</TableHead>
-                          <TableHead>Date & Time</TableHead>
-                          <TableHead>Amount</TableHead>
-                          <TableHead className='w-[400px]'>
-                            Cashu Token
-                          </TableHead>
-                          <TableHead className='w-[60px]'>Actions</TableHead>
-                        </TableRow>
-                      </TableHeader>
-                      <TableBody>
-                        {transactions.map((transaction) => (
-                          <TableRow key={transaction.id}>
-                            <TableCell className='font-mono text-xs'>
-                              {transaction.id.slice(0, 8)}
-                            </TableCell>
-                            <TableCell>
-                              <div className='text-sm'>
-                                {formatDate(transaction.created_at)}
-                              </div>
-                            </TableCell>
-                            <TableCell>
-                              <Badge variant='secondary'>
-                                {formatAmount(transaction.amount)}
-                              </Badge>
-                            </TableCell>
-                            <TableCell>
-                              <div className='flex items-center gap-2'>
-                                <Tooltip>
-                                  <TooltipTrigger asChild>
-                                    <p className='max-w-[300px] cursor-pointer truncate rounded px-1 py-0.5 font-mono text-xs hover:bg-gray-100'>
-                                      {truncateToken(transaction.token)}
-                                    </p>
-                                  </TooltipTrigger>
-                                  <TooltipContent className='max-w-md break-all'>
-                                    <p className='font-mono text-xs'>
-                                      {transaction.token}
-                                    </p>
-                                  </TooltipContent>
-                                </Tooltip>
-                              </div>
-                            </TableCell>
-                            <TableCell>
-                              <Button
-                                variant='ghost'
-                                size='sm'
-                                onClick={() =>
-                                  copyToClipboard(transaction.token)
-                                }
-                                className='h-8 w-8 p-0'
-                              >
-                                <Copy className='h-4 w-4' />
-                              </Button>
-                            </TableCell>
-                          </TableRow>
-                        ))}
-                      </TableBody>
-                    </Table>
-                  </div>
-
-                  {/* Pagination Controls */}
-                  {totalPages > 1 && (
-                    <div className='flex items-center justify-between'>
-                      <div className='text-muted-foreground text-sm'>
-                        Page {currentPage} of {totalPages}
-                      </div>
-                      <div className='flex items-center space-x-2'>
-                        <Button
-                          variant='outline'
-                          size='sm'
-                          onClick={goToPrevious}
-                          disabled={currentPage === 1}
-                        >
-                          <ChevronLeft className='mr-1 h-4 w-4' />
-                          Previous
-                        </Button>
-
-                        {/* Page Numbers */}
-                        <div className='flex items-center space-x-1'>
-                          {Array.from(
-                            { length: Math.min(5, totalPages) },
-                            (_, i) => {
-                              const pageNumber =
-                                currentPage <= 3
-                                  ? i + 1
-                                  : currentPage >= totalPages - 2
-                                    ? totalPages - 4 + i
-                                    : currentPage - 2 + i;
-
-                              if (pageNumber < 1 || pageNumber > totalPages)
-                                return null;
-
-                              return (
-                                <Button
-                                  key={pageNumber}
-                                  variant={
-                                    currentPage === pageNumber
-                                      ? 'default'
-                                      : 'outline'
-                                  }
-                                  size='sm'
-                                  onClick={() => goToPage(pageNumber)}
-                                  className='h-9 w-9 p-0'
-                                >
-                                  {pageNumber}
-                                </Button>
-                              );
-                            }
-                          )}
-                        </div>
-
-                        <Button
-                          variant='outline'
-                          size='sm'
-                          onClick={goToNext}
-                          disabled={currentPage === totalPages}
-                        >
-                          Next
-                          <ChevronRight className='ml-1 h-4 w-4' />
-                        </Button>
-                      </div>
-                    </div>
+          <TabsContent value='x-cashu'>
+            <Card>
+              <CardHeader>
+                <div className='flex flex-col items-start gap-2 sm:flex-row sm:items-center sm:justify-between'>
+                  <CardTitle>X-Cashu Transaction History</CardTitle>
+                  {hasActiveFilters && (
+                    <CardDescription>
+                      Filtered by {activeFilterDescription}
+                    </CardDescription>
                   )}
                 </div>
-              )}
-            </div>
-          </div>
-        </SidebarInset>
-      </SidebarProvider>
-    </TooltipProvider>
+              </CardHeader>
+              <CardContent className='overflow-hidden'>
+                {renderCardContent(xcashuTxs)}
+              </CardContent>
+            </Card>
+          </TabsContent>
+
+          <TabsContent value='apikey'>
+            <Card>
+              <CardHeader>
+                <div className='flex flex-col items-start gap-2 sm:flex-row sm:items-center sm:justify-between'>
+                  <CardTitle>API Key Refund History</CardTitle>
+                  {hasActiveFilters && (
+                    <CardDescription>
+                      Filtered by {activeFilterDescription}
+                    </CardDescription>
+                  )}
+                </div>
+              </CardHeader>
+              <CardContent className='overflow-hidden'>
+                {renderCardContent(apikeyTxs)}
+              </CardContent>
+            </Card>
+          </TabsContent>
+        </Tabs>
+      </div>
+    </AppPageShell>
   );
 }

ui/app/unauthorized/page.tsx

@@ -3,30 +3,34 @@
 import { Button } from '@/components/ui/button';
 import { useRouter } from 'next/navigation';
 import { ShieldAlertIcon } from 'lucide-react';
+import { AuthPageShell } from '@/components/auth-page-shell';
 
 export default function UnauthorizedPage() {
   const router = useRouter();
 
   return (
-    <div className='bg-background flex min-h-screen flex-col items-center justify-center p-4'>
-      <div className='flex max-w-md flex-col items-center space-y-6 text-center'>
-        <ShieldAlertIcon className='text-destructive h-24 w-24' />
-
-        <h1 className='text-4xl font-bold'>Access Denied</h1>
-
-        <p className='text-muted-foreground text-lg'>
-          You don&apos;t have permission to access this page. Please contact
-          your administrator if you believe this is an error.
+    <AuthPageShell
+      title='Access Denied'
+      description="You don't have permission to access this page."
+    >
+      <div className='flex flex-col items-center gap-6'>
+        <ShieldAlertIcon className='text-destructive h-20 w-20' />
+        <p className='text-muted-foreground text-center text-sm'>
+          Contact your administrator if you believe this is an error.
         </p>
-
-        <div className='flex gap-4'>
-          <Button onClick={() => router.push('/')}>Go to Dashboard</Button>
-
-          <Button variant='outline' onClick={() => router.back()}>
+        <div className='flex w-full flex-col gap-3 sm:w-auto sm:flex-row'>
+          <Button onClick={() => router.push('/')} className='w-full sm:w-auto'>
+            Go to Dashboard
+          </Button>
+          <Button
+            variant='outline'
+            onClick={() => router.back()}
+            className='w-full sm:w-auto'
+          >
             Go Back
           </Button>
         </div>
       </div>
-    </div>
+    </AuthPageShell>
   );
 }

ui/components.json

@@ -1,15 +1,17 @@
 {
   "$schema": "https://ui.shadcn.com/schema.json",
-  "style": "new-york",
+  "style": "radix-nova",
   "rsc": true,
   "tsx": true,
   "tailwind": {
     "config": "",
     "css": "app/globals.css",
-    "baseColor": "stone",
+    "baseColor": "neutral",
     "cssVariables": true,
     "prefix": ""
   },
+  "iconLibrary": "lucide",
+  "rtl": false,
   "aliases": {
     "components": "@/components",
     "utils": "@/lib/utils",
@@ -17,5 +19,5 @@
     "lib": "@/lib",
     "hooks": "@/hooks"
   },
-  "iconLibrary": "lucide"
+  "registries": {}
 }

ui/components/EditModelForm.tsx

@@ -1,470 +0,0 @@
-'use client';
-
-import React, { useState, useEffect, useCallback } from 'react';
-import { useForm } from 'react-hook-form';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { z } from 'zod';
-import { type Model } from '@/lib/api/schemas/models';
-import { AdminService } from '@/lib/api/services/admin';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Textarea } from '@/components/ui/textarea';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog';
-import {
-  Form,
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@/components/ui/form';
-import { Edit3, Loader2 } from 'lucide-react';
-import { toast } from 'sonner';
-import { Switch } from '@/components/ui/switch';
-
-const EditModelFormSchema = z.object({
-  name: z.string().min(1, 'Name is required'),
-  description: z.string().optional(),
-  context_length: z.coerce.number().min(0),
-  prompt: z.coerce.number().min(0),
-  completion: z.coerce.number().min(0),
-  enabled: z.boolean(),
-});
-
-type EditModelFormData = z.infer<typeof EditModelFormSchema>;
-
-const roundToFiveDecimals = (value: number | undefined | null): number => {
-  if (value === undefined || value === null || isNaN(value)) {
-    return 0;
-  }
-  return Math.round(value * 100000) / 100000;
-};
-
-interface EditModelFormProps {
-  model: Model;
-  providerId?: number;
-  onModelUpdate?: () => void;
-  onCancel?: () => void;
-  isOpen: boolean;
-}
-
-interface AdminModelData {
-  id: string;
-  name: string;
-  description?: string;
-  created: number;
-  context_length: number;
-  architecture: {
-    modality: string;
-    input_modalities: string[];
-    output_modalities: string[];
-    tokenizer: string;
-    instruct_type: string | null;
-  };
-  pricing: {
-    prompt: number;
-    completion: number;
-    request: number;
-    image: number;
-    web_search: number;
-    internal_reasoning: number;
-  };
-  per_request_limits: null | undefined;
-  top_provider: null | undefined;
-  upstream_provider_id: number;
-  enabled: boolean;
-}
-
-export function EditModelForm({
-  model,
-  providerId,
-  onModelUpdate,
-  onCancel,
-  isOpen,
-}: EditModelFormProps) {
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const [adminModelData, setAdminModelData] = useState<AdminModelData | null>(
-    null
-  );
-  const [isNewOverride, setIsNewOverride] = useState(false);
-
-  const form = useForm<EditModelFormData>({
-    resolver: zodResolver(EditModelFormSchema),
-    defaultValues: {
-      name: model.name,
-      description: model.description || '',
-      context_length: model.contextLength || 4096,
-      prompt: roundToFiveDecimals(model.input_cost),
-      completion: roundToFiveDecimals(model.output_cost),
-      enabled: model.isEnabled !== false,
-    },
-  });
-
-  const loadAdminModel = useCallback(async () => {
-    if (!providerId) {
-      console.error('loadAdminModel called without providerId');
-      return;
-    }
-
-    try {
-      console.log('Loading admin model:', {
-        providerId,
-        modelId: model.full_name,
-      });
-
-      const adminModel = await AdminService.getProviderModel(
-        providerId,
-        model.id
-      );
-
-      setAdminModelData(adminModel as AdminModelData);
-      setIsNewOverride(false);
-
-      form.reset({
-        name: adminModel.name,
-        description: adminModel.description || '',
-        context_length: adminModel.context_length,
-        prompt: roundToFiveDecimals(adminModel.pricing.prompt),
-        completion: roundToFiveDecimals(adminModel.pricing.completion),
-        enabled: adminModel.enabled !== false,
-      });
-    } catch (error: unknown) {
-      console.log('Model not in database, will create new override:', error);
-      setIsNewOverride(true);
-      setAdminModelData({
-        id: model.full_name,
-        name: model.name,
-        description: model.description || '',
-        created: Math.floor(Date.now() / 1000),
-        context_length: model.contextLength || 4096,
-        architecture: {
-          modality: model.modelType || 'text',
-          input_modalities: [model.modelType || 'text'],
-          output_modalities: [model.modelType || 'text'],
-          tokenizer: '',
-          instruct_type: null,
-        },
-        pricing: {
-          prompt: roundToFiveDecimals(model.input_cost),
-          completion: roundToFiveDecimals(model.output_cost),
-          request: 0,
-          image: 0,
-          web_search: 0,
-          internal_reasoning: 0,
-        },
-        per_request_limits: null,
-        top_provider: null,
-        upstream_provider_id: providerId,
-        enabled: model.isEnabled !== false,
-      });
-
-      form.reset({
-        name: model.name,
-        description: model.description || '',
-        context_length: model.contextLength || 4096,
-        prompt: roundToFiveDecimals(model.input_cost),
-        completion: roundToFiveDecimals(model.output_cost),
-        enabled: model.isEnabled !== false,
-      });
-    }
-  }, [providerId, model, form]);
-
-  useEffect(() => {
-    if (isOpen && providerId) {
-      loadAdminModel();
-    } else if (isOpen && !providerId) {
-      console.error('EditModelForm opened without providerId', {
-        model,
-        providerId,
-      });
-      toast.error('Missing provider information for this model');
-    }
-  }, [isOpen, providerId, model, loadAdminModel]);
-
-  const onSubmit = async (data: EditModelFormData) => {
-    if (!providerId) {
-      console.error('onSubmit called without providerId', {
-        model,
-        providerId,
-      });
-      toast.error('Missing provider ID - cannot update model');
-      return;
-    }
-
-    if (!adminModelData) {
-      console.error('onSubmit called without adminModelData', {
-        model,
-        providerId,
-        adminModelData,
-      });
-      toast.error('Model data not loaded - please try reopening the form');
-      return;
-    }
-
-    setIsSubmitting(true);
-    try {
-      const payload = {
-        id: adminModelData.id,
-        name: data.name,
-        description: data.description || '',
-        created: adminModelData.created || Math.floor(Date.now() / 1000),
-        context_length: data.context_length,
-        architecture: adminModelData.architecture || {
-          modality: 'text',
-          input_modalities: ['text'],
-          output_modalities: ['text'],
-          tokenizer: '',
-          instruct_type: null,
-        },
-        pricing: {
-          prompt: roundToFiveDecimals(data.prompt),
-          completion: roundToFiveDecimals(data.completion),
-          request: 0,
-          image: 0,
-          web_search: 0,
-          internal_reasoning: 0,
-        },
-        per_request_limits: adminModelData.per_request_limits,
-        top_provider: adminModelData.top_provider,
-        upstream_provider_id: providerId,
-        enabled: data.enabled,
-      };
-
-      if (isNewOverride) {
-        console.log('Creating new model override');
-        await AdminService.createProviderModel(providerId, payload);
-        toast.success('Model override created successfully!');
-      } else {
-        console.log('Updating existing model override');
-        await AdminService.updateProviderModel(
-          providerId,
-          adminModelData.id,
-          payload
-        );
-        toast.success('Model updated successfully!');
-      }
-
-      onModelUpdate?.();
-      onCancel?.();
-    } catch (error) {
-      const action = isNewOverride ? 'create' : 'update';
-      toast.error(`Failed to ${action} model. Please try again.`);
-      console.error(`Error ${action}ing model:`, error);
-    } finally {
-      setIsSubmitting(false);
-    }
-  };
-
-  const handleClose = () => {
-    if (!isSubmitting) {
-      onCancel?.();
-    }
-  };
-
-  return (
-    <Dialog open={isOpen} onOpenChange={handleClose}>
-      <DialogContent className='max-h-[90vh] overflow-y-auto sm:max-w-[600px]'>
-        <DialogHeader>
-          <DialogTitle className='flex items-center gap-2'>
-            <Edit3 className='h-5 w-5' />
-            {isNewOverride ? 'Create Model Override' : 'Edit Model Override'}
-          </DialogTitle>
-          <DialogDescription>
-            {isNewOverride
-              ? `Create an override for &quot;${model.name}&quot;`
-              : `Update the model override for &quot;${model.name}&quot;`}
-          </DialogDescription>
-        </DialogHeader>
-
-        <Form {...form}>
-          <form onSubmit={form.handleSubmit(onSubmit)} className='space-y-4'>
-            <div className='grid grid-cols-1 gap-4 sm:grid-cols-2'>
-              <FormField
-                control={form.control}
-                name='name'
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Display Name *</FormLabel>
-                    <FormControl>
-                      <Input
-                        placeholder='e.g., GPT-4'
-                        {...field}
-                        className='w-full'
-                      />
-                    </FormControl>
-                    <FormDescription>
-                      Custom display name for the model
-                    </FormDescription>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-
-              <FormField
-                control={form.control}
-                name='context_length'
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Context Length *</FormLabel>
-                    <FormControl>
-                      <Input
-                        type='number'
-                        min='0'
-                        placeholder='4096'
-                        {...field}
-                        className='w-full'
-                      />
-                    </FormControl>
-                    <FormDescription>
-                      Maximum context window size
-                    </FormDescription>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-            </div>
-
-            <FormField
-              control={form.control}
-              name='description'
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>Description</FormLabel>
-                  <FormControl>
-                    <Textarea
-                      placeholder='Brief description of the model...'
-                      {...field}
-                      rows={3}
-                      className='w-full'
-                    />
-                  </FormControl>
-                  <FormDescription>
-                    Optional description or notes about the model
-                  </FormDescription>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-
-            <div className='grid grid-cols-1 gap-4 sm:grid-cols-2'>
-              <FormField
-                control={form.control}
-                name='prompt'
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Input Cost (per 1M tokens) *</FormLabel>
-                    <FormControl>
-                      <Input
-                        type='number'
-                        step='0.00001'
-                        min='0'
-                        placeholder='5.00000'
-                        value={field.value ?? ''}
-                        onChange={(e) => {
-                          const value = e.target.value;
-                          field.onChange(value === '' ? 0 : parseFloat(value));
-                        }}
-                        onBlur={(e) => {
-                          const value = parseFloat(e.target.value);
-                          field.onChange(roundToFiveDecimals(value));
-                        }}
-                        className='w-full'
-                      />
-                    </FormControl>
-                    <FormDescription>
-                      Cost in USD per 1,000,000 input tokens (max 5 decimals)
-                    </FormDescription>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-
-              <FormField
-                control={form.control}
-                name='completion'
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Output Cost (per 1M tokens) *</FormLabel>
-                    <FormControl>
-                      <Input
-                        type='number'
-                        step='0.00001'
-                        min='0'
-                        placeholder='15.00000'
-                        value={field.value ?? ''}
-                        onChange={(e) => {
-                          const value = e.target.value;
-                          field.onChange(value === '' ? 0 : parseFloat(value));
-                        }}
-                        onBlur={(e) => {
-                          const value = parseFloat(e.target.value);
-                          field.onChange(roundToFiveDecimals(value));
-                        }}
-                        className='w-full'
-                      />
-                    </FormControl>
-                    <FormDescription>
-                      Cost in USD per 1,000,000 output tokens (max 5 decimals)
-                    </FormDescription>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-            </div>
-
-            <FormField
-              control={form.control}
-              name='enabled'
-              render={({ field }) => (
-                <FormItem className='flex flex-row items-center justify-between rounded-lg border p-4'>
-                  <div className='space-y-0.5'>
-                    <FormLabel className='text-base'>Model Enabled</FormLabel>
-                    <FormDescription>
-                      Enable or disable this model override
-                    </FormDescription>
-                  </div>
-                  <FormControl>
-                    <Switch
-                      checked={field.value}
-                      onCheckedChange={field.onChange}
-                    />
-                  </FormControl>
-                </FormItem>
-              )}
-            />
-
-            <div className='flex justify-end gap-2 pt-4'>
-              <Button
-                type='button'
-                variant='outline'
-                onClick={handleClose}
-                disabled={isSubmitting}
-              >
-                Cancel
-              </Button>
-              <Button type='submit' disabled={isSubmitting}>
-                {isSubmitting ? (
-                  <>
-                    <Loader2 className='mr-2 h-4 w-4 animate-spin' />
-                    {isNewOverride ? 'Creating...' : 'Updating...'}
-                  </>
-                ) : isNewOverride ? (
-                  'Create Override'
-                ) : (
-                  'Update Model'
-                )}
-              </Button>
-            </div>
-          </form>
-        </Form>
-      </DialogContent>
-    </Dialog>
-  );
-}

ui/components/add-model-form.tsx

@@ -3,6 +3,7 @@
 import React, { useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
 import { ManualModelSchema, type ManualModel } from '@/lib/api/schemas/models';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
@@ -45,9 +46,10 @@ export function AddModelForm({
   isOpen,
 }: AddModelFormProps) {
   const [isSubmitting, setIsSubmitting] = useState(false);
+  type ManualModelInput = z.input<typeof ManualModelSchema>;
 
-  const form = useForm<ManualModel>({
-    resolver: zodResolver(ManualModelSchema) as any, // eslint-disable-line @typescript-eslint/no-explicit-any
+  const form = useForm<ManualModelInput, unknown, ManualModel>({
+    resolver: zodResolver(ManualModelSchema),
     defaultValues: {
       name: '',
       full_name: '',

ui/components/add-provider-model-dialog.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 import { zodResolver } from '@hookform/resolvers/zod';
@@ -39,7 +39,7 @@ import {
   FormMessage,
 } from '@/components/ui/form';
 import { Switch } from '@/components/ui/switch';
-import { Loader2, Plus } from 'lucide-react';
+import { Check, Copy, Loader2, Plus } from 'lucide-react';
 import { toast } from 'sonner';
 import { AdminService, type AdminModel } from '@/lib/api/services/admin';
 
@@ -64,6 +64,7 @@ const FormSchema = z.object({
   instruct_type: z.string().default(''),
   canonical_slug: z.string().default(''),
   alias_ids_raw: z.string().default(''),
+  forwarded_model_id: z.string().default(''),
   upstream_provider_id: z.string().default(''),
   input_cost: z.coerce.number().min(0).default(0),
   output_cost: z.coerce.number().min(0).default(0),
@@ -104,6 +105,7 @@ export function AddProviderModelDialog({
   const [isPresetOpen, setIsPresetOpen] = useState(false);
   const [selectedPresetLabel, setSelectedPresetLabel] =
     useState('Select a preset');
+  const [forwardedModelIdCopied, setForwardedModelIdCopied] = useState(false);
 
   const form = useForm<FormData>({
     resolver: zodResolver(FormSchema) as never,
@@ -119,6 +121,7 @@ export function AddProviderModelDialog({
       instruct_type: '',
       canonical_slug: '',
       alias_ids_raw: '',
+      forwarded_model_id: '',
       upstream_provider_id: '',
       input_cost: 0,
       output_cost: 0,
@@ -180,6 +183,7 @@ export function AddProviderModelDialog({
             : '',
         canonical_slug: initialData.canonical_slug || '',
         alias_ids_raw: listToString(initialData.alias_ids),
+        forwarded_model_id: initialData.forwarded_model_id || initialData.id,
         upstream_provider_id:
           typeof initialData.upstream_provider_id === 'string'
             ? initialData.upstream_provider_id
@@ -223,6 +227,7 @@ export function AddProviderModelDialog({
         instruct_type: '',
         canonical_slug: '',
         alias_ids_raw: '',
+        forwarded_model_id: '',
         upstream_provider_id: '',
         input_cost: 0,
         output_cost: 0,
@@ -280,6 +285,7 @@ export function AddProviderModelDialog({
     );
     form.setValue('canonical_slug', model.canonical_slug || '');
     form.setValue('alias_ids_raw', listToString(model.alias_ids));
+    form.setValue('forwarded_model_id', model.forwarded_model_id || model.id);
     form.setValue(
       'upstream_provider_id',
       typeof model.upstream_provider_id === 'string'
@@ -385,6 +391,7 @@ export function AddProviderModelDialog({
         canonical_slug: data.canonical_slug?.trim() || null,
         alias_ids: listFromString(data.alias_ids_raw || ''),
         enabled: data.enabled,
+        forwarded_model_id: data.forwarded_model_id?.trim() || data.id,
       };
 
       if (isEdit) {
@@ -520,6 +527,53 @@ export function AddProviderModelDialog({
                 )}
               />
 
+              <FormField
+                control={form.control}
+                name='forwarded_model_id'
+                render={({ field }) => {
+                  const handleCopy = () => {
+                    const value = field.value || form.getValues('id');
+                    if (!value) return;
+                    navigator.clipboard.writeText(value);
+                    setForwardedModelIdCopied(true);
+                    setTimeout(() => setForwardedModelIdCopied(false), 1500);
+                  };
+                  return (
+                    <FormItem>
+                      <FormLabel>Upstream Model ID</FormLabel>
+                      <FormControl>
+                        <div className='flex gap-2'>
+                          <Input
+                            placeholder={
+                              form.watch('id') || 'e.g., openai/gpt-4o'
+                            }
+                            {...field}
+                          />
+                          <Button
+                            type='button'
+                            variant='outline'
+                            size='icon'
+                            onClick={handleCopy}
+                            title='Copy model ID'
+                          >
+                            {forwardedModelIdCopied ? (
+                              <Check className='h-4 w-4 text-green-500' />
+                            ) : (
+                              <Copy className='h-4 w-4' />
+                            )}
+                          </Button>
+                        </div>
+                      </FormControl>
+                      <FormDescription>
+                        Model ID sent to the upstream provider. Defaults to the
+                        model&apos;s own ID.
+                      </FormDescription>
+                      <FormMessage />
+                    </FormItem>
+                  );
+                }}
+              />
+
               <FormField
                 control={form.control}
                 name='name'

ui/components/api-endpoint-form.tsx

@@ -0,0 +1,699 @@
+import type { ChangeEvent, Dispatch, SetStateAction } from 'react';
+import Image from 'next/image';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Textarea } from '@/components/ui/textarea';
+import { Image as ImageIcon, List, Mic, MicOff, Volume2 } from 'lucide-react';
+import type { EndpointType } from '@/components/api-endpoint-types';
+
+interface ApiEndpointFormProps {
+  selectedEndpoint: EndpointType;
+  maxTokens: number;
+  setMaxTokens: Dispatch<SetStateAction<number>>;
+  temperature: number;
+  setTemperature: Dispatch<SetStateAction<number>>;
+  systemMessage: string;
+  setSystemMessage: Dispatch<SetStateAction<string>>;
+  userMessage: string;
+  setUserMessage: Dispatch<SetStateAction<string>>;
+
+  visionMaxTokens: number;
+  setVisionMaxTokens: Dispatch<SetStateAction<number>>;
+  visionTemperature: number;
+  setVisionTemperature: Dispatch<SetStateAction<number>>;
+  visionSystemMessage: string;
+  setVisionSystemMessage: Dispatch<SetStateAction<string>>;
+  visionUserMessage: string;
+  setVisionUserMessage: Dispatch<SetStateAction<string>>;
+  imageDetail: 'low' | 'high' | 'auto';
+  setImageDetail: Dispatch<SetStateAction<'low' | 'high' | 'auto'>>;
+  selectedImage: File | null;
+  imagePreviewUrl: string | null;
+  onImageUpload: (event: ChangeEvent<HTMLInputElement>) => void;
+  onRemoveImage: () => void;
+
+  embeddingInput: string;
+  setEmbeddingInput: Dispatch<SetStateAction<string>>;
+  encodingFormat: 'float' | 'base64';
+  setEncodingFormat: Dispatch<SetStateAction<'float' | 'base64'>>;
+
+  imageCount: number;
+  setImageCount: Dispatch<SetStateAction<number>>;
+  imageSize: '256x256' | '512x512' | '1024x1024' | '1792x1024' | '1024x1792';
+  setImageSize: Dispatch<
+    SetStateAction<
+      '256x256' | '512x512' | '1024x1024' | '1792x1024' | '1024x1792'
+    >
+  >;
+  imageQuality: 'standard' | 'hd';
+  setImageQuality: Dispatch<SetStateAction<'standard' | 'hd'>>;
+  imageStyle: 'vivid' | 'natural';
+  setImageStyle: Dispatch<SetStateAction<'vivid' | 'natural'>>;
+  imagePrompt: string;
+  setImagePrompt: Dispatch<SetStateAction<string>>;
+
+  speechVoice: 'alloy' | 'echo' | 'fable' | 'onyx' | 'nova' | 'shimmer';
+  setSpeechVoice: Dispatch<
+    SetStateAction<'alloy' | 'echo' | 'fable' | 'onyx' | 'nova' | 'shimmer'>
+  >;
+  speechFormat: 'mp3' | 'opus' | 'aac' | 'flac' | 'wav' | 'pcm';
+  setSpeechFormat: Dispatch<
+    SetStateAction<'mp3' | 'opus' | 'aac' | 'flac' | 'wav' | 'pcm'>
+  >;
+  speechSpeed: number;
+  setSpeechSpeed: Dispatch<SetStateAction<number>>;
+  speechInput: string;
+  setSpeechInput: Dispatch<SetStateAction<string>>;
+
+  audioTranscriptionPrompt: string;
+  setAudioTranscriptionPrompt: Dispatch<SetStateAction<string>>;
+  audioTemperature: number;
+  setAudioTemperature: Dispatch<SetStateAction<number>>;
+  audioLanguage: string;
+  setAudioLanguage: Dispatch<SetStateAction<string>>;
+  audioResponseFormat: 'json' | 'text' | 'srt' | 'verbose_json' | 'vtt';
+  setAudioResponseFormat: Dispatch<
+    SetStateAction<'json' | 'text' | 'srt' | 'verbose_json' | 'vtt'>
+  >;
+  isRecording: boolean;
+  onStartRecording: () => void;
+  onStopRecording: () => void;
+  onAudioUpload: (event: ChangeEvent<HTMLInputElement>) => void;
+  recordedAudio: File | null;
+  recordingUrl: string | null;
+  onRemoveAudio: () => void;
+}
+
+export function ApiEndpointForm({
+  selectedEndpoint,
+  maxTokens,
+  setMaxTokens,
+  temperature,
+  setTemperature,
+  systemMessage,
+  setSystemMessage,
+  userMessage,
+  setUserMessage,
+  visionMaxTokens,
+  setVisionMaxTokens,
+  visionTemperature,
+  setVisionTemperature,
+  visionSystemMessage,
+  setVisionSystemMessage,
+  visionUserMessage,
+  setVisionUserMessage,
+  imageDetail,
+  setImageDetail,
+  selectedImage,
+  imagePreviewUrl,
+  onImageUpload,
+  onRemoveImage,
+  embeddingInput,
+  setEmbeddingInput,
+  encodingFormat,
+  setEncodingFormat,
+  imageCount,
+  setImageCount,
+  imageSize,
+  setImageSize,
+  imageQuality,
+  setImageQuality,
+  imageStyle,
+  setImageStyle,
+  imagePrompt,
+  setImagePrompt,
+  speechVoice,
+  setSpeechVoice,
+  speechFormat,
+  setSpeechFormat,
+  speechSpeed,
+  setSpeechSpeed,
+  speechInput,
+  setSpeechInput,
+  audioTranscriptionPrompt,
+  setAudioTranscriptionPrompt,
+  audioTemperature,
+  setAudioTemperature,
+  audioLanguage,
+  setAudioLanguage,
+  audioResponseFormat,
+  setAudioResponseFormat,
+  isRecording,
+  onStartRecording,
+  onStopRecording,
+  onAudioUpload,
+  recordedAudio,
+  recordingUrl,
+  onRemoveAudio,
+}: ApiEndpointFormProps) {
+  switch (selectedEndpoint) {
+    case 'chat-completions':
+      return (
+        <div className='space-y-4'>
+          <div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
+            <div className='space-y-2'>
+              <Label htmlFor='max-tokens'>Max Tokens</Label>
+              <Input
+                id='max-tokens'
+                type='number'
+                min={1}
+                max={4000}
+                value={maxTokens}
+                onChange={(event) =>
+                  setMaxTokens(parseInt(event.target.value) || 150)
+                }
+              />
+            </div>
+            <div className='space-y-2'>
+              <Label htmlFor='temperature'>Temperature</Label>
+              <Input
+                id='temperature'
+                type='number'
+                min={0}
+                max={2}
+                step={0.1}
+                value={temperature}
+                onChange={(event) =>
+                  setTemperature(parseFloat(event.target.value) || 0.7)
+                }
+              />
+            </div>
+          </div>
+
+          <div className='space-y-2'>
+            <Label htmlFor='system-message'>System Message (Optional)</Label>
+            <Textarea
+              id='system-message'
+              placeholder='Enter system message...'
+              value={systemMessage}
+              onChange={(event) => setSystemMessage(event.target.value)}
+              rows={2}
+            />
+          </div>
+
+          <div className='space-y-2'>
+            <Label htmlFor='user-message'>Test Message</Label>
+            <Textarea
+              id='user-message'
+              placeholder='Enter your test message...'
+              value={userMessage}
+              onChange={(event) => setUserMessage(event.target.value)}
+              rows={3}
+            />
+          </div>
+        </div>
+      );
+
+    case 'vision-chat':
+      return (
+        <div className='space-y-4'>
+          <div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
+            <div className='space-y-2'>
+              <Label htmlFor='vision-max-tokens'>Max Tokens</Label>
+              <Input
+                id='vision-max-tokens'
+                type='number'
+                min={1}
+                max={4000}
+                value={visionMaxTokens}
+                onChange={(event) =>
+                  setVisionMaxTokens(parseInt(event.target.value) || 300)
+                }
+              />
+            </div>
+            <div className='space-y-2'>
+              <Label htmlFor='vision-temperature'>Temperature</Label>
+              <Input
+                id='vision-temperature'
+                type='number'
+                min={0}
+                max={2}
+                step={0.1}
+                value={visionTemperature}
+                onChange={(event) =>
+                  setVisionTemperature(parseFloat(event.target.value) || 0.7)
+                }
+              />
+            </div>
+          </div>
+
+          <div className='space-y-2'>
+            <Label htmlFor='vision-system-message'>
+              System Message (Optional)
+            </Label>
+            <Textarea
+              id='vision-system-message'
+              placeholder='Enter system message...'
+              value={visionSystemMessage}
+              onChange={(event) => setVisionSystemMessage(event.target.value)}
+              rows={2}
+            />
+          </div>
+
+          <div className='space-y-2'>
+            <Label htmlFor='vision-user-message'>Test Message</Label>
+            <Textarea
+              id='vision-user-message'
+              placeholder='Enter your test message...'
+              value={visionUserMessage}
+              onChange={(event) => setVisionUserMessage(event.target.value)}
+              rows={3}
+            />
+          </div>
+
+          <div className='space-y-2'>
+            <Label htmlFor='image-detail'>Image Detail</Label>
+            <Select
+              value={imageDetail}
+              onValueChange={(value: 'low' | 'high' | 'auto') =>
+                setImageDetail(value)
+              }
+            >
+              <SelectTrigger>
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value='low'>Low</SelectItem>
+                <SelectItem value='high'>High</SelectItem>
+                <SelectItem value='auto'>Auto</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div className='space-y-2'>
+            <Label htmlFor='image-upload'>Upload Image (Optional)</Label>
+            <Input
+              type='file'
+              accept='image/*'
+              onChange={onImageUpload}
+              className='cursor-pointer'
+            />
+            {selectedImage && (
+              <div className='mt-2 flex flex-wrap items-center gap-2'>
+                <ImageIcon className='text-muted-foreground h-5 w-5' />
+                <span className='text-muted-foreground text-sm'>
+                  Selected image: {selectedImage.name}
+                </span>
+                <Button
+                  variant='outline'
+                  size='sm'
+                  onClick={onRemoveImage}
+                  className='ml-0 sm:ml-auto'
+                >
+                  Remove
+                </Button>
+              </div>
+            )}
+            {imagePreviewUrl && (
+              <div className='relative mt-2 aspect-square w-32 overflow-hidden rounded-md border'>
+                <Image
+                  src={imagePreviewUrl}
+                  alt='Image preview'
+                  fill
+                  className='object-cover'
+                />
+              </div>
+            )}
+          </div>
+        </div>
+      );
+
+    case 'embeddings':
+      return (
+        <div className='space-y-4'>
+          <div className='space-y-2'>
+            <Label htmlFor='encoding-format'>Encoding Format</Label>
+            <Select
+              value={encodingFormat}
+              onValueChange={(value: 'float' | 'base64') =>
+                setEncodingFormat(value)
+              }
+            >
+              <SelectTrigger>
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value='float'>Float</SelectItem>
+                <SelectItem value='base64'>Base64</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div className='space-y-2'>
+            <Label htmlFor='embedding-input'>Text Input</Label>
+            <Textarea
+              id='embedding-input'
+              placeholder='Enter text to generate embeddings for...'
+              value={embeddingInput}
+              onChange={(event) => setEmbeddingInput(event.target.value)}
+              rows={4}
+            />
+          </div>
+        </div>
+      );
+
+    case 'images':
+      return (
+        <div className='space-y-4'>
+          <div className='grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3'>
+            <div className='space-y-2'>
+              <Label htmlFor='image-count'>Number of Images</Label>
+              <Input
+                id='image-count'
+                type='number'
+                min={1}
+                max={10}
+                value={imageCount}
+                onChange={(event) =>
+                  setImageCount(parseInt(event.target.value) || 1)
+                }
+              />
+            </div>
+
+            <div className='space-y-2'>
+              <Label htmlFor='image-size'>Size</Label>
+              <Select
+                value={imageSize}
+                onValueChange={(
+                  value:
+                    | '256x256'
+                    | '512x512'
+                    | '1024x1024'
+                    | '1792x1024'
+                    | '1024x1792'
+                ) => setImageSize(value)}
+              >
+                <SelectTrigger>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value='256x256'>256x256</SelectItem>
+                  <SelectItem value='512x512'>512x512</SelectItem>
+                  <SelectItem value='1024x1024'>1024x1024</SelectItem>
+                  <SelectItem value='1792x1024'>1792x1024</SelectItem>
+                  <SelectItem value='1024x1792'>1024x1792</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div className='space-y-2'>
+              <Label htmlFor='image-quality'>Quality</Label>
+              <Select
+                value={imageQuality}
+                onValueChange={(value: 'standard' | 'hd') =>
+                  setImageQuality(value)
+                }
+              >
+                <SelectTrigger>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value='standard'>Standard</SelectItem>
+                  <SelectItem value='hd'>HD</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+
+          <div className='space-y-2'>
+            <Label htmlFor='image-style'>Style</Label>
+            <Select
+              value={imageStyle}
+              onValueChange={(value: 'vivid' | 'natural') =>
+                setImageStyle(value)
+              }
+            >
+              <SelectTrigger>
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value='vivid'>Vivid</SelectItem>
+                <SelectItem value='natural'>Natural</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div className='space-y-2'>
+            <Label htmlFor='image-prompt'>Image Prompt</Label>
+            <Textarea
+              id='image-prompt'
+              placeholder='Describe the image you want to generate...'
+              value={imagePrompt}
+              onChange={(event) => setImagePrompt(event.target.value)}
+              rows={3}
+            />
+          </div>
+        </div>
+      );
+
+    case 'audio-speech':
+      return (
+        <div className='space-y-4'>
+          <div className='grid grid-cols-1 gap-4 md:grid-cols-3'>
+            <div className='space-y-2'>
+              <Label htmlFor='speech-voice'>Voice</Label>
+              <Select
+                value={speechVoice}
+                onValueChange={(
+                  value:
+                    | 'alloy'
+                    | 'echo'
+                    | 'fable'
+                    | 'onyx'
+                    | 'nova'
+                    | 'shimmer'
+                ) => setSpeechVoice(value)}
+              >
+                <SelectTrigger>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value='alloy'>Alloy</SelectItem>
+                  <SelectItem value='echo'>Echo</SelectItem>
+                  <SelectItem value='fable'>Fable</SelectItem>
+                  <SelectItem value='onyx'>Onyx</SelectItem>
+                  <SelectItem value='nova'>Nova</SelectItem>
+                  <SelectItem value='shimmer'>Shimmer</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div className='space-y-2'>
+              <Label htmlFor='speech-format'>Response Format</Label>
+              <Select
+                value={speechFormat}
+                onValueChange={(
+                  value: 'mp3' | 'opus' | 'aac' | 'flac' | 'wav' | 'pcm'
+                ) => setSpeechFormat(value)}
+              >
+                <SelectTrigger>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value='mp3'>MP3</SelectItem>
+                  <SelectItem value='opus'>Opus</SelectItem>
+                  <SelectItem value='aac'>AAC</SelectItem>
+                  <SelectItem value='flac'>FLAC</SelectItem>
+                  <SelectItem value='wav'>WAV</SelectItem>
+                  <SelectItem value='pcm'>PCM</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div className='space-y-2'>
+              <Label htmlFor='speech-speed'>Speed</Label>
+              <Input
+                id='speech-speed'
+                type='number'
+                min={0.25}
+                max={4.0}
+                step={0.25}
+                value={speechSpeed}
+                onChange={(event) =>
+                  setSpeechSpeed(parseFloat(event.target.value) || 1.0)
+                }
+              />
+            </div>
+          </div>
+
+          <div className='space-y-2'>
+            <Label htmlFor='speech-input'>Text to Synthesize</Label>
+            <Textarea
+              id='speech-input'
+              placeholder='Enter text to convert to speech...'
+              value={speechInput}
+              onChange={(event) => setSpeechInput(event.target.value)}
+              rows={4}
+            />
+          </div>
+        </div>
+      );
+
+    case 'audio-transcription':
+      return (
+        <div className='space-y-4'>
+          <div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
+            <div className='space-y-2'>
+              <Label htmlFor='audio-transcription-prompt'>
+                Prompt (Optional)
+              </Label>
+              <Textarea
+                id='audio-transcription-prompt'
+                placeholder='Enter a prompt for the transcription...'
+                value={audioTranscriptionPrompt}
+                onChange={(event) =>
+                  setAudioTranscriptionPrompt(event.target.value)
+                }
+                rows={2}
+              />
+            </div>
+            <div className='space-y-2'>
+              <Label htmlFor='audio-transcription-temperature'>
+                Temperature
+              </Label>
+              <Input
+                id='audio-transcription-temperature'
+                type='number'
+                min={0}
+                max={1}
+                step={0.1}
+                value={audioTemperature}
+                onChange={(event) =>
+                  setAudioTemperature(parseFloat(event.target.value) || 0.0)
+                }
+              />
+            </div>
+          </div>
+
+          <div className='space-y-2'>
+            <Label htmlFor='audio-transcription-language'>
+              Language (Optional)
+            </Label>
+            <Input
+              id='audio-transcription-language'
+              placeholder='e.g., en-US, fr-FR'
+              value={audioLanguage}
+              onChange={(event) => setAudioLanguage(event.target.value)}
+            />
+          </div>
+
+          <div className='space-y-2'>
+            <Label htmlFor='audio-transcription-response-format'>
+              Response Format
+            </Label>
+            <Select
+              value={audioResponseFormat}
+              onValueChange={(
+                value: 'json' | 'text' | 'srt' | 'verbose_json' | 'vtt'
+              ) => setAudioResponseFormat(value)}
+            >
+              <SelectTrigger>
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value='json'>JSON</SelectItem>
+                <SelectItem value='text'>Text</SelectItem>
+                <SelectItem value='srt'>SRT</SelectItem>
+                <SelectItem value='verbose_json'>Verbose JSON</SelectItem>
+                <SelectItem value='vtt'>VTT</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div className='space-y-4'>
+            <div className='space-y-2'>
+              <Label>Voice Recording</Label>
+              <div className='flex flex-wrap items-center gap-2'>
+                <Button
+                  type='button'
+                  variant={isRecording ? 'destructive' : 'default'}
+                  size='sm'
+                  onClick={isRecording ? onStopRecording : onStartRecording}
+                  className='flex items-center gap-2'
+                >
+                  {isRecording ? (
+                    <>
+                      <MicOff className='h-4 w-4' />
+                      Stop Recording
+                    </>
+                  ) : (
+                    <>
+                      <Mic className='h-4 w-4' />
+                      Start Recording
+                    </>
+                  )}
+                </Button>
+                {isRecording && (
+                  <Badge variant='destructive' className='gap-1.5'>
+                    <span className='h-2 w-2 animate-pulse rounded-full bg-current' />
+                    Recording...
+                  </Badge>
+                )}
+              </div>
+            </div>
+
+            <div className='space-y-2'>
+              <Label htmlFor='audio-transcription-upload'>
+                Or Upload Audio File
+              </Label>
+              <Input
+                type='file'
+                accept='audio/*'
+                onChange={onAudioUpload}
+                className='cursor-pointer'
+              />
+              {recordedAudio && (
+                <div className='mt-2 flex flex-wrap items-center gap-2'>
+                  <Volume2 className='text-muted-foreground h-5 w-5' />
+                  <span className='text-muted-foreground text-sm'>
+                    Selected audio: {recordedAudio.name}
+                  </span>
+                  <Button
+                    variant='outline'
+                    size='sm'
+                    onClick={onRemoveAudio}
+                    className='ml-0 sm:ml-auto'
+                  >
+                    Remove
+                  </Button>
+                </div>
+              )}
+              {recordingUrl && (
+                <div className='bg-muted mt-2 rounded-md p-4'>
+                  <audio controls src={recordingUrl} className='w-full'>
+                    Your browser does not support the audio element.
+                  </audio>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      );
+
+    case 'models':
+      return (
+        <div className='space-y-4'>
+          <Alert>
+            <List className='h-4 w-4' />
+            <AlertDescription>
+              This endpoint lists all available models from the provider. No
+              additional parameters are required.
+            </AlertDescription>
+          </Alert>
+        </div>
+      );
+
+    default:
+      return null;
+  }
+}

ui/components/api-endpoint-response.tsx

@@ -0,0 +1,306 @@
+import Image from 'next/image';
+import { Label } from '@/components/ui/label';
+
+export interface ChatCompletionResponse {
+  id: string;
+  object: string;
+  created: number;
+  model: string;
+  choices: {
+    index: number;
+    message: {
+      role: string;
+      content: string;
+    };
+    finish_reason: string;
+  }[];
+  usage?: {
+    prompt_tokens: number;
+    completion_tokens: number;
+    total_tokens: number;
+  };
+}
+
+export interface EmbeddingResponse {
+  object: string;
+  data: {
+    object: string;
+    index: number;
+    embedding: number[];
+  }[];
+  model: string;
+  usage: {
+    prompt_tokens: number;
+    total_tokens: number;
+  };
+}
+
+export interface ImageGenerationResponse {
+  created: number;
+  data: {
+    url: string;
+    revised_prompt?: string;
+  }[];
+}
+
+export interface AudioResponse {
+  type: 'audio';
+  url: string;
+  size: number;
+}
+
+export interface AudioTranscriptionResponse {
+  text: string;
+}
+
+export interface ModelsListResponse {
+  object: string;
+  data: {
+    id: string;
+    object?: string;
+    created?: number;
+  }[];
+}
+
+export type ApiResponse =
+  | ChatCompletionResponse
+  | EmbeddingResponse
+  | ImageGenerationResponse
+  | AudioResponse
+  | AudioTranscriptionResponse
+  | ModelsListResponse;
+
+const isAudioResponse = (response: ApiResponse): response is AudioResponse => {
+  return 'type' in response && response.type === 'audio';
+};
+
+const isChatCompletionResponse = (
+  response: ApiResponse
+): response is ChatCompletionResponse => {
+  return 'choices' in response;
+};
+
+const isEmbeddingResponse = (
+  response: ApiResponse
+): response is EmbeddingResponse => {
+  return (
+    'data' in response &&
+    Array.isArray(response.data) &&
+    response.data.length > 0 &&
+    'embedding' in response.data[0]
+  );
+};
+
+const isImageGenerationResponse = (
+  response: ApiResponse
+): response is ImageGenerationResponse => {
+  return (
+    'data' in response &&
+    Array.isArray(response.data) &&
+    response.data.length > 0 &&
+    'url' in response.data[0]
+  );
+};
+
+const isModelsListResponse = (
+  response: ApiResponse
+): response is ModelsListResponse => {
+  return (
+    'data' in response &&
+    Array.isArray(response.data) &&
+    response.data.length > 0 &&
+    'id' in response.data[0]
+  );
+};
+
+const isAudioTranscriptionResponse = (
+  response: ApiResponse
+): response is AudioTranscriptionResponse => {
+  return 'text' in response;
+};
+
+export function ApiEndpointResponse({
+  response,
+}: {
+  response: ApiResponse | null;
+}) {
+  if (!response) {
+    return null;
+  }
+
+  if (isAudioResponse(response)) {
+    return (
+      <div className='space-y-4'>
+        <div className='space-y-2'>
+          <Label>Generated Audio</Label>
+          <div className='bg-muted rounded-md p-4'>
+            <audio controls src={response.url} className='w-full'>
+              Your browser does not support the audio element.
+            </audio>
+            <p className='text-muted-foreground mt-2 text-sm'>
+              Audio file size: {(response.size / 1024).toFixed(2)} KB
+            </p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (isAudioTranscriptionResponse(response)) {
+    return (
+      <div className='space-y-4'>
+        <div className='space-y-2'>
+          <Label>Transcription Result</Label>
+          <div className='bg-muted rounded-md p-4'>
+            <p className='text-sm whitespace-pre-wrap'>
+              {response.text || 'No transcription result available'}
+            </p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (isChatCompletionResponse(response)) {
+    return (
+      <div className='space-y-4'>
+        <div className='space-y-2'>
+          <Label>Model Response</Label>
+          <div className='bg-muted rounded-md p-4'>
+            <p className='text-sm whitespace-pre-wrap'>
+              {response.choices?.[0]?.message?.content ||
+                'No content in response'}
+            </p>
+          </div>
+        </div>
+
+        {response.usage && (
+          <div className='space-y-2'>
+            <Label>Usage Statistics</Label>
+            <div className='grid grid-cols-1 gap-2 text-sm sm:grid-cols-3 sm:gap-4'>
+              <div className='bg-muted rounded p-2 text-center'>
+                <div className='font-semibold'>
+                  {response.usage.prompt_tokens}
+                </div>
+                <div className='text-muted-foreground'>Prompt Tokens</div>
+              </div>
+              <div className='bg-muted rounded p-2 text-center'>
+                <div className='font-semibold'>
+                  {response.usage.completion_tokens}
+                </div>
+                <div className='text-muted-foreground'>Completion Tokens</div>
+              </div>
+              <div className='bg-muted rounded p-2 text-center'>
+                <div className='font-semibold'>
+                  {response.usage.total_tokens}
+                </div>
+                <div className='text-muted-foreground'>Total Tokens</div>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  if (isEmbeddingResponse(response)) {
+    return (
+      <div className='space-y-4'>
+        <div className='space-y-2'>
+          <Label>Embedding Vector</Label>
+          <div className='bg-muted rounded-md p-4'>
+            <p className='text-muted-foreground mb-2 text-sm'>
+              Generated {response.data?.[0]?.embedding?.length || 0} dimensional
+              embedding vector
+            </p>
+            <details className='group'>
+              <summary className='hover:text-foreground cursor-pointer text-sm'>
+                Show first 10 values
+              </summary>
+              <pre className='mt-2 text-xs'>
+                {JSON.stringify(
+                  response.data?.[0]?.embedding?.slice(0, 10),
+                  null,
+                  2
+                )}
+                ...
+              </pre>
+            </details>
+          </div>
+        </div>
+
+        {response.usage && (
+          <div className='space-y-2'>
+            <Label>Usage Statistics</Label>
+            <div className='bg-muted rounded p-2 text-center text-sm'>
+              <div className='font-semibold'>{response.usage.total_tokens}</div>
+              <div className='text-muted-foreground'>Total Tokens</div>
+            </div>
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  if (isImageGenerationResponse(response)) {
+    return (
+      <div className='space-y-4'>
+        <div className='space-y-2'>
+          <Label>Generated Images</Label>
+          <div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
+            {response.data?.map((image, index: number) => (
+              <div key={index} className='space-y-2'>
+                <div className='relative aspect-square w-full'>
+                  <Image
+                    src={image.url}
+                    alt={`Generated image ${index + 1}`}
+                    fill
+                    className='rounded-md border object-cover'
+                    unoptimized={true}
+                  />
+                </div>
+                {image.revised_prompt && (
+                  <p className='text-muted-foreground text-xs'>
+                    Revised prompt: {image.revised_prompt}
+                  </p>
+                )}
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (isModelsListResponse(response)) {
+    return (
+      <div className='space-y-4'>
+        <div className='space-y-2'>
+          <Label>Available Models</Label>
+          <div className='max-h-60 overflow-auto'>
+            <div className='grid gap-2'>
+              {response.data?.map((model) => (
+                <div key={model.id} className='bg-muted rounded-md p-3'>
+                  <div className='font-medium'>{model.id}</div>
+                  {model.object && (
+                    <div className='text-muted-foreground text-sm'>
+                      Type: {model.object}
+                    </div>
+                  )}
+                  {model.created && (
+                    <div className='text-muted-foreground text-sm'>
+                      Created:{' '}
+                      {new Date(model.created * 1000).toLocaleDateString()}
+                    </div>
+                  )}
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return null;
+}

ui/components/api-endpoint-tester.tsx

@@ -0,0 +1,726 @@
+'use client';
+
+import React, { useState } from 'react';
+import { useMutation, useQuery } from '@tanstack/react-query';
+import { type Model } from '@/lib/api/schemas/models';
+import { ModelService } from '@/lib/api/services/models';
+import { Button } from '@/components/ui/button';
+import { Label } from '@/components/ui/label';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Badge } from '@/components/ui/badge';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import {
+  Loader2,
+  Send,
+  CheckCircle,
+  XCircle,
+  Info,
+  Key,
+  Globe,
+} from 'lucide-react';
+import { toast } from 'sonner';
+import {
+  ApiEndpointResponse,
+  type ApiResponse,
+} from '@/components/api-endpoint-response';
+import { ApiEndpointForm } from '@/components/api-endpoint-form';
+import {
+  API_ENDPOINTS,
+  DEFAULT_REQUESTS,
+  type EndpointType,
+  type ChatCompletionRequest,
+  type EmbeddingRequest,
+  type ImageGenerationRequest,
+  type AudioSpeechRequest,
+  type AudioTranscriptionRequest,
+  type EndpointRequestData,
+} from '@/components/api-endpoint-types';
+
+interface ApiEndpointTesterProps {
+  models: Model[];
+}
+
+export function ApiEndpointTester({ models }: ApiEndpointTesterProps) {
+  const [selectedModelId, setSelectedModelId] = useState<string>('');
+  const [selectedEndpoint, setSelectedEndpoint] =
+    useState<EndpointType>('chat-completions');
+  const [response, setResponse] = useState<ApiResponse | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  // Chat Completions state
+  const [systemMessage, setSystemMessage] = useState(
+    DEFAULT_REQUESTS['chat-completions'].systemMessage
+  );
+  const [userMessage, setUserMessage] = useState(
+    DEFAULT_REQUESTS['chat-completions'].userMessage
+  );
+  const [maxTokens, setMaxTokens] = useState(
+    DEFAULT_REQUESTS['chat-completions'].maxTokens
+  );
+  const [temperature, setTemperature] = useState(
+    DEFAULT_REQUESTS['chat-completions'].temperature
+  );
+
+  // Vision Chat state
+  const [visionSystemMessage, setVisionSystemMessage] = useState(
+    DEFAULT_REQUESTS['vision-chat'].systemMessage
+  );
+  const [visionUserMessage, setVisionUserMessage] = useState(
+    DEFAULT_REQUESTS['vision-chat'].userMessage
+  );
+  const [visionMaxTokens, setVisionMaxTokens] = useState(
+    DEFAULT_REQUESTS['vision-chat'].maxTokens
+  );
+  const [visionTemperature, setVisionTemperature] = useState(
+    DEFAULT_REQUESTS['vision-chat'].temperature
+  );
+  const [imageDetail, setImageDetail] = useState<'low' | 'high' | 'auto'>(
+    DEFAULT_REQUESTS['vision-chat'].imageDetail
+  );
+  const [selectedImage, setSelectedImage] = useState<File | null>(null);
+  const [imagePreviewUrl, setImagePreviewUrl] = useState<string | null>(null);
+
+  // Voice Recording state
+  const [isRecording, setIsRecording] = useState(false);
+  const [recordedAudio, setRecordedAudio] = useState<File | null>(null);
+  const [recordingUrl, setRecordingUrl] = useState<string | null>(null);
+  const [mediaRecorder, setMediaRecorder] = useState<MediaRecorder | null>(
+    null
+  );
+  const [audioTranscriptionPrompt, setAudioTranscriptionPrompt] = useState(
+    DEFAULT_REQUESTS['audio-transcription'].prompt
+  );
+  const [audioResponseFormat, setAudioResponseFormat] = useState<
+    'json' | 'text' | 'srt' | 'verbose_json' | 'vtt'
+  >(DEFAULT_REQUESTS['audio-transcription'].response_format);
+  const [audioTemperature, setAudioTemperature] = useState(
+    DEFAULT_REQUESTS['audio-transcription'].temperature
+  );
+  const [audioLanguage, setAudioLanguage] = useState(
+    DEFAULT_REQUESTS['audio-transcription'].language
+  );
+
+  // Embeddings state
+  const [embeddingInput, setEmbeddingInput] = useState(
+    DEFAULT_REQUESTS.embeddings.input
+  );
+  const [encodingFormat, setEncodingFormat] = useState<'float' | 'base64'>(
+    DEFAULT_REQUESTS.embeddings.encoding_format
+  );
+
+  // Image Generation state
+  const [imagePrompt, setImagePrompt] = useState(
+    DEFAULT_REQUESTS.images.prompt
+  );
+  const [imageCount, setImageCount] = useState(DEFAULT_REQUESTS.images.n);
+  const [imageSize, setImageSize] = useState<
+    '256x256' | '512x512' | '1024x1024' | '1792x1024' | '1024x1792'
+  >(DEFAULT_REQUESTS.images.size);
+  const [imageQuality, setImageQuality] = useState<'standard' | 'hd'>(
+    DEFAULT_REQUESTS.images.quality
+  );
+  const [imageStyle, setImageStyle] = useState<'vivid' | 'natural'>(
+    DEFAULT_REQUESTS.images.style
+  );
+
+  // Audio Speech state
+  const [speechInput, setSpeechInput] = useState(
+    DEFAULT_REQUESTS['audio-speech'].input
+  );
+  const [speechVoice, setSpeechVoice] = useState<
+    'alloy' | 'echo' | 'fable' | 'onyx' | 'nova' | 'shimmer'
+  >(DEFAULT_REQUESTS['audio-speech'].voice);
+  const [speechFormat, setSpeechFormat] = useState<
+    'mp3' | 'opus' | 'aac' | 'flac' | 'wav' | 'pcm'
+  >(DEFAULT_REQUESTS['audio-speech'].response_format);
+  const [speechSpeed, setSpeechSpeed] = useState(
+    DEFAULT_REQUESTS['audio-speech'].speed
+  );
+
+  // Fetch model groups for API key resolution
+  const { data: groups = [] } = useQuery({
+    queryKey: ['model-groups'],
+    queryFn: () => ModelService.getModelGroups(),
+    refetchOnWindowFocus: false,
+  });
+
+  const selectedModel = models.find((model) => model.id === selectedModelId);
+
+  // Image upload handler
+  const handleImageUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (file) {
+      if (file.type.startsWith('image/')) {
+        setSelectedImage(file);
+        const previewUrl = URL.createObjectURL(file);
+        setImagePreviewUrl(previewUrl);
+      } else {
+        toast.error('Please select a valid image file');
+      }
+    }
+  };
+
+  // Audio file upload handler
+  const handleAudioUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (file) {
+      if (file.type.startsWith('audio/')) {
+        setRecordedAudio(file);
+        const audioUrl = URL.createObjectURL(file);
+        setRecordingUrl(audioUrl);
+      } else {
+        toast.error('Please select a valid audio file');
+      }
+    }
+  };
+
+  // Voice recording functions
+  const startRecording = async () => {
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+      const recorder = new MediaRecorder(stream);
+      const chunks: BlobPart[] = [];
+
+      recorder.ondataavailable = (event) => {
+        if (event.data.size > 0) {
+          chunks.push(event.data);
+        }
+      };
+
+      recorder.onstop = () => {
+        const blob = new Blob(chunks, { type: 'audio/webm' });
+        const file = new File([blob], 'recording.webm', { type: 'audio/webm' });
+        setRecordedAudio(file);
+        const audioUrl = URL.createObjectURL(blob);
+        setRecordingUrl(audioUrl);
+
+        // Stop all tracks to release microphone
+        stream.getTracks().forEach((track) => track.stop());
+      };
+
+      recorder.start();
+      setMediaRecorder(recorder);
+      setIsRecording(true);
+      toast.success('Recording started');
+    } catch {
+      toast.error(
+        'Failed to start recording. Please check microphone permissions.'
+      );
+    }
+  };
+
+  const stopRecording = () => {
+    if (mediaRecorder) {
+      mediaRecorder.stop();
+      setMediaRecorder(null);
+      setIsRecording(false);
+      toast.success('Recording stopped');
+    }
+  };
+
+  // Convert file to base64 for vision API
+  const fileToBase64 = (file: File): Promise<string> => {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.readAsDataURL(file);
+      reader.onload = () => resolve(reader.result as string);
+      reader.onerror = (error) => reject(error);
+    });
+  };
+
+  // Get effective API key and endpoint URL for the selected model
+  const getModelCredentials = (model: Model) => {
+    const group = groups.find((g) => g.provider === model.provider);
+
+    // Determine API key (individual takes precedence over group)
+    const apiKey = model.api_key || group?.group_api_key;
+
+    // Determine base endpoint URL
+    let baseUrl = model.url;
+
+    // If model URL is relative and group has a base URL, combine them
+    if (model.url.startsWith('/') && group?.group_url) {
+      baseUrl = `${group.group_url.replace(/\/$/, '')}${model.url}`;
+    }
+
+    // Remove any existing endpoint path to get base URL
+    baseUrl = baseUrl.replace(/\/v1\/.*$/, '').replace(/\/$/, '');
+
+    return {
+      apiKey,
+      baseUrl,
+      group,
+    };
+  };
+
+  const buildEndpointUrl = (baseUrl: string, endpointPath: string) => {
+    return `${baseUrl}${endpointPath}`;
+  };
+
+  const buildRequest = async (): Promise<EndpointRequestData> => {
+    if (!selectedModel) return null;
+
+    switch (selectedEndpoint) {
+      case 'chat-completions':
+        const messages = [];
+        if (systemMessage.trim()) {
+          messages.push({
+            role: 'system' as const,
+            content: systemMessage.trim(),
+          });
+        }
+        messages.push({ role: 'user' as const, content: userMessage.trim() });
+
+        return {
+          model: selectedModel.name,
+          messages,
+          max_tokens: maxTokens,
+          temperature: temperature,
+        } as ChatCompletionRequest;
+
+      case 'vision-chat':
+        if (!selectedImage) {
+          throw new Error('Please select an image for vision analysis');
+        }
+
+        const imageBase64 = await fileToBase64(selectedImage);
+        const visionMessages = [];
+
+        if (visionSystemMessage.trim()) {
+          visionMessages.push({
+            role: 'system' as const,
+            content: visionSystemMessage.trim(),
+          });
+        }
+
+        visionMessages.push({
+          role: 'user' as const,
+          content: [
+            {
+              type: 'text' as const,
+              text: visionUserMessage.trim(),
+            },
+            {
+              type: 'image_url' as const,
+              image_url: {
+                url: imageBase64,
+                detail: imageDetail,
+              },
+            },
+          ],
+        });
+
+        return {
+          model: selectedModel.name,
+          messages: visionMessages,
+          max_tokens: visionMaxTokens,
+          temperature: visionTemperature,
+        } as ChatCompletionRequest;
+
+      case 'embeddings':
+        return {
+          model: selectedModel.name,
+          input: embeddingInput,
+          encoding_format: encodingFormat,
+        } as EmbeddingRequest;
+
+      case 'images':
+        return {
+          model: selectedModel.name,
+          prompt: imagePrompt,
+          n: imageCount,
+          size: imageSize,
+          quality: imageQuality,
+          style: imageStyle,
+        } as ImageGenerationRequest;
+
+      case 'audio-speech':
+        return {
+          model: selectedModel.name,
+          input: speechInput,
+          voice: speechVoice,
+          response_format: speechFormat,
+          speed: speechSpeed,
+        } as AudioSpeechRequest;
+
+      case 'audio-transcription':
+        if (!recordedAudio) {
+          throw new Error(
+            'Please record or upload an audio file for transcription'
+          );
+        }
+
+        return {
+          model: selectedModel.name,
+          file: recordedAudio,
+          prompt: audioTranscriptionPrompt.trim() || undefined,
+          response_format: audioResponseFormat,
+          temperature: audioTemperature,
+          language: audioLanguage.trim() || undefined,
+        } as AudioTranscriptionRequest;
+
+      case 'models':
+        return null; // No request body needed for models endpoint
+
+      default:
+        return null;
+    }
+  };
+
+  const testEndpointMutation = useMutation({
+    mutationFn: async (requestData: EndpointRequestData) => {
+      if (!selectedModel) {
+        throw new Error('No model selected');
+      }
+
+      setError(null);
+      setResponse(null);
+
+      try {
+        const response = await ModelService.testModel(
+          selectedModel.id,
+          selectedEndpoint,
+          requestData
+        );
+
+        if (!response.success) {
+          throw new Error(response.error || 'Test failed');
+        }
+
+        return response.data as ApiResponse;
+      } catch (err: unknown) {
+        const errorMessage =
+          err instanceof Error
+            ? err.message
+            : 'Failed to test endpoint via proxy';
+        throw new Error(errorMessage);
+      }
+    },
+    onSuccess: (data) => {
+      setResponse(data);
+      toast.success(
+        `${API_ENDPOINTS[selectedEndpoint].name} test completed successfully!`
+      );
+    },
+    onError: (err: Error) => {
+      const errorMessage = err?.message || 'Unknown error occurred';
+      setError(errorMessage);
+      toast.error(
+        `${API_ENDPOINTS[selectedEndpoint].name} test failed: ${errorMessage}`
+      );
+    },
+  });
+
+  const handleTest = async () => {
+    if (!selectedModel) {
+      toast.error('Please select a model to test');
+      return;
+    }
+
+    // Validate required fields based on endpoint
+    if (selectedEndpoint === 'chat-completions' && !userMessage.trim()) {
+      toast.error('Please enter a test message');
+      return;
+    }
+
+    if (selectedEndpoint === 'vision-chat') {
+      if (!visionUserMessage.trim()) {
+        toast.error('Please enter a test message');
+        return;
+      }
+      if (!selectedImage) {
+        toast.error('Please select an image for vision analysis');
+        return;
+      }
+    }
+
+    if (selectedEndpoint === 'embeddings' && !embeddingInput.trim()) {
+      toast.error('Please enter text for embedding');
+      return;
+    }
+
+    if (selectedEndpoint === 'images' && !imagePrompt.trim()) {
+      toast.error('Please enter an image prompt');
+      return;
+    }
+
+    if (selectedEndpoint === 'audio-speech' && !speechInput.trim()) {
+      toast.error('Please enter text for speech synthesis');
+      return;
+    }
+
+    if (selectedEndpoint === 'audio-transcription' && !recordedAudio) {
+      toast.error('Please record or upload an audio file for transcription');
+      return;
+    }
+
+    const requestData = await buildRequest();
+    testEndpointMutation.mutate(requestData);
+  };
+
+  const enabledModels = models.filter((model) => model.isEnabled);
+  const credentials = selectedModel ? getModelCredentials(selectedModel) : null;
+  const endpointUrl = credentials
+    ? buildEndpointUrl(
+        credentials.baseUrl,
+        API_ENDPOINTS[selectedEndpoint].path
+      )
+    : '';
+
+  return (
+    <Card className='w-full'>
+      <CardHeader>
+        <CardTitle>API Endpoint Tester</CardTitle>
+        <CardDescription>
+          Comprehensive testing of OpenAI-compatible API endpoints through the
+          secure proxy (resolves CORS and network issues)
+        </CardDescription>
+      </CardHeader>
+      <CardContent className='space-y-6'>
+        {/* Model and Endpoint Selection */}
+        <div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
+          <div className='space-y-2'>
+            <Label htmlFor='model-select'>Select Model</Label>
+            <Select value={selectedModelId} onValueChange={setSelectedModelId}>
+              <SelectTrigger id='model-select'>
+                <SelectValue placeholder='Choose a model to test...' />
+              </SelectTrigger>
+              <SelectContent>
+                {enabledModels.map((model) => (
+                  <SelectItem key={model.id} value={model.id}>
+                    <div className='flex items-center gap-2'>
+                      <span>{model.name}</span>
+                      <Badge variant='outline' className='text-xs'>
+                        {model.provider}
+                      </Badge>
+                      {model.is_free && (
+                        <Badge variant='secondary' className='text-xs'>
+                          Free
+                        </Badge>
+                      )}
+                    </div>
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div className='space-y-2'>
+            <Label htmlFor='endpoint-select'>API Endpoint</Label>
+            <Select
+              value={selectedEndpoint}
+              onValueChange={(value: EndpointType) =>
+                setSelectedEndpoint(value)
+              }
+            >
+              <SelectTrigger id='endpoint-select'>
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {Object.entries(API_ENDPOINTS).map(([key, endpoint]) => {
+                  const Icon = endpoint.icon;
+                  return (
+                    <SelectItem key={key} value={key}>
+                      <div className='flex items-center gap-2'>
+                        <Icon className='h-4 w-4' />
+                        <span>{endpoint.name}</span>
+                      </div>
+                    </SelectItem>
+                  );
+                })}
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+
+        {/* Model Information */}
+        {selectedModel && credentials && (
+          <div className='text-muted-foreground bg-muted space-y-2 rounded-md p-3 text-sm'>
+            <div className='flex items-center gap-2'>
+              <Globe className='h-4 w-4' />
+              <span className='break-all'>
+                <strong>Endpoint:</strong> {endpointUrl}
+              </span>
+            </div>
+            <div className='flex items-center gap-2'>
+              <Key className='h-4 w-4' />
+              <span>
+                <strong>API Key:</strong>{' '}
+                {credentials.apiKey
+                  ? `${credentials.apiKey.substring(0, 8)}...`
+                  : 'Not configured'}
+              </span>
+              <Badge
+                variant={credentials.apiKey ? 'default' : 'destructive'}
+                className='text-xs'
+              >
+                {selectedModel.api_key_type || 'Unknown'}
+              </Badge>
+            </div>
+            <div>
+              <span>
+                <strong>Provider:</strong> {selectedModel.provider}
+              </span>
+            </div>
+            <div>
+              <span>
+                <strong>Description:</strong>{' '}
+                {API_ENDPOINTS[selectedEndpoint].description}
+              </span>
+            </div>
+            {!credentials.apiKey && (
+              <Alert variant='default' className='mt-2'>
+                <Info className='h-4 w-4' />
+                <AlertDescription>
+                  No API key configured for this model. Testing may still work
+                  if the model is free or if authentication is handled
+                  elsewhere. For models requiring authentication, please add an
+                  API key to the model or its provider group.
+                </AlertDescription>
+              </Alert>
+            )}
+          </div>
+        )}
+
+        <ApiEndpointForm
+          selectedEndpoint={selectedEndpoint}
+          maxTokens={maxTokens}
+          setMaxTokens={setMaxTokens}
+          temperature={temperature}
+          setTemperature={setTemperature}
+          systemMessage={systemMessage}
+          setSystemMessage={setSystemMessage}
+          userMessage={userMessage}
+          setUserMessage={setUserMessage}
+          visionMaxTokens={visionMaxTokens}
+          setVisionMaxTokens={setVisionMaxTokens}
+          visionTemperature={visionTemperature}
+          setVisionTemperature={setVisionTemperature}
+          visionSystemMessage={visionSystemMessage}
+          setVisionSystemMessage={setVisionSystemMessage}
+          visionUserMessage={visionUserMessage}
+          setVisionUserMessage={setVisionUserMessage}
+          imageDetail={imageDetail}
+          setImageDetail={setImageDetail}
+          selectedImage={selectedImage}
+          imagePreviewUrl={imagePreviewUrl}
+          onImageUpload={handleImageUpload}
+          onRemoveImage={() => {
+            setSelectedImage(null);
+            setImagePreviewUrl(null);
+          }}
+          embeddingInput={embeddingInput}
+          setEmbeddingInput={setEmbeddingInput}
+          encodingFormat={encodingFormat}
+          setEncodingFormat={setEncodingFormat}
+          imageCount={imageCount}
+          setImageCount={setImageCount}
+          imageSize={imageSize}
+          setImageSize={setImageSize}
+          imageQuality={imageQuality}
+          setImageQuality={setImageQuality}
+          imageStyle={imageStyle}
+          setImageStyle={setImageStyle}
+          imagePrompt={imagePrompt}
+          setImagePrompt={setImagePrompt}
+          speechVoice={speechVoice}
+          setSpeechVoice={setSpeechVoice}
+          speechFormat={speechFormat}
+          setSpeechFormat={setSpeechFormat}
+          speechSpeed={speechSpeed}
+          setSpeechSpeed={setSpeechSpeed}
+          speechInput={speechInput}
+          setSpeechInput={setSpeechInput}
+          audioTranscriptionPrompt={audioTranscriptionPrompt}
+          setAudioTranscriptionPrompt={setAudioTranscriptionPrompt}
+          audioTemperature={audioTemperature}
+          setAudioTemperature={setAudioTemperature}
+          audioLanguage={audioLanguage}
+          setAudioLanguage={setAudioLanguage}
+          audioResponseFormat={audioResponseFormat}
+          setAudioResponseFormat={setAudioResponseFormat}
+          isRecording={isRecording}
+          onStartRecording={startRecording}
+          onStopRecording={stopRecording}
+          onAudioUpload={handleAudioUpload}
+          recordedAudio={recordedAudio}
+          recordingUrl={recordingUrl}
+          onRemoveAudio={() => {
+            setRecordedAudio(null);
+            setRecordingUrl(null);
+          }}
+        />
+
+        {/* Test Button */}
+        <Button
+          onClick={handleTest}
+          disabled={!selectedModelId || testEndpointMutation.isPending}
+          className='w-full'
+        >
+          {testEndpointMutation.isPending ? (
+            <>
+              <Loader2 className='mr-2 h-4 w-4 animate-spin' />
+              Testing {API_ENDPOINTS[selectedEndpoint].name}...
+            </>
+          ) : (
+            <>
+              <Send className='mr-2 h-4 w-4' />
+              Test {API_ENDPOINTS[selectedEndpoint].name}
+            </>
+          )}
+        </Button>
+
+        {/* Results */}
+        {error && (
+          <Alert variant='destructive'>
+            <XCircle className='h-4 w-4' />
+            <AlertDescription>
+              <strong>Test Failed:</strong> {error}
+            </AlertDescription>
+          </Alert>
+        )}
+
+        {response && (
+          <Alert>
+            <CheckCircle className='h-4 w-4' />
+            <AlertDescription>
+              <strong>Test Successful!</strong>{' '}
+              {API_ENDPOINTS[selectedEndpoint].name} endpoint responded
+              correctly.
+            </AlertDescription>
+          </Alert>
+        )}
+
+        <ApiEndpointResponse response={response} />
+
+        {response && (
+          <div className='space-y-2'>
+            <Label>Raw Response</Label>
+            <details className='group'>
+              <summary className='text-muted-foreground hover:text-foreground cursor-pointer text-sm'>
+                <Info className='mr-1 inline h-4 w-4' />
+                Show detailed response data
+              </summary>
+              <pre className='bg-muted mt-2 max-h-60 overflow-auto rounded-md p-4 text-xs'>
+                {JSON.stringify(response, null, 2)}
+              </pre>
+            </details>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

ui/components/api-endpoint-types.ts

@@ -0,0 +1,156 @@
+import {
+  FileText,
+  Eye,
+  List,
+  Image as ImageIcon,
+  Mic,
+  Volume2,
+} from 'lucide-react';
+
+export const API_ENDPOINTS = {
+  'chat-completions': {
+    name: 'Chat Completions',
+    path: '/chat/completions',
+    icon: FileText,
+    description: 'Test conversational AI with chat completion requests',
+  },
+  'vision-chat': {
+    name: 'Vision Chat (Image + Text)',
+    path: '/chat/completions',
+    icon: Eye,
+    description: 'Analyze images with text prompts using vision models',
+  },
+  embeddings: {
+    name: 'Embeddings',
+    path: '/embeddings',
+    icon: List,
+    description: 'Generate embeddings for text input',
+  },
+  images: {
+    name: 'Image Generation',
+    path: '/images/generations',
+    icon: ImageIcon,
+    description: 'Generate images from text prompts',
+  },
+  'audio-speech': {
+    name: 'Text-to-Speech',
+    path: '/audio/speech',
+    icon: Mic,
+    description: 'Convert text to speech audio',
+  },
+  'audio-transcription': {
+    name: 'Audio Transcription',
+    path: '/audio/transcriptions',
+    icon: Volume2,
+    description: 'Transcribe audio files to text',
+  },
+  models: {
+    name: 'List Models',
+    path: '/models',
+    icon: List,
+    description: 'List all available models from the provider',
+  },
+} as const;
+
+export type EndpointType = keyof typeof API_ENDPOINTS;
+
+export interface ChatCompletionRequest {
+  model: string;
+  messages: {
+    role: 'system' | 'user' | 'assistant';
+    content:
+      | string
+      | Array<{
+          type: 'text' | 'image_url';
+          text?: string;
+          image_url?: {
+            url: string;
+            detail?: 'low' | 'high' | 'auto';
+          };
+        }>;
+  }[];
+  max_tokens?: number;
+  temperature?: number;
+}
+
+export interface EmbeddingRequest {
+  model: string;
+  input: string | string[];
+  encoding_format?: 'float' | 'base64';
+}
+
+export interface ImageGenerationRequest {
+  model?: string;
+  prompt: string;
+  n?: number;
+  size?: '256x256' | '512x512' | '1024x1024' | '1792x1024' | '1024x1792';
+  quality?: 'standard' | 'hd';
+  style?: 'vivid' | 'natural';
+}
+
+export interface AudioSpeechRequest {
+  model: string;
+  input: string;
+  voice: 'alloy' | 'echo' | 'fable' | 'onyx' | 'nova' | 'shimmer';
+  response_format?: 'mp3' | 'opus' | 'aac' | 'flac' | 'wav' | 'pcm';
+  speed?: number;
+}
+
+export interface AudioTranscriptionRequest {
+  model: string;
+  file: File;
+  prompt?: string;
+  response_format?: 'json' | 'text' | 'srt' | 'verbose_json' | 'vtt';
+  temperature?: number;
+  language?: string;
+}
+
+export const DEFAULT_REQUESTS = {
+  'chat-completions': {
+    systemMessage: 'You are a helpful assistant. Please respond concisely.',
+    userMessage:
+      'Hello! Can you tell me what model you are and confirm that you are working correctly?',
+    maxTokens: 150,
+    temperature: 0.7,
+  },
+  'vision-chat': {
+    systemMessage:
+      'You are a helpful assistant that can analyze images. Please describe what you see.',
+    userMessage:
+      'What do you see in this image? Please provide a detailed description.',
+    maxTokens: 300,
+    temperature: 0.7,
+    imageDetail: 'auto' as const,
+  },
+  embeddings: {
+    input: 'The quick brown fox jumps over the lazy dog.',
+    encoding_format: 'float' as const,
+  },
+  images: {
+    prompt: 'A beautiful sunset over a mountain landscape',
+    n: 1,
+    size: '1024x1024' as const,
+    quality: 'standard' as const,
+    style: 'vivid' as const,
+  },
+  'audio-speech': {
+    input: 'Hello, this is a test of the text-to-speech functionality.',
+    voice: 'alloy' as const,
+    response_format: 'mp3' as const,
+    speed: 1.0,
+  },
+  'audio-transcription': {
+    prompt: 'This is a test transcription.',
+    response_format: 'json' as const,
+    temperature: 0.0,
+    language: '',
+  },
+};
+
+export type EndpointRequestData =
+  | ChatCompletionRequest
+  | EmbeddingRequest
+  | ImageGenerationRequest
+  | AudioSpeechRequest
+  | AudioTranscriptionRequest
+  | null;

ui/components/api-key-input.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import * as React from 'react';
+import { Input } from '@/components/ui/input';
+
+interface ApiKeyInputProps extends React.ComponentProps<'input'> {
+  onApiKeyChange: (apiKey: string) => void;
+}
+
+export function ApiKeyInput({
+  value,
+  onApiKeyChange,
+  ...props
+}: ApiKeyInputProps) {
+  const [internalValue, setInternalValue] = useState(value || '');
+
+  useEffect(() => {
+    setInternalValue(value || '');
+  }, [value]);
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      onApiKeyChange(internalValue as string);
+    }, 300);
+
+    return () => clearTimeout(handler);
+  }, [internalValue, onApiKeyChange]);
+
+  return (
+    <Input
+      value={internalValue}
+      onChange={(e) => setInternalValue(e.target.value)}
+      placeholder='sk-...'
+      className='font-mono text-sm'
+      {...props}
+    />
+  );
+}

ui/components/app-page-shell.tsx

@@ -0,0 +1,353 @@
+'use client';
+
+import { useState, type ReactNode } from 'react';
+import Link from 'next/link';
+import { usePathname, useRouter } from 'next/navigation';
+import {
+  DatabaseIcon,
+  FileTextIcon,
+  LayoutDashboardIcon,
+  LogOutIcon,
+  PanelLeftCloseIcon,
+  PanelLeftOpenIcon,
+  ServerIcon,
+  SettingsIcon,
+  WalletIcon,
+  ArrowRightLeftIcon,
+} from 'lucide-react';
+import Image from 'next/image';
+import { toast } from 'sonner';
+import { adminLogout } from '@/lib/api/services/auth';
+import { Button } from '@/components/ui/button';
+import { CurrencyToggle } from '@/components/currency-toggle';
+import { ThemeToggle } from '@/components/theme-toggle';
+import {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import { cn } from '@/lib/utils';
+
+interface AppPageShellProps {
+  children: ReactNode;
+  className?: string;
+  contentClassName?: string;
+}
+
+const NAV_ITEMS = [
+  { title: 'Dashboard', url: '/', icon: LayoutDashboardIcon },
+  { title: 'Balances', url: '/balances', icon: WalletIcon },
+  { title: 'Logs', url: '/logs', icon: FileTextIcon },
+  { title: 'Models', url: '/model', icon: DatabaseIcon },
+  { title: 'Providers', url: '/providers', icon: ServerIcon },
+  { title: 'Transactions', url: '/transactions', icon: ArrowRightLeftIcon },
+  { title: 'Settings', url: '/settings', icon: SettingsIcon },
+] as const;
+
+function isActivePath(pathname: string, itemUrl: string): boolean {
+  if (itemUrl === '/') {
+    return pathname === '/';
+  }
+
+  return pathname === itemUrl || pathname.startsWith(`${itemUrl}/`);
+}
+
+export function AppPageShell({
+  children,
+  className,
+  contentClassName,
+}: AppPageShellProps) {
+  const pathname = usePathname();
+  const router = useRouter();
+  const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false);
+  const [isMobileSidebarOpen, setIsMobileSidebarOpen] = useState(false);
+
+  const handleLogout = async (): Promise<void> => {
+    try {
+      await adminLogout();
+      toast.success('Logged out successfully');
+      router.push('/login');
+    } catch (error) {
+      console.error('Logout error:', error);
+      toast.error('Failed to logout');
+    }
+  };
+
+  return (
+    <div className='bg-background text-foreground min-h-dvh overflow-x-clip md:h-screen md:overflow-hidden'>
+      <div className='flex min-h-dvh w-full min-w-0 overflow-x-clip md:h-full'>
+        <aside
+          className={cn(
+            'border-border/60 hidden shrink-0 border-r py-5 transition-[width,padding] duration-300 ease-in-out md:flex md:h-full md:flex-col md:overflow-y-auto',
+            isSidebarCollapsed ? 'w-16 px-2' : 'w-60 px-4'
+          )}
+        >
+          <div
+            className={cn(
+              'px-1 transition-[padding] duration-300 ease-in-out',
+              isSidebarCollapsed && 'px-0'
+            )}
+          >
+            <div className='flex items-center gap-2'>
+              <div className='flex min-w-0 flex-1 items-center gap-2 overflow-hidden'>
+                <Image
+                  src='/icon.ico'
+                  alt='Routstr Node'
+                  width={24}
+                  height={24}
+                  className='shrink-0 rounded-sm'
+                />
+                <div
+                  className={cn(
+                    'min-w-0 overflow-hidden transition-[max-width,opacity,transform] duration-300 ease-in-out',
+                    isSidebarCollapsed
+                      ? 'max-w-0 -translate-x-1 opacity-0'
+                      : 'max-w-[11rem] translate-x-0 opacity-100'
+                  )}
+                >
+                  <h1 className='truncate text-lg font-semibold tracking-tight whitespace-nowrap'>
+                    Routstr Node
+                  </h1>
+                </div>
+              </div>
+              <Button
+                variant='ghost'
+                size='icon'
+                className={cn(
+                  'text-muted-foreground hover:text-foreground h-8 w-8 shrink-0 transition-transform duration-300 ease-in-out',
+                  isSidebarCollapsed ? 'mx-auto' : '-mr-1 ml-auto'
+                )}
+                onClick={() => setIsSidebarCollapsed((current) => !current)}
+              >
+                {isSidebarCollapsed ? (
+                  <PanelLeftOpenIcon className='h-4 w-4' />
+                ) : (
+                  <PanelLeftCloseIcon className='h-4 w-4' />
+                )}
+                <span className='sr-only'>
+                  {isSidebarCollapsed ? 'Expand sidebar' : 'Collapse sidebar'}
+                </span>
+              </Button>
+            </div>
+          </div>
+
+          <nav
+            className={cn(
+              'mt-5',
+              isSidebarCollapsed
+                ? 'flex flex-col items-center space-y-2'
+                : 'space-y-1.5'
+            )}
+          >
+            {NAV_ITEMS.map((item) => {
+              const Icon = item.icon;
+              const active = isActivePath(pathname, item.url);
+
+              return (
+                <Button
+                  key={item.url}
+                  asChild
+                  variant={active ? 'outline' : 'ghost'}
+                  className={cn(
+                    'h-10 rounded-lg transition-[width,padding] duration-300 ease-in-out',
+                    isSidebarCollapsed
+                      ? 'mx-auto w-10 justify-center px-0'
+                      : 'w-full justify-start'
+                  )}
+                >
+                  <Link href={item.url}>
+                    <Icon className='h-4 w-4 shrink-0' />
+                    <span
+                      className={cn(
+                        'overflow-hidden whitespace-nowrap transition-[max-width,opacity,margin] duration-300 ease-in-out',
+                        isSidebarCollapsed
+                          ? 'ml-0 max-w-0 opacity-0'
+                          : 'ml-0.5 max-w-[9rem] opacity-100'
+                      )}
+                    >
+                      {item.title}
+                    </span>
+                  </Link>
+                </Button>
+              );
+            })}
+          </nav>
+
+          <div
+            className={cn(
+              'mt-auto pt-3 transition-[padding] duration-300 ease-in-out',
+              isSidebarCollapsed
+                ? 'flex flex-col items-center space-y-1.5'
+                : 'space-y-2'
+            )}
+          >
+            {isSidebarCollapsed ? (
+              <>
+                <CurrencyToggle
+                  compact
+                  menuSide='right'
+                  menuAlign='start'
+                  className='mx-auto'
+                />
+                <ThemeToggle
+                  compact
+                  menuSide='right'
+                  menuAlign='start'
+                  className='mx-auto'
+                />
+                <Button
+                  variant='ghost'
+                  size='sm'
+                  onClick={handleLogout}
+                  className='text-muted-foreground hover:text-foreground mx-auto h-8 w-10 justify-center px-0'
+                >
+                  <LogOutIcon className='h-4 w-4' />
+                  <span className='sr-only'>Logout</span>
+                </Button>
+              </>
+            ) : (
+              <div className='border-border/60 bg-card/30 space-y-1 rounded-lg border p-1'>
+                <CurrencyToggle
+                  menuSide='right'
+                  menuAlign='start'
+                  className='text-foreground/90 hover:bg-accent/35 border-border/60 bg-background/25 h-8 w-full justify-between rounded-md px-2.5 text-[11px]'
+                />
+                <ThemeToggle
+                  menuSide='right'
+                  menuAlign='start'
+                  className='text-foreground/90 hover:bg-accent/35 border-border/60 bg-background/25 h-8 w-full justify-between rounded-md px-2.5 text-[11px]'
+                />
+                <Button
+                  variant='ghost'
+                  size='sm'
+                  onClick={handleLogout}
+                  className='text-muted-foreground hover:bg-destructive/10 hover:text-destructive h-8 w-full justify-start gap-1.5 rounded-md px-2.5 text-[11px]'
+                >
+                  <LogOutIcon className='h-4 w-4' />
+                  Logout
+                </Button>
+              </div>
+            )}
+          </div>
+        </aside>
+
+        <section className='relative flex w-full min-w-0 flex-1 flex-col overflow-x-clip md:h-full md:min-h-0'>
+          <div className='bg-background/80 supports-[backdrop-filter]:bg-background/72 sticky top-0 z-30 flex items-center gap-2 px-3 py-2 backdrop-blur-xl md:hidden'>
+            <Button
+              type='button'
+              variant='outline'
+              size='sm'
+              className='h-9 gap-2 rounded-lg px-3'
+              onClick={() => setIsMobileSidebarOpen(true)}
+            >
+              <PanelLeftOpenIcon className='h-4 w-4' />
+              Menu
+            </Button>
+          </div>
+          <main
+            className={cn(
+              'w-full min-w-0 flex-1 overflow-x-clip p-3 pb-4 sm:p-4 md:min-h-0 md:overflow-y-auto md:p-6 md:pb-6',
+              contentClassName,
+              className
+            )}
+          >
+            {children}
+          </main>
+        </section>
+      </div>
+
+      <Sheet open={isMobileSidebarOpen} onOpenChange={setIsMobileSidebarOpen}>
+        <SheetContent
+          side='left'
+          showCloseButton={false}
+          className='w-[min(88vw,18rem)] p-0 md:hidden'
+        >
+          <SheetTitle className='sr-only'>Navigation sidebar</SheetTitle>
+          <SheetDescription className='sr-only'>
+            Browse admin pages and access sidebar controls.
+          </SheetDescription>
+          <div className='flex h-full min-h-0 flex-col'>
+            <div className='border-border/60 px-4 pt-4 pb-3'>
+              <div className='flex items-center justify-between gap-3'>
+                <div className='flex min-w-0 items-center gap-2'>
+                  <Image
+                    src='/icon.ico'
+                    alt='Routstr Node'
+                    width={24}
+                    height={24}
+                    className='rounded-sm'
+                  />
+                  <p className='truncate text-base font-medium tracking-tight'>
+                    Routstr Node
+                  </p>
+                </div>
+                <SheetClose asChild>
+                  <Button
+                    variant='ghost'
+                    size='icon'
+                    className='text-muted-foreground hover:text-foreground h-8 w-8 shrink-0'
+                  >
+                    <PanelLeftCloseIcon className='h-4 w-4' />
+                    <span className='sr-only'>Close sidebar</span>
+                  </Button>
+                </SheetClose>
+              </div>
+            </div>
+            <div className='flex h-full min-h-0 flex-col px-3 pb-3'>
+              <nav className='space-y-1.5 py-3'>
+                {NAV_ITEMS.map((item) => {
+                  const Icon = item.icon;
+                  const active = isActivePath(pathname, item.url);
+
+                  return (
+                    <Button
+                      key={`mobile-sidebar-${item.url}`}
+                      asChild
+                      variant={active ? 'outline' : 'ghost'}
+                      className='h-10 w-full justify-start rounded-lg'
+                    >
+                      <Link
+                        href={item.url}
+                        onClick={() => setIsMobileSidebarOpen(false)}
+                      >
+                        <Icon className='h-4 w-4' />
+                        {item.title}
+                      </Link>
+                    </Button>
+                  );
+                })}
+              </nav>
+
+              <div className='border-border/60 bg-card/30 mt-auto space-y-1 rounded-lg border p-1'>
+                <CurrencyToggle
+                  menuSide='right'
+                  menuAlign='start'
+                  className='text-foreground/90 hover:bg-accent/35 border-border/60 bg-background/25 h-9 w-full justify-between rounded-md px-2.5 text-[11px]'
+                />
+                <ThemeToggle
+                  menuSide='right'
+                  menuAlign='start'
+                  className='text-foreground/90 hover:bg-accent/35 border-border/60 bg-background/25 h-9 w-full justify-between rounded-md px-2.5 text-[11px]'
+                />
+                <Button
+                  variant='ghost'
+                  size='sm'
+                  onClick={async () => {
+                    setIsMobileSidebarOpen(false);
+                    await handleLogout();
+                  }}
+                  className='text-muted-foreground hover:bg-destructive/10 hover:text-destructive h-9 w-full justify-start gap-1.5 rounded-md px-2.5 text-[11px]'
+                >
+                  <LogOutIcon className='h-4 w-4' />
+                  Logout
+                </Button>
+              </div>
+            </div>
+          </div>
+        </SheetContent>
+      </Sheet>
+    </div>
+  );
+}

ui/components/app-sidebar.tsx

@@ -2,23 +2,28 @@
 
 import * as React from 'react';
 import {
+  ExternalLinkIcon,
   FileTextIcon,
   DatabaseIcon,
   LayoutDashboardIcon,
   ServerIcon,
   SettingsIcon,
   WalletIcon,
+  ArrowRightLeftIcon,
 } from 'lucide-react';
 import Image from 'next/image';
+import Link from 'next/link';
 
 import { NavSecondary } from '@/components/nav-secondary';
 import {
   Sidebar,
   SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
   SidebarHeader,
   SidebarMenu,
-  SidebarMenuItem,
   SidebarMenuButton,
+  SidebarMenuItem,
 } from '@/components/ui/sidebar';
 
 const data = {
@@ -41,6 +46,11 @@ const data = {
       url: '/balances',
       icon: WalletIcon,
     },
+    {
+      title: 'Transactions',
+      url: '/transactions',
+      icon: ArrowRightLeftIcon,
+    },
     {
       title: 'Logs',
       url: '/logs',
@@ -68,29 +78,61 @@ const data = {
 export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
   return (
     <Sidebar collapsible='offcanvas' {...props}>
-      <SidebarHeader>
+      <SidebarHeader className='px-3 pt-4 pb-3'>
         <SidebarMenu>
           <SidebarMenuItem>
-            <SidebarMenuButton
-              asChild
-              className='data-[slot=sidebar-menu-button]:!p-1.5'
-            >
-              <div className='flex items-center gap-2'>
-                <Image
-                  src='/icon.ico'
-                  alt='Routstr Node'
-                  width={24}
-                  height={24}
-                  className='rounded'
-                />
-                <span className='text-base font-semibold'>Routstr Node</span>
+            <div className='flex items-center gap-2 px-2 py-1'>
+              <Image
+                src='/icon.ico'
+                alt='Routstr Node'
+                width={24}
+                height={24}
+                className='rounded'
+              />
+              <div className='space-y-0.5'>
+                <p className='text-sm font-semibold tracking-tight'>
+                  Routstr Node
+                </p>
+                <p className='text-muted-foreground text-[11px]'>
+                  Admin dashboard
+                </p>
               </div>
-            </SidebarMenuButton>
+            </div>
           </SidebarMenuItem>
         </SidebarMenu>
       </SidebarHeader>
-      <SidebarContent className='flex-1 overflow-y-auto'>
-        <NavSecondary items={data.navSecondary} className='mt-auto' />
+      <SidebarContent className='flex-1 overflow-y-auto px-2 pb-2'>
+        <NavSecondary items={data.navSecondary} />
+        <SidebarGroup className='mt-auto px-0 pt-2 pb-0'>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              <SidebarMenuItem>
+                <SidebarMenuButton asChild className='h-10 rounded-lg px-3'>
+                  <Link
+                    href='https://docs.routstr.com'
+                    target='_blank'
+                    rel='noreferrer'
+                  >
+                    <span>Docs</span>
+                    <ExternalLinkIcon className='ml-auto h-3.5 w-3.5' />
+                  </Link>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+              <SidebarMenuItem>
+                <SidebarMenuButton asChild className='h-10 rounded-lg px-3'>
+                  <Link
+                    href='https://chat.routstr.com'
+                    target='_blank'
+                    rel='noreferrer'
+                  >
+                    <span>Chat App</span>
+                    <ExternalLinkIcon className='ml-auto h-3.5 w-3.5' />
+                  </Link>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
       </SidebarContent>
       {/*
       <SidebarFooter>

ui/components/auth-page-shell.tsx

@@ -0,0 +1,38 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+
+interface AuthPageShellProps {
+  title: string;
+  description: string;
+  children: ReactNode;
+}
+
+export function AuthPageShell({
+  title,
+  description,
+  children,
+}: AuthPageShellProps) {
+  return (
+    <div className='bg-background text-foreground flex min-h-dvh items-center justify-center px-4 py-10 sm:py-12'>
+      <Card className='w-full max-w-md'>
+        <CardHeader className='space-y-1 pb-4'>
+          <CardTitle className='text-center text-2xl font-bold'>
+            {title}
+          </CardTitle>
+          <CardDescription className='text-center'>
+            {description}
+          </CardDescription>
+        </CardHeader>
+        <CardContent>{children}</CardContent>
+      </Card>
+    </div>
+  );
+}

ui/components/batch-override-dialog.tsx

@@ -119,7 +119,7 @@ export function BatchOverrideDialog({
             value={jsonInput}
             onChange={(e) => setJsonInput(e.target.value)}
             placeholder={JSON.stringify(sampleJson, null, 2)}
-            className='min-h-[400px] font-mono text-xs'
+            className='min-h-[260px] font-mono text-xs sm:min-h-[400px]'
           />
         </div>
 

ui/components/chart-area-interactive.tsx

@@ -125,11 +125,11 @@ const chartConfig = {
   },
   desktop: {
     label: 'Desktop',
-    color: 'hsl(var(--chart-1))',
+    color: 'var(--chart-1)',
   },
   mobile: {
     label: 'Mobile',
-    color: 'hsl(var(--chart-2))',
+    color: 'var(--chart-2)',
   },
 } satisfies ChartConfig;
 

ui/components/child-key-creator.tsx

@@ -1,7 +1,9 @@
 'use client';
 
 import { useState } from 'react';
+import { useWalletInfo } from '@/hooks/use-wallet-info';
 import { WalletService } from '@/lib/api/services/wallet';
+import { ApiKeyInput } from './api-key-input';
 import { Button } from '@/components/ui/button';
 import {
   Card,
@@ -12,17 +14,10 @@ import {
 } from '@/components/ui/card';
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 import { Input } from '@/components/ui/input';
-import {
-  Key,
-  Copy,
-  Check,
-  Loader2,
-  RotateCcw,
-  Plus,
-  Trash2,
-} from 'lucide-react';
+import { Textarea } from '@/components/ui/textarea';
+import { Label } from '@/components/ui/label';
+import { Key, Copy, Check, Loader2, Plus, Trash2 } from 'lucide-react';
 import { toast } from 'sonner';
-import { Badge } from '@/components/ui/badge';
 import { KeyOptions } from './key-options';
 
 interface KeyConfig {
@@ -40,6 +35,14 @@ interface ChildKeyCreatorProps {
   costPerKeyMsats?: number;
 }
 
+function formatSats(msats: number): string {
+  return new Intl.NumberFormat('en-US').format(Math.floor(msats / 1000));
+}
+
+function formatMsats(msats: number): string {
+  return new Intl.NumberFormat('en-US').format(msats);
+}
+
 export function ChildKeyCreator({
   baseUrl,
   apiKey: propApiKey,
@@ -48,6 +51,7 @@ export function ChildKeyCreator({
 }: ChildKeyCreatorProps) {
   const [internalApiKey, setInternalApiKey] = useState('');
   const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
   const [configs, setConfigs] = useState<KeyConfig[]>([
     {
       id: crypto.randomUUID(),
@@ -57,15 +61,15 @@ export function ChildKeyCreator({
       validityDate: '',
     },
   ]);
-  const [childKeyToCheck, setChildKeyToCheck] = useState('');
-  const [checking, setChecking] = useState(false);
-  const [keyStatus, setKeyStatus] = useState<{
-    total_spent: number;
-    balance_limit: number | null;
-    validity_date: number | null;
-    is_expired: boolean;
-    is_drained: boolean;
-  } | null>(null);
+
+  const activeApiKey = propApiKey ?? internalApiKey;
+  const { data: walletInfo } = useWalletInfo(baseUrl ?? '', activeApiKey);
+
+  const handleApiKeyChange = (val: string) => {
+    setInternalApiKey(val);
+    onApiKeyChange?.(val);
+  };
+
   const [newKeys, setNewKeys] = useState<string[]>([]);
   const [resultInfo, setResultInfo] = useState<{
     cost_msats: number;
@@ -73,13 +77,6 @@ export function ChildKeyCreator({
   } | null>(null);
   const [copiedKey, setCopiedKey] = useState<string | null>(null);
 
-  const activeApiKey = propApiKey ?? internalApiKey;
-
-  const handleApiKeyChange = (val: string) => {
-    setInternalApiKey(val);
-    onApiKeyChange?.(val);
-  };
-
   const addConfig = () => {
     setConfigs([
       ...configs,
@@ -110,6 +107,7 @@ export function ChildKeyCreator({
     }
 
     setLoading(true);
+    setError(null);
     try {
       let allNewKeys: string[] = [];
       let totalCost = 0;
@@ -150,55 +148,21 @@ export function ChildKeyCreator({
       );
     } catch (error) {
       console.error('Failed to create child key:', error);
-      toast.error(
-        error instanceof Error ? error.message : 'Failed to create child key'
-      );
+      let errorMessage =
+        error instanceof Error ? error.message : 'Failed to create child key';
+      try {
+        const parsed = JSON.parse(errorMessage);
+        errorMessage =
+          parsed.detail?.error?.message ||
+          (typeof parsed.detail === 'string' ? parsed.detail : errorMessage);
+      } catch {}
+      setError(errorMessage);
+      toast.error(errorMessage);
     } finally {
       setLoading(false);
     }
   };
 
-  const handleCheckKey = async () => {
-    if (!childKeyToCheck) {
-      toast.error('Please provide a Child API key to check');
-      return;
-    }
-
-    setChecking(true);
-    setKeyStatus(null);
-    try {
-      const baseUrlToUse = baseUrl || '';
-      const response = await fetch(`${baseUrlToUse}/v1/balance/info`, {
-        headers: {
-          Authorization: `Bearer ${childKeyToCheck}`,
-        },
-      });
-
-      if (!response.ok) {
-        throw new Error('Failed to fetch key info');
-      }
-
-      const info = await response.json();
-      const now = Math.floor(Date.now() / 1000);
-
-      setKeyStatus({
-        total_spent: info.total_spent,
-        balance_limit: info.balance_limit,
-        validity_date: info.validity_date,
-        is_expired: info.validity_date ? now > info.validity_date : false,
-        is_drained: info.balance_limit
-          ? info.total_spent >= info.balance_limit
-          : false,
-      });
-    } catch (error) {
-      toast.error(
-        error instanceof Error ? error.message : 'Failed to check child key'
-      );
-    } finally {
-      setChecking(false);
-    }
-  };
-
   const copyToClipboard = (key: string) => {
     navigator.clipboard.writeText(key);
     setCopiedKey(key);
@@ -224,7 +188,7 @@ export function ChildKeyCreator({
             </div>
             {costPerKeyMsats !== undefined && (
               <div className='text-right'>
-                <p className='text-muted-foreground text-[0.65rem] tracking-wide uppercase'>
+                <p className='text-muted-foreground text-[0.65rem] tracking-wide'>
                   Unit Cost
                 </p>
                 <p className='text-primary text-sm font-bold'>
@@ -238,15 +202,58 @@ export function ChildKeyCreator({
           <div className='space-y-4'>
             {baseUrl && (
               <div className='space-y-2'>
-                <label className='text-muted-foreground text-[0.7rem] tracking-wider uppercase'>
+                <Label className='text-muted-foreground text-[0.7rem] tracking-wider'>
                   Parent API Key
-                </label>
-                <Input
-                  value={activeApiKey}
-                  onChange={(e) => handleApiKeyChange(e.target.value)}
-                  placeholder='sk-...'
-                  className='font-mono text-sm'
-                />
+                </Label>
+                <div className='flex gap-2'>
+                  <div className='flex-1'>
+                    <ApiKeyInput
+                      value={activeApiKey}
+                      onApiKeyChange={handleApiKeyChange}
+                    />
+                  </div>
+                  <Button
+                    variant='outline'
+                    size='icon'
+                    onClick={() => navigator.clipboard.writeText(activeApiKey)}
+                    disabled={!activeApiKey}
+                  >
+                    <Copy className='h-4 w-4' />
+                  </Button>
+                </div>
+                {walletInfo && (
+                  <div className='bg-muted/30 mt-2 space-y-2 rounded-lg p-3'>
+                    <div className='flex items-center justify-between'>
+                      <span className='text-muted-foreground text-sm'>
+                        Spendable Balance
+                      </span>
+                      <span className='text-primary font-mono text-sm font-medium'>
+                        {formatSats(walletInfo.balanceMsats)} sats
+                      </span>
+                    </div>
+                    <div className='flex items-center justify-between'>
+                      <span className='text-muted-foreground text-sm'>
+                        Total Requests
+                      </span>
+                      <span className='font-mono text-sm font-medium'>
+                        {walletInfo.totalRequests}
+                      </span>
+                    </div>
+                    <div className='flex items-center justify-between'>
+                      <span className='text-muted-foreground text-sm'>
+                        Total Spent
+                      </span>
+                      <div className='text-right'>
+                        <p className='font-mono text-sm font-medium'>
+                          {formatSats(walletInfo.totalSpent)} sats
+                        </p>
+                        <p className='text-muted-foreground font-mono text-[0.6rem]'>
+                          {formatMsats(walletInfo.totalSpent)} msats
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                )}
               </div>
             )}
 
@@ -268,9 +275,9 @@ export function ChildKeyCreator({
                   )}
                   <div className='flex flex-col gap-4 sm:flex-row sm:items-end'>
                     <div className='w-full space-y-2 sm:w-32'>
-                      <label className='text-muted-foreground text-[0.7rem] tracking-wider uppercase'>
+                      <Label className='text-muted-foreground text-[0.7rem] tracking-wider'>
                         Number of keys
-                      </label>
+                      </Label>
                       <Input
                         type='number'
                         min={1}
@@ -360,20 +367,27 @@ export function ChildKeyCreator({
                   )}
                 </Button>
               </div>
-            </div>
 
-            <p className='text-muted-foreground text-xs'>
-              Each key creation has a small one-time fee.
-            </p>
+              {error && (
+                <Alert variant='destructive'>
+                  <AlertTitle>Error</AlertTitle>
+                  <AlertDescription>{error}</AlertDescription>
+                </Alert>
+              )}
+
+              <p className='text-muted-foreground text-xs'>
+                Each key creation has a small one-time fee.
+              </p>
+            </div>
 
             {newKeys.length > 0 && (
               <div className='mt-6 space-y-4'>
-                <Alert className='border-green-200 bg-green-50 dark:border-green-900/20 dark:bg-green-900/10'>
-                  <AlertTitle className='text-green-800 dark:text-green-400'>
+                <Alert>
+                  <AlertTitle>
                     {newKeys.length} New API Key{newKeys.length > 1 ? 's' : ''}{' '}
                     Generated
                   </AlertTitle>
-                  <AlertDescription className='text-green-700 dark:text-green-500'>
+                  <AlertDescription>
                     Copy {newKeys.length > 1 ? 'these keys' : 'this key'} now.
                     You won&apos;t be able to see them again.
                     {resultInfo && (
@@ -387,14 +401,14 @@ export function ChildKeyCreator({
 
                 <div className='space-y-2'>
                   <div className='flex items-center justify-between'>
-                    <span className='text-muted-foreground text-xs font-medium uppercase'>
+                    <span className='text-muted-foreground text-xs font-medium'>
                       Generated Keys ({newKeys.length})
                     </span>
                     {newKeys.length > 1 && (
                       <Button
                         variant='ghost'
                         size='sm'
-                        className='h-7 text-[10px] uppercase'
+                        className='h-7 text-[10px]'
                         onClick={copyAllToClipboard}
                       >
                         <Copy className='mr-1 h-3 w-3' />
@@ -418,7 +432,7 @@ export function ChildKeyCreator({
                           onClick={() => copyToClipboard(key)}
                         >
                           {copiedKey === key ? (
-                            <Check className='h-3.5 w-3.5 text-green-500' />
+                            <Check className='h-3.5 w-3.5' />
                           ) : (
                             <Copy className='h-3.5 w-3.5 opacity-50 group-hover:opacity-100' />
                           )}
@@ -430,15 +444,15 @@ export function ChildKeyCreator({
 
                 {newKeys.length > 3 && (
                   <div className='space-y-2'>
-                    <label className='text-muted-foreground text-[0.7rem] tracking-wider uppercase'>
+                    <Label className='text-muted-foreground text-[0.7rem] tracking-wider'>
                       Bulk Export (All Keys)
-                    </label>
+                    </Label>
                     <div className='relative'>
-                      <textarea
+                      <Textarea
                         readOnly
                         value={newKeys.join('\n')}
                         rows={Math.min(newKeys.length, 6)}
-                        className='bg-muted/30 w-full rounded-md border p-3 font-mono text-[10px] focus:outline-none'
+                        className='bg-muted/30 font-mono text-[10px] leading-relaxed'
                       />
                       <Button
                         size='sm'
@@ -456,91 +470,6 @@ export function ChildKeyCreator({
           </div>
         </CardContent>
       </Card>
-
-      <Card>
-        <CardHeader>
-          <CardTitle className='text-lg'>Check Child Key Status</CardTitle>
-          <CardDescription>
-            View the current spending, limit, and expiration status of any child
-            key.
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <div className='space-y-4'>
-            <div className='space-y-2'>
-              <label className='text-muted-foreground text-[0.7rem] tracking-wider uppercase'>
-                Child API Key
-              </label>
-              <Input
-                value={childKeyToCheck}
-                onChange={(e) => setChildKeyToCheck(e.target.value)}
-                placeholder='sk-...'
-                className='font-mono text-sm'
-              />
-            </div>
-            <Button
-              onClick={handleCheckKey}
-              disabled={checking || !childKeyToCheck}
-              variant='outline'
-              className='w-full'
-            >
-              {checking ? (
-                <>
-                  <Loader2 className='mr-2 h-4 w-4 animate-spin' />
-                  Checking...
-                </>
-              ) : (
-                <>
-                  <RotateCcw className='mr-2 h-4 w-4' />
-                  Check Status
-                </>
-              )}
-            </Button>
-
-            {keyStatus && (
-              <div className='bg-muted/30 mt-4 space-y-3 rounded-lg border p-4 text-sm'>
-                <div className='flex justify-between'>
-                  <span className='text-muted-foreground'>Total Spent:</span>
-                  <span className='font-mono font-medium'>
-                    {keyStatus.total_spent} mSats
-                  </span>
-                </div>
-                {keyStatus.balance_limit !== null && (
-                  <div className='flex justify-between'>
-                    <span className='text-muted-foreground'>Limit:</span>
-                    <span className='font-mono font-medium'>
-                      {keyStatus.balance_limit} mSats
-                    </span>
-                  </div>
-                )}
-                {keyStatus.validity_date !== null && (
-                  <div className='flex justify-between'>
-                    <span className='text-muted-foreground'>Expires:</span>
-                    <span className='font-mono font-medium'>
-                      {new Date(
-                        keyStatus.validity_date * 1000
-                      ).toLocaleDateString()}
-                    </span>
-                  </div>
-                )}
-                <div className='flex gap-2 pt-2'>
-                  {keyStatus.is_drained && (
-                    <Badge variant='destructive'>Drained</Badge>
-                  )}
-                  {keyStatus.is_expired && (
-                    <Badge variant='destructive'>Expired</Badge>
-                  )}
-                  {!keyStatus.is_drained && !keyStatus.is_expired && (
-                    <Badge className='bg-green-600 hover:bg-green-700'>
-                      Active
-                    </Badge>
-                  )}
-                </div>
-              </div>
-            )}
-          </div>
-        </CardContent>
-      </Card>
     </div>
   );
 }

ui/components/collect-models-dialog.tsx

@@ -218,11 +218,11 @@ export function CollectModelsDialog({
 
           {!isLoadingModels && selectedProvider && remoteModels.length > 0 && (
             <>
-              <div className='flex items-center justify-between'>
+              <div className='flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between'>
                 <div className='text-sm font-medium'>
                   {remoteModels.length} models available
                 </div>
-                <div className='flex gap-2'>
+                <div className='flex flex-wrap gap-2'>
                   <Button
                     variant='outline'
                     size='sm'

ui/components/cost-calculator-dialog.tsx

@@ -2,7 +2,7 @@
 
 import React from 'react';
 import { type Model } from '@/lib/api/schemas/models';
-import { CostCalculator } from '@/components/CostCalculator';
+import { CostCalculator } from '@/components/cost-calculator';
 import {
   Dialog,
   DialogContent,

ui/components/cost-calculator.tsx

@@ -5,8 +5,9 @@ import { type Model } from '@/lib/api/schemas/models';
 import {
   calculateRequestCost,
   estimateMinimumTokensForCost,
-  formatCost,
-} from '@/lib/services/costValidation';
+} from '@/lib/services/cost-validation';
+import { formatUsdAmountForDisplayUnit } from '@/lib/currency';
+import { useDisplayCurrency } from '@/lib/hooks/use-display-currency';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
@@ -21,6 +22,7 @@ interface CostCalculatorProps {
 }
 
 export function CostCalculator({ model }: CostCalculatorProps) {
+  const { displayUnit, usdPerSat } = useDisplayCurrency();
   const [inputTokens, setInputTokens] = useState<number>(100);
   const [outputTokens, setOutputTokens] = useState<number>(100);
 
@@ -39,6 +41,8 @@ export function CostCalculator({ model }: CostCalculatorProps) {
   }, [model]);
 
   const hasMinimumCost = model.min_cost_per_request > 0;
+  const formatDisplayCost = (amountUsd: number) =>
+    formatUsdAmountForDisplayUnit(amountUsd, displayUnit, usdPerSat);
 
   return (
     <div className='space-y-6'>
@@ -75,33 +79,33 @@ export function CostCalculator({ model }: CostCalculatorProps) {
           <div className='flex justify-between'>
             <span>Input Cost ({inputTokens.toLocaleString()} tokens):</span>
             <span className='font-mono'>
-              {formatCost(costCalculation.inputCost)}
+              {formatDisplayCost(costCalculation.inputCost)}
             </span>
           </div>
           <div className='flex justify-between'>
             <span>Output Cost ({outputTokens.toLocaleString()} tokens):</span>
             <span className='font-mono'>
-              {formatCost(costCalculation.outputCost)}
+              {formatDisplayCost(costCalculation.outputCost)}
             </span>
           </div>
           <hr className='my-2' />
           <div className='flex justify-between'>
             <span>Base Cost:</span>
             <span className='font-mono'>
-              {formatCost(costCalculation.baseCost)}
+              {formatDisplayCost(costCalculation.baseCost)}
             </span>
           </div>
           <div className='flex justify-between'>
             <span>Minimum Cost per Request:</span>
             <span className='font-mono'>
-              {formatCost(costCalculation.minCostPerRequest)}
+              {formatDisplayCost(costCalculation.minCostPerRequest)}
             </span>
           </div>
           <hr className='my-2' />
           <div className='flex justify-between font-medium'>
             <span>Final Cost:</span>
             <span className='font-mono text-lg'>
-              {formatCost(costCalculation.finalCost)}
+              {formatDisplayCost(costCalculation.finalCost)}
             </span>
           </div>
         </div>
@@ -110,16 +114,12 @@ export function CostCalculator({ model }: CostCalculatorProps) {
       {/* Minimum Cost Alert */}
       {hasMinimumCost && (
         <Alert
-          className={
-            costCalculation.isMinimumApplied
-              ? 'border-amber-200 bg-amber-50'
-              : 'border-green-200 bg-green-50'
-          }
+          variant={costCalculation.isMinimumApplied ? 'destructive' : 'default'}
         >
           {costCalculation.isMinimumApplied ? (
-            <AlertTriangle className='h-4 w-4 text-amber-600' />
+            <AlertTriangle className='h-4 w-4' />
           ) : (
-            <CheckCircle className='h-4 w-4 text-green-600' />
+            <CheckCircle className='h-4 w-4' />
           )}
           <AlertTitle>
             {costCalculation.isMinimumApplied
@@ -128,8 +128,8 @@ export function CostCalculator({ model }: CostCalculatorProps) {
           </AlertTitle>
           <AlertDescription>
             {costCalculation.isMinimumApplied
-              ? `The calculated cost (${formatCost(costCalculation.baseCost)}) is below the minimum, so the minimum cost of ${formatCost(costCalculation.minCostPerRequest)} is applied.`
-              : `The calculated cost (${formatCost(costCalculation.baseCost)}) meets the minimum requirement of ${formatCost(costCalculation.minCostPerRequest)}.`}
+              ? `The calculated cost (${formatDisplayCost(costCalculation.baseCost)}) is below the minimum, so the minimum cost of ${formatDisplayCost(costCalculation.minCostPerRequest)} is applied.`
+              : `The calculated cost (${formatDisplayCost(costCalculation.baseCost)}) meets the minimum requirement of ${formatDisplayCost(costCalculation.minCostPerRequest)}.`}
           </AlertDescription>
         </Alert>
       )}
@@ -207,16 +207,20 @@ export function CostCalculator({ model }: CostCalculatorProps) {
         <div className='space-y-2 text-sm'>
           <div className='flex justify-between'>
             <span>Input cost per 1M tokens:</span>
-            <span className='font-mono'>{formatCost(model.input_cost)}</span>
+            <span className='font-mono'>
+              {formatDisplayCost(model.input_cost)}
+            </span>
           </div>
           <div className='flex justify-between'>
             <span>Output cost per 1M tokens:</span>
-            <span className='font-mono'>{formatCost(model.output_cost)}</span>
+            <span className='font-mono'>
+              {formatDisplayCost(model.output_cost)}
+            </span>
           </div>
           <div className='flex justify-between'>
             <span>Minimum cost per request:</span>
             <span className='font-mono'>
-              {formatCost(model.min_cost_per_request)}
+              {formatDisplayCost(model.min_cost_per_request)}
             </span>
           </div>
         </div>

ui/components/currency-toggle.tsx

@@ -1,20 +1,45 @@
 '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 { useQuery } from '@tanstack/react-query';
+import { ChevronsUpDownIcon, CoinsIcon } from 'lucide-react';
+import { useCurrencyStore } from '@/lib/stores/currency';
+import { fetchBtcUsdPrice, btcToSatsRate } from '@/lib/exchange-rate';
 import type { DisplayUnit } from '@/lib/types/units';
 import {
   DropdownMenu,
   DropdownMenuContent,
-  DropdownMenuItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
 import { Button } from '@/components/ui/button';
-import { Coins } from 'lucide-react';
+import { cn } from '@/lib/utils';
 
-export function CurrencyToggle() {
+interface CurrencyToggleProps {
+  className?: string;
+  compact?: boolean;
+  menuSide?: 'top' | 'right' | 'bottom' | 'left';
+  menuAlign?: 'start' | 'center' | 'end';
+}
+
+const UNIT_OPTIONS: Array<{ value: DisplayUnit; label: string }> = [
+  { value: 'msat', label: 'mSAT' },
+  { value: 'sat', label: 'sat' },
+  { value: 'usd', label: 'USD' },
+];
+
+function getLabel(unit: DisplayUnit): string {
+  const option = UNIT_OPTIONS.find((item) => item.value === unit);
+  return option?.label ?? unit;
+}
+
+export function CurrencyToggle({
+  className,
+  compact = false,
+  menuSide = 'bottom',
+  menuAlign = 'end',
+}: CurrencyToggleProps) {
   const { displayUnit, setDisplayUnit } = useCurrencyStore();
 
   const { data: btcUsdPrice } = useQuery({
@@ -32,47 +57,55 @@ export function CurrencyToggle() {
     }
   }, [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'
+          variant='outline'
           size='sm'
-          className='h-9 w-9 w-auto gap-2 px-0 px-3 font-normal'
+          className={cn(
+            'border-border/60 bg-background/65 text-muted-foreground hover:text-foreground rounded-md',
+            compact
+              ? 'h-8 w-10 justify-center px-0'
+              : 'h-8 justify-between gap-2',
+            className
+          )}
         >
-          <Coins className='h-4 w-4' />
-          <span className='hidden sm:inline-block'>
-            {getLabel(displayUnit)}
+          <span className='inline-flex min-w-0 items-center gap-1.5'>
+            <CoinsIcon className='h-3.5 w-3.5 shrink-0' />
+            {compact ? null : (
+              <span className='truncate text-[11px] font-medium uppercase'>
+                {getLabel(displayUnit)}
+              </span>
+            )}
           </span>
-          <span className='uppercase sm:hidden'>{displayUnit}</span>
+          {compact ? (
+            <span className='sr-only'>Currency: {getLabel(displayUnit)}</span>
+          ) : (
+            <ChevronsUpDownIcon className='h-3.5 w-3.5 opacity-70' />
+          )}
         </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}
+      <DropdownMenuContent side={menuSide} align={menuAlign}>
+        <DropdownMenuRadioGroup
+          value={displayUnit}
+          onValueChange={(value) => {
+            if (value !== 'msat' && value !== 'sat' && value !== 'usd') return;
+            if (value === 'usd' && !usdPerSat) return;
+            setDisplayUnit(value);
+          }}
         >
-          US Dollar (USD)
-        </DropdownMenuItem>
+          {UNIT_OPTIONS.map((option) => (
+            <DropdownMenuRadioItem
+              key={option.value}
+              value={option.value}
+              disabled={option.value === 'usd' && !usdPerSat}
+              className='uppercase'
+            >
+              {option.label}
+            </DropdownMenuRadioItem>
+          ))}
+        </DropdownMenuRadioGroup>
       </DropdownMenuContent>
     </DropdownMenu>
   );

ui/components/dashboard-balance-summary.tsx

@@ -21,7 +21,8 @@ export function DashboardBalanceSummary({
     queryFn: async () => {
       return WalletService.getDetailedBalances();
     },
-    refetchInterval: 30000,
+    refetchInterval: 900000,
+    staleTime: 300000,
   });
 
   const calculateTotals = (balances: BalanceDetail[]) => {
@@ -59,37 +60,38 @@ export function DashboardBalanceSummary({
       title: 'Your Balance',
       value: formatAmount(totals.totalOwner),
       icon: Coins,
-      color: 'text-green-600',
-      bgColor: 'bg-green-100 dark:bg-green-900/20',
+      color: 'text-green-600 dark:text-green-300',
     },
     {
       title: 'Total Wallet',
       value: formatAmount(totals.totalWallet),
       icon: Wallet,
-      color: 'text-blue-600',
-      bgColor: 'bg-blue-100 dark:bg-blue-900/20',
+      color: 'text-blue-600 dark:text-blue-300',
     },
     {
       title: 'User Balance',
       value: formatAmount(totals.totalUser),
       icon: User,
-      color: 'text-purple-600',
-      bgColor: 'bg-purple-100 dark:bg-purple-900/20',
+      color: 'text-purple-600 dark:text-purple-300',
     },
   ];
 
   return (
-    <div className='grid gap-4 md:grid-cols-3'>
+    <div className='grid grid-cols-2 gap-2.5 max-[359px]:grid-cols-1 sm:gap-3 lg: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>
+        <Card key={card.title} size='sm'>
+          <CardHeader className='flex flex-row items-center justify-between space-y-0 pb-1'>
+            <CardTitle className='text-muted-foreground text-[11px] font-medium sm:text-sm'>
+              {card.title}
+            </CardTitle>
+            <span className='inline-flex size-6 items-center justify-center sm:size-7'>
+              <card.icon className={`size-3.5 sm:size-4 ${card.color}`} />
+            </span>
           </CardHeader>
-          <CardContent>
-            <div className='text-2xl font-bold'>{card.value}</div>
+          <CardContent className='pt-0'>
+            <div className='text-base font-semibold break-words tabular-nums sm:text-xl'>
+              {card.value}
+            </div>
           </CardContent>
         </Card>
       ))}

ui/components/data-table.tsx

@@ -190,11 +190,7 @@ const columns: ColumnDef<z.infer<typeof schema>>[] = [
         variant='outline'
         className='text-muted-foreground flex gap-1 px-1.5 [&_svg]:size-3'
       >
-        {row.original.status === 'Done' ? (
-          <CheckCircle2Icon className='text-green-500 dark:text-green-400' />
-        ) : (
-          <LoaderIcon />
-        )}
+        {row.original.status === 'Done' ? <CheckCircle2Icon /> : <LoaderIcon />}
         {row.original.status}
       </Badge>
     ),

ui/components/detailed-wallet-balance.tsx

@@ -2,7 +2,7 @@
 
 import { useState } from 'react';
 import { useQuery } from '@tanstack/react-query';
-import { Loader2, RefreshCw, AlertCircle, Wallet } from 'lucide-react';
+import { RefreshCw, AlertCircle, Wallet, User, Coins } from 'lucide-react';
 import { WalletService, BalanceDetail } from '@/lib/api/services/wallet';
 import {
   Card,
@@ -12,6 +12,23 @@ import {
   CardTitle,
 } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import {
+  Empty,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from '@/components/ui/empty';
+import { Skeleton } from '@/components/ui/skeleton';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
 import { WithdrawModal } from '@/components/withdraw-modal';
 import { cn } from '@/lib/utils';
 import type { DisplayUnit } from '@/lib/types/units';
@@ -66,18 +83,46 @@ export function DetailedWalletBalance({
     ? calculateTotals(data)
     : { totalWallet: 0, totalUser: 0, totalOwner: 0 };
 
+  const rows = (data ?? [])
+    .filter(
+      (detail) =>
+        (detail.wallet_balance && detail.wallet_balance > 0) || detail.error
+    )
+    .map((detail, index) => {
+      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);
+
+      return {
+        key: `${detail.mint_url}-${detail.unit}-${index}`,
+        detail,
+        walletMsat,
+        userMsat,
+        ownerMsat,
+      };
+    });
+
+  const formatMintLabel = (detail: BalanceDetail) =>
+    `${detail.mint_url.replace('https://', '').replace('http://', '')} • ${detail.unit.toUpperCase()}`;
+
   return (
     <>
-      <Card className='h-full w-full shadow-sm'>
+      <Card>
         <CardHeader className='pb-4'>
-          <div className='flex items-center justify-between'>
-            <CardTitle className='text-xl'>Cashu Wallet Balance</CardTitle>
-            <div className='flex gap-2'>
+          <div className='flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between'>
+            <div className='space-y-1.5'>
+              <CardTitle>Cashu Wallet Balance</CardTitle>
+              <CardDescription>
+                Detailed balance breakdown by mint and currency
+              </CardDescription>
+            </div>
+            <div className='flex w-full gap-2 sm:w-auto'>
               <Button
                 variant='default'
                 size='sm'
                 onClick={() => setWithdrawModalOpen(true)}
                 disabled={isLoading || !data || data.length === 0}
+                className='flex-1 sm:flex-none'
               >
                 <Wallet className='mr-2 h-4 w-4' />
                 Withdraw
@@ -87,7 +132,6 @@ export function DetailedWalletBalance({
                 size='icon'
                 onClick={() => refetch()}
                 disabled={isLoading || isFetching}
-                className='h-8 w-8'
               >
                 <RefreshCw
                   className={cn(
@@ -99,177 +143,218 @@ export function DetailedWalletBalance({
               </Button>
             </div>
           </div>
-          <CardDescription>
-            Detailed balance breakdown by mint and currency
-          </CardDescription>
         </CardHeader>
         <CardContent>
           {isLoading ? (
-            <div className='flex items-center justify-center py-8'>
-              <Loader2 className='text-primary h-8 w-8 animate-spin' />
+            <div className='space-y-4'>
+              <div className='grid gap-3 md:grid-cols-3'>
+                {Array.from({ length: 3 }).map((_, index) => (
+                  <Card key={`wallet-stat-skeleton-${index}`}>
+                    <CardHeader className='space-y-2 pb-1'>
+                      <Skeleton className='h-3.5 w-28' />
+                      <Skeleton className='h-3 w-8' />
+                    </CardHeader>
+                    <CardContent className='pt-0'>
+                      <Skeleton className='h-7 w-24' />
+                    </CardContent>
+                  </Card>
+                ))}
+              </div>
+              <Skeleton className='h-3 w-52' />
+              <div className='space-y-2'>
+                {Array.from({ length: 5 }).map((_, index) => (
+                  <Skeleton
+                    key={`wallet-row-skeleton-${index}`}
+                    className='h-11 w-full'
+                  />
+                ))}
+              </div>
             </div>
           ) : isError ? (
-            <div className='bg-destructive/10 text-destructive flex items-center space-x-2 rounded-md p-4'>
+            <Alert variant='destructive'>
               <AlertCircle className='h-5 w-5' />
-              <span>Error loading balance: {(error as Error).message}</span>
-            </div>
+              <AlertDescription>
+                Error loading balance: {(error as Error).message}
+              </AlertDescription>
+            </Alert>
           ) : (
             <div className='space-y-6'>
-              <div className='space-y-3'>
-                <div className='flex items-center justify-between'>
-                  <span className='text-muted-foreground text-sm'>
-                    Your Balance (Total)
-                  </span>
-                  <span className='text-2xl font-bold text-green-600'>
-                    {formatAmount(totals.totalOwner)}
-                  </span>
-                </div>
-                <div className='flex items-center justify-between'>
-                  <span className='text-muted-foreground text-sm'>
-                    Total Wallet
-                  </span>
-                  <span className='text-lg font-semibold'>
-                    {formatAmount(totals.totalWallet)}
-                  </span>
-                </div>
-                <div className='flex items-center justify-between'>
-                  <span className='text-muted-foreground text-sm'>
-                    User Balance
-                  </span>
-                  <span className='text-lg font-semibold'>
-                    {formatAmount(totals.totalUser)}
-                  </span>
-                </div>
+              <div className='grid gap-3 md:grid-cols-3'>
+                <Card>
+                  <CardHeader className='flex flex-row items-center justify-between space-y-0 pb-2'>
+                    <CardTitle className='text-muted-foreground text-sm font-medium'>
+                      Your Balance (Total)
+                    </CardTitle>
+                    <span className='inline-flex size-8 items-center justify-center'>
+                      <Coins className='size-4 text-green-600 dark:text-green-300' />
+                    </span>
+                  </CardHeader>
+                  <CardContent className='pt-0'>
+                    <p className='text-primary text-2xl font-semibold tracking-tight tabular-nums'>
+                      {formatAmount(totals.totalOwner)}
+                    </p>
+                  </CardContent>
+                </Card>
+                <Card>
+                  <CardHeader className='flex flex-row items-center justify-between space-y-0 pb-2'>
+                    <CardTitle className='text-muted-foreground text-sm font-medium'>
+                      Total Wallet
+                    </CardTitle>
+                    <span className='inline-flex size-8 items-center justify-center'>
+                      <Wallet className='size-4 text-blue-600 dark:text-blue-300' />
+                    </span>
+                  </CardHeader>
+                  <CardContent className='pt-0'>
+                    <p className='text-2xl font-semibold tracking-tight tabular-nums'>
+                      {formatAmount(totals.totalWallet)}
+                    </p>
+                  </CardContent>
+                </Card>
+                <Card>
+                  <CardHeader className='flex flex-row items-center justify-between space-y-0 pb-2'>
+                    <CardTitle className='text-muted-foreground text-sm font-medium'>
+                      User Balance
+                    </CardTitle>
+                    <span className='inline-flex size-8 items-center justify-center'>
+                      <User className='size-4 text-purple-600 dark:text-purple-300' />
+                    </span>
+                  </CardHeader>
+                  <CardContent className='pt-0'>
+                    <p className='text-2xl font-semibold tracking-tight tabular-nums'>
+                      {formatAmount(totals.totalUser)}
+                    </p>
+                  </CardContent>
+                </Card>
               </div>
 
               <p className='text-muted-foreground text-xs'>
                 Your balance = Total wallet - User balance
               </p>
 
-              <div className='overflow-hidden rounded-lg border'>
-                {/* Desktop Table Header */}
-                <div className='bg-muted hidden grid-cols-4 gap-2 p-3 text-sm font-semibold md:grid'>
-                  <div>Mint / Unit</div>
-                  <div className='text-right'>Wallet</div>
-                  <div className='text-right'>Users</div>
-                  <div className='text-right'>Owner</div>
-                </div>
-
-                {data && data.length > 0 ? (
-                  data
-                    .filter(
-                      (detail) =>
-                        (detail.wallet_balance && detail.wallet_balance > 0) ||
-                        detail.error
-                    )
-                    .map((detail, index) => {
-                      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
-                      );
-
-                      return (
-                        <div
-                          key={index}
-                          className={cn(
-                            'border-t p-3 text-sm',
-                            detail.error && 'bg-destructive/10 text-destructive'
-                          )}
-                        >
-                          {/* Desktop Layout */}
-                          <div className='hidden grid-cols-4 gap-2 md:grid'>
-                            <div className='text-xs break-all'>
-                              {detail.mint_url
-                                .replace('https://', '')
-                                .replace('http://', '')}{' '}
-                              • {detail.unit.toUpperCase()}
-                            </div>
-                            <div className='text-right font-mono'>
-                              {detail.error
-                                ? 'error'
-                                : formatAmount(walletMsat)}
-                            </div>
-                            <div className='text-right font-mono'>
-                              {detail.error ? '-' : formatAmount(userMsat)}
-                            </div>
-                            <div
+              {rows.length > 0 ? (
+                <>
+                  <div className='hidden md:block'>
+                    <Table>
+                      <TableHeader>
+                        <TableRow>
+                          <TableHead>Mint / Unit</TableHead>
+                          <TableHead className='text-right'>Wallet</TableHead>
+                          <TableHead className='text-right'>Users</TableHead>
+                          <TableHead className='text-right'>Owner</TableHead>
+                        </TableRow>
+                      </TableHeader>
+                      <TableBody>
+                        {rows.map(
+                          ({
+                            key,
+                            detail,
+                            walletMsat,
+                            userMsat,
+                            ownerMsat,
+                          }) => (
+                            <TableRow
+                              key={key}
                               className={cn(
-                                'text-right font-mono',
-                                !detail.error &&
-                                  ownerMsat > 0 &&
-                                  'font-semibold text-green-600'
+                                detail.error &&
+                                  'bg-destructive/10 text-destructive'
                               )}
                             >
-                              {detail.error ? '-' : formatAmount(ownerMsat)}
-                            </div>
-                          </div>
-
-                          {/* Mobile Layout */}
-                          <div className='space-y-3 md:hidden'>
-                            <div className='space-y-1'>
-                              <span className='text-muted-foreground text-xs font-medium'>
-                                Mint / Unit
-                              </span>
-                              <div className='font-mono text-xs break-all'>
-                                {detail.mint_url
-                                  .replace('https://', '')
-                                  .replace('http://', '')}{' '}
-                                • {detail.unit.toUpperCase()}
-                              </div>
-                            </div>
-                            <div className='grid grid-cols-3 gap-2'>
-                              <div className='space-y-1'>
-                                <div className='text-muted-foreground text-xs font-medium'>
-                                  Wallet
-                                </div>
-                                <div className='truncate font-mono text-sm'>
-                                  {detail.error
-                                    ? 'error'
-                                    : formatAmount(walletMsat)}
-                                </div>
-                              </div>
-                              <div className='space-y-1'>
-                                <div className='text-muted-foreground text-xs font-medium'>
-                                  Users
-                                </div>
-                                <div className='truncate font-mono text-sm'>
-                                  {detail.error ? '-' : formatAmount(userMsat)}
-                                </div>
-                              </div>
-                              <div className='space-y-1'>
-                                <div className='text-muted-foreground text-xs font-medium'>
-                                  Owner
-                                </div>
-                                <div
-                                  className={cn(
-                                    'truncate font-mono text-sm',
-                                    !detail.error &&
-                                      ownerMsat > 0 &&
-                                      'font-semibold text-green-600'
-                                  )}
-                                >
-                                  {detail.error ? '-' : formatAmount(ownerMsat)}
-                                </div>
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      );
-                    })
-                ) : (
-                  <div className='text-muted-foreground p-4 text-center text-sm'>
-                    No balances to display
+                              <TableCell className='max-w-md font-mono text-xs break-all whitespace-normal'>
+                                {formatMintLabel(detail)}
+                              </TableCell>
+                              <TableCell className='text-right font-mono'>
+                                {detail.error
+                                  ? 'error'
+                                  : formatAmount(walletMsat)}
+                              </TableCell>
+                              <TableCell className='text-right font-mono'>
+                                {detail.error ? '-' : formatAmount(userMsat)}
+                              </TableCell>
+                              <TableCell
+                                className={cn(
+                                  'text-right font-mono',
+                                  !detail.error &&
+                                    ownerMsat > 0 &&
+                                    'text-primary font-semibold'
+                                )}
+                              >
+                                {detail.error ? '-' : formatAmount(ownerMsat)}
+                              </TableCell>
+                            </TableRow>
+                          )
+                        )}
+                      </TableBody>
+                    </Table>
                   </div>
-                )}
-              </div>
+                  <div className='space-y-2 md:hidden'>
+                    {rows.map(
+                      ({ key, detail, walletMsat, userMsat, ownerMsat }) => (
+                        <Card
+                          key={`${key}-mobile`}
+                          className={cn(
+                            detail.error &&
+                              'border-destructive/40 bg-destructive/5'
+                          )}
+                        >
+                          <CardHeader className='p-4 pb-2'>
+                            <CardDescription className='font-mono text-xs break-all'>
+                              {formatMintLabel(detail)}
+                            </CardDescription>
+                          </CardHeader>
+                          <CardContent className='grid grid-cols-1 gap-2 p-4 pt-0 sm:grid-cols-3 sm:gap-3'>
+                            <div>
+                              <p className='text-muted-foreground text-xs'>
+                                Wallet
+                              </p>
+                              <p className='font-mono text-sm'>
+                                {detail.error
+                                  ? 'error'
+                                  : formatAmount(walletMsat)}
+                              </p>
+                            </div>
+                            <div>
+                              <p className='text-muted-foreground text-xs'>
+                                Users
+                              </p>
+                              <p className='font-mono text-sm'>
+                                {detail.error ? '-' : formatAmount(userMsat)}
+                              </p>
+                            </div>
+                            <div>
+                              <p className='text-muted-foreground text-xs'>
+                                Owner
+                              </p>
+                              <p
+                                className={cn(
+                                  'font-mono text-sm',
+                                  !detail.error &&
+                                    ownerMsat > 0 &&
+                                    'text-primary font-semibold'
+                                )}
+                              >
+                                {detail.error ? '-' : formatAmount(ownerMsat)}
+                              </p>
+                            </div>
+                          </CardContent>
+                        </Card>
+                      )
+                    )}
+                  </div>
+                </>
+              ) : (
+                <Empty className='py-6'>
+                  <EmptyHeader>
+                    <EmptyMedia variant='icon'>
+                      <Wallet className='h-4 w-4' />
+                    </EmptyMedia>
+                    <EmptyTitle>No balances to display</EmptyTitle>
+                    <EmptyDescription>
+                      Wallet balances will appear here after funds are
+                      available.
+                    </EmptyDescription>
+                  </EmptyHeader>
+                </Empty>
+              )}
             </div>
           )}
         </CardContent>

ui/components/ecash-redeem.tsx

@@ -4,7 +4,7 @@ import { useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { Loader2, Copy, Check, SendIcon } from 'lucide-react';
+import { Loader2, Copy, Check } from 'lucide-react';
 import { toast } from 'sonner';
 import { useQueryClient } from '@tanstack/react-query';
 import { QRCodeSVG } from 'qrcode.react';
@@ -101,10 +101,7 @@ export function EcashRedeem() {
   return (
     <Card className='h-full w-full shadow-sm'>
       <CardHeader>
-        <div className='flex items-center space-x-2'>
-          <SendIcon className='text-primary h-5 w-5' />
-          <CardTitle>Send eCash</CardTitle>
-        </div>
+        <CardTitle>Send eCash</CardTitle>
         <CardDescription>
           Generate a token to send eCash to someone
         </CardDescription>

ui/components/edit-group-form.tsx

@@ -27,6 +27,7 @@ import {
   FormMessage,
 } from '@/components/ui/form';
 import { Switch } from '@/components/ui/switch';
+import { Badge } from '@/components/ui/badge';
 import { Users, Key, Loader2, Globe, AlertTriangle, Info } from 'lucide-react';
 import { toast } from 'sonner';
 import { Alert, AlertDescription } from '@/components/ui/alert';
@@ -122,9 +123,9 @@ export function EditGroupForm({
             <div className='space-y-2 text-sm'>
               <div className='flex justify-between'>
                 <span>Models using group API key:</span>
-                <span className='font-medium text-blue-600'>
+                <Badge variant='secondary' className='tabular-nums'>
                   {modelsWithoutKeys}
-                </span>
+                </Badge>
               </div>
             </div>
           </div>
@@ -138,18 +139,18 @@ export function EditGroupForm({
             <div className='space-y-2 text-sm'>
               <div className='flex justify-between'>
                 <span>Models using group URL:</span>
-                <span className='font-medium text-blue-600'>
+                <Badge variant='secondary' className='tabular-nums'>
                   {modelsUsingGroupUrl}
-                </span>
+                </Badge>
               </div>
               <div className='flex justify-between'>
                 <span>Models with individual URLs:</span>
-                <span className='font-medium text-green-600'>
+                <Badge variant='outline' className='tabular-nums'>
                   {models.length - modelsUsingGroupUrl}
-                </span>
+                </Badge>
               </div>
               {groupSettings?.group_url && (
-                <div className='mt-2 rounded bg-blue-50 p-2 text-xs'>
+                <div className='bg-muted mt-2 rounded p-2 text-xs'>
                   <span className='font-medium'>Current group URL:</span>{' '}
                   {groupSettings.group_url}
                 </div>
@@ -163,26 +164,22 @@ export function EditGroupForm({
             <div className='max-h-32 overflow-y-auto'>
               <div className='flex flex-wrap gap-2'>
                 {models.map((model) => (
-                  <span
+                  <Badge
                     key={model.id}
-                    className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${
-                      model.api_key
-                        ? 'bg-green-100 text-green-800'
-                        : 'bg-blue-100 text-blue-800'
-                    }`}
+                    variant={model.api_key ? 'default' : 'secondary'}
+                    className='max-w-full'
                     title={
                       model.api_key
                         ? 'Has individual API key and URL'
                         : 'Uses group API key and URL'
                     }
                   >
-                    {model.name}
-                    {model.api_key && ' 🔑'}
+                    <span className='truncate'>{model.name}</span>
+                    {model.api_key && <Key className='ml-1 h-3 w-3' />}
                     {model.url &&
                       !model.url.startsWith('/') &&
-                      model.api_key &&
-                      ' 🌐'}
-                  </span>
+                      model.api_key && <Globe className='ml-1 h-3 w-3' />}
+                  </Badge>
                 ))}
               </div>
             </div>
@@ -310,28 +307,30 @@ export function EditGroupForm({
               )}
             />
 
-            <div className='rounded-md border border-amber-200 bg-amber-50 p-4'>
-              <p className='text-sm text-amber-800'>
-                <strong>How group settings work:</strong>
-              </p>
-              <ul className='mt-2 list-inside list-disc space-y-1 text-sm text-amber-800'>
-                <li>
-                  Models with individual API keys and URLs will keep their
-                  specific settings
-                </li>
-                <li>
-                  Models without individual settings will use the group defaults
-                </li>
-                <li>
-                  Removing the group URL makes models fall back to the system
-                  default endpoint
-                </li>
-                <li>
-                  You can use &quot;Apply Group Settings&quot; to force models
-                  to use group configurations
-                </li>
-              </ul>
-            </div>
+            <Alert>
+              <Info className='h-4 w-4' />
+              <AlertDescription>
+                <p className='font-medium'>How group settings work:</p>
+                <ul className='mt-2 list-inside list-disc space-y-1 text-sm'>
+                  <li>
+                    Models with individual API keys and URLs will keep their
+                    specific settings
+                  </li>
+                  <li>
+                    Models without individual settings will use the group
+                    defaults
+                  </li>
+                  <li>
+                    Removing the group URL makes models fall back to the system
+                    default endpoint
+                  </li>
+                  <li>
+                    You can use &quot;Apply Group Settings&quot; to force models
+                    to use group configurations
+                  </li>
+                </ul>
+              </AlertDescription>
+            </Alert>
 
             <div className='flex justify-end gap-2 pt-4'>
               <Button

ui/components/error-details-table.tsx

@@ -38,8 +38,8 @@ export function ErrorDetailsTable({ errors }: ErrorDetailsTableProps) {
         <CardTitle>Recent Errors ({errors.length})</CardTitle>
       </CardHeader>
       <CardContent>
-        <div className='max-h-[400px] overflow-y-auto'>
-          <Table>
+        <div className='max-h-[420px] max-w-full overflow-y-auto'>
+          <Table className='min-w-[640px] sm:min-w-[760px]'>
             <TableHeader>
               <TableRow>
                 <TableHead>Timestamp</TableHead>

ui/components/key-options.tsx

@@ -1,5 +1,13 @@
 import { Zap, Calendar, Shield } from 'lucide-react';
 import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
 
 interface KeyOptionsProps {
   balanceLimit: string;
@@ -24,48 +32,57 @@ export function KeyOptions({
     <div className='grid gap-4 sm:grid-cols-3'>
       {showBalanceLimit && (
         <div className='space-y-2'>
-          <label className='text-muted-foreground flex items-center gap-1.5 text-[0.7rem] tracking-wider uppercase'>
+          <Label className='text-muted-foreground flex items-center gap-1.5 text-[0.7rem] tracking-wider uppercase'>
             <Zap className='h-3 w-3' />
             Balance Limit (mSats)
-          </label>
+          </Label>
           <Input
             type='number'
             placeholder='No limit'
             value={balanceLimit}
             onChange={(e) => setBalanceLimit(e.target.value)}
             className='h-9 text-xs'
+            name='balance_limit_msats'
+            autoComplete='off'
           />
         </div>
       )}
 
       <div className='space-y-2'>
-        <label className='text-muted-foreground flex items-center gap-1.5 text-[0.7rem] tracking-wider uppercase'>
+        <Label className='text-muted-foreground flex items-center gap-1.5 text-[0.7rem] tracking-wider uppercase'>
           <Calendar className='h-3 w-3' />
           Validity Date
-        </label>
+        </Label>
         <Input
           type='date'
           value={validityDate}
           onChange={(e) => setValidityDate(e.target.value)}
           className='h-9 text-xs'
+          name='validity_date'
         />
       </div>
 
       <div className='space-y-2'>
-        <label className='text-muted-foreground flex items-center gap-1.5 text-[0.7rem] tracking-wider uppercase'>
+        <Label className='text-muted-foreground flex items-center gap-1.5 text-[0.7rem] tracking-wider uppercase'>
           <Shield className='h-3 w-3' />
           Reset Policy
-        </label>
-        <select
-          value={balanceLimitReset}
-          onChange={(e) => setBalanceLimitReset(e.target.value)}
-          className='bg-background border-input flex h-9 w-full rounded-md border px-3 py-1 text-xs shadow-sm transition-colors'
+        </Label>
+        <Select
+          value={balanceLimitReset || 'none'}
+          onValueChange={(value) =>
+            setBalanceLimitReset(value === 'none' ? '' : value)
+          }
         >
-          <option value=''>None</option>
-          <option value='daily'>Daily</option>
-          <option value='weekly'>Weekly</option>
-          <option value='monthly'>Monthly</option>
-        </select>
+          <SelectTrigger className='h-9 w-full text-xs'>
+            <SelectValue placeholder='None' />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value='none'>None</SelectItem>
+            <SelectItem value='daily'>Daily</SelectItem>
+            <SelectItem value='weekly'>Weekly</SelectItem>
+            <SelectItem value='monthly'>Monthly</SelectItem>
+          </SelectContent>
+        </Select>
       </div>
     </div>
   );

ui/components/landing/api-key-manager.tsx

@@ -7,6 +7,7 @@ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Separator } from '@/components/ui/separator';
+import { WalletBalanceStats } from './wallet-balance-stats';
 import type { WalletSnapshot, ChildKeyInfo } from './key-info-details';
 import type { RefundReceipt } from './cashu-payment-workflow';
 
@@ -65,10 +66,6 @@ async function fetchWalletInfo(
   };
 }
 
-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));
 }
@@ -175,17 +172,14 @@ export function ApiKeyManager({
   return (
     <Card>
       <CardHeader className='space-y-1'>
-        <CardTitle className='flex items-center gap-2 text-xl'>
-          <RefreshCcw className='text-primary h-5 w-5' />
-          API Key Management
-        </CardTitle>
-        <p className='text-muted-foreground text-xs tracking-wide uppercase'>
+        <CardTitle className='text-xl'>API Key Management</CardTitle>
+        <p className='text-muted-foreground text-xs tracking-wide'>
           Manage your existing API keys and balances
         </p>
       </CardHeader>
       <CardContent className='space-y-6'>
         <section className='space-y-2'>
-          <header className='text-muted-foreground flex items-center justify-between text-[0.7rem] tracking-wider uppercase'>
+          <header className='text-muted-foreground flex items-center justify-between text-[0.7rem] tracking-wider'>
             <span>Manage existing key</span>
             {walletInfo && (
               <span className='text-primary'>
@@ -226,43 +220,15 @@ export function ApiKeyManager({
 
           {showManageDetails && (
             <div className='space-y-4'>
-              <div className='grid gap-3 sm:grid-cols-2'>
-                <div className='rounded-lg border p-3'>
-                  <p className='text-muted-foreground text-[0.65rem] tracking-wide uppercase'>
-                    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-muted-foreground text-[0.65rem] tracking-wide uppercase'>
-                    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>
+              <WalletBalanceStats
+                balanceMsats={walletInfo?.balanceMsats}
+                reservedMsats={walletInfo?.reservedMsats}
+              />
 
               <Separator />
 
               <div className='space-y-2'>
-                <header className='text-muted-foreground flex items-center justify-between text-[0.7rem] tracking-wider uppercase'>
+                <header className='text-muted-foreground flex items-center justify-between text-[0.7rem] tracking-wider'>
                   <span>Refund remaining balance</span>
                 </header>
                 <div className='flex flex-wrap gap-2'>
@@ -273,7 +239,7 @@ export function ApiKeyManager({
                     className='gap-2'
                   >
                     <Trash2 className='h-4 w-4' />
-                    {isRefunding ? 'Processing...' : 'Refund & Delete Key'}
+                    {isRefunding ? 'Processing...' : 'Refund Key'}
                   </Button>
                   <span className='text-muted-foreground text-xs'>
                     Burns the key and returns a fresh Cashu token.

ui/components/landing/cashu-payment-workflow.tsx

@@ -1,15 +1,17 @@
 'use client';
 
 import { type JSX, useCallback, useState } from 'react';
-import { Copy, KeyRound, RefreshCcw, Trash2 } from 'lucide-react';
+import { Copy, RefreshCcw } from 'lucide-react';
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 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 { Separator } from '@/components/ui/separator';
 import { KeyOptions } from '@/components/key-options';
-import type { ChildKeyInfo, WalletSnapshot } from './key-info-details';
+import { ApiKeyInput } from '../api-key-input';
+import type { WalletSnapshot } from './key-info-details';
+import { useWalletInfo } from '@/hooks/use-wallet-info';
 
 export type RefundReceipt = {
   token?: string;
@@ -28,84 +30,41 @@ interface CashuPaymentWorkflowProps {
   onRefundComplete?: (receipt: RefundReceipt) => void;
 }
 
-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;
-    is_child: boolean;
-    parent_key: string | null;
-    total_requests: number;
-    total_spent: number;
-    balance_limit: number | null;
-    balance_limit_reset: string | null;
-    validity_date: number | null;
-    child_keys?: ChildKeyInfo[];
-  };
-
-  return {
-    apiKey: payload.api_key || apiKey,
-    balanceMsats: payload.balance ?? 0,
-    reservedMsats: payload.reserved ?? 0,
-    isChild: payload.is_child,
-    parentKey: payload.parent_key,
-    totalRequests: payload.total_requests,
-    totalSpent: payload.total_spent,
-    balanceLimit: payload.balance_limit,
-    balanceLimitReset: payload.balance_limit_reset,
-    validityDate: payload.validity_date,
-    childKeys: payload.child_keys,
-  };
+function formatSats(msats: number): string {
+  return new Intl.NumberFormat('en-US').format(Math.floor(msats / 1000));
 }
 
 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 CashuPaymentWorkflow({
   baseUrl,
   apiKey = '',
-  walletInfo = null,
+  walletInfo: propWalletInfo = null,
   onApiKeyCreated,
-  onApiKeyChanged,
   onWalletInfoUpdated,
-  onRefundComplete,
 }: CashuPaymentWorkflowProps): JSX.Element {
   const [initialToken, setInitialToken] = useState('');
   const [topupToken, setTopupToken] = useState('');
   const [apiKeyInput, setApiKeyInput] = useState(apiKey);
   const [isCreatingKey, setIsCreatingKey] = useState(false);
   const [isTopupLoading, setIsTopupLoading] = useState(false);
-  const [isRefunding, setIsRefunding] = useState(false);
-  const [isSyncingBalance, setIsSyncingBalance] = useState(false);
-  const [hasInteractedManage, setHasInteractedManage] = useState(false);
   const [hasInteractedTopup, setHasInteractedTopup] = useState(false);
   const [balanceLimit, setBalanceLimit] = useState<string>('');
   const [balanceLimitReset, setBalanceLimitReset] = useState<string>('');
   const [validityDate, setValidityDate] = useState<string>('');
+  const [error, setError] = useState<string | null>(null);
 
   const activeApiKey = apiKeyInput.trim();
 
+  const {
+    data: queryWalletInfo,
+    refetch,
+    isFetching,
+  } = useWalletInfo(baseUrl, activeApiKey);
+  const walletInfo = propWalletInfo ?? queryWalletInfo ?? null;
+
   const handleCopy = useCallback(async (value: string): Promise<void> => {
     if (!value) {
       return;
@@ -206,20 +165,18 @@ export function CashuPaymentWorkflow({
       return;
     }
 
-    setIsSyncingBalance(true);
+    setError(null);
     try {
-      const snapshot = await fetchWalletInfo(baseUrl, activeApiKey);
-      onWalletInfoUpdated?.(snapshot);
+      await refetch();
       toast.success('Balance synced');
     } catch (error) {
       console.error(error);
-      toast.error(
-        error instanceof Error ? error.message : 'Failed to sync balance'
-      );
-    } finally {
-      setIsSyncingBalance(false);
+      const message =
+        error instanceof Error ? error.message : 'Failed to sync balance';
+      setError(message);
+      toast.error(message);
     }
-  }, [activeApiKey, baseUrl, onWalletInfoUpdated]);
+  }, [activeApiKey, refetch]);
 
   const handleTopup = useCallback(async (): Promise<void> => {
     if (!activeApiKey) {
@@ -248,59 +205,25 @@ export function CashuPaymentWorkflow({
       const payload = (await response.json()) as { msats: number };
       toast.success(`Added ${formatSats(payload.msats)} sats`);
       setTopupToken('');
-      const snapshot = await fetchWalletInfo(baseUrl, activeApiKey);
-      onApiKeyCreated?.(snapshot.apiKey, snapshot);
+      await refetch();
     } catch (error) {
       console.error(error);
       toast.error(error instanceof Error ? error.message : 'Top-up failed');
     } finally {
       setIsTopupLoading(false);
     }
-  }, [activeApiKey, baseUrl, topupToken, onApiKeyCreated]);
-
-  const handleRefund = useCallback(async (): Promise<void> => {
-    if (!activeApiKey) {
-      toast.error('Paste an API key first');
-      return;
-    }
-
-    setIsRefunding(true);
-    try {
-      const response = await fetch(`${baseUrl}/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;
-      onRefundComplete?.(payload);
-      onWalletInfoUpdated?.(null);
-      setApiKeyInput('');
-      toast.success('Refund requested');
-    } catch (error) {
-      console.error(error);
-      toast.error(error instanceof Error ? error.message : 'Refund failed');
-    } finally {
-      setIsRefunding(false);
-    }
-  }, [activeApiKey, baseUrl, onRefundComplete, onWalletInfoUpdated]);
+  }, [activeApiKey, baseUrl, topupToken, refetch]);
 
   const handleApiKeyChange = useCallback(
     (newKey: string) => {
       setApiKeyInput(newKey);
-      onApiKeyChanged?.(newKey);
       if (newKey !== apiKey) {
         onWalletInfoUpdated?.(null);
       }
     },
-    [apiKey, onApiKeyChanged, onWalletInfoUpdated]
+    [apiKey, onWalletInfoUpdated]
   );
 
-  const showManageDetails = hasInteractedManage || Boolean(walletInfo);
   const showTopupDetails = hasInteractedTopup || topupToken.trim().length > 0;
   const canTopup = Boolean(activeApiKey);
   const showCreateDetails = initialToken.trim().length > 0;
@@ -308,17 +231,14 @@ export function CashuPaymentWorkflow({
   return (
     <Card>
       <CardHeader className='space-y-1'>
-        <CardTitle className='flex items-center gap-2 text-xl'>
-          <KeyRound className='text-primary h-5 w-5' />
-          API key workflow
-        </CardTitle>
-        <p className='text-muted-foreground text-xs tracking-wide uppercase'>
+        <CardTitle className='text-xl'>API key workflow</CardTitle>
+        <p className='text-muted-foreground text-xs tracking-wide'>
           Sections expand as soon as you interact
         </p>
       </CardHeader>
       <CardContent className='space-y-6'>
         <section className='space-y-2'>
-          <header className='text-muted-foreground flex items-center justify-between text-[0.7rem] tracking-wider uppercase'>
+          <header className='text-muted-foreground flex items-center justify-between text-[0.7rem] tracking-wider'>
             <span>1 · Create key</span>
             {showCreateDetails && (
               <span className='text-primary'>Cashu token detected</span>
@@ -362,7 +282,7 @@ export function CashuPaymentWorkflow({
         <Separator />
 
         <section className='space-y-2'>
-          <header className='text-muted-foreground flex items-center justify-between text-[0.7rem] tracking-wider uppercase'>
+          <header className='text-muted-foreground flex items-center justify-between text-[0.7rem] tracking-wider'>
             <span>2 · Manage key</span>
             {walletInfo && (
               <span className='text-primary'>
@@ -371,75 +291,79 @@ export function CashuPaymentWorkflow({
             )}
           </header>
           <div className='flex flex-col gap-2 sm:flex-row'>
-            <Input
+            <ApiKeyInput
               value={apiKeyInput}
-              onChange={(event) => handleApiKeyChange(event.target.value)}
-              placeholder='sk-...'
-              className='font-mono text-sm'
-              onFocus={() => setHasInteractedManage(true)}
+              onApiKeyChange={handleApiKeyChange}
             />
             <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}
+                disabled={isFetching || !activeApiKey}
               >
-                <RefreshCcw className='h-4 w-4' />
+                <RefreshCcw
+                  className={`h-4 w-4 ${isFetching ? 'animate-spin' : ''}`}
+                />
                 Sync
               </Button>
             </div>
           </div>
-          {showManageDetails && (
-            <div className='grid gap-3 sm:grid-cols-2'>
-              <div className='rounded-lg border p-3'>
-                <p className='text-muted-foreground text-[0.65rem] tracking-wide uppercase'>
-                  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>
-                )}
+          {walletInfo && (
+            <div className='bg-muted/30 mt-2 space-y-2 rounded-lg p-3'>
+              <div className='flex items-center justify-between'>
+                <span className='text-muted-foreground text-sm'>
+                  Spendable Balance
+                </span>
+                <span className='text-primary font-mono text-sm font-medium'>
+                  {formatSats(walletInfo.balanceMsats)} sats
+                </span>
               </div>
-              <div className='rounded-lg border p-3'>
-                <p className='text-muted-foreground text-[0.65rem] tracking-wide uppercase'>
-                  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
+              <div className='flex items-center justify-between'>
+                <span className='text-muted-foreground text-sm'>
+                  Total Requests
+                </span>
+                <span className='font-mono text-sm font-medium'>
+                  {walletInfo.totalRequests}
+                </span>
+              </div>
+              <div className='flex items-center justify-between'>
+                <span className='text-muted-foreground text-sm'>
+                  Total Spent
+                </span>
+                <div className='text-right'>
+                  <p className='font-mono text-sm font-medium'>
+                    {formatSats(walletInfo.totalSpent)} sats
                   </p>
-                )}
+                  <p className='text-muted-foreground font-mono text-[0.6rem]'>
+                    {formatMsats(walletInfo.totalSpent)} msats
+                  </p>
+                </div>
               </div>
             </div>
           )}
+          {error && (
+            <Alert variant='destructive' className='mt-2'>
+              <AlertTitle>Error</AlertTitle>
+              <AlertDescription>{error}</AlertDescription>
+            </Alert>
+          )}
         </section>
 
         <Separator />
 
         <section className='space-y-2'>
-          <header className='text-muted-foreground flex items-center justify-between text-[0.7rem] tracking-wider uppercase'>
+          <header className='text-muted-foreground flex items-center justify-between text-[0.7rem] tracking-wider'>
             <span>3 · Top up</span>
             {showTopupDetails && (
               <span className={canTopup ? 'text-primary' : 'text-destructive'}>
@@ -478,28 +402,6 @@ export function CashuPaymentWorkflow({
             </div>
           )}
         </section>
-
-        <Separator />
-
-        <section className='space-y-2'>
-          <header className='text-muted-foreground flex items-center justify-between text-[0.7rem] tracking-wider uppercase'>
-            <span>4 · Refund</span>
-          </header>
-          <div className='flex flex-wrap gap-2'>
-            <Button
-              onClick={handleRefund}
-              disabled={isRefunding || !activeApiKey}
-              variant='destructive'
-              className='gap-2'
-            >
-              <Trash2 className='h-4 w-4' />
-              {isRefunding ? 'Processing…' : 'Refund remaining balance'}
-            </Button>
-            <span className='text-muted-foreground text-xs'>
-              Burns the key and returns a fresh Cashu token.
-            </span>
-          </div>
-        </section>
       </CardContent>
     </Card>
   );

ui/components/landing/cheat-sheet.tsx

@@ -2,13 +2,15 @@
 
 import { type JSX, useCallback, useEffect, useMemo, useState } from 'react';
 import { useQuery } from '@tanstack/react-query';
-import { Bolt, Copy, RefreshCcw, ShieldCheck, Terminal } from 'lucide-react';
+import { Bolt, Copy, RefreshCcw, 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 { Skeleton } from '@/components/ui/skeleton';
+import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { ConfigurationService } from '@/lib/api/services/configuration';
 import {
@@ -16,7 +18,6 @@ import {
   type RefundReceipt,
 } from './cashu-payment-workflow';
 import { LightningPaymentWorkflow } from './lightning-payment-workflow';
-import { ApiKeyManager } from './api-key-manager';
 import { KeyInfoDetails, type WalletSnapshot } from './key-info-details';
 import { ChildKeyCreator } from '@/components/child-key-creator';
 
@@ -133,8 +134,8 @@ export function CheatSheet(): JSX.Element {
 
   const handleRefundComplete = useCallback((receipt: RefundReceipt) => {
     setRefundReceipt(receipt);
-    setWalletInfo(null);
-    setApiKeyInput('');
+    // setWalletInfo(null); // Keep info
+    // setApiKeyInput(''); // Keep input
   }, []);
 
   const handleRefreshInfo = useCallback(async (): Promise<void> => {
@@ -165,7 +166,7 @@ export function CheatSheet(): JSX.Element {
   const refundToken = refundReceipt?.token ?? null;
 
   return (
-    <div className='from-background via-background to-muted min-h-screen bg-gradient-to-b'>
+    <div className='bg-background min-h-screen'>
       <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 top-0 right-0 hidden md:block'>
@@ -173,7 +174,7 @@ export function CheatSheet(): JSX.Element {
               <a href='/login'>Admin</a>
             </Button>
           </div>
-          <div className='text-muted-foreground inline-flex items-center gap-2 rounded-full border px-3 py-1 text-[0.65rem] tracking-wider uppercase'>
+          <div className='text-muted-foreground inline-flex items-center gap-2 rounded-full border px-3 py-1 text-[0.65rem] tracking-wider'>
             <Bolt className='text-primary h-4 w-4' />
             Routstr cheat sheet
           </div>
@@ -191,11 +192,8 @@ export function CheatSheet(): JSX.Element {
           <Card>
             <CardHeader className='flex flex-row items-start justify-between gap-4'>
               <div>
-                <CardTitle className='flex items-center gap-2 text-lg'>
-                  <ShieldCheck className='text-primary h-4 w-4' />
-                  Node identity
-                </CardTitle>
-                <p className='text-muted-foreground text-xs tracking-wide uppercase'>
+                <CardTitle className='text-lg'>Node identity</CardTitle>
+                <p className='text-muted-foreground text-xs tracking-wide'>
                   /v1/info snapshot
                 </p>
               </div>
@@ -212,9 +210,44 @@ export function CheatSheet(): JSX.Element {
             </CardHeader>
             <CardContent className='space-y-4'>
               {isInfoLoading && (
-                <p className='text-muted-foreground text-sm'>
-                  Loading node profile…
-                </p>
+                <div className='space-y-4'>
+                  <div className='space-y-2'>
+                    <Skeleton className='h-8 w-56 max-w-full' />
+                    <Skeleton className='h-4 w-80 max-w-full' />
+                  </div>
+                  <dl className='grid gap-4 sm:grid-cols-2'>
+                    <div className='space-y-2'>
+                      <Skeleton className='h-3 w-16' />
+                      <Skeleton className='h-5 w-24' />
+                    </div>
+                    <div className='space-y-2'>
+                      <Skeleton className='h-3 w-12' />
+                      <Skeleton className='h-5 w-40 max-w-full' />
+                    </div>
+                    <div className='space-y-2 sm:col-span-2'>
+                      <Skeleton className='h-3 w-12' />
+                      <Skeleton className='h-5 w-full max-w-[26rem]' />
+                    </div>
+                    <div className='space-y-2 sm:col-span-2'>
+                      <Skeleton className='h-3 w-10' />
+                      <div className='flex items-center gap-2'>
+                        <Skeleton className='h-5 max-w-[28rem] flex-1' />
+                        <Skeleton className='h-7 w-7 rounded-md' />
+                      </div>
+                    </div>
+                  </dl>
+                  <div className='space-y-2'>
+                    <Skeleton className='h-3 w-20' />
+                    <div className='flex flex-wrap gap-2'>
+                      {Array.from({ length: 4 }).map((_, index) => (
+                        <Skeleton
+                          key={`mint-skeleton-${index}`}
+                          className='h-6 w-28 rounded-full'
+                        />
+                      ))}
+                    </div>
+                  </div>
+                </div>
               )}
               {isInfoError && !isInfoLoading && (
                 <p className='text-destructive text-sm'>
@@ -231,7 +264,7 @@ export function CheatSheet(): JSX.Element {
                   </div>
                   <dl className='grid gap-4 sm:grid-cols-2'>
                     <div>
-                      <dt className='text-muted-foreground text-xs tracking-wide uppercase'>
+                      <dt className='text-muted-foreground text-xs tracking-wide'>
                         Version
                       </dt>
                       <dd className='text-base font-medium'>
@@ -239,7 +272,7 @@ export function CheatSheet(): JSX.Element {
                       </dd>
                     </div>
                     <div>
-                      <dt className='text-muted-foreground text-xs tracking-wide uppercase'>
+                      <dt className='text-muted-foreground text-xs tracking-wide'>
                         HTTP
                       </dt>
                       <dd className='text-base font-medium break-all'>
@@ -248,7 +281,7 @@ export function CheatSheet(): JSX.Element {
                     </div>
                     {nodeInfo.onion_url && (
                       <div className='sm:col-span-2'>
-                        <dt className='text-muted-foreground text-xs tracking-wide uppercase'>
+                        <dt className='text-muted-foreground text-xs tracking-wide'>
                           Onion
                         </dt>
                         <dd className='text-base font-medium break-all'>
@@ -258,7 +291,7 @@ export function CheatSheet(): JSX.Element {
                     )}
                     {nodeInfo.npub && (
                       <div className='sm:col-span-2'>
-                        <dt className='text-muted-foreground text-xs tracking-wide uppercase'>
+                        <dt className='text-muted-foreground text-xs tracking-wide'>
                           npub
                         </dt>
                         <dd className='flex items-center gap-2 font-mono text-sm break-all'>
@@ -276,7 +309,7 @@ export function CheatSheet(): JSX.Element {
                     )}
                   </dl>
                   <div className='space-y-2'>
-                    <p className='text-muted-foreground text-xs tracking-wide uppercase'>
+                    <p className='text-muted-foreground text-xs tracking-wide'>
                       Cashu mints
                     </p>
                     <div className='flex flex-wrap gap-2'>
@@ -304,11 +337,8 @@ export function CheatSheet(): JSX.Element {
 
           <Card>
             <CardHeader className='flex flex-row items-center justify-between'>
-              <CardTitle className='flex items-center gap-2 text-lg'>
-                <Terminal className='text-primary h-4 w-4' />
-                Quick docs
-              </CardTitle>
-              <span className='text-muted-foreground text-xs tracking-wide uppercase'>
+              <CardTitle className='text-lg'>Quick docs</CardTitle>
+              <span className='text-muted-foreground text-xs tracking-wide'>
                 curl-ready
               </span>
             </CardHeader>
@@ -329,11 +359,12 @@ export function CheatSheet(): JSX.Element {
                   <Copy className='h-4 w-4' />
                 </Button>
               </div>
-              <div className='bg-muted rounded-lg p-4 font-mono text-sm leading-6'>
-                <pre className='break-all whitespace-pre-wrap'>
+              <ScrollArea className='bg-muted w-full rounded-lg border'>
+                <pre className='w-max min-w-full p-4 font-mono text-sm leading-6 whitespace-pre'>
                   {curlSnippet}
                 </pre>
-              </div>
+                <ScrollBar orientation='horizontal' />
+              </ScrollArea>
               <div className='flex gap-2'>
                 <Button
                   variant='secondary'
@@ -359,12 +390,11 @@ export function CheatSheet(): JSX.Element {
         </section>
 
         <Tabs defaultValue='cashu' className='w-full'>
-          <TabsList className='grid w-full grid-cols-5'>
+          <TabsList className='grid w-full grid-cols-4'>
             <TabsTrigger value='cashu'>Cashu</TabsTrigger>
             <TabsTrigger value='lightning'>Lightning</TabsTrigger>
-            <TabsTrigger value='manage'>Manage Keys</TabsTrigger>
-            <TabsTrigger value='details'>Key Details</TabsTrigger>
             <TabsTrigger value='child-keys'>Child Keys</TabsTrigger>
+            <TabsTrigger value='management'>Key Management</TabsTrigger>
           </TabsList>
 
           <TabsContent value='cashu' className='space-y-4'>
@@ -381,8 +411,8 @@ export function CheatSheet(): JSX.Element {
             />
           </TabsContent>
 
-          <TabsContent value='manage' className='space-y-4'>
-            <ApiKeyManager
+          <TabsContent value='management' className='space-y-4'>
+            <KeyInfoDetails
               baseUrl={normalizedBaseUrl}
               apiKey={apiKeyInput}
               walletInfo={walletInfo}
@@ -398,7 +428,7 @@ export function CheatSheet(): JSX.Element {
                 </CardHeader>
                 <CardContent className='space-y-2'>
                   <div className='bg-muted/30 space-y-2 rounded-lg border p-4'>
-                    <div className='text-muted-foreground flex items-center justify-between text-[0.7rem] tracking-wider uppercase'>
+                    <div className='text-muted-foreground flex items-center justify-between text-[0.7rem] tracking-wider'>
                       <span>Cashu refund token</span>
                       <Button
                         variant='outline'
@@ -413,7 +443,7 @@ export function CheatSheet(): JSX.Element {
                     <Textarea
                       value={refundToken}
                       readOnly
-                      rows={4}
+                      rows={15}
                       className='font-mono text-xs'
                     />
                   </div>
@@ -422,16 +452,6 @@ export function CheatSheet(): JSX.Element {
             )}
           </TabsContent>
 
-          <TabsContent value='details' className='space-y-4'>
-            <KeyInfoDetails
-              baseUrl={normalizedBaseUrl}
-              apiKey={apiKeyInput}
-              walletInfo={walletInfo}
-              onApiKeyChanged={handleApiKeyChanged}
-              onWalletInfoUpdated={handleWalletInfoUpdated}
-            />
-          </TabsContent>
-
           <TabsContent value='child-keys' className='space-y-4'>
             <ChildKeyCreator
               baseUrl={normalizedBaseUrl}

ui/components/landing/key-info-details.tsx

@@ -1,16 +1,10 @@
 'use client';
 
-import { type JSX, useState, useCallback, useEffect } from 'react';
-import {
-  Copy,
-  RefreshCcw,
-  ShieldCheck,
-  History,
-  Users,
-  RotateCcw,
-  KeyRound,
-} from 'lucide-react';
+import { useWalletInfo } from '@/hooks/use-wallet-info';
+import type { RefundReceipt } from './cashu-payment-workflow';
 import { toast } from 'sonner';
+import { ApiKeyInput } from '../api-key-input';
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 import {
   Card,
   CardContent,
@@ -20,8 +14,9 @@ import {
 } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
-import { Input } from '@/components/ui/input';
 import { WalletService } from '@/lib/api/services/wallet';
+import React, { useState, useCallback, useEffect } from 'react';
+import { Copy, RefreshCcw, RotateCcw, Trash2 } from 'lucide-react';
 
 export type ChildKeyInfo = {
   api_key: string;
@@ -52,68 +47,44 @@ interface KeyInfoDetailsProps {
   walletInfo?: WalletSnapshot | null;
   onApiKeyChanged?: (apiKey: string) => void;
   onWalletInfoUpdated?: (walletInfo: WalletSnapshot | null) => void;
+  onRefundComplete?: (receipt: RefundReceipt) => void;
 }
 
 export function KeyInfoDetails({
   baseUrl,
   apiKey = '',
-  walletInfo = null,
+  walletInfo: propWalletInfo = null,
   onApiKeyChanged,
   onWalletInfoUpdated,
-}: KeyInfoDetailsProps): JSX.Element {
+  onRefundComplete,
+}: KeyInfoDetailsProps): React.ReactNode {
   const [apiKeyInput, setApiKeyInput] = useState(apiKey);
-  const [isRefreshing, setIsRefreshing] = useState(false);
   const [isResetting, setIsResetting] = useState<string | null>(null);
+  const [isRefunding, setIsRefunding] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const {
+    data: queryWalletInfo,
+    refetch,
+    isFetching,
+  } = useWalletInfo(baseUrl, apiKeyInput);
+  const walletInfo = propWalletInfo ?? queryWalletInfo ?? null;
 
   // Sync internal state with props if they change
   useEffect(() => {
     setApiKeyInput(apiKey);
   }, [apiKey]);
 
-  const fetchDetails = useCallback(
-    async (keyToFetch: string) => {
-      setIsRefreshing(true);
-      try {
-        const response = await fetch(`${baseUrl}/v1/balance/info`, {
-          headers: { Authorization: `Bearer ${keyToFetch}` },
-        });
-        if (!response.ok) {
-          throw new Error('Failed to fetch key info');
-        }
-        const payload = await response.json();
-        const snapshot: WalletSnapshot = {
-          apiKey: payload.api_key || keyToFetch,
-          balanceMsats: payload.balance ?? 0,
-          reservedMsats: payload.reserved ?? 0,
-          isChild: payload.is_child,
-          parentKey: payload.parent_key,
-          totalRequests: payload.total_requests,
-          totalSpent: payload.total_spent,
-          balanceLimit: payload.balance_limit,
-          balanceLimitReset: payload.balance_limit_reset,
-          validityDate: payload.validity_date,
-          childKeys: payload.child_keys,
-        };
-        onWalletInfoUpdated?.(snapshot);
-        toast.success('Key details synced');
-      } catch (error) {
-        toast.error(
-          error instanceof Error ? error.message : 'Failed to fetch details'
-        );
-      } finally {
-        setIsRefreshing(false);
-      }
-    },
-    [baseUrl, onWalletInfoUpdated]
-  );
-
-  const handleRefresh = async () => {
+  const handleRefresh = async (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
     if (!apiKeyInput) return;
-    await fetchDetails(apiKeyInput);
+    await refetch();
   };
 
   const handleKeyChange = (newKey: string) => {
     setApiKeyInput(newKey);
+    setError(null);
     onApiKeyChanged?.(newKey);
     // Optionally clear info when key changes
     if (newKey !== apiKey) {
@@ -133,7 +104,7 @@ export function KeyInfoDetails({
     try {
       await WalletService.resetChildKeySpent(baseUrl, apiKeyInput, childKey);
       toast.success('Child key spent reset');
-      await fetchDetails(apiKeyInput);
+      await refetch();
     } catch (error) {
       toast.error(
         error instanceof Error ? error.message : 'Failed to reset child key'
@@ -143,6 +114,36 @@ export function KeyInfoDetails({
     }
   };
 
+  const handleRefund = useCallback(async (): Promise<void> => {
+    if (!apiKeyInput) {
+      toast.error('Paste an API key first');
+      return;
+    }
+
+    setIsRefunding(true);
+    try {
+      const response = await fetch(`${baseUrl}/v1/balance/refund`, {
+        method: 'POST',
+        headers: {
+          Authorization: `Bearer ${apiKeyInput}`,
+        },
+      });
+      if (!response.ok) {
+        const errorText = await response.text();
+        throw new Error(errorText || 'Refund failed');
+      }
+      const receipt = (await response.json()) as RefundReceipt;
+      onRefundComplete?.(receipt);
+      toast.success('Refund completed');
+      await refetch();
+    } catch (error) {
+      console.error(error);
+      toast.error(error instanceof Error ? error.message : 'Refund failed');
+    } finally {
+      setIsRefunding(false);
+    }
+  }, [apiKeyInput, baseUrl, onRefundComplete, refetch]);
+
   const formatSats = (msats: number) =>
     new Intl.NumberFormat('en-US').format(Math.floor(msats / 1000));
   const formatMsats = (msats: number) =>
@@ -154,27 +155,18 @@ export function KeyInfoDetails({
     <div className='space-y-6'>
       <Card>
         <CardHeader className='space-y-1'>
-          <CardTitle className='flex items-center gap-2 text-xl'>
-            <KeyRound className='text-primary h-5 w-5' />
-            Key Information
-          </CardTitle>
+          <CardTitle className='text-xl'>Key Information</CardTitle>
           <CardDescription>
             Enter an API key to view its balance, consumption, and child keys.
           </CardDescription>
         </CardHeader>
         <CardContent>
           <div className='flex flex-col gap-2 sm:flex-row'>
-            <Input
-              value={apiKeyInput}
-              onChange={(e) => handleKeyChange(e.target.value)}
-              placeholder='sk-...'
-              className='font-mono text-sm'
-            />
+            <ApiKeyInput value={apiKeyInput} onApiKeyChange={handleKeyChange} />
             <div className='flex gap-2'>
               <Button
                 variant='outline'
                 size='icon'
-                className='h-10 w-10 shrink-0'
                 onClick={() => handleCopy(apiKeyInput)}
                 disabled={!apiKeyInput}
               >
@@ -185,15 +177,22 @@ export function KeyInfoDetails({
                 size='sm'
                 className='min-w-[80px] gap-1'
                 onClick={handleRefresh}
-                disabled={isRefreshing || !apiKeyInput}
+                disabled={isFetching || !apiKeyInput}
+                type='button'
               >
                 <RefreshCcw
-                  className={`h-4 w-4 ${isRefreshing ? 'animate-spin' : ''}`}
+                  className={`h-8 w-4 ${isFetching ? 'animate-spin' : ''}`}
                 />
-                {isRefreshing ? 'Syncing...' : 'Sync'}
+                {isFetching ? 'Syncing...' : 'Sync'}
               </Button>
             </div>
           </div>
+          {error && (
+            <Alert variant='destructive' className='mt-2'>
+              <AlertTitle>Error</AlertTitle>
+              <AlertDescription>{error}</AlertDescription>
+            </Alert>
+          )}
         </CardContent>
       </Card>
 
@@ -202,10 +201,7 @@ export function KeyInfoDetails({
           <div className='grid gap-4 md:grid-cols-2'>
             <Card>
               <CardHeader className='pb-2'>
-                <CardTitle className='flex items-center gap-2 text-lg'>
-                  <ShieldCheck className='text-primary h-5 w-5' />
-                  Status & Identity
-                </CardTitle>
+                <CardTitle className='text-lg'>Status & Identity</CardTitle>
               </CardHeader>
               <CardContent className='space-y-4'>
                 <div className='flex items-center justify-between'>
@@ -216,7 +212,7 @@ export function KeyInfoDetails({
                 </div>
                 {walletInfo.parentKey && (
                   <div className='space-y-1'>
-                    <span className='text-muted-foreground text-xs tracking-wider uppercase'>
+                    <span className='text-muted-foreground text-xs tracking-wider'>
                       Parent Key
                     </span>
                     <div className='flex items-center gap-2'>
@@ -242,6 +238,14 @@ export function KeyInfoDetails({
                     {formatDate(walletInfo.validityDate)}
                   </span>
                 </div>
+              </CardContent>
+            </Card>
+
+            <Card>
+              <CardHeader className='pb-2'>
+                <CardTitle className='text-lg'>Infos</CardTitle>
+              </CardHeader>
+              <CardContent className='space-y-4'>
                 <div className='flex items-center justify-between'>
                   <span className='text-muted-foreground text-sm'>
                     Spendable Balance
@@ -250,17 +254,6 @@ export function KeyInfoDetails({
                     {formatSats(walletInfo.balanceMsats)} sats
                   </span>
                 </div>
-              </CardContent>
-            </Card>
-
-            <Card>
-              <CardHeader className='pb-2'>
-                <CardTitle className='flex items-center gap-2 text-lg'>
-                  <History className='text-primary h-5 w-5' />
-                  Consumption
-                </CardTitle>
-              </CardHeader>
-              <CardContent className='space-y-4'>
                 <div className='flex items-center justify-between'>
                   <span className='text-muted-foreground text-sm'>
                     Total Requests
@@ -313,8 +306,7 @@ export function KeyInfoDetails({
             walletInfo.childKeys.length > 0 && (
               <Card>
                 <CardHeader>
-                  <CardTitle className='flex items-center gap-2 text-lg'>
-                    <Users className='text-primary h-5 w-5' />
+                  <CardTitle className='text-lg'>
                     Child Keys ({walletInfo.childKeys.length})
                   </CardTitle>
                   <CardDescription>
@@ -359,7 +351,7 @@ export function KeyInfoDetails({
                         </div>
                         <div className='grid grid-cols-2 gap-4 text-xs sm:grid-cols-5'>
                           <div>
-                            <p className='text-muted-foreground text-[0.6rem] tracking-wider uppercase'>
+                            <p className='text-muted-foreground text-[0.6rem] tracking-wider'>
                               Requests
                             </p>
                             <p className='font-mono font-medium'>
@@ -367,7 +359,7 @@ export function KeyInfoDetails({
                             </p>
                           </div>
                           <div>
-                            <p className='text-muted-foreground text-[0.6rem] tracking-wider uppercase'>
+                            <p className='text-muted-foreground text-[0.6rem] tracking-wider'>
                               Spent
                             </p>
                             <p className='font-mono font-medium'>
@@ -375,7 +367,7 @@ export function KeyInfoDetails({
                             </p>
                           </div>
                           <div>
-                            <p className='text-muted-foreground text-[0.6rem] tracking-wider uppercase'>
+                            <p className='text-muted-foreground text-[0.6rem] tracking-wider'>
                               Limit
                             </p>
                             <p className='font-mono font-medium'>
@@ -385,7 +377,7 @@ export function KeyInfoDetails({
                             </p>
                           </div>
                           <div>
-                            <p className='text-muted-foreground text-[0.6rem] tracking-wider uppercase'>
+                            <p className='text-muted-foreground text-[0.6rem] tracking-wider'>
                               Policy
                             </p>
                             <p className='font-medium capitalize'>
@@ -393,7 +385,7 @@ export function KeyInfoDetails({
                             </p>
                           </div>
                           <div>
-                            <p className='text-muted-foreground text-[0.6rem] tracking-wider uppercase'>
+                            <p className='text-muted-foreground text-[0.6rem] tracking-wider'>
                               Expires
                             </p>
                             <p className='font-medium'>
@@ -408,18 +400,16 @@ export function KeyInfoDetails({
               </Card>
             )}
 
-          <div className='flex justify-center'>
+          <div className='flex justify-center gap-4'>
             <Button
-              variant='ghost'
+              onClick={handleRefund}
+              disabled={isRefunding || !apiKeyInput}
+              variant='destructive'
               size='sm'
-              onClick={handleRefresh}
-              disabled={isRefreshing}
-              className='text-muted-foreground'
+              className='gap-2'
             >
-              <RefreshCcw
-                className={`mr-2 h-3 w-3 ${isRefreshing ? 'animate-spin' : ''}`}
-              />
-              Last synced: {new Date().toLocaleTimeString()}
+              <Trash2 className='h-4 w-4' />
+              {isRefunding ? 'Processing...' : 'Refund Key'}
             </Button>
           </div>
         </>

ui/components/landing/key-info-display.tsx

@@ -0,0 +1,198 @@
+'use client';
+
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+} from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Copy, RotateCcw } from 'lucide-react';
+import type { WalletSnapshot } from './key-info-details';
+import { toast } from 'sonner';
+
+interface KeyInfoDisplayProps {
+  walletInfo: WalletSnapshot;
+  onResetSpent?: (childKey: string) => Promise<void>;
+  isResetting?: string | null;
+}
+
+const formatSats = (msats: number) =>
+  new Intl.NumberFormat('en-US').format(Math.floor(msats / 1000));
+const formatMsats = (msats: number) =>
+  new Intl.NumberFormat('en-US').format(msats);
+const formatDate = (timestamp: number | null) =>
+  timestamp ? new Date(timestamp * 1000).toLocaleDateString() : 'Never';
+
+export function KeyInfoDisplay({
+  walletInfo,
+  onResetSpent,
+  isResetting,
+}: KeyInfoDisplayProps) {
+  const handleCopy = (value: string) => {
+    navigator.clipboard.writeText(value);
+    toast.success('Copied to clipboard');
+  };
+
+  return (
+    <div className='space-y-4'>
+      <div className='grid gap-4 md:grid-cols-2'>
+        <Card>
+          <CardHeader className='pb-2'>
+            <CardTitle className='text-lg'>Status & Identity</CardTitle>
+          </CardHeader>
+          <CardContent className='space-y-4'>
+            <div className='flex items-center justify-between'>
+              <span className='text-muted-foreground text-sm'>Type</span>
+              <Badge variant={walletInfo.isChild ? 'secondary' : 'default'}>
+                {walletInfo.isChild ? 'Child Key' : 'Parent Key'}
+              </Badge>
+            </div>
+            {walletInfo.parentKey && (
+              <div className='space-y-1'>
+                <span className='text-muted-foreground text-xs tracking-wider'>
+                  Parent Key
+                </span>
+                <div className='flex items-center gap-2'>
+                  <code className='bg-muted flex-1 rounded px-2 py-1 font-mono text-xs break-all'>
+                    {walletInfo.parentKey}
+                  </code>
+                  <Button
+                    variant='ghost'
+                    size='icon'
+                    className='h-8 w-8'
+                    onClick={() => handleCopy(walletInfo.parentKey!)}
+                  >
+                    <Copy className='h-4 w-4' />
+                  </Button>
+                </div>
+              </div>
+            )}
+            <div className='flex items-center justify-between'>
+              <span className='text-muted-foreground text-sm'>Validity</span>
+              <span className='text-sm font-medium'>
+                {formatDate(walletInfo.validityDate)}
+              </span>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader className='pb-2'>
+            <CardTitle className='text-lg'>Infos</CardTitle>
+          </CardHeader>
+          <CardContent className='space-y-4'>
+            <div className='flex items-center justify-between'>
+              <span className='text-muted-foreground text-sm'>
+                Spendable Balance
+              </span>
+              <span className='text-primary font-mono text-sm font-medium'>
+                {formatSats(walletInfo.balanceMsats)} sats
+              </span>
+            </div>
+            <div className='flex items-center justify-between'>
+              <span className='text-muted-foreground text-sm'>
+                Total Requests
+              </span>
+              <span className='font-mono text-sm font-medium'>
+                {walletInfo.totalRequests}
+              </span>
+            </div>
+            <div className='flex items-center justify-between'>
+              <span className='text-muted-foreground text-sm'>Total Spent</span>
+              <div className='text-right'>
+                <p className='font-mono text-sm font-medium'>
+                  {formatSats(walletInfo.totalSpent)} sats
+                </p>
+                <p className='text-muted-foreground font-mono text-[0.6rem]'>
+                  {formatMsats(walletInfo.totalSpent)} msats
+                </p>
+              </div>
+            </div>
+            {walletInfo.balanceLimit !== null && (
+              <div className='space-y-2'>
+                <div className='flex items-center justify-between'>
+                  <span className='text-muted-foreground text-sm'>
+                    Spend Limit
+                  </span>
+                  <span className='font-mono text-sm font-medium'>
+                    {formatSats(walletInfo.balanceLimit)} sats
+                  </span>
+                </div>
+                {walletInfo.balanceLimitReset && (
+                  <div className='flex items-center justify-between'>
+                    <span className='text-muted-foreground text-sm'>
+                      Reset Policy
+                    </span>
+                    <Badge variant='outline' className='capitalize'>
+                      {walletInfo.balanceLimitReset}
+                    </Badge>
+                  </div>
+                )}
+              </div>
+            )}
+          </CardContent>
+        </Card>
+      </div>
+
+      {!walletInfo.isChild &&
+        walletInfo.childKeys &&
+        walletInfo.childKeys.length > 0 && (
+          <Card>
+            <CardHeader>
+              <CardTitle className='text-lg'>
+                Child Keys ({walletInfo.childKeys.length})
+              </CardTitle>
+              <CardDescription>
+                Secondary keys using this account&apos;s balance
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div className='space-y-4'>
+                {walletInfo.childKeys.map((ck) => (
+                  <div
+                    key={ck.api_key}
+                    className='space-y-3 rounded-lg border p-4'
+                  >
+                    <div className='flex items-center justify-between gap-4'>
+                      <code className='bg-muted flex-1 rounded px-2 py-1 font-mono text-xs break-all'>
+                        {ck.api_key}
+                      </code>
+                      <div className='flex gap-1'>
+                        <Button
+                          variant='ghost'
+                          size='icon'
+                          className='h-8 w-8'
+                          onClick={() => handleCopy(ck.api_key)}
+                        >
+                          <Copy className='h-4 w-4' />
+                        </Button>
+                        {onResetSpent && (
+                          <Button
+                            variant='ghost'
+                            size='icon'
+                            className='text-destructive h-8 w-8'
+                            title='Reset consumption'
+                            disabled={isResetting === ck.api_key}
+                            onClick={() => onResetSpent(ck.api_key)}
+                          >
+                            {isResetting === ck.api_key ? (
+                              <RotateCcw className='h-4 w-4 animate-spin' />
+                            ) : (
+                              <RotateCcw className='h-4 w-4' />
+                            )}
+                          </Button>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </CardContent>
+          </Card>
+        )}
+    </div>
+  );
+}

ui/components/landing/lightning-payment-workflow.tsx

@@ -2,7 +2,7 @@
 
 import { type JSX, useCallback, useState } from 'react';
 import Image from 'next/image';
-import { Copy, Zap, CheckCircle, Loader2 } from 'lucide-react';
+import { Copy, CheckCircle, Loader2 } from 'lucide-react';
 import { toast } from 'sonner';
 import QRCode from 'qrcode';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
@@ -10,6 +10,7 @@ import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Textarea } from '@/components/ui/textarea';
 import { Separator } from '@/components/ui/separator';
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 import { KeyOptions } from '@/components/key-options';
 import type { WalletSnapshot } from './key-info-details';
 
@@ -35,6 +36,24 @@ interface LightningPaymentWorkflowProps {
   onApiKeyCreated?: (apiKey: string, walletInfo: WalletSnapshot) => void;
 }
 
+interface InvoiceDetailsCardProps {
+  label: string;
+  amountSats: number;
+  bolt11: string;
+  qrCode: string;
+  waiting: boolean;
+  helperText: string;
+  onCopy: () => void;
+}
+
+interface ApiKeyResultAlertProps {
+  title: string;
+  description: string;
+  apiKey: string;
+  onCopy: () => void;
+  onDismiss: () => void;
+}
+
 function formatSats(msats: number): string {
   return new Intl.NumberFormat('en-US').format(Math.floor(msats / 1000));
 }
@@ -56,6 +75,113 @@ async function generateQRCodeSVG(text: string): Promise<string> {
   }
 }
 
+function InvoiceDetailsCard({
+  label,
+  amountSats,
+  bolt11,
+  qrCode,
+  waiting,
+  helperText,
+  onCopy,
+}: InvoiceDetailsCardProps): JSX.Element {
+  return (
+    <Card className='bg-muted/30 shadow-none'>
+      <CardContent className='space-y-3 p-4'>
+        <div className='text-muted-foreground flex items-center justify-between text-[0.7rem] tracking-wider'>
+          <span>
+            {label} ({amountSats} sats)
+          </span>
+          <Button
+            variant='outline'
+            size='sm'
+            className='gap-1 text-xs'
+            onClick={onCopy}
+          >
+            <Copy className='h-3 w-3' />
+            Copy
+          </Button>
+        </div>
+
+        {waiting && (
+          <Alert>
+            <Loader2 className='h-4 w-4 animate-spin' />
+            <AlertDescription>Waiting for payment...</AlertDescription>
+          </Alert>
+        )}
+
+        {qrCode && (
+          <div className='flex justify-center'>
+            <Image
+              src={qrCode}
+              alt='QR Code'
+              className='h-48 w-48'
+              width={192}
+              height={192}
+              unoptimized
+            />
+          </div>
+        )}
+
+        <Textarea
+          value={bolt11}
+          readOnly
+          rows={4}
+          className='font-mono text-xs'
+        />
+
+        <p className='text-muted-foreground text-center text-xs'>
+          {helperText}
+        </p>
+      </CardContent>
+    </Card>
+  );
+}
+
+function ApiKeyResultAlert({
+  title,
+  description,
+  apiKey,
+  onCopy,
+  onDismiss,
+}: ApiKeyResultAlertProps): JSX.Element {
+  return (
+    <Alert>
+      <CheckCircle className='h-4 w-4' />
+      <AlertTitle className='flex items-center justify-between gap-2'>
+        <span>{title}</span>
+        <Button
+          variant='outline'
+          size='sm'
+          className='gap-1 text-xs'
+          onClick={onCopy}
+        >
+          <Copy className='h-3 w-3' />
+          Copy
+        </Button>
+      </AlertTitle>
+      <AlertDescription className='space-y-3'>
+        <Textarea
+          value={apiKey}
+          readOnly
+          rows={2}
+          className='font-mono text-xs'
+        />
+        <div className='flex items-center justify-between gap-2'>
+          <span>{description}</span>
+          <Button
+            variant='ghost'
+            size='sm'
+            className='h-6 px-2 text-xs'
+            onClick={onDismiss}
+          >
+            Dismiss
+          </Button>
+        </div>
+      </AlertDescription>
+    </Alert>
+  );
+}
+
 export function LightningPaymentWorkflow({
   baseUrl,
   onApiKeyCreated,
@@ -388,17 +514,14 @@ export function LightningPaymentWorkflow({
   return (
     <Card>
       <CardHeader className='space-y-1'>
-        <CardTitle className='flex items-center gap-2 text-xl'>
-          <Zap className='text-primary h-5 w-5' />
-          Lightning Payment Workflow
-        </CardTitle>
-        <p className='text-muted-foreground text-xs tracking-wide uppercase'>
+        <CardTitle className='text-xl'>Lightning Payment Workflow</CardTitle>
+        <p className='text-muted-foreground text-xs tracking-wide'>
           Create and manage API keys using Lightning Network payments
         </p>
       </CardHeader>
       <CardContent className='space-y-6'>
         <section className='space-y-2'>
-          <header className='text-muted-foreground flex items-center justify-between text-[0.7rem] tracking-wider uppercase'>
+          <header className='text-muted-foreground flex items-center justify-between text-[0.7rem] tracking-wider'>
             <span>1 · Create key with Lightning</span>
             {showCreateDetails && (
               <span className='text-primary'>Amount specified</span>
@@ -434,95 +557,25 @@ export function LightningPaymentWorkflow({
               </Button>
 
               {createInvoice && (
-                <div className='bg-muted/30 space-y-3 rounded-lg border p-4'>
-                  <div className='text-muted-foreground flex items-center justify-between text-[0.7rem] tracking-wider uppercase'>
-                    <span>
-                      Lightning Invoice ({createInvoice.amount_sats} sats)
-                    </span>
-                    <Button
-                      variant='outline'
-                      size='sm'
-                      className='gap-1 text-xs'
-                      onClick={() => handleCopy(createInvoice.bolt11)}
-                    >
-                      <Copy className='h-3 w-3' />
-                      Copy
-                    </Button>
-                  </div>
-
-                  {isWaitingPayment && (
-                    <div className='flex items-center justify-center gap-2 rounded-lg border border-orange-200 bg-orange-50 p-3 dark:border-orange-800 dark:bg-orange-950'>
-                      <Loader2 className='h-4 w-4 animate-spin text-orange-600' />
-                      <span className='text-sm font-medium text-orange-800 dark:text-orange-200'>
-                        Waiting for payment...
-                      </span>
-                    </div>
-                  )}
-
-                  {createQRCode && (
-                    <div className='flex justify-center'>
-                      <Image
-                        src={createQRCode}
-                        alt='QR Code'
-                        className='h-48 w-48'
-                        width={192}
-                        height={192}
-                        unoptimized
-                      />
-                    </div>
-                  )}
-
-                  <Textarea
-                    value={createInvoice.bolt11}
-                    readOnly
-                    rows={4}
-                    className='font-mono text-xs'
-                  />
-
-                  <p className='text-muted-foreground text-center text-xs'>
-                    Scan QR code or copy invoice. Payment will be detected
-                    automatically.
-                  </p>
-                </div>
+                <InvoiceDetailsCard
+                  label='Lightning Invoice'
+                  amountSats={createInvoice.amount_sats}
+                  bolt11={createInvoice.bolt11}
+                  qrCode={createQRCode}
+                  waiting={isWaitingPayment}
+                  helperText='Scan QR code or copy invoice. Payment will be detected automatically.'
+                  onCopy={() => handleCopy(createInvoice.bolt11)}
+                />
               )}
 
               {createdApiKey && (
-                <div className='space-y-3 rounded-lg border border-green-200 bg-green-50 p-4 dark:border-green-800 dark:bg-green-950'>
-                  <div className='flex items-center justify-between text-[0.7rem] tracking-wider text-green-700 uppercase dark:text-green-300'>
-                    <div className='flex items-center gap-2'>
-                      <CheckCircle className='h-4 w-4' />
-                      <span>API Key Created Successfully</span>
-                    </div>
-                    <Button
-                      variant='outline'
-                      size='sm'
-                      className='gap-1 border-green-300 text-xs hover:bg-green-100 dark:border-green-700 dark:hover:bg-green-900'
-                      onClick={() => handleCopy(createdApiKey)}
-                    >
-                      <Copy className='h-3 w-3' />
-                      Copy
-                    </Button>
-                  </div>
-
-                  <Textarea
-                    value={createdApiKey}
-                    readOnly
-                    rows={2}
-                    className='border-green-200 bg-white font-mono text-xs dark:border-green-800 dark:bg-green-950/50'
-                  />
-
-                  <div className='flex items-center justify-between text-xs text-green-700 dark:text-green-300'>
-                    <span>Your API key is ready to use!</span>
-                    <Button
-                      variant='ghost'
-                      size='sm'
-                      className='h-6 px-2 text-xs text-green-700 hover:text-green-800 dark:text-green-300 dark:hover:text-green-200'
-                      onClick={() => setCreatedApiKey('')}
-                    >
-                      Dismiss
-                    </Button>
-                  </div>
-                </div>
+                <ApiKeyResultAlert
+                  title='API Key Created Successfully'
+                  description='Your API key is ready to use!'
+                  apiKey={createdApiKey}
+                  onCopy={() => handleCopy(createdApiKey)}
+                  onDismiss={() => setCreatedApiKey('')}
+                />
               )}
             </div>
           </div>
@@ -531,7 +584,7 @@ export function LightningPaymentWorkflow({
         <Separator />
 
         <section className='space-y-2'>
-          <header className='text-muted-foreground flex items-center justify-between text-[0.7rem] tracking-wider uppercase'>
+          <header className='text-muted-foreground flex items-center justify-between text-[0.7rem] tracking-wider'>
             <span>2 · Top up existing key</span>
             {showTopupDetails && (
               <span className='text-primary'>Ready to create invoice</span>
@@ -567,93 +620,25 @@ export function LightningPaymentWorkflow({
               </Button>
 
               {topupInvoice && (
-                <div className='bg-muted/30 space-y-3 rounded-lg border p-4'>
-                  <div className='text-muted-foreground flex items-center justify-between text-[0.7rem] tracking-wider uppercase'>
-                    <span>Topup Invoice ({topupInvoice.amount_sats} sats)</span>
-                    <Button
-                      variant='outline'
-                      size='sm'
-                      className='gap-1 text-xs'
-                      onClick={() => handleCopy(topupInvoice.bolt11)}
-                    >
-                      <Copy className='h-3 w-3' />
-                      Copy
-                    </Button>
-                  </div>
-
-                  {topupQRCode && (
-                    <div className='flex justify-center'>
-                      <Image
-                        src={topupQRCode}
-                        alt='QR Code'
-                        className='h-48 w-48'
-                        width={192}
-                        height={192}
-                        unoptimized
-                      />
-                    </div>
-                  )}
-
-                  <Textarea
-                    value={topupInvoice.bolt11}
-                    readOnly
-                    rows={4}
-                    className='font-mono text-xs'
-                  />
-
-                  <p className='text-muted-foreground text-center text-xs'>
-                    Scan QR code or copy invoice. Balance will be added
-                    automatically.
-                  </p>
-
-                  {isWaitingTopupPayment && (
-                    <div className='flex items-center justify-center gap-2 rounded-lg border border-orange-200 bg-orange-50 p-3 dark:border-orange-800 dark:bg-orange-950'>
-                      <Loader2 className='h-4 w-4 animate-spin text-orange-600' />
-                      <span className='text-sm font-medium text-orange-800 dark:text-orange-200'>
-                        Waiting for payment...
-                      </span>
-                    </div>
-                  )}
-                </div>
+                <InvoiceDetailsCard
+                  label='Topup Invoice'
+                  amountSats={topupInvoice.amount_sats}
+                  bolt11={topupInvoice.bolt11}
+                  qrCode={topupQRCode}
+                  waiting={isWaitingTopupPayment}
+                  helperText='Scan QR code or copy invoice. Balance will be added automatically.'
+                  onCopy={() => handleCopy(topupInvoice.bolt11)}
+                />
               )}
 
               {topupApiKeyResult && (
-                <div className='space-y-3 rounded-lg border border-blue-200 bg-blue-50 p-4 dark:border-blue-800 dark:bg-blue-950'>
-                  <div className='flex items-center justify-between text-[0.7rem] tracking-wider text-blue-700 uppercase dark:text-blue-300'>
-                    <div className='flex items-center gap-2'>
-                      <CheckCircle className='h-4 w-4' />
-                      <span>Topup Successful</span>
-                    </div>
-                    <Button
-                      variant='outline'
-                      size='sm'
-                      className='gap-1 border-blue-300 text-xs hover:bg-blue-100 dark:border-blue-700 dark:hover:bg-blue-900'
-                      onClick={() => handleCopy(topupApiKeyResult)}
-                    >
-                      <Copy className='h-3 w-3' />
-                      Copy
-                    </Button>
-                  </div>
-
-                  <Textarea
-                    value={topupApiKeyResult}
-                    readOnly
-                    rows={2}
-                    className='border-blue-200 bg-white font-mono text-xs dark:border-blue-800 dark:bg-blue-950/50'
-                  />
-
-                  <div className='flex items-center justify-between text-xs text-blue-700 dark:text-blue-300'>
-                    <span>Balance has been added to your API key!</span>
-                    <Button
-                      variant='ghost'
-                      size='sm'
-                      className='h-6 px-2 text-xs text-blue-700 hover:text-blue-800 dark:text-blue-300 dark:hover:text-blue-200'
-                      onClick={() => setTopupApiKeyResult('')}
-                    >
-                      Dismiss
-                    </Button>
-                  </div>
-                </div>
+                <ApiKeyResultAlert
+                  title='Topup Successful'
+                  description='Balance has been added to your API key!'
+                  apiKey={topupApiKeyResult}
+                  onCopy={() => handleCopy(topupApiKeyResult)}
+                  onDismiss={() => setTopupApiKeyResult('')}
+                />
               )}
             </div>
           )}
@@ -662,7 +647,7 @@ export function LightningPaymentWorkflow({
         <Separator />
 
         <section className='space-y-2'>
-          <header className='text-muted-foreground flex items-center justify-between text-[0.7rem] tracking-wider uppercase'>
+          <header className='text-muted-foreground flex items-center justify-between text-[0.7rem] tracking-wider'>
             <span>3 · Recover from invoice</span>
             {showRecoverDetails && (
               <span className='text-primary'>Invoice provided</span>
@@ -693,42 +678,13 @@ export function LightningPaymentWorkflow({
           )}
 
           {recoveredApiKey && (
-            <div className='space-y-3 rounded-lg border border-purple-200 bg-purple-50 p-4 dark:border-purple-800 dark:bg-purple-950'>
-              <div className='flex items-center justify-between text-[0.7rem] tracking-wider text-purple-700 uppercase dark:text-purple-300'>
-                <div className='flex items-center gap-2'>
-                  <CheckCircle className='h-4 w-4' />
-                  <span>API Key Recovered</span>
-                </div>
-                <Button
-                  variant='outline'
-                  size='sm'
-                  className='gap-1 border-purple-300 text-xs hover:bg-purple-100 dark:border-purple-700 dark:hover:bg-purple-900'
-                  onClick={() => handleCopy(recoveredApiKey)}
-                >
-                  <Copy className='h-3 w-3' />
-                  Copy
-                </Button>
-              </div>
-
-              <Textarea
-                value={recoveredApiKey}
-                readOnly
-                rows={2}
-                className='border-purple-200 bg-white font-mono text-xs dark:border-purple-800 dark:bg-purple-950/50'
-              />
-
-              <div className='flex items-center justify-between text-xs text-purple-700 dark:text-purple-300'>
-                <span>Your recovered API key is ready to use!</span>
-                <Button
-                  variant='ghost'
-                  size='sm'
-                  className='h-6 px-2 text-xs text-purple-700 hover:text-purple-800 dark:text-purple-300 dark:hover:text-purple-200'
-                  onClick={() => setRecoveredApiKey('')}
-                >
-                  Dismiss
-                </Button>
-              </div>
-            </div>
+            <ApiKeyResultAlert
+              title='API Key Recovered'
+              description='Your recovered API key is ready to use!'
+              apiKey={recoveredApiKey}
+              onCopy={() => handleCopy(recoveredApiKey)}
+              onDismiss={() => setRecoveredApiKey('')}
+            />
           )}
         </section>
       </CardContent>

ui/components/landing/wallet-balance-stats.tsx

@@ -0,0 +1,63 @@
+'use client';
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+} from '@/components/ui/card';
+
+interface WalletBalanceStatsProps {
+  balanceMsats?: number;
+  reservedMsats?: number;
+}
+
+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));
+}
+
+function WalletMetricCard({
+  label,
+  valueMsats,
+}: {
+  label: string;
+  valueMsats?: number;
+}) {
+  const hasValue = typeof valueMsats === 'number';
+
+  return (
+    <Card className='shadow-none'>
+      <CardHeader className='p-3 pb-2'>
+        <CardDescription className='text-[0.65rem] tracking-wide'>
+          {label}
+        </CardDescription>
+      </CardHeader>
+      <CardContent className='px-3 pt-0 pb-3'>
+        <p className='text-xl font-semibold tabular-nums'>
+          {hasValue ? `${formatSats(valueMsats)} sats` : '-'}
+        </p>
+        {hasValue && (
+          <p className='text-muted-foreground text-xs tabular-nums'>
+            {formatMsats(valueMsats)} msats
+          </p>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+
+export function WalletBalanceStats({
+  balanceMsats,
+  reservedMsats,
+}: WalletBalanceStatsProps) {
+  return (
+    <div className='grid gap-3 sm:grid-cols-2'>
+      <WalletMetricCard label='Spendable' valueMsats={balanceMsats} />
+      <WalletMetricCard label='Reserved' valueMsats={reservedMsats} />
+    </div>
+  );
+}

ui/components/model-item-card.tsx

@@ -0,0 +1,419 @@
+import type { Model } from '@/lib/api/schemas/models';
+import type { DisplayUnit } from '@/lib/types/units';
+import { formatUsdAmountForDisplayUnit } from '@/lib/currency';
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+import { Card } from '@/components/ui/card';
+import { Checkbox } from '@/components/ui/checkbox';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import {
+  ArrowRight,
+  AudioLines,
+  Ban,
+  CheckCircle,
+  Edit3,
+  FileText,
+  ImageIcon,
+  Layers3,
+  MoreVertical,
+  Trash2,
+  Type,
+  Video,
+  Waypoints,
+} from 'lucide-react';
+
+interface ModelItemCardProps {
+  model: Model;
+  displayUnit: DisplayUnit;
+  usdPerSat: number | null;
+  isSelected: boolean;
+  hasEffectiveApiKey: boolean;
+  hasIndividualSettings: boolean;
+  onHoverStart: () => void;
+  onHoverEnd: () => void;
+  onToggleSelection: () => void;
+  onEdit: () => void;
+  onOverride: () => void;
+  onDisable: () => void;
+  onEnable: () => void;
+  onDelete: () => void;
+}
+
+type ModelModality =
+  | 'text'
+  | 'image'
+  | 'file'
+  | 'audio'
+  | 'video'
+  | 'embedding'
+  | 'multimodal';
+
+const MODALITY_ORDER: ModelModality[] = [
+  'text',
+  'image',
+  'file',
+  'audio',
+  'video',
+  'embedding',
+  'multimodal',
+];
+
+function extractModalities(part: string): ModelModality[] {
+  const normalized = part.toLowerCase();
+  const modalities = MODALITY_ORDER.filter((modality) =>
+    normalized.includes(modality)
+  );
+
+  return modalities.length > 0 ? modalities : ['text'];
+}
+
+function getModelTypeParts(modelType: string): {
+  inputs: ModelModality[];
+  outputs: ModelModality[];
+} {
+  const [inputPart, outputPart] = modelType
+    .split('->')
+    .map((part) => part.trim());
+
+  return {
+    inputs: extractModalities(inputPart || modelType),
+    outputs: outputPart ? extractModalities(outputPart) : [],
+  };
+}
+
+function ModelTypeIcons({ modelType }: { modelType: string }) {
+  const { inputs, outputs } = getModelTypeParts(modelType);
+
+  const renderIcon = (modality: ModelModality, index: number) => {
+    const props = {
+      className: 'h-3 w-3 shrink-0',
+      'aria-hidden': true as const,
+    };
+
+    switch (modality) {
+      case 'image':
+        return <ImageIcon key={`${modality}-${index}`} {...props} />;
+      case 'file':
+        return <FileText key={`${modality}-${index}`} {...props} />;
+      case 'audio':
+        return <AudioLines key={`${modality}-${index}`} {...props} />;
+      case 'video':
+        return <Video key={`${modality}-${index}`} {...props} />;
+      case 'embedding':
+        return <Waypoints key={`${modality}-${index}`} {...props} />;
+      case 'multimodal':
+        return <Layers3 key={`${modality}-${index}`} {...props} />;
+      case 'text':
+      default:
+        return <Type key={`${modality}-${index}`} {...props} />;
+    }
+  };
+
+  return (
+    <span
+      className='text-muted-foreground inline-flex max-w-full min-w-0 items-center gap-0.5 overflow-hidden'
+      title={modelType}
+      aria-label={modelType}
+    >
+      {inputs.map(renderIcon)}
+      {outputs.length > 0 && (
+        <>
+          <ArrowRight className='h-2.5 w-2.5 shrink-0 opacity-55' aria-hidden />
+          {outputs.map(renderIcon)}
+        </>
+      )}
+      <span className='sr-only'>{modelType}</span>
+    </span>
+  );
+}
+
+export function ModelItemCard({
+  model,
+  displayUnit,
+  usdPerSat,
+  isSelected,
+  hasEffectiveApiKey,
+  hasIndividualSettings,
+  onHoverStart,
+  onHoverEnd,
+  onToggleSelection,
+  onEdit,
+  onOverride,
+  onDisable,
+  onEnable,
+  onDelete,
+}: ModelItemCardProps) {
+  const isDisabled = Boolean(model.soft_deleted);
+  const statusLabel = isDisabled ? 'Disabled' : 'Enabled';
+  const isFreeModel = model.is_free;
+  const statusDotClass = cn(
+    'inline-block h-2.5 w-2.5 shrink-0 rounded-full',
+    isDisabled
+      ? 'bg-muted-foreground/50'
+      : 'bg-emerald-500 shadow-[0_0_0_3px_rgba(16,185,129,0.14)]'
+  );
+  const modelSourceLabel =
+    model.api_key_type === 'remote' ? 'Remote' : 'Database';
+  const keySourceLabel = !hasEffectiveApiKey
+    ? 'No API key'
+    : hasIndividualSettings
+      ? 'Individual key'
+      : 'Group key';
+  const inputPriceLabel = formatUsdAmountForDisplayUnit(
+    model.input_cost,
+    displayUnit,
+    usdPerSat
+  );
+  const outputPriceLabel = formatUsdAmountForDisplayUnit(
+    model.output_cost,
+    displayUnit,
+    usdPerSat
+  );
+  const pricingLabel = isFreeModel
+    ? 'Free'
+    : `Input ${inputPriceLabel} · Output ${outputPriceLabel}`;
+  const renderActionsMenu = (className: string) => (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant='ghost'
+          size='icon-xs'
+          onClick={(event) => event.stopPropagation()}
+          className={className}
+          aria-label={`Model actions for ${model.name}`}
+          title={`Model actions for ${model.name}`}
+        >
+          <MoreVertical className='text-muted-foreground hover:text-foreground h-4 w-4' />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align='end' className='w-52'>
+        {model.api_key_type !== 'remote' && (
+          <DropdownMenuItem
+            onClick={(event) => {
+              event.stopPropagation();
+              onEdit();
+            }}
+          >
+            <Edit3 className='mr-2 h-4 w-4' />
+            Edit Model
+          </DropdownMenuItem>
+        )}
+        {model.api_key_type === 'remote' && (
+          <DropdownMenuItem
+            onClick={(event) => {
+              event.stopPropagation();
+              onOverride();
+            }}
+          >
+            <Edit3 className='mr-2 h-4 w-4' />
+            Override
+          </DropdownMenuItem>
+        )}
+        <DropdownMenuSeparator />
+        {model.soft_deleted ? (
+          <DropdownMenuItem
+            onClick={(event) => {
+              event.stopPropagation();
+              onEnable();
+            }}
+            className='text-foreground'
+          >
+            <CheckCircle className='mr-2 h-4 w-4' />
+            Enable Model
+          </DropdownMenuItem>
+        ) : (
+          <DropdownMenuItem
+            onClick={(event) => {
+              event.stopPropagation();
+              onDisable();
+            }}
+            className='text-foreground'
+          >
+            <Ban className='mr-2 h-4 w-4' />
+            Disable Model
+          </DropdownMenuItem>
+        )}
+        <DropdownMenuItem
+          onClick={(event) => {
+            event.stopPropagation();
+            onDelete();
+          }}
+          className='text-destructive focus:text-destructive'
+        >
+          <Trash2 className='mr-2 h-4 w-4' />
+          Delete
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+
+  return (
+    <Card
+      className={cn(
+        "after:bg-border/80 relative overflow-hidden rounded-none border-0 bg-transparent py-0 shadow-none ring-0 transition-colors duration-150 after:absolute after:right-3 after:bottom-0 after:left-3 after:h-px after:content-[''] last:after:hidden md:after:hidden",
+        'hover:bg-muted/25',
+        isSelected && 'bg-primary/12',
+        model.soft_deleted && 'bg-muted/20 opacity-80'
+      )}
+      onMouseEnter={onHoverStart}
+      onMouseLeave={onHoverEnd}
+    >
+      <div className='px-2 py-2 md:flex md:items-center md:gap-2 md:py-1'>
+        <div className='hidden md:flex md:items-center'>
+          <Checkbox
+            checked={isSelected}
+            onCheckedChange={onToggleSelection}
+            onClick={(event) => event.stopPropagation()}
+            className='border-border/90 data-checked:ring-primary/40 size-4 flex-shrink-0 data-checked:ring-2'
+          />
+        </div>
+
+        <div className='min-w-0 flex-1 px-0.5 text-left'>
+          <div className='hidden min-w-0 items-center gap-x-3 gap-y-1 md:grid md:grid-cols-[minmax(210px,1.45fr)_112px_96px_120px] lg:grid-cols-[minmax(230px,1.65fr)_128px_96px_120px_minmax(220px,1fr)]'>
+            <div className='min-w-0'>
+              <div
+                className='flex min-w-0 items-center gap-2'
+                title={statusLabel}
+                aria-label={statusLabel}
+              >
+                <span className={statusDotClass} />
+                <h3
+                  className={cn(
+                    'min-w-0 truncate text-sm font-medium',
+                    model.soft_deleted && 'text-muted-foreground'
+                  )}
+                  title={model.name}
+                >
+                  {model.name}
+                </h3>
+                <span className='sr-only'>{statusLabel}</span>
+              </div>
+            </div>
+
+            <span
+              className='hidden min-w-0 overflow-hidden md:flex md:items-center'
+              title={model.modelType}
+            >
+              <ModelTypeIcons modelType={model.modelType} />
+            </span>
+            <span
+              className='text-muted-foreground hidden truncate text-xs md:block'
+              title={modelSourceLabel}
+            >
+              {modelSourceLabel}
+            </span>
+            <span
+              className={cn(
+                'text-muted-foreground hidden truncate text-xs md:block',
+                !hasEffectiveApiKey && 'text-destructive'
+              )}
+              title={keySourceLabel}
+            >
+              {keySourceLabel}
+            </span>
+            <span
+              className='text-muted-foreground hidden truncate text-right text-xs whitespace-nowrap lg:block'
+              title={pricingLabel}
+            >
+              {pricingLabel}
+            </span>
+          </div>
+
+          <div className='grid grid-cols-[16px_minmax(0,1fr)] gap-x-2.5 gap-y-2.5 md:hidden'>
+            <Checkbox
+              checked={isSelected}
+              onCheckedChange={onToggleSelection}
+              onClick={(event) => event.stopPropagation()}
+              className='border-border/90 data-checked:ring-primary/40 mt-0.5 size-4 flex-shrink-0 self-start data-checked:ring-2'
+            />
+            <div className='grid min-w-0 grid-cols-[minmax(0,1fr)_auto] items-start gap-2'>
+              <div
+                className='flex min-w-0 items-center gap-2.5'
+                title={statusLabel}
+                aria-label={statusLabel}
+              >
+                <span className={statusDotClass} />
+                <h3
+                  className={cn(
+                    'line-clamp-2 min-w-0 flex-1 text-[15px] leading-5 font-medium',
+                    model.soft_deleted && 'text-muted-foreground'
+                  )}
+                  title={model.name}
+                >
+                  {model.name}
+                </h3>
+                <span className='sr-only'>{statusLabel}</span>
+              </div>
+              {renderActionsMenu(
+                'hover:bg-muted/50 dark:hover:bg-muted/80 -mr-1 h-7 w-7 shrink-0 self-start'
+              )}
+            </div>
+
+            <div aria-hidden />
+            <div className='text-muted-foreground flex flex-wrap items-center gap-x-2 gap-y-1 text-[12px]'>
+              <span
+                className='text-foreground/80 inline-flex items-center'
+                title={model.modelType}
+              >
+                <ModelTypeIcons modelType={model.modelType} />
+              </span>
+              <span className='text-border/80' aria-hidden>
+                ·
+              </span>
+              <span className='inline-flex items-center'>
+                {modelSourceLabel}
+              </span>
+              <span
+                className={cn(
+                  'inline-flex items-center',
+                  !hasEffectiveApiKey && 'text-destructive'
+                )}
+              >
+                <span className='text-border/80 mr-2' aria-hidden>
+                  ·
+                </span>
+                {keySourceLabel}
+              </span>
+            </div>
+
+            <div aria-hidden />
+            {isFreeModel ? (
+              <div className='text-muted-foreground text-sm font-medium'>
+                Free
+              </div>
+            ) : (
+              <div className='border-border/45 bg-background/20 grid grid-cols-2 overflow-hidden rounded-lg border'>
+                <div className='px-3 py-2.5'>
+                  <div className='text-muted-foreground text-[11px]'>Input</div>
+                  <div className='pt-0.5 text-[15px] font-medium tabular-nums'>
+                    {inputPriceLabel}
+                  </div>
+                </div>
+                <div className='border-border/45 border-l px-3 py-2.5'>
+                  <div className='text-muted-foreground text-[11px]'>
+                    Output
+                  </div>
+                  <div className='pt-0.5 text-[15px] font-medium tabular-nums'>
+                    {outputPriceLabel}
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+
+        <div className='hidden md:block'>
+          {renderActionsMenu(
+            'hover:bg-muted/50 dark:hover:bg-muted/80 h-7 w-7 shrink-0 md:h-6 md:w-6'
+          )}
+        </div>
+      </div>
+    </Card>
+  );
+}