pinokiod 7.5.9 → 7.5.11

package/release_notes/8.0.0/ui.md

@@ -0,0 +1,91 @@
+# Pinokio 8.0.0 UI Updates
+
+This release brings Pinokio's main surfaces into a quieter, more consistent workspace: app discovery, app launch controls, logs, tools, plugins, skills, autolaunch, setup, and mobile navigation now share the same visual language and action patterns.
+
+The notes below are grouped by what users will notice, not by commit history. Screenshots were captured from the live local UI after comparing `de83785` to the current `HEAD`.
+
+## Cleaner App Discovery
+
+Pinokio's home screen now behaves more like a compact app manager. The sidebar is unified with the rest of the product, the app list is easier to scan, search and sort stay prominent, and each app row exposes quick actions without forcing users into the full app page first.
+
+![Home app list with unified sidebar](assets/home-sidebar-apps.png)
+
+The new action panel gives installed apps a focused command surface for common launch, install, update, reset, file, and dev actions. Related commands are grouped in one drawer, which reduces row clutter while keeping the next action close to the app.
+
+![Home app action panel](assets/home-app-actions.png)
+
+## App Workspace And Assistance
+
+App pages have been rebuilt around a more durable workspace shell. The page chrome, left command rail, right utility panels, app title area, status indicators, resource labels, and launch actions have been tightened so app-specific work feels connected to the rest of Pinokio.
+
+![App workspace chrome](assets/app-detail-header-actions.png)
+
+Ask AI now opens as an in-app assistance drawer with searchable terminal and desktop agents. Instead of a generic help entry point, users can choose from bundled agents such as Codex, Claude Code, Qwen Code, Antigravity, Cursor, VS Code, and desktop integrations directly inside the app context.
+
+![Ask AI agent drawer](assets/app-ask-ai-drawer.png)
+
+## Plugins, Agents, And Skills
+
+The Plugins page now separates terminal plugins from desktop plugins and shows install/manage affordances in a single list. This makes the new bundled native tools easier to understand: terminal agents launch inside Pinokio, while desktop tools launch externally.
+
+![Plugins and bundled agents](assets/plugins-agent-tools.png)
+
+Pinokio also has a new Skills management surface. Users can see where managed skills are stored, where they sync, whether each skill is valid, and whether it is currently enabled. The page also supports downloading skills from a Git URL.
+
+![Skills management](assets/skills-management.png)
+
+## Startup And Launch Requirements
+
+Autolaunch is now a first-class configuration page. Users can search installed apps, choose which launch script should run at startup, see how many apps are enabled, and toggle startup behavior without digging through app internals.
+
+![Autolaunch and launch script selection](assets/autolaunch-dependencies.png)
+
+Setup and requirements screens now present blocked routes as a clear checklist. When a destination such as Local network needs a package update, Pinokio shows what is installed, what needs attention, and the action required before continuing.
+
+![Network setup requirements](assets/network-phone-access.png)
+
+## Logs, Diagnostics, And Issue Reporting
+
+Logs have been redesigned around a file tree and live reader. Users can inspect logs from the machine, stream a selected file, clear the view, keep auto-scroll on, and generate a diagnostic zip from the same screen.
+
+![Logs file tree and live reader](assets/logs-terminal-reporting.png)
+
+Behind that surface, the issue-reporting flow is more capable: recent logs can be summarized, redacted, copied, handed to Ask AI, or prepared as a registry draft. Those states require an app failure or report context, so they are not shown in this static screenshot set.
+
+## Tools And Runtime Readiness
+
+The Tools page now groups package bundles with readiness counts, per-bundle install state, and package-level status. Users can see which runtime bundles are ready, which need installation, and which package manager modules are present without reading terminal output first.
+
+![Tools and package bundle readiness](assets/tools-runtime-management.png)
+
+## Login And Connected Services
+
+The Hugging Face login flow has been redesigned as a clear device-authorization page. It states the connection state, the credential provider, the reason to log in, and the next action without mixing auth details into unrelated setup UI.
+
+![Hugging Face login](assets/connect-huggingface-login.png)
+
+GitHub and git-related modals also received layout cleanup: modal tabs, footers, repository status controls, checkpoint rows, and history/diff areas were tightened so longer repository workflows fit better in the available space.
+
+## Mobile And Remote Access
+
+Mobile layouts now prioritize the app list and move primary navigation to a bottom bar. Search, sort, app cards, favorites, and action buttons remain reachable on a phone-width viewport without the desktop sidebar competing for space.
+
+![Mobile home and footer navigation](assets/mobile-home-footer-nav.png)
+
+Phone and LAN access also received targeted polish. QR and network access entry points are gated behind setup readiness, install terminals attach correctly over LAN, and the old mobile "Tap to connect" curtain has been replaced with a quieter first-interaction audio primer.
+
+## Smaller Visual Polish
+
+Several changes are intentionally broad but subtle:
+
+- Shared sidebar styling now covers home, app, tools, plugins, skills, logs, settings, setup, network, and auth pages.
+- App navigation is more responsive, especially where action labels previously wrapped or crowded the header.
+- Screenshot/capture modals, footer status indicators, popovers, tabs, and terminal controls use flatter, tighter styling.
+- Checkpoints rows, git history dialogs, network troubleshoot panels, and auth pages were normalized to match the newer page shell.
+- Hidden or unused toolbar buttons were removed from the visible chrome so users see fewer inactive controls.
+
+## Screenshot Coverage Notes
+
+Captured screenshots cover the major visible themes: home discovery, app actions, app workspace chrome, Ask AI, plugins, skills, autolaunch, setup requirements, logs, tools, connected-service login, and mobile navigation.
+
+Some UI states were not practical to screenshot without changing runtime state or forcing failures: failed-terminal fallback, report-draft creation, live dependency orchestration while an app is launching, completed peer-network routing, and git/checkpoint modal edge cases. Those changes are still included above because they are user-visible when the relevant workflow is active.

