@saadnvd1/agent-os 0.3.584 → 0.3.587

package/components/Bookmarks/BookmarksDialog.tsx

@@ -0,0 +1,186 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Loader2, Search } from "lucide-react";
+import { useSnapshot } from "valtio";
+import { cn } from "@/lib/utils";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { useBookmarks, type Bookmark } from "@/data/bookmarks";
+import { useWorkspacesQuery } from "@/data/workspaces";
+import { useUnarchiveSession } from "@/data/done";
+import { toast } from "sonner";
+import { hrefWithSession } from "@/lib/session-url";
+import { bookmarksUi, bookmarksUiActions } from "@/stores/bookmarksUi";
+import { BookmarkRow } from "./BookmarkRow";
+import { EmptyBookmarks } from "./EmptyBookmarks";
+import { groupByDay } from "./helpers";
+
+// Opens the chat by its address, then takes it to the message.
+function openChat(b: Bookmark) {
+  bookmarksUiActions.setOpen(false);
+  window.history.pushState(
+    null,
+    "",
+    hrefWithSession(location.href, b.sessionId)
+  );
+  window.dispatchEvent(new PopStateEvent("popstate"));
+  bookmarksUiActions.jump(b.sessionId, b.itemId);
+}
+
+// Every bookmark: one workspace's or all of them, searched on the server.
+export function BookmarksDialog() {
+  const snap = useSnapshot(bookmarksUi);
+  // Widened to every workspace by hand; opening it again starts narrow.
+  const [all, setAll] = useState(false);
+  const [openedFor, setOpenedFor] = useState(snap.open);
+  if (snap.open !== openedFor) {
+    setOpenedFor(snap.open);
+    if (snap.open) setAll(false);
+  }
+  const [text, setText] = useState("");
+  const [q, setQ] = useState("");
+  useEffect(() => {
+    const t = setTimeout(() => setQ(text.trim()), 250);
+    return () => clearTimeout(t);
+  }, [text]);
+  const scope = all || !snap.workspaceId ? "all" : snap.workspaceId;
+  const list = useBookmarks(scope, q, snap.open);
+  const bookmarks = list.data?.pages.flatMap((p) => p.bookmarks) ?? [];
+  const { data: workspaces = [] } = useWorkspacesQuery();
+  const unarchive = useUnarchiveSession();
+  // An archived chat only opens from the sidebar, so it comes back first.
+  const openBookmark = (b: Bookmark) => {
+    if (b.state !== "archived") return openChat(b);
+    unarchive.mutate(b.sessionId, {
+      onSuccess: () => {
+        toast.success(`${b.sessionName} is back`);
+        openChat(b);
+      },
+      onError: (err) => toast.error(err.message),
+    });
+  };
+  const where = workspaces.find((w) => w.id === snap.workspaceId)?.name;
+
+  return (
+    <Dialog open={snap.open} onOpenChange={bookmarksUiActions.setOpen}>
+      <DialogContent className="max-h-[90vh] max-w-xl overflow-y-auto [&>*]:min-w-0">
+        <DialogHeader>
+          <DialogTitle>Bookmarks</DialogTitle>
+          <DialogDescription className="sr-only">
+            Messages starred in any chat. Open one to go to it.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="flex items-center gap-2">
+          <label className="border-input bg-background text-muted-foreground flex h-11 min-w-0 flex-1 items-center gap-2 rounded-md border px-3 md:h-9">
+            <Search className="h-4 w-4 shrink-0" />
+            <input
+              value={text}
+              onChange={(e) => setText(e.target.value)}
+              placeholder="Search bookmarks"
+              aria-label="Search bookmarks"
+              className="text-foreground min-w-0 flex-1 bg-transparent text-base outline-none md:text-sm"
+            />
+          </label>
+          {snap.workspaceId && (
+            <div className="flex shrink-0 overflow-hidden rounded-md border text-xs">
+              {[
+                [false, where ?? "This workspace"],
+                [true, "All"],
+              ].map(([value, label]) => (
+                <button
+                  key={String(value)}
+                  type="button"
+                  aria-pressed={all === value}
+                  onClick={() => setAll(value as boolean)}
+                  className={cn(
+                    "text-muted-foreground max-w-36 truncate px-3 py-2 md:py-1.5",
+                    all === value && "bg-accent text-foreground"
+                  )}
+                >
+                  {label}
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+        <div className="-mx-2">
+          {list.isPending &&
+            [0, 1, 2].map((i) => (
+              <div
+                key={i}
+                className="bg-muted/40 mx-2 mb-2 h-14 animate-pulse rounded-xl"
+              />
+            ))}
+          {list.isError && (
+            <p className="text-destructive px-2 text-sm">
+              {list.error.message}
+            </p>
+          )}
+          {!list.isPending &&
+            !list.isError &&
+            bookmarks.length === 0 &&
+            (q ? (
+              <div className="text-muted-foreground px-4 py-8 text-center text-sm">
+                No bookmarks match “{q}”
+                {scope === "all" ? "." : " in this workspace."}
+                {scope !== "all" && (
+                  <button
+                    type="button"
+                    onClick={() => setAll(true)}
+                    className="text-primary block min-h-11 w-full"
+                  >
+                    Search all workspaces
+                  </button>
+                )}
+              </div>
+            ) : (
+              <EmptyBookmarks
+                title="No bookmarks yet"
+                body={
+                  scope === "all"
+                    ? "Messages you star in any chat collect here."
+                    : "Messages you star in any chat in this workspace collect here."
+                }
+              />
+            ))}
+          {groupByDay(bookmarks).map((g) => (
+            <section key={g.day}>
+              <h3 className="text-muted-foreground px-2 pt-3 pb-1 font-mono text-[11px] tracking-wide uppercase">
+                {g.day}
+              </h3>
+              {g.bookmarks.map((b) => (
+                <BookmarkRow
+                  key={b.id}
+                  bookmark={b}
+                  showSession
+                  editing={snap.editing === b.id}
+                  onOpen={openBookmark}
+                />
+              ))}
+            </section>
+          ))}
+          {list.hasNextPage && (
+            <button
+              type="button"
+              onClick={() => list.fetchNextPage()}
+              disabled={list.isFetchingNextPage}
+              className="text-muted-foreground hover:text-foreground flex min-h-11 w-full items-center justify-center text-sm"
+            >
+              {list.isFetchingNextPage ? (
+                <Loader2 className="h-4 w-4 animate-spin" />
+              ) : (
+                "Show older"
+              )}
+            </button>
+          )}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/components/Bookmarks/ChatBookmarks.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import { useSnapshot } from "valtio";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { useSessionBookmarks } from "@/data/bookmarks";
+import { bookmarksUi, bookmarksUiActions } from "@/stores/bookmarksUi";
+import { BookmarkRow } from "./BookmarkRow";
+import { EmptyBookmarks } from "./EmptyBookmarks";
+
+// One chat's bookmarks, in chat order; a tap takes the chat to the message.
+export function ChatBookmarksDialog() {
+  const snap = useSnapshot(bookmarksUi);
+  const sessionId = snap.chatSessionId;
+  const { data = [], isPending } = useSessionBookmarks(sessionId);
+  return (
+    <Dialog
+      open={!!sessionId}
+      onOpenChange={(open) => !open && bookmarksUiActions.closeChat()}
+    >
+      <DialogContent className="max-h-[85vh] max-w-md overflow-y-auto [&>*]:min-w-0">
+        <DialogHeader>
+          <DialogTitle>Bookmarks in this chat</DialogTitle>
+          <DialogDescription className="sr-only">
+            The messages starred in this chat, in the order they were said.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="-mx-2 space-y-0.5">
+          {isPending && !!sessionId && (
+            <div className="bg-muted/40 mx-2 h-14 animate-pulse rounded-xl" />
+          )}
+          {!isPending && data.length === 0 && (
+            <EmptyBookmarks
+              title="No bookmarks in this chat"
+              body="Star a message, a tool call or a turn to come back to it here. On a phone you can also hold a message."
+            />
+          )}
+          {data.map((b) => (
+            <BookmarkRow
+              key={b.id}
+              bookmark={b}
+              editing={snap.editing === b.id}
+              onOpen={() => {
+                bookmarksUiActions.closeChat();
+                bookmarksUiActions.jump(b.sessionId, b.itemId);
+              }}
+            />
+          ))}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/components/Bookmarks/ChatBookmarksButton.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import { Star } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { useSessionBookmarks } from "@/data/bookmarks";
+import { bookmarksUiActions } from "@/stores/bookmarksUi";
+
+// The star in a chat's header: how many it has, and its list.
+export function ChatBookmarksButton({
+  sessionId,
+  className,
+}: {
+  sessionId: string;
+  className?: string;
+}) {
+  const { data = [] } = useSessionBookmarks(sessionId);
+  return (
+    <button
+      type="button"
+      aria-label={`Bookmarks in this chat${data.length ? ` (${data.length})` : ""}`}
+      title="Bookmarks in this chat"
+      onClick={(e) => {
+        e.stopPropagation();
+        bookmarksUiActions.openChat(sessionId);
+      }}
+      className={cn(
+        "text-muted-foreground hover:text-foreground hover:bg-accent flex shrink-0 items-center justify-center gap-1 rounded-md",
+        data.length > 0 && "px-1.5",
+        className
+      )}
+    >
+      <Star className="h-3.5 w-3.5" />
+      {data.length > 0 && (
+        <span className="text-xs tabular-nums">{data.length}</span>
+      )}
+    </button>
+  );
+}

package/components/Bookmarks/EmptyBookmarks.tsx

@@ -0,0 +1,20 @@
+import type { ReactNode } from "react";
+import { Star } from "lucide-react";
+
+export function EmptyBookmarks({
+  title,
+  body,
+}: {
+  title: string;
+  body: ReactNode;
+}) {
+  return (
+    <div className="text-muted-foreground px-4 py-8 text-center text-sm">
+      <div className="bg-muted mx-auto mb-3 flex h-9 w-9 items-center justify-center rounded-lg">
+        <Star className="h-4 w-4" />
+      </div>
+      <p className="text-foreground font-medium">{title}</p>
+      <p className="mt-0.5">{body}</p>
+    </div>
+  );
+}

package/components/Bookmarks/context.ts

@@ -0,0 +1,41 @@
+"use client";
+
+import { createContext, useContext, useSyncExternalStore } from "react";
+
+// Where each turn starts (a TurnEnd's bookmark marks the turn's first
+// message). Kept outside React state so a streamed word redraws only the
+// turn ends whose start changed, not every star.
+export class TurnStarts {
+  private map = new Map<string, string>();
+  private listeners = new Set<() => void>();
+  set(map: Map<string, string>) {
+    this.map = map;
+    this.listeners.forEach((l) => l());
+  }
+  get = (turnEndId: string) => this.map.get(turnEndId) ?? null;
+  subscribe = (l: () => void) => {
+    this.listeners.add(l);
+    return () => this.listeners.delete(l);
+  };
+}
+
+// The chat the stars inside it belong to.
+export interface BookmarkChat {
+  sessionId: string;
+  turnStarts: TurnStarts;
+}
+
+export const BookmarkChatContext = createContext<BookmarkChat | null>(null);
+
+export const useBookmarkChat = () => useContext(BookmarkChatContext);
+
+const NO_STARTS = new TurnStarts();
+
+export function useTurnStart(turnEndId: string): string | null {
+  const starts = useBookmarkChat()?.turnStarts ?? NO_STARTS;
+  return useSyncExternalStore(
+    starts.subscribe,
+    () => starts.get(turnEndId),
+    () => null
+  );
+}

package/components/Bookmarks/helpers.test.ts

@@ -0,0 +1,69 @@
+import { describe, expect, it } from "vitest";
+import type { Bookmark } from "@/lib/bookmarks/types";
+import {
+  STATE_BADGE,
+  canOpen,
+  createdAt,
+  excerpt,
+  groupByDay,
+} from "./helpers";
+
+const b = (createdAt: string, state: Bookmark["state"] = "live"): Bookmark => ({
+  id: createdAt,
+  sessionId: "s",
+  itemId: "i",
+  scope: "item",
+  kind: "assistant",
+  text: "t",
+  note: null,
+  sessionName: "n",
+  workspaceId: null,
+  createdAt,
+  state,
+});
+
+describe("bookmark helpers", () => {
+  it("reads SQLite's zoneless time as UTC", () => {
+    expect(createdAt(b("2026-10-14 09:30:00")).toISOString()).toBe(
+      "2026-10-14T09:30:00.000Z"
+    );
+  });
+
+  it("groups newest-first bookmarks by local day", () => {
+    const now = new Date(2026, 9, 14, 18);
+    const at = (d: Date) => d.toISOString();
+    const groups = groupByDay(
+      [
+        b(at(new Date(2026, 9, 14, 12))),
+        b(at(new Date(2026, 9, 14, 8))),
+        b(at(new Date(2026, 9, 13, 23))),
+        b(at(new Date(2026, 9, 9, 10))),
+      ],
+      now
+    );
+    expect(groups.map((g) => [g.day, g.bookmarks.length])).toEqual([
+      ["Today", 2],
+      ["Yesterday", 1],
+      [
+        new Date(2026, 9, 9).toLocaleDateString(undefined, {
+          month: "short",
+          day: "numeric",
+        }),
+        1,
+      ],
+    ]);
+  });
+
+  it("badges archived and deleted chats, and won't open a deleted one", () => {
+    expect(STATE_BADGE.live).toBeNull();
+    expect(STATE_BADGE.archived).toBe("archived");
+    expect(STATE_BADGE.deleted).toBe("conversation deleted");
+    expect(canOpen(b("x", "deleted"))).toBe(false);
+    expect(canOpen(b("x", "archived"))).toBe(true);
+  });
+
+  it("flattens and clips an excerpt", () => {
+    expect(excerpt("a\n\n  b")).toBe("a b");
+    expect(excerpt("x".repeat(300), 10)).toBe("xxxxxxxxx…");
+  });
+});

package/components/Bookmarks/helpers.ts

@@ -0,0 +1,65 @@
+import type { Bookmark, BookmarkState } from "@/lib/bookmarks/types";
+
+export const KIND_LABEL: Record<Bookmark["kind"], string> = {
+  user: "You",
+  assistant: "Reply",
+  tool: "Tool",
+  turn: "Turn",
+};
+
+export const STATE_BADGE: Record<BookmarkState, string | null> = {
+  live: null,
+  moved: null,
+  archived: "archived",
+  deleted: "conversation deleted",
+};
+
+// A deleted chat has nothing to open.
+export const canOpen = (b: Bookmark) => b.state !== "deleted";
+
+// SQLite's datetime('now') is UTC without a zone.
+export const createdAt = (b: Bookmark) =>
+  new Date(
+    /[zZ]|[+-]\d\d:?\d\d$/.test(b.createdAt)
+      ? b.createdAt
+      : b.createdAt.replace(" ", "T") + "Z"
+  );
+
+export const excerpt = (text: string, max = 240) => {
+  const t = text.replace(/\s+/g, " ").trim();
+  return t.length > max ? t.slice(0, max - 1) + "…" : t;
+};
+
+function dayLabel(d: Date, now: Date): string {
+  const start = (x: Date) =>
+    new Date(x.getFullYear(), x.getMonth(), x.getDate()).getTime();
+  const days = Math.round((start(now) - start(d)) / 86_400_000);
+  if (days === 0) return "Today";
+  if (days === 1) return "Yesterday";
+  return d.toLocaleDateString(undefined, {
+    month: "short",
+    day: "numeric",
+    ...(d.getFullYear() !== now.getFullYear() && { year: "numeric" }),
+  });
+}
+
+/** Newest-first bookmarks, in runs by local day. */
+export function groupByDay(
+  bookmarks: Bookmark[],
+  now = new Date()
+): { day: string; bookmarks: Bookmark[] }[] {
+  const out: { day: string; bookmarks: Bookmark[] }[] = [];
+  for (const b of bookmarks) {
+    const day = dayLabel(createdAt(b), now);
+    const last = out[out.length - 1];
+    if (last?.day === day) last.bookmarks.push(b);
+    else out.push({ day, bookmarks: [b] });
+  }
+  return out;
+}
+
+export const timeOf = (b: Bookmark) =>
+  createdAt(b).toLocaleTimeString(undefined, {
+    hour: "numeric",
+    minute: "2-digit",
+  });

package/components/Bookmarks/index.ts

@@ -0,0 +1,4 @@
+export { BookmarkButton, TurnBookmark } from "./BookmarkButton";
+export { BookmarksDialog } from "./BookmarksDialog";
+export { ChatBookmarksButton } from "./ChatBookmarksButton";
+export { ChatBookmarksDialog } from "./ChatBookmarks";

package/components/Bookmarks/useBookmarkToggle.ts

@@ -0,0 +1,51 @@
+"use client";
+
+import { useCallback, useMemo } from "react";
+import { toast } from "sonner";
+import { bookmarkKey, type BookmarkScope } from "@/lib/bookmarks/types";
+import { useSessionBookmarks, useToggleBookmark } from "@/data/bookmarks";
+import { bookmarksUiActions } from "@/stores/bookmarksUi";
+
+// Whether an item is starred in its chat, and a toggle that says what it did
+// with a way back.
+export function useBookmarkToggle(
+  sessionId: string,
+  itemId: string | null,
+  scope: BookmarkScope
+) {
+  const { data } = useSessionBookmarks(sessionId);
+  const existing = useMemo(
+    () =>
+      (itemId &&
+        data?.find(
+          (b) => bookmarkKey(b.itemId, b.scope) === bookmarkKey(itemId, scope)
+        )) ||
+      null,
+    [data, itemId, scope]
+  );
+  const toggle = useToggleBookmark(sessionId);
+  const run = useCallback(() => {
+    if (!itemId) return;
+    toggle.mutate(
+      { itemId, scope, existing },
+      {
+        onSuccess: (made) => {
+          if (!made) return toast("Bookmark removed");
+          toast("Bookmarked", {
+            action: {
+              label: "Undo",
+              onClick: () => toggle.mutate({ itemId, scope, existing: made }),
+            },
+            cancel: {
+              label: "Add note",
+              onClick: () => bookmarksUiActions.openChat(sessionId, made.id),
+            },
+            classNames: { cancelButton: "!bg-muted !text-foreground" },
+          });
+        },
+        onError: (err) => toast.error(err.message),
+      }
+    );
+  }, [toggle, itemId, scope, existing, sessionId]);
+  return { on: !!existing, toggle: run };
+}

package/components/Chat/ChatPanel.tsx

@@ -65,6 +65,13 @@ import { useViewport } from "@/hooks/useViewport";
 import { useChatCommands } from "./useChatCommands";
 import { copySelection } from "./copy-selection";
 import { arrivalKey, useStickToBottom } from "./stick-to-bottom";
+import { useSnapshot } from "valtio";
+import {
+  BookmarkChatContext,
+  TurnStarts,
+  type BookmarkChat,
+} from "@/components/Bookmarks/context";
+import { bookmarksUi, bookmarksUiActions } from "@/stores/bookmarksUi";
 import {
   AssistantMessage,
   CommandOutput,
@@ -295,6 +302,7 @@ export function ChatPanel({
     requestFiles,
     search,
     compacting,
+    loadedFor,
   } = useChat(sessionId, (text) => setPrefill({ text, at: Date.now() }));
   const startFresh = useFreshStart();
   const { isMobile } = useViewport();
@@ -511,6 +519,37 @@ export function ChatPanel({
     scrollToBlock,
     foldEvents: !!orchestratorOf,
   });
+  // Where each turn starts, for a TurnEnd's "Bookmark turn".
+  const turnStarts = useMemo(() => {
+    const m = new Map<string, string>();
+    let user: string | null = null;
+    for (const i of items) {
+      if (i.kind === "user") user = i.id;
+      else if (i.kind === "turn_end" && user) m.set(i.id, user);
+    }
+    return m;
+  }, [items]);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const turnStartStore = useMemo(() => new TurnStarts(), [sessionId]);
+  useLayoutEffect(
+    () => turnStartStore.set(turnStarts),
+    [turnStartStore, turnStarts]
+  );
+  const bookmarkChat = useMemo<BookmarkChat>(
+    () => ({ 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 resolveQuestion = useResolveQuestion(orchestratorOf ?? "");
   // The question the next message answers, resolved when it is sent.
   const [replyTo, setReplyTo] = useState<{ id: number; text: string } | null>(
@@ -588,39 +627,41 @@ export function ChatPanel({
         <RowState.Provider value={rowState}>
           <Background.Provider value={background}>
             <ToolBodies.Provider value={bodies}>
-              <div
-                // A new conversation starts over, scrolled to the end.
-                key={sessionId}
-                ref={listRef}
-                onScroll={onListScroll}
-                onCopy={onCopy}
-                className="h-full overflow-y-auto overscroll-y-contain"
-              >
-                <div className="mx-auto flex w-full max-w-3xl flex-col gap-4 px-4 pt-5 pb-4">
-                  {hasMore && (
-                    <div className="text-muted-foreground flex min-h-11 items-center justify-center text-xs">
-                      {loadingOlder ? (
-                        <Loader2 className="h-4 w-4 animate-spin" />
-                      ) : (
-                        <button
-                          type="button"
-                          onClick={loadOlder}
-                          className="hover:text-foreground min-h-11 px-3"
-                        >
-                          Show earlier messages
-                        </button>
-                      )}
-                    </div>
-                  )}
-                  <SetupCard sessionId={sessionId} />
-                  {blocks.length === 0 && !queue.length && (
-                    <p className="text-muted-foreground py-16 text-center text-sm">
-                      Ask anything to start.
-                    </p>
-                  )}
+              <BookmarkChatContext.Provider value={bookmarkChat}>
+                <div
+                  // A new conversation starts over, scrolled to the end.
+                  key={sessionId}
+                  ref={listRef}
+                  onScroll={onListScroll}
+                  onCopy={onCopy}
+                  className="h-full overflow-y-auto overscroll-y-contain"
+                >
+                  <div className="mx-auto flex w-full max-w-3xl flex-col gap-4 px-4 pt-5 pb-4">
+                    {hasMore && (
+                      <div className="text-muted-foreground flex min-h-11 items-center justify-center text-xs">
+                        {loadingOlder ? (
+                          <Loader2 className="h-4 w-4 animate-spin" />
+                        ) : (
+                          <button
+                            type="button"
+                            onClick={loadOlder}
+                            className="hover:text-foreground min-h-11 px-3"
+                          >
+                            Show earlier messages
+                          </button>
+                        )}
+                      </div>
+                    )}
+                    <SetupCard sessionId={sessionId} />
+                    {blocks.length === 0 && !queue.length && (
+                      <p className="text-muted-foreground py-16 text-center text-sm">
+                        Ask anything to start.
+                      </p>
+                    )}
+                  </div>
+                  <TimelineRows blocks={blocks} actions={actions} />
                 </div>
-                <TimelineRows blocks={blocks} actions={actions} />
-              </div>
+              </BookmarkChatContext.Provider>
             </ToolBodies.Provider>
           </Background.Provider>
         </RowState.Provider>