show ai gateway resource details in launcher

2026-08-15 08:49:59 +02:00 · 2026-08-11 14:41:07 -04:00
parent e0a66e79bb
commit 98f5e39a7f
18 changed files with 1069 additions and 124 deletions
@@ -0,0 +1,223 @@
+"use client";
+
+import CopyToClipboard from "@app/components/CopyToClipboard";
+import {
+    SettingsSection,
+    SettingsSectionBody,
+    SettingsSectionDescription,
+    SettingsSectionHeader,
+    SettingsSectionTitle,
+    SettingsSubsectionDescription,
+    SettingsSubsectionHeader,
+    SettingsSubsectionTitle
+} from "@app/components/Settings";
+import { Button } from "@app/components/ui/button";
+import { createApiClient, formatAxiosError } from "@app/lib/api";
+import { useEnvContext } from "@app/hooks/useEnvContext";
+import { toast } from "@app/hooks/useToast";
+import { launcherQueries } from "@app/lib/queries";
+import type {
+    GetMyVirtualApiKeyResponse,
+    VirtualApiKeyWithResources
+} from "@server/routers/virtualApiKey/types";
+import { useQuery } from "@tanstack/react-query";
+import type { AxiosResponse } from "axios";
+import { Loader2 } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { useState } from "react";
+
+type LauncherInferenceApiKeysSectionProps = {
+    orgId: string;
+    resourceGuid: string;
+};
+
+function keyPreview(virtualApiKeyId: string, lastChars: string): string {
+    return `vk-${virtualApiKeyId}••••${lastChars}`;
+}
+
+function useRevealSecret(orgId: string, virtualApiKeyId: string) {
+    const t = useTranslations();
+    const api = createApiClient(useEnvContext());
+    const [credential, setCredential] = useState<string | null>(null);
+    const [loading, setLoading] = useState(false);
+
+    const revealSecret = () => {
+        if (credential || loading) {
+            return;
+        }
+
+        setLoading(true);
+        api.get<AxiosResponse<GetMyVirtualApiKeyResponse>>(
+            `/org/${orgId}/my-virtual-api-keys/${virtualApiKeyId}`
+        )
+            .then((res) => {
+                const secret = res.data.data.virtualApiKey.secret;
+                if (secret) {
+                    setCredential(`vk-${virtualApiKeyId}.${secret}`);
+                } else {
+                    toast({
+                        variant: "destructive",
+                        title: t("virtualApiKeysErrorFetchSecret"),
+                        description: t(
+                            "virtualApiKeysErrorFetchSecretDescription"
+                        )
+                    });
+                }
+            })
+            .catch((e) => {
+                toast({
+                    variant: "destructive",
+                    title: t("virtualApiKeysErrorFetchSecret"),
+                    description: formatAxiosError(
+                        e,
+                        t("virtualApiKeysErrorFetchSecretDescription")
+                    )
+                });
+            })
+            .finally(() => {
+                setLoading(false);
+            });
+    };
+
+    return { credential, loading, revealSecret };
+}
+
+function PanelKeySecret({
+    orgId,
+    virtualApiKeyId,
+    lastChars
+}: {
+    orgId: string;
+    virtualApiKeyId: string;
+    lastChars: string;
+}) {
+    const t = useTranslations();
+    const preview = keyPreview(virtualApiKeyId, lastChars);
+    const { credential, loading, revealSecret } = useRevealSecret(
+        orgId,
+        virtualApiKeyId
+    );
+    const displayValue = credential ?? preview;
+
+    return (
+        <div className="flex items-center gap-3 min-w-0">
+            <div className="min-w-0 flex-1">
+                <CopyToClipboard
+                    text={displayValue}
+                    displayText={displayValue}
+                />
+            </div>
+            {!credential ? (
+                <Button
+                    variant="link"
+                    size="sm"
+                    className="shrink-0 px-0 h-auto"
+                    loading={loading}
+                    onClick={revealSecret}
+                >
+                    {t("myVirtualApiKeysRevealSecret")}
+                </Button>
+            ) : null}
+        </div>
+    );
+}
+
+function ManualKeyRow({
+    orgId,
+    keyRow
+}: {
+    orgId: string;
+    keyRow: VirtualApiKeyWithResources;
+}) {
+    const t = useTranslations();
+
+    return (
+        <div className="space-y-1 min-w-0">
+            <p className="font-medium truncate">
+                {keyRow.name || t("myVirtualApiKeysUnnamed")}
+            </p>
+            {keyRow.description ? (
+                <p className="text-sm text-muted-foreground">
+                    {keyRow.description}
+                </p>
+            ) : null}
+            <PanelKeySecret
+                orgId={orgId}
+                virtualApiKeyId={keyRow.virtualApiKeyId}
+                lastChars={keyRow.lastChars}
+            />
+        </div>
+    );
+}
+
+export function LauncherInferenceApiKeysSection({
+    orgId,
+    resourceGuid
+}: LauncherInferenceApiKeysSectionProps) {
+    const t = useTranslations();
+    const { data, isPending, isError } = useQuery(
+        launcherQueries.myVirtualApiKeys(orgId, resourceGuid)
+    );
+
+    return (
+        <SettingsSection>
+            <SettingsSectionHeader>
+                <SettingsSectionTitle>
+                    {t("resourceLauncherApiKeys")}
+                </SettingsSectionTitle>
+                <SettingsSectionDescription>
+                    {t("resourceLauncherApiKeysDescription")}
+                </SettingsSectionDescription>
+            </SettingsSectionHeader>
+            <SettingsSectionBody>
+                {isPending ? (
+                    <div className="flex items-center justify-center py-6 text-muted-foreground">
+                        <Loader2 className="size-5 animate-spin" />
+                    </div>
+                ) : null}
+                {isError ? (
+                    <p className="text-sm text-muted-foreground">
+                        {t("resourceLauncherApiKeysError")}
+                    </p>
+                ) : null}
+                {!isPending && !isError && data ? (
+                    <div className="space-y-4">
+                        <div className="space-y-1 min-w-0">
+                            <p className="font-medium">
+                                {t("resourceLauncherApiKeysIdentity")}
+                            </p>
+                            <PanelKeySecret
+                                orgId={orgId}
+                                virtualApiKeyId={data.userKey.virtualApiKeyId}
+                                lastChars={data.userKey.lastChars}
+                            />
+                        </div>
+                        {data.manualKeys.length > 0 ? (
+                            <div>
+                                <SettingsSubsectionHeader>
+                                    <SettingsSubsectionTitle>
+                                        {t("resourceLauncherApiKeysManual")}
+                                    </SettingsSubsectionTitle>
+                                    <SettingsSubsectionDescription>
+                                        {t(
+                                            "myVirtualApiKeysManualResourceDescription"
+                                        )}
+                                    </SettingsSubsectionDescription>
+                                </SettingsSubsectionHeader>
+                                <div className="space-y-3">
+                                    {data.manualKeys.map((keyRow) => (
+                                        <ManualKeyRow
+                                            key={keyRow.virtualApiKeyId}
+                                            orgId={orgId}
+                                            keyRow={keyRow}
+                                        />
+                                    ))}
+                                </div>
+                            </div>
+                        ) : null}
+                    </div>
+                ) : null}
+            </SettingsSectionBody>
+        </SettingsSection>
+    );
+}