feat(devtools): tag outbound CTA links with UTM params

packages/devtools/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openuidev/devtools",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Development-only UI widget for OpenUI apps: surfaces errors captured by @openuidev/observability",
   "license": "MIT",
   "type": "module",

packages/devtools/src/inspect/QuotaErrorRow.tsx

@@ -1,6 +1,7 @@
 import { type ObservabilityEvent } from "@openuidev/observability";
 import { CreditCard, KeyRound } from "lucide-react";
 import { useState, type CSSProperties } from "react";
+import { withDevtoolsAttribution } from "../lib/links";
 import { FONT, useStyles, type ThemeTokens } from "../theme";
 import { LevelIcon } from "./LevelIcon";
 
@@ -61,7 +62,14 @@ export function QuotaErrorRow({ info }: { info: QuotaErrorInfo }) {
               onMouseEnter={() => setHoveredCta("purchase")}
               onMouseLeave={() => setHoveredCta(null)}
               onClick={() =>
-                window.open("https://console.thesys.dev/billing", "_blank", "noopener,noreferrer")
+                window.open(
+                  withDevtoolsAttribution(
+                    "https://console.thesys.dev/billing",
+                    "quota_error_purchase_credits",
+                  ),
+                  "_blank",
+                  "noopener,noreferrer",
+                )
               }
             >
               <CreditCard size={13} />
@@ -79,7 +87,11 @@ export function QuotaErrorRow({ info }: { info: QuotaErrorInfo }) {
               onMouseEnter={() => setHoveredCta("byok")}
               onMouseLeave={() => setHoveredCta(null)}
               onClick={() =>
-                window.open("https://console.thesys.dev/byok", "_blank", "noopener,noreferrer")
+                window.open(
+                  withDevtoolsAttribution("https://console.thesys.dev/byok", "quota_error_byok"),
+                  "_blank",
+                  "noopener,noreferrer",
+                )
               }
             >
               <KeyRound size={13} />

packages/devtools/src/lib/index.ts

@@ -8,5 +8,6 @@ export {
   type LibraryLike,
   type RegisteredLibrary,
 } from "./libraryRegistry";
+export { withDevtoolsAttribution } from "./links";
 export { useDevtoolsSingleton } from "./singleton";
 export { useDevtoolsConfig, type DevtoolsConfig } from "./useDevtoolsConfig";

packages/devtools/src/lib/links.ts

@@ -0,0 +1,24 @@
+const UTM_PARAMS = {
+  utm_source: "openui",
+  utm_medium: "referral",
+  utm_campaign: "openui_devtools",
+} as const;
+
+/** Tags an outbound devtools link so referrals are attributable, keeping existing params. */
+export function withDevtoolsAttribution(href: string, content: string) {
+  let url: URL;
+
+  try {
+    url = new URL(href);
+  } catch {
+    return href;
+  }
+
+  for (const [key, value] of Object.entries(UTM_PARAMS)) {
+    if (!url.searchParams.has(key)) url.searchParams.set(key, value);
+  }
+
+  if (!url.searchParams.has("utm_content")) url.searchParams.set("utm_content", content);
+
+  return url.toString();
+}

packages/devtools/src/ui/ReliabilityBanner.tsx

@@ -1,4 +1,5 @@
 import { CSSProperties, useState } from "react";
+import { withDevtoolsAttribution } from "../lib/links";
 import { ColorMode, FONT, theme, ThemeTokens } from "../theme";
 
 export default function ReliabilityBanner({ themeMode }: { themeMode: ColorMode }) {
@@ -10,7 +11,10 @@ export default function ReliabilityBanner({ themeMode }: { themeMode: ColorMode
       <span style={styles.fade} aria-hidden />
       <a
         style={styles.banner}
-        href="https://www.openui.com/docs/openui-lang/reliability"
+        href={withDevtoolsAttribution(
+          "https://www.openui.com/docs/openui-lang/reliability",
+          "reliability_banner_learn_more",
+        )}
         target="_blank"
         rel="noreferrer"
         title="Learn how to track and fix errors in production"