pinokiod 3.170.0 → 3.180.0

package/package.json

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

package/server/index.js

@@ -230,8 +230,40 @@ class Server {
                 }
                 running_dynamic.push(obj)
               } else {
+                const normalizedFilepath = path.normalize(filepath)
+                const hasMenuCwd = typeof cwd === 'string'
+                const normalizedMenuCwd = hasMenuCwd ? (cwd.length === 0 ? '' : path.normalize(cwd)) : null
+                const matchesRunningEntry = (runningKey) => {
+                  if (typeof runningKey !== 'string' || runningKey.length === 0) {
+                    return false
+                  }
+                  const questionIndex = runningKey.indexOf('?')
+                  const runningPath = questionIndex >= 0 ? runningKey.slice(0, questionIndex) : runningKey
+                  if (path.normalize(runningPath) !== normalizedFilepath) {
+                    return false
+                  }
+                  if (!hasMenuCwd) {
+                    return questionIndex === -1
+                  }
+                  if (questionIndex === -1) {
+                    return normalizedMenuCwd === ''
+                  }
+                  const params = querystring.parse(runningKey.slice(questionIndex + 1))
+                  const rawCwd = typeof params.cwd === 'string' ? params.cwd : null
+                  if (normalizedMenuCwd === '') {
+                    return rawCwd !== null && rawCwd.length === 0
+                  }
+                  if (!rawCwd || rawCwd.length === 0) {
+                    return false
+                  }
+                  try {
+                    return path.normalize(rawCwd) === normalizedMenuCwd
+                  } catch (_) {
+                    return false
+                  }
+                }
                 for(let running_id in this.kernel.api.running) {
-                  if (running_id.startsWith(id)) {
+                  if (matchesRunningEntry(running_id)) {
                     let obj2 = structuredClone(obj)
                     obj2.running = true
                     obj2.display = "indent"
@@ -526,9 +558,13 @@ class Server {
     }
 
     let currentBranch = null
+    let isDetached = false
     try {
       currentBranch = await git.currentBranch({ fs, dir, fullname: false })
     } catch (_) {}
+    if (!currentBranch) {
+      isDetached = true
+    }
 
     let branches = []
     if (branchList.length > 0) {
@@ -595,6 +631,7 @@ class Server {
       branch: currentBranch,
       branches,
       dir,
+      detached: isDetached,
       logError: logError ? String(logError.message || logError) : null
     }
   }
@@ -812,6 +849,7 @@ class Server {
     let run_tab = "/p/" + name
     let dev_tab = "/p/" + name + "/dev"
     let review_tab = "/p/" + name + "/review"
+    let files_tab = "/p/" + name + "/files"
 
     let editor_tab = `/pinokio/fileview/${encodeURIComponent(name)}`
     let savedTabs = []
@@ -867,6 +905,7 @@ class Server {
       run_tab,
       dev_tab,
       review_tab,
+      files_tab,
 //        paths,
       theme: this.theme,
       agent: req.agent,
@@ -6246,8 +6285,84 @@ class Server {
       res.json(response)
     }))
     this.app.get("/info/git/:ref/*", ex(async (req, res) => {
-      let response = await this.getGit(req.params.ref, req.params[0])
-      res.json(response)
+      const repoParam = req.params[0]
+      const ref = req.params.ref || 'HEAD'
+      const summary = await this.getGit(ref, repoParam)
+
+      const repoDir = summary && summary.dir ? summary.dir : this.kernel.path('api', repoParam)
+
+      if (ref === 'HEAD') {
+        try {
+          const { changes: headChanges, git_commit_url } = await this.getRepoHeadStatus(repoParam)
+          summary.changes = headChanges || []
+          summary.git_commit_url = git_commit_url || null
+        } catch (error) {
+          console.error('[git-info] head status error', repoParam, error)
+          summary.changes = []
+        }
+      } else {
+        let changes = []
+        try {
+          const commitOid = await this.kernel.git.resolveCommitOid(repoDir, ref)
+          const parentOid = await this.kernel.git.getParentCommit(repoDir, commitOid)
+          let entries
+          if (parentOid !== commitOid) {
+            entries = await git.walk({
+              fs,
+              dir: repoDir,
+              trees: [git.TREE({ ref: parentOid }), git.TREE({ ref: commitOid })],
+              map: async (filepath, [A, B]) => {
+                if (filepath === '.') return
+                if (!A && B) return { filepath, type: 'added' }
+                if (A && !B) return { filepath, type: 'deleted' }
+                if (A && B) {
+                  const Aoid = await A.oid()
+                  const Boid = await B.oid()
+                  if (Aoid !== Boid) return { filepath, type: 'modified' }
+                }
+              },
+            })
+          } else {
+            entries = await git.walk({
+              fs,
+              dir: repoDir,
+              trees: [git.TREE({ ref: commitOid })],
+              map: async (filepath, [B]) => {
+                if (filepath === '.') return
+                return { filepath, type: 'added' }
+              },
+            })
+          }
+          const diffFiles = (entries || []).filter(Boolean)
+          for (const { filepath, type } of diffFiles) {
+            const fullPath = path.join(repoDir, filepath)
+            const stats = await fs.promises.stat(fullPath).catch(() => null)
+            if (!stats || stats.isDirectory()) {
+              continue
+            }
+            const relpath = path.relative(this.kernel.path('api'), fullPath)
+            changes.push({
+              ref,
+              webpath: "/asset/" + path.relative(this.kernel.homedir, fullPath),
+              file: filepath,
+              path: fullPath,
+              diffpath: `/gitdiff/${ref}/${repoParam}/${filepath}`,
+              status: type,
+              relpath,
+            })
+          }
+        } catch (error) {
+          console.error('[git-info] diff error', repoParam, ref, error)
+        }
+        summary.changes = changes
+      }
+
+      if (!summary.git_commit_url) {
+        summary.git_commit_url = `/run/scripts/git/commit.json?cwd=${repoDir}&callback_target=parent&callback=$location.href`
+      }
+      summary.dir = repoDir
+
+      res.json(summary)
     }))
     this.app.get("/info/gitstatus/:name", ex(async (req, res) => {
       try {
@@ -7052,10 +7167,12 @@ class Server {
       let run_tab = "/p/" + name
       let dev_tab = "/p/" + name + "/dev"
       let review_tab = "/p/" + name + "/review"
+      let files_tab = "/p/" + name + "/files"
       res.render("review", {
         run_tab,
         dev_tab,
         review_tab,
+        files_tab,
         name: req.params.name,
         type: "review",
         title: name,
@@ -7070,6 +7187,9 @@ class Server {
     this.app.get("/p/:name/dev", ex(async (req, res) => {
       await this.chrome(req, res, "browse")
     }))
+    this.app.get("/p/:name/files", ex(async (req, res) => {
+      await this.chrome(req, res, "files")
+    }))
     this.app.get("/p/:name/browse", ex(async (req, res) => {
       await this.chrome(req, res, "browse")
     }))

package/server/public/files-app/app.css

@@ -35,7 +35,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 12px 18px;
+  padding: 8px 18px;
   background: var(--surface-color);
   border-bottom: 1px solid var(--border-color);
   gap: 12px;
@@ -46,16 +46,28 @@
   align-items: center;
   gap: 12px;
   font-size: 15px;
+  min-width: 0; /* allow ellipsis children */
 }
 
 .files-app__header-title i {
   font-size: 18px;
 }
 
+.files-app__header-icon {
+  width: 28px;
+  height: 28px;
+  border-radius: 6px;
+  object-fit: cover;
+  display: block;
+  background: #fff;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
+}
+
 .files-app__header-text {
   display: flex;
   flex-direction: column;
   gap: 2px;
+  min-width: 0; /* allow ellipsis children */
 }
 
 .files-app__header-primary {
@@ -68,6 +80,15 @@
   word-break: break-all;
 }
 
+.files-app__header-desc {
+  font-size: 12px;
+  color: var(--muted-color);
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .files-app__header-actions {
   display: flex;
   gap: 8px;
@@ -262,12 +283,34 @@ body.dark .files-app__tab--stale .files-app__tab-label::after {
   transition: background 0.1s ease;
 }
 
+.files-app__tree-label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.files-app__tree-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  opacity: 0;
+  transition: opacity 0.15s ease;
+}
+
 .files-app__tree-row:hover,
 .files-app__tree-row:focus-visible {
   background: rgba(127, 91, 243, 0.12);
   outline: none;
 }
 
+.files-app__tree-row:hover .files-app__tree-actions,
+.files-app__tree-row:focus-visible .files-app__tree-actions,
+.files-app__tree-row[data-selected='true'] .files-app__tree-actions {
+  opacity: 1;
+}
+
 .files-app__tree-row[data-selected='true'] {
   background: rgba(127, 91, 243, 0.2);
 }
@@ -277,6 +320,35 @@ body.dark .files-app__tab--stale .files-app__tab-label::after {
   text-align: center;
 }
 
+.files-app__tree-action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  border-radius: 4px;
+  color: var(--muted-color);
+  cursor: pointer;
+}
+
+.files-app__tree-action--rename {
+  font-size: 13px;
+}
+
+.files-app__tree-action:hover {
+  background: rgba(127, 91, 243, 0.15);
+  color: var(--text-color);
+}
+
+.files-app__tree-action:focus-visible {
+  outline: 2px solid var(--accent-color);
+  outline-offset: 2px;
+}
+
+.files-app__tree-action i {
+  pointer-events: none;
+}
+
 .files-app__tree-children {
   list-style: none;
   margin: 0;

package/server/public/files-app/app.js

@@ -263,6 +263,28 @@
       return parseJsonResponse(response);
     };
 
+    const remove = async (pathPosix) => {
+      const response = await fetch('/api/files/delete', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ workspace, path: pathPosix, root: workspaceRoot }),
+      });
+      return parseJsonResponse(response);
+    };
+
+    const rename = async (pathPosix, newName) => {
+      const response = await fetch('/api/files/rename', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ workspace, path: pathPosix, name: newName, root: workspaceRoot }),
+      });
+      return parseJsonResponse(response);
+    };
+
     const stat = async (pathPosix) => {
       const params = new URLSearchParams({ workspace });
       if (workspaceRoot) {
@@ -276,7 +298,7 @@
       return parseJsonResponse(response);
     };
 
-    return { list, read, save, stat };
+    return { list, read, save, remove, rename, stat };
   }
 
   async function parseJsonResponse(response) {
@@ -340,10 +362,52 @@
     icon.className = entry.type === 'directory' ? 'fa-regular fa-folder' : 'fa-regular fa-file-lines';
     row.appendChild(icon);
 
-    const label = createElement('span');
+    const label = createElement('span', 'files-app__tree-label');
     label.textContent = entry.name;
     row.appendChild(label);
 
+    if (!entry.isRoot) {
+      const actions = createElement('span', 'files-app__tree-actions');
+      const renameBtn = createElement('span', 'files-app__tree-action files-app__tree-action--rename');
+      renameBtn.setAttribute('role', 'button');
+      renameBtn.setAttribute('aria-label', entry.type === 'directory' ? 'Rename folder' : 'Rename file');
+      renameBtn.tabIndex = 0;
+      renameBtn.title = entry.type === 'directory' ? 'Rename folder' : 'Rename file';
+      renameBtn.innerHTML = '<i class="fa-regular fa-pen-to-square"></i>';
+      const triggerRename = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        requestRenameEntry.call(this, entry);
+      };
+      renameBtn.addEventListener('click', triggerRename);
+      renameBtn.addEventListener('keydown', (event) => {
+        if (event.key === 'Enter' || event.key === ' ') {
+          triggerRename(event);
+        }
+      });
+      actions.appendChild(renameBtn);
+
+      const deleteBtn = createElement('span', 'files-app__tree-action files-app__tree-action--delete');
+      deleteBtn.setAttribute('role', 'button');
+      deleteBtn.setAttribute('aria-label', entry.type === 'directory' ? 'Delete folder' : 'Delete file');
+      deleteBtn.tabIndex = 0;
+      deleteBtn.title = entry.type === 'directory' ? 'Delete folder' : 'Delete file';
+      deleteBtn.innerHTML = '<i class="fa-regular fa-trash-can"></i>';
+      const triggerDelete = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        requestDeleteEntry.call(this, entry);
+      };
+      deleteBtn.addEventListener('click', triggerDelete);
+      deleteBtn.addEventListener('keydown', (event) => {
+        if (event.key === 'Enter' || event.key === ' ') {
+          triggerDelete(event);
+        }
+      });
+      actions.appendChild(deleteBtn);
+      row.appendChild(actions);
+    }
+
     if (entry.type === 'directory') {
       row.addEventListener('click', (event) => {
         event.preventDefault();
@@ -418,6 +482,195 @@
     container.style.display = parentItem.dataset.expanded === 'true' ? 'block' : 'none';
   }
 
+  function requestDeleteEntry(entry) {
+    if (!entry || !entry.path) {
+      return;
+    }
+    const path = entry.path;
+    const displayName = entry.name || path.split('/').pop() || this.state.workspaceLabel;
+    const impacted = [];
+    for (const [sessionPath, info] of this.state.sessions.entries()) {
+      if (sessionPath === path || sessionPath.startsWith(`${path}/`)) {
+        impacted.push({ path: sessionPath, info });
+      }
+    }
+    let message = entry.type === 'directory'
+      ? `Delete folder "${displayName}" and all of its contents?`
+      : `Delete file "${displayName}"?`;
+    if (impacted.some(({ info }) => info && info.session && !isSessionClean(info.session))) {
+      message += '\n\nUnsaved changes in open editors will be lost.';
+    }
+    const confirmed = window.confirm(message);
+    if (!confirmed) {
+      return;
+    }
+    deleteEntry.call(this, entry, impacted.map(({ path }) => path));
+  }
+
+  function requestRenameEntry(entry) {
+    if (!entry || !entry.path) {
+      return;
+    }
+    const path = entry.path;
+    const displayName = entry.name || path.split('/').pop() || this.state.workspaceLabel;
+    let nextName = window.prompt('Rename to:', displayName);
+    if (nextName === null) {
+      return;
+    }
+    nextName = nextName.trim();
+    if (!nextName) {
+      setStatus.call(this, 'Name cannot be empty', 'error');
+      return;
+    }
+    if (nextName.includes('/') || nextName.includes('\\')) {
+      setStatus.call(this, 'Name cannot contain path separators', 'error');
+      return;
+    }
+    if (nextName === displayName) {
+      return;
+    }
+    renameEntry.call(this, entry, nextName);
+  }
+
+  async function renameEntry(entry, newName) {
+    if (!entry || !entry.path) {
+      return;
+    }
+    const path = entry.path;
+    const displayName = entry.name || path.split('/').pop() || this.state.workspaceLabel;
+    if (!this.api || typeof this.api.rename !== 'function') {
+      setStatus.call(this, 'Rename is not available', 'error');
+      return;
+    }
+    setStatus.call(this, `Renaming ${displayName}…`);
+    try {
+      const result = await this.api.rename(path, newName);
+      const targetPath = result && typeof result.target === 'string' ? result.target : path;
+
+      const oldPrefix = `${path}/`;
+
+      const updates = [];
+      for (const [sessionPath, entryRef] of this.state.sessions.entries()) {
+        if (sessionPath === path || sessionPath.startsWith(oldPrefix)) {
+          const suffix = sessionPath.slice(path.length);
+          const newSessionPath = `${targetPath}${suffix}`;
+          updates.push({ oldPath: sessionPath, newPath: newSessionPath, ref: entryRef, suffix });
+        }
+      }
+
+      if (updates.length > 0) {
+        for (const { oldPath, newPath, ref, suffix } of updates) {
+          this.state.sessions.delete(oldPath);
+          this.state.sessions.set(newPath, ref);
+          if (this.state.activePath === oldPath) {
+            this.state.activePath = newPath;
+          }
+          const tab = ref.tabEl;
+          if (tab) {
+            tab.dataset.path = newPath;
+            const label = tab.querySelector('.files-app__tab-label');
+            if (label && suffix.length === 0) {
+              label.textContent = newName;
+            }
+          }
+          if (suffix.length === 0) {
+            ref.name = newName;
+          }
+        }
+        this.state.openOrder = this.state.openOrder.map((existing) => {
+          if (existing === path) {
+            return targetPath;
+          }
+          if (existing.startsWith(oldPrefix)) {
+            return `${targetPath}${existing.slice(path.length)}`;
+          }
+          return existing;
+        });
+      }
+
+      if (this.state.selectedTreePath) {
+        if (this.state.selectedTreePath === path) {
+          this.state.selectedTreePath = targetPath;
+        } else if (this.state.selectedTreePath.startsWith(oldPrefix)) {
+          this.state.selectedTreePath = `${targetPath}${this.state.selectedTreePath.slice(path.length)}`;
+        }
+      }
+
+      pruneTreeCache.call(this, path);
+
+      const parentPath = path.split('/').slice(0, -1).join('/');
+      const parentItem = this.state.treeElements.get(parentPath) || this.state.treeElements.get('');
+      if (parentItem) {
+        parentItem.dataset.loaded = 'false';
+        await loadDirectory.call(this, parentPath, parentItem);
+        if (this.state.treeElements.has(targetPath)) {
+          setTreeSelection.call(this, targetPath);
+        } else {
+          setTreeSelection.call(this, parentPath);
+        }
+      }
+
+      setStatus.call(this, `${displayName} renamed`, 'success');
+    } catch (error) {
+      console.error(error);
+      setStatus.call(this, error.message || 'Failed to rename', 'error');
+    }
+  }
+
+  async function deleteEntry(entry, impactedPaths) {
+    if (!entry || !entry.path) {
+      return;
+    }
+    const path = entry.path;
+    const displayName = entry.name || path.split('/').pop() || this.state.workspaceLabel;
+    if (!this.api || typeof this.api.remove !== 'function') {
+      setStatus.call(this, 'Delete is not available', 'error');
+      return;
+    }
+    setStatus.call(this, `Deleting ${displayName}…`);
+    try {
+      await this.api.remove(path);
+
+      if (Array.isArray(impactedPaths)) {
+        for (const sessionPath of impactedPaths) {
+          this.closeFile(sessionPath, { force: true });
+        }
+      }
+
+      pruneTreeCache.call(this, path);
+
+      const parentPath = path.split('/').slice(0, -1).join('/');
+      const parentItem = this.state.treeElements.get(parentPath) || this.state.treeElements.get('');
+      if (parentItem) {
+        parentItem.dataset.loaded = 'false';
+        await loadDirectory.call(this, parentPath, parentItem);
+        setTreeSelection.call(this, parentPath);
+      }
+
+      if (this.state.selectedTreePath && (this.state.selectedTreePath === path || this.state.selectedTreePath.startsWith(`${path}/`))) {
+        setTreeSelection.call(this, null);
+      }
+
+      setStatus.call(this, `${displayName} deleted`, 'success');
+    } catch (error) {
+      console.error(error);
+      setStatus.call(this, error.message || 'Failed to delete', 'error');
+    }
+  }
+
+  function pruneTreeCache(path) {
+    if (typeof path !== 'string') {
+      return;
+    }
+    const prefix = path ? `${path}/` : '';
+    for (const key of Array.from(this.state.treeElements.keys())) {
+      if (!key) continue;
+      if (key === path || (prefix && key.startsWith(prefix))) {
+        this.state.treeElements.delete(key);
+      }
+    }
+  }
+
   async function toggleDirectory(treeItem, relativePath) {
     if (!treeItem || treeItem.dataset.loading === 'true') {
       return;

package/server/public/layout.js

@@ -23,7 +23,7 @@
   const HOST_ORIGIN = window.location.origin;
   const STORAGE_PREFIX = 'pinokio:layout:';
   const MIN_PANEL_SIZE = 120;
-  const GUTTER_SIZE = 4;
+  const GUTTER_SIZE = 6;
 
   const state = {
     sessionId: typeof parsedConfig.sessionId === 'string' && parsedConfig.sessionId.trim() ? parsedConfig.sessionId.trim() : null,

package/server/public/style.css

@@ -821,6 +821,10 @@ body {
   color: var(--light-color);
   position: relative;
 }
+/* Reserve scrollbar space to prevent header layout shift */
+html {
+  scrollbar-gutter: stable both-edges;
+}
 body.dark {
   color: var(--dark-color);
   background: var(--dark-bg);
@@ -2371,7 +2375,7 @@ body.dark .mode-selector .btn2.selected {
   justify-content: center;
   padding: 5px 10px;
   box-sizing: border-box;
-  width: 100px;
+  width: 70px;
   gap: 5px;
   border-radius: 5px;
 }