From 2550f4c4a7aeb34cda0e14b6816609806a4c734c Mon Sep 17 00:00:00 2001
From: Hermes <hermes@chrissader.com>
Date: Thu, 9 Apr 2026 21:34:50 -0500
Subject: [PATCH] Session + message pagination, SVG favicon, load-more buttons

---
 app/history/[id]/page.tsx | 14 +++++++++++++-
 app/history/page.tsx      | 13 ++++++++++++-
 app/layout.tsx            |  2 +-
 lib/hooks.ts              |  6 +++---
 public/favicon.svg        |  6 ++++++
 5 files changed, 35 insertions(+), 6 deletions(-)
 create mode 100644 public/favicon.svg

diff --git a/app/history/[id]/page.tsx b/app/history/[id]/page.tsx
index 8c26345..0024d91 100644
--- a/app/history/[id]/page.tsx
+++ b/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>
diff --git a/app/history/page.tsx b/app/history/page.tsx
index 7c29071..e592a1a 100644
--- a/app/history/page.tsx
+++ b/app/history/page.tsx
@@ -19,7 +19,9 @@ export default function HistoryPage() {
   const [query, setQuery] = useState("");
   const [searching, setSearching] = useState(false);
 
-  const { data: sessionsData, isLoading } = useSessions(30, filter || undefined);
+  const [limit, setLimit] = useState(20);
+  const { data: sessionsData, isLoading } = useSessions(limit, filter || undefined);
+  const hasMore = (sessionsData?.total || 0) > (sessionsData?.items?.length || 0);
   const { data: searchData, isFetching: searchLoading } = useSessionSearch(searching ? query : "");
   const showSearch = searching && query.length >= 2;
 
@@ -107,6 +109,15 @@ export default function HistoryPage() {
               {sessionsData?.items?.length === 0 && (
                 <p className="text-sm py-8 text-center" style={{ color: "var(--text-3)" }}>No sessions found</p>
               )}
+              {hasMore && (
+                <button
+                  onClick={() => setLimit((l) => l + 20)}
+                  className="w-full py-3 mt-2 text-[13px] font-medium rounded-xl transition-colors"
+                  style={{ color: "var(--accent)", background: "var(--accent-dim)" }}
+                >
+                  Load more
+                </button>
+              )}
             </div>
           )}
         </>
diff --git a/app/layout.tsx b/app/layout.tsx
index 9b55c90..a657128 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -7,7 +7,7 @@ import { ErrorBoundary } from "@/components/ErrorBoundary";
 export const metadata: Metadata = {
   title: "Hermes OS",
   description: "Mobile dashboard for Hermes Agent",
-  icons: { icon: "/icon-192.png", apple: "/icon-192.png" },
+  icons: { icon: "/favicon.svg", apple: "/icon-192.png" },
   appleWebApp: { capable: true, statusBarStyle: "black-translucent", title: "Hermes" },
 };
 
diff --git a/lib/hooks.ts b/lib/hooks.ts
index 2bdf184..e1520ea 100644
--- a/lib/hooks.ts
+++ b/lib/hooks.ts
@@ -19,10 +19,10 @@ export function useSession(id: string) {
   });
 }
 
-export function useMessages(sessionId: string) {
+export function useMessages(sessionId: string, limit = 200) {
   return useQuery({
-    queryKey: ["messages", sessionId],
-    queryFn: () => api.fetchMessages(sessionId),
+    queryKey: ["messages", sessionId, limit],
+    queryFn: () => api.fetchMessages(sessionId, limit),
     enabled: !!sessionId,
   });
 }
diff --git a/public/favicon.svg b/public/favicon.svg
new file mode 100644
index 0000000..af5c87c
--- /dev/null
+++ b/public/favicon.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <rect width="32" height="32" rx="8" fill="#111113"/>
+  <circle cx="16" cy="14" r="6" fill="none" stroke="#7c6ef0" stroke-width="2"/>
+  <path d="M12 22 L16 26 L20 22" fill="none" stroke="#7c6ef0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <circle cx="16" cy="14" r="2" fill="#7c6ef0"/>
+</svg>