donobu 2.21.0 → 2.22.0

package/dist/assets/control-panel.js

@@ -10,6 +10,15 @@
     });
   }
 
+  if (!window.__donobu.userMessage) {
+    Object.defineProperty(window.__donobu, 'userMessage', {
+      value: null,
+      enumerable: false,
+      writable: true,
+      configurable: false,
+    });
+  }
+
   if (!window.__donobu.controlPanelRegistered) {
     Object.defineProperty(window.__donobu, 'controlPanelRegistered', {
       value: true,
@@ -79,104 +88,142 @@
     // Global styles
     const styleEl = document.createElement('style');
     styleEl.textContent = `
-      :host {
-        all: initial;
-        position: fixed;
-        top: 150px;
-        right: 20px;
-        z-index: 2147483647;
-        width: 300px;
-      }
-
-      #panel-content,
-      #panel-content * {
-        box-sizing: border-box;
-        margin: 0;
-        padding: 0;
-        font-family: Helvetica, Arial, sans-serif;
-        font-size: 14px;
-        color: #fff !important;
-      }
-
-      #donobu-control-panel-title-text {
-        font-weight: 600 !important;
-        margin-left: 10px;
-      }
-
-      #panel-content input[type="text"] {
-        border: 1px solid #ddd !important;
-        background-color: #fff !important;
-        color: #000 !important;
-      }
-
-      #donobu-play-icon,
-      #donobu-pause-icon,
-      #donobu-end-icon {
-        fill: none !important;
-        stroke: currentColor !important;
-        stroke-width: 2 !important;
-        stroke-linecap: round !important;
-        stroke-linejoin: round !important;
-      }
+:host {
+  all: initial;
+  position: fixed;
+  top: 150px;
+  right: 20px;
+  z-index: 2147483647;
+  width: 300px;
+}
+
+#panel-content,
+#panel-content * {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  font-family: Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  color: #fff !important;
+}
+
+#donobu-control-panel-title-text {
+  font-weight: 600 !important;
+  margin-left: 10px;
+}
+
+#panel-content input[type="text"] {
+  border: 1px solid #ddd !important;
+  background-color: #fff !important;
+  color: #000 !important;
+}
+
+#donobu-play-icon,
+#donobu-pause-icon,
+#donobu-end-icon {
+  fill: none !important;
+  stroke: currentColor !important;
+  stroke-width: 2 !important;
+  stroke-linecap: round !important;
+  stroke-linejoin: round !important;
+}
+
+#panel-content {
+  background-color: rgba(6,8,7,0.9);
+  border: 3px solid rgba(251,188,5, 0.9);
+  border-radius: 8px;
+  box-shadow: 0 4px 8px rgba(0,0,0,0.8);
+  cursor: move;
+  width: 100%;
+  overflow: hidden;
+  /* Add smooth transition for height changes */
+  transition: all 0.3s ease-in-out;
+}
+
+.donobu-hidden {
+  opacity: 0 !important;
+  pointer-events: none !important;
+}
+
+/* Enhanced expandable content with smooth animations */
+#donobu-control-panel-expandable-content {
+  padding: 0 15px; /* Remove top/bottom padding initially */
+  max-height: 0;
+  overflow: hidden;
+  opacity: 0;
+  /* Smooth transitions for max-height, opacity, and padding */
+  transition: max-height 0.3s ease-in-out,
+              opacity 0.3s ease-in-out,
+              padding 0.3s ease-in-out;
+}
+
+/* When expanded */
+#donobu-control-panel-expandable-content.expanded {
+  max-height: 300px; /* Adjust based on your content */
+  opacity: 1;
+  padding: 15px; /* Full padding when expanded */
+}
+
+.navbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 15px;
+  font-weight: 600;
+  background-color: rgba(6,8,7,0.9);
+  border-bottom: 1px solid rgba(251,188,5, 0.5);
+}
+
+.icon-btn {
+  margin-right: 8px;
+  display: flex;
+  cursor: pointer;
+  opacity: 0.5;
+  transition: opacity 0.2s ease-in-out;
+}
+
+#panel-content textarea {
+  border: 1px solid #ddd !important;
+  background-color: #fff !important;
+  color: #000 !important;
+}
+
+#panel-content textarea::placeholder {
+  color: #666 !important;
+  opacity: 1 !important;
+}
+
+.icon-container {
+  display: flex;
+  align-items: center;
+  margin-right: 5px;
+}
+
+/* Smooth transition for user message section */
+#donobu-user-message-section {
+  margin-bottom: 10px;
+  opacity: 0;
+  transform: translateY(-10px);
+  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
+}
+
+#donobu-user-message-section.visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+/* Enhanced textarea with smooth focus transitions */
+#donobu-user-message-input {
+  transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+}
+
+#donobu-user-message-input:focus {
+  border-color: rgba(251,188,5, 0.8) !important;
+  box-shadow: 0 0 0 2px rgba(251,188,5, 0.2) !important;
+  outline: none !important;
+}
+`;
 
-      #donobu-control-panel-display-area {
-        color: #fff !important;
-        margin-top: 10px;
-      }
-
-      #panel-content {
-        background-color: rgba(6,8,7,0.9);
-        border: 3px solid rgba(251,188,5, 0.9);
-        border-radius: 8px;
-        box-shadow: 0 4px 8px rgba(0,0,0,0.8);
-        transition: height 0.3s ease;
-        cursor: move;
-        width: 100%;
-        overflow: hidden;
-      }
-      .donobu-hidden {
-        opacity: 0 !important;
-        pointer-events: none !important;
-      }
-      #donobu-control-panel-expandable-content {
-        display: none;
-        padding: 15px;
-        max-height: 300px;
-        overflow-y: auto;
-      }
-
-      .navbar {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        padding: 15px;
-        font-weight: 600;
-        background-color: rgba(6,8,7,0.9);
-        border-bottom: 1px solid rgba(251,188,5, 0.5);
-      }
-
-      .icon-btn {
-        margin-right: 8px;
-        display: flex;
-        cursor: pointer;
-        opacity: 0.5;
-        transition: opacity 0.2s ease-in-out;
-      }
-
-      #donobu-instructions-input {
-        width: 100%;
-        margin-bottom: 10px;
-        padding: 8px;
-        border: 1px solid #ddd;
-        border-radius: 4px;
-      }
-
-      .icon-container {
-        display: flex;
-        align-items: center;
-        margin-right: 5px;
-      }
-    `;
     shadow.appendChild(styleEl);
 
     // Main panel container
@@ -270,15 +317,28 @@
     // Expandable content
     const expandableContent = document.createElement('div');
     expandableContent.id = 'donobu-control-panel-expandable-content';
-    const instructionsInput = document.createElement('input');
-    instructionsInput.type = 'text';
-    instructionsInput.id = 'donobu-instructions-input';
-    instructionsInput.placeholder = 'Additional instructions...';
-    const displayArea = document.createElement('div');
-    displayArea.id = 'donobu-control-panel-display-area';
-    displayArea.textContent = 'Popup: Monitoring...';
-    expandableContent.appendChild(instructionsInput);
-    expandableContent.appendChild(displayArea);
+
+    // User message input section (initially hidden)
+    const userMessageSection = document.createElement('div');
+    userMessageSection.id = 'donobu-user-message-section';
+    userMessageSection.style.display = 'none';
+    userMessageSection.style.marginBottom = '10px';
+
+    const userMessageInput = document.createElement('textarea');
+    userMessageInput.id = 'donobu-user-message-input';
+    userMessageInput.placeholder =
+      'Additional instructions...\n(Press Enter or Resume to submit)';
+    userMessageInput.style.width = '100%';
+    userMessageInput.style.height = '60px';
+    userMessageInput.style.padding = '8px';
+    userMessageInput.style.border = '1px solid #ddd';
+    userMessageInput.style.borderRadius = '4px';
+    userMessageInput.style.resize = 'vertical';
+    userMessageInput.style.fontFamily = 'inherit';
+    userMessageInput.style.fontSize = '12px';
+
+    userMessageSection.appendChild(userMessageInput);
+    expandableContent.appendChild(userMessageSection);
 
     // Attach everything
     panelContent.appendChild(navbar);
@@ -297,12 +357,84 @@
       btn.style.cursor = active ? 'pointer' : 'default';
     }
 
+    // Helper function to handle resume logic (shared by play button and Enter key)
+    function handleResume() {
+      if (hostEl.donobuFlowState === 'PAUSED' && !isTransitioningToEnd) {
+        // Capture the user message if present
+        const userMessageInput = shadow.getElementById(
+          'donobu-user-message-input',
+        );
+        const userMessage = userMessageInput
+          ? userMessageInput.value.trim()
+          : '';
+        hostEl.donobuFlowState = 'RESUMING';
+        isTransitioningToPause = false;
+        titleText.textContent = 'Resuming...';
+        window.__donobu.nextState = 'RESUMING';
+        window.__donobu.userMessage = userMessage || null;
+        // Clear the input after capturing
+        if (userMessageInput) {
+          userMessageInput.value = '';
+        }
+
+        updateButtonStates();
+        return true; // Indicate that resume was handled
+      }
+      return false; // Indicate that resume was not applicable
+    }
+
     function updateButtonStates() {
       if (!document.contains(hostEl)) {
         document.body.appendChild(hostEl);
       }
 
       const currentState = hostEl.donobuFlowState;
+      const runMode = hostEl.donobuRunMode || 'AUTONOMOUS';
+      const userMessageSection = shadow.getElementById(
+        'donobu-user-message-section',
+      );
+
+      // Show user input if:
+      // 1. Currently paused and in autonomous mode, OR
+      // 2. Transitioning to pause (eager expansion)
+      const shouldShowUserInput =
+        (currentState === 'PAUSED' && runMode === 'AUTONOMOUS') ||
+        isTransitioningToPause;
+
+      if (userMessageSection) {
+        // Smooth show/hide user input section
+        if (shouldShowUserInput) {
+          // Show and expand the panel
+          expandableContent.classList.add('expanded');
+          // Small delay to ensure the expandable content animation starts first
+          setTimeout(() => {
+            userMessageSection.style.display = 'block';
+            // Trigger reflow, then add visible class for smooth transition
+            userMessageSection.offsetHeight;
+            userMessageSection.classList.add('visible');
+            // Auto-focus the textarea when it becomes visible and we're actually paused
+            // (not just transitioning)
+            if (currentState === 'PAUSED') {
+              const textarea = shadow.getElementById(
+                'donobu-user-message-input',
+              );
+              if (textarea) {
+                textarea.focus();
+              }
+            }
+          }, 100);
+        } else {
+          // Hide user input section first
+          userMessageSection.classList.remove('visible');
+
+          // After the user section animation, collapse the panel
+          setTimeout(() => {
+            userMessageSection.style.display = 'none';
+            expandableContent.classList.remove('expanded');
+          }, 300); // Match the CSS transition duration
+        }
+      }
+
       // This block handles the visual state while waiting for the backend.
       // We check if the final state has arrived. If it has NOT, we show the
       // "transitioning" UI and then `return` to wait for the next update.
@@ -389,13 +521,7 @@
     // --- Button event listeners ---
 
     playButton.addEventListener('click', () => {
-      if (hostEl.donobuFlowState === 'PAUSED' && !isTransitioningToEnd) {
-        hostEl.donobuFlowState = 'RESUMING';
-        isTransitioningToPause = false;
-        titleText.textContent = 'Resuming...';
-        window.__donobu.nextState = 'RESUMING';
-        updateButtonStates();
-      }
+      handleResume();
     });
 
     // PAUSE button: signals user wants to pause
@@ -404,16 +530,10 @@
       const isPauseActive = pauseButton.style.opacity === '1';
       if (isPauseActive && !isTransitioningToPause && !isTransitioningToEnd) {
         isTransitioningToPause = true;
-
-        // Grab the current action's text BEFORE overwriting it.
-        const currentActionText = titleText.textContent;
-
         // Provide immediate, informative feedback to the user.
-        titleText.textContent = `Pause pending (after '${currentActionText}')`;
-
+        titleText.textContent = `Pausing...`;
         // Expose next state so external script can pick it up
         window.__donobu.nextState = 'PAUSED';
-
         // Manually update button states for immediate feedback
         updateButtonStates();
       }
@@ -424,18 +544,27 @@
       const isEndActive = endButton.style.opacity === '1';
       if (isEndActive && !isTransitioningToEnd) {
         isTransitioningToEnd = true;
-
-        const currentActionText = titleText.textContent;
-        titleText.textContent = `Quit pending (after '${currentActionText}')`;
-
+        titleText.textContent = `Quitting...`;
         // Expose next state
         window.__donobu.nextState = 'SUCCESS';
-
         // Manually update button states for immediate feedback
         updateButtonStates();
       }
     });
 
+    // Add Enter key listener to the textarea
+    userMessageInput.addEventListener('keydown', (e) => {
+      // Handle Enter key (but not Shift+Enter, which should create new lines)
+      if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault(); // Prevent default textarea behavior
+
+        // Only trigger resume if we're in a paused state
+        if (handleResume()) {
+          // Resume was successful, the handleResume function took care of everything
+        }
+      }
+    });
+
     // --- Drag-and-drop logic ---
     let isDragging = false;
     let offsetX = 0;

package/dist/assets/generated/version

@@ -1 +1 @@
-1243
+1248