add child keys details to view

routstr/balance.py

@@ -6,8 +6,9 @@ from typing import Annotated, NoReturn
 
 from fastapi import APIRouter, Depends, Header, HTTPException
 from pydantic import BaseModel
+from sqlmodel import select
 
-from .auth import validate_bearer_key
+from .auth import get_billing_key, validate_bearer_key
 from .core.db import ApiKey, AsyncSession, get_session
 from .core.logging import get_logger
 from .core.settings import settings
@@ -34,10 +35,8 @@ async def get_key_from_header(
 
 
 async def get_balance_info(key: ApiKey, session: AsyncSession) -> dict:
-    from .auth import get_billing_key
-
     billing_key = await get_billing_key(key, session)
-    return {
+    info = {
         "api_key": "sk-" + key.hashed_key,
         "balance": billing_key.balance,
         "reserved": billing_key.reserved_balance,
@@ -50,6 +49,26 @@ async def get_balance_info(key: ApiKey, session: AsyncSession) -> dict:
         "validity_date": key.validity_date,
     }
 
+    if not key.parent_key_hash:
+        # Fetch child keys if this is a parent key
+        statement = select(ApiKey).where(ApiKey.parent_key_hash == key.hashed_key)
+        results = await session.exec(statement)
+        child_keys = results.all()
+        if child_keys:
+            info["child_keys"] = [
+                {
+                    "api_key": "sk-" + ck.hashed_key,
+                    "total_requests": ck.total_requests,
+                    "total_spent": ck.total_spent,
+                    "balance_limit": ck.balance_limit,
+                    "balance_limit_reset": ck.balance_limit_reset,
+                    "validity_date": ck.validity_date,
+                }
+                for ck in child_keys
+            ]
+
+    return info
+
 
 # TODO: remove this endpoint when frontend is updated
 @router.get("/", include_in_schema=False)
@@ -117,8 +136,6 @@ async def topup_wallet_endpoint(
     key: ApiKey = Depends(get_key_from_header),
     session: AsyncSession = Depends(get_session),
 ) -> dict[str, int]:
-    from .auth import get_billing_key
-
     billing_key = await get_billing_key(key, session)
 
     if topup_request is not None:

tests/integration/test_child_keys_api.py

@@ -0,0 +1,98 @@
+import pytest
+from httpx import AsyncClient
+from typing import Any
+from sqlmodel import select
+from routstr.core.db import ApiKey
+
+
+@pytest.mark.integration
+@pytest.mark.asyncio
+async def test_wallet_info_returns_child_keys(
+    integration_client: AsyncClient,
+    authenticated_client: AsyncClient,
+    integration_session: Any,
+) -> None:
+    """Test that GET /v1/wallet/info returns child keys for a parent key"""
+
+    # 1. Get parent info to find its hashed_key
+    response = await authenticated_client.get("/v1/wallet/info")
+    assert response.status_code == 200
+    parent_data = response.json()
+    parent_api_key = parent_data["api_key"]
+
+    # 2. Create child keys for this parent
+    # We need to use the parent's authentication for this
+    child_payload = {"count": 2, "balance_limit": 1000, "balance_limit_reset": "daily"}
+    create_response = await authenticated_client.post(
+        "/v1/wallet/child-key", json=child_payload
+    )
+    assert create_response.status_code == 200
+    create_data = create_response.json()
+    child_keys = create_data["api_keys"]
+    assert len(child_keys) == 2
+
+    # 3. Call /info again and check for child_keys
+    info_response = await authenticated_client.get("/v1/wallet/info")
+    assert info_response.status_code == 200
+    info_data = info_response.json()
+
+    assert "child_keys" in info_data
+    assert len(info_data["child_keys"]) == 2
+
+    # Verify child key details
+    for ck in info_data["child_keys"]:
+        assert ck["api_key"] in child_keys
+        assert ck["balance_limit"] == 1000
+        assert ck["balance_limit_reset"] == "daily"
+        assert "total_spent" in ck
+        assert "total_requests" in ck
+
+
+@pytest.mark.integration
+@pytest.mark.asyncio
+async def test_wallet_info_child_key_no_child_keys(
+    integration_client: AsyncClient,
+    authenticated_client: AsyncClient,
+    integration_session: Any,
+) -> None:
+    """Test that GET /v1/wallet/info for a child key does NOT return child_keys"""
+
+    # 1. Create a child key
+    child_payload = {"count": 1}
+    create_response = await authenticated_client.post(
+        "/v1/wallet/child-key", json=child_payload
+    )
+    assert create_response.status_code == 200
+    child_key = create_response.json()["api_keys"][0]
+
+    # 2. Use the child key to get its info
+    integration_client.headers["Authorization"] = f"Bearer {child_key}"
+    info_response = await integration_client.get("/v1/wallet/info")
+    assert info_response.status_code == 200
+    info_data = info_response.json()
+
+    assert info_data["is_child"] is True
+    assert "child_keys" not in info_data
+
+
+@pytest.mark.integration
+@pytest.mark.asyncio
+async def test_account_info_root_returns_child_keys(
+    authenticated_client: AsyncClient,
+) -> None:
+    """Test that GET / returns child keys for a parent key (root endpoint)"""
+
+    # 1. Create a child key
+    child_payload = {"count": 1}
+    await authenticated_client.post("/v1/wallet/child-key", json=child_payload)
+
+    # 2. Call root endpoint /v1/balance/
+    # Note: routstr/balance.py defines router = APIRouter()
+    # and it is included in balance_router with prefix /v1/balance
+    # The endpoint is @router.get("/")
+    response = await authenticated_client.get("/v1/balance/")
+    assert response.status_code == 200
+    data = response.json()
+
+    assert "child_keys" in data
+    assert len(data["child_keys"]) >= 1

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

@@ -7,19 +7,7 @@ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Separator } from '@/components/ui/separator';
-
-type WalletSnapshot = {
-  apiKey: string;
-  balanceMsats: number;
-  reservedMsats: number;
-};
-
-type RefundReceipt = {
-  token?: string;
-  recipient?: string;
-  sats?: string;
-  msats?: string;
-};
+import type { WalletSnapshot, ChildKeyInfo } from './key-info-details';
 
 interface ApiKeyManagerProps {
   baseUrl: string;
@@ -51,12 +39,28 @@ async function fetchWalletInfo(
     api_key: string;
     balance: number;
     reserved?: number;
+    is_child: boolean;
+    parent_key: string | null;
+    total_requests: number;
+    total_spent: number;
+    balance_limit: number | null;
+    balance_limit_reset: string | null;
+    validity_date: number | null;
+    child_keys?: ChildKeyInfo[];
   };
 
   return {
     apiKey: payload.api_key || apiKey,
     balanceMsats: payload.balance ?? 0,
     reservedMsats: payload.reserved ?? 0,
+    isChild: payload.is_child,
+    parentKey: payload.parent_key,
+    totalRequests: payload.total_requests,
+    totalSpent: payload.total_spent,
+    balanceLimit: payload.balance_limit,
+    balanceLimitReset: payload.balance_limit_reset,
+    validityDate: payload.validity_date,
+    childKeys: payload.child_keys,
   };
 }
 

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

@@ -9,12 +9,7 @@ import { Textarea } from '@/components/ui/textarea';
 import { Input } from '@/components/ui/input';
 import { Separator } from '@/components/ui/separator';
 import { KeyOptions } from '@/components/key-options';
-
-type WalletSnapshot = {
-  apiKey: string;
-  balanceMsats: number;
-  reservedMsats: number;
-};
+import type { WalletSnapshot } from './key-info-details';
 
 type RefundReceipt = {
   token?: string;
@@ -54,12 +49,28 @@ async function fetchWalletInfo(
     api_key: string;
     balance: number;
     reserved?: number;
+    is_child: boolean;
+    parent_key: string | null;
+    total_requests: number;
+    total_spent: number;
+    balance_limit: number | null;
+    balance_limit_reset: string | null;
+    validity_date: number | null;
+    child_keys?: any[];
   };
 
   return {
     apiKey: payload.api_key || apiKey,
     balanceMsats: payload.balance ?? 0,
     reservedMsats: payload.reserved ?? 0,
+    isChild: payload.is_child,
+    parentKey: payload.parent_key,
+    totalRequests: payload.total_requests,
+    totalSpent: payload.total_spent,
+    balanceLimit: payload.balance_limit,
+    balanceLimitReset: payload.balance_limit_reset,
+    validityDate: payload.validity_date,
+    childKeys: payload.child_keys,
   };
 }
 
@@ -147,11 +158,25 @@ export function CashuPaymentWorkflow({
       const payload = (await response.json()) as {
         api_key: string;
         balance: number;
+        is_child: boolean;
+        parent_key: string | null;
+        total_requests: number;
+        total_spent: number;
+        balance_limit: number | null;
+        balance_limit_reset: string | null;
+        validity_date: number | null;
       };
       const snapshot: WalletSnapshot = {
         apiKey: payload.api_key,
         balanceMsats: payload.balance ?? 0,
         reservedMsats: 0,
+        isChild: payload.is_child ?? false,
+        parentKey: payload.parent_key ?? null,
+        totalRequests: payload.total_requests ?? 0,
+        totalSpent: payload.total_spent ?? 0,
+        balanceLimit: payload.balance_limit ?? null,
+        balanceLimitReset: payload.balance_limit_reset ?? null,
+        validityDate: payload.validity_date ?? null,
       };
 
       setApiKeyInput(snapshot.apiKey);

ui/components/landing/cheat-sheet.tsx

@@ -14,26 +14,14 @@ 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';
+import {
+  KeyInfoDetails,
+  type WalletSnapshot,
+  type ChildKeyInfo,
+} from './key-info-details';
 import { ChildKeyCreator } from '@/components/child-key-creator';
 
 type NodeInfo = {
-  name: string;
-  description: string;
-  version: string;
-  npub?: string | null;
-  mints: string[];
-  http_url?: string | null;
-  onion_url?: string | null;
-  child_key_cost_msats?: number;
-};
-
-type WalletSnapshot = {
-  apiKey: string;
-  balanceMsats: number;
-  reservedMsats: number;
-};
-
-type RefundReceipt = {
   token?: string;
   recipient?: string;
   sats?: string;
@@ -364,10 +352,11 @@ export function CheatSheet(): JSX.Element {
         </section>
 
         <Tabs defaultValue='cashu' className='w-full'>
-          <TabsList className='grid w-full grid-cols-4'>
-            <TabsTrigger value='cashu'>Cashu Payments</TabsTrigger>
-            <TabsTrigger value='lightning'>Lightning Payments</TabsTrigger>
+          <TabsList className='grid w-full grid-cols-5'>
+            <TabsTrigger value='cashu'>Cashu</TabsTrigger>
+            <TabsTrigger value='lightning'>Lightning</TabsTrigger>
             <TabsTrigger value='manage'>Manage Keys</TabsTrigger>
+            <TabsTrigger value='details'>Key Details</TabsTrigger>
             <TabsTrigger value='child-keys'>Child Keys</TabsTrigger>
           </TabsList>
 
@@ -426,6 +415,16 @@ export function CheatSheet(): JSX.Element {
             )}
           </TabsContent>
 
+          <TabsContent value='details' className='space-y-4'>
+            <KeyInfoDetails
+              baseUrl={normalizedBaseUrl}
+              apiKey={apiKeyInput}
+              walletInfo={walletInfo}
+              onApiKeyChanged={handleApiKeyChanged}
+              onWalletInfoUpdated={handleWalletInfoUpdated}
+            />
+          </TabsContent>
+
           <TabsContent value='child-keys' className='space-y-4'>
             <ChildKeyCreator
               baseUrl={normalizedBaseUrl}

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

@@ -0,0 +1,431 @@
+'use client';
+
+import { type JSX, useState, useCallback, useEffect } from 'react';
+import {
+  Copy,
+  RefreshCcw,
+  ShieldCheck,
+  History,
+  Users,
+  RotateCcw,
+  KeyRound,
+} from 'lucide-react';
+import { toast } from 'sonner';
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+} from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Input } from '@/components/ui/input';
+import { WalletService } from '@/lib/api/services/wallet';
+
+export type ChildKeyInfo = {
+  api_key: string;
+  total_requests: number;
+  total_spent: number;
+  balance_limit: number | null;
+  balance_limit_reset: string | null;
+  validity_date: number | null;
+};
+
+export type WalletSnapshot = {
+  apiKey: string;
+  balanceMsats: number;
+  reservedMsats: number;
+  isChild: boolean;
+  parentKey: string | null;
+  totalRequests: number;
+  totalSpent: number;
+  balanceLimit: number | null;
+  balanceLimitReset: string | null;
+  validityDate: number | null;
+  childKeys?: ChildKeyInfo[];
+};
+
+interface KeyInfoDetailsProps {
+  baseUrl: string;
+  apiKey?: string;
+  walletInfo?: WalletSnapshot | null;
+  onApiKeyChanged?: (apiKey: string) => void;
+  onWalletInfoUpdated?: (walletInfo: WalletSnapshot | null) => void;
+}
+
+export function KeyInfoDetails({
+  baseUrl,
+  apiKey = '',
+  walletInfo = null,
+  onApiKeyChanged,
+  onWalletInfoUpdated,
+}: KeyInfoDetailsProps): JSX.Element {
+  const [apiKeyInput, setApiKeyInput] = useState(apiKey);
+  const [isRefreshing, setIsRefreshing] = useState(false);
+  const [isResetting, setIsResetting] = useState<string | null>(null);
+
+  // Sync internal state with props if they change
+  useEffect(() => {
+    if (apiKey !== apiKeyInput) {
+      setApiKeyInput(apiKey);
+    }
+  }, [apiKey]);
+
+  const fetchDetails = useCallback(
+    async (keyToFetch: string) => {
+      setIsRefreshing(true);
+      try {
+        const response = await fetch(`${baseUrl}/v1/balance/info`, {
+          headers: { Authorization: `Bearer ${keyToFetch}` },
+        });
+        if (!response.ok) {
+          throw new Error('Failed to fetch key info');
+        }
+        const payload = await response.json();
+        const snapshot: WalletSnapshot = {
+          apiKey: payload.api_key || keyToFetch,
+          balanceMsats: payload.balance ?? 0,
+          reservedMsats: payload.reserved ?? 0,
+          isChild: payload.is_child,
+          parentKey: payload.parent_key,
+          totalRequests: payload.total_requests,
+          totalSpent: payload.total_spent,
+          balanceLimit: payload.balance_limit,
+          balanceLimitReset: payload.balance_limit_reset,
+          validityDate: payload.validity_date,
+          childKeys: payload.child_keys,
+        };
+        onWalletInfoUpdated?.(snapshot);
+        toast.success('Key details synced');
+      } catch (error) {
+        toast.error(
+          error instanceof Error ? error.message : 'Failed to fetch details'
+        );
+      } finally {
+        setIsRefreshing(false);
+      }
+    },
+    [baseUrl, onWalletInfoUpdated]
+  );
+
+  const handleRefresh = async () => {
+    if (!apiKeyInput) return;
+    await fetchDetails(apiKeyInput);
+  };
+
+  const handleKeyChange = (newKey: string) => {
+    setApiKeyInput(newKey);
+    onApiKeyChanged?.(newKey);
+    // Optionally clear info when key changes
+    if (newKey !== apiKey) {
+      onWalletInfoUpdated?.(null);
+    }
+  };
+
+  const handleCopy = (value: string) => {
+    navigator.clipboard.writeText(value);
+    toast.success('Copied to clipboard');
+  };
+
+  const handleResetSpent = async (childKey: string) => {
+    if (!walletInfo || walletInfo.isChild) return;
+
+    setIsResetting(childKey);
+    try {
+      await WalletService.resetChildKeySpent(baseUrl, apiKeyInput, childKey);
+      toast.success('Child key spent reset');
+      await fetchDetails(apiKeyInput);
+    } catch (error) {
+      toast.error(
+        error instanceof Error ? error.message : 'Failed to reset child key'
+      );
+    } finally {
+      setIsResetting(null);
+    }
+  };
+
+  const formatSats = (msats: number) =>
+    new Intl.NumberFormat('en-US').format(Math.floor(msats / 1000));
+  const formatMsats = (msats: number) =>
+    new Intl.NumberFormat('en-US').format(msats);
+  const formatDate = (timestamp: number | null) =>
+    timestamp ? new Date(timestamp * 1000).toLocaleDateString() : 'Never';
+
+  return (
+    <div className='space-y-6'>
+      <Card>
+        <CardHeader className='space-y-1'>
+          <CardTitle className='flex items-center gap-2 text-xl'>
+            <KeyRound className='text-primary h-5 w-5' />
+            Key Information
+          </CardTitle>
+          <CardDescription>
+            Enter an API key to view its balance, consumption, and child keys.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className='flex flex-col gap-2 sm:flex-row'>
+            <Input
+              value={apiKeyInput}
+              onChange={(e) => handleKeyChange(e.target.value)}
+              placeholder='sk-...'
+              className='font-mono text-sm'
+            />
+            <div className='flex gap-2'>
+              <Button
+                variant='outline'
+                size='icon'
+                className='h-10 w-10 shrink-0'
+                onClick={() => handleCopy(apiKeyInput)}
+                disabled={!apiKeyInput}
+              >
+                <Copy className='h-4 w-4' />
+              </Button>
+              <Button
+                variant='secondary'
+                size='sm'
+                className='min-w-[80px] gap-1'
+                onClick={handleRefresh}
+                disabled={isRefreshing || !apiKeyInput}
+              >
+                <RefreshCcw
+                  className={`h-4 w-4 ${isRefreshing ? 'animate-spin' : ''}`}
+                />
+                {isRefreshing ? 'Syncing...' : 'Sync'}
+              </Button>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {walletInfo && (
+        <>
+          <div className='grid gap-4 md:grid-cols-2'>
+            <Card>
+              <CardHeader className='pb-2'>
+                <CardTitle className='flex items-center gap-2 text-lg'>
+                  <ShieldCheck className='text-primary h-5 w-5' />
+                  Status & Identity
+                </CardTitle>
+              </CardHeader>
+              <CardContent className='space-y-4'>
+                <div className='flex items-center justify-between'>
+                  <span className='text-muted-foreground text-sm'>Type</span>
+                  <Badge variant={walletInfo.isChild ? 'secondary' : 'default'}>
+                    {walletInfo.isChild ? 'Child Key' : 'Parent Key'}
+                  </Badge>
+                </div>
+                {walletInfo.parentKey && (
+                  <div className='space-y-1'>
+                    <span className='text-muted-foreground text-xs tracking-wider uppercase'>
+                      Parent Key
+                    </span>
+                    <div className='flex items-center gap-2'>
+                      <code className='bg-muted flex-1 rounded px-2 py-1 font-mono text-xs break-all'>
+                        {walletInfo.parentKey}
+                      </code>
+                      <Button
+                        variant='ghost'
+                        size='icon'
+                        className='h-8 w-8'
+                        onClick={() => handleCopy(walletInfo.parentKey!)}
+                      >
+                        <Copy className='h-4 w-4' />
+                      </Button>
+                    </div>
+                  </div>
+                )}
+                <div className='flex items-center justify-between'>
+                  <span className='text-muted-foreground text-sm'>
+                    Validity
+                  </span>
+                  <span className='text-sm font-medium'>
+                    {formatDate(walletInfo.validityDate)}
+                  </span>
+                </div>
+                <div className='flex items-center justify-between'>
+                  <span className='text-muted-foreground text-sm'>
+                    Spendable Balance
+                  </span>
+                  <span className='text-primary font-mono text-sm font-medium'>
+                    {formatSats(walletInfo.balanceMsats)} sats
+                  </span>
+                </div>
+              </CardContent>
+            </Card>
+
+            <Card>
+              <CardHeader className='pb-2'>
+                <CardTitle className='flex items-center gap-2 text-lg'>
+                  <History className='text-primary h-5 w-5' />
+                  Consumption
+                </CardTitle>
+              </CardHeader>
+              <CardContent className='space-y-4'>
+                <div className='flex items-center justify-between'>
+                  <span className='text-muted-foreground text-sm'>
+                    Total Requests
+                  </span>
+                  <span className='font-mono text-sm font-medium'>
+                    {walletInfo.totalRequests}
+                  </span>
+                </div>
+                <div className='flex items-center justify-between'>
+                  <span className='text-muted-foreground text-sm'>
+                    Total Spent
+                  </span>
+                  <div className='text-right'>
+                    <p className='font-mono text-sm font-medium'>
+                      {formatSats(walletInfo.totalSpent)} sats
+                    </p>
+                    <p className='text-muted-foreground font-mono text-[0.6rem]'>
+                      {formatMsats(walletInfo.totalSpent)} msats
+                    </p>
+                  </div>
+                </div>
+                {walletInfo.balanceLimit !== null && (
+                  <div className='space-y-2'>
+                    <div className='flex items-center justify-between'>
+                      <span className='text-muted-foreground text-sm'>
+                        Spend Limit
+                      </span>
+                      <span className='font-mono text-sm font-medium'>
+                        {formatSats(walletInfo.balanceLimit)} sats
+                      </span>
+                    </div>
+                    {walletInfo.balanceLimitReset && (
+                      <div className='flex items-center justify-between'>
+                        <span className='text-muted-foreground text-sm'>
+                          Reset Policy
+                        </span>
+                        <Badge variant='outline' className='capitalize'>
+                          {walletInfo.balanceLimitReset}
+                        </Badge>
+                      </div>
+                    )}
+                  </div>
+                )}
+              </CardContent>
+            </Card>
+          </div>
+
+          {!walletInfo.isChild &&
+            walletInfo.childKeys &&
+            walletInfo.childKeys.length > 0 && (
+              <Card>
+                <CardHeader>
+                  <CardTitle className='flex items-center gap-2 text-lg'>
+                    <Users className='text-primary h-5 w-5' />
+                    Child Keys ({walletInfo.childKeys.length})
+                  </CardTitle>
+                  <CardDescription>
+                    Secondary keys using this account&apos;s balance
+                  </CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <div className='space-y-4'>
+                    {walletInfo.childKeys.map((ck) => (
+                      <div
+                        key={ck.api_key}
+                        className='space-y-3 rounded-lg border p-4'
+                      >
+                        <div className='flex items-center justify-between gap-4'>
+                          <code className='bg-muted flex-1 rounded px-2 py-1 font-mono text-xs break-all'>
+                            {ck.api_key}
+                          </code>
+                          <div className='flex gap-1'>
+                            <Button
+                              variant='ghost'
+                              size='icon'
+                              className='h-8 w-8'
+                              onClick={() => handleCopy(ck.api_key)}
+                            >
+                              <Copy className='h-4 w-4' />
+                            </Button>
+                            <Button
+                              variant='ghost'
+                              size='icon'
+                              className='text-destructive h-8 w-8'
+                              title='Reset consumption'
+                              disabled={isResetting === ck.api_key}
+                              onClick={() => handleResetSpent(ck.api_key)}
+                            >
+                              {isResetting === ck.api_key ? (
+                                <RefreshCcw className='h-4 w-4 animate-spin' />
+                              ) : (
+                                <RotateCcw className='h-4 w-4' />
+                              )}
+                            </Button>
+                          </div>
+                        </div>
+                        <div className='grid grid-cols-2 gap-4 text-xs sm:grid-cols-5'>
+                          <div>
+                            <p className='text-muted-foreground text-[0.6rem] tracking-wider uppercase'>
+                              Requests
+                            </p>
+                            <p className='font-mono font-medium'>
+                              {ck.total_requests}
+                            </p>
+                          </div>
+                          <div>
+                            <p className='text-muted-foreground text-[0.6rem] tracking-wider uppercase'>
+                              Spent
+                            </p>
+                            <p className='font-mono font-medium'>
+                              {formatSats(ck.total_spent)} sats
+                            </p>
+                          </div>
+                          <div>
+                            <p className='text-muted-foreground text-[0.6rem] tracking-wider uppercase'>
+                              Limit
+                            </p>
+                            <p className='font-mono font-medium'>
+                              {ck.balance_limit
+                                ? `${formatSats(ck.balance_limit)} sats`
+                                : 'None'}
+                            </p>
+                          </div>
+                          <div>
+                            <p className='text-muted-foreground text-[0.6rem] tracking-wider uppercase'>
+                              Policy
+                            </p>
+                            <p className='font-medium capitalize'>
+                              {ck.balance_limit_reset || 'None'}
+                            </p>
+                          </div>
+                          <div>
+                            <p className='text-muted-foreground text-[0.6rem] tracking-wider uppercase'>
+                              Expires
+                            </p>
+                            <p className='font-medium'>
+                              {formatDate(ck.validity_date)}
+                            </p>
+                          </div>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </CardContent>
+              </Card>
+            )}
+
+          <div className='flex justify-center'>
+            <Button
+              variant='ghost'
+              size='sm'
+              onClick={handleRefresh}
+              disabled={isRefreshing}
+              className='text-muted-foreground'
+            >
+              <RefreshCcw
+                className={`mr-2 h-3 w-3 ${isRefreshing ? 'animate-spin' : ''}`}
+              />
+              Last synced: {new Date().toLocaleTimeString()}
+            </Button>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}

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

@@ -11,12 +11,7 @@ import { Input } from '@/components/ui/input';
 import { Textarea } from '@/components/ui/textarea';
 import { Separator } from '@/components/ui/separator';
 import { KeyOptions } from '@/components/key-options';
-
-type WalletSnapshot = {
-  apiKey: string;
-  balanceMsats: number;
-  reservedMsats: number;
-};
+import type { WalletSnapshot } from './key-info-details';
 
 type LightningInvoice = {
   invoice_id: string;
@@ -215,6 +210,13 @@ export function LightningPaymentWorkflow({
             apiKey: status.api_key,
             balanceMsats: status.amount_sats * 1000,
             reservedMsats: 0,
+            isChild: false,
+            parentKey: null,
+            totalRequests: 0,
+            totalSpent: 0,
+            balanceLimit: null,
+            balanceLimitReset: null,
+            validityDate: null,
           };
           onApiKeyCreated?.(status.api_key, walletInfo);
           setCreatedApiKey(status.api_key);
@@ -289,6 +291,13 @@ export function LightningPaymentWorkflow({
             apiKey: status.api_key,
             balanceMsats: status.amount_sats * 1000,
             reservedMsats: 0,
+            isChild: false,
+            parentKey: null,
+            totalRequests: 0,
+            totalSpent: 0,
+            balanceLimit: null,
+            balanceLimitReset: null,
+            validityDate: null,
           };
           onApiKeyCreated?.(status.api_key, walletInfo);
           setTopupApiKeyResult(status.api_key);
@@ -343,6 +352,13 @@ export function LightningPaymentWorkflow({
           apiKey: status.api_key,
           balanceMsats: status.amount_sats * 1000,
           reservedMsats: 0,
+          isChild: false,
+          parentKey: null,
+          totalRequests: 0,
+          totalSpent: 0,
+          balanceLimit: null,
+          balanceLimitReset: null,
+          validityDate: null,
         };
         onApiKeyCreated?.(status.api_key, walletInfo);
         setRecoveredApiKey(status.api_key);