Fix session model detection to use actual session model instead of default preference

Author: Chris Scott

frontend/src/components/message/PromptInput.tsx

@@ -11,6 +11,7 @@ import { ChevronDown } from 'lucide-react'
 import { CommandSuggestions } from '@/components/command/CommandSuggestions'
 import { FileSuggestions } from './FileSuggestions'
 import { detectMentionTrigger, parsePromptToParts, getFilename } from '@/lib/promptParser'
+import { getSessionModel } from '@/lib/model'
 import { getModel, formatModelName } from '@/api/providers'
 import type { components } from '@/api/opencode-types'
 import type { MessageWithParts, FileInfo } from '@/api/types'
@@ -365,11 +366,7 @@ export function PromptInput({
   const modeColor = currentMode === 'plan' ? 'text-yellow-600 dark:text-yellow-500' : 'text-green-600 dark:text-green-500'
   const modeBg = currentMode === 'plan' ? 'bg-yellow-500/10 border-yellow-500/30' : 'bg-green-500/10 border-green-500/30'
 
-  const lastAssistantMessage = messages?.filter(msg => msg.info.role === 'assistant').pop()
-  const sessionModel = lastAssistantMessage?.info.role === 'assistant' 
-    ? `${lastAssistantMessage.info.providerID}/${lastAssistantMessage.info.modelID}`
-    : null
-  const currentModel = sessionModel || config?.model || ''
+  const currentModel = getSessionModel(messages, config?.model) || ''
 
   useEffect(() => {
     const loadModelName = async () => {

frontend/src/components/model/ModelSelectDialog.tsx

@@ -25,12 +25,14 @@ interface ModelSelectDialogProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
   opcodeUrl?: string | null;
+  currentSessionModel?: string | null;
 }
 
 export function ModelSelectDialog({
   open,
   onOpenChange,
   opcodeUrl,
+  currentSessionModel,
 }: ModelSelectDialogProps) {
   const [searchQuery, setSearchQuery] = useState("");
   const [selectedProvider, setSelectedProvider] = useState<string>("");
@@ -39,7 +41,7 @@ export function ModelSelectDialog({
   const client = useOpenCodeClient(opcodeUrl);
   const { sessionID } = useParams<{ sessionID: string }>();
 
-  const currentModel = preferences?.defaultModel || "";
+  const currentModel = currentSessionModel || preferences?.defaultModel || "";
 
   const { data: providers = [], isLoading: loading } = useQuery({
     queryKey: ["providers-with-models"],
@@ -51,6 +53,7 @@ export function ModelSelectDialog({
     if (currentModel && providers.length > 0) {
       const [providerId] = currentModel.split("/");
       setSelectedProvider(providerId);
+      setViewMode('models');
     }
   }, [currentModel, providers]);
 

frontend/src/components/session/ContextUsageIndicator.tsx

@@ -1,6 +1,5 @@
 import { useContextUsage } from '@/hooks/useContextUsage'
 import { getModel, formatModelName } from '@/api/providers'
-import { useSettings } from '@/hooks/useSettings'
 import { useState, useEffect } from 'react'
 
 interface ContextUsageIndicatorProps {
@@ -11,36 +10,33 @@ interface ContextUsageIndicatorProps {
 
 export function ContextUsageIndicator({ opcodeUrl, sessionID, directory }: ContextUsageIndicatorProps) {
   const { totalTokens, contextLimit, usagePercentage, currentModel, isLoading } = useContextUsage(opcodeUrl, sessionID, directory)
-  const { preferences } = useSettings()
   const [modelName, setModelName] = useState<string>('')
 
-  const displayModel = preferences?.defaultModel || currentModel || ''
-
   useEffect(() => {
     const loadModelName = async () => {
-      if (displayModel) {
+      if (currentModel) {
         try {
-          const [providerId, modelId] = displayModel.split('/')
+          const [providerId, modelId] = currentModel.split('/')
           if (providerId && modelId) {
             const model = await getModel(providerId, modelId)
             if (model) {
               setModelName(formatModelName(model))
             } else {
-              setModelName(displayModel)
+              setModelName(currentModel)
             }
           } else {
-            setModelName(displayModel)
+            setModelName(currentModel)
           }
         } catch {
-          setModelName(displayModel)
+          setModelName(currentModel)
         }
       } else {
         setModelName('')
       }
     }
 
     loadModelName()
-  }, [displayModel, opcodeUrl])
+  }, [currentModel])
 
   if (isLoading) {
     return (

frontend/src/hooks/useContextUsage.ts

@@ -2,14 +2,7 @@ import { useMemo } from 'react'
 import { useMessages } from './useOpenCode'
 import { useSettings } from './useSettings'
 import { useQuery } from '@tanstack/react-query'
-import type { components } from '@/api/opencode-types'
-
-type AssistantMessage = components['schemas']['AssistantMessage']
-
-type MessageListItem = {
-  info: components['schemas']['Message']
-  parts: components['schemas']['Part'][]
-}
+import { getSessionModel } from '@/lib/model'
 
 interface ContextUsage {
   totalTokens: number
@@ -40,10 +33,6 @@ interface ProvidersResponse {
   providers: Provider[]
 }
 
-const isAssistantMessage = (message: MessageListItem): message is MessageListItem & { info: AssistantMessage } => {
-  return message.info.role === 'assistant'
-}
-
 async function fetchProviders(opcodeUrl: string): Promise<ProvidersResponse> {
   const response = await fetch(`${opcodeUrl}/config/providers`)
   if (!response.ok) {
@@ -64,70 +53,45 @@ export const useContextUsage = (opcodeUrl: string | null | undefined, sessionID:
   })
 
   return useMemo(() => {
-    // Get current model from preferences immediately
-    let currentModel = preferences?.defaultModel || null
+    const currentModel = getSessionModel(messages, preferences?.defaultModel)
 
-    if (!messages || messages.length === 0) {
-      // Still try to get context limit from preferences model even without messages
-      let contextLimit: number | null = null
-      
-      if (currentModel && providersData) {
-        const [providerId, modelId] = currentModel.split('/')
-        const provider = providersData.providers.find(p => p.id === providerId)
-        if (provider && provider.models) {
-          const model = provider.models[modelId]
-          if (model && model.limit) {
-            contextLimit = model.limit.context
-          }
-        }
-      }
-
-      return {
-        totalTokens: 0,
-        contextLimit,
-        usagePercentage: contextLimit ? 0 : null,
-        currentModel,
-        isLoading: messagesLoading
-      }
-    }
-    
-    // Get the latest assistant message for current context usage
-    const assistantMessages = messages.filter(isAssistantMessage)
+    const assistantMessages = messages?.filter(msg => msg.info.role === 'assistant') || []
     let latestAssistantMessage = assistantMessages[assistantMessages.length - 1]
 
-    // If the latest message has 0 tokens (still being created), use the previous one
-    if (latestAssistantMessage) {
-      const latestTokens = latestAssistantMessage.info.tokens.input + latestAssistantMessage.info.tokens.output + latestAssistantMessage.info.tokens.reasoning
-      if (latestTokens === 0 && assistantMessages.length > 1) {
+    if (latestAssistantMessage?.info.role === 'assistant') {
+      const tokens = latestAssistantMessage.info.tokens.input + latestAssistantMessage.info.tokens.output + latestAssistantMessage.info.tokens.reasoning
+      if (tokens === 0 && assistantMessages.length > 1) {
         latestAssistantMessage = assistantMessages[assistantMessages.length - 2]
       }
     }
-    
-    let totalTokens = 0
-    if (latestAssistantMessage) {
-      // The latest message contains the total context usage
-      totalTokens = latestAssistantMessage.info.tokens.input + latestAssistantMessage.info.tokens.output + latestAssistantMessage.info.tokens.reasoning
-      
-      // If no model in preferences, use the model from the message
-      if (!currentModel && 'modelID' in latestAssistantMessage.info && 'providerID' in latestAssistantMessage.info) {
-        currentModel = `${latestAssistantMessage.info.providerID}/${latestAssistantMessage.info.modelID}`
-      }
-    }
 
-    // Find the model configuration from providers data
     let contextLimit: number | null = null
-    
     if (currentModel && providersData) {
       const [providerId, modelId] = currentModel.split('/')
       const provider = providersData.providers.find(p => p.id === providerId)
-      if (provider && provider.models) {
+      if (provider?.models) {
         const model = provider.models[modelId]
-        if (model && model.limit) {
+        if (model?.limit) {
           contextLimit = model.limit.context
         }
       }
     }
 
+    if (!messages || messages.length === 0) {
+      return {
+        totalTokens: 0,
+        contextLimit,
+        usagePercentage: contextLimit ? 0 : null,
+        currentModel,
+        isLoading: messagesLoading
+      }
+    }
+    
+    let totalTokens = 0
+    if (latestAssistantMessage?.info.role === 'assistant') {
+      totalTokens = latestAssistantMessage.info.tokens.input + latestAssistantMessage.info.tokens.output + latestAssistantMessage.info.tokens.reasoning
+    }
+
     const usagePercentage = contextLimit ? (totalTokens / contextLimit) * 100 : null
 
     return {
@@ -138,4 +102,4 @@ export const useContextUsage = (opcodeUrl: string | null | undefined, sessionID:
       isLoading: false
     }
   }, [messages, messagesLoading, preferences?.defaultModel, providersData])
-}
+}

frontend/src/pages/SessionDetail.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, useMemo } from "react";
 import { useParams, useNavigate } from "react-router-dom";
 import { useQuery } from "@tanstack/react-query";
 import { getRepo } from "@/api/repos";
@@ -10,8 +10,9 @@ import { SessionList } from "@/components/session/SessionList";
 import { PermissionRequestDialog } from "@/components/session/PermissionRequestDialog";
 import { FileBrowserSheet } from "@/components/file-browser/FileBrowserSheet";
 import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
-import { useSession, useAbortSession, useUpdateSession, useOpenCodeClient, useMessages } from "@/hooks/useOpenCode";
+import { useSession, useAbortSession, useUpdateSession, useOpenCodeClient, useMessages, useConfig } from "@/hooks/useOpenCode";
 import { OPENCODE_API_ENDPOINT } from "@/config";
+import { getSessionModel } from "@/lib/model";
 import { useSSE } from "@/hooks/useSSE";
 import { useSettings } from "@/hooks/useSettings";
 import { useKeyboardShortcuts } from "@/hooks/useKeyboardShortcuts";
@@ -48,6 +49,9 @@ export function SessionDetail() {
   const repoDirectory = repo?.fullPath;
 
   const { data: messages, isLoading: messagesLoading } = useMessages(opcodeUrl, sessionId, repoDirectory);
+  const { data: config } = useConfig(opcodeUrl);
+
+  const currentSessionModel = useMemo(() => getSessionModel(messages, config?.model), [messages, config?.model]);
 
   const { scrollToBottom } = useAutoScroll({
     containerRef: messageContainerRef,
@@ -205,6 +209,7 @@ export function SessionDetail() {
         open={modelDialogOpen}
         onOpenChange={setModelDialogOpen}
         opcodeUrl={opcodeUrl}
+        currentSessionModel={currentSessionModel}
       />
 
       {/* Sessions Dialog */}