pinokiod 7.3.10 → 7.3.11

package/server/views/app.ejs

@@ -579,6 +579,142 @@ main.browserview {
   min-height: 0;
   display: flex;
   flex-direction: column;
+  position: relative;
+}
+.browserview-network-status {
+  --install-spinner-fg: rgba(31, 41, 55, 0.78);
+  position: absolute;
+  inset: 0;
+  z-index: 4;
+  display: grid;
+  place-items: center;
+  box-sizing: border-box;
+  padding: 24px;
+  text-align: center;
+  color: rgba(17, 24, 39, 0.9);
+  background: var(--app-page-canvas-bg, #fff);
+  pointer-events: auto;
+}
+.browserview-network-status[hidden] {
+  display: none !important;
+}
+body.dark .browserview-network-status {
+  --install-spinner-fg: rgba(248, 250, 252, 0.88);
+  color: rgba(248, 250, 252, 0.9);
+  background: var(--app-page-canvas-bg, #1b1c1d);
+}
+.browserview-network-status-inner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  max-width: min(420px, 100%);
+}
+.browserview-network-status-title {
+  font-size: 14px;
+  line-height: 1.3;
+  font-weight: 700;
+}
+.browserview-network-status-detail {
+  font-size: 12px;
+  line-height: 1.45;
+  color: rgba(75, 85, 99, 0.95);
+}
+body.dark .browserview-network-status-detail {
+  color: rgba(209, 213, 219, 0.84);
+}
+.browserview-network-status-route {
+  max-width: 100%;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-size: 11px;
+  line-height: 1.4;
+  color: rgba(107, 114, 128, 0.88);
+  overflow-wrap: anywhere;
+}
+body.dark .browserview-network-status-route {
+  color: rgba(156, 163, 175, 0.86);
+}
+.browserview-network-status-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  justify-content: center;
+  margin-top: 6px;
+}
+.browserview-network-status .btn2 {
+  gap: 7px;
+  min-height: 30px;
+  padding: 6px 11px;
+  font-size: 12px;
+  font-weight: 700;
+}
+.browserview-network-status .browserview-network-status-primary {
+  border-color: rgba(0, 0, 0, 0.12);
+  background: rgba(255, 255, 255, 0.88);
+  color: rgba(17, 24, 39, 0.96);
+}
+.browserview-network-status .browserview-network-status-primary:hover,
+.browserview-network-status .browserview-network-status-primary:focus-visible {
+  background: rgba(255, 255, 255, 1);
+}
+.browserview-network-status .browserview-network-status-secondary {
+  border-color: transparent;
+  background: transparent;
+  color: rgba(75, 85, 99, 0.86);
+  font-weight: 600;
+}
+.browserview-network-status .browserview-network-status-secondary:hover,
+.browserview-network-status .browserview-network-status-secondary:focus-visible {
+  background: rgba(0, 0, 0, 0.05);
+}
+body.dark .browserview-network-status .browserview-network-status-primary {
+  border-color: rgba(255, 255, 255, 0.14);
+  background: rgba(255, 255, 255, 0.1);
+  color: rgba(248, 250, 252, 0.94);
+}
+body.dark .browserview-network-status .browserview-network-status-primary:hover,
+body.dark .browserview-network-status .browserview-network-status-primary:focus-visible {
+  background: rgba(255, 255, 255, 0.15);
+}
+body.dark .browserview-network-status .browserview-network-status-secondary {
+  color: rgba(209, 213, 219, 0.78);
+}
+body.dark .browserview-network-status .browserview-network-status-secondary:hover,
+body.dark .browserview-network-status .browserview-network-status-secondary:focus-visible {
+  background: rgba(255, 255, 255, 0.08);
+}
+.browserview-network-status .install-status-spinner {
+  position: relative;
+  display: inline-flex;
+  width: 18px;
+  height: 18px;
+  margin-bottom: 3px;
+}
+.browserview-network-status .install-status-grid-anchor,
+.browserview-network-status .install-status-grid-chaser {
+  position: absolute;
+  display: block;
+  width: 7px;
+  height: 7px;
+  border-radius: 2px;
+  background: var(--install-spinner-fg);
+}
+.browserview-network-status .install-status-grid-anchor {
+  opacity: 0.16;
+}
+.browserview-network-status .install-status-grid-anchor-1,
+.browserview-network-status .install-status-grid-chaser { top: 1px; left: 1px; }
+.browserview-network-status .install-status-grid-anchor-2 { top: 1px; left: 12px; }
+.browserview-network-status .install-status-grid-anchor-3 { top: 12px; left: 12px; }
+.browserview-network-status .install-status-grid-anchor-4 { top: 12px; left: 1px; }
+.browserview-network-status .install-status-grid-chaser {
+  animation: pinokio-browserview-corner-chase 1.05s cubic-bezier(0.6, 0, 0.2, 1) infinite;
+}
+@keyframes pinokio-browserview-corner-chase {
+  0%, 100% { transform: translate(0, 0); }
+  25% { transform: translate(11px, 0); }
+  50% { transform: translate(11px, 11px); }
+  75% { transform: translate(0, 11px); }
 }
 .community-drawer {
   display: none;
@@ -1853,9 +1989,15 @@ body.dark .appcanvas_filler {
 }
 .appcanvas.vertical .appcanvas-resizer {
   display: flex;
-  flex: 0 0 0px;
+  flex: 0 0 8px;
+  width: 8px;
+  min-width: 8px;
+  margin-left: -4px;
+  margin-right: -4px;
   align-items: stretch;
   justify-content: center;
+  position: relative;
+  z-index: 3;
   cursor: col-resize;
   touch-action: none;
   outline: none;
@@ -5105,7 +5247,7 @@ body.dark .pinokio-git-diff-viewer-header {
 .pinokio-modal-tabs {
   display: inline-flex;
   gap: 8px;
-  padding: 0 6px;
+  padding: 0 14px;
 }
 
 .pinokio-modal-tab {
@@ -6187,11 +6329,14 @@ body.dark .snapshot-footer-input input {
 .snapshot-footer-input input::placeholder {
   opacity: 0.7;
 }
-.mobile-bottom-nav,
-.mobile-sheet-actions,
-.mobile-menu-fallback {
-  display: none;
-}
+	.mobile-bottom-nav,
+	.mobile-sheet-actions,
+	.mobile-drawer-home,
+	.mobile-drawer-actions,
+	.mobile-menu-backdrop,
+	.mobile-menu-fallback {
+	  display: none;
+	}
 header.navheader h1 {
   position: relative;
 }
@@ -6210,10 +6355,10 @@ header.navheader h1 {
     margin: 0 10px;
   }
 }
-@media only screen and (max-width: 768px) {
-  :root {
-    --mobile-bottom-bar-height: calc(33px + env(safe-area-inset-bottom));
-  }
+	@media only screen and (max-width: 768px) {
+	  :root {
+	    --mobile-bottom-bar-height: calc(46px + env(safe-area-inset-bottom));
+	  }
   .appcanvas.vertical {
     flex-direction: column;
   }
@@ -6239,86 +6384,92 @@ header.navheader h1 {
   header.navheader .app-header-identity {
     display: none !important;
   }
-  body:not(.mobile-menu-open) .appcanvas > aside {
-    display: none;
-  }
-  body.mobile-menu-open #menu-mobile-close {
-    display: inline-flex;
-  }
-  .browserview-shell {
-    box-sizing: border-box;
-  }
-  .mobile-bottom-nav {
-    position: sticky;
-    bottom: 0;
-    display: flex;
-    flex: 0 0 auto;
-    align-items: center;
-    gap: 3px;
-    width: 100%;
-    margin-top: auto;
-    min-height: 32px;
-    padding: 0 4px env(safe-area-inset-bottom) 4px;
-    border-top: 1px solid rgba(0,0,0,0.08);
-    background: rgba(255,255,255,0.96);
-    backdrop-filter: blur(20px);
-    z-index: 10000002;
-    box-sizing: border-box;
-  }
+	  .browserview-shell {
+	    box-sizing: border-box;
+	  }
+	  .mobile-bottom-nav {
+	    position: sticky;
+	    bottom: 0;
+	    display: flex;
+	    flex: 0 0 auto;
+	    align-items: center;
+	    gap: 3px;
+	    width: 100%;
+	    margin-top: auto;
+	    min-height: var(--mobile-bottom-bar-height);
+	    padding: 0 8px env(safe-area-inset-bottom);
+	    border-top: 1px solid rgba(0,0,0,0.08);
+	    background: rgba(255,255,255,0.96);
+	    backdrop-filter: blur(20px);
+	    z-index: 10000040;
+	    box-sizing: border-box;
+	  }
   body.dark .mobile-bottom-nav {
     background: rgba(15, 17, 21, 0.96);
     border-top-color: rgba(255,255,255,0.08);
   }
-  .mobile-bottom-nav__button {
-    flex: 0 0 28px;
-    min-width: 28px;
-    max-width: 28px;
-    min-height: 28px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 0;
-    padding: 0;
-    border-radius: 7px;
-    background: transparent;
-    color: #64748b;
-    text-decoration: none;
+	  .mobile-bottom-nav__button {
+	    flex: 0 0 38px;
+	    width: 38px;
+	    min-width: 38px;
+	    max-width: 38px;
+	    height: 38px;
+	    min-height: 38px;
+	    display: flex;
+	    align-items: center;
+	    justify-content: center;
+	    gap: 0;
+	    padding: 0;
+	    border-radius: 8px;
+	    background: transparent;
+	    color: #64748b;
+	    text-decoration: none;
   }
   .mobile-bottom-nav__button i,
   .mobile-bottom-nav__button .ask-ai-brand-icon {
     font-size: 14px;
   }
-  .mobile-bottom-nav__button.selected {
-    background: rgba(10, 132, 255, 0.12);
-    color: #0a84ff;
-  }
-  body.dark .mobile-bottom-nav__button {
-    color: rgba(148, 163, 184, 0.9);
-  }
+	  .mobile-bottom-nav__button.selected {
+	    background: rgba(10, 132, 255, 0.12);
+	    color: #0a84ff;
+	  }
+	  .mobile-bottom-nav__button:focus {
+	    outline: none;
+	  }
+	  .mobile-bottom-nav__button:focus-visible {
+	    outline: 2px solid var(--pinokio-sidebar-separator-focus);
+	    outline-offset: -2px;
+	  }
+	  body.dark .mobile-bottom-nav__button {
+	    color: rgba(148, 163, 184, 0.9);
+	  }
   body.dark .mobile-bottom-nav__button.selected {
     background: rgba(10, 132, 255, 0.18);
     color: #63a9ff;
   }
-  .mobile-bottom-nav__logo {
-    width: 25px;
-    height: 25px;
-    object-fit: contain;
-    display: block;
-  }
-  .mobile-bottom-nav__identity {
-    flex: 1 1 auto;
-    min-width: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 6px;
-    height: 28px;
-    padding: 0 10px;
-    border-radius: 999px;
-    border: 1px solid rgba(0,0,0,0.08);
-    background: rgba(255, 255, 255, 0.78);
-    box-sizing: border-box;
-  }
+	  .mobile-bottom-nav__logo {
+	    width: 24px;
+	    height: 24px;
+	    object-fit: contain;
+	    display: block;
+	  }
+	  .mobile-bottom-nav__identity {
+	    flex: 1 1 auto;
+	    min-width: 0;
+	    display: flex;
+	    align-items: center;
+	    justify-content: flex-start;
+	    align-content: center;
+	    flex-wrap: wrap;
+	    gap: 2px 5px;
+	    min-height: 38px;
+	    padding: 2px 9px;
+	    border-radius: 999px;
+	    border: 1px solid rgba(0,0,0,0.08);
+	    background: rgba(255, 255, 255, 0.78);
+	    box-sizing: border-box;
+	    overflow: hidden;
+	  }
   body.dark .mobile-bottom-nav__identity {
     border-color: rgba(255,255,255,0.08);
     background: rgba(255,255,255,0.06);
@@ -6330,16 +6481,17 @@ header.navheader h1 {
     object-fit: contain;
     display: block;
   }
-  .mobile-bottom-nav__identity-title {
-    min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    color: #0f172a;
-    font-size: 12px;
-    font-weight: 700;
-    line-height: 1;
-  }
+	  .mobile-bottom-nav__identity-title {
+	    min-width: 0;
+	    max-width: 42%;
+	    overflow: hidden;
+	    text-overflow: ellipsis;
+	    white-space: nowrap;
+	    color: #0f172a;
+	    font-size: 11px;
+	    font-weight: 700;
+	    line-height: 1;
+	  }
   body.dark .mobile-bottom-nav__identity-title {
     color: rgba(248, 250, 252, 0.94);
   }
@@ -6353,22 +6505,19 @@ header.navheader h1 {
   body.dark .mobile-bottom-nav__identity-separator {
     background: rgba(148, 163, 184, 0.6);
   }
-  .mobile-bottom-nav__identity-disk {
-    flex: 0 0 auto;
-    display: inline-flex;
-    align-items: center;
-    min-width: 0;
-    max-width: 78px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    padding: 0;
-    border: 0 !important;
-    border-radius: 0;
-    color: rgba(71, 85, 105, 0.74);
-    font-size: 10px;
-    font-weight: 600;
-    line-height: 1;
-    white-space: nowrap;
+	  .mobile-bottom-nav__identity-disk {
+	    flex: 0 0 auto;
+	    display: inline-flex;
+	    align-items: center;
+	    min-width: 0;
+	    padding: 0;
+	    border: 0 !important;
+	    border-radius: 0;
+	    color: rgba(71, 85, 105, 0.74);
+	    font-size: 9.5px;
+	    font-weight: 600;
+	    line-height: 1;
+	    white-space: nowrap;
     cursor: default;
   }
   body.dark .mobile-bottom-nav__identity-disk {
@@ -6377,60 +6526,134 @@ header.navheader h1 {
   .mobile-bottom-nav__identity-disk i {
     display: none;
   }
-  .mobile-bottom-nav .resource-usage {
-    max-width: min(46vw, 190px);
-  }
-  .mobile-bottom-nav .resource-usage-trigger {
-    gap: 5px;
-    overflow: hidden;
-  }
-  .mobile-bottom-nav .resource-chip {
-    max-width: 82px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    font-size: 10px;
-  }
-  .mobile-bottom-nav .resource-chip--cpu,
-  .mobile-bottom-nav .resource-chip--ram,
-  .mobile-bottom-nav .resource-chip--vram {
-    display: none !important;
-  }
-  .mobile-bottom-nav .resource-usage-popover {
-    top: auto;
-    bottom: calc(100% + 9px);
-    right: -4px;
-  }
-  body.mobile-menu-open .appcanvas > aside {
-    display: flex;
-    position: fixed;
-    inset: 0;
-    bottom: var(--mobile-bottom-bar-height);
-    width: 100%;
-    max-width: none;
-    border-left: 0;
-    z-index: 10000001;
-    background: #f2f2f7;
-  }
-  body.mobile-menu-open .appcanvas.sidebar-collapsed > aside {
-    width: 100%;
-    min-width: 0;
-    max-width: none;
-    opacity: 1;
-    pointer-events: auto;
-  }
+	  .mobile-bottom-nav .resource-usage {
+	    flex: 1 1 120px;
+	    max-width: none;
+	  }
+	  .mobile-bottom-nav .resource-usage-trigger {
+	    width: 100%;
+	    height: auto;
+	    min-height: 0;
+	    justify-content: flex-start;
+	    align-content: center;
+	    flex-wrap: wrap;
+	    gap: 2px 5px;
+	    overflow: visible;
+	    padding: 0;
+	  }
+	  .mobile-bottom-nav .resource-usage-trigger::after {
+	    display: none;
+	  }
+	  .mobile-bottom-nav .resource-chip {
+	    flex: 0 0 auto;
+	    max-width: none;
+	    overflow: visible;
+	    text-overflow: clip;
+	    font-size: 9.5px;
+	    line-height: 1;
+	  }
+	  .mobile-bottom-nav .resource-chip--cpu,
+	  .mobile-bottom-nav .resource-chip--ram,
+	  .mobile-bottom-nav .resource-chip--vram {
+	    display: inline-flex;
+	  }
+	  .mobile-bottom-nav .resource-usage-popover {
+	    top: auto;
+	    bottom: calc(100% + 9px);
+	    right: -4px;
+	  }
+	  body.mobile-menu-open .mobile-menu-backdrop {
+	    display: block;
+	    position: fixed;
+	    inset: 0;
+	    bottom: var(--mobile-bottom-bar-height);
+	    z-index: 10000018;
+	    border: 0;
+	    padding: 0;
+	    background: rgba(15, 23, 42, 0.28);
+	    cursor: pointer;
+	  }
+		  body.mobile-menu-open .appcanvas > aside {
+		    display: flex;
+		    position: fixed;
+	    top: 0;
+	    left: 0;
+	    bottom: var(--mobile-bottom-bar-height);
+	    width: min(280px, calc(100vw - 40px));
+	    max-width: 100%;
+	    margin: 0 !important;
+	    padding: calc(12px + env(safe-area-inset-top)) 12px 18px;
+	    box-sizing: border-box;
+	    overflow-y: auto;
+	    background: var(--pinokio-sidebar-tabbar-bg);
+	    border-right: 1px solid var(--pinokio-sidebar-separator);
+	    border-left: 0;
+	    box-shadow: 24px 0 48px rgba(15, 23, 42, 0.12);
+	    transform: translateX(0);
+		    transition: transform 180ms ease;
+		    z-index: 10000020;
+		  }
+  body.mobile-menu-open .appcanvas > aside,
+  body.mobile-menu-open .mobile-menu-fallback {
+    --app-mobile-drawer-tab-hover: rgba(15, 23, 42, 0.028);
+    --app-mobile-drawer-tab-active-bg: rgba(15, 23, 42, 0.038);
+    --app-mobile-drawer-tab-active-color: #111827;
+    --app-mobile-drawer-tab-muted: rgba(31, 41, 55, 0.72);
+    --app-mobile-drawer-icon-muted: rgba(31, 41, 55, 0.58);
+    --app-mobile-drawer-icon-active: rgba(17, 24, 39, 0.84);
+  }
+	  body:not(.mobile-menu-open) .appcanvas > aside {
+	    display: flex;
+	    position: fixed;
+	    top: 0;
+	    left: 0;
+	    bottom: var(--mobile-bottom-bar-height);
+	    width: min(280px, calc(100vw - 40px));
+	    max-width: 100%;
+	    margin: 0 !important;
+	    padding: calc(12px + env(safe-area-inset-top)) 12px 18px;
+	    box-sizing: border-box;
+	    overflow-y: auto;
+	    pointer-events: none;
+	    background: var(--pinokio-sidebar-tabbar-bg);
+	    border-right: 1px solid var(--pinokio-sidebar-separator);
+	    border-left: 0;
+	    box-shadow: 24px 0 48px rgba(15, 23, 42, 0.12);
+	    transform: translateX(-100%);
+	    transition: transform 180ms ease;
+	    z-index: 10000020;
+	  }
+	  body.mobile-menu-open .appcanvas.sidebar-collapsed > aside {
+	    width: min(280px, calc(100vw - 40px));
+	    min-width: 0;
+	    max-width: 100%;
+	    opacity: 1;
+	    pointer-events: auto;
+	  }
   body.mobile-menu-open .appcanvas.sidebar-collapsed > aside .menu-container {
     width: 100%;
   }
-  body.dark.mobile-menu-open .appcanvas > aside {
-    background: #0f1115;
-  }
-  body.mobile-menu-open .appcanvas > aside .menu-container {
-    width: 100%;
-    flex-direction: column;
-    align-items: stretch;
-    gap: 8px;
-    padding-top: 0;
-  }
+		  body.dark.mobile-menu-open .appcanvas > aside {
+		    background: var(--pinokio-sidebar-tabbar-bg);
+		    border-right-color: var(--pinokio-sidebar-separator);
+		    box-shadow: 24px 0 52px rgba(0, 0, 0, 0.38);
+		  }
+  body.dark.mobile-menu-open .appcanvas > aside,
+  body.dark.mobile-menu-open .mobile-menu-fallback {
+    --app-mobile-drawer-tab-hover: rgba(255, 255, 255, 0.035);
+    --app-mobile-drawer-tab-active-bg: rgba(255, 255, 255, 0.048);
+    --app-mobile-drawer-tab-active-color: rgba(248, 250, 252, 0.91);
+    --app-mobile-drawer-tab-muted: rgba(229, 231, 235, 0.64);
+    --app-mobile-drawer-icon-muted: rgba(229, 231, 235, 0.54);
+    --app-mobile-drawer-icon-active: rgba(248, 250, 252, 0.82);
+  }
+	  body.mobile-menu-open .appcanvas > aside .menu-container {
+	    width: 100%;
+	    flex-direction: column;
+	    align-items: stretch;
+	    gap: 8px;
+	    padding-top: 0;
+	  }
   body.mobile-menu-open .appcanvas > aside .config-info {
     padding: 6px 8px 2px;
     font-size: 15px;
@@ -6445,16 +6668,16 @@ header.navheader h1 {
   body.dark.mobile-menu-open .appcanvas > aside .disk-usage {
     color: rgba(148, 163, 184, 0.9);
   }
-  body.mobile-menu-open .appcanvas > aside .menu-scroller {
-    flex-direction: column;
-    align-items: stretch;
-    overflow-y: auto;
-    overflow-x: hidden;
-    width: 100%;
-    padding: 12px 12px 14px;
-    gap: 12px;
-    box-sizing: border-box;
-  }
+	  body.mobile-menu-open .appcanvas > aside .menu-scroller {
+	    flex-direction: column;
+	    align-items: stretch;
+	    overflow-y: auto;
+	    overflow-x: hidden;
+	    width: 100%;
+	    padding: 0 0 8px;
+	    gap: 8px;
+	    box-sizing: border-box;
+	  }
   body.mobile-menu-open .appcanvas > aside .workspace-mode-switch,
   body.mobile-menu-open .mobile-menu-fallback .workspace-mode-switch {
     flex-direction: row;
@@ -6482,14 +6705,14 @@ header.navheader h1 {
     display: flex;
     flex-direction: column;
     align-items: stretch;
-    gap: 8px;
+    gap: 4px;
     width: 100%;
   }
-  body.mobile-menu-open .appcanvas > aside .mobile-sheet-actions {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    width: 100%;
+	  body.mobile-menu-open .appcanvas > aside .mobile-sheet-actions {
+	    display: none;
+	    align-items: center;
+	    gap: 8px;
+	    width: 100%;
     overflow-x: auto;
     overflow-y: hidden;
     padding-bottom: 2px;
@@ -6546,11 +6769,11 @@ header.navheader h1 {
     justify-content: center;
     gap: 0;
   }
-  body.mobile-menu-open[data-view='files'] .mobile-menu-fallback .mobile-sheet-actions {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    width: 100%;
+	  body.mobile-menu-open[data-view='files'] .mobile-menu-fallback .mobile-sheet-actions {
+	    display: none;
+	    align-items: center;
+	    gap: 8px;
+	    width: 100%;
     overflow-x: auto;
     overflow-y: hidden;
     padding-bottom: 2px;
@@ -6560,56 +6783,195 @@ header.navheader h1 {
     max-width: none;
     min-width: 0;
     width: 100%;
-    padding: 12px 14px;
-    border-radius: 14px;
-    border: 1px solid rgba(0,0,0,0.06);
-    background: #fff;
-    color: #111827;
-    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
+    min-height: 36px;
+    padding: 6px 9px;
+    border-radius: 6px;
+    border: 0;
+    background: transparent;
+    color: var(--app-mobile-drawer-tab-muted);
+    box-shadow: none;
     box-sizing: border-box;
-    min-height: 44px;
   }
   body.dark.mobile-menu-open .appcanvas > aside .menu-scroller .btn:not(.btn2),
   body.dark.mobile-menu-open .appcanvas > aside .menu-actions .btn:not(.btn2) {
-    background: rgba(15, 17, 21, 0.8);
-    border-color: rgba(255,255,255,0.08);
-    color: rgba(226, 232, 240, 0.9);
-    box-shadow: 0 1px 2px rgba(2, 6, 20, 0.4);
+    background: transparent;
+    border-color: transparent;
+    color: var(--app-mobile-drawer-tab-muted);
+    box-shadow: none;
+  }
+  body.mobile-menu-open .appcanvas > aside .menu-scroller .btn:not(.btn2):hover,
+  body.mobile-menu-open .appcanvas > aside .menu-scroller .btn:not(.btn2):focus-visible,
+  body.mobile-menu-open .appcanvas > aside .menu-actions .btn:not(.btn2):hover,
+  body.mobile-menu-open .appcanvas > aside .menu-actions .btn:not(.btn2):focus-visible {
+    background: var(--app-mobile-drawer-tab-hover);
+    color: var(--app-mobile-drawer-tab-active-color);
+  }
+  body.mobile-menu-open .appcanvas > aside .menu-scroller .btn.selected:not(.btn2),
+  body.mobile-menu-open .appcanvas > aside .menu-actions .btn.selected:not(.btn2) {
+    background: var(--app-mobile-drawer-tab-active-bg) !important;
+    color: var(--app-mobile-drawer-tab-active-color);
   }
   body.mobile-menu-open .appcanvas > aside .menu-scroller .tab,
   body.mobile-menu-open .appcanvas > aside .menu-actions .tab {
-    gap: 12px;
+    gap: 10px;
+    font-size: 12px;
+    line-height: 1.25;
+    font-weight: 500;
   }
   body.mobile-menu-open .appcanvas > aside .menu-scroller .display,
   body.mobile-menu-open .appcanvas > aside .menu-actions .display {
-    font-size: 15px;
+    font-size: 12px;
+    line-height: 1.25;
+    font-weight: 500;
+  }
+  body.mobile-menu-open .appcanvas > aside .menu-scroller .btn.selected .tab,
+  body.mobile-menu-open .appcanvas > aside .menu-actions .btn.selected .tab,
+  body.mobile-menu-open .appcanvas > aside .menu-scroller .btn.selected .display,
+  body.mobile-menu-open .appcanvas > aside .menu-actions .btn.selected .display {
+    font-weight: 600 !important;
   }
   body.mobile-menu-open .appcanvas > aside .menu-scroller .tab i,
   body.mobile-menu-open .appcanvas > aside .menu-actions .tab i {
-    font-size: 15px;
+    color: var(--app-mobile-drawer-icon-muted) !important;
+    font-size: 14px !important;
+    opacity: 1;
   }
-  body.mobile-menu-open .appcanvas > aside .menu-actions {
-    display: none;
+  body.mobile-menu-open .appcanvas > aside .menu-scroller .btn:not(.btn2):hover .tab i,
+  body.mobile-menu-open .appcanvas > aside .menu-scroller .btn:not(.btn2):focus-visible .tab i,
+  body.mobile-menu-open .appcanvas > aside .menu-scroller .btn.selected:not(.btn2) .tab i,
+  body.mobile-menu-open .appcanvas > aside .menu-actions .btn:not(.btn2):hover .tab i,
+  body.mobile-menu-open .appcanvas > aside .menu-actions .btn:not(.btn2):focus-visible .tab i,
+  body.mobile-menu-open .appcanvas > aside .menu-actions .btn.selected:not(.btn2) .tab i {
+    color: var(--app-mobile-drawer-icon-active) !important;
   }
-  .mobile-menu-fallback {
+  body.mobile-menu-open .appcanvas > aside .menu-actions {
     display: none;
   }
-  body.mobile-menu-open[data-view='files'] .mobile-menu-fallback {
+  body.mobile-menu-open .appcanvas > aside .mobile-drawer-actions,
+  body.mobile-menu-open .mobile-menu-fallback .mobile-drawer-actions {
     display: flex;
-    position: fixed;
-    inset: 0;
-    bottom: var(--mobile-bottom-bar-height);
-    z-index: 10000001;
     flex-direction: column;
-    background: #f2f2f7;
+    align-items: stretch;
+    gap: 4px;
+    width: 100%;
+    margin-top: 8px;
+    padding-top: 8px;
+    border-top: 1px solid var(--pinokio-sidebar-separator);
+  }
+  body.mobile-menu-open .appcanvas > aside .mobile-drawer-actions .header-item,
+  body.mobile-menu-open .mobile-menu-fallback .mobile-drawer-actions .header-item {
+    display: flex;
+    max-width: none;
+    min-width: 0;
+    width: 100%;
+    min-height: 36px;
+    padding: 6px 9px;
+    border-radius: 6px;
+    border: 0;
+    background: transparent;
+    color: var(--app-mobile-drawer-tab-muted);
+    box-shadow: none;
+    box-sizing: border-box;
+    text-align: left;
+    text-decoration: none;
   }
-  body.dark.mobile-menu-open[data-view='files'] .mobile-menu-fallback {
-    background: #0f1115;
+  body.mobile-menu-open .appcanvas > aside .mobile-drawer-actions .header-item:hover,
+  body.mobile-menu-open .appcanvas > aside .mobile-drawer-actions .header-item:focus-visible,
+  body.mobile-menu-open .mobile-menu-fallback .mobile-drawer-actions .header-item:hover,
+  body.mobile-menu-open .mobile-menu-fallback .mobile-drawer-actions .header-item:focus-visible {
+    background: var(--app-mobile-drawer-tab-hover);
+    color: var(--app-mobile-drawer-tab-active-color);
   }
-  .mobile-menu-fallback__header {
+  body.mobile-menu-open .appcanvas > aside .mobile-drawer-actions .header-item.selected,
+  body.mobile-menu-open .mobile-menu-fallback .mobile-drawer-actions .header-item.selected {
+    background: var(--app-mobile-drawer-tab-active-bg);
+    color: var(--app-mobile-drawer-tab-active-color);
+  }
+  body.mobile-menu-open .appcanvas > aside .mobile-drawer-actions .tab,
+  body.mobile-menu-open .mobile-menu-fallback .mobile-drawer-actions .tab {
     display: flex;
     align-items: center;
     gap: 10px;
+    width: 100%;
+    min-width: 0;
+    padding: 0;
+  }
+  body.mobile-menu-open .appcanvas > aside .mobile-drawer-actions .menu-action-leading-icon,
+  body.mobile-menu-open .mobile-menu-fallback .mobile-drawer-actions .menu-action-leading-icon {
+    width: 16px;
+    height: 16px;
+    flex: 0 0 16px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 1;
+    margin-right: 0;
+    padding: 0;
+    color: var(--app-mobile-drawer-icon-muted) !important;
+    opacity: 1;
+  }
+  body.mobile-menu-open .appcanvas > aside .mobile-drawer-actions i.menu-action-leading-icon,
+  body.mobile-menu-open .mobile-menu-fallback .mobile-drawer-actions i.menu-action-leading-icon {
+    font-size: 14px !important;
+  }
+  body.mobile-menu-open .appcanvas > aside .mobile-drawer-actions .header-item:hover .menu-action-leading-icon,
+  body.mobile-menu-open .appcanvas > aside .mobile-drawer-actions .header-item:focus-visible .menu-action-leading-icon,
+  body.mobile-menu-open .appcanvas > aside .mobile-drawer-actions .header-item.selected .menu-action-leading-icon,
+  body.mobile-menu-open .mobile-menu-fallback .mobile-drawer-actions .header-item:hover .menu-action-leading-icon,
+  body.mobile-menu-open .mobile-menu-fallback .mobile-drawer-actions .header-item:focus-visible .menu-action-leading-icon,
+  body.mobile-menu-open .mobile-menu-fallback .mobile-drawer-actions .header-item.selected .menu-action-leading-icon {
+    color: var(--app-mobile-drawer-icon-active) !important;
+  }
+  body.mobile-menu-open .appcanvas > aside .mobile-drawer-actions .ask-ai-brand-icon.menu-action-leading-icon,
+  body.mobile-menu-open .mobile-menu-fallback .mobile-drawer-actions .ask-ai-brand-icon.menu-action-leading-icon {
+    -webkit-mask: url('/pinokio-mark.svg') center / 14px 14px no-repeat;
+    mask: url('/pinokio-mark.svg') center / 14px 14px no-repeat;
+  }
+  body.mobile-menu-open .appcanvas > aside .mobile-drawer-actions .display,
+  body.mobile-menu-open .mobile-menu-fallback .mobile-drawer-actions .display {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 12px;
+    line-height: 1.25;
+    font-weight: 500;
+  }
+  body.mobile-menu-open .appcanvas > aside .mobile-drawer-actions .header-item.selected .display,
+  body.mobile-menu-open .mobile-menu-fallback .mobile-drawer-actions .header-item.selected .display {
+    font-weight: 600 !important;
+  }
+	  .mobile-menu-fallback {
+	    display: none;
+	  }
+	  body.mobile-menu-open[data-view='files'] .mobile-menu-fallback {
+	    display: flex;
+	    position: fixed;
+	    top: 0;
+	    left: 0;
+	    bottom: var(--mobile-bottom-bar-height);
+	    width: min(280px, calc(100vw - 40px));
+	    max-width: 100%;
+	    z-index: 10000020;
+	    flex-direction: column;
+	    padding: calc(12px + env(safe-area-inset-top)) 12px 18px;
+	    box-sizing: border-box;
+	    overflow-y: auto;
+	    background: var(--pinokio-sidebar-tabbar-bg);
+	    border-right: 1px solid var(--pinokio-sidebar-separator);
+	    box-shadow: 24px 0 48px rgba(15, 23, 42, 0.12);
+	    transform: translateX(0);
+	    transition: transform 180ms ease;
+	  }
+	  body.dark.mobile-menu-open[data-view='files'] .mobile-menu-fallback {
+	    background: var(--pinokio-sidebar-tabbar-bg);
+	    border-right-color: var(--pinokio-sidebar-separator);
+	    box-shadow: 24px 0 52px rgba(0, 0, 0, 0.38);
+	  }
+	  .mobile-menu-fallback__header {
+	    display: flex;
+    align-items: center;
+    gap: 10px;
     padding: 12px;
     font-size: 15px;
     font-weight: 700;
@@ -6620,12 +6982,12 @@ header.navheader h1 {
     object-fit: contain;
     display: block;
   }
-  .mobile-menu-fallback__body {
-    flex: 1 1 auto;
-    overflow-y: auto;
-    padding: 0 12px 16px;
-    box-sizing: border-box;
-  }
+	  .mobile-menu-fallback__body {
+	    flex: 1 1 auto;
+	    overflow-y: auto;
+	    padding: 0 0 16px;
+	    box-sizing: border-box;
+	  }
   .mobile-menu-fallback .workspace-mode-switch {
     display: flex;
     align-items: center;
@@ -6641,12 +7003,9 @@ header.navheader h1 {
     border-color: rgba(255, 255, 255, 0.075);
     background: rgba(255, 255, 255, 0.045);
   }
-  body.mobile-menu-open .appcanvas .container {
-    display: none;
-  }
-  #community-toggle {
-    display: none;
-  }
+	  #community-toggle {
+	    display: none;
+	  }
   .appcanvas.panel-open .ask-ai-drawer,
   .appcanvas.logs-open .app-logs-drawer,
   .appcanvas.event-drawer-open .event-launch-drawer,
@@ -6686,11 +7045,533 @@ header.navheader h1 {
   .appcanvas.community-mode .community-resizer {
     display: none;
   }
-  .appcanvas.community-mode main.browserview {
-    display: none;
+  .appcanvas.community-mode main.browserview {
+    display: none;
+  }
+  .appcanvas.community-mode .browserview-shell {
+    flex: 1 1 auto;
+  }
+}
+
+/* Minimal modal normalization: shared app SweetAlert and custom git shells. */
+:root {
+  --pinokio-modal-bg: #ffffff;
+  --pinokio-modal-surface-bg: #ffffff;
+  --pinokio-modal-text: #18181b;
+  --pinokio-modal-title-color: #18181b;
+  --pinokio-modal-subtitle-color: #71717a;
+  --pinokio-modal-border: rgba(24, 24, 27, 0.12);
+  --pinokio-modal-border-strong: rgba(24, 24, 27, 0.2);
+  --pinokio-modal-body-bg: rgba(24, 24, 27, 0.03);
+  --pinokio-modal-body-border: rgba(24, 24, 27, 0.1);
+  --pinokio-modal-body-iframe-bg: #ffffff;
+  --pinokio-modal-body-text-color: #3f3f46;
+  --pinokio-modal-label-color: #52525b;
+  --pinokio-modal-input-bg: #ffffff;
+  --pinokio-modal-input-border: rgba(24, 24, 27, 0.16);
+  --pinokio-modal-input-text: #18181b;
+  --pinokio-modal-input-focus-border: rgba(24, 24, 27, 0.42);
+  --pinokio-modal-input-focus-shadow: rgba(24, 24, 27, 0.12);
+  --pinokio-modal-checkbox-color: #52525b;
+  --pinokio-modal-icon-bg: rgba(24, 24, 27, 0.04);
+  --pinokio-modal-icon-color: #52525b;
+  --pinokio-modal-primary-bg: #18181b;
+  --pinokio-modal-primary-hover: #27272a;
+  --pinokio-modal-primary-text: #ffffff;
+  --pinokio-modal-secondary-bg: transparent;
+  --pinokio-modal-secondary-hover-bg: rgba(24, 24, 27, 0.06);
+  --pinokio-pill-bg: rgba(24, 24, 27, 0.05);
+  --pinokio-pill-text: #3f3f46;
+  --pinokio-history-empty-color: #71717a;
+  --pinokio-modern-shadow: 0 18px 50px rgba(15, 23, 42, 0.16);
+  --pinokio-modern-close-color: #71717a;
+  --pinokio-modern-close-hover-bg: rgba(24, 24, 27, 0.06);
+  --pinokio-modern-close-hover-color: #18181b;
+  --pinokio-modern-cancel-bg: transparent;
+  --pinokio-modern-cancel-color: #52525b;
+  --pinokio-modern-cancel-hover-bg: rgba(24, 24, 27, 0.06);
+  --pinokio-custom-commit-overlay-bg: rgba(9, 11, 15, 0.34);
+  --pinokio-custom-commit-modal-bg: #ffffff;
+  --pinokio-custom-commit-modal-text: #18181b;
+  --pinokio-custom-commit-border: rgba(24, 24, 27, 0.12);
+  --pinokio-custom-commit-header-bg: #ffffff;
+  --pinokio-custom-commit-close-color: #71717a;
+  --pinokio-custom-commit-close-hover-bg: rgba(24, 24, 27, 0.06);
+  --pinokio-custom-commit-close-hover-color: #18181b;
+  --pinokio-custom-commit-action-bg: transparent;
+  --pinokio-custom-commit-action-border: rgba(24, 24, 27, 0.16);
+  --pinokio-custom-commit-action-color: #18181b;
+  --pinokio-custom-commit-action-hover: rgba(24, 24, 27, 0.06);
+}
+
+body.dark {
+  --pinokio-modal-bg: #1b1c1d;
+  --pinokio-modal-surface-bg: #1b1c1d;
+  --pinokio-modal-text: rgba(250, 250, 250, 0.94);
+  --pinokio-modal-title-color: rgba(250, 250, 250, 0.94);
+  --pinokio-modal-subtitle-color: rgba(229, 231, 235, 0.62);
+  --pinokio-modal-border: rgba(255, 255, 255, 0.1);
+  --pinokio-modal-border-strong: rgba(255, 255, 255, 0.18);
+  --pinokio-modal-body-bg: rgba(255, 255, 255, 0.04);
+  --pinokio-modal-body-border: rgba(255, 255, 255, 0.09);
+  --pinokio-modal-body-iframe-bg: #161718;
+  --pinokio-modal-body-text-color: rgba(229, 231, 235, 0.78);
+  --pinokio-modal-label-color: rgba(229, 231, 235, 0.76);
+  --pinokio-modal-input-bg: rgba(255, 255, 255, 0.04);
+  --pinokio-modal-input-border: rgba(255, 255, 255, 0.14);
+  --pinokio-modal-input-text: rgba(250, 250, 250, 0.94);
+  --pinokio-modal-input-focus-border: rgba(255, 255, 255, 0.38);
+  --pinokio-modal-input-focus-shadow: rgba(255, 255, 255, 0.14);
+  --pinokio-modal-checkbox-color: rgba(229, 231, 235, 0.76);
+  --pinokio-modal-icon-bg: rgba(255, 255, 255, 0.055);
+  --pinokio-modal-icon-color: rgba(229, 231, 235, 0.76);
+  --pinokio-modal-primary-bg: rgba(250, 250, 250, 0.94);
+  --pinokio-modal-primary-hover: #ffffff;
+  --pinokio-modal-primary-text: #1b1c1d;
+  --pinokio-modal-secondary-hover-bg: rgba(255, 255, 255, 0.07);
+  --pinokio-pill-bg: rgba(255, 255, 255, 0.055);
+  --pinokio-pill-text: rgba(229, 231, 235, 0.76);
+  --pinokio-history-empty-color: rgba(229, 231, 235, 0.58);
+  --pinokio-modern-shadow: 0 24px 72px rgba(0, 0, 0, 0.42);
+  --pinokio-modern-close-color: rgba(229, 231, 235, 0.58);
+  --pinokio-modern-close-hover-bg: rgba(255, 255, 255, 0.07);
+  --pinokio-modern-close-hover-color: rgba(250, 250, 250, 0.94);
+  --pinokio-modern-cancel-bg: transparent;
+  --pinokio-modern-cancel-color: rgba(229, 231, 235, 0.7);
+  --pinokio-modern-cancel-hover-bg: rgba(255, 255, 255, 0.07);
+  --pinokio-custom-commit-overlay-bg: rgba(0, 0, 0, 0.58);
+  --pinokio-custom-commit-modal-bg: #1b1c1d;
+  --pinokio-custom-commit-modal-text: rgba(250, 250, 250, 0.94);
+  --pinokio-custom-commit-border: rgba(255, 255, 255, 0.1);
+  --pinokio-custom-commit-header-bg: #1b1c1d;
+  --pinokio-custom-commit-close-color: rgba(229, 231, 235, 0.58);
+  --pinokio-custom-commit-close-hover-bg: rgba(255, 255, 255, 0.07);
+  --pinokio-custom-commit-close-hover-color: rgba(250, 250, 250, 0.94);
+  --pinokio-custom-commit-action-bg: transparent;
+  --pinokio-custom-commit-action-border: rgba(255, 255, 255, 0.14);
+  --pinokio-custom-commit-action-color: rgba(250, 250, 250, 0.94);
+  --pinokio-custom-commit-action-hover: rgba(255, 255, 255, 0.07);
+}
+
+.pinokio-modern-modal.swal2-popup,
+.pinokio-no-changes-popup.swal2-popup {
+  background: var(--pinokio-modal-bg) !important;
+  color: var(--pinokio-modal-text) !important;
+  border: 1px solid var(--pinokio-modal-border) !important;
+  border-radius: 8px !important;
+  box-shadow: var(--pinokio-modern-shadow) !important;
+}
+
+.pinokio-no-changes-popup.swal2-popup {
+  max-width: 360px !important;
+  padding: 22px !important;
+}
+
+.pinokio-no-changes-popup .pinokio-no-changes-icon,
+.pinokio-github-login__icon,
+.pinokio-modal-icon {
+  width: 32px !important;
+  height: 32px !important;
+  border-radius: 7px !important;
+  background: var(--pinokio-modal-icon-bg) !important;
+  color: var(--pinokio-modal-icon-color) !important;
+  font-size: 14px !important;
+}
+
+.pinokio-modal-icon--warning {
+  background: rgba(217, 119, 6, 0.1) !important;
+  color: #b45309 !important;
+}
+
+body.dark .pinokio-modal-icon--warning {
+  background: rgba(251, 191, 36, 0.12) !important;
+  color: #fbbf24 !important;
+}
+
+.pinokio-modern-close {
+  top: 12px !important;
+  right: 12px !important;
+  width: 28px !important;
+  height: 28px !important;
+  border-radius: 6px !important;
+  color: var(--pinokio-modern-close-color) !important;
+  font-size: 18px !important;
+}
+
+.pinokio-modern-close:hover,
+.pinokio-modern-close:focus-visible {
+  background: var(--pinokio-modern-close-hover-bg) !important;
+  color: var(--pinokio-modern-close-hover-color) !important;
+  outline: none !important;
+}
+
+.pinokio-modern-confirm.swal2-confirm,
+.pinokio-no-changes-confirm.swal2-confirm,
+.pinokio-publish-close-btn,
+.pinokio-save-version-btn,
+.swal2-popup.pinokio-diff-modal .pinokio-save-version-btn,
+.swal2-popup.pinokio-history-modal .pinokio-save-version-btn,
+body.dark .swal2-popup.pinokio-diff-modal .pinokio-save-version-btn,
+body.dark .swal2-popup.pinokio-history-modal .pinokio-save-version-btn {
+  min-height: 32px !important;
+  padding: 0 12px !important;
+  border-radius: 6px !important;
+  border: 1px solid var(--pinokio-modal-primary-bg) !important;
+  background: var(--pinokio-modal-primary-bg) !important;
+  background-color: var(--pinokio-modal-primary-bg) !important;
+  color: var(--pinokio-modal-primary-text) !important;
+  box-shadow: none !important;
+  font-size: 13px !important;
+  font-weight: 600 !important;
+}
+
+.pinokio-modern-confirm.swal2-confirm:hover,
+.pinokio-no-changes-confirm.swal2-confirm:hover,
+.pinokio-publish-close-btn:hover,
+.pinokio-save-version-btn:hover,
+.swal2-popup.pinokio-diff-modal .pinokio-save-version-btn:hover,
+.swal2-popup.pinokio-history-modal .pinokio-save-version-btn:hover,
+body.dark .swal2-popup.pinokio-diff-modal .pinokio-save-version-btn:hover,
+body.dark .swal2-popup.pinokio-history-modal .pinokio-save-version-btn:hover {
+  border-color: var(--pinokio-modal-primary-hover) !important;
+  background: var(--pinokio-modal-primary-hover) !important;
+  background-color: var(--pinokio-modal-primary-hover) !important;
+  color: var(--pinokio-modal-primary-text) !important;
+}
+
+.pinokio-save-version-btn:disabled,
+.swal2-popup.pinokio-diff-modal .pinokio-save-version-btn:disabled,
+.swal2-popup.pinokio-history-modal .pinokio-save-version-btn:disabled,
+body.dark .swal2-popup.pinokio-diff-modal .pinokio-save-version-btn:disabled,
+body.dark .swal2-popup.pinokio-history-modal .pinokio-save-version-btn:disabled {
+  border-color: var(--pinokio-modal-border) !important;
+  background: var(--pinokio-modal-body-bg) !important;
+  background-color: var(--pinokio-modal-body-bg) !important;
+  color: var(--pinokio-modal-subtitle-color) !important;
+}
+
+.pinokio-modern-cancel.swal2-cancel,
+.pinokio-modal-secondary-btn {
+  min-height: 32px !important;
+  margin-right: 8px !important;
+  padding: 0 12px !important;
+  border-radius: 6px !important;
+  border: 1px solid var(--pinokio-modal-border) !important;
+  background: var(--pinokio-modal-secondary-bg) !important;
+  color: var(--pinokio-modern-cancel-color) !important;
+  box-shadow: none !important;
+  font-size: 13px !important;
+  font-weight: 600 !important;
+}
+
+.pinokio-modern-cancel.swal2-cancel:hover,
+.pinokio-modern-cancel.swal2-cancel:focus-visible,
+.pinokio-modal-secondary-btn:hover,
+.pinokio-modal-secondary-btn:focus-visible {
+  border-color: var(--pinokio-modal-border-strong) !important;
+  background: var(--pinokio-modern-cancel-hover-bg) !important;
+  color: var(--pinokio-modal-title-color) !important;
+  outline: none !important;
+}
+
+.pinokio-modal-surface {
+  padding: 0 !important;
+  gap: 0 !important;
+  color: var(--pinokio-modal-text) !important;
+}
+
+.pinokio-modal-header {
+  gap: 10px !important;
+  padding: 14px !important;
+  align-items: flex-start !important;
+}
+
+.pinokio-modal-heading {
+  gap: 3px !important;
+}
+
+.pinokio-modal-title,
+.pinokio-github-login__title,
+.pinokio-no-changes-popup .pinokio-no-changes-title {
+  color: var(--pinokio-modal-title-color) !important;
+  font-size: 16px !important;
+  line-height: 1.25 !important;
+  font-weight: 600 !important;
+}
+
+.pinokio-modal-subtitle,
+.pinokio-github-login__body,
+.pinokio-no-changes-popup .pinokio-no-changes-body,
+.pinokio-no-changes-popup .pinokio-no-changes-hint {
+  color: var(--pinokio-modal-subtitle-color) !important;
+  font-size: 12px !important;
+  line-height: 1.45 !important;
+}
+
+.pinokio-github-login {
+  padding: 24px 22px 20px !important;
+  gap: 10px !important;
+}
+
+.pinokio-modal-body {
+  border-top: 1px solid var(--pinokio-modal-body-border) !important;
+  background: var(--pinokio-modal-body-bg) !important;
+  color: var(--pinokio-modal-body-text-color) !important;
+  padding: 12px 14px !important;
+}
+
+.pinokio-modal-body--iframe,
+.pinokio-modal-body--diff {
+  padding: 0 !important;
+}
+
+.swal2-popup.pinokio-diff-modal .pinokio-modal-tabs {
+  margin-bottom: 16px !important;
+}
+
+.pinokio-modal-body--iframe iframe {
+  background: var(--pinokio-modal-body-iframe-bg) !important;
+}
+
+.pinokio-modal-footer {
+  gap: 8px !important;
+  padding: 12px 14px 14px !important;
+  border-top: 1px solid var(--pinokio-modal-body-border);
+  background: var(--pinokio-modal-bg);
+}
+
+.pinokio-modal-footer--commit {
+  padding-top: 10px !important;
+}
+
+.pinokio-modal-tab,
+.pinokio-history-inline-btn,
+.pinokio-history-latest-btn,
+.pinokio-git-commit-switch-btn,
+.pinokio-git-diff-open-file {
+  border: 1px solid var(--pinokio-modal-border) !important;
+  border-radius: 6px !important;
+  background: transparent !important;
+  color: var(--pinokio-modal-body-text-color) !important;
+  box-shadow: none !important;
+}
+
+.pinokio-modal-tab:hover,
+.pinokio-modal-tab--active,
+.pinokio-history-inline-btn:hover,
+.pinokio-history-latest-btn:hover,
+.pinokio-git-commit-switch-btn:hover,
+.pinokio-git-diff-open-file:hover {
+  border-color: var(--pinokio-modal-border-strong) !important;
+  background: var(--pinokio-modal-secondary-hover-bg) !important;
+  color: var(--pinokio-modal-title-color) !important;
+  transform: none !important;
+}
+
+.pinokio-history-latest-banner,
+.pinokio-fork-item,
+.pinokio-git-commit-item,
+body.dark .pinokio-git-commit-item {
+  border: 1px solid var(--pinokio-modal-border) !important;
+  border-radius: 7px !important;
+  background: var(--pinokio-modal-body-bg) !important;
+  color: var(--pinokio-modal-body-text-color) !important;
+  box-shadow: none !important;
+}
+
+.pinokio-fork-help,
+.pinokio-fork-item-url,
+.pinokio-fork-name-input label,
+.pinokio-fork-org-input label,
+.pinokio-fork-org-hint,
+.pinokio-fork-dropdown-remote,
+.pinokio-publish-dropdown-remote,
+body.dark .pinokio-fork-dropdown-remote,
+body.dark .pinokio-publish-dropdown-remote {
+  color: var(--pinokio-modal-subtitle-color) !important;
+}
+
+.pinokio-pill {
+  border: 1px solid var(--pinokio-modal-border);
+  border-radius: 6px !important;
+  background: var(--pinokio-pill-bg) !important;
+  color: var(--pinokio-pill-text) !important;
+  padding: 3px 7px !important;
+}
+
+.pinokio-modal-input {
+  border-radius: 6px !important;
+  border: 1px solid var(--pinokio-modal-input-border) !important;
+  background: var(--pinokio-modal-input-bg) !important;
+  color: var(--pinokio-modal-input-text) !important;
+  box-shadow: none !important;
+  font-size: 13px !important;
+}
+
+.pinokio-modal-input:focus {
+  border-color: var(--pinokio-modal-input-focus-border) !important;
+  box-shadow: 0 0 0 3px var(--pinokio-modal-input-focus-shadow) !important;
+}
+
+.swal2-popup.pinokio-diff-modal .pinokio-modal-footer--commit .pinokio-commit-message-container {
+  align-items: stretch !important;
+}
+
+.swal2-popup.pinokio-diff-modal .pinokio-modal-footer--commit .pinokio-commit-actions {
+  display: flex !important;
+  align-items: stretch !important;
+}
+
+.swal2-popup.pinokio-diff-modal .pinokio-modal-footer--commit .pinokio-commit-message-input,
+.swal2-popup.pinokio-diff-modal .pinokio-modal-footer--commit .pinokio-save-version-btn {
+  box-sizing: border-box !important;
+  height: 44px !important;
+  min-height: 44px !important;
+}
+
+.swal2-popup.pinokio-diff-modal .pinokio-modal-footer--commit .pinokio-save-version-btn {
+  align-self: stretch !important;
+  padding: 0 16px !important;
+}
+
+.swal2-popup.pinokio-history-modal .pinokio-history-meta {
+  padding: 0 14px 10px !important;
+  gap: 6px !important;
+}
+
+.swal2-popup.pinokio-history-modal .pinokio-pill {
+  border-radius: 4px !important;
+  font-size: 12px !important;
+  line-height: 1.2 !important;
+  padding: 5px 8px !important;
+}
+
+.swal2-popup.pinokio-history-modal .pinokio-history-latest-banner {
+  margin: 0 14px 10px !important;
+  padding: 8px 10px !important;
+  gap: 8px !important;
+  border-radius: 4px !important;
+}
+
+.swal2-popup.pinokio-history-modal .pinokio-history-latest-text {
+  font-size: 13px !important;
+}
+
+.swal2-popup.pinokio-history-modal .pinokio-history-actions {
+  gap: 8px !important;
+}
+
+.swal2-popup.pinokio-history-modal .pinokio-history-latest-btn,
+.swal2-popup.pinokio-history-modal .pinokio-history-branch-select.pinokio-modal-input {
+  box-sizing: border-box !important;
+  height: 32px !important;
+  min-height: 32px !important;
+  padding: 0 10px !important;
+  font-size: 12px !important;
+}
+
+.swal2-popup.pinokio-history-modal .pinokio-modal-body--history {
+  padding: 0 !important;
+  background: var(--pinokio-modal-bg) !important;
+}
+
+.swal2-popup.pinokio-history-modal .pinokio-git-history-list {
+  gap: 0 !important;
+  padding: 0 14px 14px !important;
+}
+
+.swal2-popup.pinokio-history-modal .pinokio-git-commit-item,
+body.dark .swal2-popup.pinokio-history-modal .pinokio-git-commit-item {
+  align-items: center !important;
+  gap: 10px !important;
+  min-height: 52px !important;
+  padding: 8px 10px !important;
+  border: 0 !important;
+  border-bottom: 1px solid var(--pinokio-modal-border) !important;
+  border-radius: 0 !important;
+  background: transparent !important;
+  color: var(--pinokio-modal-body-text-color) !important;
+}
+
+.swal2-popup.pinokio-history-modal .pinokio-git-commit-item:hover {
+  background: var(--pinokio-modal-secondary-hover-bg) !important;
+  transform: none !important;
+}
+
+.swal2-popup.pinokio-history-modal .pinokio-git-commit-avatar {
+  width: 28px !important;
+  height: 28px !important;
+  border-radius: 4px !important;
+  font-size: 13px !important;
+}
+
+.swal2-popup.pinokio-history-modal .pinokio-git-commit-message {
+  font-size: 13px !important;
+  line-height: 1.25 !important;
+}
+
+.swal2-popup.pinokio-history-modal .pinokio-git-commit-meta {
+  gap: 8px !important;
+  font-size: 11px !important;
+  line-height: 1.25 !important;
+}
+
+.swal2-popup.pinokio-history-modal .pinokio-git-commit-hash {
+  border-radius: 4px !important;
+  padding: 1px 6px !important;
+}
+
+.pinokio-modal-checkbox-row input[type="checkbox"] {
+  accent-color: var(--pinokio-modal-title-color) !important;
+}
+
+.pinokio-custom-commit-modal,
+.pinokio-custom-terminal-modal,
+body.dark .pinokio-custom-commit-modal,
+body.dark .pinokio-custom-terminal-modal {
+  background: var(--pinokio-custom-commit-modal-bg) !important;
+  color: var(--pinokio-custom-commit-modal-text) !important;
+  border: 1px solid var(--pinokio-custom-commit-border) !important;
+  border-radius: 8px !important;
+  box-shadow: var(--pinokio-modern-shadow) !important;
+}
+
+.pinokio-custom-commit-header,
+.pinokio-custom-terminal-header,
+body.dark .pinokio-custom-commit-header,
+body.dark .pinokio-custom-terminal-header {
+  background: var(--pinokio-custom-commit-header-bg) !important;
+  border-bottom: 1px solid var(--pinokio-custom-commit-border) !important;
+  padding: 14px 16px !important;
+}
+
+.pinokio-custom-commit-close,
+.pinokio-custom-terminal-close {
+  width: 28px !important;
+  height: 28px !important;
+  padding: 0 !important;
+  border-radius: 6px !important;
+  color: var(--pinokio-custom-commit-close-color) !important;
+}
+
+.pinokio-custom-commit-close:hover,
+.pinokio-custom-terminal-close:hover {
+  background: var(--pinokio-custom-commit-close-hover-bg) !important;
+  color: var(--pinokio-custom-commit-close-hover-color) !important;
+}
+
+@media (max-width: 520px) {
+  .pinokio-modern-modal.swal2-popup,
+  .pinokio-no-changes-popup.swal2-popup {
+    width: calc(100vw - 24px) !important;
+  }
+
+  .pinokio-modal-header {
+    padding: 12px !important;
   }
-  .appcanvas.community-mode .browserview-shell {
-    flex: 1 1 auto;
+
+  .pinokio-github-login {
+    padding: 20px 16px 16px !important;
   }
 }
 </style>
@@ -6865,9 +7746,6 @@ header.navheader h1 {
           <button type='button' id='menu-mobile-close' class='btn mobile-sheet-action' data-tippy-content="Close menu" aria-label="Close menu" title="Close menu">
             <i class="fa-solid fa-xmark"></i>
           </button>
-          <a class='btn mobile-sheet-action' href="/home" aria-label="Home" title="Home">
-            <i class="fa-solid fa-house"></i>
-          </a>
           <button type='button' class='btn mobile-sheet-action' data-mobile-proxy="#refresh-page" data-mobile-close-menu="true" aria-label="Refresh" title="Refresh">
             <i class="fa-solid fa-rotate-right"></i>
           </button>
@@ -6912,8 +7790,8 @@ header.navheader h1 {
             </div>
           </div>
         <% } %>
-        <%if (type === 'run') { %>
-          <div class='m h menu' data-type='h'>
+	        <%if (type === 'run') { %>
+	          <div class='m h menu' data-type='h'>
             <% if (config.menu) { %>
               <%- include('./partials/menu', { menu: config.menu, }) %>
             <% } %>
@@ -6924,9 +7802,9 @@ header.navheader h1 {
                 <div class='flexible'></div>
               </div>
             </a>
-          </div>
-        <% } %>
-        <div class='m s temp-menu' data-type='s'>
+	          </div>
+	        <% } %>
+	        <div class='m s temp-menu' data-type='s'>
           <%tabs.forEach((tab, i) => { %>
             <% const tabHref = typeof tab === "string" ? tab : ((tab && typeof tab.href === "string") ? tab.href : "") %>
             <% const tabLabel = typeof tab === "string" ? tab : ((tab && typeof tab.label === "string" && tab.label.trim().length > 0) ? tab.label.trim() : tabHref) %>
@@ -6937,10 +7815,44 @@ header.navheader h1 {
                 <i class="fa-solid fa-link"></i><div class='display'><%=tabLabel%></div><div class='flexible'></div><% if (!tabIsShell) { %><button class='btn2 del'><i class="fa-solid fa-xmark"></i></button><% } %>
               </div>
             </a>
-          <%})%>
-        </div>
-      </div>
-      <div class='menu-actions <%= type === "browse" ? "dev-menu-actions" : "" %>'>
+	          <%})%>
+	        </div>
+	      </div>
+	      <div class='mobile-drawer-actions' aria-label="App actions">
+	        <button type='button' class='btn header-item mobile-nav-logs' data-mobile-proxy="#logs-toggle" data-mobile-panel="logs" data-mobile-close-menu="true" aria-pressed="false" aria-label="Logs">
+	          <div class='tab'>
+	            <i class="fa-solid fa-laptop-code menu-action-leading-icon"></i>
+	            <div class='display'>Logs</div>
+	            <div class='flexible'></div>
+	          </div>
+	        </button>
+	        <% if (type === 'run') { %>
+	        <button type='button' class='btn header-item mobile-nav-ask-ai' data-mobile-proxy="#ask-ai-tab" data-mobile-panel="ask-ai" data-mobile-close-menu="true" aria-pressed="false" aria-label="Ask AI">
+	          <div class='tab'>
+	            <span class="ask-ai-brand-icon menu-action-leading-icon" aria-hidden="true"></span>
+	            <div class='display'>Ask AI</div>
+	            <div class='flexible'></div>
+	          </div>
+	        </button>
+	        <% } %>
+	        <% if (registryEnabled) { %>
+	        <button type='button' class='btn header-item mobile-nav-community' data-mobile-proxy="#community-mode-toggle" data-mobile-panel="feed" data-mobile-close-menu="true" aria-pressed="false" aria-label="Project feed">
+	          <div class='tab'>
+	            <i class="fa-solid fa-rss menu-action-leading-icon"></i>
+	            <div class='display'>Feed</div>
+	            <div class='flexible'></div>
+	          </div>
+	        </button>
+	        <% } %>
+	        <a class='btn header-item mobile-drawer-home' href="/home" aria-label="Home">
+	          <div class='tab'>
+	            <i class="fa-solid fa-house menu-action-leading-icon"></i>
+	            <div class='display'>Home</div>
+	            <div class='flexible'></div>
+	          </div>
+	        </a>
+	      </div>
+	      <div class='menu-actions <%= type === "browse" ? "dev-menu-actions" : "" %>'>
         <% if (type === 'browse') { %>
           <%- include('./partials/fs_status') %>
         <% } %>
@@ -7070,6 +7982,7 @@ header.navheader h1 {
         <% if (type === 'files') { %>
           <iframe class='selected' src="<%=editor_tab%>" allow="fullscreen *;" allowfullscreen></iframe>
         <% } %>
+        <div id="browserview-network-status" class="browserview-network-status" hidden aria-live="polite"></div>
         <%- include('./partials/browser_popout_surface') %>
       </main>
       <% if (type === 'run') { %>
@@ -7256,6 +8169,7 @@ header.navheader h1 {
       </div>
     <% } %>
   </div>
+  <button type='button' class='mobile-menu-backdrop' data-mobile-menu-backdrop aria-label="Close Pinokio menu" hidden></button>
   <nav class='mobile-bottom-nav' aria-label="Mobile navigation">
     <button type='button' class='btn2 mobile-bottom-nav__button mobile-nav-menu' data-mobile-proxy="#menu-mobile" aria-expanded="false" aria-label="Open Pinokio menu">
       <img class='mobile-bottom-nav__logo' src="/pinokio-black.png" alt="" aria-hidden="true">
@@ -7266,14 +8180,14 @@ header.navheader h1 {
       <% } %>
       <span class='mobile-bottom-nav__identity-title'><%=config.title || name%></span>
       <span class='mobile-bottom-nav__identity-separator' aria-hidden="true"></span>
-      <div class="resource-usage" data-resource-usage-root data-workspace="<%=name%>">
+      <div class="resource-usage" data-resource-usage-root data-resource-always-visible="true" data-workspace="<%=name%>">
         <button type="button" class="resource-usage-trigger" data-resource-usage-trigger aria-haspopup="dialog" aria-expanded="false" aria-label="Resource usage">
           <span class="resource-chip resource-chip--disk">
             <span class="disk-usage mobile-bottom-nav__identity-disk" data-path="/" data-filepath="<%=path%>" data-metric-label="Disk">--</span>
           </span>
-          <span class="resource-chip resource-chip--cpu hidden" data-resource-chip="cpu">CPU --</span>
-          <span class="resource-chip resource-chip--ram hidden" data-resource-chip="ram">RAM --</span>
-          <span class="resource-chip resource-chip--vram hidden" data-resource-chip="vram">VRAM --</span>
+          <span class="resource-chip resource-chip--cpu" data-resource-chip="cpu">CPU --</span>
+          <span class="resource-chip resource-chip--ram" data-resource-chip="ram">RAM --</span>
+          <span class="resource-chip resource-chip--vram" data-resource-chip="vram">VRAM --</span>
         </button>
         <div class="resource-usage-popover hidden" data-resource-usage-popover role="dialog" aria-label="Resource usage settings">
           <div class="resource-usage-popover-head">Resources</div>
@@ -7293,19 +8207,6 @@ header.navheader h1 {
         </div>
       </div>
     </div>
-    <% if (registryEnabled) { %>
-    <button type='button' class='btn2 mobile-bottom-nav__button mobile-nav-community' data-mobile-proxy="#community-mode-toggle" data-mobile-close-menu="true" aria-pressed="false" aria-label="Project feed">
-      <i class="fa-solid fa-rss"></i>
-    </button>
-    <% } %>
-    <button type='button' class='btn2 mobile-bottom-nav__button mobile-nav-logs' data-mobile-proxy="#logs-toggle" data-mobile-close-menu="true" aria-pressed="false" aria-label="Logs">
-      <i class="fa-solid fa-laptop-code"></i>
-    </button>
-    <% if (type === 'run') { %>
-    <button type='button' class='btn2 mobile-bottom-nav__button mobile-nav-ask-ai' data-mobile-proxy="#ask-ai-tab" data-mobile-close-menu="true" aria-pressed="false" aria-label="Ask AI">
-      <span class="ask-ai-brand-icon" aria-hidden="true"></span>
-    </button>
-    <% } %>
   </nav>
 </div>
 <div class='mobile-menu-fallback' aria-hidden="true">
@@ -7328,9 +8229,6 @@ header.navheader h1 {
       </a>
     </div>
     <div class='mobile-sheet-actions' aria-label="Workspace actions">
-      <a class='btn mobile-sheet-action' href="/home" aria-label="Home" title="Home">
-        <i class="fa-solid fa-house"></i>
-      </a>
       <button type='button' class='btn mobile-sheet-action' data-mobile-proxy="#refresh-page" data-mobile-close-menu="true" aria-label="Refresh" title="Refresh">
         <i class="fa-solid fa-rotate-right"></i>
       </button>
@@ -7353,6 +8251,31 @@ header.navheader h1 {
         <i class="fa-solid fa-xmark"></i>
       </button>
     </div>
+    <div class='mobile-drawer-actions' aria-label="App actions">
+      <button type='button' class='btn header-item mobile-nav-logs' data-mobile-proxy="#fs-status .fs-logs .fs-status-btn" data-mobile-panel="logs" data-mobile-close-menu="true" aria-pressed="false" aria-label="Logs">
+        <div class='tab'>
+          <i class="fa-solid fa-laptop-code menu-action-leading-icon"></i>
+          <div class='display'>Logs</div>
+          <div class='flexible'></div>
+        </div>
+      </button>
+      <% if (registryEnabled) { %>
+      <button type='button' class='btn header-item mobile-nav-community' data-mobile-proxy="#community-mode-toggle" data-mobile-panel="feed" data-mobile-close-menu="true" aria-pressed="false" aria-label="Project feed">
+        <div class='tab'>
+          <i class="fa-solid fa-rss menu-action-leading-icon"></i>
+          <div class='display'>Feed</div>
+          <div class='flexible'></div>
+        </div>
+      </button>
+      <% } %>
+      <a class='btn header-item mobile-drawer-home' href="/home" aria-label="Home">
+        <div class='tab'>
+          <i class="fa-solid fa-house menu-action-leading-icon"></i>
+          <div class='display'>Home</div>
+          <div class='flexible'></div>
+        </div>
+      </a>
+    </div>
   </div>
 </div>
   <script>
@@ -7419,6 +8342,95 @@ header.navheader h1 {
   let initialHomeSelectionRetries = 0
   let ignorePersistedSelection = pluginLaunchActive || Boolean(initialHomeSelectionPayload)
   let lastForegroundSignature = null
+  let networkSharingWarningOpen = false
+  let pendingNetworkSharingSelectionRetry = null
+  const networkSharingSelectionRetries = new Map()
+  let networkSharingStatusRequest = null
+  const NETWORK_SHARING_SELECTION_RETRY_LIMIT = 30
+  const scheduleNetworkSharingSelectionRetry = (delay = 1000) => {
+    if (pendingNetworkSharingSelectionRetry !== null) {
+      return
+    }
+    pendingNetworkSharingSelectionRetry = setTimeout(() => {
+      pendingNetworkSharingSelectionRetry = null
+      refresh(false, { nodelay: true })
+    }, delay)
+  }
+  const cancelNetworkSharingSelectionRetry = () => {
+    if (pendingNetworkSharingSelectionRetry !== null) {
+      clearTimeout(pendingNetworkSharingSelectionRetry)
+      pendingNetworkSharingSelectionRetry = null
+    }
+  }
+  const isLoopbackHost = (hostname) => {
+    const normalized = String(hostname || "").toLowerCase()
+    return normalized === "localhost" || normalized === "127.0.0.1" || normalized === "::1" || normalized === "[::1]"
+  }
+  const requiresNetworkSharing = (href) => {
+    if (isLoopbackHost(window.location.hostname)) {
+      return false
+    }
+    try {
+      const parsed = new URL(href, window.location.href)
+      return parsed.protocol === "http:" && isLoopbackHost(parsed.hostname)
+    } catch (_) {
+      return false
+    }
+  }
+  const isNetworkSharedHref = (href) => {
+    if (isLoopbackHost(window.location.hostname)) {
+      return false
+    }
+    try {
+      const parsed = new URL(href, window.location.href)
+      const page = new URL(window.location.href)
+      return parsed.protocol === "http:" && parsed.hostname === page.hostname && parsed.port && parsed.port !== page.port
+    } catch (_) {
+      return false
+    }
+  }
+  const canLoadNetworkSharedHref = async (href, timeout = 750) => {
+    if (!isNetworkSharedHref(href)) {
+      return true
+    }
+    if (typeof AbortController !== "function") {
+      return true
+    }
+    const controller = new AbortController()
+    const timer = setTimeout(() => {
+      controller.abort()
+    }, timeout)
+    try {
+      await fetch(href, { cache: "no-store", mode: "no-cors", signal: controller.signal })
+      return true
+    } catch (_) {
+      return false
+    } finally {
+      clearTimeout(timer)
+    }
+  }
+  const showNetworkSharingRequired = (href) => {
+    if (!requiresNetworkSharing(href)) {
+      return false
+    }
+    if (networkSharingWarningOpen) {
+      return true
+    }
+    networkSharingWarningOpen = true
+    Swal.fire({
+      title: "Turn on network sharing",
+      text: "Open Network to turn on local network sharing, then come back to this app.",
+      showCancelButton: true,
+      confirmButtonText: "Open Network",
+      cancelButtonText: "Stay here"
+    }).then((result) => {
+      networkSharingWarningOpen = false
+      if (result.isConfirmed) {
+        window.location.href = "/network"
+      }
+    })
+    return true
+  }
   const browserPopoutSurface = window.createBrowserPopoutSurface({
     onShow: () => {
       lastForegroundSignature = null
@@ -7560,6 +8572,10 @@ header.navheader h1 {
     frame.setAttribute("data-pinokio-inject", serialized)
   }
   const create_iframe = (name, href, injectDescriptors = []) => {
+    if (showNetworkSharingRequired(href)) {
+      return
+    }
+    clearBrowserviewNetworkStatus()
     document.querySelectorAll(".menu-container .selected").forEach((el) => {
       el.classList.remove("selected")
     })
@@ -7645,6 +8661,113 @@ header.navheader h1 {
       }
     })
   }
+  const NETWORK_STATUS_SPINNER_HTML = `
+  <span class="install-status-spinner" aria-hidden="true">
+    <span class="install-status-grid-anchor install-status-grid-anchor-1"></span>
+    <span class="install-status-grid-anchor install-status-grid-anchor-2"></span>
+    <span class="install-status-grid-anchor install-status-grid-anchor-3"></span>
+    <span class="install-status-grid-anchor install-status-grid-anchor-4"></span>
+    <span class="install-status-grid-chaser"></span>
+  </span>`
+  const browserviewNetworkStatusElement = () => {
+    return document.getElementById("browserview-network-status")
+  }
+  const formatNetworkStatusRoute = (href) => {
+    try {
+      const parsed = new URL(href, window.location.href)
+      const targetHost = `${parsed.hostname}${parsed.port ? `:${parsed.port}` : ""}`
+      if (requiresNetworkSharing(href)) {
+        return `${targetHost} -> ${window.location.hostname}`
+      }
+      if (isNetworkSharedHref(href)) {
+        return targetHost
+      }
+    } catch (_) {}
+    return ""
+  }
+  const clearBrowserviewNetworkStatus = () => {
+    const status = browserviewNetworkStatusElement()
+    if (status) {
+      status.hidden = true
+      status.dataset.state = "waiting"
+      status.innerHTML = ""
+    }
+    cancelNetworkSharingSelectionRetry()
+    networkSharingSelectionRetries.clear()
+  }
+  const setBrowserviewNetworkStatus = ({ state = "waiting", title = "", detail = "", route = "", actions = false } = {}) => {
+    const status = browserviewNetworkStatusElement()
+    if (!status) {
+      return
+    }
+    status.hidden = false
+    status.dataset.state = state
+    status.dataset.installSpinnerVariant = "corner-chase"
+    const spinnerHtml = state === "waiting" ? NETWORK_STATUS_SPINNER_HTML : ""
+    const routeHtml = route ? `<div class="browserview-network-status-route">${escapeTabHtml(route)}</div>` : ""
+    const actionsHtml = actions ? `
+      <div class="browserview-network-status-actions">
+        <button type="button" class="btn2 browserview-network-status-primary" data-network-status-action="network">
+          <span>Set Up</span>
+        </button>
+        <button type="button" class="btn2 browserview-network-status-secondary" data-network-status-action="cancel">
+          <span>Cancel</span>
+        </button>
+      </div>` : ""
+    status.innerHTML = `
+      <div class="browserview-network-status-inner">
+        ${spinnerHtml}
+        <div class="browserview-network-status-title">${escapeTabHtml(title)}</div>
+        <div class="browserview-network-status-detail">${escapeTabHtml(detail)}</div>
+        ${routeHtml}
+        ${actionsHtml}
+      </div>`
+    const networkButton = status.querySelector('[data-network-status-action="network"]')
+    if (networkButton) {
+      networkButton.addEventListener("click", (event) => {
+        event.preventDefault()
+        event.stopPropagation()
+        window.location.href = "/network"
+      })
+    }
+    const cancelButton = status.querySelector('[data-network-status-action="cancel"]')
+    if (cancelButton) {
+      cancelButton.addEventListener("click", (event) => {
+        event.preventDefault()
+        event.stopPropagation()
+        clearBrowserviewNetworkStatus()
+      })
+    }
+  }
+  const queryNetworkSharingStatus = async () => {
+    if (networkSharingStatusRequest) {
+      return networkSharingStatusRequest
+    }
+    networkSharingStatusRequest = fetch("/info/network-sharing", { cache: "no-store" })
+      .then(async (response) => {
+        if (!response.ok) {
+          throw new Error(`network sharing status failed: ${response.status}`)
+        }
+        return response.json()
+      })
+      .catch(() => null)
+      .finally(() => {
+        networkSharingStatusRequest = null
+      })
+    return networkSharingStatusRequest
+  }
+  const networkSharingBlockedDetail = (status) => {
+    if (!status) {
+      return null
+    }
+    if (status.installed === false) {
+      return "Network sharing has not finished setup. Set it up, then come back to this app."
+    }
+    if (status.active === false) {
+      return "Network sharing is turned off. Set it up, then come back to this app."
+    }
+    return null
+  }
   const previewClass = "tab-preview"
   const tabMainClass = "tab-main"
   const tabDetailsClass = "tab-details"
@@ -9023,6 +10146,7 @@ const rerenderMenuSection = (container, html) => {
     }
 
     if (!target) {
+      clearBrowserviewNetworkStatus()
       syncActiveNestedPath()
       if (typeof syncLogsSelectedState === "function") {
         syncLogsSelectedState(null)
@@ -9033,15 +10157,92 @@ const rerenderMenuSection = (container, html) => {
       return
     }
 
-	    document.querySelector(".container").classList.add("active")
-	    document.querySelector("aside").classList.remove("active")
+    document.querySelector(".container").classList.add("active")
+    document.querySelector("aside").classList.remove("active")
 
 
-		    // Instantiate a frame with the selected target's href
-	      const targetInjectDescriptors = readLinkInjectDescriptors(target)
-		    if (!target.href) {
-		      return
-		    }
+    // Instantiate a frame with the selected target's href
+    const targetInjectDescriptors = readLinkInjectDescriptors(target)
+    if (!target.href) {
+      return
+    }
+    const automaticDefaultSelection = target.hasAttribute('data-default') && !(eventParam && eventParam.isTrusted)
+    const networkSharingRetryKey = target.getAttribute("target") || target.href
+    if (automaticDefaultSelection && requiresNetworkSharing(target.href)) {
+      const route = formatNetworkStatusRoute(target.href)
+      const retries = networkSharingSelectionRetries.get(networkSharingRetryKey) || 0
+      if (retries === 0) {
+        setBrowserviewNetworkStatus({
+          state: "waiting",
+          title: "Opening Web UI",
+          detail: "Checking network sharing...",
+          route
+        })
+        const status = await queryNetworkSharingStatus()
+        const blockedDetail = networkSharingBlockedDetail(status)
+        if (blockedDetail) {
+          networkSharingSelectionRetries.delete(networkSharingRetryKey)
+          setBrowserviewNetworkStatus({
+            state: "blocked",
+            title: "Network sharing is not ready",
+            detail: blockedDetail,
+            route,
+            actions: true
+          })
+          return
+        }
+      }
+      if (retries < NETWORK_SHARING_SELECTION_RETRY_LIMIT) {
+        networkSharingSelectionRetries.set(networkSharingRetryKey, retries + 1)
+        setBrowserviewNetworkStatus({
+          state: "waiting",
+          title: "Opening Web UI",
+          detail: "Waiting for the network sharing route...",
+          route
+        })
+        scheduleNetworkSharingSelectionRetry()
+        return
+      }
+      setBrowserviewNetworkStatus({
+        state: "blocked",
+        title: "Network sharing is not ready",
+        detail: "The local app is running, but Pinokio has not created a network route for this Web UI yet.",
+        route,
+        actions: true
+      })
+      return
+    }
+    if (automaticDefaultSelection && isNetworkSharedHref(target.href) && !(await canLoadNetworkSharedHref(target.href))) {
+      const route = formatNetworkStatusRoute(target.href)
+      const retries = networkSharingSelectionRetries.get(networkSharingRetryKey) || 0
+      if (retries < NETWORK_SHARING_SELECTION_RETRY_LIMIT) {
+        networkSharingSelectionRetries.set(networkSharingRetryKey, retries + 1)
+        setBrowserviewNetworkStatus({
+          state: "waiting",
+          title: "Opening Web UI",
+          detail: "Waiting for the Web UI to respond...",
+          route
+        })
+        scheduleNetworkSharingSelectionRetry()
+        return
+      }
+      setBrowserviewNetworkStatus({
+        state: "blocked",
+        title: "Web UI is not responding",
+        detail: "Pinokio created the network route, but the Web UI did not respond yet.",
+        route,
+        actions: true
+      })
+      return
+    }
+    clearBrowserviewNetworkStatus()
+    if (showNetworkSharingRequired(target.href)) {
+      if (eventParam) {
+        eventParam.preventDefault()
+        eventParam.stopPropagation()
+      }
+      return
+    }
     //document.querySelector("#location").value = url
 
 //    document.querySelector("#open-location").setAttribute('href', target.href)
@@ -9565,6 +10766,9 @@ const rerenderMenuSection = (container, html) => {
 		  }
 		  window.PinokioOpenLogsPage = async (options = {}) => {
 		    const view = options && options.view === "raw" ? "raw" : "latest"
+		    if (window.PinokioCloseOtherMobilePanels && typeof window.PinokioCloseOtherMobilePanels === "function") {
+		      await window.PinokioCloseOtherMobilePanels("logs")
+		    }
 		    const relativeUrl = buildEmbeddedLogsUrl(view)
 		    const existingLink = Array.from(document.querySelectorAll('.temp-menu .frame-link')).find(isLogsLink)
 		    rememberNonLogsSelection(document.querySelector(".frame-link.selected"))
@@ -9829,21 +11033,68 @@ const rerenderMenuSection = (container, html) => {
 
 
 
-  const mobileMenuQuery = window.matchMedia ? window.matchMedia("(max-width: 768px)") : null
-  const isMobileMenuOpen = () => document.body.classList.contains("mobile-menu-open")
-  const appcanvas = document.querySelector(".appcanvas")
-  const closeWindowButton = document.querySelector("#close-window")
-  const syncMobileBottomNavState = () => {
-    const mobileMenuOpen = isMobileMenuOpen()
-    const communityModeActive = !!(appcanvas && appcanvas.classList.contains("community-mode"))
+	  const mobileMenuQuery = window.matchMedia ? window.matchMedia("(max-width: 768px)") : null
+	  const isMobileMenuOpen = () => document.body.classList.contains("mobile-menu-open")
+	  const appcanvas = document.querySelector(".appcanvas")
+	  const closeWindowButton = document.querySelector("#close-window")
+	  const mobileMenuBackdrop = document.querySelector("[data-mobile-menu-backdrop]")
+	  const isMobilePanelLayout = () => mobileMenuQuery ? mobileMenuQuery.matches : window.innerWidth <= 768
+	  const normalizeMobilePanelName = (value) => {
+	    return value === "logs" || value === "ask-ai" || value === "feed" ? value : ""
+	  }
+	  const closeOtherMobilePanels = async (activePanel) => {
+	    const panel = normalizeMobilePanelName(activePanel)
+	    if (!panel || !isMobilePanelLayout()) {
+	      return
+	    }
+	    if (panel !== "ask-ai") {
+	      const askAiDrawer = window.PinokioAskAiDrawer
+	      if (askAiDrawer && typeof askAiDrawer.close === "function") {
+	        askAiDrawer.close()
+	      }
+	    }
+	    if (panel !== "feed") {
+	      const communityDrawer = window.PinokioCommunityDrawer
+	      if (communityDrawer && typeof communityDrawer.closeMobileMode === "function") {
+	        communityDrawer.closeMobileMode()
+	      } else if (appcanvas && appcanvas.classList.contains("community-mode")) {
+	        const communityModeButton = document.getElementById("community-mode-toggle")
+	        if (communityModeButton) {
+	          communityModeButton.click()
+	        }
+	      }
+	    }
+	    if (panel !== "logs") {
+	      const logsDrawer = window.PinokioLogsDrawer
+	      if (logsDrawer && typeof logsDrawer.close === "function") {
+	        logsDrawer.close()
+	      }
+	      if (
+	        window.PinokioIsLogsPageSelected &&
+	        typeof window.PinokioIsLogsPageSelected === "function" &&
+	        window.PinokioIsLogsPageSelected() &&
+	        window.PinokioCloseLogsPage &&
+	        typeof window.PinokioCloseLogsPage === "function"
+	      ) {
+	        await window.PinokioCloseLogsPage()
+	      }
+	    }
+	  }
+	  window.PinokioCloseOtherMobilePanels = closeOtherMobilePanels
+	  const syncMobileBottomNavState = () => {
+	    const mobileMenuOpen = isMobileMenuOpen()
+	    const communityModeActive = !!(appcanvas && appcanvas.classList.contains("community-mode"))
     const askAiOpen = !!(appcanvas && appcanvas.classList.contains("panel-open"))
     const mobileMenuFallback = document.querySelector(".mobile-menu-fallback")
     const closeSectionVisible = !!(closeWindowButton && !closeWindowButton.classList.contains("hidden"))
 
-    document.querySelectorAll(".mobile-nav-menu").forEach((button) => {
-      button.classList.toggle("selected", mobileMenuOpen)
-      button.setAttribute("aria-expanded", mobileMenuOpen ? "true" : "false")
-    })
+	    document.querySelectorAll(".mobile-nav-menu").forEach((button) => {
+	      button.classList.toggle("selected", mobileMenuOpen)
+	      button.setAttribute("aria-expanded", mobileMenuOpen ? "true" : "false")
+	    })
+	    if (mobileMenuBackdrop) {
+	      mobileMenuBackdrop.hidden = !mobileMenuOpen
+	    }
     document.querySelectorAll(".mobile-nav-community").forEach((button) => {
       button.classList.toggle("selected", communityModeActive)
       button.setAttribute("aria-pressed", communityModeActive ? "true" : "false")
@@ -9864,26 +11115,29 @@ const rerenderMenuSection = (container, html) => {
       mobileMenuFallback.setAttribute("aria-hidden", showFallback ? "false" : "true")
     }
   }
-  const setMobileMenuOpen = (next, options = {}) => {
-    const shouldOpen = !!next
-    if (!mobileMenuQuery || !mobileMenuQuery.matches) {
-      document.body.classList.remove("mobile-menu-open")
-      syncMobileBottomNavState()
-      return
-    }
-    document.body.classList.toggle("mobile-menu-open", shouldOpen)
-    if (shouldOpen && !options.skipRefresh) {
-      refresh(false, { nodelay: true })
-    }
+	  const setMobileMenuOpen = (next, options = {}) => {
+	    const shouldOpen = !!next
+	    if (!mobileMenuQuery || !mobileMenuQuery.matches) {
+	      document.body.classList.remove("mobile-menu-open")
+	      document.documentElement.classList.remove("mobile-menu-open")
+	      syncMobileBottomNavState()
+	      return
+	    }
+	    document.body.classList.toggle("mobile-menu-open", shouldOpen)
+	    document.documentElement.classList.toggle("mobile-menu-open", shouldOpen)
+	    if (shouldOpen && !options.skipRefresh) {
+	      refresh(false, { nodelay: true })
+	    }
     syncMobileBottomNavState()
   }
 
-  const handleMobileMenuQueryChange = () => {
-    if (!mobileMenuQuery || !mobileMenuQuery.matches) {
-      document.body.classList.remove("mobile-menu-open")
-    }
-    syncMobileBottomNavState()
-  }
+	  const handleMobileMenuQueryChange = () => {
+	    if (!mobileMenuQuery || !mobileMenuQuery.matches) {
+	      document.body.classList.remove("mobile-menu-open")
+	      document.documentElement.classList.remove("mobile-menu-open")
+	    }
+	    syncMobileBottomNavState()
+	  }
   if (mobileMenuQuery && typeof mobileMenuQuery.addEventListener === "function") {
     mobileMenuQuery.addEventListener("change", handleMobileMenuQueryChange)
   } else if (mobileMenuQuery && typeof mobileMenuQuery.addListener === "function") {
@@ -9899,14 +11153,19 @@ const rerenderMenuSection = (container, html) => {
       setMobileMenuOpen(!isMobileMenuOpen())
     })
   }
-  if (document.querySelector("#menu-mobile-close")) {
-    document.querySelector("#menu-mobile-close").addEventListener("click", (e) => {
-      e.preventDefault()
-      setMobileMenuOpen(false, { skipRefresh: true })
-    })
-  }
-  document.querySelectorAll("[data-mobile-proxy]").forEach((trigger) => {
-    trigger.addEventListener("click", (event) => {
+	  if (document.querySelector("#menu-mobile-close")) {
+	    document.querySelector("#menu-mobile-close").addEventListener("click", (e) => {
+	      e.preventDefault()
+	      setMobileMenuOpen(false, { skipRefresh: true })
+	    })
+	  }
+	  if (mobileMenuBackdrop) {
+	    mobileMenuBackdrop.addEventListener("click", () => {
+	      setMobileMenuOpen(false, { skipRefresh: true })
+	    })
+	  }
+	  document.querySelectorAll("[data-mobile-proxy]").forEach((trigger) => {
+	    trigger.addEventListener("click", async (event) => {
       const selector = trigger.getAttribute("data-mobile-proxy")
       if (!selector) {
         return
@@ -9919,10 +11178,16 @@ const rerenderMenuSection = (container, html) => {
       if (trigger.getAttribute("data-mobile-close-menu") === "true" && isMobileMenuOpen()) {
         setMobileMenuOpen(false, { skipRefresh: true })
       }
+      await closeOtherMobilePanels(trigger.getAttribute("data-mobile-panel"))
       target.click()
-      setTimeout(syncMobileBottomNavState, 0)
-    })
-  })
+	      setTimeout(syncMobileBottomNavState, 0)
+	    })
+	  })
+	  document.addEventListener("keydown", (event) => {
+	    if (event.key === "Escape" && isMobileMenuOpen()) {
+	      setMobileMenuOpen(false, { skipRefresh: true })
+	    }
+	  })
   if (appcanvas && typeof MutationObserver === "function") {
     const mobileNavObserver = new MutationObserver(() => {
       syncMobileBottomNavState()
@@ -10888,11 +12153,13 @@ const rerenderMenuSection = (container, html) => {
                 refresh()
               }
             } else {
+              const launchLink = getTabLink(rawName) || findFrameLinkByTarget(rawName)
+              const launchHref = launchLink && launchLink.href && requiresNetworkSharing(event.data.launch.href) && !requiresNetworkSharing(launchLink.href) ? launchLink.href : event.data.launch.href
               const frameExists = Array.from(document.querySelectorAll("main.browserview iframe")).some((frame) => {
                 return frame.name === rawName
               })
               if (!frameExists) {
-                create_iframe(rawName, event.data.launch.href)
+                create_iframe(rawName, launchHref)
               }
               refresh()
             }
@@ -14507,14 +15774,15 @@ const rerenderMenuSection = (container, html) => {
     })
   }
 
-  const setChip = (name, visible, text) => {
-    roots.forEach((root) => {
-      const chip = root.querySelector(`[data-resource-chip="${name}"]`)
-      if (!chip) return
-      chip.textContent = text
-      chip.classList.toggle("hidden", !visible)
-    })
-  }
+	  const setChip = (name, visible, text) => {
+	    roots.forEach((root) => {
+	      const chip = root.querySelector(`[data-resource-chip="${name}"]`)
+	      if (!chip) return
+	      const alwaysVisible = root.getAttribute("data-resource-always-visible") === "true"
+	      chip.textContent = text
+	      chip.classList.toggle("hidden", !(visible || alwaysVisible))
+	    })
+	  }
 
   const updateFromUsage = (usage) => {
     if (!usage || !usage.ok) {
@@ -14531,9 +15799,10 @@ const rerenderMenuSection = (container, html) => {
     const cpu = metrics.cpu || {}
     const vram = metrics.vram || {}
 
-    setChip("ram", !!(ram.enabled && ram.available), `RAM ${ram.formatted || "--"}`)
-    setChip("cpu", !!(cpu.enabled && cpu.available && cpu.percent != null), `CPU ${cpu.percent}%`)
-    setChip("vram", !!(vram.enabled && vram.available), `VRAM ${vram.formatted || "--"}`)
+	    const cpuPercent = Number(cpu.percent)
+	    setChip("ram", !!(ram.enabled && ram.available), `RAM ${ram.formatted || "--"}`)
+	    setChip("cpu", !!(cpu.enabled && cpu.available && Number.isFinite(cpuPercent)), `CPU ${Number.isFinite(cpuPercent) ? `${cpuPercent}%` : "--"}`)
+	    setChip("vram", !!(vram.enabled && vram.available), `VRAM ${vram.formatted || "--"}`)
 
     if (!usage.running) {
       setStatus("No running app process")
@@ -15075,6 +16344,9 @@ document.addEventListener("DOMContentLoaded", () => {
   const setOpen = (next, opts = {}) => {
     open = !!next
     if (open) {
+      if (window.PinokioCloseOtherMobilePanels && typeof window.PinokioCloseOtherMobilePanels === "function") {
+        window.PinokioCloseOtherMobilePanels("ask-ai")
+      }
       const eventDrawer = window.PinokioEventDrawer
       if (eventDrawer && typeof eventDrawer.close === "function") {
         eventDrawer.close()
@@ -16306,6 +17578,9 @@ document.addEventListener("DOMContentLoaded", () => {
 
   const setOpen = (next, options = {}) => {
     open = !!next
+    if (open && window.PinokioCloseOtherMobilePanels && typeof window.PinokioCloseOtherMobilePanels === "function") {
+      window.PinokioCloseOtherMobilePanels("logs")
+    }
     if (appcanvas) {
       appcanvas.classList.toggle("logs-open", open)
     }
@@ -16534,6 +17809,9 @@ document.addEventListener("DOMContentLoaded", () => {
       return
     }
     communityMode = nextMode
+    if (communityMode && window.PinokioCloseOtherMobilePanels && typeof window.PinokioCloseOtherMobilePanels === "function") {
+      window.PinokioCloseOtherMobilePanels("feed")
+    }
     appcanvas.classList.toggle("community-mode", communityMode)
     if (communityMode) {
       setExpanded(false)
@@ -17120,6 +18398,15 @@ document.addEventListener("DOMContentLoaded", () => {
   setOpen(open, { persist: false })
   updateState()
   syncCommunityModeFromUrl()
+  window.PinokioCommunityDrawer = {
+    closeMobileMode: () => setCommunityMode(false),
+    close: (opts = {}) => {
+      setCommunityMode(false)
+      setOpen(false, opts)
+    },
+    isMobileMode: () => communityMode,
+    isOpen: () => open
+  }
 
   if (resizer) {
     let isResizing = false