@saadnvd1/agent-os 0.3.761 → 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/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;
+}

package/lib/artifacts/store.ts

@@ -6,7 +6,7 @@
 import { agentosHome } from "../agentos-home";
 import fs from "fs";
 import path from "path";
-import { randomUUID } from "crypto";
+import { createHash, randomUUID } from "crypto";
 import { db } from "../db";
 
 export interface Artifact {
@@ -15,8 +15,31 @@ export interface Artifact {
   title: string;
   path: string;
   created_at: string;
+  // The page this is a version of; every version of a page shares it.
+  page_id: string;
+  version: number;
+  // The agent's one line on what changed.
+  note: string | null;
+  bytes: number | null;
+  sha256: string | null;
 }
 
+export interface SaveOptions {
+  // Any version's id of a page in this session: add a version to it.
+  update?: string;
+  // With no update, the newest page in this session with the same title.
+  sameTitle?: boolean;
+  note?: string;
+}
+
+export interface Saved {
+  artifact: Artifact;
+  // False when the page was byte-for-byte its latest version already.
+  created: boolean;
+}
+
+export const MAX_NOTE_CHARS = 120;
+
 export const MAX_HTML_BYTES = 2 * 1024 * 1024;
 export const MAX_TITLE_CHARS = 120;
 
@@ -35,20 +58,92 @@ function sessionDir(sessionId: string): string {
 export function createArtifact(
   sessionId: string,
   title: string,
-  html: string
+  html: string,
+  opts: SaveOptions = {}
 ): Artifact {
-  if (Buffer.byteLength(html, "utf8") > MAX_HTML_BYTES)
+  return saveArtifact(sessionId, title, html, opts).artifact;
+}
+
+const oneLine = (s: string, max: number) =>
+  s.replace(/\s+/g, " ").trim().slice(0, max);
+
+// Saves a page, or a new version of one. Earlier versions are never touched.
+export function saveArtifact(
+  sessionId: string,
+  title: string,
+  html: string,
+  opts: SaveOptions = {}
+): Saved {
+  const bytes = Buffer.byteLength(html, "utf8");
+  if (bytes > MAX_HTML_BYTES)
     throw new Error("The page is over 2 MB; make it smaller.");
+  const clean = oneLine(title, MAX_TITLE_CHARS) || "Untitled";
+  const note = opts.note ? oneLine(opts.note, MAX_NOTE_CHARS) || null : null;
+  const sha256 = createHash("sha256").update(html).digest("hex");
   const id = randomUUID();
   const dir = sessionDir(sessionId);
-  fs.mkdirSync(dir, { recursive: true, mode: 0o700 });
   const file = path.join(dir, `${id}.html`);
-  fs.writeFileSync(file, html, { mode: 0o600 });
-  const clean = title.replace(/\s+/g, " ").trim().slice(0, MAX_TITLE_CHARS);
-  db.prepare(
-    `INSERT INTO artifacts (id, session_id, title, path) VALUES (?, ?, ?, ?)`
-  ).run(id, sessionId, clean || "Untitled", file);
-  return getArtifact(id)!;
+  return db.transaction((): Saved => {
+    const pageId = resolvePage(sessionId, clean, opts);
+    const latest = pageId ? latestVersion(pageId) : undefined;
+    if (latest && latest.sha256 === sha256)
+      return { artifact: latest, created: false };
+    fs.mkdirSync(dir, { recursive: true, mode: 0o700 });
+    fs.writeFileSync(file, html, { mode: 0o600 });
+    db.prepare(
+      `INSERT INTO artifacts (id, session_id, title, path, page_id, version, note, bytes, sha256)
+       VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)`
+    ).run(
+      id,
+      sessionId,
+      clean,
+      file,
+      pageId ?? id,
+      latest ? latest.version + 1 : 1,
+      note,
+      bytes,
+      sha256
+    );
+    return { artifact: getArtifact(id)!, created: true };
+  })();
+}
+
+function resolvePage(
+  sessionId: string,
+  title: string,
+  opts: SaveOptions
+): string | undefined {
+  if (opts.update) {
+    const base = getArtifact(opts.update);
+    if (!base || base.session_id !== sessionId)
+      throw new Error(
+        `No page ${opts.update} in this chat; leave out update to show a new page.`
+      );
+    return base.page_id;
+  }
+  if (!opts.sameTitle) return undefined;
+  const row = db
+    .prepare(
+      `SELECT page_id FROM artifacts WHERE session_id = ? AND lower(title) = lower(?)
+       ORDER BY created_at DESC, rowid DESC LIMIT 1`
+    )
+    .get(sessionId, title) as { page_id: string } | undefined;
+  return row?.page_id;
+}
+
+// Every version of a page, oldest first.
+export function listVersions(pageId: string): Artifact[] {
+  return db
+    .prepare(`SELECT * FROM artifacts WHERE page_id = ? ORDER BY version`)
+    .all(pageId) as Artifact[];
+}
+
+export function latestVersion(pageId: string): Artifact | undefined {
+  return db
+    .prepare(
+      `SELECT * FROM artifacts WHERE page_id = ? ORDER BY version DESC LIMIT 1`
+    )
+    .get(pageId) as Artifact | undefined;
 }
 
 export function getArtifact(id: string): Artifact | undefined {