pinokiod 7.3.10 → 7.3.12

package/server/public/task-launcher.css

@@ -105,15 +105,15 @@ body.dark.connect-page.task-launcher-page::before {
 body.plugin-detail-page .swal2-popup.pinokio-modern-modal {
   padding: 0 !important;
   border: 1px solid var(--task-border) !important;
-  border-radius: 14px !important;
+  border-radius: 8px !important;
   background: var(--task-panel) !important;
-  box-shadow: 0 26px 72px rgba(15, 23, 42, 0.22) !important;
+  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.16) !important;
   color: var(--task-text) !important;
   overflow: hidden !important;
 }
 
 body.dark.plugin-detail-page .swal2-popup.pinokio-modern-modal {
-  box-shadow: 0 30px 84px rgba(0, 0, 0, 0.46) !important;
+  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.42) !important;
 }
 
 body.plugin-detail-page .swal2-popup.pinokio-modern-modal .swal2-html-container.pinokio-modern-html {
@@ -127,16 +127,16 @@ body.plugin-detail-page .swal2-popup.pinokio-modern-modal .swal2-html-container.
 }
 
 body.plugin-detail-page .pinokio-modern-close.swal2-close {
-  top: 14px !important;
-  right: 14px !important;
-  width: 36px;
-  height: 36px;
+  top: 12px !important;
+  right: 12px !important;
+  width: 28px;
+  height: 28px;
   margin: 0;
   border: 1px solid var(--task-border);
-  border-radius: 10px;
-  background: color-mix(in srgb, var(--task-panel) 94%, var(--task-soft));
+  border-radius: 6px;
+  background: transparent;
   color: var(--task-muted) !important;
-  font-size: 30px;
+  font-size: 22px;
   line-height: 1;
 }
 
