feat(v3): convert Settings from tab to collapsible side drawer

Settings is now a right-side drawer (32em width, semi-transparent
backdrop) instead of a full-page tab. GlobalTabBar has 3 tabs
(Sessions/Docs/Context) + gear icon toggle. WorkspaceTab type
reduced to 'sessions' | 'docs' | 'context'. Close via Escape,
click-outside, or close button. Alt+1..3 for tabs, Ctrl+, toggles
drawer.

v2/src/App.svelte

@@ -25,10 +25,15 @@
   let detachedConfig = getDetachedConfig();
 
   let paletteOpen = $state(false);
+  let settingsOpen = $state(false);
   let loaded = $state(false);
 
   let activeTab = $derived(getActiveTab());
 
+  function toggleSettings() {
+    settingsOpen = !settingsOpen;
+  }
+
   onMount(() => {
     initTheme();
     startAgentDispatcher();
@@ -45,10 +50,10 @@
         return;
       }
 
-      // Alt+1..4 — switch workspace tab
-      if (e.altKey && !e.ctrlKey && e.key >= '1' && e.key <= '4') {
+      // Alt+1..3 — switch workspace tab
+      if (e.altKey && !e.ctrlKey && e.key >= '1' && e.key <= '3') {
         e.preventDefault();
-        const tabs = ['sessions', 'docs', 'context', 'settings'] as const;
+        const tabs = ['sessions', 'docs', 'context'] as const;
         setActiveTab(tabs[parseInt(e.key) - 1]);
         return;
       }
@@ -64,10 +69,17 @@
         return;
       }
 
-      // Ctrl+, — settings tab
+      // Ctrl+, — toggle settings drawer
       if (e.ctrlKey && e.key === ',') {
         e.preventDefault();
-        setActiveTab('settings');
+        toggleSettings();
+        return;
+      }
+
+      // Escape — close settings drawer
+      if (e.key === 'Escape' && settingsOpen) {
+        e.preventDefault();
+        settingsOpen = false;
         return;
       }
     }
@@ -99,19 +111,36 @@
   </div>
 {:else if loaded}
   <div class="app-shell">
-    <GlobalTabBar />
+    <GlobalTabBar {settingsOpen} ontoggleSettings={toggleSettings} />
 
-    <main class="tab-content">
-      {#if activeTab === 'sessions'}
-        <ProjectGrid />
-      {:else if activeTab === 'docs'}
-        <DocsTab />
-      {:else if activeTab === 'context'}
-        <ContextTab />
-      {:else if activeTab === 'settings'}
-        <SettingsTab />
+    <div class="content-area">
+      <main class="tab-content">
+        {#if activeTab === 'sessions'}
+          <ProjectGrid />
+        {:else if activeTab === 'docs'}
+          <DocsTab />
+        {:else if activeTab === 'context'}
+          <ContextTab />
+        {/if}
+      </main>
+
+      {#if settingsOpen}
+        <!-- svelte-ignore a11y_click_events_have_key_events -->
+        <!-- svelte-ignore a11y_no_static_element_interactions -->
+        <div class="drawer-backdrop" onclick={() => settingsOpen = false}></div>
+        <aside class="settings-drawer">
+          <div class="drawer-header">
+            <h2>Settings</h2>
+            <button class="drawer-close" onclick={() => settingsOpen = false} title="Close (Esc)">
+              <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
+                <path d="M2 2l10 10M12 2L2 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+              </svg>
+            </button>
+          </div>
+          <SettingsTab />
+        </aside>
       {/if}
-    </main>
+    </div>
 
     <StatusBar />
   </div>
@@ -137,11 +166,74 @@
     overflow: hidden;
   }
 
-  .tab-content {
+  .content-area {
     flex: 1;
+    position: relative;
     overflow: hidden;
   }
 
+  .tab-content {
+    height: 100%;
+    overflow: hidden;
+  }
+
+  .drawer-backdrop {
+    position: absolute;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.3);
+    z-index: 50;
+  }
+
+  .settings-drawer {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: 32em;
+    max-width: 90%;
+    background: var(--ctp-base);
+    border-left: 1px solid var(--ctp-surface1);
+    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.3);
+    z-index: 51;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  .drawer-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px 16px;
+    border-bottom: 1px solid var(--ctp-surface0);
+    flex-shrink: 0;
+  }
+
+  .drawer-header h2 {
+    font-size: 0.9rem;
+    font-weight: 600;
+    color: var(--ctp-text);
+    margin: 0;
+  }
+
+  .drawer-close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    background: transparent;
+    border: none;
+    border-radius: 4px;
+    color: var(--ctp-subtext0);
+    cursor: pointer;
+  }
+
+  .drawer-close:hover {
+    color: var(--ctp-text);
+    background: var(--ctp-surface0);
+  }
+
   .loading {
     display: flex;
     align-items: center;