diff --git a/README.md b/README.md
index c566ab5..399eb39 100644
--- a/README.md
+++ b/README.md
@@ -1,20 +1,22 @@
 # Ride Control
 
-Bike trainer control web app using Web Bluetooth. Tested with Wahoo Kickr Core 2 with Zwift Cog.
+Bike trainer control web app using Web Bluetooth. Tested with Wahoo KICKR Core 2 and Zwift Cog, with initial support for Zwift Click V2.
 
 [Open Ride Control](https://ridecontrol.xyz)
 
 ## Features
 
 - Welcomes first-time visitors with a concise introduction, open-source and local-data privacy details, a direct source-code link, and an optional “Don't show again” preference stored in the browser; the welcome screen remains available from the Ride Control footer link.
-- Connects to compatible bike trainers through Web Bluetooth, remembers authorized devices, and automatically reconnects when possible.
+- Manages the smart trainer, heart rate monitor, and both Zwift Click V2 controllers independently from one paired-devices panel, with a blue activity indicator while devices connect and a green indicator once every paired device is ready; keeps the `+` controller above the `−` controller, automatically identifies each physical side, connects both controllers concurrently, routes mirrored Bluetooth notifications only to that side, glows only its row as it is pressed, remembers its identity, and continuously retries saved Click connections after a refresh or controller sleep; stalled attempts can be retried immediately, and Click presses made while this panel is open stay in setup and do not shift the ride.
+- Connects to compatible bike trainers and standard Bluetooth heart rate monitors through Web Bluetooth, remembers authorized devices, and automatically reconnects when possible.
 - Shows live speed, power, cadence, heart rate, elapsed time, distance, and estimated calories, with MPH and KM/H display modes.
-- Provides direct resistance control with buttons, a slider, and keyboard shortcuts while recording resistance changes alongside the other ride metrics.
+- Provides direct resistance control with buttons, a slider, and keyboard shortcuts with matching button feedback, shows smoothing progress inside the slider thumb, and records resistance changes alongside the other ride metrics.
+- Replaces direct resistance controls with a focused 1–24 virtual shifting interface whenever Zwift Click V2 is paired; the Click minus/plus buttons, on-screen controls, and keyboard down/up arrows make quick, three-point resistance changes with matching visual feedback, holding a shift control continues shifting, and sessions record and graph the selected gear instead of resistance.
 - Automatically records while pedaling, auto-pauses during inactivity, supports manual pause and resume, and allows a session to end at any time—even before trainer data arrives.
-- Tracks complete time-series data plus averages and maximums for power, cadence, heart rate, speed, and resistance, with focused and combined chart views.
+- Tracks complete time-series data plus averages and maximums for power, cadence, heart rate, speed, and either resistance or virtual gear, with focused and combined chart views.
 - Saves completed sessions to browser-managed IndexedDB storage, including optional comments and how the ride felt, and requests persistent browser storage when supported.
-- Organizes saved sessions by local date and time in a slide-out history tray with paginated loading, detailed metrics and charts, keyboard navigation, and permanent deletion.
-- Downloads saved rides as Strava-compatible TCX files, including timestamps, distance, speed, power, cadence, heart rate, resistance, calories, ride feeling, and comments for upload to Strava and other cycling services.
+- Organizes saved sessions by local date and time in a slide-out history tray, with clear date ranges for rides that span midnight, paginated loading, detailed metrics and charts, keyboard navigation, and permanent deletion.
+- Downloads saved rides as Strava-compatible TCX files, including timestamps, distance, speed, power, cadence, heart rate, resistance or virtual gear, calories, ride feeling, and comments for upload to Strava and other cycling services.
 - Continues any saved session in a new unsaved copy while preserving its recorded time, distance, calories, samples, averages, maximums, and original start time.
 - Protects recorded active rides with a browser confirmation before refresh or close, and presents the save workflow before starting or continuing another session.
 - Includes contextual keyboard help for dashboard and history actions, including pausing, ending, starting, navigating, viewing history, and deleting sessions.
diff --git a/src/app.tsx b/src/app.tsx
index 4e8973a..3364253 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -1,5 +1,6 @@
-import { useCallback, useEffect, useState } from 'react';
-import { ConnectionControl } from './components/connection-control';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { DevicePairingButton, DevicePairingPanel } from './components/device-pairing';
+import { GearControl } from './components/gear-control';
 import { Icon } from './components/icon';
 import { KeyboardShortcutsDialog } from './components/keyboard-shortcuts-dialog';
 import { Metric, SmallMetric } from './components/metrics';
@@ -9,10 +10,13 @@ import { SessionChart } from './components/session-chart';
 import { SessionHistory } from './components/session-history';
 import { SessionSaveDialog } from './components/session-save-dialog';
 import { WelcomeDialog } from './components/welcome-dialog';
+import { useGearControl } from './hooks/use-gear-control';
+import { useHeartRateMonitor } from './hooks/use-heart-rate-monitor';
 import { useSession } from './hooks/use-session';
 import { useTrainer } from './hooks/use-trainer';
+import { useZwiftClick } from './hooks/use-zwift-click';
 import { formatAggregateAverage, formatDuration } from './lib/format';
-import { type AppShortcut, appShortcutForKey } from './lib/keyboard';
+import { type AppShortcut, appShortcutForKey, gearingKeyboardShortcuts } from './lib/keyboard';
 import {
 	createSavedSession,
 	requestPersistentSessionStorage,
@@ -20,7 +24,14 @@ import {
 } from './lib/saved-sessions';
 import { requestUnloadConfirmation, sessionNeedsUnloadWarning } from './lib/session';
 import { rememberWelcomeDismissal, shouldShowWelcome } from './lib/welcome';
-import type { RoutePoint, SavedSession, SessionMetadata, SpeedUnit } from './types';
+import type {
+	ControlMode,
+	Metrics,
+	RoutePoint,
+	SavedSession,
+	SessionMetadata,
+	SpeedUnit,
+} from './types';
 
 const EMPTY_ROUTE: RoutePoint[] = [];
 
@@ -35,23 +46,62 @@ function shouldIgnoreShortcut(event: KeyboardEvent) {
 	);
 }
 
+function metricsWithHeartRate(metrics: Metrics, connected: boolean, heartRate: number): Metrics {
+	if (!connected) {
+		return metrics;
+	}
+	return { ...metrics, heartRate };
+}
+
+function shiftHandlerUnlessBlocked(handler: (change: number) => void, blocked: boolean) {
+	return blocked ? () => undefined : handler;
+}
+
+function controlModeForClick(paired: boolean): ControlMode {
+	return paired ? 'gear' : 'resistance';
+}
+
 export function App() {
 	const trainer = useTrainer();
-	const session = useSession(
+	const [devicesOpen, setDevicesOpen] = useState(false);
+	const clickShiftRef = useRef<(change: number) => void>(() => undefined);
+	const handleClickShift = useCallback((change: number) => clickShiftRef.current(change), []);
+	const click = useZwiftClick(handleClickShift, trainer.setNotice, devicesOpen);
+	const heartRate = useHeartRateMonitor(trainer.setNotice);
+	const liveMetrics = metricsWithHeartRate(
 		trainer.metrics,
-		trainer.resistance,
-		trainer.lastPedalingAt,
-		trainer.trainerReportsDistance
+		heartRate.connected,
+		heartRate.heartRate
 	);
 	const { connected } = trainer;
-	const { isRiding, manuallyPaused } = session;
-	const sessionIsSaved = Boolean(session.savedSessionId);
 	const [speedUnit, setSpeedUnit] = useState<SpeedUnit>(() =>
 		localStorage.getItem('speed-unit') === 'kmh' ? 'kmh' : 'mph'
 	);
 	const [historyOpen, setHistoryOpen] = useState(false);
 	const [shortcutsOpen, setShortcutsOpen] = useState(false);
 	const [welcomeOpen, setWelcomeOpen] = useState(shouldShowWelcome);
+	const dashboardKeyboardEnabled = !(devicesOpen || historyOpen || shortcutsOpen || welcomeOpen);
+	const gearControl = useGearControl({
+		active: click.paired,
+		connected: trainer.connected,
+		keyboardEnabled: dashboardKeyboardEnabled,
+		onResistanceChange: trainer.shiftResistanceBy,
+		resistance: trainer.resistance,
+		setNotice: trainer.setNotice,
+	});
+	clickShiftRef.current = shiftHandlerUnlessBlocked(gearControl.shiftGear, devicesOpen);
+	const session = useSession(
+		liveMetrics,
+		{
+			gear: gearControl.gear,
+			mode: controlModeForClick(click.paired),
+			resistance: trainer.resistance,
+		},
+		trainer.lastPedalingAt,
+		trainer.trainerReportsDistance
+	);
+	const { isRiding, manuallyPaused } = session;
+	const sessionIsSaved = Boolean(session.savedSessionId);
 	const [saveDialogOpen, setSaveDialogOpen] = useState(() => session.ended && !sessionIsSaved);
 	const [saving, setSaving] = useState(false);
 	const [startAfterSave, setStartAfterSave] = useState(false);
@@ -134,8 +184,14 @@ export function App() {
 	}, [warnBeforeUnload]);
 
 	useEffect(() => {
-		trainer.setKeyboardControlsEnabled(!(historyOpen || shortcutsOpen || welcomeOpen));
-	}, [historyOpen, shortcutsOpen, trainer.setKeyboardControlsEnabled, welcomeOpen]);
+		trainer.setKeyboardControlsEnabled(dashboardKeyboardEnabled);
+		trainer.setGearControlsEnabled(click.paired);
+	}, [
+		click.paired,
+		dashboardKeyboardEnabled,
+		trainer.setGearControlsEnabled,
+		trainer.setKeyboardControlsEnabled,
+	]);
 
 	useEffect(() => {
 		const shortcutHandlers: Record<AppShortcut, (event: KeyboardEvent) => void> = {
@@ -176,7 +232,7 @@ export function App() {
 			},
 		};
 		const handleShortcut = (event: KeyboardEvent) => {
-			if (welcomeOpen || shouldIgnoreShortcut(event)) {
+			if (devicesOpen || welcomeOpen || shouldIgnoreShortcut(event)) {
 				return;
 			}
 			if (historyOpen) {
@@ -190,6 +246,7 @@ export function App() {
 		window.addEventListener('keydown', handleShortcut);
 		return () => window.removeEventListener('keydown', handleShortcut);
 	}, [
+		devicesOpen,
 		endSession,
 		handleNewSessionShortcut,
 		historyOpen,
@@ -275,12 +332,21 @@ export function App() {
 
 	const unitFactor = speedUnit === 'mph' ? 0.621_371 : 1;
 	const distanceUnit = speedUnit === 'mph' ? 'mi' : 'km';
-	const displayedSpeed = trainer.metrics.speed * unitFactor;
+	const displayedSpeed = liveMetrics.speed * unitFactor;
 	const displayedDistance = session.rideDistance * unitFactor;
 	const displayedMaximumSpeed = session.maximums.speed * unitFactor;
 	const averageSpeed =
 		session.elapsedSeconds > 0 ? session.rideDistance / (session.elapsedSeconds / 3600) : 0;
 	const displayedAverageSpeed = averageSpeed * unitFactor;
+	const connectedDeviceCount =
+		Number(trainer.connected) + Number(heartRate.connected) + click.connectedCount;
+	const pairedDeviceCount = Number(trainer.paired) + Number(heartRate.paired) + click.pairedCount;
+	const devicesConnecting = [
+		trainer.connectionBusy,
+		heartRate.busy,
+		click.busy,
+		click.pairing,
+	].some(Boolean);
 	let sessionControlLabel = 'Auto paused';
 	let sessionControlIcon = 'stop';
 	if (isRiding) {
@@ -377,14 +443,11 @@ export function App() {
 						>
 							?
 						</button>
-						<ConnectionControl
-							busy={trainer.connectionBusy}
-							connected={connected}
-							deviceName={trainer.deviceName}
-							onCancel={trainer.cancelConnection}
-							onConnect={trainer.connect}
-							onDisconnect={trainer.disconnect}
-							status={trainer.status}
+						<DevicePairingButton
+							connectedCount={connectedDeviceCount}
+							connecting={devicesConnecting}
+							onClick={() => setDevicesOpen(true)}
+							pairedCount={pairedDeviceCount}
 						/>
 					</div>
 				</div>
@@ -406,7 +469,7 @@ export function App() {
 						label="POWER"
 						maximum={String(Math.round(session.maximums.power))}
 						unit="watts"
-						value={String(trainer.metrics.power)}
+						value={String(liveMetrics.power)}
 					/>
 					<Metric
 						accent="violet"
@@ -415,7 +478,7 @@ export function App() {
 						label="CADENCE"
 						maximum={String(Math.round(session.maximums.cadence))}
 						unit="rpm"
-						value={String(Math.round(trainer.metrics.cadence))}
+						value={String(Math.round(liveMetrics.cadence))}
 					/>
 					<Metric
 						accent="rose"
@@ -424,7 +487,7 @@ export function App() {
 						label="HEART RATE"
 						maximum={String(Math.round(session.maximums.heartRate))}
 						unit="bpm"
-						value={String(trainer.metrics.heartRate || '—')}
+						value={String(liveMetrics.heartRate || '—')}
 					/>
 				</section>
 
@@ -445,28 +508,46 @@ export function App() {
 							/>
 						</div>
 						<SessionChart
+							controlMode={session.controlMode}
 							history={session.history}
-							keyboardEnabled={!(historyOpen || shortcutsOpen || welcomeOpen)}
+							keyboardEnabled={dashboardKeyboardEnabled}
 							route={EMPTY_ROUTE}
 							speedUnit={speedUnit}
 						/>
 					</div>
 					<div className="self-start rounded-2xl border border-line bg-panel p-4 sm:p-5">
 						<div className="flex items-center justify-between gap-4">
-							<h2 className="font-bold text-lg">Resistance control</h2>
-							<output className="font-bold text-3xl text-mint tabular-nums tracking-tight">
-								{trainer.resistance}
-								<span className="ml-0.5 text-lg">%</span>
-							</output>
+							<h2 className="font-bold text-lg">
+								{click.paired ? 'Virtual shifting' : 'Resistance control'}
+							</h2>
+							<div className="text-right">
+								<output className="font-bold text-3xl text-mint tabular-nums tracking-tight">
+									{click.paired ? gearControl.gear : trainer.resistance}
+									<span className="ml-1 text-slate-500 text-xs">
+										{click.paired ? 'of 24' : '%'}
+									</span>
+								</output>
+							</div>
 						</div>
-						<ResistanceControl
-							disabled={!connected}
-							max={100}
-							min={0}
-							onChange={trainer.updateResistance}
-							step={1}
-							value={trainer.resistance}
-						/>
+						{click.paired ? (
+							<GearControl
+								disabled={!connected}
+								gear={gearControl.gear}
+								onChange={gearControl.shiftGear}
+								shiftFlash={gearControl.shiftFlash}
+							/>
+						) : (
+							<ResistanceControl
+								disabled={!connected}
+								keyboardFlash={trainer.resistanceKeyFlash}
+								max={100}
+								min={0}
+								onChange={trainer.updateResistance}
+								ramp={trainer.resistanceRamp}
+								step={1}
+								value={trainer.resistance}
+							/>
+						)}
 					</div>
 				</section>
 			</div>
@@ -518,7 +599,41 @@ export function App() {
 				open={historyOpen}
 				speedUnit={speedUnit}
 			/>
-			<KeyboardShortcutsDialog onClose={closeShortcuts} open={shortcutsOpen} />
+			<DevicePairingPanel
+				click={{
+					...click,
+					onDisconnect: click.disconnect,
+					onForget: click.forget,
+					onForgetController: click.forgetDevice,
+					onPair: click.pair,
+					onReconnect: click.reconnect,
+				}}
+				heartRate={{
+					...heartRate,
+					onDisconnect: heartRate.disconnect,
+					onForget: heartRate.forget,
+					onPair: heartRate.pair,
+					onReconnect: heartRate.reconnect,
+				}}
+				onClose={() => setDevicesOpen(false)}
+				open={devicesOpen}
+				trainer={{
+					busy: trainer.connectionBusy,
+					connected: trainer.connected,
+					name: trainer.pairedDeviceName,
+					onDisconnect: trainer.disconnect,
+					onForget: trainer.forget,
+					onPair: trainer.connect,
+					onReconnect: trainer.reconnect,
+					paired: trainer.paired,
+					status: trainer.status,
+				}}
+			/>
+			<KeyboardShortcutsDialog
+				onClose={closeShortcuts}
+				open={shortcutsOpen}
+				shortcuts={click.paired ? gearingKeyboardShortcuts : undefined}
+			/>
 			<WelcomeDialog onClose={closeWelcome} open={welcomeOpen} />
 		</main>
 	);
diff --git a/src/components/device-pairing.tsx b/src/components/device-pairing.tsx
new file mode 100644
index 0000000..228ecdb
--- /dev/null
+++ b/src/components/device-pairing.tsx
@@ -0,0 +1,354 @@
+import { useEffect } from 'react';
+import { Icon } from './icon';
+
+interface DeviceSlot {
+	allowRetryWhileBusy?: boolean;
+	battery?: number;
+	busy: boolean;
+	connected: boolean;
+	name?: string;
+	onDisconnect: () => void;
+	onForget: () => void | Promise<void>;
+	onPair: () => void | Promise<void>;
+	onReconnect: () => void | Promise<void>;
+	paired: boolean;
+	status: string;
+}
+
+interface ClickController {
+	active: boolean;
+	connected: boolean;
+	connecting: boolean;
+	id: string;
+	label: string;
+}
+
+interface ClickSlot extends DeviceSlot {
+	connectedCount: number;
+	controllers: ClickController[];
+	onForgetController: (deviceId: string) => void | Promise<void>;
+	pairedCount: number;
+	pairing: boolean;
+}
+
+function clickControllerOrder(controller: ClickController) {
+	if (controller.label.startsWith('+')) {
+		return 0;
+	}
+	if (controller.label.startsWith('−')) {
+		return 1;
+	}
+	return 2;
+}
+
+function StatusDot({ connected, busy }: { connected: boolean; busy: boolean }) {
+	let statusClass = 'bg-slate-600';
+	if (busy) {
+		statusClass = 'animate-pulse bg-yellow-300';
+	} else if (connected) {
+		statusClass = 'bg-mint shadow-[0_0_10px_rgba(173,245,189,.55)]';
+	}
+	return (
+		<span aria-hidden="true" className={`h-2.5 w-2.5 shrink-0 rounded-full ${statusClass}`} />
+	);
+}
+
+function DeviceActions({ slot }: { slot: DeviceSlot }) {
+	if (!slot.paired) {
+		return (
+			<button
+				className="h-9 rounded-lg bg-lime px-3 font-bold text-ink text-xs transition hover:bg-[#e4ff9c] disabled:opacity-50"
+				disabled={slot.busy}
+				onClick={slot.onPair}
+				type="button"
+			>
+				{slot.busy ? 'Pairing…' : 'Pair'}
+			</button>
+		);
+	}
+	let connectionAction = 'Reconnect';
+	if (slot.busy) {
+		connectionAction = slot.allowRetryWhileBusy ? 'Retry' : 'Connecting…';
+	} else if (slot.connected) {
+		connectionAction = 'Disconnect';
+	}
+	const disconnecting = slot.connected && !slot.busy;
+	return (
+		<div className="flex flex-wrap justify-end gap-2">
+			<button
+				className="h-9 rounded-lg border border-line px-3 font-semibold text-slate-300 text-xs transition hover:border-slate-500 hover:text-white disabled:opacity-50"
+				disabled={slot.busy && !slot.allowRetryWhileBusy}
+				onClick={disconnecting ? slot.onDisconnect : slot.onReconnect}
+				type="button"
+			>
+				{connectionAction}
+			</button>
+			<button
+				className="h-9 rounded-lg border border-rose-400/25 px-3 font-semibold text-rose-300 text-xs transition hover:border-rose-400/60 hover:bg-rose-400/5"
+				onClick={slot.onForget}
+				type="button"
+			>
+				Forget
+			</button>
+		</div>
+	);
+}
+
+function DeviceCard({
+	description,
+	icon,
+	title,
+	slot,
+}: {
+	description: string;
+	icon: string;
+	title: string;
+	slot: DeviceSlot;
+}) {
+	return (
+		<article className="rounded-2xl border border-line bg-[#12171d] p-4">
+			<div className="flex items-start gap-3">
+				<div className="grid h-10 w-10 shrink-0 place-items-center rounded-xl border border-slate-700 bg-slate-800/60 text-slate-300">
+					<Icon className="h-5 w-5" name={icon} />
+				</div>
+				<div className="min-w-0 flex-1">
+					<div className="flex items-center gap-2">
+						<StatusDot busy={slot.busy} connected={slot.connected} />
+						<h3 className="font-bold text-sm text-white">{title}</h3>
+					</div>
+					<p className="mt-1 truncate font-medium text-slate-300 text-xs">
+						{slot.name ?? description}
+					</p>
+					<p className="mt-1 text-[11px] text-slate-500">
+						{slot.status}
+						{slot.battery === undefined ? '' : ` · ${slot.battery}% battery`}
+					</p>
+				</div>
+			</div>
+			<div className="mt-4 flex justify-end">
+				<DeviceActions slot={slot} />
+			</div>
+		</article>
+	);
+}
+
+export function DevicePairingButton({
+	connectedCount,
+	connecting = false,
+	onClick,
+	pairedCount,
+}: {
+	connectedCount: number;
+	connecting?: boolean;
+	onClick: () => void;
+	pairedCount: number;
+}) {
+	const allConnected = pairedCount > 0 && connectedCount === pairedCount;
+	let buttonClass = 'border-lime bg-lime text-ink hover:bg-[#e4ff9c]';
+	if (connecting) {
+		buttonClass =
+			'border-sky-400/70 bg-sky-400/10 text-sky-100 shadow-[0_0_16px_rgba(56,189,248,.12)] hover:border-sky-300';
+	} else if (pairedCount) {
+		buttonClass = 'border-line bg-[#12171d] text-slate-200 hover:border-slate-500';
+	}
+	let statusClass = 'bg-slate-600';
+	if (connecting) {
+		statusClass = 'animate-pulse bg-sky-400 shadow-[0_0_10px_rgba(56,189,248,.7)]';
+	} else if (allConnected) {
+		statusClass = 'bg-mint shadow-[0_0_8px_rgba(173,245,189,.45)]';
+	}
+	return (
+		<button
+			aria-busy={connecting}
+			className={`inline-flex h-10 items-center gap-2 rounded-lg border px-3.5 font-semibold text-sm transition ${buttonClass}`}
+			onClick={onClick}
+			type="button"
+		>
+			<Icon className="h-4 w-4" name="bluetooth" />
+			<span>{pairedCount ? 'Devices' : 'Pair devices'}</span>
+			{pairedCount ? (
+				<span className="inline-flex items-center gap-1.5 border-line border-l pl-2 text-xs">
+					<span className={`h-2 w-2 rounded-full ${statusClass}`} />
+					{connectedCount}/{pairedCount}
+				</span>
+			) : null}
+		</button>
+	);
+}
+
+export function DevicePairingPanel({
+	click,
+	heartRate,
+	onClose,
+	open,
+	trainer,
+}: {
+	click: ClickSlot;
+	heartRate: DeviceSlot;
+	onClose: () => void;
+	open: boolean;
+	trainer: DeviceSlot;
+}) {
+	useEffect(() => {
+		if (!open) {
+			return;
+		}
+		const closeOnEscape = (event: KeyboardEvent) => {
+			if (event.key === 'Escape') {
+				event.preventDefault();
+				onClose();
+			}
+		};
+		const previousOverflow = document.body.style.overflow;
+		document.body.style.overflow = 'hidden';
+		window.addEventListener('keydown', closeOnEscape);
+		return () => {
+			document.body.style.overflow = previousOverflow;
+			window.removeEventListener('keydown', closeOnEscape);
+		};
+	}, [onClose, open]);
+
+	if (!open) {
+		return null;
+	}
+
+	const clickSlot: DeviceSlot = {
+		...click,
+		allowRetryWhileBusy: true,
+		connected: click.pairedCount > 0 && click.connectedCount === click.pairedCount,
+		paired: click.pairedCount > 0,
+	};
+	const orderedClickControllers = [...click.controllers].sort(
+		(left, right) => clickControllerOrder(left) - clickControllerOrder(right)
+	);
+	let pairControllerLabel = 'Pair controller';
+	if (click.pairing) {
+		pairControllerLabel = 'Selecting…';
+	} else if (click.pairedCount) {
+		pairControllerLabel = 'Pair other controller';
+	}
+
+	return (
+		<div className="fixed inset-0 z-50 flex justify-end bg-black/65 backdrop-blur-sm">
+			<button
+				aria-label="Close paired devices"
+				className="absolute inset-0 h-full w-full cursor-default"
+				onClick={onClose}
+				type="button"
+			/>
+			<section
+				aria-labelledby="paired-devices-title"
+				aria-modal="true"
+				className="relative h-full w-full max-w-md overflow-y-auto overflow-x-hidden border-line border-l bg-panel p-5 shadow-2xl shadow-black/60 sm:p-6"
+				role="dialog"
+			>
+				<div className="flex items-start justify-between gap-4">
+					<div>
+						<h2 className="font-bold text-2xl" id="paired-devices-title">
+							Paired devices
+						</h2>
+						<p className="mt-1 max-w-sm text-slate-400 text-sm">
+							Pair each sensor once. Ride Control reconnects remembered devices when
+							they wake up.
+						</p>
+					</div>
+					<button
+						aria-label="Close paired devices"
+						autoFocus
+						className="grid h-9 w-9 shrink-0 place-items-center rounded-lg text-slate-400 hover:bg-slate-700 hover:text-white"
+						onClick={onClose}
+						type="button"
+					>
+						×
+					</button>
+				</div>
+
+				<div className="mt-6 space-y-3">
+					<DeviceCard
+						description="Power, cadence and resistance control"
+						icon="bike"
+						slot={trainer}
+						title="Smart trainer"
+					/>
+					<DeviceCard
+						description="Standard Bluetooth heart rate monitor"
+						icon="heart"
+						slot={heartRate}
+						title="Heart rate"
+					/>
+
+					<article className="rounded-2xl border border-line bg-[#12171d] p-4">
+						<div className="flex items-start gap-3">
+							<div className="grid h-10 w-10 shrink-0 place-items-center rounded-xl border border-slate-700 bg-slate-800/60 text-slate-300">
+								<Icon className="h-5 w-5" name="controls" />
+							</div>
+							<div className="min-w-0 flex-1">
+								<div className="flex items-center gap-2">
+									<StatusDot
+										busy={click.busy}
+										connected={click.connectedCount > 0}
+									/>
+									<h3 className="font-bold text-sm text-white">Zwift Click V2</h3>
+								</div>
+								<p className="mt-1 text-slate-300 text-xs">
+									{click.pairedCount
+										? `${click.connectedCount} of ${click.pairedCount} controllers connected`
+										: 'Pair each controller separately'}
+								</p>
+								<p className="mt-1 text-[11px] text-slate-500">{click.status}</p>
+							</div>
+						</div>
+
+						{orderedClickControllers.length ? (
+							<div className="mt-4 overflow-hidden rounded-xl border border-line">
+								{orderedClickControllers.map((controller) => (
+									<div
+										className={`flex items-center gap-3 border-line border-b px-3 py-2.5 transition duration-150 last:border-b-0 ${controller.active ? 'bg-mint/10' : ''}`}
+										key={controller.id}
+									>
+										<StatusDot
+											busy={controller.connecting}
+											connected={controller.connected}
+										/>
+										<div className="min-w-0 flex-1">
+											<p
+												className={`font-semibold text-xs transition ${controller.active ? 'text-mint' : 'text-slate-200'}`}
+											>
+												{controller.label}
+											</p>
+										</div>
+										<button
+											className="font-semibold text-[11px] text-rose-300 hover:text-rose-200"
+											onClick={() => click.onForgetController(controller.id)}
+											type="button"
+										>
+											Forget
+										</button>
+									</div>
+								))}
+							</div>
+						) : null}
+
+						<div className="mt-4 flex flex-wrap justify-end gap-2">
+							{click.pairedCount > 0 ? <DeviceActions slot={clickSlot} /> : null}
+							{click.pairedCount < 2 ? (
+								<button
+									className="h-9 rounded-lg bg-lime px-3 font-bold text-ink text-xs transition hover:bg-[#e4ff9c] disabled:opacity-50"
+									disabled={click.pairing}
+									onClick={click.onPair}
+									type="button"
+								>
+									{pairControllerLabel}
+								</button>
+							) : null}
+						</div>
+						<p className="mt-3 text-[10px] text-slate-500 leading-relaxed">
+							Wake each controller before pairing. The + and − sides are identified
+							automatically and reconnect in the background.
+						</p>
+					</article>
+				</div>
+			</section>
+		</div>
+	);
+}
diff --git a/src/components/gear-control.tsx b/src/components/gear-control.tsx
new file mode 100644
index 0000000..c921ab9
--- /dev/null
+++ b/src/components/gear-control.tsx
@@ -0,0 +1,134 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { MAX_GEAR, MIN_GEAR } from '../lib/gears';
+import type { ResistanceAdjustmentDirection } from '../types';
+import { Icon } from './icon';
+
+const HOLD_DELAY_MS = 420;
+const HOLD_REPEAT_MS = 180;
+
+export function GearControl({
+	disabled,
+	gear,
+	onChange,
+	shiftFlash,
+}: {
+	disabled: boolean;
+	gear: number;
+	onChange: (change: number) => void;
+	shiftFlash?: ResistanceAdjustmentDirection;
+}) {
+	const [heldDirection, setHeldDirection] = useState<ResistanceAdjustmentDirection>();
+	const holdDelay = useRef<number | undefined>(undefined);
+	const holdRepeat = useRef<number | undefined>(undefined);
+
+	const clearHoldTimers = useCallback(() => {
+		window.clearTimeout(holdDelay.current);
+		window.clearInterval(holdRepeat.current);
+		holdDelay.current = undefined;
+		holdRepeat.current = undefined;
+	}, []);
+
+	const stopHolding = useCallback(() => {
+		clearHoldTimers();
+		setHeldDirection(undefined);
+	}, [clearHoldTimers]);
+
+	const startHolding = useCallback(
+		(
+			change: number,
+			direction: ResistanceAdjustmentDirection,
+			event: React.PointerEvent<HTMLButtonElement>
+		) => {
+			if (event.button !== 0) {
+				return;
+			}
+			event.preventDefault();
+			clearHoldTimers();
+			setHeldDirection(direction);
+			onChange(change);
+			holdDelay.current = window.setTimeout(() => {
+				onChange(change);
+				holdRepeat.current = window.setInterval(() => onChange(change), HOLD_REPEAT_MS);
+			}, HOLD_DELAY_MS);
+		},
+		[clearHoldTimers, onChange]
+	);
+
+	useEffect(() => clearHoldTimers, [clearHoldTimers]);
+
+	useEffect(() => {
+		if (
+			disabled ||
+			(heldDirection === 'decrease' && gear === MIN_GEAR) ||
+			(heldDirection === 'increase' && gear === MAX_GEAR)
+		) {
+			stopHolding();
+		}
+	}, [disabled, gear, heldDirection, stopHolding]);
+
+	const progress = ((gear - MIN_GEAR) / (MAX_GEAR - MIN_GEAR)) * 100;
+	const activeDirection = heldDirection ?? shiftFlash;
+	const buttonClass =
+		'grid h-9 w-9 shrink-0 place-items-center rounded-lg border border-line text-slate-300 transition duration-150 hover:border-mint disabled:opacity-40';
+	const activeClass =
+		'scale-105 border-mint bg-mint/15 text-mint shadow-[0_0_14px_rgba(190,242,100,.4)]';
+	return (
+		<div className="mt-4" data-gear-control="true">
+			<div className="flex items-center gap-3">
+				<button
+					aria-label="Shift to an easier gear"
+					className={`${buttonClass} ${activeDirection === 'decrease' ? activeClass : ''}`}
+					disabled={disabled || gear === MIN_GEAR}
+					onClick={(event) => {
+						if (event.detail === 0) {
+							onChange(-1);
+						}
+					}}
+					onLostPointerCapture={stopHolding}
+					onPointerCancel={stopHolding}
+					onPointerDown={(event) => startHolding(-1, 'decrease', event)}
+					onPointerLeave={stopHolding}
+					onPointerUp={stopHolding}
+					type="button"
+				>
+					<Icon className="h-4 w-4" name="minus" />
+				</button>
+				<div className="min-w-0 flex-1">
+					<div className="relative h-2 overflow-hidden rounded-full bg-slate-700">
+						<div
+							aria-hidden="true"
+							className="absolute inset-y-0 left-0 rounded-full bg-mint transition-[width] duration-150"
+							style={{ width: `${progress}%` }}
+						/>
+					</div>
+					<div className="mt-2 flex justify-between font-bold text-[9px] text-slate-500 tracking-[.12em]">
+						<span>EASIER</span>
+						<span>HARDER</span>
+					</div>
+				</div>
+				<button
+					aria-label="Shift to a harder gear"
+					className={`${buttonClass} ${activeDirection === 'increase' ? activeClass : ''}`}
+					disabled={disabled || gear === MAX_GEAR}
+					onClick={(event) => {
+						if (event.detail === 0) {
+							onChange(1);
+						}
+					}}
+					onLostPointerCapture={stopHolding}
+					onPointerCancel={stopHolding}
+					onPointerDown={(event) => startHolding(1, 'increase', event)}
+					onPointerLeave={stopHolding}
+					onPointerUp={stopHolding}
+					type="button"
+				>
+					<Icon className="h-4 w-4" name="plus" />
+				</button>
+			</div>
+			<p className="mt-3 text-center text-[11px] text-slate-500">
+				Use Zwift Click or <kbd className="font-mono text-slate-400">↑</kbd>{' '}
+				<kbd className="font-mono text-slate-400">↓</kbd> to shift
+			</p>
+		</div>
+	);
+}
diff --git a/src/components/icon.tsx b/src/components/icon.tsx
index 65e5914..5c8a2f6 100644
--- a/src/components/icon.tsx
+++ b/src/components/icon.tsx
@@ -3,6 +3,7 @@ const paths: Record<string, string> = {
 	bluetooth: 'm7 7 10 10-5 5V2l5 5L7 17',
 	bolt: 'm13 2-8 11h6l-1 9 8-12h-6l1-7Z',
 	cadence: 'M20 11a8 8 0 0 0-15.5-2M4 4v5h5M4 13a8 8 0 0 0 15.5 2M20 20v-5h-5',
+	controls: 'M7 4v6m0 4v6m10-16v2m0 4v10M4 10h6m4-4h6M4 14h6m4-4h6',
 	heart: 'M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1-1.1a5.5 5.5 0 0 0-7.8 7.8l1 1L12 21l7.8-7.6a5.5 5.5 0 0 0 1-8.8Z',
 	minus: 'M5 12h14',
 	pause: 'M9 5v14m6-14v14',
diff --git a/src/components/metrics.tsx b/src/components/metrics.tsx
index 3ad117c..cd1491b 100644
--- a/src/components/metrics.tsx
+++ b/src/components/metrics.tsx
@@ -59,15 +59,21 @@ export function Metric({
 				<span className="font-semibold text-4xl tracking-tight">{value}</span>
 				<span className="text-slate-400 text-sm">{unit}</span>
 			</div>
-			<div className="mt-3 flex items-center justify-between gap-3 text-[11px]">
-				<span className="text-slate-400">
-					<strong className="mr-1 font-bold text-slate-600 tracking-[.08em]">AVG</strong>
-					{average} {unit}
-				</span>
-				<span className="text-right text-slate-400">
-					<strong className="mr-1 font-bold text-slate-600 tracking-[.08em]">MAX</strong>
-					{maximum} {unit}
-				</span>
+			<div className="mt-4 grid grid-cols-2 gap-3 border-line border-t pt-3">
+				<div>
+					<p className="font-bold text-[10px] text-slate-500 tracking-[.12em]">AVG</p>
+					<p className="mt-1 flex items-baseline gap-1 font-semibold text-2xl text-white tabular-nums tracking-tight">
+						<span>{average}</span>
+						<span className="font-medium text-slate-300 text-xs">{unit}</span>
+					</p>
+				</div>
+				<div className="text-right">
+					<p className="font-bold text-[10px] text-slate-500 tracking-[.12em]">MAX</p>
+					<p className="mt-1 flex items-baseline justify-end gap-1 font-semibold text-2xl text-white tabular-nums tracking-tight">
+						<span>{maximum}</span>
+						<span className="font-medium text-slate-300 text-xs">{unit}</span>
+					</p>
+				</div>
 			</div>
 			<div className={`mt-3 h-1 rounded-full ${metricAccentClass(accent)}`} />
 		</div>
diff --git a/src/components/resistance-control.tsx b/src/components/resistance-control.tsx
index 83b0f01..611f0cb 100644
--- a/src/components/resistance-control.tsx
+++ b/src/components/resistance-control.tsx
@@ -1,3 +1,6 @@
+import { type CSSProperties, useEffect, useRef, useState } from 'react';
+import { resistanceAdjustmentDirection } from '../lib/resistance';
+import type { ResistanceAdjustmentDirection, ResistanceRamp } from '../types';
 import { Icon } from './icon';
 
 export function ResistanceControl({
@@ -7,6 +10,8 @@ export function ResistanceControl({
 	step,
 	onChange,
 	disabled,
+	keyboardFlash,
+	ramp,
 }: {
 	value: number;
 	min: number;
@@ -14,13 +19,64 @@ export function ResistanceControl({
 	step: number;
 	onChange: (value: number) => void;
 	disabled: boolean;
+	keyboardFlash?: ResistanceAdjustmentDirection;
+	ramp: ResistanceRamp;
 }) {
+	const [sliderFlash, setSliderFlash] = useState<ResistanceAdjustmentDirection>();
+	const sliderDragging = useRef(false);
+	const sliderFlashTimer = useRef<number | undefined>(undefined);
+	const sliderValue = useRef(value);
+	const rampProgress = ramp.phase === 'settled' ? 1 : Math.max(0, Math.min(1, ramp.progress));
+	const rampProgressPercent = Math.round(rampProgress * 100);
+	const sliderPosition =
+		max > min ? Math.max(0, Math.min(1, (value - min) / (max - min))) * 100 : 0;
+	const sliderStyle = {
+		'--ramp-progress': `${rampProgress * 360}deg`,
+		'--resistance-position': `${sliderPosition}%`,
+	} as CSSProperties;
+	const buttonClass =
+		'grid h-9 w-9 shrink-0 place-items-center rounded-lg border border-line text-slate-300 transition duration-150 hover:border-mint disabled:opacity-40';
+	const keyboardFlashClass =
+		'scale-105 border-mint bg-mint/15 text-mint shadow-[0_0_14px_rgba(190,242,100,.4)]';
+	const activeFlash = keyboardFlash ?? sliderFlash;
+
+	useEffect(() => {
+		sliderValue.current = value;
+	}, [value]);
+
+	useEffect(
+		() => () => {
+			window.clearTimeout(sliderFlashTimer.current);
+		},
+		[]
+	);
+
+	const clearSliderFlash = () => {
+		sliderDragging.current = false;
+		window.clearTimeout(sliderFlashTimer.current);
+		sliderFlashTimer.current = window.setTimeout(() => setSliderFlash(undefined), 180);
+	};
+
+	const handleSliderChange = (next: number) => {
+		const direction = resistanceAdjustmentDirection(sliderValue.current, next);
+		sliderValue.current = next;
+		if (direction) {
+			window.clearTimeout(sliderFlashTimer.current);
+			setSliderFlash(direction);
+			if (!sliderDragging.current) {
+				sliderFlashTimer.current = window.setTimeout(() => setSliderFlash(undefined), 180);
+			}
+		}
+		onChange(next);
+	};
+
 	return (
 		<div className="mt-4">
 			<div className="flex items-center gap-3">
 				<button
 					aria-label="Decrease resistance"
-					className="grid h-9 w-9 place-items-center rounded-lg border border-line text-slate-300 hover:border-mint disabled:opacity-40"
+					className={`${buttonClass} ${activeFlash === 'decrease' ? keyboardFlashClass : ''}`}
+					data-keyboard-flash={activeFlash === 'decrease' || undefined}
 					disabled={disabled}
 					onClick={() => onChange(value - step)}
 					type="button"
@@ -29,18 +85,29 @@ export function ResistanceControl({
 				</button>
 				<input
 					aria-label="Resistance"
-					className="h-1.5 w-full accent-mint disabled:opacity-40"
+					className="resistance-slider w-full min-w-0 disabled:opacity-40"
+					data-ramp-active={ramp.phase === 'ramping' || undefined}
+					data-ramp-progress={rampProgressPercent}
+					data-resistance-control="true"
 					disabled={disabled}
 					max={max}
 					min={min}
-					onChange={(event) => onChange(Number(event.target.value))}
+					onBlur={clearSliderFlash}
+					onChange={(event) => handleSliderChange(Number(event.target.value))}
+					onPointerCancel={clearSliderFlash}
+					onPointerDown={() => {
+						sliderDragging.current = true;
+					}}
+					onPointerUp={clearSliderFlash}
 					step={step}
+					style={sliderStyle}
 					type="range"
 					value={value}
 				/>
 				<button
 					aria-label="Increase resistance"
-					className="grid h-9 w-9 place-items-center rounded-lg border border-line text-slate-300 hover:border-mint disabled:opacity-40"
+					className={`${buttonClass} ${activeFlash === 'increase' ? keyboardFlashClass : ''}`}
+					data-keyboard-flash={activeFlash === 'increase' || undefined}
 					disabled={disabled}
 					onClick={() => onChange(value + step)}
 					type="button"
diff --git a/src/components/session-chart.tsx b/src/components/session-chart.tsx
index 874c473..be1374f 100644
--- a/src/components/session-chart.tsx
+++ b/src/components/session-chart.tsx
@@ -1,7 +1,12 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { chartModes, chartPath, roundedChartMaximum, storedChartMode } from '../lib/chart';
+import {
+	chartModesForControl,
+	chartPath,
+	roundedChartMaximum,
+	storedChartMode,
+} from '../lib/chart';
 import { formatChartSeconds } from '../lib/format';
-import type { ChartMode, MetricSample, RoutePoint, SpeedUnit } from '../types';
+import type { ChartMode, ControlMode, MetricSample, RoutePoint, SpeedUnit } from '../types';
 
 interface PlotProps {
 	color: string;
@@ -12,7 +17,7 @@ interface PlotProps {
 	positions: number[];
 	title: string;
 	unit: string;
-	values: number[];
+	values: (number | undefined)[];
 }
 
 export function ChartPlot({
@@ -77,20 +82,54 @@ export function ChartPlot({
 }
 
 export function SessionChart({
+	controlMode,
 	history,
 	keyboardEnabled = true,
 	route,
 	speedUnit,
 }: {
+	controlMode?: ControlMode;
 	history: MetricSample[];
 	keyboardEnabled?: boolean;
 	route: RoutePoint[];
 	speedUnit: SpeedUnit;
 }) {
 	const [selectedMode, setSelectedMode] = useState<ChartMode>(storedChartMode);
-	const effectiveMode = selectedMode === 'elevation' && route.length === 0 ? 'all' : selectedMode;
-	const series = useMemo(
-		() => [
+	const resolvedControlMode =
+		controlMode ??
+		(history.some((sample) => sample.gear !== undefined) ? 'gear' : 'resistance');
+	const modeForAvailableControl =
+		selectedMode === 'gear' || selectedMode === 'resistance'
+			? resolvedControlMode
+			: selectedMode;
+	const effectiveMode =
+		modeForAvailableControl === 'elevation' && route.length === 0
+			? 'all'
+			: modeForAvailableControl;
+	const series = useMemo(() => {
+		const controlSeries =
+			resolvedControlMode === 'gear'
+				? {
+						chartMaximum: 24,
+						color: '#adf5bd',
+						decimals: 0,
+						key: 'gear' as const,
+						label: 'Gear',
+						minimum: 1,
+						unit: '',
+						values: history.map((sample) => sample.gear),
+					}
+				: {
+						chartMaximum: 100,
+						color: '#adf5bd',
+						decimals: 0,
+						key: 'resistance' as const,
+						label: 'Resistance',
+						minimum: 0,
+						unit: '%',
+						values: history.map((sample) => sample.resistance),
+					};
+		return [
 			{
 				chartMaximum: roundedChartMaximum(
 					Math.max(
@@ -106,6 +145,7 @@ export function SessionChart({
 				decimals: 1,
 				key: 'speed' as const,
 				label: 'Speed',
+				minimum: 0,
 				unit: speedUnit === 'mph' ? 'mph' : 'km/h',
 				values: history.map((sample) =>
 					speedUnit === 'mph' ? sample.speed * 0.621_371 : sample.speed
@@ -121,6 +161,7 @@ export function SessionChart({
 				decimals: 0,
 				key: 'power' as const,
 				label: 'Power',
+				minimum: 0,
 				unit: 'W',
 				values: history.map((sample) => sample.power),
 			},
@@ -134,6 +175,7 @@ export function SessionChart({
 				decimals: 0,
 				key: 'cadence' as const,
 				label: 'Cadence',
+				minimum: 0,
 				unit: 'rpm',
 				values: history.map((sample) => sample.cadence),
 			},
@@ -147,29 +189,24 @@ export function SessionChart({
 				decimals: 0,
 				key: 'heartRate' as const,
 				label: 'Heart rate',
+				minimum: 0,
 				unit: 'bpm',
 				values: history.map((sample) => sample.heartRate),
 			},
-			{
-				chartMaximum: 100,
-				color: '#adf5bd',
-				decimals: 0,
-				key: 'resistance' as const,
-				label: 'Resistance',
-				unit: '%',
-				values: history.map((sample) => Math.max(0, Math.min(100, sample.resistance ?? 0))),
-			},
-		],
-		[history, speedUnit]
-	);
+			controlSeries,
+		];
+	}, [history, resolvedControlMode, speedUnit]);
 	const visibleSeries =
 		effectiveMode === 'all' ? series : series.filter((item) => item.key === effectiveMode);
 	const availableModes = useMemo(
 		() =>
 			route.length
-				? [...chartModes, { label: 'Elevation', value: 'elevation' as const }]
-				: chartModes,
-		[route.length]
+				? [
+						...chartModesForControl(resolvedControlMode),
+						{ label: 'Elevation', value: 'elevation' as const },
+					]
+				: chartModesForControl(resolvedControlMode),
+		[resolvedControlMode, route.length]
 	);
 	const elevationValues = route.map((point) => point.elevation);
 	const elevationMinimum = elevationValues.length ? Math.min(...elevationValues) : 0;
@@ -269,6 +306,7 @@ export function SessionChart({
 								heightClass={effectiveMode === 'all' ? 'h-24' : 'h-52'}
 								key={item.key}
 								maximum={item.chartMaximum}
+								minimum={item.minimum}
 								positions={historyPositions}
 								title={`${item.label} over time`}
 								unit={item.unit}
diff --git a/src/components/session-history.tsx b/src/components/session-history.tsx
index 27b1dde..ea225a4 100644
--- a/src/components/session-history.tsx
+++ b/src/components/session-history.tsx
@@ -11,7 +11,8 @@ import {
 	countSavedSessions,
 	deleteSavedSession,
 	feelingLabel,
-	formatSessionTime,
+	formatSessionDateRange,
+	formatSessionListTime,
 	formatSessionTimeRange,
 	getSavedSession,
 	groupSessionsByDate,
@@ -121,15 +122,29 @@ export function SessionDetail({
 }) {
 	const unitFactor = speedUnit === 'mph' ? 0.621_371 : 1;
 	const distanceUnit = speedUnit === 'mph' ? 'mi' : 'km';
+	const usesGear = session.controlMode === 'gear';
+	const controlMetric = usesGear
+		? {
+				accent: 'mint',
+				average: formatAggregateAverage(session.aggregates.gear, 0),
+				icon: 'controls',
+				label: 'GEAR',
+				unit: '',
+			}
+		: {
+				accent: 'mint',
+				average: formatAggregateAverage(session.aggregates.resistance, 0),
+				icon: 'resistance',
+				label: 'RESISTANCE',
+				unit: '%',
+			};
 
 	return (
 		<div className="min-w-0 flex-1 overflow-y-auto p-5 sm:p-6">
 			<div className="relative flex items-start justify-between gap-4">
 				<div>
 					<p className="font-bold text-[11px] text-mint tracking-[.14em]">
-						{new Intl.DateTimeFormat(undefined, { dateStyle: 'full' }).format(
-							session.startedAt
-						)}
+						{formatSessionDateRange(session)}
 					</p>
 					<h3 className="mt-1 font-bold text-2xl">{formatSessionTimeRange(session)}</h3>
 				</div>
@@ -209,13 +224,7 @@ export function SessionDetail({
 						maximum: String(Math.round(session.maximums.heartRate)),
 						unit: 'bpm',
 					},
-					{
-						accent: 'mint',
-						average: formatAggregateAverage(session.aggregates.resistance, 0),
-						icon: 'resistance',
-						label: 'RESISTANCE',
-						unit: '%',
-					},
+					controlMetric,
 				].map((metric) => (
 					<SessionMetric key={metric.label} {...metric} />
 				))}
@@ -237,6 +246,7 @@ export function SessionDetail({
 				</div>
 			</div>
 			<SessionChart
+				controlMode={session.controlMode}
 				history={session.history}
 				keyboardEnabled={chartKeyboardEnabled}
 				route={EMPTY_ROUTE}
@@ -562,7 +572,7 @@ export function SessionHistory({
 										>
 											<div className="flex items-center justify-between gap-3">
 												<span className="font-semibold text-sm">
-													{formatSessionTime(session.startedAt)}
+													{formatSessionListTime(session)}
 												</span>
 												<span className="text-slate-500 text-xs">
 													{formatDuration(session.elapsedSeconds)}
diff --git a/src/components/welcome-dialog.tsx b/src/components/welcome-dialog.tsx
index bab03f5..c191223 100644
--- a/src/components/welcome-dialog.tsx
+++ b/src/components/welcome-dialog.tsx
@@ -64,8 +64,9 @@ export function WelcomeDialog({
 				</div>
 
 				<p className="mt-4 text-slate-300 text-sm leading-6" id="welcome-description">
-					Connect a compatible trainer over Bluetooth, adjust resistance, and keep
-					detailed records of every ride—all from your browser.
+					Pair your trainer, heart rate monitor, and Zwift Click over Bluetooth, then
+					adjust resistance or shift virtual gears while keeping detailed records of every
+					ride—all from your browser.
 				</p>
 				<p className="mt-3 text-slate-400 text-sm leading-6">
 					Ride Control is a freely available, open-source GPLv3 application. View the{' '}
diff --git a/src/constants.ts b/src/constants.ts
index 72a4aa6..007b5e5 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -36,11 +36,13 @@ export const emptyMetrics: Metrics = {
 export const emptySession: StoredSession = {
 	aggregates: {
 		cadence: { count: 0, sum: 0 },
+		gear: { count: 0, sum: 0 },
 		heartRate: { count: 0, sum: 0 },
 		power: { count: 0, sum: 0 },
 		resistance: { count: 0, sum: 0 },
 	},
 	calories: 0,
+	controlMode: 'resistance',
 	distance: 0,
 	elapsedSeconds: 0,
 	ended: false,
diff --git a/src/hooks/use-gear-control.ts b/src/hooks/use-gear-control.ts
new file mode 100644
index 0000000..4041d11
--- /dev/null
+++ b/src/hooks/use-gear-control.ts
@@ -0,0 +1,87 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { gearForResistance, resistanceChangeForGears, shiftedGear, storedGear } from '../lib/gears';
+import { resistanceDirectionForKey } from '../lib/resistance';
+import type { ResistanceAdjustmentDirection } from '../types';
+
+export function useGearControl({
+	active,
+	connected,
+	keyboardEnabled,
+	onResistanceChange,
+	resistance,
+	setNotice,
+}: {
+	active: boolean;
+	connected: boolean;
+	keyboardEnabled: boolean;
+	onResistanceChange: (change: number) => void;
+	resistance: number;
+	setNotice: (notice: string) => void;
+}) {
+	const [gear, setGear] = useState(() => storedGear(localStorage, gearForResistance(resistance)));
+	const [shiftFlash, setShiftFlash] = useState<ResistanceAdjustmentDirection | undefined>();
+	const gearRef = useRef(gear);
+	const shiftFlashTimer = useRef<number | undefined>(undefined);
+
+	const shiftGear = useCallback(
+		(change: number) => {
+			if (!connected) {
+				setNotice('Connect the trainer before shifting gears.');
+				return;
+			}
+			const previous = gearRef.current;
+			const next = shiftedGear(previous, change);
+			if (next === previous) {
+				return;
+			}
+			setShiftFlash(change > 0 ? 'increase' : 'decrease');
+			window.clearTimeout(shiftFlashTimer.current);
+			shiftFlashTimer.current = window.setTimeout(() => setShiftFlash(undefined), 180);
+			gearRef.current = next;
+			setGear(next);
+			localStorage.setItem('trainer-virtual-gear', String(next));
+			onResistanceChange(resistanceChangeForGears(previous, next));
+		},
+		[connected, onResistanceChange, setNotice]
+	);
+
+	useEffect(() => {
+		if (!active) {
+			return;
+		}
+		const handleGearKey = (event: KeyboardEvent) => {
+			const target = event.target as HTMLElement | null;
+			const isGearControl = target?.matches('[data-gear-control="true"]');
+			if (
+				event.defaultPrevented ||
+				event.altKey ||
+				event.ctrlKey ||
+				event.metaKey ||
+				!keyboardEnabled ||
+				(!isGearControl &&
+					target?.matches("input, textarea, select, [contenteditable='true']"))
+			) {
+				return;
+			}
+			const direction = resistanceDirectionForKey(event.key);
+			if (!direction) {
+				return;
+			}
+			event.preventDefault();
+			shiftGear(direction === 'increase' ? 1 : -1);
+		};
+		window.addEventListener('keydown', handleGearKey);
+		return () => {
+			window.removeEventListener('keydown', handleGearKey);
+		};
+	}, [active, keyboardEnabled, shiftGear]);
+
+	useEffect(
+		() => () => {
+			window.clearTimeout(shiftFlashTimer.current);
+		},
+		[]
+	);
+
+	return { gear, shiftFlash, shiftGear };
+}
diff --git a/src/hooks/use-heart-rate-monitor.ts b/src/hooks/use-heart-rate-monitor.ts
new file mode 100644
index 0000000..0f6feec
--- /dev/null
+++ b/src/hooks/use-heart-rate-monitor.ts
@@ -0,0 +1,193 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { BATTERY, HEART_RATE } from '../constants';
+import { parseHeartRateMeasurement } from '../lib/heart-rate';
+
+const HEART_RATE_MEASUREMENT = 0x2a_37;
+const BATTERY_LEVEL = 0x2a_19;
+const STORAGE_KEY = 'heart-rate-device-id';
+
+export function useHeartRateMonitor(setNotice: (notice: string) => void) {
+	const [device, setDevice] = useState<BluetoothDevice>();
+	const [connected, setConnected] = useState(false);
+	const [busy, setBusy] = useState(false);
+	const [status, setStatus] = useState('Not paired');
+	const [heartRate, setHeartRate] = useState(0);
+	const [battery, setBattery] = useState<number>();
+	const autoReconnect = useRef(true);
+	const connecting = useRef(false);
+	const forgotten = useRef(false);
+	const connectDeviceRef = useRef<((selected: BluetoothDevice) => Promise<boolean>) | undefined>(
+		undefined
+	);
+
+	const connectDevice = useCallback(
+		async (selected: BluetoothDevice): Promise<boolean> => {
+			if (forgotten.current || connecting.current) {
+				return false;
+			}
+			connecting.current = true;
+			setBusy(true);
+			setStatus('Connecting…');
+			try {
+				const server = await selected.gatt?.connect();
+				if (!server) {
+					throw new Error('This heart rate monitor does not expose Bluetooth services.');
+				}
+				const service = await server.getPrimaryService(HEART_RATE);
+				const measurement = await service.getCharacteristic(HEART_RATE_MEASUREMENT);
+				measurement.addEventListener('characteristicvaluechanged', (event) => {
+					const { value } = event.target as BluetoothRemoteGATTCharacteristic;
+					if (!value) {
+						return;
+					}
+					const next = parseHeartRateMeasurement(value);
+					if (next !== undefined) {
+						setHeartRate(next);
+					}
+				});
+				await measurement.startNotifications();
+				try {
+					const batteryValue = await (
+						await (
+							await server.getPrimaryService(BATTERY)
+						).getCharacteristic(BATTERY_LEVEL)
+					).readValue();
+					setBattery(batteryValue.getUint8(0));
+				} catch {
+					setBattery(undefined);
+				}
+				selected.addEventListener(
+					'gattserverdisconnected',
+					() => {
+						setConnected(false);
+						setHeartRate(0);
+						setStatus('Paired · offline');
+						if (autoReconnect.current && !forgotten.current) {
+							window.setTimeout(() => connectDeviceRef.current?.(selected), 900);
+						}
+					},
+					{ once: true }
+				);
+				setDevice(selected);
+				setConnected(true);
+				setStatus('Connected');
+				localStorage.setItem(STORAGE_KEY, selected.id);
+				return true;
+			} catch (error) {
+				selected.gatt?.disconnect();
+				setConnected(false);
+				setStatus('Paired · offline');
+				setNotice(
+					`Heart rate monitor connection failed: ${error instanceof Error ? error.message : String(error)}`
+				);
+				return false;
+			} finally {
+				connecting.current = false;
+				setBusy(false);
+			}
+		},
+		[setNotice]
+	);
+
+	useEffect(() => {
+		connectDeviceRef.current = connectDevice;
+	}, [connectDevice]);
+
+	const pair = useCallback(async () => {
+		if (!navigator.bluetooth) {
+			setNotice('Web Bluetooth requires current Chrome or Edge on localhost or HTTPS.');
+			return;
+		}
+		try {
+			const selected = await navigator.bluetooth.requestDevice({
+				filters: [{ services: [HEART_RATE] }],
+				optionalServices: [BATTERY],
+			});
+			autoReconnect.current = true;
+			forgotten.current = false;
+			setDevice(selected);
+			localStorage.setItem(STORAGE_KEY, selected.id);
+			await connectDevice(selected);
+		} catch (error) {
+			if (!(error instanceof DOMException && error.name === 'NotFoundError')) {
+				setNotice(error instanceof Error ? error.message : String(error));
+			}
+		}
+	}, [connectDevice, setNotice]);
+
+	const reconnect = useCallback(async () => {
+		if (!device) {
+			return;
+		}
+		forgotten.current = false;
+		autoReconnect.current = true;
+		await connectDevice(device);
+	}, [connectDevice, device]);
+
+	const disconnect = useCallback(() => {
+		autoReconnect.current = false;
+		device?.gatt?.disconnect();
+		setConnected(false);
+		setHeartRate(0);
+		setStatus(device ? 'Paired · offline' : 'Not paired');
+	}, [device]);
+
+	const forget = useCallback(async () => {
+		autoReconnect.current = false;
+		forgotten.current = true;
+		device?.gatt?.disconnect();
+		try {
+			await device?.forget();
+		} finally {
+			localStorage.removeItem(STORAGE_KEY);
+			setDevice(undefined);
+			setConnected(false);
+			setHeartRate(0);
+			setBattery(undefined);
+			setStatus('Not paired');
+		}
+	}, [device]);
+
+	useEffect(() => {
+		let cancelled = false;
+		async function restore() {
+			if (!navigator.bluetooth?.getDevices) {
+				return;
+			}
+			const savedId = localStorage.getItem(STORAGE_KEY);
+			if (!savedId) {
+				return;
+			}
+			const remembered = (await navigator.bluetooth.getDevices()).find(
+				(candidate) => candidate.id === savedId
+			);
+			if (!(remembered && !cancelled)) {
+				return;
+			}
+			setDevice(remembered);
+			setStatus('Paired · offline');
+			forgotten.current = false;
+			autoReconnect.current = true;
+			await connectDevice(remembered);
+		}
+		restore().catch(() => setStatus('Paired · offline'));
+		return () => {
+			cancelled = true;
+			autoReconnect.current = false;
+		};
+	}, [connectDevice]);
+
+	return {
+		battery,
+		busy,
+		connected,
+		disconnect,
+		forget,
+		heartRate,
+		name: device?.name,
+		pair,
+		paired: Boolean(device),
+		reconnect,
+		status,
+	};
+}
diff --git a/src/hooks/use-session.ts b/src/hooks/use-session.ts
index bb0f8a8..7f772a9 100644
--- a/src/hooks/use-session.ts
+++ b/src/hooks/use-session.ts
@@ -2,6 +2,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { emptyMetrics, emptySession, RECORDING_PAUSE_DELAY_MS } from '../constants';
 import { addMetricAggregates, loadStoredSession, sessionContinuation } from '../lib/session';
 import type {
+	ControlMode,
 	MetricSample,
 	Metrics,
 	SessionAggregates,
@@ -17,12 +18,39 @@ interface FlagRef {
 	current: boolean;
 }
 
+interface SessionControlState {
+	gear: number;
+	mode: ControlMode;
+	resistance: number;
+}
+
+interface SessionController {
+	aggregates: SessionAggregates;
+	continueFrom: (sourceSession: SessionSnapshot) => void;
+	controlMode: ControlMode;
+	elapsedSeconds: number;
+	ended: boolean;
+	endSession: () => void;
+	history: MetricSample[];
+	isRiding: boolean;
+	manuallyPaused: boolean;
+	markSaved: (id: string) => void;
+	maximums: Metrics;
+	rideCalories: number;
+	rideDistance: number;
+	savedSessionId?: string;
+	snapshot: SessionSnapshot;
+	startedAt: number;
+	startNew: () => void;
+	togglePause: () => void;
+}
+
 export function useSession(
 	metrics: Metrics,
-	resistance: number,
+	control: SessionControlState,
 	lastPedalingAt: ActivityRef,
 	trainerReportsDistance: FlagRef
-) {
+): SessionController {
 	const restored = useMemo(loadStoredSession, []);
 	const initialStartedAt = useMemo(() => restored.startedAt || Date.now(), [restored.startedAt]);
 	const [isRiding, setIsRiding] = useState(false);
@@ -32,6 +60,7 @@ export function useSession(
 	const [elapsedSeconds, setElapsedSeconds] = useState(restored.elapsedSeconds);
 	const [rideDistance, setRideDistance] = useState(restored.distance);
 	const [rideCalories, setRideCalories] = useState(restored.calories);
+	const [controlMode, setControlMode] = useState<ControlMode>(restored.controlMode);
 	const [history, setHistory] = useState<MetricSample[]>(restored.history);
 	const [maximums, setMaximums] = useState<Metrics>(restored.maximums);
 	const [aggregates, setAggregates] = useState<SessionAggregates>(restored.aggregates);
@@ -40,7 +69,7 @@ export function useSession(
 	);
 	const [startedAt, setStartedAt] = useState(initialStartedAt);
 	const latestMetrics = useRef(metrics);
-	const latestResistance = useRef(resistance);
+	const latestControl = useRef(control);
 	const elapsedRef = useRef(restored.elapsedSeconds);
 	const lastTrainerDistance = useRef<number | undefined>(undefined);
 
@@ -59,8 +88,11 @@ export function useSession(
 	}, [ended, metrics]);
 
 	useEffect(() => {
-		latestResistance.current = resistance;
-	}, [resistance]);
+		latestControl.current = control;
+		if (elapsedRef.current === 0) {
+			setControlMode(control.mode);
+		}
+	}, [control]);
 
 	useEffect(() => {
 		localStorage.setItem(
@@ -68,6 +100,7 @@ export function useSession(
 			JSON.stringify({
 				aggregates,
 				calories: rideCalories,
+				controlMode,
 				distance: rideDistance,
 				elapsedSeconds,
 				ended,
@@ -80,6 +113,7 @@ export function useSession(
 		);
 	}, [
 		aggregates,
+		controlMode,
 		elapsedSeconds,
 		ended,
 		endedAt,
@@ -114,9 +148,14 @@ export function useSession(
 			const seconds = (now - lastTick) / 1000;
 			lastTick = now;
 			const live = latestMetrics.current;
-			const liveResistance = latestResistance.current;
+			const liveControl = latestControl.current;
+			const controlSample =
+				liveControl.mode === 'gear'
+					? { gear: liveControl.gear }
+					: { resistance: liveControl.resistance };
 			elapsedRef.current += seconds;
 			setElapsedSeconds(elapsedRef.current);
+			setControlMode(liveControl.mode);
 			if (trainerReportsDistance.current) {
 				const previous = lastTrainerDistance.current;
 				const delta = previous === undefined ? 0 : live.distance - previous;
@@ -134,13 +173,11 @@ export function useSession(
 					elapsedSeconds: elapsedRef.current,
 					heartRate: live.heartRate,
 					power: live.power,
-					resistance: liveResistance,
 					speed: live.speed,
+					...controlSample,
 				},
 			]);
-			setAggregates((current) =>
-				addMetricAggregates(current, { ...live, resistance: liveResistance })
-			);
+			setAggregates((current) => addMetricAggregates(current, { ...live, ...controlSample }));
 			if (live.power > 0) {
 				setRideCalories((value) => value + (live.power * seconds) / (4184 * 0.24));
 			}
@@ -184,6 +221,7 @@ export function useSession(
 		setElapsedSeconds(0);
 		setRideDistance(0);
 		setRideCalories(0);
+		setControlMode(latestControl.current.mode);
 		setHistory([]);
 		setIsRiding(false);
 		setManuallyPaused(false);
@@ -205,6 +243,7 @@ export function useSession(
 			setElapsedSeconds(continued.elapsedSeconds);
 			setRideDistance(continued.distance);
 			setRideCalories(continued.calories);
+			setControlMode(continued.controlMode);
 			setHistory(continued.history);
 			setIsRiding(false);
 			setManuallyPaused(false);
@@ -221,6 +260,7 @@ export function useSession(
 		() => ({
 			aggregates,
 			calories: rideCalories,
+			controlMode,
 			distance: rideDistance,
 			elapsedSeconds,
 			endedAt,
@@ -230,6 +270,7 @@ export function useSession(
 		}),
 		[
 			aggregates,
+			controlMode,
 			elapsedSeconds,
 			endedAt,
 			history,
@@ -243,6 +284,7 @@ export function useSession(
 	return {
 		aggregates,
 		continueFrom,
+		controlMode,
 		elapsedSeconds,
 		ended,
 		endSession,
diff --git a/src/hooks/use-trainer.ts b/src/hooks/use-trainer.ts
index 94c8948..6d6294c 100644
--- a/src/hooks/use-trainer.ts
+++ b/src/hooks/use-trainer.ts
@@ -24,14 +24,27 @@ import {
 	resistanceCommand,
 } from '../lib/bluetooth';
 import { scheduleNoticeDismissal } from '../lib/notification';
+import {
+	resistanceDirectionForKey,
+	resistanceRampDuration,
+	smoothedResistance,
+} from '../lib/resistance';
 import { storedResistance } from '../lib/session';
-import type { Metrics, Range } from '../types';
+import type { Metrics, Range, ResistanceAdjustmentDirection, ResistanceRamp } from '../types';
 
 export function useTrainer() {
 	const [device, setDevice] = useState<BluetoothDevice>();
+	const [pairedDevice, setPairedDevice] = useState<BluetoothDevice>();
 	const [controlPoint, setControlPoint] = useState<BluetoothRemoteGATTCharacteristic>();
 	const [metrics, setMetrics] = useState<Metrics>(emptyMetrics);
 	const [resistance, setResistance] = useState(storedResistance);
+	const [resistanceKeyFlash, setResistanceKeyFlash] = useState<
+		ResistanceAdjustmentDirection | undefined
+	>();
+	const [resistanceRamp, setResistanceRamp] = useState<ResistanceRamp>(() => {
+		const current = storedResistance();
+		return { current, from: current, phase: 'holding', progress: 0, to: current };
+	});
 	const [status, setStatus] = useState('Ready to connect');
 	const [notice, setNotice] = useState('');
 	const [connectionBusy, setConnectionBusy] = useState(false);
@@ -42,6 +55,7 @@ export function useTrainer() {
 	const commandQueue = useRef(Promise.resolve());
 	const resistanceTimer = useRef<number | undefined>(undefined);
 	const resistanceRampTimer = useRef<number | undefined>(undefined);
+	const resistanceKeyFlashTimer = useRef<number | undefined>(undefined);
 	const appliedResistance = useRef(storedResistance());
 	const resistanceTarget = useRef(storedResistance());
 	const connecting = useRef(false);
@@ -50,6 +64,7 @@ export function useTrainer() {
 	const autoReconnect = useRef(true);
 	const pendingDevice = useRef<BluetoothDevice | undefined>(undefined);
 	const keyboardControlsEnabled = useRef(true);
+	const gearControlsEnabled = useRef(false);
 	const unloading = useRef(false);
 	const lastCrank = useRef<{ revolutions: number; time: number } | undefined>(undefined);
 	const lastPedalingAt = useRef(0);
@@ -68,6 +83,15 @@ export function useTrainer() {
 
 	useEffect(() => scheduleNoticeDismissal(notice, () => setNotice('')), [notice]);
 
+	useEffect(
+		() => () => {
+			window.clearTimeout(resistanceTimer.current);
+			window.clearTimeout(resistanceRampTimer.current);
+			window.clearTimeout(resistanceKeyFlashTimer.current);
+		},
+		[]
+	);
+
 	const writeControl = useCallback(
 		async (characteristic: BluetoothRemoteGATTCharacteristic | undefined, bytes: number[]) => {
 			if (!characteristic) {
@@ -179,6 +203,7 @@ export function useTrainer() {
 		}
 		connecting.current = true;
 		try {
+			setPairedDevice(selected);
 			const server = await connectGatt(selected, rediscover, setStatus);
 			if (connectionStopped(rediscover)) {
 				selected.gatt?.disconnect();
@@ -232,6 +257,13 @@ export function useTrainer() {
 			setResistance(restored);
 			appliedResistance.current = restored;
 			resistanceTarget.current = restored;
+			setResistanceRamp({
+				current: restored,
+				from: restored,
+				phase: 'holding',
+				progress: 0,
+				to: restored,
+			});
 			await writeControl(point, [0]);
 			await new Promise((resolve) => window.setTimeout(resolve, 150));
 			await writeControl(point, resistanceCommand(restored, activeRange));
@@ -305,6 +337,7 @@ export function useTrainer() {
 				optionalServices,
 			});
 			pendingDevice.current = selected;
+			setPairedDevice(selected);
 			autoReconnect.current = true;
 			await connectDevice(selected);
 		} catch (error) {
@@ -341,6 +374,38 @@ export function useTrainer() {
 		device?.gatt?.disconnect();
 	}, [device]);
 
+	async function reconnect() {
+		if (!pairedDevice) {
+			return;
+		}
+		connectionCancelled.current = false;
+		disconnectRequested.current = false;
+		autoReconnect.current = true;
+		setConnectionBusy(true);
+		try {
+			await connectDevice(pairedDevice, true);
+		} finally {
+			setConnectionBusy(false);
+		}
+	}
+
+	const forget = useCallback(async () => {
+		autoReconnect.current = false;
+		disconnectRequested.current = true;
+		device?.gatt?.disconnect();
+		try {
+			await pairedDevice?.forget();
+		} finally {
+			localStorage.removeItem('trainer-device-id');
+			setDevice(undefined);
+			setPairedDevice(undefined);
+			setControlPoint(undefined);
+			setMetrics(emptyMetrics);
+			setStatus('Ready to pair');
+			setNotice('Trainer removed from paired devices.');
+		}
+	}, [device, pairedDevice]);
+
 	const sendResistance = useCallback(
 		async (percent: number) => {
 			await writeControl(
@@ -355,13 +420,36 @@ export function useTrainer() {
 		(target: number) => {
 			window.clearTimeout(resistanceRampTimer.current);
 			const start = appliedResistance.current;
+			if (start === target) {
+				setResistanceRamp({
+					current: target,
+					from: start,
+					phase: 'settled',
+					progress: 1,
+					to: target,
+				});
+				return;
+			}
 			const startedAt = performance.now();
-			const duration = Math.max(600, Math.min(3000, Math.abs(target - start) * 45));
+			const duration = resistanceRampDuration(start, target);
+			setResistanceRamp({
+				current: start,
+				from: start,
+				phase: 'ramping',
+				progress: 0,
+				to: target,
+			});
 			const advance = () => {
 				const progress = Math.min(1, (performance.now() - startedAt) / duration);
-				const eased = progress * progress * (3 - 2 * progress);
-				const current = start + (target - start) * eased;
+				const current = smoothedResistance(start, target, progress);
 				appliedResistance.current = current;
+				setResistanceRamp({
+					current,
+					from: start,
+					phase: progress < 1 ? 'ramping' : 'settled',
+					progress,
+					to: target,
+				});
 				sendResistance(current).catch((error: unknown) =>
 					setNotice(error instanceof Error ? error.message : String(error))
 				);
@@ -381,6 +469,15 @@ export function useTrainer() {
 			setResistance(next);
 			localStorage.setItem('trainer-resistance-percent', String(next));
 			window.clearTimeout(resistanceTimer.current);
+			window.clearTimeout(resistanceRampTimer.current);
+			const { current } = appliedResistance;
+			setResistanceRamp({
+				current,
+				from: current,
+				phase: current === next ? 'settled' : 'queued',
+				progress: current === next ? 1 : 0,
+				to: next,
+			});
 			resistanceTimer.current = window.setTimeout(() => {
 				rampResistance(next);
 			}, 180);
@@ -388,6 +485,29 @@ export function useTrainer() {
 		[rampResistance]
 	);
 
+	const shiftResistanceBy = useCallback(
+		(change: number) => {
+			const next = Math.max(0, Math.min(100, resistanceTarget.current + change));
+			window.clearTimeout(resistanceTimer.current);
+			window.clearTimeout(resistanceRampTimer.current);
+			resistanceTarget.current = next;
+			appliedResistance.current = next;
+			setResistance(next);
+			setResistanceRamp({
+				current: next,
+				from: next,
+				phase: 'settled',
+				progress: 1,
+				to: next,
+			});
+			localStorage.setItem('trainer-resistance-percent', String(next));
+			sendResistance(next).catch((error: unknown) =>
+				setNotice(error instanceof Error ? error.message : String(error))
+			);
+		},
+		[sendResistance]
+	);
+
 	useEffect(() => {
 		const handlePageHide = () => {
 			unloading.current = true;
@@ -419,6 +539,7 @@ export function useTrainer() {
 				setStatus('Ready to connect');
 				return;
 			}
+			setPairedDevice(remembered);
 			setStatus('Reconnecting…');
 			await reconnectDevice(remembered);
 		}
@@ -434,34 +555,68 @@ export function useTrainer() {
 	useEffect(() => {
 		const handleKeys = (event: KeyboardEvent) => {
 			const target = event.target as HTMLElement | null;
+			const isResistanceControl = target?.matches('[data-resistance-control="true"]');
 			if (
 				event.defaultPrevented ||
 				event.altKey ||
 				event.ctrlKey ||
 				event.metaKey ||
-				target?.matches("input, textarea, select, [contenteditable='true']")
+				(!isResistanceControl &&
+					target?.matches("input, textarea, select, [contenteditable='true']"))
 			) {
 				return;
 			}
 			if (!keyboardControlsEnabled.current) {
 				return;
 			}
-			if (event.key === 'ArrowUp') {
-				event.preventDefault();
+			if (gearControlsEnabled.current) {
+				return;
+			}
+			const direction = resistanceDirectionForKey(event.key);
+			if (!direction) {
+				return;
+			}
+			event.preventDefault();
+			setResistanceKeyFlash(direction);
+			window.clearTimeout(resistanceKeyFlashTimer.current);
+			if (direction === 'increase') {
 				updateResistance(resistanceTarget.current + 1);
-			} else if (event.key === 'ArrowDown') {
-				event.preventDefault();
+			} else {
 				updateResistance(resistanceTarget.current - 1);
 			}
 		};
+		const handleKeyUp = (event: KeyboardEvent) => {
+			if (!resistanceDirectionForKey(event.key)) {
+				return;
+			}
+			window.clearTimeout(resistanceKeyFlashTimer.current);
+			resistanceKeyFlashTimer.current = window.setTimeout(
+				() => setResistanceKeyFlash(undefined),
+				180
+			);
+		};
+		const handleBlur = () => {
+			window.clearTimeout(resistanceKeyFlashTimer.current);
+			setResistanceKeyFlash(undefined);
+		};
 		window.addEventListener('keydown', handleKeys);
-		return () => window.removeEventListener('keydown', handleKeys);
+		window.addEventListener('keyup', handleKeyUp);
+		window.addEventListener('blur', handleBlur);
+		return () => {
+			window.removeEventListener('keydown', handleKeys);
+			window.removeEventListener('keyup', handleKeyUp);
+			window.removeEventListener('blur', handleBlur);
+		};
 	}, [updateResistance]);
 
 	const setKeyboardControlsEnabled = useCallback((enabled: boolean) => {
 		keyboardControlsEnabled.current = enabled;
 	}, []);
 
+	const setGearControlsEnabled = useCallback((enabled: boolean) => {
+		gearControlsEnabled.current = enabled;
+	}, []);
+
 	return {
 		cancelConnection,
 		connect,
@@ -469,12 +624,20 @@ export function useTrainer() {
 		connectionBusy,
 		deviceName: device?.name,
 		disconnect,
+		forget,
 		lastPedalingAt,
 		metrics,
 		notice,
+		paired: Boolean(pairedDevice),
+		pairedDeviceName: pairedDevice?.name,
+		reconnect,
 		resistance,
+		resistanceKeyFlash,
+		resistanceRamp,
+		setGearControlsEnabled,
 		setKeyboardControlsEnabled,
 		setNotice,
+		shiftResistanceBy,
 		status,
 		trainerReportsDistance,
 		updateResistance,
diff --git a/src/hooks/use-zwift-click.ts b/src/hooks/use-zwift-click.ts
new file mode 100644
index 0000000..8176f39
--- /dev/null
+++ b/src/hooks/use-zwift-click.ts
@@ -0,0 +1,706 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { BATTERY } from '../constants';
+import {
+	type ClickControllerRoles,
+	type ClickShift,
+	clickV2StartCommand,
+	connectClickGatt,
+	filterAcceptedClickShifts,
+	filterClickShiftsForController,
+	parseClickV2Shift,
+	registerClickControllerRole,
+	storedClickControllerRoles,
+	storedClickDeviceIds,
+	waitForUsableClickNotification,
+	withClickConnectionTimeout,
+	ZWIFT_ASYNC_CHARACTERISTIC,
+	ZWIFT_CLICK_NAME,
+	ZWIFT_CLICK_SERVICE,
+	ZWIFT_LEGACY_SERVICE,
+	ZWIFT_MANUFACTURER_ID,
+	ZWIFT_SYNC_RX_CHARACTERISTIC,
+	ZWIFT_SYNC_TX_CHARACTERISTIC,
+} from '../lib/zwift-click';
+
+interface ClickRepeatTimer {
+	delay: number;
+	interval?: number;
+}
+
+interface ClickConnectionOptions {
+	force?: boolean;
+	rediscover?: boolean;
+}
+
+const STORAGE_KEY = 'zwift-click-v2-device-ids';
+const CONTROLLER_ROLES_STORAGE_KEY = 'zwift-click-v2-controller-roles';
+const CLICK_HOLD_DELAY_MS = 600;
+const CLICK_HOLD_REPEAT_MS = 220;
+const CLICK_RECONNECT_BASE_DELAY_MS = 400;
+const CLICK_RECONNECT_MAX_DELAY_MS = 1000;
+const CLICK_CONTROLLER_FLASH_MS = 350;
+const CLICK_SETUP_STEP_TIMEOUT_MS = 3000;
+const CLICK_SHIFTS: ClickShift[] = ['down', 'up'];
+
+type ClickConnectionCleanup = () => void;
+
+class SupersededClickConnectionError extends Error {}
+
+function saveDeviceIds(devices: BluetoothDevice[]) {
+	localStorage.setItem(STORAGE_KEY, JSON.stringify(devices.map(({ id }) => id).slice(0, 2)));
+}
+
+function saveControllerRoles(roles: ClickControllerRoles) {
+	localStorage.setItem(CONTROLLER_ROLES_STORAGE_KEY, JSON.stringify(roles));
+}
+
+function controllerLabel(role: ClickShift | undefined) {
+	if (role === 'up') {
+		return '+ Controller';
+	}
+	if (role === 'down') {
+		return '− Controller';
+	}
+	return 'Press a button to identify';
+}
+
+function shouldAutoReconnect(
+	autoReconnect: boolean,
+	forgottenIds: ReadonlySet<string>,
+	deviceId: string
+) {
+	return autoReconnect && !forgottenIds.has(deviceId);
+}
+
+function ensureCurrentConnection(isCurrent: () => boolean) {
+	if (!isCurrent()) {
+		throw new SupersededClickConnectionError();
+	}
+}
+
+async function clickService(server: BluetoothRemoteGATTServer) {
+	try {
+		return await server.getPrimaryService(ZWIFT_CLICK_SERVICE);
+	} catch {
+		return server.getPrimaryService(ZWIFT_LEGACY_SERVICE);
+	}
+}
+
+export function useZwiftClick(
+	onShift: (change: number) => void,
+	setNotice: (notice: string) => void,
+	identifyControllers = false
+) {
+	const [devices, setDevices] = useState<BluetoothDevice[]>([]);
+	const [connectedIds, setConnectedIds] = useState<string[]>([]);
+	const [connectingControllerIds, setConnectingControllerIds] = useState<string[]>([]);
+	const [activeControllerIds, setActiveControllerIds] = useState<string[]>([]);
+	const [controllerRoles, setControllerRoles] = useState<ClickControllerRoles>({});
+	const [busy, setBusy] = useState(false);
+	const [pairing, setPairing] = useState(false);
+	const [status, setStatus] = useState('Not paired');
+	const autoReconnect = useRef(true);
+	const connectingIds = useRef(new Set<string>());
+	const connectionAttempts = useRef(new Map<string, number>());
+	const connectionCleanups = useRef(new Map<string, ClickConnectionCleanup>());
+	const controllerFlashTimers = useRef(new Map<string, number>());
+	const controllerRolesRef = useRef<ClickControllerRoles>({});
+	const devicesRef = useRef<BluetoothDevice[]>([]);
+	const forgottenIds = useRef(new Set<string>());
+	const heldShiftsByDevice = useRef(new Map<string, ClickShift[]>());
+	const identifyControllersRef = useRef(identifyControllers);
+	const previousButtonMaps = useRef(new Map<string, number>());
+	const reconnectAttempts = useRef(new Map<string, number>());
+	const reconnectTimers = useRef(new Map<string, number>());
+	const reportedConnectionFailures = useRef(new Set<string>());
+	const lastShiftTimes = useRef(new Map<ClickShift, number>());
+	const repeatTimers = useRef(new Map<ClickShift, ClickRepeatTimer>());
+	const connectDeviceRef = useRef<
+		| ((selected: BluetoothDevice, options?: ClickConnectionOptions) => Promise<boolean>)
+		| undefined
+	>(undefined);
+	const onShiftRef = useRef(onShift);
+	const operationalIds = useRef(new Set<string>());
+
+	useEffect(() => {
+		onShiftRef.current = onShift;
+	}, [onShift]);
+
+	useEffect(() => {
+		identifyControllersRef.current = identifyControllers;
+		if (!identifyControllers) {
+			for (const timer of controllerFlashTimers.current.values()) {
+				window.clearTimeout(timer);
+			}
+			controllerFlashTimers.current.clear();
+			setActiveControllerIds((current) => (current.length ? [] : current));
+		}
+	}, [identifyControllers]);
+
+	useEffect(
+		() => () => {
+			for (const timer of controllerFlashTimers.current.values()) {
+				window.clearTimeout(timer);
+			}
+		},
+		[]
+	);
+
+	const registerControllerRole = useCallback((deviceId: string, shifts: ClickShift[]) => {
+		const next = registerClickControllerRole(controllerRolesRef.current, deviceId, shifts);
+		if (next === controllerRolesRef.current) {
+			return;
+		}
+		controllerRolesRef.current = next;
+		setControllerRoles(next);
+		saveControllerRoles(next);
+	}, []);
+
+	const forgetControllerRole = useCallback((deviceId: string) => {
+		if (!controllerRolesRef.current[deviceId]) {
+			return;
+		}
+		const next = { ...controllerRolesRef.current };
+		delete next[deviceId];
+		controllerRolesRef.current = next;
+		setControllerRoles(next);
+		saveControllerRoles(next);
+	}, []);
+
+	const stopRepeat = useCallback((shift: ClickShift) => {
+		const timer = repeatTimers.current.get(shift);
+		if (!timer) {
+			return;
+		}
+		window.clearTimeout(timer.delay);
+		window.clearInterval(timer.interval);
+		repeatTimers.current.delete(shift);
+	}, []);
+
+	const syncRepeats = useCallback(() => {
+		const heldShifts = new Set<ClickShift>();
+		for (const deviceShifts of heldShiftsByDevice.current.values()) {
+			for (const shift of deviceShifts) {
+				heldShifts.add(shift);
+			}
+		}
+		for (const shift of CLICK_SHIFTS) {
+			if (!heldShifts.has(shift)) {
+				stopRepeat(shift);
+				continue;
+			}
+			if (repeatTimers.current.has(shift)) {
+				continue;
+			}
+			const change = shift === 'down' ? -1 : 1;
+			const timer: ClickRepeatTimer = { delay: 0 };
+			timer.delay = window.setTimeout(() => {
+				onShiftRef.current(change);
+				timer.interval = window.setInterval(
+					() => onShiftRef.current(change),
+					CLICK_HOLD_REPEAT_MS
+				);
+			}, CLICK_HOLD_DELAY_MS);
+			repeatTimers.current.set(shift, timer);
+		}
+	}, [stopRepeat]);
+
+	const setDeviceHeldShifts = useCallback(
+		(deviceId: string, heldShifts: ClickShift[]) => {
+			if (heldShifts.length) {
+				heldShiftsByDevice.current.set(deviceId, heldShifts);
+			} else {
+				heldShiftsByDevice.current.delete(deviceId);
+			}
+			syncRepeats();
+		},
+		[syncRepeats]
+	);
+
+	const clearDeviceHeldShifts = useCallback(
+		(deviceId: string) => {
+			heldShiftsByDevice.current.delete(deviceId);
+			syncRepeats();
+		},
+		[syncRepeats]
+	);
+
+	const cancelReconnect = useCallback((deviceId: string, resetAttempts = false) => {
+		const timer = reconnectTimers.current.get(deviceId);
+		if (timer !== undefined) {
+			window.clearTimeout(timer);
+			reconnectTimers.current.delete(deviceId);
+		}
+		if (resetAttempts) {
+			reconnectAttempts.current.delete(deviceId);
+		}
+	}, []);
+
+	const scheduleReconnect = useCallback((selected: BluetoothDevice) => {
+		if (
+			!autoReconnect.current ||
+			forgottenIds.current.has(selected.id) ||
+			reconnectTimers.current.has(selected.id)
+		) {
+			return;
+		}
+		const attempt = (reconnectAttempts.current.get(selected.id) ?? 0) + 1;
+		reconnectAttempts.current.set(selected.id, attempt);
+		const delay = Math.min(
+			CLICK_RECONNECT_BASE_DELAY_MS * 2 ** (attempt - 1),
+			CLICK_RECONNECT_MAX_DELAY_MS
+		);
+		const timer = window.setTimeout(() => {
+			reconnectTimers.current.delete(selected.id);
+			connectDeviceRef.current?.(selected, { rediscover: true });
+		}, delay);
+		reconnectTimers.current.set(selected.id, timer);
+	}, []);
+
+	useEffect(
+		() => () => {
+			for (const shift of repeatTimers.current.keys()) {
+				stopRepeat(shift);
+			}
+		},
+		[stopRepeat]
+	);
+
+	const cleanupConnection = useCallback((deviceId: string) => {
+		connectionCleanups.current.get(deviceId)?.();
+		connectionCleanups.current.delete(deviceId);
+	}, []);
+
+	const flashController = useCallback((deviceId: string) => {
+		if (!identifyControllersRef.current) {
+			return;
+		}
+		window.clearTimeout(controllerFlashTimers.current.get(deviceId));
+		setActiveControllerIds((current) =>
+			current.includes(deviceId) ? current : [...current, deviceId]
+		);
+		const timer = window.setTimeout(() => {
+			controllerFlashTimers.current.delete(deviceId);
+			setActiveControllerIds((current) => current.filter((id) => id !== deviceId));
+		}, CLICK_CONTROLLER_FLASH_MS);
+		controllerFlashTimers.current.set(deviceId, timer);
+	}, []);
+
+	const handleControllerMessage = useCallback(
+		(deviceId: string, event: Event) => {
+			const { value } = event.target as BluetoothRemoteGATTCharacteristic;
+			if (!value) {
+				return;
+			}
+			const parsed = parseClickV2Shift(value, previousButtonMaps.current.get(deviceId));
+			if (!parsed) {
+				return;
+			}
+			operationalIds.current.add(deviceId);
+			cancelReconnect(deviceId, true);
+			reportedConnectionFailures.current.delete(deviceId);
+			setConnectedIds((current) => {
+				const next = current.includes(deviceId) ? current : [...current, deviceId];
+				setStatus(
+					next.length >= devicesRef.current.length ? 'Connected' : 'Paired · reconnecting'
+				);
+				return next;
+			});
+			previousButtonMaps.current.set(deviceId, parsed.buttonMap);
+			const controllerRole = controllerRolesRef.current[deviceId];
+			const heldShifts = filterClickShiftsForController(parsed.heldShifts, controllerRole);
+			const controllerShifts = filterClickShiftsForController(parsed.shifts, controllerRole);
+			setDeviceHeldShifts(deviceId, heldShifts);
+			const acceptedShifts = filterAcceptedClickShifts(
+				controllerShifts,
+				performance.now(),
+				lastShiftTimes.current
+			);
+			if (acceptedShifts.length) {
+				flashController(deviceId);
+			}
+			if (identifyControllersRef.current) {
+				registerControllerRole(deviceId, acceptedShifts);
+			}
+			for (const shift of acceptedShifts) {
+				onShiftRef.current(shift === 'down' ? -1 : 1);
+			}
+		},
+		[cancelReconnect, flashController, registerControllerRole, setDeviceHeldShifts]
+	);
+
+	const handleControllerDisconnect = useCallback(
+		(selected: BluetoothDevice) => {
+			cleanupConnection(selected.id);
+			operationalIds.current.delete(selected.id);
+			clearDeviceHeldShifts(selected.id);
+			previousButtonMaps.current.delete(selected.id);
+			setConnectedIds((current) => current.filter((id) => id !== selected.id));
+			if (shouldAutoReconnect(autoReconnect.current, forgottenIds.current, selected.id)) {
+				setStatus('Paired · reconnecting');
+				scheduleReconnect(selected);
+			} else {
+				setStatus('Paired · offline');
+			}
+		},
+		[cleanupConnection, clearDeviceHeldShifts, scheduleReconnect]
+	);
+
+	const establishControllerConnection = useCallback(
+		async (selected: BluetoothDevice, isCurrentAttempt: () => boolean, rediscover: boolean) => {
+			const server = await connectClickGatt(selected, rediscover, setStatus, (role) =>
+				registerControllerRole(selected.id, [role])
+			);
+			ensureCurrentConnection(isCurrentAttempt);
+			let removeMessageListeners = () => undefined;
+			const handleDisconnect = () => handleControllerDisconnect(selected);
+			const cleanup = () => {
+				removeMessageListeners();
+				selected.removeEventListener('gattserverdisconnected', handleDisconnect);
+			};
+			connectionCleanups.current.set(selected.id, cleanup);
+			selected.addEventListener('gattserverdisconnected', handleDisconnect, { once: true });
+			try {
+				const service = await withClickConnectionTimeout(
+					clickService(server),
+					CLICK_SETUP_STEP_TIMEOUT_MS
+				);
+				ensureCurrentConnection(isCurrentAttempt);
+				const [asyncCharacteristic, syncTxCharacteristic, syncRxCharacteristic] =
+					await Promise.all([
+						withClickConnectionTimeout(
+							service.getCharacteristic(ZWIFT_ASYNC_CHARACTERISTIC),
+							CLICK_SETUP_STEP_TIMEOUT_MS
+						),
+						withClickConnectionTimeout(
+							service.getCharacteristic(ZWIFT_SYNC_TX_CHARACTERISTIC),
+							CLICK_SETUP_STEP_TIMEOUT_MS
+						),
+						withClickConnectionTimeout(
+							service.getCharacteristic(ZWIFT_SYNC_RX_CHARACTERISTIC),
+							CLICK_SETUP_STEP_TIMEOUT_MS
+						),
+					]);
+				ensureCurrentConnection(isCurrentAttempt);
+				const handleMessage = (event: Event) => handleControllerMessage(selected.id, event);
+				removeMessageListeners = () => {
+					asyncCharacteristic.removeEventListener(
+						'characteristicvaluechanged',
+						handleMessage
+					);
+					syncTxCharacteristic.removeEventListener(
+						'characteristicvaluechanged',
+						handleMessage
+					);
+				};
+				asyncCharacteristic.addEventListener('characteristicvaluechanged', handleMessage);
+				syncTxCharacteristic.addEventListener('characteristicvaluechanged', handleMessage);
+				await waitForUsableClickNotification(
+					[
+						withClickConnectionTimeout(
+							asyncCharacteristic.startNotifications(),
+							CLICK_SETUP_STEP_TIMEOUT_MS
+						),
+						withClickConnectionTimeout(
+							syncTxCharacteristic.startNotifications(),
+							CLICK_SETUP_STEP_TIMEOUT_MS
+						),
+					],
+					() => operationalIds.current.has(selected.id)
+				);
+				ensureCurrentConnection(isCurrentAttempt);
+				try {
+					await withClickConnectionTimeout(
+						syncRxCharacteristic.writeValueWithoutResponse(clickV2StartCommand()),
+						CLICK_SETUP_STEP_TIMEOUT_MS
+					);
+				} catch (error) {
+					if (!operationalIds.current.has(selected.id)) {
+						throw error;
+					}
+				}
+				ensureCurrentConnection(isCurrentAttempt);
+			} catch (error) {
+				removeMessageListeners();
+				throw error;
+			}
+		},
+		[handleControllerDisconnect, handleControllerMessage, registerControllerRole]
+	);
+
+	const beginControllerConnectionAttempt = useCallback(
+		(selected: BluetoothDevice, force: boolean) => {
+			if (forgottenIds.current.has(selected.id)) {
+				return;
+			}
+			if (connectingIds.current.has(selected.id) && !force) {
+				return;
+			}
+			if (force) {
+				operationalIds.current.delete(selected.id);
+				connectionAttempts.current.set(
+					selected.id,
+					(connectionAttempts.current.get(selected.id) ?? 0) + 1
+				);
+				connectingIds.current.delete(selected.id);
+				cleanupConnection(selected.id);
+				selected.gatt?.disconnect();
+			}
+			cancelReconnect(selected.id);
+			const attempt = (connectionAttempts.current.get(selected.id) ?? 0) + 1;
+			connectionAttempts.current.set(selected.id, attempt);
+			connectingIds.current.add(selected.id);
+			setConnectingControllerIds((current) =>
+				current.includes(selected.id) ? current : [...current, selected.id]
+			);
+			previousButtonMaps.current.delete(selected.id);
+			clearDeviceHeldShifts(selected.id);
+			setBusy(true);
+			setStatus('Connecting controllers…');
+			return attempt;
+		},
+		[cancelReconnect, cleanupConnection, clearDeviceHeldShifts]
+	);
+
+	const handleConnectionFailure = useCallback(
+		(selected: BluetoothDevice, error: unknown) => {
+			cleanupConnection(selected.id);
+			operationalIds.current.delete(selected.id);
+			clearDeviceHeldShifts(selected.id);
+			selected.gatt?.disconnect();
+			setConnectedIds((current) => current.filter((id) => id !== selected.id));
+			const shouldReconnect = shouldAutoReconnect(
+				autoReconnect.current,
+				forgottenIds.current,
+				selected.id
+			);
+			setStatus(shouldReconnect ? 'Paired · reconnecting' : 'Paired · offline');
+			if (!(shouldReconnect || reportedConnectionFailures.current.has(selected.id))) {
+				reportedConnectionFailures.current.add(selected.id);
+				setNotice(
+					`Zwift Click connection failed: ${error instanceof Error ? error.message : String(error)}`
+				);
+			}
+			if (shouldReconnect) {
+				scheduleReconnect(selected);
+			}
+		},
+		[cleanupConnection, clearDeviceHeldShifts, scheduleReconnect, setNotice]
+	);
+
+	useEffect(
+		() => () => {
+			autoReconnect.current = false;
+			for (const deviceId of reconnectTimers.current.keys()) {
+				cancelReconnect(deviceId, true);
+			}
+		},
+		[cancelReconnect]
+	);
+
+	const connectDevice = useCallback(
+		async (
+			selected: BluetoothDevice,
+			{ force = false, rediscover = false }: ClickConnectionOptions = {}
+		): Promise<boolean> => {
+			const connectionAttempt = beginControllerConnectionAttempt(selected, force);
+			if (connectionAttempt === undefined) {
+				return false;
+			}
+			const isCurrentAttempt = () =>
+				connectionAttempts.current.get(selected.id) === connectionAttempt;
+			try {
+				await establishControllerConnection(selected, isCurrentAttempt, rediscover);
+				operationalIds.current.add(selected.id);
+				setConnectedIds((current) => {
+					const next = current.includes(selected.id)
+						? current
+						: [...current, selected.id];
+					setStatus(
+						next.length >= devicesRef.current.length
+							? 'Connected'
+							: 'Paired · reconnecting'
+					);
+					return next;
+				});
+				reconnectAttempts.current.delete(selected.id);
+				reportedConnectionFailures.current.delete(selected.id);
+				return true;
+			} catch (error) {
+				if (error instanceof SupersededClickConnectionError || !isCurrentAttempt()) {
+					return false;
+				}
+				handleConnectionFailure(selected, error);
+				return false;
+			} finally {
+				if (isCurrentAttempt()) {
+					connectingIds.current.delete(selected.id);
+					setConnectingControllerIds((current) =>
+						current.filter((deviceId) => deviceId !== selected.id)
+					);
+					setBusy(connectingIds.current.size > 0);
+				}
+			}
+		},
+		[beginControllerConnectionAttempt, establishControllerConnection, handleConnectionFailure]
+	);
+
+	useEffect(() => {
+		connectDeviceRef.current = connectDevice;
+	}, [connectDevice]);
+
+	const pair = useCallback(async () => {
+		if (!navigator.bluetooth) {
+			setNotice('Web Bluetooth requires current Chrome or Edge on localhost or HTTPS.');
+			return;
+		}
+		setPairing(true);
+		try {
+			const selected = await navigator.bluetooth.requestDevice({
+				filters: [{ name: ZWIFT_CLICK_NAME }],
+				optionalManufacturerData: [ZWIFT_MANUFACTURER_ID],
+				optionalServices: [ZWIFT_CLICK_SERVICE, ZWIFT_LEGACY_SERVICE, BATTERY],
+			});
+			autoReconnect.current = true;
+			forgottenIds.current.delete(selected.id);
+			setDevices((current) => {
+				const next = current.some(({ id }) => id === selected.id)
+					? current
+					: [...current, selected].slice(0, 2);
+				devicesRef.current = next;
+				saveDeviceIds(next);
+				return next;
+			});
+			// Do not make selection of the second controller wait for this controller's
+			// complete GATT setup. Its connection continues independently in the background.
+			connectDevice(selected);
+		} catch (error) {
+			if (!(error instanceof DOMException && error.name === 'NotFoundError')) {
+				setNotice(error instanceof Error ? error.message : String(error));
+			}
+		} finally {
+			setPairing(false);
+		}
+	}, [connectDevice, setNotice]);
+
+	const reconnect = useCallback(async () => {
+		autoReconnect.current = true;
+		await Promise.all(
+			devices
+				.filter((selected) => !connectedIds.includes(selected.id))
+				.map((selected) => connectDevice(selected, { force: true, rediscover: true }))
+		);
+	}, [connectDevice, connectedIds, devices]);
+
+	const disconnect = useCallback(() => {
+		autoReconnect.current = false;
+		for (const selected of devices) {
+			cancelReconnect(selected.id, true);
+			operationalIds.current.delete(selected.id);
+			clearDeviceHeldShifts(selected.id);
+			cleanupConnection(selected.id);
+			selected.gatt?.disconnect();
+		}
+		setConnectedIds([]);
+		setStatus(devices.length ? 'Paired · offline' : 'Not paired');
+	}, [cancelReconnect, cleanupConnection, clearDeviceHeldShifts, devices]);
+
+	const forgetDevice = useCallback(
+		async (deviceId: string) => {
+			forgottenIds.current.add(deviceId);
+			operationalIds.current.delete(deviceId);
+			cancelReconnect(deviceId, true);
+			clearDeviceHeldShifts(deviceId);
+			forgetControllerRole(deviceId);
+			const selected = devices.find(({ id }) => id === deviceId);
+			cleanupConnection(deviceId);
+			selected?.gatt?.disconnect();
+			try {
+				await selected?.forget();
+			} finally {
+				setDevices((current) => {
+					const next = current.filter(({ id }) => id !== deviceId);
+					devicesRef.current = next;
+					saveDeviceIds(next);
+					setStatus(next.length ? 'Paired' : 'Not paired');
+					return next;
+				});
+				setConnectedIds((current) => current.filter((id) => id !== deviceId));
+			}
+		},
+		[cancelReconnect, cleanupConnection, clearDeviceHeldShifts, devices, forgetControllerRole]
+	);
+
+	const forget = useCallback(async () => {
+		autoReconnect.current = false;
+		for (const selected of [...devices]) {
+			await forgetDevice(selected.id);
+		}
+	}, [devices, forgetDevice]);
+
+	useEffect(() => {
+		let cancelled = false;
+		async function restore() {
+			if (!navigator.bluetooth?.getDevices) {
+				return;
+			}
+			const ids = storedClickDeviceIds();
+			if (!ids.length) {
+				return;
+			}
+			const permitted = await navigator.bluetooth.getDevices();
+			const remembered = ids
+				.map((id) => permitted.find((candidate) => candidate.id === id))
+				.filter((candidate): candidate is BluetoothDevice => Boolean(candidate))
+				.slice(0, 2);
+			if (cancelled) {
+				return;
+			}
+			const rememberedIds = new Set(remembered.map(({ id }) => id));
+			const rememberedRoles = Object.fromEntries(
+				Object.entries(storedClickControllerRoles()).filter(([deviceId]) =>
+					rememberedIds.has(deviceId)
+				)
+			) as ClickControllerRoles;
+			controllerRolesRef.current = rememberedRoles;
+			devicesRef.current = remembered;
+			setControllerRoles(rememberedRoles);
+			setDevices(remembered);
+			for (const selected of remembered) {
+				forgottenIds.current.delete(selected.id);
+			}
+			setStatus(remembered.length ? 'Paired · offline' : 'Not paired');
+			autoReconnect.current = true;
+			await Promise.all(
+				remembered.map((selected) => connectDevice(selected, { rediscover: true }))
+			);
+		}
+		restore().catch(() => setStatus('Paired · offline'));
+		return () => {
+			cancelled = true;
+			autoReconnect.current = false;
+		};
+	}, [connectDevice]);
+
+	return {
+		busy,
+		connected: connectedIds.length > 0,
+		connectedCount: connectedIds.length,
+		controllers: devices.map((selected) => ({
+			active: activeControllerIds.includes(selected.id),
+			connected: connectedIds.includes(selected.id),
+			connecting: connectingControllerIds.includes(selected.id),
+			id: selected.id,
+			label: controllerLabel(controllerRoles[selected.id]),
+		})),
+		disconnect,
+		forget,
+		forgetDevice,
+		pair,
+		paired: devices.length > 0,
+		pairedCount: devices.length,
+		pairing,
+		reconnect,
+		status,
+	};
+}
diff --git a/src/lib/bluetooth.ts b/src/lib/bluetooth.ts
index 327fc61..e9c2e19 100644
--- a/src/lib/bluetooth.ts
+++ b/src/lib/bluetooth.ts
@@ -126,7 +126,11 @@ export async function findRememberedKickr(
 	);
 }
 
-export async function waitForFreshAdvertisement(device: BluetoothDevice): Promise<void> {
+export async function waitForFreshAdvertisement(
+	device: BluetoothDevice,
+	onAdvertisement?: (event: BluetoothAdvertisingEvent) => void,
+	timeoutMs = 3000
+): Promise<void> {
 	if (typeof device.watchAdvertisements !== 'function') {
 		return;
 	}
@@ -140,12 +144,19 @@ export async function waitForFreshAdvertisement(device: BluetoothDevice): Promis
 			}
 			finished = true;
 			window.clearTimeout(timeout);
-			device.removeEventListener('advertisementreceived', finish);
+			device.removeEventListener('advertisementreceived', handleAdvertisement);
 			controller.abort();
 			resolve();
 		};
-		device.addEventListener('advertisementreceived', finish, { once: true });
-		timeout = window.setTimeout(finish, 3000);
+		const handleAdvertisement = (event: Event) => {
+			try {
+				onAdvertisement?.(event as BluetoothAdvertisingEvent);
+			} finally {
+				finish();
+			}
+		};
+		device.addEventListener('advertisementreceived', handleAdvertisement, { once: true });
+		timeout = window.setTimeout(finish, timeoutMs);
 		device.watchAdvertisements({ signal: controller.signal }).catch(finish);
 	});
 }
diff --git a/src/lib/chart.ts b/src/lib/chart.ts
index 115ea60..7bb7dcf 100644
--- a/src/lib/chart.ts
+++ b/src/lib/chart.ts
@@ -1,23 +1,33 @@
-import type { ChartMode } from '../types';
+import type { ChartMode, ControlMode } from '../types';
 
-export const chartModes: { label: string; value: ChartMode }[] = [
+const baseChartModes: { label: string; value: ChartMode }[] = [
 	{ label: 'All', value: 'all' },
 	{ label: 'Speed', value: 'speed' },
 	{ label: 'Power', value: 'power' },
 	{ label: 'Cadence', value: 'cadence' },
 	{ label: 'Heart rate', value: 'heartRate' },
-	{ label: 'Resistance', value: 'resistance' },
 ];
 
+export function chartModesForControl(controlMode: ControlMode) {
+	return [
+		...baseChartModes,
+		controlMode === 'gear'
+			? { label: 'Gear', value: 'gear' as const }
+			: { label: 'Resistance', value: 'resistance' as const },
+	];
+}
+
 export function storedChartMode(storage: Pick<Storage, 'getItem'> = localStorage): ChartMode {
 	const saved = storage.getItem('trainer-chart-mode');
-	return ['all', 'speed', 'power', 'cadence', 'heartRate', 'resistance'].includes(saved ?? '')
+	return ['all', 'speed', 'power', 'cadence', 'heartRate', 'gear', 'resistance'].includes(
+		saved ?? ''
+	)
 		? (saved as ChartMode)
 		: 'all';
 }
 
 export function chartPath(
-	values: number[],
+	values: (number | undefined)[],
 	minimum: number,
 	maximum: number,
 	positions?: number[]
@@ -28,16 +38,24 @@ export function chartPath(
 	const span = maximum - minimum || 1;
 	const firstPosition = positions?.[0] ?? 0;
 	const positionSpan = (positions?.at(-1) ?? 0) - firstPosition;
+	let drawing = false;
 	return values
 		.map((value, index) => {
+			if (typeof value !== 'number' || !Number.isFinite(value)) {
+				drawing = false;
+				return '';
+			}
 			let x = values.length === 1 ? 0 : (index / (values.length - 1)) * 100;
 			if (positions && positionSpan > 0) {
-				x = ((positions[index] - firstPosition) / positionSpan) * 100;
+				x = (((positions[index] ?? firstPosition) - firstPosition) / positionSpan) * 100;
 			}
 			const normalized = Math.max(0, Math.min(1, (value - minimum) / span));
 			const y = 90 - normalized * 76;
-			return `${index ? 'L' : 'M'} ${x} ${y}`;
+			const command = drawing ? 'L' : 'M';
+			drawing = true;
+			return `${command} ${x} ${y}`;
 		})
+		.filter(Boolean)
 		.join(' ');
 }
 
diff --git a/src/lib/gears.ts b/src/lib/gears.ts
new file mode 100644
index 0000000..363469b
--- /dev/null
+++ b/src/lib/gears.ts
@@ -0,0 +1,28 @@
+export const MIN_GEAR = 1;
+export const MAX_GEAR = 24;
+export const DEFAULT_GEAR = 12;
+export const RESISTANCE_POINTS_PER_GEAR = 3;
+
+export function clampGear(gear: number): number {
+	return Math.max(MIN_GEAR, Math.min(MAX_GEAR, Math.round(gear)));
+}
+
+export function gearForResistance(resistance: number): number {
+	return clampGear(resistance / RESISTANCE_POINTS_PER_GEAR + 1);
+}
+
+export function storedGear(
+	storage: Pick<Storage, 'getItem'> = localStorage,
+	fallback = DEFAULT_GEAR
+): number {
+	const saved = Number(storage.getItem('trainer-virtual-gear'));
+	return Number.isFinite(saved) && saved > 0 ? clampGear(saved) : clampGear(fallback);
+}
+
+export function shiftedGear(current: number, change: number): number {
+	return clampGear(current + change);
+}
+
+export function resistanceChangeForGears(from: number, to: number): number {
+	return (clampGear(to) - clampGear(from)) * RESISTANCE_POINTS_PER_GEAR;
+}
diff --git a/src/lib/heart-rate.ts b/src/lib/heart-rate.ts
new file mode 100644
index 0000000..b8beb82
--- /dev/null
+++ b/src/lib/heart-rate.ts
@@ -0,0 +1,10 @@
+export function parseHeartRateMeasurement(value: DataView): number | undefined {
+	if (value.byteLength < 2) {
+		return;
+	}
+	const usesUint16 = Boolean(value.getUint8(0) & 1);
+	if (usesUint16) {
+		return value.byteLength >= 3 ? value.getUint16(1, true) : undefined;
+	}
+	return value.getUint8(1);
+}
diff --git a/src/lib/keyboard.ts b/src/lib/keyboard.ts
index ffa8218..d4b18b1 100644
--- a/src/lib/keyboard.ts
+++ b/src/lib/keyboard.ts
@@ -33,6 +33,13 @@ export const dashboardKeyboardShortcuts: KeyboardShortcutDescription[] = [
 	{ group: 'General', keys: ['Esc'], label: 'Close an open dialog' },
 ];
 
+export const gearingKeyboardShortcuts: KeyboardShortcutDescription[] =
+	dashboardKeyboardShortcuts.map((shortcut) =>
+		shortcut.label === 'Increase or decrease resistance'
+			? { ...shortcut, label: 'Shift to a harder or easier gear' }
+			: shortcut
+	);
+
 export const historyKeyboardShortcuts: KeyboardShortcutDescription[] = [
 	{ keys: ['↑', '↓'], label: 'Select the previous or next session' },
 	{ keys: ['←', '→'], label: 'Change the session chart view' },
diff --git a/src/lib/resistance.ts b/src/lib/resistance.ts
new file mode 100644
index 0000000..f3877c3
--- /dev/null
+++ b/src/lib/resistance.ts
@@ -0,0 +1,32 @@
+import type { ResistanceAdjustmentDirection } from '../types';
+
+export function resistanceAdjustmentDirection(
+	from: number,
+	to: number
+): ResistanceAdjustmentDirection | undefined {
+	if (to > from) {
+		return 'increase';
+	}
+	if (to < from) {
+		return 'decrease';
+	}
+}
+
+export function resistanceDirectionForKey(key: string): ResistanceAdjustmentDirection | undefined {
+	if (key === 'ArrowUp') {
+		return 'increase';
+	}
+	if (key === 'ArrowDown') {
+		return 'decrease';
+	}
+}
+
+export function resistanceRampDuration(from: number, to: number): number {
+	return Math.max(600, Math.min(3000, Math.abs(to - from) * 45));
+}
+
+export function smoothedResistance(from: number, to: number, progress: number): number {
+	const boundedProgress = Math.max(0, Math.min(1, progress));
+	const eased = boundedProgress * boundedProgress * (3 - 2 * boundedProgress);
+	return from + (to - from) * eased;
+}
diff --git a/src/lib/saved-sessions.ts b/src/lib/saved-sessions.ts
index 2a7b481..d531768 100644
--- a/src/lib/saved-sessions.ts
+++ b/src/lib/saved-sessions.ts
@@ -5,7 +5,7 @@ import type {
 	SessionMetadata,
 	SessionSnapshot,
 } from '../types';
-import { aggregateResistance } from './session';
+import { aggregateGear, aggregateResistance, controlModeForHistory } from './session';
 
 const DATABASE_NAME = 'ridecontrol-sessions';
 const DATABASE_VERSION = 1;
@@ -13,6 +13,9 @@ const SESSION_STORE = 'sessions';
 const SUMMARY_STORE = 'session-summaries';
 const ENDED_AT_INDEX = 'endedAt';
 const MERIDIEM_SUFFIX = /\s*(AM|PM)$/i;
+const SESSION_DATE_FORMATTER = new Intl.DateTimeFormat(undefined, { dateStyle: 'full' });
+
+type SessionTiming = Pick<SavedSessionSummary, 'elapsedSeconds' | 'endedAt' | 'startedAt'>;
 
 let databasePromise: Promise<IDBDatabase> | undefined;
 
@@ -144,10 +147,14 @@ export function normalizeSavedSession(session: SavedSession): SavedSession {
 		...session,
 		aggregates: {
 			...session.aggregates,
+			gear:
+				(session.aggregates as Partial<SavedSession['aggregates']>).gear ??
+				aggregateGear(session.history),
 			resistance:
 				(session.aggregates as Partial<SavedSession['aggregates']>).resistance ??
 				aggregateResistance(session.history),
 		},
+		controlMode: controlModeForHistory(session.history, session.controlMode),
 	};
 }
 
@@ -194,18 +201,45 @@ export interface SessionGroup {
 	sessions: SavedSessionSummary[];
 }
 
+function localDateKey(timestamp: number): string {
+	const date = new Date(timestamp);
+	return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
+}
+
+function hasRecordedSessionEnd(session: SessionTiming): boolean {
+	return session.elapsedSeconds > 0 && session.endedAt > session.startedAt;
+}
+
+function sessionSpansDates(session: SessionTiming): boolean {
+	return (
+		hasRecordedSessionEnd(session) &&
+		localDateKey(session.startedAt) !== localDateKey(session.endedAt)
+	);
+}
+
+export function formatSessionDateRange(session: SessionTiming): string {
+	const started = new Date(session.startedAt);
+	if (!sessionSpansDates(session)) {
+		return SESSION_DATE_FORMATTER.format(started);
+	}
+	return SESSION_DATE_FORMATTER.formatRange(started, new Date(session.endedAt));
+}
+
+function sessionDateGroupKey(session: SessionTiming): string {
+	const started = localDateKey(session.startedAt);
+	return sessionSpansDates(session) ? `${started}/${localDateKey(session.endedAt)}` : started;
+}
+
 export function groupSessionsByDate(sessions: SavedSessionSummary[]): SessionGroup[] {
 	const groups = new Map<string, SessionGroup>();
-	const dateFormatter = new Intl.DateTimeFormat(undefined, { dateStyle: 'full' });
 	for (const session of sessions) {
-		const date = new Date(session.startedAt);
-		const key = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
+		const key = sessionDateGroupKey(session);
 		const existing = groups.get(key);
 		if (existing) {
 			existing.sessions.push(session);
 		} else {
 			groups.set(key, {
-				date: dateFormatter.format(date),
+				date: formatSessionDateRange(session),
 				key,
 				sessions: [session],
 			});
@@ -251,16 +285,20 @@ export function formatSessionTime(timestamp: number): string {
 		.replace(MERIDIEM_SUFFIX, (suffix) => suffix.trim().toLowerCase());
 }
 
-export function formatSessionTimeRange(
-	session: Pick<SavedSession, 'elapsedSeconds' | 'endedAt' | 'startedAt'>
-): string {
+export function formatSessionTimeRange(session: SessionTiming): string {
 	const started = formatSessionTime(session.startedAt);
-	if (!(session.elapsedSeconds > 0 && session.endedAt > session.startedAt)) {
+	if (!hasRecordedSessionEnd(session)) {
 		return started;
 	}
 	return `${started} – ${formatSessionTime(session.endedAt)}`;
 }
 
+export function formatSessionListTime(session: SessionTiming): string {
+	return sessionSpansDates(session)
+		? formatSessionTimeRange(session)
+		: formatSessionTime(session.startedAt);
+}
+
 export async function requestPersistentSessionStorage(): Promise<boolean> {
 	if (!navigator.storage?.persist) {
 		return false;
diff --git a/src/lib/session.ts b/src/lib/session.ts
index 36c1c3d..5074786 100644
--- a/src/lib/session.ts
+++ b/src/lib/session.ts
@@ -1,5 +1,6 @@
 import { emptyMetrics, emptySession } from '../constants';
 import type {
+	ControlMode,
 	MetricAggregate,
 	MetricSample,
 	Metrics,
@@ -18,6 +19,7 @@ export function sessionContinuation(snapshot: SessionSnapshot): StoredSession {
 	return {
 		aggregates: snapshot.aggregates,
 		calories: snapshot.calories,
+		controlMode: snapshot.controlMode,
 		distance: snapshot.distance,
 		elapsedSeconds: snapshot.elapsedSeconds,
 		ended: false,
@@ -55,16 +57,40 @@ export function addAggregate(
 
 export function addMetricAggregates(
 	aggregates: SessionAggregates,
-	metrics: Pick<Metrics, 'cadence' | 'heartRate' | 'power'> & Pick<MetricSample, 'resistance'>
+	metrics: Pick<Metrics, 'cadence' | 'heartRate' | 'power'> &
+		Partial<Pick<MetricSample, 'gear' | 'resistance'>>
 ): SessionAggregates {
 	return {
 		cadence: addAggregate(aggregates.cadence, metrics.cadence, false),
+		gear:
+			typeof metrics.gear === 'number'
+				? addAggregate(aggregates.gear, metrics.gear, true)
+				: aggregates.gear,
 		heartRate: addAggregate(aggregates.heartRate, metrics.heartRate, false),
 		power: addAggregate(aggregates.power, metrics.power, true),
-		resistance: addAggregate(aggregates.resistance, metrics.resistance, true),
+		resistance:
+			typeof metrics.resistance === 'number'
+				? addAggregate(aggregates.resistance, metrics.resistance, true)
+				: aggregates.resistance,
 	};
 }
 
+export function aggregateGear(samples: Partial<Pick<MetricSample, 'gear'>>[]): MetricAggregate {
+	return samples.reduce<MetricAggregate>(
+		(aggregate, sample) => {
+			if (typeof sample.gear !== 'number' || !Number.isFinite(sample.gear)) {
+				return aggregate;
+			}
+			return addAggregate(
+				aggregate,
+				Math.min(24, Math.max(1, Math.round(sample.gear))),
+				true
+			);
+		},
+		{ count: 0, sum: 0 }
+	);
+}
+
 export function aggregateResistance(
 	samples: Partial<Pick<MetricSample, 'resistance'>>[]
 ): MetricAggregate {
@@ -92,6 +118,23 @@ export function restoreAggregate(
 	};
 }
 
+function optionalControlValue(value: unknown, minimum: number, maximum: number) {
+	if (typeof value !== 'number' || !Number.isFinite(value)) {
+		return;
+	}
+	return Math.min(maximum, Math.max(minimum, value));
+}
+
+export function controlModeForHistory(
+	history: Partial<Pick<MetricSample, 'gear'>>[],
+	savedMode?: ControlMode
+): ControlMode {
+	if (savedMode === 'gear' || savedMode === 'resistance') {
+		return savedMode;
+	}
+	return history.some((sample) => typeof sample.gear === 'number') ? 'gear' : 'resistance';
+}
+
 export function loadStoredSession(storage: ReadableStorage = localStorage): StoredSession {
 	const saved = storage.getItem('trainer-session');
 	if (!saved) {
@@ -104,9 +147,10 @@ export function loadStoredSession(storage: ReadableStorage = localStorage): Stor
 			? parsed.history.slice(-3600).map((sample) => ({
 					cadence: nonNegativeNumber(sample.cadence),
 					elapsedSeconds: nonNegativeNumber(sample.elapsedSeconds),
+					gear: optionalControlValue(sample.gear, 1, 24),
 					heartRate: nonNegativeNumber(sample.heartRate),
 					power: nonNegativeNumber(sample.power),
-					resistance: Math.min(100, nonNegativeNumber(sample.resistance)),
+					resistance: optionalControlValue(sample.resistance, 0, 100),
 					speed: nonNegativeNumber(sample.speed),
 				}))
 			: [];
@@ -114,6 +158,7 @@ export function loadStoredSession(storage: ReadableStorage = localStorage): Stor
 		return {
 			aggregates: {
 				cadence: restoreAggregate(parsed.aggregates?.cadence, historyAggregates.cadence),
+				gear: restoreAggregate(parsed.aggregates?.gear, historyAggregates.gear),
 				heartRate: restoreAggregate(
 					parsed.aggregates?.heartRate,
 					historyAggregates.heartRate
@@ -125,6 +170,7 @@ export function loadStoredSession(storage: ReadableStorage = localStorage): Stor
 				),
 			},
 			calories: nonNegativeNumber(parsed.calories),
+			controlMode: controlModeForHistory(history, parsed.controlMode),
 			distance: nonNegativeNumber(parsed.distance),
 			elapsedSeconds: nonNegativeNumber(parsed.elapsedSeconds),
 			ended: parsed.ended === true,
diff --git a/src/lib/tcx.ts b/src/lib/tcx.ts
index d579b21..80ab955 100644
--- a/src/lib/tcx.ts
+++ b/src/lib/tcx.ts
@@ -14,8 +14,8 @@ function xmlEscape(value: string): string {
 		.replaceAll("'", '&apos;');
 }
 
-function nonNegative(value: number): number {
-	return Number.isFinite(value) ? Math.max(0, value) : 0;
+function nonNegative(value: unknown): number {
+	return typeof value === 'number' && Number.isFinite(value) ? Math.max(0, value) : 0;
 }
 
 function average({ count, sum }: { count: number; sum: number }): number {
@@ -49,6 +49,10 @@ function trackpointDistances(session: SavedSession): number[] {
 
 function trackpointXml(sample: MetricSample, timestamp: number, distanceMeters: number): string {
 	const heartRate = nonNegative(sample.heartRate);
+	const controlExtension =
+		typeof sample.gear === 'number'
+			? `<rc:Gear>${Math.round(nonNegative(sample.gear))}</rc:Gear>`
+			: `<rc:Resistance>${nonNegative(sample.resistance).toFixed(1)}</rc:Resistance>`;
 	return `
 					<Trackpoint>
 						<Time>${new Date(timestamp).toISOString()}</Time>
@@ -65,7 +69,7 @@ function trackpointXml(sample: MetricSample, timestamp: number, distanceMeters:
 								<ns3:Speed>${(nonNegative(sample.speed) / 3.6).toFixed(3)}</ns3:Speed>
 								<ns3:Watts>${Math.round(nonNegative(sample.power))}</ns3:Watts>
 							</ns3:TPX>
-							<rc:Resistance>${nonNegative(sample.resistance).toFixed(1)}</rc:Resistance>
+							${controlExtension}
 						</Extensions>
 					</Trackpoint>`;
 }
@@ -91,11 +95,12 @@ export function sessionToTcx(session: SavedSession): string {
 	const averageHeartRate = average(session.aggregates.heartRate);
 	const averageCadence = average(session.aggregates.cadence);
 	const averagePower = average(session.aggregates.power);
-	const averageResistance = average(session.aggregates.resistance);
-	const maximumResistance = Math.max(
-		0,
-		...session.history.map((sample) => nonNegative(sample.resistance))
-	);
+	const controlSummary =
+		session.controlMode === 'gear'
+			? `<rc:AverageGear>${average(session.aggregates.gear).toFixed(1)}</rc:AverageGear>
+						<rc:MaximumGear>${Math.max(0, ...session.history.map((sample) => nonNegative(sample.gear))).toFixed(0)}</rc:MaximumGear>`
+			: `<rc:AverageResistance>${average(session.aggregates.resistance).toFixed(1)}</rc:AverageResistance>
+						<rc:MaximumResistance>${Math.max(0, ...session.history.map((sample) => nonNegative(sample.resistance))).toFixed(1)}</rc:MaximumResistance>`;
 	const distanceMeters = nonNegative(session.distance) * 1000;
 	const averageSpeed = session.elapsedSeconds > 0 ? distanceMeters / session.elapsedSeconds : 0;
 
@@ -131,8 +136,7 @@ export function sessionToTcx(session: SavedSession): string {
 						<ns3:MaxWatts>${Math.round(nonNegative(session.maximums.power))}</ns3:MaxWatts>
 					</ns3:LX>
 					<rc:Summary>
-						<rc:AverageResistance>${averageResistance.toFixed(1)}</rc:AverageResistance>
-						<rc:MaximumResistance>${maximumResistance.toFixed(1)}</rc:MaximumResistance>
+						${controlSummary}
 					</rc:Summary>
 				</Extensions>
 			</Lap>${
diff --git a/src/lib/zwift-click.ts b/src/lib/zwift-click.ts
new file mode 100644
index 0000000..faaee2a
--- /dev/null
+++ b/src/lib/zwift-click.ts
@@ -0,0 +1,270 @@
+import { waitForFreshAdvertisement } from './bluetooth';
+
+export const ZWIFT_CLICK_NAME = 'Zwift Click';
+export const ZWIFT_CLICK_SERVICE = '0000fc82-0000-1000-8000-00805f9b34fb';
+export const ZWIFT_LEGACY_SERVICE = '00000001-19ca-4651-86e5-fa29dcdd09d1';
+export const ZWIFT_ASYNC_CHARACTERISTIC = '00000002-19ca-4651-86e5-fa29dcdd09d1';
+export const ZWIFT_SYNC_RX_CHARACTERISTIC = '00000003-19ca-4651-86e5-fa29dcdd09d1';
+export const ZWIFT_SYNC_TX_CHARACTERISTIC = '00000004-19ca-4651-86e5-fa29dcdd09d1';
+export const ZWIFT_MANUFACTURER_ID = 2378;
+
+const CONTROLLER_NOTIFICATION = 0x23;
+const MINUS_BUTTON_MASK = 0x01_00;
+const PLUS_BUTTON_MASK = 0x10_00;
+const ALL_BUTTONS_RELEASED = 0xff_ff_ff_ff;
+const CLICK_CONNECTION_TIMEOUT_MS = 8000;
+const CLICK_RECONNECT_PROBE_TIMEOUT_MS = 2000;
+const CLICK_REDISCOVERY_TIMEOUT_MS = 1600;
+const CLICK_REDISCOVERED_CONNECTION_TIMEOUT_MS = 3500;
+const CLICK_V2_RIGHT_SIDE = 0x0a;
+const CLICK_V2_LEFT_SIDE = 0x0b;
+
+export type ClickShift = 'down' | 'up';
+export type ClickControllerRoles = Record<string, ClickShift>;
+
+export function clickControllerRoleFromManufacturerData(
+	manufacturerData: BluetoothManufacturerData
+): ClickShift | undefined {
+	const zwiftData = manufacturerData.get(ZWIFT_MANUFACTURER_ID);
+	if (!zwiftData?.byteLength) {
+		return;
+	}
+	const side = zwiftData.getUint8(0);
+	if (side === CLICK_V2_RIGHT_SIDE) {
+		return 'up';
+	}
+	if (side === CLICK_V2_LEFT_SIDE) {
+		return 'down';
+	}
+}
+
+export function filterClickShiftsForController(
+	shifts: ClickShift[],
+	role: ClickShift | undefined
+): ClickShift[] {
+	return role ? shifts.filter((shift) => shift === role) : shifts;
+}
+
+export async function waitForUsableClickNotification(
+	attempts: readonly Promise<unknown>[],
+	receivedMessage: () => boolean
+): Promise<void> {
+	try {
+		await Promise.any(attempts);
+	} catch (error) {
+		if (!receivedMessage()) {
+			throw error;
+		}
+	}
+}
+
+export async function withClickConnectionTimeout<T>(
+	connection: Promise<T>,
+	timeoutMs = CLICK_CONNECTION_TIMEOUT_MS
+): Promise<T> {
+	let timeout: ReturnType<typeof setTimeout> | undefined;
+	try {
+		return await Promise.race([
+			connection,
+			new Promise<never>((_, reject) => {
+				timeout = setTimeout(
+					() => reject(new Error('Controller did not respond. Wake it and try again.')),
+					timeoutMs
+				);
+			}),
+		]);
+	} finally {
+		clearTimeout(timeout);
+	}
+}
+
+export async function connectClickGatt(
+	device: BluetoothDevice,
+	rediscover: boolean,
+	updateStatus: (status: string) => void,
+	onControllerRole?: (role: ClickShift) => void
+): Promise<BluetoothRemoteGATTServer> {
+	const { gatt } = device;
+	if (!gatt) {
+		throw new Error('This controller does not expose Bluetooth services.');
+	}
+	const connect = (timeoutMs: number) => {
+		updateStatus('Connecting controllers…');
+		return withClickConnectionTimeout(gatt.connect(), timeoutMs);
+	};
+	const observeController = () =>
+		waitForFreshAdvertisement(
+			device,
+			(event) => {
+				const role = clickControllerRoleFromManufacturerData(event.manufacturerData);
+				if (role) {
+					onControllerRole?.(role);
+				}
+			},
+			CLICK_REDISCOVERY_TIMEOUT_MS
+		);
+	// Observe the side identity concurrently so it does not slow an awake controller's
+	// direct connection. The same observation doubles as wake discovery if that probe fails.
+	const advertisement = onControllerRole ? observeController() : undefined;
+	try {
+		return await connect(
+			rediscover ? CLICK_RECONNECT_PROBE_TIMEOUT_MS : CLICK_CONNECTION_TIMEOUT_MS
+		);
+	} catch {
+		gatt.disconnect();
+		updateStatus('Finding controllers…');
+		await (advertisement ?? observeController());
+		return connect(CLICK_REDISCOVERED_CONNECTION_TIMEOUT_MS);
+	}
+}
+
+export function shouldAcceptClickShift(
+	lastAcceptedAt: number | undefined,
+	receivedAt: number,
+	minimumInterval = 180
+): boolean {
+	return lastAcceptedAt === undefined || receivedAt - lastAcceptedAt >= minimumInterval;
+}
+
+export function filterAcceptedClickShifts(
+	shifts: ClickShift[],
+	receivedAt: number,
+	lastShiftTimes: Map<ClickShift, number>
+): ClickShift[] {
+	return shifts.filter((shift) => {
+		if (!shouldAcceptClickShift(lastShiftTimes.get(shift), receivedAt)) {
+			return false;
+		}
+		lastShiftTimes.set(shift, receivedAt);
+		return true;
+	});
+}
+
+export function registerClickControllerRole(
+	roles: ClickControllerRoles,
+	deviceId: string,
+	shifts: ClickShift[]
+): ClickControllerRoles {
+	const role = shifts.length === 1 ? shifts[0] : undefined;
+	if (!role || roles[deviceId] === role) {
+		return roles;
+	}
+	const previousRole = roles[deviceId];
+	const next = { ...roles };
+	for (const [otherDeviceId, otherRole] of Object.entries(next)) {
+		if (otherDeviceId !== deviceId && otherRole === role) {
+			if (previousRole) {
+				next[otherDeviceId] = previousRole;
+			} else {
+				delete next[otherDeviceId];
+			}
+		}
+	}
+	next[deviceId] = role;
+	return next;
+}
+
+function pressedShifts(buttonMap: number): ClickShift[] {
+	const shifts: ClickShift[] = [];
+	if ((buttonMap & MINUS_BUTTON_MASK) === 0) {
+		shifts.push('down');
+	}
+	if ((buttonMap & PLUS_BUTTON_MASK) === 0) {
+		shifts.push('up');
+	}
+	return shifts;
+}
+
+export function clickV2StartCommand(): ArrayBuffer {
+	const command = new ArrayBuffer(8);
+	new Uint8Array(command).set([0x52, 0x69, 0x64, 0x65, 0x4f, 0x6e, 0x02, 0x03]);
+	return command;
+}
+
+function readButtonMap(message: Uint8Array): number | undefined {
+	const tagOffset = message.indexOf(0x08);
+	if (tagOffset >= 0) {
+		let value = 0;
+		let multiplier = 1;
+		for (
+			let offset = tagOffset + 1;
+			offset < message.length && multiplier <= 2 ** 28;
+			offset += 1
+		) {
+			const byte = message[offset];
+			if (byte === undefined) {
+				return;
+			}
+			value += (byte & 0x7f) * multiplier;
+			if ((byte & 0x80) === 0) {
+				return value >>> 0;
+			}
+			multiplier *= 128;
+		}
+	}
+
+	// Some early community implementations exposed this uint32 as fixed32.
+	// Accepting it keeps the decoder tolerant while V2 hardware uses the varint field above.
+	const fixedTagOffset = message.indexOf(0x0d);
+	const fixedValueOffset = fixedTagOffset + 1;
+	if (fixedTagOffset < 0 || fixedValueOffset + 4 > message.length) {
+		return;
+	}
+	return new DataView(message.buffer, message.byteOffset + fixedValueOffset, 4).getUint32(
+		0,
+		true
+	);
+}
+
+export function parseClickV2Shift(
+	value: DataView,
+	previousButtonMap = ALL_BUTTONS_RELEASED
+): { buttonMap: number; heldShifts: ClickShift[]; shifts: ClickShift[] } | undefined {
+	const bytes = new Uint8Array(value.buffer, value.byteOffset, value.byteLength);
+	if (bytes[0] !== CONTROLLER_NOTIFICATION) {
+		return;
+	}
+	const buttonMap = readButtonMap(bytes.subarray(1));
+	if (buttonMap === undefined) {
+		return;
+	}
+	const shifts: ClickShift[] = [];
+	if ((previousButtonMap & MINUS_BUTTON_MASK) !== 0 && (buttonMap & MINUS_BUTTON_MASK) === 0) {
+		shifts.push('down');
+	}
+	if ((previousButtonMap & PLUS_BUTTON_MASK) !== 0 && (buttonMap & PLUS_BUTTON_MASK) === 0) {
+		shifts.push('up');
+	}
+	return { buttonMap, heldShifts: pressedShifts(buttonMap), shifts };
+}
+
+export function storedClickDeviceIds(storage: Pick<Storage, 'getItem'> = localStorage): string[] {
+	try {
+		const saved = JSON.parse(storage.getItem('zwift-click-v2-device-ids') ?? '[]');
+		return Array.isArray(saved)
+			? saved.filter((value): value is string => typeof value === 'string').slice(0, 2)
+			: [];
+	} catch {
+		return [];
+	}
+}
+
+export function storedClickControllerRoles(
+	storage: Pick<Storage, 'getItem'> = localStorage
+): ClickControllerRoles {
+	try {
+		const saved = JSON.parse(storage.getItem('zwift-click-v2-controller-roles') ?? '{}');
+		if (!saved || typeof saved !== 'object' || Array.isArray(saved)) {
+			return {};
+		}
+		const roles: ClickControllerRoles = {};
+		for (const [deviceId, role] of Object.entries(saved)) {
+			if ((role === 'up' || role === 'down') && !Object.values(roles).includes(role)) {
+				roles[deviceId] = role;
+			}
+		}
+		return roles;
+	} catch {
+		return {};
+	}
+}
diff --git a/src/style.css b/src/style.css
index 6f0b3c9..169764f 100644
--- a/src/style.css
+++ b/src/style.css
@@ -37,6 +37,69 @@
 	}
 }
 
+@property --ramp-progress {
+	syntax: "<angle>";
+	inherits: true;
+	initial-value: 0deg;
+}
+
+@layer components {
+	.resistance-slider {
+		height: 0.375rem;
+		appearance: none;
+		background: linear-gradient(
+			to right,
+			var(--color-mint) 0 var(--resistance-position),
+			#3a4654 var(--resistance-position) 100%
+		);
+		border-radius: 9999px;
+	}
+	.resistance-slider[data-ramp-active="true"] {
+		transition: --ramp-progress 200ms linear;
+	}
+	.resistance-slider:focus {
+		outline: none;
+	}
+	.resistance-slider::-webkit-slider-runnable-track {
+		height: 0.375rem;
+		background: transparent;
+		border-radius: 9999px;
+	}
+	.resistance-slider::-webkit-slider-thumb {
+		width: 1.25rem;
+		height: 1.25rem;
+		margin-top: -0.4375rem;
+		appearance: none;
+		background:
+			radial-gradient(circle, var(--color-mint) 0 42%, transparent 46%),
+			conic-gradient(
+				var(--color-mint) 0 var(--ramp-progress),
+				#475569 var(--ramp-progress) 360deg
+			);
+		border: 2px solid var(--color-panel);
+		border-radius: 9999px;
+		box-shadow: 0 0 0 1px #64748b;
+	}
+	.resistance-slider::-moz-range-track {
+		height: 0.375rem;
+		background: transparent;
+		border-radius: 9999px;
+	}
+	.resistance-slider::-moz-range-thumb {
+		width: 1.25rem;
+		height: 1.25rem;
+		background:
+			radial-gradient(circle, var(--color-mint) 0 42%, transparent 46%),
+			conic-gradient(
+				var(--color-mint) 0 var(--ramp-progress),
+				#475569 var(--ramp-progress) 360deg
+			);
+		border: 2px solid var(--color-panel);
+		border-radius: 9999px;
+		box-shadow: 0 0 0 1px #64748b;
+	}
+}
+
 @keyframes fade-in {
 	from {
 		opacity: 0;
diff --git a/src/types.ts b/src/types.ts
index 864d0f6..309f282 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -17,12 +17,24 @@ export interface Range {
 	min: number;
 }
 
+export type ResistanceRampPhase = 'holding' | 'queued' | 'ramping' | 'settled';
+export type ResistanceAdjustmentDirection = 'decrease' | 'increase';
+
+export interface ResistanceRamp {
+	current: number;
+	from: number;
+	phase: ResistanceRampPhase;
+	progress: number;
+	to: number;
+}
+
 export interface MetricSample {
 	cadence: number;
 	elapsedSeconds: number;
+	gear?: number;
 	heartRate: number;
 	power: number;
-	resistance: number;
+	resistance?: number;
 	speed: number;
 }
 
@@ -33,14 +45,18 @@ export interface MetricAggregate {
 
 export interface SessionAggregates {
 	cadence: MetricAggregate;
+	gear: MetricAggregate;
 	heartRate: MetricAggregate;
 	power: MetricAggregate;
 	resistance: MetricAggregate;
 }
 
+export type ControlMode = 'gear' | 'resistance';
+
 export interface StoredSession {
 	aggregates: SessionAggregates;
 	calories: number;
+	controlMode: ControlMode;
 	distance: number;
 	elapsedSeconds: number;
 	ended: boolean;
@@ -61,6 +77,7 @@ export interface SessionMetadata {
 export interface SessionSnapshot {
 	aggregates: SessionAggregates;
 	calories: number;
+	controlMode: ControlMode;
 	distance: number;
 	elapsedSeconds: number;
 	endedAt: number;
@@ -87,6 +104,7 @@ export type ChartMode =
 	| 'all'
 	| 'cadence'
 	| 'elevation'
+	| 'gear'
 	| 'heartRate'
 	| 'power'
 	| 'resistance'
diff --git a/tests/components.test.tsx b/tests/components.test.tsx
index e0757e5..a09996c 100644
--- a/tests/components.test.tsx
+++ b/tests/components.test.tsx
@@ -2,6 +2,8 @@ import { describe, expect, test } from 'bun:test';
 import { renderToStaticMarkup } from 'react-dom/server';
 import { App } from '../src/app';
 import { ConnectionControl } from '../src/components/connection-control';
+import { DevicePairingButton, DevicePairingPanel } from '../src/components/device-pairing';
+import { GearControl } from '../src/components/gear-control';
 import { Icon } from '../src/components/icon';
 import { KeyboardShortcutsDialog } from '../src/components/keyboard-shortcuts-dialog';
 import {
@@ -50,6 +52,10 @@ describe('view components', () => {
 		);
 		expect(html).toContain('POWER');
 		expect(html).toContain('200');
+		expect(html).toContain('grid grid-cols-2 gap-3 border-line border-t pt-3');
+		expect(html).toContain('font-semibold text-2xl text-white tabular-nums tracking-tight');
+		expect(html).toContain('<span>180</span>');
+		expect(html).toContain('<span>300</span>');
 		expect(metricAccentClass('rose')).toBe('bg-rose-400');
 		expect(metricAccentClass('other')).toBe('bg-mint');
 		expect(metricIconClass('violet')).toBe('text-violet-400');
@@ -88,9 +94,11 @@ describe('view components', () => {
 		const enabled = render(
 			<ResistanceControl
 				disabled={false}
+				keyboardFlash="increase"
 				max={100}
 				min={0}
 				onChange={() => undefined}
+				ramp={{ current: 35, from: 20, phase: 'ramping', progress: 0.4, to: 60 }}
 				step={1}
 				value={20}
 			/>
@@ -101,13 +109,55 @@ describe('view components', () => {
 				max={100}
 				min={0}
 				onChange={() => undefined}
+				ramp={{ current: 20, from: 20, phase: 'holding', progress: 0, to: 20 }}
 				step={1}
 				value={20}
 			/>
 		);
 		expect(enabled).toContain('aria-label="Resistance"');
 		expect(enabled).toContain('value="20"');
+		expect(enabled).toContain('class="resistance-slider w-full min-w-0 disabled:opacity-40"');
+		expect(enabled).toContain('grid h-9 w-9 shrink-0 place-items-center rounded-lg');
+		expect(enabled).toContain('data-ramp-active="true"');
+		expect(enabled).toContain('data-ramp-progress="40"');
+		expect(enabled).toContain('data-resistance-control="true"');
+		expect(enabled).toContain('--ramp-progress:144deg');
+		expect(enabled).toContain('--resistance-position:20%');
+		expect(enabled).not.toContain('Ramping');
+		expect(enabled).not.toContain('>20%<');
+		expect(enabled).not.toContain('>60%<');
+		expect(enabled).toContain('data-keyboard-flash="true"');
+		expect(enabled).toContain('scale-105 border-mint bg-mint/15 text-mint');
+		expect(disabled).toContain('data-ramp-progress="0"');
 		expect(disabled).toContain('disabled');
+		const queued = render(
+			<ResistanceControl
+				disabled={false}
+				max={100}
+				min={0}
+				onChange={() => undefined}
+				ramp={{ current: 20, from: 20, phase: 'queued', progress: 0, to: 60 }}
+				step={1}
+				value={60}
+			/>
+		);
+		const settled = render(
+			<ResistanceControl
+				disabled={false}
+				max={100}
+				min={0}
+				onChange={() => undefined}
+				ramp={{ current: 60, from: 20, phase: 'settled', progress: 1, to: 60 }}
+				step={1}
+				value={60}
+			/>
+		);
+		expect(queued).toContain('data-ramp-progress="0"');
+		expect(settled).toContain('data-ramp-progress="100"');
+		expect(queued).not.toContain('data-ramp-active');
+		expect(settled).not.toContain('data-ramp-active');
+		expect(queued).not.toContain('Queued');
+		expect(settled).not.toContain('Settled');
 	});
 
 	test('renders connection, busy, and connected states', () => {
@@ -167,6 +217,103 @@ describe('view components', () => {
 		).toContain('Disconnect');
 	});
 
+	test('renders the multi-device pairing entry point and panel', () => {
+		expect(
+			render(
+				<DevicePairingButton connectedCount={0} onClick={() => undefined} pairedCount={0} />
+			)
+		).toContain('Pair devices');
+		expect(
+			render(
+				<DevicePairingButton connectedCount={2} onClick={() => undefined} pairedCount={3} />
+			)
+		).toContain('2/3');
+		const connectingButton = render(
+			<DevicePairingButton
+				connectedCount={1}
+				connecting
+				onClick={() => undefined}
+				pairedCount={3}
+			/>
+		);
+		expect(connectingButton).toContain('aria-busy="true"');
+		expect(connectingButton).toContain('animate-pulse bg-sky-400');
+		const connectedButton = render(
+			<DevicePairingButton connectedCount={3} onClick={() => undefined} pairedCount={3} />
+		);
+		expect(connectedButton).toContain('bg-mint');
+		expect(connectedButton).not.toContain('bg-sky-400');
+		const common = {
+			busy: false,
+			connected: false,
+			onDisconnect: () => undefined,
+			onForget: () => undefined,
+			onPair: () => undefined,
+			onReconnect: () => undefined,
+			paired: false,
+			status: 'Not paired',
+		};
+		const panel = render(
+			<DevicePairingPanel
+				click={{
+					...common,
+					connectedCount: 1,
+					controllers: [
+						{
+							active: false,
+							connected: false,
+							connecting: true,
+							id: 'minus-click',
+							label: '− Controller',
+						},
+						{
+							active: true,
+							connected: true,
+							connecting: false,
+							id: 'plus-click',
+							label: '+ Controller',
+						},
+					],
+					onForgetController: () => undefined,
+					pairedCount: 2,
+					pairing: false,
+				}}
+				heartRate={common}
+				onClose={() => undefined}
+				open
+				trainer={{ ...common, connected: true, name: 'KICKR CORE 2', paired: true }}
+			/>
+		);
+		expect(panel).toContain('Paired devices');
+		expect(panel).toContain('Smart trainer');
+		expect(panel).toContain('Heart rate');
+		expect(panel).toContain('Zwift Click V2');
+		expect(panel).toContain('+ Controller');
+		expect(panel.indexOf('+ Controller')).toBeLessThan(panel.indexOf('− Controller'));
+		expect(panel).toContain('animate-pulse');
+		expect(panel).toContain('bg-mint/10');
+		expect(panel).not.toContain('shadow-[inset_0_0_18px');
+		expect(panel).not.toContain('divide-y');
+	});
+
+	test('renders a focused 1–24 gear control', () => {
+		const html = render(
+			<GearControl
+				disabled={false}
+				gear={12}
+				onChange={() => undefined}
+				shiftFlash="increase"
+			/>
+		);
+		expect(html).toContain('data-gear-control="true"');
+		expect(html).toContain('Shift to an easier gear');
+		expect(html).toContain('Shift to a harder gear');
+		expect(html).toContain('EASIER');
+		expect(html).toContain('HARDER');
+		expect(html).toContain('grid h-9 w-9 shrink-0 place-items-center rounded-lg');
+		expect(html).toContain('scale-105 border-mint bg-mint/15 text-mint');
+	});
+
 	test('hides empty notifications and expands setup guidance', () => {
 		expect(
 			render(<Notification connected={false} notice="" onDismiss={() => undefined} />)
@@ -201,7 +348,7 @@ describe('view components', () => {
 		const html = render(<App />);
 		expect(html).toContain('Resistance control');
 		expect(html).not.toContain('Import GPX');
-		expect(html).toContain('Connect trainer');
+		expect(html).toContain('Pair devices');
 		expect(html).toContain('History');
 		expect(html).toContain('Show keyboard controls');
 		expect(html).toContain('Ride Control');
@@ -301,6 +448,29 @@ describe('view components', () => {
 		expect(html).not.toContain('absolute top-[11%] bottom-[8%] left-1');
 	});
 
+	test('graphs gear instead of resistance during virtual shifting', () => {
+		const html = render(
+			<SessionChart
+				controlMode="gear"
+				history={[
+					{
+						cadence: 85,
+						elapsedSeconds: 1,
+						gear: 14,
+						heartRate: 140,
+						power: 180,
+						speed: 30,
+					},
+				]}
+				route={[]}
+				speedUnit="kmh"
+			/>
+		);
+		expect(html).toContain('Gear over time');
+		expect(html).toContain('Gear</button>');
+		expect(html).not.toContain('Resistance</button>');
+	});
+
 	test('renders the session save workflow', () => {
 		expect(
 			render(
@@ -326,6 +496,7 @@ describe('view components', () => {
 				session={{
 					aggregates: emptySession.aggregates,
 					calories: 100,
+					controlMode: 'resistance',
 					distance: 10,
 					elapsedSeconds: 3600,
 					endedAt: Date.now(),
@@ -393,6 +564,36 @@ describe('view components', () => {
 		).toBe('');
 	});
 
+	test('renders an overnight session with date and time ranges', () => {
+		const startedAt = new Date(2026, 6, 18, 23).getTime();
+		const endedAt = new Date(2026, 6, 19, 1).getTime();
+		const html = render(
+			<SessionDetail
+				session={{
+					aggregates: emptySession.aggregates,
+					calories: 0,
+					comments: '',
+					controlMode: 'resistance',
+					distance: 0,
+					elapsedSeconds: 7200,
+					endedAt,
+					history: [],
+					id: 'overnight-session',
+					maximums: emptyMetrics,
+					startedAt,
+				}}
+				speedUnit="kmh"
+			/>
+		);
+		expect(html).toContain(
+			new Intl.DateTimeFormat(undefined, { dateStyle: 'full' }).formatRange(
+				new Date(startedAt),
+				new Date(endedAt)
+			)
+		);
+		expect(html).toContain('11:00pm – 1:00am');
+	});
+
 	test('styles an unrecorded feeling like the comments value', () => {
 		const html = render(
 			<SessionDetail
@@ -405,6 +606,7 @@ describe('view components', () => {
 					aggregates: emptySession.aggregates,
 					calories: 0,
 					comments: '',
+					controlMode: 'resistance',
 					distance: 0,
 					elapsedSeconds: 0,
 					endedAt: Date.now(),
@@ -427,4 +629,30 @@ describe('view components', () => {
 			'<p class="mt-1 whitespace-pre-wrap text-slate-300 text-sm">Not recorded</p>'
 		);
 	});
+
+	test('shows gear instead of resistance in a virtual shifting session summary', () => {
+		const html = render(
+			<SessionDetail
+				session={{
+					aggregates: {
+						...emptySession.aggregates,
+						gear: { count: 2, sum: 27 },
+					},
+					calories: 0,
+					comments: '',
+					controlMode: 'gear',
+					distance: 0,
+					elapsedSeconds: 2,
+					endedAt: Date.now(),
+					history: [],
+					id: 'gear-session',
+					maximums: emptyMetrics,
+					startedAt: Date.now() - 2000,
+				}}
+				speedUnit="kmh"
+			/>
+		);
+		expect(html).toContain('GEAR');
+		expect(html).not.toContain('RESISTANCE');
+	});
 });
diff --git a/tests/devices.test.ts b/tests/devices.test.ts
new file mode 100644
index 0000000..15d68aa
--- /dev/null
+++ b/tests/devices.test.ts
@@ -0,0 +1,227 @@
+import { describe, expect, test } from 'bun:test';
+import { parseHeartRateMeasurement } from '../src/lib/heart-rate';
+import {
+	clickControllerRoleFromManufacturerData,
+	clickV2StartCommand,
+	connectClickGatt,
+	filterAcceptedClickShifts,
+	filterClickShiftsForController,
+	parseClickV2Shift,
+	registerClickControllerRole,
+	shouldAcceptClickShift,
+	storedClickControllerRoles,
+	storedClickDeviceIds,
+	waitForUsableClickNotification,
+	withClickConnectionTimeout,
+} from '../src/lib/zwift-click';
+
+function view(bytes: number[]) {
+	return new DataView(new Uint8Array(bytes).buffer);
+}
+
+function uint32Varint(value: number) {
+	const bytes: number[] = [];
+	let remaining = value >>> 0;
+	while (remaining > 0x7f) {
+		bytes.push((remaining & 0x7f) | 0x80);
+		remaining >>>= 7;
+	}
+	bytes.push(remaining);
+	return bytes;
+}
+
+function clickMessage(buttonMap: number) {
+	return view([0x23, 0x08, ...uint32Varint(buttonMap)]);
+}
+
+describe('paired device protocols', () => {
+	test('parses 8-bit and 16-bit heart rate measurements', () => {
+		expect(parseHeartRateMeasurement(view([0, 142]))).toBe(142);
+		expect(parseHeartRateMeasurement(view([1, 44, 1]))).toBe(300);
+		expect(parseHeartRateMeasurement(view([1, 44]))).toBeUndefined();
+	});
+
+	test('starts a Click V2 session with its RideOn command', () => {
+		expect([...new Uint8Array(clickV2StartCommand())]).toEqual([
+			0x52, 0x69, 0x64, 0x65, 0x4f, 0x6e, 0x02, 0x03,
+		]);
+	});
+
+	test('identifies Click V2 controller sides from their advertisements', () => {
+		expect(clickControllerRoleFromManufacturerData(new Map([[2378, view([0x0a])]]))).toBe('up');
+		expect(clickControllerRoleFromManufacturerData(new Map([[2378, view([0x0b])]]))).toBe(
+			'down'
+		);
+		expect(
+			clickControllerRoleFromManufacturerData(new Map([[2378, view([0x09])]]))
+		).toBeUndefined();
+		expect(clickControllerRoleFromManufacturerData(new Map())).toBeUndefined();
+	});
+
+	test('routes mirrored Click events only through the matching controller side', () => {
+		expect(filterClickShiftsForController(['down', 'up'], 'up')).toEqual(['up']);
+		expect(filterClickShiftsForController(['down', 'up'], 'down')).toEqual(['down']);
+		expect(filterClickShiftsForController(['down', 'up'], undefined)).toEqual(['down', 'up']);
+	});
+
+	test('times out an unresponsive Click connection so it can be retried', async () => {
+		await expect(withClickConnectionTimeout(new Promise(() => undefined), 1)).rejects.toThrow(
+			'Controller did not respond. Wake it and try again.'
+		);
+		expect(await withClickConnectionTimeout(Promise.resolve('connected'), 100)).toBe(
+			'connected'
+		);
+	});
+
+	test('accepts either Click notification channel or observed controller data', async () => {
+		const unavailable = () => [
+			Promise.reject(new Error('async unavailable')),
+			Promise.reject(new Error('sync unavailable')),
+		];
+		await expect(
+			waitForUsableClickNotification(unavailable(), () => false)
+		).rejects.toBeInstanceOf(AggregateError);
+		expect(await waitForUsableClickNotification(unavailable(), () => true)).toBeUndefined();
+		expect(
+			await waitForUsableClickNotification(
+				[Promise.reject(new Error('async unavailable')), Promise.resolve()],
+				() => false
+			)
+		).toBeUndefined();
+	});
+
+	test('connects an awake Click immediately and rediscovers after a failed probe', async () => {
+		const originalWindow = Object.getOwnPropertyDescriptor(globalThis, 'window');
+		Object.defineProperty(globalThis, 'window', {
+			configurable: true,
+			value: { clearTimeout, setTimeout },
+		});
+		const server = {} as BluetoothRemoteGATTServer;
+		const awakeStatuses: string[] = [];
+		let advertisementWatches = 0;
+		const awakeDevice = {
+			addEventListener: () => undefined,
+			gatt: {
+				connect: () => Promise.resolve(server),
+			},
+			removeEventListener: () => undefined,
+			watchAdvertisements: () => {
+				advertisementWatches += 1;
+				return Promise.reject(new Error('advertisement already fresh'));
+			},
+		} as unknown as BluetoothDevice;
+		try {
+			expect(
+				await connectClickGatt(awakeDevice, true, (status) => awakeStatuses.push(status))
+			).toBe(server);
+			expect(advertisementWatches).toBe(0);
+			expect(awakeStatuses).toEqual(['Connecting controllers…']);
+
+			let attempts = 0;
+			const sleepingStatuses: string[] = [];
+			const sleepingDevice = {
+				addEventListener: () => undefined,
+				gatt: {
+					connect: () => {
+						attempts += 1;
+						return attempts === 1
+							? Promise.reject(new Error('temporarily unavailable'))
+							: Promise.resolve(server);
+					},
+					disconnect: () => undefined,
+				},
+				removeEventListener: () => undefined,
+				watchAdvertisements: () => {
+					advertisementWatches += 1;
+					return Promise.reject(new Error('advertisement already fresh'));
+				},
+			} as unknown as BluetoothDevice;
+			expect(
+				await connectClickGatt(sleepingDevice, true, (status) =>
+					sleepingStatuses.push(status)
+				)
+			).toBe(server);
+			expect(attempts).toBe(2);
+			expect(advertisementWatches).toBe(1);
+			expect(sleepingStatuses).toEqual([
+				'Connecting controllers…',
+				'Finding controllers…',
+				'Connecting controllers…',
+			]);
+		} finally {
+			if (originalWindow) {
+				Object.defineProperty(globalThis, 'window', originalWindow);
+			} else {
+				Reflect.deleteProperty(globalThis, 'window');
+			}
+		}
+	});
+
+	test('emits only new Click V2 minus and plus press edges', () => {
+		const minus = parseClickV2Shift(clickMessage(0xff_ff_fe_ff));
+		expect(minus?.shifts).toEqual(['down']);
+		expect(minus?.heldShifts).toEqual(['down']);
+		const heldMinus = parseClickV2Shift(clickMessage(0xff_ff_fe_ff), minus?.buttonMap);
+		expect(heldMinus?.shifts).toEqual([]);
+		expect(heldMinus?.heldShifts).toEqual(['down']);
+		expect(
+			parseClickV2Shift(clickMessage(0xff_ff_ff_ff), heldMinus?.buttonMap)?.heldShifts
+		).toEqual([]);
+		expect(parseClickV2Shift(clickMessage(0xff_ff_ef_ff))?.shifts).toEqual(['up']);
+		expect(parseClickV2Shift(view([0x15]))).toBeUndefined();
+	});
+
+	test('accepts fixed32 Click button maps for compatibility', () => {
+		expect(parseClickV2Shift(view([0x23, 0x0d, 0xff, 0xef, 0xff, 0xff]))?.shifts).toEqual([
+			'up',
+		]);
+	});
+
+	test('deduplicates rapid Click press edges without slowing normal taps', () => {
+		expect(shouldAcceptClickShift(undefined, 1000)).toBeTrue();
+		expect(shouldAcceptClickShift(1000, 1179)).toBeFalse();
+		expect(shouldAcceptClickShift(1000, 1180)).toBeTrue();
+	});
+
+	test('deduplicates the same shift mirrored by both Click controllers', () => {
+		const lastShiftTimes = new Map();
+		expect(filterAcceptedClickShifts(['down'], 1000, lastShiftTimes)).toEqual(['down']);
+		expect(filterAcceptedClickShifts(['down'], 1001, lastShiftTimes)).toEqual([]);
+		expect(filterAcceptedClickShifts(['up'], 1001, lastShiftTimes)).toEqual(['up']);
+	});
+
+	test('registers and corrects Click controller roles from button presses', () => {
+		const withPlus = registerClickControllerRole({}, 'plus-device', ['up']);
+		expect(withPlus).toEqual({ 'plus-device': 'up' });
+		expect(registerClickControllerRole(withPlus, 'plus-device', ['up'])).toBe(withPlus);
+		const identified = registerClickControllerRole(withPlus, 'minus-device', ['down']);
+		expect(identified).toEqual({
+			'minus-device': 'down',
+			'plus-device': 'up',
+		});
+		expect(registerClickControllerRole(identified, 'plus-device', ['down'])).toEqual({
+			'minus-device': 'up',
+			'plus-device': 'down',
+		});
+		expect(registerClickControllerRole(withPlus, 'other-device', ['up'])).toEqual({
+			'other-device': 'up',
+		});
+	});
+
+	test('restores at most two remembered Click controller ids', () => {
+		expect(storedClickDeviceIds({ getItem: () => '["left","right","extra"]' })).toEqual([
+			'left',
+			'right',
+		]);
+		expect(storedClickDeviceIds({ getItem: () => 'broken' })).toEqual([]);
+	});
+
+	test('restores valid unique Click controller roles', () => {
+		expect(
+			storedClickControllerRoles({
+				getItem: () => '{"plus":"up","minus":"down","duplicate":"up","bad":"left"}',
+			})
+		).toEqual({ minus: 'down', plus: 'up' });
+		expect(storedClickControllerRoles({ getItem: () => 'broken' })).toEqual({});
+	});
+});
diff --git a/tests/format-chart.test.ts b/tests/format-chart.test.ts
index e419b5e..50b30b5 100644
--- a/tests/format-chart.test.ts
+++ b/tests/format-chart.test.ts
@@ -28,6 +28,12 @@ describe('chart utilities', () => {
 		expect(chartPath([], 0, 1)).toBe('');
 	});
 
+	test('leaves gaps when a control metric is not recorded', () => {
+		expect(chartPath([10, undefined, 12], 1, 24, [1, 2, 3])).toBe(
+			'M 0 60.26086956521739 M 100 53.65217391304348'
+		);
+	});
+
 	test('rounds maxima up by chart step', () => {
 		expect(roundedChartMaximum(121, 100, 50)).toBe(150);
 		expect(roundedChartMaximum(20, 100, 50)).toBe(100);
@@ -36,6 +42,7 @@ describe('chart utilities', () => {
 	test('restores only supported chart modes', () => {
 		expect(storedChartMode({ getItem: () => 'power' })).toBe('power');
 		expect(storedChartMode({ getItem: () => 'resistance' })).toBe('resistance');
+		expect(storedChartMode({ getItem: () => 'gear' })).toBe('gear');
 		expect(storedChartMode({ getItem: () => 'elevation' })).toBe('all');
 	});
 });
diff --git a/tests/gears.test.ts b/tests/gears.test.ts
new file mode 100644
index 0000000..857e899
--- /dev/null
+++ b/tests/gears.test.ts
@@ -0,0 +1,39 @@
+import { describe, expect, test } from 'bun:test';
+import {
+	clampGear,
+	DEFAULT_GEAR,
+	gearForResistance,
+	MAX_GEAR,
+	MIN_GEAR,
+	resistanceChangeForGears,
+	shiftedGear,
+	storedGear,
+} from '../src/lib/gears';
+
+describe('virtual gears', () => {
+	test('clamps gear positions to the supported 1–24 range', () => {
+		expect(clampGear(-4)).toBe(MIN_GEAR);
+		expect(clampGear(8.6)).toBe(9);
+		expect(clampGear(40)).toBe(MAX_GEAR);
+		expect(shiftedGear(1, -1)).toBe(1);
+		expect(shiftedGear(23, 1)).toBe(24);
+	});
+
+	test('restores a valid gear and falls back to the middle gear', () => {
+		expect(storedGear({ getItem: () => '18' })).toBe(18);
+		expect(storedGear({ getItem: () => 'invalid' })).toBe(DEFAULT_GEAR);
+		expect(storedGear({ getItem: () => '0' })).toBe(DEFAULT_GEAR);
+	});
+
+	test('starts near the trainer resistance when no virtual gear is remembered', () => {
+		expect(gearForResistance(0)).toBe(1);
+		expect(gearForResistance(10)).toBe(4);
+		expect(gearForResistance(100)).toBe(24);
+		expect(storedGear({ getItem: () => null }, gearForResistance(10))).toBe(4);
+	});
+
+	test('maps each shift to a quick three-point resistance change', () => {
+		expect(resistanceChangeForGears(12, 13)).toBe(3);
+		expect(resistanceChangeForGears(12, 10)).toBe(-6);
+	});
+});
diff --git a/tests/keyboard.test.ts b/tests/keyboard.test.ts
index 4dae216..78c0083 100644
--- a/tests/keyboard.test.ts
+++ b/tests/keyboard.test.ts
@@ -2,6 +2,7 @@ import { describe, expect, test } from 'bun:test';
 import {
 	appShortcutForKey,
 	dashboardKeyboardShortcuts,
+	gearingKeyboardShortcuts,
 	historyKeyboardShortcuts,
 	historyShortcutForKey,
 } from '../src/lib/keyboard';
@@ -42,6 +43,10 @@ describe('keyboard shortcuts', () => {
 		]);
 	});
 
+	test('describes gear keys when Click is paired', () => {
+		expect(gearingKeyboardShortcuts[4]?.label).toBe('Shift to a harder or easier gear');
+	});
+
 	test('maps history navigation keys', () => {
 		expect(historyShortcutForKey('ArrowUp')).toBe('previousSession');
 		expect(historyShortcutForKey('ArrowDown')).toBe('nextSession');
diff --git a/tests/resistance.test.ts b/tests/resistance.test.ts
new file mode 100644
index 0000000..7790009
--- /dev/null
+++ b/tests/resistance.test.ts
@@ -0,0 +1,36 @@
+import { describe, expect, test } from 'bun:test';
+import {
+	resistanceAdjustmentDirection,
+	resistanceDirectionForKey,
+	resistanceRampDuration,
+	smoothedResistance,
+} from '../src/lib/resistance';
+
+describe('resistance smoothing', () => {
+	test('maps resistance movement to adjustment directions', () => {
+		expect(resistanceAdjustmentDirection(20, 21)).toBe('increase');
+		expect(resistanceAdjustmentDirection(20, 19)).toBe('decrease');
+		expect(resistanceAdjustmentDirection(20, 20)).toBeUndefined();
+	});
+
+	test('maps arrow keys to resistance adjustment directions', () => {
+		expect(resistanceDirectionForKey('ArrowUp')).toBe('increase');
+		expect(resistanceDirectionForKey('ArrowDown')).toBe('decrease');
+		expect(resistanceDirectionForKey('Enter')).toBeUndefined();
+	});
+
+	test('scales and clamps the ramp duration', () => {
+		expect(resistanceRampDuration(20, 21)).toBe(600);
+		expect(resistanceRampDuration(20, 60)).toBe(1800);
+		expect(resistanceRampDuration(0, 100)).toBe(3000);
+	});
+
+	test('smooths both increasing and decreasing resistance', () => {
+		expect(smoothedResistance(20, 60, 0)).toBe(20);
+		expect(smoothedResistance(20, 60, 0.5)).toBe(40);
+		expect(smoothedResistance(20, 60, 1)).toBe(60);
+		expect(smoothedResistance(60, 20, 0.5)).toBe(40);
+		expect(smoothedResistance(20, 60, -1)).toBe(20);
+		expect(smoothedResistance(20, 60, 2)).toBe(60);
+	});
+});
diff --git a/tests/saved-sessions.test.ts b/tests/saved-sessions.test.ts
index a0e59cf..4377f62 100644
--- a/tests/saved-sessions.test.ts
+++ b/tests/saved-sessions.test.ts
@@ -5,6 +5,8 @@ import {
 	createSavedSession,
 	deleteSessionRecords,
 	feelingLabel,
+	formatSessionDateRange,
+	formatSessionListTime,
 	formatSessionTime,
 	formatSessionTimeRange,
 	groupSessionsByDate,
@@ -19,6 +21,7 @@ import type { SavedSession, SavedSessionSummary, SessionSnapshot } from '../src/
 const snapshot: SessionSnapshot = {
 	aggregates: emptySession.aggregates,
 	calories: 120,
+	controlMode: 'resistance',
 	distance: 10,
 	elapsedSeconds: 1800,
 	endedAt: new Date(2026, 6, 18, 9).getTime(),
@@ -130,6 +133,30 @@ describe('saved session utilities', () => {
 		);
 	});
 
+	test('restores gear aggregates for virtual shifting sessions', () => {
+		const gearSession = {
+			...createSavedSession(snapshot, { comments: '' }, 1234, 'gears'),
+			aggregates: {
+				...snapshot.aggregates,
+				gear: undefined,
+			},
+			controlMode: 'gear',
+			history: [
+				{
+					cadence: 85,
+					elapsedSeconds: 1,
+					gear: 14,
+					heartRate: 140,
+					power: 180,
+					speed: 30,
+				},
+			],
+		} as unknown as SavedSession;
+		const normalized = normalizeSavedSession(gearSession);
+		expect(normalized.controlMode).toBe('gear');
+		expect(normalized.aggregates.gear).toEqual({ count: 1, sum: 14 });
+	});
+
 	test('groups ordered summaries by their local calendar date', () => {
 		const summaries = [
 			{ id: 'one', startedAt: new Date(2026, 6, 18, 9).getTime() },
@@ -151,6 +178,41 @@ describe('saved session utilities', () => {
 		expect(groups[1]?.sessions[0]?.id).toBe('three');
 	});
 
+	test('groups overnight sessions by their complete local date range', () => {
+		const overnightStart = new Date(2026, 6, 18, 23).getTime();
+		const overnightEnd = new Date(2026, 6, 19, 1).getTime();
+		const daytimeStart = new Date(2026, 6, 18, 9).getTime();
+		const summaries = [
+			{
+				calories: 0,
+				distance: 0,
+				elapsedSeconds: 7200,
+				endedAt: overnightEnd,
+				id: 'overnight',
+				startedAt: overnightStart,
+			},
+			{
+				calories: 0,
+				distance: 0,
+				elapsedSeconds: 3600,
+				endedAt: daytimeStart + 3_600_000,
+				id: 'daytime',
+				startedAt: daytimeStart,
+			},
+		] satisfies SavedSessionSummary[];
+		const groups = groupSessionsByDate(summaries);
+		expect(groups).toHaveLength(2);
+		expect(groups[0]).toMatchObject({
+			date: new Intl.DateTimeFormat(undefined, { dateStyle: 'full' }).formatRange(
+				new Date(overnightStart),
+				new Date(overnightEnd)
+			),
+			key: '2026-7-18/2026-7-19',
+		});
+		expect(groups[0]?.sessions[0]?.id).toBe('overnight');
+		expect(groups[1]?.sessions[0]?.id).toBe('daytime');
+	});
+
 	test('selects the nearest remaining session after deletion', () => {
 		const sessions = ['one', 'two', 'three'].map(
 			(id, index) =>
@@ -204,6 +266,23 @@ describe('saved session utilities', () => {
 		expect(formatSessionTimeRange({ ...snapshot, endedAt: snapshot.startedAt })).toBe('8:30am');
 	});
 
+	test('shows date and time ranges for overnight sessions', () => {
+		const overnight = {
+			elapsedSeconds: 7200,
+			endedAt: new Date(2026, 6, 19, 1).getTime(),
+			startedAt: new Date(2026, 6, 18, 23).getTime(),
+		};
+		const dateFormatter = new Intl.DateTimeFormat(undefined, { dateStyle: 'full' });
+		expect(formatSessionDateRange(overnight)).toBe(
+			dateFormatter.formatRange(new Date(overnight.startedAt), new Date(overnight.endedAt))
+		);
+		expect(formatSessionListTime(overnight)).toBe('11:00pm – 1:00am');
+		expect(formatSessionListTime(snapshot)).toBe('8:30am');
+		expect(formatSessionDateRange({ ...overnight, elapsedSeconds: 0 })).toBe(
+			dateFormatter.format(overnight.startedAt)
+		);
+	});
+
 	test('requests persistent storage only when needed and supported', async () => {
 		const original = Object.getOwnPropertyDescriptor(navigator, 'storage');
 		try {
diff --git a/tests/session.test.ts b/tests/session.test.ts
index a00ac5b..eab82cd 100644
--- a/tests/session.test.ts
+++ b/tests/session.test.ts
@@ -29,6 +29,7 @@ describe('session utilities', () => {
 		const snapshot = {
 			aggregates: emptySession.aggregates,
 			calories: 120,
+			controlMode: 'resistance' as const,
 			distance: 14,
 			elapsedSeconds: 1800,
 			endedAt: 5000,
@@ -84,12 +85,27 @@ describe('session utilities', () => {
 			})
 		).toEqual({
 			cadence: { count: 0, sum: 0 },
+			gear: { count: 0, sum: 0 },
 			heartRate: { count: 1, sum: 145 },
 			power: { count: 1, sum: 0 },
 			resistance: { count: 1, sum: 42 },
 		});
 	});
 
+	test('tracks gear without adding a resistance aggregate', () => {
+		expect(
+			addMetricAggregates(emptySession.aggregates, {
+				cadence: 80,
+				gear: 14,
+				heartRate: 140,
+				power: 200,
+			})
+		).toMatchObject({
+			gear: { count: 1, sum: 14 },
+			resistance: { count: 0, sum: 0 },
+		});
+	});
+
 	test('aggregates recorded resistance samples and ignores missing legacy data', () => {
 		expect(
 			aggregateResistance([
@@ -144,6 +160,8 @@ describe('session utilities', () => {
 		expect(session.endedAt).toBe(5000);
 		expect(session.history[0]?.speed).toBe(0);
 		expect(session.history[0]?.resistance).toBe(42);
+		expect(session.history[0]?.gear).toBeUndefined();
+		expect(session.controlMode).toBe('resistance');
 		expect(session.aggregates.power).toEqual({ count: 1, sum: 200 });
 		expect(session.aggregates.resistance).toEqual({ count: 1, sum: 42 });
 		expect(session.maximums.speed).toBe(35);
diff --git a/tests/tcx.test.ts b/tests/tcx.test.ts
index 807313f..eddc801 100644
--- a/tests/tcx.test.ts
+++ b/tests/tcx.test.ts
@@ -7,12 +7,14 @@ const startedAt = Date.UTC(2026, 6, 18, 16);
 const session: SavedSession = {
 	aggregates: {
 		cadence: { count: 2, sum: 162 },
+		gear: { count: 0, sum: 0 },
 		heartRate: { count: 2, sum: 282 },
 		power: { count: 2, sum: 410 },
 		resistance: { count: 2, sum: 85 },
 	},
 	calories: 220,
 	comments: 'Hard & fun <again>',
+	controlMode: 'resistance',
 	distance: 1.5,
 	elapsedSeconds: 2,
 	endedAt: startedAt + 2000,
@@ -67,4 +69,24 @@ describe('TCX export', () => {
 	test('creates a filesystem-safe TCX filename', () => {
 		expect(sessionTcxFilename(session)).toBe('ride-control-2026-07-18T16-00-00.000Z.tcx');
 	});
+
+	test('exports gear instead of resistance for a virtual shifting session', () => {
+		const gearSession: SavedSession = {
+			...session,
+			aggregates: {
+				...session.aggregates,
+				gear: { count: 2, sum: 27 },
+				resistance: { count: 0, sum: 0 },
+			},
+			controlMode: 'gear',
+			history: session.history.map(({ resistance: _resistance, ...sample }, index) => ({
+				...sample,
+				gear: 13 + index,
+			})),
+		};
+		const tcx = sessionToTcx(gearSession);
+		expect(tcx).toContain('<rc:Gear>14</rc:Gear>');
+		expect(tcx).toContain('<rc:AverageGear>13.5</rc:AverageGear>');
+		expect(tcx).not.toContain('<rc:Resistance>');
+	});
 });