add help banner to providers and virtual api keys

src/app/[orgId]/settings/ai-providers/page.tsx

@@ -1,3 +1,4 @@
+import AiProvidersBanner from "@app/components/AiProvidersBanner";
 import AiProvidersTable from "@app/components/AiProvidersTable";
 import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
 import { internal } from "@app/lib/api";
@@ -49,6 +50,8 @@ export default async function AiProvidersPage({ params, searchParams }: Props) {
                 description={t("aiProvidersDescription")}
             />
 
+            <AiProvidersBanner />
+
             <AiProvidersTable
                 orgId={orgId}
                 providers={providers.map((provider) => ({

src/app/[orgId]/settings/virtual-api-keys/page.tsx

@@ -6,6 +6,7 @@ import { redirect } from "next/navigation";
 import { cache } from "react";
 import { GetOrgResponse } from "@server/routers/org";
 import OrgProvider from "@app/providers/OrgProvider";
+import VirtualApiKeysBanner from "@app/components/VirtualApiKeysBanner";
 import VirtualApiKeysTable, {
     type VirtualApiKeyRow
 } from "@app/components/VirtualApiKeysTable";
@@ -142,6 +143,8 @@ export default async function VirtualApiKeysPage(
                 description={t("virtualApiKeysDescription")}
             />
 
+            <VirtualApiKeysBanner orgId={params.orgId} />
+
             <OrgProvider org={org}>
                 <VirtualApiKeysTable
                     virtualApiKeys={rows}

src/components/AiProvidersBanner.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import { Sparkles } from "lucide-react";
+import { useTranslations } from "next-intl";
+import DismissableBanner from "./DismissableBanner";
+
+export const AiProvidersBanner = () => {
+    const t = useTranslations();
+
+    return (
+        <DismissableBanner
+            storageKey="ai-providers-banner-dismissed"
+            version={1}
+            title={t("aiProvidersBannerTitle")}
+            titleIcon={<Sparkles className="w-5 h-5 text-primary" />}
+            description={t("aiProvidersBannerDescription")}
+        />
+    );
+};
+
+export default AiProvidersBanner;

src/components/VirtualApiKeysBanner.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { Button } from "@app/components/ui/button";
+import { useEnvContext } from "@app/hooks/useEnvContext";
+import { ArrowRight, KeyRound } from "lucide-react";
+import { useTranslations } from "next-intl";
+import Link from "next/link";
+import DismissableBanner from "./DismissableBanner";
+
+type VirtualApiKeysBannerProps = {
+    orgId: string;
+};
+
+export const VirtualApiKeysBanner = ({ orgId }: VirtualApiKeysBannerProps) => {
+    const t = useTranslations();
+    const { env } = useEnvContext();
+
+    const dashboardUrl = env.app.dashboardUrl?.replace(/\/$/, "") ?? "";
+    const keysUrl = dashboardUrl
+        ? `${dashboardUrl}/${orgId}/keys`
+        : `/${orgId}/keys`;
+
+    return (
+        <DismissableBanner
+            storageKey="virtual-api-keys-banner-dismissed"
+            version={1}
+            title={t("virtualApiKeysBannerTitle")}
+            titleIcon={<KeyRound className="w-5 h-5 text-primary" />}
+            description={t("virtualApiKeysBannerDescription", { keysUrl })}
+        >
+            <Link href={`/${orgId}/keys`}>
+                <Button
+                    variant="outline"
+                    size="sm"
+                    className="gap-2 hover:bg-primary/10 hover:border-primary/50 transition-colors"
+                >
+                    {t("virtualApiKeysBannerButtonText")}
+                    <ArrowRight className="w-4 h-4" />
+                </Button>
+            </Link>
+        </DismissableBanner>
+    );
+};
+
+export default VirtualApiKeysBanner;