prettier

Improve console logging

migrations/versions/lightning_invoices_table.py

@@ -0,0 +1,39 @@
+"""Add lightning_invoices table
+
+Revision ID: lightning_invoices
+Revises: a1a1a1a1a1a1
+Create Date: 2025-12-10 21:00:00.000000
+"""
+
+import sqlalchemy as sa
+import sqlmodel
+from alembic import op
+
+revision = "lightning_invoices"
+down_revision = "a1a1a1a1a1a1"
+branch_labels = None
+depends_on = None
+
+
+def upgrade() -> None:
+    op.create_table(
+        "lightning_invoices",
+        sa.Column("id", sqlmodel.sql.sqltypes.AutoString(), nullable=False),
+        sa.Column("bolt11", sqlmodel.sql.sqltypes.AutoString(), nullable=False),
+        sa.Column("amount_sats", sa.Integer(), nullable=False),
+        sa.Column("description", sqlmodel.sql.sqltypes.AutoString(), nullable=False),
+        sa.Column("payment_hash", sqlmodel.sql.sqltypes.AutoString(), nullable=False),
+        sa.Column("status", sqlmodel.sql.sqltypes.AutoString(), nullable=False),
+        sa.Column("api_key_hash", sqlmodel.sql.sqltypes.AutoString(), nullable=True),
+        sa.Column("purpose", sqlmodel.sql.sqltypes.AutoString(), nullable=False),
+        sa.Column("created_at", sa.Integer(), nullable=False),
+        sa.Column("expires_at", sa.Integer(), nullable=False),
+        sa.Column("paid_at", sa.Integer(), nullable=True),
+        sa.PrimaryKeyConstraint("id"),
+        sa.UniqueConstraint("bolt11"),
+        sa.UniqueConstraint("payment_hash"),
+    )
+
+
+def downgrade() -> None:
+    op.drop_table("lightning_invoices")

routstr/algorithm.py

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

routstr/balance.py

@@ -10,6 +10,7 @@ from .auth import validate_bearer_key
 from .core.db import ApiKey, AsyncSession, get_session
 from .core.logging import get_logger
 from .core.settings import settings
+from .lightning import lightning_router
 from .wallet import credit_balance, recieve_token, send_to_lnurl, send_token
 
 router = APIRouter()
@@ -238,6 +239,8 @@ async def wallet_catch_all(path: str) -> NoReturn:
     )
 
 
+balance_router.include_router(lightning_router)
 balance_router.include_router(router)
+
 deprecated_wallet_router = APIRouter(prefix="/v1/wallet", include_in_schema=False)
 deprecated_wallet_router.include_router(router)

routstr/core/db.py

@@ -1,4 +1,5 @@
 import os
+import time
 from contextlib import asynccontextmanager
 from typing import AsyncGenerator
 
@@ -71,6 +72,28 @@ class ModelRow(SQLModel, table=True):  # type: ignore
     upstream_provider: "UpstreamProviderRow" = Relationship(back_populates="models")
 
 
+class LightningInvoice(SQLModel, table=True):  # type: ignore
+    __tablename__ = "lightning_invoices"
+
+    id: str = Field(primary_key=True, description="Unique invoice identifier")
+    bolt11: str = Field(description="BOLT11 invoice string", unique=True)
+    amount_sats: int = Field(description="Amount in satoshis")
+    description: str = Field(description="Invoice description")
+    payment_hash: str = Field(description="Payment hash for tracking", unique=True)
+    status: str = Field(
+        default="pending", description="pending, paid, expired, cancelled"
+    )
+    api_key_hash: str | None = Field(
+        default=None, description="Associated API key hash for topup operations"
+    )
+    purpose: str = Field(description="create or topup")
+    created_at: int = Field(
+        default_factory=lambda: int(time.time()), description="Unix timestamp"
+    )
+    expires_at: int = Field(description="Unix timestamp when invoice expires")
+    paid_at: int | None = Field(default=None, description="Unix timestamp when paid")
+
+
 class UpstreamProviderRow(SQLModel, table=True):  # type: ignore
     __tablename__ = "upstream_providers"
     id: int | None = Field(default=None, primary_key=True)
@@ -126,8 +149,6 @@ def run_migrations() -> None:
     import pathlib
 
     try:
-        logger.info("Starting database migrations")
-
         # Get the path to the alembic.ini file
         project_root = pathlib.Path(__file__).resolve().parents[2]
         alembic_ini_path = project_root / "alembic.ini"
@@ -144,7 +165,6 @@ def run_migrations() -> None:
         alembic_cfg.set_main_option("sqlalchemy.url", DATABASE_URL)
 
         # Run migrations to the latest revision
-        logger.info("Running migrations to latest revision")
         command.upgrade(alembic_cfg, "head")
 
         logger.info("Database migrations completed successfully")

routstr/core/logging.py

@@ -338,6 +338,11 @@ def setup_logging() -> None:
                 "handlers": ["console"] if console_enabled else [],
                 "propagate": False,
             },
+            "openai": {
+                "level": "WARNING",
+                "handlers": ["console"] if console_enabled else [],
+                "propagate": False,
+            },
             "httpcore": {
                 "level": "WARNING",
                 "handlers": ["console"] if console_enabled else [],
@@ -360,6 +365,11 @@ def setup_logging() -> None:
             },
             "watchfiles.main": {"level": "WARNING", "handlers": [], "propagate": False},
             "aiosqlite": {"level": "ERROR", "handlers": [], "propagate": False},
