pinokiod 3.147.0 → 3.150.0

package/server/public/style.css

@@ -284,15 +284,16 @@ body.dark .navheader2 {
   background: rgba(255,255,255,0.07) !important;
 }
 body.dark .navheader2 .btn {
-  background: rgba(0,0,0,0.4);
+  background: rgba(255,255,255,0.1);
 }
 .navheader2 {
-  margin-top: 1px;
-  padding: 5px 0;
+  padding: 10px 0 10px;
   /*
   background: white;
   */
+  /*
   background: #F1F1F1 !important;
+  */
 }
 .navheader {
   backdrop-filter: blur(16px);
@@ -926,7 +927,6 @@ body.columns .containers {
   height: 100%;
 }
 .menu-btns {
-  display: flex;
   align-items: flex-start;
   flex-wrap: wrap;
 }
@@ -2092,7 +2092,7 @@ body.dark header .home {
 }
 header .home {
   color: var(--light-color); 
-  padding: 5px 10px;
+  padding: 10px;
   cursor: pointer !important;
 }
 /*

package/server/public/tab-idle-notifier.js

@@ -10,6 +10,7 @@
   const FRAME_LINK_SELECTOR = '.frame-link';
   const LIVE_CLASS = 'is-live';
   const MAX_MESSAGE_PREVIEW = 140;
+  const MIN_COMMAND_DURATION_MS = 2000;
 
   const tabStates = new Map();
   const observedIndicators = new WeakSet();
@@ -135,7 +136,9 @@
         isLive: false,
         notified: false,
         lastInput: '',
+        commandStartTimestamp: 0,
         lastLiveTimestamp: 0,
+        lastActivityTimestamp: 0,
         notifyEnabled: getPreference(frameName),
       };
       tabStates.set(frameName, state);
@@ -449,7 +452,7 @@ const ensureTabAccessories = aggregateDebounce(() => {
       if (observedIndicators.has(node)) {
         return;
       }
-      indicatorObserver.observe(node, { attributes: true, attributeFilter: ['class'] });
+      indicatorObserver.observe(node, { attributes: true, attributeFilter: ['class', 'data-timestamp'] });
       observedIndicators.add(node);
       log('Observing indicator', node);
     });
@@ -516,7 +519,17 @@ const ensureTabAccessories = aggregateDebounce(() => {
     return true;
   };
 
-  const handleIndicatorChange = (indicator) => {
+  const updateActivityTimestamp = (indicator, state) => {
+    if (!indicator || !state) {
+      return;
+    }
+    const rawTimestamp = Number(indicator.dataset?.timestamp);
+    if (Number.isFinite(rawTimestamp)) {
+      state.lastActivityTimestamp = rawTimestamp;
+    }
+  };
+
+  const handleIndicatorChange = (indicator, changedAttribute = 'class') => {
     const link = indicator.closest(FRAME_LINK_SELECTOR);
     if (!link) {
       return;
@@ -529,12 +542,21 @@ const ensureTabAccessories = aggregateDebounce(() => {
     if (!state) {
       return;
     }
+    if (changedAttribute === 'data-timestamp') {
+      updateActivityTimestamp(indicator, state);
+      return;
+    }
+
     const isLive = indicator.classList.contains(LIVE_CLASS);
     state.isLive = isLive;
+    updateActivityTimestamp(indicator, state);
     log('Indicator change', { frameName, isLive, awaitingLive: state.awaitingLive, awaitingIdle: state.awaitingIdle });
 
     if (isLive) {
       state.lastLiveTimestamp = Date.now();
+      if (!state.commandStartTimestamp) {
+        state.commandStartTimestamp = state.lastActivityTimestamp || state.lastLiveTimestamp;
+      }
       if (state.awaitingLive && state.hasRecentInput) {
         state.awaitingLive = false;
         state.awaitingIdle = true;
@@ -543,24 +565,41 @@ const ensureTabAccessories = aggregateDebounce(() => {
     }
 
     if (state.awaitingIdle && state.hasRecentInput && !state.notified) {
-      if (!state.notifyEnabled) {
+      const activityTs = Number.isFinite(state.lastActivityTimestamp)
+        ? state.lastActivityTimestamp
+        : Number(indicator.dataset?.timestamp);
+      const startTs = Number.isFinite(state.commandStartTimestamp)
+        ? state.commandStartTimestamp
+        : null;
+
+      let runtimeMs = null;
+      if (Number.isFinite(activityTs) && Number.isFinite(startTs) && activityTs >= startTs) {
+        runtimeMs = activityTs - startTs;
+      }
+
+      if (runtimeMs !== null && runtimeMs < MIN_COMMAND_DURATION_MS) {
+        log('Skipping idle notification (command completed quickly)', { frameName, runtimeMs });
+      } else if (!state.notifyEnabled) {
         log('Notifications disabled for frame', frameName);
       } else if (shouldNotify(link)) {
         sendNotification(link, state);
         state.notified = true;
-        log('Idle notification dispatched', frameName);
+        log('Idle notification dispatched', { frameName, runtimeMs });
       }
     }
 
     state.hasRecentInput = false;
     state.awaitingIdle = false;
     state.awaitingLive = false;
+    state.commandStartTimestamp = 0;
+    state.lastLiveTimestamp = 0;
+    state.lastActivityTimestamp = 0;
   };
 
   const indicatorObserver = new MutationObserver((mutations) => {
     for (const mutation of mutations) {
       if (mutation.type === 'attributes' && mutation.target instanceof HTMLElement) {
-        handleIndicatorChange(mutation.target);
+        handleIndicatorChange(mutation.target, mutation.attributeName || 'class');
       }
     }
   });
@@ -573,7 +612,7 @@ const ensureTabAccessories = aggregateDebounce(() => {
           continue;
         }
         if (node.matches(TAB_UPDATED_SELECTOR)) {
-          indicatorObserver.observe(node, { attributes: true, attributeFilter: ['class'] });
+          indicatorObserver.observe(node, { attributes: true, attributeFilter: ['class', 'data-timestamp'] });
           observedIndicators.add(node);
           log('Observed newly added indicator', node);
           shouldRescan = true;
@@ -615,6 +654,9 @@ const ensureTabAccessories = aggregateDebounce(() => {
     state.awaitingIdle = false;
     state.notified = false;
     state.lastInput = sanitisePreview(data.line || '');
+    state.commandStartTimestamp = Date.now();
+    state.lastActivityTimestamp = 0;
+    state.lastLiveTimestamp = 0;
     log('Terminal input captured', { frameName, line: data.line, state: { ...state } });
 
     const indicator = findIndicatorForFrame(frameName);

package/server/public/terminal_input_tracker.js

@@ -35,14 +35,14 @@
         if (!isLast) {
           const line = this.buffer + segment
           this.buffer = ""
-          this.submit(line)
+          this.submit(line, { hadLineBreak: true })
         } else {
           this.buffer += segment
         }
       }
     }
 
-    submit(line) {
+    submit(line, meta = {}) {
       const win = this.getWindow()
       if (!win || !win.parent || typeof win.parent.postMessage !== "function") {
         return
@@ -50,11 +50,13 @@
       const safeLine = (line || "").replace(/[\x00-\x1F\x7F]/g, "")
       const preview = safeLine.trim()
       const truncated = preview.length > this.limit ? `${preview.slice(0, this.limit)}...` : preview
+      const hadLineBreak = Boolean(meta && meta.hadLineBreak)
+      const meaningful = truncated.length > 0 || hadLineBreak
       win.parent.postMessage({
         type: "terminal-input",
         frame: this.getFrameName(),
         line: truncated,
-        hasContent: truncated.length > 0
+        hasContent: meaningful
       }, "*")
     }
   }

package/server/routes/files.js

@@ -0,0 +1,284 @@
+const express = require('express');
+const path = require('path');
+const fs = require('fs');
+const { isBinaryFile } = require('isbinaryfile');
+
+const MAX_EDITABLE_FILE_SIZE_BYTES = 5 * 1024 * 1024; // 5MB safety limit
+
+const createHttpError = (status, message) => {
+  const error = new Error(message);
+  error.status = status;
+  return error;
+};
+
+const sanitizeSegments = (value) => {
+  const normalized = path.posix.normalize(String(value || '').replace(/\\/g, '/'));
+  if (normalized === '.' || normalized === '') {
+    return [];
+  }
+  const segments = normalized.split('/').filter((segment) => segment && segment !== '.');
+  if (segments.some((segment) => segment === '..')) {
+    throw createHttpError(400, 'Invalid path');
+  }
+  return segments;
+};
+
+module.exports = function registerFileRoutes(app, { kernel, getTheme, exists }) {
+  if (!app || !kernel) {
+    throw new Error('File routes require an express app and kernel instance');
+  }
+
+  const router = express.Router();
+
+  const asyncHandler = (fn) => (req, res, next) => {
+    Promise.resolve(fn(req, res, next)).catch(next);
+  };
+
+
+  const ensureWorkspace = async (workspaceParam, rootParam) => {
+    const apiRoot = kernel.path('api');
+    if (rootParam) {
+      let decodedRoot;
+      try {
+        decodedRoot = Buffer.from(String(rootParam), 'base64').toString('utf8');
+      } catch (error) {
+        throw createHttpError(400, 'Invalid workspace descriptor');
+      }
+      if (!decodedRoot) {
+        throw createHttpError(400, 'Invalid workspace descriptor');
+      }
+      const normalizedRoot = path.resolve(decodedRoot);
+      if (!path.isAbsolute(normalizedRoot)) {
+        throw createHttpError(400, 'Workspace path must be absolute');
+      }
+      const relativeToHome = path.relative(kernel.homedir, normalizedRoot);
+      if (relativeToHome.startsWith('..') || path.isAbsolute(relativeToHome)) {
+        throw createHttpError(400, 'Workspace outside Pinokio home');
+      }
+      const relativeToApi = path.relative(apiRoot, normalizedRoot);
+      if (relativeToApi.startsWith('..') || path.isAbsolute(relativeToApi)) {
+        throw createHttpError(400, 'Workspace outside api directory');
+      }
+      const existsResult = await exists(normalizedRoot);
+      if (!existsResult) {
+        throw createHttpError(404, 'Workspace not found');
+      }
+      const segments = sanitizeSegments(workspaceParam || relativeToApi);
+      const effectiveSegments = segments.length > 0 ? segments : sanitizeSegments(relativeToApi);
+      const slugSegments = effectiveSegments.length > 0 ? effectiveSegments : [path.basename(normalizedRoot)];
+      return {
+        apiRoot,
+        segments: slugSegments,
+        workspaceRoot: normalizedRoot,
+        workspaceLabel: slugSegments[slugSegments.length - 1],
+        workspaceSlug: slugSegments.join('/'),
+      };
+    }
+
+    if (!workspaceParam || typeof workspaceParam !== 'string') {
+      throw createHttpError(400, 'Missing workspace');
+    }
+
+    const segments = sanitizeSegments(workspaceParam);
+    if (segments.length === 0) {
+      throw createHttpError(400, 'Workspace path is required');
+    }
+
+    const workspaceRoot = path.resolve(apiRoot, ...segments);
+    const relativeToApi = path.relative(apiRoot, workspaceRoot);
+    if (relativeToApi.startsWith('..') || path.isAbsolute(relativeToApi)) {
+      throw createHttpError(400, 'Workspace outside api directory');
+    }
+    const existsResult = await exists(workspaceRoot);
+    if (!existsResult) {
+      throw createHttpError(404, 'Workspace not found');
+    }
+    return {
+      apiRoot,
+      segments,
+      workspaceRoot,
+      workspaceLabel: segments[segments.length - 1],
+      workspaceSlug: segments.join('/'),
+    };
+  };
+
+  const resolveWorkspacePath = async (workspaceParam, relativeParam = '', rootParam) => {
+    const workspaceInfo = await ensureWorkspace(workspaceParam, rootParam);
+    const relativeSegments = sanitizeSegments(relativeParam);
+    const absolutePath = path.resolve(workspaceInfo.workspaceRoot, ...relativeSegments);
+    const relativeToWorkspace = path.relative(workspaceInfo.workspaceRoot, absolutePath);
+    if (relativeToWorkspace.startsWith('..') || path.isAbsolute(relativeToWorkspace)) {
+      throw createHttpError(400, 'Path escapes workspace');
+    }
+    const relativePosix = relativeSegments.join('/');
+    return {
+      ...workspaceInfo,
+      absolutePath,
+      relativeSegments,
+      relativePosix,
+    };
+  };
+
+  router.get('/pinokio/fileview/*', asyncHandler(async (req, res) => {
+    const workspaceParam = req.params[0] || '';
+    const initialRelative = req.query.path || '';
+    const { workspaceRoot, workspaceLabel, workspaceSlug, relativePosix, absolutePath } = await resolveWorkspacePath(workspaceParam, initialRelative);
+    const initialPosixPath = relativePosix;
+    const initialStats = await fs.promises.stat(absolutePath).catch(() => null);
+    const initialType = initialStats ? (initialStats.isDirectory() ? 'directory' : initialStats.isFile() ? 'file' : null) : null;
+
+    const workspaceMeta = {
+      title: '',
+      description: '',
+      icon: '',
+      iconpath: ''
+    };
+    try {
+      const meta = await kernel.api.meta(workspaceSlug);
+      if (meta && typeof meta === 'object') {
+        workspaceMeta.title = typeof meta.title === 'string' ? meta.title : '';
+        workspaceMeta.description = typeof meta.description === 'string' ? meta.description : '';
+        workspaceMeta.icon = typeof meta.icon === 'string' ? meta.icon : '';
+        workspaceMeta.iconpath = typeof meta.iconpath === 'string' ? meta.iconpath : '';
+      }
+    } catch (error) {
+      // Metadata is optional for the file editor; ignore failures.
+    }
+
+    const workspaceRootEncoded = Buffer.from(workspaceRoot).toString('base64');
+    res.render('file_browser', {
+      theme: getTheme ? getTheme() : 'light',
+      agent: req.agent,
+      workspace: workspaceSlug,
+      workspaceLabel,
+      workspaceRoot,
+      workspaceSlug,
+      workspaceRootEncoded,
+      initialPath: initialPosixPath,
+      initialPathType: initialType,
+      workspaceMeta
+    });
+  }));
+
+  router.get('/api/files/list', asyncHandler(async (req, res) => {
+    const { workspace, path: relativeQuery } = req.query;
+    const { absolutePath, relativePosix, workspaceSlug } = await resolveWorkspacePath(workspace, relativeQuery, req.query.root);
+
+    const stats = await fs.promises.stat(absolutePath).catch(() => null);
+    if (!stats) {
+      throw createHttpError(404, 'Directory not found');
+    }
+    if (!stats.isDirectory()) {
+      throw createHttpError(400, 'Path must be a directory');
+    }
+
+    const entries = await fs.promises.readdir(absolutePath, { withFileTypes: true }).catch(() => []);
+    const sorted = entries.sort((a, b) => {
+      if (a.isDirectory() && !b.isDirectory()) return -1;
+      if (!a.isDirectory() && b.isDirectory()) return 1;
+      return a.name.localeCompare(b.name);
+    });
+
+    const items = await Promise.all(sorted.map(async (dirent) => {
+      const entrySegments = [...(relativePosix ? relativePosix.split('/') : []), dirent.name];
+      const entryPosix = entrySegments.filter(Boolean).join('/');
+      let hasChildren = false;
+      if (dirent.isDirectory()) {
+        const candidatePath = path.resolve(absolutePath, dirent.name);
+        try {
+          const childDir = await fs.promises.opendir(candidatePath);
+          let count = 0;
+          for await (const child of childDir) {
+            count += 1;
+            if (count > 0) {
+              hasChildren = true;
+              break;
+            }
+          }
+          await childDir.close();
+        } catch (err) {
+          hasChildren = false;
+        }
+      }
+      return {
+        name: dirent.name,
+        path: entryPosix,
+        type: dirent.isDirectory() ? 'directory' : 'file',
+        workspace: workspaceSlug,
+        hasChildren,
+      };
+    }));
+
+    res.json({
+      workspace: workspaceSlug,
+      path: relativePosix,
+      entries: items,
+    });
+  }));
+
+  router.get('/api/files/read', asyncHandler(async (req, res) => {
+    const { workspace, path: relativeQuery } = req.query;
+    const { absolutePath, relativePosix, workspaceSlug } = await resolveWorkspacePath(workspace, relativeQuery, req.query.root);
+
+    const stats = await fs.promises.stat(absolutePath).catch(() => null);
+    if (!stats) {
+      throw createHttpError(404, 'File not found');
+    }
+    if (!stats.isFile()) {
+      throw createHttpError(400, 'Path must be a file');
+    }
+    const metaOnly = Object.prototype.hasOwnProperty.call(req.query, 'meta');
+    if (metaOnly) {
+      res.json({
+        workspace: workspaceSlug,
+        path: relativePosix,
+        size: stats.size,
+        mtime: stats.mtimeMs,
+        meta: true,
+      });
+      return;
+    }
+    if (stats.size > MAX_EDITABLE_FILE_SIZE_BYTES) {
+      throw createHttpError(413, 'File is too large to open in the editor');
+    }
+    const isBinary = await isBinaryFile(absolutePath);
+    if (isBinary) {
+      throw createHttpError(415, 'Binary files cannot be opened in the editor');
+    }
+    const content = await fs.promises.readFile(absolutePath, 'utf8');
+    res.json({
+      workspace: workspaceSlug,
+      path: relativePosix,
+      content,
+      size: stats.size,
+      mtime: stats.mtimeMs,
+    });
+  }));
+
+  router.post('/api/files/save', asyncHandler(async (req, res) => {
+    const { workspace, path: relativePath, content, root: rootParam } = req.body || {};
+    if (typeof content !== 'string') {
+      throw createHttpError(400, 'File content must be a string');
+    }
+
+    const { absolutePath, relativePosix, workspaceSlug } = await resolveWorkspacePath(workspace, relativePath, rootParam);
+    const stats = await fs.promises.stat(absolutePath).catch(() => null);
+    if (!stats) {
+      throw createHttpError(404, 'File not found');
+    }
+    if (!stats.isFile()) {
+      throw createHttpError(400, 'Path must be a file');
+    }
+
+    await fs.promises.writeFile(absolutePath, content, 'utf8');
+    const updatedStats = await fs.promises.stat(absolutePath);
+    res.json({
+      workspace: workspaceSlug,
+      path: relativePosix,
+      size: updatedStats.size,
+      mtime: updatedStats.mtimeMs,
+    });
+  }));
+
+  app.use(router);
+};

package/server/views/app.ejs

@@ -22,6 +22,9 @@ body.dark #devtab.selected {
   border: none;
   background: rgba(255,255,255,0.07);
 }
+#editortab {
+  color: #7f5bf3;
+}
 #devtab {
   align-items: center;
   justify-content: center;
@@ -393,10 +396,36 @@ body.dark .appcanvas > aside .header-item.btn:not(.selected) {
 .appcanvas > aside .header-item .tab {
   display: flex;
   align-items: center;
+  /*
   gap: 6px;
+  */
   flex: 1;
   min-width: 0;
 }
