feat(ui): S7 People + Meetings/To-dos screens

[EyalDelarea]

What

Builds the §5 People (אנשים) and §6 Meetings & To-dos (פגישות ומשימות) screens for the CatchApp redesign — slice S7, UI only. Vanilla JS, no React. Frontend-only; no backend files touched.

The three read endpoints + one write endpoint these screens consume don't exist yet (being built in parallel). The UI is built strictly to the agreed contract and renders a graceful empty state on any 404 / error / empty, never crashing.

Screens

People (§5) — two-pane (list + sticky detail) on desktop, stacks on mobile.

• Rows: per-name tinted initials disc (oklch tint hashed from the name), name + status badge (cold-lead → --warn), next-step note, "קשר אחרון · N שיחות פתוחות".
• Detail: avatar header + status, last-contact / open-threads rows, a "הצעד הבא" card with a source chip → S2 thread jump, and "פתח צ׳אט" / "+ משימה" (the latter intentionally static for this slice).
• Empty state when there are no people.

Meetings & To-dos (§6) — two visually distinct columns (.duo), stack on mobile.

• Meetings: a month calendar (today highlighted, event dots on days with meetings, prev/next month nav) + a day-grouped agenda timeline (rail + dots, time in dir="ltr" mono, owner, source chip).
• To-dos: a checklist with a progress bar (done/total), round checkboxes that toggle optimistically via setTodoDone(id, !done) (revert on failure), source chip + due badge per row.
• No Google-Calendar "connect" banner — that's the constitution-gated S8; this agenda is local-only.

Both reachable via new אנשים / פגישות ומשימות top-bar entries, wired into the existing navigate/popstate/hash state machine (#people, #agenda).

How it's structured (follows existing patterns)

• lib/agenda.js (new, pure + tested): initials, hueFromName, avatarTint, peopleStatusMeta, groupMeetingsByDay, relativeDay, eventDaySet, buildMonthGrid, todoProgress. Date math is over the UTC calendar day so grouping + the month grid are deterministic. Colocated agenda.test.js — 19 cases.
• lib/api.js: getPeople(), getMeetings(from?, to?), getTodos(), setTodoDone(id, done) — mirror the getScopes/putScopes/getToday style (throw on !ok, JSDoc'd shapes). setTodoDone PATCHes same-origin JSON so the CSRF guard passes.
• lib/icons.js: users + target glyphs.
• app.js: fetch-on-entry views with thin DOM + delegated wiring, mirroring renderSources/renderToday.
• styles.css: token vocabulary only, RTL logical properties, numbers/dates dir="ltr", motion gated behind prefers-reduced-motion, two-pane/two-column at ≥900px.

Quality gate

• npm run check ✅ (no fixes)
• npm run typecheck ✅
• npm run build ✅
• npm test ✅ — 1307 passed (144 files), including the 19 new agenda cases

Verify steps (once backend lands, or now against empty states)

1. npm run dev (or make dev), open the web app.
2. Top bar → אנשים: list + detail; click a row to select; click the source chip in "הצעד הבא" → jumps to the cited message thread; "פתח צ׳אט" opens the chat summary.
3. Top bar → פגישות ומשימות: calendar shows today + event dots; prev/next change the month; timeline groups meetings by day; tick a to-do → progress bar moves (optimistic).
4. With endpoints absent today, both screens should show their empty states, not errors.
5. Check RTL, dark mode, and reduced-motion.

Notes / couldn't verify

• The four endpoints don't exist yet (expected) — verification of populated states is deferred to integration. Empty/error paths are exercised today.
• Meeting day grouping is over the UTC calendar day (deterministic, tested), while displayed times use the browser locale. A meeting near a UTC midnight boundary could in theory show under the adjacent local day — fine for this UI-only slice; worth a glance once real data flows.
• "+ משימה" on the People detail is static for this slice (no create-task endpoint in scope).

🤖 Generated with Claude Code