# 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.