diff --git a/apps/mobile/src/features/files/AttachmentFileScreen.tsx b/apps/mobile/src/features/files/AttachmentFileScreen.tsx
index 23adc5cddb12..a8e428564eda 100644
--- a/apps/mobile/src/features/files/AttachmentFileScreen.tsx
+++ b/apps/mobile/src/features/files/AttachmentFileScreen.tsx
@@ -24,6 +24,7 @@ import { FileMarkdownPreview } from "./FileMarkdownPreview";
 import { useAppearancePreferences } from "../settings/appearance/AppearancePreferencesProvider";
 import { SourceFileSurface } from "./SourceFileSurface";
 import { WorkspaceFileWebPreview } from "./WorkspaceFileWebPreview";
+import { HtmlRenderWebView } from "../threads/HtmlRenderWebView";
 
 /**
  * Both the thread stack and the new-task sheet stack register this screen, so a chip in a
@@ -38,6 +39,8 @@ export type AttachmentFileRouteParams = {
   readonly sizeBytes: string;
   /** Present for a draft attachment, which may still live only on this device. */
   readonly draftKey?: string;
+  /** Present for a page an agent published with `html_render`, which takes the app theme. */
+  readonly htmlRender?: "1";
 };
 
 type AttachmentFileScreenProps = StaticScreenProps<AttachmentFileRouteParams>;
