@saadnvd1/agent-os 0.3.594 → 0.3.596

package/README.md

@@ -21,6 +21,7 @@ and check on all of it from your phone.
 - **Agents that talk to each other.** Sessions message each other with `aos`, and you see every conversation in Messages. [More](docs/guides/agent-network.md)
 - **Chat or terminal, same conversation.** Streaming replies, steps and diffs, plan mode, slash commands, `@file`, undo. [More](docs/guides/chat.md)
 - **Bookmarks.** Star any message, tool call or turn, then find it again from the chat or across every chat, with a search. [More](docs/guides/chat.md)
+- **Every artifact in one place.** A session's plan, PR, files, pages, images and job logs in one list, with a preview, kept after its worktree is removed. [More](docs/guides/sessions.md#artifacts)
 - **Share a chat or a page.** A read-only snapshot link with secrets, home paths and machine names masked, a preview before anything leaves your machine, and a Markdown copy to hand to an agent. [More](docs/guides/sharing.md)
 - **Project config.** `agentos.json` gives each session its own ports, environment, files and a private Postgres copy. [More](docs/reference/project-config.md)
 - **Schedules and recipes.** Start work on a timer, or save a job that comes up again. [More](docs/guides/schedules.md)

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

@@ -0,0 +1,34 @@
+import { NextResponse } from "next/server";
+import { peerLinkOf } from "@/lib/hosts/peer-actions";
+import { collectArtifacts, getSession } from "@/lib/session-artifacts/collect";
+import { peerContent } from "@/lib/session-artifacts/peer";
+import { artifactContent } from "@/lib/session-artifacts/serve";
+
+// GET /api/sessions/[id]/artifacts/[artifactId] - one artifact's content.
+// By id only: a path the client sends is never read.
+export async function GET(
+  _request: Request,
+  { params }: { params: Promise<{ id: string; artifactId: string }> }
+) {
+  const { id, artifactId } = await params;
+  const session = getSession(id);
+  if (!session)
+    return NextResponse.json({ error: "Session not found" }, { status: 404 });
+  const link = peerLinkOf(session);
+  const content = link
+    ? await peerContent(link, id, artifactId)
+    : await (async () => {
+        const entry = (await collectArtifacts(session)).find(
+          (e) => e.artifact.id === artifactId
+        );
+        return entry
+          ? artifactContent(session, entry)
+          : ({ ok: false, status: 404, error: "Not found" } as const);
+      })();
+  if (!content.ok)
+    return NextResponse.json(
+      { error: content.error },
+      { status: content.status }
+    );
+  return new NextResponse(content.body, { headers: content.headers });
+}

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

@@ -1,17 +1,33 @@
 import { NextResponse } from "next/server";
-import { listArtifacts } from "@/lib/artifacts/store";
+import { peerLinkOf } from "@/lib/hosts/peer-actions";
+import { collectArtifacts, getSession } from "@/lib/session-artifacts/collect";
+import { peerArtifacts } from "@/lib/session-artifacts/peer";
 
-// GET /api/sessions/[id]/artifacts - the pages this session's agent showed
+// GET /api/sessions/[id]/artifacts - everything the session made: its plan,
+// files, pages, images, job logs, PR, recipe run and log
 export async function GET(
   _request: Request,
   { params }: { params: Promise<{ id: string }> }
 ) {
   const { id } = await params;
-  const artifacts = listArtifacts(id).map((a) => ({
-    id: a.id,
-    title: a.title,
-    createdAt: a.created_at,
-    url: `/api/artifacts/${a.id}`,
-  }));
-  return NextResponse.json({ artifacts });
+  const session = getSession(id);
+  if (!session)
+    return NextResponse.json({ error: "Session not found" }, { status: 404 });
+  const link = peerLinkOf(session);
+  if (link) {
+    try {
+      return NextResponse.json({
+        artifacts: await peerArtifacts(link, id),
+        host: link.hostName,
+      });
+    } catch {
+      return NextResponse.json({
+        artifacts: [],
+        host: link.hostName,
+        unreachable: true,
+      });
+    }
+  }
+  const entries = await collectArtifacts(session);
+  return NextResponse.json({ artifacts: entries.map((e) => e.artifact) });
 }

