@saadnvd1/agent-os 0.3.807 → 0.3.810

package/components/Media/MediaViewer.tsx

@@ -0,0 +1,111 @@
+"use client";
+
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+import { useRef, useState, type TouchEvent } from "react";
+import { Dialog, DialogOverlay, DialogPortal } from "@/components/ui/dialog";
+import { useMediaQuery } from "@/hooks/useMediaQuery";
+import { isCloseSwipe, type ViewerMedia } from "./viewer";
+
+/** Full-screen image or clip over everything; closes on its own, never its parent dialog. */
+export function MediaViewer({
+  media,
+  open,
+  onOpenChange,
+}: {
+  media: ViewerMedia;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}) {
+  const reduced = useMediaQuery("(prefers-reduced-motion: reduce)");
+  const start = useRef<{ x: number; y: number } | null>(null);
+  const [drag, setDrag] = useState(0);
+
+  const onTouchStart = (e: TouchEvent) => {
+    const t = e.touches[0];
+    start.current = { x: t.clientX, y: t.clientY };
+  };
+  const onTouchMove = (e: TouchEvent) => {
+    if (!start.current) return;
+    setDrag(Math.max(0, e.touches[0].clientY - start.current.y));
+  };
+  const onTouchEnd = (e: TouchEvent) => {
+    const s = start.current;
+    start.current = null;
+    setDrag(0);
+    if (!s) return;
+    const t = e.changedTouches[0];
+    if (isCloseSwipe(t.clientX - s.x, t.clientY - s.y)) onOpenChange(false);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogPortal>
+        <DialogOverlay className="z-[70] bg-black/90" />
+        <DialogPrimitive.Content
+          aria-label={media.alt}
+          aria-describedby={undefined}
+          onClick={(e) => {
+            // The backdrop is this full-screen box; the media itself isn't a target.
+            if (e.target === e.currentTarget) onOpenChange(false);
+          }}
+          onTouchStart={onTouchStart}
+          onTouchMove={onTouchMove}
+          onTouchEnd={onTouchEnd}
+          onTouchCancel={() => {
+            start.current = null;
+            setDrag(0);
+          }}
+          style={{
+            transform: drag ? `translateY(${drag}px)` : undefined,
+            paddingTop: "max(1rem, env(safe-area-inset-top))",
+            paddingRight: "max(1rem, env(safe-area-inset-right))",
+            paddingBottom: "max(1rem, env(safe-area-inset-bottom))",
+            paddingLeft: "max(1rem, env(safe-area-inset-left))",
+          }}
+          className="fixed inset-0 z-[70] grid place-items-center outline-none"
+        >
+          <DialogPrimitive.Title className="sr-only">
+            {media.alt}
+          </DialogPrimitive.Title>
+          {media.kind === "image" ? (
+            // eslint-disable-next-line @next/next/no-img-element
+            <img
+              src={media.src}
+              alt={media.alt}
+              width={media.width}
+              height={media.height}
+              decoding="async"
+              className="max-h-full max-w-full rounded-lg object-contain"
+            />
+          ) : (
+            <video
+              key={media.src}
+              src={media.src}
+              poster={media.poster}
+              aria-label={media.alt}
+              width={media.width}
+              height={media.height}
+              muted
+              loop
+              playsInline
+              autoPlay={!reduced}
+              controls={reduced}
+              className="max-h-full max-w-full rounded-lg object-contain"
+            />
+          )}
+          <DialogPrimitive.Close
+            aria-label="Close"
+            className="absolute grid size-11 place-items-center rounded-full bg-black/60 text-white hover:bg-black/80 focus-visible:ring-2 focus-visible:ring-white focus-visible:outline-none"
+            style={{
+              top: "max(0.75rem, env(safe-area-inset-top))",
+              right: "max(0.75rem, env(safe-area-inset-right))",
+            }}
+          >
+            <X className="size-5" />
+          </DialogPrimitive.Close>
+        </DialogPrimitive.Content>
+      </DialogPortal>
+    </Dialog>
+  );
+}

package/components/Media/viewer.test.ts

