add model settings button in chat header and associated functionality

public/app/dom.js

@@ -8,6 +8,7 @@ const messagesDiv = $("messages");
 const modelSelect = $("model");
 const modelPanel = $("modelPanel");
 const modelBadgeName = $("modelBadgeName");
+const headerModelButton = $("headerModelButton");
 const headerModelName = $("headerModelName");
 const headerPersonaName = $("headerPersonaName");
 const modelCount = $("modelCount");
@@ -163,6 +164,7 @@ export {
     logoutButton,
     messagesDiv,
     modelBadgeName,
+    headerModelButton,
     headerModelName,
     headerPersonaName,
     modelCount,

public/index.html

@@ -113,7 +113,7 @@
                             <h2 id="activeChatTitle">New chat</h2>
                         </div>
                         <div class="chat-header-context" aria-label="Current chat setup">
-                            <span class="chat-context-item"><span>Model</span><strong id="headerModelName">Loading...</strong></span>
+                            <button id="headerModelButton" class="chat-context-item chat-context-button secondary-action" type="button" aria-controls="chatDrawer" aria-label="Change AI model"><span>Model</span><strong id="headerModelName">Loading...</strong></button>
                             <span class="chat-context-item"><span>Persona</span><strong id="headerPersonaName">None</strong></span>
                         </div>
                     </div>

public/script.js

@@ -1,5 +1,5 @@
 import {del, get, post, put, stream} from "./app/api.js";
-import {closeChatDrawer} from "./app/chatDrawer.js";
+import {closeChatDrawer, openChatDrawer} from "./app/chatDrawer.js";
 import {defaultModelProfile, onboardingPrompts, requestedChatId} from "./app/constants.js";
 import {applyTheme as applySharedTheme, applyThemeMode as applySharedThemeMode, readStoredAppearance} from "./app/themeController.js";
 import {
@@ -35,6 +35,7 @@ import {
     manageChatMemoryBtn,
     managePersonaStateBtn,
     importWorkspaceFileInput,
+    headerModelButton,
     headerModelName,
     headerPersonaName,
     moveChatFolderBtn,
@@ -182,7 +183,7 @@ function applyWorkspaceMode(nextMode, persist = true) {
     workspaceMode = nextMode === "advanced" ? "advanced" : "basic";
     document.body.dataset.workspaceMode = workspaceMode;
     if (persist) localStorage.setItem("krishd-workspace-mode", workspaceMode);
-    if (modelSection) modelSection.classList.toggle("hidden", workspaceMode === "basic");
+    if (modelSection) modelSection.classList.remove("hidden");
     if (personaSection) personaSection.classList.toggle("hidden", workspaceMode === "basic");
     updateComposerPlaceholder();
 }
@@ -1013,6 +1014,15 @@ function updateChatActionState() {
     exportChatBtn.disabled = !hasChat || currentMessages.length === 0;
     if (backupWorkspaceBtn) backupWorkspaceBtn.disabled = !currentUsername;
     if (importWorkspaceBtn) importWorkspaceBtn.disabled = !currentUsername;
+    if (headerModelButton) headerModelButton.disabled = !hasChat;
+}
+
+function openModelSettings() {
+    if (!activeChatId || !modelSection) return;
+    modelSection.classList.remove("hidden");
+    modelSection.open = true;
+    openChatDrawer();
+    requestAnimationFrame(() => modelSelect?.focus());
 }
 
 function renderPersonaSection() {
@@ -1994,6 +2004,10 @@ modelSelect.addEventListener("change", () => {
     renderModelSection();
     void saveSelectedModel();
 });
+if (headerModelButton) headerModelButton.addEventListener("click", (event) => {
+    event.stopPropagation();
+    openModelSettings();
+});
 saveGenerationSettingsBtn.addEventListener("click", () => { void saveGenerationSettings(); });
 roleplayNewPersonaBtn.addEventListener("click", () => openPersonaForm(null, "assistant"));
 clearUserPersonaBtn.addEventListener("click", () => {

public/style.css

@@ -369,6 +369,8 @@ input:focus, textarea:focus, select:focus { border-color: var(--brand); }
 }
 .chat-context-item > span { color: var(--text-muted); font-size: .58rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
 .chat-context-item > strong { max-width: 140px; overflow: hidden; color: var(--text-soft); font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
+.chat-context-button { min-height: 0; border: 0; color: inherit; text-align: left; justify-content: start; }
+.chat-context-button:hover:not(:disabled) { background: var(--surface-hover); }
 .chat-header-actions { display: flex; align-items: center; }
 .overflow-trigger { min-height: 38px; padding: 8px 12px; border-radius: 999px; font-size: .8rem; }