@saadnvd1/agent-os 0.3.553 → 0.3.555

package/components/Updates/UpdateActions.tsx

@@ -0,0 +1,93 @@
+"use client";
+
+import { useState } from "react";
+import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { useCancelUpdate, useRunUpdate } from "@/data/updates";
+import { workingTotal, type UpdateView } from "@/lib/updates/banner";
+
+const plural = (n: number, word: string) => `${n} ${word}${n === 1 ? "" : "s"}`;
+
+const toastError = (e: unknown) =>
+  toast.error(e instanceof Error ? e.message : String(e));
+
+/** What a restart cuts, in words. */
+export function workingWarning(w: UpdateView["working"]): string {
+  const parts: string[] = [];
+  if (w.sessions) parts.push(`${plural(w.sessions, "session")} working`);
+  if (w.reviews) parts.push(`${plural(w.reviews, "review")} running`);
+  if (w.setups) parts.push(`${plural(w.setups, "task setup")} running`);
+  return parts.join(", ");
+}
+
+/**
+ * Update now, or Cancel for an update waiting for quiet. When something is
+ * working, Update now asks first and offers to wait.
+ */
+export function UpdateActions({ view }: { view: UpdateView }) {
+  const run = useRunUpdate();
+  const cancel = useCancelUpdate();
+  const [confirm, setConfirm] = useState(false);
+  const busy = workingTotal(view.working) > 0;
+
+  if (view.pending)
+    return (
+      <Button
+        size="sm"
+        className="min-h-11 md:min-h-0"
+        variant="outline"
+        disabled={cancel.isPending}
+        onClick={() => cancel.mutate(undefined, { onError: toastError })}
+      >
+        Cancel
+      </Button>
+    );
+  if (!view.canUpdate.ok) return null;
+
+  const start = (when: "now" | "idle") => {
+    setConfirm(false);
+    run.mutate(when, { onError: toastError });
+  };
+
+  return (
+    <>
+      <Button
+        size="sm"
+        className="min-h-11 md:min-h-0"
+        disabled={run.isPending}
+        onClick={() => (busy ? setConfirm(true) : start("now"))}
+      >
+        Update now
+      </Button>
+      <Dialog open={confirm} onOpenChange={setConfirm}>
+        <DialogContent className="max-w-md">
+          <DialogHeader>
+            <DialogTitle>Update while work is running?</DialogTitle>
+            <DialogDescription>
+              {workingWarning(view.working)}. Terminals and chats keep running
+              through the restart; reviews and task setups in progress start
+              over when AgentOS is back.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter className="gap-2 max-sm:flex-col-reverse">
+            <Button variant="ghost" onClick={() => setConfirm(false)}>
+              Cancel
+            </Button>
+            <Button variant="outline" onClick={() => start("now")}>
+              Update now
+            </Button>
+            <Button onClick={() => start("idle")}>Update when idle</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}

package/components/Updates/UpdateBanner.test.ts

@@ -0,0 +1,198 @@
+import "@/components/Chat/composer/test-dom";
+import { act, createElement } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import type { UpdateView } from "@/lib/updates/banner";
+
+// Radix dispatches its own events; they must be jsdom's, not Node's.
+for (const key of [
+  "Event",
+  "CustomEvent",
+  "FocusEvent",
+  "PopStateEvent",
+  "NodeFilter",
+  "HTMLButtonElement",
+])
+  Object.defineProperty(globalThis, key, {
+    value: (window as unknown as Record<string, unknown>)[key],
+    configurable: true,
+    writable: true,
+  });
+
+let view: UpdateView | undefined;
+const runMutate = vi.fn();
+const cancelMutate = vi.fn();
+vi.mock("@/data/updates", () => ({
+  useUpdates: () => ({ data: view }),
+  useRunUpdate: () => ({ mutate: runMutate, isPending: false }),
+  useCancelUpdate: () => ({ mutate: cancelMutate, isPending: false }),
+}));
+vi.mock("sonner", () => ({ toast: { error: vi.fn() } }));
+
+const { UpdateBanner } = await import("./UpdateBanner");
+
+(
+  globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }
+).IS_REACT_ACT_ENVIRONMENT = true;
+
+const make = (over: Partial<UpdateView> = {}): UpdateView => ({
+  current: { version: "0.3.1", sha: "a" },
+  latest: {
+    version: "0.3.5",
+    sha: "b",
+    notes: ["Faster boot (#9)"],
+    url: "https://example.com/compare",
+  },
+  available: true,
+  behind: 4,
+  status: "ok",
+  checkedAt: 1,
+  checkError: null,
+  bannerEnabled: true,
+  bannerLocked: false,
+  canUpdate: { ok: true },
+  run: null,
+  pending: null,
+  working: { sessions: 0, reviews: 0, setups: 0 },
+  ...over,
+});
+
+let root: Root;
+let host: HTMLElement;
+const render = () => act(async () => root.render(createElement(UpdateBanner)));
+const text = () => document.body.textContent ?? "";
+const button = (label: string) =>
+  [...document.querySelectorAll<HTMLButtonElement>("button")].find(
+    (b) =>
+      b.textContent?.trim() === label || b.getAttribute("aria-label") === label
+  );
+
+beforeEach(() => {
+  localStorage.clear();
+  runMutate.mockReset();
+  cancelMutate.mockReset();
+  view = make();
+  host = document.createElement("div");
+  document.body.appendChild(host);
+  root = createRoot(host);
+});
+afterEach(async () => {
+  await act(async () => root.unmount());
+  host.remove();
+});
+
+describe("UpdateBanner", () => {
+  it("says which version is available, with a link to the notes", async () => {
+    await render();
+    expect(text()).toContain("AgentOS 0.3.5 is available");
+    expect(
+      document.querySelector<HTMLAnchorElement>("a")?.getAttribute("href")
+    ).toBe("https://example.com/compare");
+    await act(async () => button("What's new")!.click());
+    expect(text()).toContain("Faster boot (#9)");
+  });
+
+  it("Dismiss hides it for that version and survives a reload", async () => {
+    await render();
+    await act(async () => button("Dismiss until the next version")!.click());
+    expect(text()).not.toContain("is available");
+    expect(localStorage.getItem("agentos.update.dismissed")).toBe("0.3.5");
+
+    // A new page load reads the same dismissal.
+    await act(async () => root.unmount());
+    root = createRoot(host);
+    await render();
+    expect(text()).not.toContain("is available");
+  });
+
+  it("shows again for a newer version", async () => {
+    localStorage.setItem("agentos.update.dismissed", "0.3.5");
+    view = make({
+      latest: { version: "0.3.6", sha: "c", notes: [], url: null },
+    });
+    await render();
+    expect(text()).toContain("AgentOS 0.3.6 is available");
+  });
+
+  it("is absent when the banner is switched off or nothing is newer", async () => {
+    view = make({ bannerEnabled: false });
+    await render();
+    expect(text()).toBe("");
+    view = make({ available: false });
+    await render();
+    expect(text()).toBe("");
+  });
+
+  it("offers no Update button to a caller who can't update, and says why", async () => {
+    view = make({
+      canUpdate: {
+        ok: false,
+        code: "forbidden",
+        reason: "Ask a device that can approve.",
+      },
+    });
+    await render();
+    expect(button("Update now")).toBeUndefined();
+    expect(text()).toContain("Ask a device that can approve.");
+  });
+
+  it("Update now starts at once when nothing is working", async () => {
+    await render();
+    await act(async () => button("Update now")!.click());
+    expect(runMutate).toHaveBeenCalledWith("now", expect.anything());
+  });
+
+  it("warns when work is running, and can wait for idle", async () => {
+    view = make({ working: { sessions: 3, reviews: 0, setups: 0 } });
+    await render();
+    await act(async () => button("Update now")!.click());
+    expect(runMutate).not.toHaveBeenCalled();
+    expect(text()).toContain("3 sessions working");
+    await act(async () => button("Update when idle")!.click());
+    expect(runMutate).toHaveBeenCalledWith("idle", expect.anything());
+  });
+
+  it("shows a pending update with Cancel", async () => {
+    view = make({ pending: { requestedAt: 1 } });
+    await render();
+    expect(text()).toContain("will update when nothing is working");
+    await act(async () => button("Cancel")!.click());
+    expect(cancelMutate).toHaveBeenCalled();
+  });
+
+  it("shows progress while updating, with no way to dismiss it", async () => {
+    view = make({
+      run: {
+        id: "r",
+        phase: "building",
+        from: "a",
+        fromVersion: "0.3.1",
+        toVersion: "0.3.5",
+        startedAt: Date.now(),
+      },
+    });
+    await render();
+    expect(text()).toContain("Building… step 3 of 4");
+    expect(button("Dismiss")).toBeUndefined();
+  });
+
+  it("shows a failure with its error until dismissed", async () => {
+    view = make({
+      available: false,
+      run: {
+        id: "r9",
+        phase: "failed",
+        from: "a",
+        fromVersion: "0.3.1",
+        toVersion: "0.3.5",
+        startedAt: 1,
+        error: "build exploded",
+      },
+    });
+    await render();
+    expect(text()).toContain("build exploded");
+    await act(async () => button("Dismiss")!.click());
+    expect(text()).toBe("");
+    expect(localStorage.getItem("agentos.update.dismissedRun")).toBe("r9");
+  });
+});