@@ -0,0 +1,26 @@
+import { describe, expect, it } from "vitest";
+import { isCloseSwipe, pickSrc } from "./viewer";
+
+describe("pickSrc", () => {
+  const media = { src: "/a.png", srcDark: "/a-dark.png" };
+  it("uses the dark image in a dark theme", () => {
+    expect(pickSrc(media, true)).toBe("/a-dark.png");
+  });
+  it("uses the light image otherwise", () => {
+    expect(pickSrc(media, false)).toBe("/a.png");
+  });
+  it("falls back when there is no dark variant", () => {
+    expect(pickSrc({ src: "/a.png" }, true)).toBe("/a.png");
+  });
+});
+
+describe("isCloseSwipe", () => {
+  it("closes on a long downward drag", () => {
+    expect(isCloseSwipe(5, 120)).toBe(true);
+  });
+  it("ignores short drags, upward drags and sideways drags", () => {
+    expect(isCloseSwipe(0, 30)).toBe(false);
+    expect(isCloseSwipe(0, -200)).toBe(false);
+    expect(isCloseSwipe(150, 90)).toBe(false);
+  });
+});

package/components/Media/viewer.ts

@@ -0,0 +1,23 @@
+export interface ViewerMedia {
+  kind: "image" | "video";
+  src: string;
+  alt: string;
+  width: number;
+  height: number;
+  poster?: string;
+}
+
+/** The dark variant when the theme is dark and one exists. */
+export function pickSrc(
+  media: { src: string; srcDark?: string },
+  dark: boolean
+): string {
+  return dark && media.srcDark ? media.srcDark : media.src;
+}
+
+export const SWIPE_CLOSE_PX = 80;
+
+/** A mostly-vertical downward drag past the threshold closes the viewer. */
+export function isCloseSwipe(dx: number, dy: number): boolean {
+  return dy >= SWIPE_CLOSE_PX && dy > Math.abs(dx) * 1.2;
+}

package/components/Tips/TipDialog.tsx

