diff --git a/apps/code/src/renderer/components/MainLayout.tsx b/apps/code/src/renderer/components/MainLayout.tsx index f49e76d66..b45f5fa56 100644 --- a/apps/code/src/renderer/components/MainLayout.tsx +++ b/apps/code/src/renderer/components/MainLayout.tsx @@ -9,11 +9,15 @@ import { CommandCenterView } from "@features/command-center/components/CommandCe import { InboxView } from "@features/inbox/components/InboxView"; import { FolderSettingsView } from "@features/settings/components/FolderSettingsView"; import { SettingsDialog } from "@features/settings/components/SettingsDialog"; +import { useSettingsDialogStore } from "@features/settings/stores/settingsDialogStore"; import { MainSidebar } from "@features/sidebar/components/MainSidebar"; import { SkillsView } from "@features/skills/components/SkillsView"; import { TaskDetail } from "@features/task-detail/components/TaskDetail"; import { TaskInput } from "@features/task-detail/components/TaskInput"; import { useTasks } from "@features/tasks/hooks/useTasks"; +import { TourOverlay } from "@features/tour/components/TourOverlay"; +import { useTourStore } from "@features/tour/stores/tourStore"; +import { createFirstTaskTour } from "@features/tour/tours/createFirstTaskTour"; import { useConnectivity } from "@hooks/useConnectivity"; import { useIntegrations } from "@hooks/useIntegrations"; import { Box, Flex } from "@radix-ui/themes"; @@ -39,6 +43,11 @@ export function MainLayout() { const { data: tasks } = useTasks(); const { showPrompt, isChecking, check, dismiss } = useConnectivity(); + const startTour = useTourStore((s) => s.startTour); + const isFirstTaskTourDone = useTourStore((s) => + s.completedTourIds.includes(createFirstTaskTour.id), + ); + useIntegrations(); useTaskDeepLink(); @@ -54,6 +63,14 @@ export function MainLayout() { } }, [view, navigateToTaskInput]); + const settingsOpen = useSettingsDialogStore((s) => s.isOpen); + + useEffect(() => { + if (isFirstTaskTourDone || settingsOpen) return; + const timer = setTimeout(() => startTour(createFirstTaskTour.id), 600); + return () => clearTimeout(timer); + }, [isFirstTaskTourDone, settingsOpen, startTour]); + const handleToggleCommandMenu = useCallback(() => { toggleCommandMenu(); }, [toggleCommandMenu]); @@ -99,6 +116,7 @@ export function MainLayout() { onToggleShortcutsSheet={toggleShortcutsSheet} /> + ); diff --git a/apps/code/src/renderer/features/message-editor/components/PromptInput.tsx b/apps/code/src/renderer/features/message-editor/components/PromptInput.tsx index 0e591b7d7..fd61de063 100644 --- a/apps/code/src/renderer/features/message-editor/components/PromptInput.tsx +++ b/apps/code/src/renderer/features/message-editor/components/PromptInput.tsx @@ -54,6 +54,7 @@ export interface PromptInputProps { // manual submit override (for flows like new-task that submit outside the editor hook) onSubmitClick?: () => void; submitTooltipOverride?: string; + tourTarget?: string; } export const PromptInput = forwardRef( @@ -88,6 +89,7 @@ export const PromptInput = forwardRef( onBlur, onSubmitClick, submitTooltipOverride, + tourTarget, }, ref, ) => { @@ -236,6 +238,7 @@ export const PromptInput = forwardRef( onClick={handleSubmitClick} disabled={submitBlocked} aria-label="Send message" + {...(tourTarget && { "data-tour": `${tourTarget}-submit` })} > @@ -248,6 +251,10 @@ export const PromptInput = forwardRef( onClick={handleContainerClick} className={`h-auto bg-card ${isBashMode ? "ring-1 ring-blue-9" : ""}`} style={{ cursor: "text" }} + {...(tourTarget && { + "data-tour": `${tourTarget}-editor`, + "data-tour-ready": !isEmpty ? "true" : undefined, + })} > {attachments.length > 0 && ( diff --git a/apps/code/src/renderer/features/settings/components/sections/AdvancedSettings.tsx b/apps/code/src/renderer/features/settings/components/sections/AdvancedSettings.tsx index 40c1d4d37..4544d6902 100644 --- a/apps/code/src/renderer/features/settings/components/sections/AdvancedSettings.tsx +++ b/apps/code/src/renderer/features/settings/components/sections/AdvancedSettings.tsx @@ -2,6 +2,7 @@ import { useOnboardingStore } from "@features/onboarding/stores/onboardingStore" import { SettingRow } from "@features/settings/components/SettingRow"; import { useSettingsDialogStore } from "@features/settings/stores/settingsDialogStore"; import { useSettingsStore } from "@features/settings/stores/settingsStore"; +import { useTourStore } from "@features/tour/stores/tourStore"; import { useFeatureFlag } from "@hooks/useFeatureFlag"; import { Button, Flex, Switch } from "@radix-ui/themes"; import { clearApplicationStorage } from "@utils/clearStorage"; @@ -31,6 +32,18 @@ export function AdvancedSettings() { Reset + + + )} - + {workspaceMode === "cloud" ? ( + {targetRect && ( + + )} + , + document.body, + ); +} + +export function TourOverlay() { + const activeTourId = useTourStore((s) => s.activeTourId); + const activeStepIndex = useTourStore((s) => s.activeStepIndex); + const advance = useTourStore((s) => s.advance); + const dismiss = useTourStore((s) => s.dismiss); + + const tour = activeTourId ? TOUR_REGISTRY[activeTourId] : null; + const step = tour?.steps[activeStepIndex] ?? null; + + const selector = step ? `[data-tour="${step.target}"]` : null; + const targetRect = useElementRect(selector); + + const advancedRef = useRef(false); + + // biome-ignore lint/correctness/useExhaustiveDependencies: reset on step change + useEffect(() => { + advancedRef.current = false; + }, [activeStepIndex]); + + useEffect(() => { + if (!step || !activeTourId || step.advanceOn.type !== "click" || !selector) + return; + + const el = document.querySelector(selector); + if (!el) return; + + const tourId = activeTourId; + const stepId = step.id; + const handler = () => { + if (!advancedRef.current) { + advancedRef.current = true; + advance(tourId, stepId); + } + }; + + el.addEventListener("click", handler, { capture: true }); + return () => el.removeEventListener("click", handler, { capture: true }); + }, [step, selector, advance, activeTourId]); + + useEffect(() => { + if (!step || !activeTourId || step.advanceOn.type !== "action" || !selector) + return; + + const tourId = activeTourId; + const stepId = step.id; + const SETTLE_MS = 2000; + let settleTimer: ReturnType | null = null; + + const tryAdvance = () => { + const el = document.querySelector(selector); + if ( + el?.getAttribute("data-tour-ready") === "true" && + !advancedRef.current + ) { + advancedRef.current = true; + advance(tourId, stepId); + } + }; + + const resetTimer = () => { + if (settleTimer) clearTimeout(settleTimer); + const el = document.querySelector(selector); + if (el?.getAttribute("data-tour-ready") === "true") { + settleTimer = setTimeout(tryAdvance, SETTLE_MS); + } + }; + + const observer = new MutationObserver(resetTimer); + + const el = document.querySelector(selector); + if (el) { + observer.observe(el, { + subtree: true, + childList: true, + characterData: true, + attributes: true, + }); + resetTimer(); + } + + return () => { + observer.disconnect(); + if (settleTimer) clearTimeout(settleTimer); + }; + }, [step, selector, advance, activeTourId]); + + const settingsOpen = useSettingsDialogStore((s) => s.isOpen); + const commandMenuOpen = useCommandMenuStore((s) => s.isOpen); + const overlayBlocked = settingsOpen || commandMenuOpen; + const isActive = !!(tour && step && targetRect && !overlayBlocked); + + return ( + <> + + {isActive && ( + + )} + + ); +} diff --git a/apps/code/src/renderer/features/tour/components/TourTooltip.tsx b/apps/code/src/renderer/features/tour/components/TourTooltip.tsx new file mode 100644 index 000000000..12f6a74fb --- /dev/null +++ b/apps/code/src/renderer/features/tour/components/TourTooltip.tsx @@ -0,0 +1,281 @@ +import { Button, Flex, Text, Theme } from "@radix-ui/themes"; +import { useThemeStore } from "@stores/themeStore"; +import { AnimatePresence, motion, useAnimationControls } from "framer-motion"; +import { useEffect } from "react"; +import { createPortal } from "react-dom"; +import type { TooltipPlacement, TourStep } from "../types"; +import { calculateTooltipPlacement } from "../utils/calculateTooltipPlacement"; + +interface TourTooltipProps { + step: TourStep; + stepNumber: number; + totalSteps: number; + onDismiss: () => void; + targetRect: DOMRect; +} + +const HOG_SIZE = 64; +const HOG_GAP = 8; +const BUBBLE_MAX_WIDTH = 280; +const TOOLTIP_WIDTH_ESTIMATE = BUBBLE_MAX_WIDTH + HOG_GAP + HOG_SIZE; +const TOOLTIP_HEIGHT_ESTIMATE = 100; + +const CARET_SIZE = 12; +const CARET_INNER = 11; + +const talkingAnimation = { + rotate: [0, -3, 3, -2, 2, 0], + y: [0, -2, 0, -1, 0], + transition: { + duration: 0.4, + repeat: Infinity, + repeatDelay: 0.1, + }, +}; + +const hogEntranceVariants = { + initial: { opacity: 0, scale: 0.5 }, + animate: { + opacity: 1, + scale: 1, + transition: { + type: "spring" as const, + stiffness: 400, + damping: 18, + delay: 0.15, + }, + }, + exit: { + opacity: 0, + scale: 0.5, + transition: { duration: 0.1 }, + }, +}; + +const CARET_SIDE_MAP: Record< + TooltipPlacement, + "left" | "right" | "top" | "bottom" +> = { + right: "left", + left: "right", + bottom: "top", + top: "bottom", +}; + +const TRANSFORM_ORIGIN_MAP: Record = { + right: "left center", + left: "right center", + bottom: "top center", + top: "bottom center", +}; + +function getBubbleVariants(placement: TooltipPlacement) { + const dx = placement === "right" ? 12 : placement === "left" ? -12 : 0; + const dy = placement === "bottom" ? -12 : placement === "top" ? 12 : 0; + + return { + initial: { opacity: 0, scale: 0.92, x: dx, y: dy }, + animate: { + opacity: 1, + scale: 1, + x: 0, + y: 0, + transition: { type: "spring" as const, stiffness: 300, damping: 24 }, + }, + exit: { + opacity: 0, + scale: 0.95, + x: dx * 0.5, + y: dy * 0.5, + transition: { duration: 0.15 }, + }, + }; +} + +const COLORED_BORDER: Record = { + left: "borderRight", + right: "borderLeft", + top: "borderBottom", + bottom: "borderTop", +}; + +function caretTriangle( + side: "left" | "right" | "top" | "bottom", + size: number, + offset: number, + color: string, +): React.CSSProperties { + const isHorizontal = side === "left" || side === "right"; + const [t1, t2] = isHorizontal + ? ["borderTop", "borderBottom"] + : ["borderLeft", "borderRight"]; + + return { + position: "absolute", + width: 0, + height: 0, + [isHorizontal ? "top" : "left"]: `calc(50% + ${offset}px)`, + [side]: -size, + [isHorizontal ? "marginTop" : "marginLeft"]: -size, + [t1]: `${size}px solid transparent`, + [t2]: `${size}px solid transparent`, + [COLORED_BORDER[side]]: `${size}px solid ${color}`, + }; +} + +function Caret({ + side, + offset = 0, +}: { + side: "left" | "right" | "top" | "bottom"; + offset?: number; +}) { + return ( + <> +
+
+ + ); +} + +export function TourTooltip({ + step, + stepNumber, + totalSteps, + onDismiss, + targetRect, +}: TourTooltipProps) { + const isDarkMode = useThemeStore((s) => s.isDarkMode); + const controls = useAnimationControls(); + + const { placement, x, y, arrowOffset } = calculateTooltipPlacement( + targetRect, + TOOLTIP_WIDTH_ESTIMATE, + TOOLTIP_HEIGHT_ESTIMATE, + step.preferredPlacement, + ); + + const caretSide = CARET_SIDE_MAP[placement]; + const hogOnRight = true; + const bubbleVariants = getBubbleVariants(placement); + + // biome-ignore lint/correctness/useExhaustiveDependencies: restart animation on step change + useEffect(() => { + controls.stop(); + const timer = setTimeout(() => { + controls.start(talkingAnimation); + }, 500); + return () => clearTimeout(timer); + }, [controls, step.id]); + + const hogElement = ( + + + + ); + + return createPortal( + + +
+ {!hogOnRight && hogElement} + + + + + + {step.message} + + + + {stepNumber}/{totalSteps} + + + + + + + {hogOnRight && hogElement} +
+ + , + document.body, + ); +} diff --git a/apps/code/src/renderer/features/tour/hooks/useElementRect.ts b/apps/code/src/renderer/features/tour/hooks/useElementRect.ts new file mode 100644 index 000000000..4172bd993 --- /dev/null +++ b/apps/code/src/renderer/features/tour/hooks/useElementRect.ts @@ -0,0 +1,65 @@ +import { useEffect, useState } from "react"; + +function getRect(selector: string): DOMRect | null { + const el = document.querySelector(selector); + return el ? el.getBoundingClientRect() : null; +} + +function rectsEqual(a: DOMRect | null, b: DOMRect | null): boolean { + if (a === b) return true; + if (!a || !b) return false; + return ( + Math.abs(a.top - b.top) < 1 && + Math.abs(a.left - b.left) < 1 && + Math.abs(a.width - b.width) < 1 && + Math.abs(a.height - b.height) < 1 + ); +} + +export function useElementRect(selector: string | null): DOMRect | null { + const [rect, setRect] = useState(null); + + useEffect(() => { + if (!selector) { + setRect(null); + return; + } + + let prev: DOMRect | null = null; + + const measure = () => { + const next = getRect(selector); + if (!rectsEqual(next, prev)) { + prev = next; + setRect(next ? DOMRect.fromRect(next) : null); + } + }; + + measure(); + + const onScroll = () => measure(); + window.addEventListener("scroll", onScroll, { + capture: true, + passive: true, + }); + window.addEventListener("resize", measure); + + const observer = new MutationObserver(measure); + observer.observe(document.body, { + childList: true, + subtree: true, + attributes: true, + attributeFilter: ["data-tour", "data-tour-ready", "style", "class"], + }); + + return () => { + window.removeEventListener("scroll", onScroll, { + capture: true, + } as EventListenerOptions); + window.removeEventListener("resize", measure); + observer.disconnect(); + }; + }, [selector]); + + return rect; +} diff --git a/apps/code/src/renderer/features/tour/stores/tourStore.ts b/apps/code/src/renderer/features/tour/stores/tourStore.ts new file mode 100644 index 000000000..ee8a2ad7b --- /dev/null +++ b/apps/code/src/renderer/features/tour/stores/tourStore.ts @@ -0,0 +1,139 @@ +import { useOnboardingStore } from "@features/onboarding/stores/onboardingStore"; +import { ANALYTICS_EVENTS } from "@shared/types/analytics"; +import { track } from "@utils/analytics"; +import { create } from "zustand"; +import { persist } from "zustand/middleware"; +import { createFirstTaskTour } from "../tours/createFirstTaskTour"; +import { TOUR_REGISTRY } from "../tours/tourRegistry"; + +interface TourStoreState { + completedTourIds: string[]; + activeTourId: string | null; + activeStepIndex: number; +} + +interface TourStoreActions { + startTour: (tourId: string) => void; + advance: (tourId: string, stepId: string) => void; + completeTour: (tourId: string) => void; + dismiss: () => void; + resetTours: () => void; +} + +type TourStore = TourStoreState & TourStoreActions; + +export const useTourStore = create()( + persist( + (set, get) => ({ + completedTourIds: [], + activeTourId: null, + activeStepIndex: 0, + + startTour: (tourId) => { + const { completedTourIds, activeTourId } = get(); + if (completedTourIds.includes(tourId) || activeTourId === tourId) + return; + const tour = TOUR_REGISTRY[tourId]; + set({ activeTourId: tourId, activeStepIndex: 0 }); + track(ANALYTICS_EVENTS.TOUR_EVENT, { + tour_id: tourId, + action: "started", + step_id: tour?.steps[0]?.id, + step_index: 0, + total_steps: tour?.steps.length, + }); + }, + + advance: (tourId, stepId) => { + const { activeTourId, activeStepIndex } = get(); + if (activeTourId !== tourId) return; + + const tour = TOUR_REGISTRY[activeTourId]; + if (!tour) return; + + const currentStep = tour.steps[activeStepIndex]; + if (!currentStep || currentStep.id !== stepId) return; + + track(ANALYTICS_EVENTS.TOUR_EVENT, { + tour_id: tourId, + action: "step_advanced", + step_id: stepId, + step_index: activeStepIndex, + total_steps: tour.steps.length, + }); + + if (activeStepIndex >= tour.steps.length - 1) { + set((state) => { + if (!state.activeTourId) return state; + return { + completedTourIds: [...state.completedTourIds, state.activeTourId], + activeTourId: null, + activeStepIndex: 0, + }; + }); + track(ANALYTICS_EVENTS.TOUR_EVENT, { + tour_id: tourId, + action: "completed", + total_steps: tour.steps.length, + }); + } else { + set({ activeStepIndex: activeStepIndex + 1 }); + } + }, + + completeTour: (tourId) => { + const { completedTourIds } = get(); + if (completedTourIds.includes(tourId)) return; + const tour = TOUR_REGISTRY[tourId]; + set({ + completedTourIds: [...completedTourIds, tourId], + activeTourId: null, + activeStepIndex: 0, + }); + track(ANALYTICS_EVENTS.TOUR_EVENT, { + tour_id: tourId, + action: "completed", + total_steps: tour?.steps.length, + }); + }, + + dismiss: () => { + const { activeTourId, activeStepIndex } = get(); + if (!activeTourId) return; + const tour = TOUR_REGISTRY[activeTourId]; + track(ANALYTICS_EVENTS.TOUR_EVENT, { + tour_id: activeTourId, + action: "dismissed", + step_id: tour?.steps[activeStepIndex]?.id, + step_index: activeStepIndex, + total_steps: tour?.steps.length, + }); + set((state) => ({ + completedTourIds: [...state.completedTourIds, activeTourId], + activeTourId: null, + activeStepIndex: 0, + })); + }, + + resetTours: () => { + set({ completedTourIds: [], activeTourId: null, activeStepIndex: 0 }); + }, + }), + { + name: "tour-store", + partialize: (state) => ({ + completedTourIds: state.completedTourIds, + }), + onRehydrateStorage: () => () => { + const migrationKey = "tour-store-v1-migrated"; + if (localStorage.getItem(migrationKey)) return; + localStorage.setItem(migrationKey, "1"); + + const { hasCompletedOnboarding } = useOnboardingStore.getState(); + if (hasCompletedOnboarding) { + useTourStore.getState().completeTour(createFirstTaskTour.id); + } + }, + }, + ), +); diff --git a/apps/code/src/renderer/features/tour/tours/createFirstTaskTour.ts b/apps/code/src/renderer/features/tour/tours/createFirstTaskTour.ts new file mode 100644 index 000000000..bfc8c9c12 --- /dev/null +++ b/apps/code/src/renderer/features/tour/tours/createFirstTaskTour.ts @@ -0,0 +1,32 @@ +import builderHog from "@renderer/assets/images/hedgehogs/builder-hog-03.png"; +import explorerHog from "@renderer/assets/images/hedgehogs/explorer-hog.png"; +import happyHog from "@renderer/assets/images/hedgehogs/happy-hog.png"; +import type { TourDefinition } from "../types"; + +export const createFirstTaskTour: TourDefinition = { + id: "create-first-task", + steps: [ + { + id: "folder-picker", + target: "folder-picker", + hogSrc: explorerHog, + message: "Pick a repo to work with. This tells me where your code lives!", + advanceOn: { type: "action" }, + }, + { + id: "task-editor", + target: "task-input-editor", + hogSrc: builderHog, + message: + "Describe what you want to build or fix. Be as specific as you like!", + advanceOn: { type: "action" }, + }, + { + id: "submit-button", + target: "task-input-submit", + hogSrc: happyHog, + message: "Hit send or press Enter to launch your first agent!", + advanceOn: { type: "click" }, + }, + ], +}; diff --git a/apps/code/src/renderer/features/tour/tours/tourRegistry.ts b/apps/code/src/renderer/features/tour/tours/tourRegistry.ts new file mode 100644 index 000000000..c5c4b0f94 --- /dev/null +++ b/apps/code/src/renderer/features/tour/tours/tourRegistry.ts @@ -0,0 +1,6 @@ +import type { TourDefinition } from "../types"; +import { createFirstTaskTour } from "./createFirstTaskTour"; + +export const TOUR_REGISTRY: Record = { + [createFirstTaskTour.id]: createFirstTaskTour, +}; diff --git a/apps/code/src/renderer/features/tour/types.ts b/apps/code/src/renderer/features/tour/types.ts new file mode 100644 index 000000000..939653ba7 --- /dev/null +++ b/apps/code/src/renderer/features/tour/types.ts @@ -0,0 +1,17 @@ +export type TourStepAdvance = { type: "action" } | { type: "click" }; + +export type TooltipPlacement = "right" | "left" | "top" | "bottom"; + +export interface TourStep { + id: string; + target: string; + hogSrc: string; + message: string; + advanceOn: TourStepAdvance; + preferredPlacement?: TooltipPlacement; +} + +export interface TourDefinition { + id: string; + steps: TourStep[]; +} diff --git a/apps/code/src/renderer/features/tour/utils/calculateTooltipPlacement.ts b/apps/code/src/renderer/features/tour/utils/calculateTooltipPlacement.ts new file mode 100644 index 000000000..b7417f9b7 --- /dev/null +++ b/apps/code/src/renderer/features/tour/utils/calculateTooltipPlacement.ts @@ -0,0 +1,115 @@ +import type { TooltipPlacement } from "../types"; + +const TOOLTIP_MARGIN = 12; +const VIEWPORT_PADDING = 8; + +const DEFAULT_ORDER: TooltipPlacement[] = ["right", "left", "top", "bottom"]; + +export interface PlacedTooltip { + placement: TooltipPlacement; + x: number; + y: number; + arrowOffset: number; +} + +function clamp(value: number, min: number, max: number): number { + return Math.max(min, Math.min(max, value)); +} + +export function calculateTooltipPlacement( + targetRect: DOMRect, + tooltipWidth: number, + tooltipHeight: number, + preferred?: TooltipPlacement, +): PlacedTooltip { + const vw = window.innerWidth; + const vh = window.innerHeight; + + const spaceRight = vw - targetRect.right; + const spaceLeft = targetRect.left; + const spaceAbove = targetRect.top; + + const targetCenterX = targetRect.left + targetRect.width / 2; + const targetCenterY = targetRect.top + targetRect.height / 2; + + const order = preferred + ? [preferred, ...DEFAULT_ORDER.filter((p) => p !== preferred)] + : DEFAULT_ORDER; + + for (const placement of order) { + switch (placement) { + case "right": { + if (spaceRight < tooltipWidth + TOOLTIP_MARGIN) break; + const idealY = targetCenterY - tooltipHeight / 2; + const y = clamp( + idealY, + VIEWPORT_PADDING, + vh - VIEWPORT_PADDING - tooltipHeight, + ); + return { + placement, + x: targetRect.right + TOOLTIP_MARGIN, + y, + arrowOffset: idealY - y, + }; + } + case "left": { + if (spaceLeft < tooltipWidth + TOOLTIP_MARGIN) break; + const idealY = targetCenterY - tooltipHeight / 2; + const y = clamp( + idealY, + VIEWPORT_PADDING, + vh - VIEWPORT_PADDING - tooltipHeight, + ); + return { + placement, + x: targetRect.left - TOOLTIP_MARGIN - tooltipWidth, + y, + arrowOffset: idealY - y, + }; + } + case "top": { + if (spaceAbove < tooltipHeight + TOOLTIP_MARGIN) break; + const idealX = targetCenterX - tooltipWidth / 2; + const x = clamp( + idealX, + VIEWPORT_PADDING, + vw - VIEWPORT_PADDING - tooltipWidth, + ); + return { + placement, + x, + y: targetRect.top - TOOLTIP_MARGIN - tooltipHeight, + arrowOffset: idealX - x, + }; + } + case "bottom": { + const idealX = targetCenterX - tooltipWidth / 2; + const x = clamp( + idealX, + VIEWPORT_PADDING, + vw - VIEWPORT_PADDING - tooltipWidth, + ); + return { + placement, + x, + y: targetRect.bottom + TOOLTIP_MARGIN, + arrowOffset: idealX - x, + }; + } + } + } + + const idealX = targetCenterX - tooltipWidth / 2; + const x = clamp( + idealX, + VIEWPORT_PADDING, + vw - VIEWPORT_PADDING - tooltipWidth, + ); + return { + placement: "bottom", + x, + y: targetRect.bottom + TOOLTIP_MARGIN, + arrowOffset: idealX - x, + }; +} diff --git a/apps/code/src/shared/types/analytics.ts b/apps/code/src/shared/types/analytics.ts index 90dad0ea0..1c612c4aa 100644 --- a/apps/code/src/shared/types/analytics.ts +++ b/apps/code/src/shared/types/analytics.ts @@ -198,6 +198,17 @@ export interface SessionConfigChangedProperties { to_value: string; } +// Tour events +type TourAction = "started" | "step_advanced" | "dismissed" | "completed"; + +export interface TourEventProperties { + tour_id: string; + action: TourAction; + step_id?: string; + step_index?: number; + total_steps?: number; +} + // Branch mismatch events type BranchMismatchAction = "switch" | "continue" | "cancel"; @@ -287,6 +298,9 @@ export const ANALYTICS_EVENTS = { BRANCH_MISMATCH_WARNING_SHOWN: "Branch mismatch warning shown", BRANCH_MISMATCH_ACTION: "Branch mismatch action", + // Tour events + TOUR_EVENT: "Tour event", + // Error events TASK_CREATION_FAILED: "Task creation failed", AGENT_SESSION_ERROR: "Agent session error", @@ -347,6 +361,9 @@ export type EventPropertyMap = { [ANALYTICS_EVENTS.BRANCH_MISMATCH_WARNING_SHOWN]: BranchMismatchWarningShownProperties; [ANALYTICS_EVENTS.BRANCH_MISMATCH_ACTION]: BranchMismatchActionProperties; + // Tour events + [ANALYTICS_EVENTS.TOUR_EVENT]: TourEventProperties; + // Error events [ANALYTICS_EVENTS.TASK_CREATION_FAILED]: TaskCreationFailedProperties; [ANALYTICS_EVENTS.AGENT_SESSION_ERROR]: AgentSessionErrorProperties; diff --git a/packages/agent/tsup.config.ts b/packages/agent/tsup.config.ts index b11d7453d..a41ee8c5a 100644 --- a/packages/agent/tsup.config.ts +++ b/packages/agent/tsup.config.ts @@ -55,7 +55,7 @@ const sharedOptions = { splitting: false, outDir: "dist", target: "node20", - noExternal: ["@posthog/shared", "@posthog/git"], + noExternal: ["@posthog/shared", "@posthog/git", "@posthog/enricher"], external: [ ...builtinModules, ...builtinModules.map((m) => `node:${m}`), diff --git a/packages/git/vitest.config.ts b/packages/git/vitest.config.ts index eef4c3f9c..6011860bb 100644 --- a/packages/git/vitest.config.ts +++ b/packages/git/vitest.config.ts @@ -6,5 +6,6 @@ export default defineConfig({ environment: "node", include: ["src/**/*.test.ts"], exclude: ["**/node_modules/**", "**/.git/**"], + testTimeout: 10_000, }, }); diff --git a/scripts/clean-posthog-code-macos.sh b/scripts/clean-posthog-code-macos.sh index 814cd6167..092c10577 100755 --- a/scripts/clean-posthog-code-macos.sh +++ b/scripts/clean-posthog-code-macos.sh @@ -3,28 +3,38 @@ # Clean PostHog Code app data from macOS # # Usage: -# ./scripts/clean-posthog-code-macos.sh # Clean data only -# ./scripts/clean-posthog-code-macos.sh --app # Clean data and delete app +# ./scripts/clean-posthog-code-macos.sh # Clean dev data only +# ./scripts/clean-posthog-code-macos.sh --all # Clean all data (dev + production + legacy) +# ./scripts/clean-posthog-code-macos.sh --app # Clean all data and delete app set -e DELETE_APP=false +CLEAN_ALL=false for arg in "$@"; do case $arg in + --all) + CLEAN_ALL=true + shift + ;; --app) DELETE_APP=true + CLEAN_ALL=true shift ;; -h|--help) - echo "Usage: $0 [--app]" + echo "Usage: $0 [--all] [--app]" echo "" echo "Options:" - echo " --app Also delete PostHog Code.app from /Applications" + echo " --all Clean all data (dev + production + legacy). Without this, only dev data is cleaned." + echo " --app Clean all data and delete PostHog Code.app from /Applications" echo "" - echo "This script removes:" - echo " - ~/Library/Application Support/@posthog/posthog-code" + echo "By default (no flags), only dev data is cleaned:" echo " - ~/Library/Application Support/@posthog/posthog-code-dev" + echo "" + echo "With --all, also removes:" + echo " - ~/Library/Application Support/@posthog/posthog-code" echo " - ~/Library/Application Support/@posthog/Array (legacy)" echo " - ~/Library/Application Support/@posthog/Twig (legacy)" echo " - ~/Library/Application Support/@posthog/twig-dev (legacy)" @@ -38,118 +48,124 @@ for arg in "$@"; do esac done -echo "Cleaning PostHog Code data from macOS..." -echo "" - -# Application Support - current electron data locations -if [ -d "$HOME/Library/Application Support/@posthog/posthog-code" ]; then - echo "Removing ~/Library/Application Support/@posthog/posthog-code" - rm -rf "$HOME/Library/Application Support/@posthog/posthog-code" +if [ "$CLEAN_ALL" = true ]; then + echo "Cleaning all PostHog Code data from macOS..." +else + echo "Cleaning PostHog Code dev data from macOS..." fi +echo "" +# Dev data (always cleaned) if [ -d "$HOME/Library/Application Support/@posthog/posthog-code-dev" ]; then echo "Removing ~/Library/Application Support/@posthog/posthog-code-dev" rm -rf "$HOME/Library/Application Support/@posthog/posthog-code-dev" fi -# Application Support - legacy locations -if [ -d "$HOME/Library/Application Support/@posthog/Array" ]; then - echo "Removing ~/Library/Application Support/@posthog/Array" - rm -rf "$HOME/Library/Application Support/@posthog/Array" -fi +if [ "$CLEAN_ALL" = true ]; then + # Application Support - production + if [ -d "$HOME/Library/Application Support/@posthog/posthog-code" ]; then + echo "Removing ~/Library/Application Support/@posthog/posthog-code" + rm -rf "$HOME/Library/Application Support/@posthog/posthog-code" + fi -if [ -d "$HOME/Library/Application Support/@posthog/Twig" ]; then - echo "Removing ~/Library/Application Support/@posthog/Twig" - rm -rf "$HOME/Library/Application Support/@posthog/Twig" -fi + # Application Support - legacy locations + if [ -d "$HOME/Library/Application Support/@posthog/Array" ]; then + echo "Removing ~/Library/Application Support/@posthog/Array" + rm -rf "$HOME/Library/Application Support/@posthog/Array" + fi -if [ -d "$HOME/Library/Application Support/@posthog/twig-dev" ]; then - echo "Removing ~/Library/Application Support/@posthog/twig-dev" - rm -rf "$HOME/Library/Application Support/@posthog/twig-dev" -fi + if [ -d "$HOME/Library/Application Support/@posthog/Twig" ]; then + echo "Removing ~/Library/Application Support/@posthog/Twig" + rm -rf "$HOME/Library/Application Support/@posthog/Twig" + fi -# Clean up empty @posthog parent folder if it exists and is empty -if [ -d "$HOME/Library/Application Support/@posthog" ]; then - rmdir "$HOME/Library/Application Support/@posthog" 2>/dev/null || true -fi + if [ -d "$HOME/Library/Application Support/@posthog/twig-dev" ]; then + echo "Removing ~/Library/Application Support/@posthog/twig-dev" + rm -rf "$HOME/Library/Application Support/@posthog/twig-dev" + fi -# Legacy locations (in case they exist) -if [ -d "$HOME/Library/Application Support/twig" ]; then - echo "Removing ~/Library/Application Support/twig" - rm -rf "$HOME/Library/Application Support/twig" -fi + if [ -d "$HOME/Library/Application Support/twig" ]; then + echo "Removing ~/Library/Application Support/twig" + rm -rf "$HOME/Library/Application Support/twig" + fi -if [ -d "$HOME/Library/Application Support/Twig" ]; then - echo "Removing ~/Library/Application Support/Twig" - rm -rf "$HOME/Library/Application Support/Twig" -fi + if [ -d "$HOME/Library/Application Support/Twig" ]; then + echo "Removing ~/Library/Application Support/Twig" + rm -rf "$HOME/Library/Application Support/Twig" + fi -# Preferences -if [ -f "$HOME/Library/Preferences/com.posthog.array.plist" ]; then - echo "Removing ~/Library/Preferences/com.posthog.array.plist" - rm -f "$HOME/Library/Preferences/com.posthog.array.plist" -fi + # Preferences + if [ -f "$HOME/Library/Preferences/com.posthog.array.plist" ]; then + echo "Removing ~/Library/Preferences/com.posthog.array.plist" + rm -f "$HOME/Library/Preferences/com.posthog.array.plist" + fi -if [ -f "$HOME/Library/Preferences/com.posthog.twig.plist" ]; then - echo "Removing ~/Library/Preferences/com.posthog.twig.plist" - rm -f "$HOME/Library/Preferences/com.posthog.twig.plist" -fi + if [ -f "$HOME/Library/Preferences/com.posthog.twig.plist" ]; then + echo "Removing ~/Library/Preferences/com.posthog.twig.plist" + rm -f "$HOME/Library/Preferences/com.posthog.twig.plist" + fi -# Caches -if [ -d "$HOME/Library/Caches/com.posthog.array" ]; then - echo "Removing ~/Library/Caches/com.posthog.array" - rm -rf "$HOME/Library/Caches/com.posthog.array" -fi + # Caches + if [ -d "$HOME/Library/Caches/com.posthog.array" ]; then + echo "Removing ~/Library/Caches/com.posthog.array" + rm -rf "$HOME/Library/Caches/com.posthog.array" + fi -if [ -d "$HOME/Library/Caches/com.posthog.twig" ]; then - echo "Removing ~/Library/Caches/com.posthog.twig" - rm -rf "$HOME/Library/Caches/com.posthog.twig" -fi + if [ -d "$HOME/Library/Caches/com.posthog.twig" ]; then + echo "Removing ~/Library/Caches/com.posthog.twig" + rm -rf "$HOME/Library/Caches/com.posthog.twig" + fi -if [ -d "$HOME/Library/Caches/twig" ]; then - echo "Removing ~/Library/Caches/twig" - rm -rf "$HOME/Library/Caches/twig" -fi + if [ -d "$HOME/Library/Caches/twig" ]; then + echo "Removing ~/Library/Caches/twig" + rm -rf "$HOME/Library/Caches/twig" + fi -if [ -d "$HOME/Library/Caches/Twig" ]; then - echo "Removing ~/Library/Caches/Twig" - rm -rf "$HOME/Library/Caches/Twig" -fi + if [ -d "$HOME/Library/Caches/Twig" ]; then + echo "Removing ~/Library/Caches/Twig" + rm -rf "$HOME/Library/Caches/Twig" + fi -# Home directory data (logs and cache) -if [ -d "$HOME/.posthog-code" ]; then - echo "Removing ~/.posthog-code" - rm -rf "$HOME/.posthog-code" -fi + # Home directory data (logs and cache) + if [ -d "$HOME/.posthog-code" ]; then + echo "Removing ~/.posthog-code" + rm -rf "$HOME/.posthog-code" + fi -# Logs -if [ -d "$HOME/Library/Logs/PostHog Code" ]; then - echo "Removing ~/Library/Logs/PostHog Code" - rm -rf "$HOME/Library/Logs/PostHog Code" -fi + # Logs + if [ -d "$HOME/Library/Logs/PostHog Code" ]; then + echo "Removing ~/Library/Logs/PostHog Code" + rm -rf "$HOME/Library/Logs/PostHog Code" + fi -if [ -d "$HOME/Library/Logs/twig" ]; then - echo "Removing ~/Library/Logs/twig" - rm -rf "$HOME/Library/Logs/twig" -fi + if [ -d "$HOME/Library/Logs/twig" ]; then + echo "Removing ~/Library/Logs/twig" + rm -rf "$HOME/Library/Logs/twig" + fi -if [ -d "$HOME/Library/Logs/Twig" ]; then - echo "Removing ~/Library/Logs/Twig" - rm -rf "$HOME/Library/Logs/Twig" -fi + if [ -d "$HOME/Library/Logs/Twig" ]; then + echo "Removing ~/Library/Logs/Twig" + rm -rf "$HOME/Library/Logs/Twig" + fi -# Saved Application State -if [ -d "$HOME/Library/Saved Application State/com.posthog.array.savedState" ]; then - echo "Removing ~/Library/Saved Application State/com.posthog.array.savedState" - rm -rf "$HOME/Library/Saved Application State/com.posthog.array.savedState" + # Saved Application State + if [ -d "$HOME/Library/Saved Application State/com.posthog.array.savedState" ]; then + echo "Removing ~/Library/Saved Application State/com.posthog.array.savedState" + rm -rf "$HOME/Library/Saved Application State/com.posthog.array.savedState" + fi + + if [ -d "$HOME/Library/Saved Application State/com.posthog.twig.savedState" ]; then + echo "Removing ~/Library/Saved Application State/com.posthog.twig.savedState" + rm -rf "$HOME/Library/Saved Application State/com.posthog.twig.savedState" + fi fi -if [ -d "$HOME/Library/Saved Application State/com.posthog.twig.savedState" ]; then - echo "Removing ~/Library/Saved Application State/com.posthog.twig.savedState" - rm -rf "$HOME/Library/Saved Application State/com.posthog.twig.savedState" +# Clean up empty @posthog parent folder if it exists and is empty +if [ -d "$HOME/Library/Application Support/@posthog" ]; then + rmdir "$HOME/Library/Application Support/@posthog" 2>/dev/null || true fi -# App (optional) +# App (optional, implies --all) if [ "$DELETE_APP" = true ]; then if [ -d "/Applications/PostHog Code.app" ]; then echo "Removing /Applications/PostHog Code.app" @@ -168,7 +184,7 @@ fi echo "" echo "Done!" -if [ "$DELETE_APP" = false ]; then +if [ "$CLEAN_ALL" = false ]; then echo "" - echo "Note: PostHog Code.app was not deleted. Use --app flag to also remove the app." + echo "Note: Only dev data was cleaned. Use --all to clean everything, or --app to also remove the app." fi