@saadnvd1/agent-os 0.3.761 → 0.3.762

package/components/Artifacts/ArtifactPreview.tsx

@@ -7,26 +7,38 @@ import {
   Copy,
   ExternalLink,
   FolderOpen,
+  History,
 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Markdown } from "@/components/Chat/Markdown";
 import { ArtifactFrame } from "@/components/Chat/ArtifactFrame";
-import { artifactContentUrl, useArtifactText } from "@/data/session-artifacts";
+import {
+  artifactContentUrl,
+  useArtifactText,
+  useArtifactVersions,
+} from "@/data/session-artifacts";
+import { artifactActions, type ArtifactAction } from "@/lib/artifacts/actions";
 import { formatBytes } from "@/lib/share/view";
 import { relativeTime } from "@/lib/schedules/when";
 import { openable, type SessionArtifact } from "@/lib/session-artifacts/types";
 import { cn } from "@/lib/utils";
 import { ArtifactIcon } from "./ArtifactRow";
 import { stateLabel } from "./helpers";
+import { ArtifactActions } from "./ArtifactActions";
+import { ArtifactFullscreen } from "./ArtifactFullscreen";
+import { VersionSwitcher } from "./VersionSwitcher";
 
 function Body({
   sessionId,
   artifact,
   pr,
+  versionId,
 }: {
   sessionId: string;
   artifact: SessionArtifact;
   pr: string | null;
+  // A page's version to show, served by its own id.
+  versionId?: string;
 }) {
   const url = artifactContentUrl(sessionId, artifact.id);
   const textual =
@@ -50,8 +62,8 @@ function Body({
   if (artifact.preview === "html")
     return (
       <ArtifactFrame
-        artifactId={artifact.id}
-        src={url}
+        artifactId={versionId ?? artifact.id}
+        src={versionId ? undefined : url}
         title={artifact.name}
         fill
         className="bg-background"
@@ -103,6 +115,7 @@ export function ArtifactPreview({
   artifact,
   pr,
   mobile,
+  remote = false,
   onBack,
   onOpenInFiles,
 }: {
@@ -110,10 +123,34 @@ export function ArtifactPreview({
   artifact: SessionArtifact;
   pr: string | null;
   mobile: boolean;
+  // On a linked machine: its pages are read through the session, one
+  // version only.
+  remote?: boolean;
   onBack?: () => void;
   onOpenInFiles?: (path: string) => void;
 }) {
   const [copied, setCopied] = useState(false);
+  const [full, setFull] = useState(false);
+  // The version picked; none means the latest, which follows new versions.
+  const [picked, setPicked] = useState<string | null>(null);
+  const page =
+    artifact.kind === "page" && !!artifact.artifactId && !remote
+      ? artifact.artifactId
+      : null;
+  // Keyed by the latest version, so a new one refetches.
+  const versionsQuery = useArtifactVersions(
+    page ?? "",
+    page ?? "",
+    !!page && openable(artifact)
+  );
+  const versions = versionsQuery.data?.versions ?? [];
+  const shownId =
+    (picked && versions.some((v) => v.id === picked) && picked) || page;
+  const shown = versions.find((v) => v.id === shownId);
+  const latest = versions[versions.length - 1];
+  const many = versions.length > 1;
+  const older = many && !!shown && shown.id !== latest?.id;
+
   const label = stateLabel(artifact, pr);
   // Inside the worktree, the path from its top; the full one is copied.
   const where =
@@ -125,8 +162,13 @@ export function ArtifactPreview({
   const meta = [
     where,
     label,
-    artifact.size !== undefined ? formatBytes(artifact.size) : null,
-    mobile && artifact.at ? relativeTime(artifact.at) : null,
+    many && shown && `v${shown.version} of ${versions.length}`,
+    shown?.turn && `turn ${shown.turn.index}`,
+    !shown && artifact.size !== undefined ? formatBytes(artifact.size) : null,
+    shown?.bytes !== undefined ? formatBytes(shown.bytes) : null,
+    (mobile || shown) &&
+      (shown?.createdAt || artifact.at) &&
+      relativeTime(shown?.createdAt || artifact.at),
   ]
     .filter(Boolean)
     .join(" · ");
@@ -137,14 +179,16 @@ export function ArtifactPreview({
       setTimeout(() => setCopied(false), 1500);
     });
   };
-  const canOpenInFiles =
-    !!onOpenInFiles &&
-    !!artifact.path &&
-    artifact.state === "live" &&
-    (artifact.kind === "file" || artifact.kind === "plan");
-  const actions = (
+  const list = artifact.actions ?? artifactActions(artifact, { pdf: false });
+  const can = (id: ArtifactAction["id"]) => list.some((a) => a.id === id);
+  // A linked machine's page is read through the session: only full screen.
+  const pageList = page
+    ? (versionsQuery.data?.actions ?? list)
+    : list.filter((a) => a.id === "fullscreen");
+  const canOpenInFiles = !!onOpenInFiles && can("open-in-files");
+  const fileActions = (
     <>
-      {artifact.url && (
+      {artifact.url && can("open-pr") && (
         <Button
           variant="outline"
           size="sm"
@@ -162,7 +206,7 @@ export function ArtifactPreview({
           </a>
         </Button>
       )}
-      {artifact.path && (
+      {artifact.path && can("copy-path") && (
         <Button
           variant="outline"
           size="sm"
@@ -178,7 +222,7 @@ export function ArtifactPreview({
           <span className={cn(!mobile && "hidden @lg:inline")}>Copy path</span>
         </Button>
       )}
-      {canOpenInFiles && (
+      {canOpenInFiles && artifact.path && (
         <Button
           variant="outline"
           size="sm"
@@ -194,7 +238,31 @@ export function ArtifactPreview({
       )}
     </>
   );
-  const hasActions = !!(artifact.url || artifact.path);
+  const isPage = artifact.kind === "page" && openable(artifact);
+  const pageActionsFor = (variant: "labelled" | "bar") => (
+    <ArtifactActions
+      artifactId={shownId ?? artifact.id}
+      title={shown?.title ?? artifact.name}
+      version={many ? shown?.version : undefined}
+      actions={pageList}
+      variant={variant}
+      onFull={() => setFull(true)}
+    />
+  );
+  const actions = isPage
+    ? pageActionsFor(mobile ? "bar" : "labelled")
+    : fileActions;
+  const hasActions = isPage
+    ? pageList.length > 0
+    : list.some((a) => a.id !== "open-in-files" || canOpenInFiles);
+  const switcher = many && shownId && (
+    <VersionSwitcher
+      versions={versions}
+      currentId={shownId}
+      onPick={(id) => setPicked(id === latest?.id ? null : id)}
+      mobile={mobile}
+    />
+  );
 
   return (
     <div className="@container flex h-full min-w-0 flex-col">
@@ -214,7 +282,7 @@ export function ArtifactPreview({
         )}
         <div className="min-w-0 flex-1">
           <div className="truncate text-[13px] font-medium">
-            {artifact.name}
+            {shown?.title ?? artifact.name}
           </div>
           {meta && (
             <div className="text-muted-foreground truncate font-mono text-[11px]">
@@ -222,18 +290,73 @@ export function ArtifactPreview({
             </div>
           )}
         </div>
+        {!mobile && switcher && (
+          <div className="hidden @3xl:flex">{switcher}</div>
+        )}
         {!mobile && hasActions && (
           <div className="flex shrink-0 gap-1.5">{actions}</div>
         )}
       </div>
+      {mobile && switcher && (
+        <div className="bg-card border-b px-1">{switcher}</div>
+      )}
+      {!mobile && switcher && (
+        <div className="flex border-b px-3 py-1.5 sm:px-4 @3xl:hidden">
+          {switcher}
+        </div>
+      )}
+      {older && latest && (
+        <div className="flex min-h-11 items-center gap-2 border-b border-amber-500/25 bg-amber-500/[0.08] px-3 text-[12.5px] sm:px-4">
+          <History className="h-3.5 w-3.5 shrink-0 text-amber-600 dark:text-amber-400" />
+          <span className="min-w-0 flex-1 truncate">
+            Older version
+            <span className="hidden @md:inline">
+              . The agent changed this page since.
+            </span>
+          </span>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-11 shrink-0 md:h-7"
+            onClick={() => setPicked(null)}
+          >
+            Go to latest (v{latest.version})
+          </Button>
+        </div>
+      )}
       <div className="min-h-0 flex-1 overflow-auto">
-        <Body sessionId={sessionId} artifact={artifact} pr={pr} />
+        <Body
+          sessionId={sessionId}
+          artifact={artifact}
+          pr={pr}
+          versionId={shownId ?? undefined}
+        />
       </div>
       {mobile && hasActions && (
         <div className="flex gap-2 border-t px-3 pt-2.5 pb-[max(0.75rem,env(safe-area-inset-bottom))]">
-          {actions}
+          {isPage ? <div className="flex-1">{actions}</div> : actions}
         </div>
       )}
+      {isPage && (
+        <ArtifactFullscreen
+          open={full}
+          onOpenChange={setFull}
+          artifactId={shownId ?? artifact.id}
+          src={shownId ? undefined : artifactContentUrl(sessionId, artifact.id)}
+          title={shown?.title ?? artifact.name}
+          actions={
+            page ? (
+              <ArtifactActions
+                artifactId={shownId ?? artifact.id}
+                title={shown?.title ?? artifact.name}
+                version={many ? shown?.version : undefined}
+                actions={pageList.filter((a) => a.id !== "fullscreen")}
+                variant="icons"
+              />
+            ) : undefined
+          }
+        />
+      )}
     </div>
   );
 }

package/components/Artifacts/ArtifactRow.tsx

@@ -106,6 +106,11 @@ export function ArtifactRow({
           )}
         >
           {artifact.name}
+          {(artifact.versionCount ?? 1) > 1 && (
+            <span className="bg-primary/15 text-primary ml-1.5 rounded-full px-1.5 py-px align-[1px] font-sans text-[10.5px]">
+              v{artifact.version}
+            </span>
+          )}
         </span>
         <span
           className={cn(

package/components/Artifacts/ArtifactsPanel.tsx

@@ -121,6 +121,7 @@ export function ArtifactsPanel({
         artifact={selected}
         pr={pr}
         mobile
+        remote={!!data?.host}
         onBack={() => setSelectedId(null)}
         onOpenInFiles={onOpenInFiles}
       />
@@ -231,6 +232,7 @@ export function ArtifactsPanel({
             artifact={selected}
             pr={pr}
             mobile={false}
+            remote={!!data?.host}
             onOpenInFiles={onOpenInFiles}
           />
         ) : (

package/components/Artifacts/VersionSwitcher.tsx

@@ -0,0 +1,216 @@
+"use client";
+
+import { useState } from "react";
+import {
+  Check,
+  ChevronDown,
+  ChevronLeft,
+  ChevronRight,
+  History,
+} from "lucide-react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
+import { SHEET } from "@/components/Hosts/sheet";
+import type { ArtifactVersion } from "@/lib/artifacts/actions";
+import { formatBytes } from "@/lib/share/view";
+import { relativeTime } from "@/lib/schedules/when";
+import { cn } from "@/lib/utils";
+
+// "turn 9 · "split by plan" · 31m ago · 16 KB"
+export function versionDetail(v: ArtifactVersion, full = true): string {
+  return [
+    v.turn && `turn ${v.turn.index}`,
+    full && v.turn?.prompt && `“${v.turn.prompt}”`,
+    relativeTime(v.createdAt),
+    full && v.bytes !== undefined && formatBytes(v.bytes),
+  ]
+    .filter(Boolean)
+    .join(" · ");
+}
+
+const summary = (v: ArtifactVersion) =>
+  v.note || (v.version === 1 ? "First version" : `Version ${v.version}`);
+
+function Row({
+  v,
+  latest,
+  current,
+  full,
+}: {
+  v: ArtifactVersion;
+  latest: boolean;
+  current: boolean;
+  full: boolean;
+}) {
+  return (
+    <>
+      <span
+        className={cn(
+          "mt-0.5 inline-flex h-5 shrink-0 items-center rounded-full px-2 text-[11px]",
+          latest
+            ? "bg-primary/15 text-primary"
+            : "bg-muted text-muted-foreground"
+        )}
+      >
+        v{v.version}
+      </span>
+      <span className="min-w-0 flex-1">
+        <span className="block truncate text-[13px]">
+          {summary(v)}
+          {latest && <span className="text-muted-foreground"> · latest</span>}
+        </span>
+        <span className="text-muted-foreground block truncate text-[11.5px]">
+          {versionDetail(v, full)}
+        </span>
+      </span>
+      {current && <Check className="text-primary h-4 w-4 shrink-0" />}
+    </>
+  );
+}
+
+// ‹ v2 of 3 › with the list of versions: a menu on a wide screen, a sheet
+// on a phone. Hidden for a page with one version.
+export function VersionSwitcher({
+  versions,
+  currentId,
+  onPick,
+  mobile,
+  className,
+}: {
+  versions: ArtifactVersion[];
+  currentId: string;
+  onPick: (id: string) => void;
+  mobile: boolean;
+  className?: string;
+}) {
+  const [sheet, setSheet] = useState(false);
+  if (versions.length < 2) return null;
+  const i = Math.max(
+    0,
+    versions.findIndex((v) => v.id === currentId)
+  );
+  const current = versions[i];
+  const last = versions.length - 1;
+  const ordered = [...versions].reverse();
+  const step = (d: number) => {
+    const next = versions[i + d];
+    if (next) onPick(next.id);
+  };
+  const arrow = mobile ? "h-11 w-11" : "h-[30px] w-[30px]";
+  const label = (
+    <>
+      {!mobile && <History className="h-3.5 w-3.5" />}
+      <span>
+        <b className="font-semibold">v{current.version}</b>
+        <span className="text-muted-foreground"> of {versions.length}</span>
+      </span>
+      <ChevronDown className="h-3.5 w-3.5 opacity-60" />
+    </>
+  );
+
+  return (
+    <div
+      className={cn(
+        "flex items-center",
+        mobile ? "w-full" : "h-8 shrink-0 rounded-lg border",
+        className
+      )}
+    >
+      <button
+        type="button"
+        className={cn(
+          "text-muted-foreground hover:text-foreground inline-flex items-center justify-center disabled:opacity-30",
+          arrow
+        )}
+        onClick={() => step(-1)}
+        disabled={i === 0}
+        aria-label="Older version"
+      >
+        <ChevronLeft className="h-4 w-4" />
+      </button>
+      {mobile ? (
+        <>
+          <button
+            type="button"
+            className="flex h-11 flex-1 items-center justify-center gap-1 text-[13px]"
+            onClick={() => setSheet(true)}
+            aria-label="Versions"
+          >
+            {label}
+          </button>
+          <Dialog open={sheet} onOpenChange={setSheet}>
+            <DialogContent className={cn(SHEET, "gap-1 p-2 pt-4")}>
+              <DialogTitle className="px-3 pb-1 text-sm">Versions</DialogTitle>
+              {ordered.map((v) => (
+                <button
+                  key={v.id}
+                  type="button"
+                  className={cn(
+                    "hover:bg-accent flex min-h-14 items-start gap-2.5 rounded-lg px-3 py-2 text-left",
+                    v.id === current.id && "bg-accent"
+                  )}
+                  onClick={() => {
+                    onPick(v.id);
+                    setSheet(false);
+                  }}
+                >
+                  <Row
+                    v={v}
+                    latest={v.id === versions[last].id}
+                    current={v.id === current.id}
+                    full={false}
+                  />
+                </button>
+              ))}
+            </DialogContent>
+          </Dialog>
+        </>
+      ) : (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <button
+              type="button"
+              className="flex h-full items-center gap-1 border-x px-2 text-[12.5px]"
+              aria-label="Versions"
+            >
+              {label}
+            </button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="w-[22rem] max-w-[90vw]">
+            {ordered.map((v) => (
+              <DropdownMenuItem
+                key={v.id}
+                className="items-start gap-2.5 py-2"
+                onSelect={() => onPick(v.id)}
+              >
+                <Row
+                  v={v}
+                  latest={v.id === versions[last].id}
+                  current={v.id === current.id}
+                  full
+                />
+              </DropdownMenuItem>
+            ))}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      )}
+      <button
+        type="button"
+        className={cn(
+          "text-muted-foreground hover:text-foreground inline-flex items-center justify-center disabled:opacity-30",
+          arrow
+        )}
+        onClick={() => step(1)}
+        disabled={i === last}
+        aria-label="Newer version"
+      >
+        <ChevronRight className="h-4 w-4" />
+      </button>
+    </div>
+  );
+}