Move 3 Strikes from Admin to Dashboard, add strikes feature

- Adds strikes (0-3) to Child model with migration
- New PATCH /api/children/{id}/strikes endpoint with WebSocket broadcast
- TV dashboard shows red ✕ marks next to child name when strikes > 0
- 3 Strikes card on Dashboard page (removed from Admin)

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

frontend/src/stores/schedule.js

@@ -55,6 +55,10 @@ export const useScheduleStore = defineStore('schedule', () => {
       applySnapshot(event)
       return
     }
+    if (event.event === 'strikes_update') {
+      if (child.value) child.value = { ...child.value, strikes: event.strikes }
+      return
+    }
     // Session ended
     if (event.is_active === false) {
       session.value = null

frontend/src/views/DashboardView.vue

@@ -79,6 +79,28 @@
           </div>
         </div>
 
+        <!-- 3 Strikes -->
+        <div class="card strikes-card">
+          <div class="card-title">3 Strikes</div>
+          <div class="strikes-list">
+            <div v-for="child in childrenStore.children" :key="child.id" class="strikes-row">
+              <div class="strikes-child-color" :style="{ background: child.color }"></div>
+              <span class="strikes-child-name">{{ child.name }}</span>
+              <div class="strikes-buttons">
+                <button
+                  v-for="i in 3"
+                  :key="i"
+                  class="strike-btn"
+                  :class="{ lit: i <= child.strikes }"
+                  @click="toggleStrike(child, i)"
+                  :title="`Strike ${i}`"
+                >✕</button>
+              </div>
+            </div>
+            <div v-if="childrenStore.children.length === 0" class="empty-small">No children added yet.</div>
+          </div>
+        </div>
+
         <!-- TV Link -->
         <div class="card tv-card">
           <div class="card-title">TV Dashboard</div>
@@ -183,6 +205,13 @@ async function startSession() {
   await loadDashboard()
 }
 
+async function toggleStrike(child, index) {
+  const newStrikes = index <= child.strikes ? index - 1 : index
+  const res = await api.patch(`/api/children/${child.id}/strikes`, { strikes: newStrikes })
+  const idx = childrenStore.children.findIndex((c) => c.id === child.id)
+  if (idx !== -1) childrenStore.children[idx] = res.data
+}
+
 async function sendAction(type) {
   if (!scheduleStore.session) return
   await scheduleStore.sendTimerAction(scheduleStore.session.id, type)
@@ -288,6 +317,45 @@ h1 { font-size: 1.75rem; font-weight: 700; }
 
 .block-list { display: flex; flex-direction: column; gap: 0.5rem; }
 
+.strikes-card { grid-column: span 1; }
+
+.strikes-list { display: flex; flex-direction: column; gap: 0.6rem; }
+
+.strikes-row {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.strikes-child-color { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
+.strikes-child-name { flex: 1; font-size: 0.95rem; }
+
+.strikes-buttons { display: flex; gap: 0.5rem; }
+
+.strike-btn {
+  width: 2.25rem;
+  height: 2.25rem;
+  border-radius: 50%;
+  border: 2px solid #334155;
+  background: transparent;
+  color: #334155;
+  font-size: 1rem;
+  font-weight: 700;
+  cursor: pointer;
+  transition: all 0.15s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.strike-btn:hover { border-color: #ef4444; color: #ef4444; }
+
+.strike-btn.lit {
+  background: #7f1d1d;
+  border-color: #ef4444;
+  color: #fca5a5;
+}
+
 .tv-card { grid-column: span 1; }
 .tv-desc { color: #64748b; margin-bottom: 1rem; font-size: 0.9rem; }
 

frontend/src/views/TVView.vue

@@ -2,7 +2,16 @@
   <div class="tv-root">
     <!-- Header bar -->
     <header class="tv-header">
-      <div class="tv-child-name">{{ scheduleStore.child?.name || 'Loading...' }}</div>
+      <div class="tv-child-name-wrap">
+        <div class="tv-child-name">{{ scheduleStore.child?.name || 'Loading...' }}</div>
+        <div class="tv-strikes" v-if="scheduleStore.child?.strikes > 0">
+          <span
+            v-for="i in scheduleStore.child.strikes"
+            :key="i"
+            class="tv-strike-x"
+          >✕</span>
+        </div>
+      </div>
       <div class="tv-clock">{{ clockDisplay }}</div>
       <div class="tv-date">{{ dateDisplay }}</div>
     </header>
@@ -197,12 +206,30 @@ onMounted(async () => {
   padding-bottom: 1rem;
 }
 
+.tv-child-name-wrap {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
 .tv-child-name {
   font-size: 2.5rem;
   font-weight: 700;
   color: #818cf8;
 }
 
+.tv-strikes {
+  display: flex;
+  gap: 0.4rem;
+}
+
+.tv-strike-x {
+  font-size: 2rem;
+  font-weight: 700;
+  color: #ef4444;
+  line-height: 1;
+}
+
 .tv-clock {
   font-size: 3rem;
   font-weight: 300;