+            "alembic": {
+                "level": "WARNING",
+                "handlers": ["console"] if console_enabled else [],
+                "propagate": False,
+            },
         },
         "root": {
             "level": log_level,

routstr/core/main.py

@@ -54,9 +54,6 @@ async def lifespan(_: FastAPI) -> AsyncGenerator[None, None]:
 
     try:
         # Run database migrations on startup
-        # This ensures the database schema is always up-to-date in production
-        # Migrations are idempotent - running them multiple times is safe
-        logger.info("Running database migrations")
         run_migrations()
 
         # Initialize database connection pools
@@ -104,6 +101,9 @@ async def lifespan(_: FastAPI) -> AsyncGenerator[None, None]:
 
         yield
 
+    except asyncio.CancelledError:
+        # Expected during shutdown
+        pass
     except Exception as e:
         logger.error(
             "Application startup failed",

routstr/lightning.py

@@ -0,0 +1,270 @@
+import hashlib
+import secrets
+import time
+
+from fastapi import APIRouter, Depends, HTTPException
+from pydantic import BaseModel, Field
+from sqlmodel import select
+from sqlmodel.ext.asyncio.session import AsyncSession
+
+from .core.db import ApiKey, LightningInvoice, get_session
+from .core.logging import get_logger
+from .core.settings import settings
+from .wallet import get_wallet
+
+logger = get_logger(__name__)
+
+lightning_router = APIRouter(prefix="/lightning")
+
+
+class InvoiceCreateRequest(BaseModel):
+    amount_sats: int = Field(gt=0, le=1_000_000, description="Amount in satoshis")
+    purpose: str = Field(description="create or topup", pattern="^(create|topup)$")
+    api_key: str | None = Field(
+        default=None, description="Required for topup operations"
+    )
+
+
+class InvoiceCreateResponse(BaseModel):
+    invoice_id: str
+    bolt11: str
+    amount_sats: int
+    expires_at: int
+    payment_hash: str
+
+
+class InvoiceStatusResponse(BaseModel):
+    status: str
+    api_key: str | None = None
+    amount_sats: int
+    paid_at: int | None = None
+    created_at: int
+    expires_at: int
+
+
+class InvoiceRecoverRequest(BaseModel):
+    bolt11: str = Field(description="BOLT11 invoice string")
+
+
+async def generate_lightning_invoice(
+    amount_sats: int, description: str
+) -> tuple[str, str]:
+    wallet = await get_wallet(settings.primary_mint, "sat")
+    quote = await wallet.request_mint(amount_sats)
+    return quote.request, quote.quote
+
+
+def generate_invoice_id() -> str:
+    return secrets.token_urlsafe(16)
+
+
+@lightning_router.post("/invoice", response_model=InvoiceCreateResponse)
+async def create_invoice(
+    request: InvoiceCreateRequest,
+    session: AsyncSession = Depends(get_session),
+) -> InvoiceCreateResponse:
+    if request.purpose == "topup" and not request.api_key:
+        raise HTTPException(
+            status_code=400, detail="api_key is required for topup operations"
+        )
+
+    if request.purpose == "topup" and request.api_key:
+        if not request.api_key.startswith("sk-"):
+            raise HTTPException(status_code=400, detail="Invalid API key format")
+
+        api_key = await session.get(ApiKey, request.api_key[3:])
+        if not api_key:
+            raise HTTPException(status_code=404, detail="API key not found")
+
+    try:
+        description = f"Routstr {request.purpose} {request.amount_sats} sats"
+        bolt11, payment_hash = await generate_lightning_invoice(
+            request.amount_sats, description
+        )
+
+        invoice_id = generate_invoice_id()
+        expires_at = int(time.time()) + 3600  # 1 hour expiry
+
+        invoice = LightningInvoice(
+            id=invoice_id,
+            bolt11=bolt11,
+            amount_sats=request.amount_sats,
+            description=description,
+            payment_hash=payment_hash,
+            status="pending",
+            api_key_hash=request.api_key[3:] if request.api_key else None,
+            purpose=request.purpose,
+            expires_at=expires_at,
+        )
+
+        session.add(invoice)
+        await session.commit()
+
+        logger.info(
+            "Lightning invoice created",
+            extra={
+                "invoice_id": invoice_id,
+                "amount_sats": request.amount_sats,
+                "purpose": request.purpose,
+                "expires_at": expires_at,
+            },
+        )
+
+        return InvoiceCreateResponse(
+            invoice_id=invoice_id,
+            bolt11=bolt11,
+            amount_sats=request.amount_sats,
+            expires_at=expires_at,
+            payment_hash=payment_hash,
+        )
+
+    except Exception as e:
+        logger.error(f"Failed to create Lightning invoice: {e}")
+        raise HTTPException(
+            status_code=500, detail="Failed to create Lightning invoice"
+        )
+
+
+@lightning_router.get(
+    "/invoice/{invoice_id}/status", response_model=InvoiceStatusResponse
+)
+async def get_invoice_status(
+    invoice_id: str,
+    session: AsyncSession = Depends(get_session),
+) -> InvoiceStatusResponse:
+    invoice = await session.get(LightningInvoice, invoice_id)
+    if not invoice:
+        raise HTTPException(status_code=404, detail="Invoice not found")
+
+    if invoice.status == "pending" and int(time.time()) > invoice.expires_at:
+        invoice.status = "expired"
+        await session.commit()
+
+    if invoice.status == "pending":
+        await check_invoice_payment(invoice, session)
+
+    api_key = None
+    if invoice.status == "paid" and invoice.purpose == "create":
+        if invoice.api_key_hash:
+            api_key = f"sk-{invoice.api_key_hash}"
+    elif (
+        invoice.status == "paid" and invoice.purpose == "topup" and invoice.api_key_hash
+    ):
+        api_key = f"sk-{invoice.api_key_hash}"
+
+    return InvoiceStatusResponse(
+        status=invoice.status,
+        api_key=api_key,
+        amount_sats=invoice.amount_sats,
+        paid_at=invoice.paid_at,
+        created_at=invoice.created_at,
+        expires_at=invoice.expires_at,
+    )
+
+
+@lightning_router.post("/recover", response_model=InvoiceStatusResponse)
+async def recover_invoice(
+    request: InvoiceRecoverRequest,
+    session: AsyncSession = Depends(get_session),
+) -> InvoiceStatusResponse:
+    result = await session.exec(
+        select(LightningInvoice).where(LightningInvoice.bolt11 == request.bolt11)
+    )
+    invoice = result.first()
+
+    if not invoice:
+        raise HTTPException(status_code=404, detail="Invoice not found")
+
+    if invoice.status == "pending":
+        await check_invoice_payment(invoice, session)
+
+    api_key = None
+    if invoice.status == "paid":
+        if invoice.purpose == "create" and invoice.api_key_hash:
+            api_key = f"sk-{invoice.api_key_hash}"
+        elif invoice.purpose == "topup" and invoice.api_key_hash:
+            api_key = f"sk-{invoice.api_key_hash}"
+
+    return InvoiceStatusResponse(
+        status=invoice.status,
+        api_key=api_key,
+        amount_sats=invoice.amount_sats,
+        paid_at=invoice.paid_at,
+        created_at=invoice.created_at,
+        expires_at=invoice.expires_at,
+    )
+
+
+async def check_invoice_payment(
+    invoice: LightningInvoice, session: AsyncSession
+) -> None:
+    try:
+        wallet = await get_wallet(settings.primary_mint, "sat")
+
+        mint_status = await wallet.get_mint_quote(invoice.payment_hash)
+
+        if mint_status.paid:
+            invoice.status = "paid"
+            invoice.paid_at = int(time.time())
+
+            if invoice.purpose == "create":
+                api_key = await create_api_key_from_invoice(invoice, session)
+                invoice.api_key_hash = api_key.hashed_key
+            elif invoice.purpose == "topup" and invoice.api_key_hash:
+                await topup_api_key_from_invoice(invoice, session)
+
+            await session.commit()
+
+            logger.info(
+                "Lightning invoice paid",
+                extra={
+                    "invoice_id": invoice.id,
+                    "amount_sats": invoice.amount_sats,
+                    "purpose": invoice.purpose,
+                    "api_key_hash": invoice.api_key_hash[:8] + "..."
+                    if invoice.api_key_hash
+                    else None,
+                },
+            )
+
+    except Exception as e:
+        logger.error(f"Failed to check invoice payment: {e}")
+
+
+async def create_api_key_from_invoice(
+    invoice: LightningInvoice, session: AsyncSession
+) -> ApiKey:
+    wallet = await get_wallet(settings.primary_mint, "sat")
+    await wallet.mint(invoice.amount_sats, quote_id=invoice.payment_hash)
+
+    dummy_token = f"invoice-{invoice.id}-{invoice.payment_hash}"
+    hashed_key = hashlib.sha256(dummy_token.encode()).hexdigest()
+
+    api_key = ApiKey(
+        hashed_key=hashed_key,
+        balance=invoice.amount_sats * 1000,  # Convert to msats
+        refund_currency="sat",
+        refund_mint_url=settings.primary_mint,
+    )
+
+    session.add(api_key)
+    await session.flush()
+
+    return api_key
+
+
+async def topup_api_key_from_invoice(
+    invoice: LightningInvoice, session: AsyncSession
+) -> None:
+    wallet = await get_wallet(settings.primary_mint, "sat")
+    await wallet.mint(invoice.amount_sats, quote_id=invoice.payment_hash)
+
+    if not invoice.api_key_hash:
+        raise ValueError("No API key associated with topup invoice")
+
+    api_key = await session.get(ApiKey, invoice.api_key_hash)
+    if not api_key:
+        raise ValueError("Associated API key not found")
+
+    api_key.balance += invoice.amount_sats * 1000  # Convert to msats
+    await session.flush()

routstr/payment/models.py

@@ -2,7 +2,6 @@ import asyncio
 import json
 import random
 from pathlib import Path
-from typing import Final
 from urllib.request import urlopen
 
 import httpx
@@ -20,15 +19,6 @@ logger = get_logger(__name__)
 
 models_router = APIRouter()
 
-DEFAULT_EXCLUDED_MODEL_IDS: Final[set[str]] = {
-    "openrouter/auto",
-    "openrouter/bodybuilder",
-    "google/gemini-2.5-pro-exp-03-25",
-    "opengvlab/internvl3-78b",
-    "openrouter/sonoma-dusk-alpha",
-    "openrouter/sonoma-sky-alpha",
-}
-
 
 class Architecture(BaseModel):
     modality: str
@@ -45,6 +35,8 @@ class Pricing(BaseModel):
     image: float = 0.0
     web_search: float = 0.0
     internal_reasoning: float = 0.0
+    input_cache_read: float = 0.0
+    input_cache_write: float = 0.0
     max_prompt_cost: float = 0.0  # in sats not msats
     max_completion_cost: float = 0.0  # in sats not msats
     max_cost: float = 0.0  # in sats not msats
@@ -76,6 +68,27 @@ class Model(BaseModel):
         return hash(self.id)
 
 
+def _has_valid_pricing(model: dict) -> bool:
+    """Check if model has valid pricing (not free, no negative values)."""
+    pricing = model.get("pricing", {})
+    if not pricing:
+        return False
+
+    try:
+        prompt = float(pricing.get("prompt", 0))
+        completion = float(pricing.get("completion", 0))
+    except (ValueError, TypeError):
+        return False
+
+    if prompt < 0 or completion < 0:
+        return False
+
+    if prompt == 0 and completion == 0:
+        return False
+
+    return True
+
+
 def fetch_openrouter_models(source_filter: str | None = None) -> list[dict]:
     """Fetches model information from OpenRouter API."""
     base_url = "https://openrouter.ai/api/v1"
@@ -97,10 +110,10 @@ def fetch_openrouter_models(source_filter: str | None = None) -> list[dict]:
                     model["id"] = model_id[len(source_prefix) :]
                     model_id = model["id"]
 
-                if (
-                    "(free)" in model.get("name", "")
-                    or model_id in DEFAULT_EXCLUDED_MODEL_IDS
-                ):
+                if "(free)" in model.get("name", ""):
+                    continue
+
+                if not _has_valid_pricing(model):
                     continue
 
                 models_data.append(model)
@@ -134,10 +147,10 @@ async def async_fetch_openrouter_models(source_filter: str | None = None) -> lis
                     model["id"] = model_id[len(source_prefix) :]
                     model_id = model["id"]
 
-                if (
-                    "(free)" in model.get("name", "")
-                    or model_id in DEFAULT_EXCLUDED_MODEL_IDS
-                ):
+                if "(free)" in model.get("name", ""):
+                    continue
+
+                if not _has_valid_pricing(model):
                     continue
 
                 models_data.append(model)
@@ -201,7 +214,22 @@ def load_models() -> list[Model]:
         return []
 
     logger.info(f"Successfully fetched {len(models_data)} models from OpenRouter API")
-    return [Model(**model) for model in models_data]  # type: ignore
+
+    valid_models = []
+    for model_data in models_data:
+        try:
+            model = Model(**model_data)  # type: ignore
+            valid_models.append(model)
+        except Exception as e:
+            model_id = model_data.get("id", "unknown")
+            logger.warning(f"Skipping model {model_id} - validation failed: {e}")
+
+    if len(valid_models) != len(models_data):
+        logger.warning(
+            f"Filtered out {len(models_data) - len(valid_models)} models with incomplete data"
+        )
+
+    return valid_models
 
 
 def _row_to_model(

routstr/payment/price.py

@@ -110,10 +110,6 @@ async def _update_prices() -> None:
         return
     BTC_USD_PRICE = btc_price
     SATS_USD_PRICE = btc_price / 100_000_000
-    logger.info(
-        "Updated BTC/USD price",
-        extra={"btc_usd": btc_price, "sats_usd": SATS_USD_PRICE},
-    )
 
 
 def btc_usd_price() -> float:

routstr/upstream/base.py

@@ -1726,7 +1726,6 @@ class BaseUpstreamProvider:
         Returns:
             List of Model objects with pricing
         """
-        logger.debug(f"Fetching models for {self.provider_type or self.base_url}")
 
         try:
             or_models, provider_models_response = await asyncio.gather(
@@ -1753,18 +1752,9 @@ class BaseUpstreamProvider:
                 else:
                     not_found_models.append(model_id)
 
-            logger.info(
-                "Fetched models for provider",
-                extra={
-                    "provider": self.provider_type or self.base_url,
-                    "found_count": len(found_models),
-                    "not_found_count": len(not_found_models),
-                },
-            )
-
             if not_found_models:
                 logger.debug(
-                    "Models not found in OpenRouter",
+                    f"({len(not_found_models)}/{len(provider_model_ids)}) unmatched models for {self.provider_type or self.base_url}",
                     extra={"not_found_models": not_found_models},
                 )
 
@@ -1832,10 +1822,7 @@ class BaseUpstreamProvider:
                 self._models_cache = models_with_fees
 
             self._models_by_id = {m.id: m for m in self._models_cache}
-            logger.info(
-                f"Refreshed models cache for {self.provider_type or self.base_url}",
-                extra={"model_count": len(models)},
-            )
+
         except Exception as e:
             logger.error(
                 f"Failed to refresh models cache for {self.provider_type or self.base_url}",

routstr/upstream/helpers.py

@@ -193,7 +193,7 @@ async def init_upstreams() -> list[BaseUpstreamProvider]:
             if provider:
                 await provider.refresh_models_cache()
                 upstreams.append(provider)
-                logger.info(
+                logger.debug(
                     f"Initialized {provider_row.provider_type} provider",
                     extra={
                         "base_url": provider_row.base_url,

routstr/upstream/ppqai.py

@@ -102,11 +102,6 @@ class PPQAIUpstreamProvider(BaseUpstreamProvider):
         url = f"{self.base_url}/models"
         headers = {"Authorization": f"Bearer {self.api_key}"}
 
-        logger.debug(
-            "Fetching models from PPQ.AI",
-            extra={"url": url, "has_api_key": bool(self.api_key)},
-        )
-
         try:
             async with httpx.AsyncClient(timeout=30.0) as client:
                 response = await client.get(url, headers=headers)
@@ -114,10 +109,6 @@ class PPQAIUpstreamProvider(BaseUpstreamProvider):
                 data = response.json()
 
                 models_data = data.get("data", [])
-                logger.info(
-                    "Fetched models from PPQ.AI",
-                    extra={"model_count": len(models_data)},
-                )
 
                 or_models = [
                     Model(**model)  # type: ignore
@@ -198,15 +189,6 @@ class PPQAIUpstreamProvider(BaseUpstreamProvider):
 
                 return models
 
-        except httpx.HTTPStatusError as e:
-            logger.error(
-                "HTTP error fetching models from PPQ.AI",
-                extra={
-                    "status_code": e.response.status_code,
-                    "error": str(e),
-                },
-            )
-            return []
         except Exception as e:
             logger.error(
                 "Error fetching models from PPQ.AI",

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

@@ -0,0 +1,284 @@
+'use client';
+
+import { type JSX, useCallback, useState } from 'react';
+import { Copy, RefreshCcw, Trash2 } from 'lucide-react';
+import { toast } from 'sonner';
+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';
+
+type WalletSnapshot = {
+  apiKey: string;
+  balanceMsats: number;
+  reservedMsats: number;
+};
+
+type RefundReceipt = {
+  token?: string;
+  recipient?: string;
+  sats?: string;
+  msats?: string;
+};
+
+interface ApiKeyManagerProps {
+  baseUrl: string;
+  apiKey?: string;
+  walletInfo?: WalletSnapshot | null;
+  onApiKeyChanged?: (apiKey: string) => void;
+  onWalletInfoUpdated?: (walletInfo: WalletSnapshot | null) => void;
+  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;
+  };
+
+  return {
+    apiKey: payload.api_key || apiKey,
+    balanceMsats: payload.balance ?? 0,
+    reservedMsats: payload.reserved ?? 0,
+  };
+}
+
+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 ApiKeyManager({
+  baseUrl,
+  apiKey = '',
+  walletInfo = null,
+  onApiKeyChanged,
+  onWalletInfoUpdated,
+  onRefundComplete,
+}: ApiKeyManagerProps): JSX.Element {
+  const [apiKeyInput, setApiKeyInput] = useState(apiKey);
+  const [isSyncingBalance, setIsSyncingBalance] = useState(false);
+  const [isRefunding, setIsRefunding] = useState(false);
+  const [hasInteractedManage, setHasInteractedManage] = useState(false);
+
+  const handleCopy = useCallback(async (value: string): Promise<void> => {
+    if (!value) {
+      return;
+    }
+    if (typeof navigator === 'undefined' || !navigator.clipboard) {
+      toast.error('Clipboard API unavailable');
+      return;
+    }
+    try {
+      await navigator.clipboard.writeText(value);
+      toast.success('Copied to clipboard');
+    } catch (error) {
+      console.error(error);
+      toast.error('Unable to copy');
+    }
+  }, []);
+
+  const handleSyncBalance = useCallback(async (): Promise<void> => {
+    const activeApiKey = apiKeyInput.trim();
+    if (!activeApiKey) {
+      toast.error('Paste an API key first');
+      return;
+    }
+
+    setIsSyncingBalance(true);
+    try {
+      const snapshot = await fetchWalletInfo(baseUrl, activeApiKey);
+      onWalletInfoUpdated?.(snapshot);
+      toast.success('Balance synced');
+    } catch (error) {
+      console.error(error);
+      toast.error(
+        error instanceof Error ? error.message : 'Failed to sync balance'
+      );
+    } finally {
+      setIsSyncingBalance(false);
+    }
+  }, [apiKeyInput, baseUrl, onWalletInfoUpdated]);
+
+  const handleRefund = useCallback(async (): Promise<void> => {
+    const activeApiKey = apiKeyInput.trim();
+    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 receipt = (await response.json()) as RefundReceipt;
+      onRefundComplete?.(receipt);
+      onWalletInfoUpdated?.(null);
+      setApiKeyInput('');
+      toast.success('Refund completed');
+    } catch (error) {
+      console.error(error);
+      toast.error(error instanceof Error ? error.message : 'Refund failed');
+    } finally {
+      setIsRefunding(false);
+    }
+  }, [apiKeyInput, baseUrl, onRefundComplete, onWalletInfoUpdated]);
+
+  const handleApiKeyChange = useCallback(
+    (newKey: string) => {
+      setApiKeyInput(newKey);
+      onApiKeyChanged?.(newKey);
+      if (newKey !== apiKey) {
+        onWalletInfoUpdated?.(null);
+      }
+    },
+    [apiKey, onApiKeyChanged, onWalletInfoUpdated]
+  );
+
+  const activeApiKey = apiKeyInput.trim();
+  const showManageDetails =
+    hasInteractedManage || Boolean(walletInfo) || activeApiKey.length > 0;
+
+  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'>
+          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'>
+            <span>Manage existing key</span>
+            {walletInfo && (
+              <span className='text-primary'>
+                {formatSats(walletInfo.balanceMsats)} sats
+              </span>
+            )}
+          </header>
+          <div className='flex flex-col gap-2 sm:flex-row'>
+            <Input
+              value={apiKeyInput}
+              onChange={(event) => handleApiKeyChange(event.target.value)}
+              placeholder='sk-...'
+              className='font-mono text-sm'
+              onFocus={() => setHasInteractedManage(true)}
+            />
+            <div className='flex gap-2'>
+              <Button
+                variant='outline'
+                size='icon'
+                className='h-10 w-10'
+                onClick={() => handleCopy(activeApiKey)}
+                disabled={!activeApiKey}
+              >
+                <Copy className='h-4 w-4' />
+              </Button>
+              <Button
+                variant='secondary'
+                size='sm'
+                className='gap-1'
+                onClick={handleSyncBalance}
+                disabled={isSyncingBalance || !activeApiKey}
+              >
+                <RefreshCcw className='h-4 w-4' />
+                Sync
+              </Button>
+            </div>
+          </div>
+
+          {showManageDetails && (
+            <div className='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>
+
+              <Separator />
+
+              <div className='space-y-2'>
+                <header className='text-muted-foreground flex items-center justify-between text-[0.7rem] tracking-wider uppercase'>
+                  <span>Refund remaining balance</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 & Delete Key'}
+                  </Button>
+                  <span className='text-muted-foreground text-xs'>
+                    Burns the key and returns a fresh Cashu token.
+                  </span>
+                </div>
+              </div>
+            </div>
+          )}
+        </section>
+      </CardContent>
+    </Card>
+  );
+}

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

@@ -0,0 +1,452 @@
+'use client';
+
+import { type JSX, useCallback, useState } from 'react';
+import { Copy, KeyRound, RefreshCcw, Trash2 } 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 { Separator } from '@/components/ui/separator';
+
+type WalletSnapshot = {
+  apiKey: string;
+  balanceMsats: number;
+  reservedMsats: number;
+};
+
+type RefundReceipt = {
+  token?: string;
+  recipient?: string;
+  sats?: string;
+  msats?: string;
+};
+
+interface CashuPaymentWorkflowProps {
+  baseUrl: string;
+  apiKey?: string;
+  walletInfo?: WalletSnapshot | null;
+  onApiKeyCreated?: (apiKey: string, walletInfo: WalletSnapshot) => void;
+  onApiKeyChanged?: (apiKey: string) => void;
+  onWalletInfoUpdated?: (walletInfo: WalletSnapshot | null) => void;
+  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;
+  };
+
+  return {
+    apiKey: payload.api_key || apiKey,
+    balanceMsats: payload.balance ?? 0,
+    reservedMsats: payload.reserved ?? 0,
+  };
+}
+
+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,
+  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 [hasInteractedCreate, setHasInteractedCreate] = useState(false);
+  const [hasInteractedManage, setHasInteractedManage] = useState(false);
+  const [hasInteractedTopup, setHasInteractedTopup] = useState(false);
+
+  const activeApiKey = apiKeyInput.trim();
+
+  const handleCopy = useCallback(async (value: string): Promise<void> => {
+    if (!value) {
+      return;
+    }
+    if (typeof navigator === 'undefined' || !navigator.clipboard) {
+      toast.error('Clipboard API unavailable');
+      return;
+    }
+    try {
+      await navigator.clipboard.writeText(value);
+      toast.success('Copied to clipboard');
+    } catch (error) {
+      console.error(error);
+      toast.error('Unable to copy');
+    }
+  }, []);
+
+  const handleCreateKey = useCallback(async (): Promise<void> => {
+    if (!initialToken.trim()) {
+      toast.error('Cashu token required');
+      return;
+    }
+
+    setIsCreatingKey(true);
+
+    try {
+      const params = new URLSearchParams({
+        initial_balance_token: initialToken.trim(),
+      });
+      const response = await fetch(
+        `${baseUrl}/v1/balance/create?${params.toString()}`,
+        {
+          method: 'GET',
+          headers: { 'Content-Type': 'application/json' },
+        }
+      );
+      if (!response.ok) {
+        const errorText = await response.text();
+        throw new Error(errorText || 'Failed to create API key');
+      }
+      const payload = (await response.json()) as {
+        api_key: string;
+        balance: number;
+      };
+      const snapshot: WalletSnapshot = {
+        apiKey: payload.api_key,
+        balanceMsats: payload.balance ?? 0,
+        reservedMsats: 0,
+      };
+
+      setApiKeyInput(snapshot.apiKey);
+      onApiKeyCreated?.(snapshot.apiKey, snapshot);
+      setInitialToken('');
+      toast.success('API key ready');
+    } catch (error) {
+      console.error(error);
+      toast.error(
+        error instanceof Error ? error.message : 'Failed to create API key'
+      );
+    } finally {
+      setIsCreatingKey(false);
+    }
+  }, [initialToken, baseUrl, onApiKeyCreated]);
+
+  const handleSyncBalance = useCallback(async (): Promise<void> => {
+    if (!activeApiKey) {
+      toast.error('Paste an API key first');
+      return;
+    }
+
+    setIsSyncingBalance(true);
+    try {
+      const snapshot = await fetchWalletInfo(baseUrl, activeApiKey);
+      onWalletInfoUpdated?.(snapshot);
+      toast.success('Balance synced');
+    } catch (error) {
+      console.error(error);
+      toast.error(
+        error instanceof Error ? error.message : 'Failed to sync balance'
+      );
+    } finally {
+      setIsSyncingBalance(false);
+    }
+  }, [activeApiKey, baseUrl, onWalletInfoUpdated]);
+
+  const handleTopup = useCallback(async (): Promise<void> => {
+    if (!activeApiKey) {
+      toast.error('Paste an API key first');
+      return;
+    }
+    if (!topupToken.trim()) {
+      toast.error('Cashu token required for top-up');
+      return;
+    }
+
+    setIsTopupLoading(true);
+    try {
+      const response = await fetch(`${baseUrl}/v1/balance/topup`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${activeApiKey}`,
+        },
+        body: JSON.stringify({ cashu_token: topupToken.trim() }),
+      });
+      if (!response.ok) {
+        const errorText = await response.text();
+        throw new Error(errorText || 'Failed to top up');
+      }
+      const payload = (await response.json()) as { msats: number };
+      toast.success(`Added ${formatSats(payload.msats)} sats`);
+      setTopupToken('');
+      const snapshot = await fetchWalletInfo(baseUrl, activeApiKey);
+      onApiKeyCreated?.(snapshot.apiKey, snapshot);
+    } 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]);
+
+  const handleApiKeyChange = useCallback(
+    (newKey: string) => {
+      setApiKeyInput(newKey);
+      onApiKeyChanged?.(newKey);
+      if (newKey !== apiKey) {
+        onWalletInfoUpdated?.(null);
+      }
+    },
+    [apiKey, onApiKeyChanged, onWalletInfoUpdated]
+  );
+
+  const showCreateDetails =
+    hasInteractedCreate || initialToken.trim().length > 0;
+  const showManageDetails = hasInteractedManage || Boolean(walletInfo);
+  const showTopupDetails = hasInteractedTopup || topupToken.trim().length > 0;
+  const canTopup = Boolean(activeApiKey);
+
+  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'>
+          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'>
+            <span>1 · Create key</span>
+            {showCreateDetails && (
+              <span className='text-primary'>Cashu token detected</span>
+            )}
+          </header>
+          <Textarea
+            value={initialToken}
+            onChange={(event) => setInitialToken(event.target.value)}
+            placeholder='cashuA1...'
+            rows={showCreateDetails ? 4 : 2}
+            className='font-mono text-sm transition-all duration-200'
+            onFocus={() => setHasInteractedCreate(true)}
+          />
+          {showCreateDetails && (
+            <div className='flex flex-wrap gap-2'>
+              <Button
+                onClick={handleCreateKey}
+                disabled={isCreatingKey}
+                className='gap-2'
+              >
+                {isCreatingKey ? 'Creating…' : 'Create API key'}
+              </Button>
+              <span className='text-muted-foreground text-xs'>
+                Redeems instantly and returns <code>sk-</code> key.
+              </span>
+            </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>2 · Manage key</span>
+            {walletInfo && (
+              <span className='text-primary'>
+                {formatSats(walletInfo.balanceMsats)} sats
+              </span>
+            )}
+          </header>
+          <div className='flex flex-col gap-2 sm:flex-row'>
+            <Input
+              value={apiKeyInput}
+              onChange={(event) => handleApiKeyChange(event.target.value)}
+              placeholder='sk-...'
+              className='font-mono text-sm'
+              onFocus={() => setHasInteractedManage(true)}
+            />
+            <div className='flex gap-2'>
+              <Button
+                variant='outline'
+                size='icon'
+                className='h-10 w-10'
+                onClick={() => handleCopy(activeApiKey)}
+                disabled={!activeApiKey}
+              >
+                <Copy className='h-4 w-4' />
+              </Button>
+              <Button
+                variant='secondary'
+                size='sm'
+                className='gap-1'
+                onClick={handleSyncBalance}
+                disabled={isSyncingBalance || !activeApiKey}
+              >
+                <RefreshCcw className='h-4 w-4' />
+                Sync
+              </Button>
+            </div>
+          </div>
+          {showManageDetails && (
+            <div className='grid gap-3 sm:grid-cols-2'>
+              <div className='rounded-lg border p-3'>
+                <p className='text-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>
+          )}
+        </section>
+
+        <Separator />
+
+        <section className='space-y-2'>
+          <header className='text-muted-foreground flex items-center justify-between text-[0.7rem] tracking-wider uppercase'>
+            <span>3 · Top up</span>
+            {showTopupDetails && (
+              <span className={canTopup ? 'text-primary' : 'text-destructive'}>
+                {canTopup ? 'Ready to redeem' : 'Paste API key first'}
+              </span>
+            )}
+          </header>
+          <Textarea
+            value={topupToken}
+            onChange={(event) => setTopupToken(event.target.value)}
+            placeholder='cashuB1...'
+            rows={showTopupDetails ? 3 : 1}
+            className='font-mono text-sm transition-all duration-200'
+            onFocus={() => setHasInteractedTopup(true)}
+            disabled={!canTopup}
+          />
+          {showTopupDetails && (
+            <div className='flex flex-wrap gap-2'>
+              <Button
+                onClick={handleTopup}
+                disabled={isTopupLoading || !canTopup}
+                variant='outline'
+                className='gap-2'
+              >
+                {isTopupLoading ? 'Topping up…' : 'Top up this key'}
+              </Button>
+              <span className='text-muted-foreground text-xs'>
+                {canTopup ? (
+                  <>
+                    Adds balance to the same <code>sk-</code> token.
+                  </>
+                ) : (
+                  'Enter your sk- key above to unlock top ups.'
+                )}
+              </span>
+            </div>
+          )}
+        </section>
+
+        <Separator />
+
+        <section className='space-y-2'>
+          <header className='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,22 +2,18 @@
 
 import { type JSX, useCallback, useEffect, useMemo, useState } from 'react';
 import { useQuery } from '@tanstack/react-query';
-import {
-  Bolt,
-  Copy,
-  KeyRound,
-  RefreshCcw,
-  ShieldCheck,
-  Terminal,
-} from 'lucide-react';
+import { Bolt, Copy, RefreshCcw, ShieldCheck, Terminal } from 'lucide-react';
 import { toast } from 'sonner';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { Textarea } from '@/components/ui/textarea';
 import { Input } from '@/components/ui/input';
 import { Badge } from '@/components/ui/badge';
-import { Separator } from '@/components/ui/separator';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { ConfigurationService } from '@/lib/api/services/configuration';
+import { CashuPaymentWorkflow } from './cashu-payment-workflow';
+import { LightningPaymentWorkflow } from './lightning-payment-workflow';
+import { ApiKeyManager } from './api-key-manager';
 
 type NodeInfo = {
   name: string;
@@ -62,36 +58,6 @@ async function fetchNodeInfo(baseUrl: string): Promise<NodeInfo> {
   };
 }
 
-async function fetchWalletInfo(
-  baseUrl: string,
-  apiKey: string
-): Promise<WalletSnapshot> {
-  const response = await fetch(`${baseUrl}/v1/balance/info`, {
-    cache: 'no-store',
-    headers: {
-      'Content-Type': 'application/json',
-      Authorization: `Bearer ${apiKey}`,
-    },
-  });
-
-  if (!response.ok) {
-    const errorText = await response.text();
-    throw new Error(errorText || 'Unable to load wallet info');
-  }
-
-  const payload = (await response.json()) as {
-    api_key: string;
-    balance: number;
-    reserved?: number;
-  };
-
-  return {
-    apiKey: payload.api_key || apiKey,
-    balanceMsats: payload.balance ?? 0,
-    reservedMsats: payload.reserved ?? 0,
-  };
-}
-
 function normalizeBaseUrl(url: string): string {
   const trimmed = url.trim();
   if (!trimmed) {
@@ -100,32 +66,15 @@ function normalizeBaseUrl(url: string): string {
   return trimmed.replace(/\/+$/, '');
 }
 
-function formatMsats(msats: number): string {
-  return new Intl.NumberFormat('en-US').format(msats);
-}
-
-function formatSats(msats: number): string {
-  return new Intl.NumberFormat('en-US').format(Math.floor(msats / 1000));
-}
-
 export function CheatSheet(): JSX.Element {
   const [baseUrl, setBaseUrl] = useState(() =>
     typeof window === 'undefined' ? '' : ConfigurationService.getLocalBaseUrl()
   );
-  const [initialToken, setInitialToken] = useState('');
-  const [topupToken, setTopupToken] = useState('');
   const [apiKeyInput, setApiKeyInput] = useState('');
   const [walletInfo, setWalletInfo] = useState<WalletSnapshot | null>(null);
   const [refundReceipt, setRefundReceipt] = useState<RefundReceipt | null>(
     null
   );
-  const [isCreatingKey, setIsCreatingKey] = useState(false);
-  const [isTopupLoading, setIsTopupLoading] = useState(false);
-  const [isRefunding, setIsRefunding] = useState(false);
-  const [isSyncingBalance, setIsSyncingBalance] = useState(false);
-  const [hasInteractedCreate, setHasInteractedCreate] = useState(false);
-  const [hasInteractedManage, setHasInteractedManage] = useState(false);
-  const [hasInteractedTopup, setHasInteractedTopup] = useState(false);
 
   useEffect(() => {
     if (!baseUrl && typeof window !== 'undefined') {
@@ -138,8 +87,6 @@ export function CheatSheet(): JSX.Element {
     [baseUrl]
   );
 
-  const activeApiKey = apiKeyInput.trim();
-
   const {
     data: nodeInfo,
     isLoading: isInfoLoading,
@@ -170,141 +117,28 @@ export function CheatSheet(): JSX.Element {
     }
   }, []);
 
-  const handleCreateKey = useCallback(async (): Promise<void> => {
-    if (!initialToken.trim()) {
-      toast.error('Cashu token required');
-      return;
-    }
-
-    setIsCreatingKey(true);
-    setRefundReceipt(null);
-
-    try {
-      const params = new URLSearchParams({
-        initial_balance_token: initialToken.trim(),
-      });
-      const response = await fetch(
-        `${normalizedBaseUrl}/v1/balance/create?${params.toString()}`,
-        {
-          method: 'GET',
-          headers: { 'Content-Type': 'application/json' },
-        }
-      );
-      if (!response.ok) {
-        const errorText = await response.text();
-        throw new Error(errorText || 'Failed to create API key');
-      }
-      const payload = (await response.json()) as {
-        api_key: string;
-        balance: number;
-      };
-      const snapshot: WalletSnapshot = {
-        apiKey: payload.api_key,
-        balanceMsats: payload.balance ?? 0,
-        reservedMsats: 0,
-      };
-      setApiKeyInput(snapshot.apiKey);
+  const handleApiKeyCreated = useCallback(
+    (apiKey: string, snapshot: WalletSnapshot) => {
+      setApiKeyInput(apiKey);
       setWalletInfo(snapshot);
-      setInitialToken('');
-      toast.success('API key ready');
-    } catch (error) {
-      console.error(error);
-      toast.error(
-        error instanceof Error ? error.message : 'Failed to create API key'
-      );
-    } finally {
-      setIsCreatingKey(false);
-    }
-  }, [initialToken, normalizedBaseUrl]);
+      setRefundReceipt(null);
+    },
+    []
+  );
 
-  const handleSyncBalance = useCallback(async (): Promise<void> => {
-    if (!activeApiKey) {
-      toast.error('Paste an API key first');
-      return;
-    }
+  const handleApiKeyChanged = useCallback((apiKey: string) => {
+    setApiKeyInput(apiKey);
+  }, []);
 
-    setIsSyncingBalance(true);
-    try {
-      const snapshot = await fetchWalletInfo(normalizedBaseUrl, activeApiKey);
-      setWalletInfo(snapshot);
-      toast.success('Balance synced');
-    } catch (error) {
-      console.error(error);
-      toast.error(
-        error instanceof Error ? error.message : 'Failed to sync balance'
-      );
-    } finally {
-      setIsSyncingBalance(false);
-    }
-  }, [activeApiKey, normalizedBaseUrl]);
+  const handleWalletInfoUpdated = useCallback((info: WalletSnapshot | null) => {
+    setWalletInfo(info);
+  }, []);
 
-  const handleTopup = useCallback(async (): Promise<void> => {
-    if (!activeApiKey) {
-      toast.error('Paste an API key first');
-      return;
-    }
-    if (!topupToken.trim()) {
-      toast.error('Cashu token required for top-up');
-      return;
-    }
-
-    setIsTopupLoading(true);
-    setRefundReceipt(null);
-    try {
-      const response = await fetch(`${normalizedBaseUrl}/v1/balance/topup`, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          Authorization: `Bearer ${activeApiKey}`,
-        },
-        body: JSON.stringify({ cashu_token: topupToken.trim() }),
-      });
-      if (!response.ok) {
-        const errorText = await response.text();
-        throw new Error(errorText || 'Failed to top up');
-      }
-      const payload = (await response.json()) as { msats: number };
-      toast.success(`Added ${formatSats(payload.msats)} sats`);
-      setTopupToken('');
-      const snapshot = await fetchWalletInfo(normalizedBaseUrl, activeApiKey);
-      setWalletInfo(snapshot);
-    } catch (error) {
-      console.error(error);
-      toast.error(error instanceof Error ? error.message : 'Top-up failed');
-    } finally {
-      setIsTopupLoading(false);
-    }
-  }, [activeApiKey, normalizedBaseUrl, topupToken]);
-
-  const handleRefund = useCallback(async (): Promise<void> => {
-    if (!activeApiKey) {
-      toast.error('Paste an API key first');
-      return;
-    }
-
-    setIsRefunding(true);
-    try {
-      const response = await fetch(`${normalizedBaseUrl}/v1/balance/refund`, {
-        method: 'POST',
-        headers: {
-          Authorization: `Bearer ${activeApiKey}`,
-        },
-      });
-      if (!response.ok) {
-        const errorText = await response.text();
-        throw new Error(errorText || 'Refund failed');
-      }
-      const payload = (await response.json()) as RefundReceipt;
-      setRefundReceipt(payload);
-      setWalletInfo(null);
-      toast.success('Refund requested');
-    } catch (error) {
-      console.error(error);
-      toast.error(error instanceof Error ? error.message : 'Refund failed');
-    } finally {
-      setIsRefunding(false);
-    }
-  }, [activeApiKey, normalizedBaseUrl]);
+  const handleRefundComplete = useCallback((receipt: RefundReceipt) => {
+    setRefundReceipt(receipt);
+    setWalletInfo(null);
+    setApiKeyInput('');
+  }, []);
 
   const handleRefreshInfo = useCallback(async (): Promise<void> => {
     const result = await refetchNodeInfo();
@@ -316,7 +150,7 @@ export function CheatSheet(): JSX.Element {
   }, [refetchNodeInfo]);
 
   const curlSnippet = useMemo(() => {
-    const keyPreview = activeApiKey || 'YOUR_API_KEY';
+    const keyPreview = apiKeyInput || 'YOUR_API_KEY';
     return [
       `curl -X POST "${normalizedBaseUrl}/v1/chat/completions"`,
       `  -H "Authorization: Bearer ${keyPreview}"`,
@@ -329,14 +163,9 @@ export function CheatSheet(): JSX.Element {
       '    ]',
       "  }'",
     ].join('\n');
-  }, [activeApiKey, normalizedBaseUrl]);
+  }, [apiKeyInput, normalizedBaseUrl]);
 
-  const showCreateDetails =
-    hasInteractedCreate || initialToken.trim().length > 0;
-  const showManageDetails = hasInteractedManage || Boolean(walletInfo);
-  const showTopupDetails = hasInteractedTopup || topupToken.trim().length > 0;
   const refundToken = refundReceipt?.token ?? null;
-  const canTopup = Boolean(activeApiKey);
 
   return (
     <div className='from-background via-background to-muted min-h-screen bg-gradient-to-b'>
@@ -532,218 +361,68 @@ export function CheatSheet(): JSX.Element {
           </Card>
         </section>
 
-        <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'>
-              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'>
-                <span>1 · Create key</span>
-                {showCreateDetails && (
-                  <span className='text-primary'>Cashu token detected</span>
-                )}
-              </header>
-              <Textarea
-                value={initialToken}
-                onChange={(event) => setInitialToken(event.target.value)}
-                placeholder='cashuA1...'
-                rows={showCreateDetails ? 4 : 2}
-                className='font-mono text-sm transition-all duration-200'
-                onFocus={() => setHasInteractedCreate(true)}
-              />
-              {showCreateDetails && (
-                <div className='flex flex-wrap gap-2'>
-                  <Button
-                    onClick={handleCreateKey}
-                    disabled={isCreatingKey}
-                    className='gap-2'
-                  >
-                    {isCreatingKey ? 'Creating…' : 'Create API key'}
-                  </Button>
-                  <span className='text-muted-foreground text-xs'>
-                    Redeems instantly and returns <code>sk-</code> key.
-                  </span>
-                </div>
-              )}
-            </section>
+        <Tabs defaultValue='cashu' className='w-full'>
+          <TabsList className='grid w-full grid-cols-3'>
+            <TabsTrigger value='cashu'>Cashu Payments</TabsTrigger>
+            <TabsTrigger value='lightning'>Lightning Payments</TabsTrigger>
+            <TabsTrigger value='manage'>Manage Keys</TabsTrigger>
+          </TabsList>
 
-            <Separator />
+          <TabsContent value='cashu' className='space-y-4'>
+            <CashuPaymentWorkflow
+              baseUrl={normalizedBaseUrl}
+              onApiKeyCreated={handleApiKeyCreated}
+            />
+          </TabsContent>
 
-            <section className='space-y-2'>
-              <header className='text-muted-foreground flex items-center justify-between text-[0.7rem] tracking-wider uppercase'>
-                <span>2 · Manage key</span>
-                {walletInfo && (
-                  <span className='text-primary'>
-                    {formatSats(walletInfo.balanceMsats)} sats
-                  </span>
-                )}
-              </header>
-              <div className='flex flex-col gap-2 sm:flex-row'>
-                <Input
-                  value={apiKeyInput}
-                  onChange={(event) => {
-                    setApiKeyInput(event.target.value);
-                    setWalletInfo(null);
-                  }}
-                  placeholder='sk-...'
-                  className='font-mono text-sm'
-                  onFocus={() => setHasInteractedManage(true)}
-                />
-                <div className='flex gap-2'>
-                  <Button
-                    variant='outline'
-                    size='icon'
-                    className='h-10 w-10'
-                    onClick={() => handleCopy(activeApiKey)}
-                    disabled={!activeApiKey}
-                  >
-                    <Copy className='h-4 w-4' />
-                  </Button>
-                  <Button
-                    variant='secondary'
-                    size='sm'
-                    className='gap-1'
-                    onClick={handleSyncBalance}
-                    disabled={isSyncingBalance || !activeApiKey}
-                  >
-                    <RefreshCcw className='h-4 w-4' />
-                    Sync
-                  </Button>
-                </div>
-              </div>
-              {showManageDetails && (
-                <div className='grid gap-3 sm:grid-cols-2'>
-                  <div className='rounded-lg border p-3'>
-                    <p className='text-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>
-                    )}
+          <TabsContent value='lightning' className='space-y-4'>
+            <LightningPaymentWorkflow
+              baseUrl={normalizedBaseUrl}
+              onApiKeyCreated={handleApiKeyCreated}
+            />
+          </TabsContent>
+
+          <TabsContent value='manage' className='space-y-4'>
+            <ApiKeyManager
+              baseUrl={normalizedBaseUrl}
+              apiKey={apiKeyInput}
+              walletInfo={walletInfo}
+              onApiKeyChanged={handleApiKeyChanged}
+              onWalletInfoUpdated={handleWalletInfoUpdated}
+              onRefundComplete={handleRefundComplete}
+            />
+
+            {refundToken && (
+              <Card>
+                <CardHeader>
+                  <CardTitle className='text-lg'>Refund Complete</CardTitle>
+                </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'>
+                      <span>Cashu refund token</span>
+                      <Button
+                        variant='outline'
+                        size='sm'
+                        className='gap-1 text-xs'
+                        onClick={() => handleCopy(refundToken)}
+                      >
+                        <Copy className='h-3 w-3' />
+                        Copy
+                      </Button>
+                    </div>
+                    <Textarea
+                      value={refundToken}
+                      readOnly
+                      rows={4}
+                      className='font-mono text-xs'
+                    />
                   </div>
-                  <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>
-              )}
-            </section>
-
-            <Separator />
-
-            <section className='space-y-2'>
-              <header className='text-muted-foreground flex items-center justify-between text-[0.7rem] tracking-wider uppercase'>
-                <span>3 · Top up</span>
-                {showTopupDetails && (
-                  <span
-                    className={canTopup ? 'text-primary' : 'text-destructive'}
-                  >
-                    {canTopup ? 'Ready to redeem' : 'Paste API key first'}
-                  </span>
-                )}
-              </header>
-              <Textarea
-                value={topupToken}
-                onChange={(event) => setTopupToken(event.target.value)}
-                placeholder='cashuB1...'
-                rows={showTopupDetails ? 3 : 1}
-                className='font-mono text-sm transition-all duration-200'
-                onFocus={() => setHasInteractedTopup(true)}
-                disabled={!canTopup}
-              />
-              {showTopupDetails && (
-                <div className='flex flex-wrap gap-2'>
-                  <Button
-                    onClick={handleTopup}
-                    disabled={isTopupLoading || !canTopup}
-                    variant='outline'
-                    className='gap-2'
-                  >
-                    {isTopupLoading ? 'Topping up…' : 'Top up this key'}
-                  </Button>
-                  <span className='text-muted-foreground text-xs'>
-                    {canTopup ? (
-                      <>
-                        Adds balance to the same <code>sk-</code> token.
-                      </>
-                    ) : (
-                      'Enter your sk- key above to unlock top ups.'
-                    )}
-                  </span>
-                </div>
-              )}
-            </section>
-
-            <Separator />
-
-            <section className='space-y-2'>
-              <header className='text-muted-foreground flex items-center justify-between text-[0.7rem] tracking-wider uppercase'>
-                <span>4 · Refund</span>
-                {refundReceipt && <span className='text-primary'>Done</span>}
-              </header>
-              <div className='flex flex-wrap gap-2'>
-                <Button
-                  onClick={handleRefund}
-                  disabled={isRefunding}
-                  variant='destructive'
-                  className='gap-2'
-                >
-                  {isRefunding ? 'Processing…' : 'Refund remaining balance'}
-                </Button>
-                <span className='text-muted-foreground text-xs'>
-                  Burns the key and returns a fresh Cashu token.
-                </span>
-              </div>
-              {refundToken && (
-                <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'>
-                    <span>Cashu refund token</span>
-                    <Button
-                      variant='outline'
-                      size='sm'
-                      className='gap-1 text-xs'
-                      onClick={() => handleCopy(refundToken)}
-                    >
-                      <Copy className='h-3 w-3' />
-                      Copy
-                    </Button>
-                  </div>
-                  <Textarea
-                    value={refundToken}
-                    readOnly
-                    rows={4}
-                    className='font-mono text-xs'
-                  />
-                </div>
-              )}
-            </section>
-          </CardContent>
-        </Card>
+                </CardContent>
+              </Card>
+            )}
+          </TabsContent>
+        </Tabs>
       </main>
     </div>
   );

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

@@ -0,0 +1,685 @@
+'use client';
+
+import { type JSX, useCallback, useState } from 'react';
+import Image from 'next/image';
+import { Copy, Zap, CheckCircle, Loader2 } from 'lucide-react';
+import { toast } from 'sonner';
+import QRCode from 'qrcode';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import { Separator } from '@/components/ui/separator';
+
+type WalletSnapshot = {
+  apiKey: string;
+  balanceMsats: number;
+  reservedMsats: number;
+};
+
+type LightningInvoice = {
+  invoice_id: string;
+  bolt11: string;
+  amount_sats: number;
+  expires_at: number;
+  payment_hash: string;
+};
+
+type InvoiceStatus = {
+  status: string;
+  api_key?: string;
+  amount_sats: number;
+  paid_at?: number;
+  created_at: number;
+  expires_at: number;
+};
+
+interface LightningPaymentWorkflowProps {
+  baseUrl: string;
+  onApiKeyCreated?: (apiKey: string, walletInfo: WalletSnapshot) => void;
+}
+
+function formatSats(msats: number): string {
+  return new Intl.NumberFormat('en-US').format(Math.floor(msats / 1000));
+}
+
+async function generateQRCodeSVG(text: string): Promise<string> {
+  try {
+    return await QRCode.toDataURL(text, {
+      type: 'image/png',
+      width: 200,
+      margin: 1,
+      color: {
+        dark: '#000000',
+        light: '#FFFFFF',
+      },
+    });
+  } catch (error) {
+    console.error('Failed to generate QR code:', error);
+    return '';
+  }
+}
+
+export function LightningPaymentWorkflow({
+  baseUrl,
+  onApiKeyCreated,
+}: LightningPaymentWorkflowProps): JSX.Element {
+  const [createAmount, setCreateAmount] = useState<string>('');
+  const [topupAmount, setTopupAmount] = useState<string>('');
+  const [topupApiKey, setTopupApiKey] = useState<string>('');
+  const [recoverInvoice, setRecoverInvoice] = useState<string>('');
+
+  const [createInvoice, setCreateInvoice] = useState<LightningInvoice | null>(
+    null
+  );
+  const [topupInvoice, setTopupInvoice] = useState<LightningInvoice | null>(
+    null
+  );
+
+  const [createQRCode, setCreateQRCode] = useState<string>('');
+  const [topupQRCode, setTopupQRCode] = useState<string>('');
+
+  const [createdApiKey, setCreatedApiKey] = useState<string>('');
+  const [topupApiKeyResult, setTopupApiKeyResult] = useState<string>('');
+  const [recoveredApiKey, setRecoveredApiKey] = useState<string>('');
+  const [isWaitingPayment, setIsWaitingPayment] = useState(false);
+  const [isWaitingTopupPayment, setIsWaitingTopupPayment] = useState(false);
+
+  const [isCreating, setIsCreating] = useState(false);
+  const [isTopupping, setIsTopupping] = useState(false);
+  const [isRecovering, setIsRecovering] = useState(false);
+
+  const [hasInteractedCreate, setHasInteractedCreate] = useState(false);
+  const [hasInteractedTopup, setHasInteractedTopup] = useState(false);
+  const [hasInteractedRecover, setHasInteractedRecover] = useState(false);
+
+  const handleCopy = useCallback(async (value: string): Promise<void> => {
+    if (!value) return;
+
+    if (typeof navigator === 'undefined' || !navigator.clipboard) {
+      toast.error('Clipboard API unavailable');
+      return;
+    }
+
+    try {
+      await navigator.clipboard.writeText(value);
+      toast.success('Copied to clipboard');
+    } catch (error) {
+      console.error(error);
+      toast.error('Unable to copy');
+    }
+  }, []);
+
+  const pollInvoiceStatus = useCallback(
+    async (invoiceId: string, onPaid: (status: InvoiceStatus) => void) => {
+      let attempts = 0;
+      const maxAttempts = 60; // 5 minutes with 5 second intervals
+
+      const poll = async () => {
+        try {
+          const response = await fetch(
+            `${baseUrl}/v1/balance/lightning/invoice/${invoiceId}/status`
+          );
+          if (!response.ok) {
+            throw new Error('Failed to check invoice status');
+          }
+
+          const status: InvoiceStatus = await response.json();
+
+          if (status.status === 'paid' && status.api_key) {
+            onPaid(status);
+            return;
+          }
+
+          if (status.status === 'expired' || status.status === 'cancelled') {
+            toast.error('Invoice expired or cancelled');
+            return;
+          }
+
+          attempts++;
+          if (attempts < maxAttempts) {
+            setTimeout(poll, 5000); // Poll every 5 seconds
+          } else {
+            toast.error('Payment timeout - please check manually');
+          }
+        } catch (error) {
+          console.error('Failed to poll invoice status:', error);
+          attempts++;
+          if (attempts < maxAttempts) {
+            setTimeout(poll, 5000);
+          }
+        }
+      };
+
+      poll();
+    },
+    [baseUrl]
+  );
+
+  const handleCreateInvoice = useCallback(async (): Promise<void> => {
+    const amount = parseInt(createAmount);
+    if (!amount || amount <= 0) {
+      toast.error('Please enter a valid amount');
+      return;
+    }
+
+    setIsCreating(true);
+
+    try {
+      const response = await fetch(`${baseUrl}/v1/balance/lightning/invoice`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          amount_sats: amount,
+          purpose: 'create',
+        }),
+      });
+
+      if (!response.ok) {
+        const errorText = await response.text();
+        throw new Error(errorText || 'Failed to create invoice');
+      }
+
+      const invoice: LightningInvoice = await response.json();
+      setCreateInvoice(invoice);
+
+      const qrCode = await generateQRCodeSVG(invoice.bolt11);
+      setCreateQRCode(qrCode);
+      setIsWaitingPayment(true);
+
+      toast.success('Lightning invoice created - waiting for payment...');
+
+      pollInvoiceStatus(invoice.invoice_id, (status) => {
+        if (status.api_key) {
+          const walletInfo: WalletSnapshot = {
+            apiKey: status.api_key,
+            balanceMsats: status.amount_sats * 1000,
+            reservedMsats: 0,
+          };
+          onApiKeyCreated?.(status.api_key, walletInfo);
+          setCreatedApiKey(status.api_key);
+          setIsWaitingPayment(false);
+          toast.success('Payment received! API key created.');
+          setCreateInvoice(null);
+          setCreateAmount('');
+          setCreateQRCode('');
+        }
+      });
+    } catch (error) {
+      console.error(error);
+      toast.error(
+        error instanceof Error ? error.message : 'Failed to create invoice'
+      );
+      setIsWaitingPayment(false);
+    } finally {
+      setIsCreating(false);
+    }
+  }, [createAmount, baseUrl, pollInvoiceStatus, onApiKeyCreated]);
+
+  const handleTopupInvoice = useCallback(async (): Promise<void> => {
+    const amount = parseInt(topupAmount);
+    if (!amount || amount <= 0) {
+      toast.error('Please enter a valid amount');
+      return;
+    }
+
+    if (!topupApiKey.trim()) {
+      toast.error('Please enter your API key');
+      return;
+    }
+
+    setIsTopupping(true);
+
+    try {
+      const response = await fetch(`${baseUrl}/v1/balance/lightning/invoice`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          amount_sats: amount,
+          purpose: 'topup',
+          api_key: topupApiKey.trim(),
+        }),
+      });
+
+      if (!response.ok) {
+        const errorText = await response.text();
+        throw new Error(errorText || 'Failed to create topup invoice');
+      }
+
+      const invoice: LightningInvoice = await response.json();
+      setTopupInvoice(invoice);
+
+      const qrCode = await generateQRCodeSVG(invoice.bolt11);
+      setTopupQRCode(qrCode);
+      setIsWaitingTopupPayment(true);
+
+      toast.success('Lightning topup invoice created - waiting for payment...');
+
+      pollInvoiceStatus(invoice.invoice_id, (status) => {
+        if (status.api_key) {
+          const walletInfo: WalletSnapshot = {
+            apiKey: status.api_key,
+            balanceMsats: status.amount_sats * 1000,
+            reservedMsats: 0,
+          };
+          onApiKeyCreated?.(status.api_key, walletInfo);
+          setTopupApiKeyResult(status.api_key);
+          setIsWaitingTopupPayment(false);
+          toast.success(
+            `Payment received! Added ${formatSats(status.amount_sats * 1000)} sats.`
+          );
+          setTopupInvoice(null);
+          setTopupAmount('');
+          setTopupQRCode('');
+        }
+      });
+    } catch (error) {
+      console.error(error);
+      toast.error(
+        error instanceof Error
+          ? error.message
+          : 'Failed to create topup invoice'
+      );
+      setIsWaitingTopupPayment(false);
+    } finally {
+      setIsTopupping(false);
+    }
+  }, [topupAmount, topupApiKey, baseUrl, pollInvoiceStatus, onApiKeyCreated]);
+
+  const handleRecoverInvoice = useCallback(async (): Promise<void> => {
+    if (!recoverInvoice.trim()) {
+      toast.error('Please enter a BOLT11 invoice');
+      return;
+    }
+
+    setIsRecovering(true);
+
+    try {
+      const response = await fetch(`${baseUrl}/v1/balance/lightning/recover`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          bolt11: recoverInvoice.trim(),
+        }),
+      });
+
+      if (!response.ok) {
+        const errorText = await response.text();
+        throw new Error(errorText || 'Invoice not found or not paid');
+      }
+
+      const status: InvoiceStatus = await response.json();
+
+      if (status.status === 'paid' && status.api_key) {
+        const walletInfo: WalletSnapshot = {
+          apiKey: status.api_key,
+          balanceMsats: status.amount_sats * 1000,
+          reservedMsats: 0,
+        };
+        onApiKeyCreated?.(status.api_key, walletInfo);
+        setRecoveredApiKey(status.api_key);
+        toast.success('API key recovered successfully!');
+        setRecoverInvoice('');
+      } else {
+        toast.error(`Invoice status: ${status.status}`);
+      }
+    } catch (error) {
+      console.error(error);
+      toast.error(
+        error instanceof Error ? error.message : 'Failed to recover invoice'
+      );
+    } finally {
+      setIsRecovering(false);
+    }
+  }, [recoverInvoice, baseUrl, onApiKeyCreated]);
+
+  const showCreateDetails =
+    hasInteractedCreate || createAmount.trim().length > 0;
+  const showTopupDetails =
+    hasInteractedTopup ||
+    topupAmount.trim().length > 0 ||
+    topupApiKey.trim().length > 0;
+  const showRecoverDetails =
+    hasInteractedRecover || recoverInvoice.trim().length > 0;
+
+  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'>
+          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'>
+            <span>1 · Create key with Lightning</span>
+            {showCreateDetails && (
+              <span className='text-primary'>Amount specified</span>
+            )}
+          </header>
+          <Input
+            type='number'
+            value={createAmount}
+            onChange={(event) => setCreateAmount(event.target.value)}
+            placeholder='Amount in sats (e.g., 1000)'
+            className='text-sm'
+            onFocus={() => setHasInteractedCreate(true)}
+          />
+          {showCreateDetails && (
+            <div className='space-y-3'>
+              <Button
+                onClick={handleCreateInvoice}
+                disabled={isCreating || !!createInvoice}
+                className='gap-2'
+              >
+                {isCreating
+                  ? 'Creating invoice...'
+                  : 'Create Lightning Invoice'}
+              </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>
+              )}
+
+              {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>
+              )}
+            </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>2 · Top up existing key</span>
+            {showTopupDetails && (
+              <span className='text-primary'>Ready to create invoice</span>
+            )}
+          </header>
+          <div className='space-y-2'>
+            <Input
+              value={topupApiKey}
+              onChange={(event) => setTopupApiKey(event.target.value)}
+              placeholder='Your API key (sk-...)'
+              className='font-mono text-sm'
+              onFocus={() => setHasInteractedTopup(true)}
+            />
+            <Input
+              type='number'
+              value={topupAmount}
+              onChange={(event) => setTopupAmount(event.target.value)}
+              placeholder='Amount to add in sats'
+              className='text-sm'
+              onFocus={() => setHasInteractedTopup(true)}
+            />
+          </div>
+
+          {showTopupDetails && (
+            <div className='space-y-3'>
+              <Button
+                onClick={handleTopupInvoice}
+                disabled={isTopupping || !!topupInvoice}
+                variant='outline'
+                className='gap-2'
+              >
+                {isTopupping ? 'Creating invoice...' : 'Create Topup Invoice'}
+              </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>
+              )}
+
+              {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>
+              )}
+            </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>3 · Recover from invoice</span>
+            {showRecoverDetails && (
+              <span className='text-primary'>Invoice provided</span>
+            )}
+          </header>
+          <Textarea
+            value={recoverInvoice}
+            onChange={(event) => setRecoverInvoice(event.target.value)}
+            placeholder='Paste BOLT11 invoice to recover API key...'
+            rows={showRecoverDetails ? 3 : 1}
+            className='font-mono text-sm transition-all duration-200'
+            onFocus={() => setHasInteractedRecover(true)}
+          />
+          {showRecoverDetails && (
+            <div className='flex flex-wrap gap-2'>
+              <Button
+                onClick={handleRecoverInvoice}
+                disabled={isRecovering}
+                variant='secondary'
+                className='gap-2'
+              >
+                {isRecovering ? 'Recovering...' : 'Recover API Key'}
+              </Button>
+              <span className='text-muted-foreground text-xs'>
+                Recovers API key from a paid Lightning invoice.
+              </span>
+            </div>
+          )}
+
+          {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>
+          )}
+        </section>
+      </CardContent>
+    </Card>
+  );
+}

ui/package-lock.json

@@ -48,6 +48,7 @@
         "lucide-react": "^0.501.0",
         "next": "15.3.1",
         "next-themes": "^0.4.6",
+        "qrcode": "^1.5.4",
         "qrcode.react": "^4.2.0",
         "react": "^19.0.0",
         "react-day-picker": "^9.6.7",
@@ -66,6 +67,7 @@
         "@tailwindcss/postcss": "^4",
         "@tanstack/react-query-devtools": "^5.74.4",
         "@types/node": "^20",
+        "@types/qrcode": "^1.5.6",
         "@types/react": "^19",
         "@types/react-dom": "^19",
         "eslint": "^9.25.0",
@@ -3279,6 +3281,16 @@
         "undici-types": "~6.21.0"
       }
     },
+    "node_modules/@types/qrcode": {
+      "version": "1.5.6",
+      "resolved": "https://registry.npmjs.org/@types/qrcode/-/qrcode-1.5.6.tgz",
+      "integrity": "sha512-te7NQcV2BOvdj2b1hCAHzAoMNuj65kNBMz0KBaxM6c3VGBOhU0dURQKOtH8CFNI/dsKkwlv32p26qYQTWoB5bw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/react": {
       "version": "19.2.2",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.2.tgz",
@@ -3896,11 +3908,19 @@
         "url": "https://github.com/sponsors/epoberezkin"
       }
     },
+    "node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/ansi-styles": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
       "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "color-convert": "^2.0.1"
@@ -4272,6 +4292,15 @@
         "node": ">=6"
       }
     },
+    "node_modules/camelcase": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+      "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/caniuse-lite": {
       "version": "1.0.30001754",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001754.tgz",
@@ -4327,6 +4356,17 @@
       "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==",
       "license": "MIT"
     },
+    "node_modules/cliui": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
+      "integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==",
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.0",
+        "wrap-ansi": "^6.2.0"
+      }
+    },
     "node_modules/clsx": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
@@ -4356,7 +4396,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
       "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "color-name": "~1.1.4"
@@ -4369,7 +4408,6 @@
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/combined-stream": {
@@ -4628,6 +4666,15 @@
         }
       }
     },
+    "node_modules/decamelize": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
+      "integrity": "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/decimal.js-light": {
       "version": "2.5.1",
       "resolved": "https://registry.npmjs.org/decimal.js-light/-/decimal.js-light-2.5.1.tgz",
@@ -4702,6 +4749,12 @@
       "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==",
       "license": "MIT"
     },
+    "node_modules/dijkstrajs": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/dijkstrajs/-/dijkstrajs-1.0.3.tgz",
+      "integrity": "sha512-qiSlmBq9+BCdCA/L46dw8Uy93mloxsPSbwnm5yrKn2vMPiy8KyAskTF6zuV/j5BMsmOGZDPs7KjU+mjb670kfA==",
+      "license": "MIT"
+    },
     "node_modules/doctrine": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
@@ -5695,6 +5748,15 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/get-caller-file": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+      "license": "ISC",
+      "engines": {
+        "node": "6.* || 8.* || >= 10.*"
+      }
+    },
     "node_modules/get-intrinsic": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
@@ -6174,6 +6236,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/is-generator-function": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.1.2.tgz",
@@ -7288,6 +7359,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/p-try": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -7305,7 +7385,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
       "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -7347,6 +7426,15 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/pngjs": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-5.0.0.tgz",
+      "integrity": "sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/possible-typed-array-names": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.1.0.tgz",
@@ -7539,6 +7627,23 @@
         "node": ">=6"
       }
     },
+    "node_modules/qrcode": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/qrcode/-/qrcode-1.5.4.tgz",
+      "integrity": "sha512-1ca71Zgiu6ORjHqFBDpnSMTR2ReToX4l1Au1VFLyVeBTFavzQnv5JxMFr3ukHVKpSrSA2MCk0lNJSykjUfz7Zg==",
+      "license": "MIT",
+      "dependencies": {
+        "dijkstrajs": "^1.0.1",
+        "pngjs": "^5.0.0",
+        "yargs": "^15.3.1"
+      },
+      "bin": {
+        "qrcode": "bin/qrcode"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/qrcode.react": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/qrcode.react/-/qrcode.react-4.2.0.tgz",
@@ -7835,6 +7940,21 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/require-directory": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
+      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/require-main-filename": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
+      "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==",
+      "license": "ISC"
+    },
     "node_modules/resolve": {
       "version": "1.22.11",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.11.tgz",
@@ -7985,6 +8105,12 @@
         "node": ">=10"
       }
     },
+    "node_modules/set-blocking": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
+      "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==",
+      "license": "ISC"
+    },
     "node_modules/set-function-length": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
@@ -8226,6 +8352,26 @@
         "node": ">=10.0.0"
       }
     },
+    "node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/string-width/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "license": "MIT"
+    },
     "node_modules/string.prototype.includes": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/string.prototype.includes/-/string.prototype.includes-2.0.1.tgz",
@@ -8339,6 +8485,18 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/strip-bom": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
@@ -8899,6 +9057,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/which-module": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.1.tgz",
+      "integrity": "sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==",
+      "license": "ISC"
+    },
     "node_modules/which-typed-array": {
       "version": "1.1.19",
       "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.19.tgz",
@@ -8931,6 +9095,113 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/wrap-ansi": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
+      "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/y18n": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
+      "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==",
+      "license": "ISC"
+    },
+    "node_modules/yargs": {
+      "version": "15.4.1",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-15.4.1.tgz",
+      "integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==",
+      "license": "MIT",
+      "dependencies": {
+        "cliui": "^6.0.0",
+        "decamelize": "^1.2.0",
+        "find-up": "^4.1.0",
+        "get-caller-file": "^2.0.1",
+        "require-directory": "^2.1.1",
+        "require-main-filename": "^2.0.0",
+        "set-blocking": "^2.0.0",
+        "string-width": "^4.2.0",
+        "which-module": "^2.0.0",
+        "y18n": "^4.0.0",
+        "yargs-parser": "^18.1.2"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/yargs-parser": {
+      "version": "18.1.3",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz",
+      "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
+      "license": "ISC",
+      "dependencies": {
+        "camelcase": "^5.0.0",
+        "decamelize": "^1.2.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/yargs/node_modules/find-up": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+      "license": "MIT",
+      "dependencies": {
+        "locate-path": "^5.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/yargs/node_modules/locate-path": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+      "license": "MIT",
+      "dependencies": {
+        "p-locate": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/yargs/node_modules/p-limit": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+      "license": "MIT",
+      "dependencies": {
+        "p-try": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/yargs/node_modules/p-locate": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+      "license": "MIT",
+      "dependencies": {
+        "p-limit": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/yocto-queue": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",

ui/package.json

@@ -52,6 +52,7 @@
     "lucide-react": "^0.501.0",
     "next": "15.3.1",
     "next-themes": "^0.4.6",
+    "qrcode": "^1.5.4",
     "qrcode.react": "^4.2.0",
     "react": "^19.0.0",
     "react-day-picker": "^9.6.7",
@@ -70,6 +71,7 @@
     "@tailwindcss/postcss": "^4",
     "@tanstack/react-query-devtools": "^5.74.4",
     "@types/node": "^20",
+    "@types/qrcode": "^1.5.6",
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "eslint": "^9.25.0",