feat(webui): render video media attachments

Add signed media URLs to live WebSocket replies and teach the WebUI to classify and render video attachments, so bot-sent videos can play inline in both live chats and session history.

Made-with: Cursor

webui/src/hooks/useNanobotStream.ts

@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 
 import { useClient } from "@/providers/ClientProvider";
+import { toMediaAttachment } from "@/lib/media";
 import type { StreamError } from "@/lib/nanobot-client";
 import type {
   InboundEvent,
@@ -148,6 +149,10 @@ export function useNanobotStream(
           return;
         }
 
+        const media = ev.media_urls?.length
+          ? ev.media_urls.map((m) => 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 } : {}),
             },
           ];
         });

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 } : {}),
             },
           ];
         });