@saadnvd1/agent-os 0.3.799 → 0.3.807

package/app/api/chat-views/[sessionId]/route.ts

@@ -0,0 +1,19 @@
+import { NextResponse } from "next/server";
+import { readViewBody } from "@/lib/chat-views/body";
+import { saveChatView } from "@/lib/chat-views/store";
+
+type Ctx = { params: Promise<{ sessionId: string }> };
+
+// Ids are uuids today; anything id-shaped fits other machines' sessions too.
+const ID_SHAPE = /^[A-Za-z0-9_-]{1,128}$/;
+
+// PUT /api/chat-views/:sessionId { itemId, offsetPx, atEnd } - the reader is
+// here in this chat; or { viewed: true } - they just opened it.
+export async function PUT(request: Request, { params }: Ctx) {
+  const { sessionId } = await params;
+  if (!ID_SHAPE.test(sessionId))
+    return NextResponse.json({ error: "Bad request" }, { status: 400 });
+  const body = await readViewBody(request);
+  if (body instanceof NextResponse) return body;
+  return NextResponse.json({ view: saveChatView(sessionId, body.input) });
+}

package/app/api/chat-views/route.test.ts

@@ -0,0 +1,79 @@
+import { randomUUID } from "crypto";
+import { describe, expect, it } from "vitest";
+import { getDb } from "@/lib/db";
+import * as one from "./[sessionId]/route";
+import * as list from "./route";
+
+const put = (sessionId: string, body: unknown, raw = false) =>
+  one.PUT(
+    new Request("http://x/api/chat-views/" + sessionId, {
+      method: "PUT",
+      body: raw ? (body as string) : JSON.stringify(body),
+    }),
+    { params: Promise.resolve({ sessionId }) }
+  );
+const views = async () =>
+  (await (await list.GET()).json()).views as {
+    sessionId: string;
+    itemId: string | null;
+    offsetPx: number;
+    atEnd: boolean;
+    viewedAt: number;
+  }[];
+
+describe("/api/chat-views", () => {
+  it("saves a position, keeps it when a chat is only opened, and lists newest first", async () => {
+    const a = randomUUID();
+    const b = randomUUID();
+    const res = await put(a, { itemId: "i1", offsetPx: 40, atEnd: false });
+    expect(res.status).toBe(200);
+    await new Promise((r) => setTimeout(r, 5));
+    await put(b, { viewed: true });
+    await new Promise((r) => setTimeout(r, 5));
+    await put(a, { viewed: true });
+    const mine = (await views()).filter(
+      (v) => v.sessionId === a || v.sessionId === b
+    );
+    expect(mine.map((v) => v.sessionId)).toEqual([a, b]);
+    expect(mine[0]).toMatchObject({ itemId: "i1", offsetPx: 40, atEnd: false });
+    expect(mine[1]).toMatchObject({ itemId: null, atEnd: true });
+    expect(mine[0].viewedAt).toBeGreaterThan(mine[1].viewedAt);
+  });
+
+  it("keeps viewed_at when the reader left with things unseen below", async () => {
+    const id = randomUUID();
+    await put(id, { viewed: true });
+    const first = (await views()).find((v) => v.sessionId === id)!.viewedAt;
+    await new Promise((r) => setTimeout(r, 5));
+    await put(id, { itemId: "i", offsetPx: 3, atEnd: false, advance: false });
+    const kept = (await views()).find((v) => v.sessionId === id)!;
+    expect(kept).toMatchObject({ itemId: "i", offsetPx: 3, atEnd: false });
+    expect(kept.viewedAt).toBe(first);
+  });
+
+  it("refuses a bad body and a bad id", async () => {
+    const id = randomUUID();
+    expect((await put(id, { offsetPx: "x" })).status).toBe(400);
+    expect((await put(id, "not json", true)).status).toBe(400);
+    expect(
+      (await put(id, { itemId: "", offsetPx: 0, atEnd: true })).status
+    ).toBe(400);
+    expect((await put("bad id!", { viewed: true })).status).toBe(400);
+    expect((await put(id, { viewed: true, x: "y".repeat(5000) })).status).toBe(
+      413
+    );
+  });
+
+  it("is dropped with its chat", async () => {
+    const id = randomUUID();
+    getDb()
+      .prepare(
+        `INSERT INTO sessions (id, name, tmux_name, working_directory) VALUES (?, 'v', ?, '/tmp')`
+      )
+      .run(id, `claude-${id}`);
+    await put(id, { viewed: true });
+    expect((await views()).some((v) => v.sessionId === id)).toBe(true);
+    getDb().prepare(`DELETE FROM sessions WHERE id = ?`).run(id);
+    expect((await views()).some((v) => v.sessionId === id)).toBe(false);
+  });
+});

