@saadnvd1/agent-os 0.3.770 → 0.3.775

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

@@ -0,0 +1,41 @@
+import { NextResponse } from "next/server";
+import { z } from "zod";
+import { compareVersions } from "@/lib/artifacts/compare";
+import { getSession } from "@/lib/session-artifacts/collect";
+
+const Query = z.object({
+  to: z.string().min(1).max(64),
+  mode: z.enum(["changes", "source"]).default("changes"),
+});
+
+// GET /api/sessions/[id]/artifacts/[artifactId]/compare?to=<id>&mode= - what
+// changed between two versions of one page: the visible text (changes) or the
+// HTML (source). Both versions must be this session's, of the same page.
+export async function GET(
+  request: Request,
+  { params }: { params: Promise<{ id: string; artifactId: string }> }
+) {
+  const { id, artifactId } = await params;
+  const query = Query.safeParse(
+    Object.fromEntries(new URL(request.url).searchParams)
+  );
+  if (!query.success)
+    return NextResponse.json(
+      { error: "Name the version: ?to=" },
+      { status: 400 }
+    );
+  if (!getSession(id))
+    return NextResponse.json({ error: "Session not found" }, { status: 404 });
+  const result = await compareVersions(
+    id,
+    artifactId,
+    query.data.to,
+    query.data.mode
+  );
+  if (!result.ok)
+    return NextResponse.json(
+      { error: result.error },
+      { status: result.status }
+    );
+  return NextResponse.json(result);
+}

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

@@ -3,7 +3,7 @@ import { pdfAvailable } from "@/lib/share/pdf";
 import { linked } from "@/lib/share/connect";
 import { readJson, refuseDemo, toResponse } from "@/lib/share/route";
 import type { ShareFormat } from "@/lib/share/view";
-import { buildPage, parseRequest } from "@/lib/share/service";
+import { buildPage, listChatItems, parseRequest } from "@/lib/share/service";
 
 // POST /api/shares/preview - exactly what a share would upload, redacted.
 // Local work only: nothing goes to Connect until a share is created.
