Pass 2 showing the usage commands

2026-08-19 10:42:57 +02:00 · 2026-08-18 14:19:50 -04:00
parent 2a3c00045f
commit a4c7121b93
10 changed files with 275 additions and 135 deletions
@@ -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",
@@ -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")}
@@ -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")}
@@ -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>
        </>
    );
@@ -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 [presetId, setPresetId] = useState<AiClientPresetId>(
-        guide.presets[0]?.id ?? "default"
-    );
+    const [open, setOpen] = useState(false);
+    const [presetId, setPresetId] = useState<AiClientPresetId>("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 ? (
-                    <Tabs defaultValue="cli">
-                        <TabsList>
-                            <TabsTrigger value="cli">
-                                {t("aiClientConfigTabCli")}
-                            </TabsTrigger>
-                            <TabsTrigger value="manual">
-                                {t("aiClientConfigTabManual")}
-                            </TabsTrigger>
-                        </TabsList>
-                        <TabsContent
-                            value="cli"
-                            className="grid gap-4 @lg:grid-cols-2 mt-4"
-                        >
-                            <AiConfigCodeBlock block={guide.cli.configure} />
-                            <AiConfigCodeBlock block={guide.cli.run} />
-                            {guide.cli.configureWithKey ? (
+                {!guide && revealing ? (
+                    <div className="flex items-center justify-center py-6 text-muted-foreground">
+                        <Loader2 className="size-5 animate-spin" />
+                    </div>
+                ) : null}
+                {!guide && revealError ? (
+                    <div className="flex flex-col items-center gap-2 py-6 text-center">
+                        <p className="text-sm text-muted-foreground">
+                            {t("aiClientConfigRevealError")}
+                        </p>
+                        <Button variant="outline" size="sm" onClick={reveal}>
+                            {t("aiClientConfigRevealRetry")}
+                        </Button>
+                    </div>
+                ) : null}
+                {guide ? (
+                    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}
-                            {guide.cli.runWithKey ? (
-                                <AiConfigCodeBlock
-                                    block={guide.cli.runWithKey}
-                                />
-                            ) : null}
-                        </TabsContent>
-                        <TabsContent value="manual" className="mt-4">
-                            {manualContent}
-                        </TabsContent>
-                    </Tabs>
-                ) : (
-                    manualContent
-                )}
+                                <AiConfigCodeBlock block={guide.cli.run} />
+                                {guide.cli.configureWithKey ? (
+                                    <AiConfigCodeBlock
+                                        block={guide.cli.configureWithKey}
+                                    />
+                                ) : null}
+                                {guide.cli.runWithKey ? (
+                                    <AiConfigCodeBlock
+                                        block={guide.cli.runWithKey}
+                                    />
+                                ) : null}
+                            </TabsContent>
+                            <TabsContent value="manual" className="mt-4">
+                                {manualContent}
+                            </TabsContent>
+                        </Tabs>
+                    ) : (
+                        manualContent
+                    )
+                ) : null}
            </CollapsibleContent>
        </Collapsible>
    );
@@ -8,37 +8,43 @@ import {
    SettingsSectionHeader,
    SettingsSectionTitle
 } from "@app/components/Settings";
-import type { AiClientAuth } from "@app/lib/aiClientConfig";
-import { buildAiClientGuides } from "@app/lib/aiClientConfig";
+import {
+    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 guides = useMemo(
-        () => buildAiClientGuides(endpoint, auth),
-        [endpoint, auth]
-    );
-
-    const icons = {
-        claude: Sparkles,
-        codex: TerminalSquare,
-        opencode: SquareTerminal,
-        cursor: MousePointerClick
-    } as const;
+    const isWide = layout === "wide";

    const descriptions: Record<string, string> = {
        claude: t("aiClientConfigDescriptionClaude"),
@@ -58,18 +64,26 @@ export function AiClientConfigSection({
                </SettingsSectionDescription>
            </SettingsSectionHeader>
            <SettingsSectionBody>
-                <div
-                    className={cn("@container space-y-3", className)}
-                >
-                    {guides.map((guide, index) => (
-                        <AiClientConfigCard
-                            key={guide.id}
-                            guide={guide}
-                            description={descriptions[guide.id]}
-                            icon={icons[guide.id]}
-                            defaultOpen={index === 0}
-                        />
-                    ))}
+                <div className={cn("@container", className)}>
+                    <div
+                        className={cn(
+                            "grid gap-3",
+                            isWide && "@3xl:grid-cols-2"
+                        )}
+                    >
+                        {AI_CLIENT_IDS.map((clientId) => (
+                            <AiClientConfigCard
+                                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>
@@ -18,7 +18,6 @@ export function AiConfigCodeBlock({ block }: { block: AiConfigBlock }) {
            >
                <CopyTextBox
                    text={block.displayText}
-                    getCopyText={block.getCopyText}
                    wrapText={block.kind === "steps"}
                />
            </div>
@@ -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
                            }}
                        />
@@ -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
@@ -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 =
-    | { mode: "keyed"; keyDisplay: string; getKeyText: () => Promise<string> }
+export const AI_CLIENT_NAMES: Record<AiClientId, 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): {
-    display: string;
-    getCopyText?: () => Promise<string>;
-} {
-    if (auth.mode === "keyed") {
-        return { display: auth.keyDisplay, getCopyText: auth.getKeyText };
-    }
-    return { display: "-" };
+function keyValue(auth: AiClientAuth): string {
+    return auth.mode === "keyed" ? auth.key : "-";
 }

 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(display),
-        getCopyText: getCopyText ? async () => build(await getCopyText()) : undefined
-    };
+    return { id, label, kind, displayText: build(keyValue(auth)) };
 }

 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}`,
-            getCopyText: async () =>
-                `pangolin configure ${clientArg} ${await auth.getKeyText()}`
+            displayText: `pangolin configure ${clientArg} ${auth.key}`
        },
        runWithKey: {
            id: `cli-run-key-${clientArg}`,
            label: "Run with an API key",
-            displayText: `pangolin run ${clientArg} ${auth.keyDisplay}`,
-            getCopyText: async () =>
-                `pangolin run ${clientArg} ${await auth.getKeyText()}`
+            displayText: `pangolin run ${clientArg} ${auth.key}`
        }
    };
 }
@@ -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[] {
-    return [
-        buildClaudeGuide(endpoint, auth),
-        buildCodexGuide(endpoint, auth),
-        buildOpencodeGuide(endpoint, auth),
-        buildCursorGuide(endpoint, auth)
-    ];
+const GUIDE_BUILDERS: Record<
+    AiClientId,
+    (endpoint: string, auth: AiClientAuth) => AiClientGuide
+> = {
+    claude: buildClaudeGuide,
+    codex: buildCodexGuide,
+    opencode: buildOpencodeGuide,
+    cursor: buildCursorGuide
+};
+
+export function buildAiClientGuide(
+    clientId: AiClientId,
+    endpoint: string,
+    auth: AiClientAuth
+): AiClientGuide {
+    return GUIDE_BUILDERS[clientId](endpoint, auth);
 }