Commit 8f525af5afa93dff58775030d9b503d3bda36b7b | the-knife

author	maria <maria@kuuro.net> 2026-08-30 17:48:54-04:00
committer	GitHub <noreply@github.com> 2026-08-30 17:48:54-04:00
log	8f525af5afa93dff58775030d9b503d3bda36b7b
tree	0bf2469f69846e4772412c1a956e1431aba006b7
parent	12fe2d6d03062c5d7fc3beff168f8c4af1235b50
signature	Signed by PGP key B5690EEEBB952194

fix(web): open agent images in expanded preview (#8807)

Co-authored-by: maria-rcks <254055478+maria-rcks@users.noreply.github.com>

2 files changed, 51 insertions(+), 6 deletions(-)

apps
- web
  - src
    components
    ChatMarkdown.tsx
    chat
    MessagesTimeline.tsx

apps/web/src/components/ChatMarkdown.tsx+50-6

 @@ -35,6 +35,7 @@ import React, {
   Suspense,
   type CSSProperties,
   type ClipboardEvent as ReactClipboardEvent,
+  type KeyboardEvent as ReactKeyboardEvent,
   type MouseEvent as ReactMouseEvent,
   isValidElement,
   use,
 @@ -55,6 +56,7 @@ import remarkBreaks from "remark-breaks";
 import remarkGfm from "remark-gfm";
 import { remarkGithubAlerts } from "../markdown-github-alerts";
 import { renderSkillInlineMarkdownChildren } from "./chat/SkillInlineText";
+import { type ExpandedImagePreview } from "./chat/ExpandedImagePreview";
 import { CHAT_FILE_TAG_CHIP_CLASS_NAME, FileTagChipContent } from "./chat/FileTagChip";
 import { PierreEntryIcon } from "./chat/PierreEntryIcon";
 import {
 @@ -155,6 +157,7 @@ interface ChatMarkdownProps {
   /** Parse sanitized raw HTML instead of displaying its source text. */
   parseRawHtml?: boolean;
   imageBaseDir?: string | undefined;
+  onImageExpand?: ((preview: ExpandedImagePreview) => void) | undefined;
 }
 export function canUseMarkdownFileShellActions(
 @@ -1089,6 +1092,31 @@ const CHAT_MARKDOWN_WORKSPACE_IMAGE_CLASS_NAME = cn(
   CHAT_MARKDOWN_WORKSPACE_IMAGE_LAYOUT_CLASS_NAME,
   "rounded-lg border border-border/40",
 );
+const MarkdownLinkContext = React.createContext(false);
+function expandableMarkdownImageProps(
+  onImageExpand: ((preview: ExpandedImagePreview) => void) | undefined,
+  src: string,
+  alt: string,
+) {
+  if (!onImageExpand) return {};
+  const previewName = alt.trim() || "image";
+  const expand = (event: ReactMouseEvent | ReactKeyboardEvent) => {
+    if (event.currentTarget.closest("a")) return;
+    event.preventDefault();
+    event.stopPropagation();
+    onImageExpand({ images: [{ src, name: previewName }], index: 0 });
+  };
+  return {
+    role: "button" as const,
+    tabIndex: 0,
+    "aria-label": `Preview ${previewName}`,
+    onClick: expand,
+    onKeyDown: (event: ReactKeyboardEvent) => {
+      if (event.key === "Enter" || event.key === " ") expand(event);
+    },
+  };
+}
 function ChatMarkdownImageFallback(props: {
   readonly alt: string;
 @@ -1118,6 +1146,7 @@ const ChatMarkdownWorkspaceImage = memo(function ChatMarkdownWorkspaceImage(prop
   readonly copyMarkdown: string;
   readonly srcFragment: string;
   readonly style?: CSSProperties | undefined;
+  readonly onImageExpand?: ((preview: ExpandedImagePreview) => void) | undefined;
 }) {
   const assetUrl = useAssetUrlState(props.threadRef.environmentId, {
     _tag: "workspace-file",
 @@ -1144,15 +1173,20 @@ const ChatMarkdownWorkspaceImage = memo(function ChatMarkdownWorkspaceImage(prop
       />
     );
   }
+  const src = assetUrl.url + props.srcFragment;
   return (
     <img
-      src={assetUrl.url + props.srcFragment}
+      src={src}
       alt={props.alt}
       data-markdown-copy={props.copyMarkdown}
       loading="lazy"
       draggable={false}
-      className={CHAT_MARKDOWN_WORKSPACE_IMAGE_CLASS_NAME}
+      className={cn(
+        CHAT_MARKDOWN_WORKSPACE_IMAGE_CLASS_NAME,
+        props.onImageExpand && "cursor-zoom-in",
+      )}
       style={props.style}
+      {...expandableMarkdownImageProps(props.onImageExpand, src, props.alt)}
       onError={() => setFailedUrl(assetUrl.url)}
     />
   );
 @@ -1694,6 +1728,7 @@ function ChatMarkdown({
   lineBreaks = false,
   parseRawHtml = true,
   imageBaseDir,
+  onImageExpand,
 }: ChatMarkdownProps) {
   const { resolvedTheme } = useTheme();
   const createAssetUrl = useAtomQueryRunner(assetEnvironment.createUrl, {
 @@ -2084,6 +2119,7 @@ function ChatMarkdown({
           const isSameDocumentLink = href?.startsWith("#") ?? false;
           const onClick = props.onClick;
           const canOpenInPreview = Boolean(threadRef) && isPreviewSupportedInRuntime();
+          const linkChildren = <MarkdownLinkContext value>{children}</MarkdownLinkContext>;
           const link = (
             <a
               {...props}
 @@ -2160,10 +2196,10 @@ function ChatMarkdown({
             >
               {faviconHost && hastHasText(node) ? (
                 <MarkdownExternalLinkContent host={faviconHost} plainText={plainHastText(node)}>
-                  {children}
+                  {linkChildren}
                 </MarkdownExternalLinkContent>
               ) : (
-                children
+                linkChildren
               )}
             </a>
           );
 @@ -2205,7 +2241,8 @@ function ChatMarkdown({
           </code>
         );
       },
-      img({ node, title, src, alt, ...props }) {
+      img: function MarkdownImage({ node, title, src, alt, ...props }) {
+        const imageExpand = use(MarkdownLinkContext) ? undefined : onImageExpand;
         const localSrc = node?.properties?.dataLocalSrc;
         const markdownTitle = node?.properties?.dataMarkdownTitle;
         const authoredSrc = typeof localSrc === "string" ? localSrc : src;
 @@ -2225,8 +2262,13 @@ function ChatMarkdown({
               src={imageSource.uri}
               alt={altText}
               loading="lazy"
-              className={cn(props.className, CHAT_MARKDOWN_IMAGE_SIZE_CLASS_NAME)}
+              className={cn(
+                props.className,
+                CHAT_MARKDOWN_IMAGE_SIZE_CLASS_NAME,
+                imageExpand && "cursor-zoom-in",
+              )}
               style={authoredSizeStyle}
+              {...expandableMarkdownImageProps(imageExpand, imageSource.uri, altText)}
             />
           );
         }
 @@ -2239,6 +2281,7 @@ function ChatMarkdown({
               copyMarkdown={copyMarkdown}
               srcFragment={markdownImageSourceFragment(classifiedSrc)}
               style={authoredSizeStyle}
+              onImageExpand={imageExpand}
             />
           );
         }
 @@ -2289,6 +2332,7 @@ function ChatMarkdown({
     isStreaming,
     markdownFileLinkMetaByHref,
     onTaskListChange,
+    onImageExpand,
     openFileInPanel,
     openInPreferredEditor,
     openChangeRequestLink,

apps/web/src/components/chat/MessagesTimeline.tsx+1

...	@@ -1253,6 +1253,7 @@ function AssistantTimelineRow({ row }: { row: Extract<TimelineRow, { kind: "mess	...	@@ -1253,6 +1253,7 @@ function AssistantTimelineRow({ row }: { row: Extract<TimelineRow, { kind: "mess
1253	isStreaming={Boolean(row.message.streaming)}	1253	isStreaming={Boolean(row.message.streaming)}
1254	lineBreaks={shouldPreserveAssistantLineBreaks(messageText)}	1254	lineBreaks={shouldPreserveAssistantLineBreaks(messageText)}
1255	skills={ctx.skills}	1255	skills={ctx.skills}
		1256	onImageExpand={ctx.onImageExpand}
1256	/>	1257	/>
1257	<AssistantChangedFilesSection	1258	<AssistantChangedFilesSection
1258	turnSummary={row.assistantTurnDiffSummary}	1259	turnSummary={row.assistantTurnDiffSummary}