From 5e6be8985354f217bb05ec10e239ac38944cc9a2 Mon Sep 17 00:00:00 2001
From: KCM <knightedcodemonkey@gmail.com>
Date: Sat, 21 Mar 2026 20:47:22 -0500
Subject: [PATCH 1/5] refactor: github controls, other enhancements.

---
 src/index.html                    |  9 ++----
 src/modules/github-api.js         | 16 ++++++++--
 src/modules/github-chat-drawer.js | 51 +++++++++++++++++++++++++++++--
 src/styles/ai-controls.css        | 48 ++++++++++++++---------------
 src/styles/diagnostics.css        | 10 +++---
 src/styles/layout-shell.css       |  8 +++--
 6 files changed, 99 insertions(+), 43 deletions(-)

diff --git a/src/index.html b/src/index.html
index 4bad76f..59255b2 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>
 
@@ -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,7 +557,7 @@ <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-context-toggle" for="ai-chat-include-editors">
diff --git a/src/modules/github-api.js b/src/modules/github-api.js
index bb905e4..b9f4a01 100644
--- a/src/modules/github-api.js
+++ b/src/modules/github-api.js
@@ -1,6 +1,8 @@
 const githubApiBaseUrl = 'https://api.github.com'
 const githubModelsApiUrl = 'https://models.github.ai/inference/chat/completions'
 
