Implement cli commands to configure ai clients

src/components/UserVirtualApiKeys.tsx

@@ -26,6 +26,10 @@ import { formatVirtualApiKeyPreview } from "@app/lib/virtualApiKeyFormat";
 type UserVirtualApiKeysProps = {
     orgId: string;
     initialData: ListMyVirtualApiKeysResponse;
+    /** The resource's niceId, when this page is scoped to a single resource. */
+    resourceNiceId?: string;
+    /** The resource's real access URL, when known; falls back to a placeholder otherwise. */
+    endpoint?: string;
 };
 
 function OwnedKeySecret({
@@ -163,7 +167,9 @@ function ManualKeyRow({
 
 export default function UserVirtualApiKeys({
     orgId,
-    initialData
+    initialData,
+    resourceNiceId,
+    endpoint
 }: UserVirtualApiKeysProps) {
     const t = useTranslations();
     const resourceName = initialData.resourceName;
@@ -217,11 +223,12 @@ export default function UserVirtualApiKeys({
 
                 <AiClientConfigSection
                     layout="wide"
-                    endpoint={t("aiClientConfigEndpointPlaceholder")}
+                    endpoint={endpoint ?? t("aiClientConfigEndpointPlaceholder")}
                     auth={{
                         mode: "keyed",
                         getKeyText: getKeyCopyText
                     }}
+                    resourceNiceId={resourceNiceId}
                 />
             </SettingsContainer>
         </>

src/components/ai-client-config/AiClientConfigCard.tsx

@@ -40,6 +40,7 @@ type AiClientConfigCardProps = {
     keyAuth: AiClientAuthInput;
     description: string;
     iconSrc: { light: string; dark: string };
+    resourceNiceId?: string;
 };
 
 export function AiClientConfigCard({
@@ -48,7 +49,8 @@ export function AiClientConfigCard({
     endpoint,
     keyAuth,
     description,
-    iconSrc
+    iconSrc,
+    resourceNiceId
 }: AiClientConfigCardProps) {
     const t = useTranslations();
     const { theme } = useTheme();
@@ -94,16 +96,23 @@ export function AiClientConfigCard({
 
     const guide = useMemo(() => {
         if (keyAuth.mode === "keyless") {
-            return buildAiClientGuide(clientId, endpoint, { mode: "keyless" });
+            return buildAiClientGuide(
+                clientId,
+                endpoint,
+                { mode: "keyless" },
+                resourceNiceId
+            );
         }
         if (revealedKey === null) {
             return null;
         }
-        return buildAiClientGuide(clientId, endpoint, {
-            mode: "keyed",
-            key: revealedKey
-        });
-    }, [clientId, endpoint, keyAuth.mode, revealedKey]);
+        return buildAiClientGuide(
+            clientId,
+            endpoint,
+            { mode: "keyed", key: revealedKey },
+            resourceNiceId
+        );
+    }, [clientId, endpoint, keyAuth.mode, revealedKey, resourceNiceId]);
 
     const preset =
         guide?.presets.find((p) => p.id === presetId) ?? guide?.presets[0];

src/components/ai-client-config/AiClientConfigSection.tsx

@@ -27,6 +27,12 @@ type AiClientConfigSectionProps = {
      */
     layout?: "wide" | "compact";
     className?: string;
+    /**
+     * The resource's niceId, when known, so the displayed CLI commands can
+     * include `--resource <niceId>` and let `pangolin configure` skip its
+     * own resource picker.
+     */
+    resourceNiceId?: string;
 };
 
 // Each logo file is named for its own color, not the theme it belongs on, so
@@ -54,7 +60,8 @@ export function AiClientConfigSection({
     endpoint,
     auth,
     layout = "compact",
-    className
+    className,
+    resourceNiceId
 }: AiClientConfigSectionProps) {
     const t = useTranslations();
     const isWide = layout === "wide";
@@ -93,6 +100,7 @@ export function AiClientConfigSection({
                                 keyAuth={auth}
                                 description={descriptions[clientId]}
                                 iconSrc={CLIENT_LOGOS[clientId]}
+                                resourceNiceId={resourceNiceId}
                             />
                         ))}
                     </div>

src/components/resource-launcher/LauncherResourcePanel.tsx

@@ -351,6 +351,7 @@ function PublicResourceDetails({
                                 mode: "keyed",
                                 getKeyText: getAiKeyCopyText
                             }}
+                            resourceNiceId={launcherResource.niceId}
                         />
                     ) : null}
                 </>
@@ -428,6 +429,7 @@ function PrivateResourceDetails({
                     <AiClientConfigSection
                         endpoint={launcherResource.accessUrl ?? ""}
                         auth={{ mode: "keyless" }}
+                        resourceNiceId={launcherResource.niceId}
                     />
                 </>
             ) : null}