From ef6ae0597f7312e38a04e52cb34932b8e6f52eb4 Mon Sep 17 00:00:00 2001
From: KCM <knightedcodemonkey@gmail.com>
Date: Fri, 27 Mar 2026 18:14:36 -0500
Subject: [PATCH 1/2] refactor: icons.

---
 src/index.html                      | 45 +++++++++++++++--------------
 src/modules/github-byot-controls.js | 25 ++++++++++++----
 src/styles/ai-controls.css          | 35 +++++++++++++---------
 src/styles/layout-shell.css         | 10 +++++++
 src/styles/panels-editor.css        |  9 ++++--
 5 files changed, 81 insertions(+), 43 deletions(-)

diff --git a/src/index.html b/src/index.html
index 6c8be3e..839ddab 100644
--- a/src/index.html
+++ b/src/index.html
@@ -49,7 +49,14 @@ <h1>
               aria-expanded="false"
               aria-controls="github-token-info-panel"
             >
-              i
+              <svg viewBox="0 0 24 24" aria-hidden="true">
+                <path
+                  d="M13 16.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm-2.517-7.665c.112-.223.268-.424.488-.57C11.186 8.12 11.506 8 12 8c.384 0 .766.118 1.034.319a.953.953 0 0 1 .403.806c0 .48-.218.81-.62 1.186a9.293 9.293 0 0 1-.409.354 19.8 19.8 0 0 0-.294.249c-.246.213-.524.474-.738.795l-.126.19V13.5a.75.75 0 0 0 1.5 0v-1.12c.09-.1.203-.208.347-.333.063-.055.14-.119.222-.187.166-.14.358-.3.52-.452.536-.5 1.098-1.2 1.098-2.283a2.45 2.45 0 0 0-1.003-2.006C13.37 6.695 12.658 6.5 12 6.5c-.756 0-1.373.191-1.861.517a2.944 2.944 0 0 0-.997 1.148.75.75 0 0 0 1.341.67Z"
+                ></path>
+                <path
+                  d="M9.864 1.2a3.61 3.61 0 0 1 4.272 0l1.375 1.01c.274.2.593.333.929.384l1.686.259a3.61 3.61 0 0 1 3.021 3.02l.259 1.687c.051.336.183.655.384.929l1.01 1.375a3.61 3.61 0 0 1 0 4.272l-1.01 1.375a2.106 2.106 0 0 0-.384.929l-.259 1.686a3.61 3.61 0 0 1-3.02 3.021l-1.687.259a2.106 2.106 0 0 0-.929.384l-1.375 1.01a3.61 3.61 0 0 1-4.272 0l-1.375-1.01a2.106 2.106 0 0 0-.929-.384l-1.686-.259a3.61 3.61 0 0 1-3.021-3.02l-.259-1.687a2.106 2.106 0 0 0-.384-.929L1.2 14.136a3.61 3.61 0 0 1 0-4.272l1.01-1.375c.201-.274.333-.593.384-.929l.259-1.686a3.61 3.61 0 0 1 3.02-3.021l1.687-.259c.336-.051.655-.183.929-.384Zm3.384 1.209a2.11 2.11 0 0 0-2.496 0l-1.376 1.01a3.61 3.61 0 0 1-1.589.658l-1.686.258a2.111 2.111 0 0 0-1.766 1.766l-.258 1.686a3.614 3.614 0 0 1-.658 1.59l-1.01 1.375a2.11 2.11 0 0 0 0 2.496l1.01 1.376a3.61 3.61 0 0 1 .658 1.589l.258 1.686a2.11 2.11 0 0 0 1.766 1.765l1.686.26a3.613 3.613 0 0 1 1.59.657l1.375 1.01a2.11 2.11 0 0 0 2.496 0l1.376-1.01a3.61 3.61 0 0 1 1.589-.658l1.686-.258a2.11 2.11 0 0 0 1.765-1.766l.26-1.686a3.613 3.613 0 0 1 .657-1.59l1.01-1.375a2.11 2.11 0 0 0 0-2.496l-1.01-1.376a3.61 3.61 0 0 1-.658-1.589l-.258-1.686a2.111 2.111 0 0 0-1.766-1.766l-1.686-.258a3.614 3.614 0 0 1-1.59-.658Z"
+                ></path>
+              </svg>
             </button>
             <div class="github-token-info-panel" id="github-token-info-panel" hidden>
               <p
@@ -77,7 +84,7 @@ <h1>
               autocomplete="off"
               autocapitalize="off"
               spellcheck="false"
-              placeholder="GitHub BYOT"
+              placeholder="GitHub PAT"
               aria-label="GitHub token"
               aria-describedby="github-token-privacy-note"
             />
@@ -92,9 +99,10 @@ <h1>
               aria-label="Add GitHub token"
               title="Add GitHub token"
             >
-              <svg viewBox="0 0 24 24" aria-hidden="true">
-                <path d="M12 5v14"></path>
-                <path d="M5 12h14"></path>
+              <svg viewBox="0 0 16 16" aria-hidden="true">
+                <path
+                  d="M7.75 2a.75.75 0 0 1 .75.75V7h4.25a.75.75 0 0 1 0 1.5H8.5v4.25a.75.75 0 0 1-1.5 0V8.5H2.75a.75.75 0 0 1 0-1.5H7V2.75A.75.75 0 0 1 7.75 2Z"
+                ></path>
               </svg>
             </button>
             <button
