Alpha v0.1.0 — KAPPA Hub inicial

- Auth con KAPPA (login + token Bearer)
- Cliente HTTP para 10 endpoints (proyectos, HUs, bitácoras, planeaciones)
- Dashboard multi-proyecto con concepto médico Teloprax
- Calendario colombiano con 19 feriados (Ley Emiliani + Pascua)
- Scheduler tipo cron con Dexie (reglas recurrentes, toasts, log)
- Diseño marca Teloprax: Inter, Space Grotesk, #1A1A2E, rojo #E63946
- Stack: Vue 3 + TypeScript + Pinia + Vite + Bun

src/views/CalendarView.vue

@@ -0,0 +1,149 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { getColombianHolidays, isHoliday } from '@/services/calendar'
+
+const today = new Date()
+const currentYear = ref(today.getFullYear())
+const currentMonth = ref(today.getMonth())
+const selectedDate = ref<Date | null>(null)
+
+const MONTHS = [
+  'Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio',
+  'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre',
+]
+const WEEKDAYS = ['Dom', 'Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb']
+
+const holidays = computed(() => {
+  const h = getColombianHolidays(currentYear.value)
+  return new Map(h.map(h => [`${h.date.getFullYear()}-${h.date.getMonth()}-${h.date.getDate()}`, h.name]))
+})
+
+const daysInMonth = computed(() => {
+  const year = currentYear.value
+  const month = currentMonth.value
+  const firstDay = new Date(year, month, 1).getDay()
+  const totalDays = new Date(year, month + 1, 0).getDate()
+
+  return Array.from({ length: firstDay + totalDays }, (_, i) => {
+    if (i < firstDay) return { day: null, isToday: false, isHoliday: false, isWeekend: false, isSelected: false, holidayName: undefined as string | undefined }
+    const d = i - firstDay + 1
+    const date = new Date(year, month, d)
+    const key = `${year}-${month}-${d}`
+    const h = holidays.value.get(key)
+    const dow = date.getDay()
+    return {
+      day: d,
+      isToday: d === today.getDate() && month === today.getMonth() && year === today.getFullYear(),
+      isHoliday: !!h || dow === 0,
+      holidayName: h,
+      isWeekend: dow === 0 || dow === 6,
+      isSelected: selectedDate.value
+        ? selectedDate.value.getDate() === d && selectedDate.value.getMonth() === month && selectedDate.value.getFullYear() === year
+        : false,
+    }
+  })
+})
+
+const selectedHoliday = computed(() => {
+  if (!selectedDate.value) return null
+  const h = isHoliday(selectedDate.value)
+  return h.holiday ? h.name : null
+})
+
+function isWorkingDay(date: Date): boolean {
+  const dow = date.getDay()
+  if (dow === 0 || dow === 6) return false
+  return !isHoliday(date).holiday
+}
+
+function prevMonth() {
+  if (currentMonth.value === 0) { currentMonth.value = 11; currentYear.value-- }
+  else currentMonth.value--
+}
+
+function nextMonth() {
+  if (currentMonth.value === 11) { currentMonth.value = 0; currentYear.value++ }
+  else currentMonth.value++
+}
+
+function selectDay(day: number | null) {
+  if (day !== null) selectedDate.value = new Date(currentYear.value, currentMonth.value, day)
+}
+</script>
+
+<template>
+  <div class="cal-view">
+    <div class="cal-nav">
+      <button @click="prevMonth" class="cal-nav-btn">&larr;</button>
+      <h2>{{ MONTHS[currentMonth] }} {{ currentYear }}</h2>
+      <button @click="nextMonth" class="cal-nav-btn">&rarr;</button>
+      <button class="cal-today" @click="currentMonth = today.getMonth(); currentYear = today.getFullYear()">Hoy</button>
+    </div>
+
+    <div class="cal-grid">
+      <div v-for="w in WEEKDAYS" :key="w" class="cal-header">{{ w }}</div>
+      <div
+        v-for="(d, i) in daysInMonth"
+        :key="i"
+        :class="['cal-day', { empty: d.day === null, today: d.isToday, weekend: d.isWeekend && !d.isHoliday, holiday: d.isHoliday, selected: d.isSelected }]"
+        @click="selectDay(d.day)"
+      >
+        <span v-if="d.day" class="cal-num">{{ d.day }}</span>
+        <span v-if="d.holidayName" class="cal-hol">{{ d.holidayName.slice(0, 3) }}</span>
+      </div>
+    </div>
+
+    <div class="cal-legend">
+      <span><span class="leg-dot w-day"></span> Laboral</span>
+      <span><span class="leg-dot w-end"></span> Fin de semana</span>
+      <span><span class="leg-dot w-hol"></span> Feriado</span>
+    </div>
+
+    <div v-if="selectedDate" class="cal-info">
+      <h3>{{ selectedDate.toLocaleDateString('es-CO', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }) }}</h3>
+      <p v-if="selectedHoliday">Feriado: <strong>{{ selectedHoliday }}</strong></p>
+      <p v-else-if="isWorkingDay(selectedDate)">Día laboral</p>
+      <p v-else>Fin de semana</p>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cal-nav { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
+.cal-nav h2 { margin: 0; font-size: 18px; color: var(--text-primary); min-width: 180px; font-weight: 700; }
+.cal-nav-btn {
+  padding: 5px 14px;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  color: var(--text-secondary);
+  cursor: pointer;
+  font-size: 14px;
+}
+.cal-nav-btn:hover { color: var(--text-primary); border-color: var(--border-hover); }
+.cal-today { margin-left: auto; padding: 5px 14px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius); color: var(--accent); cursor: pointer; font-size: 13px; font-weight: 500; }
+.cal-today:hover { background: var(--bg-tertiary); }
+
+.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
+.cal-header { padding: 9px 4px; text-align: center; font-size: 11px; font-weight: 600; color: var(--text-muted); background: var(--bg-secondary); text-transform: uppercase; letter-spacing: 0.3px; }
+.cal-day { aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4px; background: var(--bg-primary); cursor: pointer; transition: background 0.1s; }
+.cal-day:hover { background: var(--bg-tertiary); }
+.cal-day.empty { cursor: default; background: var(--bg-primary); }
+.cal-day.today { background: #1E1040; }
+.cal-day.today .cal-num { color: var(--accent); font-weight: 700; }
+.cal-day.weekend { color: var(--text-muted); background: #161630; }
+.cal-day.holiday { color: var(--accent); }
+.cal-day.holiday .cal-hol { font-size: 8px; opacity: 0.8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
+.cal-day.selected { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 2px; }
+.cal-num { font-size: 14px; font-weight: 500; }
+
+.cal-legend { display: flex; gap: 18px; margin-top: 12px; font-size: 11px; color: var(--text-muted); }
+.leg-dot { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
+.w-day { background: var(--border); }
+.w-end { background: #161630; }
+.w-hol { background: var(--accent); }
+
+.cal-info { margin-top: 22px; padding: 18px 20px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius); }
+.cal-info h3 { margin: 0 0 6px; font-size: 15px; color: var(--text-primary); text-transform: capitalize; }
+.cal-info p { margin: 0; font-size: 13px; color: var(--text-secondary); }
+</style>

src/views/DashboardView.vue

@@ -0,0 +1,145 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useProjectsStore } from '@/stores/projects'
+import { useAuthStore } from '@/stores/auth'
+
+const projects = useProjectsStore()
+const auth = useAuthStore()
+
+const project = computed(() => projects.selected)
+</script>
+
+<template>
+  <div class="dashboard" v-if="project">
+    <header class="dash-header">
+      <div>
+        <h2 class="dash-title">{{ project.name }}</h2>
+        <div class="dash-meta-row">
+          <span v-if="project.key" class="dash-meta">Clave: {{ project.key }}</span>
+          <span v-if="project.status" class="dash-badge">{{ project.status }}</span>
+        </div>
+      </div>
+      <div class="dash-user">
+        <span class="user-name">{{ auth.user?.name }}</span>
+      </div>
+    </header>
+
+    <div class="dash-grid">
+      <section class="card">
+        <h3>Historia clínica</h3>
+        <p class="card-desc" v-if="project.description">{{ project.description }}</p>
+        <p class="card-empty" v-else>Sin descripción del paciente</p>
+        <dl class="card-dl" v-if="project.start_date">
+          <dt>Ingreso</dt><dd>{{ project.start_date }}</dd>
+          <dt v-if="project.end_date">Alta prevista</dt><dd v-if="project.end_date">{{ project.end_date }}</dd>
+        </dl>
+      </section>
+
+      <section class="card">
+        <h3>Síntomas</h3>
+        <p class="card-empty">Historias de Usuario detectadas</p>
+      </section>
+
+      <section class="card">
+        <h3>Bitácora</h3>
+        <p class="card-empty">Registro de sesiones</p>
+      </section>
+
+      <section class="card">
+        <h3>Tratamiento</h3>
+        <p class="card-empty">Planeación del proyecto</p>
+      </section>
+
+      <section class="card card-wide">
+        <h3>Transcripciones</h3>
+        <p class="card-empty">Pipeline consultas → diagnóstico</p>
+      </section>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.dashboard { max-width: 1200px; }
+
+.dash-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  margin-bottom: 28px;
+}
+.dash-title {
+  margin: 0 0 6px;
+  font-size: 22px;
+  font-weight: 700;
+  color: #FFFFFF;
+}
+.dash-meta-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.dash-meta {
+  font-size: 12px;
+  color: #8888AA;
+}
+.dash-badge {
+  font-size: 11px;
+  padding: 2px 10px;
+  background: rgba(230,57,70,0.12);
+  color: #E63946;
+  border-radius: 10px;
+  font-weight: 600;
+  text-transform: capitalize;
+}
+.dash-user {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+.user-name {
+  font-size: 12px;
+  color: #8888AA;
+}
+
+.dash-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 18px;
+}
+
+.card {
+  background: #141428;
+  border: 1px solid #2A2A45;
+  border-radius: 8px;
+  padding: 22px;
+}
+.card-wide { grid-column: 1 / -1; }
+.card h3 {
+  margin: 0 0 12px;
+  font-size: 13px;
+  font-weight: 600;
+  color: #E63946;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+.card-desc {
+  margin: 0 0 12px;
+  font-size: 13px;
+  color: #B0B0CC;
+  line-height: 1.6;
+}
+.card-empty {
+  margin: 0;
+  font-size: 13px;
+  color: #555577;
+}
+.card-dl {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 4px 12px;
+  margin: 0;
+  font-size: 13px;
+}
+.card-dl dt { color: #8888AA; font-size: 12px; }
+.card-dl dd { color: #E6EDF3; margin: 0; }
+</style>

src/views/LoginView.vue

@@ -0,0 +1,184 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useAuthStore } from '@/stores/auth'
+
+const auth = useAuthStore()
+const email = ref('')
+const password = ref('')
+const showPassword = ref(false)
+
+async function handleLogin() {
+  if (!email.value || !password.value) return
+  await auth.login({ email: email.value, password: password.value })
+}
+</script>
+
+<template>
+  <div class="login-bg">
+    <div class="login-card">
+      <div class="login-circles">
+        <span class="c c1"></span>
+        <span class="c c2"></span>
+        <span class="c c3"></span>
+      </div>
+
+      <h1 class="login-brand">teloprax</h1>
+      <p class="login-tagline">Tecnología con prescripción</p>
+
+      <div class="login-divider"></div>
+
+      <p class="login-sub">Centro de diagnóstico multi-proyecto</p>
+
+      <form @submit.prevent="handleLogin" class="login-form">
+        <div class="field">
+          <label>Email</label>
+          <input v-model="email" type="email" placeholder="ricardo@..." autocomplete="email" />
+        </div>
+        <div class="field">
+          <label>Contraseña</label>
+          <div class="password-wrap">
+            <input
+              v-model="password"
+              :type="showPassword ? 'text' : 'password'"
+              placeholder="••••••••"
+              autocomplete="current-password"
+            />
+            <button type="button" class="toggle-btn" @click="showPassword = !showPassword">
+              {{ showPassword ? '◉' : '◎' }}
+            </button>
+          </div>
+        </div>
+
+        <p v-if="auth.error" class="error-msg">{{ auth.error }}</p>
+
+        <button type="submit" class="login-btn" :disabled="auth.loading">
+          {{ auth.loading ? 'Ingresando...' : 'Iniciar diagnóstico' }}
+        </button>
+      </form>
+
+      <p class="login-footer">kappa.lambdaanalytics.co</p>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.login-bg {
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #1A1A2E;
+}
+.login-card {
+  width: 420px;
+  padding: 44px 40px;
+  background: #141428;
+  border: 1px solid #2A2A45;
+  border-radius: 12px;
+  text-align: center;
+}
+
+.login-circles {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  margin-bottom: 20px;
+}
+.c {
+  display: block;
+  border-radius: 50%;
+  border: 2px solid #E63946;
+}
+.c1 { width: 10px; height: 10px; opacity: 0.35; }
+.c2 { width: 14px; height: 14px; opacity: 0.65; }
+.c3 { width: 18px; height: 18px; background: #E63946; border: none; }
+
+.login-brand {
+  font-family: 'Space Grotesk', sans-serif;
+  font-weight: 700;
+  font-size: 26px;
+  color: #FFFFFF;
+  letter-spacing: -0.5px;
+  margin: 0;
+}
+.login-tagline {
+  margin: 4px 0 0;
+  font-size: 13px;
+  color: #E63946;
+  font-weight: 500;
+  letter-spacing: 0.2px;
+}
+.login-divider {
+  width: 40px;
+  height: 2px;
+  background: #2A2A45;
+  margin: 20px auto;
+}
+.login-sub {
+  margin: 0 0 28px;
+  font-size: 13px;
+  color: #8888AA;
+}
+
+.login-form { display: flex; flex-direction: column; gap: 14px; text-align: left; }
+.field { display: flex; flex-direction: column; gap: 5px; }
+.field label { font-size: 11px; color: #8888AA; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }
+.field input {
+  padding: 10px 12px;
+  background: #1A1A2E;
+  border: 1px solid #2A2A45;
+  border-radius: 6px;
+  color: #E6EDF3;
+  font-size: 14px;
+  outline: none;
+  transition: border-color 0.15s;
+}
+.field input:focus {
+  border-color: #E63946;
+  box-shadow: 0 0 0 2px rgba(230,57,70,0.12);
+}
+.field input::placeholder { color: #555577; }
+.password-wrap { position: relative; }
+.password-wrap input { width: 100%; box-sizing: border-box; padding-right: 40px; }
+.toggle-btn {
+  position: absolute;
+  right: 8px; top: 50%;
+  transform: translateY(-50%);
+  background: none; border: none;
+  color: #8888AA; font-size: 16px;
+  cursor: pointer; padding: 4px;
+}
+.toggle-btn:hover { color: #E6EDF3; }
+
+.error-msg {
+  margin: 0;
+  font-size: 12px;
+  color: #F85149;
+  padding: 8px 12px;
+  background: rgba(248,81,73,0.08);
+  border: 1px solid rgba(248,81,73,0.15);
+  border-radius: 6px;
+}
+
+.login-btn {
+  padding: 11px;
+  background: #E63946;
+  color: #fff;
+  border: none;
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  margin-top: 6px;
+  transition: background 0.15s;
+}
+.login-btn:hover { background: #C62E3A; }
+.login-btn:disabled { opacity: 0.5; cursor: default; }
+
+.login-footer {
+  margin: 28px 0 0;
+  font-size: 11px;
+  color: #444466;
+}
+</style>

src/views/SchedulerView.vue

@@ -0,0 +1,261 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { useSchedulerStore } from '@/stores/scheduler'
+import { DAY_LABELS, computeNextRun, type ScheduleAction } from '@/services/scheduler'
+
+const store = useSchedulerStore()
+const showForm = ref(false)
+
+const form = ref({
+  name: '', description: '',
+  daysOfWeek: [] as number[],
+  hour: 9, minute: 0,
+  actionType: 'reminder' as ScheduleAction['type'],
+  message: '',
+})
+
+function toggleDay(d: number) {
+  const idx = form.value.daysOfWeek.indexOf(d)
+  if (idx >= 0) form.value.daysOfWeek.splice(idx, 1)
+  else form.value.daysOfWeek.push(d)
+}
+
+async function handleSubmit() {
+  if (!form.value.name || form.value.daysOfWeek.length === 0) return
+  const action: ScheduleAction = form.value.actionType === 'reminder'
+    ? { type: 'reminder', message: form.value.message || form.value.name }
+    : { type: form.value.actionType as Exclude<ScheduleAction['type'], 'reminder'> }
+
+  await store.addRule({
+    name: form.value.name, description: form.value.description,
+    daysOfWeek: form.value.daysOfWeek, hour: form.value.hour,
+    minute: form.value.minute, action, enabled: true,
+  })
+  showForm.value = false
+  form.value = { name: '', description: '', daysOfWeek: [], hour: 9, minute: 0, actionType: 'reminder', message: '' }
+}
+
+function fmtNextRun(date: Date | null | undefined): string {
+  if (!date) return '—'
+  return date.toLocaleDateString('es-CO', { weekday: 'short', month: 'short', day: 'numeric' })
+    + ` ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`
+}
+
+function fmtLastRun(iso: string | null): string {
+  if (!iso) return 'Nunca'
+  const d = new Date(iso)
+  return d.toLocaleDateString('es-CO', { month: 'short', day: 'numeric' })
+    + ` ${d.toLocaleTimeString('es-CO', { hour: '2-digit', minute: '2-digit' })}`
+}
+
+const actionLabels: Record<ScheduleAction['type'], string> = {
+  generate_progress_report: 'Informe semanal',
+  check_hus: 'Revisión HUs',
+  daily_prep: 'Daily prep',
+  reminder: 'Recordatorio',
+}
+
+onMounted(async () => {
+  await store.seedDefaults()
+  await store.loadRules()
+  await store.loadLogs()
+  if (!store.running) store.start()
+})
+</script>
+
+<template>
+  <div class="sch-view">
+    <div class="sch-header">
+      <div>
+        <h2>Recetas automáticas</h2>
+        <p>Tareas programadas que se ejecutan al abrir la app</p>
+      </div>
+      <div class="sch-header-right">
+        <span :class="['sch-status', store.running ? 'on' : 'off']">
+          {{ store.running ? 'Activo' : 'Pausado' }}
+        </span>
+        <button class="btn" @click="showForm = !showForm">
+          {{ showForm ? 'Cancelar' : '+ Nueva receta' }}
+        </button>
+      </div>
+    </div>
+
+    <div v-if="showForm" class="sch-form">
+      <div class="form-row">
+        <div class="form-group flex-2">
+          <label>Nombre</label>
+          <input v-model="form.name" placeholder="Ej: Informe semanal de avance" />
+        </div>
+        <div class="form-group">
+          <label>Descripción</label>
+          <input v-model="form.description" placeholder="Opcional" />
+        </div>
+      </div>
+      <div class="form-row">
+        <div class="form-group">
+          <label>Días</label>
+          <div class="day-pills">
+            <button v-for="(l, i) in DAY_LABELS" :key="i"
+              :class="['day-pill', { active: form.daysOfWeek.includes(i) }]"
+              @click="toggleDay(i)">{{ l }}</button>
+          </div>
+        </div>
+      </div>
+      <div class="form-row">
+        <div class="form-group">
+          <label>Hora</label>
+          <div class="time-inputs">
+            <input type="number" v-model.number="form.hour" min="0" max="23" class="time-in" />
+            <span>:</span>
+            <input type="number" v-model.number="form.minute" min="0" max="59" class="time-in" />
+          </div>
+        </div>
+        <div class="form-group flex-2">
+          <label>Acción</label>
+          <select v-model="form.actionType">
+            <option value="generate_progress_report">Generar informe de avance</option>
+            <option value="check_hus">Revisar estado de HUs</option>
+            <option value="daily_prep">Daily prep</option>
+            <option value="reminder">Recordatorio personalizado</option>
+          </select>
+        </div>
+      </div>
+      <div class="form-row" v-if="form.actionType === 'reminder'">
+        <div class="form-group flex-2">
+          <label>Mensaje</label>
+          <input v-model="form.message" placeholder="Ej: Preparar informe para gerencia" />
+        </div>
+      </div>
+      <button class="btn primary" @click="handleSubmit">Guardar receta</button>
+    </div>
+
+    <div class="sch-rules">
+      <div v-for="rule in store.rules" :key="rule.id" :class="['sch-rule', { disabled: !rule.enabled }]">
+        <div class="rule-info">
+          <div class="rule-name">{{ rule.name }}</div>
+          <div v-if="rule.description" class="rule-desc">{{ rule.description }}</div>
+          <div class="rule-meta">
+            <span class="meta-tag">{{ rule.daysOfWeek.map(d => DAY_LABELS[d]).join(', ') }}</span>
+            <span class="meta-tag">{{ String(rule.hour).padStart(2,'0') }}:{{ String(rule.minute).padStart(2,'0') }}</span>
+            <span class="meta-tag type">{{ actionLabels[rule.action.type] }}</span>
+          </div>
+        </div>
+        <div class="rule-exec">
+          <div class="exec-next">Próx: {{ fmtNextRun(computeNextRun(rule)) }}</div>
+          <div class="exec-last">Últ: {{ fmtLastRun(rule.lastRun) }}</div>
+        </div>
+        <div class="rule-actions">
+          <button :class="['toggle-btn', rule.enabled ? 'on' : 'off']" @click="store.toggleRule(rule.id!)">
+            {{ rule.enabled ? 'ON' : 'OFF' }}
+          </button>
+          <button class="del-btn" @click="store.deleteRule(rule.id!)">&times;</button>
+        </div>
+      </div>
+      <p v-if="store.rules.length === 0" class="empty">No hay recetas configuradas</p>
+    </div>
+
+    <div class="sch-log" v-if="store.logs.length > 0">
+      <h3>Historial</h3>
+      <div v-for="log in store.logs.slice(0, 10)" :key="log.id" class="log-entry">
+        <span :class="['log-dot', log.success ? 'ok' : 'fail']"></span>
+        <span class="log-time">{{ fmtLastRun(log.executedAt) }}</span>
+        <span class="log-name">{{ log.ruleName }}</span>
+        <span class="log-msg">{{ log.message }}</span>
+      </div>
+    </div>
+
+    <div class="sch-toasts" v-if="store.notifications.length > 0">
+      <div v-for="n in store.notifications.slice(0, 5)" :key="n.id" class="sch-toast">
+        <span class="toast-time">{{ n.time }}</span>
+        <span class="toast-msg">{{ n.message }}</span>
+        <button class="toast-close" @click="store.dismissNotification(n.id)">&times;</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.sch-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 22px; }
+.sch-header h2 { margin: 0 0 3px; font-size: 18px; color: var(--text-primary); font-weight: 700; }
+.sch-header p { margin: 0; font-size: 13px; color: var(--text-secondary); }
+.sch-header-right { display: flex; align-items: center; gap: 12px; }
+.sch-status { font-size: 11px; padding: 3px 10px; border-radius: 10px; font-weight: 600; }
+.sch-status.on { background: rgba(63,185,80,0.1); color: var(--success); }
+.sch-status.off { background: rgba(136,136,170,0.1); color: var(--text-muted); }
+
+.btn {
+  padding: 6px 16px; background: var(--bg-secondary); border: 1px solid var(--border);
+  border-radius: var(--radius); color: var(--text-primary); font-size: 13px; cursor: pointer;
+}
+.btn:hover { border-color: var(--accent); }
+.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; margin-top: 6px; }
+.btn.primary:hover { background: var(--accent-hover); }
+
+.sch-form {
+  padding: 20px; background: var(--bg-secondary); border: 1px solid var(--border);
+  border-radius: var(--radius); margin-bottom: 22px; display: flex; flex-direction: column; gap: 12px;
+}
+.form-row { display: flex; gap: 12px; }
+.form-group { display: flex; flex-direction: column; gap: 4px; flex: 1; }
+.form-group.flex-2 { flex: 2; }
+.form-group label { font-size: 10px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.4px; font-weight: 600; }
+.form-group input, .form-group select {
+  padding: 8px 10px; background: var(--bg-input); border: 1px solid var(--border);
+  border-radius: 6px; color: var(--text-primary); font-size: 13px; outline: none;
+}
+.form-group input:focus, .form-group select:focus { border-color: var(--accent); }
+.day-pills { display: flex; gap: 5px; }
+.day-pill {
+  padding: 4px 10px; background: var(--bg-input); border: 1px solid var(--border);
+  border-radius: 14px; color: var(--text-secondary); font-size: 12px; cursor: pointer;
+}
+.day-pill.active { background: var(--accent); border-color: var(--accent); color: #fff; }
+.time-inputs { display: flex; align-items: center; gap: 4px; }
+.time-in { width: 50px; text-align: center; }
+
+.sch-rules { display: flex; flex-direction: column; gap: 8px; }
+.sch-rule {
+  display: flex; align-items: center; gap: 14px; padding: 14px 16px;
+  background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius);
+}
+.sch-rule.disabled { opacity: 0.4; }
+.rule-info { flex: 1; min-width: 0; }
+.rule-name { font-size: 14px; color: var(--text-primary); font-weight: 500; }
+.rule-desc { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
+.rule-meta { display: flex; gap: 5px; margin-top: 4px; flex-wrap: wrap; }
+.meta-tag { font-size: 11px; padding: 1px 8px; background: var(--bg-primary); border-radius: 10px; color: var(--text-secondary); }
+.meta-tag.type { color: var(--accent); }
+.rule-exec { flex-shrink: 0; text-align: right; }
+.exec-next { font-size: 12px; color: var(--success); }
+.exec-last { font-size: 11px; color: var(--text-muted); }
+.rule-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
+.toggle-btn { padding: 3px 12px; border-radius: 10px; border: none; font-size: 10px; font-weight: 700; cursor: pointer; }
+.toggle-btn.on { background: rgba(63,185,80,0.15); color: var(--success); }
+.toggle-btn.off { background: rgba(136,136,170,0.1); color: var(--text-muted); }
+.del-btn { background: none; border: none; cursor: pointer; font-size: 18px; color: var(--text-muted); }
+.del-btn:hover { color: var(--error); }
+
+.sch-log { margin-top: 28px; padding: 16px 18px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius); }
+.sch-log h3 { margin: 0 0 10px; font-size: 13px; color: var(--text-primary); text-transform: uppercase; letter-spacing: 0.4px; font-weight: 600; }
+.log-entry { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 12px; }
+.log-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
+.log-dot.ok { background: var(--success); }
+.log-dot.fail { background: var(--error); }
+.log-time { color: var(--text-muted); white-space: nowrap; }
+.log-name { color: var(--text-secondary); font-weight: 500; white-space: nowrap; }
+.log-msg { color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+.sch-toasts { position: fixed; bottom: 16px; right: 16px; z-index: 100; display: flex; flex-direction: column; gap: 6px; max-width: 380px; }
+.sch-toast {
+  display: flex; align-items: center; gap: 8px; padding: 10px 14px;
+  background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius);
+  border-left: 3px solid var(--accent); font-size: 12px; animation: slideIn 0.3s ease;
+}
+@keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
+.toast-time { color: var(--text-muted); white-space: nowrap; }
+.toast-msg { color: var(--text-primary); flex: 1; }
+.toast-close { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 16px; }
+.toast-close:hover { color: var(--error); }
+
+.empty { color: var(--text-muted); text-align: center; padding: 32px; font-size: 13px; }
+</style>