package/components/Updates/UpdateBanner.tsx

@@ -0,0 +1,212 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { ArrowUpCircle, ChevronDown, Loader2, X } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { useUpdates } from "@/data/updates";
+import { useDismissedUpdate } from "@/hooks/useDismissedUpdate";
+import { useReloadWhenUpdated } from "@/hooks/useReloadWhenUpdated";
+import {
+  bannerState,
+  type BannerState,
+  type UpdateView,
+} from "@/lib/updates/banner";
+import { cn } from "@/lib/utils";
+import { UpdateActions } from "./UpdateActions";
+
+const STEPS = ["pulling", "installing", "building", "restarting"] as const;
+const LABEL: Record<(typeof STEPS)[number], string> = {
+  pulling: "Pulling the new version",
+  installing: "Installing dependencies",
+  building: "Building",
+  restarting: "Restarting",
+};
+const SLOW_MS = 10 * 60_000;
+
+function useSince(startedAt: number | undefined, on: boolean) {
+  const [now, setNow] = useState(() => Date.now());
+  useEffect(() => {
+    if (!on) return;
+    const t = setInterval(() => setNow(Date.now()), 5000);
+    return () => clearInterval(t);
+  }, [on]);
+  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>
+      )}
+    </>
+  );
+}
+
+/** The bar itself; what to show and what the buttons do come in as props. */
+export function UpdateBannerView({
+  state,
+  view,
+  onDismiss,
+}: {
+  state: Exclude<BannerState, "hidden">;
+  view: UpdateView;
+  onDismiss: () => void;
+}) {
+  const [notesOpen, setNotesOpen] = useState(false);
+  const run = view.run;
+  const elapsed = useSince(run?.startedAt, state === "running");
+  const latest = view.latest;
+  const failed = state === "failed";
+
+  let text: React.ReactNode;
+  if (state === "available") text = <>AgentOS {latest?.version} is available</>;
+  else if (state === "pending")
+    text = <>AgentOS will update when nothing is working</>;
+  else if (state === "built")
+    text = <>Built {run?.toVersion}. Restart AgentOS to finish updating.</>;
+  else if (failed) text = <>The update didn&apos;t finish. {run?.error}</>;
+  else {
+    const step = Math.max(
+      0,
+      STEPS.indexOf(run!.phase as (typeof STEPS)[number])
+    );
+    text =
+      elapsed > SLOW_MS ? (
+        <>Taking longer than expected. Check the update log, then reload.</>
+      ) : (
+        <>
+          {LABEL[STEPS[step]]}… step {step + 1} of {STEPS.length}
+        </>
+      );
+  }
+
+  const extra = (
+    <>
+      {state === "available" && !view.canUpdate.ok && view.canUpdate.reason && (
+        <p className="text-muted-foreground text-xs">{view.canUpdate.reason}</p>
+      )}
+      {failed && <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"
+      )}
+    >
+      <span className="flex h-6 shrink-0 items-center md:h-8">
+        {state === "running" ? (
+          <Loader2 className="text-muted-foreground h-4 w-4 animate-spin" />
+        ) : (
+          <ArrowUpCircle
+            className={cn(
+              "h-4 w-4",
+              failed ? "text-destructive" : "text-primary"
+            )}
+          />
+        )}
+      </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>
+          {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"
+              onClick={() => setNotesOpen(!notesOpen)}
+            >
+              What&apos;s new
+              <ChevronDown
+                className={cn(
+                  "h-3 w-3 transition-transform",
+                  notesOpen && "rotate-180"
+                )}
+              />
+            </button>
+          )}
+          {state === "available" && latest?.url && (
+            <a
+              href={latest.url}
+              target="_blank"
+              rel="noreferrer noopener"
+              className="text-primary inline-flex min-h-11 items-center text-xs underline md:min-h-0"
+            >
+              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>
+      )}
+    </div>
+  );
+}
+
+// Held apart: the page re-renders on every status push.
+export function UpdateBanner() {
+  const { data: view } = useUpdates();
+  const dismissed = useDismissedUpdate();
+  useReloadWhenUpdated(view);
+  const state = bannerState({
+    view,
+    dismissedVersion: dismissed.version,
+    dismissedRun: dismissed.run,
+  });
+  if (state === "hidden" || !view) return null;
+  return (
+    <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/UpdatesSection.tsx

@@ -0,0 +1,150 @@
+"use client";
+
+import { toast } from "sonner";
+import { Loader2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { SettingToggle } from "@/components/Settings/SettingToggle";
+import {
+  useCheckForUpdates,
+  useUpdateBannerSetting,
+  useUpdates,
+} from "@/data/updates";
+import { isActivePhase } from "@/lib/updates/banner";
+import { UpdateActions } from "./UpdateActions";
+
+function ago(at: number | null): string {
+  if (!at) return "not yet";
+  const min = Math.floor((Date.now() - at) / 60_000);
+  if (min < 1) return "just now";
+  if (min < 60) return `${min} minute${min === 1 ? "" : "s"} ago`;
+  const h = Math.floor(min / 60);
+  return h < 48
+    ? `${h} hour${h === 1 ? "" : "s"} ago`
+    : `${Math.floor(h / 24)} days ago`;
+}
+
+function Row({ label, value }: { label: string; value: React.ReactNode }) {
+  return (
+    <div className="flex items-baseline justify-between gap-4 py-1.5 text-sm">
+      <dt className="text-muted-foreground">{label}</dt>
+      <dd className="min-w-0 text-right font-medium">{value}</dd>
+    </div>
+  );
+}
+
+// Settings > Updates: what's installed, what's out, and the switch for the banner.
+export function UpdatesSection() {
+  const { data: view, isLoading, error } = useUpdates();
+  const check = useCheckForUpdates();
+  const banner = useUpdateBannerSetting();
+
+  if (isLoading || !view)
+    return (
+      <p className="text-muted-foreground text-sm">
+        {error ? "Couldn't load update status." : "Loading…"}
+      </p>
+    );
+
+  const running = isActivePhase(view.run?.phase);
+  const onCheck = () =>
+    check.mutate(undefined, {
+      onError: (e) => {
+        // Asked again inside a minute: the answer on screen is fresh.
+        if ((e as { status?: number }).status !== 429) toast.error(e.message);
+      },
+    });
+
+  let summary = "AgentOS is up to date.";
+  if (view.status === "diverged")
+    summary =
+      "This checkout has commits the remote doesn't, so it can't update itself.";
+  else if (view.status === "unknown")
+    summary = view.checkError ?? "Updates haven't been checked yet.";
+  else if (view.available)
+    summary = `${view.latest?.version} is available (${view.behind} newer change${view.behind === 1 ? "" : "s"}).`;
+
+  return (
+    <div className="space-y-5">
+      <dl className="divide-border divide-y">
+        <Row
+          label="Installed"
+          value={
+            view.current ? (
+              <>
+                {view.current.version}{" "}
+                <span className="text-muted-foreground font-mono text-xs">
+                  {view.current.sha.slice(0, 7)}
+                </span>
+              </>
+            ) : (
+              "Unknown"
+            )
+          }
+        />
+        <Row label="Latest" value={view.latest?.version ?? "Unknown"} />
+        <Row label="Last checked" value={ago(view.checkedAt)} />
+      </dl>
+
+      <p className="text-sm" role="status">
+        {summary}
+      </p>
+      {view.checkError && view.status === "ok" && (
+        <p className="text-muted-foreground text-xs">
+          The last check failed: {view.checkError}
+        </p>
+      )}
+      {view.run?.phase === "failed" && (
+        <p className="text-destructive text-sm" role="alert">
+          The last update failed. {view.run.error}
+        </p>
+      )}
+      {running && (
+        <p className="text-muted-foreground flex items-center gap-2 text-sm">
+          <Loader2 className="h-4 w-4 animate-spin" /> Updating (
+          {view.run?.phase})…
+        </p>
+      )}
+      {view.available && !view.canUpdate.ok && view.canUpdate.reason && (
+        <p className="text-muted-foreground text-xs">{view.canUpdate.reason}</p>
+      )}
+      {view.pending && (
+        <p className="text-muted-foreground text-sm">
+          Will update when nothing is working.
+        </p>
+      )}
+
+      <div className="flex flex-wrap items-center gap-2">
+        <Button
+          variant="outline"
+          size="sm"
+          className="min-h-11 md:min-h-0"
+          disabled={check.isPending || running}
+          onClick={onCheck}
+        >
+          {check.isPending ? "Checking…" : "Check for updates"}
+        </Button>
+        {view.available && !running && <UpdateActions view={view} />}
+        {view.available && view.latest?.url && (
+          <a
+            href={view.latest.url}
+            target="_blank"
+            rel="noreferrer noopener"
+            className="text-primary text-sm underline"
+          >
+            Release notes
+          </a>
+        )}
+      </div>
+
+      <SettingToggle
+        title="Show update banner"
+        detail="Tell everyone using this AgentOS when a newer version is out. Nothing updates unless someone chooses to."
+        checked={view.bannerEnabled}
+        locked={view.bannerLocked}
+        onChange={(on) =>
+          banner.mutate(on, { onError: (e) => toast.error(e.message) })
+        }
+      />
+    </div>
+  );
+}

package/components/Updates/index.ts

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

package/components/views/DesktopView.tsx

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

package/components/views/MobileView.tsx

@@ -4,6 +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 type { ViewProps } from "./types";
 import { QuickSwitcher, StartServerDialog } from "./lazy";
 import { fileOpenActions } from "@/stores/fileOpen";
@@ -29,6 +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 />
       {/* Swipe sidebar */}
       <SwipeSidebar isOpen={sidebarOpen} onClose={() => setSidebarOpen(false)}>
         <div className="flex h-full flex-col">