+.appcanvas > aside .header-item .tab .tab-metric {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 6px;
+  font-size: 11px;
+  white-space: nowrap;
+  flex: 0 0 auto;
+  padding-left: 6px;
+}
+.appcanvas > aside .header-item .tab .tab-metric__label {
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  font-size: 10px;
+  opacity: 0.7;
+}
+.appcanvas > aside .header-item .tab .tab-metric__value {
+  font-weight: 600;
+  font-size: 11px;
+}
+.appcanvas > aside .header-item .tab .tab-metric .disk-usage {
+  flex: 0 0 auto;
+  min-width: 0;
+  text-align: right;
+}
 
 .appcanvas > aside .header-item:hover {
   background: var(--pinokio-sidebar-tab-hover);
@@ -1261,6 +1290,7 @@ body.dark .submenu {
   flex-grow: 1;
   font-weight: bold;
   text-align: right;
+  opacity: 0.5;
 }
 .disk-usage i {
   margin-right: 5px;
@@ -1426,8 +1456,8 @@ body.dark #fs-status {
 
 .fs-status-dropdown.git-fork .fs-dropdown-menu,
 .fs-status-dropdown.git-publish .fs-dropdown-menu {
-  left: auto;
-  right: 0;
+  left: 0;
+  right: auto;
   width: min(420px, calc(100vw - 24px));
   max-width: min(420px, calc(100vw - 24px));
   white-space: normal;
@@ -1504,9 +1534,6 @@ body.dark #fs-status .fs-dropdown-menu .frame-link:hover {
   background: rgba(148, 163, 184, 0.15);
 }
 
-#fs-status .git-changes {
-  margin-left: auto;
-}
 
 #fs-changes-menu .fs-dropdown-empty {
   padding: 8px 14px;
@@ -1515,8 +1542,8 @@ body.dark #fs-status .fs-dropdown-menu .frame-link:hover {
 }
 
 #fs-changes-menu {
