pinokiod 3.270.0 → 3.272.0

package/server/views/app.ejs

@@ -3082,6 +3082,14 @@ body.dark .pinokio-fork-dropdown-remote, body.dark .pinokio-publish-dropdown-rem
             </span>
           </button>
         </div>
+        <div class='fs-status-dropdown fs-logs'>
+          <button class='fs-status-btn' type='button'>
+            <span class='fs-status-label'>
+              <i class="fa-solid fa-laptop-code"></i>
+              <span class='fs-status-title'>Logs</span>
+            </span>
+          </button>
+        </div>
         <div class='fs-status-dropdown git-changes'>
           <button id='fs-changes-btn' class='fs-status-btn revealer' data-group='#fs-changes-menu' type='button'>
             <span class='fs-status-label'><i class="fa-solid fa-code-compare"></i> Changes</span>
@@ -3130,6 +3138,14 @@ body.dark .pinokio-fork-dropdown-remote, body.dark .pinokio-publish-dropdown-rem
             </span>
           </button>
         </div>
+        <div class='fs-status-dropdown fs-logs'>
+          <button class='fs-status-btn' type='button'>
+            <span class='fs-status-label'>
+              <i class="fa-solid fa-laptop-code"></i>
+              <span class='fs-status-title'>Logs</span>
+            </span>
+          </button>
+        </div>
         <div class='fs-status-dropdown git-changes'>
           <button id='fs-changes-btn' class='fs-status-btn revealer' data-group='#fs-changes-menu' type='button'>
             <span class='fs-status-label'><i class="fa-solid fa-code-compare"></i> Changes</span>
@@ -3391,10 +3407,6 @@ body.dark .pinokio-fork-dropdown-remote, body.dark .pinokio-publish-dropdown-rem
         return
       }
       storage.setItem(key, JSON.stringify(payload))
-      console.log('[PinokioApp] persisted frame link selection', {
-        key,
-        payload,
-      })
     } catch (_) {}
   }
   const restorePersistedFrameLink = (providedPayload = null) => {
@@ -3459,11 +3471,6 @@ body.dark .pinokio-fork-dropdown-remote, body.dark .pinokio-publish-dropdown-rem
     if (!node && payload.href) {
       node = findLinkByAbsoluteHref(payload.href)
     }
-    console.log('[PinokioApp] restoring frame link selection', {
-      key,
-      payload,
-      found: Boolean(node),
-    })
     return node
   }
   const persistTabStateStore = () => {
@@ -4546,7 +4553,8 @@ body.dark .pinokio-fork-dropdown-remote, body.dark .pinokio-publish-dropdown-rem
       })
     })
   }
-  const addTab = async (url) => {
+  const addTab = async (url, options = {}) => {
+    const label = typeof options.label === 'string' && options.label.trim().length > 0 ? options.label.trim() : null
     let item = document.createElement("a")
     //let id = "ts" + Date.now()
     let index = document.querySelectorAll("aside .s .frame-link").length
@@ -4557,7 +4565,8 @@ body.dark .pinokio-fork-dropdown-remote, body.dark .pinokio-publish-dropdown-rem
     item.href = url
     item.setAttribute("data-index", index)
     item.className = "btn header-item frame-link"
-    item.innerHTML = `<div class='tab'><i class="fa-solid fa-link"></i><div class='display'>${url}</div><div class='flexible'></div><button class='btn2 del'><i class="fa-solid fa-xmark"></i></button></div>`
+    const displayText = label || url
+    item.innerHTML = `<div class='tab'><i class="fa-solid fa-link"></i><div class='display'>${escapeHtml(displayText)}</div><div class='flexible'></div><button class='btn2 del'><i class="fa-solid fa-xmark"></i></button></div>`
 
     document.querySelector(".temp-menu").appendChild(item)
 
@@ -5426,23 +5435,6 @@ body.dark .pinokio-fork-dropdown-remote, body.dark .pinokio-publish-dropdown-rem
       renderSelection()
     }
   }