+export const defaultGitHubChatModel = 'openai/gpt-4.1-mini'
+
 const parseNextPageUrlFromLinkHeader = linkHeader => {
   if (typeof linkHeader !== 'string' || !linkHeader.trim()) {
     return null
@@ -352,7 +354,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 +387,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 +406,10 @@ export const streamGitHubChatCompletion = async ({
         continue
       }
 
+      if (!responseModel && typeof body.model === 'string') {
+        responseModel = body.model
+      }
+
       const chunk = extractStreamingDeltaText(body)
       if (!chunk) {
         continue
@@ -415,6 +422,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 +438,7 @@ export const streamGitHubChatCompletion = async ({
 
   return {
     content: combined,
+    model: responseModel || model,
     rateLimit: parseRateMetadata({ headers: response.headers, body: null }),
   }
 }
@@ -436,7 +447,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 +481,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..b3a580c 100644
--- a/src/modules/github-chat-drawer.js
+++ b/src/modules/github-chat-drawer.js
@@ -1,4 +1,8 @@
-import { requestGitHubChatCompletion, streamGitHubChatCompletion } from './github-api.js'
+import {
+  defaultGitHubChatModel,
+  requestGitHubChatCompletion,
+  streamGitHubChatCompletion,
+} from './github-api.js'
 
 const toChatText = value => {
   if (typeof value !== 'string') {
@@ -8,6 +12,19 @@ const toChatText = value => {
   return value.trim()
 }
 
+const toModelLabelText = value => {
+  if (typeof value !== 'string') {
+    return ''
+  }
+
+  const model = value.trim()
+  if (!model) {
+    return ''
+  }
+
+  return `(${model})`
+}
+
 const toRepositoryLabel = repository => {
   if (!repository || typeof repository !== 'object') {
     return 'No repository selected'
@@ -207,7 +224,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 +237,17 @@ export const createGitHubChatDrawer = ({
       const label = document.createElement('h3')
       label.className = 'ai-chat-message__label'
       label.textContent = message.role === 'assistant' ? 'Assistant' : 'You'
+
+      if (message.role === 'assistant') {
+        const modelLabelText = toModelLabelText(message.model)
+        if (modelLabelText) {
+          const modelLabel = document.createElement('span')
+          modelLabel.className = 'ai-chat-message__label-model'
+          modelLabel.textContent = modelLabelText
+          label.append(modelLabel)
+        }
+      }
+
       item.append(label)
 
       const body = document.createElement('p')
@@ -366,7 +395,7 @@ export const createGitHubChatDrawer = ({
     pendingAbortController = requestAbortController
 
     appendMessage({ role: 'user', content: prompt })
-    appendMessage({ role: 'assistant', content: '' })
+    appendMessage({ role: 'assistant', content: '', model: defaultGitHubChatModel })
     if (promptInput instanceof HTMLTextAreaElement) {
       promptInput.value = ''
     }
@@ -397,6 +426,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) {
@@ -432,6 +469,14 @@ export const createGitHubChatDrawer = ({
       })
 
       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) {
diff --git a/src/styles/ai-controls.css b/src/styles/ai-controls.css
index 75ecbb7..38a1e6f 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;
 }
@@ -328,6 +320,14 @@
   color: var(--text-muted);
 }
 
+.ai-chat-message__label-model {
+  margin-left: 6px;
+  font-size: 0.64rem;
+  letter-spacing: 0;
+  text-transform: none;
+  color: color-mix(in srgb, var(--text-muted) 72%, var(--panel-text));
+}
+
 .ai-chat-message__body {
   margin: 4px 0 0;
   font-size: 0.85rem;
@@ -446,21 +446,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;
   }
 }

From 8405b5d3280ef9bd3f84671a06a0a3c7afbb0079 Mon Sep 17 00:00:00 2001
From: KCM <knightedcodemonkey@gmail.com>
Date: Sat, 21 Mar 2026 21:13:03 -0500
Subject: [PATCH 2/5] feat: model picker.

---
 playwright/app.spec.ts            |  12 +--
 src/app.js                        |   4 +
 src/index.html                    |   9 ++-
 src/modules/github-api.js         |  45 +++++++++++
 src/modules/github-chat-drawer.js | 124 +++++++++++++++++++++++++-----
 src/styles/ai-controls.css        |  38 +++++++--
 6 files changed, 199 insertions(+), 33 deletions(-)

diff --git a/playwright/app.spec.ts b/playwright/app.spec.ts
index 2b6be42..08461f9 100644
--- a/playwright/app.spec.ts
+++ b/playwright/app.spec.ts
@@ -433,7 +433,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 +668,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 +678,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 +762,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 +854,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 +865,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 59255b2..b59d359 100644
--- a/src/index.html
+++ b/src/index.html
@@ -455,7 +455,7 @@ <h2>Preview</h2>
             </label>
             <label class="toggle">
               <input id="shadow-toggle" type="checkbox" checked />
-              ShadowRoot (open)
+              ShadowRoot
             </label>
             <button
               class="hint-icon shadow-hint"
@@ -560,6 +560,13 @@ <h2>AI Chat</h2>
           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 b9f4a01..53a8ef5 100644
--- a/src/modules/github-api.js
+++ b/src/modules/github-api.js
@@ -3,6 +3,51 @@ 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
diff --git a/src/modules/github-chat-drawer.js b/src/modules/github-chat-drawer.js
index b3a580c..e5bc1ae 100644
--- a/src/modules/github-chat-drawer.js
+++ b/src/modules/github-chat-drawer.js
@@ -1,5 +1,6 @@
 import {
   defaultGitHubChatModel,
+  githubChatModelOptions,
   requestGitHubChatCompletion,
   streamGitHubChatCompletion,
 } from './github-api.js'
@@ -12,17 +13,34 @@ const toChatText = value => {
   return value.trim()
 }
 
-const toModelLabelText = value => {
+const toModelId = value => {
   if (typeof value !== 'string') {
-    return ''
+    return defaultGitHubChatModel
   }
 
   const model = value.trim()
-  if (!model) {
-    return ''
+  return model || defaultGitHubChatModel
+}
+
+const isModelAccessError = error => {
+  const message = error instanceof Error ? error.message.toLowerCase() : ''
+  if (!message) {
+    return false
   }
 
-  return `(${model})`
+  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 toRepositoryLabel = repository => {
@@ -59,6 +77,7 @@ export const createGitHubChatDrawer = ({
   drawer,
   closeButton,
   promptInput,
+  modelSelect,
   sendButton,
   clearButton,
   statusNode,
@@ -82,6 +101,7 @@ export const createGitHubChatDrawer = ({
       setOpen: () => {},
       isOpen: () => false,
       setSelectedRepository: () => {},
+      setToken: () => {},
       dispose: () => {},
     }
   }
@@ -140,6 +160,53 @@ 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,
+    })
+    setModelSelectDisabled(false)
+  }
+
   const setOpen = nextOpen => {
     open = nextOpen === true
 
@@ -238,16 +305,6 @@ export const createGitHubChatDrawer = ({
       label.className = 'ai-chat-message__label'
       label.textContent = message.role === 'assistant' ? 'Assistant' : 'You'
 
-      if (message.role === 'assistant') {
-        const modelLabelText = toModelLabelText(message.model)
-        if (modelLabelText) {
-          const modelLabel = document.createElement('span')
-          modelLabel.className = 'ai-chat-message__label-model'
-          modelLabel.textContent = modelLabelText
-          label.append(modelLabel)
-        }
-      }
-
       item.append(label)
 
       const body = document.createElement('p')
@@ -367,6 +424,10 @@ export const createGitHubChatDrawer = ({
     if (promptInput instanceof HTMLTextAreaElement) {
       promptInput.disabled = isPending
     }
+
+    if (modelSelect instanceof HTMLSelectElement) {
+      modelSelect.disabled = isPending
+    }
   }
 
   const runChatRequest = async () => {
@@ -389,13 +450,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: '', model: defaultGitHubChatModel })
+    appendMessage({ role: 'assistant', content: '', model: selectedModel })
     if (promptInput instanceof HTMLTextAreaElement) {
       promptInput.value = ''
     }
@@ -418,6 +481,7 @@ export const createGitHubChatDrawer = ({
       const streamResult = await streamGitHubChatCompletion({
         token,
         messages: outboundMessages,
+        model: selectedModel,
         signal: requestSignal,
         onToken: tokenChunk => {
           streamedContent += tokenChunk
@@ -447,6 +511,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',
@@ -465,6 +547,7 @@ export const createGitHubChatDrawer = ({
       const fallbackResult = await requestGitHubChatCompletion({
         token,
         messages: outboundMessages,
+        model: selectedModel,
         signal: requestSignal,
       })
 
@@ -487,8 +570,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)
 
@@ -509,6 +595,7 @@ export const createGitHubChatDrawer = ({
 
   toggleButton?.setAttribute('aria-expanded', 'false')
   drawer?.setAttribute('hidden', '')
+  initializeModelOptions()
   syncRepositoryLabel()
   renderMessages()
   setChatStatus('Idle', 'neutral')
@@ -560,6 +647,7 @@ export const createGitHubChatDrawer = ({
     setSelectedRepository: () => {
       syncRepositoryLabel()
     },
+    setToken: () => {},
     dispose: () => {
       stopPendingRequest()
       setPendingState(false)
diff --git a/src/styles/ai-controls.css b/src/styles/ai-controls.css
index 38a1e6f..58d93b1 100644
--- a/src/styles/ai-controls.css
+++ b/src/styles/ai-controls.css
@@ -320,14 +320,6 @@
   color: var(--text-muted);
 }
 
-.ai-chat-message__label-model {
-  margin-left: 6px;
-  font-size: 0.64rem;
-  letter-spacing: 0;
-  text-transform: none;
-  color: color-mix(in srgb, var(--text-muted) 72%, var(--panel-text));
-}
-
 .ai-chat-message__body {
   margin: 4px 0 0;
   font-size: 0.85rem;
@@ -353,6 +345,36 @@
   outline-offset: 1px;
 }
 
+.ai-chat-model-picker {
+  display: grid;
+  gap: 6px;
+  font-size: 0.76rem;
+  color: var(--text-muted);
+}
+
+.ai-chat-model-picker select {
+  appearance: none;
+  -webkit-appearance: none;
+  border: 1px solid var(--border-control);
+  border-radius: 9px;
+  background: var(--surface-select);
+  color: var(--select-text);
+  padding: 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;

From df65da8d5aaa40737f2571f2ac6f065ee6161412 Mon Sep 17 00:00:00 2001
From: KCM <knightedcodemonkey@gmail.com>
Date: Sat, 21 Mar 2026 21:18:09 -0500
Subject: [PATCH 3/5] refactor: change aria-label to fix test selectors.

---
 src/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/index.html b/src/index.html
index b59d359..ddd28fc 100644
--- a/src/index.html
+++ b/src/index.html
@@ -460,7 +460,7 @@ <h2>Preview</h2>
             <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

From e97181d1072c8fb1a0962a646aded7ef19e1cb71 Mon Sep 17 00:00:00 2001
From: KCM <knightedcodemonkey@gmail.com>
Date: Sat, 21 Mar 2026 21:35:26 -0500
Subject: [PATCH 4/5] refactor: address comments.

---
 playwright/app.spec.ts            | 17 +++++++++++++-
 src/modules/github-chat-drawer.js | 38 ++++++++++++++++++++++++++++---
 src/styles/ai-controls.css        |  5 +++-
 tsconfig.json                     |  1 +
 4 files changed, 56 insertions(+), 5 deletions(-)

diff --git a/playwright/app.spec.ts b/playwright/app.spec.ts
index 08461f9..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 }) => {
diff --git a/src/modules/github-chat-drawer.js b/src/modules/github-chat-drawer.js
index e5bc1ae..2f764cd 100644
--- a/src/modules/github-chat-drawer.js
+++ b/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)
diff --git a/src/styles/ai-controls.css b/src/styles/ai-controls.css
index 58d93b1..516bfc1 100644
--- a/src/styles/ai-controls.css
+++ b/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);
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"]

From fc6d5435fee9b13b81a7ef1e50d4923dd19f0321 Mon Sep 17 00:00:00 2001
From: KCM <knightedcodemonkey@gmail.com>
Date: Sat, 21 Mar 2026 21:46:38 -0500
Subject: [PATCH 5/5] fix: chat control responsiveness.

---
 src/styles/ai-controls.css | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/styles/ai-controls.css b/src/styles/ai-controls.css
index 516bfc1..b746fbe 100644
--- a/src/styles/ai-controls.css
+++ b/src/styles/ai-controls.css
@@ -329,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);
@@ -347,6 +350,8 @@
 
 .ai-chat-model-picker {
   display: grid;
+  width: 100%;
+  min-width: 0;
   gap: 6px;
   font-size: 0.76rem;
   color: var(--text-muted);
@@ -355,6 +360,9 @@
 .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);