feat(web): garden on the «Сегодня» screen — stages, progress, today's checklist

SVG garden drawn from GET /me/{token}/garden: plants grow one after another
(sprout → stem → bud → flower), «Новый росток N из 10», today's activities,
«Пропуск — не страшно, сад не вянет». A gentle grow-in and a toast when the
garden grew since the last visit — but not right after a crisis reply.
No streaks, no «missed» marks, no red.

Refs #119

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

web/src/api/client.ts

@@ -4,6 +4,7 @@ import type {
   CrisisResource,
   DemoPersona,
   DialogEvent,
+  Garden,
   Focus,
   MedsReference,
   Reply,
@@ -53,6 +54,7 @@ export const api = {
   catalog: () => request<Catalog>("/instruments/catalog"),
   medsReference: () => request<MedsReference>("/meds/reference"),
   today: (token: string) => request<TodayPlan>(`/me/${encodeURIComponent(token)}/today`),
+  garden: (token: string) => request<Garden>(`/me/${encodeURIComponent(token)}/garden`),
   results: (token: string) => request<Results>(`/me/${encodeURIComponent(token)}/results`),
   sendEvent: async (token: string, event: DialogEvent) =>
     (await post<{ replies: Reply[] }>(`/dialog/${encodeURIComponent(token)}/events`, event)).replies,

web/src/api/types.ts

@@ -180,3 +180,16 @@ export interface MedsReference {
     string
   >;
 }
+
+/** GET /me/{token}/garden (#118): grows from activities, never shrinks, ignores answers. */
+export type GardenActivity = "meds" | "diary" | "questionnaire";
+
+export interface Garden {
+  points: number;
+  steps: number;
+  title: string;
+  step_points: number;
+  points_in_step: number;
+  plants: { stage: number }[];
+  today: { activity: GardenActivity; title: string; done: boolean; detail: string | null }[];
+}

web/src/components/Garden.tsx

@@ -0,0 +1,181 @@
+import { useEffect, useRef, useState } from "react";
+
+import { api } from "../api/client";
+import type { Garden as GardenData, GardenActivity } from "../api/types";
+import { ru } from "../content/ru";
+import { useDialog } from "../dialog/DialogContext";
+import { useSession } from "../session/SessionContext";
+import { Icon, type IconName } from "./Icon";
+import { useToast } from "./Toast";
+
+/*
+ * «Ваш сад» (#119, slide 13): every useful activity grows the garden. Without pressure — it never wilts, does not
+ * depend on answers, nobody competes; there are no streaks, no «missed» marks and no red. The numbers come from the
+ * server (#118); this only draws them.
+ */
+
+const FLOWERS = ["#d9604c", "#e9a23b", "#c96f9a", "#e07a3f", "#b9577a", "#d4a02a"];
+const SLOTS = [44, 92, 140, 188, 236, 284];
+const GROUND = 128;
+const ICONS: Record<GardenActivity, IconName> = { meds: "pill", diary: "book", questionnaire: "clipboard" };
+const seenKey = (token: string) => `ptsr.garden.steps.${token}`;
+
+function Plant({ x, stage, color, fresh }: { x: number; stage: number; color: string; fresh: boolean }) {
+  if (stage <= 0) return <ellipse cx={x} cy={GROUND + 1} rx={5} ry={2} fill="#c9b08a" opacity={0.7} />;
+  const h = [0, 18, 38, 54, 62][Math.min(stage, 4)];
+  const top = GROUND - h;
+  return (
+    <g
+      className={fresh ? "garden__plant garden__plant--fresh" : "garden__plant"}
+      style={{ transformOrigin: `${x}px ${GROUND}px` }}
+    >
+      <path
+        d={`M${x} ${GROUND} C ${x - 2} ${GROUND - h / 2}, ${x + 2} ${top + h / 3}, ${x} ${top}`}
+        stroke="#4f7d5a"
+        strokeWidth={2.4}
+        fill="none"
+        strokeLinecap="round"
+      />
+      <path d={`M${x} ${GROUND - h * 0.35} q -11 -3 -13 -11 q 10 0 13 9`} fill="#6f9c6a" />
+      {stage >= 2 && <path d={`M${x} ${GROUND - h * 0.6} q 11 -3 13 -11 q -10 0 -13 9`} fill="#6f9c6a" />}
+      {stage === 1 && <path d={`M${x} ${top + 2} q 8 -4 9 -10 q -8 1 -9 8`} fill="#7fae74" />}
+      {stage === 3 && <ellipse cx={x} cy={top - 3} rx={4.5} ry={7} fill={color} />}
+      {stage >= 4 && (
+        <g>
+          {[0, 72, 144, 216, 288].map((a) => (
+            <ellipse key={a} cx={x} cy={top - 8} rx={4.6} ry={8} fill={color} transform={`rotate(${a} ${x} ${top})`} />
+          ))}
+          <circle cx={x} cy={top} r={4.2} fill="#f6d36b" />
+        </g>
+      )}
+    </g>
+  );
+}
+
+export function Garden({ refreshKey }: { refreshKey?: unknown }) {
+  const { session } = useSession();
+  const dialog = useDialog();
+  const toast = useToast();
+  const [garden, setGarden] = useState<GardenData | null>(null);
+  const [freshFrom, setFreshFrom] = useState<number | null>(null);
+  const announced = useRef(false);
+
+  useEffect(() => {
+    if (!session) return;
+    let alive = true;
+    api
+      .garden(session.token)
+      .then((g) => {
+        if (!alive) return;
+        setGarden(g);
+        const raw = window.localStorage.getItem(seenKey(session.token));
+        const seen = raw === null ? null : Number(raw);
+        // No celebration right after a crisis: growth stays, the toast and the animation do not.
+        const recentCrisis = dialog.entries.slice(-12).some((e) => e.from === "assistant" && e.reply.kind === "crisis");
+        if (seen !== null && g.steps > seen && !recentCrisis) {
+          setFreshFrom(seen);
+          if (!announced.current) toast(ru.garden.grew);
+          announced.current = true;
+        }
+        window.localStorage.setItem(seenKey(session.token), String(g.steps));
+      })
+      .catch(() => undefined);
+    return () => {
+      alive = false;
+    };
+  }, [session, refreshKey]);
+
+  if (!garden) return null;
+  const t = ru.garden;
+  const perPlant = 4;
+  const bloom = garden.plants.filter((p) => p.stage >= perPlant).length;
+  const growing = garden.plants.filter((p) => p.stage > 0 && p.stage < perPlant).length;
+  const share = garden.points_in_step / garden.step_points;
+
+  return (
+    <section className="card garden" aria-labelledby="garden-title">
+      <div>
+        <p className="garden__eyebrow">{t.eyebrow}</p>
+        <h2 id="garden-title" className="h3">
+          {t.lead}
+        </h2>
+      </div>
+      <svg
+        className="garden__scene"
+        viewBox="0 0 328 150"
+        role="img"
+        aria-label={t.label(garden.title, bloom, growing)}
+      >
+        <defs>
+          <linearGradient id="garden-sky" x1="0" y1="0" x2="0" y2="1">
+            <stop offset="0" stopColor="#eef3ea" />
+            <stop offset="1" stopColor="#f7f3ea" />
+          </linearGradient>
+        </defs>
+        <rect width="328" height="150" rx="12" fill="url(#garden-sky)" />
+        <circle cx="282" cy="36" r="17" fill="#f2cc72" opacity={0.9} />
+        <path
+          d={`M0 ${GROUND + 4} Q 90 ${GROUND - 8} 170 ${GROUND + 2} T 328 ${GROUND - 2} V150 H0 Z`}
+          fill="#e5d3b0"
+        />
+        <path
+          d={`M0 ${GROUND + 12} Q 110 ${GROUND + 2} 210 ${GROUND + 12} T 328 ${GROUND + 8} V150 H0 Z`}
+          fill="#dcc59c"
+        />
+        {garden.plants.map((p, i) => {
+          // The plant that just grew (its stage covers steps after the last seen count) gets a gentle grow-in.
+          const fresh =
+            freshFrom !== null && garden.steps > freshFrom && Math.floor((garden.steps - 1) / perPlant) === i;
+          return (
+            <Plant
+              key={i}
+              x={SLOTS[i % SLOTS.length]}
+              stage={p.stage}
+              color={FLOWERS[i % FLOWERS.length]}
+              fresh={fresh}
+            />
+          );
+        })}
+      </svg>
+      <p className="garden__title">{garden.title}</p>
+      <div className="garden__progress">
+        <div className="garden__progress-head">
+          <span>{t.next}</span>
+          <span className="muted small">{t.of(garden.points_in_step, garden.step_points)}</span>
+        </div>
+        <div
+          className="garden__bar"
+          role="progressbar"
+          aria-valuemin={0}
+          aria-valuemax={garden.step_points}
+          aria-valuenow={garden.points_in_step}
+          aria-label={t.next}
+        >
+          <span style={{ width: `${Math.round(share * 100)}%` }} />
+        </div>
+      </div>
+      {garden.today.length > 0 && (
+        <ul className="garden__today" aria-label={t.today}>
+          {garden.today.map((item) => (
+            <li key={item.activity} className="garden__item">
+              <span className="garden__icon" aria-hidden="true">
+                <Icon name={ICONS[item.activity]} size={16} />
+              </span>
+              <span className="garden__item-text">
+                {item.title}
+                {item.detail && <span className="muted small"> · {item.detail}</span>}
+              </span>
+              <span
+                className={item.done ? "garden__check garden__check--done" : "garden__check"}
+                aria-label={item.done ? "сделано" : "ещё нет"}
+              >
+                {item.done && <Icon name="check" size={14} />}
+              </span>
+            </li>
+          ))}
+        </ul>
+      )}
+      <p className="garden__note">{t.noPressure}</p>
+    </section>
+  );
+}

web/src/content/ru.ts

@@ -86,6 +86,17 @@ export const ru = {
     unavailable: "Первичный опрос сейчас отключён на сервере. Кабинет и подключение врача доступны без личных данных.",
     submitting: "Создаём профиль…",
   },
+  garden: {
+    eyebrow: "Ваш сад",
+    lead: "Растёт вместе с вами",
+    next: "Новый росток",
+    of: (a: number, b: number) => `${a} из ${b}`,
+    today: "Сегодня",
+    noPressure: "Пропуск — не страшно, сад не вянет",
+    grew: "Сад подрос — появился новый росток",
+    label: (title: string, bloom: number, growing: number) =>
+      `${title}. Цветов: ${bloom}, растёт: ${growing}.`,
+  },
   today: {
     title: "Сегодня",
     takeMed: "Принять лекарство",

web/src/screens/Today.tsx

@@ -2,6 +2,7 @@ import { useNavigate } from "react-router-dom";
 
 import type { TodayDose, TodayPrescription } from "../api/types";
 import { AppShell, Notice } from "../components/AppShell";
+import { Garden } from "../components/Garden";
 import { Icon, type IconName } from "../components/Icon";
 import { useCatalog } from "../content/reference";
 import { ru } from "../content/ru";
@@ -253,6 +254,7 @@ export function Today() {
             </div>
           )}
 
+          <Garden refreshKey={dialog.pending} />
         </section>
 
         <section className="dash__side">

web/src/theme/global.css

@@ -1566,6 +1566,131 @@ button.row-card:hover:not(:disabled) {
   color: var(--c-text-3);
 }
 
+/* ---------------------------------------------------------------- garden (#119, slide 13) */
+
+.garden {
+  gap: var(--s-3);
+}
+
+.garden__eyebrow {
+  margin: 0 0 2px;
+  font-size: var(--fs-12);
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--c-teal-strong);
+}
+
+.garden__scene {
+  display: block;
+  width: 100%;
+  height: auto;
+  max-height: 190px;
+}
+
+.garden__plant--fresh {
+  animation: garden-grow 1100ms var(--ease) both;
+}
+
+@keyframes garden-grow {
+  from {
+    transform: scaleY(0.2);
+    opacity: 0.3;
+  }
+  to {
+    transform: scaleY(1);
+    opacity: 1;
+  }
+}
+
+.garden__title {
+  margin: 0;
+  font-weight: 600;
+  color: var(--c-text);
+}
+
+.garden__progress {
+  display: grid;
+  gap: var(--s-2);
+  padding: var(--s-3);
+  border-radius: var(--r-btn);
+  background: var(--c-tile);
+}
+
+.garden__progress-head {
+  display: flex;
+  justify-content: space-between;
+  font-weight: 600;
+  font-size: var(--fs-14);
+}
+
+.garden__bar {
+  height: 8px;
+  border-radius: 999px;
+  background: var(--c-border);
+  overflow: hidden;
+}
+
+.garden__bar span {
+  display: block;
+  height: 100%;
+  border-radius: inherit;
+  background: var(--c-primary);
+  transition: width 600ms var(--ease);
+}
+
+.garden__today {
+  display: grid;
+  gap: var(--s-2);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.garden__item {
+  display: flex;
+  align-items: center;
+  gap: var(--s-3);
+  font-size: var(--fs-14);
+}
+
+.garden__icon {
+  flex: none;
+  width: 32px;
+  height: 32px;
+  display: grid;
+  place-items: center;
+  border-radius: var(--r-btn);
+  background: var(--c-teal-soft);
+  color: var(--c-teal-strong);
+}
+
+.garden__item-text {
+  flex: 1;
+}
+
+.garden__check {
+  width: 24px;
+  height: 24px;
+  display: grid;
+  place-items: center;
+  border: 1.5px solid var(--c-border-strong);
+  border-radius: 50%;
+  color: #fff;
+}
+
+.garden__check--done {
+  border-color: var(--c-primary);
+  background: var(--c-primary);
+}
+
+.garden__note {
+  margin: 0;
+  text-align: center;
+  font-size: var(--fs-12);
+  color: var(--c-text-3);
+}
+
 /* ---------------------------------------------------------------- emergency */
 
 .sosblock {