Flowfile 0.5.4__py3-none-any.whl → 0.6.1__py3-none-any.whl

flowfile/web/static/assets/{DesignerView-49abb835.css → DesignerView-Dm6OzlIc.css}

@@ -1,9 +1,9 @@
 
-.button-group[data-v-182a7a87] {
+.button-group[data-v-3d73f4dc] {
   display: flex;
   gap: 10px;
 }
-.button-group .el-button[data-v-182a7a87] {
+.button-group .el-button[data-v-3d73f4dc] {
   display: flex;
   align-items: center;
   gap: 6px;
@@ -20,47 +20,47 @@
 }
 
 /* Run button - normal state */
-.button-group .el-button[data-v-182a7a87]:first-child:not([disabled]) {
+.button-group .el-button[data-v-3d73f4dc]:first-child:not([disabled]) {
   background-color: var(--primary-blue) !important;
   border: 1px solid var(--primary-blue-light) !important;
-  color: var(--color-text-inverse) !important;
+  color: #ffffff !important;
 }
 
 /* Run button - hover state */
-.button-group .el-button[data-v-182a7a87]:first-child:not([disabled]):hover {
+.button-group .el-button[data-v-3d73f4dc]:first-child:not([disabled]):hover {
   background-color: var(--color-button-primary) !important;
   border-color: var(--color-button-primary) !important;
 }
 
 /* Run button - disabled state */
-.button-group .el-button:first-child[disabled][data-v-182a7a87] {
+.button-group .el-button:first-child[disabled][data-v-3d73f4dc] {
   background-color: var(--color-gray-400) !important;
   border: 1px solid var(--color-gray-400) !important;
-  color: var(--color-text-inverse) !important;
+  color: #ffffff !important;
   cursor: not-allowed;
   opacity: 0.7;
 }
 
 /* Cancel button */
-.button-group .el-button[data-v-182a7a87]:nth-child(2) {
+.button-group .el-button[data-v-3d73f4dc]:nth-child(2) {
   background-color: var(--color-danger) !important;
   border: 1px solid var(--color-danger) !important;
-  color: var(--color-text-inverse) !important;
+  color: #ffffff !important;
 }
 
 /* Cancel button - hover state */
-.button-group .el-button[data-v-182a7a87]:nth-child(2):hover {
+.button-group .el-button[data-v-3d73f4dc]:nth-child(2):hover {
   background-color: var(--color-danger-hover) !important;
   border-color: var(--color-danger-hover) !important;
 }
 
 /* Active state for both buttons */
-.button-group .el-button[data-v-182a7a87]:active {
+.button-group .el-button[data-v-3d73f4dc]:active {
   transform: translateY(1px);
   box-shadow: none;
 }
 
-.browser-title[data-v-bcb824aa] {
+.browser-title[data-v-42889233] {
   display: flex;
   align-items: center;
   gap: 8px;
@@ -69,32 +69,32 @@
   font-weight: 600;
   color: var(--color-text-primary);
 }
-.mode-selector[data-v-bcb824aa] {
+.mode-selector[data-v-42889233] {
   display: flex;
   justify-content: center;
 }
-.browser-content[data-v-bcb824aa] {
+.browser-content[data-v-42889233] {
   display: flex;
   flex-direction: column;
   height: calc(100% - 116px); /* Adjust based on header height */
   overflow: hidden;
 }
-.browser-toolbar[data-v-bcb824aa] {
+.browser-toolbar[data-v-42889233] {
   padding: 16px;
   background-color: var(--color-background-primary);
   border-bottom: 1px solid var(--color-border-primary);
 }
-.browser-action-btn[data-v-bcb824aa] {
+.browser-action-btn[data-v-42889233] {
   background-color: var(--color-file-browser-bg);
   color: var(--color-text-inverse);
 }
-.path-navigation[data-v-bcb824aa] {
+.path-navigation[data-v-42889233] {
   display: flex;
   align-items: center;
   gap: 12px;
   margin-bottom: 12px;
 }
-.nav-button[data-v-bcb824aa] {
+.nav-button[data-v-42889233] {
   display: inline-flex;
   align-items: center;
   gap: 4px;
@@ -107,11 +107,11 @@
   cursor: pointer;
   transition: all 0.2s ease;
 }
-.nav-button[data-v-bcb824aa]:hover:not(:disabled) {
+.nav-button[data-v-42889233]:hover:not(:disabled) {
   background-color: var(--color-background-secondary);
   border-color: var(--color-border-secondary);
 }
-.current-path[data-v-bcb824aa] {
+.current-path[data-v-42889233] {
   flex: 1;
   padding: 8px 12px;
   background-color: var(--color-background-secondary);
@@ -120,38 +120,38 @@
   font-family: var(--font-family-mono);
   color: var(--color-text-secondary);
 }
-.search-container[data-v-bcb824aa] {
+.search-container[data-v-42889233] {
   display: flex;
   align-items: center;
   gap: 16px;
   flex: 1;
 }
-.search-input[data-v-bcb824aa] {
+.search-input[data-v-42889233] {
   flex: 1;
 }
-.browser-main[data-v-bcb824aa] {
+.browser-main[data-v-42889233] {
   flex: 1;
   overflow-y: auto;
   padding: 16px;
 }
-.file-item[data-v-bcb824aa] {
+.file-item[data-v-42889233] {
   border: 1px solid var(--color-border-primary);
   border-radius: 8px;
   overflow: hidden;
   transition: all 0.2s ease;
 }
-.file-item[data-v-bcb824aa]:hover {
+.file-item[data-v-42889233]:hover {
   transform: translateY(-2px);
   box-shadow: var(--shadow-sm);
 }
-.file-item.selected[data-v-bcb824aa] {
+.file-item.selected[data-v-42889233] {
   border-color: var(--color-info);
   border-width: 2px;
   background-color: var(--color-background-selected);
   box-shadow: var(--shadow-md);
   position: relative;
 }
-.file-item.selected[data-v-bcb824aa]::after {
+.file-item.selected[data-v-42889233]::after {
   content: "check_circle";
   font-family: "Material Icons";
   position: absolute;
@@ -162,29 +162,29 @@
   background: var(--color-background-primary);
   border-radius: 50%;
 }
-.file-item-content[data-v-bcb824aa] {
+.file-item-content[data-v-42889233] {
   padding: 12px;
   display: flex;
   align-items: center;
   gap: 12px;
 }
-.file-icon-wrapper[data-v-bcb824aa] {
+.file-icon-wrapper[data-v-42889233] {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 30px;
   height: 30px;
 }
-.file-icon[data-v-bcb824aa] {
+.file-icon[data-v-42889233] {
   width: 24px;
   height: 24px;
   color: var(--color-text-tertiary);
 }
-.file-details[data-v-bcb824aa] {
+.file-details[data-v-42889233] {
   flex: 1;
   min-width: 0;
 }
-.file-name[data-v-bcb824aa] {
+.file-name[data-v-42889233] {
   font-weight: 500;
   color: var(--color-text-primary);
   margin-bottom: 4px;
@@ -192,11 +192,11 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.file-info[data-v-bcb824aa] {
+.file-info[data-v-42889233] {
   font-size: 12px;
   color: var(--color-text-secondary);
 }
-.browser-actions[data-v-bcb824aa] {
+.browser-actions[data-v-42889233] {
   padding: 16px;
   background-color: var(--color-background-secondary);
   border-top: 1px solid var(--color-border-primary);
@@ -207,58 +207,58 @@
   box-sizing: border-box;
   gap: 12px;
 }
-.selected-file[data-v-bcb824aa] {
+.selected-file[data-v-42889233] {
   color: var(--color-text-secondary);
   font-size: 14px;
 }
-.loading-state[data-v-bcb824aa],
-.error-state[data-v-bcb824aa],
-.empty-state[data-v-bcb824aa] {
+.loading-state[data-v-42889233],
+.error-state[data-v-42889233],
+.empty-state[data-v-42889233] {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 200px;
   color: var(--color-text-secondary);
 }
-.error-state[data-v-bcb824aa] {
+.error-state[data-v-42889233] {
   color: var(--color-danger);
 }
-.error-content[data-v-bcb824aa] {
+.error-content[data-v-42889233] {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 12px;
   text-align: center;
 }
-.error-icon[data-v-bcb824aa] {
+.error-icon[data-v-42889233] {
   font-size: 48px;
   color: var(--color-danger, #ef4444);
 }
-.error-message[data-v-bcb824aa] {
+.error-message[data-v-42889233] {
   max-width: 300px;
 }
-.empty-state[data-v-bcb824aa] {
+.empty-state[data-v-42889233] {
   flex-direction: column;
   gap: 8px;
   color: var(--color-text-secondary);
 }
-.empty-state .material-icons[data-v-bcb824aa] {
+.empty-state .material-icons[data-v-42889233] {
   font-size: 48px;
   opacity: 0.5;
 }
 
 /* Refresh button styling */
-.refresh-button[data-v-bcb824aa] {
+.refresh-button[data-v-42889233] {
   padding: 8px;
   min-width: auto;
 }
-.refresh-button .material-icons[data-v-bcb824aa] {
+.refresh-button .material-icons[data-v-42889233] {
   transition: transform 0.3s ease;
 }
-.refresh-button .material-icons.spin[data-v-bcb824aa] {
-  animation: spin-bcb824aa 1s linear infinite;
+.refresh-button .material-icons.spin[data-v-42889233] {
+  animation: spin-42889233 1s linear infinite;
 }
-@keyframes spin-bcb824aa {
+@keyframes spin-42889233 {
 from {
     transform: rotate(0deg);
 }
@@ -266,10 +266,10 @@ to {
     transform: rotate(360deg);
 }
 }
-.hidden-file[data-v-bcb824aa] {
+.hidden-file[data-v-42889233] {
   opacity: 0.5;
 }
-.file-browser[data-v-bcb824aa] {
+.file-browser[data-v-42889233] {
   display: flex;
   flex-direction: column;
   height: 70vh; /* Set to 70% of viewport height */
@@ -277,20 +277,20 @@ to {
   border-radius: 8px;
   box-shadow: var(--shadow-md);
 }
-.browser-content[data-v-bcb824aa] {
+.browser-content[data-v-42889233] {
   display: flex;
   flex-direction: column;
   flex: 1;
   min-height: 0; /* Enable proper flex child scrolling */
   overflow: hidden;
 }
-.browser-main[data-v-bcb824aa] {
+.browser-main[data-v-42889233] {
   flex: 1;
   overflow-y: auto; /* Make this section scrollable */
   padding: 16px;
   min-height: 0; /* Enable proper flex child scrolling */
 }
-.grid-container[data-v-bcb824aa] {
+.grid-container[data-v-42889233] {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(205px, 1fr));
   gap: 16px;
@@ -298,25 +298,25 @@ to {
 }
 
 /* Optional: if you want to maintain icon size consistency */
-.file-icon[data-v-bcb824aa] {
+.file-icon[data-v-42889233] {
   width: 24px;
   height: 24px;
   object-fit: contain;
 }
 
 /* Add new styles for sort controls */
-.search-and-sort-container[data-v-bcb824aa] {
+.search-and-sort-container[data-v-42889233] {
   display: flex;
   flex-direction: column;
   gap: 12px;
 }
-.sort-controls[data-v-bcb824aa] {
+.sort-controls[data-v-42889233] {
   display: flex;
   align-items: center;
   gap: 8px;
   min-width: 180px; /* Prevent select from being too narrow */
 }
-.sort-direction-button[data-v-bcb824aa] {
+.sort-direction-button[data-v-42889233] {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -324,13 +324,13 @@ to {
   height: 32px;
   padding: 0;
 }
-.controls-row[data-v-bcb824aa] {
+.controls-row[data-v-42889233] {
   display: flex;
   align-items: center;
   gap: 16px;
   margin-top: 12px;
 }
-.form-hint[data-v-bcb824aa] {
+.form-hint[data-v-42889233] {
   font-size: 12px;
   color: var(--color-text-tertiary);
   margin-top: 8px;
@@ -339,22 +339,22 @@ to {
   gap: 6px;
   flex-wrap: wrap;
 }
-.preview-label[data-v-bcb824aa] {
+.preview-label[data-v-42889233] {
   color: var(--color-text-secondary);
 }
-.form-hint code[data-v-bcb824aa] {
+.form-hint code[data-v-42889233] {
   background-color: var(--color-background-secondary);
   padding: 2px 6px;
   border-radius: 4px;
   font-family: monospace;
   color: var(--color-text-primary);
 }
-.auto-extension-hint[data-v-bcb824aa] {
+.auto-extension-hint[data-v-42889233] {
   color: var(--color-text-muted);
   font-style: italic;
 }
 
-.action-buttons[data-v-92d73926] {
+.action-buttons[data-v-0e8c073f] {
   padding-left: var(--spacing-5);
   display: flex;
   align-items: center;
@@ -362,7 +362,7 @@ to {
   height: 50px;
   font-family: var(--font-family-base);
 }
-.action-btn[data-v-92d73926] {
+.action-btn[data-v-0e8c073f] {
   display: flex;
   align-items: center;
   gap: var(--spacing-1-5);
@@ -378,63 +378,70 @@ to {
   font-weight: var(--font-weight-medium);
   box-shadow: var(--shadow-xs);
 }
-.action-btn[data-v-92d73926]:hover {
+.action-btn[data-v-0e8c073f]:hover {
   background-color: var(--color-background-tertiary);
   border-color: var(--color-border-secondary);
 }
-.action-btn[data-v-92d73926]:active {
+.action-btn[data-v-0e8c073f]:active {
   transform: translateY(1px);
   box-shadow: none;
 }
-.action-btn.active[data-v-92d73926] {
+.action-btn.active[data-v-0e8c073f] {
   background-color: var(--color-accent-subtle);
   border-color: var(--color-accent);
   color: var(--color-accent);
 }
-.btn-icon[data-v-92d73926] {
+.btn-icon[data-v-0e8c073f] {
   font-size: 18px;
   color: var(--color-text-secondary);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-rendering: optimizeLegibility;
 }
-.action-btn:hover .btn-icon[data-v-92d73926] {
+.action-btn:hover .btn-icon[data-v-0e8c073f] {
   color: var(--color-text-primary);
 }
-.action-btn.active .btn-icon[data-v-92d73926] {
+.action-btn.active .btn-icon[data-v-0e8c073f] {
   color: var(--color-accent);
 }
-.btn-text[data-v-92d73926] {
+.btn-text[data-v-0e8c073f] {
   white-space: nowrap;
 }
-.settings-modal-content[data-v-92d73926] {
+.settings-modal-content[data-v-0e8c073f] {
   padding: var(--spacing-4);
   font-family: var(--font-family-base);
 }
-.form-group[data-v-92d73926] {
+.form-group[data-v-0e8c073f] {
   margin-bottom: var(--spacing-4);
 }
-.form-group label[data-v-92d73926] {
+.form-group label[data-v-0e8c073f] {
   display: block;
   margin-bottom: var(--spacing-2);
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-medium);
   color: var(--color-text-primary);
 }
-.quick-create-modal[data-v-92d73926] {
+.form-hint[data-v-0e8c073f] {
+  display: block;
+  margin-top: var(--spacing-1);
+  font-size: var(--font-size-xs, 11px);
+  color: var(--color-text-muted, #999);
+  line-height: 1.4;
+}
+.quick-create-modal[data-v-0e8c073f] {
   padding: var(--spacing-4) 0;
 }
-.quick-create-modal .form-group[data-v-92d73926] {
+.quick-create-modal .form-group[data-v-0e8c073f] {
   margin-bottom: var(--spacing-5);
 }
-.quick-create-modal label[data-v-92d73926] {
+.quick-create-modal label[data-v-0e8c073f] {
   display: block;
   margin-bottom: var(--spacing-2);
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-medium);
   color: var(--color-text-primary);
 }
-.preview-text[data-v-92d73926] {
+.preview-text[data-v-0e8c073f] {
   padding: var(--spacing-3);
   background-color: var(--color-background-muted);
   border: 1px solid var(--color-border-light);
@@ -442,14 +449,14 @@ to {
   font-size: var(--font-size-md);
   color: var(--color-text-secondary);
 }
-.preview-text code[data-v-92d73926] {
+.preview-text code[data-v-0e8c073f] {
   background-color: var(--color-background-tertiary);
   padding: 2px var(--spacing-1-5);
   border-radius: var(--border-radius-sm);
   font-family: var(--font-family-mono);
   font-size: var(--font-size-sm);
 }
-.dialog-footer[data-v-92d73926] {
+.dialog-footer[data-v-0e8c073f] {
   display: flex;
   gap: var(--spacing-2);
 }
@@ -900,7 +907,7 @@ to {
 }
 }
 
-.nodes-wrapper[data-v-0930336a] {
+.nodes-wrapper[data-v-49354e27] {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-1);
@@ -911,7 +918,7 @@ to {
 }
 
 /* Style for search input */
-.search-input[data-v-0930336a] {
+.search-input[data-v-49354e27] {
   padding: var(--spacing-2) var(--spacing-4);
   color: var(--color-text-primary);
   margin-bottom: var(--spacing-2);
@@ -921,15 +928,15 @@ to {
   background-color: var(--color-background-primary);
   transition: border-color var(--transition-fast);
 }
-.search-input[data-v-0930336a]:focus {
+.search-input[data-v-49354e27]:focus {
   outline: none;
   border-color: var(--input-border-focus);
 }
-.category-container[data-v-0930336a] {
+.category-container[data-v-49354e27] {
   overflow: hidden;
   border-radius: var(--border-radius-sm);
 }
-.category-header[data-v-0930336a] {
+.category-header[data-v-49354e27] {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -941,25 +948,25 @@ to {
   transition: background-color var(--transition-fast);
   height: 32px;
 }
-.category-header[data-v-0930336a]:hover {
+.category-header[data-v-49354e27]:hover {
   background-color: var(--color-background-tertiary);
 }
-.category-title[data-v-0930336a] {
+.category-title[data-v-49354e27] {
   font-size: var(--font-size-xs);
   font-weight: var(--font-weight-normal);
   color: var(--color-text-primary);
   text-align: left;
 }
-.category-icon[data-v-0930336a] {
+.category-icon[data-v-49354e27] {
   font-size: var(--font-size-sm);
   color: var(--color-text-secondary);
 }
-.category-content[data-v-0930336a] {
+.category-content[data-v-49354e27] {
   display: flex;
   flex-direction: column;
   background-color: var(--color-background-primary);
 }
-.node-item[data-v-0930336a] {
+.node-item[data-v-49354e27] {
   display: flex;
   align-items: center;
   padding: var(--spacing-2) var(--spacing-4);
@@ -969,34 +976,34 @@ to {
   border-bottom: 1px solid var(--color-border-light);
   height: 32px;
 }
-.node-item[data-v-0930336a]:last-child {
+.node-item[data-v-49354e27]:last-child {
   border-bottom: none;
 }
-.node-item[data-v-0930336a]:hover {
+.node-item[data-v-49354e27]:hover {
   background-color: var(--color-background-tertiary);
 }
-.node-image[data-v-0930336a] {
+.node-image[data-v-49354e27] {
   width: 24px;
   height: 24px;
   margin-right: var(--spacing-2-5);
 }
-.node-name[data-v-0930336a] {
+.node-name[data-v-49354e27] {
   font-size: var(--font-size-sm);
   color: var(--color-text-primary);
 }
 
 /* Custom scrollbar */
-.nodes-wrapper[data-v-0930336a]::-webkit-scrollbar {
+.nodes-wrapper[data-v-49354e27]::-webkit-scrollbar {
   width: 6px;
 }
-.nodes-wrapper[data-v-0930336a]::-webkit-scrollbar-track {
+.nodes-wrapper[data-v-49354e27]::-webkit-scrollbar-track {
   background: transparent;
 }
-.nodes-wrapper[data-v-0930336a]::-webkit-scrollbar-thumb {
+.nodes-wrapper[data-v-49354e27]::-webkit-scrollbar-thumb {
   background-color: var(--color-gray-300);
   border-radius: var(--border-radius-full);
 }
-.nodes-wrapper[data-v-0930336a]::-webkit-scrollbar-thumb:hover {
+.nodes-wrapper[data-v-49354e27]::-webkit-scrollbar-thumb:hover {
   background-color: var(--color-gray-400);
 }
 
@@ -10624,7 +10631,7 @@ to {
   -webkit-box-orient: vertical;
 }
 
-.log-container[data-v-0ab12658] {
+.log-container[data-v-5497bec4] {
   height: 100%;
   display: flex;
   flex-direction: column;
@@ -10633,53 +10640,54 @@ to {
   font-family: var(--font-family-mono);
   overflow-y: auto;
 }
-.log-header[data-v-0ab12658] {
+.log-header[data-v-5497bec4] {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 8px;
   background-color: var(--color-gray-800);
   border-bottom: 1px solid var(--color-border-primary);
+  opacity: 0.95;
   position: sticky;
   top: 0;
   z-index: 10; /* Ensures it stays above the logs */
 }
-.log-status[data-v-0ab12658] {
+.log-status[data-v-5497bec4] {
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 0.9em;
 }
-.status-indicator[data-v-0ab12658] {
+.status-indicator[data-v-5497bec4] {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background-color: var(--color-gray-500);
 }
-.status-indicator.active[data-v-0ab12658] {
+.status-indicator.active[data-v-5497bec4] {
   background-color: var(--color-success);
 }
-.status-indicator.error[data-v-0ab12658] {
+.status-indicator.error[data-v-5497bec4] {
   background-color: var(--color-danger);
 }
-.log-controls[data-v-0ab12658] {
+.log-controls[data-v-5497bec4] {
   display: flex;
   gap: 8px;
 }
-.error-banner[data-v-0ab12658] {
+.error-banner[data-v-5497bec4] {
   padding: 8px 12px;
   background-color: var(--color-danger-light);
   color: var(--color-danger);
   font-size: 0.9em;
   border-bottom: 1px solid var(--color-danger);
 }
-.empty-state[data-v-0ab12658] {
+.empty-state[data-v-5497bec4] {
   padding: 16px;
   text-align: center;
   color: var(--color-text-muted);
   font-style: italic;
 }
-.logs[data-v-0ab12658] {
+.logs[data-v-5497bec4] {
   flex-grow: 1;
   margin: 0;
   padding: 8px;
@@ -10689,24 +10697,24 @@ to {
   line-height: 1.8; /* Reduced line height */
   font-size: small;
 }
-.logs.auto-scroll[data-v-0ab12658] {
+.logs.auto-scroll[data-v-5497bec4] {
   scroll-behavior: smooth;
 }
-[data-v-0ab12658]::-webkit-scrollbar {
+[data-v-5497bec4]::-webkit-scrollbar {
   width: 12px;
 }
-[data-v-0ab12658]::-webkit-scrollbar-track {
+[data-v-5497bec4]::-webkit-scrollbar-track {
   background: var(--color-code-bg);
 }
-[data-v-0ab12658]::-webkit-scrollbar-thumb {
+[data-v-5497bec4]::-webkit-scrollbar-thumb {
   background: var(--color-gray-600);
   border-radius: 6px;
   border: 3px solid var(--color-code-bg);
 }
-[data-v-0ab12658]::-webkit-scrollbar-thumb:hover {
+[data-v-5497bec4]::-webkit-scrollbar-thumb:hover {
   background: var(--color-gray-500);
 }
-.error-line[data-v-0ab12658] {
+.error-line[data-v-5497bec4] {
   background-color: var(--color-danger-light);
   color: var(--color-danger);
 }
@@ -10716,6 +10724,47 @@ to {
 .context-menu[data-v-9260496a] {
   min-width: 200px;
 }
+
+.undo-redo-controls[data-v-ef0e185f] {
+  position: absolute;
+  top: 12px;
+  left: 192px; /* Position after the node list panel */
+  display: flex;
+  gap: 4px;
+  z-index: 1000;
+  background: var(--color-background-primary);
+  border: 1px solid var(--color-border-light);
+  border-radius: var(--border-radius-lg);
+  padding: 4px;
+  box-shadow: var(--shadow-md);
+}
+.control-btn[data-v-ef0e185f] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  background: transparent;
+  border: none;
+  border-radius: var(--border-radius-md);
+  cursor: pointer;
+  color: var(--color-text-secondary);
+  transition: all var(--transition-fast);
+}
+.control-btn[data-v-ef0e185f]:hover:not(:disabled) {
+  background: var(--color-background-tertiary);
+  color: var(--color-text-primary);
+}
+.control-btn[data-v-ef0e185f]:active:not(:disabled) {
+  transform: scale(0.95);
+}
+.control-btn[data-v-ef0e185f]:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+.control-btn .material-icons[data-v-ef0e185f] {
+  font-size: 20px;
+}
 .vue-flow {
   position: relative;
   width: 100%;
@@ -10735,10 +10784,10 @@ to {
   z-index: 1;
 }
 .vue-flow__pane.draggable {
-     cursor: grab;
+    cursor: grab;
 }
 .vue-flow__pane.selection {
-     cursor: pointer;
+    cursor: pointer;
 }
 .vue-flow__pane.dragging {
     cursor: grabbing;
@@ -10783,31 +10832,31 @@ to {
   cursor: pointer;
 }
 .vue-flow__edge.animated path {
-     stroke-dasharray: 5;
-     animation: dashdraw 0.5s linear infinite;
+    stroke-dasharray: 5;
+    animation: dashdraw 0.5s linear infinite;
 }
 .vue-flow__edge.animated path.vue-flow__edge-interaction {
-     stroke-dasharray: none;
-     animation: none;
+    stroke-dasharray: none;
+    animation: none;
 }
 .vue-flow__edge.inactive {
-     pointer-events: none;
+    pointer-events: none;
 }
 .vue-flow__edge.selected,
   .vue-flow__edge:focus,
   .vue-flow__edge:focus-visible {
-     outline: none;
+    outline: none;
 }
 .vue-flow__edge.selected .vue-flow__edge-path,
   .vue-flow__edge:focus .vue-flow__edge-path,
   .vue-flow__edge:focus-visible .vue-flow__edge-path {
-     stroke: #555;
+    stroke: #555;
 }
 .vue-flow__edge-textwrapper {
-     pointer-events: all;
+    pointer-events: all;
 }
 .vue-flow__edge-textbg {
-     fill: white;
+    fill: white;
 }
 .vue-flow__edge-text {
     pointer-events: none;
@@ -10819,8 +10868,8 @@ to {
   pointer-events: none;
 }
 .vue-flow__connection .animated {
-     stroke-dasharray: 5;
-     animation: dashdraw 0.5s linear infinite;
+    stroke-dasharray: 5;
+    animation: dashdraw 0.5s linear infinite;
 }
 .vue-flow__connectionline {
   z-index: 1001;
@@ -10829,25 +10878,6 @@ to {
   pointer-events: none;
   transform-origin: 0 0;
 }
-.vue-flow__node-default,
-.vue-flow__node-input,
-.vue-flow__node-output {
-  border-width: 1px;
-  border-style: solid;
-  border-color: #bbb;
-}
-.vue-flow__node-default.selected,
-  .vue-flow__node-default:focus,
-  .vue-flow__node-default:focus-visible,
-  .vue-flow__node-input.selected,
-  .vue-flow__node-input:focus,
-  .vue-flow__node-input:focus-visible,
-  .vue-flow__node-output.selected,
-  .vue-flow__node-output:focus,
-  .vue-flow__node-output:focus-visible {
-     outline: none;
-     border: 1px solid #555;
-}
 .vue-flow__node {
   position: absolute;
   -webkit-user-select: none;
@@ -10871,12 +10901,12 @@ to {
   pointer-events: none;
 }
 .vue-flow__nodesselection-rect {
-     position: absolute;
-     pointer-events: all;
-     cursor: grab;
+    position: absolute;
+    pointer-events: all;
+    cursor: grab;
 }
 .vue-flow__nodesselection-rect.dragging {
-          cursor: grabbing;
+      cursor: grabbing;
 }
 .vue-flow__handle {
   position: absolute;
@@ -10885,28 +10915,28 @@ to {
   min-height: 5px;
 }
 .vue-flow__handle.connectable {
-     pointer-events: all;
-     cursor: crosshair;
+    pointer-events: all;
+    cursor: crosshair;
 }
 .vue-flow__handle-bottom {
-     left: 50%;
-     bottom: 0;
-     transform: translate(-50%, 50%);
+    left: 50%;
+    bottom: 0;
+    transform: translate(-50%, 50%);
 }
 .vue-flow__handle-top {
-     left: 50%;
-     top: 0;
-     transform: translate(-50%, -50%);
+    left: 50%;
+    top: 0;
+    transform: translate(-50%, -50%);
 }
 .vue-flow__handle-left {
-     top: 50%;
-     left: 0;
-     transform: translate(-50%, -50%);
+    top: 50%;
+    left: 0;
+    transform: translate(-50%, -50%);
 }
 .vue-flow__handle-right {
-     top: 50%;
-     right: 0;
-     transform: translate(50%, -50%);
+    top: 50%;
+    right: 0;
+    transform: translate(50%, -50%);
 }
 .vue-flow__edgeupdater {
   cursor: move;
@@ -10918,20 +10948,20 @@ to {
   margin: 15px;
 }
 .vue-flow__panel.top {
-     top: 0;
+    top: 0;
 }
 .vue-flow__panel.bottom {
-     bottom: 0;
+    bottom: 0;
 }
 .vue-flow__panel.left {
-     left: 0;
+    left: 0;
 }
 .vue-flow__panel.right {
-     right: 0;
+    right: 0;
 }
 .vue-flow__panel.center {
-     left: 50%;
-     transform: translateX(-50%);
+    left: 50%;
+    transform: translateX(-50%);
 }
 @keyframes dashdraw {
 from {
@@ -10941,7 +10971,7 @@ from {
 :root {
   --vf-node-bg: #fff;
   --vf-node-text: #222;
-  --vf-connection-path:  #b1b1b7;
+  --vf-connection-path: #b1b1b7;
   --vf-handle: #555;
 }
 .vue-flow__edge.updating .vue-flow__edge-path {
@@ -10961,7 +10991,7 @@ from {
 }
 .vue-flow__node.selectable:focus,
   .vue-flow__node.selectable:focus-visible {
-     outline: none;
+    outline: none;
 }
 .vue-flow__node-default,
 .vue-flow__node-input,
@@ -10983,7 +11013,19 @@ from {
   .vue-flow__node-input.selected:hover,
   .vue-flow__node-output.selected,
   .vue-flow__node-output.selected:hover {
-     box-shadow: 0 0 0 0.5px var(--vf-box-shadow);
+    box-shadow: 0 0 0 0.5px var(--vf-box-shadow);
+}
+.vue-flow__node-default.selected,
+  .vue-flow__node-default:focus,
+  .vue-flow__node-default:focus-visible,
+  .vue-flow__node-input.selected,
+  .vue-flow__node-input:focus,
+  .vue-flow__node-input:focus-visible,
+  .vue-flow__node-output.selected,
+  .vue-flow__node-output:focus,
+  .vue-flow__node-output:focus-visible {
+    outline: none;
+    border: 1px solid #555;
 }
 .vue-flow__node-default .vue-flow__handle, .vue-flow__node-input .vue-flow__handle, .vue-flow__node-output .vue-flow__handle {
     background: var(--vf-handle);
@@ -11002,8 +11044,8 @@ from {
 .vue-flow__node-input.selected,
   .vue-flow__node-input:focus,
   .vue-flow__node-input:focus-visible {
-     outline: none;
-     border: 1px solid var(--vf-node-color, #0041d0);
+    outline: none;
+    border: 1px solid var(--vf-node-color, #0041d0);
 }
 .vue-flow__node-default {
   --vf-handle: var(--vf-node-color, #1a192b);
@@ -11015,8 +11057,8 @@ from {
 .vue-flow__node-default.selected,
   .vue-flow__node-default:focus,
   .vue-flow__node-default:focus-visible {
-     outline: none;
-     border: 1px solid var(--vf-node-color, #1a192b);
+    outline: none;
+    border: 1px solid var(--vf-node-color, #1a192b);
 }
 .vue-flow__node-output {
   --vf-handle: var(--vf-node-color, #ff0072);
@@ -11028,8 +11070,8 @@ from {
 .vue-flow__node-output.selected,
   .vue-flow__node-output:focus,
   .vue-flow__node-output:focus-visible {
-     outline: none;
-     border: 1px solid var(--vf-node-color, #ff0072);
+    outline: none;
+    border: 1px solid var(--vf-node-color, #ff0072);
 }
 .vue-flow__nodesselection-rect,
 .vue-flow__selection {
@@ -11040,7 +11082,7 @@ from {
   .vue-flow__nodesselection-rect:focus-visible,
   .vue-flow__selection:focus,
   .vue-flow__selection:focus-visible {
-     outline: none;
+    outline: none;
 }
 .vue-flow__handle {
   width: 6px;
@@ -11114,8 +11156,8 @@ from {
 
 /* handle styles */
 .vue-flow__resize-control.handle {
-  width: 4px;
-  height: 4px;
+  width: 5px;
+  height: 5px;
   border: 1px solid #fff;
   border-radius: 1px;
   background-color: #3367d9;
@@ -11265,11 +11307,11 @@ main {
   gap: 10px;
 }
 
-.flow-tabs-container[data-v-1d0bca1e] {
+.flow-tabs-container[data-v-6574f019] {
   width: 100%;
   font-family: var(--font-family-base);
 }
-.flow-tabs[data-v-1d0bca1e] {
+.flow-tabs[data-v-6574f019] {
   display: flex;
   align-items: center;
   overflow-x: auto;
@@ -11279,17 +11321,17 @@ main {
   padding-left: var(--spacing-1);
   scrollbar-width: thin;
 }
-.flow-tabs[data-v-1d0bca1e]::-webkit-scrollbar {
+.flow-tabs[data-v-6574f019]::-webkit-scrollbar {
   height: 4px;
 }
-.flow-tabs[data-v-1d0bca1e]::-webkit-scrollbar-track {
+.flow-tabs[data-v-6574f019]::-webkit-scrollbar-track {
   background: transparent;
 }
-.flow-tabs[data-v-1d0bca1e]::-webkit-scrollbar-thumb {
+.flow-tabs[data-v-6574f019]::-webkit-scrollbar-thumb {
   background-color: var(--color-gray-300);
   border-radius: var(--border-radius-full);
 }
-.flow-tab[data-v-1d0bca1e] {
+.flow-tab[data-v-6574f019] {
   display: flex;
   align-items: center;
   padding: 0 var(--spacing-4);
@@ -11305,28 +11347,28 @@ main {
   margin-right: 1px;
   transition: all var(--transition-fast);
 }
-.flow-tab.active[data-v-1d0bca1e] {
+.flow-tab.active[data-v-6574f019] {
   background-color: var(--color-background-primary);
   border-top: 2px solid var(--primary-blue);
   box-shadow: var(--shadow-xs);
   z-index: 1;
 }
-.flow-tab[data-v-1d0bca1e]:not(.active):hover {
+.flow-tab[data-v-6574f019]:not(.active):hover {
   background-color: var(--color-background-hover);
 }
-.tab-content[data-v-1d0bca1e] {
+.tab-content[data-v-6574f019] {
   display: flex;
   align-items: center;
   gap: var(--spacing-2);
   width: calc(100% - 20px);
   overflow: hidden;
 }
-.tab-icon[data-v-1d0bca1e] {
+.tab-icon[data-v-6574f019] {
   font-size: var(--font-size-xl);
-  color: var(--primary-blue);
+  color: var(--color-accent);
   flex-shrink: 0;
 }
-.tab-name[data-v-1d0bca1e] {
+.tab-name[data-v-6574f019] {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -11335,10 +11377,10 @@ main {
   letter-spacing: 0.01em;
   color: var(--color-text-secondary);
 }
-.active .tab-name[data-v-1d0bca1e] {
+.active .tab-name[data-v-6574f019] {
   color: var(--color-text-primary);
 }
-.close-icon[data-v-1d0bca1e] {
+.close-icon[data-v-6574f019] {
   font-size: var(--font-size-lg);
   color: var(--color-text-muted);
   opacity: 0;
@@ -11349,21 +11391,21 @@ main {
   transition: all var(--transition-fast);
   transform: scale(0.9);
 }
-.flow-tab:hover .close-icon[data-v-1d0bca1e] {
+.flow-tab:hover .close-icon[data-v-6574f019] {
   opacity: 1;
 }
-.close-icon[data-v-1d0bca1e]:hover {
+.close-icon[data-v-6574f019]:hover {
   background-color: var(--color-background-tertiary);
   color: var(--color-text-secondary);
   transform: scale(1);
 }
-.active .close-icon[data-v-1d0bca1e]:hover {
+.active .close-icon[data-v-6574f019]:hover {
   background-color: var(--color-background-hover);
   color: var(--color-primary);
 }
 
 /* New flow tab styling */
-.new-flow-tab[data-v-1d0bca1e] {
+.new-flow-tab[data-v-6574f019] {
   min-width: 40px;
   max-width: 40px;
   display: flex;
@@ -11371,7 +11413,7 @@ main {
   align-items: center;
   color: var(--color-primary);
 }
-.new-flow-tab[data-v-1d0bca1e]:hover {
+.new-flow-tab[data-v-6574f019]:hover {
   background-color: var(--color-background-hover);
 }