changeset

.changeset/modern-weeks-knock.md

@@ -0,0 +1,5 @@
+---
+"claude-dev": minor
+---
+
+Only initialize posthog in the webview if the user has opted into telemetry

webview-ui/src/CustomPostHogProvider.tsx

@@ -0,0 +1,24 @@
+import { useEffect, type ReactNode } from "react"
+import { PostHogProvider } from "posthog-js/react"
+import posthog from "posthog-js"
+import { posthogConfig } from "@shared/services/config/posthog-config"
+import { useExtensionState } from "./context/ExtensionStateContext"
+
+export function CustomPostHogProvider({ children }: { children: ReactNode }) {
+	const { telemetrySetting } = useExtensionState()
+	const isTelemetryEnabled = telemetrySetting === "enabled"
+
+	useEffect(() => {
+		if (isTelemetryEnabled) {
+			posthog.init(posthogConfig.apiKey, {
+				api_host: posthogConfig.host,
+				autocapture: false,
+				disable_session_recording: true,
+			})
+		} else {
+			posthog.opt_out_capturing()
+		}
+	}, [isTelemetryEnabled])
+
+	return <PostHogProvider client={posthog}>{children}</PostHogProvider>
+}

webview-ui/src/Providers.tsx

@@ -1,25 +1,18 @@
-import type { ReactNode } from "react"
+import { type ReactNode } from "react"
 
 import { ExtensionStateContextProvider } from "./context/ExtensionStateContext"
 import { FirebaseAuthProvider } from "./context/FirebaseAuthContext"
 import { HeroUIProvider } from "@heroui/react"
-import { PostHogProvider } from "posthog-js/react"
-import { posthogConfig } from "@shared/services/config/posthog-config"
-import posthog from "posthog-js"
-
-posthog.init(posthogConfig.apiKey, {
-	api_host: posthogConfig.host,
-	autocapture: false,
-})
+import { CustomPostHogProvider } from "./CustomPostHogProvider"
 
 export function Providers({ children }: { children: ReactNode }) {
 	return (
 		<ExtensionStateContextProvider>
-			<PostHogProvider client={posthog}>
+			<CustomPostHogProvider>
 				<FirebaseAuthProvider>
 					<HeroUIProvider>{children}</HeroUIProvider>
 				</FirebaseAuthProvider>
-			</PostHogProvider>
+			</CustomPostHogProvider>
 		</ExtensionStateContextProvider>
 	)
 }

webview-ui/src/components/settings/SettingsView.tsx

@@ -10,7 +10,6 @@ import { useEvent } from "react-use"
 import { ExtensionMessage } from "@shared/ExtensionMessage"
 import BrowserSettingsSection from "./BrowserSettingsSection"
 import TerminalSettingsSection from "./TerminalSettingsSection"
-import { useFeatureFlag } from "@/hooks/useFeatureFlag"
 import { FEATURE_FLAGS } from "@shared/services/feature-flags/feature-flags"
 const { IS_DEV } = process.env
 
@@ -146,8 +145,6 @@ const SettingsView = ({ onDone }: SettingsViewProps) => {
 		handleSubmit(true)
 	}
 
-	const showCustomInstructions = useFeatureFlag(FEATURE_FLAGS.CUSTOM_INSTRUCTIONS)
-
 	return (
 		<div className="fixed top-0 left-0 right-0 bottom-0 pt-[10px] pr-0 pb-0 pl-5 flex flex-col overflow-hidden">
 			<div className="flex justify-between items-center mb-[13px] pr-[17px]">
@@ -186,24 +183,20 @@ const SettingsView = ({ onDone }: SettingsViewProps) => {
 					/>
 				)}
 
-				{showCustomInstructions && (
-					<div className="mb-[5px]">
-						<VSCodeTextArea
-							value={customInstructions ?? ""}
-							className="w-full"
-							resize="vertical"
-							rows={4}
-							placeholder={
-								'e.g. "Run unit tests at the end", "Use TypeScript with async/await", "Speak in Spanish"'
-							}
-							onInput={(e: any) => setCustomInstructions(e.target?.value ?? "")}>
-							<span className="font-medium">Custom Instructions</span>
-						</VSCodeTextArea>
-						<p className="text-xs mt-[5px] text-[var(--vscode-descriptionForeground)]">
-							These instructions are added to the end of the system prompt sent with every request.
-						</p>
-					</div>
-				)}
+				<div className="mb-[5px]">
+					<VSCodeTextArea
+						value={customInstructions ?? ""}
+						className="w-full"
+						resize="vertical"
+						rows={4}
+						placeholder={'e.g. "Run unit tests at the end", "Use TypeScript with async/await", "Speak in Spanish"'}
+						onInput={(e: any) => setCustomInstructions(e.target?.value ?? "")}>
+						<span className="font-medium">Custom Instructions</span>
+					</VSCodeTextArea>
+					<p className="text-xs mt-[5px] text-[var(--vscode-descriptionForeground)]">
+						These instructions are added to the end of the system prompt sent with every request.
+					</p>
+				</div>
 
 				<div className="mb-[5px]">
 					<VSCodeCheckbox

webview-ui/src/hooks/useFeatureFlag.ts

@@ -1,10 +1,23 @@
+import { useExtensionState } from "@/context/ExtensionStateContext"
 import { useFeatureFlagPayload } from "posthog-js/react"
 
 export const useFeatureFlag = (flagName: string): boolean => {
-	const payload = useFeatureFlagPayload(flagName) as { enabled: boolean }
-	if (payload && payload.enabled) {
-		return payload.enabled
+	const { telemetrySetting } = useExtensionState()
+
+	try {
+		const payload = useFeatureFlagPayload(flagName) as { enabled: boolean }
+		if (payload && typeof payload === "object") {
+			// Check if the enabled property exists and is a boolean
+			if ("enabled" in payload && typeof payload.enabled === "boolean") {
+				return payload.enabled
+			}
+		}
+
+		if (telemetrySetting === "enabled") {
+			console.warn(`Feature flag ${flagName} not found or missing enabled property.`)
+		}
+	} catch (error) {
+		console.error(`Error retrieving feature flag "${flagName}":`, error)
 	}
-	console.warn(`Feature flag ${flagName} not found or missing enabled property.`)
 	return false
 }