@@ -189,7 +197,12 @@ <h1>
             aria-controls="github-ai-controls"
             hidden
           >
-            GitHub
+            <span>GitHub</span>
+            <svg viewBox="0 0 16 16" aria-hidden="true">
+              <path
+                d="M6.766 11.328c-2.063-.25-3.516-1.734-3.516-3.656 0-.781.281-1.625.75-2.188-.203-.515-.172-1.609.063-2.062.625-.078 1.468.25 1.968.703.594-.187 1.219-.281 1.985-.281.765 0 1.39.094 1.953.265.484-.437 1.344-.765 1.969-.687.218.422.25 1.515.046 2.047.5.593.766 1.39.766 2.203 0 1.922-1.453 3.375-3.547 3.64.531.344.89 1.094.89 1.954v1.625c0 .468.391.734.86.547C13.781 14.359 16 11.53 16 8.03 16 3.61 12.406 0 7.984 0 3.563 0 0 3.61 0 8.031a7.88 7.88 0 0 0 5.172 7.422c.422.156.828-.125.828-.547v-1.25c-.219.094-.5.156-.75.156-1.031 0-1.64-.562-2.078-1.609-.172-.422-.36-.672-.719-.719-.187-.015-.25-.093-.25-.187 0-.188.313-.328.625-.328.453 0 .844.281 1.25.86.313.452.64.655 1.031.655s.641-.14 1-.5c.266-.265.47-.5.657-.656"
+              ></path>
+            </svg>
           </button>
         </div>
 
@@ -318,16 +331,10 @@ <h2>Component</h2>
                 title="Show component tools"
                 aria-label="Show component tools"
               >
-                <svg viewBox="0 0 24 24" aria-hidden="true">
+                <svg viewBox="0 0 16 16" aria-hidden="true">
                   <path
-                    d="M20.017 14.669L23 13.564l-.012-3.208-2.996-1.085a8.455 8.455 0 0 0-.437-1.05l1.329-2.893-2.277-2.26-2.886 1.351a8.396 8.396 0 0 0-1.052-.436L13.564 1l-3.208.012-1.085 2.996a8.485 8.485 0 0 0-1.05.437L5.328 3.116l-2.26 2.276L4.419 8.28a8.378 8.378 0 0 0-.436 1.052L1 10.436l.012 3.208 2.996 1.085a8.46 8.46 0 0 0 .437 1.05l-1.329 2.893 2.276 2.26 2.887-1.351a8.383 8.383 0 0 0 1.052.436L10.436 23l3.208-.012 1.085-2.996a8.478 8.478 0 0 0 1.05-.437l2.893 1.329 2.26-2.276-1.351-2.887a8.382 8.382 0 0 0 .436-1.052zm-.287 3.73l-1.275 1.285-2.694-1.238-.429.215a7.612 7.612 0 0 1-.928.385l-.452.156-1.01 2.789-1.81.007-1.03-2.779-.456-.151a7.394 7.394 0 0 1-.926-.385l-.43-.21-2.688 1.257-1.286-1.275 1.239-2.695-.216-.43a7.551 7.551 0 0 1-.386-.926l-.155-.452-2.79-1.01-.005-1.81 2.777-1.03.152-.456a7.46 7.46 0 0 1 .384-.927l.212-.43L4.27 5.601l1.275-1.285 2.694 1.238.429-.215a7.612 7.612 0 0 1 .928-.385l.452-.156 1.01-2.789 1.81-.007 1.03 2.779.456.151a7.35 7.35 0 0 1 .925.385l.43.211L18.4 4.27l1.285 1.275-1.239 2.695.216.43a7.551 7.551 0 0 1 .386.926l.155.452 2.79 1.01.005 1.81-2.777 1.03-.152.456a7.46 7.46 0 0 1-.384.927l-.212.43zM12 7.2a4.8 4.8 0 1 0 4.8 4.8A4.8 4.8 0 0 0 12 7.2z"
+                    d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
                   ></path>
-                  <circle
-                    class="editor-tools-toggle__inner-ring"
-                    cx="12"
-                    cy="12"
-                    r="3.8"
-                  ></circle>
                 </svg>
               </button>
               <button
@@ -420,16 +427,10 @@ <h2>Styles</h2>
                 title="Show styles tools"
                 aria-label="Show styles tools"
               >
-                <svg viewBox="0 0 24 24" aria-hidden="true">
+                <svg viewBox="0 0 16 16" aria-hidden="true">
                   <path
