npm - shraga - Versions diffs - 0.1.97 → 0.1.98 - Mend

shraga 0.1.97 → 0.1.98

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/dist/client/assets/{index-QkJewVCL.js → index-DPy-vyyF.js} +194 -194
package/dist/client/index.html +1 -1
package/package.json +1 -1
package/src/client/components/ChatView.tsx +38 -7
package/src/client/components/Sidebar.tsx +25 -7

package/dist/client/index.html CHANGED Viewed

@@ -13,7 +13,7 @@
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet" />
-    <script type="module" crossorigin src="/assets/index-QkJewVCL.js"></script>
+    <script type="module" crossorigin src="/assets/index-DPy-vyyF.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-DlgCLI89.css">
   </head>
   <body>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "shraga",
-  "version": "0.1.97",
+  "version": "0.1.98",
   "description": "The teammate you delegate coding to — a self-hostable, multi-user AI coding agent web UI (Claude Code, with a pluggable engine seam).",
   "type": "module",
   "main": "./src/index.ts",

package/src/client/components/ChatView.tsx CHANGED Viewed

@@ -127,10 +127,41 @@ export function ChatView({ messages, busy, connectionStatus, onPermissionRespond
   const screenMap = screenMapRef.current;
   // Only the last slice is mounted — an agent thread runs to thousands of blocks and the DOM
-  // (not React) is what goes sluggish. `showAll` mounts the rest on demand.
-  const [showAll, setShowAll] = useState(false);
-  const hiddenCount = showAll ? 0 : Math.max(0, messages.length - VISIBLE_MESSAGES);
+  // (not React) is what goes sluggish. Scrolling to the top reveals the next slice, so a long
+  // thread walks backwards a page at a time instead of mounting 12k rows in one jump.
+  const [limit, setLimit] = useState(VISIBLE_MESSAGES);
+  const hiddenCount = Math.max(0, messages.length - limit);
   const visibleMessages = hiddenCount > 0 ? messages.slice(hiddenCount) : messages;
+  const showEarlier = useCallback(() => setLimit((n) => n + VISIBLE_MESSAGES), []);
+  const pendingAnchor = useRef<{ box: HTMLDivElement | null; before: number } | null>(null);
+  // Reveal-on-scroll, with the button below as the visible fallback. The scroll position is pinned
+  // to the same message afterwards: prepending rows above the viewport otherwise yanks the thread.
+  const topRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    const el = topRef.current;
+    if (!el || hiddenCount === 0) return;
+    const io = new IntersectionObserver((entries) => {
+      if (!entries.some((e) => e.isIntersecting)) return;
+      // On mount the thread is pinned to the bottom and the top sentinel can be "visible" simply
+      // because nothing has scrolled yet — expanding there would cascade the whole 12k thread into
+      // the DOM, which is exactly what the window exists to prevent. Only reveal on a real scroll up.
+      if (isNearBottom.current) return;
+      const box = scrollRef.current;
+      const before = box?.scrollHeight ?? 0;
+      pendingAnchor.current = { box, before };
+      showEarlier();
+    }, { rootMargin: '400px' });
+    io.observe(el);
+    return () => io.disconnect();
+  }, [hiddenCount, limit, showEarlier]);
+  useEffect(() => {
+    const a = pendingAnchor.current;
+    if (!a?.box) return;
+    pendingAnchor.current = null;
+    a.box.scrollTop += a.box.scrollHeight - a.before; // keep the reader on the same message
+  }, [limit]);
   useEffect(() => {
     if (isNearBottom.current) {
@@ -172,10 +203,10 @@ export function ChatView({ messages, busy, connectionStatus, onPermissionRespond
           </button>
         </div>
         {hiddenCount > 0 && (
-          <div className="flex justify-center pb-2">
-            <button onClick={() => setShowAll(true)} className="text-xs px-3 py-1 rounded-full border text-muted-foreground hover:text-foreground hover:bg-muted transition-colors">
-              Show {hiddenCount} earlier message{hiddenCount === 1 ? '' : 's'}
-            </button>
+          // Scroll-based, like the sidebar: scrolling to the top reveals the previous slice. A
+          // status row, not a control — the earlier button read as a dead box at the top of a thread.
+          <div ref={topRef} className="py-3 text-center text-[11px] text-muted-foreground/60">
+            {hiddenCount} earlier message{hiddenCount === 1 ? '' : 's'} · scroll up to load
           </div>
         )}
         {visibleMessages.map((msg, i) => {

package/src/client/components/Sidebar.tsx CHANGED Viewed

@@ -120,6 +120,26 @@ export function Sidebar({ getToken, activeSessionId, onSelect, onNew, refreshKey
     }
   }, [activeSessionId, filtered, activeRow]);
+  // Load the next page when the end of the list comes into view. A list that simply stops when you
+  // scroll to the bottom reads as broken — the button below stays as the visible fallback, but it
+  // is not the mechanism. `root: null` still respects the Radix viewport's clipping, so the sentinel
+  // only intersects once the user has actually scrolled near the end.
+  const sentinelRef = useRef<HTMLDivElement | null>(null);
+  const loadMoreRef = useRef(loadMore);
+  loadMoreRef.current = loadMore;
+  useEffect(() => {
+    const el = sentinelRef.current;
+    if (!el || !cursor || unreadOnly) return;
+    const io = new IntersectionObserver(
+      (entries) => { if (entries.some((e) => e.isIntersecting)) loadMoreRef.current(); },
+      { rootMargin: '300px' },
+    );
+    io.observe(el);
+    return () => io.disconnect();
+    // `loading` is a dep so the observer re-arms after a page lands: if the end is STILL in view
+    // (a short page, a tall sidebar), re-observing fires again and walks on to the next page.
+  }, [cursor, loading, unreadOnly]);
   useEffect(() => {
     getToken().then(t => t ? fetch('/api/version', { headers: { Authorization: `Bearer ${t}` } }) : null).then(r => r?.json()).then(d => d && setVersion(d.version)).catch(() => {});
   }, []);
@@ -212,13 +232,11 @@ export function Sidebar({ getToken, activeSessionId, onSelect, onNew, refreshKey
           {activeRow && renderRow(activeRow)}
           {filtered.map(renderRow)}
           {!unreadOnly && cursor && (
-            <button
-              onClick={loadMore}
-              disabled={loading}
-              className="w-full text-[11px] text-muted-foreground hover:text-foreground py-2 rounded-lg hover:bg-accent/50 transition-colors disabled:opacity-50"
-            >
-              {loading ? 'Loading…' : 'Show older'}
-            </button>
+            // Scroll-based: reaching the end of the list loads the next page. This is a status row,
+            // not a control — a "Show older" button read as a dead grey box at the end of the list.
+            <div ref={sentinelRef} className="py-3 text-center text-[11px] text-muted-foreground/60">
+              {loading ? 'Loading older…' : '···'}
+            </div>
           )}
         </div>
       </ScrollArea>