feat: HTML renders can send the reader's answer to the thread

apps/mobile/src/features/files/AttachmentFileScreen.tsx

@@ -4,7 +4,7 @@ import * as Dialog from "../../components/ui/Dialog";
 import { NativeStackScreenOptions } from "../../native/StackHeader";
 import { useNavigation, type StaticScreenProps } from "@react-navigation/native";
 import type { MenuAction } from "@react-native-menu/menu";
-import { EnvironmentId } from "@t3tools/contracts";
+import { EnvironmentId, ThreadId } from "@t3tools/contracts";
 import { formatAttachmentSize } from "@t3tools/client-runtime/state/attachments";
 import { useEffect, useRef, useState } from "react";
 import { Platform, ScrollView, View } from "react-native";
@@ -29,7 +29,7 @@ import { FileMarkdownPreview } from "./FileMarkdownPreview";
 import { useAppearancePreferences } from "../settings/appearance/AppearancePreferencesProvider";
 import { SourceFileSurface } from "./SourceFileSurface";
 import { WorkspaceFileWebPreview } from "./WorkspaceFileWebPreview";
-import { HtmlRenderWebView } from "../threads/HtmlRenderWebView";
+import { HtmlRenderWebView, sendHtmlRenderMessage } from "../threads/HtmlRenderWebView";
 
 export type AttachmentFileRouteParams = {
   readonly environmentId?: string;
@@ -55,6 +55,7 @@ function AttachmentDocumentBody(props: {
   readonly document: ReturnType<typeof useAttachmentDocument>;
   readonly name: string;
   readonly environmentId: EnvironmentId | null;
+  readonly threadId: ThreadId | null;
   readonly htmlRender: boolean;
   readonly nativeViewer: "pending" | "open" | "unavailable" | null;
   readonly nativeError: string | null;
@@ -143,8 +144,19 @@ function AttachmentDocumentBody(props: {
     return <AudioFilePreview key={document.revision} uri={document.uri} onRetry={document.retry} />;
   }
   if (document.kind === "html") {
+    const { environmentId, threadId } = props;
     return props.htmlRender ? (
-      <HtmlRenderWebView key={document.uri} uri={document.uri} title={props.name} nested={false} />
+      <HtmlRenderWebView
+        key={document.uri}
+        uri={document.uri}
+        title={props.name}
+        nested={false}
+        onSendMessage={
+          environmentId !== null && threadId !== null
+            ? (text) => sendHtmlRenderMessage(environmentId, threadId, text)
+            : undefined
+        }
+      />
     ) : (
       <WorkspaceFileWebPreview uri={document.uri} />
     );
@@ -387,6 +399,7 @@ export function AttachmentFileScreen(props: AttachmentFileScreenProps) {
         document={document}
         name={params.name}
         environmentId={environmentId}
+        threadId={params.threadId?.trim() ? ThreadId.make(params.threadId) : null}
         htmlRender={params.htmlRender === "1"}
         nativeViewer={nativeViewer}
         nativeError={nativeError}

apps/mobile/src/features/threads/HtmlRenderWebView.tsx

@@ -1,7 +1,16 @@
 import { AppActivityIndicator } from "../../components/ui/AppActivityIndicator";
 import { useNavigation } from "@react-navigation/native";
-import type { EnvironmentId, ThreadId } from "@t3tools/contracts";
 import {
+  AuthOrchestrationOperateScope,
+  CommandId,
+  MessageId,
+  type EnvironmentId,
+  type ThreadId,
+} from "@t3tools/contracts";
+import {
+  htmlRenderError,
+  htmlRenderResult,
+  readHtmlRenderMessageRequest,
   htmlRenderFileName,
   htmlRenderFrameHeight,
   htmlRenderThemeFragment,
@@ -17,6 +26,9 @@ import { SymbolView } from "../../components/ui/AppSymbol";
 import { AppText as Text } from "../../components/ui/AppText";
 import { mobileHtmlRenderTheme } from "../../lib/htmlRenderTheme";
 import { tryOpenExternalUrl } from "../../lib/openExternalUrl";
+import { uuidv4 } from "../../lib/uuid";
+import { readEnvironmentScope } from "../../state/session";
+import { enqueueThreadOutboxMessage } from "../../state/thread-outbox";
 import { useAssetUrlState, useRefreshAssetUrl } from "../../state/assets";
 import { useAppearancePreferences } from "../settings/appearance/AppearancePreferencesProvider";
 
@@ -43,10 +55,32 @@ function useHtmlRenderTheme() {
   );
 }
 
+export async function sendHtmlRenderMessage(
+  environmentId: EnvironmentId,
+  threadId: ThreadId,
+  text: string,
+): Promise<void> {
+  if (!readEnvironmentScope(environmentId, AuthOrchestrationOperateScope)) {
+    throw new Error("You do not have permission to send messages in this environment.");
+  }
+  await enqueueThreadOutboxMessage({
+    environmentId,
+    threadId,
+    messageId: MessageId.make(uuidv4()),
+    commandId: CommandId.make(uuidv4()),
+    text,
+    attachments: [],
+    dispatchMode: "queue",
+    createdAt: new Date().toISOString(),
+  });
+}
+
+function postToPage(view: WebView<object> | null, message: unknown) {
+  view?.injectJavaScript(`window.postMessage(${JSON.stringify(message)}, "*"); true;`);
+}
+
 function postTheme(view: WebView<object> | null, theme: HtmlRenderTheme) {
-  view?.injectJavaScript(
-    `window.postMessage(${JSON.stringify(htmlRenderThemeMessage(theme))}, "*"); true;`,
-  );
+  postToPage(view, htmlRenderThemeMessage(theme));
 }
 
 const OVERFLOW_MESSAGE_TYPE = "t3-html-render-overflow";
@@ -82,18 +116,22 @@ export function HtmlRenderWebView(props: {
   readonly title: string;
   readonly nested: boolean;
   readonly onLoadError?: () => void;
+  readonly onSendMessage?: ((text: string) => Promise<void>) | undefined;
 }) {
+  const navigation = useNavigation();
   const theme = useHtmlRenderTheme();
   const [initialTheme] = useState(theme);
   const [generation, setGeneration] = useState(0);
   const [loaded, setLoaded] = useState(false);
   const [overflow, setOverflow] = useState(NO_OVERFLOW);
   const webView = useRef<WebView<object>>(null);
   const crashes = useRef(0);
+  const lastTouchAt = useRef<number | null>(null);
   const shownTheme = useRef<HtmlRenderTheme | null>(null);
+  const canSendMessage = props.onSendMessage !== undefined;
   const source = useMemo(
-    () => ({ uri: props.uri + htmlRenderThemeFragment(initialTheme) }),
-    [props.uri, initialTheme],
+    () => ({ uri: props.uri + htmlRenderThemeFragment(initialTheme, canSendMessage) }),
+    [props.uri, initialTheme, canSendMessage],
   );
   useEffect(() => {
     if (shownTheme.current === null || shownTheme.current === theme) return;
@@ -112,8 +150,52 @@ export function HtmlRenderWebView(props: {
     setGeneration((value) => value + 1);
   };
   const scrollable = !props.nested || overflow.x || overflow.y;
+  const handleMessage = (event: WebViewMessageEvent) => {
+    const { data } = event.nativeEvent;
+    if (props.nested) {
+      const next = readOverflowMessage(data);
+      if (next !== null) {
+        setOverflow(next);
+        return;
+      }
+    }
+    let parsed: unknown;
+    try {
+      parsed = JSON.parse(data);
+    } catch {
+      return;
+    }
+    const request = readHtmlRenderMessageRequest(parsed);
+    if (request === undefined) return;
+    const view = webView.current;
+    const reply = (message: unknown) => postToPage(view, message);
+    const send = async () => {
+      if (props.onSendMessage === undefined || !navigation.isFocused()) {
+        throw new Error("Messages are not available here.");
+      }
+      if (lastTouchAt.current === null || Date.now() - lastTouchAt.current > 5_000) {
+        throw new Error("Messages send only from a tap in the page.");
+      }
+      // Consume before awaiting, so one touch cannot enqueue several messages.
+      lastTouchAt.current = null;
+      await props.onSendMessage(request.text);
+    };
+    void send().then(
+      () => reply(htmlRenderResult(request.id)),
+      (error: unknown) =>
+        reply(
+          htmlRenderError(
+            request.id,
+            error instanceof Error ? error.message : "The message was not sent.",
+          ),
+        ),
+    );
+  };
   return (
     <View
+      onTouchStart={() => {
+        lastTouchAt.current = Date.now();
+      }}
       style={
         props.nested
           ? { flex: 1 }
@@ -158,15 +240,8 @@ export function HtmlRenderWebView(props: {
         onHttpError={props.onLoadError}
         onContentProcessDidTerminate={restart}
         onRenderProcessGone={restart}
-        {...(props.nested
-          ? {
-              injectedJavaScript: OVERFLOW_SCRIPT,
-              onMessage: (event: WebViewMessageEvent) => {
-                const next = readOverflowMessage(event.nativeEvent.data);
-                if (next !== null) setOverflow(next);
-              },
-            }
-          : {})}
+        onMessage={handleMessage}
+        {...(props.nested ? { injectedJavaScript: OVERFLOW_SCRIPT } : {})}
       />
       {loaded ? null : (
         <View pointerEvents="none" className="absolute inset-0 items-center justify-center">
@@ -229,6 +304,9 @@ export function ThreadHtmlRender(props: {
             title={title}
             nested
             onLoadError={handleLoadError}
+            onSendMessage={(text) =>
+              sendHtmlRenderMessage(props.environmentId, props.threadId, text)
+            }
           />
         ) : failed || asset._tag === "Failure" ? (
           <Pressable

apps/server/src/mcp/toolkits/html/tools.ts

@@ -2,6 +2,7 @@ import { OrchestratorMcpFailure } from "@t3tools/contracts";
 import {
   HTML_RENDER_COLUMN_WIDTH,
   HTML_RENDER_LAYOUT_GUIDE,
+  HTML_RENDER_MESSAGE_GUIDE,
   HTML_RENDER_MAX_HEIGHT,
   HTML_RENDER_MAX_TITLE_LENGTH,
   HTML_RENDER_MIN_HEIGHT,
@@ -71,7 +72,7 @@ export const HtmlPreviewTool = Tool.make("html_preview", {
 // Read-only in the MCP sense: it shows a page in the caller's own thread and
 // touches no workspace, so plan mode and read-only sandboxes can use it.
 const HtmlRenderTool = Tool.make(HTML_RENDER_TOOL_NAME, {
-  description: `Show a finished HTML page (chart, table, diagram, collage, mockup) inline in this thread, above your final text reply; call it before writing that reply. The reader already sees the page, so the reply should not announce it, say where it is, or restate it: add only what the page doesn't say. Preview with html_preview first. T3 fits the frame to the page's height at each reader's width. A height below the page's contentHeight caps the frame there, and the rest scrolls inside it. ${PAGE_RULES} ${HTML_RENDER_LAYOUT_GUIDE} ${HTML_RENDER_THEME_GUIDE}`,
+  description: `Show a finished HTML page (chart, table, diagram, collage, mockup) inline in this thread, above your final text reply; call it before writing that reply. The reader already sees the page, so the reply should not announce it, say where it is, or restate it: add only what the page doesn't say. Preview with html_preview first. T3 fits the frame to the page's height at each reader's width. A height below the page's contentHeight caps the frame there, and the rest scrolls inside it. ${PAGE_RULES} ${HTML_RENDER_LAYOUT_GUIDE} ${HTML_RENDER_THEME_GUIDE} ${HTML_RENDER_MESSAGE_GUIDE}`,
   parameters: Schema.Struct({
     html: Html,
     title: Schema.String.check(

apps/web/src/components/ChatView.tsx

@@ -7761,6 +7761,7 @@ export default function ChatView(props: ChatViewProps) {
         availableEditors,
         pendingSurfaceIds: pendingFileSurfaceIds,
         onOpenFile: openFileSurfaceStable,
+        onSendRenderMessage: sendAppMessageStable,
         onPendingChange: handleFilePendingChangeStable,
       }}
     />

apps/web/src/components/chat/HtmlRenderDialog.tsx

@@ -10,6 +10,7 @@ export function HtmlRenderDialog(props: {
   readonly src: string;
   readonly title: string;
   readonly threadRef?: ScopedThreadRef | undefined;
+  readonly onSendMessage?: ((text: string) => Promise<void>) | undefined;
   readonly onClose: () => void;
 }) {
   const [zoom, setZoom] = useState(1);
@@ -41,6 +42,7 @@ export function HtmlRenderDialog(props: {
                 src={props.src}
                 title={props.title}
                 threadRef={props.threadRef}
+                onSendMessage={props.onSendMessage}
                 className="block size-full"
               />
             </div>

apps/web/src/components/chat/HtmlRenderFrame.tsx

@@ -23,6 +23,7 @@ export function HtmlRenderFrame(props: {
   readonly environmentId: EnvironmentId;
   readonly htmlRender: HtmlRenderReference;
   readonly threadRef: ScopedThreadRef | undefined;
+  readonly onSendMessage?: ((text: string) => Promise<void>) | undefined;
   readonly onFullscreenChange?: (fullscreen: boolean) => void;
 }) {
   const { attachmentId, title } = props.htmlRender;
@@ -97,6 +98,7 @@ export function HtmlRenderFrame(props: {
             src={src}
             title={title}
             threadRef={props.threadRef}
+            onSendMessage={props.onSendMessage}
             className="block size-full"
             onContentHeight={setContentHeight}
             onFullscreenChange={onFullscreenChange}
@@ -135,6 +137,7 @@ export function HtmlRenderFrame(props: {
               src={expandedSrc}
               title={title}
               threadRef={props.threadRef}
+              onSendMessage={props.onSendMessage}
               onClose={() => setExpandedSrc(null)}
             />
           ) : null}

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

@@ -2834,6 +2834,7 @@ function HtmlRenderTimelineRow({ row }: { row: Extract<TimelineRow, { kind: "htm
         key={row.htmlRender.attachmentId}
         environmentId={ctx.activeThreadEnvironmentId}
         htmlRender={row.htmlRender}
+        onSendMessage={ctx.onSendAppMessage}
         threadRef={ctx.threadRef ?? undefined}
         onFullscreenChange={onFullscreenChange}
       />

apps/web/src/components/chat/RightPanelSurfaceContent.tsx

@@ -54,6 +54,7 @@ export interface RightPanelFileProps {
   readonly availableEditors: ReadonlyArray<EditorId>;
   readonly pendingSurfaceIds: ReadonlySet<string>;
   readonly onOpenFile: (relativePath: string) => void;
+  readonly onSendRenderMessage?: ((text: string) => Promise<void>) | undefined;
   readonly onPendingChange: (relativePath: string, pending: boolean) => void;
 }
 
@@ -201,6 +202,7 @@ export function RightPanelSurfaceContent(props: {
             revealLine={surface.kind === "file" ? (surface.revealLine ?? null) : null}
             revealRequestId={surface.kind === "file" ? surface.revealRequestId : 0}
             onOpenFile={files.onOpenFile}
+            onSendRenderMessage={files.onSendRenderMessage}
             onNavigateFolder={(relativePath, folderTrail, keepSource) =>
               useRightPanelStore
                 .getState()

apps/web/src/components/files/AttachmentFilePreview.tsx

@@ -56,6 +56,7 @@ export function AttachmentFilePreview(props: {
   asset?: { environmentId: EnvironmentId; attachmentId: string };
   htmlRender?: boolean;
   threadRef?: ScopedThreadRef;
+  readonly onSendMessage?: ((text: string) => Promise<void>) | undefined;
   origin?: string;
   onRemove?: () => void;
   onClose?: () => void;
@@ -226,6 +227,7 @@ export function AttachmentFilePreview(props: {
       pdf={kind === "pdf"}
       htmlRender={props.htmlRender === true}
       threadRef={props.threadRef}
+      onSendMessage={props.onSendMessage}
     />
   ) : kind === "audio" ? (
     <AudioPreview src={url} name={props.name} onError={() => setError("Unable to load audio.")} />