From 4b01e5b1639d1f56f177b0fc5bba59864a1b667f Mon Sep 17 00:00:00 2001
From: Chris Scott <99081550+chriswritescode-dev@users.noreply.github.com>
Date: Mon, 4 May 2026 21:53:16 +0000
Subject: [PATCH 1/2] feat: per-agent model selection and UI refinements

- Add agentModels store with setAgentModel/getAgentModel
- PromptInput uses session model priority and stores agent model on change
- useContextUsage derives model from assistant message instead of global
- Migrate sub-agent/subtask badges from purple to blue with refined styling
- Fix MoreDrawer sentinel to skip history-back on navigation
---
 .../src/components/message/MessagePart.tsx    |  2 +-
 .../src/components/message/PromptInput.tsx    | 33 ++++++++++++-------
 .../src/components/message/ToolCallPart.tsx   | 14 +++++---
 .../src/components/navigation/MoreDrawer.tsx  |  8 +++--
 frontend/src/hooks/useContextUsage.ts         | 18 ++++++----
 frontend/src/stores/modelStore.ts             | 19 +++++++++++
 6 files changed, 69 insertions(+), 25 deletions(-)

diff --git a/frontend/src/components/message/MessagePart.tsx b/frontend/src/components/message/MessagePart.tsx
index 0534d1fd..223fc0f4 100644
--- a/frontend/src/components/message/MessagePart.tsx
+++ b/frontend/src/components/message/MessagePart.tsx
@@ -177,7 +177,7 @@ export const MessagePart = memo(function MessagePart({ part, role, allParts, par
     case 'subtask': {
       const label = part.description || part.prompt || 'Sub-agent task'
       return (
-        <div className="my-1 w-full rounded border border-purple-500/20 bg-purple-500/5 px-2 py-1 text-left text-xs text-muted-foreground">
+        <div className="my-1 w-full rounded-lg border border-blue-500/20 bg-blue-500/5 px-3 py-1.5 text-left text-xs text-muted-foreground shadow-sm shadow-blue-500/5">
           <div className="flex items-center gap-2 min-w-0">
             <span className="truncate">{label}</span>
             <span className="ml-auto shrink-0 text-[11px] text-muted-foreground">sub-agent</span>
diff --git a/frontend/src/components/message/PromptInput.tsx b/frontend/src/components/message/PromptInput.tsx
index 3faeac4d..3f97faaa 100644
--- a/frontend/src/components/message/PromptInput.tsx
+++ b/frontend/src/components/message/PromptInput.tsx
@@ -243,7 +243,9 @@ export const PromptInput = memo(forwardRef<PromptInputHandle, PromptInputProps>(
         queued: true
       })
       setStoredAgent(sessionID, agentUsed)
-      if (model) {
+      if (sessionModel) {
+        setStoredModel({ providerID: sessionModel.providerID, modelID: sessionModel.modelID })
+      } else if (model) {
         setStoredModel({ providerID: model.providerID, modelID: model.modelID })
       }
       setPrompt('')
@@ -297,7 +299,9 @@ export const PromptInput = memo(forwardRef<PromptInputHandle, PromptInputProps>(
     })
 
     setStoredAgent(sessionID, agentUsed)
-    if (model) {
+    if (sessionModel) {
+      setStoredModel({ providerID: sessionModel.providerID, modelID: sessionModel.modelID })
+    } else if (model) {
       setStoredModel({ providerID: model.providerID, modelID: model.modelID })
     }
     setPrompt('')
@@ -429,9 +433,13 @@ export const PromptInput = memo(forwardRef<PromptInputHandle, PromptInputProps>(
     setMentionRange(null)
   }
 
-  const handleAgentChange = (agent: string) => {
-    setLocalMode(agent)
-    setStoredAgent(sessionID, agent)
+  const handleAgentChange = (agentName: string) => {
+    setLocalMode(agentName)
+    setStoredAgent(sessionID, agentName)
+    const agent = agents.find(a => a.name === agentName)
+    if (agent?.model) {
+      setStoredModel({ providerID: agent.model.providerID, modelID: agent.model.modelID })
+    }
   }
 
   const startVoiceRecording = async () => {
@@ -1013,17 +1021,20 @@ if (isIOS && isSecureContext && navigator.clipboard && navigator.clipboard.read)
     }
   }, [clearStoreVariant, sessionAgent.model, sessionAgent.variant, sessionModelSyncKey, setActiveModel, setStoreVariant])
 
-  const currentModel = modelString || ''
+  const sessionModel = sessionAgent.model
+  const sessionModelString = sessionModel ? `${sessionModel.providerID}/${sessionModel.modelID}` : null
+  const currentModel = sessionModelString || modelString || ''
   const displayModelName = useMemo(() => {
-    if (!model) {
+    const activeModel = sessionModel || model
+    if (!activeModel) {
       return currentModel
     }
 
-    const provider = providersData?.providers.find((item) => item.id === model.providerID)
-    const modelData = provider?.models?.[model.modelID]
+    const provider = providersData?.providers.find((item) => item.id === activeModel.providerID)
+    const modelData = provider?.models?.[activeModel.modelID]
 
-    return modelData ? formatModelName(modelData) : model.modelID || currentModel
-  }, [currentModel, model, providersData])
+    return modelData ? formatModelName(modelData) : activeModel.modelID || currentModel
+  }, [currentModel, sessionModel, model, providersData])
   const isMobile = useMobile()
   const { setShowDialog, hasForSession: hasPermissionsForSession } = usePermissions()
   const hasPendingPermissionForSession = hasPermissionsForSession(sessionID)
diff --git a/frontend/src/components/message/ToolCallPart.tsx b/frontend/src/components/message/ToolCallPart.tsx
index 0b2a7111..617a2480 100644
--- a/frontend/src/components/message/ToolCallPart.tsx
+++ b/frontend/src/components/message/ToolCallPart.tsx
@@ -158,11 +158,15 @@ export function ToolCallPart({ part, onFileClick, onChildSessionClick }: ToolCal
     const content = (
       <div className="flex items-center gap-2 min-w-0">
         {isRunning ? (
-          <Loader2 className="w-3.5 h-3.5 animate-spin text-purple-600 dark:text-purple-400" />
+          <div className="flex gap-0.5">
+            <span className="w-1.5 h-1.5 rounded-full bg-blue-500 animate-bounce" style={{ animationDelay: '0ms' }} />
+            <span className="w-1.5 h-1.5 rounded-full bg-blue-500 animate-bounce" style={{ animationDelay: '150ms' }} />
+            <span className="w-1.5 h-1.5 rounded-full bg-blue-500 animate-bounce" style={{ animationDelay: '300ms' }} />
+          </div>
         ) : null}
         <span className="font-medium text-foreground truncate">{description}</span>
         <span className="text-[11px] text-muted-foreground ml-auto shrink-0">sub-agent</span>
-        {sessionId && <ExternalLink className="w-3 h-3 shrink-0 text-purple-600 dark:text-purple-400" />}
+        {sessionId && <ExternalLink className="w-3 h-3 shrink-0 text-blue-600 dark:text-blue-400" />}
       </div>
     )
 
@@ -170,7 +174,7 @@ export function ToolCallPart({ part, onFileClick, onChildSessionClick }: ToolCal
       return (
         <button
           onClick={() => onChildSessionClick?.(sessionId)}
-          className="my-1 w-full rounded border border-purple-500/20 bg-purple-500/5 px-2 py-1 text-left text-xs text-muted-foreground hover:bg-purple-500/10 transition-colors"
+          className="my-1 w-full rounded-lg border border-blue-500/20 bg-blue-500/5 px-3 py-1.5 text-left text-xs text-muted-foreground hover:bg-blue-500/10 hover:border-blue-500/30 transition-all duration-200 shadow-sm shadow-blue-500/5"
           title="View subagent session"
         >
           {content}
@@ -179,7 +183,7 @@ export function ToolCallPart({ part, onFileClick, onChildSessionClick }: ToolCal
     }
 
     return (
-      <div className="my-1 rounded border border-purple-500/20 bg-purple-500/5 px-2 py-1 text-xs text-muted-foreground">
+      <div className="my-1 rounded-lg border border-blue-500/20 bg-blue-500/5 px-3 py-1.5 text-xs text-muted-foreground shadow-sm shadow-blue-500/5">
         {content}
       </div>
     )
@@ -278,7 +282,7 @@ export function ToolCallPart({ part, onFileClick, onChildSessionClick }: ToolCal
                 e.stopPropagation()
                 onChildSessionClick?.(sessionId)
               }}
-              className="text-purple-600 dark:text-purple-400 text-xs hover:text-purple-700 dark:hover:text-purple-300 cursor-pointer underline decoration-dotted flex items-center gap-1"
+              className="text-blue-600 dark:text-blue-400 text-xs hover:text-blue-700 dark:hover:text-blue-300 cursor-pointer underline decoration-dotted flex items-center gap-1"
               title="View subagent session"
             >
               <ExternalLink className="w-3 h-3" />
diff --git a/frontend/src/components/navigation/MoreDrawer.tsx b/frontend/src/components/navigation/MoreDrawer.tsx
index 894bf31f..306f1173 100644
--- a/frontend/src/components/navigation/MoreDrawer.tsx
+++ b/frontend/src/components/navigation/MoreDrawer.tsx
@@ -30,6 +30,7 @@ export function MoreDrawer({ isOpen, onClose }: MoreDrawerProps) {
   const [commandsOpen, setCommandsOpen] = useState(false)
   const [mentionFileBrowserOpen, setMentionFileBrowserOpen] = useState(false)
   const swipeRef = useRef<HTMLDivElement>(null)
+  const skipHistoryBackOnCloseRef = useRef(false)
   const { bind } = useSwipeBack(onClose, { enabled: isOpen, suspendsRouteSwipe: true })
   const { logout } = useAuth()
   const { data: health } = useServerHealth()
@@ -55,6 +56,7 @@ export function MoreDrawer({ isOpen, onClose }: MoreDrawerProps) {
 
   useEffect(() => {
     if (!isOpen) return
+    skipHistoryBackOnCloseRef.current = false
     let sentinelActive = true
     const baseState = window.history.state
     const baseUrl = window.location.href
@@ -68,10 +70,9 @@ export function MoreDrawer({ isOpen, onClose }: MoreDrawerProps) {
     return () => {
       window.removeEventListener('popstate', onPop)
       // Only go back if sentinel is still active AND we haven't navigated away
-      if (sentinelActive) {
+      if (sentinelActive && !skipHistoryBackOnCloseRef.current) {
         sentinelActive = false
         const top = window.history.state as { moreDrawerSentinel?: boolean } | null
-        // Only go back if the current URL hasn't changed (i.e., no navigation occurred)
         if (top?.moreDrawerSentinel && window.location.href === baseUrl) {
           window.history.back()
         }
@@ -95,6 +96,7 @@ export function MoreDrawer({ isOpen, onClose }: MoreDrawerProps) {
     newParams.delete('mobileTab')
     newParams.set('settings', 'open')
     newParams.set('tab', 'account')
+    skipHistoryBackOnCloseRef.current = true
     navigate({ search: newParams.toString() }, { replace: true })
     onClose()
   }
@@ -109,11 +111,13 @@ export function MoreDrawer({ isOpen, onClose }: MoreDrawerProps) {
 
   const handleItemClick = (item: ReturnType<typeof buildMoreItems>[0]) => {
     if (item.to) {
+      skipHistoryBackOnCloseRef.current = true
       navigate(item.to)
     } else if (item.dialog) {
       const newParams = new URLSearchParams(location.search)
       newParams.set('dialog', item.dialog)
       newParams.delete('mobileTab')
+      skipHistoryBackOnCloseRef.current = true
       navigate({ search: newParams.toString() }, { replace: true })
     }
     onClose()
diff --git a/frontend/src/hooks/useContextUsage.ts b/frontend/src/hooks/useContextUsage.ts
index d5347cfa..7084b50b 100644
--- a/frontend/src/hooks/useContextUsage.ts
+++ b/frontend/src/hooks/useContextUsage.ts
@@ -1,7 +1,6 @@
 import { useMemo } from 'react'
 import { useMessages } from './useOpenCode'
 import { useQuery } from '@tanstack/react-query'
-import { useModelSelection } from './useModelSelection'
 import { fetchWrapper } from '@/api/fetchWrapper'
 
 interface ContextUsage {
@@ -39,8 +38,6 @@ async function fetchProviders(opcodeUrl: string): Promise<ProvidersResponse> {
 
 export const useContextUsage = (opcodeUrl: string | null | undefined, sessionID: string | undefined, directory?: string): ContextUsage => {
   const { data: messages, isLoading: messagesLoading } = useMessages(opcodeUrl, sessionID, directory)
-  const { modelString: globalModelString } = useModelSelection(opcodeUrl, directory)
-  const modelString = globalModelString
 
   const { data: providersData } = useQuery({
     queryKey: ['providers', opcodeUrl],
@@ -53,8 +50,6 @@ export const useContextUsage = (opcodeUrl: string | null | undefined, sessionID:
   })
 
   return useMemo(() => {
-    const currentModel = modelString || null
-
     const assistantMessages = messages?.filter(msg => msg.info.role === 'assistant') || []
     let latestAssistantMessage = assistantMessages[assistantMessages.length - 1]
     
@@ -66,6 +61,17 @@ export const useContextUsage = (opcodeUrl: string | null | undefined, sessionID:
       }
     }
 
+    const currentModel = (() => {
+      if (!latestAssistantMessage || latestAssistantMessage.info.role !== 'assistant') {
+        return null
+      }
+      const msg = latestAssistantMessage.info as { providerID?: string; modelID?: string }
+      if (msg.providerID && msg.modelID) {
+        return `${msg.providerID}/${msg.modelID}`
+      }
+      return null
+    })()
+
     let contextLimit: number | null = null
     if (currentModel && providersData) {
       const [providerId, modelId] = currentModel.split('/')
@@ -103,5 +109,5 @@ export const useContextUsage = (opcodeUrl: string | null | undefined, sessionID:
       currentModel,
       isLoading: false
     }
-  }, [messages, messagesLoading, modelString, providersData])
+  }, [messages, messagesLoading, providersData])
 }
diff --git a/frontend/src/stores/modelStore.ts b/frontend/src/stores/modelStore.ts
index c8e389af..69108726 100644
--- a/frontend/src/stores/modelStore.ts
+++ b/frontend/src/stores/modelStore.ts
@@ -9,6 +9,7 @@ export interface ModelSelection {
 
 interface ModelStore {
   model: ModelSelection | null
+  agentModels: Record<string, ModelSelection>
   recentModels: ModelSelection[]
   favoriteModels: ModelSelection[]
   variants: Record<string, string | undefined>
@@ -16,6 +17,8 @@ interface ModelStore {
 
   setModel: (model: ModelSelection) => void
   setActiveModel: (model: ModelSelection) => void
+  setAgentModel: (agent: string, model: ModelSelection) => void
+  getAgentModel: (agent: string) => ModelSelection | null
   syncModelState: (state: { recent: ModelSelection[], favorite: ModelSelection[], variant: Record<string, string | undefined> }) => void
   toggleFavorite: (model: ModelSelection) => void
   syncFromConfig: (configModel: string | undefined, force?: boolean) => void
@@ -39,6 +42,7 @@ export const useModelStore = create<ModelStore>()(
   persist(
     (set, get) => ({
       model: null,
+      agentModels: {},
       recentModels: [],
       favoriteModels: [],
       variants: {},
@@ -64,6 +68,20 @@ export const useModelStore = create<ModelStore>()(
         set({ model })
       },
 
+      setAgentModel: (agent: string, model: ModelSelection) => {
+        set((state) => ({
+          agentModels: {
+            ...state.agentModels,
+            [agent]: model,
+          },
+        }))
+      },
+
+      getAgentModel: (agent: string) => {
+        const state = get()
+        return state.agentModels[agent] ?? null
+      },
+
       syncModelState: (modelState) => {
         set((state) => ({
           recentModels: modelState.recent,
@@ -182,6 +200,7 @@ export const useModelStore = create<ModelStore>()(
       name: 'opencode-model-selection',
       partialize: (state) => ({
         model: state.model,
+        agentModels: state.agentModels,
         recentModels: state.recentModels,
         favoriteModels: state.favoriteModels,
         variants: state.variants,

From 0a90e9e337d129a0fe9cb17fe8f3498785d952a9 Mon Sep 17 00:00:00 2001
From: Chris Scott <99081550+chriswritescode-dev@users.noreply.github.com>
Date: Mon, 4 May 2026 21:23:05 -0400
Subject: [PATCH 2/2] refactor: improve per-agent model selection and task tool
 call status indicators

---
 .../src/components/message/PromptInput.tsx    | 23 +++++-------
 .../src/components/message/ToolCallPart.tsx   | 36 ++++++++++++++-----
 frontend/src/components/ui/side-drawer.tsx    |  2 +-
 frontend/src/pages/SessionDetail.tsx          |  2 +-
 4 files changed, 37 insertions(+), 26 deletions(-)

diff --git a/frontend/src/components/message/PromptInput.tsx b/frontend/src/components/message/PromptInput.tsx
index 3f97faaa..a64d4190 100644
--- a/frontend/src/components/message/PromptInput.tsx
+++ b/frontend/src/components/message/PromptInput.tsx
@@ -243,9 +243,7 @@ export const PromptInput = memo(forwardRef<PromptInputHandle, PromptInputProps>(
         queued: true
       })
       setStoredAgent(sessionID, agentUsed)
-      if (sessionModel) {
-        setStoredModel({ providerID: sessionModel.providerID, modelID: sessionModel.modelID })
-      } else if (model) {
+      if (model) {
         setStoredModel({ providerID: model.providerID, modelID: model.modelID })
       }
       setPrompt('')
@@ -299,9 +297,7 @@ export const PromptInput = memo(forwardRef<PromptInputHandle, PromptInputProps>(
     })
 
     setStoredAgent(sessionID, agentUsed)
-    if (sessionModel) {
-      setStoredModel({ providerID: sessionModel.providerID, modelID: sessionModel.modelID })
-    } else if (model) {
+    if (model) {
       setStoredModel({ providerID: model.providerID, modelID: model.modelID })
     }
     setPrompt('')
@@ -1021,20 +1017,17 @@ if (isIOS && isSecureContext && navigator.clipboard && navigator.clipboard.read)
     }
   }, [clearStoreVariant, sessionAgent.model, sessionAgent.variant, sessionModelSyncKey, setActiveModel, setStoreVariant])
 
-  const sessionModel = sessionAgent.model
-  const sessionModelString = sessionModel ? `${sessionModel.providerID}/${sessionModel.modelID}` : null
-  const currentModel = sessionModelString || modelString || ''
+  const currentModel = modelString || ''
   const displayModelName = useMemo(() => {
-    const activeModel = sessionModel || model
-    if (!activeModel) {
+    if (!model) {
       return currentModel
     }
 
-    const provider = providersData?.providers.find((item) => item.id === activeModel.providerID)
-    const modelData = provider?.models?.[activeModel.modelID]
+    const provider = providersData?.providers.find((item) => item.id === model.providerID)
+    const modelData = provider?.models?.[model.modelID]
 
-    return modelData ? formatModelName(modelData) : activeModel.modelID || currentModel
-  }, [currentModel, sessionModel, model, providersData])
+    return modelData ? formatModelName(modelData) : model.modelID || currentModel
+  }, [currentModel, model, providersData])
   const isMobile = useMobile()
   const { setShowDialog, hasForSession: hasPermissionsForSession } = usePermissions()
   const hasPendingPermissionForSession = hasPermissionsForSession(sessionID)
diff --git a/frontend/src/components/message/ToolCallPart.tsx b/frontend/src/components/message/ToolCallPart.tsx
index 617a2480..77ceae93 100644
--- a/frontend/src/components/message/ToolCallPart.tsx
+++ b/frontend/src/components/message/ToolCallPart.tsx
@@ -2,6 +2,7 @@ import { useState, useRef, useEffect } from 'react'
 import type { components } from '@/api/opencode-types'
 import { useSettings } from '@/hooks/useSettings'
 import { useUserBash } from '@/stores/userBashStore'
+import { useSessionStatusForSession } from '@/stores/sessionStatusStore'
 import { usePermissions, useQuestions } from '@/contexts/EventContext'
 import { detectFileReferences } from '@/lib/fileReferences'
 import { ExternalLink, Loader2 } from 'lucide-react'
@@ -68,6 +69,8 @@ function ClickableJson({ json, onFileClick }: { json: unknown; onFileClick?: (fi
 export function ToolCallPart({ part, onFileClick, onChildSessionClick }: ToolCallPartProps) {
   const { preferences } = useSettings()
   const { userBashCommands } = useUserBash()
+  const taskSessionId = part.tool === 'task' ? getTaskSessionId(part) : undefined
+  const taskSessionStatus = useSessionStatusForSession(taskSessionId)
   const { getForCallID: getPermissionForCallID } = usePermissions()
   const { getForCallID: getQuestionForCallID } = useQuestions()
   const outputRef = useRef<HTMLDivElement>(null)
@@ -152,20 +155,35 @@ export function ToolCallPart({ part, onFileClick, onChildSessionClick }: ToolCal
   const isFileTool = ['read', 'write', 'edit'].includes(part.tool)
 
   if (part.tool === 'task') {
-    const sessionId = getTaskSessionId(part)
+    const sessionId = taskSessionId
     const description = previewText || 'Sub-agent task'
-    const isRunning = part.state.status === 'running' || part.state.status === 'pending'
+    const status = part.state.status
+
+    const isPending = status === 'pending'
+    const isRunning = status === 'running' && taskSessionStatus.type !== 'idle'
+    const isCompleted = status === 'completed' || (status === 'running' && !!sessionId && taskSessionStatus.type === 'idle')
+    const isError = status === 'error'
+
     const content = (
       <div className="flex items-center gap-2 min-w-0">
-        {isRunning ? (
-          <div className="flex gap-0.5">
-            <span className="w-1.5 h-1.5 rounded-full bg-blue-500 animate-bounce" style={{ animationDelay: '0ms' }} />
-            <span className="w-1.5 h-1.5 rounded-full bg-blue-500 animate-bounce" style={{ animationDelay: '150ms' }} />
-            <span className="w-1.5 h-1.5 rounded-full bg-blue-500 animate-bounce" style={{ animationDelay: '300ms' }} />
+        {isPending && (
+          <div className="flex gap-1">
+            <span className="w-2 h-2 rounded-full bg-muted-foreground" />
+            <span className="w-2 h-2 rounded-full bg-muted-foreground" />
+            <span className="w-2 h-2 rounded-full bg-muted-foreground" />
           </div>
-        ) : null}
+        )}
+        {isRunning && (
+          <div className="flex gap-1">
+            <span className="w-2.5 h-2.5 rounded-full bg-blue-500 animate-bounce" style={{ animationDelay: '0ms' }} />
+            <span className="w-2.5 h-2.5 rounded-full bg-blue-500 animate-bounce" style={{ animationDelay: '150ms' }} />
+            <span className="w-2.5 h-2.5 rounded-full bg-blue-500 animate-bounce" style={{ animationDelay: '300ms' }} />
+          </div>
+        )}
+        {isCompleted && <span className="text-green-600 text-sm font-medium">✓</span>}
+        {isError && <span className="text-red-600 text-sm font-medium">✗</span>}
         <span className="font-medium text-foreground truncate">{description}</span>
-        <span className="text-[11px] text-muted-foreground ml-auto shrink-0">sub-agent</span>
+        <span className="text-[11px] font-medium text-orange-600 dark:text-orange-400 shrink-0">sub-agent</span>
         {sessionId && <ExternalLink className="w-3 h-3 shrink-0 text-blue-600 dark:text-blue-400" />}
       </div>
     )
diff --git a/frontend/src/components/ui/side-drawer.tsx b/frontend/src/components/ui/side-drawer.tsx
index cea8ac2f..f105d99d 100644
--- a/frontend/src/components/ui/side-drawer.tsx
+++ b/frontend/src/components/ui/side-drawer.tsx
@@ -69,7 +69,7 @@ export function SideDrawer({
       />
       <div
         className={cn(
-          'fixed top-0 bottom-0 bg-background border-l border-border pt-safe pb-safe flex flex-col',
+          'fixed top-0 bottom-0 bg-background border-l border-border pt-safe pb-safe flex flex-col z-50',
           side === 'right' ? 'right-0' : 'left-0',
           widthClass,
           className,
diff --git a/frontend/src/pages/SessionDetail.tsx b/frontend/src/pages/SessionDetail.tsx
index b7a367e5..135b149f 100644
--- a/frontend/src/pages/SessionDetail.tsx
+++ b/frontend/src/pages/SessionDetail.tsx
@@ -510,7 +510,7 @@ export function SessionDetail() {
         </div>
       </div>
 
-      <div className="flex-1 overflow-hidden flex flex-col">
+      <div className="relative flex-1 overflow-hidden flex flex-col">
         <div key={sessionId} ref={messageContainerRef} className="flex-1 overflow-y-auto overflow-x-hidden overscroll-contain [mask-image:linear-gradient(to_bottom,transparent,black_16px,black)]" style={{ paddingBottom: promptOverlayHeight + inputBottomOffset + 16 }}>
           {repoLoading || assistantModeLoading || sessionLoading || messagesLoading ? (
             <MessageSkeleton />