@@ -204,6 +204,80 @@ describe("GeneratedImages", () => {
     );
     view.unmount();
   });
+
+  test("an unloadable tile offers no actions and cannot open", () => {
+    const calls: string[] = [];
+    const unsafe: PartImage = {
+      ...DONE,
+      images: [
+        {
+          id: "x",
+          mediaType: "application/pdf",
+          width: 10,
+          height: 10,
+          url: "data:application/pdf;base64,JVBERi0=",
+        },
+      ],
+    };
+    const view = render(
+      <GeneratedImages
+        part={unsafe}
+        onOpen={(index) => calls.push(`open:${index}`)}
+        onDownload={(index) => calls.push(`download:${index}`)}
+        onCopy={(index) => calls.push(`copy:${index}`)}
+      />,
+    );
+    const tile = slots(view.container, "generated-image")[0];
+    expect(tile?.dataset["state"]).toBe("error");
+    expect(slots(view.container, "generated-image-actions")).toHaveLength(0);
+    expect(tile?.querySelectorAll("button")).toHaveLength(0);
+    act(() => tile?.click());
+    expect(calls).toEqual([]);
+    view.unmount();
+  });
+
+  test("a tile that failed tries again when its source changes", () => {
+    const remote = (url: string): PartImage => ({
+      ...DONE,
+      images: [{ id: "r", mediaType: "image/png", width: 10, height: 10, url }],
+    });
+    const view = render(
+      <GeneratedImages part={remote("https://images.example.com/1.png")} />,
+    );
+    act(() => {
+      view.container.querySelector("img")?.dispatchEvent(new Event("error"));
+    });
+    const tile = () => slots(view.container, "generated-image")[0];
+    expect(tile()?.dataset["state"]).toBe("error");
+    view.rerender(
+      <GeneratedImages part={remote("https://images.example.com/2.png")} />,
+    );
+    expect(tile()?.dataset["state"]).toBe("loading");
+    expect(view.container.querySelector("img")?.getAttribute("src")).toBe(
+      "https://images.example.com/2.png",
+    );
+    view.unmount();
+  });
+
+  test("an image without alt is named after the prompt", () => {
+    const { alt: _alt, ...plain } = image(1);
+    const view = render(
+      <GeneratedImages
+        part={{ ...DONE, images: [plain] }}
+        onOpen={() => {}}
+        onDownload={() => {}}
+      />,
+    );
+    const labels = [...view.container.querySelectorAll("button")].map(
+      (button) => button.getAttribute("aria-label"),
+    );
+    expect(labels).toEqual([
+      "Open Cover for the quarterly review deck, image 1",
+      "Download Cover for the quarterly review deck, image 1",
+      "Open Cover for the quarterly review deck, image 1 full size",
+    ]);
+    view.unmount();
+  });
 });
 
 describe("conversationImageSrc", () => {
@@ -240,4 +314,21 @@ describe("generatedImageViewerItems", () => {
     expect(items[0]?.detail).toBe("1536 × 1024");
     expect(items[1]?.alt).toBe("Cover option 2");
   });
+
+  test("an image with no safe source becomes an item with no source", () => {
+    const items = generatedImageViewerItems({
+      ...DONE,
+      images: [
+        {
+          id: "x",
+          mediaType: "image/png",
+          width: 10,
+          height: 10,
+          url: "javascript:alert(1)",
+        },
+      ],
+    });
+    expect(items).toHaveLength(1);
+    expect(items[0]?.src).toBe(undefined);
+  });
 });
@@ -50,7 +50,7 @@ export function conversationImageSrc(
 }
 
 /** A file name for one image of a part: the prompt's first words, then which image. */
