Pass 2 showing the usage commands

messages/en-US.json

@@ -1789,6 +1789,8 @@
     "aiClientConfigTabCli": "Automatic (CLI)",
     "aiClientConfigTabManual": "Manual Configuration",
     "aiClientConfigEndpointPlaceholder": "https://example.resource.url.com",
+    "aiClientConfigRevealError": "Could not load your API key.",
+    "aiClientConfigRevealRetry": "Try again",
     "resourceGeneralAiClientConfigLink": "See how to configure access to this resource in common clients like Claude Code and OpenCode",
     "aiProvidersTitle": "AI Providers",
     "aiProvidersDescription": "Connect model providers for AI workloads in this organization",

src/app/[orgId]/settings/resources/private/[niceId]/general/page.tsx

@@ -74,7 +74,7 @@ export default function PrivateResourceGeneralPage() {
                     {siteResource.mode === "inference" ? (
                         <p className="text-sm pt-1">
                             <Link
-                                href={`/${siteResource.orgId}?query=${encodeURIComponent(siteResource.name)}`}
+                                href={`/${siteResource.orgId}?openResource=${encodeURIComponent(siteResource.niceId)}&openResourceQuery=${encodeURIComponent(siteResource.name)}`}
                                 className="text-primary hover:underline"
                             >
                                 {t("resourceGeneralAiClientConfigLink")}

src/app/[orgId]/settings/resources/public/[niceId]/general/page.tsx

@@ -259,7 +259,7 @@ export default function GeneralForm() {
                         {resource.mode === "inference" ? (
                             <p className="text-sm pt-1">
                                 <Link
-                                    href={`/${resource.orgId}?query=${encodeURIComponent(resource.name)}`}
+                                    href={`/${resource.orgId}?openResource=${encodeURIComponent(resource.niceId)}&openResourceQuery=${encodeURIComponent(resource.name)}`}
                                     className="text-primary hover:underline"
                                 >
                                     {t("resourceGeneralAiClientConfigLink")}

src/components/UserVirtualApiKeys.tsx

@@ -171,10 +171,6 @@ export default function UserVirtualApiKeys({
         orgId,
         initialData.userKey.virtualApiKeyId
     );
-    const keyPreview = formatVirtualApiKeyPreview(
-        initialData.userKey.virtualApiKeyId,
-        initialData.userKey.lastChars
-    );
 
     return (
         <>
@@ -186,15 +182,6 @@ export default function UserVirtualApiKeys({
                     resourceName={resourceName}
                 />
 
-                <AiClientConfigSection
-                    endpoint={t("aiClientConfigEndpointPlaceholder")}
-                    auth={{
-                        mode: "keyed",
-                        keyDisplay: keyPreview,
-                        getKeyText: getKeyCopyText
-                    }}
-                />
-
                 {initialData.manualKeys.length > 0 ? (
                     <SettingsSection>
                         <SettingsSectionHeader>
@@ -227,6 +214,15 @@ export default function UserVirtualApiKeys({
                         </SettingsSectionBody>
                     </SettingsSection>
                 ) : null}
+
+                <AiClientConfigSection
+                    layout="wide"
+                    endpoint={t("aiClientConfigEndpointPlaceholder")}
+                    auth={{
+                        mode: "keyed",
+                        getKeyText: getKeyCopyText
+                    }}
+                />
             </SettingsContainer>
         </>
     );

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

@@ -1,6 +1,7 @@
 "use client";
 
 import { AiConfigCodeBlock } from "@app/components/ai-client-config/AiConfigCodeBlock";
+import { Button } from "@app/components/ui/button";
 import {
     Collapsible,
     CollapsibleContent,
@@ -19,35 +20,80 @@ import {
     TabsList,
     TabsTrigger
 } from "@app/components/ui/tabs";
-import type { AiClientGuide, AiClientPresetId } from "@app/lib/aiClientConfig";
+import type {
+    AiClientAuthInput,
+    AiClientId,
+    AiClientPresetId
+} from "@app/lib/aiClientConfig";
+import { buildAiClientGuide } from "@app/lib/aiClientConfig";
 import { cn } from "@app/lib/cn";
-import { ChevronDown, type LucideIcon } from "lucide-react";
+import { ChevronDown, Loader2, type LucideIcon } from "lucide-react";
 import { useTranslations } from "next-intl";
-import { useState } from "react";
+import { useMemo, useState } from "react";
 
 type AiClientConfigCardProps = {
-    guide: AiClientGuide;
+    clientId: AiClientId;
+    name: string;
+    endpoint: string;
+    keyAuth: AiClientAuthInput;
     description: string;
     icon: LucideIcon;
-    defaultOpen?: boolean;
+    stackBlocks?: boolean;
 };
 
 export function AiClientConfigCard({
-    guide,
+    clientId,
+    name,
+    endpoint,
+    keyAuth,
     description,
     icon: Icon,
-    defaultOpen = false
+    stackBlocks = true
 }: AiClientConfigCardProps) {
     const t = useTranslations();
-    const [open, setOpen] = useState(defaultOpen);
+    const [open, setOpen] = useState(false);
-    const [presetId, setPresetId] = useState<AiClientPresetId>(
+    const [presetId, setPresetId] = useState<AiClientPresetId>("default");
-        guide.presets[0]?.id ?? "default"
+    const [revealedKey, setRevealedKey] = useState<string | null>(null);
-    );
+    const [revealing, setRevealing] = useState(false);
+    const [revealError, setRevealError] = useState(false);
+
+    const reveal = () => {
+        if (keyAuth.mode !== "keyed" || revealedKey !== null || revealing) {
+            return;
+        }
+        setRevealing(true);
+        setRevealError(false);
+        keyAuth
+            .getKeyText()
+            .then(setRevealedKey)
+            .catch(() => setRevealError(true))
+            .finally(() => setRevealing(false));
+    };
+
+    const handleOpenChange = (next: boolean) => {
+        setOpen(next);
+        if (next) {
+            reveal();
+        }
+    };
+
+    const guide = useMemo(() => {
+        if (keyAuth.mode === "keyless") {
+            return buildAiClientGuide(clientId, endpoint, { mode: "keyless" });
+        }
+        if (revealedKey === null) {
+            return null;
+        }
+        return buildAiClientGuide(clientId, endpoint, {
+            mode: "keyed",
+            key: revealedKey
+        });
+    }, [clientId, endpoint, keyAuth.mode, revealedKey]);
 
     const preset =
-        guide.presets.find((p) => p.id === presetId) ?? guide.presets[0];
+        guide?.presets.find((p) => p.id === presetId) ?? guide?.presets[0];
 
-    const manualContent = (
+    const manualContent = guide ? (
         <div className="space-y-4">
             {guide.presets.length > 1 ? (
                 <Select
@@ -68,24 +114,29 @@ export function AiClientConfigCard({
                     </SelectContent>
                 </Select>
             ) : null}
-            <div className="grid gap-4 @lg:grid-cols-2">
+            <div
+                className={cn(
+                    "grid gap-4",
+                    !stackBlocks && "@lg:grid-cols-2"
+                )}
+            >
                 {preset?.blocks.map((block) => (
                     <AiConfigCodeBlock key={block.id} block={block} />
                 ))}
             </div>
         </div>
-    );
+    ) : null;
 
     return (
         <Collapsible
             open={open}
-            onOpenChange={setOpen}
+            onOpenChange={handleOpenChange}
             className="rounded-md border bg-card"
         >
             <CollapsibleTrigger className="flex w-full items-center gap-3 px-4 py-3 text-left cursor-pointer">
                 <Icon className="size-4 shrink-0 text-muted-foreground" />
                 <div className="min-w-0 flex-1">
-                    <p className="font-medium truncate">{guide.name}</p>
+                    <p className="font-medium truncate">{name}</p>
                     <p className="text-xs text-muted-foreground truncate">
                         {description}
                     </p>
@@ -98,40 +149,62 @@ export function AiClientConfigCard({
                 />
             </CollapsibleTrigger>
             <CollapsibleContent className="border-t px-4 py-4">
-                {guide.cli ? (
+                {!guide && revealing ? (
-                    <Tabs defaultValue="cli">
+                    <div className="flex items-center justify-center py-6 text-muted-foreground">
-                        <TabsList>
+                        <Loader2 className="size-5 animate-spin" />
-                            <TabsTrigger value="cli">
+                    </div>
-                                {t("aiClientConfigTabCli")}
+                ) : null}
-                            </TabsTrigger>
+                {!guide && revealError ? (
-                            <TabsTrigger value="manual">
+                    <div className="flex flex-col items-center gap-2 py-6 text-center">
-                                {t("aiClientConfigTabManual")}
+                        <p className="text-sm text-muted-foreground">
-                            </TabsTrigger>
+                            {t("aiClientConfigRevealError")}
-                        </TabsList>
+                        </p>
-                        <TabsContent
+                        <Button variant="outline" size="sm" onClick={reveal}>
-                            value="cli"
+                            {t("aiClientConfigRevealRetry")}
-                            className="grid gap-4 @lg:grid-cols-2 mt-4"
+                        </Button>
-                        >
+                    </div>
-                            <AiConfigCodeBlock block={guide.cli.configure} />
+                ) : null}
-                            <AiConfigCodeBlock block={guide.cli.run} />
+                {guide ? (
-                            {guide.cli.configureWithKey ? (
+                    guide.cli ? (
+                        <Tabs defaultValue="cli">
+                            <TabsList>
+                                <TabsTrigger value="cli">
+                                    {t("aiClientConfigTabCli")}
+                                </TabsTrigger>
+                                <TabsTrigger value="manual">
+                                    {t("aiClientConfigTabManual")}
+                                </TabsTrigger>
+                            </TabsList>
+                            <TabsContent
+                                value="cli"
+                                className={cn(
+                                    "grid gap-4 mt-4",
+                                    !stackBlocks && "@lg:grid-cols-2"
+                                )}
+                            >
                                 <AiConfigCodeBlock
-                                    block={guide.cli.configureWithKey}
+                                    block={guide.cli.configure}
                                 />
-                            ) : null}
+                                <AiConfigCodeBlock block={guide.cli.run} />
-                            {guide.cli.runWithKey ? (
+                                {guide.cli.configureWithKey ? (
-                                <AiConfigCodeBlock
+                                    <AiConfigCodeBlock
-                                    block={guide.cli.runWithKey}
+                                        block={guide.cli.configureWithKey}
-                                />
+                                    />
-                            ) : null}
+                                ) : null}
-                        </TabsContent>
+                                {guide.cli.runWithKey ? (
-                        <TabsContent value="manual" className="mt-4">
+                                    <AiConfigCodeBlock
-                            {manualContent}
+                                        block={guide.cli.runWithKey}
-                        </TabsContent>
+                                    />
-                    </Tabs>
+                                ) : null}
-                ) : (
+                            </TabsContent>
-                    manualContent
+                            <TabsContent value="manual" className="mt-4">
-                )}
+                                {manualContent}
+                            </TabsContent>
+                        </Tabs>
+                    ) : (
+                        manualContent
+                    )
+                ) : null}
             </CollapsibleContent>
         </Collapsible>
     );

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

@@ -8,37 +8,43 @@ import {
     SettingsSectionHeader,
     SettingsSectionTitle
 } from "@app/components/Settings";
-import type { AiClientAuth } from "@app/lib/aiClientConfig";
+import {
-import { buildAiClientGuides } from "@app/lib/aiClientConfig";
+    AI_CLIENT_IDS,
+    AI_CLIENT_NAMES,
+    type AiClientAuthInput
+} from "@app/lib/aiClientConfig";
 import { cn } from "@app/lib/cn";
 import { MousePointerClick, Sparkles, SquareTerminal, TerminalSquare } from "lucide-react";
 import { useTranslations } from "next-intl";
-import { useMemo } from "react";
 
 type AiClientConfigSectionProps = {
     endpoint: string;
-    auth: AiClientAuth;
+    auth: AiClientAuthInput;
+    /**
+     * "wide" lays the client cards out side by side and allows a card's
+     * code blocks to sit side by side once there's room (e.g. the Keys
+     * page). "compact" always stacks both, which is what fits the
+     * Resource Launcher's side panel.
+     */
+    layout?: "wide" | "compact";
     className?: string;
 };
 
+const CLIENT_ICONS = {
+    claude: Sparkles,
+    codex: TerminalSquare,
+    opencode: SquareTerminal,
+    cursor: MousePointerClick
+} as const;
+
 export function AiClientConfigSection({
     endpoint,
     auth,
+    layout = "compact",
     className
 }: AiClientConfigSectionProps) {
     const t = useTranslations();
-
+    const isWide = layout === "wide";
-    const guides = useMemo(
-        () => buildAiClientGuides(endpoint, auth),
-        [endpoint, auth]
-    );
-
-    const icons = {
-        claude: Sparkles,
-        codex: TerminalSquare,
-        opencode: SquareTerminal,
-        cursor: MousePointerClick
-    } as const;
 
     const descriptions: Record<string, string> = {
         claude: t("aiClientConfigDescriptionClaude"),
@@ -58,18 +64,26 @@ export function AiClientConfigSection({
                 </SettingsSectionDescription>
             </SettingsSectionHeader>
             <SettingsSectionBody>
-                <div
+                <div className={cn("@container", className)}>
-                    className={cn("@container space-y-3", className)}
+                    <div
-                >
+                        className={cn(
-                    {guides.map((guide, index) => (
+                            "grid gap-3",
-                        <AiClientConfigCard
+                            isWide && "@3xl:grid-cols-2"
-                            key={guide.id}
+                        )}
-                            guide={guide}
+                    >
-                            description={descriptions[guide.id]}
+                        {AI_CLIENT_IDS.map((clientId) => (
-                            icon={icons[guide.id]}
+                            <AiClientConfigCard
-                            defaultOpen={index === 0}
+                                key={clientId}
-                        />
+                                clientId={clientId}
-                    ))}
+                                name={AI_CLIENT_NAMES[clientId]}
+                                endpoint={endpoint}
+                                keyAuth={auth}
+                                description={descriptions[clientId]}
+                                icon={CLIENT_ICONS[clientId]}
+                                stackBlocks={!isWide}
+                            />
+                        ))}
+                    </div>
                 </div>
             </SettingsSectionBody>
         </SettingsSection>

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

@@ -18,7 +18,6 @@ export function AiConfigCodeBlock({ block }: { block: AiConfigBlock }) {
             >
                 <CopyTextBox
                     text={block.displayText}
-                    getCopyText={block.getCopyText}
                     wrapText={block.kind === "steps"}
                 />
             </div>

src/components/resource-launcher/LauncherResourcePanel.tsx

@@ -36,7 +36,6 @@ import {
 import { getLauncherResourceAdminHref } from "@app/lib/launcherResourceAdminHref";
 import { isSafeUrlForLink } from "@app/lib/launcherResourceAccess";
 import { launcherQueries } from "@app/lib/queries";
-import { formatVirtualApiKeyPreview } from "@app/lib/virtualApiKeyFormat";
 import type { LauncherResource } from "@server/routers/launcher/types";
 import type { GetResourceAuthInfoResponse } from "@server/routers/resource/getResourceAuthInfo";
 import type { GetResourceResponse } from "@server/routers/resource/getResource";
@@ -350,10 +349,6 @@ function PublicResourceDetails({
                             endpoint={launcherResource.accessUrl ?? ""}
                             auth={{
                                 mode: "keyed",
-                                keyDisplay: formatVirtualApiKeyPreview(
-                                    aiKeysData.userKey.virtualApiKeyId,
-                                    aiKeysData.userKey.lastChars
-                                ),
                                 getKeyText: getAiKeyCopyText
                             }}
                         />

src/components/resource-launcher/ResourceLauncher.tsx

@@ -27,6 +27,7 @@ import {
     parseLauncherUrlState,
     serializeLauncherUrlState
 } from "@app/lib/launcherUrlState";
+import { buildLauncherSearchParams } from "@app/lib/launcherSearchParams";
 import { useToast } from "@app/hooks/useToast";
 import { useEnvContext } from "@app/hooks/useEnvContext";
 import {
@@ -38,13 +39,16 @@ import {
 import { launcherQueries } from "@app/lib/queries";
 import {
     getEffectiveDefaultLauncherConfig,
+    LAUNCHER_FLAT_GROUP_KEY,
     type LauncherDefaultViewOverrides,
     type LauncherGroup,
     type LauncherResource,
     type LauncherScaleInfo,
     type LauncherViewConfig,
-    type LauncherViewRecord
+    type LauncherViewRecord,
+    type ListLauncherResourcesResponse
 } from "@server/routers/launcher/types";
+import type { AxiosResponse } from "axios";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { Search } from "lucide-react";
 import { useTranslations } from "next-intl";
@@ -580,6 +584,61 @@ export default function ResourceLauncher({
         }
     }, []);
 
+    const hasHandledAutoOpen = useRef(false);
+
+    useEffect(() => {
+        if (hasHandledAutoOpen.current) {
+            return;
+        }
+
+        const targetNiceId = searchParams.get("openResource");
+        if (!targetNiceId) {
+            return;
+        }
+
+        // The launcher search endpoint matches on name/domain/labels, not
+        // niceId, so search by name (if provided) and pick the exact niceId
+        // match out of the results.
+        const searchTerm =
+            searchParams.get("openResourceQuery") ?? targetNiceId;
+
+        hasHandledAutoOpen.current = true;
+
+        (async () => {
+            try {
+                const sp = buildLauncherSearchParams(
+                    {
+                        query: searchTerm,
+                        groupBy: configRef.current.groupBy,
+                        groupKey: LAUNCHER_FLAT_GROUP_KEY,
+                        siteIds: [],
+                        labelIds: [],
+                        sort_by: configRef.current.sortBy,
+                        order: configRef.current.order
+                    },
+                    1
+                );
+                const res = await api.get<
+                    AxiosResponse<ListLauncherResourcesResponse>
+                >(`/org/${orgId}/launcher/resources?${sp.toString()}`);
+                const resources = res.data.data.resources ?? [];
+                const match =
+                    resources.find((r) => r.niceId === targetNiceId) ??
+                    resources[0];
+                if (match) {
+                    handleResourceSelect(match);
+                }
+            } catch {
+                // Resource may no longer exist or be accessible; ignore.
+            } finally {
+                const params = new URLSearchParams(searchParams.toString());
+                params.delete("openResource");
+                params.delete("openResourceQuery");
+                navigate({ searchParams: params, replace: true });
+            }
+        })();
+    }, [api, handleResourceSelect, navigate, orgId, searchParams]);
+
     const savedViewTabs = views.map((view) => ({
         viewId: view.viewId,
         name: view.name

src/lib/aiClientConfig.ts

@@ -1,16 +1,26 @@
 export const AI_CLIENT_IDS = ["claude", "codex", "opencode", "cursor"] as const;
 export type AiClientId = (typeof AI_CLIENT_IDS)[number];
 
-export type AiClientAuth =
+export const AI_CLIENT_NAMES: Record<AiClientId, string> = {
-    | { mode: "keyed"; keyDisplay: string; getKeyText: () => Promise<string> }
+    claude: "Claude Code",
+    codex: "Codex",
+    opencode: "OpenCode",
+    cursor: "Cursor"
+};
+
+/** Auth as supplied by callers: the real key isn't fetched yet. */
+export type AiClientAuthInput =
+    | { mode: "keyed"; getKeyText: () => Promise<string> }
     | { mode: "keyless" };
 
+/** Auth once the real key (if any) has been resolved. */
+export type AiClientAuth = { mode: "keyed"; key: string } | { mode: "keyless" };
+
 export type AiConfigBlock = {
     id: string;
     label: string;
     kind?: "code" | "steps";
     displayText: string;
-    getCopyText?: () => Promise<string>;
 };
 
 export type AiClientPresetId = "default" | "bedrock" | "vertex" | "kimi";
@@ -35,14 +45,8 @@ export type AiClientGuide = {
     presets: AiConfigPreset[];
 };
 
-function authValue(auth: AiClientAuth): {
+function keyValue(auth: AiClientAuth): string {
-    display: string;
+    return auth.mode === "keyed" ? auth.key : "-";
-    getCopyText?: () => Promise<string>;
-} {
-    if (auth.mode === "keyed") {
-        return { display: auth.keyDisplay, getCopyText: auth.getKeyText };
-    }
-    return { display: "-" };
 }
 
 function block(
@@ -52,14 +56,7 @@ function block(
     auth: AiClientAuth,
     kind: "code" | "steps" = "code"
 ): AiConfigBlock {
-    const { display, getCopyText } = authValue(auth);
+    return { id, label, kind, displayText: build(keyValue(auth)) };
-    return {
-        id,
-        label,
-        kind,
-        displayText: build(display),
-        getCopyText: getCopyText ? async () => build(await getCopyText()) : undefined
-    };
 }
 
 function buildCli(clientArg: "claude" | "codex", auth: AiClientAuth): AiCliCommands {
@@ -84,16 +81,12 @@ function buildCli(clientArg: "claude" | "codex", auth: AiClientAuth): AiCliComma
         configureWithKey: {
             id: `cli-configure-key-${clientArg}`,
             label: "Configure with an API key",
-            displayText: `pangolin configure ${clientArg} ${auth.keyDisplay}`,
+            displayText: `pangolin configure ${clientArg} ${auth.key}`
-            getCopyText: async () =>
-                `pangolin configure ${clientArg} ${await auth.getKeyText()}`
         },
         runWithKey: {
             id: `cli-run-key-${clientArg}`,
             label: "Run with an API key",
-            displayText: `pangolin run ${clientArg} ${auth.keyDisplay}`,
+            displayText: `pangolin run ${clientArg} ${auth.key}`
-            getCopyText: async () =>
-                `pangolin run ${clientArg} ${await auth.getKeyText()}`
         }
     };
 }
@@ -184,7 +177,7 @@ function buildClaudeGuide(endpoint: string, auth: AiClientAuth): AiClientGuide {
 
     return {
         id: "claude",
-        name: "Claude Code",
+        name: AI_CLIENT_NAMES.claude,
         cli: buildCli("claude", auth),
         presets: [
             {
@@ -240,7 +233,7 @@ function buildCodexGuide(endpoint: string, auth: AiClientAuth): AiClientGuide {
 
     return {
         id: "codex",
-        name: "Codex",
+        name: AI_CLIENT_NAMES.codex,
         cli: buildCli("codex", auth),
         presets: [
             {
@@ -284,7 +277,7 @@ function buildOpencodeGuide(endpoint: string, auth: AiClientAuth): AiClientGuide
 
     return {
         id: "opencode",
-        name: "OpenCode",
+        name: AI_CLIENT_NAMES.opencode,
         cli: null,
         presets: [
             {
@@ -316,7 +309,7 @@ function buildCursorGuide(endpoint: string, auth: AiClientAuth): AiClientGuide {
 
     return {
         id: "cursor",
-        name: "Cursor",
+        name: AI_CLIENT_NAMES.cursor,
         cli: null,
         presets: [
             {
@@ -328,11 +321,20 @@ function buildCursorGuide(endpoint: string, auth: AiClientAuth): AiClientGuide {
     };
 }
 
-export function buildAiClientGuides(endpoint: string, auth: AiClientAuth): AiClientGuide[] {
+const GUIDE_BUILDERS: Record<
-    return [
+    AiClientId,
-        buildClaudeGuide(endpoint, auth),
+    (endpoint: string, auth: AiClientAuth) => AiClientGuide
-        buildCodexGuide(endpoint, auth),
+> = {
-        buildOpencodeGuide(endpoint, auth),
+    claude: buildClaudeGuide,
-        buildCursorGuide(endpoint, auth)
+    codex: buildCodexGuide,
-    ];
+    opencode: buildOpencodeGuide,
+    cursor: buildCursorGuide
+};
+
+export function buildAiClientGuide(
+    clientId: AiClientId,
+    endpoint: string,
+    auth: AiClientAuth
+): AiClientGuide {
+    return GUIDE_BUILDERS[clientId](endpoint, auth);
 }