@saadnvd1/agent-os 0.3.524 → 0.3.527

package/README.md

@@ -219,10 +219,13 @@ On a fresh install (no sessions, no projects of your own) the web app opens a
 short setup at `/?welcome`: it shows each agent CLI as ready, needing a
 sign-in, or missing, installs or signs one in from an embedded terminal, adds
 a first project (a folder, a clone or an empty one), then opens a session in
-it. Every step after the first can be skipped. It is remembered on the server,
+it. A devices step offers to pair a phone, link another machine and set up
+notifications. Every step after the first can be skipped. It is remembered on the server,
 so a phone you pair later doesn't see it, and an install that already has work
 never does. Reopen it from Settings → Setup (**Run setup again**) or at
-`/welcome`; `AGENTOS_SKIP_WELCOME=1` turns it off.
+`/welcome`; `AGENTOS_SKIP_WELCOME=1` turns it off. Settings → Setup & health
+also lists what this machine needs (Node, git, tmux, ripgrep, lsof, an agent
+CLI) with the fix for anything missing (`/api/doctor`).
 
 ### Supported agents
 
@@ -1289,7 +1292,7 @@ it may do on its own, and the lines that always come back to you as asks.
   workspace, or the project already at that path moves in from no workspace;
   folders that hold secrets and projects of another workspace are refused),
   `note`,
-  `rule_add`, `rule_remove`, `review`, `sign_off`, `arm`, `disarm`, `remind_me`, `reminders`, `cancel_reminder` and `ask_saad`. All are served in-process to its chat, refuse
+  `rule_add`, `rule_remove`, `review`, `sign_off`, `arm`, `disarm`, `remind_me`, `reminders`, `cancel_reminder`, `ask_saad`, `question` and `resolve_question`. All are served in-process to its chat, refuse
   any target outside its workspace, and validate their arguments. The one
   exception is other orchestrators: `orchestrators` lists every workspace and
   whether it has one, and `message_orchestrator` messages another workspace's