-  left: auto;
-  right: 0;
+  left: 0;
+  right: auto;
   width: max-content;
   max-width: min(460px, calc(100vw - 32px));
   max-height: min(70vh, 420px);
@@ -2900,6 +2927,15 @@ body.dark .pinokio-fork-dropdown-remote, body.dark .pinokio-publish-dropdown-rem
             <div class='loader'><i class='fa-solid fa-angle-right'></i></div>
             -->
           </a>
+          <a id='editortab' data-mode="refresh" target="<%=editor_tab%>" href="<%=editor_tab%>" class="btn header-item frame-link edit-tab" data-index="11">
+            <div class='tab'>
+              <i class="fa-solid fa-file-lines"></i>
+              <div class='display'>Files</div>
+              <div class='tab-metric'>
+                <span class='disk-usage tab-metric__value' data-path="/">--</span>
+              </div>
+            </div>
+          </a>
           <div class="dynamic <%=type==='run' ? '' : 'selected'%>">
             <div class='submenu'>
               <% if (plugin_menu) { %>
@@ -2914,6 +2950,13 @@ body.dark .pinokio-fork-dropdown-remote, body.dark .pinokio-publish-dropdown-rem
           <% if (config.menu) { %>
             <%- include('./partials/menu', { menu: config.menu, }) %>
           <% } %>
+          <a id='settings-tab' data-mode="refresh" target="env-settings" href="/env/api/<%=name%>" class="btn header-item frame-link" data-index="settings" data-static="retain">
+            <div class='tab'>
+              <i class="fa-solid fa-gear"></i>
+              <div class='display'>Settings</div>
+              <div class='flexible'></div>
+            </div>
+          </a>
         </div>
       <% } %>
       <div class='m s temp-menu' data-type='s'>
