@saadnvd1/agent-os 0.3.758 → 0.3.762

package/components/Chat/Artifact.tsx

@@ -1,112 +1,152 @@
 "use client";
 
-import { useState } from "react";
-import { ExternalLink, Maximize2, Share2, X } from "lucide-react";
+import { useEffect, useState } from "react";
+import { History } from "lucide-react";
 import type { ChatItem } from "@/lib/chat/events";
-import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
-import { shareUiActions } from "@/stores/shareUi";
-import { ArtifactFrame, artifactUrl } from "./ArtifactFrame";
+import { pageActions } from "@/lib/artifacts/actions";
+import { useArtifactVersions } from "@/data/session-artifacts";
+import { useViewport } from "@/hooks/useViewport";
+import { cn } from "@/lib/utils";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { ArtifactActions } from "@/components/Artifacts/ArtifactActions";
+import { ArtifactFullscreen } from "@/components/Artifacts/ArtifactFullscreen";
+import { versionDetail } from "@/components/Artifacts/VersionSwitcher";
+import { ArtifactFrame } from "./ArtifactFrame";
 
 type ArtifactItem = Extract<ChatItem, { kind: "artifact" }>;
 
-const ICON_BUTTON =
-  "text-muted-foreground hover:text-foreground hover:bg-foreground/[0.06] inline-flex h-11 w-11 items-center justify-center rounded-lg md:h-8 md:w-8";
+// Until the server answers: no PDF, which it may not be able to print.
+const FALLBACK_ACTIONS = pageActions({ pdf: false });
 
