feat(analytics): session recording always-on + granular PM events

Session recording: disable_session_recording: false, startSessionRecording()
already called in loaded callback — guaranteed for all prod visitors.

New events:
- app_loaded (view_mode, locale, is_returning_user, source)
- view_toggled (list ↔ canvas)
- audit_opened / audit_block_added
- score_opened
- output_format_changed
- library_opened / template_applied (id, category)
- version_panel_opened / version_saved / version_restored / version_diff_viewed
- project_renamed

Author: Nyrok

app/src/App.tsx

@@ -59,11 +59,13 @@ const App = () => {
   const toggleView = (v: 'list' | 'canvas') => {
     setCanvasView(v)
     localStorage.setItem('flompt-canvas-view', v)
+    analytics.viewToggled(v)
   }
 
   const handleOpenVersions = () => {
     openVersions(true)
     if (currentProjectId) loadVersions(currentProjectId)
+    analytics.versionPanelOpened()
   }
 
   const handleApplyDebugFix = (fixedPrompt: string) => {
@@ -87,7 +89,15 @@ const App = () => {
   // Init PostHog after first render — non-blocking
   useEffect(() => {
     initAnalytics()
-    setSource(isExtension ? 'extension' : 'web')
+    const source = isExtension ? 'extension' : 'web'
+    setSource(source)
+    const isReturning = !!localStorage.getItem('flompt-compile-count')
+    analytics.appLoaded({
+      view_mode:         canvasView,
+      locale,
+      is_returning_user: isReturning,
+      source,
+    })
   }, [])
 
   // Auto-save current project when flowStore changes (debounced)
@@ -191,7 +201,7 @@ const App = () => {
         >
           <PromptInput />
           <div className="panel-divider" role="separator" />
-          <Sidebar onOpenLibrary={() => setLibraryOpen(true)} />
+          <Sidebar onOpenLibrary={() => { setLibraryOpen(true); analytics.libraryOpened() }} />
         </aside>
 
         <div

app/src/components/ProjectSelector.tsx

@@ -70,6 +70,7 @@ const ProjectSelector = () => {
   const handleFinishRename = () => {
     if (renamingId && renameValue.trim()) {
       renameProject(renamingId, renameValue.trim())
+      analytics.projectRenamed()
     }
     setRenamingId(null)
   }

app/src/components/PromptInput.tsx

@@ -196,6 +196,7 @@ const PromptInput = () => {
             }
             setAuditSeen(true)
             openAudit(true)
+            analytics.auditOpened()
           }}
           data-tour="audit-btn"
           type="button"

app/src/components/PromptOutput.tsx

@@ -117,6 +117,7 @@ const PromptOutput = () => {
 
   const handleCritic = async () => {
     if (!currentRaw) return
+    analytics.scoreOpened()
     // Reuse cached result if prompt hasn't changed
     if (criticResult && criticCachedPrompt === currentRaw) {
       openCritic(true)
@@ -161,7 +162,7 @@ const PromptOutput = () => {
           <Tooltip key={format} content={title} side="top">
             <button
               className={`format-btn${outputFormat === format ? ' format-btn-active' : ''}`}
-              onClick={() => setOutputFormat(format)}
+              onClick={() => { setOutputFormat(format); analytics.outputFormatChanged(format) }}
               aria-label={title}
               aria-pressed={outputFormat === format}
             >

app/src/components/TemplateLibrary.tsx

@@ -5,6 +5,7 @@ import { TEMPLATES, TEMPLATE_CATEGORIES, CATEGORY_COLORS, LOCALE_TO_LANG } from
 import type { TemplateCategory } from '@/lib/templates'
 import { useFlowStore } from '@/store/flowStore'
 import { useLocale } from '@/i18n/LocaleContext'
+import { analytics } from '@/lib/analytics'
 import type { FlomptNode } from '@/types/blocks'
 
 const TemplateLibrary = ({ onClose }: { onClose?: () => void }) => {
@@ -40,6 +41,7 @@ const TemplateLibrary = ({ onClose }: { onClose?: () => void }) => {
     setEdges([])
     setCompiledPrompt(null)
     setLoadedId(templateId)
+    analytics.templateApplied(templateId, tpl.category)
     setTimeout(() => {
       setActiveTab('canvas')
       setLoadedId(null)

app/src/features/audit/AuditPanel.tsx

@@ -3,6 +3,7 @@ import { X, CheckCircle2, XCircle, Plus, ShieldCheck } from 'lucide-react'
 import { useAuditStore } from './useAuditStore'
 import { useFlowStore } from '@/store/flowStore'
 import { useLocale } from '@/i18n/LocaleContext'
+import { analytics } from '@/lib/analytics'
 import { BLOCK_META, DEFAULT_RESPONSE_STYLE, generateResponseStyleContent } from '@/types/blocks'
 import type { BlockType, FlomptNode } from '@/types/blocks'
 import { findFreePosition, getCanvasSize } from '@/lib/layoutNodes'
@@ -53,6 +54,7 @@ export default function AuditPanel() {
 
     addNode(node)
     setAdded(prev => new Set(prev).add(type))
+    analytics.auditBlockAdded(type)
   }
 
   return (

app/src/features/versioning/useVersionStore.ts

@@ -3,6 +3,7 @@ import { nanoid } from 'nanoid'
 import { getDB, type PromptVersion } from '@/lib/db'
 import { useFlowStore } from '@/store/flowStore'
 import { computeLineDiff, type DiffLine } from '@/lib/diff'
+import { analytics } from '@/lib/analytics'
 
 interface VersionState {
   versions: PromptVersion[]
@@ -57,12 +58,14 @@ export const useVersionStore = create<VersionState>((set, get) => ({
     const db = await getDB()
     await db.put('versions', version)
     set(state => ({ versions: [version, ...state.versions] }))
+    analytics.versionSaved(versionNum)
   },
 
   rollback: (version) => {
     const store = useFlowStore.getState()
     store.setNodes(version.nodes)
     store.setEdges(version.edges)
+    analytics.versionRestored(version.version)
   },
 
   showDiff: (idA, idB) => {
@@ -72,6 +75,7 @@ export const useVersionStore = create<VersionState>((set, get) => ({
     if (!vA || !vB) return
     const lines = computeLineDiff(vA.output ?? vA.prompt, vB.output ?? vB.prompt)
     set({ diffView: { idA, idB, lines } })
+    analytics.versionDiffViewed()
   },
 
   closeDiff: () => set({ diffView: null }),

app/src/lib/analytics.ts

@@ -27,11 +27,12 @@ export const initAnalytics = () => {
     autocapture:       true,
     request_batching:  true,
 
-    // Session replay — mask prompt content (privacy)
+    // Session replay — always on, mask prompt content (privacy)
+    disable_session_recording: false,
     session_recording: {
-      maskAllInputs:      false,               // keep most inputs visible
-      maskInputOptions:   { textarea: true },  // mask prompt textarea only
-      recordCrossOriginIframes: false,
+      maskAllInputs:              false,               // keep most inputs visible
+      maskInputOptions:           { textarea: true },  // mask prompt textarea only
+      recordCrossOriginIframes:   false,
     },
 
     // Heatmaps
@@ -83,6 +84,10 @@ export const setSource = (source: 'web' | 'extension', aiPlatform?: string) => {
 // ── Typed event helpers ───────────────────────────────────────────────────────
 
 export const analytics = {
+  // App lifecycle
+  appLoaded: (props: { view_mode: string; locale: string; is_returning_user: boolean; source: string }) =>
+    track('app_loaded', props),
+
   // Tour
   tourStarted:    ()                                  => track('tour_started'),
   tourStep:       (step: number, title: string)       => track('tour_step',       { step, title }),
@@ -97,10 +102,33 @@ export const analytics = {
   promptCopied:       ()                              => track('prompt_copied'),
   promptExported:     (format: 'txt' | 'json')        => track('prompt_exported',     { format }),
 
+  // View
+  viewToggled: (to: 'list' | 'canvas')                => track('view_toggled',    { to }),
+
   // Blocks
   blockAdded:   (type: string)                        => track('block_added',     { type }),
   blockDeleted: (type: string)                        => track('block_deleted',   { type }),
 
+  // Audit
+  auditOpened:     ()                                 => track('audit_opened'),
+  auditBlockAdded: (type: string)                     => track('audit_block_added', { type }),
+
+  // Score / Critic
+  scoreOpened: ()                                     => track('score_opened'),
+
+  // Output
+  outputFormatChanged: (format: string)               => track('output_format_changed', { format }),
+
+  // Template library
+  libraryOpened:   ()                                 => track('library_opened'),
+  templateApplied: (id: string, category: string)    => track('template_applied', { template_id: id, category }),
+
+  // Version history
+  versionPanelOpened: ()                             => track('version_panel_opened'),
+  versionSaved:       (versionNum: number)           => track('version_saved',    { version_num: versionNum }),
+  versionRestored:    (versionNum: number)           => track('version_restored', { version_num: versionNum }),
+  versionDiffViewed:  ()                             => track('version_diff_viewed'),
+
   // Settings
   localeChanged: (locale: string)                     => track('locale_changed',  { locale }),
 
@@ -117,6 +145,7 @@ export const analytics = {
   projectCreated:  ()                     => track('project_created'),
   projectSwitched: (name: string)         => track('project_switched', { project_name: name }),
   projectDeleted:  ()                     => track('project_deleted'),
+  projectRenamed:  ()                     => track('project_renamed'),
 
   // Errors
   error: (context: string, message?: string)          => track('error', { context, message }),