Add manual block start and fix timer display labels

Blocks are now selected without auto-starting the timer. Clicking a block
makes it current (highlighted) but leaves it in a ready state. A "Start"
button (indigo) triggers timing for a fresh block; "Resume" appears for
previously-worked blocks; "Pause" remains while running.

Also fixes the sidebar duration label to show "Done!" when elapsed ≥ total
and "< 1 min" for sub-minute remaining time instead of "0 min".

Backend adds a "select" event type that records an implicit pause for the
previous block, updates current_block_id, and broadcasts is_paused=true
with prev_block_elapsed_seconds so the TV sidebar stays accurate.

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

frontend/src/components/ScheduleBlock.vue

@@ -63,8 +63,9 @@ const durationLabel = computed(() => {
   const totalSec = blockTotalSeconds()
   if (totalSec <= 0) return ''
   const remSec = Math.max(0, totalSec - props.elapsedSeconds)
+  if (remSec <= 0) return 'Done!'
   const remMin = Math.floor(remSec / 60)
-  if (remMin <= 0) return '0 min'
+  if (remMin <= 0) return '< 1 min'
   if (remMin >= 60) {
     const h = Math.floor(remMin / 60)
     const m = remMin % 60

frontend/src/stores/schedule.js

@@ -94,9 +94,26 @@ export const useScheduleStore = defineStore('schedule', () => {
       const elapsed = event.block_elapsed_seconds ?? blockElapsedCache.value[event.block_id] ?? 0
       blockElapsedOffset.value = elapsed
       if (event.block_id) blockElapsedCache.value[event.block_id] = elapsed
+      // Sync the previous block's cache so TV sidebar doesn't reset to full duration
+      if (event.prev_block_id != null) {
+        blockElapsedCache.value[event.prev_block_id] = event.prev_block_elapsed_seconds ?? blockElapsedCache.value[event.prev_block_id] ?? 0
+      }
       blockStartedAt.value = Date.now()
       isPaused.value = false
     }
+    // Select — switch current block but keep timer stopped (manual start required)
+    if (event.event === 'select') {
+      // Sync the previous block's cache
+      if (event.prev_block_id != null) {
+        blockElapsedCache.value[event.prev_block_id] = event.prev_block_elapsed_seconds ?? blockElapsedCache.value[event.prev_block_id] ?? 0
+      }
+      // Restore new block's accumulated elapsed but don't start counting
+      const elapsed = event.block_elapsed_seconds ?? blockElapsedCache.value[event.block_id] ?? 0
+      blockElapsedOffset.value = elapsed
+      if (event.block_id) blockElapsedCache.value[event.block_id] = elapsed
+      blockStartedAt.value = null
+      isPaused.value = true
+    }
     // Resume — continue from where we left off
     if (event.event === 'resume') {
       blockStartedAt.value = Date.now()
@@ -156,6 +173,37 @@ export const useScheduleStore = defineStore('schedule', () => {
     sendTimerAction(sessionId, 'start', newBlockId)
   }
 
+  // Select a block without starting its timer (requires explicit Start/Resume).
+  // The backend records an implicit pause for the previous block if it was running.
+  function selectBlock(sessionId, newBlockId) {
+    if (!session.value) return
+    const prevBlockId = session.value.current_block_id
+    if (prevBlockId === newBlockId) return
+
+    // Save elapsed seconds for the block we're leaving (if timer was running)
+    if (prevBlockId && blockStartedAt.value) {
+      blockElapsedCache.value[prevBlockId] =
+        blockElapsedOffset.value + Math.floor((Date.now() - blockStartedAt.value) / 1000)
+    }
+
+    // Optimistic update — switch block, stay paused, stop counting
+    session.value.current_block_id = newBlockId
+    isPaused.value = true
+    blockElapsedOffset.value = blockElapsedCache.value[newBlockId] ?? 0
+    blockStartedAt.value = null
+
+    // Single HTTP call; WS select event will confirm with authoritative elapsed
+    sendTimerAction(sessionId, 'select', newBlockId)
+  }
+
+  // Start the timer for the currently selected block (optimistic).
+  function startCurrentBlock(sessionId) {
+    if (!session.value?.current_block_id) return
+    isPaused.value = false
+    blockStartedAt.value = Date.now()
+    sendTimerAction(sessionId, 'start', session.value.current_block_id)
+  }
+
   return {
     session,
     blocks,
@@ -176,5 +224,7 @@ export const useScheduleStore = defineStore('schedule', () => {
     startSession,
     sendTimerAction,
     switchBlock,
+    selectBlock,
+    startCurrentBlock,
   }
 })

frontend/src/views/DashboardView.vue

@@ -47,9 +47,14 @@
                 v-if="scheduleStore.session.current_block_id && !scheduleStore.isPaused"
                 @click="sendAction('pause')"
               >Pause</button>
+              <button
+                class="btn-sm btn-start"
+                v-if="scheduleStore.isPaused && scheduleStore.blockElapsedOffset === 0 && scheduleStore.session.current_block_id"
+                @click="scheduleStore.startCurrentBlock(scheduleStore.session.id)"
+              >Start</button>
               <button
                 class="btn-sm"
-                v-if="scheduleStore.isPaused"
+                v-if="scheduleStore.isPaused && scheduleStore.blockElapsedOffset > 0"
                 @click="sendAction('resume')"
               >Resume</button>
               <button class="btn-sm btn-danger" @click="sendAction('complete')">End Day</button>
@@ -227,20 +232,9 @@ function blockElapsed(block) {
 
 function selectBlock(block) {
   if (!scheduleStore.session) return
-
-  const currentId = scheduleStore.session.current_block_id
-
-  // Clicking the current block while paused → resume it
-  if (block.id === currentId && scheduleStore.isPaused) {
-    scheduleStore.sendTimerAction(scheduleStore.session.id, 'resume')
-    return
-  }
-
-  // Clicking the current block while running → do nothing
-  if (block.id === currentId) return
-
-  // Switch to the new block in one atomic step (no separate pause request)
-  scheduleStore.switchBlock(scheduleStore.session.id, block.id)
+  // Clicking the current block does nothing — use Start/Pause/Resume buttons
+  if (block.id === scheduleStore.session.current_block_id) return
+  scheduleStore.selectBlock(scheduleStore.session.id, block.id)
 }
 
 onMounted(async () => {
@@ -327,6 +321,8 @@ h1 { font-size: 1.75rem; font-weight: 700; }
 .btn-sm:hover { background: #334155; }
 .btn-sm.btn-danger { border-color: #7f1d1d; color: #fca5a5; }
 .btn-sm.btn-danger:hover { background: #7f1d1d; }
+.btn-sm.btn-start { border-color: #4f46e5; color: #818cf8; }
+.btn-sm.btn-start:hover { background: #4f46e5; color: #fff; }
 
 .no-session { text-align: center; padding: 1.5rem 0; color: #64748b; }
 .no-session p { margin-bottom: 1rem; }