apps/web/src/messages/en.json

@@ -696,6 +696,9 @@
     "inputPlaceholder": "Enter VIN (17 characters)",
     "counter": "{count}/17 characters",
     "tryExample": "Try an example VIN →",
+    "activationCardTitle": "Try it now with a sample vehicle",
+    "activationCardHint": "No VIN to hand? See the parts catalog, diagrams and OEM codes in seconds with a sample vehicle.",
+    "activationCardCta": "Decode a sample vehicle",
     "submit": "Decode VIN",
     "errorTitle": "Couldn't decode VIN",
     "errorSubscriptionPrefix": "You have no active subscription. To access vehicle data,",

apps/web/src/messages/tr.json

@@ -696,6 +696,9 @@
     "inputPlaceholder": "Şase numarasını girin (17 karakter)",
     "counter": "{count}/17 karakter",
     "tryExample": "Örnek şase deneyin →",
+    "activationCardTitle": "Örnek bir araçla hemen dene",
+    "activationCardHint": "Sorgulayacak şase elinde yoksa, örnek bir araçla parça kataloğunu, şemaları ve OEM kodlarını saniyeler içinde gör.",
+    "activationCardCta": "Örnek araçla sorgula",
     "submit": "Şase Çöz",
     "errorTitle": "Şase çözümlenemedi",
     "errorSubscriptionPrefix": "Aktif aboneliğiniz yok. Araç verilerine erişmek için",

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">