-                    d="M20.017 14.669L23 13.564l-.012-3.208-2.996-1.085a8.455 8.455 0 0 0-.437-1.05l1.329-2.893-2.277-2.26-2.886 1.351a8.396 8.396 0 0 0-1.052-.436L13.564 1l-3.208.012-1.085 2.996a8.485 8.485 0 0 0-1.05.437L5.328 3.116l-2.26 2.276L4.419 8.28a8.378 8.378 0 0 0-.436 1.052L1 10.436l.012 3.208 2.996 1.085a8.46 8.46 0 0 0 .437 1.05l-1.329 2.893 2.276 2.26 2.887-1.351a8.383 8.383 0 0 0 1.052.436L10.436 23l3.208-.012 1.085-2.996a8.478 8.478 0 0 0 1.05-.437l2.893 1.329 2.26-2.276-1.351-2.887a8.382 8.382 0 0 0 .436-1.052zm-.287 3.73l-1.275 1.285-2.694-1.238-.429.215a7.612 7.612 0 0 1-.928.385l-.452.156-1.01 2.789-1.81.007-1.03-2.779-.456-.151a7.394 7.394 0 0 1-.926-.385l-.43-.21-2.688 1.257-1.286-1.275 1.239-2.695-.216-.43a7.551 7.551 0 0 1-.386-.926l-.155-.452-2.79-1.01-.005-1.81 2.777-1.03.152-.456a7.46 7.46 0 0 1 .384-.927l.212-.43L4.27 5.601l1.275-1.285 2.694 1.238.429-.215a7.612 7.612 0 0 1 .928-.385l.452-.156 1.01-2.789 1.81-.007 1.03 2.779.456.151a7.35 7.35 0 0 1 .925.385l.43.211L18.4 4.27l1.285 1.275-1.239 2.695.216.43a7.551 7.551 0 0 1 .386.926l.155.452 2.79 1.01.005 1.81-2.777 1.03-.152.456a7.46 7.46 0 0 1-.384.927l-.212.43zM12 7.2a4.8 4.8 0 1 0 4.8 4.8A4.8 4.8 0 0 0 12 7.2z"
+                    d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
                   ></path>
-                  <circle
-                    class="editor-tools-toggle__inner-ring"
-                    cx="12"
-                    cy="12"
-                    r="3.8"
-                  ></circle>
                 </svg>
               </button>
               <button
