+
{images.map((img, i) => (
toMediaAttachment(m))
+ : ev.media?.map((url) => toMediaAttachment({ url }));
+
// A complete (non-streamed) assistant message. If a stream was in
// flight, drop the placeholder so we don't render the text twice.
const activeId = buffer.current?.messageId;
@@ -162,6 +167,7 @@ export function useNanobotStream(
role: "assistant",
content: ev.text,
createdAt: Date.now(),
+ ...(media && media.length > 0 ? { media } : {}),
},
];
});
diff --git a/webui/src/hooks/useSessions.ts b/webui/src/hooks/useSessions.ts
index ea51c2206..719d4ce16 100644
--- a/webui/src/hooks/useSessions.ts
+++ b/webui/src/hooks/useSessions.ts
@@ -9,6 +9,7 @@ import {
listSessions,
} from "@/lib/api";
import { deriveTitle } from "@/lib/format";
+import { toMediaAttachment } from "@/lib/media";
import type { ChatSummary, UIMessage } from "@/lib/types";
const EMPTY_MESSAGES: UIMessage[] = [];
@@ -123,17 +124,16 @@ export function useSessionHistory(key: string | null): {
const ui: UIMessage[] = body.messages.flatMap((m, idx) => {
if (m.role !== "user" && m.role !== "assistant") return [];
if (typeof m.content !== "string") return [];
- // Hydrate signed media URLs into the bubble's ``images`` slot so
- // historical user turns render real previews (the live-send path
- // uses data URLs; both shapes converge on the same ``UIImage``).
+ // Hydrate signed media URLs into generic UI attachments. Image-only
+ // user turns still populate the legacy ``images`` slot so the
+ // existing optimistic-send and lightbox paths remain unchanged.
+ const media =
+ Array.isArray(m.media_urls) && m.media_urls.length > 0
+ ? m.media_urls.map((mu) => toMediaAttachment(mu))
+ : undefined;
const images =
- m.role === "user" &&
- Array.isArray(m.media_urls) &&
- m.media_urls.length > 0
- ? m.media_urls.map((mu) => ({
- url: mu.url,
- name: mu.name,
- }))
+ m.role === "user" && media?.every((item) => item.kind === "image")
+ ? media.map((item) => ({ url: item.url, name: item.name }))
: undefined;
return [
{
@@ -142,6 +142,7 @@ export function useSessionHistory(key: string | null): {
content: m.content,
createdAt: m.timestamp ? Date.parse(m.timestamp) : Date.now(),
...(images ? { images } : {}),
+ ...(media ? { media } : {}),
},
];
});
diff --git a/webui/src/lib/media.ts b/webui/src/lib/media.ts
new file mode 100644
index 000000000..399bc33a5
--- /dev/null
+++ b/webui/src/lib/media.ts
@@ -0,0 +1,59 @@
+import type { UIMediaAttachment, UIMediaKind } from "@/lib/types";
+
+const IMAGE_EXTENSIONS = new Set([
+ ".png",
+ ".jpg",
+ ".jpeg",
+ ".gif",
+ ".webp",
+ ".bmp",
+ ".ico",
+ ".tif",
+ ".tiff",
+]);
+
+const VIDEO_EXTENSIONS = new Set([
+ ".mp4",
+ ".webm",
+ ".mov",
+ ".m4v",
+ ".avi",
+ ".mkv",
+ ".3gp",
+]);
+
+function cleanPath(value: string): string {
+ return value.split(/[?#]/, 1)[0]?.toLowerCase() ?? "";
+}
+
+function extensionOf(value?: string): string {
+ if (!value) return "";
+ const path = cleanPath(value);
+ const dot = path.lastIndexOf(".");
+ if (dot < 0) return "";
+ return path.slice(dot);
+}
+
+export function inferMediaKind(media: { url?: string; name?: string }): UIMediaKind {
+ const url = media.url ?? "";
+ if (url.startsWith("data:image/")) return "image";
+ if (url.startsWith("data:video/")) return "video";
+
+ const ext = extensionOf(media.name) || extensionOf(url);
+ if (IMAGE_EXTENSIONS.has(ext)) return "image";
+ if (VIDEO_EXTENSIONS.has(ext)) return "video";
+ return "file";
+}
+
+export function toMediaAttachment(media: {
+ url?: string;
+ name?: string;
+ kind?: UIMediaKind;
+}): UIMediaAttachment {
+ return {
+ kind: media.kind ?? inferMediaKind(media),
+ url: media.url,
+ name: media.name,
+ };
+}
+
diff --git a/webui/src/lib/types.ts b/webui/src/lib/types.ts
index 6ffc75a95..245a65bd7 100644
--- a/webui/src/lib/types.ts
+++ b/webui/src/lib/types.ts
@@ -22,6 +22,14 @@ export interface UIImage {
name?: string;
}
+export type UIMediaKind = "image" | "video" | "file";
+
+export interface UIMediaAttachment {
+ kind: UIMediaKind;
+ url?: string;
+ name?: string;
+}
+
export interface UIMessage {
id: string;
role: Role;
@@ -34,6 +42,8 @@ export interface UIMessage {
traces?: string[];
/** User turn: optimistic blob URLs for preview. Replay: placeholder chips. */
images?: UIImage[];
+ /** Signed or local UI-renderable media attachments. */
+ media?: UIMediaAttachment[];
}
export interface ChatSummary {
@@ -71,6 +81,7 @@ export type InboundEvent =
text: string;
reply_to?: string;
media?: string[];
+ media_urls?: Array<{ url: string; name?: string }>;
/** Present when the frame is an agent breadcrumb (e.g. tool hint,
* generic progress line) rather than a conversational reply. */
kind?: "tool_hint" | "progress";
diff --git a/webui/src/tests/message-bubble.test.tsx b/webui/src/tests/message-bubble.test.tsx
index 80c24018a..e8dec29ab 100644
--- a/webui/src/tests/message-bubble.test.tsx
+++ b/webui/src/tests/message-bubble.test.tsx
@@ -40,4 +40,28 @@ describe("MessageBubble", () => {
fireEvent.click(toggle);
expect(screen.queryByText('weather("get")')).not.toBeInTheDocument();
});
+
+ it("renders video media as an inline player", () => {
+ const message: UIMessage = {
+ id: "a1",
+ role: "assistant",
+ content: "here is the clip",
+ createdAt: Date.now(),
+ media: [
+ {
+ kind: "video",
+ url: "/api/media/sig/payload",
+ name: "demo.mp4",
+ },
+ ],
+ };
+
+ const { container } = render();
+
+ expect(screen.getByText("here is the clip")).toBeInTheDocument();
+ const video = screen.getByLabelText(/video attachment/i);
+ expect(video.tagName).toBe("VIDEO");
+ expect(video).toHaveAttribute("src", "/api/media/sig/payload");
+ expect(container.querySelector("video[controls]")).toBeInTheDocument();
+ });
});
diff --git a/webui/src/tests/useNanobotStream.test.tsx b/webui/src/tests/useNanobotStream.test.tsx
index 91b3036c6..6485980cc 100644
--- a/webui/src/tests/useNanobotStream.test.tsx
+++ b/webui/src/tests/useNanobotStream.test.tsx
@@ -92,4 +92,25 @@ describe("useNanobotStream", () => {
expect(result.current.messages[1].role).toBe("assistant");
expect(result.current.messages[1].kind).toBeUndefined();
});
+
+ it("attaches assistant media_urls to complete messages", () => {
+ const fake = fakeClient();
+ const { result } = renderHook(() => useNanobotStream("chat-m", []), {
+ wrapper: wrap(fake.client),
+ });
+
+ act(() => {
+ fake.emit("chat-m", {
+ event: "message",
+ chat_id: "chat-m",
+ text: "video ready",
+ media_urls: [{ url: "/api/media/sig/payload", name: "demo.mp4" }],
+ });
+ });
+
+ expect(result.current.messages).toHaveLength(1);
+ expect(result.current.messages[0].media).toEqual([
+ { kind: "video", url: "/api/media/sig/payload", name: "demo.mp4" },
+ ]);
+ });
});
diff --git a/webui/src/tests/useSessions.test.tsx b/webui/src/tests/useSessions.test.tsx
index aaabe3d82..ad4f1c1af 100644
--- a/webui/src/tests/useSessions.test.tsx
+++ b/webui/src/tests/useSessions.test.tsx
@@ -130,12 +130,46 @@ describe("useSessions", () => {
{ url: "/api/media/sig-1/payload-1", name: "snap.png" },
{ url: "/api/media/sig-2/payload-2", name: "diag.jpg" },
]);
+ expect(first.media).toEqual([
+ { kind: "image", url: "/api/media/sig-1/payload-1", name: "snap.png" },
+ { kind: "image", url: "/api/media/sig-2/payload-2", name: "diag.jpg" },
+ ]);
expect(second.role).toBe("assistant");
expect(second.images).toBeUndefined();
expect(third.role).toBe("user");
expect(third.images).toBeUndefined();
});
+ it("hydrates historical assistant video media_urls into media attachments", async () => {
+ vi.mocked(api.fetchSessionMessages).mockResolvedValue({
+ key: "websocket:chat-video",
+ created_at: "2026-04-20T10:00:00Z",
+ updated_at: "2026-04-20T10:05:00Z",
+ messages: [
+ {
+ role: "assistant",
+ content: "clip ready",
+ timestamp: "2026-04-20T10:00:01Z",
+ media_urls: [
+ { url: "/api/media/sig-v/payload-v", name: "clip.mp4" },
+ ],
+ },
+ ],
+ });
+
+ const { result } = renderHook(() => useSessionHistory("websocket:chat-video"), {
+ wrapper: wrap(fakeClient()),
+ });
+
+ await waitFor(() => expect(result.current.loading).toBe(false));
+
+ expect(result.current.messages[0].role).toBe("assistant");
+ expect(result.current.messages[0].images).toBeUndefined();
+ expect(result.current.messages[0].media).toEqual([
+ { kind: "video", url: "/api/media/sig-v/payload-v", name: "clip.mp4" },
+ ]);
+ });
+
it("keeps the session in the list when delete fails", async () => {
vi.mocked(api.listSessions).mockResolvedValue([
{