From b2bb5e04da002c9fc39c279568d257c2fce8c92e Mon Sep 17 00:00:00 2001 From: "probatai[bot]" <236084945+probatai[bot]@users.noreply.github.com> Date: Tue, 11 Nov 2025 08:52:29 +0000 Subject: [PATCH 01/11] probat: add activated component probat/0724676c-cf2b-4c3b-929d-2503d4d95ba4/12e22a6d-64a4-4a18-a592-1b34cc7afcf3.tsx --- .../12e22a6d-64a4-4a18-a592-1b34cc7afcf3.tsx | 86 +++++++++++++++++++ 1 file changed, 86 insertions(+) create mode 100644 probat/0724676c-cf2b-4c3b-929d-2503d4d95ba4/12e22a6d-64a4-4a18-a592-1b34cc7afcf3.tsx diff --git a/probat/0724676c-cf2b-4c3b-929d-2503d4d95ba4/12e22a6d-64a4-4a18-a592-1b34cc7afcf3.tsx b/probat/0724676c-cf2b-4c3b-929d-2503d4d95ba4/12e22a6d-64a4-4a18-a592-1b34cc7afcf3.tsx new file mode 100644 index 00000000..7515d2c0 --- /dev/null +++ b/probat/0724676c-cf2b-4c3b-929d-2503d4d95ba4/12e22a6d-64a4-4a18-a592-1b34cc7afcf3.tsx @@ -0,0 +1,86 @@ +import React, { useState } from 'react'; +import '../../src/components/Header.css'; + +const Header: React.FC = () => { + const [isMenuOpen, setIsMenuOpen] = useState(false); + + const toggleMenu = () => { + setIsMenuOpen(!isMenuOpen); + }; + + return ( + <> + +
+
+
+

Brand

+
+ + + +
+ + +
+ + +
+
+ + ); +}; + +export default Header; \ No newline at end of file From f586588b85a7717402d19bece39d39b98e10eaed Mon Sep 17 00:00:00 2001 From: "probatai[bot]" <236084945+probatai[bot]@users.noreply.github.com> Date: Tue, 11 Nov 2025 08:52:36 +0000 Subject: [PATCH 02/11] probat: add activated component probat/0724676c-cf2b-4c3b-929d-2503d4d95ba4/f4f94182-2926-4c74-94e1-8cbf0c438a24.tsx --- .../f4f94182-2926-4c74-94e1-8cbf0c438a24.tsx | 86 +++++++++++++++++++ 1 file changed, 86 insertions(+) create mode 100644 probat/0724676c-cf2b-4c3b-929d-2503d4d95ba4/f4f94182-2926-4c74-94e1-8cbf0c438a24.tsx diff --git a/probat/0724676c-cf2b-4c3b-929d-2503d4d95ba4/f4f94182-2926-4c74-94e1-8cbf0c438a24.tsx b/probat/0724676c-cf2b-4c3b-929d-2503d4d95ba4/f4f94182-2926-4c74-94e1-8cbf0c438a24.tsx new file mode 100644 index 00000000..3fed117b --- /dev/null +++ b/probat/0724676c-cf2b-4c3b-929d-2503d4d95ba4/f4f94182-2926-4c74-94e1-8cbf0c438a24.tsx @@ -0,0 +1,86 @@ +import React, { useState } from 'react'; +import '../../src/components/Header.css'; + +const Header: React.FC = () => { + const [isMenuOpen, setIsMenuOpen] = useState(false); + + const toggleMenu = () => { + setIsMenuOpen(!isMenuOpen); + }; + + return ( + <> + +
+
+
+

Brand

+
+ + + +
+ + +
+ + +
+
+ + ); +}; + +export default Header; \ No newline at end of file From 4e233e2499bbae1c77048736103e5163a0240376 Mon Sep 17 00:00:00 2001 From: "probatai[bot]" <236084945+probatai[bot]@users.noreply.github.com> Date: Tue, 11 Nov 2025 08:52:42 +0000 Subject: [PATCH 03/11] probat: add activated component probat/0724676c-cf2b-4c3b-929d-2503d4d95ba4/49c1d2ed-8af1-4172-aa89-b38da3a00bb0.tsx --- .../49c1d2ed-8af1-4172-aa89-b38da3a00bb0.tsx | 86 +++++++++++++++++++ 1 file changed, 86 insertions(+) create mode 100644 probat/0724676c-cf2b-4c3b-929d-2503d4d95ba4/49c1d2ed-8af1-4172-aa89-b38da3a00bb0.tsx diff --git a/probat/0724676c-cf2b-4c3b-929d-2503d4d95ba4/49c1d2ed-8af1-4172-aa89-b38da3a00bb0.tsx b/probat/0724676c-cf2b-4c3b-929d-2503d4d95ba4/49c1d2ed-8af1-4172-aa89-b38da3a00bb0.tsx new file mode 100644 index 00000000..4055be54 --- /dev/null +++ b/probat/0724676c-cf2b-4c3b-929d-2503d4d95ba4/49c1d2ed-8af1-4172-aa89-b38da3a00bb0.tsx @@ -0,0 +1,86 @@ +import React, { useState } => from 'react'; +import '../../src/components/Header.css'; + +const Header: React.FC = () => { + const [isMenuOpen, setIsMenuOpen] = useState(false); + + const toggleMenu = () => { + setIsMenuOpen(!isMenuOpen); + }; + + return ( + <> + +
+
+
+

Brand

+
+ + + +
+ + +
+ + +
+
+ + ); +}; + +export default Header; \ No newline at end of file From 16cf7149773f5f48f50d6c935b92be4d28e3535f Mon Sep 17 00:00:00 2001 From: "probatai[bot]" <236084945+probatai[bot]@users.noreply.github.com> Date: Tue, 11 Nov 2025 08:52:48 +0000 Subject: [PATCH 04/11] probat: add activated component probat/0724676c-cf2b-4c3b-929d-2503d4d95ba4/c8d92df7-0138-4815-b6ed-47eb92f8facc.tsx --- .../c8d92df7-0138-4815-b6ed-47eb92f8facc.tsx | 86 +++++++++++++++++++ 1 file changed, 86 insertions(+) create mode 100644 probat/0724676c-cf2b-4c3b-929d-2503d4d95ba4/c8d92df7-0138-4815-b6ed-47eb92f8facc.tsx diff --git a/probat/0724676c-cf2b-4c3b-929d-2503d4d95ba4/c8d92df7-0138-4815-b6ed-47eb92f8facc.tsx b/probat/0724676c-cf2b-4c3b-929d-2503d4d95ba4/c8d92df7-0138-4815-b6ed-47eb92f8facc.tsx new file mode 100644 index 00000000..6796c5e1 --- /dev/null +++ b/probat/0724676c-cf2b-4c3b-929d-2503d4d95ba4/c8d92df7-0138-4815-b6ed-47eb92f8facc.tsx @@ -0,0 +1,86 @@ +import React, { useState } from 'react'; +import '../../src/components/Header.css'; + +const Header: React.FC = () => { + const [isMenuOpen, setIsMenuOpen] = useState(false); + + const toggleMenu = () => { + setIsMenuOpen(!isMenuOpen); + }; + + return ( + <> + +
+
+
+

Brand

+
+ + + +
+ + +
+ + +
+
+ + ); +}; + +export default Header; \ No newline at end of file From 98e0cf1b4f8b47b72d368ee1b92e48f969e34041 Mon Sep 17 00:00:00 2001 From: "probatai[bot]" <236084945+probatai[bot]@users.noreply.github.com> Date: Tue, 11 Nov 2025 08:52:54 +0000 Subject: [PATCH 05/11] probat: add activated component probat/0724676c-cf2b-4c3b-929d-2503d4d95ba4/427c2161-ba7d-45c4-85eb-5f9297ce1e54.tsx --- .../427c2161-ba7d-45c4-85eb-5f9297ce1e54.tsx | 86 +++++++++++++++++++ 1 file changed, 86 insertions(+) create mode 100644 probat/0724676c-cf2b-4c3b-929d-2503d4d95ba4/427c2161-ba7d-45c4-85eb-5f9297ce1e54.tsx diff --git a/probat/0724676c-cf2b-4c3b-929d-2503d4d95ba4/427c2161-ba7d-45c4-85eb-5f9297ce1e54.tsx b/probat/0724676c-cf2b-4c3b-929d-2503d4d95ba4/427c2161-ba7d-45c4-85eb-5f9297ce1e54.tsx new file mode 100644 index 00000000..666c7d24 --- /dev/null +++ b/probat/0724676c-cf2b-4c3b-929d-2503d4d95ba4/427c2161-ba7d-45c4-85eb-5f9297ce1e54.tsx @@ -0,0 +1,86 @@ +import React, { useState } from 'react'; +import '../../src/components/Header.css'; + +const Header: React.FC = () => { + const [isMenuOpen, setIsMenuOpen] = useState(false); + + const toggleMenu = () => { + setIsMenuOpen(!isMenuOpen); + }; + + return ( + <> + +
+
+
+

Brand

+
+ + + +
+ + +
+ + +
+
+ + ); +}; + +export default Header; \ No newline at end of file From 9a325356d5af5fb83557968b4c6cd35f4c8bf98f Mon Sep 17 00:00:00 2001 From: "probatai[bot]" <236084945+probatai[bot]@users.noreply.github.com> Date: Tue, 11 Nov 2025 08:53:00 +0000 Subject: [PATCH 06/11] probat: add activated component probat/0724676c-cf2b-4c3b-929d-2503d4d95ba4/1d0e03bb-5695-4cc8-8ffc-5eecfd0f13bd.tsx --- .../1d0e03bb-5695-4cc8-8ffc-5eecfd0f13bd.tsx | 86 +++++++++++++++++++ 1 file changed, 86 insertions(+) create mode 100644 probat/0724676c-cf2b-4c3b-929d-2503d4d95ba4/1d0e03bb-5695-4cc8-8ffc-5eecfd0f13bd.tsx diff --git a/probat/0724676c-cf2b-4c3b-929d-2503d4d95ba4/1d0e03bb-5695-4cc8-8ffc-5eecfd0f13bd.tsx b/probat/0724676c-cf2b-4c3b-929d-2503d4d95ba4/1d0e03bb-5695-4cc8-8ffc-5eecfd0f13bd.tsx new file mode 100644 index 00000000..155c1c4f --- /dev/null +++ b/probat/0724676c-cf2b-4c3b-929d-2503d4d95ba4/1d0e03bb-5695-4cc8-8ffc-5eecfd0f13bd.tsx @@ -0,0 +1,86 @@ +import React, { useState } from 'react'; +import '../../src/components/Header.css'; + +const Header: React.FC = () => { + const [isMenuOpen, setIsMenuOpen] = useState(false); + + const toggleMenu = () => { + setIsMenuOpen(!isMenuOpen); + }; + + return ( + <> + +
+
+
+

Brand

+
+ + + +
+ + +
+ + +
+
+ + ); +}; + +export default Header; \ No newline at end of file From ccd03f7c0b0354048dfea11c3465ff6c11a00717 Mon Sep 17 00:00:00 2001 From: "probatai[bot]" <236084945+probatai[bot]@users.noreply.github.com> Date: Tue, 11 Nov 2025 08:53:07 +0000 Subject: [PATCH 07/11] Add probat/runtime.tsx --- probat/runtime.tsx | 150 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 150 insertions(+) create mode 100644 probat/runtime.tsx diff --git a/probat/runtime.tsx b/probat/runtime.tsx new file mode 100644 index 00000000..75893550 --- /dev/null +++ b/probat/runtime.tsx @@ -0,0 +1,150 @@ +// probat/runtime.tsx +import * as React from "react"; + +declare global { +interface Window { + __PROBAT_API?: string; +} +} + +const ENV_BASE: string = +(typeof import.meta !== "undefined" && (import.meta as any).env?.VITE_PROBAT_API) || +(typeof process !== "undefined" && (process as any).env?.NEXT_PUBLIC_PROBAT_API) || +(typeof window !== "undefined" && window.__PROBAT_API) || +"https://gushi.onrender.com"; + +const TTL_MS = 6 * 60 * 60 * 1000; // 6 hours +const KEY = (proposalId: string) => `probat_choice_v3:${proposalId}`; + +type RetrieveResponse = { +proposal_id: string; +experiment_id: string | null; +label: string | null; +}; + +type Choice = { +experiment_id: string; +label: string; +ts: number; +}; + +function safeGet(k: string): any | null { +try { + const raw = localStorage.getItem(k); + return raw ? JSON.parse(raw) : null; +} catch { + return null; +} +} +function safeSet(k: string, v: any) { +try { + localStorage.setItem(k, JSON.stringify(v)); +} catch {} +} +function now() { return Date.now(); } +function fresh(ts: number) { return now() - ts <= TTL_MS; } +function readChoice(proposalId: string): Choice | null { +const c = safeGet(KEY(proposalId)) as Choice | null; +return c && fresh(c.ts) ? c : null; +} +function writeChoice(proposalId: string, experiment_id: string, label: string) { +safeSet(KEY(proposalId), { experiment_id, label, ts: now() } as Choice); +} + +async function fetchDecision(baseUrl: string, proposalId: string): Promise<{ experiment_id: string; label: string }> { +const url = `${baseUrl.replace(/\/$/, "")}/retrieve_react_experiment/${encodeURIComponent(proposalId)}`; +const res = await fetch(url, { method: "POST", headers: { Accept: "application/json" } }); +if (!res.ok) throw new Error(`HTTP ${res.status}`); +const data = (await res.json()) as RetrieveResponse; + +const experiment_id = (data.experiment_id || `exp_${proposalId}`).toString(); +const label = data.label && data.label.trim() ? data.label : "control"; + +writeChoice(proposalId, experiment_id, label); +return { experiment_id, label }; +} + +async function sendClickMetric(baseUrl: string, proposalId: string, _experiment_id?: string, variant_label?: string) { +const url = `${baseUrl.replace(/\/$/, "")}/send_metrics/${encodeURIComponent(proposalId)}`; +const body = { + experiment_id: null, + variant_label: variant_label ?? "control", + metric_name: "click", + metric_value: 1, + metric_unit: "count", + source: "react", + dimensions: {}, + captured_at: new Date().toISOString(), +}; +try { + await fetch(url, { + method: "POST", + headers: { Accept: "application/json", "Content-Type": "application/json" }, + body: JSON.stringify(body), + }); +} catch {} +} + +type WithExperimentOpts = { +proposalId: string; +registry: Record>; +}; + +export function withExperiment

