pinokiod 7.3.9 → 7.3.11

package/server/views/terminal.ejs

@@ -106,56 +106,103 @@ td.key {
 }
 header.navheader2 {
   position: relative;
-  padding: 10px 0;
+  padding: 8px 0;
 }
 .navheader2 .runner .btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: 7px;
-  height: 22px;
-  padding: 0 8px !important;
-  border: 1px solid rgba(15, 23, 42, 0.16);
-  border-radius: 3px;
-  background: linear-gradient(180deg, rgba(60, 67, 92, 0.96), rgba(49, 55, 78, 0.96));
-  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
-  color: rgba(255,255,255,0.96);
+  gap: 6px;
+  height: 24px;
+  min-height: 24px;
+  padding: 0 9px !important;
+  border: 1px solid rgba(15, 23, 42, 0.12);
+  border-radius: 6px;
+  background: rgba(255, 255, 255, 0.72);
+  box-shadow: none;
+  color: rgba(17, 24, 39, 0.88);
   font-size: 12px;
   font-weight: 600;
   line-height: 1;
   text-decoration: none;
   box-sizing: border-box;
-  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
+  transition: background-color 0.14s ease, border-color 0.14s ease, color 0.14s ease, box-shadow 0.14s ease, transform 0.14s ease;
 }
 .navheader2 .runner .btn:hover {
-  border-color: rgba(111, 143, 255, 0.32);
-  background: linear-gradient(180deg, rgba(67, 74, 101, 0.98), rgba(55, 62, 86, 0.98));
+  border-color: rgba(15, 23, 42, 0.18);
+  background: rgba(15, 23, 42, 0.04);
+  color: rgba(17, 24, 39, 0.96);
 }
 .navheader2 .runner .btn:focus-visible {
   outline: none;
-  box-shadow: 0 0 0 3px rgba(66, 113, 174, 0.2), inset 0 1px 0 rgba(255,255,255,0.06);
+  box-shadow: 0 0 0 2px rgba(10, 132, 255, 0.2);
 }
 .navheader2 .runner .btn:active {
   transform: translateY(1px);
 }
+.navheader2 .runner .btn i {
+  font-size: 12px;
+  line-height: 1;
+}
 .navheader2 .runner .run > span {
   display: inline-flex;
   align-items: center;
-  gap: 7px;
+  gap: 6px;
+}
+.navheader2 .runner .terminal-utility-button {
+  position: relative;
+  width: 24px;
+  min-width: 24px;
+  padding: 0 !important;
+  gap: 0;
+}
+.terminal-tooltip {
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: 2147483000;
+  max-width: calc(100vw - 16px);
+  padding: 5px 8px;
+  border-radius: 6px;
+  background: rgba(17, 24, 39, 0.96);
+  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.18);
+  color: #fff;
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 1.2;
+  white-space: nowrap;
+  pointer-events: none;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s ease;
+  transform: translateY(-2px);
+}
+.terminal-tooltip.is-visible {
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0);
+}
+.navheader2 .runner .terminal-config-button .terminal-config-label {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
 }
 body.dark .navheader2 .runner .btn {
-  border-color: rgba(255,255,255,0.12);
-  background: linear-gradient(180deg, rgba(255,255,255,0.11), rgba(255,255,255,0.07));
-  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
+  border-color: rgba(255, 255, 255, 0.1);
+  background: rgba(255, 255, 255, 0.045);
+  box-shadow: none;
+  color: rgba(248, 250, 252, 0.88);
 }
 body.dark .navheader2 .runner .btn:hover {
-  border-color: rgba(111, 143, 255, 0.28);
-  background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.1));
+  border-color: rgba(255, 255, 255, 0.18);
+  background: rgba(255, 255, 255, 0.08);
+  color: rgba(248, 250, 252, 0.96);
 }
 .protection-toggle {
   display: inline-flex;
   align-items: center;
-  gap: 8px;
+  gap: 6px;
+  padding: 0 7px !important;
   white-space: nowrap;
 }
 .protection-toggle.is-saving {
@@ -168,51 +215,52 @@ body.dark .navheader2 .runner .btn:hover {
 .protection-toggle-copy {
   display: inline-flex;
   align-items: center;
-  gap: 7px;
+  gap: 5px;
   min-width: 0;
 }
 .protection-toggle-icon-wrap {
-  width: 16px;
-  height: 16px;
-  border-radius: 4px;
+  width: 14px;
+  height: 14px;
+  border-radius: 3px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  background: rgba(126, 155, 255, 0.14);
-  box-shadow: inset 0 0 0 1px rgba(126, 155, 255, 0.14);
+  background: transparent;
+  box-shadow: none;
   flex-shrink: 0;
 }
 .protection-toggle-icon {
-  color: #89a6ff;
+  color: rgba(75, 85, 99, 0.86);
   font-size: 10px;
 }
 .protection-toggle-label {
   font-weight: 600;
-  letter-spacing: 0.01em;
+  letter-spacing: 0;
 }
 .protection-toggle-state {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-width: 24px;
-  padding: 1px 5px;
+  min-width: 22px;
+  height: 14px;
+  padding: 0 5px;
   border-radius: 999px;
-  background: rgba(255,255,255,0.08);
-  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
-  color: rgba(255,255,255,0.84);
+  background: rgba(217, 119, 6, 0.1);
+  box-shadow: none;
+  color: #a16207;
   font-size: 9px;
   font-weight: 700;
-  letter-spacing: 0.06em;
+  letter-spacing: 0.04em;
   text-transform: uppercase;
   line-height: 1;
 }
 .protection-toggle-switch {
   position: relative;
-  width: 24px;
-  height: 14px;
+  width: 22px;
+  height: 12px;
   border-radius: 999px;
-  background: rgba(255,255,255,0.1);
-  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1);
+  background: rgba(15, 23, 42, 0.08);
+  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);
   flex-shrink: 0;
   transition: background 0.2s ease, box-shadow 0.2s ease;
 }
