From d5d05465699ac39ce768c481ed6fd18a8f225243 Mon Sep 17 00:00:00 2001
From: "kiloconnect[bot]" <240665456+kiloconnect[bot]@users.noreply.github.com>
Date: Fri, 20 Mar 2026 17:58:50 +0000
Subject: [PATCH 1/2] feat(claw): evaluate button-vs-card feature flag for
 PostHog experiment tracking

---
 src/app/(app)/claw/components/ClawDashboard.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/app/(app)/claw/components/ClawDashboard.tsx b/src/app/(app)/claw/components/ClawDashboard.tsx
index 8a221da984..446d59fb2a 100644
--- a/src/app/(app)/claw/components/ClawDashboard.tsx
+++ b/src/app/(app)/claw/components/ClawDashboard.tsx
@@ -25,6 +25,7 @@ import { PermissionStep } from './PermissionStep';
 import { ProvisioningStep } from './ProvisioningStep';
 import type { ExecPreset } from './claw.types';
 import { BillingWrapper } from './billing/BillingWrapper';
+import { useFeatureFlagVariantKey } from 'posthog-js/react';
 
 type PopulatedClawStatus = KiloClawDashboardStatus & {
   status: NonNullable<KiloClawDashboardStatus['status']>;
@@ -45,6 +46,8 @@ export function ClawDashboard({
   isNewSetup: boolean;
   onNewSetupChange: (v: boolean) => void;
 }) {
+  useFeatureFlagVariantKey('button-vs-card'); // evaluate so PostHog attaches $feature/button-vs-card to subsequent events
+
   const mutations = useKiloClawMutations();
   const gatewayUrl = useGatewayUrl(status);
   const instanceStatus = hasPopulatedStatus(status) ? status : null;

From 4c75b0bdfb9c80d0068062431f4a8a70d32221a3 Mon Sep 17 00:00:00 2001
From: Pedro Heyerdahl <pedro@kilocode.ai>
Date: Fri, 20 Mar 2026 17:02:22 -0300
Subject: [PATCH 2/2] fix(claw): move button-vs-card flag eval to
 CreateInstanceCard

Moves useFeatureFlagVariantKey('button-vs-card') from ClawDashboard
(which renders for all users including those with existing instances)
to CreateInstanceCard (which only renders for users who haven't
provisioned yet). This scopes the experiment exposure to users who
can actually see the create CTA, avoiding population dilution.
---
 src/app/(app)/claw/components/ClawDashboard.tsx      | 3 ---
 src/app/(app)/claw/components/CreateInstanceCard.tsx | 5 ++++-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/app/(app)/claw/components/ClawDashboard.tsx b/src/app/(app)/claw/components/ClawDashboard.tsx
index 446d59fb2a..8a221da984 100644
--- a/src/app/(app)/claw/components/ClawDashboard.tsx
+++ b/src/app/(app)/claw/components/ClawDashboard.tsx
@@ -25,7 +25,6 @@ import { PermissionStep } from './PermissionStep';
 import { ProvisioningStep } from './ProvisioningStep';
 import type { ExecPreset } from './claw.types';
 import { BillingWrapper } from './billing/BillingWrapper';
-import { useFeatureFlagVariantKey } from 'posthog-js/react';
 
 type PopulatedClawStatus = KiloClawDashboardStatus & {
   status: NonNullable<KiloClawDashboardStatus['status']>;
@@ -46,8 +45,6 @@ export function ClawDashboard({
   isNewSetup: boolean;
   onNewSetupChange: (v: boolean) => void;
 }) {
-  useFeatureFlagVariantKey('button-vs-card'); // evaluate so PostHog attaches $feature/button-vs-card to subsequent events
-
   const mutations = useKiloClawMutations();
   const gatewayUrl = useGatewayUrl(status);
   const instanceStatus = hasPopulatedStatus(status) ? status : null;
diff --git a/src/app/(app)/claw/components/CreateInstanceCard.tsx b/src/app/(app)/claw/components/CreateInstanceCard.tsx
index 29b330c9c0..a48c545845 100644
--- a/src/app/(app)/claw/components/CreateInstanceCard.tsx
+++ b/src/app/(app)/claw/components/CreateInstanceCard.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { useEffect, useMemo, useRef, useState } from 'react';
-import { usePostHog } from 'posthog-js/react';
+import { useFeatureFlagVariantKey, usePostHog } from 'posthog-js/react';
 import { useQuery } from '@tanstack/react-query';
 import { toast } from 'sonner';
 import type { useKiloClawMutations } from '@/hooks/useKiloClaw';
@@ -25,6 +25,9 @@ export function CreateInstanceCard({
   mutations: ClawMutations;
   onProvisionStart?: () => void;
 }) {
+  // Evaluate the landing-page experiment flag so PostHog attaches
+  // $feature/button-vs-card to events fired in this component.
+  useFeatureFlagVariantKey('button-vs-card');
   const posthog = usePostHog();
   const trpc = useTRPC();
   const { data: billingStatus } = useQuery(trpc.kiloclaw.getBillingStatus.queryOptions());