@saadnvd1/agent-os 0.3.782 → 0.3.786

package/components/WhatsNew/WhatsNewDialog.tsx

@@ -0,0 +1,169 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import { Sparkles, X } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { ShimmeringLoader } from "@/components/ui/skeleton";
+import {
+  useWhatsNewAhead,
+  useWhatsNewHead,
+  useWhatsNewList,
+} from "@/data/whats-new";
+import { useUpdates } from "@/data/updates";
+import { useMediaQuery } from "@/hooks/useMediaQuery";
+import { whatsNewStore } from "@/stores/whatsNew";
+import { useWhatsNewSeen } from "@/hooks/useWhatsNewSeen";
+import { buildRows, type Row } from "@/lib/whats-new/rows";
+import { unreadCount } from "@/lib/whats-new/unread";
+import { WhatsNewRow } from "./WhatsNewRows";
+
+function Empty() {
+  return (
+    <div className="text-muted-foreground flex flex-1 flex-col items-center justify-center gap-2 px-8 py-12 text-center">
+      <span className="bg-muted grid size-11 place-items-center rounded-xl">
+        <Sparkles className="size-5" />
+      </span>
+      <h3 className="text-foreground text-[15px] font-semibold">
+        Nothing to show yet
+      </h3>
+      <p className="max-w-[17.5rem] text-[13px]">
+        Changes appear here after your next update.
+      </p>
+    </div>
+  );
+}
+
+export function WhatsNewDialog({
+  open,
+  onOpenChange,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}) {
+  const wide = useMediaQuery("(min-width: 768px)");
+  const { data: head } = useWhatsNewHead();
+  const { seen, markSeen } = useWhatsNewSeen(head);
+  const { data: updates } = useUpdates();
+  const waiting = !!updates?.available;
+  const list = useWhatsNewList(open);
+  const ahead = useWhatsNewAhead(open && waiting);
+  const [previewing, setPreviewing] = useState(whatsNewStore.preview);
+  // Where the last visit ended, read once as the dialog opens: opening marks
+  // everything seen, and the divider has to stay where it was.
+  const [baseline] = useState(seen);
+  useEffect(() => {
+    markSeen();
+    // Once, on open; `seen` changes as a result of this.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const entries = useMemo(
+    () => list.data?.pages.flatMap((p) => p.entries) ?? [],
+    [list.data]
+  );
+  const rows = useMemo<Row[]>(() => {
+    const own = buildRows(entries, baseline);
+    const coming = previewing && ahead.data?.length ? ahead.data : [];
+    return coming.length
+      ? [
+          { type: "heading", key: "ahead", label: "Arrives with the update" },
+          ...buildRows(coming, null),
+          { type: "heading", key: "installed", label: "Already installed" },
+          ...own,
+        ]
+      : own;
+  }, [entries, baseline, previewing, ahead.data]);
+
+  const unread =
+    head && baseline !== null ? unreadCount(head.recent, baseline) : 0;
+  const version = updates?.current?.version;
+  const aheadCount = ahead.data?.length ?? 0;
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent
+        showCloseButton={false}
+        placement={wide ? "center" : "sheet"}
+        className="flex max-h-[85dvh] flex-col gap-0 overflow-hidden p-0 max-md:h-[85dvh] sm:max-w-[34rem]"
+      >
+        <div className="bg-muted-foreground/40 mx-auto mt-2 h-1 w-9 rounded-full md:hidden" />
+        <div className="border-border/50 flex items-center gap-2 border-b px-4 py-3">
+          <div className="min-w-0 flex-1">
+            <DialogTitle>What&apos;s New</DialogTitle>
+            <DialogDescription className="mt-1 text-xs">
+              {[
+                version && `AgentOS ${version}`,
+                unread > 0
+                  ? `${unread} new since you last looked`
+                  : "You're up to date",
+              ]
+                .filter(Boolean)
+                .join(" · ")}
+            </DialogDescription>
+          </div>
+          <DialogClose asChild>
+            <Button
+              variant="ghost"
+              size="icon-sm"
+              aria-label="Close"
+              className="-mr-2 size-11 shrink-0 md:size-8"
+            >
+              <X className="size-4" />
+            </Button>
+          </DialogClose>
+        </div>
+
+        <div className="min-h-0 flex-1 overflow-y-auto pb-2">
+          {waiting && aheadCount > 0 && (
+            <div className="bg-primary/10 mx-3 mt-3 flex items-center gap-3 rounded-lg px-3 py-2 text-[12.5px]">
+              <span className="flex-1">
+                <b className="font-semibold">Update available.</b> {aheadCount}{" "}
+                more {aheadCount === 1 ? "change is" : "changes are"} waiting.
+              </span>
+              <button
+                type="button"
+                aria-pressed={previewing}
+                onClick={() => setPreviewing(!previewing)}
+                className="text-primary -my-1 min-h-11 px-2 font-semibold md:min-h-8"
+              >
+                {previewing ? "Hide" : "Preview"}
+              </button>
+            </div>
+          )}
+          {list.isPending ? (
+            <div className="space-y-3 p-4" aria-busy>
+              {[0, 1, 2, 3].map((i) => (
+                <ShimmeringLoader
+                  key={i}
+                  delayIndex={i}
+                  className="h-9 w-full"
+                />
+              ))}
+            </div>
+          ) : rows.length === 0 ? (
+            <Empty />
+          ) : (
+            rows.map((row) => <WhatsNewRow key={row.key} row={row} />)
+          )}
+          {list.hasNextPage && (
+            <Button
+              variant="secondary"
+              className="mx-4 my-2 min-h-11 w-[calc(100%-2rem)]"
+              disabled={list.isFetchingNextPage}
+              onClick={() => list.fetchNextPage()}
+            >
+              Show older changes
+            </Button>
+          )}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/components/WhatsNew/WhatsNewHost.tsx

@@ -0,0 +1,17 @@
+"use client";
+
+import { useSnapshot } from "valtio";
+import { whatsNewActions, whatsNewStore } from "@/stores/whatsNew";
+import { WhatsNewDialog } from "./WhatsNewDialog";
+
+/** Mounted once, near the top of the app: the footer row and the update banner both open it. */
+export function WhatsNewHost() {
+  const { open } = useSnapshot(whatsNewStore);
+  if (!open) return null;
+  return (
+    <WhatsNewDialog
+      open
+      onOpenChange={(next) => !next && whatsNewActions.close()}
+    />
+  );
+}

package/components/WhatsNew/WhatsNewRows.tsx

@@ -0,0 +1,62 @@
+import { StatusPill } from "@/components/ui/status-pill";
+import type { Row } from "@/lib/whats-new/rows";
+import { KIND_LABEL, type Kind } from "@/lib/whats-new/schema";
+
+const TONE = { new: "primary", improved: "muted", fixed: "green" } as const;
+
+export function KindChip({ kind }: { kind: Kind }) {
+  return (
+    <StatusPill
+      tone={TONE[kind]}
+      className="label-mono mt-0.5 w-[4.5rem] shrink-0 justify-center py-1 tracking-wider"
+    >
+      {KIND_LABEL[kind]}
+    </StatusPill>
+  );
+}
+
+export function WhatsNewRow({ row }: { row: Row }) {
+  if (row.type === "day")
+    return (
+      <h3 className="label-mono text-muted-foreground bg-popover sticky top-0 z-10 px-4 pt-4 pb-1.5">
+        {row.label}
+      </h3>
+    );
+  if (row.type === "heading")
+    return (
+      <h3 className="label-mono text-primary px-4 pt-4 pb-1.5">{row.label}</h3>
+    );
+  if (row.type === "divider")
+    return (
+      <div className="text-primary my-2 flex items-center gap-3 px-4">
+        <span className="bg-primary/30 h-px flex-1" />
+        <span className="label-mono">{row.label}</span>
+        <span className="bg-primary/30 h-px flex-1" />
+      </div>
+    );
+  const { entry } = row;
+  return (
+    <div className="flex items-start gap-3 px-4 py-2">
+      <KindChip kind={entry.kind} />
+      <div className="min-w-0 flex-1">
+        <p className="text-[13.5px] leading-snug">{entry.text}</p>
+        {entry.note && (
+          <p className="text-muted-foreground mt-0.5 text-xs">{entry.note}</p>
+        )}
+      </div>
+      {entry.url ? (
+        <a
+          href={entry.url}
+          target="_blank"
+          rel="noreferrer noopener"
+          aria-label={`Pull request ${entry.id}`}
+          className="text-muted-foreground hover:text-foreground -my-2 -mr-2 inline-flex min-h-11 min-w-11 items-center justify-center text-[11px] md:min-h-8 md:min-w-8"
+        >
+          #{entry.id}
+        </a>
+      ) : (
+        <span className="text-muted-foreground text-[11px]">#{entry.id}</span>
+      )}
+    </div>
+  );
+}

package/components/WhatsNew/index.ts

@@ -0,0 +1,2 @@
+export { WhatsNewButton } from "./WhatsNewButton";
+export { WhatsNewHost } from "./WhatsNewHost";

package/components/ui/dialog.tsx

@@ -46,13 +46,23 @@ function DialogOverlay({
   );
 }
 
+const PLACEMENT = {
+  center:
+    "top-[50%] left-[50%] grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-2xl p-6 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 sm:max-w-lg",
+  // Rises from the bottom edge on a phone; the caller sets its height.
+  sheet:
+    "inset-x-0 bottom-0 flex w-full flex-col rounded-t-2xl pb-[env(safe-area-inset-bottom)] data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+} as const;
+
 function DialogContent({
   className,
   children,
   showCloseButton = true,
+  placement = "center",
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Content> & {
   showCloseButton?: boolean;
+  placement?: keyof typeof PLACEMENT;
 }) {
   return (
     <DialogPortal data-slot="dialog-portal">
@@ -60,7 +70,8 @@ function DialogContent({
       <DialogPrimitive.Content
         data-slot="dialog-content"
         className={cn(
-          "popover-surface data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-2xl p-6 duration-200 outline-none sm:max-w-lg",
+          "popover-surface data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed z-50 duration-200 outline-none",
+          PLACEMENT[placement],
           className
         )}
         {...props}