pinokiod 7.5.21 → 7.5.24

package/server/views/app.ejs

@@ -727,27 +727,38 @@ body.dark .browserview-network-status .browserview-network-status-secondary:focu
   75% { transform: translate(0, 11px); }
 }
 .community-drawer {
-  display: none;
-  flex: 0 0 auto;
-  width: var(--community-width, 360px);
-  min-width: 240px;
+  display: flex;
+  flex: 0 0 0;
+  width: 0;
+  min-width: 0;
+  max-width: 0;
   min-height: 0;
-  border-left: 1px solid rgba(0,0,0,0.08);
+  box-sizing: border-box;
+  border-left: 0 solid rgba(0,0,0,0.08);
   background: #f7f8fa;
+  opacity: 0;
+  overflow: hidden;
+  pointer-events: none;
+  transform: translateX(10px);
 }
 body.dark .community-drawer {
   border-left-color: rgba(255,255,255,0.08);
   background: #0f1115;
 }
 .community-resizer {
-  display: none;
-  flex: 0 0 7px;
+  display: flex;
+  flex: 0 0 0;
+  width: 0;
+  min-width: 0;
   align-items: stretch;
   justify-content: center;
   cursor: col-resize;
   touch-action: none;
   outline: none;
   background: transparent;
+  opacity: 0;
+  overflow: hidden;
+  pointer-events: none;
 }
 .community-resizer::before {
   content: '';
@@ -773,13 +784,27 @@ body.dark .community-resizer:focus-visible::before {
   background: var(--pinokio-sidebar-separator-focus, rgba(96, 165, 250, 0.6));
 }
 .appcanvas.community-open .community-resizer {
-  display: flex;
+  flex: 0 0 7px;
+  width: 7px;
+  min-width: 7px;
+  opacity: 1;
+  pointer-events: auto;
 }
 .appcanvas.community-open .community-drawer {
-  display: flex;
+  flex: 0 0 var(--community-width, 360px);
+  width: var(--community-width, 360px);
+  max-width: var(--community-width, 360px);
+  border-left-width: 1px;
+  opacity: 1;
+  pointer-events: auto;
+  transform: translateX(0);
 }
 .appcanvas.community-expanded .community-resizer {
-  display: none;
+  flex-basis: 0;
+  width: 0;
+  min-width: 0;
+  opacity: 0;
+  pointer-events: none;
 }
 .appcanvas.community-expanded .community-drawer {
   position: absolute;
@@ -1362,27 +1387,38 @@ body.dark .mobile-nav-logs.has-new::after {
   }
 }
 .ask-ai-drawer {
-  display: none;
-  flex: 0 0 auto;
-  width: var(--ask-ai-width, 560px);
-  min-width: 240px;
+  display: flex;
+  flex: 0 0 0;
+  width: 0;
+  min-width: 0;
+  max-width: 0;
   min-height: 0;
-  border-left: 1px solid rgba(0,0,0,0.08);
+  box-sizing: border-box;
+  border-left: 0 solid rgba(0,0,0,0.08);
   background: #f8fafc;
+  opacity: 0;
+  overflow: hidden;
+  pointer-events: none;
+  transform: translateX(10px);
 }
 body.dark .ask-ai-drawer {
   border-left-color: rgba(255,255,255,0.08);
   background: #0f1115;
 }
 .ask-ai-resizer {
-  display: none;
-  flex: 0 0 7px;
+  display: flex;
+  flex: 0 0 0;
+  width: 0;
+  min-width: 0;
   align-items: stretch;
   justify-content: center;
   cursor: col-resize;
   touch-action: none;
   outline: none;
   background: transparent;
+  opacity: 0;
+  overflow: hidden;
+  pointer-events: none;
 }
 .ask-ai-resizer::before {
   content: '';
@@ -1408,10 +1444,20 @@ body.dark .ask-ai-resizer:focus-visible::before {
   background: var(--pinokio-sidebar-separator-focus, rgba(96, 165, 250, 0.6));
 }
 .appcanvas.panel-open .ask-ai-resizer {
-  display: flex;
+  flex: 0 0 7px;
+  width: 7px;
+  min-width: 7px;
+  opacity: 1;
+  pointer-events: auto;
 }
 .appcanvas.panel-open .ask-ai-drawer {
-  display: flex;
+  flex: 0 0 var(--ask-ai-width, 560px);
+  width: var(--ask-ai-width, 560px);
+  max-width: var(--ask-ai-width, 560px);
+  border-left-width: 1px;
+  opacity: 1;
+  pointer-events: auto;
+  transform: translateX(0);
 }
 .ask-ai-drawer-inner {
   display: flex;
@@ -2088,12 +2134,26 @@ body.dark .appcanvas > aside {
   transition: flex-basis 190ms cubic-bezier(0.25, 1, 0.5, 1), width 190ms cubic-bezier(0.25, 1, 0.5, 1), max-width 190ms cubic-bezier(0.25, 1, 0.5, 1), margin 190ms cubic-bezier(0.25, 1, 0.5, 1), opacity 140ms cubic-bezier(0.25, 1, 0.5, 1), transform 190ms cubic-bezier(0.25, 1, 0.5, 1);
 }
 
+.appcanvas.right-panel-motion-ready .ask-ai-drawer,
+.appcanvas.right-panel-motion-ready .ask-ai-resizer,
+.appcanvas.right-panel-motion-ready .community-drawer,
+.appcanvas.right-panel-motion-ready .community-resizer {
+  transition: flex-basis 190ms cubic-bezier(0.25, 1, 0.5, 1), width 190ms cubic-bezier(0.25, 1, 0.5, 1), max-width 190ms cubic-bezier(0.25, 1, 0.5, 1), min-width 190ms cubic-bezier(0.25, 1, 0.5, 1), opacity 140ms cubic-bezier(0.25, 1, 0.5, 1), transform 190ms cubic-bezier(0.25, 1, 0.5, 1);
+}
+
 .appcanvas.sidebar-resizing > aside,
 .appcanvas.sidebar-resizing > aside .menu-container,
 .appcanvas.sidebar-resizing .appcanvas-resizer {
   transition: none !important;
 }
 
+.appcanvas.right-panel-resizing .ask-ai-drawer,
+.appcanvas.right-panel-resizing .ask-ai-resizer,
+.appcanvas.right-panel-resizing .community-drawer,
+.appcanvas.right-panel-resizing .community-resizer {
+  transition: none !important;
+}
+
 .appcanvas.sidebar-collapsed > aside {
   flex: 0 0 0;
   width: 0;
@@ -2125,7 +2185,11 @@ body.dark .appcanvas > aside {
   .sidebar-toggle-content,
   .appcanvas.sidebar-motion-ready > aside,
   .appcanvas.sidebar-motion-ready > aside .menu-container,
-  .appcanvas.sidebar-motion-ready .appcanvas-resizer {
+  .appcanvas.sidebar-motion-ready .appcanvas-resizer,
+  .appcanvas.right-panel-motion-ready .ask-ai-drawer,
+  .appcanvas.right-panel-motion-ready .ask-ai-resizer,
+  .appcanvas.right-panel-motion-ready .community-drawer,
+  .appcanvas.right-panel-motion-ready .community-resizer {
     transition-duration: 0.01ms !important;
   }
 }
@@ -7147,6 +7211,9 @@ header.navheader h1 {
   }
   .appcanvas.community-mode .community-drawer {
     display: flex;
+    opacity: 1;
+    pointer-events: auto;
+    transform: translateX(0);
     width: 100%;
     max-width: none;
     border-left: 0;
@@ -16461,9 +16528,20 @@ document.addEventListener("DOMContentLoaded", () => {
       askAiTrigger.setAttribute("aria-hidden", "false")
       askAiTrigger.setAttribute("aria-expanded", open ? "true" : "false")
     }
+    if (!open && drawer.contains(document.activeElement) && askAiTrigger) {
+      try {
+        askAiTrigger.focus({ preventScroll: true })
+      } catch (_) {
+        askAiTrigger.focus()
+      }
+    }
     drawer.setAttribute("aria-hidden", open ? "false" : "true")
+    if ("inert" in drawer) {
+      drawer.inert = !open
+    }
     if (resizer) {
       resizer.setAttribute("aria-hidden", open ? "false" : "true")
+      resizer.tabIndex = open ? 0 : -1
     }
   }
 
@@ -17174,6 +17252,9 @@ document.addEventListener("DOMContentLoaded", () => {
     let handlePointerUp = null
 
     const finishResizing = () => {
+      if (appcanvas) {
+        appcanvas.classList.remove("right-panel-resizing")
+      }
       if (!isResizing) {
         return
       }
@@ -17220,6 +17301,9 @@ document.addEventListener("DOMContentLoaded", () => {
       }
       event.preventDefault()
       isResizing = true
+      if (appcanvas) {
+        appcanvas.classList.add("right-panel-resizing")
+      }
       pointerId = event.pointerId
       startX = event.clientX
       startWidth = drawer.getBoundingClientRect().width
@@ -17938,6 +18022,16 @@ document.addEventListener("DOMContentLoaded", () => {
     }
     appcanvas.classList.toggle("community-mode", communityMode)
     if (communityMode) {
+      const ensureOpen = () => {
+        if (communityMode && !open) {
+          setOpen(true, { persist: false })
+        }
+      }
+      if (window.queueMicrotask) {
+        window.queueMicrotask(ensureOpen)
+      } else {
+        setTimeout(ensureOpen, 0)
+      }
       setExpanded(false)
     }
     if (communityModeToggle) {
@@ -18059,9 +18153,20 @@ document.addEventListener("DOMContentLoaded", () => {
       toggle.classList.toggle("selected", open)
       toggle.setAttribute("aria-expanded", open ? "true" : "false")
     }
+    if (!open && drawer.contains(document.activeElement) && toggle) {
+      try {
+        toggle.focus({ preventScroll: true })
+      } catch (_) {
+        toggle.focus()
+      }
+    }
     drawer.setAttribute("aria-hidden", open ? "false" : "true")
+    if ("inert" in drawer) {
+      drawer.inert = !open
+    }
     if (resizer) {
       resizer.setAttribute("aria-hidden", open ? "false" : "true")
+      resizer.tabIndex = open ? 0 : -1
     }
     if (persist) {
       try {
@@ -18541,6 +18646,9 @@ document.addEventListener("DOMContentLoaded", () => {
     let handlePointerUp = null
 
     const finishResizing = () => {
+      if (appcanvas) {
+        appcanvas.classList.remove("right-panel-resizing")
+      }
       if (!isResizing) {
         return
       }
@@ -18593,6 +18701,9 @@ document.addEventListener("DOMContentLoaded", () => {
       }
       event.preventDefault()
       isResizing = true
+      if (appcanvas) {
+        appcanvas.classList.add("right-panel-resizing")
+      }
       pointerId = event.pointerId
       startX = event.clientX
       startWidth = drawer.getBoundingClientRect().width
@@ -18604,6 +18715,16 @@ document.addEventListener("DOMContentLoaded", () => {
   }
 })()
 
+;(function() {
+  const appcanvas = document.querySelector(".appcanvas")
+  if (!appcanvas) {
+    return
+  }
+  requestAnimationFrame(() => {
+    appcanvas.classList.add("right-panel-motion-ready")
+  })
+})()
+
 <%- include('partials/launch_requirements_status_client') %>
 
 ;(function() {

package/server/views/plugin_detail.ejs

@@ -18,15 +18,35 @@
 </head>
 <body class="<%= theme %> main-sidebar-page task-launcher-page task-page plugin-page plugin-detail-page" data-agent="<%= agent %>">
   <% const currentPluginCwd = typeof pluginCwd === "string" ? pluginCwd : ""; %>
+  <%
+    const pluginDetailHref = plugin.pluginPath
+      ? `/plugin?path=${encodeURIComponent(plugin.pluginPath)}`
+      : "/plugin"
+    const githubStatusValue = !shareState.manageable
+      ? "Read only"
+      : shareState.remoteWebUrl && !shareState.hasPublished
+        ? "Remote created"
+        : shareState.remoteWebUrl && ((Number(shareState.changeCount || 0) > 0) || (Number(shareState.aheadCount || 0) > 0))
+          ? "Out of date"
+          : shareState.remoteWebUrl
+            ? "Connected"
+            : shareState.gitInitialized
+              ? "Local only"
+              : "Setup needed"
+    const canDeletePlugin = Boolean(plugin.pluginPath && shareState && shareState.ownership === "local" && shareState.dir)
+    const showHeaderWebsite = Boolean(!pluginUi.showSidebar && plugin.link)
+  %>
   <%- include('partials/app_navheader', { agent }) %>
   <main>
     <div class="task-container">
       <section class="task-shell">
         <header class="task-shell-header">
           <div class="task-shell-header-main">
-            <div class="task-shell-topline">
-              <p class="task-eyebrow">Plugins</p>
-            </div>
+            <nav class="task-breadcrumb plugin-detail-breadcrumb" aria-label="Plugin breadcrumb">
+              <a class="task-breadcrumb-link" href="/plugins">Plugins</a>
+              <span class="task-breadcrumb-separator" aria-hidden="true">&gt;</span>
+              <a class="task-breadcrumb-link task-breadcrumb-current" href="<%= pluginDetailHref %>" aria-current="page"><%= plugin.title %></a>
+            </nav>
             <div class="plugin-detail-title-row">
               <% if (plugin.image) { %>
                 <img class="plugin-detail-title-art" src="<%= plugin.image %>" alt="<%= plugin.title %> icon">
@@ -48,16 +68,26 @@
               </div>
             <% } %>
           </div>
+          <% if (showHeaderWebsite || canDeletePlugin) { %>
           <div class="task-header-actions">
-            <a class="task-link-button" href="/plugins">
-              <i class="fa-solid fa-arrow-left" aria-hidden="true"></i>
-              <span>Back</span>
+            <% if (showHeaderWebsite) { %>
+            <a class="task-link-button" href="<%= plugin.link %>" target="_blank" rel="noopener noreferrer">
+              <i class="fa-solid fa-arrow-up-right-from-square" aria-hidden="true"></i>
+              <span>Website</span>
             </a>
+            <% } %>
+            <% if (canDeletePlugin) { %>
+            <button class="task-button danger" type="button" data-plugin-delete aria-label="Delete <%= plugin.title %> plugin">
+              <i class="fa-solid fa-trash" aria-hidden="true"></i>
+              <span>Delete</span>
+            </button>
+            <% } %>
           </div>
+          <% } %>
         </header>
 
         <div class="task-shell-body">
-          <div class="task-detail-layout">
+          <div class="task-detail-layout <%= pluginUi.showSidebar ? '' : 'task-detail-layout-single' %>">
             <div class="task-detail-main">
               <section class="task-section plugin-detail-actions-section" data-plugin-actions-section>
                 <div class="task-section-head">
@@ -160,19 +190,24 @@
               <% } %>
             </div>
 
+            <% if (pluginUi.showSidebar) { %>
             <aside class="task-share-section task-detail-sidebar">
               <div class="task-section-head">
                 <h2 class="task-section-title">Plugin status</h2>
               </div>
               <div class="task-side-stack">
-                <div class="task-meta-row task-meta-row-compact">
-                  <div class="task-meta-chip">
-                    <span class="task-meta-chip-label"><%= pluginUi.sourceLabel %></span>
-                    <span class="task-meta-chip-value"><%= pluginUi.sourceValue %></span>
+                <div class="plugin-detail-status-list">
+                  <div class="plugin-detail-status-row">
+                    <span class="plugin-detail-status-label"><%= pluginUi.sourceLabel %></span>
+                    <span class="plugin-detail-status-value"><%= pluginUi.sourceValue %></span>
+                  </div>
+                  <div class="plugin-detail-status-row">
+                    <span class="plugin-detail-status-label"><%= pluginUi.statusLabel %></span>
+                    <span class="plugin-detail-status-value"><%= pluginUi.statusValue %></span>
                   </div>
-                  <div class="task-meta-chip">
-                    <span class="task-meta-chip-label"><%= pluginUi.statusLabel %></span>
-                    <span class="task-meta-chip-value"><%= pluginUi.statusValue %></span>
+                  <div class="plugin-detail-status-row">
+                    <span class="plugin-detail-status-label"><%= pluginUi.githubPanelTitle %></span>
+                    <span class="plugin-detail-status-value" data-plugin-share-note><%= githubStatusValue %></span>
                   </div>
                 </div>
                 <div class="task-actions task-detail-status-actions">
@@ -192,10 +227,6 @@
               </div>
 
               <section class="task-side-group">
-                <div class="task-section-head">
-                  <h2 class="task-section-title"><%= pluginUi.githubPanelTitle %></h2>
-                  <div class="task-section-note" data-plugin-share-note></div>
-                </div>
                 <% if (pluginUi.canManageSource) { %>
                   <div class="task-share-next-step-main">
                     <h3 class="task-share-next-step-title" data-plugin-share-next-title></h3>
@@ -224,12 +255,12 @@
                       </div>
                     </div>
                   </form>
-                  <div class="task-actions plugin-share-static-actions">
+                  <div class="task-actions plugin-share-static-actions <%= shareState.remoteWebUrl || (shareState.remoteUrl && shareState.githubConnected) ? '' : 'task-hidden' %>" data-plugin-share-static-actions>
                     <a class="task-link-button <%= shareState.remoteWebUrl ? '' : 'task-hidden' %>" href="<%= shareState.remoteWebUrl || '#' %>" target="_blank" rel="noopener noreferrer" data-plugin-share-remote-link>
                       <i class="fa-brands fa-github" aria-hidden="true"></i>
                       <span>View on GitHub</span>
                     </a>
-                    <button class="task-button" type="button" data-plugin-share-refresh>
+                    <button class="task-button <%= shareState.remoteUrl && shareState.githubConnected ? '' : 'task-hidden' %>" type="button" data-plugin-share-refresh>
                       <i class="fa-solid fa-rotate-right" aria-hidden="true"></i>
                       <span>Check again</span>
                     </button>
@@ -247,6 +278,7 @@
                 <% } %>
               </section>
             </aside>
+            <% } %>
           </div>
         </div>
       </section>

package/server/views/plugins.ejs

@@ -869,12 +869,25 @@ body.dark {
           <h1 class='task-title'>Plugins</h1>
           <p class='task-description'>Open desktop editors externally or launch coding tools inside Pinokio.</p>
         </div>
+        <div class="task-header-actions">
+          <button type="button" class="task-link-button primary" data-universal-launcher-open="create_plugin">
+            <i class="fa-solid fa-plus" aria-hidden="true"></i>
+            <span>Create plugin</span>
+          </button>
+          <button type="button" class="task-link-button" data-universal-launcher-open="create_plugin" data-universal-launcher-mode="download">
+            <i class="fa-solid fa-download" aria-hidden="true"></i>
+            <span>Download</span>
+          </button>
+        </div>
       </header>
       <div class='task-shell-body plugin-shell-body'>
     <% if (plugins.length === 0) { %>
       <div class='plugin-empty task-empty-state'>
         <p>No plugins found. Clone or add plugin definitions under <code>~/pinokio/plugin</code> to see them listed here.</p>
-        <a class='task-link-button primary' href="/home?mode=download"><i class="fa-solid fa-download"></i> Download plugins</a>
+        <button type="button" class="task-button primary" data-universal-launcher-open="create_plugin" data-universal-launcher-mode="download">
+          <i class="fa-solid fa-download" aria-hidden="true"></i>
+          <span>Download plugins</span>
+        </button>
       </div>
     <% } else { %>
       <div class='plugin-category-layout'>

package/server/views/terminal.ejs

@@ -1910,6 +1910,8 @@ document.addEventListener("DOMContentLoaded", async () => {
           payload.id = runId
           payload.useId = true
         }
+        this.error = false
+        this.eventPanelStopPending = false
         this.resizeSync.reset()
         this.socket.run(payload, async (packet) => {
           if (packet.type === 'start') {
@@ -1973,6 +1975,14 @@ document.addEventListener("DOMContentLoaded", async () => {
             refreshParent(packet)
             pluginTerminalDiscoveryRefresher.clear()
             reloadMemory()
+            if (this.eventPanelStopPending) {
+              this.eventPanelStopPending = false
+              postMessageToAncestors({
+                e: "pinokio:event-panel-status",
+                success: !this.error,
+                status: "stopped"
+              })
+            }
             this.flushPendingTerminalWrite()
             this.term.write("\r\nDisconnected...\r\n")
             document.querySelector("#status-window").innerHTML = "<b>Ready</b>"
@@ -2339,11 +2349,7 @@ document.addEventListener("DOMContentLoaded", async () => {
           } else if (packet.type === "event") {
             if (packet.data === "stop") {
               if (window.__pinokioEventPanel) {
-                postMessageToAncestors({
-                  e: "pinokio:event-panel-status",
-                  success: !this.error,
-                  status: "stopped"
-                })
+                this.eventPanelStopPending = true
               }
               document.querySelector("#status-window").innerHTML = "<b>Ready</b>"
               setTimeout(() => {

package/test/launch-requirements.test.js

@@ -1153,6 +1153,33 @@ test("api.stop stops the canonical script path when the visible run id is decora
   })
 })
 
+test("api.stop disconnects when the script was deleted before stop cleanup", async () => {
+  await withApiStopFixture(async ({ api, launchPath, killedGroups, stopped, packets }) => {
+    const decoratedId = `${launchPath}?cwd=undefined`
+    api.resolveScript = async () => {
+      const error = new Error("missing script")
+      error.code = "ENOENT"
+      throw error
+    }
+    api.running[launchPath] = true
+    api.running[decoratedId] = true
+    api.kernel.memory.local[launchPath] = { live: true }
+    api.kernel.memory.local[decoratedId] = { live: true }
+
+    await api.stop({ params: { id: decoratedId } })
+
+    assert.equal(api.running[launchPath], undefined)
+    assert.equal(api.running[decoratedId], undefined)
+    assert.equal(api.kernel.memory.local[launchPath], undefined)
+    assert.equal(api.kernel.memory.local[decoratedId], undefined)
+    assert.ok(killedGroups.includes(launchPath), "canonical script group must be killed")
+    assert.ok(killedGroups.includes(decoratedId), "visible run id group must remain stopped")
+    assert.equal(stopped.length, 1)
+    assert.equal(stopped[0].scriptPath, launchPath)
+    assert.ok(packets.some((packet) => packet.type === "disconnect" && packet.id === decoratedId))
+  })
+})
+
 test("startup launch request does not block on its own startup status row", async () => {
   await withFixtureApps({
     target: {}