pinokiod 7.3.9 → 7.3.10

package/package.json

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

package/server/public/common.js

@@ -2886,7 +2886,10 @@ const compactLayoutMedia = window.matchMedia(COMPACT_LAYOUT_QUERY);
 
 function initTippy() {
   try {
-    tippyInstances = tippy("[data-tippy-content]", {
+    const targets = Array.from(document.querySelectorAll("[data-tippy-content]")).filter((target) => {
+      return !target.closest('aside');
+    });
+    tippyInstances = tippy(targets, {
       theme: "pointer",
       onCreate(instance) {
         updateTippyPlacement(instance);
@@ -2898,13 +2901,9 @@ function initTippy() {
 
 function updateTippyPlacement(instance) {
   const isCompact = compactLayoutMedia.matches;
-  const isHeaderElement = instance.reference.closest('header.navheader');
-  const isSidebarTab = instance.reference.closest('aside') && instance.reference.classList.contains('tab');
   
   if (isCompact) {
     instance.setProps({ placement: 'right' });
-  } else if (isSidebarTab) {
-    instance.setProps({ placement: 'left' });
   } else {
     instance.setProps({ placement: 'top' });
   }
@@ -2914,17 +2913,6 @@ function updateAllTooltips() {
   tippyInstances.forEach(updateTippyPlacement);
 }
 
-function setTabTooltips() {
-  // Set data-tippy-content for sidebar tabs based on their .caption text
-  const tabs = document.querySelectorAll('aside .tab');
-  tabs.forEach(tab => {
-    const caption = tab.querySelector('.caption');
-    if (caption && caption.textContent.trim()) {
-      tab.setAttribute('data-tippy-content', caption.textContent.trim());
-    }
-  });
-}
-
 document.addEventListener("DOMContentLoaded", () => {
   if (typeof initUrlDropdown === 'function' && !window.PinokioUrlDropdown) {
     try {
@@ -3019,7 +3007,6 @@ document.addEventListener("DOMContentLoaded", () => {
     return null;
   };
 
-  setTabTooltips();
   initTippy();
 
 //  if (window !== window.top) {
@@ -3240,11 +3227,14 @@ document.addEventListener("DOMContentLoaded", () => {
     })
   }
 
+  /*
+  // Screen capture toolbar handling is disabled while the button is hidden.
   if (document.querySelector("#screenshot")) {
     document.querySelector("#screenshot").addEventListener("click", (e) => {
       screenshot()
     })
   }
+  */
   bindHistoryButton("#back", -1)
   bindHistoryButton("#forward", 1)
   if (document.querySelector("#refresh-page")) {

package/server/public/nav.js

@@ -500,7 +500,8 @@ document.addEventListener("DOMContentLoaded", () => {
 
   }
 
-  // Inspector handling
+  /*
+  // Inspector handling is disabled while the X-ray toolbar button is hidden.
   const inspectorButton = document.querySelector('#inspector');
   const isDesktop = agent === 'electron';
 
@@ -600,6 +601,7 @@ document.addEventListener("DOMContentLoaded", () => {
       }
     }, true);
   }
+  */
 
 
 });

package/server/public/style.css

@@ -1348,16 +1348,16 @@ body.main-sidebar-page main > :not(.main-sidebar) {
 body.main-sidebar-page main > .container,
 body.main-sidebar-page main > .task-container {
   box-sizing: border-box;
-  padding-left: 16px;
+  padding-left: 12px;
 }
 .main-sidebar {
   order: -1;
-  width: 196px;
+  width: 180px;
   display: flex;
   flex-direction: column;
   flex-shrink: 0;
   min-height: 0;
-  padding: 8px 6px;
+  padding: 8px 5px;
   box-sizing: border-box;
   background: transparent;
   color: var(--pinokio-sidebar-tab-muted);
@@ -1399,7 +1399,7 @@ body.main-sidebar-page main > .task-container {
   display: flex;
   align-items: flex-end;
   box-sizing: border-box;
-  padding: 5px 6px 4px;
+  padding: 5px 5px 4px;
   color: var(--pinokio-sidebar-action-muted);
   font-size: 11px;
   font-weight: 500;
@@ -1415,9 +1415,9 @@ body.main-sidebar-page main > .task-container {
   display: grid !important;
   grid-template-columns: 16px minmax(0, 1fr) auto;
   align-items: center !important;
-  column-gap: 7px !important;
+  column-gap: 6px !important;
   margin: 0;
-  padding: 3px 6px !important;
+  padding: 3px 5px !important;
   box-sizing: border-box;
   border: 0 !important;
   border-left: 0 !important;
@@ -1445,6 +1445,11 @@ body.main-sidebar-page main > .task-container {
   color: var(--pinokio-sidebar-tab-active-color) !important;
   font-weight: 600 !important;
 }
+body.main-sidebar-page aside.main-sidebar .tab:hover,
+body.main-sidebar-page aside.main-sidebar .tab:focus-visible,
+body.main-sidebar-page aside.main-sidebar .tab.selected {
+  color: var(--pinokio-sidebar-tab-active-color) !important;
+}
 .main-sidebar .tab i,
 .main-sidebar .tab .main-sidebar-action-icon {
   grid-column: 1;
@@ -1467,7 +1472,15 @@ body.main-sidebar-page main > .task-container {
 .main-sidebar .tab.selected .main-sidebar-action-icon {
   color: var(--pinokio-sidebar-icon-active) !important;
 }
-.main-sidebar .caption {
+body.main-sidebar-page aside.main-sidebar .tab:hover i,
+body.main-sidebar-page aside.main-sidebar .tab:focus-visible i,
+body.main-sidebar-page aside.main-sidebar .tab.selected i,
+body.main-sidebar-page aside.main-sidebar .tab:hover .main-sidebar-action-icon,
+body.main-sidebar-page aside.main-sidebar .tab:focus-visible .main-sidebar-action-icon,
+body.main-sidebar-page aside.main-sidebar .tab.selected .main-sidebar-action-icon {
+  color: var(--pinokio-sidebar-icon-active) !important;
+}
+.main-sidebar .tab .caption {
   grid-column: 2;
   min-width: 0;
   width: auto !important;
@@ -1479,7 +1492,7 @@ body.main-sidebar-page main > .task-container {
   word-wrap: normal !important;
 }
 .main-sidebar .tab.submenu {
-  padding-left: 16px !important;
+  padding-left: 14px !important;
 }
 .main-sidebar .universal-create-menu {
   width: 100%;
@@ -1947,7 +1960,7 @@ header .runner.terminal-runner-minimal .btn span {
   margin-left: auto;
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: 6px;
   flex-wrap: wrap;
   justify-content: flex-end;
   min-width: 0;
@@ -3940,7 +3953,7 @@ aside .qr {
     font-size: 12px;
   }
 
-  body.main-sidebar-page .main-sidebar .caption {
+  body.main-sidebar-page .main-sidebar .tab .caption {
     width: auto !important;
     text-align: left !important;
     word-wrap: normal !important;

package/server/public/task-launcher.css

@@ -1628,15 +1628,51 @@ body.dark .task-link-button.danger {
 }
 
 .setup-shell {
-  width: min(1120px, 100%);
+  width: min(1080px, 100%);
+}
+
+body.setup-page .task-shell-header {
+  padding-bottom: 16px;
+}
+
+body.setup-page .task-shell-header-main {
+  max-width: 820px;
+}
+
+body.setup-page .task-eyebrow {
+  color: var(--task-muted);
+  letter-spacing: 0;
+}
+
+body.setup-page .task-title {
+  font-size: clamp(24px, 2.4vw, 30px);
+  line-height: 1.1;
+  letter-spacing: 0;
+}
+
+body.setup-page .task-description {
+  max-width: 76ch;
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+body.setup-page .task-badge {
+  min-height: 22px;
+  border-radius: 7px;
+}
+
+body.setup-page .task-badge-warning {
+  border-color: color-mix(in srgb, var(--task-accent) 20%, var(--task-border));
+  background: color-mix(in srgb, var(--task-accent) 7%, var(--task-panel));
+  color: color-mix(in srgb, var(--task-accent) 58%, var(--task-text));
 }
 
 .setup-layout {
   display: grid;
-  grid-template-columns: minmax(0, 1fr) 320px;
-  gap: 36px;
+  grid-template-columns: minmax(0, 1fr) 300px;
+  gap: 32px;
   align-items: start;
-  padding-top: 18px;
+  padding-top: 16px;
 }
 
 .setup-requirements-section {
@@ -1646,23 +1682,23 @@ body.dark .task-link-button.danger {
 
 .setup-requirement-list {
   display: grid;
-  gap: 10px;
+  gap: 8px;
 }
 
 .setup-requirement-row {
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto;
-  gap: 16px;
+  gap: 14px;
   align-items: center;
-  padding: 14px 16px;
+  padding: 11px 12px;
   border: 1px solid var(--task-border);
-  border-radius: 14px;
-  background: color-mix(in srgb, var(--task-panel) 94%, var(--task-soft));
+  border-radius: 8px;
+  background: color-mix(in srgb, var(--task-panel) 97%, var(--task-soft));
 }
 
 .setup-requirement-row.needs-update {
-  border-color: color-mix(in srgb, var(--task-accent) 18%, var(--task-border-strong));
-  background: color-mix(in srgb, var(--task-accent) 8%, var(--task-panel));
+  border-color: var(--task-border-strong);
+  background: color-mix(in srgb, var(--task-panel) 95%, var(--task-soft));
 }
 
 .setup-requirement-copy {
@@ -1670,17 +1706,17 @@ body.dark .task-link-button.danger {
 }
 
 .setup-requirement-name {
-  font-size: 14px;
+  font-size: 13px;
   font-weight: 700;
-  letter-spacing: -0.02em;
+  letter-spacing: 0;
   color: var(--task-text);
   word-break: break-word;
 }
 
 .setup-requirement-detail {
-  margin-top: 4px;
+  margin-top: 3px;
   color: var(--task-muted);
-  font-size: 12px;
+  font-size: 11px;
   line-height: 1.45;
 }
 
@@ -1688,50 +1724,63 @@ body.dark .task-link-button.danger {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: 8px;
-  min-height: 30px;
-  padding: 0 11px;
+  gap: 6px;
+  min-height: 26px;
+  padding: 0 9px;
   border: 1px solid var(--task-border);
-  border-radius: 999px;
-  background: color-mix(in srgb, var(--task-panel) 88%, var(--task-soft));
+  border-radius: 7px;
+  background: transparent;
   color: var(--task-muted);
-  font-size: 11px;
+  font-size: 10px;
   font-weight: 700;
   letter-spacing: 0.01em;
   white-space: nowrap;
 }
 
+.setup-requirement-state i {
+  font-size: 10px;
+}
+
 .setup-requirement-row.is-installed .setup-requirement-state {
+  border-color: color-mix(in srgb, var(--task-border) 72%, transparent);
   color: var(--task-text);
 }
 
 .setup-requirement-row.needs-update .setup-requirement-state {
-  border-color: color-mix(in srgb, var(--task-accent) 24%, var(--task-border-strong));
-  background: color-mix(in srgb, var(--task-accent) 10%, var(--task-panel));
-  color: color-mix(in srgb, var(--task-accent) 70%, var(--task-text));
+  border-color: color-mix(in srgb, var(--task-accent) 22%, var(--task-border-strong));
+  background: color-mix(in srgb, var(--task-accent) 6%, var(--task-panel));
+  color: color-mix(in srgb, var(--task-accent) 56%, var(--task-text));
 }
 
 .setup-actions-column {
   position: sticky;
-  top: 18px;
+  top: 20px;
   align-self: start;
+  padding-left: 24px;
+  border-left: 1px solid var(--task-border);
 }
 
 .setup-action-card {
   margin: 0;
-  padding: 18px 0 0;
+  padding: 0;
   border-top: 0;
 }
 
 .setup-summary-grid {
-  margin-top: 2px;
+  margin-top: 4px;
+}
+
+.setup-summary-grid .task-meta-chip {
+  border-radius: 8px;
+  background: color-mix(in srgb, var(--task-panel) 96%, var(--task-soft));
 }
 
 .setup-primary-button {
   width: 100%;
   min-height: 40px;
-  margin-top: 18px;
+  margin-top: 16px;
   font-size: 12px;
+  border-radius: 8px;
 }
 
 .setup-install-form {
@@ -1740,9 +1789,9 @@ body.dark .task-link-button.danger {
 
 .setup-secondary-actions {
   display: grid;
-  gap: 10px;
-  padding-top: 16px;
-  margin-top: 16px;
+  gap: 8px;
+  padding-top: 14px;
+  margin-top: 14px;
   border-top: 1px solid var(--task-border);
 }
 
@@ -1752,6 +1801,9 @@ body.dark .task-link-button.danger {
 
 .setup-secondary-actions .task-button {
   justify-content: flex-start;
+  min-height: 30px;
+  border-radius: 7px;
+  color: var(--task-muted);
 }
 
 .setup-reset-loading {
@@ -1782,26 +1834,26 @@ body.dark .task-link-button.danger {
   width: min(480px, 100%);
   display: flex;
   align-items: center;
-  gap: 16px;
-  padding: 20px;
+  gap: 14px;
+  padding: 16px;
   border: 1px solid var(--task-border);
-  border-radius: 16px;
-  background: color-mix(in srgb, var(--task-panel) 94%, var(--task-soft));
+  border-radius: 10px;
+  background: color-mix(in srgb, var(--task-panel) 96%, var(--task-soft));
   box-sizing: border-box;
 }
 
 .setup-loading-icon {
-  width: 42px;
-  height: 42px;
+  width: 36px;
+  height: 36px;
   flex: 0 0 auto;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border: 1px solid var(--task-border);
-  border-radius: 12px;
-  background: color-mix(in srgb, var(--task-panel) 92%, var(--task-soft));
+  border-radius: 8px;
+  background: color-mix(in srgb, var(--task-panel) 96%, var(--task-soft));
   color: var(--task-accent);
-  font-size: 16px;
+  font-size: 14px;
 }
 
 .setup-loading-copy {
@@ -3049,6 +3101,8 @@ body.dark .plugin-option .option-icon {
     top: 12px;
     order: -1;
     z-index: 2;
+    padding-left: 0;
+    border-left: 0;
   }
 
   .setup-action-card {

package/server/public/terminal-settings.js

@@ -730,6 +730,9 @@
         : null;
       this.forceResizeButtons = new WeakMap();
       this.forceResizeHandler = null;
+      this.tooltipElement = null;
+      this.activeTooltipTarget = null;
+      this.boundTooltipReposition = () => this.positionTerminalTooltip();
       this.minimalRunnerMode = detectMinimalRunnerMode();
       this.currentFontFamily = typeof this.preferences.fontFamily === 'string' ? this.preferences.fontFamily.trim() : '';
       if (typeof document !== 'undefined') {
@@ -1287,15 +1290,111 @@
       return false;
     }
 
+    getTerminalTooltipElement() {
+      if (typeof document === 'undefined' || !document.body) {
+        return null;
+      }
+      if (this.tooltipElement && document.body.contains(this.tooltipElement)) {
+        return this.tooltipElement;
+      }
+      const tooltip = document.createElement('div');
+      tooltip.className = 'terminal-tooltip';
+      tooltip.setAttribute('role', 'tooltip');
+      tooltip.setAttribute('aria-hidden', 'true');
+      document.body.appendChild(tooltip);
+      this.tooltipElement = tooltip;
+      return tooltip;
+    }
+
+    attachTerminalTooltip(target, text) {
+      if (!target || typeof text !== 'string' || !text.trim()) {
+        return;
+      }
+      target.setAttribute('data-terminal-tooltip', text);
+      target.addEventListener('mouseenter', () => this.showTerminalTooltip(target));
+      target.addEventListener('focus', () => this.showTerminalTooltip(target));
+      target.addEventListener('mouseleave', () => this.hideTerminalTooltip(target));
+      target.addEventListener('blur', () => this.hideTerminalTooltip(target));
+      target.addEventListener('click', () => this.hideTerminalTooltip(target));
+      target.addEventListener('keydown', (event) => {
+        if (event && event.key === 'Escape') {
+          this.hideTerminalTooltip(target);
+        }
+      });
+    }
+
+    showTerminalTooltip(target) {
+      if (typeof window === 'undefined' || !target) {
+        return;
+      }
+      const text = target.getAttribute('data-terminal-tooltip') || '';
+      if (!text.trim()) {
+        return;
+      }
+      const tooltip = this.getTerminalTooltipElement();
+      if (!tooltip) {
+        return;
+      }
+      this.activeTooltipTarget = target;
+      tooltip.textContent = text;
+      tooltip.setAttribute('aria-hidden', 'false');
+      tooltip.classList.remove('is-visible');
+      this.positionTerminalTooltip();
+      tooltip.classList.add('is-visible');
+      window.addEventListener('resize', this.boundTooltipReposition);
+      window.addEventListener('scroll', this.boundTooltipReposition, true);
+    }
+
+    hideTerminalTooltip(target) {
+      if (target && this.activeTooltipTarget && target !== this.activeTooltipTarget) {
+        return;
+      }
+      if (typeof window !== 'undefined') {
+        window.removeEventListener('resize', this.boundTooltipReposition);
+        window.removeEventListener('scroll', this.boundTooltipReposition, true);
+      }
+      this.activeTooltipTarget = null;
+      if (this.tooltipElement) {
+        this.tooltipElement.classList.remove('is-visible');
+        this.tooltipElement.setAttribute('aria-hidden', 'true');
+      }
+    }
+
+    positionTerminalTooltip() {
+      if (typeof window === 'undefined' || !this.activeTooltipTarget || !this.tooltipElement) {
+        return;
+      }
+      const targetRect = this.activeTooltipTarget.getBoundingClientRect();
+      const tooltipRect = this.tooltipElement.getBoundingClientRect();
+      const viewportWidth = window.innerWidth || document.documentElement.clientWidth || 0;
+      const viewportHeight = window.innerHeight || document.documentElement.clientHeight || 0;
+      const margin = 8;
+      const gap = 8;
+      const tooltipWidth = tooltipRect.width || this.tooltipElement.offsetWidth || 0;
+      const tooltipHeight = tooltipRect.height || this.tooltipElement.offsetHeight || 0;
+      let left = targetRect.right - tooltipWidth;
+      let top = targetRect.bottom + gap;
+
+      if (top + tooltipHeight + margin > viewportHeight && targetRect.top - tooltipHeight - gap >= margin) {
+        top = targetRect.top - tooltipHeight - gap;
+      }
+      left = Math.max(margin, Math.min(left, viewportWidth - tooltipWidth - margin));
+      top = Math.max(margin, Math.min(top, viewportHeight - tooltipHeight - margin));
+
+      this.tooltipElement.style.left = `${Math.round(left)}px`;
+      this.tooltipElement.style.top = `${Math.round(top)}px`;
+    }
+
     attachForceResizeButton(runner, host) {
       if (typeof document === 'undefined' || !runner || !host || this.forceResizeButtons.has(runner)) {
         return;
       }
       const button = document.createElement('button');
       button.type = 'button';
-      button.className = 'btn terminal-resize-button';
-      button.innerHTML = '<i class="fa-solid fa-expand"></i> Resize';
-      button.title = 'Resize to this window';
+      button.className = 'btn terminal-utility-button terminal-resize-button';
+      button.innerHTML = '<i class="fa-solid fa-ruler-combined" aria-hidden="true"></i>';
+      button.setAttribute('aria-label', 'Sync terminal to current viewport');
+      this.attachTerminalTooltip(button, 'Sync terminal to current viewport');
       button.addEventListener('click', (event) => {
         if (event) {
           event.preventDefault();
@@ -1390,10 +1489,12 @@
 
       const button = document.createElement('button');
       button.type = 'button';
-      button.className = 'btn terminal-config-button';
-      button.innerHTML = '<span class="terminal-config-label"><i class="fa-solid fa-sliders"></i> Config</span>';
+      button.className = 'btn terminal-utility-button terminal-config-button';
+      button.innerHTML = '<span class="terminal-config-label"><i class="fa-solid fa-sliders" aria-hidden="true"></i></span>';
       button.setAttribute('aria-haspopup', 'true');
       button.setAttribute('aria-expanded', 'false');
+      button.setAttribute('aria-label', 'Terminal appearance');
+      this.attachTerminalTooltip(button, 'Terminal appearance');
 
       const menu = document.createElement('div');
       menu.className = 'terminal-config-menu';