pinokiod 7.3.9 → 7.3.11

package/server/views/net.ejs

@@ -606,10 +606,10 @@ body.dark .net .mark {
   }
 }
 body.net-page .task-container {
-  padding: 20px 28px 32px;
+  padding: 0;
 }
 body.net-page .task-shell {
-  width: min(1180px, 100%);
+  width: 100%;
   margin: 0;
   background: transparent;
   border: 0;
@@ -619,57 +619,124 @@ body.net-page .task-shell {
   backdrop-filter: none;
 }
 body.net-page .task-shell-header {
-  padding-bottom: 18px;
+  padding: 12px 18px 14px;
+}
+body.net-page .task-shell-header-main {
+  max-width: 720px;
+}
+body.net-page .task-description {
+  max-width: 70ch;
 }
 body.net-page .task-shell-body {
-  padding: 28px 28px 28px;
+  padding: 0 28px 28px;
 }
 body.net-page .container {
   margin: 0;
 }
+body.net-page .net-routes-section {
+  padding-top: 12px;
+}
+body.net-page .net-section-head {
+  display: none;
+}
 body.net-page .search {
-  padding: 0 0 18px;
+  margin: 0;
+  padding: 0;
+  width: 100%;
 }
-body.net-page .search input[type=search] {
+body.net-page .net-search-field {
   width: 100%;
-  height: 46px;
-  border-radius: 14px;
-  border: 1px solid var(--task-border-strong);
-  background: color-mix(in srgb, var(--task-panel) 98%, white);
-  color: var(--task-text);
-  padding: 0 14px;
   box-sizing: border-box;
+  margin: 0;
+  min-height: 34px;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  border-bottom: 1px solid var(--task-border);
+  background: transparent;
+  gap: 8px;
+}
+body.net-page .net-search-field:focus-within {
+  border-color: var(--task-border-strong);
+  box-shadow: none;
+  background: transparent;
+}
+body.net-page .net-search-field > i {
+  font-size: 11px;
+}
+body.net-page .net-search-field .task-library-search-input {
+  min-height: 34px;
+  font-size: 13px;
+  border: 0 !important;
+  border-radius: 0 !important;
+  background: transparent !important;
+  box-shadow: none !important;
+}
+body.net-page .net-summary {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  color: var(--task-muted);
+  font-size: 12px;
+}
+body.net-page .net-summary-item {
+  display: inline-flex;
+  align-items: center;
+  min-height: 0;
+  box-sizing: border-box;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  color: var(--task-muted);
+  font-size: 12px;
+  line-height: 1;
+  white-space: nowrap;
 }
-body.dark.net-page .search input[type=search] {
-  background: color-mix(in srgb, var(--task-panel) 96%, black);
+body.net-page .net-summary-item + .net-summary-item::before {
+  content: "";
+  width: 1px;
+  height: 12px;
+  margin-right: 10px;
+  background: var(--task-border);
+}
+body.net-page .net-summary-item strong {
+  color: var(--task-text);
+  font-weight: 700;
 }
 body.net-page .running-apps {
   display: grid;
-  gap: 14px;
+  gap: 0;
 }
 body.net-page .line {
-  padding: 14px 18px 16px;
-  border: 1px solid var(--task-border);
-  border-radius: 18px;
-  background: color-mix(in srgb, var(--task-panel) 94%, var(--task-soft));
+  padding: 11px 0;
+  border-top: 1px solid var(--task-border);
+  border-radius: 0;
+  background: transparent;
+}
+body.net-page .line.selected {
+  background: color-mix(in srgb, var(--task-soft) 34%, transparent);
 }
 body.net-page .line.align-top h3 {
   margin: 0;
   display: grid;
-  grid-template-columns: 42px minmax(0, 1fr);
-  gap: 14px;
+  grid-template-columns: 24px minmax(0, 1fr);
+  gap: 9px;
   align-items: start;
+  font-size: inherit;
 }
 body.net-page .placeholder-icon,
 body.net-page .line img {
-  width: 42px;
-  height: 42px;
-  border-radius: 12px;
-  background: color-mix(in srgb, var(--task-accent) 12%, transparent);
+  width: 22px;
+  height: 22px;
+  border-radius: 5px;
+  background: transparent;
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--task-accent);
+  color: var(--task-muted);
+  font-size: 11px;
 }
 body.net-page .line img {
   object-fit: cover;
@@ -678,32 +745,63 @@ body.net-page .line img {
 body.net-page .line .col {
   min-width: 0;
   padding-left: 0;
+  display: grid;
+  grid-template-columns: minmax(160px, 240px) minmax(0, 1fr);
+  gap: 4px 18px;
+  align-items: start;
 }
 body.net-page .line .title {
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: 8px;
   color: var(--task-text);
-  font-size: 17px;
+  font-size: 14px;
   font-weight: 700;
-  margin-bottom: 8px;
+  line-height: 1.25;
+  margin: 0;
+  min-width: 0;
 }
 body.net-page .line .title i {
-  font-size: 10px;
+  flex: 0 0 auto;
+  font-size: 8px;
   color: color-mix(in srgb, #84cc16 75%, var(--task-panel));
 }
+body.net-page .line .title span {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+body.net-page .line .description {
+  grid-column: 1;
+  margin: 2px 0 0;
+  padding: 0;
+  color: var(--task-muted);
+  font-size: 12px;
+  line-height: 1.45;
+}
+body.net-page .line .grid-3,
+body.net-page .line .grid-1,
+body.net-page .line .launch-btns {
+  grid-column: 2;
+  grid-row: 1 / span 3;
+}
 body.net-page .grid-3 {
+  display: grid;
+  grid-template-columns: minmax(0, 1.15fr) repeat(2, minmax(0, 1fr));
   padding: 4px 0 0;
-  gap: 0;
+  gap: 14px;
+  background: none !important;
+  margin-top: 0;
+}
+body.net-page .grid-1 {
+  padding: 0;
   background: none !important;
   margin-top: 0;
 }
 body.net-page .line .grid-3 .section,
 body.net-page .line .grid-1 .section {
   border: 0;
-  border-left: 1px solid var(--task-border);
   border-radius: 0;
-  padding: 4px 20px 0;
+  padding: 0;
   background: none;
   min-height: 0;
 }
@@ -718,27 +816,54 @@ body.net-page .line .grid-1 .section:last-child {
 }
 body.net-page .grid-3 .section h2,
 body.net-page .grid-1 .section h2 {
-  margin: 0 0 8px;
-  font-size: 12px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin: 0 0 5px;
+  font-size: 11px;
   font-weight: 700;
   color: var(--task-text);
+  line-height: 1.2;
+  letter-spacing: 0;
+}
+body.net-page .grid-3 .section h2 i,
+body.net-page .grid-1 .section h2 i {
+  width: 14px;
+  color: var(--task-muted);
+  text-align: center;
 }
 body.net-page .net {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  max-width: 100%;
+  width: fit-content;
   margin: 0 0 4px;
   padding: 0;
   border: 0;
   color: var(--task-muted);
   line-height: 1.45;
+  text-decoration: none;
+  overflow-wrap: anywhere;
 }
 body.dark.net-page .net {
   color: var(--task-muted);
 }
+body.net-page .net:hover,
+body.dark.net-page .net:hover {
+  color: var(--task-text);
+}
 body.net-page .access-point-list {
+  list-style: none;
+  padding: 0;
   margin-top: 0;
+  display: grid;
+  gap: 4px;
 }
 body.net-page .access-point-list li {
   align-items: center;
   gap: 8px;
+  min-width: 0;
 }
 body.net-page .access-point-list .net {
   margin: 0;
@@ -752,26 +877,33 @@ body.net-page .net .mark {
 }
 body.net-page .badge,
 body.dark.net-page .badge {
-  background: color-mix(in srgb, var(--task-accent) 18%, transparent);
-  color: var(--task-accent);
+  min-height: 18px;
+  padding: 0 6px;
+  border: 1px solid color-mix(in srgb, var(--task-accent) 22%, var(--task-border));
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--task-accent) 10%, var(--task-panel));
+  color: color-mix(in srgb, var(--task-accent) 62%, var(--task-text));
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  font-size: 10px;
+  font-weight: 650;
   line-height: 1;
   transform: translateY(-1px);
 }
 body.net-page .get-dns-btn,
 body.net-page .btn {
-  border-radius: 12px;
+  border-radius: 6px;
 }
 body.net-page .get-dns-btn {
-  margin-top: 10px;
+  margin-top: 6px;
   max-width: fit-content;
-  background: color-mix(in srgb, var(--task-panel) 90%, var(--task-soft));
+  background: transparent;
   border: 1px solid var(--task-border);
   color: var(--task-text);
-  padding: 7px 12px;
-  min-height: 38px;
+  padding: 0 10px;
+  min-height: 30px;
+  font-weight: 650;
 }
 body.net-page .line.align-top h3 .col .get-dns-btn {
   width: auto;
@@ -780,13 +912,13 @@ body.net-page .line.align-top h3 .col .get-dns-btn {
 body.net-page .section-container {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 18px;
+  gap: 24px;
 }
 body.net-page .section-col {
   min-width: 0;
 }
 body.net-page .section-header {
-  padding: 0 0 14px;
+  padding: 0 0 10px;
   background: transparent;
 }
 body.dark.net-page .section-header {
@@ -800,9 +932,10 @@ body.net-page .section-header .grid-1 {
   background: transparent !important;
 }
 body.net-page .section-header .section {
-  border: 1px solid var(--task-border);
-  border-radius: 16px;
-  background: color-mix(in srgb, var(--task-panel) 94%, var(--task-soft));
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  padding: 0;
   text-align: left;
 }
 body.net-page .section-header .section div {
@@ -810,9 +943,9 @@ body.net-page .section-header .section div {
   text-align: left;
 }
 body.net-page .section-header .section h2 {
-  margin: 0 0 8px;
+  margin: 0 0 4px;
   text-align: left;
-  font-size: 17px;
+  font-size: 14px;
   font-weight: 700;
   color: var(--task-text);
 }
@@ -932,6 +1065,19 @@ body.net-page .dns-modal-terminal-container {
   body.net-page .section-container {
     grid-template-columns: 1fr;
   }
+  body.net-page .line .col {
+    grid-template-columns: 1fr;
+  }
+  body.net-page .line .grid-3,
+  body.net-page .line .grid-1,
+  body.net-page .line .launch-btns {
+    grid-column: 1;
+    grid-row: auto;
+  }
+  body.net-page .grid-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    padding-top: 6px;
+  }
 }
 @media only screen and (max-width: 820px) {
   body.net-page .task-shell-header,
@@ -944,14 +1090,17 @@ body.net-page .dns-modal-terminal-container {
   body.net-page .task-container {
     padding: 16px 14px 24px;
   }
+  body.net-page .net-summary {
+    justify-content: flex-start;
+  }
   body.net-page .task-shell-body {
     padding-bottom: 22px;
   }
   body.net-page .line.align-top h3 {
-    grid-template-columns: 1fr;
+    grid-template-columns: 28px minmax(0, 1fr);
   }
   body.net-page .line .title {
-    margin-bottom: 6px;
+    margin-bottom: 2px;
   }
   body.net-page .grid-3 {
     grid-template-columns: 1fr;
@@ -959,7 +1108,7 @@ body.net-page .dns-modal-terminal-container {
   body.net-page .line .grid-3 .section,
   body.net-page .line .grid-1 .section {
     border-left: 0;
-    padding: 10px 0 0;
+    padding: 0;
   }
   body.net-page .dns-modal-popup,
   body.net-page .dns-progress-popup {
@@ -977,6 +1126,110 @@ body.net-page .dns-modal-terminal-container {
     padding: 12px 14px;
   }
 }
+
+/* Minimal modal normalization for DNS creation/progress dialogs. */
+body.net-page .dns-modal-popup,
+body.net-page .dns-progress-popup {
+  width: min(560px, calc(100vw - 32px)) !important;
+  padding: 18px !important;
+  border-radius: 8px !important;
+  border: 1px solid var(--task-border) !important;
+  background: var(--task-panel) !important;
+  color: var(--task-text) !important;
+  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.16) !important;
+}
+
+body.dark.net-page .dns-modal-popup,
+body.dark.net-page .dns-progress-popup {
+  background: #1b1c1d !important;
+  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.42) !important;
+}
+
+body.net-page .dns-modal-popup .swal2-title,
+body.net-page .dns-progress-popup .swal2-title {
+  margin: 0 0 12px !important;
+  font-size: 18px !important;
+  line-height: 1.25 !important;
+  font-weight: 600 !important;
+  letter-spacing: 0 !important;
+  color: var(--task-text) !important;
+  text-align: left !important;
+}
+
+body.net-page .dns-modal-popup .swal2-actions,
+body.net-page .dns-progress-popup .swal2-actions {
+  gap: 8px !important;
+  justify-content: flex-end !important;
+  margin-top: 16px !important;
+}
+
+body.net-page .dns-modal-popup .swal2-confirm.swal2-styled,
+body.net-page .dns-progress-popup .swal2-confirm.swal2-styled,
+body.net-page .dns-modal-popup .swal2-cancel.swal2-styled,
+body.net-page .dns-progress-popup .swal2-cancel.swal2-styled {
+  min-height: 32px !important;
+  padding: 0 12px !important;
+  border-radius: 6px !important;
+  box-shadow: none !important;
+  font-size: 13px !important;
+  font-weight: 600 !important;
+}
+
+body.net-page .dns-modal-popup .swal2-confirm.swal2-styled,
+body.net-page .dns-progress-popup .swal2-confirm.swal2-styled {
+  border-color: var(--task-text) !important;
+  background: var(--task-text) !important;
+  color: var(--task-panel) !important;
+}
+
+body.dark.net-page .dns-modal-popup .swal2-confirm.swal2-styled,
+body.dark.net-page .dns-progress-popup .swal2-confirm.swal2-styled {
+  color: #1b1c1d !important;
+}
+
+body.net-page .dns-modal-popup .swal2-cancel.swal2-styled,
+body.net-page .dns-progress-popup .swal2-cancel.swal2-styled {
+  border-color: var(--task-border) !important;
+  background: transparent !important;
+  color: var(--task-muted) !important;
+}
+
+body.net-page .dns-modal-popup .swal2-cancel.swal2-styled:hover,
+body.net-page .dns-progress-popup .swal2-cancel.swal2-styled:hover,
+body.net-page .dns-modal-popup .swal2-cancel.swal2-styled:focus-visible,
+body.net-page .dns-progress-popup .swal2-cancel.swal2-styled:focus-visible {
+  background: var(--task-soft) !important;
+  color: var(--task-text) !important;
+  outline: none !important;
+}
+
+body.net-page .dns-modal .address-section input {
+  height: 36px !important;
+  border-radius: 6px !important;
+  border-color: var(--task-border-strong) !important;
+  background: var(--task-panel) !important;
+  color: var(--task-text) !important;
+}
+
+body.net-page .dns-modal .address-section input:focus {
+  border-color: var(--task-text) !important;
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--task-text) 12%, transparent) !important;
+}
+
+body.net-page .dns-modal .address-result,
+body.net-page .dns-modal-terminal-container {
+  border-radius: 7px !important;
+  border-color: var(--task-border) !important;
+  background: var(--task-soft) !important;
+}
+
+@media only screen and (max-width: 560px) {
+  body.net-page .dns-modal-popup,
+  body.net-page .dns-progress-popup {
+    width: calc(100vw - 24px) !important;
+    padding: 16px !important;
+  }
+}
 </style>
 <script src="/window_storage.js"></script>
 <script src="/popper.min.js"></script>
@@ -1017,6 +1270,11 @@ document.addEventListener('DOMContentLoaded', function() {
 <script src="/fscreator.js"></script>
 <script src="/fseditor.js"></script>
 </head>
+<%
+  const routeCount = current_host === host
+    ? processes.length + static_routes.length
+    : processes.length + installed.length + serverless.length
+%>
 <body class='<%=theme%> main-sidebar-page task-launcher-page task-page net-page' data-agent="<%=agent%>">
 <% if (error) { %>
 <nav class='error-message'>
@@ -1063,24 +1321,42 @@ document.addEventListener('DOMContentLoaded', function() {
   <section class='task-shell net-shell'>
     <header class='task-shell-header'>
       <div class='task-shell-header-main'>
-        <p class='task-eyebrow'>Network</p>
         <h1 class='task-title'><%= peer && peer.name ? peer.name : host %></h1>
         <p class='task-description'><%= current_host === host ? 'Live local, LAN, and peer routes for apps on this machine.' : 'Available routes and installed apps exposed by this peer.' %></p>
       </div>
+      <div class='task-header-actions net-summary'>
+        <span class='net-summary-item'><strong><%= routeCount %></strong>&nbsp;<%= routeCount === 1 ? 'entry' : 'entries' %></span>
+        <% if (current_host === host) { %>
+          <span class='net-summary-item'><strong><%= processes.length %></strong>&nbsp;live</span>
+          <span class='net-summary-item'><strong><%= static_routes.length %></strong>&nbsp;static</span>
+        <% } else { %>
+          <span class='net-summary-item'><strong><%= processes.length %></strong>&nbsp;online</span>
+          <span class='net-summary-item'><strong><%= installed.length %></strong>&nbsp;installed</span>
+        <% } %>
+      </div>
     </header>
     <div class='task-shell-body net-shell-body'>
-<div class='container'>
-  <form class='search'>
-    <!--
-    <div class='app-btns'>
-      <a class='btn create-new' href="/init"><i class="fa-solid fa-plus"></i> Build</a>
-      <a class='btn' id='explore' href="/home?mode=explore"><i class="fa-solid fa-magnifying-glass"></i> Community</a>
+<section class='task-section net-routes-section' aria-label="<%= current_host === host ? 'App routes' : 'Peer access' %>">
+  <div class='task-section-head net-section-head'>
+    <div>
+      <h2 class='task-section-title'><%= current_host === host ? 'App routes' : 'Peer access' %></h2>
+      <p class='task-section-subcopy'><%= current_host === host ? 'Open local, LAN, or peer URLs for each running app.' : 'Open online routes or launch apps exposed by this peer.' %></p>
     </div>
-    -->
-    <input type='search' class="flexible" placeholder='Search apps'>
-  </form>
-  <div class='running-apps'>
+  </div>
+  <div class='container'>
+    <form class='search net-toolbar' role='search'>
+      <label class='task-library-search-field net-search-field'>
+        <i class='fa-solid fa-magnifying-glass' aria-hidden='true'></i>
+        <input type='search' class="task-library-search-input flexible" placeholder='Search apps' autocomplete='off'>
+      </label>
+    </form>
+    <div class='running-apps net-route-list'>
     <% if (current_host === host) { %>
+      <% if (processes.length === 0 && static_routes.length === 0) { %>
+        <div class='task-empty-state'>
+          <p class='task-empty-copy'>No live app routes are available on this machine.</p>
+        </div>
+      <% } %>
       <% processes.forEach((item, index) => { %>
         <div class='index line align-top' data-index="<%=index%>" data-name="<%=item.name%>" data-title="<%=item.name%>" data-description="<%=item.internal_router.join(' ')%> <%=item.port%>">
           <h3>
@@ -1353,8 +1629,9 @@ document.addEventListener('DOMContentLoaded', function() {
         </div>
       </div>
     <% } %>
+    </div>
   </div>
-</div>
+</section>
     </div>
   </section>
 </div>