-function Actions({
-  item,
-  onFull,
-}: {
-  item: ArtifactItem;
-  onFull?: () => void;
-}) {
-  return (
-    <div className="flex shrink-0 items-center">
-      {onFull && (
-        <button
-          type="button"
-          onClick={onFull}
-          className={ICON_BUTTON}
-          aria-label="Full screen"
-          title="Full screen"
-        >
-          <Maximize2 className="h-4 w-4" />
-        </button>
-      )}
-      <button
-        type="button"
-        onClick={() =>
-          shareUiActions.open({
-            kind: "artifact",
-            artifactId: item.artifactId,
-            title: item.title,
-          })
-        }
-        className={ICON_BUTTON}
-        aria-label="Share"
-        title="Share"
-      >
-        <Share2 className="h-4 w-4" />
-      </button>
-      <a
-        href={artifactUrl(item.artifactId)}
-        target="_blank"
-        rel="noopener noreferrer"
-        className={ICON_BUTTON}
-        aria-label="Open in new tab"
-        title="Open in new tab"
-      >
-        <ExternalLink className="h-4 w-4" />
-      </a>
-    </div>
-  );
-}
-
-// A page the agent showed with html_render, live, in its own card.
+// A page the agent showed with html_render, live, in its own card. It shows
+// the version this turn made; a later one is a tap away.
 export function ArtifactCard({ item }: { item: ArtifactItem }) {
   const [full, setFull] = useState(false);
+  const [shownId, setShownId] = useState(item.artifactId);
+  const { isMobile } = useViewport();
+  const pageId = item.pageId ?? item.artifactId;
+  const { data, refetch } = useArtifactVersions(pageId, item.artifactId);
+  // A newer card for the same page: what's cached predates it.
+  const stale = !!data && !data.versions.some((v) => v.id === item.artifactId);
+  useEffect(() => {
+    if (stale) void refetch();
+  }, [stale, refetch]);
+
+  const versions = data?.versions ?? [];
+  const shown = versions.find((v) => v.id === shownId);
+  const latest = versions[versions.length - 1];
+  const many = versions.length > 1;
+  const title = shown?.title ?? item.title;
+  const actions = (
+    <ArtifactActions
+      artifactId={shownId}
+      title={title}
+      version={many ? shown?.version : undefined}
+      actions={data?.actions ?? FALLBACK_ACTIONS}
+      variant="icons"
+      onFull={() => setFull(true)}
+    />
+  );
+
   return (
     <div className="bg-foreground/[0.03] overflow-hidden rounded-xl shadow-sm">
       <div className="flex items-center gap-2 py-0.5 pr-1 pl-3.5">
         <span className="min-w-0 flex-1 truncate text-sm font-medium">
-          {item.title}
+          {title}
         </span>
-        <Actions item={item} onFull={() => setFull(true)} />
+        {many && shown && (
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <button
+                type="button"
+                className={cn(
+                  "inline-flex h-6 shrink-0 items-center rounded-full px-2 text-[11.5px]",
+                  shown.id === latest.id
+                    ? "bg-primary/15 text-primary"
+                    : "bg-muted text-muted-foreground"
+                )}
+                aria-label="Versions"
+              >
+                {shown.id === latest.id
+                  ? `v${shown.version} · latest`
+                  : isMobile
+                    ? `v${shown.version}/${versions.length}`
+                    : `v${shown.version} of ${versions.length}`}
+              </button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" className="w-80 max-w-[90vw]">
+              {[...versions].reverse().map((v) => (
+                <DropdownMenuItem
+                  key={v.id}
+                  className="min-h-11 flex-col items-start gap-0"
+                  onSelect={() => setShownId(v.id)}
+                >
+                  <span className="text-[13px]">
+                    v{v.version}
+                    {v.note ? ` · ${v.note}` : ""}
+                  </span>
+                  <span className="text-muted-foreground text-[11.5px]">
+                    {versionDetail(v, false)}
+                  </span>
+                </DropdownMenuItem>
+              ))}
+            </DropdownMenuContent>
+          </DropdownMenu>
+        )}
+        {actions}
       </div>
       <ArtifactFrame
-        artifactId={item.artifactId}
-        title={item.title}
+        artifactId={shownId}
+        title={title}
         maxHeight={item.height}
       />
-      <Dialog open={full} onOpenChange={setFull}>
-        <DialogContent
-          showCloseButton={false}
-          className="flex h-[100dvh] w-screen max-w-none flex-col gap-0 rounded-none p-0 sm:max-w-none"
+      {many && shown && latest && shown.id !== latest.id && (
+        <button
+          type="button"
+          className="text-muted-foreground flex min-h-11 w-full items-center gap-1.5 border-t px-3.5 text-left text-[12.5px] md:min-h-9"
+          onClick={() => setShownId(latest.id)}
+        >
+          <History className="h-3.5 w-3.5" />
+          {latest.version - shown.version === 1
+            ? "Updated since."
+            : `Updated ${latest.version - shown.version} times since.`}
+          <span className="text-primary">See v{latest.version}</span>
+        </button>
+      )}
+      {many && shownId !== item.artifactId && shown?.id === latest?.id && (
+        <button
+          type="button"
+          className="text-muted-foreground flex min-h-11 w-full items-center gap-1.5 border-t px-3.5 text-left text-[12.5px] md:min-h-9"
+          onClick={() => setShownId(item.artifactId)}
         >
-          <div className="flex items-center gap-2 py-1 pt-[max(0.25rem,env(safe-area-inset-top))] pr-1 pl-4">
-            <DialogTitle className="min-w-0 flex-1 truncate text-sm font-medium">
-              {item.title}
-            </DialogTitle>
-            <Actions item={item} />
-            <button
-              type="button"
-              onClick={() => setFull(false)}
-              className={ICON_BUTTON}
-              aria-label="Close"
-            >
-              <X className="h-4 w-4" />
-            </button>
-          </div>
-          <div className="min-h-0 flex-1 pb-[env(safe-area-inset-bottom)]">
-            {full && (
-              <ArtifactFrame
-                artifactId={item.artifactId}
-                title={item.title}
-                fill
-              />
+          <History className="h-3.5 w-3.5" />
+          <span className="text-primary">
+            Back to v{item.version ?? 1}, from this turn
+          </span>
+        </button>
+      )}
+      <ArtifactFullscreen
+        open={full}
+        onOpenChange={setFull}
+        artifactId={shownId}
+        title={title}
+        actions={
+          <ArtifactActions
+            artifactId={shownId}
+            title={title}
+            version={many ? shown?.version : undefined}
+            actions={(data?.actions ?? FALLBACK_ACTIONS).filter(
+              (a) => a.id !== "fullscreen"
             )}
-          </div>
-        </DialogContent>
-      </Dialog>
+            variant="icons"
+          />
+        }
+      />
     </div>
   );
 }

package/components/Chat/ComposerMenu.tsx

@@ -66,10 +66,13 @@ export function ComposerMenu({
       ref={listRef}
       role="listbox"
       aria-label={label}
-      className="popover-surface absolute right-0 bottom-full left-0 mb-2 max-h-[min(55vh,340px)] overflow-x-hidden overflow-y-auto rounded-xl p-1.5"
+      className={cn(
+        "popover-surface absolute right-0 bottom-full left-0 mb-2 max-h-[min(55vh,340px)] overflow-x-hidden overflow-y-auto rounded-xl px-1.5 pb-1.5",
+        !refresh && "pt-1.5"
+      )}
     >
       {refresh && (
-        <div className="flex items-center justify-between pl-2.5">
+        <div className="bg-popover sticky top-0 z-20 flex items-center justify-between pt-1.5 pl-2.5">
           <span className="text-muted-foreground text-xs">{label}</span>
           <button
             type="button"
@@ -92,7 +95,13 @@ export function ComposerMenu({
         options.map((o, i) => (
           <Fragment key={o.key}>
             {o.group && o.group !== options[i - 1]?.group && (
-              <div className="text-muted-foreground px-2.5 pt-2 pb-0.5 text-[11px] tracking-wide uppercase">
+              <div
+                className={cn(
+                  "bg-popover text-muted-foreground sticky z-10 px-2.5 pt-2 pb-0.5 text-[11px] tracking-wide uppercase",
+                  // Sit below the pinned header row (6px + h-11 / md:h-7).
+                  refresh ? "top-[50px] md:top-[34px]" : "top-0"
+                )}
+              >
                 {o.group}
               </div>
             )}
@@ -114,7 +123,7 @@ export function ComposerMenu({
             >
               <span className="flex w-full min-w-0 items-center gap-2">
                 {o.icon}
-                <span className="max-w-[65%] shrink-0 truncate font-mono text-sm">
+                <span className="max-w-full min-w-0 shrink-0 font-mono text-sm break-all">
                   {o.icon ? (
                     o.label
                   ) : (
@@ -122,7 +131,7 @@ export function ComposerMenu({
                   )}
                 </span>
                 {o.hint && (
-                  <span className="text-muted-foreground/70 min-w-0 truncate font-mono text-xs">
+                  <span className="text-muted-foreground/70 min-w-0 flex-1 truncate font-mono text-xs">
                     {o.hint}
                   </span>
                 )}

package/components/Share/DownloadMenu.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useState, type ReactNode } from "react";
 import { toast } from "sonner";
 import {
   ChevronDown,
@@ -19,6 +19,7 @@ import {
 } from "@/components/ui/dropdown-menu";
 import {
   useSharePdf,
+  useSharePreview,
   type PreviewRequest,
   type SharePreview,
 } from "@/data/shares";
@@ -39,60 +40,84 @@ function save(blob: Blob, name: string) {
   URL.revokeObjectURL(url);
 }
 
+// Saves the share in a format: PDF printed by the server, HTML and Markdown
+// from the preview, fetched now when there isn't one in hand.
+export function useShareDownload(
+  request: PreviewRequest,
+  title: string,
+  preview?: SharePreview | null
+) {
+  const pdf = useSharePdf();
+  const fetchPreview = useSharePreview();
+  const choose = async (format: ShareFormat) => {
+    try {
+      if (format === "pdf") {
+        save(await pdf.mutateAsync(request), fileName(title, "pdf"));
+        return;
+      }
+      const p = preview ?? (await fetchPreview.mutateAsync(request));
+      const md = format === "md";
+      save(
+        new Blob([md ? p.markdown : p.html], {
+          type: md ? "text/markdown" : "text/html",
+        }),
+        fileName(title, format)
+      );
+    } catch (err) {
+      toast.error(
+        (err as Error).message ||
+          (format === "pdf" ? "Couldn't make the PDF" : "Couldn't download it")
+      );
+    }
+  };
+  return { choose, pending: pdf.isPending || fetchPreview.isPending };
+}
+
 // One Download button for every format the server says it can make. PDF is
 // printed server-side, so it shows a spinner; HTML and Markdown are in hand.
 export function DownloadMenu({
   preview,
+  formats = preview?.formats ?? [],
   request,
   title,
   disabled,
+  trigger,
+  align = "end",
 }: {
-  preview: SharePreview | null;
+  preview?: SharePreview | null;
+  formats?: ShareFormat[];
   request: PreviewRequest;
   title: string;
   disabled: boolean;
+  // The button that opens the menu, given whether a download is under way.
+  trigger?: (pending: boolean) => ReactNode;
+  align?: "start" | "end";
 }) {
-  const pdf = useSharePdf();
   const [open, setOpen] = useState(false);
-  const formats = preview?.formats ?? [];
-
-  const choose = async (format: ShareFormat) => {
-    if (!preview) return;
-    if (format === "pdf") {
-      try {
-        save(await pdf.mutateAsync(request), fileName(title, "pdf"));
-      } catch (err) {
-        toast.error((err as Error).message || "Couldn't make the PDF");
-      }
-      return;
-    }
-    const md = format === "md";
-    save(
-      new Blob([md ? preview.markdown : preview.html], {
-        type: md ? "text/markdown" : "text/html",
-      }),
-      fileName(title, format)
-    );
-  };
+  const { choose, pending } = useShareDownload(request, title, preview);
 
   return (
     <DropdownMenu open={open} onOpenChange={setOpen}>
-      <DropdownMenuTrigger asChild>
-        <Button
-          variant="outline"
-          className="min-h-11 flex-1 sm:flex-none"
-          disabled={disabled || !formats.length || pdf.isPending}
-        >
-          {pdf.isPending ? (
-            <Loader2 className="h-4 w-4 animate-spin" />
-          ) : (
-            <Download className="h-4 w-4" />
-          )}
-          {pdf.isPending ? "Making PDF…" : "Download"}
-          <ChevronDown className="h-4 w-4 opacity-60" />
-        </Button>
+      <DropdownMenuTrigger asChild disabled={disabled || !formats.length}>
+        {trigger ? (
+          trigger(pending)
+        ) : (
+          <Button
+            variant="outline"
+            className="min-h-11 flex-1 sm:flex-none"
+            disabled={disabled || !formats.length || pending}
+          >
+            {pending ? (
+              <Loader2 className="h-4 w-4 animate-spin" />
+            ) : (
+              <Download className="h-4 w-4" />
+            )}
+            {pending ? "Preparing…" : "Download"}
+            <ChevronDown className="h-4 w-4 opacity-60" />
+          </Button>
+        )}
       </DropdownMenuTrigger>
-      <DropdownMenuContent align="end" className="min-w-44">
+      <DropdownMenuContent align={align} className="min-w-44">
         {formats.map((f) => {
           const { label, Icon } = FORMAT[f];
           return (

package/components/Share/ShareDialog.tsx

@@ -67,6 +67,7 @@ function ShareBody({
     sessionId?: string;
     artifactId?: string;
     title: string;
+    version?: number;
   };
 }) {
   const [tools, setTools] = useState(false);
@@ -154,6 +155,7 @@ function ShareBody({
       <div>
         <DialogTitle>
           Share {kind === "chat" ? "this chat" : "this page"}
+          {target.version ? ` · v${target.version}` : ""}
         </DialogTitle>
         <DialogDescription>
           A read-only snapshot, with secrets, home paths and machine names

package/data/session-artifacts/keys.ts

@@ -4,4 +4,7 @@ export const sessionArtifactKeys = {
     [...sessionArtifactKeys.all, sessionId] as const,
   content: (url: string) =>
     [...sessionArtifactKeys.all, "content", url] as const,
+  // A page's versions, by any version's id; pageId keys the invalidation.
+  versions: (pageId: string) =>
+    [...sessionArtifactKeys.all, "versions", pageId] as const,
 };

package/data/session-artifacts/queries.ts

@@ -1,5 +1,6 @@
 import { useQuery } from "@tanstack/react-query";
 import type { SessionArtifact } from "@/lib/session-artifacts/types";
+import type { PageVersions } from "@/lib/artifacts/actions";
 import { sessionArtifactKeys } from "./keys";
 
 export type { SessionArtifact } from "@/lib/session-artifacts/types";
@@ -51,3 +52,27 @@ export function useArtifactText(url: string | null) {
     staleTime: 5_000,
   });
 }
+
+/**
+ * Every version of a page, with its note and the message that asked for it.
+ * Keyed by page, so any version's card shares one fetch.
+ */
+export function useArtifactVersions(
+  pageId: string,
+  artifactId: string,
+  enabled = true
+) {
+  return useQuery({
+    queryKey: sessionArtifactKeys.versions(pageId),
+    queryFn: async (): Promise<PageVersions> => {
+      const res = await fetch(
+        `/api/artifacts/${encodeURIComponent(artifactId)}/versions`
+      );
+      const data = await res.json().catch(() => ({}));
+      if (!res.ok) throw new Error(data.error || "Couldn't load versions");
+      return data;
+    },
+    enabled,
+    staleTime: 30_000,
+  });
+}

package/lib/artifacts/actions.ts

@@ -0,0 +1,75 @@
+// What you can do with an artifact, decided by the server so every client
+// (the web app, the native app) shows the same actions without hardcoding
+// them. Pure and import-free so the native app can sync it.
+
+export type ArtifactActionId =
+  | "fullscreen"
+  | "share"
+  | "open"
+  | "download"
+  | "open-pr"
+  | "copy-path"
+  | "open-in-files";
+
+export type DownloadFormat = "pdf" | "html" | "md";
+
+export interface ArtifactAction {
+  id: ArtifactActionId;
+  label: string;
+  // download: the formats this machine can make.
+  formats?: DownloadFormat[];
+}
+
+// One version of a page, as the version switcher lists it.
+export interface ArtifactVersion {
+  id: string;
+  version: number;
+  title: string;
+  note?: string;
+  // ms
+  createdAt: number;
+  bytes?: number;
+  // The message that asked for it: its place among the chat's messages
+  // (1-based) and how it starts.
+  turn?: { itemId: string; index: number; prompt: string };
+}
+
+export interface PageVersions {
+  pageId: string;
+  latestId: string;
+  versions: ArtifactVersion[];
+  actions: ArtifactAction[];
+}
+
+export function pageActions(ctx: { pdf: boolean }): ArtifactAction[] {
+  return [
+    { id: "fullscreen", label: "Full screen" },
+    { id: "share", label: "Share" },
+    { id: "open", label: "Open" },
+    {
+      id: "download",
+      label: "Download",
+      formats: ctx.pdf ? ["pdf", "html", "md"] : ["html", "md"],
+    },
+  ];
+}
+
+// The actions for anything in a session's Artifacts view.
+export function artifactActions(
+  a: {
+    kind: string;
+    state: string;
+    path?: string;
+    url?: string;
+  },
+  ctx: { pdf: boolean }
+): ArtifactAction[] {
+  if (a.kind === "page")
+    return a.state === "live" || a.state === "kept" ? pageActions(ctx) : [];
+  const out: ArtifactAction[] = [];
+  if (a.url) out.push({ id: "open-pr", label: "Open PR" });
+  if (a.path) out.push({ id: "copy-path", label: "Copy path" });
+  if (a.path && a.state === "live" && (a.kind === "file" || a.kind === "plan"))
+    out.push({ id: "open-in-files", label: "Open in Files" });
+  return out;
+}