agentgui 1.0.219 → 1.0.221

package/database.js

@@ -228,7 +228,8 @@ try {
     lastSyncedAt: 'INTEGER',
     workingDirectory: 'TEXT',
     claudeSessionId: 'TEXT',
-    isStreaming: 'INTEGER DEFAULT 0'
+    isStreaming: 'INTEGER DEFAULT 0',
+    model: 'TEXT'
   };
 
   let addedColumns = false;
@@ -270,19 +271,20 @@ function generateId(prefix) {
 
 export const queries = {
   _db: db,
-  createConversation(agentType, title = null, workingDirectory = null) {
+  createConversation(agentType, title = null, workingDirectory = null, model = null) {
     const id = generateId('conv');
     const now = Date.now();
     const stmt = prep(
-      `INSERT INTO conversations (id, agentId, agentType, title, created_at, updated_at, status, workingDirectory) VALUES (?, ?, ?, ?, ?, ?, ?, ?)`
+      `INSERT INTO conversations (id, agentId, agentType, title, created_at, updated_at, status, workingDirectory, model) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)`
     );
-    stmt.run(id, agentType, agentType, title, now, now, 'active', workingDirectory);
+    stmt.run(id, agentType, agentType, title, now, now, 'active', workingDirectory, model);
 
     return {
       id,
       agentType,
       title,
       workingDirectory,
+      model,
       created_at: now,
       updated_at: now,
       status: 'active'
@@ -301,7 +303,7 @@ export const queries = {
 
   getConversationsList() {
     const stmt = prep(
-      'SELECT id, title, agentType, created_at, updated_at, messageCount, workingDirectory, isStreaming FROM conversations WHERE status != ? ORDER BY updated_at DESC'
+      'SELECT id, title, agentType, created_at, updated_at, messageCount, workingDirectory, isStreaming, model FROM conversations WHERE status != ? ORDER BY updated_at DESC'
     );
     return stmt.all('deleted');
   },

package/lib/claude-runner.js

@@ -306,14 +306,16 @@ class AgentRunner {
         if (initialized && !sessionCreated) {
           sessionCreated = true;
 
+          const sessionParams = {
+            cwd: cwd,
+            mcpServers: []
+          };
+          if (config.model) sessionParams.model = config.model;
           const sessionRequest = {
             jsonrpc: '2.0',
             id: ++requestId,
             method: 'session/new',
-            params: {
-              cwd: cwd,
-              mcpServers: []
-            }
+            params: sessionParams
           };
           proc.stdin.write(JSON.stringify(sessionRequest) + '\n');
         } else if (!initialized) {
@@ -482,7 +484,8 @@ registry.register({
       outputFormat = 'stream-json',
       print = true,
       resumeSessionId = null,
-      systemPrompt = null
+      systemPrompt = null,
+      model = null
     } = config;
 
     const flags = [];
@@ -490,6 +493,7 @@ registry.register({
     if (verbose) flags.push('--verbose');
     flags.push(`--output-format=${outputFormat}`);
     flags.push('--dangerously-skip-permissions');
+    if (model) flags.push('--model', model);
     if (resumeSessionId) flags.push('--resume', resumeSessionId);
     if (systemPrompt) flags.push('--append-system-prompt', systemPrompt);
 
@@ -735,7 +739,11 @@ registry.register({
   protocol: 'acp',
   supportsStdin: false,
   supportedFeatures: ['streaming', 'resume', 'acp-protocol'],
-  buildArgs: () => ['--experimental-acp', '--yolo'],
+  buildArgs(prompt, config) {
+    const args = ['--experimental-acp', '--yolo'];
+    if (config?.model) args.push('--model', config.model);
+    return args;
+  },
   protocolHandler: acpProtocolHandler
 });
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agentgui",
-  "version": "1.0.219",
+  "version": "1.0.221",
   "description": "Multi-agent ACP client with real-time communication",
   "type": "module",
   "main": "server.js",

package/server.js

@@ -202,6 +202,44 @@ function discoverAgents() {
 
 const discoveredAgents = discoverAgents();
 
+const modelCache = new Map();
+
+async function getModelsForAgent(agentId) {
+  if (agentId === 'claude-code') {
+    return [
+      { id: '', label: 'Default' },
+      { id: 'sonnet', label: 'Sonnet' },
+      { id: 'opus', label: 'Opus' },
+      { id: 'haiku', label: 'Haiku' },
+      { id: 'claude-sonnet-4-5-20250929', label: 'Sonnet 4.5' },
+      { id: 'claude-opus-4-6', label: 'Opus 4.6' },
+      { id: 'claude-haiku-4-5-20251001', label: 'Haiku 4.5' }
+    ];
+  }
+  if (agentId === 'opencode') {
+    try {
+      const result = execSync('opencode models 2>/dev/null', { encoding: 'utf-8', timeout: 10000 });
+      const lines = result.split('\n').map(l => l.trim()).filter(Boolean);
+      const models = [{ id: '', label: 'Default' }];
+      for (const line of lines) {
+        models.push({ id: line, label: line });
+      }
+      return models;
+    } catch (_) {
+      return [{ id: '', label: 'Default' }];
+    }
+  }
+  if (agentId === 'gemini') {
+    return [
+      { id: '', label: 'Default' },
+      { id: 'gemini-2.5-pro', label: 'Gemini 2.5 Pro' },
+      { id: 'gemini-2.5-flash', label: 'Gemini 2.5 Flash' },
+      { id: 'gemini-2.0-flash', label: 'Gemini 2.0 Flash' }
+    ];
+  }
+  return [];
+}
+
 const GEMINI_SCOPES = [
   'https://www.googleapis.com/auth/cloud-platform',
   'https://www.googleapis.com/auth/userinfo.email',
@@ -722,8 +760,8 @@ const server = http.createServer(async (req, res) => {
 
     if (pathOnly === '/api/conversations' && req.method === 'POST') {
       const body = await parseBody(req);
-      const conversation = queries.createConversation(body.agentId, body.title, body.workingDirectory || null);
-      queries.createEvent('conversation.created', { agentId: body.agentId, workingDirectory: conversation.workingDirectory }, conversation.id);
+      const conversation = queries.createConversation(body.agentId, body.title, body.workingDirectory || null, body.model || null);
+      queries.createEvent('conversation.created', { agentId: body.agentId, workingDirectory: conversation.workingDirectory, model: conversation.model }, conversation.id);
       broadcastSync({ type: 'conversation_created', conversation });
             sendJSON(req, res, 201, { conversation });
       return;
@@ -782,6 +820,7 @@ const server = http.createServer(async (req, res) => {
         if (!conv) { sendJSON(req, res, 404, { error: 'Conversation not found' }); return; }
         const body = await parseBody(req);
         const agentId = body.agentId || conv.agentType || conv.agentId || 'claude-code';
+        const model = body.model || conv.model || null;
         const idempotencyKey = body.idempotencyKey || null;
         const message = queries.createMessage(conversationId, 'user', body.content, idempotencyKey);
         queries.createEvent('message.created', { role: 'user', messageId: message.id }, conversationId);
@@ -789,7 +828,7 @@ const server = http.createServer(async (req, res) => {
 
         if (activeExecutions.has(conversationId)) {
           if (!messageQueues.has(conversationId)) messageQueues.set(conversationId, []);
-          messageQueues.get(conversationId).push({ content: body.content, agentId, messageId: message.id });
+          messageQueues.get(conversationId).push({ content: body.content, agentId, model, messageId: message.id });
           const queueLength = messageQueues.get(conversationId).length;
           broadcastSync({ type: 'queue_status', conversationId, queueLength, messageId: message.id, timestamp: Date.now() });
           sendJSON(req, res, 200, { message, queued: true, queuePosition: queueLength, idempotencyKey });
@@ -813,7 +852,7 @@ const server = http.createServer(async (req, res) => {
 
         sendJSON(req, res, 201, { message, session, idempotencyKey });
 
-        processMessageWithStreaming(conversationId, message.id, session.id, body.content, agentId)
+        processMessageWithStreaming(conversationId, message.id, session.id, body.content, agentId, model)
           .catch(err => {
             console.error(`[messages] Uncaught error for conv ${conversationId}:`, err.message);
             debugLog(`[messages] Uncaught error: ${err.message}`);
@@ -831,6 +870,7 @@ const server = http.createServer(async (req, res) => {
 
       const prompt = body.content || body.message || '';
       const agentId = body.agentId || conv.agentType || conv.agentId || 'claude-code';
+      const model = body.model || conv.model || null;
 
       const userMessage = queries.createMessage(conversationId, 'user', prompt);
       queries.createEvent('message.created', { role: 'user', messageId: userMessage.id }, conversationId);
@@ -840,7 +880,7 @@ const server = http.createServer(async (req, res) => {
       if (activeExecutions.has(conversationId)) {
         debugLog(`[stream] Conversation ${conversationId} is busy, queuing message`);
         if (!messageQueues.has(conversationId)) messageQueues.set(conversationId, []);
-        messageQueues.get(conversationId).push({ content: prompt, agentId, messageId: userMessage.id });
+        messageQueues.get(conversationId).push({ content: prompt, agentId, model, messageId: userMessage.id });
 
         const queueLength = messageQueues.get(conversationId).length;
         broadcastSync({ type: 'queue_status', conversationId, queueLength, messageId: userMessage.id, timestamp: Date.now() });
@@ -866,7 +906,7 @@ const server = http.createServer(async (req, res) => {
 
       sendJSON(req, res, 200, { message: userMessage, session, streamId: session.id });
 
-      processMessageWithStreaming(conversationId, userMessage.id, session.id, prompt, agentId)
+      processMessageWithStreaming(conversationId, userMessage.id, session.id, prompt, agentId, model)
         .catch(err => debugLog(`[stream] Uncaught error: ${err.message}`));
       return;
     }
@@ -1127,6 +1167,24 @@ const server = http.createServer(async (req, res) => {
       return;
     }
 
+    const modelsMatch = pathOnly.match(/^\/api\/agents\/([^/]+)\/models$/);
+    if (modelsMatch && req.method === 'GET') {
+      const agentId = modelsMatch[1];
+      const cached = modelCache.get(agentId);
+      if (cached && (Date.now() - cached.ts) < 300000) {
+        sendJSON(req, res, 200, { models: cached.models });
+        return;
+      }
+      try {
+        const models = await getModelsForAgent(agentId);
+        modelCache.set(agentId, { models, ts: Date.now() });
+        sendJSON(req, res, 200, { models });
+      } catch (err) {
+        sendJSON(req, res, 200, { models: [] });
+      }
+      return;
+    }
+
     if (pathOnly === '/api/agents/auth-status' && req.method === 'GET') {
       const statuses = discoveredAgents.map(agent => {
         const status = { id: agent.id, name: agent.name, authenticated: false, detail: '' };
@@ -1438,11 +1496,6 @@ const server = http.createServer(async (req, res) => {
         }
 
         const speech = await getSpeech();
-        const status = speech.getStatus();
-        if (status.ttsError) {
-          sendJSON(req, res, 503, { error: status.ttsError, retryable: false });
-          return;
-        }
         const wavBuffer = await speech.synthesize(text, voiceId);
         res.writeHead(200, { 'Content-Type': 'audio/wav', 'Content-Length': wavBuffer.length });
         res.end(wavBuffer);
@@ -1465,11 +1518,6 @@ const server = http.createServer(async (req, res) => {
           return;
         }
         const speech = await getSpeech();
-        const status = speech.getStatus();
-        if (status.ttsError) {
-          sendJSON(req, res, 503, { error: status.ttsError, retryable: false });
-          return;
-        }
         res.writeHead(200, {
           'Content-Type': 'application/octet-stream',
           'Transfer-Encoding': 'chunked',
@@ -1717,7 +1765,7 @@ function createChunkBatcher() {
   return { add, drain };
 }
 
-async function processMessageWithStreaming(conversationId, messageId, sessionId, content, agentId) {
+async function processMessageWithStreaming(conversationId, messageId, sessionId, content, agentId, model) {
   const startTime = Date.now();
   
   const conv = queries.getConversation(conversationId);
@@ -1854,6 +1902,7 @@ async function processMessageWithStreaming(conversationId, messageId, sessionId,
       }
     };
 
+    const resolvedModel = model || conv?.model || null;
     const config = {
       verbose: true,
       outputFormat: 'stream-json',
@@ -1861,6 +1910,7 @@ async function processMessageWithStreaming(conversationId, messageId, sessionId,
       print: true,
       resumeSessionId,
       systemPrompt: SYSTEM_PROMPT,
+      model: resolvedModel || undefined,
       onEvent,
       onPid: (pid) => {
         const entry = activeExecutions.get(conversationId);
@@ -1962,7 +2012,7 @@ async function processMessageWithStreaming(conversationId, messageId, sessionId,
           conversationId,
           timestamp: Date.now()
         });
-        scheduleRetry(conversationId, messageId, content, agentId);
+        scheduleRetry(conversationId, messageId, content, agentId, model);
       }, cooldownMs);
       return;
     }
@@ -1993,16 +2043,16 @@ async function processMessageWithStreaming(conversationId, messageId, sessionId,
   }
 }
 
-function scheduleRetry(conversationId, messageId, content, agentId) {
+function scheduleRetry(conversationId, messageId, content, agentId, model) {
   debugLog(`[rate-limit] scheduleRetry called for conv ${conversationId}, messageId=${messageId}`);
-  
+
   if (!content) {
     const conv = queries.getConversation(conversationId);
     const lastMsg = queries.getLastUserMessage(conversationId);
     content = lastMsg?.content || 'continue';
     debugLog(`[rate-limit] Recovered content from last message: ${content?.substring?.(0, 50)}...`);
   }
-  
+
   const newSession = queries.createSession(conversationId);
   queries.createEvent('session.created', { messageId, sessionId: newSession.id, retryReason: 'rate_limit' }, conversationId, newSession.id);
 
@@ -2017,7 +2067,7 @@ function scheduleRetry(conversationId, messageId, content, agentId) {
   });
 
   debugLog(`[rate-limit] Calling processMessageWithStreaming for retry`);
-  processMessageWithStreaming(conversationId, messageId, newSession.id, content, agentId)
+  processMessageWithStreaming(conversationId, messageId, newSession.id, content, agentId, model)
     .catch(err => {
       debugLog(`[rate-limit] Retry failed: ${err.message}`);
       console.error(`[rate-limit] Retry error for conv ${conversationId}:`, err);
@@ -2052,7 +2102,7 @@ function drainMessageQueue(conversationId) {
     timestamp: Date.now()
   });
 
-  processMessageWithStreaming(conversationId, next.messageId, session.id, next.content, next.agentId)
+  processMessageWithStreaming(conversationId, next.messageId, session.id, next.content, next.agentId, next.model)
     .catch(err => debugLog(`[queue] Error processing queued message: ${err.message}`));
 }
 
@@ -2366,7 +2416,7 @@ async function resumeInterruptedStreams() {
         const messageId = lastMsg?.id || null;
         console.log(`[RESUME] Resuming conv ${conv.id} (claude session: ${conv.claudeSessionId})`);
 
-        processMessageWithStreaming(conv.id, messageId, session.id, promptText, conv.agentType)
+        processMessageWithStreaming(conv.id, messageId, session.id, promptText, conv.agentType, conv.model)
           .catch(err => debugLog(`[RESUME] Error resuming conv ${conv.id}: ${err.message}`));
 
         if (i < toResume.length - 1) {

package/static/index.html

@@ -816,6 +816,28 @@
       flex-shrink: 0;
     }
 
+    .agent-selector:disabled, .model-selector:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+      background-color: var(--color-bg-secondary);
+    }
+
+    .model-selector {
+      padding: 0.5rem;
+      border: none;
+      border-radius: 0.375rem;
+      background-color: var(--color-bg-secondary);
+      color: var(--color-text-primary);
+      font-size: 0.8rem;
+      cursor: pointer;
+      flex-shrink: 0;
+      max-width: 160px;
+    }
+
+    .model-selector:empty, .model-selector[data-empty="true"] {
+      display: none;
+    }
+
     .message-textarea {
       flex: 1;
       padding: 0.625rem 0.875rem;
@@ -1005,6 +1027,7 @@
       .messages-wrapper { padding: 0.375rem 0.5rem; }
       .input-section { padding: 0.5rem; padding-bottom: calc(0.5rem + env(safe-area-inset-bottom)); }
       .agent-selector { display: none; }
+      .model-selector { display: none; }
     }
 
     /* ===== SCROLLBAR STYLING ===== */
@@ -2456,6 +2479,7 @@
       <div class="input-section">
         <div class="input-wrapper">
           <select class="agent-selector" data-agent-selector title="Select agent"></select>
+          <select class="model-selector" data-model-selector title="Select model" data-empty="true"></select>
           <textarea
             class="message-textarea"
             data-message-input

package/static/js/client.js

@@ -42,9 +42,13 @@ class AgentGUIClient {
       statusIndicator: null,
       messageInput: null,
       sendButton: null,
-      agentSelector: null
+      agentSelector: null,
+      modelSelector: null
     };
 
+    this._agentLocked = false;
+    this._modelCache = new Map();
+
     this.chunkPollState = {
       isPolling: false,
       lastFetchTimestamp: 0,
@@ -322,6 +326,15 @@ class AgentGUIClient {
     this.ui.messageInput = document.querySelector('[data-message-input]');
     this.ui.sendButton = document.querySelector('[data-send-button]');
     this.ui.agentSelector = document.querySelector('[data-agent-selector]');
+    this.ui.modelSelector = document.querySelector('[data-model-selector]');
+
+    if (this.ui.agentSelector) {
+      this.ui.agentSelector.addEventListener('change', () => {
+        if (!this._agentLocked) {
+          this.loadModelsForAgent(this.ui.agentSelector.value);
+        }
+      });
+    }
 
     // Setup event listeners
     if (this.ui.sendButton) {
@@ -352,10 +365,15 @@ class AgentGUIClient {
     this.setupScrollTracking();
 
     window.addEventListener('create-new-conversation', (event) => {
+      this.unlockAgentAndModel();
       const detail = event.detail || {};
       this.createNewConversation(detail.workingDirectory, detail.title);
     });
 
+    window.addEventListener('preparing-new-conversation', () => {
+      this.unlockAgentAndModel();
+    });
+
     // Listen for conversation selection
     window.addEventListener('conversation-selected', (event) => {
       const conversationId = event.detail.conversationId;
@@ -479,7 +497,7 @@ class AgentGUIClient {
         outputEl.innerHTML = `
           <div class="conversation-header">
             <h2>${this.escapeHtml(conv?.title || 'Conversation')}</h2>
-            <p class="text-secondary">${conv?.agentType || 'unknown'} - ${new Date(conv?.created_at || Date.now()).toLocaleDateString()}${wdInfo}</p>
+            <p class="text-secondary">${conv?.agentType || 'unknown'}${conv?.model ? ' (' + this.escapeHtml(conv.model) + ')' : ''} - ${new Date(conv?.created_at || Date.now()).toLocaleDateString()}${wdInfo}</p>
           </div>
           <div class="conversation-messages"></div>
         `;
@@ -1098,7 +1116,9 @@ class AgentGUIClient {
 
   async startExecution() {
     const prompt = this.ui.messageInput?.value || '';
-    const agentId = this.ui.agentSelector?.value || 'claude-code';
+    const conv = this.state.currentConversation;
+    const agentId = conv?.agentType || this.ui.agentSelector?.value || 'claude-code';
+    const model = this.ui.modelSelector?.value || null;
 
     if (!prompt.trim()) {
       this.showError('Please enter a prompt');
@@ -1116,24 +1136,27 @@ class AgentGUIClient {
     this.disableControls();
 
     try {
-      if (this.state.currentConversation?.id) {
-        await this.streamToConversation(this.state.currentConversation.id, savedPrompt, agentId);
+      if (conv?.id) {
+        await this.streamToConversation(conv.id, savedPrompt, agentId, model);
         this._confirmOptimisticMessage(pendingId);
       } else {
+        const body = { agentId, title: savedPrompt.substring(0, 50) };
+        if (model) body.model = model;
         const response = await fetch(window.__BASE_URL + '/api/conversations', {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ agentId, title: savedPrompt.substring(0, 50) })
+          body: JSON.stringify(body)
         });
         const { conversation } = await response.json();
         this.state.currentConversation = conversation;
+        this.lockAgentAndModel(agentId, model);
 
         if (window.conversationManager) {
           window.conversationManager.loadConversations();
           window.conversationManager.select(conversation.id);
         }
 
-        await this.streamToConversation(conversation.id, savedPrompt, agentId);
+        await this.streamToConversation(conversation.id, savedPrompt, agentId, model);
         this._confirmOptimisticMessage(pendingId);
       }
     } catch (error) {
@@ -1361,7 +1384,7 @@ class AgentGUIClient {
     outputEl.innerHTML = `
       <div class="conversation-header">
         <h2>${this.escapeHtml(title)}</h2>
-        <p class="text-secondary">${conv?.agentType || 'unknown'} - ${conv ? new Date(conv.created_at).toLocaleDateString() : ''}${wdInfo}</p>
+        <p class="text-secondary">${conv?.agentType || 'unknown'}${conv?.model ? ' (' + this.escapeHtml(conv.model) + ')' : ''} - ${conv ? new Date(conv.created_at).toLocaleDateString() : ''}${wdInfo}</p>
       </div>
       <div class="conversation-messages">
         <div class="skeleton-loading">
@@ -1374,29 +1397,33 @@ class AgentGUIClient {
     `;
   }
 
-  async streamToConversation(conversationId, prompt, agentId) {
+  async streamToConversation(conversationId, prompt, agentId, model) {
     try {
       if (this.wsManager.isConnected) {
         this.wsManager.sendMessage({ type: 'subscribe', conversationId });
       }
 
+      const streamBody = { content: prompt, agentId };
+      if (model) streamBody.model = model;
       const response = await fetch(`${window.__BASE_URL}/api/conversations/${conversationId}/stream`, {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ content: prompt, agentId })
+        body: JSON.stringify(streamBody)
       });
 
       if (response.status === 404) {
         console.warn('Conversation not found, recreating:', conversationId);
         const conv = this.state.currentConversation;
+        const createBody = {
+          agentId,
+          title: conv?.title || prompt.substring(0, 50),
+          workingDirectory: conv?.workingDirectory || null
+        };
+        if (model) createBody.model = model;
         const createResp = await fetch(window.__BASE_URL + '/api/conversations', {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({
-            agentId,
-            title: conv?.title || prompt.substring(0, 50),
-            workingDirectory: conv?.workingDirectory || null
-          })
+          body: JSON.stringify(createBody)
         });
         if (!createResp.ok) throw new Error(`Failed to recreate conversation: HTTP ${createResp.status}`);
         const { conversation: newConv } = await createResp.json();
@@ -1406,7 +1433,7 @@ class AgentGUIClient {
           window.conversationManager.select(newConv.id);
         }
         this.updateUrlForConversation(newConv.id);
-        return this.streamToConversation(newConv.id, prompt, agentId);
+        return this.streamToConversation(newConv.id, prompt, agentId, model);
       }
 
       if (!response.ok) throw new Error(`HTTP ${response.status}`);
@@ -1698,6 +1725,9 @@ class AgentGUIClient {
         }
 
         window.dispatchEvent(new CustomEvent('agents-loaded', { detail: { agents } }));
+        if (agents.length > 0 && !this._agentLocked) {
+          this.loadModelsForAgent(agents[0].id);
+        }
         return agents;
       } catch (error) {
         console.error('Failed to load agents:', error);
@@ -1706,6 +1736,61 @@ class AgentGUIClient {
     });
   }
 
+  async loadModelsForAgent(agentId) {
+    if (!agentId || !this.ui.modelSelector) return;
+    const cached = this._modelCache.get(agentId);
+    if (cached) {
+      this._populateModelSelector(cached);
+      return;
+    }
+    try {
+      const response = await fetch(window.__BASE_URL + `/api/agents/${agentId}/models`);
+      const { models } = await response.json();
+      this._modelCache.set(agentId, models || []);
+      this._populateModelSelector(models || []);
+    } catch (error) {
+      console.error('Failed to load models:', error);
+      this._populateModelSelector([]);
+    }
+  }
+
+  _populateModelSelector(models) {
+    if (!this.ui.modelSelector) return;
+    if (!models || models.length === 0) {
+      this.ui.modelSelector.innerHTML = '';
+      this.ui.modelSelector.setAttribute('data-empty', 'true');
+      return;
+    }
+    this.ui.modelSelector.removeAttribute('data-empty');
+    this.ui.modelSelector.innerHTML = models
+      .map(m => `<option value="${m.id}">${this.escapeHtml(m.label)}</option>`)
+      .join('');
+  }
+
+  lockAgentAndModel(agentId, model) {
+    this._agentLocked = true;
+    if (this.ui.agentSelector) {
+      this.ui.agentSelector.value = agentId;
+      this.ui.agentSelector.disabled = true;
+    }
+    this.loadModelsForAgent(agentId).then(() => {
+      if (this.ui.modelSelector) {
+        if (model) this.ui.modelSelector.value = model;
+        this.ui.modelSelector.disabled = true;
+      }
+    });
+  }
+
+  unlockAgentAndModel() {
+    this._agentLocked = false;
+    if (this.ui.agentSelector) {
+      this.ui.agentSelector.disabled = false;
+    }
+    if (this.ui.modelSelector) {
+      this.ui.modelSelector.disabled = false;
+    }
+  }
+
   /**
    * Load conversations
    */
@@ -1840,9 +1925,11 @@ class AgentGUIClient {
   async createNewConversation(workingDirectory, title) {
     try {
       const agentId = this.ui.agentSelector?.value || 'claude-code';
+      const model = this.ui.modelSelector?.value || null;
       const convTitle = title || 'New Conversation';
       const body = { agentId, title: convTitle };
       if (workingDirectory) body.workingDirectory = workingDirectory;
+      if (model) body.model = model;
 
       const response = await fetch(window.__BASE_URL + '/api/conversations', {
         method: 'POST',
@@ -1855,6 +1942,7 @@ class AgentGUIClient {
       }
 
       const { conversation } = await response.json();
+      this.lockAgentAndModel(agentId, model);
 
       await this.loadConversations();
 
@@ -1930,6 +2018,7 @@ class AgentGUIClient {
             outputEl.appendChild(cached.dom.firstChild);
           }
           this.state.currentConversation = cached.conversation;
+          this.lockAgentAndModel(cached.conversation.agentType || 'claude-code', cached.conversation.model || null);
           this.conversationCache.delete(conversationId);
           this.restoreScrollPosition(conversationId);
           this.enableControls();
@@ -1957,6 +2046,7 @@ class AgentGUIClient {
       const { conversation, isActivelyStreaming, latestSession, chunks: rawChunks, totalChunks, messages: allMessages } = await resp.json();
 
       this.state.currentConversation = conversation;
+      this.lockAgentAndModel(conversation.agentType || 'claude-code', conversation.model || null);
 
       const chunks = (rawChunks || []).map(chunk => ({
         ...chunk,
@@ -1975,7 +2065,7 @@ class AgentGUIClient {
         outputEl.innerHTML = `
           <div class="conversation-header">
             <h2>${this.escapeHtml(conversation.title || 'Conversation')}</h2>
-            <p class="text-secondary">${conversation.agentType || 'unknown'} - ${new Date(conversation.created_at).toLocaleDateString()}${wdInfo}</p>
+            <p class="text-secondary">${conversation.agentType || 'unknown'}${conversation.model ? ' (' + this.escapeHtml(conversation.model) + ')' : ''} - ${new Date(conversation.created_at).toLocaleDateString()}${wdInfo}</p>
           </div>
           <div class="conversation-messages"></div>
         `;

package/static/js/conversations.js

@@ -93,6 +93,7 @@ class ConversationManager {
   }
 
   async openFolderBrowser() {
+    window.dispatchEvent(new CustomEvent('preparing-new-conversation'));
     if (!this.folderBrowser.modal) {
       this.createNew();
       return;
@@ -375,8 +376,9 @@ class ConversationManager {
     const title = conv.title || `Conversation ${conv.id.slice(0, 8)}`;
     const timestamp = conv.created_at ? new Date(conv.created_at).toLocaleDateString() : 'Unknown';
     const agent = conv.agentType || 'unknown';
+    const modelLabel = conv.model ? ` (${conv.model})` : '';
     const wd = conv.workingDirectory ? conv.workingDirectory.split('/').pop() : '';
-    const metaParts = [agent, timestamp];
+    const metaParts = [agent + modelLabel, timestamp];
     if (wd) metaParts.push(wd);
 
     const titleEl = el.querySelector('.conversation-item-title');
@@ -402,8 +404,9 @@ class ConversationManager {
     const title = conv.title || `Conversation ${conv.id.slice(0, 8)}`;
     const timestamp = conv.created_at ? new Date(conv.created_at).toLocaleDateString() : 'Unknown';
     const agent = conv.agentType || 'unknown';
+    const modelLabel = conv.model ? ` (${conv.model})` : '';
     const wd = conv.workingDirectory ? conv.workingDirectory.split('/').pop() : '';
-    const metaParts = [agent, timestamp];
+    const metaParts = [agent + modelLabel, timestamp];
     if (wd) metaParts.push(wd);
 
     const streamingBadge = isStreaming
@@ -466,6 +469,7 @@ class ConversationManager {
   }
 
   createNew() {
+    window.dispatchEvent(new CustomEvent('preparing-new-conversation'));
     window.dispatchEvent(new CustomEvent('create-new-conversation'));
   }