@@ -2933,27 +2976,6 @@ body.dark .pinokio-fork-dropdown-remote, body.dark .pinokio-publish-dropdown-rem
   <div class='container'>
     <% if (type === "browse") { %>
       <div id='fs-status' data-workspace="<%=name%>" data-create-uri="<%=git_create_url%>" data-history-uri="<%=git_history_url%>" data-status-uri="<%=git_status_url%>" data-uri="<%=git_monitor_url%>" data-push-uri="<%=git_push_url%>" data-fork-uri="<%=git_fork_url%>">
-        <a target="<%=src%>" href="<%=src%>" class='fs-status-btn frame-link' data-index="0" data-mode="refresh" data-type="n">
-          <span class='fs-status-label'>
-            <i class="fa-regular fa-folder-open"></i>
-            Files | 
-            <div class='disk-usage' data-path="/"></div>
-          </span>
-        </a>
-        <div class='fs-status-dropdown'>
-          <button id='edit-toggle' class='fs-status-btn revealer' data-group='#fs-edit-menu' type='button'>
-            <span class='fs-status-label'>
-              <i class='fa-solid fa-pen-to-square'></i>
-              Edit
-            </span>
-          </button>
-          <div class='fs-dropdown-menu submenu hidden' id='fs-edit-menu'>
-            <button type='button' class='fs-dropdown-item' id='edit'><i class="fa-solid fa-pencil"></i> Edit</button>
-            <button type='button' class='fs-dropdown-item' id='move'><i class="fa-solid fa-right-to-bracket"></i> Move</button>
-            <button type='button' class='fs-dropdown-item' id='copy'><i class="fa-solid fa-copy"></i> Copy</button>
-            <button type='button' class='fs-dropdown-item' id='delete' data-name="<%=name%>"><i class="fa-solid fa-trash-can"></i> Delete</button>
-          </div>
-        </div>
         <!--
         <div class='fs-status-dropdown nested-menu git blue'>
           <button type='button' class='fs-status-btn frame-link reveal'>
@@ -2966,11 +2988,6 @@ body.dark .pinokio-fork-dropdown-remote, body.dark .pinokio-publish-dropdown-rem
           </div>
         </div>
         -->
-        <div class='fs-status-dropdown'>
-          <a target="/env/api/<%=name%>" href="/env/api/<%=name%>" class='fs-status-btn frame-link selected' data-index="3" data-mode="refresh" data-type="n">
-            <span class='fs-status-label'><i class='fa-solid fa-gear'></i> Settings</span>
-          </a>
-        </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>
@@ -4842,6 +4859,9 @@ body.dark .pinokio-fork-dropdown-remote, body.dark .pinokio-publish-dropdown-rem
     if (!targetContainer) {
       return
     }
+    const staticNodes = Array.from(targetContainer.children || []).filter((node) => {
+      return node && node.dataset && node.dataset.static === 'retain'
+    })
     const template = document.createElement('template')
     template.innerHTML = html || ''
     const fragment = template.content
@@ -4857,6 +4877,28 @@ body.dark .pinokio-fork-dropdown-remote, body.dark .pinokio-publish-dropdown-rem
     }
     const nodes = Array.from(fragment.childNodes)
     targetContainer.replaceChildren(...nodes)
+    if (staticNodes.length > 0) {
+      staticNodes.forEach((node) => {
+        if (!node) {
+          return
+        }
+        if (node.parentElement === targetContainer) {
+          return
+        }
+        if (node.dataset && node.dataset.static) {
+          const duplicates = Array.from(targetContainer.children || []).filter((candidate) => {
+            if (candidate === node) {
+              return false
+            }
+            return candidate.dataset && candidate.dataset.static === node.dataset.static
+          })
+          duplicates.forEach((duplicate) => {
+            duplicate.remove()
+          })
+        }
+        targetContainer.appendChild(node)
+      })
+    }
   }
   let timestampIntervalId = null
   const ensureTimestampInterval = () => {