feat: add hold timer for timed exercises with full sync support

- Play/Stop button replaces checkmark for duration-only exercises
- Green countdown bar with auto-completion and rest timer chaining
- Display duration in seconds (SEC) instead of minutes for holds
- ActiveWorkout model now preserves distance/duration fields on sync
- Hold timer state syncs across devices via SSE
- Workout summary shows per-set hold times for duration exercises
- Template diff compares and displays duration changes correctly

src/lib/components/fitness/SetTable.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { Check, X } from '@lucide/svelte';
+	import { Check, X, Play, Square } from '@lucide/svelte';
 	import { METRIC_LABELS } from '$lib/data/exercises';
 	import RestTimer from './RestTimer.svelte';
 	import { page } from '$app/stores';
@@ -16,8 +16,13 @@
 	 *   restAfterSet?: number,
 	 *   restSeconds?: number,
 	 *   restTotal?: number,
+	 *   holdAfterSet?: number,
+	 *   holdSeconds?: number,
+	 *   holdTotal?: number,
 	 *   onRestAdjust?: ((delta: number) => void) | null,
 	 *   onRestSkip?: (() => void) | null,
+	 *   timedHold?: boolean,
+	 *   onHoldSkip?: (() => void) | null,
 	 *   onUpdate?: ((setIndex: number, data: Record<string, number | null>) => void) | null,
 	 *   onToggleComplete?: ((setIndex: number) => void) | null,
 	 *   onRemove?: ((setIndex: number) => void) | null
@@ -31,8 +36,13 @@
 		restAfterSet = -1,
 		restSeconds = 0,
 		restTotal = 0,
+		timedHold = false,
+		holdAfterSet = -1,
+		holdSeconds = 0,
+		holdTotal = 0,
 		onRestAdjust = null,
 		onRestSkip = null,
+		onHoldSkip = null,
 		onUpdate = null,
 		onToggleComplete = null,
 		onRemove = null
@@ -52,7 +62,9 @@
 	 */
 	function handleInput(index, field, e) {
 		const target = /** @type {HTMLInputElement} */ (e.target);
-		const val = target.value === '' ? null : Number(target.value);
+		const raw = target.value === '' ? null : Number(target.value);
+		// For timedHold exercises, duration input is in seconds — convert to minutes for storage
+		const val = (timedHold && field === 'duration' && raw != null) ? raw / 60 : raw;
 		onUpdate?.(index, { [field]: val });
 	}
 