package/server/public/logs.js

@@ -505,7 +505,39 @@
       window.location.href = href
       return true
     }
-    dispatchAskAiLaunch(tool, prompt) {
+    createAskAiLaunchId() {
+      try {
+        if (window.crypto && typeof window.crypto.randomUUID === 'function') {
+          return window.crypto.randomUUID()
+        }
+      } catch (_) {}
+      return `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 10)}`
+    }
+    waitForAskAiLaunchAck(launchId, timeoutMs = 1500) {
+      return new Promise((resolve) => {
+        let settled = false
+        let timer = null
+        const finish = (value) => {
+          if (settled) return
+          settled = true
+          if (timer) {
+            window.clearTimeout(timer)
+          }
+          window.removeEventListener('message', onMessage)
+          resolve(value)
+        }
+        const onMessage = (event) => {
+          const data = event && event.data && typeof event.data === 'object' ? event.data : null
+          if (!data || data.e !== 'pinokio:ask-ai-launch-result' || data.launchId !== launchId) {
+            return
+          }
+          finish(data.opened !== false)
+        }
+        window.addEventListener('message', onMessage)
+        timer = window.setTimeout(() => finish(false), timeoutMs)
+      })
+    }
+    async dispatchAskAiLaunch(tool, prompt) {
       const launchHref = this.buildAskAiLaunchHref(tool, prompt)
       if (!launchHref) {
         this.setStatus('Could not launch this plugin.', true)
@@ -531,11 +563,38 @@
           }
         } catch (_) {}
       }
