@hienlh/ppm 0.23.17 → 0.23.19

package/src/web/components/floating-window/use-window-body-element.ts

@@ -25,7 +25,14 @@ export interface WindowBodyElement {
 
 export function useWindowBodyElement(
   windowId: string,
-  rootRef: RefObject<HTMLElement | null>,
+  /**
+   * A React-owned element, rendered after every other child of the frame, that the body is
+   * appended into. Appending to the frame itself put the body where React does not know it
+   * is: a titlebar mounted again later (the skin resolving to another OS once the host's
+   * platform arrives) is inserted before its next React sibling, and a maximized or snapped
+   * window has none — so it went in after the body and drew at the bottom of the window.
+   */
+  hostRef: RefObject<HTMLElement | null>,
   minimized: boolean,
 ): WindowBodyElement {
   const pip = useWindowPip(windowId);
@@ -44,9 +51,9 @@ export function useWindowBodyElement(
   // while the content below is still mounted, and a tab-host body's deferred re-dock still
   // gets to run afterwards on a subtree that is back in the main document.
   useLayoutEffect(() => {
-    const root = rootRef.current;
-    if (!root) return;
-    root.append(body);
+    const host = hostRef.current;
+    if (!host) return;
+    host.append(body);
     publishWindowSlot(windowId, body);
     return () => {
       const handle = windowPip(windowId);
@@ -54,7 +61,7 @@ export function useWindowBodyElement(
       publishWindowSlot(windowId, null);
       body.remove();
     };
-  }, [body, rootRef, windowId]);
+  }, [body, hostRef, windowId]);
 
   // Minimising hides the body via CSS rather than unmounting it — content owns per-window
   // state (explorer history, selection, filter) that a remount would wipe. Never while PiP

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"

package/dist/web/assets/editor-language-service-BIN7M57r.js.br

@@ -1,4 +0,0 @@
-?	U���aSf��؎9!?^d�,C�����~�=�a&w�
-sݭC�)�j�|����B�(��
-Ev������QZQ�W��DJ���6��_��<��J�mR�?��3cMi��4�N���P̞����4ђy��ݞ#-S��ҫ~3�&H�E������Ӹz�i�ASU&B��{����E�
-�N�

package/dist/web/assets/settings-section-content-DuVO6erO.js

@@ -1 +0,0 @@
-import"./vendor-markdown-C-P1aR4p.js";import"./icons-BwyIKaTT.js";import{r as e}from"./settings-section-content-D41IJ62x.js";export{e as preloadSettingsSections};

package/dist/web/assets/web-preview-tab-B2OSrnl9.js

@@ -1 +0,0 @@
-import{s as e}from"./rolldown-runtime-C5c2KzVm.js";import{D as t,E as n}from"./vendor-markdown-C-P1aR4p.js";import"./vendor-ui-BTSIXzhZ.js";import{A as r,Cn as i,Gt as a,_r as o,gt as s,ut as c}from"./icons-BwyIKaTT.js";import{k as l}from"./api-client-xQDlhUTu.js";import{r as u}from"./clipboard-D-VCry-F.js";import{Dn as d,wn as f}from"./index-CPBujJc_.js";var p=e(t(),1),m=n(),h=`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`,g=3e3;function _(){return Promise.race([f.allowFraming(window.location.origin).then(()=>void 0,()=>void 0),new Promise(e=>setTimeout(e,g))])}function v({metadata:e}){let t=d(e?.url,window.location.origin),n=e?.via===`tailscale`||e?.via===`local`,[f,g]=(0,p.useState)(0),[v,y]=(0,p.useState)(!1),[b,x]=(0,p.useState)(!1);if((0,p.useEffect)(()=>{let e=!0;return _().then(()=>{e&&x(!0)}),()=>{e=!1}},[]),!t)return(0,m.jsx)(`div`,{role:`alert`,className:`p-4 text-sm text-destructive`,children:`This preview has no address PPM can show.`});let S=()=>{u(t).then(e=>{if(!e){l.error(`Failed to copy URL`);return}y(!0),setTimeout(()=>y(!1),2e3)})};return(0,m.jsxs)(`div`,{className:`flex h-full w-full flex-col-reverse md:flex-col bg-background`,children:[(0,m.jsxs)(`div`,{role:`toolbar`,"aria-label":`Web preview`,className:`flex items-center gap-2 md:gap-1 shrink-0 h-12 md:h-8 px-2 border-t md:border-t-0 md:border-b border-border`,children:[(0,m.jsx)(`span`,{className:`flex items-center justify-center shrink-0 size-7 text-muted-foreground`,title:e?.via===`local`?`Private: only this machine can open this address`:n?`Private: only devices in your tailnet can open this address`:`Public: anyone with this link can open it`,children:n?(0,m.jsx)(i,{className:`size-3.5`}):(0,m.jsx)(a,{className:`size-3.5`})}),(0,m.jsx)(`span`,{className:`flex-1 min-w-0 truncate text-xs text-muted-foreground select-all`,children:t}),(0,m.jsx)(`button`,{type:`button`,onClick:()=>void _().then(()=>g(e=>e+1)),title:`Reload`,"aria-label":`Reload`,className:h,children:(0,m.jsx)(o,{className:`size-4`})}),(0,m.jsx)(`button`,{type:`button`,onClick:S,title:`Copy URL`,"aria-label":`Copy URL`,className:h,children:v?(0,m.jsx)(r,{className:`size-4 text-success`}):(0,m.jsx)(c,{className:`size-4`})}),(0,m.jsx)(`a`,{href:t,target:`_blank`,rel:`noopener noreferrer`,title:`Open in browser`,"aria-label":`Open in browser`,className:h,children:(0,m.jsx)(s,{className:`size-4`})})]}),b?(0,m.jsx)(`iframe`,{title:`Preview of ${t}`,src:t,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`,className:`flex-1 min-h-0 w-full border-0 bg-white`},`${f}:${String(e?.aiOpenAt??``)}`):(0,m.jsx)(`div`,{className:`flex-1 min-h-0 w-full bg-white`})]})}export{v as WebPreviewTab};