diff --git a/src-tauri/src/acp/connection.rs b/src-tauri/src/acp/connection.rs
index 656a127b8e..7cbe8c8b7f 100644
--- a/src-tauri/src/acp/connection.rs
+++ b/src-tauri/src/acp/connection.rs
@@ -2951,6 +2951,8 @@ pub async fn spawn_agent_connection(
             // companion's ask socket to close (which a reparented/hard-killed
             // agent may never do); the dropped sender declines the tool cleanly.
             inj.questions.cancel_questions_by_parent(&conn_id).await;
+            // Same reclaim for a parked `render_page` answer.
+            inj.renders.cancel_render_pages_by_parent(&conn_id).await;
             // Likewise reclaim a parked Grok `exit_plan_mode` approval; the
             // dropped sender replies disconnect so grok keeps plan mode active.
             inj.plan_approvals
@@ -7687,6 +7689,10 @@ pub struct DelegationInjection {
     /// of the three is on, and the companion's `--features` lists `ask` to expose
     /// the `ask_user_question` tool.
     pub ask: crate::acp::question::QuestionRuntimeConfig,
+    /// Hot-swappable "is render-page enabled?" flag. Read at injection time
+    /// alongside the others so `codeg-mcp` is injected when ANY is on, and the
+    /// companion's `--features` lists `render` to expose the `render_page` tool.
+    pub render: crate::acp::render_page::RenderPageRuntimeConfig,
     /// Hot-swappable "is get-session-info enabled?" flag. Read at injection time
     /// alongside the other three so `codeg-mcp` is injected when ANY of the four
     /// is on, and the companion's `--features` lists `sessions` to expose the
@@ -7715,6 +7721,11 @@ pub struct DelegationInjection {
     /// the delegation `broker.cancel_by_parent` cleanup. Shares the same backing
     /// `ConnectionManager` as the listener's question lookup.
     pub questions: Arc<dyn crate::acp::question::SessionQuestionAccess>,
+    /// Rendered-page registry handle for the teardown cascade — the awaiting-
+    /// answer half of `render_page` parks a listener round-trip exactly like a
+    /// pending ask, so the same sweeps (`run_connection` cleanup guard, turn
+    /// exit, steer, cancel) call `cancel_render_pages_by_parent` through this.
+    pub renders: Arc<dyn crate::acp::render_page::SessionRenderPageAccess>,
     /// Plan-approval registry handle for Grok's `exit_plan_mode` ext bridge.
     /// Unlike delegation / ask / feedback this is NOT a codeg-mcp feature — it is
     /// Grok's native plan mode — so it has no runtime on/off flag and is always
@@ -7813,6 +7824,10 @@ struct CompanionFeatureFlags {
     delegation: bool,
     feedback: bool,
     ask: bool,
+    /// `render_page`, gated by its own setting. Its own flag, not folded into
+    /// `ask`: the ask card and the agent-authored page are different effects on
+    /// the user's chat, and settings describe effects.
+    render: bool,
     sessions: bool,
     /// Per-spawn (task-engine launches only), not a settings toggle — on its own
     /// it still injects the companion so a task session always has its reporting
@@ -7860,6 +7875,9 @@ fn companion_features_arg(flags: CompanionFeatureFlags) -> Option<String> {
     if flags.ask {
         features.push("ask");
     }
+    if flags.render {
+        features.push("render");
+    }
     if flags.sessions {
         features.push("sessions");
     }
@@ -7999,6 +8017,7 @@ where
         delegation: delegation_enabled,
         feedback: feedback_enabled,
         ask: injection.ask.is_enabled().await,
+        render: injection.render.is_enabled().await,
         sessions: injection.sessions.is_enabled().await,
         tasks: groups.tasks,
         result: groups.result,
@@ -8031,7 +8050,7 @@ where
         tracing::warn!(
             "[delegation][WARN] codeg-mcp companion binary not found (checked CODEG_MCP_BIN, \
              exe sibling, and PATH); skipping delegate_to_agent / check_user_feedback / \
-             ask_user_question / get_session_info tool injection for connection \
+             ask_user_question / render_page / get_session_info tool injection for connection \
              {parent_connection_id}. Reinstall codeg or set CODEG_MCP_BIN to fix."
         );
         return None;
@@ -8310,7 +8329,14 @@ async fn run_connection(
     // pre-bridge rendering.
     let native_ask_access = delegation_injection
         .as_ref()
-        .map(|inj| (Arc::clone(&inj.questions), inj.ask.clone()));
+        .map(|inj| {
+            (
+                Arc::clone(&inj.questions),
+                inj.ask.clone(),
+                Arc::clone(&inj.renders),
+                inj.render.clone(),
+            )
+        });
     let grok_ask_conn_id = connection_id.clone();
     // Grok `exit_plan_mode` bridge access — always wired in production (native
     // plan mode, no feature flag). `None` only on the test paths that spin up
@@ -8387,7 +8413,7 @@ async fn run_connection(
                     // An approval gating codeg's OWN ask tool is a dialog asking
                     // permission to show a dialog; allow it so the user sees only
                     // the interactive question card (see
-                    // `codeg_ask_auto_allow_option`).
+                    // `codeg_dialog_auto_allow_option`).
                     let responder =
                         match try_auto_allow_codeg_ask(&perm_ask_access, &req, responder).await {
                             Ok(()) => return Ok(()),
@@ -9932,6 +9958,18 @@ struct GrokExitPlanModeRequest(serde_json::Value);
 #[serde(transparent)]
 struct CodexElicitationRequest(serde_json::Value);
 
+/// The interactive-question plumbing a native bridge (grok's
+/// `_x.ai/ask_user_question`, codex's `elicitation/create`, the render_page
+/// mirror) needs: the shared question and render-page access handles, each with
+/// its runtime toggle. Carried as `Option` so a connection built without them
+/// keeps the pre-bridge fallback behavior.
+type NativeAskAccess = (
+    Arc<dyn crate::acp::question::SessionQuestionAccess>,
+    crate::acp::question::QuestionRuntimeConfig,
+    Arc<dyn crate::acp::render_page::SessionRenderPageAccess>,
+    crate::acp::render_page::RenderPageRuntimeConfig,
+);
+
 /// Bridge grok's native `_x.ai/ask_user_question` ext request into codeg's
 /// interactive question card. Grok blocks on the reply, so codeg registers the
 /// questions through the shared [`crate::acp::question::SessionQuestionAccess`] —
@@ -9942,17 +9980,14 @@ struct CodexElicitationRequest(serde_json::Value);
 /// back to its inert fire-and-forget rendering — exactly the pre-bridge behavior,
 /// so no path here can regress it.
 async fn handle_grok_ask_user_question(
-    access: &Option<(
-        Arc<dyn crate::acp::question::SessionQuestionAccess>,
-        crate::acp::question::QuestionRuntimeConfig,
-    )>,
+    access: &Option<NativeAskAccess>,
     connection_id: &str,
     state: &Arc<RwLock<SessionState>>,
     emitter: &EventEmitter,
     req: GrokAskUserQuestionRequest,
     responder: Responder<serde_json::Value>,
 ) {
-    let Some((questions, ask_cfg)) = access else {
+    let Some((questions, ask_cfg, ..)) = access else {
         let _ = responder.respond_with_internal_error("ask_user_question bridge unavailable");
         return;
     };
@@ -10041,13 +10076,26 @@ async fn handle_grok_ask_user_question(
 /// only gating codeg's OWN `ask_user_question` companion tool, or `None` to
 /// leave the request on the ordinary approval-card path.
 ///
+/// Which of codeg-mcp's own dialog tools a permission request is gating:
+/// [`crate::acp::question::is_codeg_ask_tool_name`] and
+/// [`crate::acp::render_page::is_codeg_render_tool_name`] each answer for one.
+/// The distinction matters for the kill switch below — each tool is only
+/// auto-allowed while ITS feature is on, since each is only exposed to the
+/// agent while it is.
+#[derive(Clone, Copy, PartialEq, Eq, Debug)]
+enum CodegDialogTool {
+    Ask,
+    Render,
+}
+
 /// An agent whose permission mode consults the user before every MCP tool call
 /// (claude-agent-acp's default) gates the ask tool too, so asking the user a
 /// question used to cost TWO dialogs: a raw "run mcp__codeg-mcp__ask_user_question?"
 /// approval dumping the questions as JSON, and only after "Yes" the real
 /// interactive card. The first one carries no decision the second doesn't — see
 /// [`crate::acp::question::is_codeg_ask_tool_name`] for why answering it is the
-/// user's consent either way.
+/// user's consent either way. `render_page` is in the same boat: the page (and
+/// for a waiting page the answer card) IS the dialog.
 ///
 /// The tool is identified by NAME, read from the two places a host puts it:
 /// `toolCall.title` (claude-agent-acp's `toolInfoFromToolUse` falls through to
@@ -10061,12 +10109,38 @@ async fn handle_grok_ask_user_question(
 /// durable permission rule into the user's own agent settings — a decision that
 /// outlives this turn and this connection, so it stays theirs to make. With no
 /// such option (an agent that offers only "always"), `None` keeps today's card.
-fn codeg_ask_auto_allow_option(req: &RequestPermissionRequest) -> Option<String> {
-    codeg_tool_auto_allow_option(req, crate::acp::question::is_codeg_ask_tool_name)
+fn codeg_dialog_auto_allow_option(
+    req: &RequestPermissionRequest,
+) -> Option<(CodegDialogTool, String)> {
+    let permission_title = crate::acp::air_contract::permission_record(req.meta.as_ref())
+        .and_then(|p| p.get("title"))
+        .and_then(serde_json::Value::as_str);
+    let titles = [req.tool_call.fields.title.as_deref(), permission_title];
+    let kind = if titles
+        .into_iter()
+        .flatten()
+        .any(crate::acp::question::is_codeg_ask_tool_name)
+    {
+        CodegDialogTool::Ask
+    } else if titles
+        .into_iter()
+        .flatten()
+        .any(crate::acp::render_page::is_codeg_render_tool_name)
+    {
+        CodegDialogTool::Render
+    } else {
+        return None;
+    };
+    let option_id = req
+        .options
+        .iter()
+        .find(|opt| opt.kind == PermissionOptionKind::AllowOnce)
+        .map(|opt| opt.option_id.to_string())?;
+    Some((kind, option_id))
 }
 
 /// The `allow_once` option of a request gating the codeg-mcp tool `is_tool`
-/// names, as [`codeg_ask_auto_allow_option`] reads it.
+/// names, as [`codeg_submit_auto_allow_option`] reads it.
 fn codeg_tool_auto_allow_option(
     req: &RequestPermissionRequest,
     is_tool: fn(&str) -> bool,
@@ -10081,10 +10155,12 @@ fn codeg_tool_auto_allow_option(
     if !is_it {
         return None;
     }
-    req.options
+    let option_id = req
+        .options
         .iter()
         .find(|opt| opt.kind == PermissionOptionKind::AllowOnce)
-        .map(|opt| opt.option_id.to_string())
+        .map(|opt| opt.option_id.to_string())?;
+    Some(option_id)
 }
 
 /// The option that allows a request gating `submit_result` — on a connection
@@ -10126,41 +10202,42 @@ async fn try_auto_allow_codeg_submit(
     Ok(())
 }
 
-/// Answer a permission request that is merely gating codeg's own ask tool, so
-/// the interactive question card is the only thing the user ever sees.
+/// Answer a permission request that is merely gating one of codeg's own dialog
+/// tools, so the interactive card is the only thing the user ever sees.
 ///
 /// `Err(responder)` hands the request back for the ordinary permission path —
 /// the outcome for every other tool, and the deliberate fallback whenever the
-/// auto-allow cannot be taken (the ask feature is off, or the agent offered no
-/// allow-once option).
-// `result_large_err`: agent-client-protocol's `Responder` (since 2.x) is past
-// clippy's size limit, but this `Err` is the responder handed back once per
-// permission request, not an error bubbled through `?` — boxing it would only
-// add an allocation.
+/// auto-allow cannot be taken (the tool's own feature is off, or the agent
+/// offered no allow-once option).
+// `result_large_err`: agent-client-protocol 2.x's `Responder` is past clippy's
+// size limit, but this `Err` is the responder handed back once per permission
+// request, not an error bubbled through `?` — boxing it would only add an
+// allocation.
 #[allow(clippy::result_large_err)]
 async fn try_auto_allow_codeg_ask(
-    access: &Option<(
-        Arc<dyn crate::acp::question::SessionQuestionAccess>,
-        crate::acp::question::QuestionRuntimeConfig,
-    )>,
+    access: &Option<NativeAskAccess>,
     req: &RequestPermissionRequest,
     responder: Responder<RequestPermissionResponse>,
 ) -> Result<(), Responder<RequestPermissionResponse>> {
-    let Some(option_id) = codeg_ask_auto_allow_option(req) else {
+    let Some((kind, option_id)) = codeg_dialog_auto_allow_option(req) else {
         return Err(responder);
     };
-    // Same kill switch as the ask tool itself (and as `try_bridge_pi_select_ask`):
-    // with the feature off codeg-mcp never exposed `ask_user_question`, so a
-    // request naming it is not the tool this shortcut is allowed to speak for.
-    let Some((_, ask_cfg)) = access else {
+    // Same kill switch as each tool itself (and as `try_bridge_pi_select_ask`):
+    // with the feature off codeg-mcp never exposed the tool, so a request
+    // naming it is not the tool this shortcut is allowed to speak for.
+    let Some((_, ask_cfg, _, render_cfg)) = access else {
         return Err(responder);
     };
-    if !ask_cfg.is_enabled().await {
+    let (tool_name, enabled) = match kind {
+        CodegDialogTool::Ask => ("ask_user_question", ask_cfg.is_enabled().await),
+        CodegDialogTool::Render => ("render_page", render_cfg.is_enabled().await),
+    };
+    if !enabled {
         return Err(responder);
     }
     tracing::debug!(
-        "[ACP] auto-allowing the permission request for codeg's own ask_user_question tool \
-         (option {option_id}); the interactive question card is the actual prompt"
+        "[ACP] auto-allowing the permission request for codeg's own {tool_name} tool \
+         (option {option_id}); the interactive card is the actual prompt"
     );
     let _ = responder.respond(RequestPermissionResponse::new(
         RequestPermissionOutcome::Selected(SelectedPermissionOutcome::new(option_id)),
@@ -10194,10 +10271,7 @@ async fn try_auto_allow_codeg_ask(
 // Same `Err` hand-back as `try_auto_allow_codeg_ask`; see its allow note.
 #[allow(clippy::result_large_err)]
 async fn try_bridge_pi_select_ask(
-    access: &Option<(
-        Arc<dyn crate::acp::question::SessionQuestionAccess>,
-        crate::acp::question::QuestionRuntimeConfig,
-    )>,
+    access: &Option<NativeAskAccess>,
     connection_id: &str,
     state: &Arc<RwLock<SessionState>>,
     emitter: &EventEmitter,
@@ -10213,7 +10287,7 @@ async fn try_bridge_pi_select_ask(
     if !tool_call_id.starts_with(crate::acp::question::PI_EXTENSION_UI_ID_PREFIX) {
         return Err(responder);
     }
-    let Some((questions, ask_cfg)) = access else {
+    let Some((questions, ask_cfg, ..)) = access else {
         return Err(responder);
     };
     // Same kill switch as the codeg-mcp ask tool: when the feature is off, the
@@ -10357,10 +10431,7 @@ async fn try_bridge_pi_select_ask(
 // Same `Err` hand-back as `try_auto_allow_codeg_ask`; see its allow note.
 #[allow(clippy::result_large_err)]
 async fn try_bridge_antigravity_ask(
-    access: &Option<(
-        Arc<dyn crate::acp::question::SessionQuestionAccess>,
-        crate::acp::question::QuestionRuntimeConfig,
-    )>,
+    access: &Option<NativeAskAccess>,
     connection_id: &str,
     state: &Arc<RwLock<SessionState>>,
     emitter: &EventEmitter,
@@ -10374,7 +10445,7 @@ async fn try_bridge_antigravity_ask(
     {
         return Err(responder);
     }
-    let Some((questions, ask_cfg)) = access else {
+    let Some((questions, ask_cfg, ..)) = access else {
         return Err(responder);
     };
     // Same kill switch as the codeg-mcp ask tool and every other native ask
@@ -10578,10 +10649,7 @@ async fn handle_grok_exit_plan_mode(
 /// dispatch loop, reply in Cursor's option-id envelope. Early returns use
 /// `skipped` so the agent continues instead of hanging on `-32601`.
 async fn handle_cursor_ask_question(
-    access: &Option<(
-        Arc<dyn crate::acp::question::SessionQuestionAccess>,
-        crate::acp::question::QuestionRuntimeConfig,
-    )>,
+    access: &Option<NativeAskAccess>,
     connection_id: &str,
     state: &Arc<RwLock<SessionState>>,
     emitter: &EventEmitter,
@@ -10596,7 +10664,7 @@ async fn handle_cursor_ask_question(
     // doubles as "the user dismissed the card", and an agent that can't tell
     // that apart from "this host never showed it" will proceed as if the user
     // had a say. The reason text is structural — never any of the payload.
-    let Some((questions, ask_cfg)) = access else {
+    let Some((questions, ask_cfg, ..)) = access else {
         let _ = responder.respond(crate::acp::cursor_ext::cursor_ask_skip_response_with_reason(
             "the host's question bridge is unavailable; the user was not asked",
         ));
@@ -10755,10 +10823,7 @@ fn handle_cursor_generate_image(
 #[allow(clippy::too_many_arguments)]
 async fn handle_elicitation_request(
     cx: &ConnectionTo<Agent>,
-    access: &Option<(
-        Arc<dyn crate::acp::question::SessionQuestionAccess>,
-        crate::acp::question::QuestionRuntimeConfig,
-    )>,
+    access: &Option<NativeAskAccess>,
     perms: &PendingPermissions,
     state: &Arc<RwLock<SessionState>>,
     emitter: &EventEmitter,
@@ -10896,7 +10961,7 @@ async fn handle_elicitation_request(
         // Question-style (codex `request_user_input`, generic MCP forms):
         // bridge into the same ask card as the codeg-mcp ask tool.
         crate::acp::question::ElicitationPlan::Questions(questions) => {
-            let Some((question_access, ask_cfg)) = access else {
+            let Some((question_access, ask_cfg, ..)) = access else {
                 let _ = responder.respond(unanswered());
                 return;
             };
@@ -15115,6 +15180,11 @@ async fn run_conversation_loop(
                             // background.
                             if let Some(inj) = delegation_injection {
                                 inj.questions.cancel_questions_by_parent(conn_id).await;
+                                // `render_page` answers ride the same MCP call
+                                // channel, so they get the same turn-exit sweep.
+                                inj.renders
+                                    .cancel_render_pages_by_parent(conn_id)
+                                    .await;
                             }
                             // Cascade-cancel any pending delegations whenever
                             // the parent's turn ended for a reason other than
@@ -15309,6 +15379,11 @@ async fn run_conversation_loop(
                                     // decline beside the steer.
                                     if let Some(inj) = delegation_injection {
                                         inj.questions.cancel_questions_by_parent(conn_id).await;
+                                        // A parked `render_page` answer is
+                                        // dropped by the redirect too.
+                                        inj.renders
+                                            .cancel_render_pages_by_parent(conn_id)
+                                            .await;
                                     }
                                     let outcome = send_steer_request(&cx, &sid, &blocks).await;
                                     // A steered message still lands in the
@@ -15459,14 +15534,19 @@ async fn run_conversation_loop(
                                         // Cancel keeps the connection alive. Without
                                         // this the entry lingers, and the
                                         // one-pending-per-connection guard in
-                                        // `register_{question,plan_approval}` then
-                                        // silently rejects the NEXT one on this
-                                        // connection (its card never shows). Idempotent
-                                        // with the cleanup-guard drain (empty map ->
-                                        // no-op); the dropped sender declines the tool /
-                                        // replies disconnect, exactly like the
-                                        // permission drain above.
+                                        // `register_{question,plan_approval,render_page}`
+                                        // then silently rejects the NEXT one on
+                                        // this connection (its card never
+                                        // shows). Idempotent with the
+                                        // cleanup-guard drain (empty map ->
+                                        // no-op); the dropped sender declines
+                                        // the tool / replies disconnect,
+                                        // exactly like the permission drain
+                                        // above.
                                         inj.questions.cancel_questions_by_parent(conn_id).await;
+                                        inj.renders
+                                            .cancel_render_pages_by_parent(conn_id)
+                                            .await;
                                         inj.plan_approvals
                                             .cancel_plan_approvals_by_parent(conn_id)
                                             .await;
@@ -23606,8 +23686,8 @@ async fn close_grok_agent_turn(
     true
 }
 
-/// Answer, declined, a question or plan approval an agent-initiated turn is
-/// parked on, once codeg has ended that turn early (Stop, or a prompt that has
+/// Answer, declined, a question, rendered-page answer or plan approval an
+/// agent-initiated turn is parked on, once codeg has ended that turn early (Stop, or a prompt that has
 /// to run next). Both cards close with the turn, so nothing could ever answer
 /// them, and Grok would stay blocked — holding the one-per-connection slot
 /// every later ask needs, and, when a prompt is queued behind the turn, that
@@ -23618,6 +23698,7 @@ async fn cancel_grok_agent_turn_asks(
 ) {
     if let Some(inj) = delegation_injection {
         inj.questions.cancel_questions_by_parent(conn_id).await;
+        inj.renders.cancel_render_pages_by_parent(conn_id).await;
         inj.plan_approvals
             .cancel_plan_approvals_by_parent(conn_id)
             .await;
@@ -26638,6 +26719,28 @@ mod tests {
         async fn cancel_questions_by_parent(&self, _parent_connection_id: &str) {}
     }
 
+    /// Render-page access the connection tests can hand to the widened ask /
+    /// permission tuples without exercising them: registers nothing, so a
+    /// waiting page never appears and nothing needs canceling.
+    #[derive(Default)]
+    struct NoopRenderPages;
+
+    #[async_trait::async_trait]
+    impl crate::acp::render_page::SessionRenderPageAccess for NoopRenderPages {
+        async fn register_render_page(
+            &self,
+            _parent_connection_id: &str,
+            _title: String,
+            _html: String,
+        ) -> Option<crate::acp::render_page::RegisteredRenderPage> {
+            None
+        }
+
+        async fn cancel_render_page(&self, _parent_connection_id: &str, _page_id: &str) {}
+
+        async fn cancel_render_pages_by_parent(&self, _parent_connection_id: &str) {}
+    }
+
     /// codex abandons a `request_user_input` it stops waiting for — its
     /// `autoResolutionMs` expired, or the turn was interrupted — with
     /// `$/cancel_request`. The question card must go at once (it used to wait
@@ -26660,10 +26763,12 @@ mod tests {
         ask_config
             .set(crate::acp::question::QuestionConfig { enabled: true })
             .await;
-        let access: Option<(
-            Arc<dyn crate::acp::question::SessionQuestionAccess>,
-            crate::acp::question::QuestionRuntimeConfig,
-        )> = Some((questions.clone(), ask_config));
+        let access: Option<NativeAskAccess> = Some((
+            questions.clone(),
+            ask_config,
+            Arc::new(NoopRenderPages),
+            crate::acp::render_page::RenderPageRuntimeConfig::new(),
+        ));
 
         let agent = tokio::spawn(Agent.builder().connect_with(
             agent_end,
@@ -28840,15 +28945,18 @@ mod tests {
     }
 
     #[test]
-    fn codeg_ask_auto_allow_option_picks_allow_once_for_codegs_own_ask_tool() {
-        let req = claude_mcp_permission_request(
-            "mcp__codeg-mcp__ask_user_question",
-            claude_permission_options(),
-        );
-        assert_eq!(
-            codeg_ask_auto_allow_option(&req).as_deref(),
-            Some("allow-once")
-        );
+    fn codeg_dialog_auto_allow_option_picks_allow_once_for_codegs_own_dialog_tools() {
+        for (tool, kind) in [
+            ("mcp__codeg-mcp__ask_user_question", CodegDialogTool::Ask),
+            ("mcp__codeg-mcp__render_page", CodegDialogTool::Render),
+        ] {
+            let req = claude_mcp_permission_request(tool, claude_permission_options());
+            assert_eq!(
+                codeg_dialog_auto_allow_option(&req),
+                Some((kind, "allow-once".to_string())),
+                "{tool}"
+            );
+        }
         // The title alone is enough: an agent that sends no request-level
         // `_meta.permission` block still gets the shortcut.
         let mut bare = claude_mcp_permission_request(
@@ -28857,23 +28965,24 @@ mod tests {
         );
         bare.meta = None;
         assert_eq!(
-            codeg_ask_auto_allow_option(&bare).as_deref(),
-            Some("allow-once")
+            codeg_dialog_auto_allow_option(&bare).map(|(kind, _)| kind),
+            Some(CodegDialogTool::Ask)
         );
     }
 
     #[test]
-    fn codeg_ask_auto_allow_option_leaves_every_other_approval_on_the_card() {
+    fn codeg_dialog_auto_allow_option_leaves_every_other_approval_on_the_card() {
         // Another server's ask tool: approving it is the user's call, not
         // codeg's, even though the tool half of the name matches.
         for foreign in [
             "mcp__other-server__ask_user_question",
+            "mcp__other-server__render_page",
             "mcp__codeg-mcp__delegate_to_agent",
             "Bash",
         ] {
             let req = claude_mcp_permission_request(foreign, claude_permission_options());
             assert!(
-                codeg_ask_auto_allow_option(&req).is_none(),
+                codeg_dialog_auto_allow_option(&req).is_none(),
                 "{foreign} must keep its approval card"
             );
         }
@@ -28894,7 +29003,7 @@ mod tests {
                 ),
             ],
         );
-        assert!(codeg_ask_auto_allow_option(&always_only).is_none());
+        assert!(codeg_dialog_auto_allow_option(&always_only).is_none());
     }
 
     /// `submit_result` is answered by the same rule as the ask tool — codeg's
@@ -42632,12 +42741,15 @@ mod tests {
             agent_availability,
             feedback: crate::acp::feedback::FeedbackRuntimeConfig::new(),
             ask: crate::acp::question::QuestionRuntimeConfig::new(),
+            render: crate::acp::render_page::RenderPageRuntimeConfig::new(),
             sessions: crate::acp::session_info::SessionInfoRuntimeConfig::new(),
             authoring: crate::acp::chat_authoring::ChatAuthoringRuntimeConfig::new(),
             browser: crate::acp::browser_tools::BrowserToolsRuntimeConfig::new(),
             computer: crate::acp::computer_tools::ComputerToolsRuntimeConfig::new(),
             questions: Arc::new(TestNoQuestions)
                 as Arc<dyn crate::acp::question::SessionQuestionAccess>,
+            renders: Arc::new(NoopRenderPages)
+                as Arc<dyn crate::acp::render_page::SessionRenderPageAccess>,
             plan_approvals: Arc::new(TestNoPlanApprovals)
                 as Arc<dyn crate::acp::plan_approval::SessionPlanApprovalAccess>,
         }
@@ -42852,6 +42964,8 @@ mod tests {
         assert_eq!(only(|f| f.feedback = true), Some("feedback".to_string()));
         // Ask only — likewise injects the companion on its own.
         assert_eq!(only(|f| f.ask = true), Some("ask".to_string()));
+        // Render only — same, on its own flag.
+        assert_eq!(only(|f| f.render = true), Some("render".to_string()));
         // Sessions only — likewise injects the companion on its own.
         assert_eq!(only(|f| f.sessions = true), Some("sessions".to_string()));
         // Per-spawn tasks group: injects alone.
@@ -42874,6 +42988,7 @@ mod tests {
                 delegation: true,
                 feedback: true,
                 ask: true,
+                render: true,
                 sessions: true,
                 tasks: true,
                 result: true,
@@ -42886,7 +43001,7 @@ mod tests {
                 computer_clipboard: true,
             }),
             Some(
-                "delegation,feedback,ask,sessions,tasks,result,automations,taskboard,browser,\
+                "delegation,feedback,ask,render,sessions,tasks,result,automations,taskboard,browser,\
                  browser_eval,computer,computer_launch,computer_clipboard"
                     .to_string()
             )
@@ -47864,8 +47979,12 @@ mod tests {
             config
                 .set(crate::acp::question::QuestionConfig { enabled })
                 .await;
-            let access: Option<(Arc<dyn crate::acp::question::SessionQuestionAccess>, _)> =
-                Some((Arc::new(AntigravityTestAnswer { decline }), config));
+            let access: Option<NativeAskAccess> = Some((
+                Arc::new(AntigravityTestAnswer { decline }),
+                config,
+                Arc::new(NoopRenderPages),
+                crate::acp::render_page::RenderPageRuntimeConfig::new(),
+            ));
             let agent = tokio::spawn(Agent.builder().connect_with(
                 agent_end,
                 async move |cx: ConnectionTo<Client>| {
@@ -48190,10 +48309,12 @@ mod tests {
         ask_config
             .set(crate::acp::question::QuestionConfig { enabled: true })
             .await;
-        let access: Option<(
-            Arc<dyn crate::acp::question::SessionQuestionAccess>,
-            crate::acp::question::QuestionRuntimeConfig,
-        )> = Some((Arc::new(AnswersFirstOption), ask_config));
+        let access: Option<NativeAskAccess> = Some((
+            Arc::new(AnswersFirstOption),
+            ask_config,
+            Arc::new(NoopRenderPages),
+            crate::acp::render_page::RenderPageRuntimeConfig::new(),
+        ));
 
         let agent = tokio::spawn(Agent.builder().connect_with(
             agent_end,
diff --git a/src-tauri/src/acp/delegation/broker.rs b/src-tauri/src/acp/delegation/broker.rs
index f7274208a4..2fb416c88d 100644
--- a/src-tauri/src/acp/delegation/broker.rs
+++ b/src-tauri/src/acp/delegation/broker.rs
@@ -1096,6 +1096,7 @@ fn attach_blocked(report: &mut DelegationTaskReport, blocked: BlockedOn) {
         (BlockedKind::Permission, None) => "a tool permission".to_string(),
         (BlockedKind::Question, None) => "a question".to_string(),
         (BlockedKind::PlanApproval, None) => "a plan approval".to_string(),
+        (BlockedKind::RenderPage, None) => "an answer on a page".to_string(),
     };
     // The third line is guidance for the orchestrating LLM, in the same spirit
     // as `running_ack`'s "call get_delegation_status with this id". Keep it in
diff --git a/src-tauri/src/acp/delegation/companion.rs b/src-tauri/src/acp/delegation/companion.rs
index a07065072b..d66453eee0 100644
--- a/src-tauri/src/acp/delegation/companion.rs
+++ b/src-tauri/src/acp/delegation/companion.rs
@@ -58,22 +58,24 @@ use crate::acp::delegation::transport::{
     client_computer_verify_round_trip, client_computer_windows_round_trip,
     client_create_automation_round_trip, client_create_work_task_round_trip,
     client_feedback_round_trip, client_list_assistants_round_trip, client_ping,
-    client_result_schema_round_trip, client_resume_task_round_trip, client_round_trip,
-    client_session_round_trip, client_status_round_trip, client_submit_result_round_trip,
-    client_task_complete_round_trip, client_task_progress_round_trip, BrokerAskRequest,
-    BrokerBrowserActRequest, BrokerBrowserCaptureRequest, BrokerBrowserConsoleRequest,
-    BrokerBrowserEvalRequest, BrokerBrowserSnapshotRequest, BrokerBrowserTabOpRequest,
-    BrokerBrowserTabsRequest, BrokerCancelRequest, BrokerCancelTaskRequest,
-    BrokerCommitFeedbackRequest, BrokerComputerActRequest, BrokerComputerAppsRequest,
-    BrokerComputerCaptureRequest, BrokerComputerClipboardRequest, BrokerComputerLaunchRequest,
-    BrokerComputerSnapshotRequest, BrokerComputerVerifyRequest, BrokerComputerWindowsRequest,
-    BrokerCreateAutomationRequest, BrokerCreateWorkTaskRequest, BrokerFeedbackRequest,
-    BrokerListAssistantsRequest, BrokerRequest, BrokerResponse, BrokerResultSchemaRequest,
+    client_render_round_trip, client_result_schema_round_trip, client_resume_task_round_trip,
+    client_round_trip, client_session_round_trip, client_status_round_trip,
+    client_submit_result_round_trip, client_task_complete_round_trip,
+    client_task_progress_round_trip, BrokerAskRequest, BrokerBrowserActRequest,
+    BrokerBrowserCaptureRequest, BrokerBrowserConsoleRequest, BrokerBrowserEvalRequest,
+    BrokerBrowserSnapshotRequest, BrokerBrowserTabOpRequest, BrokerBrowserTabsRequest,
+    BrokerCancelRequest, BrokerCancelTaskRequest, BrokerCommitFeedbackRequest,
+    BrokerComputerActRequest, BrokerComputerAppsRequest, BrokerComputerCaptureRequest,
+    BrokerComputerClipboardRequest, BrokerComputerLaunchRequest, BrokerComputerSnapshotRequest,
+    BrokerComputerVerifyRequest, BrokerComputerWindowsRequest, BrokerCreateAutomationRequest,
+    BrokerCreateWorkTaskRequest, BrokerFeedbackRequest, BrokerListAssistantsRequest,
+    BrokerRenderRequest, BrokerRequest, BrokerResponse, BrokerResultSchemaRequest,
     BrokerResumeTaskRequest, BrokerSessionRequest, BrokerStatusRequest, BrokerSubmitResultRequest,
     BrokerTaskCompleteRequest, BrokerTaskProgressRequest,
 };
 use crate::acp::delegation::assistants::{roster_for_schema, AssistantRosterEntry};
 use crate::acp::question::parse_questions;
+use crate::acp::render_page::{parse_render_page_arguments, ANSWERED_NOTE, DECLINED_NOTE, SHOWN_NOTE};
 use crate::acp::session_info::MAX_SESSION_MESSAGES;
 use crate::models::AutomationAction;
 
@@ -163,6 +165,12 @@ pub struct CompanionFeatures {
     pub delegation: bool,
     pub feedback: bool,
     pub ask: bool,
+    /// `render_page` — the agent draws a self-contained HTML page inline in
+    /// the chat, optionally waiting for the user's answer on it. Gated apart
+    /// from `ask` because the effect is different: a page replaces the plain
+    /// card set with an agent-authored document (sandboxed in an iframe, but
+    /// still the agent's markup rendered into the user's chat).
+    pub render: bool,
     pub sessions: bool,
     /// Work-task reporting tools (`task_progress` / `task_complete`) — injected
     /// only into spawns launched by the task engine.
@@ -228,6 +236,7 @@ impl CompanionFeatures {
                 delegation: true,
                 feedback: false,
                 ask: false,
+                render: false,
                 sessions: false,
                 tasks: false,
                 result: false,
@@ -244,6 +253,7 @@ impl CompanionFeatures {
             delegation: false,
             feedback: false,
             ask: false,
+            render: false,
             sessions: false,
             tasks: false,
             result: false,
@@ -260,6 +270,7 @@ impl CompanionFeatures {
                 "delegation" => f.delegation = true,
                 "feedback" => f.feedback = true,
                 "ask" => f.ask = true,
+                "render" => f.render = true,
                 "sessions" => f.sessions = true,
                 "tasks" => f.tasks = true,
                 "result" => f.result = true,
@@ -281,6 +292,7 @@ impl CompanionFeatures {
         match name {
             "check_user_feedback" => self.feedback,
             "ask_user_question" => self.ask,
+            "render_page" => self.render,
             "get_session_info" => self.sessions,
             "task_progress" | "task_complete" => self.tasks,
             "submit_result" => self.result,
@@ -1081,6 +1093,36 @@ async fn build_tools_call_spawn(
             let round_trip = Box::pin(async move { client_ask_round_trip(&socket, &req).await });
             register_and_spawn(inflight, id, None, round_trip, render_ask_result).await
         }
+        "render_page" => {
+            // Validate + parse HERE, like the ask arm: a malformed or oversized
+            // page is a synchronous -32602 the LLM can fix. The two halves of
+            // the tool then diverge inside the companion, before any socket
+            // traffic: a SHOW-ONLY page is complete the moment the card is on
+            // screen — and the card renders straight from this tool call's own
+            // input, live and on transcript replay alike — so the call answers
+            // locally without a broker round trip. Only an `awaitAnswer` page
+            // needs the socket: the listener arms the card for an answer and
+            // parks this connection until the user submits.
+            let spec = match parse_render_page_arguments(&arguments) {
+                Ok(spec) => spec,
+                Err(msg) => return LineAction::Respond(err(id, -32602, msg)),
+            };
+            if !spec.await_answer {
+                return LineAction::Respond(ok(id, render_shown_result(&spec.title)));
+            }
+            let req = BrokerRenderRequest {
+                token: ctx.token.clone(),
+                title: spec.title,
+                html: spec.html,
+            };
+            // No external_handle, like the ask arm: canceling a waiting page
+            // only suppresses the response; the dropped future closes the
+            // socket, and the listener's peer-close read tears the pending
+            // page down.
+            let round_trip =
+                Box::pin(async move { client_render_round_trip(&socket, &req).await });
+            register_and_spawn(inflight, id, None, round_trip, render_page_answer_result).await
+        }
         "get_session_info" => {
             // `session_id` is the codeg conversation id the agent read out of a
             // `codeg://session/<id>` reference. Accept a JSON number or a numeric
@@ -2031,6 +2073,53 @@ pub fn render_ask_result(outcome: &Value) -> Value {
     })
 }
 
+/// The tool result for a SHOW-ONLY `render_page` call — answered locally by the
+/// companion, no broker round trip. The card is already on the user's screen
+/// (rendered from this very tool input), so all the agent needs is the note
+/// keeping it from announcing the page it just drew. `title` rides in
+/// `structuredContent` so the frontend card header and the agent agree on what
+/// the page is called even when the agent gave it none.
+pub fn render_shown_result(title: &str) -> Value {
+    json!({
+        "content": [{ "type": "text", "text": SHOWN_NOTE }],
+        "isError": false,
+        "structuredContent": { "shown": true, "title": title, "note": SHOWN_NOTE },
+    })
+}
+
+/// Map the awaiting-answer `render_page` round-trip outcome (a serialized
+/// [`crate::acp::render_page::RenderPageOutcome`] from the listener) into an MCP
+/// `tools/call` result. The `content` text states the answer in words (plus the
+/// note that tells the agent what to do with it); on decline it is just the
+/// note. The raw envelope rides along in `structuredContent`. `isError` is
+/// always `false` — a declined page is a valid result, not an error.
+pub fn render_page_answer_result(outcome: &Value) -> Value {
+    let answered = outcome
+        .get("answered")
+        .and_then(|v| v.as_bool())
+        .unwrap_or(false);
+    let text = if answered {
+        let summary = outcome.get("summary").and_then(|v| v.as_str()).unwrap_or("");
+        let data = outcome.get("data").cloned().unwrap_or(Value::Null);
+        let note = outcome
+            .get("note")
+            .and_then(|v| v.as_str())
+            .unwrap_or(ANSWERED_NOTE);
+        format!("The user answered on the page.\nsummary: {summary}\ndata: {data}\n{note}")
+    } else {
+        outcome
+            .get("note")
+            .and_then(|v| v.as_str())
+            .unwrap_or(DECLINED_NOTE)
+            .to_string()
+    };
+    json!({
+        "content": [{ "type": "text", "text": text }],
+        "isError": false,
+        "structuredContent": outcome,
+    })
+}
+
 /// Read a required non-empty string argument, trimmed. `Err` carries the
 /// `-32602` message the dispatcher returns verbatim.
 fn required_string(arguments: &Value, field: &str, tool: &str) -> Result<String, String> {
@@ -4446,6 +4535,7 @@ mod tests {
             delegation: true,
             feedback: false,
             ask: false,
+            render: false,
             sessions: false,
             tasks: false,
             result: false,
@@ -5077,6 +5167,7 @@ mod tests {
         delegation: false,
         feedback: true,
         ask: false,
+        render: false,
         sessions: false,
         tasks: false,
         result: false,
@@ -5092,6 +5183,7 @@ mod tests {
         delegation: true,
         feedback: true,
         ask: false,
+        render: false,
         sessions: false,
         tasks: false,
         result: false,
@@ -5107,6 +5199,7 @@ mod tests {
         delegation: false,
         feedback: false,
         ask: true,
+        render: false,
         sessions: false,
         tasks: false,
         result: false,
@@ -5122,6 +5215,7 @@ mod tests {
         delegation: false,
         feedback: false,
         ask: false,
+        render: false,
         sessions: true,
         tasks: false,
         result: false,
@@ -5613,6 +5707,7 @@ mod tests {
         delegation: false,
         feedback: false,
         ask: false,
+        render: false,
         sessions: false,
         tasks: false,
         result: false,
@@ -5628,6 +5723,7 @@ mod tests {
         delegation: false,
         feedback: false,
         ask: false,
+        render: false,
         sessions: false,
         tasks: false,
         result: false,
@@ -6452,6 +6548,7 @@ mod tests {
         delegation: false,
         feedback: false,
         ask: false,
+        render: false,
         sessions: false,
         tasks: false,
         result: false,
diff --git a/src-tauri/src/acp/delegation/listener.rs b/src-tauri/src/acp/delegation/listener.rs
index 2645604487..4eeb9893c2 100644
--- a/src-tauri/src/acp/delegation/listener.rs
+++ b/src-tauri/src/acp/delegation/listener.rs
@@ -33,7 +33,8 @@ use crate::acp::delegation::transport::{
     BrokerComputerAppsRequest, BrokerComputerCaptureRequest, BrokerComputerLaunchRequest,
     BrokerComputerSnapshotRequest,
     BrokerComputerVerifyRequest, BrokerComputerWindowsRequest, BrokerCommitFeedbackRequest,
-    BrokerFeedbackRequest, BrokerListAssistantsRequest, BrokerMessage, BrokerRequest,
+    BrokerFeedbackRequest, BrokerListAssistantsRequest, BrokerMessage, BrokerRenderRequest,
+    BrokerRequest,
     BrokerCreateAutomationRequest, BrokerCreateWorkTaskRequest, BrokerResponse,
     BrokerResultSchemaRequest, BrokerResumeTaskRequest, BrokerSessionRequest,
     BrokerStatusRequest, BrokerSubmitResultRequest, BrokerTaskCompleteRequest,
@@ -151,6 +152,10 @@ pub struct DelegationListener {
     /// Registers / cancels the blocking `ask_user_question` tool's pending
     /// questions. Same `tokens` registry and parent-connection scoping.
     pub questions: Arc<dyn SessionQuestionAccess>,
+    /// Registers / cancels the blocking `render_page` tool's awaiting-answer
+    /// pages. Same shape and scoping as `questions` — the page is a question
+    /// whose answer is whatever JSON the page's own script composes.
+    pub renders: Arc<dyn crate::acp::render_page::SessionRenderPageAccess>,
     /// Resolves a referenced session for the `get_session_info` tool. Unlike the
     /// other arms this is NOT parent-scoped — it looks any non-deleted session up
     /// by its codeg conversation id (still token-gated against an invalid caller).
@@ -189,6 +194,7 @@ impl DelegationListener {
         parent_lookup: Arc<dyn ParentSessionLookup>,
         feedback: Arc<dyn SessionFeedbackAccess>,
         questions: Arc<dyn SessionQuestionAccess>,
+        renders: Arc<dyn crate::acp::render_page::SessionRenderPageAccess>,
         session_info: Arc<dyn SessionInfoAccess>,
         tasks: Arc<dyn WorkTaskToolAccess>,
         authoring: Arc<dyn ChatAuthoringAccess>,
@@ -202,6 +208,7 @@ impl DelegationListener {
             parent_lookup,
             feedback,
             questions,
+            renders,
             session_info,
             tasks,
             authoring,
@@ -569,6 +576,59 @@ impl DelegationListener {
                 write_frame(conn, &resp).await?;
                 return Ok(());
             }
+            BrokerMessage::Render(req) => {
+                // The awaiting-answer half of `render_page`: park on the user's
+                // submit, racing peer-close exactly like `Ask` above (same
+                // reasons, same teardown-window re-check). A show-only page
+                // never sends this message, so every `Render` here means "arm
+                // the card and wait". Bad token, gone connection, or a
+                // connection that already has a waiting page yields an
+                // unanswered outcome so the LLM proceeds.
+                let Some(parent_conn_id) = self.render_target(&req).await else {
+                    write_frame(conn, &render_declined_response()?).await?;
+                    return Ok(());
+                };
+                let Some(reg) = self
+                    .renders
+                    .register_render_page(&parent_conn_id, req.title, req.html)
+                    .await
+                else {
+                    write_frame(conn, &render_declined_response()?).await?;
+                    return Ok(());
+                };
+                let page_id = reg.page_id;
+                let mut answer_rx = reg.answer_rx;
+                // Teardown-window re-check, mirroring the Ask arm: the token is
+                // revoked before `cancel_render_pages_by_parent` sweeps, so a
+                // token that is now gone means teardown started between lookup
+                // and insert.
+                if self.tokens.lookup(&req.token).await.is_none() {
+                    self.renders
+                        .cancel_render_page(&parent_conn_id, &page_id)
+                        .await;
+                    write_frame(conn, &render_declined_response()?).await?;
+                    return Ok(());
+                }
+                let mut probe = [0u8; 1];
+                let outcome = tokio::select! {
+                    biased;
+                    ans = &mut answer_rx => ans.ok(),
+                    _ = conn.read(&mut probe) => {
+                        self.renders
+                            .cancel_render_page(&parent_conn_id, &page_id)
+                            .await;
+                        return Ok(());
+                    }
+                };
+                let resp = match outcome {
+                    Some(o) => render_response(&o)?,
+                    // Sender dropped without sending (teardown drain): surface
+                    // an unanswered outcome so the tool returns cleanly.
+                    None => render_declined_response()?,
+                };
+                write_frame(conn, &resp).await?;
+                return Ok(());
+            }
             BrokerMessage::SessionInfo(req) => {
                 // Read-only resolution (DB + a bounded transcript parse). No
                 // peer-close race needed: unlike Status/Ask this never blocks on
@@ -863,6 +923,13 @@ impl DelegationListener {
         Some(entry.parent_connection_id)
     }
 
+    /// Resolve the `Render` arm's parent connection from the per-launch token
+    /// (same scoping as [`Self::ask_target`]).
+    async fn render_target(&self, req: &BrokerRenderRequest) -> Option<String> {
+        let entry = self.tokens.lookup(&req.token).await?;
+        Some(entry.parent_connection_id)
+    }
+
     /// Mark the named feedback notes delivered, after the companion confirms it
     /// returned them to the agent. Token-scoped to the parent connection. Unknown
     /// tokens are dropped (no LLM on the receiving end to react).
@@ -1384,6 +1451,16 @@ fn ask_response(outcome: &QuestionOutcome) -> std::io::Result<BrokerResponse> {
     })
 }
 
+/// Serialize a resolved [`RenderPageOutcome`] into a [`BrokerResponse`] for the
+/// `Render` arm — the companion renders it into the `render_page` tool result.
+fn render_response(outcome: &crate::acp::render_page::RenderPageOutcome) -> std::io::Result<BrokerResponse> {
+    Ok(BrokerResponse {
+        outcome: serde_json::to_value(outcome).map_err(|e| {
+            std::io::Error::new(std::io::ErrorKind::InvalidData, format!("encode: {e}"))
+        })?,
+    })
+}
+
 /// Serialize a resolved [`SessionInfo`] into a [`BrokerResponse`] for the
 /// `SessionInfo` arm — the companion renders it into the `get_session_info`
 /// tool result.
@@ -1566,6 +1643,18 @@ fn ask_declined_response() -> std::io::Result<BrokerResponse> {
     })
 }
 
+/// The unanswered counterpart for the `Render` arm (bad token / gone parent /
+/// already a waiting page / teardown drain / peer-close): `answered: false`
+/// carrying the decline note, so the agent proceeds with its own judgment.
+fn render_declined_response() -> std::io::Result<BrokerResponse> {
+    render_response(&crate::acp::render_page::RenderPageOutcome {
+        answered: false,
+        summary: String::new(),
+        data: serde_json::Value::Null,
+        note: Some(crate::acp::render_page::DECLINED_NOTE.to_string()),
+    })
+}
+
 /// A `Canceled` report for a setup-side rejection the LLM can't react to (bad
 /// token, parent gone). Mirrors the old `cancel(..)` DelegationOutcome.
 fn report_canceled(message: &str) -> DelegationTaskReport {
@@ -1862,6 +1951,53 @@ mod tests {
         }
     }
 
+    /// In-memory rendered-page stub, mirroring `StubQuestion`: register mints a
+    /// sequential id and stashes the answer sender; cancel removes it. Lets the
+    /// listener's `Render` arm be driven without a real `ConnectionManager`.
+    #[derive(Default)]
+    struct StubRender {
+        pending: tokio::sync::Mutex<
+            HashMap<String, oneshot::Sender<crate::acp::render_page::RenderPageOutcome>>,
+        >,
+        registered: tokio::sync::Mutex<Vec<(String, String, String)>>,
+        canceled: tokio::sync::Mutex<Vec<String>>,
+    }
+    #[async_trait]
+    impl crate::acp::render_page::SessionRenderPageAccess for StubRender {
+        async fn register_render_page(
+            &self,
+            parent_connection_id: &str,
+            title: String,
+            html: String,
+        ) -> Option<crate::acp::render_page::RegisteredRenderPage> {
+            let page_id = format!("r-{}", self.registered.lock().await.len() + 1);
+            let (tx, rx) = oneshot::channel();
+            self.pending.lock().await.insert(page_id.clone(), tx);
+            self.registered
+                .lock()
+                .await
+                .push((parent_connection_id.to_string(), title, html));
+            Some(crate::acp::render_page::RegisteredRenderPage {
+                page_id,
+                answer_rx: rx,
+            })
+        }
+        async fn cancel_render_page(&self, _parent_connection_id: &str, page_id: &str) {
+            self.pending.lock().await.remove(page_id);
+            self.canceled.lock().await.push(page_id.to_string());
+        }
+        async fn cancel_render_pages_by_parent(&self, _parent_connection_id: &str) {
+            self.pending.lock().await.clear();
+        }
+    }
+    impl StubRender {
+        async fn answer(&self, page_id: &str, outcome: crate::acp::render_page::RenderPageOutcome) {
+            if let Some(tx) = self.pending.lock().await.remove(page_id) {
+                let _ = tx.send(outcome);
+            }
+        }
+    }
+
     /// In-memory session-info stub. Records every `(session_id, max_messages)` it
     /// was asked to resolve and returns a seeded outcome — `found` sessions echo
     /// their id, unknown ids return `not_found`. Default knows about no sessions.
@@ -2076,6 +2212,7 @@ mod tests {
             Arc::new(StaticParentLookup(parent_conversation)),
             Arc::new(StubFeedback::default()),
             Arc::new(StubQuestion::default()),
+            Arc::new(StubRender::default()),
             Arc::new(StubSessionInfo::default()),
             Arc::new(StubTaskTools),
             Arc::new(StubAuthoring::default()),
@@ -2101,6 +2238,7 @@ mod tests {
             Arc::new(StaticParentLookup(Some(1))),
             feedback,
             Arc::new(StubQuestion::default()),
+            Arc::new(StubRender::default()),
             Arc::new(StubSessionInfo::default()),
             Arc::new(StubTaskTools),
             Arc::new(StubAuthoring::default()),
@@ -2127,6 +2265,7 @@ mod tests {
             Arc::new(StaticParentLookup(Some(1))),
             Arc::new(StubFeedback::default()),
             questions,
+            Arc::new(StubRender::default()),
             Arc::new(StubSessionInfo::default()),
             Arc::new(StubTaskTools),
             Arc::new(StubAuthoring::default()),
@@ -2152,6 +2291,7 @@ mod tests {
             Arc::new(StaticParentLookup(Some(1))),
             Arc::new(StubFeedback::default()),
             Arc::new(StubQuestion::default()),
+            Arc::new(StubRender::default()),
             session_info,
             Arc::new(StubTaskTools),
             Arc::new(StubAuthoring::default()),
@@ -2179,6 +2319,7 @@ mod tests {
             Arc::new(StaticParentLookup(parent_conversation)),
             Arc::new(StubFeedback::default()),
             Arc::new(StubQuestion::default()),
+            Arc::new(StubRender::default()),
             Arc::new(StubSessionInfo::default()),
             Arc::new(StubTaskTools),
             authoring,
@@ -2205,6 +2346,7 @@ mod tests {
             Arc::new(StaticParentLookup(Some(1))),
             Arc::new(StubFeedback::default()),
             Arc::new(StubQuestion::default()),
+            Arc::new(StubRender::default()),
             Arc::new(StubSessionInfo::default()),
             Arc::new(StubTaskTools),
             Arc::new(StubAuthoring::default()),
@@ -3512,6 +3654,162 @@ mod tests {
         assert!(questions.registered.lock().await.is_empty());
     }
 
+    // -- render_page over the listener --------------------------------------
+
+    /// Build a listener whose render-page access is the given stub, so render
+    /// tests can register/answer pages and assert the round-trip. Delegation,
+    /// feedback and question pieces are minimal.
+    fn make_render_listener(
+        tokens: Arc<TokenRegistry>,
+        renders: Arc<StubRender>,
+    ) -> Arc<DelegationListener> {
+        let broker = Arc::new(DelegationBroker::new(
+            Arc::new(MockSpawner::new()) as Arc<dyn ConnectionSpawner>,
+            Arc::new(AlwaysRootLookup) as Arc<dyn ConversationDepthLookup>,
+        ));
+        DelegationListener::new(
+            broker,
+            tokens,
+            Arc::new(StaticParentLookup(Some(1))),
+            Arc::new(StubFeedback::default()),
+            Arc::new(StubQuestion::default()),
+            renders,
+            Arc::new(StubSessionInfo::default()),
+            Arc::new(StubTaskTools),
+            Arc::new(StubAuthoring::default()),
+            Arc::new(NoBrowserTabs),
+            Arc::new(NoComputerDesktop),
+            Arc::new(crate::acp::result_tool::NoResultTool),
+        )
+    }
+
+    fn render_msg(token: &str) -> BrokerMessage {
+        BrokerMessage::Render(BrokerRenderRequest {
+            token: token.into(),
+            title: "Theme picker".into(),
+            html: "<h1>pick</h1>".into(),
+        })
+    }
+
+    /// A `Render` registers the page, parks, and — once the user submits on the
+    /// card — writes the full `{answered, summary, data}` envelope back over
+    /// the same socket (show-only pages never send this message, so the whole
+    /// arm is the await-answer half of the tool).
+    #[tokio::test]
+    async fn render_registers_then_answer_resolves_response() {
+        let renders = Arc::new(StubRender::default());
+        let tokens = Arc::new(TokenRegistry::default());
+        tokens
+            .register(
+                "tok".into(),
+                TokenEntry {
+                    parent_connection_id: "parent-conn".into(),
+                    working_dir: PathBuf::from("/tmp"),
+                },
+            )
+            .await;
+        let listener = make_render_listener(tokens, renders.clone());
+
+        let (mut client, mut server) = duplex(8 * 1024);
+        let server_task = tokio::spawn(async move {
+            listener.serve_one(&mut server).await.unwrap();
+        });
+        write_frame(&mut client, &render_msg("tok")).await.unwrap();
+
+        // The server must be parked until a submit arrives — no response yet.
+        let early = tokio::time::timeout(Duration::from_millis(40), async {
+            read_frame::<_, BrokerResponse>(&mut client).await
+        })
+        .await;
+        assert!(early.is_err(), "render must block until the user answers");
+
+        // Wait for the stub to record the registration, then answer it.
+        while renders.registered.lock().await.is_empty() {
+            tokio::time::sleep(Duration::from_millis(5)).await;
+        }
+        assert_eq!(
+            renders.registered.lock().await[0],
+            (
+                "parent-conn".to_string(),
+                "Theme picker".to_string(),
+                "<h1>pick</h1>".to_string()
+            )
+        );
+        renders
+            .answer(
+                "r-1",
+                crate::acp::render_page::RenderPageOutcome {
+                    answered: true,
+                    summary: "go with B".into(),
+                    data: serde_json::json!({ "choice": "b" }),
+                    note: None,
+                },
+            )
+            .await;
+
+        let resp: BrokerResponse = read_frame(&mut client).await.unwrap();
+        server_task.await.unwrap();
+        assert_eq!(resp.outcome["answered"], true);
+        assert_eq!(resp.outcome["summary"], "go with B");
+        assert_eq!(resp.outcome["data"]["choice"], "b");
+        // An answered outcome carries no note (the field is skip-serialized).
+        assert!(resp.outcome.get("note").is_none());
+    }
+
+    /// A dismissed page closes the tool call's socket; the listener observes the
+    /// peer-close, cancels the pending page, and returns without writing.
+    #[tokio::test]
+    async fn render_peer_close_cancels_page() {
+        let renders = Arc::new(StubRender::default());
+        let tokens = Arc::new(TokenRegistry::default());
+        tokens
+            .register(
+                "tok".into(),
+                TokenEntry {
+                    parent_connection_id: "parent-conn".into(),
+                    working_dir: PathBuf::from("/tmp"),
+                },
+            )
+            .await;
+        let listener = make_render_listener(tokens, renders.clone());
+
+        let (mut client, mut server) = duplex(8 * 1024);
+        let server_task = tokio::spawn(async move { listener.serve_one(&mut server).await });
+        write_frame(&mut client, &render_msg("tok")).await.unwrap();
+
+        // Let the server park inside the wait.
+        while renders.registered.lock().await.is_empty() {
+            tokio::time::sleep(Duration::from_millis(5)).await;
+        }
+        // Companion cancels: drop the request socket.
+        drop(client);
+
+        let result = tokio::time::timeout(Duration::from_secs(5), server_task)
+            .await
+            .expect("serve_one must return after peer close");
+        result.unwrap().unwrap();
+        assert_eq!(renders.canceled.lock().await.as_slice(), &["r-1".to_string()]);
+    }
+
+    /// An invalid token never registers a page and returns an unanswered
+    /// outcome (the LLM proceeds with its own judgment).
+    #[tokio::test]
+    async fn render_invalid_token_declined() {
+        let renders = Arc::new(StubRender::default());
+        let listener = make_render_listener(Arc::new(TokenRegistry::default()), renders.clone());
+        let (mut client, mut server) = duplex(8 * 1024);
+        let server_task = tokio::spawn(async move {
+            listener.serve_one(&mut server).await.unwrap();
+        });
+        write_frame(&mut client, &render_msg("bad-token"))
+            .await
+            .unwrap();
+        let resp: BrokerResponse = read_frame(&mut client).await.unwrap();
+        server_task.await.unwrap();
+        assert_eq!(resp.outcome["answered"], false);
+        assert!(renders.registered.lock().await.is_empty());
+    }
+
     // -- browser tools ------------------------------------------------------
 
     async fn browser_tokens() -> Arc<TokenRegistry> {
@@ -4120,6 +4418,7 @@ mod tests {
             Arc::new(StaticParentLookup(Some(1))),
             Arc::new(StubFeedback::default()),
             Arc::new(StubQuestion::default()),
+            Arc::new(StubRender::default()),
             Arc::new(StubSessionInfo::default()),
             Arc::new(StubTaskTools),
             Arc::new(StubAuthoring::default()),
@@ -4505,6 +4804,7 @@ mod tests {
             Arc::new(StaticParentLookup(Some(1))),
             Arc::new(StubFeedback::default()),
             Arc::new(StubQuestion::default()),
+            Arc::new(StubRender::default()),
             Arc::new(StubSessionInfo::default()),
             Arc::new(StubTaskTools),
             Arc::new(StubAuthoring::default()),
diff --git a/src-tauri/src/acp/delegation/service.rs b/src-tauri/src/acp/delegation/service.rs
index b038e6e707..2406c357a3 100644
--- a/src-tauri/src/acp/delegation/service.rs
+++ b/src-tauri/src/acp/delegation/service.rs
@@ -309,6 +309,20 @@ mod tests {
         async fn cancel_questions_by_parent(&self, _parent_connection_id: &str) {}
     }
 
+    #[async_trait]
+    impl crate::acp::render_page::SessionRenderPageAccess for Stub {
+        async fn register_render_page(
+            &self,
+            _parent_connection_id: &str,
+            _title: String,
+            _html: String,
+        ) -> Option<crate::acp::render_page::RegisteredRenderPage> {
+            None
+        }
+        async fn cancel_render_page(&self, _parent_connection_id: &str, _page_id: &str) {}
+        async fn cancel_render_pages_by_parent(&self, _parent_connection_id: &str) {}
+    }
+
     #[async_trait]
     impl crate::acp::session_info::SessionInfoAccess for Stub {
         async fn resolve(
@@ -498,6 +512,7 @@ mod tests {
             Arc::new(Stub),
             Arc::new(Stub),
             Arc::new(Stub),
+            Arc::new(Stub),
             Arc::new(crate::acp::computer_tools::NoComputerDesktop),
             Arc::new(crate::acp::result_tool::NoResultTool),
         );
diff --git a/src-tauri/src/acp/delegation/tool_schema.json b/src-tauri/src/acp/delegation/tool_schema.json
index 13eb0c243b..c55d852d60 100644
--- a/src-tauri/src/acp/delegation/tool_schema.json
+++ b/src-tauri/src/acp/delegation/tool_schema.json
@@ -1392,5 +1392,31 @@
         }
       }
     }
+  },
+  {
+    "name": "render_page",
+    "description": "Draw a finished HTML page inline in the chat, above your reply, or ask the user to choose on one (awaitAnswer). The page is part of your reply and sits on the chat's background: leave html, body and the outermost element without a background, add no outer card, border or banner title, and set boxes apart by tone. Style with the theme variables listed under html. Read html before writing a page and awaitAnswer before asking on one.",
+    "inputSchema": {
+      "type": "object",
+      "required": [
+        "html"
+      ],
+      "properties": {
+        "html": {
+          "type": "string",
+          "maxLength": 200000,
+          "description": "One self-contained HTML document, at most 200000 characters, with inline <style> and <script>. Remote scripts and stylesheets do not load in every client, so draw charts with inline SVG or your own script. Layout: fluid width, as wide as the reply column (about 720px on desktop, 360px on phones), no horizontal padding on the outermost element, nothing wider; stack or wrap, and give a wide table its own overflow-x:auto box. The frame takes the page's height, so keep it short, give charts fixed pixel heights, and never use 100vh or height:100% on html or body. Ready classes in the app's look, so these need no CSS of your own: .oc-box (a box; a box inside it steps up a tone), .oc-muted (secondary text), .oc-table on a div around a <table> (scrolls sideways when wide), .oc-num (tabular figures, end-aligned), .oc-badge with optional data-tone=\"success|warning|error|info\", .oc-dot (a legend dot) and .oc-bar (a horizontal bar) colored by --color (default --chart-1), the bar as long as --value (a percentage), .oc-field (a <label> around its text and control), .oc-input on an input, select or textarea, .oc-switch on a checkbox, .oc-segmented around <button>s (aria-pressed=\"true\" on the chosen one; also tabs). A line only where it means something, such as a divider between sections. Theme variables on :root, updated live on a theme switch: --background, --foreground, --muted, --muted-foreground, --card, --card-foreground, --border, --primary, --primary-foreground, --destructive, --warning, --success, --info, --code-background, --code-foreground, --chart-1 to --chart-6 (series), --radius, --font-sans, --font-mono. A base stylesheet already sets text color, font and size; the root font size is the chat's text size and follows the user's interface size, so size text in rem or em, not px. A page with its own colors, such as a mockup of the user's project, sets a color on all its text and gives itself a background: text without a color takes the theme's, and without a background the page shows the chat's. Scripts may add tooltips, tabs, toggles, sorting. On a phone a tap shows a hover tooltip, so keep tooltips and popups inside the page and flip them near an edge. Images: https or data: URLs only; inline what must show as a data: URL. The page is sandboxed: no access to Codeg, the network session or local files; links open in the user's browser."
+        },
+        "title": {
+          "type": "string",
+          "maxLength": 120,
+          "description": "At most 120 characters; without it the page's <title> or first heading names it"
+        },
+        "awaitAnswer": {
+          "type": "boolean",
+          "description": "Wait for the user to choose, fill in fields, or both, on the page. Give it one button whose click calls codeg.render.submit(data, summary): data is the JSON your next step needs, at most 16000 characters as JSON, summary the choice in a few words of the user's language, at most 500, shown under the page. submit works only from a click on a waiting page and returns a promise; disable the button once it resolves. The call returns summary and data, or answered: false when the user dismissed the page or wrote in the chat instead; their message follows. Reloaded, the page gets codeg.render.answer set to its data, to show the choice. Base classes: .oc-options (a grid), .oc-option on a <button> (aria-pressed=\"true\" when chosen), .oc-button (the send button; data-variant=\"outline\" for a secondary action, \"destructive\" for a dangerous one)."
+        }
+      }
+    }
   }
 ]
diff --git a/src-tauri/src/acp/delegation/transport.rs b/src-tauri/src/acp/delegation/transport.rs
index c9bdab29da..5938753cd5 100644
--- a/src-tauri/src/acp/delegation/transport.rs
+++ b/src-tauri/src/acp/delegation/transport.rs
@@ -188,6 +188,21 @@ pub struct BrokerAskRequest {
     pub questions: Vec<QuestionSpec>,
 }
 
+/// Show the user a finished HTML page and BLOCK until they answer on it. Backs
+/// the `render_page` MCP tool WITH `awaitAnswer` (a show-only page never sends
+/// this message — the companion answers it locally). Authenticated by the same
+/// per-launch `token`; the listener resolves the parent connection from it,
+/// registers the page (broadcasting the answerable-card event to every attached
+/// client), and parks the response until the user submits on the page (or the
+/// tool call is canceled, detected via peer-close on this connection). The
+/// companion has already validated sizes and normalized the title.
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct BrokerRenderRequest {
+    pub token: String,
+    pub title: String,
+    pub html: String,
+}
+
 /// Resolve a session the user referenced (`codeg://session/<id>`) into its
 /// metadata + stats, optionally with its recent messages. Backs the
 /// `get_session_info` MCP tool. Authenticated by the same per-launch `token`; the
@@ -445,6 +460,7 @@ pub enum BrokerMessage {
     Feedback(BrokerFeedbackRequest),
     CommitFeedback(BrokerCommitFeedbackRequest),
     Ask(BrokerAskRequest),
+    Render(BrokerRenderRequest),
     SessionInfo(BrokerSessionRequest),
     TaskProgress(BrokerTaskProgressRequest),
     TaskComplete(BrokerTaskCompleteRequest),
@@ -724,6 +740,17 @@ pub async fn client_ask_round_trip(
     message_round_trip(socket_path, &BrokerMessage::Ask(req.clone())).await
 }
 
+/// Dispatch an awaiting-answer `render_page` request and BLOCK reading the
+/// response until the user submits on the page (or the page is canceled). Same
+/// held-open-socket shape as [`client_ask_round_trip`]. Returns a
+/// `{ answered, summary, data, note }` envelope.
+pub async fn client_render_round_trip(
+    socket_path: &str,
+    req: &BrokerRenderRequest,
+) -> io::Result<BrokerResponse> {
+    message_round_trip(socket_path, &BrokerMessage::Render(req.clone())).await
+}
+
 /// Dispatch a `get_session_info` request and read back the serialized
 /// [`crate::acp::session_info::SessionInfo`] envelope (metadata + stats, and the
 /// recent messages when `max_messages > 0`).
diff --git a/src-tauri/src/acp/delegation/types.rs b/src-tauri/src/acp/delegation/types.rs
index e0212c240d..60d9e5ccfc 100644
--- a/src-tauri/src/acp/delegation/types.rs
+++ b/src-tauri/src/acp/delegation/types.rs
@@ -365,6 +365,8 @@ pub enum BlockedKind {
     Question,
     /// Plan-mode approval (Grok's `exit_plan_mode` and friends).
     PlanApproval,
+    /// `render_page` with `awaitAnswer` — an answer on an interactive page.
+    RenderPage,
 }
 
 /// The blocking prompt itself: what kind, and a short label for the thing that
diff --git a/src-tauri/src/acp/manager.rs b/src-tauri/src/acp/manager.rs
index 7fb474ef2d..c9898e130d 100644
--- a/src-tauri/src/acp/manager.rs
+++ b/src-tauri/src/acp/manager.rs
@@ -477,6 +477,14 @@ pub struct ConnectionManager {
     /// touch the same map. At most one per connection (the agent is blocked in
     /// its `exit_plan_mode` call) — no cap, no cumulative growth.
     pending_plan_approvals: Arc<Mutex<HashMap<String, PendingPlanApprovalEntry>>>,
+    /// In-flight `render_page` calls WITH `awaitAnswer`, awaiting the user's
+    /// submit on the page, keyed by the globally-unique `page_id`. The listener
+    /// parks on the receiver; the answer / cancel path resolves (and removes)
+    /// the matching sender. Shared across `clone_ref` clones so the
+    /// listener-facing `register_render_page` and the command-facing
+    /// `answer_render_page` touch the same map. At most one per connection (the
+    /// agent is blocked in the tool call) — no cap, no cumulative growth.
+    pending_render_pages: Arc<Mutex<HashMap<String, PendingRenderPageEntry>>>,
 }
 
 /// A parked `ask_user_question` awaiting its answer. The `sender` resolves the
@@ -488,6 +496,16 @@ struct PendingQuestionEntry {
     sender: tokio::sync::oneshot::Sender<QuestionOutcome>,
 }
 
+/// A parked awaiting-answer `render_page` awaiting the user's submit. The
+/// `sender` resolves the blocked listener round-trip; `title` is retained so
+/// `answer_render_page` can normalize the answer (blank summary → title)
+/// without a `SessionState` read (race-free).
+struct PendingRenderPageEntry {
+    parent_connection_id: String,
+    title: String,
+    sender: tokio::sync::oneshot::Sender<crate::acp::render_page::RenderPageOutcome>,
+}
+
 /// A parked Grok `exit_plan_mode` approval awaiting the user's decision. The
 /// `sender` resolves the blocked ext-request round-trip in the connection's
 /// handler. `parent_connection_id` routes the resolved event + answer.
@@ -524,6 +542,7 @@ impl ConnectionManager {
             probe_locks: Arc::new(Mutex::new(HashMap::new())),
             pending_questions: Arc::new(Mutex::new(HashMap::new())),
             pending_plan_approvals: Arc::new(Mutex::new(HashMap::new())),
+            pending_render_pages: Arc::new(Mutex::new(HashMap::new())),
         }
     }
 
@@ -541,6 +560,7 @@ impl ConnectionManager {
             probe_locks: self.probe_locks.clone(),
             pending_questions: self.pending_questions.clone(),
             pending_plan_approvals: self.pending_plan_approvals.clone(),
+            pending_render_pages: self.pending_render_pages.clone(),
         }
     }
 
@@ -594,6 +614,7 @@ impl ConnectionManager {
             probe_locks: Arc::new(Mutex::new(HashMap::new())),
             pending_questions: Arc::new(Mutex::new(HashMap::new())),
             pending_plan_approvals: Arc::new(Mutex::new(HashMap::new())),
+            pending_render_pages: Arc::new(Mutex::new(HashMap::new())),
         }
     }
 
@@ -3943,6 +3964,182 @@ impl ConnectionManager {
         }
     }
 
+    /// Register an awaiting-answer `render_page` on `conn_id`, broadcast
+    /// `RenderPageRequest` (so every attached client arms its card, and a
+    /// mid-turn attach recovers the state from the snapshot), and return the
+    /// receiver the blocked listener awaits. `None` when the connection is gone
+    /// (nothing to show) OR when one is already pending on it (the agent is
+    /// blocked in a single tool call; a second would orphan the first). Mirrors
+    /// [`Self::register_question`].
+    pub async fn register_render_page(
+        &self,
+        conn_id: &str,
+        title: String,
+        html: String,
+    ) -> Option<crate::acp::render_page::RegisteredRenderPage> {
+        // Defense-in-depth, as in `register_question`: refuse to broadcast an
+        // oversized document straight into the event payload and the snapshot.
+        if crate::acp::render_page::validate_page(&title, &html).is_err() {
+            return None;
+        }
+        let (state, emitter) = self.get_state_and_emitter(conn_id).await?;
+        let page_id = uuid::Uuid::new_v4().to_string();
+        let (tx, rx) = tokio::sync::oneshot::channel();
+        {
+            let mut reg = self.pending_render_pages.lock().await;
+            if reg.values().any(|e| e.parent_connection_id == conn_id) {
+                return None;
+            }
+            reg.insert(
+                page_id.clone(),
+                PendingRenderPageEntry {
+                    parent_connection_id: conn_id.to_string(),
+                    title: title.clone(),
+                    sender: tx,
+                },
+            );
+        }
+        // Ungated emit: the agent is blocked in the tool call, so the answerable
+        // card must arm regardless of any turn-flag timing.
+        emit_with_state(
+            &state,
+            &emitter,
+            AcpEvent::RenderPageRequest {
+                page_id: page_id.clone(),
+                title,
+                html,
+            },
+        )
+        .await;
+        // Teardown event-ordering race, mirroring `register_question`: a
+        // `cancel_render_pages_by_parent` sweep may have drained the entry
+        // between the insert and the emit; the compensating Resolved keeps no
+        // client holding an armed card with no live backend waiter.
+        if self
+            .compensate_if_render_page_drained(&page_id, &state, &emitter)
+            .await
+        {
+            return None;
+        }
+        Some(crate::acp::render_page::RegisteredRenderPage {
+            page_id,
+            answer_rx: rx,
+        })
+    }
+
+    /// Returns `true` — after emitting a clearing `RenderPageResolved` — when
+    /// `page_id` is no longer pending, i.e. a teardown sweep drained it in the
+    /// window after its `RenderPageRequest` was broadcast. Mirrors
+    /// [`Self::compensate_if_question_drained`].
+    async fn compensate_if_render_page_drained(
+        &self,
+        page_id: &str,
+        state: &std::sync::Arc<tokio::sync::RwLock<crate::acp::SessionState>>,
+        emitter: &EventEmitter,
+    ) -> bool {
+        if self.pending_render_pages.lock().await.contains_key(page_id) {
+            return false;
+        }
+        emit_with_state(
+            state,
+            emitter,
+            AcpEvent::RenderPageResolved {
+                page_id: page_id.to_string(),
+            },
+        )
+        .await;
+        true
+    }
+
+    /// Resolve a pending awaiting-answer page with the user's submission (from
+    /// any client). Removes the one-shot atomically (first answer wins; a
+    /// duplicate / already-resolved id is an idempotent no-op), normalizes the
+    /// answer into the self-describing outcome, and broadcasts
+    /// `RenderPageResolved` so every client flips the card to its inert
+    /// answered/declined state. Routing uses the entry's stored parent
+    /// connection, so a stale `conn_id` from the caller can't misroute.
+    pub async fn answer_render_page(
+        &self,
+        conn_id: &str,
+        page_id: &str,
+        answer: crate::acp::render_page::RenderPageAnswer,
+    ) -> Result<(), AcpError> {
+        let _ = conn_id;
+        let entry = self.pending_render_pages.lock().await.remove(page_id);
+        let Some(entry) = entry else {
+            // Already answered / canceled / gone elsewhere — idempotent success.
+            return Ok(());
+        };
+        let outcome = crate::acp::render_page::build_render_outcome(&entry.title, &answer);
+        // Ignore a dropped receiver: the listener may have abandoned the wait
+        // (peer-close) at the same instant; the resolved-event below still arms
+        // the card off.
+        let _ = entry.sender.send(outcome);
+        if let Some((state, emitter)) = self.get_state_and_emitter(&entry.parent_connection_id).await
+        {
+            emit_with_state(
+                &state,
+                &emitter,
+                AcpEvent::RenderPageResolved {
+                    page_id: page_id.to_string(),
+                },
+            )
+            .await;
+        }
+        Ok(())
+    }
+
+    /// Cancel a single pending rendered page (see [`Self::cancel_question`] for
+    /// the same shape). Dropping the sender unblocks the listener with a
+    /// declined outcome; the resolved broadcast disarms the card.
+    pub async fn cancel_render_page(&self, conn_id: &str, page_id: &str) {
+        let _ = conn_id;
+        let removed = self.pending_render_pages.lock().await.remove(page_id);
+        let Some(entry) = removed else {
+            return;
+        };
+        if let Some((state, emitter)) = self.get_state_and_emitter(&entry.parent_connection_id).await
+        {
+            emit_with_state(
+                &state,
+                &emitter,
+                AcpEvent::RenderPageResolved {
+                    page_id: page_id.to_string(),
+                },
+            )
+            .await;
+        }
+    }
+
+    /// Cancel every awaiting-answer page parked on a connection that is tearing
+    /// down (the turn ended, the user stopped it, or the companion's socket
+    /// closed). Mirrors [`Self::cancel_questions_by_parent`]: drain under the
+    /// lock, emit outside it.
+    pub async fn cancel_render_pages_by_parent(&self, conn_id: &str) {
+        let drained: Vec<String> = {
+            let mut reg = self.pending_render_pages.lock().await;
+            let ids: Vec<String> = reg
+                .iter()
+                .filter(|(_, e)| e.parent_connection_id == conn_id)
+                .map(|(id, _)| id.clone())
+                .collect();
+            for id in &ids {
+                reg.remove(id);
+            }
+            ids
+        };
+        if drained.is_empty() {
+            return;
+        }
+        // Best-effort card disarm; the connection may already be out of the map
+        // on the disconnect path, so tolerate `None`.
+        if let Some((state, emitter)) = self.get_state_and_emitter(conn_id).await {
+            for page_id in drained {
+                emit_with_state(&state, &emitter, AcpEvent::RenderPageResolved { page_id }).await;
+            }
+        }
+    }
+
     /// Register a pending Grok `exit_plan_mode` approval on `conn_id`, broadcast
     /// `PlanApprovalRequest` (so every attached client renders the card and a
     /// mid-turn attach recovers it from the snapshot), and return the receiver
@@ -4552,6 +4749,42 @@ impl SessionQuestionAccess for ConnectionManagerQuestionLookup {
     }
 }
 
+/// Production impl of [`crate::acp::render_page::SessionRenderPageAccess`] for
+/// the `render_page` tool bridge. Registers / cancels the parent connection's
+/// awaiting-answer page by delegating to `ConnectionManager`. Mirrors
+/// `ConnectionManagerQuestionLookup` so the listener stays unit-testable with an
+/// in-memory stub.
+#[derive(Clone)]
+pub struct ConnectionManagerRenderPageLookup {
+    pub manager: Arc<ConnectionManager>,
+}
+
+#[async_trait::async_trait]
+impl crate::acp::render_page::SessionRenderPageAccess for ConnectionManagerRenderPageLookup {
+    async fn register_render_page(
+        &self,
+        parent_connection_id: &str,
+        title: String,
+        html: String,
+    ) -> Option<crate::acp::render_page::RegisteredRenderPage> {
+        self.manager
+            .register_render_page(parent_connection_id, title, html)
+            .await
+    }
+
+    async fn cancel_render_page(&self, parent_connection_id: &str, page_id: &str) {
+        self.manager
+            .cancel_render_page(parent_connection_id, page_id)
+            .await
+    }
+
+    async fn cancel_render_pages_by_parent(&self, parent_connection_id: &str) {
+        self.manager
+            .cancel_render_pages_by_parent(parent_connection_id)
+            .await
+    }
+}
+
 /// Production impl of [`SessionPlanApprovalAccess`] for the Grok `exit_plan_mode`
 /// ext bridge. Registers / cancels the parent connection's pending plan approval
 /// by delegating to `ConnectionManager`. Mirrors `ConnectionManagerQuestionLookup`
diff --git a/src-tauri/src/acp/mod.rs b/src-tauri/src/acp/mod.rs
index cd9fcb33b3..8a18b3ee1c 100644
--- a/src-tauri/src/acp/mod.rs
+++ b/src-tauri/src/acp/mod.rs
@@ -47,6 +47,7 @@ pub mod preflight;
 pub mod prompt_hydration;
 pub mod provider_models;
 pub mod question;
+pub mod render_page;
 pub mod registry;
 pub mod remote_registry;
 pub(crate) mod reported_usage;
diff --git a/src-tauri/src/acp/render_page.rs b/src-tauri/src/acp/render_page.rs
new file mode 100644
index 0000000000..d69e9bd9a0
--- /dev/null
+++ b/src-tauri/src/acp/render_page.rs
@@ -0,0 +1,664 @@
+//! Rendered-page tool ("show a page, optionally wait for an answer on it").
+//!
+//! Mid-turn an agent can draw a finished, self-contained HTML page inline in
+//! the chat — the `render_page` MCP tool exposed by `codeg-mcp` (a port of
+//! openchamber's `openchamber_render`, whose plain-HTML-plus-ready-classes
+//! design deliberately avoids a generative-UI component library). Without
+//! `awaitAnswer` the tool is fire-and-forget: the page is a card the chat
+//! renders straight from the tool call's own input (live AND on transcript
+//! replay), and the call returns a `shown` note immediately. With
+//! `awaitAnswer` the call additionally BLOCKS until the user submits an answer
+//! on the page — the same park-the-tool-call shape as
+//! [`crate::acp::question`]'s `ask_user_question`, one slot per connection,
+//! peer-close teardown, snapshot recovery — except the answer is arbitrary JSON
+//! the page itself composes, not per-question labels.
+//!
+//! This module holds the pieces shared across layers (mirroring
+//! `question.rs`):
+//!   * [`RenderPageSpec`] — one validated call's worth of page.
+//!   * [`PendingRenderPageState`] — the awaiting-answer page stored on the
+//!     session and carried on the snapshot.
+//!   * [`RenderPageAnswer`] (frontend → backend) / [`RenderPageOutcome`]
+//!     (back to the blocked tool).
+//!   * [`SessionRenderPageAccess`] — the listener-facing trait the production
+//!     `ConnectionManager` implements.
+//!   * [`RenderPageRuntimeConfig`] — the hot-swappable "is the feature on?"
+//!     flag, read at MCP injection time.
+
+use std::sync::Arc;
+
+use async_trait::async_trait;
+use chrono::{DateTime, Utc};
+use serde::{Deserialize, Serialize};
+use serde_json::Value;
+use tokio::sync::{oneshot, RwLock};
+
+/// Max characters of the page's `html`. Mirrors openchamber's
+/// `RENDER_PAGE_MAX_HTML_LENGTH`: the page rides inside the tool-call input
+/// that the agent's transcript stores and every client receives, so the bound
+/// caps one card's payload, not a library of them.
+pub const MAX_HTML_CHARS: usize = 200_000;
+/// Max characters of the page title (agent-given or extracted from the page).
+pub const MAX_TITLE_CHARS: usize = 120;
+/// Max characters of the answer summary the page submits — a few words of the
+/// user's own language, never a document.
+pub const MAX_SUMMARY_CHARS: usize = 500;
+/// Max serialized-JSON length of the answer `data`. An answer is a choice plus
+/// a few values; the agent builds the rest itself.
+pub const MAX_ANSWER_DATA_CHARS: usize = 16_000;
+/// What an untitled page is called when the page itself carries no usable
+/// heading either.
+pub const FALLBACK_TITLE: &str = "Page";
+
+/// The agent-facing notes the tool result carries (the LLM reads these, so
+/// they stay in English — same audience convention as the ask tool's notes).
+pub const SHOWN_NOTE: &str = "Shown to the user in the chat above your reply. \
+    Don't announce, describe or restate the page; reply with only what it \
+    doesn't already say.";
+pub const ANSWERED_NOTE: &str = "The user answered on the page. summary is \
+    their choice in words, data is what the page sent. Continue the task from \
+    it; the chat already shows the summary under the page, so don't repeat it \
+    back.";
+pub const DECLINED_NOTE: &str = "The user did not answer on the page (they \
+    dismissed it, wrote in the chat instead, or the turn ended); proceed using \
+    your best judgment and reasonable defaults.";
+
+/// One validated `render_page` call. `title` is always present: the caller's
+/// title, else the page's own `<title>` / first h1-h3, else
+/// [`FALLBACK_TITLE`] (openchamber learned that a required title makes weaker
+/// models split the call in two and lose the page; the extraction is the fix).
+#[derive(Debug, Clone, PartialEq, Eq)]
+pub struct RenderPageSpec {
+    pub title: String,
+    pub html: String,
+    pub await_answer: bool,
+}
+
+/// The pending (awaiting-answer) page stored on
+/// `SessionState.pending_render_page` and carried on `to_snapshot()` so a
+/// client attaching mid-turn re-arms the submit bridge on the card even though
+/// the one-shot `RenderPageRequest` event won't replay for it. The card itself
+/// renders from the tool call's input; this state is what the frontend matches
+/// its in-place card against (by `html` — the page's own content is its
+/// identity) to know WHICH rendered card is the live, answerable one.
+#[derive(Debug, Clone, PartialEq, Eq, Serialize, Deserialize)]
+pub struct PendingRenderPageState {
+    pub page_id: String,
+    pub title: String,
+    pub html: String,
+    pub created_at: DateTime<Utc>,
+}
+
+/// The user's submission for a pending page (frontend → backend). `summary` is
+/// the choice in a few words (rendered under the card); `data` is the JSON the
+/// page's script sends to `codeg.render.submit`. `declined` is set when the
+/// user dismissed the card instead of answering — the agent then proceeds with
+/// its own judgment. camelCase on the wire — constructed by the frontend.
+#[derive(Debug, Clone, Default, PartialEq, Serialize, Deserialize)]
+#[serde(rename_all = "camelCase")]
+pub struct RenderPageAnswer {
+    #[serde(default)]
+    pub summary: Option<String>,
+    #[serde(default)]
+    pub data: Option<Value>,
+    #[serde(default)]
+    pub declined: bool,
+}
+
+/// The resolved outcome delivered over the broker socket to the blocked tool.
+/// Self-describing (the companion renders it without holding the page).
+#[derive(Debug, Clone, PartialEq, Serialize, Deserialize)]
+pub struct RenderPageOutcome {
+    pub answered: bool,
+    #[serde(default)]
+    pub summary: String,
+    #[serde(default)]
+    pub data: Value,
+    #[serde(default, skip_serializing_if = "Option::is_none")]
+    pub note: Option<String>,
+}
+
+/// What [`SessionRenderPageAccess::register_render_page`] hands back to the
+/// listener: the new page id plus the receiver to await the user's answer on.
+pub struct RegisteredRenderPage {
+    pub page_id: String,
+    pub answer_rx: oneshot::Receiver<RenderPageOutcome>,
+}
+
+/// Listener-facing access to register / cancel a pending rendered page on a
+/// parent connection. The production impl (`ConnectionManagerRenderPageLookup`)
+/// wraps the `ConnectionManager`; tests use an in-memory stub. Mirrors
+/// [`crate::acp::question::SessionQuestionAccess`].
+#[async_trait]
+pub trait SessionRenderPageAccess: Send + Sync {
+    /// Register a waiting page on the parent connection (resolved from the
+    /// per-launch token), broadcast it to every attached client, and return a
+    /// receiver that resolves when the user answers (or the page is canceled).
+    /// `None` when the connection is gone — nothing to show — or when it
+    /// already has a waiting page (one card per turn; the refused second call
+    /// resolves as an unanswered outcome so the agent proceeds).
+    async fn register_render_page(
+        &self,
+        parent_connection_id: &str,
+        title: String,
+        html: String,
+    ) -> Option<RegisteredRenderPage>;
+
+    /// Cancel a waiting page — the companion's tool call was canceled
+    /// (peer-close) or the connection is tearing down. Removes it and clears
+    /// the answerable state on every client's card. No-op if it was already
+    /// answered / gone.
+    async fn cancel_render_page(&self, parent_connection_id: &str, page_id: &str);
+
+    /// Cancel every waiting page parked on a connection that is tearing down.
+    /// Called from the `run_connection` cleanup guard and the turn-exit
+    /// sweeps, mirroring `cancel_questions_by_parent`.
+    async fn cancel_render_pages_by_parent(&self, parent_connection_id: &str);
+}
+
+/// Validate + parse the MCP `render_page` arguments into a [`RenderPageSpec`].
+/// A malformed call is rejected synchronously with a message the LLM can fix,
+/// rather than round-tripping bad data. `awaitAnswer` must be a real boolean
+/// (a stringified `"true"` is the model's mistake, not ours to guess — same
+/// strictness openchamber applies so the retry lands corrected); a missing one
+/// means show-only. A missing / blank title is extracted from the page itself
+/// ([`render_page_title_from_html`]), else [`FALLBACK_TITLE`].
+pub fn parse_render_page_arguments(arguments: &Value) -> Result<RenderPageSpec, String> {
+    let html = arguments
+        .get("html")
+        .and_then(|v| v.as_str())
+        .filter(|s| !s.trim().is_empty())
+        .ok_or_else(
+            || "render_page requires a non-empty `html` string: one complete, self-contained HTML document. Send html and title together in one call".to_string(),
+        )?;
+    if html.chars().count() > MAX_HTML_CHARS {
+        return Err(format!(
+            "render_page `html` is {chars} characters; the limit is {MAX_HTML_CHARS}. Make the page smaller, for example by drawing data with a script instead of writing out every element",
+            chars = html.chars().count()
+        ));
+    }
+    let given_title = arguments
+        .get("title")
+        .and_then(|v| v.as_str())
+        .map(str::trim)
+        .filter(|s| !s.is_empty());
+    if let Some(t) = given_title {
+        if t.chars().count() > MAX_TITLE_CHARS {
+            return Err(format!(
+                "render_page `title` is {} characters; the limit is {MAX_TITLE_CHARS}",
+                t.chars().count()
+            ));
+        }
+    }
+    let await_answer = match arguments.get("awaitAnswer") {
+        None | Some(Value::Null) => false,
+        Some(Value::Bool(b)) => *b,
+        Some(other) => {
+            return Err(format!(
+                "render_page `awaitAnswer` must be a boolean, got {other}"
+            ));
+        }
+    };
+    let title = given_title
+        .map(str::to_string)
+        .or_else(|| render_page_title_from_html(html))
+        .unwrap_or_else(|| FALLBACK_TITLE.to_string());
+    Ok(RenderPageSpec {
+        title,
+        html: html.to_string(),
+        await_answer,
+    })
+}
+
+/// Re-assert the size bounds on a page arriving over the broker socket. The
+/// companion validated before sending, but the socket is only token-gated, so
+/// a hand-rolled client must not push an oversized `html` straight into the
+/// broadcast `RenderPageRequest` event and the `pending_render_page` snapshot
+/// (bounds mirror [`parse_render_page_arguments`]).
+pub fn validate_page(title: &str, html: &str) -> Result<(), String> {
+    if title.trim().is_empty() {
+        return Err("rendered page requires a non-empty title".to_string());
+    }
+    if title.chars().count() > MAX_TITLE_CHARS {
+        return Err(format!(
+            "rendered page title exceeds {MAX_TITLE_CHARS} characters"
+        ));
+    }
+    if html.trim().is_empty() {
+        return Err("rendered page requires a non-empty html document".to_string());
+    }
+    if html.chars().count() > MAX_HTML_CHARS {
+        return Err(format!(
+            "rendered page html exceeds {MAX_HTML_CHARS} characters"
+        ));
+    }
+    Ok(())
+}
+
+/// Normalize + validate the user's submission into the self-describing
+/// [`RenderPageOutcome`] the blocked tool receives. `acp_answer_render_page` is
+/// a plain API a stale or hand-rolled client can hit directly, so the
+/// authoritative size rules live here: a blank summary degrades to the page
+/// title, an over-long one is truncated (never rejected — the user already
+/// answered), and oversized `data` is dropped with a note so the agent learns
+/// the answer arrived but not through a silent truncation of JSON.
+pub fn build_render_outcome(title: &str, answer: &RenderPageAnswer) -> RenderPageOutcome {
+    if answer.declined {
+        return RenderPageOutcome {
+            answered: false,
+            summary: String::new(),
+            data: Value::Null,
+            note: Some(DECLINED_NOTE.to_string()),
+        };
+    }
+    let summary = answer
+        .summary
+        .as_deref()
+        .map(str::trim)
+        .filter(|s| !s.is_empty())
+        .map(|s| s.chars().take(MAX_SUMMARY_CHARS).collect())
+        .unwrap_or_else(|| title.to_string());
+    let data = answer.data.clone().unwrap_or(Value::Null);
+    let serialized = data.to_string();
+    if serialized.chars().count() > MAX_ANSWER_DATA_CHARS {
+        return RenderPageOutcome {
+            answered: true,
+            summary,
+            data: Value::Null,
+            note: Some(format!(
+                "The page's answer data was {len} characters as JSON, over the {MAX_ANSWER_DATA_CHARS}-character limit, so it was dropped; only the summary arrived.",
+                len = serialized.chars().count()
+            )),
+        };
+    }
+    RenderPageOutcome {
+        answered: true,
+        summary,
+        data,
+        note: Some(ANSWERED_NOTE.to_string()),
+    }
+}
+
+/// Name an untitled page after its own content: the `<title>` element, else
+/// the first h1-h3 heading, else nothing. Port of openchamber's
+/// `renderPageTitleFromHtml`. The result is already bounded to
+/// [`MAX_TITLE_CHARS`] (an extraction truncates; only an agent-PROVIDED
+/// over-long title is an error — openchamber's split, learned from weaker
+/// models splitting title and html into two calls).
+pub fn render_page_title_from_html(html: &str) -> Option<String> {
+    let text = element_text(html, "title")
+        .or_else(|| element_text(html, "h1"))
+        .or_else(|| element_text(html, "h2"))
+        .or_else(|| element_text(html, "h3"))?;
+    let trimmed = text.chars().take(MAX_TITLE_CHARS).collect::<String>();
+    let trimmed = trimmed.trim();
+    (!trimmed.is_empty()).then(|| trimmed.to_string())
+}
+
+/// Extract the visible text of the first `<tag …>…</tag>` element, with inline
+/// markup stripped, the six title entities decoded, and whitespace collapsed.
+/// Manual scanning rather than a regex dependency: the shape is three
+/// well-known tags, and a case-insensitive ASCII pre-pass makes the whole walk
+/// one `to_ascii_lowercase` over the document.
+fn element_text(html: &str, tag: &str) -> Option<String> {
+    let lower = html.to_ascii_lowercase();
+    let open = format!("<{tag}");
+    let close = format!("</{tag}");
+    let open_bytes = open.as_bytes();
+    let close_bytes = close.as_bytes();
+    let hay = lower.as_bytes();
+    let mut from = 0usize;
+    while let Some(rel) = lower[from..].find(&open) {
+        let start = from + rel;
+        from = start + open_bytes.len();
+        // The tag name must END at a boundary: `<time>` must not match `<title`
+        // scans nor `<h1` admit `<hr`.
+        match hay.get(from) {
+            Some(b'>') | Some(b' ') | Some(b'\t') | Some(b'\n') | Some(b'\r') | Some(b'/') => {}
+            _ => continue,
+        }
+        // Skip the open tag's attributes; bail on a tag that never closes.
+        // A `>` inside a quoted attribute value is part of the value, not the
+        // tag end, so the skip tracks quotes (`<h1 id="x>y">` opens at `>` #2).
+        let Some(content_start) = open_tag_end(&lower, from) else {
+            continue;
+        };
+        let Some(cl_rel) = lower[content_start..].find(&close) else {
+            continue;
+        };
+        let content = &html[content_start..content_start + cl_rel];
+        return Some(clean_title_text(content));
+    }
+    let _ = open_bytes;
+    let _ = close_bytes;
+    None
+}
+
+/// The byte just past the `>` ending an open tag whose name ended at `from`
+/// (into the lowercased document), skipping quoted attribute values.
+fn open_tag_end(lower: &str, from: usize) -> Option<usize> {
+    let bytes = lower.as_bytes();
+    let mut quote: Option<u8> = None;
+    let mut i = from;
+    while i < bytes.len() {
+        match bytes[i] {
+            b'"' | b'\'' if quote.is_none() => quote = Some(bytes[i]),
+            c if quote == Some(c) => quote = None,
+            b'>' if quote.is_none() => return Some(i + 1),
+            _ => {}
+        }
+        i += 1;
+    }
+    None
+}
+
+/// Strip child markup, decode the six title entities, and collapse whitespace.
+/// Quote-aware like [`open_tag_end`]: an attribute's `>` (`<code class="x>y">`)
+/// must not end the tag, or the rest of the value leaks into the title.
+fn clean_title_text(raw: &str) -> String {
+    let mut out = String::with_capacity(raw.len());
+    let mut inside_tag = false;
+    let mut quote: Option<char> = None;
+    for ch in raw.chars() {
+        if inside_tag {
+            match quote {
+                Some(q) => {
+                    if ch == q {
+                        quote = None;
+                    }
+                }
+                None => {
+                    if ch == '"' || ch == '\'' {
+                        quote = Some(ch);
+                    } else if ch == '>' {
+                        inside_tag = false;
+                        out.push(' ');
+                    }
+                }
+            }
+        } else if ch == '<' {
+            inside_tag = true;
+        } else {
+            out.push(ch);
+        }
+    }
+    let out = decode_title_entities(&out);
+    out.split_whitespace().collect::<Vec<_>>().join(" ")
+}
+
+/// The named entities openchamber's map covers (`&amp;` `&lt;` `&gt;` `&quot;`
+/// `&#39;` `&apos;` `&nbsp;`). Numeric entities are rare in a title and stay
+/// verbatim rather than mis-decoding. One pass, left to right: a chained
+/// `replace` would decode `&amp;lt;` twice (to `<` where the page wrote the
+/// literal entity `&lt;`).
+fn decode_title_entities(text: &str) -> String {
+    if !text.contains('&') {
+        return text.to_string();
+    }
+    const NAMED: [(&str, &str); 7] = [
+        ("&amp;", "&"),
+        ("&lt;", "<"),
+        ("&gt;", ">"),
+        ("&quot;", "\""),
+        ("&#39;", "'"),
+        ("&apos;", "'"),
+        ("&nbsp;", " "),
+    ];
+    let mut out = String::with_capacity(text.len());
+    let mut rest = text;
+    while let Some(pos) = rest.find('&') {
+        out.push_str(&rest[..pos]);
+        let window = &rest[pos..];
+        match NAMED.iter().find(|(entity, _)| window.starts_with(entity)) {
+            Some((entity, decoded)) => {
+                out.push_str(decoded);
+                rest = &window[entity.len()..];
+            }
+            None => {
+                out.push('&');
+                rest = &window[1..];
+            }
+        }
+    }
+    out.push_str(rest);
+    out
+}
+
+/// True when a host's name for a tool is codeg's OWN `render_page` companion
+/// tool, in whatever spelling the host composed it. Both halves required, and
+/// the match is anchored at the END — same rules and same reasoning as
+/// [`crate::acp::question::is_codeg_ask_tool_name`]. Auto-approving codeg's own
+/// render tool is not a permission being skipped: its entire effect is to put a
+/// page on the chat, and for a waiting page the user's answer IS the next
+/// dialog.
+pub fn is_codeg_render_tool_name(name: &str) -> bool {
+    let normalized = name
+        .trim()
+        .to_ascii_lowercase()
+        .replace(['-', ' ', '.', '/', ':'], "_");
+    normalized.ends_with("render_page") && normalized.contains("codeg_mcp")
+}
+
+/// The persisted `render_page` settings.
+#[derive(Debug, Clone, Default, PartialEq, Eq)]
+pub struct RenderPageConfig {
+    pub enabled: bool,
+}
+
+/// Shared, hot-swappable handle to [`RenderPageConfig`]. Cloned into
+/// `DelegationInjection` (read at injection) and `AppState` (updated on save).
+/// Mirrors [`crate::acp::question::QuestionRuntimeConfig`].
+#[derive(Clone, Default)]
+pub struct RenderPageRuntimeConfig {
+    inner: Arc<RwLock<RenderPageConfig>>,
+}
+
+impl RenderPageRuntimeConfig {
+    pub fn new() -> Self {
+        Self::default()
+    }
+
+    pub async fn snapshot(&self) -> RenderPageConfig {
+        self.inner.read().await.clone()
+    }
+
+    pub async fn set(&self, cfg: RenderPageConfig) {
+        *self.inner.write().await = cfg;
+    }
+
+    /// Convenience read used at MCP injection time.
+    pub async fn is_enabled(&self) -> bool {
+        self.inner.read().await.enabled
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+    use serde_json::json;
+
+    #[test]
+    fn parse_happy_path_keeps_given_title() {
+        let spec = parse_render_page_arguments(&json!({
+            "html": "<html><body><h1>Hi</h1></body></html>",
+            "title": "Cost breakdown",
+            "awaitAnswer": true,
+        }))
+        .unwrap();
+        assert_eq!(spec.title, "Cost breakdown");
+        assert!(spec.await_answer);
+        assert!(spec.html.contains("<h1>"));
+    }
+
+    #[test]
+    fn parse_requires_html() {
+        assert!(parse_render_page_arguments(&json!({ "title": "x" })).is_err());
+        assert!(parse_render_page_arguments(&json!({ "html": "   " })).is_err());
+    }
+
+    #[test]
+    fn parse_rejects_oversized_html_by_char_count_not_bytes() {
+        let html = "é".repeat(MAX_HTML_CHARS + 1); // 2 bytes per char
+        let err = parse_render_page_arguments(&json!({ "html": html })).unwrap_err();
+        assert!(err.contains("the limit is 200000"), "{err}");
+    }
+
+    #[test]
+    fn parse_rejects_stringified_await_answer() {
+        let err =
+            parse_render_page_arguments(&json!({ "html": "<b>x</b>", "awaitAnswer": "true" }))
+                .unwrap_err();
+        assert!(err.contains("must be a boolean"), "{err}");
+    }
+
+    #[test]
+    fn parse_rejects_over_long_given_title() {
+        let err = parse_render_page_arguments(&json!({
+            "html": "<b>x</b>",
+            "title": "t".repeat(MAX_TITLE_CHARS + 1),
+        }))
+        .unwrap_err();
+        assert!(err.contains("120"), "{err}");
+    }
+
+    #[test]
+    fn extracts_title_in_preference_order() {
+        let with_both = "<html><head><title> Real Title </title></head><body><h1>Heading</h1>";
+        assert_eq!(render_page_title_from_html(with_both).as_deref(), Some("Real Title"));
+        let only_h2 = "<body><p>intro</p><h2 class='x'>Second <b>Level</b> &amp; more</h2></body>";
+        assert_eq!(
+            render_page_title_from_html(only_h2).as_deref(),
+            Some("Second Level & more")
+        );
+        assert_eq!(render_page_title_from_html("<body><p>nothing</p></body>"), None);
+        // An explicit title therefore wins over both; absent ones fall back.
+        let spec = parse_render_page_arguments(&json!({ "html": with_both })).unwrap();
+        assert_eq!(spec.title, "Real Title");
+        let spec = parse_render_page_arguments(&json!({ "html": "<body>no headings</body>" }))
+            .unwrap();
+        assert_eq!(spec.title, FALLBACK_TITLE);
+    }
+
+    #[test]
+    fn title_extraction_respects_tag_boundaries() {
+        // `<time>` must not match a `<title` scan; `<hr>` must not match `<h1`.
+        assert_eq!(render_page_title_from_html("<time>2:00</time>"), None);
+        assert_eq!(render_page_title_from_html("<hr/>"), None);
+        // Attribute-bearing open tags still match.
+        assert_eq!(
+            render_page_title_from_html(r#"<h1 id="x" class='y'>Heading</h1>"#).as_deref(),
+            Some("Heading")
+        );
+        // Nested inline markup collapses; entities decode.
+        assert_eq!(
+            render_page_title_from_html("<title>a &lt;b&gt; &nbsp;c</title>").as_deref(),
+            Some("a <b> c")
+        );
+    }
+
+    #[test]
+    fn a_gt_inside_an_attribute_is_not_the_tag_end() {
+        // Agents write exactly this shape (`<code class="x>y">`); a scan that
+        // ends the tag at the value's `>` leaks `y">` into the title.
+        assert_eq!(
+            render_page_title_from_html(r#"<title>Q&A <code class="x>y">a&gt;b</code> end</title>"#)
+                .as_deref(),
+            Some("Q&A a>b end")
+        );
+        assert_eq!(
+            render_page_title_from_html(r#"<h1 id="x>y">Heading</h1>"#).as_deref(),
+            Some("Heading")
+        );
+    }
+
+    #[test]
+    fn entities_decode_exactly_once() {
+        // The page wrote the literal entity `&lt;` (escaped as `&amp;lt;`);
+        // a chained replace would decode it twice and show a bare `<`.
+        assert_eq!(
+            render_page_title_from_html("<title>&amp;lt;b&amp;gt; & &amp;amp;</title>")
+                .as_deref(),
+            Some("&lt;b&gt; & &amp;")
+        );
+    }
+
+    #[test]
+    fn extraction_truncates_but_a_given_title_errors() {
+        let long_title = "字".repeat(MAX_TITLE_CHARS + 50);
+        assert_eq!(
+            render_page_title_from_html(&format!("<title>{long_title}</title>"))
+                .map(|t| t.chars().count()),
+            Some(MAX_TITLE_CHARS)
+        );
+    }
+
+    #[test]
+    fn validate_page_bounds_the_socket_path() {
+        assert!(validate_page("t", "<b>x</b>").is_ok());
+        assert!(validate_page("", "x").is_err());
+        assert!(validate_page("t", "  ").is_err());
+        assert!(validate_page(&"t".repeat(MAX_TITLE_CHARS + 1), "x").is_err());
+        assert!(validate_page("t", &"x".repeat(MAX_HTML_CHARS + 1)).is_err());
+    }
+
+    #[test]
+    fn outcome_decline_carries_no_answer() {
+        let o = build_render_outcome("T", &RenderPageAnswer {
+            declined: true,
+            ..Default::default()
+        });
+        assert!(!o.answered);
+        assert_eq!(o.note.as_deref(), Some(DECLINED_NOTE));
+    }
+
+    #[test]
+    fn outcome_truncates_summary_and_drops_oversized_data() {
+        let o = build_render_outcome(
+            "T",
+            &RenderPageAnswer {
+                summary: Some("s".repeat(MAX_SUMMARY_CHARS + 10)),
+                data: Some(json!({ "ok": true })),
+                declined: false,
+            },
+        );
+        assert!(o.answered);
+        assert_eq!(o.summary.chars().count(), MAX_SUMMARY_CHARS);
+        assert_eq!(o.data, json!({ "ok": true }));
+
+        let big = "d".repeat(MAX_ANSWER_DATA_CHARS + 1);
+        let o = build_render_outcome(
+            "T",
+            &RenderPageAnswer {
+                summary: None,
+                data: Some(Value::String(big)),
+                declined: false,
+            },
+        );
+        assert!(o.answered);
+        // A blank summary falls back to the page title, never to empty.
+        assert_eq!(o.summary, "T");
+        assert_eq!(o.data, Value::Null);
+        assert!(o.note.unwrap().contains("dropped"));
+    }
+
+    #[test]
+    fn is_codeg_render_tool_name_accepts_host_spellings() {
+        for spelling in [
+            "mcp__codeg-mcp__render_page",
+            "codeg-mcp/render_page",
+            "codeg-mcp: render_page",
+            "MCP__Codeg-MCP__Render_Page",
+        ] {
+            assert!(is_codeg_render_tool_name(spelling), "{spelling}");
+        }
+        for other in [
+            "mcp__other-server__render_page",
+            "render_page",
+            "mcp__codeg-mcp__ask_user_question",
+            "mcp__codeg-mcp__render_page_again",
+            "",
+        ] {
+            assert!(!is_codeg_render_tool_name(other), "{other}");
+        }
+    }
+}
diff --git a/src-tauri/src/acp/session_state.rs b/src-tauri/src/acp/session_state.rs
index f17608fcdf..406128d46d 100644
--- a/src-tauri/src/acp/session_state.rs
+++ b/src-tauri/src/acp/session_state.rs
@@ -313,6 +313,17 @@ pub struct SessionState {
     /// by `approval_id`.
     pub pending_plan_approval: Option<PendingPlanApprovalState>,
 
+    /// The agent's in-flight `render_page` call WITH `awaitAnswer` (the page
+    /// awaiting the user's submit). Set by `RenderPageRequest`, cleared by a
+    /// matching `RenderPageResolved` (and defensively on `TurnComplete` /
+    /// `UserMessage`). Carried on `to_snapshot()` so a client attaching mid-turn
+    /// knows WHICH rendered-page card is the live, answerable one — the card
+    /// itself renders from the tool call's input, so the event and the snapshot
+    /// only carry the answerable flag plus the identity fields. At most one is
+    /// pending (the agent is blocked in the tool call); the backend's
+    /// `pending_render_pages` registry keys the answer one-shot.
+    pub pending_render_page: Option<crate::acp::render_page::PendingRenderPageState>,
+
     /// In-flight (running) sub-agent delegations keyed by `parent_tool_use_id`.
     /// `DelegationStarted` inserts; `DelegationCompleted` removes. UNLIKE
     /// `active_tool_calls`, NOT cleared on `TurnComplete` (an async delegation
@@ -888,6 +899,7 @@ impl SessionState {
             permission_matched_calls: BTreeSet::new(),
             pending_permission: None,
             pending_question: None,
+            pending_render_page: None,
             pending_plan_approval: None,
             active_delegations: BTreeMap::new(),
             feedback: Vec::new(),
@@ -1307,6 +1319,27 @@ impl SessionState {
                     self.pending_plan_approval = None;
                 }
             }
+            AcpEvent::RenderPageRequest {
+                page_id,
+                title,
+                html,
+            } => {
+                self.pending_render_page = Some(crate::acp::render_page::PendingRenderPageState {
+                    page_id: page_id.clone(),
+                    title: title.clone(),
+                    html: html.clone(),
+                    created_at: Utc::now(),
+                });
+            }
+            AcpEvent::RenderPageResolved { page_id } => {
+                // Same id-match guard as the question / plan-approval clears.
+                if matches!(
+                    &self.pending_render_page,
+                    Some(p) if p.page_id == *page_id,
+                ) {
+                    self.pending_render_page = None;
+                }
+            }
             AcpEvent::TurnComplete { stop_reason, .. } => {
                 // Diagnostic only (no behavior change): pairs with the
                 // StatusChanged log above. This is the ACTUAL point the turn
@@ -1448,6 +1481,10 @@ impl SessionState {
                 // responder is drained by the connection's teardown/cancel path;
                 // this just keeps the snapshot honest if the turn settles first.
                 self.pending_plan_approval = None;
+                // And a blocked `render_page` answer: the awaiting tool call is
+                // declined by the same turn-exit sweeps; the page card itself
+                // stays in the transcript, only its answerable state ends here.
+                self.pending_render_page = None;
                 self.status = ConnectionStatus::Connected;
             }
             AcpEvent::UserMessage { message_id, blocks } => {
@@ -1485,6 +1522,10 @@ impl SessionState {
                 // queued prompt sent instead of answering) must not leave a dead
                 // approval in the snapshot for a mid-turn attach to render.
                 self.pending_plan_approval = None;
+                // Same for a stale awaiting page (a prompt sent past it is the
+                // user choosing to answer in chat — see the answer command's
+                // decline-on-supersede note).
+                self.pending_render_page = None;
                 // Starting a prompt past an active AIR failure acknowledges it
                 // — settle EVERYTHING, mirroring the frontend reducer's
                 // prompt-start settle so a client hydrating mid-turn doesn't
@@ -2053,6 +2094,15 @@ impl SessionState {
                 title,
             });
         }
+        if let Some(r) = self.pending_render_page.as_ref() {
+            // The page's own title IS the label — already a one-line heading by
+            // construction (extraction collapses whitespace and caps at 120).
+            return Some(BlockedOn {
+                kind: BlockedKind::RenderPage,
+                request_id: r.page_id.clone(),
+                title: Some(truncate_one_line(r.title.trim(), max_chars)),
+            });
+        }
         None
     }
 
@@ -2423,6 +2473,7 @@ impl SessionState {
             pending_permission: self.pending_permission.clone(),
             pending_question: self.pending_question.clone(),
             pending_plan_approval: self.pending_plan_approval.clone(),
+            pending_render_page: self.pending_render_page.clone(),
             pending_user_message: self.pending_user_message.clone(),
             active_delegations: self.active_delegations.values().cloned().collect(),
             feedback: self.feedback.clone(),
@@ -2523,6 +2574,13 @@ pub struct LiveSessionSnapshot {
     /// pre-feature shape.
     #[serde(default, skip_serializing_if = "Option::is_none")]
     pub pending_plan_approval: Option<PendingPlanApprovalState>,
+    /// The agent's in-flight awaiting-answer `render_page` (see
+    /// `SessionState.pending_render_page`). `#[serde(default)]` so older
+    /// payloads deserialize; `skip_serializing_if` keeps the common no-page case
+    /// off the wire so every snapshot stays byte-identical with the
+    /// pre-feature shape.
+    #[serde(default, skip_serializing_if = "Option::is_none")]
+    pub pending_render_page: Option<crate::acp::render_page::PendingRenderPageState>,
     /// The in-flight user prompt for the current turn (see
     /// `SessionState.pending_user_message`). `#[serde(default)]` so older
     /// payloads still deserialize; `skip_serializing_if` so the no-pending case
diff --git a/src-tauri/src/acp/types.rs b/src-tauri/src/acp/types.rs
index 44a53ff4c0..4fa3a87d2b 100644
--- a/src-tauri/src/acp/types.rs
+++ b/src-tauri/src/acp/types.rs
@@ -892,6 +892,26 @@ pub enum AcpEvent {
     /// canceled (the connection drained). Carries only the `approval_id`; clients
     /// clear the matching card. Idempotent on apply.
     PlanApprovalResolved { approval_id: String },
+    /// An agent called the `render_page` MCP tool WITH `awaitAnswer`: a finished
+    /// HTML page the user can interact with, whose submit (or dismissal) the
+    /// blocked tool call waits on. Broadcast so every client viewing this
+    /// conversation marks the matching in-place page card as answerable, and
+    /// captured into `SessionState.pending_render_page` so a client attaching
+    /// mid-turn recovers it from the snapshot. Clients match this event's page
+    /// to its card by `html` equality (the tool call's input carries the same
+    /// document; at most one page per connection can wait at a time). Only
+    /// awaiting pages get an event — a show-only page is a plain card rendered
+    /// straight from the tool input, live and on replay alike.
+    RenderPageRequest {
+        page_id: String,
+        title: String,
+        html: String,
+    },
+    /// A previously-pending rendered page was answered (from any client) or
+    /// canceled (the tool call was aborted / the turn ended / the user chose to
+    /// answer in chat). Carries only the `page_id`; clients flip the matching
+    /// card to its inert state. Idempotent on apply.
+    RenderPageResolved { page_id: String },
     /// The agent's effective settings (env vars / model provider / native config
     /// files) changed AFTER this connection was spawned, so the running process
     /// is still using its launch-time config. Emitted by
diff --git a/src-tauri/src/app_state.rs b/src-tauri/src/app_state.rs
index 77ab999fe2..283adf4214 100644
--- a/src-tauri/src/app_state.rs
+++ b/src-tauri/src/app_state.rs
@@ -54,6 +54,11 @@ pub struct AppState {
     /// the question settings command on save. Populated at startup by
     /// `apply_persisted_question_config`.
     pub question_config: crate::acp::question::QuestionRuntimeConfig,
+    /// Hot-swappable render-page (`render_page`) enable flag. Shared with the
+    /// `DelegationInjection` so MCP injection reads it, and updated by the
+    /// render-page settings command on save. Populated at startup by
+    /// `apply_persisted_render_config`.
+    pub render_config: crate::acp::render_page::RenderPageRuntimeConfig,
     /// Hot-swappable get-session-info (`get_session_info`) enable flag. Shared
     /// with the `DelegationInjection` so MCP injection reads it, and updated by
     /// the session-info settings command on save. Populated at startup by
@@ -131,6 +136,7 @@ pub fn default_chat_channel_manager() -> ChatChannelManager {
 /// The listener task is _not_ spawned here — callers spawn it after they
 /// own an `Arc<AppState>` (or the relevant pieces) so the listener can
 /// borrow the long-lived state without circular Arc shenanigans.
+#[allow(clippy::type_complexity)]
 pub fn build_delegation_stack(
     connection_manager: &ConnectionManager,
     db_conn: sea_orm::DatabaseConnection,
@@ -141,6 +147,7 @@ pub fn build_delegation_stack(
     PathBuf,
     crate::acp::feedback::FeedbackRuntimeConfig,
     crate::acp::question::QuestionRuntimeConfig,
+    crate::acp::render_page::RenderPageRuntimeConfig,
     crate::acp::session_info::SessionInfoRuntimeConfig,
     crate::acp::chat_authoring::ChatAuthoringRuntimeConfig,
     crate::acp::browser_tools::BrowserToolsRuntimeConfig,
@@ -198,6 +205,7 @@ pub fn build_delegation_stack(
     let socket_path = default_socket_path(&std::env::temp_dir());
     let feedback = crate::acp::feedback::FeedbackRuntimeConfig::new();
     let ask = crate::acp::question::QuestionRuntimeConfig::new();
+    let render = crate::acp::render_page::RenderPageRuntimeConfig::new();
     let sessions = crate::acp::session_info::SessionInfoRuntimeConfig::new();
     let authoring = crate::acp::chat_authoring::ChatAuthoringRuntimeConfig::new();
     let browser = crate::acp::browser_tools::BrowserToolsRuntimeConfig::new();
@@ -212,6 +220,7 @@ pub fn build_delegation_stack(
         agent_availability,
         feedback: feedback.clone(),
         ask: ask.clone(),
+        render: render.clone(),
         sessions: sessions.clone(),
         authoring: authoring.clone(),
         browser: browser.clone(),
@@ -221,6 +230,10 @@ pub fn build_delegation_stack(
         questions: Arc::new(crate::acp::manager::ConnectionManagerQuestionLookup {
             manager: Arc::new(connection_manager.clone_ref()),
         }) as Arc<dyn crate::acp::question::SessionQuestionAccess>,
+        // Same pattern for a parked `render_page` answer.
+        renders: Arc::new(crate::acp::manager::ConnectionManagerRenderPageLookup {
+            manager: Arc::new(connection_manager.clone_ref()),
+        }) as Arc<dyn crate::acp::render_page::SessionRenderPageAccess>,
         // Grok `exit_plan_mode` bridge — always wired (native plan mode, no
         // feature flag), same backing manager as the question lookup.
         plan_approvals: Arc::new(crate::acp::manager::ConnectionManagerPlanApprovalLookup {
@@ -229,7 +242,7 @@ pub fn build_delegation_stack(
     });
 
     (
-        broker, tokens, socket_path, feedback, ask, sessions, authoring, browser, computer,
+        broker, tokens, socket_path, feedback, ask, render, sessions, authoring, browser, computer,
     )
 }
 
@@ -266,6 +279,7 @@ impl AppState {
             delegation_socket_path,
             feedback_config,
             question_config,
+            render_config,
             session_info_config,
             chat_authoring_config,
             browser_tools_config,
@@ -293,6 +307,7 @@ impl AppState {
             delegation_socket_path,
             feedback_config,
             question_config,
+            render_config,
             session_info_config,
             chat_authoring_config,
             browser_tools_config,
diff --git a/src-tauri/src/bin/codeg_mcp.rs b/src-tauri/src/bin/codeg_mcp.rs
index f0ef4c01fb..90ed9cc84e 100644
--- a/src-tauri/src/bin/codeg_mcp.rs
+++ b/src-tauri/src/bin/codeg_mcp.rs
@@ -1,12 +1,14 @@
 //! `codeg-mcp` — the per-launch stdio MCP companion that an agent CLI runs
 //! to surface codeg's tools to its LLM: the multi-agent delegation tools
 //! (`delegate_to_agent` etc.), `check_user_feedback` (pull the user's mid-turn
-//! steering notes), `ask_user_question` (block on a multiple-choice card), and
+//! steering notes), `ask_user_question` (block on a multiple-choice card),
+//! `render_page` (draw a self-contained HTML page inline in the chat,
+//! optionally blocking on an answer submitted on it), and
 //! `get_session_info` (resolve a referenced session by id), plus the
 //! chat-authoring tools (`create_automation` / `create_work_task`) and the
 //! `submit_result` of a `codeg-cli --output-schema` run, gated by the
-//! `--features` groups (`delegation` / `feedback` / `ask` / `sessions` /
-//! `tasks` / `result` / `automations` / `taskboard`).
+//! `--features` groups (`delegation` / `feedback` / `ask` / `render` /
+//! `sessions` / `tasks` / `result` / `automations` / `taskboard`).
 //!
 //! The agent's MCP config (injected by codeg via `load_mcp_servers_for_agent`)
 //! spawns this binary with three required flags:
@@ -131,7 +133,7 @@ fn parse_args() -> Result<Args, String> {
             }
             "--help" | "-h" => {
                 println!(
-                    "codeg-mcp --parent-connection-id <uuid> --socket-path <path> --token <secret> [--parent-pid <pid>] [--features delegation,feedback,ask,sessions,tasks,result] [--custom-agents custom:<id>,...] [--disabled-agents <agent>,...]"
+                    "codeg-mcp --parent-connection-id <uuid> --socket-path <path> --token <secret> [--parent-pid <pid>] [--features delegation,feedback,ask,render,sessions,tasks,result] [--custom-agents custom:<id>,...] [--disabled-agents <agent>,...]"
                 );
                 std::process::exit(0);
             }
diff --git a/src-tauri/src/bin/codeg_server.rs b/src-tauri/src/bin/codeg_server.rs
index 7179953157..6988bb1ff1 100644
--- a/src-tauri/src/bin/codeg_server.rs
+++ b/src-tauri/src/bin/codeg_server.rs
@@ -364,6 +364,7 @@ async fn async_main(
         delegation_socket_path,
         feedback_config,
         question_config,
+        render_config,
         session_info_config,
         chat_authoring_config,
         browser_tools_config,
@@ -392,6 +393,7 @@ async fn async_main(
         delegation_socket_path: delegation_socket_path.clone(),
         feedback_config: feedback_config.clone(),
         question_config: question_config.clone(),
+        render_config: render_config.clone(),
         session_info_config: session_info_config.clone(),
         chat_authoring_config: chat_authoring_config.clone(),
         browser_tools_config: browser_tools_config.clone(),
@@ -432,6 +434,12 @@ async fn async_main(
         &question_config,
     )
     .await;
+    // Same for the render-page enable flag.
+    codeg_lib::commands::render_page::apply_persisted_render_config(
+        &state.db.conn,
+        &render_config,
+    )
+    .await;
     // Same for the get-session-info enable flag.
     codeg_lib::commands::session_info::apply_persisted_session_info_config(
         &state.db.conn,
@@ -527,6 +535,9 @@ async fn async_main(
             Arc::new(codeg_lib::acp::manager::ConnectionManagerQuestionLookup {
                 manager: Arc::new(state.connection_manager.clone_ref()),
             }),
+            Arc::new(codeg_lib::acp::manager::ConnectionManagerRenderPageLookup {
+                manager: Arc::new(state.connection_manager.clone_ref()),
+            }),
             Arc::new(codeg_lib::commands::session_info::DbSessionInfoLookup::new(
                 Arc::new(codeg_lib::db::AppDatabase {
                     conn: state.db.conn.clone(),
diff --git a/src-tauri/src/commands/acp.rs b/src-tauri/src/commands/acp.rs
index ba5dfe393e..b9a22e9ff2 100644
--- a/src-tauri/src/commands/acp.rs
+++ b/src-tauri/src/commands/acp.rs
@@ -12097,6 +12097,19 @@ pub async fn acp_answer_question(
         .await
 }
 
+#[cfg(feature = "tauri-runtime")]
+#[cfg_attr(feature = "tauri-runtime", tauri::command)]
+pub async fn acp_answer_render_page(
+    connection_id: String,
+    page_id: String,
+    answer: crate::acp::render_page::RenderPageAnswer,
+    manager: State<'_, ConnectionManager>,
+) -> Result<(), AcpError> {
+    manager
+        .answer_render_page(&connection_id, &page_id, answer)
+        .await
+}
+
 #[cfg(feature = "tauri-runtime")]
 #[cfg_attr(feature = "tauri-runtime", tauri::command)]
 pub async fn acp_answer_plan_approval(
diff --git a/src-tauri/src/commands/mcp_service.rs b/src-tauri/src/commands/mcp_service.rs
index 4be11c998e..35e81257a2 100644
--- a/src-tauri/src/commands/mcp_service.rs
+++ b/src-tauri/src/commands/mcp_service.rs
@@ -38,6 +38,7 @@ use crate::acp::delegation::listener::TokenRegistry;
 use crate::acp::delegation::service;
 use crate::acp::feedback::FeedbackRuntimeConfig;
 use crate::acp::question::QuestionRuntimeConfig;
+use crate::acp::render_page::RenderPageRuntimeConfig;
 use crate::acp::session_info::SessionInfoRuntimeConfig;
 use crate::app_error::AppCommandError;
 use crate::web::event_bridge::EventEmitter;
@@ -136,6 +137,7 @@ pub struct CodegMcpStatusSources<'a> {
     pub tokens: &'a TokenRegistry,
     pub feedback: &'a FeedbackRuntimeConfig,
     pub question: &'a QuestionRuntimeConfig,
+    pub render: &'a RenderPageRuntimeConfig,
     pub session_info: &'a SessionInfoRuntimeConfig,
     pub authoring: &'a ChatAuthoringRuntimeConfig,
     pub browser: &'a BrowserToolsRuntimeConfig,
@@ -178,6 +180,7 @@ pub async fn codeg_mcp_service_status_core(
         CodegMcpToolGroup::group("delegation", delegation_cfg.enabled),
         CodegMcpToolGroup::group("feedback", sources.feedback.is_enabled().await),
         CodegMcpToolGroup::group("ask", sources.question.is_enabled().await),
+        CodegMcpToolGroup::group("render", sources.render.is_enabled().await),
         CodegMcpToolGroup::group("sessions", sources.session_info.is_enabled().await),
         CodegMcpToolGroup::group("automations", authoring_cfg.automations_enabled),
         CodegMcpToolGroup::group("taskboard", authoring_cfg.work_tasks_enabled),
@@ -236,6 +239,7 @@ pub struct CodegMcpToolGroupTargets<'a> {
     pub broker: &'a DelegationBroker,
     pub feedback: &'a FeedbackRuntimeConfig,
     pub question: &'a QuestionRuntimeConfig,
+    pub render: &'a RenderPageRuntimeConfig,
     pub session_info: &'a SessionInfoRuntimeConfig,
     pub authoring: &'a ChatAuthoringRuntimeConfig,
     pub browser: &'a BrowserToolsRuntimeConfig,
@@ -256,8 +260,8 @@ pub struct CodegMcpToolGroupTargets<'a> {
 /// `automations`/`taskboard`, like `browser`/`browser_eval`, are two switches
 /// over one record that sit one click apart in this very popover — a
 /// read-modify-write of the pair loses whichever flip lands first. `feedback`,
-/// `ask` and `sessions` each own a single-field record, so their existing
-/// writer is already narrow.
+/// `ask`, `render` and `sessions` each own a single-field record, so their
+/// existing writer is already narrow.
 pub async fn set_codeg_mcp_tool_group_core(
     conn: &DatabaseConnection,
     targets: CodegMcpToolGroupTargets<'_>,
@@ -268,7 +272,7 @@ pub async fn set_codeg_mcp_tool_group_core(
     use crate::commands::chat_authoring::ChatAuthoringFlag;
     use crate::commands::{
         browser_tools, chat_authoring, computer_tools, delegation, feedback, question,
-        session_info,
+        render_page, session_info,
     };
 
     match key {
@@ -293,6 +297,15 @@ pub async fn set_codeg_mcp_tool_group_core(
             )
             .await?;
         }
+        "render" => {
+            render_page::set_render_page_settings_core(
+                conn,
+                targets.render,
+                emitter,
+                render_page::RenderPageSettings { enabled },
+            )
+            .await?;
+        }
         "sessions" => {
             session_info::set_session_info_settings_core(
                 conn,
@@ -370,7 +383,7 @@ pub async fn start_codeg_mcp_service_core() -> Result<(), AppCommandError> {
 
 // -------- Tauri commands -----------------------------------------------------
 
-// Seven sources, injected positionally as Tauri managed state — see the note
+// Eight sources, injected positionally as Tauri managed state — see the note
 // on `set_codeg_mcp_tool_group`.
 #[allow(clippy::too_many_arguments)]
 #[cfg_attr(feature = "tauri-runtime", tauri::command)]
@@ -379,6 +392,7 @@ pub async fn get_codeg_mcp_service_status(
     #[cfg(feature = "tauri-runtime")] tokens: tauri::State<'_, Arc<TokenRegistry>>,
     #[cfg(feature = "tauri-runtime")] feedback: tauri::State<'_, FeedbackRuntimeConfig>,
     #[cfg(feature = "tauri-runtime")] question: tauri::State<'_, QuestionRuntimeConfig>,
+    #[cfg(feature = "tauri-runtime")] render: tauri::State<'_, RenderPageRuntimeConfig>,
     #[cfg(feature = "tauri-runtime")] session_info: tauri::State<'_, SessionInfoRuntimeConfig>,
     #[cfg(feature = "tauri-runtime")] authoring: tauri::State<'_, ChatAuthoringRuntimeConfig>,
     #[cfg(feature = "tauri-runtime")] browser: tauri::State<'_, BrowserToolsRuntimeConfig>,
@@ -391,6 +405,7 @@ pub async fn get_codeg_mcp_service_status(
             tokens: tokens.inner(),
             feedback: feedback.inner(),
             question: question.inner(),
+            render: render.inner(),
             session_info: session_info.inner(),
             authoring: authoring.inner(),
             browser: browser.inner(),
@@ -410,7 +425,7 @@ pub async fn start_codeg_mcp_service() -> Result<(), AppCommandError> {
     start_codeg_mcp_service_core().await
 }
 
-// Seven runtime configs plus the db, the app handle and the two payload fields.
+// Eight runtime configs plus the db, the app handle and the two payload fields.
 // Tauri injects managed state positionally, so these cannot be bundled the way
 // `CodegMcpToolGroupTargets` bundles them for the `_core` helper below.
 #[allow(clippy::too_many_arguments)]
@@ -421,6 +436,7 @@ pub async fn set_codeg_mcp_tool_group(
     #[cfg(feature = "tauri-runtime")] broker: tauri::State<'_, Arc<DelegationBroker>>,
     #[cfg(feature = "tauri-runtime")] feedback: tauri::State<'_, FeedbackRuntimeConfig>,
     #[cfg(feature = "tauri-runtime")] question: tauri::State<'_, QuestionRuntimeConfig>,
+    #[cfg(feature = "tauri-runtime")] render: tauri::State<'_, RenderPageRuntimeConfig>,
     #[cfg(feature = "tauri-runtime")] session_info: tauri::State<'_, SessionInfoRuntimeConfig>,
     #[cfg(feature = "tauri-runtime")] authoring: tauri::State<'_, ChatAuthoringRuntimeConfig>,
     #[cfg(feature = "tauri-runtime")] browser: tauri::State<'_, BrowserToolsRuntimeConfig>,
@@ -439,6 +455,7 @@ pub async fn set_codeg_mcp_tool_group(
                 broker: broker.inner(),
                 feedback: feedback.inner(),
                 question: question.inner(),
+                render: render.inner(),
                 session_info: session_info.inner(),
                 authoring: authoring.inner(),
                 browser: browser.inner(),
@@ -483,6 +500,7 @@ mod tests {
         tokens: Arc<TokenRegistry>,
         feedback: FeedbackRuntimeConfig,
         question: QuestionRuntimeConfig,
+        render: RenderPageRuntimeConfig,
         session_info: SessionInfoRuntimeConfig,
         authoring: ChatAuthoringRuntimeConfig,
         browser: BrowserToolsRuntimeConfig,
@@ -499,6 +517,7 @@ mod tests {
                 tokens: Arc::new(TokenRegistry::default()),
                 feedback: FeedbackRuntimeConfig::new(),
                 question: QuestionRuntimeConfig::new(),
+                render: RenderPageRuntimeConfig::new(),
                 session_info: SessionInfoRuntimeConfig::new(),
                 authoring: ChatAuthoringRuntimeConfig::new(),
                 browser: BrowserToolsRuntimeConfig::new(),
@@ -512,6 +531,7 @@ mod tests {
                 tokens: &self.tokens,
                 feedback: &self.feedback,
                 question: &self.question,
+                render: &self.render,
                 session_info: &self.session_info,
                 authoring: &self.authoring,
                 browser: &self.browser,
@@ -535,6 +555,7 @@ mod tests {
                     broker: &self.broker,
                     feedback: &self.feedback,
                     question: &self.question,
+                    render: &self.render,
                     session_info: &self.session_info,
                     authoring: &self.authoring,
                     browser: &self.browser,
@@ -605,6 +626,9 @@ mod tests {
         assert!(group("delegation"));
         assert!(group("automations"));
         assert!(!group("taskboard"));
+        // `render` is its own bare switch; this fixture never turns it on, so
+        // the read side must mirror that rather than a settings default.
+        assert!(!group("render"));
         assert_eq!(status.depth_limit, 5);
         // `tasks` is per-spawn, never a switch — it must not appear.
         assert!(status.tool_groups.iter().all(|g| g.key != "tasks"));
diff --git a/src-tauri/src/commands/mod.rs b/src-tauri/src/commands/mod.rs
index c3bdf78399..10d73f63e6 100644
--- a/src-tauri/src/commands/mod.rs
+++ b/src-tauri/src/commands/mod.rs
@@ -73,6 +73,7 @@ pub mod quick_messages;
 pub mod remote_proxy;
 #[cfg(feature = "tauri-runtime")]
 pub mod remote_workspace;
+pub mod render_page;
 pub mod science;
 pub mod session_info;
 pub mod system_settings;
diff --git a/src-tauri/src/commands/render_page.rs b/src-tauri/src/commands/render_page.rs
new file mode 100644
index 0000000000..237a2bc11f
--- /dev/null
+++ b/src-tauri/src/commands/render_page.rs
@@ -0,0 +1,170 @@
+//! Render-page settings persistence — the web/Tauri-shared surface for the
+//! `render_page` feature toggle.
+//!
+//! One knob survives across restarts:
+//!   * `render_page.enabled` — feature kill switch (**default true**). When on,
+//!     `codeg-mcp` exposes the `render_page` tool so an agent can draw a
+//!     self-contained HTML page inline in the chat, optionally blocking on an
+//!     answer the user submits on it.
+//!
+//! Default-ON follows `ask_user_question`: the tool only surfaces when the
+//! agent *explicitly* chooses to render, so it is far less intrusive than the
+//! opt-in feedback / delegation groups and ships enabled. A user who never
+//! wants rendered pages can turn it off in settings.
+//!
+//! On startup `apply_persisted_render_config` reads this key from
+//! `app_metadata` and pushes it into the shared [`RenderPageRuntimeConfig`]
+//! that MCP injection reads. On UI save, `set_render_page_settings_core`
+//! writes the key and immediately re-applies — mirroring the question settings
+//! flow exactly (`crate::commands::question`).
+
+use sea_orm::DatabaseConnection;
+use serde::{Deserialize, Serialize};
+
+use crate::acp::render_page::{RenderPageConfig, RenderPageRuntimeConfig};
+use crate::app_error::AppCommandError;
+use crate::db::service::app_metadata_service;
+use crate::web::event_bridge::{emit_event, EventEmitter, RENDER_PAGE_SETTINGS_CHANGED_EVENT};
+
+pub const KEY_RENDER_PAGE_ENABLED: &str = "render_page.enabled";
+
+/// On by default (`enabled: true`) — see the module docs for why this diverges
+/// from the opt-in feedback/delegation features.
+#[derive(Debug, Clone, Serialize, Deserialize, PartialEq, Eq)]
+pub struct RenderPageSettings {
+    pub enabled: bool,
+}
+
+impl Default for RenderPageSettings {
+    fn default() -> Self {
+        Self { enabled: true }
+    }
+}
+
+impl RenderPageSettings {
+    fn into_runtime_config(self) -> RenderPageConfig {
+        RenderPageConfig {
+            enabled: self.enabled,
+        }
+    }
+}
+
+/// Read the persisted key from `app_metadata`, falling back to the default
+/// (enabled) for a missing or malformed value. Never errors hard — corrupt
+/// persistence is treated as "no preference yet".
+pub async fn load_render_page_settings(conn: &DatabaseConnection) -> RenderPageSettings {
+    let mut settings = RenderPageSettings::default();
+    if let Ok(Some(raw)) = app_metadata_service::get_value(conn, KEY_RENDER_PAGE_ENABLED).await {
+        if let Ok(v) = raw.parse::<bool>() {
+            settings.enabled = v;
+        }
+    }
+    settings
+}
+
+/// Pull settings from the DB and push the resulting `RenderPageConfig` onto the
+/// shared runtime handle. Idempotent — safe on startup, after settings save, or
+/// after any external write to `app_metadata`.
+pub async fn apply_persisted_render_config(
+    conn: &DatabaseConnection,
+    config: &RenderPageRuntimeConfig,
+) {
+    let settings = load_render_page_settings(conn).await;
+    config.set(settings.into_runtime_config()).await;
+}
+
+/// Persist + apply + broadcast. Used by both the Tauri command and the HTTP
+/// handler so the write + re-apply + notify chain lives in exactly one place.
+/// The broadcast lets a conversation view (in another window / WS client)
+/// converge on the new flag — a frontend-only signal would never cross windows.
+pub async fn set_render_page_settings_core(
+    conn: &DatabaseConnection,
+    config: &RenderPageRuntimeConfig,
+    emitter: &EventEmitter,
+    desired: RenderPageSettings,
+) -> Result<RenderPageSettings, AppCommandError> {
+    app_metadata_service::upsert_value(conn, KEY_RENDER_PAGE_ENABLED, &desired.enabled.to_string())
+        .await
+        .map_err(AppCommandError::from)?;
+    config.set(desired.clone().into_runtime_config()).await;
+    emit_event(emitter, RENDER_PAGE_SETTINGS_CHANGED_EVENT, &desired);
+    Ok(desired)
+}
+
+// -------- Tauri commands -----------------------------------------------------
+
+#[cfg_attr(feature = "tauri-runtime", tauri::command)]
+pub async fn get_render_page_settings(
+    #[cfg(feature = "tauri-runtime")] db: tauri::State<'_, crate::db::AppDatabase>,
+) -> Result<RenderPageSettings, AppCommandError> {
+    #[cfg(feature = "tauri-runtime")]
+    {
+        Ok(load_render_page_settings(&db.conn).await)
+    }
+    #[cfg(not(feature = "tauri-runtime"))]
+    {
+        Err(AppCommandError::configuration_invalid("tauri-only command"))
+    }
+}
+
+#[cfg_attr(feature = "tauri-runtime", tauri::command)]
+pub async fn set_render_page_settings(
+    #[cfg(feature = "tauri-runtime")] app: tauri::AppHandle,
+    #[cfg(feature = "tauri-runtime")] db: tauri::State<'_, crate::db::AppDatabase>,
+    #[cfg(feature = "tauri-runtime")] config: tauri::State<'_, RenderPageRuntimeConfig>,
+    settings: RenderPageSettings,
+) -> Result<RenderPageSettings, AppCommandError> {
+    #[cfg(feature = "tauri-runtime")]
+    {
+        let emitter = EventEmitter::Tauri(app);
+        set_render_page_settings_core(&db.conn, &config, &emitter, settings).await
+    }
+    #[cfg(not(feature = "tauri-runtime"))]
+    {
+        let _ = settings;
+        Err(AppCommandError::configuration_invalid("tauri-only command"))
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[tokio::test]
+    async fn load_returns_default_enabled_when_unset() {
+        let db = crate::db::test_helpers::fresh_in_memory_db().await;
+        let settings = load_render_page_settings(&db.conn).await;
+        assert!(settings.enabled, "render_page defaults ON");
+    }
+
+    #[tokio::test]
+    async fn set_then_load_round_trip_and_runtime_applied() {
+        let db = crate::db::test_helpers::fresh_in_memory_db().await;
+        let config = RenderPageRuntimeConfig::new();
+        let saved = set_render_page_settings_core(
+            &db.conn,
+            &config,
+            &EventEmitter::Noop,
+            RenderPageSettings { enabled: false },
+        )
+        .await
+        .unwrap();
+        assert!(!saved.enabled);
+
+        let loaded = load_render_page_settings(&db.conn).await;
+        assert!(!loaded.enabled);
+        assert!(!config.is_enabled().await);
+    }
+
+    #[tokio::test]
+    async fn apply_persisted_pushes_db_value_onto_runtime() {
+        let db = crate::db::test_helpers::fresh_in_memory_db().await;
+        app_metadata_service::upsert_value(&db.conn, KEY_RENDER_PAGE_ENABLED, "false")
+            .await
+            .unwrap();
+        let config = RenderPageRuntimeConfig::new();
+        // The persisted "false" must flip the runtime off despite the on-by-default.
+        apply_persisted_render_config(&db.conn, &config).await;
+        assert!(!config.is_enabled().await);
+    }
+}
diff --git a/src-tauri/src/lib.rs b/src-tauri/src/lib.rs
index 4eee23ee5c..11dc1f7332 100644
--- a/src-tauri/src/lib.rs
+++ b/src-tauri/src/lib.rs
@@ -1195,6 +1195,7 @@ mod tauri_app {
                         socket_path,
                         feedback_config,
                         question_config,
+                        render_config,
                         session_info_config,
                         chat_authoring_config,
                         browser_tools_config,
@@ -1208,6 +1209,7 @@ mod tauri_app {
                     app.manage(tokens.clone());
                     app.manage(feedback_config.clone());
                     app.manage(question_config.clone());
+                    app.manage(render_config.clone());
                     app.manage(session_info_config.clone());
                     app.manage(chat_authoring_config.clone());
                     app.manage(browser_tools_config.clone());
@@ -1226,6 +1228,7 @@ mod tauri_app {
                     let db_for_init = db_conn.clone();
                     let feedback_for_init = feedback_config.clone();
                     let question_for_init = question_config.clone();
+                    let render_for_init = render_config.clone();
                     let session_info_for_init = session_info_config.clone();
                     let chat_authoring_for_init = chat_authoring_config.clone();
                     let browser_tools_for_init = browser_tools_config.clone();
@@ -1246,6 +1249,11 @@ mod tauri_app {
                             &question_for_init,
                         )
                         .await;
+                        crate::commands::render_page::apply_persisted_render_config(
+                            &db_for_init,
+                            &render_for_init,
+                        )
+                        .await;
                         crate::commands::session_info::apply_persisted_session_info_config(
                             &db_for_init,
                             &session_info_for_init,
@@ -1306,6 +1314,11 @@ mod tauri_app {
                                 manager: std::sync::Arc::new(cm_state.clone_ref()),
                             },
                         ),
+                        std::sync::Arc::new(
+                            crate::acp::manager::ConnectionManagerRenderPageLookup {
+                                manager: std::sync::Arc::new(cm_state.clone_ref()),
+                            },
+                        ),
                         std::sync::Arc::new(
                             crate::commands::session_info::DbSessionInfoLookup::new(
                                 std::sync::Arc::new(db::AppDatabase {
@@ -2098,6 +2111,8 @@ mod tauri_app {
                 feedback_commands::submit_session_feedback,
                 question_commands::get_question_settings,
                 question_commands::set_question_settings,
+                crate::commands::render_page::get_render_page_settings,
+                crate::commands::render_page::set_render_page_settings,
                 session_info_commands::get_session_info_settings,
                 session_info_commands::set_session_info_settings,
                 chat_authoring_commands::get_chat_authoring_settings,
@@ -2153,6 +2168,7 @@ mod tauri_app {
                 acp_commands::acp_stop_async_task,
                 acp_commands::acp_respond_permission,
                 acp_commands::acp_answer_question,
+                acp_commands::acp_answer_render_page,
                 acp_commands::acp_answer_plan_approval,
                 acp_commands::acp_disconnect,
                 acp_commands::acp_touch_connection,
diff --git a/src-tauri/src/web/event_bridge.rs b/src-tauri/src/web/event_bridge.rs
index 689d3a4ca0..e1ee2b725e 100644
--- a/src-tauri/src/web/event_bridge.rs
+++ b/src-tauri/src/web/event_bridge.rs
@@ -164,6 +164,12 @@ pub const FEEDBACK_SETTINGS_CHANGED_EVENT: &str = "feedback-settings://changed";
 /// bool }`).
 pub const QUESTION_SETTINGS_CHANGED_EVENT: &str = "question-settings://changed";
 
+/// Global side-channel announcing a `render_page` enable/disable. Same
+/// cross-window rationale as [`QUESTION_SETTINGS_CHANGED_EVENT`]: the settings UI
+/// runs in a separate window, so other views learn the flag flipped only via this
+/// backend broadcast. Payload: `RenderPageSettings` (`{ "enabled": bool }`).
+pub const RENDER_PAGE_SETTINGS_CHANGED_EVENT: &str = "render-page-settings://changed";
+
 /// Global side-channel announcing a `get_session_info` enable/disable. Same
 /// cross-window rationale as [`QUESTION_SETTINGS_CHANGED_EVENT`]: the settings UI
 /// runs in a separate window, so other views learn the flag flipped only via this
diff --git a/src-tauri/src/web/handlers/acp.rs b/src-tauri/src/web/handlers/acp.rs
index 73ebfc6b2c..d6c9fc174e 100644
--- a/src-tauri/src/web/handlers/acp.rs
+++ b/src-tauri/src/web/handlers/acp.rs
@@ -546,6 +546,26 @@ pub async fn acp_answer_question(
     Ok(Json(()))
 }
 
+#[derive(Deserialize)]
+#[serde(rename_all = "camelCase")]
+pub struct AcpAnswerRenderPageParams {
+    pub connection_id: String,
+    pub page_id: String,
+    pub answer: crate::acp::render_page::RenderPageAnswer,
+}
+
+pub async fn acp_answer_render_page(
+    Extension(state): Extension<Arc<AppState>>,
+    Json(params): Json<AcpAnswerRenderPageParams>,
+) -> Result<Json<()>, AppCommandError> {
+    let manager = &state.connection_manager;
+    manager
+        .answer_render_page(&params.connection_id, &params.page_id, params.answer)
+        .await
+        .map_err(|e| AppCommandError::task_execution_failed(e.to_string()))?;
+    Ok(Json(()))
+}
+
 #[derive(Deserialize)]
 #[serde(rename_all = "camelCase")]
 pub struct AcpAnswerPlanApprovalParams {
diff --git a/src-tauri/src/web/handlers/mcp_service.rs b/src-tauri/src/web/handlers/mcp_service.rs
index 220d9a7687..31d21dcb9b 100644
--- a/src-tauri/src/web/handlers/mcp_service.rs
+++ b/src-tauri/src/web/handlers/mcp_service.rs
@@ -26,6 +26,7 @@ pub async fn get_codeg_mcp_service_status(
             tokens: &state.delegation_tokens,
             feedback: &state.feedback_config,
             question: &state.question_config,
+            render: &state.render_config,
             session_info: &state.session_info_config,
             browser: &state.browser_tools_config,
             authoring: &state.chat_authoring_config,
@@ -56,6 +57,7 @@ pub async fn set_codeg_mcp_tool_group(
             broker: &state.delegation_broker,
             feedback: &state.feedback_config,
             question: &state.question_config,
+            render: &state.render_config,
             session_info: &state.session_info_config,
             browser: &state.browser_tools_config,
             authoring: &state.chat_authoring_config,
diff --git a/src-tauri/src/web/handlers/mod.rs b/src-tauri/src/web/handlers/mod.rs
index b98d870696..d084b6e393 100644
--- a/src-tauri/src/web/handlers/mod.rs
+++ b/src-tauri/src/web/handlers/mod.rs
@@ -40,6 +40,7 @@ pub mod pet;
 pub mod project_boot;
 pub mod question;
 pub mod quick_messages;
+pub mod render_page;
 pub mod science;
 pub mod session_info;
 pub mod system_settings;
diff --git a/src-tauri/src/web/handlers/render_page.rs b/src-tauri/src/web/handlers/render_page.rs
new file mode 100644
index 0000000000..150ac809cd
--- /dev/null
+++ b/src-tauri/src/web/handlers/render_page.rs
@@ -0,0 +1,44 @@
+//! HTTP handlers for render-page settings — the web-mode mirror of the Tauri
+//! commands in `commands::render_page`.
+//!
+//! Both endpoints share the same core helpers (`load_render_page_settings`,
+//! `set_render_page_settings_core`) so the persist + runtime-config re-apply
+//! behavior stays identical across transports. (Answering a pending page is an
+//! ACP operation and lives in
+//! `web::handlers::acp::acp_answer_render_page`.)
+
+use std::sync::Arc;
+
+use axum::{extract::Extension, Json};
+use serde::Deserialize;
+
+use crate::app_error::AppCommandError;
+use crate::app_state::AppState;
+use crate::commands::render_page::{
+    load_render_page_settings, set_render_page_settings_core, RenderPageSettings,
+};
+
+pub async fn get_render_page_settings(
+    Extension(state): Extension<Arc<AppState>>,
+) -> Result<Json<RenderPageSettings>, AppCommandError> {
+    Ok(Json(load_render_page_settings(&state.db.conn).await))
+}
+
+#[derive(Deserialize)]
+pub struct SetRenderPageSettingsParams {
+    pub settings: RenderPageSettings,
+}
+
+pub async fn set_render_page_settings(
+    Extension(state): Extension<Arc<AppState>>,
+    Json(params): Json<SetRenderPageSettingsParams>,
+) -> Result<Json<RenderPageSettings>, AppCommandError> {
+    let saved = set_render_page_settings_core(
+        &state.db.conn,
+        &state.render_config,
+        &state.emitter,
+        params.settings,
+    )
+    .await?;
+    Ok(Json(saved))
+}
diff --git a/src-tauri/src/web/mod.rs b/src-tauri/src/web/mod.rs
index 54a8e1831b..383b50f93a 100644
--- a/src-tauri/src/web/mod.rs
+++ b/src-tauri/src/web/mod.rs
@@ -898,6 +898,12 @@ pub(crate) async fn do_start_web_server_tauri(
             .state::<crate::acp::question::QuestionRuntimeConfig>()
             .inner()
             .clone(),
+        // Reuse the same render-page config handle the desktop MCP injection
+        // reads, so HTTP-side render-page settings target the same flag.
+        render_config: app
+            .state::<crate::acp::render_page::RenderPageRuntimeConfig>()
+            .inner()
+            .clone(),
         // Reuse the same get-session-info config handle the desktop MCP injection
         // reads, so HTTP-side session-info settings target the same flag.
         session_info_config: app
diff --git a/src-tauri/src/web/router.rs b/src-tauri/src/web/router.rs
index db5739572e..1aafa9c2fa 100644
--- a/src-tauri/src/web/router.rs
+++ b/src-tauri/src/web/router.rs
@@ -116,6 +116,14 @@ pub fn build_router_with_proxy_auth(
             "/set_question_settings",
             post(handlers::question::set_question_settings),
         )
+        .route(
+            "/get_render_page_settings",
+            post(handlers::render_page::get_render_page_settings),
+        )
+        .route(
+            "/set_render_page_settings",
+            post(handlers::render_page::set_render_page_settings),
+        )
         .route(
             "/get_session_info_settings",
             post(handlers::session_info::get_session_info_settings),
@@ -1045,6 +1053,10 @@ pub fn build_router_with_proxy_auth(
             "/acp_answer_question",
             post(handlers::acp::acp_answer_question),
         )
+        .route(
+            "/acp_answer_render_page",
+            post(handlers::acp::acp_answer_render_page),
+        )
         .route(
             "/acp_answer_plan_approval",
             post(handlers::acp::acp_answer_plan_approval),
diff --git a/src-tauri/tests/delegation_e2e_uds.rs b/src-tauri/tests/delegation_e2e_uds.rs
index 8763822031..71416d9890 100644
--- a/src-tauri/tests/delegation_e2e_uds.rs
+++ b/src-tauri/tests/delegation_e2e_uds.rs
@@ -139,7 +139,7 @@ impl codeg_lib::acp::chat_authoring::ChatAuthoringAccess for NoAuthoring {
 /// Controllable question access for the ask round-trip test: `register_question`
 /// parks a sender keyed by a freshly-minted id; the test pops it via
 /// `take_pending` and resolves it, exactly as a user answering the card would.
-/// The delegation tests pass it as the 5th `DelegationListener::new` arg but
+/// The delegation tests pass it as the 6th `DelegationListener::new` arg but
 /// never trigger the ask path.
 #[derive(Default)]
 struct StubQuestions {
@@ -187,6 +187,22 @@ impl SessionQuestionAccess for StubQuestions {
     }
 }
 
+/// No-op render-page access — this e2e suite exercises delegation, not pages.
+struct NoRenders;
+#[async_trait]
+impl codeg_lib::acp::render_page::SessionRenderPageAccess for NoRenders {
+    async fn register_render_page(
+        &self,
+        _parent_connection_id: &str,
+        _title: String,
+        _html: String,
+    ) -> Option<codeg_lib::acp::render_page::RegisteredRenderPage> {
+        None
+    }
+    async fn cancel_render_page(&self, _parent_connection_id: &str, _page_id: &str) {}
+    async fn cancel_render_pages_by_parent(&self, _parent_connection_id: &str) {}
+}
+
 #[tokio::test]
 async fn end_to_end_uds_happy_path() {
     let mock = Arc::new(MockSpawner::new());
@@ -222,6 +238,7 @@ async fn end_to_end_uds_happy_path() {
         Arc::new(FixedParent(1)) as Arc<dyn ParentSessionLookup>,
         Arc::new(NoFeedback) as Arc<dyn codeg_lib::acp::feedback::SessionFeedbackAccess>,
         Arc::new(StubQuestions::default()) as Arc<dyn SessionQuestionAccess>,
+        Arc::new(NoRenders) as Arc<dyn codeg_lib::acp::render_page::SessionRenderPageAccess>,
         Arc::new(NoSessionInfo) as Arc<dyn codeg_lib::acp::session_info::SessionInfoAccess>,
         Arc::new(NoTaskTools) as Arc<dyn codeg_lib::acp::work_task_tools::WorkTaskToolAccess>,
         Arc::new(NoAuthoring) as Arc<dyn codeg_lib::acp::chat_authoring::ChatAuthoringAccess>,
@@ -344,6 +361,7 @@ async fn end_to_end_uds_batch_status() {
         Arc::new(FixedParent(1)) as Arc<dyn ParentSessionLookup>,
         Arc::new(NoFeedback) as Arc<dyn codeg_lib::acp::feedback::SessionFeedbackAccess>,
         Arc::new(StubQuestions::default()) as Arc<dyn SessionQuestionAccess>,
+        Arc::new(NoRenders) as Arc<dyn codeg_lib::acp::render_page::SessionRenderPageAccess>,
         Arc::new(NoSessionInfo) as Arc<dyn codeg_lib::acp::session_info::SessionInfoAccess>,
         Arc::new(NoTaskTools) as Arc<dyn codeg_lib::acp::work_task_tools::WorkTaskToolAccess>,
         Arc::new(NoAuthoring) as Arc<dyn codeg_lib::acp::chat_authoring::ChatAuthoringAccess>,
@@ -437,6 +455,7 @@ async fn end_to_end_uds_invalid_token_rejected() {
         Arc::new(FixedParent(1)) as Arc<dyn ParentSessionLookup>,
         Arc::new(NoFeedback) as Arc<dyn codeg_lib::acp::feedback::SessionFeedbackAccess>,
         Arc::new(StubQuestions::default()) as Arc<dyn SessionQuestionAccess>,
+        Arc::new(NoRenders) as Arc<dyn codeg_lib::acp::render_page::SessionRenderPageAccess>,
         Arc::new(NoSessionInfo) as Arc<dyn codeg_lib::acp::session_info::SessionInfoAccess>,
         Arc::new(NoTaskTools) as Arc<dyn codeg_lib::acp::work_task_tools::WorkTaskToolAccess>,
         Arc::new(NoAuthoring) as Arc<dyn codeg_lib::acp::chat_authoring::ChatAuthoringAccess>,
@@ -509,6 +528,7 @@ async fn end_to_end_uds_ask_question_round_trip() {
         Arc::new(FixedParent(1)) as Arc<dyn ParentSessionLookup>,
         Arc::new(NoFeedback) as Arc<dyn codeg_lib::acp::feedback::SessionFeedbackAccess>,
         questions.clone() as Arc<dyn SessionQuestionAccess>,
+        Arc::new(NoRenders) as Arc<dyn codeg_lib::acp::render_page::SessionRenderPageAccess>,
         Arc::new(NoSessionInfo) as Arc<dyn codeg_lib::acp::session_info::SessionInfoAccess>,
         Arc::new(NoTaskTools) as Arc<dyn codeg_lib::acp::work_task_tools::WorkTaskToolAccess>,
         Arc::new(NoAuthoring) as Arc<dyn codeg_lib::acp::chat_authoring::ChatAuthoringAccess>,
@@ -655,6 +675,7 @@ async fn end_to_end_uds_ask_revoked_after_register_declines() {
         Arc::new(FixedParent(1)) as Arc<dyn ParentSessionLookup>,
         Arc::new(NoFeedback) as Arc<dyn codeg_lib::acp::feedback::SessionFeedbackAccess>,
         questions as Arc<dyn SessionQuestionAccess>,
+        Arc::new(NoRenders) as Arc<dyn codeg_lib::acp::render_page::SessionRenderPageAccess>,
         Arc::new(NoSessionInfo) as Arc<dyn codeg_lib::acp::session_info::SessionInfoAccess>,
         Arc::new(NoTaskTools) as Arc<dyn codeg_lib::acp::work_task_tools::WorkTaskToolAccess>,
         Arc::new(NoAuthoring) as Arc<dyn codeg_lib::acp::chat_authoring::ChatAuthoringAccess>,
@@ -806,6 +827,7 @@ async fn end_to_end_uds_assistant_delegation() {
         Arc::new(FixedParent(1)) as Arc<dyn ParentSessionLookup>,
         Arc::new(NoFeedback) as Arc<dyn codeg_lib::acp::feedback::SessionFeedbackAccess>,
         Arc::new(StubQuestions::default()) as Arc<dyn SessionQuestionAccess>,
+        Arc::new(NoRenders) as Arc<dyn codeg_lib::acp::render_page::SessionRenderPageAccess>,
         Arc::new(NoSessionInfo) as Arc<dyn codeg_lib::acp::session_info::SessionInfoAccess>,
         Arc::new(NoTaskTools) as Arc<dyn codeg_lib::acp::work_task_tools::WorkTaskToolAccess>,
         Arc::new(NoAuthoring) as Arc<dyn codeg_lib::acp::chat_authoring::ChatAuthoringAccess>,
diff --git a/src-tauri/tests/delegation_e2e_windows.rs b/src-tauri/tests/delegation_e2e_windows.rs
index 22a78c5fa8..76b5751b06 100644
--- a/src-tauri/tests/delegation_e2e_windows.rs
+++ b/src-tauri/tests/delegation_e2e_windows.rs
@@ -70,6 +70,22 @@ impl SessionQuestionAccess for NoQuestions {
     async fn cancel_questions_by_parent(&self, _parent_connection_id: &str) {}
 }
 
+/// No-op render-page access — this e2e suite exercises delegation, not pages.
+struct NoRenders;
+#[async_trait]
+impl codeg_lib::acp::render_page::SessionRenderPageAccess for NoRenders {
+    async fn register_render_page(
+        &self,
+        _parent_connection_id: &str,
+        _title: String,
+        _html: String,
+    ) -> Option<codeg_lib::acp::render_page::RegisteredRenderPage> {
+        None
+    }
+    async fn cancel_render_page(&self, _parent_connection_id: &str, _page_id: &str) {}
+    async fn cancel_render_pages_by_parent(&self, _parent_connection_id: &str) {}
+}
+
 /// No-op session-info access — this e2e suite never drives `get_session_info`.
 struct NoSessionInfo;
 #[async_trait]
@@ -212,6 +228,7 @@ async fn end_to_end_named_pipe_happy_path() {
         Arc::new(FixedParent(1)) as Arc<dyn ParentSessionLookup>,
         Arc::new(NoFeedback) as Arc<dyn codeg_lib::acp::feedback::SessionFeedbackAccess>,
         Arc::new(NoQuestions) as Arc<dyn SessionQuestionAccess>,
+        Arc::new(NoRenders) as Arc<dyn codeg_lib::acp::render_page::SessionRenderPageAccess>,
         Arc::new(NoSessionInfo) as Arc<dyn codeg_lib::acp::session_info::SessionInfoAccess>,
         Arc::new(NoTaskTools) as Arc<dyn codeg_lib::acp::work_task_tools::WorkTaskToolAccess>,
         Arc::new(NoAuthoring) as Arc<dyn codeg_lib::acp::chat_authoring::ChatAuthoringAccess>,
@@ -320,6 +337,7 @@ async fn end_to_end_named_pipe_back_to_back_requests() {
         Arc::new(FixedParent(1)) as Arc<dyn ParentSessionLookup>,
         Arc::new(NoFeedback) as Arc<dyn codeg_lib::acp::feedback::SessionFeedbackAccess>,
         Arc::new(NoQuestions) as Arc<dyn SessionQuestionAccess>,
+        Arc::new(NoRenders) as Arc<dyn codeg_lib::acp::render_page::SessionRenderPageAccess>,
         Arc::new(NoSessionInfo) as Arc<dyn codeg_lib::acp::session_info::SessionInfoAccess>,
         Arc::new(NoTaskTools) as Arc<dyn codeg_lib::acp::work_task_tools::WorkTaskToolAccess>,
         Arc::new(NoAuthoring) as Arc<dyn codeg_lib::acp::chat_authoring::ChatAuthoringAccess>,
diff --git a/src/components/canvas/canvas-conversation-surface.tsx b/src/components/canvas/canvas-conversation-surface.tsx
index 1246273cd7..67f8a4dd01 100644
--- a/src/components/canvas/canvas-conversation-surface.tsx
+++ b/src/components/canvas/canvas-conversation-surface.tsx
@@ -13,6 +13,8 @@ import { AgentSelector } from "@/components/chat/agent-selector"
 import { ConversationShell } from "@/components/chat/conversation-shell"
 import type { ConversationFolderPickerOverride } from "@/components/chat/conversation-context-bar"
 import type { ComposerInjectContent } from "@/components/chat/message-input"
+import { useAnnotationInjection } from "@/components/chat/use-annotation-injection"
+import { buildQuotedMarkdown } from "@/lib/message-quote"
 import { MessageListView } from "@/components/message/message-list-view"
 import {
   getCachedSelectors,
@@ -46,6 +48,7 @@ import type {
   PlanApprovalAnswer,
   PromptDraft,
   QuestionAnswer,
+  RenderPageAnswer,
 } from "@/lib/types"
 import { cn, randomUUID } from "@/lib/utils"
 import { userPromptHistory } from "@/lib/composer-history"
@@ -282,6 +285,21 @@ export function CanvasConversationSurface({
     () => setComposerHandBacks((pending) => pending.slice(1)),
     []
   )
+  // Quote and annotation join the same one-at-a-time queue the send bounce
+  // uses, so the card's composer takes them exactly like a handed-back send.
+  const pushInject = useCallback(
+    (payload: ComposerInjectContent) =>
+      setComposerHandBacks((pending) => [...pending, payload]),
+    []
+  )
+  const handleAnnotatePage = useAnnotationInjection(contextKey, pushInject)
+  const handleQuoteSelection = useCallback(
+    (selected: string) => {
+      const quoted = buildQuotedMarkdown(selected)
+      if (quoted) pushInject({ text: quoted, mode: "append" })
+    },
+    [pushInject]
+  )
   const [sendSignal, setSendSignal] = useState(0)
   const creatingRef = useRef(false)
   // Mirrors `creatingRef` as state, purely so the card can refuse to be thrown
@@ -750,6 +768,12 @@ export function CanvasConversationSurface({
     [acpActions, contextKey]
   )
 
+  const handleAnswerRenderPage = useCallback(
+    (pageId: string, answer: RenderPageAnswer) =>
+      acpActions.answerRenderPage(contextKey, pageId, answer),
+    [acpActions, contextKey]
+  )
+
   const handleAnswerPlanApproval = useCallback(
     (approvalId: string, answer: PlanApprovalAnswer) =>
       acpActions.answerPlanApproval(contextKey, approvalId, answer),
@@ -858,6 +882,7 @@ export function CanvasConversationSurface({
           pendingQuestion={conn.pendingQuestion}
           pendingAskQuestion={conn.pendingAskQuestion}
           pendingPlanApproval={conn.pendingPlanApproval}
+          pendingRenderPage={conn.pendingRenderPage}
           onFocus={handleFocus}
           onSend={handleSend}
           onCancel={handleCancel}
@@ -865,6 +890,9 @@ export function CanvasConversationSurface({
           onAnswerQuestion={handleAnswerQuestion}
           onAnswerAskQuestion={handleAnswerAskQuestion}
           onAnswerPlanApproval={handleAnswerPlanApproval}
+          onAnswerRenderPage={handleAnswerRenderPage}
+          onQuoteSelection={handleQuoteSelection}
+          onAnnotatePage={handleAnnotatePage}
           modes={connectionModes}
           configOptions={connectionConfigOptions}
           modeLoading={modeLoading}
@@ -916,6 +944,8 @@ export function CanvasConversationSurface({
             acpLoadError={acpLoadError}
             hideEmptyState={isDraft}
             onSaveNoteSelection={onSaveSelectionAsNote}
+            onQuoteSelection={handleQuoteSelection}
+            onAnnotatePage={handleAnnotatePage}
           />
         </ConversationShell>
       </div>
diff --git a/src/components/chat/composer/plain-text-content.ts b/src/components/chat/composer/plain-text-content.ts
index 105b129616..fec000de9d 100644
--- a/src/components/chat/composer/plain-text-content.ts
+++ b/src/components/chat/composer/plain-text-content.ts
@@ -1,6 +1,7 @@
 import type { JSONContent } from "@tiptap/core"
 
 import { parseUserMessageSegments } from "@/components/message/user-message-segments"
+import { annotationTag } from "@/lib/adapters/ai-elements-adapter"
 import {
   NO_KNOWN_INVOCATIONS,
   type KnownInvocations,
@@ -80,6 +81,17 @@ export function textToHydratedInlineContent(
   for (const segment of segments) {
     if (segment.kind === "text") {
       out.push(...textToInlineContent(segment.text))
+    } else if (segment.kind === "annotation") {
+      // A re-edited sent message carries its annotation reports back into the
+      // composer: verbatim tag text, not a badge — the composer has no report
+      // panel to open.
+      out.push({
+        type: "text",
+        text: annotationTag(
+          segment.ref,
+          `Label: ${segment.label}\n${segment.body}`
+        ),
+      })
     } else if (isSendDroppedReference(segment.attrs)) {
       out.push({ type: "text", text: referenceToMarkdown(segment.attrs) })
     } else {
diff --git a/src/components/chat/conversation-shell.test.tsx b/src/components/chat/conversation-shell.test.tsx
index c25a24e7e7..f3529239b4 100644
--- a/src/components/chat/conversation-shell.test.tsx
+++ b/src/components/chat/conversation-shell.test.tsx
@@ -57,6 +57,9 @@ vi.mock("@/components/chat/plan-approval-card", async () => {
     },
   }
 })
+vi.mock("@/components/chat/render-page-card", () => ({
+  RenderPageCard: () => null,
+}))
 
 import { ConversationShell } from "./conversation-shell"
 
@@ -72,6 +75,7 @@ function renderShell(extra: Partial<ShellProps> = {}) {
     pendingQuestion: null,
     pendingAskQuestion: null,
     pendingPlanApproval: null,
+    pendingRenderPage: null,
     onFocus: noop,
     onSend: noop,
     onCancel: noop,
@@ -79,6 +83,7 @@ function renderShell(extra: Partial<ShellProps> = {}) {
     onAnswerQuestion: noop,
     onAnswerAskQuestion: noop,
     onAnswerPlanApproval: noop,
+    onAnswerRenderPage: noop,
     ...extra,
   } as unknown as ShellProps
   return render(
diff --git a/src/components/chat/conversation-shell.tsx b/src/components/chat/conversation-shell.tsx
index 46897f3044..1111bc8e2f 100644
--- a/src/components/chat/conversation-shell.tsx
+++ b/src/components/chat/conversation-shell.tsx
@@ -5,11 +5,13 @@ import type {
   ConnectionStatus,
   PendingPlanApprovalState,
   PendingQuestionState,
+  PendingRenderPageState,
   PlanApprovalAnswer,
   PromptCapabilitiesInfo,
   PromptDraft,
   PromptInputBlock,
   QuestionAnswer,
+  RenderPageAnswer,
   SessionConfigOptionInfo,
   AsyncTaskRecord,
   SessionFailureRecord,
@@ -35,6 +37,7 @@ import { PermissionDialog } from "@/components/chat/permission-dialog"
 import { QuestionDialog } from "@/components/chat/question-dialog"
 import { AskQuestionCard } from "@/components/chat/ask-question-card"
 import { PlanApprovalCard } from "@/components/chat/plan-approval-card"
+import { RenderPageCard } from "@/components/chat/render-page-card"
 import { MarkdownImageProvider } from "@/components/ai-elements/markdown-local-image"
 
 interface ConversationShellProps {
@@ -72,6 +75,9 @@ interface ConversationShellProps {
   pendingAskQuestion: PendingQuestionState | null
   /** Awaiting-decision Grok `exit_plan_mode` approval. */
   pendingPlanApproval: PendingPlanApprovalState | null
+  /** Awaiting-answer `render_page` (the agent blocks until the user submits on
+   *  the page or dismisses it). */
+  pendingRenderPage: PendingRenderPageState | null
   onFocus: () => void
   onSend: (draft: PromptDraft, modeId?: string | null) => void
   onCancel: () => void
@@ -85,6 +91,17 @@ interface ConversationShellProps {
     approvalId: string,
     answer: PlanApprovalAnswer
   ) => void | Promise<void>
+  onAnswerRenderPage: (
+    pageId: string,
+    answer: RenderPageAnswer
+  ) => void | Promise<void>
+  /** Quotes selected text (from the transcript or a live render_page) into
+   *  the composer. Omitted on surfaces without a composer — the quote action
+   *  is then not offered, only copy remains. */
+  onQuoteSelection?: (text: string) => void
+  /** Sends a finished render_page annotation session to the composer as
+   *  formatted text. Omitted on surfaces without a composer. */
+  onAnnotatePage?: (text: string) => void
   children: ReactNode
   modes?: SessionModeInfo[]
   configOptions?: SessionConfigOptionInfo[]
@@ -184,6 +201,7 @@ export function ConversationShell({
   pendingQuestion,
   pendingAskQuestion,
   pendingPlanApproval,
+  pendingRenderPage,
   onFocus,
   onSend,
   onCancel,
@@ -191,6 +209,9 @@ export function ConversationShell({
   onAnswerQuestion,
   onAnswerAskQuestion,
   onAnswerPlanApproval,
+  onAnswerRenderPage,
+  onQuoteSelection,
+  onAnnotatePage,
   children,
   modes,
   configOptions,
@@ -306,6 +327,19 @@ export function ConversationShell({
             </MarkdownImageProvider>
           </div>
         )}
+        {pendingRenderPage && (
+          <div className="mx-auto w-full chat-content-w px-4">
+            {/* key on page_id so the card remounts (fresh answer / error state)
+                when the slot is reused for a new awaiting page. */}
+            <RenderPageCard
+              key={pendingRenderPage.page_id}
+              page={pendingRenderPage}
+              onAnswer={onAnswerRenderPage}
+              onQuote={onQuoteSelection}
+              onAnnotate={onAnnotatePage}
+            />
+          </div>
+        )}
 
         {composerBanner && (
           <div className="mx-auto w-full chat-content-w px-4 pb-2">
diff --git a/src/components/chat/message-input.test.tsx b/src/components/chat/message-input.test.tsx
index ca7c564d03..3bca2b6e50 100644
--- a/src/components/chat/message-input.test.tsx
+++ b/src/components/chat/message-input.test.tsx
@@ -821,6 +821,74 @@ describe("MessageInput injectContent", () => {
     )
   })
 
+  it("attaches an annotation as one chip that sends as a resource block", async () => {
+    const onSend = vi.fn()
+    const { view, editor } = await mount({ onSend })
+    act(() => {
+      editor.commands.setContent("make these changes")
+    })
+
+    view.rerender(
+      tree({
+        onSend,
+        injectContent: {
+          annotation: {
+            text: "The user annotated the page...\nComment: bigger",
+            label: "Page annotation",
+          },
+        },
+      })
+    )
+    await nextFrame() // the inject's own frame
+    // The draft keeps its shape: the user's own text is untouched prose and
+    // the report is a badge, not loose lines in the input.
+    expect(serializeDocToText(editor.state.doc).trim()).toBe(
+      "make these changes"
+    )
+    expect(JSON.stringify(editor.getJSON())).toContain('"type":"reference"')
+    expect(JSON.stringify(editor.getJSON())).toContain("Page annotation")
+
+    pressEnter(editor)
+    expect(onSend).toHaveBeenCalledTimes(1)
+    expect(onSend.mock.calls[0][0].blocks).toEqual([
+      { type: "text", text: "make these changes" },
+      expect.objectContaining({
+        type: "resource",
+        mime_type: "text/markdown",
+        text: "The user annotated the page...\nComment: bigger",
+      }),
+    ])
+  })
+
+  it("falls an annotation back to prose when the agent takes no embedded context", async () => {
+    const { view, editor } = await mount({})
+    act(() => {
+      editor.commands.setContent("hello")
+    })
+    view.rerender(
+      tree({
+        promptCapabilities: {
+          image: true,
+          audio: false,
+          embedded_context: false,
+        },
+        injectContent: {
+          // The panel's real payload: a Label line the prose fallback has no
+          // badge to name, so it must not leak into the draft.
+          annotation: {
+            text: "Label: Page annotation - bigger\nComment: bigger",
+            label: "Page annotation - bigger",
+          },
+        },
+      })
+    )
+    await waitFor(() =>
+      expect(serializeDocToText(editor.state.doc)).toBe(
+        "hello\n\nComment: bigger\n\n"
+      )
+    )
+  })
+
   // A send handed back undelivered (a canvas card's prompt that bounced off a
   // turn already in flight). The composer had cleared itself for it, and the
   // user may have started writing again before it came back.
diff --git a/src/components/chat/message-input.tsx b/src/components/chat/message-input.tsx
index 817d01d634..b1b8b4168c 100644
--- a/src/components/chat/message-input.tsx
+++ b/src/components/chat/message-input.tsx
@@ -3,6 +3,7 @@
 import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react"
 import { useTranslations } from "next-intl"
 import { isImeCompositionKey } from "@/lib/ime-composition"
+import { stripAnnotationLabel } from "@/lib/adapters/ai-elements-adapter"
 import { Button } from "@/components/ui/button"
 import {
   BookOpenText,
@@ -101,7 +102,10 @@ import {
   serializeDocToText,
 } from "@/components/chat/composer/to-prompt-blocks"
 import { textToInlineContent } from "@/components/chat/composer/plain-text-content"
-import { isEmbeddedReferenceUri } from "@/components/chat/composer/reference-uri"
+import {
+  buildEmbeddedReferenceUri,
+  isEmbeddedReferenceUri,
+} from "@/components/chat/composer/reference-uri"
 import {
   applyExpertReference,
   blankLineAfter,
@@ -161,6 +165,16 @@ export type ComposerInjectContent =
        */
       mode?: "replace" | "append"
     }
+  | {
+      /**
+       * A finished `render_page` annotation session: the formatted report
+       * rides in as one deletable chip (the same embedded-resource badge a
+       * browser-page handoff uses), not as loose prose in the draft. An
+       * agent that takes no embedded context gets the text appended as a
+       * trailing block instead.
+       */
+      annotation: { text: string; label: string }
+    }
   | {
       /**
        * A message this composer already let go of — a send the backend turned
@@ -412,6 +426,16 @@ export function MessageInput({
   useEffect(() => {
     knownInvocationsRef.current = knownInvocations
   }, [knownInvocations])
+  // The inject effect must not list the attachment machinery or the agent's
+  // capability flags as deps — their identity shifts across renders, and a
+  // re-run of this effect would re-inject the same payload. Read them late,
+  // at the frame the injection actually runs.
+  const attachRef = useRef<typeof attach | null>(null)
+  const embeddedContextRef = useRef(promptCapabilities.embedded_context)
+  useEffect(() => {
+    attachRef.current = attach
+    embeddedContextRef.current = promptCapabilities.embedded_context
+  })
   const { shortcuts } = useShortcutSettings()
   const effectiveDraftStorageKey = draftStorageKey ?? null
   const resolvedPlaceholder = placeholder ?? t("askAnything")
@@ -763,6 +787,41 @@ export function MessageInput({
           )
           setComposerEmpty(isComposerEmpty(editor))
         }
+      } else if ("annotation" in payload) {
+        if (handle) {
+          const { text, label } = payload.annotation
+          const editor = handle.getEditor()
+          if (embeddedContextRef.current && editor && attachRef.current) {
+            // One deletable chip whose bytes live in `embeddedPayloadsRef`
+            // until send — the same path a browser-page handoff takes, so the
+            // draft keeps its shape and the transcript renders the badge back.
+            attachRef.current.insertFileReferences(
+              [
+                {
+                  name: label,
+                  realBlock: {
+                    type: "resource",
+                    uri: buildEmbeddedReferenceUri(),
+                    mime_type: "text/markdown",
+                    text,
+                    blob: null,
+                  },
+                },
+              ],
+              {}
+            )
+          } else {
+            // An agent that takes no embedded context gets the report as a
+            // trailing prose block rather than nothing — minus the internal
+            // `Label:` line, which names a badge this path will never show.
+            const existing = editor ? serializeDocToText(editor.state.doc) : ""
+            handle.focus()
+            handle.insertTextAtCursor(
+              `${blankLineAfter(existing)}${stripAnnotationLabel(text)}\n\n`
+            )
+          }
+          setComposerEmpty(false)
+        }
       } else if (handle) {
         if (payload.mode === "append") {
           // Land at the end of whatever is already drafted, separated by a blank
diff --git a/src/components/chat/render-page-card.test.tsx b/src/components/chat/render-page-card.test.tsx
new file mode 100644
index 0000000000..215bef1e0d
--- /dev/null
+++ b/src/components/chat/render-page-card.test.tsx
@@ -0,0 +1,97 @@
+import { type ReactElement } from "react"
+import { fireEvent, render, screen, waitFor } from "@testing-library/react"
+import { NextIntlClientProvider } from "next-intl"
+import { describe, expect, it, vi } from "vitest"
+
+// The frame is under its own coverage (and jsdom won't run the srcdoc);
+// stand it in with a button that replays a page submit.
+vi.mock("@/components/message/render-page-frame", () => ({
+  RenderPageFrame: ({
+    onSubmit,
+  }: {
+    onSubmit?: (s: {
+      id: number
+      summary: string
+      data: unknown
+    }) => Promise<void>
+  }) => (
+    <button
+      type="button"
+      data-testid="page-submit"
+      onClick={() =>
+        // The real frame awaits and reports the rejection back to the page;
+        // here it only needs to not leak an unhandled rejection.
+        void onSubmit?.({ id: 1, summary: "picked A", data: { a: 1 } })?.catch(
+          () => {}
+        )
+      }
+    />
+  ),
+}))
+
+import { RenderPageCard } from "./render-page-card"
+import enMessages from "@/i18n/messages/en.json"
+import type { PendingRenderPageState } from "@/lib/types"
+
+function renderWithIntl(ui: ReactElement) {
+  return render(
+    <NextIntlClientProvider locale="en" messages={enMessages}>
+      {ui}
+    </NextIntlClientProvider>
+  )
+}
+
+const PAGE: PendingRenderPageState = {
+  page_id: "p1",
+  title: "Theme picker",
+  html: "<h1>hi</h1>",
+  created_at: "2026-10-25T00:00:00Z",
+}
+
+const ui = enMessages.Folder.chat.renderPage
+
+describe("RenderPageCard", () => {
+  it("titles the card with the page title and the waiting hint", () => {
+    renderWithIntl(<RenderPageCard page={PAGE} onAnswer={vi.fn()} />)
+    expect(screen.getByText("Theme picker")).toBeInTheDocument()
+    expect(screen.getByText(ui.waitingHint)).toBeInTheDocument()
+  })
+
+  it("falls back to the generic title when the agent gave the page none", () => {
+    renderWithIntl(
+      <RenderPageCard page={{ ...PAGE, title: "" }} onAnswer={vi.fn()} />
+    )
+    expect(screen.getByText(ui.title)).toBeInTheDocument()
+  })
+
+  it("routes a page submit to the answer callback", async () => {
+    const onAnswer = vi.fn().mockResolvedValue(undefined)
+    renderWithIntl(<RenderPageCard page={PAGE} onAnswer={onAnswer} />)
+    fireEvent.click(screen.getByTestId("page-submit"))
+    await waitFor(() =>
+      expect(onAnswer).toHaveBeenCalledWith("p1", {
+        summary: "picked A",
+        data: { a: 1 },
+        declined: false,
+      })
+    )
+  })
+
+  it("surfaces a failed submit as the retryable error line", async () => {
+    const onAnswer = vi.fn().mockRejectedValue(new Error("offline"))
+    renderWithIntl(<RenderPageCard page={PAGE} onAnswer={onAnswer} />)
+    fireEvent.click(screen.getByTestId("page-submit"))
+    await waitFor(() =>
+      expect(screen.getByText(ui.submitError)).toBeInTheDocument()
+    )
+  })
+
+  it("dismisses with a decline", async () => {
+    const onAnswer = vi.fn().mockResolvedValue(undefined)
+    renderWithIntl(<RenderPageCard page={PAGE} onAnswer={onAnswer} />)
+    fireEvent.click(screen.getByRole("button", { name: ui.dismiss }))
+    await waitFor(() =>
+      expect(onAnswer).toHaveBeenCalledWith("p1", { declined: true })
+    )
+  })
+})
diff --git a/src/components/chat/render-page-card.tsx b/src/components/chat/render-page-card.tsx
new file mode 100644
index 0000000000..5f552a8cd3
--- /dev/null
+++ b/src/components/chat/render-page-card.tsx
@@ -0,0 +1,132 @@
+"use client"
+
+import { useRef, useState } from "react"
+import { useTranslations } from "next-intl"
+import { Loader2, X } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import { RenderPageFrame } from "@/components/message/render-page-frame"
+import {
+  renderPageAnswerFromSubmit,
+  type RenderPageSubmit,
+} from "@/lib/render-page"
+import type { PendingRenderPageState, RenderPageAnswer } from "@/lib/types"
+
+interface RenderPageCardProps {
+  /** The awaiting-answer page. The shell renders this card only while a page
+   *  is pending, so the prop is always present. */
+  page: PendingRenderPageState
+  /** Resolves the parked `render_page` tool call. Returns a promise so the
+   *  frame can reject the page's submit and let it retry on failure. */
+  onAnswer: (pageId: string, answer: RenderPageAnswer) => void | Promise<void>
+  /** Quotes selected page text into the composer; omitted where there is no
+   *  composer, and the frame then offers only copy. */
+  onQuote?: (text: string) => void
+  /** Sends a finished annotation session to the composer as formatted text;
+   *  omitted where there is no composer, and no annotate entry is offered. */
+  onAnnotate?: (text: string) => void
+}
+
+/**
+ * Pinned card for an awaiting-answer `render_page`: the page the agent is
+ * blocked on, rendered in its sandboxed frame above the composer. The page
+ * itself carries the submit control (`codeg.render.submit`); this card only
+ * frames it, relays the answer, and offers the dismissal (Close) the agent is
+ * told to read as "the user did not answer".
+ */
+export function RenderPageCard({
+  page,
+  onAnswer,
+  onQuote,
+  onAnnotate,
+}: RenderPageCardProps) {
+  const t = useTranslations("Folder.chat.renderPage")
+  const [submitting, setSubmitting] = useState(false)
+  const [dismissSubmitting, setDismissSubmitting] = useState(false)
+  const [error, setError] = useState(false)
+  const inFlight = useRef(false)
+
+  const submit = async (s: RenderPageSubmit) => {
+    if (inFlight.current) return
+    inFlight.current = true
+    setSubmitting(true)
+    setError(false)
+    try {
+      await onAnswer(page.page_id, renderPageAnswerFromSubmit(s))
+      // On success the backend's `render_page_resolved` unmounts this card;
+      // keep the frame in-flight until then rather than flashing it back on.
+      inFlight.current = false
+    } catch (e) {
+      setError(true)
+      setSubmitting(false)
+      inFlight.current = false
+      // Rejections reach the page as a failed submit promise, so its own
+      // error handling (a retry click) is the recovery path.
+      throw e instanceof Error ? e : new Error(String(e))
+    }
+  }
+
+  const dismiss = () => {
+    if (inFlight.current) return
+    inFlight.current = true
+    setDismissSubmitting(true)
+    setError(false)
+    void (async () => {
+      try {
+        await onAnswer(page.page_id, { declined: true })
+      } catch {
+        setError(true)
+      } finally {
+        setDismissSubmitting(false)
+        inFlight.current = false
+      }
+    })()
+  }
+
+  const locked = submitting || dismissSubmitting
+
+  return (
+    <div className="w-full space-y-2 rounded-lg border border-border/60 bg-card/60 p-4">
+      <div className="flex items-center gap-1.5">
+        <div className="min-w-0 flex-1 text-sm font-medium text-foreground">
+          <span className="truncate">{page.title || t("title")}</span>
+          <span className="ms-2 text-xs font-normal text-muted-foreground">
+            {t("waitingHint")}
+          </span>
+        </div>
+        {submitting && (
+          <Loader2 className="size-3.5 shrink-0 animate-spin text-muted-foreground" />
+        )}
+        <Button
+          variant="ghost"
+          size="icon"
+          className="size-7 shrink-0"
+          disabled={locked}
+          onClick={dismiss}
+          title={t("dismiss")}
+          aria-label={t("dismiss")}
+        >
+          <X className="size-4" />
+        </Button>
+      </div>
+
+      <div className="overflow-hidden rounded-md border border-border/60 bg-background">
+        <RenderPageFrame
+          html={page.html}
+          // The card stays `waiting` through its own submit/dismiss: flipping
+          // it would rebuild the srcdoc and reload the page, destroying the
+          // very document whose submit promise the reply (or rejection) must
+          // reach. `inFlight` already blocks a second answer, and a success
+          // unmounts this card via `render_page_resolved`.
+          answerState={{ waiting: true, answer: null }}
+          onSubmit={submit}
+          onQuote={onQuote}
+          onAnnotate={onAnnotate}
+          pageTitle={page.title}
+        />
+      </div>
+
+      {error && <p className="text-xs text-destructive">{t("submitError")}</p>}
+    </div>
+  )
+}
diff --git a/src/components/chat/use-annotation-injection.ts b/src/components/chat/use-annotation-injection.ts
new file mode 100644
index 0000000000..4681956424
--- /dev/null
+++ b/src/components/chat/use-annotation-injection.ts
@@ -0,0 +1,49 @@
+import { useCallback, useEffect, useRef } from "react"
+import { useTranslations } from "next-intl"
+
+import type { ComposerInjectContent } from "./message-input"
+
+/**
+ * The transcript side of a finished `render_page` annotation: turn the page's
+ * report into the composer injection both the detail panel and the canvas
+ * card use, so an annotation behaves the same wherever the page was rendered.
+ *
+ * The chip reads "Page annotation 2 - first words of the comment…" so several
+ * annotations on one page stay tellable apart in the composer; the note takes
+ * its leading twenty characters and the badge's own truncation may close the
+ * tail, which is fine without brackets to strand. The number restarts at 1
+ * when `resetKey` changes — it counts one conversation's (or one card's)
+ * annotations, not whatever this component instance happened to host.
+ *
+ * The label rides inside the report itself: the transcript persists only the
+ * block's body, so this one `Label:` line is what lets a re-read message name
+ * its badge exactly as the composer did — short name plus the comment
+ * snippet — instead of the random uri the badge was keyed by. Single line:
+ * the snippet comes from one `Comment:` line.
+ */
+export function useAnnotationInjection(
+  resetKey: unknown,
+  inject: (payload: ComposerInjectContent) => void
+): (text: string) => void {
+  const t = useTranslations("Folder.chat.renderPage")
+  const seqRef = useRef(0)
+  useEffect(() => {
+    seqRef.current = 0
+  }, [resetKey])
+  return useCallback(
+    (text: string) => {
+      seqRef.current += 1
+      const comment = text.match(/^Comment: (.+)$/m)?.[1]?.trim() ?? ""
+      const snippet = comment.length > 20 ? `${comment.slice(0, 20)}…` : comment
+      const label = t("annotateChip", { n: seqRef.current })
+      const chipLabel = snippet ? `${label} - ${snippet}` : label
+      inject({
+        annotation: {
+          text: `Label: ${chipLabel}\n${text}`,
+          label: chipLabel,
+        },
+      })
+    },
+    [t, inject]
+  )
+}
diff --git a/src/components/conversations/conversation-detail-panel.tsx b/src/components/conversations/conversation-detail-panel.tsx
index b361fae7fd..30525a51f6 100644
--- a/src/components/conversations/conversation-detail-panel.tsx
+++ b/src/components/conversations/conversation-detail-panel.tsx
@@ -62,6 +62,7 @@ import {
 } from "@/components/message/goal-control-context"
 import { useAdvertisedGoalActions } from "@/hooks/use-goal-actions"
 import { ConversationShell } from "@/components/chat/conversation-shell"
+import { useAnnotationInjection } from "@/components/chat/use-annotation-injection"
 import { SessionConfigStaleBanner } from "@/components/chat/session-config-stale-banner"
 import { PiProjectTrustBanner } from "@/components/chat/pi-project-trust-banner"
 import { FeedbackNotesDisplay } from "@/components/chat/feedback-notes-display"
@@ -139,6 +140,7 @@ import {
   type PromptDraft,
   type PromptInputBlock,
   type QuestionAnswer,
+  type RenderPageAnswer,
   type UserMessageBlock,
 } from "@/lib/types"
 import {
@@ -1648,6 +1650,15 @@ const ConversationTabView = memo(function ConversationTabView({
     [acpActions, tabId]
   )
 
+  // Awaiting-answer `render_page`: resolve the parked MCP call with the page
+  // submit (or a dismissal). The backend broadcasts `render_page_resolved` to
+  // clear the card on every client.
+  const handleAnswerRenderPage = useCallback(
+    (pageId: string, answer: RenderPageAnswer) =>
+      acpActions.answerRenderPage(tabId, pageId, answer),
+    [acpActions, tabId]
+  )
+
   // Grok `exit_plan_mode` approval: resolve the blocked ext request. The backend
   // broadcasts `plan_approval_resolved` to clear the card on every client.
   //
@@ -1770,6 +1781,15 @@ const ConversationTabView = memo(function ConversationTabView({
     setComposerInject({ text: quoted, mode: "append" })
   }, [])
 
+  // A finished render_page annotation attaches to the composer as one
+  // deletable chip (like a browser-page handoff), not as loose prose in the
+  // draft. Fresh object each time so the inject re-fires. (The shared hook
+  // also serves the canvas cards.)
+  const handleAnnotatePage = useAnnotationInjection(
+    dbConversationId,
+    setComposerInject
+  )
+
   /**
    * "Ask about this selection": start a SEPARATE conversation for the question
    * rather than appending to this one, so a side question doesn't derail (or
@@ -2157,6 +2177,7 @@ const ConversationTabView = memo(function ConversationTabView({
           onQuoteSelection={
             composerAvailable ? handleQuoteSelection : undefined
           }
+          onAnnotatePage={composerAvailable ? handleAnnotatePage : undefined}
           // Asking opens its own conversation, so it needs a folder to open it in
           // rather than a usable composer here — a transcript whose composer is
           // blocked (session/load failure) can still spawn the question elsewhere.
@@ -2317,6 +2338,7 @@ const ConversationTabView = memo(function ConversationTabView({
       pendingQuestion={conn.pendingQuestion}
       pendingAskQuestion={conn.pendingAskQuestion}
       pendingPlanApproval={conn.pendingPlanApproval}
+      pendingRenderPage={conn.pendingRenderPage}
       onFocus={handleFocus}
       onSend={handleSend}
       onCancel={handleCancel}
@@ -2324,6 +2346,9 @@ const ConversationTabView = memo(function ConversationTabView({
       onAnswerQuestion={handleAnswerQuestion}
       onAnswerAskQuestion={handleAnswerAskQuestion}
       onAnswerPlanApproval={handleAnswerPlanApproval}
+      onAnswerRenderPage={handleAnswerRenderPage}
+      onQuoteSelection={composerAvailable ? handleQuoteSelection : undefined}
+      onAnnotatePage={composerAvailable ? handleAnnotatePage : undefined}
       modes={connectionModes}
       configOptions={connectionConfigOptions}
       modeLoading={modeLoading}
diff --git a/src/components/message/activity/activity-timeline.tsx b/src/components/message/activity/activity-timeline.tsx
index fdb8eea19f..962fe1c4ef 100644
--- a/src/components/message/activity/activity-timeline.tsx
+++ b/src/components/message/activity/activity-timeline.tsx
@@ -13,6 +13,7 @@ import type {
 import { ActivityRenderProvider, useActivityRender } from "./activity-context"
 import { GOAL_ICON, IMAGE_ICON, toolIcon } from "./step-visuals"
 import { AskQuestionResultCard } from "../ask-question-result-card"
+import { RenderPageResultCard } from "../render-page-result-card"
 import { CODEG_MCP_TOOL_ICONS, CodegMcpToolCard } from "../codeg-mcp-tool-card"
 import { GoalRunPart, GoalToolCallPart } from "../goal-tool-call"
 import { isCodegMcpWorkbenchTool } from "@/lib/codeg-mcp-tool"
@@ -397,6 +398,23 @@ function ToolStepView({ step: given }: { step: ToolStep }) {
           />
         </HostedRow>
       )
+    case "render-page":
+      return (
+        <HostedRow
+          stepKey={step.key}
+          icon={toolIcon(tool)}
+          status={tool.status}
+          kindLabel={t("kind.renderPage")}
+          inset={false}
+        >
+          <RenderPageResultCard
+            input={part.input ?? null}
+            output={part.output ?? null}
+            errorText={part.errorText ?? null}
+            state={part.state}
+          />
+        </HostedRow>
+      )
     case "workbench": {
       const name = tool.toolName.toLowerCase()
       if (isCodegMcpWorkbenchTool(name)) {
@@ -458,6 +476,8 @@ function hostedKindKey(kind: string) {
       return "kind.delegation" as const
     case "question":
       return "kind.question" as const
+    case "render-page":
+      return "kind.renderPage" as const
     case "plan-mode":
       return "kind.plan" as const
     case "goal":
diff --git a/src/components/message/activity/step-visuals.tsx b/src/components/message/activity/step-visuals.tsx
index 254fa34661..c8c4b45d14 100644
--- a/src/components/message/activity/step-visuals.tsx
+++ b/src/components/message/activity/step-visuals.tsx
@@ -4,6 +4,7 @@ import { useCallback } from "react"
 import { useTranslations } from "next-intl"
 import {
   ActivityIcon as MonitorIcon,
+  AppWindowIcon,
   ArchiveIcon,
   BotIcon,
   BrainIcon,
@@ -108,6 +109,8 @@ export function toolIcon(tool: ToolDescriptor): ActivityIcon {
       return MapIcon
     case "question":
       return MessageCircleQuestionMarkIcon
+    case "render-page":
+      return AppWindowIcon
     case "feedback":
       return MessagesSquareIcon
     case "workbench":
diff --git a/src/components/message/content-parts-renderer.tsx b/src/components/message/content-parts-renderer.tsx
index af2ce0668e..e38ca214ed 100644
--- a/src/components/message/content-parts-renderer.tsx
+++ b/src/components/message/content-parts-renderer.tsx
@@ -34,7 +34,11 @@ import {
 } from "./context-compaction-card"
 import { GeneratedImagesBlock } from "./generated-images-block"
 import { HtmlFilePreviews } from "./html-file-previews"
-import { PlainTextWithBadges } from "./plain-text-with-badges"
+import {
+  AnnotationReportProvider,
+  PlainTextWithBadges,
+} from "./plain-text-with-badges"
+import { annotationRefsIn } from "./user-message-segments"
 import { PlanMarkdownCard } from "./plan-mode-card"
 import { ResumedDelegationCard } from "./resumed-delegation-card"
 import { TurnErrorPart } from "./turn-error-part"
@@ -428,14 +432,34 @@ export const ContentPartsRenderer = memo(function ContentPartsRenderer({
   role,
   isStreaming = false,
 }: ContentPartsRendererProps) {
+  // Every annotation report this bubble holds, whichever part it sits in —
+  // an agent's record keeps the block away from the badge that opens it.
+  const annotationReports = useMemo(
+    () =>
+      new Set(
+        role === "user"
+          ? parts.flatMap((part) =>
+              part.type === "text" ? annotationRefsIn(part.text) : []
+            )
+          : []
+      ),
+    [parts, role]
+  )
   // Anything the agent produced is drawn as its activity. A "tool" turn (a
   // viewer that passes the transcript's roles through) is agent output too.
   if (role !== "user" && role !== "system") {
     return <AssistantActivity parts={parts} isStreaming={isStreaming} />
   }
+  const body = parts.map((part, i) =>
+    renderPart(part, `${i}`, role, isStreaming)
+  )
+  if (role !== "user") {
+    return <div className="space-y-4">{body}</div>
+  }
+  // One user bubble shares its open annotation reports across its parts.
   return (
-    <div className="space-y-4">
-      {parts.map((part, i) => renderPart(part, `${i}`, role, isStreaming))}
-    </div>
+    <AnnotationReportProvider reports={annotationReports}>
+      <div className="space-y-4">{body}</div>
+    </AnnotationReportProvider>
   )
 })
diff --git a/src/components/message/message-list-view.tsx b/src/components/message/message-list-view.tsx
index c7abb5ab39..54fe160f2b 100644
--- a/src/components/message/message-list-view.tsx
+++ b/src/components/message/message-list-view.tsx
@@ -107,6 +107,10 @@ import {
   type ViewportTop,
 } from "@/components/message/virtualized-message-thread"
 import { SelectionActionBubble } from "@/components/message/selection-action-bubble"
+import {
+  RenderPageAnnotateContext,
+  RenderPageQuoteContext,
+} from "@/components/message/render-page-quote"
 import type { MessageNavEntry } from "@/components/message/conversation-message-nav"
 import type { MessageScrollContextValue } from "@/components/message/message-scroll-context"
 import {
@@ -194,6 +198,14 @@ interface MessageListViewProps {
    * copy alone. MUST be referentially stable.
    */
   onQuoteSelection?: (text: string) => void
+  /**
+   * Send a finished `render_page` annotation session (picked elements, boxed
+   * regions, freehand marks, note) to the conversation composer, as formatted
+   * text. Provided to replayed pages on the same terms as `onQuoteSelection`;
+   * omitted on read-only surfaces, which then offer no annotate entry.
+   * MUST be referentially stable.
+   */
+  onAnnotatePage?: (text: string) => void
   /**
    * Ask a question about a text selection made in this transcript: the host
    * opens a new conversation on the same agent and sends the quoted selection
@@ -1430,6 +1442,7 @@ export function MessageListView({
   insightsInSidebar = false,
   userTurnHeader = null,
   onQuoteSelection,
+  onAnnotatePage,
   onAskSelection,
   onSaveNoteSelection,
   onForkFromTurn,
@@ -2250,13 +2263,24 @@ export function MessageListView({
 
   return (
     <MarkdownImageProvider rootPath={resolvedImageRoot}>
-      <ModelLabelProvider value={modelLabel}>
-        <DelegationStatusIndexProvider value={delegationStatusIndex}>
-          <KnownInvocationsProvider value={knownInvocations}>
-            {thread}
-          </KnownInvocationsProvider>
-        </DelegationStatusIndexProvider>
-      </ModelLabelProvider>
+      {/* A `render_page` replayed in the transcript gets the same quote
+          handler the selection bubble over ordinary text gets, so marking up
+          a shown page sends text to the same composer. */}
+      {/* A `render_page` replayed in the transcript gets the same quote
+          handler the selection bubble over ordinary text gets, and an
+          annotation handler next to it, so marking up a shown page sends
+          text to the same composer. */}
+      <RenderPageAnnotateContext.Provider value={onAnnotatePage ?? null}>
+        <RenderPageQuoteContext.Provider value={onQuoteSelection ?? null}>
+          <ModelLabelProvider value={modelLabel}>
+            <DelegationStatusIndexProvider value={delegationStatusIndex}>
+              <KnownInvocationsProvider value={knownInvocations}>
+                {thread}
+              </KnownInvocationsProvider>
+            </DelegationStatusIndexProvider>
+          </ModelLabelProvider>
+        </RenderPageQuoteContext.Provider>
+      </RenderPageAnnotateContext.Provider>
     </MarkdownImageProvider>
   )
 }
diff --git a/src/components/message/page-handoff-roundtrip.test.tsx b/src/components/message/page-handoff-roundtrip.test.tsx
index ee3f61ac4b..2b5a56cb9a 100644
--- a/src/components/message/page-handoff-roundtrip.test.tsx
+++ b/src/components/message/page-handoff-roundtrip.test.tsx
@@ -24,8 +24,9 @@ import { parseUserMessageSegments } from "./user-message-segments"
  * display text — another once the conversation is opened again — from the
  * agent's own record, which keeps the block the agent read and nothing of the
  * badge — and a third on another client and in a custom agent's history, from
- * codeg's own projection of the prompt. They all have to read the same: in the
- * bubble, the badge the composer showed; under it, the site it came from.
+ * codeg's own projection of the prompt. They all have to read the same: the
+ * attachment appears once, as the site chip under the bubble — its prose
+ * badge is moved out of the sentence, not kept there alongside the chip.
  */
 
 function wrapper({ children }: { children: ReactNode }) {
@@ -278,9 +279,12 @@ describe("a page handed to a conversation, sent and read back", () => {
       it(`reads ${handoff.kind} ${asked} the same every way`, () => {
         const { t, text } = setup()
         const label = handoff.label(t)
+        // One display on every path: no badge in the prose, the page's chip
+        // under it, and the sender's question (or the plain attachment
+        // placeholder when nothing was typed) as the whole bubble.
         const expected = {
-          badges: [label],
-          prose,
+          badges: [],
+          prose: prose || "已附加资源",
           chips: ["www.google.com"],
           images: 1,
         }
@@ -300,8 +304,11 @@ describe("a page handed to a conversation, sent and read back", () => {
 
   it("names the marked-up screenshot in the person's language", () => {
     const { text } = setup()
-    expect(rendered(fromClaude(text, HANDOFFS[0].block, "")).badges).toEqual([
-      "带标注的截图",
-    ])
+    // The kind's localized name lived in the badge; with the badge moved out
+    // of the prose, nothing language-dependent is left to render — the chip
+    // is the site, which reads the same in every language.
+    const renderedMessage = rendered(fromClaude(text, HANDOFFS[0].block, ""))
+    expect(renderedMessage.badges).toEqual([])
+    expect(renderedMessage.chips).toEqual(["www.google.com"])
   })
 })
diff --git a/src/components/message/plain-text-with-badges.test.tsx b/src/components/message/plain-text-with-badges.test.tsx
index ff88686193..e6456ed3f1 100644
--- a/src/components/message/plain-text-with-badges.test.tsx
+++ b/src/components/message/plain-text-with-badges.test.tsx
@@ -1,8 +1,11 @@
-import { render } from "@testing-library/react"
+import { fireEvent, render } from "@testing-library/react"
 import { describe, expect, it } from "vitest"
 
 import { KnownInvocationsProvider } from "./known-invocations-context"
-import { PlainTextWithBadges } from "./plain-text-with-badges"
+import {
+  AnnotationReportProvider,
+  PlainTextWithBadges,
+} from "./plain-text-with-badges"
 
 const badge = (c: HTMLElement, kind: string) =>
   c.querySelector(`[data-reference-badge][data-ref-type='${kind}']`)
@@ -225,3 +228,87 @@ describe("PlainTextWithBadges", () => {
     })
   })
 })
+
+describe("annotation badges", () => {
+  const TAGGED =
+    '[标注1 - 太远了](codeg://embedded/uid-1)改一下\n<annotation ref="codeg://embedded/uid-1" label="标注1 - 太远了">Comment: 太远了\n</annotation>'
+
+  it("opens the report under the bubble when the badge is clicked", async () => {
+    const { container, queryByTestId } = render(
+      <AnnotationReportProvider>
+        <PlainTextWithBadges text={TAGGED} />
+      </AnnotationReportProvider>
+    )
+    expect(queryByTestId("annotation-report")).toBeNull()
+    const button = container.querySelector("button")
+    expect(button).not.toBeNull()
+    fireEvent.click(button!)
+    expect(queryByTestId("annotation-report")?.textContent).toContain(
+      "Comment: 太远了"
+    )
+    fireEvent.click(button!)
+    expect(queryByTestId("annotation-report")).toBeNull()
+  })
+
+  it("leaves a badge without a report in this message inert", () => {
+    const { container } = render(
+      <AnnotationReportProvider>
+        <PlainTextWithBadges text="[标注9 - x](codeg://embedded/uid-9)" />
+      </AnnotationReportProvider>
+    )
+    // No tag in this message: the badge is not a button — its report has not
+    // reached the transcript yet (the optimistic turn before re-read).
+    expect(container.querySelector("button")).toBeNull()
+  })
+
+  it("leads the bubble with the badges a re-read stored under the prose", () => {
+    // The wire puts the context block (hence its badge line) AFTER the typed
+    // prose; the composer showed the badges first. Re-read must recompose:
+    // badges inline at the front, prose after, no blank runs left behind.
+    const { container } = render(
+      <AnnotationReportProvider>
+        <PlainTextWithBadges
+          text={
+            "这儿\n\n[页面标注1 - 美化](codeg://embedded/uid-a)\n\n" +
+            '<annotation ref="codeg://embedded/uid-a" label="页面标注1 - 美化">Comment: 美化</annotation>'
+          }
+        />
+      </AnnotationReportProvider>
+    )
+    expect(container.textContent?.startsWith("页面标注1 - 美化这儿")).toBe(true)
+    expect(container.textContent).not.toContain("\n")
+  })
+
+  it("keeps messages without an annotation report in wire order", () => {
+    // Hoist only fires where a report exists; a plain file badge must not
+    // jump out of its sentence.
+    const { container } = render(
+      <PlainTextWithBadges text="open [app.ts](file:///repo/app.ts) first" />
+    )
+    expect(container.textContent).toBe("open app.ts first")
+  })
+
+  it("opens a report held by a sibling part of the same message", () => {
+    // The renderer splits one message into one part per content block, so the
+    // badge and the `<annotation>` tag typically land in different parts. The
+    // provider knows every ref the whole message carries, so the badge is
+    // still a button and the click still finds the report next door.
+    const { container, queryByTestId } = render(
+      <AnnotationReportProvider reports={["codeg://embedded/uid-b"]}>
+        <PlainTextWithBadges text="[页面标注2 - 改颜色](codeg://embedded/uid-b)" />
+        <PlainTextWithBadges
+          text={
+            '<annotation ref="codeg://embedded/uid-b" label="页面标注2 - 改颜色">Comment: 改颜色</annotation>'
+          }
+        />
+      </AnnotationReportProvider>
+    )
+    expect(queryByTestId("annotation-report")).toBeNull()
+    const button = container.querySelector("button")
+    expect(button).not.toBeNull()
+    fireEvent.click(button!)
+    expect(queryByTestId("annotation-report")?.textContent).toContain(
+      "Comment: 改颜色"
+    )
+  })
+})
diff --git a/src/components/message/plain-text-with-badges.tsx b/src/components/message/plain-text-with-badges.tsx
index 4745ddab44..e0d397a95a 100644
--- a/src/components/message/plain-text-with-badges.tsx
+++ b/src/components/message/plain-text-with-badges.tsx
@@ -1,18 +1,139 @@
 "use client"
 
-import { memo, useMemo } from "react"
+import type { ReactNode } from "react"
+import { createContext, memo, useContext, useMemo, useState } from "react"
 
+import {
+  isEmbeddedReferenceUri,
+  refOfEmbeddedReferenceUri,
+} from "@/components/chat/composer/reference-uri"
 import { ReferenceBadge } from "@/components/chat/composer/badges/reference-badge"
 import { parseQuoteBlocks, type QuoteBlock } from "@/lib/message-quote"
 import { cn } from "@/lib/utils"
 
 import { FileReferenceActions } from "./file-reference-actions"
 import { useKnownInvocations } from "./known-invocations-context"
-import { parseUserMessageSegments } from "./user-message-segments"
+import {
+  parseUserMessageSegments,
+  type UserMessageSegment,
+} from "./user-message-segments"
+
+/** The key a badge and its `<annotation>` tag match on: the annotation's
+ *  own uri, fragment off, percent-forms unified (a rebuilt badge carries the
+ *  double-encoded uri; the tag carries the block's own). */
+function annotationKey(uri: string | undefined): string | null {
+  if (!uri || !uri.toLowerCase().startsWith("codeg://embedded/")) return null
+  const ref = refOfEmbeddedReferenceUri(uri)
+  const base = ref && isEmbeddedReferenceUri(ref) ? ref : uri
+  return base.split("#")[0]
+}
+
+/** Which annotation reports one user bubble has open. Lives above the
+ *  message's parts because the badge and the report it opens typically sit in
+ *  different parts (an agent's record keeps the block at the end). `reports`
+ *  lists every ref the WHOLE message carries, so a badge in one part can
+ *  open a report stored in another. */
+interface AnnotationOpenState {
+  isOpen: (ref: string) => boolean
+  toggle: (ref: string) => void
+  reports: Set<string>
+}
+const AnnotationOpenContext = createContext<AnnotationOpenState | null>(null)
+
+export function AnnotationReportProvider({
+  children,
+  reports,
+}: {
+  children: ReactNode
+  reports?: Iterable<string>
+}) {
+  const [open, setOpen] = useState<Set<string>>(() => new Set())
+  const allReports = useMemo(() => new Set(reports ?? []), [reports])
+  const value = useMemo<AnnotationOpenState>(
+    () => ({
+      isOpen: (ref) => open.has(ref),
+      toggle: (ref) =>
+        setOpen((prev) => {
+          const next = new Set(prev)
+          if (next.has(ref)) next.delete(ref)
+          else next.add(ref)
+          return next
+        }),
+      reports: allReports,
+    }),
+    [open, allReports]
+  )
+  return (
+    <AnnotationOpenContext.Provider value={value}>
+      {children}
+    </AnnotationOpenContext.Provider>
+  )
+}
+
+/** The report an annotation badge opens: the prompt the markup wrote, shown
+ *  as the plain lines it is. */
+function AnnotationReport({ body }: { body: string }) {
+  return (
+    <div
+      data-testid="annotation-report"
+      className="mt-1.5 rounded-md border-s-2 border-foreground/25 bg-black/5 px-2.5 py-1.5 text-xs whitespace-pre-wrap text-muted-foreground dark:bg-white/5"
+      dir="auto"
+    >
+      {body}
+    </div>
+  )
+}
+
+/**
+ * Re-read transcripts carry an annotation as a bare uri line and its
+ * `<annotation>` block BELOW the prose — the wire order, not what the sender
+ * composed. Show what they composed instead: the badges lead inline, the
+ * prose follows, and the reports (rendered only once opened) sit at the
+ * bottom. No-op unless this part actually holds an annotation report.
+ */
+function hoistAnnotations(
+  segments: UserMessageSegment[],
+  reportRefs: Set<string>
+): UserMessageSegment[] {
+  if (reportRefs.size === 0) return segments
+  const badges: UserMessageSegment[] = []
+  const reports: UserMessageSegment[] = []
+  const rest: UserMessageSegment[] = []
+  for (const segment of segments) {
+    if (segment.kind === "annotation") reports.push(segment)
+    else if (
+      segment.kind === "reference" &&
+      reportRefs.has(annotationKey(segment.attrs.uri ?? undefined) ?? "")
+    )
+      badges.push(segment)
+    else rest.push(segment)
+  }
+  if (badges.length === 0) return segments
+  // The lines the badges and blocks were lifted out of leave blank runs
+  // behind: merge adjacent prose (into fresh objects — the parsed segments
+  // stay untouched), fold 3+ newlines, trim the message ends.
+  const prose: UserMessageSegment[] = []
+  for (const segment of rest) {
+    const last = prose[prose.length - 1]
+    if (segment.kind === "text" && last?.kind === "text")
+      last.text = last.text + segment.text
+    else prose.push(segment.kind === "text" ? { ...segment } : segment)
+  }
+  prose.forEach((segment, index) => {
+    if (segment.kind !== "text") return
+    let text = segment.text.replace(/\n{3,}/g, "\n\n")
+    if (index === 0) text = text.replace(/^\s+/, "")
+    if (index === prose.length - 1) text = text.replace(/\s+$/, "")
+    segment.text = text
+  })
+  const kept = prose.filter((s) => s.kind !== "text" || s.text.length > 0)
+  return [...badges, ...kept, ...reports]
+}
 
 /**
  * One prose run: literal text with the five built-in reference kinds (file /
- * agent / session / commit / skill) resolved into inline colored badges. A bare
+ * agent / session / commit / skill) resolved into inline colored badges, and
+ * page-annotation reports kept for the badge that opens them. A bare
  * `/word`·`$word` is a skill badge only when the transcript's agent offers it
  * ({@link useKnownInvocations}); a path or any other slash word stays text.
  *
@@ -21,28 +142,68 @@ import { parseUserMessageSegments } from "./user-message-segments"
  */
 const TextRun = memo(function TextRun({ text }: { text: string }) {
   const knownInvocations = useKnownInvocations()
-  const segments = useMemo(
+  const annotations = useContext(AnnotationOpenContext)
+  const parsed = useMemo(
     () => parseUserMessageSegments(text, { knownInvocations }),
     [text, knownInvocations]
   )
+  // A badge opens a report only where this MESSAGE carries one — reports may
+  // sit in a sibling part (the provider knows the whole bubble), so merge
+  // this part's own refs with the message-level set.
+  const reportRefs = useMemo(
+    () =>
+      new Set([
+        ...parsed.flatMap((s) =>
+          s.kind === "annotation" ? [s.ref.split("#")[0]] : []
+        ),
+        ...(annotations?.reports ?? []),
+      ]),
+    [parsed, annotations]
+  )
+  const segments = useMemo(
+    () => hoistAnnotations(parsed, reportRefs),
+    [parsed, reportRefs]
+  )
   return (
     <>
-      {segments.map((segment, index) =>
-        segment.kind === "reference" ? (
-          segment.attrs.refType === "file" && segment.attrs.uri ? (
-            // Right-clicking a file badge opens its reveal / copy-path menu. A
-            // non-file reference (session, agent, commit, skill) has no path, so
-            // it stays a bare badge.
-            <FileReferenceActions key={index} target={segment.attrs.uri}>
-              <ReferenceBadge data={segment.attrs} />
-            </FileReferenceActions>
-          ) : (
-            <ReferenceBadge key={index} data={segment.attrs} />
+      {segments.map((segment, index) => {
+        if (segment.kind === "annotation") {
+          return annotations?.isOpen(segment.ref.split("#")[0]) ? (
+            <AnnotationReport key={index} body={segment.body} />
+          ) : null
+        }
+        if (segment.kind === "text") {
+          return <span key={index}>{segment.text}</span>
+        }
+        if (segment.attrs.refType !== "file" || !segment.attrs.uri) {
+          // A non-file reference (session, agent, commit, skill) has no path
+          // and no report, so it stays a bare badge.
+          return <ReferenceBadge key={index} data={segment.attrs} />
+        }
+        const key = annotationKey(segment.attrs.uri)
+        const badge = <ReferenceBadge data={segment.attrs} />
+        if (key !== null && reportRefs.has(key)) {
+          // The badge stands for an annotation report in this message: a
+          // click opens it under the bubble. It has no path to reveal.
+          return (
+            <button
+              key={index}
+              type="button"
+              className="cursor-pointer"
+              aria-expanded={annotations?.isOpen(key) ?? false}
+              onClick={() => annotations?.toggle(key)}
+            >
+              {badge}
+            </button>
           )
-        ) : (
-          <span key={index}>{segment.text}</span>
+        }
+        // Right-clicking a file badge opens its reveal / copy-path menu.
+        return (
+          <FileReferenceActions key={index} target={segment.attrs.uri}>
+            {badge}
+          </FileReferenceActions>
         )
-      )}
+      })}
     </>
   )
 })
diff --git a/src/components/message/render-page-frame.test.tsx b/src/components/message/render-page-frame.test.tsx
new file mode 100644
index 0000000000..dab8b57f77
--- /dev/null
+++ b/src/components/message/render-page-frame.test.tsx
@@ -0,0 +1,350 @@
+import { type ReactElement } from "react"
+import { act, fireEvent, render, screen, waitFor } from "@testing-library/react"
+import { NextIntlClientProvider } from "next-intl"
+import { afterEach, describe, expect, it, vi } from "vitest"
+
+// The bubble confirms a copy with a toast, because it unmounts itself right
+// after the action and leaves no button to turn into a checkmark.
+const toastSuccess = vi.fn()
+const toastError = vi.fn()
+vi.mock("sonner", () => ({
+  toast: {
+    success: (m: unknown) => toastSuccess(m),
+    error: (m: unknown) => toastError(m),
+  },
+}))
+
+import { RenderPageFrame } from "./render-page-frame"
+import enMessages from "@/i18n/messages/en.json"
+import {
+  RENDER_PAGE_ANNOTATE_MESSAGE,
+  RENDER_PAGE_ANNOTATION_MESSAGE,
+  RENDER_PAGE_CLEAR_SELECTION_MESSAGE,
+  RENDER_PAGE_SELECTION_ESCAPE_MESSAGE,
+  RENDER_PAGE_SELECTION_MESSAGE,
+} from "@/lib/render-page"
+
+const ml = enMessages.Folder.chat.messageList
+const rp = enMessages.Folder.chat.renderPage
+
+const ANSWER_WAITING = { waiting: true, answer: null } as const
+
+function renderWithIntl(ui: ReactElement) {
+  return render(
+    <NextIntlClientProvider locale="en" messages={enMessages}>
+      {ui}
+    </NextIntlClientProvider>
+  )
+}
+
+/** Deliver a message as if the page inside the frame posted it: the frame
+ *  only trusts events whose source is its own contentWindow. */
+function postFromFrame(
+  iframe: HTMLIFrameElement,
+  data: Record<string, unknown>
+) {
+  act(() => {
+    window.dispatchEvent(
+      new MessageEvent("message", { data, source: iframe.contentWindow })
+    )
+  })
+}
+
+function reportSelection(
+  iframe: HTMLIFrameElement,
+  text: string,
+  rect: { x: number; y: number; width: number; height: number } | null
+) {
+  postFromFrame(iframe, { type: RENDER_PAGE_SELECTION_MESSAGE, text, rect })
+}
+
+/** jsdom has no layout, so every box reports width 0 — which makes the
+ *  clamp's edge math (and its center-fallback) meaningless. Give the frame
+ *  container a believable width before measuring the bubble's anchor. */
+function giveWidth(el: Element, width: number) {
+  Object.defineProperty(el, "clientWidth", { configurable: true, value: width })
+}
+
+afterEach(() => {
+  toastSuccess.mockClear()
+  toastError.mockClear()
+})
+
+describe("RenderPageFrame selection bubble", () => {
+  it("hangs the bubble over a reported selection", () => {
+    const { container } = renderWithIntl(
+      <RenderPageFrame html="<p>hi</p>" answerState={ANSWER_WAITING} />
+    )
+    const iframe = container.querySelector("iframe")!
+    giveWidth(container.firstElementChild!, 400)
+    // Mid-page: the bubble sits above the selection, anchored to its center,
+    // and the translate takes the -8px gap and the flip over the anchor.
+    reportSelection(iframe, "picked text", {
+      x: 40,
+      y: 120,
+      width: 100,
+      height: 16,
+    })
+    const bubble = screen.getByRole("toolbar", {
+      name: ml.selectionActions,
+    })
+    expect(bubble).toHaveStyle({ left: "90px", top: "112px" })
+    expect(bubble).toHaveStyle({ transform: "translate(-50%, -100%)" })
+  })
+
+  it("flips under a selection that starts near the top of the page", () => {
+    const { container } = renderWithIntl(
+      <RenderPageFrame html="<p>hi</p>" answerState={ANSWER_WAITING} />
+    )
+    const iframe = container.querySelector("iframe")!
+    giveWidth(container.firstElementChild!, 400)
+    reportSelection(iframe, "first line", {
+      x: 20,
+      y: 10,
+      width: 60,
+      height: 16,
+    })
+    const bubble = screen.getByRole("toolbar")
+    expect(bubble).toHaveStyle({ left: "50px", top: "34px" })
+    expect(bubble).toHaveStyle({ transform: "translate(-50%, 0)" })
+  })
+
+  it("hides when the page reports the selection gone or pressed Escape", () => {
+    const { container } = renderWithIntl(
+      <RenderPageFrame html="<p>hi</p>" answerState={ANSWER_WAITING} />
+    )
+    const iframe = container.querySelector("iframe")!
+    reportSelection(iframe, "here", { x: 40, y: 120, width: 40, height: 10 })
+    expect(screen.getByRole("toolbar")).toBeInTheDocument()
+    reportSelection(iframe, "", null)
+    expect(screen.queryByRole("toolbar")).toBeNull()
+
+    reportSelection(iframe, "here again", {
+      x: 40,
+      y: 120,
+      width: 40,
+      height: 10,
+    })
+    expect(screen.getByRole("toolbar")).toBeInTheDocument()
+    postFromFrame(iframe, { type: RENDER_PAGE_SELECTION_ESCAPE_MESSAGE })
+    expect(screen.queryByRole("toolbar")).toBeNull()
+  })
+
+  it("ignores a message from another window", () => {
+    const { container } = renderWithIntl(
+      <RenderPageFrame html="<p>hi</p>" answerState={ANSWER_WAITING} />
+    )
+    act(() => {
+      window.dispatchEvent(
+        new MessageEvent("message", {
+          data: {
+            type: RENDER_PAGE_SELECTION_MESSAGE,
+            text: "stranger",
+            rect: { x: 0, y: 100, width: 10, height: 10 },
+          },
+        })
+      )
+    })
+    expect(container.querySelector("iframe")).toBeInTheDocument()
+    expect(screen.queryByRole("toolbar")).toBeNull()
+  })
+
+  it("quotes the text, tells the page to drop the selection, and closes", () => {
+    const onQuote = vi.fn()
+    const { container } = renderWithIntl(
+      <RenderPageFrame
+        html="<p>hi</p>"
+        answerState={ANSWER_WAITING}
+        onQuote={onQuote}
+      />
+    )
+    const iframe = container.querySelector("iframe")!
+    const postSpy = vi.spyOn(iframe.contentWindow!, "postMessage")
+    reportSelection(iframe, "quote me", {
+      x: 40,
+      y: 120,
+      width: 40,
+      height: 10,
+    })
+
+    fireEvent.click(screen.getByRole("button", { name: ml.selectionQuote }))
+    expect(onQuote).toHaveBeenCalledWith("quote me")
+    expect(postSpy).toHaveBeenCalledWith(
+      { type: RENDER_PAGE_CLEAR_SELECTION_MESSAGE },
+      "*"
+    )
+    expect(screen.queryByRole("toolbar")).toBeNull()
+  })
+
+  it("copies the text and toasts, without a quote handler on read-only surfaces", async () => {
+    const writeText = vi.fn().mockResolvedValue(undefined)
+    Object.defineProperty(navigator, "clipboard", {
+      configurable: true,
+      value: { writeText },
+    })
+    const { container } = renderWithIntl(
+      <RenderPageFrame html="<p>hi</p>" answerState={ANSWER_WAITING} />
+    )
+    const iframe = container.querySelector("iframe")!
+    // Without onQuote there is no composer to quote into — only copy remains.
+    expect(screen.queryByRole("button", { name: ml.selectionQuote })).toBeNull()
+
+    reportSelection(iframe, "copy me", { x: 40, y: 120, width: 40, height: 10 })
+    await act(async () => {
+      fireEvent.click(screen.getByRole("button", { name: ml.selectionCopy }))
+    })
+    await waitFor(() => expect(writeText).toHaveBeenCalledWith("copy me"))
+    expect(toastSuccess).toHaveBeenCalledWith(ml.selectionCopied)
+    expect(screen.queryByRole("toolbar")).toBeNull()
+  })
+
+  it("toasts an error when the clipboard write fails", async () => {
+    Object.defineProperty(navigator, "clipboard", {
+      configurable: true,
+      value: { writeText: vi.fn().mockRejectedValue(new Error("denied")) },
+    })
+    Object.defineProperty(document, "execCommand", {
+      configurable: true,
+      value: vi.fn().mockReturnValue(false),
+    })
+    const { container } = renderWithIntl(
+      <RenderPageFrame html="<p>hi</p>" answerState={ANSWER_WAITING} />
+    )
+    const iframe = container.querySelector("iframe")!
+    reportSelection(iframe, "x", { x: 40, y: 120, width: 40, height: 10 })
+    await act(async () => {
+      fireEvent.click(screen.getByRole("button", { name: ml.selectionCopy }))
+    })
+    expect(toastError).toHaveBeenCalledWith(ml.selectionCopyFailed)
+    expect(toastSuccess).not.toHaveBeenCalled()
+  })
+})
+
+const ANNOTATION_PAYLOAD = {
+  viewport: { width: 1280, height: 800 },
+  comment: "make it bigger",
+  elements: [
+    {
+      selector: "#hero > h1",
+      html: '<h1 id="hero">Ship it</h1>',
+      text: "Ship it",
+      attributes: { id: "hero" },
+      styles: { display: "block", fontSize: "16px", fontWeight: "700" },
+      bounds: { x: 10, y: 20, width: 100, height: 40 },
+    },
+  ],
+  regions: [{ id: "region-1", rect: { x: 1, y: 2, width: 3, height: 4 } }],
+  strokes: [
+    {
+      id: "stroke-1",
+      points: [
+        { x: 0, y: 0 },
+        { x: 5, y: 6 },
+      ],
+      bounds: { x: 0, y: 0, width: 5, height: 6 },
+    },
+  ],
+}
+
+describe("RenderPageFrame annotation session", () => {
+  it("hides the annotate entry without a composer handler", () => {
+    const { container } = renderWithIntl(
+      <RenderPageFrame html="<p>hi</p>" answerState={ANSWER_WAITING} />
+    )
+    expect(container.querySelector("iframe")).toBeInTheDocument()
+    expect(screen.queryByTestId("render-page-annotate-button")).toBeNull()
+  })
+
+  it("opens the overlay with localised labels and closes it on a second press", () => {
+    const onAnnotate = vi.fn()
+    const { container } = renderWithIntl(
+      <RenderPageFrame
+        html="<p>hi</p>"
+        answerState={ANSWER_WAITING}
+        onAnnotate={onAnnotate}
+      />
+    )
+    const iframe = container.querySelector("iframe")!
+    const postSpy = vi.spyOn(iframe.contentWindow!, "postMessage")
+    const entry = screen.getByTestId("render-page-annotate-button")
+
+    fireEvent.click(entry)
+    expect(postSpy).toHaveBeenCalledWith(
+      {
+        type: RENDER_PAGE_ANNOTATE_MESSAGE,
+        action: "start",
+        labels: {
+          element: rp.annotateElement,
+          region: rp.annotateRegion,
+          draw: rp.annotateDraw,
+          placeholder: rp.annotatePlaceholder,
+          send: rp.annotateSend,
+          cancel: rp.annotateCancel,
+        },
+      },
+      "*"
+    )
+    expect(entry).toHaveAttribute("aria-pressed", "true")
+
+    fireEvent.click(entry)
+    expect(postSpy).toHaveBeenCalledWith(
+      { type: RENDER_PAGE_ANNOTATE_MESSAGE, action: "stop" },
+      "*"
+    )
+    expect(entry).toHaveAttribute("aria-pressed", "false")
+  })
+
+  it("sends a finished session to the composer as formatted text", () => {
+    const onAnnotate = vi.fn()
+    const { container } = renderWithIntl(
+      <RenderPageFrame
+        html="<p>hi</p>"
+        answerState={ANSWER_WAITING}
+        onAnnotate={onAnnotate}
+        pageTitle="Theme picker"
+      />
+    )
+    const iframe = container.querySelector("iframe")!
+    fireEvent.click(screen.getByTestId("render-page-annotate-button"))
+    postFromFrame(iframe, {
+      type: RENDER_PAGE_ANNOTATION_MESSAGE,
+      payload: ANNOTATION_PAYLOAD,
+    })
+    const [text] = onAnnotate.mock.calls[0] as [string]
+    expect(text).toContain("Page: Theme picker")
+    expect(text).toContain("Comment: make it bigger")
+    expect(text).toContain("Element 1: #hero > h1")
+    expect(text).toContain(
+      "- Styles: display=block; position=; font=700 16px /  ; color=; background="
+    )
+    expect(text).toContain("Region 1: x=1, y=2, width=3, height=4")
+    expect(text).toContain("Drawing 1: 2 points")
+    // The session is over: the entry is no longer pressed.
+    expect(screen.getByTestId("render-page-annotate-button")).toHaveAttribute(
+      "aria-pressed",
+      "false"
+    )
+  })
+
+  it("resets the session when the page cancels, without calling the handler", () => {
+    const onAnnotate = vi.fn()
+    const { container } = renderWithIntl(
+      <RenderPageFrame
+        html="<p>hi</p>"
+        answerState={ANSWER_WAITING}
+        onAnnotate={onAnnotate}
+      />
+    )
+    const iframe = container.querySelector("iframe")!
+    fireEvent.click(screen.getByTestId("render-page-annotate-button"))
+    postFromFrame(iframe, {
+      type: RENDER_PAGE_ANNOTATION_MESSAGE,
+      payload: null,
+    })
+    expect(onAnnotate).not.toHaveBeenCalled()
+    expect(screen.getByTestId("render-page-annotate-button")).toHaveAttribute(
+      "aria-pressed",
+      "false"
+    )
+  })
+})
diff --git a/src/components/message/render-page-frame.tsx b/src/components/message/render-page-frame.tsx
new file mode 100644
index 0000000000..d3ef959389
--- /dev/null
+++ b/src/components/message/render-page-frame.tsx
@@ -0,0 +1,448 @@
+"use client"
+
+import { useCallback, useEffect, useMemo, useRef, useState } from "react"
+import { useTranslations } from "next-intl"
+import { toast } from "sonner"
+import { CopyIcon, MousePointerClick, TextQuote } from "lucide-react"
+import { openExternalTab } from "@/lib/link-open"
+import {
+  buildRenderPageDocument,
+  clampRenderPageHeight,
+  collectRenderPageTheme,
+  formatRenderPageAnnotation,
+  readRenderPageFrameMessage,
+  renderPageAnswerStateMessage,
+  renderPageAnnotateMessage,
+  renderPageClearSelectionMessage,
+  renderPageSubmitReply,
+  renderPageThemeMessage,
+  type RenderPageAnswerState,
+  type RenderPageSubmit,
+} from "@/lib/render-page"
+import { Button } from "@/components/ui/button"
+import { cn, copyTextToClipboard } from "@/lib/utils"
+
+interface RenderPageFrameProps {
+  /** The agent's self-contained HTML document. */
+  html: string
+  /** Where the page stands on its answer: `waiting` injects the submit bridge
+   *  and keeps the page live; a show-only page (and an answered replay) uses
+   *  `{ waiting: false }`. */
+  answerState: RenderPageAnswerState
+  /** Called for a page submit while the page waits. The frame holds the
+   *  page's promise until this settles and replies to the page — an error
+   *  message makes `codeg.render.submit` reject so the page can retry. */
+  onSubmit?: (submit: RenderPageSubmit) => Promise<void>
+  /**
+   * Quote selected page text into the conversation composer. Omitted on
+   * read-only surfaces (the in-stream replay card, the sub-agent transcript)
+   * — the quote action then simply isn't offered and only "copy" remains,
+   * the same rule the transcript's `SelectionActionBubble` follows.
+   */
+  onQuote?: (text: string) => void
+  /**
+   * Send a finished annotation session (picked elements, boxed regions,
+   * freehand marks, note) to the composer as formatted text. Omitted where
+   * there is no composer, and the "annotate" entry button isn't offered.
+   */
+  onAnnotate?: (text: string) => void
+  /** The page's title, echoed into the annotation text so the agent knows
+   *  which page the marks were made on. */
+  pageTitle?: string
+  className?: string
+}
+
+/** Vertical gap between the selection box and the bubble, and the inset it
+ *  keeps from the frame's edges. Mirrors `SelectionActionBubble`. */
+const GAP = 8
+const EDGE = 8
+/** A selection within this many px of the page top gets the bubble under it
+ *  instead of above (where the card's edge would clip it). */
+const FLIP_BELOW_WITHIN = 40
+
+/** Where the bubble hangs, in frame-relative px (the page reports viewport
+ *  rects and the frame shows the page unscrolled vertically, so they read
+ *  directly). `doc` pins the report to the document it was made against: a
+ *  frame rebuild drops the page's selection with it, so a bubble from an
+ *  older document simply stops showing. */
+interface BubbleState {
+  text: string
+  x: number
+  y: number
+  below: boolean
+  doc: string
+}
+
+/**
+ * The sandboxed frame a `render_page` draws in. The page runs without
+ * `allow-same-origin` — no access to this app's storage, credentials or DOM —
+ * and talks to us only through the bootstrap's postMessage protocol: theme
+ * variables (swapped live on a theme switch), its content height (the frame
+ * takes it, so the chat scrolls around it and the page never scrolls inside),
+ * http(s) link clicks (handed to the browser), answers
+ * (`codeg.render.submit`), text selections, and annotation sessions. A
+ * selection can't be read from outside the opaque-origin document, so the page
+ * reports its text and rect; the frame hangs a small copy/quote bubble over
+ * it, the counterpart of the transcript's `SelectionActionBubble`. Marking the
+ * page up (pick elements, box regions, draw) runs entirely page-side — the
+ * frame asks the bootstrap to open the overlay and receives one structured
+ * report back, which `formatRenderPageAnnotation` turns into composer text.
+ */
+export function RenderPageFrame({
+  html,
+  answerState,
+  onSubmit,
+  onQuote,
+  onAnnotate,
+  pageTitle,
+  className,
+}: RenderPageFrameProps) {
+  const t = useTranslations("Folder.chat.messageList")
+  const trp = useTranslations("Folder.chat.renderPage")
+  const frameRef = useRef<HTMLIFrameElement>(null)
+  const containerRef = useRef<HTMLDivElement>(null)
+  const bubbleRef = useRef<HTMLDivElement>(null)
+  const [height, setHeight] = useState(48)
+  const [bubble, setBubble] = useState<BubbleState | null>(null)
+  // An open annotation session, stamped with the document it was started
+  // against: a frame rebuild drops the page's overlay with it, so the entry
+  // button simply falls back to "start" without an extra state clear.
+  const [annot, setAnnot] = useState<{ doc: string } | null>(null)
+  // The latest answer state and the current submit handler, read by the stable
+  // message listener so it never re-subscribes on every render. Synced in an
+  // effect, not during render (react-hooks/refs); the listener only reads them
+  // from a postMessage callback, which always lands after the effect ran.
+  const answerStateRef = useRef(answerState)
+  const submitRef = useRef(onSubmit)
+  const annotateRef = useRef(onAnnotate)
+  const titleRef = useRef(pageTitle)
+  useEffect(() => {
+    answerStateRef.current = answerState
+    submitRef.current = onSubmit
+    annotateRef.current = onAnnotate
+    titleRef.current = pageTitle
+  })
+
+  const { waiting, answer } = answerState
+  const srcdoc = useMemo(
+    () =>
+      buildRenderPageDocument(html, collectRenderPageTheme(), {
+        waiting,
+        answer,
+      }),
+    // A theme switch reaches the page as a message (below); only the page's
+    // own document and its answer state rebuild the frame. The `doc` stamp on
+    // the bubble drops it across a rebuild without an extra state clear.
+    [html, waiting, answer]
+  )
+  // The listener stamps reports with the document they were made against
+  // without re-subscribing on every rebuild.
+  const srcdocRef = useRef(srcdoc)
+  useEffect(() => {
+    srcdocRef.current = srcdoc
+  })
+
+  const post = useCallback((message: unknown) => {
+    frameRef.current?.contentWindow?.postMessage(message, "*")
+  }, [])
+
+  // Keep the loaded page's view of its answer current (another window may
+  // have answered, the user may have dismissed the card) without reloading it.
+  useEffect(() => {
+    post(renderPageAnswerStateMessage({ waiting, answer }))
+  }, [waiting, answer, post])
+
+  // Re-push the theme when the app's own theme flips (the `dark` class is the
+  // marker) or the interface size changes the root font. The frame reports it
+  // rather than being rebuilt, so the page keeps its state.
+  useEffect(() => {
+    const push = () => post(renderPageThemeMessage(collectRenderPageTheme()))
+    const observer = new MutationObserver(push)
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class", "style", "data-font-size"],
+    })
+    window.addEventListener("resize", push)
+    return () => {
+      observer.disconnect()
+      window.removeEventListener("resize", push)
+    }
+  }, [post])
+
+  const handleMessage = useCallback(
+    (event: MessageEvent) => {
+      const frame = frameRef.current
+      if (!frame || event.source !== frame.contentWindow) return
+      const message = readRenderPageFrameMessage(event.data)
+      if (!message) return
+      switch (message.kind) {
+        case "size":
+          setHeight(clampRenderPageHeight(message.height))
+          break
+        case "open-link":
+          openExternalTab(message.url)
+          break
+        case "selection": {
+          const r = message.rect
+          if (!message.text || !r) {
+            setBubble(null)
+            break
+          }
+          const below = r.y < FLIP_BELOW_WITHIN
+          setBubble({
+            text: message.text,
+            x: r.x + r.width / 2,
+            y: below ? r.y + r.height + GAP : r.y - GAP,
+            below,
+            doc: srcdocRef.current,
+          })
+          break
+        }
+        case "selection-escape":
+          setBubble(null)
+          break
+        case "annotation": {
+          // One report per started session: `null` is the page's own cancel,
+          // a payload is a finished session bound for the composer. The entry
+          // button resets either way; a session from an older document (no
+          // live overlay to close) is still delivered — the marks were real.
+          setAnnot(null)
+          const handler = annotateRef.current
+          if (message.payload && handler) {
+            handler(
+              formatRenderPageAnnotation(
+                message.payload,
+                titleRef.current ?? ""
+              )
+            )
+          }
+          break
+        }
+        case "submit": {
+          const handler = submitRef.current
+          if (!handler || !answerStateRef.current.waiting) {
+            post(
+              renderPageSubmitReply(
+                message.id,
+                "This page is no longer waiting for an answer"
+              )
+            )
+            break
+          }
+          // The host re-checks the cap the page checked — a page can replace
+          // its own script.
+          let oversized = false
+          try {
+            const encoded = JSON.stringify(message.data)
+            oversized = !!encoded && encoded.length > 16000
+          } catch {
+            oversized = true
+          }
+          if (oversized) {
+            post(
+              renderPageSubmitReply(
+                message.id,
+                "data must stay under 16000 characters as JSON"
+              )
+            )
+            break
+          }
+          if (!message.summary.trim()) {
+            post(
+              renderPageSubmitReply(
+                message.id,
+                "summary is required: the choice in a few words"
+              )
+            )
+            break
+          }
+          void (async () => {
+            try {
+              await handler(message)
+              // The answer landed (the card will clear on the resolved event);
+              // settle the page's promise and end its wait.
+              post(renderPageSubmitReply(message.id))
+            } catch (e) {
+              post(
+                renderPageSubmitReply(
+                  message.id,
+                  e instanceof Error ? e.message : "The answer was not sent"
+                )
+              )
+            }
+          })()
+          break
+        }
+      }
+    },
+    [post]
+  )
+
+  useEffect(() => {
+    window.addEventListener("message", handleMessage)
+    return () => window.removeEventListener("message", handleMessage)
+  }, [handleMessage])
+
+  // Clamp the bubble's ANCHOR so its box stays inside the frame: it hangs from
+  // a -50% transform, so an unclamped anchor lets half of it run past the
+  // edge, where the card clips it. The measure rides a frame callback (same
+  // shape as `SelectionActionBubble`'s re-measure loop): `offsetWidth` is 0 on
+  // the very first paint, and a post-mount callback is where measured layout
+  // may be folded back into state without a cascading render.
+  useEffect(() => {
+    if (!bubble) return
+    const raf = requestAnimationFrame(() => {
+      const bubbleEl = bubbleRef.current
+      const container = containerRef.current
+      if (!bubbleEl || !container) return
+      const half = bubbleEl.offsetWidth / 2
+      const min = EDGE + half
+      const max = container.clientWidth - EDGE - half
+      const x =
+        min > max
+          ? Math.round(container.clientWidth / 2)
+          : Math.round(Math.min(Math.max(bubble.x, min), max))
+      if (x !== bubble.x) setBubble({ ...bubble, x })
+    })
+    return () => cancelAnimationFrame(raf)
+  }, [bubble])
+
+  /** Run one bubble action: the text was captured when the selection was
+   *  reported, so the action works even after the page drops the selection. */
+  const act = useCallback(
+    (run: (text: string) => void) => {
+      setBubble((current) => {
+        if (current) {
+          // Tell the page to drop the selection, so the highlight doesn't
+          // stay under the cursor's next click as if nothing happened.
+          post(renderPageClearSelectionMessage())
+          run(current.text)
+        }
+        return null
+      })
+    },
+    [post]
+  )
+
+  const handleCopy = useCallback(() => {
+    act((text) => {
+      void copyTextToClipboard(text).then((ok) =>
+        toast[ok ? "success" : "error"](
+          ok ? t("selectionCopied") : t("selectionCopyFailed")
+        )
+      )
+    })
+  }, [act, t])
+
+  const handleQuote = useCallback(() => {
+    if (!onQuote) return
+    act(onQuote)
+  }, [act, onQuote])
+
+  /** Open the page's annotation overlay (element pick / region box / freehand
+   *  draw, all page-side) with this locale's chrome labels, or close the one
+   *  already open. The page answers once per start — payload or cancel. */
+  const toggleAnnotate = useCallback(() => {
+    if (annot) {
+      post(renderPageAnnotateMessage("stop"))
+      setAnnot(null)
+      return
+    }
+    post(
+      renderPageAnnotateMessage("start", {
+        element: trp("annotateElement"),
+        region: trp("annotateRegion"),
+        draw: trp("annotateDraw"),
+        placeholder: trp("annotatePlaceholder"),
+        send: trp("annotateSend"),
+        cancel: trp("annotateCancel"),
+      })
+    )
+    setAnnot({ doc: srcdocRef.current })
+  }, [annot, post, trp])
+
+  // A report made against an older document is no longer a live selection: a
+  // frame rebuild drops the page's selection with it.
+  const shown = bubble && bubble.doc === srcdoc ? bubble : null
+  const annotating = !!annot && annot.doc === srcdoc
+
+  return (
+    <div ref={containerRef} className={cn("relative", className)}>
+      <iframe
+        ref={frameRef}
+        title=""
+        srcDoc={srcdoc}
+        // Scripts run, forms submit; no same-origin, so nothing of this app is
+        // reachable from the page.
+        sandbox="allow-scripts allow-forms"
+        scrolling="no"
+        className="block w-full border-0 bg-transparent"
+        style={{ height }}
+      />
+      {onAnnotate && (
+        <Button
+          type="button"
+          size="xs"
+          variant={annotating ? "default" : "secondary"}
+          onClick={toggleAnnotate}
+          title={annotating ? trp("annotateStop") : trp("annotate")}
+          aria-label={annotating ? trp("annotateStop") : trp("annotate")}
+          aria-pressed={annotating}
+          data-testid="render-page-annotate-button"
+          className="absolute right-2 top-2 z-30 shadow-md select-none"
+        >
+          <MousePointerClick />
+          {trp("annotate")}
+        </Button>
+      )}
+      {shown && (
+        <div
+          ref={bubbleRef}
+          role="toolbar"
+          aria-label={t("selectionActions")}
+          className="absolute z-30 flex items-center gap-0.5 rounded-full border border-border bg-popover p-0.5 shadow-md select-none"
+          style={{
+            left: shown.x,
+            top: shown.y,
+            transform: `translate(-50%, ${shown.below ? "0" : "-100%"})`,
+          }}
+          // Keep the page's selection (and its focus) intact while a button is
+          // pressed: without this the press clears the selection, the page
+          // reports it gone, and the button unmounts before its `click`
+          // lands. The host's own selection machinery is not in play here —
+          // the text was already captured with the report.
+          onMouseDown={(event) => event.preventDefault()}
+          // Touch/pen presses arm the conversation panel's long-press context
+          // menu; stop them so a slow tap on a button doesn't pop it.
+          onPointerDown={(event) => {
+            if (event.pointerType !== "mouse") event.stopPropagation()
+          }}
+          onContextMenu={(event) => event.stopPropagation()}
+        >
+          <Button
+            type="button"
+            variant="ghost"
+            size="xs"
+            onClick={handleCopy}
+            aria-label={t("selectionCopy")}
+          >
+            <CopyIcon />
+            {t("selectionCopy")}
+          </Button>
+          {onQuote && (
+            <Button
+              type="button"
+              variant="ghost"
+              size="xs"
+              onClick={handleQuote}
+              aria-label={t("selectionQuote")}
+            >
+              <TextQuote />
+              {t("selectionQuote")}
+            </Button>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/src/components/message/render-page-quote.ts b/src/components/message/render-page-quote.ts
new file mode 100644
index 0000000000..6222e79356
--- /dev/null
+++ b/src/components/message/render-page-quote.ts
@@ -0,0 +1,34 @@
+"use client"
+
+import { createContext, useContext } from "react"
+
+/**
+ * The composer's quote handler for `render_page` frames replayed inside the
+ * transcript. The message-list view provides it wherever a composer can
+ * receive a quote; the pinned awaiting-answer card takes the same handler as
+ * a plain prop. A frame with no provider (a sub-agent dialog, a read-only
+ * surface) simply offers no quote action, only copy.
+ */
+export const RenderPageQuoteContext = createContext<
+  ((text: string) => void) | null
+>(null)
+
+/** The quote handler a replayed page should offer, or null for copy-only. */
+export function useRenderPageQuote(): ((text: string) => void) | null {
+  return useContext(RenderPageQuoteContext)
+}
+
+/**
+ * The composer's annotation handler, provided next to the quote handler
+ * wherever a composer exists. Unlike a quote it receives the already
+ * formatted annotation text (page title, viewport, note, marks) verbatim —
+ * the annotation is the message, not material to wrap in one.
+ */
+export const RenderPageAnnotateContext = createContext<
+  ((text: string) => void) | null
+>(null)
+
+/** The annotation handler a replayed page should offer, or null for none. */
+export function useRenderPageAnnotate(): ((text: string) => void) | null {
+  return useContext(RenderPageAnnotateContext)
+}
diff --git a/src/components/message/render-page-result-card.test.tsx b/src/components/message/render-page-result-card.test.tsx
new file mode 100644
index 0000000000..42951eed62
--- /dev/null
+++ b/src/components/message/render-page-result-card.test.tsx
@@ -0,0 +1,185 @@
+import { type ReactElement } from "react"
+import { fireEvent, render, screen } from "@testing-library/react"
+import { NextIntlClientProvider } from "next-intl"
+import { describe, expect, it, vi } from "vitest"
+
+// The frame owns the sandboxed iframe (postMessage, observers); stand it in
+// with a marker so these tests cover the record's own state machine. The
+// stand-in echoes the quote handler's presence so the wiring is assertable.
+vi.mock("@/components/message/render-page-frame", () => ({
+  RenderPageFrame: ({
+    html,
+    onQuote,
+    onAnnotate,
+  }: {
+    html: string
+    onQuote?: (text: string) => void
+    onAnnotate?: (text: string) => void
+  }) => (
+    <div
+      data-testid="render-page-frame"
+      data-quote={onQuote ? "on" : "off"}
+      data-annotate={onAnnotate ? "on" : "off"}
+    >
+      {html}
+    </div>
+  ),
+}))
+
+import { RenderPageResultCard } from "./render-page-result-card"
+import {
+  RenderPageAnnotateContext,
+  RenderPageQuoteContext,
+} from "./render-page-quote"
+import enMessages from "@/i18n/messages/en.json"
+
+function renderWithIntl(ui: ReactElement) {
+  return render(
+    <NextIntlClientProvider locale="en" messages={enMessages}>
+      {ui}
+    </NextIntlClientProvider>
+  )
+}
+
+const INPUT = JSON.stringify({
+  html: "<h1>Pick a theme</h1>",
+  title: "Theme picker",
+  awaitAnswer: true,
+})
+const SHOW_INPUT = JSON.stringify({ html: "<p>report</p>" })
+
+const result = enMessages.Folder.chat.renderPageResult
+
+describe("RenderPageResultCard", () => {
+  it("shows the error text when the call failed", () => {
+    renderWithIntl(
+      <RenderPageResultCard
+        input={INPUT}
+        errorText="page rejected"
+        state="output-available"
+      />
+    )
+    expect(screen.getByText("page rejected")).toBeInTheDocument()
+    expect(screen.queryByTestId("render-page-frame")).toBeNull()
+  })
+
+  it("shows an awaiting placeholder for an in-flight awaited page", () => {
+    renderWithIntl(
+      <RenderPageResultCard input={INPUT} state="input-available" />
+    )
+    // The live interactive page belongs to the pinned card — no second frame
+    // here, just the placeholder naming the wait.
+    expect(screen.getByText(result.awaiting)).toBeInTheDocument()
+    expect(screen.getByText("Theme picker")).toBeInTheDocument()
+    expect(screen.queryByTestId("render-page-frame")).toBeNull()
+  })
+
+  it("renders the frame for an in-flight show-only call", () => {
+    renderWithIntl(
+      <RenderPageResultCard input={SHOW_INPUT} state="input-available" />
+    )
+    expect(screen.getByTestId("render-page-frame")).toHaveTextContent("report")
+    expect(screen.queryByText(result.awaiting)).toBeNull()
+  })
+
+  it("renders nothing for an in-flight call whose input hasn't streamed in", () => {
+    const { container } = renderWithIntl(
+      <RenderPageResultCard input="{}" state="input-streaming" />
+    )
+    expect(container.firstChild).toBeNull()
+  })
+
+  it("draws the page for a settled show-only call", () => {
+    renderWithIntl(
+      <RenderPageResultCard
+        input={SHOW_INPUT}
+        output={JSON.stringify({ shown: true, title: "", note: "…" })}
+        state="output-available"
+      />
+    )
+    expect(screen.getByTestId("render-page-frame")).toHaveTextContent("report")
+  })
+
+  it("collapses an answered page into a capsule, expanding to replay it", () => {
+    renderWithIntl(
+      <RenderPageResultCard
+        input={INPUT}
+        output={JSON.stringify({
+          answered: true,
+          summary: "dark",
+          data: { theme: "dark" },
+        })}
+        state="output-available"
+      />
+    )
+    expect(screen.getByText(result.answeredLabel)).toBeInTheDocument()
+    expect(screen.getByText("dark")).toBeInTheDocument()
+    // Collapsed: no frame in the DOM yet.
+    expect(screen.queryByTestId("render-page-frame")).toBeNull()
+
+    fireEvent.click(screen.getByTestId("render-page-result-card"))
+    expect(screen.getByTestId("render-page-frame")).toHaveTextContent(
+      "Pick a theme"
+    )
+  })
+
+  it("shows the declined note with the page replay", () => {
+    renderWithIntl(
+      <RenderPageResultCard
+        input={INPUT}
+        output={JSON.stringify({ answered: false, note: "…" })}
+        state="output-available"
+      />
+    )
+    expect(screen.getByText(result.declined)).toBeInTheDocument()
+    expect(screen.getByTestId("render-page-frame")).toBeInTheDocument()
+  })
+
+  it("reads the answer from the note text when the CLI dropped the envelope", () => {
+    renderWithIntl(
+      <RenderPageResultCard
+        input={INPUT}
+        output={
+          "The user answered on the page.\nsummary: ship it\ndata: null\ncontinue"
+        }
+        state="output-available"
+      />
+    )
+    expect(screen.getByText(result.answeredLabel)).toBeInTheDocument()
+    expect(screen.getByText("ship it")).toBeInTheDocument()
+  })
+
+  it("offers quote and annotate on a replayed page when the view has a composer", () => {
+    const quote = vi.fn()
+    const annotate = vi.fn()
+    renderWithIntl(
+      <RenderPageAnnotateContext.Provider value={annotate}>
+        <RenderPageQuoteContext.Provider value={quote}>
+          <RenderPageResultCard input={SHOW_INPUT} state="output-available" />
+        </RenderPageQuoteContext.Provider>
+      </RenderPageAnnotateContext.Provider>
+    )
+    expect(screen.getByTestId("render-page-frame")).toHaveAttribute(
+      "data-quote",
+      "on"
+    )
+    expect(screen.getByTestId("render-page-frame")).toHaveAttribute(
+      "data-annotate",
+      "on"
+    )
+  })
+
+  it("stays copy-only outside a quoting view", () => {
+    renderWithIntl(
+      <RenderPageResultCard input={SHOW_INPUT} state="output-available" />
+    )
+    expect(screen.getByTestId("render-page-frame")).toHaveAttribute(
+      "data-quote",
+      "off"
+    )
+    expect(screen.getByTestId("render-page-frame")).toHaveAttribute(
+      "data-annotate",
+      "off"
+    )
+  })
+})
diff --git a/src/components/message/render-page-result-card.tsx b/src/components/message/render-page-result-card.tsx
new file mode 100644
index 0000000000..b791cd84e3
--- /dev/null
+++ b/src/components/message/render-page-result-card.tsx
@@ -0,0 +1,167 @@
+"use client"
+
+/**
+ * Read-only inline view of the codeg-mcp `render_page` tool in the message
+ * stream (historical transcripts + the in-flight tool marker).
+ *
+ * The live interactive page (awaiting an answer) is owned by the PINNED
+ * `RenderPageCard`, driven by the connection's `pendingRenderPage` — this
+ * record never mounts a second frame while that wait is on, so an in-flight
+ * awaited call shows only a quiet placeholder until it settles. What a
+ * settled call records depends on how it ended: a show-only page draws the
+ * page itself (replayed read-only in its sandbox); an answered one collapses
+ * to a capsule naming the user's summary, expanding to the page; a declined
+ * one says so in a line. Reconstructed from the tool's raw input JSON + the
+ * persisted result envelope (see `@/lib/render-page`).
+ */
+
+import { useMemo, useState, type ReactNode } from "react"
+import { useTranslations } from "next-intl"
+import { AppWindow, ChevronDown, ChevronUp, Loader2 } from "lucide-react"
+
+import { RenderPageFrame } from "@/components/message/render-page-frame"
+import {
+  useRenderPageAnnotate,
+  useRenderPageQuote,
+} from "@/components/message/render-page-quote"
+import { cn } from "@/lib/utils"
+import { parseRenderPageInput, parseRenderPageOutcome } from "@/lib/render-page"
+import type { ToolCallState } from "@/lib/adapters/ai-elements-adapter"
+
+interface Props {
+  input?: string | null
+  output?: string | null
+  errorText?: string | null
+  state?: ToolCallState
+}
+
+export function RenderPageResultCard({
+  input,
+  output,
+  errorText,
+  state,
+}: Props) {
+  const t = useTranslations("Folder.chat.renderPageResult")
+  const [expanded, setExpanded] = useState(false)
+  // A page replayed in the transcript can still be marked up: where the view
+  // has a composer (the provider is there), a text selection offers quote as
+  // well as copy and the page grows an annotate entry; without one it stays
+  // copy-only.
+  const onQuote = useRenderPageQuote()
+  const onAnnotate = useRenderPageAnnotate()
+
+  const page = useMemo(() => parseRenderPageInput(input), [input])
+  const outcome = useMemo(() => parseRenderPageOutcome(output), [output])
+
+  const isError = !!errorText?.trim()
+  const isRunning = state === "input-available" || state === "input-streaming"
+  const isInFlight = !isError && !outcome && isRunning
+
+  const shell = (subtitle: string | null, body?: ReactNode) => (
+    <div
+      data-testid="render-page-result-card"
+      className={cn(
+        "mb-2 overflow-hidden rounded-xl border bg-card ws-msg-card",
+        isError ? "border-destructive/30" : "border-primary/30"
+      )}
+    >
+      <div className="flex flex-col gap-2 p-3">
+        <div className="flex items-start gap-2.5">
+          <span className="flex size-8 shrink-0 items-center justify-center rounded-lg bg-muted text-primary">
+            <AppWindow className="size-4" />
+          </span>
+          <div className="min-w-0 flex-1">
+            <p className="truncate text-sm font-medium">
+              {page?.title || t("title")}
+            </p>
+            {subtitle && (
+              <p className="text-xs text-muted-foreground">{subtitle}</p>
+            )}
+          </div>
+          {isInFlight && page?.awaitAnswer && (
+            <Loader2 className="size-4 shrink-0 animate-spin text-muted-foreground" />
+          )}
+        </div>
+        {body}
+      </div>
+    </div>
+  )
+
+  // The settled page, replayed in its sandbox with the submit bridge inert.
+  // Built lazily per use — the header-only states must not touch `page.html`
+  // before the null checks below have run.
+  const frame = page?.html ? (
+    <div className="overflow-hidden rounded-lg border border-border/60 bg-background">
+      <RenderPageFrame
+        html={page.html}
+        answerState={{ waiting: false, answer: null }}
+        onQuote={onQuote ?? undefined}
+        onAnnotate={onAnnotate ?? undefined}
+        pageTitle={page.title}
+      />
+    </div>
+  ) : null
+
+  if (isError) {
+    return shell(
+      null,
+      <p className="whitespace-pre-wrap text-xs text-destructive">
+        {errorText?.trim()}
+      </p>
+    )
+  }
+
+  if (isInFlight) {
+    // An awaited page is on screen (interactive) through the pinned card for
+    // as long as it waits — the placeholder here only names it. A show-only
+    // call, whose answer is the page itself, can draw it already.
+    if (!page) return null
+    if (page.awaitAnswer) return shell(t("awaiting"))
+    return shell(null, frame)
+  }
+
+  if (!page) return null
+
+  if (!outcome || outcome.kind === "declined") {
+    return shell(outcome ? t("declined") : null, frame)
+  }
+
+  if (outcome.kind === "shown") return shell(null, frame)
+
+  // Answered: collapse to a capsule naming the summary; expanding replays the
+  // page so the record can be re-read without leaving the transcript.
+  const capsule = (
+    <button
+      type="button"
+      onClick={() => setExpanded((v) => !v)}
+      aria-expanded={expanded}
+      data-testid="render-page-result-card"
+      className={cn(
+        "flex w-fit max-w-full items-center gap-2 rounded-full border border-primary/30 bg-card ws-msg-card px-3 py-1.5 text-left transition-colors hover:bg-muted/40",
+        !expanded && "mb-2"
+      )}
+    >
+      <AppWindow className="size-4 shrink-0 text-primary" />
+      <span className="min-w-0 flex-1 truncate text-xs">
+        <span className="mr-1 text-muted-foreground">{t("answeredLabel")}</span>
+        <span className="text-foreground/90">
+          {outcome.summary || t("noSummary")}
+        </span>
+      </span>
+      {expanded ? (
+        <ChevronUp className="size-3.5 shrink-0 text-muted-foreground" />
+      ) : (
+        <ChevronDown className="size-3.5 shrink-0 text-muted-foreground" />
+      )}
+    </button>
+  )
+
+  if (!expanded) return capsule
+
+  return (
+    <div className="mb-2 space-y-1.5">
+      {capsule}
+      {frame}
+    </div>
+  )
+}
diff --git a/src/components/message/sub-agent-session-dialog.test.tsx b/src/components/message/sub-agent-session-dialog.test.tsx
index d5ba503c27..35581f5516 100644
--- a/src/components/message/sub-agent-session-dialog.test.tsx
+++ b/src/components/message/sub-agent-session-dialog.test.tsx
@@ -216,6 +216,7 @@ function makeConnState(overrides: Partial<ConnectionState>): ConnectionState {
     liveMessage: null,
     pendingPermission: null,
     pendingQuestion: null,
+    pendingRenderPage: null,
     pendingAskQuestion: null,
     pendingPlanApproval: null,
     claudeApiRetry: null,
diff --git a/src/components/message/user-message-segments.test.ts b/src/components/message/user-message-segments.test.ts
index 6bd6ee7bbd..c07ae9ea83 100644
--- a/src/components/message/user-message-segments.test.ts
+++ b/src/components/message/user-message-segments.test.ts
@@ -352,3 +352,34 @@ describe("parseUserMessageSegments", () => {
     })
   })
 })
+
+describe("parseUserMessageSegments — annotation tags", () => {
+  it("cuts an annotation tag out of the prose as its own segment", () => {
+    expect(
+      parseUserMessageSegments(
+        'fix it <annotation ref="codeg://embedded/x" label="标注1 - a [b](c)">Comment: 太远了\n- Text: [x](y)\n</annotation>thanks'
+      )
+    ).toEqual([
+      { kind: "text", text: "fix it " },
+      {
+        kind: "annotation",
+        ref: "codeg://embedded/x",
+        label: "标注1 - a [b](c)",
+        body: "Comment: 太远了\n- Text: [x](y)\n",
+      },
+      { kind: "text", text: "thanks" },
+    ])
+  })
+
+  it("keeps an escaped closer and quoted attribute inside", () => {
+    const [segment] = parseUserMessageSegments(
+      '<annotation ref="r" label="say &quot;hi&quot;">before <\/annotation after</annotation>'
+    )
+    expect(segment).toEqual({
+      kind: "annotation",
+      ref: "r",
+      label: 'say "hi"',
+      body: "before </annotation after",
+    })
+  })
+})
diff --git a/src/components/message/user-message-segments.ts b/src/components/message/user-message-segments.ts
index c924e22945..7a1b7bd236 100644
--- a/src/components/message/user-message-segments.ts
+++ b/src/components/message/user-message-segments.ts
@@ -11,12 +11,41 @@ import {
 } from "@/lib/reference-link"
 
 /**
- * One render unit of a user message: a run of literal prose, or a resolved
- * reference to show as an inline badge.
+ * One render unit of a user message: a run of literal prose, a resolved
+ * reference to show as an inline badge, or a page annotation's report — the
+ * prompt written when the person marked up a page, shown collapsed under the
+ * badge that stands for it.
  */
 export type UserMessageSegment =
   | { kind: "text"; text: string }
   | { kind: "reference"; attrs: ReferenceAttrs }
+  | { kind: "annotation"; ref: string; label: string; body: string }
+
+/** The tag `liftEmbeddedContext` rewrites an annotation's context block
+ *  into: one attribute pair, then the report verbatim (with `</` in it
+ *  escaped so it cannot close the tag early). */
+const ANNOTATION_RE =
+  /<annotation ref="([^"]*)" label="([^"]*)">([\s\S]*?)<\/annotation>/g
+
+function unescapeAttr(value: string): string {
+  return value
+    .split("&quot;")
+    .join('"')
+    .split("&lt;")
+    .join("<")
+    .split("&amp;")
+    .join("&")
+}
+
+/** The refs of the annotation tags one text carries (fragment off), for a
+ *  bubble-wide lookup: a badge in another part of the same message opens the
+ *  report this text holds. */
+export function annotationRefsIn(text: string): string[] {
+  ANNOTATION_RE.lastIndex = 0
+  return [...text.matchAll(ANNOTATION_RE)].map(
+    (match) => (match[1] ?? "").split("#")[0]
+  )
+}
 
 /**
  * Only these schemes become badges. A `[label](https://…)` a user typed is NOT a
@@ -108,6 +137,34 @@ export function parseUserMessageSegments(
 ): UserMessageSegment[] {
   const known = options?.knownInvocations
   const out: UserMessageSegment[] = []
+  // The annotation pass runs first: its body is the prompt's report, and the
+  // `[label](dest)` shapes inside it (an element's HTML, an attribute list)
+  // are the page's, not the sender's — they must not become badges.
+  ANNOTATION_RE.lastIndex = 0
+  let cursor = 0
+  for (const match of text.matchAll(ANNOTATION_RE)) {
+    const start = match.index ?? 0
+    if (start > cursor) {
+      pushLinkSegments(text.slice(cursor, start), out, known)
+    }
+    out.push({
+      kind: "annotation",
+      ref: match[1],
+      label: unescapeAttr(match[2]),
+      body: match[3].split("<\\/annotation").join("</annotation"),
+    })
+    cursor = start + match[0].length
+  }
+  if (cursor < text.length) pushLinkSegments(text.slice(cursor), out, known)
+  return out
+}
+
+/** The two passes over ordinary prose (link tokens, then invocation tokens). */
+function pushLinkSegments(
+  text: string,
+  out: UserMessageSegment[],
+  known: KnownInvocations | undefined
+): void {
   for (const token of tokenizeReferenceLinks(text)) {
     if (token.type === "link") {
       const destination = unwrapReferenceDestination(token.destination)
@@ -127,5 +184,4 @@ export function parseUserMessageSegments(
     }
     pushProseSegments(token.value, out, known)
   }
-  return out
 }
diff --git a/src/components/message/user-resource-links.tsx b/src/components/message/user-resource-links.tsx
index a4b4cf2fa8..7174226e67 100644
--- a/src/components/message/user-resource-links.tsx
+++ b/src/components/message/user-resource-links.tsx
@@ -11,11 +11,14 @@ interface UserResourceLinksProps {
 /**
  * The attachment summary row shown beneath a user message: one grey chip per
  * attached file — and for what the built-in browser handed over, one per page
- * it came from, the badge in the prose saying what was taken. This is the
- * original (pre-rich-composer) attachment style — a plain, non-interactive list
- * that complements the inline file badges now kept in the message prose
- * (markdown-link → ReferenceBadge). Images are handled separately as
- * thumbnails.
+ * it came from; an embedded attachment from the browser shows ONLY here (its
+ * prose badge is moved out, not copied, so the same thing is not listed
+ * twice). A page ANNOTATION is the opposite case: its badge stays in the
+ * prose and opens its report in place, so it never reaches this row. This is
+ * the original (pre-rich-composer) attachment style — a plain,
+ * non-interactive list that complements the inline file badges now kept in
+ * the message prose (markdown-link → ReferenceBadge). Images are handled
+ * separately as thumbnails.
  */
 export function UserResourceLinks({
   resources,
diff --git a/src/components/settings/agent-tools-settings.test.tsx b/src/components/settings/agent-tools-settings.test.tsx
index 00ff7fda17..47a8e08356 100644
--- a/src/components/settings/agent-tools-settings.test.tsx
+++ b/src/components/settings/agent-tools-settings.test.tsx
@@ -7,6 +7,8 @@ vi.mock("@/lib/api", () => ({
   setFeedbackSettings: vi.fn(),
   getQuestionSettings: vi.fn(),
   setQuestionSettings: vi.fn(),
+  getRenderPageSettings: vi.fn(),
+  setRenderPageSettings: vi.fn(),
   getSessionInfoSettings: vi.fn(),
   setSessionInfoSettings: vi.fn(),
   getBrowserToolsSettings: vi.fn(),
@@ -53,11 +55,13 @@ import {
   getChatAuthoringSettings,
   getFeedbackSettings,
   getQuestionSettings,
+  getRenderPageSettings,
   getSessionInfoSettings,
   setBrowserToolsSettings,
   setChatAuthoringSettings,
   setFeedbackSettings,
   setQuestionSettings,
+  setRenderPageSettings,
   setSessionInfoSettings,
 } from "@/lib/api"
 import { primeFeedbackEnabled } from "@/hooks/use-feedback-enabled"
@@ -70,6 +74,8 @@ const mockGetFeedback = vi.mocked(getFeedbackSettings)
 const mockSetFeedback = vi.mocked(setFeedbackSettings)
 const mockGetQuestion = vi.mocked(getQuestionSettings)
 const mockSetQuestion = vi.mocked(setQuestionSettings)
+const mockGetRender = vi.mocked(getRenderPageSettings)
+const mockSetRender = vi.mocked(setRenderPageSettings)
 const mockGetSessionInfo = vi.mocked(getSessionInfoSettings)
 const mockSetSessionInfo = vi.mocked(setSessionInfoSettings)
 const mockGetBrowser = vi.mocked(getBrowserToolsSettings)
@@ -83,6 +89,7 @@ const mockSetComputer = vi.mocked(setComputerToolsEnabled)
 const LABELS = {
   feedback: "Live Feedback",
   question: "Ask user question",
+  render: "Render page",
   sessionInfo: "Get session info",
   browserTools: "Read and drive the built-in browser",
   browserEval: "Run code in the built-in browser",
@@ -118,6 +125,7 @@ function primeBackend(
   overrides: {
     feedback?: boolean
     question?: boolean
+    render?: boolean
     sessionInfo?: boolean
     browserTools?: boolean
     browserEval?: boolean
@@ -129,6 +137,7 @@ function primeBackend(
   const {
     feedback = false,
     question = true,
+    render = true,
     sessionInfo = true,
     browserTools = false,
     browserEval = false,
@@ -138,6 +147,7 @@ function primeBackend(
   } = overrides
   mockGetFeedback.mockResolvedValue({ enabled: feedback })
   mockGetQuestion.mockResolvedValue({ enabled: question })
+  mockGetRender.mockResolvedValue({ enabled: render })
   mockGetSessionInfo.mockResolvedValue({ enabled: sessionInfo })
   mockGetBrowser.mockResolvedValue({
     enabled: browserTools,
@@ -149,6 +159,7 @@ function primeBackend(
   })
   mockSetFeedback.mockImplementation(async (next) => next)
   mockSetQuestion.mockImplementation(async (next) => next)
+  mockSetRender.mockImplementation(async (next) => next)
   mockSetSessionInfo.mockImplementation(async (next) => next)
   mockSetBrowser.mockImplementation(async (next) => next)
   mockSetChat.mockImplementation(async (next) => next)
@@ -199,6 +210,10 @@ describe("AgentToolsSettingsSection", () => {
       "data-state",
       "checked"
     )
+    expect(screen.getByLabelText(LABELS.render)).toHaveAttribute(
+      "data-state",
+      "checked"
+    )
     expect(screen.getByLabelText(LABELS.sessionInfo)).toHaveAttribute(
       "data-state",
       "unchecked"
@@ -228,6 +243,7 @@ describe("AgentToolsSettingsSection", () => {
     // The other three endpoints hold values this panel never touched; writing
     // them back would republish state the user didn't ask to change.
     expect(mockSetFeedback).not.toHaveBeenCalled()
+    expect(mockSetRender).not.toHaveBeenCalled()
     expect(mockSetSessionInfo).not.toHaveBeenCalled()
     expect(mockSetChat).not.toHaveBeenCalled()
   })
diff --git a/src/components/settings/agent-tools-settings.tsx b/src/components/settings/agent-tools-settings.tsx
index 8efc4574db..e6808ccc36 100644
--- a/src/components/settings/agent-tools-settings.tsx
+++ b/src/components/settings/agent-tools-settings.tsx
@@ -9,7 +9,7 @@
  * from a conversation.
  *
  * They used to be four sections, each with its own heading, description, card
- * and Save bar: four times the chrome for five switches, which is what made
+ * and Save bar: four times the chrome for six switches, which is what made
  * `/settings/general` read as far longer than it configures. It now sits on
  * `/settings/collaboration` under the delegation panel it shares a companion
  * process with.
@@ -19,10 +19,10 @@
  * and had drifted into calling three of them by different names.
  *
  * Persistence stays split the way the backend has it — `feedback.enabled`,
- * `question.enabled`, `session_info.enabled`, `browser_tools.*`,
- * `computer_tools.enabled` and `chat_authoring.*` remain six endpoints. Save
- * writes only the groups whose value actually moved, so a
- * failing endpoint can't roll back its neighbours, and a group whose *load*
+ * `question.enabled`, `render_page.enabled`, `session_info.enabled`,
+ * `browser_tools.*`, `computer_tools.enabled` and `chat_authoring.*` remain
+ * seven endpoints. Save writes only the groups whose value actually moved, so
+ * a failing endpoint can't roll back its neighbours, and a group whose *load*
  * failed (its switch is showing a default, not what is stored) is left alone
  * unless the user touched it.
  */
@@ -61,11 +61,13 @@ import {
   getChatAuthoringSettings,
   getFeedbackSettings,
   getQuestionSettings,
+  getRenderPageSettings,
   getSessionInfoSettings,
   setBrowserToolsSettings,
   setChatAuthoringSettings,
   setFeedbackSettings,
   setQuestionSettings,
+  setRenderPageSettings,
   setSessionInfoSettings,
   type BrowserToolsSettings,
   type ChatAuthoringSettings,
@@ -73,10 +75,11 @@ import {
 import { toErrorMessage } from "@/lib/app-error"
 import { primeFeedbackEnabled } from "@/hooks/use-feedback-enabled"
 
-/** One field per switch, flattened across the five backend groups. */
+/** One field per switch, flattened across the six backend groups. */
 interface AgentToolValues {
   feedback: boolean
   question: boolean
+  render: boolean
   sessionInfo: boolean
   browserTools: boolean
   browserEval: boolean
@@ -94,6 +97,7 @@ interface AgentToolValues {
 const DEFAULTS: AgentToolValues = {
   feedback: false,
   question: true,
+  render: true,
   sessionInfo: true,
   browserTools: false,
   browserEval: false,
@@ -114,6 +118,7 @@ const DEFAULTS: AgentToolValues = {
 const TOOL_ROWS = [
   { key: "feedback", slug: "feedback", id: "agent-tools-feedback" },
   { key: "question", slug: "ask", id: "agent-tools-question" },
+  { key: "render", slug: "render", id: "agent-tools-render" },
   { key: "sessionInfo", slug: "sessions", id: "agent-tools-session-info" },
   { key: "browserTools", slug: "browser", id: "agent-tools-browser" },
   { key: "browserEval", slug: "browser_eval", id: "agent-tools-browser-eval" },
@@ -161,15 +166,23 @@ export function AgentToolsSettingsSection() {
     let cancelled = false
     void (async () => {
       const gen = { ...remoteGenRef.current }
-      const [feedback, question, sessionInfo, browserTools, computer, chat] =
-        await Promise.allSettled([
-          getFeedbackSettings(),
-          getQuestionSettings(),
-          getSessionInfoSettings(),
-          getBrowserToolsSettings(),
-          getComputerToolsSettings(),
-          getChatAuthoringSettings(),
-        ])
+      const [
+        feedback,
+        question,
+        render,
+        sessionInfo,
+        browserTools,
+        computer,
+        chat,
+      ] = await Promise.allSettled([
+        getFeedbackSettings(),
+        getQuestionSettings(),
+        getRenderPageSettings(),
+        getSessionInfoSettings(),
+        getBrowserToolsSettings(),
+        getComputerToolsSettings(),
+        getChatAuthoringSettings(),
+      ])
       if (cancelled) return
 
       // One endpoint being down shouldn't blank the other four switches, so
@@ -182,6 +195,8 @@ export function AgentToolsSettingsSection() {
       if (question.status === "fulfilled")
         next.question = question.value.enabled
       else failures.push(toErrorMessage(question.reason))
+      if (render.status === "fulfilled") next.render = render.value.enabled
+      else failures.push(toErrorMessage(render.reason))
       if (sessionInfo.status === "fulfilled")
         next.sessionInfo = sessionInfo.value.enabled
       else failures.push(toErrorMessage(sessionInfo.reason))
@@ -351,6 +366,7 @@ export function AgentToolsSettingsSection() {
   const dirty =
     values.feedback !== baseline.feedback ||
     values.question !== baseline.question ||
+    values.render !== baseline.render ||
     values.sessionInfo !== baseline.sessionInfo ||
     values.browserTools !== baseline.browserTools ||
     values.browserEval !== baseline.browserEval ||
@@ -380,6 +396,13 @@ export function AgentToolsSettingsSection() {
           }))
         )
       }
+      if (values.render !== baseline.render) {
+        writes.push(
+          setRenderPageSettings({ enabled: values.render }).then((applied) => ({
+            render: applied.enabled,
+          }))
+        )
+      }
       if (values.sessionInfo !== baseline.sessionInfo) {
         writes.push(
           setSessionInfoSettings({ enabled: values.sessionInfo }).then(
diff --git a/src/components/settings/collaboration-settings.test.tsx b/src/components/settings/collaboration-settings.test.tsx
index 48ba58b953..c21ca01f95 100644
--- a/src/components/settings/collaboration-settings.test.tsx
+++ b/src/components/settings/collaboration-settings.test.tsx
@@ -15,6 +15,8 @@ vi.mock("@/lib/api", () => ({
   setFeedbackSettings: vi.fn(async (v: unknown) => v),
   getQuestionSettings: vi.fn(async () => ({ enabled: true })),
   setQuestionSettings: vi.fn(async (v: unknown) => v),
+  getRenderPageSettings: vi.fn(async () => ({ enabled: true })),
+  setRenderPageSettings: vi.fn(async (v: unknown) => v),
   getSessionInfoSettings: vi.fn(async () => ({ enabled: true })),
   setSessionInfoSettings: vi.fn(async (v: unknown) => v),
   getBrowserToolsSettings: vi.fn(async () => ({ enabled: false })),
diff --git a/src/contexts/acp-connections-context.test.tsx b/src/contexts/acp-connections-context.test.tsx
index da0db36128..d3b56f1385 100644
--- a/src/contexts/acp-connections-context.test.tsx
+++ b/src/contexts/acp-connections-context.test.tsx
@@ -220,6 +220,7 @@ beforeEach(() => {
     liveMessage: null,
     pendingPermission: null,
     pendingAskQuestion: null,
+    pendingRenderPage: null,
     pendingUserMessage: null,
     promptCapabilities: null,
     selectorsReady: false,
@@ -303,6 +304,7 @@ function snapshotBase() {
     liveMessage: null,
     pendingPermission: null,
     pendingAskQuestion: null,
+    pendingRenderPage: null,
     pendingUserMessage: null,
     promptCapabilities: null,
     selectorsReady: false,
diff --git a/src/contexts/acp-connections-context.tsx b/src/contexts/acp-connections-context.tsx
index 54c30e19e8..ec95f004fd 100644
--- a/src/contexts/acp-connections-context.tsx
+++ b/src/contexts/acp-connections-context.tsx
@@ -35,6 +35,7 @@ import {
   acpRespondPermission,
   acpAnswerQuestion,
   acpAnswerPlanApproval,
+  acpAnswerRenderPage,
   acpDisconnect,
   acpTouchConnection,
   acpGetSessionSnapshot,
@@ -70,6 +71,8 @@ import type {
   QuestionAnswer,
   PendingPlanApprovalState,
   PlanApprovalAnswer,
+  PendingRenderPageState,
+  RenderPageAnswer,
   SessionConfigKindInfo,
   SessionConfigOptionInfo,
   SessionFailureRecord,
@@ -376,6 +379,12 @@ export interface ConnectionState {
    *  blocked on). Set from a `plan_approval_request` event or a snapshot's
    *  `pending_plan_approval`; cleared on `plan_approval_resolved` or turn end. */
   pendingPlanApproval: PendingPlanApprovalState | null
+  /** Awaiting-answer `render_page` (the codeg-mcp blocking page). Set from a
+   *  `render_page_request` event or a snapshot's `pending_render_page`; cleared
+   *  on `render_page_resolved` or turn end. The pinned card renders this page
+   *  and the in-place tool card matches its `html` against it to know which
+   *  one is live. */
+  pendingRenderPage: PendingRenderPageState | null
   claudeApiRetry: ClaudeApiRetryState | null
   /** AIR typed session failure table (see `lib/session-failures.ts` for the
    *  merge/settle contract). Retained resolved — entries double as per-id
@@ -752,6 +761,18 @@ type Action =
        *  late `plan_approval_resolved` from wiping a freshly-raised approval). */
       approvalId?: string
     }
+  | {
+      type: "SET_RENDER_PAGE"
+      contextKey: string
+      pendingRenderPage: PendingRenderPageState
+    }
+  | {
+      type: "CLEAR_RENDER_PAGE"
+      contextKey: string
+      /** When present, only clear if the current page_id matches (guards a
+       *  late `render_page_resolved` from wiping a freshly-raised page). */
+      pageId?: string
+    }
   | { type: "SESSION_STARTED"; contextKey: string; sessionId: string }
   | {
       type: "SESSION_MODES"
@@ -1938,6 +1959,7 @@ function connectionsReducer(
         pendingQuestion: null,
         pendingAskQuestion: null,
         pendingPlanApproval: null,
+        pendingRenderPage: null,
         claudeApiRetry: null,
         sessionFailures: [],
         toolApprovals: EMPTY_TOOL_APPROVALS,
@@ -2004,6 +2026,7 @@ function connectionsReducer(
         pendingQuestion: null,
         pendingAskQuestion: null,
         pendingPlanApproval: null,
+        pendingRenderPage: null,
         claudeApiRetry: null,
         sessionFailures: [],
         toolApprovals: EMPTY_TOOL_APPROVALS,
@@ -2203,6 +2226,7 @@ function connectionsReducer(
         pendingPermission: hydratedPendingPermission,
         pendingAskQuestion: action.patch.pendingAskQuestion,
         pendingPlanApproval: action.patch.pendingPlanApproval,
+        pendingRenderPage: action.patch.pendingRenderPage,
         pendingUserMessage: action.patch.pendingUserMessage,
         promptCapabilities: mergedPromptCapabilities,
         selectorsReady: mergedSelectorsReady,
@@ -2315,6 +2339,8 @@ function connectionsReducer(
         // Likewise a blocked exit_plan_mode approval — cleared via
         // `plan_approval_resolved` normally; this is the turn-end safety net.
         updated.pendingPlanApproval = null
+        // Same safety net for an awaiting-answer `render_page`.
+        updated.pendingRenderPage = null
       }
       // Keep a stopped turn for the reports that close its cards (see
       // `ConnectionState.cancelledTurn`). Keyed on the message, so ending the
@@ -2851,6 +2877,34 @@ function connectionsReducer(
       return next
     }
 
+    case "SET_RENDER_PAGE": {
+      const conn = state.get(action.contextKey)
+      if (!conn) return state
+      const next = new Map(state)
+      next.set(action.contextKey, {
+        ...conn,
+        pendingRenderPage: action.pendingRenderPage,
+      })
+      return next
+    }
+
+    case "CLEAR_RENDER_PAGE": {
+      const conn = state.get(action.contextKey)
+      if (!conn) return state
+      if (
+        action.pageId !== undefined &&
+        conn.pendingRenderPage?.page_id !== action.pageId
+      ) {
+        return state
+      }
+      const next = new Map(state)
+      next.set(action.contextKey, {
+        ...conn,
+        pendingRenderPage: null,
+      })
+      return next
+    }
+
     case "SESSION_STARTED": {
       const conn = state.get(action.contextKey)
       if (!conn) return state
@@ -3496,6 +3550,13 @@ export interface AcpActionsValue {
     approvalId: string,
     answer: PlanApprovalAnswer
   ): Promise<void>
+  /** Submit the answer the user sent from an awaiting `render_page` (or a
+   *  dismissal). Resolves the parked tool call and clears the card. */
+  answerRenderPage(
+    contextKey: string,
+    pageId: string,
+    answer: RenderPageAnswer
+  ): Promise<void>
   /** Pause or clear the session's active Codex goal (codex-acp #293). */
   goalControl(contextKey: string, action: "pause" | "clear"): Promise<void>
   setActiveKey(key: string | null): void
@@ -5365,6 +5426,34 @@ export function AcpConnectionsProvider({ children }: { children: ReactNode }) {
             approvalId: e.approval_id,
           })
           break
+        case "render_page_request":
+          // Agent called `render_page` with `awaitAnswer`: the page is live and
+          // the agent is blocked on an answer submitted on it. Flush queued
+          // streaming first, then raise the pinned page card above the input.
+          // (No OS notification arm: like `plan_approval_request` — adding one
+          // means a new NotifyEventId through prefs, sounds and ten locales,
+          // and the page card itself is the prompt.)
+          flushStreamingQueue(contextKey)
+          dispatch({
+            type: "SET_RENDER_PAGE",
+            contextKey,
+            pendingRenderPage: {
+              page_id: e.page_id,
+              title: e.title,
+              html: e.html,
+              created_at: new Date().toISOString(),
+            },
+          })
+          break
+        case "render_page_resolved":
+          // The page was answered (this or another window) or canceled. Matched
+          // by page_id so a stale event can't wipe a fresh one.
+          dispatch({
+            type: "CLEAR_RENDER_PAGE",
+            contextKey,
+            pageId: e.page_id,
+          })
+          break
         case "background_activity": {
           // Out-of-turn transcript activity from the backend watcher: async
           // task completions, the agent's continued work after them, cron//
@@ -8188,6 +8277,31 @@ export function AcpConnectionsProvider({ children }: { children: ReactNode }) {
     [dispatch]
   )
 
+  const answerRenderPage = useCallback(
+    async (contextKey: string, pageId: string, answer: RenderPageAnswer) => {
+      const conn = storeRef.current.connections.get(contextKey)
+      if (!conn) {
+        // Throw, don't silently return: the page card awaits this and holds a
+        // disabled in-flight state until it resolves. A silent resolve would
+        // leave the card stuck; the throw routes to its retryable error.
+        throw new Error(
+          `[AcpConnections] answerRenderPage: no connection for ${contextKey}`
+        )
+      }
+      try {
+        lastActivityRef.current.set(contextKey, Date.now())
+        await acpAnswerRenderPage(conn.connectionId, pageId, answer)
+        // Optimistically clear; the backend also broadcasts
+        // render_page_resolved (idempotent on the matched id).
+        dispatch({ type: "CLEAR_RENDER_PAGE", contextKey, pageId })
+      } catch (e) {
+        console.error("[AcpConnections] answerRenderPage failed:", e)
+        throw e
+      }
+    },
+    [dispatch]
+  )
+
   const attachDelegationChild = useCallback(
     (args: {
       connectionId: string
@@ -8343,6 +8457,7 @@ export function AcpConnectionsProvider({ children }: { children: ReactNode }) {
       respondPermission,
       answerQuestion,
       answerPlanApproval,
+      answerRenderPage,
       setActiveKey,
       touchActivity,
       registerOpenTabKeys,
@@ -8371,6 +8486,7 @@ export function AcpConnectionsProvider({ children }: { children: ReactNode }) {
       respondPermission,
       answerQuestion,
       answerPlanApproval,
+      answerRenderPage,
       setActiveKey,
       touchActivity,
       registerOpenTabKeys,
diff --git a/src/hooks/use-connection.ts b/src/hooks/use-connection.ts
index bc96f71173..3b13721b6e 100644
--- a/src/hooks/use-connection.ts
+++ b/src/hooks/use-connection.ts
@@ -19,6 +19,7 @@ import type {
   ConnectionStatus,
   PendingPlanApprovalState,
   PendingQuestionState,
+  PendingRenderPageState,
   PromptCapabilitiesInfo,
   QuestionAnswer,
   RemoteControlInfo,
@@ -96,6 +97,10 @@ export interface UseConnectionReturn {
   pendingQuestion: PendingQuestion | null
   pendingAskQuestion: PendingQuestionState | null
   pendingPlanApproval: PendingPlanApprovalState | null
+  /** Awaiting-answer `render_page` (the codeg-mcp blocking page). Set from a
+   *  `render_page_request` event or a snapshot; cleared on resolve or turn
+   *  end. Drives the pinned page card above the composer. */
+  pendingRenderPage: PendingRenderPageState | null
   claudeApiRetry: ClaudeApiRetryState | null
   /** AIR typed session failure table (active + resolved; see
    *  `lib/session-failures.ts`). `[]` when the connection has none. */
@@ -301,6 +306,7 @@ export function useConnection(contextKey: string): UseConnectionReturn {
   const pendingQuestion = connection?.pendingQuestion ?? null
   const pendingAskQuestion = connection?.pendingAskQuestion ?? null
   const pendingPlanApproval = connection?.pendingPlanApproval ?? null
+  const pendingRenderPage = connection?.pendingRenderPage ?? null
   const claudeApiRetry = connection?.claudeApiRetry ?? null
   const sessionFailures = connection?.sessionFailures ?? EMPTY_SESSION_FAILURES
   const toolApprovals = connection?.toolApprovals ?? EMPTY_TOOL_APPROVALS
@@ -412,6 +418,7 @@ export function useConnection(contextKey: string): UseConnectionReturn {
       pendingQuestion,
       pendingAskQuestion,
       pendingPlanApproval,
+      pendingRenderPage,
       claudeApiRetry,
       sessionFailures,
       toolApprovals,
@@ -458,6 +465,7 @@ export function useConnection(contextKey: string): UseConnectionReturn {
       pendingQuestion,
       pendingAskQuestion,
       pendingPlanApproval,
+      pendingRenderPage,
       claudeApiRetry,
       sessionFailures,
       toolApprovals,
diff --git a/src/i18n/messages/ar.json b/src/i18n/messages/ar.json
index 0a10402291..853e981715 100644
--- a/src/i18n/messages/ar.json
+++ b/src/i18n/messages/ar.json
@@ -4067,6 +4067,7 @@
           "background": "مهمة في الخلفية",
           "plan": "خطة",
           "question": "سؤال",
+          "renderPage": "صفحة",
           "image": "صورة",
           "goal": "هدف",
           "other": "خطوة"
@@ -4175,6 +4176,28 @@
         "declined": "لقد تجاهلت هذا — استخدم الوكيل حكمه الخاص.",
         "noSelection": "لا يوجد اختيار"
       },
+      "renderPage": {
+        "title": "صفحة",
+        "waitingHint": "أجب في الصفحة.",
+        "annotate": "التعليق على الصفحة",
+        "annotateStop": "إيقاف التعليق",
+        "annotateElement": "عنصر",
+        "annotateRegion": "منطقة",
+        "annotateDraw": "رسم",
+        "annotatePlaceholder": "ملاحظة (اختياري)",
+        "annotateSend": "إرسال",
+        "annotateCancel": "إلغاء",
+        "annotateChip": "تعليق الصفحة {n}",
+        "dismiss": "إغلاق دون إجابة",
+        "submitError": "تعذّر إرسال إجابتك. حاول مرة أخرى."
+      },
+      "renderPageResult": {
+        "title": "صفحة",
+        "awaiting": "في انتظار إجابتك…",
+        "declined": "لقد أغلقت هذه الصفحة — استخدم الوكيل حكمه الخاص.",
+        "answeredLabel": "الإجابة:",
+        "noSummary": "تمت الإجابة في الصفحة"
+      },
       "configStale": {
         "agentConfigTitle": "تم تحديث إعدادات الوكيل",
         "modelProviderTitle": "تم تحديث مزوّد النموذج",
@@ -5508,6 +5531,11 @@
       "short": "يدع الوكيل يسألك قبل أن يقرر.",
       "hint": "يسمح للوكلاء بالتوقّف وطرح سؤال متعدّد الخيارات يظهر فوق مربّع إدخال المحادثة. ينتظر الوكيل حتى تجيب (أو تتخطّى)."
     },
+    "render": {
+      "label": "عرض صفحة",
+      "short": "يدع الوكيل يرسم صفحة تفاعلية في المحادثة.",
+      "hint": "يسمح للوكلاء برسم صفحة صغيرة مكتفية ذاتيًا داخل المحادثة — نماذج وخيارات ومقارنات. قد تنتظر الصفحة إرسالك إجابة عليها قبل أن يتابع الوكيل، أو تُعرض للعرض فقط. يمكنك أيضًا وضع علامات على صفحة معروضة — عنصر أو منطقة أو ملاحظة حرة — ليعود تقرير العلامات إلى الوكيل بوصفه طلبك."
+    },
     "sessions": {
       "label": "الحصول على معلومات الجلسة",
       "short": "يبحث في الجلسات السابقة ونتائجها.",
diff --git a/src/i18n/messages/de.json b/src/i18n/messages/de.json
index cae3ae5568..443ceaebe3 100644
--- a/src/i18n/messages/de.json
+++ b/src/i18n/messages/de.json
@@ -4067,6 +4067,7 @@
           "background": "Hintergrundaufgabe",
           "plan": "Plan",
           "question": "Frage",
+          "renderPage": "Seite",
           "image": "Bild",
           "goal": "Ziel",
           "other": "Schritt"
@@ -4175,6 +4176,28 @@
         "declined": "Du hast dies verworfen – der Agent hat nach eigenem Ermessen entschieden.",
         "noSelection": "Keine Auswahl"
       },
+      "renderPage": {
+        "title": "Seite",
+        "waitingHint": "Antworte auf der Seite.",
+        "annotate": "Seite annotieren",
+        "annotateStop": "Annotation beenden",
+        "annotateElement": "Element",
+        "annotateRegion": "Bereich",
+        "annotateDraw": "Zeichnung",
+        "annotatePlaceholder": "Notiz (optional)",
+        "annotateSend": "Senden",
+        "annotateCancel": "Abbrechen",
+        "annotateChip": "Seitenannotation {n}",
+        "dismiss": "Schließen ohne Antwort",
+        "submitError": "Antwort konnte nicht gesendet werden. Bitte erneut versuchen."
+      },
+      "renderPageResult": {
+        "title": "Seite",
+        "awaiting": "Warten auf deine Antwort…",
+        "declined": "Du hast dies verworfen – der Agent hat nach eigenem Ermessen entschieden.",
+        "answeredLabel": "Antwort:",
+        "noSummary": "Auf der Seite beantwortet"
+      },
       "configStale": {
         "agentConfigTitle": "Agent-Einstellungen aktualisiert",
         "modelProviderTitle": "Modellanbieter aktualisiert",
@@ -5508,6 +5531,11 @@
       "short": "Lässt den Agenten vor einer Entscheidung nachfragen.",
       "hint": "Erlaubt Agenten, anzuhalten und dir eine Multiple-Choice-Frage zu stellen, die über dem Eingabefeld der Unterhaltung erscheint. Der Agent wartet, bis du antwortest (oder überspringst)."
     },
+    "render": {
+      "label": "Seite rendern",
+      "short": "Lässt den Agenten eine interaktive Seite im Chat zeichnen.",
+      "hint": "Erlaubt Agenten, eine kleine eigenständige Seite im Chat zu zeichnen – Formulare, Optionen, Vergleiche. Eine Seite kann auf deine Antwort warten, bevor der Agent fortfährt, oder nur anzeigen. Du kannst eine gezeigte Seite auch markieren – Element, Bereich, Freihandnotiz – und der Markierungsbericht geht als Eingabe an den Agenten zurück."
+    },
     "sessions": {
       "label": "Sitzungsinformationen abrufen",
       "short": "Schlägt frühere Sitzungen und Ergebnisse nach.",
diff --git a/src/i18n/messages/en.json b/src/i18n/messages/en.json
index 8b54c3c015..5dbdfeae13 100644
--- a/src/i18n/messages/en.json
+++ b/src/i18n/messages/en.json
@@ -4067,6 +4067,7 @@
           "background": "Background task",
           "plan": "Plan",
           "question": "Question",
+          "renderPage": "Page",
           "image": "Image",
           "goal": "Goal",
           "other": "Step"
@@ -4175,6 +4176,28 @@
         "declined": "You dismissed this — the agent used its own judgment.",
         "noSelection": "No selection"
       },
+      "renderPage": {
+        "title": "Page",
+        "waitingHint": "Answer on the page.",
+        "annotate": "Annotate the page",
+        "annotateStop": "Stop annotating",
+        "annotateElement": "Element",
+        "annotateRegion": "Region",
+        "annotateDraw": "Draw",
+        "annotatePlaceholder": "Note (optional)",
+        "annotateSend": "Send",
+        "annotateCancel": "Cancel",
+        "annotateChip": "Page annotation {n}",
+        "dismiss": "Close without answering",
+        "submitError": "Couldn't send your answer. Please try again."
+      },
+      "renderPageResult": {
+        "title": "Page",
+        "awaiting": "Waiting for your answer…",
+        "declined": "You dismissed this — the agent used its own judgment.",
+        "answeredLabel": "Answer:",
+        "noSummary": "Answered on the page"
+      },
       "configStale": {
         "agentConfigTitle": "Agent settings updated",
         "modelProviderTitle": "Model provider updated",
@@ -5508,6 +5531,11 @@
       "short": "Let the agent ask you before it decides.",
       "hint": "Let agents pause and ask you a multiple-choice question that appears above the conversation input box. The agent waits until you answer (or skip)."
     },
+    "render": {
+      "label": "Render page",
+      "short": "Let the agent draw an interactive page in the chat.",
+      "hint": "Let agents draw a small self-contained page in the chat — forms, choices, comparisons. A page can wait for you to submit an answer on it before the agent continues, or just show. You can also mark up a shown page — an element, a region, a freehand note — and the marked-up report goes back to the agent as your prompt."
+    },
     "sessions": {
       "label": "Get session info",
       "short": "Look up past sessions and their results.",
diff --git a/src/i18n/messages/es.json b/src/i18n/messages/es.json
index 2ef0c22ec9..0f690da27e 100644
--- a/src/i18n/messages/es.json
+++ b/src/i18n/messages/es.json
@@ -4067,6 +4067,7 @@
           "background": "Tarea en segundo plano",
           "plan": "Plan",
           "question": "Pregunta",
+          "renderPage": "Página",
           "image": "Imagen",
           "goal": "Objetivo",
           "other": "Paso"
@@ -4175,6 +4176,28 @@
         "declined": "Descartaste esto: el agente usó su propio criterio.",
         "noSelection": "Sin selección"
       },
+      "renderPage": {
+        "title": "Página",
+        "waitingHint": "Responde en la página.",
+        "annotate": "Anotar la página",
+        "annotateStop": "Dejar de anotar",
+        "annotateElement": "Elemento",
+        "annotateRegion": "Región",
+        "annotateDraw": "Dibujo",
+        "annotatePlaceholder": "Nota (opcional)",
+        "annotateSend": "Enviar",
+        "annotateCancel": "Cancelar",
+        "annotateChip": "Anotación de página {n}",
+        "dismiss": "Cerrar sin responder",
+        "submitError": "No se pudo enviar tu respuesta. Inténtalo de nuevo."
+      },
+      "renderPageResult": {
+        "title": "Página",
+        "awaiting": "Esperando tu respuesta…",
+        "declined": "Descartaste esto: el agente usó su propio criterio.",
+        "answeredLabel": "Respuesta:",
+        "noSummary": "Respondido en la página"
+      },
       "configStale": {
         "agentConfigTitle": "Configuración del agente actualizada",
         "modelProviderTitle": "Proveedor de modelo actualizado",
@@ -5508,6 +5531,11 @@
       "short": "Deja que el agente te consulte antes de decidir.",
       "hint": "Permite que los agentes se detengan y te hagan una pregunta de opción múltiple que aparece encima del cuadro de entrada de la conversación. El agente espera hasta que respondas (u omitas)."
     },
+    "render": {
+      "label": "Renderizar página",
+      "short": "Deja que el agente dibuje una página interactiva en el chat.",
+      "hint": "Permite que los agentes dibujen una página pequeña y autónoma en el chat: formularios, opciones, comparativas. La página puede esperar a que envíes una respuesta antes de que el agente continúe, o solo mostrarse. También puedes marcar una página mostrada: un elemento, una región, una nota a mano alzada; el informe de marcado vuelve al agente como tu indicación."
+    },
     "sessions": {
       "label": "Obtener información de sesión",
       "short": "Consulta sesiones pasadas y sus resultados.",
diff --git a/src/i18n/messages/fr.json b/src/i18n/messages/fr.json
index a99931365f..9559fa2d47 100644
--- a/src/i18n/messages/fr.json
+++ b/src/i18n/messages/fr.json
@@ -4067,6 +4067,7 @@
           "background": "Tâche en arrière-plan",
           "plan": "Plan",
           "question": "Question",
+          "renderPage": "Page",
           "image": "Image",
           "goal": "Objectif",
           "other": "Étape"
@@ -4175,6 +4176,28 @@
         "declined": "Tu as ignoré cette question — l’agent a utilisé son propre jugement.",
         "noSelection": "Aucune sélection"
       },
+      "renderPage": {
+        "title": "Page",
+        "waitingHint": "Réponds sur la page.",
+        "annotate": "Annoter la page",
+        "annotateStop": "Quitter l’annotation",
+        "annotateElement": "Élément",
+        "annotateRegion": "Zone",
+        "annotateDraw": "Dessin",
+        "annotatePlaceholder": "Note (facultatif)",
+        "annotateSend": "Envoyer",
+        "annotateCancel": "Annuler",
+        "annotateChip": "Annotation de page {n}",
+        "dismiss": "Fermer sans répondre",
+        "submitError": "Envoi de la réponse impossible. Réessaie."
+      },
+      "renderPageResult": {
+        "title": "Page",
+        "awaiting": "En attente de ta réponse…",
+        "declined": "Tu as ignoré cette page — l’agent a utilisé son propre jugement.",
+        "answeredLabel": "Réponse :",
+        "noSummary": "Répondu sur la page"
+      },
       "configStale": {
         "agentConfigTitle": "Paramètres de l'agent mis à jour",
         "modelProviderTitle": "Fournisseur de modèle mis à jour",
@@ -5508,6 +5531,11 @@
       "short": "Laisse l'agent vous consulter avant de décider.",
       "hint": "Permet aux agents de s'interrompre et de vous poser une question à choix multiples affichée au-dessus de la zone de saisie de la conversation. L'agent attend votre réponse (ou que vous ignoriez)."
     },
+    "render": {
+      "label": "Rendre une page",
+      "short": "Laisse l'agent dessiner une page interactive dans le chat.",
+      "hint": "Permet aux agents de dessiner une petite page autonome dans la conversation — formulaires, choix, comparatifs. La page peut attendre votre réponse avant que l'agent continue, ou seulement s'afficher. Vous pouvez aussi annoter la page affichée — un élément, une zone, une note à main levée — et le rapport d’annotation revient à l’agent comme instruction."
+    },
     "sessions": {
       "label": "Obtenir les infos de session",
       "short": "Consulte les sessions passées et leurs résultats.",
diff --git a/src/i18n/messages/ja.json b/src/i18n/messages/ja.json
index 8f56ff096e..722a913315 100644
--- a/src/i18n/messages/ja.json
+++ b/src/i18n/messages/ja.json
@@ -4067,6 +4067,7 @@
           "background": "バックグラウンドタスク",
           "plan": "計画",
           "question": "質問",
+          "renderPage": "ページ",
           "image": "画像",
           "goal": "目標",
           "other": "ステップ"
@@ -4175,6 +4176,28 @@
         "declined": "この質問をスキップしました — エージェントが独自に判断して進めました。",
         "noSelection": "選択なし"
       },
+      "renderPage": {
+        "title": "ページ",
+        "waitingHint": "ページ上で回答してください。",
+        "annotate": "ページに注釈",
+        "annotateStop": "注釈を終了",
+        "annotateElement": "要素",
+        "annotateRegion": "領域",
+        "annotateDraw": "描画",
+        "annotatePlaceholder": "メモ（任意）",
+        "annotateSend": "送信",
+        "annotateCancel": "キャンセル",
+        "annotateChip": "ページの注釈{n}",
+        "dismiss": "回答せずに閉じる",
+        "submitError": "回答を送信できませんでした。もう一度お試しください。"
+      },
+      "renderPageResult": {
+        "title": "ページ",
+        "awaiting": "回答をお待ちしています…",
+        "declined": "このページを閉じました — エージェントが独自に判断して進めました。",
+        "answeredLabel": "回答：",
+        "noSummary": "ページ上で回答済み"
+      },
       "configStale": {
         "agentConfigTitle": "エージェント設定が更新されました",
         "modelProviderTitle": "モデルプロバイダーが更新されました",
@@ -5508,6 +5531,11 @@
       "short": "判断に迷ったら質問させます。",
       "hint": "エージェントが処理を一時停止し、会話の入力欄の上に表示される選択式の質問をできるようにします。回答（またはスキップ）するまでエージェントは待機します。"
     },
+    "render": {
+      "label": "ページを描画",
+      "short": "エージェントがチャットに操作可能なページを描画できます。",
+      "hint": "エージェントが会話内に自己完結型の小さなページ（フォーム、選択肢、比較表など）を描画できるようにします。ページ上の回答の送信を待ってから続行することも、表示だけ行うこともできます。 表示されたページに注釈を付けることもできます——要素の指定、領域の囲み、手書きメモ——注釈レポートがプロンプトとしてエージェントに返されます。"
+    },
     "sessions": {
       "label": "セッション情報の取得",
       "short": "過去のセッションと結果を調べます。",
diff --git a/src/i18n/messages/ko.json b/src/i18n/messages/ko.json
index 97c2369f09..94974e329f 100644
--- a/src/i18n/messages/ko.json
+++ b/src/i18n/messages/ko.json
@@ -4067,6 +4067,7 @@
           "background": "백그라운드 작업",
           "plan": "계획",
           "question": "질문",
+          "renderPage": "페이지",
           "image": "이미지",
           "goal": "목표",
           "other": "단계"
@@ -4175,6 +4176,28 @@
         "declined": "이 질문을 건너뛰었습니다 — 에이전트가 자체 판단으로 진행했습니다.",
         "noSelection": "선택 없음"
       },
+      "renderPage": {
+        "title": "페이지",
+        "waitingHint": "페이지에서 답변해 주세요.",
+        "annotate": "페이지에 주석",
+        "annotateStop": "주석 종료",
+        "annotateElement": "요소",
+        "annotateRegion": "영역",
+        "annotateDraw": "그리기",
+        "annotatePlaceholder": "메모 (선택)",
+        "annotateSend": "보내기",
+        "annotateCancel": "취소",
+        "annotateChip": "페이지 주석{n}",
+        "dismiss": "답변 없이 닫기",
+        "submitError": "답변을 보내지 못했습니다. 다시 시도해 주세요."
+      },
+      "renderPageResult": {
+        "title": "페이지",
+        "awaiting": "답변을 기다리는 중…",
+        "declined": "이 페이지를 닫았습니다 — 에이전트가 자체 판단으로 진행했습니다.",
+        "answeredLabel": "답변:",
+        "noSummary": "페이지에서 답변됨"
+      },
       "configStale": {
         "agentConfigTitle": "에이전트 설정이 업데이트되었습니다",
         "modelProviderTitle": "모델 공급자가 업데이트되었습니다",
@@ -5508,6 +5531,11 @@
       "short": "판단이 애매하면 먼저 물어보게 합니다.",
       "hint": "에이전트가 작업을 멈추고 대화 입력창 위에 표시되는 객관식 질문을 할 수 있습니다. 답변(또는 건너뛰기)할 때까지 에이전트는 대기합니다."
     },
+    "render": {
+      "label": "페이지 렌더링",
+      "short": "에이전트가 채팅에 대화형 페이지를 그리도록 합니다.",
+      "hint": "에이전트가 대화 안에 독립적인 작은 페이지(양식, 선택지, 비교표 등)를 그릴 수 있습니다. 페이지에서 답변 제출을 기다린 뒤 계속하거나, 표시만 할 수도 있습니다. 표시된 페이지에 주석을 달 수도 있습니다 — 요소 지정, 영역 표시, 자유 메모 — 주석 보고서가 프롬프트로 에이전트에게 전달됩니다."
+    },
     "sessions": {
       "label": "세션 정보 가져오기",
       "short": "지난 세션과 결과를 조회합니다.",
diff --git a/src/i18n/messages/pt.json b/src/i18n/messages/pt.json
index 92b9f4b64f..5718f80f82 100644
--- a/src/i18n/messages/pt.json
+++ b/src/i18n/messages/pt.json
@@ -4067,6 +4067,7 @@
           "background": "Tarefa em segundo plano",
           "plan": "Plano",
           "question": "Pergunta",
+          "renderPage": "Página",
           "image": "Imagem",
           "goal": "Objetivo",
           "other": "Etapa"
@@ -4175,6 +4176,28 @@
         "declined": "Você ignorou isto — o agente usou o próprio julgamento.",
         "noSelection": "Sem seleção"
       },
+      "renderPage": {
+        "title": "Página",
+        "waitingHint": "Responda na página.",
+        "annotate": "Anotar a página",
+        "annotateStop": "Parar de anotar",
+        "annotateElement": "Elemento",
+        "annotateRegion": "Região",
+        "annotateDraw": "Desenho",
+        "annotatePlaceholder": "Nota (opcional)",
+        "annotateSend": "Enviar",
+        "annotateCancel": "Cancelar",
+        "annotateChip": "Anotação de página {n}",
+        "dismiss": "Fechar sem responder",
+        "submitError": "Não foi possível enviar sua resposta. Tente novamente."
+      },
+      "renderPageResult": {
+        "title": "Página",
+        "awaiting": "Aguardando sua resposta…",
+        "declined": "Você ignorou isto — o agente usou o próprio julgamento.",
+        "answeredLabel": "Resposta:",
+        "noSummary": "Respondido na página"
+      },
       "configStale": {
         "agentConfigTitle": "Configurações do agente atualizadas",
         "modelProviderTitle": "Provedor de modelo atualizado",
@@ -5508,6 +5531,11 @@
       "short": "Deixa o agente perguntar antes de decidir.",
       "hint": "Permite que os agentes pausem e façam uma pergunta de múltipla escolha que aparece acima da caixa de entrada da conversa. O agente aguarda até você responder (ou pular)."
     },
+    "render": {
+      "label": "Renderizar página",
+      "short": "Deixa o agente desenhar uma página interativa no chat.",
+      "hint": "Permite que os agentes desenhem uma página pequena e autossuficiente no chat — formulários, opções, comparações. A página pode esperar sua resposta antes de o agente continuar, ou apenas exibir. Você também pode marcar uma página exibida — elemento, região, rabisco — e o relatório de marcação volta ao agente como seu pedido."
+    },
     "sessions": {
       "label": "Obter informações da sessão",
       "short": "Consulta sessões anteriores e seus resultados.",
diff --git a/src/i18n/messages/zh-CN.json b/src/i18n/messages/zh-CN.json
index 5e3d17dfcb..3de1f73a94 100644
--- a/src/i18n/messages/zh-CN.json
+++ b/src/i18n/messages/zh-CN.json
@@ -4067,6 +4067,7 @@
           "background": "后台任务",
           "plan": "计划",
           "question": "提问",
+          "renderPage": "页面",
           "image": "图片",
           "goal": "目标",
           "other": "步骤"
@@ -4175,6 +4176,28 @@
         "declined": "你已忽略此问题 — 代理已自行判断。",
         "noSelection": "未选择"
       },
+      "renderPage": {
+        "title": "页面",
+        "waitingHint": "请在页面上作答。",
+        "annotate": "在页面上标注",
+        "annotateStop": "退出标注",
+        "annotateElement": "元素",
+        "annotateRegion": "区域",
+        "annotateDraw": "绘制",
+        "annotatePlaceholder": "批注（可选）",
+        "annotateSend": "发送",
+        "annotateCancel": "取消",
+        "annotateChip": "页面标注{n}",
+        "dismiss": "关闭且不作答",
+        "submitError": "回答发送失败，请重试。"
+      },
+      "renderPageResult": {
+        "title": "页面",
+        "awaiting": "等待你的回答…",
+        "declined": "你已关闭此页面 — 代理已自行判断。",
+        "answeredLabel": "回答：",
+        "noSummary": "已在页面上作答"
+      },
       "configStale": {
         "agentConfigTitle": "智能体配置已更新",
         "modelProviderTitle": "模型供应商已更新",
@@ -5508,6 +5531,11 @@
       "short": "让智能体拿不准时先问你。",
       "hint": "允许智能体暂停并向你提出多选问题，问题会显示在会话输入框上方。智能体会一直等待，直到你作答（或跳过）。"
     },
+    "render": {
+      "label": "渲染页面",
+      "short": "让智能体在会话里绘制可交互页面。",
+      "hint": "允许智能体在会话中绘制一个小型自包含页面——表单、选项、对比图。页面可以等你提交回答后智能体再继续，也可以只做展示。 还可以在展示的页面上标注——点选元素、圈选区域、随手画一笔，标注报告会作为你的指令回传给智能体。"
+    },
     "sessions": {
       "label": "获取会话信息",
       "short": "查询历史会话及其结果。",
diff --git a/src/i18n/messages/zh-TW.json b/src/i18n/messages/zh-TW.json
index c8b91e3eb9..9ac4199e8b 100644
--- a/src/i18n/messages/zh-TW.json
+++ b/src/i18n/messages/zh-TW.json
@@ -4067,6 +4067,7 @@
           "background": "背景任務",
           "plan": "計畫",
           "question": "提問",
+          "renderPage": "頁面",
           "image": "圖片",
           "goal": "目標",
           "other": "步驟"
@@ -4175,6 +4176,28 @@
         "declined": "你已略過此問題 — 代理已自行判斷。",
         "noSelection": "未選擇"
       },
+      "renderPage": {
+        "title": "頁面",
+        "waitingHint": "請在頁面上作答。",
+        "annotate": "在頁面上標註",
+        "annotateStop": "退出標註",
+        "annotateElement": "元素",
+        "annotateRegion": "區域",
+        "annotateDraw": "繪製",
+        "annotatePlaceholder": "批註（選填）",
+        "annotateSend": "傳送",
+        "annotateCancel": "取消",
+        "annotateChip": "頁面標註{n}",
+        "dismiss": "關閉且不作答",
+        "submitError": "回答發送失敗，請重試。"
+      },
+      "renderPageResult": {
+        "title": "頁面",
+        "awaiting": "等待你的回答…",
+        "declined": "你已關閉此頁面 — 代理已自行判斷。",
+        "answeredLabel": "回答：",
+        "noSummary": "已在頁面上作答"
+      },
       "configStale": {
         "agentConfigTitle": "智能體設定已更新",
         "modelProviderTitle": "模型供應商已更新",
@@ -5508,6 +5531,11 @@
       "short": "讓代理拿不準時先問你。",
       "hint": "允許智能體暫停並向你提出多選問題，問題會顯示在對話輸入框上方。智能體會一直等待，直到你作答（或略過）。"
     },
+    "render": {
+      "label": "渲染頁面",
+      "short": "讓代理在對話裡繪製可互動頁面。",
+      "hint": "允許智能體在對話中繪製一個小型自包含頁面——表單、選項、對比圖。頁面可以等你提交回答後智能體再繼續，也可以只做展示。 也可以在顯示出來的頁面上標註——點選元素、圈選區域、隨手畫一筆，標註報告會作為你的指令回傳給代理。"
+    },
     "sessions": {
       "label": "取得工作階段資訊",
       "short": "查詢歷史工作階段及其結果。",
diff --git a/src/lib/activity/describe-tool-call.ts b/src/lib/activity/describe-tool-call.ts
index 8722ecdb72..795e2fdc69 100644
--- a/src/lib/activity/describe-tool-call.ts
+++ b/src/lib/activity/describe-tool-call.ts
@@ -124,6 +124,8 @@ export function toolStepKind(part: AdaptedToolCallPart): ToolStepKind {
       return "delegation-cancel"
     case "question":
       return "question"
+    case "render_page":
+      return "render-page"
     case "check_user_feedback":
       return "feedback"
     case "attempt_completion":
diff --git a/src/lib/activity/types.ts b/src/lib/activity/types.ts
index e55540fd52..8c0980fb37 100644
--- a/src/lib/activity/types.ts
+++ b/src/lib/activity/types.ts
@@ -55,6 +55,9 @@ export type ToolStepKind =
   | "goal"
   | "plan-mode"
   | "question"
+  // codeg-mcp `render_page`: the in-stream record of a page the agent drew;
+  // its own card, like the ask tool's.
+  | "render-page"
   | "feedback"
   | "workbench"
   | "compaction"
diff --git a/src/lib/adapters/ai-elements-adapter.test.ts b/src/lib/adapters/ai-elements-adapter.test.ts
index bfddebc7a8..17dfadb207 100644
--- a/src/lib/adapters/ai-elements-adapter.test.ts
+++ b/src/lib/adapters/ai-elements-adapter.test.ts
@@ -2118,8 +2118,7 @@ const MARKED_SCREENSHOT_BLOCK = [
 const GOOGLE_URI = "codeg://embedded/https%3A%2F%2Fwww.google.com%2F"
 /** …and the one the chip for the site it came from is keyed by. */
 const GOOGLE_SITE = "codeg://embedded/https%3A%2F%2Fwww.google.com"
-/** The same pair for linux.do. */
-const LINUX_DO_URI = "codeg://embedded/https%3A%2F%2Flinux.do%2F"
+/** The same chip key for linux.do. */
 const LINUX_DO_SITE = "codeg://embedded/https%3A%2F%2Flinux.do"
 
 describe("extractUserResourcesFromText — codeg references stay inline", () => {
@@ -2279,20 +2278,107 @@ describe("extractUserResourcesFromText — codeg references stay inline", () =>
     expect(text).toBe("raw <file:///x/@foo [blocked].txt> ok")
   })
 
-  it("chips a codeg://embedded attachment while keeping its inert badge inline", () => {
+  it("keeps a codeg://embedded badge in the prose", () => {
     const { text, resources } = extractUserResourcesFromText(
       "here [report.pdf](codeg://embedded/abc-123) ok"
     )
-    expect(resources).toEqual([
-      { name: "report.pdf", uri: "codeg://embedded/abc-123", mime_type: null },
-    ])
+    // An annotation's badge stays where it was attached — it is the handle
+    // that opens the report — and nothing goes to the summary row.
+    expect(resources).toEqual([])
     expect(text).toBe("here [report.pdf](codeg://embedded/abc-123) ok")
   })
 
+  it("leaves a quoted embedded site link inside a code fence alone", () => {
+    // Outside a fence this link is moved out to a site chip; a person pasting
+    // the wire shape into a fence is quoting the text, so it must survive
+    // verbatim with nothing lifted.
+    const input = [
+      "the badge serialized as:",
+      "```",
+      `[linux.do](${GOOGLE_URI})`,
+      "```",
+    ].join("\n")
+    const { text, resources } = extractUserResourcesFromText(input)
+    expect(resources).toEqual([])
+    expect(text).toBe(input)
+  })
+
+  // The annotation shape: the block's ref is the minted embedded uri itself
+  // (a bare id no one would type). The block becomes an inline
+  // `<annotation …>` tag named by the report's Label line, and the badge the
+  // display text persisted stands beside it as the handle that opens it.
+  it("rewrites an annotation block into the inline tag the badge opens", () => {
+    const block = [
+      "",
+      '<context ref="codeg://embedded/9f3c-42-dead">',
+      "Label: 页面标注1 - make the button",
+      "The user annotated the page below your request.",
+      "Comment: make the button blue",
+      "</context>",
+    ].join("\n")
+    const { text, resources } = extractUserResourcesFromText(
+      `fix it [页面标注1 - make the button](codeg://embedded/9f3c-42-dead)${block}`
+    )
+    expect(resources).toEqual([])
+    expect(text).toContain(
+      "[页面标注1 - make the button](codeg://embedded/9f3c-42-dead)"
+    )
+    expect(text).toContain(
+      '<annotation ref="codeg://embedded/9f3c-42-dead" label="页面标注1 - make the button">'
+    )
+    expect(text).toContain("Comment: make the button blue")
+    // The label rides the tag once; the report body does not repeat it.
+    expect(text).not.toContain("Label:")
+  })
+
+  // The same message read back from the agent's own record, which keeps
+  // neither the display text nor the badge: only the bare address and the
+  // block. The address is put back as the badge (named by the report's Label
+  // line), and the block becomes the tag the badge opens.
+  it("names a re-read annotation badge from the report's label line", () => {
+    const ref = "codeg://embedded/d6e8e6c4-ef61-400d-bc51-600c2110aaaa"
+    const adapted = adaptMessageTurn(
+      {
+        id: "user-0",
+        role: "user",
+        blocks: [
+          { type: "text", text: "fix it" },
+          { type: "text", text: ref },
+          {
+            type: "text",
+            text: [
+              "",
+              `<context ref="${ref}">`,
+              "Label: 页面标注1 - 这一块和上面太远了",
+              "The user annotated the page below your request.",
+              "Comment: 这一块和上面太远了",
+              "</context>",
+            ].join("\n"),
+          },
+        ],
+        timestamp: "2026-09-24T00:00:00.000Z",
+      },
+      {
+        attachedResources: "Attached resources",
+        toolCallFailed: "Tool failed",
+        pageHandoffName,
+      }
+    )
+    const joined = adapted.content
+      .flatMap((part) => (part.type === "text" ? [part.text] : []))
+      .join("\n")
+    expect(adapted.userResources ?? []).toEqual([])
+    // The bare address came back as the badge the Label line names, and the
+    // block as the tag that badge opens — nothing in the summary row.
+    expect(joined).toContain("[页面标注1 - 这一块和上面太远了]")
+    expect(joined).toContain(`<annotation ref="${ref}"`)
+    expect(joined).toContain("Comment: 这一块和上面太远了")
+  })
+
   // The composer's badge for something the built-in browser handed over
-  // carries the page's address. The badge still says what was sent; the chip
-  // under the bubble says where from — the chip this message gets when it is
-  // read back from the agent's record, whatever the badge is called.
+  // carries the page's address. The badge is dropped from the prose — the chip
+  // under the bubble is the one display an embedded attachment gets, and it is
+  // keyed by the page the attachment came from.
   it("lists a page's badge under the page it came from", () => {
     const badge = `[Marked-up screenshot](${GOOGLE_URI}#4f1c-uuid)`
     const { text, resources } = extractUserResourcesFromText(
@@ -2301,17 +2387,18 @@ describe("extractUserResourcesFromText — codeg references stay inline", () =>
     expect(resources).toEqual([
       { name: "www.google.com", uri: GOOGLE_SITE, mime_type: null },
     ])
-    expect(text).toBe(`${badge} what is this`)
+    expect(text).toBe("what is this")
   })
 
   // Two things taken from one page are two badges, and one page under them.
   it("lists two badges from one page under it once", () => {
-    const { resources } = extractUserResourcesFromText(
+    const { text, resources } = extractUserResourcesFromText(
       `[Page screenshot](${GOOGLE_URI}#a) [div#logo](${GOOGLE_URI}#b)`
     )
     expect(resources).toEqual([
       { name: "www.google.com", uri: GOOGLE_SITE, mime_type: null },
     ])
+    expect(text).toBe("")
   })
 
   // The chip is the site, so two pages of one site are one chip — two chips
@@ -2374,7 +2461,8 @@ describe("extractUserResourcesFromText — codeg references stay inline", () =>
       `what is this post${PAGE_BLOCK}`
     )
     // Listed under the page it came from, as the composer's badge for it is,
-    // and carrying the same inert display uri that badge carries.
+    // carrying the same inert display uri — and the block's own text, so the
+    // chip can expand to what was actually sent.
     expect(resources).toEqual([
       {
         name: "linux.do",
@@ -2526,8 +2614,8 @@ describe("adaptMessageTurn — user reference resources", () => {
   // The shape a browser hand-off actually comes back in: the prose, the bare
   // page address the ACP adapter wrote where the badge was, and the embedded
   // block as its own trailing text block. All three are one attachment, and
-  // the composer showed it as one badge — named after what was picked — with
-  // its page as the one chip under the message.
+  // it reads as one chip under the message — named after its page, expanding
+  // to the block's own text — with nothing of it left in the prose.
   it("shows a handed-over page the way the composer did", () => {
     const adapted = adaptMessageTurn(
       {
@@ -2550,12 +2638,12 @@ describe("adaptMessageTurn — user reference resources", () => {
         mime_type: null,
       },
     ])
-    // One part, and it reads the way the composer did: the badge, then the
-    // question. No bare address left in the prose, and no page dump.
+    // One part, the question alone. No badge in the prose, no bare address,
+    // and no page dump.
     expect(adapted.content).toEqual([
       {
         type: "text",
-        text: "[a.title.raw-link.raw-topic-link](codeg://embedded/https%3A%2F%2Flinux.do%2F) what is this post",
+        text: "what is this post",
       },
     ])
   })
@@ -2610,23 +2698,26 @@ describe("adaptMessageTurn — user reference resources", () => {
       msgText
     )
 
-    const uri = "codeg://embedded/https%3A%2F%2Flinux.do%2Ft%2Ftopic%2F1"
     // The site alone: the path is on the page, not what the chip is for.
     expect(adapted.userResources).toEqual([
-      { name: "linux.do", uri: LINUX_DO_SITE, mime_type: null },
+      {
+        name: "linux.do",
+        uri: LINUX_DO_SITE,
+        mime_type: null,
+      },
     ])
     expect(adapted.content).toEqual([
       {
         type: "text",
-        text: `[Page screenshot](${uri}) what does this look like`,
+        text: `what does this look like`,
       },
     ])
   })
 
   // The report this came from: a marked-up screenshot sent on its own read as
   // "Marked-up screenshot" while it was being sent and as the page's address
-  // once the conversation was opened again. The bubble says what was sent and
-  // the chip under it where from, both times.
+  // once the conversation was opened again. An embedded attachment now shows
+  // as one chip under the bubble in both readings, expanding to its text.
   it("shows a marked-up screenshot in the bubble and its page under it", () => {
     const adapted = adaptMessageTurn(
       {
@@ -2642,11 +2733,16 @@ describe("adaptMessageTurn — user reference resources", () => {
       msgText
     )
 
+    // Nothing but the attachment: the prose falls back to its label.
     expect(adapted.content).toEqual([
-      { type: "text", text: `[Marked-up screenshot](${GOOGLE_URI})` },
+      { type: "text", text: "Attached resources" },
     ])
     expect(adapted.userResources).toEqual([
-      { name: "www.google.com", uri: GOOGLE_SITE, mime_type: null },
+      {
+        name: "www.google.com",
+        uri: GOOGLE_SITE,
+        mime_type: null,
+      },
     ])
     expect(adapted.userImages).toHaveLength(1)
   })
@@ -2680,10 +2776,7 @@ describe("adaptMessageTurn — user reference resources", () => {
       msgText
     )
 
-    const uri = "codeg://embedded/http%3A%2F%2F127.0.0.1%3A3000%2F"
-    expect(adapted.content).toEqual([
-      { type: "text", text: `[2 console errors](${uri}) why` },
-    ])
+    expect(adapted.content).toEqual([{ type: "text", text: `why` }])
     // A local server's site keeps its port: it is what tells two apart.
     expect(adapted.userResources).toEqual([
       {
@@ -2696,8 +2789,9 @@ describe("adaptMessageTurn — user reference resources", () => {
 
   // codex-acp writes the stand-in and the block as ONE text input, and codex
   // joins text inputs with nothing between them: the page's address ends up
-  // glued to the last word the person typed.
-  it("takes the address codex glues onto the prose back out as the badge", () => {
+  // glued to the last word the person typed. It comes back out, and lands on
+  // the chip row — not as a badge re-born in the prose.
+  it("takes the address codex glues onto the prose back out", () => {
     const adapted = adaptMessageTurn(
       {
         id: "u8",
@@ -2716,7 +2810,7 @@ describe("adaptMessageTurn — user reference resources", () => {
     expect(adapted.content).toEqual([
       {
         type: "text",
-        text: `[Marked-up screenshot](${GOOGLE_URI}) what is this`,
+        text: `what is this`,
       },
     ])
     expect(adapted.userResources).toEqual([
@@ -2741,7 +2835,8 @@ describe("adaptMessageTurn — user reference resources", () => {
     )
 
     expect(adapted.content).toEqual([
-      { type: "text", text: `[Marked-up screenshot](${GOOGLE_URI})` },
+      // Nothing of the attachment is left to say: the placeholder names it.
+      { type: "text", text: "Attached resources" },
     ])
   })
 
@@ -2766,13 +2861,15 @@ describe("adaptMessageTurn — user reference resources", () => {
     expect(adapted.content).toEqual([
       {
         type: "text",
-        text: `[Marked-up screenshot](${GOOGLE_URI}) see https://www.google.com/`,
+        text: `see https://www.google.com/`,
       },
     ])
   })
 
   // A screenshot and an element taken from one page arrive as two stand-ins
-  // for one address. Each is the badge it was — not both the first one.
+  // for one address. Each consumes one name — neither lands on the other's —
+  // and both leave the prose: an embedded attachment shows once, as the page
+  // chip under the message.
   it("keeps the names of two things taken from one page apart", () => {
     const screenshot = [
       "",
@@ -2802,7 +2899,7 @@ describe("adaptMessageTurn — user reference resources", () => {
     expect(adapted.content).toEqual([
       {
         type: "text",
-        text: `[Page screenshot](${LINUX_DO_URI}) [a.title.raw-link.raw-topic-link](${LINUX_DO_URI}) compare`,
+        text: `compare`,
       },
     ])
     expect(adapted.userResources).toEqual([
@@ -2838,7 +2935,7 @@ describe("adaptMessageTurn — user reference resources", () => {
     expect(adapted.content).toEqual([
       {
         type: "text",
-        text: "[Page screenshot](codeg://embedded/http%3A%2F%2Fx.test%2F)",
+        text: "Attached resources",
       },
     ])
     expect(adapted.userResources).toEqual([
@@ -2868,7 +2965,7 @@ describe("adaptMessageTurn — user reference resources", () => {
     expect(adapted.content).toEqual([
       {
         type: "text",
-        text: "[a.title.raw-link.raw-topic-link](codeg://embedded/https%3A%2F%2Flinux.do%2F) https://linux.do/",
+        text: "https://linux.do/",
       },
     ])
   })
diff --git a/src/lib/adapters/ai-elements-adapter.ts b/src/lib/adapters/ai-elements-adapter.ts
index 3b4a16ec1e..e16a3f561c 100644
--- a/src/lib/adapters/ai-elements-adapter.ts
+++ b/src/lib/adapters/ai-elements-adapter.ts
@@ -49,6 +49,7 @@ import {
 import { referenceToMarkdown } from "@/components/chat/composer/reference-text"
 import {
   embeddedReferenceUriFor,
+  isEmbeddedReferenceUri,
   refOfEmbeddedReferenceUri,
 } from "@/components/chat/composer/reference-uri"
 
@@ -1057,12 +1058,17 @@ function stripBlockedMentions(
 
 /** Apply the per-scheme rule to ONE Markdown link, mutating `resources`. Returns
  *  the text to keep in place of the link: the original `match` for an inline-kept
- *  ref (file / codeg / non-resource link), or "" for a moved-out `@mention`. */
+ *  ref (file / codeg / non-resource link), or "" for a moved-out `@mention`.
+ *  `source`/`at` locate the link in the prose it was tokenized from, so the
+ *  move-out branches can honor a code fence the way {@link liftEmbeddedContext}
+ *  does — quoted wire text is quoted, not consumed. */
 function handleMarkdownLink(
   match: string,
   label: string,
   uri: string,
-  resources: UserResourceDisplay[]
+  resources: UserResourceDisplay[],
+  source: string,
+  at: number
 ): string {
   const normalizedLabel = label.trim()
   // Unwrap a CommonMark angle-bracket destination (`<uri>`) — and decode the
@@ -1078,26 +1084,27 @@ function handleMarkdownLink(
   // (The `@`-prefixed agent link `[@label](codeg://agent/…)` would otherwise be
   // caught by `hasMentionLabel` below.)
   if (normalizedUri.toLowerCase().startsWith("codeg:")) {
-    // A `codeg://embedded/…` ref is a path-less pasted attachment — still an
-    // attached file, so it is COPIED to the row too (kept inline as its inert
-    // badge). Other codeg refs are not attachments: inline only.
+    // A `codeg://embedded/…` link is a pasted or annotated attachment. A
+    // page the built-in browser handed over is MOVED out of the prose into
+    // the chip row: the site under the bubble says all it needs to say, and
+    // showing it twice reads as a bug. A page ANNOTATION goes the other way:
+    // its badge (`标注2 - …`) stays in the prose where it was attached, and
+    // the report rides after it as an `<annotation>` tag (see
+    // {@link liftEmbeddedContext}) so clicking the badge can show the prompt
+    // in place — a summary-row chip would say less than the badge already
+    // does.
     if (normalizedUri.toLowerCase().startsWith("codeg://embedded/")) {
-      // One whose uri carries the ref of the block behind it — a page the
-      // built-in browser handed over — is listed by that ref, as the page it
-      // came from: the badge in the prose already says what it is, and this is
-      // the chip the same message gets when it is read back from the agent's
-      // record, which knows the block and not the badge.
       const ref = refOfEmbeddedReferenceUri(normalizedUri)
-      addResource(
-        resources,
-        ref
-          ? embeddedChip(ref)
-          : {
-              name: unescapeReferenceLabel(normalizedLabel) || "attachment",
-              uri: normalizedUri,
-              mime_type: null,
-            }
-      )
+      if (!ref || isEmbeddedReferenceUri(ref)) return match
+      // A quoted hand-off link (fence, or any position a person pasted the
+      // wire text to show) keeps its literal shape; deleting it would rewrite
+      // the quotation.
+      if (insideFence(source, at)) return match
+      const chip = embeddedChip(ref)
+      if (!resources.some((item) => item.uri === chip.uri)) {
+        addResource(resources, chip)
+      }
+      return ""
     }
     return match
   }
@@ -1134,8 +1141,8 @@ function handleMarkdownLink(
  * the built-in browser's "send to chat", a pasted file with no path on disk).
  *
  * The composer never shows that text to the person who wrote it — an embedded
- * attachment is a badge in the prose and a chip under the bubble — so a turn
- * that read as one line while it was being sent came back, once the history
+ * attachment is one chip under the bubble — so a turn that read as one line
+ * while it was being sent came back, once the history
  * was re-read from the agent, as a screenful of page dump with a "show more"
  * under it. Same message, two renderings, and the unreadable one is the one
  * that lasts.
@@ -1188,11 +1195,32 @@ function insideFence(text: string, index: number): boolean {
  * A block that has never been near the browser (a pasted file with no path on
  * disk) is named by its ref, which for that is its file name.
  */
+/** The name a page annotation's report carries for its chip (the composer
+ *  writes this line; without it a re-read message could only name the chip
+ *  after its random ref). First line only — the same position the tag writer
+ *  strips it from, so a `Label:` line quoted INSIDE a report neither names
+ *  the chip nor survives into the opened report. */
+function annotationLabelOf(body: string): string {
+  return body.match(/^Label: ([^\r\n]+)/)?.[1]?.trim() ?? ""
+}
+
+/** A report minus its internal `Label:` line, for a path that shows the
+ *  report as prose (an agent that takes no embedded block gets the report
+ *  appended to the draft — the line names the tag, not the message). */
+export function stripAnnotationLabel(body: string): string {
+  return body.replace(/^Label: [^\r\n]*\r?\n?/, "")
+}
+
 function embeddedContextName(
   ref: string,
   body: string,
   nameHandoff: AdapterMessageText["pageHandoffName"]
 ): string {
+  // A page annotation carries the name its badge wore right in the report
+  // (the composer writes the line); the transcript persists nothing else of
+  // the label, and without it the chip would read as the random uri.
+  const label = annotationLabelOf(body)
+  if (label) return label
   const handoff = readPageHandoffBlock(body)
   return handoff ? nameHandoff(handoff) : embeddedRefName(ref)
 }
@@ -1231,17 +1259,29 @@ function embeddedRefName(uri: string): string {
  */
 function embeddedChip(ref: string): UserResourceDisplay {
   const site = webSiteOf(ref)
-  return site
-    ? {
-        name: site.host,
-        uri: embeddedReferenceUriFor(site.origin),
-        mime_type: null,
-      }
-    : {
-        name: embeddedRefName(ref),
-        uri: embeddedReferenceUriFor(ref),
-        mime_type: null,
-      }
+  if (site) {
+    return {
+      name: site.host,
+      uri: embeddedReferenceUriFor(site.origin),
+      mime_type: null,
+    }
+  }
+  // A ref that is itself an embedded display uri (an annotation's, minted at
+  // the composer) names its chip directly — re-wrapping it would encode the
+  // scheme a second time and break the match with the badge standing for the
+  // same attachment.
+  if (isEmbeddedReferenceUri(ref)) {
+    return {
+      name: embeddedRefName(ref),
+      uri: ref,
+      mime_type: null,
+    }
+  }
+  return {
+    name: embeddedRefName(ref),
+    uri: embeddedReferenceUriFor(ref),
+    mime_type: null,
+  }
 }
 
 /** The host (with its port) and origin of an http(s) address, or null. */
@@ -1274,27 +1314,56 @@ function embeddedBadge(name: string, ref: string): string {
   })
 }
 
-/** Lift each embedded context block out of the prose and onto the chip row,
- *  the way the composer showed it when the message was written. */
+/** Rewrite each embedded context block out of the prose: a page the built-in
+ *  browser handed over becomes a chip on the summary row; a page ANNOTATION
+ *  becomes an inline `<annotation>` tag carrying its label and its whole
+ *  report, which the message renderer shows collapsed under the badge the
+ *  tag belongs to. */
 function liftEmbeddedContext(
   text: string,
   resources: UserResourceDisplay[]
 ): string {
   return text.replace(
     EMBEDDED_CONTEXT_RE,
-    (match: string, ref: string, _body: string, offset: number) => {
+    (match: string, ref: string, body: string, offset: number) => {
       const uri = ref.trim()
-      // A block naming nothing leaves nothing to put on a chip, and dropping
+      // A block naming nothing leaves nothing to show, and dropping
       // it would be deleting content with no trace of it anywhere. Left in
       // place — as is one inside a code fence, which is a person quoting the
       // shape rather than an agent reporting a prompt.
       if (!uri || insideFence(text, offset)) return match
+      // An annotation's ref is its own random embedded uri; a hand-off names
+      // the real page address it was taken from.
+      if (isEmbeddedReferenceUri(uri)) {
+        return annotationTag(uri, body)
+      }
       addResource(resources, embeddedChip(uri))
       return ""
     }
   )
 }
 
+/** The inline tag an annotation block becomes, and its parsing counterpart
+ *  lives in `user-message-segments`. The body is escaped so it cannot close
+ *  the tag early; the label cannot break out of its attribute. */
+export function annotationTag(ref: string, body: string): string {
+  const label = annotationLabelOf(body) || embeddedRefName(ref)
+  const attr = label
+    .split("&")
+    .join("&amp;")
+    .split('"')
+    .join("&quot;")
+    .split("<")
+    .join("&lt;")
+  // The label line names the tag itself; repeating it inside the report the
+  // badge opens would show the same words twice.
+  const inner = (body ?? "")
+    .replace(/^Label: [^\r\n]*\r?\n?/, "")
+    .split("</annotation")
+    .join("<\\/annotation")
+  return `<annotation ref="${ref}" label="${attr}">${inner}</annotation>`
+}
+
 /**
  * Every embedded attachment in one user turn: for each ref its blocks name,
  * the names of those blocks, in the order they come.
@@ -1347,8 +1416,14 @@ function detachGluedStandIns(
     let before = text.slice(cursor, start)
     if (ref && before.endsWith(ref) && !insideFence(text, start)) {
       before = before.slice(0, before.length - ref.length)
-      const name = embeddedContextName(ref, match[2] ?? "", nameHandoff)
-      badges.push(embeddedBadge(name, ref))
+      // An annotation's address is put back as its badge (the badge lives in
+      // the prose, next to the words it annotates). A hand-off's is simply
+      // dropped: that attachment reads as the site's chip under the bubble,
+      // and the block lifted from it carries the page's facts.
+      if (isEmbeddedReferenceUri(ref)) {
+        const name = embeddedContextName(ref, match[2] ?? "", nameHandoff)
+        badges.push(embeddedBadge(name, ref))
+      }
     }
     out += before + match[0]
     cursor = start + match[0].length
@@ -1371,16 +1446,23 @@ export function extractUserResourcesFromText(text: string): {
   // contain an `@…[blocked…]` pattern and be mutated before extraction. The link
   // segments are handled verbatim by `handleMarkdownLink`.
   let out = ""
+  // `tokens.map(raw-or-value).join("")` rebuilds `prose` verbatim, so running
+  // lengths give each link its true offset for the fence check.
+  let offset = 0
   for (const token of tokenizeReferenceLinks(prose)) {
+    const consumed = token.type === "link" ? token.raw : token.value
     out +=
       token.type === "link"
         ? handleMarkdownLink(
             token.raw,
             token.label,
             token.destination,
-            resources
+            resources,
+            prose,
+            offset
           )
         : stripBlockedMentions(token.value, resources)
+    offset += consumed.length
   }
 
   return {
@@ -1399,7 +1481,6 @@ function splitUserTextAndResources(
   const resources: UserResourceDisplay[] = []
   const nextParts: AdaptedContentPart[] = []
   const attachments = embeddedAttachmentNames(parts, text.pageHandoffName)
-  const badges: string[] = []
 
   for (const part of parts) {
     if (part.type !== "text") {
@@ -1418,9 +1499,14 @@ function splitUserTextAndResources(
     if (name) {
       source = embeddedBadge(name, ref)
     } else {
-      const glued = detachGluedStandIns(part.text, text.pageHandoffName)
-      badges.push(...glued.badges)
-      source = glued.text
+      // A glued stand-in is detached so the address the person never typed
+      // does not read as prose; an annotation's rebuilt badge goes back at the
+      // front (its place among the words), a hand-off's stays dropped (the
+      // site's chip shows it).
+      const detached = detachGluedStandIns(part.text, text.pageHandoffName)
+      source = detached.badges.length
+        ? `${detached.badges.join(" ")}${detached.text}`
+        : detached.text
     }
     const extracted = extractUserResourcesFromText(source)
     if (extracted.resources.length > 0) {
@@ -1430,35 +1516,19 @@ function splitUserTextAndResources(
       for (const resource of extracted.resources)
         addResource(resources, resource)
       if (extracted.text.length === 0) continue
-      if (name) badges.push(extracted.text)
-      else nextParts.push({ type: "text", text: extracted.text })
+      if (!name) nextParts.push({ type: "text", text: extracted.text })
     } else {
+      // Compared against the PART, not the source: the extraction may have
+      // rewritten a source the detacher left untouched (a block becoming its
+      // inline tag), and the rewrite must survive.
       nextParts.push(
-        source === part.text ? part : { type: "text", text: extracted.text }
+        extracted.text === part.text
+          ? part
+          : { type: "text", text: extracted.text }
       )
     }
   }
 
-  // The badges go in FRONT of the prose, and on the same line as it.
-  //
-  // Not because the record says so — it cannot. Whatever the person did, the
-  // composer appends an embedded attachment's block after everything they
-  // typed (`message-input`'s `buildDraft`), so the stand-in's position in the
-  // message is an artifact of sending and says nothing about where the badge
-  // stood. What does say something is how these messages come about: the page
-  // is picked in the browser, which puts the badge in an empty composer, and
-  // the question is typed after it. So that is where it is put back.
-  if (badges.length > 0) {
-    const first = nextParts.findIndex((part) => part.type === "text")
-    const prose = first >= 0 ? nextParts[first] : null
-    const line = badges.join(" ")
-    if (prose && prose.type === "text") {
-      nextParts[first] = { type: "text", text: `${line} ${prose.text}` }
-    } else {
-      nextParts.unshift({ type: "text", text: line })
-    }
-  }
-
   if (nextParts.length === 0 && resources.length > 0) {
     nextParts.push({ type: "text", text: text.attachedResources })
   }
diff --git a/src/lib/adapters/tool-kind-classifier.ts b/src/lib/adapters/tool-kind-classifier.ts
index efc90bdc4c..3e1020bb2e 100644
--- a/src/lib/adapters/tool-kind-classifier.ts
+++ b/src/lib/adapters/tool-kind-classifier.ts
@@ -21,6 +21,7 @@ const CREATE_GOAL_SUFFIX_RE = /[^a-z0-9]create_goal$/
 const UPDATE_GOAL_SUFFIX_RE = /[^a-z0-9]update_goal$/
 const ASK_USER_QUESTION_SUFFIX_RE = /[^a-z0-9]ask_user_question$/
 const CHECK_USER_FEEDBACK_SUFFIX_RE = /[^a-z0-9]check_user_feedback$/
+const RENDER_PAGE_SUFFIX_RE = /[^a-z0-9]render_page$/
 
 /**
  * The codeg-mcp workbench companions, which own `CodegMcpToolCard` (and, for
@@ -79,7 +80,12 @@ export function isAgentLikeToolName(toolName: string): boolean {
     // codeg-mcp check_user_feedback — owns the timeline's feedback row. The
     // no-op polls are dropped upstream by `dropHiddenFeedbackChecks`, so only
     // received-feedback checks reach here.
-    name === "check_user_feedback"
+    name === "check_user_feedback" ||
+    // codeg-mcp render_page — owns the RenderPageResultCard, same standalone
+    // treatment as `question`. The bare form is the canonical name (live path);
+    // the suffix RE below covers the historical host-prefixed forms, since this
+    // runs pre-normalize.
+    name === "render_page"
   )
     return true
   if (DELEGATE_TO_AGENT_SUFFIX_RE.test(name)) return true
@@ -89,6 +95,7 @@ export function isAgentLikeToolName(toolName: string): boolean {
   if (UPDATE_GOAL_SUFFIX_RE.test(name)) return true
   if (ASK_USER_QUESTION_SUFFIX_RE.test(name)) return true
   if (CHECK_USER_FEEDBACK_SUFFIX_RE.test(name)) return true
+  if (RENDER_PAGE_SUFFIX_RE.test(name)) return true
   if (CODEG_MCP_WORKBENCH_NAMES.has(name)) return true
   if (CODEG_MCP_WORKBENCH_SUFFIX_RE.test(name)) return true
   return false
diff --git a/src/lib/agent-tool-groups.ts b/src/lib/agent-tool-groups.ts
index 71835084f3..d7899d7669 100644
--- a/src/lib/agent-tool-groups.ts
+++ b/src/lib/agent-tool-groups.ts
@@ -1,4 +1,5 @@
 import {
+  AppWindow,
   Bubbles,
   CalendarClock,
   Code2,
@@ -39,6 +40,7 @@ type AgentToolCopy =
   | "delegation"
   | "feedback"
   | "ask"
+  | "render"
   | "sessions"
   | "browser"
   | "browserEval"
@@ -90,6 +92,15 @@ export const AGENT_TOOL_GROUPS: Record<
     hint: "ask.hint",
     icon: HelpCircle,
   },
+  // The sibling of `ask`: same gate, same answer channel, same parked tool
+  // call — the difference is the agent draws the page the answer comes back
+  // from instead of listing options.
+  render: {
+    label: "render.label",
+    short: "render.short",
+    hint: "render.hint",
+    icon: AppWindow,
+  },
   sessions: {
     label: "sessions.label",
     short: "sessions.short",
diff --git a/src/lib/api.ts b/src/lib/api.ts
index 0d64acebaa..43d9d2baf4 100644
--- a/src/lib/api.ts
+++ b/src/lib/api.ts
@@ -78,6 +78,7 @@ import type {
   LiveSessionSnapshot,
   FeedbackItem,
   QuestionAnswer,
+  RenderPageAnswer,
   PlanApprovalAnswer,
   AcpAgentInfo,
   AcpAgentStatus,
@@ -457,6 +458,25 @@ export async function acpAnswerQuestion(
   })
 }
 
+/**
+ * Submit the user's answer to an awaiting `render_page` (the page's
+ * `codeg.render.submit(data, summary)` payload, or a dismissal). Resolves the
+ * parked tool call on the backend (and clears the card on every client via the
+ * `render_page_resolved` event). Idempotent: answering an already-resolved /
+ * unknown `pageId` is a no-op success.
+ */
+export async function acpAnswerRenderPage(
+  connectionId: string,
+  pageId: string,
+  answer: RenderPageAnswer
+): Promise<void> {
+  return getTransport().call("acp_answer_render_page", {
+    connectionId,
+    pageId,
+    answer,
+  })
+}
+
 /**
  * Submit the user's decision on a blocking Grok `exit_plan_mode` approval
  * (approve / request-changes / abandon). Resolves the parked ext request on the
@@ -5752,6 +5772,23 @@ export async function setQuestionSettings(
   return getTransport().call("set_question_settings", { settings })
 }
 
+// ─── Render-page settings ──────────────────────────────────────────────────
+
+/** Mirror of Rust `RenderPageSettings` (default ON). */
+export interface RenderPageSettings {
+  enabled: boolean
+}
+
+export async function getRenderPageSettings(): Promise<RenderPageSettings> {
+  return getTransport().call("get_render_page_settings")
+}
+
+export async function setRenderPageSettings(
+  settings: RenderPageSettings
+): Promise<RenderPageSettings> {
+  return getTransport().call("set_render_page_settings", { settings })
+}
+
 // ─── Get-session-info settings ─────────────────────────────────────────────
 
 /** Mirror of Rust `SessionInfoSettings` (default ON). */
diff --git a/src/lib/render-page.test.ts b/src/lib/render-page.test.ts
new file mode 100644
index 0000000000..e8d7b2505a
--- /dev/null
+++ b/src/lib/render-page.test.ts
@@ -0,0 +1,608 @@
+import { describe, expect, it } from "vitest"
+
+import {
+  buildRenderPageDocument,
+  clampRenderPageHeight,
+  formatRenderPageAnnotation,
+  parseRenderPageInput,
+  parseRenderPageOutcome,
+  readRenderPageAnnotationPayload,
+  readRenderPageFrameMessage,
+  renderPageAnnotateMessage,
+  renderPageAnswerFromSubmit,
+  RENDER_PAGE_ANNOTATE_MESSAGE,
+  RENDER_PAGE_ANNOTATION_MESSAGE,
+  RENDER_PAGE_MAX_HEIGHT,
+  RENDER_PAGE_MIN_HEIGHT,
+  RENDER_PAGE_OPEN_LINK_MESSAGE,
+  RENDER_PAGE_SELECTION_ESCAPE_MESSAGE,
+  RENDER_PAGE_SELECTION_MAX,
+  RENDER_PAGE_SELECTION_MESSAGE,
+  RENDER_PAGE_SIZE_MESSAGE,
+  RENDER_PAGE_SUBMIT_MESSAGE,
+  type RenderPageAnnotationPayload,
+  type RenderPageTheme,
+} from "./render-page"
+
+const THEME: RenderPageTheme = { appearance: "light", variables: {} }
+
+describe("buildRenderPageDocument", () => {
+  it("prepends a doctype and injects the bootstrap when the page is a fragment", () => {
+    const doc = buildRenderPageDocument("<p>hello</p>", THEME)
+    expect(doc.startsWith("<!doctype html><head>")).toBe(true)
+    expect(doc).toContain('<style id="codeg-render-theme">')
+    expect(doc).toContain(
+      '<script type="application/json" id="codeg-render-answer">'
+    )
+    expect(doc).toContain("<p>hello</p>")
+    // The selection reporter is part of the bootstrap: the page's selection is
+    // unreadable from outside the opaque origin, so the page must push it up.
+    expect(doc).toContain("selectionchange")
+    expect(doc).toContain(RENDER_PAGE_SELECTION_MESSAGE)
+  })
+
+  it("injects after an existing <head> opening tag", () => {
+    const doc = buildRenderPageDocument(
+      "<!doctype html><html><head><title>T</title></head><body></body></html>",
+      THEME
+    )
+    // The bootstrap (charset, viewport, theme, scripts) lands first inside the
+    // page's own head, ahead of its original children.
+    expect(doc).toMatch(
+      /<head><meta charset="utf-8">.*<style id="codeg-render-theme">.*<title>T<\/title>/
+    )
+  })
+
+  it("keeps the page's own charset/viewport instead of duplicating them", () => {
+    const doc = buildRenderPageDocument(
+      '<html><head><meta charset="utf-8"><meta name="viewport" content="width=500"></head></html>',
+      THEME
+    )
+    expect(doc.match(/<meta charset/gi)).toHaveLength(1)
+    expect(doc.match(/name\s*=\s*"viewport/gi)).toHaveLength(1)
+  })
+
+  it("does not mistake a string literal in a script for a head tag", () => {
+    const doc = buildRenderPageDocument(
+      "<body><script>var s = '<head>'</script></body>",
+      THEME
+    )
+    // The injection point is the real head/html scan, not the first `<head>`
+    // text found anywhere: the literal inside the script must stay in the body.
+    const injected = doc.indexOf('<style id="codeg-render-theme">')
+    const literal = doc.indexOf("var s = '<head>'")
+    expect(injected).toBeLessThan(literal)
+  })
+
+  it("carries the answer state into the page", () => {
+    const doc = buildRenderPageDocument("<p>x</p>", THEME, {
+      waiting: true,
+      answer: null,
+    })
+    expect(doc).toContain('"waiting":true')
+  })
+})
+
+describe("readRenderPageFrameMessage", () => {
+  it("reads the protocol messages", () => {
+    expect(
+      readRenderPageFrameMessage({
+        type: RENDER_PAGE_SIZE_MESSAGE,
+        height: 120,
+      })
+    ).toEqual({ kind: "size", height: 120 })
+    expect(
+      readRenderPageFrameMessage({
+        type: RENDER_PAGE_OPEN_LINK_MESSAGE,
+        url: "https://example.com",
+      })
+    ).toEqual({ kind: "open-link", url: "https://example.com" })
+    expect(
+      readRenderPageFrameMessage({
+        type: RENDER_PAGE_SUBMIT_MESSAGE,
+        id: 3,
+        summary: "picked A",
+        data: { a: 1 },
+      })
+    ).toEqual({ kind: "submit", id: 3, summary: "picked A", data: { a: 1 } })
+  })
+
+  it("rejects malformed payloads", () => {
+    expect(readRenderPageFrameMessage(null)).toBeNull()
+    expect(readRenderPageFrameMessage("size")).toBeNull()
+    expect(
+      readRenderPageFrameMessage({ type: RENDER_PAGE_SIZE_MESSAGE, height: 0 })
+    ).toBeNull()
+    expect(
+      readRenderPageFrameMessage({
+        type: RENDER_PAGE_SIZE_MESSAGE,
+        height: "10",
+      })
+    ).toBeNull()
+    expect(
+      readRenderPageFrameMessage({
+        type: RENDER_PAGE_OPEN_LINK_MESSAGE,
+        url: "javascript:alert(1)",
+      })
+    ).toBeNull()
+    expect(
+      readRenderPageFrameMessage({ type: RENDER_PAGE_SUBMIT_MESSAGE, id: 1.5 })
+    ).toBeNull()
+  })
+
+  it("defaults a submit's missing data to null", () => {
+    const msg = readRenderPageFrameMessage({
+      type: RENDER_PAGE_SUBMIT_MESSAGE,
+      id: 7,
+      summary: "ok",
+    })
+    expect(msg).toEqual({ kind: "submit", id: 7, summary: "ok", data: null })
+  })
+
+  it("reads a selection report and its removal", () => {
+    expect(
+      readRenderPageFrameMessage({
+        type: RENDER_PAGE_SELECTION_MESSAGE,
+        text: "picked text",
+        rect: { x: 10, y: -4.5, width: 120, height: 18 },
+      })
+    ).toEqual({
+      kind: "selection",
+      text: "picked text",
+      rect: { x: 10, y: -4.5, width: 120, height: 18 },
+    })
+    expect(
+      readRenderPageFrameMessage({
+        type: RENDER_PAGE_SELECTION_MESSAGE,
+        text: "",
+        rect: null,
+      })
+    ).toEqual({ kind: "selection", text: "", rect: null })
+    expect(
+      readRenderPageFrameMessage({
+        type: RENDER_PAGE_SELECTION_ESCAPE_MESSAGE,
+      })
+    ).toEqual({ kind: "selection-escape" })
+  })
+
+  it("rejects malformed selection payloads", () => {
+    expect(
+      readRenderPageFrameMessage({ type: RENDER_PAGE_SELECTION_MESSAGE })
+    ).toBeNull()
+    expect(
+      readRenderPageFrameMessage({
+        type: RENDER_PAGE_SELECTION_MESSAGE,
+        text: "x".repeat(RENDER_PAGE_SELECTION_MAX + 1),
+        rect: { x: 0, y: 0, width: 1, height: 1 },
+      })
+    ).toBeNull()
+    // A non-empty text with no usable rect has nothing to hang the bubble on.
+    expect(
+      readRenderPageFrameMessage({
+        type: RENDER_PAGE_SELECTION_MESSAGE,
+        text: "x",
+        rect: null,
+      })
+    ).toBeNull()
+    expect(
+      readRenderPageFrameMessage({
+        type: RENDER_PAGE_SELECTION_MESSAGE,
+        text: "x",
+        rect: { x: 0, y: 0, width: -1, height: 1 },
+      })
+    ).toBeNull()
+    expect(
+      readRenderPageFrameMessage({
+        type: RENDER_PAGE_SELECTION_MESSAGE,
+        text: "x",
+        rect: { x: Number.NaN, y: 0, width: 1, height: 1 },
+      })
+    ).toBeNull()
+  })
+
+  it("reads an annotation report and its cancel", () => {
+    const payload: RenderPageAnnotationPayload = {
+      viewport: { width: 1280, height: 800 },
+      comment: "make it bigger",
+      elements: [
+        {
+          selector: "#hero > h1",
+          html: '<h1 id="hero">Ship it</h1>',
+          text: "Ship it",
+          attributes: { id: "hero" },
+          styles: { fontSize: "16px" },
+          bounds: { x: 10, y: 20, width: 100, height: 40 },
+        },
+      ],
+      regions: [{ id: "region-1", rect: { x: 1, y: 2, width: 3, height: 4 } }],
+      strokes: [
+        {
+          id: "stroke-1",
+          points: [
+            { x: 0, y: 0 },
+            { x: 5, y: 6 },
+          ],
+          bounds: { x: 0, y: 0, width: 5, height: 6 },
+        },
+      ],
+    }
+    expect(
+      readRenderPageFrameMessage({
+        type: RENDER_PAGE_ANNOTATION_MESSAGE,
+        payload,
+      })
+    ).toEqual({ kind: "annotation", payload })
+    expect(
+      readRenderPageFrameMessage({
+        type: RENDER_PAGE_ANNOTATION_MESSAGE,
+        payload: null,
+      })
+    ).toEqual({ kind: "annotation", payload: null })
+    // A malformed report is not a report at all — ignored, not delivered.
+    expect(
+      readRenderPageFrameMessage({
+        type: RENDER_PAGE_ANNOTATION_MESSAGE,
+        payload: { ...payload, comment: 42 },
+      })
+    ).toBeNull()
+  })
+})
+
+describe("clampRenderPageHeight", () => {
+  it("keeps the report inside the floor and the cap", () => {
+    expect(clampRenderPageHeight(1)).toBe(RENDER_PAGE_MIN_HEIGHT)
+    expect(clampRenderPageHeight(240.4)).toBe(241)
+    expect(clampRenderPageHeight(99_999)).toBe(RENDER_PAGE_MAX_HEIGHT)
+  })
+})
+
+describe("renderPageAnswerFromSubmit", () => {
+  it("maps a page submit onto the answer envelope", () => {
+    expect(
+      renderPageAnswerFromSubmit({
+        kind: "submit",
+        id: 1,
+        summary: "go with B",
+        data: { choice: "b" },
+      })
+    ).toEqual({ summary: "go with B", data: { choice: "b" }, declined: false })
+  })
+})
+
+describe("parseRenderPageInput", () => {
+  it("reads the full argument set", () => {
+    expect(
+      parseRenderPageInput(
+        JSON.stringify({
+          html: "<h1>hi</h1>",
+          title: "Choices",
+          awaitAnswer: true,
+        })
+      )
+    ).toEqual({ html: "<h1>hi</h1>", title: "Choices", awaitAnswer: true })
+  })
+
+  it("collapses missing fields to the tool's defaults", () => {
+    expect(parseRenderPageInput(JSON.stringify({ html: "<p>x</p>" }))).toEqual({
+      html: "<p>x</p>",
+      title: "",
+      awaitAnswer: false,
+    })
+  })
+
+  it("returns null without a usable html", () => {
+    expect(parseRenderPageInput(null)).toBeNull()
+    expect(parseRenderPageInput("{trunc")).toBeNull()
+    expect(parseRenderPageInput(JSON.stringify({ title: "t" }))).toBeNull()
+    expect(parseRenderPageInput(JSON.stringify({ html: "   " }))).toBeNull()
+  })
+})
+
+describe("parseRenderPageOutcome", () => {
+  it("reads the show-only structured envelope", () => {
+    expect(
+      parseRenderPageOutcome(
+        JSON.stringify({ shown: true, title: "P", note: "…shown…" })
+      )
+    ).toEqual({ kind: "shown" })
+  })
+
+  it("reads the answered and declined envelopes", () => {
+    expect(
+      parseRenderPageOutcome(
+        JSON.stringify({ answered: true, summary: "go B", data: null })
+      )
+    ).toEqual({ kind: "answered", summary: "go B" })
+    expect(
+      parseRenderPageOutcome(
+        JSON.stringify({ answered: false, note: "did not answer" })
+      )
+    ).toEqual({ kind: "declined" })
+  })
+
+  it("falls back into a CLI's structuredContent wrapper", () => {
+    expect(
+      parseRenderPageOutcome(
+        JSON.stringify({ content: [], structuredContent: { shown: true } })
+      )
+    ).toEqual({ kind: "shown" })
+  })
+
+  it("falls back to the note text and the MCP content wrapper", () => {
+    expect(
+      parseRenderPageOutcome(
+        'The user answered on the page.\nsummary: pick B\ndata: {"a":1}\ncontinue'
+      )
+    ).toEqual({ kind: "answered", summary: "pick B" })
+    expect(
+      parseRenderPageOutcome(
+        "The user did not answer on the page (they dismissed it)."
+      )
+    ).toEqual({ kind: "declined" })
+    expect(
+      parseRenderPageOutcome("Shown to the user in the chat above your reply.")
+    ).toEqual({ kind: "shown" })
+    expect(
+      parseRenderPageOutcome(
+        JSON.stringify({
+          content: [
+            {
+              type: "text",
+              text: "The user answered on the page.\nsummary: ok\ndata: null\nx",
+            },
+          ],
+          isError: false,
+        })
+      )
+    ).toEqual({ kind: "answered", summary: "ok" })
+  })
+
+  it("returns null while the call is still in flight", () => {
+    expect(parseRenderPageOutcome(null)).toBeNull()
+    expect(parseRenderPageOutcome("")).toBeNull()
+    expect(parseRenderPageOutcome("some other result")).toBeNull()
+  })
+})
+
+describe("readRenderPageAnnotationPayload", () => {
+  const base = (): RenderPageAnnotationPayload => ({
+    viewport: { width: 100, height: 50 },
+    comment: "note",
+    elements: [],
+    regions: [],
+    strokes: [],
+  })
+
+  it("accepts a well-formed report", () => {
+    expect(readRenderPageAnnotationPayload(base())).toEqual(base())
+  })
+
+  it("rejects missing or non-finite viewport numbers", () => {
+    expect(
+      readRenderPageAnnotationPayload({
+        ...base(),
+        viewport: { width: Infinity, height: 50 },
+      })
+    ).toBeNull()
+    expect(
+      readRenderPageAnnotationPayload({ ...base(), viewport: null })
+    ).toBeNull()
+  })
+
+  it("enforces the comment and array caps", () => {
+    expect(
+      readRenderPageAnnotationPayload({ ...base(), comment: "x".repeat(4001) })
+    ).toBeNull()
+    expect(
+      readRenderPageAnnotationPayload({
+        ...base(),
+        comment: "x".repeat(4000),
+      })
+    ).not.toBeNull()
+    expect(
+      readRenderPageAnnotationPayload({
+        ...base(),
+        elements: Array.from({ length: 9 }, () => ({
+          selector: "a",
+          text: "",
+          attributes: {},
+          bounds: { x: 0, y: 0, width: 1, height: 1 },
+        })),
+      })
+    ).toBeNull()
+  })
+
+  it("validates element fields and attribute values", () => {
+    const el = {
+      selector: "div",
+      html: "<div>t</div>",
+      text: "t",
+      attributes: { id: "x" },
+      styles: { fontSize: "16px" },
+      bounds: { x: 0, y: 0, width: 1, height: 1 },
+    }
+    expect(
+      readRenderPageAnnotationPayload({ ...base(), elements: [el] })
+    ).not.toBeNull()
+    expect(
+      readRenderPageAnnotationPayload({
+        ...base(),
+        elements: [{ ...el, attributes: { id: "x".repeat(201) } }],
+      })
+    ).toBeNull()
+    expect(
+      readRenderPageAnnotationPayload({
+        ...base(),
+        elements: [{ ...el, styles: { fontSize: "x".repeat(201) } }],
+      })
+    ).toBeNull()
+    expect(
+      readRenderPageAnnotationPayload({
+        ...base(),
+        elements: [
+          {
+            ...el,
+            styles: Object.fromEntries(
+              Array.from({ length: 23 }, (_, i) => [`p${i}`, "1px"])
+            ),
+          },
+        ],
+      })
+    ).toBeNull()
+    expect(
+      readRenderPageAnnotationPayload({
+        ...base(),
+        elements: [{ ...el, html: "<div>" + "x".repeat(600) }],
+      })
+    ).toBeNull()
+    const noHtml = { ...el } as Partial<typeof el>
+    delete noHtml.html
+    expect(
+      readRenderPageAnnotationPayload({ ...base(), elements: [noHtml] })
+    ).toBeNull()
+    expect(
+      readRenderPageAnnotationPayload({
+        ...base(),
+        elements: [{ ...el, bounds: { x: 0, y: 0, width: -1, height: 1 } }],
+      })
+    ).toBeNull()
+  })
+
+  it("requires strokes to carry at least two finite points", () => {
+    const stroke = {
+      id: "stroke-1",
+      points: [
+        { x: 0, y: 0 },
+        { x: 1, y: 1 },
+      ],
+      bounds: { x: 0, y: 0, width: 1, height: 1 },
+    }
+    expect(
+      readRenderPageAnnotationPayload({ ...base(), strokes: [stroke] })
+    ).not.toBeNull()
+    expect(
+      readRenderPageAnnotationPayload({
+        ...base(),
+        strokes: [{ ...stroke, points: [{ x: 0, y: 0 }] }],
+      })
+    ).toBeNull()
+    expect(
+      readRenderPageAnnotationPayload({
+        ...base(),
+        strokes: [
+          {
+            ...stroke,
+            points: [
+              { x: 0, y: 0 },
+              { x: NaN, y: 1 },
+            ],
+          },
+        ],
+      })
+    ).toBeNull()
+  })
+
+  it("rejects a non-object payload", () => {
+    expect(readRenderPageAnnotationPayload(null)).toBeNull()
+    expect(readRenderPageAnnotationPayload("report")).toBeNull()
+  })
+})
+
+describe("formatRenderPageAnnotation", () => {
+  it("writes the openchamber-shaped report with rounded geometry", () => {
+    const text = formatRenderPageAnnotation(
+      {
+        viewport: { width: 1280.4, height: 800.6 },
+        comment: "  make it bigger  ",
+        elements: [
+          {
+            selector: "#hero > h1",
+            html: '<h1 id="hero" class="t">Ship it</h1>',
+            text: "Ship it",
+            attributes: { id: "hero", class: "t" },
+            styles: {
+              display: "block",
+              position: "static",
+              fontWeight: "700",
+              fontSize: "16px",
+              lineHeight: "24px",
+              fontFamily: "Arial",
+              color: "rgb(0, 0, 0)",
+              backgroundColor: "rgba(0, 0, 0, 0)",
+            },
+            bounds: { x: 10.2, y: 20.8, width: 100, height: 40 },
+          },
+        ],
+        regions: [
+          { id: "region-1", rect: { x: 1, y: 2, width: 3.4, height: 4.5 } },
+        ],
+        strokes: [
+          {
+            id: "stroke-1",
+            points: [
+              { x: 0, y: 0 },
+              { x: 5, y: 6 },
+            ],
+            bounds: { x: 0, y: 0, width: 5, height: 6 },
+          },
+        ],
+      },
+      "Theme picker"
+    )
+    expect(text.split("\n")).toEqual([
+      "The user annotated the page below your request. Apply each note ONLY to the element, region, or drawing it marks — never to the whole page — in your next step.",
+      "Page: Theme picker",
+      "Viewport: 1280x801",
+      "Screenshot: not attached",
+      "Comment: make it bigger",
+      "Element 1: #hero > h1",
+      '- HTML: <h1 id="hero" class="t">Ship it</h1>',
+      "- Text: Ship it",
+      '- Attributes: id="hero" class="t"',
+      "- Bounds: x=10, y=21, width=100, height=40",
+      "- Styles: display=block; position=static; font=700 16px / 24px Arial; color=rgb(0, 0, 0); background=rgba(0, 0, 0, 0)",
+      "Region 1: x=1, y=2, width=3, height=5",
+      "Drawing 1: 2 points over x=0, y=0, width=5, height=6",
+    ])
+  })
+
+  it("drops the title and comment lines when empty", () => {
+    const text = formatRenderPageAnnotation(
+      {
+        viewport: { width: 10, height: 10 },
+        comment: "   ",
+        elements: [],
+        regions: [],
+        strokes: [],
+      },
+      "  "
+    )
+    expect(text.split("\n")).toEqual([
+      "The user annotated the page below your request. Apply each note ONLY to the element, region, or drawing it marks — never to the whole page — in your next step.",
+      "Viewport: 10x10",
+      "Screenshot: not attached",
+    ])
+  })
+})
+
+describe("renderPageAnnotateMessage", () => {
+  it("carries labels only when given", () => {
+    expect(renderPageAnnotateMessage("stop")).toEqual({
+      type: RENDER_PAGE_ANNOTATE_MESSAGE,
+      action: "stop",
+    })
+    const labels = {
+      element: "E",
+      region: "R",
+      draw: "D",
+      placeholder: "P",
+      send: "S",
+      cancel: "C",
+    }
+    expect(renderPageAnnotateMessage("start", labels)).toEqual({
+      type: RENDER_PAGE_ANNOTATE_MESSAGE,
+      action: "start",
+      labels,
+    })
+  })
+})
diff --git a/src/lib/render-page.ts b/src/lib/render-page.ts
new file mode 100644
index 0000000000..35c01b665f
--- /dev/null
+++ b/src/lib/render-page.ts
@@ -0,0 +1,872 @@
+/**
+ * `render_page` — the page an agent draws inline in the chat. The page IS the
+ * tool call's own `html` input; codeg renders it in a sandboxed iframe without
+ * `allow-same-origin`, so its scripts run in an opaque origin with no access to
+ * the app's storage, credentials or DOM.
+ *
+ * A small bootstrap goes into the page's head ahead of its own styles. It sets
+ * the app theme as CSS variables (and swaps them when the host posts a new
+ * theme), reports the page's content height so the frame fits it, and hands
+ * http(s) link clicks to the host, which opens them in the user's browser. A
+ * page that waits for an answer gets `codeg.render.submit(data, summary)`,
+ * whose promise settles when the host accepts (or refuses) the submission.
+ *
+ * Ported from openchamber's `openchamber_render` (its htmlRender.ts); the
+ * key-chord, scroll-intent and tooltip-clamp machinery is cut for v1 — the
+ * theme kit, height bridge, submit protocol and the selection report behind
+ * the host's quote bubble are not. The in-page quotation marks (openchamber's
+ * custom-highlight marks over an anchor-relocated selection) are deferred:
+ * codeg quotes into the composer instead of annotating the page.
+ */
+
+import type { RenderPageAnswer } from "@/lib/types"
+
+export const RENDER_PAGE_MIN_HEIGHT = 48
+/** A page takes its full height in the chat and never scrolls inside its
+ *  frame; this ceiling only stops a page whose height grows with its frame
+ *  from growing without end. */
+export const RENDER_PAGE_MAX_HEIGHT = 20_000
+
+const MESSAGE_PREFIX = "codeg:render-page:"
+export const RENDER_PAGE_THEME_MESSAGE = `${MESSAGE_PREFIX}theme`
+export const RENDER_PAGE_SIZE_MESSAGE = `${MESSAGE_PREFIX}size`
+export const RENDER_PAGE_OPEN_LINK_MESSAGE = `${MESSAGE_PREFIX}open-link`
+export const RENDER_PAGE_SUBMIT_MESSAGE = `${MESSAGE_PREFIX}submit`
+export const RENDER_PAGE_SUBMIT_REPLY_MESSAGE = `${MESSAGE_PREFIX}submit-reply`
+export const RENDER_PAGE_ANSWER_STATE_MESSAGE = `${MESSAGE_PREFIX}answer-state`
+export const RENDER_PAGE_SELECTION_MESSAGE = `${MESSAGE_PREFIX}selection`
+export const RENDER_PAGE_SELECTION_ESCAPE_MESSAGE = `${MESSAGE_PREFIX}selection-escape`
+export const RENDER_PAGE_CLEAR_SELECTION_MESSAGE = `${MESSAGE_PREFIX}clear-selection`
+/** Host → page: open or close the in-page annotation overlay (element /
+ *  region / draw), with the overlay's localized chrome labels. */
+export const RENDER_PAGE_ANNOTATE_MESSAGE = `${MESSAGE_PREFIX}annotate`
+/** Page → host: one annotation session's payload, or a null payload when the
+ *  user cancelled. The page posts exactly one of these per start message. */
+export const RENDER_PAGE_ANNOTATION_MESSAGE = `${MESSAGE_PREFIX}annotation`
+
+/** The longest text a page may report as selected; the bootstrap cuts at it.
+ *  A quote into the composer needs no more than a long paragraph. */
+export const RENDER_PAGE_SELECTION_MAX = 8000
+
+/** The JSON a page may still submit — its own `data` argument to
+ *  `codeg.render.submit`, capped server-side at 16000 chars. */
+export type RenderPageAnswerData = unknown
+
+/** What the page knows about its answer when it loads: whether it may still
+ *  send one, and what it sent. A page reloaded after the answer reads the
+ *  second as `codeg.render.answer` to show the choice. */
+export interface RenderPageAnswerState {
+  waiting: boolean
+  answer: RenderPageAnswerData | null
+}
+
+export interface RenderPageTheme {
+  appearance: "light" | "dark"
+  variables: Record<string, string>
+}
+
+/** The tokens a page styles against — the names the tool schema promises. */
+const VARIABLE_NAMES = [
+  "--background",
+  "--foreground",
+  "--muted",
+  "--muted-foreground",
+  "--card",
+  "--card-foreground",
+  "--border",
+  "--primary",
+  "--primary-foreground",
+  "--destructive",
+  "--warning",
+  "--success",
+  "--info",
+  "--radius",
+] as const
+
+/** Fixed stand-ins for tokens the host theme may not define, so the schema's
+ *  promised variable set is always complete inside the page. */
+const FALLBACKS_LIGHT: Record<string, string> = {
+  "--warning": "oklch(0.769 0.153 71.129)",
+  "--success": "oklch(0.697 0.174 162.48)",
+  "--info": "oklch(0.623 0.214 259.815)",
+  "--radius": "0.6rem",
+}
+const FALLBACKS_DARK: Record<string, string> = {
+  "--warning": "oklch(0.828 0.189 84.429)",
+  "--success": "oklch(0.793 0.179 172.263)",
+  "--info": "oklch(0.707 0.165 254.624)",
+  "--radius": "0.6rem",
+}
+
+/** Chart series after the first, the same fixed set openchamber uses: a
+ *  theme's syntax palette made near-twins in its own checks, and every chart's
+ *  first two series blurred together. */
+const CHART_SERIES = {
+  dark: ["#60a5fa", "#2dd4bf", "#a78bfa", "#f472b6", "#a3e635"],
+  light: ["#2563eb", "#0d9488", "#7c3aed", "#db2777", "#65a30d"],
+} as const
+
+/**
+ * The host's own theme, read off the document root. `--chart-1` and the font
+ * stacks come from the live app (they are what the chat itself uses); series
+ * after the first and any missing token take the fixed stand-ins.
+ */
+export function collectRenderPageTheme(): RenderPageTheme {
+  const cs = getComputedStyle(document.documentElement)
+  const dark = document.documentElement.classList.contains("dark")
+  const fallbacks = dark ? FALLBACKS_DARK : FALLBACKS_LIGHT
+  const variables: Record<string, string> = {}
+  for (const name of VARIABLE_NAMES) {
+    const value = cs.getPropertyValue(name).trim()
+    if (value) variables[name] = value
+    else if (fallbacks[name]) variables[name] = fallbacks[name]
+  }
+  // The chat's own text size doubles as the page's root font size, and the
+  // host's rem as the kit's sizing unit, so a page follows the user's
+  // interface size the way the chat does.
+  const text = `${parseFloat(cs.fontSize) || 14}px`
+  variables["--oc-text"] = text
+  variables["--oc-rem"] = text
+  const hostChart1 = cs.getPropertyValue("--chart-1").trim()
+  variables["--chart-1"] = hostChart1 || (dark ? "#60a5fa" : "#2563eb")
+  CHART_SERIES[dark ? "dark" : "light"].forEach((color, index) => {
+    variables[`--chart-${index + 2}`] = color
+  })
+  const codeBackground = cs.getPropertyValue("--code-background").trim()
+  variables["--code-background"] =
+    codeBackground || variables["--muted"] || "rgba(127,127,127,.12)"
+  const codeForeground = cs.getPropertyValue("--code-foreground").trim()
+  variables["--code-foreground"] =
+    codeForeground || variables["--foreground"] || "currentColor"
+  const sans = cs.getPropertyValue("--font-sans").trim()
+  variables["--font-sans"] =
+    sans || "ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif"
+  const mono = cs.getPropertyValue("--font-mono").trim()
+  variables["--font-mono"] =
+    mono || "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace"
+  return { appearance: dark ? "dark" : "light", variables }
+}
+
+// The kit: ready classes so a page's recurring parts look like the app without
+// the agent spending output on CSS. Mirrors the class list the tool schema
+// promises (html + awaitAnswer descriptions); change both together.
+const KIT_CSS =
+  ".oc-box{box-sizing:border-box;padding:16px;border-radius:var(--radius);background-color:color-mix(in srgb,var(--foreground) 4%,transparent)}" +
+  ".oc-box .oc-box{background-color:color-mix(in srgb,var(--foreground) 6%,transparent)}" +
+  ".oc-muted{color:var(--muted-foreground)}" +
+  ".oc-num{font-variant-numeric:tabular-nums;text-align:end}" +
+  ".oc-table{overflow-x:auto;overscroll-behavior-x:none;border:1px solid color-mix(in srgb,var(--border) 80%,transparent);border-radius:calc(var(--oc-rem) * .5);background-color:var(--card)}" +
+  ".oc-table table{width:100%;border-collapse:collapse}" +
+  ".oc-table th,.oc-table td{padding:.625em 1em;text-align:start;vertical-align:middle;border-bottom:1px solid color-mix(in srgb,var(--border) 60%,transparent)}" +
+  ".oc-table th{font-weight:600}.oc-table td{color:color-mix(in srgb,var(--foreground) 90%,transparent)}" +
+  ".oc-table tr:last-child>td{border-bottom:0}.oc-table .oc-num{text-align:end}" +
+  ".oc-badge{display:inline-flex;align-items:center;padding:.0625em .5em;border-radius:999px;background-color:color-mix(in srgb,var(--foreground) 6%,transparent);color:var(--muted-foreground);font-size:.8125em;font-weight:500;line-height:1.45;white-space:nowrap}" +
+  ".oc-badge[data-tone]{background-color:color-mix(in srgb,var(--oc-tone) 15%,transparent);color:var(--oc-tone-text)}" +
+  ".oc-badge[data-tone=success]{--oc-tone:var(--success);--oc-tone-text:var(--success)}" +
+  ".oc-badge[data-tone=warning]{--oc-tone:var(--warning);--oc-tone-text:var(--warning)}" +
+  ".oc-badge[data-tone=error]{--oc-tone:var(--destructive);--oc-tone-text:var(--destructive)}" +
+  ".oc-badge[data-tone=info]{--oc-tone:var(--info);--oc-tone-text:var(--info)}" +
+  ".oc-dot{display:inline-block;width:.5em;height:.5em;border-radius:50%;background-color:var(--color,var(--chart-1));vertical-align:.1em}" +
+  ".oc-bar{display:block;height:8px;border-radius:999px;overflow:hidden;background-color:color-mix(in srgb,var(--foreground) 8%,transparent)}" +
+  '.oc-bar::before{content:"";display:block;width:var(--value,0%);max-width:100%;height:100%;border-radius:inherit;background-color:var(--color,var(--chart-1))}' +
+  ".oc-field{display:flex;flex-direction:column;gap:6px;min-width:0;font-size:calc(var(--oc-rem) * .8125);font-weight:500}" +
+  ".oc-field .oc-muted{font-weight:400}" +
+  ".oc-input{box-sizing:border-box;width:100%;min-width:0;height:calc(var(--oc-rem) * 2);margin:0;padding:0 calc(var(--oc-rem) * .625);border:1px solid color-mix(in srgb,var(--foreground) 12%,transparent);border-radius:calc(var(--oc-rem) * .4375);background-color:var(--card);color:var(--card-foreground);font:inherit;font-size:calc(var(--oc-rem) * .84375);font-weight:400;line-height:1.45;outline:none;transition:border-color .15s}" +
+  ".oc-input::placeholder{color:var(--muted-foreground)}" +
+  ".oc-input:focus{border-color:color-mix(in srgb,var(--foreground) 30%,transparent)}" +
+  ".oc-input[aria-invalid=true]{border-color:var(--destructive)}" +
+  ".oc-input:disabled{opacity:.5;cursor:default}" +
+  "textarea.oc-input{height:auto;min-height:calc(var(--oc-rem) * 4);padding:calc(var(--oc-rem) * .5) calc(var(--oc-rem) * .625);resize:vertical}" +
+  "select.oc-input{appearance:none;-webkit-appearance:none;padding-inline-end:calc(var(--oc-rem) * 1.75);cursor:pointer}" +
+  ".oc-switch{appearance:none;-webkit-appearance:none;position:relative;flex:none;box-sizing:border-box;width:36px;height:20px;margin:0;border:2px solid transparent;border-radius:999px;background-color:var(--border);vertical-align:middle;cursor:pointer;transition:background-color .15s}" +
+  '.oc-switch::before{content:"";position:absolute;top:0;inset-inline-start:0;width:16px;height:16px;border-radius:50%;background-color:var(--muted-foreground);transition:transform .15s}' +
+  ".oc-switch:checked{background-color:var(--primary)}" +
+  ".oc-switch:checked::before{background-color:var(--primary-foreground);transform:translateX(16px)}" +
+  ".oc-switch:checked:dir(rtl)::before{transform:translateX(-16px)}" +
+  ".oc-switch:disabled{opacity:.5;cursor:default}.oc-switch:focus-visible{outline:none}" +
+  ".oc-segmented{display:inline-flex;width:fit-content;max-width:100%;gap:2px;padding:2px;box-sizing:border-box;overflow-x:auto;border-radius:calc(var(--oc-rem) * .625);background-color:color-mix(in srgb,var(--foreground) 4%,transparent)}" +
+  ".oc-segmented>button{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:calc(var(--oc-rem) * 1.75);padding:0 calc(var(--oc-rem) * .625);border:0;border-radius:calc(var(--oc-rem) * .5);background:transparent;color:var(--muted-foreground);font:inherit;font-size:calc(var(--oc-rem) * .8125);font-weight:500;white-space:nowrap;cursor:pointer;transition:color .15s}" +
+  ".oc-segmented>button:hover,.oc-segmented>button:focus-visible{color:var(--foreground);outline:none}" +
+  ".oc-segmented>button[aria-pressed=true]{background-color:var(--card);color:var(--card-foreground);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--foreground) 12%,transparent)}"
+const OPTION_CSS =
+  ".oc-options{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr))}" +
+  ".oc-option{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:4px;box-sizing:border-box;width:100%;padding:16px;border:0;border-radius:var(--radius);background-color:color-mix(in srgb,var(--foreground) 4%,transparent);color:var(--foreground);font:inherit;text-align:start;cursor:pointer;transition:background-color .15s,color .15s}" +
+  ".oc-option:hover,.oc-option:focus-visible{background-color:color-mix(in srgb,var(--foreground) 7%,transparent)}" +
+  ".oc-option[aria-pressed=true]{background-color:color-mix(in srgb,var(--primary) 20%,transparent);color:var(--foreground)}" +
+  ".oc-option:focus-visible,.oc-button:focus-visible{outline:none}" +
+  ".oc-button{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;height:calc(var(--oc-rem) * 2);padding:0 calc(var(--oc-rem) * .75);border:1px solid color-mix(in srgb,var(--primary) 25%,transparent);border-radius:calc(var(--oc-rem) * .4375);background-color:color-mix(in srgb,var(--primary) 12%,var(--background));color:color-mix(in srgb,var(--primary) 90%,var(--foreground));font:inherit;font-size:calc(var(--oc-rem) * .84375);line-height:1.45;font-weight:500;white-space:nowrap;cursor:pointer;transition:background-color .15s}" +
+  ".oc-button:hover,.oc-button:focus-visible{background-color:color-mix(in srgb,var(--primary) 18%,var(--background))}" +
+  ".oc-button:active{background-color:color-mix(in srgb,var(--primary) 24%,var(--background))}" +
+  ".oc-button:disabled{opacity:.5;cursor:default;pointer-events:none}" +
+  ".oc-button[data-variant=outline]{border-color:color-mix(in srgb,var(--foreground) 20%,transparent);background-color:transparent;color:var(--foreground)}" +
+  ".oc-button[data-variant=outline]:hover,.oc-button[data-variant=outline]:focus-visible{background-color:color-mix(in srgb,var(--foreground) 5%,transparent)}" +
+  ".oc-button[data-variant=destructive]{border-color:color-mix(in srgb,var(--destructive) 25%,transparent);background-color:color-mix(in srgb,var(--destructive) 12%,var(--background));color:color-mix(in srgb,var(--destructive) 90%,var(--foreground))}" +
+  ".oc-button[data-variant=destructive]:hover,.oc-button[data-variant=destructive]:focus-visible{background-color:color-mix(in srgb,var(--destructive) 18%,var(--background))}"
+
+// The page sits on the chat's own background. Media shrinks to the column;
+// what is still wider (a wide table) scrolls sideways without the elastic
+// bounce; text is the chat's own size (--oc-text), so a page that sizes its
+// text in rem or em scales with the interface size as the chat does. The page
+// never scrolls vertically while it fits its frame, so a vertical swipe still
+// scrolls the chat.
+const BASE_CSS =
+  "html{background:transparent;color:var(--foreground);font-family:var(--font-sans);font-size:var(--oc-text,14px);line-height:1.5;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;overflow-x:auto;overscroll-behavior-x:none}" +
+  "body{margin:0}a{color:var(--primary)}code,kbd,pre,samp{font-family:var(--font-mono)}img,svg,video,canvas{max-width:100%}" +
+  OPTION_CSS +
+  KIT_CSS
+
+const CSS_VARIABLE_NAME = /^--[a-z0-9-]+$/
+const sanitizeCssValue = (value: string): string =>
+  value.replace(/[;{}<>]/g, "")
+
+export function renderPageThemeCss(theme: RenderPageTheme): string {
+  const declarations = Object.entries(theme.variables)
+    .filter(([name]) => CSS_VARIABLE_NAME.test(name))
+    .map(([name, value]) => `${name}:${sanitizeCssValue(value)};`)
+    .join("")
+  return `:root{color-scheme:${theme.appearance};${declarations}}${BASE_CSS}`
+}
+
+// The annotation overlay lives inside the bootstrap's IIFE; kept as its own
+// constant so the message names stay injectable and the block reads as one
+// unit. Plain ES5: it runs inside the page before anything of the page has
+// loaded, and its chrome is built per session in a closed shadow root.
+const ANNOT_SCRIPT =
+  `var AR=null,NS="http://www.w3.org/2000/svg",AKEYS=["id","class","name","type","href","src","alt","title","role","placeholder","aria-label","data-testid"],SKEYS=["display","position","color","backgroundColor","fontSize","fontWeight","fontFamily","lineHeight","padding","margin","border","borderRadius","width","height","opacity","zIndex","flexDirection","justifyContent","alignItems","gap","textAlign"],ABLK=["click","auxclick","dblclick","mousedown","mouseup","contextmenu"];` +
+  `function arRect(x,y,w,h){return{x:Math.round(x),y:Math.round(y),width:Math.round(Math.max(0,w)),height:Math.round(Math.max(0,h))}}` +
+  `function arCss(el){var p=el.tagName.toLowerCase(),n=el.parentElement,i,c,s=0,k=0;if(n){for(i=0;i<n.children.length;i++)if(n.children[i].tagName===el.tagName)s++;if(s>1)for(i=0;i<n.children.length;i++){if(n.children[i].tagName===el.tagName){k++;if(n.children[i]===el){p+=":nth-of-type("+k+")";break}}}}c=el.classList;if(c&&c.length){p+=".";var a=[];for(i=0;i<c.length&&a.length<2;i++)a.push(c[i]);p+=a.join(".")}return p}` +
+  `function arSel(el){var x=el.id?(window.CSS&&CSS.escape?CSS.escape(el.id):el.id):"";if(x)return"#"+x;var p=[],n=el,d=0;while(n&&n.nodeType===1&&d<5){if(n.id&&n!==el){p.unshift("#"+(window.CSS&&CSS.escape?CSS.escape(n.id):n.id));break}p.unshift(arCss(n));n=n.parentElement;d++}return p.join(" > ")}` +
+  `function arDesc(el){var a={},s={},i,v;for(i=0;i<AKEYS.length;i++){v=el.getAttribute(AKEYS[i]);if(v!=null)a[AKEYS[i]]=String(v).slice(0,200)}var cs=window.getComputedStyle(el);for(i=0;i<SKEYS.length;i++){v=cs[SKEYS[i]];s[SKEYS[i]]=v==null?"":String(v).slice(0,200)}var b=el.getBoundingClientRect();return{node:el,selector:arSel(el),html:String(el.outerHTML).slice(0,600),text:(el.innerText||"").replace(/\s+/g," ").trim().slice(0,400),attributes:a,styles:s,bounds:arRect(b.left,b.top,b.width,b.height)}}` +
+  `function arPB(ps){var x1=1e9,y1=1e9,x2=-1e9,y2=-1e9,i,p;for(i=0;i<ps.length;i++){p=ps[i];if(p.x<x1)x1=p.x;if(p.y<y1)y1=p.y;if(p.x>x2)x2=p.x;if(p.y>y2)y2=p.y}return arRect(x1,y1,x2-x1,y2-y1)}` +
+  `function arD(ps){var s="",i;for(i=0;i<ps.length;i++)s+=(i?"L":"M")+ps[i].x+" "+ps[i].y;return s}` +
+  `function arEnd(p){if(!AR)return;var h=AR.host,cur=AR.cur,ac=AR.ac;AR=null;ac.abort();try{h.remove()}catch(x){}try{cur.remove()}catch(x){}window.parent.postMessage({type:${JSON.stringify(RENDER_PAGE_ANNOTATION_MESSAGE)},payload:p||null},"*")}` +
+  `function arLive(){if(AR&&AR.desc){try{var b=AR.desc.node.getBoundingClientRect();AR.desc.bounds=arRect(b.left,b.top,b.width,b.height)}catch(x){AR.desc=null}}}` +
+  `function arEd(){if(!AR)return;var ed=AR.ed,ew=ed.offsetWidth,eh=ed.offsetHeight,vw=window.innerWidth,vh=window.innerHeight,t=AR.desc?AR.desc.bounds:AR.regions.length?AR.regions[AR.regions.length-1].rect:AR.strokes.length?AR.strokes[AR.strokes.length-1].bounds:null,x,y;if(t){x=t.x+t.width/2;y=t.y+t.height+10;if(y+eh>vh-8&&t.y-10-eh>56)y=t.y-10-eh;if(y+eh>vh-8)y=Math.max(56,vh-8-eh)}else{x=vw/2;y=vh-16}x=Math.max(8+ew/2,Math.min(vw-8-ew/2,x));ed.style.left=Math.round(x-ew/2)+"px";ed.style.top=Math.round(Math.max(56,y))+"px"}` +
+  `function arPaint(){if(!AR)return;arLive();var L=AR.lyr,i;while(L.firstChild)L.removeChild(L.firstChild);for(i=0;i<AR.strokes.length;i++){var p=document.createElementNS(NS,"path");p.setAttribute("d",arD(AR.strokes[i].points));p.setAttribute("class","stk");L.appendChild(p)}for(i=0;i<AR.regions.length;i++){var r=document.createElementNS(NS,"rect"),q=AR.regions[i].rect;r.setAttribute("x",q.x);r.setAttribute("y",q.y);r.setAttribute("width",q.width);r.setAttribute("height",q.height);r.setAttribute("class","rgn");L.appendChild(r)}if(AR.pts){var cp=document.createElementNS(NS,"path");cp.setAttribute("d",arD(AR.pts));cp.setAttribute("class","stk");L.appendChild(cp)}if(AR.mq){var a=Math.min(AR.mq.x1,AR.mq.x2),b0=Math.min(AR.mq.y1,AR.mq.y2);AR.mb.style.display="block";AR.mb.style.left=Math.round(a)+"px";AR.mb.style.top=Math.round(b0)+"px";AR.mb.style.width=Math.round(Math.abs(AR.mq.x2-AR.mq.x1))+"px";AR.mb.style.height=Math.round(Math.abs(AR.mq.y2-AR.mq.y1))+"px"}else AR.mb.style.display="none";if(AR.desc){var t=AR.desc.bounds;AR.hb.style.display="block";AR.hb.style.left=Math.round(t.x)+"px";AR.hb.style.top=Math.round(t.y)+"px";AR.hb.style.width=Math.round(t.width)+"px";AR.hb.style.height=Math.round(t.height)+"px";AR.hl.textContent=AR.desc.selector;AR.hl.style.display="block";AR.hl.style.left=Math.round(t.x)+"px";AR.hl.style.top=Math.round(Math.max(4,t.y-22))+"px"}else{AR.hb.style.display="none";AR.hl.style.display="none"}var has=!!AR.desc||AR.regions.length>0||AR.strokes.length>0;if(has){var vis=AR.ed.style.display==="flex";AR.ed.style.display="flex";if(!vis){try{AR.ta.focus({preventScroll:true})}catch(x){}}arEd()}else AR.ed.style.display="none"}` +
+  `function arUndo(){if(!AR||!AR.ops.length)return;var op=AR.ops.pop();if(op.k==="r")AR.regions.pop();else if(op.k==="s")AR.strokes.pop();else AR.desc=op.prev;arPaint()}` +
+  `function arSend(){if(!AR)return;var out=[];if(AR.desc)out.push({selector:AR.desc.selector,html:AR.desc.html,text:AR.desc.text,attributes:AR.desc.attributes,styles:AR.desc.styles,bounds:AR.desc.bounds});arEnd({viewport:{width:window.innerWidth,height:window.innerHeight},comment:AR.ta.value.trim().slice(0,4000),elements:out,regions:AR.regions.slice(0,24),strokes:AR.strokes.slice(0,32)})}` +
+  `function arHit(e){var el=document.elementFromPoint(e.clientX,e.clientY);if(!el||el===document.documentElement||el===document.body)return null;if(el.getRootNode&&el.getRootNode()!==document)return null;return el}` +
+  `function arStart(lb){arEnd(null);var ac=new AbortController(),sig={signal:ac.signal};var host=document.createElement("div");host.setAttribute("data-codeg-annotation","");var sr=host.attachShadow({mode:"closed"});` +
+  `sr.innerHTML='<style>:host{all:initial;position:fixed;inset:0;display:block;z-index:2147483000;pointer-events:none}:where(button,textarea){all:unset;box-sizing:border-box;font:inherit}.lyr{position:absolute;inset:0;width:100%;height:100%}.lyr .stk{fill:none;stroke:#ea580c;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}.lyr .rgn{fill:color-mix(in srgb,#ea580c 10%,transparent);stroke:#ea580c;stroke-width:1.5;stroke-dasharray:4 3}.box{position:absolute;border:1.5px solid #ea580c;background:color-mix(in srgb,#ea580c 12%,transparent);display:none}.lbl{position:absolute;background:#ea580c;color:#fff;font:500 11px/1.4 var(--font-sans,system-ui);padding:2px 6px;border-radius:4px;display:none;white-space:nowrap;max-width:60vw;overflow:hidden}.tools{position:absolute;top:8px;left:50%;transform:translateX(-50%);display:flex;gap:2px;padding:3px;border-radius:999px;background:var(--card);border:1px solid var(--border);box-shadow:0 4px 14px rgba(0,0,0,.28);pointer-events:auto}.tools button{padding:4px 12px;border-radius:999px;color:var(--muted-foreground);font:500 12px/1.4 var(--font-sans,system-ui);cursor:pointer}.tools button:hover{color:var(--foreground)}.tools button[aria-pressed=true]{background:#ea580c;color:#fff}.edit{position:absolute;display:none;gap:6px;align-items:flex-end;background:var(--card);border:2px solid #ea580c;border-radius:8px;padding:6px;pointer-events:auto;max-width:calc(100vw - 16px);box-shadow:0 6px 24px rgba(0,0,0,.3);animation:arPop .18s ease-out}.edit textarea{display:block;min-width:260px;max-width:min(400px,60vw);width:340px;height:38px;max-height:104px;overflow:auto;color:var(--card-foreground);font:400 13px/1.5 var(--font-sans,system-ui);cursor:text}@keyframes arPop{from{transform:scale(.94);opacity:0}}.edit textarea::placeholder{color:var(--muted-foreground)}.edit .snd{align-self:stretch;padding:0 12px;border-radius:6px;background:#ea580c;color:#fff;font:600 12px/1.4 var(--font-sans,system-ui);cursor:pointer}</style>'+'<svg class="lyr" xmlns="'+NS+'"></svg><div class="box"></div><div class="lbl"></div><div class="box" style="border-style:dashed"></div><div class="tools"><button type="button" aria-pressed="true"></button><button type="button"></button><button type="button"></button><button type="button"></button></div><div class="edit"><textarea rows="1"></textarea><button type="button" class="snd"></button></div>';` +
+  `document.body.appendChild(host);var q=function(s){return sr.querySelector(s)};var cur=document.createElement("style");cur.textContent="";document.head.appendChild(cur);` +
+  `AR={ac:ac,host:host,cur:cur,lyr:q(".lyr"),hb:q(".box"),hl:q(".lbl"),mb:sr.querySelectorAll(".box")[1],ed:q(".edit"),ta:q("textarea"),desc:null,hov:null,mode:"element",regions:[],strokes:[],ops:[],mq:null,pts:null};` +
+  `var bs=sr.querySelectorAll(".tools button");bs[0].textContent=lb.element||"Element";bs[1].textContent=lb.region||"Region";bs[2].textContent=lb.draw||"Draw";bs[3].textContent=lb.cancel||"Cancel";AR.ta.placeholder=lb.placeholder||"Note (optional)";q(".snd").textContent=lb.send||"Send";` +
+  `function setMode(m){AR.mode=m;bs[0].setAttribute("aria-pressed",String(m==="element"));bs[1].setAttribute("aria-pressed",String(m==="region"));bs[2].setAttribute("aria-pressed",String(m==="draw"));cur.textContent=m==="element"?"":"html{cursor:crosshair!important}";AR.hb.style.display="none";arPaint()}` +
+  `bs[0].addEventListener("click",function(){setMode("element")});bs[1].addEventListener("click",function(){setMode("region")});bs[2].addEventListener("click",function(){setMode("draw")});bs[3].addEventListener("click",function(){arEnd(null)});q(".snd").addEventListener("click",arSend);` +
+  `AR.ta.addEventListener("keydown",function(e){var z=e.key==="z"||e.key==="Z";if((e.ctrlKey||e.metaKey)&&!e.shiftKey&&z&&AR.ops.length){e.preventDefault();arUndo();return}if(e.key==="Escape"){arEnd(null);return}if(e.key==="Enter"&&!e.shiftKey){e.preventDefault();e.stopPropagation();arSend()}else e.stopPropagation()});` +
+  `AR.ta.addEventListener("input",function(){AR.ta.style.height="auto";AR.ta.style.height=Math.min(104,AR.ta.scrollHeight)+"px";arEd()});` +
+  `document.addEventListener("pointerdown",function(e){if(e.button!==0||e.target===host)return;e.preventDefault();e.stopPropagation();if(AR.mode==="element"){var el=arHit(e),pv=AR.desc;if(el){if(pv&&pv.node===el)AR.desc=null;else AR.desc=arDesc(el)}else AR.desc=null;if(AR.desc!==pv)AR.ops.push({k:"e",prev:pv});arPaint()}else if(AR.mode==="region"){AR.mq={x1:e.clientX,y1:e.clientY,x2:e.clientX,y2:e.clientY}}else{AR.pts=[{x:e.clientX,y:e.clientY}];arPaint()}},sig);` +
+  `document.addEventListener("pointermove",function(e){if(AR.mode==="region"&&AR.mq){AR.mq.x2=e.clientX;AR.mq.y2=e.clientY;arPaint()}else if(AR.mode==="draw"&&AR.pts){if(AR.pts.length<2000)AR.pts.push({x:e.clientX,y:e.clientY});arPaint()}else if(AR.mode==="element"&&!AR.desc){var el=arHit(e);if(el){var b=el.getBoundingClientRect();AR.hb.style.display="block";AR.hb.style.left=Math.round(b.left)+"px";AR.hb.style.top=Math.round(b.top)+"px";AR.hb.style.width=Math.round(b.width)+"px";AR.hb.style.height=Math.round(b.height)+"px"}else AR.hb.style.display="none"}},sig);` +
+  `document.addEventListener("pointerup",function(){if(AR.mode==="region"&&AR.mq){var m=AR.mq,x=Math.min(m.x1,m.x2),y=Math.min(m.y1,m.y2),w=Math.abs(m.x2-m.x1),h=Math.abs(m.y2-m.y1);if(w>=3&&h>=3){AR.regions.push({id:"region-"+(AR.regions.length+1),rect:arRect(x,y,w,h)});AR.ops.push({k:"r"})}AR.mq=null;arPaint()}else if(AR.mode==="draw"&&AR.pts){if(AR.pts.length>=2){AR.strokes.push({id:"stroke-"+(AR.strokes.length+1),points:AR.pts,bounds:arPB(AR.pts)});AR.ops.push({k:"s"})}AR.pts=null;arPaint()}},sig);` +
+  `ABLK.forEach(function(t){window.addEventListener(t,function(e){if(e.target!==host){e.preventDefault();e.stopPropagation()}},sig)});` +
+  `window.addEventListener("keydown",function(e){if((e.ctrlKey||e.metaKey)&&!e.shiftKey&&!e.isComposing&&e.keyCode!==229&&(e.key==="z"||e.key==="Z")&&AR&&AR.ops.length){e.preventDefault();arUndo()}},sig);` +
+  `window.addEventListener("keydown",function(e){if(e.key==="Escape"&&!e.isComposing&&e.keyCode!==229){e.stopPropagation();arEnd(null)}},sig);` +
+  `window.addEventListener("scroll",function(){arPaint()},sig);window.addEventListener("resize",function(){arPaint()},sig)}`
+
+// Runs in the page's head, before its own styles and scripts. It rewrites its
+// own <style> element rather than setting inline properties, so the page's own
+// :root rules still win. The reported height is the content height (root or
+// body scroll height, whichever is lower on the page), so the frame always
+// fits the page and the chat scrolls around it.
+const BOOTSTRAP_SCRIPT =
+  `(function(){var s=document.getElementById("codeg-render-theme");if(!s||window.parent===window)return;var B=${JSON.stringify(BASE_CSS)};` +
+  `window.addEventListener("message",function(e){var d=e.data;if(e.source!==window.parent||!d||d.type!==${JSON.stringify(RENDER_PAGE_THEME_MESSAGE)}||!d.variables||typeof d.variables!=="object")return;var c=":root{color-scheme:"+(d.appearance==="light"?"light":"dark")+";";for(var k in d.variables){if(/^--[a-z0-9-]+$/.test(k))c+=k+":"+String(d.variables[k]).replace(/[;{}<>]/g,"")+";";}s.textContent=c+"}"+B;});` +
+  `document.addEventListener("click",function(e){var t=e.target,a=t&&t.closest?t.closest("a[href]"):null,u;if(!a)return;try{u=new URL(a.getAttribute("href"),document.baseURI);}catch(x){return;}if(!/^https?:$/.test(u.protocol))return;e.preventDefault();window.parent.postMessage({type:${JSON.stringify(RENDER_PAGE_OPEN_LINK_MESSAGE)},url:u.href},"*");},true);` +
+  `var h=0,r=function(){var el=document.documentElement,b=document.body,v=el.scrollHeight;if(b){v=Math.max(v,b.scrollHeight,b.getBoundingClientRect().bottom+window.scrollY);}v=Math.ceil(v);if(!v||v===h)return;h=v;window.parent.postMessage({type:${JSON.stringify(RENDER_PAGE_SIZE_MESSAGE)},height:v},"*");};window.addEventListener("resize",r);` +
+  `if(window.ResizeObserver){new ResizeObserver(r).observe(document.documentElement);}` +
+  `document.addEventListener("DOMContentLoaded",r);window.addEventListener("load",r);` +
+  // Selection reporting, for the host's quote bubble: the selected text and
+  // its viewport rect go up debounced (200ms), forced on pointerup (a same-text
+  // re-report refreshes the rect after the caret stopped moving) and on any
+  // scroll. An empty text means the selection went away. A host-sent
+  // clear-selection resets the memo first, so the removal is never echoed
+  // back up. Escape reaches the host only while a selection was reported —
+  // the page decides whether it consumed the key.
+  `var L="",LE=true,TT=0;function ss(f){var s=window.getSelection?window.getSelection():null,t=s?s.toString():"";if(!t){if(!LE){LE=true;L="";window.parent.postMessage({type:${JSON.stringify(RENDER_PAGE_SELECTION_MESSAGE)},text:"",rect:null},"*");}return;}if(t===L&&!f)return;L=t;LE=false;var b=null;if(s.rangeCount){try{b=s.getRangeAt(0).getBoundingClientRect();}catch(x){}}if(!b)return;window.parent.postMessage({type:${JSON.stringify(RENDER_PAGE_SELECTION_MESSAGE)},text:t.slice(0,${RENDER_PAGE_SELECTION_MAX}),rect:{x:b.left,y:b.top,width:b.width,height:b.height}},"*");}` +
+  `document.addEventListener("selectionchange",function(){clearTimeout(TT);TT=setTimeout(function(){ss(false);},200);});` +
+  `document.addEventListener("pointerup",function(){ss(true);});` +
+  `window.addEventListener("scroll",function(){ss(true);},true);` +
+  `document.addEventListener("keydown",function(e){if(!LE&&e.key==="Escape"&&e.isTrusted&&!e.isComposing){setTimeout(function(){if(!e.defaultPrevented)window.parent.postMessage({type:${JSON.stringify(RENDER_PAGE_SELECTION_ESCAPE_MESSAGE)}},"*");},0);}});` +
+  // The annotation overlay (element / region / draw), the counterpart of
+  // openchamber's injected overlay script. One session at a time, opened by a
+  // start message from the host: it builds its own chrome in a closed shadow
+  // root (the page's CSS can neither reach it nor break it), swallows the
+  // page's own pointer sequence while it's up, and posts exactly one
+  // annotation message back — the payload, or null for cancelled. Colors ride
+  // the theme's CSS variables, which inherit into the shadow root.
+  ANNOT_SCRIPT +
+  `window.addEventListener("message",function(e){var d=e.data;if(e.source!==window.parent||!d||d.type!==${JSON.stringify(RENDER_PAGE_ANNOTATE_MESSAGE)})return;if(d.action==="start"){arStart(d.labels||{});}else if(AR){arEnd(null);}});` +
+  `window.addEventListener("message",function(e){var d=e.data;if(e.source!==window.parent||!d||d.type!==${JSON.stringify(RENDER_PAGE_CLEAR_SELECTION_MESSAGE)})return;L="";LE=true;if(window.getSelection){try{window.getSelection().removeAllRanges();}catch(x){}}});})();`
+
+// `codeg.render.submit` checks what it can in the page (the host re-checks the
+// waiting state, since a page can replace this script) and posts the
+// submission; the host's reply settles the promise. A state message from the
+// host ends the wait when it ended elsewhere (another window answered, or the
+// user dismissed the card).
+const ANSWER_SCRIPT =
+  `(function(){if(window.parent===window)return;var S=JSON.parse(document.getElementById("codeg-render-answer").textContent),I=0,R={};` +
+  `var g=window.codeg=window.codeg||{};var o=g.render={answer:S.answer===null?undefined:S.answer,submit:function(data,summary){return new Promise(function(res,rej){` +
+  `if(!S.waiting)return rej(new Error("This page is not waiting for an answer"));` +
+  `if(navigator.userActivation&&!navigator.userActivation.isActive)return rej(new Error("codeg.render.submit works only from a click"));` +
+  `if(typeof summary!=="string"||!summary.trim())return rej(new Error("summary is required: the choice in a few words"));` +
+  `var id=++I,v=data===undefined?null:data;try{var t=JSON.stringify(v);if(t&&t.length>16000)return rej(new Error("data must stay under 16000 characters as JSON"));}catch(x){return rej(new Error("data must be JSON-serializable"));}` +
+  `R[id]={res:res,rej:rej,data:v};try{window.parent.postMessage({type:${JSON.stringify(RENDER_PAGE_SUBMIT_MESSAGE)},id:id,summary:summary,data:v},"*");}catch(x){delete R[id];rej(x);}});}};` +
+  `window.addEventListener("message",function(e){var d=e.data,r;if(e.source!==window.parent||!d)return;` +
+  `if(d.type===${JSON.stringify(RENDER_PAGE_ANSWER_STATE_MESSAGE)}){S={waiting:d.waiting===true,answer:d.answer===undefined?null:d.answer};o.answer=S.answer===null?undefined:S.answer;return;}` +
+  `if(d.type===${JSON.stringify(RENDER_PAGE_SUBMIT_REPLY_MESSAGE)}&&R[d.id]){r=R[d.id];delete R[d.id];if(d.ok===false)r.rej(new Error(String(d.message||"The answer was not sent")));else{S={waiting:false,answer:r.data};o.answer=r.data;r.res();}}});})();`
+
+// JSON inside a script element: "<" is escaped so no "</script>" in the data
+// can close it.
+const scriptJson = (value: RenderPageAnswerState): string =>
+  JSON.stringify(value).replace(/</g, "\\u003c")
+
+// Comments and raw-text elements are blanked to the same length before the
+// head is located, so a "<head>" written inside a script or comment is never
+// where the bootstrap lands.
+const blankNonMarkup = (html: string): string =>
+  html.replace(
+    /<!--[\s\S]*?(?:-->|$)|<(script|style|textarea|title|template|noscript)\b[\s\S]*?(?:<\/\1\s*>|$)/gi,
+    (match) => " ".repeat(match.length)
+  )
+
+/** The document the frame loads: the agent's page with the bootstrap first in
+ *  its head. `answerState` is where the page stands on its answer when it
+ *  loads; later changes reach it as messages. */
+export function buildRenderPageDocument(
+  html: string,
+  theme: RenderPageTheme,
+  answerState: RenderPageAnswerState = { waiting: false, answer: null }
+): string {
+  const scan = blankNonMarkup(html)
+  const bootstrap = [
+    /<meta\s[^>]*charset/i.test(scan.slice(0, 4096))
+      ? ""
+      : '<meta charset="utf-8">',
+    /<meta\s[^>]*name\s*=\s*["']?viewport/i.test(scan)
+      ? ""
+      : '<meta name="viewport" content="width=device-width, initial-scale=1">',
+    `<style id="codeg-render-theme">${renderPageThemeCss(theme)}</style>`,
+    `<script>${BOOTSTRAP_SCRIPT}</script>`,
+    `<script type="application/json" id="codeg-render-answer">${scriptJson(answerState)}</script>`,
+    `<script>${ANSWER_SCRIPT}</script>`,
+  ].join("")
+  const headOpen = /<head(?:\s[^>]*)?>/i.exec(scan)
+  if (headOpen) {
+    const at = headOpen.index + headOpen[0].length
+    return html.slice(0, at) + bootstrap + html.slice(at)
+  }
+  const htmlOpen = /<html(?:\s[^>]*)?>/i.exec(scan)
+  if (htmlOpen) {
+    const at = htmlOpen.index + htmlOpen[0].length
+    return `${html.slice(0, at)}<head>${bootstrap}</head>${html.slice(at)}`
+  }
+  const doctype = /^\s*<!doctype[^>]*>/i.exec(scan)
+  if (doctype) {
+    const at = doctype[0].length
+    return `${html.slice(0, at)}<head>${bootstrap}</head>${html.slice(at)}`
+  }
+  return `<!doctype html><head>${bootstrap}</head>${html}`
+}
+
+export const renderPageThemeMessage = (theme: RenderPageTheme) => ({
+  type: RENDER_PAGE_THEME_MESSAGE,
+  ...theme,
+})
+
+export const renderPageAnswerStateMessage = (state: RenderPageAnswerState) => ({
+  type: RENDER_PAGE_ANSWER_STATE_MESSAGE,
+  ...state,
+})
+
+/** The host's reply to a page's submit; `message` set = the promise rejects
+ *  with it. */
+export const renderPageSubmitReply = (id: number, message?: string) =>
+  message === undefined
+    ? { type: RENDER_PAGE_SUBMIT_REPLY_MESSAGE, id, ok: true }
+    : { type: RENDER_PAGE_SUBMIT_REPLY_MESSAGE, id, ok: false, message }
+
+/** Tell the page to drop its selection (and not echo the removal back). */
+export const renderPageClearSelectionMessage = () => ({
+  type: RENDER_PAGE_CLEAR_SELECTION_MESSAGE,
+})
+
+export type RenderPageSubmit = {
+  kind: "submit"
+  id: number
+  summary: string
+  data: RenderPageAnswerData
+}
+
+export type RenderPageSelectionRect = {
+  x: number
+  y: number
+  width: number
+  height: number
+}
+
+// ── in-page annotations (element / region / draw) ─────────────────────
+//
+// Mirrors openchamber's annotation payload (its contract.ts), cut to what a
+// chat page can carry without a desktop capture path: no screenshot — the
+// prompt the host formats says so, exactly like openchamber's own web build.
+
+export interface RenderPageAnnotationElement {
+  /** A CSS selector good enough for the agent to find the node again (id
+   *  shortcut, then a ≤5-level path with nth-of-type disambiguation). */
+  selector: string
+  /** A snapshot of the node's own markup, capped — the agent's pages are
+   *  generated, so showing the tag is what stops a "make THIS bigger" note
+   *  from being applied to the whole document. */
+  html: string
+  /** The element's own visible text, whitespace-collapsed, capped. */
+  text: string
+  /** The whitelisted attributes the page saw (id/class/href/… each capped). */
+  attributes: Record<string, string>
+  /** The element's computed styles at pick time (openchamber's
+   *  BrowserElementTarget.computedStyle): the font/color/box evidence that
+   *  tells the agent what to change on THIS node instead of everywhere. */
+  styles: Record<string, string>
+  /** Viewport px, rounded at report time. */
+  bounds: RenderPageSelectionRect
+}
+
+export interface RenderPageAnnotationRegion {
+  id: string
+  rect: RenderPageSelectionRect
+}
+
+export interface RenderPageAnnotationStroke {
+  id: string
+  points: { x: number; y: number }[]
+  bounds: RenderPageSelectionRect
+}
+
+export interface RenderPageAnnotationPayload {
+  viewport: { width: number; height: number }
+  comment: string
+  elements: RenderPageAnnotationElement[]
+  regions: RenderPageAnnotationRegion[]
+  strokes: RenderPageAnnotationStroke[]
+}
+
+/** The chrome labels the overlay shows — the host localizes them, the page
+ *  only echoes them back (i18n keys: Folder.chat.renderPage.annotate.*). */
+export interface RenderPageAnnotationLabels {
+  element: string
+  region: string
+  draw: string
+  placeholder: string
+  send: string
+  cancel: string
+}
+
+/** Bounds the page may not exceed; a report that overshoots is dropped whole
+ *  rather than trusted, same posture as every other page message. A page built
+ *  by {@link buildRenderPageDocument} never trips them — its send clips
+ *  regions and strokes to these same bounds — so this only fires on a page
+ *  that replaced its own script. */
+const ANNOTATION_MAX_COMMENT = 4000
+const ANNOTATION_MAX_ELEMENTS = 8
+const ANNOTATION_MAX_REGIONS = 24
+const ANNOTATION_MAX_STROKES = 32
+const ANNOTATION_MAX_POINTS = 2000
+const ANNOTATION_MAX_SELECTOR = 300
+const ANNOTATION_MAX_HTML = 600
+const ANNOTATION_MAX_TEXT = 400
+const ANNOTATION_MAX_ATTRS = 16
+const ANNOTATION_MAX_STYLES = 22
+
+const fin = (v: unknown): v is number =>
+  typeof v === "number" && Number.isFinite(v)
+
+const readAnnotationRect = (v: unknown): RenderPageSelectionRect | null => {
+  if (!v || typeof v !== "object") return null
+  const r = v as Record<string, unknown>
+  if (!fin(r.x) || !fin(r.y) || !fin(r.width) || !fin(r.height)) return null
+  if (r.width < 0 || r.height < 0) return null
+  return { x: r.x, y: r.y, width: r.width, height: r.height }
+}
+
+/** Validate one annotation report field by field (the payload crosses the
+ *  page boundary; a page can replace its own bootstrap). */
+export function readRenderPageAnnotationPayload(
+  v: unknown
+): RenderPageAnnotationPayload | null {
+  if (!v || typeof v !== "object") return null
+  const d = v as Record<string, unknown>
+  const vp = d.viewport as Record<string, unknown> | null
+  if (!vp || typeof vp !== "object" || !fin(vp.width) || !fin(vp.height))
+    return null
+  if (
+    typeof d.comment !== "string" ||
+    d.comment.length > ANNOTATION_MAX_COMMENT
+  )
+    return null
+  const elements = d.elements,
+    regions = d.regions,
+    strokes = d.strokes
+  if (
+    !Array.isArray(elements) ||
+    !Array.isArray(regions) ||
+    !Array.isArray(strokes) ||
+    elements.length > ANNOTATION_MAX_ELEMENTS ||
+    regions.length > ANNOTATION_MAX_REGIONS ||
+    strokes.length > ANNOTATION_MAX_STROKES
+  )
+    return null
+  const outElements: RenderPageAnnotationElement[] = []
+  for (const e of elements as unknown[]) {
+    if (!e || typeof e !== "object") return null
+    const eRec = e as Record<string, unknown>
+    if (
+      typeof eRec.selector !== "string" ||
+      eRec.selector.length > ANNOTATION_MAX_SELECTOR ||
+      typeof eRec.html !== "string" ||
+      eRec.html.length > ANNOTATION_MAX_HTML ||
+      typeof eRec.text !== "string" ||
+      eRec.text.length > ANNOTATION_MAX_TEXT
+    )
+      return null
+    const attrs: Record<string, string> = {}
+    if (eRec.attributes && typeof eRec.attributes === "object") {
+      for (const [k, val] of Object.entries(
+        eRec.attributes as Record<string, unknown>
+      )) {
+        if (Object.keys(attrs).length >= ANNOTATION_MAX_ATTRS) return null
+        if (typeof val !== "string" || val.length > 200) return null
+        attrs[k] = val
+      }
+    }
+    const styles: Record<string, string> = {}
+    if (eRec.styles && typeof eRec.styles === "object") {
+      for (const [k, val] of Object.entries(
+        eRec.styles as Record<string, unknown>
+      )) {
+        if (Object.keys(styles).length >= ANNOTATION_MAX_STYLES) return null
+        if (typeof val !== "string" || val.length > 200) return null
+        styles[k] = val
+      }
+    }
+    const bounds = readAnnotationRect(eRec.bounds)
+    if (!bounds) return null
+    outElements.push({
+      selector: eRec.selector,
+      html: eRec.html,
+      text: eRec.text,
+      attributes: attrs,
+      styles,
+      bounds,
+    })
+  }
+  const outRegions: RenderPageAnnotationRegion[] = []
+  for (const rg of regions as unknown[]) {
+    if (!rg || typeof rg !== "object") return null
+    const rRec = rg as Record<string, unknown>
+    if (typeof rRec.id !== "string" || rRec.id.length > 40) return null
+    const rect = readAnnotationRect(rRec.rect)
+    if (!rect) return null
+    outRegions.push({ id: rRec.id, rect })
+  }
+  const outStrokes: RenderPageAnnotationStroke[] = []
+  for (const st of strokes as unknown[]) {
+    if (!st || typeof st !== "object") return null
+    const sRec = st as Record<string, unknown>
+    if (typeof sRec.id !== "string" || sRec.id.length > 40) return null
+    if (!Array.isArray(sRec.points) || sRec.points.length < 2) return null
+    const points: { x: number; y: number }[] = []
+    for (const p of sRec.points as unknown[]) {
+      if (points.length >= ANNOTATION_MAX_POINTS) return null
+      if (!p || typeof p !== "object") return null
+      const pRec = p as Record<string, unknown>
+      if (!fin(pRec.x) || !fin(pRec.y)) return null
+      points.push({ x: pRec.x, y: pRec.y })
+    }
+    const bounds = readAnnotationRect(sRec.bounds)
+    if (!bounds) return null
+    outStrokes.push({ id: sRec.id, points, bounds })
+  }
+  return {
+    viewport: { width: vp.width, height: vp.height },
+    comment: d.comment,
+    elements: outElements,
+    regions: outRegions,
+    strokes: outStrokes,
+  }
+}
+
+/** The text an annotation session places in the composer — the same English
+ *  body openchamber's prompt builder writes, so the agent's reading skill
+ *  transfers. Geometry is rounded; each kind numbers independently. */
+export function formatRenderPageAnnotation(
+  payload: RenderPageAnnotationPayload,
+  pageTitle: string
+): string {
+  const lines: string[] = [
+    "The user annotated the page below your request. Apply each note ONLY to the element, region, or drawing it marks — never to the whole page — in your next step.",
+  ]
+  const title = pageTitle.trim()
+  if (title) lines.push(`Page: ${title}`)
+  lines.push(
+    `Viewport: ${Math.round(payload.viewport.width)}x${Math.round(payload.viewport.height)}`,
+    "Screenshot: not attached"
+  )
+  const comment = payload.comment.trim()
+  if (comment) lines.push(`Comment: ${comment}`)
+  payload.elements.forEach((e, i) => {
+    lines.push(`Element ${i + 1}: ${e.selector}`)
+    if (e.html) lines.push(`- HTML: ${e.html}`)
+    if (e.text) lines.push(`- Text: ${e.text}`)
+    const attrs = Object.entries(e.attributes)
+    if (attrs.length)
+      lines.push(
+        `- Attributes: ${attrs.map(([k, val]) => `${k}="${val}"`).join(" ")}`
+      )
+    const b = e.bounds
+    lines.push(
+      `- Bounds: x=${Math.round(b.x)}, y=${Math.round(b.y)}, width=${Math.round(b.width)}, height=${Math.round(b.height)}`
+    )
+    const st = e.styles
+    if (Object.keys(st).length) {
+      lines.push(
+        `- Styles: display=${st.display ?? ""}; position=${st.position ?? ""}; font=${st.fontWeight ?? ""} ${st.fontSize ?? ""} / ${st.lineHeight ?? ""} ${st.fontFamily ?? ""}; color=${st.color ?? ""}; background=${st.backgroundColor ?? ""}`
+      )
+    }
+  })
+  payload.regions.forEach((rg, i) => {
+    const r = rg.rect
+    lines.push(
+      `Region ${i + 1}: x=${Math.round(r.x)}, y=${Math.round(r.y)}, width=${Math.round(r.width)}, height=${Math.round(r.height)}`
+    )
+  })
+  payload.strokes.forEach((st, i) => {
+    const b = st.bounds
+    lines.push(
+      `Drawing ${i + 1}: ${st.points.length} points over x=${Math.round(b.x)}, y=${Math.round(b.y)}, width=${Math.round(b.width)}, height=${Math.round(b.height)}`
+    )
+  })
+  return lines.join("\n")
+}
+
+/** Host → page: open the overlay with these chrome labels, or close it. */
+export const renderPageAnnotateMessage = (
+  action: "start" | "stop",
+  labels?: RenderPageAnnotationLabels
+) =>
+  labels
+    ? { type: RENDER_PAGE_ANNOTATE_MESSAGE, action, labels }
+    : { type: RENDER_PAGE_ANNOTATE_MESSAGE, action }
+
+export type RenderPageFrameMessage =
+  | { kind: "size"; height: number }
+  | { kind: "open-link"; url: string }
+  | RenderPageSubmit
+  /** The page's selection changed; empty `text` = it went away. `rect` is in
+   *  the page's own viewport coordinates — the frame fits the page without
+   *  vertical scroll, so they read directly against the frame box. */
+  | { kind: "selection"; text: string; rect: RenderPageSelectionRect | null }
+  /** Escape was pressed while a selection was up and nothing in the page
+   *  consumed it; the host closes its quote bubble. */
+  | { kind: "selection-escape" }
+  /** One annotation session ended: a payload to place in the composer, or a
+   *  null payload when the user cancelled. */
+  | { kind: "annotation"; payload: RenderPageAnnotationPayload | null }
+
+/** The message a page's bootstrap posted, or null for anything else. Hand-
+ *  checked rather than zod-typed: the payloads are three fixed shapes written
+ *  by our own bootstrap. */
+export function readRenderPageFrameMessage(
+  data: unknown
+): RenderPageFrameMessage | null {
+  if (!data || typeof data !== "object") return null
+  const d = data as Record<string, unknown>
+  switch (d.type) {
+    case RENDER_PAGE_SIZE_MESSAGE:
+      return typeof d.height === "number" &&
+        Number.isFinite(d.height) &&
+        d.height > 0
+        ? { kind: "size", height: d.height }
+        : null
+    case RENDER_PAGE_OPEN_LINK_MESSAGE:
+      return typeof d.url === "string" && /^https?:\/\//i.test(d.url)
+        ? { kind: "open-link", url: d.url }
+        : null
+    case RENDER_PAGE_SUBMIT_MESSAGE:
+      return typeof d.id === "number" && Number.isInteger(d.id) && d.id > 0
+        ? {
+            kind: "submit",
+            id: d.id,
+            summary: typeof d.summary === "string" ? d.summary : "",
+            data: d.data === undefined ? null : d.data,
+          }
+        : null
+    case RENDER_PAGE_SELECTION_MESSAGE: {
+      if (
+        typeof d.text !== "string" ||
+        d.text.length > RENDER_PAGE_SELECTION_MAX
+      )
+        return null
+      if (!d.text) return { kind: "selection", text: "", rect: null }
+      const r = d.rect as Record<string, unknown> | null
+      if (!r || typeof r !== "object") return null
+      const x = r.x,
+        y = r.y,
+        width = r.width,
+        height = r.height
+      if (
+        typeof x !== "number" ||
+        typeof y !== "number" ||
+        typeof width !== "number" ||
+        typeof height !== "number" ||
+        !Number.isFinite(x) ||
+        !Number.isFinite(y) ||
+        !Number.isFinite(width) ||
+        !Number.isFinite(height) ||
+        width < 0 ||
+        height < 0
+      )
+        return null
+      return {
+        kind: "selection",
+        text: d.text,
+        rect: { x, y, width, height },
+      }
+    }
+    case RENDER_PAGE_SELECTION_ESCAPE_MESSAGE:
+      return { kind: "selection-escape" }
+    case RENDER_PAGE_ANNOTATION_MESSAGE: {
+      // A null payload is the cancel; a malformed one is not a report at all.
+      if (d.payload === null) return { kind: "annotation", payload: null }
+      const payload = readRenderPageAnnotationPayload(d.payload)
+      return payload ? { kind: "annotation", payload } : null
+    }
+    default:
+      return null
+  }
+}
+
+export const clampRenderPageHeight = (height: number): number =>
+  Math.min(
+    RENDER_PAGE_MAX_HEIGHT,
+    Math.max(RENDER_PAGE_MIN_HEIGHT, Math.ceil(height))
+  )
+
+/** The answer submission to `acp_answer_render_page` from a page submit. */
+export const renderPageAnswerFromSubmit = (
+  submit: RenderPageSubmit
+): RenderPageAnswer => ({
+  summary: submit.summary,
+  data: submit.data,
+  declined: false,
+})
+
+// ── persisted tool-call payloads (in-stream record card) ──────────────
+
+/** The parsed `render_page` tool input, as persisted on the tool call. */
+export interface RenderPageToolInput {
+  html: string
+  title: string
+  awaitAnswer: boolean
+}
+
+/** Lenient parse of the tool input. The only hard requirement is `html` —
+ *  a call whose input hasn't finished streaming, or that a truncated
+ *  transcript cut, reads as "nothing to draw" (null) rather than a broken
+ *  card. `title`/`awaitAnswer` collapse to the tool's own defaults. */
+export function parseRenderPageInput(
+  input: string | null | undefined
+): RenderPageToolInput | null {
+  if (!input) return null
+  let parsed: unknown
+  try {
+    parsed = JSON.parse(input)
+  } catch {
+    return null
+  }
+  if (!parsed || typeof parsed !== "object") return null
+  const d = parsed as Record<string, unknown>
+  const html = typeof d.html === "string" ? d.html : ""
+  if (!html.trim()) return null
+  return {
+    html,
+    title: typeof d.title === "string" ? d.title.trim() : "",
+    awaitAnswer: d.awaitAnswer === true,
+  }
+}
+
+/** What a settled `render_page` call ended as, read back from its output. */
+export type RenderPageToolOutcome =
+  | { kind: "shown" }
+  | { kind: "answered"; summary: string }
+  | { kind: "declined" }
+
+function outcomeFromEnvelope(
+  d: Record<string, unknown>
+): RenderPageToolOutcome | null {
+  if (d.shown === true) return { kind: "shown" }
+  if (d.answered === true) {
+    return {
+      kind: "answered",
+      summary: typeof d.summary === "string" ? d.summary : "",
+    }
+  }
+  if (d.answered === false || d.declined === true) return { kind: "declined" }
+  return null
+}
+
+function outcomeFromText(text: string): RenderPageToolOutcome | null {
+  if (/The user answered on the page/i.test(text)) {
+    // The companion's note line: "summary: <the choice in a few words>".
+    const m = text.match(/^summary:[ \t](.*)$/m)
+    return { kind: "answered", summary: (m?.[1] ?? "").trim() }
+  }
+  if (/did not answer on the page/i.test(text)) return { kind: "declined" }
+  if (/Shown to the user in the chat/i.test(text)) return { kind: "shown" }
+  return null
+}
+
+/**
+ * Reconstruct the settled outcome from the persisted tool result.
+ *
+ * Primary shape — the `structuredContent` envelope the companion returns
+ * (`{shown:true,…}` for a show-only call; `{answered,summary,data,note}` for
+ * an awaited one). Fallback — the `content[0].text` note itself, for any CLI
+ * that stores the text rather than the structured payload (see
+ * `render_page_answer_result` / `render_shown_result`). Returns `null` while
+ * the call is still in flight (no output).
+ */
+export function parseRenderPageOutcome(
+  output: string | null | undefined
+): RenderPageToolOutcome | null {
+  if (!output || !output.trim()) return null
+  try {
+    const parsed = JSON.parse(output) as unknown
+    if (parsed && typeof parsed === "object") {
+      const d = parsed as Record<string, unknown>
+      const direct = outcomeFromEnvelope(d)
+      if (direct) return direct
+      const inner = d.structuredContent
+      if (inner && typeof inner === "object") {
+        const fromInner = outcomeFromEnvelope(inner as Record<string, unknown>)
+        if (fromInner) return fromInner
+      }
+      // MCP result wrapper: pull the text parts out and read the notes.
+      const parts = Array.isArray(d.content) ? d.content : null
+      if (parts) {
+        const text = parts
+          .map((p) =>
+            p &&
+            typeof p === "object" &&
+            typeof (p as Record<string, unknown>).text === "string"
+              ? ((p as Record<string, unknown>).text as string)
+              : ""
+          )
+          .join("\n")
+        const fromText = outcomeFromText(text)
+        if (fromText) return fromText
+      }
+    }
+  } catch {
+    // Not JSON — a plain-text output; fall through to the note matchers.
+  }
+  return outcomeFromText(output)
+}
diff --git a/src/lib/snapshot-denormalize.ts b/src/lib/snapshot-denormalize.ts
index 0b7dce9e07..2845fc32bd 100644
--- a/src/lib/snapshot-denormalize.ts
+++ b/src/lib/snapshot-denormalize.ts
@@ -9,6 +9,7 @@ import type {
   LiveSessionSnapshot,
   PendingPlanApprovalState,
   PendingQuestionState,
+  PendingRenderPageState,
   PromptCapabilitiesInfo,
   RemoteControlInfo,
   SessionConfigOptionInfo,
@@ -70,6 +71,10 @@ export interface SnapshotPatch {
    *  so a client attaching mid-turn re-renders the plan-approval card. `null`
    *  when no approval is pending. */
   pendingPlanApproval: PendingPlanApprovalState | null
+  /** Awaiting-answer `render_page` carried by the snapshot, so a client
+   *  attaching mid-turn re-renders the page card. `null` when no page is
+   *  awaiting an answer. */
+  pendingRenderPage: PendingRenderPageState | null
   /** In-flight user prompt carried by the snapshot, so a client attaching
    *  mid-turn can synthesize the user turn (Bug-2 / cross-client viewing).
    *  `null` when no turn is in flight. */
@@ -167,6 +172,8 @@ export function denormalizeSnapshot(wire: LiveSessionSnapshot): SnapshotPatch {
     pendingAskQuestion: wire.pending_question ?? null,
     // The snapshot shape already matches PendingPlanApprovalState; pass through.
     pendingPlanApproval: wire.pending_plan_approval ?? null,
+    // Same pass-through for the awaiting-answer rendered page.
+    pendingRenderPage: wire.pending_render_page ?? null,
     pendingUserMessage: wire.pending_user_message
       ? {
           messageId: wire.pending_user_message.message_id,
diff --git a/src/lib/tool-call-normalization.ts b/src/lib/tool-call-normalization.ts
index 75cc9d185e..5d3940ae0c 100644
--- a/src/lib/tool-call-normalization.ts
+++ b/src/lib/tool-call-normalization.ts
@@ -158,6 +158,12 @@ const EXACT_TOOL_NAME_ALIASES: Record<string, string> = {
   check_user_feedback: "check_user_feedback",
   "mcp__codeg-mcp__check_user_feedback": "check_user_feedback",
   mcp__codeg__check_user_feedback: "check_user_feedback",
+  // codeg-mcp rendered-page tool (server prefix varies by host; the suffix
+  // rule in `normalizeToolName` covers the other separators). Its own
+  // canonical name — the in-place card in `content-parts-renderer` keys on it.
+  render_page: "render_page",
+  "mcp__codeg-mcp__render_page": "render_page",
+  mcp__codeg__render_page: "render_page",
   // OpenCode
   // OpenCode 2 renamed `apply_patch` to `patch` (the edit tool its `gpt-*`
   // models get instead of edit/write) and `task` to `subagent`
@@ -521,6 +527,10 @@ function inferFromInput(
   // stream resolves to "question" before the tool result arrives.
   if (hasAnyKey(parsed, ["question", "questions"])) return "question"
 
+  // `awaitAnswer` is the codeg-mcp `render_page` payload's own key — the live
+  // stream resolves to "render_page" before the tool result arrives.
+  if (hasAnyKey(parsed, ["awaitAnswer"])) return "render_page"
+
   // `subagent_type` is the Claude Code Task shape; `subagentType` is Cursor's
   // task tool (a protobuf-es oneof object on the live wire).
   if (hasAnyKey(parsed, ["subagent_type", "subagentType"])) {
@@ -669,6 +679,11 @@ function normalizeUncached(toolName: string): string {
   // freeform matcher below intentionally does NOT catch the underscore form.
   if (/[^a-z0-9]ask_user_question$/.test(canonical)) return "question"
 
+  // codeg-mcp rendered-page tool. Same host-prefix story as the ask tool
+  // above (`mcp__<server>__render_page`, `<server>/render_page`, …) — collapse
+  // every separator to the canonical name the in-place card dispatches on.
+  if (/[^a-z0-9]render_page$/.test(canonical)) return "render_page"
+
   // codeg-mcp live-feedback poll. Same host-prefix story as the delegation tools
   // (`mcp__<server>__check_user_feedback`, `<server>/check_user_feedback`, …) —
   // collapse every separator to the canonical name the renderer dispatches on.
diff --git a/src/lib/types.ts b/src/lib/types.ts
index 0ec29db6a8..31c0cc02c0 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -1677,6 +1677,30 @@ export interface PlanApprovalAnswer {
   feedback?: string | null
 }
 
+// --- render_page (mirror of Rust `crate::acp::render_page`) ---
+
+/** Awaiting-answer `render_page` on the session (mirror of
+ *  `PendingRenderPageState`). The agent is blocked until the user submits on
+ *  the page or dismisses the card. `html` doubles as the identity an in-place
+ *  tool card matches against to know it is the live, answerable one. */
+export interface PendingRenderPageState {
+  page_id: string
+  title: string
+  html: string
+  created_at: string
+}
+
+/** The user's submission to `acp_answer_render_page` (mirror of Rust
+ *  `RenderPageAnswer`). `summary` is the page's few-word recap (what the
+ *  page's script passed to `codeg.render.submit`, or the card's fallback);
+ *  `data` is the JSON the page submitted; `declined` is set when the user
+ *  dismissed the card without answering. camelCase on the wire. */
+export interface RenderPageAnswer {
+  summary?: string | null
+  data?: unknown
+  declined: boolean
+}
+
 export interface SessionModeInfo {
   id: string
   name: string
@@ -3390,6 +3414,27 @@ export type AcpEvent =
       type: "plan_approval_resolved"
       approval_id: string
     }
+  /**
+   * An agent called `render_page` with `awaitAnswer`: the self-contained HTML
+   * page is live and the agent is blocked on an answer submitted on it.
+   * Broadcast so every client renders the pinned page card above the input;
+   * also captured in the snapshot for mid-turn attach. Only awaiting pages
+   * broadcast — a show-only page never reaches the wire as an event.
+   */
+  | {
+      type: "render_page_request"
+      page_id: string
+      title: string
+      html: string
+    }
+  /**
+   * A pending rendered page was answered (from any client) or canceled (tool
+   * call aborted / connection drained). Clients clear the matching card.
+   */
+  | {
+      type: "render_page_resolved"
+      page_id: string
+    }
   /**
    * The agent's effective settings (env vars / model provider / native config)
    * changed AFTER this connection spawned, so the running process is still on
@@ -3769,6 +3814,9 @@ export interface LiveSessionSnapshot {
   /** Awaiting-decision Grok `exit_plan_mode` approval, recoverable on mid-turn
    *  attach. Absent (omitted) when no approval is pending. */
   pending_plan_approval?: PendingPlanApprovalState | null
+  /** Awaiting-answer `render_page`, recoverable on mid-turn attach. Absent
+   *  (omitted) when no page is awaiting an answer. */
+  pending_render_page?: PendingRenderPageState | null
   /** In-flight user prompt for the current turn — lets a client attaching
    *  mid-turn render the user turn. Absent (omitted) when no turn is in flight. */
   pending_user_message?: {