@@ -156,23 +156,23 @@ body.plugin-detail-page .pinokio-modal-surface {
 body.plugin-detail-page .pinokio-modal-header {
   display: flex;
   align-items: flex-start;
-  gap: 12px;
-  padding: 18px 20px 14px;
+  gap: 10px;
+  padding: 14px;
   border-bottom: 1px solid var(--task-border);
 }
 
 body.plugin-detail-page .pinokio-modal-icon {
-  width: 38px;
-  height: 38px;
+  width: 32px;
+  height: 32px;
   flex: 0 0 auto;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border: 1px solid var(--task-border);
-  border-radius: 10px;
+  border-radius: 7px;
   background: color-mix(in srgb, var(--task-panel) 92%, var(--task-soft));
-  color: var(--task-accent);
-  font-size: 15px;
+  color: var(--task-muted);
+  font-size: 14px;
 }
 
 body.plugin-detail-page .pinokio-modal-heading {
@@ -183,9 +183,9 @@ body.plugin-detail-page .pinokio-modal-heading {
 }
 
 body.plugin-detail-page .pinokio-modal-title {
-  font-size: 15px;
+  font-size: 16px;
   line-height: 1.25;
-  font-weight: 700;
+  font-weight: 600;
   color: var(--task-text);
 }
 
@@ -197,7 +197,7 @@ body.plugin-detail-page .pinokio-modal-subtitle {
 
 body.plugin-detail-page .pinokio-modal-body,
 body.plugin-detail-page .pinokio-modal-body--iframe {
-  padding: 16px 20px 20px;
+  padding: 12px 14px 14px;
   background: transparent;
 }
 
@@ -207,7 +207,7 @@ body.plugin-detail-page .pinokio-modal-body--iframe iframe {
   height: min(64vh, 540px);
   min-height: 360px;
   border: 1px solid var(--task-border);
-  border-radius: 12px;
+  border-radius: 7px;
   background: color-mix(in srgb, var(--task-panel) 90%, var(--task-soft));
 }
 
@@ -235,28 +235,30 @@ body.plugin-detail-page .pinokio-modal-body--iframe iframe {
 }
 
 .task-library-page .task-shell-header {
-  padding: 0 28px 12px;
+  padding: 12px 18px 14px;
 }
 
 .task-library-page .task-title {
-  font-size: clamp(28px, 3.2vw, 38px);
+  font-size: 22px;
+  line-height: 1.12;
+  letter-spacing: 0;
 }
 
 .task-library-page .task-description {
-  margin-top: 6px;
+  margin-top: 4px;
   font-size: 12px;
-  line-height: 1.45;
+  line-height: 1.4;
 }
 
 .task-container {
   flex: 1;
   min-width: 0;
-  padding: 20px 28px 32px;
+  padding: 0;
   box-sizing: border-box;
 }
 
 body.task-page .task-shell {
-  width: min(980px, 100%);
+  width: 100%;
   margin: 0;
   background: transparent;
   border: 0;
@@ -314,27 +316,28 @@ body.task-page .task-shell {
 }
 
 body.plugin-page .task-shell {
-  width: min(1140px, 100%);
+  width: 100%;
 }
 
 body.connect-page .task-shell {
-  width: min(980px, 100%);
+  width: 100%;
 }
 
 .task-shell-header {
   position: static;
   top: auto;
   z-index: auto;
-  padding: 4px 28px 18px;
+  padding: 12px 18px 14px;
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto;
-  gap: 20px 24px;
-  align-items: flex-start;
+  gap: 16px 24px;
+  align-items: center;
   border-bottom: 1px solid var(--task-border);
 }
 
 .task-shell-header .task-title {
   display: block;
+  margin: 0;
   padding: 0;
 }
 
@@ -359,15 +362,15 @@ body.connect-page .task-shell {
   align-items: center;
   justify-content: flex-start;
   gap: 12px;
-  margin-bottom: 6px;
+  margin-bottom: 4px;
 }
 
 .task-eyebrow {
   margin: 0;
   color: var(--task-accent);
-  font-size: 11px;
+  font-size: 10px;
   font-weight: 700;
-  letter-spacing: 0.12em;
+  letter-spacing: 0.08em;
   text-transform: uppercase;
 }
 
@@ -387,9 +390,10 @@ body.connect-page .task-shell {
 
 .task-title {
   margin: 0;
-  font-size: clamp(26px, 3vw, 34px);
-  line-height: 1.08;
-  letter-spacing: -0.045em;
+  font-size: 22px;
+  line-height: 1.12;
+  letter-spacing: 0;
+  font-weight: 760;
 }
 
 .task-detail-page .task-title {
@@ -398,10 +402,14 @@ body.connect-page .task-shell {
 }
 
 .task-description {
-  margin: 10px 0 0;
+  margin: 4px 0 0;
   color: var(--task-muted);
-  font-size: 14px;
-  line-height: 1.55;
+  font-size: 12px;
+  line-height: 1.4;
+}
+
+body.task-page .task-shell-header .task-description {
+  max-width: none;
 }
 
 .task-header-badges {
@@ -488,7 +496,7 @@ body.connect-page .task-shell {
 }
 
 .task-shell-body {
-  padding: 12px 28px 12px;
+  padding: 28px 28px 32px;
   display: grid;
   gap: 0;
 }
@@ -1628,43 +1636,45 @@ body.dark .task-link-button.danger {
 }
 
 .setup-shell {
-  width: min(1080px, 100%);
+  width: 100%;
 }
 
 body.setup-page .task-shell-header {
-  padding-bottom: 16px;
+  padding-bottom: 14px;
 }
 
 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;
+  font-size: 22px;
+  line-height: 1.12;
   letter-spacing: 0;
+  font-weight: 760;
 }
 
 body.setup-page .task-description {
   max-width: 76ch;
-  font-size: 13px;
-  line-height: 1.5;
+  font-size: 12px;
+  line-height: 1.4;
 }
 
 body.setup-page .task-badge {
   min-height: 22px;
   border-radius: 7px;
+  background: transparent;
 }
 
 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));
+  border-color: rgba(180, 83, 9, 0.26);
+  background: transparent;
+  color: #92400e;
+}
+
+body.dark.setup-page .task-badge-warning {
+  border-color: rgba(251, 191, 36, 0.28);
+  color: #f5d69a;
 }
 
 .setup-layout {
@@ -1682,7 +1692,9 @@ body.setup-page .task-badge-warning {
 
 .setup-requirement-list {
   display: grid;
-  gap: 8px;
+  gap: 0;
+  border-top: 1px solid var(--task-border);
+  border-bottom: 1px solid var(--task-border);
 }
 
 .setup-requirement-row {
@@ -1690,15 +1702,18 @@ body.setup-page .task-badge-warning {
   grid-template-columns: minmax(0, 1fr) auto;
   gap: 14px;
   align-items: center;
-  padding: 11px 12px;
-  border: 1px solid var(--task-border);
-  border-radius: 8px;
-  background: color-mix(in srgb, var(--task-panel) 97%, var(--task-soft));
+  padding: 12px 0;
+  border: 0;
+  border-top: 1px solid var(--task-border);
+  background: transparent;
 }
 
 .setup-requirement-row.needs-update {
-  border-color: var(--task-border-strong);
-  background: color-mix(in srgb, var(--task-panel) 95%, var(--task-soft));
+  background: transparent;
+}
+
+.setup-requirement-row:first-child {
+  border-top: 0;
 }
 
 .setup-requirement-copy {
@@ -1726,9 +1741,9 @@ body.setup-page .task-badge-warning {
   justify-content: center;
   gap: 6px;
   min-height: 26px;
-  padding: 0 9px;
-  border: 1px solid var(--task-border);
-  border-radius: 7px;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
   background: transparent;
   color: var(--task-muted);
   font-size: 10px;
@@ -1742,14 +1757,15 @@ body.setup-page .task-badge-warning {
 }
 
 .setup-requirement-row.is-installed .setup-requirement-state {
-  border-color: color-mix(in srgb, var(--task-border) 72%, transparent);
-  color: var(--task-text);
+  color: var(--task-muted);
 }
 
 .setup-requirement-row.needs-update .setup-requirement-state {
-  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));
+  color: #92400e;
+}
+
+body.dark .setup-requirement-row.needs-update .setup-requirement-state {
+  color: #f5d69a;
 }
 
 .setup-actions-column {
@@ -1767,12 +1783,31 @@ body.setup-page .task-badge-warning {
 }
 
 .setup-summary-grid {
-  margin-top: 4px;
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 7px;
+  margin-top: 6px;
 }
 
 .setup-summary-grid .task-meta-chip {
-  border-radius: 8px;
-  background: color-mix(in srgb, var(--task-panel) 96%, var(--task-soft));
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 14px;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+}
+
+.setup-summary-grid .task-meta-chip-label {
+  margin-bottom: 0;
+  letter-spacing: 0.04em;
+}
+
+.setup-summary-grid .task-meta-chip-value {
+  font-size: 12px;
+  color: var(--task-text);
 }
 
 .setup-primary-button {
@@ -1835,10 +1870,12 @@ body.setup-page .task-badge-warning {
   display: flex;
   align-items: center;
   gap: 14px;
-  padding: 16px;
-  border: 1px solid var(--task-border);
-  border-radius: 10px;
-  background: color-mix(in srgb, var(--task-panel) 96%, var(--task-soft));
+  padding: 16px 0;
+  border: 0;
+  border-top: 1px solid var(--task-border);
+  border-bottom: 1px solid var(--task-border);
+  border-radius: 0;
+  background: transparent;
   box-sizing: border-box;
 }
 
@@ -1851,8 +1888,8 @@ body.setup-page .task-badge-warning {
   justify-content: center;
   border: 1px solid var(--task-border);
   border-radius: 8px;
-  background: color-mix(in srgb, var(--task-panel) 96%, var(--task-soft));
-  color: var(--task-accent);
+  background: transparent;
+  color: var(--task-muted);
   font-size: 14px;
 }
 
@@ -2318,7 +2355,7 @@ body.plugin-page .plugin-card {
   padding: 15px;
   border-radius: 16px;
   border: 1px solid var(--task-border);
-  background: color-mix(in srgb, var(--task-panel) 96%, var(--task-soft));
+  background: transparent;
   color: var(--task-text);
   text-decoration: none;
   transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
@@ -2326,7 +2363,7 @@ body.plugin-page .plugin-card {
 
 body.plugin-page .plugin-card:hover,
 body.plugin-page .plugin-card:focus-within {
-  background: color-mix(in srgb, var(--task-panel) 88%, var(--task-soft));
+  background: color-mix(in srgb, var(--task-text) 5%, transparent);
   border-color: var(--task-border-strong);
   transform: translateY(-1px);
 }
@@ -2338,7 +2375,7 @@ body.plugin-page .plugin-card .plugin-icon {
   border-radius: 12px;
   object-fit: cover;
   flex-shrink: 0;
-  background: color-mix(in srgb, var(--task-panel) 90%, white);
+  background: color-mix(in srgb, var(--task-text) 5%, transparent);
   border: 1px solid var(--task-border);
 }
 
@@ -2415,7 +2452,7 @@ body.plugin-page .plugin-empty {
   padding: 22px;
   border-radius: 16px;
   border: 1px dashed var(--task-border-strong);
-  background: color-mix(in srgb, var(--task-panel) 96%, var(--task-soft));
+  background: transparent;
 }
 
 body.plugin-page .plugin-install-trigger {

package/server/public/terminal-settings.js

@@ -132,26 +132,6 @@
     }
 
     shouldPreferModalInput() {
-      if (typeof navigator !== 'undefined') {
-        try {
-          if (navigator.userAgentData && typeof navigator.userAgentData.mobile === 'boolean') {
-            if (navigator.userAgentData.mobile) {
-              return true;
-            }
-          }
-        } catch (_) {}
-        const ua = navigator.userAgent || '';
-        if (/Mobi|Android|iPhone|iPad|Tablet/i.test(ua)) {
-          return true;
-        }
-        const platform = navigator.platform || '';
-        const maxTouchPoints = typeof navigator.maxTouchPoints === 'number'
-          ? navigator.maxTouchPoints
-          : 0;
-        if (/Mac/i.test(platform) && maxTouchPoints > 1) {
-          return true;
-        }
-      }
       return false;
     }
 
@@ -651,41 +631,134 @@
         return;
       }
       const tracker = {
-        lastTime: 0,
-        lastX: 0,
-        lastY: 0,
-        handler: null,
-        eventName: this.supportsPointer ? 'pointerdown' : 'touchstart'
+        active: false,
+        startTime: 0,
+        startX: 0,
+        startY: 0,
+        startScroll: null,
+        moved: false,
+        handlers: []
       };
-      const handlePointerDown = (event) => {
+      const getScrollSnapshot = () => {
+        const viewport = node.querySelector('.xterm-viewport');
+        const doc = typeof document !== 'undefined' ? document.documentElement : null;
+        const body = typeof document !== 'undefined' ? document.body : null;
+        return {
+          viewportTop: viewport ? viewport.scrollTop : 0,
+          viewportLeft: viewport ? viewport.scrollLeft : 0,
+          pageTop: typeof window !== 'undefined' ? (window.pageYOffset || doc && doc.scrollTop || body && body.scrollTop || 0) : 0,
+          pageLeft: typeof window !== 'undefined' ? (window.pageXOffset || doc && doc.scrollLeft || body && body.scrollLeft || 0) : 0
+        };
+      };
+      const didScrollChange = (start, end) => {
+        if (!start || !end) {
+          return false;
+        }
+        return Math.abs(end.viewportTop - start.viewportTop) > 1
+          || Math.abs(end.viewportLeft - start.viewportLeft) > 1
+          || Math.abs(end.pageTop - start.pageTop) > 1
+          || Math.abs(end.pageLeft - start.pageLeft) > 1;
+      };
+      const resetTracker = () => {
+        tracker.active = false;
+        tracker.startScroll = null;
+      };
+      const getTouchPoint = (event, phase) => {
         if (!event) {
-          return;
+          return null;
+        }
+        if (event.touches || event.changedTouches) {
+          const list = phase === 'end' ? event.changedTouches : event.touches;
+          const touch = list && list[0];
+          return touch && typeof touch.clientX === 'number' && typeof touch.clientY === 'number'
+            ? { x: touch.clientX, y: touch.clientY }
+            : null;
+        }
+        return typeof event.clientX === 'number' && typeof event.clientY === 'number'
+          ? { x: event.clientX, y: event.clientY }
+          : null;
+      };
+      const isInteractiveTarget = (target) => {
+        return Boolean(target && target.closest && target.closest('a, button, input, textarea, select, label, [role="button"], [contenteditable="true"], .terminal-keyboard-modal, .terminal-keyboard-backdrop'));
+      };
+      const isTouchEvent = (event) => {
+        if (!event) {
+          return false;
         }
-        if (this.supportsPointer) {
+        if (event.touches || event.changedTouches) {
+          const list = event.touches || event.changedTouches;
+          if (list && list.length > 1) {
+            return false;
+          }
+        } else if (this.supportsPointer) {
           const pointerType = event.pointerType;
           if (pointerType && pointerType !== 'touch' && pointerType !== 'pen') {
-            return;
+            return false;
           }
-        } else if (event.touches && event.touches.length !== 1) {
+        }
+        return true;
+      };
+      const handleStart = (event) => {
+        if (!isTouchEvent(event) || this.modalOpen || isInteractiveTarget(event.target)) {
+          resetTracker();
+          return;
+        }
+        const point = getTouchPoint(event, 'start');
+        if (!point) {
+          resetTracker();
+          return;
+        }
+        tracker.active = true;
+        tracker.moved = false;
+        tracker.startTime = Date.now();
+        tracker.startX = point.x;
+        tracker.startY = point.y;
+        tracker.startScroll = getScrollSnapshot();
+      };
+      const handleMove = (event) => {
+        if (!tracker.active) {
           return;
         }
-        const pointSource = this.supportsPointer ? event : (event.touches && event.touches[0]);
-        const pointX = pointSource && typeof pointSource.clientX === 'number' ? pointSource.clientX : 0;
-        const pointY = pointSource && typeof pointSource.clientY === 'number' ? pointSource.clientY : 0;
-        const now = Date.now();
-        const delta = now - tracker.lastTime;
-        const distance = Math.hypot(pointX - tracker.lastX, pointY - tracker.lastY);
-        if (delta < 320 && distance < 40) {
+        const point = getTouchPoint(event, 'move');
+        if (!point) {
+          return;
+        }
+        const distance = Math.hypot(point.x - tracker.startX, point.y - tracker.startY);
+        if (distance > 12) {
+          tracker.moved = true;
+        }
+      };
+      const handleEnd = (event) => {
+        if (!tracker.active) {
+          return;
+        }
+        const point = getTouchPoint(event, 'end');
+        const duration = Date.now() - tracker.startTime;
+        const distance = point ? Math.hypot(point.x - tracker.startX, point.y - tracker.startY) : Infinity;
+        const scrolled = didScrollChange(tracker.startScroll, getScrollSnapshot());
+        resetTracker();
+        if (!tracker.moved && !scrolled && duration < 700 && distance <= 12 && !isInteractiveTarget(event.target)) {
           event.preventDefault();
           event.stopPropagation();
           this.openModalFromGesture();
         }
-        tracker.lastTime = now;
-        tracker.lastX = pointX;
-        tracker.lastY = pointY;
       };
-      node.addEventListener(tracker.eventName, handlePointerDown, { passive: false });
-      tracker.handler = handlePointerDown;
+      const addTrackedListener = (eventName, handler, options) => {
+        node.addEventListener(eventName, handler, options);
+        tracker.handlers.push({ eventName, handler, options });
+      };
+      if (this.supportsPointer) {
+        addTrackedListener('pointerdown', handleStart, { passive: true });
+        addTrackedListener('pointermove', handleMove, { passive: true });
+        addTrackedListener('pointerup', handleEnd, { passive: false });
+        addTrackedListener('pointercancel', resetTracker, { passive: true });
+      }
+      if (typeof window !== 'undefined' && 'TouchEvent' in window) {
+        addTrackedListener('touchstart', handleStart, { passive: true });
+        addTrackedListener('touchmove', handleMove, { passive: true });
+        addTrackedListener('touchend', handleEnd, { passive: false });
+        addTrackedListener('touchcancel', resetTracker, { passive: true });
+      }
       tracker.node = node;
       this.tapTrackers.set(term, tracker);
     }
@@ -706,9 +779,10 @@
       if (!tracker) {
         return;
       }
-      if (tracker.node && tracker.handler) {
-        const eventName = tracker.eventName || (this.supportsPointer ? 'pointerdown' : 'touchstart');
-        tracker.node.removeEventListener(eventName, tracker.handler, { passive: false });
+      if (tracker.node && Array.isArray(tracker.handlers)) {
+        tracker.handlers.forEach(({ eventName, handler, options }) => {
+          tracker.node.removeEventListener(eventName, handler, options);
+        });
       }
       this.tapTrackers.delete(term);
     }
@@ -1190,6 +1264,8 @@
       const nextTheme = Object.assign({}, theme);
       const applied = this.applyOption(term, 'theme', nextTheme);
 
+      console.log("nextTheme", nextTheme)
+
       const element = term.element;
       if (element && element.style) {
         if (nextTheme.background) {