@@ -14,6 +14,11 @@ export async function POST(request: Request) {
   if ("refused" in read) return read.refused;
   try {
     const req = parseRequest(read.body);
+    if (
+      req.kind === "chat" &&
+      (read.body as { listOnly?: unknown }).listOnly === true
+    )
+      return NextResponse.json({ items: await listChatItems(req) });
     const page = await buildPage(req);
     const formats: ShareFormat[] = ["html", "md"];
     if (await pdfAvailable()) formats.unshift("pdf");

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

@@ -316,6 +316,57 @@ describe("create", () => {
     expect(JSON.parse(seen[0].body).expires_in).toBe("never");
   });
 
+  it("uploads exactly the previewed range, and refuses another range's hash", async () => {
+    const id = chat();
+    const range = { fromId: "a1", toId: "a1" };
+    const p = await previewOf(id, range);
+    expect(p.html).not.toContain("[secret]");
+    expect(p.html).toContain("Earlier messages not shared");
+    expect(p.markdown).toContain("Earlier messages not shared");
+    const body = {
+      kind: "chat",
+      sessionId: id,
+      includeTools: false,
+      sharedAt: p.sharedAt,
+      hash: p.hash,
+      expiresIn: "7d",
+    };
+    const other = await shares.POST(
+      post("/api/shares", { ...body, fromId: "u1", toId: "a1" })
+    );
+    expect(other.status).toBe(409);
+    expect(seen).toHaveLength(0);
+    const res = await shares.POST(post("/api/shares", { ...body, ...range }));
+    expect(res.status).toBe(201);
+    expect(JSON.parse(seen[0].body).html).toContain(
+      "Earlier messages not shared"
+    );
+  });
+
+  it("lists every message with its time, and refuses a range that's gone", async () => {
+    const id = chat();
+    const res = await preview.POST(
+      post("/api/shares/preview", {
+        kind: "chat",
+        sessionId: id,
+        includeTools: false,
+        listOnly: true,
+      })
+    );
+    const { items } = await res.json();
+    expect(items.map((i: { id: string }) => i.id)).toEqual(["u1", "a1"]);
+    expect(items[0].createdAt).toBeGreaterThan(0);
+    const gone = await preview.POST(
+      post("/api/shares/preview", {
+        kind: "chat",
+        sessionId: id,
+        includeTools: false,
+        fromId: "nope",
+      })
+    );
+    expect(gone.status).toBe(409);
+  });
+
   it("shares an artifact", async () => {
     const id = chat();
     const art = createArtifact(

package/app/page.tsx

@@ -721,6 +721,7 @@ function HomeContent() {
 
   useAppCommands({
     sessions,
+    statuses: sessionStatuses,
     onSelectSession: selectSession,
     onSearchCode: () => setShowQuickSwitcher(true),
   });

package/components/Artifacts/ArtifactActions.tsx

@@ -5,6 +5,7 @@ import type { ReactNode } from "react";
 import {
   Download,
   ExternalLink,
+  GitCompare,
   Loader2,
   Maximize2,
   MoreHorizontal,
@@ -47,6 +48,8 @@ interface Props {
   // bar: the Artifacts view's bottom bar on a phone.
   variant: "icons" | "labelled" | "bar";
   onFull?: () => void;
+  // Offered only by the owner's viewer, for a page with 2+ versions.
+  onCompare?: () => void;
 }
 
 // A rendered page's actions: full screen, share, open, download. One place
@@ -58,10 +61,12 @@ export function ArtifactActions({
   actions,
   variant,
   onFull,
+  onCompare,
 }: 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 compare = has("compare") ? onCompare : undefined;
   const request: PreviewRequest = {
     kind: "artifact",
     artifactId,
@@ -96,8 +101,13 @@ export function ArtifactActions({
             <Maximize2 className="h-4 w-4" />
           </Button>
         )}
-        {formats.length > 0 && (
-          <More request={request} title={title} formats={formats}>
+        {(formats.length > 0 || compare) && (
+          <More
+            request={request}
+            title={title}
+            formats={formats}
+            onCompare={compare}
+          >
             {(pending) => (
               <Button
                 variant="outline"
@@ -131,6 +141,12 @@ export function ArtifactActions({
             <span className={label}>Full screen</span>
           </Button>
         )}
+        {compare && (
+          <Button variant="outline" size="sm" onClick={compare} title="Compare">
+            <GitCompare className="h-3.5 w-3.5" />
+            <span className={label}>Compare</span>
+          </Button>
+        )}
         {has("share") && (
           <Button variant="outline" size="sm" onClick={share} title="Share">
             <Share2 className="h-3.5 w-3.5" />
@@ -238,6 +254,7 @@ export function ArtifactActions({
         title={title}
         formats={formats}
         onFull={full ? onFull : undefined}
+        onCompare={compare}
         href={has("open") ? href : undefined}
       >
         {(pending) => (
@@ -265,6 +282,7 @@ function More({
   title,
   formats,
   onFull,
+  onCompare,
   href,
   children,
 }: {
@@ -272,11 +290,12 @@ function More({
   title: string;
   formats: DownloadFormat[];
   onFull?: () => void;
+  onCompare?: () => void;
   href?: string;
   children: (pending: boolean) => ReactNode;
 }) {
   const { choose, pending } = useShareDownload(request, title);
-  if (!onFull && !href && !formats.length) return null;
+  if (!onFull && !onCompare && !href && !formats.length) return null;
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>{children(pending)}</DropdownMenuTrigger>
@@ -286,6 +305,11 @@ function More({
             <Maximize2 className="h-4 w-4" /> Full screen
           </DropdownMenuItem>
         )}
+        {onCompare && (
+          <DropdownMenuItem className="min-h-11 gap-2" onSelect={onCompare}>
+            <GitCompare className="h-4 w-4" /> Compare versions
+          </DropdownMenuItem>
+        )}
         {href && (
           <DropdownMenuItem className="min-h-11 gap-2" asChild>
             <a href={href} target="_blank" rel="noopener noreferrer">

package/components/Artifacts/ArtifactPreview.tsx

@@ -26,6 +26,7 @@ import { ArtifactIcon } from "./ArtifactRow";
 import { stateLabel } from "./helpers";
 import { ArtifactActions } from "./ArtifactActions";
 import { ArtifactFullscreen } from "./ArtifactFullscreen";
+import { ArtifactCompare } from "./Compare";
 import { VersionSwitcher } from "./VersionSwitcher";
 
 function Body({
@@ -131,6 +132,7 @@ export function ArtifactPreview({
 }) {
   const [copied, setCopied] = useState(false);
   const [full, setFull] = useState(false);
+  const [comparing, setComparing] = useState(false);
   // The version picked; none means the latest, which follows new versions.
   const [picked, setPicked] = useState<string | null>(null);
   const page =
@@ -151,6 +153,7 @@ export function ArtifactPreview({
   const many = versions.length > 1;
   const older = many && !!shown && shown.id !== latest?.id;
 
+  const showCompare = comparing && many;
   const label = stateLabel(artifact, pr);
   // Inside the worktree, the path from its top; the full one is copied.
   const where =
@@ -247,6 +250,7 @@ export function ArtifactPreview({
       actions={pageList}
       variant={variant}
       onFull={() => setFull(true)}
+      onCompare={() => setComparing(true)}
     />
   );
   const actions = isPage
@@ -297,15 +301,15 @@ export function ArtifactPreview({
           <div className="flex shrink-0 gap-1.5">{actions}</div>
         )}
       </div>
-      {mobile && switcher && (
+      {mobile && switcher && !showCompare && (
         <div className="bg-card border-b px-1">{switcher}</div>
       )}
-      {!mobile && switcher && (
+      {!mobile && switcher && !showCompare && (
         <div className="flex border-b px-3 py-1.5 sm:px-4 @3xl:hidden">
           {switcher}
         </div>
       )}
-      {older && latest && (
+      {older && latest && !showCompare && (
         <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">
@@ -324,15 +328,26 @@ export function ArtifactPreview({
           </Button>
         </div>
       )}
-      <div className="min-h-0 flex-1 overflow-auto">
-        <Body
-          sessionId={sessionId}
-          artifact={artifact}
-          pr={pr}
-          versionId={shownId ?? undefined}
-        />
-      </div>
-      {mobile && hasActions && (
+      {showCompare && shownId ? (
+        <div className="min-h-0 flex-1">
+          <ArtifactCompare
+            sessionId={sessionId}
+            versions={versions}
+            shownId={shownId}
+            onClose={() => setComparing(false)}
+          />
+        </div>
+      ) : (
+        <div className="min-h-0 flex-1 overflow-auto">
+          <Body
+            sessionId={sessionId}
+            artifact={artifact}
+            pr={pr}
+            versionId={shownId ?? undefined}
+          />
+        </div>
+      )}
+      {mobile && hasActions && !showCompare && (
         <div className="flex gap-2 border-t px-3 pt-2.5 pb-[max(0.75rem,env(safe-area-inset-bottom))]">
           {isPage ? <div className="flex-1">{actions}</div> : actions}
         </div>

package/components/Artifacts/Compare/DiffView.tsx

@@ -0,0 +1,116 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import { cn } from "@/lib/utils";
+import { foldUnchanged } from "@/lib/artifacts/compare/diff";
+import type { DiffLine, WordPart } from "@/lib/artifacts/compare/types";
+
+const ROW = {
+  eq: "",
+  add: "bg-emerald-500/10",
+  del: "bg-red-500/10",
+} as const;
+const SIGN = {
+  eq: " ",
+  add: "+",
+  del: "−",
+} as const;
+const SIGN_TONE = {
+  eq: "text-muted-foreground",
+  add: "text-emerald-700 dark:text-emerald-400",
+  del: "text-red-700 dark:text-red-400",
+} as const;
+const WORD = {
+  add: "bg-emerald-500/30",
+  del: "bg-red-500/30 line-through decoration-red-500/60",
+} as const;
+
+function Words({ parts }: { parts: WordPart[] }) {
+  return (
+    <>
+      {parts.map((p, i) =>
+        p.t === "eq" ? (
+          <span key={i}>{p.s}</span>
+        ) : (
+          <mark key={i} className={cn("rounded-sm text-inherit", WORD[p.t])}>
+            {p.s}
+          </mark>
+        )
+      )}
+    </>
+  );
+}
+
+function Row({ line, wrap }: { line: DiffLine; wrap: boolean }) {
+  return (
+    <div
+      className={cn(
+        "grid grid-cols-[1.75rem_1fr] font-mono text-xs leading-relaxed",
+        ROW[line.t]
+      )}
+    >
+      <span
+        aria-hidden
+        className={cn("text-center select-none", SIGN_TONE[line.t])}
+      >
+        {SIGN[line.t]}
+      </span>
+      <span
+        className={cn(
+          "min-w-0 pr-3",
+          wrap ? "break-words whitespace-pre-wrap" : "whitespace-pre"
+        )}
+      >
+        {line.words ? <Words parts={line.words} /> : line.s}
+      </span>
+    </div>
+  );
+}
+
+// A unified diff: removed lines, then added, with unchanged stretches folded.
+export function DiffView({
+  lines,
+  wrap,
+}: {
+  lines: DiffLine[];
+  // Text wraps; source scrolls sideways.
+  wrap: boolean;
+}) {
+  const [all, setAll] = useState(false);
+  const shown = useMemo(
+    () => (all ? lines : foldUnchanged(lines)),
+    [all, lines]
+  );
+  const folded = shown.some((s) => "gap" in s);
+  return (
+    <div className="flex flex-col">
+      <div className={cn("py-2", !wrap && "overflow-x-auto")}>
+        <div className={cn(!wrap && "w-max min-w-full")}>
+          {shown.map((s, i) =>
+            "gap" in s ? (
+              <button
+                key={i}
+                type="button"
+                onClick={() => setAll(true)}
+                className="text-muted-foreground hover:text-foreground bg-muted/50 my-1 flex min-h-11 w-full items-center justify-center text-xs md:min-h-7"
+              >
+                {s.gap} unchanged {s.gap === 1 ? "line" : "lines"} · show all
+              </button>
+            ) : (
+              <Row key={i} line={s} wrap={wrap} />
+            )
+          )}
+        </div>
+      </div>
+      {all && folded === false && lines.some((l) => l.t !== "eq") && (
+        <button
+          type="button"
+          onClick={() => setAll(false)}
+          className="text-muted-foreground hover:text-foreground min-h-11 text-xs md:min-h-9"
+        >
+          Fold unchanged lines
+        </button>
+      )}
+    </div>
+  );
+}

package/components/Artifacts/Compare/SideBySide.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import { useState } from "react";
+import { Segmented } from "@/components/ui/segmented";
+import { ArtifactFrame } from "@/components/Chat/ArtifactFrame";
+import type { ArtifactVersion } from "@/lib/artifacts/actions";
+import { cn } from "@/lib/utils";
+
+// Two versions in the viewer's sandboxed frames: next to each other when
+// there's room, otherwise one at a time with a toggle.
+export function SideBySide({
+  from,
+  to,
+}: {
+  from: ArtifactVersion;
+  to: ArtifactVersion;
+}) {
+  const [side, setSide] = useState<"from" | "to">("to");
+  const panes = [
+    { key: "from", v: from },
+    { key: "to", v: to },
+  ] as const;
+  return (
+    <div className="flex h-full min-h-[60dvh] flex-col gap-2 p-2 @2xl:p-3">
+      <div className="@2xl:hidden">
+        <Segmented
+          label="Version shown"
+          value={side}
+          onChange={setSide}
+          options={panes.map((p) => ({
+            value: p.key,
+            label: `v${p.v.version}${p.key === "from" ? " (before)" : " (after)"}`,
+          }))}
+        />
+      </div>
+      <div className="grid min-h-0 flex-1 gap-3 @2xl:grid-cols-2">
+        {panes.map(({ key, v }) => (
+          <div
+            key={key}
+            className={cn(
+              "min-h-0 flex-col gap-1",
+              side === key ? "flex" : "hidden @2xl:flex"
+            )}
+          >
+            <div className="text-muted-foreground hidden px-1 text-xs @2xl:block">
+              v{v.version}
+              {key === "from" ? " · before" : " · after"}
+            </div>
+            <ArtifactFrame
+              artifactId={v.id}
+              title={`${v.title} v${v.version}`}
+              fill
+              className="bg-background min-h-[50dvh] rounded-lg shadow-sm"
+            />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/components/Artifacts/Compare/VersionPicker.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import type { ArtifactVersion } from "@/lib/artifacts/actions";
+
+const label = (v: ArtifactVersion, latest: boolean) =>
+  `v${v.version}${latest ? " · latest" : ""}`;
+
+export function VersionPicker({
+  name,
+  value,
+  versions,
+  onChange,
+}: {
+  name: string;
+  value: string;
+  versions: ArtifactVersion[];
+  onChange: (id: string) => void;
+}) {
+  const last = versions[versions.length - 1];
+  return (
+    <div className="flex min-w-0 flex-1 flex-col gap-1">
+      <span className="text-muted-foreground text-[11px] font-medium tracking-wider uppercase">
+        {name}
+      </span>
+      <Select value={value} onValueChange={onChange}>
+        <SelectTrigger aria-label={`${name} version`} className="h-11 md:h-9">
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          {[...versions].reverse().map((v) => (
+            <SelectItem key={v.id} value={v.id} className="min-h-11 md:min-h-8">
+              {label(v, v.id === last?.id)}
+              {v.note ? ` · ${v.note}` : ""}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    </div>
+  );
+}