@@ -60,7 +72,10 @@
 	function formatPrev(/** @type {Record<string, any>} */ prev) {
 		const parts = [];
 		for (const m of mainMetrics) {
-			if (prev[m] != null) parts.push(`${prev[m]}`);
+			if (prev[m] != null) {
+				const v = (timedHold && m === 'duration') ? Math.round(prev[m] * 60) : prev[m];
+				parts.push(`${v}`);
+			}
 		}
 		let result = parts.join(' × ');
 		if (prev.rpe != null) result += `@${prev.rpe}`;
@@ -84,7 +99,7 @@
 				<th class="col-prev">{t('prev_header', lang)}</th>
 			{/if}
 			{#each mainMetrics as metric (metric)}
-				<th class="col-metric">{METRIC_LABELS[metric]}</th>
+				<th class="col-metric">{timedHold && metric === 'duration' ? 'SEC' : METRIC_LABELS[metric]}</th>
 			{/each}
 			{#if editable && hasRpe}
 				<th class="col-at"></th>
@@ -118,17 +133,20 @@
 					</td>
 				{/if}
 				{#each mainMetrics as metric (metric)}
+					{@const displayVal = (timedHold && metric === 'duration' && set[metric] != null)
+						? Math.round(set[metric] * 60)
+						: set[metric]}
 					<td class="col-metric" class:col-weight={metric === 'weight'}>
 						{#if editable}
 							<input
 								type="number"
-								inputmode={inputMode(metric)}
-								value={set[metric] ?? ''}
+								inputmode={timedHold && metric === 'duration' ? 'numeric' : inputMode(metric)}
+								value={displayVal ?? ''}
 								placeholder="0"
 								oninput={(e) => handleInput(i, metric, e)}
 							/>
 						{:else}
-							{set[metric] ?? '—'}
+							{displayVal ?? '—'}
 						{/if}
 					</td>
 				{/each}
@@ -148,17 +166,51 @@
 				{/if}
 				{#if editable}
 					<td class="col-check">
-						<button
-							class="check-btn"
-							class:checked={set.completed}
-							onclick={() => onToggleComplete?.(i)}
-							aria-label="Mark set complete"
-						>
-							<Check size={16} />
-						</button>
+						{#if timedHold && !set.completed}
+							{#if holdAfterSet === i}
+								<button
+									class="check-btn hold-stop"
+									onclick={() => onToggleComplete?.(i)}
+									aria-label="Stop timer"
+								>
+									<Square size={14} />
+								</button>
+							{:else}
+								<button
+									class="check-btn hold-play"
+									onclick={() => onToggleComplete?.(i)}
+									aria-label="Start hold timer"
+								>
+									<Play size={16} />
+								</button>
+							{/if}
+						{:else}
+							<button
+								class="check-btn"
+								class:checked={set.completed}
+								onclick={() => onToggleComplete?.(i)}
+								aria-label="Mark set complete"
+							>
+								<Check size={16} />
+							</button>
+						{/if}
 					</td>
 				{/if}
 			</tr>
+			{#if holdAfterSet === i && holdTotal > 0}
+				<tr class="rest-row">
+					<td colspan={totalCols} class="rest-cell">
+						<div class="hold-bar">
+							<div class="hold-fill" style:width="{holdTotal > 0 ? (holdSeconds / holdTotal) * 100 : 0}%"></div>
+							<div class="hold-controls">
+								<button class="hold-skip-btn" onclick={() => onHoldSkip?.()}>
+									{Math.floor(holdSeconds / 60)}:{(holdSeconds % 60).toString().padStart(2, '0')}
+								</button>
+							</div>
+						</div>
+					</td>
+				</tr>
+			{/if}
 			{#if restAfterSet === i && restTotal > 0}
 				<tr class="rest-row">
 					<td colspan={totalCols} class="rest-cell">
@@ -303,12 +355,58 @@
 		border-color: var(--nord14);
 		color: white;
 	}
+	.check-btn.hold-play {
+		border-color: var(--nord14);
+		color: var(--nord14);
+	}
+	.check-btn.hold-play:hover {
+		background: color-mix(in srgb, var(--nord14) 15%, transparent);
+	}
+	.check-btn.hold-stop {
+		border-color: var(--nord11);
+		color: var(--nord11);
+	}
+	.check-btn.hold-stop:hover {
+		background: color-mix(in srgb, var(--nord11) 15%, transparent);
+	}
 	.rest-row td {
 		border-top: none;
 	}
 	.rest-cell {
 		padding: 0.3rem 0.25rem;
 	}
+	.hold-bar {
+		border-radius: 8px;
+		overflow: hidden;
+		position: relative;
+		height: 2.2rem;
+		background: color-mix(in srgb, var(--nord14) 20%, var(--nord0));
+	}
+	.hold-fill {
+		position: absolute;
+		inset: 0;
+		background: var(--nord14);
+		border-radius: 8px;
+		transition: width 1s linear;
+	}
+	.hold-controls {
+		position: absolute;
+		inset: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		z-index: 1;
+	}
+	.hold-skip-btn {
+		background: none;
+		border: none;
+		font-size: 0.9rem;
+		font-weight: 700;
+		font-variant-numeric: tabular-nums;
+		color: var(--nord0);
+		cursor: pointer;
+		padding: 0.2rem 0.5rem;
+	}
 	.prev-na {
 		opacity: 0.4;
 		font-size: 0.7rem;

src/lib/js/workout.svelte.ts

@@ -51,6 +51,10 @@ export interface StoredState {
 	restTotal: number; // total rest duration in seconds
 	restExerciseIdx: number; // which exercise the rest timer belongs to
 	restSetIdx: number; // which set the rest timer belongs to
+	holdStartedAt?: number | null; // Date.now() when hold timer started
+	holdTotal?: number; // total hold duration in seconds
+	holdExerciseIdx?: number;
+	holdSetIdx?: number;
 }
 
 export interface RemoteState {
@@ -67,6 +71,10 @@ export interface RemoteState {
 	restTotal: number;
 	restExerciseIdx: number;
 	restSetIdx: number;
+	holdStartedAt?: number | null;
+	holdTotal?: number;
+	holdExerciseIdx?: number;
+	holdSetIdx?: number;
 }
 
 function createEmptySet(): WorkoutSet {
@@ -114,6 +122,15 @@ export function createWorkout() {
 	let _restExerciseIdx = $state(-1);
 	let _restSetIdx = $state(-1);
 
+	// Hold timer (countdown for timed/duration sets)
+	let _holdSeconds = $state(0);
+	let _holdTotal = $state(0);
+	let _holdActive = $state(false);
+	let _holdStartedAt: number | null = null;
+	let _holdExerciseIdx = $state(-1);
+	let _holdSetIdx = $state(-1);
+	let _holdInterval: ReturnType<typeof setInterval> | null = null;
+
 	let _timerInterval: ReturnType<typeof setInterval> | null = null;
 	let _restInterval: ReturnType<typeof setInterval> | null = null;
 	let _onChangeCallback: (() => void) | null = null;
@@ -138,7 +155,11 @@ export function createWorkout() {
 			restStartedAt: _restActive ? _restStartedAt : null,
 			restTotal: _restTotal,
 			restExerciseIdx: _restActive ? _restExerciseIdx : -1,
-			restSetIdx: _restActive ? _restSetIdx : -1
+			restSetIdx: _restActive ? _restSetIdx : -1,
+			holdStartedAt: _holdActive ? _holdStartedAt : null,
+			holdTotal: _holdTotal,
+			holdExerciseIdx: _holdActive ? _holdExerciseIdx : -1,
+			holdSetIdx: _holdActive ? _holdSetIdx : -1
 		});
 		_onChangeCallback?.();
 	}
@@ -211,6 +232,62 @@ export function createWorkout() {
 		_restSetIdx = -1;
 	}
 
+	// --- Hold timer (timed exercise countdown) ---
+
+	function _computeHoldSeconds() {
+		if (!_holdActive || !_holdStartedAt) return;
+		const elapsed = Math.floor((Date.now() - _holdStartedAt) / 1000);
+		_holdSeconds = Math.max(0, _holdTotal - elapsed);
+		if (_holdSeconds <= 0) {
+			_onHoldComplete();
+		}
+	}
+
+	function _onHoldComplete() {
+		const exIdx = _holdExerciseIdx;
+		const setIdx = _holdSetIdx;
+		_stopHoldTimer();
+		_playRestDoneSound();
+		// Auto-complete the set
+		const ex = exercises[exIdx];
+		if (ex?.sets[setIdx] && !ex.sets[setIdx].completed) {
+			ex.sets[setIdx].completed = true;
+			// Start rest timer
+			startRestTimer(ex.restTime, exIdx, setIdx);
+		}
+		_persist();
+	}
+
+	function startHoldTimer(seconds: number, exerciseIdx: number, setIdx: number) {
+		_stopHoldTimer();
+		_holdStartedAt = Date.now();
+		_holdSeconds = seconds;
+		_holdTotal = seconds;
+		_holdActive = true;
+		_holdExerciseIdx = exerciseIdx;
+		_holdSetIdx = setIdx;
+		_holdInterval = setInterval(() => _computeHoldSeconds(), 1000);
+		_persist();
+	}
+
+	function cancelHoldTimer() {
+		_stopHoldTimer();
+		_persist();
+	}
+
+	function _stopHoldTimer() {
+		if (_holdInterval) {
+			clearInterval(_holdInterval);
+			_holdInterval = null;
+		}
+		_holdActive = false;
+		_holdSeconds = 0;
+		_holdTotal = 0;
+		_holdStartedAt = null;
+		_holdExerciseIdx = -1;
+		_holdSetIdx = -1;
+	}
+
 	// Restore from localStorage on creation
 	function restore() {
 		const stored = loadFromStorage();
@@ -254,6 +331,26 @@ export function createWorkout() {
 				_startRestInterval();
 			}
 		}
+
+		// Restore hold timer if it was active
+		if (stored.holdStartedAt && stored.holdTotal && stored.holdTotal > 0) {
+			const elapsed = Math.floor((Date.now() - stored.holdStartedAt) / 1000);
+			const remaining = stored.holdTotal - elapsed;
+			if (remaining > 0) {
+				_holdStartedAt = stored.holdStartedAt;
+				_holdTotal = stored.holdTotal;
+				_holdSeconds = remaining;
+				_holdActive = true;
+				_holdExerciseIdx = stored.holdExerciseIdx ?? -1;
+				_holdSetIdx = stored.holdSetIdx ?? -1;
+				_holdInterval = setInterval(() => _computeHoldSeconds(), 1000);
+			} else {
+				// Timer expired while away — complete it
+				_holdExerciseIdx = stored.holdExerciseIdx ?? -1;
+				_holdSetIdx = stored.holdSetIdx ?? -1;
+				_onHoldComplete();
+			}
+		}
 	}
 
 	function startFromTemplate(template: TemplateData) {
@@ -445,6 +542,7 @@ export function createWorkout() {
 	function finish() {
 		_stopTimer();
 		_stopRestTimer();
+		_stopHoldTimer();
 
 		const endTime = new Date();
 		_computeElapsed();
@@ -505,6 +603,7 @@ export function createWorkout() {
 	function cancel() {
 		_stopTimer();
 		_stopRestTimer();
+		_stopHoldTimer();
 		_reset();
 	}
 
@@ -553,6 +652,29 @@ export function createWorkout() {
 			}
 		}
 
+		// Apply hold timer state from remote
+		const holdChanged = remote.holdStartedAt !== _holdStartedAt || remote.holdTotal !== _holdTotal;
+		if (holdChanged) {
+			_stopHoldTimer();
+			if (remote.holdStartedAt && remote.holdTotal && remote.holdTotal > 0) {
+				const elapsed = Math.floor((Date.now() - remote.holdStartedAt) / 1000);
+				const remaining = remote.holdTotal - elapsed;
+				if (remaining > 0) {
+					_holdStartedAt = remote.holdStartedAt;
+					_holdTotal = remote.holdTotal;
+					_holdSeconds = remaining;
+					_holdActive = true;
+					_holdExerciseIdx = remote.holdExerciseIdx ?? -1;
+					_holdSetIdx = remote.holdSetIdx ?? -1;
+					_holdInterval = setInterval(() => _computeHoldSeconds(), 1000);
+				} else {
+					_holdExerciseIdx = remote.holdExerciseIdx ?? -1;
+					_holdSetIdx = remote.holdSetIdx ?? -1;
+					_onHoldComplete();
+				}
+			}
+		}
+
 		// Persist locally but don't trigger onChange (to avoid re-push loop)
 		saveToStorage({
 			active: true,
@@ -568,7 +690,11 @@ export function createWorkout() {
 			restStartedAt: _restActive ? _restStartedAt : null,
 			restTotal: _restTotal,
 			restExerciseIdx: _restActive ? _restExerciseIdx : -1,
-			restSetIdx: _restActive ? _restSetIdx : -1
+			restSetIdx: _restActive ? _restSetIdx : -1,
+			holdStartedAt: _holdActive ? _holdStartedAt : null,
+			holdTotal: _holdTotal,
+			holdExerciseIdx: _holdActive ? _holdExerciseIdx : -1,
+			holdSetIdx: _holdActive ? _holdSetIdx : -1
 		});
 	}
 
@@ -601,6 +727,12 @@ export function createWorkout() {
 		get restStartedAt() { return _restStartedAt; },
 		get restExerciseIdx() { return _restExerciseIdx; },
 		get restSetIdx() { return _restSetIdx; },
+		get holdTimerSeconds() { return _holdSeconds; },
+		get holdTimerTotal() { return _holdTotal; },
+		get holdTimerActive() { return _holdActive; },
+		get holdStartedAt() { return _holdStartedAt; },
+		get holdExerciseIdx() { return _holdExerciseIdx; },
+		get holdSetIdx() { return _holdSetIdx; },
 		restore,
 		startFromTemplate,
 		startEmpty,
@@ -618,6 +750,8 @@ export function createWorkout() {
 		startRestTimer,
 		cancelRestTimer,
 		adjustRestTimer,
+		startHoldTimer,
+		cancelHoldTimer,
 		finish,
 		cancel,
 		applyRemoteState,

src/lib/js/workoutSync.svelte.ts

@@ -26,6 +26,10 @@ interface ServerWorkout {
   restTotal: number;
   restExerciseIdx: number;
   restSetIdx: number;
+  holdStartedAt: number | null;
+  holdTotal: number;
+  holdExerciseIdx: number;
+  holdSetIdx: number;
 }
 
 export function createWorkoutSync() {
@@ -56,7 +60,11 @@ export function createWorkoutSync() {
       restStartedAt: workout.restStartedAt,
       restTotal: workout.restTimerTotal,
       restExerciseIdx: workout.restExerciseIdx,
-      restSetIdx: workout.restSetIdx
+      restSetIdx: workout.restSetIdx,
+      holdStartedAt: workout.holdStartedAt,
+      holdTotal: workout.holdTimerTotal,
+      holdExerciseIdx: workout.holdExerciseIdx,
+      holdSetIdx: workout.holdSetIdx
     };
   }
 
@@ -124,7 +132,11 @@ export function createWorkoutSync() {
         restStartedAt: doc.restStartedAt ?? null,
         restTotal: doc.restTotal ?? 0,
         restExerciseIdx: doc.restExerciseIdx ?? -1,
-        restSetIdx: doc.restSetIdx ?? -1
+        restSetIdx: doc.restSetIdx ?? -1,
+        holdStartedAt: doc.holdStartedAt ?? null,
+        holdTotal: doc.holdTotal ?? 0,
+        holdExerciseIdx: doc.holdExerciseIdx ?? -1,
+        holdSetIdx: doc.holdSetIdx ?? -1
       });
 
       status = 'synced';
@@ -245,7 +257,11 @@ export function createWorkoutSync() {
             restStartedAt: serverDoc.restStartedAt ?? null,
             restTotal: serverDoc.restTotal ?? 0,
             restExerciseIdx: serverDoc.restExerciseIdx ?? -1,
-            restSetIdx: serverDoc.restSetIdx ?? -1
+            restSetIdx: serverDoc.restSetIdx ?? -1,
+            holdStartedAt: serverDoc.holdStartedAt ?? null,
+            holdTotal: serverDoc.holdTotal ?? 0,
+            holdExerciseIdx: serverDoc.holdExerciseIdx ?? -1,
+            holdSetIdx: serverDoc.holdSetIdx ?? -1
           });
         }
         connectSSE();