refactor: github controls, other enhancements.

Author: knightedcodemonkey

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">

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 }),
   }
 }

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

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%;
-  }
 }

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));
   }
 }

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;
   }
 }