Improve session defaults and onboarding UI

2025-11-07 21:22:46 +00:00
parent 7193103646
commit 5483932196
10 changed files with 254 additions and 119 deletions
--- a/src/components/agent-selector.tsx
+++ b/src/components/agent-selector.tsx
@@ -40,6 +40,14 @@ export default function AgentSelector(props: AgentSelectorProps) {
    return filtered
  })

+  createEffect(() => {
+    const list = availableAgents()
+    if (list.length === 0) return
+    if (!list.some((agent) => agent.name === props.currentAgent)) {
+      void props.onAgentChange(list[0].name)
+    }
+  })
+
  createEffect(() => {
    if (instanceAgents().length === 0) {
      fetchAgents(props.instanceId).catch(console.error)
--- a/src/components/folder-selection-view.tsx
+++ b/src/components/folder-selection-view.tsx
@@ -3,6 +3,7 @@ import { Folder, Clock, Trash2, FolderPlus, Settings, ChevronDown, ChevronUp } f
 import { recentFolders, removeRecentFolder, preferences, updateLastUsedBinary } from "../stores/preferences"
 import OpenCodeBinarySelector from "./opencode-binary-selector"
 import EnvironmentVariablesEditor from "./environment-variables-editor"
+import Kbd from "./kbd"

 interface FolderSelectionViewProps {
  onSelectFolder: (folder?: string, binaryPath?: string) => void
@@ -14,35 +15,38 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
  const [focusMode, setFocusMode] = createSignal<"recent" | "new" | null>("recent")
  const [showAdvanced, setShowAdvanced] = createSignal(false)
  const [selectedBinary, setSelectedBinary] = createSignal(preferences().lastUsedBinary || "opencode")
-
+  let recentListRef: HTMLDivElement | undefined
+ 
  const folders = () => recentFolders()
-
+ 
  // Update selected binary when preferences change
  createEffect(() => {
-    const lastUsed = preferences().lastUsedBinary
-    if (lastUsed && lastUsed !== selectedBinary()) {
-      setSelectedBinary(lastUsed)
-    }
-  })
-
+     const lastUsed = preferences().lastUsedBinary
+     if (lastUsed && lastUsed !== selectedBinary()) {
+       setSelectedBinary(lastUsed)
+     }
+   })
+ 
  function scrollToIndex(index: number) {
-    const element = document.querySelector(`[data-folder-index="${index}"]`)
+    const element = recentListRef?.querySelector(`[data-folder-index="${index}"]`)
    if (element) {
      element.scrollIntoView({ block: "nearest", behavior: "auto" })
    }
  }

+
  function handleKeyDown(e: KeyboardEvent) {
    const folderList = folders()
-
-    if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+ 
+    if ((e.metaKey || e.ctrlKey) && !e.shiftKey && e.key.toLowerCase() === "n") {
      e.preventDefault()
      handleBrowse()
      return
    }
-
+ 
    if (folderList.length === 0) return

+
    if (e.key === "ArrowDown") {
      e.preventDefault()
      const newIndex = Math.min(selectedIndex() + 1, folderList.length - 1)
@@ -154,21 +158,22 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
  }

  return (
-    <div class="flex h-full w-full items-center justify-center" style="background-color: var(--surface-secondary)">
-      <div class="w-full max-w-3xl px-8 py-12">
-        <div class="mb-8 text-center">
-          <div class="mb-4 flex justify-center">
+    <div class="flex h-screen w-full items-start justify-center overflow-hidden py-6" style="background-color: var(--surface-secondary)">
+      <div class="w-full max-w-3xl h-full max-h-[90vh] px-8 flex flex-col overflow-hidden">
+        <div class="mb-6 text-center shrink-0">
+          <div class="mb-3 flex justify-center">
            <Folder class="h-16 w-16 icon-muted" />
          </div>
          <h1 class="mb-2 text-2xl font-semibold text-primary">Welcome to OpenCode</h1>
          <p class="text-base text-secondary">Select a folder to start coding with AI</p>
        </div>
+ 
+        <div class="space-y-4 flex-1 min-h-0 overflow-hidden flex flex-col">

-        <div class="space-y-4 overflow-visible">
          <Show
            when={folders().length > 0}
            fallback={
-              <div class="panel panel-empty-state">
+              <div class="panel panel-empty-state flex-1">
                <div class="panel-empty-state-icon">
                  <Clock class="w-12 h-12 mx-auto" />
                </div>
@@ -177,22 +182,27 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
              </div>
            }
          >
-            <div class="panel">
-              <div class="panel-header">
-                <h2 class="panel-title">Recent Folders</h2>
-                <p class="panel-subtitle">
-                  {folders().length} {folders().length === 1 ? "folder" : "folders"} available
-                </p>
-              </div>
-              <div class="panel-list">
-                <For each={folders()}>
-                  {(folder, index) => (
-                    <div 
-                      class="panel-list-item"
-                      classList={{
-                        "panel-list-item-highlight": focusMode() === "recent" && selectedIndex() === index(),
-                      }}
-                    >
+              <div class="panel flex-1 min-h-0 overflow-hidden">
+               <div class="panel-header">
+                 <h2 class="panel-title">Recent Folders</h2>
+                 <p class="panel-subtitle">
+                   {folders().length} {folders().length === 1 ? "folder" : "folders"} available
+                 </p>
+               </div>
+               <div
+                 class="panel-list max-h-[50vh] overflow-y-auto pr-1"
+                 ref={(el) => (recentListRef = el)}
+               >
+                 <For each={folders()}>
+                   {(folder, index) => (
+                     <div
+                       data-folder-index={index()}
+                       class="panel-list-item"
+                       classList={{
+                         "panel-list-item-highlight": focusMode() === "recent" && selectedIndex() === index(),
+                       }}
+                     >
+
                      <div class="flex items-center w-full">
                        <button
                          class="panel-list-item-content w-full"
@@ -237,7 +247,7 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
            </div>
          </Show>

-          <div class="panel">
+          <div class="panel shrink-0">
            <div class="panel-header">
              <h2 class="panel-title">Browse for Folder</h2>
              <p class="panel-subtitle">Select any folder on your computer</p>
@@ -254,9 +264,7 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
                  <FolderPlus class="w-4 h-4" />
                  <span>{props.isLoading ? "Opening..." : "Browse Folders"}</span>
                </div>
-                <kbd class="kbd ml-2">
-                  Cmd+Enter
-                </kbd>
+                <Kbd shortcut="cmd+n" class="ml-2" />
              </button>
            </div>

@@ -297,7 +305,7 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
          </div>
        </div>

-        <div class="mt-6 panel panel-footer">
+        <div class="mt-4 panel panel-footer shrink-0">
          <div class="panel-footer-hints">
            <Show when={folders().length > 0}>
              <div class="flex items-center gap-1.5">
@@ -315,7 +323,7 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
              </div>
            </Show>
            <div class="flex items-center gap-1.5">
-              <kbd class="kbd">Cmd+Enter</kbd>
+              <Kbd shortcut="cmd+n" />
              <span>Browse</span>
            </div>
          </div>
--- a/src/components/instance-welcome-view.tsx
+++ b/src/components/instance-welcome-view.tsx
@@ -1,7 +1,11 @@
-import { Component, createSignal, Show, For, createEffect, onMount, onCleanup } from "solid-js"
+import { Component, createSignal, Show, For, createEffect, onMount, onCleanup, createMemo } from "solid-js"
 import type { Instance } from "../types/instance"
-import { getParentSessions, createSession, setActiveParentSession, agents } from "../stores/sessions"
+import { getParentSessions, createSession, setActiveParentSession } from "../stores/sessions"
 import InstanceInfo from "./instance-info"
+import KeyboardHint from "./keyboard-hint"
+import Kbd from "./kbd"
+import { keyboardRegistry, type KeyboardShortcut } from "../lib/keyboard-registry"
+import { isMac } from "../lib/keyboard-utils"


 interface InstanceWelcomeViewProps {
@@ -9,20 +13,28 @@ interface InstanceWelcomeViewProps {
 }

 const InstanceWelcomeView: Component<InstanceWelcomeViewProps> = (props) => {
-  const [selectedAgent, setSelectedAgent] = createSignal<string>("")
  const [isCreating, setIsCreating] = createSignal(false)
  const [selectedIndex, setSelectedIndex] = createSignal(0)
  const [focusMode, setFocusMode] = createSignal<"sessions" | "new-session" | null>("sessions")

  const parentSessions = () => getParentSessions(props.instance.id)
-  const agentList = () => agents().get(props.instance.id) || []
-
-  createEffect(() => {
-    const list = agentList()
-    if (list.length > 0 && !selectedAgent()) {
-      setSelectedAgent(list[0].name)
+  const newSessionShortcut = createMemo<KeyboardShortcut>(() => {
+    const registered = keyboardRegistry.get("session-new")
+    if (registered) return registered
+    return {
+      id: "session-new-display",
+      key: "n",
+      modifiers: {
+        shift: true,
+        meta: isMac(),
+        ctrl: !isMac(),
+      },
+      handler: () => {},
+      description: "New Session",
+      context: "global",
    }
  })
+  const newSessionShortcutString = createMemo(() => (isMac() ? "cmd+shift+n" : "ctrl+shift+n"))

  createEffect(() => {
    const sessions = parentSessions()
@@ -45,7 +57,7 @@ const InstanceWelcomeView: Component<InstanceWelcomeViewProps> = (props) => {
  function handleKeyDown(e: KeyboardEvent) {
    const sessions = parentSessions()

-    if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+    if ((e.metaKey || e.ctrlKey) && e.shiftKey && e.key.toLowerCase() === "n") {
      e.preventDefault()
      handleNewSession()
      return
@@ -133,11 +145,11 @@ const InstanceWelcomeView: Component<InstanceWelcomeViewProps> = (props) => {
  }

  async function handleNewSession() {
-    if (isCreating() || agentList().length === 0) return
+    if (isCreating()) return

    setIsCreating(true)
    try {
-      const session = await createSession(props.instance.id, selectedAgent())
+      const session = await createSession(props.instance.id)
      setActiveParentSession(props.instance.id, session.id)
    } catch (error) {
      console.error("Failed to create session:", error)
@@ -153,7 +165,7 @@ const InstanceWelcomeView: Component<InstanceWelcomeViewProps> = (props) => {
          <Show
            when={parentSessions().length > 0}
            fallback={
-              <div class="panel panel-empty-state flex-shrink-0">
+              <div class="panel panel-empty-state flex-1 flex flex-col justify-center">
                <div class="panel-empty-state-icon">
                  <svg class="w-12 h-12 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path
@@ -169,14 +181,14 @@ const InstanceWelcomeView: Component<InstanceWelcomeViewProps> = (props) => {
              </div>
            }
          >
-            <div class="panel flex-shrink-0">
+            <div class="panel flex flex-col flex-1 min-h-0">
              <div class="panel-header">
                <h2 class="panel-title">Resume Session</h2>
                <p class="panel-subtitle">
                  {parentSessions().length} {parentSessions().length === 1 ? "session" : "sessions"} available
                </p>
              </div>
-              <div class="panel-list">
+              <div class="panel-list panel-list--fill flex-1 min-h-0 overflow-auto">
                <For each={parentSessions()}>
                  {(session, index) => (
                    <div 
@@ -228,35 +240,15 @@ const InstanceWelcomeView: Component<InstanceWelcomeViewProps> = (props) => {
          <div class="panel flex-shrink-0">
            <div class="panel-header">
              <h2 class="panel-title">Start New Session</h2>
-              <p class="panel-subtitle">Create a fresh conversation with your chosen agent</p>
+              <p class="panel-subtitle">We’ll reuse your last agent/model automatically</p>
            </div>
            <div class="panel-body">
              <div class="space-y-3">
-                <Show when={agentList().length > 0}>
-                  <div>
-                    <label class="block text-xs font-medium text-secondary mb-1.5">Agent</label>
-                    <select
-                      class="selector-input w-full"
-                      value={selectedAgent()}
-                      onChange={(e) => setSelectedAgent(e.currentTarget.value)}
-                    >
-                      <For each={agentList()}>
-                        {(agent) => (
-                          <option value={agent.name}>
-                            {agent.name}
-                            {agent.description ? ` - ${agent.description}` : ""}
-                          </option>
-                        )}
-                      </For>
-                    </select>
-                  </div>
-                </Show>
-
                <button
                  type="button"
                  class="button-primary w-full flex items-center justify-center text-sm disabled:cursor-not-allowed"
                  onClick={handleNewSession}
-                  disabled={isCreating() || agentList().length === 0}
+                  disabled={isCreating()}
                >
                  <div class="flex items-center gap-2">
                    {isCreating() ? (
@@ -273,11 +265,9 @@ const InstanceWelcomeView: Component<InstanceWelcomeViewProps> = (props) => {
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                      </svg>
                    )}
-                    <span>{agentList().length === 0 ? "Loading agents..." : "Create Session"}</span>
+                    <span>Create Session</span>
                  </div>
-                  <kbd class="kbd ml-2">
-                    Cmd+Enter
-                  </kbd>
+                  <Kbd shortcut={newSessionShortcutString()} class="ml-2" />
                </button>
              </div>
            </div>
@@ -312,10 +302,7 @@ const InstanceWelcomeView: Component<InstanceWelcomeViewProps> = (props) => {
            <kbd class="kbd">Enter</kbd>
            <span>Resume</span>
          </div>
-          <div class="flex items-center gap-1.5">
-            <kbd class="kbd">Cmd+Enter</kbd>
-            <span>New Session</span>
-          </div>
+          <KeyboardHint shortcuts={[newSessionShortcut()]} separator="" />
        </div>
      </div>
    </div>
--- a/src/components/message-stream.tsx
+++ b/src/components/message-stream.tsx
@@ -577,10 +577,11 @@ export default function MessageStream(props: MessageStreamProps) {
          <div class="empty-state">
            <div class="empty-state-content">
              <h3>Start a conversation</h3>
-              <p>Type a message below or try:</p>
+              <p>Type a message below or open the Command Palette:</p>
              <ul>
                <li>
-                  <code>/init-project</code>
+                  <span>Command Palette</span>
+                  <Kbd shortcut="cmd+shift+p" class="ml-2" />
                </li>
                <li>Ask about your codebase</li>
                <li>
--- a/src/components/session-picker.tsx
+++ b/src/components/session-picker.tsx
@@ -21,7 +21,12 @@ const SessionPicker: Component<SessionPickerProps> = (props) => {

  createEffect(() => {
    const list = agentList()
-    if (list.length > 0 && !selectedAgent()) {
+    if (list.length === 0) {
+      setSelectedAgent("")
+      return
+    }
+    const current = selectedAgent()
+    if (!current || !list.some((agent) => agent.name === current)) {
      setSelectedAgent(list[0].name)
    }
  })
--- a/src/lib/keyboard.ts
+++ b/src/lib/keyboard.ts
@@ -1,5 +1,7 @@
 import { instances, activeInstanceId, setActiveInstanceId } from "../stores/instances"
 import { activeSessionId, setActiveSession, getSessions, activeParentSessionId } from "../stores/sessions"
+import { keyboardRegistry } from "./keyboard-registry"
+import { isMac } from "./keyboard-utils"

 export function setupTabKeyboardShortcuts(
  handleNewInstance: () => void,
@@ -8,6 +10,22 @@ export function setupTabKeyboardShortcuts(
  handleCloseSession: (instanceId: string, sessionId: string) => void,
  handleCommandPalette: () => void,
 ) {
+  keyboardRegistry.register({
+    id: "session-new",
+    key: "n",
+    modifiers: {
+      shift: true,
+      meta: isMac(),
+      ctrl: !isMac(),
+    },
+    handler: () => {
+      const instanceId = activeInstanceId()
+      if (instanceId) void handleNewSession(instanceId)
+    },
+    description: "New Session",
+    context: "global",
+  })
+
  window.addEventListener("keydown", (e) => {
    if ((e.metaKey || e.ctrlKey) && e.shiftKey && e.key.toLowerCase() === "p") {
      e.preventDefault()
@@ -47,14 +65,6 @@ export function setupTabKeyboardShortcuts(
      handleNewInstance()
    }

-    if ((e.metaKey || e.ctrlKey) && e.shiftKey && e.key.toLowerCase() === "n") {
-      e.preventDefault()
-      const instanceId = activeInstanceId()
-      if (instanceId) {
-        handleNewSession(instanceId)
-      }
-    }
-
    if ((e.metaKey || e.ctrlKey) && !e.shiftKey && e.key.toLowerCase() === "w") {
      e.preventDefault()
      const instanceId = activeInstanceId()
--- a/src/lib/storage.ts
+++ b/src/lib/storage.ts
@@ -52,6 +52,8 @@ export class FileStorage {
        preferences: {
          showThinkingBlocks: false,
          environmentVariables: {},
+          modelRecents: [],
+          agentModelSelections: {},
        },
        recentFolders: [],
        opencodeBinaries: [],
--- a/src/stores/preferences.ts
+++ b/src/stores/preferences.ts
@@ -1,10 +1,21 @@
 import { createSignal, onMount } from "solid-js"
 import { storage, type ConfigData } from "../lib/storage"

+export interface ModelPreference {
+  providerId: string
+  modelId: string
+}
+
+export interface AgentModelSelections {
+  [instanceId: string]: Record<string, ModelPreference>
+}
+
 export interface Preferences {
  showThinkingBlocks: boolean
  lastUsedBinary?: string
  environmentVariables?: Record<string, string>
+  modelRecents?: ModelPreference[]
+  agentModelSelections?: AgentModelSelections
 }

 export interface OpenCodeBinary {
@@ -19,9 +30,12 @@ export interface RecentFolder {
 }

 const MAX_RECENT_FOLDERS = 10
+const MAX_RECENT_MODELS = 5

 const defaultPreferences: Preferences = {
  showThinkingBlocks: false,
+  modelRecents: [],
+  agentModelSelections: {},
 }

 const [preferences, setPreferences] = createSignal<Preferences>(defaultPreferences)
@@ -127,6 +141,37 @@ function removeEnvironmentVariable(key: string): void {
  updateEnvironmentVariables(rest)
 }

+function addRecentModelPreference(model: ModelPreference): void {
+  if (!model.providerId || !model.modelId) return
+  const recents = preferences().modelRecents ?? []
+  const filtered = recents.filter((item) => item.providerId !== model.providerId || item.modelId !== model.modelId)
+  const updated = [model, ...filtered].slice(0, MAX_RECENT_MODELS)
+  updatePreferences({ modelRecents: updated })
+}
+
+function setAgentModelPreference(instanceId: string, agent: string, model: ModelPreference): void {
+  if (!instanceId || !agent || !model.providerId || !model.modelId) return
+  const selections = preferences().agentModelSelections ?? {}
+  const instanceSelections = selections[instanceId] ?? {}
+  const existing = instanceSelections[agent]
+  if (existing && existing.providerId === model.providerId && existing.modelId === model.modelId) {
+    return
+  }
+  updatePreferences({
+    agentModelSelections: {
+      ...selections,
+      [instanceId]: {
+        ...instanceSelections,
+        [agent]: model,
+      },
+    },
+  })
+}
+
+function getAgentModelPreference(instanceId: string, agent: string): ModelPreference | undefined {
+  return preferences().agentModelSelections?.[instanceId]?.[agent]
+}
+
 // Load config on mount and listen for changes from other instances
 onMount(() => {
  loadConfig()
@@ -154,4 +199,7 @@ export {
  updateEnvironmentVariables,
  addEnvironmentVariable,
  removeEnvironmentVariable,
+  addRecentModelPreference,
+  setAgentModelPreference,
+  getAgentModelPreference,
 }
--- a/src/stores/sessions.ts
+++ b/src/stores/sessions.ts
@@ -6,7 +6,7 @@ import { instances } from "./instances"

 import { sseManager } from "../lib/sse-manager"
 import { decodeHtmlEntities } from "../lib/markdown"
-import { preferences } from "./preferences"
+import { preferences, addRecentModelPreference, getAgentModelPreference, setAgentModelPreference } from "./preferences"

 interface SessionInfo {
  tokens: number
@@ -330,6 +330,28 @@ async function fetchSessions(instanceId: string): Promise<void> {
  }
 }

+function isModelValid(
+  instanceId: string,
+  model?: { providerId: string; modelId: string } | null,
+): model is { providerId: string; modelId: string } {
+  if (!model?.providerId || !model.modelId) return false
+  const instanceProviders = providers().get(instanceId) || []
+  const provider = instanceProviders.find((p) => p.id === model.providerId)
+  if (!provider) return false
+  return provider.models.some((item) => item.id === model.modelId)
+}
+
+function getRecentModelPreferenceForInstance(
+  instanceId: string,
+): { providerId: string; modelId: string } | undefined {
+  const recents = preferences().modelRecents ?? []
+  for (const item of recents) {
+    if (isModelValid(instanceId, item)) {
+      return item
+    }
+  }
+}
+
 async function getDefaultModel(
  instanceId: string,
  agentName?: string,
@@ -337,9 +359,16 @@ async function getDefaultModel(
  const instanceProviders = providers().get(instanceId) || []
  const instanceAgents = agents().get(instanceId) || []

+  if (agentName) {
+    const stored = getAgentModelPreference(instanceId, agentName)
+    if (isModelValid(instanceId, stored)) {
+      return stored
+    }
+  }
+
  if (agentName) {
    const agent = instanceAgents.find((a) => a.name === agentName)
-    if (agent?.model?.providerId && agent.model.modelId) {
+    if (agent && agent.model && isModelValid(instanceId, agent.model)) {
      return {
        providerId: agent.model.providerId,
        modelId: agent.model.modelId,
@@ -347,25 +376,30 @@ async function getDefaultModel(
    }
  }

-  const anthropicProvider = instanceProviders.find((p) => p.id === "anthropic")
-  if (anthropicProvider) {
-    const defaultModelId = anthropicProvider.defaultModelId || anthropicProvider.models[0]?.id
-    if (defaultModelId) {
-      return {
-        providerId: "anthropic",
-        modelId: defaultModelId,
+  const recent = getRecentModelPreferenceForInstance(instanceId)
+  if (recent) {
+    return recent
+  }
+
+  for (const provider of instanceProviders) {
+    if (provider.defaultModelId) {
+      const model = provider.models.find((m) => m.id === provider.defaultModelId)
+      if (model) {
+        return {
+          providerId: provider.id,
+          modelId: model.id,
+        }
      }
    }
  }

  if (instanceProviders.length > 0) {
    const firstProvider = instanceProviders[0]
-    const defaultModelId = firstProvider.defaultModelId || firstProvider.models[0]?.id
-
-    if (defaultModelId) {
+    const firstModel = firstProvider.models[0]
+    if (firstModel) {
      return {
        providerId: firstProvider.id,
-        modelId: defaultModelId,
+        modelId: firstModel.id,
      }
    }
  }
@@ -469,6 +503,10 @@ async function createSession(instanceId: string, agent?: string): Promise<Sessio

  const defaultModel = await getDefaultModel(instanceId, selectedAgent)

+  if (selectedAgent && isModelValid(instanceId, defaultModel)) {
+    setAgentModelPreference(instanceId, selectedAgent, defaultModel)
+  }
+
  setLoading((prev) => {
    const next = { ...prev }
    next.creatingSession.set(instanceId, true)
@@ -1457,16 +1495,27 @@ async function updateSessionAgent(instanceId: string, sessionId: string, agent:
    throw new Error("Session not found")
  }

+  const nextModel = await getDefaultModel(instanceId, agent)
+  const shouldApplyModel = isModelValid(instanceId, nextModel)
+
  setSessions((prev) => {
    const next = new Map(prev)
-    const instanceSessions = new Map(prev.get(instanceId))
-    const session = instanceSessions.get(sessionId)
-    if (session) {
-      instanceSessions.set(sessionId, { ...session, agent })
-      next.set(instanceId, instanceSessions)
+    const map = new Map(prev.get(instanceId))
+    const current = map.get(sessionId)
+    if (current) {
+      map.set(sessionId, {
+        ...current,
+        agent,
+        model: shouldApplyModel ? nextModel : current.model,
+      })
+      next.set(instanceId, map)
    }
    return next
  })
+
+  if (agent && shouldApplyModel) {
+    setAgentModelPreference(instanceId, agent, nextModel)
+  }
 }

 async function updateSessionModel(
@@ -1480,16 +1529,28 @@ async function updateSessionModel(
    throw new Error("Session not found")
  }

+  if (!isModelValid(instanceId, model)) {
+    console.warn("Invalid model selection", model)
+    return
+  }
+
+  const currentAgent = session.agent
+
  setSessions((prev) => {
    const next = new Map(prev)
-    const instanceSessions = new Map(prev.get(instanceId))
-    const session = instanceSessions.get(sessionId)
-    if (session) {
-      instanceSessions.set(sessionId, { ...session, model })
-      next.set(instanceId, instanceSessions)
+    const map = new Map(prev.get(instanceId))
+    const existing = map.get(sessionId)
+    if (existing) {
+      map.set(sessionId, { ...existing, model })
+      next.set(instanceId, map)
    }
    return next
  })
+
+  if (currentAgent) {
+    setAgentModelPreference(instanceId, currentAgent, model)
+  }
+  addRecentModelPreference(model)
 }

 function handleSessionCompacted(instanceId: string, event: any): void {
--- a/src/styles/components.css
+++ b/src/styles/components.css
@@ -1526,6 +1526,11 @@ button.button-primary {
  @apply max-h-[400px] overflow-y-auto;
 }

+.panel-list--fill {
+  max-height: none;
+  height: 100%;
+}
+
 .panel-list-item {
  @apply border-b last:border-b-0 transition-colors w-full;
  border-color: var(--border-base);