From 95f2db371209bc4a8552ba1fdde60d860e8c23e6 Mon Sep 17 00:00:00 2001
From: Shuhao <shuhao.qgg.zhang@gmail.com>
Date: Sat, 14 Nov 2026 20:18:28 -0500
Subject: [PATCH 1/3] refactor(zoom-app): lift the Agenda, Report and rules
 logic into hooks

useAgendaEditor, useReportView and useRulesEditor hold what AgendaTab,
ReportTab and EditRulesModal did, moved unchanged (their JSX is byte-for-byte
the same and their tests pass as written). Design B's views call the same
hooks.
---
 apps/zoom-app/src/components/AgendaTab.jsx    | 268 +++-----------
 .../src/components/EditRulesModal.jsx         | 348 ++----------------
 apps/zoom-app/src/components/ReportTab.jsx    | 174 ++-------
 apps/zoom-app/src/hooks/useAgendaEditor.js    | 274 ++++++++++++++
 apps/zoom-app/src/hooks/useReportView.js      | 189 ++++++++++
 apps/zoom-app/src/hooks/useRulesEditor.js     | 346 +++++++++++++++++
 6 files changed, 921 insertions(+), 678 deletions(-)
 create mode 100644 apps/zoom-app/src/hooks/useAgendaEditor.js
 create mode 100644 apps/zoom-app/src/hooks/useReportView.js
 create mode 100644 apps/zoom-app/src/hooks/useRulesEditor.js

diff --git a/apps/zoom-app/src/components/AgendaTab.jsx b/apps/zoom-app/src/components/AgendaTab.jsx
index 56a6cd4..ea6ff42 100644
--- a/apps/zoom-app/src/components/AgendaTab.jsx
+++ b/apps/zoom-app/src/components/AgendaTab.jsx
@@ -1,27 +1,12 @@
-import { useState, memo } from 'react';
-import { useTimer } from '../context/TimerContext';
-import { useToast } from '../context/ToastContext';
+import { memo } from 'react';
 import { Plus, Upload, X, Edit2, Trash2, GripVertical, Check, AlertTriangle } from 'lucide-react';
 import ConfirmModal from './ConfirmModal';
