newpr 0.6.2 → 0.6.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "newpr",
-  "version": "0.6.2",
+  "version": "0.6.5",
   "description": "AI-powered large PR review tool - understand PRs with 1000+ lines of changes",
   "module": "src/cli/index.ts",
   "type": "module",

package/src/cli/preflight.ts

@@ -62,16 +62,18 @@ async function checkAgent(name: AgentToolName): Promise<ToolStatus> {
 }
 
 export async function runPreflight(): Promise<PreflightResult> {
-	const [github, claude, opencode, codex] = await Promise.all([
+	const [github, claude, cursor, gemini, opencode, codex] = await Promise.all([
 		checkGithubCli(),
 		checkAgent("claude"),
+		checkAgent("cursor"),
+		checkAgent("gemini"),
 		checkAgent("opencode"),
 		checkAgent("codex"),
 	]);
 
 	return {
 		github,
-		agents: [claude, opencode, codex],
+		agents: [claude, cursor, gemini, opencode, codex],
 		openrouterKey: !!(process.env.OPENROUTER_API_KEY || await hasStoredApiKey()),
 	};
 }
@@ -115,11 +117,14 @@ export function printPreflight(result: PreflightResult): void {
 		}
 	}
 
+	const hasAgent = result.agents.some((a) => a.installed);
 	if (result.openrouterKey) {
 		console.log(`  ${check} OpenRouter API key`);
+	} else if (hasAgent) {
+		console.log(`  ${dim("·")} OpenRouter API key ${dim("· not configured (using agent as LLM fallback)")}`);
 	} else {
 		console.log(`  ${cross} OpenRouter API key ${dim("· not configured")}`);
-		console.log(`    ${dim("run: newpr auth")}`);
+		console.log(`    ${dim("run: newpr auth  —or—  install an agent (claude, gemini, etc.)")}`);
 	}
 
 	console.log("");

package/src/llm/client.ts

@@ -239,6 +239,10 @@ export function createLlmClient(options: LlmClientOptions): LlmClient {
 	return create(options.timeout);
 }
 
+export function hasApiKey(options: LlmClientOptions): boolean {
+	return !!options.api_key;
+}
+
 export interface ChatTool {
 	type: "function";
 	function: {

package/src/web/client/App.tsx

@@ -14,6 +14,8 @@ import { DetailPane, resolveDetail } from "./components/DetailPane.tsx";
 import { useChatState, ChatProvider, ChatInput } from "./components/ChatSection.tsx";
 import type { AnchorItem } from "./components/TipTapEditor.tsx";
 import { requestNotificationPermission } from "./lib/notify.ts";
+import { analytics, initAnalytics, getConsent } from "./lib/analytics.ts";
+import { AnalyticsConsent } from "./components/AnalyticsConsent.tsx";
 
 function getUrlParam(key: string): string | null {
 	return new URLSearchParams(window.location.search).get(key);
@@ -39,8 +41,12 @@ export function App() {
 	const features = useFeatures();
 	const bgAnalyses = useBackgroundAnalyses();
 	const initialLoadDone = useRef(false);
+	const [showConsent, setShowConsent] = useState(() => getConsent() === "pending");
 
-	useEffect(() => { requestNotificationPermission(); }, []);
+	useEffect(() => {
+		requestNotificationPermission();
+		initAnalytics();
+	}, []);
 	const [activeId, setActiveId] = useState<string | null>(null);
 
 	useEffect(() => {
@@ -73,6 +79,7 @@ export function App() {
 
 	const scrollGuardRef = useRef<number | null>(null);
 	const handleAnchorClick = useCallback((kind: "group" | "file" | "line", id: string) => {
+		analytics.detailOpened(kind);
 		const key = `${kind}:${id}`;
 		const main = document.querySelector("main");
 		const savedScroll = main?.scrollTop ?? 0;
@@ -133,6 +140,10 @@ export function App() {
 	) : null;
 
 	const [activeTab, setActiveTab] = useState(() => getUrlParam("tab") ?? "story");
+	const handleTabChange = useCallback((tab: string) => {
+		analytics.tabChanged(tab);
+		setActiveTab(tab);
+	}, []);
 	const chatState = useChatState(analysis.phase === "done" ? diffSessionId : null);
 
 	const anchorItems = useMemo<AnchorItem[]>(() => {
@@ -149,6 +160,7 @@ export function App() {
 
 	return (
 		<ChatProvider state={chatState} anchorItems={anchorItems} analyzedAt={analysis.result?.meta.analyzed_at}>
+		{showConsent && <AnalyticsConsent onDone={() => setShowConsent(false)} />}
 		<AppShell
 			theme={themeCtx.theme}
 			onThemeChange={themeCtx.setTheme}
@@ -187,7 +199,7 @@ export function App() {
 					onAnchorClick={handleAnchorClick}
 					cartoonEnabled={features.cartoon}
 					sessionId={diffSessionId}
-					onTabChange={setActiveTab}
+					onTabChange={handleTabChange}
 					onReanalyze={(prUrl: string) => { analysis.start(prUrl); }}
 					enabledPlugins={features.enabledPlugins}
 				/>

package/src/web/client/components/AnalyticsConsent.tsx

@@ -0,0 +1,88 @@
+import { useState } from "react";
+import { BarChart3, Shield } from "lucide-react";
+import { getConsent, setConsent, type ConsentState } from "../lib/analytics.ts";
+
+export function AnalyticsConsent({ onDone }: { onDone: () => void }) {
+	const [state] = useState<ConsentState>(() => getConsent());
+
+	if (state !== "pending") return null;
+
+	const handleAccept = () => {
+		setConsent("granted");
+		onDone();
+	};
+
+	const handleDecline = () => {
+		setConsent("denied");
+		onDone();
+	};
+
+	return (
+		<div className="fixed inset-0 z-[100] flex items-center justify-center">
+			<div className="fixed inset-0 bg-background/70 backdrop-blur-sm" />
+			<div className="relative z-10 w-full max-w-md mx-4 rounded-2xl border bg-background shadow-2xl overflow-hidden">
+				<div className="px-6 pt-6 pb-4">
+					<div className="flex items-center gap-3 mb-4">
+						<div className="flex h-10 w-10 items-center justify-center rounded-xl bg-blue-500/10">
+							<BarChart3 className="h-5 w-5 text-blue-500" />
+						</div>
+						<div>
+							<h2 className="text-sm font-semibold">Help improve newpr</h2>
+							<p className="text-[11px] text-muted-foreground">Anonymous usage analytics</p>
+						</div>
+					</div>
+
+					<p className="text-xs text-muted-foreground leading-relaxed mb-3">
+						We'd like to collect anonymous usage data to understand how newpr is used and improve the experience.
+					</p>
+
+					<div className="rounded-lg bg-muted/40 px-3.5 py-2.5 space-y-1.5 mb-4">
+						<div className="flex items-start gap-2">
+							<Shield className="h-3.5 w-3.5 text-emerald-500 mt-0.5 shrink-0" />
+							<div className="text-[11px] text-muted-foreground leading-relaxed">
+								<p className="font-medium text-foreground/80 mb-1">What we collect:</p>
+								<ul className="space-y-0.5 list-disc list-inside text-[10.5px]">
+									<li>Feature usage (which tabs, buttons, and actions you use)</li>
+									<li>Performance metrics (analysis duration, error rates)</li>
+									<li>Basic device info (browser, screen size)</li>
+								</ul>
+							</div>
+						</div>
+						<div className="flex items-start gap-2 pt-1">
+							<Shield className="h-3.5 w-3.5 text-emerald-500 mt-0.5 shrink-0" />
+							<div className="text-[11px] text-muted-foreground leading-relaxed">
+								<p className="font-medium text-foreground/80 mb-1">What we never collect:</p>
+								<ul className="space-y-0.5 list-disc list-inside text-[10.5px]">
+									<li>PR content, code, or commit messages</li>
+									<li>Chat messages or review comments</li>
+									<li>API keys, tokens, or personal data</li>
+								</ul>
+							</div>
+						</div>
+					</div>
+
+					<p className="text-[10px] text-muted-foreground/50 mb-4">
+						Powered by Google Analytics. You can change this anytime in Settings.
+					</p>
+				</div>
+
+				<div className="flex border-t">
+					<button
+						type="button"
+						onClick={handleDecline}
+						className="flex-1 px-4 py-3 text-xs text-muted-foreground hover:bg-muted/50 transition-colors"
+					>
+						Decline
+					</button>
+					<button
+						type="button"
+						onClick={handleAccept}
+						className="flex-1 px-4 py-3 text-xs font-medium bg-foreground text-background hover:opacity-90 transition-opacity"
+					>
+						Accept
+					</button>
+				</div>
+			</div>
+		</div>
+	);
+}

package/src/web/client/components/AppShell.tsx

@@ -7,6 +7,7 @@ import type { SessionRecord } from "../../../history/types.ts";
 import type { GithubUser } from "../hooks/useGithubUser.ts";
 import { SettingsPanel } from "./SettingsPanel.tsx";
 import { ResizeHandle } from "./ResizeHandle.tsx";
+import { analytics } from "../lib/analytics.ts";
 
 type Theme = "light" | "dark" | "system";
 
@@ -276,7 +277,7 @@ export function AppShell({
 								<button
 									type="button"
 									disabled={update.updating}
-									onClick={update.doUpdate}
+									onClick={() => { analytics.updateClicked(); update.doUpdate(); }}
 									className="w-full flex items-center justify-center gap-1.5 rounded-md bg-blue-500 hover:bg-blue-600 text-white text-[11px] font-medium py-1.5 transition-colors disabled:opacity-50"
 								>
 									{update.updating ? (
@@ -375,7 +376,7 @@ export function AppShell({
 						<div className="flex-1" />
 						<button
 							type="button"
-							onClick={() => setSettingsOpen(true)}
+							onClick={() => { analytics.settingsOpened(); setSettingsOpen(true); }}
 							className="flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground/40 hover:bg-accent/40 hover:text-foreground transition-colors"
 							title="Settings"
 						>
@@ -430,3 +431,5 @@ export function AppShell({
 		</div>
 	);
 }
+
+

package/src/web/client/components/InputScreen.tsx

@@ -1,6 +1,7 @@
 import { useState, useEffect } from "react";
-import { CornerDownLeft, Clock, GitPullRequest, Check, X, Minus } from "lucide-react";
+import { CornerDownLeft, Clock, GitPullRequest, Check, X, Minus, ExternalLink } from "lucide-react";
 import type { SessionRecord } from "../../../history/types.ts";
+import { analytics } from "../lib/analytics.ts";
 
 interface ToolStatus {
 	name: string;
@@ -111,85 +112,124 @@ export function InputScreen({
 	return (
 		<div className="flex flex-col items-center justify-center min-h-[60vh]">
 			<div className="w-full max-w-lg space-y-8">
-				<div className="space-y-2">
-					<div className="flex items-baseline gap-2">
-						<h1 className="text-sm font-semibold tracking-tight font-mono">newpr</h1>
-						{version && <span className="text-[10px] text-muted-foreground/30">v{version}</span>}
-						<span className="text-[10px] text-muted-foreground/40">AI code review</span>
-					</div>
-					<p className="text-xs text-muted-foreground">
-						Paste a GitHub PR URL to start analysis
-					</p>
-				</div>
+				<SponsorBanner />
 
-				<form onSubmit={handleSubmit}>
-					<div className={`flex items-center rounded-xl border bg-background transition-all ${
-						focused ? "ring-1 ring-ring border-foreground/15 shadow-sm" : "border-border"
-					}`}>
-						<GitPullRequest className="h-3.5 w-3.5 text-muted-foreground/40 ml-4 shrink-0" />
-						<input
-							type="text"
-							value={value}
-							onChange={(e) => setValue(e.target.value)}
-							onFocus={() => setFocused(true)}
-							onBlur={() => setFocused(false)}
-							placeholder="https://github.com/owner/repo/pull/123"
-							className="flex-1 h-11 bg-transparent px-3 text-xs font-mono placeholder:text-muted-foreground/40 focus:outline-none"
-							autoFocus
-						/>
-						<button
-							type="submit"
-							disabled={!value.trim()}
-							className="flex h-7 w-7 items-center justify-center rounded-lg bg-foreground text-background mr-2 transition-opacity disabled:opacity-20 hover:opacity-80"
-						>
-							<CornerDownLeft className="h-3.5 w-3.5" />
-						</button>
-					</div>
-					<div className="flex justify-end mt-2 pr-1">
-						<span className="text-[10px] text-muted-foreground/30">
-							Enter to analyze
-						</span>
+				<div className="space-y-2">
+						<div className="flex items-baseline gap-2">
+							<h1 className="text-sm font-semibold tracking-tight font-mono">newpr</h1>
+							{version && <span className="text-[10px] text-muted-foreground/30">v{version}</span>}
+							<span className="text-[10px] text-muted-foreground/40">AI code review</span>
+						</div>
+						<p className="text-xs text-muted-foreground">
+							Paste a GitHub PR URL to start analysis
+						</p>
 					</div>
-				</form>
 
-				{recents.length > 0 && (
-					<div className="space-y-2 pt-2">
-						<div className="text-[10px] font-medium text-muted-foreground/40 uppercase tracking-wider px-0.5">
-							Recent
+					<form onSubmit={handleSubmit}>
+						<div className={`flex items-center rounded-xl border bg-background transition-all ${
+							focused ? "ring-1 ring-ring border-foreground/15 shadow-sm" : "border-border"
+						}`}>
+							<GitPullRequest className="h-3.5 w-3.5 text-muted-foreground/40 ml-4 shrink-0" />
+							<input
+								type="text"
+								value={value}
+								onChange={(e) => setValue(e.target.value)}
+								onFocus={() => setFocused(true)}
+								onBlur={() => setFocused(false)}
+								placeholder="https://github.com/owner/repo/pull/123"
+								className="flex-1 h-11 bg-transparent px-3 text-xs font-mono placeholder:text-muted-foreground/40 focus:outline-none"
+								autoFocus
+							/>
+							<button
+								type="submit"
+								disabled={!value.trim()}
+								className="flex h-7 w-7 items-center justify-center rounded-lg bg-foreground text-background mr-2 transition-opacity disabled:opacity-20 hover:opacity-80"
+							>
+								<CornerDownLeft className="h-3.5 w-3.5" />
+							</button>
+						</div>
+						<div className="flex justify-end mt-2 pr-1">
+							<span className="text-[10px] text-muted-foreground/30">
+								Enter to analyze
+							</span>
 						</div>
-						<div className="space-y-px">
-							{recents.map((s) => (
-								<button
-									key={s.id}
-									type="button"
-									onClick={() => onSessionSelect?.(s.id)}
-									className="w-full flex items-center gap-3 rounded-lg px-3 py-2.5 text-left hover:bg-accent/50 transition-colors group"
-								>
-									<span className={`h-1.5 w-1.5 shrink-0 rounded-full ${RISK_DOT[s.risk_level] ?? RISK_DOT.medium}`} />
-									<div className="flex-1 min-w-0">
-										<div className="text-xs truncate group-hover:text-foreground transition-colors">
-											{s.pr_title}
+					</form>
+
+					{recents.length > 0 && (
+						<div className="space-y-2">
+							<div className="text-[10px] font-medium text-muted-foreground/40 uppercase tracking-wider px-0.5">
+								Recent
+							</div>
+							<div className="space-y-px">
+								{recents.map((s) => (
+									<button
+										key={s.id}
+										type="button"
+										onClick={() => onSessionSelect?.(s.id)}
+										className="w-full flex items-center gap-3 rounded-lg px-3 py-2.5 text-left hover:bg-accent/50 transition-colors group"
+									>
+										<span className={`h-1.5 w-1.5 shrink-0 rounded-full ${RISK_DOT[s.risk_level] ?? RISK_DOT.medium}`} />
+										<div className="flex-1 min-w-0">
+											<div className="text-xs truncate group-hover:text-foreground transition-colors">
+												{s.pr_title}
+											</div>
+											<div className="flex items-center gap-1.5 mt-0.5 text-[10px] text-muted-foreground/50">
+												<span className="font-mono truncate">{s.repo.split("/").pop()}</span>
+												<span className="font-mono">#{s.pr_number}</span>
+												<span className="text-muted-foreground/20">·</span>
+												<span className="text-green-600 dark:text-green-400">+{s.total_additions}</span>
+												<span className="text-red-600 dark:text-red-400">-{s.total_deletions}</span>
+											</div>
 										</div>
-										<div className="flex items-center gap-1.5 mt-0.5 text-[10px] text-muted-foreground/50">
-											<span className="font-mono truncate">{s.repo.split("/").pop()}</span>
-											<span className="font-mono">#{s.pr_number}</span>
-											<span className="text-muted-foreground/20">·</span>
-											<span className="text-green-600 dark:text-green-400">+{s.total_additions}</span>
-											<span className="text-red-600 dark:text-red-400">-{s.total_deletions}</span>
+										<div className="flex items-center gap-1 text-[10px] text-muted-foreground/30 shrink-0">
+											<Clock className="h-2.5 w-2.5" />
+											<span>{timeAgo(s.analyzed_at)}</span>
 										</div>
-									</div>
-									<div className="flex items-center gap-1 text-[10px] text-muted-foreground/30 shrink-0">
-										<Clock className="h-2.5 w-2.5" />
-										<span>{timeAgo(s.analyzed_at)}</span>
-									</div>
-								</button>
-							))}
+									</button>
+								))}
+							</div>
 						</div>
-					</div>
-				)}
+					)}
 
-				{preflight && <PreflightStatus data={preflight} />}
+					{preflight && <PreflightStatus data={preflight} />}
 			</div>
 		</div>
 	);
 }
+
+const SIONIC_HERO_BG = "https://www.sionic.ai/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fmain-intro-bg.1455295d.png&w=1920&q=75";
+
+function SponsorBanner() {
+	return (
+		<a
+			href="https://www.sionic.ai"
+			target="_blank"
+			rel="noopener noreferrer"
+			onClick={() => analytics.sponsorClicked("sionic_ai")}
+			className="group relative flex items-center gap-3.5 rounded-xl overflow-hidden px-4 py-3 transition-all hover:shadow-md hover:shadow-blue-500/10"
+			style={{ background: "linear-gradient(135deg, #071121 0%, #0d1b33 50%, #1a2d54 100%)" }}
+		>
+			<img
+				src={SIONIC_HERO_BG}
+				alt=""
+				className="absolute inset-0 w-full h-full object-cover object-bottom opacity-30 group-hover:opacity-45 transition-opacity pointer-events-none"
+			/>
+			<div className="absolute inset-0 bg-gradient-to-r from-[#071121]/70 via-transparent to-transparent pointer-events-none" />
+			<div className="relative flex items-center gap-3 flex-1 min-w-0">
+				<img
+					src="/assets/sionic-logo.png"
+					alt="Sionic AI"
+					className="h-4 w-auto shrink-0 drop-shadow-sm"
+				/>
+				<div className="h-3 w-px bg-white/15 shrink-0" />
+				<span className="text-[10px] text-white/45 truncate">
+					The Power of AI for Every Business
+				</span>
+			</div>
+			<div className="relative flex items-center gap-1.5 shrink-0">
+				<span className="text-[8px] text-white/20 uppercase tracking-widest">Ad</span>
+				<ExternalLink className="h-2.5 w-2.5 text-white/15 group-hover:text-white/40 transition-colors" />
+			</div>
+		</a>
+	);
+}

package/src/web/client/components/ReviewModal.tsx

@@ -2,6 +2,7 @@ import { useState, useRef, useCallback } from "react";
 import { X, Check, MessageSquare, Loader2, AlertCircle, ExternalLink } from "lucide-react";
 import { TipTapEditor, getTextWithAnchors } from "./TipTapEditor.tsx";
 import type { useEditor } from "@tiptap/react";
+import { analytics } from "../lib/analytics.ts";
 
 type ReviewEvent = "APPROVE" | "REQUEST_CHANGES" | "COMMENT";
 
@@ -53,6 +54,7 @@ export function ReviewModal({ prUrl, onClose }: ReviewModalProps) {
 			});
 			const data = await res.json() as { ok?: boolean; html_url?: string; error?: string };
 			if (data.ok) {
+				analytics.reviewSubmitted(event);
 				setResult({ ok: true, html_url: data.html_url });
 			} else {
 				setResult({ ok: false, error: data.error ?? "Failed to submit review" });

package/src/web/client/components/SettingsPanel.tsx

@@ -1,5 +1,6 @@
 import { useState, useEffect, useCallback, useRef } from "react";
 import { X, Check, Loader2, Search, ChevronDown } from "lucide-react";
+import { analytics, getConsent, setConsent } from "../lib/analytics.ts";
 
 interface ConfigData {
 	model: string;
@@ -69,6 +70,8 @@ export function SettingsPanel({ onClose, onFeaturesChange }: { onClose: () => vo
 	const save = useCallback(async (update: Record<string, unknown>) => {
 		setSaving(true);
 		setSaved(false);
+		const field = Object.keys(update).filter((k) => k !== "openrouter_api_key").join(",");
+		if (field) analytics.settingsChanged(field);
 		try {
 			await fetch("/api/config", {
 				method: "PUT",
@@ -265,11 +268,47 @@ export function SettingsPanel({ onClose, onFeaturesChange }: { onClose: () => vo
 						</div>
 					</Section>
 				)}
+				<Section title="Privacy">
+					<AnalyticsToggle />
+				</Section>
 			</div>
 		</div>
 	);
 }
 
+function AnalyticsToggle() {
+	const [consent, setLocal] = useState(() => getConsent());
+	const enabled = consent === "granted";
+
+	const toggle = () => {
+		const next = enabled ? "denied" : "granted";
+		setConsent(next);
+		setLocal(next);
+		analytics.settingsChanged("analytics");
+	};
+
+	return (
+		<Row label="Usage Analytics">
+			<div className="flex items-center gap-2">
+				<span className="text-[11px] text-muted-foreground/50">
+					{enabled ? "Enabled" : "Disabled"}
+				</span>
+				<button
+					type="button"
+					onClick={toggle}
+					className={`relative inline-flex h-4 w-7 items-center rounded-full shrink-0 transition-colors ${
+						enabled ? "bg-foreground" : "bg-muted"
+					}`}
+				>
+					<span className={`inline-block h-3 w-3 rounded-full bg-background transition-transform ${
+						enabled ? "translate-x-3.5" : "translate-x-0.5"
+					}`} />
+				</button>
+			</div>
+		</Row>
+	);
+}
+
 function ModelSelect({ value, models: allModels, onChange }: { value: string; models: ModelInfo[]; onChange: (id: string) => void }) {
 	const [open, setOpen] = useState(false);
 	const [search, setSearch] = useState("");

package/src/web/client/hooks/useAnalysis.ts

@@ -1,6 +1,7 @@
 import { useState, useCallback, useRef } from "react";
 import type { ProgressEvent } from "../../../analyzer/progress.ts";
 import type { NewprOutput } from "../../../types/output.ts";
+import { analytics } from "../lib/analytics.ts";
 
 type Phase = "idle" | "loading" | "done" | "error";
 
@@ -29,6 +30,7 @@ export function useAnalysis() {
 	const eventSourceRef = useRef<EventSource | null>(null);
 
 	const start = useCallback(async (prInput: string) => {
+		analytics.analysisStarted(0);
 		setState({
 			phase: "loading",
 			sessionId: null,
@@ -79,12 +81,16 @@ export function useAnalysis() {
 				eventSourceRef.current = null;
 				const resultRes = await fetch(`/api/analysis/${sessionId}`);
 				const data = await resultRes.json() as { result?: NewprOutput; historyId?: string };
-				setState((s) => ({
-					...s,
-					phase: "done",
-					result: data.result ?? null,
-					historyId: data.historyId ?? null,
-				}));
+				setState((s) => {
+					const durationSec = s.startedAt ? Math.round((Date.now() - s.startedAt) / 1000) : 0;
+					analytics.analysisCompleted(data.result?.files.length ?? 0, durationSec);
+					return {
+						...s,
+						phase: "done",
+						result: data.result ?? null,
+						historyId: data.historyId ?? null,
+					};
+				});
 			});
 
 			es.addEventListener("analysis_error", (e) => {
@@ -92,6 +98,7 @@ export function useAnalysis() {
 				eventSourceRef.current = null;
 				let msg = "Analysis failed";
 				try { msg = JSON.parse((e as MessageEvent).data).message ?? msg; } catch {}
+				analytics.analysisError(msg.slice(0, 100));
 				setState((s) => ({ ...s, phase: "error", error: msg }));
 			});
 
@@ -125,6 +132,7 @@ export function useAnalysis() {
 			const res = await fetch(`/api/sessions/${sessionId}`);
 			if (!res.ok) throw new Error("Session not found");
 			const data = await res.json() as NewprOutput;
+			analytics.sessionLoaded();
 			setState((s) => ({
 				...s,
 				phase: "done",

package/src/web/client/hooks/useChatStore.ts

@@ -1,5 +1,6 @@
 import { useEffect, useCallback, useSyncExternalStore } from "react";
 import { sendNotification } from "../lib/notify.ts";
+import { analytics } from "../lib/analytics.ts";
 import type { ChatMessage, ChatToolCall, ChatSegment } from "../../../types/output.ts";
 
 interface ChatSessionState {
@@ -73,6 +74,7 @@ class ChatStore {
 		if (s.loading) return;
 
 		const startTime = Date.now();
+		analytics.chatSent();
 		const userMsg: ChatMessage = { role: "user", content: text, timestamp: new Date().toISOString() };
 		this.update(sessionId, { messages: [...s.messages, userMsg], loading: true, streaming: { segments: [] } });
 
@@ -152,6 +154,8 @@ class ChatStore {
 			}
 
 			const cur = this.getOrCreate(sessionId);
+			const durationMs = Date.now() - startTime;
+			analytics.chatCompleted(Math.round(durationMs / 1000), allToolCalls.length > 0);
 			this.update(sessionId, {
 				messages: [...cur.messages, {
 					role: "assistant",
@@ -159,7 +163,7 @@ class ChatStore {
 					toolCalls: allToolCalls.length > 0 ? allToolCalls : undefined,
 					segments: orderedSegments.length > 0 ? orderedSegments : undefined,
 					timestamp: new Date().toISOString(),
-					durationMs: Date.now() - startTime,
+					durationMs,
 				}],
 			});
 			sendNotification("Chat response ready", fullText.slice(0, 100));

package/src/web/client/hooks/useTheme.ts

@@ -1,4 +1,5 @@
 import { useState, useEffect, useCallback } from "react";
+import { analytics } from "../lib/analytics.ts";
 
 type Theme = "light" | "dark" | "system";
 
@@ -28,6 +29,7 @@ export function useTheme() {
 	const setTheme = useCallback((t: Theme) => {
 		localStorage.setItem("newpr-theme", t);
 		setThemeState(t);
+		analytics.themeChanged(t);
 	}, []);
 
 	return { theme, setTheme };