+      try {
+        const parentDrawer = window.parent && window.parent !== window ? window.parent.PinokioAskAiDrawer : null
+        if (parentDrawer && typeof parentDrawer.openWithAgent === 'function') {
+          const opened = parentDrawer.openWithAgent(payload)
+          if (opened !== false) {
+            this.setStatus('Launching Ask AI…')
+            return true
+          }
+        } else if (parentDrawer && typeof parentDrawer.openWithUrl === 'function') {
+          const opened = parentDrawer.openWithUrl(launchHref, {
+            workspaceCwd: this.workspaceCwd,
+            prompt: payload.prompt
+          })
+          if (opened !== false) {
+            this.setStatus('Launching Ask AI…')
+            return true
+          }
+        }
+      } catch (_) {}
       try {
         if (window.parent && window.parent !== window && typeof window.parent.postMessage === 'function') {
+          const launchId = this.createAskAiLaunchId()
+          payload.launchId = launchId
+          const ack = this.waitForAskAiLaunchAck(launchId)
           window.parent.postMessage(payload, '*')
-          this.setStatus('Launching Ask AI…')
-          return true
+          const opened = await ack
+          if (opened) {
+            this.setStatus('Launching Ask AI…')
+            return true
+          }
+          this.setStatus('Could not confirm Ask AI launch.', true)
+          return false
         }
       } catch (_) {}
       window.location.href = launchHref
@@ -730,7 +789,7 @@
         }
         syncRunState()
       }
