@saadnvd1/agent-os 0.3.761 → 0.3.765

package/app/api/artifacts/[id]/route.ts

@@ -1,14 +1,23 @@
 import { NextResponse } from "next/server";
-import { getArtifact, readArtifactHtml } from "@/lib/artifacts/store";
+import {
+  getArtifact,
+  latestVersion,
+  readArtifactHtml,
+} from "@/lib/artifacts/store";
 import { ARTIFACT_HEADERS, prepareArtifact } from "@/lib/artifacts/serve";
 
-// GET /api/artifacts/[id] - a page an agent showed, sandboxed
+// GET /api/artifacts/[id] - a page an agent showed, sandboxed. That exact
+// version, or with ?v=latest the page's newest.
 export async function GET(
-  _request: Request,
+  request: Request,
   { params }: { params: Promise<{ id: string }> }
 ) {
   const { id } = await params;
-  const artifact = getArtifact(id);
+  const asked = getArtifact(id);
+  const artifact =
+    asked && new URL(request.url).searchParams.get("v") === "latest"
+      ? latestVersion(asked.page_id)
+      : asked;
   const html = artifact ? await readArtifactHtml(artifact) : null;
   if (html === null)
     return NextResponse.json({ error: "Artifact not found" }, { status: 404 });

package/app/api/artifacts/[id]/versions/route.ts

@@ -0,0 +1,16 @@
+import { NextResponse } from "next/server";
+import { pageVersions } from "@/lib/artifacts/versions";
+import { pdfAvailable } from "@/lib/share/pdf";
+
+// GET /api/artifacts/[id]/versions - every version of the page this is one
+// of, oldest first, and what can be done with it
+export async function GET(
+  _request: Request,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  const { id } = await params;
+  const page = pageVersions(id, { pdf: await pdfAvailable() });
+  if (!page)
+    return NextResponse.json({ error: "Artifact not found" }, { status: 404 });
+  return NextResponse.json(page);
+}

package/app/api/sessions/[id]/artifacts/route.ts

@@ -1,4 +1,6 @@
 import { NextResponse } from "next/server";
+import { artifactActions } from "@/lib/artifacts/actions";
+import { pdfAvailable } from "@/lib/share/pdf";
 import { peerLinkOf } from "@/lib/hosts/peer-actions";
 import { collectArtifacts, getSession } from "@/lib/session-artifacts/collect";
 import { peerArtifacts } from "@/lib/session-artifacts/peer";
@@ -29,5 +31,11 @@ export async function GET(
     }
   }
   const entries = await collectArtifacts(session);
-  return NextResponse.json({ artifacts: entries.map((e) => e.artifact) });
+  const ctx = { pdf: await pdfAvailable() };
+  return NextResponse.json({
+    artifacts: entries.map((e) => ({
+      ...e.artifact,
+      actions: artifactActions(e.artifact, ctx),
+    })),
+  });
 }

package/app/api/shares/route.test.ts

@@ -117,7 +117,7 @@ const one = await import("./[id]/route");
 const { saveItem } = await import("@/lib/chat/store");
 const { seedSession } = await import("@/lib/orchestrator/testing");
 const { createProject } = await import("@/lib/projects");
-const { createArtifact } = await import("@/lib/artifacts/store");
+const { createArtifact, saveArtifact } = await import("@/lib/artifacts/store");
 const { getDb } = await import("@/lib/db");
 
 const secret = ["gh", "p_", "b".repeat(36)].join("");
@@ -341,6 +341,71 @@ describe("create", () => {
     expect(html).toContain("noindex");
   });
 