-  if (document.querySelector("#genlog")) {
-    document.querySelector("#genlog").addEventListener("click", (e) => {
-      e.preventDefault()
-      e.stopPropagation()
-      e.target.innerHTML = '<i class="fa-solid fa-circle-notch fa-spin"></i>'
-      fetch("/pinokio/log", {
-        method: "post",
-      }).then((res) => {
-        let btn = document.querySelector("#genlog")
-        let btn2 = document.querySelector("#downloadlogs")
-        btn2.classList.remove("hidden") 
-        btn.classList.add("hidden")
-        btn.innerHTML = '<i class="fa-solid fa-circle-check"></i> Generated!'
-        //btn.classList.add("hidden")
-      })
-    })
-  }
   let init = document.querySelector("[data-init]")
   if (init) {
     init.click()
@@ -5567,6 +5559,41 @@ body.dark .pinokio-fork-dropdown-remote, body.dark .pinokio-publish-dropdown-rem
     const defaultPushUri = readDataAttr(fsStatusEl, 'data-push-uri')
     const defaultForkUri = readDataAttr(fsStatusEl, 'data-fork-uri')
 
+    const buildWorkspaceLogsUrl = () => {
+      if (workspaceName && workspaceName.length > 0) {
+        return `/logs?workspace=${encodeURIComponent(workspaceName)}`
+      }
+      return '/logs'
+    }
+
+    const focusOrCreateLogsTab = async () => {
+      const relativeUrl = buildWorkspaceLogsUrl()
+      const absoluteUrl = new URL(relativeUrl, window.location.origin).toString()
+      const existingLink = Array.from(document.querySelectorAll('.temp-menu .frame-link')).find((link) => {
+        return link.href === absoluteUrl
+      })
+      if (existingLink) {
+        const display = existingLink.querySelector('.display')
+        if (display) {
+          display.textContent = 'Logs'
+        }
+        existingLink.click()
+        return
+      }
+      const { tab } = await addTab(relativeUrl, { label: 'Logs' })
+      requestAnimationFrame(() => {
+        tab.click()
+      })
+    }
+
+    document.querySelectorAll('#fs-status .fs-logs .fs-status-btn').forEach((button) => {
+      button.addEventListener('click', async (event) => {
+        event.preventDefault()
+        event.stopPropagation()
+        await focusOrCreateLogsTab()
+      })
+    })
+
     const encodeRepoPath = (value) => {
       if (typeof value !== 'string' || value.length === 0) {
         return ''

package/server/views/bookmarklet.ejs

@@ -141,7 +141,7 @@
       <ol class="steps">
         <li>Make sure your bookmarks bar is visible (View → Toolbars → Bookmarks Toolbar, or press <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>B</kbd>).</li>
         <li>Drag the “Pinokio Create” button above to the bar.</li>
-        <li>When you are on a page you want to automate, click the bookmark. Pinokio will open at <code><%= baseUrl %>/home?create=1</code> with the current page URL in the prompt field.</li>
+        <li>When you are on a page you want to automate, click the bookmark. Pinokio will open at <code><%= baseUrl %>/create</code> with the current page URL in the prompt field.</li>
       </ol>
     </section>
 

package/server/views/bootstrap.ejs

@@ -82,6 +82,7 @@ body {
 <script src="/notyq.js"></script>
 <script src="/pinokio-touch.js"></script>
 <script src="/xterm.js"></script>
+<script src="/xterm-inline-bridge.js"></script>
 <script src="/xterm-addon-fit.js"></script>
 <script src="/xterm-addon-web-links.js"></script>
 <script src="/xterm-theme.js"></script>

package/server/views/connect.ejs

@@ -925,8 +925,7 @@ document.addEventListener('DOMContentLoaded', function() {
   <% } %>
   <a href="/connect" class='tab selected'><i class="fa-solid fa-plug"></i><div class='caption'>Login</div></a>
   <a class='tab' href="<%=portal%>" target="_blank"><i class="fa-solid fa-question"></i><div class='caption'>Help</div></a>
-  <a class='tab' id='genlog'><i class="fa-solid fa-laptop-code"></i><div class='caption'>Logs</div></a>
-  <a id='downloadlogs' download class='hidden btn2' href="/pinokio/logs.zip"><i class="fa-solid fa-download"></i><div class='caption'>Download logs</div></a>
+  <a class='tab' id='genlog' href="/logs"><i class="fa-solid fa-laptop-code"></i><div class='caption'>Logs</div></a>
   <a class='tab' href="/screenshots"><i class="fa-solid fa-camera"></i><div class='caption'>Screenshots</div></a>
   <a class='tab' href="/tools"><i class="fa-solid fa-toolbox"></i><div class='caption'>Installed Tools</div></a>
   <a class='tab' href="/agents"><i class="fa-solid fa-robot"></i><div class='caption'>Agents</div></a>

package/server/views/create.ejs

@@ -0,0 +1,63 @@
+<html>
+<head>
+<title>Create Launcher</title>
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
+<link href="/xterm.min.css" rel="stylesheet" />
+<link href="/css/fontawesome.min.css" rel="stylesheet" />
+<link href="/css/solid.min.css" rel="stylesheet" />
+<link href="/css/regular.min.css" rel="stylesheet" />
+<link href="/css/brands.min.css" rel="stylesheet" />
+<link href="/markdown.css" rel="stylesheet" />
+<link href="/noty.css" rel="stylesheet" />
+<link href="/style.css" rel="stylesheet" />
+<link href="/urldropdown.css" rel="stylesheet" />
+<% if (agent === "electron") { %>
+  <link href="/electron.css" rel="stylesheet" />
+<% } %>
+</head>
+<body class="<%= theme %>" data-agent="<%= agent %>">
+<header class="navheader grabbable">
+<h1>
+<a class="home" href="/home"><img class="icon" src="/pinokio-black.png" /></a>
+</h1>
+</header>
+<main>
+  <div class="container create-page">
+    <div id="create-page-root" class="create-page-root" aria-live="polite"></div>
+  </div>
+</main>
+<script src="/Socket.js"></script>
+<script src="/urldropdown.js"></script>
+<script src="/create-launcher.js"></script>
+<script src="/common.js"></script>
+<script>
+(function() {
+  const defaults = <%- JSON.stringify(defaults || {}) %>;
+  document.addEventListener('DOMContentLoaded', function() {
+    if (typeof initUrlDropdown === 'function') {
+      initUrlDropdown({ clearBehavior: 'empty' });
+    }
+    let mounted = false;
+    const mount = () => {
+      if (mounted) {
+        return;
+      }
+      if (window.CreateLauncher && typeof window.CreateLauncher.mountPage === 'function') {
+        const root = document.getElementById('create-page-root');
+        window.CreateLauncher.mountPage(root, defaults);
+        mounted = true;
+      }
+    };
+    if (window.CreateLauncher) {
+      mount();
+    } else {
+      window.addEventListener('CreateLauncherReady', mount, { once: true });
+      // Fallback: try again after a tick in case the script loads without emitting
+      setTimeout(mount, 0);
+    }
+  });
+})();
+</script>
+</body>
+</html>

package/server/views/editor.ejs

@@ -6,6 +6,7 @@
 <script src="/noty.js"></script>
 <script src="/notyq.js"></script>
 <script src="/xterm.js"></script>
+<script src="/xterm-inline-bridge.js"></script>
 <script src="/xterm-addon-fit.js"></script>
 <script src="/xterm-addon-web-links.js"></script>
 <script src="/xterm-theme.js"></script>
@@ -13,6 +14,7 @@
 <script src="/xterm-addon-search-bar.js"></script>
 <script src="/sweetalert2.js"></script>
 <script src="/Socket.js"></script>
+<script src="/resizeSync.js"></script>
 <script src="/terminal-settings.js"></script>
 <script src="/pinokio-touch.js"></script>
 <script src="/common.js"></script>
@@ -21,6 +23,7 @@
 <script src="/nav.js"></script>
 <script src="/autoexpand.js"></script>
 <script src="/modalinput.js"></script>
+<script src="/htmlmodal.js"></script>
 <script src="/simplemodal.js"></script>
 <script src="/waitmodal.js"></script>
 <script src="/notifyinput.js"></script>
@@ -242,6 +245,10 @@ document.addEventListener("DOMContentLoaded", async () => {
   class RPC {
     constructor() {
       this.socket = new Socket()
+      this.resizeSync = window.PinokioResizeSync.create({
+        socket: this.socket,
+        getShellId: () => shell_id
+      })
     }
     finished() {
     /*
@@ -271,6 +278,7 @@ document.addEventListener("DOMContentLoaded", async () => {
         //let cwd = "<%=execUrl%>"
         //let cwd = "~" + location.pathname
         this.socket.close()
+        this.resizeSync.reset()
         this.socket.run({
           method: "fs.write",
           params: {
@@ -362,6 +370,7 @@ document.addEventListener("DOMContentLoaded", async () => {
             this.socket.close()
             document.querySelector(".run .play").classList.remove("hidden")
             document.querySelector(".run .stop").classList.add("hidden")
+            this.resizeSync.reset()
 
             <% if (kill_message) { %>
               n.Noty({
@@ -383,13 +392,18 @@ document.addEventListener("DOMContentLoaded", async () => {
 
           } else if (packet.type === 'connect') {
 //            document.querySelector(".terminal-container").classList.remove("hidden")
+            const previousShellId = shell_id
             if (packet.data.id) {
               shell_id = packet.data.id
             }
+            if (!previousShellId && shell_id) {
+              this.resizeSync.sendInitial()
+            }
             if (packet.data) {
               if (packet.data.shell) {
                 shell_id = packet.data.shell
               }
+              this.resizeSync.sendInitial()
               if (packet.data.state) {
                 this.write(packet.data.state)
               }
@@ -407,6 +421,8 @@ document.addEventListener("DOMContentLoaded", async () => {
             document.querySelector(".run .play").classList.add("hidden")
             document.querySelector(".run .starting").classList.add("hidden")
             document.querySelector(".run .stop").classList.remove("hidden")
+          } else if (packet.type === 'resize') {
+            this.resizeSync.handleResizePacket(packet)
           } else if (packet.type === 'wait.end') {
             try {
               Swal.close()
@@ -418,6 +434,10 @@ document.addEventListener("DOMContentLoaded", async () => {
             })
           } else if (packet.type === 'wait') {
             await WaitModal(packet.data)
+          } else if (packet.type === "htmlmodal") {
+            if (window.HtmlModal && typeof window.HtmlModal.handle === 'function') {
+              window.HtmlModal.handle(packet, this.socket)
+            }
           } else if (packet.type === "modal") {
             await SimpleModal(packet.data)
             this.socket.respond({
@@ -594,9 +614,13 @@ document.addEventListener("DOMContentLoaded", async () => {
               document.querySelector("#error-screen").classList.add("hidden")
             })
             */
-            instance.mark(packet.event)
-            let element = document.querySelector("mark")
-            element.scrollIntoView({ behavior: "smooth", block: "center" });
+            if (packet.event) {
+              instance.mark(packet.event)
+              let element = document.querySelector("#error-screen mark")
+              if (element) {
+                element.scrollIntoView({ behavior: "smooth", block: "center" })
+              }
+            }
 
           } else if (packet.type === "event") {
             if (packet.data === "stop") {
@@ -721,8 +745,16 @@ document.addEventListener("DOMContentLoaded", async () => {
         fitAddon.fit();
         this.fit = fitAddon
         this.term = term
+        this.resizeSync.updateTerm(this.term, this.fit, this.socket)
       }
       this.term.focus()
+      if (!this.observer) {
+        this.observer = new ResizeObserver(() => {
+          this.fit.fit()
+          this.resizeSync.sendResize(this.term.cols, this.term.rows)
+        })
+        this.observer.observe(document.body)
+      }
     }
   }
   <% if (!install_required) { %>
@@ -920,7 +952,7 @@ const reloadMemory = async () => {
         <span class='starting hidden'><i class="fa-solid fa-circle-notch fa-spin"></i> Starting...</span>
         <span class='stop hidden'><i class="fa-solid fa-stop"></i> Stop</span>
       </div>
-      <button class='btn' id='open-fs' data-filepath="<%=filepath%>"><i class="fa-solid fa-eye"></i> View File</button>
+      <button class='btn' id='open-fs' data-filepath="<%=filepath%>"><i class="fa-solid fa-eye"></i> Script</button>
       <!--
       <button class='btn' id='open-log' data-logpath="<%=logpath%>"><i class="fa-solid fa-align-left"></i> View Logs</button>
       -->

package/server/views/index.ejs

@@ -743,8 +743,7 @@ body.dark aside .current.selected {
   <% } %>
   <a href="/connect" class='tab'><i class="fa-solid fa-plug"></i><div class='caption'>Login</div></a>
   <a class='tab' href="<%=portal%>" target="_blank"><i class="fa-solid fa-question"></i><div class='caption'>Help</div></a>
-  <a class='tab' id='genlog'><i class="fa-solid fa-laptop-code"></i><div class='caption'>Logs</div></a>
-  <a id='downloadlogs' download class='hidden btn2' href="/pinokio/logs.zip"><i class="fa-solid fa-download"></i><div class='caption'>Download logs</div></a>
+  <a class='tab' id='genlog' href="/logs"><i class="fa-solid fa-laptop-code"></i><div class='caption'>Logs</div></a>
   <a class='tab' href="/screenshots"><i class="fa-solid fa-camera"></i><div class='caption'>Screenshots</div></a>
   <a class='tab' href="/tools"><i class="fa-solid fa-toolbox"></i><div class='caption'>Installed Tools</div></a>
   <a class='tab' href="/agents"><i class="fa-solid fa-robot"></i><div class='caption'>Agents</div></a>

package/server/views/index2.ejs

@@ -274,8 +274,7 @@ body.dark .open-menu, body.dark .browse {
     </button>
   <div class='nav-btns'>
     <a class='btn2' href="<%=portal%>" target="_blank"><div><i class="fa-solid fa-question"></i></div><div>Help</div></a>
-    <button class='btn2' id='genlog'><div><i class="fa-solid fa-laptop-code"></i></div><div>Logs</div></button>
-    <a id='downloadlogs' download class='hidden btn2' href="/pinokio/logs.zip"><div><i class="fa-solid fa-download"></i></div><div>Download logs</div></a>
+    <a class='btn2' id='genlog' href="/logs"><div><i class="fa-solid fa-laptop-code"></i></div><div>Logs</div></a>
     <a class='btn2' href="/home?mode=settings"><div><i class="fa-solid fa-gear"></i></div><div>Settings</div></a>
     <button id='new-window' title='open a new window' class='btn2' data-agent="<%=agent%>"><div><i class="fa-solid fa-plus"></i></div><div>Window</div></button>
   </div>

package/server/views/init/index.ejs

@@ -1497,11 +1497,13 @@ body.dark .ace-editor {
 <script src="/report.js"></script>
 <script src="/normalize.js"></script>
 <script src="/Socket.js"></script>
+<script src="/resizeSync.js"></script>
 <script src="/terminal-settings.js"></script>
 <script src="/pinokio-touch.js"></script>
 <script src="/noty.js"></script>
 <script src="/notyq.js"></script>
 <script src="/xterm.js"></script>
+<script src="/xterm-inline-bridge.js"></script>
 <script src="/xterm-addon-fit.js"></script>
 <script src="/xterm-addon-web-links.js"></script>
 <script src="/xterm-theme.js"></script>
@@ -1948,8 +1950,7 @@ body.dark .ace-editor {
   <% } %>
   <a href="/connect" class='tab'><i class="fa-solid fa-plug"></i><div class='caption'>Login</div></a>
   <a class='tab' href="<%=portal%>" target="_blank"><i class="fa-solid fa-question"></i><div class='caption'>Help</div></a>
-  <a class='tab' id='genlog'><i class="fa-solid fa-laptop-code"></i><div class='caption'>Logs</div></a>
-  <a id='downloadlogs' download class='hidden btn2' href="/pinokio/logs.zip"><i class="fa-solid fa-download"></i><div class='caption'>Download logs</div></a>
+  <a class='tab' id='genlog' href="/logs"><i class="fa-solid fa-laptop-code"></i><div class='caption'>Logs</div></a>
   <a class='tab' href="/screenshots"><i class="fa-solid fa-camera"></i><div class='caption'>Screenshots</div></a>
   <a class='tab' href="/tools"><i class="fa-solid fa-toolbox"></i><div class='caption'>Installed Tools</div></a>
   <a class='tab' href="/agents"><i class="fa-solid fa-robot"></i><div class='caption'>Agents</div></a>
@@ -1963,6 +1964,10 @@ body.dark .ace-editor {
 <script>
 let shell_id
 let socket = new Socket()
+const resizeSync = window.PinokioResizeSync.create({
+  socket,
+  getShellId: () => shell_id
+})
 const resizeAITextarea = () => {
   let textarea = document.querySelector(".ai-container .ai-tab-content.selected textarea")
   textarea.style.height = "";
@@ -2684,35 +2689,21 @@ const createTerm = async (_theme) => {
     term.loadAddon(new WebLinksAddon.WebLinksAddon());
   <% } %>
   fitAddon.fit();
-
-  term.onKey(({ key }) => {
-    console.log({ key, shell_id })
-    if (socket) {
-      if (shell_id) {
-        socket.run({
-          key,
-          id: shell_id
-        })
-      }
+  resizeSync.updateTerm(term, fitAddon, socket)
+
+  term.onData((data) => {
+    console.log({ key: data, shell_id })
+    if (socket && shell_id) {
+      socket.run({
+        key: data,
+        id: shell_id
+      })
     }
   });
 
   let observer = new ResizeObserver(() => {
     fitAddon.fit()
-    console.log(`Resized to ${term.cols}x${term.rows}`);
-    // Trigger your custom handler here
-    if (socket) {
-      if (shell_id) {
-        console.log("RESIZE", { shell_id, cols: term.cols, rows: term.rows })
-        socket.run({
-          resize: {
-            cols: term.cols,
-            rows: term.rows,
-          },
-          id: shell_id
-        })
-      }
-    }
+    resizeSync.sendResize(term.cols, term.rows)
   });
   observer.observe(document.body)
 
@@ -2732,6 +2723,7 @@ async function displayResults(config) {
       term.write(text)
     }
   }
+  resizeSync.reset()
   socket.run({
     id: "kernel.proto.create",
     method: "kernel.proto.create",
@@ -2758,7 +2750,12 @@ async function displayResults(config) {
     } else if (packet.type === "stream") {
       // set the current shell id
       if (packet.data.id) {
-        shell_id = packet.data.id
+        if (!shell_id) {
+          shell_id = packet.data.id
+          resizeSync.sendInitial()
+        } else {
+          shell_id = packet.data.id
+        }
       }
       if (packet.data.raw) {
         write(packet.data.raw)
@@ -2773,12 +2770,23 @@ async function displayResults(config) {
     } else if (packet.type === 'disconnect') {
       term.write("\r\nDisconnected...\r\n")
       socket.close()
+      resizeSync.reset()
     } else if (packet.type === 'connect') {
       if (packet.data) {
         if (packet.data.shell) {
-          shell_id = packet.data.shell
+          if (!shell_id) {
+            shell_id = packet.data.shell
+            resizeSync.sendInitial()
+          } else {
+            shell_id = packet.data.shell
+          }
+        }
+        if (packet.data.state) {
+          write(packet.data.state)
         }
       }
+    } else if (packet.type === 'resize') {
+      resizeSync.handleResizePacket(packet)
     }
   }).then((res) => {
     console.log("Ended", res)

package/server/views/install.ejs

@@ -120,10 +120,12 @@ body {
 <script src="/noty.js"></script>
 <script src="/notyq.js"></script>
 <script src="/xterm.js"></script>
+<script src="/xterm-inline-bridge.js"></script>
 <script src="/xterm-addon-fit.js"></script>
 <script src="/xterm-addon-web-links.js"></script>
 <script src="/xterm-theme.js"></script>
 <script src="/Socket.js"></script>
+<script src="/resizeSync.js"></script>
 <script src="/terminal-settings.js"></script>
 <script src="/pinokio-touch.js"></script>
 <!--
@@ -209,11 +211,16 @@ const createTerm = async (_theme) => {
 document.addEventListener("DOMContentLoaded", async () => {
   const n = new N()
   let socket = new Socket()
+  const resizeSync = window.PinokioResizeSync.create({
+    socket,
+    getShellId: () => shell_id
+  })
   <% if (theme === "dark") { %>
   let term = await createTerm(xtermTheme.FrontEndDelight)
   <% } else { %>
   let term = await createTerm(xtermTheme.Tomorrow)
   <% } %>
+  resizeSync.updateTerm(term, fitAddon, socket)
   let params = new URLSearchParams(location.search)
   let entries = [...params.entries()]
   let options;
@@ -223,37 +230,20 @@ document.addEventListener("DOMContentLoaded", async () => {
       options[key] = value;
     }
   }
-  term.onKey((e) => {
+  term.onData((data) => {
     if (shell_id) {
       socket.emit({
         id: shell_id,
-        key: e.key
+        key: data
       })
     }
-    //console.log({ e })
-    //socket.emit({
-    //  id: location.pathname,
-    //  emit: e.key
-    //})
   })
   let observer = new ResizeObserver(() => {
     fitAddon.fit()
-    console.log(`Resized to ${term.cols}x${term.rows}`);
-    // Trigger your custom handler here
-    if (socket) {
-      console.log({ shell_id, cols: term.cols, rows: term.rows })
-      if (shell_id) {
-        socket.run({
-          resize: {
-            cols: term.cols,
-            rows: term.rows,
-          },
-          id: shell_id
-        })
-      }
-    }
+    resizeSync.sendResize(term.cols, term.rows)
   });
   observer.observe(document.body)
+  resizeSync.reset()
   await new Promise((resolve, reject) => {
     console.log({ cols: term.cols, rows: term.rows })
     socket.run({
@@ -269,11 +259,17 @@ document.addEventListener("DOMContentLoaded", async () => {
       console.log("packet", packet)
       if (packet.type === "stream") {
         if (packet.data.id) {
-          shell_id = packet.data.id
+          if (!shell_id) {
+            shell_id = packet.data.id
+            resizeSync.sendInitial()
+          } else {
+            shell_id = packet.data.id
+          }
         }
         term.write(packet.data.raw)
       } else if (packet.type === "shell.kill") {
         socket.close()
+        resizeSync.reset()
       } else if (packet.type === "result") {
         resolve() 
       } else if (packet.type === "error") {
@@ -327,6 +323,8 @@ document.addEventListener("DOMContentLoaded", async () => {
           }
           n.Noty(payload)
         }
+      } else if (packet.type === "resize") {
+        resizeSync.handleResizePacket(packet)
       } else if (packet.type === "input") {
         let params = packet.data
         /*

package/server/views/layout.ejs

@@ -16,8 +16,7 @@
     }
 
     html, body {
-      height: var(--layout-viewport-height);
-      min-height: var(--layout-viewport-height);
+      height: 100%;
       width: 100%;
       margin: 0;
       padding: 0;
@@ -38,11 +37,6 @@
       background: var(--layout-gutter-bg); 
     }
 
-    body {
-      display: flex;
-      flex-direction: column;
-    }
-
     body[data-agent="electron"] > #dragger {
       display: block;
     }
@@ -62,7 +56,7 @@
     #layout-root {
       position: relative;
       width: 100%;
-      flex-grow: 1;
+      height: 100%;
       background: var(--layout-background);
       overflow: hidden;
     }