@adecore/agents-react 0.40.3 → 0.40.5

package/dist/chat/attachments.js

@@ -80,13 +80,26 @@ function readAsBase64(file) {
 function nameFor(file, index) {
   return file.name || `pasted-${Date.now()}-${index + 1}.${file.type.split('/')[1] ?? 'bin'}`;
 }
+function fileMime(file) {
+  const image = attachmentImageMime({
+    name: file.name,
+    mime: file.type
+  });
+  if (image !== null) {
+    return image;
+  }
+  if (file.type === '' || file.type === 'application/octet-stream' || file.type === 'binary/octet-stream') {
+    const extension = /\.(heic|heif)$/i.exec(file.name)?.[1]?.toLowerCase();
+    if (extension !== undefined) {
+      return `image/${extension}`;
+    }
+  }
+  return file.type || 'application/octet-stream';
+}
 export async function readAttachments(files) {
   return Promise.all(files.map(async (file, index) => ({
     name: nameFor(file, index),
-    mime: attachmentImageMime({
-      name: file.name,
-      mime: file.type
-    }) ?? (file.type || 'application/octet-stream'),
+    mime: fileMime(file),
     data: await readAsBase64(file)
   })));
 }

package/dist/chat/chat-client.js

@@ -398,7 +398,8 @@ export class ChatClient {
       const page = result.history === undefined ? undefined : {
         history: result.history,
         pending: result.pending ?? [],
-        subagents: result.subagents ?? []
+        subagents: result.subagents ?? [],
+        outline: result.outline ?? []
       };
       this.sink.reset(chatId, result.info, result.items, page);
     }

package/dist/chat/image-display.d.ts

@@ -0,0 +1,4 @@
+/** Converts HEIC and HEIF to a browser-readable PNG for display, preserving other formats and the source bytes. */
+export declare function imageForDisplay(blob: Blob): Promise<Blob>;
+/** Makes embedded HEIC/HEIF data URLs readable in a sandboxed HTML preview without changing the saved document. */
+export declare function imageDocumentForDisplay(html: string): Promise<string>;

package/dist/chat/image-display.js

@@ -0,0 +1,39 @@
+/** Converts HEIC and HEIF to a browser-readable PNG for display, preserving other formats and the source bytes. */
+export async function imageForDisplay(blob) {
+  if (!/^image\/(?:heic|heif)(?:-sequence)?$/i.test(blob.type)) {
+    return blob;
+  }
+  // The CSP build decodes in a worker without requiring unsafe-eval on the host page.
+  const {
+    heicTo
+  } = await import('heic-to/csp');
+  return heicTo({
+    blob,
+    type: 'image/png'
+  });
+}
+/** Makes embedded HEIC/HEIF data URLs readable in a sandboxed HTML preview without changing the saved document. */
+export async function imageDocumentForDisplay(html) {
+  const sources = [...new Set(html.match(/data:image\/(?:heic|heif)(?:-sequence)?;base64,[A-Za-z0-9+/=]+/gi) ?? [])];
+  let result = html;
+  for (const source of sources) {
+    try {
+      const comma = source.indexOf(',');
+      const mime = source.slice(5, source.indexOf(';')).toLowerCase();
+      const bytes = Uint8Array.from(atob(source.slice(comma + 1)), character => character.charCodeAt(0));
+      const blob = await imageForDisplay(new Blob([bytes], {
+        type: mime
+      }));
+      const converted = await new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = () => resolve(String(reader.result));
+        reader.onerror = () => reject(reader.error);
+        reader.readAsDataURL(blob);
+      });
+      result = result.replaceAll(source, converted);
+    } catch {
+      // A broken picture must not prevent the rest of the document from opening.
+    }
+  }
+  return result;
+}

package/dist/chat/logic/scrubber.d.ts