-      const run = () => {
+      const run = async () => {
         const prompt = String(promptTextarea.value || '').trim()
         const tool = this.selectedAskAiTool()
         if (!prompt) {
@@ -748,7 +807,7 @@
           close()
           return
         }
-        if (this.dispatchAskAiLaunch(tool, prompt)) {
+        if (await this.dispatchAskAiLaunch(tool, prompt)) {
           close()
         }
       }
@@ -867,6 +926,7 @@
       this.populateAskAiLauncherTools(tools)
       launcher.error.textContent = ''
       launcher.promptTextarea.value = ASK_AI_DEFAULT_PROMPT
+      launcher.syncRunState()
       launcher.setOpen(true)
     }
     formatGenerated(value) {

package/server/public/style.css

@@ -3698,9 +3698,9 @@ body.dark .swal2-styled.swal2-confirm{
 */
 .noty_bar {
   max-width: 300px !important;
-  background: rgba(0,0,0,0.9) !important;
+  background: #1b1c1d !important;
   color: white !important;
-  border-bottom: none !important;
+  border: 1px solid rgba(255, 255, 255, 0.08) !important;
   z-index: 1000000000000;
 }
 .noty_body a {

package/server/views/app.ejs

@@ -17093,7 +17093,16 @@ document.addEventListener("DOMContentLoaded", () => {
       return
     }
     if (messageType === "pinokio:ask-ai-launch") {
-      openWithAgent(event.data)
+      const opened = openWithAgent(event.data)
+      if (event.source && event.data.launchId) {
+        try {
+          event.source.postMessage({
+            e: "pinokio:ask-ai-launch-result",
+            launchId: event.data.launchId,
+            opened: opened !== false
+          }, event.origin && event.origin !== "null" ? event.origin : "*")
+        } catch (_) {}
+      }
     } else if (messageType === "pinokio:ask-ai-open-url") {
       openWithUrl(event.data.url, {
         workspaceCwd: typeof event.data.workspaceCwd === "string" ? event.data.workspaceCwd : ""

package/server/views/index.ejs

@@ -197,6 +197,15 @@ body.dark .context-menu-wrapper {
   text-transform: none;
   transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
 }
+.home-app-line .menu-btns > .open-actions-modal {
+  width: 28px;
+  min-width: 28px;
+  padding: 0 !important;
+}
+.home-app-line .menu-btns > .open-actions-modal i {
+  width: 14px;
+  font-size: 13px;
+}
 body.dark .home-app-line .menu-btns > .btn {
   border-color: rgba(255, 255, 255, 0.075) !important;
   background: rgba(255, 255, 255, 0.045) !important;
@@ -749,6 +758,8 @@ body.dark .home-search-form .home-apps-sort .ts-dropdown [data-selectable].optio
   gap: 8px;
 }
 body.is-home {
+  --home-actions-drawer-width: min(420px, calc(100vw - 240px));
+  --home-actions-drawer-top: 0px;
   --home-page-nav-bg: #ffffff;
   --home-page-nav-border: rgba(15, 23, 42, 0.12);
   --home-page-accent: #6b7280;
@@ -1164,6 +1175,69 @@ body.dark .home-actions-empty {
   border-color: rgba(255, 255, 255, 0.12);
   color: rgba(226, 232, 240, 0.58);
 }
+@media only screen and (min-width: 961px) {
+  body.is-home.home-actions-drawer-open main > .container {
+    padding-right: calc(var(--home-actions-drawer-width) + 16px);
+  }
+  @keyframes homeActionsDrawerIn {
+    from {
+      opacity: 0.72;
+      transform: translateX(18px);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+  @keyframes homeActionsDrawerOut {
+    from {
+      opacity: 1;
+      transform: translateX(0);
+    }
+    to {
+      opacity: 0.72;
+      transform: translateX(18px);
+    }
+  }
+  .home-actions-dialog.is-docked[open] {
+    top: var(--home-actions-drawer-top);
+    right: 0;
+    bottom: 0;
+    left: auto;
+    width: var(--home-actions-drawer-width);
+    max-height: none;
+    height: calc(100vh - var(--home-actions-drawer-top));
+    border-top: none;
+    border-right: none;
+    border-bottom: none;
+    border-radius: 0;
+    box-shadow: none;
+    transform: none;
+    animation: homeActionsDrawerIn 180ms cubic-bezier(0.22, 1, 0.36, 1);
+    will-change: transform, opacity;
+  }
+  body.dark .home-actions-dialog.is-docked[open] {
+    box-shadow: none;
+  }
+  .home-actions-dialog.is-docked.is-closing[open] {
+    pointer-events: none;
+    animation: homeActionsDrawerOut 130ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
+  }
+  .home-actions-dialog.is-docked::backdrop {
+    background: transparent;
+  }
+  .home-actions-dialog.is-docked .home-actions-shell {
+    height: 100%;
+    min-height: 0;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .home-actions-dialog.is-docked[open],
+    .home-actions-dialog.is-docked.is-closing[open] {
+      animation: none;
+      will-change: auto;
+    }
+  }
+}
 #suggestion {
   padding: 20px;
   display: flex;
@@ -1452,8 +1526,8 @@ body.dark aside .current.selected {
                 >
                   <i class="fa-<%=item.starred ? "solid" : "regular"%> fa-star" aria-hidden="true"></i>
                 </button>
-                <button class='btn open-menu open-actions-modal' type='button' data-dialog-id="home-actions-running-<%=index%>" aria-haspopup="dialog" title="Actions" aria-label="Actions">
-                  <i class="fa-solid fa-ellipsis" aria-hidden="true"></i><span> menu</span>
+                <button class='btn open-menu open-actions-modal' type='button' data-dialog-id="home-actions-running-<%=index%>" aria-haspopup="dialog" aria-expanded="false" title="Open actions panel" aria-label="Open actions panel">
+                  <i class="fa-solid fa-list-ul" aria-hidden="true"></i>
                 </button>
                 <% const autolaunchRunningScript = !!(item.autolaunch_starting && item.autolaunch_script && item.running_scripts && item.running_scripts.some((s) => { const scriptName = s && (s.name || s.script_path || s.path || ""); return scriptName === item.autolaunch_script || String(scriptName).endsWith(`/${item.autolaunch_script}`) })) %>
                 <% if (item.autolaunch_starting && !autolaunchRunningScript) { %>
@@ -1551,8 +1625,8 @@ body.dark aside .current.selected {
                 >
                   <i class="fa-<%=item.starred ? "solid" : "regular"%> fa-star" aria-hidden="true"></i>
                 </button>
-                <button class='btn open-menu open-actions-modal' type='button' data-dialog-id="home-actions-not-running-<%=index%>" aria-haspopup="dialog" title="Actions" aria-label="Actions">
-                  <i class="fa-solid fa-ellipsis" aria-hidden="true"></i><span> menu</span>
+                <button class='btn open-menu open-actions-modal' type='button' data-dialog-id="home-actions-not-running-<%=index%>" aria-haspopup="dialog" aria-expanded="false" title="Open actions panel" aria-label="Open actions panel">
+                  <i class="fa-solid fa-list-ul" aria-hidden="true"></i>
                 </button>
                 <% if (notRunningTerminalOnlineCount > 0) { %>
                 <% const notRunningTerminalLabel = notRunningTerminalOnlineCount > 0 ? `${notRunningTerminalOnlineCount} terminal${notRunningTerminalOnlineCount === 1 ? "" : "s"} online` : "Terminals" %>
@@ -2488,6 +2562,10 @@ const startHomeAutolaunchPolling = () => {
 startHomeAutolaunchPolling()
 document.addEventListener("keydown", (e) => {
   e = e || window.event;
+  if (e.key === "Escape" && !hasHomeActionsBlockingOverlay() && closeActiveHomeActionsDrawer()) {
+    e.preventDefault()
+    return
+  }
   if (e.key === "ArrowUp") {
     console.log("up arrow pressed");
     selectedIndex = Math.max(selectedIndex-1, 0)
@@ -2583,12 +2661,6 @@ const closeContextMenuForNode = (node) => {
       contextMenu.dataset.open = 'false'
     }
   }
-  const dialog = node && typeof node.closest === 'function'
-    ? node.closest('.home-actions-dialog')
-    : null
-  if (dialog && dialog.open && typeof dialog.close === 'function') {
-    dialog.close()
-  }
 }
 window.PinokioHomeCloseContextMenu = closeContextMenuForNode
 const setHomeActionsTab = (dialog, tabName) => {
@@ -2606,6 +2678,90 @@ const setHomeActionsTab = (dialog, tabName) => {
     panel.hidden = !isActive
   })
 }
+const homeActionsDrawerMedia = window.matchMedia('(min-width: 961px)')
+const homeActionsReducedMotionMedia = window.matchMedia('(prefers-reduced-motion: reduce)')
+const isHomeActionsDrawerViewport = () => homeActionsDrawerMedia.matches
+const syncHomeActionsDrawerState = () => {
+  const hasDockedDialog = Boolean(document.querySelector('.home-actions-dialog.is-docked[open]'))
+  document.body.classList.toggle('home-actions-drawer-open', hasDockedDialog)
+}
+const setHomeActionsDrawerOffset = () => {
+  const header = document.querySelector('body.is-home > header.navheader')
+  const top = header ? Math.max(0, Math.round(header.getBoundingClientRect().bottom)) : 0
+  document.body.style.setProperty('--home-actions-drawer-top', `${top}px`)
+}
+const setHomeActionsTriggerExpanded = (dialog, expanded) => {
+  if (!dialog || !dialog.id) {
+    return
+  }
+  document.querySelectorAll('.open-actions-modal').forEach((button) => {
+    if (button.getAttribute('data-dialog-id') === dialog.id) {
+      button.setAttribute('aria-expanded', expanded ? 'true' : 'false')
+    }
+  })
+}
+const closeHomeActionsDialog = (dialog) => {
+  if (!dialog || !dialog.open) {
+    return
+  }
+  const shouldAnimate = dialog.classList.contains('is-docked')
+    && isHomeActionsDrawerViewport()
+    && !homeActionsReducedMotionMedia.matches
+  if (!shouldAnimate) {
+    if (typeof dialog.close === 'function') {
+      dialog.close()
+    } else {
+      dialog.removeAttribute('open')
+      dialog.classList.remove('is-docked', 'is-closing')
+      setHomeActionsTriggerExpanded(dialog, false)
+      syncHomeActionsDrawerState()
+    }
+    return
+  }
+  if (dialog.classList.contains('is-closing')) {
+    return
+  }
+  dialog.classList.add('is-closing')
+  let finished = false
+  const finishClose = () => {
+    if (finished) {
+      return
+    }
+    finished = true
+    dialog.removeEventListener('animationend', finishClose)
+    if (dialog.open) {
+      dialog.close()
+    }
+  }
+  dialog.addEventListener('animationend', finishClose)
+  window.setTimeout(finishClose, 180)
+}
+const closeHomeActionsDialogs = (exceptDialog = null) => {
+  document.querySelectorAll('.home-actions-dialog[open]').forEach((dialog) => {
+    if (dialog === exceptDialog) {
+      return
+    }
+    if (typeof dialog.close === 'function') {
+      dialog.close()
+    } else {
+      dialog.removeAttribute('open')
+      dialog.classList.remove('is-docked', 'is-closing')
+      setHomeActionsTriggerExpanded(dialog, false)
+    }
+  })
+  syncHomeActionsDrawerState()
+}
+document.querySelectorAll('.home-actions-dialog').forEach((dialog) => {
+  if (dialog.dataset.homeActionsBound === 'true') {
+    return
+  }
+  dialog.dataset.homeActionsBound = 'true'
+  dialog.addEventListener('close', () => {
+    dialog.classList.remove('is-docked', 'is-closing')
+    setHomeActionsTriggerExpanded(dialog, false)
+    syncHomeActionsDrawerState()
+  })
+})
 const openHomeActionsDialog = (button) => {
   if (!button) {
     return
@@ -2615,13 +2771,61 @@ const openHomeActionsDialog = (button) => {
   if (!dialog) {
     return
   }
+  if (dialog.open) {
+    closeHomeActionsDialog(dialog)
+    return
+  }
+  closeHomeActionsDialogs(dialog)
   setHomeActionsTab(dialog, button.getAttribute('data-default-tab') || 'run')
-  if (typeof dialog.showModal === 'function') {
+  if (isHomeActionsDrawerViewport()) {
+    setHomeActionsDrawerOffset()
+    dialog.classList.remove('is-closing')
+    dialog.classList.add('is-docked')
+    if (!dialog.open) {
+      if (typeof dialog.show === 'function') {
+        dialog.show()
+      } else {
+        dialog.setAttribute('open', '')
+      }
+    }
+    button.setAttribute('aria-expanded', 'true')
+    syncHomeActionsDrawerState()
+  } else if (typeof dialog.showModal === 'function') {
+    dialog.classList.remove('is-docked')
     dialog.showModal()
+    button.setAttribute('aria-expanded', 'true')
   } else {
+    dialog.classList.remove('is-docked')
     dialog.setAttribute('open', '')
+    button.setAttribute('aria-expanded', 'true')
   }
 }
+const closeActiveHomeActionsDrawer = () => {
+  const dialog = document.querySelector('.home-actions-dialog.is-docked[open]')
+  if (!dialog) {
+    return false
+  }
+  if (typeof dialog.close === 'function') {
+    closeHomeActionsDialog(dialog)
+  } else {
+    dialog.removeAttribute('open')
+    dialog.classList.remove('is-docked', 'is-closing')
+    setHomeActionsTriggerExpanded(dialog, false)
+    syncHomeActionsDrawerState()
+  }
+  return true
+}
+const hasHomeActionsBlockingOverlay = () => {
+  return Boolean(document.querySelector('.swal2-container.swal2-shown, .swal2-container.swal2-backdrop-show'))
+}
+const handleHomeActionsDrawerMediaChange = () => {
+  closeHomeActionsDialogs()
+}
+if (typeof homeActionsDrawerMedia.addEventListener === 'function') {
+  homeActionsDrawerMedia.addEventListener('change', handleHomeActionsDrawerMediaChange)
+} else if (typeof homeActionsDrawerMedia.addListener === 'function') {
+  homeActionsDrawerMedia.addListener(handleHomeActionsDrawerMediaChange)
+}
 const navigateHomeAppLine = (line) => {
   if (!line) {
     return
@@ -2866,13 +3070,13 @@ document.addEventListener("click", async (e) => {
     e.preventDefault()
     e.stopPropagation()
     const dialog = target.closest(".home-actions-dialog")
-    if (dialog && typeof dialog.close === "function") {
-      dialog.close()
+    if (dialog) {
+      closeHomeActionsDialog(dialog)
     }
     return
   }
   if (e.target.classList.contains("home-actions-dialog")) {
-    e.target.close()
+    closeHomeActionsDialog(e.target)
     return
   }
   if (e.target.classList.contains("home-actions-tab")) {