pinokiod 8.0.31 → 8.0.33

package/kernel/plugin_sources.js

@@ -16,6 +16,8 @@ const FUNCTION_KEYS = new Set([...ACTION_KEYS, ...STATUS_KEYS])
 const BUILTIN_TOOL_ALIASES = {
   claude: "pinokio/run/plugin/claude",
   codex: "pinokio/run/plugin/codex",
+  grok: "pinokio/run/plugin/grok",
+  "grok-build": "pinokio/run/plugin/grok",
   antigravity: "pinokio/run/plugin/antigravity-cli",
   "antigravity-cli": "pinokio/run/plugin/antigravity-cli",
   "code/claude": "pinokio/run/plugin/claude",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pinokiod",
-  "version": "8.0.31",
+  "version": "8.0.33",
   "description": "",
   "main": "index.js",
   "scripts": {

package/server/index.js

@@ -4286,6 +4286,8 @@ class Server {
           home_sort: homeSortMode,
           running,
           notRunning,
+          // Keep legacy custom views compatible without loading or rendering README files.
+          readme: undefined,
           filepath,
           mode: null,
           kernel: this.kernel,
@@ -4317,6 +4319,8 @@ class Server {
           ishome: meta,
           running,
           notRunning,
+          // Keep legacy custom views compatible without loading or rendering README files.
+          readme: undefined,
           filepath,
           mode: null,
           kernel: this.kernel,

package/server/public/nav.js

@@ -1,3 +1,4 @@
+const headerCollapseOnly = document.currentScript?.hasAttribute("data-header-collapse-only");
 document.addEventListener("DOMContentLoaded", () => {
   // Logging disabled for production
   const log = () => {};
@@ -5,7 +6,7 @@ document.addEventListener("DOMContentLoaded", () => {
 
   const newWindowButton = document.querySelector("#new-window");
   const agent = document.body.getAttribute("data-agent");
-  if (newWindowButton) {
+  if (newWindowButton && !headerCollapseOnly) {
     newWindowButton.addEventListener("click", (event) => {
       if (agent === "electron") {
         window.open("/", "_blank", "pinokio");
@@ -15,6 +16,85 @@ document.addEventListener("DOMContentLoaded", () => {
     });
   }
 
+  (() => {
+    const header = document.querySelector("body > header.navheader");
+    if (!header) return;
+
+    const body = document.body;
+    const row = header.querySelector("h1") || header;
+    const collapseMinWidth = (Number(window.PinokioAppMobileBreakpoint) || 768) + 1;
+    const collapseMedia = matchMedia(`(min-width: ${collapseMinWidth}px) and (hover: hover) and (pointer: fine)`);
+    const reducedMotion = matchMedia("(prefers-reduced-motion: reduce)");
+
+    const toggle = document.createElement("button");
+    toggle.type = "button";
+    toggle.className = "btn2 header-collapse-toggle";
+    toggle.id = "header-collapse-toggle";
+    toggle.setAttribute("aria-label", "Hide toolbar");
+    toggle.setAttribute("title", "Hide toolbar");
+    toggle.innerHTML = '<div><i class="fa-solid fa-compress" aria-hidden="true"></i></div>';
+    row.insertBefore(toggle, row.querySelector("#new-window, #close-window"));
+
+    const edge = document.createElement("button");
+    edge.type = "button";
+    edge.className = "header-collapse-edge";
+    edge.setAttribute("aria-label", "Show toolbar");
+    edge.setAttribute("title", "Show toolbar");
+    edge.innerHTML = '<span aria-hidden="true"></span>';
+    body.appendChild(edge);
+
+    let collapseTimer;
+    let cueTimer;
+    const clearCue = () => {
+      clearTimeout(collapseTimer);
+      clearTimeout(cueTimer);
+      body.classList.remove("header-collapse-cue");
+    };
+    const setCollapsed = (collapsed) => {
+      body.classList.toggle("header-collapse-moving", collapseMedia.matches && !reducedMotion.matches);
+      body.classList.toggle("header-collapsed", collapsed);
+      header.inert = collapsed;
+      header.setAttribute("aria-hidden", collapsed ? "true" : "false");
+      document.dispatchEvent(new CustomEvent("pinokio:header-state", { detail: { collapsed, minimized: collapsed } }));
+    };
+    const finishMotion = (event) => {
+      if (event.target === header && event.propertyName === "grid-template-rows") {
+        body.classList.remove("header-collapse-moving");
+      }
+    };
+    header.addEventListener("transitionend", finishMotion);
+    header.addEventListener("transitioncancel", finishMotion);
+
+    toggle.addEventListener("click", (event) => {
+      if (!collapseMedia.matches) return;
+      clearCue();
+      body.classList.add("header-collapse-cue");
+      const keyboard = event.detail === 0;
+      collapseTimer = setTimeout(() => {
+        setCollapsed(true);
+        if (keyboard) edge.focus({ preventScroll: true });
+        cueTimer = setTimeout(() => body.classList.remove("header-collapse-cue"), reducedMotion.matches ? 360 : 520);
+      }, reducedMotion.matches ? 0 : 140);
+    });
+    edge.addEventListener("click", (event) => {
+      clearCue();
+      setCollapsed(false);
+      if (event.detail === 0) toggle.focus({ preventScroll: true });
+    });
+    const syncMedia = () => {
+      body.classList.toggle("header-collapse-enabled", collapseMedia.matches);
+      if (!collapseMedia.matches) {
+        clearCue();
+        if (body.classList.contains("header-collapsed")) setCollapsed(false);
+        body.classList.remove("header-collapse-moving");
+      }
+    };
+    collapseMedia.addEventListener("change", syncMedia);
+    syncMedia();
+  })();
+
+  if (headerCollapseOnly) return;
+
   const header = document.querySelector("header.navheader");
   const minimizeButton = document.querySelector("#minimize-header");
   const homeLink = header ? header.querySelector(".home") : null;

package/server/public/style.css

@@ -4650,6 +4650,77 @@ body.dark #dropdown-portal .dropdown-content .btn2 {
   background: white;
 }
 
+.header-collapse-edge {
+  display: none;
+}
+
+@media (min-width: 769px) and (hover: hover) and (pointer: fine) {
+  body.header-collapse-enabled > header.navheader:not(.minimized) {
+    display: grid !important;
+    grid-template-rows: minmax(0, 1fr);
+    overflow: visible;
+    transition: grid-template-rows 240ms cubic-bezier(0.25, 1, 0.5, 1), padding-top 240ms cubic-bezier(0.25, 1, 0.5, 1), padding-bottom 240ms cubic-bezier(0.25, 1, 0.5, 1);
+  }
+  body.header-collapse-enabled > header.navheader:not(.minimized) > h1 {
+    min-height: 0;
+    overflow: visible;
+  }
+  body.header-collapse-moving > header.navheader:not(.minimized) > h1,
+  body.header-collapsed > header.navheader:not(.minimized) > h1 {
+    overflow: hidden;
+  }
+  body.header-collapsed > header.navheader:not(.minimized) {
+    grid-template-rows: minmax(0, 0fr);
+    padding-top: 0 !important;
+    padding-bottom: 0 !important;
+    border-top-width: 0 !important;
+    border-bottom-width: 0 !important;
+    overflow: hidden;
+    box-shadow: none !important;
+    pointer-events: none;
+  }
+  body.header-collapse-cue > .header-collapse-edge,
+  body.header-collapsed > .header-collapse-edge {
+    position: fixed;
+    inset: 0 0 auto;
+    z-index: 10000050;
+    display: block;
+    width: 100%;
+    height: 8px;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    cursor: pointer;
+    -webkit-app-region: no-drag;
+  }
+  .header-collapse-edge > span {
+    position: absolute;
+    inset: 1px 0 auto;
+    height: 3px;
+    background: royalblue;
+    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 4px rgba(15, 23, 42, 0.35);
+    opacity: 0;
+    transform: translateY(-4px);
+    transition: opacity 120ms, transform 160ms;
+  }
+  body.header-collapse-cue .header-collapse-edge > span {
+    opacity: 1;
+    transform: none;
+    box-shadow: 0 0 10px 2px rgba(65, 105, 225, 0.7);
+  }
+  body.header-collapsed .header-collapse-edge:is(:hover, :focus-visible) > span {
+    opacity: 0.92;
+    transform: none;
+  }
+}
+
+body:not(.header-collapse-enabled) .header-collapse-toggle { display: none !important; }
+
+@media (prefers-reduced-motion: reduce) {
+  body.header-collapse-enabled > header.navheader:not(.minimized),
+  .header-collapse-edge > span { transition-duration: 0.01ms !important; }
+}
+
 
 header.navheader.minimized {
   position: fixed;

package/server/views/connect/x.ejs

@@ -186,6 +186,7 @@ pre {
 <script src="/hotkeys.min.js"></script>
 <script src="/sweetalert2.js"></script>
 <script src="/common.js"></script>
+<script src="/nav.js" data-header-collapse-only></script>
 <script src="/opener.js"></script>
 <script src="/highlight.js"></script>
 <script src="/highlight-js.js"></script>

package/server/views/create.ejs

@@ -15,6 +15,7 @@
 <% if (agent === "electron") { %>
   <link href="/electron.css" rel="stylesheet" />
 <% } %>
+<script src="/nav.js" data-header-collapse-only></script>
 </head>
 <body class="<%= theme %>" data-agent="<%= agent %>">
 <header class="navheader grabbable">

package/server/views/index.ejs

@@ -2998,6 +2998,10 @@ const setHomeActionsDrawerOffset = () => {
   const top = header ? Math.max(0, Math.round(header.getBoundingClientRect().bottom)) : 0
   document.body.style.setProperty('--home-actions-drawer-top', `${top}px`)
 }
+const homeActionsDrawerHeader = document.querySelector('body.is-home > header.navheader')
+if (homeActionsDrawerHeader && typeof ResizeObserver === 'function') {
+  new ResizeObserver(setHomeActionsDrawerOffset).observe(homeActionsDrawerHeader)
+}
 const setHomeActionsTriggerExpanded = (dialog, expanded) => {
   if (!dialog || !dialog.id) {
     return

package/server/views/partials/app_common_scripts.ejs

@@ -6,3 +6,4 @@
 <script src="/notyq.js"></script>
 <script src="/Socket.js"></script>
 <script src="/common.js"></script>
+<script src="/nav.js" data-header-collapse-only></script>

package/system/plugin/grok/pinokio.js

@@ -0,0 +1,44 @@
+module.exports = {
+  title: "Grok Build",
+  icon: "grok.png",
+  link: "https://github.com/xai-org/grok-build",
+  run: [{
+    when: "{{platform === 'win32'}}",
+    id: "run",
+    method: "shell.run",
+    params: {
+      shell: "{{kernel.path('bin/miniforge/Library/bin/bash.exe')}}",
+      conda: {
+        skip: true
+      },
+      message: {
+        _: [
+          "npx",
+          "-y",
+          "@xai-official/grok@latest",
+          "{{args.prompt || undefined}}"
+        ]
+      },
+      path: "{{args.cwd}}",
+      input: true,
+      buffer: 1024
+    }
+  }, {
+    when: "{{platform !== 'win32'}}",
+    id: "run",
+    method: "shell.run",
+    params: {
+      message: {
+        _: [
+          "npx",
+          "-y",
+          "@xai-official/grok@latest",
+          "{{args.prompt || undefined}}"
+        ]
+      },
+      path: "{{args.cwd}}",
+      input: true,
+      buffer: 1024
+    }
+  }]
+}

package/system/plugin/grok-auto/pinokio.js

@@ -0,0 +1,20 @@
+const grok = require("../grok/pinokio")
+
+module.exports = {
+  ...grok,
+  title: "Grok Build Auto",
+  description: "Grok Build with tool permission prompts automatically approved unless explicitly denied.",
+  run: grok.run.map((step) => ({
+    ...step,
+    params: {
+      ...step.params,
+      message: {
+        _: [
+          ...step.params.message._.slice(0, 3),
+          "--always-approve",
+          ...step.params.message._.slice(3)
+        ]
+      }
+    }
+  }))
+}

package/test/directory-readme-rendering.test.js

@@ -9,7 +9,7 @@ const Server = require('../server')
 
 const viewsPath = path.resolve(__dirname, '..', 'server', 'views')
 
-async function createDirectoryRendererFixture() {
+async function createDirectoryRendererFixture({ legacyCustomViews = false } = {}) {
   const homedir = await fs.promises.mkdtemp(path.join(os.tmpdir(), 'pinokio-directory-readme-'))
   const apiRoot = path.resolve(homedir, 'api')
   const appRoot = path.resolve(apiRoot, 'demo')
@@ -18,6 +18,23 @@ async function createDirectoryRendererFixture() {
   await fs.promises.writeFile(path.resolve(appRoot, 'README.md'), '# APP README SENTINEL\n')
   await fs.promises.writeFile(path.resolve(appRoot, 'keep.txt'), 'keep\n')
 
+  const customViewsPath = path.resolve(homedir, 'web', 'views')
+  if (legacyCustomViews) {
+    await fs.promises.mkdir(customViewsPath, { recursive: true })
+    const legacyTemplate = [
+      '<% if (readme) { %>',
+      '<div class="readme markdown-body"><%- readme %></div>',
+      '<% } %>',
+      '<% items.forEach((item) => { %>',
+      '<div data-name="<%= item.name %>"></div>',
+      '<% }) %>'
+    ].join('\n')
+    await Promise.all([
+      fs.promises.writeFile(path.resolve(customViewsPath, 'index.ejs'), legacyTemplate),
+      fs.promises.writeFile(path.resolve(customViewsPath, 'file_explorer.ejs'), legacyTemplate)
+    ])
+  }
+
   const renderer = Object.create(Server.prototype)
   renderer.kernel = {
     homedir,
@@ -60,7 +77,7 @@ async function createDirectoryRendererFixture() {
   renderer.getPeers = () => []
 
   const app = express()
-  app.set('views', viewsPath)
+  app.set('views', [customViewsPath, viewsPath])
   app.set('view engine', 'ejs')
   app.get('/home', (req, res, next) => {
     renderer.render(req, res, [], {}).catch(next)
@@ -123,3 +140,27 @@ test('directory pages list README files without auto-rendering their contents',
     await fixture.close()
   }
 })
+
+test('legacy custom directory views can reference readme without crashing', async () => {
+  const fixture = await createDirectoryRendererFixture({ legacyCustomViews: true })
+  try {
+    const responses = await Promise.all([
+      fetch(`${fixture.baseUrl}/home`),
+      fetch(`${fixture.baseUrl}/_api/demo`),
+      fetch(`${fixture.baseUrl}/api/demo`)
+    ])
+    const html = await Promise.all(responses.map((response) => response.text()))
+
+    responses.forEach((response, index) => {
+      assert.equal(response.status, 200, html[index])
+    })
+    assert.doesNotMatch(html[0], /ROOT README SENTINEL/)
+    for (const page of html.slice(1)) {
+      assert.doesNotMatch(page, /APP README SENTINEL/)
+      assert.match(page, /data-name="README\.md"/)
+      assert.match(page, /data-name="keep\.txt"/)
+    }
+  } finally {
+    await fixture.close()
+  }
+})

package/test/grok-plugin.test.js

@@ -0,0 +1,78 @@
+const assert = require("node:assert/strict")
+const fs = require("node:fs")
+const path = require("node:path")
+const test = require("node:test")
+
+const grok = require("../system/plugin/grok/pinokio")
+const grokAuto = require("../system/plugin/grok-auto/pinokio")
+
+test("Grok Build exposes a minimal npx-backed terminal plugin", () => {
+  assert.equal(grok.title, "Grok Build")
+  assert.equal(grok.icon, "grok.png")
+  assert.equal(grok.link, "https://github.com/xai-org/grok-build")
+  assert.equal(fs.existsSync(path.join(__dirname, "..", "system", "plugin", "grok", grok.icon)), true)
+
+  for (const action of ["install", "update", "uninstall", "installed"]) {
+    assert.equal(Object.prototype.hasOwnProperty.call(grok, action), false)
+  }
+
+  assert.equal(grok.run.length, 2)
+  for (const step of grok.run) {
+    assert.equal(step.id, "run")
+    assert.equal(step.method, "shell.run")
+    assert.deepEqual(step.params.message, {
+      _: [
+        "npx",
+        "-y",
+        "@xai-official/grok@latest",
+        "{{args.prompt || undefined}}"
+      ]
+    })
+    assert.equal(step.params.path, "{{args.cwd}}")
+    assert.equal(step.params.input, true)
+    assert.equal(step.params.buffer, 1024)
+  }
+
+  assert.match(grok.run[0].when, /win32/)
+  assert.match(grok.run[0].params.shell, /bash\.exe/)
+  assert.equal(grok.run[0].params.conda.skip, true)
+  assert.equal(Object.prototype.hasOwnProperty.call(grok.run[1].params, "shell"), false)
+})
+
+test("Grok Build Auto shares the base wrapper and enables always-approve", () => {
+  assert.equal(grokAuto.title, "Grok Build Auto")
+  assert.equal(grokAuto.icon, grok.icon)
+  assert.equal(grokAuto.link, grok.link)
+  assert.match(grokAuto.description, /automatically approved/)
+  assert.equal(fs.existsSync(path.join(__dirname, "..", "system", "plugin", "grok-auto", grokAuto.icon)), true)
+
+  for (const action of ["install", "update", "uninstall", "installed"]) {
+    assert.equal(Object.prototype.hasOwnProperty.call(grokAuto, action), false)
+  }
+
+  assert.equal(grokAuto.run.length, grok.run.length)
+  for (let index = 0; index < grok.run.length; index += 1) {
+    const baseStep = grok.run[index]
+    const autoStep = grokAuto.run[index]
+
+    assert.equal(autoStep.when, baseStep.when)
+    assert.equal(autoStep.id, baseStep.id)
+    assert.equal(autoStep.method, baseStep.method)
+    assert.equal(autoStep.params.path, baseStep.params.path)
+    assert.equal(autoStep.params.input, baseStep.params.input)
+    assert.equal(autoStep.params.buffer, baseStep.params.buffer)
+    assert.equal(autoStep.params.shell, baseStep.params.shell)
+    assert.deepEqual(autoStep.params.conda, baseStep.params.conda)
+    assert.deepEqual(autoStep.params.message, {
+      _: [
+        "npx",
+        "-y",
+        "@xai-official/grok@latest",
+        "--always-approve",
+        "{{args.prompt || undefined}}"
+      ]
+    })
+  }
+
+  assert.equal(grok.run.every((step) => !step.params.message._.includes("--always-approve")), true)
+})

package/test/header-collapse.test.js

@@ -0,0 +1,33 @@
+const assert = require('node:assert/strict')
+const fs = require('node:fs/promises')
+const path = require('node:path')
+const test = require('node:test')
+
+const root = path.resolve(__dirname, '..')
+
+test('header collapse preserves expanded and legacy minimized header styles', async () => {
+  const style = await fs.readFile(path.join(root, 'server/public/style.css'), 'utf8')
+  const expanded = style.match(/body\.header-collapse-enabled > header\.navheader:not\(\.minimized\) \{[\s\S]*?\n  \}/)?.[0] || ''
+  const collapsed = style.match(/body\.header-collapsed > header\.navheader:not\(\.minimized\) \{[\s\S]*?\n  \}/)?.[0] || ''
+
+  assert.match(expanded, /grid-template-rows: minmax\(0, 1fr\)/)
+  assert.doesNotMatch(expanded, /(?:height|padding|border): .*!important/)
+  assert.match(collapsed, /grid-template-rows: minmax\(0, 0fr\)/)
+  assert.match(collapsed, /padding-top: 0 !important/)
+  assert.match(collapsed, /padding-bottom: 0 !important/)
+})
+
+test('collapse-only script includes do not activate legacy navigation behavior', async () => {
+  const [nav, connect, create, common] = await Promise.all([
+    fs.readFile(path.join(root, 'server/public/nav.js'), 'utf8'),
+    fs.readFile(path.join(root, 'server/views/connect/x.ejs'), 'utf8'),
+    fs.readFile(path.join(root, 'server/views/create.ejs'), 'utf8'),
+    fs.readFile(path.join(root, 'server/views/partials/app_common_scripts.ejs'), 'utf8')
+  ])
+  const controller = nav.slice(nav.indexOf('(() => {'), nav.indexOf('if (headerCollapseOnly) return;'))
+
+  assert.ok([connect, create, common].every((source) => /nav\.js" data-header-collapse-only/.test(source)))
+  assert.match(nav, /document\.currentScript\?\.hasAttribute\("data-header-collapse-only"\)/)
+  assert.match(nav, /if \(headerCollapseOnly\) return;/)
+  assert.doesNotMatch(controller, /localStorage|sessionStorage/)
+})

package/test/plugin-sources.test.js

@@ -18,6 +18,14 @@ test("resolveLauncherPluginSelection returns app-dev plugin query paths", () =>
     PluginSources.resolveLauncherPluginSelection("codex-auto"),
     "/plugin/codex-auto/pinokio.js"
   )
+  assert.strictEqual(
+    PluginSources.resolveLauncherPluginSelection("grok"),
+    "/pinokio/run/plugin/grok/pinokio.js"
+  )
+  assert.strictEqual(
+    PluginSources.resolveLauncherPluginSelection("grok-build"),
+    "/pinokio/run/plugin/grok/pinokio.js"
+  )
   assert.strictEqual(
     PluginSources.resolveLauncherPluginSelection("plugin/local-tool"),
     "/plugin/local-tool/pinokio.js"
@@ -208,10 +216,20 @@ module.exports = {
     const systemPlugins = menu.filter((item) => item.source === "system")
     const localPlugins = menu.filter((item) => item.source === "local")
 
-    assert.strictEqual(systemPlugins.length, 12)
+    assert.strictEqual(systemPlugins.length, 14)
     assert.ok(systemPlugins.every((item) => item.system === true))
     assert.ok(systemPlugins.every((item) => item.href.startsWith("/pinokio/run/plugin/")))
     assert.ok(systemPlugins.every((item) => item.image.startsWith("/pinokio/asset/plugin/")))
+    assert.ok(systemPlugins.some((item) => (
+      item.title === "Grok Build" &&
+      item.href === "/pinokio/run/plugin/grok/pinokio.js" &&
+      item.image === "/pinokio/asset/plugin/grok/grok.png"
+    )))
+    assert.ok(systemPlugins.some((item) => (
+      item.title === "Grok Build Auto" &&
+      item.href === "/pinokio/run/plugin/grok-auto/pinokio.js" &&
+      item.image === "/pinokio/asset/plugin/grok-auto/grok.png"
+    )))
 
     assert.deepStrictEqual(localPlugins.map((item) => item.title), ["Local Tool"])
     assert.strictEqual(localPlugins[0].href, "/run/plugin/local-tool/pinokio.js")