@@ -1499,6 +1502,25 @@ approved`). An approval covers that one item only: a held task's approval
   fold into one, a declined subject isn't asked again for 6 hours, and a
   "decision" that reads as money, outbound, irreversible or credentials is
   filed as that hard line.
+- **Readable when busy:** in the orchestrator's chat, anything AgentOS
+  sent it (a PR opened, CI green, a task woken, a schedule, a task's message)
+  and the orchestrator's reply fold into one line: an icon, the task, how the
+  reply starts, the time. Tap to read the whole reply; runs of them group as
+  "5 updates". What you typed, and the replies to it, stay whole, and so do
+  your own decisions and any turn waiting on an approval or showing a plan or
+  an error. Where a message came from is recorded when it is delivered;
+  older messages are told apart by their opening text only.
+  A **Needs you** strip above the composer lists everything waiting on you
+  until it is resolved: open asks (escalated gates and brakes too), questions
+  the orchestrator put to you in chat, its chat waiting on an approval, and
+  tasks that need you. Each is one line that jumps to the ask, the message or
+  the session, with a count when collapsed. The orchestrator marks a chat
+  question with `question` (the same words while open are the same
+  question) and clears it with `resolve_question`; the strip's Reply quotes
+  it into the composer and resolves it when you send. Dismissing an item
+  hides it on all your devices and resolves nothing: an ask stays open on
+  its list and in the counts. Questions about a task clear when it is merged
+  or dropped.
 - **Proof it's you:** only this machine, the tailnet, or a paired device you
   switched to "Can approve" in Devices may answer asks or pause. Approving a
   hard line, a gate, a brake or a new passkey, Resume, changing the

package/app/api/doctor/route.ts

@@ -0,0 +1,8 @@
+import { NextRequest, NextResponse } from "next/server";
+import { runDoctor } from "@/lib/doctor/checks";
+
+// Whether this machine has what AgentOS needs, and how to fix what it lacks.
+export async function GET(request: NextRequest) {
+  const fresh = request.nextUrl.searchParams.has("fresh");
+  return NextResponse.json({ checks: await runDoctor(fresh) });
+}

package/app/api/workspaces/[id]/orchestrator/needs-you/dismiss/route.ts

@@ -0,0 +1,31 @@
+import { NextRequest, NextResponse } from "next/server";
+import { dismissItem, undismissItem } from "@/lib/orchestrator/questions";
+
+type RouteParams = { params: Promise<{ id: string }> };
+
+const KEY = /^(ask|question|task|approval):[\w:.-]{1,100}$/;
+
+async function keyOf(request: NextRequest): Promise<string | null> {
+  const body = (await request.json().catch(() => null)) as {
+    key?: unknown;
+  } | null;
+  return typeof body?.key === "string" && KEY.test(body.key) ? body.key : null;
+}
+
+// Hides an item from the Needs-you strip. It resolves nothing: an ask stays
+// open on its list and in the counts.
+export async function POST(request: NextRequest, { params }: RouteParams) {
+  const { id } = await params;
+  const key = await keyOf(request);
+  if (!key) return NextResponse.json({ error: "Bad key" }, { status: 400 });
+  dismissItem(id, key);
+  return NextResponse.json({ ok: true });
+}
+
+export async function DELETE(request: NextRequest, { params }: RouteParams) {
+  const { id } = await params;
+  const key = await keyOf(request);
+  if (!key) return NextResponse.json({ error: "Bad key" }, { status: 400 });
+  undismissItem(id, key);
+  return NextResponse.json({ ok: true });
+}

package/app/api/workspaces/[id]/orchestrator/questions/[questionId]/route.ts

@@ -0,0 +1,15 @@
+import { NextRequest, NextResponse } from "next/server";
+import { resolveQuestion } from "@/lib/orchestrator/questions";
+
+type RouteParams = { params: Promise<{ id: string; questionId: string }> };
+
+// Saad answered a question the orchestrator put to him in chat.
+export async function POST(_request: NextRequest, { params }: RouteParams) {
+  const { id, questionId } = await params;
+  const n = Number(questionId);
+  if (!Number.isInteger(n) || n < 1)
+    return NextResponse.json({ error: "Not a question" }, { status: 400 });
+  if (!resolveQuestion(id, n, "saad"))
+    return NextResponse.json({ error: "Not open" }, { status: 404 });
+  return NextResponse.json({ ok: true });
+}

package/app/page.tsx

@@ -33,6 +33,7 @@ if (typeof window !== "undefined") {
 import { PaneProvider, usePanes } from "@/contexts/PaneContext";
 import { Pane } from "@/components/Pane";
 import { AwayReport } from "@/components/Away/AwayReport";
+import type { BrowserNotifications } from "@/components/Settings/NotificationsSection";
 import { useNotifications } from "@/hooks/useNotifications";
 import { useViewport } from "@/hooks/useViewport";
 import { useViewportHeight } from "@/hooks/useViewportHeight";
@@ -123,11 +124,15 @@ const CommandPalette = dynamic(
 );
 
 // Held apart from HomeContent, which re-renders on every status push.
-const AppDialogs = memo(function AppDialogs() {
+const AppDialogs = memo(function AppDialogs({
+  notifications,
+}: {
+  notifications: BrowserNotifications;
+}) {
   return (
     <>
       <TasksDialog />
-      <WelcomeDialog />
+      <WelcomeDialog notifications={notifications} />
       <AddProjectDialog />
       <MessagesDialog />
       <ArchivedDialog />
@@ -695,7 +700,7 @@ function HomeContent() {
       ) : (
         <DesktopView {...viewProps} />
       )}
-      <AppDialogs />
+      <AppDialogs notifications={browserNotifications} />
       <SettingsDialog notifications={browserNotifications} />
     </>
   );

package/components/Chat/ChatPanel.tsx

@@ -52,6 +52,13 @@ import { PlanCard } from "./PlanCard";
 import { ContextMeter } from "./ContextMeter";
 import { SetupCard } from "./SetupCard";
 import { UserTurn } from "./EventRow";
+import { EventGroup } from "./EventTurns";
+import { useGoToItem } from "./useGoToItem";
+import { NeedsYouStrip } from "@/components/Orchestrator/NeedsYouStrip";
+import { useResolveQuestion } from "@/data/orchestrators";
+import { needsYouFocusActions } from "@/stores/needsYouFocus";
+import { hrefWithSession } from "@/lib/session-url";
+import { isQuestionTool } from "@/lib/chat/turns";
 import { useViewport } from "@/hooks/useViewport";
 import { useChatCommands } from "./useChatCommands";
 import { copySelection } from "./copy-selection";
@@ -167,6 +174,14 @@ const Block = memo(
     const undoneActions = useMemo(() => ({ respond }), [respond]);
     return b.type === "tools" ? (
       <ToolGroup tools={b.tools} />
+    ) : b.type === "events" ? (
+      <EventGroup
+        id={b.id}
+        turns={b.turns}
+        renderReplies={(items) => (
+          <Timeline blocks={groupTimeline(items)} actions={undoneActions} />
+        )}
+      />
     ) : b.type === "undone" ? (
       <UndoneBlock
         undo={b.undo}
@@ -367,7 +382,10 @@ export function ChatPanel({
     focusComposer,
   });
 
-  const blocks = useMemo(() => groupTimeline(items), [items]);
+  const blocks = useMemo(
+    () => groupTimeline(items, { foldEvents: !!orchestratorOf }),
+    [items, orchestratorOf]
+  );
   const tasks = useMemo(() => {
     if (!earlierTasks.length) return items;
     const loaded = new Set(items.map((i) => i.id));
@@ -461,7 +479,30 @@ export function ChatPanel({
     if (el && o.hasMore && !o.loadingOlder && el.scrollTop < el.clientHeight)
       o.loadOlder();
   }, []);
+  const scrollToBlock = useCallback(async (key: string) => {
+    // The row may only just have been added.
+    await new Promise((r) => requestAnimationFrame(r));
+    listRef.current
+      ?.querySelector(`[data-block="${CSS.escape(key)}"]`)
+      ?.scrollIntoView({ block: "center" });
+  }, []);
+  const goTo = useGoToItem({
+    items,
+    hasMore,
+    loadingOlder,
+    loadOlder,
+    rows: rowState,
+    release,
+    scrollToBlock,
+    foldEvents: !!orchestratorOf,
+  });
+  const resolveQuestion = useResolveQuestion(orchestratorOf ?? "");
+  // The question the next message answers, resolved when it is sent.
+  const [replyTo, setReplyTo] = useState<{ id: number; text: string } | null>(
+    null
+  );
   const find = useFind({
+    foldEvents: !!orchestratorOf,
     search,
     items,
     hasMore,
@@ -469,13 +510,7 @@ export function ChatPanel({
     loadOlder,
     rows: rowState,
     release,
-    scrollToBlock: useCallback(async (key: string) => {
-      // The row may only just have been added.
-      await new Promise((r) => requestAnimationFrame(r));
-      listRef.current
-        ?.querySelector(`[data-block="${CSS.escape(key)}"]`)
-        ?.scrollIntoView({ block: "center" });
-    }, []),
+    scrollToBlock,
     scroller: useCallback(() => listRef.current, []),
   });
   const activeRef = useRef(active);
@@ -598,6 +633,55 @@ export function ChatPanel({
         )}
       </div>
       <div className="mx-auto w-full max-w-3xl px-3 pb-3">
+        {orchestratorOf && (
+          <NeedsYouStrip
+            workspaceId={orchestratorOf}
+            chatWaiting={state === "waiting"}
+            onGo={(item) => {
+              if (item.kind === "ask") needsYouFocusActions.ask(item.ask.id);
+              else if (item.kind === "chat") toEnd();
+              else if (item.kind === "task") {
+                window.history.pushState(
+                  null,
+                  "",
+                  hrefWithSession(location.href, item.sessionId)
+                );
+                window.dispatchEvent(new PopStateEvent("popstate"));
+              } else
+                goTo((all) => {
+                  const asked = all.findLast(
+                    (i) =>
+                      isQuestionTool(i) &&
+                      (i as { input?: { text?: string } }).input?.text ===
+                        item.question.text
+                  );
+                  return asked?.id ?? null;
+                });
+            }}
+            onReply={(item) => {
+              setReplyTo({ id: item.question.id, text: item.question.text });
+              setInsert({
+                text: quoteMarkdown(item.question.text),
+                at: Date.now(),
+              });
+            }}
+          />
+        )}
+        {replyTo && (
+          <div className="text-muted-foreground mb-2 flex min-h-11 items-center gap-2 rounded-lg px-2 text-xs">
+            <span className="min-w-0 flex-1 truncate">
+              Answering: {replyTo.text}
+            </span>
+            <button
+              type="button"
+              onClick={() => setReplyTo(null)}
+              aria-label="Stop answering"
+              className="hover:text-foreground flex size-11 shrink-0 items-center justify-center"
+            >
+              ×
+            </button>
+          </div>
+        )}
         <ActivityLine
           items={items}
           state={state}
@@ -660,6 +744,10 @@ export function ChatPanel({
             });
             setAsIs(false);
             send(text, images.length ? images : undefined, compact);
+            if (replyTo) {
+              resolveQuestion.mutate(replyTo.id);
+              setReplyTo(null);
+            }
           }}
           onStop={interrupt}
           commands={freshStart ? withFresh(commands) : commands}

package/components/Chat/EventRow.tsx

@@ -19,7 +19,7 @@ import { useRowState } from "./rowState";
 
 type UserItem = Extract<ChatItem, { kind: "user" }>;
 
-const ICON: Record<ChatOriginKind, LucideIcon> = {
+export const ICON: Record<ChatOriginKind, LucideIcon> = {
   event: Zap,
   peer: Bot,
   schedule: CalendarClock,
@@ -31,7 +31,7 @@ const ICON: Record<ChatOriginKind, LucideIcon> = {
 // and it opens on a tap.
 const SHORT = 32;
 
-const clock = (at: number) =>
+export const clock = (at: number) =>
   new Date(at).toLocaleTimeString([], { hour: "numeric", minute: "2-digit" });
 
 // Opens the session through its address, the way a shared link does.

package/components/Chat/EventTurns.test.ts

@@ -0,0 +1,56 @@
+import { createElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it } from "vitest";
+import type { ChatItem } from "@/lib/chat/events";
+import { eventTurnAt } from "@/lib/chat/turns";
+import { EventGroup } from "./EventTurns";
+
+const turn = (id: string, task: string, text: string) => {
+  const items: ChatItem[] = [
+    {
+      id,
+      kind: "user",
+      text: "PR opened",
+      tagged: true,
+      createdAt: Date.now(),
+      origin: {
+        kind: "event",
+        label: "AgentOS",
+        subjects: [{ id: "s", name: task }],
+      },
+    },
+    { id: `${id}-a`, kind: "assistant", text, createdAt: Date.now() },
+    { id: `${id}-t`, kind: "turn_end", createdAt: Date.now() },
+  ];
+  return eventTurnAt(items, 0)!.turn;
+};
+
+const render = (turns: ReturnType<typeof turn>[]) =>
+  renderToStaticMarkup(
+    createElement(EventGroup, {
+      id: "g",
+      turns,
+      renderReplies: () => "FULL-REPLY-BODY",
+    })
+  );
+
+describe("EventGroup", () => {
+  it("shows one line for a turn: task and how the reply starts, not the reply", () => {
+    const html = render([turn("e1", "billing", "Merged #88.\n\nMore detail.")]);
+    expect(html).toContain("billing");
+    expect(html).toContain("Merged #88.");
+    expect(html).not.toContain("FULL-REPLY-BODY");
+    expect(html).not.toContain("More detail");
+  });
+
+  it("folds several into a count, collapsed", () => {
+    const html = render([
+      turn("e1", "billing", "one"),
+      turn("e2", "api", "two"),
+      turn("e3", "web", "three"),
+    ]);
+    expect(html).toContain("3 updates");
+    expect(html).toContain('aria-expanded="false"');
+    expect(html).not.toContain("FULL-REPLY-BODY");
+  });
+});

package/components/Chat/EventTurns.tsx

@@ -0,0 +1,141 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { ChevronRight, Loader2, MessageCircleQuestion } from "lucide-react";
+import type { ChatItem } from "@/lib/chat/events";
+import type { EventTurn } from "@/lib/chat/turns";
+import { cn } from "@/lib/utils";
+import { clock, EventRow, ICON } from "./EventRow";
+import { useRowState } from "./rowState";
+
+type Render = (items: ChatItem[]) => ReactNode;
+
+// A tap that ends a text selection isn't a tap.
+const tapped = () => !!window.getSelection()?.isCollapsed;
+
+function Chevron({ open }: { open: boolean }) {
+  return (
+    <ChevronRight
+      className={cn(
+        "text-muted-foreground/70 h-3.5 w-3.5 shrink-0 transition-transform",
+        open && "rotate-90"
+      )}
+      aria-hidden
+    />
+  );
+}
+
+function Time({ at }: { at: number }) {
+  return (
+    <time
+      dateTime={new Date(at).toISOString()}
+      className="text-muted-foreground/60 shrink-0 font-mono text-[10px]"
+    >
+      {clock(at)}
+    </time>
+  );
+}
+
+// One event and the reply to it, on a line: what it was about, how the reply
+// starts, when. A tap opens the whole exchange.
+export function EventTurnRow({
+  turn,
+  renderReplies,
+}: {
+  turn: EventTurn;
+  renderReplies: Render;
+}) {
+  const [open, setOpen] = useRowState(`eventturn:${turn.id}`, false);
+  const Icon = ICON[turn.origin.kind];
+  const toggle = () => tapped() && setOpen(!open);
+  return (
+    <div data-origin={turn.origin.kind} data-event-turn={turn.id}>
+      <button
+        type="button"
+        onClick={toggle}
+        aria-expanded={open}
+        className="text-muted-foreground hover:bg-foreground/[0.04] flex min-h-11 w-full items-center gap-2 rounded-lg px-2.5 text-left text-xs md:min-h-9"
+      >
+        <Icon className="text-muted-foreground/70 h-3.5 w-3.5 shrink-0" />
+        <span className="text-foreground/80 max-w-[40%] min-w-0 shrink-0 truncate font-medium">
+          {turn.task}
+        </span>
+        {turn.hasQuestion && (
+          <MessageCircleQuestion
+            className="h-3.5 w-3.5 shrink-0 text-amber-600 dark:text-amber-400"
+            aria-label="Asked a question"
+          />
+        )}
+        <span className="min-w-0 flex-1 truncate">{turn.summary}</span>
+        {turn.live && (
+          <Loader2
+            className="h-3 w-3 shrink-0 animate-spin"
+            aria-label="Working"
+          />
+        )}
+        <Time at={turn.at} />
+        <Chevron open={open} />
+      </button>
+      {open && (
+        <div className="border-border/60 mt-1 ml-3 flex flex-col gap-3 border-l pl-3">
+          <EventRow item={turn.user} origin={turn.origin} />
+          {renderReplies(turn.replies)}
+        </div>
+      )}
+    </div>
+  );
+}
+
+const span = (turns: EventTurn[]) =>
+  turns.length > 1 && clock(turns[0].at) !== clock(turns.at(-1)!.at)
+    ? `${clock(turns[0].at)}–${clock(turns.at(-1)!.at)}`
+    : clock(turns[0].at);
+
+// Consecutive event turns: "5 updates", opened to their rows. A single one is
+// just its row. While the newest is being answered it stays in view.
+export function EventGroup({
+  id,
+  turns,
+  renderReplies,
+}: {
+  id: string;
+  turns: EventTurn[];
+  renderReplies: Render;
+}) {
+  const [open, setOpen] = useRowState(`events:${id}`, false);
+  if (turns.length === 1)
+    return <EventTurnRow turn={turns[0]} renderReplies={renderReplies} />;
+  const names = [...new Set(turns.map((t) => t.task))];
+  const last = turns.at(-1)!;
+  return (
+    <div data-event-group={id}>
+      <button
+        type="button"
+        onClick={() => tapped() && setOpen(!open)}
+        aria-expanded={open}
+        className="text-muted-foreground hover:bg-foreground/[0.04] bg-foreground/[0.03] flex min-h-11 w-full items-center gap-2 rounded-lg px-2.5 text-left text-xs md:min-h-9"
+      >
+        <span className="text-foreground/80 shrink-0 font-medium">
+          {turns.length} updates
+        </span>
+        <span className="min-w-0 flex-1 truncate">
+          {names.slice(0, 3).join(", ")}
+          {names.length > 3 ? ` +${names.length - 3}` : ""}
+        </span>
+        <span className="text-muted-foreground/60 shrink-0 font-mono text-[10px]">
+          {span(turns)}
+        </span>
+        <Chevron open={open} />
+      </button>
+      {open ? (
+        <div className="mt-1 flex flex-col">
+          {turns.map((t) => (
+            <EventTurnRow key={t.id} turn={t} renderReplies={renderReplies} />
+          ))}
+        </div>
+      ) : (
+        last.live && <EventTurnRow turn={last} renderReplies={renderReplies} />
+      )}
+    </div>
+  );
+}

package/components/Chat/useFind.ts

@@ -49,6 +49,8 @@ type Pinned = FindTarget & { block: string };
 export type FindStatus = "idle" | "searching" | "done" | "unavailable";
 
 export interface FindDeps {
+  // The orchestrator's chat folds events into rows that find has to open.
+  foldEvents?: boolean;
   search: (query: string, before?: number) => Promise<SearchResult | null>;
   items: ChatItem[];
   hasMore: boolean;
@@ -147,11 +149,11 @@ export function useFind(deps: FindDeps) {
   // pull the reader back to it.
   const shown = useRef<FindTarget | null>(null);
   const [pinned, setPinned] = useState<Pinned | null>(null);
-  const { items, hasMore, loadingOlder } = deps;
+  const { items, hasMore, loadingOlder, foldEvents } = deps;
   useEffect(() => {
     if (!open || !target || shown.current === target) return;
     const { loadOlder, rows, release, scrollToBlock } = d.current;
-    const where = locate(items, target.id);
+    const where = locate(items, target.id, { foldEvents });
     if (!where) {
       if (!hasMore) shown.current = target;
       else if (!loadingOlder) loadOlder();
@@ -163,7 +165,7 @@ export function useFind(deps: FindDeps) {
     const pin = () =>
       shown.current === target && setPinned({ ...target, block: where.block });
     scrollToBlock(where.block).then(pin, pin);
-  }, [open, target, items, hasMore, loadingOlder]);
+  }, [open, target, items, hasMore, loadingOlder, foldEvents]);
 
   // Paints every match on screen, and the current one apart; the current one
   // is scrolled to once its row (and a tool's loaded output) shows it.

package/components/Chat/useGoToItem.ts

@@ -0,0 +1,71 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { toast } from "sonner";
+import type { ChatItem } from "@/lib/chat/events";
+import { locate } from "@/lib/chat/find";
+import type { RowStore } from "./rowState";
+
+interface Deps {
+  items: ChatItem[];
+  hasMore: boolean;
+  loadingOlder: boolean;
+  loadOlder: () => void;
+  rows: RowStore;
+  release: () => void;
+  scrollToBlock: (block: string) => Promise<void>;
+  foldEvents: boolean;
+}
+
+// Takes the reader to a message by a rule over the loaded items (the strip's
+// "the message where the question was asked"): older pages load until it is
+// found, then its folded rows open and it scrolls into view.
+export function useGoToItem(d: Deps) {
+  const [find, setFind] = useState<{
+    match: (items: ChatItem[]) => string | null;
+    at: number;
+  } | null>(null);
+  const { items, hasMore, loadingOlder, loadOlder, rows, release } = d;
+  const { scrollToBlock, foldEvents } = d;
+  useEffect(() => {
+    if (!find) return;
+    const id = find.match(items);
+    const where = id ? locate(items, id, { foldEvents }) : null;
+    if (!where) {
+      if (hasMore) {
+        if (!loadingOlder) loadOlder();
+      } else {
+        toast("That message isn't loaded");
+        queueMicrotask(() => setFind(null));
+      }
+      return;
+    }
+    queueMicrotask(() => setFind(null));
+    for (const key of where.open) rows.set(key, true);
+    release();
+    // A folded turn in a long group: the turn itself, not the group's middle.
+    const turn = where.open.find((k) => k.startsWith("eventturn:"));
+    scrollToBlock(where.block)
+      .then(() => new Promise((r) => requestAnimationFrame(r)))
+      .then(() =>
+        document
+          .querySelector(
+            `[data-event-turn="${CSS.escape(turn?.slice(10) ?? "")}"]`
+          )
+          ?.scrollIntoView({ block: "center" })
+      )
+      .catch(() => {});
+  }, [
+    find,
+    items,
+    hasMore,
+    loadingOlder,
+    loadOlder,
+    rows,
+    release,
+    scrollToBlock,
+    foldEvents,
+  ]);
+  return (match: (items: ChatItem[]) => string | null) =>
+    setFind({ match, at: Date.now() });
+}

package/components/Orchestrator/AsksList.tsx

@@ -27,18 +27,23 @@ export function AsksList({
   return (
     <div className="space-y-2">
       {shown.map((ask) => (
-        <AskCard
+        <div
           key={ask.id}
-          ask={ask}
-          dense={dense}
-          pending={answer.isPending && answer.variables?.ask.id === ask.id}
-          onAnswer={(a) =>
-            answer.mutate(
-              { ask, ...a },
-              { onError: (e) => toast.error(e.message) }
-            )
-          }
-        />
+          id={`ask-${ask.id}`}
+          className="scroll-mt-2 rounded-xl"
+        >
+          <AskCard
+            ask={ask}
+            dense={dense}
+            pending={answer.isPending && answer.variables?.ask.id === ask.id}
+            onAnswer={(a) =>
+              answer.mutate(
+                { ask, ...a },
+                { onError: (e) => toast.error(e.message) }
+              )
+            }
+          />
+        </div>
       ))}
       {more > 0 && onMore && (
         <button