@hienlh/ppm 0.23.16 → 0.23.18

package/src/providers/codex-app-server/codex-provider.ts

@@ -51,6 +51,7 @@ import { getOrFetchUsage, registerUsageSource } from "../../services/provider-us
 import { codexUsageSource } from "./codex-usage-source.ts";
 import { AMBIENT_ACCOUNT_KEY } from "../../services/provider-usage/usage-source.ts";
 import { redactTruncate } from "./codex-redact.ts";
+import { buildUserInputResponse, normalizeCodexQuestions } from "./codex-user-input.ts";
 import { localizeRollout } from "./codex-rollout-transfer.ts";
 import { getRolloutMessagesAsync } from "./codex-history-async.ts";
 import {
@@ -62,7 +63,6 @@ import type {
   ModelListResponse,
   ServerRequest,
   JsonRpcNotification,
-  ToolRequestUserInputResponse,
   Thread,
   UserInput,
   CodexSkill,
@@ -328,24 +328,6 @@ function approvalToolLabel(method: string, params: unknown): string {
   return String(p.tool ?? "Tool");
 }
 
-function buildUserInputResponse(questions: unknown, data: unknown): ToolRequestUserInputResponse {
-  const answers: ToolRequestUserInputResponse["answers"] = {};
-  if (data && typeof data === "object" && !Array.isArray(data)) {
-    for (const [k, v] of Object.entries(data as Record<string, unknown>)) {
-      answers[k] = { answers: Array.isArray(v) ? v.map(String) : [String(v)] };
-    }
-    return { answers };
-  }
-  const arr = Array.isArray(data) ? data : data != null ? [data] : [];
-  const qs = Array.isArray(questions) ? questions : [];
-  qs.forEach((q, i) => {
-    const qid = (q && typeof q === "object" && ((q as any).id ?? (q as any).questionId)) || String(i);
-    const a = arr[i];
-    answers[qid] = { answers: a != null ? [String(a)] : [] };
-  });
-  return { answers };
-}
-
 /**
  * Codex provider — implements AIProvider directly (mirrors claude-agent-sdk),
  * driving `codex app-server` over JSON-RPC. Per-session live subprocess map;
@@ -1160,7 +1142,7 @@ export class CodexAppServerProvider implements AIProvider {
       const ppmReqId = crypto.randomUUID();
       const questions = (req.params as { questions?: unknown })?.questions;
       live.pendingApprovals.set(ppmReqId, { codexId: req.id, method, questions });
-      live.channel.push({ type: "approval_request", requestId: ppmReqId, tool: "AskUserQuestion", input: redactTruncate(req.params) });
+      live.channel.push({ type: "approval_request", requestId: ppmReqId, tool: "AskUserQuestion", input: { questions: normalizeCodexQuestions(questions) } });
       return;
     }
     // permissions/* response is a granted-profile, not a decision → decline.
@@ -1174,7 +1156,7 @@ export class CodexAppServerProvider implements AIProvider {
       if (!pending) continue;
       live.pendingApprovals.delete(requestId);
       if (pending.method === "item/tool/requestUserInput") {
-        this.respondOnce(live, pending.codexId, buildUserInputResponse(pending.questions, data));
+        this.respondOnce(live, pending.codexId, buildUserInputResponse(pending.questions, approved ? data : undefined));
       } else if (isApprovalMethod(pending.method)) {
         this.respondOnce(live, pending.codexId, decisionFor(pending.method as ApprovalMethod, approved));
       }

package/src/providers/codex-app-server/codex-rollout-items.ts

@@ -1,5 +1,6 @@
 import type { ChatEvent } from "../provider.interface.ts";
 import { redactTruncate } from "./codex-redact.ts";
+import { codexAsyncQuestionEvent } from "./codex-user-input.ts";
 import { parseSubagentActivity, type SubagentActivity } from "./codex-subagent-thread.ts";
 import { changeToToolUse, rolloutFileChanges } from "./codex-patch.ts";
 
@@ -161,6 +162,8 @@ export function mapRolloutItem(item: unknown): RolloutItemMapping {
     return text ? { kind: "user", text } : { kind: "ignore" };
   }
   if (type === "AgentMessage") {
+    const question = codexAsyncQuestionEvent(it);
+    if (question) return { kind: "events", events: [question] };
     const text = textFrom(it.content);
     return text ? { kind: "assistant", text } : { kind: "ignore" };
   }

package/src/providers/codex-app-server/codex-thread-params.ts

@@ -116,6 +116,7 @@ export function dbToolsMcpEnv(access: DbToolsMcpAccess | undefined): Record<stri
 export function buildThreadParams(input: ThreadParamsInput): CodexThreadParams {
   const instructions = input.developerInstructions?.trim();
   const config = {
+    "features.default_mode_request_user_input": true,
     ...(input.configOverrides?.config ?? {}),
     ...designMcpConfig(input.designMcp),
     ...tabToolsMcpConfig(input.tabToolsMcp),

package/src/providers/codex-app-server/codex-user-input.ts

@@ -0,0 +1,41 @@
+import type { ChatEvent } from "../provider.interface.ts";
+import { ASYNC_QUESTION_TOOL, type ChatQuestion } from "../../shared/chat-questions.ts";
+import type { ToolRequestUserInputResponse } from "./codex-protocol.ts";
+
+export function normalizeCodexQuestions(value: unknown): ChatQuestion[] {
+  if (!Array.isArray(value)) return [];
+  return value.flatMap((value, index) => {
+    if (!value || typeof value !== "object") return [];
+    const question = typeof value.question === "string" ? value.question : value.title;
+    if (typeof question !== "string" || !question.trim()) return [];
+    const options = Array.isArray(value.options) ? value.options.flatMap((option: unknown) => {
+      if (typeof option === "string") return [{ label: option }];
+      if (!option || typeof option !== "object" || !("label" in option) || typeof option.label !== "string") return [];
+      return [{ label: option.label, ...("description" in option && typeof option.description === "string" ? { description: option.description } : {}) }];
+    }) : [];
+    return [{ id: typeof value.id === "string" ? value.id : String(index), question,
+      ...(typeof value.header === "string" ? { header: value.header } : {}), options }];
+  });
+}
+
+export function codexAsyncQuestionEvent(item: Record<string, unknown>): ChatEvent | null {
+  if (item.type !== "agentMessage" && item.type !== "AgentMessage") return null;
+  const questions = normalizeCodexQuestions(item.questions);
+  if (typeof item.id !== "string" || !questions.length) return null;
+  return { type: "tool_use", tool: ASYNC_QUESTION_TOOL, toolUseId: item.id, input: { questions } };
+}
+
+export function buildUserInputResponse(questions: unknown, data: unknown): ToolRequestUserInputResponse {
+  const answers: ToolRequestUserInputResponse["answers"] = {};
+  if (!data || typeof data !== "object") return { answers };
+  normalizeCodexQuestions(questions).forEach((question, index) => {
+    const id = question.id!;
+    const value = Array.isArray(data) ? data[index]
+      : Object.hasOwn(data, id) ? (data as Record<string, unknown>)[id]
+      : Object.hasOwn(data, question.question) ? (data as Record<string, unknown>)[question.question] : undefined;
+    if (value != null) Object.defineProperty(answers, id, {
+      value: { answers: Array.isArray(value) ? value.map(String) : [String(value)] }, enumerable: true,
+    });
+  });
+  return { answers };
+}

package/src/services/port-forward/forward-hop.ts

@@ -25,6 +25,7 @@
  */
 import type { ServerWebSocket } from "bun";
 import { framingOrigins, letOriginsFrame } from "./frame-ancestors.ts";
+import { PREVIEW_NAVIGATION_PATH, previewNavigationScript, withPreviewNavigation } from "./preview-navigation.ts";
 
 export type Loopback = "127.0.0.1" | "::1";
 /** IPv6 first: the order a browser on the host tries `localhost` in. */
@@ -170,6 +171,7 @@ export function startForwardHop(targetPort: number): ForwardHop {
   let upstreamHost: Loopback | null = null;
   /** The Host the forward's public URL sends, lower case and without a default port. */
   let publicHost: string | null = null;
+  let publicOrigin = "";
   const sockets = new Set<ServerWebSocket<HopSocket>>();
 
   /** The loopback to dial; re-resolved when the last one refused, as a restarted dev server may bind the other family. */
@@ -180,6 +182,13 @@ export function startForwardHop(targetPort: number): ForwardHop {
 
   async function proxyHttp(req: Request): Promise<Response> {
     const url = new URL(req.url);
+    const framers = framingOrigins();
+    if (url.pathname === PREVIEW_NAVIGATION_PATH && req.method === "GET") {
+      return new Response(previewNavigationScript(framers), { headers: { "content-type": "text/javascript", "cache-control": "no-store" } });
+    }
+    const documentRequest = framers.length > 0 && req.method === "GET"
+      && (req.headers.get("sec-fetch-dest") === "iframe" || req.headers.get("sec-fetch-dest") === "document"
+        || !!req.headers.get("accept")?.includes("text/html"));
     const headers = upstreamRequestHeaders(req.headers, targetPort, req.headers.get("host"));
     const body = req.method === "GET" || req.method === "HEAD" ? undefined : await req.arrayBuffer();
     for (const refresh of [false, true]) {
@@ -188,14 +197,19 @@ export function startForwardHop(targetPort: number): ForwardHop {
       try {
         const res = await fetch(`http://${hostPart(host)}:${targetPort}${url.pathname}${url.search}`, {
           method: req.method, headers, body, redirect: "manual", signal: req.signal,
-          // Pass the bytes through as they are: a body Bun had decoded would still carry the
-          // upstream's Content-Encoding, and the browser would decode it a second time.
-          decompress: false,
+          // Decode navigations for HTML instrumentation; other responses stay byte-for-byte.
+          decompress: documentRequest,
         });
         const nullBody = NULL_BODY_STATUS.has(res.status) || req.method === "HEAD";
-        return new Response(nullBody ? null : res.body, {
-          status: res.status, statusText: res.statusText, headers: downstreamResponseHeaders(res.headers, targetPort, framingOrigins()),
+        const responseHeaders = downstreamResponseHeaders(res.headers, targetPort, framers);
+        if (documentRequest && res.headers.has("content-encoding")) {
+          responseHeaders.delete("content-encoding");
+          responseHeaders.delete("content-length");
+        }
+        const response = new Response(nullBody ? null : res.body, {
+          status: res.status, statusText: res.statusText, headers: responseHeaders,
         });
+        return documentRequest && !nullBody ? withPreviewNavigation(response, publicOrigin) : response;
       } catch (error) {
         // Only a refused connection is retried: anything later may have reached the dev
         // server already, and sending a POST twice is worse than a 502.
@@ -284,6 +298,7 @@ export function startForwardHop(targetPort: number): ForwardHop {
     targetPort,
     setPublicUrl(url) {
       publicHost = new URL(url).host;
+      publicOrigin = new URL(url).origin;
     },
     stop() {
       if (stopped) return;

package/src/services/port-forward/preview-navigation.ts

@@ -0,0 +1,45 @@
+/** Served from the forward's own origin; no inline-script CSP exception is needed. */
+export const PREVIEW_NAVIGATION_PATH = "/__ppm_preview_navigation__.js";
+
+export function previewNavigationScript(origins: readonly string[]): string {
+  return `(() => {
+    if (parent === window) return;
+    const origins = ${JSON.stringify(origins)};
+    const report = () => {
+      for (const origin of origins) parent.postMessage({ ppm: "web-preview-navigation", url: location.href }, origin);
+    };
+    for (const name of ["pushState", "replaceState"]) {
+      const original = history[name];
+      history[name] = function(...args) { const result = original.apply(this, args); report(); return result; };
+    }
+    addEventListener("popstate", report);
+    addEventListener("hashchange", report);
+    addEventListener("pageshow", report);
+    report();
+  })();`;
+}
+
+/** Stream the document through the HTML parser, preserving the application's scripts and CSP. */
+export function withPreviewNavigation(response: Response, origin: string): Response {
+  if (!response.headers.get("content-type")?.toLowerCase().startsWith("text/html")
+    || response.status !== 200 || response.headers.has("content-disposition")) return response;
+  for (const header of ["content-length", "etag", "last-modified", "content-md5"]) response.headers.delete(header);
+  response.headers.set("cache-control", "no-store");
+  let inserted = false;
+  const script = `<script src="${origin}${PREVIEW_NAVIGATION_PATH}"></script>`;
+  const insert = (element: { before(content: string, options: { html: boolean }): void }) => {
+    if (inserted) return;
+    inserted = true;
+    // Absolute URL also works when the app sets a <base> pointing elsewhere.
+    element.before(script, { html: true });
+  };
+  return new HTMLRewriter().on("head", {
+    element(element) {
+      if (inserted) return;
+      inserted = true;
+      element.prepend(script, { html: true });
+    },
+  }).on("body, script", { element: insert }).onDocument({
+    end(end) { if (!inserted) end.append(script, { html: true }); },
+  }).transform(response);
+}

package/src/shared/chat-questions.ts

@@ -0,0 +1,19 @@
+export interface ChatQuestion {
+  id?: string;
+  question: string;
+  header?: string;
+  options: { label: string; description?: string }[];
+  multiSelect?: boolean;
+}
+
+export const ASYNC_QUESTION_TOOL = "RequestUserInput";
+
+export function questionReplyPrefix(itemId: string): string {
+  return `Answers to Codex question ${encodeURIComponent(itemId)}:\n`;
+}
+
+export function formatQuestionReply(itemId: string, questions: ChatQuestion[], answers?: Record<string, string>): string {
+  return questionReplyPrefix(itemId) + (answers
+    ? questions.map((question) => `${question.question}\n${answers[question.id ?? question.question] ?? ""}`).join("\n\n")
+    : "Skipped by the user.");
+}

package/src/web/components/chat/async-question-card.tsx

@@ -0,0 +1,24 @@
+import { createContext, useContext } from "react";
+import type { ChatMessage } from "../../../types/chat";
+import { formatQuestionReply, questionReplyPrefix, type ChatQuestion } from "../../../shared/chat-questions";
+import { QuestionCard } from "./question-card";
+
+export const AsyncQuestionContext = createContext<{
+  messages: ChatMessage[];
+  onSend?: (content: string) => void;
+}>({ messages: [] });
+
+export function AsyncQuestionCard({ itemId, questions }: { itemId: string; questions: ChatQuestion[] }) {
+  const { messages, onSend } = useContext(AsyncQuestionContext);
+  const prefix = questionReplyPrefix(itemId);
+  const reply = messages.find((message) => message.role === "user" && message.content.startsWith(prefix));
+  if (reply || !onSend) return (
+    <div className="rounded-lg border border-border bg-surface p-3 text-sm whitespace-pre-wrap">
+      {reply ? reply.content.slice(prefix.length) : questions.map((question) => question.question).join("\n")}
+      <div className="mt-2 text-xs text-text-secondary">{reply ? "Response sent" : "Connect to answer this question"}</div>
+    </div>
+  );
+  return <QuestionCard questions={questions} autoFocus={false}
+    onSubmit={(answers) => onSend(formatQuestionReply(itemId, questions, answers))}
+    onSkip={() => onSend(formatQuestionReply(itemId, questions))} />;
+}

package/src/web/components/chat/chat-tab.tsx

@@ -1,4 +1,5 @@
 import { useState, useCallback, useRef, useEffect, useMemo } from "react";
+import { AsyncQuestionContext } from "./async-question-card";
 import { Loader2, Upload, X } from "@/lib/icons";
 import { toast } from "sonner";
 import { api, projectUrl } from "@/lib/api-client";
@@ -1315,7 +1316,7 @@ function ChatTabContent({ metadata, tabId, onNewSession, onFork, historyFilter }
             <span>Starting conversation...</span>
           </div>
         </div>
-      ) : <SessionChangesContext.Provider value={sessionChangesValue}><MessageList
+      ) : <AsyncQuestionContext.Provider value={{ messages: renderedMessages, onSend: isConnected ? (content) => sendMessage(content, { permissionMode }) : undefined }}><SessionChangesContext.Provider value={sessionChangesValue}><MessageList
         messages={renderedMessages}
         onExpandCompact={expandCompact}
         isCompactExpanded={isCompactExpanded}
@@ -1346,7 +1347,7 @@ function ChatTabContent({ metadata, tabId, onNewSession, onFork, historyFilter }
         onDismissMessage={dismissMessage}
         onClearErrors={clearErrors}
         bashPartialOutput={bashPartialOutput}
-      /></SessionChangesContext.Provider>}
+      /></SessionChangesContext.Provider></AsyncQuestionContext.Provider>}
 
       {/* Agents still working — pinned here so it is the last thing under the conversation */}
       <RunningAgentsBar

package/src/web/components/chat/message-events.tsx

@@ -12,6 +12,8 @@ import type { SessionPhase } from "../../../types/api";
 import type { BashPartialEntry } from "../../hooks/use-chat";
 import { ToolCard } from "./tool-cards";
 import { MarkdownContent } from "./message-markdown";
+import { AsyncQuestionCard } from "./async-question-card";
+import { ASYNC_QUESTION_TOOL, type ChatQuestion } from "../../../shared/chat-questions";
 
 /**
  * Renders events in order — consecutive text events merged into one bubble,
@@ -163,6 +165,10 @@ export function InterleavedEvents({ events, isStreaming, projectName, bashPartia
             </div>
           );
         }
+        if (group.tool.type === "tool_use" && group.tool.tool === ASYNC_QUESTION_TOOL && !group.tool.parentToolUseId) {
+          const input = group.tool.input as { questions: ChatQuestion[] };
+          return <AsyncQuestionCard key={group.tool.toolUseId} itemId={group.tool.toolUseId!} questions={input.questions} />;
+        }
         return <ToolCard key={`tool-${i}`} tool={group.tool} result={group.result} completed={group.completed} projectName={projectName} bashPartialOutput={bashPartialOutput} />;
       })}
     </>

package/src/web/components/chat/question-card.tsx

@@ -1,4 +1,5 @@
 import { useState, useCallback, useMemo, useEffect, useRef } from "react";
+import type { ChatQuestion } from "../../../shared/chat-questions";
 
 /* ── Types ── */
 export interface QuestionOption {
@@ -6,17 +7,13 @@ export interface QuestionOption {
   description?: string;
 }
 
-export interface Question {
-  question: string;
-  header?: string;
-  options: QuestionOption[];
-  multiSelect?: boolean;
-}
+export type Question = ChatQuestion;
 
 interface QuestionCardProps {
   questions: Question[];
   onSubmit: (answers: Record<string, string>) => void;
   onSkip: () => void;
+  autoFocus?: boolean;
 }
 
 /* ── Hook: form state ── */
@@ -81,6 +78,7 @@ function useQuestionKeyboard(config: {
   onSubmit: () => void;
   customInputRef: React.RefObject<HTMLInputElement | null>;
   enabled: boolean;
+  autoFocus: boolean;
 }) {
   const [focusedOption, setFocusedOption] = useState(0);
   const containerRef = useRef<HTMLDivElement>(null);
@@ -139,7 +137,7 @@ function useQuestionKeyboard(config: {
       // Same reason: asking the main document whether focus is already inside the card answers
       // "no" for a card living in another document, and this effect re-runs on every render —
       // which would yank focus out of the custom input after each keystroke.
-      if (!el.contains(el.ownerDocument.activeElement)) el.focus();
+      if (config.autoFocus && !el.contains(el.ownerDocument.activeElement)) el.focus();
     }
     return () => { el?.removeEventListener("keydown", handleKeyDown); };
   }, [config, focusedOption]);
@@ -148,7 +146,7 @@ function useQuestionKeyboard(config: {
 }
 
 /* ── Component ── */
-export function QuestionCard({ questions, onSubmit, onSkip }: QuestionCardProps) {
+export function QuestionCard({ questions, onSubmit, onSkip, autoFocus = true }: QuestionCardProps) {
   const customInputRef = useRef<HTMLInputElement>(null);
   const form = useQuestionForm(questions);
   const currentQ = questions[form.activeTab];
@@ -158,7 +156,7 @@ export function QuestionCard({ questions, onSubmit, onSkip }: QuestionCardProps)
   const handleSubmit = useCallback(() => {
     if (!form.allAnswered) return;
     const result: Record<string, string> = {};
-    questions.forEach((q, i) => { result[q.question] = form.getFinalAnswer(i); });
+    questions.forEach((q, i) => { result[q.id ?? q.question] = form.getFinalAnswer(i); });
     onSubmit(result);
   }, [form.allAnswered, form.getFinalAnswer, questions, onSubmit]);
 
@@ -182,7 +180,7 @@ export function QuestionCard({ questions, onSubmit, onSkip }: QuestionCardProps)
     allAnswered: form.allAnswered, hasAnswer: form.hasAnswer,
     onSelectOption: handleSelectOption,
     goToNextTab: form.goToNextTab, goToPrevTab: form.goToPrevTab,
-    onSubmit: handleSubmit, customInputRef, enabled: true,
+    onSubmit: handleSubmit, customInputRef, enabled: true, autoFocus,
   });
 
   const selectWithFocus = useCallback(

package/src/web/components/chat/tool-cards.tsx

@@ -626,7 +626,7 @@ function ToolDetails({
         </div>
       );
     case "AskUserQuestion": {
-      const qs = (input.questions as Array<{ question: string; header?: string; options: Array<{ label: string; description?: string }>; multiSelect?: boolean }>) ?? [];
+      const qs = (input.questions as Array<{ id?: string; question: string; header?: string; options: Array<{ label: string; description?: string }>; multiSelect?: boolean }>) ?? [];
       const answers = (input.answers as Record<string, string>) ?? {};
       return (
         <div className="space-y-2">
@@ -635,7 +635,7 @@ function ToolDetails({
               <p className="text-text-primary font-medium">{q.header ? `${q.header}: ` : ""}{q.question}</p>
               <div className="flex flex-wrap gap-1">
                 {q.options.map((opt, oi) => {
-                  const answer = answers[q.question] ?? "";
+                  const answer = answers[q.id ?? q.question] ?? answers[q.question] ?? "";
                   const isSelected = answer.split(", ").includes(opt.label);
                   return (
                     <span key={oi} className={`inline-block rounded px-1.5 py-0.5 text-xs border ${
@@ -646,8 +646,8 @@ function ToolDetails({
                   );
                 })}
               </div>
-              {answers[q.question] && (
-                <p className="text-foreground text-xs">Answer: {answers[q.question]}</p>
+              {(answers[q.id ?? q.question] ?? answers[q.question]) && (
+                <p className="text-foreground text-xs">Answer: {answers[q.id ?? q.question] ?? answers[q.question]}</p>
               )}
             </div>
           ))}

package/src/web/components/web-preview/web-preview-tab.tsx

@@ -1,9 +1,10 @@
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { toast } from "sonner";
 import { Check, Copy, ExternalLink, Globe, Lock, RotateCw } from "@/lib/icons";
 import { tunnelsApi } from "@/lib/api-tunnels";
 import { copyToClipboard } from "@/lib/clipboard";
 import { safePreviewUrl } from "@/lib/web-preview-url";
+import { usePanelStore } from "@/stores/panel-store";
 
 const actionClass =
   "flex items-center justify-center shrink-0 rounded min-h-11 min-w-11 md:min-h-7 md:min-w-7 text-muted-foreground hover:text-foreground hover:bg-muted";
@@ -28,14 +29,45 @@ function allowFramingHere(): Promise<void> {
  * A dev server on the host, forwarded and shown in a tab. The toolbar sits at the bottom
  * below `md`, in the thumb zone, as a phone browser's address bar does.
  */
-export function WebPreviewTab({ metadata }: { metadata?: Record<string, unknown> }) {
-  const url = safePreviewUrl(metadata?.url, window.location.origin);
+export function WebPreviewTab({ metadata, tabId }: { metadata?: Record<string, unknown>; tabId?: string }) {
+  const requestedUrl = safePreviewUrl(metadata?.url, window.location.origin);
+  const savedUrl = safePreviewUrl(metadata?.currentUrl, window.location.origin);
+  const initialUrl = savedUrl && requestedUrl && new URL(savedUrl).origin === new URL(requestedUrl).origin ? savedUrl : requestedUrl;
+  const [url, setUrl] = useState(initialUrl);
+  const [src, setSrc] = useState(initialUrl);
+  const iframe = useRef<HTMLIFrameElement>(null);
+  const command = `${requestedUrl}:${String(metadata?.aiOpenAt ?? "")}`;
+  const lastCommand = useRef(command);
   // `local` is the AI's open_url on the host's own browser: no forward, so only this machine reaches it.
   const isPrivate = metadata?.via === "tailscale" || metadata?.via === "local";
   const [reloadKey, setReloadKey] = useState(0);
   const [copied, setCopied] = useState(false);
   const [framingAsked, setFramingAsked] = useState(false);
 
+  useEffect(() => {
+    if (lastCommand.current === command) return;
+    lastCommand.current = command;
+    setUrl(requestedUrl);
+    setSrc(requestedUrl);
+  }, [command, requestedUrl]);
+
+  useEffect(() => {
+    const receive = (event: MessageEvent) => {
+      if (!requestedUrl || !iframe.current?.contentWindow || event.source !== iframe.current.contentWindow
+        || event.origin !== new URL(requestedUrl).origin || event.data?.ppm !== "web-preview-navigation") return;
+      const next = safePreviewUrl(event.data.url, window.location.origin);
+      if (!next || new URL(next).origin !== event.origin) return;
+      setUrl(next);
+      if (tabId) {
+        const store = usePanelStore.getState();
+        const tab = Object.values(store.panels).flatMap((panel) => panel.tabs).find((item) => item.id === tabId);
+        if (tab && tab.metadata?.currentUrl !== next) store.updateTab(tabId, { metadata: { ...tab.metadata, currentUrl: next } });
+      }
+    };
+    window.addEventListener("message", receive);
+    return () => window.removeEventListener("message", receive);
+  }, [requestedUrl, tabId]);
+
   useEffect(() => {
     let live = true;
     void allowFramingHere().then(() => { if (live) setFramingAsked(true); });
@@ -64,7 +96,7 @@ export function WebPreviewTab({ metadata }: { metadata?: Record<string, unknown>
           {isPrivate ? <Lock className="size-3.5" /> : <Globe className="size-3.5" />}
         </span>
         <span className="flex-1 min-w-0 truncate text-xs text-muted-foreground select-all">{url}</span>
-        <button type="button" onClick={() => void allowFramingHere().then(() => setReloadKey((k) => k + 1))} title="Reload" aria-label="Reload" className={actionClass}>
+        <button type="button" onClick={() => void allowFramingHere().then(() => { setSrc(url); setReloadKey((k) => k + 1); })} title="Reload" aria-label="Reload" className={actionClass}>
           <RotateCw className="size-4" />
         </button>
         <button type="button" onClick={copy} title="Copy URL" aria-label="Copy URL" className={actionClass}>
@@ -78,10 +110,11 @@ export function WebPreviewTab({ metadata }: { metadata?: Record<string, unknown>
           own cookies and storage; without allow-top-navigation it cannot navigate PPM away. */}
       {framingAsked ? (
         <iframe
+          ref={iframe}
           // The AI's open_url sets aiOpenAt on every call: a page it opens again reloads.
           key={`${reloadKey}:${String(metadata?.aiOpenAt ?? "")}`}
           title={`Preview of ${url}`}
-          src={url}
+          src={src ?? undefined}
           sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox allow-modals allow-downloads"
           allow="clipboard-read; clipboard-write; fullscreen"
           referrerPolicy="no-referrer"