package/app/api/chat-views/route.ts

@@ -0,0 +1,8 @@
+import { NextResponse } from "next/server";
+import { listChatViews } from "@/lib/chat-views/store";
+
+// GET /api/chat-views - where each chat was last being read and when, newest
+// first: the switcher's recent order and the place a chat reopens at.
+export async function GET() {
+  return NextResponse.json({ views: listChatViews() });
+}

package/app/page.tsx

@@ -7,6 +7,9 @@ import { subscribe } from "valtio";
 import { viewSwitchStore, viewSwitchActions } from "@/stores/viewSwitch";
 import { useOpenSession } from "@/hooks/useOpenSession";
 import { useSessionUrl } from "@/hooks/useSessionUrl";
+import { useNavActions } from "@/hooks/useNavActions";
+import { useChatViewsSync } from "@/hooks/useChatViewsSync";
+import { chatPositionsActions } from "@/stores/chatPositions";
 import { tmuxAttachStore, tmuxAttachActions } from "@/stores/tmuxAttach";
 import type { AttachSpec } from "@/lib/hosts/attach";
 import { memo, useState, useEffect, useCallback, useMemo, useRef } from "react";
@@ -55,7 +58,8 @@ import { useDraftKeys } from "@/hooks/useDraftKeys";
 import { useDraftRequests } from "@/hooks/useDraftRequests";
 import { newDraft } from "@/stores/drafts";
 import { useOpenOrchestrator } from "@/hooks/useOpenOrchestrator";
-import { paletteActions, paletteUi } from "@/stores/palette";
+import { ShortcutsDialog } from "@/components/Shortcuts/ShortcutsDialog";
+import { PendingKeys } from "@/components/Shortcuts/PendingKeys";
 import { useAppCommands } from "@/components/CommandPalette/useAppCommands";
 import { useMoveCommands } from "@/components/Tasks/useMoveCommands";
 import dynamic from "next/dynamic";
@@ -187,6 +191,8 @@ const AppDialogs = memo(function AppDialogs({
       <AwayReport />
       <IncomingLinks />
       <CommandPalette />
+      <ShortcutsDialog />
+      <PendingKeys />
     </>
   );
 });
@@ -530,9 +536,12 @@ function HomeContent() {
     isMobile,
   });
 
+  useChatViewsSync();
+
   // Notification click handler
   const handleNotificationClick = useCallback(
     (sessionId: string) => {
+      chatPositionsActions.wantLatest(sessionId);
       const session = sessions.find((s) => s.id === sessionId);
       if (session) {
         attachToSession(session);
@@ -571,19 +580,6 @@ function HomeContent() {
     if (isHydrated && !isMobile) setSidebarOpen(true);
   }, [isMobile, isHydrated]);
 
-  // Cmd+K: the command palette, which searches sessions too.
-  useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") {
-        e.preventDefault();
-        if (paletteUi.open) paletteActions.setOpen(false);
-        else paletteActions.open();
-      }
-    };
-    window.addEventListener("keydown", handleKeyDown);
-    return () => window.removeEventListener("keydown", handleKeyDown);
-  }, []);
-
   // Picking a session with a tap, ⌘K or the keyboard: the composer is focused
   // inside the gesture, which iOS requires. Other ways in (URL, notification,
   // a session just created) use attachToSession's later focus.
@@ -674,6 +670,7 @@ function HomeContent() {
   // A workspace's orchestrator row opens its chat, made on first open.
   const handleOrchestratorOpened = useCallback(
     (sessionId: string) => {
+      chatPositionsActions.wantLatest(sessionId);
       if (isMobile) setSidebarOpen(false);
       void handleSessionCreated(sessionId);
     },
@@ -724,8 +721,14 @@ function HomeContent() {
     chatMetaActions.setActive(focusedActiveTab?.sessionId ?? null);
   }, [focusedActiveTab?.sessionId]);
 
+  useNavActions({
+    sessions,
+    activeSessionId: focusedActiveTab?.sessionId,
+    select: selectSession,
+  });
   useAppCommands({
     sessions,
+    activeSessionId: focusedActiveTab?.sessionId,
     statuses: sessionStatuses,
     onSelectSession: selectSession,
     onSearchCode: () => setShowQuickSwitcher(true),

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";
@@ -65,6 +66,8 @@ 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";
@@ -80,7 +83,6 @@ import {
   TurnStarts,
   type BookmarkChat,
 } from "@/components/Bookmarks/context";
-import { bookmarksUi, bookmarksUiActions } from "@/stores/bookmarksUi";
 import {
   AssistantMessage,
   CommandOutput,
@@ -236,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>
   ));
 }
 
@@ -368,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);
@@ -511,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 };
@@ -590,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>(
@@ -626,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;
@@ -728,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/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;
+}