Slop cleanup

frontend/missing_frontend_from_spec.md

@@ -0,0 +1,122 @@
+# 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:
+   ```ts
+   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:
+   ```ts
+   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:
+   ```tsx
+   {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`):
+```ts
+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":
+
+```ts
+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`):
+```ts
+'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:
+
+```ts
+// 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.