pinokiod 7.3.0 → 7.3.3

package/server/views/app.ejs

@@ -22,11 +22,11 @@
 <style>
 :root {
   --assist-surface-light: var(--pinokio-chrome-accent-bg-light);
-  --assist-surface-light-open: rgba(255, 255, 255, 0.65);
+  --assist-surface-light-open: rgba(15, 23, 42, 0.92);
   --assist-text-light: var(--pinokio-chrome-accent-fg-light);
   --assist-text-light-open: #475569;
   --assist-surface-dark: var(--pinokio-chrome-accent-bg-dark);
-  --assist-surface-dark-open: rgba(15, 17, 21, 0.7);
+  --assist-surface-dark-open: rgba(255, 255, 255, 0.14);
   --assist-text-dark: var(--pinokio-chrome-accent-fg-dark);
   --assist-text-dark-open: rgba(226, 232, 240, 0.84);
 }
@@ -34,6 +34,257 @@ body.dark #devtab.selected {
   border: none;
   background: rgb(27, 28, 29) !important;
 }
+.app-header-identity {
+  position: relative;
+  flex: 1 1 auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  width: auto;
+  height: 30px;
+  padding: 0 14px;
+  min-width: 0;
+  max-width: none;
+  margin: 0 10px 0 4px;
+  box-sizing: border-box;
+  border: 1px solid rgba(15, 23, 42, 0.08);
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.7);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.9),
+    0 1px 2px rgba(15, 23, 42, 0.04);
+  color: #0f172a;
+  font-size: 13px;
+  font-weight: 700;
+  line-height: 1.1;
+  pointer-events: none;
+  overflow: visible;
+}
+body.dark .app-header-identity {
+  border-color: rgba(255, 255, 255, 0.08);
+  background: rgba(16, 18, 24, 0.72);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.06),
+    0 1px 2px rgba(2, 6, 23, 0.35);
+  color: rgba(248, 250, 252, 0.94);
+}
+.app-header-identity-icon {
+  width: 18px;
+  height: 18px;
+  flex: 0 0 18px;
+  object-fit: contain;
+  display: block;
+}
+.app-header-identity-title {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.app-header-identity-separator {
+  width: 3px;
+  height: 3px;
+  flex: 0 0 3px;
+  border-radius: 999px;
+  background: rgba(100, 116, 139, 0.48);
+}
+body.dark .app-header-identity-separator {
+  background: rgba(148, 163, 184, 0.6);
+}
+body.app-page header.navheader h1 > .flexible {
+  flex: 0 0 0;
+  min-width: 0;
+}
+.resource-usage {
+  position: relative;
+  flex: 0 0 auto;
+  min-width: 0;
+  display: inline-flex;
+  align-items: center;
+  pointer-events: auto;
+}
+.resource-usage-trigger {
+  appearance: none;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  height: 22px;
+  min-width: 0;
+  padding: 0 7px;
+  margin: 0;
+  border-radius: 999px;
+  font: inherit;
+  line-height: 1;
+  cursor: pointer;
+  transition: background 0.15s ease, color 0.15s ease;
+}
+.resource-usage-trigger::after {
+  content: "";
+  width: 0;
+  height: 0;
+  flex: 0 0 auto;
+  margin-left: -2px;
+  border-left: 3.5px solid transparent;
+  border-right: 3.5px solid transparent;
+  border-top: 4px solid rgba(71, 85, 105, 0.58);
+  transform-origin: 50% 40%;
+  transition: transform 0.15s ease, border-top-color 0.15s ease;
+}
+.resource-usage-trigger:hover,
+.resource-usage-trigger[aria-expanded="true"] {
+  background: rgba(15, 23, 42, 0.055);
+}
+body.dark .resource-usage-trigger:hover,
+body.dark .resource-usage-trigger[aria-expanded="true"] {
+  background: rgba(255, 255, 255, 0.07);
+}
+.resource-usage-trigger:hover::after,
+.resource-usage-trigger[aria-expanded="true"]::after {
+  border-top-color: rgba(71, 85, 105, 0.82);
+}
+body.dark .resource-usage-trigger::after {
+  border-top-color: rgba(203, 213, 225, 0.58);
+}
+body.dark .resource-usage-trigger:hover::after,
+body.dark .resource-usage-trigger[aria-expanded="true"]::after {
+  border-top-color: rgba(248, 250, 252, 0.84);
+}
+.resource-usage-trigger[aria-expanded="true"]::after {
+  transform: rotate(180deg);
+}
+.resource-usage-trigger:focus-visible {
+  outline: 2px solid rgba(10, 132, 255, 0.55);
+  outline-offset: 4px;
+  border-radius: 999px;
+}
+.resource-chip {
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+  color: rgba(71, 85, 105, 0.76);
+  font-size: 11px;
+  font-weight: 650;
+  line-height: 1;
+  white-space: nowrap;
+}
+body.dark .resource-chip {
+  color: rgba(203, 213, 225, 0.7);
+}
+.resource-chip--cpu,
+.resource-chip--ram,
+.resource-chip--vram {
+  color: rgba(71, 85, 105, 0.62);
+}
+body.dark .resource-chip--cpu,
+body.dark .resource-chip--ram,
+body.dark .resource-chip--vram {
+  color: rgba(203, 213, 225, 0.62);
+}
+.resource-usage-popover {
+  position: absolute;
+  top: calc(100% + 9px);
+  right: 0;
+  width: 236px;
+  padding: 8px 0;
+  border: 1px solid rgba(15, 23, 42, 0.1);
+  border-radius: 10px;
+  background: rgba(255, 255, 255, 0.98);
+  box-shadow: 0 16px 42px rgba(15, 23, 42, 0.14);
+  color: #0f172a;
+  z-index: 10000020;
+}
+body.dark .resource-usage-popover {
+  border-color: rgba(255, 255, 255, 0.1);
+  background: rgba(20, 22, 28, 0.98);
+  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.48);
+  color: rgba(248, 250, 252, 0.94);
+}
+.resource-usage-popover.hidden {
+  display: none;
+}
+.resource-usage-popover-head {
+  padding: 4px 12px 8px;
+  color: rgba(71, 85, 105, 0.72);
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}
+body.dark .resource-usage-popover-head {
+  color: rgba(203, 213, 225, 0.7);
+}
+.resource-toggle {
+  appearance: none;
+  border: 0;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-height: 34px;
+  padding: 0 12px;
+  margin: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+.resource-toggle:hover {
+  background: rgba(15, 23, 42, 0.045);
+}
+body.dark .resource-toggle:hover {
+  background: rgba(255, 255, 255, 0.055);
+}
+.resource-toggle-label {
+  flex: 1 1 auto;
+  min-width: 0;
+  color: rgba(15, 23, 42, 0.88);
+  font-size: 13px;
+  font-weight: 650;
+}
+body.dark .resource-toggle-label {
+  color: rgba(248, 250, 252, 0.9);
+}
+.resource-toggle-track {
+  position: relative;
+  flex: 0 0 30px;
+  width: 30px;
+  height: 18px;
+  border-radius: 999px;
+  background: rgba(100, 116, 139, 0.26);
+  transition: background 0.15s ease;
+}
+.resource-toggle-thumb {
+  position: absolute;
+  left: 2px;
+  top: 2px;
+  width: 14px;
+  height: 14px;
+  border-radius: 999px;
+  background: #fff;
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.22);
+  transition: transform 0.15s ease;
+}
+.resource-toggle[aria-checked="true"] .resource-toggle-track {
+  background: #25764a;
+}
+.resource-toggle[aria-checked="true"] .resource-toggle-thumb {
+  transform: translateX(12px);
+}
+.resource-usage-status {
+  padding: 8px 12px 3px;
+  color: rgba(100, 116, 139, 0.8);
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 1.25;
+}
+body.dark .resource-usage-status {
+  color: rgba(148, 163, 184, 0.82);
+}
 .config-info {
   display: flex;
   align-items: center;
@@ -46,19 +297,67 @@ body.dark .snapshot-comment {
 #editortab {
   color: royalblue;
 }
-body.dark #layout-toggle {
-  color: white;
+#sidebar-toggle {
+  color: #0f172a;
+  position: relative;
+  width: 48px;
+  height: 30px;
+  padding: 0;
+  border-radius: 9px;
+  box-sizing: border-box;
 }
-#layout-toggle {
-  padding: 6px 10px;
-  border: none;
-  background: none;
-  cursor: pointer;
-  font-size: 16px;
+body.dark #sidebar-toggle {
+  color: rgba(248, 250, 252, 0.92);
 }
-#layout-toggle:hover,
-#layout-toggle:hover i {
-  color: royalblue;
+#sidebar-toggle[aria-expanded="true"] {
+  background: rgba(15, 23, 42, 0.08);
+  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.06);
+}
+body.dark #sidebar-toggle[aria-expanded="true"] {
+  background: rgba(255, 255, 255, 0.1);
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
+}
+.sidebar-toggle-glyph {
+  width: 19px;
+  height: 15px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.sidebar-toggle-frame {
+  position: relative;
+  width: 18px;
+  height: 14px;
+  border: 1.7px solid currentColor;
+  border-radius: 3px;
+  box-sizing: border-box;
+}
+.sidebar-toggle-panel {
+  position: absolute;
+  left: 2px;
+  top: 2px;
+  bottom: 2px;
+  width: 4px;
+  border-radius: 1px;
+  background: currentColor;
+  transition: opacity 0.15s ease, background 0.15s ease, border-color 0.15s ease;
+}
+.sidebar-toggle-content {
+  position: absolute;
+  left: 8px;
+  right: 3px;
+  top: 3px;
+  height: 1.5px;
+  border-radius: 999px;
+  background: currentColor;
+  opacity: 0.32;
+  box-shadow: 0 3.8px 0 currentColor, 0 7.6px 0 currentColor;
+}
+#sidebar-toggle[aria-expanded="false"] .sidebar-toggle-panel {
+  background: transparent;
+  outline: 1.5px solid currentColor;
+  outline-offset: -1px;
+  opacity: 0.35;
 }
 #devtab {
   align-items: center;
