feat: replace calendar day modal with dedicated day-view page

Calendar day clicks now navigate to /experiments/:id/day/:date
(with ?field= param). ExperimentDayView shows a sticky-column table
of all subjects with data that day, inline edit via modal, and a
session-metrics bar chart from analysis_summary. Subject name links
to /daily-statuses/:id. Backend adds ?date= filtering to
GET /experiments/:id/daily-statuses.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/App.jsx

@@ -5,6 +5,7 @@ import Dashboard from './pages/Dashboard';
 import ExperimentDetail from './pages/ExperimentDetail';
 import AnimalDetail from './pages/AnimalDetail';
 import DailyStatusDetail from './pages/DailyStatusDetail';
+import ExperimentDayView from './pages/ExperimentDayView';
 
 function Navbar() {
   return (
@@ -57,6 +58,7 @@ export default function App() {
         <Routes>
           <Route path="/" element={<Dashboard />} />
           <Route path="/experiments/:id" element={<ExperimentDetail />} />
+          <Route path="/experiments/:id/day/:date" element={<ExperimentDayView />} />
           <Route path="/animals/:id" element={<AnimalDetail />} />
           <Route path="/daily-statuses/:id" element={<DailyStatusDetail />} />
           <Route path="*" element={<NotFound />} />

frontend/src/api/client.js

@@ -34,6 +34,7 @@ export const experimentsApi = {
   getSubjectTemplate: (id) => api.get(`/experiments/${id}/subject-template`).then((r) => r.data),
   updateSubjectTemplate: (id, template) => api.put(`/experiments/${id}/subject-template`, template).then((r) => r.data),
   getDailyStatuses: (id) => api.get(`/experiments/${id}/daily-statuses`).then((r) => r.data),
+  getDayStatuses: (id, date) => api.get(`/experiments/${id}/daily-statuses`, { params: { date } }).then((r) => r.data),
   getCalendar: (id, field) => api.get(`/experiments/${id}/calendar`, { params: { field } }).then((r) => r.data),
 };
 

frontend/src/components/ExperimentCalendar.jsx

@@ -3,152 +3,15 @@ import {
   format, startOfMonth, endOfMonth, eachDayOfInterval,
   getDay, addMonths, subMonths,
 } from 'date-fns';
-import {
-  ResponsiveContainer, BarChart, Bar, XAxis, YAxis,
-  CartesianGrid, Tooltip, Legend,
-} from 'recharts';
-import { experimentsApi } from '../api/client';
-import Modal from './ui/Modal';
-import DailyStatusForm from './DailyStatusForm';
+import { useNavigate } from 'react-router-dom';
 
 const BUILTIN_KEYS_SET = new Set(['experiment_description', 'vitals', 'treatment', 'notes']);
 
-function SubjectReadOnly({ status, template }) {
-  const activeFields = template.filter((f) => f.active);
-  function getVal(s, f) {
-    if (f.builtin) return s[f.key];
-    return s.custom_fields?.[f.fieldId];
-  }
-  const nonEmpty = activeFields.filter((f) => {
-    const v = getVal(status, f);
-    return v !== null && v !== undefined && String(v).trim() !== '';
-  });
-  if (nonEmpty.length === 0) return <p className="text-xs text-gray-400">No field values recorded.</p>;
-  return (
-    <div className="grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-1">
-      {nonEmpty.map((f) => (
-        <div key={f.fieldId ?? f.key} className="text-sm">
-          <span className="text-gray-500 font-medium">{f.label}:</span>{' '}
-          <span className="text-gray-900 whitespace-pre-wrap">{String(getVal(status, f))}</span>
-        </div>
-      ))}
-    </div>
-  );
-}
-
-function DayPanel({ date, animals, allStatuses, template, experimentId, selectedField, fieldOptions, onStatusChange, onStatusCreate }) {
-  const dateStr = format(date, 'yyyy-MM-dd');
-  const [editingAnimalId, setEditingAnimalId] = useState(null);
-
-  const statusByAnimal = useMemo(() => {
-    const map = {};
-    allStatuses.forEach((s) => {
-      if (s.date.slice(0, 10) === dateStr) map[s.animal_id] = s;
-    });
-    return map;
-  }, [allStatuses, dateStr]);
-
-  // Only show animals that have a status record for this day WITH a non-empty selected field
-  const animalsWithData = animals.filter((a) => {
-    const s = statusByAnimal[a.id];
-    if (!s) return false;
-    if (!selectedField) return true;
-    const isBuiltin = BUILTIN_KEYS_SET.has(selectedField);
-    const val = isBuiltin ? s[selectedField] : s.custom_fields?.[selectedField];
-    return val !== null && val !== undefined && String(val).trim() !== '';
-  });
-
-  const fieldLabel = fieldOptions.find((f) => f.value === selectedField)?.label;
-
-  // Bar chart: animals with analysis_summary on this day → Success/Failure/Total from that summary
-  const barData = useMemo(() => {
-    return animalsWithData
-      .map((animal) => {
-        const status = statusByAnimal[animal.id];
-        const summary = status?.analysis_summary;
-        if (!summary || summary.total === 0) return null;
-        return {
-          name: animal.animal_name || animal.animal_id_string || animal.id.slice(0, 8),
-          total: summary.total,
-          success: summary.counts?.Success ?? 0,
-          failure: summary.counts?.Failure ?? 0,
-        };
-      })
-      .filter(Boolean);
-  }, [animalsWithData, statusByAnimal]);
-
-  return (
-    <div className="space-y-3 max-h-[80vh] overflow-y-auto pr-1">
-      {animalsWithData.length === 0 && (
-        <p className="text-gray-400 text-sm py-2">No data recorded for this day.</p>
-      )}
-      {/* Per-animal data for this day */}
-      {animalsWithData.map((animal) => {
-        const existing = statusByAnimal[animal.id];
-        const isEditing = editingAnimalId === animal.id;
-        return (
-          <div key={animal.id} className="bg-gray-50 rounded-xl p-4 border border-gray-100">
-            <div className="flex items-center justify-between mb-2">
-              <div className="font-semibold text-gray-900 text-sm">
-                {animal.animal_name ?? 'Unknown subject'}
-                {animal.animal_id_string && (
-                  <span className="ml-2 text-gray-400 font-normal">· {animal.animal_id_string}</span>
-                )}
-              </div>
-              {!isEditing && (
-                <button
-                  type="button"
-                  onClick={() => setEditingAnimalId(animal.id)}
-                  className="text-xs text-blue-600 hover:text-blue-800 border border-blue-200 rounded px-2 py-0.5 hover:bg-blue-50 transition-colors"
-                >
-                  Edit
-                </button>
-              )}
-            </div>
-            {isEditing ? (
-              <DailyStatusForm
-                animalId={animal.id}
-                experimentId={experimentId}
-                template={template}
-                existing={{ ...existing, date: dateStr }}
-                onSuccess={(saved) => { onStatusChange(saved); setEditingAnimalId(null); }}
-                onCancel={() => setEditingAnimalId(null)}
-              />
-            ) : (
-              <SubjectReadOnly status={existing} template={template} />
-            )}
-          </div>
-        );
-      })}
-
-      {/* Bar chart: overall per-subject completeness */}
-      {barData.length > 0 && (
-        <div className="mt-4 pt-4 border-t border-gray-100">
-          <h4 className="text-sm font-semibold text-gray-700 mb-3">Session metrics</h4>
-          <ResponsiveContainer width="100%" height={200}>
-            <BarChart data={barData} margin={{ top: 4, right: 16, left: 0, bottom: 4 }}>
-              <CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
-              <XAxis dataKey="name" tick={{ fontSize: 11 }} />
-              <YAxis tick={{ fontSize: 11 }} />
-              <Tooltip />
-              <Legend wrapperStyle={{ fontSize: 11 }} />
-              <Bar dataKey="total" name="Total" fill="#94a3b8" radius={[3, 3, 0, 0]} />
-              <Bar dataKey="success" name="Success" fill="#22c55e" radius={[3, 3, 0, 0]} />
-              <Bar dataKey="failure" name="Failure" fill="#f87171" radius={[3, 3, 0, 0]} minPointSize={2} />
-            </BarChart>
-          </ResponsiveContainer>
-        </div>
-      )}
-    </div>
-  );
-}
-
-export default function ExperimentCalendar({ experimentId, template, allStatuses, animals, onStatusChange, onStatusCreate }) {
+export default function ExperimentCalendar({ experimentId, template, allStatuses }) {
+  const navigate = useNavigate();
   const [currentMonth, setCurrentMonth] = useState(() => new Date());
   const [selectedField, setSelectedField] = useState(null);
   const [calendarDays, setCalendarDays] = useState({});
-  const [loading, setLoading] = useState(false);
-  const [selectedDate, setSelectedDate] = useState(null);
 
   const fieldOptions = useMemo(
     () => template.filter((f) => f.active).map((f) => ({ value: f.builtin ? f.key : f.fieldId, label: f.label })),
@@ -196,7 +59,6 @@ export default function ExperimentCalendar({ experimentId, template, allStatuses
           {fieldOptions.map((f) => <option key={f.value} value={f.value}>{f.label}</option>)}
           {fieldOptions.length === 0 && <option value="">No fields configured</option>}
         </select>
-        {loading && <span className="text-xs text-gray-400" aria-live="polite">Loading...</span>}
       </div>
 
       <div className="flex items-center justify-between mb-4">
@@ -224,7 +86,7 @@ export default function ExperimentCalendar({ experimentId, template, allStatuses
               key={dateStr}
               data-testid={`day-${dateStr}`}
               disabled={!hasData}
-              onClick={() => setSelectedDate(day)}
+              onClick={() => navigate(`/experiments/${experimentId}/day/${dateStr}${selectedField ? `?field=${selectedField}` : ''}`)}
               className={[
                 'relative flex flex-col items-center justify-center rounded-lg py-1.5 min-h-[2.75rem] text-sm select-none transition-all',
                 hasData ? 'bg-blue-50 border border-blue-200 hover:bg-blue-100 cursor-pointer' : 'text-gray-300 cursor-default',
@@ -238,22 +100,6 @@ export default function ExperimentCalendar({ experimentId, template, allStatuses
           );
         })}
       </div>
-
-      {selectedDate && (
-        <Modal isOpen={!!selectedDate} onClose={() => setSelectedDate(null)} title={format(selectedDate, 'MMMM d, yyyy')} size="lg">
-          <DayPanel
-            date={selectedDate}
-            animals={animals}
-            allStatuses={allStatuses}
-            template={template}
-            experimentId={experimentId}
-            selectedField={selectedField}
-            fieldOptions={fieldOptions}
-            onStatusChange={(updated) => { onStatusChange?.(updated); setSelectedDate(null); }}
-            onStatusCreate={(created) => { onStatusCreate?.(created); setSelectedDate(null); }}
-          />
-        </Modal>
-      )}
     </div>
   );
 }

frontend/src/pages/ExperimentDayView.jsx

@@ -0,0 +1,253 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { useParams, useNavigate, useSearchParams, Link } from 'react-router-dom';
+import { format } from 'date-fns';
+import {
+  ResponsiveContainer, BarChart, Bar, XAxis, YAxis,
+  CartesianGrid, Tooltip, Legend,
+} from 'recharts';
+import { experimentsApi } from '../api/client';
+import Button from '../components/ui/Button';
+import Modal from '../components/ui/Modal';
+import DailyStatusForm from '../components/DailyStatusForm';
+import Alert from '../components/ui/Alert';
+
+const BUILTIN_KEYS_SET = new Set(['experiment_description', 'vitals', 'treatment', 'notes']);
+
+function getFieldValue(status, field) {
+  if (field.builtin) return status[field.key];
+  return status.custom_fields?.[field.fieldId];
+}
+
+function cellText(value) {
+  if (value === null || value === undefined || String(value).trim() === '') return null;
+  return String(value);
+}
+
+export default function ExperimentDayView() {
+  const { id, date } = useParams();          // id = experimentId, date = YYYY-MM-DD
+  const [searchParams] = useSearchParams();
+  const navigate = useNavigate();
+
+  const [experiment, setExperiment] = useState(null);
+  const [statuses, setStatuses] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [editStatus, setEditStatus] = useState(null);
+
+  useEffect(() => {
+    setLoading(true);
+    Promise.all([
+      experimentsApi.get(id),
+      experimentsApi.getDayStatuses(id, date),
+    ])
+      .then(([exp, s]) => {
+        setExperiment(exp);
+        setStatuses(s);
+      })
+      .catch((err) => setError(err.message ?? 'Failed to load'))
+      .finally(() => setLoading(false));
+  }, [id, date]);
+
+  const dailyTemplate = useMemo(() => {
+    if (!experiment) return [];
+    const t = experiment.template ?? [];
+    return t.filter((f) => f.active);
+  }, [experiment]);
+
+  const animals = useMemo(() => experiment?.animals ?? [], [experiment]);
+
+  // Selected field from URL (passed by calendar). Used to filter which rows show.
+  const selectedField = searchParams.get('field') ?? null;
+
+  // Build map: animal_id → status for this day
+  const statusByAnimal = useMemo(() => {
+    const map = {};
+    statuses.forEach((s) => { map[s.animal_id] = s; });
+    return map;
+  }, [statuses]);
+
+  // Rows: animals with a valid (non-empty) value for the selected field, or all if no field filter
+  const rows = useMemo(() => {
+    return animals
+      .map((animal) => ({ animal, status: statusByAnimal[animal.id] }))
+      .filter(({ status }) => {
+        if (!status) return false;
+        if (!selectedField) return true;
+        const isBuiltin = BUILTIN_KEYS_SET.has(selectedField);
+        const val = isBuiltin ? status[selectedField] : status.custom_fields?.[selectedField];
+        return val !== null && val !== undefined && String(val).trim() !== '';
+      });
+  }, [animals, statusByAnimal, selectedField]);
+
+  // Bar chart: analysis_summary from each row's status (same contract as calendar modal)
+  const barData = useMemo(() => {
+    return rows
+      .map(({ animal, status }) => {
+        const summary = status?.analysis_summary;
+        if (!summary || summary.total === 0) return null;
+        return {
+          name: animal.animal_name || animal.animal_id_string || animal.id.slice(0, 8),
+          total: summary.total,
+          success: summary.counts?.Success ?? 0,
+          failure: summary.counts?.Failure ?? 0,
+        };
+      })
+      .filter(Boolean);
+  }, [rows]);
+
+  const displayDate = date
+    ? format(new Date(date + 'T12:00:00'), 'MMMM d, yyyy')
+    : date;
+
+  if (loading) {
+    return (
+      <div className="max-w-5xl mx-auto px-4 py-10 text-center text-gray-400">Loading…</div>
+    );
+  }
+  if (error) {
+    return (
+      <div className="max-w-5xl mx-auto px-4 py-10">
+        <Alert type="error" message={error} />
+      </div>
+    );
+  }
+
+  return (
+    <div className="max-w-6xl mx-auto px-4 py-6">
+      {/* Breadcrumb */}
+      <nav className="text-sm text-gray-400 mb-4 flex items-center gap-1.5">
+        <Link to="/" className="hover:text-blue-600 transition-colors">Dashboard</Link>
+        <span>/</span>
+        <Link to={`/experiments/${id}`} className="hover:text-blue-600 transition-colors">
+          {experiment?.title ?? id}
+        </Link>
+        <span>/</span>
+        <span className="text-gray-700 font-medium">{displayDate}</span>
+      </nav>
+
+      <div className="flex items-center justify-between mb-6">
+        <h1 className="text-xl font-bold text-gray-900">{displayDate}</h1>
+        <Button variant="secondary" onClick={() => navigate(`/experiments/${id}`)}>
+          ← Back to experiment
+        </Button>
+      </div>
+
+      {/* Status table */}
+      {rows.length === 0 ? (
+        <div className="text-center py-16 border-2 border-dashed border-gray-200 rounded-xl text-gray-400">
+          No data recorded for this day.
+        </div>
+      ) : (
+        <div className="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden mb-8">
+          <div className="overflow-x-auto">
+            <table className="text-sm border-collapse min-w-full">
+              <thead>
+                <tr className="bg-gray-50 border-b border-gray-200">
+                  <th className="text-left px-3 py-2 text-xs font-semibold text-gray-500 uppercase tracking-wide whitespace-nowrap sticky left-0 bg-gray-50 z-10 border-r border-gray-200 min-w-[140px]">
+                    Subject
+                  </th>
+                  {dailyTemplate.map((f) => {
+                    const header = f.abbr
+                      ? (f.unit ? `${f.abbr} (${f.unit})` : f.abbr)
+                      : (f.unit ? `${f.label} (${f.unit})` : f.label);
+                    return (
+                      <th
+                        key={f.fieldId}
+                        title={f.unit ? `${f.label} (${f.unit})` : f.label}
+                        className="text-left px-3 py-2 text-xs font-semibold text-gray-500 uppercase tracking-wide whitespace-nowrap max-w-[220px]"
+                        style={{ minWidth: Math.max(80, header.length * 7.5 + 24) }}
+                      >
+                        {header}
+                      </th>
+                    );
+                  })}
+                  <th className="sticky right-0 bg-gray-50 z-10 border-l border-gray-200 px-3 py-2 min-w-[80px]" />
+                </tr>
+              </thead>
+              <tbody>
+                {rows.map(({ animal, status }, i) => {
+                  const rowBg = i % 2 === 0 ? 'bg-white' : 'bg-gray-50/40';
+                  return (
+                    <tr key={animal.id} className={`border-b border-gray-100 last:border-0 ${rowBg}`}>
+                      {/* Subject name → daily status detail */}
+                      <td
+                        className={`px-3 py-2 font-medium whitespace-nowrap sticky left-0 z-10 border-r border-gray-100 ${rowBg} ${
+                          status
+                            ? 'text-blue-600 cursor-pointer hover:text-blue-800 hover:bg-blue-50/40 transition-colors'
+                            : 'text-gray-500'
+                        }`}
+                        onClick={() => status && navigate(`/daily-statuses/${status.id}`)}
+                      >
+                        {animal.animal_name ?? animal.animal_id_string ?? animal.id.slice(0, 8)}
+                        {animal.animal_id_string && animal.animal_name && (
+                          <span className="ml-1.5 text-xs text-gray-400 font-normal">
+                            {animal.animal_id_string}
+                          </span>
+                        )}
+                      </td>
+                      {dailyTemplate.map((f) => (
+                        <td key={f.fieldId} className="px-3 py-1.5 text-gray-700 max-w-[220px] align-top">
+                          <span className="whitespace-pre-wrap break-words">
+                            {status ? (cellText(getFieldValue(status, f)) ?? <span className="text-gray-300">—</span>) : <span className="text-gray-300">—</span>}
+                          </span>
+                        </td>
+                      ))}
+                      <td className={`px-2 py-1.5 sticky right-0 z-10 border-l border-gray-100 ${rowBg}`}>
+                        {status && (
+                          <Button size="sm" variant="secondary" onClick={() => setEditStatus(status)}>
+                            Edit
+                          </Button>
+                        )}
+                      </td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      )}
+
+      {/* Session metrics bar chart */}
+      {barData.length > 0 && (
+        <div className="bg-white rounded-xl border border-gray-200 shadow-sm p-5">
+          <h3 className="text-sm font-semibold text-gray-700 mb-3">Session metrics</h3>
+          <ResponsiveContainer width="100%" height={220}>
+            <BarChart data={barData} margin={{ top: 4, right: 16, left: 0, bottom: 4 }}>
+              <CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
+              <XAxis dataKey="name" tick={{ fontSize: 11 }} />
+              <YAxis tick={{ fontSize: 11 }} allowDecimals={false} />
+              <Tooltip />
+              <Legend wrapperStyle={{ fontSize: 11 }} />
+              <Bar dataKey="total" name="Total" fill="#94a3b8" radius={[3, 3, 0, 0]} />
+              <Bar dataKey="success" name="Success" fill="#22c55e" radius={[3, 3, 0, 0]} />
+              <Bar dataKey="failure" name="Failure" fill="#f87171" radius={[3, 3, 0, 0]} minPointSize={2} />
+            </BarChart>
+          </ResponsiveContainer>
+        </div>
+      )}
+
+      {/* Edit modal */}
+      {editStatus && (
+        <Modal
+          isOpen={!!editStatus}
+          onClose={() => setEditStatus(null)}
+          title="Edit daily status"
+          size="lg"
+        >
+          <DailyStatusForm
+            existing={editStatus}
+            animalId={editStatus.animal_id}
+            experimentId={id}
+            template={dailyTemplate}
+            onSuccess={(updated) => {
+              setStatuses((prev) => prev.map((s) => s.id === updated.id ? updated : s));
+              setEditStatus(null);
+            }}
+            onCancel={() => setEditStatus(null)}
+          />
+        </Modal>
+      )}
+    </div>
+  );
+}

frontend/src/pages/ExperimentDetail.jsx

@@ -372,15 +372,6 @@ export default function ExperimentDetail() {
           experimentId={id}
           template={dailyTemplate}
           allStatuses={experimentStatuses}
-          animals={animals}
-          onStatusChange={(updated) => {
-            setExperimentStatuses((prev) =>
-              prev.map((s) => (s.id === updated.id ? updated : s))
-            );
-          }}
-          onStatusCreate={(created) => {
-            setExperimentStatuses((prev) => [...prev, created]);
-          }}
         />
       )}