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/lib/components/Workspace/GlobalTabBar.svelte

@@ -1,37 +1,67 @@
 <script lang="ts">
   import { getActiveTab, setActiveTab, type WorkspaceTab } from '../../stores/workspace.svelte';
 
+  interface Props {
+    settingsOpen?: boolean;
+    ontoggleSettings?: () => void;
+  }
+
+  let { settingsOpen = false, ontoggleSettings }: Props = $props();
+
   const tabs: { id: WorkspaceTab; label: string; shortcut: string }[] = [
     { id: 'sessions', label: 'Sessions', shortcut: 'Alt+1' },
     { id: 'docs', label: 'Docs', shortcut: 'Alt+2' },
     { id: 'context', label: 'Context', shortcut: 'Alt+3' },
-    { id: 'settings', label: 'Settings', shortcut: 'Alt+4' },
   ];
 </script>
 
 <nav class="global-tab-bar">
-  {#each tabs as tab}
-    <button
-      class="tab-btn"
-      class:active={getActiveTab() === tab.id}
-      onclick={() => setActiveTab(tab.id)}
-      title={tab.shortcut}
-    >
-      {tab.label}
-    </button>
-  {/each}
+  <div class="tabs">
+    {#each tabs as tab}
+      <button
+        class="tab-btn"
+        class:active={getActiveTab() === tab.id}
+        onclick={() => setActiveTab(tab.id)}
+        title={tab.shortcut}
+      >
+        {tab.label}
+      </button>
+    {/each}
+  </div>
+  <button
+    class="settings-toggle"
+    class:active={settingsOpen}
+    onclick={ontoggleSettings}
+    title="Settings (Ctrl+,)"
+  >
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+      <path
+        d="M6.5 1L6.2 2.7a5 5 0 0 0-1.2.7L3.4 2.8 1.9 5.4l1.3 1.2a5 5 0 0 0 0 1.4L1.9 9.2l1.5 2.6 1.6-.6a5 5 0 0 0 1.2.7L6.5 14h3l.3-1.7a5 5 0 0 0 1.2-.7l1.6.6 1.5-2.6-1.3-1.2a5 5 0 0 0 0-1.4l1.3-1.2-1.5-2.6-1.6.6a5 5 0 0 0-1.2-.7L9.5 1h-3zM8 5.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5z"
+        stroke="currentColor"
+        stroke-width="1.2"
+        stroke-linejoin="round"
+        fill="none"
+      />
+    </svg>
+  </button>
 </nav>
 
 <style>
   .global-tab-bar {
     display: flex;
-    gap: 2px;
+    align-items: center;
     padding: 4px 8px;
     background: var(--ctp-mantle);
     border-bottom: 1px solid var(--ctp-surface0);
     flex-shrink: 0;
   }
 
+  .tabs {
+    display: flex;
+    gap: 2px;
+    flex: 1;
+  }
+
   .tab-btn {
     padding: 4px 14px;
     background: transparent;
@@ -53,4 +83,29 @@
     background: var(--ctp-base);
     border-bottom: 2px solid var(--ctp-blue);
   }
+
+  .settings-toggle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    background: transparent;
+    border: none;
+    border-radius: 4px;
+    color: var(--ctp-subtext0);
+    cursor: pointer;
+    transition: color 0.15s, background 0.15s;
+    flex-shrink: 0;
+  }
+
+  .settings-toggle:hover {
+    color: var(--ctp-text);
+    background: var(--ctp-surface0);
+  }
+
+  .settings-toggle.active {
+    color: var(--ctp-blue);
+    background: var(--ctp-surface0);
+  }
 </style>

v2/src/lib/components/Workspace/SettingsTab.svelte

@@ -478,14 +478,13 @@
 
 <style>
   .settings-tab {
-    padding: 16px 24px;
+    padding: 12px 16px;
     overflow-y: auto;
-    height: 100%;
-    max-width: 560px;
+    flex: 1;
   }
 
   h2 {
-    font-size: 0.85rem;
+    font-size: 0.8rem;
     font-weight: 600;
     color: var(--ctp-text);
     margin: 0 0 10px;

v2/src/lib/stores/workspace.svelte.ts

@@ -2,7 +2,7 @@ import { loadGroups, saveGroups, getCliGroup } from '../adapters/groups-bridge';
 import type { GroupsFile, GroupConfig, ProjectConfig } from '../types/groups';
 import { clearAllAgentSessions } from '../stores/agents.svelte';
 
-export type WorkspaceTab = 'sessions' | 'docs' | 'context' | 'settings';
+export type WorkspaceTab = 'sessions' | 'docs' | 'context';
 
 export interface TerminalTab {
   id: string;