@saadnvd1/agent-os 0.3.792 → 0.3.799

package/components/Tips/TipMedia.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import { Play } from "lucide-react";
+import { useTheme } from "next-themes";
+import { useRef, useState } from "react";
+import { useMediaQuery } from "@/hooks/useMediaQuery";
+import type { Media } from "@/lib/tips/schema";
+
+/** A tip's still or clip, sized by its own dimensions so nothing jumps as it loads. */
+export function TipMedia({ media }: { media: Media }) {
+  const { resolvedTheme } = useTheme();
+  const reduced = useMediaQuery("(prefers-reduced-motion: reduce)");
+  const [played, setPlayed] = 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}` };
+
+  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}
+          alt={media.alt}
+          width={media.width}
+          height={media.height}
+          loading="lazy"
+          decoding="async"
+          className="size-full object-contain"
+        />
+      </div>
+    );
+
+  const still = reduced && !played;
+  return (
+    <div className={frame} style={style}>
+      <video
+        ref={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}
+        preload={reduced ? "none" : "metadata"}
+        className="size-full object-contain"
+      />
+      {still && (
+        <button
+          type="button"
+          aria-label="Play clip"
+          onClick={() => {
+            setPlayed(true);
+            void video.current?.play();
+          }}
+          className="absolute inset-0 grid place-items-center bg-black/20"
+        >
+          <span className="bg-background/90 grid size-11 place-items-center rounded-full shadow">
+            <Play className="size-5" />
+          </span>
+        </button>
+      )}
+    </div>
+  );
+}

package/components/Tips/index.ts

@@ -0,0 +1,2 @@
+export { TipButton } from "./TipButton";
+export { TipHost } from "./TipHost";

package/components/Updates/AutoUpdates.tsx

@@ -0,0 +1,141 @@
+"use client";
+
+import { toast } from "sonner";
+import { CheckCircle2, CircleAlert, RotateCcw } from "lucide-react";
+import { SettingToggle } from "@/components/Settings/SettingToggle";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { useAutoUpdateSetting } from "@/data/updates";
+import {
+  IDLE_MINUTES,
+  type AutoUpdateView,
+  type UpdateAttempt,
+  type UpdateOutcome,
+} from "@/lib/updates/banner";
+
+const OUTCOME: Record<UpdateOutcome, string> = {
+  done: "Updated",
+  build_failed: "Didn't build; nothing changed",
+  rolled_back: "Rolled back",
+  broken: "Failed, and the rollback too",
+  interrupted: "Cut off; will try again",
+};
+
+function when(at: number): string {
+  return new Date(at).toLocaleString([], {
+    month: "short",
+    day: "numeric",
+    hour: "numeric",
+    minute: "2-digit",
+  });
+}
+
+function Attempt({ a }: { a: UpdateAttempt }) {
+  const Icon =
+    a.outcome === "done"
+      ? CheckCircle2
+      : a.outcome === "rolled_back" || a.outcome === "interrupted"
+        ? RotateCcw
+        : CircleAlert;
+  return (
+    <li className="flex items-start gap-2 py-1.5 text-sm">
+      <Icon
+        className={
+          a.outcome === "broken"
+            ? "text-destructive mt-0.5 h-4 w-4 shrink-0"
+            : "text-muted-foreground mt-0.5 h-4 w-4 shrink-0"
+        }
+      />
+      <div className="min-w-0 flex-1">
+        <p className="flex flex-wrap justify-between gap-x-3">
+          <span className="font-medium">
+            {a.toVersion || a.to.slice(0, 7)}
+            <span className="text-muted-foreground font-normal">
+              {" "}
+              · {OUTCOME[a.outcome]}
+              {a.auto ? "" : " (by hand)"}
+            </span>
+          </span>
+          <span className="text-muted-foreground text-xs">
+            {when(a.finishedAt)}
+          </span>
+        </p>
+        {a.error && a.outcome !== "done" && (
+          <p className="text-muted-foreground text-xs break-words">{a.error}</p>
+        )}
+      </div>
+    </li>
+  );
+}
+
+// Settings > Updates: the switch for automatic updates, how long everything
+// must be idle first, what it's doing now, and how the last ones went.
+export function AutoUpdates({ auto }: { auto: AutoUpdateView }) {
+  const save = useAutoUpdateSetting();
+  const onError = (e: Error) => toast.error(e.message);
+  return (
+    <div className="space-y-3">
+      <SettingToggle
+        title="Install updates automatically"
+        detail="Once everything has been idle for a while. Terminals and chats keep running through the restart, and a version that doesn't start cleanly is rolled back."
+        checked={auto.enabled}
+        locked={auto.locked}
+        onChange={(on) => save.mutate({ auto: on }, { onError })}
+      />
+      {auto.enabled && (
+        <div className="flex flex-wrap items-center justify-between gap-2 px-3">
+          <label htmlFor="auto-idle" className="text-sm">
+            Idle for
+          </label>
+          <Select
+            value={String(auto.idleMinutes)}
+            disabled={auto.idleLocked}
+            onValueChange={(v) =>
+              save.mutate({ idleMinutes: Number(v) }, { onError })
+            }
+          >
+            <SelectTrigger id="auto-idle" className="min-h-11 w-36 md:min-h-0">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {IDLE_MINUTES.map((m) => (
+                <SelectItem key={m} value={String(m)}>
+                  {m} minutes
+                </SelectItem>
+              ))}
+              {!(IDLE_MINUTES as readonly number[]).includes(
+                auto.idleMinutes
+              ) && (
+                <SelectItem value={String(auto.idleMinutes)}>
+                  {auto.idleMinutes} minutes
+                </SelectItem>
+              )}
+            </SelectContent>
+          </Select>
+        </div>
+      )}
+      {auto.status && auto.status.code !== "off" && (
+        <p className="text-muted-foreground px-3 text-xs" role="status">
+          {auto.status.text}
+        </p>
+      )}
+      {auto.attempts.length > 0 && (
+        <div className="px-3">
+          <p className="text-muted-foreground text-xs font-medium">
+            Recent updates
+          </p>
+          <ul className="divide-border divide-y">
+            {auto.attempts.map((a) => (
+              <Attempt key={a.id} a={a} />
+            ))}
+          </ul>
+        </div>
+      )}
+    </div>
+  );
+}

package/components/Updates/UpdateBanner.test.ts

@@ -173,7 +173,7 @@ describe("UpdateBanner", () => {
       },
     });
     await render();
-    expect(text()).toContain("Building… step 3 of 4");
+    expect(text()).toContain("Building… step 3 of 5");
     expect(button("Dismiss")).toBeUndefined();
   });
 
@@ -196,4 +196,42 @@ describe("UpdateBanner", () => {
     expect(text()).toBe("");
     expect(localStorage.getItem("agentos.update.dismissedRun")).toBe("r9");
   });
+
+  it("says an automatic update happened, with What's New", async () => {
+    view = make({
+      available: false,
+      run: {
+        id: "a1",
+        phase: "done",
+        auto: true,
+        from: "a",
+        fromVersion: "0.3.1",
+        toVersion: "0.3.5",
+        startedAt: Date.now() - 60_000,
+        finishedAt: Date.now(),
+      },
+    });
+    await render();
+    expect(text()).toContain("updated itself to 0.3.5");
+    expect(button("See what's new")).toBeDefined();
+  });
+
+  it("says calmly when an automatic update was rolled back", async () => {
+    view = make({
+      available: false,
+      run: {
+        id: "a2",
+        phase: "rolled_back",
+        auto: true,
+        from: "a",
+        fromVersion: "0.3.1",
+        toVersion: "0.3.5",
+        startedAt: 1,
+        finishedAt: 2,
+      },
+    });
+    await render();
+    expect(text()).toContain("went back to 0.3.1");
+    expect(document.querySelector('[role="alert"]')).toBeNull();
+  });
 });

package/components/Updates/UpdateBanner.tsx

@@ -12,16 +12,24 @@ import {
   type UpdateView,
 } from "@/lib/updates/banner";
 import { cn } from "@/lib/utils";
+import { TipHost } from "@/components/Tips";
 import { WhatsNewHost } from "@/components/WhatsNew";
 import { whatsNewActions } from "@/stores/whatsNew";
 import { UpdateActions } from "./UpdateActions";
 
-const STEPS = ["pulling", "installing", "building", "restarting"] as const;
+const STEPS = [
+  "pulling",
+  "installing",
+  "building",
+  "restarting",
+  "verifying",
+] as const;
 const LABEL: Record<(typeof STEPS)[number], string> = {
   pulling: "Pulling the new version",
   installing: "Installing dependencies",
   building: "Building",
   restarting: "Restarting",
+  verifying: "Checking the new version",
 };
 const SLOW_MS = 10 * 60_000;
 
@@ -79,13 +87,24 @@ export function UpdateBannerView({
   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 if (state === "updated")
+    text = <>AgentOS updated itself to {run?.toVersion}</>;
+  else if (state === "rolled_back")
+    text = (
+      <>
+        An update to {run?.toVersion} didn&apos;t start cleanly, so AgentOS went
+        back to {run?.fromVersion}. It won&apos;t try that version again.
+      </>
+    );
   else {
     const step = Math.max(
       0,
       STEPS.indexOf(run!.phase as (typeof STEPS)[number])
     );
     text =
-      elapsed > SLOW_MS ? (
+      run?.phase === "rolling_back" ? (
+        <>The new version didn&apos;t start cleanly; going back…</>
+      ) : elapsed > SLOW_MS ? (
         <>Taking longer than expected. Check the update log, then reload.</>
       ) : (
         <>
@@ -99,7 +118,7 @@ export function UpdateBannerView({
       {state === "available" && !view.canUpdate.ok && view.canUpdate.reason && (
         <p className="text-muted-foreground text-xs">{view.canUpdate.reason}</p>
       )}
-      {failed && <Log lines={run?.log ?? []} />}
+      {(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) => (
@@ -149,7 +168,7 @@ export function UpdateBannerView({
               />
             </button>
           )}
-          {state === "available" && (
+          {(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"
@@ -206,10 +225,17 @@ export function UpdateBanner() {
     dismissedVersion: dismissed.version,
     dismissedRun: dismissed.run,
   });
-  if (state === "hidden" || !view) return <WhatsNewHost />;
+  if (state === "hidden" || !view)
+    return (
+      <>
+        <WhatsNewHost />
+        <TipHost />
+      </>
+    );
   return (
     <>
       <WhatsNewHost />
+      <TipHost />
       <UpdateBannerView
         state={state}
         view={view}

package/components/Updates/UpdatesSection.tsx

@@ -4,12 +4,14 @@ import { toast } from "sonner";
 import { Loader2 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { SettingToggle } from "@/components/Settings/SettingToggle";
+import { useSetTipsOff, useTips } from "@/data/tips";
 import {
   useCheckForUpdates,
   useUpdateBannerSetting,
   useUpdates,
 } from "@/data/updates";
 import { isActivePhase } from "@/lib/updates/banner";
+import { AutoUpdates } from "./AutoUpdates";
 import { UpdateActions } from "./UpdateActions";
 
 function ago(at: number | null): string {
@@ -32,7 +34,8 @@ function Row({ label, value }: { label: string; value: React.ReactNode }) {
   );
 }
 
-// Settings > Updates: what's installed, what's out, and the switch for the banner.
+// Settings > Updates: what's installed, what's out, automatic updates, and
+// the switch for the banner.
 export function UpdatesSection() {
   const { data: view, isLoading, error } = useUpdates();
   const check = useCheckForUpdates();
@@ -93,7 +96,7 @@ export function UpdatesSection() {
           The last check failed: {view.checkError}
         </p>
       )}
-      {view.run?.phase === "failed" && (
+      {view.run?.phase === "failed" && !view.run.auto && (
         <p className="text-destructive text-sm" role="alert">
           The last update failed. {view.run.error}
         </p>
@@ -136,15 +139,33 @@ export function UpdatesSection() {
         )}
       </div>
 
+      {view.auto && <AutoUpdates auto={view.auto} />}
+
       <SettingToggle
         title="Show update banner"
-        detail="Tell everyone using this AgentOS when a newer version is out. Nothing updates unless someone chooses to."
+        detail="Tell everyone using this AgentOS when a newer version is out, and when it updated itself."
         checked={view.bannerEnabled}
         locked={view.bannerLocked}
         onChange={(on) =>
           banner.mutate(on, { onError: (e) => toast.error(e.message) })
         }
       />
+      <TipsToggle />
     </div>
   );
 }
+
+function TipsToggle() {
+  const { data } = useTips();
+  const setOff = useSetTipsOff();
+  return (
+    <SettingToggle
+      title="Show Tip of the Day"
+      detail="A short tip about something AgentOS can do, behind the lightbulb in the sidebar. It never opens on its own."
+      checked={!!data && !data.off}
+      onChange={(on) =>
+        setOff.mutate(!on, { onError: (e) => toast.error(e.message) })
+      }
+    />
+  );
+}