pinokiod 3.40.0 → 3.42.0

package/server/views/app.ejs

@@ -18,6 +18,24 @@
   <link href="/electron.css" rel="stylesheet"/>
 <% } %>
 <style>
+.menu-container {
+  overflow: auto;
+}
+body.dark .mode-display {
+  background: rgba(255,255,255,0.04);
+  color: rgba(255,255,255,0.7);
+}
+.mode-display {
+  padding: 5px 10px;
+  background: rgba(0,0,0,0.04);
+  /*
+  text-align: center;
+  color: royalblue;
+  */
+  color: rgba(0, 0, 0, 0.7);
+  font-size: 12px;
+  font-weight: bold;
+}
 .online {
   width: 10px;
   height: 10px;
@@ -80,6 +98,8 @@ body aside {
   position: relative;
   border-right: 1px solid rgba(0,0,0,0.04);
   height: 100%;
+  display: flex;
+  flex-direction: column;
   /*
   padding-bottom: 100px;
   */
@@ -100,7 +120,7 @@ aside {
   display: flex;
   flex-direction: column;
   */
-  width: 200px;
+  width: 240px;
   overflow: auto;
   box-sizing: border-box;
   flex-shrink: 0;
@@ -213,9 +233,11 @@ body.dark #new-window {
   background: rgba(255,255,255,0.04);
 }
 */
+/*
 .app-info-card img {
-  margin-right: 10px;
+  margin: 10px;
 }
+*/
 .app-info {
   
 /*
@@ -275,6 +297,7 @@ body.dark .header-btns {
 /*
   padding: 10px !important;
   */
+  padding: 10px;
   display: flex;
   text-align: left;
 }
@@ -320,7 +343,10 @@ body.dark .app-info-card > * {
   color: var(--dark-color);
 }
 .app-info-container {
-  padding: 7px 0;
+/*
+  padding: 10px 5px;
+  */
+  padding-left: 5px;
   min-width: 0;
   text-overflow: ellipsis;
 }
@@ -328,6 +354,7 @@ body.dark .app-info-card > * {
   width: 100%;
   font-weight: bold;
   font-size: 16px;
+  word-break: break-word;
   /*
   padding: 15px 0;
   */
@@ -390,25 +417,18 @@ body.dark .header-item.cursor {
 }
 body .frame-link.selected {
 /*
-  border-right: 10px solid gold;
-  */
-  /*
-  background: black !important;
-  color: white;
-  */
   background: rgba(0,0,0,0.06) !important;
-  /*
-  background: rgba(0,0,100,0.06) !important;
   */
+  background: royalblue !important;
+  color: white !important;
 }
 .frame-link.selected .del {
   color: white;
 }
 body.dark .frame-link.selected {
 /*
-  background: rgba(0,0,0,0.7) !important;
+  background: rgba(255,255,255,0.08) !important;
   */
-  background: rgba(255,255,255,0.04) !important;
 }
 .frame-link .loader {
 /*
@@ -790,12 +810,6 @@ body .app-icon {
   display: none;
   margin-right: 10px;
 }
-body.minimized .app-icon {
-  display: block; 
-}
-body.minimized aside {
-  display: none;
-}
 .top-menu {
   padding: 10px;
   text-align: center;
@@ -812,49 +826,782 @@ body.dark .top-menu .btn2.selected {
   background: black;
   color: white;
 }
-body.minimized #collapse {
-/*
-  background: none !important;
-  */
-  border: none !important;
+.bottombar {
+  display: flex;
+  justify-content: flex-end;
+  padding: 5px;
 }
-body.dark #collapse {
-  border-bottom: 4px solid white;
-  /*
-  background: rgba(255,255,255,0.07);
-  */
+
+#browserview-container {
+  flex-grow: 1;
+  position: relative;
 }
-#collapse {
-  border-bottom: 4px solid black;
-/*
+
+body.dark #fs-status {
+  background: rgba(255,255,255,0.04);
+}
+#fs-status {
   background: rgba(0,0,0,0.04);
-  */
+  gap: 5px;
+  box-sizing: border-box;
+  margin: 0 10px;
+  padding: 5px;
+  display: flex;
+  align-items: center;
+  border-radius: 6px;
 }
-body.dark .mode-selector .btn2.selected {
-/*
-  background: rgba(255,255,255,0.07);
-  */
-  border-bottom: 4px solid white;
+
+.fs-status-btn {
+  background: transparent;
+  border: none;
+  padding: 8px 12px;
+  cursor: pointer;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  color: #24292f;
+  transition: background 0.2s;
 }
-.mode-selector .btn2.selected {
-  border-bottom: 4px solid black;
-  /*
-  background: rgba(0,0,0,0.04);
-  */
+
+body.dark .fs-status-btn {
+  color: white;
+}
+
+.fs-status-btn:hover {
+  background: rgba(0,0,0,0.08);
+}
+
+body.dark .fs-status-btn:hover {
+  background: rgba(255,255,255,0.08);
+}
+
+.fs-status-btn .badge:empty {
+  display: none;
 }
-.mode-selector {
+
+.fs-status-btn .badge {
+  background: #dc3545;
+  color: white;
+  padding: 4px 8px;
+  border-radius: 12px;
+  font-size: 11px;
+  font-weight: 600;
+  min-width: 18px;
+  text-align: center;
+}
+
+/* Git diff modal styles - using specific prefixed classes to avoid collisions */
+.pinokio-git-diff-modal-wrapper {
+  width: 90vw !important;
+  max-width: 1200px !important;
+  height: 80vh !important;
+  display: flex !important;
+  flex-direction: column !important;
+}
+
+.pinokio-git-diff-modal-wrapper .swal2-popup {
+  display: flex !important;
+  flex-direction: column !important;
+  height: 100% !important;
+  max-height: none !important;
+  grid-template-rows: auto 1fr auto !important;
+  grid-template-areas: "header" "content" "actions" !important;
+  padding: 0 !important;
+}
+
+.pinokio-git-diff-modal-wrapper .swal2-content {
+  flex: 1 !important;
+  display: flex !important;
+  flex-direction: column !important;
+  height: 100% !important;
+  margin: 0 !important;
+  padding: 0 !important;
+}
+
+.pinokio-git-diff-modal-wrapper .swal2-title {
+  font-size: 16px !important;
+  font-weight: 600 !important;
+  line-height: 1.2 !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  color: #24292f !important;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
+  text-align: center !important;
+  height: auto !important;
+  display: block !important;
+}
+
+.pinokio-git-diff-modal-wrapper .swal2-header {
+  padding: 12px 16px !important;
+  margin: 0 !important;
+  border-bottom: 1px solid #d0d7de !important;
+  background: #f6f8fa !important;
+  height: auto !important;
+  min-height: auto !important;
+  max-height: 60px !important;
+  flex-shrink: 0 !important;
+  flex-grow: 0 !important;
+  grid-area: header !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+}
+
+.pinokio-git-diff-modal-wrapper .swal2-close {
+  font-size: 18px !important;
+  width: 28px !important;
+  height: 28px !important;
+  line-height: 28px !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  top: 12px !important;
+  right: 12px !important;
+  color: #656d76 !important;
+  background: transparent !important;
+  border: none !important;
+}
+
+.pinokio-git-diff-modal-wrapper .swal2-icon {
+  display: none !important;
+  height: 0 !important;
+  width: 0 !important;
+  margin: 0 !important;
+  padding: 0 !important;
+}
+
+.pinokio-git-diff-modal-wrapper .swal2-html-container {
+  padding: 0 !important;
+  margin: 0 !important;
+  height: 100% !important;
+  overflow: hidden !important;
+  font-size: 14px !important;
+  flex: 1 !important;
+  display: flex !important;
+  flex-direction: column !important;
+  grid-area: content !important;
+}
+
+.pinokio-git-diff-modal-wrapper .swal2-actions {
+  display: flex !important;
+  justify-content: center !important;
+  align-items: center !important;
+  padding: 12px 16px !important;
+  margin: 0 !important;
+  border-top: 1px solid #d0d7de !important;
+  background: #f6f8fa !important;
+  grid-area: actions !important;
+  height: auto !important;
+  min-height: auto !important;
+  max-height: 60px !important;
+  flex-shrink: 0 !important;
+}
+
+.pinokio-git-diff-modal-wrapper .swal2-confirm {
+  background: #0969da !important;
+  color: white !important;
+  border: 1px solid #0969da !important;
+  border-radius: 6px !important;
+  padding: 8px 16px !important;
+  font-size: 14px !important;
+  font-weight: 600 !important;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
+  cursor: pointer !important;
+  transition: background 0.2s !important;
+  margin: 0 !important;
+  min-width: auto !important;
+  height: auto !important;
+  line-height: 1.4 !important;
+}
+
+.pinokio-git-diff-modal-wrapper .swal2-confirm:hover {
+  background: #0860ca !important;
+  border-color: #0860ca !important;
+}
+
+.pinokio-git-commit-diff-overlay {
+  z-index: 2000 !important;
+}
+
+.pinokio-custom-commit-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 20000000;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 20px;
+  box-sizing: border-box;
+}
+
+.pinokio-custom-commit-modal {
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+  width: 90vw;
+  max-width: 1200px;
+  height: 80vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+body.dark .pinokio-custom-commit-modal {
+  background: #1f2328;
+  color: white;
+}
+
+.pinokio-custom-commit-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 20px;
+  border-bottom: 1px solid #d0d7de;
+  background: #f6f8fa;
+}
+
+body.dark .pinokio-custom-commit-header {
+  border-bottom-color: #30363d;
+  background: #161b22;
+}
+
+.pinokio-custom-commit-header h3 {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.pinokio-custom-commit-close {
+  background: none;
+  border: none;
+  font-size: 24px;
+  cursor: pointer;
+  padding: 4px 8px;
+  border-radius: 4px;
+  color: #656d76;
+}
+
+.pinokio-custom-commit-close:hover {
+  background: rgba(0, 0, 0, 0.1);
+  color: #24292f;
+}
+
+body.dark .pinokio-custom-commit-close {
+  color: #8b949e;
+}
+
+body.dark .pinokio-custom-commit-close:hover {
+  background: rgba(255, 255, 255, 0.1);
+  color: #f0f6fc;
+}
+
+.pinokio-custom-commit-content {
+  flex: 1;
+  overflow: hidden;
+  padding: 0;
+}
+
+.pinokio-commit-message-container {
   display: flex;
-  gap: 3px;
+  align-items: center;
+  gap: 12px;
+  padding: 0;
+  margin: 0;
+  width: 100%;
+}
+
+.pinokio-commit-message-input {
+  flex: 1;
+  padding: 8px 12px;
+  border: 1px solid #d0d7de;
+  border-radius: 6px;
+  font-size: 14px;
+  background: white;
+  color: #24292f;
+  outline: none;
+  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+}
+
+.pinokio-commit-message-input:focus {
+  border-color: #0969da;
+  box-shadow: 0 0 0 3px rgba(9, 105, 218, 0.3);
+}
+
+body.dark .pinokio-commit-message-input {
+  background: #21262d;
+  border-color: #30363d;
+  color: #e6edf3;
+}
+
+body.dark .pinokio-commit-message-input:focus {
+  border-color: #1f6feb;
+  box-shadow: 0 0 0 3px rgba(31, 111, 235, 0.3);
+}
+
+.pinokio-save-version-btn {
+  background: #1f883d;
+  color: white;
+  border: 1px solid rgba(31, 35, 40, 0.15);
+  border-radius: 6px;
+  padding: 8px 16px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 0.2s;
+  white-space: nowrap;
+}
+
+.pinokio-save-version-btn:hover {
+  background: #1a7f37;
+}
+
+.pinokio-save-version-btn:active {
+  background: #18722f;
+}
+
+.pinokio-git-diff-main-container {
+  display: flex !important;
+  height: 100% !important;
+  border: 1px solid #d0d7de !important;
   /*
-  gap: 5px;
+  border-radius: 6px !important;
   */
+  overflow: hidden !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  box-sizing: border-box !important;
+  font-family: inherit !important;
+  font-size: inherit !important;
+  line-height: inherit !important;
+  color: inherit !important;
+  background: white !important;
+  text-align: left !important;
+  vertical-align: baseline !important;
+}
+
+.pinokio-git-diff-file-list-panel {
+  width: 300px !important;
+  border-right: 1px solid #d0d7de !important;
+  background: #f6f8fa !important;
+  overflow-y: auto !important;
+  overflow-x: hidden !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  box-sizing: border-box !important;
+  flex-shrink: 0 !important;
+  border-top: none !important;
+  border-bottom: none !important;
+  border-left: none !important;
+  color: #24292f !important;
+  font-family: monospace !important;
+  font-size: 12px !important;
+  line-height: 1.4 !important;
+  text-align: left !important;
+  vertical-align: baseline !important;
 }
-.mode-selector .btn2 {
-  border-radius: 0;
-  padding: 10px 0;
-  min-width: 40px;
+
+.pinokio-git-diff-file-item-row {
+  padding: 8px 12px !important;
+  cursor: pointer !important;
+  border-bottom: 1px solid #d0d7de !important;
+  font-family: monospace !important;
+  font-size: 12px !important;
+  transition: background 0.2s !important;
+  margin: 0 !important;
+  box-sizing: border-box !important;
+  display: block !important;
+  width: 100% !important;
+  color: #24292f !important;
+  background: transparent !important;
+  border-top: none !important;
+  border-left: none !important;
+  border-right: none !important;
+  text-align: left !important;
+  text-decoration: none !important;
+  font-weight: normal !important;
+  font-style: normal !important;
+  line-height: 1.4 !important;
+  vertical-align: baseline !important;
+}
+
+.pinokio-git-diff-file-item-row:hover {
+  background: #e1e4e8 !important;
+  color: #24292f !important;
+}
+
+.pinokio-git-diff-file-item-row.pinokio-active-file-item {
+  background: #0969da !important;
+  color: white !important;
+}
+
+.pinokio-git-diff-viewer-panel {
+  flex: 1 !important;
+  background: white !important;
+  overflow-y: auto !important;
+  overflow-x: auto !important;
+  font-family: monospace !important;
+  font-size: 12px !important;
+  line-height: 1.4 !important;
+  text-align: left !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  border: none !important;
+  box-sizing: border-box !important;
+  color: #24292f !important;
+  font-weight: normal !important;
+  font-style: normal !important;
+  text-decoration: none !important;
+  vertical-align: baseline !important;
+  white-space: normal !important;
+  min-width: 0 !important;
+  width: 0 !important;
+  position: relative !important;
+}
+
+.pinokio-git-diff-empty-state {
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  height: 100% !important;
+  color: #656d76 !important;
+  font-size: 14px !important;
+  margin: 0 !important;
+  padding: 20px !important;
+  box-sizing: border-box !important;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
+  font-weight: normal !important;
+  font-style: normal !important;
+  text-decoration: none !important;
+  line-height: 1.4 !important;
+  text-align: center !important;
+  vertical-align: baseline !important;
+  background: transparent !important;
+  border: none !important;
 }
 
+.pinokio-diff-code-line {
+  padding: 0 !important;
+  white-space: pre-wrap !important;
+  border-left: 4px solid transparent !important;
+  text-align: left !important;
+  display: grid !important;
+  grid-template-columns: 60px 1fr !important;
+  width: 100% !important;
+  box-sizing: border-box !important;
+  margin: 0 !important;
+  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace !important;
+  font-size: 12px !important;
+  line-height: 1.45 !important;
+  color: #24292f !important;
+  background: transparent !important;
+  border-top: none !important;
+  border-right: none !important;
+  border-bottom: none !important;
+  font-weight: normal !important;
+  font-style: normal !important;
+  text-decoration: none !important;
+  vertical-align: baseline !important;
+  overflow-wrap: break-word !important;
+  word-break: break-all !important;
+}
+
+.pinokio-diff-code-line-addition {
+  background: #f0fff4 !important;
+  border-left-color: #28a745 !important;
+  color: #24292f !important;
+}
+
+.pinokio-diff-code-line-deletion {
+  background: #ffeef0 !important;
+  border-left-color: #d73a49 !important;
+  color: #24292f !important;
+}
+
+.pinokio-diff-code-line-context {
+  background: #f6f8fa !important;
+  color: #24292f !important;
+}
+
+.pinokio-diff-code-line-numbers {
+  display: block !important;
+  width: 100% !important;
+  text-align: right !important;
+  padding-right: 12px !important;
+  color: #656d76 !important;
+  user-select: none !important;
+  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace !important;
+  font-size: 12px !important;
+  line-height: 1.45 !important;
+  font-weight: normal !important;
+  font-style: normal !important;
+  text-decoration: none !important;
+  background: transparent !important;
+  border: none !important;
+  margin: 0 !important;
+  box-sizing: border-box !important;
+  white-space: nowrap !important;
+  overflow: hidden !important;
+}
+
+.pinokio-diff-code-line-content {
+  display: block !important;
+  width: 100% !important;
+  padding-left: 12px !important;
+  padding-right: 12px !important;
+  white-space: pre-wrap !important;
+  overflow-wrap: break-word !important;
+  word-break: break-all !important;
+  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace !important;
+  font-size: 12px !important;
+  line-height: 1.45 !important;
+  color: inherit !important;
+  background: transparent !important;
+  border: none !important;
+  margin: 0 !important;
+  box-sizing: border-box !important;
+}
+
+.pinokio-git-diff-modal-wrapper iframe {
+  width: 100% !important;
+  height: 100% !important;
+  border: none !important;
+  display: block !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  box-sizing: border-box !important;
+}
+
+/* Git history modal styles */
+body.dark .pinokio-git-history-modal-wrapper {
+  background: black !important;
+}
+.pinokio-git-history-modal-wrapper {
+  padding: 0 !important;
+  width: 90vw !important;
+  max-width: 900px !important;
+  height: 80vh !important;
+  display: flex !important;
+  flex-direction: column !important;
+}
+.pinokio-git-history-modal-wrapper .swal2-title {
+  flex-shrink: 0 !important;
+  align-self: stretch !important;
+  display: flex !important;
+  justify-content: space-between !important;
+  align-items: center !important;
+  padding: 16px 20px !important;
+  border-bottom: 1px solid #d0d7de !important;
+  background: #f6f8fa !important;
+  margin: 0 !important;
+  font-size: 18px !important;
+  font-weight: 600 !important;
+  text-align: left !important;
+}
+body.dark .pinokio-git-history-modal-wrapper .swal2-title {
+  border-bottom-color: #30363d !important;
+  background: #161b22 !important;
+  color: white !important;
+}
+.pinokio-git-history-modal-wrapper .swal2-close {
+  display: none !important;
+  background: none !important;
+  border: none !important;
+  font-size: 24px !important;
+  cursor: pointer !important;
+  padding: 0 !important;
+  margin: 0 !important;
+  width: auto !important;
+  height: auto !important;
+  position: static !important;
+  top: auto !important;
+  right: auto !important;
+  color: #656d76 !important;
+}
+body.dark .pinokio-git-history-modal-wrapper .swal2-close {
+  color: #8b949e !important;
+}
+.pinokio-git-history-modal-wrapper .swal2-close:hover {
+  color: #1f2328 !important;
+}
+body.dark .pinokio-git-history-modal-wrapper .swal2-close:hover {
+  color: white !important;
+}
+
+.pinokio-git-history-modal-wrapper .swal2-html-container {
+  text-align: left !important;
+  padding: 0 !important;
+  margin: 0 !important;
+  flex-grow: 1 !important;
+  overflow: hidden !important;
+  min-height: 0 !important;
+}
+
+.pinokio-git-history-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
+}
+
+.pinokio-git-history-header {
+  padding: 16px 20px;
+  border-bottom: 1px solid #d0d7de;
+  background: #f6f8fa;
+  flex-shrink: 0;
+}
+
+.pinokio-git-history-info {
+  display: flex;
+  gap: 20px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.pinokio-git-history-ref,
+.pinokio-git-history-remote {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 14px;
+  color: #656d76;
+}
+
+.pinokio-git-history-ref i {
+  color: #0969da;
+}
+
+.pinokio-git-history-remote i {
+  color: #8b949e;
+}
+
+.pinokio-git-history-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0;
+}
+
+.pinokio-git-history-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: #656d76;
+  font-size: 16px;
+}
+
+.pinokio-git-commit-item {
+  display: flex;
+  padding: 16px 20px;
+  border-bottom: 1px solid #d0d7de;
+  gap: 12px;
+  transition: background 0.2s;
+}
+
+.pinokio-git-commit-item:hover {
+  background: #f6f8fa;
+}
+
+.pinokio-git-commit-item:last-child {
+  border-bottom: none;
+}
+
+.pinokio-git-commit-avatar {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: #f6f8fa;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: #656d76;
+  font-size: 14px;
+  border: 1px solid #d0d7de;
+}
+
+.pinokio-git-commit-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.pinokio-git-commit-message {
+  font-size: 14px;
+  color: #24292f;
+  margin-bottom: 4px;
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: 1.4;
+}
+
+.pinokio-git-commit-meta {
+  display: flex;
+  gap: 12px;
+  font-size: 12px;
+  color: #656d76;
+  flex-wrap: wrap;
+}
+
+.pinokio-git-commit-author {
+  font-weight: 500;
+}
+
+.pinokio-git-commit-hash {
+  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
+  background: rgba(175,184,193,0.2);
+  padding: 2px 6px;
+  border-radius: 3px;
+  cursor: pointer;
+}
+
+.pinokio-git-commit-hash:hover {
+  background: rgba(175,184,193,0.3);
+}
+
+/* Dark theme support for git history */
+body.dark .pinokio-git-history-header {
+  background: rgba(255,255,255,0.04);
+  border-bottom-color: rgba(255,255,255,0.1);
+}
+
+body.dark .pinokio-git-commit-item:hover {
+  background: rgba(255,255,255,0.04);
+}
+
+body.dark .pinokio-git-commit-item {
+  border-bottom-color: rgba(255,255,255,0.1);
+}
+
+body.dark .pinokio-git-commit-message {
+  color: rgba(255,255,255,0.9);
+}
+
+body.dark .pinokio-git-commit-meta {
+  color: rgba(255,255,255,0.6);
+}
+
+body.dark .pinokio-git-commit-avatar {
+  background: rgba(255,255,255,0.04);
+  border-color: rgba(255,255,255,0.1);
+  color: rgba(255,255,255,0.6);
+}
+
+body.dark .pinokio-git-commit-hash {
+  background: rgba(255,255,255,0.1);
+  color: rgba(255,255,255,0.8);
+}
+
+body.dark .pinokio-git-commit-hash:hover {
+  background: rgba(255,255,255,0.2);
+}
+
+/*
 @media only screen and (max-width: 1000px) {
   .url-bar {
     display: none;
@@ -863,8 +1610,13 @@ body.dark .mode-selector .btn2.selected {
     display: block;
   }
 }
+*/
 
+/*
 @media only screen and (max-width: 480px) {
+*/
+/*
+@media only screen and (max-width: 600px) {
   nav .btn2 {
     width: auto !important;
     min-width: 40px;
@@ -900,11 +1652,6 @@ body.dark .mode-selector .btn2.selected {
     width: 100%;
     height: 100%;
   }
-  /*
-  .grid-btns {
-    display: none;
-  }
-  */
   #menu {
     display: none;
   }
@@ -912,8 +1659,18 @@ body.dark .mode-selector .btn2.selected {
     display: flex;
   }
 }
+*/
+body.minimized {
+  flex-direction: row !important;
+}
+@media only screen and (max-width: 800px) {
+  body {
+    flex-direction: row !important;
+  }
+}
 </style>
 <link href="/app.css" rel="stylesheet"/>
+<script src="/timeago.min.js"></script>
 <script src="/hotkeys.min.js"></script>
 <script src="/sweetalert2.js"></script>
 <script src="/nav.js"></script>
@@ -936,287 +1693,333 @@ body.dark .mode-selector .btn2.selected {
 <script src="/popper.min.js"></script>
 <script src="/tippy-bundle.umd.min.js"></script>
 </head>
-<body class='<%=theme%> <%=minimized ? "minimized" : ""%>' data-platform="<%=platform%>" data-agent="<%=agent%>">
+<body class='<%=theme%>' data-platform="<%=platform%>" data-agent="<%=agent%>">
 <header class='navheader grabbable'>
 <h1>
 <a class='home' href="/">
   <img class='icon' src="/pinokio-black.png">
 </a>
-<!--
-<div class='app-icon'>
-  <% if (config.icon) { %>
-    <img src="<%=config.icon%>"/>
-  <% } else { %>
-    <i class="fa-regular fa-circle-dot"></i>
-  <% } %>
-</div>
--->
-<button class='btn2' id='back'><div><i class="fa-solid fa-chevron-left"></i></div><div>Prev</div></button>
-<button class='btn2' id='forward'><div><i class="fa-solid fa-chevron-right"></i></div><div>Next</div></button>
-<button class='btn2' id='refresh-page'><div><i class="fa-solid fa-rotate-right"></i></div><div>Refresh</div></button>
+<button id='collapse' class='btn2' data-tippy-content="toggle fullscreen view"><i class="fa-solid fa-bars"></i></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>
+<button class='btn2' id='refresh-page' data-tippy-content="refresh"><div><i class="fa-solid fa-rotate-right"></i></div></button>
+<button class='btn2' id='screenshot' data-tippy-content="take a screenshot"><i class="fa-solid fa-camera"></i></button>
+<div class='sep'></div>
 <div class='mode-selector'>
-  <button id='collapse' class='btn2'><div><i class="fa-solid fa-bars"></i></div><div id='collapse-text'>menu</div></button>
-  <% if (type === "run") { %>
-    <a id='switch-dev' class='btn2' href="<%=home.endsWith("/") ? home : home + "/" %>dev"><div><i class="fa-solid fa-code"></i></div><div>dev</div></a>
-    <a class='btn2 selected'><div><i class="fa-solid fa-circle-play"></i></div><div>run</div></a>
-  <% } else { %>
-    <a id='switch-dev' class='btn2 selected'><div><i class="fa-solid fa-code"></i></div><div>dev</div></a>
-    <a class='btn2' href="."><div><i class="fa-solid fa-circle-play"></i></div><div>run</div></a>
-  <% } %>
+  <a class="btn2 <%=type === 'review' ? 'selected' : ''%>" href="<%=review_tab%>"><div><i class="fa-regular fa-message"></i></div><div class='caption'>Community</div></a>
+  <a class="btn2 <%=type === 'browse' ? 'selected' : ''%>" href="<%=dev_tab%>"><div><i class="fa-solid fa-code"></i></div><div class='caption'>Dev</div></a>
+  <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>
 </div>
-<div class='flexible filler'></div>
-<div class='url-bar'>
-  <% if (current_urls.https) { %>
-    <a class='https-url' target="_blank" href="<%=current_urls.https%>"><i class="fa-solid fa-square-arrow-up-right"></i> <%=current_urls.https%></a>
-  <% } %>
-  <% if (current_urls.http) { %>
-    <a class='http-url' target="_blank" href="<%=current_urls.http%>"><i class="fa-solid fa-square-arrow-up-right"></i> <%=current_urls.http%></a>
-  <% } %>
+<button class='btn2' id='popout-link' data-tippy-content="open in a web browser"><i class="fa-solid fa-arrow-up-right-from-square"></i></button>
+<a class='btn2' href="/columns" data-tippy-content="split into 2 columns">
+  <div><i class="fa-solid fa-table-columns"></i></div>
+</a>
+<a class='btn2' href="/rows" data-tippy-content="split into 2 rows">
+  <div><i class="fa-solid fa-table-columns fa-rotate-270"></i></div>
+</a>
+<div class="dropdown btn2">
+  <button class='btn2' id='window-management'>
+    <div><i class="fa-solid fa-plus"></i></div>
+  </button>
+  <div class="dropdown-content" id="dropdown-content">
+    <button class='btn2' id='clone-win' data-tippy-content="clone this window">
+      <div><i class="fa-solid fa-clone"></i><div>clone this window</div></div>
+    </button>
+    <button id='new-window' data-tippy-content="open a new window" title='open a new window' class='btn2' data-agent="<%=agent%>">
+      <div><i class="fa-solid fa-plus"></i><div>new window</div></div>
+    </button>
+  </div>
 </div>
-<a href="/connect" class='btn2'><div><i class="fa-solid fa-circle-user"></i></div><div>Connect</div></a>
 <!--
-<input type='url' id='location' readonly value="<%=execUrl%>">
-<a id='open-location' target="_blank" features="browser"><i class="fa-solid fa-arrow-up-right-from-square"></i></a>
--->
-<div class='nav-btns'>
-  <a class='btn2' href="<%=portal%>" target="_blank"><div><i class="fa-solid fa-question"></i></div><div>Help</div></a>
-  <button class='btn2' id='genlog'><div><i class="fa-solid fa-laptop-code"></i></div><div>Logs</div></button>
-  <a id='downloadlogs' download class='hidden btn2' href="/pinokio/logs.zip"><div><i class="fa-solid fa-download"></i></div><div>Download logs</div></a>
-  <a class='btn2' href="/?mode=settings"><div><i class="fa-solid fa-gear"></i></div><div>Settings</div></a>
-  <button id='new-window' title='open a new window' class='btn2' data-agent="<%=agent%>"><div><i class="fa-solid fa-plus"></i></div><div>Window</div></button>
+<div class="dropdown btn2">
+  <button class='btn2' id='window-management'>
+    <div><i class="fa-regular fa-window-restore"></i></div>
+  </button>
+  <div class="dropdown-content" id="dropdown-content">
+    <button class='btn2' id='clone-win' data-tippy-content="clone this window">
+      <div><i class="fa-solid fa-clone"></i><div>clone this window</div></div>
+    </button>
+    <a class='btn2' href="/columns" data-tippy-content="split into 2 columns">
+      <div><i class="fa-solid fa-table-columns"></i><div>split columns</div></div>
+    </a>
+    <a class='btn2' href="/rows" data-tippy-content="split into 2 rows">
+      <div><i class="fa-solid fa-table-columns fa-rotate-270"></i><div>split rows</div></div>
+    </a>
+    <button id='new-window' data-tippy-content="open a new window" title='open a new window' class='btn2' data-agent="<%=agent%>">
+      <div><i class="fa-solid fa-plus"></i><div>new window</div></div>
+    </button>
+  </div>
 </div>
+-->
+<button class='btn2 hidden' id='close-window' data-tippy-content='close this section'>
+  <div><i class="fa-solid fa-xmark"></i></div>
+</button>
 </h1>
 </header>
 <div class='appcanvas'>
-<aside class='active'>
-  <div class='header-top header-item'>
-    <div class='app-info'>
-      <div class='app-info-card'>
-        <% if (config.icon) { %>
-          <img src="<%=config.icon%>"/>
-        <% } else { %>
-          <i class="fa-regular fa-circle-dot"></i>
-        <% } %>
-        <div class='app-info-container'>
-          <div class='app-info-title'><%=config.title%></div>
-          <div class='app-info-description collapsed'><%=config.description%></div>
-        </div>
-      </div>
-      <div class='header-btns <%=type === 'run' ? 'hidden' : ''%>'>
-        <div class='btn header-item frame-link revealer' id='edit-toggle' data-group='.edit-group'>
-          <div class='tab'>
-            <i class='fa-solid fa-pen-to-square'></i> Edit
+<% if (error) { %>
+  <div class='error-message'>
+    <div>
+      <h1><i class="fa-solid fa-triangle-exclamation"></i> Error</h1> 
+      <div><%=error%></div>
+    </div>
+  </div>
+<% } else { %>
+  <aside class='active'>
+    <div class='header-top header-item'>
+      <div class='app-info'>
+        <div class='app-info-card'>
+          <% if (config.icon) { %>
+            <img src="<%=config.icon%>" onerror="this.src='/pinokio-black.png'"/>
+          <% } else { %>
+            <i class="fa-regular fa-circle-dot"></i>
+          <% } %>
+          <div class='app-info-container'>
+            <div class='app-info-title'><%=config.title%></div>
+            <div class='app-info-description collapsed'><%=config.description%></div>
           </div>
-          <div class='loader'><i class="fa-solid fa-angle-down"></i><i class="fa-solid fa-angle-up hidden"></i></div>
         </div>
-        <div class='edit-group editsubmenu submenu hidden'>
-          <!--
-          <a class='btn header-item frame-link' href="/prototype?type=extension&path=<%=path%>">
+        <div class='header-btns <%=type === 'run' ? 'hidden' : ''%>'>
+          <div class='btn header-item frame-link revealer' id='edit-toggle' data-group='.edit-group'>
             <div class='tab'>
-              <i class='fa-solid fa-puzzle-piece'></i> Extensions
+              <i class='fa-solid fa-pen-to-square'></i> Edit
             </div>
-          </a>
-          -->
-          <div class='btn header-item frame-link' id='edit'>
-            <div class='tab'><i class="fa-solid fa-pencil"></i> Edit</div>
-          </div>
-          <div class='btn header-item frame-link' id='move'>
-            <div class='tab'><i class="fa-solid fa-right-to-bracket"></i> Move</div>
-          </div>
-          <div class='btn header-item frame-link' id='copy'>
-            <div class='tab'><i class="fa-solid fa-copy"></i> Copy</div>
+            <div class='loader'><i class="fa-solid fa-angle-down"></i><i class="fa-solid fa-angle-up hidden"></i></div>
           </div>
-          <div class='btn header-item frame-link' id='delete' data-name="<%=name%>">
-            <div class='tab'><i class="fa-solid fa-trash-can"></i> Delete</div>
+          <div class='edit-group editsubmenu submenu hidden'>
+            <div class='btn header-item frame-link' id='edit'>
+              <div class='tab'><i class="fa-solid fa-pencil"></i> Edit</div>
+            </div>
+            <div class='btn header-item frame-link' id='move'>
+              <div class='tab'><i class="fa-solid fa-right-to-bracket"></i> Move</div>
+            </div>
+            <div class='btn header-item frame-link' id='copy'>
+              <div class='tab'><i class="fa-solid fa-copy"></i> Copy</div>
+            </div>
+            <div class='btn header-item frame-link' id='delete' data-name="<%=name%>">
+              <div class='tab'><i class="fa-solid fa-trash-can"></i> Delete</div>
+            </div>
           </div>
         </div>
       </div>
     </div>
-  </div>
-  <div class='m n system' data-type="n">
-    <a target="<%=src%>" href="<%=src%>" class='btn header-item frame-link' data-index="0" data-mode="refresh">
-      <div class='tab'>
-        <i class="fa-regular fa-folder-open"></i> Files
-      </div>
-        <div class='disk-usage' data-path="/"></div>
-    </a>
-    <% if (profile || feed) { %>
-      <div class='btn header-item frame-link revealer' data-group='.info-group'>
-        <div class='tab'>
-          <i class='fa-solid fa-circle-info'></i> Info
-        </div>
-        <div class='loader'><i class="fa-solid fa-angle-down"></i><i class="fa-solid fa-angle-up hidden"></i></div>
-      </div>
-      <div class='info-group submenu hidden'>
-        <% if (profile) { %>
-        <a target="_blank" href="<%=profile%>" class='btn header-item frame-link'>
-          <div class='tab'><i class="fa-regular fa-circle-user"></i> Publisher</div>
-        </a>
-        <% } %>
-        <% if (feed) { %>
-        <a target="_blank" href="<%=feed%>" class='btn header-item frame-link'>
-          <div class='tab'><i class="fa-solid fa-rss"></i> Newsfeed</div>
+    <div class='menu-container'>
+      <div class='m n system' data-type="n">
+        <a target="<%=src%>" href="<%=src%>" class='btn header-item frame-link' data-index="0" data-mode="refresh">
+          <div class='tab'>
+            <i class="fa-regular fa-folder-open"></i> Files
+          </div>
+            <div class='disk-usage' data-path="/"></div>
         </a>
+        <% if (profile || feed) { %>
+          <div class='btn header-item frame-link revealer' data-group='.info-group'>
+            <div class='tab'>
+              <i class='fa-solid fa-circle-info'></i> Info
+            </div>
+            <div class='loader'><i class="fa-solid fa-angle-down"></i><i class="fa-solid fa-angle-up hidden"></i></div>
+          </div>
+          <div class='info-group submenu hidden'>
+            <% if (profile) { %>
+            <a target="_blank" href="<%=profile%>" class='btn header-item frame-link'>
+              <div class='tab'><i class="fa-regular fa-circle-user"></i> Publisher</div>
+            </a>
+            <% } %>
+            <% if (feed) { %>
+            <a target="_blank" href="<%=feed%>" class='btn header-item frame-link'>
+              <div class='tab'><i class="fa-solid fa-rss"></i> Newsfeed</div>
+            </a>
+            <% } %>
+          </div>
         <% } %>
-      </div>
-    <% } %>
-    <%if (type!=='run') { %>
-      <a id='devtab' data-mode="refresh" target="<%=dev_link%>" href="<%=dev_link%>" class="btn header-item frame-link selected">
-        <div class="tab"><i class="fa-solid fa-keyboard"></i> Build</div>
-        <div class='loader'><i class='fa-solid fa-angle-right'></i></div>
-      </a>
-    <% } %>
-    <div class="dynamic <%=type==='run' ? '' : 'selected'%>">
-      <div class='submenu'>
-        <% if (plugin_menu) { %>
-          <%- include('./partials/dynamic', { dynamic: plugin_menu, }) %>
+        <%if (type!=='run') { %>
+          <a id='devtab' data-mode="refresh" target="<%=dev_link%>" href="<%=dev_link%>" class="btn header-item frame-link selected" data-index="10">
+            <div class="tab"><i class="fa-solid fa-keyboard"></i> Build</div>
+            <div class='loader'><i class='fa-solid fa-angle-right'></i></div>
+          </a>
         <% } %>
-      </div>
-      <% if (false) { %>
-        <% if (type !== "run") { %>
-          <% if (plugin_menu) { %>
-            <%- include('./partials/dynamic', { dynamic: plugin_menu, }) %>
-          <% } else { %>
-            <div class="nested-menu">
-              <div class="btn header-item frame-link selected">
-                <div class="tab"><i class="fa-solid fa-code"></i> Dev</div>
-                <div class="loader"><i class="fa-solid fa-circle-notch fa-spin"></i></div>
+        <div class="dynamic <%=type==='run' ? '' : 'selected'%>">
+          <div class='submenu'>
+            <% if (plugin_menu) { %>
+              <%- include('./partials/dynamic', { dynamic: plugin_menu, }) %>
+            <% } %>
+          </div>
+          <% if (false) { %>
+            <% if (type !== "run") { %>
+              <% if (plugin_menu) { %>
+                <%- include('./partials/dynamic', { dynamic: plugin_menu, }) %>
+              <% } else { %>
+                <div class="nested-menu">
+                  <div class="btn header-item frame-link selected">
+                    <div class="tab"><i class="fa-solid fa-code"></i> Dev</div>
+                    <div class="loader"><i class="fa-solid fa-circle-notch fa-spin"></i></div>
+                  </div>
+                </div>
+              <% } %>
+            <% } %>
+          <% } %>
+        </div>
+        <% if (type === "browse") { %>
+          <div class='nested-menu selected git blue'>
+            <div class='btn header-item frame-link reveal'>
+              <div class='tab'><i class="fa-solid fa-clock-rotate-left"></i> Version History</div>
+              <div class='loader'><i class="fa-solid fa-angle-down"></i><i class="fa-solid fa-angle-up hidden"></i></div>
+            </div>
+            <div class='submenu' id='git-repos'>
+            </div>
+          </div>
+          <!--
+          <div class='nested-menu selected blue'>
+            <a target="<%=logs%>" href="<%=logs%>" class='btn header-item frame-link' data-index="1" data-mode="refresh">
+              <div class='tab'>
+                <i class="fa-solid fa-clock-rotate-left"></i> Logs
               </div>
+              <div class='disk-usage' data-path="/logs"></div>
+            </a>
+          </div>
+          -->
+          <div class='nested-menu selected blue'>
+            <div class='btn header-item frame-link reveal'>
+              <div class='tab'><i class="fa-solid fa-robot"></i> AI Recipes</div>
+              <div class='loader'><i class="fa-solid fa-angle-down"></i><i class="fa-solid fa-angle-up hidden"></i></div>
             </div>
-          <% } %>
+            <div class='submenu hidden' id='ai-prompts'>
+            </div>
+          </div>
         <% } %>
-      <% } %>
-    </div>
-    <% if (type === "browse") { %>
-      <div class='nested-menu selected git blue'>
-        <div class='btn header-item frame-link reveal'>
-          <div class='tab'><i class="fa-solid fa-clock-rotate-left"></i> Version History</div>
-          <div class='loader'><i class="fa-solid fa-angle-down"></i><i class="fa-solid fa-angle-up hidden"></i></div>
-        </div>
-        <div class='submenu' id='git-repos'>
-        </div>
-      </div>
-      <!--
-      <div class='nested-menu selected blue'>
-        <a target="<%=logs%>" href="<%=logs%>" class='btn header-item frame-link' data-index="1" data-mode="refresh">
+        <div class='btn header-item frame-link revealer' data-group='.config-group'>
           <div class='tab'>
-            <i class="fa-solid fa-clock-rotate-left"></i> Logs
+            <i class='fa-solid fa-gear'></i> Settings
           </div>
-          <div class='disk-usage' data-path="/logs"></div>
-        </a>
-      </div>
-      -->
-      <div class='nested-menu selected blue'>
-        <div class='btn header-item frame-link reveal'>
-          <div class='tab'><i class="fa-solid fa-robot"></i> AI Recipes</div>
           <div class='loader'><i class="fa-solid fa-angle-down"></i><i class="fa-solid fa-angle-up hidden"></i></div>
         </div>
-        <div class='submenu hidden' id='ai-prompts'>
+        <div class='config-group submenu hidden'>
+          <a target="/share/<%=name%>" href="/share/<%=name%>", class="btn header-item frame-link" data-index="2" data-mode="refresh">
+            <div class='tab'><i class="fa-solid fa-wifi"></i> Share</div>
+          </a>
+          <a target="/env/api/<%=name%>" href="/env/api/<%=name%>", class="btn header-item frame-link" data-index="3" data-mode="refresh">
+            <div class='tab'><i class="fa-solid fa-gear"></i> Configure</div>
+          </a>
         </div>
       </div>
-    <% } %>
-    <div class='btn header-item frame-link revealer' data-group='.config-group'>
-      <div class='tab'>
-        <i class='fa-solid fa-gear'></i> Settings
+      <div class='m h menu' data-type='h'>
+        <% if (config.menu) { %>
+        <%- include('./partials/menu', { menu: config.menu, }) %>
+        <% } %>
+      </div>
+      <div class='m s temp-menu' data-type='s'>
+        <%tabs.forEach((tab, i) => { %>
+          <a target="s<%=i%>" href="<%=tab%>" class="btn header-item frame-link" data-index="<%=i%>">
+            <div class='tab'>
+              <i class="fa-solid fa-link"></i><div class='display'><%=tab%></div><div class='flexible'></div><button class='btn2 del'><i class="fa-solid fa-xmark"></i></button>
+            </div>
+          </a>
+        <%})%>
       </div>
-      <div class='loader'><i class="fa-solid fa-angle-down"></i><i class="fa-solid fa-angle-up hidden"></i></div>
-    </div>
-    <div class='config-group submenu hidden'>
-      <a target="/share/<%=name%>" href="/share/<%=name%>", class="btn header-item frame-link" data-index="2" data-mode="refresh">
-        <div class='tab'><i class="fa-solid fa-wifi"></i> Share</div>
-      </a>
-      <a target="/env/api/<%=name%>" href="/env/api/<%=name%>", class="btn header-item frame-link" data-index="3" data-mode="refresh">
-        <div class='tab'><i class="fa-solid fa-gear"></i> Configure</div>
-      </a>
-    </div>
-  </div>
-  <div class='m h menu' data-type='h'>
-    <% if (config.menu) { %>
-    <%- include('./partials/menu', { menu: config.menu, }) %>
-    <% } %>
-  </div>
-  <div class='m s temp-menu' data-type='s'>
-    <%tabs.forEach((tab, i) => { %>
-      <a target="s<%=i%>" href="<%=tab%>" class="btn header-item frame-link" data-index="<%=i%>">
-        <div class='tab'>
-          <i class="fa-solid fa-link"></i><div class='display'><%=tab%></div><div class='flexible'></div><button class='btn2 del'><i class="fa-solid fa-xmark"></i></button>
-        </div>
-      </a>
-    <%})%>
-  </div>
-  <!--
-  <div class='tabmenu'>
-    <div id='new-tab' class='btn header-item'><div class='tab'><i class="fa-solid fa-plus"></i> New</div></div>
-    <button class='btn header-item' id='clone-tab'><div class='tab'><i class='fa-regular fa-copy'></i> Clone</div></button>
-    <a class='btn header-item' id='open-browser' target="_blank" href="" features="browser"><div class='tab'><i class="fa-solid fa-square-arrow-up-right"></i> Popout</div></a>
-    <button class='btn header-item' id='reload'><div class='tab'><i class="fa-solid fa-rotate-right"></i> Refresh</div></button>
-  </div>
-  -->
-  <!--
-  <div class='grid-btns'>
-    <a class='btn2' href="/?mode=explore" id='explore'><div><i class="fa-solid fa-globe"></i></div><div>Discover</div></a>
-    <a class='btn2' id='report'><div><i class="fa-solid fa-bug"></i></div><div>Report Bug</div></a>
-    <a class='btn2' href='https://discord.gg/TQdNwadtE4' target="_blank"><div><i class="fa-brands fa-discord"></i></div><div>Discord</div></a>
-    <a class='btn2' href='https://twitter.com/cocktailpeanut' target="_blank"><div><i class="fa-brands fa-twitter"></i></div><div>Twitter</div></a>
-  </div>
-  -->
-</aside>
-<% if (error) { %>
-  <div class='error-message'>
-    <div>
-      <h1><i class="fa-solid fa-triangle-exclamation"></i> Error</h1> 
-      <div><%=error%></div>
     </div>
-  </div>
-<% } else { %>
+  </aside>
+
   <div class='container'>
-    <!--
-    <nav>
-      <div class='bar'>
-        <button class='btn2' id='menu-mobile'><i class="fa-solid fa-bars"></i></button>
-        <button class='btn2' id='menu'>
-          <img src="<%=config.icon%>"/>
-          <i class="fa-solid fa-arrow-right-to-bracket fa-rotate-180"></i>
+    <% if (type === "browse") { %>
+      <div id='fs-status' data-history-uri="<%=git_history_url%>" data-uri="<%=git_monitor_url%>">
+        <button id='fs-changes-btn' class='fs-status-btn'>
+          <span>Changes</span>
+          <div class='badge'>loading...</div>
+        </button>
+        <button id='fs-history-btn' class='fs-status-btn'>
+          <span>History</span>
         </button>
-        <% if (agent === "electron") { %>
-          <button class='btn2' id='back'><i class="fa-solid fa-chevron-left"></i></button>
-          <button class='btn2' id='forward'><i class="fa-solid fa-chevron-right"></i></button>
-        <% } %>
-        <button class='btn2' id='reload'><i class="fa-solid fa-rotate-right"></i> Refresh</button>
-        <% if (agent === "electron") { %>
-          <a class='btn2' id='open-browser' target="_blank" href="" features="browser"><i class="fa-solid fa-square-arrow-up-right"></i> Popout</a>
-        <% } else { %>
-          <a class='btn2' id='open-browser' target="_blank" href=""><i class="fa-solid fa-square-arrow-up-right"></i> Popout</a>
-        <% } %>
-        <button class='btn2' id='clone-tab'><i class='fa-regular fa-copy'></i> Clone</button>
-        <div id='new-tab' class='btn2'><i class="fa-solid fa-plus"></i> Tab</div>
-        <input type='url' id='location' readonly>
       </div>
-    </nav>
-    -->
+    <% } %>
     <main class='browserview'>
     </main>
   </div>
-  </div>
+</div>
   <script>
   let started_script
   let loaded = {}
   let cursorIndex = 0;
   let interacted = false
+  let global_selector
+  const iframe_onerror = (iframe) => {
+    let originalSrc = iframe.src
+    iframe.onload = function() {
+      try {
+        // Try to access the iframe's document
+        const currentSrc = iframe.src
+        // Check if it's a chrome error page or empty
+        console.log({ currentSrc, originalSrc })
+        if (currentSrc !== originalSrc && 
+            (currentSrc.includes('chrome-error://') || 
+            currentSrc === 'about:blank' || 
+            currentSrc.includes('data:'))) {
+          console.log('Iframe failed to load, switching to fallback');
+          iframeDoc.classList.add("hidden")
+          Swal.fire({
+            html: `<i class="fa-solid fa-circle-notch fa-spin"></i> Loading...`,
+            customClass: {
+              container: "loader-container",
+              popup: "loader-popup",
+              htmlContainer: "loader-dialog",
+              footer: "hidden",
+              actions: "hidden"
+            }
+          });
+          console.log("retrying after 3 seconds")
+          setTimeout(() => {
+            console.log("retrying")
+            iframe.src = iframe.src
+          }, 3000)
+        }
+      } catch (e) {
+        iframe.classList.add("hidden")
+        // Cross-origin restriction - assume it loaded successfully
+        // if no error was thrown during the initial load
+        console.log("ERROR", e)
+        Swal.fire({
+          html: `<i class="fa-solid fa-circle-notch fa-spin"></i> Loading...`,
+          customClass: {
+            container: "loader-container",
+            popup: "loader-popup",
+            htmlContainer: "loader-dialog",
+            footer: "hidden",
+            actions: "hidden"
+          }
+        });
+        setTimeout(() => {
+          location.href = location.href 
+        }, 3000);
+      }
+    }
+  }
+  const create_iframe = (name, href) => {
+    let frame = document.createElement("iframe")
+    frame.name = name
+    frame.src = href
+    iframe_onerror(frame)
+    frame.setAttribute(
+      "allow", 
+      "clipboard-read *; clipboard-write *; accelerometer *; ambient-light-sensor *; autoplay *; battery *; camera *; display-capture *; gamepad *; geolocation *; gyroscope *; hid *; identity-credentials-get *; microphone *; midi *; otp-credentials *; serial *;"
+    )
+    document.querySelector("main").appendChild(frame)
+    loaded[name] = true
+  }
+  /*
+  if (document.body.classList.contains("minimized")) {
+    document.querySelector("#collapse i").className = "fa-solid fa-compress"
+  } else {
+    document.querySelector("#collapse i").className = "fa-solid fa-expand"
+  }
+  */
   document.querySelector("#collapse").addEventListener("click", (e) => {
     document.body.classList.toggle("minimized")
-    fetch("/state", {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json"
-      },
-      body: JSON.stringify({
-        name: "<%=name%>",
-        type: "<%=type%>",
-        method: "toggleMenu"
-      })
-    }).then((res) => {
-    })
+    let frame_key = window.frameElement?.name || "";
+    if (document.body.classList.contains("minimized")) {
+//      document.querySelector("#collapse i").className = "fa-solid fa-compress"
+      sessionStorage.setItem(frame_key + ":window_mode", "minimized")
+    } else {
+//      document.querySelector("#collapse i").className = "fa-solid fa-expand"
+      sessionStorage.setItem(frame_key + ":window_mode", "full")
+    }
   })
   document.addEventListener("click", (e) => {
     interacted = true
@@ -1233,6 +2036,8 @@ body.dark .mode-selector .btn2.selected {
   */
   <% } %>
   <% if (type === "run" && config.meta_required) { %>
+
+/*
   setTimeout(() => {
     tippy('#switch-dev', {
       arrow: true,
@@ -1242,6 +2047,7 @@ body.dark .mode-selector .btn2.selected {
       content: "Switch to dev mode to make changes to the app"
     });
   }, 500)
+  */
   <% } %>
   const n = new N()
   const getTarget = (href) => {
@@ -1327,13 +2133,44 @@ body.dark .mode-selector .btn2.selected {
   //    */
   //  }
   }
+
+  let timeout_id
   const renderSelection = async (e, force) => {
     let selection = null
     <% if (type === "run" && env.PINOKIO_SCRIPT_DEFAULT && env.PINOKIO_SCRIPT_DEFAULT.toString().toLowerCase() === "true") { %>
       selection = document.querySelector("[data-default]")
+      if (selection && selection.href) {
+        let selection_protocol = new URL(selection.href).protocol
+        let page_protocol = new URL(location.href).protocol
+        console.log({ selection_protocol, page_protocol })
+        if (selection_protocol !== page_protocol) {
+          console.log({ timeout_id })
+          if (!timeout_id) {
+            console.log("Retrying in 3 seconds") 
+            Swal.fire({
+              html: `<i class="fa-solid fa-circle-notch fa-spin"></i> Loading...`,
+              customClass: {
+                container: "loader-container",
+                popup: "loader-popup",
+                htmlContainer: "loader-dialog",
+                footer: "hidden",
+                actions: "hidden"
+              }
+            });
+            timeout_id = setTimeout(() => {
+              location.href = location.href
+            }, 3000)
+          }
+          return
+        }
+      }
     <% } %>
-    console.log({ selection })
-    console.log("renderSelection", selection)
+    console.log("renderSelection", global_selector)
+    if (global_selector) {
+      selection = document.querySelector(global_selector)
+      console.log("selection", selection)
+      global_selector = null
+    }
     if (selection || location.hash && location.hash.length > 0) {
       let target
       if (location.hash && location.hash.length > 0) {
@@ -1348,18 +2185,6 @@ body.dark .mode-selector .btn2.selected {
           console.log({ type, index })
           selector = `aside .${type} [data-index='${index}']`
         }
-
-
-        // select the selected link
-    //    document.querySelectorAll(".frame-link").forEach((el) => {
-    //      el.classList.remove("selected")
-    //    })
-
-
-
-    //    const target = document.querySelector(`[target='${id}']`)
-
-
         if (e) {
           // If the renderSelection is triggered by an event, look for the frame-link that's triggering the event
           if (e.target.classList.contains("frame-link")) {
@@ -1430,21 +2255,8 @@ body.dark .mode-selector .btn2.selected {
         // save target.href
         <% if (type !== "run") { %>
           let _url = new URL(target.href)
-          fetch("/state", {
-            method: "POST",
-            headers: {
-              "Content-Type": "application/json"
-            },
-            body: JSON.stringify({
-              name: "<%=name%>",
-              type: "<%=type%>",
-              method: "select",
-              params: {
-                url: _url.pathname + _url.search + _url.hash,
-              }
-            })
-          }).then((res) => {
-          })
+          let frame_key = window.frameElement?.name || "";
+          sessionStorage.setItem(frame_key + ":url", _url.pathname + _url.search + _url.hash)
         <% } %>
 
         // hide all frames
@@ -1466,7 +2278,8 @@ body.dark .mode-selector .btn2.selected {
           for(let frame of hardFrames) {
             console.log({ src: frame.src, href: target.href, target: target.target })
             // Types of links in the tab
-            if (String(port) === "<%=port%>") {
+            //if (String(port) === "<%=port%>") {
+            if (String(port) === String(location.port) || /https:\/\/pinokio\..*localhost/.test(origin)) {
               // 1. running from <%=port%> => find a frame whose base URL matches the tab's base URL
               // Pinokio links
               let targetPath = new URL(target.href).pathname
@@ -1569,6 +2382,7 @@ body.dark .mode-selector .btn2.selected {
           let frame = document.createElement("iframe")
           frame.name = target.target
           frame.src = target.href
+          iframe_onerror(frame)
           frame.setAttribute(
             "allow", 
             "clipboard-read *; clipboard-write *; accelerometer *; ambient-light-sensor *; autoplay *; battery *; camera *; display-capture *; gamepad *; geolocation *; gyroscope *; hid *; identity-credentials-get *; microphone *; midi *; otp-credentials *; serial *;"
@@ -1680,6 +2494,7 @@ body.dark .mode-selector .btn2.selected {
     })
   <% } %>
 
+
   const syncTabs = async () => {
     let tabs = []
     document.querySelectorAll(".temp-menu .frame-link").forEach((el) => {
@@ -1719,6 +2534,7 @@ body.dark .mode-selector .btn2.selected {
     let frame = document.createElement("iframe")
     frame.name = id
     frame.src = item.href
+    iframe_onerror(frame)
     frame.setAttribute(
       "allow", 
       "clipboard-read *; clipboard-write *; accelerometer *; ambient-light-sensor *; autoplay *; battery *; camera *; display-capture *; gamepad *; geolocation *; gyroscope *; hid *; identity-credentials-get *; microphone *; midi *; otp-credentials *; serial *;"
@@ -1776,6 +2592,14 @@ body.dark .mode-selector .btn2.selected {
       }
     })
   })
+  document.querySelector("#popout-link").addEventListener("click", async (e) => {
+    e.preventDefault()
+    e.stopPropagation()
+    let iframe = document.querySelector("iframe:not(.hidden)")
+    if (iframe) {
+      open_url(iframe.src, "_blank") 
+    }
+  })
   document.querySelector("#edit").addEventListener("click", async (e) => {
     e.preventDefault()
     e.stopPropagation()
@@ -2283,7 +3107,6 @@ body.dark .mode-selector .btn2.selected {
     const ai = await fetch("<%=ai%>").then((res) => {
       return res.text()
     })
-    console.log({ ai })
     if (document.querySelector("#ai-prompts")) {
       document.querySelector("#ai-prompts").innerHTML = ai
     }
@@ -2293,7 +3116,7 @@ body.dark .mode-selector .btn2.selected {
     // render the selected frame only if not silent
     if (silent) {
     } else {
-      <% if (type === 'run') { %>
+      <% if (type === 'run' || type === 'browse' ) { %>
       renderSelection()
       <% } %>
     }
@@ -2317,7 +3140,6 @@ body.dark .mode-selector .btn2.selected {
     })
   }
   let init = document.querySelector("[data-init]")
-  console.log("init")
   if (init) {
     init.click()
   }
@@ -2331,10 +3153,13 @@ body.dark .mode-selector .btn2.selected {
 
     // only process the event it's coming from pinokio
     let origin = event.origin
+    console.log("origin", origin)
     if (origin) {
       let port = new URL(origin).port || 80
       console.log("port", port)
-      if (String(port) === "<%=port%>") {
+      if (String(port) === String(location.port) || /https:\/\/pinokio\..*localhost/.test(origin)) {
+      //if (String(port) === "<%=port%>" || /https:\/\/pinokio\..*localhost/.test(origin)) {
+      //if (String(port) === "<%=port%>") {
         console.log("Message received from the child: ", event); // Message received from child
         if (event.data) {
           if (event.data.action) {
@@ -2356,6 +3181,14 @@ body.dark .mode-selector .btn2.selected {
                 document.querySelector("#location").value = pathname
               }
             }
+          } else if (event.data.launch) {
+            debugger
+            global_selector = `.frame-link[target="${event.data.launch.name}"]`
+            let s = document.querySelector(global_selector)
+            if (!s) {
+              create_iframe(event.data.launch.name, event.data.launch.href)
+            }
+            refresh()
           } else if (event.data.type) {
             let asideHidden = (window.getComputedStyle(document.querySelector("aside")).display === "none")
             console.log("asideHidden", asideHidden)
@@ -2365,20 +3198,6 @@ body.dark .mode-selector .btn2.selected {
               if (event.data.type === 'disconnect') {
                 console.log("Refresh 1")
                 refresh()
-//              } else if (event.data.type === 'start') { 
-//                // script start => select the tab
-//                started_script = event.data.id
-//                /*
-//                id := /Users/x/pinokio/quick/system/claude/pinokio.js
-//                need to transform to /run/Dia/system/claude/pinokio.js
-//                */
-//                let run_frame = document.querySelector(".browserview iframe[name=run_frame]")
-//                const url = run_frame.contentWindow.location.pathname;
-//                console.log("url", url)
-//                //run_frame.name = event.data.id
-//                run_frame.name = url
-////                run_frame.remove()
-//                refresh()
               } else {
                 console.log("Refresh 2")
                 refresh()
@@ -2402,23 +3221,29 @@ body.dark .mode-selector .btn2.selected {
   });
   refresh_du()
   refresh_du("logs")
-  fetch("/state/<%=type%>/<%=name%>").then((res) => {
-    return res.json()
-  }).then((res) => {
-    console.log("STATE", res)
-    let selection
-    if (res && res.selected) {
-      selection = document.querySelector(`[href='${res.selected}']`)
-    } else {
-      selection = document.querySelector("#devtab")
-    }
-    console.log("CLICK", selection)
-    selection.click()
+  let frame_key = window.frameElement?.name || "";
+
+  let selection_url = sessionStorage.getItem(frame_key + ":url")
+  console.log({ frame_key, selection_url })
+  let selection
+  if (selection_url) {
+    selection = document.querySelector(`[href='${selection_url}']`)
+  } else {
+    selection = document.querySelector("#devtab")
+  }
+  console.log("CLICK", selection)
+  if (selection) {
 //    setTimeout(() => {
-//      alert("click")
-//      document.querySelector(".selected").click()
-//    }, 500)
-  })
+      selection.click()
+//    }, 100)
+  }
+  let window_mode = sessionStorage.getItem(frame_key + ":window_mode")
+  console.log({ window_mode })
+  if (window_mode) {
+    if (window_mode === "minimized") {
+      document.body.classList.add("minimized")
+    }
+  }
   <% if (type !== 'run') { %>
     fetch("<%=repos%>").then((res) => {
       return res.text()
@@ -2469,6 +3294,577 @@ body.dark .mode-selector .btn2.selected {
     }
   });
   */
+  <% if (type === "browse") { %>
+    let currentChanges = []
+    let gitCommitUrl = null
+    
+    const check_git = () => {
+      console.log('check_git called, fetching from:', "<%=git_monitor_url%>")
+      fetch("<%=git_monitor_url%>").then((res) => {
+        console.log('check_git response status:', res.status)
+        return res.json()
+      }).then((res) => {
+        console.log('check_git response data:', res)
+        currentChanges = res.changes || []
+        gitCommitUrl = res.git_commit_url || null
+        console.log('currentChanges updated to:', currentChanges)
+        const badgeElement = document.querySelector("#fs-changes-btn .badge")
+        console.log('Badge element found:', badgeElement)
+        if (res.changes && res.changes.length > 0) {
+          console.log('Setting badge to:', res.changes.length)
+          badgeElement.innerHTML = `${res.changes.length}`
+        } else {
+          console.log('Clearing badge')
+          badgeElement.innerHTML = ''
+        }
+      }).catch((error) => {
+        console.error('check_git error:', error)
+      })
+    }
+    
+    let messageListener = null
+    
+    const showIframeView = (src) => {
+      const iframeHtml = `<iframe src="${src}" style="width: 100%; height: 100%; border: none; display: block;" frameborder="0"></iframe>`
+      
+      // Update the modal content to show iframe
+      const htmlContainer = document.querySelector('.pinokio-git-diff-modal-wrapper .swal2-html-container')
+      if (htmlContainer) {
+        htmlContainer.innerHTML = iframeHtml
+      }
+      
+      // Add postMessage listener for iframe communication
+      if (messageListener) {
+        window.removeEventListener('message', messageListener)
+      }
+      
+      messageListener = (event) => {
+        console.log('Received postMessage:', event.data)
+        
+        // Check if event has callback data that starts with "$"
+        if (event.data && 
+            event.data.callback && 
+            typeof event.data.callback === 'string' && 
+            event.data.callback.startsWith('$')) {
+          
+          console.log('Callback starts with $, closing modal')
+          
+          // Close the modal
+          Swal.close()
+          
+          // Clean up the listener
+          if (messageListener) {
+            window.removeEventListener('message', messageListener)
+            messageListener = null
+          }
+        }
+      }
+      
+      window.addEventListener('message', messageListener)
+    }
+    
+    const generateCommitMessage = (changes) => {
+      if (!changes || changes.length === 0) return "Update files"
+      
+      const addedFiles = []
+      const modifiedFiles = []
+      const deletedFiles = []
+      const renamedFiles = []
+      
+      changes.forEach(change => {
+        const status = change.status.toLowerCase()
+        const fileName = change.file
+        
+        if (status.includes('new') || status.includes('add')) {
+          addedFiles.push(fileName)
+        } else if (status.includes('delete') || status.includes('remove')) {
+          deletedFiles.push(fileName)
+        } else if (status.includes('rename') || status.includes('moved')) {
+          renamedFiles.push(fileName)
+        } else {
+          modifiedFiles.push(fileName)
+        }
+      })
+      
+      const messages = []
+      
+      if (addedFiles.length > 0) {
+        if (addedFiles.length === 1) {
+          messages.push(`Add ${addedFiles[0]}`)
+        } else {
+          messages.push(`Add ${addedFiles.length} files`)
+        }
+      }
+      
+      if (modifiedFiles.length > 0) {
+        if (modifiedFiles.length === 1) {
+          messages.push(`Update ${modifiedFiles[0]}`)
+        } else {
+          messages.push(`Update ${modifiedFiles.length} files`)
+        }
+      }
+      
+      if (deletedFiles.length > 0) {
+        if (deletedFiles.length === 1) {
+          messages.push(`Delete ${deletedFiles[0]}`)
+        } else {
+          messages.push(`Delete ${deletedFiles.length} files`)
+        }
+      }
+      
+      if (renamedFiles.length > 0) {
+        if (renamedFiles.length === 1) {
+          messages.push(`Rename ${renamedFiles[0]}`)
+        } else {
+          messages.push(`Rename ${renamedFiles.length} files`)
+        }
+      }
+      
+      if (messages.length === 0) {
+        return changes.length === 1 ? `Update ${changes[0].file}` : `Update ${changes.length} files`
+      }
+      
+      return messages.join(', ')
+    }
+    
+    const showGitDiffModal = async (diffData = null, modalTitle = 'File Changes', showSaveButton = true) => {
+      console.log('showGitDiffModal called with:', { diffData, modalTitle, showSaveButton })
+      console.log('currentChanges:', currentChanges)
+      
+      let changes = diffData ? (diffData.changes || []) : currentChanges
+      let commitUrl = diffData ? (diffData.git_commit_url || null) : gitCommitUrl
+      
+      console.log('Initial changes:', changes)
+      
+      // If no diffData provided and currentChanges is empty, try to fetch fresh data
+      if (!diffData && changes.length === 0) {
+        console.log('Fetching fresh data because changes is empty')
+        try {
+          const response = await fetch("<%=git_monitor_url%>")
+          const freshData = await response.json()
+          console.log('Fresh data received:', freshData)
+          changes = freshData.changes || []
+          commitUrl = freshData.git_commit_url || null
+          currentChanges = changes // Update the global variable
+          gitCommitUrl = commitUrl
+        } catch (error) {
+          console.error('Failed to fetch current changes:', error)
+        }
+      }
+      
+      console.log('Final changes before modal:', changes)
+      
+      if (changes.length === 0) {
+        console.log('No changes found - showing info dialog')
+        Swal.fire({
+          title: 'No Changes',
+          text: 'No file changes detected.',
+          icon: 'info'
+        })
+        return
+      }
+      
+      console.log('About to show modal with changes:', changes.length)
+      
+      const modalHtml = `
+        <div class="pinokio-git-diff-main-container">
+          <div class="pinokio-git-diff-file-list-panel">
+            ${changes.map((change, index) => `
+              <div class="pinokio-git-diff-file-item-row" data-index="${index}" data-diffpath="${change.diffpath}">
+                <div style="font-weight: bold; margin-bottom: 2px;">${change.file}</div>
+                <div style="font-size: 10px; color: #656d76;">${change.status}</div>
+              </div>
+            `).join('')}
+          </div>
+          <div class="pinokio-git-diff-viewer-panel">
+            <div class="pinokio-git-diff-empty-state">Select a file to view its changes</div>
+          </div>
+        </div>
+      `
+      
+      const modalConfig = {
+        title: modalTitle,
+        html: modalHtml,
+        customClass: {
+          popup: showSaveButton ? 'pinokio-git-diff-modal-wrapper' : 'pinokio-git-diff-modal-wrapper pinokio-git-commit-diff-overlay'
+        },
+        showConfirmButton: showSaveButton,
+        showCancelButton: false,
+        showCloseButton: true,
+        footer: showSaveButton ? `
+          <div class="pinokio-commit-message-container">
+            <input type="text" class="pinokio-commit-message-input" placeholder="Enter commit message..." value="${generateCommitMessage(changes)}">
+            <button type="button" class="pinokio-save-version-btn">Save version</button>
+          </div>
+        ` : null
+      }
+      
+      if (showSaveButton) {
+        modalConfig.showConfirmButton = false // Hide default confirm button since we have custom footer
+      }
+      
+      
+      modalConfig.willClose = () => {
+        // Clean up message listener when modal closes
+        if (messageListener) {
+          window.removeEventListener('message', messageListener)
+          messageListener = null
+        }
+      }
+      
+      modalConfig.didOpen = () => {
+          const fileItems = document.querySelectorAll('.pinokio-git-diff-file-item-row')
+          const diffViewer = document.querySelector('.pinokio-git-diff-viewer-panel')
+
+          // Handle custom save button click
+          const saveBtn = document.querySelector('.pinokio-save-version-btn')
+          if (saveBtn) {
+            saveBtn.addEventListener('click', () => {
+              const messageInput = document.querySelector('.pinokio-commit-message-input')
+              const commitMessage = messageInput ? messageInput.value.trim() : ''
+              
+              if (commitUrl) {
+                // Add the message parameter to the URL
+                const url = new URL(commitUrl, window.location.origin)
+                if (commitMessage) {
+                  url.searchParams.set('message', commitMessage)
+                }
+                showIframeView(url.toString())
+              } else {
+                Swal.showValidationMessage('No commit URL available')
+              }
+            })
+          }
+
+          Swal.getPopup().addEventListener('message', (event) => {
+            console.log("EVENT", event)
+//            if (event.data) {
+//              if (event.data.callback) {
+//                if (event.data.callback.startsWith("$")) {
+//                  location.href = eval(event.data.callback.slice(1))
+//                } else {
+//                  location.href = event.data.callback
+//                }
+//              }
+//            }
+          })
+
+          
+          
+          fileItems.forEach(item => {
+            item.addEventListener('click', async () => {
+              // Remove active class from all items
+              fileItems.forEach(i => i.classList.remove('pinokio-active-file-item'))
+              // Add active class to clicked item
+              item.classList.add('pinokio-active-file-item')
+              
+              const diffpath = item.getAttribute('data-diffpath')
+              diffViewer.innerHTML = '<div class="pinokio-git-diff-empty-state">Loading...</div>'
+              
+              try {
+                const diffRes = await fetch(diffpath)
+                const diffData = await diffRes.json()
+                renderDiff(diffData, diffViewer)
+              } catch (error) {
+                console.error('Error fetching diff:', error)
+                diffViewer.innerHTML = '<div class="pinokio-git-diff-empty-state">Error loading diff</div>'
+              }
+            })
+          })
+      }
+      
+      const result = await Swal.fire(modalConfig)
+    }
+    
+    const renderDiff = (diffData, container) => {
+      if (!diffData.diff || diffData.diff.length === 0) {
+        container.innerHTML = '<div class="pinokio-git-diff-empty-state">No changes to display</div>'
+        return
+      }
+      
+      const diffHtml = diffData.diff.map(line => {
+        const lineNumbers = line.lineOld && line.lineNew 
+          ? `${line.lineOld || ''} ${line.lineNew || ''}`
+          : line.lineOld
+            ? `${line.lineOld} `
+            : ` ${line.lineNew || ''}`
+        
+        let cssClass = 'pinokio-diff-code-line'
+        if (line.type === 'add') {
+          cssClass += ' pinokio-diff-code-line-addition'
+        } else if (line.type === 'del') {
+          cssClass += ' pinokio-diff-code-line-deletion'
+        } else {
+          cssClass += ' pinokio-diff-code-line-context'
+        }
+        
+        const escapedLine = line.line
+          .replace(/&/g, '&amp;')
+          .replace(/</g, '&lt;')
+          .replace(/>/g, '&gt;')
+        
+        return `<div class="${cssClass}">
+          <span class="pinokio-diff-code-line-numbers">${lineNumbers}</span>
+          <span class="pinokio-diff-code-line-content">${escapedLine}</span>
+        </div>`
+      }).join('')
+      
+      container.innerHTML = diffHtml
+    }
+    
+    const showGitHistoryModal = async () => {
+      const historyUri = document.querySelector('#fs-status').getAttribute('data-history-uri')
+      if (!historyUri) {
+        Swal.fire({
+          title: 'Error',
+          text: 'Git history URL not available.',
+          icon: 'error'
+        })
+        return
+      }
+      
+      try {
+        const response = await fetch(historyUri)
+        if (!response.ok) {
+          throw new Error(`HTTP ${response.status}: ${response.statusText}`)
+        }
+        
+        const historyData = await response.json()
+        displayGitHistory(historyData)
+        
+      } catch (error) {
+        console.error('Failed to load git history:', error)
+        Swal.fire({
+          title: 'Error',
+          text: `Failed to load git history: ${error.message}`,
+          icon: 'error'
+        })
+      }
+    }
+    
+    const displayGitHistory = (historyData) => {
+      const commits = historyData.log || []
+      const remote = historyData.remote || ''
+      const currentRef = historyData.ref || 'HEAD'
+      
+      const historyHtml = `
+        <div class="pinokio-git-history-container">
+          <div class="pinokio-git-history-header">
+            <div class="pinokio-git-history-info">
+              <div class="pinokio-git-history-ref">
+                <i class="fa-solid fa-code-branch"></i>
+                <span>${currentRef}</span>
+              </div>
+              ${remote ? `<div class="pinokio-git-history-remote">
+                <i class="fa-solid fa-globe"></i>
+                <span>${remote}</span>
+              </div>` : ''}
+            </div>
+          </div>
+          <div class="pinokio-git-history-list">
+            ${commits.length === 0 ? 
+              '<div class="pinokio-git-history-empty">No commits found</div>' :
+              commits.map(commit => createCommitItem(commit)).join('')
+            }
+          </div>
+        </div>
+      `
+      
+      Swal.fire({
+        title: `Git History (${commits.length} commits)`,
+        html: historyHtml,
+        customClass: {
+          popup: 'pinokio-git-history-modal-wrapper'
+        },
+        showConfirmButton: false,
+        showCloseButton: true,
+        width: '90vw',
+        heightAuto: false,
+        didOpen: () => {
+          // Add click handlers to commit items
+          const commitItems = document.querySelectorAll('.pinokio-git-commit-item[data-commit-info]')
+          commitItems.forEach(item => {
+            item.addEventListener('click', async (e) => {
+              const commitInfo = item.getAttribute('data-commit-info')
+              if (commitInfo) {
+                await showCommitDiffModal(commitInfo)
+              }
+            })
+          })
+        }
+      })
+    }
+    
+    const showCommitDiffModal = async (commitInfoUrl) => {
+      if (!commitInfoUrl) {
+        Swal.fire({
+          title: 'Error',
+          text: 'Commit information URL not available.',
+          icon: 'error'
+        })
+        return
+      }
+      
+      try {
+        const response = await fetch(commitInfoUrl)
+        if (!response.ok) {
+          throw new Error(`HTTP ${response.status}: ${response.statusText}`)
+        }
+        
+        const diffData = await response.json()
+        await showCommitDiffModalQueued(diffData)
+        
+      } catch (error) {
+        console.error('Failed to load commit diff:', error)
+        Swal.fire({
+          title: 'Error',
+          text: `Failed to load commit changes: ${error.message}`,
+          icon: 'error'
+        })
+      }
+    }
+    
+    const showCommitDiffModalQueued = async (diffData) => {
+      const changes = diffData.changes || []
+      
+      if (changes.length === 0) {
+        alert('No file changes detected.')
+        return
+      }
+      
+      // Create custom overlay modal
+      const overlay = document.createElement('div')
+      overlay.className = 'pinokio-custom-commit-overlay'
+      overlay.innerHTML = `
+        <div class="pinokio-custom-commit-modal">
+          <div class="pinokio-custom-commit-header">
+            <h3>Commit Changes</h3>
+            <button class="pinokio-custom-commit-close">×</button>
+          </div>
+          <div class="pinokio-custom-commit-content">
+            <div class="pinokio-git-diff-main-container">
+              <div class="pinokio-git-diff-file-list-panel">
+                ${changes.map((change, index) => `
+                  <div class="pinokio-git-diff-file-item-row" data-index="${index}" data-diffpath="${change.diffpath}">
+                    <div style="font-weight: bold; margin-bottom: 2px;">${change.file}</div>
+                    <div style="font-size: 10px; color: #656d76;">${change.status}</div>
+                  </div>
+                `).join('')}
+              </div>
+              <div class="pinokio-git-diff-viewer-panel">
+                <div class="pinokio-git-diff-empty-state">Select a file to view its changes</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      `
+      
+      document.body.appendChild(overlay)
+      
+      // Add close handler
+      const closeBtn = overlay.querySelector('.pinokio-custom-commit-close')
+      closeBtn.addEventListener('click', () => {
+        document.body.removeChild(overlay)
+      })
+      
+      // Close on overlay click
+      overlay.addEventListener('click', (e) => {
+        if (e.target === overlay) {
+          document.body.removeChild(overlay)
+        }
+      })
+      
+      // Add file click handlers
+      const fileItems = overlay.querySelectorAll('.pinokio-git-diff-file-item-row')
+      const diffViewer = overlay.querySelector('.pinokio-git-diff-viewer-panel')
+      
+      fileItems.forEach(item => {
+        item.addEventListener('click', async () => {
+          // Remove active class from all items
+          fileItems.forEach(i => i.classList.remove('pinokio-active-file-item'))
+          // Add active class to clicked item
+          item.classList.add('pinokio-active-file-item')
+          
+          const diffpath = item.getAttribute('data-diffpath')
+          diffViewer.innerHTML = '<div class="pinokio-git-diff-empty-state">Loading...</div>'
+          
+          try {
+            const diffRes = await fetch(diffpath)
+            const diffData = await diffRes.json()
+            renderDiff(diffData, diffViewer)
+          } catch (error) {
+            console.error('Error fetching diff:', error)
+            diffViewer.innerHTML = '<div class="pinokio-git-diff-empty-state">Error loading diff</div>'
+          }
+        })
+      })
+      
+      // Handle escape key
+      const escHandler = (e) => {
+        if (e.key === 'Escape') {
+          document.body.removeChild(overlay)
+          document.removeEventListener('keydown', escHandler)
+        }
+      }
+      document.addEventListener('keydown', escHandler)
+    }
+    
+    const createCommitItem = (commitData) => {
+      const commit = commitData.commit
+      const oid = commitData.oid
+      const info = commitData.info || ''
+      const author = commit.author
+      const message = commit.message.trim()
+      const shortMessage = message.split('\n')[0]
+      const timestamp = new Date(author.timestamp * 1000)
+      const timeAgo = (typeof timeago !== 'undefined' && timeago) ? timeago.format(timestamp) : timestamp.toLocaleDateString()
+      
+      return `
+        <div class="pinokio-git-commit-item" data-commit-info="${info}" style="cursor: pointer;">
+          <div class="pinokio-git-commit-avatar">
+            <i class="fa-solid fa-user"></i>
+          </div>
+          <div class="pinokio-git-commit-content">
+            <div class="pinokio-git-commit-message" title="${message.replace(/"/g, '&quot;')}">${shortMessage}</div>
+            <div class="pinokio-git-commit-meta">
+              <span class="pinokio-git-commit-author">${author.name}</span>
+              <span class="pinokio-git-commit-time">${timeAgo}</span>
+              <span class="pinokio-git-commit-hash" title="${oid}">${oid.substring(0, 7)}</span>
+            </div>
+          </div>
+        </div>
+      `
+    }
+    
+    // Add click handlers for the buttons
+    document.querySelector('#fs-changes-btn').addEventListener('click', () => showGitDiffModal())
+    document.querySelector('#fs-history-btn').addEventListener('click', showGitHistoryModal)
+    
+    check_git()
+    setInterval(check_git, 10000)
+  <% } %>
+
+  setInterval(() => {
+    try {
+      let foreground_frame = document.querySelector("iframe:not(.hidden)")
+      let selected_tab = document.querySelector("aside .frame-link.selected")
+      let needs_selection
+      if (selected_tab) {
+        if (selected_tab.target === foreground_frame.name) {
+          needs_selection = false
+        } else {
+          needs_selection = true
+        }
+      } else {
+        needs_selection = true
+      }
+      if (needs_selection) {
+        let selection_tab = document.querySelector(`aside .frame-link[target="${foreground_frame.name}"]`)
+        selection_tab.click()
+      }
+    } catch (e) {
+    }
+  }, 1000)
 
   </script>
 <% } %>