@@ -492,49 +791,388 @@ body.dark .community-drawer-location-textarea {
 body.dark .community-drawer-empty {
   color: rgba(255,255,255,0.7);
 }
-.community-drawer-empty-head {
-  display: flex;
-  align-items: center;
-  gap: 10px;
+.community-drawer-empty-head {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.community-drawer-empty-title {
+  font-size: 14px;
+  font-weight: 700;
+  color: rgba(15, 23, 42, 0.92);
+}
+body.dark .community-drawer-empty-title {
+  color: rgba(248, 250, 252, 0.95);
+}
+.community-drawer-empty-note {
+  font-size: 12px;
+  line-height: 1.4;
+}
+.community-drawer-empty-icon {
+  width: 28px;
+  height: 28px;
+  border-radius: 8px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(15, 23, 42, 0.08);
+  color: rgba(15, 23, 42, 0.6);
+}
+body.dark .community-drawer-empty-icon {
+  background: rgba(255, 255, 255, 0.08);
+  color: rgba(255, 255, 255, 0.7);
+}
+.community-drawer-empty .btn {
+  align-self: flex-start;
+}
+.community-frame {
+  width: 100%;
+  height: 100%;
+  flex: 1 1 auto;
+  border: 0;
+  background: white;
+}
+body.dark .community-frame {
+  background: #0b1220;
+}
+.app-logs-drawer {
+  display: none;
+  flex: 0 0 auto;
+  width: var(--app-logs-width, 460px);
+  min-width: 280px;
+  min-height: 0;
+  border-left: 1px solid rgba(0,0,0,0.08);
+  background: #f8fafc;
+}
+body.dark .app-logs-drawer {
+  border-left-color: rgba(255,255,255,0.08);
+  background: #0f1115;
+}
+.appcanvas.logs-open .app-logs-drawer {
+  display: flex;
+}
+.app-logs-drawer-inner {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  flex: 1 1 auto;
+}
+.app-logs-drawer-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 8px 10px;
+  border-bottom: 1px solid rgba(0,0,0,0.08);
+  background: rgba(255,255,255,0.72);
+  backdrop-filter: blur(6px);
+}
+body.dark .app-logs-drawer-bar {
+  border-bottom-color: rgba(255,255,255,0.08);
+  background: rgba(15, 17, 21, 0.74);
+}
+.app-logs-drawer-title {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  font-weight: 700;
+}
+.app-logs-drawer-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+.app-logs-drawer-actions .btn2 {
+  padding: 4px;
+  font-size: 12px;
+  min-width: 28px;
+  height: 28px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: row;
+}
+.app-logs-drawer-actions .btn2 i {
+  margin: 0;
+  font-size: 12px;
+}
+.app-logs-body {
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 10px;
+  overflow: hidden;
+}
+.app-logs-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+.app-logs-toolbar .btn {
+  font-size: 12px;
+  padding: 6px 9px;
+}
+.app-logs-status {
+  font-size: 12px;
+  line-height: 1.4;
+  color: rgba(15, 23, 42, 0.72);
+}
+body.dark .app-logs-status {
+  color: rgba(248, 250, 252, 0.72);
+}
+.app-logs-error-callout {
+  display: flex;
+  align-items: flex-start;
+  gap: 9px;
+  padding: 9px;
+  border: 1px solid rgba(220, 38, 38, 0.18);
+  border-radius: 6px;
+  background: rgba(254, 242, 242, 0.85);
+  color: rgba(127, 29, 29, 0.95);
+  font-size: 12px;
+  line-height: 1.4;
+}
+.app-logs-error-callout i {
+  margin-top: 2px;
+  color: rgba(185, 28, 28, 0.9);
+}
+.app-logs-error-callout-title {
+  font-weight: 700;
+}
+.app-logs-error-callout-message {
+  overflow-wrap: anywhere;
+}
+body.dark .app-logs-error-callout {
+  border-color: rgba(248, 113, 113, 0.24);
+  background: rgba(127, 29, 29, 0.18);
+  color: rgba(254, 226, 226, 0.92);
+}
+body.dark .app-logs-error-callout i {
+  color: rgba(248, 113, 113, 0.92);
+}
+.app-logs-summary {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+}
+.app-logs-summary-item {
+  border: 1px solid rgba(15, 23, 42, 0.08);
+  border-radius: 6px;
+  padding: 8px;
+  background: rgba(255,255,255,0.68);
+  min-width: 0;
+}
+body.dark .app-logs-summary-item {
+  border-color: rgba(255,255,255,0.08);
+  background: rgba(255,255,255,0.04);
+}
+.app-logs-summary-label {
+  font-size: 10px;
+  text-transform: uppercase;
+  color: rgba(15, 23, 42, 0.56);
+  letter-spacing: 0;
+}
+body.dark .app-logs-summary-label {
+  color: rgba(248, 250, 252, 0.56);
+}
+.app-logs-summary-value {
+  margin-top: 3px;
+  font-size: 13px;
+  font-weight: 700;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.app-logs-section-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+.app-logs-section-chip {
+  max-width: 100%;
+  border: 1px solid rgba(15, 23, 42, 0.12);
+  border-radius: 999px;
+  padding: 4px 7px;
+  font-size: 11px;
+  color: rgba(15, 23, 42, 0.74);
+  background: rgba(255,255,255,0.72);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+body.dark .app-logs-section-chip {
+  border-color: rgba(255,255,255,0.12);
+  color: rgba(248, 250, 252, 0.74);
+  background: rgba(255,255,255,0.05);
+}
+.app-logs-report-output {
+  flex: 1 1 auto;
+  min-height: 180px;
+  margin: 0;
+  padding: 10px;
+  overflow: auto;
+  border: 1px solid rgba(15, 23, 42, 0.1);
+  border-radius: 6px;
+  background: #ffffff;
+  color: rgba(15, 23, 42, 0.9);
+  font-size: 11px;
+  line-height: 1.45;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+body.dark .app-logs-report-output {
+  border-color: rgba(255,255,255,0.1);
+  background: #090b10;
+  color: rgba(248, 250, 252, 0.9);
+}
+.appcanvas > aside .menu-actions #logs-toggle.selected,
+.appcanvas > aside .menu-actions #logs-toggle.selected:hover,
+.appcanvas > aside .menu-actions #logs-toggle.selected:focus-visible,
+.appcanvas.logs-open .menu-actions #logs-toggle,
+.appcanvas.logs-open .menu-actions #logs-toggle:hover,
+.appcanvas.logs-open .menu-actions #logs-toggle:focus-visible,
+.appcanvas.logs-open .menu-actions #logs-toggle.selected {
+  background: var(--assist-surface-light-open) !important;
+  color: #fff !important;
+  box-shadow: none;
+}
+body.dark .appcanvas > aside .menu-actions #logs-toggle.selected,
+body.dark .appcanvas > aside .menu-actions #logs-toggle.selected:hover,
+body.dark .appcanvas > aside .menu-actions #logs-toggle.selected:focus-visible,
+body.dark .appcanvas.logs-open .menu-actions #logs-toggle,
+body.dark .appcanvas.logs-open .menu-actions #logs-toggle:hover,
+body.dark .appcanvas.logs-open .menu-actions #logs-toggle:focus-visible,
+body.dark .appcanvas.logs-open .menu-actions #logs-toggle.selected {
+  background: var(--assist-surface-dark-open) !important;
+  color: #fff !important;
+  box-shadow: none;
 }
-.community-drawer-empty-title {
-  font-size: 14px;
-  font-weight: 700;
-  color: rgba(15, 23, 42, 0.92);
+.appcanvas > aside .menu-actions #logs-toggle .tab {
+  width: 100%;
+  position: relative;
+  z-index: 1;
 }
-body.dark .community-drawer-empty-title {
-  color: rgba(248, 250, 252, 0.95);
+.appcanvas > aside .menu-actions #logs-toggle.has-new {
+  position: relative;
+  animation: logsAttentionFlashLight 1.05s steps(2, end) infinite;
 }
-.community-drawer-empty-note {
-  font-size: 12px;
-  line-height: 1.4;
+body.dark .appcanvas > aside .menu-actions #logs-toggle.has-new {
+  animation-name: logsAttentionFlashDark;
 }
-.community-drawer-empty-icon {
-  width: 28px;
-  height: 28px;
-  border-radius: 8px;
+.logs-new-badge {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  background: rgba(15, 23, 42, 0.08);
-  color: rgba(15, 23, 42, 0.6);
+  flex: 0 0 auto;
+  box-sizing: border-box;
+  min-width: 24px;
+  height: 16px;
+  max-height: 16px;
+  margin-left: auto;
+  border: 1px solid rgba(255,255,255,0.28);
+  border-radius: 5px;
+  padding: 0 5px;
+  background: #b91c1c;
+  color: #fff;
+  font-size: 9px;
+  line-height: 14px;
+  font-weight: 750;
+  letter-spacing: 0;
+  text-transform: uppercase;
+  box-shadow: none;
 }
-body.dark .community-drawer-empty-icon {
-  background: rgba(255, 255, 255, 0.08);
-  color: rgba(255, 255, 255, 0.7);
+body.dark .logs-new-badge {
+  background: #dc2626;
+  color: #fff;
+  border-color: rgba(255,255,255,0.22);
 }
-.community-drawer-empty .btn {
-  align-self: flex-start;
+.mobile-nav-logs.has-new {
+  position: relative;
+  animation: logsMobileAttentionFlashLight 1.05s steps(2, end) infinite;
 }
-.community-frame {
-  width: 100%;
-  height: 100%;
-  flex: 1 1 auto;
-  border: 0;
-  background: white;
+body.dark .mobile-nav-logs.has-new {
+  animation-name: logsMobileAttentionFlashDark;
 }
-body.dark .community-frame {
-  background: #0b1220;
+.mobile-nav-logs.has-new::after {
+  content: "";
+  position: absolute;
+  top: 7px;
+  right: 7px;
+  width: 7px;
+  height: 7px;
+  border-radius: 999px;
+  background: #dc2626;
+  box-shadow: 0 0 0 2px #fff;
+  transform-origin: center;
+}
+body.dark .mobile-nav-logs.has-new::after {
+  box-shadow: 0 0 0 2px #0f1115;
+}
+@keyframes logsAttentionFlashLight {
+  0%, 100% {
+    --assist-surface-light: var(--pinokio-chrome-accent-bg-light);
+    --assist-text-light: var(--pinokio-chrome-accent-fg-light);
+  }
+  50% {
+    --assist-surface-light: var(--pinokio-chrome-accent-fg-light);
+    --assist-text-light: var(--pinokio-chrome-accent-bg-light);
+  }
+}
+@keyframes logsAttentionFlashDark {
+  0%, 100% {
+    --assist-surface-dark: var(--pinokio-chrome-accent-bg-dark);
+    --assist-text-dark: var(--pinokio-chrome-accent-fg-dark);
+  }
+  50% {
+    --assist-surface-dark: var(--pinokio-chrome-accent-fg-dark);
+    --assist-text-dark: var(--pinokio-chrome-accent-bg-dark);
+  }
+}
+@keyframes logsMobileAttentionFlashLight {
+  0%, 100% {
+    background: transparent;
+    color: #64748b;
+  }
+  50% {
+    background: #64748b;
+    color: #fff;
+  }
+}
+@keyframes logsMobileAttentionFlashDark {
+  0%, 100% {
+    background: transparent;
+    color: rgba(148, 163, 184, 0.9);
+  }
+  50% {
+    background: rgba(148, 163, 184, 0.9);
+    color: #0f1115;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .appcanvas > aside .menu-actions #logs-toggle.has-new,
+  .mobile-nav-logs.has-new {
+    animation: none;
+  }
+  .appcanvas > aside .menu-actions #logs-toggle.has-new {
+    --assist-surface-light: var(--pinokio-chrome-accent-fg-light);
+    --assist-text-light: var(--pinokio-chrome-accent-bg-light);
+  }
+  body.dark .appcanvas > aside .menu-actions #logs-toggle.has-new {
+    --assist-surface-dark: var(--pinokio-chrome-accent-fg-dark);
+    --assist-text-dark: var(--pinokio-chrome-accent-bg-dark);
+  }
+  .mobile-nav-logs.has-new {
+    background: #64748b;
+    color: #fff;
+  }
+  body.dark .mobile-nav-logs.has-new {
+    background: rgba(148, 163, 184, 0.9);
+    color: #0f1115;
+  }
 }
 .ask-ai-drawer {
   display: none;
@@ -681,7 +1319,7 @@ body.dark .ask-ai-drawer-empty {
 }
 .ask-ai-drawer-empty-title {
   font-size: 14px;
-  font-weight: 700;
+  font-weight: 600;
   color: rgba(15, 23, 42, 0.92);
 }
 body.dark .ask-ai-drawer-empty-title {
@@ -699,7 +1337,7 @@ body.dark .ask-ai-drawer-empty-title {
 }
 .ask-ai-drawer-picker-group-label {
   font-size: 11px;
-  font-weight: 700;
+  font-weight: 600;
   letter-spacing: 0.04em;
   text-transform: uppercase;
   opacity: 0.7;
@@ -711,8 +1349,8 @@ body.dark .ask-ai-drawer-empty-title {
   gap: 10px;
   text-align: left;
   border: 1px solid rgba(0,0,0,0.12);
-  border-radius: 8px;
-  padding: 10px 12px;
+  border-radius: 6px;
+  padding: 8px 10px;
   background: rgba(255,255,255,0.9);
   color: rgba(15, 23, 42, 0.95);
   cursor: pointer;
@@ -750,11 +1388,15 @@ body.dark .ask-ai-drawer-picker-option:hover {
 }
 .ask-ai-drawer-picker-copy {
   min-width: 0;
+  flex: 1 1 auto;
 }
 .ask-ai-drawer-picker-name {
   font-size: 13px;
-  font-weight: 700;
+  font-weight: 500;
   line-height: 1.2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 .ask-ai-drawer-picker-meta {
   font-size: 11px;
@@ -916,7 +1558,96 @@ body.dark .event-launch-frame {
 }
 .appcanvas.vertical {
   flex-direction: row;
-  --appcanvas-sidebar-width: 150px;
+  --appcanvas-sidebar-width: 252px;
+}
+.appcanvas.vertical.dev-workspace {
+  --appcanvas-sidebar-width: 260px;
+}
+.appcanvas.vertical.dev-workspace .menu-container {
+  overflow: visible;
+}
+.appcanvas > aside .workspace-mode-switch {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 2px;
+  flex: 0 0 auto;
+  min-width: 0;
+  width: calc(100% - 16px);
+  margin: 0 8px 0 8px;
+  padding: 3px;
+  border-radius: 7px;
+  border: 1px solid rgba(15, 23, 42, 0.055);
+  background: rgba(15, 23, 42, 0.035);
+  box-sizing: border-box;
+}
+body.dark .appcanvas > aside .workspace-mode-switch {
+  border-color: rgba(255, 255, 255, 0.075);
+  background: rgba(255, 255, 255, 0.045);
+}
+.workspace-mode-link {
+  flex: 1 1 0;
+  min-width: 0;
+  min-height: 26px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 0 8px;
+  border-radius: 5px;
+  color: var(--pinokio-sidebar-tab-muted);
+  text-decoration: none;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 1;
+  box-sizing: border-box;
+}
+.workspace-mode-link:hover {
+  color: #111827;
+  background: rgba(255, 255, 255, 0.44);
+}
+.workspace-mode-link.selected {
+  color: #111827;
+  background: rgba(255, 255, 255, 0.76);
+  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.055);
+}
+body.dark .workspace-mode-link.selected {
+  color: rgba(248, 250, 252, 0.94);
+  background: rgba(255, 255, 255, 0.09);
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.075);
+}
+body.dark .workspace-mode-link:hover {
+  color: rgba(248, 250, 252, 0.94);
+  background: rgba(255, 255, 255, 0.07);
+}
+.workspace-mode-link i {
+  font-size: 11px;
+  line-height: 1;
+}
+.workspace-mode-community-proxy {
+  display: none !important;
+}
+.appcanvas.vertical.dev-workspace #devtab,
+.appcanvas.vertical.dev-workspace #filestab {
+  justify-content: flex-start;
+  border-radius: 6px;
+  color: var(--pinokio-sidebar-tab-muted);
+  background: transparent !important;
+  box-shadow: none;
+}
+.appcanvas.vertical.dev-workspace #devtab.selected,
+.appcanvas.vertical.dev-workspace #filestab.selected {
+  color: var(--app-page-accent, var(--pinokio-sidebar-tab-active-color)) !important;
+  background: var(--app-page-selected-item-bg, var(--pinokio-sidebar-tab-active-bg)) !important;
+  box-shadow: 0 4px 12px var(--pinokio-sidebar-tab-shadow);
+}
+.appcanvas.vertical.dev-workspace #devtab .tab,
+.appcanvas.vertical.dev-workspace #filestab .tab {
+  padding: 0;
+}
+.appcanvas.vertical.dev-workspace #devtab i,
+.appcanvas.vertical.dev-workspace #filestab i {
+  color: inherit;
 }
 .appcanvas.vertical > aside .header-item {
   border-radius: 0;
@@ -947,6 +1678,7 @@ body.dark .event-launch-frame {
   flex-direction: column;
   overflow: hidden;
   width: var(--appcanvas-sidebar-width);
+  box-sizing: border-box;
 }
 .appcanvas.vertical .config-info {
   margin-bottom: 10px;
@@ -1010,6 +1742,8 @@ body.dark .appcanvas.vertical .appcanvas-resizer:focus-visible::before {
 }
 .appcanvas.vertical > aside .header-item {
   max-width: none;
+  width: 100%;
+  box-sizing: border-box;
 }
 
 .appcanvas > .container {
@@ -1047,18 +1781,22 @@ body.dark .appcanvas > aside {
   --sidebar-tab-outline: var(--pinokio-sidebar-tabbar-border);
 }
 
-.appcanvas > aside.appcanvas-aside-animating {
-  will-change: height, opacity;
-}
-
-.appcanvas > aside.appcanvas-aside-collapsed {
-  height: 0 !important;
+.appcanvas.sidebar-collapsed > aside {
+  flex: 0 0 0;
+  width: 0;
+  min-width: 0;
+  max-width: 0;
   opacity: 0;
   pointer-events: none;
-  padding-top: 0;
-  padding-bottom: 0;
-  margin-top: 0;
-  margin-bottom: 0;
+  overflow: hidden;
+}
+
+.appcanvas.sidebar-collapsed > aside .menu-container {
+  width: 0;
+}
+
+.appcanvas.sidebar-collapsed .appcanvas-resizer {
+  display: none;
 }
 
 /*
@@ -1136,13 +1874,13 @@ body.dark .appcanvas > aside .menu-actions {
   padding: 4px 8px;
   border: 0 !important;
   background: var(--assist-surface-light) !important;
-  color: var(--assist-text-light) !important;
+  color: #fff !important;
   box-shadow: none;
   transition: none;
 }
 body.dark .appcanvas > aside .menu-actions .header-item {
   background: var(--assist-surface-dark) !important;
-  color: var(--assist-text-dark) !important;
+  color: #fff !important;
 }
 .appcanvas > aside .menu-actions .header-item .display {
   display: block;
@@ -1181,13 +1919,13 @@ body.dark .appcanvas > aside .menu-actions .header-item {
 .appcanvas > aside .menu-actions .header-item:hover,
 .appcanvas > aside .menu-actions .header-item:focus-visible {
   background: var(--assist-surface-light) !important;
-  color: var(--assist-text-light) !important;
+  color: #fff !important;
   box-shadow: none;
 }
 body.dark .appcanvas > aside .menu-actions .header-item:hover,
 body.dark .appcanvas > aside .menu-actions .header-item:focus-visible {
   background: var(--assist-surface-dark) !important;
-  color: var(--assist-text-dark) !important;
+  color: #fff !important;
   box-shadow: none;
 }
 .appcanvas.community-open .menu-actions #community-toggle,
@@ -1195,7 +1933,7 @@ body.dark .appcanvas > aside .menu-actions .header-item:focus-visible {
 .appcanvas.community-open .menu-actions #community-toggle:focus-visible,
 .appcanvas.community-open .menu-actions #community-toggle.selected {
   background: var(--assist-surface-light-open) !important;
-  color: var(--assist-text-light-open) !important;
+  color: #fff !important;
   box-shadow: none;
 }
 body.dark .appcanvas.community-open .menu-actions #community-toggle,
@@ -1203,7 +1941,7 @@ body.dark .appcanvas.community-open .menu-actions #community-toggle:hover,
 body.dark .appcanvas.community-open .menu-actions #community-toggle:focus-visible,
 body.dark .appcanvas.community-open .menu-actions #community-toggle.selected {
   background: var(--assist-surface-dark-open) !important;
-  color: var(--assist-text-dark-open) !important;
+  color: #fff !important;
   box-shadow: none;
 }
 .appcanvas.panel-open .menu-actions #ask-ai-tab,
@@ -1211,7 +1949,7 @@ body.dark .appcanvas.community-open .menu-actions #community-toggle.selected {
 .appcanvas.panel-open .menu-actions #ask-ai-tab:focus-visible,
 .appcanvas.panel-open .menu-actions #ask-ai-tab.selected {
   background: var(--assist-surface-light-open) !important;
-  color: var(--assist-text-light-open) !important;
+  color: #fff !important;
   box-shadow: none;
 }
 body.dark .appcanvas.panel-open .menu-actions #ask-ai-tab,
@@ -1219,7 +1957,7 @@ body.dark .appcanvas.panel-open .menu-actions #ask-ai-tab:hover,
 body.dark .appcanvas.panel-open .menu-actions #ask-ai-tab:focus-visible,
 body.dark .appcanvas.panel-open .menu-actions #ask-ai-tab.selected {
   background: var(--assist-surface-dark-open) !important;
-  color: var(--assist-text-dark-open) !important;
+  color: #fff !important;
   box-shadow: none;
 }
 .appcanvas.vertical .menu-scroller {
@@ -1242,7 +1980,7 @@ body.dark .appcanvas.panel-open .menu-actions #ask-ai-tab.selected {
 .appcanvas.vertical .menu-actions {
   flex-direction: column;
   align-items: stretch;
-  gap: 1px;
+  gap: 0;
   margin-top: auto;
   padding: 0;
   width: 100%;
@@ -1252,6 +1990,119 @@ body.dark .appcanvas.panel-open .menu-actions #ask-ai-tab.selected {
 body.dark .appcanvas.vertical .menu-actions {
   border-top: none;
 }
+.appcanvas.vertical > aside .menu-actions .header-item + .header-item {
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
+}
+body.dark .appcanvas.vertical > aside .menu-actions .header-item + .header-item {
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
+}
+.appcanvas.vertical.dev-workspace .menu-actions.dev-menu-actions {
+  gap: 0;
+  padding: 0;
+  border-left: 0;
+  border-top: 0;
+  overflow: visible;
+}
+.appcanvas.vertical.dev-workspace .menu-actions.dev-menu-actions #fs-status {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  flex-wrap: nowrap;
+  gap: 0;
+  width: 100%;
+  padding: 0;
+  margin: 0;
+  background: transparent !important;
+  box-shadow: none;
+}
+.appcanvas.vertical.dev-workspace .menu-actions.dev-menu-actions #fs-changes-btn {
+  margin-left: 0;
+}
+.appcanvas.vertical.dev-workspace .menu-actions.dev-menu-actions #fs-status .fs-status-dropdown,
+.appcanvas.vertical.dev-workspace .menu-actions.dev-menu-actions #fs-status .fs-status-btn {
+  width: 100%;
+}
+.appcanvas.vertical.dev-workspace .menu-actions.dev-menu-actions #fs-status .fs-status-btn {
+  min-height: 0;
+  justify-content: flex-start;
+  padding: 6px 8px 5px;
+  border-radius: 0;
+  gap: 8px;
+  background: transparent !important;
+  box-shadow: none;
+  transition: none;
+  color: var(--pinokio-sidebar-tab-muted);
+  line-height: 1.25;
+}
+.appcanvas.vertical.dev-workspace .menu-actions.dev-menu-actions #fs-status .fs-status-btn:hover {
+  background: var(--pinokio-sidebar-tab-hover) !important;
+  color: var(--pinokio-sidebar-tab-active-color);
+}
+.appcanvas.vertical.dev-workspace .menu-actions.dev-menu-actions #fs-status .fs-status-btn:focus {
+  outline: none;
+}
+.appcanvas.vertical.dev-workspace .menu-actions.dev-menu-actions #fs-status .fs-status-btn:focus-visible {
+  outline: 2px solid var(--app-page-accent);
+  outline-offset: -2px;
+}
+.appcanvas.vertical.dev-workspace .menu-actions.dev-menu-actions #fs-status .fs-status-label {
+  flex: 1 1 auto;
+  min-width: 0;
+  justify-content: flex-start;
+  text-align: left;
+  gap: 6px;
+  font-size: 13px;
+}
+.appcanvas.vertical.dev-workspace .menu-actions.dev-menu-actions #fs-status .fs-status-label i {
+  width: 20px;
+  flex: 0 0 20px;
+  height: 20px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 0;
+  text-align: center;
+  padding: 0;
+}
+.appcanvas.vertical.dev-workspace .menu-actions.dev-menu-actions #fs-status .fs-status-title {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.appcanvas.vertical.dev-workspace .menu-actions.dev-menu-actions #fs-status .badge {
+  flex: 0 0 auto;
+  margin-left: auto;
+  margin-right: 24px;
+}
+.appcanvas.vertical.dev-workspace .menu-actions.dev-menu-actions #fs-status .fs-dropdown-menu {
+  position: static;
+  width: 100%;
+  min-width: 0;
+  max-width: none;
+  max-height: min(260px, 45vh);
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+  background: transparent;
+  overflow: auto;
+}
+.appcanvas.vertical.dev-workspace .menu-actions.dev-menu-actions #fs-status .git-fork .fs-dropdown-menu,
+.appcanvas.vertical.dev-workspace .menu-actions.dev-menu-actions #fs-status .git-publish .fs-dropdown-menu {
+  width: 100%;
+  max-width: none;
+}
+.appcanvas.vertical.dev-workspace .menu-actions.dev-menu-actions #fs-status .fs-dropdown-item {
+  min-height: 0;
+  padding: 6px 8px 6px 34px;
+  border-radius: 0;
+  gap: 8px;
+  font-size: 12px;
+}
+.appcanvas.vertical.dev-workspace .menu-actions.dev-menu-actions #fs-status .fs-dropdown-item:hover {
+  background: var(--app-page-surface-active);
+}
 
 .appcanvas > aside .menu-scroller::-webkit-scrollbar {
   height: 6px;
@@ -1331,33 +2182,27 @@ body.dark .appcanvas > aside .active-nested-path .header-item.is-current {
   margin-left: 0;
 }
 
-.appcanvas > aside .m.menu .nested-menu {
-  position: static;
-}
-
-.appcanvas > aside .m.menu .nested-menu > .submenu {
-  margin: 0;
-  padding: 8px 0;
-  border-radius: 0;
-  /*
-  border-radius: 12px;
-  */
-  border: 1px solid var(--pinokio-sidebar-tabbar-border);
-  background: #ffffff;
-  box-shadow: 0 18px 36px color-mix(in srgb, var(--pinokio-sidebar-tab-shadow) 85%, transparent);
+.appcanvas > aside .m.menu .nested-menu {
+  position: static;
+}
+
+.appcanvas > aside .m.menu .nested-menu > .submenu {
+  margin: 2px 0 4px 14px;
+  padding: 0 0 0 8px;
+  border-left: 1px solid var(--pinokio-sidebar-tabbar-border);
+  background: transparent;
+  box-shadow: none;
   display: flex;
   flex-direction: column;
-  gap: 2px;
-  min-width: 220px;
-  max-height: min(60vh, 420px);
-  overflow-y: auto;
-  z-index: 90;
+  gap: 1px;
+  min-width: 0;
+  max-height: none;
+  overflow: visible;
+  box-sizing: border-box;
 }
 
 body.dark .appcanvas > aside .m.menu .nested-menu > .submenu {
-  background: rgba(27, 28, 29, 0.96);
   border-color: rgba(67, 71, 85, 0.52);
-  box-shadow: 0 20px 42px color-mix(in srgb, var(--pinokio-sidebar-tab-shadow) 92%, transparent);
 }
 
 .appcanvas > aside .m.menu .nested-menu > .submenu.hidden {
@@ -1383,15 +2228,12 @@ body.dark .appcanvas > aside .m.menu .nested-menu.is-open > .reveal {
   width: 100%;
   max-width: none;
   min-width: 0;
-  padding: 7px 16px;
+  padding: 6px 8px;
   border-radius: 0;
-  /*
-  border-radius: 8px;
-  */
   border: 1px solid transparent;
   background: transparent !important;
   color: var(--pinokio-sidebar-tab-muted);
-  gap: 10px;
+  gap: 8px;
   overflow: hidden;
   box-sizing: border-box;
 }
@@ -1421,34 +2263,6 @@ body.dark .appcanvas > aside .m.menu .nested-menu > .submenu .frame-link:hover {
   margin-left: auto;
 }
 
-.appcanvas > aside .m.menu .nested-menu .submenu .nested-menu > .reveal .loader {
-  width: 18px;
-  min-width: 18px;
-  height: 18px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-}
-
-.appcanvas > aside .m.menu .nested-menu .submenu .nested-menu > .reveal .loader i.fa-angle-down,
-.appcanvas > aside .m.menu .nested-menu .submenu .nested-menu > .reveal .loader i.fa-angle-up {
-  display: none;
-}
-
-.appcanvas > aside .m.menu .nested-menu .submenu .nested-menu > .reveal .loader::before {
-  content: "\f105";
-  font-family: var(--fa-family-classic, "Font Awesome 7 Free");
-  font-weight: 900;
-  font-size: 13px;
-  color: currentColor;
-  transition: transform 0.18s ease;
-}
-
-.appcanvas > aside .m.menu .nested-menu .submenu .nested-menu.is-open > .reveal .loader::before {
-  transform: rotate(90deg);
-}
-
 .appcanvas > aside .header-top {
   display: flex;
   align-items: center;
@@ -2408,28 +3222,392 @@ body.dark .disk-usage {
   border-right: 1px solid rgba(255,255,255,0.1);
   color: white;
 }
-.disk-usage {
-  display: block;
-  cursor: pointer;
-  border-right: 1px solid rgba(0,0,0,0.1);
-  font-weight: bold;
-  color: black;
-  padding: 5px 10px;
-  border-radius: 4px;
+.disk-usage {
+  display: block;
+  cursor: pointer;
+  border-right: 1px solid rgba(0,0,0,0.1);
+  font-weight: bold;
+  color: black;
+  padding: 5px 10px;
+  border-radius: 4px;
+}
+.disk-usage i {
+  margin-right: 5px;
+  font-size: 16px !important;
+}
+.appcanvas:not(.vertical) > aside .menu-scroller .config-info,
+.appcanvas:not(.vertical) > aside .menu-scroller .disk-usage {
+  flex: 0 0 auto;
+  white-space: nowrap;
+}
+.appcanvas:not(.vertical) > aside .menu-scroller .disk-usage {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.app-autolaunch {
+  position: relative;
+  flex: 0 0 auto;
+  min-width: 0;
+}
+.app-autolaunch-row {
+  appearance: none;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  min-height: 34px;
+  border: 0;
+  background: transparent;
+  color: var(--pinokio-sidebar-tab-muted);
+  border-radius: 0;
+  padding: 7px 10px;
+  font: inherit;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 1.2;
+  cursor: pointer;
+  white-space: nowrap;
+  max-width: 100%;
+  box-sizing: border-box;
+  text-align: left;
+}
+.app-autolaunch-row:hover,
+.app-autolaunch.open .app-autolaunch-row {
+  background: var(--pinokio-sidebar-tab-hover);
+  color: var(--pinokio-sidebar-tab-active-color);
+}
+.app-autolaunch-row:focus {
+  outline: none;
+}
+.app-autolaunch-row:focus-visible {
+  box-shadow: inset 0 0 0 2px rgba(59, 130, 246, 0.35);
+}
+.app-autolaunch-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.app-autolaunch-label i {
+  width: 18px;
+  flex: 0 0 18px;
+  text-align: center;
+  font-size: 16px;
+}
+.app-autolaunch-spacer {
+  flex: 1 1 auto;
+  min-width: 10px;
+}
+.app-autolaunch-status {
+  flex: 0 0 auto;
+  color: rgba(100, 116, 139, 0.95);
+  font-size: 11px;
+  font-weight: 800;
+}
+.app-autolaunch-row[data-enabled="true"] .app-autolaunch-status {
+  color: rgba(22, 101, 52, 0.95);
+}
+.app-autolaunch-chevron {
+  flex: 0 0 auto;
+  color: rgba(100, 116, 139, 0.85);
+  font-size: 10px;
+}
+body.dark .app-autolaunch-row {
+  background: transparent;
+  color: rgba(226, 232, 240, 0.9);
+}
+body.dark .app-autolaunch-row:hover,
+body.dark .app-autolaunch.open .app-autolaunch-row {
+  background: rgba(148, 163, 184, 0.15);
+  color: #f8fafc;
+}
+body.dark .app-autolaunch-status,
+body.dark .app-autolaunch-chevron {
+  color: rgba(148, 163, 184, 0.9);
+}
+body.dark .app-autolaunch-row[data-enabled="true"] .app-autolaunch-status {
+  color: rgba(134, 239, 172, 0.92);
+}
+.app-autolaunch-modal {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  z-index: 10000002;
+  background: rgba(2, 6, 23, 0.46);
+  box-sizing: border-box;
+}
+.app-autolaunch-modal.hidden {
+  display: none;
+}
+.app-autolaunch-panel {
+  width: min(440px, calc(100vw - 32px));
+  max-height: min(620px, calc(100vh - 48px));
+  overflow: auto;
+  border: 1px solid rgba(15, 23, 42, 0.14);
+  border-radius: 8px;
+  background: rgba(255,255,255,0.98);
+  color: rgba(15, 23, 42, 0.92);
+  box-shadow: 0 18px 54px rgba(15, 23, 42, 0.22);
+  box-sizing: border-box;
+}
+body.dark .app-autolaunch-panel {
+  background: rgba(15, 17, 21, 0.98);
+  border-color: rgba(148, 163, 184, 0.26);
+  color: rgba(248, 250, 252, 0.92);
+  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.55);
+}
+.app-autolaunch-modal-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 14px 14px 12px;
+  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
+}
+body.dark .app-autolaunch-modal-head {
+  border-bottom-color: rgba(255,255,255,0.08);
+}
+.app-autolaunch-title {
+  font-size: 13px;
+  font-weight: 800;
+}
+.app-autolaunch-note,
+.app-autolaunch-feedback,
+.app-autolaunch-script-path,
+.app-autolaunch-empty {
+  color: rgba(100, 116, 139, 0.95);
+  font-size: 11px;
+  line-height: 1.35;
+}
+body.dark .app-autolaunch-note,
+body.dark .app-autolaunch-feedback,
+body.dark .app-autolaunch-script-path,
+body.dark .app-autolaunch-empty {
+  color: rgba(148, 163, 184, 0.92);
+}
+.app-autolaunch-modal-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  flex: 0 0 auto;
+}
+.app-autolaunch-close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: rgba(100, 116, 139, 0.95);
+  cursor: pointer;
+}
+.app-autolaunch-close:hover {
+  background: rgba(15, 23, 42, 0.08);
+  color: rgba(15, 23, 42, 0.92);
+}
+body.dark .app-autolaunch-close {
+  color: rgba(148, 163, 184, 0.95);
+}
+body.dark .app-autolaunch-close:hover {
+  background: rgba(148, 163, 184, 0.16);
+  color: rgba(248, 250, 252, 0.95);
+}
+.app-autolaunch-switch {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 5px;
+  width: 68px;
+  height: 26px;
+  padding: 3px;
+  border: 1px solid rgba(100, 116, 139, 0.28);
+  border-radius: 999px;
+  background: rgba(148, 163, 184, 0.18);
+  color: rgba(71, 85, 105, 0.95);
+  cursor: pointer;
+  flex: 0 0 auto;
+}
+.app-autolaunch-switch[aria-checked="true"] {
+  background: rgba(34, 197, 94, 0.18);
+  border-color: rgba(34, 197, 94, 0.42);
+  color: rgba(22, 101, 52, 0.95);
+}
+.app-autolaunch-switch:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+.app-autolaunch-switch-label {
+  flex: 1 1 auto;
+  min-width: 0;
+  order: 2;
+  text-align: center;
+  font-size: 10px;
+  font-weight: 800;
+  line-height: 1;
+}
+.app-autolaunch-switch[aria-checked="true"] .app-autolaunch-switch-label {
+  order: 1;
+}
+.app-autolaunch-switch-thumb {
+  order: 1;
+  flex: 0 0 auto;
+  width: 18px;
+  height: 18px;
+  border-radius: 999px;
+  background: rgba(15, 23, 42, 0.72);
+}
+.app-autolaunch-switch[aria-checked="true"] .app-autolaunch-switch-thumb {
+  order: 2;
+}
+body.dark .app-autolaunch-switch {
+  color: rgba(203, 213, 225, 0.92);
+}
+body.dark .app-autolaunch-switch[aria-checked="true"] {
+  color: rgba(134, 239, 172, 0.92);
+}
+body.dark .app-autolaunch-switch-thumb {
+  background: rgba(248, 250, 252, 0.82);
+}
+.app-autolaunch-modal-section {
+  padding: 12px 14px 0;
+}
+.app-autolaunch-section-label {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-bottom: 6px;
+  font-size: 11px;
+  font-weight: 800;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: rgba(71, 85, 105, 0.92);
+}
+body.dark .app-autolaunch-section-label {
+  color: rgba(203, 213, 225, 0.9);
+}
+.app-autolaunch-script-list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.app-autolaunch-script-option {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  align-items: center;
+  gap: 8px;
+  padding: 7px 8px;
+  border: 1px solid rgba(15, 23, 42, 0.08);
+  border-radius: 6px;
+  cursor: pointer;
+  background: rgba(248, 250, 252, 0.78);
+}
+.app-autolaunch-script-option:hover,
+.app-autolaunch-script-option.selected {
+  border-color: rgba(37, 99, 235, 0.35);
+  background: rgba(37, 99, 235, 0.08);
+}
+.app-autolaunch-script-option > div {
+  min-width: 0;
+}
+body.dark .app-autolaunch-script-option {
+  border-color: rgba(148, 163, 184, 0.16);
+  background: rgba(15, 23, 42, 0.72);
+}
+body.dark .app-autolaunch-script-option:hover,
+body.dark .app-autolaunch-script-option.selected {
+  border-color: rgba(96, 165, 250, 0.42);
+  background: rgba(37, 99, 235, 0.18);
+}
+.app-autolaunch-script-title {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  font-size: 12px;
+  font-weight: 700;
+}
+.app-autolaunch-script-title span:first-child,
+.app-autolaunch-script-path {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.app-autolaunch-tag {
+  flex: 0 0 auto;
+  padding: 1px 5px;
+  border-radius: 999px;
+  background: rgba(148, 163, 184, 0.16);
+  color: rgba(71, 85, 105, 0.92);
+  font-size: 9px;
+  font-weight: 800;
+  text-transform: uppercase;
+}
+body.dark .app-autolaunch-tag {
+  background: rgba(148, 163, 184, 0.18);
+  color: rgba(203, 213, 225, 0.9);
+}
+.app-autolaunch-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 12px 14px 14px;
+}
+.app-autolaunch-link {
+  color: royalblue;
+  font-size: 12px;
+  font-weight: 700;
+  text-decoration: none;
+}
+.app-autolaunch-feedback.error {
+  color: #b91c1c;
+}
+body.dark .app-autolaunch-feedback.error {
+  color: #fca5a5;
+}
+.appcanvas.vertical .app-autolaunch {
+  width: 100%;
+  padding: 0;
+  box-sizing: border-box;
+}
+.appcanvas.vertical .app-autolaunch-row {
+  width: 100%;
+  justify-content: space-between;
+  min-height: 0;
+  padding: 6px 8px 5px;
+  line-height: 1.25;
 }
-.disk-usage i {
-  margin-right: 5px;
-  font-size: 16px !important;
+.appcanvas.vertical .app-autolaunch-label {
+  gap: 6px;
 }
-.appcanvas:not(.vertical) > aside .menu-scroller .config-info,
-.appcanvas:not(.vertical) > aside .menu-scroller .disk-usage {
-  flex: 0 0 auto;
+.appcanvas.vertical .app-autolaunch-label i {
+  width: 20px;
+  flex-basis: 20px;
+  font-size: 15px;
+}
+.appcanvas:not(.vertical) > aside .menu-scroller .app-autolaunch {
   white-space: nowrap;
 }
-.appcanvas:not(.vertical) > aside .menu-scroller .disk-usage {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
+body.mobile-menu-open .appcanvas > aside .app-autolaunch {
+  margin: -4px 0 0;
+  padding: 0;
+}
+body.mobile-menu-open .appcanvas > aside .app-autolaunch-row {
+  width: 100%;
+  min-height: 40px;
+  justify-content: space-between;
+  padding: 12px 14px;
+  border-radius: 14px;
 }
 
 
@@ -2825,6 +4003,9 @@ body.dark .fs-status-btn:hover {
 body.app-page .appcanvas {
   background: transparent;
 }
+body.app-page .appcanvas.vertical .menu-scroller {
+  padding-top: 10px;
+}
 body.app-page .appcanvas > aside,
 body.dark.app-page .appcanvas > aside {
   background: transparent !important;
@@ -2843,6 +4024,27 @@ body.app-page .appcanvas_filler {
 body.app-page .disk-usage {
   border-right-color: color-mix(in srgb, var(--app-page-border) 85%, transparent);
 }
+body.app-page .app-header-identity .disk-usage.app-header-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.86);
+  font-size: 11px;
+  font-weight: 650;
+  line-height: 1;
+  white-space: nowrap;
+  cursor: default;
+}
+body.dark.app-page .app-header-identity .disk-usage.app-header-identity-disk {
+  color: rgba(248, 250, 252, 0.86);
+}
+body.app-page .app-header-identity .disk-usage.app-header-identity-disk i {
+  display: none;
+}
 body.app-page .appcanvas > aside .active-nested-path .header-item.is-current,
 body.app-page .appcanvas > aside .menu-scroller .header-item.selected,
 body.app-page .appcanvas > aside .menu-scroller .frame-link.selected,
@@ -2922,7 +4124,20 @@ body.app-page .appcanvas.vertical .appcanvas-resizer::before {
 }
 */
 body.app-page .appcanvas.vertical .appcanvas-resizer::before {
-  background: var(--app-page-selected-item-bg);
+  background: transparent;
+  transition: background 120ms ease;
+}
+body.app-page .appcanvas.vertical .appcanvas-resizer:hover::before {
+  background: rgba(15, 23, 42, 0.16);
+}
+body.app-page .appcanvas.vertical .appcanvas-resizer:focus-visible::before {
+  background: rgba(59, 130, 246, 0.45);
+}
+body.dark.app-page .appcanvas.vertical .appcanvas-resizer:hover::before {
+  background: rgba(255, 255, 255, 0.22);
+}
+body.dark.app-page .appcanvas.vertical .appcanvas-resizer:focus-visible::before {
+  background: rgba(96, 165, 250, 0.6);
 }
 
 /* Remote selection modal styles */
@@ -4691,21 +5906,18 @@ body.dark .snapshot-footer-input input {
 header.navheader h1 {
   position: relative;
 }
-header.navheader .mode-selector {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  flex-grow: 0;
-  margin: 0;
-}
-header.navheader .mode-selector .community-mode-toggle {
-  display: none;
+@media only screen and (max-width: 1100px) {
+  .app-header-identity {
+    width: auto;
+    max-width: none;
+  }
 }
 @media only screen and (max-width: 800px) {
-  header.navheader .mode-selector {
-    position: static;
-    transform: none;
+  .app-header-identity {
+    flex: 1 1 auto;
+    justify-content: flex-start;
+    width: auto;
+    max-width: none;
     margin: 0 10px;
   }
 }
@@ -4735,7 +5947,7 @@ header.navheader .mode-selector .community-mode-toggle {
     opacity: 0 !important;
     pointer-events: none !important;
   }
-  header.navheader .mode-selector {
+  header.navheader .app-header-identity {
     display: none !important;
   }
   body:not(.mobile-menu-open) .appcanvas > aside {
@@ -4744,9 +5956,6 @@ header.navheader .mode-selector .community-mode-toggle {
   body.mobile-menu-open #menu-mobile-close {
     display: inline-flex;
   }
-  body.mobile-menu-open #layout-toggle {
-    display: none;
-  }
   .browserview-shell {
     box-sizing: border-box;
   }
@@ -4806,56 +6015,100 @@ header.navheader .mode-selector .community-mode-toggle {
     object-fit: contain;
     display: block;
   }
-  .mobile-bottom-nav__modes {
+  .mobile-bottom-nav__identity {
     flex: 1 1 auto;
     min-width: 0;
     display: flex;
     align-items: center;
-    gap: 0;
-    min-height: 26px;
-    padding: 0;
-    border-radius: 8px;
+    justify-content: center;
+    gap: 6px;
+    height: 28px;
+    padding: 0 10px;
+    border-radius: 999px;
     border: 1px solid rgba(0,0,0,0.08);
-    background: rgba(15, 23, 42, 0.06);
+    background: rgba(255, 255, 255, 0.78);
+    box-sizing: border-box;
   }
-  body.dark .mobile-bottom-nav__modes {
+  body.dark .mobile-bottom-nav__identity {
     border-color: rgba(255,255,255,0.08);
     background: rgba(255,255,255,0.06);
   }
-  .mobile-mode-segment {
-    flex: 1 1 0;
+  .mobile-bottom-nav__identity-icon {
+    width: 16px;
+    height: 16px;
+    flex: 0 0 16px;
+    object-fit: contain;
+    display: block;
+  }
+  .mobile-bottom-nav__identity-title {
     min-width: 0;
-    display: flex;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: #0f172a;
+    font-size: 12px;
+    font-weight: 700;
+    line-height: 1;
+  }
+  body.dark .mobile-bottom-nav__identity-title {
+    color: rgba(248, 250, 252, 0.94);
+  }
+  .mobile-bottom-nav__identity-separator {
+    width: 3px;
+    height: 3px;
+    flex: 0 0 3px;
+    border-radius: 999px;
+    background: rgba(100, 116, 139, 0.48);
+  }
+  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;
-    justify-content: center;
-    min-height: 24px;
-    padding: 0 4px;
-    border-radius: 7px;
-    color: #475569;
-    text-decoration: none;
+    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: 700;
+    font-weight: 600;
     line-height: 1;
-    text-align: center;
     white-space: nowrap;
+    cursor: default;
   }
-  .mobile-mode-segment.selected {
-    background: #111827;
-    color: #fff;
+  body.dark .mobile-bottom-nav__identity-disk {
+    color: rgba(203, 213, 225, 0.74);
   }
-  body.dark .mobile-mode-segment {
-    color: rgba(226, 232, 240, 0.88);
+  .mobile-bottom-nav__identity-disk i {
+    display: none;
   }
-  body.dark .mobile-mode-segment.selected {
-    background: #fff;
-    color: #0f1115;
+  .mobile-bottom-nav .resource-usage {
+    max-width: min(46vw, 190px);
   }
-  .appcanvas.community-mode .mobile-bottom-nav .mobile-mode-segment.selected {
-    background: transparent;
-    color: #475569;
+  .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;
   }
-  body.dark .appcanvas.community-mode .mobile-bottom-nav .mobile-mode-segment.selected {
-    color: rgba(226, 232, 240, 0.88);
+  .mobile-bottom-nav .resource-usage-popover {
+    top: auto;
+    bottom: calc(100% + 9px);
+    right: -4px;
   }
   body.mobile-menu-open .appcanvas > aside {
     display: flex;
@@ -4868,6 +6121,16 @@ header.navheader .mode-selector .community-mode-toggle {
     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;
+  }
+  body.mobile-menu-open .appcanvas.sidebar-collapsed > aside .menu-container {
+    width: 100%;
+  }
   body.dark.mobile-menu-open .appcanvas > aside {
     background: #0f1115;
   }
@@ -4876,6 +6139,7 @@ header.navheader .mode-selector .community-mode-toggle {
     flex-direction: column;
     align-items: stretch;
     gap: 8px;
+    padding-top: 0;
   }
   body.mobile-menu-open .appcanvas > aside .config-info {
     padding: 6px 8px 2px;
@@ -4901,6 +6165,29 @@ header.navheader .mode-selector .community-mode-toggle {
     gap: 12px;
     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;
+    align-items: center;
+    justify-content: center;
+    gap: 2px;
+    flex: 0 0 auto;
+    width: 100%;
+    min-height: 34px;
+    margin: 0 0 8px;
+    padding: 3px;
+    border-radius: 8px;
+  }
+  body.mobile-menu-open .appcanvas > aside .workspace-mode-link,
+  body.mobile-menu-open .mobile-menu-fallback .workspace-mode-link {
+    flex: 1 1 0;
+    width: auto;
+    min-width: 0;
+    min-height: 28px;
+    padding: 0 8px;
+    border-radius: 6px;
+    font-size: 12px;
+  }
   body.mobile-menu-open .appcanvas > aside .m {
     display: flex;
     flex-direction: column;
@@ -5049,6 +6336,21 @@ header.navheader .mode-selector .community-mode-toggle {
     padding: 0 12px 16px;
     box-sizing: border-box;
   }
+  .mobile-menu-fallback .workspace-mode-switch {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    margin: 0 0 12px;
+    padding: 3px;
+    border-radius: 7px;
+    border: 1px solid rgba(15, 23, 42, 0.055);
+    background: rgba(15, 23, 42, 0.035);
+    box-sizing: border-box;
+  }
+  body.dark .mobile-menu-fallback .workspace-mode-switch {
+    border-color: rgba(255, 255, 255, 0.075);
+    background: rgba(255, 255, 255, 0.045);
+  }
   body.mobile-menu-open .appcanvas .container {
     display: none;
   }
@@ -5056,6 +6358,7 @@ header.navheader .mode-selector .community-mode-toggle {
     display: none;
   }
   .appcanvas.panel-open .ask-ai-drawer,
+  .appcanvas.logs-open .app-logs-drawer,
   .appcanvas.event-drawer-open .event-launch-drawer,
   .appcanvas.event-bottom-open .event-launch-drawer {
     display: flex;
@@ -5068,11 +6371,13 @@ header.navheader .mode-selector .community-mode-toggle {
     z-index: 10000000;
   }
   .appcanvas.panel-open .ask-ai-resizer,
+  .appcanvas.logs-open .app-logs-resizer,
   .appcanvas.event-drawer-open .event-launch-resizer,
   .appcanvas.event-bottom-open .event-launch-resizer {
     display: none;
   }
   .appcanvas.panel-open main.browserview,
+  .appcanvas.logs-open main.browserview,
   .appcanvas.event-drawer-open main.browserview,
   .appcanvas.event-bottom-open main.browserview {
     display: none;
@@ -5097,10 +6402,6 @@ header.navheader .mode-selector .community-mode-toggle {
   .appcanvas.community-mode .browserview-shell {
     flex: 1 1 auto;
   }
-  .appcanvas.community-mode header.navheader .mode-selector .btn2.selected:not(.community-mode-toggle) {
-    background: transparent;
-    color: inherit;
-  }
 }
 </style>
 <link href="/app.css" rel="stylesheet"/>
@@ -5153,8 +6454,13 @@ header.navheader .mode-selector .community-mode-toggle {
 <a class='home' href="/home">
   <img class='icon' src="/pinokio-black.png">
 </a>
-<button class='btn2' id='minimize-header' data-tippy-content="fullscreen" title='fullscreen'>
-  <div><i class="fa-solid fa-expand"></i></div>
+<button class='btn2 sidebar-toggle' id='sidebar-toggle' type='button' data-tippy-content="Hide sidebar" title='Hide sidebar' aria-label="Hide sidebar" aria-controls="app-sidebar" aria-expanded="true">
+  <span class="sidebar-toggle-glyph" aria-hidden="true">
+    <span class="sidebar-toggle-frame">
+      <span class="sidebar-toggle-panel"></span>
+      <span class="sidebar-toggle-content"></span>
+    </span>
+  </span>
 </button>
 <button class='btn2' id='back' data-tippy-content="back"><div><i class="fa-solid fa-chevron-left"></i></div></button>
 <button class='btn2' id='forward' data-tippy-content="forward"><div><i class="fa-solid fa-chevron-right"></i></div></button>
@@ -5165,16 +6471,44 @@ header.navheader .mode-selector .community-mode-toggle {
   <div><i class="fa-solid fa-list"></i></div>
 </button>
 <div class='sep'></div>
-<div class='mode-selector'>
-  <a class="btn2 <%=type === 'run' ? 'selected' : ''%>" href="<%=run_tab%>"><div><i class="fa-solid fa-circle-play"></i></div><div class='caption'>Run</div></a>
-  <a class="btn2 <%=type === 'browse' ? 'selected' : ''%>" href="<%=dev_tab%>"><div><i class="fa-solid fa-terminal"></i></div><div class='caption'>Dev</div></a>
-  <a class="btn2 <%=type === 'files' ? 'selected' : ''%>" href="<%=files_tab%>"><div><i class="fa-solid fa-file-lines"></i></div><div class='caption'>Files</div></a>
-  <% if (registryEnabled) { %>
-  <button type='button' id='community-mode-toggle' class="btn2 community-mode-toggle" data-tippy-content="Community" aria-pressed="false">
-    <div><i class="fa-solid fa-globe"></i></div><div class='caption'>Community</div>
-  </button>
+<div class='app-header-identity' title="<%=config.title || name%>">
+  <% if (config.icon) { %>
+    <img class='app-header-identity-icon' src="<%=config.icon%>" alt="" aria-hidden="true"/>
   <% } %>
+  <div class='app-header-identity-title'><%=config.title || name%></div>
+  <span class='app-header-identity-separator' aria-hidden="true"></span>
+  <div class="resource-usage" data-resource-usage-root 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 app-header-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>
+    </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>
+      <button type="button" class="resource-toggle" data-resource-toggle="show_ram" role="switch" aria-checked="true">
+        <span class="resource-toggle-label">Show RAM</span>
+        <span class="resource-toggle-track" aria-hidden="true"><span class="resource-toggle-thumb"></span></span>
+      </button>
+      <button type="button" class="resource-toggle" data-resource-toggle="show_vram" role="switch" aria-checked="true">
+        <span class="resource-toggle-label">Show VRAM</span>
+        <span class="resource-toggle-track" aria-hidden="true"><span class="resource-toggle-thumb"></span></span>
+      </button>
+      <button type="button" class="resource-toggle" data-resource-toggle="show_cpu" role="switch" aria-checked="false">
+        <span class="resource-toggle-label">Show CPU</span>
+        <span class="resource-toggle-track" aria-hidden="true"><span class="resource-toggle-thumb"></span></span>
+      </button>
+      <div class="resource-usage-status" data-resource-usage-status>Waiting for usage data</div>
+    </div>
+  </div>
 </div>
+<% if (registryEnabled) { %>
+<button type='button' id='community-mode-toggle' class="community-mode-toggle workspace-mode-community-proxy" aria-pressed="false" aria-hidden="true" tabindex="-1">
+  <i class="fa-solid fa-globe"></i>
+</button>
+<% } %>
 <div class='flexible'></div>
 <a class='btn2' href="/columns" data-tippy-content="split into 2 columns">
   <div><i class="fa-solid fa-table-columns"></i></div>
@@ -5190,35 +6524,25 @@ header.navheader .mode-selector .community-mode-toggle {
 </button>
 </h1>
 </header>
-<div class='appcanvas'>
-<% if (error) { %>
-  <div class='error-message'>
-    <div>
-      <h1><i class="fa-solid fa-triangle-exclamation"></i> Error</h1> 
-      <div><%=error%></div>
-    </div>
-  </div>
-<% } else { %>
+<div class='appcanvas vertical <%=type === "browse" ? "dev-workspace" : ""%>' data-page-error="<%= error ? '1' : '0' %>">
   <% if (type !== 'files') { %>
-  <aside class='active'>
+  <aside id='app-sidebar' class='active'>
       <div class='menu-container'>
         <div class='menu-scroller'>
-        <div class='config-info'> 
-          <button type='button' id='menu-mobile-close' data-tippy-content="Back">
-            <i class="fa-solid fa-chevron-left"></i>
-          </button>
-          <button type='button' id='layout-toggle'>
-            <i class="fa-solid fa-bars"></i>
-          </button>
-          <% if (config.icon) { %>
-            <img class='meta-icon' src="<%=config.icon%>"/>
-          <% } %>
-          <% if (config.title) { %>
-            <div><%=config.title%></div>
-          <% } %>
+        <div class='workspace-mode-switch' role="tablist" aria-label="Workspace mode">
+          <a class="workspace-mode-link <%=type === 'run' ? 'selected' : ''%>" href="<%=run_tab%>" role="tab" aria-selected="<%=type === 'run' ? 'true' : 'false'%>">
+            <i class="fa-solid fa-circle-play"></i>
+            <span>Run</span>
+          </a>
+          <a class="workspace-mode-link <%=type === 'browse' || type === 'files' ? 'selected' : ''%>" href="<%=dev_tab%>" role="tab" aria-selected="<%=type === 'browse' || type === 'files' ? 'true' : 'false'%>">
+            <i class="fa-solid fa-terminal"></i>
+            <span>Dev</span>
+          </a>
         </div>
-        <span class="disk-usage tab-metric__value" data-path="/" data-filepath="<%=path%>">--</span>
         <div class='mobile-sheet-actions' aria-label="Workspace actions">
+          <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>
@@ -5244,11 +6568,16 @@ header.navheader .mode-selector .community-mode-toggle {
             <i class="fa-solid fa-xmark"></i>
           </button>
         </div>
-        <div class='m n system' data-type="n">
-          <%if (type==='browse') { %>
-            <a id='devtab' data-mode="refresh" target="<%=dev_link%>" href="<%=dev_link%>" class="btn frame-link selected" data-index="10">
+        <%if (type==='browse') { %>
+          <div class='m n system' data-type="n">
+            <a id='devtab' data-mode="refresh" target="<%=dev_link%>" href="<%=dev_link%>" class="btn frame-link <%=dev_initial_tab === 'files' ? '' : 'selected'%>" data-index="10">
               <div class="tab">
-                <i class="fa-solid fa-bars"></i> Launchers
+                <i class="fa-solid fa-bars"></i> Plugins
+              </div>
+            </a>
+            <a id='filestab' target="pinokio-files" href="<%=editor_tab%>" class="btn frame-link <%=dev_initial_tab === 'files' ? 'selected' : ''%>" data-index="11">
+              <div class="tab">
+                <i class="fa-solid fa-file-lines"></i> Files
               </div>
             </a>
             
@@ -5259,9 +6588,48 @@ header.navheader .mode-selector .community-mode-toggle {
                 <% } %>
               </div>
             </div>
-          <% } %>
-        </div>
+          </div>
+        <% } %>
         <%if (type === 'run') { %>
+          <% if (typeof autolaunch_app !== 'undefined' && autolaunch_app) { %>
+            <div class="app-autolaunch" data-app-autolaunch data-app-id="<%=name%>">
+              <button type="button" class="app-autolaunch-row" data-app-autolaunch-button data-enabled="<%= autolaunch_app.autolaunch_enabled ? 'true' : 'false' %>" aria-haspopup="dialog" aria-expanded="false">
+                <span class="app-autolaunch-label"><i class="fa-solid fa-power-off"></i><span>Auto</span></span>
+                <span class="app-autolaunch-spacer" aria-hidden="true"></span>
+                <span class="app-autolaunch-status" data-app-autolaunch-status><%= autolaunch_app.autolaunch_enabled ? 'ON' : 'OFF' %></span>
+                <i class="fa-solid fa-angle-down app-autolaunch-chevron" aria-hidden="true"></i>
+              </button>
+              <div class="app-autolaunch-modal hidden" data-app-autolaunch-modal role="dialog" aria-modal="true" aria-label="Auto launch">
+                <div class="app-autolaunch-panel" data-app-autolaunch-panel>
+                  <div class="app-autolaunch-modal-head">
+                    <div>
+                      <div class="app-autolaunch-title">Auto launch</div>
+                      <div class="app-autolaunch-note">Run this app when Pinokio starts.</div>
+                    </div>
+                    <div class="app-autolaunch-modal-actions">
+                      <button type="button" class="app-autolaunch-switch" role="switch" aria-checked="<%= autolaunch_app.autolaunch_enabled ? 'true' : 'false' %>" data-app-autolaunch-switch aria-label="Auto launch" title="Auto launch is <%= autolaunch_app.autolaunch_enabled ? 'on' : 'off' %>">
+                        <span class="app-autolaunch-switch-label" data-app-autolaunch-switch-label><%= autolaunch_app.autolaunch_enabled ? 'ON' : 'OFF' %></span>
+                        <span class="app-autolaunch-switch-thumb" aria-hidden="true"></span>
+                      </button>
+                      <button type="button" class="app-autolaunch-close" data-app-autolaunch-close aria-label="Close">
+                        <i class="fa-solid fa-xmark" aria-hidden="true"></i>
+                      </button>
+                    </div>
+                  </div>
+                  <div class="app-autolaunch-modal-section">
+                    <div class="app-autolaunch-section-label">Script</div>
+                    <div class="app-autolaunch-script-list" data-app-autolaunch-scripts>
+                      <div class="app-autolaunch-empty">Loading scripts...</div>
+                    </div>
+                  </div>
+                  <div class="app-autolaunch-footer">
+                    <div class="app-autolaunch-feedback" data-app-autolaunch-feedback></div>
+                    <a class="app-autolaunch-link" href="/autolaunch">Manage all</a>
+                  </div>
+                </div>
+              </div>
+            </div>
+          <% } %>
           <div class='m h menu' data-type='h'>
             <% if (config.menu) { %>
               <%- include('./partials/menu', { menu: config.menu, }) %>
@@ -5289,7 +6657,10 @@ header.navheader .mode-selector .community-mode-toggle {
           <%})%>
         </div>
       </div>
-      <div class='menu-actions'>
+      <div class='menu-actions <%= type === "browse" ? "dev-menu-actions" : "" %>'>
+        <% if (type === 'browse') { %>
+          <%- include('./partials/fs_status') %>
+        <% } %>
         <% if (type === 'run') { %>
           <button type='button' id='ask-ai-tab' class="btn header-item" data-static="ask-ai" data-workspace="<%=name%>" data-workspace-cwd="<%=path%>" data-ask-ai-trigger="true" data-tippy-content="Ask AI">
             <div class='tab'>
@@ -5299,6 +6670,14 @@ header.navheader .mode-selector .community-mode-toggle {
             </div>
           </button>
         <% } %>
+        <button type='button' id='logs-toggle' class="btn header-item" data-tippy-content="logs" aria-expanded="false" aria-controls="app-logs-drawer">
+          <div class='tab'>
+            <i class="fa-solid fa-laptop-code menu-action-leading-icon"></i>
+            <div class='display'>Logs</div>
+            <div class='flexible'></div>
+            <span class='logs-new-badge hidden' id='logs-new-badge'>New</span>
+          </div>
+        </button>
         <% if (registryEnabled) { %>
           <button type='button' id='community-toggle' class="btn header-item" data-tippy-content="community">
             <div class='tab'>
@@ -5317,63 +6696,7 @@ header.navheader .mode-selector .community-mode-toggle {
     <div class='appcanvas_filler'></div>
   <% } %>
   <div class='container'>
-    <% if (type === "browse") { %>
-      <div id='fs-status' data-workspace="<%=name%>" data-create-uri="<%=git_create_url%>" data-history-uri="<%=git_history_url%>" data-status-uri="<%=git_status_url%>" data-uri="<%=git_monitor_url%>" data-push-uri="<%=git_push_url%>" data-fork-uri="<%=git_fork_url%>">
-        <!--
-        <div class='fs-status-dropdown nested-menu git blue'>
-          <button type='button' class='fs-status-btn frame-link reveal'>
-            <span class='fs-status-label'>
-              <i class="fa-brands fa-git-alt"></i>
-              Git
-            </span>
-          </button>
-          <div class='fs-dropdown-menu submenu hidden' id='git-repos'>
-          </div>
-        </div>
-        -->
-        <div class='fs-status-dropdown fs-open-explorer'>
-          <button class='fs-status-btn' data-filepath="<%=path%>" type='button'>
-            <span class='fs-status-label'>
-              <i class="fa-solid fa-folder-open"></i>
-              <span class='fs-status-title'>Open in File Explorer</span>
-            </span>
-          </button>
-        </div>
-        <div class='fs-status-dropdown fs-logs'>
-          <button class='fs-status-btn' type='button'>
-            <span class='fs-status-label'>
-              <i class="fa-solid fa-laptop-code"></i>
-              <span class='fs-status-title'>Logs</span>
-            </span>
-          </button>
-        </div>
-        <div class='fs-status-dropdown git-changes'>
-          <button id='fs-changes-btn' class='fs-status-btn revealer' data-group='#fs-changes-menu' type='button'>
-            <span class='fs-status-label'><i class="fa-solid fa-code-compare"></i> Changes</span>
-            <div class='badge'></div>
-          </button>
-          <div class='fs-dropdown-menu submenu hidden' id='fs-changes-menu'></div>
-        </div>
-        <div class='fs-status-dropdown git-fork'>
-          <button id='fs-fork-btn' class='fs-status-btn revealer' data-group='#fs-fork-menu' type='button'>
-            <span class='fs-status-label'>
-              <i class="fa-solid fa-code-branch"></i>
-              <span class='fs-status-title'>Fork</span>
-            </span>
-          </button>
-          <div class='fs-dropdown-menu submenu hidden' id='fs-fork-menu'></div>
-        </div>
-        <div class='fs-status-dropdown git-publish'>
-          <button id='fs-push-btn' class='fs-status-btn revealer' data-group='#fs-push-menu' type='button'>
-            <span class='fs-status-label'>
-              <i class="fa-brands fa-github"></i>
-              <span class='fs-status-title'>Publish</span>
-            </span>
-          </button>
-          <div class='fs-dropdown-menu submenu hidden' id='fs-push-menu'></div>
-        </div>
-      </div>
-    <% } else if (type === 'files') { %>
+    <% if (type === 'files') { %>
       <div id='fs-status' data-workspace="<%=name%>" data-create-uri="<%=git_create_url%>" data-history-uri="<%=git_history_url%>" data-status-uri="<%=git_status_url%>" data-uri="<%=git_monitor_url%>" data-push-uri="<%=git_push_url%>" data-fork-uri="<%=git_fork_url%>">
         <!--
         <div class='fs-status-dropdown nested-menu git blue'>
@@ -5387,7 +6710,6 @@ header.navheader .mode-selector .community-mode-toggle {
           </div>
         </div>
         -->
-        <span class="disk-usage tab-metric__value" data-path="/" data-filepath="<%=path%>">--</span>
         <div class='fs-status-dropdown fs-open-explorer'>
           <button class='fs-status-btn' data-filepath="<%=path%>" type='button'>
             <span class='fs-status-label'>
@@ -5465,9 +6787,9 @@ header.navheader .mode-selector .community-mode-toggle {
           </div>
           <div class='ask-ai-drawer-body'>
             <div class='ask-ai-drawer-empty'>
-              <div class='ask-ai-drawer-empty-title'>Pick a plugin to launch</div>
-              <div class='ask-ai-drawer-picker-list' role="list" aria-label="Ask AI plugins"></div>
-              <div class='ask-ai-drawer-picker-status muted'>Use the Ask AI button to load available plugins.</div>
+              <div class='ask-ai-drawer-empty-title'>Pick a shell or plugin to launch</div>
+              <div class='ask-ai-drawer-picker-list' role="list" aria-label="Ask AI launch options"></div>
+              <div class='ask-ai-drawer-picker-status muted'>Use the Ask AI button to load launch options.</div>
             </div>
             <iframe class='ask-ai-frame hidden' title="Panel" allow="fullscreen *;" allowfullscreen></iframe>
           </div>
@@ -5498,6 +6820,53 @@ header.navheader .mode-selector .community-mode-toggle {
         </div>
       </aside>
       <% } %>
+      <aside class='app-logs-drawer' id='app-logs-drawer' data-app-id="<%=name%>" data-report-url="/apps/logs/<%= encodeURIComponent(name) %>/report" data-full-logs-url="/logs?workspace=<%= encodeURIComponent(name) %>" data-community-available="<%= registryEnabled && community_url ? '1' : '0' %>" data-page-error="<%= error ? '1' : '0' %>" aria-hidden="true">
+        <div class='app-logs-drawer-inner'>
+          <div class='app-logs-drawer-bar'>
+            <div class='app-logs-drawer-title'>
+              <i class="fa-solid fa-laptop-code" aria-hidden="true"></i>
+              <span>Logs</span>
+            </div>
+            <div class='app-logs-drawer-actions'>
+              <button type='button' class='btn2 app-logs-refresh' data-tippy-content="Refresh" aria-label="Refresh report">
+                <i class="fa-solid fa-rotate-right"></i>
+              </button>
+              <button type='button' class='btn2 app-logs-close' data-tippy-content="Close panel" aria-label="Close logs panel">
+                <i class="fa-solid fa-xmark"></i>
+              </button>
+            </div>
+          </div>
+          <div class='app-logs-body'>
+            <% if (error) { %>
+              <div class='app-logs-error-callout' role="alert">
+                <i class="fa-solid fa-triangle-exclamation" aria-hidden="true"></i>
+                <div>
+                  <div class='app-logs-error-callout-title'>Error detected</div>
+                  <div class='app-logs-error-callout-message'><%=error%></div>
+                </div>
+              </div>
+            <% } %>
+            <div class='app-logs-toolbar'>
+              <button type='button' class='btn app-logs-copy' disabled>
+                <i class="fa-solid fa-copy"></i> Copy report
+              </button>
+            </div>
+            <div class='app-logs-status' role="status" aria-live="polite">Ready.</div>
+            <div class='app-logs-summary' aria-label="Log report summary">
+              <div class='app-logs-summary-item'>
+                <div class='app-logs-summary-label'>Sections</div>
+                <div class='app-logs-summary-value' data-app-logs-summary="sections">--</div>
+              </div>
+              <div class='app-logs-summary-item'>
+                <div class='app-logs-summary-label'>Redactions</div>
+                <div class='app-logs-summary-value' data-app-logs-summary="redactions">--</div>
+              </div>
+            </div>
+            <div class='app-logs-section-list' aria-label="Included log files"></div>
+            <pre class='app-logs-report-output' tabindex="0"></pre>
+          </div>
+        </div>
+      </aside>
       <% if (registryEnabled) { %>
       <div class='community-resizer' id='community-resizer' role="separator" aria-orientation="vertical" aria-valuemin="240" aria-valuemax="9999" aria-valuenow="360" tabindex="0" aria-label="Resize community panel"></div>
       <aside class='community-drawer' id='community-drawer' data-community-url="<%=community_url%>">
@@ -5569,22 +6938,53 @@ header.navheader .mode-selector .community-mode-toggle {
           </div>
         </div>
       </div>
-    <% } %>
-  </div>
-  <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">
-    </button>
-    <div class='mobile-bottom-nav__modes' role="tablist" aria-label="Workspace mode">
-      <a class="mobile-mode-segment <%=type === 'run' ? 'selected' : ''%>" href="<%=run_tab%>" role="tab" data-mobile-mode="run" aria-selected="<%=type === 'run' ? 'true' : 'false'%>">Run</a>
-      <a class="mobile-mode-segment <%=type === 'browse' ? 'selected' : ''%>" href="<%=dev_tab%>" role="tab" data-mobile-mode="browse" aria-selected="<%=type === 'browse' ? 'true' : 'false'%>">Dev</a>
-      <a class="mobile-mode-segment <%=type === 'files' ? 'selected' : ''%>" href="<%=files_tab%>" role="tab" data-mobile-mode="files" aria-selected="<%=type === 'files' ? 'true' : 'false'%>">Files</a>
+    <% } %>
+  </div>
+  <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">
+    </button>
+    <div class='mobile-bottom-nav__identity' title="<%=config.title || name%>" aria-label="<%=config.title || name%>">
+      <% if (config.icon) { %>
+        <img class='mobile-bottom-nav__identity-icon' src="<%=config.icon%>" alt="" aria-hidden="true"/>
+      <% } %>
+      <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%>">
+        <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>
+        </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>
+          <button type="button" class="resource-toggle" data-resource-toggle="show_ram" role="switch" aria-checked="true">
+            <span class="resource-toggle-label">Show RAM</span>
+            <span class="resource-toggle-track" aria-hidden="true"><span class="resource-toggle-thumb"></span></span>
+          </button>
+          <button type="button" class="resource-toggle" data-resource-toggle="show_vram" role="switch" aria-checked="true">
+            <span class="resource-toggle-label">Show VRAM</span>
+            <span class="resource-toggle-track" aria-hidden="true"><span class="resource-toggle-thumb"></span></span>
+          </button>
+          <button type="button" class="resource-toggle" data-resource-toggle="show_cpu" role="switch" aria-checked="false">
+            <span class="resource-toggle-label">Show CPU</span>
+            <span class="resource-toggle-track" aria-hidden="true"><span class="resource-toggle-thumb"></span></span>
+          </button>
+          <div class="resource-usage-status" data-resource-usage-status>Waiting for usage data</div>
+        </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="Community">
       <i class="fa-solid fa-globe"></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">
       <i class="fa-solid fa-robot"></i>
@@ -5595,12 +6995,22 @@ header.navheader .mode-selector .community-mode-toggle {
 <div class='mobile-menu-fallback' aria-hidden="true">
   <div class='mobile-menu-fallback__header'>
     <button type='button' class='btn2' data-mobile-proxy="#menu-mobile" aria-label="Close menu">
-      <i class="fa-solid fa-chevron-left"></i>
+      <i class="fa-solid fa-xmark"></i>
     </button>
     <img class='mobile-menu-fallback__logo' src="/pinokio-black.png" alt="" aria-hidden="true">
     <div>Pinokio</div>
   </div>
   <div class='mobile-menu-fallback__body'>
+    <div class='workspace-mode-switch' role="tablist" aria-label="Workspace mode">
+      <a class="workspace-mode-link <%=type === 'run' ? 'selected' : ''%>" href="<%=run_tab%>" role="tab" aria-selected="<%=type === 'run' ? 'true' : 'false'%>">
+        <i class="fa-solid fa-circle-play"></i>
+        <span>Run</span>
+      </a>
+      <a class="workspace-mode-link <%=type === 'browse' || type === 'files' ? 'selected' : ''%>" href="<%=dev_tab%>" role="tab" aria-selected="<%=type === 'browse' || type === 'files' ? 'true' : 'false'%>">
+        <i class="fa-solid fa-terminal"></i>
+        <span>Dev</span>
+      </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>
@@ -5635,7 +7045,16 @@ header.navheader .mode-selector .community-mode-toggle {
   let cursorIndex = 0;
   let interacted = false
   let global_selector
+  <% if (type === 'browse' && dev_initial_tab === 'files') { %>
+  global_selector = "#filestab.frame-link"
+  try {
+    const devTabUrl = new URL(window.location.href)
+    devTabUrl.searchParams.delete("pinokio_dev_tab")
+    window.history.replaceState(window.history.state, "", `${devTabUrl.pathname}${devTabUrl.search}${devTabUrl.hash}`)
+  } catch (_) {}
+  <% } %>
   let pendingSelectionRetry = null
+  let pendingHomeSelectionRetry = null
   let initialWorkspaceDiskUsageRequested = false
   const scheduleSelectionRetry = (delay = 100) => {
     if (pendingSelectionRetry !== null) {
@@ -5654,7 +7073,35 @@ header.navheader .mode-selector .community-mode-toggle {
       return false
     }
   })()
-  let ignorePersistedSelection = pluginLaunchActive
+  const HOME_SELECTION_PARAM = "pinokio_home_select"
+  const consumeInitialHomeSelectionPayload = () => {
+    let params
+    let raw
+    try {
+      params = new URLSearchParams(window.location.search)
+      raw = params.get(HOME_SELECTION_PARAM)
+    } catch (_) {
+      return null
+    }
+    if (!raw) {
+      return null
+    }
+    try {
+      params.delete(HOME_SELECTION_PARAM)
+      const query = params.toString()
+      const nextUrl = `${window.location.pathname}${query ? `?${query}` : ""}${window.location.hash || ""}`
+      window.history.replaceState(window.history.state, "", nextUrl)
+    } catch (_) {}
+    try {
+      const parsed = JSON.parse(raw)
+      return parsed && typeof parsed === "object" ? parsed : null
+    } catch (_) {
+      return null
+    }
+  }
+  let initialHomeSelectionPayload = consumeInitialHomeSelectionPayload()
+  let initialHomeSelectionRetries = 0
+  let ignorePersistedSelection = pluginLaunchActive || Boolean(initialHomeSelectionPayload)
   let lastForegroundSignature = null
   const browserPopoutSurface = window.createBrowserPopoutSurface({
     onShow: () => {
@@ -5861,6 +7308,27 @@ header.navheader .mode-selector .community-mode-toggle {
     }
     return value.replace(/([ #;?%&,.+*~':"!^$\\\[\]()=>|\/])/g, '\\$1')
   }
+  const escapeTabHtml = (value) => {
+    if (value === null || value === undefined) {
+      return ""
+    }
+    return String(value).replace(/[&<>"']/g, (match) => {
+      switch (match) {
+        case "&":
+          return "&amp;"
+        case "<":
+          return "&lt;"
+        case ">":
+          return "&gt;"
+        case "\"":
+          return "&quot;"
+        case "'":
+          return "&#39;"
+        default:
+          return match
+      }
+    })
+  }
   const previewClass = "tab-preview"
   const tabMainClass = "tab-main"
   const tabDetailsClass = "tab-details"
@@ -6089,11 +7557,66 @@ header.navheader .mode-selector .community-mode-toggle {
     if (!node && payload.target) {
       node = trySelector(`.frame-link[target='${escapeTargetSelector(payload.target)}']`)
     }
+    const dataLookups = [
+      ['dataTargetFull', 'data-target-full'],
+      ['dataShell', 'data-shell'],
+      ['dataScript', 'data-script'],
+      ['dataAction', 'data-action'],
+      ['dataRun', 'data-run'],
+      ['dataCommand', 'data-command'],
+      ['dataFilepath', 'data-filepath']
+    ]
+    for (const [key, attr] of dataLookups) {
+      if (!node && payload[key]) {
+        node = trySelector(`.frame-link[${attr}='${escapeTargetSelector(payload[key])}']`)
+      }
+    }
     if (!node && payload.href) {
       node = findLinkByAbsoluteHref(payload.href)
     }
+    if (!node && payload.textValue) {
+      node = Array.from(document.querySelectorAll('.frame-link')).find((candidate) => {
+        const tab = candidate.querySelector('.tab')
+        return tab && tab.textContent.trim() === payload.textValue
+      }) || null
+    }
     return node
   }
+  const scheduleInitialHomeSelectionRetry = (delay = 100) => {
+    if (pendingHomeSelectionRetry !== null) {
+      return
+    }
+    pendingHomeSelectionRetry = setTimeout(() => {
+      pendingHomeSelectionRetry = null
+      dispatchInitialHomeSelection()
+    }, delay)
+  }
+  const dispatchInitialHomeSelection = () => {
+    if (!initialHomeSelectionPayload) {
+      return false
+    }
+    const target = restorePersistedFrameLink(initialHomeSelectionPayload)
+    if (!target) {
+      initialHomeSelectionRetries += 1
+      if (initialHomeSelectionRetries <= 20) {
+        scheduleInitialHomeSelectionRetry()
+      } else {
+        initialHomeSelectionPayload = null
+        ignorePersistedSelection = pluginLaunchActive
+        renderSelection({ force: true })
+      }
+      return false
+    }
+    initialHomeSelectionPayload = null
+    initialHomeSelectionRetries = 0
+    ignorePersistedSelection = pluginLaunchActive
+    target.dispatchEvent(new MouseEvent("click", {
+      bubbles: true,
+      cancelable: true,
+      view: window
+    }))
+    return true
+  }
   const persistTabStateStore = () => {
     const storage = getWindowStorage()
     if (!storage) {
@@ -6314,7 +7837,7 @@ header.navheader .mode-selector .community-mode-toggle {
     const href = typeof launch.href === "string" ? launch.href : ""
     try {
       const parsed = new URL(href, window.location.origin)
-      if (parsed.pathname.startsWith("/run/plugin/") || (parsed.pathname.startsWith("/run/api/") && /\/pinokio\.js$/i.test(parsed.pathname))) {
+      if (parsed.pathname.startsWith("/run/plugin/") || parsed.pathname.startsWith("/pinokio/run/plugin/") || (parsed.pathname.startsWith("/run/api/") && /\/pinokio\.js$/i.test(parsed.pathname))) {
         const parts = parsed.pathname.split("/").filter(Boolean)
         const pluginSlug = parts.length >= 2 ? parts[parts.length - 2] : ""
         const pluginLabel = titleCaseSlug(pluginSlug)
@@ -7185,6 +8708,9 @@ const rerenderMenuSection = (container, html) => {
 
     if (!target) {
       syncActiveNestedPath()
+      if (typeof syncLogsSelectedState === "function") {
+        syncLogsSelectedState(null)
+      }
       browserPopoutSurface.hide()
       document.querySelector(".container").classList.remove("active")
       document.querySelector("aside").classList.add("active")
@@ -7218,6 +8744,9 @@ const rerenderMenuSection = (container, html) => {
     })
     target.classList.add("selected")
     syncActiveNestedPath({ selectedLink: target })
+    if (typeof syncLogsSelectedState === "function") {
+      syncLogsSelectedState(target)
+    }
     if (skipPersistedSelection && target.hasAttribute('data-default')) {
       ignorePersistedSelection = false
     }
@@ -7521,11 +9050,12 @@ const rerenderMenuSection = (container, html) => {
         tabs
       })
     })
-  }
+	  }
   const addTab = async (url, options = {}) => {
     const label = typeof options.label === 'string' && options.label.trim().length > 0 ? options.label.trim() : null
     const providedTarget = typeof options.target === 'string' && options.target.trim().length > 0 ? options.target.trim() : null
-    const shouldPersist = options.persist !== false
+    const internalTab = options.internal === true
+    const shouldPersist = options.persist !== false && !internalTab
     const isShellTab = (() => {
       try {
         return new URL(url, window.location.origin).pathname.startsWith("/shell/")
@@ -7543,6 +9073,12 @@ const rerenderMenuSection = (container, html) => {
     item.href = url
     item.setAttribute("data-index", index)
     item.className = "btn header-item frame-link"
+    if (internalTab) {
+      item.classList.add("hidden")
+      item.dataset.internal = "true"
+      item.setAttribute("aria-hidden", "true")
+      item.tabIndex = -1
+    }
     if (isShellTab) {
       item.dataset.shellTab = "1"
     }
@@ -7551,8 +9087,8 @@ const rerenderMenuSection = (container, html) => {
     }
     const displayText = label || url
     item.innerHTML = isShellTab
-      ? `<div class='tab'><i class="fa-solid fa-link"></i><div class='display'>${escapeHtml(displayText)}</div><div class='flexible'></div></div>`
-      : `<div class='tab'><i class="fa-solid fa-link"></i><div class='display'>${escapeHtml(displayText)}</div><div class='flexible'></div><button class='btn2 del'><i class="fa-solid fa-xmark"></i></button></div>`
+      ? `<div class='tab'><i class="fa-solid fa-link"></i><div class='display'>${escapeTabHtml(displayText)}</div><div class='flexible'></div></div>`
+      : `<div class='tab'><i class="fa-solid fa-link"></i><div class='display'>${escapeTabHtml(displayText)}</div><div class='flexible'></div><button class='btn2 del'><i class="fa-solid fa-xmark"></i></button></div>`
 
     document.querySelector(".temp-menu").appendChild(item)
 
@@ -7576,11 +9112,239 @@ const rerenderMenuSection = (container, html) => {
     }
 
 
-    return {
-      tab: item,
-      frame
-    }
+	    return {
+	      tab: item,
+	      frame
+	    }
 
+	  }
+	  const appLogsName = <%- JSON.stringify(name || "") %>
+	  const logsNotificationKey = `pinokio.logs.new:${appLogsName}`
+	  const logsToggleButton = document.getElementById("logs-toggle")
+	  const logsNewBadge = document.getElementById("logs-new-badge")
+	  const mobileLogsButton = document.querySelector(".mobile-nav-logs")
+	  const setLogsSelected = (active) => {
+	    const selected = Boolean(active)
+	    if (logsToggleButton) {
+	      logsToggleButton.classList.toggle("selected", selected)
+	      logsToggleButton.setAttribute("aria-expanded", selected ? "true" : "false")
+	    }
+	    if (mobileLogsButton) {
+	      mobileLogsButton.classList.toggle("selected", selected)
+	      mobileLogsButton.setAttribute("aria-pressed", selected ? "true" : "false")
+	    }
+	  }
+	  const setLogsNewBadge = (active) => {
+	    const show = Boolean(active)
+	    if (logsToggleButton) {
+	      logsToggleButton.classList.toggle("has-new", show)
+	    }
+	    if (logsNewBadge) {
+	      logsNewBadge.classList.toggle("hidden", !show)
+	    }
+	    if (mobileLogsButton) {
+	      mobileLogsButton.classList.toggle("has-new", show)
+	      mobileLogsButton.setAttribute("aria-label", show ? "Logs, new issue" : "Logs")
+	    }
+	    try {
+	      if (show) {
+	        window.sessionStorage.setItem(logsNotificationKey, "1")
+	      } else {
+	        window.sessionStorage.removeItem(logsNotificationKey)
+	      }
+	    } catch (_) {}
+	  }
+  const buildEmbeddedLogsUrl = (view = "latest") => {
+    const url = new URL("/logs", window.location.origin)
+    url.searchParams.set("workspace", appLogsName)
+    url.searchParams.set("embed", "1")
+    url.searchParams.set("view", view === "raw" ? "raw" : "latest")
+    return `${url.pathname}${url.search}`
+  }
+		  const isLogsLink = (link) => {
+		    if (!link) return false
+		    try {
+		      const parsed = new URL(link.href, window.location.origin)
+		      return parsed.pathname === "/logs" && parsed.searchParams.get("workspace") === appLogsName
+		    } catch (_) {
+		      return false
+		    }
+		  }
+		  let lastNonLogsSelectedLink = null
+		  const isSelectableLogsFallbackLink = (link) => {
+		    return Boolean(
+		      link &&
+		      link.classList &&
+		      link.classList.contains("frame-link") &&
+		      !isLogsLink(link) &&
+		      !link.classList.contains("hidden") &&
+		      !link.closest(".hidden") &&
+		      !link.classList.contains("reveal") &&
+		      !link.hasAttribute("data-filepath") &&
+		      !link.hasAttribute("data-action") &&
+		      link.getAttribute("target") !== "_blank" &&
+		      link.href
+		    )
+		  }
+		  const rememberNonLogsSelection = (link) => {
+		    if (isSelectableLogsFallbackLink(link)) {
+		      lastNonLogsSelectedLink = link
+		    }
+		  }
+		  const findLogsFallbackLink = () => {
+		    if (lastNonLogsSelectedLink && document.contains(lastNonLogsSelectedLink) && isSelectableLogsFallbackLink(lastNonLogsSelectedLink)) {
+		      return lastNonLogsSelectedLink
+		    }
+		    const candidates = [
+		      document.querySelector(".frame-link.selected"),
+		      document.querySelector("[data-default].frame-link"),
+		      document.querySelector("#devtab.frame-link")
+		    ]
+		    for (const candidate of candidates) {
+		      if (isSelectableLogsFallbackLink(candidate)) {
+		        return candidate
+		      }
+		    }
+		    return Array.from(document.querySelectorAll("aside .frame-link")).find(isSelectableLogsFallbackLink) || null
+		  }
+		  const markLogsLinkInternal = (link) => {
+		    if (!link) return
+		    link.classList.add("hidden")
+	    link.dataset.internal = "true"
+	    link.dataset.persist = "false"
+	    link.setAttribute("aria-hidden", "true")
+	    link.tabIndex = -1
+	  }
+		  const syncLogsSelectedState = (selectedLink = undefined) => {
+		    const link = selectedLink === undefined ? document.querySelector(".frame-link.selected") : selectedLink
+		    const drawerOpen = !!(document.querySelector(".appcanvas") && document.querySelector(".appcanvas").classList.contains("logs-open"))
+		    const logsSelected = drawerOpen || isLogsLink(link)
+		    if (!logsSelected) {
+		      rememberNonLogsSelection(link)
+		    }
+		    setLogsSelected(logsSelected)
+		  }
+		  window.PinokioIsLogsPageSelected = () => isLogsLink(document.querySelector(".frame-link.selected"))
+		  window.PinokioSyncLogsSelectedState = syncLogsSelectedState
+		  Array.from(document.querySelectorAll('.temp-menu .frame-link')).filter(isLogsLink).forEach(markLogsLinkInternal)
+		  window.PinokioCloseLogsPage = async () => {
+		    const logsLinks = Array.from(document.querySelectorAll('.temp-menu .frame-link')).filter(isLogsLink)
+		    for (const link of logsLinks) {
+		      const frameName = link.getAttribute("target") || ""
+		      const escapedFrameName = escapeTargetSelector(frameName)
+		      const frame = escapedFrameName ? document.querySelector(`main.browserview iframe[name="${escapedFrameName}"]`) : null
+		      if (frame) {
+		        frame.remove()
+		      }
+		      link.remove()
+		    }
+		    setLogsSelected(false)
+		    await syncTabs()
+		    const fallbackLink = findLogsFallbackLink()
+		    if (fallbackLink) {
+		      await renderSelection({ target: fallbackLink, force: true })
+		    } else {
+		      await renderSelection({ force: true })
+		    }
+		  }
+		  window.PinokioOpenLogsPage = async (options = {}) => {
+		    const view = options && options.view === "raw" ? "raw" : "latest"
+		    const relativeUrl = buildEmbeddedLogsUrl(view)
+		    const existingLink = Array.from(document.querySelectorAll('.temp-menu .frame-link')).find(isLogsLink)
+		    rememberNonLogsSelection(document.querySelector(".frame-link.selected"))
+		    setLogsNewBadge(false)
+		    setLogsSelected(true)
+	    if (existingLink) {
+	      markLogsLinkInternal(existingLink)
+	      const display = existingLink.querySelector('.display')
+	      if (display) {
+	        display.textContent = 'Logs'
+	      }
+	      try {
+	        const frameName = existingLink.getAttribute("target") || ""
+	        const escapedFrameName = frameName && window.CSS && typeof window.CSS.escape === "function" ? window.CSS.escape(frameName) : frameName.replace(/["\\]/g, "\\$&")
+	        const frame = frameName ? document.querySelector(`main.browserview iframe[name="${escapedFrameName}"]`) : null
+	        if (frame) {
+	          frame.src = relativeUrl
+	        }
+	        existingLink.href = relativeUrl
+	      } catch (_) {
+	        existingLink.href = relativeUrl
+	      }
+	      existingLink.click()
+	      return
+	    }
+	    const { tab } = await addTab(relativeUrl, { label: 'Logs', target: 'pinokio-logs', persist: false, internal: true })
+	    requestAnimationFrame(() => {
+	      tab.click()
+	    })
+	  }
+	  try {
+	    setLogsNewBadge(window.sessionStorage.getItem(logsNotificationKey) === "1")
+	  } catch (_) {}
+	  if (document.querySelector(".appcanvas") && document.querySelector(".appcanvas").dataset.pageError === "1") {
+	    setLogsNewBadge(true)
+	  }
+  const pluginInstallPreflightCache = new Map()
+  const normalizePluginPathFromLaunchHref = (rawHref) => {
+    if (!rawHref || typeof rawHref !== "string") {
+      return ""
+    }
+    try {
+      const parsed = new URL(rawHref, window.location.origin)
+      if (parsed.origin !== window.location.origin) {
+        return ""
+      }
+      if (parsed.pathname.startsWith("/pinokio/run/plugin/")) {
+        return parsed.pathname
+      }
+      if (parsed.pathname.startsWith("/run/plugin/") || (parsed.pathname.startsWith("/run/api/") && /\/pinokio\.js$/i.test(parsed.pathname))) {
+        return parsed.pathname.replace(/^\/run/, "")
+      }
+    } catch (_) {}
+    return ""
+  }
+  const pluginInstallHrefFromState = (state, fallbackPath) => {
+    const detailUrl = state && typeof state.detailUrl === "string" && state.detailUrl
+      ? state.detailUrl
+      : `/plugin?path=${encodeURIComponent(fallbackPath)}`
+    try {
+      const parsed = new URL(detailUrl, window.location.origin)
+      parsed.searchParams.set("next", "install")
+      return `${parsed.pathname}${parsed.search}${parsed.hash}`
+    } catch (_) {
+      const separator = detailUrl.includes("?") ? "&" : "?"
+      return `${detailUrl}${separator}next=install`
+    }
+  }
+  const getPluginInstallRedirect = async (rawHref) => {
+    const pluginPath = normalizePluginPathFromLaunchHref(rawHref)
+    if (!pluginPath) {
+      return ""
+    }
+    if (pluginInstallPreflightCache.has(pluginPath)) {
+      return pluginInstallPreflightCache.get(pluginPath)
+    }
+    let redirectHref = ""
+    try {
+      const response = await fetch(`/api/plugin/install-state?path=${encodeURIComponent(pluginPath)}`, {
+        cache: "no-store"
+      })
+      const state = await response.json().catch(() => ({}))
+      if (response.ok && state && state.ok && state.hasInstall && state.hasInstalledCheck && state.installed === false) {
+        redirectHref = pluginInstallHrefFromState(state, pluginPath)
+      }
+    } catch (_) {}
+    pluginInstallPreflightCache.set(pluginPath, redirectHref)
+    return redirectHref
+  }
+  const redirectToPluginInstallIfNeeded = async (rawHref) => {
+    const redirectHref = await getPluginInstallRedirect(rawHref)
+    if (!redirectHref) {
+      return false
+    }
+    window.location.href = redirectHref
+    return true
   }
   const handleLaunchRequest = async (launch = {}, options = {}) => {
     const rawName = typeof launch.name === "string" ? launch.name.trim() : ""
@@ -7588,6 +9352,9 @@ const rerenderMenuSection = (container, html) => {
     if (!rawName || !rawHref) {
       return null
     }
+    if (await redirectToPluginInstallIfNeeded(rawHref)) {
+      return null
+    }
     let link = findFrameLinkByTarget(rawName)
     if (!link) {
       const created = await addTab(rawHref, {
@@ -7666,10 +9433,12 @@ const rerenderMenuSection = (container, html) => {
     try {
       const pageUrl = new URL(window.location.href)
       const pluginPath = pageUrl.searchParams.get("plugin")
-      if (!pluginPath || (!pluginPath.startsWith("/plugin/") && !pluginPath.startsWith("/api/"))) {
+      const isSystemPlugin = pluginPath && pluginPath.startsWith("/pinokio/run/plugin/")
+      const isLocalPlugin = pluginPath && (pluginPath.startsWith("/plugin/") || pluginPath.startsWith("/api/"))
+      if (!pluginPath || (!isSystemPlugin && !isLocalPlugin)) {
         return null
       }
-      const launchUrl = new URL(`/run${pluginPath}`, window.location.origin)
+      const launchUrl = new URL(isSystemPlugin ? pluginPath : `/run${pluginPath}`, window.location.origin)
       if (appWorkspacePath && !launchUrl.searchParams.has("cwd")) {
         launchUrl.searchParams.set("cwd", appWorkspacePath)
       }
@@ -7753,7 +9522,6 @@ const rerenderMenuSection = (container, html) => {
     const communityModeActive = !!(appcanvas && appcanvas.classList.contains("community-mode"))
     const askAiOpen = !!(appcanvas && appcanvas.classList.contains("panel-open"))
     const mobileMenuFallback = document.querySelector(".mobile-menu-fallback")
-    const currentView = document.body.getAttribute("data-view")
     const closeSectionVisible = !!(closeWindowButton && !closeWindowButton.classList.contains("hidden"))
 
     document.querySelectorAll(".mobile-nav-menu").forEach((button) => {
@@ -7768,12 +9536,9 @@ const rerenderMenuSection = (container, html) => {
       button.classList.toggle("selected", askAiOpen)
       button.setAttribute("aria-pressed", askAiOpen ? "true" : "false")
     })
-    document.querySelectorAll(".mobile-mode-segment").forEach((segment) => {
-      const segmentMode = segment.getAttribute("data-mobile-mode")
-      const active = !communityModeActive && segmentMode === currentView
-      segment.classList.toggle("selected", active)
-      segment.setAttribute("aria-selected", active ? "true" : "false")
-    })
+    if (typeof syncLogsSelectedState === "function") {
+      syncLogsSelectedState()
+    }
     document.querySelectorAll(".mobile-close-window-action").forEach((button) => {
       button.classList.toggle("hidden", !closeSectionVisible)
       button.setAttribute("aria-hidden", closeSectionVisible ? "false" : "true")
@@ -8041,8 +9806,6 @@ const rerenderMenuSection = (container, html) => {
     }
   }
 
-  const nestedMenuSelector = ".appcanvas > aside .m.menu .nested-menu"
-
   const getDirectChild = (parent, selector) => {
     if (!parent) {
       return null
@@ -8051,73 +9814,15 @@ const rerenderMenuSection = (container, html) => {
   }
 
   const getSubmenu = (menu) => getDirectChild(menu, ".submenu")
-  const getToggle = (menu) => getDirectChild(menu, ".reveal")
   const syncActiveNestedPath = () => {}
 
   renderSelection()
 
-  const resetSubmenuPosition = (submenu) => {
-    if (!submenu) {
-      return
-    }
-    submenu.style.removeProperty("left")
-    submenu.style.removeProperty("top")
-    submenu.style.removeProperty("position")
-    submenu.style.removeProperty("visibility")
-    submenu.style.removeProperty("z-index")
-  }
-
-  const getMenuDepth = (menu) => {
-    let depth = 0
-    let current = menu ? menu.parentElement : null
-    while (current) {
-      if (current.classList && current.classList.contains("submenu")) {
-        depth += 1
-      }
-      current = current.parentElement
-    }
-    return depth
-  }
-
-  const positionSubmenu = (submenu, toggle) => {
-    if (!submenu || !toggle) {
+  const toggleNestedMenu = (toggle) => {
+    if (!toggle) {
       return
     }
-    const menu = toggle.closest(nestedMenuSelector)
-    const depth = getMenuDepth(menu)
-    const padding = 12
-    submenu.style.visibility = "hidden"
-    submenu.style.position = "fixed"
-    submenu.style.left = "0px"
-    submenu.style.top = "0px"
-    submenu.style.zIndex = String(90 + depth * 2)
-
-    const bounds = submenu.getBoundingClientRect()
-    const anchor = toggle.getBoundingClientRect()
-    const nested = depth > 0
-
-    let left = nested ? anchor.right - 6 : anchor.left
-    if (left + bounds.width > window.innerWidth - padding) {
-      left = nested ? anchor.left - bounds.width + 6 : window.innerWidth - bounds.width - padding
-    }
-    if (left < padding) {
-      left = padding
-    }
-
-    let top = nested ? anchor.top : anchor.bottom + 6
-    if (top + bounds.height > window.innerHeight - padding) {
-      top = Math.max(window.innerHeight - bounds.height - padding, padding)
-    }
-    if (top < padding) {
-      top = padding
-    }
-
-    submenu.style.left = `${Math.round(left)}px`
-    submenu.style.top = `${Math.round(top)}px`
-    submenu.style.visibility = ""
-  }
-
-  const closeNestedMenu = (menu) => {
+    const menu = toggle.closest(".nested-menu")
     if (!menu) {
       return
     }
@@ -8125,92 +9830,16 @@ const rerenderMenuSection = (container, html) => {
     if (!submenu) {
       return
     }
-
-    const descendants = Array.from(submenu.querySelectorAll(".nested-menu.is-open"))
-    descendants.forEach((child) => closeNestedMenu(child))
-
-    if (!submenu.classList.contains("hidden")) {
-      submenu.classList.add("hidden")
-    }
-    resetSubmenuPosition(submenu)
-    menu.classList.remove("is-open")
-    setDropdownState(getToggle(menu), false)
-  }
-
-  const closeNestedSiblings = (menu) => {
-    if (!menu || !menu.parentElement) {
-      return
-    }
-    Array.from(menu.parentElement.children).forEach((sibling) => {
-      if (sibling !== menu && sibling.classList && sibling.classList.contains("nested-menu")) {
-        closeNestedMenu(sibling)
-      }
-    })
-  }
-
-  const closeAllNestedMenus = (exception) => {
-    const skip = exception ? exception.closest ? exception.closest(nestedMenuSelector) : exception : null
-    document.querySelectorAll(`${nestedMenuSelector}.is-open`).forEach((menu) => {
-      if (skip && (menu === skip || menu.contains(skip))) {
-        return
-      }
-      closeNestedMenu(menu)
-    })
+    const isHidden = submenu.classList.toggle("hidden")
+    menu.classList.toggle("is-open", !isHidden)
+    setDropdownState(toggle, !isHidden)
   }
 
   const closeFloatingMenus = () => {
     closeStatusDropdowns()
-    closeAllNestedMenus()
     hideTabLinkPopover({ immediate: true })
   }
 
-  const openNestedMenu = (menu, toggle) => {
-    if (!menu) {
-      return
-    }
-    const submenu = getSubmenu(menu)
-    if (!submenu) {
-      return
-    }
-    closeNestedSiblings(menu)
-    submenu.classList.remove("hidden")
-    positionSubmenu(submenu, toggle)
-    submenu.scrollTop = 0
-    menu.classList.add("is-open")
-    setDropdownState(toggle, true)
-    updateNestedMenuPositions()
-  }
-
-  const toggleNestedMenu = (toggle) => {
-    if (!toggle) {
-      return
-    }
-    const menu = toggle.closest(nestedMenuSelector)
-    if (!menu) {
-      return
-    }
-    const submenu = getSubmenu(menu)
-    if (!submenu) {
-      return
-    }
-    const shouldOpen = submenu.classList.contains("hidden")
-    if (shouldOpen) {
-      closeAllNestedMenus(menu)
-      openNestedMenu(menu, toggle)
-    } else {
-      closeNestedMenu(menu)
-    }
-  }
-
-  const updateNestedMenuPositions = () => {
-    document.querySelectorAll(`${nestedMenuSelector}.is-open`).forEach((menu) => {
-      const submenu = getSubmenu(menu)
-      const toggle = getToggle(menu)
-      if (submenu && toggle && !submenu.classList.contains("hidden")) {
-        positionSubmenu(submenu, toggle)
-      }
-    })
-  }
   const closeStatusDropdowns = (except) => {
     const exceptMenu = typeof except === "string" ? document.querySelector(except) : except
     document.querySelectorAll("#fs-status .fs-dropdown-menu").forEach((menu) => {
@@ -8429,6 +10058,15 @@ const rerenderMenuSection = (container, html) => {
         }
       }
 
+      const pluginLaunchHref = target.getAttribute("href") || target.href || ""
+      if (normalizePluginPathFromLaunchHref(pluginLaunchHref)) {
+        e.preventDefault()
+        if (await redirectToPluginInstallIfNeeded(pluginLaunchHref)) {
+          e.stopPropagation()
+          return
+        }
+      }
+
       const dropdownMenu = target.closest(".fs-dropdown-menu")
       if (dropdownMenu) {
         dropdownMenu.classList.add("hidden")
@@ -8484,8 +10122,6 @@ const rerenderMenuSection = (container, html) => {
         return
       }
 
-      closeAllNestedMenus()
-
       if (target.getAttribute("data-action")) {
         let actionStr = target.getAttribute("data-action")
         let action = JSON.parse(actionStr)
@@ -8535,7 +10171,12 @@ const rerenderMenuSection = (container, html) => {
     }
     renderSelection({ explicitTarget: link })
   }
-  const navContainers = [document.querySelector("aside"), document.querySelector("#fs-status")]
+  const asideNav = document.querySelector("aside")
+  const fsStatusNav = document.querySelector("#fs-status")
+  const navContainers = [asideNav]
+  if (fsStatusNav && !(asideNav && asideNav.contains(fsStatusNav))) {
+    navContainers.push(fsStatusNav)
+  }
   navContainers.forEach((container) => {
     if (container) {
       container.addEventListener("click", handleMenuClick)
@@ -8545,42 +10186,15 @@ const rerenderMenuSection = (container, html) => {
       })
     }
   })
+  dispatchInitialHomeSelection()
 
-  const layoutToggleButton = document.getElementById("layout-toggle")
-  if (layoutToggleButton) {
-    const layoutToggleIcon = layoutToggleButton.querySelector("i.fa-bars")
-    const appcanvas = document.querySelector(".appcanvas")
-    const sidebarResizer = document.getElementById("appcanvas-resizer")
-    const sidebarContainer = document.querySelector(".appcanvas > aside .menu-container")
-
-    if (appcanvas && typeof localStorage !== "undefined") {
-      const storedLayout = localStorage.getItem("pinokioLayoutVertical")
-      if (storedLayout === "1") {
-        appcanvas.classList.add("vertical")
-        if (layoutToggleIcon) {
-          layoutToggleIcon.classList.add("fa-rotate-90")
-        }
-      }
-    }
-
-    layoutToggleButton.addEventListener("click", () => {
-      if (!appcanvas) {
-        return
-      }
-      const isVertical = appcanvas.classList.toggle("vertical")
-      if (layoutToggleIcon) {
-        if (isVertical) {
-          layoutToggleIcon.classList.add("fa-rotate-90")
-        } else {
-          layoutToggleIcon.classList.remove("fa-rotate-90")
-        }
-      }
-      if (typeof localStorage !== "undefined") {
-        localStorage.setItem("pinokioLayoutVertical", isVertical ? "1" : "0")
-      }
-    })
+  const sidebarResizer = document.getElementById("appcanvas-resizer")
+  const sidebarContainer = document.querySelector(".appcanvas > aside .menu-container")
+  if (appcanvas) {
+    appcanvas.classList.add("vertical")
+  }
 
-    if (appcanvas && sidebarResizer && sidebarContainer) {
+  if (appcanvas && sidebarResizer && sidebarContainer) {
       const SIDEBAR_MIN_WIDTH = 140
       const SIDEBAR_MAX_WIDTH = 560
       const sidebarMobileQuery = window.matchMedia ? window.matchMedia("(max-width: 768px)") : null
@@ -8737,7 +10351,6 @@ const rerenderMenuSection = (container, html) => {
       }
 
       initSidebarWidth()
-    }
   }
   setupTabLinkHover()
   document.addEventListener("click", (event) => {
@@ -8745,9 +10358,6 @@ const rerenderMenuSection = (container, html) => {
       return
     }
     closeStatusDropdowns()
-    if (!event.target.closest(nestedMenuSelector)) {
-      closeAllNestedMenus()
-    }
   })
 
   document.addEventListener("keydown", (event) => {
@@ -8765,31 +10375,11 @@ const rerenderMenuSection = (container, html) => {
     }, 0)
   })
 
-  window.addEventListener("resize", () => {
-    updateNestedMenuPositions()
-  })
-
-  const nestedMenuScrollContainers = [
-    document.querySelector(".container"),
-    document.querySelector(".container .content"),
-    document.querySelector("main"),
-    document.querySelector(".appcanvas > aside .menu-container")
-  ].filter(Boolean)
-
-  nestedMenuScrollContainers.forEach((node) => {
-    node.addEventListener("scroll", () => {
-      updateNestedMenuPositions()
-    }, { passive: true })
-  })
-
-  window.addEventListener("scroll", () => {
-    updateNestedMenuPositions()
-  }, { passive: true })
   const refresh_du = (path) => {
     let url = path ? `/du/<%=name%>/${path}` : `/du/<%=name%>`
     let selector = `.disk-usage[data-path='/${path || ""}']`
-    let el = document.querySelector(selector)
-    if (el) {
+    let els = Array.from(document.querySelectorAll(selector))
+    if (els.length > 0) {
       fetch(url).then((res) => {
         return res.json()
       }).then((res) => {
@@ -8807,7 +10397,10 @@ const rerenderMenuSection = (container, html) => {
             // KB
             val = `${Math.floor(res.du/k * 100) / 100} KB`
           }
-          el.innerHTML = `<i class="fa-solid fa-database"></i> ${val}`
+          els.forEach((el) => {
+            const metricLabel = el.getAttribute("data-metric-label")
+            el.innerHTML = `<i class="fa-solid fa-database"></i> ${metricLabel ? `${metricLabel} ` : ""}${val}`
+          })
         } else {
         }
       })
@@ -8932,7 +10525,17 @@ const rerenderMenuSection = (container, html) => {
       if (String(port) === String(location.port) || /https:\/\/.*pinokio\..*(localhost|co)/.test(origin)) {
       //if (String(port) === "<%=port%>" || /https:\/\/pinokio\..*localhost/.test(origin)) {
       //if (String(port) === "<%=port%>") {
-        if (event.data) {
+	        if (event.data) {
+	          if (event.data.e === "pinokio:close-logs" || event.data.type === "pinokio:close-logs") {
+	            if (window.PinokioCloseLogsPage && typeof window.PinokioCloseLogsPage === "function") {
+	              await window.PinokioCloseLogsPage()
+	            }
+	            return
+	          }
+	          if (event.data.e === "pinokio:logs-new" || event.data.type === "pinokio:logs-new" || event.data.e === "pinokio:open-logs" || event.data.type === "pinokio:open-logs") {
+	            setLogsNewBadge(true)
+	            return
+          }
           if (event.data.action) {
             if (event.data.action.type === "newtab") {
               addTab(event.data.action.url)
@@ -9129,20 +10732,34 @@ const rerenderMenuSection = (container, html) => {
       return statusUri.includes('?') ? `${statusUri}&force=1` : `${statusUri}?force=1`
     }
 
-    const buildWorkspaceLogsUrl = () => {
-      if (workspaceName && workspaceName.length > 0) {
-        return `/logs?workspace=${encodeURIComponent(workspaceName)}`
-      }
-      return '/logs'
-    }
+	    const buildWorkspaceLogsUrl = () => {
+	      if (workspaceName && workspaceName.length > 0) {
+	        return `/logs?workspace=${encodeURIComponent(workspaceName)}&embed=1&view=latest`
+	      }
+	      return '/logs?embed=1&view=raw'
+	    }
 
-    const focusOrCreateLogsTab = async () => {
-      const relativeUrl = buildWorkspaceLogsUrl()
-      const absoluteUrl = new URL(relativeUrl, window.location.origin).toString()
-      const existingLink = Array.from(document.querySelectorAll('.temp-menu .frame-link')).find((link) => {
-        return link.href === absoluteUrl
-      })
+	    const focusOrCreateLogsTab = async () => {
+	      if (window.PinokioOpenLogsPage && typeof window.PinokioOpenLogsPage === "function") {
+	        await window.PinokioOpenLogsPage({ view: "latest" })
+	        return
+	      }
+	      const relativeUrl = buildWorkspaceLogsUrl()
+	      const absoluteUrl = new URL(relativeUrl, window.location.origin).toString()
+	      const existingLink = Array.from(document.querySelectorAll('.temp-menu .frame-link')).find((link) => {
+	        try {
+	          const parsed = new URL(link.href, window.location.origin)
+	          return parsed.pathname === "/logs" && parsed.searchParams.get("workspace") === workspaceName
+	        } catch (_) {
+	          return link.href === absoluteUrl
+	        }
+	      })
       if (existingLink) {
+        existingLink.classList.add("hidden")
+        existingLink.dataset.internal = "true"
+        existingLink.dataset.persist = "false"
+        existingLink.setAttribute("aria-hidden", "true")
+        existingLink.tabIndex = -1
         const display = existingLink.querySelector('.display')
         if (display) {
           display.textContent = 'Logs'
@@ -9150,7 +10767,7 @@ const rerenderMenuSection = (container, html) => {
         existingLink.click()
         return
       }
-      const { tab } = await addTab(relativeUrl, { label: 'Logs' })
+      const { tab } = await addTab(relativeUrl, { label: 'Logs', persist: false, internal: true })
       requestAnimationFrame(() => {
         tab.click()
       })
@@ -9924,6 +11541,13 @@ const rerenderMenuSection = (container, html) => {
       if (!changesMenu) {
         return
       }
+      const keepChangesMenuOpen = () => {
+        if (!changesMenu || !changesBtn) {
+          return
+        }
+        changesMenu.classList.remove('hidden')
+        setDropdownState(changesBtn, true)
+      }
       const items = changesMenu.querySelectorAll('.git-changes-item')
       items.forEach((item) => {
         item.addEventListener('click', async (event) => {
@@ -9941,11 +11565,13 @@ const rerenderMenuSection = (container, html) => {
               node.classList.remove('git-changes-item--active')
             }
           })
-          closeStatusDropdowns()
+          keepChangesMenuOpen()
           try {
             await showGitDiffModal({ repoParam: repoKey, repoName })
           } catch (err) {
             console.error('Failed to open diff modal:', err)
+          } finally {
+            keepChangesMenuOpen()
           }
         })
       })
@@ -11984,7 +13610,7 @@ const rerenderMenuSection = (container, html) => {
               </div>
               <div class="pinokio-modal-footer pinokio-modal-footer--create">
                 <button type="button" class="pinokio-modal-secondary-btn" data-create-cancel>Cancel</button>
-                <button type="button" class="pinokio-publish-close-btn" data-create-next>Next</button>
+                <button type="button" class="pinokio-publish-close-btn" data-create-close>Close</button>
               </div>
             </div>
           `,
@@ -12003,11 +13629,11 @@ const rerenderMenuSection = (container, html) => {
           allowEscapeKey: false,
           focusConfirm: false,
           didOpen: (popup) => {
-            const nextBtn = popup.querySelector('[data-create-next]')
+            const closeBtn = popup.querySelector('[data-create-close]')
             const cancelBtn = popup.querySelector('[data-create-cancel]')
-            if (nextBtn) {
-              nextBtn.addEventListener('click', () => {
-                finalize({ completed: true, action: 'next', name, isPrivate })
+            if (closeBtn) {
+              closeBtn.addEventListener('click', () => {
+                finalize({ completed: true, action: 'close', name, isPrivate })
                 Swal.close()
               })
             }
@@ -12519,152 +14145,249 @@ const rerenderMenuSection = (container, html) => {
   }, 1000)
 
   </script>
-<% } %>
 <script>
 (() => {
-  const aside = document.querySelector(".appcanvas > aside")
-  if (!aside) {
+  const workspaceName = <%- JSON.stringify(typeof name === "string" ? name : "") %>
+  const roots = Array.from(document.querySelectorAll("[data-resource-usage-root]"))
+  if (!workspaceName || roots.length === 0) {
     return
   }
 
-  const collapsedClass = "appcanvas-aside-collapsed"
-  const animatingClass = "appcanvas-aside-animating"
-  const collapseDuration = 420
-  const collapseEasing = "cubic-bezier(0.22, 1, 0.36, 1)"
-  const expandEasing = "cubic-bezier(0.18, 0.85, 0.4, 1)"
+  let preferences = {
+    show_ram: true,
+    show_vram: true,
+    show_cpu: false
+  }
+  let refreshTimer = null
+  let refreshInFlight = false
 
-  let transitionHandler = null
-  let queuedFrame = null
+  const closePopovers = (exceptRoot = null) => {
+    roots.forEach((root) => {
+      if (root === exceptRoot) return
+      const trigger = root.querySelector("[data-resource-usage-trigger]")
+      const popover = root.querySelector("[data-resource-usage-popover]")
+      if (trigger) trigger.setAttribute("aria-expanded", "false")
+      if (popover) popover.classList.add("hidden")
+    })
+  }
 
-  const clearAnimation = () => {
-    if (transitionHandler) {
-      aside.removeEventListener("transitionend", transitionHandler)
-      transitionHandler = null
-    }
-    if (queuedFrame !== null) {
-      cancelAnimationFrame(queuedFrame)
-      queuedFrame = null
+  const applyPreferences = (nextPreferences = {}) => {
+    preferences = {
+      ...preferences,
+      ...nextPreferences
     }
-    aside.classList.remove(animatingClass)
-    aside.style.transition = ""
-    aside.style.height = ""
-    aside.style.opacity = ""
+    roots.forEach((root) => {
+      root.querySelectorAll("[data-resource-toggle]").forEach((toggle) => {
+        const key = toggle.getAttribute("data-resource-toggle")
+        toggle.setAttribute("aria-checked", preferences[key] ? "true" : "false")
+      })
+    })
   }
 
-  const finish = (minimized) => {
-    aside.classList.toggle(collapsedClass, minimized)
-    aside.classList.remove(animatingClass)
-    aside.style.transition = ""
-    aside.style.height = ""
-    aside.style.opacity = ""
-    aside.dataset.asideState = minimized ? "collapsed" : "expanded"
+  const setStatus = (text) => {
+    roots.forEach((root) => {
+      const status = root.querySelector("[data-resource-usage-status]")
+      if (status) status.textContent = text
+    })
+  }
+
+  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 collapse = (immediate) => {
-    if (aside.dataset.asideState === "collapsed" && !immediate) {
+  const updateFromUsage = (usage) => {
+    if (!usage || !usage.ok) {
+      setStatus("Usage unavailable")
+      setChip("cpu", false, "CPU --")
+      setChip("ram", false, "RAM --")
+      setChip("vram", false, "VRAM --")
       return
     }
-    clearAnimation()
-    if (immediate) {
-      finish(true)
-      return
+    applyPreferences(usage.preferences || {})
+
+    const metrics = usage.metrics || {}
+    const ram = metrics.ram || {}
+    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 || "--"}`)
+
+    if (!usage.running) {
+      setStatus("No running app process")
+    } else if (usage.stale) {
+      setStatus("Showing last sampled usage")
+    } else {
+      setStatus("Updated just now")
     }
-    const startHeight = aside.getBoundingClientRect().height
-    if (startHeight <= 0.5) {
-      finish(true)
+  }
+
+  const fetchUsage = async () => {
+    if (refreshInFlight || document.hidden) {
       return
     }
+    refreshInFlight = true
+    try {
+      const response = await fetch(`/resource-usage/workspace/${encodeURIComponent(workspaceName)}`, {
+        cache: "no-store"
+      })
+      updateFromUsage(await response.json())
+    } catch (_) {
+      setStatus("Usage unavailable")
+    } finally {
+      refreshInFlight = false
+    }
+  }
 
-    aside.classList.add(animatingClass)
-    aside.style.height = `${startHeight}px`
-    aside.style.opacity = getComputedStyle(aside).opacity || "1"
-    aside.dataset.asideState = "animating"
-
-    queuedFrame = requestAnimationFrame(() => {
-      queuedFrame = null
-      aside.style.transition = `height ${collapseDuration}ms ${collapseEasing}, opacity ${collapseDuration - 120}ms ease`
-      aside.style.height = "0px"
-      aside.style.opacity = "0"
-    })
-
-    transitionHandler = (event) => {
-      if (event.target !== aside || event.propertyName !== "height") {
-        return
-      }
-      aside.removeEventListener("transitionend", transitionHandler)
-      transitionHandler = null
-      finish(true)
+  const scheduleRefresh = () => {
+    if (refreshTimer) {
+      window.clearTimeout(refreshTimer)
     }
-    aside.addEventListener("transitionend", transitionHandler)
+    refreshTimer = window.setTimeout(async () => {
+      await fetchUsage()
+      scheduleRefresh()
+    }, 5000)
   }
 
-  const expand = (immediate) => {
-    if (aside.dataset.asideState === "expanded" && !immediate) {
+  roots.forEach((root) => {
+    const trigger = root.querySelector("[data-resource-usage-trigger]")
+    const popover = root.querySelector("[data-resource-usage-popover]")
+    if (trigger && popover) {
+      trigger.addEventListener("click", (event) => {
+        event.preventDefault()
+        event.stopPropagation()
+        const isOpen = !popover.classList.contains("hidden")
+        closePopovers(root)
+        popover.classList.toggle("hidden", isOpen)
+        trigger.setAttribute("aria-expanded", isOpen ? "false" : "true")
+      })
+    }
+    root.querySelectorAll("[data-resource-toggle]").forEach((toggle) => {
+      toggle.addEventListener("click", async (event) => {
+        event.preventDefault()
+        event.stopPropagation()
+        const key = toggle.getAttribute("data-resource-toggle")
+        const previous = { ...preferences }
+        const next = {
+          ...preferences,
+          [key]: !preferences[key]
+        }
+        applyPreferences(next)
+        try {
+          const response = await fetch("/resource-usage/preferences", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify(next)
+          })
+          const result = await response.json()
+          applyPreferences(result.preferences || next)
+          await fetchUsage()
+        } catch (_) {
+          setStatus("Could not save resource settings")
+          applyPreferences(previous)
+        }
+      })
+    })
+  })
+
+  document.addEventListener("pointerdown", (event) => {
+    const target = event.target
+    if (target && target.closest && target.closest("[data-resource-usage-root]")) {
       return
     }
-    clearAnimation()
-    if (immediate) {
-      finish(false)
-      return
+    closePopovers()
+  }, true)
+  window.addEventListener("blur", () => {
+    window.setTimeout(() => {
+      const activeElement = document.activeElement
+      if (activeElement && activeElement.tagName === "IFRAME") {
+        closePopovers()
+      }
+    }, 0)
+  })
+  document.addEventListener("keydown", (event) => {
+    if (event.key === "Escape") {
+      closePopovers()
     }
+  })
+  document.addEventListener("visibilitychange", () => {
+    if (!document.hidden) {
+      fetchUsage()
+      scheduleRefresh()
+    }
+  })
 
-    aside.classList.remove(collapsedClass)
-    const targetHeight = aside.scrollHeight
-    aside.classList.add(animatingClass)
-    aside.style.height = "0px"
-    aside.style.opacity = "0"
-    aside.dataset.asideState = "animating"
-
-    aside.offsetHeight
+  applyPreferences(preferences)
+  fetchUsage()
+  scheduleRefresh()
+})()
+</script>
+<script>
+(() => {
+  const appcanvas = document.querySelector(".appcanvas")
+  const aside = document.getElementById("app-sidebar")
+  const toggle = document.getElementById("sidebar-toggle")
+  if (!appcanvas || !aside || !toggle) {
+    if (toggle) {
+      toggle.classList.add("hidden")
+    }
+    return
+  }
 
-    queuedFrame = requestAnimationFrame(() => {
-      queuedFrame = null
-      aside.style.transition = `height ${collapseDuration}ms ${expandEasing}, opacity ${collapseDuration - 140}ms ease`
-      aside.style.height = `${targetHeight}px`
-      aside.style.opacity = ""
-    })
+  const workspaceName = <%- JSON.stringify(typeof name === "string" ? name : "") %>
+  const storageKey = workspaceName
+    ? `pinokio.sidebar-collapsed:${workspaceName}`
+    : `pinokio.sidebar-collapsed:${location.pathname}`
 
-    transitionHandler = (event) => {
-      if (event.target !== aside || event.propertyName !== "height") {
-        return
-      }
-      aside.removeEventListener("transitionend", transitionHandler)
-      transitionHandler = null
-      finish(false)
+  const updateToggle = (collapsed) => {
+    const expanded = !collapsed
+    const label = expanded ? "Hide sidebar" : "Show sidebar"
+    toggle.setAttribute("aria-expanded", expanded ? "true" : "false")
+    toggle.setAttribute("aria-label", label)
+    toggle.setAttribute("title", label)
+    toggle.setAttribute("data-tippy-content", label)
+    toggle.dataset.sidebarState = expanded ? "expanded" : "collapsed"
+    if (toggle._tippy && typeof toggle._tippy.setContent === "function") {
+      toggle._tippy.setContent(label)
     }
-    aside.addEventListener("transitionend", transitionHandler)
   }
 
-  const setAside = (minimized, immediate) => {
-    if (minimized) {
-      collapse(immediate)
-    } else {
-      expand(immediate)
+  const setCollapsed = (collapsed, options = {}) => {
+    const next = !!collapsed
+    appcanvas.classList.toggle("sidebar-collapsed", next)
+    aside.setAttribute("aria-hidden", next ? "true" : "false")
+    updateToggle(next)
+    if (options.persist !== false) {
+      try {
+        window.localStorage.setItem(storageKey, next ? "1" : "0")
+      } catch (_) {}
     }
+    document.dispatchEvent(new CustomEvent("pinokio:sidebar-state", {
+      detail: { collapsed: next }
+    }))
   }
 
-  const header = document.querySelector("header.navheader")
-  const initialMinimized = !!(header && header.classList.contains("minimized"))
-  setAside(initialMinimized, true)
+  let initialCollapsed = false
+  try {
+    initialCollapsed = window.localStorage.getItem(storageKey) === "1"
+  } catch (_) {}
+  setCollapsed(initialCollapsed, { persist: false })
 
-  document.addEventListener("pinokio:header-state", (event) => {
-    if (!event || !event.detail) {
-      return
-    }
-    const { minimized, phase } = event.detail
-    if (phase === "init") {
-      setAside(!!minimized, true)
-      return
-    }
-    if (phase === "start") {
-      setAside(!!minimized, false)
-      return
-    }
-    if (phase === "settled") {
-      clearAnimation()
-      finish(!!minimized)
-    }
+  toggle.addEventListener("click", (event) => {
+    event.preventDefault()
+    setCollapsed(!appcanvas.classList.contains("sidebar-collapsed"))
   })
+
+  window.PinokioSidebar = {
+    setCollapsed,
+    isCollapsed: () => appcanvas.classList.contains("sidebar-collapsed")
+  }
 })()
 </script>
 <script src="/tab-idle-notifier.js"></script>
@@ -12933,39 +14656,13 @@ document.addEventListener("DOMContentLoaded", () => {
   const defaultWorkspaceCwd = drawer.dataset.workspaceCwd || ""
   const widthKey = "pinokio.ask_ai.width"
   const ASK_AI_MIN_WIDTH = 240
-  const ASK_AI_FALLBACK_TOOLS = [
-    {
-      value: "claude",
-      label: "Claude Code",
-      iconSrc: "/asset/plugin/code/claude/claude.png",
-      href: "/run/plugin/code/claude/pinokio.js",
-      category: "CLI",
-      isDefault: true
-    },
-    {
-      value: "codex",
-      label: "OpenAI Codex",
-      iconSrc: "/asset/plugin/code/codex/openai.webp",
-      href: "/run/plugin/code/codex/pinokio.js",
-      category: "IDE",
-      isDefault: false
-    },
-    {
-      value: "gemini",
-      label: "Google Gemini CLI",
-      iconSrc: "/asset/plugin/code/gemini/gemini.jpeg",
-      href: "/run/plugin/code/gemini/pinokio.js",
-      category: "CLI",
-      isDefault: false
-    }
-  ]
-
   let open = false
   let currentUrl = ""
   let askAiWidth = null
   let pickerRequestId = 0
   let askAiTools = null
   let askAiToolsPromise = null
+  let askAiToolsKey = ""
 
   const setLocation = (value) => {
     if (!locationInput) return
@@ -13086,6 +14783,7 @@ document.addEventListener("DOMContentLoaded", () => {
     }
     if (
       parsed.pathname.startsWith("/run/plugin/")
+      || parsed.pathname.startsWith("/pinokio/run/plugin/")
       || (parsed.pathname.startsWith("/run/api/") && /\/pinokio\.js$/i.test(parsed.pathname))
     ) {
       if (workspaceCwd && !parsed.searchParams.has("cwd")) {
@@ -13131,6 +14829,15 @@ document.addEventListener("DOMContentLoaded", () => {
       .replace(/^-+|-+$/g, "")
   }
 
+  const buildPluginMenuUrl = (workspaceCwd) => {
+    const parsed = new URL("/api/plugin/menu", window.location.origin)
+    const normalizedWorkspace = typeof workspaceCwd === "string" ? workspaceCwd.trim() : ""
+    if (normalizedWorkspace) {
+      parsed.searchParams.set("workspace", normalizedWorkspace)
+    }
+    return `${parsed.pathname}${parsed.search}`
+  }
+
   const mapPluginMenuToAskAiTools = (menu) => {
     if (!Array.isArray(menu)) {
       return []
@@ -13150,6 +14857,7 @@ document.addEventListener("DOMContentLoaded", () => {
         return null
       }
       const isPluginLauncher = parsed.pathname.startsWith("/run/plugin/")
+        || parsed.pathname.startsWith("/pinokio/run/plugin/")
         || (parsed.pathname.startsWith("/run/api/") && /\/pinokio\.js$/i.test(parsed.pathname))
       if (parsed.origin !== window.location.origin || !isPluginLauncher) {
         return null
@@ -13179,19 +14887,67 @@ document.addEventListener("DOMContentLoaded", () => {
         href,
         iconSrc: typeof plugin.image === "string" ? plugin.image : null,
         category,
+        kind: "plugin",
         isDefault: plugin.default === true
       }
     }).filter(Boolean)
   }
 
-  const getAskAiTools = async () => {
-    if (Array.isArray(askAiTools) && askAiTools.length > 0) {
+  const mapProjectShellToAskAiTools = (projectShell) => {
+    const items = projectShell && Array.isArray(projectShell.items) ? projectShell.items : []
+    return items.map((item) => {
+      if (!item || typeof item !== "object") {
+        return null
+      }
+      const href = typeof item.href === "string" ? item.href.trim() : ""
+      if (!href) {
+        return null
+      }
+      let parsed
+      try {
+        parsed = new URL(href, window.location.origin)
+      } catch (_) {
+        return null
+      }
+      if (parsed.origin !== window.location.origin || !parsed.pathname.startsWith("/shell/")) {
+        return null
+      }
+      const label = typeof item.title === "string" && item.title.trim()
+        ? item.title.trim()
+        : (typeof item.text === "string" && item.text.trim() ? item.text.trim() : "Shell")
+      const value = typeof item.shellId === "string" && item.shellId.trim()
+        ? item.shellId.trim()
+        : normalizeToolValue(href, label)
+      return {
+        value,
+        label,
+        href,
+        target: typeof item.target === "string" && item.target.trim() ? item.target.trim() : `@${href}`,
+        iconClass: typeof item.icon === "string" && item.icon.trim() ? item.icon.trim() : "fa-solid fa-terminal",
+        description: typeof item.subtitle === "string" ? item.subtitle.trim() : "",
+        category: "SHELL",
+        kind: "shell"
+      }
+    }).filter(Boolean)
+  }
+
+  const mapPluginPayloadToAskAiTools = (payload) => {
+    const shellTools = mapProjectShellToAskAiTools(payload && payload.projectShell)
+    const pluginTools = mapPluginMenuToAskAiTools(payload && Array.isArray(payload.menu) ? payload.menu : [])
+    return shellTools.concat(pluginTools)
+  }
+
+  const getAskAiTools = async (workspaceCwd = "") => {
+    const cacheKey = typeof workspaceCwd === "string" ? workspaceCwd.trim() : ""
+    if (askAiToolsKey === cacheKey && Array.isArray(askAiTools) && askAiTools.length > 0) {
       return askAiTools
     }
-    if (askAiToolsPromise) {
+    if (askAiToolsKey === cacheKey && askAiToolsPromise) {
       return askAiToolsPromise
     }
-    askAiToolsPromise = fetch("/api/plugin/menu")
+    const requestKey = cacheKey
+    askAiToolsKey = requestKey
+    const requestPromise = fetch(buildPluginMenuUrl(requestKey))
       .then((res) => {
         if (!res.ok) {
           throw new Error(`Failed to load plugin menu: ${res.status}`)
@@ -13199,18 +14955,90 @@ document.addEventListener("DOMContentLoaded", () => {
         return res.json()
       })
       .then((payload) => {
-        const mapped = mapPluginMenuToAskAiTools(payload && Array.isArray(payload.menu) ? payload.menu : [])
-        return mapped.length > 0 ? mapped : ASK_AI_FALLBACK_TOOLS.slice()
+        return mapPluginPayloadToAskAiTools(payload || {})
       })
-      .catch(() => ASK_AI_FALLBACK_TOOLS.slice())
+      .catch(() => [])
       .finally(() => {
-        askAiToolsPromise = null
+        if (askAiToolsPromise === requestPromise) {
+          askAiToolsPromise = null
+        }
       })
-    const tools = await askAiToolsPromise
-    askAiTools = tools
+    askAiToolsPromise = requestPromise
+    const tools = await requestPromise
+    if (askAiToolsKey === requestKey) {
+      askAiTools = tools
+    }
     return tools
   }
 
+  const createAskAiLaunchSession = () => {
+    if (typeof createLaunchSession === "function") {
+      return createLaunchSession()
+    }
+    if (typeof crypto !== "undefined" && crypto.randomUUID) {
+      return crypto.randomUUID()
+    }
+    return `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 10)}`
+  }
+
+  const appendLaunchSessionParam = (value, session) => {
+    if (!value || typeof value !== "string" || !session || value.includes("session=")) {
+      return value
+    }
+    const hasTargetPrefix = value.startsWith("@")
+    const rawValue = hasTargetPrefix ? value.slice(1) : value
+    const delimiter = rawValue.includes("?") ? "&" : "?"
+    const next = `${rawValue}${delimiter}session=${encodeURIComponent(session)}`
+    return hasTargetPrefix ? `@${next}` : next
+  }
+
+  const ensureAskAiShellTab = async (tool, href, target) => {
+    if (!href || !target) {
+      return null
+    }
+    let link = findFrameLinkByTarget(target)
+    if (link && !link.closest(".temp-menu")) {
+      link = null
+    }
+    if (link) {
+      if (link.getAttribute("href") !== href) {
+        link.setAttribute("href", href)
+        await syncTabs()
+      }
+      return link
+    }
+    const tempMenu = document.querySelector(".temp-menu")
+    if (!tempMenu) {
+      return null
+    }
+    const index = document.querySelectorAll("aside .s .frame-link").length
+    const item = document.createElement("a")
+    item.target = target
+    item.href = href
+    item.setAttribute("data-index", String(index))
+    item.className = "btn header-item frame-link"
+    item.dataset.shellTab = "1"
+    item.dataset.askAiShellTab = "1"
+    const displayText = tool && typeof tool.label === "string" && tool.label.trim()
+      ? tool.label.trim()
+      : "Shell"
+    item.innerHTML = `<div class='tab'><i class="fa-solid fa-link"></i><div class='display'>${escapeTabHtml(displayText)}</div><div class='flexible'></div></div>`
+    tempMenu.appendChild(item)
+    await syncTabs()
+    return item
+  }
+
+  const openShellTool = async (tool) => {
+    if (!tool || typeof tool.href !== "string") {
+      return false
+    }
+    const session = createAskAiLaunchSession()
+    const href = appendLaunchSessionParam(tool.href, session)
+    const target = appendLaunchSessionParam(tool.target || `@${tool.href}`, session)
+    await ensureAskAiShellTab(tool, href, target)
+    return openWithUrl(href, { frameName: target })
+  }
+
   const createPickerOption = (tool, workspaceCwd) => {
     const button = document.createElement("button")
     button.type = "button"
@@ -13227,7 +15055,13 @@ document.addEventListener("DOMContentLoaded", () => {
     } else {
       const fallback = document.createElement("span")
       fallback.className = "ask-ai-drawer-picker-icon-fallback"
-      fallback.innerHTML = `<i class="fa-solid fa-robot" aria-hidden="true"></i>`
+      const iconClass = typeof tool.iconClass === "string" && tool.iconClass.trim()
+        ? tool.iconClass.trim()
+        : "fa-solid fa-robot"
+      const fallbackIcon = document.createElement("i")
+      fallbackIcon.className = iconClass
+      fallbackIcon.setAttribute("aria-hidden", "true")
+      fallback.appendChild(fallbackIcon)
       button.appendChild(fallback)
     }
 
@@ -13236,14 +15070,26 @@ document.addEventListener("DOMContentLoaded", () => {
     const name = document.createElement("div")
     name.className = "ask-ai-drawer-picker-name"
     name.textContent = tool.label || tool.value || "Plugin"
-    const meta = document.createElement("div")
-    meta.className = "ask-ai-drawer-picker-meta"
-    meta.textContent = "Launch immediately"
     copy.appendChild(name)
-    copy.appendChild(meta)
+    if (tool.description) {
+      const meta = document.createElement("div")
+      meta.className = "ask-ai-drawer-picker-meta"
+      meta.textContent = tool.description
+      copy.appendChild(meta)
+    }
     button.appendChild(copy)
 
-    button.addEventListener("click", () => {
+    button.addEventListener("click", async () => {
+      if (tool.kind === "shell") {
+        const opened = await openShellTool(tool)
+        if (!opened) {
+          setPickerStatus("Could not open this shell.")
+        }
+        return
+      }
+      if (await redirectToPluginInstallIfNeeded(tool.href)) {
+        return
+      }
       const opened = openWithUrl(tool.href, { workspaceCwd })
       if (!opened) {
         setPickerStatus("Could not launch this plugin.")
@@ -13255,7 +15101,7 @@ document.addEventListener("DOMContentLoaded", () => {
   const renderPicker = (tools, workspaceCwd) => {
     clearPickerList()
     if (!Array.isArray(tools) || tools.length === 0) {
-      setPickerStatus("No Ask AI plugins available.")
+      setPickerStatus("No launch options available.")
       return
     }
     const groups = new Map()
@@ -13266,7 +15112,7 @@ document.addEventListener("DOMContentLoaded", () => {
       }
       groups.get(category).push(tool)
     })
-    const ordered = ["CLI", "IDE"].concat(Array.from(groups.keys()).filter((name) => name !== "CLI" && name !== "IDE"))
+    const ordered = ["SHELL", "CLI", "IDE"].concat(Array.from(groups.keys()).filter((name) => !["SHELL", "CLI", "IDE"].includes(name)))
     let renderedCount = 0
     ordered.forEach((category) => {
       const items = (groups.get(category) || []).slice().sort((a, b) =>
@@ -13279,9 +15125,9 @@ document.addEventListener("DOMContentLoaded", () => {
       if (items.length === 0) {
         return
       }
-      const displayCategory = category === "IDE"
-        ? "Desktop Plugins"
-        : (category === "CLI" ? "Terminal Plugins" : category)
+      const displayCategory = category === "SHELL"
+        ? "Project Shell"
+        : (category === "IDE" ? "Desktop Plugins" : (category === "CLI" ? "Terminal Plugins" : category))
       const group = document.createElement("div")
       group.className = "ask-ai-drawer-picker-group"
       const label = document.createElement("div")
@@ -13297,14 +15143,15 @@ document.addEventListener("DOMContentLoaded", () => {
       }
     })
     if (!renderedCount) {
-      setPickerStatus("No Ask AI plugins available.")
+      setPickerStatus("No launch options available.")
       return
     }
-    setPickerStatus("Select a Terminal or Desktop plugin to launch.")
+    setPickerStatus("Select a shell or plugin to launch.")
   }
 
   const openWithUrl = (rawUrl, opts = {}) => {
     const workspaceCwd = opts && typeof opts.workspaceCwd === "string" ? opts.workspaceCwd : ""
+    const frameName = opts && typeof opts.frameName === "string" ? opts.frameName.trim() : ""
     const normalized = normalizeLaunchUrl(rawUrl, workspaceCwd)
     if (!normalized) {
       return false
@@ -13316,6 +15163,12 @@ document.addEventListener("DOMContentLoaded", () => {
     setEmptyState(false)
     if (frame) {
       frame.dataset.loaded = "1"
+      if (frameName) {
+        frame.name = frameName
+        frame.setAttribute("name", frameName)
+      } else {
+        frame.removeAttribute("name")
+      }
       frame.src = normalized
     }
     setOpen(true)
@@ -13341,8 +15194,8 @@ document.addEventListener("DOMContentLoaded", () => {
     setEmptyState(true)
     setOpen(true)
     clearPickerList()
-    setPickerStatus("Loading plugins...")
-    getAskAiTools().then((tools) => {
+    setPickerStatus("Loading launch options...")
+    getAskAiTools(workspaceCwd).then((tools) => {
       if (requestId !== pickerRequestId) {
         return
       }
@@ -13623,7 +15476,7 @@ document.addEventListener("DOMContentLoaded", () => {
   setLocation("")
   setActionState(false)
   setEmptyState(true)
-  setPickerStatus("Use the Ask AI button to load available plugins.")
+  setPickerStatus("Use the Ask AI button to load launch options.")
   setOpen(false)
   window.PinokioAskAiDrawer = {
     openWithAgent,
@@ -14048,6 +15901,208 @@ document.addEventListener("DOMContentLoaded", () => {
   }
 })();
 
+(function() {
+  const drawer = document.getElementById("app-logs-drawer")
+  if (!drawer) {
+    return
+  }
+  const appcanvas = document.querySelector(".appcanvas")
+  const toggle = document.getElementById("logs-toggle")
+  const mobileToggle = document.querySelector(".mobile-nav-logs")
+  const closeBtn = drawer.querySelector(".app-logs-close")
+  const refreshBtn = drawer.querySelector(".app-logs-refresh")
+  const copyBtn = drawer.querySelector(".app-logs-copy")
+  const statusEl = drawer.querySelector(".app-logs-status")
+  const outputEl = drawer.querySelector(".app-logs-report-output")
+  const sectionList = drawer.querySelector(".app-logs-section-list")
+  const sectionsValue = drawer.querySelector('[data-app-logs-summary="sections"]')
+  const redactionsValue = drawer.querySelector('[data-app-logs-summary="redactions"]')
+  const reportUrl = drawer.dataset.reportUrl || ""
+  let open = false
+  let loading = false
+  let report = null
+
+  const setStatus = (text) => {
+    if (statusEl) {
+      statusEl.textContent = text
+    }
+  }
+
+  const updateToggleState = () => {
+    const logsPageSelected = !!(window.PinokioIsLogsPageSelected && window.PinokioIsLogsPageSelected())
+    const selected = open || logsPageSelected
+    if (toggle) {
+      toggle.classList.toggle("selected", selected)
+      toggle.setAttribute("aria-expanded", open ? "true" : "false")
+    }
+    if (mobileToggle) {
+      mobileToggle.classList.toggle("selected", selected)
+      mobileToggle.setAttribute("aria-pressed", selected ? "true" : "false")
+    }
+  }
+
+  const setOpen = (next, options = {}) => {
+    open = !!next
+    if (appcanvas) {
+      appcanvas.classList.toggle("logs-open", open)
+    }
+    drawer.setAttribute("aria-hidden", open ? "false" : "true")
+    updateToggleState()
+    if (open) {
+      loadReport(Boolean(options && options.force))
+    }
+  }
+
+  const countRedactions = (counts) => {
+    return Object.values(counts || {}).reduce((total, value) => {
+      const numeric = Number(value)
+      return total + (Number.isFinite(numeric) ? numeric : 0)
+    }, 0)
+  }
+
+  const clearSections = () => {
+    if (!sectionList) return
+    while (sectionList.firstChild) {
+      sectionList.removeChild(sectionList.firstChild)
+    }
+  }
+
+  const renderSections = (sections) => {
+    clearSections()
+    if (!sectionList) return
+    for (const section of sections || []) {
+      const chip = document.createElement("div")
+      chip.className = "app-logs-section-chip"
+      chip.textContent = section.file || section.script || section.source || "log"
+      chip.title = chip.textContent
+      sectionList.appendChild(chip)
+    }
+  }
+
+  const renderReport = (payload) => {
+    const sections = Array.isArray(payload && payload.sections) ? payload.sections : []
+    const redactionCount = countRedactions(payload && payload.redactions)
+    if (sectionsValue) {
+      sectionsValue.textContent = String(sections.length)
+    }
+    if (redactionsValue) {
+      redactionsValue.textContent = redactionCount > 0 ? `${redactionCount} hidden` : "0"
+    }
+    renderSections(sections)
+    if (outputEl) {
+      outputEl.textContent = payload && payload.markdown ? payload.markdown : "No app log files were found."
+    }
+    if (copyBtn) {
+      copyBtn.disabled = !(payload && payload.markdown)
+    }
+    setStatus(`Basic redaction applied. ${sections.length} latest log file${sections.length === 1 ? "" : "s"} included.`)
+  }
+
+  const renderError = (message) => {
+    if (sectionsValue) sectionsValue.textContent = "--"
+    if (redactionsValue) redactionsValue.textContent = "--"
+    clearSections()
+    if (outputEl) {
+      outputEl.textContent = message
+    }
+    if (copyBtn) {
+      copyBtn.disabled = true
+    }
+    setStatus("Unable to build log report.")
+  }
+
+  async function loadReport(force) {
+    if (!reportUrl || loading) {
+      return
+    }
+    if (report && !force) {
+      renderReport(report)
+      return
+    }
+    loading = true
+    if (refreshBtn) {
+      refreshBtn.disabled = true
+    }
+    setStatus("Building sanitized log report...")
+    try {
+      const response = await fetch(reportUrl, {
+        headers: { "Accept": "application/json" },
+        cache: "no-store"
+      })
+      const payload = await response.json().catch(() => null)
+      if (!response.ok) {
+        throw new Error(payload && payload.error ? payload.error : `HTTP ${response.status}`)
+      }
+      report = payload
+      renderReport(report)
+    } catch (error) {
+      renderError(error && error.message ? error.message : String(error || "Unknown error"))
+    } finally {
+      loading = false
+      if (refreshBtn) {
+        refreshBtn.disabled = false
+      }
+    }
+  }
+
+  const copyReport = async () => {
+    if (!report || !report.markdown) {
+      return
+    }
+    try {
+      await navigator.clipboard.writeText(report.markdown)
+      setStatus("Report copied.")
+    } catch (_) {
+      if (outputEl) {
+        outputEl.focus()
+        const selection = window.getSelection()
+        const range = document.createRange()
+        range.selectNodeContents(outputEl)
+        selection.removeAllRanges()
+        selection.addRange(range)
+      }
+      setStatus("Select the report text to copy.")
+    }
+  }
+
+  if (toggle) {
+    toggle.addEventListener("click", (event) => {
+      event.preventDefault()
+      if (window.PinokioOpenLogsPage && typeof window.PinokioOpenLogsPage === "function") {
+        window.PinokioOpenLogsPage({ view: "latest" })
+        return
+      }
+      setOpen(!open)
+    })
+  }
+  if (closeBtn) {
+    closeBtn.addEventListener("click", () => setOpen(false))
+  }
+  if (refreshBtn) {
+    refreshBtn.addEventListener("click", () => loadReport(true))
+  }
+  if (copyBtn) {
+    copyBtn.addEventListener("click", copyReport)
+  }
+  const communityToggle = document.getElementById("community-toggle")
+  if (communityToggle) {
+    communityToggle.addEventListener("click", () => {
+      if (open) {
+        setOpen(false)
+      }
+    }, { capture: true })
+  }
+
+  window.PinokioLogsDrawer = {
+    open: (options = {}) => setOpen(true, options),
+    close: () => setOpen(false),
+    refresh: () => loadReport(true),
+    isOpen: () => open
+  }
+
+  setOpen(false)
+})();
+
 (function() {
   const drawer = document.getElementById("community-drawer")
   if (!drawer) {
@@ -14765,6 +16820,275 @@ document.addEventListener("DOMContentLoaded", () => {
   }
 })()
 
+;(function() {
+  const root = document.querySelector("[data-app-autolaunch]")
+  const initialState = <%- JSON.stringify((typeof autolaunch_app !== "undefined" && autolaunch_app) ? autolaunch_app : null).replace(/</g, "\\u003c") %>
+  if (!root || !initialState) return
+
+  const appId = root.getAttribute("data-app-id") || initialState.id
+  const button = root.querySelector("[data-app-autolaunch-button]")
+  const status = root.querySelector("[data-app-autolaunch-status]")
+  const modal = root.querySelector("[data-app-autolaunch-modal]")
+  const switchButton = root.querySelector("[data-app-autolaunch-switch]")
+  const switchLabel = root.querySelector("[data-app-autolaunch-switch-label]")
+  const closeButton = root.querySelector("[data-app-autolaunch-close]")
+  const scriptsEl = root.querySelector("[data-app-autolaunch-scripts]")
+  const feedbackEl = root.querySelector("[data-app-autolaunch-feedback]")
+  if (!appId || !button || !status || !modal || !switchButton || !switchLabel || !closeButton || !scriptsEl || !feedbackEl) return
+
+  let state = Object.assign({}, initialState)
+  let candidateState = null
+  let candidateError = ""
+  let selectedScript = state.autolaunch || ""
+  let loadingCandidates = false
+  let saving = false
+
+  const escapeHtml = (value) => {
+    if (value === null || value === undefined) return ""
+    return String(value).replace(/[&<>"']/g, (match) => {
+      switch (match) {
+        case "&": return "&amp;"
+        case "<": return "&lt;"
+        case ">": return "&gt;"
+        case "\"": return "&quot;"
+        case "'": return "&#39;"
+        default: return match
+      }
+    })
+  }
+  const allCandidates = () => {
+    if (!candidateState) return []
+    return [].concat(candidateState.menu || [], candidateState.other || [])
+  }
+  const chooseInitialScript = (data) => {
+    const candidates = data ? [].concat(data.menu || [], data.other || []) : []
+    if (data && data.current) return data.current
+    const defaultCandidate = candidates.find((candidate) => candidate && candidate.menu_default)
+    if (defaultCandidate) return defaultCandidate.script
+    return candidates.length > 0 ? candidates[0].script : ""
+  }
+  const setFeedback = (message, isError = false) => {
+    feedbackEl.textContent = message || ""
+    feedbackEl.classList.toggle("error", !!isError)
+  }
+  const setBusy = (busy) => {
+    saving = !!busy
+    switchButton.disabled = saving || loadingCandidates
+    button.toggleAttribute("aria-busy", saving)
+    scriptsEl.querySelectorAll("input").forEach((input) => {
+      input.disabled = saving
+    })
+  }
+  const renderStatus = () => {
+    const enabled = !!(state && state.autolaunch_enabled)
+    status.textContent = enabled ? "ON" : "OFF"
+    button.dataset.enabled = enabled ? "true" : "false"
+    button.setAttribute("aria-label", `Auto launch ${enabled ? "On" : "Off"}`)
+    switchButton.setAttribute("aria-checked", enabled ? "true" : "false")
+    switchButton.title = `Auto launch is ${enabled ? "on" : "off"}`
+    switchLabel.textContent = enabled ? "ON" : "OFF"
+    root.classList.toggle("enabled", enabled)
+  }
+  const setOpen = (open) => {
+    root.classList.toggle("open", !!open)
+    button.setAttribute("aria-expanded", open ? "true" : "false")
+    modal.classList.toggle("hidden", !open)
+    if (open) {
+      if (!candidateState && !loadingCandidates) {
+        loadCandidates()
+      }
+      window.setTimeout(() => {
+        if (!modal.classList.contains("hidden")) {
+          switchButton.focus()
+        }
+      }, 0)
+    } else {
+      button.focus()
+    }
+  }
+  const renderScripts = () => {
+    if (loadingCandidates) {
+      scriptsEl.innerHTML = '<div class="app-autolaunch-empty">Loading scripts...</div>'
+      setBusy(false)
+      return
+    }
+    if (candidateError) {
+      scriptsEl.innerHTML = `<div class="app-autolaunch-empty">${escapeHtml(candidateError)}</div>`
+      setBusy(false)
+      return
+    }
+    if (!candidateState) {
+      scriptsEl.innerHTML = '<div class="app-autolaunch-empty">Open to load scripts.</div>'
+      setBusy(false)
+      return
+    }
+    const candidates = allCandidates().slice()
+    const current = candidateState.current || state.autolaunch || ""
+    if (current && !candidates.some((candidate) => candidate && candidate.script === current)) {
+      candidates.unshift({
+        script: current,
+        label: "Current",
+        source: "current",
+        current: true
+      })
+    }
+    if (!selectedScript) {
+      selectedScript = chooseInitialScript(candidateState)
+    }
+    if (candidates.length === 0) {
+      scriptsEl.innerHTML = '<div class="app-autolaunch-empty">No local scripts were found for this app.</div>'
+      setBusy(false)
+      return
+    }
+    scriptsEl.innerHTML = candidates.map((candidate) => {
+      const script = candidate && candidate.script ? candidate.script : ""
+      if (!script) return ""
+      const label = candidate.label || script
+      const checked = script === selectedScript ? "checked" : ""
+      const selected = script === selectedScript ? " selected" : ""
+      const tags = [
+        candidate.current ? '<span class="app-autolaunch-tag">Current</span>' : "",
+        candidate.menu_default ? '<span class="app-autolaunch-tag">Default</span>' : "",
+        candidate.has_params ? '<span class="app-autolaunch-tag">Params ignored</span>' : ""
+      ].filter(Boolean).join("")
+      const pathLine = label === script
+        ? ""
+        : `<div class="app-autolaunch-script-path" title="${escapeHtml(script)}">${escapeHtml(script)}</div>`
+      return `
+        <label class="app-autolaunch-script-option${selected}">
+          <input type="radio" name="app-autolaunch-script" value="${escapeHtml(script)}" ${checked}>
+          <div>
+            <div class="app-autolaunch-script-title"><span>${escapeHtml(label)}</span>${tags}</div>
+            ${pathLine}
+          </div>
+        </label>
+      `
+    }).join("")
+    setBusy(false)
+  }
+  const syncState = (updated) => {
+    if (updated) {
+      state = Object.assign({}, state, updated)
+      if (candidateState) {
+        candidateState.app = Object.assign({}, candidateState.app || {}, updated)
+        candidateState.current = updated.autolaunch || ""
+      }
+      if (updated.autolaunch) {
+        selectedScript = updated.autolaunch
+      }
+    }
+    renderStatus()
+  }
+  const loadCandidates = async () => {
+    loadingCandidates = true
+    candidateError = ""
+    setFeedback("")
+    renderScripts()
+    try {
+      const response = await fetch(`/autolaunch/candidates?app=${encodeURIComponent(appId)}`, {
+        headers: { "Accept": "application/json" }
+      })
+      const data = await response.json()
+      if (!response.ok || !data.ok) {
+        throw new Error(data.error || "Failed to load scripts.")
+      }
+      candidateState = data
+      syncState(data.app)
+      selectedScript = chooseInitialScript(data)
+      setFeedback("")
+    } catch (error) {
+      candidateError = error && error.message ? error.message : "Failed to load scripts."
+    } finally {
+      loadingCandidates = false
+      renderScripts()
+    }
+  }
+  const saveScript = async (script) => {
+    if (saving) return
+    setBusy(true)
+    setFeedback(script ? "Saving..." : "Disabling...")
+    try {
+      const response = await fetch("/autolaunch", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "Accept": "application/json"
+        },
+        body: JSON.stringify({ app: appId, script: script || "" })
+      })
+      const data = await response.json()
+      if (!response.ok || !data.ok) {
+        throw new Error(data.error || "Failed to save autolaunch.")
+      }
+      syncState(data.app)
+      setFeedback(data.app && data.app.autolaunch_enabled ? "Saved." : "Disabled.")
+      renderScripts()
+    } catch (error) {
+      setFeedback(error && error.message ? error.message : "Failed to save autolaunch.", true)
+      renderStatus()
+    } finally {
+      setBusy(false)
+    }
+  }
+  const toggleAutolaunch = async () => {
+    if (saving || loadingCandidates) return
+    if (state.autolaunch_enabled) {
+      await saveScript("")
+      return
+    }
+    if (!candidateState) {
+      await loadCandidates()
+    }
+    const script = selectedScript || chooseInitialScript(candidateState)
+    if (!script) {
+      setFeedback("Choose a script first.", true)
+      return
+    }
+    selectedScript = script
+    await saveScript(script)
+  }
+
+  renderStatus()
+  renderScripts()
+
+  button.addEventListener("click", (event) => {
+    event.preventDefault()
+    event.stopPropagation()
+    setOpen(modal.classList.contains("hidden"))
+  })
+  closeButton.addEventListener("click", (event) => {
+    event.preventDefault()
+    event.stopPropagation()
+    setOpen(false)
+  })
+  switchButton.addEventListener("click", (event) => {
+    event.preventDefault()
+    event.stopPropagation()
+    toggleAutolaunch()
+  })
+  modal.addEventListener("click", (event) => {
+    if (event.target === modal) {
+      setOpen(false)
+    }
+  })
+  scriptsEl.addEventListener("change", (event) => {
+    const input = event.target && event.target.matches("input[name='app-autolaunch-script']")
+      ? event.target
+      : null
+    if (!input) return
+    selectedScript = input.value
+    renderScripts()
+    if (state.autolaunch_enabled && selectedScript !== state.autolaunch) {
+      saveScript(selectedScript)
+    }
+  })
+  document.addEventListener("keydown", (event) => {
+    if (event.key === "Escape" && !modal.classList.contains("hidden")) {
+      setOpen(false)
+    }
+  })
+})()
+
 ;(function() {
   const scroller = document.querySelector(".appcanvas > aside .menu-scroller")
   if (!scroller) return