@@ -221,11 +269,11 @@ body.dark .navheader2 .runner .btn:hover {
   position: absolute;
   top: 2px;
   left: 2px;
-  width: 10px;
-  height: 10px;
+  width: 8px;
+  height: 8px;
   border-radius: 999px;
-  background: rgba(255,255,255,0.94);
-  box-shadow: 0 1px 3px rgba(0,0,0,0.22);
+  background: rgba(255, 255, 255, 0.98);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
   transition: transform 0.2s ease;
 }
 .protection-toggle[aria-checked="true"] .protection-toggle-switch::after {
@@ -235,42 +283,78 @@ body.dark .navheader2 .runner .btn:hover {
   transform: translateX(0);
 }
 .protection-toggle[aria-checked="true"] .protection-toggle-state {
-  background: rgba(111, 143, 255, 0.16);
-  box-shadow: inset 0 0 0 1px rgba(111, 143, 255, 0.18);
-  color: #e2eaff;
+  background: rgba(37, 99, 235, 0.12);
+  box-shadow: none;
+  color: #2563eb;
 }
 .protection-toggle[aria-checked="true"] .protection-toggle-switch {
-  background: rgba(111, 143, 255, 0.24);
-  box-shadow: inset 0 0 0 1px rgba(111, 143, 255, 0.34);
+  background: rgba(37, 99, 235, 0.18);
+  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.24);
 }
 .protection-toggle[aria-checked="false"] .protection-toggle-icon-wrap {
-  background: rgba(217, 119, 6, 0.16);
-  box-shadow: inset 0 0 0 1px rgba(217, 119, 6, 0.2);
+  background: transparent;
+  box-shadow: none;
 }
 .protection-toggle[aria-checked="false"] .protection-toggle-icon {
-  color: #f0ba61;
+  color: #b45309;
 }
 .protection-toggle[aria-checked="false"] .protection-toggle-state {
-  background: rgba(217, 119, 6, 0.16);
-  box-shadow: inset 0 0 0 1px rgba(217, 119, 6, 0.2);
-  color: #f7ca81;
+  background: rgba(217, 119, 6, 0.1);
+  box-shadow: none;
+  color: #a16207;
 }
 .protection-toggle[aria-checked="false"] .protection-toggle-switch {
-  background: rgba(217, 119, 6, 0.18);
-  box-shadow: inset 0 0 0 1px rgba(217, 119, 6, 0.24);
+  background: rgba(217, 119, 6, 0.12);
+  box-shadow: inset 0 0 0 1px rgba(217, 119, 6, 0.18);
+}
+body.dark .protection-toggle-icon {
+  color: rgba(209, 213, 219, 0.86);
+}
+body.dark .protection-toggle-state {
+  background: rgba(245, 158, 11, 0.12);
+  color: #f0b45f;
+}
+body.dark .protection-toggle-switch {
+  background: rgba(255, 255, 255, 0.1);
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
+}
+body.dark .protection-toggle[aria-checked="true"] .protection-toggle-state {
+  background: rgba(96, 165, 250, 0.16);
+  color: #93c5fd;
+}
+body.dark .protection-toggle[aria-checked="true"] .protection-toggle-switch {
+  background: rgba(96, 165, 250, 0.22);
+  box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.3);
+}
+body.dark .protection-toggle[aria-checked="false"] .protection-toggle-icon {
+  color: #f0b45f;
+}
+body.dark .protection-toggle[aria-checked="false"] .protection-toggle-state {
+  background: rgba(245, 158, 11, 0.12);
+  color: #f0b45f;
+}
+body.dark .protection-toggle[aria-checked="false"] .protection-toggle-switch {
+  background: rgba(245, 158, 11, 0.14);
+  box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.2);
 }
 @media (max-width: 640px) {
   .navheader2 .runner .btn {
-    height: 22px;
+    height: 24px;
     padding: 0 8px !important;
-    border-radius: 3px;
+    border-radius: 6px;
+  }
+  .navheader2 .runner .terminal-utility-button {
+    width: 24px;
+    min-width: 24px;
+    padding: 0 !important;
   }
   .protection-toggle-copy {
-    gap: 6px;
+    gap: 5px;
   }
 }
 @media (prefers-reduced-motion: reduce) {
   .navheader2 .runner .btn,
+  .terminal-tooltip,
   .protection-toggle,
   .protection-toggle-switch,
   .protection-toggle-switch::after {
@@ -426,7 +510,7 @@ body.has-full-navbar .navheader2 .runner {
   --ai-consent-secondary-border: rgba(15, 23, 42, 0.12);
   --ai-consent-secondary-hover: rgba(15, 23, 42, 0.08);
   --ai-consent-link: #6c7ea5;
-  width: min(520px, 100%);
+  width: min(520px, calc(100% - 32px));
   max-height: calc(100vh - 32px);
   max-height: calc(100dvh - 32px);
   background: var(--ai-consent-surface);
@@ -651,6 +735,147 @@ body.dark .ai-manage-item {
   display: flex;
   justify-content: flex-end;
 }
+/* Minimal modal normalization for AI consent and access management. */
+.ai-consent-modal {
+  --ai-consent-surface: #ffffff;
+  --ai-consent-border: rgba(24, 24, 27, 0.12);
+  --ai-consent-shadow: 0 18px 50px rgba(15, 23, 42, 0.16);
+  --ai-consent-text: #18181b;
+  --ai-consent-muted: #71717a;
+  --ai-consent-soft: #52525b;
+  --ai-consent-panel: rgba(24, 24, 27, 0.03);
+  --ai-consent-panel-border: rgba(24, 24, 27, 0.1);
+  --ai-consent-icon-fg: #52525b;
+  --ai-consent-primary-bg: #18181b;
+  --ai-consent-primary-text: #ffffff;
+  --ai-consent-primary-border: #18181b;
+  --ai-consent-primary-hover: #27272a;
+  --ai-consent-secondary-bg: transparent;
+  --ai-consent-secondary-border: rgba(24, 24, 27, 0.12);
+  --ai-consent-secondary-hover: rgba(24, 24, 27, 0.06);
+  --ai-consent-link: #52525b;
+  border-radius: 8px;
+  padding: 18px;
+  box-shadow: var(--ai-consent-shadow);
+  opacity: 1;
+  filter: none;
+}
+
+body.dark .ai-consent-modal {
+  --ai-consent-surface: #1b1c1d;
+  --ai-consent-border: rgba(255, 255, 255, 0.1);
+  --ai-consent-shadow: 0 24px 72px rgba(0, 0, 0, 0.42);
+  --ai-consent-text: rgba(250, 250, 250, 0.94);
+  --ai-consent-muted: rgba(229, 231, 235, 0.62);
+  --ai-consent-soft: rgba(229, 231, 235, 0.7);
+  --ai-consent-panel: rgba(255, 255, 255, 0.04);
+  --ai-consent-panel-border: rgba(255, 255, 255, 0.09);
+  --ai-consent-icon-fg: rgba(229, 231, 235, 0.76);
+  --ai-consent-primary-bg: rgba(250, 250, 250, 0.94);
+  --ai-consent-primary-text: #1b1c1d;
+  --ai-consent-primary-border: rgba(250, 250, 250, 0.94);
+  --ai-consent-primary-hover: #ffffff;
+  --ai-consent-secondary-bg: transparent;
+  --ai-consent-secondary-border: rgba(255, 255, 255, 0.1);
+  --ai-consent-secondary-hover: rgba(255, 255, 255, 0.07);
+  --ai-consent-link: rgba(229, 231, 235, 0.7);
+}
+
+.ai-consent-header {
+  gap: 10px;
+  margin-bottom: 12px;
+}
+
+.ai-consent-icon {
+  width: 32px;
+  height: 32px;
+  border-radius: 7px;
+  font-size: 14px;
+}
+
+.ai-consent-title {
+  font-size: 16px;
+  line-height: 1.25;
+  font-weight: 600;
+  color: var(--ai-consent-text);
+}
+
+.ai-consent-desc,
+.ai-consent-list li,
+.ai-consent-remember {
+  font-size: 13px;
+  color: var(--ai-consent-muted);
+}
+
+.ai-consent-list strong,
+.ai-consent-scope {
+  color: var(--ai-consent-text);
+}
+
+.ai-consent-list {
+  margin-bottom: 14px;
+  padding: 10px 12px 10px 18px;
+  border-radius: 7px;
+}
+
+.ai-btn-primary,
+.ai-btn-secondary {
+  min-height: 32px;
+  padding: 0 12px;
+  border-radius: 6px;
+  box-shadow: none;
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.ai-btn-secondary:focus-visible,
+.ai-btn-primary:focus-visible,
+.ai-consent-manage:focus-visible {
+  outline: 2px solid color-mix(in srgb, var(--ai-consent-text) 28%, transparent);
+  outline-offset: 2px;
+}
+
+.ai-manage-sheet,
+body.dark .ai-manage-sheet {
+  background: var(--ai-consent-surface, #ffffff);
+  color: var(--ai-consent-text, #18181b);
+  border: 1px solid var(--ai-consent-border, rgba(24, 24, 27, 0.12));
+  border-radius: 8px;
+  box-shadow: var(--ai-consent-shadow, 0 18px 50px rgba(15, 23, 42, 0.16));
+}
+
+body.dark .ai-manage-sheet {
+  background: #1b1c1d;
+  color: rgba(250, 250, 250, 0.94);
+  border-color: rgba(255, 255, 255, 0.1);
+  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.42);
+}
+
+.ai-manage-header h3 {
+  font-size: 14px;
+  font-weight: 600;
+}
+
+#ai-manage-close {
+  width: 28px;
+  height: 28px;
+  border-radius: 6px;
+  color: var(--ai-consent-muted, #71717a);
+}
+
+#ai-manage-close:hover,
+#ai-manage-close:focus-visible {
+  background: var(--ai-consent-panel, rgba(24, 24, 27, 0.04));
+  color: var(--ai-consent-text, #18181b);
+  outline: none;
+}
+
+body.dark #ai-manage-close:hover,
+body.dark #ai-manage-close:focus-visible {
+  background: rgba(255, 255, 255, 0.07);
+  color: rgba(250, 250, 250, 0.94);
+}
+
 @keyframes ai-pop {
   from { transform: translateY(8px) scale(0.98); opacity: 0; }
   to { transform: none; opacity: 1; }
@@ -2393,10 +2618,10 @@ document.addEventListener("DOMContentLoaded", async () => {
           config = window.PinokioTerminalSettings.applyToConfig(config)
         }
         const term = new Terminal(config)
+        term.open(document.querySelector("#terminal"))
         if (window.PinokioTerminalSettings && typeof window.PinokioTerminalSettings.register === 'function') {
           window.PinokioTerminalSettings.register(term, { baseConfig })
         }
-        term.open(document.querySelector("#terminal"))
         const terminalContainer = document.querySelector("#terminal")
         const dropOverlay = document.createElement("div")
         dropOverlay.className = "terminal-drop-overlay"