windmill-cli 1.776.0 → 1.777.0

package/esm/main.js

@@ -16784,7 +16784,7 @@ var init_OpenAPI = __esm(() => {
     PASSWORD: undefined,
     TOKEN: getEnv3("WM_TOKEN"),
     USERNAME: undefined,
-    VERSION: "1.776.0",
+    VERSION: "1.777.0",
     WITH_CREDENTIALS: true,
     interceptors: {
       request: new Interceptors,
@@ -27289,7 +27289,7 @@ var init_auth = __esm(async () => {
 });
 
 // src/core/constants.ts
-var WM_FORK_PREFIX = "wm-fork", VERSION = "1.776.0";
+var WM_FORK_PREFIX = "wm-fork", VERSION = "1.777.0";
 
 // src/utils/git.ts
 var exports_git = {};
@@ -39479,11 +39479,45 @@ function initWebSocket() {
 
 initWebSocket()
 
+/** A runnable call leaves this page over the WebSocket without touching the DOM,
+ * so the session recorder of \`wmill app dev --recording\` (which frames the app)
+ * has nothing else to tell it a step is still waiting on the backend. Announcing
+ * the request and its answer to the shell mirrors what the deployed runner posts
+ * across the same boundary. */
+const framed = typeof window !== 'undefined' && window.parent !== window
+
+function notifyRecorder(type: string, reqId: string) {
+    if (framed) window.parent.postMessage({ type, reqId }, window.location.origin)
+}
+
+// A reload takes the previous context and its WebSocket with it, so whatever it
+// had in flight can never answer. Announcing a fresh module is how the shell
+// learns those calls are dead: a message posted from the unloading document
+// would be dropped with the realm that sent it, and this runs before any app
+// code can issue a call of its own.
+if (framed) {
+    window.parent.postMessage({ type: 'wmillDevReady' }, window.location.origin)
+}
+
+function tracked(type: string, reqId: string, resolve: (v: any) => void, reject: (e: any) => void) {
+    notifyRecorder(type, reqId)
+    let settled = false
+    const done = () => {
+        if (settled) return
+        settled = true
+        notifyRecorder(type + 'Res', reqId)
+    }
+    return {
+        resolve: (v: any) => { done(); resolve(v) },
+        reject: (e: any) => { done(); reject(e) }
+    }
+}
+
 async function doRequest(type: string, o: object) {
     await wsReady
     return new Promise((resolve, reject) => {
         const reqId = Math.random().toString(36)
-        reqs[reqId] = { resolve, reject }
+        reqs[reqId] = tracked(type, reqId, resolve, reject)
         ws?.send(JSON.stringify({ ...o, type, reqId }))
     })
 }
@@ -39530,7 +39564,7 @@ export function streamJob(
     return new Promise(async (resolve, reject) => {
         await wsReady
         const reqId = Math.random().toString(36)
-        reqs[reqId] = { resolve, reject, onUpdate }
+        reqs[reqId] = { ...tracked('streamJob', reqId, resolve, reject), onUpdate }
         ws?.send(JSON.stringify({ jobId, type: 'streamJob', reqId }))
     })
 }
@@ -61469,7 +61503,7 @@ var init_openflow = __esm(() => {
   openflow_default = {
     openapi: "3.0.3",
     info: {
-      version: "1.776.0",
+      version: "1.777.0",
       title: "OpenFlow Spec",
       contact: {
         name: "Ruben Fiszel",
@@ -70316,8 +70350,8 @@ async function elementsToMap(els, ignore, json, skips, specificItems, branchOver
       }
     }
     if (isRawAppFile(path13)) {
-      const suffix = path13.split(getFolderSuffix("raw_app") + SEP9).pop();
-      if (suffix?.startsWith("dist/") || suffix == "wmill.d.ts" || suffix == "package-lock.json" || suffix == "DATATABLES.md") {
+      const suffix = path13.split(getFolderSuffix("raw_app") + SEP9).pop()?.replaceAll(SEP9, "/");
+      if (suffix?.startsWith("dist/") || suffix?.startsWith(RECORDINGS_FOLDER + "/") || suffix == "wmill.d.ts" || suffix == "package-lock.json" || suffix == "DATATABLES.md") {
         continue;
       }
     }
@@ -73863,6 +73897,9 @@ async function collectAppFiles(localPath) {
         if (entry.name === APP_BACKEND_FOLDER || entry.name === "node_modules" || entry.name === "dist" || entry.name === ".claude" || entry.name === "sql_to_apply") {
           continue;
         }
+        if (basePath === "/" && entry.name === RECORDINGS_FOLDER) {
+          continue;
+        }
         await readDirRecursive2(fullPath + SEP11, relativePath + "/");
       } else if (entry.isFile()) {
         if (entry.name === "raw_app.yaml" || entry.name === "package-lock.json" || entry.name === "DATATABLES.md" || entry.name === "AGENTS.md" || entry.name === "wmill.d.ts") {
@@ -74026,6 +74063,7 @@ __export(exports_app_metadata, {
   generateLocksCommand: () => generateLocksCommand,
   generateAppLocksInternal: () => generateAppLocksInternal,
   filterWorkspaceDependenciesForApp: () => filterWorkspaceDependenciesForApp,
+  RECORDINGS_FOLDER: () => RECORDINGS_FOLDER,
   APP_BACKEND_FOLDER: () => APP_BACKEND_FOLDER
 });
 import path15 from "node:path";
@@ -74552,7 +74590,7 @@ async function generateLocksCommand(opts, appPath) {
     }
   }
 }
-var import_yaml19, TOP_HASH2 = "__app_hash", APP_BACKEND_FOLDER = "backend";
+var import_yaml19, TOP_HASH2 = "__app_hash", APP_BACKEND_FOLDER = "backend", RECORDINGS_FOLDER = "recordings";
 var init_app_metadata = __esm(async () => {
   init_colors2();
   init_log();
@@ -74769,12 +74807,246 @@ var init_generate_agents = __esm(async () => {
   generate_agents_default = command9;
 });
 
+// src/commands/app/devRecorderBundle.gen.ts
+var DEV_RECORDER_BUNDLE = 'var __wmillRecorder=(()=>{var ne=Object.defineProperty;var Fe=Object.getOwnPropertyDescriptor;var Xe=Object.getOwnPropertyNames;var Be=Object.prototype.hasOwnProperty;var je=(t,o)=>{for(var n in o)ne(t,n,{get:o[n],enumerable:!0})},Ke=(t,o,n,s)=>{if(o&&typeof o=="object"||typeof o=="function")for(let l of Xe(o))!Be.call(t,l)&&l!==n&&ne(t,l,{get:()=>o[l],enumerable:!(s=Fe(o,l))||s.enumerable});return t};var We=t=>Ke(ne({},"__esModule",{value:!0}),t);var mt={};je(mt,{createRawAppRecording:()=>Ie});var G="data-wm-rec-target",D="data-wm-no-record";function Ye(t,o){let n=(u,c,f)=>{let d=f.trim();if(!d||/^(data:|blob:|about:|https?:|\\/\\/|#)/i.test(d))return u;try{return`url(${c}${new URL(d,o).href}${c})`}catch{return u}},s="",l=0;for(;l<t.length;){let u=t[l];if(u===\'"\'||u==="\'"){let c=Ve(t,l);s+=t.slice(l,c),l=c}else if(u==="/"&&t[l+1]==="*"){let c=t.indexOf("*/",l+2),f=c===-1?t.length:c+2;s+=t.slice(l,f),l=f}else{let c=/^url\\(\\s*([\'"]?)([^\'")]+)\\1\\s*\\)/i.exec(t.slice(l));c?(s+=n(c[0],c[1],c[2]),l+=c[0].length):(s+=u,l++)}}return s}function Ve(t,o){let n=t[o],s=o+1;for(;s<t.length;)if(t[s]==="\\\\")s+=2;else{if(t[s]===n)return s+1;s++}return t.length}function C(t){return!!t&&typeof t=="object"&&t.nodeType===1}function g(t,o){return t.tagName===o}function Y(t){return t?"\\u2022\\u2022\\u2022\\u2022\\u2022\\u2022\\u2022\\u2022":""}function re(t,o){let n=[],s=o;for(;s&&s!==t;){let l=s.parentElement;if(!l)return;n.unshift(Array.prototype.indexOf.call(l.children,s)),s=l}return s===t?n:void 0}function ie(t,o){let n=t;for(let s of o)if(n=n?.children[s],!n)return;return n}var ze=new Set(["class","colspan","cols","disabled","height","hidden","id","multiple","open","readonly","rows","rowspan","size","type","width"]);function _(t){return!!t.closest(`[${D}]`)}function Ae(t){let o=t.tagName.toLowerCase(),n=(t.getAttribute("type")??"text").toLowerCase();return`${o==="input"?`input[${n}]`:o} (redacted)`}var Te=String.raw`(?:[-\\w\\u00a0-\\uffff]|\\\\[0-9a-fA-F]{1,6}[ \\t\\r\\n\\f]?|\\\\[^\\r\\n\\f0-9a-fA-F])`,Ge=new RegExp(String.raw`\\.(${Te}+)`,"g"),Je=new RegExp(String.raw`#(${Te}+)`,"g");function Ee(t){return t.replace(/\\\\([0-9a-fA-F]{1,6})[ \\t\\r\\n\\f]?|\\\\([^])/g,(o,n,s)=>n?String.fromCodePoint(parseInt(n,16)):s)}function Qe(t){let o=new Set,n=new Set;for(let s of Array.from(t.querySelectorAll("style"))){if(_(s))continue;let l=s.textContent??"";for(let u of l.matchAll(Ge))o.add(Ee(u[1]));for(let u of l.matchAll(Je))n.add(Ee(u[1]))}return{classes:o,ids:n}}function Ze(t,o){let n=Qe(o),s=[...o.hasAttribute(D)?[o]:[],...Array.from(o.querySelectorAll(`[${D}]`))];for(let l of s){l.replaceChildren(t.createTextNode("\\u2022\\u2022\\u2022")),l.setAttribute(D,"");for(let u of Array.from(l.attributes)){if(u.name===D)continue;let c=u.localName.toLowerCase();if(!ze.has(c))l.removeAttributeNode(u);else if(c==="class"){let f=u.value.split(/\\s+/).filter(d=>d&&n.classes.has(d));f.length?l.setAttribute("class",f.join(" ")):l.removeAttributeNode(u)}else c==="id"&&!n.ids.has(u.value)&&l.removeAttributeNode(u)}}}var et=4e6,tt=8e6;function nt(t,o){let n=t.querySelectorAll("canvas"),s=o.querySelectorAll("canvas");if(n.length!==s.length)return;let l=tt;for(let u=0;u<n.length;u++){let c=n[u];if(!c.width||!c.height)continue;let f=c.width*c.height;if(f>et||f>l)continue;l-=f;let d;try{d=c.toDataURL("image/webp",.85)}catch{continue}if(!d.startsWith("data:image/"))continue;let m=c.getBoundingClientRect();if(!m.width||!m.height)continue;let y=t.defaultView?.getComputedStyle(c).display,v=!y||y==="inline"?"inline-block":y,F=s[u],X=F.getAttribute("style");F.setAttribute("style",`${X?X+";":""}display:${v};box-sizing:border-box;width:${m.width}px;height:${m.height}px;background-image:url("${d}");background-size:100% 100%;background-repeat:no-repeat`)}}function rt(t,o){let n=t.querySelectorAll("select"),s=o.querySelectorAll("select");if(n.length===s.length)for(let l=0;l<n.length;l++){let u=n[l];if(!Array.from(u.selectedOptions).some(f=>_(f)))continue;let c=t.createElement("option");c.setAttribute("selected",""),c.textContent="\\u2022\\u2022\\u2022",s[l].replaceChildren(c)}}function it(t,o){let n="input, textarea, select",s=t.querySelectorAll(n),l=o.querySelectorAll(n);if(s.length===l.length)for(let u=0;u<s.length;u++){let c=s[u],f=l[u];if(c.tagName!==f.tagName)return;if(g(c,"INPUT")){let d=c,m=f;d.type==="checkbox"||d.type==="radio"?d.checked?m.setAttribute("checked",""):m.removeAttribute("checked"):d.type==="password"||_(d)?m.setAttribute("value",Y(d.value)):d.type!=="file"&&m.setAttribute("value",d.value)}else if(g(c,"TEXTAREA"))f.textContent=c.value;else if(g(c,"SELECT")){let d=c,m=f;for(let y=0;y<d.options.length;y++){let v=m.options[y];v&&(d.options[y].selected?v.setAttribute("selected",""):v.removeAttribute("selected"))}}}}function be(t){return Array.from(t).map(o=>{let n=o.styleSheet;if(!n)return o.cssText;try{let s=be(n.cssRules),l=n.media?.mediaText;return l?`@media ${l} {\n${s}\n}`:s}catch{return o.cssText}}).join(`\n`)}function ot(t,o){let n=be(o);t.href&&(n=Ye(n,t.href));let s=t.media?.mediaText;return s&&(n=`@media ${s} {\n${n}\n}`),n}function st(t,o,n){for(let s of Array.from(t.styleSheets)){let l=s.ownerNode;if(!C(l))continue;if(s.disabled){let m=re(o,l),y=m?ie(n,m):void 0;y&&(y.setAttribute("media","not all"),y.tagName==="STYLE"&&(y.textContent=""));continue}if(_(l))continue;let u;try{let m=s.cssRules;if(!m)continue;u=m}catch{continue}let c=re(o,l);if(!c)continue;let f=ie(n,c);if(!f)continue;let d=ot(s,u);if(l.tagName==="LINK"){let m=t.createElement("style");m.textContent=d,f.replaceWith(m)}else l.tagName==="STYLE"&&(f.textContent=d)}}function Se(t,o={}){let n=t.documentElement,s=n.cloneNode(!0);if(it(t,s),st(t,n,s),nt(t,s),rt(t,s),Ze(t,s),o.target){let d=re(n,o.target);(d?ie(s,d):void 0)?.setAttribute(G,"")}s.querySelectorAll("template, noscript").forEach(d=>d.remove()),s.querySelectorAll("script").forEach(d=>d.remove()),s.querySelectorAll(\'meta[http-equiv="refresh" i]\').forEach(d=>d.remove()),s.querySelectorAll("*").forEach(d=>{for(let m of Array.from(d.attributes))m.name.toLowerCase().startsWith("on")&&d.removeAttribute(m.name)});let l=t.defaultView,u=Math.round(l?.scrollY??t.documentElement.scrollTop??0),c=Math.round(l?.scrollX??t.documentElement.scrollLeft??0);if(u>0||c>0){let d=t.createElement("style");d.textContent=`html { margin-top: -${u}px !important; margin-left: -${c}px !important; }`,s.querySelector("head")?.appendChild(d)}let f=s.querySelector("head");if(o.baseHref&&f&&!f.querySelector("base")){let d=t.createElement("base");d.setAttribute("href",o.baseHref),f.prepend(d)}return`<!DOCTYPE html>${s.outerHTML}`}var gt=`[${G}] {\n\toutline: 3px solid #ef4444 !important;\n\toutline-offset: 2px !important;\n\tbox-shadow: 0 0 0 6px rgba(239, 68, 68, 0.25) !important;\n}`;function oe(t){if(!t||_(t))return"";let o=t;return t.querySelector(`[${D}]`)&&(o=t.cloneNode(!0),o.querySelectorAll(`[${D}]`).forEach(n=>n.remove())),(o.textContent??"").replace(/\\s+/g," ").trim()}function ye(t,o=40){let n=oe(t);return n.length>o?`${n.slice(0,o)}\\u2026`:n}function we(t){let o=t.tagName.toLowerCase(),n=(t.getAttribute("type")??"text").toLowerCase(),s=o==="input"?`input[${n}]`:o,l=t.labels?.[0],u=t.getAttribute("aria-label")||(l&&!_(l)?ye(l):"")||(o==="input"&&["button","submit","reset"].includes(n)?t.getAttribute("value"):"")||t.getAttribute("placeholder")||t.getAttribute("title")||ye(t)||t.getAttribute("name")||t.getAttribute("id")||"";return u?`${s} "${u}"`:s}function Re(t){let o=[],n=t,s=0;for(;n&&s<5;){let l=n.tagName.toLowerCase();if(n.id){o.unshift(`#${n.id}`);break}let u=typeof n.className=="string"?n.className.trim().split(/\\s+/).filter(Boolean)[0]:void 0,c=n.parentElement,f=u?`${l}.${u}`:l;if(c){let d=Array.from(c.children).filter(m=>m.tagName===n.tagName);d.length>1&&(f+=`:nth-of-type(${d.indexOf(n)+1})`)}o.unshift(f),n=c,s++}return o.join(" > ")}function Le(t,o,n){switch(t){case"click":return`Clicked ${o}`;case"fill":return`Filled ${o} with "${n??""}"`;case"select":return`Selected "${n??""}" in ${o}`;case"toggle":return n?`${n==="checked"?"Checked":"Unchecked"} ${o}`:`Toggled ${o}`;case"submit":return`Submitted ${o}`;case"key":return`Pressed ${n??"key"} in ${o}`;case"navigate":return n?`Navigated to ${n}`:"Reloaded the app"}}var V=400,ct=3e3,ve=6e4,Ce=800,_e=new Set(["button","submit","reset","image"]),ut=new Set(["range","color","date","time","datetime-local","month","week"]),dt=new Set(["","text","search","url","tel","email","password","number"]),J=200,ft=250,xe=500;function Ie(){let t=!1,o=0,n=0,s="",l,u,c=[],f=[],d=new Map,m=0,y=!1,v=!1,F={width:0,height:0},X="",z=[],A,M,O=0,L,b,h,q=new Set,Q,N=0,B,Z=!1;function ke(e){return new Promise(a=>{let i=()=>{if(N===0||Date.now()-e>=ve||!P()){a();return}setTimeout(i,V)};i()})}let Me=e=>new Promise(a=>setTimeout(a,e));function P(){try{return u?.contentDocument??void 0}catch{return}}function $(e){if(e===void 0)return;let a=d.get(e);if(a!==void 0)return a;if(m+e.length>41943040){y=!0,v=!0;return}let i=f.length;return f.push(e),d.set(e,i),m+=e.length,i}function S(e){if(v)return;let a=P();if(a)try{return Se(a,{target:e,baseHref:X})}catch(i){console.warn("raw app recorder: snapshot failed",i);return}}function Ne(e){return e.replace(` ${G}=""`,"")}function j(){h&&(h.observer.disconnect(),clearTimeout(h.timer),clearTimeout(h.cap),h=void 0)}function se(e){j();let a=P();if(!a)return;let i=()=>{if(N>0&&h&&Date.now()-h.startedAt<ve){clearTimeout(h.timer),h.timer=setTimeout(i,V);return}j(),e.after=$(S())},r=new MutationObserver(()=>{h&&(clearTimeout(h.timer),h.timer=setTimeout(i,V))});r.observe(a,{subtree:!0,childList:!0,attributes:!0,characterData:!0}),h={step:e,observer:r,startedAt:Date.now(),timer:setTimeout(i,V),cap:setTimeout(i,ct)}}function ae(e){if(!h)return;let a=h.step;j();let i=e!==void 0&&(L?.html===e||b?.html===e);a.after=$(i?Ne(e):S())}function x(e,a,i,r,w=!1){if(!t)return;let E=Date.now()-n,p=c[c.length-1],R=!!p&&!!a&&ue(M,a)&&p.kind===e&&(w||Ue(a)&&E-O<ft);if(R||ae(i),c.length>=500&&!R){y=!0,v=!0;return}let T=!!a&&_(a),H=le(a?T?Ae(a):we(a):"the app")??"the app",W=r&&r.length>J?`${r.slice(0,J)}\\u2026`:r,k=!T||!W?W:e==="toggle"?void 0:Y(W),ge=Le(e,H,k);if(R&&p){p.value=k,p.label=ge,O=E,se(p);return}let he={t:E,kind:e,label:ge,target:H,selector:a&&!T?le(Re(a)):void 0,value:k,before:$(i??(e==="key"?S(a):void 0))};c.push(he),i!==void 0&&L?.html===i&&(L=void 0),i!==void 0&&b?.html===i&&(b=void 0),M=a,O=E,o=c.length,se(he)}function Pe(e){let i=e.closest("label")?.control;return!i||e===i||i.contains(e)?!1:!e.closest("a, button, input, select, textarea")}function $e(e){return e.ctrlKey||e.metaKey||e.altKey?!1:e.key.length===1||[" ","Enter","ArrowUp","ArrowDown","ArrowLeft","ArrowRight","Home","End"].includes(e.key)}function ee(e){if(g(e,"SELECT"))return!0;if(!g(e,"INPUT"))return!1;let a=e.type;return!K(e)&&!_e.has(a)}function He(e){return g(e,"BUTTON")?(e.type||"submit")==="submit":g(e,"INPUT")&&["submit","image"].includes(e.type)}function De(e){let a=c[c.length-1];return a?.kind==="key"&&a.value==="Enter"&&!!e&&!!M&&e.contains(M)&&Date.now()-n-O<xe}function Oe(e){return g(e,"TEXTAREA")||e.isContentEditable}function qe(e){return g(e,"BUTTON")||g(e,"SUMMARY")||g(e,"A")&&e.hasAttribute("href")?!0:g(e,"INPUT")&&_e.has(e.type)}function Ue(e){return g(e,"INPUT")&&ut.has(e.type)}function le(e){if(e!==void 0)return e.length>J?`${e.slice(0,J)}\\u2026`:e}function K(e){return g(e,"TEXTAREA")||e.isContentEditable?!0:g(e,"INPUT")&&dt.has(e.type)}function ce(e){let a=g(e,"INPUT")||g(e,"TEXTAREA")?e.value:oe(e);return g(e,"INPUT")&&e.type==="password"||_(e)?Y(a):a}function U(e){let a=L?.el;if(!a)return;if(a===e||a.contains(e)||e.contains(a))return L?.html;let i=e.labels;if(i&&Array.from(i).some(r=>r===a||r.contains(a)))return L?.html}function ue(e,a){if(!e||!a)return!1;if(e===a)return!0;let i=e,r=a;return i.type==="radio"&&r.type==="radio"&&!!i.name&&i.name===r.name&&i.form===r.form}function te(e){if(b)return ue(b.el,e)?b.html:void 0}function I(){if(!A)return;let{el:e,before:a}=A;clearTimeout(A.timer),A=void 0,U(e)!==void 0&&(L=void 0),b?.el===e&&(b=void 0),x("fill",e,a,ce(e))}function de(e){let a=(i,r)=>{e.addEventListener(i,r,!0),z.push(()=>e.removeEventListener(i,r,!0))};a("pointerdown",i=>{let r=C(i.target)?i.target:void 0;r&&(L={el:r,html:S(r)})}),a("click",i=>{let r=C(i.target)?i.target:void 0;r&&(A&&A.el!==r&&I(),!(K(r)||ee(r)||g(r,"OPTION"))&&(i.detail===0&&He(r)&&De(r.closest("form"))||Pe(r)||x("click",r,U(r)??S(r))))}),a("focusin",i=>{let r=C(i.target)?i.target:void 0;L&&(!r||U(r)===void 0)&&(L=void 0)}),a("beforeinput",i=>{let r=C(i.target)?i.target:void 0;!r||!K(r)||A?.el===r||U(r)===void 0&&(b={el:r,html:S(r),repeat:!1})}),a("input",i=>{let r=C(i.target)?i.target:void 0;if(!(!r||!K(r)))if(A&&A.el!==r&&I(),A)clearTimeout(A.timer),A.timer=setTimeout(I,Ce);else{let w=U(r),E=te(r),p=w??E??S(r);ae(p),A={el:r,before:p,timer:setTimeout(I,Ce)}}}),a("change",i=>{let r=C(i.target)?i.target:void 0;if(!r)return;if(K(r)){I();return}A&&I();let w=U(r),E=te(r),p=w??E,R=w===void 0&&E!==void 0&&!!b?.repeat;if(g(r,"SELECT")){let T=Array.from(r.selectedOptions),H=T.map(k=>k.label||k.value).join(", "),W=T.some(k=>_(k));x("select",r,p,W?Y(H):H,R)}else if(g(r,"INPUT")){let T=r;["checkbox","radio"].includes(T.type)?x("toggle",r,p,T.checked?"checked":"unchecked",R):T.type==="file"?x("fill",r,p,Array.from(T.files??[]).map(H=>H.name).join(", ")):x("fill",r,p,ce(r),R)}}),a("submit",i=>{let r=C(i.target)?i.target:void 0;I();let w=c[c.length-1];(w?.kind==="click"||w?.kind==="key"&&w.value==="Enter")&&M&&r&&r.contains(M)&&Date.now()-n-O<xe||x("submit",r,S(r))}),a("keydown",i=>{let r=C(i.target)?i.target:void 0;r&&ee(r)&&$e(i)&&(i.repeat&&b&&te(r)!==void 0?b.repeat=!0:b={el:r,html:S(r),repeat:i.repeat}),!(i.key!=="Enter"&&i.key!=="Escape")&&(i.key==="Enter"&&r&&(ee(r)||qe(r)||Oe(r))||(I(),x("key",r,i.repeat?void 0:S(r),i.key,i.repeat)))})}function fe(){z.forEach(e=>e()),z=[]}function me(e){let a=e.contentWindow,i=E=>{let p=E.data;if(!p||typeof p!="object"||E.source!==window)return;let{type:R,reqId:T}=p;typeof R!="string"||!R.endsWith("Res")||(q.delete(T),N=q.size)},r=()=>{let E=P();!E||E===Q||(a?.addEventListener("message",i),Q=E)},w=E=>{let p=E.data;if(!p||typeof p!="object"||E.source!==a)return;let{type:R,reqId:T}=p;typeof R!="string"||R.endsWith("Res")||T===void 0||(r(),q.add(T),N=q.size)};return window.addEventListener("message",w),r(),()=>{window.removeEventListener("message",w),a?.removeEventListener("message",i),Q=void 0}}function pe(){fe();let e=h?.step;j(),A&&clearTimeout(A.timer),A=void 0,L=void 0,b=void 0;let a=P();if(!a)return;de(a),u&&(B?.(),B=me(u));let i=S();if(e&&(e.after=$(i)),f.length===0){$(i);return}x("navigate",void 0,i,a.location?.hash||void 0)}return{get active(){return t},get stepCount(){return o},get stopping(){return Z},start(e,a){u=e;let i=P();return i?.documentElement?(t=!0,n=Date.now(),s=a.appPath,l=a.workspace,c=[],M=void 0,O=0,o=0,f=[],d=new Map,m=0,y=!1,v=!1,X=typeof window<"u"?window.location.origin:"",F={width:e.clientWidth||i.documentElement.clientWidth,height:e.clientHeight||i.documentElement.clientHeight},i.readyState==="complete"&&i.location?.href!=="about:blank"&&$(S()),de(i),e.addEventListener("load",pe),q.clear(),N=0,B=me(e),!0):(u=void 0,!1)},async stop(){if(I(),fe(),t=!1,h&&N>0){Z=!0;let a=h.startedAt;await ke(a),P()&&await Me(V),Z=!1}if(h){let a=h.step;j(),a.after=$(S())}B?.(),B=void 0,q.clear(),N=0,u?.removeEventListener("load",pe),L=void 0,b=void 0,u=void 0;let e={version:1,type:"app",recorded_at:new Date().toISOString(),app_path:s,workspace:l,total_duration_ms:Date.now()-n,viewport:F,frames:f,steps:c,truncated:y||void 0};return c=[],f=[],d=new Map,m=0,e},download(e){let a=new Blob([JSON.stringify(e)],{type:"application/json"}),i=URL.createObjectURL(a),r=document.createElement("a");r.href=i,r.download=`app-recording-${(e.app_path||"untitled").replace(/\\//g,"-")}-${Date.now()}.json`,r.click(),URL.revokeObjectURL(i)}}}return We(mt);})();\n';
+var init_devRecorderBundle_gen = () => {};
+
+// src/commands/app/devRecorder.ts
+function isOwnOrigin(origin, host) {
+  if (origin === undefined)
+    return true;
+  if (host === undefined)
+    return false;
+  try {
+    return new URL(origin).host === host;
+  } catch {
+    return false;
+  }
+}
+function recordingFileName(now, attempt = 0) {
+  const stamp = now.toISOString().slice(0, 23).replace(/[:T.]/g, "-");
+  return `recording-${stamp}${attempt > 0 ? `-${attempt}` : ""}.json`;
+}
+function isRecordingFileName(file) {
+  return /^[A-Za-z0-9._-]+\.json$/.test(file) && !file.includes("..");
+}
+function createRecorderShellHTML(opts) {
+  const config = JSON.stringify({
+    appPath: opts.appPath,
+    workspace: opts.workspace,
+    playerBaseUrl: opts.playerBaseUrl ?? null,
+    savePath: RECORDER_SAVE_PATH
+  }).replace(/</g, "\\u003c");
+  return `
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Windmill App Dev Recording</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    html, body { height: 100%; }
+    body {
+      display: flex;
+      flex-direction: column;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+      background: #18181b;
+    }
+    #wm-rec-bar {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 8px 12px;
+      color: #e4e4e7;
+      font-size: 13px;
+      border-bottom: 1px solid #27272a;
+      flex-wrap: wrap;
+    }
+    #wm-rec-bar button, #wm-rec-bar a.wm-rec-action {
+      font: inherit;
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      padding: 5px 12px;
+      border-radius: 6px;
+      border: 1px solid #3f3f46;
+      background: #27272a;
+      color: #e4e4e7;
+      cursor: pointer;
+      text-decoration: none;
+    }
+    #wm-rec-bar button:hover, #wm-rec-bar a.wm-rec-action:hover { background: #3f3f46; }
+    #wm-rec-bar button:disabled { opacity: 0.5; cursor: not-allowed; }
+    #wm-rec-toggle.recording { background: #dc2626; border-color: #dc2626; color: white; }
+    #wm-rec-toggle.recording:hover { background: #b91c1c; }
+    .wm-rec-dot { width: 8px; height: 8px; border-radius: 50%; background: #dc2626; }
+    #wm-rec-toggle.recording .wm-rec-dot { background: white; }
+    #wm-rec-status { color: #a1a1aa; }
+    #wm-rec-hint { margin-left: auto; color: #71717a; font-size: 12px; }
+    #wm-rec-hint code { background: #27272a; padding: 1px 5px; border-radius: 4px; }
+    #wm-rec-frame { flex: 1; width: 100%; border: 0; background: white; }
+    [hidden] { display: none !important; }
+  </style>
+</head>
+<body>
+  <div id="wm-rec-bar">
+    <button id="wm-rec-toggle"><span class="wm-rec-dot"></span><span id="wm-rec-toggle-label">Record</span></button>
+    <span id="wm-rec-status">Not recording</span>
+    <a id="wm-rec-open" class="wm-rec-action" target="_blank" rel="noopener" hidden>Open in player</a>
+    <button id="wm-rec-download" hidden>Download JSON</button>
+    <span id="wm-rec-hint">Passwords are masked. Mark sensitive elements with <code>data-wm-no-record</code></span>
+  </div>
+  <iframe id="wm-rec-frame" src="/"></iframe>
+  <script src="${RECORDER_BUNDLE_PATH}"></script>
+  <script>
+    (function () {
+      var config = ${config};
+      var iframe = document.getElementById('wm-rec-frame');
+      var toggle = document.getElementById('wm-rec-toggle');
+      var toggleLabel = document.getElementById('wm-rec-toggle-label');
+      var status = document.getElementById('wm-rec-status');
+      var openLink = document.getElementById('wm-rec-open');
+      var downloadBtn = document.getElementById('wm-rec-download');
+      var recorder = window.__wmillRecorder.createRawAppRecording();
+      var recording = null;
+      var ticker = null;
+
+      // The dev-server shim posts both the request and its answer up to the
+      // shell; the recorder reads the answer off the framed window, the way the
+      // deployed runner delivers it. Relaying is what makes a step wait for the
+      // job it launched instead of recording the spinner.
+      var pending = [];
+      var stranded = [];
+      window.addEventListener('message', function (e) {
+        var frameWindow = iframe.contentWindow;
+        if (!frameWindow || e.source !== frameWindow) return;
+        var data = e.data;
+        if (!data || typeof data.type !== 'string') return;
+        // A fresh document announced itself, so every call the previous one had
+        // in flight died with its WebSocket.
+        if (data.type === 'wmillDevReady') {
+          stranded = stranded.concat(pending);
+          pending = [];
+          return;
+        }
+        if (data.reqId === undefined) return;
+        if (!/Res$/.test(data.type)) {
+          pending.push(data.reqId);
+          return;
+        }
+        pending = pending.filter(function (id) { return id !== data.reqId });
+        frameWindow.postMessage(data, window.location.origin);
+      });
+
+      // The recorder keeps a reload's outstanding request ids on purpose (a
+      // deployed app is answered by its parent, which survives). Here the answer
+      // died with the frame's WebSocket, so Stop would wait out the whole job
+      // budget unless the shell settles them. Deferred past the load handlers:
+      // the recorder rebinds its listener onto the new document in one of them.
+      iframe.addEventListener('load', function () {
+        if (stranded.length === 0) return;
+        var ids = stranded;
+        stranded = [];
+        setTimeout(function () {
+          var frameWindow = iframe.contentWindow;
+          if (!frameWindow) return;
+          ids.forEach(function (reqId) {
+            frameWindow.postMessage({ type: 'unloadRes', reqId: reqId }, window.location.origin);
+          });
+        }, 0);
+      });
+
+      function setStatus(text) { status.textContent = text; }
+
+      function steps(n) { return n + (n === 1 ? ' step' : ' steps'); }
+
+      function tick() {
+        // Stop can wait a minute on a runnable the last step launched, so the
+        // toolbar has to say what it is waiting for rather than look wedged.
+        if (recorder.stopping) setStatus('Waiting for the last job to finish…');
+        else if (recorder.active) {
+          setStatus('Recording: ' + steps(recorder.stepCount));
+        }
+      }
+
+      function start() {
+        recording = null;
+        openLink.hidden = true;
+        downloadBtn.hidden = true;
+        if (!recorder.start(iframe, { appPath: config.appPath, workspace: config.workspace })) {
+          setStatus('Cannot record: the app document is unreachable');
+          return;
+        }
+        toggle.classList.add('recording');
+        toggleLabel.textContent = 'Stop';
+        tick();
+        ticker = setInterval(tick, 250);
+      }
+
+      async function stop() {
+        toggle.disabled = true;
+        setStatus('Finishing…');
+        // The ticker outlives the click: it is what reports the drain below.
+        recording = await recorder.stop();
+        clearInterval(ticker);
+        ticker = null;
+        toggle.classList.remove('recording');
+        toggleLabel.textContent = 'Record';
+        downloadBtn.hidden = false;
+        setStatus(steps(recording.steps.length) + ' recorded');
+        // Only now: starting a fresh recording drops the one being uploaded.
+        await save();
+        toggle.disabled = false;
+      }
+
+      async function save() {
+        try {
+          var res = await fetch(config.savePath, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(recording)
+          });
+          var body = await res.json();
+          if (!res.ok) throw new Error(body.error || res.statusText);
+          setStatus(steps(recording.steps.length) + ' saved to ' + body.file);
+          if (config.playerBaseUrl) {
+            var src = window.location.origin + config.savePath + '/' + body.file;
+            openLink.href = config.playerBaseUrl + 'replay?src=' + encodeURIComponent(src);
+            openLink.hidden = false;
+          }
+        } catch (e) {
+          setStatus('Recorded, but saving failed: ' + (e && e.message ? e.message : e));
+        }
+      }
+
+      toggle.addEventListener('click', function () {
+        if (recorder.active) stop();
+        else start();
+      });
+
+      downloadBtn.addEventListener('click', function () {
+        if (recording) recorder.download(recording);
+      });
+    })();
+  </script>
+</body>
+</html>
+`;
+}
+var RECORDER_BUNDLE_PATH = "/__wm_recorder.js", RECORDER_SHELL_PATH = "/__record", RECORDER_SAVE_PATH = "/__recordings";
+var init_devRecorder = __esm(async () => {
+  init_devRecorderBundle_gen();
+  await init_app_metadata();
+});
+
 // src/commands/app/dev.ts
 import { sep as SEP13 } from "node:path";
 import * as http2 from "node:http";
 import * as fs13 from "node:fs";
 import * as path17 from "node:path";
 import process17 from "node:process";
+import { Buffer as Buffer5 } from "node:buffer";
 import { writeFileSync as writeFileSync6 } from "node:fs";
 async function dev(opts, appFolder) {
   GLOBAL_CONFIG_OPT.noCdToRoot = true;
@@ -74867,6 +75139,16 @@ async function dev(opts, appFolder) {
   if (!fs13.existsSync(distDir)) {
     fs13.mkdirSync(distDir);
   }
+  const recordingEnabled = opts.recording ?? false;
+  const recordingsDir = path17.join(process17.cwd(), RECORDINGS_FOLDER);
+  const playerBaseUrl = workspace.remote.endsWith("/") ? workspace.remote : `${workspace.remote}/`;
+  const playerOrigin = (() => {
+    try {
+      return new URL(playerBaseUrl).origin;
+    } catch {
+      return;
+    }
+  })();
   const clients = [];
   function notifyClients() {
     clients.forEach((client) => {
@@ -74970,8 +75252,122 @@ data: reload
     info(colors.gray(`ℹ️  No runnables folder found (will not watch for runnable changes)
 `));
   }
+  const MAX_RECORDING_BYTES = 104857600;
+  function sendJson(res, status, body) {
+    res.writeHead(status, { "Content-Type": "application/json" });
+    res.end(JSON.stringify(body));
+  }
+  async function writeRecording(body) {
+    const now = new Date;
+    for (let attempt = 0;attempt < 100; attempt++) {
+      const file = recordingFileName(now, attempt);
+      try {
+        await fs13.promises.writeFile(path17.join(recordingsDir, file), body, {
+          flag: "wx"
+        });
+        return file;
+      } catch (error2) {
+        if (error2?.code !== "EEXIST")
+          throw error2;
+      }
+    }
+    throw new Error("Could not find a free recording file name");
+  }
+  function saveRecording(req, res) {
+    if (!isOwnOrigin(req.headers.origin, req.headers.host)) {
+      sendJson(res, 403, { error: "Cross-origin recording upload refused" });
+      return;
+    }
+    const chunks = [];
+    let size = 0;
+    let refused = false;
+    req.on("error", (error2) => {
+      if (!refused) {
+        warn(colors.yellow(`Recording upload failed: ${error2.message}`));
+      }
+    });
+    req.on("data", (chunk) => {
+      if (refused)
+        return;
+      size += chunk.length;
+      if (size > MAX_RECORDING_BYTES) {
+        refused = true;
+        res.on("finish", () => req.destroy());
+        sendJson(res, 413, {
+          error: `Recording exceeds ${MAX_RECORDING_BYTES} bytes`
+        });
+        return;
+      }
+      chunks.push(chunk);
+    });
+    req.on("end", async () => {
+      if (refused)
+        return;
+      const body = Buffer5.concat(chunks).toString("utf-8");
+      try {
+        JSON.parse(body);
+      } catch {
+        sendJson(res, 400, { error: "Body is not valid JSON" });
+        return;
+      }
+      let file;
+      try {
+        await fs13.promises.mkdir(recordingsDir, { recursive: true });
+        file = await writeRecording(body);
+      } catch (error2) {
+        error(colors.red(`Failed to save recording: ${error2.message}`));
+        sendJson(res, 500, { error: error2.message });
+        return;
+      }
+      info(colors.green(`\uD83C\uDFAC Recording saved to ${path17.join(RECORDINGS_FOLDER, file)}`));
+      info(colors.gray(`   Replay it at ${playerBaseUrl}replay (open the file, or use ?src=)`));
+      sendJson(res, 200, { file });
+    });
+  }
+  function serveRecording(url, res) {
+    const file = url.slice(RECORDER_SAVE_PATH.length + 1);
+    if (!isRecordingFileName(file)) {
+      sendJson(res, 400, { error: "Invalid recording name" });
+      return;
+    }
+    const filePath = path17.join(recordingsDir, file);
+    if (!fs13.existsSync(filePath)) {
+      sendJson(res, 404, { error: "Recording not found" });
+      return;
+    }
+    res.writeHead(200, {
+      "Content-Type": "application/json",
+      ...playerOrigin ? { "Access-Control-Allow-Origin": playerOrigin } : {}
+    });
+    fs13.createReadStream(filePath).on("error", () => res.end()).pipe(res);
+  }
   const server = http2.createServer((req, res) => {
     const url = req.url || "/";
+    if (recordingEnabled) {
+      const pathname = url.split("?")[0];
+      if (pathname === RECORDER_BUNDLE_PATH) {
+        res.writeHead(200, { "Content-Type": "application/javascript" });
+        res.end(DEV_RECORDER_BUNDLE);
+        return;
+      }
+      if (pathname === RECORDER_SAVE_PATH && req.method === "POST") {
+        saveRecording(req, res);
+        return;
+      }
+      if (pathname.startsWith(`${RECORDER_SAVE_PATH}/`) && req.method === "GET") {
+        serveRecording(pathname, res);
+        return;
+      }
+      if (pathname === RECORDER_SHELL_PATH) {
+        res.writeHead(200, { "Content-Type": "text/html" });
+        res.end(createRecorderShellHTML({
+          appPath,
+          workspace: workspaceId,
+          playerBaseUrl
+        }));
+        return;
+      }
+    }
     if (url === "/__events") {
       res.writeHead(200, {
         "Content-Type": "text/event-stream",
@@ -75358,14 +75754,18 @@ data: reload
   }
   server.listen(port, host, () => {
     const url = `http://${host}:${port}`;
+    const openUrl = recordingEnabled ? `${url}${RECORDER_SHELL_PATH}` : url;
     info(colors.bold.green(`\uD83D\uDE80 Dev server running at ${url}`));
     info(colors.cyan(`\uD83D\uDD0C WebSocket server running at ws://${host}:${port}`));
     info(colors.gray(`\uD83D\uDCE6 Serving files from: ${process17.cwd()}`));
-    info(colors.gray(`\uD83D\uDD04 Live reload enabled
-`));
+    info(colors.gray(`\uD83D\uDD04 Live reload enabled`));
+    if (recordingEnabled) {
+      info(colors.magenta(`\uD83C\uDFAC Session recording at ${openUrl} : press Record in the toolbar. Recordings are saved to ${RECORDINGS_FOLDER}/`));
+    }
+    info("");
     if (shouldOpen) {
       try {
-        openApp(apps.browser, { arguments: [url] }).catch((error2) => {
+        openApp(apps.browser, { arguments: [openUrl] }).catch((error2) => {
           error(colors.yellow(`Failed to open browser automatically: ${error2.message}`));
         });
         info(colors.gray("Opened browser for you"));
@@ -75972,11 +76372,12 @@ var init_dev = __esm(async () => {
     init_app_metadata(),
     init_raw_apps(),
     init_generate_agents(),
-    init_resource_folders()
+    init_resource_folders(),
+    init_devRecorder()
   ]);
   command10 = new Command().description("Start a development server for building apps with live reload and hot module replacement").arguments("[app_folder:string]").option("--port <port:number>", "Port to run the dev server on (will find next available port if occupied)").option("--host <host:string>", "Host to bind the dev server to", {
     default: DEFAULT_HOST
-  }).option("--entry <entry:string>", "Entry point file (default: index.ts for Svelte/Vue, index.tsx otherwise)").option("--no-open", "Don't automatically open the browser").action(dev);
+  }).option("--entry <entry:string>", "Entry point file (default: index.ts for Svelte/Vue, index.tsx otherwise)").option("--no-open", "Don't automatically open the browser").option("--recording", "Frame the app in a shell with a Record button, to capture a replayable session recording of the app under development").action(dev);
   dev_default = command10;
 });
 
@@ -88940,6 +89341,7 @@ app related commands
   - \`--host <host:string>\` - Host to bind the dev server to
   - \`--entry <entry:string>\` - Entry point file (default: index.ts for Svelte/Vue, index.tsx otherwise)
   - \`--no-open\` - Don't automatically open the browser
+  - \`--recording\` - Frame the app in a shell with a Record button, to capture a replayable session recording of the app under development
 - \`app lint [app_folder:string]\` - Lint a raw app folder to validate structure and buildability
   - \`--fix\` - Attempt to fix common issues (not implemented yet)
 - \`app new\` - create a new raw app from a template
@@ -100684,7 +101086,7 @@ await __promiseAll([
   init_confirm(),
   init_utils()
 ]);
-import { Buffer as Buffer5 } from "node:buffer";
+import { Buffer as Buffer6 } from "node:buffer";
 import { readFile as readFile4, writeFile as writeFile26 } from "node:fs/promises";
 import { basename as basename11 } from "node:path";
 function formatBytes(n2) {
@@ -100773,15 +101175,15 @@ async function download(opts, fileKey, outputPath) {
   });
   let buf;
   if (typeof body === "string") {
-    buf = Buffer5.from(body, "utf-8");
+    buf = Buffer6.from(body, "utf-8");
   } else if (body instanceof Blob) {
-    buf = Buffer5.from(await body.arrayBuffer());
+    buf = Buffer6.from(await body.arrayBuffer());
   } else if (body instanceof ArrayBuffer) {
-    buf = Buffer5.from(body);
+    buf = Buffer6.from(body);
   } else if (body == null) {
-    buf = Buffer5.alloc(0);
+    buf = Buffer6.alloc(0);
   } else {
-    buf = Buffer5.from(JSON.stringify(body), "utf-8");
+    buf = Buffer6.from(JSON.stringify(body), "utf-8");
   }
   if (opts.stdout) {
     process.stdout.write(buf);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "windmill-cli",
-  "version": "1.776.0",
+  "version": "1.777.0",
   "description": "CLI for Windmill",
   "license": "Apache 2.0",
   "type": "module",