Fix timer reset on refresh and sync between dashboard and TV view

- Backend computes block_elapsed_seconds server-side from timer_events
- Store tracks blockStartedAt (ms) + blockElapsedOffset (seconds) instead
  of a client-side counter; updated correctly on start/pause/resume/end
- TimerDisplay derives elapsed from store props so both views always agree
- Add compact timer display to dashboard session card
- Add isPaused/pause-resume logic to dashboard Pause/Resume buttons

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/components/TimerDisplay.vue

@@ -1,5 +1,9 @@
 <template>
-  <div class="timer-wrap">
+  <div v-if="compact" class="timer-compact">
+    <span class="timer-time-compact">{{ display }}</span>
+    <span class="timer-label-compact">{{ label }}</span>
+  </div>
+  <div v-else class="timer-wrap">
     <!-- SVG circular ring -->
     <svg class="timer-ring" viewBox="0 0 200 200">
       <circle cx="100" cy="100" r="88" class="ring-bg" />
@@ -17,15 +21,21 @@
 </template>
 
 <script setup>
-import { computed, onUnmounted, ref, watch } from 'vue'
+import { computed, onUnmounted, ref } from 'vue'
 
 const props = defineProps({
   block: { type: Object, default: null },
   session: { type: Object, default: null },
+  isPaused: { type: Boolean, default: false },
+  compact: { type: Boolean, default: false },
+  blockStartedAt: { type: Number, default: null },   // ms timestamp, null when paused
+  blockElapsedOffset: { type: Number, default: 0 },  // seconds already elapsed
 })
 
-const elapsed = ref(0)
-let interval = null
+// Tick so computed elapsed re-evaluates each second
+const now = ref(Date.now())
+const ticker = setInterval(() => { now.value = Date.now() }, 1000)
+onUnmounted(() => clearInterval(ticker))
 
 function parseTime(str) {
   if (!str) return 0
@@ -38,6 +48,12 @@ const blockDuration = computed(() => {
   return parseTime(props.block.time_end) - parseTime(props.block.time_start)
 })
 
+const elapsed = computed(() => {
+  const base = props.blockElapsedOffset
+  if (!props.blockStartedAt) return base
+  return base + Math.floor((now.value - props.blockStartedAt) / 1000)
+})
+
 const remaining = computed(() => Math.max(0, blockDuration.value - elapsed.value))
 
 const display = computed(() => {
@@ -60,17 +76,6 @@ const dashOffset = computed(() => {
 })
 
 const ringColor = computed(() => props.block?.subject?.color || '#4f46e5')
-
-// Tick timer
-watch(() => props.block?.id, () => { elapsed.value = 0 })
-
-function startTick() {
-  if (interval) clearInterval(interval)
-  interval = setInterval(() => { elapsed.value++ }, 1000)
-}
-
-startTick()
-onUnmounted(() => clearInterval(interval))
 </script>
 
 <style scoped>
@@ -124,4 +129,24 @@ onUnmounted(() => clearInterval(interval))
   text-transform: uppercase;
   letter-spacing: 0.1em;
 }
+
+.timer-compact {
+  display: flex;
+  align-items: baseline;
+  gap: 0.5rem;
+}
+
+.timer-time-compact {
+  font-size: 2rem;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: -0.02em;
+}
+
+.timer-label-compact {
+  font-size: 0.8rem;
+  color: #64748b;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
 </style>