-export function generatedImageFileName(part: PartImage, index: number): string {
+function generatedImageFileName(part: PartImage, index: number): string {
   const image = part.images[index];
   const subtype = image?.mediaType.split("/")[1]?.split(/[;+]/)[0] ?? "";
   const extension = subtype === "" ? "png" : subtype.toLowerCase();
@@ -64,21 +64,30 @@ export function generatedImageFileName(part: PartImage, index: number): string {
   return `${slug === "" ? "image" : slug}-${index + 1}.${extension}`;
 }
 
-/** A part's images as `MediaViewer` items, in the same order as its tiles. */
+/**
+ * A part's images as `MediaViewer` items, in the same order as its tiles. An
+ * image that cannot be shown safely keeps its place but has no `src`, so the
+ * viewer offers no preview and no download for it.
+ */
 export function generatedImageViewerItems(
   part: PartImage,
 ): readonly MediaViewerItem[] {
-  return part.images.map((image, index) => ({
-    name: generatedImageFileName(part, index),
-    mediaType: image.mediaType,
-    src: conversationImageSrc(image) ?? "",
-    detail: `${image.width} × ${image.height}`,
-    ...(image.alt === undefined ? {} : { alt: image.alt }),
-  }));
+  return part.images.map((image, index) => {
+    const src = conversationImageSrc(image);
+    return {
+      name: generatedImageFileName(part, index),
+      mediaType: image.mediaType,
+      ...(src === undefined ? {} : { src }),
+      detail: `${image.width} × ${image.height}`,
+      ...(image.alt === undefined ? {} : { alt: image.alt }),
+    };
+  });
 }
 
 type GeneratedImagesContextValue = {
   readonly seed: number;
+  /** Names an image that has no `alt`. */
+  readonly prompt: string;
   /** Seen generating in this view: its images are revealed by the grain. */
   readonly watched: boolean;
   readonly onOpen: ((index: number, opener: HTMLElement) => void) | undefined;
@@ -100,6 +109,8 @@ function useGeneratedImagesContext(part: string): GeneratedImagesContextValue {
 type GeneratedImageContextValue = {
   readonly index: number;
   readonly label: string;
+  /** It could not be shown, so there is nothing to open, download or copy. */
+  readonly broken: boolean;
 };
 
 const GeneratedImageContext = createContext<GeneratedImageContextValue | null>(
@@ -113,8 +124,19 @@ function seedOf(id: string): number {
   return sum;
 }
 
-function imageLabel(image: ConversationImage, index: number): string {
-  return image.alt ?? `Image ${index + 1}`;
+/** How many of the prompt's words name an image that has no `alt`. */
+const LABEL_WORDS = 6;
+
+function imageLabel(
+  image: ConversationImage,
+  index: number,
+  prompt: string,
+): string {
+  if (image.alt !== undefined) return image.alt;
+  const opening = prompt.trim().split(/\s+/).slice(0, LABEL_WORDS).join(" ");
+  return opening === ""
+    ? `Image ${index + 1}`
+    : `${opening}, image ${index + 1}`;
 }
 
 // `part` and `onCopy` are also DOM attributes; here they mean the image part
@@ -191,15 +213,23 @@ export function GeneratedImages({
 
   return (
     <GeneratedImagesContext.Provider
-      value={{ seed, watched, onOpen, onDownload, onCopy }}
+      value={{
+        seed,
+        prompt: part.prompt,
+        watched,
+        onOpen,
+        onDownload,
+        onCopy,
+      }}
     >
       <div
         data-slot="generated-images"
         data-state={part.state}
         className={cn(
           "flex max-w-2xl flex-col gap-2",
-          // One image shows large but never taller than about 520px: a tall
-          // one narrows instead of becoming a column.
+          // One image shows large: at most 512px (128 steps) wide, and never
+          // taller than 520px (130 steps), so a tall one narrows instead of
+          // becoming a column.
           single &&
             !failed &&
             "max-w-[min(calc(var(--spacing)*128),calc(var(--spacing)*130*var(--generated-images-ratio)))]",
@@ -379,15 +409,24 @@ export function GeneratedImage({
   children,
   ...props
 }: GeneratedImageProps) {
-  const { seed, watched, onOpen } = useGeneratedImagesContext("GeneratedImage");
+  const { seed, prompt, watched, onOpen } =
+    useGeneratedImagesContext("GeneratedImage");
   const reduce = usePrefersReducedMotion();
   const develop = watched && !reduce;
   const [developing, setDeveloping] = useState(develop);
   const [loaded, setLoaded] = useState(false);
   const [failed, setFailed] = useState(false);
   const imageRef = useRef<HTMLImageElement>(null);
   const src = conversationImageSrc(image);
-  const label = imageLabel(image, index);
+  const label = imageLabel(image, index, prompt);
+
+  // A new address for the same tile is a new attempt: it loads afresh.
+  const [attempted, setAttempted] = useState(src);
+  if (attempted !== src) {
+    setAttempted(src);
+    setLoaded(false);
+    setFailed(false);
+  }
 
   // An image that finished loading before React listened for `load` (a
   // cached one) would otherwise stay under the grain.
@@ -423,7 +462,7 @@ export function GeneratedImage({
   );
 
   return (
-    <GeneratedImageContext.Provider value={{ index, label }}>
+    <GeneratedImageContext.Provider value={{ index, label, broken }}>
       <figure
         data-slot="generated-image"
         data-state={broken ? "error" : loaded ? "loaded" : "loading"}
@@ -485,7 +524,8 @@ export type GeneratedImageActionsProps = React.ComponentProps<"div">;
  * Download, Copy and Open over a `GeneratedImage`'s corner, one for each of
  * `GeneratedImages`' `onDownload`, `onCopy` and `onOpen` that is given.
  * Shown on hover or focus, and always where there is no hover. Children add
- * further buttons after them.
+ * further buttons after them. An image that could not be shown gets none of
+ * the three, only the children.
  */
 export function GeneratedImageActions({
   className,
@@ -499,7 +539,8 @@ export function GeneratedImageActions({
   if (tile === null) {
     throw new Error("GeneratedImageActions must be inside GeneratedImage.");
   }
-  const { index, label } = tile;
+  const { index, label, broken } = tile;
+  if (broken && (children === undefined || children === null)) return null;
   return (
     <div
       data-slot="generated-image-actions"
@@ -510,7 +551,7 @@ export function GeneratedImageActions({
       )}
       {...props}
     >
-      {onDownload === undefined ? null : (
+      {broken || onDownload === undefined ? null : (
         <button
           type="button"
           aria-label={`Download ${label}`}
@@ -520,7 +561,7 @@ export function GeneratedImageActions({
           <Download aria-hidden />
         </button>
       )}
-      {onCopy === undefined ? null : (
+      {broken || onCopy === undefined ? null : (
         <button
           type="button"
           aria-label={`Copy ${label}`}
@@ -530,7 +571,7 @@ export function GeneratedImageActions({
           <Copy aria-hidden />
         </button>
       )}
-      {onOpen === undefined ? null : (
+      {broken || onOpen === undefined ? null : (
         <button
           type="button"
           aria-label={`Open ${label} full size`}
 
@@ -17,6 +17,11 @@ function Harness({ style }: { readonly style?: React.CSSProperties }) {
   return <MediaViewer viewer={viewer} style={style} />;
 }
 
+function One({ item }: { readonly item: MediaViewerItem }) {
+  const viewer = useMediaViewer({ items: [item], defaultIndex: 0 });
+  return <MediaViewer viewer={viewer} />;
+}
+
 let root: Root | null = null;
 let container: HTMLElement | null = null;
 
@@ -96,4 +101,93 @@ describe("MediaViewer", () => {
     root = null;
     expect(page.getAttribute("style") ?? "").not.toContain("overflow");
   });
+
+  const KINDS: readonly {
+    readonly item: MediaViewerItem;
+    readonly slot: string;
+    readonly download: boolean;
+  }[] = [
+    {
+      item: {
+        name: "clip.mp4",
+        mediaType: "video/mp4",
+        src: "https://media.example.com/clip.mp4",
+      },
+      slot: "media-viewer-video",
+      download: true,
+    },
+    {
+      item: {
+        name: "memo.mp3",
+        mediaType: "audio/mpeg",
+        src: "https://media.example.com/memo.mp3",
+      },
+      slot: "media-viewer-audio",
+      download: true,
+    },
+    {
+      item: {
+        name: "report.pdf",
+        mediaType: "application/pdf",
+        src: "https://media.example.com/report.pdf",
+      },
+      slot: "media-viewer-page",
+      download: true,
+    },
+    {
+      item: {
+        name: "notes.txt",
+        mediaType: "text/plain",
+        src: "https://media.example.com/notes.txt",
+        text: "First line",
+      },
+      slot: "media-viewer-text",
+      download: true,
+    },
+    {
+      // A data: document would run script in the frame.
+      item: {
+        name: "inline.pdf",
+        mediaType: "application/pdf",
+        src: "data:application/pdf;base64,JVBERi0=",
+      },
+      slot: "media-viewer-empty",
+      download: false,
+    },
+    {
+      item: {
+        name: "script.pdf",
+        mediaType: "application/pdf",
+        src: "javascript:alert(1)",
+      },
+      slot: "media-viewer-empty",
+      download: false,
+    },
+    {
+      // An image that cannot be loaded, such as an unsafe generated one.
+      item: { name: "missing.png", mediaType: "image/png" },
+      slot: "media-viewer-empty",
+      download: false,
+    },
+  ];
+
+  for (const { item, slot, download } of KINDS) {
+    test(`${item.name} shows as ${slot}`, () => {
+      render(<One item={item} />);
+      const content = dialog()?.querySelector<HTMLElement>(
+        "[data-slot='media-viewer-figure'] > :first-child",
+      );
+      expect(content?.dataset["slot"]).toBe(slot);
+      if (slot === "media-viewer-text") {
+        expect(content?.textContent).toBe(item.text);
+        expect(content?.getAttribute("aria-label")).toBe(item.name);
+      } else if (slot === "media-viewer-empty") {
+        expect(content?.textContent).toBe("No preview for this file.");
+      } else {
+        expect(content?.getAttribute("src")).toBe(item.src ?? null);
+      }
+      const link = dialog()?.querySelector("a[download]");
+      expect(link === null || link === undefined ? false : true).toBe(download);
+    });
+  }
 });