package/components/Artifacts/ArtifactPreview.tsx

@@ -0,0 +1,239 @@
+"use client";
+
+import { useState } from "react";
+import {
+  Check,
+  ChevronLeft,
+  Copy,
+  ExternalLink,
+  FolderOpen,
+} 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 { 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";
+
+function Body({
+  sessionId,
+  artifact,
+  pr,
+}: {
+  sessionId: string;
+  artifact: SessionArtifact;
+  pr: string | null;
+}) {
+  const url = artifactContentUrl(sessionId, artifact.id);
+  const textual =
+    openable(artifact) &&
+    (artifact.preview === "markdown" || artifact.preview === "text");
+  const text = useArtifactText(textual ? url : null);
+
+  if (!openable(artifact))
+    return (
+      <p className="text-muted-foreground p-6 text-sm">
+        {artifact.state === "in-pr"
+          ? `Committed, and its worktree was removed: it's in ${pr ? `PR #${pr}` : "the PR"}.`
+          : artifact.state === "outside"
+            ? "Outside the folders AgentOS serves, so it isn't opened here."
+            : artifact.state === "gone"
+              ? "Gone: its worktree was removed and no copy was kept."
+              : "Nothing to preview."}
+      </p>
+    );
+
+  if (artifact.preview === "html")
+    return (
+      <ArtifactFrame
+        artifactId={artifact.id}
+        src={url}
+        title={artifact.name}
+        fill
+        className="bg-background"
+      />
+    );
+
+  if (artifact.preview === "image")
+    return (
+      <div className="flex min-h-full items-start justify-center p-4">
+        {/* eslint-disable-next-line @next/next/no-img-element */}
+        <img
+          src={url}
+          alt={artifact.name}
+          className="max-w-full rounded-lg border"
+        />
+      </div>
+    );
+
+  if (text.isPending)
+    return <div className="bg-muted/40 m-4 h-40 animate-pulse rounded-lg" />;
+  if (text.isError)
+    return <p className="text-destructive p-4 text-sm">{text.error.message}</p>;
+  const note = text.data.truncated && (
+    <p className="text-muted-foreground mb-3 text-xs">
+      {artifact.kind === "log"
+        ? "Showing the end of the output."
+        : "Showing the start of the file."}
+    </p>
+  );
+  if (artifact.preview === "markdown")
+    return (
+      <div className="mx-auto max-w-3xl px-5 py-5">
+        {note}
+        <Markdown text={text.data.text} />
+      </div>
+    );
+  return (
+    <div className="p-4">
+      {note}
+      <pre className="font-mono text-xs leading-relaxed break-words whitespace-pre-wrap">
+        {text.data.text}
+      </pre>
+    </div>
+  );
+}
+
+export function ArtifactPreview({
+  sessionId,
+  artifact,
+  pr,
+  mobile,
+  onBack,
+  onOpenInFiles,
+}: {
+  sessionId: string;
+  artifact: SessionArtifact;
+  pr: string | null;
+  mobile: boolean;
+  onBack?: () => void;
+  onOpenInFiles?: (path: string) => void;
+}) {
+  const [copied, setCopied] = useState(false);
+  const label = stateLabel(artifact, pr);
+  // Inside the worktree, the path from its top; the full one is copied.
+  const where =
+    artifact.path && artifact.folder !== undefined
+      ? [artifact.folder, artifact.path.split("/").pop()]
+          .filter(Boolean)
+          .join("/")
+      : artifact.path;
+  const meta = [
+    where,
+    label,
+    artifact.size !== undefined ? formatBytes(artifact.size) : null,
+    mobile && artifact.at ? relativeTime(artifact.at) : null,
+  ]
+    .filter(Boolean)
+    .join(" · ");
+  const copy = () => {
+    if (!artifact.path) return;
+    void navigator.clipboard?.writeText(artifact.path).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
+    });
+  };
+  const canOpenInFiles =
+    !!onOpenInFiles &&
+    !!artifact.path &&
+    artifact.state === "live" &&
+    (artifact.kind === "file" || artifact.kind === "plan");
+  const actions = (
+    <>
+      {artifact.url && (
+        <Button
+          variant="outline"
+          size="sm"
+          asChild
+          className={cn(mobile && "h-11 flex-1")}
+        >
+          <a
+            href={artifact.url}
+            target="_blank"
+            rel="noreferrer"
+            title="Open PR"
+          >
+            <ExternalLink className="h-3.5 w-3.5" />{" "}
+            <span className={cn(!mobile && "hidden @lg:inline")}>Open PR</span>
+          </a>
+        </Button>
+      )}
+      {artifact.path && (
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={copy}
+          title="Copy path"
+          className={cn(mobile && "h-11 flex-1")}
+        >
+          {copied ? (
+            <Check className="h-3.5 w-3.5" />
+          ) : (
+            <Copy className="h-3.5 w-3.5" />
+          )}
+          <span className={cn(!mobile && "hidden @lg:inline")}>Copy path</span>
+        </Button>
+      )}
+      {canOpenInFiles && (
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => onOpenInFiles(artifact.path!)}
+          title="Open in Files"
+          className={cn(mobile && "h-11 flex-1")}
+        >
+          <FolderOpen className="h-3.5 w-3.5" />{" "}
+          <span className={cn(!mobile && "hidden @lg:inline")}>
+            Open in Files
+          </span>
+        </Button>
+      )}
+    </>
+  );
+  const hasActions = !!(artifact.url || artifact.path);
+
+  return (
+    <div className="@container flex h-full min-w-0 flex-col">
+      <div className="flex items-center gap-2.5 border-b px-3 py-2.5 sm:px-4">
+        {mobile ? (
+          <Button
+            variant="ghost"
+            size="icon"
+            aria-label="Back to artifacts"
+            onClick={onBack}
+            className="-ml-1 h-11 w-11 shrink-0"
+          >
+            <ChevronLeft className="h-5 w-5" />
+          </Button>
+        ) : (
+          <ArtifactIcon artifact={artifact} />
+        )}
+        <div className="min-w-0 flex-1">
+          <div className="truncate text-[13px] font-medium">
+            {artifact.name}
+          </div>
+          {meta && (
+            <div className="text-muted-foreground truncate font-mono text-[11px]">
+              {meta}
+            </div>
+          )}
+        </div>
+        {!mobile && hasActions && (
+          <div className="flex shrink-0 gap-1.5">{actions}</div>
+        )}
+      </div>
+      <div className="min-h-0 flex-1 overflow-auto">
+        <Body sessionId={sessionId} artifact={artifact} pr={pr} />
+      </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}
+        </div>
+      )}
+    </div>
+  );
+}

