@saadnvd1/agent-os 0.3.595 → 0.3.596

package/components/Artifacts/ArtifactsPanel.tsx

@@ -0,0 +1,244 @@
+"use client";
+
+import {
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type KeyboardEvent,
+} from "react";
+import { Package } from "lucide-react";
+import { cn } from "@/lib/utils";
+import {
+  artifactContentUrl,
+  useSessionArtifacts,
+} from "@/data/session-artifacts";
+import { openable, type SessionArtifact } from "@/lib/session-artifacts/types";
+import { ArtifactPreview } from "./ArtifactPreview";
+import { ArtifactRow } from "./ArtifactRow";
+import {
+  counts,
+  FILTER_LABELS,
+  groups,
+  prNumber,
+  step,
+  visible,
+  type ArtifactFilter,
+} from "./helpers";
+
+// Images that can be shown, as tiles; the rest are rows like any file.
+function ImageTiles({
+  sessionId,
+  images,
+  selected,
+  onSelect,
+}: {
+  sessionId: string;
+  images: SessionArtifact[];
+  selected: string | null;
+  onSelect: (id: string) => void;
+}) {
+  return (
+    <div className="grid grid-cols-3 gap-1.5 px-3.5 pt-1 pb-2.5">
+      {images.map((a) => (
+        <button
+          key={a.id}
+          type="button"
+          data-artifact-id={a.id}
+          onClick={() => onSelect(a.id)}
+          title={a.name}
+          className={cn(
+            "bg-muted relative aspect-[4/3] overflow-hidden rounded-lg border",
+            selected === a.id && "ring-primary ring-2"
+          )}
+        >
+          {/* eslint-disable-next-line @next/next/no-img-element */}
+          <img
+            src={artifactContentUrl(sessionId, a.id)}
+            alt={a.name}
+            loading="lazy"
+            className="h-full w-full object-cover"
+          />
+          <span className="bg-background/80 text-muted-foreground absolute right-0 bottom-0 left-0 truncate px-1.5 py-0.5 text-left text-[10px]">
+            {a.by === "you" ? "by you" : a.name}
+          </span>
+        </button>
+      ))}
+    </div>
+  );
+}
+
+export function ArtifactsPanel({
+  sessionId,
+  mobile,
+  onOpenInFiles,
+}: {
+  sessionId: string;
+  mobile: boolean;
+  onOpenInFiles?: (path: string) => void;
+}) {
+  const { data, isPending, isError, error } = useSessionArtifacts(sessionId);
+  const [filter, setFilter] = useState<ArtifactFilter>("all");
+  const [showGone, setShowGone] = useState(false);
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const listRef = useRef<HTMLDivElement>(null);
+
+  const all = useMemo(() => data?.artifacts ?? [], [data]);
+  const list = useMemo(
+    () => visible(all, filter, showGone),
+    [all, filter, showGone]
+  );
+  const tally = useMemo(() => counts(all, showGone), [all, showGone]);
+  const pr = prNumber(all);
+  const goneCount = all.length - visible(all, "all", false).length;
+  // On a wide pane the first row is open until another is picked.
+  const selected =
+    all.find((a) => a.id === selectedId) ?? (mobile ? null : (list[0] ?? null));
+  const selectedKey = selected?.id ?? null;
+
+  useEffect(() => {
+    if (!selectedKey) return;
+    listRef.current
+      ?.querySelector(`[data-artifact-id="${selectedKey}"]`)
+      ?.scrollIntoView({ block: "nearest" });
+  }, [selectedKey]);
+
+  const onKeyDown = (e: KeyboardEvent) => {
+    if (e.key !== "ArrowDown" && e.key !== "ArrowUp") return;
+    e.preventDefault();
+    setSelectedId(step(list, selectedKey, e.key === "ArrowDown" ? 1 : -1));
+  };
+
+  if (isPending)
+    return <div className="bg-muted/40 m-4 h-40 animate-pulse rounded-lg" />;
+  if (isError)
+    return <p className="text-destructive p-4 text-sm">{error.message}</p>;
+
+  if (mobile && selected)
+    return (
+      <ArtifactPreview
+        sessionId={sessionId}
+        artifact={selected}
+        pr={pr}
+        mobile
+        onBack={() => setSelectedId(null)}
+        onOpenInFiles={onOpenInFiles}
+      />
+    );
+
+  const header = (
+    <div className="bg-background sticky top-0 z-10 px-3.5 pt-3 pb-2">
+      <div className="flex items-baseline gap-1.5 text-[13.5px] font-semibold">
+        Artifacts
+        <span className="text-muted-foreground font-normal">{tally.all}</span>
+        {goneCount > 0 && (
+          <button
+            type="button"
+            onClick={() => setShowGone(!showGone)}
+            className="text-muted-foreground hover:text-foreground ml-auto py-1 text-xs font-normal"
+          >
+            {showGone ? "Hide gone" : `Show gone (${goneCount})`}
+          </button>
+        )}
+      </div>
+      <div className="scrollbar-none mt-2.5 flex gap-1.5 overflow-x-auto">
+        {(Object.keys(FILTER_LABELS) as ArtifactFilter[])
+          .filter((f) => f === "all" || tally[f])
+          .map((f) => (
+            <button
+              key={f}
+              type="button"
+              onClick={() => setFilter(f)}
+              className={cn(
+                "shrink-0 rounded-full border px-2.5 py-1 text-xs whitespace-nowrap",
+                mobile && "min-h-9 px-3",
+                filter === f
+                  ? "bg-foreground text-background border-transparent"
+                  : "text-muted-foreground"
+              )}
+            >
+              {FILTER_LABELS[f]}
+              {f !== "all" && ` ${tally[f]}`}
+            </button>
+          ))}
+      </div>
+    </div>
+  );
+
+  const empty = (
+    <div className="text-muted-foreground flex flex-col items-center gap-2 px-6 py-12 text-center text-sm">
+      <Package className="h-5 w-5" />
+      {data.unreachable
+        ? `This session runs on ${data.host}, which isn't reachable right now.`
+        : all.length
+          ? "Nothing here with these filters."
+          : "Nothing yet. Files this session writes, pages it renders, images, job logs and its PR show up here."}
+    </div>
+  );
+
+  const rows = (
+    <div
+      ref={listRef}
+      tabIndex={mobile ? undefined : 0}
+      onKeyDown={mobile ? undefined : onKeyDown}
+      className="h-full overflow-y-auto outline-none"
+    >
+      {header}
+      {list.length === 0
+        ? empty
+        : groups(list).map((g) => {
+            const tiles =
+              g.label === "Images" ? g.items.filter((a) => openable(a)) : [];
+            const rest = g.items.filter((a) => !tiles.includes(a));
+            return (
+              <section key={g.label}>
+                <h3 className="text-muted-foreground px-3.5 pt-3 pb-1 text-[11px] font-medium tracking-wider uppercase">
+                  {g.label}
+                  {g.label === "Images" && ` · ${g.items.length}`}
+                </h3>
+                {tiles.length > 0 && (
+                  <ImageTiles
+                    sessionId={sessionId}
+                    images={tiles}
+                    selected={selectedKey}
+                    onSelect={setSelectedId}
+                  />
+                )}
+                {rest.map((a) => (
+                  <ArtifactRow
+                    key={a.id}
+                    artifact={a}
+                    pr={pr}
+                    mobile={mobile}
+                    selected={a.id === selectedKey}
+                    onSelect={() => setSelectedId(a.id)}
+                  />
+                ))}
+              </section>
+            );
+          })}
+    </div>
+  );
+
+  if (mobile) return rows;
+  return (
+    <div className="flex h-full min-h-0">
+      <div className="w-[340px] shrink-0 border-r">{rows}</div>
+      <div className="min-w-0 flex-1">
+        {selected ? (
+          <ArtifactPreview
+            sessionId={sessionId}
+            artifact={selected}
+            pr={pr}
+            mobile={false}
+            onOpenInFiles={onOpenInFiles}
+          />
+        ) : (
+          <p className="text-muted-foreground p-6 text-sm">
+            Select an artifact to preview it.
+          </p>
+        )}
+      </div>
+    </div>
+  );
+}

