+ {/* Actor Section */}
+
+
+
Actor
+
Current authenticated user information and session details.
+
{JSON.stringify(actor())}
+
+
+ {/* API Keys Section */}
+
+
+
API Keys
+
Manage your API keys for accessing opencode services.
+
Create an API key to access opencode gateway
+
+
setKeyName(e.currentTarget.value)}
+ onKeyPress={(e) => e.key === "Enter" && handleCreateKey()}
+ />
+
+
+
+
-
-
{key.name}
-
{formatKey(key.key)}
-
- Created: {formatDate(key.timeCreated)}
- {key.timeUsed && ` • Last used: ${formatDate(key.timeUsed)}`}
+
+
+
+
+ Create an API key to access opencode gateway
+
+ }
+ >
+ {(key) => (
+
+
+
{key.name}
+
{formatKey(key.key)}
+
+ Created: {formatDate(key.timeCreated)}
+ {key.timeUsed && ` • Last used: ${formatDate(key.timeUsed)}`}
+
+
+
+
+
-
-
-
+ )}
+
+
+
+
+ {/* Balance Section */}
+
+
+
Balance
+
Manage your billing and add credits to your account.
+
+
+ {(() => {
+ const balanceStr = ((billingInfo()?.billing?.balance ?? 0) / 100000000).toFixed(2)
+ return `$${balanceStr === "-0.00" ? "0.00" : balanceStr}`
+ })()}
+
+
+
+
+ {/* Payments Section */}
+
+
+
Payments History
+
Your recent payment transactions.
+
+
+ No payment history yet. Your payments will appear here after your first purchase.
- )}
-
-
+ }
+ >
+ {(payment) => (
+
+ {payment.id}
+ {" | "}
+ ${((payment.amount ?? 0) / 100000000).toFixed(2)}
+ {" | "}
+ {new Date(payment.timeCreated).toLocaleDateString()}
+
+ )}
+
+
Balance
- Manage your billing and add credits to your account.
-
- {(() => {
- const balanceStr = ((billingInfo()?.billing?.balance ?? 0) / 100000000).toFixed(2)
- return `$${balanceStr === "-0.00" ? "0.00" : balanceStr}`
- })()}
-
-
-
- Payments History
- Your recent payment transactions.
- No payments found.}>
- {(payment) => (
-
- {payment.id}
- {" | "}
- ${((payment.amount ?? 0) / 100000000).toFixed(2)}
- {" | "}
- {new Date(payment.timeCreated).toLocaleDateString()}
-
- )}
-
-
- Usage History
- Your recent API usage and costs.
- No usage found.}>
- {(usage) => (
-
- {usage.model}
- {" | "}
- {usage.inputTokens + usage.outputTokens} tokens
- {" | "}
- ${((usage.cost ?? 0) / 100000000).toFixed(4)}
- {" | "}
- {new Date(usage.timeCreated).toLocaleDateString()}
-
- )}
-
+ {/* Usage Section */}
+
+
+
Usage History
+
Your recent API usage and costs.
+
+
+ No API usage yet. Your usage history will appear here after your first API calls.
+
+ {usage.model}
+ {" | "}
+ {usage.inputTokens + usage.outputTokens} tokens
+ {" | "}
+ ${((usage.cost ?? 0) / 100000000).toFixed(4)}
+ {" | "}
+ {new Date(usage.timeCreated).toLocaleDateString()}
+
+ )}
+