@@ -54,6 +57,7 @@ function AttachmentDocumentBody(props: {
   readonly document: ReturnType<typeof useAttachmentDocument>;
   readonly name: string;
   readonly environmentId: EnvironmentId | null;
+  readonly htmlRender: boolean;
   readonly nativeViewer: "pending" | "open" | "unavailable" | null;
   readonly nativeError: string | null;
   readonly onOpenNative: () => void;
@@ -141,7 +145,11 @@ function AttachmentDocumentBody(props: {
     return <AudioFilePreview key={document.revision} uri={document.uri} onRetry={document.retry} />;
   }
   if (document.kind === "html") {
-    return <WorkspaceFileWebPreview uri={document.uri} />;
+    return props.htmlRender ? (
+      <HtmlRenderWebView key={document.uri} uri={document.uri} title={props.name} nested={false} />
+    ) : (
+      <WorkspaceFileWebPreview uri={document.uri} />
+    );
   }
   return (
     <View className="flex-1 items-center justify-center bg-sheet px-6">
@@ -339,7 +347,7 @@ export function AttachmentFileScreen(props: AttachmentFileScreenProps) {
     },
     [menuActions],
   );
-  const subtitle = `${draftKey ? "Draft attachment" : "Attachment"} · ${formatAttachmentSize(sizeBytes)}`;
+  const subtitle = `${draftKey ? "Draft attachment" : "Attachment"}${sizeBytes > 0 ? ` · ${formatAttachmentSize(sizeBytes)}` : ""}`;
 
   return (
     <View className="flex-1 bg-sheet">
@@ -405,6 +413,7 @@ export function AttachmentFileScreen(props: AttachmentFileScreenProps) {
         document={document}
         name={params.name}
         environmentId={environmentId}
+        htmlRender={params.htmlRender === "1"}
         nativeViewer={nativeViewer}
         nativeError={nativeError}
         onOpenNative={() => {
diff --git a/apps/mobile/src/features/threads/HtmlRenderWebView.tsx b/apps/mobile/src/features/threads/HtmlRenderWebView.tsx
new file mode 100644
index 000000000000..3712854ddd58
--- /dev/null
+++ b/apps/mobile/src/features/threads/HtmlRenderWebView.tsx
@@ -0,0 +1,273 @@
+import { useNavigation } from "@react-navigation/native";
+import type { EnvironmentId, ThreadId } from "@t3tools/contracts";
+import {
+  htmlRenderFileName,
+  htmlRenderFrameHeight,
+  htmlRenderThemeFragment,
+  htmlRenderThemeMessage,
+  type HtmlRenderReference,
+  type HtmlRenderTheme,
+} from "@t3tools/shared/htmlRender";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { ActivityIndicator, Platform, Pressable, View, type ColorValue } from "react-native";
+import { WebView, type WebViewMessageEvent } from "react-native-webview";
+
+import { SymbolView } from "../../components/AppSymbol";
+import { AppText as Text } from "../../components/AppText";
+import { mobileHtmlRenderTheme } from "../../lib/htmlRenderTheme";
+import { tryOpenExternalUrl } from "../../lib/openExternalUrl";
+import { useAssetUrlState, useRefreshAssetUrl } from "../../state/assets";
+import { useAppearancePreferences } from "../settings/appearance/AppearancePreferencesProvider";
+
+const ROW_BOTTOM_MARGIN = 8;
+
+/** A render row is its frame's height plus spacing; the page's content never sizes it. */
+export function htmlRenderRowHeight(frameHeight: number) {
+  return frameHeight + ROW_BOTTOM_MARGIN;
+}
+
+function useHtmlRenderTheme() {
+  const { themeId, themeAppearance, themeVariables, systemColorsActive } =
+    useAppearancePreferences();
+  return useMemo(
+    () =>
+      mobileHtmlRenderTheme({
+        themeId,
+        appearance: themeAppearance,
+        variables: themeVariables,
+        systemColors: systemColorsActive,
+        platform: Platform.OS,
+      }),
+    [themeId, themeAppearance, themeVariables, systemColorsActive],
+  );
+}
+
+function postTheme(view: WebView<object> | null, theme: HtmlRenderTheme) {
+  view?.injectJavaScript(
+    `window.postMessage(${JSON.stringify(htmlRenderThemeMessage(theme))}, "*"); true;`,
+  );
+}
+
+const OVERFLOW_MESSAGE_TYPE = "t3-html-render-overflow";
+
+// Reports whether the page overflows its frame, so a feed row only takes scroll
+// gestures from a page that can use them.
+const OVERFLOW_SCRIPT = `(function(){var last;function report(){var d=document.documentElement,b=document.body;var o=Math.max(d.scrollHeight,b?b.scrollHeight:0)>window.innerHeight+1||Math.max(d.scrollWidth,b?b.scrollWidth:0)>window.innerWidth+1;if(o===last)return;last=o;window.ReactNativeWebView.postMessage(JSON.stringify({type:${JSON.stringify(OVERFLOW_MESSAGE_TYPE)},overflow:o}));}report();if(window.ResizeObserver){var r=new ResizeObserver(report);r.observe(document.documentElement);if(document.body)r.observe(document.body);}window.addEventListener("resize",report);})();true;`;
+
+function readOverflowMessage(data: string) {
+  try {
+    const message: unknown = JSON.parse(data);
+    return typeof message === "object" &&
+      message !== null &&
+      "type" in message &&
+      message.type === OVERFLOW_MESSAGE_TYPE &&
+      "overflow" in message &&
+      typeof message.overflow === "boolean"
+      ? message.overflow
+      : null;
+  } catch {
+    return null;
+  }
+}
+
+const withoutFragment = (url: string) => url.split("#", 1)[0];
+
+/**
+ * An agent's HTML page, themed before first paint and kept in step with the app theme.
+ * The page may move within its own document; links leave for the browser.
+ */
+export function HtmlRenderWebView(props: {
+  readonly uri: string;
+  readonly title: string;
+  /** Inside the feed, the page takes scroll gestures only when it overflows its frame. */
+  readonly nested: boolean;
+  readonly onLoadError?: () => void;
+}) {
+  const theme = useHtmlRenderTheme();
+  const [initialTheme] = useState(theme);
+  const [generation, setGeneration] = useState(0);
+  const [loaded, setLoaded] = useState(false);
+  const [overflows, setOverflows] = useState(false);
+  const webView = useRef<WebView<object>>(null);
+  const loadedRef = useRef(false);
+  // The theme the loaded document shows; null until it loads.
+  const shownTheme = useRef<HtmlRenderTheme | null>(null);
+  const source = useMemo(
+    () => ({ uri: props.uri + htmlRenderThemeFragment(initialTheme) }),
+    [props.uri, initialTheme],
+  );
+  useEffect(() => {
+    if (shownTheme.current === null || shownTheme.current === theme) return;
+    shownTheme.current = theme;
+    postTheme(webView.current, theme);
+  }, [theme]);
+  const restart = () => {
+    loadedRef.current = false;
+    shownTheme.current = null;
+    setLoaded(false);
+    setOverflows(false);
+    setGeneration((value) => value + 1);
+  };
+  const openLink = (url: string) => {
+    if (loadedRef.current && /^https?:/i.test(url)) void tryOpenExternalUrl(url, "html-render");
+  };
+  const scrollable = !props.nested || overflows;
+  return (
+    <View style={{ flex: 1 }}>
+      <WebView<object>
+        key={generation}
+        ref={webView}
+        source={source}
+        accessibilityLabel={props.title}
+        style={{ flex: 1, backgroundColor: "transparent" }}
+        setSupportMultipleWindows={false}
+        allowsInlineMediaPlayback
+        automaticallyAdjustContentInsets={!props.nested}
+        bounces={!props.nested}
+        showsVerticalScrollIndicator={!props.nested}
+        showsHorizontalScrollIndicator={!props.nested}
+        scrollEnabled={scrollable}
+        nestedScrollEnabled={props.nested && overflows}
+        overScrollMode={props.nested ? "never" : "always"}
+        onShouldStartLoadWithRequest={(request) => {
+          if (
+            request.isTopFrame === false ||
+            !loadedRef.current ||
+            withoutFragment(request.url) === withoutFragment(props.uri)
+          ) {
+            return true;
+          }
+          openLink(request.url);
+          return false;
+        }}
+        onOpenWindow={(event) => openLink(event.nativeEvent.targetUrl)}
+        onLoadEnd={() => {
+          loadedRef.current = true;
+          setLoaded(true);
+          shownTheme.current = theme;
+          if (theme !== initialTheme) postTheme(webView.current, theme);
+        }}
+        onError={props.onLoadError}
+        onHttpError={props.onLoadError}
+        onContentProcessDidTerminate={restart}
+        onRenderProcessGone={restart}
+        {...(props.nested
+          ? {
+              injectedJavaScript: OVERFLOW_SCRIPT,
+              onMessage: (event: WebViewMessageEvent) => {
+                const overflow = readOverflowMessage(event.nativeEvent.data);
+                if (overflow !== null) setOverflows(overflow);
+              },
+            }
+          : {})}
+      />
+      {loaded ? null : (
+        <View pointerEvents="none" className="absolute inset-0 items-center justify-center">
+          <ActivityIndicator />
+        </View>
+      )}
+    </View>
+  );
+}
+
+/** A completed `html_render` call in the thread feed: the page itself, at a fixed height. */
+export function ThreadHtmlRender(props: {
+  readonly environmentId: EnvironmentId;
+  readonly threadId: ThreadId;
+  readonly render: HtmlRenderReference;
+  /** The feed's content width; the frame's height follows the page's measured height there. */
+  readonly frameWidth: number;
+  readonly iconColor: ColorValue;
+}) {
+  const navigation = useNavigation();
+  const { attachmentId, title } = props.render;
+  const height = htmlRenderFrameHeight(props.render, props.frameWidth);
+  const fileName = htmlRenderFileName(title);
+  const resource = useMemo(
+    () => ({
+      _tag: "attachment" as const,
+      attachmentId,
+      fileName,
+      mimeType: "text/html",
+      disposition: "inline" as const,
+    }),
+    [attachmentId, fileName],
+  );
+  const asset = useAssetUrlState(props.environmentId, resource);
+  const refresh = useRefreshAssetUrl(props.environmentId, resource);
+  // Signed URLs are re-minted periodically; following them would reload the page.
+  const [uri, setUri] = useState<string | null>(null);
+  if (uri === null && asset._tag === "Success") setUri(asset.url);
+  const [failed, setFailed] = useState(false);
+  const retried = useRef(false);
+  const handleLoadError = () => {
+    if (retried.current) {
+      setFailed(true);
+      return;
+    }
+    retried.current = true;
+    void refresh().then((next) => {
+      if (next !== null && next !== uri) setUri(next);
+      else setFailed(true);
+    });
+  };
+
+  return (
+    <View style={{ marginBottom: ROW_BOTTOM_MARGIN }}>
+      <View style={{ height }}>
+        {uri !== null && !failed ? (
+          <HtmlRenderWebView
+            key={uri}
+            uri={uri}
+            title={title}
+            nested
+            onLoadError={handleLoadError}
+          />
+        ) : failed || asset._tag === "Failure" ? (
+          <Pressable
+            accessibilityRole="button"
+            accessibilityLabel={`Reload ${title}`}
+            className="flex-1 items-center justify-center"
+            onPress={() => {
+              retried.current = false;
+              setFailed(false);
+              if (uri === null) void refresh().then((next) => next !== null && setUri(next));
+            }}
+          >
+            <Text className="text-sm text-foreground-muted">Page unavailable</Text>
+          </Pressable>
+        ) : (
+          <View className="flex-1 items-center justify-center">
+            <ActivityIndicator />
+          </View>
+        )}
+        {uri !== null && !failed ? (
+          <Pressable
+            accessibilityRole="button"
+            accessibilityLabel={`Open ${title}`}
+            hitSlop={8}
+            className="absolute right-1.5 top-1.5 h-7 w-7 items-center justify-center rounded-full border border-border/60 bg-surface/80"
+            onPress={() =>
+              navigation.navigate("ThreadAttachment", {
+                environmentId: String(props.environmentId),
+                threadId: String(props.threadId),
+                attachmentId,
+                name: fileName,
+                mimeType: "text/html",
+                sizeBytes: "0",
+                htmlRender: "1",
+              })
+            }
+          >
+            <SymbolView
+              name="arrow.up.left.and.arrow.down.right"
+              size={12}
+              tintColor={props.iconColor}
+              type="monochrome"
+            />
+          </Pressable>
+        ) : null}
+      </View>
+    </View>
+  );
+}
diff --git a/apps/mobile/src/features/threads/ThreadFeed.tsx b/apps/mobile/src/features/threads/ThreadFeed.tsx
index 0f55d36c0110..61acf94ad63d 100644
--- a/apps/mobile/src/features/threads/ThreadFeed.tsx
+++ b/apps/mobile/src/features/threads/ThreadFeed.tsx
@@ -183,6 +183,8 @@ import {
 import { appendPendingThreadMessages, type PendingThreadFeedEntry } from "./pending-thread-feed";
 import type { QueuedThreadMessage } from "../../state/thread-outbox-model";
 import { resolveThreadFeedFixedItemSize } from "./thread-feed-item-size";
+import { htmlRenderFrameHeight } from "@t3tools/shared/htmlRender";
+import { htmlRenderRowHeight, ThreadHtmlRender } from "./HtmlRenderWebView";
 import { useMarkdownCodeHighlight } from "./markdownCodeHighlightState";
 import {
   assetEnvironment,
@@ -1536,6 +1538,8 @@ function renderFeedEntry(
     readonly userBubbleMaxWidth: number;
     /** Width assistant markdown lays out in, so images can size their frame before layout. */
     readonly markdownContentWidth: number;
+    /** Width full-bleed rows (HTML renders) lay out in. */
+    readonly contentWidth: number;
     readonly threadTitle: string;
   },
 ) {
@@ -1574,6 +1578,18 @@ function renderFeedEntry(
     return <ThreadThinkingRow rowSizing={props.workRowSizing} iconSubtleColor={iconSubtleColor} />;
   }
 
+  if (entry.type === "html-render") {
+    return (
+      <ThreadHtmlRender
+        environmentId={props.environmentId}
+        threadId={props.threadId}
+        render={entry.render}
+        frameWidth={props.contentWidth}
+        iconColor={iconSubtleColor}
+      />
+    );
+  }
+
   if (entry.type === "work-toggle") {
     return (
       <ThreadWorkGroupToggle
@@ -2869,6 +2885,9 @@ export const ThreadFeed = memo(function ThreadFeed(props: ThreadFeedProps) {
   // cards and related-thread links can exceed the compact row height.
   const getFixedItemSize = useCallback(
     (entry: ThreadFeedEntry) => {
+      if (entry.type === "html-render") {
+        return htmlRenderRowHeight(htmlRenderFrameHeight(entry.render, contentWidth));
+      }
       if (workRowSizing.fixedRowHeight === undefined) {
         return undefined;
       }
@@ -2902,7 +2921,7 @@ export const ThreadFeed = memo(function ThreadFeed(props: ThreadFeedProps) {
           return undefined;
       }
     },
-    [expandedWorkRows, workRowSizing.fixedRowHeight],
+    [contentWidth, expandedWorkRows, workRowSizing.fixedRowHeight],
   );
 
   // Disclosures can mount existing offscreen rows as well as new work rows.
@@ -2946,6 +2965,7 @@ export const ThreadFeed = memo(function ThreadFeed(props: ThreadFeedProps) {
             themeAppearance,
             userBubbleMaxWidth,
             markdownContentWidth,
+            contentWidth,
             threadTitle: props.threadTitle,
             skills: props.skills,
             workspaceRoot: props.workspaceRoot,
@@ -2982,6 +3002,7 @@ export const ThreadFeed = memo(function ThreadFeed(props: ThreadFeedProps) {
       themeAppearance,
       userBubbleMaxWidth,
       markdownContentWidth,
+      contentWidth,
       onCopyWorkRow,
       markdownLinkHandlers,
       onPressPreview,
diff --git a/apps/mobile/src/lib/htmlRenderTheme.test.ts b/apps/mobile/src/lib/htmlRenderTheme.test.ts
new file mode 100644
index 000000000000..bca76dbc3447
--- /dev/null
+++ b/apps/mobile/src/lib/htmlRenderTheme.test.ts
@@ -0,0 +1,40 @@
+import { describe, expect, it } from "vite-plus/test";
+
+import { mobileHtmlRenderTheme } from "./htmlRenderTheme";
+import { getMobileThemeVariables } from "./mobileTheme";
+
+describe("mobileHtmlRenderTheme", () => {
+  it("paints the page with the feed's own canvas", () => {
+    const variables = {
+      ...getMobileThemeVariables("grove", "dark"),
+      "--color-thread-canvas": "#101010",
+    };
+    const theme = (platform: string) =>
+      mobileHtmlRenderTheme({
+        themeId: "grove",
+        appearance: "dark",
+        variables,
+        systemColors: false,
+        platform,
+      });
+    expect(theme("android").variables["--background"]).toBe("#101010");
+    expect(theme("ios").variables["--background"]).toBe(variables["--color-screen"]);
+  });
+
+  it("takes Material You's system roles over the default palette", () => {
+    const variables = {
+      ...getMobileThemeVariables("t3-code", "light"),
+      "--color-primary": "#6750A4FF",
+      "--color-foreground": "#1D1B20FF",
+    };
+    const theme = mobileHtmlRenderTheme({
+      themeId: "material-you",
+      appearance: "light",
+      variables,
+      systemColors: true,
+      platform: "android",
+    });
+    expect(theme.variables["--accent"]).toBe("#6750A4FF");
+    expect(theme.variables["--foreground"]).toBe("#1D1B20FF");
+  });
+});
diff --git a/apps/mobile/src/lib/htmlRenderTheme.ts b/apps/mobile/src/lib/htmlRenderTheme.ts
new file mode 100644
index 000000000000..f8a28345217f
--- /dev/null
+++ b/apps/mobile/src/lib/htmlRenderTheme.ts
@@ -0,0 +1,62 @@
+import { HTML_RENDER_DEFAULT_FONTS, htmlRenderTheme } from "@t3tools/shared/htmlRender";
+
+import {
+  DEFAULT_MOBILE_THEME_ID,
+  getMobileThemeColors,
+  nativeColors,
+  type MobileThemeAppearance,
+  type MobileThemeId,
+  type MobileThemeVariables,
+} from "./mobileTheme";
+
+/**
+ * The theme an HTML render styles against. Its background is the feed's own canvas.
+ * Material You has no shared palette: it starts from the default one and takes the
+ * roles its system colors replace. WebViews cannot load the app's bundled fonts, so
+ * renders use system stacks.
+ */
+export function mobileHtmlRenderTheme(input: {
+  readonly themeId: MobileThemeId;
+  readonly appearance: MobileThemeAppearance;
+  readonly variables: MobileThemeVariables;
+  readonly systemColors: boolean;
+  readonly platform: string;
+}) {
+  const { variables: v } = input;
+  const palette = getMobileThemeColors(
+    input.themeId === "material-you" ? DEFAULT_MOBILE_THEME_ID : input.themeId,
+    input.appearance,
+  );
+  const colors = nativeColors(
+    input.systemColors
+      ? {
+          ...palette,
+          text: v["--color-foreground"],
+          textMuted: v["--color-foreground-secondary"],
+          muted: v["--color-subtle"],
+          mutedForeground: v["--color-foreground-muted"],
+          surface: v["--color-card"],
+          surfaceRaised: v["--color-card-alt"],
+          surfaceOverlay: v["--color-card-alt"],
+          border: v["--color-border"],
+          input: v["--color-input-border"],
+          focus: v["--color-focus"],
+          accent: v["--color-primary"],
+          accentForeground: v["--color-primary-foreground"],
+          accentSurface: v["--color-inline-skill-background"],
+          accentSurfaceForeground: v["--color-inline-skill-foreground"],
+          messageAction: v["--color-primary"],
+          messageActionForeground: v["--color-primary-foreground"],
+          secondary: v["--color-secondary"],
+          secondaryForeground: v["--color-secondary-foreground"],
+          errorSurface: v["--color-danger"],
+          errorForeground: v["--color-danger-foreground"],
+          codeBackground: v["--color-md-code-bg"],
+          codeForeground: v["--color-md-code-text"],
+        }
+      : palette,
+  );
+  // Android paints the thread on its own canvas role; iOS uses the screen.
+  const canvas = v[input.platform === "android" ? "--color-thread-canvas" : "--color-screen"];
+  return htmlRenderTheme({ ...colors, canvas }, input.appearance, HTML_RENDER_DEFAULT_FONTS);
+}
diff --git a/apps/mobile/src/lib/mobileTheme.ts b/apps/mobile/src/lib/mobileTheme.ts
index 80453f61a011..4159232fe7ab 100644
--- a/apps/mobile/src/lib/mobileTheme.ts
+++ b/apps/mobile/src/lib/mobileTheme.ts
@@ -123,7 +123,7 @@ export function themeColorToNativeColor(value: string): string {
     : `#${[red, green, blue].map((channel) => channel.toString(16).padStart(2, "0")).join("")}`;
 }
 
-function nativeColors(colors: ThemeColors): ThemeColors {
+export function nativeColors(colors: ThemeColors): ThemeColors {
   return Object.fromEntries(
     Object.entries(colors).map(([role, color]) => [role, themeColorToNativeColor(color)]),
   ) as ThemeColors;
diff --git a/apps/mobile/src/lib/openExternalUrl.ts b/apps/mobile/src/lib/openExternalUrl.ts
index bea0943ab563..0963044b9ffb 100644
--- a/apps/mobile/src/lib/openExternalUrl.ts
+++ b/apps/mobile/src/lib/openExternalUrl.ts
@@ -6,6 +6,7 @@ const ExternalUrlTarget = Schema.Literals([
   "markdown-link",
   "pull-request",
   "provider-auth",
+  "html-render",
 ]);
 
 export type ExternalUrlTarget = typeof ExternalUrlTarget.Type;
diff --git a/apps/mobile/src/lib/threadActivity.test.ts b/apps/mobile/src/lib/threadActivity.test.ts
index 5471f24704a9..1cf78cc29f3f 100644
--- a/apps/mobile/src/lib/threadActivity.test.ts
+++ b/apps/mobile/src/lib/threadActivity.test.ts
@@ -2375,3 +2375,71 @@ it.each(["provider_error", "usage_limit"] as const)(
     });
   },
 );
+
+describe("html renders", () => {
+  const page = { attachmentId: "attachment-page", title: "Revenue", height: 320 };
+  const renderCall = (
+    overrides: Partial<Extract<OrchestrationV2TurnItem, { type: "dynamic_tool" }>> = {},
+  ): OrchestrationV2TurnItem => ({
+    ...base("item-render", "2026-06-20T00:00:02.500Z", 2),
+    type: "dynamic_tool",
+    toolName: "mcp__t3-code__html_render",
+    input: { title: page.title },
+    output: { htmlRender: page },
+    ...overrides,
+  });
+  const laterCommand = {
+    ...command("2026-06-20T00:00:02.800Z"),
+    id: TurnItemId.make("item-command-later"),
+    ordinal: 3,
+  };
+  const feed = () =>
+    buildThreadFeed([
+      projected(userMessage(), 0),
+      projected(command(), 1),
+      projected(renderCall(), 2),
+      projected(laterCommand, 3),
+      projected(assistantMessage("2026-06-20T00:00:04.000Z"), 4),
+    ]);
+  const latestRun = {
+    runId,
+    status: "completed" as const,
+    startedAt: "2026-06-20T00:00:01.000Z",
+    completedAt: "2026-06-20T00:00:04.000Z",
+  };
+
+  it("shows a completed render in place, outside the work log", () => {
+    const expanded = deriveThreadFeedPresentation(feed(), latestRun, new Set([runId]));
+    expect(expanded.map((entry) => entry.type)).toEqual([
+      "message",
+      "run-fold",
+      "work-toggle",
+      "html-render",
+      "work-toggle",
+      "message",
+    ]);
+    expect(expanded[3]).toMatchObject({ type: "html-render", render: page, runId });
+    expect(expanded[2]?.continuesWorkLog).toBeUndefined();
+  });
+
+  it("keeps a render visible and in order when its run folds", () => {
+    const collapsed = deriveThreadFeedPresentation(feed(), latestRun, new Set());
+    expect(collapsed.map((entry) => entry.type)).toEqual([
+      "message",
+      "run-fold",
+      "html-render",
+      "message",
+    ]);
+  });
+
+  it("leaves running, failed and errored renders in the work log", () => {
+    for (const call of [
+      renderCall({ status: "running", output: null }),
+      renderCall({ status: "failed" }),
+      renderCall({ output: { isError: true, htmlRender: page } }),
+    ]) {
+      const entries = buildThreadFeed([projected(call, 0)]);
+      expect(entries.map((entry) => entry.type)).toEqual(["activity-group"]);
+    }
+  });
+});
diff --git a/apps/mobile/src/lib/threadActivity.ts b/apps/mobile/src/lib/threadActivity.ts
index a77491795704..86c4184d1c1f 100644
--- a/apps/mobile/src/lib/threadActivity.ts
+++ b/apps/mobile/src/lib/threadActivity.ts
@@ -57,7 +57,8 @@ import {
   formatSearchToolLabel,
 } from "@t3tools/shared/toolActivity";
 import { formatDuration } from "@t3tools/shared/orchestrationTiming";
-import { compactDynamicToolOutput } from "@t3tools/shared/toolOutput";
+import type { HtmlRenderReference } from "@t3tools/shared/htmlRender";
+import { compactDynamicToolOutput, htmlRenderFromToolItem } from "@t3tools/shared/toolOutput";
 import * as DateTime from "effect/DateTime";
 
 export type PendingApproval = ThreadPendingApproval;
@@ -155,12 +156,20 @@ type RawThreadFeedEntry =
       readonly createdAt: string;
       readonly runId: RunId | null;
       readonly activity: ThreadFeedActivity;
+    }
+  | {
+      /** A page a completed `html_render` call published, shown in place of its work row. */
+      readonly type: "html-render";
+      readonly id: string;
+      readonly createdAt: string;
+      readonly runId: RunId | null;
+      readonly render: HtmlRenderReference;
     };
 
 export type ThreadFeedEntry = ThreadFeedEntryContent & { readonly continuesWorkLog?: boolean };
 
 type ThreadFeedEntryContent =
-  | Extract<RawThreadFeedEntry, { type: "message" }>
+  | Extract<RawThreadFeedEntry, { type: "message" | "html-render" }>
   | {
       readonly type: "activity-group";
       readonly id: string;
@@ -1020,7 +1029,7 @@ function deriveThreadFeedRunFolds(
     const runId =
       entry.type === "message" && entry.message.role === "assistant"
         ? (entry.message.runId ?? runlessKey)
-        : entry.type === "activity-group"
+        : entry.type === "activity-group" || entry.type === "html-render"
           ? (entry.runId ?? runlessKey)
           : null;
     if (!runId) continue;
@@ -1072,6 +1081,7 @@ function deriveThreadFeedRunFolds(
           (entry) =>
             entry.id !== firstAssistantId &&
             entry.id !== terminalAssistantId &&
+            entry.type !== "html-render" &&
             !(
               entry.type === "activity-group" &&
               entry.activities.some(
@@ -1134,7 +1144,7 @@ const trailingReasoningGroups = new WeakMap<ThreadFeedActivityGroup, ThreadFeedA
 
 /** A steer or subsequent activity ends thinking even if the provider omits its completion. */
 function settleSupersededReasoning(
-  entry: Extract<ThreadFeedEntry, { readonly type: "message" | "activity-group" }>,
+  entry: Exclude<ThreadFeedEntry, { readonly type: "run-fold" | "work-toggle" | "thinking" }>,
   tail: boolean,
 ) {
   if (entry.type !== "activity-group") return entry;
@@ -1700,6 +1710,23 @@ export function buildThreadFeed(
       continue;
     }
     const createdAt = DateTime.formatIso(item.startedAt ?? item.updatedAt);
+    // A running or failed render stays an ordinary work row.
+    const render =
+      item.type === "dynamic_tool" && item.status === "completed"
+        ? htmlRenderFromToolItem(item)
+        : undefined;
+    if (render) {
+      const entry: RawThreadFeedEntry = {
+        type: "html-render",
+        id: `html-render:${row.visibility}:${row.sourceThreadId}:${row.sourceItemId}`,
+        createdAt,
+        runId: item.runId,
+        render,
+      };
+      projectedEntriesCache.set(row, { attemptId, entry });
+      entries.push(entry);
+      continue;
+    }
     if (item.type === "user_message" || item.type === "assistant_message") {
       const updatedAt = DateTime.formatIso(item.updatedAt);
       const entry: RawThreadFeedEntry = {
diff --git a/apps/server/src/attachmentStore.test.ts b/apps/server/src/attachmentStore.test.ts
index 4cc9c919623f..1a952d1a6344 100644
--- a/apps/server/src/attachmentStore.test.ts
+++ b/apps/server/src/attachmentStore.test.ts
@@ -16,6 +16,7 @@ import {
   parseThreadSegmentFromAttachmentId,
   resolveAttachmentPathById,
   sweepStalePendingAttachments,
+  threadHtmlRenderAttachmentIds,
 } from "./attachmentStore.ts";
 
 describe("attachmentStore", () => {
@@ -219,3 +220,27 @@ describe("attachmentStore", () => {
     }
   });
 });
+
+describe("threadHtmlRenderAttachmentIds", () => {
+  it("returns pages this thread published and skips other threads' and failed calls", () => {
+    const own = createAttachmentId("thread-a", "html")!;
+    const other = createAttachmentId("thread-b", "html")!;
+    const render = (attachmentId: string, extra = {}) => ({
+      toolName: "mcp__t3-code__html_render",
+      output: [
+        {
+          type: "text",
+          text: JSON.stringify({ htmlRender: { attachmentId, title: "x", height: 300 }, ...extra }),
+        },
+      ],
+    });
+    expect(
+      threadHtmlRenderAttachmentIds("thread-a", [
+        render(own),
+        render(other),
+        render(createAttachmentId("thread-a", "html")!, { isError: true }),
+        { toolName: "mcp__t3-code__html_preview", output: render(own).output },
+      ]),
+    ).toEqual([own]);
+  });
+});
diff --git a/apps/server/src/attachmentStore.ts b/apps/server/src/attachmentStore.ts
index 41977931b048..c959e8f3a2d0 100644
--- a/apps/server/src/attachmentStore.ts
+++ b/apps/server/src/attachmentStore.ts
@@ -4,6 +4,7 @@ import * as NodeFS from "node:fs";
 import * as NodePath from "node:path";
 
 import type { ChatAttachment } from "@t3tools/contracts";
+import { htmlRenderFromToolItem } from "@t3tools/shared/toolOutput";
 
 import {
   normalizeAttachmentRelativePath,
@@ -114,6 +115,25 @@ export function parseThreadSegmentFromAttachmentId(attachmentId: string): string
   return match[1]?.toLowerCase() ?? null;
 }
 
+/**
+ * Attachments a thread's `html_render` tool calls published. Only ids minted
+ * for this thread count, so deleting a fork never removes its source's pages.
+ */
+export function threadHtmlRenderAttachmentIds(
+  threadId: string,
+  items: Iterable<{ readonly toolName: string | null | undefined; readonly output?: unknown }>,
+) {
+  const segment = toSafeThreadAttachmentSegment(threadId);
+  if (segment === null) return [];
+  return Array.from(items).flatMap((item) => {
+    const attachmentId = htmlRenderFromToolItem(item)?.attachmentId;
+    return attachmentId !== undefined &&
+      parseThreadSegmentFromAttachmentId(attachmentId) === segment
+      ? [attachmentId]
+      : [];
+  });
+}
+
 /** Null for attachment types this build does not know; callers skip those. */
 export function attachmentRelativePath(attachment: ChatAttachment): string | null {
   switch (attachment.type) {
diff --git a/apps/server/src/htmlRender/HtmlRender.test.ts b/apps/server/src/htmlRender/HtmlRender.test.ts
new file mode 100644
index 000000000000..79c243c09b56
--- /dev/null
+++ b/apps/server/src/htmlRender/HtmlRender.test.ts
@@ -0,0 +1,219 @@
+import * as NodeServices from "@effect/platform-node/NodeServices";
+import { describe, expect, it } from "@effect/vitest";
+import { ThreadId } from "@t3tools/contracts";
+import { HostProcessEnvironment } from "@t3tools/shared/hostProcess";
+import {
+  HTML_RENDER_MEASURE_FONTS,
+  HTML_RENDER_MEASURE_WIDTHS,
+  htmlRenderTheme,
+} from "@t3tools/shared/htmlRender";
+import { T3_CODE_DARK_THEME_COLORS } from "@t3tools/shared/themePalettes";
+import * as Effect from "effect/Effect";
+import * as Encoding from "effect/Encoding";
+import * as FileSystem from "effect/FileSystem";
+import * as Layer from "effect/Layer";
+import * as Option from "effect/Option";
+import * as Path from "effect/Path";
+
+import { resolveAttachmentPathById } from "../attachmentStore.ts";
+import * as ServerConfig from "../config.ts";
+import * as HtmlRender from "./HtmlRender.ts";
+import * as PreviewBrowser from "./PreviewBrowser.ts";
+
+// Real-browser tests run only when this names a chrome-headless-shell, for
+// example one T3 installed under <T3 home>/tools/chrome-headless-shell.
+const TEST_BROWSER_ENV = "T3CODE_TEST_HEADLESS_SHELL";
+
+const htmlRenderLayer = (executable?: string) =>
+  HtmlRender.layer.pipe(
+    Layer.provide(
+      Layer.succeed(
+        PreviewBrowser.PreviewBrowser,
+        PreviewBrowser.PreviewBrowser.of({
+          executable:
+            executable === undefined
+              ? Effect.die("This test has no preview browser.")
+              : Effect.succeed(executable),
+          installed: Effect.succeed(Option.fromUndefinedOr(executable)),
+        }),
+      ),
+    ),
+    Layer.provideMerge(ServerConfig.layerTest(process.cwd(), { prefix: "t3-html-render-" })),
+    Layer.provideMerge(NodeServices.layer),
+  );
+const testLayer = htmlRenderLayer();
+
+const PNG_BYTES = new Uint8Array([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a]);
+
+describe("HtmlRender", () => {
+  it.effect("inlines local images by absolute path and leaves URLs and relative paths alone", () =>
+    Effect.gen(function* () {
+      const fileSystem = yield* FileSystem.FileSystem;
+      const path = yield* Path.Path;
+      const htmlRender = yield* HtmlRender.HtmlRender;
+      const directory = yield* fileSystem.makeTempDirectoryScoped({ prefix: "t3-html-images-" });
+      const png = path.join(directory, "shot.png");
+      const svg = path.join(directory, "logo.svg");
+      yield* fileSystem.writeFile(png, PNG_BYTES);
+      yield* fileSystem.writeFileString(svg, "<svg/>");
+      const kept = [
+        "https://example.com/a.png",
+        "//cdn.example.com/b.png",
+        "./c.png",
+        "data:image/png;base64,AAAA",
+      ];
+
+      const prepared = yield* htmlRender.prepare(
+        [
+          "<!doctype html><html><head><title>Shots</title></head><body>",
+          `<img src="${png}"><div style="background:url(${svg})"></div>`,
+          `<script>const shots = ['${png}', \`${svg}\`];</script>`,
+          ...kept.map((src) => `<img src="${src}">`),
+          "</body></html>",
+        ].join(""),
+      );
+
+      const pngUri = `data:image/png;base64,${Encoding.encodeBase64(PNG_BYTES)}`;
+      const svgUri = `data:image/svg+xml;base64,${Encoding.encodeBase64("<svg/>")}`;
+      expect(prepared).toContain(`<img src="${pngUri}">`);
+      expect(prepared).toContain(`url(${svgUri})`);
+      expect(prepared).toContain(`['${pngUri}', \`${svgUri}\`]`);
+      expect(prepared).not.toContain(directory);
+      for (const src of kept) expect(prepared).toContain(`<img src="${src}">`);
+      // The theme bootstrap opens the head, ahead of the page's own markup.
+      expect(prepared.indexOf("<head>")).toBeLessThan(prepared.indexOf('<style id="t3-theme">'));
+      expect(prepared.indexOf('<style id="t3-theme">')).toBeLessThan(prepared.indexOf("<title>"));
+    }).pipe(Effect.provide(testLayer)),
+  );
+
+  it.effect("lists every local image it cannot read", () =>
+    Effect.gen(function* () {
+      const fileSystem = yield* FileSystem.FileSystem;
+      const path = yield* Path.Path;
+      const htmlRender = yield* HtmlRender.HtmlRender;
+      const directory = yield* fileSystem.makeTempDirectoryScoped({ prefix: "t3-html-images-" });
+      const folder = path.join(directory, "folder.png");
+      yield* fileSystem.makeDirectory(folder);
+      const missing = path.join(directory, "missing.jpg");
+
+      const error = yield* htmlRender
+        .prepare(`<img src="${missing}"><img src='${folder}'><img src="C:\\nope\\shot.webp">`)
+        .pipe(Effect.flip);
+
+      expect(error).toBeInstanceOf(HtmlRender.HtmlRenderImagesNotFoundError);
+      expect(error._tag === "HtmlRenderImagesNotFoundError" && error.paths).toEqual([
+        missing,
+        folder,
+        "C:\\nope\\shot.webp",
+      ]);
+    }).pipe(Effect.provide(testLayer)),
+  );
+
+  it.effect("publishes the prepared page as an html thread attachment", () =>
+    Effect.gen(function* () {
+      const fileSystem = yield* FileSystem.FileSystem;
+      const config = yield* ServerConfig.ServerConfig;
+      const htmlRender = yield* HtmlRender.HtmlRender;
+
+      const reference = yield* htmlRender.publish({
+        threadId: ThreadId.make("thread-html-render"),
+        html: "<p>Quarterly revenue</p>",
+        title: "  Revenue  ",
+        height: 9_000,
+      });
+
+      // Without an installed preview browser the page publishes unmeasured.
+      expect(reference).toEqual({
+        attachmentId: expect.any(String),
+        title: "Revenue",
+        height: 2_000,
+      });
+      const stored = resolveAttachmentPathById({
+        attachmentsDir: config.attachmentsDir,
+        attachmentId: reference.attachmentId,
+      });
+      expect(stored?.endsWith(".html")).toBe(true);
+      const html = yield* fileSystem.readFileString(stored ?? "");
+      expect(html).toContain('<style id="t3-theme">');
+      expect(html).toContain("<p>Quarterly revenue</p>");
+    }).pipe(Effect.provide(testLayer)),
+  );
+
+  it.live(
+    "screenshots the page in headless Chrome with the requested theme and every console level",
+    (ctx) =>
+      Effect.gen(function* () {
+        const executable = (yield* HostProcessEnvironment)[TEST_BROWSER_ENV];
+        if (!executable) return ctx.skip(`Set ${TEST_BROWSER_ENV} to run this test.`);
+        yield* Effect.gen(function* () {
+          const htmlRender = yield* HtmlRender.HtmlRender;
+          const preview = yield* htmlRender.preview({
+            html: [
+              '<!doctype html><html><head></head><body><div style="height:300px;background:var(--accent)"></div>',
+              '<img src="/nonexistent/t3-missing.png" hidden>',
+              "<script>",
+              "const root = getComputedStyle(document.documentElement);",
+              'console.log("ready", 3); console.info(root.getPropertyValue("--font-sans"));',
+              'console.warn(root.getPropertyValue("--background")); console.error("boom");',
+              "</script>",
+              '<script>throw new Error("broken chart");</script>',
+              "</body></html>",
+            ].join(""),
+            width: 400,
+            appearance: "dark",
+          });
+
+          const png = Buffer.from(preview.png, "base64");
+          expect(png.readUInt32BE(0)).toBe(0x89504e47);
+          expect([png.readUInt32BE(16), png.readUInt32BE(20)]).toEqual([400, 300]);
+          expect(preview).toMatchObject({
+            width: 400,
+            contentHeight: 300,
+            capturedHeight: 300,
+            missingImages: ["/nonexistent/t3-missing.png"],
+          });
+          // Headless Chrome prefers light, so a dark background proves the theme fragment applied.
+          expect(preview.consoleMessages).toEqual(
+            expect.arrayContaining([
+              { level: "log", text: "ready 3" },
+              { level: "info", text: HTML_RENDER_MEASURE_FONTS.sans },
+              {
+                level: "warning",
+                text: htmlRenderTheme(T3_CODE_DARK_THEME_COLORS, "dark").variables["--background"],
+              },
+              { level: "error", text: "boom" },
+              {
+                level: "error",
+                text: expect.stringMatching(/^Error: broken chart\n\s+at page\.html:1:\d+$/),
+              },
+            ]),
+          );
+        }).pipe(Effect.provide(htmlRenderLayer(executable)));
+      }),
+    30_000,
+  );
+
+  it.live(
+    "measures a published page at every client width with a fresh load each",
+    (ctx) =>
+      Effect.gen(function* () {
+        const executable = (yield* HostProcessEnvironment)[TEST_BROWSER_ENV];
+        if (!executable) return ctx.skip(`Set ${TEST_BROWSER_ENV} to run this test.`);
+        yield* Effect.gen(function* () {
+          const htmlRender = yield* HtmlRender.HtmlRender;
+          // Like a D3 chart, the page sizes itself from the width once, at load.
+          const reference = yield* htmlRender.publish({
+            threadId: ThreadId.make("thread-html-measure"),
+            html: '<div id="chart"></div><script>document.getElementById("chart").style.height = innerWidth / 2 + "px";</script>',
+            title: "Chart",
+            height: 600,
+          });
+
+          expect(reference.heights).toEqual(
+            HTML_RENDER_MEASURE_WIDTHS.map((width) => [width, Math.ceil(width / 2)]),
+          );
+        }).pipe(Effect.provide(htmlRenderLayer(executable)));
+      }),
+    30_000,
+  );
+});
diff --git a/apps/server/src/htmlRender/HtmlRender.ts b/apps/server/src/htmlRender/HtmlRender.ts
new file mode 100644
index 000000000000..2dfe78cd65af
--- /dev/null
+++ b/apps/server/src/htmlRender/HtmlRender.ts
@@ -0,0 +1,395 @@
+import type { ThreadId } from "@t3tools/contracts";
+import { HostProcessUserId } from "@t3tools/shared/hostProcess";
+import {
+  clampHtmlRenderHeight,
+  HTML_RENDER_COLUMN_WIDTH,
+  HTML_RENDER_MAX_TITLE_LENGTH,
+  HTML_RENDER_MEASURE_FONTS,
+  HTML_RENDER_MEASURE_WIDTHS,
+  htmlRenderTheme,
+  htmlRenderThemeFragment,
+  injectHtmlRenderBootstrap,
+  type HtmlRenderReference,
+} from "@t3tools/shared/htmlRender";
+import {
+  T3_CODE_DARK_THEME_COLORS,
+  T3_CODE_LIGHT_THEME_COLORS,
+  type ThemeAppearance,
+} from "@t3tools/shared/themePalettes";
+import * as Context from "effect/Context";
+import * as Effect from "effect/Effect";
+import * as Encoding from "effect/Encoding";
+import * as FileSystem from "effect/FileSystem";
+import * as Layer from "effect/Layer";
+import * as Option from "effect/Option";
+import type * as Path from "effect/Path";
+import * as Schema from "effect/Schema";
+import * as Semaphore from "effect/Semaphore";
+import type * as ChildProcessSpawner from "effect/unstable/process/ChildProcessSpawner";
+
+import { resolveAttachmentRelativePath } from "../attachmentPaths.ts";
+import { createAttachmentId } from "../attachmentStore.ts";
+import * as ServerConfig from "../config.ts";
+import * as HeadlessChrome from "./headlessChrome.ts";
+import * as PreviewBrowser from "./PreviewBrowser.ts";
+
+const MIB = 1024 * 1024;
+const MAX_IMAGE_BYTES = 10 * MIB;
+const MAX_PAGE_BYTES = 25 * MIB;
+const formatMib = (bytes: number) => `${(bytes / MIB).toFixed(1)} MiB`;
+
+export class HtmlRenderImagesNotFoundError extends Schema.TaggedError<HtmlRenderImagesNotFoundError>()(
+  "HtmlRenderImagesNotFoundError",
+  { paths: Schema.Array(Schema.String) },
+) {
+  override get message(): string {
+    return `These local images could not be read: ${this.paths.join(", ")}. Use absolute paths to existing image files, or remove them.`;
+  }
+}
+
+export class HtmlRenderImageTooLargeError extends Schema.TaggedError<HtmlRenderImageTooLargeError>()(
+  "HtmlRenderImageTooLargeError",
+  { path: Schema.String, sizeBytes: Schema.Number },
+) {
+  override get message(): string {
+    return `${this.path} is ${formatMib(this.sizeBytes)}; each local image must be at most ${formatMib(MAX_IMAGE_BYTES)}.`;
+  }
+}
+
+export class HtmlRenderPageTooLargeError extends Schema.TaggedError<HtmlRenderPageTooLargeError>()(
+  "HtmlRenderPageTooLargeError",
+  { sizeBytes: Schema.Number },
+) {
+  override get message(): string {
+    return `With its images inlined the page is ${formatMib(this.sizeBytes)}; the limit is ${formatMib(MAX_PAGE_BYTES)}. Use smaller images.`;
+  }
+}
+
+export class HtmlRenderStoreError extends Schema.TaggedError<HtmlRenderStoreError>()(
+  "HtmlRenderStoreError",
+  { cause: Schema.Defect() },
+) {
+  override get message(): string {
+    return "The HTML render could not be saved.";
+  }
+}
+
+export type HtmlRenderPrepareError =
+  | HtmlRenderImagesNotFoundError
+  | HtmlRenderImageTooLargeError
+  | HtmlRenderPageTooLargeError;
+
+export interface HtmlPreview {
+  /** Base64 PNG of the top `capturedHeight` pixels. */
+  readonly png: string;
+  readonly width: number;
+  /** Height the page needs to show without scrolling. */
+  readonly contentHeight: number;
+  readonly capturedHeight: number;
+  readonly consoleMessages: ReadonlyArray<HeadlessChrome.ConsoleMessage>;
+  /** Local image paths that could not be read; they show as broken images. */
+  readonly missingImages?: ReadonlyArray<string>;
+}
+
+export class HtmlRender extends Context.Service<
+  HtmlRender,
+  {
+    /** The self-contained page that gets stored: local images inlined, theme bootstrap injected. */
+    readonly prepare: (html: string) => Effect.Effect<string, HtmlRenderPrepareError>;
+    /**
+     * Stores a prepared page as a thread attachment for clients to show inline,
+     * measuring its height at each client width when the preview browser is
+     * already installed.
+     */
+    readonly publish: (input: {
+      readonly threadId: ThreadId;
+      readonly html: string;
+      readonly title: string;
+      readonly height: number;
+    }) => Effect.Effect<HtmlRenderReference, HtmlRenderPrepareError | HtmlRenderStoreError>;
+    /** Screenshots a page in headless Chrome, tolerating unreadable local images. */
+    readonly preview: (input: {
+      readonly html: string;
+      readonly width?: number | undefined;
+      readonly appearance?: ThemeAppearance | undefined;
+    }) => Effect.Effect<
+      HtmlPreview,
+      | Exclude<HtmlRenderPrepareError, HtmlRenderImagesNotFoundError>
+      | PreviewBrowser.PreviewBrowserInstallError
+      | PreviewBrowser.PreviewBrowserInstallingError
+      | PreviewBrowser.PreviewBrowserUnsupportedError
+      | HeadlessChrome.HtmlRenderBrowserError
+    >;
+  }
+>()("t3/htmlRender/HtmlRender") {}
+
+const IMAGE_MIME_TYPES: Record<string, string> = {
+  png: "image/png",
+  jpg: "image/jpeg",
+  jpeg: "image/jpeg",
+  gif: "image/gif",
+  webp: "image/webp",
+  avif: "image/avif",
+  svg: "image/svg+xml",
+  bmp: "image/bmp",
+  ico: "image/x-icon",
+};
+const IMAGE_EXTENSIONS = Object.keys(IMAGE_MIME_TYPES).join("|");
+// POSIX `/…` (not protocol-relative `//…`) or Windows `C:\…` / `C:/…`.
+const ABSOLUTE_PATH = String.raw`(?:/(?!/)|[a-z]:[\\/])`;
+// An absolute image path that is a whole quoted string ("…", '…', `…`) or an
+// unquoted CSS url(…). URLs, data:, blob:, and relative paths never match.
+const LOCAL_IMAGE_PATTERN = new RegExp(
+  String.raw`(["'\x60])(${ABSOLUTE_PATH}(?:(?!\1)[^\r\n]){0,2048}?\.(?:${IMAGE_EXTENSIONS}))\1` +
+    String.raw`|url\(\s*(${ABSOLUTE_PATH}[^\s"'\x60()]{0,2048}?\.(?:${IMAGE_EXTENSIONS}))\s*\)`,
+  "gid",
+);
+
+const findLocalImages = (html: string) =>
+  Array.from(html.matchAll(LOCAL_IMAGE_PATTERN)).flatMap((match) => {
+    const span = match.indices?.[2] ?? match.indices?.[3];
+    return span ? [{ start: span[0], end: span[1], path: html.slice(span[0], span[1]) }] : [];
+  });
+
+// Inside a JS string literal a Windows path's backslashes are escaped.
+const filePathFor = (reference: string) =>
+  /^[a-z]:/i.test(reference) ? reference.replaceAll("\\\\", "\\") : reference;
+
+const dataUriPrefix = (path: string) =>
+  `data:${IMAGE_MIME_TYPES[path.slice(path.lastIndexOf(".") + 1).toLowerCase()] ?? "application/octet-stream"};base64,`;
+
+/** Replaces every local image reference with a data URI; unreadable paths stay as written. */
+const inlineLocalImages = Effect.fn("HtmlRender.inlineLocalImages")(function* (html: string) {
+  const fileSystem = yield* FileSystem.FileSystem;
+  const references = findLocalImages(html);
+  const files = yield* Effect.forEach(
+    [...new Set(references.map((reference) => reference.path))],
+    (path) =>
+      fileSystem.stat(filePathFor(path)).pipe(
+        Effect.map((info) => ({
+          path,
+          size: info.type === "File" ? Number(info.size) : undefined,
+        })),
+        Effect.orElseSucceed(() => ({ path, size: undefined })),
+      ),
+    { concurrency: 8 },
+  );
+  const oversized = files.find((file) => file.size !== undefined && file.size > MAX_IMAGE_BYTES);
+  if (oversized?.size !== undefined) {
+    return yield* new HtmlRenderImageTooLargeError({
+      path: oversized.path,
+      sizeBytes: oversized.size,
+    });
+  }
+  const sizes = new Map(files.map((file) => [file.path, file.size]));
+  const pageBytes = references.reduce((total, reference) => {
+    const size = sizes.get(reference.path);
+    return size === undefined
+      ? total
+      : total +
+          dataUriPrefix(reference.path).length +
+          Math.ceil(size / 3) * 4 -
+          Buffer.byteLength(reference.path);
+  }, Buffer.byteLength(html));
+  if (pageBytes > MAX_PAGE_BYTES) {
+    return yield* new HtmlRenderPageTooLargeError({ sizeBytes: pageBytes });
+  }
+  const dataUris = new Map(
+    yield* Effect.forEach(
+      files.filter((file) => file.size !== undefined),
+      (file) =>
+        fileSystem.readFile(filePathFor(file.path)).pipe(
+          Effect.map((bytes) => [
+            [file.path, dataUriPrefix(file.path) + Encoding.encodeBase64(bytes)] as const,
+          ]),
+          Effect.orElseSucceed(() => []),
+        ),
+      { concurrency: 4 },
+    ).pipe(Effect.map((entries) => entries.flat())),
+  );
+  const parts: Array<string> = [];
+  let cursor = 0;
+  for (const reference of references) {
+    const dataUri = dataUris.get(reference.path);
+    if (dataUri === undefined) continue;
+    parts.push(html.slice(cursor, reference.start), dataUri);
+    cursor = reference.end;
+  }
+  parts.push(html.slice(cursor));
+  return {
+    html: parts.join(""),
+    missing: files.filter((file) => !dataUris.has(file.path)).map((file) => file.path),
+  };
+});
+
+const MIN_PREVIEW_WIDTH = 240;
+const MAX_PREVIEW_WIDTH = 1_600;
+// Each preview or measurement runs its own browser; more at once mostly costs memory.
+const MAX_CONCURRENT_BROWSERS = 2;
+// Publishing waits this long at most for heights before returning without them.
+const MEASURE_TIMEOUT = "6 seconds";
+
+// Measured in the dark theme with Arial-metric fonts, so text wraps close to how clients show it.
+const MEASURE_FRAGMENT = htmlRenderThemeFragment(
+  htmlRenderTheme(T3_CODE_DARK_THEME_COLORS, "dark", HTML_RENDER_MEASURE_FONTS),
+);
+
+const make = Effect.gen(function* () {
+  const fileSystem = yield* FileSystem.FileSystem;
+  const config = yield* ServerConfig.ServerConfig;
+  const previewBrowser = yield* PreviewBrowser.PreviewBrowser;
+  const services = yield* Effect.context<
+    FileSystem.FileSystem | Path.Path | ChildProcessSpawner.ChildProcessSpawner
+  >();
+  const browsers = yield* Semaphore.make(MAX_CONCURRENT_BROWSERS);
+  // Chrome refuses its sandbox as root. Other hosts that cannot provide one
+  // (Ubuntu 23.10+ AppArmor) are learned from the first launch and remembered.
+  let noSandbox = (yield* HostProcessUserId) === 0;
+
+  const launching = <A>(
+    run: (
+      noSandbox: boolean,
+    ) => Effect.Effect<
+      A,
+      HeadlessChrome.HtmlRenderBrowserError | HeadlessChrome.HtmlRenderSandboxUnavailableError
+    >,
+  ) =>
+    browsers.withPermits(1)(
+      run(noSandbox).pipe(
+        Effect.catchTag("HtmlRenderSandboxUnavailableError", () =>
+          Effect.logInfo(
+            "Chrome's sandbox is unavailable on this host; launching it without one.",
+          ).pipe(
+            Effect.andThen(
+              Effect.sync(() => {
+                noSandbox = true;
+              }),
+            ),
+            Effect.andThen(run(true)),
+          ),
+        ),
+        Effect.catchTag("HtmlRenderSandboxUnavailableError", (cause) =>
+          Effect.fail(
+            new HeadlessChrome.HtmlRenderBrowserError({
+              reason: "the browser has no sandbox",
+              cause,
+            }),
+          ),
+        ),
+      ),
+    );
+
+  // Never installs the browser: html_render must not depend on it.
+  const measure = (pagePath: string) =>
+    Effect.gen(function* () {
+      const executable = yield* previewBrowser.installed;
+      if (Option.isNone(executable)) return undefined;
+      const heights = yield* launching((noSandbox) =>
+        HeadlessChrome.measureHtmlHeights({
+          executable: executable.value,
+          noSandbox,
+          pagePath,
+          widths: HTML_RENDER_MEASURE_WIDTHS,
+          urlFragment: MEASURE_FRAGMENT,
+        }).pipe(Effect.provideContext(services)),
+      ).pipe(
+        Effect.timeoutOrElse({
+          duration: MEASURE_TIMEOUT,
+          orElse: () =>
+            Effect.fail(
+              new HeadlessChrome.HtmlRenderBrowserError({
+                reason: `measuring took longer than ${MEASURE_TIMEOUT}`,
+              }),
+            ),
+        }),
+      );
+      return heights.toSorted(([left], [right]) => left - right);
+    }).pipe(
+      Effect.catch((cause) =>
+        Effect.logWarning("Could not measure an HTML render; publishing it without heights.", {
+          cause,
+        }).pipe(Effect.as(undefined)),
+      ),
+      Effect.withSpan("HtmlRender.measure"),
+    );
+
+  // The bootstrap goes in first so its head scan never runs over inlined image data.
+  const inline = (html: string) =>
+    inlineLocalImages(injectHtmlRenderBootstrap(html)).pipe(Effect.provideContext(services));
+
+  const prepare = Effect.fn("HtmlRender.prepare")(function* (html: string) {
+    const inlined = yield* inline(html);
+    if (inlined.missing.length > 0) {
+      return yield* new HtmlRenderImagesNotFoundError({ paths: inlined.missing });
+    }
+    return inlined.html;
+  });
+
+  const publish = Effect.fn("HtmlRender.publish")(function* (input: {
+    readonly threadId: ThreadId;
+    readonly html: string;
+    readonly title: string;
+    readonly height: number;
+  }) {
+    const html = yield* prepare(input.html);
+    // The `-html` id suffix makes the asset route serve it as a sandboxed text/html document.
+    const attachmentId = createAttachmentId(input.threadId, "html");
+    const filePath =
+      attachmentId === null
+        ? null
+        : resolveAttachmentRelativePath({
+            attachmentsDir: config.attachmentsDir,
+            relativePath: `${attachmentId}.html`,
+          });
+    if (attachmentId === null || filePath === null) {
+      return yield* new HtmlRenderStoreError({ cause: new Error("Invalid thread id.") });
+    }
+    yield* fileSystem
+      .writeFileString(filePath, html)
+      .pipe(Effect.mapError((cause) => new HtmlRenderStoreError({ cause })));
+    const heights = yield* measure(filePath);
+    return {
+      attachmentId,
+      title: input.title.trim().slice(0, HTML_RENDER_MAX_TITLE_LENGTH) || "HTML",
+      height: clampHtmlRenderHeight(input.height),
+      ...(heights === undefined ? {} : { heights }),
+    } satisfies HtmlRenderReference;
+  });
+
+  const preview = Effect.fn("HtmlRender.preview")(function* (input: {
+    readonly html: string;
+    readonly width?: number | undefined;
+    readonly appearance?: ThemeAppearance | undefined;
+  }) {
+    const width = Math.min(
+      MAX_PREVIEW_WIDTH,
+      Math.max(MIN_PREVIEW_WIDTH, Math.round(input.width ?? HTML_RENDER_COLUMN_WIDTH)),
+    );
+    const appearance = input.appearance ?? "dark";
+    const inlined = yield* inline(input.html);
+    const executable = yield* previewBrowser.executable;
+    const theme = htmlRenderTheme(
+      appearance === "light" ? T3_CODE_LIGHT_THEME_COLORS : T3_CODE_DARK_THEME_COLORS,
+      appearance,
+      HTML_RENDER_MEASURE_FONTS,
+    );
+    const screenshot = yield* launching((noSandbox) =>
+      HeadlessChrome.captureHtmlScreenshot({
+        executable,
+        noSandbox,
+        html: inlined.html,
+        width,
+        urlFragment: htmlRenderThemeFragment(theme),
+      }).pipe(Effect.provideContext(services)),
+    );
+    return {
+      ...screenshot,
+      width,
+      ...(inlined.missing.length === 0 ? {} : { missingImages: inlined.missing }),
+    } satisfies HtmlPreview;
+  });
+
+  return HtmlRender.of({ prepare, publish, preview });
+});
+
+export const layer = Layer.effect(HtmlRender, make);
diff --git a/apps/server/src/htmlRender/PreviewBrowser.test.ts b/apps/server/src/htmlRender/PreviewBrowser.test.ts
new file mode 100644
index 000000000000..4b9761ba566f
--- /dev/null
+++ b/apps/server/src/htmlRender/PreviewBrowser.test.ts
@@ -0,0 +1,285 @@
+import * as NodeServices from "@effect/platform-node/NodeServices";
+import { expect, it } from "@effect/vitest";
+import { HostProcessArchitecture, HostProcessPlatform } from "@t3tools/shared/hostProcess";
+import * as Deferred from "effect/Deferred";
+import type * as Duration from "effect/Duration";
+import * as Effect from "effect/Effect";
+import * as Fiber from "effect/Fiber";
+import * as FileSystem from "effect/FileSystem";
+import * as Option from "effect/Option";
+import * as Path from "effect/Path";
+import * as Stream from "effect/Stream";
+import * as TestClock from "effect/testing/TestClock";
+import { HttpClient, HttpClientResponse } from "effect/unstable/http";
+import * as NodeCrypto from "node:crypto";
+import * as NodeZlib from "node:zlib";
+
+import * as PreviewBrowser from "./PreviewBrowser.ts";
+
+// POSIX modes cannot be checked on NTFS, so follow the host like the Antigravity suite.
+const hostPlatform: NodeJS.Platform =
+  HostProcessPlatform.defaultValue() === "win32" ? "win32" : "linux";
+const executableName =
+  hostPlatform === "win32" ? "chrome-headless-shell.exe" : "chrome-headless-shell";
+const ROOT = "chrome-headless-shell-fixture/";
+
+/** A stored ZIP whose entries carry Unix modes, like Chrome for Testing's archives. */
+const makeZip = (
+  entries: ReadonlyArray<{ readonly name: string; readonly data?: string; readonly mode: number }>,
+) => {
+  const records: Array<Buffer> = [];
+  const directory: Array<Buffer> = [];
+  let offset = 0;
+  for (const entry of entries) {
+    const name = Buffer.from(entry.name);
+    const data = Buffer.from(entry.data ?? "");
+    const crc = NodeZlib.crc32(data);
+    const local = Buffer.alloc(30);
+    local.writeUInt32LE(0x04034b50, 0);
+    local.writeUInt16LE(20, 4);
+    local.writeUInt32LE(crc, 14);
+    local.writeUInt32LE(data.length, 18);
+    local.writeUInt32LE(data.length, 22);
+    local.writeUInt16LE(name.length, 26);
+    const central = Buffer.alloc(46);
+    central.writeUInt32LE(0x02014b50, 0);
+    central.writeUInt16LE((3 << 8) | 20, 4);
+    central.writeUInt16LE(20, 6);
+    central.writeUInt32LE(crc, 16);
+    central.writeUInt32LE(data.length, 20);
+    central.writeUInt32LE(data.length, 24);
+    central.writeUInt16LE(name.length, 28);
+    central.writeUInt32LE((entry.mode << 16) >>> 0, 38);
+    central.writeUInt32LE(offset, 42);
+    records.push(local, name, data);
+    directory.push(central, name);
+    offset += local.length + name.length + data.length;
+  }
+  const centralDirectory = Buffer.concat(directory);
+  const end = Buffer.alloc(22);
+  end.writeUInt32LE(0x06054b50, 0);
+  end.writeUInt16LE(entries.length, 8);
+  end.writeUInt16LE(entries.length, 10);
+  end.writeUInt32LE(centralDirectory.length, 12);
+  end.writeUInt32LE(offset, 16);
+  return Buffer.concat([...records, centralDirectory, end]);
+};
+
+const browserArchive = makeZip([
+  { name: ROOT, mode: 0o40755 },
+  { name: `${ROOT}${executableName}`, data: "#!/bin/sh\n", mode: 0o100755 },
+  { name: `${ROOT}libEGL.so`, data: "library", mode: 0o100755 },
+  { name: `${ROOT}locales/`, mode: 0o40755 },
+  { name: `${ROOT}locales/en-US.pak`, data: "strings", mode: 0o100644 },
+]);
+
+const makeHarness = Effect.fn("test.makePreviewBrowser")(function* (
+  options: {
+    readonly archive?: Buffer;
+    readonly sha256?: string;
+    readonly body?: Stream.Stream<Uint8Array>;
+    readonly wait?: Duration.Input;
+    readonly unsupported?: boolean;
+  } = {},
+) {
+  const fs = yield* FileSystem.FileSystem;
+  const path = yield* Path.Path;
+  const baseDir = yield* fs.makeTempDirectoryScoped({ prefix: "t3-preview-browser-test-" });
+  const archive = options.archive ?? browserArchive;
+  const requests: Array<string> = [];
+  const browser = yield* PreviewBrowser.makePreviewBrowser({
+    baseDir,
+    release: options.unsupported
+      ? null
+      : {
+          version: "1.2.3",
+          platform: "fixture",
+          url: "https://storage.googleapis.com/chrome-headless-shell-fixture.zip",
+          bytes: archive.byteLength,
+          sha256: options.sha256 ?? NodeCrypto.createHash("sha256").update(archive).digest("hex"),
+        },
+    ...(options.wait === undefined ? {} : { wait: options.wait }),
+  }).pipe(
+    Effect.provideService(HostProcessPlatform, hostPlatform),
+    Effect.provideService(HostProcessArchitecture, "x64"),
+    Effect.provideService(
+      HttpClient.HttpClient,
+      HttpClient.make((request) =>
+        Effect.sync(() => {
+          requests.push(request.url);
+          const response = HttpClientResponse.fromWeb(request, new Response(null));
+          return Object.defineProperty(response, "stream", {
+            value: options.body ?? Stream.make(archive.subarray(0, 40), archive.subarray(40)),
+          });
+        }),
+      ),
+    ),
+  );
+  const installRoot = path.join(baseDir, "tools", "chrome-headless-shell", "fixture");
+  return { browser, fs, path, baseDir, installRoot, requests };
+});
+
+it.layer(NodeServices.layer)("PreviewBrowser", (it) => {
+  it.effect("installs a verified download with its file modes and then reuses it", () =>
+    Effect.gen(function* () {
+      const { browser, fs, path, installRoot, requests } = yield* makeHarness();
+      yield* fs.makeDirectory(path.join(installRoot, "1.0.0"), { recursive: true });
+      expect(yield* browser.installed).toEqual(Option.none());
+
+      const executable = yield* browser.executable;
+
+      const version = path.join(installRoot, "1.2.3");
+      expect(executable).toBe(path.join(version, executableName));
+      expect(yield* fs.readFileString(path.join(version, "locales", "en-US.pak"))).toBe("strings");
+      if (hostPlatform !== "win32") {
+        const mode = (file: string) =>
+          fs.stat(path.join(version, file)).pipe(Effect.map((info) => info.mode & 0o777));
+        expect(yield* mode(executableName)).toBe(0o755);
+        expect(yield* mode("libEGL.so")).toBe(0o755);
+        expect(yield* mode(path.join("locales", "en-US.pak"))).toBe(0o644);
+      }
+      // The old build and the staging directory are gone.
+      expect(yield* fs.readDirectory(installRoot)).toEqual(["1.2.3"]);
+      expect(yield* browser.executable).toBe(executable);
+      expect(yield* browser.installed).toEqual(Option.some(executable));
+      expect(requests).toHaveLength(1);
+    }),
+  );
+
+  it.effect.each([
+    { name: "a hash mismatch", sha256: "0".repeat(64) },
+    { name: "a short download", body: Stream.make(browserArchive.subarray(0, -1)) },
+    {
+      name: "an oversized download",
+      body: Stream.make(browserArchive, Buffer.from("extra")),
+    },
+  ])("rejects $name, installs nothing, and retries on the next call", (testCase) =>
+    Effect.gen(function* () {
+      const { browser, fs, installRoot, requests } = yield* makeHarness(testCase);
+
+      const error = yield* browser.executable.pipe(Effect.flip);
+
+      expect(error._tag).toBe("PreviewBrowserInstallError");
+      expect(error.message).toMatch(
+        /^T3 could not install its HTML preview browser: .+ Call html_preview again to retry\.$/,
+      );
+      expect(yield* fs.readDirectory(installRoot)).toEqual([]);
+      yield* browser.executable.pipe(Effect.flip);
+      expect(requests).toHaveLength(2);
+    }),
+  );
+
+  it.effect.each([
+    { name: "a parent-directory entry", entry: `${ROOT}../escape` },
+    { name: "an absolute entry", entry: "/escape" },
+    { name: "an entry outside the top directory", entry: "escape" },
+  ])("rejects an archive with $name", (testCase) =>
+    Effect.gen(function* () {
+      const { browser, fs, path, baseDir, installRoot } = yield* makeHarness({
+        archive: makeZip([
+          { name: `${ROOT}${executableName}`, data: "#!/bin/sh\n", mode: 0o100755 },
+          { name: testCase.entry, data: "escaped", mode: 0o100644 },
+        ]),
+      });
+
+      const error = yield* browser.executable.pipe(Effect.flip);
+
+      expect(error._tag).toBe("PreviewBrowserInstallError");
+      expect(yield* fs.readDirectory(installRoot)).toEqual([]);
+      expect(yield* fs.exists(path.join(baseDir, "tools", "chrome-headless-shell", "escape"))).toBe(
+        false,
+      );
+    }),
+  );
+
+  it.effect("shares one install between callers and finishes it after they stop waiting", () =>
+    Effect.gen(function* () {
+      const firstChunkSent = yield* Deferred.make<void>();
+      const finishDownload = yield* Deferred.make<void>();
+      const { browser, requests } = yield* makeHarness({
+        wait: "45 seconds",
+        body: Stream.concat(
+          Stream.make(browserArchive.subarray(0, 100)),
+          Stream.fromEffect(
+            Deferred.succeed(firstChunkSent, undefined).pipe(
+              Effect.andThen(Deferred.await(finishDownload)),
+              Effect.as(browserArchive.subarray(100)),
+            ),
+          ),
+        ),
+      });
+
+      const callers = yield* Effect.forEach([1, 2], () =>
+        Effect.forkChild(browser.executable.pipe(Effect.flip)),
+      );
+      yield* Deferred.await(firstChunkSent);
+      yield* TestClock.adjust("45 seconds");
+      for (const caller of callers) {
+        expect(yield* Fiber.join(caller)).toMatchObject({
+          _tag: "PreviewBrowserInstallingError",
+          downloadedBytes: 100,
+          unpacking: false,
+        });
+      }
+
+      // The install belongs to the service, so it outlives the callers that gave up on it.
+      yield* Deferred.succeed(finishDownload, undefined);
+      expect(yield* browser.executable).toMatch(new RegExp(`${executableName}$`));
+      expect(requests).toHaveLength(1);
+    }),
+  );
+
+  it.effect("reports hosts Chrome for Testing does not build for without downloading", () =>
+    Effect.gen(function* () {
+      const { browser, requests } = yield* makeHarness({ unsupported: true });
+      expect((yield* browser.executable.pipe(Effect.flip))._tag).toBe(
+        "PreviewBrowserUnsupportedError",
+      );
+      expect(yield* browser.installed).toEqual(Option.none());
+      expect(requests).toEqual([]);
+    }),
+  );
+});
+
+it("pins one Chrome for Testing build per host", () => {
+  const hosts = [
+    ["linux", "x64"],
+    ["linux", "arm64"],
+    ["darwin", "arm64"],
+    ["darwin", "x64"],
+    ["win32", "x64"],
+    ["win32", "arm64"],
+    ["win32", "ia32"],
+    ["linux", "ia32"],
+    ["freebsd", "x64"],
+  ] as const;
+  expect(
+    hosts.map(([platform, arch]) => PreviewBrowser.previewBrowserRelease(platform, arch)?.platform),
+  ).toEqual([
+    "linux64",
+    "linux-arm64",
+    "mac-arm64",
+    "mac-x64",
+    "win64",
+    "win64",
+    "win32",
+    undefined,
+    undefined,
+  ]);
+  expect(PreviewBrowser.previewBrowserRelease("linux", "x64")).toMatchObject({
+    url: "https://storage.googleapis.com/chrome-for-testing-public/154.0.8037.92/linux64/chrome-headless-shell-linux64.zip",
+    bytes: 120_477_194,
+  });
+});
+
+it("tells the agent how far the install has come", () => {
+  expect(
+    new PreviewBrowser.PreviewBrowserInstallingError({
+      downloadedBytes: 37_200_000,
+      totalBytes: 120_477_194,
+      unpacking: false,
+    }).message,
+  ).toBe(
+    "T3 is installing its HTML preview browser (37 of 120 MB downloaded). Call html_preview again in a minute.",
+  );
+});
diff --git a/apps/server/src/htmlRender/PreviewBrowser.ts b/apps/server/src/htmlRender/PreviewBrowser.ts
new file mode 100644
index 000000000000..ef0b50994426
--- /dev/null
+++ b/apps/server/src/htmlRender/PreviewBrowser.ts
@@ -0,0 +1,447 @@
+// @effect-diagnostics nodeBuiltinImport:off - Effect has no incremental digest.
+import * as EffectNodeStream from "@effect/platform-node/NodeStream";
+import { HostProcessArchitecture, HostProcessPlatform } from "@t3tools/shared/hostProcess";
+import * as Cause from "effect/Cause";
+import * as Context from "effect/Context";
+import * as Deferred from "effect/Deferred";
+import type * as Duration from "effect/Duration";
+import * as Effect from "effect/Effect";
+import * as Exit from "effect/Exit";
+import * as FileSystem from "effect/FileSystem";
+import * as Layer from "effect/Layer";
+import * as Option from "effect/Option";
+import * as Path from "effect/Path";
+import * as Schema from "effect/Schema";
+import * as Semaphore from "effect/Semaphore";
+import * as Stream from "effect/Stream";
+import { HttpClient, HttpClientRequest, HttpClientResponse } from "effect/unstable/http";
+import * as NodeCrypto from "node:crypto";
+
+import * as ServerConfig from "../config.ts";
+import { openZipArchive } from "../zipArchive.ts";
+
+// HTML previews only ever run T3's own pinned Chrome for Testing headless
+// shell, never a browser the user installed. To bump the pin, pick a version
+// from https://googlechromelabs.github.io/chrome-for-testing/known-good-versions-with-downloads.json,
+// download each platform's chrome-headless-shell zip, and replace the version
+// and every byte count and SHA-256 below. Hosts drop the old build after the
+// new one installs.
+const VERSION = "154.0.8037.92";
+const ARCHIVES = {
+  linux64: {
+    bytes: 120_477_194,
+    sha256: "636aa5c79f2693632e9921b8bbb050038ba11672e02346c06c20f991aed096f9",
+  },
+  "linux-arm64": {
+    bytes: 121_182_296,
+    sha256: "0ed0e47d9e9f639197f508d62ada09e5c6b4c4c60edab3160a9312a733091df6",
+  },
+  "mac-arm64": {
+    bytes: 99_221_129,
+    sha256: "77da14e75d7f2568e6f7898d3df7cdc6faac74b15e903b2c9d486ebb6ca9b929",
+  },
+  "mac-x64": {
+    bytes: 104_748_425,
+    sha256: "a54292aaacbb77f76f6ef47558e7c51ab884044e0adacca315567f83c060bcc4",
+  },
+  win32: {
+    bytes: 114_295_943,
+    sha256: "56b30d2d6c35775ebf8dc3618680f6529e1c38c87f7feb28a16e9904273d51f7",
+  },
+  win64: {
+    bytes: 120_822_223,
+    sha256: "3ac2561f02d9d87aadc0399d00b9002d718a4c365624fa67db9e7bfaf6b1a568",
+  },
+} as const;
+
+const chromePlatform = (platform: NodeJS.Platform, arch: NodeJS.Architecture) => {
+  switch (platform) {
+    case "linux":
+      return arch === "x64" ? "linux64" : arch === "arm64" ? "linux-arm64" : null;
+    case "darwin":
+      return arch === "arm64" ? "mac-arm64" : arch === "x64" ? "mac-x64" : null;
+    case "win32":
+      // There is no Windows arm64 build; Windows on Arm runs the x64 one under emulation.
+      return arch === "ia32" ? "win32" : arch === "x64" || arch === "arm64" ? "win64" : null;
+    default:
+      return null;
+  }
+};
+
+export interface PreviewBrowserRelease {
+  readonly version: string;
+  /** Chrome for Testing's platform name, which also names the archive's top directory. */
+  readonly platform: string;
+  readonly url: string;
+  readonly bytes: number;
+  readonly sha256: string;
+}
+
+export const previewBrowserRelease = (
+  platform: NodeJS.Platform,
+  arch: NodeJS.Architecture,
+): PreviewBrowserRelease | null => {
+  const chrome = chromePlatform(platform, arch);
+  return chrome === null
+    ? null
+    : {
+        version: VERSION,
+        platform: chrome,
+        url: `https://storage.googleapis.com/chrome-for-testing-public/${VERSION}/${chrome}/chrome-headless-shell-${chrome}.zip`,
+        ...ARCHIVES[chrome],
+      };
+};
+
+const megabytes = (bytes: number) => Math.round(bytes / 1_000_000);
+
+export class PreviewBrowserInstallError extends Schema.TaggedError<PreviewBrowserInstallError>()(
+  "PreviewBrowserInstallError",
+  { detail: Schema.String, cause: Schema.optional(Schema.Defect()) },
+) {
+  override get message(): string {
+    return `T3 could not install its HTML preview browser: ${this.detail} Call html_preview again to retry.`;
+  }
+}
+const isInstallError = Schema.is(PreviewBrowserInstallError);
+
+export class PreviewBrowserInstallingError extends Schema.TaggedError<PreviewBrowserInstallingError>()(
+  "PreviewBrowserInstallingError",
+  { downloadedBytes: Schema.Number, totalBytes: Schema.Number, unpacking: Schema.Boolean },
+) {
+  override get message(): string {
+    const progress = this.unpacking
+      ? "unpacking"
+      : `${megabytes(this.downloadedBytes)} of ${megabytes(this.totalBytes)} MB downloaded`;
+    return `T3 is installing its HTML preview browser (${progress}). Call html_preview again in a minute.`;
+  }
+}
+
+export class PreviewBrowserUnsupportedError extends Schema.TaggedError<PreviewBrowserUnsupportedError>()(
+  "PreviewBrowserUnsupportedError",
+  { platform: Schema.String, arch: Schema.String },
+) {
+  override get message(): string {
+    return `HTML previews are not available on ${this.platform}-${this.arch}: Chrome for Testing has no headless shell for it. html_render still works without a preview.`;
+  }
+}
+
+export class PreviewBrowser extends Context.Service<
+  PreviewBrowser,
+  {
+    /**
+     * Path to the installed headless shell. The first call starts the
+     * install; callers wait for it up to a bound and then get its progress
+     * instead, while the install keeps running.
+     */
+    readonly executable: Effect.Effect<
+      string,
+      PreviewBrowserInstallError | PreviewBrowserInstallingError | PreviewBrowserUnsupportedError
+    >;
+    /** The installed headless shell, if any. Never starts or waits on an install. */
+    readonly installed: Effect.Effect<Option.Option<string>>;
+  }
+>()("t3/htmlRender/PreviewBrowser") {}
+
+export interface PreviewBrowserOptions {
+  readonly baseDir: string;
+  readonly release?: PreviewBrowserRelease | null;
+  /** How long a caller waits on an install in progress. Provider tool calls time out near 60s. */
+  readonly wait?: Duration.Input;
+}
+
+const DOWNLOAD_TIMEOUT = "15 minutes";
+
+const wrapFailure = (detail: string) => (cause: unknown) =>
+  isInstallError(cause) ? cause : new PreviewBrowserInstallError({ detail, cause });
+
+type InstallState =
+  | { readonly _tag: "idle" }
+  | {
+      readonly _tag: "installing";
+      readonly done: Deferred.Deferred<string, PreviewBrowserInstallError>;
+    }
+  | { readonly _tag: "installed"; readonly executable: string }
+  | { readonly _tag: "failed"; readonly error: PreviewBrowserInstallError };
+
+export const makePreviewBrowser = Effect.fn("PreviewBrowser.make")(function* (
+  options: PreviewBrowserOptions,
+) {
+  const fs = yield* FileSystem.FileSystem;
+  const path = yield* Path.Path;
+  const http = yield* HttpClient.HttpClient;
+  // Installs belong to the service, so they finish even when no caller is still waiting.
+  const serviceScope = yield* Effect.scope;
+  const platform = yield* HostProcessPlatform;
+  const arch = yield* HostProcessArchitecture;
+  const release =
+    options.release === undefined ? previewBrowserRelease(platform, arch) : options.release;
+  const wait = options.wait ?? "45 seconds";
+  const installRoot = path.join(
+    options.baseDir,
+    "tools",
+    "chrome-headless-shell",
+    release?.platform ?? `${platform}-${arch}`,
+  );
+  const executableName =
+    platform === "win32" ? "chrome-headless-shell.exe" : "chrome-headless-shell";
+  const gate = yield* Semaphore.make(1);
+  let state: InstallState = { _tag: "idle" };
+  const progress = { downloadedBytes: 0, unpacking: false };
+
+  // The version directory appears by one rename of a fully unpacked tree, so a
+  // runnable binary there is the complete-install marker.
+  const installedExecutable = (release: PreviewBrowserRelease) => {
+    const executable = path.join(installRoot, release.version, executableName);
+    return fs.stat(executable).pipe(
+      Effect.map((info) =>
+        info.type === "File" && (platform === "win32" || (info.mode & 0o111) !== 0)
+          ? Option.some(executable)
+          : Option.none<string>(),
+      ),
+      Effect.orElseSucceed(() => Option.none<string>()),
+    );
+  };
+
+  const download = Effect.fn("PreviewBrowser.download")(
+    function* (release: PreviewBrowserRelease, archivePath: string) {
+      const response = yield* http
+        .execute(HttpClientRequest.get(release.url))
+        .pipe(Effect.flatMap(HttpClientResponse.filterStatusOk));
+      const contentLength = response.headers["content-length"];
+      const contentEncoding = response.headers["content-encoding"]?.trim().toLowerCase();
+      if (
+        (contentEncoding === undefined || contentEncoding === "identity") &&
+        contentLength !== undefined &&
+        Number(contentLength) !== release.bytes
+      ) {
+        return yield* new PreviewBrowserInstallError({
+          detail: "The download size did not match the pinned release.",
+        });
+      }
+      const hash = NodeCrypto.createHash("sha256");
+      yield* response.stream.pipe(
+        Stream.tap((chunk) =>
+          Effect.suspend(() => {
+            progress.downloadedBytes += chunk.byteLength;
+            if (progress.downloadedBytes > release.bytes) {
+              return Effect.fail(
+                new PreviewBrowserInstallError({
+                  detail: "The download was larger than the pinned release.",
+                }),
+              );
+            }
+            hash.update(chunk);
+            return Effect.void;
+          }),
+        ),
+        Stream.run(fs.sink(archivePath, { flag: "wx", mode: 0o600 })),
+      );
+      if (progress.downloadedBytes !== release.bytes || hash.digest("hex") !== release.sha256) {
+        return yield* new PreviewBrowserInstallError({
+          detail: "The download failed its size or SHA-256 check. Nothing was installed.",
+        });
+      }
+    },
+    Effect.timeout(DOWNLOAD_TIMEOUT),
+    Effect.mapError(
+      wrapFailure(
+        "The download from storage.googleapis.com failed. Check this machine's network access.",
+      ),
+    ),
+  );
+
+  const extract = Effect.fn("PreviewBrowser.extract")(
+    function* (release: PreviewBrowserRelease, archivePath: string, destination: string) {
+      const archive = yield* openZipArchive(
+        archivePath,
+        (detail, cause) => new PreviewBrowserInstallError({ detail, cause }),
+      );
+      const unsafe = new PreviewBrowserInstallError({
+        detail: "The archive contains an unexpected or unsafe entry.",
+      });
+      const root = `chrome-headless-shell-${release.platform}/`;
+      yield* fs.makeDirectory(destination);
+      let foundExecutable = false;
+      for (;;) {
+        const entry = yield* archive.next;
+        if (!entry) break;
+        const unixMode = entry.externalFileAttributes >>> 16;
+        const unixType = unixMode & 0o170000;
+        const isDirectory = entry.fileName.endsWith("/");
+        // Everything sits under the one top directory, which is stripped.
+        const relative = entry.fileName.startsWith(root) ? entry.fileName.slice(root.length) : null;
+        const target = relative === null ? null : path.resolve(destination, relative);
+        if (
+          relative === null ||
+          target === null ||
+          (relative !== "" && !target.startsWith(`${destination}${path.sep}`)) ||
+          relative.split("/").includes("..") ||
+          (unixType !== 0 && unixType !== (isDirectory ? 0o040000 : 0o100000)) ||
+          (entry.generalPurposeBitFlag & 1) !== 0 ||
+          ![0, 8].includes(entry.compressionMethod)
+        ) {
+          return yield* unsafe;
+        }
+        if (isDirectory) {
+          yield* fs.makeDirectory(target, { recursive: true });
+          continue;
+        }
+        yield* fs.makeDirectory(path.dirname(target), { recursive: true });
+        yield* Effect.gen(function* () {
+          const readable = yield* archive.streamEntry(entry);
+          yield* EffectNodeStream.fromReadable<Uint8Array, PreviewBrowserInstallError>({
+            evaluate: () => readable,
+            onError: wrapFailure("Could not unpack the browser."),
+          }).pipe(Stream.run(fs.sink(target, { flag: "wx" })));
+        }).pipe(Effect.scoped);
+        // The binary and its shared libraries carry exec bits in the archive.
+        if (platform !== "win32" && (unixMode & 0o777) !== 0) {
+          yield* fs.chmod(target, unixMode & 0o777);
+        }
+        if (relative === executableName) foundExecutable = true;
+      }
+      if (!foundExecutable) {
+        return yield* new PreviewBrowserInstallError({
+          detail: "The archive does not contain chrome-headless-shell.",
+        });
+      }
+    },
+    Effect.scoped,
+    Effect.mapError(
+      wrapFailure("Could not unpack the browser. Check free disk space in T3's home directory."),
+    ),
+  );
+
+  const install = Effect.fn("PreviewBrowser.install")(
+    function* (release: PreviewBrowserRelease) {
+      yield* Effect.gen(function* () {
+        yield* fs.makeDirectory(installRoot, { recursive: true });
+        // Staging shares the install root's filesystem so publishing is one rename.
+        const staging = yield* fs.makeTempDirectoryScoped({
+          directory: installRoot,
+          prefix: ".install-",
+        });
+        const archivePath = path.join(staging, "download.zip");
+        const unpacked = path.join(staging, "browser");
+        yield* download(release, archivePath);
+        progress.unpacking = true;
+        yield* extract(release, archivePath, unpacked);
+        const destination = path.join(installRoot, release.version);
+        // A directory left without a runnable binary would block the rename.
+        yield* fs.remove(destination, { recursive: true, force: true });
+        yield* fs.rename(unpacked, destination);
+      }).pipe(Effect.scoped);
+      // Older builds and abandoned staging directories.
+      const entries = yield* fs.readDirectory(installRoot);
+      yield* Effect.forEach(
+        entries.filter((name) => name !== release.version),
+        (name) =>
+          fs
+            .remove(path.join(installRoot, name), { recursive: true, force: true })
+            .pipe(
+              Effect.catch((cause) =>
+                Effect.logWarning("Could not remove an old preview browser.", { name, cause }),
+              ),
+            ),
+        { discard: true },
+      );
+      return path.join(installRoot, release.version, executableName);
+    },
+    Effect.mapError(wrapFailure("Could not save the browser in T3's home directory.")),
+  );
+
+  // Joins the current install or starts one. A failure is reported once, then cleared.
+  const join = (release: PreviewBrowserRelease) =>
+    gate.withPermit(
+      Effect.gen(function* () {
+        if (state._tag === "installing") return state;
+        if (state._tag === "failed") {
+          const failed = state;
+          state = { _tag: "idle" };
+          return failed;
+        }
+        const installed = yield* installedExecutable(release);
+        if (Option.isSome(installed)) {
+          state = { _tag: "installed", executable: installed.value };
+          return state;
+        }
+        const done = yield* Deferred.make<string, PreviewBrowserInstallError>();
+        progress.downloadedBytes = 0;
+        progress.unpacking = false;
+        const installing: InstallState = { _tag: "installing", done };
+        state = installing;
+        yield* install(release).pipe(
+          Effect.onExit((exit) =>
+            gate
+              .withPermit(
+                Effect.sync(() => {
+                  state = Exit.isSuccess(exit)
+                    ? { _tag: "installed", executable: exit.value }
+                    : {
+                        _tag: "failed",
+                        error: Option.getOrElse(
+                          Cause.findErrorOption(exit.cause),
+                          () => new PreviewBrowserInstallError({ detail: "The install stopped." }),
+                        ),
+                      };
+                }),
+              )
+              .pipe(Effect.andThen(Deferred.done(done, exit))),
+          ),
+          Effect.ignoreCause,
+          // Server shutdown closes the service scope and stops an install in progress.
+          Effect.interruptible,
+          Effect.forkIn(serviceScope),
+        );
+        return installing;
+      }),
+    );
+
+  // A waiter that saw the failure has reported it; the next call retries.
+  const clearFailure = (error: PreviewBrowserInstallError) =>
+    gate.withPermit(
+      Effect.sync(() => {
+        if (state._tag === "failed" && state.error === error) state = { _tag: "idle" };
+      }),
+    );
+
+  const executable = Effect.gen(function* () {
+    if (release === null) {
+      return yield* new PreviewBrowserUnsupportedError({ platform, arch });
+    }
+    const current = yield* join(release);
+    switch (current._tag) {
+      case "installed":
+        return current.executable;
+      case "failed":
+        return yield* current.error;
+      case "installing":
+        return yield* Deferred.await(current.done).pipe(
+          Effect.tapError(clearFailure),
+          Effect.timeoutOrElse({
+            duration: wait,
+            orElse: () =>
+              Effect.fail(
+                new PreviewBrowserInstallingError({
+                  downloadedBytes: progress.downloadedBytes,
+                  totalBytes: release.bytes,
+                  unpacking: progress.unpacking,
+                }),
+              ),
+          }),
+        );
+    }
+  }).pipe(Effect.withSpan("PreviewBrowser.executable"));
+
+  const installed = release === null ? Effect.succeedNone : installedExecutable(release);
+
+  return PreviewBrowser.of({ executable, installed });
+});
+
+export const layer = Layer.effect(
+  PreviewBrowser,
+  Effect.gen(function* () {
+    const config = yield* ServerConfig.ServerConfig;
+    return yield* makePreviewBrowser({ baseDir: config.baseDir });
+  }),
+);
diff --git a/apps/server/src/htmlRender/headlessChrome.ts b/apps/server/src/htmlRender/headlessChrome.ts
new file mode 100644
index 000000000000..8f5eb3f34375
--- /dev/null
+++ b/apps/server/src/htmlRender/headlessChrome.ts
@@ -0,0 +1,500 @@
+// @effect-diagnostics nodeBuiltinImport:off
+import * as NodeURL from "node:url";
+
+import * as Deferred from "effect/Deferred";
+import * as Effect from "effect/Effect";
+import * as Fiber from "effect/Fiber";
+import * as FileSystem from "effect/FileSystem";
+import * as Option from "effect/Option";
+import * as Path from "effect/Path";
+import * as Queue from "effect/Queue";
+import * as Schema from "effect/Schema";
+import * as Stream from "effect/Stream";
+import * as ChildProcess from "effect/unstable/process/ChildProcess";
+import * as ChildProcessSpawner from "effect/unstable/process/ChildProcessSpawner";
+
+export class HtmlRenderBrowserError extends Schema.TaggedError<HtmlRenderBrowserError>()(
+  "HtmlRenderBrowserError",
+  { reason: Schema.String, cause: Schema.optional(Schema.Defect()) },
+) {
+  override get message(): string {
+    return `Headless Chrome could not render the page: ${this.reason}.`;
+  }
+}
+
+/** The browser died at startup because this host cannot give it a sandbox. */
+export class HtmlRenderSandboxUnavailableError extends Schema.TaggedError<HtmlRenderSandboxUnavailableError>()(
+  "HtmlRenderSandboxUnavailableError",
+  {},
+) {
+  override get message(): string {
+    return "Chrome's sandbox is unavailable on this host.";
+  }
+}
+
+type BrowserFailure = HtmlRenderBrowserError | HtmlRenderSandboxUnavailableError;
+
+export interface ConsoleMessage {
+  readonly level: "log" | "info" | "warning" | "error";
+  readonly text: string;
+}
+
+const MAX_CONSOLE_MESSAGES = 20;
+const MAX_CONSOLE_TEXT_CHARS = 500;
+const VIEWPORT_HEIGHT = 800;
+const MAX_CAPTURE_HEIGHT = 4_000;
+const CAPTURE_TIMEOUT = "20 seconds";
+// Stack traces and load errors name the page this way instead of its temporary file URL.
+const PAGE_NAME = "page.html";
+// What Chrome prints before aborting when it cannot sandbox itself, e.g. on
+// Ubuntu 23.10+ where AppArmor restricts unprivileged user namespaces.
+const NO_SANDBOX_SIGNATURE = "No usable sandbox";
+
+const CdpMessage = Schema.fromJsonString(
+  Schema.Struct({
+    id: Schema.optional(Schema.Number),
+    method: Schema.optional(Schema.String),
+    sessionId: Schema.optional(Schema.String),
+    params: Schema.optional(Schema.Unknown),
+    result: Schema.optional(Schema.Unknown),
+    error: Schema.optional(Schema.Struct({ message: Schema.String })),
+  }),
+);
+const decodeCdpMessage = Schema.decodeUnknownOption(CdpMessage);
+const encodeCdpCommand = Schema.encodeSync(Schema.fromJsonString(Schema.Unknown));
+const RemoteObject = Schema.Struct({
+  type: Schema.String,
+  value: Schema.optional(Schema.Unknown),
+  description: Schema.optional(Schema.String),
+});
+const decodeConsoleApiCalled = Schema.decodeUnknownOption(
+  Schema.Struct({ type: Schema.String, args: Schema.Array(RemoteObject) }),
+);
+const decodeExceptionThrown = Schema.decodeUnknownOption(
+  Schema.Struct({
+    exceptionDetails: Schema.Struct({
+      text: Schema.String,
+      exception: Schema.optional(RemoteObject),
+    }),
+  }),
+);
+const decodeLogEntryAdded = Schema.decodeUnknownOption(
+  Schema.Struct({
+    entry: Schema.Struct({
+      level: Schema.String,
+      text: Schema.String,
+      url: Schema.optional(Schema.String),
+    }),
+  }),
+);
+
+const remoteObjectText = (value: typeof RemoteObject.Type) =>
+  typeof value.value === "string"
+    ? value.value
+    : (value.description ?? (value.value === undefined ? value.type : String(value.value)));
+
+const CONSOLE_LEVELS: Readonly<Record<string, ConsoleMessage["level"]>> = {
+  log: "log",
+  debug: "log",
+  dir: "log",
+  dirxml: "log",
+  table: "log",
+  trace: "log",
+  info: "info",
+  warning: "warning",
+  error: "error",
+  assert: "error",
+};
+
+/** Everything the page logs, uncaught exceptions, and the browser's own load errors. */
+const consoleMessageFromEvent = (method: string, params: unknown): ConsoleMessage | undefined => {
+  if (method === "Runtime.consoleAPICalled") {
+    const event = Option.getOrUndefined(decodeConsoleApiCalled(params));
+    const level = event === undefined ? undefined : CONSOLE_LEVELS[event.type];
+    return event && level ? { level, text: event.args.map(remoteObjectText).join(" ") } : undefined;
+  }
+  if (method === "Runtime.exceptionThrown") {
+    const details = Option.getOrUndefined(decodeExceptionThrown(params))?.exceptionDetails;
+    return details
+      ? { level: "error", text: details.exception?.description ?? details.text }
+      : undefined;
+  }
+  if (method === "Log.entryAdded") {
+    const entry = Option.getOrUndefined(decodeLogEntryAdded(params))?.entry;
+    return entry && (entry.level === "error" || entry.level === "warning")
+      ? { level: entry.level, text: entry.url ? `${entry.text} ${entry.url}` : entry.text }
+      : undefined;
+  }
+  return undefined;
+};
+
+// Resolves after web fonts load and two frames paint, so late layout lands in the capture.
+const SETTLE_EXPRESSION =
+  "document.fonts.ready.then(() => new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(() => resolve(true)))))";
+// The root's scroll height never drops below the viewport, so a short page
+// reports its own box height instead.
+const MEASURE_EXPRESSION =
+  "(() => { const root = document.documentElement; return root.scrollHeight > root.clientHeight ? root.scrollHeight : root.getBoundingClientRect().height; })()";
+
+const Ignored = Schema.Unknown;
+const Navigation = Schema.Struct({ errorText: Schema.optional(Schema.String) });
+const Measured = Schema.Struct({ result: Schema.Struct({ value: Schema.Finite }) });
+
+interface PageEvents {
+  pageUrl: string | undefined;
+  loaded: Deferred.Deferred<void, BrowserFailure> | undefined;
+  readonly consoleMessages: Array<ConsoleMessage>;
+  omittedConsoleMessages: number;
+}
+
+/**
+ * Starts the headless shell for the life of the scope, speaking CDP over
+ * `--remote-debugging-pipe` (fd 3 in, fd 4 out, NUL-delimited JSON). Scope
+ * close kills the process group. Each page is its own target, so pages load
+ * in parallel.
+ */
+const launchBrowser = Effect.fnUntraced(function* (input: {
+  readonly executable: string;
+  readonly noSandbox: boolean;
+  readonly profileDirectory: string;
+}) {
+  const spawner = yield* ChildProcessSpawner.ChildProcessSpawner;
+  const outgoing = yield* Queue.unbounded<Uint8Array>();
+  const child = yield* spawner
+    .spawn(
+      ChildProcess.make(
+        input.executable,
+        [
+          "--headless=new",
+          "--remote-debugging-pipe",
+          "--no-first-run",
+          "--no-default-browser-check",
+          "--disable-gpu",
+          "--hide-scrollbars",
+          "--mute-audio",
+          ...(input.noSandbox ? ["--no-sandbox"] : []),
+          `--user-data-dir=${input.profileDirectory}`,
+          "about:blank",
+        ],
+        {
+          stdin: "ignore",
+          stdout: "ignore",
+          stderr: "pipe",
+          forceKillAfter: "2 seconds",
+          additionalFds: {
+            fd3: { type: "input", stream: Stream.fromQueue(outgoing) },
+            fd4: { type: "output" },
+          },
+        },
+      ),
+    )
+    .pipe(
+      Effect.mapError(
+        (cause) =>
+          new HtmlRenderBrowserError({ reason: "the browser could not be started", cause }),
+      ),
+    );
+
+  let stderrTail = "";
+  let sandboxUnavailable = false;
+  const stderrReader = yield* child.stderr.pipe(
+    Stream.decodeText(),
+    Stream.runForEach((text) =>
+      Effect.sync(() => {
+        stderrTail = (stderrTail + text).slice(-1_024);
+        if (stderrTail.includes(NO_SANDBOX_SIGNATURE)) sandboxUnavailable = true;
+      }),
+    ),
+    Effect.ignore,
+    Effect.forkScoped,
+  );
+
+  const pending = new Map<
+    number,
+    { readonly method: string; readonly reply: Deferred.Deferred<unknown, BrowserFailure> }
+  >();
+  const pages = new Map<string, PageEvents>();
+  let disconnected: BrowserFailure | undefined;
+  let nextId = 0;
+
+  const receive = (raw: string) => {
+    const message = Option.getOrUndefined(decodeCdpMessage(raw));
+    if (message?.id !== undefined) {
+      const waiter = pending.get(message.id);
+      pending.delete(message.id);
+      if (!waiter) return Effect.void;
+      return message.error
+        ? Deferred.fail(
+            waiter.reply,
+            new HtmlRenderBrowserError({
+              reason: `${waiter.method} failed`,
+              cause: message.error.message,
+            }),
+          )
+        : Deferred.succeed(waiter.reply, message.result);
+    }
+    const page = message?.sessionId === undefined ? undefined : pages.get(message.sessionId);
+    if (!page || !message?.method) return Effect.void;
+    if (message.method === "Page.loadEventFired") {
+      return page.loaded ? Deferred.succeed(page.loaded, undefined) : Effect.void;
+    }
+    const consoleMessage = consoleMessageFromEvent(message.method, message.params);
+    if (!consoleMessage) return Effect.void;
+    if (page.consoleMessages.length >= MAX_CONSOLE_MESSAGES) {
+      page.omittedConsoleMessages += 1;
+      return Effect.void;
+    }
+    const pageUrl = page.pageUrl;
+    const text =
+      pageUrl === undefined
+        ? consoleMessage.text
+        : consoleMessage.text.replaceAll(pageUrl, PAGE_NAME);
+    page.consoleMessages.push({
+      level: consoleMessage.level,
+      text:
+        text.length > MAX_CONSOLE_TEXT_CHARS ? `${text.slice(0, MAX_CONSOLE_TEXT_CHARS)}…` : text,
+    });
+    return Effect.void;
+  };
+
+  // The pipe closes when the browser exits. A sandbox abort says why on
+  // stderr, which may still be draining, so give it a moment.
+  const disconnect = Effect.gen(function* () {
+    yield* Fiber.await(stderrReader).pipe(Effect.timeout("1 second"), Effect.ignore);
+    const error = sandboxUnavailable
+      ? new HtmlRenderSandboxUnavailableError()
+      : new HtmlRenderBrowserError({ reason: "the browser exited unexpectedly" });
+    disconnected = error;
+    const waiters = [...pending.values()];
+    pending.clear();
+    yield* Effect.forEach(waiters, ({ reply }) => Deferred.fail(reply, error), { discard: true });
+    yield* Effect.forEach(
+      pages.values(),
+      (page) => (page.loaded ? Deferred.fail(page.loaded, error) : Effect.void),
+      { discard: true },
+    );
+  });
+
+  // Decoded text chunks may split a message anywhere, and a screenshot reply spans many.
+  let partial: Array<string> = [];
+  yield* child.getOutputFd(4).pipe(
+    Stream.decodeText(),
+    Stream.runForEach((text) => {
+      const complete: Array<string> = [];
+      let start = 0;
+      for (let end = text.indexOf("\0"); end !== -1; end = text.indexOf("\0", start)) {
+        partial.push(text.slice(start, end));
+        complete.push(partial.join(""));
+        partial = [];
+        start = end + 1;
+      }
+      if (start < text.length) partial.push(text.slice(start));
+      return Effect.forEach(complete, receive, { discard: true });
+    }),
+    Effect.ignore,
+    // Interruption means the scope is closing on purpose; only an exit disconnects.
+    Effect.andThen(disconnect),
+    Effect.forkScoped,
+  );
+
+  const send = <A>(
+    method: string,
+    params: Record<string, unknown>,
+    result: Schema.Decoder<A>,
+    sessionId?: string,
+  ) =>
+    Effect.gen(function* () {
+      if (disconnected) return yield* disconnected;
+      const id = ++nextId;
+      const reply = yield* Deferred.make<unknown, BrowserFailure>();
+      pending.set(id, { method, reply });
+      const message = encodeCdpCommand({ id, method, params, ...(sessionId ? { sessionId } : {}) });
+      yield* Queue.offer(outgoing, new TextEncoder().encode(`${message}\0`));
+      return yield* Deferred.await(reply).pipe(
+        Effect.flatMap(Schema.decodeUnknownEffect(result)),
+        Effect.mapError((error) =>
+          error._tag === "HtmlRenderBrowserError" ||
+          error._tag === "HtmlRenderSandboxUnavailableError"
+            ? error
+            : new HtmlRenderBrowserError({
+                reason: `${method} returned an unexpected result`,
+                cause: error,
+              }),
+        ),
+      );
+    });
+
+  /** A fresh page at `width`; each `load` navigates it and measures the settled layout. */
+  const openPage = Effect.fnUntraced(function* (width: number) {
+    const { targetId } = yield* send(
+      "Target.createTarget",
+      { url: "about:blank" },
+      Schema.Struct({ targetId: Schema.String }),
+    );
+    const { sessionId } = yield* send(
+      "Target.attachToTarget",
+      { targetId, flatten: true },
+      Schema.Struct({ sessionId: Schema.String }),
+    );
+    const events: PageEvents = {
+      pageUrl: undefined,
+      loaded: undefined,
+      consoleMessages: [],
+      omittedConsoleMessages: 0,
+    };
+    pages.set(sessionId, events);
+    yield* send("Page.enable", {}, Ignored, sessionId);
+    yield* send("Runtime.enable", {}, Ignored, sessionId);
+    yield* send("Log.enable", {}, Ignored, sessionId);
+    yield* send(
+      "Emulation.setDeviceMetricsOverride",
+      { width, height: VIEWPORT_HEIGHT, deviceScaleFactor: 1, mobile: false },
+      Ignored,
+      sessionId,
+    );
+
+    const load = Effect.fnUntraced(function* (pagePath: string, urlFragment: string) {
+      const pageUrl = NodeURL.pathToFileURL(pagePath).href;
+      const loaded = yield* Deferred.make<void, BrowserFailure>();
+      events.pageUrl = pageUrl;
+      events.loaded = loaded;
+      const navigation = yield* send(
+        "Page.navigate",
+        { url: `${pageUrl}${urlFragment}` },
+        Navigation,
+        sessionId,
+      );
+      if (navigation.errorText) {
+        return yield* new HtmlRenderBrowserError({ reason: "the page could not be opened" });
+      }
+      yield* Deferred.await(loaded);
+      yield* send(
+        "Runtime.evaluate",
+        { expression: SETTLE_EXPRESSION, awaitPromise: true },
+        Ignored,
+        sessionId,
+      );
+      const measured = yield* send(
+        "Runtime.evaluate",
+        { expression: MEASURE_EXPRESSION, returnByValue: true },
+        Measured,
+        sessionId,
+      );
+      return Math.max(0, Math.ceil(measured.result.value));
+    });
+
+    const screenshot = (height: number) =>
+      send(
+        "Page.captureScreenshot",
+        {
+          format: "png",
+          captureBeyondViewport: true,
+          clip: { x: 0, y: 0, width, height, scale: 1 },
+        },
+        Schema.Struct({ data: Schema.String }),
+        sessionId,
+      ).pipe(Effect.map(({ data }) => data));
+
+    const consoleMessages = (): ReadonlyArray<ConsoleMessage> =>
+      events.omittedConsoleMessages === 0
+        ? [...events.consoleMessages]
+        : [
+            ...events.consoleMessages,
+            {
+              level: "warning",
+              text: `${events.omittedConsoleMessages} more console messages were omitted.`,
+            },
+          ];
+
+    return { load, screenshot, consoleMessages };
+  });
+
+  return { openPage };
+});
+
+/** A temporary directory for the browser profile and any page file, removed with the scope. */
+const scratchDirectory = Effect.gen(function* () {
+  const fileSystem = yield* FileSystem.FileSystem;
+  return yield* Effect.acquireRelease(
+    fileSystem.makeTempDirectory({ prefix: "t3-html-preview-" }),
+    (directory) => fileSystem.remove(directory, { recursive: true }).pipe(Effect.ignore),
+  ).pipe(
+    Effect.mapError(
+      (cause) =>
+        new HtmlRenderBrowserError({ reason: "a temporary directory could not be created", cause }),
+    ),
+  );
+});
+
+/** Loads `html` at `width` and returns a PNG of the top of the page. */
+export const captureHtmlScreenshot = Effect.fn("headlessChrome.captureHtmlScreenshot")(
+  function* (input: {
+    readonly executable: string;
+    readonly noSandbox: boolean;
+    readonly html: string;
+    readonly width: number;
+    readonly urlFragment: string;
+  }) {
+    const fileSystem = yield* FileSystem.FileSystem;
+    const path = yield* Path.Path;
+    const directory = yield* scratchDirectory;
+    const pagePath = path.join(directory, "index.html");
+    yield* fileSystem
+      .writeFileString(pagePath, input.html)
+      .pipe(
+        Effect.mapError(
+          (cause) => new HtmlRenderBrowserError({ reason: "the page could not be written", cause }),
+        ),
+      );
+    const browser = yield* launchBrowser({
+      executable: input.executable,
+      noSandbox: input.noSandbox,
+      profileDirectory: path.join(directory, "profile"),
+    });
+    const page = yield* browser.openPage(input.width);
+    const contentHeight = yield* page.load(pagePath, input.urlFragment);
+    const capturedHeight = Math.max(1, Math.min(contentHeight, MAX_CAPTURE_HEIGHT));
+    const png = yield* page.screenshot(capturedHeight);
+    return { png, contentHeight, capturedHeight, consoleMessages: page.consoleMessages() };
+  },
+  Effect.scoped,
+  Effect.timeoutOrElse({
+    duration: CAPTURE_TIMEOUT,
+    orElse: () =>
+      Effect.fail(
+        new HtmlRenderBrowserError({
+          reason: `the page did not finish loading within ${CAPTURE_TIMEOUT}`,
+        }),
+      ),
+  }),
+);
+
+/**
+ * Content heights of the page at each width, each from a fresh load, since
+ * pages often lay themselves out from the width once at load. One browser,
+ * all widths in parallel.
+ */
+export const measureHtmlHeights = Effect.fn("headlessChrome.measureHtmlHeights")(function* (input: {
+  readonly executable: string;
+  readonly noSandbox: boolean;
+  readonly pagePath: string;
+  readonly widths: ReadonlyArray<number>;
+  readonly urlFragment: string;
+}) {
+  const path = yield* Path.Path;
+  const directory = yield* scratchDirectory;
+  const browser = yield* launchBrowser({
+    executable: input.executable,
+    noSandbox: input.noSandbox,
+    profileDirectory: path.join(directory, "profile"),
+  });
+  return yield* Effect.forEach(
+    input.widths,
+    (width) =>
+      browser.openPage(width).pipe(
+        Effect.flatMap((page) => page.load(input.pagePath, input.urlFragment)),
+        Effect.map((height) => [width, height] as const),
+      ),
+    { concurrency: "unbounded" },
+  );
+}, Effect.scoped);
diff --git a/apps/server/src/mcp/McpHttpServer.ts b/apps/server/src/mcp/McpHttpServer.ts
index 5c8f146bcadf..b861088ecc35 100644
--- a/apps/server/src/mcp/McpHttpServer.ts
+++ b/apps/server/src/mcp/McpHttpServer.ts
@@ -11,13 +11,15 @@ import * as Schema from "effect/Schema";
 import * as Sink from "effect/Sink";
 import * as Stream from "effect/Stream";
 import type * as Types from "effect/Types";
-import { McpProtocol, McpSchema, McpServer, Tool } from "effect/unstable/ai";
+import { AiError, McpProtocol, McpSchema, McpServer, Tool } from "effect/unstable/ai";
 import { HttpRouter, HttpServerRequest, HttpServerResponse } from "effect/unstable/http";
-import { PreviewAutomationError } from "@t3tools/contracts";
+import { OrchestratorMcpFailure, PreviewAutomationError } from "@t3tools/contracts";
 
 import packageJson from "../../package.json" with { type: "json" };
 import * as ServerConfig from "../config.ts";
 import * as DeviceService from "../device/DeviceService.ts";
+import * as HtmlRender from "../htmlRender/HtmlRender.ts";
+import * as PreviewBrowser from "../htmlRender/PreviewBrowser.ts";
 import * as McpInvocationContext from "./McpInvocationContext.ts";
 import * as OrchestratorMcpService from "./OrchestratorMcpService.ts";
 import { PreviewControlsToolkit } from "./toolkits/previewControls/tools.ts";
@@ -58,6 +60,11 @@ import {
   DeviceScreenshotToolkit,
   DeviceStandardToolkit,
 } from "./toolkits/device/tools.ts";
+import {
+  HtmlPreviewToolkitHandlersLive,
+  HtmlRenderToolkitHandlersLive,
+} from "./toolkits/html/handlers.ts";
+import { HtmlPreviewTool, HtmlPreviewToolkit, HtmlRenderToolkit } from "./toolkits/html/tools.ts";
 
 const unauthorized = HttpServerResponse.jsonUnsafe(
   {
@@ -510,12 +517,13 @@ interface ImageToolResult {
 }
 
 /**
- * Failures surface only their tag: the remote message may carry renderer or
- * device output the agent should not see, and the tag is what it can act on.
+ * Failures surface only their tag unless the tool describes them: the remote
+ * message may carry renderer or device output the agent should not see, and
+ * the tag is what it can act on. A describer returns a server-built message.
  */
 const imageToolFailure =
-  (toolName: string, operation: string, failureText: string) =>
-  <E>(cause: Cause.Cause<E>) => {
+  <E>(toolName: string, operation: string, failureText: string | ((error: E) => string)) =>
+  (cause: Cause.Cause<E>) => {
     if (Cause.hasInterrupts(cause) || cause.reasons.some(Cause.isDieReason)) {
       return Effect.failCause(cause).pipe(Effect.orDie);
     }
@@ -528,6 +536,10 @@ const imageToolFailure =
       typeof firstFailure._tag === "string"
         ? firstFailure._tag
         : `${toolName}Error`;
+    const message =
+      typeof failureText === "string" || failures[0] === undefined
+        ? undefined
+        : failureText(failures[0].error);
     const result = new McpSchema.CallToolResult({
       isError: true,
       structuredContent: {
@@ -535,9 +547,16 @@ const imageToolFailure =
           _tag: errorTag,
           operation,
           failureCount: failures.length,
+          ...(message === undefined ? {} : { message }),
         },
       },
-      content: [{ type: "text", text: failureText }],
+      // Some clients show only the text content and others only structuredContent, so both carry it.
+      content: [
+        {
+          type: "text",
+          text: typeof failureText === "string" ? failureText : (message ?? `${toolName} failed.`),
+        },
+      ],
     });
     return Effect.logWarning(`${toolName} failed`, {
       operation,
@@ -563,7 +582,7 @@ const registerImageTool = <T extends Tool.Any, E, R>(
     McpInvocationContext.McpInvocationContext
   >,
   operation: string,
-  failureText: string,
+  failureText: string | ((error: E) => string),
 ) =>
   Effect.gen(function* () {
     const server = yield* McpServer.McpServer;
@@ -647,6 +666,32 @@ const registerDeviceScreenshot = Effect.fn("McpHttpServer.registerDeviceScreensh
   );
 });
 
+const isOrchestratorMcpFailure = Schema.is(OrchestratorMcpFailure);
+
+const registerHtmlPreview = Effect.fn("McpHttpServer.registerHtmlPreview")(function* () {
+  const htmlRender = yield* HtmlRender.HtmlRender;
+  const built = yield* HtmlPreviewToolkit;
+  yield* registerImageTool(
+    HtmlPreviewTool,
+    (payload) =>
+      built
+        .handle("html_preview", payload)
+        .pipe(Stream.unwrap, Stream.run(Sink.last()), Effect.flatMap(Effect.fromOption)),
+    (effect) => effect.pipe(Effect.provideService(HtmlRender.HtmlRender, htmlRender)),
+    "preview",
+    // Parameter errors and HTML render errors are both written by the server for the agent.
+    (error) =>
+      isOrchestratorMcpFailure(error) || AiError.isAiError(error)
+        ? error.message
+        : "HTML preview failed.",
+  );
+});
+
+export const HtmlToolkitRegistrationLive = Layer.mergeAll(
+  McpServer.toolkit(HtmlRenderToolkit).pipe(Layer.provide(HtmlRenderToolkitHandlersLive)),
+  Layer.effectDiscard(registerHtmlPreview()).pipe(Layer.provide(HtmlPreviewToolkitHandlersLive)),
+).pipe(Layer.provide(HtmlRender.layer), Layer.provide(PreviewBrowser.layer));
+
 const PreviewStandardToolkitRegistrationLive = McpServer.toolkit(PreviewStandardToolkit).pipe(
   Layer.provide(PreviewStandardToolkitHandlersLive),
 );
@@ -726,4 +771,5 @@ export const layer = Layer.mergeAll(
   WorktreeToolkitRegistrationLive,
   PullRequestsToolkitRegistrationLive,
   DeviceToolkitRegistrationLive,
+  HtmlToolkitRegistrationLive,
 ).pipe(Layer.provideMerge(McpTransportLive));
diff --git a/apps/server/src/mcp/toolkits/core.test.ts b/apps/server/src/mcp/toolkits/core.test.ts
index 339e5eb9b2a8..867865b0d79d 100644
--- a/apps/server/src/mcp/toolkits/core.test.ts
+++ b/apps/server/src/mcp/toolkits/core.test.ts
@@ -1,4 +1,5 @@
 import * as NodeCrypto from "@effect/platform-node/NodeCrypto";
+import * as NodeServices from "@effect/platform-node/NodeServices";
 import { expect, it } from "@effect/vitest";
 import {
   DEFAULT_SERVER_SETTINGS,
@@ -6,13 +7,16 @@ import {
   EnvironmentId,
   ProviderInstanceId,
   ThreadId,
+  type OrchestrationV2ThreadShell,
 } from "@t3tools/contracts";
 import * as Effect from "effect/Effect";
 import * as Layer from "effect/Layer";
 import * as Schema from "effect/Schema";
 import { McpAttachmentInput } from "./attachment/input.ts";
 import { McpSchema, McpServer, Tool } from "effect/unstable/ai";
+import { FetchHttpClient } from "effect/unstable/http";
 
+import * as ServerConfig from "../../config.ts";
 import { OrchestratorProjectionError } from "../../orchestration-v2/Orchestrator.ts";
 import * as ThreadManagement from "../../orchestration-v2/ThreadManagementService.ts";
 import * as McpHttpServer from "../McpHttpServer.ts";
@@ -29,11 +33,13 @@ import { ThreadToolkit } from "./thread/tools.ts";
 import { WorktreeToolkit } from "./worktree/tools.ts";
 import { DeviceToolkit } from "./device/tools.ts";
 import { PullRequestsToolkit } from "./pullRequests/tools.ts";
+import { HtmlToolkit } from "./html/tools.ts";
 import {
   resolveT3McpToolDefinition,
   resolveT3McpToolPresentation,
   resolveT3McpToolSummaryAction,
 } from "@t3tools/shared/t3McpToolPresentation";
+import { htmlRenderFromToolItem } from "@t3tools/shared/toolOutput";
 
 const decodeMcpAttachmentInput = Schema.decodeUnknownEffect(McpAttachmentInput);
 
@@ -50,6 +56,7 @@ it("publishes unique tool names with reference-free object-root inputs", () => {
     PreviewControlsToolkit,
     DeviceToolkit,
     PullRequestsToolkit,
+    HtmlToolkit,
   ]) {
     for (const tool of Object.values(toolkit.tools)) {
       expect(names.has(tool.name)).toBe(false);
@@ -157,6 +164,45 @@ it.effect("returns a bounded public failure without serializing storage causes",
   ),
 );
 
+it.effect("returns an HTML render reference that Codex and Claude tool rows both carry", () =>
+  Effect.gen(function* () {
+    const server = yield* McpServer.McpServer;
+    const result = yield* server
+      .callTool({
+        name: "html_render",
+        arguments: { html: "<p>Revenue</p>", title: "Revenue", height: 240 },
+      })
+      .pipe(
+        Effect.provideService(McpInvocationContext.McpInvocationContext, scope),
+        Effect.provideService(McpSchema.McpServerClient, client),
+      );
+    const reference = htmlRenderFromToolItem({
+      toolName: "t3-code.html_render",
+      output: result.structuredContent,
+    });
+    expect(reference).toMatchObject({ title: "Revenue", height: 240 });
+    expect(
+      htmlRenderFromToolItem({ toolName: "mcp__t3-code__html_render", output: result.content }),
+    ).toEqual(reference);
+  }).pipe(
+    Effect.provide(
+      McpHttpServer.HtmlToolkitRegistrationLive.pipe(
+        Layer.provideMerge(McpServer.McpServer.layer),
+        Layer.provide(ServerConfig.layerTest(process.cwd(), { prefix: "t3-mcp-html-render-" })),
+        Layer.provide(NodeServices.layer),
+        // The preview browser is not installed in a fresh home, so nothing downloads.
+        Layer.provide(FetchHttpClient.layer),
+        Layer.provide(
+          Layer.mock(ThreadManagement.ThreadManagementService)({
+            getThreadShell: () =>
+              Effect.succeed({ id: threadId, deletedAt: null } as OrchestrationV2ThreadShell),
+          }),
+        ),
+      ),
+    ),
+  ),
+);
+
 it("keeps MCP preference output allowlisted and Unicode-bounded", () => {
   const settings = {
     ...DEFAULT_SERVER_SETTINGS,
diff --git a/apps/server/src/mcp/toolkits/html/handlers.ts b/apps/server/src/mcp/toolkits/html/handlers.ts
new file mode 100644
index 000000000000..295d3e3beaff
--- /dev/null
+++ b/apps/server/src/mcp/toolkits/html/handlers.ts
@@ -0,0 +1,57 @@
+import { OrchestratorMcpFailure } from "@t3tools/contracts";
+import * as Effect from "effect/Effect";
+
+import * as HtmlRender from "../../../htmlRender/HtmlRender.ts";
+import { readCaller } from "../../threadAccess.ts";
+import { HtmlPreviewToolkit, HtmlRenderToolkit, type HtmlToolkit } from "./tools.ts";
+
+const INVALID_PAGE_ERRORS = new Set([
+  "HtmlRenderImagesNotFoundError",
+  "HtmlRenderImageTooLargeError",
+  "HtmlRenderPageTooLargeError",
+]);
+
+// Every HTML render error message is built on the server and tells the agent what to do next.
+const toFailure = (error: { readonly _tag: string; readonly message: string }) =>
+  new OrchestratorMcpFailure({
+    code: INVALID_PAGE_ERRORS.has(error._tag) ? "invalid_request" : "orchestration_error",
+    message: error.message,
+  });
+
+const handlers = {
+  html_preview: (input) =>
+    Effect.gen(function* () {
+      const htmlRender = yield* HtmlRender.HtmlRender;
+      const { png, ...preview } = yield* htmlRender.preview(input).pipe(Effect.mapError(toFailure));
+      return {
+        ...preview,
+        screenshot: {
+          mimeType: "image/png" as const,
+          data: png,
+          width: preview.width,
+          height: preview.capturedHeight,
+        },
+      };
+    }),
+  html_render: (input) =>
+    Effect.gen(function* () {
+      const { scope } = yield* readCaller();
+      const htmlRender = yield* HtmlRender.HtmlRender;
+      const reference = yield* htmlRender
+        .publish({ threadId: scope.threadId, ...input })
+        .pipe(Effect.mapError(toFailure));
+      return {
+        htmlRender: reference,
+        message:
+          "Shown to the reader above your reply. Don't mention or describe the page; reply with only what it doesn't already say.",
+      };
+    }),
+} satisfies Parameters<typeof HtmlToolkit.toLayer>[0];
+
+export const HtmlPreviewToolkitHandlersLive = HtmlPreviewToolkit.toLayer({
+  html_preview: handlers.html_preview,
+});
+
+export const HtmlRenderToolkitHandlersLive = HtmlRenderToolkit.toLayer({
+  html_render: handlers.html_render,
+});
diff --git a/apps/server/src/mcp/toolkits/html/tools.ts b/apps/server/src/mcp/toolkits/html/tools.ts
new file mode 100644
index 000000000000..8a6b18c5286f
--- /dev/null
+++ b/apps/server/src/mcp/toolkits/html/tools.ts
@@ -0,0 +1,108 @@
+import { OrchestratorMcpFailure } from "@t3tools/contracts";
+import {
+  HTML_RENDER_COLUMN_WIDTH,
+  HTML_RENDER_LAYOUT_GUIDE,
+  HTML_RENDER_MAX_HEIGHT,
+  HTML_RENDER_MAX_TITLE_LENGTH,
+  HTML_RENDER_MIN_HEIGHT,
+  HTML_RENDER_THEME_GUIDE,
+  HTML_RENDER_TOOL_NAME,
+} from "@t3tools/shared/htmlRender";
+import * as Schema from "effect/Schema";
+import { Tool, Toolkit } from "effect/unstable/ai";
+
+import * as HtmlRender from "../../../htmlRender/HtmlRender.ts";
+import * as ThreadManagementService from "../../../orchestration-v2/ThreadManagementService.ts";
+import * as McpInvocationContext from "../../McpInvocationContext.ts";
+
+const Html = Schema.String.check(Schema.isMinLength(1), Schema.isMaxLength(512_000)).annotate({
+  description: "A complete, self-contained HTML document.",
+});
+
+const PAGE_RULES =
+  'Write one self-contained document with inline <style> and <script>. Local images written as absolute file paths (src="/abs/shot.png", CSS url(/abs/bg.webp), or a JS string) are inlined automatically; remote http(s) URLs, such as a CDN chart library, load as-is.';
+
+export const HtmlPreviewTool = Tool.make("html_preview", {
+  description: `Render an HTML page in T3's headless browser and get back a PNG screenshot, contentHeight (the height the page needs at this width), and its console output: log, info, warning, error, and uncaught exceptions, with stack traces pointing into page.html. console.log is a fine way to report your own checks. Use it to check and iterate on a page before html_render. The first preview on a machine can report that T3 is still installing its preview browser; call again a minute later. ${PAGE_RULES} The page gets the theme variables and layout described in html_render.`,
+  parameters: Schema.Struct({
+    html: Html,
+    width: Schema.optional(
+      Schema.Int.annotate({
+        description: `Viewport width in CSS pixels, 240-1600. Defaults to ${HTML_RENDER_COLUMN_WIDTH}, the reply column; use about 390 to check phones.`,
+      }),
+    ),
+    appearance: Schema.optional(
+      Schema.Literals(["dark", "light"]).annotate({
+        description: "Theme to preview. Defaults to dark.",
+      }),
+    ),
+  }),
+  success: Schema.Struct({
+    width: Schema.Int,
+    contentHeight: Schema.Int,
+    capturedHeight: Schema.Int,
+    consoleMessages: Schema.Array(
+      Schema.Struct({
+        level: Schema.Literals(["log", "info", "warning", "error"]),
+        text: Schema.String,
+      }),
+    ),
+    missingImages: Schema.optional(Schema.Array(Schema.String)),
+    screenshot: Schema.Struct({
+      mimeType: Schema.Literal("image/png"),
+      data: Schema.String,
+      width: Schema.Int,
+      height: Schema.Int,
+    }),
+  }),
+  failure: OrchestratorMcpFailure,
+  dependencies: [HtmlRender.HtmlRender],
+})
+  .annotate(Tool.Title, "Preview HTML")
+  .annotate(Tool.Readonly, true)
+  .annotate(Tool.Destructive, false)
+  .annotate(Tool.Idempotent, true)
+  .annotate(Tool.OpenWorld, false);
+
+// 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, up to height; anything taller scrolls inside the frame. ${PAGE_RULES} ${HTML_RENDER_LAYOUT_GUIDE} ${HTML_RENDER_THEME_GUIDE}`,
+  parameters: Schema.Struct({
+    html: Html,
+    title: Schema.String.check(
+      Schema.isMinLength(1),
+      Schema.isMaxLength(HTML_RENDER_MAX_TITLE_LENGTH),
+    ).annotate({ description: "Short name for the page." }),
+    height: Schema.Int.annotate({
+      description: `The most the frame may take, in CSS pixels, ${HTML_RENDER_MIN_HEIGHT}-${HTML_RENDER_MAX_HEIGHT}. Use html_preview's contentHeight, or less to make long content scroll inside the frame.`,
+    }),
+  }),
+  success: Schema.Struct({
+    htmlRender: Schema.Struct({
+      attachmentId: Schema.String,
+      title: Schema.String,
+      height: Schema.Number,
+      heights: Schema.optional(Schema.Array(Schema.Tuple([Schema.Int, Schema.Int]))),
+    }),
+    message: Schema.String,
+  }),
+  failure: OrchestratorMcpFailure,
+  failureMode: "return",
+  dependencies: [
+    McpInvocationContext.McpInvocationContext,
+    ThreadManagementService.ThreadManagementService,
+    HtmlRender.HtmlRender,
+  ],
+})
+  .annotate(Tool.Title, "Render HTML")
+  .annotate(Tool.Readonly, true)
+  .annotate(Tool.Destructive, false)
+  .annotate(Tool.Idempotent, false)
+  .annotate(Tool.OpenWorld, false);
+
+export const HtmlPreviewToolkit = Toolkit.make(HtmlPreviewTool);
+
+export const HtmlRenderToolkit = Toolkit.make(HtmlRenderTool);
+
+export const HtmlToolkit = Toolkit.make(HtmlPreviewTool, HtmlRenderTool);
diff --git a/apps/server/src/orchestration-v2/Adapters/ClaudeAdapterV2.test.ts b/apps/server/src/orchestration-v2/Adapters/ClaudeAdapterV2.test.ts
index 1c8534203084..677585b565a5 100644
--- a/apps/server/src/orchestration-v2/Adapters/ClaudeAdapterV2.test.ts
+++ b/apps/server/src/orchestration-v2/Adapters/ClaudeAdapterV2.test.ts
@@ -52,6 +52,7 @@ import { attachmentRelativePath } from "../../attachmentStore.ts";
 import * as ServerConfig from "../../config.ts";
 import * as McpProviderSession from "../../mcp/McpProviderSession.ts";
 import { PreviewControlsToolkit } from "../../mcp/toolkits/previewControls/tools.ts";
+import { HtmlToolkit } from "../../mcp/toolkits/html/tools.ts";
 import { EnvironmentToolkit } from "../../mcp/toolkits/environment/tools.ts";
 import { ProjectToolkit } from "../../mcp/toolkits/project/tools.ts";
 import { WorktreeToolkit } from "../../mcp/toolkits/worktree/tools.ts";
@@ -655,6 +656,7 @@ describe("ClaudeAdapterV2 MCP query overrides", () => {
       ...Object.values(ProjectToolkit.tools),
       ...Object.values(EnvironmentToolkit.tools),
       ...Object.values(PreviewControlsToolkit.tools),
+      ...Object.values(HtmlToolkit.tools),
     ]
       .filter((tool) => Context.get(tool.annotations, Tool.Readonly))
       .map((tool) => `mcp__t3-code__${tool.name}`)
diff --git a/apps/server/src/orchestration-v2/Adapters/ClaudeAdapterV2.ts b/apps/server/src/orchestration-v2/Adapters/ClaudeAdapterV2.ts
index 9d594399f656..4c5003c65950 100644
--- a/apps/server/src/orchestration-v2/Adapters/ClaudeAdapterV2.ts
+++ b/apps/server/src/orchestration-v2/Adapters/ClaudeAdapterV2.ts
@@ -944,6 +944,8 @@ export const CLAUDE_READ_ONLY_T3_MCP_ALLOWED_TOOLS: ReadonlyArray<string> = [
   "mcp__t3-code__t3_environment_read",
   "mcp__t3-code__t3_queue_list",
   "mcp__t3-code__t3_queue_read",
+  "mcp__t3-code__html_preview",
+  "mcp__t3-code__html_render",
 ];
 
 // Claude Code aborts an HTTP MCP call after 60 s ("The operation timed out.")
diff --git a/apps/server/src/orchestration-v2/Adapters/piT3McpExtensionSource.ts b/apps/server/src/orchestration-v2/Adapters/piT3McpExtensionSource.ts
index 185bd16f9745..bca79ce6fde1 100644
--- a/apps/server/src/orchestration-v2/Adapters/piT3McpExtensionSource.ts
+++ b/apps/server/src/orchestration-v2/Adapters/piT3McpExtensionSource.ts
@@ -108,8 +108,11 @@ function formatMcpContent(result: unknown): string {
       if (part?.type === "text" && typeof part.text === "string") texts.push(part.text);
     }
   }
+  // Most T3 tools mirror structuredContent in a text block. Repeating it would
+  // leave T3's own output parsing two JSON documents instead of one.
   if (record.structuredContent !== undefined) {
-    texts.push(JSON.stringify(record.structuredContent));
+    const structured = JSON.stringify(record.structuredContent);
+    if (!texts.includes(structured)) texts.push(structured);
   }
   if (texts.length > 0) return texts.join("\\n");
   return JSON.stringify(result);
diff --git a/apps/server/src/orchestration-v2/ProjectionStore.ts b/apps/server/src/orchestration-v2/ProjectionStore.ts
index a6be3079946f..3e5e380a5ff8 100644
--- a/apps/server/src/orchestration-v2/ProjectionStore.ts
+++ b/apps/server/src/orchestration-v2/ProjectionStore.ts
@@ -70,6 +70,7 @@ import * as Schema from "effect/Schema";
 import * as SqlClient from "effect/unstable/sql/SqlClient";
 import type * as Statement from "effect/unstable/sql/Statement";
 
+import { threadHtmlRenderAttachmentIds } from "../attachmentStore.ts";
 import {
   isThreadHistoryUserTurn,
   isThreadHistoryTurnStart,
@@ -4522,13 +4523,37 @@ export const layer: Layer.Layer<ProjectionStoreV2, never, SqlClient.SqlClient> =
       );
 
     const getThreadAttachmentIds: ProjectionStoreV2Shape["getThreadAttachmentIds"] = (threadId) =>
-      sql<{ id: string }>`
+      Effect.all([
+        sql<{ id: string }>`
       SELECT DISTINCT json_extract(attachment.value, '$.id') AS id
       FROM orchestration_v2_projection_messages AS message,
         json_each(message.payload_json, '$.attachments') AS attachment
       WHERE message.thread_id = ${threadId}
-    `.pipe(
-        Effect.map((rows) => rows.map((row) => row.id)),
+    `,
+        // Pages published by html_render live in the attachment store too.
+        sql<{ payload_json: string }>`
+      SELECT payload_json
+      FROM orchestration_v2_projection_turn_items
+      WHERE thread_id = ${threadId}
+        AND type = 'dynamic_tool'
+        AND payload_json LIKE '%htmlRender%'
+    `,
+      ]).pipe(
+        Effect.map(([messages, renders]) => [
+          ...new Set([
+            ...messages.map((row) => row.id),
+            ...threadHtmlRenderAttachmentIds(
+              threadId,
+              renders.map((row) => {
+                const item = parseEncodedPayload(row.payload_json);
+                return {
+                  toolName: typeof item.toolName === "string" ? item.toolName : null,
+                  output: item.output,
+                };
+              }),
+            ),
+          ]),
+        ]),
         Effect.mapError((cause) => new ProjectionStoreReadError({ threadId, cause })),
       );
 
@@ -5817,17 +5842,21 @@ export const layerMemory: Layer.Layer<ProjectionStoreV2> = Layer.effect(
           ),
         ),
       getThreadAttachmentIds: (threadId) =>
-        service
-          .getThreadProjection(threadId)
-          .pipe(
-            Effect.map((projection) => [
-              ...new Set(
-                projection.messages.flatMap((message) =>
-                  message.attachments.map((attachment) => attachment.id),
+        service.getThreadProjection(threadId).pipe(
+          Effect.map((projection) => [
+            ...new Set([
+              ...projection.messages.flatMap((message) =>
+                message.attachments.map((attachment) => attachment.id),
+              ),
+              ...threadHtmlRenderAttachmentIds(
+                threadId,
+                projection.turnItems.flatMap((item) =>
+                  item.type === "dynamic_tool" ? [item] : [],
                 ),
               ),
             ]),
-          ),
+          ]),
+        ),
       getThreadRecords: (threadId, fields, filter) =>
         Effect.gen(function* () {
           const projection = (yield* Ref.get(replayState)).projections.get(threadId);
diff --git a/apps/server/src/provider/AntigravityInstallation.ts b/apps/server/src/provider/AntigravityInstallation.ts
index a0a6d81487ed..e96a1b929215 100644
--- a/apps/server/src/provider/AntigravityInstallation.ts
+++ b/apps/server/src/provider/AntigravityInstallation.ts
@@ -27,10 +27,9 @@ import { HttpClient, HttpClientRequest, HttpClientResponse } from "effect/unstab
 import * as ChildProcessSpawner from "effect/unstable/process/ChildProcessSpawner";
 import * as NodeCrypto from "node:crypto";
 import * as NodeFSP from "node:fs/promises";
-import type * as NodeStream from "node:stream";
-import * as Yauzl from "yauzl";
 
 import * as ServerConfig from "../config.ts";
+import { openZipArchive } from "../zipArchive.ts";
 import { makeAntigravityAcpRuntime } from "./acp/AntigravityAcpSupport.ts";
 import {
   buildAntigravityAcpSpawnInput,
@@ -148,121 +147,6 @@ function isRunning(state: ProviderInstallState) {
   );
 }
 
-/** Open only a verified local archive. Entries stay lazy and extraction stays bounded. */
-const openArchive = Effect.fn("AntigravityInstallation.openArchive")(function* (
-  archivePath: string,
-) {
-  const opened = yield* Effect.acquireRelease(
-    Effect.callback<
-      {
-        readonly zip: Yauzl.ZipFile;
-        readonly error: () => AntigravityInstallationError | undefined;
-        readonly close: Effect.Effect<void>;
-      },
-      AntigravityInstallationError
-    >((resume) => {
-      Yauzl.open(
-        archivePath,
-        { lazyEntries: true, autoClose: false, validateEntrySizes: true, strictFileNames: true },
-        (error, zip) => {
-          if (error || !zip) {
-            resume(
-              Effect.fail(
-                installationError("extract", "Could not open the verified archive.", error),
-              ),
-            );
-            return;
-          }
-          let closed = false;
-          let archiveError: AntigravityInstallationError | undefined;
-          zip.on("close", () => {
-            closed = true;
-          });
-          zip.on("error", (cause: unknown) => {
-            archiveError = installationError("extract", "The archive could not be read.", cause);
-          });
-          resume(
-            Effect.succeed({
-              zip,
-              error: () => archiveError,
-              close: Effect.callback<void>((finish) => {
-                if (closed) {
-                  finish(Effect.void);
-                  return;
-                }
-                const onClose = () => {
-                  zip.removeListener("error", onError);
-                  finish(Effect.void);
-                };
-                const onError = (cause: unknown) => {
-                  zip.removeListener("close", onClose);
-                  finish(
-                    Effect.die(installationError("extract", "Could not close the archive.", cause)),
-                  );
-                };
-                zip.once("close", onClose);
-                zip.once("error", onError);
-                zip.close();
-              }),
-            }),
-          );
-        },
-      );
-    }),
-    (opened) => opened.close,
-  );
-
-  const next = Effect.callback<Yauzl.Entry | null, AntigravityInstallationError>((resume) => {
-    const existingError = opened.error();
-    if (existingError) {
-      resume(Effect.fail(existingError));
-      return;
-    }
-    const cleanup = () => {
-      opened.zip.removeListener("entry", onEntry);
-      opened.zip.removeListener("end", onEnd);
-      opened.zip.removeListener("error", onError);
-    };
-    const onEntry = (entry: Yauzl.Entry) => {
-      cleanup();
-      resume(Effect.succeed(entry));
-    };
-    const onEnd = () => {
-      cleanup();
-      resume(Effect.succeed(null));
-    };
-    const onError = (cause: unknown) => {
-      cleanup();
-      resume(Effect.fail(installationError("extract", "The archive could not be read.", cause)));
-    };
-    opened.zip.once("entry", onEntry);
-    opened.zip.once("end", onEnd);
-    opened.zip.once("error", onError);
-    opened.zip.readEntry();
-    return Effect.sync(cleanup);
-  });
-
-  const streamEntry = (entry: Yauzl.Entry) =>
-    Effect.acquireRelease(
-      Effect.callback<NodeStream.Readable, AntigravityInstallationError>((resume) => {
-        opened.zip.openReadStream(entry, (cause, readable) => {
-          resume(
-            cause || !readable
-              ? Effect.fail(
-                  installationError("extract", "Could not read an archive member.", cause),
-                )
-              : Effect.succeed(readable),
-          );
-        });
-      }),
-      (readable) =>
-        Effect.sync(() => {
-          readable.destroy();
-        }),
-    );
-  return { entryCount: opened.zip.entryCount, next, streamEntry };
-});
-
 export const makeAntigravityInstallation = Effect.fn("AntigravityInstallation.make")(function* (
   options: AntigravityInstallationOptions,
 ) {
@@ -665,7 +549,9 @@ export const makeAntigravityInstallation = Effect.fn("AntigravityInstallation.ma
 
       yield* report("extracting", "Extracting the verified runtime.");
       yield* Effect.gen(function* () {
-        const archive = yield* openArchive(archivePath);
+        const archive = yield* openZipArchive(archivePath, (detail, cause) =>
+          installationError("extract", detail, cause),
+        );
         if (archive.entryCount !== 2) {
           return yield* installationError(
             "extract",
diff --git a/apps/server/src/provider/T3OrchestrationInstructions.ts b/apps/server/src/provider/T3OrchestrationInstructions.ts
index a70ef35bffcd..9d61719705d4 100644
--- a/apps/server/src/provider/T3OrchestrationInstructions.ts
+++ b/apps/server/src/provider/T3OrchestrationInstructions.ts
@@ -28,6 +28,10 @@ For stacked work, set \`baseRef\` to the intended parent branch and \`startFromO
 Tool names may include a harness-normalized MCP prefix, such as \`mcp__t3_code__delegate_task\`; the semantics are the same. Some harnesses attach optional MCP servers lazily: if an initial tool-catalog scan does not show T3 tools, do not conclude that cross-provider delegation is unavailable. Make one bounded direct attempt using the known T3 tool name on the next tool step. In Codex code mode, for example, call \`tools.mcp__t3_code__orchestrator_capabilities({})\` before reporting that the capability is absent. Keep polling/wait loops bounded, do not duplicate active work, and use stable \`clientRequestId\` values when retrying tools that accept them.
 
 ACP fallback: some ACP agents accept the injected MCP server but fail to expose its tools. When the T3 tools are absent and \`T3_ACP_MCP_NODE\` is present, call the same tools through the terminal: \`ELECTRON_RUN_AS_NODE=1 "$T3_ACP_MCP_NODE" \${T3_ACP_MCP_ENTRYPOINT:+"$T3_ACP_MCP_ENTRYPOINT"} acp-mcp-call orchestrator_capabilities '{}'\` (\`T3_ACP_MCP_ENTRYPOINT\` is unset when T3 runs as a standalone executable). Delegate with \`acp-mcp-call delegate_task '{"task":"...","target":{"providerInstanceId":"...","model":"..."},"mode":"async","clientRequestId":"..."}'\`. This is the supported T3 transport fallback, not an ordinary shell-based substitute for delegation.
+
+### Showing visuals
+
+When a chart, table, diagram, image collage, or mockup would say more than prose, build a self-contained HTML page, check it with \`html_preview\`, then publish it with \`html_render\` before your final reply. The reader sees the page above that reply, so don't announce or restate it; add only what it doesn't say.
 `;
 
 export const T3_CODE_BROWSER_TOOL_INSTRUCTIONS = `
diff --git a/apps/server/src/zipArchive.ts b/apps/server/src/zipArchive.ts
new file mode 100644
index 000000000000..cc1692543242
--- /dev/null
+++ b/apps/server/src/zipArchive.ts
@@ -0,0 +1,115 @@
+import * as Effect from "effect/Effect";
+import type * as NodeStream from "node:stream";
+import * as Yauzl from "yauzl";
+
+/**
+ * Opens a local, already verified ZIP for lazy, one-entry-at-a-time reading.
+ * `makeError` turns each failure into the caller's own error type. Close the
+ * scope to close the archive.
+ */
+export const openZipArchive = Effect.fn("zipArchive.open")(function* <E>(
+  archivePath: string,
+  makeError: (detail: string, cause: unknown) => E,
+) {
+  const opened = yield* Effect.acquireRelease(
+    Effect.callback<
+      {
+        readonly zip: Yauzl.ZipFile;
+        readonly error: () => E | undefined;
+        readonly close: Effect.Effect<void>;
+      },
+      E
+    >((resume) => {
+      Yauzl.open(
+        archivePath,
+        { lazyEntries: true, autoClose: false, validateEntrySizes: true, strictFileNames: true },
+        (error, zip) => {
+          if (error || !zip) {
+            resume(Effect.fail(makeError("Could not open the verified archive.", error)));
+            return;
+          }
+          let closed = false;
+          let archiveError: E | undefined;
+          zip.on("close", () => {
+            closed = true;
+          });
+          zip.on("error", (cause: unknown) => {
+            archiveError = makeError("The archive could not be read.", cause);
+          });
+          resume(
+            Effect.succeed({
+              zip,
+              error: () => archiveError,
+              close: Effect.callback<void>((finish) => {
+                if (closed) {
+                  finish(Effect.void);
+                  return;
+                }
+                const onClose = () => {
+                  zip.removeListener("error", onError);
+                  finish(Effect.void);
+                };
+                const onError = (cause: unknown) => {
+                  zip.removeListener("close", onClose);
+                  finish(Effect.die(makeError("Could not close the archive.", cause)));
+                };
+                zip.once("close", onClose);
+                zip.once("error", onError);
+                zip.close();
+              }),
+            }),
+          );
+        },
+      );
+    }),
+    (opened) => opened.close,
+  );
+
+  const next = Effect.callback<Yauzl.Entry | null, E>((resume) => {
+    const existingError = opened.error();
+    if (existingError) {
+      resume(Effect.fail(existingError));
+      return;
+    }
+    const cleanup = () => {
+      opened.zip.removeListener("entry", onEntry);
+      opened.zip.removeListener("end", onEnd);
+      opened.zip.removeListener("error", onError);
+    };
+    const onEntry = (entry: Yauzl.Entry) => {
+      cleanup();
+      resume(Effect.succeed(entry));
+    };
+    const onEnd = () => {
+      cleanup();
+      resume(Effect.succeed(null));
+    };
+    const onError = (cause: unknown) => {
+      cleanup();
+      resume(Effect.fail(makeError("The archive could not be read.", cause)));
+    };
+    opened.zip.once("entry", onEntry);
+    opened.zip.once("end", onEnd);
+    opened.zip.once("error", onError);
+    opened.zip.readEntry();
+    return Effect.sync(cleanup);
+  });
+
+  const streamEntry = (entry: Yauzl.Entry) =>
+    Effect.acquireRelease(
+      Effect.callback<NodeStream.Readable, E>((resume) => {
+        opened.zip.openReadStream(entry, (cause, readable) => {
+          resume(
+            cause || !readable
+              ? Effect.fail(makeError("Could not read an archive member.", cause))
+              : Effect.succeed(readable),
+          );
+        });
+      }),
+      (readable) =>
+        Effect.sync(() => {
+          readable.destroy();
+        }),
+    );
+  return { entryCount: opened.zip.entryCount, next, streamEntry };
+});
diff --git a/apps/web/src/components/chat/HtmlRenderFrame.tsx b/apps/web/src/components/chat/HtmlRenderFrame.tsx
new file mode 100644
index 000000000000..a6d9df2747ec
--- /dev/null
+++ b/apps/web/src/components/chat/HtmlRenderFrame.tsx
@@ -0,0 +1,100 @@
+import type { EnvironmentId } from "@t3tools/contracts";
+import {
+  HTML_RENDER_COLUMN_WIDTH,
+  htmlRenderFileName,
+  htmlRenderFrameHeight,
+  type HtmlRenderReference,
+} from "@t3tools/shared/htmlRender";
+import { Maximize2Icon } from "lucide-react";
+import { useLayoutEffect, useMemo, useRef, useState } from "react";
+
+import { useAssetUrlState } from "~/assets/assetUrls";
+import type { ChatFileAttachment } from "~/types";
+
+import { HtmlRenderDocument } from "../files/BrowserDocumentFrame";
+import { Button } from "../ui/button";
+import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
+
+/**
+ * An agent's HTML render inline in the thread: the page itself on the thread's
+ * own background, at its measured height for this width (capped at the agent's
+ * height). Loading and failure hold the same box so nothing below it moves.
+ */
+export function HtmlRenderFrame(props: {
+  readonly environmentId: EnvironmentId;
+  readonly htmlRender: HtmlRenderReference;
+  readonly onOpen: (attachment: ChatFileAttachment) => void;
+}) {
+  const { attachmentId, title } = props.htmlRender;
+  // The frame takes the page's measured height at its own width, read before
+  // first paint so the reserved box is already the right size.
+  const boxRef = useRef<HTMLDivElement>(null);
+  const [width, setWidth] = useState(HTML_RENDER_COLUMN_WIDTH);
+  useLayoutEffect(() => {
+    const box = boxRef.current;
+    if (!box) return;
+    setWidth(box.clientWidth);
+    const observer = new ResizeObserver(([entry]) => {
+      if (entry) setWidth(entry.contentRect.width);
+    });
+    observer.observe(box);
+    return () => observer.disconnect();
+  }, []);
+  const height = htmlRenderFrameHeight(props.htmlRender, width);
+  const fileName = htmlRenderFileName(title);
+  const resource = useMemo(
+    () => ({
+      _tag: "attachment" as const,
+      attachmentId,
+      fileName,
+      mimeType: "text/html",
+      disposition: "inline" as const,
+    }),
+    [attachmentId, fileName],
+  );
+  // The page keeps the first URL it got, so later re-mints are not even requested.
+  const [src, setSrc] = useState<string | null>(null);
+  const assetUrl = useAssetUrlState(src === null ? props.environmentId : null, resource);
+  if (src === null && assetUrl._tag === "Success") setSrc(assetUrl.url);
+
+  return (
+    <div ref={boxRef} className="group/html-render relative" style={{ height }}>
+      {src !== null ? (
+        <>
+          <HtmlRenderDocument src={src} title={title} className="block size-full" />
+          <div className="absolute end-2 top-2 opacity-0 transition-opacity duration-150 focus-within:opacity-100 group-hover/html-render:opacity-100 pointer-coarse:opacity-100">
+            <Tooltip>
+              <TooltipTrigger
+                render={
+                  <Button
+                    aria-label="Open in panel"
+                    size="icon-xs"
+                    variant="glass"
+                    onClick={() =>
+                      props.onOpen({
+                        type: "file",
+                        id: attachmentId,
+                        name: fileName,
+                        mimeType: "text/html",
+                        // Unknown here; the preview leaves it out.
+                        sizeBytes: 0,
+                        htmlRender: true,
+                      })
+                    }
+                  />
+                }
+              >
+                <Maximize2Icon className="size-3.5" />
+              </TooltipTrigger>
+              <TooltipPopup side="left">Open in panel</TooltipPopup>
+            </Tooltip>
+          </div>
+        </>
+      ) : assetUrl._tag === "Failure" ? (
+        <p className="flex size-full items-center justify-center text-muted-foreground text-xs">
+          Unable to load {title}
+        </p>
+      ) : null}
+    </div>
+  );
+}
diff --git a/apps/web/src/components/chat/MessagesTimeline.logic.ts b/apps/web/src/components/chat/MessagesTimeline.logic.ts
index 280cc3672103..07b8d2e0441a 100644
--- a/apps/web/src/components/chat/MessagesTimeline.logic.ts
+++ b/apps/web/src/components/chat/MessagesTimeline.logic.ts
@@ -48,6 +48,7 @@ import {
   type T3McpToolPresentation,
 } from "@t3tools/shared/t3McpToolPresentation";
 import { compactDynamicToolOutput } from "@t3tools/shared/toolOutput";
+import { htmlRenderReferencesEqual, type HtmlRenderReference } from "@t3tools/shared/htmlRender";
 import { dynamicToolTitle } from "@t3tools/shared/toolActivity";
 import { formatWorkspaceRelativePath } from "../../filePathDisplay";
 import {
@@ -64,6 +65,7 @@ function timelineEntryRunId(entry: TimelineEntry): RunId | null {
   if (entry.kind === "proposed-plan") {
     return entry.proposedPlan.runId;
   }
+  if (entry.kind === "html-render") return entry.runId;
   return entry.kind === "work" ? (entry.entry.runId ?? null) : null;
 }
 
@@ -587,6 +589,12 @@ type MessagesTimelineRowContent =
       id: string;
       createdAt: string;
       proposedPlan: ProposedPlan;
+    }
+  | {
+      kind: "html-render";
+      id: string;
+      createdAt: string;
+      htmlRender: HtmlRenderReference;
     };
 
 export interface StableMessagesTimelineRowsState {
@@ -1606,6 +1614,16 @@ export function deriveMessagesTimelineRows(input: {
       continue;
     }
 
+    if (timelineEntry.kind === "html-render") {
+      nextRows.push({
+        kind: "html-render",
+        id: timelineEntry.id,
+        createdAt: timelineEntry.createdAt,
+        htmlRender: timelineEntry.htmlRender,
+      });
+      continue;
+    }
+
     if (timelineEntry.kind === "event") {
       const previous = nextRows.at(-1);
       if (
@@ -2016,6 +2034,12 @@ function isRowUnchanged(a: MessagesTimelineRow, b: MessagesTimelineRow): boolean
     case "proposed-plan":
       return a.proposedPlan === (b as typeof a).proposedPlan;
 
+    case "html-render": {
+      // Entries rebuild on any tool update; an equal page must keep its mounted frame.
+      const bh = b as typeof a;
+      return a.createdAt === bh.createdAt && htmlRenderReferencesEqual(a.htmlRender, bh.htmlRender);
+    }
+
     case "event":
       return (
         a.projectedItem === (b as typeof a).projectedItem &&
diff --git a/apps/web/src/components/chat/MessagesTimeline.tsx b/apps/web/src/components/chat/MessagesTimeline.tsx
index 45940bca888e..037c579693a2 100644
--- a/apps/web/src/components/chat/MessagesTimeline.tsx
+++ b/apps/web/src/components/chat/MessagesTimeline.tsx
@@ -168,6 +168,7 @@ import {
   SnapShotAttachmentDetails,
 } from "./SnapShotAttachmentDetails";
 import { ProposedPlanCard } from "./ProposedPlanCard";
+import { HtmlRenderFrame } from "./HtmlRenderFrame";
 import { ChangedFilesCard } from "./ChangedFilesTree";
 import { useFileContextMenuHandler } from "../../fileContextMenu";
 import { useProject, useThreadShell } from "../../state/entities";
@@ -1779,7 +1780,8 @@ const TimelineRowContent = memo(function TimelineRowContent({ row }: { row: Time
                   !row.showAssistantMeta) ||
                 row.kind === "worktree-setup" ||
                 row.kind === "event" ||
-                row.kind === "attempt-fold"
+                row.kind === "attempt-fold" ||
+                row.kind === "html-render"
               ? "pb-2"
               : "pb-4",
         (row.kind === "message" && row.message.role === "assistant") ||
@@ -1827,6 +1829,7 @@ const TimelineRowContent = memo(function TimelineRowContent({ row }: { row: Time
       ) : null}
       {row.kind === "assistant-meta" ? <AssistantMetaTimelineRow row={row} /> : null}
       {row.kind === "proposed-plan" ? <ProposedPlanTimelineRow row={row} /> : null}
+      {row.kind === "html-render" ? <HtmlRenderTimelineRow row={row} /> : null}
       {row.kind === "working" ? <WorkingTimelineRow row={row} /> : null}
       {row.kind === "worktree-setup" ? <WorktreeSetupTimelineRow row={row} /> : null}
       {row.kind === "event" ? <V2EventTimelineRow row={row} /> : null}
@@ -2700,6 +2703,22 @@ function ProposedPlanTimelineRow({
   );
 }
 
+function HtmlRenderTimelineRow({ row }: { row: Extract<TimelineRow, { kind: "html-render" }> }) {
+  const ctx = use(TimelineRowCtx);
+
+  return (
+    <div className="min-w-0 px-1">
+      <HtmlRenderFrame
+        // A recycled row must not keep another page's frozen frame.
+        key={row.htmlRender.attachmentId}
+        environmentId={ctx.activeThreadEnvironmentId}
+        htmlRender={row.htmlRender}
+        onOpen={ctx.onFileOpen}
+      />
+    </div>
+  );
+}
+
 type V2EventTone = "muted" | "warning" | "danger" | "success";
 
 function v2EventPresentation(item: OrchestrationV2TurnItem): {
diff --git a/apps/web/src/components/files/AttachmentFilePreview.tsx b/apps/web/src/components/files/AttachmentFilePreview.tsx
index 2d939d714ed8..aa5d1802be12 100644
--- a/apps/web/src/components/files/AttachmentFilePreview.tsx
+++ b/apps/web/src/components/files/AttachmentFilePreview.tsx
@@ -55,9 +55,12 @@ function renderedToggleLabel(mode: "markdown" | "html" | "table", rendered: bool
 export function AttachmentFilePreview(props: {
   name: string;
   mimeType: string;
+  /** Zero when unknown. */
   sizeBytes: number;
   file?: Blob | null;
   asset?: { environmentId: EnvironmentId; attachmentId: string };
+  /** An agent's HTML render, shown in the app theme. */
+  htmlRender?: boolean;
   /** First crumb: where the file comes from. */
   origin?: string;
   onRemove?: () => void;
@@ -242,7 +245,12 @@ export function AttachmentFilePreview(props: {
       <ReadOnlySourcePreview name={props.name} text={content.text} />
     )
   ) : kind === "pdf" || kind === "html" ? (
-    <BrowserDocumentFrame src={url} title={props.name} pdf={kind === "pdf"} />
+    <BrowserDocumentFrame
+      src={url}
+      title={props.name}
+      pdf={kind === "pdf"}
+      htmlRender={props.htmlRender === true}
+    />
   ) : kind === "audio" ? (
     <AudioPreview src={url} name={props.name} onError={() => setError("Unable to load audio.")} />
   ) : kind === "video" ? (
@@ -286,9 +294,11 @@ export function AttachmentFilePreview(props: {
           <span aria-current="page" className="min-w-0 truncate px-0.5 font-medium text-foreground">
             {props.name}
           </span>
-          <span className="ml-2 shrink-0 text-muted-foreground">
-            {formatAttachmentSize(props.sizeBytes)}
-          </span>
+          {props.sizeBytes > 0 ? (
+            <span className="ml-2 shrink-0 text-muted-foreground">
+              {formatAttachmentSize(props.sizeBytes)}
+            </span>
+          ) : null}
         </div>
         {renderedMode ? (
           <FileSurfaceAction
@@ -341,7 +351,8 @@ export function AttachmentFilePreview(props: {
       </div>
       {content?.truncated ? (
         <FileSurfaceNotice>
-          Preview limited to the first 1 MB of a {props.sizeBytes.toLocaleString()} byte file. Save
+          Preview limited to the first 1 MB
+          {props.sizeBytes > 0 ? ` of a ${props.sizeBytes.toLocaleString()} byte file` : ""}. Save
           the file to read it in full.
         </FileSurfaceNotice>
       ) : null}
diff --git a/apps/web/src/components/files/BrowserDocumentFrame.tsx b/apps/web/src/components/files/BrowserDocumentFrame.tsx
index 0be9c724ca00..741963ed2fbc 100644
--- a/apps/web/src/components/files/BrowserDocumentFrame.tsx
+++ b/apps/web/src/components/files/BrowserDocumentFrame.tsx
@@ -1,3 +1,9 @@
+import { htmlRenderThemeFragment, htmlRenderThemeMessage } from "@t3tools/shared/htmlRender";
+import { useEffect, useRef, useState } from "react";
+
+import { useHtmlRenderTheme } from "~/hooks/useHtmlRenderTheme";
+import { cn } from "~/lib/utils";
+
 /**
  * Chromium's viewer opens with its own toolbar, a thumbnail rail and a small
  * zoom. The panel header is the only chrome we want, so ask for the page
@@ -13,11 +19,13 @@ export const isPdfPreviewFile = (path: string): boolean =>
  * Renders an HTML or PDF document from its URL. HTML runs in a sandboxed frame
  * with an opaque origin, so a page cannot reach the app's session or storage.
  * The built-in PDF viewer needs an unsandboxed frame; a PDF runs no scripts.
+ * An agent's HTML render also wears the app theme.
  */
 export function BrowserDocumentFrame(props: {
   readonly src: string;
   readonly title: string;
   readonly pdf: boolean;
+  readonly htmlRender?: boolean;
 }) {
   const className = "min-h-0 flex-1 border-0 bg-white";
   return props.pdf ? (
@@ -28,6 +36,13 @@ export function BrowserDocumentFrame(props: {
       title={props.title}
       className={className}
     />
+  ) : props.htmlRender ? (
+    <HtmlRenderDocument
+      key={props.src}
+      src={props.src}
+      title={props.title}
+      className="min-h-0 flex-1"
+    />
   ) : (
     <iframe
       key={props.src}
@@ -38,3 +53,44 @@ export function BrowserDocumentFrame(props: {
     />
   );
 }
+
+/**
+ * A sandboxed agent HTML render in the app theme. The page reads the theme from
+ * its URL fragment before first paint, then follows changes posted to its
+ * bootstrap. The first URL is kept for the frame's lifetime: signed asset URLs
+ * re-mint while it stays mounted, and a new src would reload the page.
+ */
+export function HtmlRenderDocument(props: {
+  readonly src: string;
+  readonly title: string;
+  readonly className?: string;
+}) {
+  const theme = useHtmlRenderTheme();
+  const frameRef = useRef<HTMLIFrameElement>(null);
+  const [src] = useState(() => `${props.src.split("#", 1)[0]}${htmlRenderThemeFragment(theme)}`);
+  const [loaded, setLoaded] = useState(false);
+  const postTheme = () => {
+    frameRef.current?.contentWindow?.postMessage(htmlRenderThemeMessage(theme), "*");
+  };
+  useEffect(postTheme, [theme]);
+  return (
+    <iframe
+      ref={frameRef}
+      src={src}
+      title={props.title}
+      // Never allow-same-origin: the opaque origin keeps the page out of the app's session.
+      sandbox="allow-scripts allow-forms allow-popups allow-modals"
+      loading="lazy"
+      onLoad={() => {
+        setLoaded(true);
+        // Covers a theme change that landed while the page was loading.
+        postTheme();
+      }}
+      // A frame whose color scheme differs from its document's paints an opaque
+      // canvas, so the blank document a frame starts with would flash white in
+      // dark mode. Once the page is in, its prefers-color-scheme follows the app.
+      className={cn("border-0 scheme-light", props.className)}
+      style={loaded ? { colorScheme: theme.appearance } : undefined}
+    />
+  );
+}
diff --git a/apps/web/src/components/files/FilePreviewPanel.tsx b/apps/web/src/components/files/FilePreviewPanel.tsx
index 8fff3edccc45..3caa82ade4c3 100644
--- a/apps/web/src/components/files/FilePreviewPanel.tsx
+++ b/apps/web/src/components/files/FilePreviewPanel.tsx
@@ -1,6 +1,5 @@
 import { Spinner } from "~/components/ui/spinner";
 import type {
-  ChatFileAttachment,
   EditorId,
   EnvironmentId,
   ResolvedKeybindingsConfig,
@@ -40,6 +39,7 @@ import { useWorkspaceMutationRefresh } from "~/hooks/useWorkspaceMutationRefresh
 import { resolveDiffThemeName } from "~/lib/diffRendering";
 import { PREFERRED_HIGHLIGHTER } from "~/lib/syntaxHighlighting";
 import { cn } from "~/lib/utils";
+import type { ChatFileAttachment } from "~/types";
 import { isPreviewSupportedInRuntime } from "~/previewStateStore";
 import { isAbsolutePath, resolvePathLinkTarget } from "~/terminal-links";
 import { ScrollArea } from "~/components/ui/scroll-area";
@@ -1193,6 +1193,7 @@ export default function FilePreviewPanel({
               mimeType={attachment.mimeType}
               sizeBytes={attachment.sizeBytes}
               asset={{ environmentId, attachmentId: attachment.id }}
+              htmlRender={attachment.htmlRender === true}
             />
           ) : relativePath && isVideo && absolutePath ? (
             <WorkspaceVideoPreview
diff --git a/apps/web/src/hooks/useHtmlRenderTheme.ts b/apps/web/src/hooks/useHtmlRenderTheme.ts
new file mode 100644
index 000000000000..d7492eb6f9b8
--- /dev/null
+++ b/apps/web/src/hooks/useHtmlRenderTheme.ts
@@ -0,0 +1,49 @@
+import { HTML_RENDER_DEFAULT_FONTS, htmlRenderTheme } from "@t3tools/shared/htmlRender";
+import { useMemo, useSyncExternalStore } from "react";
+
+import { appearanceFontStack } from "../appearanceFonts";
+import {
+  getStandardThemeColors,
+  getThemeColorsForMode,
+  getThemeDefinition,
+  resolveThemeHalf,
+  subscribeToCustomThemes,
+  type ThemeAppearance,
+  type ThemeHalves,
+  type ThemePreference,
+} from "../themePalette";
+import { useClientSettings } from "./useSettings";
+import { useTheme } from "./useTheme";
+
+/** The palette `applyTheme` paints for a preference, or the stock look when no theme applies. */
+function resolveActiveThemeColors(
+  theme: ThemePreference,
+  halves: ThemeHalves | null,
+  appearance: ThemeAppearance,
+) {
+  const definition = getThemeDefinition(resolveThemeHalf(theme, halves, appearance));
+  return definition === null
+    ? getStandardThemeColors(appearance)
+    : (getThemeColorsForMode(definition, appearance) ?? definition.colors);
+}
+
+/** The app's active theme and fonts, as handed to agent HTML renders. Stable until one changes. */
+export function useHtmlRenderTheme() {
+  const { theme, resolvedTheme, themeHalves } = useTheme();
+  // Custom and published palettes can be edited in place, under an unchanged preference.
+  const colors = useSyncExternalStore(
+    subscribeToCustomThemes,
+    () => resolveActiveThemeColors(theme, themeHalves, resolvedTheme),
+    () => getStandardThemeColors(resolvedTheme),
+  );
+  const sans = useClientSettings((settings) => settings.fontFamilySans);
+  const mono = useClientSettings((settings) => settings.fontFamilyCode);
+  return useMemo(
+    () =>
+      htmlRenderTheme(colors, resolvedTheme, {
+        sans: appearanceFontStack(sans, HTML_RENDER_DEFAULT_FONTS.sans),
+        mono: appearanceFontStack(mono, HTML_RENDER_DEFAULT_FONTS.mono),
+      }),
+    [colors, resolvedTheme, sans, mono],
+  );
+}
diff --git a/apps/web/src/rightPanelStore.ts b/apps/web/src/rightPanelStore.ts
index 49074700797c..ec645e62c409 100644
--- a/apps/web/src/rightPanelStore.ts
+++ b/apps/web/src/rightPanelStore.ts
@@ -8,17 +8,13 @@
  * workspace paths, and diff/files remain singleton surfaces.
  */
 import { scopedThreadKey, scopeThreadRef } from "@t3tools/client-runtime/environment";
-import {
-  EnvironmentId,
-  ThreadId,
-  type ChatFileAttachment,
-  type ScopedThreadRef,
-} from "@t3tools/contracts";
+import { EnvironmentId, ThreadId, type ScopedThreadRef } from "@t3tools/contracts";
 import { create } from "zustand";
 import { createJSONStorage, persist } from "zustand/middleware";
 
 import { resolveStorage } from "./lib/storage";
 import type { ThreadPanelPresentation } from "./rightPanelLayout";
+import type { ChatFileAttachment } from "./types";
 
 const RIGHT_PANEL_KINDS = [
   "diff",
diff --git a/apps/web/src/session-logic.test.ts b/apps/web/src/session-logic.test.ts
index c71cc4f33573..3b37c3ed0ff2 100644
--- a/apps/web/src/session-logic.test.ts
+++ b/apps/web/src/session-logic.test.ts
@@ -1211,6 +1211,125 @@ describe("native provider presentation in the v2 timeline", () => {
   });
 });
 
+describe("HTML renders in the timeline", () => {
+  const runId = RunId.make("render-run");
+  const at = (second: number) =>
+    DateTime.makeUnsafe(`2026-09-04T12:00:${String(second).padStart(2, "0")}.000Z`);
+  const base = (id: string, second: number) => ({
+    id: TurnItemId.make(id),
+    threadId: ThreadId.make("render-thread"),
+    runId,
+    nodeId: null,
+    providerThreadId: null,
+    providerTurnId: null,
+    nativeItemRef: null,
+    parentItemId: null,
+    ordinal: second,
+    status: "completed" as const,
+    title: null,
+    startedAt: at(second),
+    completedAt: at(second),
+    updatedAt: at(second),
+  });
+  const visible = (item: OrchestrationV2TurnItem): OrchestrationV2ProjectedTurnItem => ({
+    position: item.ordinal,
+    visibility: "local",
+    sourceThreadId: item.threadId,
+    sourceItemId: item.id,
+    item,
+  });
+  const htmlRender = { attachmentId: "render-thread-chart.html", title: "Chart", height: 420 };
+  const renderCall = (
+    status: OrchestrationV2TurnItem["status"],
+    output?: unknown,
+  ): OrchestrationV2TurnItem => ({
+    ...base("render", 2),
+    status,
+    type: "dynamic_tool",
+    toolName: "mcp__t3-code__html_render",
+    input: { title: "Chart", height: 420 },
+    ...(output === undefined ? {} : { output }),
+  });
+  const command = (id: string, second: number): OrchestrationV2TurnItem => ({
+    ...base(id, second),
+    type: "command_execution",
+    input: "vp test run",
+  });
+  const turn = (render: OrchestrationV2TurnItem) => {
+    const items: OrchestrationV2TurnItem[] = [
+      {
+        ...base("prompt", 0),
+        type: "user_message",
+        messageId: MessageId.make("prompt"),
+        inputIntent: "turn_start",
+        text: "Chart it",
+        createdBy: "user",
+        creationSource: "server",
+        attachments: [],
+      },
+      command("before", 1),
+      render,
+      command("after", 3),
+      {
+        ...base("reply", 4),
+        type: "assistant_message",
+        messageId: MessageId.make("reply"),
+        text: "Here it is.",
+        streaming: false,
+      },
+    ];
+    return deriveTimelineEntriesFromVisibleTurnItems({
+      visibleTurnItems: items.map(visible),
+      optimisticMessages: [],
+    });
+  };
+  const rowsFor = (entries: TimelineEntry[], expanded: boolean) =>
+    deriveMessagesTimelineRows({
+      timelineEntries: entries,
+      latestRun: {
+        runId,
+        status: "completed",
+        startedAt: DateTime.formatIso(at(0)),
+        completedAt: DateTime.formatIso(at(5)),
+      },
+      ...(expanded ? { expandedRunIds: new Set([runId]) } : {}),
+      isWorking: false,
+      activeTurnStartedAt: null,
+      turnDiffSummaries: [],
+      supportsConversationRollback: false,
+    }).map((row) => row.kind);
+
+  it("shows a completed render in place, above the reply, through the turn fold", () => {
+    const entries = turn(
+      renderCall("completed", { structuredContent: { htmlRender }, content: [] }),
+    );
+    expect(entries.find((entry) => entry.kind === "html-render")).toMatchObject({
+      id: "render",
+      runId,
+      htmlRender,
+    });
+    expect(rowsFor(entries, false)).toEqual(["message", "turn-fold", "html-render", "message"]);
+    expect(rowsFor(entries, true)).toEqual([
+      "message",
+      "turn-fold",
+      "work",
+      "html-render",
+      "work",
+      "message",
+    ]);
+  });
+
+  it.each([
+    ["running", "running", undefined],
+    ["failed", "failed", { content: [{ type: "text", text: "Invalid HTML" }], isError: true }],
+    ["errored", "completed", { structuredContent: { htmlRender }, isError: true }],
+  ] as const)("keeps a %s call in the work log", (_label, status, output) => {
+    const entries = turn(renderCall(status, output));
+    expect(entries.some((entry) => entry.kind === "html-render")).toBe(false);
+    expect(entries.find((entry) => entry.id === "render")?.kind).toBe("work");
+  });
+});
+
 describe("work-log failure policy (#7999/#7893)", () => {
   const toolEntry = (overrides: Record<string, unknown>) =>
     ({
diff --git a/apps/web/src/session-logic.ts b/apps/web/src/session-logic.ts
index 592eece2dce2..4f3e8513b5b5 100644
--- a/apps/web/src/session-logic.ts
+++ b/apps/web/src/session-logic.ts
@@ -20,6 +20,8 @@ import {
   formatReadToolLabel,
   formatSearchToolLabel,
 } from "@t3tools/shared/toolActivity";
+import type { HtmlRenderReference } from "@t3tools/shared/htmlRender";
+import { htmlRenderFromToolItem } from "@t3tools/shared/toolOutput";
 import {
   contextCompactionLabel,
   workEntryIndicatesToolFailure,
@@ -130,6 +132,14 @@ export type TimelineEntry = (
       readonly createdAt: string;
       readonly proposedPlan: ProposedPlan;
     }
+  | {
+      /** A page a completed `html_render` call published, shown where the call happened. */
+      readonly id: string;
+      readonly kind: "html-render";
+      readonly createdAt: string;
+      readonly runId: RunId | null;
+      readonly htmlRender: HtmlRenderReference;
+    }
   | {
       readonly id: string;
       readonly kind: "work";
@@ -685,6 +695,22 @@ export function deriveTimelineEntriesFromVisibleTurnItems(
       continue;
     }
 
+    const htmlRender =
+      item.type === "dynamic_tool" && item.status === "completed"
+        ? htmlRenderFromToolItem(item)
+        : undefined;
+    if (htmlRender !== undefined) {
+      entries.push({
+        id: item.id,
+        kind: "html-render",
+        createdAt,
+        runId: item.runId,
+        htmlRender,
+        ...attemptMetadata,
+      });
+      continue;
+    }
+
     if (STANDALONE_V2_ITEM_TYPES.has(item.type)) {
       entries.push({
         id: item.id,
diff --git a/apps/web/src/types.ts b/apps/web/src/types.ts
index ac7ecaf3834f..e4bc1eb9e012 100644
--- a/apps/web/src/types.ts
+++ b/apps/web/src/types.ts
@@ -49,6 +49,8 @@ export interface ChatImageAttachment extends ContractChatImageAttachment {
 export interface ChatFileAttachment extends ContractChatFileAttachment {
   readonly previewUrl?: string;
   readonly downloadable?: boolean;
+  /** A page an agent published with `html_render`; its viewer hands it the app theme. */
+  readonly htmlRender?: boolean;
 }
 
 // Attachment types this build does not know pass through with the contract
diff --git a/docs/user/html-renders.md b/docs/user/html-renders.md
new file mode 100644
index 000000000000..f59309cd914d
--- /dev/null
+++ b/docs/user/html-renders.md
@@ -0,0 +1,9 @@
+# Visual replies
+
+Agents can answer with a page instead of only text: a chart, table, diagram, image collage, or mockup. Ask for one ("show this as a chart", "make a collage of these screenshots") and the agent builds a self-contained HTML page, which appears in the thread above its written reply. It works with every provider, on web, desktop, and mobile.
+
+Pages use your current theme, including custom themes, and follow light and dark mode as you switch. Scripts run inside the page, but it is sandboxed away from T3 Code and your session. Use the expand button to open a page full size; from there you can view its source or save it.
+
+Agents can place local images in a page by file path. T3 Code embeds them when the page is published, so the page keeps working after the original files move or are deleted. Deleting the thread deletes its pages.
+
+Before publishing, agents check their work with screenshots from a small headless browser that T3 Code keeps for itself; it never uses a browser you installed. The first preview on a machine downloads it once (about 120 MB) into T3 Code's data folder, so that preview can take a minute. Pages publish without it.
diff --git a/packages/client-runtime/src/t3ToolSummary.ts b/packages/client-runtime/src/t3ToolSummary.ts
index c6b40e5a62ff..8d3a2fa54f06 100644
--- a/packages/client-runtime/src/t3ToolSummary.ts
+++ b/packages/client-runtime/src/t3ToolSummary.ts
@@ -395,6 +395,12 @@ export function summarizeT3ToolCalls(
     case "device":
       label = phrase("Used", "use", `device controls ${times}`);
       break;
+    case "html-preview":
+      label = phrase("Previewed", "preview", quantity(selected.length, "HTML page"));
+      break;
+    case "html-render":
+      label = phrase("Rendered", "render", quantity(selected.length, "HTML page"));
+      break;
     case "capabilities":
       label = phrase("Checked", "check", `orchestration capabilities ${times}`);
       break;
diff --git a/packages/shared/package.json b/packages/shared/package.json
index b67a205e5bb3..eafa6926fd17 100644
--- a/packages/shared/package.json
+++ b/packages/shared/package.json
@@ -111,6 +111,10 @@
       "types": "./src/toolOutput.ts",
       "import": "./src/toolOutput.ts"
     },
+    "./htmlRender": {
+      "types": "./src/htmlRender.ts",
+      "import": "./src/htmlRender.ts"
+    },
     "./favicon": {
       "types": "./src/favicon.ts",
       "import": "./src/favicon.ts"
diff --git a/packages/shared/src/htmlRender.test.ts b/packages/shared/src/htmlRender.test.ts
new file mode 100644
index 000000000000..616593d27875
--- /dev/null
+++ b/packages/shared/src/htmlRender.test.ts
@@ -0,0 +1,120 @@
+import { describe, expect, it } from "vite-plus/test";
+
+import {
+  htmlRenderFrameHeight,
+  htmlRenderReferencesEqual,
+  htmlRenderTheme,
+  htmlRenderThemeFragment,
+  injectHtmlRenderBootstrap,
+  readHtmlRenderReference,
+} from "./htmlRender.ts";
+import { T3_CODE_DARK_THEME_COLORS, T3_CODE_LIGHT_THEME_COLORS } from "./themePalettes.ts";
+import { htmlRenderFromToolItem } from "./toolOutput.ts";
+
+const reference = { attachmentId: "thread-abc-123.html", title: "Chart", height: 420 };
+
+describe("injectHtmlRenderBootstrap", () => {
+  it("puts the theme ahead of the page's own head content", () => {
+    const html =
+      "<!doctype html><html><head><style>:root{--background:red}</style></head><body>x</body></html>";
+    const injected = injectHtmlRenderBootstrap(html);
+    const themeAt = injected.indexOf('<style id="t3-theme">');
+    expect(themeAt).toBeGreaterThan(injected.indexOf("<head>"));
+    expect(themeAt).toBeLessThan(injected.indexOf(":root{--background:red}"));
+    expect(injected).toContain('<meta charset="utf-8">');
+    expect(injected).toContain('name="viewport"');
+  });
+
+  it("wraps fragments without a head and keeps existing meta tags", () => {
+    const fragment =
+      '<meta charset="utf-8"><meta name="viewport" content="width=device-width"><p>hi</p>';
+    const injected = injectHtmlRenderBootstrap(fragment);
+    expect(injected.startsWith("<!doctype html><head>")).toBe(true);
+    expect(injected.match(/charset/g)).toHaveLength(1);
+    expect(injected.match(/name="viewport"/g)).toHaveLength(1);
+    expect(injected.endsWith("<p>hi</p>")).toBe(true);
+  });
+});
+
+describe("htmlRenderTheme", () => {
+  it("exposes the brand accent as --accent and keeps the fragment decodable", () => {
+    const theme = htmlRenderTheme(T3_CODE_LIGHT_THEME_COLORS, "light");
+    expect(theme.variables["--accent"]).toBe(T3_CODE_LIGHT_THEME_COLORS.accent);
+    expect(theme.variables["--chart-1"]).toBe(T3_CODE_LIGHT_THEME_COLORS.accent);
+    expect(theme.variables["--chart-6"]).toBeDefined();
+    const fragment = htmlRenderThemeFragment(theme);
+    expect(JSON.parse(decodeURIComponent(fragment.slice("#t3-theme=".length)))).toEqual(theme);
+    expect(fragment).not.toContain("&");
+    expect(htmlRenderTheme(T3_CODE_DARK_THEME_COLORS, "dark").variables["--background"]).toBe(
+      T3_CODE_DARK_THEME_COLORS.canvas,
+    );
+  });
+});
+
+describe("readHtmlRenderReference", () => {
+  it("clamps height and rejects malformed references", () => {
+    expect(readHtmlRenderReference({ ...reference, height: 99_999 })?.height).toBe(2000);
+    expect(readHtmlRenderReference({ ...reference, title: "  " })?.title).toBe("HTML");
+    expect(readHtmlRenderReference({ ...reference, attachmentId: 4 })).toBeUndefined();
+    expect(readHtmlRenderReference({ ...reference, height: Number.NaN })).toBeUndefined();
+  });
+});
+
+describe("htmlRenderFromToolItem", () => {
+  const result = { htmlRender: reference, message: "Rendered above your reply." };
+
+  it("reads the reference from each provider's result envelope", () => {
+    for (const [toolName, output] of [
+      ["mcp__t3-code__html_render", [{ type: "text", text: JSON.stringify(result) }]],
+      ["t3-code.html_render", { structuredContent: result, content: [] }],
+      ["html_render", result],
+    ] as const) {
+      expect(htmlRenderFromToolItem({ toolName, output })).toEqual(reference);
+    }
+  });
+
+  it("ignores other tools and failed calls", () => {
+    expect(htmlRenderFromToolItem({ toolName: "mcp__t3-code__html_preview", output: result })).toBe(
+      undefined,
+    );
+    expect(htmlRenderFromToolItem({ toolName: "mcp__other__html_render", output: result })).toBe(
+      undefined,
+    );
+    expect(
+      htmlRenderFromToolItem({ toolName: "html_render", output: { ...result, isError: true } }),
+    ).toBeUndefined();
+  });
+});
+
+describe("htmlRenderFrameHeight", () => {
+  const measured = readHtmlRenderReference({
+    ...reference,
+    height: 1500,
+    heights: [
+      [728, 1403],
+      [390, 1290],
+      [1000, 1660],
+    ],
+  })!;
+
+  it("interpolates between measured widths and holds the ends", () => {
+    expect(measured.heights?.map(([width]) => width)).toEqual([390, 728, 1000]);
+    expect(htmlRenderFrameHeight(measured, 728)).toBe(1403);
+    expect(htmlRenderFrameHeight(measured, 559)).toBe(1347);
+    expect(htmlRenderFrameHeight(measured, 320)).toBe(1290);
+  });
+
+  it("never exceeds the agent's height and falls back to it without measurements", () => {
+    expect(htmlRenderFrameHeight(measured, 1400)).toBe(1500);
+    expect(htmlRenderFrameHeight(reference, 728)).toBe(reference.height);
+  });
+
+  it("drops a malformed table and compares tables by value", () => {
+    expect(readHtmlRenderReference({ ...reference, heights: [[728, "x"]] })?.heights).toBe(
+      undefined,
+    );
+    const copy = readHtmlRenderReference(JSON.parse(JSON.stringify(measured)))!;
+    expect(htmlRenderReferencesEqual(measured, copy)).toBe(true);
+    expect(htmlRenderReferencesEqual(measured, { ...copy, heights: [[390, 1290]] })).toBe(false);
+  });
+});
diff --git a/packages/shared/src/htmlRender.ts b/packages/shared/src/htmlRender.ts
new file mode 100644
index 000000000000..271868533dc4
--- /dev/null
+++ b/packages/shared/src/htmlRender.ts
@@ -0,0 +1,326 @@
+import {
+  T3_CODE_DARK_THEME_COLORS,
+  T3_CODE_LIGHT_THEME_COLORS,
+  type ThemeAppearance,
+  type ThemeColors,
+} from "./themePalettes.ts";
+
+/**
+ * Agent-authored HTML pages ("HTML renders") are self-contained documents an
+ * agent publishes into a thread with T3's `html_render` MCP tool. The server
+ * stores each one as a thread attachment with a small bootstrap injected into
+ * its head; clients show it in a sandboxed iframe (web, desktop) or WebView
+ * (mobile) and hand it the active theme as CSS custom properties.
+ */
+
+export const HTML_RENDER_TOOL_NAME = "html_render";
+export const HTML_RENDER_MIN_HEIGHT = 80;
+export const HTML_RENDER_MAX_HEIGHT = 2000;
+export const HTML_RENDER_MAX_TITLE_LENGTH = 200;
+
+/** What the `html_render` tool result carries so clients can show the page. */
+export interface HtmlRenderReference {
+  readonly attachmentId: string;
+  readonly title: string;
+  /** The agent's frame height in CSS pixels, and the cap on any measured height. */
+  readonly height: number;
+  /**
+   * `[width, contentHeight]` pairs the server measured at publish, ascending by
+   * width. Absent when the preview browser was not installed yet.
+   */
+  readonly heights?: ReadonlyArray<readonly [width: number, height: number]>;
+}
+
+/** Frame widths the server measures a page at, from phones to the wide chat setting. */
+export const HTML_RENDER_MEASURE_WIDTHS = [320, 375, 430, 520, 640, 728, 860, 1000, 1144] as const;
+
+/**
+ * The reply column's frame width at the default chat width. Agents preview at
+ * it, and it picks the measured height when a client cannot know its width.
+ */
+export const HTML_RENDER_COLUMN_WIDTH = 728;
+
+const MAX_MEASURED_HEIGHTS = 24;
+
+function readMeasuredHeights(value: unknown) {
+  if (!Array.isArray(value) || value.length === 0 || value.length > MAX_MEASURED_HEIGHTS) {
+    return undefined;
+  }
+  const heights = value.flatMap((entry) =>
+    Array.isArray(entry) &&
+    entry.length === 2 &&
+    Number.isInteger(entry[0]) &&
+    entry[0] >= 1 &&
+    entry[0] <= 10_000 &&
+    typeof entry[1] === "number" &&
+    Number.isFinite(entry[1])
+      ? [[entry[0] as number, clampHtmlRenderHeight(entry[1])] as const]
+      : [],
+  );
+  return heights.length === value.length
+    ? [...heights].sort((left, right) => left[0] - right[0])
+    : undefined;
+}
+
+export function readHtmlRenderReference(value: unknown): HtmlRenderReference | undefined {
+  if (typeof value !== "object" || value === null) return undefined;
+  const { attachmentId, title, height, heights } = value as Record<string, unknown>;
+  if (
+    typeof attachmentId !== "string" ||
+    attachmentId.length === 0 ||
+    attachmentId.length > 256 ||
+    typeof title !== "string" ||
+    typeof height !== "number" ||
+    !Number.isFinite(height)
+  ) {
+    return undefined;
+  }
+  const measured = readMeasuredHeights(heights);
+  return {
+    attachmentId,
+    title: title.trim().slice(0, HTML_RENDER_MAX_TITLE_LENGTH) || "HTML",
+    height: clampHtmlRenderHeight(height),
+    ...(measured === undefined ? {} : { heights: measured }),
+  };
+}
+
+/** Whether two references show the same page at the same sizes. */
+export function htmlRenderReferencesEqual(left: HtmlRenderReference, right: HtmlRenderReference) {
+  return (
+    left.attachmentId === right.attachmentId &&
+    left.title === right.title &&
+    left.height === right.height &&
+    (left.heights ?? []).length === (right.heights ?? []).length &&
+    (left.heights ?? []).every(
+      ([width, height], index) =>
+        right.heights?.[index]?.[0] === width && right.heights[index][1] === height,
+    )
+  );
+}
+
+/**
+ * The frame height for a page at a frame width: the measured content height,
+ * interpolated between measured widths and capped at the agent's height.
+ */
+export function htmlRenderFrameHeight(reference: HtmlRenderReference, width: number) {
+  const heights = reference.heights;
+  if (heights === undefined || heights.length === 0) return reference.height;
+  const above = heights.findIndex(([measuredWidth]) => measuredWidth >= width);
+  const [lowWidth, lowHeight] =
+    heights[Math.max(0, above === -1 ? heights.length - 1 : above - 1)]!;
+  const [highWidth, highHeight] = heights[above === -1 ? heights.length - 1 : above]!;
+  const ratio =
+    highWidth === lowWidth
+      ? 0
+      : Math.min(1, Math.max(0, (width - lowWidth) / (highWidth - lowWidth)));
+  const measured = Math.ceil(lowHeight + (highHeight - lowHeight) * ratio);
+  return clampHtmlRenderHeight(Math.min(reference.height, measured));
+}
+
+/** A readable download name: the title without characters file systems reject. */
+export function htmlRenderFileName(title: string) {
+  const name = title
+    .replace(/[\\/:*?"<>|\p{Cc}]+/gu, " ")
+    .replace(/\s+/g, " ")
+    .trim()
+    .slice(0, 120)
+    .trim();
+  return `${name || "Page"}.html`;
+}
+
+export function clampHtmlRenderHeight(height: number): number {
+  return Math.min(HTML_RENDER_MAX_HEIGHT, Math.max(HTML_RENDER_MIN_HEIGHT, Math.round(height)));
+}
+
+export interface HtmlRenderFonts {
+  readonly sans: string;
+  readonly mono: string;
+}
+
+export const HTML_RENDER_DEFAULT_FONTS: HtmlRenderFonts = {
+  sans: '-apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif',
+  // Concrete names only: some engines alias `ui-monospace` to the proportional UI font.
+  mono: '"SF Mono", "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace',
+};
+
+/**
+ * Fonts the server's headless browser lays pages out with. Arial-metric faces
+ * stand in for the system UI fonts readers see, so measured heights and
+ * preview screenshots wrap text close to how a client will.
+ */
+export const HTML_RENDER_MEASURE_FONTS: HtmlRenderFonts = {
+  sans: '"Liberation Sans", Arimo, Arial, Helvetica, sans-serif',
+  mono: '"Liberation Mono", Cousine, Menlo, Consolas, monospace',
+};
+
+/** The resolved theme a client hands an HTML render. */
+export interface HtmlRenderTheme {
+  readonly appearance: ThemeAppearance;
+  readonly variables: Readonly<Record<string, string>>;
+}
+
+// Roles themes cannot change (index.css keeps info/success fixed), plus a
+// categorical chart series after the theme's own accent.
+const FIXED_COLORS = {
+  light: {
+    success: "#10b981",
+    successForeground: "#047857",
+    info: "#3b82f6",
+    infoForeground: "#1d4ed8",
+    chart: ["#0d9488", "#d97706", "#9333ea", "#e11d48", "#65a30d"],
+  },
+  dark: {
+    success: "#10b981",
+    successForeground: "#34d399",
+    info: "#3b82f6",
+    infoForeground: "#60a5fa",
+    chart: ["#2dd4bf", "#fbbf24", "#c084fc", "#fb7185", "#a3e635"],
+  },
+} as const;
+
+/**
+ * Maps a theme palette to the variables HTML renders style against. Names
+ * follow the app's own tokens, except `--accent`, which is the theme's brand
+ * color here rather than the app's neutral hover surface.
+ */
+export function htmlRenderTheme(
+  colors: ThemeColors,
+  appearance: ThemeAppearance,
+  fonts: HtmlRenderFonts = HTML_RENDER_DEFAULT_FONTS,
+): HtmlRenderTheme {
+  const fixed = FIXED_COLORS[appearance];
+  return {
+    appearance,
+    variables: {
+      "--background": colors.canvas,
+      "--foreground": colors.text,
+      "--muted": colors.muted,
+      "--muted-foreground": colors.mutedForeground,
+      "--card": colors.surface,
+      "--card-foreground": colors.text,
+      "--popover": colors.surfaceOverlay,
+      "--popover-foreground": colors.text,
+      "--secondary": colors.secondary,
+      "--secondary-foreground": colors.secondaryForeground,
+      "--border": colors.border,
+      "--input": colors.input,
+      "--ring": colors.focus,
+      "--primary": colors.messageAction,
+      "--primary-foreground": colors.messageActionForeground,
+      "--accent": colors.accent,
+      "--accent-foreground": colors.accentForeground,
+      "--accent-surface": colors.accentSurface,
+      "--accent-surface-foreground": colors.accentSurfaceForeground,
+      "--destructive": colors.error,
+      "--destructive-foreground": colors.errorForeground,
+      "--destructive-surface": colors.errorSurface,
+      "--warning": colors.warning,
+      "--warning-foreground": colors.warningForeground,
+      "--warning-surface": colors.warningSurface,
+      "--success": fixed.success,
+      "--success-foreground": fixed.successForeground,
+      "--info": fixed.info,
+      "--info-foreground": fixed.infoForeground,
+      "--code-background": colors.codeBackground,
+      "--code-foreground": colors.codeForeground,
+      "--chart-1": colors.accent,
+      ...Object.fromEntries(fixed.chart.map((color, index) => [`--chart-${index + 2}`, color])),
+      "--radius": "0.625rem",
+      "--font-sans": fonts.sans,
+      "--font-mono": fonts.mono,
+    },
+  };
+}
+
+/** Agent-facing reference for the injected variables, used in tool descriptions. */
+export const HTML_RENDER_THEME_GUIDE = [
+  "T3 injects its active theme as CSS custom properties on :root, and they follow the user's theme and light/dark mode live:",
+  "--background (page background, identical to the thread around the frame), --foreground, --muted, --muted-foreground,",
+  "--card, --card-foreground, --popover, --popover-foreground, --secondary, --secondary-foreground, --border, --input, --ring,",
+  "--primary, --primary-foreground (solid buttons), --accent, --accent-foreground (brand accent), --accent-surface, --accent-surface-foreground,",
+  "--destructive, --destructive-foreground, --destructive-surface, --warning, --warning-foreground, --warning-surface,",
+  "--success, --success-foreground, --info, --info-foreground, --code-background, --code-foreground,",
+  "--chart-1 … --chart-6 (categorical series for charts), --radius, --font-sans, --font-mono.",
+  "The base stylesheet sets html background/color/font from these, body margin to 0, and hides the page's scrollbar; your own CSS overrides it.",
+].join(" ");
+
+/** Agent-facing layout rules for a page that sits inside a reply. */
+export const HTML_RENDER_LAYOUT_GUIDE = [
+  `The frame is borderless on the thread's background, as wide as the reply column (${HTML_RENDER_COLUMN_WIDTH}px on desktop by default, wider if the reader widens chat, about 360px on phones), and its left edge lines up with your reply text.`,
+  "Use a fluid width with no horizontal padding on the outermost element, and no outer card, border, or banner title: the page is part of your reply.",
+  "Give charts fixed pixel heights rather than heights that scale with width.",
+].join(" ");
+
+export const HTML_RENDER_THEME_MESSAGE_TYPE = "t3-html-render-theme";
+
+const THEME_FRAGMENT_KEY = "t3-theme";
+
+/** URL fragment that hands a render its theme before first paint. */
+export function htmlRenderThemeFragment(theme: HtmlRenderTheme): string {
+  return `#${THEME_FRAGMENT_KEY}=${encodeURIComponent(JSON.stringify(theme))}`;
+}
+
+/** The message a client posts into a mounted render when the theme changes. */
+export function htmlRenderThemeMessage(theme: HtmlRenderTheme) {
+  return { type: HTML_RENDER_THEME_MESSAGE_TYPE, theme };
+}
+
+// The frame scrolls a page taller than itself, but a scrollbar inside the
+// reply reads as a box within the thread, so it stays hidden.
+const BASE_CSS =
+  "html{background:var(--background);color:var(--foreground);font-family:var(--font-sans);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;scrollbar-width:none}" +
+  "html::-webkit-scrollbar{display:none}body{margin:0}code,kbd,pre,samp{font-family:var(--font-mono)}";
+
+function rootRule(theme: HtmlRenderTheme): string {
+  const declarations = Object.entries(theme.variables)
+    .map(([name, value]) => `${name}:${value};`)
+    .join("");
+  return `:root{color-scheme:${theme.appearance};${declarations}}`;
+}
+
+// Runs synchronously in <head>, before the page's own styles and body, so the
+// first paint is already themed. It rewrites its own <style> element rather
+// than setting inline properties, so a page's later `:root` rules still win,
+// then drops the fragment so a page's own hash routing never sees it.
+const BOOTSTRAP_SCRIPT = `(function(){var s=document.getElementById("t3-theme");if(!s)return;var b=${JSON.stringify(BASE_CSS)};function a(t){if(!t||typeof t!=="object"||!t.variables||typeof t.variables!=="object")return;var c=":root{color-scheme:"+(t.appearance==="light"?"light":"dark")+";";for(var k in t.variables){if(/^--[a-z0-9-]+$/.test(k))c+=k+":"+String(t.variables[k]).replace(/[;{}<>]/g,"")+";";}s.textContent=c+"}"+b;}try{var m=/[#&]${THEME_FRAGMENT_KEY}=([^&]*)/.exec(location.hash);if(m){a(JSON.parse(decodeURIComponent(m[1])));history.replaceState(history.state,"",location.pathname+location.search);}}catch(e){}window.addEventListener("message",function(e){var d=e.data;if(d&&d.type===${JSON.stringify(HTML_RENDER_THEME_MESSAGE_TYPE)})a(d.theme);});})();`;
+
+function bootstrapMarkup(html: string): string {
+  const dark = htmlRenderTheme(T3_CODE_DARK_THEME_COLORS, "dark");
+  const light = htmlRenderTheme(T3_CODE_LIGHT_THEME_COLORS, "light");
+  // Without a client-provided theme (a direct download, the headless preview
+  // without a fragment) the page follows the OS appearance.
+  const defaultCss = `${rootRule(dark)}@media (prefers-color-scheme: light){${rootRule(light)}}${BASE_CSS}`;
+  const head = html.slice(0, 4096);
+  return [
+    /<meta\s[^>]*charset/i.test(head) ? "" : '<meta charset="utf-8">',
+    /<meta\s[^>]*name\s*=\s*["']?viewport/i.test(html)
+      ? ""
+      : '<meta name="viewport" content="width=device-width, initial-scale=1">',
+    `<style id="t3-theme">${defaultCss}</style>`,
+    `<script>${BOOTSTRAP_SCRIPT}</script>`,
+  ].join("");
+}
+
+/**
+ * Inserts the theme bootstrap at the start of the document head, so a page's
+ * own styles and scripts come after it.
+ */
+export function injectHtmlRenderBootstrap(html: string): string {
+  const markup = bootstrapMarkup(html);
+  const headOpen = /<head(?:\s[^>]*)?>/i.exec(html);
+  if (headOpen) {
+    const at = headOpen.index + headOpen[0].length;
+    return html.slice(0, at) + markup + html.slice(at);
+  }
+  const htmlOpen = /<html(?:\s[^>]*)?>/i.exec(html);
+  if (htmlOpen) {
+    const at = htmlOpen.index + htmlOpen[0].length;
+    return `${html.slice(0, at)}<head>${markup}</head>${html.slice(at)}`;
+  }
+  const doctype = /^\s*<!doctype[^>]*>/i.exec(html);
+  if (doctype) {
+    const at = doctype[0].length;
+    return `${html.slice(0, at)}<head>${markup}</head>${html.slice(at)}`;
+  }
+  return `<!doctype html><head>${markup}</head>${html}`;
+}
diff --git a/packages/shared/src/t3McpToolPresentation.ts b/packages/shared/src/t3McpToolPresentation.ts
index d85104cf4bc1..ff3e9ef404e7 100644
--- a/packages/shared/src/t3McpToolPresentation.ts
+++ b/packages/shared/src/t3McpToolPresentation.ts
@@ -58,7 +58,9 @@ export type T3McpToolSummaryAction =
   | "watch-pr"
   | "unwatch-pr"
   | "browser"
-  | "device";
+  | "device"
+  | "html-preview"
+  | "html-render";
 
 export interface T3McpToolDefinition {
   readonly displayName: string;
@@ -284,6 +286,8 @@ const T3_MCP_TOOLS: Readonly<Record<string, T3McpToolDefinition>> = {
     "attachment-discard",
   ),
   t3_thread_send_attachments: tool(["Send", "Sending", "Sent", "attachments"], "attachment-send"),
+  html_preview: tool(["Preview", "Previewing", "Previewed", "an HTML page"], "html-preview"),
+  html_render: tool(["Render", "Rendering", "Rendered", "an HTML page"], "html-render"),
 };
 
 /**
@@ -327,6 +331,12 @@ function resolveT3McpToolName(value: string): string | null {
   return Object.hasOwn(T3_MCP_TOOLS, candidate) ? candidate : null;
 }
 
+/** The bare T3 tool name (`html_render`) for any provider's spelling of it. */
+export function resolveT3McpToolId(toolName: string | null | undefined): string | null {
+  const name = toolName == null ? null : resolveT3McpToolName(toolName);
+  return name !== null && Object.hasOwn(T3_MCP_TOOLS, name) ? name : null;
+}
+
 export function resolveT3McpToolDefinition(
   toolName: string | null | undefined,
 ): T3McpToolDefinition | null {
diff --git a/packages/shared/src/toolOutput.ts b/packages/shared/src/toolOutput.ts
index 255fcbf47163..3eff550fd66b 100644
--- a/packages/shared/src/toolOutput.ts
+++ b/packages/shared/src/toolOutput.ts
@@ -1,5 +1,12 @@
 import * as Predicate from "effect/Predicate";
 
+import {
+  HTML_RENDER_TOOL_NAME,
+  readHtmlRenderReference,
+  type HtmlRenderReference,
+} from "./htmlRender.ts";
+import { resolveT3McpToolId } from "./t3McpToolPresentation.ts";
+
 const MAX_PARSED_BYTES = 16_384;
 const MAX_METADATA_BYTES = 8_192;
 const MAX_ID_LENGTH = 256;
@@ -27,6 +34,7 @@ interface CompactToolOutput {
   taskId?: string;
   scheduledTaskId?: string;
   status?: "rolled_back";
+  htmlRender?: HtmlRenderReference;
   thread?: { threadId: string };
   threads?: Array<{ threadId?: string; status?: "rolled_back" }>;
 }
@@ -110,6 +118,8 @@ export function compactDynamicToolOutput(value: unknown): CompactToolOutput | un
       if (id !== undefined) output[key] = id;
     }
     if (data.status === "rolled_back") output.status = "rolled_back";
+    const htmlRender = readHtmlRenderReference(data.htmlRender);
+    if (htmlRender !== undefined) output.htmlRender = htmlRender;
     const nestedThreadId = Predicate.isObject(data.thread)
       ? boundedId(data.thread.threadId)
       : undefined;
@@ -153,6 +163,16 @@ export function compactDynamicToolOutput(value: unknown): CompactToolOutput | un
   return Object.keys(output).length === 0 ? undefined : output;
 }
 
+/** The page a completed `html_render` tool call published, if this item is one. */
+export function htmlRenderFromToolItem(item: {
+  readonly toolName: string | null | undefined;
+  readonly output?: unknown;
+}): HtmlRenderReference | undefined {
+  if (resolveT3McpToolId(item.toolName) !== HTML_RENDER_TOOL_NAME) return undefined;
+  const output = compactDynamicToolOutput(item.output);
+  return output?.isError ? undefined : output?.htmlRender;
+}
+
 /** Some providers report completion even when command output describes a failure. */
 export function toolOutputIndicatesFailure(text: string): boolean {
   return (