-import { trackEvent } from '../utils/posthog';
-import {
-  DndContext,
-  closestCenter,
-  KeyboardSensor,
-  PointerSensor,
-  useSensor,
-  useSensors,
-} from '@dnd-kit/core';
-import {
-  arrayMove,
-  SortableContext,
-  sortableKeyboardCoordinates,
-  useSortable,
-  verticalListSortingStrategy,
-} from '@dnd-kit/sortable';
+import { DndContext, closestCenter } from '@dnd-kit/core';
+import { SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
-import { DEFAULT_ROLE_RULES, DEFAULT_CUSTOM_RULES, loadTimeInputMode, saveTimeInputMode, agendaItemNeedsRole } from '@toastmaster-timer/shared';
+import { DEFAULT_CUSTOM_RULES, saveTimeInputMode } from '@toastmaster-timer/shared';
 import TimeInput, { TimeInputModeToggle } from './TimeInput';
+import { useAgendaEditor } from '../hooks/useAgendaEditor';
 
 function SortableItem({ item, isActive, isCompleted, needsRole, roleOptions, onPickRole, onEdit, onDelete, onClick }) {
   const {
@@ -127,206 +112,51 @@ export default memo(function AgendaTab({ onSwitchToLive }) {
   const {
     agenda,
     activeSpeakerId,
-    addToAgenda,
-    removeFromAgenda,
-    reorderAgenda,
-    updateAgendaItem,
-    loadSpeakerFromAgenda,
-    importBulkSpeakers,
-    importEasySpeakSpeakers,
-    clearAllAgenda,
-    roleRules,
     roleOptions,
-  } = useTimer();
-  const { showToast } = useToast();
-  // Standard Speech unless it was removed in Edit Rules; then the first listed
-  // role, so the picker never shows one role while saving another.
-  const defaultRole = roleOptions.includes('Standard Speech') ? 'Standard Speech' : roleOptions[0] || 'Standard Speech';
-  const needsRole = (item) => agendaItemNeedsRole(item, roleOptions);
-  const needsRoleCount = agenda.filter(needsRole).length;
-
-  const [showImportModal, setShowImportModal] = useState(false);
-  const [showAddModal, setShowAddModal] = useState(false);
-  const [importTab, setImportTab] = useState('easyspeak'); // 'simple' | 'easyspeak'
-  const [importText, setImportText] = useState('');
-  const [easySpeakText, setEasySpeakText] = useState('');
-  const [editItem, setEditItem] = useState(null);
-  const [newSpeakerName, setNewSpeakerName] = useState('');
-  const [newSpeakerRole, setNewSpeakerRole] = useState(defaultRole);
-  const [customRules, setCustomRules] = useState({ ...DEFAULT_CUSTOM_RULES });
-  const [timeInputMode, setTimeInputMode] = useState(loadTimeInputMode);
-  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
-  const [deleteItemId, setDeleteItemId] = useState(null);
-  const [showClearAllConfirm, setShowClearAllConfirm] = useState(false);
-
-  const sensors = useSensors(
-    useSensor(PointerSensor),
-    useSensor(KeyboardSensor, {
-      coordinateGetter: sortableKeyboardCoordinates,
-    })
-  );
-
-  const handleDragEnd = (event) => {
-    const { active, over } = event;
-
-    if (active.id !== over.id) {
-      const oldIndex = agenda.findIndex((item) => item.id === active.id);
-      const newIndex = agenda.findIndex((item) => item.id === over.id);
-      const newOrder = arrayMove(agenda, oldIndex, newIndex);
-      reorderAgenda(newOrder);
-      
-      // Track agenda reordered
-      const movedItem = agenda[oldIndex];
-      trackEvent('agenda_reordered', {
-        speaker_name: movedItem?.name || 'Unnamed',
-        old_index: oldIndex,
-        new_index: newIndex
-      });
-    }
-  };
-
-  const handleSimpleImport = () => {
-    if (importText.trim()) {
-      const { count, needsRole: unmatched } = importBulkSpeakers(importText);
-      if (unmatched > 0) {
-        showToast(`Imported ${count} speaker(s). ${unmatched} need${unmatched === 1 ? 's' : ''} a role`, 'warning');
-      } else {
-        showToast(`Imported ${count} speaker(s)`, 'success');
-      }
-      setImportText('');
-      setShowImportModal(false);
-    }
-  };
-
-  const handleEasySpeakImport = () => {
-    if (easySpeakText.trim()) {
-      const count = importEasySpeakSpeakers(easySpeakText);
-      showToast(`Imported ${count} speaker(s)`, 'success');
-      setEasySpeakText('');
-      setShowImportModal(false);
-    }
-  };
-
-  const handleAdd = () => {
-    if (newSpeakerName.trim()) {
-      const speakerData = {
-        name: newSpeakerName.trim(),
-        role: newSpeakerRole,
-      };
-      // If Custom role, include custom rules
-      if (newSpeakerRole === 'Custom') {
-        speakerData.rules = customRules;
-      }
-      addToAgenda(speakerData);
-      setNewSpeakerName('');
-      setNewSpeakerRole(defaultRole);
-      setCustomRules({ ...DEFAULT_CUSTOM_RULES });
-      setShowAddModal(false);
-    }
-  };
-
-  const handleEdit = (item) => {
-    setEditItem(item);
-    setNewSpeakerName(item.name);
-    // A role that isn't listed can't be shown by the select; start on "Pick a role…".
-    setNewSpeakerRole(needsRole(item) ? '' : item.role);
-    // If item has custom rules, load them (merge so missing graceAfterRed is filled)
-    if (item.role === 'Custom' && item.rules) {
-      setCustomRules({ ...DEFAULT_CUSTOM_RULES, ...item.rules });
-    } else {
-      setCustomRules({ ...DEFAULT_CUSTOM_RULES });
-    }
-    setShowAddModal(true);
-  };
-
-  const handleUpdate = () => {
-    if (editItem && newSpeakerName.trim() && newSpeakerRole) {
-      const speakerData = {
-        name: newSpeakerName.trim(),
-        role: newSpeakerRole,
-      };
-      // If Custom role, include custom rules
-      if (newSpeakerRole === 'Custom') {
-        speakerData.rules = customRules;
-      }
-      // Update in place so the speaker keeps their position in the agenda
-      updateAgendaItem(editItem.id, speakerData);
-      setEditItem(null);
-      setNewSpeakerName('');
-      setNewSpeakerRole(defaultRole);
-      setCustomRules({ ...DEFAULT_CUSTOM_RULES });
-      setShowAddModal(false);
-    }
-  };
-
-  const handlePickRole = (item, role) => {
-    if (!role) return;
-    updateAgendaItem(item.id, { name: item.name, role });
-    trackEvent('agenda_role_picked', { is_custom: !(role in DEFAULT_ROLE_RULES) });
-  };
-
-  const handleDelete = (id) => {
-    setDeleteItemId(id);
-    setShowDeleteConfirm(true);
-  };
-
-  const handleConfirmDelete = () => {
-    if (deleteItemId) {
-      removeFromAgenda(deleteItemId);
-    }
-    setShowDeleteConfirm(false);
-    setDeleteItemId(null);
-  };
-
-  const handleClearAll = () => {
-    setShowClearAllConfirm(true);
-  };
-
-  const handleConfirmClearAll = () => {
-    clearAllAgenda();
-    setShowClearAllConfirm(false);
-  };
-
-  // Helper to format seconds as readable time
-  const formatTimeReadable = (seconds) => {
-    const mins = Math.floor(seconds / 60);
-    const secs = seconds % 60;
-    if (mins === 0) {
-      return `${secs} second${secs !== 1 ? 's' : ''}`;
-    }
-    if (secs === 0) {
-      return `${mins} minute${mins !== 1 ? 's' : ''}`;
-    }
-    return `${mins} min ${secs} sec`;
-  };
-
-  // Get explanation text for each role
-  const getRoleExplanation = (role) => {
-    const rules = roleRules[role] || DEFAULT_ROLE_RULES[role] || DEFAULT_ROLE_RULES['Standard Speech'];
-    return `Green: ${formatTimeReadable(rules.green)}, Yellow: ${formatTimeReadable(rules.yellow)}, Red: ${formatTimeReadable(rules.red)}`;
-  };
-
-  const handleCustomRuleChange = (field, value) => {
-    setCustomRules(prev => ({ ...prev, [field]: value }));
-  };
-
-  const handleSpeakerClick = (item) => {
-    // Without a role there are no rules to time with; the Live tab would quietly
-    // fall back to the default role. Ask instead.
-    if (needsRole(item)) {
-      showToast(`Pick a role for ${item.name} first`, 'warning');
-      return;
-    }
-    loadSpeakerFromAgenda(item.id);
-    // Track speaker loaded from agenda
-    trackEvent('speaker_loaded_from_agenda', {
-      speaker_name: item.name || 'Unnamed',
-      role: item.role
-    });
-    if (onSwitchToLive) {
-      onSwitchToLive();
-    }
-  };
+    defaultRole,
+    needsRole,
+    needsRoleCount,
+    showImportModal,
+    setShowImportModal,
+    showAddModal,
+    setShowAddModal,
+    importTab,
+    setImportTab,
+    importText,
+    setImportText,
+    easySpeakText,
+    setEasySpeakText,
+    editItem,
+    setEditItem,
+    newSpeakerName,
+    setNewSpeakerName,
+    newSpeakerRole,
+    setNewSpeakerRole,
+    customRules,
+    setCustomRules,
+    timeInputMode,
+    setTimeInputMode,
+    showDeleteConfirm,
+    setShowDeleteConfirm,
+    setDeleteItemId,
+    showClearAllConfirm,
+    setShowClearAllConfirm,
+    sensors,
+    handleDragEnd,
+    handleSimpleImport,
+    handleEasySpeakImport,
+    handleAdd,
+    handleEdit,
+    handleUpdate,
+    handlePickRole,
+    handleDelete,
+    handleConfirmDelete,
+    handleClearAll,
+    handleConfirmClearAll,
+    getRoleExplanation,
+    handleCustomRuleChange,
+    handleSpeakerClick,
+  } = useAgendaEditor({ onSwitchToLive });
 
   return (
     <div className="p-4 space-y-4">
diff --git a/apps/zoom-app/src/components/EditRulesModal.jsx b/apps/zoom-app/src/components/EditRulesModal.jsx
index 5d13ea1..0cbc3e5 100644
--- a/apps/zoom-app/src/components/EditRulesModal.jsx
+++ b/apps/zoom-app/src/components/EditRulesModal.jsx
@@ -1,326 +1,44 @@
-import { useState, useEffect, useRef } from 'react';
 import { X, Plus, Trash2 } from 'lucide-react';
-import { useTimer } from '../context/TimerContext';
-import { useToast } from '../context/ToastContext';
-import { DEFAULT_ROLE_RULES, getDefaultGraceAfterRed, DEFAULT_CUSTOM_RULES, loadTimeInputMode, saveTimeInputMode, BREAK_ROLE } from '@toastmaster-timer/shared';
-import {
-  activeClubName,
-  canPublishPresets,
-  lapsedClubName,
-  clubPresetsAvailable,
-  clubPresetsLive,
-  ensureForked,
-  loadClub,
-  loadClubPresets,
-  presetSource,
-  publishPresets,
-  resetToClub,
-  resolveActiveRules,
-  useClubPresets,
-  usePersonalPresets,
-} from '@toastmaster-timer/shared';
+import { DEFAULT_ROLE_RULES, getDefaultGraceAfterRed, DEFAULT_CUSTOM_RULES, saveTimeInputMode } from '@toastmaster-timer/shared';
 import ConfirmModal from './ConfirmModal';
 import ClubPresetBanner from './ClubPresetBanner';
 import TimeInput, { TimeInputModeToggle } from './TimeInput';
-import { trackEvent } from '../utils/posthog';
-import { getSessionToken } from '../utils/zoomIdentity';
+import { useRulesEditor } from '../hooks/useRulesEditor';
 
 const isBuiltInRole = (role) => role in DEFAULT_ROLE_RULES;
 
 export default function EditRulesModal({ isOpen, onClose }) {
-  const { roleRules, roleOptions, updateRoleRules, addRoleRules, removeRoleRules, resetAllRoleRulesToDefaults, reloadRoleRules } = useTimer();
-  const { showToast } = useToast();
-  const [editedRules, setEditedRules] = useState({});
-  const [newRoleNames, setNewRoleNames] = useState({});
-  const [showResetAllConfirm, setShowResetAllConfirm] = useState(false);
-  const [timeInputMode, setTimeInputMode] = useState(loadTimeInputMode);
-  const prevOpenRef = useRef(false);
-
-  // --- the club's list -----------------------------------------------------
-  // Read once per open and kept in state, because every one of these answers
-  // changes underneath the modal as soon as the switch moves or a publish lands.
-  const [source, setSource] = useState(presetSource);
-  const [publishing, setPublishing] = useState(false);
-  const [showForkConfirm, setShowForkConfirm] = useState(false);
-  const forkResolverRef = useRef(null);
-
-  const clubName = activeClubName();
-  const clubHasPresets = clubPresetsAvailable();
-  // A lapse leaves the club's list where it is and simply stops applying it, so
-  // the editor owes the timer an explanation rather than a silent reversion.
-  const lapsedClub = lapsedClubName();
-  const clubList = clubHasPresets ? loadClubPresets() : null;
-  const clubId = loadClub()?.club?.id ?? null;
-  const mayPublish = canPublishPresets();
-
-  /** Re-seed the editor from whichever list just became live. */
-  const showLiveList = () => {
-    reloadRoleRules();
-    const merged = resolveActiveRules();
-    delete merged[BREAK_ROLE];
-    setEditedRules(merged);
-    setNewRoleNames({});
-    setSource(presetSource());
-  };
-
-  /**
-   * The one confirmation that stands between the club's list and an edit.
-   *
-   * Resolved by the modal below rather than returned directly, so every
-   * mutating path can `await` the same promise and do nothing at all on cancel.
-   */
-  const confirmFork = () => new Promise((resolve) => {
-    forkResolverRef.current = resolve;
-    setShowForkConfirm(true);
-  });
-
-  const settleFork = (confirmed) => {
-    setShowForkConfirm(false);
-    const resolve = forkResolverRef.current;
-    forkResolverRef.current = null;
-    resolve?.(confirmed);
-  };
-
-  /**
-   * Add, update, remove and reset-all all run this first, so they cannot drift
-   * into four behaviours. False means the timer cancelled: write nothing, and
-   * leave the modal exactly as it was.
-   */
-  const guardEdit = async () => {
-    const wasClubList = clubPresetsLive();
-    const proceed = await ensureForked(confirmFork);
-    if (proceed && wasClubList) {
-      setSource(presetSource());
-      trackEvent('club_presets_forked', { surface: 'zoom', club_id: clubId });
-    }
-    return proceed;
-  };
-
-  const handleUseClubPresets = () => {
-    useClubPresets();
-    showLiveList();
-  };
-
-  const handleUseMyPresets = () => {
-    usePersonalPresets();
-    showLiveList();
-  };
-
-  const handleResetToClub = () => {
-    if (!resetToClub()) return;
-    showLiveList();
-    trackEvent('club_presets_reset', { surface: 'zoom', club_id: clubId });
-  };
-
-  // Initialize edited rules only when modal opens (not when roleRules changes while open)
-  useEffect(() => {
-    if (isOpen && !prevOpenRef.current) {
-      setEditedRules({ ...roleRules });
-      setNewRoleNames({});
-      setSource(presetSource());
-    }
-    prevOpenRef.current = isOpen;
-  }, [isOpen, roleRules]);
-
-  const handleRuleChange = (role, field, value) => {
-    setEditedRules(prev => ({
-      ...prev,
-      [role]: {
-        ...prev[role],
-        [field]: value
-      }
-    }));
-  };
-
-  const handleAddRole = () => {
-    const tempId = `__new_${Date.now()}`;
-    setEditedRules(prev => ({
-      ...prev,
-      [tempId]: { ...DEFAULT_CUSTOM_RULES }
-    }));
-    setNewRoleNames(prev => ({ ...prev, [tempId]: 'New role' }));
-  };
-
-  const handleNewRoleNameChange = (tempId, name) => {
-    setNewRoleNames(prev => ({ ...prev, [tempId]: name }));
-  };
-
-  const handleRemoveNewRole = (tempId) => {
-    setEditedRules(prev => {
-      const next = { ...prev };
-      delete next[tempId];
-      return next;
-    });
-    setNewRoleNames(prev => {
-      const next = { ...prev };
-      delete next[tempId];
-      return next;
-    });
-  };
-
-  const handleRemoveRole = async (role) => {
-    if (!(await guardEdit())) return;
-    setEditedRules(prev => {
-      const next = { ...prev };
-      delete next[role];
-      return next;
-    });
-    removeRoleRules(role);
-  };
-
-  // Break is not editable here: its thresholds are derived from the length
-  // picked on the Live tab, so a hand-edited copy would be overwritten by the
-  // next pick and mislead in the meantime.
-  const rolesToShow = [
-    ...(roleOptions ?? []).filter((role) => role !== BREAK_ROLE),
-    ...Object.keys(editedRules).filter((k) => k.startsWith('__new_'))
-  ];
-
-  /**
-   * What "Share with my club" would send: the timings on screen right now.
-   *
-   * Built from the editor rather than from storage because the saves below run
-   * inside a state updater, so what is on disk lags what the officer is looking
-   * at by a render. A publish that silently shared the previous list would be
-   * the worst possible bug in this feature.
-   */
-  const publishablePresets = () => {
-    const rules = {};
-    for (const role of rolesToShow) {
-      const edited = editedRules[role];
-      if (!edited) continue;
-      const name = role.startsWith('__new_') ? (newRoleNames[role] || '').trim() : role;
-      if (!name) continue;
-      rules[name] = {
-        green: edited.green,
-        yellow: edited.yellow,
-        red: edited.red,
-        graceAfterRed: edited.graceAfterRed ?? getDefaultGraceAfterRed(name),
-      };
-    }
-    return {
-      rules,
-      order: Object.keys(rules).filter((role) => !(role in DEFAULT_ROLE_RULES)),
-      // A built-in missing from the list is a built-in the officer removed, and
-      // every device in the club has to stop offering it.
-      hiddenBuiltins: Object.keys(DEFAULT_ROLE_RULES).filter((role) => !(role in rules)),
-    };
-  };
-
-  const handlePublish = async () => {
-    if (publishing || !validate()) return;
-    setPublishing(true);
-    const result = await publishPresets(publishablePresets(), { getToken: getSessionToken });
-    setPublishing(false);
-
-    if (!result.ok) {
-      showToast(
-        result.error === 'forbidden'
-          ? 'Only a club admin or editor can share presets.'
-          : "Couldn't share these presets with your club. Try again.",
-        'error'
-      );
-      return;
-    }
-
-    // rememberPublishedPresets already took the new list and version, so a
-    // device sitting on the club's list is showing what was just shared.
-    if (presetSource() === 'club') showLiveList();
-    showToast(`Shared with ${clubName || 'your club'}.`, 'success');
-    trackEvent('club_presets_published', {
-      surface: 'zoom',
-      club_id: clubId,
-      role: loadClub()?.role ?? null,
-      roles: Object.keys(publishablePresets().rules).length,
-    });
-  };
-
-  /** Every reason the list on screen could not be saved or shared. */
-  const validate = () => {
-    const seenNames = new Set();
-
-    for (const role of rolesToShow) {
-      const rules = editedRules[role];
-      if (!rules || rules.green <= 0 || rules.yellow <= rules.green || rules.red <= rules.yellow) {
-        const displayName = role.startsWith('__new_') ? (newRoleNames[role] || role) : role;
-        showToast(`Invalid timing rules for ${displayName}. Green must be > 0, Yellow must be > Green, and Red must be > Yellow.`, 'error');
-        return false;
-      }
-      if (role.startsWith('__new_')) {
-        const name = (newRoleNames[role] || '').trim();
-        if (!name) {
-          showToast('Please enter a name for the new role.', 'error');
-          return false;
-        }
-        if (seenNames.has(name) || roleOptions.includes(name)) {
-          showToast(`A role named "${name}" already exists.`, 'error');
-          return false;
-        }
-        seenNames.add(name);
-      }
-    }
-    return true;
-  };
-
-  const handleSave = async () => {
-    if (!validate()) return;
-    // Nothing is written until the club's list has been forked, so cancelling
-    // the confirmation leaves the modal open with the edit still on screen.
-    if (!(await guardEdit())) return;
-
-    for (const role of rolesToShow) {
-      const rules = editedRules[role];
-      if (role.startsWith('__new_')) {
-        const name = (newRoleNames[role] || '').trim();
-        if (name) {
-          addRoleRules(name, rules);
-          trackEvent('role_added', { role: name, rules });
-        }
-      } else {
-        const oldRules = roleRules[role];
-        const graceOld = oldRules?.graceAfterRed ?? getDefaultGraceAfterRed(role);
-        const graceNew = rules.graceAfterRed ?? getDefaultGraceAfterRed(role);
-        if (oldRules && (
-          oldRules.green !== rules.green ||
-          oldRules.yellow !== rules.yellow ||
-          oldRules.red !== rules.red ||
-          graceOld !== graceNew
-        )) {
-          updateRoleRules(role, rules);
-          trackEvent('rules_edited', {
-            role,
-            new_rules: rules,
-            previous_rules: oldRules
-          });
-        }
-      }
-    }
-
-    onClose();
-  };
-
-  const handleReset = (role) => {
-    const defaultRules = DEFAULT_ROLE_RULES[role];
-    if (!defaultRules) return;
-    setEditedRules(prev => ({
-      ...prev,
-      [role]: { ...defaultRules }
-    }));
-  };
-
-  const handleResetAll = () => {
-    setShowResetAllConfirm(true);
-  };
-
-  const handleConfirmResetAll = async () => {
-    setShowResetAllConfirm(false);
-    if (!(await guardEdit())) return;
-    resetAllRoleRulesToDefaults();
-    setEditedRules(prev => ({
-      ...DEFAULT_ROLE_RULES,
-      ...Object.fromEntries(Object.entries(prev).filter(([k]) => !(k in DEFAULT_ROLE_RULES)))
-    }));
-  };
+  const {
+    editedRules,
+    newRoleNames,
+    showResetAllConfirm,
+    setShowResetAllConfirm,
+    timeInputMode,
+    setTimeInputMode,
+    source,
+    publishing,
+    showForkConfirm,
+    clubName,
+    clubHasPresets,
+    lapsedClub,
+    clubList,
+    mayPublish,
+    settleFork,
+    handleUseClubPresets,
+    handleUseMyPresets,
+    handleResetToClub,
+    handleRuleChange,
+    handleAddRole,
+    handleNewRoleNameChange,
+    handleRemoveNewRole,
+    handleRemoveRole,
+    rolesToShow,
+    handlePublish,
+    handleSave,
+    handleReset,
+    handleResetAll,
+    handleConfirmResetAll,
+  } = useRulesEditor({ isOpen, onClose });
 
   if (!isOpen) return null;
 
diff --git a/apps/zoom-app/src/components/ReportTab.jsx b/apps/zoom-app/src/components/ReportTab.jsx
index 1100c0a..e1def91 100644
--- a/apps/zoom-app/src/components/ReportTab.jsx
+++ b/apps/zoom-app/src/components/ReportTab.jsx
@@ -1,16 +1,10 @@
 import { memo } from 'react';
-import { useTimer } from '../context/TimerContext';
-import { useToast } from '../context/ToastContext';
 import { Copy, Check, Trash2, X, History, CloudOff, ChevronLeft, Share2 } from 'lucide-react';
-import { useState } from 'react';
 import BrandedReportHeader from '@toastmaster-timer/ui/BrandedReportHeader';
 import ReportHistoryList from '@toastmaster-timer/ui/ReportHistoryList';
 import ShareStep from '@toastmaster-timer/ui/ShareStep';
-import { clubFeaturesOn, fetchHistory, fetchMeeting, endMeetingAndShare, copyReportImage } from '@toastmaster-timer/shared';
 import ConfirmModal from './ConfirmModal';
-import { useClub, useOutboxPending } from '../hooks/useClub';
-import { getSessionToken } from '../utils/zoomIdentity';
-import { trackEvent } from '../utils/posthog';
+import { useReportView } from '../hooks/useReportView';
 
 function ColorDot({ color }) {
   const colorClasses = {
@@ -25,93 +19,36 @@ function ColorDot({ color }) {
   );
 }
 
-const UNREACHABLE = 'Could not reach the club just now. Nothing is lost — this device keeps its own copy.';
-
 export default memo(function ReportTab() {
-  const { reports, clearAllReports } = useTimer();
-  const { showToast } = useToast();
-  // The club's header, on a surface free never touches. With no club, or with
-  // "Show on reports" off, nothing renders and the tab is what it always was.
-  const { club, kit, clubName } = useClub();
-  // Outbox emptiness, not the last request's result: a device that went offline
-  // mid-meeting must show work pending rather than claim it is saved.
-  const pending = useOutboxPending();
-  const [copied, setCopied] = useState(false);
-  const [showClearConfirm, setShowClearConfirm] = useState(false);
-  const [showClipboardFallback, setShowClipboardFallback] = useState(false);
-  const [clipboardText, setClipboardText] = useState('');
-  const [history, setHistory] = useState(null);
-  const [openMeeting, setOpenMeeting] = useState(null);
-  // null | { phase: 'title'|'working'|'done', title, result }
-  const [share, setShare] = useState(null);
-
-  // A lapsed club keeps its cached record (the device still knows which club to
-  // re-check) but stops archiving, so the strip and History go with it. So
-  // does a club while Pro is not released (clubFeaturesOn).
-  const archiving = clubFeaturesOn(club);
-  const archiveName = clubName || club?.club?.name || 'your club';
-
-  const endMeeting = async () => {
-    const title = share?.title ?? '';
-    setShare({ phase: 'working', title, result: null });
-    const result = await endMeetingAndShare({ title, speeches: reports, getToken: getSessionToken });
-    setShare({ phase: 'done', title, result });
-    trackEvent('meeting_ended', {
-      speeches: result.speeches,
-      overtime: result.overtime,
-      titled: Boolean(result.title),
-      shared: Boolean(result.url),
-      surface: 'zoom',
-    });
-  };
-
-  // Every destination reports itself, so the "artifacts that travel" thesis has
-  // a number behind it rather than an intuition.
-  const onShareChannel = async (channel) => {
-    const result = share?.result;
-    trackEvent('report_shared', { channel, surface: 'zoom' });
-    if (channel === 'image') {
-      const copied = await copyReportImage(result?.blob, { filename: result?.filename });
-      if (!copied.ok) {
-        showToast('That image could not be copied on this device', 'warning');
-        return false;
-      }
-      if (copied.method === 'download') showToast('Image downloaded', 'success');
-      return true;
-    }
-    if (channel === 'link') {
-      try {
-        await navigator.clipboard.writeText(result.url);
-        return true;
-      } catch {
-        showToast('Could not copy the link', 'warning');
-        return false;
-      }
-    }
-    return true;
-  };
-
-  const openHistory = async () => {
-    setOpenMeeting(null);
-    setHistory({ loading: true, error: null, meetings: [] });
-    const result = await fetchHistory({ getToken: getSessionToken });
-    if (!result.ok) {
-      setHistory({ loading: false, error: UNREACHABLE, meetings: [] });
-      return;
-    }
-    setHistory({ loading: false, error: null, meetings: result.meetings });
-    trackEvent('report_history_viewed', { meetings: result.meetings.length, surface: 'zoom' });
-  };
-
-  const selectMeeting = async (meetingId) => {
-    setOpenMeeting({ loading: true, error: null, meeting: null });
-    const result = await fetchMeeting(meetingId, { getToken: getSessionToken });
-    if (!result.ok) {
-      setOpenMeeting({ loading: false, error: UNREACHABLE, meeting: null });
-      return;
-    }
-    setOpenMeeting({ loading: false, error: null, meeting: result.meeting });
-  };
+  const {
+    reports,
+    club,
+    kit,
+    clubName,
+    pending,
+    copied,
+    showClearConfirm,
+    setShowClearConfirm,
+    showClipboardFallback,
+    setShowClipboardFallback,
+    clipboardText,
+    setClipboardText,
+    history,
+    setHistory,
+    openMeeting,
+    setOpenMeeting,
+    share,
+    setShare,
+    archiving,
+    archiveName,
+    endMeeting,
+    onShareChannel,
+    openHistory,
+    selectMeeting,
+    copyToClipboard,
+    handleClear,
+    handleConfirmClear,
+  } = useReportView();
 
   const speechRows = (rows) => (
     <table className="w-full border-collapse text-sm">
@@ -136,57 +73,6 @@ export default memo(function ReportTab() {
     </table>
   );
 
-  const copyToClipboard = async () => {
-    if (reports.length === 0) {
-      showToast('No reports to copy', 'warning');
-      return;
-    }
-
-    // Format as tab-separated values
-    const header = 'Name\tRole\tDuration\tStatus\tOver time\tComments\n';
-    const rows = reports.map(r =>
-      `${r.name}\t${r.role}\t${r.duration}\t${r.color}\t${r.disqualified ? 'Yes' : ''}\t${r.comments || ''}`
-    ).join('\n');
-    const text = header + rows;
-
-    // The secondary destination, and the oldest one. Counted alongside the
-    // others so "reports that travel" is one funnel rather than two.
-    trackEvent('report_shared', { channel: 'text', surface: 'zoom' });
-
-    try {
-      // Check if clipboard API is available
-      if (navigator.clipboard && navigator.clipboard.writeText) {
-        await navigator.clipboard.writeText(text);
-        setCopied(true);
-        setTimeout(() => setCopied(false), 2000);
-        showToast('Copied to clipboard', 'success');
-      } else {
-        // Fallback: show modal with text
-        setClipboardText(text);
-        setShowClipboardFallback(true);
-      }
-    } catch (error) {
-      console.error('Failed to copy:', error);
-      // Fallback: show modal with text
-      setClipboardText(text);
-      setShowClipboardFallback(true);
-    }
-  };
-
-  const handleClear = () => {
-    if (reports.length === 0) {
-      return;
-    }
-    setShowClearConfirm(true);
-  };
-
-  // Deliberately local only: the archive is the club's record of the evening
-  // and clearing this device's scratch list must not reach into it.
-  const handleConfirmClear = () => {
-    clearAllReports();
-    setShowClearConfirm(false);
-  };
-
   return (
     <div className="p-4 space-y-4">
       {archiving && (
diff --git a/apps/zoom-app/src/hooks/useAgendaEditor.js b/apps/zoom-app/src/hooks/useAgendaEditor.js
new file mode 100644
index 0000000..c55ddf1
--- /dev/null
+++ b/apps/zoom-app/src/hooks/useAgendaEditor.js
@@ -0,0 +1,274 @@
+import { useState } from 'react';
+import { useTimer } from '../context/TimerContext';
+import { useToast } from '../context/ToastContext';
+import { trackEvent } from '../utils/posthog';
+import { KeyboardSensor, PointerSensor, useSensor, useSensors } from '@dnd-kit/core';
+import { arrayMove, sortableKeyboardCoordinates } from '@dnd-kit/sortable';
+import { DEFAULT_ROLE_RULES, DEFAULT_CUSTOM_RULES, loadTimeInputMode, agendaItemNeedsRole } from '@toastmaster-timer/shared';
+
+/**
+ * Everything the Agenda tab does, apart from how it looks: importing an
+ * EasySpeak or one-per-line agenda, adding, editing, reordering and removing
+ * rows, picking a role for a row that needs one, and loading a row onto the
+ * timer.
+ *
+ * Lifted out of AgendaTab unchanged so design B's Agenda tab (plan 13) draws
+ * the same agenda without a second copy of the logic.
+ *
+ * @param {{onSwitchToLive?: () => void}} options
+ * @returns {Object} state and handlers for an agenda view
+ */
+export function useAgendaEditor({ onSwitchToLive } = {}) {
+  const {
+    agenda,
+    activeSpeakerId,
+    addToAgenda,
+    removeFromAgenda,
+    reorderAgenda,
+    updateAgendaItem,
+    loadSpeakerFromAgenda,
+    importBulkSpeakers,
+    importEasySpeakSpeakers,
+    clearAllAgenda,
+    roleRules,
+    roleOptions,
+  } = useTimer();
+  const { showToast } = useToast();
+  // Standard Speech unless it was removed in Edit Rules; then the first listed
+  // role, so the picker never shows one role while saving another.
+  const defaultRole = roleOptions.includes('Standard Speech') ? 'Standard Speech' : roleOptions[0] || 'Standard Speech';
+  const needsRole = (item) => agendaItemNeedsRole(item, roleOptions);
+  const needsRoleCount = agenda.filter(needsRole).length;
+
+  const [showImportModal, setShowImportModal] = useState(false);
+  const [showAddModal, setShowAddModal] = useState(false);
+  const [importTab, setImportTab] = useState('easyspeak'); // 'simple' | 'easyspeak'
+  const [importText, setImportText] = useState('');
+  const [easySpeakText, setEasySpeakText] = useState('');
+  const [editItem, setEditItem] = useState(null);
+  const [newSpeakerName, setNewSpeakerName] = useState('');
+  const [newSpeakerRole, setNewSpeakerRole] = useState(defaultRole);
+  const [customRules, setCustomRules] = useState({ ...DEFAULT_CUSTOM_RULES });
+  const [timeInputMode, setTimeInputMode] = useState(loadTimeInputMode);
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+  const [deleteItemId, setDeleteItemId] = useState(null);
+  const [showClearAllConfirm, setShowClearAllConfirm] = useState(false);
+
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    })
+  );
+
+  const handleDragEnd = (event) => {
+    const { active, over } = event;
+
+    if (active.id !== over.id) {
+      const oldIndex = agenda.findIndex((item) => item.id === active.id);
+      const newIndex = agenda.findIndex((item) => item.id === over.id);
+      const newOrder = arrayMove(agenda, oldIndex, newIndex);
+      reorderAgenda(newOrder);
+      
+      // Track agenda reordered
+      const movedItem = agenda[oldIndex];
+      trackEvent('agenda_reordered', {
+        speaker_name: movedItem?.name || 'Unnamed',
+        old_index: oldIndex,
+        new_index: newIndex
+      });
+    }
+  };
+
+  const handleSimpleImport = () => {
+    if (importText.trim()) {
+      const { count, needsRole: unmatched } = importBulkSpeakers(importText);
+      if (unmatched > 0) {
+        showToast(`Imported ${count} speaker(s). ${unmatched} need${unmatched === 1 ? 's' : ''} a role`, 'warning');
+      } else {
+        showToast(`Imported ${count} speaker(s)`, 'success');
+      }
+      setImportText('');
+      setShowImportModal(false);
+    }
+  };
+
+  const handleEasySpeakImport = () => {
+    if (easySpeakText.trim()) {
+      const count = importEasySpeakSpeakers(easySpeakText);
+      showToast(`Imported ${count} speaker(s)`, 'success');
+      setEasySpeakText('');
+      setShowImportModal(false);
+    }
+  };
+
+  const handleAdd = () => {
+    if (newSpeakerName.trim()) {
+      const speakerData = {
+        name: newSpeakerName.trim(),
+        role: newSpeakerRole,
+      };
+      // If Custom role, include custom rules
+      if (newSpeakerRole === 'Custom') {
+        speakerData.rules = customRules;
+      }
+      addToAgenda(speakerData);
+      setNewSpeakerName('');
+      setNewSpeakerRole(defaultRole);
+      setCustomRules({ ...DEFAULT_CUSTOM_RULES });
+      setShowAddModal(false);
+    }
+  };
+
+  const handleEdit = (item) => {
+    setEditItem(item);
+    setNewSpeakerName(item.name);
+    // A role that isn't listed can't be shown by the select; start on "Pick a role…".
+    setNewSpeakerRole(needsRole(item) ? '' : item.role);
+    // If item has custom rules, load them (merge so missing graceAfterRed is filled)
+    if (item.role === 'Custom' && item.rules) {
+      setCustomRules({ ...DEFAULT_CUSTOM_RULES, ...item.rules });
+    } else {
+      setCustomRules({ ...DEFAULT_CUSTOM_RULES });
+    }
+    setShowAddModal(true);
+  };
+
+  const handleUpdate = () => {
+    if (editItem && newSpeakerName.trim() && newSpeakerRole) {
+      const speakerData = {
+        name: newSpeakerName.trim(),
+        role: newSpeakerRole,
+      };
+      // If Custom role, include custom rules
+      if (newSpeakerRole === 'Custom') {
+        speakerData.rules = customRules;
+      }
+      // Update in place so the speaker keeps their position in the agenda
+      updateAgendaItem(editItem.id, speakerData);
+      setEditItem(null);
+      setNewSpeakerName('');
+      setNewSpeakerRole(defaultRole);
+      setCustomRules({ ...DEFAULT_CUSTOM_RULES });
+      setShowAddModal(false);
+    }
+  };
+
+  const handlePickRole = (item, role) => {
+    if (!role) return;
+    updateAgendaItem(item.id, { name: item.name, role });
+    trackEvent('agenda_role_picked', { is_custom: !(role in DEFAULT_ROLE_RULES) });
+  };
+
+  const handleDelete = (id) => {
+    setDeleteItemId(id);
+    setShowDeleteConfirm(true);
+  };
+
+  const handleConfirmDelete = () => {
+    if (deleteItemId) {
+      removeFromAgenda(deleteItemId);
+    }
+    setShowDeleteConfirm(false);
+    setDeleteItemId(null);
+  };
+
+  const handleClearAll = () => {
+    setShowClearAllConfirm(true);
+  };
+
+  const handleConfirmClearAll = () => {
+    clearAllAgenda();
+    setShowClearAllConfirm(false);
+  };
+
+  // Helper to format seconds as readable time
+  const formatTimeReadable = (seconds) => {
+    const mins = Math.floor(seconds / 60);
+    const secs = seconds % 60;
+    if (mins === 0) {
+      return `${secs} second${secs !== 1 ? 's' : ''}`;
+    }
+    if (secs === 0) {
+      return `${mins} minute${mins !== 1 ? 's' : ''}`;
+    }
+    return `${mins} min ${secs} sec`;
+  };
+
+  // Get explanation text for each role
+  const getRoleExplanation = (role) => {
+    const rules = roleRules[role] || DEFAULT_ROLE_RULES[role] || DEFAULT_ROLE_RULES['Standard Speech'];
+    return `Green: ${formatTimeReadable(rules.green)}, Yellow: ${formatTimeReadable(rules.yellow)}, Red: ${formatTimeReadable(rules.red)}`;
+  };
+
+  const handleCustomRuleChange = (field, value) => {
+    setCustomRules(prev => ({ ...prev, [field]: value }));
+  };
+
+  const handleSpeakerClick = (item) => {
+    // Without a role there are no rules to time with; the Live tab would quietly
+    // fall back to the default role. Ask instead.
+    if (needsRole(item)) {
+      showToast(`Pick a role for ${item.name} first`, 'warning');
+      return;
+    }
+    loadSpeakerFromAgenda(item.id);
+    // Track speaker loaded from agenda
+    trackEvent('speaker_loaded_from_agenda', {
+      speaker_name: item.name || 'Unnamed',
+      role: item.role
+    });
+    if (onSwitchToLive) {
+      onSwitchToLive();
+    }
+  };
+
+  return {
+    agenda,
+    activeSpeakerId,
+    roleOptions,
+    defaultRole,
+    needsRole,
+    needsRoleCount,
+    showImportModal,
+    setShowImportModal,
+    showAddModal,
+    setShowAddModal,
+    importTab,
+    setImportTab,
+    importText,
+    setImportText,
+    easySpeakText,
+    setEasySpeakText,
+    editItem,
+    setEditItem,
+    newSpeakerName,
+    setNewSpeakerName,
+    newSpeakerRole,
+    setNewSpeakerRole,
+    customRules,
+    setCustomRules,
+    timeInputMode,
+    setTimeInputMode,
+    showDeleteConfirm,
+    setShowDeleteConfirm,
+    setDeleteItemId,
+    showClearAllConfirm,
+    setShowClearAllConfirm,
+    sensors,
+    handleDragEnd,
+    handleSimpleImport,
+    handleEasySpeakImport,
+    handleAdd,
+    handleEdit,
+    handleUpdate,
+    handlePickRole,
+    handleDelete,
+    handleConfirmDelete,
+    handleClearAll,
+    handleConfirmClearAll,
+    getRoleExplanation,
+    handleCustomRuleChange,
+    handleSpeakerClick,
+  };
+}
diff --git a/apps/zoom-app/src/hooks/useReportView.js b/apps/zoom-app/src/hooks/useReportView.js
new file mode 100644
index 0000000..34c9fd9
--- /dev/null
+++ b/apps/zoom-app/src/hooks/useReportView.js
@@ -0,0 +1,189 @@
+import { useState } from 'react';
+import { useTimer } from '../context/TimerContext';
+import { useToast } from '../context/ToastContext';
+import { clubFeaturesOn, fetchHistory, fetchMeeting, endMeetingAndShare, copyReportImage } from '@toastmaster-timer/shared';
+import { useClub, useOutboxPending } from './useClub';
+import { getSessionToken } from '../utils/zoomIdentity';
+import { trackEvent } from '../utils/posthog';
+
+export const UNREACHABLE = 'Could not reach the club just now. Nothing is lost — this device keeps its own copy.';
+
+/**
+ * Everything the Report tab does, apart from how it looks: the speeches timed
+ * on this device, copying them, clearing them, and for a club with Pro the
+ * archive strip, its history, and ending the meeting with a link and a
+ * picture to share.
+ *
+ * Lifted out of ReportTab unchanged so design B's Report tab (plan 13) shows
+ * the same report without a second copy of the logic.
+ *
+ * @returns {Object} state and handlers for a report view
+ */
+export function useReportView() {
+  const { reports, clearAllReports } = useTimer();
+  const { showToast } = useToast();
+  // The club's header, on a surface free never touches. With no club, or with
+  // "Show on reports" off, nothing renders and the tab is what it always was.
+  const { club, kit, clubName } = useClub();
+  // Outbox emptiness, not the last request's result: a device that went offline
+  // mid-meeting must show work pending rather than claim it is saved.
+  const pending = useOutboxPending();
+  const [copied, setCopied] = useState(false);
+  const [showClearConfirm, setShowClearConfirm] = useState(false);
+  const [showClipboardFallback, setShowClipboardFallback] = useState(false);
+  const [clipboardText, setClipboardText] = useState('');
+  const [history, setHistory] = useState(null);
+  const [openMeeting, setOpenMeeting] = useState(null);
+  // null | { phase: 'title'|'working'|'done', title, result }
+  const [share, setShare] = useState(null);
+
+  // A lapsed club keeps its cached record (the device still knows which club to
+  // re-check) but stops archiving, so the strip and History go with it. So
+  // does a club while Pro is not released (clubFeaturesOn).
+  const archiving = clubFeaturesOn(club);
+  const archiveName = clubName || club?.club?.name || 'your club';
+
+  const endMeeting = async () => {
+    const title = share?.title ?? '';
+    setShare({ phase: 'working', title, result: null });
+    const result = await endMeetingAndShare({ title, speeches: reports, getToken: getSessionToken });
+    setShare({ phase: 'done', title, result });
+    trackEvent('meeting_ended', {
+      speeches: result.speeches,
+      overtime: result.overtime,
+      titled: Boolean(result.title),
+      shared: Boolean(result.url),
+      surface: 'zoom',
+    });
+  };
+
+  // Every destination reports itself, so the "artifacts that travel" thesis has
+  // a number behind it rather than an intuition.
+  const onShareChannel = async (channel) => {
+    const result = share?.result;
+    trackEvent('report_shared', { channel, surface: 'zoom' });
+    if (channel === 'image') {
+      const copied = await copyReportImage(result?.blob, { filename: result?.filename });
+      if (!copied.ok) {
+        showToast('That image could not be copied on this device', 'warning');
+        return false;
+      }
+      if (copied.method === 'download') showToast('Image downloaded', 'success');
+      return true;
+    }
+    if (channel === 'link') {
+      try {
+        await navigator.clipboard.writeText(result.url);
+        return true;
+      } catch {
+        showToast('Could not copy the link', 'warning');
+        return false;
+      }
+    }
+    return true;
+  };
+
+  const openHistory = async () => {
+    setOpenMeeting(null);
+    setHistory({ loading: true, error: null, meetings: [] });
+    const result = await fetchHistory({ getToken: getSessionToken });
+    if (!result.ok) {
+      setHistory({ loading: false, error: UNREACHABLE, meetings: [] });
+      return;
+    }
+    setHistory({ loading: false, error: null, meetings: result.meetings });
+    trackEvent('report_history_viewed', { meetings: result.meetings.length, surface: 'zoom' });
+  };
+
+  const selectMeeting = async (meetingId) => {
+    setOpenMeeting({ loading: true, error: null, meeting: null });
+    const result = await fetchMeeting(meetingId, { getToken: getSessionToken });
+    if (!result.ok) {
+      setOpenMeeting({ loading: false, error: UNREACHABLE, meeting: null });
+      return;
+    }
+    setOpenMeeting({ loading: false, error: null, meeting: result.meeting });
+  };
+
+
+  const copyToClipboard = async () => {
+    if (reports.length === 0) {
+      showToast('No reports to copy', 'warning');
+      return;
+    }
+
+    // Format as tab-separated values
+    const header = 'Name\tRole\tDuration\tStatus\tOver time\tComments\n';
+    const rows = reports.map(r =>
+      `${r.name}\t${r.role}\t${r.duration}\t${r.color}\t${r.disqualified ? 'Yes' : ''}\t${r.comments || ''}`
+    ).join('\n');
+    const text = header + rows;
+
+    // The secondary destination, and the oldest one. Counted alongside the
+    // others so "reports that travel" is one funnel rather than two.
+    trackEvent('report_shared', { channel: 'text', surface: 'zoom' });
+
+    try {
+      // Check if clipboard API is available
+      if (navigator.clipboard && navigator.clipboard.writeText) {
+        await navigator.clipboard.writeText(text);
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2000);
+        showToast('Copied to clipboard', 'success');
+      } else {
+        // Fallback: show modal with text
+        setClipboardText(text);
+        setShowClipboardFallback(true);
+      }
+    } catch (error) {
+      console.error('Failed to copy:', error);
+      // Fallback: show modal with text
+      setClipboardText(text);
+      setShowClipboardFallback(true);
+    }
+  };
+
+  const handleClear = () => {
+    if (reports.length === 0) {
+      return;
+    }
+    setShowClearConfirm(true);
+  };
+
+  // Deliberately local only: the archive is the club's record of the evening
+  // and clearing this device's scratch list must not reach into it.
+  const handleConfirmClear = () => {
+    clearAllReports();
+    setShowClearConfirm(false);
+  };
+
+  return {
+    reports,
+    club,
+    kit,
+    clubName,
+    pending,
+    copied,
+    showClearConfirm,
+    setShowClearConfirm,
+    showClipboardFallback,
+    setShowClipboardFallback,
+    clipboardText,
+    setClipboardText,
+    history,
+    setHistory,
+    openMeeting,
+    setOpenMeeting,
+    share,
+    setShare,
+    archiving,
+    archiveName,
+    endMeeting,
+    onShareChannel,
+    openHistory,
+    selectMeeting,
+    copyToClipboard,
+    handleClear,
+    handleConfirmClear,
+  };
+}
diff --git a/apps/zoom-app/src/hooks/useRulesEditor.js b/apps/zoom-app/src/hooks/useRulesEditor.js
new file mode 100644
index 0000000..6a996d6
--- /dev/null
+++ b/apps/zoom-app/src/hooks/useRulesEditor.js
@@ -0,0 +1,346 @@
+import { useState, useEffect, useRef } from 'react';
+import { useTimer } from '../context/TimerContext';
+import { useToast } from '../context/ToastContext';
+import { DEFAULT_ROLE_RULES, getDefaultGraceAfterRed, DEFAULT_CUSTOM_RULES, loadTimeInputMode, BREAK_ROLE, activeClubName, canPublishPresets, lapsedClubName, clubPresetsAvailable, clubPresetsLive, ensureForked, loadClub, loadClubPresets, presetSource, publishPresets, resetToClub, resolveActiveRules, useClubPresets, usePersonalPresets } from '@toastmaster-timer/shared';
+import { trackEvent } from '../utils/posthog';
+import { getSessionToken } from '../utils/zoomIdentity';
+
+/**
+ * Everything the Roles & timing rules editor does, apart from how it looks:
+ * the roles and their times as edited, new roles, removing and resetting, the
+ * club's list (use it, use mine, reset to the club's), sharing a list with the
+ * club, and saving.
+ *
+ * Lifted out of EditRulesModal unchanged so design B's rules sheet (plan 13)
+ * edits the same rules without a second copy of the logic.
+ *
+ * @param {{isOpen: boolean, onClose: () => void}} options
+ * @returns {Object} state and handlers for a rules view
+ */
+export function useRulesEditor({ isOpen, onClose }) {
+  const { roleRules, roleOptions, updateRoleRules, addRoleRules, removeRoleRules, resetAllRoleRulesToDefaults, reloadRoleRules } = useTimer();
+  const { showToast } = useToast();
+  const [editedRules, setEditedRules] = useState({});
+  const [newRoleNames, setNewRoleNames] = useState({});
+  const [showResetAllConfirm, setShowResetAllConfirm] = useState(false);
+  const [timeInputMode, setTimeInputMode] = useState(loadTimeInputMode);
+  const prevOpenRef = useRef(false);
+
+  // --- the club's list -----------------------------------------------------
+  // Read once per open and kept in state, because every one of these answers
+  // changes underneath the modal as soon as the switch moves or a publish lands.
+  const [source, setSource] = useState(presetSource);
+  const [publishing, setPublishing] = useState(false);
+  const [showForkConfirm, setShowForkConfirm] = useState(false);
+  const forkResolverRef = useRef(null);
+
+  const clubName = activeClubName();
+  const clubHasPresets = clubPresetsAvailable();
+  // A lapse leaves the club's list where it is and simply stops applying it, so
+  // the editor owes the timer an explanation rather than a silent reversion.
+  const lapsedClub = lapsedClubName();
+  const clubList = clubHasPresets ? loadClubPresets() : null;
+  const clubId = loadClub()?.club?.id ?? null;
+  const mayPublish = canPublishPresets();
+
+  /** Re-seed the editor from whichever list just became live. */
+  const showLiveList = () => {
+    reloadRoleRules();
+    const merged = resolveActiveRules();
+    delete merged[BREAK_ROLE];
+    setEditedRules(merged);
+    setNewRoleNames({});
+    setSource(presetSource());
+  };
+
+  /**
+   * The one confirmation that stands between the club's list and an edit.
+   *
+   * Resolved by the modal below rather than returned directly, so every
+   * mutating path can `await` the same promise and do nothing at all on cancel.
+   */
+  const confirmFork = () => new Promise((resolve) => {
+    forkResolverRef.current = resolve;
+    setShowForkConfirm(true);
+  });
+
+  const settleFork = (confirmed) => {
+    setShowForkConfirm(false);
+    const resolve = forkResolverRef.current;
+    forkResolverRef.current = null;
+    resolve?.(confirmed);
+  };
+
+  /**
+   * Add, update, remove and reset-all all run this first, so they cannot drift
+   * into four behaviours. False means the timer cancelled: write nothing, and
+   * leave the modal exactly as it was.
+   */
+  const guardEdit = async () => {
+    const wasClubList = clubPresetsLive();
+    const proceed = await ensureForked(confirmFork);
+    if (proceed && wasClubList) {
+      setSource(presetSource());
+      trackEvent('club_presets_forked', { surface: 'zoom', club_id: clubId });
+    }
+    return proceed;
+  };
+
+  const handleUseClubPresets = () => {
+    useClubPresets();
+    showLiveList();
+  };
+
+  const handleUseMyPresets = () => {
+    usePersonalPresets();
+    showLiveList();
+  };
+
+  const handleResetToClub = () => {
+    if (!resetToClub()) return;
+    showLiveList();
+    trackEvent('club_presets_reset', { surface: 'zoom', club_id: clubId });
+  };
+
+  // Initialize edited rules only when modal opens (not when roleRules changes while open)
+  useEffect(() => {
+    if (isOpen && !prevOpenRef.current) {
+      setEditedRules({ ...roleRules });
+      setNewRoleNames({});
+      setSource(presetSource());
+    }
+    prevOpenRef.current = isOpen;
+  }, [isOpen, roleRules]);
+
+  const handleRuleChange = (role, field, value) => {
+    setEditedRules(prev => ({
+      ...prev,
+      [role]: {
+        ...prev[role],
+        [field]: value
+      }
+    }));
+  };
+
+  const handleAddRole = () => {
+    const tempId = `__new_${Date.now()}`;
+    setEditedRules(prev => ({
+      ...prev,
+      [tempId]: { ...DEFAULT_CUSTOM_RULES }
+    }));
+    setNewRoleNames(prev => ({ ...prev, [tempId]: 'New role' }));
+  };
+
+  const handleNewRoleNameChange = (tempId, name) => {
+    setNewRoleNames(prev => ({ ...prev, [tempId]: name }));
+  };
+
+  const handleRemoveNewRole = (tempId) => {
+    setEditedRules(prev => {
+      const next = { ...prev };
+      delete next[tempId];
+      return next;
+    });
+    setNewRoleNames(prev => {
+      const next = { ...prev };
+      delete next[tempId];
+      return next;
+    });
+  };
+
+  const handleRemoveRole = async (role) => {
+    if (!(await guardEdit())) return;
+    setEditedRules(prev => {
+      const next = { ...prev };
+      delete next[role];
+      return next;
+    });
+    removeRoleRules(role);
+  };
+
+  // Break is not editable here: its thresholds are derived from the length
+  // picked on the Live tab, so a hand-edited copy would be overwritten by the
+  // next pick and mislead in the meantime.
+  const rolesToShow = [
+    ...(roleOptions ?? []).filter((role) => role !== BREAK_ROLE),
+    ...Object.keys(editedRules).filter((k) => k.startsWith('__new_'))
+  ];
+
+  /**
+   * What "Share with my club" would send: the timings on screen right now.
+   *
+   * Built from the editor rather than from storage because the saves below run
+   * inside a state updater, so what is on disk lags what the officer is looking
+   * at by a render. A publish that silently shared the previous list would be
+   * the worst possible bug in this feature.
+   */
+  const publishablePresets = () => {
+    const rules = {};
+    for (const role of rolesToShow) {
+      const edited = editedRules[role];
+      if (!edited) continue;
+      const name = role.startsWith('__new_') ? (newRoleNames[role] || '').trim() : role;
+      if (!name) continue;
+      rules[name] = {
+        green: edited.green,
+        yellow: edited.yellow,
+        red: edited.red,
+        graceAfterRed: edited.graceAfterRed ?? getDefaultGraceAfterRed(name),
+      };
+    }
+    return {
+      rules,
+      order: Object.keys(rules).filter((role) => !(role in DEFAULT_ROLE_RULES)),
+      // A built-in missing from the list is a built-in the officer removed, and
+      // every device in the club has to stop offering it.
+      hiddenBuiltins: Object.keys(DEFAULT_ROLE_RULES).filter((role) => !(role in rules)),
+    };
+  };
+
+  const handlePublish = async () => {
+    if (publishing || !validate()) return;
+    setPublishing(true);
+    const result = await publishPresets(publishablePresets(), { getToken: getSessionToken });
+    setPublishing(false);
+
+    if (!result.ok) {
+      showToast(
+        result.error === 'forbidden'
+          ? 'Only a club admin or editor can share presets.'
+          : "Couldn't share these presets with your club. Try again.",
+        'error'
+      );
+      return;
+    }
+
+    // rememberPublishedPresets already took the new list and version, so a
+    // device sitting on the club's list is showing what was just shared.
+    if (presetSource() === 'club') showLiveList();
+    showToast(`Shared with ${clubName || 'your club'}.`, 'success');
+    trackEvent('club_presets_published', {
+      surface: 'zoom',
+      club_id: clubId,
+      role: loadClub()?.role ?? null,
+      roles: Object.keys(publishablePresets().rules).length,
+    });
+  };
+
+  /** Every reason the list on screen could not be saved or shared. */
+  const validate = () => {
+    const seenNames = new Set();
+
+    for (const role of rolesToShow) {
+      const rules = editedRules[role];
+      if (!rules || rules.green <= 0 || rules.yellow <= rules.green || rules.red <= rules.yellow) {
+        const displayName = role.startsWith('__new_') ? (newRoleNames[role] || role) : role;
+        showToast(`Invalid timing rules for ${displayName}. Green must be > 0, Yellow must be > Green, and Red must be > Yellow.`, 'error');
+        return false;
+      }
+      if (role.startsWith('__new_')) {
+        const name = (newRoleNames[role] || '').trim();
+        if (!name) {
+          showToast('Please enter a name for the new role.', 'error');
+          return false;
+        }
+        if (seenNames.has(name) || roleOptions.includes(name)) {
+          showToast(`A role named "${name}" already exists.`, 'error');
+          return false;
+        }
+        seenNames.add(name);
+      }
+    }
+    return true;
+  };
+
+  const handleSave = async () => {
+    if (!validate()) return;
+    // Nothing is written until the club's list has been forked, so cancelling
+    // the confirmation leaves the modal open with the edit still on screen.
+    if (!(await guardEdit())) return;
+
+    for (const role of rolesToShow) {
+      const rules = editedRules[role];
+      if (role.startsWith('__new_')) {
+        const name = (newRoleNames[role] || '').trim();
+        if (name) {
+          addRoleRules(name, rules);
+          trackEvent('role_added', { role: name, rules });
+        }
+      } else {
+        const oldRules = roleRules[role];
+        const graceOld = oldRules?.graceAfterRed ?? getDefaultGraceAfterRed(role);
+        const graceNew = rules.graceAfterRed ?? getDefaultGraceAfterRed(role);
+        if (oldRules && (
+          oldRules.green !== rules.green ||
+          oldRules.yellow !== rules.yellow ||
+          oldRules.red !== rules.red ||
+          graceOld !== graceNew
+        )) {
+          updateRoleRules(role, rules);
+          trackEvent('rules_edited', {
+            role,
+            new_rules: rules,
+            previous_rules: oldRules
+          });
+        }
+      }
+    }
+
+    onClose();
+  };
+
+  const handleReset = (role) => {
+    const defaultRules = DEFAULT_ROLE_RULES[role];
+    if (!defaultRules) return;
+    setEditedRules(prev => ({
+      ...prev,
+      [role]: { ...defaultRules }
+    }));
+  };
+
+  const handleResetAll = () => {
+    setShowResetAllConfirm(true);
+  };
+
+  const handleConfirmResetAll = async () => {
+    setShowResetAllConfirm(false);
+    if (!(await guardEdit())) return;
+    resetAllRoleRulesToDefaults();
+    setEditedRules(prev => ({
+      ...DEFAULT_ROLE_RULES,
+      ...Object.fromEntries(Object.entries(prev).filter(([k]) => !(k in DEFAULT_ROLE_RULES)))
+    }));
+  };
+
+  return {
+    editedRules,
+    newRoleNames,
+    showResetAllConfirm,
+    setShowResetAllConfirm,
+    timeInputMode,
+    setTimeInputMode,
+    source,
+    publishing,
+    showForkConfirm,
+    clubName,
+    clubHasPresets,
+    lapsedClub,
+    clubList,
+    mayPublish,
+    settleFork,
+    handleUseClubPresets,
+    handleUseMyPresets,
+    handleResetToClub,
+    handleRuleChange,
+    handleAddRole,
+    handleNewRoleNameChange,
+    handleRemoveNewRole,
+    handleRemoveRole,
+    rolesToShow,
+    handlePublish,
+    handleSave,
+    handleReset,
+    handleResetAll,
+    handleConfirmResetAll,
+  };
+}

From 3148ef1e9235fb6c737550a150e8c13bd9054640 Mon Sep 17 00:00:00 2001
From: Shuhao <shuhao.qgg.zhang@gmail.com>
Date: Sat, 14 Nov 2026 20:18:28 -0500
Subject: [PATCH 2/3] feat(zoom-app): design B's Agenda and Report tabs and the
 rules sheet

Agenda: empty state with Paste from EasySpeak / Add a speaker, rows with drag
dots, ON THE TIMER, finished times and the red needs-role row, a paste sheet
that counts speakers before adding, an add / edit sheet. Report: rows with
colour, time and OVER TIME, copy, clear, the club archive, history and share
as sheets, the Pro pitch only while Pro can be bought. Roles & timing rules:
one row per role, one open at a time, the club's list and sharing.
---
 apps/zoom-app/src/b/AgendaReport.test.jsx | 223 ++++++++++++
 apps/zoom-app/src/b/AgendaTabB.jsx        | 404 ++++++++++++++++++++++
 apps/zoom-app/src/b/NewLookShell.jsx      |  16 +-
 apps/zoom-app/src/b/ReportTabB.jsx        | 279 +++++++++++++++
 apps/zoom-app/src/b/RulesSheet.jsx        | 207 +++++++++++
 5 files changed, 1121 insertions(+), 8 deletions(-)
 create mode 100644 apps/zoom-app/src/b/AgendaReport.test.jsx
 create mode 100644 apps/zoom-app/src/b/AgendaTabB.jsx
 create mode 100644 apps/zoom-app/src/b/ReportTabB.jsx
 create mode 100644 apps/zoom-app/src/b/RulesSheet.jsx

diff --git a/apps/zoom-app/src/b/AgendaReport.test.jsx b/apps/zoom-app/src/b/AgendaReport.test.jsx
new file mode 100644
index 0000000..1415a80
--- /dev/null
+++ b/apps/zoom-app/src/b/AgendaReport.test.jsx
@@ -0,0 +1,223 @@
+import '@testing-library/jest-dom';
+import { act, fireEvent, render, screen, within } from '@testing-library/react';
+import {
+  resetClubForTests,
+  resetEntitlementForTests,
+  resetFlagsForTests,
+  setEntitlement,
+  setFlags,
+} from '@toastmaster-timer/shared';
+import { ToastProvider } from '../context/ToastContext';
+import { TimerProvider } from '../context/TimerContext';
+import AgendaTabB from './AgendaTabB';
+import ReportTabB from './ReportTabB';
+import RulesSheet from './RulesSheet';
+
+vi.mock('../utils/posthog', () => ({ trackEvent: vi.fn() }));
+vi.mock('../utils/zoomSdk', () => ({
+  getVideoState: vi.fn().mockResolvedValue(null),
+  setVideoState: vi.fn(),
+  applyOverlay: vi.fn(),
+  removeOverlay: vi.fn(),
+  clearVideoPipelines: vi.fn().mockResolvedValue({ ok: true, declined: false, ungranted: [], lostBackground: false }),
+  isOverlayActive: vi.fn(() => false),
+  getBackgroundUrl: vi.fn((color) => `/backgrounds/${color}.png`),
+  getSdkStatus: vi.fn(() => ({ initialized: true, available: false, sdkExists: false, missingApis: [], apiCount: 0 })),
+  setLogCallback: vi.fn(),
+  getOverlayMode: vi.fn(() => 'camera'),
+  setOverlayMode: vi.fn().mockResolvedValue(undefined),
+  getOverlayTimePosition: vi.fn(() => ({ x: 0.18, y: 0.3 })),
+  setOverlayTimePosition: vi.fn(),
+  getOverlayTimeScale: vi.fn(() => 0.18),
+  setOverlayTimeScale: vi.fn((scale) => scale),
+  isOverlayTimeVisible: vi.fn(() => true),
+  setOverlayTimeVisible: vi.fn(),
+  setOverlayTimeLabel: vi.fn(),
+  setPopoutChangeCallback: vi.fn(),
+  setShareChangeCallback: vi.fn(),
+  setAppShare: vi.fn(),
+  setAppPopout: vi.fn(),
+  isAppShareActive: vi.fn(() => false),
+  isAppPoppedOut: vi.fn(() => false),
+  isVideoOverlayMode: vi.fn((mode) => mode !== 'stage'),
+  getClubBadgePlacement: vi.fn(() => ({ x: 0.8, y: 0.12, scale: 0.12, visible: true })),
+  setClubBadgePlacement: vi.fn((patch) => ({ x: 0.8, y: 0.12, scale: 0.12, visible: true, ...patch })),
+  resetClubBadgePlacement: vi.fn(() => ({ x: 0.8, y: 0.12, scale: 0.12, visible: true })),
+  isClubBadgeMoved: vi.fn(() => false),
+  getZoomParticipants: vi.fn().mockResolvedValue({ participants: [], role: 'host', restricted: false }),
+  getCardFileUrl: vi.fn((file) => `/cards/${file}`),
+  notifyCardImagesChanged: vi.fn(),
+  preloadBackgroundImages: vi.fn(),
+  notifyOwnBackgroundChanged: vi.fn(),
+  applyOwnBackground: vi.fn(),
+  removeOwnBackground: vi.fn(),
+  openExternalUrl: vi.fn(async () => true),
+  OVERLAY_MODE_CARD: 'card',
+  OVERLAY_MODE_CAMERA: 'camera',
+  OVERLAY_MODE_STAGE: 'stage',
+}));
+vi.mock('../utils/zoomIdentity', () => ({
+  resolveZoomIdentity: vi.fn(async () => ({ identified: false })),
+  getSessionToken: vi.fn(() => null),
+}));
+
+const wrap = (ui) =>
+  render(
+    <ToastProvider>
+      <TimerProvider>{ui}</TimerProvider>
+    </ToastProvider>
+  );
+
+const seedAgenda = (items) => localStorage.setItem('toastmaster_agenda', JSON.stringify(items));
+const seedReports = (items) => localStorage.setItem('toastmaster_reports', JSON.stringify(items));
+
+beforeEach(() => {
+  localStorage.clear();
+  resetFlagsForTests();
+  resetEntitlementForTests();
+  resetClubForTests();
+});
+
+describe('the new-look Agenda tab', () => {
+  it('offers the paste and the add when there is no agenda', () => {
+    wrap(<AgendaTabB />);
+    expect(screen.getByText('No speakers yet')).toBeInTheDocument();
+    fireEvent.click(screen.getByRole('button', { name: 'Paste from EasySpeak' }));
+    expect(screen.getByRole('dialog', { name: 'Paste agenda' })).toBeInTheDocument();
+    expect(screen.getByRole('tab', { name: 'From EasySpeak' })).toHaveAttribute('aria-selected', 'true');
+  });
+
+  it('counts a one-per-line paste before adding it, and leaves an unknown role for a pick', () => {
+    wrap(<AgendaTabB />);
+    fireEvent.click(screen.getByRole('button', { name: 'Paste from EasySpeak' }));
+    fireEvent.click(screen.getByRole('tab', { name: 'One per line' }));
+    fireEvent.change(screen.getByRole('textbox', { name: 'One speaker per line' }), {
+      target: { value: 'Ana (Ice Breaker)\nAlex (Table Topics Master)' },
+    });
+    expect(screen.getByText(/Found 2 speakers/)).toBeInTheDocument();
+    fireEvent.click(screen.getByRole('button', { name: 'Add 2 speakers' }));
+
+    expect(screen.queryByRole('dialog')).toBeNull();
+    const list = screen.getByRole('list', { name: 'Agenda' });
+    expect(within(list).getByText('Ana')).toBeInTheDocument();
+    expect(screen.getByText(/1 row needs a role/)).toBeInTheDocument();
+    fireEvent.change(screen.getByRole('combobox', { name: 'Pick a role for Alex' }), { target: { value: 'Table Topics Speech' } });
+    expect(screen.queryByText(/row needs a role/)).toBeNull();
+  });
+
+  it('adds a speaker from the sheet with the role\'s times shown', () => {
+    wrap(<AgendaTabB />);
+    fireEvent.click(screen.getByRole('button', { name: 'Add a speaker' }));
+    const sheet = screen.getByRole('dialog', { name: 'Add speaker' });
+    expect(within(sheet).getByRole('button', { name: 'Add to agenda' })).toBeDisabled();
+    fireEvent.change(within(sheet).getByRole('textbox', { name: 'Name' }), { target: { value: 'Priya' } });
+    fireEvent.change(within(sheet).getByRole('combobox', { name: 'Role' }), { target: { value: 'Ice Breaker' } });
+    expect(within(sheet).getByText('Green 4:00')).toBeInTheDocument();
+    fireEvent.click(within(sheet).getByRole('button', { name: 'Add to agenda' }));
+    expect(within(screen.getByRole('list', { name: 'Agenda' })).getByText('Priya')).toBeInTheDocument();
+  });
+
+  it('puts a speaker on the timer, but not one that needs a role', () => {
+    seedAgenda([
+      { id: 'a1', name: 'Bob', role: 'Ice Breaker', completed: false },
+      { id: 'a2', name: 'Alex', role: 'Table Topics Master', completed: false },
+    ]);
+    const onSwitchToLive = vi.fn();
+    wrap(<AgendaTabB onSwitchToLive={onSwitchToLive} />);
+    fireEvent.click(screen.getByRole('button', { name: 'Alex: pick a role first' }));
+    expect(onSwitchToLive).not.toHaveBeenCalled();
+    fireEvent.click(screen.getByRole('button', { name: 'Put Bob on the timer' }));
+    expect(onSwitchToLive).toHaveBeenCalled();
+  });
+
+  it('asks before clearing the agenda', () => {
+    seedAgenda([{ id: 'a1', name: 'Bob', role: 'Ice Breaker', completed: false }]);
+    wrap(<AgendaTabB />);
+    fireEvent.click(screen.getByRole('button', { name: 'Clear the agenda' }));
+    fireEvent.click(screen.getAllByRole('button', { name: 'Clear the agenda' }).slice(-1)[0]);
+    expect(screen.getByText('No speakers yet')).toBeInTheDocument();
+  });
+});
+
+describe('the new-look Report tab', () => {
+  it('sends an empty report back to the timer', () => {
+    const onGoToTimer = vi.fn();
+    wrap(<ReportTabB onGoToTimer={onGoToTimer} />);
+    expect(screen.getByText('No speeches timed yet')).toBeInTheDocument();
+    fireEvent.click(screen.getByRole('button', { name: 'Go to the timer' }));
+    expect(onGoToTimer).toHaveBeenCalled();
+  });
+
+  it('lists each speech with its time, colour or over time, and comment', () => {
+    seedReports([
+      { speechId: 's1', name: 'Bob', role: 'Ice Breaker', duration: '05:42', color: 'yellow' },
+      { speechId: 's2', name: 'Alex', role: 'Table Topics Speech', duration: '02:41', color: 'red', disqualified: true },
+      { speechId: 's3', name: 'Sam', role: 'Speech Evaluation', duration: '01:12', color: 'blue', comments: 'Stopped early' },
+    ]);
+    wrap(<ReportTabB />);
+    expect(screen.getByText('3 speeches · 1 over time')).toBeInTheDocument();
+    const rows = within(screen.getByRole('list', { name: 'Speeches timed' })).getAllByRole('listitem');
+    // Capitalised by CSS; the text itself is the stored colour.
+    expect(rows[0]).toHaveTextContent('BobIce Breaker05:42yellow');
+    expect(rows[1]).toHaveTextContent('OVER TIME');
+    expect(rows[2]).toHaveTextContent('“Stopped early”');
+    expect(screen.getByText(/still talking past red/)).toBeInTheDocument();
+  });
+
+  it('copies the report as text', async () => {
+    seedReports([{ speechId: 's1', name: 'Bob', role: 'Ice Breaker', duration: '05:42', color: 'yellow' }]);
+    const writeText = vi.fn(async () => {});
+    Object.defineProperty(navigator, 'clipboard', { value: { writeText }, configurable: true });
+    wrap(<ReportTabB />);
+    await act(async () => {
+      fireEvent.click(screen.getByRole('button', { name: 'Copy report' }));
+    });
+    expect(writeText).toHaveBeenCalledWith(expect.stringContaining('Bob\tIce Breaker\t05:42\tyellow'));
+  });
+
+  it('pitches Pro only once it can be bought, and never to a Pro plan', () => {
+    seedReports([{ speechId: 's1', name: 'Bob', role: 'Ice Breaker', duration: '05:42', color: 'yellow' }]);
+    setFlags({ pro: false });
+    setEntitlement({ plan: 'free' });
+    const view = wrap(<ReportTabB />);
+    expect(screen.queryByRole('button', { name: 'See Pro' })).toBeNull();
+    view.unmount();
+
+    act(() => setFlags({ pro: true }));
+    wrap(<ReportTabB />);
+    expect(screen.getByRole('button', { name: 'See Pro' })).toBeInTheDocument();
+  });
+});
+
+describe('the Roles & timing rules sheet', () => {
+  it('lists every role with its times, and opens one to edit', () => {
+    wrap(<RulesSheet open onClose={() => {}} />);
+    const sheet = screen.getByRole('dialog', { name: 'Roles & timing rules' });
+    expect(within(sheet).getByRole('button', { name: /Ice Breaker\s*4:00 · 5:00 · 6:00/ })).toBeInTheDocument();
+    fireEvent.click(within(sheet).getByRole('button', { name: /Ice Breaker/ }));
+    expect(within(sheet).getByLabelText('Green')).toHaveValue('4:00');
+    expect(within(sheet).getByRole('button', { name: 'Remove Ice Breaker' })).toBeInTheDocument();
+  });
+
+  it('saves an edited time', async () => {
+    const onClose = vi.fn();
+    wrap(<RulesSheet open onClose={onClose} />);
+    const sheet = screen.getByRole('dialog', { name: 'Roles & timing rules' });
+    fireEvent.click(within(sheet).getByRole('button', { name: /Ice Breaker/ }));
+    const green = within(sheet).getByLabelText('Green');
+    fireEvent.change(green, { target: { value: '3:30' } });
+    fireEvent.blur(green);
+    await act(async () => {
+      fireEvent.click(within(sheet).getByRole('button', { name: 'Save' }));
+    });
+    expect(onClose).toHaveBeenCalled();
+    const stored = JSON.parse(localStorage.getItem('toastmaster_role_rules') || '{}');
+    expect(stored['Ice Breaker']?.green).toBe(210);
+  });
+
+  it('adds a role that opens for its name', () => {
+    wrap(<RulesSheet open onClose={() => {}} />);
+    fireEvent.click(screen.getByRole('button', { name: 'Add role' }));
+    expect(screen.getByRole('textbox', { name: 'Role name' })).toBeInTheDocument();
+  });
+});
diff --git a/apps/zoom-app/src/b/AgendaTabB.jsx b/apps/zoom-app/src/b/AgendaTabB.jsx
new file mode 100644
index 0000000..534e878
--- /dev/null
+++ b/apps/zoom-app/src/b/AgendaTabB.jsx
@@ -0,0 +1,404 @@
+import { memo, useMemo } from 'react';
+import { AlertTriangle, Check, ClipboardList, GripVertical, Info, Pencil, Plus, Trash2, Upload } from 'lucide-react';
+import { DndContext, closestCenter } from '@dnd-kit/core';
+import { SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { DEFAULT_CUSTOM_RULES, parseEasySpeakText, parseSimpleFormatText, saveTimeInputMode } from '@toastmaster-timer/shared';
+import { useTimer } from '../context/TimerContext';
+import { useAgendaEditor } from '../hooks/useAgendaEditor';
+import ConfirmModal from '../components/ConfirmModal';
+import Sheet from './Sheet';
+import { CustomTimesPanel } from './TimerPanels';
+import { formatThreshold, thresholdsLine } from './format';
+
+const PRIMARY = 'flex items-center justify-center gap-2 rounded-xl bg-blue-600 font-bold text-white hover:bg-blue-700 disabled:cursor-not-allowed disabled:bg-blue-300';
+const SECONDARY = 'flex items-center justify-center gap-2 rounded-xl border border-gray-300 bg-white font-semibold text-gray-900 hover:bg-slate-50';
+
+/** One agenda row (board B-G02): drag dots, the name, what the row is set to, and edit / remove on hover. */
+function AgendaRow({ item, isActive, needsRole, done, roleOptions, roleRules, onPickRole, onEdit, onDelete, onClick }) {
+  const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: item.id });
+  const rules = roleRules[item.role] || item.rules;
+  const roleText = item.role === 'Short Roles' && item.originalShortRole ? `Short Roles - ${item.originalShortRole}` : item.role;
+
+  return (
+    <li
+      ref={setNodeRef}
+      style={{ transform: CSS.Transform.toString(transform), transition }}
+      data-needs-role={needsRole || undefined}
+      className={`group/row flex items-center gap-2.5 border-b border-slate-100 px-2.5 py-2.5 last:border-b-0 ${
+        needsRole ? 'border-l-4 border-l-red-500 bg-red-50' : isActive ? 'bg-blue-50' : 'bg-white'
+      }`}
+    >
+      {item.completed ? (
+        <span className="flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-green-500" aria-label="Done">
+          <Check className="h-3.5 w-3.5 text-white" strokeWidth={3} aria-hidden="true" />
+        </span>
+      ) : (
+        <button
+          type="button"
+          {...attributes}
+          {...listeners}
+          aria-label={`Reorder ${item.name}`}
+          className="flex-shrink-0 cursor-grab touch-none text-slate-400 hover:text-slate-600 active:cursor-grabbing"
+        >
+          <GripVertical className="h-5 w-5" aria-hidden="true" />
+        </button>
+      )}
+
+      <div className="min-w-0 flex-1">
+        <button
+          type="button"
+          onClick={onClick}
+          className="block w-full min-w-0 text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
+          aria-label={needsRole ? `${item.name}: pick a role first` : `Put ${item.name} on the timer`}
+        >
+          <span className="flex items-center gap-1.5">
+            <strong className="truncate text-sm text-gray-900">{item.name}</strong>
+            {isActive && !item.completed && (
+              <span className="flex-shrink-0 rounded bg-blue-600 px-1.5 py-px text-[10px] font-bold tracking-wide text-white">
+                ON THE TIMER
+              </span>
+            )}
+          </span>
+          {!needsRole && (
+            <span className="block truncate text-xs text-slate-500">
+              {roleText}
+              {done ? ` · ${done.duration} · ${done.color}` : rules ? ` · ${thresholdsLine(rules)}` : ''}
+            </span>
+          )}
+        </button>
+        {needsRole && (
+          <>
+            <span className="mt-0.5 flex items-start gap-1 text-xs text-red-700">
+              <AlertTriangle className="mt-px h-3.5 w-3.5 flex-shrink-0" aria-hidden="true" />
+              {item.role ? `(${item.role}) is not one of your roles` : 'No role given'}
+            </span>
+            <select
+              aria-label={`Pick a role for ${item.name}`}
+              value=""
+              onChange={(event) => onPickRole(item, event.target.value)}
+              className="mt-1 w-full rounded-lg border border-red-300 bg-white px-2 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-red-400"
+            >
+              <option value="" disabled>
+                Pick a role…
+              </option>
+              {roleOptions.map((role) => (
+                <option key={role} value={role}>
+                  {role}
+                </option>
+              ))}
+            </select>
+          </>
+        )}
+      </div>
+
+      <div className="flex flex-shrink-0 items-center gap-1 opacity-0 transition-opacity focus-within:opacity-100 group-hover/row:opacity-100">
+        <button type="button" onClick={() => onEdit(item)} aria-label={`Edit ${item.name}`} className="rounded p-1 text-slate-400 hover:text-blue-600">
+          <Pencil className="h-4 w-4" aria-hidden="true" />
+        </button>
+        <button type="button" onClick={() => onDelete(item.id)} aria-label={`Delete ${item.name}`} className="rounded p-1 text-slate-400 hover:text-red-600">
+          <Trash2 className="h-4 w-4" aria-hidden="true" />
+        </button>
+      </div>
+    </li>
+  );
+}
+
+/** How many speakers a paste will add, before it is added. */
+function countFound(tab, text, roleOptions) {
+  if (!text.trim()) return 0;
+  try {
+    const found = tab === 'easyspeak' ? parseEasySpeakText(text) : parseSimpleFormatText(text, roleOptions);
+    return Array.isArray(found) ? found.length : 0;
+  } catch {
+    return 0;
+  }
+}
+
+/**
+ * Design B's Agenda tab (boards B-G01 to B-G04): the evening's speakers in
+ * order, a paste sheet for EasySpeak or one name per line, and an add / edit
+ * sheet. The same agenda, imports and rules as today's tab, from
+ * useAgendaEditor; only the look is new.
+ */
+export default memo(function AgendaTabB({ onSwitchToLive }) {
+  const a = useAgendaEditor({ onSwitchToLive });
+  const { reports, roleRules } = useTimer();
+
+  // A finished row shows how it went: the newest report for that name and role.
+  const doneFor = useMemo(() => {
+    const byKey = new Map();
+    for (const report of reports) byKey.set(`${report.name}\u0000${report.role}`, report);
+    return (item) => (item.completed ? byKey.get(`${item.name}\u0000${item.role}`) : null);
+  }, [reports]);
+
+  const openImport = () => {
+    a.setImportTab('easyspeak');
+    a.setImportText('');
+    a.setEasySpeakText('');
+    a.setShowImportModal(true);
+  };
+  const closeImport = () => {
+    a.setShowImportModal(false);
+    a.setImportText('');
+    a.setEasySpeakText('');
+    a.setImportTab('easyspeak');
+  };
+  const openAdd = () => {
+    a.setEditItem(null);
+    a.setNewSpeakerName('');
+    a.setNewSpeakerRole(a.defaultRole);
+    a.setCustomRules({ ...DEFAULT_CUSTOM_RULES });
+    a.setShowAddModal(true);
+  };
+  const closeAdd = () => {
+    a.setShowAddModal(false);
+    a.setEditItem(null);
+    a.setNewSpeakerName('');
+    a.setNewSpeakerRole(a.defaultRole);
+    a.setCustomRules({ ...DEFAULT_CUSTOM_RULES });
+  };
+
+  const importText = a.importTab === 'easyspeak' ? a.easySpeakText : a.importText;
+  const found = countFound(a.importTab, importText, a.roleOptions);
+  const addRules = a.newSpeakerRole && a.newSpeakerRole !== 'Custom' ? roleRules[a.newSpeakerRole] : null;
+  const count = a.agenda.length;
+
+  return (
+    <div className="flex min-h-full flex-col gap-3.5 px-4 pb-4 pt-2">
+      <div className="flex items-center gap-2">
+        <h2 className="m-0 flex-1 text-lg font-bold">Today&apos;s agenda</h2>
+        {count === 0 ? (
+          <span className="text-xs text-slate-400">0 speakers</span>
+        ) : (
+          <>
+            <button type="button" onClick={openImport} aria-label="Paste agenda" className="flex items-center gap-1.5 rounded-lg border border-gray-300 px-2.5 py-1.5 text-[13px] font-semibold hover:bg-slate-50">
+              <Upload className="h-3.5 w-3.5" aria-hidden="true" />
+              Paste
+            </button>
+            <button type="button" onClick={openAdd} className="flex items-center gap-1.5 rounded-lg bg-blue-600 px-2.5 py-1.5 text-[13px] font-semibold text-white hover:bg-blue-700">
+              <Plus className="h-3.5 w-3.5" aria-hidden="true" />
+              Add
+            </button>
+          </>
+        )}
+      </div>
+
+      {count === 0 ? (
+        <div className="flex flex-1 flex-col items-center justify-center gap-3 px-3 text-center">
+          <span className="flex h-[84px] w-[84px] items-center justify-center rounded-3xl bg-blue-50">
+            <ClipboardList className="h-10 w-10 text-blue-600" strokeWidth={1.8} aria-hidden="true" />
+          </span>
+          <strong className="text-[17px]">No speakers yet</strong>
+          <p className="m-0 text-sm leading-relaxed text-slate-600">
+            Add the evening&apos;s speakers once. The timer then loads each one in order, with their role and times.
+          </p>
+          <div className="mt-2 flex w-full flex-col gap-2">
+            <button type="button" onClick={openImport} className={`${PRIMARY} h-[46px] text-[15px]`}>
+              <Upload className="h-4 w-4" aria-hidden="true" />
+              Paste from EasySpeak
+            </button>
+            <button type="button" onClick={openAdd} className={`${SECONDARY} h-[46px] text-[15px]`}>
+              <Plus className="h-4 w-4" aria-hidden="true" />
+              Add a speaker
+            </button>
+          </div>
+        </div>
+      ) : (
+        <>
+          {a.needsRoleCount > 0 && (
+            <div role="status" className="flex items-start gap-2 rounded-xl border border-red-200 bg-red-50 px-3 py-2.5 text-[13px] text-red-800">
+              <AlertTriangle className="mt-px h-4 w-4 flex-shrink-0" aria-hidden="true" />
+              <span>
+                {a.needsRoleCount === 1 ? '1 row needs a role' : `${a.needsRoleCount} rows need a role`}. Nothing was guessed: pick one of
+                your roles on {a.needsRoleCount === 1 ? 'the red row' : 'each red row'}.
+              </span>
+            </div>
+          )}
+          <DndContext sensors={a.sensors} collisionDetection={closestCenter} onDragEnd={a.handleDragEnd}>
+            <SortableContext items={a.agenda.map((item) => item.id)} strategy={verticalListSortingStrategy}>
+              <ol aria-label="Agenda" className="m-0 list-none overflow-hidden rounded-xl border border-gray-200 p-0">
+                {a.agenda.map((item) => (
+                  <AgendaRow
+                    key={item.id}
+                    item={item}
+                    isActive={a.activeSpeakerId === item.id}
+                    needsRole={a.needsRole(item)}
+                    done={doneFor(item)}
+                    roleOptions={a.roleOptions}
+                    roleRules={roleRules}
+                    onPickRole={a.handlePickRole}
+                    onEdit={a.handleEdit}
+                    onDelete={a.handleDelete}
+                    onClick={() => a.handleSpeakerClick(item)}
+                  />
+                ))}
+              </ol>
+            </SortableContext>
+          </DndContext>
+          <p className="m-0 text-xs leading-relaxed text-slate-500">
+            Tap a speaker to put them on the timer. Drag the dots to reorder. Point at a row for edit and remove.
+          </p>
+          <div className="flex justify-center">
+            <button type="button" onClick={a.handleClearAll} className="text-[13px] font-semibold text-red-600 hover:underline">
+              Clear the agenda
+            </button>
+          </div>
+        </>
+      )}
+
+      {count === 0 && (
+        <div className="flex gap-2.5 rounded-xl bg-slate-50 px-3 py-2.5 text-xs leading-relaxed text-slate-600">
+          <Info className="mt-px h-4 w-4 flex-shrink-0 text-slate-500" aria-hidden="true" />
+          <span>No agenda? You can still type a name straight on the Timer tab.</span>
+        </div>
+      )}
+
+      <Sheet open={a.showImportModal} onClose={closeImport} title="Paste agenda">
+        <div role="tablist" aria-label="Agenda format" className="mb-3 flex gap-0.5 rounded-[9px] bg-slate-100 p-[3px]">
+          {[
+            ['easyspeak', 'From EasySpeak'],
+            ['simple', 'One per line'],
+          ].map(([id, label]) => (
+            <button
+              key={id}
+              type="button"
+              role="tab"
+              aria-selected={a.importTab === id}
+              onClick={() => a.setImportTab(id)}
+              className={`flex-1 rounded-[7px] py-1.5 text-[13px] ${a.importTab === id ? 'bg-white font-semibold shadow-sm' : 'text-slate-600'}`}
+            >
+              {label}
+            </button>
+          ))}
+        </div>
+        {a.importTab === 'easyspeak' ? (
+          <ol className="mb-2.5 mt-0 list-decimal space-y-0.5 pl-5 text-[13px] text-slate-600">
+            <li>Open the meeting in EasySpeak.</li>
+            <li>Select the whole agenda and copy it.</li>
+            <li>Paste it below. Roles we know get their times.</li>
+          </ol>
+        ) : (
+          <p className="mb-2.5 mt-0 text-[13px] text-slate-600">
+            One speaker per line, with the role in brackets as your role list spells it: &ldquo;Sarah Smith (Standard Speech)&rdquo;. A row
+            whose role is not in the list stays red for you to pick.
+          </p>
+        )}
+        <textarea
+          aria-label={a.importTab === 'easyspeak' ? 'EasySpeak agenda' : 'One speaker per line'}
+          value={importText}
+          onChange={(event) =>
+            a.importTab === 'easyspeak' ? a.setEasySpeakText(event.target.value) : a.setImportText(event.target.value)
+          }
+          placeholder={a.importTab === 'easyspeak' ? 'Paste the EasySpeak agenda here…' : 'John Doe (Ice Breaker)\nSarah Smith (Standard Speech)'}
+          className="h-40 w-full rounded-xl border border-gray-300 p-2.5 font-mono text-xs focus:outline-none focus:ring-2 focus:ring-blue-500"
+        />
+        <p className="mb-0 mt-2 text-xs text-slate-500">
+          {found > 0
+            ? `Found ${found} ${found === 1 ? 'speaker' : 'speakers'}. Rows we can't match stay red for you to pick.`
+            : 'Nothing found yet.'}
+        </p>
+        <div className="mt-3 flex gap-2">
+          <button type="button" onClick={closeImport} className={`${SECONDARY} h-11 flex-1 text-sm`}>
+            Cancel
+          </button>
+          <button
+            type="button"
+            disabled={!importText.trim()}
+            onClick={a.importTab === 'easyspeak' ? a.handleEasySpeakImport : a.handleSimpleImport}
+            className={`${PRIMARY} h-11 flex-1 text-sm`}
+          >
+            {found > 0 ? `Add ${found} ${found === 1 ? 'speaker' : 'speakers'}` : 'Add speakers'}
+          </button>
+        </div>
+      </Sheet>
+
+      <Sheet open={a.showAddModal} onClose={closeAdd} title={a.editItem ? 'Edit speaker' : 'Add speaker'}>
+        <div className="flex flex-col gap-3">
+          <label className="flex flex-col gap-1 text-[13px] font-semibold text-slate-700">
+            Name
+            <input
+              value={a.newSpeakerName}
+              onChange={(event) => a.setNewSpeakerName(event.target.value)}
+              placeholder="Speaker's name"
+              className="h-10 rounded-lg border border-gray-300 px-2.5 text-sm font-normal text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-500"
+            />
+          </label>
+          <label className="flex flex-col gap-1 text-[13px] font-semibold text-slate-700">
+            Role
+            <select
+              value={a.newSpeakerRole}
+              onChange={(event) => a.setNewSpeakerRole(event.target.value)}
+              className="h-10 rounded-lg border border-gray-300 bg-white px-2 text-sm font-normal text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-500"
+            >
+              {!a.newSpeakerRole && (
+                <option value="" disabled>
+                  Pick a role…
+                </option>
+              )}
+              {a.roleOptions.map((role) => (
+                <option key={role} value={role}>
+                  {role}
+                </option>
+              ))}
+            </select>
+          </label>
+          {addRules && (
+            <div className="flex flex-wrap gap-1.5 text-xs">
+              <span className="rounded-md bg-green-50 px-2 py-1 text-green-700">Green {formatThreshold(addRules.green)}</span>
+              <span className="rounded-md bg-yellow-50 px-2 py-1 text-yellow-700">Yellow {formatThreshold(addRules.yellow)}</span>
+              <span className="rounded-md bg-red-50 px-2 py-1 text-red-700">Red {formatThreshold(addRules.red)}</span>
+              <span className="px-1 py-1 text-slate-500">Pick Custom to set your own</span>
+            </div>
+          )}
+          {a.newSpeakerRole === 'Custom' && (
+            <CustomTimesPanel
+              rules={a.customRules}
+              mode={a.timeInputMode}
+              onModeChange={(mode) => {
+                saveTimeInputMode(mode);
+                a.setTimeInputMode(mode);
+              }}
+              onChange={a.handleCustomRuleChange}
+            />
+          )}
+        </div>
+        <div className="mt-4 flex gap-2">
+          <button type="button" onClick={closeAdd} className={`${SECONDARY} h-11 flex-1 text-sm`}>
+            Cancel
+          </button>
+          <button
+            type="button"
+            onClick={a.editItem ? a.handleUpdate : a.handleAdd}
+            disabled={!a.newSpeakerRole || !a.newSpeakerName.trim()}
+            className={`${PRIMARY} h-11 flex-1 text-sm`}
+          >
+            {a.editItem ? 'Save' : 'Add to agenda'}
+          </button>
+        </div>
+      </Sheet>
+
+      <ConfirmModal
+        isOpen={a.showDeleteConfirm}
+        title="Remove speaker"
+        message="Remove this speaker from the agenda?"
+        confirmText="Remove"
+        cancelText="Cancel"
+        onConfirm={a.handleConfirmDelete}
+        onCancel={() => {
+          a.setShowDeleteConfirm(false);
+          a.setDeleteItemId(null);
+        }}
+      />
+      <ConfirmModal
+        isOpen={a.showClearAllConfirm}
+        title="Clear the agenda"
+        message="Remove every speaker from today's agenda? This cannot be undone."
+        confirmText="Clear the agenda"
+        cancelText="Cancel"
+        onConfirm={a.handleConfirmClearAll}
+        onCancel={() => a.setShowClearAllConfirm(false)}
+      />
+    </div>
+  );
+});
diff --git a/apps/zoom-app/src/b/NewLookShell.jsx b/apps/zoom-app/src/b/NewLookShell.jsx
index 799a005..f1f9ebb 100644
--- a/apps/zoom-app/src/b/NewLookShell.jsx
+++ b/apps/zoom-app/src/b/NewLookShell.jsx
@@ -8,9 +8,9 @@ import ContactCapture from '../components/ContactCapture';
 import TopBar from './TopBar';
 
 const TimerTab = lazy(() => import('./TimerTab'));
-const AgendaTab = lazy(() => import('../components/AgendaTab'));
-const ReportTab = lazy(() => import('../components/ReportTab'));
-const EditRulesModal = lazy(() => import('../components/EditRulesModal'));
+const AgendaTabB = lazy(() => import('./AgendaTabB'));
+const ReportTabB = lazy(() => import('./ReportTabB'));
+const RulesSheet = lazy(() => import('./RulesSheet'));
 
 function TabFallback() {
   return (
@@ -25,8 +25,6 @@ function TabFallback() {
  * switch with the Pro chip and the ⋯ menu, then the tab. No footer: what it
  * held moved into the chip and the menu, which is what keeps the Timer tab's
  * Start button high in a 400px panel.
- *
- * The Agenda and Report tabs are today's until Phase 2 redraws them.
  */
 export default function NewLookShell() {
   const [activeTab, setActiveTab] = useState('live');
@@ -62,14 +60,16 @@ export default function NewLookShell() {
               onOpenRules={() => setShowRules(true)}
             />
           )}
-          {activeTab === 'agenda' && <AgendaTab onSwitchToLive={() => setActiveTab('live')} />}
-          {activeTab === 'report' && <ReportTab />}
+          {activeTab === 'agenda' && <AgendaTabB onSwitchToLive={() => setActiveTab('live')} />}
+          {activeTab === 'report' && <ReportTabB onGoToTimer={() => setActiveTab('live')} />}
         </div>
       </Suspense>
 
+      {/* Mounted only while open, as the old dialog was, so each open starts
+          from the rules as they are now. */}
       {showRules && (
         <Suspense fallback={null}>
-          <EditRulesModal isOpen={showRules} onClose={() => setShowRules(false)} />
+          <RulesSheet open={showRules} onClose={() => setShowRules(false)} />
         </Suspense>
       )}
       <PeriodicPrompts />
diff --git a/apps/zoom-app/src/b/ReportTabB.jsx b/apps/zoom-app/src/b/ReportTabB.jsx
new file mode 100644
index 0000000..c2ff7aa
--- /dev/null
+++ b/apps/zoom-app/src/b/ReportTabB.jsx
@@ -0,0 +1,279 @@
+import { lazy, memo, Suspense, useState } from 'react';
+import { Check, ChevronLeft, CloudOff, Copy, FileText, History, Share2, Sparkles, Trash2 } from 'lucide-react';
+import BrandedReportHeader from '@toastmaster-timer/ui/BrandedReportHeader';
+import ReportHistoryList from '@toastmaster-timer/ui/ReportHistoryList';
+import ShareStep from '@toastmaster-timer/ui/ShareStep';
+import { useReportView } from '../hooks/useReportView';
+import { useEntitlement } from '../hooks/useEntitlement';
+import { useFlag } from '../hooks/useFlag';
+import ConfirmModal from '../components/ConfirmModal';
+import Sheet from './Sheet';
+
+const UpgradeModal = lazy(() => import('../components/UpgradeModal'));
+
+const DOT = { blue: 'bg-[#4f86f7]', green: 'bg-green-500', yellow: 'bg-yellow-400', red: 'bg-red-500' };
+
+/** One timed speech (board B-R02): colour, who and what, the time and how it ended. */
+function SpeechRow({ speech }) {
+  return (
+    <li className="flex items-center gap-2.5 border-b border-slate-100 px-3 py-2.5 last:border-b-0">
+      <span aria-hidden="true" className={`h-3 w-3 flex-shrink-0 rounded-full ${DOT[speech.color] || 'bg-slate-300'}`} />
+      <span className="min-w-0 flex-1">
+        <strong className="block truncate text-sm text-gray-900">{speech.name || 'Unnamed'}</strong>
+        <span className="block truncate text-xs text-slate-500">
+          {speech.role}
+          {speech.comments ? (
+            <>
+              {' · '}
+              <em>&ldquo;{speech.comments}&rdquo;</em>
+            </>
+          ) : null}
+        </span>
+      </span>
+      <span className="flex-shrink-0 text-right">
+        <span className="block font-mono text-sm text-gray-900">{speech.duration}</span>
+        {speech.disqualified ? (
+          <span className="block text-[10px] font-bold tracking-wide text-red-600">OVER TIME</span>
+        ) : (
+          <span className="block text-xs capitalize text-slate-500">{speech.color}</span>
+        )}
+      </span>
+    </li>
+  );
+}
+
+function SpeechList({ speeches, label }) {
+  return (
+    <ol aria-label={label} className="m-0 list-none overflow-hidden rounded-xl border border-gray-200 p-0">
+      {speeches.map((speech, index) => (
+        <SpeechRow key={speech.speechId || index} speech={speech} />
+      ))}
+    </ol>
+  );
+}
+
+/**
+ * Design B's Report tab (boards B-R01 to B-R04): the speeches timed tonight,
+ * copy and clear, and for a club with Pro its archive, history and "End
+ * meeting & share". The same report as today's tab, from useReportView.
+ */
+export default memo(function ReportTabB({ onGoToTimer }) {
+  const r = useReportView();
+  const { isPro, known } = useEntitlement();
+  const { enabled: proEnabled, known: flagsKnown } = useFlag('pro');
+  const [showUpgrade, setShowUpgrade] = useState(false);
+  const overtime = r.reports.filter((report) => report.disqualified).length;
+  const count = r.reports.length;
+  const summary = `${count} ${count === 1 ? 'speech' : 'speeches'}${overtime ? ` · ${overtime} over time` : ''}`;
+  // The pitch only where Pro can be bought and the club's archive is not already on.
+  const offerPro = !r.archiving && known && !isPro && flagsKnown && proEnabled;
+
+  return (
+    <div className="flex min-h-full flex-col gap-3.5 px-4 pb-4 pt-2">
+      {r.archiving && (
+        <div className="flex items-center gap-2 rounded-xl border border-gray-200 bg-slate-50 px-3 py-2">
+          <span className="flex min-w-0 flex-1 items-center gap-2 text-xs text-slate-600" data-testid="club-archive-indicator">
+            {r.pending > 0 ? (
+              <>
+                <CloudOff className="h-4 w-4 flex-shrink-0" aria-hidden="true" />
+                <span className="truncate">
+                  {r.pending} {r.pending === 1 ? 'speech' : 'speeches'} waiting to upload
+                </span>
+              </>
+            ) : (
+              <>
+                <Check className="h-4 w-4 flex-shrink-0 text-green-600" aria-hidden="true" />
+                <span className="truncate">Saved to {r.archiveName}</span>
+              </>
+            )}
+          </span>
+          <button type="button" onClick={r.openHistory} className="flex flex-shrink-0 items-center gap-1 text-xs font-semibold text-blue-600 hover:text-blue-700">
+            <History className="h-4 w-4" aria-hidden="true" />
+            History
+          </button>
+        </div>
+      )}
+
+      <div className="flex items-baseline gap-2">
+        <h2 className="m-0 flex-1 text-lg font-bold">Timing report</h2>
+        <span className="text-xs text-slate-400">{summary}</span>
+      </div>
+
+      {count === 0 ? (
+        <div className="flex flex-1 flex-col items-center justify-center gap-3 px-3 text-center">
+          <span className="flex h-[84px] w-[84px] items-center justify-center rounded-3xl bg-blue-50">
+            <FileText className="h-10 w-10 text-blue-600" strokeWidth={1.8} aria-hidden="true" />
+          </span>
+          <strong className="text-[17px]">No speeches timed yet</strong>
+          <p className="m-0 text-sm leading-relaxed text-slate-600">
+            Each time you press Finish, the speaker, role, time and last colour land here, ready to read out or copy.
+          </p>
+          {onGoToTimer && (
+            <button type="button" onClick={onGoToTimer} className="mt-2 h-11 rounded-xl border border-gray-300 px-4 text-sm font-semibold hover:bg-slate-50">
+              Go to the timer
+            </button>
+          )}
+        </div>
+      ) : (
+        <>
+          {r.kit?.showOnReports && <BrandedReportHeader clubName={r.kit.name} primaryColor={r.kit.primaryColor} logoUrl={r.kit.logoUrl} />}
+          <SpeechList speeches={r.reports} label="Speeches timed" />
+          {overtime > 0 && <p className="m-0 text-xs text-slate-500">Over time: still talking past red plus the role&apos;s grace time.</p>}
+
+          {r.archiving && (
+            <button
+              type="button"
+              onClick={() => r.setShare({ phase: 'title', title: '', result: null })}
+              data-testid="end-meeting-share"
+              className="flex h-12 items-center justify-center gap-2 rounded-xl bg-gray-900 font-bold text-white hover:bg-black"
+            >
+              <Share2 className="h-5 w-5" aria-hidden="true" />
+              End meeting &amp; share
+            </button>
+          )}
+          <div className="flex gap-2">
+            <button type="button" onClick={r.copyToClipboard} className="flex h-11 flex-1 items-center justify-center gap-2 rounded-xl bg-blue-600 text-sm font-bold text-white hover:bg-blue-700">
+              {r.copied ? <Check className="h-4 w-4" aria-hidden="true" /> : <Copy className="h-4 w-4" aria-hidden="true" />}
+              {r.copied ? 'Copied' : 'Copy report'}
+            </button>
+            <button type="button" onClick={r.handleClear} className="flex h-11 items-center justify-center gap-2 rounded-xl border border-gray-300 px-4 text-sm font-semibold text-red-600 hover:bg-red-50">
+              <Trash2 className="h-4 w-4" aria-hidden="true" />
+              Clear
+            </button>
+          </div>
+          {r.archiving && <p className="m-0 text-xs text-slate-500">Clear empties this device&apos;s list only. The club&apos;s history keeps every speech.</p>}
+        </>
+      )}
+
+      {offerPro && count > 0 && (
+        <div className="flex items-center gap-2.5 rounded-xl bg-slate-50 px-3 py-2.5 text-xs leading-relaxed text-slate-600">
+          <Sparkles className="h-4 w-4 flex-shrink-0 text-blue-600" aria-hidden="true" />
+          <span className="flex-1">With Pro, every speech is saved to your club&apos;s history, and you can share the evening in one tap.</span>
+          <button type="button" onClick={() => setShowUpgrade(true)} className="flex-shrink-0 font-semibold text-blue-600 hover:underline">
+            See Pro
+          </button>
+        </div>
+      )}
+
+      <ConfirmModal
+        isOpen={r.showClearConfirm}
+        title="Clear the report"
+        message="Clear every speech from this device's report? This cannot be undone."
+        confirmText="Clear"
+        cancelText="Cancel"
+        onConfirm={r.handleConfirmClear}
+        onCancel={() => r.setShowClearConfirm(false)}
+      />
+
+      <Sheet
+        open={Boolean(r.share)}
+        onClose={() => r.setShare(null)}
+        title={r.share?.phase === 'done' ? 'Meeting saved' : 'End this meeting'}
+      >
+        <div data-testid="share-modal">
+          {r.share?.phase === 'title' && (
+            <div className="flex flex-col gap-3">
+              <label className="flex flex-col gap-1 text-[13px] font-semibold text-slate-700" htmlFor="meeting-title-b">
+                Give this meeting a name <span className="font-normal text-slate-400">(optional)</span>
+                <input
+                  id="meeting-title-b"
+                  type="text"
+                  value={r.share.title}
+                  maxLength={120}
+                  placeholder="Humorous Speech Contest"
+                  onChange={(event) => r.setShare((prev) => ({ ...prev, title: event.target.value }))}
+                  className="h-10 rounded-lg border border-gray-300 px-2.5 text-sm font-normal text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                />
+              </label>
+              <p className="m-0 text-xs text-slate-500">This closes {r.archiveName}&rsquo;s record of the evening. Nothing on this device is cleared.</p>
+              <button type="button" onClick={r.endMeeting} data-testid="confirm-end-meeting" className="h-11 rounded-xl bg-blue-600 text-sm font-bold text-white hover:bg-blue-700">
+                End meeting &amp; share
+              </button>
+            </div>
+          )}
+          {r.share?.phase === 'working' && <p className="py-8 text-center text-sm text-slate-500">Saving the meeting…</p>}
+          {r.share?.phase === 'done' && (
+            <ShareStep
+              clubName={r.archiveName}
+              date={r.share.result?.date}
+              title={r.share.result?.title}
+              speeches={r.share.result?.speeches ?? 0}
+              overtime={r.share.result?.overtime ?? 0}
+              url={r.share.result?.url ?? null}
+              primaryColor={r.kit?.primaryColor}
+              imageReady={Boolean(r.share.result?.blob)}
+              error={r.share.result?.url ? null : 'The link could not be created just now — the image below still works, and nothing is lost.'}
+              onShare={r.onShareChannel}
+            />
+          )}
+        </div>
+      </Sheet>
+
+      <Sheet
+        open={Boolean(r.history)}
+        onClose={() => {
+          r.setHistory(null);
+          r.setOpenMeeting(null);
+        }}
+        title={`${r.archiveName} history`}
+      >
+        <div data-testid="report-history-modal">
+          {r.openMeeting ? (
+            <>
+              <button type="button" onClick={() => r.setOpenMeeting(null)} className="mb-3 flex items-center gap-1 text-sm font-semibold text-blue-600 hover:text-blue-700">
+                <ChevronLeft className="h-4 w-4" aria-hidden="true" />
+                All meetings
+              </button>
+              {r.openMeeting.loading ? (
+                <p className="py-8 text-center text-sm text-slate-500">Loading the meeting…</p>
+              ) : r.openMeeting.error ? (
+                <p className="py-8 text-center text-sm text-slate-500">{r.openMeeting.error}</p>
+              ) : (
+                <div className="flex flex-col gap-3">
+                  {r.kit && (
+                    <BrandedReportHeader clubName={r.kit.name} primaryColor={r.kit.primaryColor} logoUrl={r.kit.logoUrl} date={r.openMeeting.meeting?.date} />
+                  )}
+                  <SpeechList speeches={r.openMeeting.meeting?.speeches ?? []} label="Speeches in this meeting" />
+                </div>
+              )}
+            </>
+          ) : (
+            r.history && (
+              <ReportHistoryList
+                meetings={r.history.meetings}
+                loading={r.history.loading}
+                error={r.history.error}
+                onSelect={r.selectMeeting}
+                primaryColor={r.kit?.primaryColor}
+              />
+            )
+          )}
+        </div>
+      </Sheet>
+
+      <Sheet
+        open={r.showClipboardFallback}
+        onClose={() => {
+          r.setShowClipboardFallback(false);
+          r.setClipboardText('');
+        }}
+        title="Copy the report"
+        description="This Zoom client would not let the app copy. Select the text and copy it yourself."
+      >
+        <textarea
+          value={r.clipboardText}
+          readOnly
+          aria-label="Report text"
+          onClick={(event) => event.target.select()}
+          className="h-48 w-full rounded-xl border border-gray-300 p-2.5 font-mono text-xs"
+        />
+      </Sheet>
+
+      {showUpgrade && (
+        <Suspense fallback={null}>
+          <UpgradeModal isOpen={showUpgrade} onClose={() => setShowUpgrade(false)} source="report" />
+        </Suspense>
+      )}
+    </div>
+  );
+});
diff --git a/apps/zoom-app/src/b/RulesSheet.jsx b/apps/zoom-app/src/b/RulesSheet.jsx
new file mode 100644
index 0000000..b8f39c8
--- /dev/null
+++ b/apps/zoom-app/src/b/RulesSheet.jsx
@@ -0,0 +1,207 @@
+import { useEffect, useState } from 'react';
+import { ChevronDown, Plus, Trash2, Users } from 'lucide-react';
+import { DEFAULT_CUSTOM_RULES, DEFAULT_ROLE_RULES, getDefaultGraceAfterRed, saveTimeInputMode } from '@toastmaster-timer/shared';
+import { useRulesEditor } from '../hooks/useRulesEditor';
+import ConfirmModal from '../components/ConfirmModal';
+import Sheet from './Sheet';
+import { TimeField, TimeModeSwitch } from './TimerPanels';
+import { thresholdsLine } from './format';
+
+/** The rules a row is showing: as edited, or the defaults it would start from. */
+function rulesFor(role, editedRules) {
+  const isNew = role.startsWith('__new_');
+  const rules = editedRules[role] ?? (isNew ? { ...DEFAULT_CUSTOM_RULES } : DEFAULT_ROLE_RULES[role] ?? { ...DEFAULT_CUSTOM_RULES });
+  const grace = rules.graceAfterRed ?? (isNew ? 30 : getDefaultGraceAfterRed(role));
+  return { isNew, rules, grace, invalid: rules.yellow <= rules.green || rules.red <= rules.yellow };
+}
+
+/**
+ * Roles & timing rules (board B-L08): every role as a row showing its times;
+ * one opens at a time to edit them. The club's list, sharing with the club,
+ * Reset all and Save work as in today's dialog, from useRulesEditor.
+ */
+export default function RulesSheet({ open, onClose }) {
+  const e = useRulesEditor({ isOpen: open, onClose });
+  const [expanded, setExpanded] = useState(null);
+  const onClub = e.source === 'club';
+
+  // A role added a moment ago opens, so its name can be typed straight away.
+  const newest = e.rolesToShow.filter((role) => role.startsWith('__new_')).slice(-1)[0] ?? null;
+  useEffect(() => {
+    if (newest) setExpanded(newest);
+  }, [newest]);
+  useEffect(() => {
+    if (!open) setExpanded(null);
+  }, [open]);
+
+  const changeMode = (mode) => {
+    saveTimeInputMode(mode);
+    e.setTimeInputMode(mode);
+  };
+
+  return (
+    <>
+      <Sheet open={open} onClose={onClose} title="Roles & timing rules">
+        <div className="mb-3 flex items-center gap-2">
+          <p className="m-0 flex-1 text-[13px] text-slate-500">The times each role starts with.</p>
+          <TimeModeSwitch mode={e.timeInputMode} onModeChange={changeMode} />
+        </div>
+
+        {e.clubHasPresets && (
+          <div className="mb-3 rounded-xl border border-blue-200 bg-blue-50 px-3 py-2.5 text-[13px] text-blue-900">
+            <div className="flex items-center gap-2">
+              <Users className="h-4 w-4 flex-shrink-0 text-blue-600" aria-hidden="true" />
+              <span className="min-w-0 flex-1">
+                {onClub ? (
+                  <>
+                    Using <strong>{e.clubName || 'your club'}</strong>&apos;s timings
+                  </>
+                ) : (
+                  'Using your own timings'
+                )}
+              </span>
+              <button
+                type="button"
+                onClick={onClub ? e.handleUseMyPresets : e.handleUseClubPresets}
+                className="flex-shrink-0 rounded-lg border border-blue-200 bg-white px-2.5 py-1 text-xs font-semibold text-blue-700 hover:bg-blue-100"
+              >
+                {onClub ? 'Use mine' : `Use ${e.clubName || 'the club'}'s`}
+              </button>
+            </div>
+            {!onClub && (
+              <button type="button" onClick={e.handleResetToClub} className="mt-1.5 text-xs font-semibold text-blue-700 hover:underline">
+                Reset to the club&apos;s timings
+              </button>
+            )}
+          </div>
+        )}
+        {!e.clubHasPresets && e.lapsedClub && (
+          <div className="mb-3 rounded-xl border border-amber-200 bg-amber-50 px-3 py-2.5 text-xs text-amber-900">
+            <strong className="block text-[13px]">{e.lapsedClub}&apos;s Pro has ended</strong>
+            These are your own timings again. Nothing was deleted: when the club renews, its shared timings come back.
+          </div>
+        )}
+
+        <div className="flex flex-col gap-1.5">
+          {e.rolesToShow.map((role) => {
+            const { isNew, rules, grace, invalid } = rulesFor(role, e.editedRules);
+            const name = isNew ? e.newRoleNames[role] || 'New role' : role;
+            const builtIn = !isNew && role in DEFAULT_ROLE_RULES;
+            if (expanded !== role) {
+              return (
+                <button
+                  key={role}
+                  type="button"
+                  onClick={() => setExpanded(role)}
+                  aria-expanded={false}
+                  className={`flex items-center gap-2 rounded-xl border px-3 py-2.5 text-left text-sm hover:bg-slate-50 ${invalid ? 'border-red-300' : 'border-gray-200'}`}
+                >
+                  <span className="min-w-0 flex-1 truncate">{name}</span>
+                  <span className="flex-shrink-0 text-xs text-slate-500">{thresholdsLine(rules)}</span>
+                  <ChevronDown className="h-3.5 w-3.5 flex-shrink-0 text-slate-400" aria-hidden="true" />
+                </button>
+              );
+            }
+            return (
+              <div key={role} className="rounded-xl border-2 border-blue-600 px-3 py-2.5">
+                <div className="mb-2 flex items-center gap-2">
+                  {isNew ? (
+                    <input
+                      value={e.newRoleNames[role] || ''}
+                      onChange={(event) => e.handleNewRoleNameChange(role, event.target.value)}
+                      placeholder="Role name"
+                      aria-label="Role name"
+                      className="h-8 min-w-0 flex-1 rounded-lg border border-gray-300 px-2 text-sm font-semibold focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    />
+                  ) : (
+                    <button type="button" onClick={() => setExpanded(null)} aria-expanded className="min-w-0 flex-1 truncate text-left text-sm font-bold">
+                      {role}
+                    </button>
+                  )}
+                  {builtIn && (
+                    <button type="button" onClick={() => e.handleReset(role)} className="flex-shrink-0 text-xs font-semibold text-blue-600 hover:underline">
+                      Reset
+                    </button>
+                  )}
+                  <button
+                    type="button"
+                    onClick={() => (isNew ? e.handleRemoveNewRole(role) : e.handleRemoveRole(role))}
+                    aria-label={`Remove ${name}`}
+                    className="flex-shrink-0 rounded p-1 text-slate-400 hover:text-red-600"
+                  >
+                    <Trash2 className="h-4 w-4" aria-hidden="true" />
+                  </button>
+                </div>
+                <div className="grid grid-cols-4 gap-1.5">
+                  <TimeField label="Green" tone="text-green-700" value={rules.green} mode={e.timeInputMode} onChange={(v) => e.handleRuleChange(role, 'green', v)} />
+                  <TimeField label="Yellow" tone="text-yellow-700" value={rules.yellow} mode={e.timeInputMode} onChange={(v) => e.handleRuleChange(role, 'yellow', v)} />
+                  <TimeField label="Red" tone="text-red-700" value={rules.red} mode={e.timeInputMode} onChange={(v) => e.handleRuleChange(role, 'red', v)} />
+                  <TimeField label="Grace" value={grace} mode={e.timeInputMode} onChange={(v) => e.handleRuleChange(role, 'graceAfterRed', v)} />
+                </div>
+                {invalid && <p className="mb-0 mt-1.5 text-xs text-red-600">Yellow must be after Green, and Red after Yellow.</p>}
+              </div>
+            );
+          })}
+          <button
+            type="button"
+            onClick={e.handleAddRole}
+            className="flex items-center justify-center gap-2 rounded-xl border border-dashed border-slate-300 py-2.5 text-sm text-slate-700 hover:bg-slate-50"
+          >
+            <Plus className="h-4 w-4" aria-hidden="true" />
+            Add role
+          </button>
+
+          {e.mayPublish && (
+            <div className="mt-1 flex items-center gap-2.5 rounded-xl bg-slate-50 px-3 py-2.5 text-xs text-slate-600">
+              <span className="min-w-0 flex-1">
+                <strong className="block text-[13px] text-gray-900">{e.clubName || 'Your club'}</strong>
+                {e.clubList?.publishedAt
+                  ? `Last shared ${new Date(e.clubList.publishedAt).toLocaleDateString()}.`
+                  : 'Nothing shared with your club yet.'}{' '}
+                Sharing replaces the list on every club timer.
+              </span>
+              <button
+                type="button"
+                onClick={e.handlePublish}
+                disabled={e.publishing}
+                className="flex-shrink-0 rounded-lg bg-blue-600 px-3 py-1.5 text-xs font-semibold text-white hover:bg-blue-700 disabled:opacity-60"
+              >
+                {e.publishing ? 'Sharing…' : 'Share'}
+              </button>
+            </div>
+          )}
+        </div>
+
+        <div className="sticky bottom-0 -mx-4 mt-4 flex gap-2 border-t border-slate-100 bg-white px-4 pt-3">
+          <button type="button" onClick={e.handleResetAll} className="h-11 rounded-xl border border-gray-300 px-4 text-sm font-semibold hover:bg-slate-50">
+            Reset all
+          </button>
+          <button type="button" onClick={e.handleSave} className="h-11 flex-1 rounded-xl bg-blue-600 text-sm font-bold text-white hover:bg-blue-700">
+            Save
+          </button>
+        </div>
+      </Sheet>
+
+      <ConfirmModal
+        isOpen={e.showForkConfirm}
+        title="Make your own copy?"
+        message={`These are ${e.clubName || 'your club'}'s timings. Saving makes your own copy and switches this device to it. The club's list stays where it is, one tap away.`}
+        confirmText="Make my copy"
+        cancelText="Cancel"
+        onConfirm={() => e.settleFork(true)}
+        onCancel={() => e.settleFork(false)}
+        confirmButtonClass="bg-blue-500 hover:bg-blue-600"
+      />
+      <ConfirmModal
+        isOpen={e.showResetAllConfirm}
+        title="Reset all rules"
+        message="Reset every built-in role to its default times? Your own roles stay."
+        confirmText="Reset all"
+        cancelText="Cancel"
+        onConfirm={e.handleConfirmResetAll}
+        onCancel={() => e.setShowResetAllConfirm(false)}
+        confirmButtonClass="bg-blue-500 hover:bg-blue-600"
+      />
+    </>
+  );
+}

From fae15dfac06a535a017397f01140ea7b7d81c803 Mon Sep 17 00:00:00 2001
From: Shuhao <shuhao.qgg.zhang@gmail.com>
Date: Sat, 14 Nov 2026 20:18:28 -0500
Subject: [PATCH 3/3] test: design B's Agenda, Report and rules in e2e and the
 new-look Zoom spec

---
 e2e/zoom-client/agenda-import.md |  1 +
 e2e/zoom-client/club-pro-gate.md |  1 +
 e2e/zoom-client/new-look.md      | 40 +++++++++++++++++-
 e2e/zoom.new-look.spec.js        | 69 ++++++++++++++++++++++++++++++++
 4 files changed, 109 insertions(+), 2 deletions(-)

diff --git a/e2e/zoom-client/agenda-import.md b/e2e/zoom-client/agenda-import.md
index db2a9ba..5c980c2 100644
--- a/e2e/zoom-client/agenda-import.md
+++ b/e2e/zoom-client/agenda-import.md
@@ -6,6 +6,7 @@ covers:
   - packages/shared/simpleFormatParser.js
   - apps/zoom-app/src/context/TimerContext.jsx
   - apps/zoom-app/src/components/AgendaTab.jsx
+  - apps/zoom-app/src/hooks/useAgendaEditor.js
 automated:
   - packages/shared/__tests__/simpleFormatParser.test.js
   - apps/zoom-app/src/context/TimerContext.test.jsx
diff --git a/e2e/zoom-client/club-pro-gate.md b/e2e/zoom-client/club-pro-gate.md
index 2bd235b..6596f08 100644
--- a/e2e/zoom-client/club-pro-gate.md
+++ b/e2e/zoom-client/club-pro-gate.md
@@ -8,6 +8,7 @@ covers:
   - packages/shared/clubArchive.js
   - apps/zoom-app/src/hooks/useClub.js
   - apps/zoom-app/src/components/ReportTab.jsx
+  - apps/zoom-app/src/hooks/useReportView.js
 automated:
   - packages/shared/__tests__/club.test.js
   - apps/zoom-app/src/components/CardImagesModal.test.jsx
diff --git a/e2e/zoom-client/new-look.md b/e2e/zoom-client/new-look.md
index 1834ba5..23e536b 100644
--- a/e2e/zoom-client/new-look.md
+++ b/e2e/zoom-client/new-look.md
@@ -7,12 +7,14 @@ covers:
   - apps/zoom-app/src/App.jsx
   - apps/zoom-app/src/hooks/useNewLook.js
   - apps/zoom-app/src/components/VideoPreviewLayer.jsx
+  - apps/zoom-app/src/hooks/useRulesEditor.js
 automated:
   - e2e/zoom.new-look.spec.js
   - apps/zoom-app/src/b/NewLookShell.test.jsx
   - apps/zoom-app/src/b/TimerCard.test.jsx
   - apps/zoom-app/src/b/TopBar.test.jsx
   - apps/zoom-app/src/b/Sheet.test.jsx
+  - apps/zoom-app/src/b/AgendaReport.test.jsx
   - apps/zoom-app/src/hooks/useNewLook.test.js
 needs:
   - dev deployed
@@ -123,8 +125,42 @@ disabled, and the status line "Start works once your video is on". Turn video on
 camera back and enables Start.
 Evidence: screenshots. Human: the camera toggle is the user's.
 
+### NL-13 · auto · Agenda: paste, pick the missing role, time from the agenda
+Do: Agenda tab → Paste from EasySpeak; paste `demo-agenda-easyspeak.txt`; Add. Then Paste → One
+per line: `NL One (Short Roles)` and `NL Two (Table Topics Master)`; Add. Pick Table Topics
+Speech on NL Two's red row. Tap NL One.
+Expect: the counts match ("Found N speakers"); NL Two is red with "(Table Topics Master) is not
+one of your roles" until a role is picked; tapping NL One opens the Timer tab with NL One on the
+card and "Up next: NL Two"; a Start there turns the video green at 0:30.
+Evidence: screenshots; `toastmaster_agenda`.
+
+### NL-14 · auto · Report: rows, copy, clear
+Do: finish two short speeches, one past red plus grace. Report tab → Copy report; Clear (cancel,
+then confirm).
+Expect: one row per speech with its colour dot, time and last colour, "OVER TIME" on the long
+one and the grace note under the list; the clipboard holds the tab-separated report; Clear asks
+first and then empties the list.
+Evidence: screenshots; clipboard text; `toastmaster_reports`.
+
+### NL-15 · auto · Report for a club with Pro: archive, history, share
+Do: with FLAGS_FORCE "1" on the club device, finish a speech; Report tab → History, open the
+newest meeting, back; End meeting & share with a name.
+Expect: "Saved to Claude Test Club" above the list (or "waiting to upload" while offline);
+History opens as a sheet listing meetings; the meeting opens with the club header; the share
+sheet ends with "Meeting saved", a link and the picture; the note says Clear only empties this
+device.
+Evidence: screenshots; `POST /api/club/meetings/...` in the Worker log.
+
+### NL-16 · auto · Roles & timing rules: edit, save, and the club's list
+Do: ⋯ → Roles & timing rules; open Short Roles; set Green to 0:20; Save. Start a Short Roles
+speech. On the club device (FLAGS_FORCE "1"), open the sheet again.
+Expect: rows show each role's three times; one row opens at a time; after Save the role list
+shows 0:20 · 0:45 · 1:00 and the video turns green at 0:20. On the club device the strip reads
+"Using Claude Test Club's timings" with "Use mine".
+Evidence: screenshots; `toastmaster_role_rules`.
+
 ## Not covered
 - Today's panel with `new_look` off: the other specs, run with FLAGS_FORCE "1,new_look=0".
 - Audio of the sounds: timer-sounds.
-- Agenda and Report tabs in the new look, the Roles & timing rules sheet, the Pro sheets,
-  the banners and the stage restyle: steps added with plan 13's Phases 2 and 3.
+- The Pro sheets, the banners and the stage restyle: steps added with plan 13's Phase 3.
+- Dragging agenda rows: the same dnd-kit sorting as today's tab, covered by the e2e and unit tests.
diff --git a/e2e/zoom.new-look.spec.js b/e2e/zoom.new-look.spec.js
index d17ff4b..5fd63d8 100644
--- a/e2e/zoom.new-look.spec.js
+++ b/e2e/zoom.new-look.spec.js
@@ -124,3 +124,72 @@ test('the ⋯ menu holds the footer\'s old buttons, and Pro once it is released'
   await menu.getByRole('menuitem', { name: 'Send feedback' }).click();
   await expect(menu).toHaveCount(0);
 });
+
+// ── Phase 2: Agenda, Report, Roles & timing rules ─────────────────────────
+
+const tab = (page, name) => page.getByRole('navigation', { name: 'Sections' }).getByRole('button', { name });
+
+test('agenda: paste one per line, pick the missing role, then time from the agenda', async ({ page }) => {
+  await openPanel(page);
+  await tab(page, 'Agenda').click();
+  await expect(page.getByText('No speakers yet')).toBeVisible();
+  await page.getByRole('button', { name: 'Paste from EasySpeak' }).click();
+  await page.getByRole('tab', { name: 'One per line' }).click();
+  await page.getByRole('textbox', { name: 'One speaker per line' }).fill('Ana (Ice Breaker)\nAlex (Table Topics Master)');
+  await expect(page.getByText('Found 2 speakers.', { exact: false })).toBeVisible();
+  await page.getByRole('button', { name: 'Add 2 speakers' }).click();
+
+  const list = page.getByRole('list', { name: 'Agenda' });
+  await expect(list.getByRole('listitem')).toHaveCount(2);
+  await expect(page.getByText('1 row needs a role', { exact: false })).toBeVisible();
+  // A row that needs a role is not loaded onto the timer.
+  await page.getByRole('button', { name: 'Alex: pick a role first' }).click();
+  await expect(page.getByTestId('timer-card')).toHaveCount(0);
+  await page.getByRole('combobox', { name: 'Pick a role for Alex' }).selectOption('Table Topics Speech');
+  await expect(page.getByText('1 row needs a role', { exact: false })).toHaveCount(0);
+
+  await page.getByRole('button', { name: 'Put Ana on the timer' }).click();
+  await expect(page.getByRole('button', { name: 'Speaker: Ana. Change speaker' })).toBeVisible();
+  await expect(page.getByTestId('up-next')).toContainText('Alex');
+});
+
+test('agenda: an EasySpeak paste fills the agenda', async ({ page }) => {
+  const { readFileSync } = await import('node:fs');
+  const text = readFileSync(new URL('../demo-agenda-easyspeak.txt', import.meta.url), 'utf8');
+  await openPanel(page);
+  await tab(page, 'Agenda').click();
+  await page.getByRole('button', { name: 'Paste from EasySpeak' }).click();
+  await page.getByRole('textbox', { name: 'EasySpeak agenda' }).fill(text);
+  await expect(page.getByText(/Found \d+ speakers?\./)).toBeVisible();
+  await page.getByRole('button', { name: /^Add \d+ speakers?$/ }).click();
+  expect(await page.getByRole('list', { name: 'Agenda' }).getByRole('listitem').count()).toBeGreaterThan(2);
+  expect(await noSidewaysScroll(page)).toBe(true);
+});
+
+test('report: empty, then a speech to copy; the rules sheet edits a role', async ({ page, context }) => {
+  await context.grantPermissions(['clipboard-read', 'clipboard-write']);
+  await openPanel(page);
+  await tab(page, 'Report').click();
+  await expect(page.getByText('No speeches timed yet')).toBeVisible();
+  await page.getByRole('button', { name: 'Go to the timer' }).click();
+
+  await page.getByRole('button', { name: 'Start' }).click();
+  await expect(page.getByTestId('timer-display')).not.toHaveText('00:00', { timeout: 4000 });
+  await page.getByRole('button', { name: 'Finish' }).click();
+  await tab(page, 'Report').click();
+  await expect(page.getByRole('list', { name: 'Speeches timed' }).getByRole('listitem')).toHaveCount(1);
+  await page.getByRole('button', { name: 'Copy report' }).click();
+  await expect(page.getByRole('button', { name: 'Copied' })).toBeVisible();
+
+  await page.getByRole('button', { name: 'More' }).click();
+  await page.getByRole('menuitem', { name: 'Roles & timing rules' }).click();
+  const sheet = page.getByRole('dialog', { name: 'Roles & timing rules' });
+  await sheet.getByRole('button', { name: /^Ice Breaker/ }).click();
+  await sheet.getByLabel('Green').fill('3:30');
+  await sheet.getByLabel('Green').blur();
+  await sheet.getByRole('button', { name: 'Save' }).click();
+  await expect(sheet).toHaveCount(0);
+  await tab(page, 'Timer').click();
+  await page.getByRole('button', { name: /Timing role/ }).click();
+  await expect(page.getByRole('option', { name: /Ice Breaker/ })).toContainText('3:30 · 5:00 · 6:00');
+});