package/components/Artifacts/helpers.test.ts

@@ -0,0 +1,90 @@
+import { describe, expect, it } from "vitest";
+import type { SessionArtifact } from "@/lib/session-artifacts/types";
+import {
+  counts,
+  folderOf,
+  groups,
+  prNumber,
+  stateLabel,
+  step,
+  visible,
+} from "./helpers";
+
+const a = (
+  id: string,
+  kind: SessionArtifact["kind"],
+  state: SessionArtifact["state"] = "live"
+): SessionArtifact => ({
+  id,
+  kind,
+  name: id,
+  at: 0,
+  state,
+  preview: "text",
+});
+
+const all = [
+  a("plan", "plan"),
+  { ...a("pr", "pr"), name: "PR #231" },
+  a("f1", "file"),
+  a("f2", "file", "in-pr"),
+  a("f3", "file", "gone"),
+  a("p1", "page"),
+  a("i1", "image", "kept"),
+  a("l1", "log"),
+];
+
+describe("artifacts view", () => {
+  it("hides what's gone unless asked, and filters by type", () => {
+    expect(visible(all, "all", false).map((x) => x.id)).toEqual([
+      "plan",
+      "pr",
+      "f1",
+      "p1",
+      "i1",
+      "l1",
+    ]);
+    expect(visible(all, "files", true).map((x) => x.id)).toEqual([
+      "f1",
+      "f2",
+      "f3",
+    ]);
+    expect(counts(all, false)).toEqual({
+      all: 6,
+      files: 1,
+      pages: 1,
+      images: 1,
+      logs: 1,
+    });
+  });
+
+  it("groups in the panel's order, leaving out empty groups", () => {
+    expect(
+      groups(visible(all, "all", false)).map((g) => [g.label, g.items.length])
+    ).toEqual([
+      ["Plan & PR", 2],
+      ["Pages", 1],
+      ["Files", 1],
+      ["Images", 1],
+      ["Logs", 1],
+    ]);
+  });
+
+  it("labels where a file is", () => {
+    expect(prNumber(all)).toBe("231");
+    expect(stateLabel(all[3], "231")).toBe("in PR #231");
+    expect(stateLabel(all[3], null)).toBe("committed");
+    expect(stateLabel(all[6], null)).toBe("kept copy");
+    expect(stateLabel(all[2], null)).toBeNull();
+    expect(folderOf("~/r/src/a.ts")).toBe("~/r/src/");
+  });
+
+  it("moves with the arrow keys without wrapping", () => {
+    const list = all.slice(0, 3);
+    expect(step(list, null, 1)).toBe("plan");
+    expect(step(list, "plan", 1)).toBe("pr");
+    expect(step(list, "plan", -1)).toBe("plan");
+    expect(step(list, "f1", 1)).toBe("f1");
+    expect(step([], null, 1)).toBeNull();
+  });
+});