@@ -61,7 +61,7 @@ export function TipDialog({
       <DialogContent
         showCloseButton={false}
         placement={wide ? "center" : "sheet"}
-        className="flex max-h-[85dvh] flex-col gap-0 overflow-hidden p-0 sm:max-w-[26rem]"
+        className="flex max-h-[85dvh] flex-col gap-0 overflow-hidden p-0 sm:max-w-[26rem] md:max-w-[36rem]"
       >
         <div className="bg-muted-foreground/40 mx-auto mt-2 h-1 w-9 rounded-full md:hidden" />
         <div className="flex items-center gap-2 px-4 pt-3 pb-1">

package/components/Tips/TipMedia.tsx

@@ -1,9 +1,11 @@
 "use client";
 
-import { Play } from "lucide-react";
+import { Maximize2, Play } from "lucide-react";
 import { useTheme } from "next-themes";
 import { useRef, useState } from "react";
 import { useMediaQuery } from "@/hooks/useMediaQuery";
+import { MediaViewer } from "@/components/Media/MediaViewer";
+import { pickSrc } from "@/components/Media/viewer";
 import type { Media } from "@/lib/tips/schema";
 
 /** A tip's still or clip, sized by its own dimensions so nothing jumps as it loads. */
@@ -11,18 +13,49 @@ export function TipMedia({ media }: { media: Media }) {
   const { resolvedTheme } = useTheme();
   const reduced = useMediaQuery("(prefers-reduced-motion: reduce)");
   const [played, setPlayed] = useState(false);
+  const [expanded, setExpanded] = useState(false);
   const video = useRef<HTMLVideoElement>(null);
   const dark = !!resolvedTheme && !resolvedTheme.startsWith("light");
   const frame =
     "bg-muted relative max-h-[40dvh] w-full overflow-hidden rounded-lg";
   const style = { aspectRatio: `${media.width} / ${media.height}` };
+  const src = pickSrc(media, dark);
+  const expand = (
+    <>
+      <button
+        type="button"
+        aria-label={`Expand ${media.kind === "image" ? "image" : "clip"}: ${media.alt}`}
+        onClick={() => setExpanded(true)}
+        className="focus-visible:ring-ring absolute inset-0 cursor-zoom-in focus-visible:ring-2 focus-visible:outline-none"
+      >
+        <span
+          aria-hidden
+          className="absolute top-2 right-2 grid size-7 place-items-center rounded-md bg-black/60 text-white"
+        >
+          <Maximize2 className="size-3.5" />
+        </span>
+      </button>
+      <MediaViewer
+        media={{
+          kind: media.kind,
+          src,
+          alt: media.alt,
+          width: media.width,
+          height: media.height,
+          poster: media.kind === "video" ? media.poster : undefined,
+        }}
+        open={expanded}
+        onOpenChange={setExpanded}
+      />
+    </>
+  );
 
   if (media.kind === "image")
     return (
       <div className={frame} style={style}>
         {/* eslint-disable-next-line @next/next/no-img-element */}
         <img
-          src={dark && media.srcDark ? media.srcDark : media.src}
+          src={src}
           alt={media.alt}
           width={media.width}
           height={media.height}
@@ -30,6 +63,7 @@ export function TipMedia({ media }: { media: Media }) {
           decoding="async"
           className="size-full object-contain"
         />
+        {expand}
       </div>
     );
 
@@ -51,6 +85,7 @@ export function TipMedia({ media }: { media: Media }) {
         preload={reduced ? "none" : "metadata"}
         className="size-full object-contain"
       />
+      {expand}
       {still && (
         <button
           type="button"
@@ -59,7 +94,7 @@ export function TipMedia({ media }: { media: Media }) {
             setPlayed(true);
             void video.current?.play();
           }}
-          className="absolute inset-0 grid place-items-center bg-black/20"
+          className="absolute top-1/2 left-1/2 z-10 -translate-x-1/2 -translate-y-1/2"
         >
           <span className="bg-background/90 grid size-11 place-items-center rounded-full shadow">
             <Play className="size-5" />

package/components/Updates/{UpdateBanner.test.ts → UpdateToast.test.ts}

@@ -1,5 +1,6 @@
 import "@/components/Chat/composer/test-dom";
-import { act, createElement } from "react";
+import { act, createElement, useEffect, useState } from "react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { createRoot, type Root } from "react-dom/client";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import type { UpdateView } from "@/lib/updates/banner";
@@ -19,6 +20,14 @@ for (const key of [
     writable: true,
   });
 
+let desktopMatches = true;
+window.matchMedia = ((query: string) => ({
+  matches: desktopMatches,
+  media: query,
+  addEventListener: () => {},
+  removeEventListener: () => {},
+})) as unknown as typeof window.matchMedia;
+
 let view: UpdateView | undefined;
 const runMutate = vi.fn();
 const cancelMutate = vi.fn();
@@ -27,9 +36,42 @@ vi.mock("@/data/updates", () => ({
   useRunUpdate: () => ({ mutate: runMutate, isPending: false }),
   useCancelUpdate: () => ({ mutate: cancelMutate, isPending: false }),
 }));
-vi.mock("sonner", () => ({ toast: { error: vi.fn() } }));
+// A stand-in for sonner: it records what the toast was asked to show, and a
+// tray component renders the latest content like the real Toaster would.
+interface Shown {
+  render: (id: string) => React.ReactNode;
+  opts: Record<string, unknown>;
+}
+const shown = new Map<string, Shown>();
+const listeners = new Set<() => void>();
+const emit = () => listeners.forEach((l) => l());
+const custom = vi.fn((render: Shown["render"], opts: Shown["opts"]) => {
+  shown.set(opts.id as string, { render, opts });
+  emit();
+});
+const dismiss = vi.fn((id: string) => {
+  shown.delete(id);
+  emit();
+});
+vi.mock("sonner", () => ({ toast: { error: vi.fn(), custom, dismiss } }));
+
+const { UpdateToast } = await import("./UpdateToast");
+const { settingsUi } = await import("@/stores/settingsUi");
 
-const { UpdateBanner } = await import("./UpdateBanner");
+function Tray() {
+  const [, tick] = useState(0);
+  useEffect(() => {
+    const l = () => tick((n) => n + 1);
+    listeners.add(l);
+    l();
+    return () => void listeners.delete(l);
+  }, []);
+  return createElement(
+    "div",
+    null,
+    [...shown].map(([id, t]) => createElement("div", { key: id }, t.render(id)))
+  );
+}
 
 (
   globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }
@@ -60,7 +102,18 @@ const make = (over: Partial<UpdateView> = {}): UpdateView => ({
 
 let root: Root;
 let host: HTMLElement;
-const render = () => act(async () => root.render(createElement(UpdateBanner)));
+const qc = new QueryClient();
+const render = () =>
+  act(async () =>
+    root.render(
+      createElement(
+        QueryClientProvider,
+        { client: qc },
+        createElement(UpdateToast),
+        createElement(Tray)
+      )
+    )
+  );
 const text = () => document.body.textContent ?? "";
 const button = (label: string) =>
   [...document.querySelectorAll<HTMLButtonElement>("button")].find(
@@ -70,6 +123,11 @@ const button = (label: string) =>
 
 beforeEach(() => {
   localStorage.clear();
+  shown.clear();
+  custom.mockClear();
+  dismiss.mockClear();
+  settingsUi.open = false;
+  settingsUi.section = null;
   runMutate.mockReset();
   cancelMutate.mockReset();
   view = make();
@@ -82,7 +140,7 @@ afterEach(async () => {
   host.remove();
 });
 
-describe("UpdateBanner", () => {
+describe("UpdateToast", () => {
   it("says which version is available, with a link to the notes", async () => {
     await render();
     expect(text()).toContain("AgentOS 0.3.5 is available");
@@ -119,6 +177,7 @@ describe("UpdateBanner", () => {
     view = make({ bannerEnabled: false });
     await render();
     expect(text()).toBe("");
+    expect(shown.size).toBe(0);
     view = make({ available: false });
     await render();
     expect(text()).toBe("");
@@ -161,7 +220,7 @@ describe("UpdateBanner", () => {
     expect(cancelMutate).toHaveBeenCalled();
   });
 
-  it("shows progress while updating, with no way to dismiss it", async () => {
+  it("shows progress while updating and stays up, with a close button", async () => {
     view = make({
       run: {
         id: "r",
@@ -174,10 +233,10 @@ describe("UpdateBanner", () => {
     });
     await render();
     expect(text()).toContain("Building… step 3 of 5");
-    expect(button("Dismiss")).toBeUndefined();
+    expect(custom.mock.calls.at(-1)![1].duration).toBe(Infinity);
   });
 
-  it("shows a failure with its error until dismissed", async () => {
+  it("shows a failure with its error and a link to the log, until dismissed", async () => {
     view = make({
       available: false,
       run: {
@@ -192,6 +251,11 @@ describe("UpdateBanner", () => {
     });
     await render();
     expect(text()).toContain("build exploded");
+    expect(custom.mock.calls.at(-1)![1].duration).toBe(Infinity);
+    expect(document.querySelector("pre")).toBeNull();
+    await act(async () => button("View log")!.click());
+    expect(settingsUi.open).toBe(true);
+    expect(settingsUi.section).toBe("updates");
     await act(async () => button("Dismiss")!.click());
     expect(text()).toBe("");
     expect(localStorage.getItem("agentos.update.dismissedRun")).toBe("r9");
@@ -234,4 +298,90 @@ describe("UpdateBanner", () => {
     expect(text()).toContain("went back to 0.3.1");
     expect(document.querySelector('[role="alert"]')).toBeNull();
   });
+
+  it("keeps one toast id and updates it in place through the update", async () => {
+    await render();
+    const run = (phase: "building" | "restarting" | "done") => ({
+      id: "r",
+      phase,
+      auto: true,
+      from: "a",
+      fromVersion: "0.3.1",
+      toVersion: "0.3.5",
+      startedAt: Date.now(),
+      finishedAt: phase === "done" ? Date.now() : undefined,
+    });
+    for (const phase of ["building", "restarting", "done"] as const) {
+      view = make({ available: false, run: run(phase) });
+      await render();
+    }
+    expect(text()).toContain("updated itself to 0.3.5");
+    expect(new Set(custom.mock.calls.map((c) => c[1].id))).toEqual(
+      new Set(["agentos-update"])
+    );
+    expect(shown.size).toBe(1);
+  });
+
+  it("auto-dismisses the updated note after a few seconds", async () => {
+    view = make({
+      available: false,
+      run: {
+        id: "a1",
+        phase: "done",
+        auto: true,
+        from: "a",
+        fromVersion: "0.3.1",
+        toVersion: "0.3.5",
+        startedAt: 1,
+        finishedAt: Date.now(),
+      },
+    });
+    await render();
+    const opts = custom.mock.calls.at(-1)![1];
+    expect(opts.duration).toBeGreaterThan(0);
+    expect(opts.duration).toBeLessThanOrEqual(10_000);
+    await act(async () => (opts.onAutoClose as () => void)());
+    expect(text()).toBe("");
+    expect(localStorage.getItem("agentos.update.dismissedRun")).toBe("a1");
+  });
+
+  it("closing a running toast hides it without cancelling the update", async () => {
+    view = make({
+      run: {
+        id: "r",
+        phase: "building",
+        from: "a",
+        fromVersion: "0.3.1",
+        toVersion: "0.3.5",
+        startedAt: Date.now(),
+      },
+    });
+    await render();
+    await act(async () => button("Dismiss")!.click());
+    expect(text()).toBe("");
+    view = make({
+      run: {
+        id: "r",
+        phase: "failed",
+        from: "a",
+        fromVersion: "0.3.1",
+        toVersion: "0.3.5",
+        startedAt: 1,
+        error: "boom",
+      },
+    });
+    await render();
+    expect(text()).toContain("boom");
+  });
+
+  it("sits top-center on phones and bottom-right on desktop", async () => {
+    await render();
+    expect(custom.mock.calls.at(-1)![1].position).toBe("bottom-right");
+    desktopMatches = false;
+    await act(async () => root.unmount());
+    root = createRoot(host);
+    await render();
+    desktopMatches = true;
+    expect(custom.mock.calls.at(-1)![1].position).toBe("top-center");
+  });
 });

package/components/Updates/{UpdateBanner.tsx → UpdateToast.tsx}

@@ -1,6 +1,8 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useEffect, useState, type ReactNode } from "react";
+import { useQueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { toast } from "sonner";
 import { ArrowUpCircle, ChevronDown, Loader2, X } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { useUpdates } from "@/data/updates";
@@ -15,6 +17,7 @@ import { cn } from "@/lib/utils";
 import { TipHost } from "@/components/Tips";
 import { WhatsNewHost } from "@/components/WhatsNew";
 import { whatsNewActions } from "@/stores/whatsNew";
+import { settingsUiActions } from "@/stores/settingsUi";
 import { UpdateActions } from "./UpdateActions";
 
 const STEPS = [
@@ -43,29 +46,12 @@ function useSince(startedAt: number | undefined, on: boolean) {
   return startedAt ? now - startedAt : 0;
 }
 
-function Log({ lines }: { lines: string[] }) {
-  const [open, setOpen] = useState(false);
-  if (!lines.length) return null;
-  return (
-    <>
-      <button
-        type="button"
-        className="text-muted-foreground hover:text-foreground min-h-11 text-xs underline md:min-h-0"
-        onClick={() => setOpen(!open)}
-      >
-        {open ? "Hide log" : "Show log"}
-      </button>
-      {open && (
-        <pre className="bg-background/60 mt-1 max-h-48 w-full overflow-auto rounded-md p-2 text-xs whitespace-pre-wrap">
-          {lines.join("\n")}
-        </pre>
-      )}
-    </>
-  );
-}
+export const UPDATE_TOAST_ID = "agentos-update";
+const UPDATED_AUTOCLOSE_MS = 6000;
+const DESKTOP_QUERY = "(min-width: 768px)";
 
-/** The bar itself; what to show and what the buttons do come in as props. */
-export function UpdateBannerView({
+/** The toast's content; what to show and what the buttons do come in as props. */
+export function UpdateToastView({
   state,
   view,
   onDismiss,
@@ -79,6 +65,8 @@ export function UpdateBannerView({
   const elapsed = useSince(run?.startedAt, state === "running");
   const latest = view.latest;
   const failed = state === "failed";
+  const link =
+    "text-muted-foreground hover:text-foreground inline-flex min-h-11 items-center text-xs underline md:min-h-0";
 
   let text: React.ReactNode;
   if (state === "available") text = <>AgentOS {latest?.version} is available</>;
@@ -113,31 +101,15 @@ export function UpdateBannerView({
       );
   }
 
-  const extra = (
-    <>
-      {state === "available" && !view.canUpdate.ok && view.canUpdate.reason && (
-        <p className="text-muted-foreground text-xs">{view.canUpdate.reason}</p>
-      )}
-      {(failed || state === "rolled_back") && <Log lines={run?.log ?? []} />}
-      {notesOpen && latest && (
-        <ul className="text-muted-foreground list-disc space-y-0.5 pl-4 text-xs">
-          {latest.notes.map((n, i) => (
-            <li key={i}>{n}</li>
-          ))}
-        </ul>
-      )}
-    </>
-  );
-
   return (
     <div
       role={failed ? "alert" : "status"}
       className={cn(
-        "flex items-start gap-2 border-b px-3 py-2 text-sm",
-        failed ? "bg-destructive/10 text-foreground" : "bg-muted/60"
+        "bg-card text-foreground pointer-events-auto flex w-[356px] max-w-[calc(100vw-2rem)] items-start gap-2 rounded-lg border p-3 text-sm shadow-lg",
+        failed && "border-destructive/50"
       )}
     >
-      <span className="flex h-6 shrink-0 items-center md:h-8">
+      <span className="flex h-6 shrink-0 items-center">
         {state === "running" ? (
           <Loader2 className="text-muted-foreground h-4 w-4 animate-spin" />
         ) : (
@@ -150,13 +122,44 @@ export function UpdateBannerView({
         )}
       </span>
       <div className="min-w-0 flex-1 space-y-1">
-        <div className="flex flex-wrap items-center gap-x-3 gap-y-1 md:min-h-8">
-          <p className="min-w-0 flex-1 basis-40">{text}</p>
+        <p className="min-h-6 leading-6">{text}</p>
+        {state === "available" &&
+          !view.canUpdate.ok &&
+          view.canUpdate.reason && (
+            <p className="text-muted-foreground text-xs">
+              {view.canUpdate.reason}
+            </p>
+          )}
+        {notesOpen && latest && (
+          <ul className="text-muted-foreground list-disc space-y-0.5 pl-4 text-xs">
+            {latest.notes.map((n, i) => (
+              <li key={i}>{n}</li>
+            ))}
+          </ul>
+        )}
+        <div className="flex flex-wrap items-center gap-x-3 gap-y-1">
+          {(state === "available" || state === "pending") && (
+            <UpdateActions view={view} />
+          )}
+          {state === "running" && elapsed > SLOW_MS && (
+            <Button size="sm" onClick={() => window.location.reload()}>
+              Reload
+            </Button>
+          )}
+          {(failed || state === "rolled_back") && (
+            <button
+              type="button"
+              className={link}
+              onClick={() => settingsUiActions.open("updates")}
+            >
+              View log
+            </button>
+          )}
           {state === "available" && latest && latest.notes.length > 0 && (
             <button
               type="button"
               aria-expanded={notesOpen}
-              className="text-muted-foreground hover:text-foreground inline-flex min-h-11 items-center gap-1 text-xs md:min-h-0"
+              className={cn(link, "gap-1 no-underline")}
               onClick={() => setNotesOpen(!notesOpen)}
             >
               Commit list
@@ -171,7 +174,7 @@ export function UpdateBannerView({
           {(state === "available" || state === "updated") && (
             <button
               type="button"
-              className="text-muted-foreground hover:text-foreground inline-flex min-h-11 items-center text-xs underline md:min-h-0"
+              className={link}
               onClick={() => whatsNewActions.open(true)}
             >
               See what&apos;s new
@@ -182,71 +185,98 @@ export function UpdateBannerView({
               href={latest.url}
               target="_blank"
               rel="noreferrer noopener"
-              className="text-muted-foreground hover:text-foreground inline-flex min-h-11 items-center text-xs underline md:min-h-0"
+              className={link}
             >
               Release notes
             </a>
           )}
-          {(state === "available" || state === "pending") && (
-            <UpdateActions view={view} />
-          )}
-          {state === "running" && elapsed > SLOW_MS && (
-            <Button size="sm" onClick={() => window.location.reload()}>
-              Reload
-            </Button>
-          )}
         </div>
-        {extra}
       </div>
-      {state !== "running" && state !== "pending" && (
-        <Button
-          variant="ghost"
-          size="icon-sm"
-          aria-label={
-            state === "available" ? "Dismiss until the next version" : "Dismiss"
-          }
-          className="-my-1 -mr-1 h-11 w-11 shrink-0 md:h-8 md:w-8"
-          onClick={onDismiss}
-        >
-          <X className="h-4 w-4" />
-        </Button>
-      )}
+      <Button
+        variant="ghost"
+        size="icon-sm"
+        aria-label={
+          state === "available" ? "Dismiss until the next version" : "Dismiss"
+        }
+        className="-my-1 -mr-1 h-11 w-11 shrink-0 md:h-8 md:w-8"
+        onClick={onDismiss}
+      >
+        <X className="h-4 w-4" />
+      </Button>
     </div>
   );
 }
 
-// Held apart: the page re-renders on every status push.
-export function UpdateBanner() {
+function useIsDesktop() {
+  const [desktop, setDesktop] = useState(true);
+  useEffect(() => {
+    const mq = window.matchMedia(DESKTOP_QUERY);
+    const on = () => setDesktop(mq.matches);
+    on();
+    mq.addEventListener("change", on);
+    return () => mq.removeEventListener("change", on);
+  }, []);
+  return desktop;
+}
+
+/**
+ * One sonner toast with a fixed id, updated in place as the update moves on.
+ * Bottom-right on desktop; top-center on phones, where the bottom is the
+ * composer. Held apart: the page re-renders on every status push.
+ */
+export function UpdateToast() {
   const { data: view } = useUpdates();
   const dismissed = useDismissedUpdate();
+  const queryClient = useQueryClient();
+  const desktop = useIsDesktop();
+  // Closing a running or pending toast hides it for that run only; the
+  // result (updated, failed) still shows afterwards.
+  const [closed, setClosed] = useState<string | null>(null);
   useReloadWhenUpdated(view);
-  const state = bannerState({
+  const computed = bannerState({
     view,
     dismissedVersion: dismissed.version,
     dismissedRun: dismissed.run,
   });
-  if (state === "hidden" || !view)
-    return (
-      <>
-        <WhatsNewHost />
-        <TipHost />
-      </>
+  const key =
+    computed === "running"
+      ? `running:${view?.run?.id}`
+      : computed === "pending"
+        ? `pending:${view?.pending?.requestedAt}`
+        : null;
+  const state = key && key === closed ? "hidden" : computed;
+
+  const { dismissVersion, dismissRun } = dismissed;
+  useEffect(() => {
+    if (state === "hidden" || !view) {
+      toast.dismiss(UPDATE_TOAST_ID);
+      return;
+    }
+    const onDismiss = () => {
+      toast.dismiss(UPDATE_TOAST_ID);
+      if (key) setClosed(key);
+      else if (state === "available" && view.latest)
+        dismissVersion(view.latest.version);
+      else if (view.run) dismissRun(view.run.id);
+    };
+    const el: ReactNode = (
+      <QueryClientProvider client={queryClient}>
+        <UpdateToastView state={state} view={view} onDismiss={onDismiss} />
+      </QueryClientProvider>
     );
+    toast.custom(() => el, {
+      id: UPDATE_TOAST_ID,
+      position: desktop ? "bottom-right" : "top-center",
+      duration: state === "updated" ? UPDATED_AUTOCLOSE_MS : Infinity,
+      onAutoClose: onDismiss,
+    });
+  }, [state, view, key, desktop, queryClient, dismissVersion, dismissRun]);
+  useEffect(() => () => void toast.dismiss(UPDATE_TOAST_ID), []);
+
   return (
     <>
       <WhatsNewHost />
       <TipHost />
-      <UpdateBannerView
-        state={state}
-        view={view}
-        onDismiss={() =>
-          state === "available" && view.latest
-            ? dismissed.dismissVersion(view.latest.version)
-            : view.run
-              ? dismissed.dismissRun(view.run.id)
-              : undefined
-        }
-      />
     </>
   );
 }

package/components/Updates/index.ts

@@ -1,2 +1,2 @@
-export { UpdateBanner } from "./UpdateBanner";
+export { UpdateToast } from "./UpdateToast";
 export { UpdatesSection } from "./UpdatesSection";

package/components/views/DesktopView.tsx

@@ -2,7 +2,7 @@
 
 import { DesktopSidebar } from "./DesktopSidebar";
 import { DesktopAppActions, SidebarToggle } from "./DesktopAppActions";
-import { UpdateBanner } from "@/components/Updates";
+import { UpdateToast } from "@/components/Updates";
 import { PaneLayout } from "@/components/PaneLayout";
 import { PaneBarSlotsProvider } from "@/components/Pane/PaneBarSlots";
 import type { ViewProps } from "./types";
@@ -53,7 +53,7 @@ export function DesktopView({
 
       {/* Main content */}
       <div className="flex min-w-0 flex-1 flex-col">
-        <UpdateBanner />
+        <UpdateToast />
         {/* Pane Layout - full height */}
         <div className="min-h-0 flex-1">
           <PaneBarSlotsProvider

package/components/views/MobileView.tsx

@@ -4,7 +4,7 @@ import { SessionList } from "@/components/SessionList";
 import { SidebarFooter } from "@/components/SidebarFooter";
 import { PaneLayout } from "@/components/PaneLayout";
 import { SwipeSidebar } from "@/components/mobile/SwipeSidebar";
-import { UpdateBanner } from "@/components/Updates";
+import { UpdateToast } from "@/components/Updates";
 import type { ViewProps } from "./types";
 import { CodeSearchDialog, StartServerDialog } from "./lazy";
 import { fileOpenActions } from "@/stores/fileOpen";
@@ -30,7 +30,7 @@ export function MobileView({
 }: ViewProps) {
   return (
     <main className="app-backdrop h-app fixed inset-x-0 top-[var(--app-top,0px)] flex flex-col overflow-hidden pb-[env(safe-area-inset-bottom)]">
-      <UpdateBanner />
+      <UpdateToast />
       {/* Swipe sidebar */}
       <SwipeSidebar isOpen={sidebarOpen} onClose={() => setSidebarOpen(false)}>
         <div className="flex h-full flex-col">

package/content/whats-new.json

@@ -1849,6 +1849,22 @@
       "area": "Chat",
       "text": "Pressing Esc now takes you out of the message box when there is nothing else for it to do.",
       "url": "https://github.com/saadnvd1/agent-os/pull/541"
+    },
+    {
+      "id": 542,
+      "date": "2026-10-31",
+      "kind": "improved",
+      "area": "AgentOS",
+      "text": "Tip of the Day images are larger on desktop, and you can tap one to see it full screen.",
+      "url": "https://github.com/saadnvd1/agent-os/pull/542"
+    },
+    {
+      "id": 543,
+      "date": "2026-10-31",
+      "kind": "improved",
+      "area": "Updates",
+      "text": "Update notices now appear as a small pop-up instead of a bar across the top of the app.",
+      "url": "https://github.com/saadnvd1/agent-os/pull/543"
     }
   ]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saadnvd1/agent-os",
-  "version": "0.3.807",
+  "version": "0.3.810",
   "description": "Self-hosted web UI for managing Claude Code sessions",
   "bin": {
     "agent-os": "scripts/agent-os"