Add tab instructions modal for permission prompts

public/index.html

@@ -307,6 +307,76 @@
       z-index: 1000;
     }
 
+    .modal-overlay {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: rgba(0, 0, 0, 0.7);
+      display: none;
+      align-items: center;
+      justify-content: center;
+      z-index: 2000;
+      padding: 16px;
+    }
+
+    .modal-overlay.active {
+      display: flex;
+    }
+
+    .modal {
+      background: #2a2a2a;
+      border-radius: 8px;
+      width: 100%;
+      max-width: 500px;
+      max-height: 90vh;
+      overflow-y: auto;
+    }
+
+    .modal-header {
+      padding: 16px;
+      border-bottom: 1px solid #3a3a3a;
+      font-size: 18px;
+      font-weight: 600;
+    }
+
+    .modal-body {
+      padding: 16px;
+    }
+
+    .modal-description {
+      color: #888;
+      font-size: 14px;
+      margin-bottom: 16px;
+      line-height: 1.5;
+    }
+
+    .modal-textarea {
+      width: 100%;
+      min-height: 120px;
+      padding: 12px;
+      border: 1px solid #3a3a3a;
+      border-radius: 6px;
+      background: #1a1a1a;
+      color: #e0e0e0;
+      font-size: 14px;
+      font-family: inherit;
+      resize: vertical;
+    }
+
+    .modal-textarea:focus {
+      outline: none;
+      border-color: #ff9800;
+    }
+
+    .modal-actions {
+      display: flex;
+      gap: 8px;
+      padding: 16px;
+      border-top: 1px solid #3a3a3a;
+    }
+
     .empty-state {
       padding: 32px 16px;
       text-align: center;
@@ -357,6 +427,21 @@
       .prompt-tool-input {
         color: #666;
       }
+
+      .modal {
+        background: white;
+      }
+
+      .modal-header,
+      .modal-actions {
+        border-color: #e0e0e0;
+      }
+
+      .modal-textarea {
+        background: #f5f5f5;
+        border-color: #e0e0e0;
+        color: #1a1a1a;
+      }
     }
   </style>
 </head>
@@ -385,17 +470,39 @@
     </div>
   </div>
 
+  <div class="modal-overlay" id="instructionsModal" onclick="handleModalOverlayClick(event)">
+    <div class="modal" onclick="event.stopPropagation()">
+      <div class="modal-header">Add Instructions</div>
+      <div class="modal-body">
+        <div class="modal-description">
+          Your instructions will be sent with the approval.
+        </div>
+        <textarea
+          class="modal-textarea"
+          id="instructionsTextarea"
+          placeholder="Enter your instructions..."></textarea>
+      </div>
+      <div class="modal-actions">
+        <button class="btn btn-secondary" onclick="closeInstructionsModal()">Cancel</button>
+        <button class="btn btn-submit" onclick="submitInstructions()">Submit</button>
+      </div>
+    </div>
+  </div>
+
   <script>
     const state = {
       sessions: new Map(),
       prompts: new Map(),
       eventSource: null,
       reconnectTimeout: null,
+      instructionsModalPromptId: null,
     };
 
     const $status = document.getElementById('status');
     const $sessions = document.getElementById('sessions');
     const $prompts = document.getElementById('prompts');
+    const $instructionsModal = document.getElementById('instructionsModal');
+    const $instructionsTextarea = document.getElementById('instructionsTextarea');
 
     function setStatus(connected) {
       if (connected) {
@@ -613,7 +720,7 @@
           </div>
           <div class="prompt-actions">
             <button class="btn btn-submit" onclick="submitRichPrompt('${p.id}')">Submit</button>
-            ${allowsTabInstructions ? '<button class="btn btn-secondary" disabled data-tooltip="Coming soon">Add instructions</button>' : ''}
+            ${allowsTabInstructions ? `<button class="btn btn-secondary" onclick="openInstructionsModal('${p.id}')">Add instructions</button>` : ''}
           </div>
         </div>
       `;
@@ -813,6 +920,75 @@
       }
     };
 
+    window.openInstructionsModal = (promptId) => {
+      state.instructionsModalPromptId = Number(promptId);
+      $instructionsTextarea.value = '';
+      $instructionsModal.classList.add('active');
+      $instructionsTextarea.focus();
+    };
+
+    window.closeInstructionsModal = () => {
+      $instructionsModal.classList.remove('active');
+      state.instructionsModalPromptId = null;
+      $instructionsTextarea.value = '';
+    };
+
+    window.handleModalOverlayClick = (event) => {
+      if (event.target === $instructionsModal) {
+        closeInstructionsModal();
+      }
+    };
+
+    window.submitInstructions = async () => {
+      const promptId = state.instructionsModalPromptId;
+      if (!promptId) {
+        console.error('No prompt ID for instructions');
+        return;
+      }
+
+      const instruction = $instructionsTextarea.value.trim();
+      if (!instruction) {
+        console.error('Please enter instructions');
+        return;
+      }
+
+      const prompt = state.prompts.get(promptId);
+      if (!prompt || !prompt.json) {
+        console.error('Invalid prompt');
+        return;
+      }
+
+      // Get selected option
+      const selected = document.querySelector(`input[name="prompt-${promptId}"]:checked`);
+      if (!selected) {
+        console.error('No option selected');
+        return;
+      }
+
+      const response = {
+        type: 'tab_instructions',
+        selected_option: parseInt(selected.value, 10),
+        instruction: instruction,
+      };
+
+      try {
+        const res = await fetch(`/api/prompts/${promptId}/answer`, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify(response),
+        });
+        if (!res.ok) {
+          console.error('Failed to submit instructions:', await res.text());
+        } else {
+          closeInstructionsModal();
+        }
+      } catch (error) {
+        console.error('Error submitting instructions:', error);
+      }
+    };
+
     function escapeHtml(text) {
       const div = document.createElement('div');
       div.textContent = text;