feat(timers): tap-to-open modal with big touch targets + create via UI

Tablet touch targets were cramped (30px +/- buttons). Swap to modal UX:

- New TimerModal component handles both 'control existing' and
  'create new'. 84px countdown, 56px min button height, 3×2 adjust
  grid (-5m, -1m, -10s, +10s, +1m, +5m), big destructive cancel/stop.
  Create view has 7 duration presets (1..60 min), label input with
  shortcut chips (Чайник, Паста, Яйца…), gradient 'Запустить' CTA.
- TimerHomeWidget cards are now full tap targets — open control modal
  on press. + button in header opens create modal. Inline buttons
  removed. Subtle hint text 'тап чтобы изменить'.
- Ticking countdown inside modal stays fresh via shared timers state:
  while modal is open we look up the current timer in active[] by id
  and re-pass to modal on every tick. When timer disappears
  (cancelled / expired >30s), modal auto-closes.

components/TimerHomeWidget.tsx

@@ -1,7 +1,8 @@
 'use client'
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useState } from 'react'
 import { motion, AnimatePresence } from 'framer-motion'
-import { AlarmClock, X, Plus, Minus, Timer as TimerIcon } from 'lucide-react'
+import { AlarmClock, Plus, Timer as TimerIcon } from 'lucide-react'
+import TimerModal, { type TimerModalProps } from './TimerModal'
 
 interface Timer {
   id: string
@@ -23,19 +24,10 @@ function formatRemaining(ms: number): { big: string; small?: string } {
   return { big: `${m}:${s.toString().padStart(2, '0')}` }
 }
 
-async function callTimer(action: string, body: Record<string, any>) {
-  // Cookie авторизация (браузер планшета уже залогинен под PIN)
-  return fetch('/api/voice/timer', {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ action, ...body }),
-    credentials: 'include',
-  })
-}
-
 export default function TimerHomeWidget() {
   const [timers, setTimers] = useState<Timer[]>([])
   const [, setTick] = useState(0)
+  const [modal, setModal] = useState<TimerModalProps['mode']>(null)
 
   const fetchTimers = async () => {
     try {
@@ -46,7 +38,6 @@ export default function TimerHomeWidget() {
     } catch {}
   }
 
-  // Подписка на SSE для live-обновлений
   useEffect(() => {
     let es: EventSource | null = null
     let retry: ReturnType<typeof setTimeout> | null = null
@@ -76,7 +67,6 @@ export default function TimerHomeWidget() {
     }
   }, [])
 
-  // Тик каждые 500мс для плавного отсчёта
   useEffect(() => {
     const t = setInterval(() => setTick(x => x + 1), 500)
     return () => clearInterval(t)
@@ -84,97 +74,138 @@ export default function TimerHomeWidget() {
 
   const now = Date.now()
   const active = timers
-    .filter(t => new Date(t.endsAt).getTime() > now - 60_000) // прячем просроченные > 1 мин
+    .filter(t => new Date(t.endsAt).getTime() > now - 30_000)
     .sort((a, b) => new Date(a.endsAt).getTime() - new Date(b.endsAt).getTime())
 
+  // Keep reference to the currently-open timer updated as it ticks down
+  // (so modal shows fresh countdown without reopening)
+  const modalTimer =
+    modal?.type === 'control' ? active.find(t => t.id === modal.timer.id) || modal.timer : null
+  const resolvedMode: TimerModalProps['mode'] = modal
+    ? modal.type === 'create'
+      ? modal
+      : modalTimer
+      ? { type: 'control', timer: modalTimer }
+      : null // timer исчез (отменили / прозвенел >30с) — закроем
+    : null
+
+  useEffect(() => {
+    // Если таймер пропал из active, автоматом закрыть модалку
+    if (modal?.type === 'control' && !modalTimer) {
+      setModal(null)
+    }
+  }, [modal, modalTimer])
+
   return (
-    <div className="card" style={{
-      padding: '18px 20px',
-      display: 'flex', flexDirection: 'column', gap: 14,
-    }}>
-      <div style={{ display: 'flex', alignItems: 'center', gap: 8, justifyContent: 'space-between' }}>
-        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-          <TimerIcon size={13} color="var(--text-secondary)" />
-          <span style={{
-            fontSize: 10, color: 'var(--text-secondary)',
-            textTransform: 'uppercase', letterSpacing: '0.1em', fontWeight: 700,
-          }}>
-            Таймеры
-          </span>
-          {active.length > 0 && (
+    <>
+      <div className="card" style={{
+        padding: '18px 20px',
+        display: 'flex', flexDirection: 'column', gap: 14,
+      }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 8, justifyContent: 'space-between' }}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+            <TimerIcon size={13} color="var(--text-secondary)" />
             <span style={{
-              fontSize: 10, color: 'var(--text-tertiary)',
-              background: 'var(--surface-2)', padding: '2px 7px', borderRadius: 8,
-              fontWeight: 700, fontVariantNumeric: 'tabular-nums',
+              fontSize: 10, color: 'var(--text-secondary)',
+              textTransform: 'uppercase', letterSpacing: '0.1em', fontWeight: 700,
             }}>
-              {active.length}
+              Таймеры
             </span>
-          )}
-        </div>
-      </div>
-
-      {active.length === 0 ? (
-        <div style={{
-          flex: 1, display: 'flex', flexDirection: 'column',
-          alignItems: 'center', justifyContent: 'center',
-          padding: '24px 0', gap: 10,
-          color: 'var(--text-tertiary)',
-        }}>
-          <AlarmClock size={28} style={{ opacity: 0.4 }} />
-          <div style={{ fontSize: 13 }}>Нет активных таймеров</div>
-          <div style={{ fontSize: 11, opacity: 0.7, textAlign: 'center', lineHeight: 1.5 }}>
-            Скажи «поставь таймер на&nbsp;5&nbsp;минут»
+            {active.length > 0 && (
+              <span style={{
+                fontSize: 10, color: 'var(--text-tertiary)',
+                background: 'var(--surface-2)', padding: '2px 7px', borderRadius: 8,
+                fontWeight: 700, fontVariantNumeric: 'tabular-nums',
+              }}>
+                {active.length}
+              </span>
+            )}
           </div>
+          <button
+            onClick={() => setModal({ type: 'create' })}
+            aria-label="Новый таймер"
+            style={{
+              width: 32, height: 32, borderRadius: 10,
+              background: 'color-mix(in srgb, #818cf8 12%, var(--surface-2))',
+              border: '1px solid color-mix(in srgb, #818cf8 30%, var(--border-subtle))',
+              color: '#a5b4fc',
+              display: 'flex', alignItems: 'center', justifyContent: 'center',
+              cursor: 'pointer',
+            }}
+          >
+            <Plus size={15} />
+          </button>
         </div>
-      ) : (
-        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
-          <AnimatePresence mode="popLayout">
-            {active.map(t => {
-              const end = new Date(t.endsAt).getTime()
-              const start = new Date(t.startedAt).getTime()
-              const total = Math.max(1, end - start)
-              const remain = Math.max(0, end - now)
-              const progress = Math.max(0, Math.min(1, 1 - remain / total))
-              const imminent = remain > 0 && remain < 10_000
-              const expired = remain <= 0
-              const time = formatRemaining(remain)
 
-              const accent = expired ? '#f87171' : imminent ? '#fb923c' : '#818cf8'
-              const accentBg = expired
-                ? 'linear-gradient(135deg, rgba(239,68,68,0.12), rgba(239,68,68,0.06))'
-                : imminent
-                ? 'linear-gradient(135deg, rgba(251,146,60,0.12), rgba(251,146,60,0.05))'
-                : 'var(--surface-2)'
+        {active.length === 0 ? (
+          <button
+            onClick={() => setModal({ type: 'create' })}
+            style={{
+              flex: 1, display: 'flex', flexDirection: 'column',
+              alignItems: 'center', justifyContent: 'center',
+              padding: '28px 0 20px', gap: 10,
+              color: 'var(--text-tertiary)',
+              background: 'transparent', border: 'none', cursor: 'pointer',
+            }}
+          >
+            <AlarmClock size={30} style={{ opacity: 0.4 }} />
+            <div style={{ fontSize: 13 }}>Нет активных таймеров</div>
+            <div style={{ fontSize: 11, opacity: 0.7, textAlign: 'center', lineHeight: 1.5 }}>
+              Скажи «поставь таймер на 5 минут»<br />или нажми +
+            </div>
+          </button>
+        ) : (
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
+            <AnimatePresence mode="popLayout">
+              {active.map(t => {
+                const end = new Date(t.endsAt).getTime()
+                const start = new Date(t.startedAt).getTime()
+                const total = Math.max(1, end - start)
+                const remain = Math.max(0, end - now)
+                const progress = Math.max(0, Math.min(1, 1 - remain / total))
+                const imminent = remain > 0 && remain < 10_000
+                const expired = remain <= 0
+                const time = formatRemaining(remain)
 
-              return (
-                <motion.div
-                  key={t.id}
-                  layout
-                  initial={{ opacity: 0, y: 8 }}
-                  animate={{ opacity: 1, y: 0 }}
-                  exit={{ opacity: 0, x: 40 }}
-                  transition={{ duration: 0.25 }}
-                  style={{
-                    position: 'relative', overflow: 'hidden',
-                    padding: '14px 16px', borderRadius: 16,
-                    background: accentBg,
-                    border: `1px solid ${expired || imminent ? accent + '55' : 'var(--border-subtle)'}`,
-                  }}
-                >
-                  {/* Progress fill as bottom bar */}
-                  <div style={{
-                    position: 'absolute', bottom: 0, left: 0,
-                    height: 3, width: `${progress * 100}%`,
-                    background: accent,
-                    transition: 'width 0.5s linear',
-                    opacity: expired ? 0.5 : 1,
-                  }} />
+                const accent = expired ? '#f87171' : imminent ? '#fb923c' : '#818cf8'
+                const accentBg = expired
+                  ? 'linear-gradient(135deg, rgba(239,68,68,0.14), rgba(239,68,68,0.06))'
+                  : imminent
+                  ? 'linear-gradient(135deg, rgba(251,146,60,0.14), rgba(251,146,60,0.06))'
+                  : 'var(--surface-2)'
+
+                return (
+                  <motion.button
+                    key={t.id}
+                    layout
+                    initial={{ opacity: 0, y: 8 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    exit={{ opacity: 0, x: 40 }}
+                    transition={{ duration: 0.25 }}
+                    onClick={() => setModal({ type: 'control', timer: t })}
+                    style={{
+                      position: 'relative', overflow: 'hidden',
+                      padding: '16px 18px', borderRadius: 16,
+                      background: accentBg,
+                      border: `1px solid ${expired || imminent ? accent + '55' : 'var(--border-subtle)'}`,
+                      display: 'flex', alignItems: 'center', gap: 14,
+                      cursor: 'pointer', textAlign: 'left',
+                      minHeight: 68,
+                      width: '100%',
+                    }}
+                  >
+                    <div style={{
+                      position: 'absolute', bottom: 0, left: 0,
+                      height: 3, width: `${progress * 100}%`,
+                      background: accent,
+                      transition: 'width 0.5s linear',
+                      opacity: expired ? 0.5 : 1,
+                    }} />
 
-                  <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
                     {/* Big countdown */}
-                    <div style={{ display: 'flex', alignItems: 'baseline', gap: 2, minWidth: 92 }}>
+                    <div style={{ display: 'flex', alignItems: 'baseline', gap: 2, minWidth: 108 }}>
                       <div style={{
-                        fontSize: 30, fontWeight: 800,
+                        fontSize: 34, fontWeight: 800,
                         color: expired ? accent : 'var(--text-primary)',
                         letterSpacing: '-1.5px', lineHeight: 1,
                         fontVariantNumeric: 'tabular-nums',
@@ -183,7 +214,7 @@ export default function TimerHomeWidget() {
                       </div>
                       {time.small && (
                         <div style={{
-                          fontSize: 14, color: 'var(--text-secondary)',
+                          fontSize: 16, color: 'var(--text-secondary)',
                           fontWeight: 600, fontVariantNumeric: 'tabular-nums',
                         }}>
                           :{time.small}
@@ -194,70 +225,28 @@ export default function TimerHomeWidget() {
                     {/* Label */}
                     <div style={{ flex: 1, minWidth: 0 }}>
                       <div style={{
-                        fontSize: 13, fontWeight: 700,
+                        fontSize: 14, fontWeight: 700,
                         color: 'var(--text-primary)',
                         overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
                       }}>
                         {t.label}
                       </div>
                       <div style={{
-                        fontSize: 10, color: 'var(--text-tertiary)',
+                        fontSize: 11, color: 'var(--text-tertiary)',
                         marginTop: 2,
                       }}>
-                        {expired ? 'прозвенел' : ''}
+                        {expired ? 'прозвенел — тап чтобы закрыть' : 'тап чтобы изменить'}
                       </div>
                     </div>
+                  </motion.button>
+                )
+              })}
+            </AnimatePresence>
+          </div>
+        )}
+      </div>
 
-                    {/* Controls */}
-                    <div style={{ display: 'flex', gap: 4 }}>
-                      <button
-                        onClick={() => callTimer('adjust', { id: t.id, delta_seconds: -60 })}
-                        title="−1 минута"
-                        style={{
-                          width: 30, height: 30, borderRadius: 10,
-                          background: 'var(--surface-3)', border: '1px solid var(--border-subtle)',
-                          color: 'var(--text-secondary)',
-                          display: 'flex', alignItems: 'center', justifyContent: 'center',
-                          cursor: 'pointer',
-                        }}
-                      >
-                        <Minus size={13} />
-                      </button>
-                      <button
-                        onClick={() => callTimer('adjust', { id: t.id, delta_seconds: 60 })}
-                        title="+1 минута"
-                        style={{
-                          width: 30, height: 30, borderRadius: 10,
-                          background: 'var(--surface-3)', border: '1px solid var(--border-subtle)',
-                          color: 'var(--text-secondary)',
-                          display: 'flex', alignItems: 'center', justifyContent: 'center',
-                          cursor: 'pointer',
-                        }}
-                      >
-                        <Plus size={13} />
-                      </button>
-                      <button
-                        onClick={() => callTimer('cancel', { id: t.id })}
-                        title="Отменить"
-                        style={{
-                          width: 30, height: 30, borderRadius: 10,
-                          background: 'rgba(239,68,68,0.12)',
-                          border: '1px solid rgba(239,68,68,0.25)',
-                          color: '#f87171',
-                          display: 'flex', alignItems: 'center', justifyContent: 'center',
-                          cursor: 'pointer',
-                        }}
-                      >
-                        <X size={13} />
-                      </button>
-                    </div>
-                  </div>
-                </motion.div>
-              )
-            })}
-          </AnimatePresence>
-        </div>
-      )}
-    </div>
+      <TimerModal mode={resolvedMode} onClose={() => setModal(null)} />
+    </>
   )
 }

components/TimerModal.tsx

@@ -0,0 +1,397 @@
+'use client'
+import { useEffect, useState } from 'react'
+import { motion, AnimatePresence } from 'framer-motion'
+import { X, AlarmClock, Trash2 } from 'lucide-react'
+
+interface Timer {
+  id: string
+  label: string
+  startedAt: string
+  endsAt: string
+}
+
+type Mode =
+  | { type: 'control'; timer: Timer }
+  | { type: 'create' }
+
+export interface TimerModalProps {
+  mode: Mode | null
+  onClose: () => void
+}
+
+function formatBig(ms: number): string {
+  if (ms <= 0) return '0:00'
+  const total = Math.ceil(ms / 1000)
+  const h = Math.floor(total / 3600)
+  const m = Math.floor((total % 3600) / 60)
+  const s = total % 60
+  if (h > 0) return `${h}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`
+  return `${m}:${s.toString().padStart(2, '0')}`
+}
+
+async function postTimer(body: any) {
+  return fetch('/api/voice/timer', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(body),
+    credentials: 'include',
+  })
+}
+
+const ADJUST_OPTIONS = [
+  { label: '−5 мин', delta: -300 },
+  { label: '−1 мин', delta: -60 },
+  { label: '−10 сек', delta: -10 },
+  { label: '+10 сек', delta: 10 },
+  { label: '+1 мин', delta: 60 },
+  { label: '+5 мин', delta: 300 },
+]
+
+const PRESETS = [
+  { label: '1 мин', seconds: 60 },
+  { label: '3 мин', seconds: 180 },
+  { label: '5 мин', seconds: 300 },
+  { label: '10 мин', seconds: 600 },
+  { label: '15 мин', seconds: 900 },
+  { label: '30 мин', seconds: 1800 },
+  { label: '1 час', seconds: 3600 },
+]
+
+const DEFAULT_LABELS = ['Таймер', 'Чайник', 'Паста', 'Яйца', 'Разогрев', 'Стирка', 'Напомни']
+
+export default function TimerModal({ mode, onClose }: TimerModalProps) {
+  return (
+    <AnimatePresence>
+      {mode && (
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          transition={{ duration: 0.2 }}
+          onClick={onClose}
+          style={{
+            position: 'fixed', inset: 0, zIndex: 250,
+            background: 'rgba(5, 5, 15, 0.72)',
+            backdropFilter: 'blur(18px)',
+            WebkitBackdropFilter: 'blur(18px)' as any,
+            display: 'flex', alignItems: 'center', justifyContent: 'center',
+            padding: 24,
+          }}
+        >
+          <motion.div
+            initial={{ opacity: 0, scale: 0.94, y: 10 }}
+            animate={{ opacity: 1, scale: 1, y: 0 }}
+            exit={{ opacity: 0, scale: 0.96, y: 4 }}
+            transition={{ type: 'spring', stiffness: 360, damping: 30 }}
+            onClick={e => e.stopPropagation()}
+            style={{
+              width: '100%', maxWidth: 520,
+              background: 'var(--surface-1)',
+              border: '1px solid var(--border-subtle)',
+              borderRadius: 28,
+              boxShadow: 'var(--shadow-xl)',
+              padding: 28,
+              display: 'flex', flexDirection: 'column', gap: 22,
+              position: 'relative',
+            }}
+          >
+            <button
+              onClick={onClose}
+              aria-label="Закрыть"
+              style={{
+                position: 'absolute', top: 14, right: 14,
+                width: 38, height: 38, borderRadius: 12,
+                background: 'var(--surface-2)',
+                border: '1px solid var(--border-subtle)',
+                color: 'var(--text-secondary)',
+                display: 'flex', alignItems: 'center', justifyContent: 'center',
+                cursor: 'pointer',
+              }}
+            >
+              <X size={17} />
+            </button>
+
+            {mode.type === 'control' ? (
+              <ControlView timer={mode.timer} onClose={onClose} />
+            ) : (
+              <CreateView onClose={onClose} />
+            )}
+          </motion.div>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  )
+}
+
+function ControlView({ timer, onClose }: { timer: Timer; onClose: () => void }) {
+  const [tick, setTick] = useState(0)
+  useEffect(() => {
+    const t = setInterval(() => setTick(x => x + 1), 500)
+    return () => clearInterval(t)
+  }, [])
+  // tick is just to force re-render
+
+  const now = Date.now()
+  const end = new Date(timer.endsAt).getTime()
+  const start = new Date(timer.startedAt).getTime()
+  const remain = Math.max(0, end - now)
+  const total = Math.max(1, end - start)
+  const progress = Math.max(0, Math.min(1, 1 - remain / total))
+  const expired = remain <= 0
+  const imminent = !expired && remain < 10_000
+
+  const accent = expired ? '#f87171' : imminent ? '#fb923c' : '#818cf8'
+
+  const handleAdjust = (delta: number) => {
+    postTimer({ action: 'adjust', id: timer.id, delta_seconds: delta })
+  }
+  const handleCancel = async () => {
+    await postTimer({ action: 'cancel', id: timer.id })
+    onClose()
+  }
+
+  return (
+    <>
+      {/* Header */}
+      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+        <div style={{
+          width: 40, height: 40, borderRadius: 13,
+          background: `color-mix(in srgb, ${accent} 15%, var(--surface-2))`,
+          border: `1px solid ${accent}44`,
+          display: 'flex', alignItems: 'center', justifyContent: 'center',
+          color: accent, flexShrink: 0,
+        }}>
+          <AlarmClock size={18} />
+        </div>
+        <div style={{ minWidth: 0 }}>
+          <div style={{
+            fontSize: 10, color: 'var(--text-tertiary)', fontWeight: 700,
+            textTransform: 'uppercase', letterSpacing: '0.12em',
+          }}>
+            {expired ? 'Прозвенел' : 'Таймер'}
+          </div>
+          <div style={{
+            fontSize: 17, fontWeight: 700, color: 'var(--text-primary)',
+            overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
+          }}>
+            {timer.label}
+          </div>
+        </div>
+      </div>
+
+      {/* Big countdown */}
+      <div style={{
+        textAlign: 'center',
+        padding: '8px 0',
+      }}>
+        <div style={{
+          fontSize: 84, fontWeight: 800,
+          color: expired ? accent : 'var(--text-primary)',
+          letterSpacing: '-4px', lineHeight: 1,
+          fontVariantNumeric: 'tabular-nums',
+        }}>
+          {formatBig(remain)}
+        </div>
+        {/* Progress track */}
+        <div style={{
+          marginTop: 16, height: 4, borderRadius: 2,
+          background: 'var(--surface-2)', overflow: 'hidden',
+        }}>
+          <div style={{
+            height: '100%', width: `${progress * 100}%`,
+            background: accent,
+            borderRadius: 2,
+            transition: 'width 0.5s linear',
+          }} />
+        </div>
+      </div>
+
+      {/* Adjust grid 3x2 */}
+      {!expired && (
+        <div style={{
+          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10,
+        }}>
+          {ADJUST_OPTIONS.map((opt) => {
+            const negative = opt.delta < 0
+            return (
+              <button
+                key={opt.label}
+                onClick={() => handleAdjust(opt.delta)}
+                style={{
+                  padding: '16px 8px', borderRadius: 16,
+                  background: 'var(--surface-2)',
+                  border: '1px solid var(--border-subtle)',
+                  color: negative ? 'var(--text-secondary)' : 'var(--text-primary)',
+                  fontSize: 15, fontWeight: 700,
+                  cursor: 'pointer',
+                  minHeight: 56,
+                  transition: 'background 0.15s ease, transform 0.1s ease',
+                }}
+                onMouseDown={e => (e.currentTarget.style.transform = 'scale(0.97)')}
+                onMouseUp={e => (e.currentTarget.style.transform = '')}
+                onMouseLeave={e => (e.currentTarget.style.transform = '')}
+              >
+                {opt.label}
+              </button>
+            )
+          })}
+        </div>
+      )}
+
+      {/* Cancel — destructive */}
+      <button
+        onClick={handleCancel}
+        style={{
+          padding: '16px', borderRadius: 16,
+          background: expired
+            ? 'linear-gradient(135deg, rgba(239,68,68,0.22), rgba(239,68,68,0.12))'
+            : 'rgba(239,68,68,0.08)',
+          border: `1px solid rgba(239,68,68,${expired ? 0.4 : 0.2})`,
+          color: expired ? '#fca5a5' : '#f87171',
+          fontSize: 15, fontWeight: 700,
+          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
+          cursor: 'pointer',
+          minHeight: 56,
+        }}
+      >
+        <Trash2 size={16} /> {expired ? 'Остановить' : 'Удалить таймер'}
+      </button>
+    </>
+  )
+}
+
+function CreateView({ onClose }: { onClose: () => void }) {
+  const [seconds, setSeconds] = useState(300) // 5 min default
+  const [label, setLabel] = useState('Таймер')
+  const [submitting, setSubmitting] = useState(false)
+
+  const submit = async () => {
+    if (submitting) return
+    setSubmitting(true)
+    try {
+      await postTimer({
+        action: 'start',
+        seconds,
+        label: (label.trim() || 'Таймер').slice(0, 80),
+        agent: 'cosmo',
+      })
+      onClose()
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  return (
+    <>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+        <div style={{
+          width: 40, height: 40, borderRadius: 13,
+          background: 'color-mix(in srgb, #818cf8 15%, var(--surface-2))',
+          border: '1px solid #818cf844',
+          display: 'flex', alignItems: 'center', justifyContent: 'center',
+          color: '#818cf8', flexShrink: 0,
+        }}>
+          <AlarmClock size={18} />
+        </div>
+        <div>
+          <div style={{
+            fontSize: 10, color: 'var(--text-tertiary)', fontWeight: 700,
+            textTransform: 'uppercase', letterSpacing: '0.12em',
+          }}>
+            Новый таймер
+          </div>
+          <div style={{ fontSize: 17, fontWeight: 700, color: 'var(--text-primary)' }}>
+            Выбери длительность
+          </div>
+        </div>
+      </div>
+
+      {/* Preset grid */}
+      <div style={{
+        display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8,
+      }}>
+        {PRESETS.map(p => {
+          const active = seconds === p.seconds
+          return (
+            <button
+              key={p.seconds}
+              onClick={() => setSeconds(p.seconds)}
+              style={{
+                padding: '14px 4px', borderRadius: 14,
+                background: active ? 'color-mix(in srgb, #818cf8 18%, var(--surface-2))' : 'var(--surface-2)',
+                border: `1px solid ${active ? '#818cf866' : 'var(--border-subtle)'}`,
+                color: active ? '#a5b4fc' : 'var(--text-primary)',
+                fontSize: 14, fontWeight: 700,
+                cursor: 'pointer',
+                minHeight: 52,
+              }}
+            >
+              {p.label}
+            </button>
+          )
+        })}
+      </div>
+
+      {/* Label selector */}
+      <div>
+        <div style={{
+          fontSize: 10, color: 'var(--text-tertiary)', fontWeight: 700,
+          textTransform: 'uppercase', letterSpacing: '0.12em', marginBottom: 8,
+        }}>
+          Название
+        </div>
+        <input
+          value={label}
+          onChange={e => setLabel(e.target.value)}
+          placeholder="Таймер"
+          maxLength={80}
+          style={{
+            width: '100%', padding: '14px 16px', borderRadius: 14,
+            background: 'var(--surface-2)',
+            border: '1px solid var(--border-subtle)',
+            color: 'var(--text-primary)',
+            fontSize: 15, fontFamily: 'inherit', outline: 'none',
+            boxSizing: 'border-box' as any,
+          }}
+        />
+        <div style={{
+          display: 'flex', gap: 6, marginTop: 8, flexWrap: 'wrap',
+        }}>
+          {DEFAULT_LABELS.map(l => (
+            <button
+              key={l}
+              onClick={() => setLabel(l)}
+              style={{
+                padding: '6px 12px', borderRadius: 10,
+                background: label === l ? 'color-mix(in srgb, #818cf8 14%, var(--surface-2))' : 'var(--surface-2)',
+                border: '1px solid var(--border-subtle)',
+                color: label === l ? '#a5b4fc' : 'var(--text-secondary)',
+                fontSize: 12, fontWeight: 600,
+                cursor: 'pointer',
+              }}
+            >
+              {l}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Start button */}
+      <button
+        onClick={submit}
+        disabled={submitting || seconds < 1}
+        style={{
+          padding: '18px', borderRadius: 16,
+          background: 'linear-gradient(135deg, rgba(99,102,241,0.35), rgba(139,92,246,0.28))',
+          border: '1px solid rgba(129,140,248,0.45)',
+          color: '#e0e7ff', fontSize: 16, fontWeight: 800,
+          cursor: submitting ? 'wait' : 'pointer',
+          minHeight: 58, letterSpacing: '-0.2px',
+          boxShadow: '0 8px 24px -8px rgba(99,102,241,0.45)',
+        }}
+      >
+        {submitting ? 'Запускаю...' : `Запустить таймер на ${PRESETS.find(p => p.seconds === seconds)?.label || seconds + ' сек'}`}
+      </button>
+    </>
+  )
+}