feat(activation): A/B a guided one-click first decode (exp-activation-guided-decode)

New users land on an empty search box with only a tiny fill-only "try example"
link; activation (first vin_decode_success) sits at ~32%. This adds a prominent
one-click "decode a sample vehicle" card that autoDecodes the sample VIN ->
straight to the vehicle page (the aha-moment).

Gated behind the exp-activation-guided-decode multivariate flag (control/guided),
read ONLY for unactivated users (empty history) so power-user decodes don't
dilute the metric; undefined -> control (status quo). PostHog experiment 83153
measures vin_decode_success. B2B-safe copy (sample vehicle, not "your car").

The experiment stays in draft until this ships to prod (web flags need the prod
VITE_POSTHOG_KEY), then launch.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

apps/web/src/routes/__tests__/dashboard-search.test.tsx

@@ -3,6 +3,7 @@ import { vi } from "vitest";
 
 vi.mock("@/lib/posthog", () => ({
   capture: vi.fn(),
+  subscribeFeatureFlag: vi.fn(() => () => {}),
 }));
 
 vi.mock("@/lib/api-client", () => ({

apps/web/src/routes/dashboard/search.tsx

@@ -5,7 +5,7 @@ import { ApiError, api } from "@/lib/api-client";
 import { startAction } from "@/lib/faro";
 import { useTranslation } from "@/lib/i18n";
 import { KEYS_6, KEYS_17 } from "@/lib/keys";
-import { capture } from "@/lib/posthog";
+import { capture, subscribeFeatureFlag } from "@/lib/posthog";
 import { toast } from "@/lib/toast";
 import { Badge, Button, Input, Label, Separator } from "@sase/ui";
 import { useQuery } from "@tanstack/react-query";
@@ -17,6 +17,9 @@ import { useCallback, useEffect, useRef, useState } from "react";
 
 const VIN_REGEX = /^[A-HJ-NPR-Z0-9]{17}$/;
 
+// Sample VW Golf used by the "try example" affordance + the activation experiment.
+const EXAMPLE_VIN = "WVWZZZ1JZ3W597935";
+
 interface VehicleHistoryItem {
   id: string;
   vin: string;
@@ -160,6 +163,21 @@ function SearchPage() {
     queryFn: () => api.get<VehicleHistoryItem[]>("/vehicles/history?limit=6"),
   });
 
+  // ─── Activation experiment: exp-activation-guided-decode ───────────────────
+  // A prominent one-click "decode a sample vehicle" card vs the tiny fill-only
+  // "try example" link — does it lift the first-decode (activation) rate?
+  // Exposure is scoped to UNACTIVATED users (empty history): reading the flag only
+  // for them keeps power-user decodes out of the metric. undefined → control.
+  const isUnactivated = history !== undefined && history.length === 0;
+  const [activationVariant, setActivationVariant] = useState<string | boolean | undefined>(
+    undefined,
+  );
+  useEffect(() => {
+    if (!isUnactivated) return;
+    return subscribeFeatureFlag("exp-activation-guided-decode", setActivationVariant);
+  }, [isUnactivated]);
+  const showGuidedDecode = isUnactivated && activationVariant === "guided";
+
   // ─── Ctrl+K shortcut ───────────────────────────────────────────────────────
   useEffect(() => {
     function handleKeyDown(e: KeyboardEvent) {
@@ -478,7 +496,7 @@ function SearchPage() {
   }
 
   function fillExampleVin() {
-    setVin("WVWZZZ1JZ3W597935");
+    setVin(EXAMPLE_VIN);
     inputRef.current?.focus();
   }
 
@@ -661,6 +679,29 @@ function SearchPage() {
         </form>
       </div>
 
+      {/* ─── Activation experiment (exp-activation-guided-decode): 1-click first decode ── */}
+      {showGuidedDecode && (
+        <div className="flex flex-col gap-3 rounded-2xl border border-brand/30 bg-brand/5 p-5 sm:flex-row sm:items-center sm:justify-between sm:p-6">
+          <div className="min-w-0">
+            <p className="font-[family-name:var(--font-display)] text-base font-bold">
+              {t("search.activationCardTitle")}
+            </p>
+            <p className="mt-1 text-sm text-muted-foreground">{t("search.activationCardHint")}</p>
+          </div>
+          <Button
+            type="button"
+            onClick={() => {
+              capture("activation_example_decode_clicked", { vin: EXAMPLE_VIN });
+              autoDecode(EXAMPLE_VIN);
+            }}
+            className="h-11 shrink-0 rounded-xl"
+          >
+            <Car className="mr-2 size-4" />
+            {t("search.activationCardCta")}
+          </Button>
+        </div>
+      )}
+
       {/* ─── SECTION 2: Live Preview Card ───────────────────────────────── */}
       {previewLoading && (
         <div className="flex items-center justify-center gap-3 rounded-2xl border border-border bg-background p-6">