Implement cli commands to configure ai clients

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>