Flowfile 0.3.9__py3-none-any.whl → 0.5.1__py3-none-any.whl

flowfile/web/static/assets/{designer-2197d782.css → designer-8da3ba3a.css}

@@ -1,9 +1,9 @@
 
-.button-group[data-v-e9cba087] {
+.button-group[data-v-c0f9acc7] {
   display: flex;
   gap: 10px;
 }
-.button-group .el-button[data-v-e9cba087] {
+.button-group .el-button[data-v-c0f9acc7] {
   display: flex;
   align-items: center;
   gap: 6px;
@@ -20,20 +20,20 @@
 }
 
 /* Run button - normal state */
-.button-group .el-button[data-v-e9cba087]:first-child:not([disabled]) {
+.button-group .el-button[data-v-c0f9acc7]:first-child:not([disabled]) {
   background-color: rgb(2, 27, 45) !important;
   border: 1px solid rgb(17, 64, 97) !important;
   color: white !important;
 }
 
 /* Run button - hover state */
-.button-group .el-button[data-v-e9cba087]:first-child:not([disabled]):hover {
+.button-group .el-button[data-v-c0f9acc7]:first-child:not([disabled]):hover {
   background-color: rgba(65, 55, 200, 0.95) !important;
   border-color: rgba(65, 55, 200, 1) !important;
 }
 
 /* Run button - disabled state */
-.button-group .el-button:first-child[disabled][data-v-e9cba087] {
+.button-group .el-button:first-child[disabled][data-v-c0f9acc7] {
   background-color: rgba(16, 24, 40, 0.3) !important;
   border: 1px solid rgba(16, 24, 40, 0.2) !important;
   color: rgba(255, 255, 255, 0.8) !important;
@@ -41,25 +41,25 @@
 }
 
 /* Cancel button */
-.button-group .el-button[data-v-e9cba087]:nth-child(2) {
+.button-group .el-button[data-v-c0f9acc7]:nth-child(2) {
   background-color: rgba(220, 53, 69, 0.9) !important;
   border: 1px solid rgba(220, 53, 69, 0.95) !important;
   color: white !important;
 }
 
 /* Cancel button - hover state */
-.button-group .el-button[data-v-e9cba087]:nth-child(2):hover {
+.button-group .el-button[data-v-c0f9acc7]:nth-child(2):hover {
   background-color: rgba(200, 35, 51, 0.95) !important;
   border-color: rgba(200, 35, 51, 1) !important;
 }
 
 /* Active state for both buttons */
-.button-group .el-button[data-v-e9cba087]:active {
+.button-group .el-button[data-v-c0f9acc7]:active {
   transform: translateY(1px);
   box-shadow: none;
 }
 
-.browser-title[data-v-d5bb1173] {
+.browser-title[data-v-11a74179] {
   display: flex;
   align-items: center;
   gap: 8px;
@@ -68,28 +68,28 @@
   font-weight: 600;
   color: #333;
 }
-.mode-selector[data-v-d5bb1173] {
+.mode-selector[data-v-11a74179] {
   display: flex;
   justify-content: center;
 }
-.browser-content[data-v-d5bb1173] {
+.browser-content[data-v-11a74179] {
   display: flex;
   flex-direction: column;
   height: calc(100% - 116px); /* Adjust based on header height */
   overflow: hidden;
 }
-.browser-toolbar[data-v-d5bb1173] {
+.browser-toolbar[data-v-11a74179] {
   padding: 16px;
   background-color: #fff;
   border-bottom: 1px solid #e9ecef;
 }
-.path-navigation[data-v-d5bb1173] {
+.path-navigation[data-v-11a74179] {
   display: flex;
   align-items: center;
   gap: 12px;
   margin-bottom: 12px;
 }
-.nav-button[data-v-d5bb1173] {
+.nav-button[data-v-11a74179] {
   display: inline-flex;
   align-items: center;
   gap: 4px;
@@ -102,11 +102,11 @@
   cursor: pointer;
   transition: all 0.2s ease;
 }
-.nav-button[data-v-d5bb1173]:hover:not(:disabled) {
+.nav-button[data-v-11a74179]:hover:not(:disabled) {
   background-color: #f8f9fa;
   border-color: #ced4da;
 }
-.current-path[data-v-d5bb1173] {
+.current-path[data-v-11a74179] {
   flex: 1;
   padding: 8px 12px;
   background-color: #f8f9fa;
@@ -115,57 +115,57 @@
   font-family: monospace;
   color: #495057;
 }
-.search-container[data-v-d5bb1173] {
+.search-container[data-v-11a74179] {
   display: flex;
   align-items: center;
   gap: 16px;
   flex: 1;
 }
-.search-input[data-v-d5bb1173] {
+.search-input[data-v-11a74179] {
   flex: 1;
 }
-.browser-main[data-v-d5bb1173] {
+.browser-main[data-v-11a74179] {
   flex: 1;
   overflow-y: auto;
   padding: 16px;
 }
-.file-item[data-v-d5bb1173] {
+.file-item[data-v-11a74179] {
   border: 1px solid #e9ecef;
   border-radius: 8px;
   overflow: hidden;
   transition: all 0.2s ease;
 }
-.file-item[data-v-d5bb1173]:hover {
+.file-item[data-v-11a74179]:hover {
   transform: translateY(-2px);
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }
-.file-item.selected[data-v-d5bb1173] {
+.file-item.selected[data-v-11a74179] {
   border-color: #3b82f6;
   background-color: #eff6ff;
 }
-.file-item-content[data-v-d5bb1173] {
+.file-item-content[data-v-11a74179] {
   padding: 12px;
   display: flex;
   align-items: center;
   gap: 12px;
 }
-.file-icon-wrapper[data-v-d5bb1173] {
+.file-icon-wrapper[data-v-11a74179] {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 30px;
   height: 30px;
 }
-.file-icon[data-v-d5bb1173] {
+.file-icon[data-v-11a74179] {
   width: 24px;
   height: 24px;
   color: #6b7280;
 }
-.file-details[data-v-d5bb1173] {
+.file-details[data-v-11a74179] {
   flex: 1;
   min-width: 0;
 }
-.file-name[data-v-d5bb1173] {
+.file-name[data-v-11a74179] {
   font-weight: 500;
   color: #1f2937;
   margin-bottom: 4px;
@@ -173,11 +173,11 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.file-info[data-v-d5bb1173] {
+.file-info[data-v-11a74179] {
   font-size: 12px;
   color: #6b7280;
 }
-.browser-actions[data-v-d5bb1173] {
+.browser-actions[data-v-11a74179] {
   padding: 16px;
   background-color: #f8f9fa;
   border-top: 1px solid #e9ecef;
@@ -188,25 +188,25 @@
   box-sizing: border-box;
   gap: 12px; /* Add gap between buttons */
 }
-.selected-file[data-v-d5bb1173] {
+.selected-file[data-v-11a74179] {
   color: #6b7280;
   font-size: 14px;
 }
-.loading-state[data-v-d5bb1173],
-.error-state[data-v-d5bb1173] {
+.loading-state[data-v-11a74179],
+.error-state[data-v-11a74179] {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 200px;
   color: #6b7280;
 }
-.error-state[data-v-d5bb1173] {
+.error-state[data-v-11a74179] {
   color: #dc2626;
 }
-.hidden-file[data-v-d5bb1173] {
+.hidden-file[data-v-11a74179] {
   opacity: 0.5;
 }
-.file-browser[data-v-d5bb1173] {
+.file-browser[data-v-11a74179] {
   display: flex;
   flex-direction: column;
   height: 70vh; /* Set to 70% of viewport height */
@@ -214,20 +214,20 @@
   border-radius: 8px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
-.browser-content[data-v-d5bb1173] {
+.browser-content[data-v-11a74179] {
   display: flex;
   flex-direction: column;
   flex: 1;
   min-height: 0; /* Enable proper flex child scrolling */
   overflow: hidden;
 }
-.browser-main[data-v-d5bb1173] {
+.browser-main[data-v-11a74179] {
   flex: 1;
   overflow-y: auto; /* Make this section scrollable */
   padding: 16px;
   min-height: 0; /* Enable proper flex child scrolling */
 }
-.grid-container[data-v-d5bb1173] {
+.grid-container[data-v-11a74179] {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(205px, 1fr));
   gap: 16px;
@@ -235,25 +235,25 @@
 }
 
 /* Optional: if you want to maintain icon size consistency */
-.file-icon[data-v-d5bb1173] {
+.file-icon[data-v-11a74179] {
   width: 24px;
   height: 24px;
   object-fit: contain;
 }
 
 /* Add new styles for sort controls */
-.search-and-sort-container[data-v-d5bb1173] {
+.search-and-sort-container[data-v-11a74179] {
   display: flex;
   flex-direction: column;
   gap: 12px;
 }
-.sort-controls[data-v-d5bb1173] {
+.sort-controls[data-v-11a74179] {
   display: flex;
   align-items: center;
   gap: 8px;
   min-width: 180px; /* Prevent select from being too narrow */
 }
-.sort-direction-button[data-v-d5bb1173] {
+.sort-direction-button[data-v-11a74179] {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -261,14 +261,37 @@
   height: 32px;
   padding: 0;
 }
-.controls-row[data-v-d5bb1173] {
+.controls-row[data-v-11a74179] {
   display: flex;
   align-items: center;
   gap: 16px;
   margin-top: 12px;
 }
+.form-hint[data-v-11a74179] {
+  font-size: 12px;
+  color: #6b7280;
+  margin-top: 8px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+.preview-label[data-v-11a74179] {
+  color: #374151;
+}
+.form-hint code[data-v-11a74179] {
+  background-color: #f3f4f6;
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-family: monospace;
+  color: #1f2937;
+}
+.auto-extension-hint[data-v-11a74179] {
+  color: #9ca3af;
+  font-style: italic;
+}
 
-.action-buttons[data-v-bc5487da] {
+.action-buttons[data-v-3359ec07] {
   padding-left: 20px;
   display: flex;
   align-items: center;
@@ -281,7 +304,7 @@
     BlinkMacSystemFont,
     sans-serif;
 }
-.action-btn[data-v-bc5487da] {
+.action-btn[data-v-3359ec07] {
   display: flex;
   align-items: center;
   gap: 6px;
@@ -298,22 +321,22 @@
   letter-spacing: 0.01em;
   box-shadow: 0 1px 2px rgba(1, 5, 13, 0.08); /* Slightly darker shadow */
 }
-.action-btn[data-v-bc5487da]:hover {
+.action-btn[data-v-3359ec07]:hover {
   background-color: rgba(16, 24, 40, 0.08); /* Darker hover background */
   border-color: rgba(16, 24, 40, 0.18); /* Darker hover border */
 }
-.action-btn[data-v-bc5487da]:active {
+.action-btn[data-v-3359ec07]:active {
   transform: translateY(1px);
   box-shadow: none;
 }
-.btn-icon[data-v-bc5487da] {
+.btn-icon[data-v-3359ec07] {
   font-size: 16px;
   color: rgb(2, 27, 45); /* Darker icon color */
 }
-.btn-text[data-v-bc5487da] {
+.btn-text[data-v-3359ec07] {
   white-space: nowrap;
 }
-.settings-modal-content[data-v-bc5487da] {
+.settings-modal-content[data-v-3359ec07] {
   padding: 16px;
   font-family:
     "Inter",
@@ -322,23 +345,55 @@
     BlinkMacSystemFont,
     sans-serif;
 }
-.form-group[data-v-bc5487da] {
+.form-group[data-v-3359ec07] {
   margin-bottom: 16px;
 }
-.form-group label[data-v-bc5487da] {
+.form-group label[data-v-3359ec07] {
+  display: block;
+  margin-bottom: 8px;
+  font-size: 14px;
+  font-weight: 500;
+  color: rgba(16, 24, 40, 0.9);
+}
+.quick-create-modal[data-v-3359ec07] {
+  padding: 16px 0;
+}
+.quick-create-modal .form-group[data-v-3359ec07] {
+  margin-bottom: 20px;
+}
+.quick-create-modal label[data-v-3359ec07] {
   display: block;
   margin-bottom: 8px;
   font-size: 14px;
   font-weight: 500;
   color: rgba(16, 24, 40, 0.9);
 }
+.preview-text[data-v-3359ec07] {
+  padding: 12px;
+  background-color: rgba(3, 11, 27, 0.03);
+  border: 1px solid rgba(16, 24, 40, 0.08);
+  border-radius: 6px;
+  font-size: 13px;
+  color: rgba(16, 24, 40, 0.7);
+}
+.preview-text code[data-v-3359ec07] {
+  background-color: rgba(16, 24, 40, 0.08);
+  padding: 2px 6px;
+  border-radius: 3px;
+  font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
+  font-size: 12px;
+}
+.dialog-footer[data-v-3359ec07] {
+  display: flex;
+  gap: 8px;
+}
 
-.status-wrapper[data-v-88e0f447] {
+.status-wrapper[data-v-4aa2388b] {
   display: flex;
   align-items: center;
   gap: 12px;
 }
-.flow-card[data-v-88e0f447] {
+.flow-card[data-v-4aa2388b] {
   position: relative;
   width: 40px;
   height: 40px;
@@ -347,22 +402,22 @@
   cursor: help;
   overflow: hidden;
 }
-.flow-card[data-v-88e0f447]:hover {
+.flow-card[data-v-4aa2388b]:hover {
   transform: translateY(-0.5px);
   box-shadow: 0 4px 16px rgba(159, 129, 228, 0.25);
 }
-.flow-animation[data-v-88e0f447] {
+.flow-animation[data-v-4aa2388b] {
   width: 100%;
   height: 100%;
 }
 
 /* Flow Container */
-.flow-container[data-v-88e0f447] {
+.flow-container[data-v-4aa2388b] {
   fill: #8c8caa;
 }
 
 /* Extra Thick Flow Lines with Gradient */
-.flow-line[data-v-88e0f447] {
+.flow-line[data-v-4aa2388b] {
   fill: none;
   stroke: url(#lineGradient);
   stroke-width: 8; /* Extra thick lines */
@@ -372,35 +427,35 @@
 }
 
 /* Animation only when flowing */
-.is-flowing .flow-line[data-v-88e0f447] {
-  animation: flowMove-88e0f447 3s infinite linear;
+.is-flowing .flow-line[data-v-4aa2388b] {
+  animation: flowMove-4aa2388b 3s infinite linear;
 }
-.is-flowing .flow-line-2[data-v-88e0f447] {
+.is-flowing .flow-line-2[data-v-4aa2388b] {
   animation-delay: -1s;
 }
-.is-flowing .flow-line-3[data-v-88e0f447] {
+.is-flowing .flow-line-3[data-v-4aa2388b] {
   animation-delay: -2s;
 }
 
 /* Flow Particles - only visible when running */
-.flow-particle[data-v-88e0f447] {
+.flow-particle[data-v-4aa2388b] {
   fill: #5256c6;
   opacity: 0;
 }
-.is-flowing .flow-particle[data-v-88e0f447] {
-  animation: particleFlow-88e0f447 3s infinite ease-in-out;
+.is-flowing .flow-particle[data-v-4aa2388b] {
+  animation: particleFlow-4aa2388b 3s infinite ease-in-out;
 }
-.particle-1[data-v-88e0f447] {
+.particle-1[data-v-4aa2388b] {
   animation-delay: 0s;
 }
-.particle-2[data-v-88e0f447] {
+.particle-2[data-v-4aa2388b] {
   animation-delay: -1s;
 }
-.particle-3[data-v-88e0f447] {
+.particle-3[data-v-4aa2388b] {
   animation-delay: -2s;
 }
 /* Control Button */
-.control-button[data-v-88e0f447] {
+.control-button[data-v-4aa2388b] {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -414,19 +469,19 @@
   transition: all 0.3s ease;
   box-shadow: 0 2px 8px rgba(76, 0, 255, 0.2);
 }
-.control-button[data-v-88e0f447]:hover {
+.control-button[data-v-4aa2388b]:hover {
   background: #4834d4;
   color: white;
   transform: translateY(-1px);
   box-shadow: 0 4px 16px rgba(76, 0, 255, 0.3);
 }
-.control-button.is-active[data-v-88e0f447] {
+.control-button.is-active[data-v-4aa2388b] {
   background: #4834d4;
   color: white;
 }
 
 /* Animations */
-@keyframes flowMove-88e0f447 {
+@keyframes flowMove-4aa2388b {
 0% {
     transform: translateX(0);
 }
@@ -434,7 +489,7 @@
     transform: translateX(-70px);
 }
 }
-@keyframes particleFlow-88e0f447 {
+@keyframes particleFlow-4aa2388b {
 0% {
     opacity: 0;
     transform: translateX(-10px) scale(0.8);
@@ -453,7 +508,144 @@
 }
 }
 
-.custom-node[data-v-74411a9e] {
+.status-indicator[data-v-8ef0b204] {
+  position: relative;
+  display: flex;
+  align-items: center;
+  margin-right: 8px;
+}
+.status-indicator[data-v-8ef0b204]::before {
+  content: "";
+  display: block;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+}
+.status-indicator.success[data-v-8ef0b204]::before {
+  background-color: #4caf50;
+}
+.status-indicator.failure[data-v-8ef0b204]::before {
+  background-color: #f44336;
+}
+.status-indicator.warning[data-v-8ef0b204]::before {
+  background-color: #f09f5dd1;
+}
+.status-indicator.unknown[data-v-8ef0b204]::before {
+  background-color: #ffffff;
+}
+.status-indicator.running[data-v-8ef0b204]::before {
+  background-color: #0909ca;
+  animation: pulse-8ef0b204 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  box-shadow: 0 0 10px #0909ca;
+}
+@keyframes pulse-8ef0b204 {
+0% {
+    transform: scale(1);
+    opacity: 1;
+    box-shadow: 0 0 5px #0909ca;
+}
+50% {
+    transform: scale(1.3);
+    opacity: 0.6;
+    box-shadow: 0 0 15px #0909ca;
+}
+100% {
+    transform: scale(1);
+    opacity: 1;
+    box-shadow: 0 0 5px #0909ca;
+}
+}
+.tooltip-text[data-v-8ef0b204] {
+  visibility: hidden;
+  width: 120px;
+  background-color: black;
+  color: #fff;
+  text-align: center;
+  border-radius: 6px;
+  padding: 5px 0;
+  position: absolute;
+  z-index: 1;
+  bottom: 100%;
+  left: 50%;
+  margin-left: -60px;
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+.status-indicator:hover .tooltip-text[data-v-8ef0b204] {
+  visibility: visible;
+  opacity: 1;
+}
+.description-input[data-v-8ef0b204]:hover,
+.description-input[data-v-8ef0b204]:focus {
+  background-color: #e7e7e7; /* Slightly darker on hover/focus */
+  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2); /* More pronounced shadow on hover/focus */
+}
+.component-wrapper[data-v-8ef0b204] {
+  position: relative; /* This makes the absolute positioning of the child relative to this container */
+  max-width: 60px;
+  overflow: visible; /* Allows children to visually overflow */
+}
+.description-display[data-v-8ef0b204] {
+  padding: 8px;
+  width: 200px !important;
+  max-height: 8px !important;
+  background-color: #ffffff; /* Light grey background */
+  border-radius: 4px; /* Rounded corners for a modern look */
+  cursor: pointer; /* Indicates the text can be clicked */
+}
+.overlay[data-v-8ef0b204] {
+  position: fixed; /* This is key for viewport-level positioning */
+  width: 200px; /* Or whatever width you prefer */
+  height: 200px; /* Or whatever height you prefer */
+  left: 50%; /* Center horizontally */
+  top: 50%; /* Center vertically */
+  transform: translate(-50%, -50%); /* Adjust based on its own dimensions */
+  z-index: 1000; /* High enough to float above everything else */
+  /* Your existing styles for background, padding, etc. */
+}
+.node-button[data-v-8ef0b204] {
+  background-color: #ffffff;
+  border-radius: 10px;
+  border-width: 0px;
+}
+.node-button[data-v-8ef0b204]:hover {
+  background-color: #f5f5f5;
+  transform: translateY(-1px);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+.overlay-content[data-v-8ef0b204] {
+  padding: 20px;
+  border-radius: 10px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}
+.overlay-prompt[data-v-8ef0b204] {
+  margin-bottom: 10px;
+  color: #333;
+  font-size: 16px;
+}
+.description-input[data-v-8ef0b204] {
+  margin-bottom: 10px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  padding: 10px;
+  font-size: 14px;
+  height: 100px; /* Adjust based on your needs */
+}
+.selected[data-v-8ef0b204] {
+  border: 2px solid #828282;
+}
+
+.error-node[data-v-00eceaf3] {
+  padding: 8px;
+  background: #ffcccc;
+  border-radius: 4px;
+  font-size: 12px;
+}
+
+.custom-node[data-v-0887a495] {
   border-radius: 4px;
   padding: 1px;
   background-color: white;
@@ -462,10 +654,10 @@
   align-items: center;
   position: relative;
 }
-.selected[data-v-74411a9e] {
+.selected[data-v-0887a495] {
   border: 2px solid #409eff;
 }
-.custom-node-header[data-v-74411a9e] {
+.custom-node-header[data-v-0887a495] {
   font-weight: 100;
   font-size: small;
   width: 20px;
@@ -474,12 +666,12 @@
   text-overflow: ellipsis;
   font-family: "Roboto", "Source Sans Pro", Avenir, Helvetica, Arial, sans-serif;
 }
-.description-display[data-v-74411a9e] {
+.description-display[data-v-0887a495] {
   position: relative;
   white-space: normal;
-  min-width: 100px; /* Default minimum width */
+  min-width: 100px;
   max-width: 300px;
-  width: auto; /* Allow dynamic width */
+  width: auto;
   padding: 2px 4px;
   cursor: pointer;
   background-color: rgba(185, 185, 185, 0.117);
@@ -489,7 +681,7 @@
   gap: 4px;
   border-radius: 4px;
 }
-.edit-icon[data-v-74411a9e] {
+.edit-icon[data-v-0887a495] {
   opacity: 0;
   transition: opacity 0.2s;
   color: #0f275f;
@@ -498,26 +690,26 @@
   align-items: center;
   padding: 2px;
 }
-.description-display:hover .edit-icon[data-v-74411a9e] {
+.description-display:hover .edit-icon[data-v-0887a495] {
   opacity: 1;
 }
-.edit-icon[data-v-74411a9e]:hover {
+.edit-icon[data-v-0887a495]:hover {
   color: #051233;
 }
-.description-text[data-v-74411a9e] {
+.description-text[data-v-0887a495] {
   margin: 0;
   white-space: pre-wrap;
   word-wrap: break-word;
   font-family: "Roboto", "Source Sans Pro", Avenir, Helvetica, Arial, sans-serif;
 }
-.edit-overlay[data-v-74411a9e] {
+.edit-overlay[data-v-0887a495] {
   position: fixed;
   z-index: 1000;
   background: white;
   border-radius: 4px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
 }
-.description-input[data-v-74411a9e] {
+.description-input[data-v-0887a495] {
   width: 200px;
   height: 75px;
   resize: both;
@@ -528,17 +720,15 @@
   font-family: "Roboto", "Source Sans Pro", Avenir, Helvetica, Arial, sans-serif;
   background-color: white;
 }
-.handle-input[data-v-74411a9e] {
+.handle-input[data-v-0887a495] {
   position: absolute;
   left: -8px;
 }
-.handle-output[data-v-74411a9e] {
+.handle-output[data-v-0887a495] {
   position: absolute;
   right: -8px;
 }
-
-/* Context Menu Styles */
-.context-menu[data-v-74411a9e] {
+.context-menu[data-v-0887a495] {
   position: fixed;
   z-index: 10000;
   background-color: white;
@@ -548,7 +738,7 @@
   min-width: 120px;
   font-family: "Roboto", "Source Sans Pro", Avenir, Helvetica, Arial, sans-serif;
 }
-.context-menu-item[data-v-74411a9e] {
+.context-menu-item[data-v-0887a495] {
   padding: 8px 12px;
   display: flex;
   align-items: center;
@@ -558,13 +748,13 @@
   transition: background-color 0.2s;
   font-family: "Roboto", "Source Sans Pro", Avenir, Helvetica, Arial, sans-serif;
 }
-.context-menu-item[data-v-74411a9e]:hover {
+.context-menu-item[data-v-0887a495]:hover {
   background-color: #f5f5f5;
 }
-.context-menu-item svg[data-v-74411a9e] {
+.context-menu-item svg[data-v-0887a495] {
   color: #555;
 }
-.context-menu-item span[data-v-74411a9e] {
+.context-menu-item span[data-v-0887a495] {
   font-family: "Roboto", "Source Sans Pro", Avenir, Helvetica, Arial, sans-serif;
 }
 
@@ -623,7 +813,7 @@ to {
 }
 }
 
-.nodes-wrapper[data-v-a8d4b46b] {
+.nodes-wrapper[data-v-63142f09] {
   display: flex;
   flex-direction: column;
   gap: 5px;
@@ -634,17 +824,17 @@ to {
 }
 
 /* Style for search input */
-.search-input[data-v-a8d4b46b] {
+.search-input[data-v-63142f09] {
   padding: 8px 16px;
   margin-bottom: 8px;
   border: 1px solid #ccc;
   border-radius: 4px;
 }
-.category-container[data-v-a8d4b46b] {
+.category-container[data-v-63142f09] {
   overflow: hidden;
   border-radius: 4px;
 }
-.category-header[data-v-a8d4b46b] {
+.category-header[data-v-63142f09] {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -656,25 +846,25 @@ to {
   transition: background-color 0.2s ease;
   height: 32px;
 }
-.category-header[data-v-a8d4b46b]:hover {
+.category-header[data-v-63142f09]:hover {
   background-color: #f5f5f5;
 }
-.category-title[data-v-a8d4b46b] {
+.category-title[data-v-63142f09] {
   font-size: small;
   font-weight: 200;
   color: #333;
   text-align: left;
 }
-.category-icon[data-v-a8d4b46b] {
+.category-icon[data-v-63142f09] {
   font-size: 12px;
   color: #666;
 }
-.category-content[data-v-a8d4b46b] {
+.category-content[data-v-63142f09] {
   display: flex;
   flex-direction: column;
   background-color: #fff;
 }
-.node-item[data-v-a8d4b46b] {
+.node-item[data-v-63142f09] {
   display: flex;
   align-items: center;
   padding: 8px 16px;
@@ -684,38 +874,43 @@ to {
   border-bottom: 1px solid #eee;
   height: 32px;
 }
-.node-item[data-v-a8d4b46b]:last-child {
+.node-item[data-v-63142f09]:last-child {
   border-bottom: none;
 }
-.node-item[data-v-a8d4b46b]:hover {
+.node-item[data-v-63142f09]:hover {
   background-color: #f5f5f5;
 }
-.node-image[data-v-a8d4b46b] {
+.node-image[data-v-63142f09] {
   width: 24px;
   height: 24px;
   margin-right: 10px;
 }
-.node-name[data-v-a8d4b46b] {
+.node-name[data-v-63142f09] {
   font-size: 12px;
   color: #333;
 }
 
 /* Custom scrollbar */
-.nodes-wrapper[data-v-a8d4b46b]::-webkit-scrollbar {
+.nodes-wrapper[data-v-63142f09]::-webkit-scrollbar {
   width: 8px;
 }
-.nodes-wrapper[data-v-a8d4b46b]::-webkit-scrollbar-track {
+.nodes-wrapper[data-v-63142f09]::-webkit-scrollbar-track {
   background: transparent;
 }
-.nodes-wrapper[data-v-a8d4b46b]::-webkit-scrollbar-thumb {
+.nodes-wrapper[data-v-63142f09]::-webkit-scrollbar-thumb {
   background-color: rgba(0, 0, 0, 0.1);
   border-radius: 4px;
 }
-.nodes-wrapper[data-v-a8d4b46b]::-webkit-scrollbar-thumb:hover {
+.nodes-wrapper[data-v-63142f09]::-webkit-scrollbar-thumb:hover {
   background-color: rgba(0, 0, 0, 0.2);
 }
 
-.minimal-button[data-v-e3b23979] {
+.intro-content[data-v-0db5c358] {
+  white-space: pre-wrap; /* Preserves whitespace and line breaks */
+}
+
+/* (Styles are unchanged) */
+.minimal-button[data-v-47a34251] {
   background: none;
   border: none;
   padding: 4px;
@@ -729,16 +924,10 @@ to {
   width: 25px;
   height: 25px;
 }
-.minimal-button .icon[data-v-e3b23979] {
-  font-size: 16px;
-}
-.minimal-button[data-v-e3b23979]:hover {
-  color: #000;
-}
-.minimal-button[data-v-e3b23979]::after {
-  content: attr(title);
+.minimal-button[data-tooltip="true"][data-v-47a34251]::after {
+  content: attr(data-tooltip-text);
   position: absolute;
-  bottom: 100%;
+  top: calc(100% + 5px);
   left: 50%;
   transform: translateX(-50%);
   background-color: #333;
@@ -753,11 +942,12 @@ to {
     opacity 0.2s,
     visibility 0.2s;
   pointer-events: none;
+  z-index: 100000;
 }
-.minimal-button[data-v-e3b23979]::before {
+.minimal-button[data-tooltip="true"][data-v-47a34251]::before {
   content: "";
   position: absolute;
-  bottom: calc(100% - 4px);
+  top: 100%;
   left: 50%;
   transform: translateX(-50%);
   border-width: 4px;
@@ -769,32 +959,43 @@ to {
     opacity 0.2s,
     visibility 0.2s;
   pointer-events: none;
+  z-index: 100000;
 }
-.minimal-button[data-v-e3b23979]:hover::after,
-.minimal-button[data-v-e3b23979]:hover::before {
+.minimal-button[data-tooltip="true"][data-v-47a34251]:hover::after,
+.minimal-button[data-tooltip="true"][data-v-47a34251]:hover::before {
   opacity: 1;
   visibility: visible;
 }
-.move-handle[data-v-e3b23979] {
-  cursor: grab;
+.minimal-button .icon[data-v-47a34251] {
+  font-size: 16px;
 }
-.minimized-title[data-v-e3b23979] {
+.minimal-button[data-v-47a34251]:hover {
+  color: #000;
+  background-color: #9facff;
+}
+.group-badge[data-v-47a34251] {
+  background-color: #074273;
+  color: white;
+  padding: 2px 6px;
+  border-radius: 3px;
+  font-size: 11px;
+  margin-right: 4px;
   cursor: pointer;
-  background-color: #f0f0f0;
-  color: #333;
-  padding: 4px 10px;
-  border-radius: 4px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
+  transition: background-color 0.2s;
+  user-select: none;
+}
+.title-text[data-v-47a34251] {
+  flex-grow: 1;
+  padding: 0 8px;
   font-size: 14px;
+  color: #333;
 }
-.overlay.minimized[data-v-e3b23979] {
-  width: 150px;
-  height: 30px;
+.overlay.minimized[data-v-47a34251] {
+  width: auto !important;
+  height: 35px !important;
   cursor: default;
 }
-.overlay[data-v-e3b23979] {
+.overlay[data-v-47a34251] {
   position: absolute;
   width: auto;
   max-width: 100%;
@@ -807,62 +1008,244 @@ to {
   display: flex;
   flex-direction: column;
   cursor: move;
+  transition: border-color 0.2s;
+  overflow: hidden;
 }
-.no-transition[data-v-e3b23979] {
+.no-transition[data-v-47a34251] {
   transition: none !important;
 }
-.header[data-v-e3b23979] {
+.header[data-v-47a34251] {
   display: flex;
   justify-content: flex-start;
   align-items: center;
   width: 100%;
   padding: 4px;
-  border-top-left-radius: 4px;
-  border-top-right-radius: 4px;
-  background-color: #fff;
+  border-top-left-radius: 6px;
+  border-top-right-radius: 6px;
+  background: linear-gradient(135deg, #2189791d 0%, #15a2da25 100%);
+  min-height: 35px;
+  box-sizing: border-box;
+  overflow: hidden;
 }
-.content[data-v-e3b23979] {
+.content[data-v-47a34251] {
   flex-grow: 1;
   overflow: auto;
   padding: 10px;
   max-height: calc(100% - 50px);
   box-sizing: border-box;
 }
-.draggable-line[data-v-e3b23979] {
+.draggable-line[data-v-47a34251] {
   position: absolute;
   opacity: 1;
 }
-.draggable-line.right-vertical[data-v-e3b23979] {
+.draggable-line.right-vertical[data-v-47a34251] {
   top: 0;
   right: 0;
   width: 5px;
   height: 100%;
   cursor: ew-resize;
 }
-.draggable-line.left-vertical[data-v-e3b23979] {
+.draggable-line.left-vertical[data-v-47a34251] {
   top: 0;
   left: 0;
   width: 5px;
   height: 100%;
   cursor: ew-resize;
 }
-.draggable-line.bottom-horizontal[data-v-e3b23979] {
+.draggable-line.bottom-horizontal[data-v-47a34251] {
   bottom: 0;
   left: 0;
   width: 100%;
   height: 5px;
   cursor: ns-resize;
 }
-.draggable-line.top-horizontal[data-v-e3b23979] {
+.draggable-line.top-horizontal[data-v-47a34251] {
   top: 0;
   left: 0;
   width: 100%;
   height: 5px;
   cursor: ns-resize;
 }
-.resizing-highlight-line[data-v-e3b23979] {
+.resizing-highlight-line[data-v-47a34251] {
   background-color: #080b0e43;
 }
+.draggable-line[data-v-47a34251]:hover {
+  background-color: #2196f330;
+}
+
+.layout-widget-wrapper[data-v-0bdaa52f] {
+  position: fixed;
+  z-index: 20000;
+}
+.trigger-btn[data-v-0bdaa52f] {
+  width: 45px;
+  height: 45px;
+  border-radius: 50%;
+  border: none;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
+  cursor: move;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  overflow: hidden;
+}
+.trigger-btn[data-v-0bdaa52f]:hover {
+  width: 55px;
+  height: 55px;
+  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
+}
+.trigger-btn.is-open[data-v-0bdaa52f] {
+  cursor: pointer;
+}
+.trigger-btn[data-v-0bdaa52f]::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 0;
+  height: 0;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.2);
+  transform: translate(-50%, -50%);
+  transition:
+    width 0.6s,
+    height 0.6s;
+}
+.trigger-btn[data-v-0bdaa52f]:hover::before {
+  width: 100px;
+  height: 100px;
+}
+.layout-icon[data-v-0bdaa52f] {
+  color: white;
+  transition: transform 0.3s ease;
+  pointer-events: none;
+}
+.trigger-btn:hover .layout-icon[data-v-0bdaa52f] {
+  transform: scale(1.1);
+}
+.trigger-btn.is-open .layout-icon[data-v-0bdaa52f] {
+  transform: rotate(90deg);
+}
+.panel[data-v-0bdaa52f] {
+  position: absolute;
+  /* REMOVED: right: 60px; */
+  /* REMOVED: bottom: 0; */
+  width: 250px;
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.15);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  backdrop-filter: blur(10px);
+  background: rgba(255, 255, 255, 0.98);
+}
+.panel-header[data-v-0bdaa52f] {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 16px;
+  border-bottom: 1px solid #f0f0f0;
+  background: linear-gradient(135deg, #667eea10 0%, #764ba210 100%);
+}
+.panel-title[data-v-0bdaa52f] {
+  font-weight: 600;
+  font-size: 16px;
+  color: #333;
+  user-select: none;
+}
+.close-btn[data-v-0bdaa52f] {
+  background: none;
+  border: none;
+  font-size: 20px;
+  color: #888;
+  cursor: pointer;
+  padding: 0;
+  line-height: 1;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  transition: all 0.2s;
+}
+.close-btn[data-v-0bdaa52f]:hover {
+  color: #333;
+  background: rgba(0, 0, 0, 0.05);
+}
+.panel-body[data-v-0bdaa52f] {
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.control-btn[data-v-0bdaa52f] {
+  background-color: #f8f9fa;
+  color: #333;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  padding: 10px 16px;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 500;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  text-align: left;
+  position: relative;
+  overflow: hidden;
+}
+.control-btn[data-v-0bdaa52f]::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.1), transparent);
+  transition: left 0.5s;
+}
+.control-btn[data-v-0bdaa52f]:hover::before {
+  left: 100%;
+}
+.control-btn[data-v-0bdaa52f]:hover {
+  background-color: #f0f2ff;
+  border-color: #667eea;
+  transform: translateX(2px);
+}
+
+/* Accent button style for Reset Layout Graph */
+.control-btn.accent[data-v-0bdaa52f] {
+  background: linear-gradient(135deg, #667eea15 0%, #764ba215 100%);
+  border-color: #764ba2;
+}
+.control-btn.accent[data-v-0bdaa52f]:hover {
+  background: linear-gradient(135deg, #667eea25 0%, #764ba225 100%);
+  border-color: #667eea;
+}
+.control-btn .icon[data-v-0bdaa52f] {
+  font-size: 16px;
+  min-width: 20px;
+}
+
+/* Vue Transition Styles */
+.panel-fade-enter-active[data-v-0bdaa52f],
+.panel-fade-leave-active[data-v-0bdaa52f] {
+  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.panel-fade-enter-from[data-v-0bdaa52f] {
+  opacity: 0;
+  transform: translateY(10px) scale(0.95);
+}
+.panel-fade-leave-to[data-v-0bdaa52f] {
+  opacity: 0;
+  transform: translateY(-10px) scale(0.95);
+}
 .ag-icon {
   font-family: var(--ag-icon-font-family);
   font-weight: var(--ag-icon-font-weight);
@@ -9823,9 +10206,213 @@ input[class^=ag-][type=range]:disabled {
     transform: rotate(360deg);
 }
 }
+.table-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  position: relative;
+}
+
+/* Modern Outdated Data Banner Styles */
+.outdated-data-banner {
+  position: absolute;
+  top: 10px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-width: 380px;
+  max-width: 90%;
+  padding: 12px 16px;
+  background: linear-gradient(135deg, rgba(254, 243, 199, 0.98) 0%, rgba(253, 230, 138, 0.98) 100%);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(251, 191, 36, 0.3);
+  border-radius: 12px;
+  box-shadow:
+    0 4px 20px rgba(251, 191, 36, 0.15),
+    0 2px 8px rgba(0, 0, 0, 0.05);
+  font-size: 14px;
+  animation: slideDown 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  overflow: hidden;
+}
+
+/* Shimmer effect */
+.outdated-data-banner::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
+  animation: shimmer 3s infinite;
+}
+
+/* Warning icon animation */
+@keyframes pulse {
+0%,
+  100% {
+    transform: scale(1);
+}
+50% {
+    transform: scale(1.1);
+}
+}
+@keyframes shimmer {
+0% {
+    left: -100%;
+}
+100% {
+    left: 100%;
+}
+}
+@keyframes slideDown {
+from {
+    opacity: 0;
+    transform: translate(-50%, -20px);
+}
+to {
+    opacity: 1;
+    transform: translate(-50%, 0);
+}
+}
+.outdated-data-banner p {
+  margin: 0;
+  color: #78350f;
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  position: relative;
+  z-index: 1;
+}
+
+/* Add warning icon */
+.outdated-data-banner p::before {
+  content: "⚠️";
+  font-size: 16px;
+  animation: pulse 2s ease-in-out infinite;
+}
+.refresh-link-button {
+  background: linear-gradient(135deg, #ffffff 0%, #fef3c7 100%);
+  border: 1px solid #f59e0b;
+  color: #92400e;
+  border-radius: 6px;
+  padding: 5px 14px;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  position: relative;
+  overflow: hidden;
+  white-space: nowrap;
+  margin-left: 4px;
+}
+
+/* Refresh icon */
+.refresh-link-button::before {
+  content: "↻";
+  font-size: 14px;
+  transition: transform 0.3s ease;
+}
+.refresh-link-button:hover {
+  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
+  color: white;
+  border-color: #d97706;
+  transform: translateY(-1px);
+  box-shadow:
+    0 4px 12px rgba(245, 158, 11, 0.3),
+    inset 0 1px 0 rgba(255, 255, 255, 0.2);
+}
+.refresh-link-button:hover::before {
+  transform: rotate(180deg);
+}
+.refresh-link-button:active {
+  transform: translateY(0);
+  box-shadow:
+    0 2px 6px rgba(245, 158, 11, 0.2),
+    inset 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+.dismiss-button {
+  background: rgba(255, 255, 255, 0.9);
+  border: 1px solid rgba(251, 191, 36, 0.3);
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  font-size: 16px;
+  line-height: 1;
+  cursor: pointer;
+  color: #92400e;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  flex-shrink: 0;
+  margin-left: 12px;
+  position: relative;
+  z-index: 1;
+}
+.dismiss-button:hover {
+  background: white;
+  border-color: #f59e0b;
+  color: #78350f;
+  transform: rotate(90deg) scale(1.1);
+  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
+}
+.dismiss-button:active {
+  transform: rotate(90deg) scale(0.95);
+}
+
+/* Fetch Data Section Styles */
+.fetch-data-section {
+  padding: 20px;
+  text-align: center;
+  background-color: #f9fafb;
+  border: 1px solid #e5e7eb;
+  border-top: none;
+  border-radius: 0 0 8px 8px;
+}
+.fetch-data-section p {
+  color: #6b7280;
+  font-size: 14px;
+  margin-bottom: 12px;
+}
+.fetch-data-button {
+  background-color: #3498db;
+  color: white;
+  border: none;
+  padding: 8px 20px;
+  font-size: 14px;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  position: relative;
+}
+.fetch-data-button:hover:not(:disabled) {
+  background-color: #2980b9;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
+}
+.fetch-data-button:active:not(:disabled) {
+  transform: translateY(0);
+}
+.fetch-data-button:disabled {
+  background-color: #93c5fd;
+  cursor: not-allowed;
+  opacity: 0.7;
+}
+
+/* AG Grid Theme Customization */
 .ag-theme-balham {
   max-width: 100%;
-  height: 100%;
+  position: relative;
   --ag-odd-row-background-color: rgb(255, 255, 255);
   --ag-row-background-color: rgb(255, 255, 255);
   --ag-header-background-color: rgb(246, 247, 251);
@@ -9887,7 +10474,7 @@ input[class^=ag-][type=range]:disabled {
   -webkit-box-orient: vertical;
 }
 
-.log-container[data-v-51d5bb55] {
+.log-container[data-v-9b3bdb24] {
   height: 100%;
   display: flex;
   flex-direction: column;
@@ -9896,7 +10483,7 @@ input[class^=ag-][type=range]:disabled {
   font-family: "Consolas", "Monaco", "Courier New", monospace;
   overflow-y: auto;
 }
-.log-header[data-v-51d5bb55] {
+.log-header[data-v-9b3bdb24] {
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -9907,42 +10494,42 @@ input[class^=ag-][type=range]:disabled {
   top: 0;
   z-index: 10; /* Ensures it stays above the logs */
 }
-.log-status[data-v-51d5bb55] {
+.log-status[data-v-9b3bdb24] {
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 0.9em;
 }
-.status-indicator[data-v-51d5bb55] {
+.status-indicator[data-v-9b3bdb24] {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background-color: #666;
 }
-.status-indicator.active[data-v-51d5bb55] {
+.status-indicator.active[data-v-9b3bdb24] {
   background-color: #4caf50;
 }
-.status-indicator.error[data-v-51d5bb55] {
+.status-indicator.error[data-v-9b3bdb24] {
   background-color: #f44336;
 }
-.log-controls[data-v-51d5bb55] {
+.log-controls[data-v-9b3bdb24] {
   display: flex;
   gap: 8px;
 }
-.error-banner[data-v-51d5bb55] {
+.error-banner[data-v-9b3bdb24] {
   padding: 8px 12px;
   background-color: rgba(244, 67, 54, 0.2);
   color: #f44336;
   font-size: 0.9em;
   border-bottom: 1px solid #f44336;
 }
-.empty-state[data-v-51d5bb55] {
+.empty-state[data-v-9b3bdb24] {
   padding: 16px;
   text-align: center;
   color: #777;
   font-style: italic;
 }
-.logs[data-v-51d5bb55] {
+.logs[data-v-9b3bdb24] {
   flex-grow: 1;
   margin: 0;
   padding: 8px;
@@ -9952,24 +10539,24 @@ input[class^=ag-][type=range]:disabled {
   line-height: 1.8; /* Reduced line height */
   font-size: small;
 }
-.logs.auto-scroll[data-v-51d5bb55] {
+.logs.auto-scroll[data-v-9b3bdb24] {
   scroll-behavior: smooth;
 }
-[data-v-51d5bb55]::-webkit-scrollbar {
+[data-v-9b3bdb24]::-webkit-scrollbar {
   width: 12px;
 }
-[data-v-51d5bb55]::-webkit-scrollbar-track {
+[data-v-9b3bdb24]::-webkit-scrollbar-track {
   background: #1e1e1e;
 }
-[data-v-51d5bb55]::-webkit-scrollbar-thumb {
+[data-v-9b3bdb24]::-webkit-scrollbar-thumb {
   background: #424242;
   border-radius: 6px;
   border: 3px solid #1e1e1e;
 }
-[data-v-51d5bb55]::-webkit-scrollbar-thumb:hover {
+[data-v-9b3bdb24]::-webkit-scrollbar-thumb:hover {
   background: #4f4f4f;
 }
-.error-line[data-v-51d5bb55] {
+.error-line[data-v-9b3bdb24] {
   background-color: rgba(255, 0, 0, 0.2); /* Light red background */
   color: #ffcdd2; /* Light red text for better readability */
 }
@@ -10668,85 +11255,156 @@ main {
   background-color: rgba(80, 70, 230, 0.1);
 }
 
-.canvas[data-v-cc07b037] {
-  height: calc(100vh - 50px);
+.canvas[data-v-24dbaac4] {
+  height: calc(100vh - 100px); /* Adjusted for potentially taller header */
 }
-.header[data-v-cc07b037] {
-  display: flex;
-  justify-content: space-between;
-  align-items: stretch;
-  height: 50px;
+.header[data-v-24dbaac4] {
   background-color: #f5f5f5;
   border-bottom: 1px solid #ececec;
 }
-.left-section[data-v-cc07b037] {
-  min-width: 250px;
-  padding: 0 16px;
-  display: flex;
-  align-items: center;
+
+/* Desktop layout - single row */
+@media (min-width: 1025px) {
+.header[data-v-24dbaac4] {
+    display: flex;
+    justify-content: space-between;
+    align-items: stretch;
+    height: 50px;
 }
-.middle-section[data-v-cc07b037] {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  overflow: hidden;
+.header-top[data-v-24dbaac4] {
+    display: contents; /* Makes children behave as direct children of .header */
+}
+.header-bottom[data-v-24dbaac4] {
+    display: contents;
+}
+.left-section[data-v-24dbaac4] {
+    min-width: 250px;
+    padding: 0 16px;
+    display: flex;
+    align-items: center;
+}
+.middle-section[data-v-24dbaac4] {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+}
+.right-section[data-v-24dbaac4] {
+    min-width: 150px;
+    padding: 0 16px;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+}
+.canvas[data-v-24dbaac4] {
+    height: calc(100vh - 50px);
+}
+}
+
+/* Mobile/tablet layout - stacked */
+@media (max-width: 1024px) {
+.header[data-v-24dbaac4] {
+    height: auto;
+    min-height: 80px;
+}
+.header-top[data-v-24dbaac4] {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 50px;
+    border-bottom: 1px solid #e5e7eb;
+}
+.header-bottom[data-v-24dbaac4] {
+    display: flex;
+    height: 40px;
+    padding: 0 8px;
+}
+.left-section[data-v-24dbaac4] {
+    padding: 0 12px;
+    display: flex;
+    align-items: center;
+}
+.middle-section[data-v-24dbaac4] {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+    padding: 0 8px;
+}
+.right-section[data-v-24dbaac4] {
+    padding: 0 12px;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+}
+.canvas[data-v-24dbaac4] {
+    height: calc(100vh - 90px);
+}
+}
+
+/* Very narrow screens */
+@media (max-width: 480px) {
+.left-section[data-v-24dbaac4] {
+    padding: 0 8px;
+    min-width: auto;
+}
+.right-section[data-v-24dbaac4] {
+    padding: 0 8px;
+    min-width: auto;
+}
+.middle-section[data-v-24dbaac4] {
+    padding: 0 4px;
 }
-.right-section[data-v-cc07b037] {
-  min-width: 150px;
-  padding: 0 16px;
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
 }
 
 /* Loading state styles */
-.loading-state[data-v-cc07b037] {
+.loading-state[data-v-24dbaac4] {
   height: calc(100vh - 50px);
   display: flex;
   justify-content: center;
   align-items: center;
   background-color: #f9fafb;
 }
-.loading-state-content[data-v-cc07b037] {
+.loading-state-content[data-v-24dbaac4] {
   text-align: center;
   padding: 2rem;
 }
-.loading-state-content p[data-v-cc07b037] {
+.loading-state-content p[data-v-24dbaac4] {
   color: #6b7280;
   margin-top: 1rem;
 }
 
 /* Empty state styles */
-.empty-state[data-v-cc07b037] {
+.empty-state[data-v-24dbaac4] {
   height: calc(100vh - 50px);
   display: flex;
   justify-content: center;
   align-items: center;
   background-color: #f9fafb;
 }
-.empty-state-content[data-v-cc07b037] {
+.empty-state-content[data-v-24dbaac4] {
   text-align: center;
   padding: 2rem;
 }
-.empty-icon[data-v-cc07b037] {
+.empty-icon[data-v-24dbaac4] {
   font-size: 64px;
   color: #9ca3af;
   margin-bottom: 1rem;
 }
-.empty-state h2[data-v-cc07b037] {
+.empty-state h2[data-v-24dbaac4] {
   color: #374151;
   margin-bottom: 0.5rem;
 }
-.empty-state p[data-v-cc07b037] {
+.empty-state p[data-v-24dbaac4] {
   color: #6b7280;
   margin-bottom: 1.5rem;
 }
-.action-button[data-v-cc07b037] {
+.action-button[data-v-24dbaac4] {
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
   margin: 0 0.5rem;
 }
-.action-button .material-icons[data-v-cc07b037] {
+.action-button .material-icons[data-v-24dbaac4] {
   font-size: 18px;
 }