+  describe("follow latest", () => {
+    const page = (html: string) =>
+      `<html><head></head><body>${html}</body></html>`;
+    async function create(artifactId: string, extra: object = {}) {
+      const body = { kind: "artifact", artifactId, ...extra };
+      const p = await (
+        await preview.POST(post("/api/shares/preview", body))
+      ).json();
+      return shares.POST(
+        post("/api/shares", {
+          ...body,
+          sharedAt: p.sharedAt,
+          hash: p.hash,
+          expiresIn: "7d",
+        })
+      );
+    }
+    const stored = () =>
+      getDb().prepare(`SELECT follow_latest, version FROM shared_links`).get();
+
+    it("pins the shown version by default", async () => {
+      const sid = chat();
+      saveArtifact(sid, "Doc", page("one"), { sameTitle: true });
+      const v2 = saveArtifact(sid, "Doc", page("two"), {
+        sameTitle: true,
+      }).artifact;
+      expect((await create(v2.id)).status).toBe(201);
+      expect(stored()).toEqual({ follow_latest: 0, version: 2 });
+      const listed = await (await shares.GET()).json();
+      expect(listed.shares[0]).toMatchObject({ follow: false, version: 2 });
+    });
+
+    it("keeps follow: latest on the link and lists it", async () => {
+      const sid = chat();
+      const v1 = saveArtifact(sid, "Doc", page("one"), {
+        sameTitle: true,
+      }).artifact;
+      expect((await create(v1.id, { follow: "latest" })).status).toBe(201);
+      expect(stored()).toEqual({ follow_latest: 1, version: 1 });
+      const listed = await (await shares.GET()).json();
+      expect(listed.shares[0]).toMatchObject({ follow: true, version: 1 });
+    });
+
+    it("refuses to follow from an older version, and for a chat", async () => {
+      const sid = chat();
+      const v1 = saveArtifact(sid, "Doc", page("one"), {
+        sameTitle: true,
+      }).artifact;
+      saveArtifact(sid, "Doc", page("two"), { sameTitle: true });
+      const old = await create(v1.id, { follow: "latest" });
+      expect(old.status).toBe(409);
+      expect((await old.json()).error).toMatch(/share v2/);
+      const res = await shares.POST(
+        post("/api/shares", {
+          kind: "chat",
+          sessionId: sid,
+          follow: "latest",
+          hash: "x",
+        })
+      );
+      expect(res.status).toBe(400);
+      expect(seen).toHaveLength(0);
+    });
+  });
+
   it("says so when Connect isn't linked, and for a bad expiry or hash", async () => {
     const id = chat();
     const p = await previewOf(id);

package/app/api/shares/route.ts

@@ -12,6 +12,7 @@ import {
   buildPage,
   parseRequest,
 } from "@/lib/share/service";
+import { getArtifact, latestVersion } from "@/lib/artifacts/store";
 import { insertSharedLink, listSharedLinks } from "@/lib/share/store";
 import type { ShareExpiry } from "@/lib/connect/control-api";
 
@@ -31,6 +32,16 @@ export async function POST(request: Request) {
     if (typeof body?.hash !== "string") return fail("hash is required.", 400);
     if (!linked()) return fail(NOT_LINKED, 409);
 
+    const artifact = req.artifactId ? getArtifact(req.artifactId) : undefined;
+    if (req.follow && artifact) {
+      const latest = latestVersion(artifact.page_id);
+      if (latest && latest.id !== artifact.id)
+        return fail(
+          `v${artifact.version} isn't the latest; share v${latest.version} to follow the page.`,
+          409
+        );
+    }
+
     const page = await buildPage(req);
     if (page.tooBig) return fail(TOO_BIG, 413);
     if (page.hash !== body.hash)
@@ -53,6 +64,8 @@ export async function POST(request: Request) {
       expires_at: share.expires_at,
       created_at: share.created_at,
       revoked_at: null,
+      follow_latest: req.follow ? 1 : 0,
+      version: artifact?.version ?? null,
     });
     return NextResponse.json(
       { id: share.id, url: share.url, expiresAt: share.expires_at },
@@ -96,6 +109,8 @@ export async function GET() {
         status,
         views: r ? r.view_count : null,
         lastViewedAt: r?.last_viewed_at ?? null,
+        follow: l.follow_latest === 1,
+        version: l.version,
       };
     }),
   });

package/components/Artifacts/ArtifactActions.tsx