package/components/Artifacts/helpers.ts

@@ -0,0 +1,99 @@
+import type {
+  ArtifactKind,
+  SessionArtifact,
+} from "@/lib/session-artifacts/types";
+
+export type ArtifactFilter = "all" | "files" | "pages" | "images" | "logs";
+
+const FILTER_KINDS: Record<Exclude<ArtifactFilter, "all">, ArtifactKind[]> = {
+  files: ["file"],
+  pages: ["page"],
+  images: ["image"],
+  logs: ["log"],
+};
+
+export const FILTER_LABELS: Record<ArtifactFilter, string> = {
+  all: "All",
+  files: "Files",
+  pages: "Pages",
+  images: "Images",
+  logs: "Logs",
+};
+
+const GROUPS: { label: string; kinds: ArtifactKind[] }[] = [
+  { label: "Plan & PR", kinds: ["plan", "pr", "run", "session-log"] },
+  { label: "Pages", kinds: ["page"] },
+  { label: "Files", kinds: ["file"] },
+  { label: "Images", kinds: ["image"] },
+  { label: "Logs", kinds: ["log"] },
+];
+
+export const isGone = (a: SessionArtifact) =>
+  a.state === "gone" || a.state === "in-pr";
+
+export function visible(
+  all: SessionArtifact[],
+  filter: ArtifactFilter,
+  showGone: boolean
+): SessionArtifact[] {
+  return all.filter(
+    (a) =>
+      (showGone || !isGone(a)) &&
+      (filter === "all" || FILTER_KINDS[filter].includes(a.kind))
+  );
+}
+
+export function groups(list: SessionArtifact[]) {
+  return GROUPS.map((g) => ({
+    label: g.label,
+    items: list.filter((a) => g.kinds.includes(a.kind)),
+  })).filter((g) => g.items.length);
+}
+
+// How many of each filter there are, among what's shown.
+export function counts(all: SessionArtifact[], showGone: boolean) {
+  const shown = visible(all, "all", showGone);
+  return Object.fromEntries(
+    (Object.keys(FILTER_LABELS) as ArtifactFilter[]).map((f) => [
+      f,
+      visible(shown, f, true).length,
+    ])
+  ) as Record<ArtifactFilter, number>;
+}
+
+// The PR's number, for "in PR #n".
+export const prNumber = (all: SessionArtifact[]) =>
+  all.find((a) => a.kind === "pr")?.name.match(/#(\d+)/)?.[1] ?? null;
+
+export function stateLabel(a: SessionArtifact, pr: string | null) {
+  switch (a.state) {
+    case "kept":
+      return "kept copy";
+    case "in-pr":
+      return pr ? `in PR #${pr}` : "committed";
+    case "gone":
+      return "gone";
+    case "outside":
+      return "outside";
+    default:
+      return null;
+  }
+}
+
+// The folder a file is in, for the line under its name.
+export const folderOf = (p: string) => {
+  const i = p.lastIndexOf("/");
+  return i > 0 ? p.slice(0, i + 1) : p;
+};
+
+// The next row for the arrow keys, wrapping at neither end.
+export function step(
+  list: SessionArtifact[],
+  current: string | null,
+  by: 1 | -1
+): string | null {
+  if (!list.length) return null;
+  const i = list.findIndex((a) => a.id === current);
+  if (i === -1) return list[0].id;
+  return list[Math.min(list.length - 1, Math.max(0, i + by))].id;
+}

package/components/Artifacts/index.ts

@@ -0,0 +1 @@
+export { ArtifactsPanel } from "./ArtifactsPanel";

package/components/Chat/ArtifactFrame.tsx

@@ -25,12 +25,15 @@ export function artifactHeight(data: unknown, max: number): number | null {
 // the bounds; filling, it takes its container.
 export function ArtifactFrame({
   artifactId,
+  src,
   title,
   fill = false,
   maxHeight = 720,
   className,
 }: {
   artifactId: string;
+  // Another sandboxed URL for the same kind of page (a session's HTML file).
+  src?: string;
   title: string;
   fill?: boolean;
   maxHeight?: number;
@@ -62,7 +65,7 @@ export function ArtifactFrame({
   return (
     <iframe
       ref={ref}
-      src={artifactUrl(artifactId)}
+      src={src ?? artifactUrl(artifactId)}
       title={title}
       sandbox={ARTIFACT_IFRAME_SANDBOX}
       referrerPolicy="no-referrer"

package/components/Pane/DesktopTabBar.tsx

@@ -17,8 +17,7 @@ import { PaneMenu } from "./PaneMenu";
 import { HostBadge } from "@/components/Hosts/HostBadge";
 import { usePaneBarSlots } from "./PaneBarSlots";
 import { ChatBookmarksButton } from "@/components/Bookmarks/ChatBookmarksButton";
-
-type ViewMode = "terminal" | "files" | "git" | "workers" | "log";
+import type { ViewMode } from "@/contexts/PaneContext";
 
 interface Tab {
   id: string;
@@ -172,6 +171,7 @@ export function DesktopTabBar({
         )}
         {session?.working_directory && (
           <PaneViewToggle
+            sessionId={session.id}
             viewMode={viewMode}
             isLocalSession={isLocalSession}
             isConductor={isConductor}

package/components/Pane/MobileTabBar.tsx

@@ -28,6 +28,7 @@ import {
   TextSearch,
   Users,
   ScrollText,
+  Package,
 } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { useAwayQuery } from "@/data/away";
@@ -38,13 +39,13 @@ import { HostBadge } from "@/components/Hosts/HostBadge";
 import { shareUiActions } from "@/stores/shareUi";
 import { MoveMenuItems } from "@/components/Tasks/MoveMenuItems";
 import { ChatBookmarksButton } from "@/components/Bookmarks/ChatBookmarksButton";
-
-type ViewMode = "terminal" | "files" | "git" | "workers" | "log";
+import type { ViewMode } from "@/contexts/PaneContext";
 
 interface ViewModeButtonProps {
   mode: ViewMode;
   currentMode: ViewMode;
   icon: LucideIcon;
+  label?: string;
   onClick: (mode: ViewMode) => void;
   badge?: React.ReactNode;
 }
@@ -53,11 +54,15 @@ function ViewModeButton({
   mode,
   currentMode,
   icon: Icon,
+  label,
   onClick,
   badge,
 }: ViewModeButtonProps) {
   return (
     <button
+      type="button"
+      aria-label={label}
+      aria-pressed={currentMode === mode}
       onClick={(e) => {
         e.stopPropagation();
         onClick(mode);
@@ -378,6 +383,13 @@ export function MobileTabBar({
               onClick={onViewModeChange}
             />
           )}
+          <ViewModeButton
+            mode="artifacts"
+            currentMode={viewMode}
+            icon={Package}
+            label="Artifacts"
+            onClick={onViewModeChange}
+          />
           {hasLog && (
             <ViewModeButton
               mode="log"

package/components/Pane/PaneViewToggle.tsx

@@ -1,16 +1,23 @@
 "use client";
 
-import { FolderOpen, GitBranch, Home, ScrollText, Users } from "lucide-react";
+import {
+  FolderOpen,
+  GitBranch,
+  Home,
+  Package,
+  ScrollText,
+  Users,
+} from "lucide-react";
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
-
-type ViewMode = "terminal" | "files" | "git" | "workers" | "log";
+import type { ViewMode } from "@/contexts/PaneContext";
 
 interface PaneViewToggleProps {
+  sessionId?: string;
   viewMode: ViewMode;
   isLocalSession: boolean;
   isConductor: boolean;
@@ -67,6 +74,7 @@ function ToggleButton({
 // Files, git and the shell drawer read this machine's disk, so a remote
 // session only gets the terminal (and workers).
 export function PaneViewToggle({
+  sessionId,
   viewMode,
   isLocalSession,
   isConductor,
@@ -113,6 +121,15 @@ export function PaneViewToggle({
           </ToggleButton>
         </>
       )}
+      {sessionId && (
+        <ToggleButton
+          label="Artifacts"
+          active={viewMode === "artifacts"}
+          onClick={() => onViewModeChange("artifacts")}
+        >
+          <Package className="h-3.5 w-3.5" />
+        </ToggleButton>
+      )}
       {hasLog && (
         <ToggleButton
           label="Log"

package/components/Pane/index.tsx

@@ -7,7 +7,7 @@ import { getProviderDefinition } from "@/lib/providers/registry";
 import type { TabData } from "@/lib/panes";
 import { useRef, useCallback, useEffect, memo, useMemo } from "react";
 import dynamic from "next/dynamic";
-import { usePanes } from "@/contexts/PaneContext";
+import { usePanes, type ViewMode } from "@/contexts/PaneContext";
 import { useViewport } from "@/hooks/useViewport";
 import type { TerminalHandle } from "@/components/Terminal";
 import type { Session, Project } from "@/lib/db";
@@ -37,6 +37,13 @@ import { useDemoMode } from "@/data/demo";
 import { DemoNotice } from "@/components/DemoNotice";
 
 // Dynamic imports for client-only components with loading states
+const ArtifactsPanel = dynamic(
+  () =>
+    import("@/components/Artifacts/ArtifactsPanel").then(
+      (mod) => mod.ArtifactsPanel
+    ),
+  { ssr: false }
+);
 const LogDocument = dynamic(
   () =>
     import("@/components/SessionLogs/LogDocument").then(
@@ -98,8 +105,6 @@ interface PaneProps {
   onAttachSession?: (terminal: TerminalHandle, session: Session) => void;
 }
 
-type ViewMode = "terminal" | "files" | "git" | "workers" | "log";
-
 export const Pane = memo(function Pane({
   paneId,
   sessions,
@@ -231,6 +236,15 @@ export const Pane = memo(function Pane({
     }
   }, [fileOpenRequest, isFocused, session, fileEditor]);
 
+  // An artifact's file, opened in the Files view.
+  const openInFiles = useCallback(
+    (path: string) => {
+      setViewMode("files");
+      fileEditor.openFile(path);
+    },
+    [setViewMode, fileEditor]
+  );
+
   const handleFocus = useCallback(() => {
     focusPane(paneId);
   }, [focusPane, paneId]);
@@ -524,6 +538,15 @@ export const Pane = memo(function Pane({
             <LogDocument sessionId={session.id} />
           )}
 
+          {/* Artifacts */}
+          {viewMode === "artifacts" && session && (
+            <ArtifactsPanel
+              sessionId={session.id}
+              mobile
+              onOpenInFiles={isLocalSession ? openInFiles : undefined}
+            />
+          )}
+
           {/* Workers */}
           {viewMode === "workers" && session && (
             <ConductorPanel
@@ -586,6 +609,15 @@ export const Pane = memo(function Pane({
                     <LogDocument sessionId={session.id} />
                   )}
 
+                  {/* Artifacts */}
+                  {viewMode === "artifacts" && session && (
+                    <ArtifactsPanel
+                      sessionId={session.id}
+                      mobile={false}
+                      onOpenInFiles={isLocalSession ? openInFiles : undefined}
+                    />
+                  )}
+
                   {/* Workers */}
                   {viewMode === "workers" && session && (
                     <ConductorPanel

package/contexts/PaneContext.tsx

@@ -26,7 +26,13 @@ import {
 } from "@/lib/panes";
 import { useViewport } from "@/hooks/useViewport";
 
-export type ViewMode = "terminal" | "files" | "git" | "workers" | "log";
+export type ViewMode =
+  | "terminal"
+  | "files"
+  | "git"
+  | "workers"
+  | "log"
+  | "artifacts";
 
 export interface PaneViewState {
   viewMode: ViewMode;

package/data/session-artifacts/index.ts

@@ -0,0 +1,2 @@
+export * from "./keys";
+export * from "./queries";

package/data/session-artifacts/keys.ts

@@ -0,0 +1,7 @@
+export const sessionArtifactKeys = {
+  all: ["session-artifacts"] as const,
+  session: (sessionId: string) =>
+    [...sessionArtifactKeys.all, sessionId] as const,
+  content: (url: string) =>
+    [...sessionArtifactKeys.all, "content", url] as const,
+};