vibesurf 0.2.40__py3-none-any.whl → 0.3.16__py3-none-any.whl

vibe_surf/chrome_extension/scripts/ui-manager.js

@@ -19,6 +19,7 @@ class VibeSurfUIManager {
     this.modalManager = null;
     this.voiceRecorder = null;
     this.newsCarousel = null;
+    this.weatherManager = null;
 
     // Initialize user settings storage
     this.userSettingsStorage = null;
@@ -29,6 +30,7 @@ class VibeSurfUIManager {
     this.bindElements();
     this.initializeTabSelector(); // Initialize tab selector before binding events
     this.initializeSkillSelector(); // Initialize skill selector
+    this.initializeFlowSelector(); // Initialize flow selector
     this.initializeManagers();
     this.bindEvents();
     this.setupSessionListeners();
@@ -75,6 +77,10 @@ class VibeSurfUIManager {
       skillSelectorDropdown: document.getElementById('skill-selector-dropdown'),
       skillOptionsList: document.getElementById('skill-options-list'),
 
+      // Flow selector elements
+      flowSelectorDropdown: document.getElementById('flow-selector-dropdown'),
+      flowOptionsList: document.getElementById('flow-options-list'),
+
       // Loading
       loadingOverlay: document.getElementById('loading-overlay')
     };
@@ -105,6 +111,15 @@ class VibeSurfUIManager {
       this.newsCarousel = new NewsCarouselManager(this.apiClient);
       console.log('[UIManager] NewsCarouselManager created:', !!this.newsCarousel);
 
+      // Initialize weather manager
+      console.log('[UIManager] Creating WeatherManager...');
+      if (window.VibeSurfWeatherManager) {
+        this.weatherManager = new window.VibeSurfWeatherManager(this.apiClient);
+        console.log('[UIManager] WeatherManager created:', !!this.weatherManager);
+      } else {
+        console.warn('[UIManager] VibeSurfWeatherManager not found on window');
+      }
+
       // Initialize other managers
       this.settingsManager = new VibeSurfSettingsManager(this.apiClient);
       this.historyManager = new VibeSurfHistoryManager(this.apiClient);
@@ -150,13 +165,30 @@ class VibeSurfUIManager {
       this.showNotification(data.message || 'Settings error occurred', 'error');
     });
 
+    this.settingsManager.on('languageChanged', (data) => {
+      console.log('[UIManager] Language changed to:', data.locale);
+      // Re-render profile lists when language changes
+      // Profile lists use window.i18n.getMessage() directly for translation
+      if (this.settingsManager.settingsProfiles) {
+        this.settingsManager.settingsProfiles.rerenderAllProfiles();
+      }
+      // Re-render workflows when language changes
+      if (this.settingsManager.settingsWorkflow) {
+        this.settingsManager.settingsWorkflow.rerenderAllWorkflows();
+      }
+      // Re-render toolkits when language changes
+      if (this.settingsManager.settingsIntegrations) {
+        this.settingsManager.settingsIntegrations.rerenderAllToolkits();
+      }
+    });
+
     this.settingsManager.on('confirmDeletion', (data) => {
       this.modalManager.showConfirmModal(
-        'Delete Profile',
-        `Are you sure you want to delete the ${data.type} profile "${data.profileId}"? This action cannot be undone.`,
+        window.i18n.getMessage('deleteProfileTitle'),
+        window.i18n.getMessage('deleteProfileConfirmation', [data.type, data.profileId]),
         {
-          confirmText: 'Delete',
-          cancelText: 'Cancel',
+          confirmText: window.i18n.getMessage('delete'),
+          cancelText: window.i18n.getMessage('cancel'),
           type: 'danger',
           onConfirm: () => {
             if (data.callback) data.callback();
@@ -172,17 +204,17 @@ class VibeSurfUIManager {
 
       const modalData = this.modalManager.createModal(`
         <div class="select-default-modal">
-          <p>You are deleting the default LLM profile. Please select a new default profile:</p>
+          <p>${window.i18n.getMessage('selectNewDefaultDescription')}</p>
           <select id="new-default-select" class="form-select">
             ${options}
           </select>
           <div class="modal-footer">
-            <button class="btn-secondary cancel-btn">Cancel</button>
-            <button class="btn-primary confirm-btn">Set as Default & Delete</button>
+            <button class="btn-secondary cancel-btn">${window.i18n.getMessage('cancel')}</button>
+            <button class="btn-primary confirm-btn">${window.i18n.getMessage('setAsDefaultAndDelete')}</button>
           </div>
         </div>
       `, {
-        title: 'Select New Default Profile'
+        title: window.i18n.getMessage('selectNewDefaultProfile')
       });
 
       const select = document.getElementById('new-default-select');
@@ -283,7 +315,7 @@ class VibeSurfUIManager {
       } else {
         this.elements.voiceRecordBtn.classList.remove('recording');
         this.elements.voiceRecordBtn.setAttribute('title', 'Voice Input');
-        this.elements.voiceRecordBtn.setAttribute('data-tooltip', 'Click to start voice recording');
+        this.elements.voiceRecordBtn.setAttribute('data-tooltip', window.i18n?.getMessage('clickToStartVoiceRecording') || 'Click to start voice recording');
 
         // Clear duration display
         this.updateRecordingDuration('0:00', 0);
@@ -346,7 +378,7 @@ class VibeSurfUIManager {
       userMessage = `Recording failed: ${errorMessage}`;
     } else if (errorType === 'transcription') {
       if (errorMessage.includes('No active ASR profiles')) {
-        userMessage = 'No voice recognition profiles configured. Please set up an ASR profile in Settings > Voice.';
+        userMessage = window.i18n?.getMessage('noVoiceRecognitionProfilesConfigured') || 'No voice recognition profiles configured. Please set up an ASR profile in Settings > Voice.';
       } else {
         userMessage = `Transcription failed: ${errorMessage}`;
       }
@@ -435,6 +467,12 @@ class VibeSurfUIManager {
     } else {
       console.warn('[UIManager] newsCarousel is not initialized');
     }
+
+    // Initialize weather manager if available
+    if (this.weatherManager) {
+      console.log('[UIManager] Initializing weather manager...');
+      this.weatherManager.checkContainer();
+    }
   }
 
   handleSessionLoaded(data) {
@@ -461,6 +499,9 @@ class VibeSurfUIManager {
     if (this.newsCarousel) {
       this.newsCarousel.hide();
     }
+    
+    // Hide weather widget when task starts (handled by removing welcome message)
+    // The weather widget is part of the welcome message area which gets cleared
   }
 
   handleTaskPaused(data) {
@@ -611,11 +652,11 @@ class VibeSurfUIManager {
       // Allow input when paused or not running
       this.elements.taskInput.disabled = isRunning && !isPaused;
       if (isPaused) {
-        this.elements.taskInput.placeholder = 'Add additional information or guidance...';
+        this.elements.taskInput.placeholder = window.i18n?.getMessage('taskPausedPlaceholder') || 'Add additional information or guidance...';
       } else if (isRunning) {
-        this.elements.taskInput.placeholder = 'Task is running - please wait...';
+        this.elements.taskInput.placeholder = window.i18n?.getMessage('taskRunningPlaceholder') || 'Task is running - please wait...';
       } else {
-        this.elements.taskInput.placeholder = 'Ask anything (/ for skills, @ to specify tab)';
+        this.elements.taskInput.placeholder = window.i18n?.getMessage('inputPlaceholder') || 'Ask anything (/ for skills, @ to specify tab)';
       }
     }
 
@@ -646,7 +687,7 @@ class VibeSurfUIManager {
         if (this.elements.voiceRecordBtn.classList.contains('recording')) {
           this.elements.voiceRecordBtn.setAttribute('title', 'Recording... Click to stop');
         } else {
-          this.elements.voiceRecordBtn.setAttribute('title', 'Click to start voice recording');
+          this.elements.voiceRecordBtn.setAttribute('title', window.i18n?.getMessage('clickToStartVoiceRecording') || 'Click to start voice recording');
         }
       }
     }
@@ -693,7 +734,7 @@ class VibeSurfUIManager {
     if (this.elements.voiceRecordBtn) {
       this.elements.voiceRecordBtn.disabled = false;
       this.elements.voiceRecordBtn.classList.remove('task-running-disabled');
-      this.elements.voiceRecordBtn.setAttribute('title', 'Click to start voice recording');
+      this.elements.voiceRecordBtn.setAttribute('title', window.i18n?.getMessage('clickToStartVoiceRecording') || 'Click to start voice recording');
     }
 
     // Keep LLM profile disabled during pause (user doesn't need to change it)
@@ -1203,6 +1244,11 @@ class VibeSurfUIManager {
         event.preventDefault();
         return;
       }
+      // Also handle flow token deletion
+      if (this.handleFlowTokenDeletion(event)) {
+        event.preventDefault();
+        return;
+      }
     }
 
     // Handle Tab key for skill auto-completion when only one skill matches
@@ -1212,6 +1258,14 @@ class VibeSurfUIManager {
         this.selectSkill(this.skillSelectorState.filteredSkills[0]);
       }
     }
+    
+    // Handle Tab key for flow auto-completion when only one flow matches
+    if (event.key === 'Tab' && this.flowSelectorState.isVisible) {
+      if (this.flowSelectorState.filteredFlows.length === 1) {
+        event.preventDefault();
+        this.selectFlow(this.flowSelectorState.filteredFlows[0]);
+      }
+    }
   }
 
   handleTabTokenDeletion(event) {
@@ -1399,8 +1453,9 @@ class VibeSurfUIManager {
     // Check for @ character to trigger tab selector
     this.handleTabSelectorInput(event);
 
-    // Check for / character to trigger skill selector
+    // Check for / character to trigger skill selector or flow selector
     this.handleSkillSelectorInput(event);
+    this.handleFlowSelectorInput(event);
 
     // Update send button state - special handling for pause state
     if (this.elements.sendBtn) {
@@ -1554,33 +1609,37 @@ class VibeSurfUIManager {
     const welcomeHTML = `
       <div class="welcome-message">
         <div class="welcome-text">
-          <h4>Welcome to VibeSurf</h4>
-          <p>Let's vibe surfing the world with AI automation</p>
-        </div>
-        <div class="quick-tasks">
-          <div class="task-suggestion" data-task="research">
-            <div class="task-icon">🔍</div>
-            <div class="task-content">
-              <div class="task-title">Research Founders</div>
-              <div class="task-description">Search information about AI browser assistant: VibeSurf, write a brief report</div>
-            </div>
-          </div>
+          <h4 data-i18n="welcomeTitle">Welcome to VibeSurf</h4>
+          <p data-i18n="welcomeSubtitle">Let's vibe surfing the world with AI automation</p>
         </div>
+        <div id="weather-widget"></div>
       </div>
     `;
 
     if (this.elements.activityLog) {
       // Preserve the news carousel
       const newsCarousel = this.elements.activityLog.querySelector('#news-carousel-container');
-      
+
       // Set the welcome message
       this.elements.activityLog.innerHTML = welcomeHTML;
-      
+
+      // Re-initialize weather manager with new container
+      if (this.weatherManager) {
+        setTimeout(() => {
+          this.weatherManager.checkContainer();
+        }, 0);
+      }
+
       // Append the news carousel at the end (after welcome message)
       if (newsCarousel) {
         this.elements.activityLog.appendChild(newsCarousel);
       }
-      
+
+      // Translate the welcome message elements to the current language
+      if (window.i18n && window.i18n.translatePage) {
+        window.i18n.translatePage(this.elements.activityLog);
+      }
+
       this.bindTaskSuggestionEvents();
     }
   }
@@ -2348,11 +2407,15 @@ class VibeSurfUIManager {
     const select = this.elements.llmProfileSelect;
     select.innerHTML = '';
 
+    // Get translated messages
+    const noLlmProfilesLabel = window.i18n?.getMessage('noLlmProfilesConfigured') || 'No LLM profiles configured - Go to Settings';
+    const selectLlmProfileLabel = window.i18n?.getMessage('selectLlmProfile') || 'Select LLM Profile...';
+
     if (profiles.length === 0) {
       // Add placeholder option when no profiles available
       const placeholderOption = document.createElement('option');
       placeholderOption.value = '';
-      placeholderOption.textContent = 'No LLM profiles configured - Go to Settings';
+      placeholderOption.textContent = noLlmProfilesLabel;
       placeholderOption.disabled = true;
       placeholderOption.selected = true;
       select.appendChild(placeholderOption);
@@ -2360,7 +2423,7 @@ class VibeSurfUIManager {
       // Add default empty option
       const emptyOption = document.createElement('option');
       emptyOption.value = '';
-      emptyOption.textContent = 'Select LLM Profile...';
+      emptyOption.textContent = selectLlmProfileLabel;
       emptyOption.disabled = true;
       select.appendChild(emptyOption);
 
@@ -2418,22 +2481,24 @@ class VibeSurfUIManager {
 
   showLLMProfileRequiredModal(action) {
     const isConfigureAction = action === 'configure';
-    const title = isConfigureAction ? 'LLM Profile Required' : 'Please Select LLM Profile';
+    const title = isConfigureAction
+      ? (window.i18n?.getMessage('llmProfileRequired') || 'LLM Profile Required')
+      : (window.i18n?.getMessage('pleaseSelectLlmProfile') || 'Please Select LLM Profile');
     const message = isConfigureAction
-      ? 'No LLM profiles are configured. You need to configure at least one LLM profile before sending tasks.'
-      : 'Please select an LLM profile from the dropdown to proceed with your task.';
+      ? (window.i18n?.getMessage('noLlmProfilesConfiguredDesc') || 'No LLM profiles are configured. You need to configure at least one LLM profile before sending tasks.')
+      : (window.i18n?.getMessage('pleaseSelectLlmProfileDesc') || 'Please select an LLM profile from the dropdown to proceed with your task.');
 
     const options = isConfigureAction
       ? {
-          confirmText: 'Open Settings',
-          cancelText: 'Cancel',
+          confirmText: window.i18n?.getMessage('openSettings') || 'Open Settings',
+          cancelText: window.i18n?.getMessage('cancel') || 'Cancel',
           onConfirm: () => {
             this.handleShowLLMSettings();
           }
         }
       : {
-          confirmText: 'OK',
-          cancelText: 'Open Settings',
+          confirmText: window.i18n?.getMessage('ok') || 'OK',
+          cancelText: window.i18n?.getMessage('openSettings') || 'Open Settings',
           onConfirm: () => {
             this.elements.llmProfileSelect?.focus();
           },
@@ -2447,22 +2512,24 @@ class VibeSurfUIManager {
 
   showVoiceProfileRequiredModal(action) {
     const isConfigureAction = action === 'configure';
-    const title = isConfigureAction ? 'Voice Profile Required' : 'Please Select Voice Profile';
+    const title = isConfigureAction
+      ? (window.i18n?.getMessage('voiceProfileRequired') || 'Voice Profile Required')
+      : (window.i18n?.getMessage('pleaseSelectVoiceProfile') || 'Please Select Voice Profile');
     const message = isConfigureAction
-      ? 'No voice recognition (ASR) profiles are configured. You need to configure at least one voice profile before using voice input.'
-      : 'Please configure a voice recognition profile to use voice input functionality.';
+      ? (window.i18n?.getMessage('noVoiceProfilesConfiguredDesc') || 'No voice recognition (ASR) profiles are configured. You need to configure at least one voice profile before using voice input.')
+      : (window.i18n?.getMessage('pleaseConfigureVoiceProfileDesc') || 'Please configure a voice recognition profile to use voice input functionality.');
 
     const options = isConfigureAction
       ? {
-          confirmText: 'Open Voice Settings',
-          cancelText: 'Cancel',
+          confirmText: window.i18n?.getMessage('openVoiceSettings') || 'Open Voice Settings',
+          cancelText: window.i18n?.getMessage('cancel') || 'Cancel',
           onConfirm: () => {
             this.handleShowVoiceSettings();
           }
         }
       : {
-          confirmText: 'Open Voice Settings',
-          cancelText: 'Cancel',
+          confirmText: window.i18n?.getMessage('openVoiceSettings') || 'Open Voice Settings',
+          cancelText: window.i18n?.getMessage('cancel') || 'Cancel',
           onConfirm: () => {
             this.handleShowVoiceSettings();
           }
@@ -2632,14 +2699,14 @@ class VibeSurfUIManager {
       if (!isVoiceAvailable) {
         // Add visual indication but keep button enabled for click handling
         this.elements.voiceRecordBtn.classList.add('voice-disabled');
-        this.elements.voiceRecordBtn.setAttribute('title', 'Voice input disabled - No ASR profiles configured. Click to configure.');
-        this.elements.voiceRecordBtn.setAttribute('data-tooltip', 'Voice input disabled - No ASR profiles configured. Click to configure.');
+        this.elements.voiceRecordBtn.setAttribute('title', window.i18n?.getMessage('voiceInputDisabledNoAsr') || 'Voice input disabled - No ASR profiles configured. Click to configure.');
+        this.elements.voiceRecordBtn.setAttribute('data-tooltip', window.i18n?.getMessage('voiceInputDisabledNoAsr') || 'Voice input disabled - No ASR profiles configured. Click to configure.');
       } else {
         // Remove visual indication and restore normal tooltip
         this.elements.voiceRecordBtn.classList.remove('voice-disabled');
         if (!this.elements.voiceRecordBtn.classList.contains('recording')) {
-          this.elements.voiceRecordBtn.setAttribute('title', 'Click to start voice recording');
-          this.elements.voiceRecordBtn.setAttribute('data-tooltip', 'Click to start voice recording');
+          this.elements.voiceRecordBtn.setAttribute('title', window.i18n?.getMessage('clickToStartVoiceRecording') || 'Click to start voice recording');
+          this.elements.voiceRecordBtn.setAttribute('data-tooltip', window.i18n?.getMessage('clickToStartVoiceRecording') || 'Click to start voice recording');
         }
       }
     } catch (error) {
@@ -3377,9 +3444,14 @@ class VibeSurfUIManager {
 
     // Check if / was just typed
     if (inputValue[cursorPosition - 1] === '/') {
-      this.skillSelectorState.slashPosition = cursorPosition - 1;
-      this.skillSelectorState.currentFilter = '';
-      this.showSkillSelector();
+      // Check if this might be /flow pattern - if so, don't show skill selector
+      const beforeCursor = inputValue.substring(0, cursorPosition);
+      const possibleFlow = beforeCursor.substring(cursorPosition - 5, cursorPosition); // last 5 chars
+      if (!possibleFlow.toLowerCase().startsWith('/flow')) {
+        this.skillSelectorState.slashPosition = cursorPosition - 1;
+        this.skillSelectorState.currentFilter = '';
+        this.showSkillSelector();
+      }
     } else if (this.skillSelectorState.isVisible) {
       // Check if / was deleted - hide skill selector immediately
       if (this.skillSelectorState.slashPosition >= 0 &&
@@ -3417,10 +3489,9 @@ class VibeSurfUIManager {
     }
 
     try {
-      // Fetch skill data from backend if not already cached
-      if (this.skillSelectorState.allSkills.length === 0) {
-        await this.populateSkillSelector();
-      }
+      // Always fetch skill data from backend to ensure freshness
+      // This ensures backend changes (name modifications, etc.) are immediately reflected
+      await this.populateSkillSelector();
 
       // Filter skills based on current input
       this.filterSkills();
@@ -3473,14 +3544,12 @@ class VibeSurfUIManager {
 
   async populateSkillSelector() {
     try {
-      console.log('[UIManager] Fetching skills from backend...');
-      // Get all skills from backend
+      const timestamp = new Date().toISOString();
+      
+      // Get all skills from backend (always fetch to ensure backend changes are reflected)
       const skills = await this.apiClient.getAllSkills();
 
-      console.log('[UIManager] Skills received from backend:', skills);
-
       if (!skills || !Array.isArray(skills) || skills.length === 0) {
-        console.warn('[UIManager] No skills returned from backend');
         this.skillSelectorState.allSkills = [];
         return;
       }
@@ -3489,8 +3558,6 @@ class VibeSurfUIManager {
         name: skillName,
         displayName: skillName // Keep original skill name without transformation
       }));
-      console.log('[UIManager] Processed skills:', this.skillSelectorState.allSkills);
-
     } catch (error) {
       console.error('[UIManager] Failed to populate skill selector:', error);
       console.error('[UIManager] Error details:', {
@@ -3623,6 +3690,360 @@ class VibeSurfUIManager {
     return skills.length > 0 ? skills : null;
   }
 
+  // Flow Selector Methods (for workflow selection)
+  initializeFlowSelector() {
+    // Initialize flow selector state
+    this.flowSelectorState = {
+      isVisible: false,
+      selectedFlows: [],
+      allFlows: [],
+      slashPosition: -1, // Position where @flow was typed
+      currentFilter: '', // Current filter text after @flow
+      filteredFlows: [] // Filtered flows based on current input
+    };
+
+    // Bind flow selector events
+    this.bindFlowSelectorEvents();
+  }
+
+  bindFlowSelectorEvents() {
+    // Hide on click outside
+    document.addEventListener('click', (event) => {
+      if (this.flowSelectorState.isVisible &&
+          this.elements.flowSelectorDropdown &&
+          !this.elements.flowSelectorDropdown.contains(event.target) &&
+          !this.elements.taskInput?.contains(event.target)) {
+        this.hideFlowSelector();
+      }
+    });
+  }
+
+  handleFlowSelectorInput(event) {
+    // Safety check - ensure flow selector state is initialized
+    if (!this.flowSelectorState) {
+      console.warn('[UIManager] Flow selector state not initialized');
+      return;
+    }
+
+    const inputValue = event.target.value;
+    const cursorPosition = event.target.selectionStart;
+
+    // Check if @flow pattern was just typed (case-insensitive)
+    const beforeCursor = inputValue.substring(0, cursorPosition);
+    const flowMatch = beforeCursor.match(/@flow$/i);
+    
+    if (flowMatch) {
+      // Hide tab selector if it's visible
+      if (this.tabSelectorState.isVisible) {
+        this.hideTabSelector();
+      }
+      this.flowSelectorState.slashPosition = flowMatch.index;
+      this.flowSelectorState.currentFilter = '';
+      this.showFlowSelector();
+    } else if (this.flowSelectorState.isVisible) {
+      // Check if @flow was deleted - hide flow selector immediately
+      if (this.flowSelectorState.slashPosition >= 0) {
+        const flowPattern = inputValue.substring(this.flowSelectorState.slashPosition, cursorPosition);
+        if (!flowPattern.toLowerCase().startsWith('@flow')) {
+          this.hideFlowSelector();
+          return;
+        }
+      }
+
+      // Update filter based on text after @flow
+      const textAfterFlow = inputValue.substring(this.flowSelectorState.slashPosition + 5, cursorPosition); // +5 for '@flow'
+      
+      // Only consider text up to the next space or special character
+      const filterText = textAfterFlow.split(/[\s@]/)[0];
+
+      if (this.flowSelectorState.currentFilter !== filterText) {
+        this.flowSelectorState.currentFilter = filterText;
+        this.filterFlows();
+      }
+
+      // Hide flow selector if user typed a space or moved past the flow context
+      if (textAfterFlow.includes(' ') || textAfterFlow.includes('@')) {
+        this.hideFlowSelector();
+      }
+    }
+  }
+
+  async showFlowSelector() {
+    if (!this.elements.flowSelectorDropdown || !this.elements.taskInput) {
+      console.error('[UIManager] Flow selector elements not found', {
+        dropdown: this.elements.flowSelectorDropdown,
+        taskInput: this.elements.taskInput
+      });
+      return;
+    }
+
+    try {
+      // Always fetch flow data from backend to ensure freshness
+      // This ensures backend changes (name modifications, etc.) are immediately reflected
+      await this.populateFlowSelector();
+
+      // Filter flows based on current input
+      this.filterFlows();
+
+      // Position the dropdown relative to the input
+      this.positionFlowSelector();
+
+      // Show the dropdown with explicit visibility
+      this.elements.flowSelectorDropdown.classList.remove('hidden');
+      this.elements.flowSelectorDropdown.style.display = 'block';
+      this.elements.flowSelectorDropdown.style.visibility = 'visible';
+      this.elements.flowSelectorDropdown.style.opacity = '1';
+      this.flowSelectorState.isVisible = true;
+
+    } catch (error) {
+      console.error('[UIManager] Failed to show flow selector:', error);
+      this.showNotification('Failed to load workflow flows', 'error');
+    }
+  }
+
+  hideFlowSelector() {
+    if (this.elements.flowSelectorDropdown) {
+      this.elements.flowSelectorDropdown.classList.add('hidden');
+      this.elements.flowSelectorDropdown.style.display = 'none';
+    }
+    this.flowSelectorState.isVisible = false;
+    this.flowSelectorState.slashPosition = -1;
+    this.flowSelectorState.currentFilter = '';
+    this.flowSelectorState.filteredFlows = [];
+  }
+
+  positionFlowSelector() {
+    if (!this.elements.flowSelectorDropdown || !this.elements.taskInput) return;
+
+    const inputRect = this.elements.taskInput.getBoundingClientRect();
+    const dropdown = this.elements.flowSelectorDropdown;
+
+    // Calculate 90% width of input
+    const dropdownWidth = inputRect.width * 0.9;
+
+    // Position dropdown ABOVE the input (not below)
+    dropdown.style.position = 'fixed';
+    dropdown.style.bottom = `${window.innerHeight - inputRect.top + 5}px`; // Above the input
+    dropdown.style.left = `${inputRect.left + (inputRect.width - dropdownWidth) / 2}px`; // Centered
+    dropdown.style.width = `${dropdownWidth}px`; // 90% of input width
+    dropdown.style.zIndex = '9999';
+    dropdown.style.maxHeight = '300px';
+    dropdown.style.overflowY = 'auto';
+  }
+
+  async populateFlowSelector() {
+    try {
+      const timestamp = new Date().toISOString();
+
+      // Get all workflow flows from backend (always fetch to ensure backend changes are reflected)
+      const response = await this.apiClient.getWorkflowSkills();
+      if (!response || !response.workflow_skills || !Array.isArray(response.workflow_skills)) {
+        this.flowSelectorState.allFlows = [];
+        return;
+      }
+
+      this.flowSelectorState.allFlows = response.workflow_skills.map(flow => ({
+        flow_id: flow.flow_id,
+        name: flow.name || flow.flow_id,
+        description: flow.description || '',
+        displayName: flow.display_name || `@flow-${flow.flow_id.slice(-4)}: ${flow.name || flow.flow_id}`
+      }));
+    } catch (error) {
+      console.error('[UIManager] Failed to populate flow selector:', error);
+      console.error('[UIManager] Error details:', {
+        message: error.message,
+        stack: error.stack,
+        response: error.response,
+        data: error.data
+      });
+
+      // Show error to user
+      this.showNotification(`Failed to load workflow flows: ${error.message}`, 'error');
+
+      // Set empty array
+      this.flowSelectorState.allFlows = [];
+    }
+  }
+
+  filterFlows() {
+    const filter = this.flowSelectorState.currentFilter.toLowerCase();
+
+    if (!filter) {
+      this.flowSelectorState.filteredFlows = this.flowSelectorState.allFlows;
+    } else {
+      this.flowSelectorState.filteredFlows = this.flowSelectorState.allFlows.filter(flow =>
+        flow.flow_id.toLowerCase().includes(filter) ||
+        flow.name.toLowerCase().includes(filter) ||
+        flow.displayName.toLowerCase().includes(filter)
+      );
+    }
+
+    this.renderFlowOptions();
+  }
+
+  renderFlowOptions() {
+    if (!this.elements.flowOptionsList) return;
+
+    // Clear existing options
+    this.elements.flowOptionsList.innerHTML = '';
+
+    if (this.flowSelectorState.filteredFlows.length === 0) {
+      const noResults = document.createElement('div');
+      noResults.className = 'flow-option';
+      noResults.innerHTML = '<span class="flow-name">No workflow flows found</span>';
+      noResults.style.opacity = '0.6';
+      noResults.style.cursor = 'not-allowed';
+      this.elements.flowOptionsList.appendChild(noResults);
+      return;
+    }
+
+    // Add flow options
+    this.flowSelectorState.filteredFlows.forEach((flow, index) => {
+      const option = this.createFlowOption(flow, index);
+      this.elements.flowOptionsList.appendChild(option);
+    });
+  }
+
+  createFlowOption(flow, index) {
+    const option = document.createElement('div');
+    option.className = 'flow-option';
+    option.dataset.flowId = flow.flow_id;
+    option.dataset.flowIndex = index;
+
+    option.innerHTML = `
+      <span class="flow-name">${this.escapeHtml(flow.displayName)}</span>
+      ${flow.description ? `<span class="flow-description">${this.escapeHtml(flow.description)}</span>` : ''}
+    `;
+
+    // Add click event for flow selection
+    option.addEventListener('click', () => {
+      this.selectFlow(flow);
+    });
+
+    return option;
+  }
+
+  selectFlow(flow) {
+    if (!this.elements.taskInput) return;
+
+    const input = this.elements.taskInput;
+    const currentValue = input.value;
+    const slashPosition = this.flowSelectorState.slashPosition;
+
+    // Use special Unicode characters as boundaries for easy deletion (different from skill tokens)
+    const FLOW_START_MARKER = '\u2060'; // Word joiner
+    const FLOW_END_MARKER = '\u2061';   // Function application
+
+    // Create flow information string using display name
+    const flowInfo = `${FLOW_START_MARKER}${flow.displayName}${FLOW_END_MARKER}`;
+
+    // Replace @flow with flow selection
+    const beforeSlash = currentValue.substring(0, slashPosition);
+    const afterSlash = currentValue.substring(slashPosition + 5 + this.flowSelectorState.currentFilter.length); // +5 for '@flow'
+    const newValue = `${beforeSlash}${flowInfo} ${afterSlash}`;
+
+    input.value = newValue;
+
+    // Trigger input change event for validation
+    this.handleTaskInputChange({ target: input });
+
+    // Set cursor position after the inserted text
+    const newCursorPosition = beforeSlash.length + flowInfo.length + 1;
+    input.setSelectionRange(newCursorPosition, newCursorPosition);
+    input.focus();
+
+    // Hide the selector
+    this.hideFlowSelector();
+  }
+
+  handleFlowTokenDeletion(event) {
+    const input = event.target;
+    const cursorPos = input.selectionStart;
+    const text = input.value;
+
+    // Unicode markers for flow tokens
+    const startMarker = '\u2060'; // Word joiner
+    const endMarker = '\u2061';   // Function application
+
+    let tokenStart = -1;
+    let tokenEnd = -1;
+
+    if (event.key === 'Backspace') {
+      // Only delete if cursor is directly adjacent to end of token
+      if (cursorPos > 0 && text[cursorPos - 1] === endMarker) {
+        tokenEnd = cursorPos; // Include the marker
+        // Find the corresponding start marker backwards
+        for (let j = cursorPos - 2; j >= 0; j--) {
+          if (text[j] === startMarker) {
+            tokenStart = j;
+            break;
+          }
+        }
+      }
+    } else if (event.key === 'Delete') {
+      // Only delete if cursor is directly adjacent to start of token
+      if (cursorPos < text.length && text[cursorPos] === startMarker) {
+        tokenStart = cursorPos;
+        // Find the corresponding end marker forwards
+        for (let j = cursorPos + 1; j < text.length; j++) {
+          if (text[j] === endMarker) {
+            tokenEnd = j + 1; // Include the marker
+            break;
+          }
+        }
+      }
+    }
+
+    // If we found a complete token, delete it
+    if (tokenStart !== -1 && tokenEnd !== -1) {
+      const beforeToken = text.substring(0, tokenStart);
+      const afterToken = text.substring(tokenEnd);
+      input.value = beforeToken + afterToken;
+      input.setSelectionRange(tokenStart, tokenStart);
+
+      // Trigger input change event for validation
+      this.handleTaskInputChange({ target: input });
+
+      return true; // Prevent default behavior
+    }
+
+    return false; // Allow default behavior
+  }
+
+  getSelectedFlowsForTask() {
+    if (!this.elements.taskInput) return null;
+
+    const inputValue = this.elements.taskInput.value;
+    const FLOW_START_MARKER = '\u2060'; // Word joiner
+    const FLOW_END_MARKER = '\u2061';   // Function application
+
+    const flows = [];
+    let startIndex = 0;
+
+    while ((startIndex = inputValue.indexOf(FLOW_START_MARKER, startIndex)) !== -1) {
+      const endIndex = inputValue.indexOf(FLOW_END_MARKER, startIndex);
+      if (endIndex !== -1) {
+        const flowText = inputValue.substring(startIndex + 1, endIndex);
+        // Extract flow_id from the display name format: @flow-{id}: {name}
+        const flowMatch = flowText.match(/@flow-(\w+):/);
+        if (flowMatch) {
+          // Find the full flow_id from cached flows
+          const fullFlow = this.flowSelectorState.allFlows.find(f =>
+            f.flow_id.endsWith(flowMatch[1])
+          );
+          if (fullFlow) {
+            flows.push(fullFlow.flow_id);
+          }
+        }
+        startIndex = endIndex + 1;
+      } else {
+        break;
+      }
+    }
+
+    return flows.length > 0 ? flows : null;
+  }
+
   // Initialize social links from config
   initializeSocialLinks() {
     const socialLinksContainer = document.getElementById('social-links-container');
@@ -3642,7 +4063,7 @@ class VibeSurfUIManager {
         github: "https://github.com/vibesurf-ai/VibeSurf",
         discord: "https://discord.gg/86SPfhRVbk",
         x: "https://x.com/warmshao",
-        reportBug: "https://github.com/vibesurf-ai/VibeSurf/issues/new/choose",
+        wechat: "icons/wx.png",
         website: "https://vibe-surf.com/"
       };
     } else {
@@ -3752,14 +4173,14 @@ class VibeSurfUIManager {
           <path d="M12 0C5.374 0 0 5.373 0 12c0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.509 11.509 0 0112 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12z" fill="currentColor"/>
         </svg>`;
         break;
-      
+
       case 'discord':
         title = 'Discord';
         svg = `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
           <path d="M20.317 4.37a19.791 19.791 0 00-4.885-1.515.074.074 0 00-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 00-5.487 0 12.64 12.64 0 00-.617-1.25.077.077 0 00-.079-.037A19.736 19.736 0 003.677 4.37a.07.07 0 00-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 00.031.057 19.9 19.9 0 005.993 3.03.078.078 0 00.084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 00-.041-.106 13.107 13.107 0 01-1.872-.892.077.077 0 01-.008-.128 10.2 10.2 0 00.372-.292.074.074 0 01.077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 01.078.01c.12.098.246.198.373.292a.077.077 0 01-.006.127 12.299 12.299 0 01-1.873.892.077.077 0 00-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 00.084.028 19.839 19.839 0 006.002-3.03.077.077 0 00.032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 00-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z" fill="currentColor"/>
         </svg>`;
         break;
-      
+
       case 'x':
       case 'twitter':
         title = 'X (Twitter)';
@@ -3767,15 +4188,21 @@ class VibeSurfUIManager {
           <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" fill="currentColor"/>
         </svg>`;
         break;
-      
-      
-      case 'reportbug':
-        title = 'Report Bug';
-        svg = `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path d="M20 8h-2.81c-.45-.78-1.07-1.45-1.82-1.96L17 4.41 15.59 3l-2.17 2.17C12.96 5.06 12.49 5 12 5c-.49 0-.96.06-1.42.17L8.41 3 7 4.41l1.62 1.63C7.88 6.55 7.26 7.22 6.81 8H4v2h2.09c-.05.33-.09.66-.09 1v1H4v2h2v1c0 .34.04.67.09 1H4v2h2.81c1.04 1.79 2.97 3 5.19 3s4.15-1.21 5.19-3H20v-2h-2.09c.05-.33.09-.66.09-1v-1h2v-2h-2v-1c0-.34-.04-.67-.09-1H20V8zm-6 8h-4v-2h4v2zm0-4h-4v-2h4v2z" fill="currentColor"/>
+
+
+      case 'wechat':
+        title = 'WeChat Community';
+        svg = `<svg width="16" height="16" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M664.250054 368.541681c10.015098 0 19.892049 0.732687 29.67281 1.795902-26.647917-122.810047-159.358451-214.077703-310.826188-214.077703-169.353083 0-308.085774 114.232694-308.085774 259.274068 0 83.708494 46.165436 152.460344 123.281791 205.78483l-30.80868 91.730191 107.688651-53.455469c38.55292 7.53665 69.220511 15.308661 107.688651 15.308661 9.66308 0 19.230982-0.470721 28.752858-1.225921-6.025227-20.36584-9.521991-41.723264-9.521991-63.862493C402.328693 476.632491 517.908058 368.541681 664.250054 368.541681zM498.62897 285.87389c23.200398 0 38.55292 15.120372 38.55292 38.008387 0 22.559721-15.35252 38.174146-38.55292 38.174146-23.058305 0-46.259753-15.61447-46.259753-38.174146C452.369217 300.994262 475.570665 285.87389 498.62897 285.87389zM283.016307 362.056337c-23.058305 0-46.402633-15.61447-46.402633-38.174146 0-22.888015 23.344328-38.008387 46.402633-38.008387 23.200398 0 38.55292 15.120372 38.55292 38.008387C321.569227 346.441867 306.216705 362.056337 283.016307 362.056337z" fill="currentColor"/>
+          <path d="M945.448458 606.151333c0-121.888048-123.281791-221.236753-261.633065-221.236753-146.341996 0-262.062451 99.348706-262.062451 221.236753 0 122.06508 115.720455 221.379753 262.062451 221.379753 30.66159 0 61.41637-7.670801 92.029061-15.35252l84.441181 46.117458-23.202447-76.487448C899.379213 735.776599 945.448458 674.90384 945.448458 606.151333zM598.803483 567.994716c-15.35252 0-30.80868-15.26411-30.80868-30.66159 0-15.35252 15.45616-30.80868 30.80868-30.80868 23.058305 0 38.410827 15.45616 38.410827 30.80868C637.214309 552.730606 621.861788 567.994716 598.803483 567.994716zM768.25071 567.994716c-15.35252 0-30.66159-15.26411-30.66159-30.66159 0-15.35252 15.308661-30.80868 30.66159-30.80868 23.200398 0 38.55292 15.45616 38.55292 30.80868C806.803630 552.730606 791.451108 567.994716 768.25071 567.994716z" fill="currentColor"/>
         </svg>`;
+
+        // For WeChat, prevent default link behavior
+        link.addEventListener('click', (e) => {
+          e.preventDefault();
+        });
         break;
-      
+
       default:
         console.warn(`[UIManager] Unknown social platform: ${platform}`);
         return null;
@@ -3784,6 +4211,14 @@ class VibeSurfUIManager {
     link.setAttribute('title', title);
     link.innerHTML = svg;
 
+    // Add QR code popup for WeChat after setting innerHTML
+    if (platform.toLowerCase() === 'wechat') {
+      const qrPopup = document.createElement('div');
+      qrPopup.className = 'wechat-qr-popup';
+      qrPopup.innerHTML = `<img src="${url}" alt="WeChat QR Code" />`;
+      link.appendChild(qrPopup);
+    }
+
     return link;
   }