refactor: address comments.

Author: knightedcodemonkey

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 }) => {

src/modules/github-chat-drawer.js

@@ -43,6 +43,16 @@ const formatModelAccessErrorMessage = 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'
@@ -204,7 +214,20 @@ export const createGitHubChatDrawer = ({
       modelIds: githubChatModelOptions,
       selectedModel: defaultGitHubChatModel,
     })
-    setModelSelectDisabled(false)
+  }
+
+  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 => {
@@ -426,7 +449,13 @@ export const createGitHubChatDrawer = ({
     }
 
     if (modelSelect instanceof HTMLSelectElement) {
-      modelSelect.disabled = isPending
+      if (isPending) {
+        modelSelect.disabled = true
+      } else {
+        const token = getToken?.()
+        const hasToken = typeof token === 'string' && token.trim().length > 0
+        modelSelect.disabled = !hasToken
+      }
     }
   }
 
@@ -596,6 +625,7 @@ export const createGitHubChatDrawer = ({
   toggleButton?.setAttribute('aria-expanded', 'false')
   drawer?.setAttribute('hidden', '')
   initializeModelOptions()
+  syncModelSelectionForToken(getToken?.())
   syncRepositoryLabel()
   renderMessages()
   setChatStatus('Idle', 'neutral')
@@ -647,7 +677,9 @@ export const createGitHubChatDrawer = ({
     setSelectedRepository: () => {
       syncRepositoryLabel()
     },
-    setToken: () => {},
+    setToken: token => {
+      syncModelSelectionForToken(token)
+    },
     dispose: () => {
       stopPendingRequest()
       setPendingState(false)

src/styles/ai-controls.css

@@ -358,8 +358,11 @@
   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 10px;
+  padding: 6px 30px 6px 10px;
   font-size: 0.8rem;
   font-family: inherit;
   color-scheme: var(--control-color-scheme);

tsconfig.json

@@ -6,6 +6,7 @@
     "moduleResolution": "NodeNext",
     "strict": true,
     "noEmit": true,
+    "allowJs": true,
     "types": ["node", "@playwright/test"]
   },
   "include": ["playwright/**/*.ts", "playwright.config.ts"]