diff --git a/playwright/app.spec.ts b/playwright/app.spec.ts
index 2b6be42..6a3205c 100644
--- a/playwright/app.spec.ts
+++ b/playwright/app.spec.ts
@@ -1,5 +1,6 @@
 import { expect, test } from '@playwright/test'
 import type { Page } from '@playwright/test'
+import { defaultGitHubChatModel } from '../src/modules/github-api.js'
 
 const webServerMode = process.env.PLAYWRIGHT_WEB_SERVER_MODE ?? 'dev'
 const appEntryPath = webServerMode === 'preview' ? '/index.html' : '/src/index.html'
@@ -12,6 +13,8 @@ type ChatRequestMessage = {
 type ChatRequestBody = {
   metadata?: unknown
   messages?: ChatRequestMessage[]
+  model?: string
+  stream?: boolean
 }
 
 const waitForAppReady = async (page: Page, path = appEntryPath) => {
@@ -256,6 +259,7 @@ test('AI chat prefers streaming responses when available', async ({ page }) => {
   )
 
   expect(streamRequestBody?.metadata).toBeUndefined()
+  expect(streamRequestBody?.model).toBe(defaultGitHubChatModel)
   const systemMessage = streamRequestBody?.messages?.find(
     (message: ChatRequestMessage) => message.role === 'system',
   )
@@ -335,9 +339,14 @@ test('AI chat falls back to non-streaming response when streaming fails', async
 }) => {
   let streamAttemptCount = 0
   let fallbackAttemptCount = 0
+  const attemptedModels: string[] = []
 
   await page.route('https://models.github.ai/inference/chat/completions', async route => {
-    const body = route.request().postDataJSON() as { stream?: boolean } | null
+    const body = route.request().postDataJSON() as ChatRequestBody | null
+    if (typeof body?.model === 'string') {
+      attemptedModels.push(body.model)
+    }
+
     if (body?.stream) {
       streamAttemptCount += 1
       await route.fulfill({
@@ -373,6 +382,10 @@ test('AI chat falls back to non-streaming response when streaming fails', async
   await connectByotWithSingleRepo(page)
   await ensureAiChatDrawerOpen(page)
 
+  const selectedModel = 'openai/gpt-5-mini'
+  await page.locator('#ai-chat-model').selectOption(selectedModel)
+  await expect(page.locator('#ai-chat-model')).toHaveValue(selectedModel)
+
   await page.locator('#ai-chat-prompt').fill('Use fallback path.')
   await page.locator('#ai-chat-send').click()
 
@@ -383,6 +396,8 @@ test('AI chat falls back to non-streaming response when streaming fails', async
   )
   expect(streamAttemptCount).toBeGreaterThan(0)
   expect(fallbackAttemptCount).toBeGreaterThan(0)
+  expect(attemptedModels.length).toBeGreaterThan(0)
+  expect(attemptedModels.every(model => model === selectedModel)).toBe(true)
 })
 
 test('BYOT remembers selected repository across reloads', async ({ page }) => {
@@ -433,7 +448,7 @@ test('BYOT remembers selected repository across reloads', async ({ page }) => {
 test('renders default playground preview', async ({ page }) => {
   await waitForInitialRender(page)
 
-  await page.getByLabel('ShadowRoot (open)').uncheck()
+  await page.getByLabel('ShadowRoot').uncheck()
   await expect(page.locator('#status')).toHaveText('Rendered')
   await expectPreviewHasRenderedContent(page)
 })
@@ -668,7 +683,7 @@ test('renders in react mode with css modules', async ({ page }) => {
   await ensurePanelToolsVisible(page, 'component')
   await ensurePanelToolsVisible(page, 'styles')
 
-  await page.getByLabel('ShadowRoot (open)').uncheck()
+  await page.getByLabel('ShadowRoot').uncheck()
   await page.locator('#render-mode').selectOption('react')
   await page.locator('#style-mode').selectOption('module')
   await expect(page.locator('#status')).toHaveText('Rendered')
@@ -678,7 +693,7 @@ test('renders in react mode with css modules', async ({ page }) => {
 test('transpiles TypeScript annotations in component source', async ({ page }) => {
   await waitForInitialRender(page)
 
-  await page.getByLabel('ShadowRoot (open)').uncheck()
+  await page.getByLabel('ShadowRoot').uncheck()
   await setComponentEditorSource(
     page,
     [
@@ -762,7 +777,7 @@ test('react mode executes default React import without TDZ runtime failure', asy
 
   await ensurePanelToolsVisible(page, 'component')
 
-  await page.getByLabel('ShadowRoot (open)').uncheck()
+  await page.getByLabel('ShadowRoot').uncheck()
   await page.locator('#render-mode').selectOption('react')
   await setComponentEditorSource(
     page,
@@ -854,7 +869,7 @@ test('renders with less style mode', async ({ page }) => {
 
   await ensurePanelToolsVisible(page, 'styles')
 
-  await page.getByLabel('ShadowRoot (open)').uncheck()
+  await page.getByLabel('ShadowRoot').uncheck()
   await page.locator('#style-mode').selectOption('less')
   await expect(page.locator('#status')).toHaveText('Rendered')
   await expectPreviewHasRenderedContent(page)
@@ -865,7 +880,7 @@ test('renders with sass style mode', async ({ page }) => {
 
   await ensurePanelToolsVisible(page, 'styles')
 
-  await page.getByLabel('ShadowRoot (open)').uncheck()
+  await page.getByLabel('ShadowRoot').uncheck()
   await page.locator('#style-mode').selectOption('sass')
   await expect(page.locator('#status')).toHaveText('Rendered')
   await expectPreviewHasRenderedContent(page)
diff --git a/src/app.js b/src/app.js
index 18c3f5d..e65d091 100644
--- a/src/app.js
+++ b/src/app.js
@@ -30,6 +30,7 @@ const aiChatDrawer = document.getElementById('ai-chat-drawer')
 const aiChatClose = document.getElementById('ai-chat-close')
 const aiChatClear = document.getElementById('ai-chat-clear')
 const aiChatPrompt = document.getElementById('ai-chat-prompt')
+const aiChatModel = document.getElementById('ai-chat-model')
 const aiChatIncludeEditors = document.getElementById('ai-chat-include-editors')
 const aiChatSend = document.getElementById('ai-chat-send')
 const aiChatStatus = document.getElementById('ai-chat-status')
@@ -477,6 +478,7 @@ const githubAiContextState = {
 let chatDrawerController = {
   setOpen: () => {},
   setSelectedRepository: () => {},
+  setToken: () => {},
   dispose: () => {},
 }
 
@@ -509,6 +511,7 @@ const byotControls = createGitHubByotControls({
   onTokenChange: token => {
     githubAiContextState.token = token
     syncAiChatTokenVisibility(token)
+    chatDrawerController.setToken(token)
   },
   setStatus,
 })
@@ -527,6 +530,7 @@ chatDrawerController = createGitHubChatDrawer({
   drawer: aiChatDrawer,
   closeButton: aiChatClose,
   promptInput: aiChatPrompt,
+  modelSelect: aiChatModel,
   includeEditorsContextToggle: aiChatIncludeEditors,
   sendButton: aiChatSend,
   clearButton: aiChatClear,
diff --git a/src/index.html b/src/index.html
index 4bad76f..ddd28fc 100644
--- a/src/index.html
+++ b/src/index.html
@@ -37,7 +37,7 @@ <h1>
           class="app-grid-ai-controls"
           id="github-ai-controls"
           role="group"
-          aria-label="GitHub AI controls"
+          aria-label="GitHub controls"
           hidden
         >
           <div class="github-token-control-wrap">
@@ -161,7 +161,7 @@ <h1>
             aria-controls="github-ai-controls"
             hidden
           >
-            Agent
+            GitHub
           </button>
         </div>
 
@@ -455,12 +455,12 @@ <h2>Preview</h2>
             </label>
             <label class="toggle">
               <input id="shadow-toggle" type="checkbox" checked />
-              ShadowRoot (open)
+              ShadowRoot
             </label>
             <button
               class="hint-icon shadow-hint"
               type="button"
-              aria-label="About ShadowRoot mode"
+              aria-label="About preview isolation mode"
               data-tooltip="Turning ShadowRoot off renders the preview in light DOM, so @knighted/develop styles can affect preview output."
             >
               i
@@ -544,9 +544,6 @@ <h2>AI Chat</h2>
         </div>
 
         <div class="ai-chat-drawer__meta">
-          <p class="ai-chat-drawer__repo" id="ai-chat-repository">
-            No repository selected
-          </p>
           <p class="ai-chat-drawer__status" id="ai-chat-status" data-level="neutral">
             Idle
           </p>
@@ -560,9 +557,16 @@ <h2>AI Chat</h2>
           class="ai-chat-prompt"
           id="ai-chat-prompt"
           rows="4"
-          placeholder="Ask about your selected repository context"
+          placeholder="Ask for help developing your component and styles"
         ></textarea>
 
+        <label class="ai-chat-model-picker" for="ai-chat-model">
+          <span class="sr-only">Model</span>
+          <select id="ai-chat-model" aria-label="Chat model" disabled>
+            <option value="openai/gpt-4.1-mini" selected>openai/gpt-4.1-mini</option>
+          </select>
+        </label>
+
         <label class="ai-chat-context-toggle" for="ai-chat-include-editors">
           <input type="checkbox" id="ai-chat-include-editors" checked />
           Send JSX + CSS editor context
diff --git a/src/modules/github-api.js b/src/modules/github-api.js
index bb905e4..53a8ef5 100644
--- a/src/modules/github-api.js
+++ b/src/modules/github-api.js
@@ -1,6 +1,53 @@
 const githubApiBaseUrl = 'https://api.github.com'
 const githubModelsApiUrl = 'https://models.github.ai/inference/chat/completions'
 
+export const defaultGitHubChatModel = 'openai/gpt-4.1-mini'
+
+/* Local model options avoid browser CORS failures when calling catalog endpoints directly. */
+export const githubChatModelOptions = [
+  'openai/gpt-4.1-mini',
+  'openai/gpt-4.1',
+  'openai/gpt-4.1-nano',
+  'openai/gpt-4o',
+  'openai/gpt-4o-mini',
+  'openai/gpt-5',
+  'openai/gpt-5-chat',
+  'openai/gpt-5-mini',
+  'openai/gpt-5-nano',
+  'openai/o1',
+  'openai/o1-mini',
+  'openai/o1-preview',
+  'openai/o3',
+  'openai/o3-mini',
+  'openai/o4-mini',
+  'ai21-labs/ai21-jamba-1.5-large',
+  'cohere/cohere-command-a',
+  'cohere/cohere-command-r-08-2024',
+  'cohere/cohere-command-r-plus-08-2024',
+  'xai/grok-3',
+  'xai/grok-3-mini',
+  'deepseek/deepseek-r1',
+  'deepseek/deepseek-r1-0528',
+  'deepseek/deepseek-v3-0324',
+  'meta/llama-3.2-11b-vision-instruct',
+  'meta/llama-3.2-90b-vision-instruct',
+  'meta/llama-3.3-70b-instruct',
+  'meta/llama-4-maverick-17b-128e-instruct-fp8',
+  'meta/llama-4-scout-17b-16e-instruct',
+  'meta/meta-llama-3.1-405b-instruct',
+  'meta/meta-llama-3.1-8b-instruct',
+  'mistral-ai/codestral-2501',
+  'mistral-ai/ministral-3b',
+  'mistral-ai/mistral-medium-2505',
+  'mistral-ai/mistral-small-2503',
+  'microsoft/mai-ds-r1',
+  'microsoft/phi-4',
+  'microsoft/phi-4-mini-instruct',
+  'microsoft/phi-4-mini-reasoning',
+  'microsoft/phi-4-multimodal-instruct',
+  'microsoft/phi-4-reasoning',
+]
+
 const parseNextPageUrlFromLinkHeader = linkHeader => {
   if (typeof linkHeader !== 'string' || !linkHeader.trim()) {
     return null
@@ -352,7 +399,7 @@ export const streamGitHubChatCompletion = async ({
   messages,
   signal,
   onToken,
-  model = 'openai/gpt-4.1-mini',
+  model = defaultGitHubChatModel,
 }) => {
   if (typeof token !== 'string' || token.trim().length === 0) {
     throw new Error('A GitHub token is required to start a chat request.')
@@ -385,6 +432,7 @@ export const streamGitHubChatCompletion = async ({
   const reader = response.body.getReader()
   let buffered = ''
   let combined = ''
+  let responseModel = ''
 
   while (true) {
     // eslint-disable-next-line no-await-in-loop
@@ -403,6 +451,10 @@ export const streamGitHubChatCompletion = async ({
         continue
       }
 
+      if (!responseModel && typeof body.model === 'string') {
+        responseModel = body.model
+      }
+
       const chunk = extractStreamingDeltaText(body)
       if (!chunk) {
         continue
@@ -415,6 +467,9 @@ export const streamGitHubChatCompletion = async ({
 
   if (buffered.trim()) {
     const body = parseSseDataLine(buffered)
+    if (body && !responseModel && typeof body.model === 'string') {
+      responseModel = body.model
+    }
     const chunk = body ? extractStreamingDeltaText(body) : ''
     if (chunk) {
       combined += chunk
@@ -428,6 +483,7 @@ export const streamGitHubChatCompletion = async ({
 
   return {
     content: combined,
+    model: responseModel || model,
     rateLimit: parseRateMetadata({ headers: response.headers, body: null }),
   }
 }
@@ -436,7 +492,7 @@ export const requestGitHubChatCompletion = async ({
   token,
   messages,
   signal,
-  model = 'openai/gpt-4.1-mini',
+  model = defaultGitHubChatModel,
 }) => {
   if (typeof token !== 'string' || token.trim().length === 0) {
     throw new Error('A GitHub token is required to start a chat request.')
@@ -470,6 +526,7 @@ export const requestGitHubChatCompletion = async ({
 
   return {
     content,
+    model: typeof body?.model === 'string' && body.model ? body.model : model,
     rateLimit: parseRateMetadata({ headers: response.headers, body }),
   }
 }
diff --git a/src/modules/github-chat-drawer.js b/src/modules/github-chat-drawer.js
index 1a37d22..2f764cd 100644
--- a/src/modules/github-chat-drawer.js
+++ b/src/modules/github-chat-drawer.js
@@ -1,4 +1,9 @@
-import { requestGitHubChatCompletion, streamGitHubChatCompletion } from './github-api.js'
+import {
+  defaultGitHubChatModel,
+  githubChatModelOptions,
+  requestGitHubChatCompletion,
+  streamGitHubChatCompletion,
+} from './github-api.js'
 
 const toChatText = value => {
   if (typeof value !== 'string') {
@@ -8,6 +13,46 @@ const toChatText = value => {
   return value.trim()
 }
 
+const toModelId = value => {
+  if (typeof value !== 'string') {
+    return defaultGitHubChatModel
+  }
+
+  const model = value.trim()
+  return model || defaultGitHubChatModel
+}
+
+const isModelAccessError = error => {
+  const message = error instanceof Error ? error.message.toLowerCase() : ''
+  if (!message) {
+    return false
+  }
+
+  return (
+    (message.includes('model') && message.includes('access')) ||
+    (message.includes('model') && message.includes('permission')) ||
+    (message.includes('model') && message.includes('not available')) ||
+    (message.includes('model') && message.includes('not found')) ||
+    (message.includes('model') && message.includes('not enabled')) ||
+    (message.includes('forbidden') && message.includes('model'))
+  )
+}
+
+const formatModelAccessErrorMessage = selectedModel => {
+  const model = toModelId(selectedModel)
+  return `Selected model "${model}" is not available for this token. Choose a different model.`
+}
+
+const isModelAccessStatusMessage = value => {
+  if (typeof value !== 'string') {
+    return false
+  }
+
+  return (
+    value.startsWith('Selected model "') && value.includes('not available for this token')
+  )
+}
+
 const toRepositoryLabel = repository => {
   if (!repository || typeof repository !== 'object') {
     return 'No repository selected'
@@ -42,6 +87,7 @@ export const createGitHubChatDrawer = ({
   drawer,
   closeButton,
   promptInput,
+  modelSelect,
   sendButton,
   clearButton,
   statusNode,
@@ -65,6 +111,7 @@ export const createGitHubChatDrawer = ({
       setOpen: () => {},
       isOpen: () => false,
       setSelectedRepository: () => {},
+      setToken: () => {},
       dispose: () => {},
     }
   }
@@ -123,6 +170,66 @@ export const createGitHubChatDrawer = ({
     pendingAbortController = null
   }
 
+  const setModelSelectDisabled = isDisabled => {
+    if (!(modelSelect instanceof HTMLSelectElement)) {
+      return
+    }
+
+    modelSelect.disabled = isDisabled
+  }
+
+  const replaceModelOptions = ({ modelIds, selectedModel }) => {
+    if (!(modelSelect instanceof HTMLSelectElement)) {
+      return
+    }
+
+    const nextSelectedModel = toModelId(selectedModel)
+    const nextModelIds = [...new Set([defaultGitHubChatModel, ...modelIds])]
+
+    modelSelect.replaceChildren()
+
+    for (const modelId of nextModelIds) {
+      const option = document.createElement('option')
+      option.value = modelId
+      option.textContent = modelId
+      option.selected = modelId === nextSelectedModel
+      modelSelect.append(option)
+    }
+
+    if (!nextModelIds.includes(nextSelectedModel)) {
+      modelSelect.value = defaultGitHubChatModel
+    }
+  }
+
+  const getSelectedModel = () => {
+    if (!(modelSelect instanceof HTMLSelectElement)) {
+      return defaultGitHubChatModel
+    }
+
+    return toModelId(modelSelect.value)
+  }
+
+  const initializeModelOptions = () => {
+    replaceModelOptions({
+      modelIds: githubChatModelOptions,
+      selectedModel: defaultGitHubChatModel,
+    })
+  }
+
+  const syncModelSelectionForToken = token => {
+    const hasToken = typeof token === 'string' && token.trim().length > 0
+
+    setModelSelectDisabled(!hasToken)
+
+    if (!hasToken && modelSelect instanceof HTMLSelectElement) {
+      modelSelect.value = defaultGitHubChatModel
+    }
+
+    if (hasToken && isModelAccessStatusMessage(statusNode?.textContent)) {
+      setChatStatus('Idle', 'neutral')
+    }
+  }
+
   const setOpen = nextOpen => {
     open = nextOpen === true
 
@@ -207,7 +314,8 @@ export const createGitHubChatDrawer = ({
     if (messages.length === 0) {
       const emptyNode = document.createElement('p')
       emptyNode.className = 'ai-chat-empty'
-      emptyNode.textContent = 'Ask a question about your selected repository.'
+      emptyNode.textContent =
+        'Ask for help developing your component, styles, or repository workflow.'
       messagesNode.append(emptyNode)
       return
     }
@@ -219,6 +327,7 @@ export const createGitHubChatDrawer = ({
       const label = document.createElement('h3')
       label.className = 'ai-chat-message__label'
       label.textContent = message.role === 'assistant' ? 'Assistant' : 'You'
+
       item.append(label)
 
       const body = document.createElement('p')
@@ -338,6 +447,16 @@ export const createGitHubChatDrawer = ({
     if (promptInput instanceof HTMLTextAreaElement) {
       promptInput.disabled = isPending
     }
+
+    if (modelSelect instanceof HTMLSelectElement) {
+      if (isPending) {
+        modelSelect.disabled = true
+      } else {
+        const token = getToken?.()
+        const hasToken = typeof token === 'string' && token.trim().length > 0
+        modelSelect.disabled = !hasToken
+      }
+    }
   }
 
   const runChatRequest = async () => {
@@ -360,13 +479,15 @@ export const createGitHubChatDrawer = ({
       return
     }
 
+    const selectedModel = getSelectedModel()
+
     stopPendingRequest()
     const requestAbortController = new AbortController()
     const requestSignal = requestAbortController.signal
     pendingAbortController = requestAbortController
 
     appendMessage({ role: 'user', content: prompt })
-    appendMessage({ role: 'assistant', content: '' })
+    appendMessage({ role: 'assistant', content: '', model: selectedModel })
     if (promptInput instanceof HTMLTextAreaElement) {
       promptInput.value = ''
     }
@@ -389,6 +510,7 @@ export const createGitHubChatDrawer = ({
       const streamResult = await streamGitHubChatCompletion({
         token,
         messages: outboundMessages,
+        model: selectedModel,
         signal: requestSignal,
         onToken: tokenChunk => {
           streamedContent += tokenChunk
@@ -397,6 +519,14 @@ export const createGitHubChatDrawer = ({
       })
 
       streamSucceeded = true
+      const streamedModel = toChatText(streamResult?.model)
+      if (streamedModel) {
+        const lastMessage = messages[messages.length - 1]
+        if (lastMessage?.role === 'assistant' && lastMessage.model !== streamedModel) {
+          lastMessage.model = streamedModel
+          renderMessages()
+        }
+      }
       setChatStatus('Response streamed from GitHub.', 'ok')
       setRateMetadata(streamResult?.rateLimit)
     } catch (streamError) {
@@ -410,6 +540,24 @@ export const createGitHubChatDrawer = ({
         return
       }
 
+      if (isModelAccessError(streamError)) {
+        const modelAccessMessage = formatModelAccessErrorMessage(selectedModel)
+
+        updateLastAssistantMessage(modelAccessMessage)
+        const lastMessage = messages[messages.length - 1]
+        if (lastMessage) {
+          lastMessage.level = 'error'
+        }
+        renderMessages()
+        setChatStatus(modelAccessMessage, 'error')
+
+        if (pendingAbortController === requestAbortController) {
+          pendingAbortController = null
+          setPendingState(false)
+        }
+        return
+      }
+
       setChatStatus(
         'Streaming unavailable. Retrying with fallback response...',
         'pending',
@@ -428,10 +576,19 @@ export const createGitHubChatDrawer = ({
       const fallbackResult = await requestGitHubChatCompletion({
         token,
         messages: outboundMessages,
+        model: selectedModel,
         signal: requestSignal,
       })
 
       updateLastAssistantMessage(fallbackResult.content)
+      const fallbackModel = toChatText(fallbackResult.model)
+      if (fallbackModel) {
+        const lastMessage = messages[messages.length - 1]
+        if (lastMessage?.role === 'assistant' && lastMessage.model !== fallbackModel) {
+          lastMessage.model = fallbackModel
+          renderMessages()
+        }
+      }
       setChatStatus('Fallback response loaded.', 'ok')
       setRateMetadata(fallbackResult.rateLimit)
     } catch (fallbackError) {
@@ -442,8 +599,11 @@ export const createGitHubChatDrawer = ({
         return
       }
 
-      const fallbackMessage =
-        fallbackError instanceof Error ? fallbackError.message : 'Chat request failed.'
+      const fallbackMessage = isModelAccessError(fallbackError)
+        ? formatModelAccessErrorMessage(selectedModel)
+        : fallbackError instanceof Error
+          ? fallbackError.message
+          : 'Chat request failed.'
 
       setRateMetadata(fallbackError?.rateLimit)
 
@@ -464,6 +624,8 @@ export const createGitHubChatDrawer = ({
 
   toggleButton?.setAttribute('aria-expanded', 'false')
   drawer?.setAttribute('hidden', '')
+  initializeModelOptions()
+  syncModelSelectionForToken(getToken?.())
   syncRepositoryLabel()
   renderMessages()
   setChatStatus('Idle', 'neutral')
@@ -515,6 +677,9 @@ export const createGitHubChatDrawer = ({
     setSelectedRepository: () => {
       syncRepositoryLabel()
     },
+    setToken: token => {
+      syncModelSelectionForToken(token)
+    },
     dispose: () => {
       stopPendingRequest()
       setPendingState(false)
diff --git a/src/styles/ai-controls.css b/src/styles/ai-controls.css
index 75ecbb7..b746fbe 100644
--- a/src/styles/ai-controls.css
+++ b/src/styles/ai-controls.css
@@ -192,7 +192,7 @@
   position: fixed;
   top: 82px;
   left: auto;
-  right: 18px;
+  right: 24px;
   width: min(560px, calc(100vw - 24px));
   max-height: min(78vh, 820px);
   padding: 14px;
@@ -209,12 +209,12 @@
 }
 
 .ai-chat-drawer.ai-chat-drawer--right {
-  right: 18px;
+  right: 24px;
   left: auto;
 }
 
 .ai-chat-drawer.ai-chat-drawer--left {
-  left: 18px;
+  left: 24px;
   right: auto;
 }
 
@@ -237,30 +237,21 @@
 .ai-chat-drawer__meta {
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  justify-content: flex-start;
   gap: 10px;
   border-top: 1px solid var(--border-subtle);
   border-bottom: 1px solid var(--border-subtle);
   padding: 8px 0;
 }
 
-.ai-chat-drawer__repo,
 .ai-chat-drawer__status {
   margin: 0;
   font-size: 0.78rem;
 }
 
-.ai-chat-drawer__repo {
-  color: var(--text-muted);
-  max-width: 66%;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-}
-
 .ai-chat-drawer__status {
   color: var(--text-subtle);
-  text-align: right;
+  text-align: left;
 }
 
 .ai-chat-drawer__status[data-level='pending'] {
@@ -278,6 +269,7 @@
 .ai-chat-drawer__rate {
   margin: -2px 0 0;
   font-size: 0.74rem;
+  font-style: italic;
   color: var(--text-muted);
   align-self: start;
 }
@@ -337,6 +329,9 @@
 
 .ai-chat-prompt {
   resize: vertical;
+  width: 100%;
+  min-width: 0;
+  box-sizing: border-box;
   min-height: 72px;
   max-height: 220px;
   border: 1px solid var(--border-control);
@@ -353,6 +348,44 @@
   outline-offset: 1px;
 }
 
+.ai-chat-model-picker {
+  display: grid;
+  width: 100%;
+  min-width: 0;
+  gap: 6px;
+  font-size: 0.76rem;
+  color: var(--text-muted);
+}
+
+.ai-chat-model-picker select {
+  appearance: none;
+  -webkit-appearance: none;
+  width: 100%;
+  min-width: 0;
+  box-sizing: border-box;
+  border: 1px solid var(--border-control);
+  border-radius: 9px;
+  background: var(--surface-select);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='currentColor' d='M1.2 0 5 3.8 8.8 0 10 1.2 5 6 0 1.2z'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 10px center;
+  color: var(--select-text);
+  padding: 6px 30px 6px 10px;
+  font-size: 0.8rem;
+  font-family: inherit;
+  color-scheme: var(--control-color-scheme);
+}
+
+.ai-chat-model-picker select:focus-visible {
+  outline: 2px solid var(--focus-ring);
+  outline-offset: 1px;
+}
+
+.ai-chat-model-picker select:disabled {
+  opacity: 0.7;
+  cursor: not-allowed;
+}
+
 .ai-chat-drawer__actions {
   display: flex;
   gap: 8px;
@@ -446,21 +479,19 @@
     max-width: min(58vw, 260px);
   }
 
-  .ai-chat-drawer {
+  .ai-chat-drawer,
+  .ai-chat-drawer.ai-chat-drawer--right,
+  .ai-chat-drawer.ai-chat-drawer--left {
     top: auto;
-    right: 12px;
-    left: 12px;
-    bottom: 12px;
-    width: auto;
-    max-height: 68vh;
+    right: 24px;
+    left: 24px;
+    bottom: auto;
+    width: calc(100vw - 48px);
+    max-width: none;
+    max-height: min(68vh, calc(100dvh - 100px));
   }
 
   .ai-chat-drawer__meta {
-    flex-direction: column;
     align-items: flex-start;
   }
-
-  .ai-chat-drawer__repo {
-    max-width: 100%;
-  }
 }
diff --git a/src/styles/diagnostics.css b/src/styles/diagnostics.css
index ee8e1e2..9bfb21f 100644
--- a/src/styles/diagnostics.css
+++ b/src/styles/diagnostics.css
@@ -216,10 +216,10 @@
 @media (max-width: 900px) {
   .diagnostics-drawer {
     top: auto;
-    right: 12px;
-    left: 12px;
-    bottom: 12px;
-    width: auto;
-    max-height: 58vh;
+    right: 24px;
+    left: 24px;
+    bottom: auto;
+    width: calc(100vw - 48px);
+    max-height: min(58vh, calc(100dvh - 100px));
   }
 }
diff --git a/src/styles/layout-shell.css b/src/styles/layout-shell.css
index a3309e3..2f194e4 100644
--- a/src/styles/layout-shell.css
+++ b/src/styles/layout-shell.css
@@ -245,6 +245,10 @@
   display: none;
 }
 
+.app-grid-ai-toggle[hidden] {
+  display: none;
+}
+
 .app-grid-theme-controls {
   display: inline-flex;
   gap: 10px;
@@ -306,7 +310,7 @@
   }
 
   .app-grid-view-controls[hidden] {
-    display: none !important;
+    display: none;
   }
 
   .app-grid-theme-controls {
@@ -324,7 +328,7 @@
 }
 
 @media (max-width: 900px) {
-  .app-grid-ai-toggle {
+  .app-grid-ai-toggle:not([hidden]) {
     display: inline-flex;
   }
 }
diff --git a/tsconfig.json b/tsconfig.json
index 02e4c52..fd6d217 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -6,6 +6,7 @@
     "moduleResolution": "NodeNext",
     "strict": true,
     "noEmit": true,
+    "allowJs": true,
     "types": ["node", "@playwright/test"]
   },
   "include": ["playwright/**/*.ts", "playwright.config.ts"]