2 files changed, 43 insertions, 21 deletions

diff --git a/frontend-vanilla/src/main.ts b/frontend-vanilla/src/main.ts
index 56ae91a..901e316 100644
--- a/frontend-vanilla/src/main.ts
+++ b/frontend-vanilla/src/main.ts
@@ -78,7 +78,12 @@ export function renderLayout() {
         <div class="sidebar-footer">
           <div class="sidebar-quick-controls">
             <button id="sidebar-theme-toggle" class="sidebar-icon-btn" title="${store.theme === 'light' ? 'Switch to dark mode' : 'Switch to light mode'}">${store.theme === 'light' ? '☽' : '☀'}</button>
-            <button id="sidebar-style-cycle" class="sidebar-icon-btn" title="Style: ${store.styleTheme}">${store.styleTheme === 'default' ? '◯' : '◉'} ${store.styleTheme}</button>
+            <span class="sidebar-controls-divider"></span>
+            <button class="sidebar-icon-btn sidebar-style-btn ${store.styleTheme === 'default' ? 'active' : ''}" data-style-theme="default" title="Default">○</button>
+            <button class="sidebar-icon-btn sidebar-style-btn ${store.styleTheme === 'refined' ? 'active' : ''}" data-style-theme="refined" title="Refined">◆</button>
+            <button class="sidebar-icon-btn sidebar-style-btn ${store.styleTheme === 'terminal' ? 'active' : ''}" data-style-theme="terminal" title="Terminal">▮</button>
+            <button class="sidebar-icon-btn sidebar-style-btn ${store.styleTheme === 'codex' ? 'active' : ''}" data-style-theme="codex" title="Codex">❧</button>
+            <button class="sidebar-icon-btn sidebar-style-btn ${store.styleTheme === 'sakura' ? 'active' : ''}" data-style-theme="sakura" title="Sakura">❀</button>
           </div>
           <a href="/v3/settings" data-nav="settings">Settings</a>
           <a href="#" id="logout-button">Logout</a>
@@ -113,11 +118,12 @@ export function attachLayoutListeners() {
     store.setTheme(store.theme === 'light' ? 'dark' : 'light');
   });
 
-  // Sidebar quick controls: cycle style theme
-  document.getElementById('sidebar-style-cycle')?.addEventListener('click', () => {
-    const idx = STYLE_THEMES.indexOf(store.styleTheme as typeof STYLE_THEMES[number]);
-    const next = STYLE_THEMES[(idx + 1) % STYLE_THEMES.length];
-    store.setStyleTheme(next);
+  // Sidebar quick controls: style theme emoji buttons
+  document.querySelectorAll('.sidebar-style-btn').forEach(btn => {
+    btn.addEventListener('click', () => {
+      const theme = btn.getAttribute('data-style-theme');
+      if (theme) store.setStyleTheme(theme);
+    });
   });
 
   document.getElementById('sidebar-toggle-btn')?.addEventListener('click', () => {
@@ -907,12 +913,10 @@ store.on('sidebar-toggle', () => {
 
 store.on('style-theme-updated', () => {
   loadStyleTheme(store.styleTheme);
-  // Update sidebar style cycle button
-  const cycleBtn = document.getElementById('sidebar-style-cycle');
-  if (cycleBtn) {
-    cycleBtn.textContent = `${store.styleTheme === 'default' ? '◯' : '◉'} ${store.styleTheme}`;
-    cycleBtn.title = `Style: ${store.styleTheme}`;
-  }
+  // Update sidebar style emoji buttons
+  document.querySelectorAll('.sidebar-style-btn').forEach(btn => {
+    btn.classList.toggle('active', btn.getAttribute('data-style-theme') === store.styleTheme);
+  });
   // Re-render settings if on settings page to update active state
   if (router.getCurrentRoute().path === '/settings') {
     renderSettings();
diff --git a/frontend-vanilla/src/style.css b/frontend-vanilla/src/style.css
index 3061948..f58ae24 100644
--- a/frontend-vanilla/src/style.css
+++ b/frontend-vanilla/src/style.css
@@ -218,33 +218,47 @@ html {
 /* Quick controls row in sidebar footer */
 .sidebar-quick-controls {
   display: flex;
-  gap: 0.4rem;
+  align-items: center;
+  gap: 0.15rem;
   margin-bottom: 0.25rem;
 }
 
+.sidebar-controls-divider {
+  width: 1px;
+  height: 1rem;
+  background: rgba(128, 128, 128, 0.25);
+  margin: 0 0.25rem;
+}
+
 .sidebar-icon-btn {
   background: none;
   border: none;
   cursor: pointer;
-  font-size: 0.75rem;
-  padding: 0.3rem 0.6rem;
-  border-radius: 6px;
+  font-size: 0.8rem;
+  padding: 0.25rem 0.35rem;
+  border-radius: 4px;
   color: var(--text-color);
-  opacity: 0.5;
+  opacity: 0.35;
   transition: opacity 0.15s, background 0.15s;
-  font-family: var(--font-sans);
+  font-family: inherit;
   text-transform: none;
-  font-weight: 500;
+  font-weight: 400;
   height: auto;
-  line-height: 1.3;
+  line-height: 1;
 }
 
 .sidebar-icon-btn:hover {
-  opacity: 1;
+  opacity: 0.8;
   background: rgba(255, 255, 255, 0.08);
   border: none;
 }
 
+.sidebar-icon-btn.active {
+  opacity: 1;
+  background: rgba(255, 255, 255, 0.15);
+  color: var(--text-color);
+}
+
 .theme-dark .sidebar-icon-btn {
   color: rgba(0, 0, 0, 0.87);
   border: none;
@@ -256,6 +270,10 @@ html {
   border: none;
 }
 
+.theme-dark .sidebar-icon-btn.active {
+  background: rgba(0, 0, 0, 0.12);
+}
+
 /* Main Content area - always fills full width (sidebar overlays) */
 .main-content {
   width: 100%;