@saadnvd1/agent-os 0.3.794 → 0.3.807

package/components/Chat/usePosition.ts

@@ -0,0 +1,363 @@
+"use client";
+
+import {
+  type RefObject,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from "react";
+import { useSnapshot } from "valtio";
+import { saveChatView } from "@/data/chat-views";
+import type { ChatItem } from "@/lib/chat/events";
+import { locate } from "@/lib/chat/find";
+import {
+  anchorOf,
+  decideOpen,
+  type Position,
+  type RowRect,
+} from "@/lib/nav/position";
+import { bookmarksUi, bookmarksUiActions } from "@/stores/bookmarksUi";
+import { chatPositions, chatPositionsActions } from "@/stores/chatPositions";
+import { navHistoryActions } from "@/stores/navHistory";
+import { NEAR_BOTTOM_PX, distanceFromBottom } from "./stick-to-bottom";
+
+// A position is saved this long after the reader stops scrolling.
+const SAVE_IDLE_MS = 3000;
+// Older pages loaded to find where the new items begin, at most.
+const MAX_PAGES_FOR_NEW = 5;
+
+interface Deps {
+  sessionId: string;
+  active: boolean;
+  loadedFor: string | null;
+  items: ChatItem[];
+  hasMore: boolean;
+  loadingOlder: boolean;
+  loadOlder: () => void;
+  listRef: RefObject<HTMLDivElement | null>;
+  release: () => void;
+  toEnd: () => void;
+  foldEvents: boolean;
+  // Takes the reader to a message by a rule over the items (bookmarks).
+  goTo: (match: (items: ChatItem[]) => string | null) => void;
+}
+
+type Job =
+  | { sessionId: string; kind: "block"; block: string; offsetPx: number }
+  | { sessionId: string; kind: "new"; viewedAt: number; pages: number };
+
+const afterLayout = (fn: () => void) =>
+  requestAnimationFrame(() => requestAnimationFrame(fn));
+
+/**
+ * Where a chat is when it opens, and remembering where the reader leaves it.
+ *
+ * Tracking: the first row in view and its offset are kept as the reader
+ * scrolls, written into the current history entry (so back lands there) and
+ * saved to the server when they leave, hide the page, or stop scrolling.
+ * Only after the reader's own scrolling or tapping: an idle tab left at the
+ * end can't overwrite the place they are reading on another device.
+ *
+ * Opening (lib/nav/position.decideOpen): a place a history entry or a
+ * bookmark asked for, else the first item newer than the last time it was
+ * open (with a "New" divider above it), else where it was left, else the
+ * latest message.
+ */
+export function usePosition(d: Deps) {
+  const { sessionId, active, loadedFor, listRef } = d;
+  const latest = useRef(d);
+  useEffect(() => {
+    latest.current = d;
+  });
+  const st = useRef({
+    sessionId: "",
+    decided: false,
+    settled: false,
+    touched: false,
+    dirty: false,
+    pos: null as Position | null,
+    idle: undefined as ReturnType<typeof setTimeout> | undefined,
+  });
+  // The placement under way; moved on by `advance` below.
+  const jobRef = useRef<Job | null>(null);
+  const advanceRef = useRef<() => void>(() => {});
+  const [divider, setDivider] = useState<{
+    sessionId: string;
+    block: string;
+  } | null>(null);
+  const { loaded, target } = useSnapshot(chatPositions);
+  const { jump } = useSnapshot(bookmarksUi);
+
+  // A conversation starts at the end, until the open below says otherwise.
+  useLayoutEffect(() => {
+    const el = listRef.current;
+    if (el) el.scrollTop = el.scrollHeight;
+  }, [sessionId, listRef]);
+
+  const stamp = useCallback((id: string) => {
+    saveChatView(id, null);
+    const mine = chatPositions.views[id];
+    chatPositionsActions.record({
+      sessionId: id,
+      itemId: mine?.itemId ?? null,
+      offsetPx: mine?.offsetPx ?? 0,
+      atEnd: mine?.atEnd ?? true,
+      viewedAt: Date.now(),
+    });
+  }, []);
+
+  // Saves where the reader is. Left at the end, everything up to now counts
+  // as seen; left higher up, what arrived below does not.
+  const save = useCallback(() => {
+    const s = st.current;
+    if (!s.settled || !s.sessionId) return;
+    clearTimeout(s.idle);
+    navHistoryActions.flush();
+    if (!s.touched || !s.pos) {
+      // Not moved by the reader: the place they were given stands. Only a
+      // chat watched at its end has seen what arrived since.
+      if (!s.pos || s.pos.atEnd) stamp(s.sessionId);
+      return;
+    }
+    const { block, offsetPx, atEnd } = s.pos;
+    s.dirty = false;
+    saveChatView(s.sessionId, {
+      itemId: block,
+      offsetPx,
+      atEnd,
+      advance: atEnd,
+    });
+    const mine = chatPositions.views[s.sessionId];
+    chatPositionsActions.record({
+      sessionId: s.sessionId,
+      itemId: block,
+      offsetPx,
+      atEnd,
+      viewedAt: atEnd ? Date.now() : (mine?.viewedAt ?? Date.now()),
+    });
+  }, [stamp]);
+
+  // Track the reader.
+  useEffect(() => {
+    const el = listRef.current;
+    const s = st.current;
+    Object.assign(s, {
+      sessionId,
+      decided: false,
+      settled: false,
+      touched: false,
+      dirty: false,
+      pos: null,
+    });
+    jobRef.current = null;
+    if (!el) return;
+    let frame = 0;
+    const measure = () => {
+      frame = 0;
+      if (!s.settled || el.offsetParent === null) return;
+      const rows: RowRect[] = [];
+      for (const r of el.querySelectorAll<HTMLElement>("[data-block]")) {
+        const b = r.getBoundingClientRect();
+        rows.push({ key: r.dataset.block!, top: b.top, bottom: b.bottom });
+      }
+      const atEnd =
+        distanceFromBottom({
+          scrollTop: el.scrollTop,
+          scrollHeight: el.scrollHeight,
+          clientHeight: el.clientHeight,
+        }) <= NEAR_BOTTOM_PX;
+      s.pos = anchorOf(el.getBoundingClientRect().top, rows, atEnd);
+      navHistoryActions.setPosition(sessionId, s.pos);
+      if (s.touched) {
+        s.dirty = true;
+        clearTimeout(s.idle);
+        s.idle = setTimeout(save, SAVE_IDLE_MS);
+      }
+    };
+    const onScroll = () => {
+      frame ||= requestAnimationFrame(measure);
+    };
+    const touch = () => {
+      s.touched = true;
+    };
+    el.addEventListener("scroll", onScroll, { passive: true });
+    const hands = ["wheel", "touchmove", "keydown", "pointerdown"] as const;
+    for (const e of hands) el.addEventListener(e, touch, { passive: true });
+    return () => {
+      el.removeEventListener("scroll", onScroll);
+      for (const e of hands) el.removeEventListener(e, touch);
+      cancelAnimationFrame(frame);
+      save();
+      s.settled = false;
+    };
+  }, [sessionId, listRef, save]);
+
+  // The page going away, or the tab going to the background.
+  useEffect(() => {
+    const onHide = () => {
+      if (document.visibilityState === "hidden") save();
+    };
+    document.addEventListener("visibilitychange", onHide);
+    window.addEventListener("pagehide", save);
+    return () => {
+      document.removeEventListener("visibilitychange", onHide);
+      window.removeEventListener("pagehide", save);
+    };
+  }, [save]);
+
+  // Another tab of the pane taking over, or coming back.
+  const wasActive = useRef(active);
+  useEffect(() => {
+    const was = wasActive.current;
+    wasActive.current = active;
+    const s = st.current;
+    if (was && !active) save();
+    else if (!was && active && s.settled) stamp(sessionId);
+  }, [active, save, stamp, sessionId]);
+
+  const place = useCallback(
+    (block: string, offsetPx: number) => {
+      latest.current.release();
+      afterLayout(() => {
+        const el = listRef.current;
+        const row = el?.querySelector<HTMLElement>(
+          `[data-block="${CSS.escape(block)}"]`
+        );
+        if (!el || !row) return;
+        el.scrollTop +=
+          row.getBoundingClientRect().top -
+          el.getBoundingClientRect().top -
+          offsetPx;
+        // The view held its anchors from before the jump: take new ones, or
+        // the next layout change would carry the view back to them.
+        latest.current.release();
+        st.current.settled = true;
+        st.current.pos = null;
+        el.dispatchEvent(new Event("scroll"));
+      });
+    },
+    [listRef]
+  );
+
+  // Open: a place asked for, else the rule above.
+  useEffect(() => {
+    const el = listRef.current;
+    const s = st.current;
+    if (loadedFor !== sessionId || !loaded || !el || el.offsetParent === null)
+      return;
+    const asked = chatPositionsActions.takeTarget(sessionId);
+    if (asked) {
+      s.decided = true;
+      if (asked.atEnd || !asked.block) {
+        s.settled = true;
+        latest.current.toEnd();
+      } else {
+        jobRef.current = {
+          sessionId,
+          kind: "block",
+          block: asked.block,
+          offsetPx: asked.offsetPx,
+        };
+        advanceRef.current();
+      }
+      stamp(sessionId);
+      return;
+    }
+    if (jump && jump.sessionId === sessionId) {
+      const itemId = bookmarksUiActions.takeJump(sessionId);
+      s.decided = true;
+      s.settled = true;
+      stamp(sessionId);
+      if (itemId)
+        latest.current.goTo((all) =>
+          all.some((i) => i.id === itemId) ? itemId : null
+        );
+      return;
+    }
+    if (s.decided) return;
+    s.decided = true;
+    const view = chatPositions.views[sessionId] ?? null;
+    const open = decideOpen({
+      view,
+      items: latest.current.items,
+      latest: chatPositionsActions.takeLatest(sessionId),
+    });
+    stamp(sessionId);
+    if (open.kind === "latest") s.settled = true;
+    else {
+      jobRef.current =
+        open.kind === "position"
+          ? {
+              sessionId,
+              kind: "block",
+              block: open.block,
+              offsetPx: open.offsetPx,
+            }
+          : { sessionId, kind: "new", viewedAt: view!.viewedAt, pages: 0 };
+      advanceRef.current();
+    }
+  }, [loadedFor, sessionId, loaded, target, jump, active, listRef, stamp]);
+
+  // Finish a placement that may need older pages first; runs again whenever
+  // the list changes.
+  const { items, hasMore, loadingOlder, loadOlder, foldEvents } = d;
+  const advance = useCallback(() => {
+    const el = listRef.current;
+    const job = jobRef.current;
+    if (!job || job.sessionId !== sessionId || !el || loadingOlder) return;
+    const give = () => {
+      jobRef.current = null;
+      st.current.settled = true;
+      latest.current.toEnd();
+    };
+    if (job.kind === "block") {
+      const there = el.querySelector(`[data-block="${CSS.escape(job.block)}"]`);
+      if (there) {
+        jobRef.current = null;
+        place(job.block, job.offsetPx);
+      } else if (hasMore) loadOlder();
+      else give();
+      return;
+    }
+    const first = items.findIndex((i) => i.createdAt > job.viewedAt);
+    if (first === -1) return give();
+    if (first === 0 && hasMore && job.pages < MAX_PAGES_FOR_NEW) {
+      jobRef.current = { ...job, pages: job.pages + 1 };
+      loadOlder();
+      return;
+    }
+    const where = locate(items, items[first].id, { foldEvents });
+    if (!where) return give();
+    jobRef.current = null;
+    if (first > 0) setDivider({ sessionId, block: where.block });
+    latest.current.release();
+    afterLayout(() => {
+      const mark = el.querySelector<HTMLElement>("[data-new-divider]");
+      (
+        mark ?? el.querySelector(`[data-block="${CSS.escape(where.block)}"]`)
+      )?.scrollIntoView({
+        block: "start",
+      });
+      latest.current.release();
+      st.current.settled = true;
+      el.dispatchEvent(new Event("scroll"));
+    });
+  }, [
+    items,
+    hasMore,
+    loadingOlder,
+    loadOlder,
+    foldEvents,
+    sessionId,
+    listRef,
+    place,
+  ]);
+  useEffect(() => {
+    advanceRef.current = advance;
+    advance();
+  }, [advance]);
+
+  return { newFrom: divider?.sessionId === sessionId ? divider.block : null };
+}

package/components/CodeSearchDialog.tsx

@@ -0,0 +1,90 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { CodeSearchResults } from "@/components/CodeSearch/CodeSearchResults";
+
+interface CodeSearchDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSelectFile?: (file: string, line: number) => void;
+  activeSessionWorkingDir?: string;
+}
+
+/** Search the code of the session on show (switching chats is the palette's Sessions tab). */
+export function CodeSearchDialog({
+  open,
+  onOpenChange,
+  onSelectFile,
+  activeSessionWorkingDir,
+}: CodeSearchDialogProps) {
+  const [query, setQuery] = useState("");
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const [wasOpen, setWasOpen] = useState(open);
+  if (open !== wasOpen) {
+    setWasOpen(open);
+    if (open) setQuery("");
+  }
+
+  useEffect(() => {
+    if (!open) return;
+    const t = setTimeout(() => inputRef.current?.focus(), 50);
+    return () => clearTimeout(t);
+  }, [open]);
+
+  const handleSelectFile = useCallback(
+    (file: string, line: number) => {
+      onOpenChange(false);
+      onSelectFile?.(file, line);
+    },
+    [onOpenChange, onSelectFile]
+  );
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent
+        showCloseButton={false}
+        className="gap-0 overflow-hidden p-0 sm:max-w-md"
+      >
+        <DialogHeader className="sr-only">
+          <DialogTitle>Search code</DialogTitle>
+          <DialogDescription>
+            Search the files of this session
+          </DialogDescription>
+        </DialogHeader>
+        <div className="border-border border-b p-3">
+          <Input
+            ref={inputRef}
+            placeholder="Search code (min 3 chars)..."
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            className="h-10"
+          />
+        </div>
+        <div className="max-h-[300px] overflow-y-auto py-2">
+          <CodeSearchResults
+            workingDirectory={activeSessionWorkingDir || "~"}
+            query={query}
+            onSelectFile={handleSelectFile}
+          />
+        </div>
+        <div className="border-border text-muted-foreground flex items-center gap-4 border-t px-4 py-2 text-xs">
+          <span>
+            <kbd className="bg-muted rounded px-1.5 py-0.5">↵</kbd> select
+          </span>
+          <span>
+            <kbd className="bg-muted rounded px-1.5 py-0.5">esc</kbd> close
+          </span>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/components/CommandPalette/CommandsBody.tsx

@@ -9,6 +9,7 @@ import {
   emptySections,
   withSeeAll,
   tabItems,
+  CURRENT,
   type Section,
 } from "@/lib/palette/sections";
 import { cycleTab, parsePrefix } from "@/lib/palette/tabs";
@@ -37,7 +38,8 @@ export function CommandsBody() {
   const tab = paletteUi.tab;
   const all = picker?.items ?? commands;
   const [query, setQuery] = useState(paletteUi.query);
-  const [active, setActive] = useState(0);
+  // Null until the reader moves: the list then picks where to start.
+  const [active, setActive] = useState<number | null>(null);
   // The tab a `>` or `@` chose, which Backspace on an empty query undoes.
   const [prefixTab, setPrefixTab] = useState<PaletteTab | null>(null);
   const [usage, setUsage] = useState(loadUsage);
@@ -78,9 +80,15 @@ export function CommandsBody() {
   const [shownTab, setShownTab] = useState(tab);
   if (shownTab !== tab) {
     setShownTab(tab);
-    setActive(0);
+    setActive(null);
   }
-  const highlighted = Math.min(active, Math.max(results.length - 1, 0));
+  // A switcher opens on the chat before this one, so Enter flips back to it.
+  const flipBack =
+    tab === "sessions" && !q && !picker && results[0]?.hint === CURRENT;
+  const highlighted = Math.min(
+    active ?? (flipBack ? 1 : 0),
+    Math.max(results.length - 1, 0)
+  );
 
   useEffect(() => {
     listRef.current
@@ -104,7 +112,7 @@ export function CommandsBody() {
 
   const onChange = (value: string) => {
     const prefix = !picker && !query ? parsePrefix(value) : null;
-    setActive(0);
+    setActive(null);
     if (prefix) {
       setQuery(prefix.text);
       setPrefixTab(prefix.tab);

package/components/CommandPalette/useAppCommands.ts

@@ -40,6 +40,9 @@ import { useAddExistingProject } from "@/components/Projects/AddProject/useAddEx
 import { usageUiActions } from "@/stores/usageUi";
 import { settingsCommands } from "@/components/Settings/commands";
 import { DRAFT_KEYS } from "@/lib/drafts";
+import { chatOpened } from "@/stores/chatPositions";
+import { previousChatId, recentFirst } from "@/lib/nav/recent";
+import { CURRENT } from "@/lib/palette/sections";
 import { useAwayCommands } from "@/components/Away/useAwayCommands";
 
 const LAST_THEME = "agentOS-last-theme-";
@@ -72,10 +75,12 @@ function sessionState(s: SessionStatus | undefined) {
 export function useAppCommands({
   sessions,
   statuses,
+  activeSessionId,
   onSelectSession,
   onSearchCode,
 }: {
   sessions: Session[];
+  activeSessionId?: string | null;
   statuses: Record<string, SessionStatus>;
   onSelectSession: (session: Session) => void;
   onSearchCode: () => void;
@@ -83,6 +88,7 @@ export function useAppCommands({
   const { theme, resolvedTheme, setTheme } = useTheme();
   const { data: workspaces = [] } = useWorkspacesQuery();
   const { workspaceId } = useSnapshot(sidebarUi);
+  const opened = useSnapshot(chatOpened);
   const current = workspaces.find((w) => w.id === workspaceId) ?? null;
   const dark = resolvedTheme?.startsWith("dark") ?? false;
   const { data: recipes = [] } = useRecipesQuery(workspaceId ?? null);
@@ -263,18 +269,30 @@ export function useAppCommands({
   usePaletteCommands("app", app);
   useAwayCommands();
 
+  const open = sessions.filter(
+    (s) => !s.archived_at && !s.conductor_session_id
+  );
+  const previousId = previousChatId(
+    open.map((s) => s.id),
+    opened,
+    activeSessionId
+  );
   usePaletteCommands(
     "sessions",
-    sessions
-      .filter((s) => !s.archived_at && !s.conductor_session_id)
-      .map((s) => ({
-        id: `session.${s.id}`,
-        title: s.name,
-        group: "Sessions",
-        keywords: [s.working_directory, s.branch_name ?? ""].filter(Boolean),
-        icon: MessageSquare,
-        ...sessionState(statuses[s.id]),
-        run: () => onSelectSession(s),
-      }))
+    recentFirst(open, opened).map((s) => ({
+      id: `session.${s.id}`,
+      title: s.name,
+      group: "Sessions",
+      keywords: [s.working_directory, s.branch_name ?? ""].filter(Boolean),
+      hint:
+        s.id === activeSessionId
+          ? CURRENT
+          : s.id === previousId
+            ? "Previous"
+            : undefined,
+      icon: MessageSquare,
+      ...sessionState(statuses[s.id]),
+      run: () => onSelectSession(s),
+    }))
   );
 }

package/components/DevServers/ServerLogsModal.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect, useRef } from "react";
+import { useState, useEffect, useRef, useCallback } from "react";
 import { X, RefreshCw, Loader2 } from "lucide-react";
 import { cn } from "@/lib/utils";
 
@@ -20,31 +20,34 @@ export function ServerLogsModal({
   const [refreshing, setRefreshing] = useState(false);
   const logsRef = useRef<HTMLDivElement>(null);
 
-  const fetchLogs = async (isRefresh = false) => {
-    if (isRefresh) {
-      setRefreshing(true);
-    } else {
-      setLoading(true);
-    }
+  const fetchLogs = useCallback(
+    async (isRefresh = false) => {
+      if (isRefresh) {
+        setRefreshing(true);
+      } else {
+        setLoading(true);
+      }
 
-    try {
-      const res = await fetch(`/api/dev-servers/${serverId}/logs?lines=200`);
-      if (res.ok) {
-        const data = await res.json();
-        setLogs(data.logs || []);
+      try {
+        const res = await fetch(`/api/dev-servers/${serverId}/logs?lines=200`);
+        if (res.ok) {
+          const data = await res.json();
+          setLogs(data.logs || []);
+        }
+      } catch (err) {
+        console.error("Failed to fetch logs:", err);
+      } finally {
+        setLoading(false);
+        setRefreshing(false);
       }
-    } catch (err) {
-      console.error("Failed to fetch logs:", err);
-    } finally {
-      setLoading(false);
-      setRefreshing(false);
-    }
-  };
+    },
+    [serverId]
+  );
 
   // Initial fetch
   useEffect(() => {
     fetchLogs();
-  }, [serverId]);
+  }, [fetchLogs]);
 
   // Auto-scroll to bottom when logs update
   useEffect(() => {
@@ -59,7 +62,7 @@ export function ServerLogsModal({
       fetchLogs(true);
     }, 3000);
     return () => clearInterval(interval);
-  }, [serverId]);
+  }, [fetchLogs]);
 
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">