feat: add scroll-to-top button and improve pagination handling

- Implemented a scroll-to-top button in the viewer UI for better navigation.
- Added styles for the scroll-to-top button in viewer.html and viewer-template.html.
- Created a new ScrollToTop component to manage visibility and scrolling behavior.
- Updated Feed component to include the ScrollToTop component.
- Enhanced pagination logic in usePagination hook to prevent stale closures and improve performance.
- Modified SDKAgent to include additional observation fields for better data handling.

src/ui/viewer/components/Feed.tsx

@@ -3,6 +3,7 @@ import { Observation, Summary, UserPrompt, FeedItem } from '../types';
 import { ObservationCard } from './ObservationCard';
 import { SummaryCard } from './SummaryCard';
 import { PromptCard } from './PromptCard';
+import { ScrollToTop } from './ScrollToTop';
 import { UI } from '../constants/ui';
 
 interface FeedProps {
@@ -16,6 +17,7 @@ interface FeedProps {
 
 export function Feed({ observations, summaries, prompts, onLoadMore, isLoading, hasMore }: FeedProps) {
   const loadMoreRef = useRef<HTMLDivElement>(null);
+  const feedRef = useRef<HTMLDivElement>(null);
   const onLoadMoreRef = useRef(onLoadMore);
 
   // Keep the callback ref up to date
@@ -59,7 +61,8 @@ export function Feed({ observations, summaries, prompts, onLoadMore, isLoading,
   }, [observations, summaries, prompts]);
 
   return (
-    <div className="feed">
+    <div className="feed" ref={feedRef}>
+      <ScrollToTop targetRef={feedRef} />
       <div className="feed-content">
         {items.map(item => {
           const key = `${item.itemType}-${item.id}`;

src/ui/viewer/components/ScrollToTop.tsx

@@ -0,0 +1,57 @@
+import React, { useState, useEffect } from 'react';
+
+interface ScrollToTopProps {
+  targetRef: React.RefObject<HTMLDivElement>;
+}
+
+export function ScrollToTop({ targetRef }: ScrollToTopProps) {
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      const target = targetRef.current;
+      if (target) {
+        setIsVisible(target.scrollTop > 300);
+      }
+    };
+
+    const target = targetRef.current;
+    if (target) {
+      target.addEventListener('scroll', handleScroll);
+      return () => target.removeEventListener('scroll', handleScroll);
+    }
+  }, []); // Empty deps - only set up listener once on mount
+
+  const scrollToTop = () => {
+    const target = targetRef.current;
+    if (target) {
+      target.scrollTo({
+        top: 0,
+        behavior: 'smooth'
+      });
+    }
+  };
+
+  if (!isVisible) return null;
+
+  return (
+    <button
+      onClick={scrollToTop}
+      className="scroll-to-top"
+      aria-label="Scroll to top"
+    >
+      <svg
+        width="20"
+        height="20"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <polyline points="18 15 12 9 6 15"></polyline>
+      </svg>
+    </button>
+  );
+}