Session + message pagination, SVG favicon, load-more buttons

app/history/[id]/page.tsx

@@ -25,7 +25,8 @@ export default function SessionReplayPage({ params }: { params: Promise<{ id: st
   const [editingTitle, setEditingTitle] = useState(false);
   const [titleDraft, setTitleDraft] = useState("");
   const { data: sessionData } = useSession(id);
-  const { data: messagesData, isLoading } = useMessages(id);
+  const [msgLimit, setMsgLimit] = useState(100);
+  const { data: messagesData, isLoading } = useMessages(id, msgLimit);
   const [input, setInput] = useState("");
   const [sending, setSending] = useState(false);
   const [pendingMsg, setPendingMsg] = useState<string | null>(null);
@@ -266,6 +267,17 @@ export default function SessionReplayPage({ params }: { params: Promise<{ id: st
               Empty session
             </p>
           )}
+
+          {/* Load more (at bottom = older messages since list is reversed) */}
+          {(messagesData?.total || 0) > msgLimit && (
+            <button
+              onClick={() => setMsgLimit((l) => l + 100)}
+              className="w-full py-3 mt-2 text-[13px] font-medium rounded-xl transition-colors"
+              style={{ color: "var(--accent)", background: "var(--accent-dim)" }}
+            >
+              Load older messages
+            </button>
+          )}
         </div>
       )}
     </div>