@@ -0,0 +1,308 @@
+"use client";
+
+import type { ReactNode } from "react";
+
+import {
+  Download,
+  ExternalLink,
+  Loader2,
+  Maximize2,
+  MoreHorizontal,
+  Share2,
+} from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { artifactUrl } from "@/components/Chat/ArtifactFrame";
+import {
+  DownloadMenu,
+  useShareDownload,
+} from "@/components/Share/DownloadMenu";
+import type { PreviewRequest } from "@/data/shares";
+import type { ArtifactAction, DownloadFormat } from "@/lib/artifacts/actions";
+import { shareUiActions } from "@/stores/shareUi";
+import { cn } from "@/lib/utils";
+
+export 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";
+
+const FORMAT_LABEL: Record<DownloadFormat, string> = {
+  pdf: "Download PDF",
+  html: "Download HTML page",
+  md: "Download Markdown",
+};
+
+interface Props {
+  // The exact version every action acts on.
+  artifactId: string;
+  title: string;
+  // Named in the share dialog when the page has more than one.
+  version?: number;
+  actions: ArtifactAction[];
+  // icons: the chat card's title bar. labelled: the Artifacts view's header.
+  // bar: the Artifacts view's bottom bar on a phone.
+  variant: "icons" | "labelled" | "bar";
+  onFull?: () => void;
+}
+
+// A rendered page's actions: full screen, share, open, download. One place
+// for the chat card and the Artifacts view, from the server's list.
+export function ArtifactActions({
+  artifactId,
+  title,
+  version,
+  actions,
+  variant,
+  onFull,
+}: Props) {
+  const has = (id: ArtifactAction["id"]) => actions.some((a) => a.id === id);
+  const formats = actions.find((a) => a.id === "download")?.formats ?? [];
+  const full = has("fullscreen") && onFull;
+  const request: PreviewRequest = {
+    kind: "artifact",
+    artifactId,
+    includeTools: false,
+  };
+  const href = artifactUrl(artifactId);
+  const share = () =>
+    shareUiActions.open({ kind: "artifact", artifactId, title, version });
+
+  if (variant === "bar")
+    return (
+      <div className="flex gap-2">
+        {has("share") && (
+          <Button className="h-11 flex-1" onClick={share}>
+            <Share2 className="h-4 w-4" /> Share
+          </Button>
+        )}
+        {has("open") && (
+          <Button variant="outline" className="h-11 flex-1" asChild>
+            <a href={href} target="_blank" rel="noopener noreferrer">
+              <ExternalLink className="h-4 w-4" /> Open
+            </a>
+          </Button>
+        )}
+        {full && (
+          <Button
+            variant="outline"
+            className="h-11 w-11 shrink-0"
+            onClick={onFull}
+            aria-label="Full screen"
+          >
+            <Maximize2 className="h-4 w-4" />
+          </Button>
+        )}
+        {formats.length > 0 && (
+          <More request={request} title={title} formats={formats}>
+            {(pending) => (
+              <Button
+                variant="outline"
+                className="h-11 w-11 shrink-0"
+                aria-label="More"
+              >
+                {pending ? (
+                  <Loader2 className="h-4 w-4 animate-spin" />
+                ) : (
+                  <MoreHorizontal className="h-4 w-4" />
+                )}
+              </Button>
+            )}
+          </More>
+        )}
+      </div>
+    );
+
+  if (variant === "labelled") {
+    const label = "hidden @lg:inline";
+    return (
+      <div className="flex shrink-0 gap-1.5">
+        {full && (
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={onFull}
+            title="Full screen"
+          >
+            <Maximize2 className="h-3.5 w-3.5" />
+            <span className={label}>Full screen</span>
+          </Button>
+        )}
+        {has("share") && (
+          <Button variant="outline" size="sm" onClick={share} title="Share">
+            <Share2 className="h-3.5 w-3.5" />
+            <span className={label}>Share</span>
+          </Button>
+        )}
+        {has("open") && (
+          <Button variant="outline" size="sm" asChild>
+            <a
+              href={href}
+              target="_blank"
+              rel="noopener noreferrer"
+              title="Open in new tab"
+            >
+              <ExternalLink className="h-3.5 w-3.5" />
+              <span className={label}>Open</span>
+            </a>
+          </Button>
+        )}
+        {formats.length > 0 && (
+          <DownloadMenu
+            formats={formats}
+            request={request}
+            title={title}
+            disabled={false}
+            trigger={(pending) => (
+              <Button variant="outline" size="sm" title="Download">
+                {pending ? (
+                  <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                ) : (
+                  <Download className="h-3.5 w-3.5" />
+                )}
+                <span className={label}>Download</span>
+              </Button>
+            )}
+          />
+        )}
+      </div>
+    );
+  }
+
+  // The card: every action as an icon from md up; on a phone, Share and a
+  // More menu, so the title keeps its room.
+  const wide = "hidden md:inline-flex";
+  return (
+    <div className="flex shrink-0 items-center">
+      {full && (
+        <button
+          type="button"
+          onClick={onFull}
+          className={cn(ICON_BUTTON, wide)}
+          aria-label="Full screen"
+          title="Full screen"
+        >
+          <Maximize2 className="h-4 w-4" />
+        </button>
+      )}
+      {has("share") && (
+        <button
+          type="button"
+          onClick={share}
+          className={ICON_BUTTON}
+          aria-label="Share"
+          title="Share"
+        >
+          <Share2 className="h-4 w-4" />
+        </button>
+      )}
+      {has("open") && (
+        <a
+          href={href}
+          target="_blank"
+          rel="noopener noreferrer"
+          className={cn(ICON_BUTTON, wide)}
+          aria-label="Open in new tab"
+          title="Open in new tab"
+        >
+          <ExternalLink className="h-4 w-4" />
+        </a>
+      )}
+      {formats.length > 0 && (
+        <DownloadMenu
+          formats={formats}
+          request={request}
+          title={title}
+          disabled={false}
+          trigger={(pending) => (
+            <button
+              type="button"
+              className={cn(ICON_BUTTON, wide)}
+              aria-label="Download"
+              title="Download"
+            >
+              {pending ? (
+                <Loader2 className="h-4 w-4 animate-spin" />
+              ) : (
+                <Download className="h-4 w-4" />
+              )}
+            </button>
+          )}
+        />
+      )}
+      <More
+        request={request}
+        title={title}
+        formats={formats}
+        onFull={full ? onFull : undefined}
+        href={has("open") ? href : undefined}
+      >
+        {(pending) => (
+          <button
+            type="button"
+            className={cn(ICON_BUTTON, "md:hidden")}
+            aria-label="More"
+          >
+            {pending ? (
+              <Loader2 className="h-4 w-4 animate-spin" />
+            ) : (
+              <MoreHorizontal className="h-4 w-4" />
+            )}
+          </button>
+        )}
+      </More>
+    </div>
+  );
+}
+
+// The phone's overflow menu: full screen and open when they didn't fit, then
+// each download format.
+function More({
+  request,
+  title,
+  formats,
+  onFull,
+  href,
+  children,
+}: {
+  request: PreviewRequest;
+  title: string;
+  formats: DownloadFormat[];
+  onFull?: () => void;
+  href?: string;
+  children: (pending: boolean) => ReactNode;
+}) {
+  const { choose, pending } = useShareDownload(request, title);
+  if (!onFull && !href && !formats.length) return null;
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>{children(pending)}</DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="min-w-52">
+        {onFull && (
+          <DropdownMenuItem className="min-h-11 gap-2" onSelect={onFull}>
+            <Maximize2 className="h-4 w-4" /> Full screen
+          </DropdownMenuItem>
+        )}
+        {href && (
+          <DropdownMenuItem className="min-h-11 gap-2" asChild>
+            <a href={href} target="_blank" rel="noopener noreferrer">
+              <ExternalLink className="h-4 w-4" /> Open in new tab
+            </a>
+          </DropdownMenuItem>
+        )}
+        {formats.map((f) => (
+          <DropdownMenuItem
+            key={f}
+            className="min-h-11 gap-2"
+            onSelect={() => void choose(f)}
+          >
+            <Download className="h-4 w-4" /> {FORMAT_LABEL[f]}
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/components/Artifacts/ArtifactFullscreen.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { X } from "lucide-react";
+import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
+import { ArtifactFrame } from "@/components/Chat/ArtifactFrame";
+import { ICON_BUTTON } from "./ArtifactActions";
+
+// A rendered page over the whole screen, its actions in the bar.
+export function ArtifactFullscreen({
+  open,
+  onOpenChange,
+  artifactId,
+  src,
+  title,
+  actions,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  artifactId: string;
+  src?: string;
+  title: string;
+  actions?: ReactNode;
+}) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent
+        showCloseButton={false}
+        className="flex h-[100dvh] w-screen max-w-none flex-col gap-0 rounded-none p-0 sm:max-w-none"
+      >
+        <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">
+            {title}
+          </DialogTitle>
+          {actions}
+          <button
+            type="button"
+            onClick={() => onOpenChange(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)]">
+          {open && (
+            <ArtifactFrame
+              artifactId={artifactId}
+              src={src}
+              title={title}
+              fill
+            />
+          )}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}