Add model selector to plan messages proceed button

chat/public/builder.js

@@ -1895,6 +1895,85 @@ function hideLoadingIndicator() {
 }
 
 // Expose for builder.html
+
+// Helper function to create inline model selector for plan messages
+function createInlineModelSelector() {
+  const container = document.createElement('div');
+  container.className = 'inline-model-selector';
+  container.style.cssText = 'display: flex; flex-direction: column; gap: 8px;';
+
+  // Label
+  const label = document.createElement('label');
+  label.textContent = 'Select Model for Build:';
+  label.style.cssText = 'font-weight: 600; font-size: 13px; color: var(--ink);';
+
+  // Create a select element (simple and reliable)
+  const select = document.createElement('select');
+  select.className = 'inline-model-select';
+  select.style.cssText = `
+    padding: 10px 12px;
+    border: 1px solid var(--border);
+    border-radius: 10px;
+    background: #fff;
+    font-weight: 600;
+    color: var(--ink);
+    font-size: 14px;
+    cursor: pointer;
+    width: 100%;
+    appearance: none;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 12px center;
+    background-size: 14px;
+    padding-right: 40px;
+  `;
+
+  // Populate with available models
+  if (state.models && state.models.length > 0) {
+    state.models.forEach(model => {
+      const option = document.createElement('option');
+      option.value = model.id || model.name || model;
+      option.textContent = model.label || model.name || model.id || model;
+      if (model.multiplier && model.multiplier !== 1) {
+        option.textContent += ` (${model.multiplier}x)`;
+      }
+      select.appendChild(option);
+    });
+
+    // Set current selection
+    const currentSelection = state.selectedModelId || el.modelSelect?.value;
+    if (currentSelection) {
+      select.value = currentSelection;
+    }
+  } else {
+    const option = document.createElement('option');
+    option.value = '';
+    option.textContent = 'No models available';
+    option.disabled = true;
+    select.appendChild(option);
+  }
+
+  // Handle selection change
+  select.addEventListener('change', (e) => {
+    const selectedModel = e.target.value;
+    console.log('[Inline Model Selector] Model selected:', selectedModel);
+    // Update state
+    state.selectedModelId = selectedModel;
+    // Also update the main model selector if it exists
+    if (el.modelSelect) {
+      el.modelSelect.value = selectedModel;
+      updateModelSelectDisplay(selectedModel);
+    }
+    // Mark that user changed model (prevent server from overwriting)
+    markUserModelChange();
+  });
+
+  container.appendChild(label);
+  container.appendChild(select);
+
+  return container;
+}
+
 window.hideLoadingIndicator = hideLoadingIndicator;
 
 function renderMessages(session) {
@@ -2093,13 +2172,24 @@ function renderMessages(session) {
       const needsClarification = clarificationPatterns.some(pattern => pattern.test(replyContent));
 
       if (isOpenRouterMessage && hasReply && (isPlanPhase || isBuildPhase) && !needsClarification) {
+        // Create a container for model selector and proceed button
+        const buildActionsContainer = document.createElement('div');
+        buildActionsContainer.className = 'build-actions-container';
+        buildActionsContainer.style.cssText = 'display: flex; flex-direction: column; gap: 12px; margin-top: 16px;';
+
+        // Create inline model selector for plan messages
+        const inlineModelSelector = createInlineModelSelector();
+        buildActionsContainer.appendChild(inlineModelSelector);
+
+        // Create proceed button
         const proceedBtn = document.createElement('button');
         proceedBtn.className = 'primary';
-        proceedBtn.style.marginTop = '12px';
         proceedBtn.style.width = '100%';
         proceedBtn.textContent = 'Proceed with Build';
         proceedBtn.onclick = () => proceedWithBuild(replyContent);
-        assistantBody.appendChild(proceedBtn);
+        buildActionsContainer.appendChild(proceedBtn);
+
+        assistantBody.appendChild(buildActionsContainer);
       }
 
       // Add Download ZIP button for OpenCode messages that are finished and are the latest message