diff --git a/src/modules/github-byot-controls.js b/src/modules/github-byot-controls.js
index a2f097b..7b45011 100644
--- a/src/modules/github-byot-controls.js
+++ b/src/modules/github-byot-controls.js
@@ -78,15 +78,28 @@ export const createGitHubByotControls = ({
   let lastSelectedRepository = loadSelectedRepository()
 
   const tokenAddPlusIcon = `
-    <svg viewBox="0 0 24 24" aria-hidden="true">
-      <path d="M12 5v14"></path>
-      <path d="M5 12h14"></path>
+    <svg viewBox="0 0 16 16" aria-hidden="true">
+      <path d="M7.75 2a.75.75 0 0 1 .75.75V7h4.25a.75.75 0 0 1 0 1.5H8.5v4.25a.75.75 0 0 1-1.5 0V8.5H2.75a.75.75 0 0 1 0-1.5H7V2.75A.75.75 0 0 1 7.75 2Z"></path>
     </svg>
   `
 
   const tokenAddCheckIcon = `
+    <svg viewBox="0 0 16 16" aria-hidden="true">
+      <path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm1.5 0a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Zm10.28-1.72-4.5 4.5a.75.75 0 0 1-1.06 0l-2-2a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018l1.47 1.47 3.97-3.97a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042Z"></path>
+    </svg>
+  `
+
+  const tokenInfoMissingIcon = `
+    <svg viewBox="0 0 24 24" aria-hidden="true">
+      <path d="M13 16.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm-2.517-7.665c.112-.223.268-.424.488-.57C11.186 8.12 11.506 8 12 8c.384 0 .766.118 1.034.319a.953.953 0 0 1 .403.806c0 .48-.218.81-.62 1.186a9.293 9.293 0 0 1-.409.354 19.8 19.8 0 0 0-.294.249c-.246.213-.524.474-.738.795l-.126.19V13.5a.75.75 0 0 0 1.5 0v-1.12c.09-.1.203-.208.347-.333.063-.055.14-.119.222-.187.166-.14.358-.3.52-.452.536-.5 1.098-1.2 1.098-2.283a2.45 2.45 0 0 0-1.003-2.006C13.37 6.695 12.658 6.5 12 6.5c-.756 0-1.373.191-1.861.517a2.944 2.944 0 0 0-.997 1.148.75.75 0 0 0 1.341.67Z"></path>
+      <path d="M9.864 1.2a3.61 3.61 0 0 1 4.272 0l1.375 1.01c.274.2.593.333.929.384l1.686.259a3.61 3.61 0 0 1 3.021 3.02l.259 1.687c.051.336.183.655.384.929l1.01 1.375a3.61 3.61 0 0 1 0 4.272l-1.01 1.375a2.106 2.106 0 0 0-.384.929l-.259 1.686a3.61 3.61 0 0 1-3.02 3.021l-1.687.259a2.106 2.106 0 0 0-.929.384l-1.375 1.01a3.61 3.61 0 0 1-4.272 0l-1.375-1.01a2.106 2.106 0 0 0-.929-.384l-1.686-.259a3.61 3.61 0 0 1-3.021-3.02l-.259-1.687a2.106 2.106 0 0 0-.384-.929L1.2 14.136a3.61 3.61 0 0 1 0-4.272l1.01-1.375c.201-.274.333-.593.384-.929l.259-1.686a3.61 3.61 0 0 1 3.02-3.021l1.687-.259c.336-.051.655-.183.929-.384Zm3.384 1.209a2.11 2.11 0 0 0-2.496 0l-1.376 1.01a3.61 3.61 0 0 1-1.589.658l-1.686.258a2.111 2.111 0 0 0-1.766 1.766l-.258 1.686a3.614 3.614 0 0 1-.658 1.59l-1.01 1.375a2.11 2.11 0 0 0 0 2.496l1.01 1.376a3.61 3.61 0 0 1 .658 1.589l.258 1.686a2.11 2.11 0 0 0 1.766 1.765l1.686.26a3.613 3.613 0 0 1 1.59.657l1.375 1.01a2.11 2.11 0 0 0 2.496 0l1.376-1.01a3.61 3.61 0 0 1 1.589-.658l1.686-.258a2.11 2.11 0 0 0 1.765-1.766l.26-1.686a3.613 3.613 0 0 1 .657-1.59l1.01-1.375a2.11 2.11 0 0 0 0-2.496l-1.01-1.376a3.61 3.61 0 0 1-.658-1.589l-.258-1.686a2.111 2.111 0 0 0-1.766-1.766l-1.686-.258a3.614 3.614 0 0 1-1.59-.658Z"></path>
+    </svg>
+  `
+
+  const tokenInfoPresentIcon = `
     <svg viewBox="0 0 24 24" aria-hidden="true">
-      <path d="m5 13 4 4L19 7"></path>
+      <path d="M17.03 9.78a.75.75 0 0 0-1.06-1.06l-5.47 5.47-2.47-2.47a.75.75 0 0 0-1.06 1.06l3 3a.75.75 0 0 0 1.06 0l6-6Z"></path>
+      <path d="m14.136 1.2 1.375 1.01c.274.201.593.333.929.384l1.687.259a3.61 3.61 0 0 1 3.02 3.021l.259 1.686c.051.336.183.655.384.929l1.01 1.375a3.61 3.61 0 0 1 0 4.272l-1.01 1.375a2.106 2.106 0 0 0-.384.929l-.259 1.687a3.61 3.61 0 0 1-3.021 3.02l-1.686.259a2.106 2.106 0 0 0-.929.384l-1.375 1.01a3.61 3.61 0 0 1-4.272 0l-1.375-1.01a2.106 2.106 0 0 0-.929-.384l-1.687-.259a3.61 3.61 0 0 1-3.02-3.021l-.259-1.686a2.117 2.117 0 0 0-.384-.929L1.2 14.136a3.61 3.61 0 0 1 0-4.272l1.01-1.375c.201-.274.333-.593.384-.929l.259-1.687a3.61 3.61 0 0 1 3.021-3.02l1.686-.259c.336-.051.655-.183.929-.384L9.864 1.2a3.61 3.61 0 0 1 4.272 0Zm-3.384 1.209-1.375 1.01a3.614 3.614 0 0 1-1.59.658l-1.686.258a2.111 2.111 0 0 0-1.766 1.766l-.258 1.686a3.61 3.61 0 0 1-.658 1.589l-1.01 1.376a2.11 2.11 0 0 0 0 2.496l1.01 1.375c.344.469.57 1.015.658 1.59l.258 1.686c.14.911.855 1.626 1.766 1.766l1.686.258a3.61 3.61 0 0 1 1.589.658l1.376 1.01a2.11 2.11 0 0 0 2.496 0l1.375-1.01a3.613 3.613 0 0 1 1.59-.657l1.686-.26a2.11 2.11 0 0 0 1.766-1.765l.258-1.686a3.61 3.61 0 0 1 .658-1.589l1.01-1.376a2.11 2.11 0 0 0 0-2.496l-1.01-1.375a3.613 3.613 0 0 1-.657-1.59l-.26-1.686a2.11 2.11 0 0 0-1.765-1.766l-1.686-.258a3.61 3.61 0 0 1-1.589-.658l-1.376-1.01a2.11 2.11 0 0 0-2.496 0Z"></path>
     </svg>
   `
 
@@ -119,7 +132,9 @@ export const createGitHubByotControls = ({
 
     if (tokenInfoButton instanceof HTMLButtonElement) {
       tokenInfoButton.dataset.tokenState = hasProvidedToken ? 'present' : 'missing'
-      tokenInfoButton.textContent = hasProvidedToken ? 'i' : '?'
+      tokenInfoButton.innerHTML = hasProvidedToken
+        ? tokenInfoPresentIcon
+        : tokenInfoMissingIcon
       tokenInfoButton.setAttribute(
         'aria-label',
         hasProvidedToken
diff --git a/src/styles/ai-controls.css b/src/styles/ai-controls.css
index 03e0486..ecb2b7a 100644
--- a/src/styles/ai-controls.css
+++ b/src/styles/ai-controls.css
@@ -92,37 +92,38 @@
   display: inline-grid;
   place-content: center;
   cursor: pointer;
-  border-radius: 999px;
-  border: 1px solid var(--border-strong);
+  border: none;
   color: var(--hint-icon);
-  font-weight: 700;
-  line-height: 1;
   opacity: 0.9;
   background: transparent;
   padding: 0;
-  width: 20px;
-  height: 20px;
-  font-size: 0.74rem;
+  width: 24px;
+  height: 24px;
   transition:
-    border-color 140ms ease,
     color 140ms ease,
-    background 140ms ease,
     box-shadow 140ms ease;
 }
 
+.github-token-info svg {
+  width: 100%;
+  height: 100%;
+  fill: currentColor;
+  stroke: none;
+}
+
+.github-token-info svg path {
+  fill: currentColor;
+}
+
 .github-token-info[data-token-state='missing'] {
-  border-color: color-mix(in srgb, #f59e0b 70%, var(--border-strong));
   color: color-mix(in srgb, #fbbf24 86%, var(--panel-text));
-  background: color-mix(in srgb, #f59e0b 14%, transparent);
 }
 
 .github-token-info[data-token-state='present'] {
-  border-color: color-mix(in srgb, #22c55e 56%, var(--border-strong));
   color: color-mix(in srgb, #4ade80 82%, var(--panel-text));
-  background: color-mix(in srgb, #22c55e 12%, transparent);
 }
 
-.github-token-info[aria-expanded='true'] {
+.github-token-info[aria-expanded='true']:focus-visible {
   box-shadow: 0 0 0 2px color-mix(in srgb, var(--focus-ring) 70%, transparent);
 }
 
@@ -178,6 +179,12 @@
 .github-token-add svg {
   width: 14px;
   height: 14px;
+  fill: currentColor;
+  stroke: none;
+}
+
+.github-token-add svg path {
+  fill: currentColor;
 }
 
 .github-token-add[data-state='loading'] svg {
diff --git a/src/styles/layout-shell.css b/src/styles/layout-shell.css
index 39dee83..00218dc 100644
--- a/src/styles/layout-shell.css
+++ b/src/styles/layout-shell.css
@@ -267,6 +267,14 @@
   display: none;
 }
 
+.app-grid-ai-toggle svg {
+  width: 14px;
+  height: 14px;
+  fill: currentColor;
+  stroke: none;
+  flex-shrink: 0;
+}
+
 .app-grid-ai-toggle[hidden] {
   display: none;
 }
@@ -352,6 +360,8 @@
 @media (max-width: 900px) {
   .app-grid-ai-toggle:not([hidden]) {
     display: inline-flex;
+    align-items: center;
+    gap: 7px;
   }
 }
 
diff --git a/src/styles/panels-editor.css b/src/styles/panels-editor.css
index 334deea..695a482 100644
--- a/src/styles/panels-editor.css
+++ b/src/styles/panels-editor.css
@@ -93,8 +93,13 @@
   color: var(--select-text);
 }
 
-.editor-tools-toggle .editor-tools-toggle__inner-ring {
-  stroke-width: 0.75;
+.editor-tools-toggle svg {
+  fill: currentColor;
+  stroke: none;
+}
+
+.editor-tools-toggle svg path {
+  fill: currentColor;
 }
 
 .panel-collapse-toggle {

From bd0d4f34be4150b29524829af2e88b47a519d335 Mon Sep 17 00:00:00 2001
From: KCM <knightedcodemonkey@gmail.com>
Date: Fri, 27 Mar 2026 18:40:37 -0500
Subject: [PATCH 2/2] refactor: clean up css cascade and svg location.

---
 playwright/app.spec.ts              | 37 +++++++++++++++++++----------
 src/index.html                      | 18 +++++++++++++-
 src/modules/github-byot-controls.js | 17 -------------
 src/styles/ai-controls.css          | 20 ++++++++++++++++
 src/styles/panels-editor.css        |  6 +----
 5 files changed, 62 insertions(+), 36 deletions(-)

diff --git a/playwright/app.spec.ts b/playwright/app.spec.ts
index 47ffcaf..7b4dd1c 100644
--- a/playwright/app.spec.ts
+++ b/playwright/app.spec.ts
@@ -259,30 +259,41 @@ test('GitHub token info panel reflects missing and present token states', async
 }) => {
   await waitForAppReady(page, `${appEntryPath}?feature-ai=true`)
 
-  const infoButton = page.locator('#github-token-info')
-  const infoPanel = page.locator('#github-token-info-panel')
-  const missingMessage = page.locator('.github-token-info-message--missing-token')
-  const presentMessage = page.locator('.github-token-info-message--has-token')
+  const infoButtonMissing = page.getByRole('button', {
+    name: 'About GitHub token features and privacy',
+  })
+  const infoButtonPresent = page.getByRole('button', {
+    name: 'About GitHub token privacy',
+  })
+  const missingMessage = page.getByText('Provide a GitHub PAT', { exact: false })
+  const presentMessage = page.getByText(
+    'This token is stored only in your browser and is sent only to GitHub APIs you invoke. Use the trash icon to remove it from storage.',
+  )
 
-  await expect(infoButton).toHaveText('?')
-  await expect(infoButton).toHaveAttribute('data-token-state', 'missing')
+  await expect(infoButtonMissing).toHaveAttribute('data-token-state', 'missing')
+  await expect(infoButtonMissing).toHaveAttribute(
+    'aria-label',
+    'About GitHub token features and privacy',
+  )
+  await expect(presentMessage).toBeHidden()
 
-  await infoButton.click()
-  await expect(infoPanel).toBeVisible()
+  await infoButtonMissing.click()
   await expect(missingMessage).toBeVisible()
   await expect(missingMessage).toContainText('Provide a GitHub PAT')
-  await expect(missingMessage.getByRole('link', { name: 'docs' })).toHaveAttribute(
+  await expect(page.getByRole('link', { name: 'docs' })).toHaveAttribute(
     'href',
     'https://github.com/knightedcodemonkey/develop/blob/main/docs/byot.md',
   )
   await expect(presentMessage).toBeHidden()
 
   await connectByotWithSingleRepo(page)
-  await expect(infoButton).toHaveText('i')
-  await expect(infoButton).toHaveAttribute('data-token-state', 'present')
+  await expect(infoButtonPresent).toHaveAttribute('data-token-state', 'present')
+  await expect(infoButtonPresent).toHaveAttribute(
+    'aria-label',
+    'About GitHub token privacy',
+  )
 
-  await infoButton.click()
-  await expect(infoPanel).toBeVisible()
+  await infoButtonPresent.click()
   await expect(presentMessage).toBeVisible()
   await expect(presentMessage).toContainText(
     'Use the trash icon to remove it from storage.',
diff --git a/src/index.html b/src/index.html
index 839ddab..c1aac8d 100644
--- a/src/index.html
+++ b/src/index.html
@@ -49,7 +49,11 @@ <h1>
               aria-expanded="false"
               aria-controls="github-token-info-panel"
             >
-              <svg viewBox="0 0 24 24" aria-hidden="true">
+              <svg
+                class="github-token-info__icon github-token-info__icon--missing"
+                viewBox="0 0 24 24"
+                aria-hidden="true"
+              >
                 <path
                   d="M13 16.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm-2.517-7.665c.112-.223.268-.424.488-.57C11.186 8.12 11.506 8 12 8c.384 0 .766.118 1.034.319a.953.953 0 0 1 .403.806c0 .48-.218.81-.62 1.186a9.293 9.293 0 0 1-.409.354 19.8 19.8 0 0 0-.294.249c-.246.213-.524.474-.738.795l-.126.19V13.5a.75.75 0 0 0 1.5 0v-1.12c.09-.1.203-.208.347-.333.063-.055.14-.119.222-.187.166-.14.358-.3.52-.452.536-.5 1.098-1.2 1.098-2.283a2.45 2.45 0 0 0-1.003-2.006C13.37 6.695 12.658 6.5 12 6.5c-.756 0-1.373.191-1.861.517a2.944 2.944 0 0 0-.997 1.148.75.75 0 0 0 1.341.67Z"
                 ></path>
@@ -57,6 +61,18 @@ <h1>
                   d="M9.864 1.2a3.61 3.61 0 0 1 4.272 0l1.375 1.01c.274.2.593.333.929.384l1.686.259a3.61 3.61 0 0 1 3.021 3.02l.259 1.687c.051.336.183.655.384.929l1.01 1.375a3.61 3.61 0 0 1 0 4.272l-1.01 1.375a2.106 2.106 0 0 0-.384.929l-.259 1.686a3.61 3.61 0 0 1-3.02 3.021l-1.687.259a2.106 2.106 0 0 0-.929.384l-1.375 1.01a3.61 3.61 0 0 1-4.272 0l-1.375-1.01a2.106 2.106 0 0 0-.929-.384l-1.686-.259a3.61 3.61 0 0 1-3.021-3.02l-.259-1.687a2.106 2.106 0 0 0-.384-.929L1.2 14.136a3.61 3.61 0 0 1 0-4.272l1.01-1.375c.201-.274.333-.593.384-.929l.259-1.686a3.61 3.61 0 0 1 3.02-3.021l1.687-.259c.336-.051.655-.183.929-.384Zm3.384 1.209a2.11 2.11 0 0 0-2.496 0l-1.376 1.01a3.61 3.61 0 0 1-1.589.658l-1.686.258a2.111 2.111 0 0 0-1.766 1.766l-.258 1.686a3.614 3.614 0 0 1-.658 1.59l-1.01 1.375a2.11 2.11 0 0 0 0 2.496l1.01 1.376a3.61 3.61 0 0 1 .658 1.589l.258 1.686a2.11 2.11 0 0 0 1.766 1.765l1.686.26a3.613 3.613 0 0 1 1.59.657l1.375 1.01a2.11 2.11 0 0 0 2.496 0l1.376-1.01a3.61 3.61 0 0 1 1.589-.658l1.686-.258a2.11 2.11 0 0 0 1.765-1.766l.26-1.686a3.613 3.613 0 0 1 .657-1.59l1.01-1.375a2.11 2.11 0 0 0 0-2.496l-1.01-1.376a3.61 3.61 0 0 1-.658-1.589l-.258-1.686a2.111 2.111 0 0 0-1.766-1.766l-1.686-.258a3.614 3.614 0 0 1-1.59-.658Z"
                 ></path>
               </svg>
+              <svg
+                class="github-token-info__icon github-token-info__icon--present"
+                viewBox="0 0 24 24"
+                aria-hidden="true"
+              >
+                <path
+                  d="M17.03 9.78a.75.75 0 0 0-1.06-1.06l-5.47 5.47-2.47-2.47a.75.75 0 0 0-1.06 1.06l3 3a.75.75 0 0 0 1.06 0l6-6Z"
+                ></path>
+                <path
+                  d="m14.136 1.2 1.375 1.01c.274.201.593.333.929.384l1.687.259a3.61 3.61 0 0 1 3.02 3.021l.259 1.686c.051.336.183.655.384.929l1.01 1.375a3.61 3.61 0 0 1 0 4.272l-1.01 1.375a2.106 2.106 0 0 0-.384.929l-.259 1.687a3.61 3.61 0 0 1-3.021 3.02l-1.686.259a2.106 2.106 0 0 0-.929.384l-1.375 1.01a3.61 3.61 0 0 1-4.272 0l-1.375-1.01a2.106 2.106 0 0 0-.929-.384l-1.687-.259a3.61 3.61 0 0 1-3.02-3.021l-.259-1.686a2.117 2.117 0 0 0-.384-.929L1.2 14.136a3.61 3.61 0 0 1 0-4.272l1.01-1.375c.201-.274.333-.593.384-.929l.259-1.687a3.61 3.61 0 0 1 3.021-3.02l1.686-.259c.336-.051.655-.183.929-.384L9.864 1.2a3.61 3.61 0 0 1 4.272 0Zm-3.384 1.209-1.375 1.01a3.614 3.614 0 0 1-1.59.658l-1.686.258a2.111 2.111 0 0 0-1.766 1.766l-.258 1.686a3.61 3.61 0 0 1-.658 1.589l-1.01 1.376a2.11 2.11 0 0 0 0 2.496l1.01 1.375c.344.469.57 1.015.658 1.59l.258 1.686c.14.911.855 1.626 1.766 1.766l1.686.258a3.61 3.61 0 0 1 1.589.658l1.376 1.01a2.11 2.11 0 0 0 2.496 0l1.375-1.01a3.613 3.613 0 0 1 1.59-.657l1.686-.26a2.11 2.11 0 0 0 1.766-1.765l.258-1.686a3.61 3.61 0 0 1 .658-1.589l1.01-1.376a2.11 2.11 0 0 0 0-2.496l-1.01-1.375a3.613 3.613 0 0 1-.657-1.59l-.26-1.686a2.11 2.11 0 0 0-1.765-1.766l-1.686-.258a3.61 3.61 0 0 1-1.589-.658l-1.376-1.01a2.11 2.11 0 0 0-2.496 0Z"
+                ></path>
+              </svg>
             </button>
             <div class="github-token-info-panel" id="github-token-info-panel" hidden>
               <p
diff --git a/src/modules/github-byot-controls.js b/src/modules/github-byot-controls.js
index 7b45011..0badaad 100644
--- a/src/modules/github-byot-controls.js
+++ b/src/modules/github-byot-controls.js
@@ -89,20 +89,6 @@ export const createGitHubByotControls = ({
     </svg>
   `
 
-  const tokenInfoMissingIcon = `
-    <svg viewBox="0 0 24 24" aria-hidden="true">
-      <path d="M13 16.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm-2.517-7.665c.112-.223.268-.424.488-.57C11.186 8.12 11.506 8 12 8c.384 0 .766.118 1.034.319a.953.953 0 0 1 .403.806c0 .48-.218.81-.62 1.186a9.293 9.293 0 0 1-.409.354 19.8 19.8 0 0 0-.294.249c-.246.213-.524.474-.738.795l-.126.19V13.5a.75.75 0 0 0 1.5 0v-1.12c.09-.1.203-.208.347-.333.063-.055.14-.119.222-.187.166-.14.358-.3.52-.452.536-.5 1.098-1.2 1.098-2.283a2.45 2.45 0 0 0-1.003-2.006C13.37 6.695 12.658 6.5 12 6.5c-.756 0-1.373.191-1.861.517a2.944 2.944 0 0 0-.997 1.148.75.75 0 0 0 1.341.67Z"></path>
-      <path d="M9.864 1.2a3.61 3.61 0 0 1 4.272 0l1.375 1.01c.274.2.593.333.929.384l1.686.259a3.61 3.61 0 0 1 3.021 3.02l.259 1.687c.051.336.183.655.384.929l1.01 1.375a3.61 3.61 0 0 1 0 4.272l-1.01 1.375a2.106 2.106 0 0 0-.384.929l-.259 1.686a3.61 3.61 0 0 1-3.02 3.021l-1.687.259a2.106 2.106 0 0 0-.929.384l-1.375 1.01a3.61 3.61 0 0 1-4.272 0l-1.375-1.01a2.106 2.106 0 0 0-.929-.384l-1.686-.259a3.61 3.61 0 0 1-3.021-3.02l-.259-1.687a2.106 2.106 0 0 0-.384-.929L1.2 14.136a3.61 3.61 0 0 1 0-4.272l1.01-1.375c.201-.274.333-.593.384-.929l.259-1.686a3.61 3.61 0 0 1 3.02-3.021l1.687-.259c.336-.051.655-.183.929-.384Zm3.384 1.209a2.11 2.11 0 0 0-2.496 0l-1.376 1.01a3.61 3.61 0 0 1-1.589.658l-1.686.258a2.111 2.111 0 0 0-1.766 1.766l-.258 1.686a3.614 3.614 0 0 1-.658 1.59l-1.01 1.375a2.11 2.11 0 0 0 0 2.496l1.01 1.376a3.61 3.61 0 0 1 .658 1.589l.258 1.686a2.11 2.11 0 0 0 1.766 1.765l1.686.26a3.613 3.613 0 0 1 1.59.657l1.375 1.01a2.11 2.11 0 0 0 2.496 0l1.376-1.01a3.61 3.61 0 0 1 1.589-.658l1.686-.258a2.11 2.11 0 0 0 1.765-1.766l.26-1.686a3.613 3.613 0 0 1 .657-1.59l1.01-1.375a2.11 2.11 0 0 0 0-2.496l-1.01-1.376a3.61 3.61 0 0 1-.658-1.589l-.258-1.686a2.111 2.111 0 0 0-1.766-1.766l-1.686-.258a3.614 3.614 0 0 1-1.59-.658Z"></path>
-    </svg>
-  `
-
-  const tokenInfoPresentIcon = `
-    <svg viewBox="0 0 24 24" aria-hidden="true">
-      <path d="M17.03 9.78a.75.75 0 0 0-1.06-1.06l-5.47 5.47-2.47-2.47a.75.75 0 0 0-1.06 1.06l3 3a.75.75 0 0 0 1.06 0l6-6Z"></path>
-      <path d="m14.136 1.2 1.375 1.01c.274.201.593.333.929.384l1.687.259a3.61 3.61 0 0 1 3.02 3.021l.259 1.686c.051.336.183.655.384.929l1.01 1.375a3.61 3.61 0 0 1 0 4.272l-1.01 1.375a2.106 2.106 0 0 0-.384.929l-.259 1.687a3.61 3.61 0 0 1-3.021 3.02l-1.686.259a2.106 2.106 0 0 0-.929.384l-1.375 1.01a3.61 3.61 0 0 1-4.272 0l-1.375-1.01a2.106 2.106 0 0 0-.929-.384l-1.687-.259a3.61 3.61 0 0 1-3.02-3.021l-.259-1.686a2.117 2.117 0 0 0-.384-.929L1.2 14.136a3.61 3.61 0 0 1 0-4.272l1.01-1.375c.201-.274.333-.593.384-.929l.259-1.687a3.61 3.61 0 0 1 3.021-3.02l1.686-.259c.336-.051.655-.183.929-.384L9.864 1.2a3.61 3.61 0 0 1 4.272 0Zm-3.384 1.209-1.375 1.01a3.614 3.614 0 0 1-1.59.658l-1.686.258a2.111 2.111 0 0 0-1.766 1.766l-.258 1.686a3.61 3.61 0 0 1-.658 1.589l-1.01 1.376a2.11 2.11 0 0 0 0 2.496l1.01 1.375c.344.469.57 1.015.658 1.59l.258 1.686c.14.911.855 1.626 1.766 1.766l1.686.258a3.61 3.61 0 0 1 1.589.658l1.376 1.01a2.11 2.11 0 0 0 2.496 0l1.375-1.01a3.613 3.613 0 0 1 1.59-.657l1.686-.26a2.11 2.11 0 0 0 1.766-1.765l.258-1.686a3.61 3.61 0 0 1 .658-1.589l1.01-1.376a2.11 2.11 0 0 0 0-2.496l-1.01-1.375a3.613 3.613 0 0 1-.657-1.59l-.26-1.686a2.11 2.11 0 0 0-1.765-1.766l-1.686-.258a3.61 3.61 0 0 1-1.589-.658l-1.376-1.01a2.11 2.11 0 0 0-2.496 0Z"></path>
-    </svg>
-  `
-
   const clearAddButtonResetTimer = () => {
     if (addButtonResetTimer) {
       clearTimeout(addButtonResetTimer)
@@ -132,9 +118,6 @@ export const createGitHubByotControls = ({
 
     if (tokenInfoButton instanceof HTMLButtonElement) {
       tokenInfoButton.dataset.tokenState = hasProvidedToken ? 'present' : 'missing'
-      tokenInfoButton.innerHTML = hasProvidedToken
-        ? tokenInfoPresentIcon
-        : tokenInfoMissingIcon
       tokenInfoButton.setAttribute(
         'aria-label',
         hasProvidedToken
diff --git a/src/styles/ai-controls.css b/src/styles/ai-controls.css
index ecb2b7a..1ea9bee 100644
--- a/src/styles/ai-controls.css
+++ b/src/styles/ai-controls.css
@@ -115,6 +115,26 @@
   fill: currentColor;
 }
 
+.github-token-info__icon--present {
+  display: none;
+}
+
+.github-token-info[data-token-state='present'] .github-token-info__icon--missing {
+  display: none;
+}
+
+.github-token-info[data-token-state='present'] .github-token-info__icon--present {
+  display: block;
+}
+
+.github-token-info[data-token-state='missing'] .github-token-info__icon--missing {
+  display: block;
+}
+
+.github-token-info[data-token-state='missing'] .github-token-info__icon--present {
+  display: none;
+}
+
 .github-token-info[data-token-state='missing'] {
   color: color-mix(in srgb, #fbbf24 86%, var(--panel-text));
 }
diff --git a/src/styles/panels-editor.css b/src/styles/panels-editor.css
index 695a482..3fa36ba 100644
--- a/src/styles/panels-editor.css
+++ b/src/styles/panels-editor.css
@@ -93,13 +93,9 @@
   color: var(--select-text);
 }
 
-.editor-tools-toggle svg {
-  fill: currentColor;
-  stroke: none;
-}
-
 .editor-tools-toggle svg path {
   fill: currentColor;
+  stroke: none;
 }
 
 .panel-collapse-toggle {