@saadnvd1/agent-os 0.3.794 → 0.3.807

package/components/Chat/ChatPanel.tsx

@@ -2,6 +2,7 @@
 
 import type { StepCounts } from "@/lib/chat/tool-outcome";
 import {
+  Fragment,
   memo,
   useCallback,
   useEffect,
@@ -52,7 +53,7 @@ import { RowState, RowStore } from "./rowState";
 import { useKeybindings } from "@/hooks/useKeybindings";
 import { Background, type BackgroundValue } from "./background";
 import { FindBar } from "./FindBar";
-import { FIND_EVENT, isFindKey, useFind } from "./useFind";
+import { useFind, useFindShortcut } from "./useFind";
 import { McpServers } from "./McpServers";
 import { ChatSessionId } from "./session";
 import { ArtifactCard } from "./Artifact";
@@ -63,7 +64,10 @@ import { ContextMeter } from "./ContextMeter";
 import { SetupCard } from "./SetupCard";
 import { UserTurn } from "./EventRow";
 import { EventGroup } from "./EventTurns";
+import { needsMoreHistory } from "./needs-more-history";
 import { useGoToItem } from "./useGoToItem";
+import { NewDivider } from "./NewDivider";
+import { usePosition } from "./usePosition";
 import { NeedsYouStrip } from "@/components/Orchestrator/NeedsYouStrip";
 import { useResolveQuestion } from "@/data/orchestrators";
 import { needsYouFocus, needsYouFocusActions } from "@/stores/needsYouFocus";
@@ -79,7 +83,6 @@ import {
   TurnStarts,
   type BookmarkChat,
 } from "@/components/Bookmarks/context";
-import { bookmarksUi, bookmarksUiActions } from "@/stores/bookmarksUi";
 import {
   AssistantMessage,
   CommandOutput,
@@ -235,18 +238,23 @@ const Block = memo(
 export function TimelineRows({
   blocks,
   actions,
+  newFrom,
 }: {
   blocks: TimelineBlock[];
   actions: ItemActions;
+  // The block the reader hasn't seen yet begins at, when they were away.
+  newFrom?: string | null;
 }) {
   return blocks.map((b) => (
-    <div
-      key={blockKey(b)}
-      data-block={blockKey(b)}
-      className="chat-row mx-auto w-full max-w-3xl px-4 pb-4"
-    >
-      <Block block={b} actions={actions} />
-    </div>
+    <Fragment key={blockKey(b)}>
+      {newFrom === blockKey(b) && <NewDivider />}
+      <div
+        data-block={blockKey(b)}
+        className="chat-row mx-auto w-full max-w-3xl px-4 pb-4"
+      >
+        <Block block={b} actions={actions} />
+      </div>
+    </Fragment>
   ));
 }
 
@@ -367,9 +375,17 @@ export function ChatPanel({
       if ((e.target as Element).closest?.("[data-find-bar]")) return;
       const overlay = !!document.querySelector(OVERLAY_SELECTOR);
       const ghost = !!root.querySelector(GHOST_SELECTOR);
-      const action = escapeAction(e, escape.current.running, overlay, ghost);
+      const composer = (e.target as Element).closest?.(".chat-composer");
+      const action = escapeAction(
+        e,
+        escape.current.running,
+        overlay,
+        ghost,
+        !!composer
+      );
       if (action === "interrupt") escape.current.interrupt();
       else if (action === "dismiss") setDismissed(escape.current.suggestion);
+      else if (action === "blur") (e.target as HTMLElement).blur?.();
     };
     window.addEventListener("keydown", onKey, true);
     return () => window.removeEventListener("keydown", onKey, true);
@@ -510,11 +526,7 @@ export function ChatPanel({
       copySelection(e, itemsByIdRef.current),
     []
   );
-  // Starts at the end; older pages load as the reader nears the top.
-  useLayoutEffect(() => {
-    const el = listRef.current;
-    if (el) el.scrollTop = el.scrollHeight;
-  }, [sessionId]);
+  // Older pages load as the reader nears the top.
   const olderRef = useRef({ hasMore, loadingOlder, loadOlder });
   useEffect(() => {
     olderRef.current = { hasMore, loadingOlder, loadOlder };
@@ -525,6 +537,33 @@ export function ChatPanel({
     if (el && o.hasMore && !o.loadingOlder && el.scrollTop < el.clientHeight)
       o.loadOlder();
   }, []);
+  // Fill the screen on open: a page can fold into too few rows to scroll.
+  // One request per item count, so a page that fails or adds nothing stops it.
+  const filledAt = useRef({ sessionId, count: -1 });
+  useLayoutEffect(() => {
+    const el = listRef.current;
+    if (filledAt.current.sessionId !== sessionId)
+      filledAt.current = { sessionId, count: -1 };
+    if (!el || filledAt.current.count === items.length) return;
+    if (
+      needsMoreHistory({
+        hasMore,
+        loading: loadingOlder,
+        scrollHeight: el.scrollHeight,
+        clientHeight: el.clientHeight,
+      })
+    ) {
+      filledAt.current.count = items.length;
+      loadOlder();
+    }
+  }, [
+    sessionId,
+    items.length,
+    hasMore,
+    loadingOlder,
+    loadOlder,
+    blocks.length,
+  ]);
   const scrollToBlock = useCallback(async (key: string) => {
     // The row may only just have been added.
     await new Promise((r) => requestAnimationFrame(r));
@@ -562,17 +601,20 @@ export function ChatPanel({
     () => ({ sessionId, turnStarts: turnStartStore }),
     [sessionId, turnStartStore]
   );
-  // A bookmark opened from a list: once this chat is the one showing.
-  const { jump } = useSnapshot(bookmarksUi);
-  useEffect(() => {
-    // Waits for this chat's first page: until it lands, the items are
-    // the last chat's, and every jump would miss.
-    if (!jump || jump.sessionId !== sessionId || loadedFor !== sessionId)
-      return;
-    const itemId = bookmarksUiActions.takeJump(sessionId);
-    if (itemId)
-      goTo((all) => (all.some((i) => i.id === itemId) ? itemId : null));
-  }, [jump, sessionId, goTo, loadedFor]);
+  const { newFrom } = usePosition({
+    sessionId,
+    active,
+    loadedFor,
+    items,
+    hasMore,
+    loadingOlder,
+    loadOlder,
+    listRef,
+    release,
+    toEnd,
+    foldEvents: !!orchestratorOf,
+    goTo,
+  });
   const resolveQuestion = useResolveQuestion(orchestratorOf ?? "");
   // The question the next message answers, resolved when it is sent.
   const [replyTo, setReplyTo] = useState<{ id: number; text: string } | null>(
@@ -598,39 +640,8 @@ export function ChatPanel({
     scrollToBlock,
     scroller: useCallback(() => listRef.current, []),
   });
-  const activeRef = useRef(active);
-  useEffect(() => {
-    activeRef.current = active;
-  });
-  // ⌘F (Ctrl+F off a Mac) in this chat, or the phone header's search
-  // button, opens the find bar; pressed again, the field takes the caret.
-  const [findFocus, setFindFocus] = useState(0);
-  const showFind = find.show;
+  const findFocus = useFindShortcut(sessionId, rootRef, active, find.show);
   const closeFind = find.close;
-  useEffect(() => {
-    const open = () => {
-      showFind();
-      setFindFocus((n) => n + 1);
-    };
-    const onKey = (e: KeyboardEvent) => {
-      const root = rootRef.current;
-      const here =
-        root?.contains(e.target as Node) ||
-        (activeRef.current && e.target === document.body);
-      if (!here || !isFindKey(e)) return;
-      e.preventDefault();
-      open();
-    };
-    const onFind = (e: Event) => {
-      if ((e as CustomEvent<string>).detail === sessionId) open();
-    };
-    window.addEventListener("keydown", onKey, true);
-    window.addEventListener(FIND_EVENT, onFind);
-    return () => {
-      window.removeEventListener("keydown", onKey, true);
-      window.removeEventListener(FIND_EVENT, onFind);
-    };
-  }, [sessionId, showFind]);
   // Another conversation starts without the last one's find.
   useEffect(() => closeFind, [sessionId, closeFind]);
   const idle = !running && connected;
@@ -700,7 +711,11 @@ export function ChatPanel({
                   <ChatSessionId.Provider value={sessionId}>
                     <ChatIdle.Provider value={idle}>
                       <RetryTurn.Provider value={retryTurn}>
-                        <TimelineRows blocks={blocks} actions={actions} />
+                        <TimelineRows
+                          blocks={blocks}
+                          actions={actions}
+                          newFrom={newFrom}
+                        />
                       </RetryTurn.Provider>
                     </ChatIdle.Provider>
                   </ChatSessionId.Provider>

package/components/Chat/NewDivider.tsx

@@ -0,0 +1,15 @@
+// "New" above the first thing that arrived while the reader was away.
+export function NewDivider() {
+  return (
+    <div
+      data-new-divider
+      role="separator"
+      aria-label="New messages"
+      className="text-primary mx-auto flex w-full max-w-3xl items-center gap-3 px-4 pb-3 text-xs font-medium"
+    >
+      <span className="bg-primary/40 h-px flex-1" />
+      New
+      <span className="bg-primary/40 h-px flex-1" />
+    </div>
+  );
+}

package/components/Chat/needs-more-history.test.ts

@@ -0,0 +1,28 @@
+import { describe, expect, it } from "vitest";
+import { needsMoreHistory } from "./needs-more-history";
+
+const base = {
+  hasMore: true,
+  loading: false,
+  scrollHeight: 300,
+  clientHeight: 600,
+};
+
+describe("needsMoreHistory", () => {
+  it("asks for more when the list is shorter than the screen", () => {
+    expect(needsMoreHistory(base)).toBe(true);
+  });
+  it("asks while less than one extra screen overflows", () => {
+    expect(needsMoreHistory({ ...base, scrollHeight: 1200 })).toBe(true);
+  });
+  it("stops once there is more than a screen of overflow", () => {
+    expect(needsMoreHistory({ ...base, scrollHeight: 1201 })).toBe(false);
+  });
+  it("does nothing without more history or while a page is loading", () => {
+    expect(needsMoreHistory({ ...base, hasMore: false })).toBe(false);
+    expect(needsMoreHistory({ ...base, loading: true })).toBe(false);
+  });
+  it("ignores a list that has no size yet", () => {
+    expect(needsMoreHistory({ ...base, clientHeight: 0 })).toBe(false);
+  });
+});

package/components/Chat/needs-more-history.ts

@@ -0,0 +1,14 @@
+export interface HistoryFill {
+  hasMore: boolean;
+  loading: boolean;
+  scrollHeight: number;
+  clientHeight: number;
+}
+
+// An older page can fold into a few collapsed rows, leaving a list too short
+// to scroll, so no scroll event would ever ask for the next page. Keep about
+// one extra screen of content above the fold.
+export function needsMoreHistory(f: HistoryFill): boolean {
+  if (!f.hasMore || f.loading || f.clientHeight <= 0) return false;
+  return f.scrollHeight <= f.clientHeight * 2;
+}

package/components/Chat/session-link.ts

@@ -1,4 +1,5 @@
 import type { MouseEvent } from "react";
+import { navHistoryActions } from "@/stores/navHistory";
 import {
   hrefWithRef,
   hrefWithSession,
@@ -8,7 +9,7 @@ import {
 // Opens a session through its address, the way a shared link does. The
 // address it lands on is rewritten to the session's readable one.
 export function openSessionById(id: string): void {
-  go(hrefWithSession(location.href, { id }));
+  go(hrefWithSession(location.href, { id }), id);
 }
 
 export function openSessionLink(
@@ -18,10 +19,12 @@ export function openSessionLink(
   if (e.metaKey || e.ctrlKey || e.shiftKey || e.button !== 0) return;
   e.preventDefault();
   if (typeof target === "string") openSessionById(target);
-  else go(hrefWithRef(location.href, target));
+  else
+    go(hrefWithRef(location.href, target), "id" in target ? target.id : null);
 }
 
-function go(href: string): void {
-  window.history.pushState(null, "", href);
+// A link is a chat switch: it gets a history entry, then opens as an address.
+export function go(href: string, sessionId: string | null): void {
+  navHistoryActions.push(href, sessionId, "Chat");
   window.dispatchEvent(new PopStateEvent("popstate"));
 }

package/components/Chat/useFind.ts

@@ -1,6 +1,13 @@
 "use client";
 
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  type RefObject,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import type { ChatItem } from "@/lib/chat/events";
 import {
   flattenHits,
@@ -253,3 +260,45 @@ export function useFind(deps: FindDeps) {
     previous: useCallback(() => go(-1), [go]),
   };
 }
+
+/**
+ * ⌘F (Ctrl+F off a Mac) in this chat, or the phone header's search button,
+ * opens the find bar; pressed again, the field takes the caret. Returns a
+ * counter that changes each time, for the bar to focus on.
+ */
+export function useFindShortcut(
+  sessionId: string,
+  rootRef: RefObject<HTMLElement | null>,
+  active: boolean,
+  show: () => void
+): number {
+  const [focus, setFocus] = useState(0);
+  const activeRef = useRef(active);
+  useEffect(() => {
+    activeRef.current = active;
+  });
+  useEffect(() => {
+    const open = () => {
+      show();
+      setFocus((n) => n + 1);
+    };
+    const onKey = (e: KeyboardEvent) => {
+      const here =
+        rootRef.current?.contains(e.target as Node) ||
+        (activeRef.current && e.target === document.body);
+      if (!here || !isFindKey(e)) return;
+      e.preventDefault();
+      open();
+    };
+    const onFind = (e: Event) => {
+      if ((e as CustomEvent<string>).detail === sessionId) open();
+    };
+    window.addEventListener("keydown", onKey, true);
+    window.addEventListener(FIND_EVENT, onFind);
+    return () => {
+      window.removeEventListener("keydown", onKey, true);
+      window.removeEventListener(FIND_EVENT, onFind);
+    };
+  }, [sessionId, show, rootRef]);
+  return focus;
+}