@@ -1,5 +1,5 @@
-import type { ChatBookmark } from '@adecore/agent-contracts';
-import type { TimelineRow } from './timeline.js';
+import type { ChatBookmark, ChatItem } from '@adecore/agent-contracts';
+import { type TimelineRow } from './timeline.js';
 export type TickKind = 'person' | 'wake' | 'bookmark';
 export interface ScrubberTick {
     id: string;
@@ -15,7 +15,8 @@ export declare const TICK_HEIGHT_PX = 2;
 export declare const STRIP_WIDTH_PX = 24;
 export declare const STRIP_INSET_PX = 8;
 export declare const STRIP_CLEARANCE_PX: number;
-export declare function ticksOf(rows: readonly TimelineRow[], marks?: ReadonlyMap<string, ChatBookmark>): ScrubberTick[];
+export declare const EARLIER_ROW = -1;
+export declare function ticksOf(rows: readonly TimelineRow[], marks?: ReadonlyMap<string, ChatBookmark>, earlier?: readonly ChatItem[], bookmarks?: readonly ChatBookmark[]): ScrubberTick[];
 export interface TickSlot {
     first: number;
     last: number;

package/dist/chat/logic/scrubber.js

@@ -1,3 +1,4 @@
+import { agentTurnLabel } from './timeline.js';
 import { DEFAULT_READING_WIDTH, readingMeasure } from '../reading-width.js';
 /* With fewer messages than this the thread is short enough to scroll through, and the strip is noise. */
 export const SCRUBBER_MIN_TICKS = 3;
@@ -15,9 +16,56 @@ const WIDTH_NEAR_PERSON_PX = 12;
 const WIDTH_NEAR_WAKE_PX = 8;
 const WIDTH_PERSON_PX = 8;
 const WIDTH_WAKE_PX = 5;
-/* `marks` is what `bookmarkRows` answers: the bookmark drawn at a row, by row id. */
-export function ticksOf(rows, marks = new Map()) {
-  return rows.flatMap((row, rowIndex) => {
+/* Below every row, so a tick before the rows this client holds sorts first and its stretch reaches the first row of the thread. */
+export const EARLIER_ROW = -1;
+/* A message before the rows this client holds, as the outline (`outlineItems`) has it; its row id is the one the thread will draw it with. */
+function earlierTick(item, bookmarks) {
+  const bookmark = bookmarks.get(item.id) ?? null;
+  const rowIndex = EARLIER_ROW;
+  if (item.kind === 'user') {
+    const text = item.text !== '' ? item.text : (item.attachments ?? []).map(attachment => attachment.name).join(', ');
+    return {
+      id: item.id,
+      rowIndex,
+      kind: 'person',
+      text,
+      createdAt: item.createdAt,
+      turnId: item.turnId,
+      bookmark
+    };
+  }
+  if (item.kind === 'turn' && ((item.taskIds?.length ?? 0) > 0 || (item.messageFrom?.length ?? 0) > 0)) {
+    return {
+      id: `start-${item.id}`,
+      rowIndex,
+      kind: 'wake',
+      text: agentTurnLabel(item),
+      createdAt: item.createdAt,
+      turnId: item.id,
+      bookmark: null
+    };
+  }
+  if (item.kind === 'assistant' && bookmark !== null) {
+    return {
+      id: item.id,
+      rowIndex,
+      kind: 'bookmark',
+      text: item.text,
+      createdAt: item.createdAt,
+      turnId: item.turnId,
+      bookmark
+    };
+  }
+  return null;
+}
+/*
+ * `marks` is what `bookmarkRows` answers: the bookmark drawn at a row, by row id. `earlier` is the
+ * outline of the thread before `rows`, and `bookmarks` the chat's, which mark the ticks of that part.
+ */
+export function ticksOf(rows, marks = new Map(), earlier = [], bookmarks = []) {
+  const byItem = new Map(bookmarks.map(bookmark => [bookmark.itemId, bookmark]));
+  const before = earlier.flatMap(item => earlierTick(item, byItem) ?? []);
+  const held = rows.flatMap((row, rowIndex) => {
     const bookmark = marks.get(row.id) ?? null;
     if (row.kind === 'user') {
       // A message of only attachments still has a place in the thread; its names stand in for the text.
@@ -70,6 +118,7 @@ export function ticksOf(rows, marks = new Map()) {
       bookmark
     }];
   });
+  return before.length === 0 ? held : [...before, ...held];
 }
 /* `marked` and `found` say per message whether it has a bookmark and whether a find hit falls under it; absent, none has. */
 export function layoutTicks(kinds, height, marked = [], found = []) {

package/dist/chat/thumbnails.js

@@ -2,6 +2,7 @@ import { c as _c } from "react/compiler-runtime";
 import i18next from 'i18next';
 import { useEffect, useState } from 'react';
 import { uploadPreviewUrl } from './attachments.js';
+import { imageForDisplay } from './image-display.js';
 /* The edge of a composer thumbnail: a few times the 56 px it is drawn at, so a sharp screen still gets a sharp one. */
 export const THUMBNAIL_PX = 256;
 /* The square in the middle of an image that a thumbnail shows, the same part `object-cover` would. */
@@ -36,16 +37,18 @@ function dataUrlOf(blob) {
  * cannot be decoded this way (an SVG, a browser without `OffscreenCanvas`) falls back to the image.
  */
 async function makeThumbnail(upload) {
+  let image = null;
   try {
-    const bitmap = await createImageBitmap(new Blob([bytesOf(upload.data)], {
+    image = await imageForDisplay(new Blob([bytesOf(upload.data)], {
       type: upload.mime
     }));
+    const bitmap = await createImageBitmap(image);
     const crop = thumbnailCrop(bitmap.width, bitmap.height);
     const canvas = new OffscreenCanvas(crop.out, crop.out);
     const context = canvas.getContext('2d');
     if (!context) {
       bitmap.close();
-      return uploadPreviewUrl(upload);
+      return await dataUrlOf(image);
     }
     context.drawImage(bitmap, crop.sx, crop.sy, crop.size, crop.size, 0, 0, crop.out, crop.out);
     bitmap.close();
@@ -53,7 +56,7 @@ async function makeThumbnail(upload) {
       type: 'image/png'
     }));
   } catch {
-    return uploadPreviewUrl(upload);
+    return image === null ? uploadPreviewUrl(upload) : dataUrlOf(image);
   }
 }
 // Keyed by the upload itself, so a composer that mounts again finds it and a removed file lets it go.

package/dist/chat/ui/DisplayImage.d.ts

@@ -0,0 +1,5 @@
+import { type ComponentProps } from 'react';
+type ImageProps = ComponentProps<'img'>;
+/** An image with a HEIC/HEIF fallback for browsers without a native decoder. Remote sources must allow cross-origin reads. */
+export declare function DisplayImage({ src, onError, ...props }: ImageProps): import("react").JSX.Element;
+export {};

package/dist/chat/ui/DisplayImage.js

@@ -0,0 +1,109 @@
+import { c as _c } from "react/compiler-runtime";
+import { useEffect, useState } from 'react';
+import { imageDocumentForDisplay, imageForDisplay } from '../image-display.js';
+/** An image with a HEIC/HEIF fallback for browsers without a native decoder. Remote sources must allow cross-origin reads. */
+import { jsx as _jsx } from "react/jsx-runtime";
+export function DisplayImage(t0) {
+  const $ = _c(9);
+  let onError;
+  let props;
+  let src;
+  if ($[0] !== t0) {
+    ({
+      src,
+      onError,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = onError;
+    $[2] = props;
+    $[3] = src;
+  } else {
+    onError = $[1];
+    props = $[2];
+    src = $[3];
+  }
+  const t1 = typeof src === "string" ? src : undefined;
+  let t2;
+  if ($[4] !== onError || $[5] !== props || $[6] !== src || $[7] !== t1) {
+    t2 = /*#__PURE__*/_jsx(ImageSource, {
+      ...props,
+      src: src,
+      onError: onError
+    }, t1);
+    $[4] = onError;
+    $[5] = props;
+    $[6] = src;
+    $[7] = t1;
+    $[8] = t2;
+  } else {
+    t2 = $[8];
+  }
+  return t2;
+}
+function ImageSource({
+  src,
+  onError,
+  ...props
+}) {
+  const [retry, setRetry] = useState(null);
+  const [decoded, setDecoded] = useState(null);
+  const converted = decoded !== null && decoded.source === src ? decoded.url : null;
+  useEffect(() => {
+    if (typeof src !== 'string' || retry !== src) {
+      return;
+    }
+    let cancelled = false;
+    let url = null;
+    const convert = async () => {
+      try {
+        const embedded = await imageDocumentForDisplay(src);
+        if (cancelled) {
+          return;
+        }
+        if (embedded !== src) {
+          setDecoded({
+            source: src,
+            url: embedded
+          });
+          return;
+        }
+        const response = await fetch(src, {
+          referrerPolicy: 'no-referrer'
+        });
+        if (!response.ok) {
+          return;
+        }
+        const blob = await response.blob();
+        const image = await imageForDisplay(blob);
+        if (cancelled || image === blob) {
+          return;
+        }
+        url = URL.createObjectURL(image);
+        setDecoded({
+          source: src,
+          url
+        });
+      } catch {
+        // The failed image keeps the browser's alt text when it cannot be read or decoded.
+      }
+    };
+    void convert();
+    return () => {
+      cancelled = true;
+      if (url !== null) {
+        URL.revokeObjectURL(url);
+      }
+    };
+  }, [src, retry]);
+  return /*#__PURE__*/_jsx("img", {
+    src: converted ?? src,
+    ...props,
+    onError: event => {
+      if (typeof src === 'string' && retry !== src) {
+        setRetry(src);
+      }
+      onError?.(event);
+    }
+  });
+}

package/dist/chat/ui/ImageView.js

@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next';
 import clsx from 'clsx';
 import { ImageOff, Minus, Plus, RotateCcw } from 'lucide-react';
 import { ButtonGroup, CloseButton, Dialog, Icon, IconButton, Tooltip } from '@adecore/ui';
+import { DisplayImage } from './DisplayImage.js';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const MIN_SCALE = 1;
 const MAX_SCALE = 8;
@@ -404,7 +405,7 @@ function Lightbox(t0) {
   }
   let t39;
   if ($[67] !== alt || $[68] !== src || $[69] !== t38) {
-    t39 = /*#__PURE__*/_jsx("img", {
+    t39 = /*#__PURE__*/_jsx(DisplayImage, {
       src: src,
       alt: alt,
       draggable: false,
@@ -581,7 +582,7 @@ export function ImageThumb(t0) {
   }
   let t8;
   if ($[19] !== alt || $[20] !== src || $[21] !== t7) {
-    t8 = /*#__PURE__*/_jsx("img", {
+    t8 = /*#__PURE__*/_jsx(DisplayImage, {
       src: src,
       alt: alt,
       className: t7

package/dist/chat/ui/Markdown.js

@@ -19,6 +19,7 @@ import { useChatHost } from '../../host.js';
 import { useFileLinkCwd, useFileLinkScopeId, useFileLinkTarget, useOpenFileLink } from './file-links.js';
 import { ErrorBoundary, FileIcon, Icon } from '@adecore/ui';
 import { useTranslation } from 'react-i18next';
+import { DisplayImage } from './DisplayImage.js';
 import { jsx as _jsx } from "react/jsx-runtime";
 const ShellCodeBlockReplyContext = createContext(null);
 const BlockCodeContext = createContext(false);
@@ -330,7 +331,7 @@ function MarkdownImage(t0) {
   if (HostImage === undefined || path === null) {
     let t2;
     if ($[3] !== alt || $[4] !== src) {
-      t2 = /*#__PURE__*/_jsx("img", {
+      t2 = /*#__PURE__*/_jsx(DisplayImage, {
         src: src,
         alt: alt
       });
@@ -366,7 +367,7 @@ function PlainImage(t0) {
   } = t0;
   let t1;
   if ($[0] !== alt || $[1] !== src) {
-    t1 = /*#__PURE__*/_jsx("img", {
+    t1 = /*#__PURE__*/_jsx(DisplayImage, {
       src: src,
       alt: alt
     });

package/dist/chat/ui/Timeline.js

@@ -13,7 +13,7 @@ import { registerItemJumper, registerMessageStepper, registerTimeline, registerT
 import { useTimelineFlash } from '../timeline-flash.js';
 import { useChatPreferences } from '../preferences.js';
 import { readingMeasure, readingWidthStyle } from '../reading-width.js';
-import { SCRUBBER_MIN_TICKS, STRIP_INSET_PX, STRIP_WIDTH_PX, messagesInView, stepMessage, threadPaddingLeft, STRIP_CLEARANCE_PX, tickOfRow, ticksOf, ticksWithHits } from '../logic/scrubber.js';
+import { SCRUBBER_MIN_TICKS, STRIP_INSET_PX, STRIP_WIDTH_PX, messagesInView, stepMessage, threadPaddingLeft, STRIP_CLEARANCE_PX, tickOfRow, ticksOf, ticksWithHits, EARLIER_ROW } from '../logic/scrubber.js';
 import { EMPTY_TARGET, readTimelineTarget, revealUiReplyBlock, uiReplyJump, withCurrentText } from '../logic/timeline-target.js';
 import { forkRefusal } from '../logic/fork.js';
 import { UiReplyNavigationContext } from './reply-context.js';
@@ -410,11 +410,12 @@ export function Timeline({
   const items = useChatRow(chatId, row_0 => row_0?.structure);
   const activeTurnId = useChatRow(chatId, row_1 => row_1?.info.activeTurnId ?? null);
   const bookmarks = useChatRow(chatId, row_2 => row_2?.bookmarks);
-  const visuals = useChatRow(chatId, row_3 => row_3?.visuals);
+  const outlineBefore = useChatRow(chatId, row_3 => row_3?.outlineBefore);
+  const visuals = useChatRow(chatId, row_4 => row_4?.visuals);
   const forkedTurns = useForkedTurns(chatId);
-  const info = useChatRow(chatId, row_4 => row_4?.info ?? null);
-  const historyPending = useChatRow(chatId, row_5 => row_5?.historyPending === true);
-  const cursor = useChatRow(chatId, row_6 => row_6?.history?.cursor ?? null);
+  const info = useChatRow(chatId, row_5 => row_5?.info ?? null);
+  const historyPending = useChatRow(chatId, row_6 => row_6?.historyPending === true);
+  const cursor = useChatRow(chatId, row_7 => row_7?.history?.cursor ?? null);
   const scope = useChatScope();
   const {
     id: scopeId,
@@ -499,7 +500,7 @@ export function Timeline({
   // A chat that took a turn before is one whose thread has not come in yet, not one to greet.
   const welcome = !loadingHistory && welcomes && empty && (info === null || info.usage.turns === 0 && info.activeTurnId === null);
   const marks = useMemo(() => bookmarkRows(rows, bookmarks ?? [], items ?? {}), [rows, bookmarks, items]);
-  const ticks = useMemo(() => ticksOf(rows, marks), [rows, marks]);
+  const ticks = useMemo(() => ticksOf(rows, marks, outlineBefore, bookmarks), [rows, marks, outlineBefore, bookmarks]);
   // A message a jump is on its way to; it may first have to open the turn its reply folded into.
   const [seeking, setSeeking] = useState(null);
   const [landing, setLanding] = useState(null);
@@ -601,7 +602,7 @@ export function Timeline({
     }
     // Ref measurements can change offsets after render. Commit those offsets before the first paint.
     const measured = virtualizer.getVirtualItems();
-    if (virtualRows.length !== measured.length || virtualRows.some((row_7, index_1) => row_7.key !== measured[index_1]?.key || row_7.start !== measured[index_1]?.start || row_7.size !== measured[index_1]?.size)) {
+    if (virtualRows.length !== measured.length || virtualRows.some((row_8, index_1) => row_8.key !== measured[index_1]?.key || row_8.start !== measured[index_1]?.start || row_8.size !== measured[index_1]?.size)) {
       settleLayout();
       return;
     }
@@ -640,16 +641,16 @@ export function Timeline({
       return;
     }
     const anchor = anchorRef.current;
-    const index_2 = moved && anchor !== null && !followRef.current ? rows.findIndex(row_8 => row_8.id === anchor.id) : -1;
+    const index_2 = moved && anchor !== null && !followRef.current ? rows.findIndex(row_9 => row_9.id === anchor.id) : -1;
     if (anchor !== null && index_2 !== -1) {
       virtualizer.getTotalSize();
       element_3.scrollTop = virtualizer.measurementsCache[index_2].start - anchor.offset;
       return;
     }
-    const row_9 = virtualizer.getVirtualItemForOffset(element_3.scrollTop);
-    anchorRef.current = row_9 === undefined ? null : {
-      id: String(row_9.key),
-      offset: row_9.start - element_3.scrollTop
+    const row_10 = virtualizer.getVirtualItemForOffset(element_3.scrollTop);
+    anchorRef.current = row_10 === undefined ? null : {
+      id: String(row_10.key),
+      offset: row_10.start - element_3.scrollTop
     };
   });
   // Close to the top, the page before goes in; again after each page that left too little above the reader.
@@ -759,10 +760,11 @@ export function Timeline({
     if (!tick_0) {
       return;
     }
-    if (tick_0.bookmark !== null) {
+    // A message before the rows this client holds comes in page by page until its row is there.
+    if (tick_0.bookmark !== null || tick_0.rowIndex === EARLIER_ROW) {
       setLanding(null);
       setSeeking({
-        itemId: tick_0.bookmark.itemId,
+        itemId: tick_0.bookmark?.itemId ?? tick_0.id,
         key: keyOf(chatId)
       });
       return;
@@ -798,7 +800,7 @@ export function Timeline({
       }
       return;
     }
-    const index_6 = rows.findIndex(row_10 => row_10.id === seeking.itemId);
+    const index_6 = rows.findIndex(row_11 => row_11.id === seeking.itemId);
     if (index_6 !== -1) {
       setSeeking(null);
       showRowAtTop(virtualizer, followRef, index_6);
@@ -872,9 +874,9 @@ export function Timeline({
       turnId: turnId_0,
       target: target_0
     } = revealing;
-    const changes = target_0 === 'changes' ? rows.findIndex(row_11 => row_11.kind === 'changed-files' && row_11.turnId === turnId_0) : -1;
+    const changes = target_0 === 'changes' ? rows.findIndex(row_12 => row_12.kind === 'changed-files' && row_12.turnId === turnId_0) : -1;
     const opening = order?.map(id_0 => items?.[id_0]).find(item_0 => item_0?.kind === 'user' && item_0.turnId === turnId_0);
-    const found_0 = changes !== -1 ? changes : rows.findIndex(row_12 => row_12.id === opening?.id || row_12.id === `start-${turnId_0}` || row_12.id === `fold-${turnId_0}`);
+    const found_0 = changes !== -1 ? changes : rows.findIndex(row_13 => row_13.id === opening?.id || row_13.id === `start-${turnId_0}` || row_13.id === `fold-${turnId_0}`);
     if (found_0 !== -1) {
       setRevealing(null);
       showRowAtTop(virtualizer, followRef, found_0);
@@ -903,8 +905,8 @@ export function Timeline({
       if (fork === null) {
         return false;
       }
-      const row_13 = useChats.getState().byKey[keyOf(chatId)];
-      return forkRefusal(row_13?.info ?? null, row_13?.structure[turnId_2]) === null;
+      const row_14 = useChats.getState().byKey[keyOf(chatId)];
+      return forkRefusal(row_14?.info ?? null, row_14?.structure[turnId_2]) === null;
     },
     fork: turnId_3 => fork?.(chatId, turnId_3)
   }), [keyOf, chatId, fork]);
@@ -1028,22 +1030,22 @@ export function Timeline({
                     children: /*#__PURE__*/_jsx(FindRevealContext.Provider, {
                       value: chatFind.reveal,
                       children: virtualRows.map(virtualRow_1 => {
-                        const row_14 = rows[virtualRow_1.index];
+                        const row_15 = rows[virtualRow_1.index];
                         return /*#__PURE__*/_jsx(ThreadRow, {
-                          row: row_14,
+                          row: row_15,
                           previous: virtualRow_1.index > 0 ? rows[virtualRow_1.index - 1] : null,
                           index: virtualRow_1.index,
                           top: virtualRow_1.start,
                           measure: virtualizer.measureElement,
                           chatId: chatId,
-                          flashNonce: flash !== null && flashedRow === row_14.id ? flash.nonce : null,
-                          bookmark: marks.get(row_14.id) ?? null,
+                          flashNonce: flash !== null && flashedRow === row_15.id ? flash.nonce : null,
+                          bookmark: marks.get(row_15.id) ?? null,
                           toggleGroup: groups.toggle,
                           toggleTurn: turns.toggle,
                           toggleSubagent: subagents.toggle,
                           openSubagent: openSubagent,
                           openConversation: openConversation
-                        }, row_14.id);
+                        }, row_15.id);
                       })
                     })
                   })

package/dist/chat/ui/VisualFrame.js

@@ -7,6 +7,7 @@ import { Spinner, useMeasuredWidth } from '@adecore/ui';
 import { useChatHost } from '../../host.js';
 import { useChatScope } from '../../scope.js';
 import { DEFAULT_HEIGHT_PX, initialVisualContentHeight, rememberVisualHeight } from '../logic/visual-height.js';
+import { imageDocumentForDisplay } from '../image-display.js';
 import { VisualBridge } from '../visual-bridge.js';
 import { VisualViewportController } from '../visual-viewport.js';
 import { useVisualTheme } from './visual-theme.js';
@@ -223,7 +224,7 @@ function PageFrame(t0) {
         visual: {
           maxHeight
         },
-        page: page(),
+        page: page().then(imageDocumentForDisplay),
         theme: opening.theme,
         mayOpenLink: () => personActsIn(frame),
         openLink: url => visuals?.openLink(url),

package/dist/chat/ui/index.d.ts

@@ -2,6 +2,7 @@ export { AccountPill } from './AccountPill.js';
 export { AnsiOutput } from './AnsiOutput.js';
 export { BookmarkSubmenu } from './BookmarkSubmenu.js';
 export { ChatActivity, StatusIcon } from './ChatActivity.js';
+export { DisplayImage } from './DisplayImage.js';
 export { CodeBlock } from './CodeBlock.js';
 export { Composer } from './Composer.js';
 export { type ComposerInputHandle, ComposerInput, type InputSelection } from './ComposerInput.js';

package/dist/chat/ui/index.js

@@ -3,6 +3,7 @@ export { AccountPill } from './AccountPill.js';
 export { AnsiOutput } from './AnsiOutput.js';
 export { BookmarkSubmenu } from './BookmarkSubmenu.js';
 export { ChatActivity, StatusIcon } from './ChatActivity.js';
+export { DisplayImage } from './DisplayImage.js';
 export { CodeBlock } from './CodeBlock.js';
 export { Composer } from './Composer.js';
 export { ComposerInput } from './ComposerInput.js';

package/dist/chat/ui/intelligent-ui/renderers/content.js

@@ -12,6 +12,7 @@ import { ImageThumb } from '../../ImageView.js';
 import { uiChildrenOf, uiNodeLabel, uiNodeText, uiUrlDomain } from '../node-text.js';
 import { useTruncated } from '../use-truncated.js';
 import { useHostAttachmentUrl } from '../../../../host-hooks.js';
+import { DisplayImage } from '../../DisplayImage.js';
 // The number of every source by its node id, which the list counts in its own order.
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const SourceNumbers = createContext(new Map());
@@ -445,7 +446,7 @@ export function CompareRenderer(t0) {
       }
       let t8;
       if ($[15] !== first.url || $[16] !== t6 || $[17] !== t7) {
-        t8 = /*#__PURE__*/_jsx("img", {
+        t8 = /*#__PURE__*/_jsx(DisplayImage, {
           src: t5,
           alt: t6,
           draggable: false,
@@ -471,7 +472,7 @@ export function CompareRenderer(t0) {
       }
       let t11;
       if ($[22] !== second.url || $[23] !== t10) {
-        t11 = /*#__PURE__*/_jsx("img", {
+        t11 = /*#__PURE__*/_jsx(DisplayImage, {
           src: t9,
           alt: t10,
           draggable: false,

package/dist/images.d.ts

@@ -0,0 +1,2 @@
+export { imageDocumentForDisplay, imageForDisplay } from './chat/image-display.js';
+export { DisplayImage } from './chat/ui/DisplayImage.js';

package/dist/images.js

@@ -0,0 +1,2 @@
+export { imageDocumentForDisplay, imageForDisplay } from './chat/image-display.js';
+export { DisplayImage } from './chat/ui/DisplayImage.js';

package/dist/state/chats.d.ts

@@ -8,6 +8,7 @@ export interface ChatState {
     history?: ChatHistoryPage;
     waitingBefore?: string[];
     subagentsBefore?: string[];
+    outlineBefore?: ChatItem[];
     bookmarks?: ChatBookmark[];
     visuals?: ChatVisual[];
 }
@@ -16,6 +17,7 @@ export interface ChatPage {
     history: ChatHistoryPage;
     pending: ChatItem[];
     subagents?: ChatSubagentItem[];
+    outline?: ChatItem[];
 }
 export type ChatsById = Record<string, ChatState>;
 export type ChatStatuses = Record<string, Pick<ChatState, 'info'>>;

package/dist/state/chats.js

@@ -29,7 +29,8 @@ function stateOf(info, items, page) {
     order,
     history: page.history,
     waitingBefore: before.map(item => item.id),
-    subagentsBefore: subagents.map(item => item.id)
+    subagentsBefore: subagents.map(item => item.id),
+    outlineBefore: (page.outline ?? []).filter(item => !(item.id in byId))
   };
 }
 /* An older host names no place in the thread, and it always hands over the whole of it. */
@@ -83,6 +84,7 @@ export function prependPage(state, cursor, page) {
       history: _history,
       waitingBefore: _waitingBefore,
       subagentsBefore: _subagentsBefore,
+      outlineBefore: _outlineBefore,
       ...rest
     } = loaded;
     return {
@@ -94,6 +96,7 @@ export function prependPage(state, cursor, page) {
   }
   const waitingBefore = (state.waitingBefore ?? []).filter(id => !olderIds.has(id));
   const subagentsBefore = (state.subagentsBefore ?? []).filter(id => !olderIds.has(id));
+  const outlineBefore = (state.outlineBefore ?? []).filter(item => !olderIds.has(item.id));
   return {
     ...loaded,
     items,
@@ -101,7 +104,8 @@ export function prependPage(state, cursor, page) {
     order,
     history: page.history,
     waitingBefore,
-    subagentsBefore
+    subagentsBefore,
+    outlineBefore
   };
 }
 /* The requests that still wait, oldest first: those from before the page this client holds, then the thread's own. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adecore/agents-react",
-  "version": "0.40.3",
+  "version": "0.40.5",
   "description": "React agent chat threads, composers, approvals, provider accounts and usage views.",
   "type": "module",
   "exports": {
@@ -58,6 +58,11 @@
       "source": "./src/theme.css",
       "style": "./src/theme.css",
       "default": "./dist/theme.css"
+    },
+    "./images": {
+      "source": "./src/images.ts",
+      "types": "./dist/images.d.ts",
+      "default": "./dist/images.js"
     }
   },
   "scripts": {
@@ -67,11 +72,11 @@
     "test:visuals": "bun --config=integration.bunfig.toml --conditions=source test ./src/chat/visual-viewport.integration.test.ts"
   },
   "dependencies": {
-    "@adecore/agent-contracts": "0.40.3",
-    "@adecore/editor": "0.40.3",
-    "@adecore/editor-react": "0.40.3",
-    "@adecore/intelligent-ui": "0.40.3",
-    "@adecore/merge": "0.40.3",
+    "@adecore/agent-contracts": "0.40.5",
+    "@adecore/editor": "0.40.5",
+    "@adecore/editor-react": "0.40.5",
+    "@adecore/intelligent-ui": "0.40.5",
+    "@adecore/merge": "0.40.5",
     "@codemirror/commands": "^6.11.1",
     "@codemirror/language": "^6.13.1",
     "@codemirror/state": "^6.7.6",
@@ -82,6 +87,7 @@
     "@pierre/diffs": "^1.6.1",
     "@tanstack/react-virtual": "^3.14.23",
     "clsx": "^2.1.1",
+    "heic-to": "1.6.6",
     "lucide-react": "^1.61.0",
     "maplibre-gl": "^6.16.0",
     "pele": "1.8.0",
@@ -94,14 +100,14 @@
     "zustand": "^5.0.16"
   },
   "peerDependencies": {
-    "@adecore/ui": "^0.40.3",
+    "@adecore/ui": "^0.40.5",
     "i18next": "^26.4.2",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
     "react-i18next": "^17.0.15"
   },
   "devDependencies": {
-    "@adecore/ui": "0.40.3",
+    "@adecore/ui": "0.40.5",
     "@types/bun": "^1.4.4",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",

package/src/chat/attachments.ts

@@ -95,11 +95,29 @@ function nameFor(file: File, index: number): string {
     return file.name || `pasted-${Date.now()}-${index + 1}.${file.type.split('/')[1] ?? 'bin'}`;
 }
 
+function fileMime(file: File): string {
+    const image = attachmentImageMime({ name: file.name, mime: file.type });
+
+    if (image !== null) {
+        return image;
+    }
+
+    if (file.type === '' || file.type === 'application/octet-stream' || file.type === 'binary/octet-stream') {
+        const extension = /\.(heic|heif)$/i.exec(file.name)?.[1]?.toLowerCase();
+
+        if (extension !== undefined) {
+            return `image/${extension}`;
+        }
+    }
+
+    return file.type || 'application/octet-stream';
+}
+
 export async function readAttachments(files: File[]): Promise<ChatAttachmentUpload[]> {
     return Promise.all(
         files.map(async (file, index) => ({
             name: nameFor(file, index),
-            mime: attachmentImageMime({ name: file.name, mime: file.type }) ?? (file.type || 'application/octet-stream'),
+            mime: fileMime(file),
             data: await readAsBase64(file)
         }))
     );

package/src/chat/chat-client.ts

@@ -443,7 +443,9 @@ export class ChatClient {
             }
         } else {
             const page =
-                result.history === undefined ? undefined : { history: result.history, pending: result.pending ?? [], subagents: result.subagents ?? [] };
+                result.history === undefined
+                    ? undefined
+                    : { history: result.history, pending: result.pending ?? [], subagents: result.subagents ?? [], outline: result.outline ?? [] };
 
             this.sink.reset(chatId, result.info, result.items, page);
         }

package/src/chat/image-display.ts

@@ -0,0 +1,38 @@
+/** Converts HEIC and HEIF to a browser-readable PNG for display, preserving other formats and the source bytes. */
+export async function imageForDisplay(blob: Blob): Promise<Blob> {
+    if (!/^image\/(?:heic|heif)(?:-sequence)?$/i.test(blob.type)) {
+        return blob;
+    }
+
+    // The CSP build decodes in a worker without requiring unsafe-eval on the host page.
+    const { heicTo } = await import('heic-to/csp');
+
+    return heicTo({ blob, type: 'image/png' });
+}
+
+/** Makes embedded HEIC/HEIF data URLs readable in a sandboxed HTML preview without changing the saved document. */
+export async function imageDocumentForDisplay(html: string): Promise<string> {
+    const sources = [...new Set(html.match(/data:image\/(?:heic|heif)(?:-sequence)?;base64,[A-Za-z0-9+/=]+/gi) ?? [])];
+    let result = html;
+
+    for (const source of sources) {
+        try {
+            const comma = source.indexOf(',');
+            const mime = source.slice(5, source.indexOf(';')).toLowerCase();
+            const bytes = Uint8Array.from(atob(source.slice(comma + 1)), (character) => character.charCodeAt(0));
+            const blob = await imageForDisplay(new Blob([bytes], { type: mime }));
+            const converted = await new Promise<string>((resolve, reject) => {
+                const reader = new FileReader();
+                reader.onload = () => resolve(String(reader.result));
+                reader.onerror = () => reject(reader.error);
+                reader.readAsDataURL(blob);
+            });
+
+            result = result.replaceAll(source, converted);
+        } catch {
+            // A broken picture must not prevent the rest of the document from opening.
+        }
+    }
+
+    return result;
+}

package/src/chat/logic/scrubber.ts

@@ -1,5 +1,5 @@
-import type { ChatBookmark } from '@adecore/agent-contracts';
-import type { TimelineRow } from './timeline';
+import type { ChatBookmark, ChatItem } from '@adecore/agent-contracts';
+import { agentTurnLabel, type TimelineRow } from './timeline';
 import { DEFAULT_READING_WIDTH, readingMeasure } from '../reading-width';
 
 // The strip of ticks at the left edge of a chat view, as numbers; the component only draws what comes out of here.
@@ -9,7 +9,7 @@ export type TickKind = 'person' | 'wake' | 'bookmark';
 
 export interface ScrubberTick {
     id: string;
-    /* The row of the timeline the tick jumps to. */
+    /* The row of the timeline the tick jumps to; `EARLIER_ROW` for a message before the part of the thread this client holds. */
     rowIndex: number;
     kind: TickKind;
     text: string;
@@ -41,9 +41,45 @@ const WIDTH_NEAR_WAKE_PX = 8;
 const WIDTH_PERSON_PX = 8;
 const WIDTH_WAKE_PX = 5;
 
-/* `marks` is what `bookmarkRows` answers: the bookmark drawn at a row, by row id. */
-export function ticksOf(rows: readonly TimelineRow[], marks: ReadonlyMap<string, ChatBookmark> = new Map()): ScrubberTick[] {
-    return rows.flatMap((row, rowIndex): ScrubberTick[] => {
+/* Below every row, so a tick before the rows this client holds sorts first and its stretch reaches the first row of the thread. */
+export const EARLIER_ROW = -1;
+
+/* A message before the rows this client holds, as the outline (`outlineItems`) has it; its row id is the one the thread will draw it with. */
+function earlierTick(item: ChatItem, bookmarks: ReadonlyMap<string, ChatBookmark>): ScrubberTick | null {
+    const bookmark = bookmarks.get(item.id) ?? null;
+    const rowIndex = EARLIER_ROW;
+
+    if (item.kind === 'user') {
+        const text = item.text !== '' ? item.text : (item.attachments ?? []).map((attachment) => attachment.name).join(', ');
+
+        return { id: item.id, rowIndex, kind: 'person', text, createdAt: item.createdAt, turnId: item.turnId, bookmark };
+    }
+
+    if (item.kind === 'turn' && ((item.taskIds?.length ?? 0) > 0 || (item.messageFrom?.length ?? 0) > 0)) {
+        return { id: `start-${item.id}`, rowIndex, kind: 'wake', text: agentTurnLabel(item), createdAt: item.createdAt, turnId: item.id, bookmark: null };
+    }
+
+    if (item.kind === 'assistant' && bookmark !== null) {
+        return { id: item.id, rowIndex, kind: 'bookmark', text: item.text, createdAt: item.createdAt, turnId: item.turnId, bookmark };
+    }
+
+    return null;
+}
+
+/*
+ * `marks` is what `bookmarkRows` answers: the bookmark drawn at a row, by row id. `earlier` is the
+ * outline of the thread before `rows`, and `bookmarks` the chat's, which mark the ticks of that part.
+ */
+export function ticksOf(
+    rows: readonly TimelineRow[],
+    marks: ReadonlyMap<string, ChatBookmark> = new Map(),
+    earlier: readonly ChatItem[] = [],
+    bookmarks: readonly ChatBookmark[] = []
+): ScrubberTick[] {
+    const byItem = new Map(bookmarks.map((bookmark) => [bookmark.itemId, bookmark]));
+    const before = earlier.flatMap((item) => earlierTick(item, byItem) ?? []);
+
+    const held = rows.flatMap((row, rowIndex): ScrubberTick[] => {
         const bookmark = marks.get(row.id) ?? null;
 
         if (row.kind === 'user') {
@@ -71,6 +107,8 @@ export function ticksOf(rows: readonly TimelineRow[], marks: ReadonlyMap<string,
 
         return [{ id: row.id, rowIndex, kind: 'bookmark', text: bookmark.excerpt, createdAt: bookmark.createdAt, turnId, bookmark }];
     });
+
+    return before.length === 0 ? held : [...before, ...held];
 }
 
 /* One drawn tick: a message, or a run of messages merged once the height has fewer pixels than they need. */

package/src/chat/thumbnails.ts

@@ -2,6 +2,7 @@ import i18next from 'i18next';
 import { useEffect, useState } from 'react';
 import type { ChatAttachmentUpload } from '@adecore/agent-contracts';
 import { uploadPreviewUrl } from './attachments';
+import { imageForDisplay } from './image-display';
 
 /* The edge of a composer thumbnail: a few times the 56 px it is drawn at, so a sharp screen still gets a sharp one. */
 export const THUMBNAIL_PX = 256;
@@ -53,8 +54,11 @@ function dataUrlOf(blob: Blob): Promise<string> {
  * cannot be decoded this way (an SVG, a browser without `OffscreenCanvas`) falls back to the image.
  */
 async function makeThumbnail(upload: ChatAttachmentUpload): Promise<string> {
+    let image: Blob | null = null;
+
     try {
-        const bitmap = await createImageBitmap(new Blob([bytesOf(upload.data)], { type: upload.mime }));
+        image = await imageForDisplay(new Blob([bytesOf(upload.data)], { type: upload.mime }));
+        const bitmap = await createImageBitmap(image);
         const crop = thumbnailCrop(bitmap.width, bitmap.height);
         const canvas = new OffscreenCanvas(crop.out, crop.out);
         const context = canvas.getContext('2d');
@@ -62,7 +66,7 @@ async function makeThumbnail(upload: ChatAttachmentUpload): Promise<string> {
         if (!context) {
             bitmap.close();
 
-            return uploadPreviewUrl(upload);
+            return await dataUrlOf(image);
         }
 
         context.drawImage(bitmap, crop.sx, crop.sy, crop.size, crop.size, 0, 0, crop.out, crop.out);
@@ -70,7 +74,7 @@ async function makeThumbnail(upload: ChatAttachmentUpload): Promise<string> {
 
         return await dataUrlOf(await canvas.convertToBlob({ type: 'image/png' }));
     } catch {
-        return uploadPreviewUrl(upload);
+        return image === null ? uploadPreviewUrl(upload) : dataUrlOf(image);
     }
 }
 

package/src/chat/ui/DisplayImage.tsx

@@ -0,0 +1,82 @@
+import { useEffect, useState, type ComponentProps } from 'react';
+import { imageDocumentForDisplay, imageForDisplay } from '../image-display';
+
+type ImageProps = ComponentProps<'img'>;
+
+/** An image with a HEIC/HEIF fallback for browsers without a native decoder. Remote sources must allow cross-origin reads. */
+export function DisplayImage({ src, onError, ...props }: ImageProps) {
+    return <ImageSource key={typeof src === 'string' ? src : undefined} {...props} src={src} onError={onError} />;
+}
+
+function ImageSource({ src, onError, ...props }: ImageProps) {
+    const [retry, setRetry] = useState<string | null>(null);
+    const [decoded, setDecoded] = useState<{ source: string; url: string } | null>(null);
+    const converted = decoded !== null && decoded.source === src ? decoded.url : null;
+
+    useEffect(() => {
+        if (typeof src !== 'string' || retry !== src) {
+            return;
+        }
+
+        let cancelled = false;
+        let url: string | null = null;
+
+        const convert = async (): Promise<void> => {
+            try {
+                const embedded = await imageDocumentForDisplay(src);
+
+                if (cancelled) {
+                    return;
+                }
+
+                if (embedded !== src) {
+                    setDecoded({ source: src, url: embedded });
+
+                    return;
+                }
+
+                const response = await fetch(src, { referrerPolicy: 'no-referrer' });
+
+                if (!response.ok) {
+                    return;
+                }
+
+                const blob = await response.blob();
+                const image = await imageForDisplay(blob);
+
+                if (cancelled || image === blob) {
+                    return;
+                }
+
+                url = URL.createObjectURL(image);
+                setDecoded({ source: src, url });
+            } catch {
+                // The failed image keeps the browser's alt text when it cannot be read or decoded.
+            }
+        };
+
+        void convert();
+
+        return () => {
+            cancelled = true;
+
+            if (url !== null) {
+                URL.revokeObjectURL(url);
+            }
+        };
+    }, [src, retry]);
+
+    return (
+        <img
+            src={converted ?? src}
+            {...props}
+            onError={(event) => {
+                if (typeof src === 'string' && retry !== src) {
+                    setRetry(src);
+                }
+
+                onError?.(event);
+            }}
+        />
+    );
+}

package/src/chat/ui/ImageView.tsx

@@ -4,6 +4,7 @@ import clsx from 'clsx';
 import { ImageOff, Minus, Plus, RotateCcw } from 'lucide-react';
 import type { ResourceUrl } from '../../host';
 import { ButtonGroup, CloseButton, Dialog, Icon, IconButton, Tooltip } from '@adecore/ui';
+import { DisplayImage } from './DisplayImage';
 
 const MIN_SCALE = 1;
 const MAX_SCALE = 8;
@@ -137,7 +138,7 @@ function Lightbox({
                         dragRef.current = null;
                     }}
                 >
-                    <img
+                    <DisplayImage
                         src={src}
                         alt={alt}
                         draggable={false}
@@ -205,7 +206,7 @@ export function ImageThumb({ source, alt, className, aspect, actions, open: open
                 style={ratio}
                 onClick={() => setOpen(true)}
             >
-                <img src={src} alt={alt} className={clsx(aspect !== undefined && 'size-full object-contain', className)} />
+                <DisplayImage src={src} alt={alt} className={clsx(aspect !== undefined && 'size-full object-contain', className)} />
             </button>
             <Lightbox src={src} alt={alt} open={open} onOpenChange={setOpen} actions={actions} />
         </>

package/src/chat/ui/Markdown.tsx

@@ -19,6 +19,7 @@ import { useChatHost, type ChatHost, type FileRef, type ShellCodeBlockContext }
 import { useFileLinkCwd, useFileLinkScopeId, useFileLinkTarget, useOpenFileLink } from './file-links';
 import { ErrorBoundary, FileIcon, Icon } from '@adecore/ui';
 import { useTranslation } from 'react-i18next';
+import { DisplayImage } from './DisplayImage';
 
 type ShellCodeBlockReply = Pick<ShellCodeBlockContext, 'scopeId' | 'chatId' | 'itemId'> & { streaming: boolean };
 
@@ -211,14 +212,14 @@ function MarkdownImage({ src, alt }: { src?: string; alt?: string }) {
     const path = typeof src === 'string' ? localImagePath(src, cwd) : null;
 
     if (HostImage === undefined || path === null) {
-        return <img src={src} alt={alt} />;
+        return <DisplayImage src={src} alt={alt} />;
     }
 
     return <HostImage path={path} alt={alt ?? ''} />;
 }
 
 function PlainImage({ src, alt }: { src?: string; alt?: string }) {
-    return <img src={src} alt={alt} />;
+    return <DisplayImage src={src} alt={alt} />;
 }
 
 /* A ```mermaid fence, which draws what it says. */

package/src/chat/ui/Timeline.tsx

@@ -45,7 +45,8 @@ import {
     STRIP_CLEARANCE_PX,
     tickOfRow,
     ticksOf,
-    ticksWithHits
+    ticksWithHits,
+    EARLIER_ROW
 } from '../logic/scrubber';
 import {
     EMPTY_TARGET,
@@ -206,6 +207,7 @@ export function Timeline({
     const items = useChatRow(chatId, (row) => row?.structure);
     const activeTurnId = useChatRow(chatId, (row) => row?.info.activeTurnId ?? null);
     const bookmarks = useChatRow(chatId, (row) => row?.bookmarks);
+    const outlineBefore = useChatRow(chatId, (row) => row?.outlineBefore);
     const visuals = useChatRow(chatId, (row) => row?.visuals);
     const forkedTurns = useForkedTurns(chatId);
     const info = useChatRow(chatId, (row) => row?.info ?? null);
@@ -306,7 +308,7 @@ export function Timeline({
     // A chat that took a turn before is one whose thread has not come in yet, not one to greet.
     const welcome = !loadingHistory && welcomes && empty && (info === null || (info.usage.turns === 0 && info.activeTurnId === null));
     const marks = useMemo(() => bookmarkRows(rows, bookmarks ?? [], items ?? {}), [rows, bookmarks, items]);
-    const ticks = useMemo(() => ticksOf(rows, marks), [rows, marks]);
+    const ticks = useMemo(() => ticksOf(rows, marks, outlineBefore, bookmarks), [rows, marks, outlineBefore, bookmarks]);
     // A message a jump is on its way to; it may first have to open the turn its reply folded into.
     const [seeking, setSeeking] = useState<{ itemId: string; block?: UiReplyTarget; key: string; options?: ItemJumpOptions } | null>(null);
     const [landing, setLanding] = useState<{ target: UiReplyTarget; key: string } | null>(null);
@@ -613,9 +615,10 @@ export function Timeline({
             return;
         }
 
-        if (tick.bookmark !== null) {
+        // A message before the rows this client holds comes in page by page until its row is there.
+        if (tick.bookmark !== null || tick.rowIndex === EARLIER_ROW) {
             setLanding(null);
-            setSeeking({ itemId: tick.bookmark.itemId, key: keyOf(chatId) });
+            setSeeking({ itemId: tick.bookmark?.itemId ?? tick.id, key: keyOf(chatId) });
 
             return;
         }

package/src/chat/ui/VisualFrame.tsx

@@ -6,6 +6,7 @@ import { Spinner, useMeasuredWidth } from '@adecore/ui';
 import { useChatHost } from '../../host';
 import { useChatScope } from '../../scope';
 import { DEFAULT_HEIGHT_PX, initialVisualContentHeight, rememberVisualHeight } from '../logic/visual-height';
+import { imageDocumentForDisplay } from '../image-display';
 import { VisualBridge } from '../visual-bridge';
 import { VisualViewportController } from '../visual-viewport';
 import { useVisualTheme } from './visual-theme';
@@ -129,7 +130,7 @@ function PageFrame({ page, title, maxHeight, fill = false, className, initialHei
         const bridge = new VisualBridge({
             frame: () => frame.contentWindow,
             visual: { maxHeight },
-            page: page(),
+            page: page().then(imageDocumentForDisplay),
             theme: opening.theme,
             mayOpenLink: () => personActsIn(frame),
             openLink: (url) => visuals?.openLink(url),

package/src/chat/ui/index.ts

@@ -3,6 +3,7 @@ export { AccountPill } from './AccountPill';
 export { AnsiOutput } from './AnsiOutput';
 export { BookmarkSubmenu } from './BookmarkSubmenu';
 export { ChatActivity, StatusIcon } from './ChatActivity';
+export { DisplayImage } from './DisplayImage';
 export { CodeBlock } from './CodeBlock';
 export { Composer } from './Composer';
 export { type ComposerInputHandle, ComposerInput, type InputSelection } from './ComposerInput';

package/src/chat/ui/intelligent-ui/renderers/content.tsx

@@ -13,6 +13,7 @@ import { uiChildrenOf, uiNodeLabel, uiNodeText, uiUrlDomain } from '../node-text
 import type { UiRendererProps } from '../render-context';
 import { useTruncated } from '../use-truncated';
 import { useHostAttachmentUrl } from '../../../../host-hooks';
+import { DisplayImage } from '../../DisplayImage';
 
 // The number of every source by its node id, which the list counts in its own order.
 const SourceNumbers = createContext<ReadonlyMap<string, number>>(new Map());
@@ -153,7 +154,7 @@ export function CompareRenderer({ node, children, context }: UiRendererProps<UiP
                     onValueChange={setSplit}
                     label={label}
                     before={
-                        <img
+                        <DisplayImage
                             src={first.url}
                             alt={describe(beforeLabel)}
                             draggable={false}
@@ -167,7 +168,7 @@ export function CompareRenderer({ node, children, context }: UiRendererProps<UiP
                             }}
                         />
                     }
-                    after={<img src={second.url} alt={describe(afterLabel)} draggable={false} className="size-full object-contain select-none" />}
+                    after={<DisplayImage src={second.url} alt={describe(afterLabel)} draggable={false} className="size-full object-contain select-none" />}
                 />
                 <CompareChip side="left" label={beforeLabel} />
                 <CompareChip side="right" label={afterLabel} />

package/src/images.ts

@@ -0,0 +1,2 @@
+export { imageDocumentForDisplay, imageForDisplay } from './chat/image-display';
+export { DisplayImage } from './chat/ui/DisplayImage';

package/src/state/chats.ts

@@ -38,6 +38,11 @@ export interface ChatState {
      * that a message woke again without a scroll reaching back to its row.
      */
     subagentsBefore?: string[];
+    /*
+     * The outline of the thread before that part (`outlineItems`), cut down and kept apart from
+     * `items`, so the scrubber has a tick for every message before a scroll reaches it.
+     */
+    outlineBefore?: ChatItem[];
     /* The messages marked to come back to, as the host last said; absent until it said anything. */
     bookmarks?: ChatBookmark[];
     /* The pages agents published in the chat, as the host last said; absent until it said anything. */
@@ -53,6 +58,8 @@ export interface ChatPage {
     pending: ChatItem[];
     /* The active sub-agents from before the page; absent from a host that sends none. */
     subagents?: ChatSubagentItem[];
+    /* The outline of the thread before the page; absent from a host that sends none. */
+    outline?: ChatItem[];
 }
 
 /* Rows keyed with the scope's `keyOf`, so a thread says which host it runs on. */
@@ -124,7 +131,8 @@ function stateOf(info: ChatInfo, items: ChatItem[], page?: ChatPage): ChatState
         order,
         history: page.history,
         waitingBefore: before.map((item) => item.id),
-        subagentsBefore: subagents.map((item) => item.id)
+        subagentsBefore: subagents.map((item) => item.id),
+        outlineBefore: (page.outline ?? []).filter((item) => !(item.id in byId))
     };
 }
 
@@ -173,15 +181,16 @@ export function prependPage(state: ChatState, cursor: string, page: ChatHistoryR
     const order = [...olderIds, ...state.order];
 
     if (page.history.cursor === null) {
-        const { history: _history, waitingBefore: _waitingBefore, subagentsBefore: _subagentsBefore, ...rest } = loaded;
+        const { history: _history, waitingBefore: _waitingBefore, subagentsBefore: _subagentsBefore, outlineBefore: _outlineBefore, ...rest } = loaded;
 
         return { ...rest, items, structure: items, order };
     }
 
     const waitingBefore = (state.waitingBefore ?? []).filter((id) => !olderIds.has(id));
     const subagentsBefore = (state.subagentsBefore ?? []).filter((id) => !olderIds.has(id));
+    const outlineBefore = (state.outlineBefore ?? []).filter((item) => !olderIds.has(item.id));
 
-    return { ...loaded, items, structure: items, order, history: page.history, waitingBefore, subagentsBefore };
+    return { ...loaded, items, structure: items, order, history: page.history, waitingBefore, subagentsBefore, outlineBefore };
 }
 
 /* The requests that still wait, oldest first: those from before the page this client holds, then the thread's own. */