From 942f364b4f810c1258e44c8e47aab4ec87fcf8f9 Mon Sep 17 00:00:00 2001
From: ckrafft <ckrafft@epyc>
Date: Sun, 19 Jul 2026 00:12:34 +0200
Subject: [PATCH 1/5] server: add read_image tool (#25875)

This adds a server-tool that allows vision models to analyze server-side images.
This tool is reading only a single file for now:
The image data is base64 encoded and passed to the UI, which
decodes it, fills the <img> tag and removes the data URI before
passing the tool result back to the model.
---
 tools/server/server-tools.cpp                 | 88 +++++++++++++++++++
 .../ChatMessageToolCallBlock.svelte           |  3 +
 .../ChatMessageToolCallBlockReadImage.svelte  | 80 +++++++++++++++++
 .../ChatMessageToolCall/parsers/read-image.ts | 46 ++++++++++
 tools/ui/src/lib/constants/built-in-tools.ts  |  2 +
 tools/ui/src/lib/enums/tools.enums.ts         |  1 +
 6 files changed, 220 insertions(+)
 create mode 100644 tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageToolCall/ChatMessageToolCallBlockReadImage.svelte
 create mode 100644 tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageToolCall/parsers/read-image.ts

diff --git a/tools/server/server-tools.cpp b/tools/server/server-tools.cpp
index 9eb57abaea15..556b6bc22421 100644
--- a/tools/server/server-tools.cpp
+++ b/tools/server/server-tools.cpp
@@ -1,6 +1,7 @@
 #include "server-tools.h"
 
 #include <sheredom/subprocess.h>
+#include "base64.hpp"
 
 #include <filesystem>
 #include <fstream>
@@ -1114,6 +1115,92 @@ static server_tool & find_tool(std::vector<std::unique_ptr<server_tool>> & tools
     throw std::invalid_argument(string_format("unknown tool \"%s\"", name.c_str()));
 }
 
+//
+// read_image: read an image file and return base64-encoded data with metadata
+//
+
+static constexpr size_t SERVER_TOOL_READ_IMAGE_MAX_SIZE = 16 * 1024 * 1024; // 16 MB
+
+static std::string get_mime_from_extension(const std::string & path) {
+    static const std::unordered_map<std::string, std::string> mime_map = {
+        {".png",  "image/png"},
+        {".jpg",  "image/jpeg"},
+        {".jpeg", "image/jpeg"},
+        {".webp", "image/webp"},
+        {".bmp",  "image/bmp"},
+        {".tiff", "image/tiff"},
+        {".tif",  "image/tiff"},
+        {".gif",  "image/gif"},
+    };
+    auto ext = fs::path(path).extension().string();
+    auto it = mime_map.find(ext);
+    return (it != mime_map.end()) ? it->second : "application/octet-stream";
+}
+
+struct server_tool_read_image : server_tool {
+    server_tool_read_image() {
+        name = "read_image";
+        display_name = "Read image file";
+        permission_write = false;
+    }
+
+    json get_definition() const override {
+        return {
+            {"type", "function"},
+            {"function", {
+                {"name", name},
+                {"description", "Read an image file from disk and return it as base64-encoded data with metadata."},
+                {"parameters", {
+                    {"type", "object"},
+                    {"properties", {
+                        {"path", {{"type", "string"}, {"description", "Absolute path to the image file."}}},
+                    }},
+                    {"required", json::array({"path"})},
+                }},
+            }},
+        };
+    }
+
+    json invoke(json params, server_tool::stream *) const override {
+        std::string path = params.at("path").get<std::string>();
+
+        auto io = make_tools_io(params);
+
+        uintmax_t file_size = 0;
+        if (!io->file_size(path, file_size)) {
+            return {{"error", "cannot stat file: " + path}};
+        }
+        if (file_size > SERVER_TOOL_READ_IMAGE_MAX_SIZE) {
+            return {{"error", string_format(
+                "image too large (%zu bytes, max %zu)",
+                (size_t)file_size, SERVER_TOOL_READ_IMAGE_MAX_SIZE)}};
+        }
+
+        std::string content;
+        if (!io->read_file(path, content)) {
+            return {{"error", "failed to open file: " + path}};
+        }
+
+        std::string mime = get_mime_from_extension(path);
+        std::string b64  = base64::encode(content.data(), content.size());
+
+        // Return as plain_text_response with a data URI line so the UI can
+        // extract it as an image attachment (via extractBase64Attachments)
+        std::string data_uri = "data:" + mime + ";base64," + b64;
+
+        return {
+            {"plain_text_response",
+                string_format(
+                    "Image: %s\nSize: %zu bytes\nMIME: %s\n%s",
+                    path.c_str(), (size_t)file_size, mime.c_str(), data_uri.c_str())},
+            {"path", path},
+            {"mime", mime},
+            {"size_bytes", (int)file_size},
+        };
+    }
+};
+
+//
 //
 // public API
 //
@@ -1127,6 +1214,7 @@ static std::vector<std::unique_ptr<server_tool>> build_tools() {
     tools.push_back(std::make_unique<server_tool_write_file>());
     tools.push_back(std::make_unique<server_tool_edit_file>());
     tools.push_back(std::make_unique<server_tool_get_datetime>());
+    tools.push_back(std::make_unique<server_tool_read_image>());
     return tools;
 }
 
diff --git a/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageToolCall/ChatMessageToolCallBlock.svelte b/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageToolCall/ChatMessageToolCallBlock.svelte
index b1daedfc818c..c1aa2e11b062 100644
--- a/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageToolCall/ChatMessageToolCallBlock.svelte
+++ b/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageToolCall/ChatMessageToolCallBlock.svelte
@@ -14,6 +14,7 @@
 	import ChatMessageToolCallBlockGetDatetime from './ChatMessageToolCallBlockGetDatetime.svelte';
 	import ChatMessageToolCallBlockGrepSearch from './ChatMessageToolCallBlockGrepSearch.svelte';
 	import ChatMessageToolCallBlockReadFile from './ChatMessageToolCallBlockReadFile.svelte';
+	import ChatMessageToolCallBlockReadImage from './ChatMessageToolCallBlockReadImage.svelte';
 	import ChatMessageToolCallBlockRunJavascript from './ChatMessageToolCallBlockRunJavascript.svelte';
 	import ChatMessageToolCallBlockSearchResults from './ChatMessageToolCallBlockSearchResults.svelte';
 	import ChatMessageToolCallBlockWriteFile from './ChatMessageToolCallBlockWriteFile.svelte';
@@ -42,6 +43,8 @@
 	<ChatMessageToolCallBlockGetDatetime {section} {isStreaming} />
 {:else if section.toolName === BuiltInTool.READ_FILE}
 	<ChatMessageToolCallBlockReadFile {section} {open} {isStreaming} {onToggle} />
+{:else if section.toolName === BuiltInTool.READ_IMAGE}
+	<ChatMessageToolCallBlockReadImage {section} {open} {isStreaming} {onToggle} />
 {:else if section.toolName === BuiltInTool.EDIT_FILE}
 	<ChatMessageToolCallBlockEditFile {section} {open} {isStreaming} {onToggle} />
 {:else if section.toolName === BuiltInTool.WRITE_FILE}
diff --git a/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageToolCall/ChatMessageToolCallBlockReadImage.svelte b/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageToolCall/ChatMessageToolCallBlockReadImage.svelte
new file mode 100644
index 000000000000..b0f1ac5a6296
--- /dev/null
+++ b/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageToolCall/ChatMessageToolCallBlockReadImage.svelte
@@ -0,0 +1,80 @@
+<script lang="ts">
+	import { Eye } from '@lucide/svelte';
+	import { AttachmentType } from '$lib/enums';
+	import type { DatabaseMessageExtra, DatabaseMessageExtraImageFile } from '$lib/types';
+	import { type AgenticSection } from '$lib/utils';
+	import { parseReadImageMeta } from './parsers/read-image';
+	import ToolCallBlock from './ToolCallBlock.svelte';
+
+	interface Props {
+		section: AgenticSection;
+		open: boolean;
+		isStreaming: boolean;
+		onToggle?: () => void;
+	}
+
+	let { section, open, isStreaming, onToggle }: Props = $props();
+
+	const readImageMeta = $derived(parseReadImageMeta(section));
+
+	// Find the image attachment from toolResultExtras (attached to the tool result message.
+	// The extractBase64Attachments function in agentic.svelte.ts replaces the data URI line
+	// with [Attachment saved: name] and stores the base64 as an extra.
+	const imageAttachment = $derived.by(() => {
+		const extras = section.toolResultExtras;
+		if (!extras || extras.length === 0) return null;
+		// Extract the attachment name from the cleaned result text
+		const match = section.toolResult?.match(/\[Attachment saved: ([^\]]+)\]/);
+		if (!match) return null;
+		const attachmentName = match[1];
+		return extras.find(
+			(e): e is DatabaseMessageExtraImageFile =>
+				e.type === AttachmentType.IMAGE && e.name === attachmentName
+		) ?? null;
+	});
+</script>
+
+<ToolCallBlock {section} {open} {isStreaming} meta={readImageMeta} {onToggle}>
+	{#snippet titleSnippet()}
+		<span class="text-muted-foreground">Read image </span>
+		<span class="font-mono">{readImageMeta?.fileName}</span>
+	{/snippet}
+
+	{#snippet children(_meta, _ctx)}
+		{#if section.toolResult}
+			{#if imageAttachment}
+				<div class="mt-2">
+					<img
+						src={imageAttachment.base64Url}
+						alt={readImageMeta?.fileName ?? 'image'}
+						class="max-h-[60vh] max-w-full rounded-lg object-contain shadow-lg"
+						loading="lazy"
+					/>
+				</div>
+			{:else}
+				<div class="rounded bg-muted/20 p-2 text-xs text-muted-foreground/70 italic">
+					Image attachment not found in message extras
+				</div>
+			{/if}
+
+			{#if readImageMeta?.sizeBytes || readImageMeta?.mimeType}
+				<div class="mt-2 flex gap-4 text-xs text-muted-foreground">
+					{#if readImageMeta?.sizeBytes}
+						<span>Size: {readImageMeta.sizeBytes} bytes</span>
+					{/if}
+					{#if readImageMeta?.mimeType}
+						<span>MIME: {readImageMeta.mimeType}</span>
+					{/if}
+				</div>
+			{/if}
+
+			{#if readImageMeta?.path}
+				<div class="mt-1 text-xs text-muted-foreground/60 font-mono">{readImageMeta.path}</div>
+			{/if}
+		{:else}
+			<div class="rounded bg-muted/20 p-2 text-xs text-muted-foreground/70 italic">
+				Waiting for image data...
+			</div>
+		{/if}
+	{/snippet}
+</ToolCallBlock>
diff --git a/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageToolCall/parsers/read-image.ts b/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageToolCall/parsers/read-image.ts
new file mode 100644
index 000000000000..3a3352348a39
--- /dev/null
+++ b/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageToolCall/parsers/read-image.ts
@@ -0,0 +1,46 @@
+import type { AgenticSection } from '$lib/utils';
+
+export interface ReadImageMeta {
+	fileName: string;
+	path: string;
+	sizeBytes?: number;
+	mimeType?: string;
+}
+
+/**
+ * Parse read_image tool result to extract metadata.
+ * Expected format (after extractBase64Attachments processing):
+ *   Image: /path/to/file.png
+ *   Size: 12345 bytes
+ *   MIME: image/png
+ *   [Attachment saved: mcp-attachment-xxx.png]
+ *
+ * The data URI line is replaced by the attachment marker by
+ * agenticStore.extractBase64Attachments before storage.
+ */
+export function parseReadImageMeta(section: AgenticSection): ReadImageMeta | null {
+	if (!section.toolResult) return null;
+
+	const lines = section.toolResult.split('\n');
+	let fileName = '';
+	let path = '';
+	let sizeBytes: number | undefined;
+	let mimeType: string | undefined;
+
+	for (const line of lines) {
+		const trimmed = line.trim();
+		if (trimmed.startsWith('Image: ')) {
+			path = trimmed.slice('Image: '.length).trim();
+			fileName = path.split('/').pop() ?? path;
+		} else if (trimmed.startsWith('Size: ')) {
+			const match = trimmed.match(/Size:\s*(\d+)\s*bytes/);
+			if (match) sizeBytes = parseInt(match[1], 10);
+		} else if (trimmed.startsWith('MIME: ')) {
+			mimeType = trimmed.slice('MIME: '.length).trim();
+		}
+	}
+
+	if (!path) return null;
+
+	return { fileName, path, sizeBytes, mimeType };
+}
diff --git a/tools/ui/src/lib/constants/built-in-tools.ts b/tools/ui/src/lib/constants/built-in-tools.ts
index 0721e6484d62..70c09f217246 100644
--- a/tools/ui/src/lib/constants/built-in-tools.ts
+++ b/tools/ui/src/lib/constants/built-in-tools.ts
@@ -11,6 +11,7 @@ import type { Component } from 'svelte';
 import {
 	Braces,
 	Clock,
+	Eye,
 	FilePen,
 	FilePlus,
 	FileSearch,
@@ -28,6 +29,7 @@ export interface BuiltinToolUiEntry {
 
 export const BUILTIN_TOOL_UI: Readonly<Record<BuiltInTool, BuiltinToolUiEntry>> = {
 	[BuiltInTool.READ_FILE]: { icon: FileText, label: 'Read file', source: ToolSource.BUILTIN },
+	[BuiltInTool.READ_IMAGE]: { icon: Eye, label: 'Read image', source: ToolSource.BUILTIN },
 	[BuiltInTool.EDIT_FILE]: { icon: FilePen, label: 'Edit file', source: ToolSource.BUILTIN },
 	[BuiltInTool.WRITE_FILE]: { icon: FilePlus, label: 'Write file', source: ToolSource.BUILTIN },
 	[BuiltInTool.FILE_GLOB_SEARCH]: {
diff --git a/tools/ui/src/lib/enums/tools.enums.ts b/tools/ui/src/lib/enums/tools.enums.ts
index 9985e1f4aa98..0a0657e3ee4a 100644
--- a/tools/ui/src/lib/enums/tools.enums.ts
+++ b/tools/ui/src/lib/enums/tools.enums.ts
@@ -27,6 +27,7 @@ export enum ToolResponseField {
  */
 export enum BuiltInTool {
 	READ_FILE = 'read_file',
+	READ_IMAGE = 'read_image',
 	EDIT_FILE = 'edit_file',
 	WRITE_FILE = 'write_file',
 	GET_DATETIME = 'get_datetime',

From 22560710f154decd23410bed7280960724cc3775 Mon Sep 17 00:00:00 2001
From: ckrafft <ckrafft@epyc>
Date: Mon, 20 Jul 2026 21:07:53 +0200
Subject: [PATCH 2/5] cleanup read_image tool: move magic strings to constants

- Add dedicated constants file: tools/ui/src/lib/constants/read-image.ts
  with PREFIX_IMAGE, PREFIX_SIZE, PREFIX_MIME constants
- Use ATTACHMENT_SAVED_REGEX from agentic.ts in ChatMessageToolCallBlockReadImage.svelte
- Use NEWLINE constant from code.ts instead of hardcoded '\n'
- Use PREFIX_SIZE in regex pattern for size parsing
- Add SERVER_TOOL_READ_IMAGE_PREFIX_* constants in C++ server-tools.cpp
  to match the TypeScript PREFIX_* constants for consistency
---
 tools/server/server-tools.cpp                    |  9 +++++++--
 .../ChatMessageToolCallBlockReadImage.svelte     |  3 ++-
 .../ChatMessageToolCall/parsers/read-image.ts    | 16 +++++++++-------
 tools/ui/src/lib/constants/read-image.ts         |  3 +++
 4 files changed, 21 insertions(+), 10 deletions(-)
 create mode 100644 tools/ui/src/lib/constants/read-image.ts

diff --git a/tools/server/server-tools.cpp b/tools/server/server-tools.cpp
index 556b6bc22421..b54bb0469536 100644
--- a/tools/server/server-tools.cpp
+++ b/tools/server/server-tools.cpp
@@ -1120,6 +1120,9 @@ static server_tool & find_tool(std::vector<std::unique_ptr<server_tool>> & tools
 //
 
 static constexpr size_t SERVER_TOOL_READ_IMAGE_MAX_SIZE = 16 * 1024 * 1024; // 16 MB
+static constexpr const char* SERVER_TOOL_READ_IMAGE_PREFIX_IMAGE = "Image: ";
+static constexpr const char* SERVER_TOOL_READ_IMAGE_PREFIX_SIZE = "Size: ";
+static constexpr const char* SERVER_TOOL_READ_IMAGE_PREFIX_MIME = "MIME: ";
 
 static std::string get_mime_from_extension(const std::string & path) {
     static const std::unordered_map<std::string, std::string> mime_map = {
@@ -1191,8 +1194,10 @@ struct server_tool_read_image : server_tool {
         return {
             {"plain_text_response",
                 string_format(
-                    "Image: %s\nSize: %zu bytes\nMIME: %s\n%s",
-                    path.c_str(), (size_t)file_size, mime.c_str(), data_uri.c_str())},
+                    "%s%s\n%s%zu bytes\n%s%s\n%s",
+                    SERVER_TOOL_READ_IMAGE_PREFIX_IMAGE, path.c_str(),
+                    SERVER_TOOL_READ_IMAGE_PREFIX_SIZE, (size_t)file_size,
+                    SERVER_TOOL_READ_IMAGE_PREFIX_MIME, mime.c_str(), data_uri.c_str())},
             {"path", path},
             {"mime", mime},
             {"size_bytes", (int)file_size},
diff --git a/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageToolCall/ChatMessageToolCallBlockReadImage.svelte b/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageToolCall/ChatMessageToolCallBlockReadImage.svelte
index b0f1ac5a6296..a73252fefa7d 100644
--- a/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageToolCall/ChatMessageToolCallBlockReadImage.svelte
+++ b/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageToolCall/ChatMessageToolCallBlockReadImage.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { Eye } from '@lucide/svelte';
 	import { AttachmentType } from '$lib/enums';
+	import { ATTACHMENT_SAVED_REGEX } from '$lib/constants/agentic';
 	import type { DatabaseMessageExtra, DatabaseMessageExtraImageFile } from '$lib/types';
 	import { type AgenticSection } from '$lib/utils';
 	import { parseReadImageMeta } from './parsers/read-image';
@@ -24,7 +25,7 @@
 		const extras = section.toolResultExtras;
 		if (!extras || extras.length === 0) return null;
 		// Extract the attachment name from the cleaned result text
-		const match = section.toolResult?.match(/\[Attachment saved: ([^\]]+)\]/);
+		const match = section.toolResult?.match(ATTACHMENT_SAVED_REGEX);
 		if (!match) return null;
 		const attachmentName = match[1];
 		return extras.find(
diff --git a/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageToolCall/parsers/read-image.ts b/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageToolCall/parsers/read-image.ts
index 3a3352348a39..61d234a04977 100644
--- a/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageToolCall/parsers/read-image.ts
+++ b/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageToolCall/parsers/read-image.ts
@@ -1,4 +1,6 @@
 import type { AgenticSection } from '$lib/utils';
+import { NEWLINE } from '$lib/constants/code';
+import { PREFIX_IMAGE, PREFIX_SIZE, PREFIX_MIME } from '$lib/constants/read-image';
 
 export interface ReadImageMeta {
 	fileName: string;
@@ -21,7 +23,7 @@ export interface ReadImageMeta {
 export function parseReadImageMeta(section: AgenticSection): ReadImageMeta | null {
 	if (!section.toolResult) return null;
 
-	const lines = section.toolResult.split('\n');
+	const lines = section.toolResult.split(NEWLINE);
 	let fileName = '';
 	let path = '';
 	let sizeBytes: number | undefined;
@@ -29,14 +31,14 @@ export function parseReadImageMeta(section: AgenticSection): ReadImageMeta | nul
 
 	for (const line of lines) {
 		const trimmed = line.trim();
-		if (trimmed.startsWith('Image: ')) {
-			path = trimmed.slice('Image: '.length).trim();
+		if (trimmed.startsWith(PREFIX_IMAGE)) {
+			path = trimmed.slice(PREFIX_IMAGE.length).trim();
 			fileName = path.split('/').pop() ?? path;
-		} else if (trimmed.startsWith('Size: ')) {
-			const match = trimmed.match(/Size:\s*(\d+)\s*bytes/);
+		} else if (trimmed.startsWith(PREFIX_SIZE)) {
+			const match = trimmed.match(new RegExp(`${PREFIX_SIZE}\\s*(\\d+)\\s*bytes`));
 			if (match) sizeBytes = parseInt(match[1], 10);
-		} else if (trimmed.startsWith('MIME: ')) {
-			mimeType = trimmed.slice('MIME: '.length).trim();
+		} else if (trimmed.startsWith(PREFIX_MIME)) {
+			mimeType = trimmed.slice(PREFIX_MIME.length).trim();
 		}
 	}
 
diff --git a/tools/ui/src/lib/constants/read-image.ts b/tools/ui/src/lib/constants/read-image.ts
new file mode 100644
index 000000000000..7346dc013910
--- /dev/null
+++ b/tools/ui/src/lib/constants/read-image.ts
@@ -0,0 +1,3 @@
+export const PREFIX_IMAGE = 'Image: ';
+export const PREFIX_SIZE = 'Size: ';
+export const PREFIX_MIME = 'MIME: ';

From 28d0170ac74f9d2b7a08d057274a0318b8169453 Mon Sep 17 00:00:00 2001
From: ckrafft <ckrafft@epyc>
Date: Thu, 23 Jul 2026 19:03:47 +0200
Subject: [PATCH 3/5] server: rename read_image tool to read_media for images
 and audio

- Rename server_tool_read_image to server_tool_read_media in C++
- Rename enum BuiltInTool.READ_IMAGE to READ_MEDIA
- Rename UI constants, parser, and Svelte component files
- Update display label from 'Read image' to 'Read media'
---
 tools/server/server-tools.cpp                 | 40 ++++++++++---------
 .../ChatMessageToolCallBlock.svelte           |  6 +--
 ... ChatMessageToolCallBlockReadMedia.svelte} | 38 +++++++++---------
 .../parsers/{read-image.ts => read-media.ts}  | 14 +++----
 tools/ui/src/lib/constants/built-in-tools.ts  |  2 +-
 .../{read-image.ts => read-media.ts}          |  2 +-
 tools/ui/src/lib/enums/tools.enums.ts         |  2 +-
 7 files changed, 53 insertions(+), 51 deletions(-)
 rename tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageToolCall/{ChatMessageToolCallBlockReadImage.svelte => ChatMessageToolCallBlockReadMedia.svelte} (66%)
 rename tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageToolCall/parsers/{read-image.ts => read-media.ts} (74%)
 rename tools/ui/src/lib/constants/{read-image.ts => read-media.ts} (65%)

diff --git a/tools/server/server-tools.cpp b/tools/server/server-tools.cpp
index b54bb0469536..dbda477f0b81 100644
--- a/tools/server/server-tools.cpp
+++ b/tools/server/server-tools.cpp
@@ -1116,13 +1116,13 @@ static server_tool & find_tool(std::vector<std::unique_ptr<server_tool>> & tools
 }
 
 //
-// read_image: read an image file and return base64-encoded data with metadata
+// read_media: read a media file (image or audio) and return base64-encoded data with metadata
 //
 
-static constexpr size_t SERVER_TOOL_READ_IMAGE_MAX_SIZE = 16 * 1024 * 1024; // 16 MB
-static constexpr const char* SERVER_TOOL_READ_IMAGE_PREFIX_IMAGE = "Image: ";
-static constexpr const char* SERVER_TOOL_READ_IMAGE_PREFIX_SIZE = "Size: ";
-static constexpr const char* SERVER_TOOL_READ_IMAGE_PREFIX_MIME = "MIME: ";
+static constexpr size_t SERVER_TOOL_READ_MEDIA_MAX_SIZE = 16 * 1024 * 1024; // 16 MB
+static constexpr const char* SERVER_TOOL_READ_MEDIA_PREFIX_FILE = "File: ";
+static constexpr const char* SERVER_TOOL_READ_MEDIA_PREFIX_SIZE = "Size: ";
+static constexpr const char* SERVER_TOOL_READ_MEDIA_PREFIX_MIME = "MIME: ";
 
 static std::string get_mime_from_extension(const std::string & path) {
     static const std::unordered_map<std::string, std::string> mime_map = {
@@ -1140,10 +1140,10 @@ static std::string get_mime_from_extension(const std::string & path) {
     return (it != mime_map.end()) ? it->second : "application/octet-stream";
 }
 
-struct server_tool_read_image : server_tool {
-    server_tool_read_image() {
-        name = "read_image";
-        display_name = "Read image file";
+struct server_tool_read_media : server_tool {
+    server_tool_read_media() {
+        name = "read_media";
+        display_name = "Read media file";
         permission_write = false;
     }
 
@@ -1152,11 +1152,11 @@ struct server_tool_read_image : server_tool {
             {"type", "function"},
             {"function", {
                 {"name", name},
-                {"description", "Read an image file from disk and return it as base64-encoded data with metadata."},
+                {"description", "Read a media file (audio, image) from disk and return it as base64-encoded data with metadata."},
                 {"parameters", {
                     {"type", "object"},
                     {"properties", {
-                        {"path", {{"type", "string"}, {"description", "Absolute path to the image file."}}},
+                        {"path", {{"type", "string"}, {"description", "Absolute path to the media file."}}},
                     }},
                     {"required", json::array({"path"})},
                 }},
@@ -1173,10 +1173,10 @@ struct server_tool_read_image : server_tool {
         if (!io->file_size(path, file_size)) {
             return {{"error", "cannot stat file: " + path}};
         }
-        if (file_size > SERVER_TOOL_READ_IMAGE_MAX_SIZE) {
+        if (file_size > SERVER_TOOL_READ_MEDIA_MAX_SIZE) {
             return {{"error", string_format(
-                "image too large (%zu bytes, max %zu)",
-                (size_t)file_size, SERVER_TOOL_READ_IMAGE_MAX_SIZE)}};
+                "media file too large (%zu bytes, max %zu)",
+                (size_t)file_size, SERVER_TOOL_READ_MEDIA_MAX_SIZE)}};
         }
 
         std::string content;
@@ -1188,16 +1188,18 @@ struct server_tool_read_image : server_tool {
         std::string b64  = base64::encode(content.data(), content.size());
 
         // Return as plain_text_response with a data URI line so the UI can
-        // extract it as an image attachment (via extractBase64Attachments)
+        // extract it as an attachment (via extractBase64Attachments)
+        // and replace it with some placeholder
         std::string data_uri = "data:" + mime + ";base64," + b64;
 
         return {
             {"plain_text_response",
                 string_format(
                     "%s%s\n%s%zu bytes\n%s%s\n%s",
-                    SERVER_TOOL_READ_IMAGE_PREFIX_IMAGE, path.c_str(),
-                    SERVER_TOOL_READ_IMAGE_PREFIX_SIZE, (size_t)file_size,
-                    SERVER_TOOL_READ_IMAGE_PREFIX_MIME, mime.c_str(), data_uri.c_str())},
+                    SERVER_TOOL_READ_MEDIA_PREFIX_FILE, path.c_str(),
+                    SERVER_TOOL_READ_MEDIA_PREFIX_SIZE, (size_t)file_size,
+                    SERVER_TOOL_READ_MEDIA_PREFIX_MIME, mime.c_str(),
+                    data_uri.c_str())},
             {"path", path},
             {"mime", mime},
             {"size_bytes", (int)file_size},
@@ -1219,7 +1221,7 @@ static std::vector<std::unique_ptr<server_tool>> build_tools() {
     tools.push_back(std::make_unique<server_tool_write_file>());
     tools.push_back(std::make_unique<server_tool_edit_file>());
     tools.push_back(std::make_unique<server_tool_get_datetime>());
-    tools.push_back(std::make_unique<server_tool_read_image>());
+    tools.push_back(std::make_unique<server_tool_read_media>());
     return tools;
 }
 
diff --git a/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageToolCall/ChatMessageToolCallBlock.svelte b/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageToolCall/ChatMessageToolCallBlock.svelte
index c1aa2e11b062..56c571223fb4 100644
--- a/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageToolCall/ChatMessageToolCallBlock.svelte
+++ b/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageToolCall/ChatMessageToolCallBlock.svelte
@@ -14,7 +14,7 @@
 	import ChatMessageToolCallBlockGetDatetime from './ChatMessageToolCallBlockGetDatetime.svelte';
 	import ChatMessageToolCallBlockGrepSearch from './ChatMessageToolCallBlockGrepSearch.svelte';
 	import ChatMessageToolCallBlockReadFile from './ChatMessageToolCallBlockReadFile.svelte';
-	import ChatMessageToolCallBlockReadImage from './ChatMessageToolCallBlockReadImage.svelte';
+	import ChatMessageToolCallBlockReadMedia from './ChatMessageToolCallBlockReadMedia.svelte';
 	import ChatMessageToolCallBlockRunJavascript from './ChatMessageToolCallBlockRunJavascript.svelte';
 	import ChatMessageToolCallBlockSearchResults from './ChatMessageToolCallBlockSearchResults.svelte';
 	import ChatMessageToolCallBlockWriteFile from './ChatMessageToolCallBlockWriteFile.svelte';
@@ -43,8 +43,8 @@
 	<ChatMessageToolCallBlockGetDatetime {section} {isStreaming} />
 {:else if section.toolName === BuiltInTool.READ_FILE}
 	<ChatMessageToolCallBlockReadFile {section} {open} {isStreaming} {onToggle} />
-{:else if section.toolName === BuiltInTool.READ_IMAGE}
-	<ChatMessageToolCallBlockReadImage {section} {open} {isStreaming} {onToggle} />
+{:else if section.toolName === BuiltInTool.READ_MEDIA}
+	<ChatMessageToolCallBlockReadMedia {section} {open} {isStreaming} {onToggle} />
 {:else if section.toolName === BuiltInTool.EDIT_FILE}
 	<ChatMessageToolCallBlockEditFile {section} {open} {isStreaming} {onToggle} />
 {:else if section.toolName === BuiltInTool.WRITE_FILE}
diff --git a/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageToolCall/ChatMessageToolCallBlockReadImage.svelte b/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageToolCall/ChatMessageToolCallBlockReadMedia.svelte
similarity index 66%
rename from tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageToolCall/ChatMessageToolCallBlockReadImage.svelte
rename to tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageToolCall/ChatMessageToolCallBlockReadMedia.svelte
index a73252fefa7d..e42897112522 100644
--- a/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageToolCall/ChatMessageToolCallBlockReadImage.svelte
+++ b/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageToolCall/ChatMessageToolCallBlockReadMedia.svelte
@@ -4,7 +4,7 @@
 	import { ATTACHMENT_SAVED_REGEX } from '$lib/constants/agentic';
 	import type { DatabaseMessageExtra, DatabaseMessageExtraImageFile } from '$lib/types';
 	import { type AgenticSection } from '$lib/utils';
-	import { parseReadImageMeta } from './parsers/read-image';
+	import { parseReadMediaMeta } from './parsers/read-media';
 	import ToolCallBlock from './ToolCallBlock.svelte';
 
 	interface Props {
@@ -16,12 +16,12 @@
 
 	let { section, open, isStreaming, onToggle }: Props = $props();
 
-	const readImageMeta = $derived(parseReadImageMeta(section));
+	const readMediaMeta = $derived(parseReadMediaMeta(section));
 
-	// Find the image attachment from toolResultExtras (attached to the tool result message.
+	// Find the attachment from toolResultExtras (attached to the tool result message.
 	// The extractBase64Attachments function in agentic.svelte.ts replaces the data URI line
 	// with [Attachment saved: name] and stores the base64 as an extra.
-	const imageAttachment = $derived.by(() => {
+	const mediaAttachment = $derived.by(() => {
 		const extras = section.toolResultExtras;
 		if (!extras || extras.length === 0) return null;
 		// Extract the attachment name from the cleaned result text
@@ -35,46 +35,46 @@
 	});
 </script>
 
-<ToolCallBlock {section} {open} {isStreaming} meta={readImageMeta} {onToggle}>
+<ToolCallBlock {section} {open} {isStreaming} meta={readMediaMeta} {onToggle}>
 	{#snippet titleSnippet()}
-		<span class="text-muted-foreground">Read image </span>
-		<span class="font-mono">{readImageMeta?.fileName}</span>
+		<span class="text-muted-foreground">Read media </span>
+		<span class="font-mono">{readMediaMeta?.fileName}</span>
 	{/snippet}
 
 	{#snippet children(_meta, _ctx)}
 		{#if section.toolResult}
-			{#if imageAttachment}
+			{#if mediaAttachment}
 				<div class="mt-2">
 					<img
-						src={imageAttachment.base64Url}
-						alt={readImageMeta?.fileName ?? 'image'}
+						src={mediaAttachment.base64Url}
+						alt={readMediaMeta?.fileName ?? 'media'}
 						class="max-h-[60vh] max-w-full rounded-lg object-contain shadow-lg"
 						loading="lazy"
 					/>
 				</div>
 			{:else}
 				<div class="rounded bg-muted/20 p-2 text-xs text-muted-foreground/70 italic">
-					Image attachment not found in message extras
+					Media attachment not found in message extras
 				</div>
 			{/if}
 
-			{#if readImageMeta?.sizeBytes || readImageMeta?.mimeType}
+			{#if readMediaMeta?.sizeBytes || readMediaMeta?.mimeType}
 				<div class="mt-2 flex gap-4 text-xs text-muted-foreground">
-					{#if readImageMeta?.sizeBytes}
-						<span>Size: {readImageMeta.sizeBytes} bytes</span>
+					{#if readMediaMeta?.sizeBytes}
+						<span>Size: {readMediaMeta.sizeBytes} bytes</span>
 					{/if}
-					{#if readImageMeta?.mimeType}
-						<span>MIME: {readImageMeta.mimeType}</span>
+					{#if readMediaMeta?.mimeType}
+						<span>MIME: {readMediaMeta.mimeType}</span>
 					{/if}
 				</div>
 			{/if}
 
-			{#if readImageMeta?.path}
-				<div class="mt-1 text-xs text-muted-foreground/60 font-mono">{readImageMeta.path}</div>
+			{#if readMediaMeta?.path}
+				<div class="mt-1 text-xs text-muted-foreground/60 font-mono">{readMediaMeta.path}</div>
 			{/if}
 		{:else}
 			<div class="rounded bg-muted/20 p-2 text-xs text-muted-foreground/70 italic">
-				Waiting for image data...
+				Waiting for media data...
 			</div>
 		{/if}
 	{/snippet}
diff --git a/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageToolCall/parsers/read-image.ts b/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageToolCall/parsers/read-media.ts
similarity index 74%
rename from tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageToolCall/parsers/read-image.ts
rename to tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageToolCall/parsers/read-media.ts
index 61d234a04977..cc3fb634258c 100644
--- a/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageToolCall/parsers/read-image.ts
+++ b/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageToolCall/parsers/read-media.ts
@@ -1,8 +1,8 @@
 import type { AgenticSection } from '$lib/utils';
 import { NEWLINE } from '$lib/constants/code';
-import { PREFIX_IMAGE, PREFIX_SIZE, PREFIX_MIME } from '$lib/constants/read-image';
+import { PREFIX_FILE, PREFIX_SIZE, PREFIX_MIME } from '$lib/constants/read-media';
 
-export interface ReadImageMeta {
+export interface ReadMediaMeta {
 	fileName: string;
 	path: string;
 	sizeBytes?: number;
@@ -10,9 +10,9 @@ export interface ReadImageMeta {
 }
 
 /**
- * Parse read_image tool result to extract metadata.
+ * Parse read_media tool result to extract metadata.
  * Expected format (after extractBase64Attachments processing):
- *   Image: /path/to/file.png
+ *   File: /path/to/file.png
  *   Size: 12345 bytes
  *   MIME: image/png
  *   [Attachment saved: mcp-attachment-xxx.png]
@@ -20,7 +20,7 @@ export interface ReadImageMeta {
  * The data URI line is replaced by the attachment marker by
  * agenticStore.extractBase64Attachments before storage.
  */
-export function parseReadImageMeta(section: AgenticSection): ReadImageMeta | null {
+export function parseReadMediaMeta(section: AgenticSection): ReadMediaMeta | null {
 	if (!section.toolResult) return null;
 
 	const lines = section.toolResult.split(NEWLINE);
@@ -31,8 +31,8 @@ export function parseReadImageMeta(section: AgenticSection): ReadImageMeta | nul
 
 	for (const line of lines) {
 		const trimmed = line.trim();
-		if (trimmed.startsWith(PREFIX_IMAGE)) {
-			path = trimmed.slice(PREFIX_IMAGE.length).trim();
+		if (trimmed.startsWith(PREFIX_FILE)) {
+			path = trimmed.slice(PREFIX_FILE.length).trim();
 			fileName = path.split('/').pop() ?? path;
 		} else if (trimmed.startsWith(PREFIX_SIZE)) {
 			const match = trimmed.match(new RegExp(`${PREFIX_SIZE}\\s*(\\d+)\\s*bytes`));
diff --git a/tools/ui/src/lib/constants/built-in-tools.ts b/tools/ui/src/lib/constants/built-in-tools.ts
index 70c09f217246..da58923c2681 100644
--- a/tools/ui/src/lib/constants/built-in-tools.ts
+++ b/tools/ui/src/lib/constants/built-in-tools.ts
@@ -29,7 +29,7 @@ export interface BuiltinToolUiEntry {
 
 export const BUILTIN_TOOL_UI: Readonly<Record<BuiltInTool, BuiltinToolUiEntry>> = {
 	[BuiltInTool.READ_FILE]: { icon: FileText, label: 'Read file', source: ToolSource.BUILTIN },
-	[BuiltInTool.READ_IMAGE]: { icon: Eye, label: 'Read image', source: ToolSource.BUILTIN },
+	[BuiltInTool.READ_MEDIA]: { icon: Eye, label: 'Read media', source: ToolSource.BUILTIN },
 	[BuiltInTool.EDIT_FILE]: { icon: FilePen, label: 'Edit file', source: ToolSource.BUILTIN },
 	[BuiltInTool.WRITE_FILE]: { icon: FilePlus, label: 'Write file', source: ToolSource.BUILTIN },
 	[BuiltInTool.FILE_GLOB_SEARCH]: {
diff --git a/tools/ui/src/lib/constants/read-image.ts b/tools/ui/src/lib/constants/read-media.ts
similarity index 65%
rename from tools/ui/src/lib/constants/read-image.ts
rename to tools/ui/src/lib/constants/read-media.ts
index 7346dc013910..7fbda2f1d729 100644
--- a/tools/ui/src/lib/constants/read-image.ts
+++ b/tools/ui/src/lib/constants/read-media.ts
@@ -1,3 +1,3 @@
-export const PREFIX_IMAGE = 'Image: ';
+export const PREFIX_FILE = 'File: ';
 export const PREFIX_SIZE = 'Size: ';
 export const PREFIX_MIME = 'MIME: ';
diff --git a/tools/ui/src/lib/enums/tools.enums.ts b/tools/ui/src/lib/enums/tools.enums.ts
index 0a0657e3ee4a..85ceea506e02 100644
--- a/tools/ui/src/lib/enums/tools.enums.ts
+++ b/tools/ui/src/lib/enums/tools.enums.ts
@@ -27,7 +27,7 @@ export enum ToolResponseField {
  */
 export enum BuiltInTool {
 	READ_FILE = 'read_file',
-	READ_IMAGE = 'read_image',
+	READ_MEDIA = 'read_media',
 	EDIT_FILE = 'edit_file',
 	WRITE_FILE = 'write_file',
 	GET_DATETIME = 'get_datetime',

From 95fa8872ede8cd203a2cd7356741886b7aacd44e Mon Sep 17 00:00:00 2001
From: ckrafft <ckrafft@epyc>
Date: Fri, 24 Jul 2026 01:34:07 +0200
Subject: [PATCH 4/5] server: add audio file support to read_media tool

- rename parseToolResultWithImages to parseToolResultWithMedia
- update all consumers (Default, ExecShellCommand blocks) to use line.media
- rename image to media in ToolResultLine and parseToolResultWithMedia, it now holds images and audio
- server-tools.cpp: add audio MIME types to get_mime_from_extension()
- extend extractBase64Attachments() to detect audio/ MIME types and create AudioFile extras with base64Url
- add AUDIO_MIME_TO_EXTENSION to mcp-resource.ts constants alongside IMAGE_MIME_TO_EXTENSION
- widen ToolResultLine.image type to include DatabaseMessageExtraAudioFile
- ChatMessageToolCallBlockReadMedia renders now <audio> for audio files
- ChatMessageToolCallBlockDefault fallback renderer now also handles audio attachments
---
 tools/server/server-tools.cpp                 |  8 +++++
 .../ChatMessageToolCallBlockDefault.svelte    | 29 ++++++++++------
 ...essageToolCallBlockExecShellCommand.svelte | 10 +++---
 .../ChatMessageToolCallBlockReadMedia.svelte  | 34 +++++++++++++------
 tools/ui/src/lib/constants/mcp-resource.ts    | 21 +++++++++++-
 tools/ui/src/lib/stores/agentic.svelte.ts     | 20 ++++++++++-
 tools/ui/src/lib/utils/agentic.ts             | 17 +++++-----
 tools/ui/src/lib/utils/index.ts               |  2 +-
 8 files changed, 104 insertions(+), 37 deletions(-)

diff --git a/tools/server/server-tools.cpp b/tools/server/server-tools.cpp
index dbda477f0b81..b0ab3f89dc37 100644
--- a/tools/server/server-tools.cpp
+++ b/tools/server/server-tools.cpp
@@ -1126,6 +1126,7 @@ static constexpr const char* SERVER_TOOL_READ_MEDIA_PREFIX_MIME = "MIME: ";
 
 static std::string get_mime_from_extension(const std::string & path) {
     static const std::unordered_map<std::string, std::string> mime_map = {
+        // Images
         {".png",  "image/png"},
         {".jpg",  "image/jpeg"},
         {".jpeg", "image/jpeg"},
@@ -1134,6 +1135,13 @@ static std::string get_mime_from_extension(const std::string & path) {
         {".tiff", "image/tiff"},
         {".tif",  "image/tiff"},
         {".gif",  "image/gif"},
+        // Audio
+        {".mp3",  "audio/mpeg"},
+        {".wav",  "audio/wav"},
+        {".ogg",  "audio/ogg"},
+        {".flac", "audio/flac"},
+        {".m4a",  "audio/mp4"},
+        {".opus", "audio/opus"},
     };
     auto ext = fs::path(path).extension().string();
     auto it = mime_map.find(ext);
diff --git a/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageToolCall/ChatMessageToolCallBlockDefault.svelte b/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageToolCall/ChatMessageToolCallBlockDefault.svelte
index acf2de12ac64..92cd66149e52 100644
--- a/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageToolCall/ChatMessageToolCallBlockDefault.svelte
+++ b/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageToolCall/ChatMessageToolCallBlockDefault.svelte
@@ -10,7 +10,7 @@
 	import {
 		classifyToolResult,
 		formatJsonPretty,
-		parseToolResultWithImages,
+		parseToolResultWithMedia,
 		type AgenticSection,
 		type ToolResultLine
 	} from '$lib/utils';
@@ -31,7 +31,7 @@
 	const title = $derived(getBuiltinToolUi(section.toolName)?.label ?? section.toolName ?? '');
 
 	const parsedLines: ToolResultLine[] = $derived(
-		section.toolResult ? parseToolResultWithImages(section.toolResult, attachments) : []
+		section.toolResult ? parseToolResultWithMedia(section.toolResult, attachments) : []
 	);
 	const outputKind = $derived(classifyToolResult(section.toolResult));
 </script>
@@ -105,14 +105,23 @@
 							<div class="font-mono text-[11px] leading-relaxed whitespace-pre-wrap">
 								{line.text}
 							</div>
-							{#if line.image}
-								<img
-									src={line.image.base64Url}
-									alt={line.image.name}
-									class="mt-2 mb-2 h-auto max-w-full rounded-lg"
-									loading="lazy"
-								/>
-							{/if}
+							{#if line.media}
+								{#if line.media.type === 'AUDIO'}
+									<div class="mt-2 mb-2">
+										<audio controls class="w-full rounded-lg">
+											<source src={line.media.base64Url} type={line.media.mimeType ?? 'audio/mpeg'} />
+											Your browser does not support the audio element.
+										</audio>
+									</div>
+								{:else}
+									<img
+										src={line.media.base64Url}
+										alt={line.media.name}
+										class="mt-2 mb-2 h-auto max-w-full rounded-lg"
+										loading="lazy"
+									/>
+									{/if}
+								{/if}
 						{/each}
 					</div>
 				{/if}
diff --git a/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageToolCall/ChatMessageToolCallBlockExecShellCommand.svelte b/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageToolCall/ChatMessageToolCallBlockExecShellCommand.svelte
index 5de801d39a48..00c422244f93 100644
--- a/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageToolCall/ChatMessageToolCallBlockExecShellCommand.svelte
+++ b/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageToolCall/ChatMessageToolCallBlockExecShellCommand.svelte
@@ -16,7 +16,7 @@
 		isExitCodeSummaryLine,
 		parseExecShellCommandError,
 		parseExecShellCommandExitStatus,
-		parseToolResultWithImages,
+		parseToolResultWithMedia,
 		type AgenticSection,
 		type ExecShellExitStatus,
 		type ToolResultLine
@@ -51,7 +51,7 @@
 	);
 
 	const parsedLines: ToolResultLine[] = $derived(
-		section.toolResult ? parseToolResultWithImages(section.toolResult, attachments) : []
+		section.toolResult ? parseToolResultWithMedia(section.toolResult, attachments) : []
 	);
 
 	// Drop the trailing "[exit code: N]" line - rendered as a colored
@@ -200,10 +200,10 @@
 			>
 				{#each outputLines as line, i (i)}
 					<div class="font-mono text-[11px] leading-relaxed whitespace-pre-wrap">{line.text}</div>
-					{#if line.image}
+					{#if line.media}
 						<img
-							src={line.image.base64Url}
-							alt={line.image.name}
+							src={line.media.base64Url}
+							alt={line.media.name}
 							class="mt-2 mb-2 h-auto max-w-full rounded-lg"
 							loading="lazy"
 						/>
diff --git a/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageToolCall/ChatMessageToolCallBlockReadMedia.svelte b/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageToolCall/ChatMessageToolCallBlockReadMedia.svelte
index e42897112522..38498bacef12 100644
--- a/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageToolCall/ChatMessageToolCallBlockReadMedia.svelte
+++ b/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageToolCall/ChatMessageToolCallBlockReadMedia.svelte
@@ -2,7 +2,7 @@
 	import { Eye } from '@lucide/svelte';
 	import { AttachmentType } from '$lib/enums';
 	import { ATTACHMENT_SAVED_REGEX } from '$lib/constants/agentic';
-	import type { DatabaseMessageExtra, DatabaseMessageExtraImageFile } from '$lib/types';
+	import type { DatabaseMessageExtra, DatabaseMessageExtraImageFile, DatabaseMessageExtraAudioFile } from '$lib/types';
 	import { type AgenticSection } from '$lib/utils';
 	import { parseReadMediaMeta } from './parsers/read-media';
 	import ToolCallBlock from './ToolCallBlock.svelte';
@@ -29,10 +29,13 @@
 		if (!match) return null;
 		const attachmentName = match[1];
 		return extras.find(
-			(e): e is DatabaseMessageExtraImageFile =>
-				e.type === AttachmentType.IMAGE && e.name === attachmentName
+			(e): e is DatabaseMessageExtraImageFile | DatabaseMessageExtraAudioFile =>
+				(e.type === AttachmentType.IMAGE || e.type === AttachmentType.AUDIO) &&
+				e.name === attachmentName
 		) ?? null;
 	});
+
+	const isAudio = $derived(mediaAttachment?.type === AttachmentType.AUDIO);
 </script>
 
 <ToolCallBlock {section} {open} {isStreaming} meta={readMediaMeta} {onToggle}>
@@ -44,14 +47,23 @@
 	{#snippet children(_meta, _ctx)}
 		{#if section.toolResult}
 			{#if mediaAttachment}
-				<div class="mt-2">
-					<img
-						src={mediaAttachment.base64Url}
-						alt={readMediaMeta?.fileName ?? 'media'}
-						class="max-h-[60vh] max-w-full rounded-lg object-contain shadow-lg"
-						loading="lazy"
-					/>
-				</div>
+				{#if isAudio}
+					<div class="mt-2">
+						<audio controls class="w-full rounded-lg">
+							<source src={mediaAttachment.base64Url} type={readMediaMeta?.mimeType ?? 'audio/mpeg'} />
+							Your browser does not support the audio element.
+						</audio>
+					</div>
+				{:else}
+					<div class="mt-2">
+						<img
+							src={mediaAttachment.base64Url}
+							alt={readMediaMeta?.fileName ?? 'media'}
+							class="max-h-[60vh] max-w-full rounded-lg object-contain shadow-lg"
+							loading="lazy"
+						/>
+					</div>
+				{/if}
 			{:else}
 				<div class="rounded bg-muted/20 p-2 text-xs text-muted-foreground/70 italic">
 					Media attachment not found in message extras
diff --git a/tools/ui/src/lib/constants/mcp-resource.ts b/tools/ui/src/lib/constants/mcp-resource.ts
index 44419012d16f..66f07c51120d 100644
--- a/tools/ui/src/lib/constants/mcp-resource.ts
+++ b/tools/ui/src/lib/constants/mcp-resource.ts
@@ -1,7 +1,8 @@
-import { MimeTypeImage } from '$lib/enums';
+import { MimeTypeAudio, MimeTypeImage } from '$lib/enums';
 
 // File extension patterns for resource type detection
 export const IMAGE_FILE_EXTENSION_REGEX = /\.(png|jpg|jpeg|gif|svg|webp)$/i;
+export const AUDIO_FILE_EXTENSION_REGEX = /\.(mp3|wav|ogg|flac|m4a|opus)$/i;
 export const CODE_FILE_EXTENSION_REGEX =
 	/\.(js|ts|json|yaml|yml|xml|html|css|py|rs|go|java|cpp|c|h|rb|sh|toml)$/i;
 export const TEXT_FILE_EXTENSION_REGEX = /\.(txt|md|log)$/i;
@@ -53,3 +54,21 @@ export const IMAGE_MIME_TO_EXTENSION: Record<string, string> = {
 	[MimeTypeImage.GIF]: 'gif',
 	[MimeTypeImage.WEBP]: 'webp'
 } as const;
+
+/**
+ * Mapping from audio MIME types to file extensions.
+ * Used for generating attachment filenames from MIME types.
+ */
+export const AUDIO_MIME_TO_EXTENSION: Record<string, string> = {
+	[MimeTypeAudio.MP3_MPEG]: 'mp3',
+	[MimeTypeAudio.MP3]: 'mp3',
+	[MimeTypeAudio.MP4]: 'm4a',
+	[MimeTypeAudio.WAV]: 'wav',
+	[MimeTypeAudio.WAVE]: 'wav',
+	[MimeTypeAudio.X_WAV]: 'wav',
+	[MimeTypeAudio.X_WAVE]: 'wav',
+	[MimeTypeAudio.VND_WAVE]: 'wav',
+	[MimeTypeAudio.X_PN_WAV]: 'wav',
+	[MimeTypeAudio.WEBM]: 'webm',
+	[MimeTypeAudio.WEBM_OPUS]: 'opus'
+} as const;
diff --git a/tools/ui/src/lib/stores/agentic.svelte.ts b/tools/ui/src/lib/stores/agentic.svelte.ts
index 4ced749eac9a..c9495abed7e1 100644
--- a/tools/ui/src/lib/stores/agentic.svelte.ts
+++ b/tools/ui/src/lib/stores/agentic.svelte.ts
@@ -34,9 +34,11 @@ import { isAbortError } from '$lib/utils';
 import { DEFAULT_AGENTIC_CONFIG, NEWLINE } from '$lib/constants';
 import {
 	IMAGE_MIME_TO_EXTENSION,
+	AUDIO_MIME_TO_EXTENSION,
 	DATA_URI_BASE64_REGEX,
 	MCP_ATTACHMENT_NAME_PREFIX,
-	DEFAULT_IMAGE_EXTENSION
+	DEFAULT_IMAGE_EXTENSION,
+	AUDIO_FILE_EXTENSION_REGEX
 } from '$lib/constants';
 import {
 	AttachmentType,
@@ -1030,6 +1032,17 @@ class AgenticStore {
 				return `[Attachment saved: ${name}]`;
 			}
 
+			if (mimeType.startsWith('audio/')) {
+				attachments.push({
+					type: AttachmentType.AUDIO,
+					name,
+					mimeType,
+					base64Url: trimmedLine
+				});
+
+				return `[Attachment saved: ${name}]`;
+			}
+
 			return line;
 		});
 
@@ -1037,6 +1050,11 @@ class AgenticStore {
 	}
 
 	private buildAttachmentName(mimeType: string, index: number): string {
+		if (mimeType.startsWith('audio/')) {
+			const extension = AUDIO_MIME_TO_EXTENSION[mimeType] ?? 'mp3';
+			return `${MCP_ATTACHMENT_NAME_PREFIX}-${Date.now()}-${index}.${extension}`;
+		}
+
 		const extension = IMAGE_MIME_TO_EXTENSION[mimeType] ?? DEFAULT_IMAGE_EXTENSION;
 
 		return `${MCP_ATTACHMENT_NAME_PREFIX}-${Date.now()}-${index}.${extension}`;
diff --git a/tools/ui/src/lib/utils/agentic.ts b/tools/ui/src/lib/utils/agentic.ts
index aa8c287c3ab5..9d83b2ada038 100644
--- a/tools/ui/src/lib/utils/agentic.ts
+++ b/tools/ui/src/lib/utils/agentic.ts
@@ -47,11 +47,11 @@ export interface AgenticSection {
 }
 
 /**
- * Represents a tool result line that may reference an image attachment
+ * Represents a tool result line that may reference a media attachment (image or audio)
  */
 export type ToolResultLine = {
 	text: string;
-	image?: DatabaseMessageExtraImageFile;
+	media?: DatabaseMessageExtraImageFile | DatabaseMessageExtraAudioFile;
 };
 
 /**
@@ -282,9 +282,9 @@ export function splitSearchSummaryList(
 }
 
 /**
- * Parse tool result text into lines, matching image attachments by name.
+ * Parse tool result text into lines, matching media attachments (images and audio) by name.
  */
-export function parseToolResultWithImages(
+export function parseToolResultWithMedia(
 	toolResult: string,
 	extras?: DatabaseMessageExtra[]
 ): ToolResultLine[] {
@@ -294,12 +294,13 @@ export function parseToolResultWithImages(
 		if (!match || !extras) return { text: line };
 
 		const attachmentName = match[1];
-		const image = extras.find(
-			(e): e is DatabaseMessageExtraImageFile =>
-				e.type === AttachmentType.IMAGE && e.name === attachmentName
+		const media = extras.find(
+			(e): e is DatabaseMessageExtraImageFile | DatabaseMessageExtraAudioFile =>
+				(e.type === AttachmentType.IMAGE || e.type === AttachmentType.AUDIO) &&
+				e.name === attachmentName
 		);
 
-		return { text: line, image };
+		return { text: line, media };
 	});
 }
 
diff --git a/tools/ui/src/lib/utils/index.ts b/tools/ui/src/lib/utils/index.ts
index f829793f1c7c..ccdcc722aa96 100644
--- a/tools/ui/src/lib/utils/index.ts
+++ b/tools/ui/src/lib/utils/index.ts
@@ -162,7 +162,7 @@ export { parseHeadersToArray, serializeHeaders } from './headers';
 export {
 	deriveAgenticSections,
 	buildAssistantRawOutput,
-	parseToolResultWithImages,
+	parseToolResultWithMedia,
 	splitSearchSummaryList,
 	hasAgenticContent,
 	classifyToolResult,

From 402c47bc49317c06f1efaefb07f86cbf7f6fd58d Mon Sep 17 00:00:00 2001
From: ckrafft <ckrafft@epyc>
Date: Fri, 24 Jul 2026 16:48:57 +0200
Subject: [PATCH 5/5] server: move read_media tool to the other tools

---
 tools/server/server-tools.cpp | 107 +++++++++++++++++-----------------
 1 file changed, 54 insertions(+), 53 deletions(-)

diff --git a/tools/server/server-tools.cpp b/tools/server/server-tools.cpp
index b0ab3f89dc37..4e285964be2a 100644
--- a/tools/server/server-tools.cpp
+++ b/tools/server/server-tools.cpp
@@ -1062,59 +1062,6 @@ struct server_tool_get_datetime : server_tool {
     }
 };
 
-struct server_tool_stream_result : server_task_result {
-    std::string chunk;
-    bool done = false;
-    std::string error_msg;
-
-    json to_json() override {
-        if (!done) {
-            return {{"chunk", chunk}};
-        } else {
-            json result = {{"done", true}};
-            if (!error_msg.empty()) {
-                result["error"] = error_msg;
-            }
-            return result;
-        }
-    }
-};
-
-void server_tool::stream::push(const std::string & chunk) {
-    if (chunk.empty()) return;
-    auto r = std::make_unique<server_tool_stream_result>();
-    r->id    = id;
-    r->chunk = chunk;
-    qr.send(std::move(r));
-}
-
-struct server_tools_res : server_http_res {
-    std::thread worker;
-    server_response * qr = nullptr; // set only for streaming responses
-    int id = -1;
-
-    ~server_tools_res() override {
-        if (worker.joinable()) {
-            worker.join();
-        }
-        if (qr) {
-            qr->remove_waiting_task_id(id);
-        }
-    }
-};
-
-static server_tool & find_tool(std::vector<std::unique_ptr<server_tool>> & tools, const std::string & name, bool require_stream) {
-    for (auto & t : tools) {
-        if (t->name == name) {
-            if (require_stream && !t->support_stream) {
-                throw std::invalid_argument(string_format("tool \"%s\" does not support stream = true", name.c_str()));
-            }
-            return *t;
-        }
-    }
-    throw std::invalid_argument(string_format("unknown tool \"%s\"", name.c_str()));
-}
-
 //
 // read_media: read a media file (image or audio) and return base64-encoded data with metadata
 //
@@ -1215,6 +1162,60 @@ struct server_tool_read_media : server_tool {
     }
 };
 
+
+struct server_tool_stream_result : server_task_result {
+    std::string chunk;
+    bool done = false;
+    std::string error_msg;
+
+    json to_json() override {
+        if (!done) {
+            return {{"chunk", chunk}};
+        } else {
+            json result = {{"done", true}};
+            if (!error_msg.empty()) {
+                result["error"] = error_msg;
+            }
+            return result;
+        }
+    }
+};
+
+void server_tool::stream::push(const std::string & chunk) {
+    if (chunk.empty()) return;
+    auto r = std::make_unique<server_tool_stream_result>();
+    r->id    = id;
+    r->chunk = chunk;
+    qr.send(std::move(r));
+}
+
+struct server_tools_res : server_http_res {
+    std::thread worker;
+    server_response * qr = nullptr; // set only for streaming responses
+    int id = -1;
+
+    ~server_tools_res() override {
+        if (worker.joinable()) {
+            worker.join();
+        }
+        if (qr) {
+            qr->remove_waiting_task_id(id);
+        }
+    }
+};
+
+static server_tool & find_tool(std::vector<std::unique_ptr<server_tool>> & tools, const std::string & name, bool require_stream) {
+    for (auto & t : tools) {
+        if (t->name == name) {
+            if (require_stream && !t->support_stream) {
+                throw std::invalid_argument(string_format("tool \"%s\" does not support stream = true", name.c_str()));
+            }
+            return *t;
+        }
+    }
+    throw std::invalid_argument(string_format("unknown tool \"%s\"", name.c_str()));
+}
+
 //
 //
 // public API