( +Control: React.ComponentType

, +opts: WithExperimentOpts +): React.ComponentType

void; probat?: { trackClick: () => void } }> { +const { proposalId, registry } = opts; + +function Wrapped(props: P) { + const [choice, setChoice] = React.useState<{ experiment_id: string; label: string } | null>(null); + + React.useEffect(() => { + let alive = true; + + const cached = readChoice(proposalId); + if (cached) { + setChoice({ experiment_id: cached.experiment_id, label: cached.label }); + } + + if (!cached) { + (async () => { + try { + const { experiment_id, label } = await fetchDecision(ENV_BASE, proposalId); + if (!alive) return; + setChoice({ experiment_id, label }); + } catch (e) { + if (!alive) return; + setChoice({ experiment_id: `exp_${proposalId}`, label: "control" }); + } + })(); + } + + return () => { alive = false; }; + }, [proposalId]); + + const trackClick = React.useCallback(() => { + const exp = choice?.experiment_id; + const lbl = choice?.label ?? "control"; + void sendClickMetric(ENV_BASE, proposalId, exp, lbl); + }, [proposalId, choice?.experiment_id, choice?.label]); + + const label = choice?.label ?? "control"; + const Variant = registry[label] || Control; + + const key = `${proposalId}:${label}`; + return ( +

+ {React.createElement(Variant, { + key, + ...(props as any), + onProbatClick: trackClick, + probat: { trackClick }, + })} +
+ ); +} + +(Wrapped as any).displayName = `withExperiment(${(Control as any).displayName || Control.name || "Component"})`; +return Wrapped as any; +} From ace2eeaa73ba209ffc1ee32f2b97c8a12418c7ef Mon Sep 17 00:00:00 2001 From: "probatai[bot]" <236084945+probatai[bot]@users.noreply.github.com> Date: Tue, 11 Nov 2025 08:53:14 +0000 Subject: [PATCH 08/11] Add probat/index.tsx --- probat/index.tsx | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 probat/index.tsx diff --git a/probat/index.tsx b/probat/index.tsx new file mode 100644 index 00000000..c5493906 --- /dev/null +++ b/probat/index.tsx @@ -0,0 +1,4 @@ +// probat/index.tsx +export { withExperiment } from "./runtime"; +export { PROBAT_REGISTRIES } from "./registry"; +export { PROBAT_COMPONENTS } from "./config"; From 5bd8dc482427616c52e57494368ef243eed83ddf Mon Sep 17 00:00:00 2001 From: "probatai[bot]" <236084945+probatai[bot]@users.noreply.github.com> Date: Tue, 11 Nov 2025 08:53:21 +0000 Subject: [PATCH 09/11] Ensure probat/config.tsx entry --- probat/config.tsx | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 probat/config.tsx diff --git a/probat/config.tsx b/probat/config.tsx new file mode 100644 index 00000000..bd20c22a --- /dev/null +++ b/probat/config.tsx @@ -0,0 +1,4 @@ +// probat/config.tsx +export const PROBAT_COMPONENTS: Record = { + "src/components/Header.tsx": { proposalId: "0724676c-cf2b-4c3b-929d-2503d4d95ba4" } +}; From 7ec56d200d0f21ca7e3f6c608559fb0ab7e5ed35 Mon Sep 17 00:00:00 2001 From: "probatai[bot]" <236084945+probatai[bot]@users.noreply.github.com> Date: Tue, 11 Nov 2025 08:53:28 +0000 Subject: [PATCH 10/11] Ensure probat/registry.tsx entry --- probat/registry.tsx | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) create mode 100644 probat/registry.tsx diff --git a/probat/registry.tsx b/probat/registry.tsx new file mode 100644 index 00000000..34ff9785 --- /dev/null +++ b/probat/registry.tsx @@ -0,0 +1,18 @@ +// probat/registry.tsx + import type React from "react"; + import Exp_0_b from "./0724676c-cf2b-4c3b-929d-2503d4d95ba4/12e22a6d-64a4-4a18-a592-1b34cc7afcf3"; +import Exp_1_c from "./0724676c-cf2b-4c3b-929d-2503d4d95ba4/f4f94182-2926-4c74-94e1-8cbf0c438a24"; +import Exp_2_d from "./0724676c-cf2b-4c3b-929d-2503d4d95ba4/49c1d2ed-8af1-4172-aa89-b38da3a00bb0"; +import Exp_3_f from "./0724676c-cf2b-4c3b-929d-2503d4d95ba4/c8d92df7-0138-4815-b6ed-47eb92f8facc"; +import Exp_4_h from "./0724676c-cf2b-4c3b-929d-2503d4d95ba4/427c2161-ba7d-45c4-85eb-5f9297ce1e54"; +import Exp_5_i from "./0724676c-cf2b-4c3b-929d-2503d4d95ba4/1d0e03bb-5695-4cc8-8ffc-5eecfd0f13bd"; + export const PROBAT_REGISTRIES: Record>> = { + "src/components/Header.tsx": { + "b": Exp_0_b, + "c": Exp_1_c, + "d": Exp_2_d, + "f": Exp_3_f, + "h": Exp_4_h, + "i": Exp_5_i, + }, + }; From 9a9c0873c810409e99f6cf15c537053797c9af59 Mon Sep 17 00:00:00 2001 From: "probatai[bot]" <236084945+probatai[bot]@users.noreply.github.com> Date: Tue, 11 Nov 2025 08:53:44 +0000 Subject: [PATCH 11/11] probat: auto-edit component to integrate Probat at src/components/Header.tsx --- src/components/Header.tsx | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/src/components/Header.tsx b/src/components/Header.tsx index be70b06a..84dd358f 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -1,6 +1,10 @@ import React, { useState } from 'react' +import { withExperiment } from "../../probat/runtime"; +import { PROBAT_COMPONENTS, PROBAT_REGISTRIES } from "../../probat/index"; import './Header.css' +const __PROBAT_KEY__ = "src/components/Header.tsx"; + const Header: React.FC = () => { const [isMenuOpen, setIsMenuOpen] = useState(false) @@ -43,4 +47,11 @@ const Header: React.FC = () => { ) } -export default Header +// Probat Generate Lines. +export default (() => { + const meta = PROBAT_COMPONENTS[__PROBAT_KEY__]; + const reg = PROBAT_REGISTRIES[__PROBAT_KEY__] as Record> | undefined; + return (meta?.proposalId && reg) + ? withExperiment(Header as any, { proposalId: meta.proposalId, registry: reg }) + : Header; +})();