babymonitor/frontend/missing_frontend_from_spec.md

Missing Frontend Features — Gaps vs SPEC.md

This file lists things the spec explicitly requires that are not yet implemented in the frontend. It does not duplicate items already in frontend_improvements.md (code quality, performance, testing).

---

1. StatusBanner — Awake State Missing Elapsed Time

Severity: Medium

Spec requirement:

"No active session: 'Baby is awake 👶' with elapsed time since last sleep ended (if known)."

What is currently implemented (src/components/tracker/StatusBanner.tsx:40-50): The awake state renders only "Baby is awake" with the 👶 emoji. There is no elapsed time displayed.

What is missing: A line below "Baby is awake" that shows how long ago the last sleep session ended (e.g. "2h 15m ago"), updating every second. Should only appear "if known" — i.e. when a previous session with an end_time exists.

How to fix:

1. In StatusBanner.tsx, add a second useQuery call using fetchSessions from src/api/client.ts. Pass { limit: 1 } to get only the most recent session. Example:

   import { fetchSessions } from '../../api/client';
   import { useQuery } from '@tanstack/react-query';
   
   const { data: sessionsData } = useQuery({
     queryKey: ['sessions', 'last'],
     queryFn: () => fetchSessions(),  // already exists in api/client.ts
     enabled: !activeSession,         // only fetch when no active session
   });
   const lastEndTime = sessionsData?.sessions?.[0]?.end_time ?? null;
   

2. Add a second elapsed-time state and useEffect that runs only when activeSession is null and lastEndTime is set — mirrors the existing sleeping elapsed-time effect at lines 9-22:

   const [awakeElapsed, setAwakeElapsed] = useState<string>('');
   useEffect(() => {
     if (activeSession || !lastEndTime) { setAwakeElapsed(''); return; }
     const update = () => setAwakeElapsed(formatElapsedTime(lastEndTime));
     update();
     const id = setInterval(update, 1000);
     return () => clearInterval(id);
   }, [activeSession, lastEndTime]);
   

   formatElapsedTime is already imported from ../../utils/time.

3. In the awake JSX (currently lines 40-50), add the elapsed time below the "Baby is awake" text:

   {awakeElapsed && (
     <p className="text-sm text-blue-700 font-mono">({awakeElapsed} ago)</p>
   )}
   

---

2. TimeAdjuster — Does Not Reset to "Now" on Session State Change

Severity: Medium

Spec requirement:

"Resets to 'now' each time the state changes (start → stop or stop → start), but the user can freely edit before confirming."

What is currently implemented (src/components/tracker/TrackerPage.tsx:13):

const [time, setTime] = useState<string>(getLocalTime());

time is set once when the component mounts and never reset. After the user starts or stops a session, the datetime field keeps whatever value it had before.

What is missing: An automatic reset of the datetime input to the current local time whenever the active session state flips (null → session, or session → null).

How to fix:

In TrackerPage.tsx, import useSleepSession and add a useEffect that watches activeSession?.id. When it changes the time resets to "now":

import { useSleepSession } from '../../hooks/useSleepSession';

const TrackerPage: React.FC = () => {
  const getLocalTime = () => { /* existing implementation */ };
  const [time, setTime] = useState<string>(getLocalTime());

  // ADD THIS:
  const { activeSession } = useSleepSession();
  useEffect(() => {
    setTime(getLocalTime());
  }, [activeSession?.id]);   // fires whenever session starts or ends

  // ... rest unchanged

Note: useSleepSession is already used inside SleepButton.tsx (a sibling), so there is no extra network cost — TanStack Query deduplicates the request. getLocalTime is already defined in TrackerPage.tsx:7-11.

---

3. SleepButton — "Stop Sleep" Should Be Amber, Not Rose

Severity: Low

Spec requirement:

"Large button labeled 'Stop Sleep' in a warm amber."

What is currently implemented (src/components/tracker/SleepButton.tsx:31):

'bg-rose-500 text-white hover:bg-rose-600 shadow-rose-200'

The button is red/rose, not amber.

How to fix:

In SleepButton.tsx at the ternary starting on line 28, change the three rose classes to amber:

// Before:
'bg-rose-500 text-white hover:bg-rose-600 shadow-rose-200'

// After:
'bg-amber-500 text-white hover:bg-amber-600 shadow-amber-200'

That is the only change needed in this file.