package/components/Artifacts/ArtifactRow.tsx

@@ -0,0 +1,147 @@
+"use client";
+
+import {
+  AppWindow,
+  FileCode2,
+  FileText,
+  GitPullRequest,
+  Image as ImageIcon,
+  ListChecks,
+  Play,
+  ScrollText,
+  SquareTerminal,
+  type LucideIcon,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { formatBytes } from "@/lib/share/view";
+import { relativeTime } from "@/lib/schedules/when";
+import type {
+  ArtifactKind,
+  SessionArtifact,
+} from "@/lib/session-artifacts/types";
+import { folderOf, isGone, stateLabel } from "./helpers";
+
+const ICONS: Record<ArtifactKind, LucideIcon> = {
+  plan: ListChecks,
+  pr: GitPullRequest,
+  run: Play,
+  "session-log": ScrollText,
+  page: AppWindow,
+  file: FileText,
+  image: ImageIcon,
+  log: SquareTerminal,
+};
+
+export function ArtifactIcon({ artifact }: { artifact: SessionArtifact }) {
+  const Icon =
+    artifact.kind === "file" && artifact.preview === "html"
+      ? FileCode2
+      : ICONS[artifact.kind];
+  const lead =
+    artifact.kind === "plan" ||
+    artifact.kind === "pr" ||
+    artifact.kind === "run";
+  return (
+    <span
+      className={cn(
+        "bg-muted flex h-7 w-7 shrink-0 items-center justify-center rounded-md",
+        lead ? "text-primary" : "text-muted-foreground"
+      )}
+    >
+      <Icon className="h-3.5 w-3.5" />
+    </span>
+  );
+}
+
+const MONO: ArtifactKind[] = ["file", "image"];
+
+// The line under the name: where it is, or what it is.
+function subline(a: SessionArtifact, mobile: boolean): string {
+  const bits: string[] = [];
+  if (a.by === "you") bits.push("attached by you");
+  if (a.detail) bits.push(a.detail);
+  if (mobile && a.edits)
+    bits.push(`${a.edits} edit${a.edits === 1 ? "" : "s"}`);
+  if (!bits.length && a.folder !== undefined) return a.folder;
+  if (!bits.length && a.path) return folderOf(a.path);
+  if (a.by === "shell") bits.push("made by a command");
+  return bits.join(" · ");
+}
+
+export function ArtifactRow({
+  artifact,
+  pr,
+  selected,
+  mobile,
+  onSelect,
+}: {
+  artifact: SessionArtifact;
+  pr: string | null;
+  selected: boolean;
+  mobile: boolean;
+  onSelect: () => void;
+}) {
+  const label = stateLabel(artifact, pr);
+  const size = artifact.size !== undefined ? formatBytes(artifact.size) : null;
+  const when = artifact.at ? relativeTime(artifact.at) : null;
+  return (
+    <button
+      type="button"
+      data-artifact-id={artifact.id}
+      onClick={onSelect}
+      aria-current={selected || undefined}
+      className={cn(
+        "hover:bg-accent/60 flex w-full items-center gap-2.5 px-3.5 py-2 text-left transition-colors",
+        mobile ? "min-h-14" : "min-h-12",
+        selected && "bg-accent shadow-[inset_2px_0_0_hsl(var(--primary))]",
+        isGone(artifact) && "opacity-55"
+      )}
+    >
+      <ArtifactIcon artifact={artifact} />
+      <span className="min-w-0 flex-1">
+        <span
+          className={cn(
+            "block truncate text-[13px]",
+            MONO.includes(artifact.kind) && artifact.by !== "you" && "font-mono"
+          )}
+        >
+          {artifact.name}
+        </span>
+        <span
+          className={cn(
+            "text-muted-foreground block truncate text-[11.5px]",
+            !artifact.detail && artifact.path && "font-mono"
+          )}
+        >
+          {subline(artifact, mobile)}
+        </span>
+      </span>
+      <span className="text-muted-foreground shrink-0 text-right text-[11.5px] whitespace-nowrap">
+        {!mobile && (artifact.edits || label) && (
+          <span className="block">
+            {artifact.edits
+              ? `${artifact.edits} edit${artifact.edits === 1 ? "" : "s"}`
+              : null}
+            {label && (
+              <span
+                className={cn(
+                  "ml-1 rounded border px-1 text-[10.5px]",
+                  artifact.state === "kept" &&
+                    "border-emerald-500/35 text-emerald-600 dark:text-emerald-400",
+                  artifact.state === "in-pr" && "border-primary/35 text-primary"
+                )}
+              >
+                {label}
+              </span>
+            )}
+          </span>
+        )}
+        <span className="block">
+          {mobile && label ? `${label} · ` : ""}
+          {[size, when].filter(Boolean).join(" · ")}
+          {mobile && " ›"}
+        </span>
+      </span>
+    </button>
+  );
+}