refactor(cli): simplify dispose check in ArtifactRuntimeController

First, update the reload test to properly validate dispose and DOM cleanup behavior, then add gallery images and a carousel slider to the Artemis II lunar flyby block with auto-rotation and pause on interaction.

Author: Sayhi-bzb

agent-html/artifacts/nasa-artemis-ii/data.ts

@@ -312,6 +312,48 @@ export const mediaAssets = {
       sourceUrl: "https://www.nasa.gov/image-detail/amf-art002e009301/",
       src: "https://images-assets.nasa.gov/image/art002e009301/art002e009301~large.jpg?crop=faces%2Cfocalpoint&fit=clip&h=1280&w=1920",
     },
+    gallery: [
+      {
+        alt: "Earth setting behind the Moon's horizon during the Artemis II lunar flyby.",
+        caption:
+          "Earthset through Orion's window makes the Moon a foreground landmark.",
+        credit: "Credit: NASA",
+        sourceUrl: "https://www.nasa.gov/image-detail/art002e009288/",
+        src: "https://images-assets.nasa.gov/image/art002e009288/art002e009288~large.jpg?crop=faces%2Cfocalpoint&fit=clip&h=1280&w=1920",
+      },
+      {
+        alt: "The Moon backlit by the Sun during an in-space solar eclipse, with Orion visible in the foreground.",
+        caption:
+          "A solar eclipse seen from Orion turns the flyby into a spacecraft-scale scene.",
+        credit: "Credit: NASA",
+        sourceUrl: "https://www.nasa.gov/image-detail/art002e009573/",
+        src: "https://images-assets.nasa.gov/image/art002e009573/art002e009573~large.jpg?crop=faces%2Cfocalpoint&fit=clip&h=1280&w=1920",
+      },
+      {
+        alt: "The Moon and Earth captured in one frame during the Artemis II lunar flyby.",
+        caption:
+          "Moon and Earth share one frame as Orion crosses lunar space.",
+        credit: "Credit: NASA",
+        sourceUrl: "https://www.nasa.gov/gallery/lunar-flyby/",
+        src: "https://images-assets.nasa.gov/image/art002e009567/art002e009567~large.jpg?crop=faces%2Cfocalpoint&fit=clip&h=1280&w=1920",
+      },
+      {
+        alt: "A detailed lunar surface view with a distant Earth setting in the background.",
+        caption:
+          "Cratered terrain and distant Earth compress the scale of the flyby.",
+        credit: "Credit: NASA",
+        sourceUrl: "https://www.nasa.gov/image-detail/art002e009289/",
+        src: "https://images-assets.nasa.gov/image/art002e009289/art002e009289~large.jpg?crop=faces%2Cfocalpoint&fit=clip&h=1280&w=1920",
+      },
+      {
+        alt: "The Moon peeking above the Orion spacecraft window sill during Artemis II.",
+        caption:
+          "The Orion window frame keeps the lunar pass tied to the crew's viewpoint.",
+        credit: "Credit: NASA",
+        sourceUrl: "https://www.nasa.gov/gallery/lunar-flyby/",
+        src: "https://images-assets.nasa.gov/image/art002e012278/art002e012278~large.jpg?crop=faces%2Cfocalpoint&fit=clip&h=1280&w=1920",
+      },
+    ],
   },
   opening: {
     alt: "Earth seen from Orion during Artemis II.",

agent-html/artifacts/nasa-artemis-ii/lunar-flyby.block.tsx

@@ -1,8 +1,30 @@
+import { useEffect, useState } from "react"
+
 import { Badge } from "../../components/ui/badge"
+import {
+  Carousel,
+  type CarouselApi,
+  CarouselContent,
+  CarouselItem,
+} from "../../components/ui/carousel"
 
 import { lunarMediaBeats, mediaAssets } from "./data"
 
 export function LunarFlybyBlock() {
+  const gallery = mediaAssets.lunarFlyby.gallery
+  const [carouselApi, setCarouselApi] = useState<CarouselApi>()
+  const [isCarouselPaused, setIsCarouselPaused] = useState(false)
+
+  useEffect(() => {
+    if (!carouselApi || isCarouselPaused || gallery.length < 2) return
+
+    const intervalId = window.setInterval(() => {
+      carouselApi.scrollNext()
+    }, 4000)
+
+    return () => window.clearInterval(intervalId)
+  }, [carouselApi, gallery.length, isCarouselPaused])
+
   return (
     <section className="canvas-stack-lg">
       <div className="canvas-stack-md">
@@ -20,17 +42,39 @@ export function LunarFlybyBlock() {
           the Earth-Moon relationship.
         </p>
 
-        <figure className="canvas-stack-sm">
-          <img
-            alt={mediaAssets.lunarFlyby.earthset.alt}
-            className="max-h-screen w-full rounded-md object-cover"
-            src={mediaAssets.lunarFlyby.earthset.src}
-          />
-          <p className="canvas-text-caption text-muted-foreground">
-            {mediaAssets.lunarFlyby.earthset.caption}{" "}
-            {mediaAssets.lunarFlyby.earthset.credit}.
-          </p>
-        </figure>
+        <Carousel
+          onFocus={() => setIsCarouselPaused(true)}
+          onBlur={() => setIsCarouselPaused(false)}
+          onMouseEnter={() => setIsCarouselPaused(true)}
+          onMouseLeave={() => setIsCarouselPaused(false)}
+          onPointerCancel={() => setIsCarouselPaused(false)}
+          onPointerDown={() => setIsCarouselPaused(true)}
+          onPointerUp={() => setIsCarouselPaused(false)}
+          opts={{ align: "start", loop: true }}
+          setApi={setCarouselApi}
+        >
+          <CarouselContent>
+            {gallery.map((asset, index) => (
+              <CarouselItem key={asset.src}>
+                <figure className="canvas-stack-sm">
+                  <div className="relative aspect-[16/10] max-h-screen overflow-hidden rounded-md bg-muted">
+                    <img
+                      alt={asset.alt}
+                      className="h-full w-full object-cover"
+                      src={asset.src}
+                    />
+                    <div className="absolute top-3 left-3 rounded-full bg-background/85 px-3 py-1 text-xs text-foreground shadow-sm backdrop-blur">
+                      {index + 1} / {gallery.length}
+                    </div>
+                  </div>
+                  <p className="canvas-text-caption text-muted-foreground">
+                    {asset.caption} {asset.credit}.
+                  </p>
+                </figure>
+              </CarouselItem>
+            ))}
+          </CarouselContent>
+        </Carousel>
       </div>
 
       <div className="canvas-grid-gap md:grid-cols-2">

packages/cli/src/host/artifact/artifact-runtime.test.ts

@@ -256,19 +256,41 @@ describe("ArtifactRuntimeController", () => {
   })
 
   it("reloads the mounted artifact when the registry version changes", async () => {
+    const firstMountedElement = { remove: vi.fn() }
+    const secondMountedElement = { remove: vi.fn() }
+    const element = {
+      appendChild: vi.fn(),
+      ownerDocument: {
+        createElement: vi
+          .fn()
+          .mockReturnValueOnce(firstMountedElement)
+          .mockReturnValueOnce(secondMountedElement),
+      },
+      replaceChildren: vi.fn(),
+    } as unknown as HTMLElement
+    const firstDispose = vi.fn()
+    const secondDispose = vi.fn()
     const importModule = vi
       .fn()
-      .mockResolvedValueOnce(moduleWithDispose())
-      .mockResolvedValueOnce(moduleWithDispose())
+      .mockResolvedValueOnce(moduleWithDispose(firstDispose))
+      .mockResolvedValueOnce(moduleWithDispose(secondDispose))
     const controller = new ArtifactRuntimeController({ importModule })
-    controller.setElement(createElement())
+    controller.setElement(element)
 
     await controller.load("agent-html/artifacts/demo.artifact.tsx", 1)
     await controller.load("agent-html/artifacts/demo.artifact.tsx", 2)
 
     expect(importModule).toHaveBeenCalledTimes(2)
     expect(importModule.mock.calls[0]?.[0]).toContain("v=1")
     expect(importModule.mock.calls[1]?.[0]).toContain("v=2")
+    expect(firstDispose).toHaveBeenCalledOnce()
+    expect(secondDispose).not.toHaveBeenCalled()
+    expect(firstMountedElement.remove).toHaveBeenCalledOnce()
+    expect(secondMountedElement.remove).not.toHaveBeenCalled()
+    expect(controller.getSnapshot()).toMatchObject({
+      mountedFilePath: "agent-html/artifacts/demo.artifact.tsx",
+      status: "mounted",
+    })
   })
 
   it("does not retry module graph failures on a timer", async () => {

packages/cli/src/host/artifact/artifact-runtime.ts

@@ -355,7 +355,7 @@ export class ArtifactRuntimeController {
       })
       this.#onMounted()
 
-      if (previousDispose && previousMountedFilePath !== filePath) {
+      if (previousDispose) {
         await this.#disposePrevious({
           dispose: previousDispose,
           filePath: previousMountedFilePath ?? filePath,