feat: openrouter byok support through /connect (#735)

This commit is contained in:
Ari Webb
2026-01-28 18:10:23 -08:00
committed by GitHub
parent 2f203b7e08
commit bbfb56ab84
4 changed files with 347 additions and 25 deletions

View File

@@ -28,7 +28,7 @@ type ViewState =
| { type: "profileSelect"; provider: ByokProvider }
| { type: "options"; provider: ByokProvider; providerId: string };
type ValidationState = "idle" | "validating" | "valid" | "invalid";
type ValidationState = "idle" | "validating" | "valid" | "invalid" | "saving";
interface ProviderSelectorProps {
onCancel: () => void;
@@ -219,6 +219,7 @@ export function ProviderSelector({
// If already validated, save
if (validationState === "valid") {
setValidationState("saving");
try {
await createOrUpdateProvider(
provider.providerType,
@@ -285,6 +286,7 @@ export function ProviderSelector({
// If already validated, save
if (validationState === "valid") {
setValidationState("saving");
try {
await createOrUpdateProvider(
provider.providerType,
@@ -603,11 +605,13 @@ export function ProviderSelector({
const statusText =
validationState === "validating"
? " (validating...)"
: validationState === "valid"
? " (key validated!)"
: validationState === "invalid"
? ` (invalid key${validationError ? `: ${validationError}` : ""})`
: "";
: validationState === "saving"
? " (saving & syncing models...)"
: validationState === "valid"
? " (key validated!)"
: validationState === "invalid"
? ` (invalid key${validationError ? `: ${validationError}` : ""})`
: "";
const statusColor =
validationState === "valid"
@@ -617,9 +621,11 @@ export function ProviderSelector({
: undefined;
const footerText =
validationState === "valid"
? "Enter to save · Esc cancel"
: "Enter to validate · Esc cancel";
validationState === "saving"
? "Saving provider..."
: validationState === "valid"
? "Enter to save · Esc cancel"
: "Enter to validate · Esc cancel";
return (
<>
@@ -632,7 +638,12 @@ export function ProviderSelector({
<Box flexDirection="row">
<Text color={colors.selector.itemHighlighted}>{"> "}</Text>
<Text>{apiKeyInput ? maskApiKey(apiKeyInput) : "(enter key)"}</Text>
<Text color={statusColor} dimColor={validationState === "validating"}>
<Text
color={statusColor}
dimColor={
validationState === "validating" || validationState === "saving"
}
>
{statusText}
</Text>
</Box>
@@ -810,11 +821,13 @@ export function ProviderSelector({
const statusText =
validationState === "validating"
? " (validating...)"
: validationState === "valid"
? " (credentials validated!)"
: validationState === "invalid"
? ` (invalid${validationError ? `: ${validationError}` : ""})`
: "";
: validationState === "saving"
? " (saving & syncing models...)"
: validationState === "valid"
? " (credentials validated!)"
: validationState === "invalid"
? ` (invalid${validationError ? `: ${validationError}` : ""})`
: "";
const statusColor =
validationState === "valid"
@@ -826,11 +839,13 @@ export function ProviderSelector({
const hasAuthMethods = "authMethods" in provider && provider.authMethods;
const escText = hasAuthMethods ? "Esc back" : "Esc cancel";
const footerText =
validationState === "valid"
? `Enter to save · ${escText}`
: allFilled
? `Enter to validate · Tab/↑↓ navigate · ${escText}`
: `Tab/↑↓ navigate · ${escText}`;
validationState === "saving"
? "Saving provider..."
: validationState === "valid"
? `Enter to save · ${escText}`
: allFilled
? `Enter to validate · Tab/↑↓ navigate · ${escText}`
: `Tab/↑↓ navigate · ${escText}`;
// Build title - include auth method name if present
const title = authMethod
@@ -883,7 +898,9 @@ export function ProviderSelector({
<Box marginTop={1}>
<Text
color={statusColor}
dimColor={validationState === "validating"}
dimColor={
validationState === "validating" || validationState === "saving"
}
>
{" "}
{statusText}