feat(v3): redesign UI from top tab bar to VSCode-style left sidebar

Replace horizontal tab bar + right-side settings drawer with vertical
icon rail (36px) + expandable drawer panel (28em) + always-visible
workspace. GlobalTabBar now renders 4 SVG icon buttons. Settings is a
regular sidebar tab. Keyboard: Alt+1..4, Ctrl+B toggle, Ctrl+, settings.

v2/src/App.svelte

@@ -25,13 +25,21 @@
   let detachedConfig = getDetachedConfig();
 
   let paletteOpen = $state(false);
-  let settingsOpen = $state(false);
+  let drawerOpen = $state(false);
   let loaded = $state(false);
 
   let activeTab = $derived(getActiveTab());
 
-  function toggleSettings() {
+  // Panel titles
-    settingsOpen = !settingsOpen;
+  const panelTitles: Record<string, string> = {
+    sessions: 'Sessions',
+    docs: 'Documentation',
+    context: 'Context',
+    settings: 'Settings',
+  };
+
+  function toggleDrawer() {
+    drawerOpen = !drawerOpen;
   }
 
   onMount(() => {
@@ -50,11 +58,20 @@
         return;
       }
 
-      // Alt+1..3 — switch workspace tab
+      // Alt+1..4 — switch sidebar tab (and open drawer)
-      if (e.altKey && !e.ctrlKey && e.key >= '1' && e.key <= '3') {
+      if (e.altKey && !e.ctrlKey && e.key >= '1' && e.key <= '4') {
         e.preventDefault();
-        const tabs = ['sessions', 'docs', 'context'] as const;
+        const tabs = ['sessions', 'docs', 'context', 'settings'] as const;
-        setActiveTab(tabs[parseInt(e.key) - 1]);
+        const idx = parseInt(e.key) - 1;
+        if (idx < tabs.length) {
+          const tab = tabs[idx];
+          if (getActiveTab() === tab && drawerOpen) {
+            drawerOpen = false;
+          } else {
+            setActiveTab(tab);
+            drawerOpen = true;
+          }
+        }
         return;
       }
 
@@ -69,17 +86,29 @@
         return;
       }
 
-      // Ctrl+, — toggle settings drawer
+      // Ctrl+, — toggle settings panel
       if (e.ctrlKey && e.key === ',') {
         e.preventDefault();
-        toggleSettings();
+        if (getActiveTab() === 'settings' && drawerOpen) {
+          drawerOpen = false;
+        } else {
+          setActiveTab('settings');
+          drawerOpen = true;
+        }
         return;
       }
 
-      // Escape — close settings drawer
+      // Ctrl+B — toggle sidebar
-      if (e.key === 'Escape' && settingsOpen) {
+      if (e.ctrlKey && !e.shiftKey && e.key === 'b') {
         e.preventDefault();
-        settingsOpen = false;
+        drawerOpen = !drawerOpen;
+        return;
+      }
+
+      // Escape — close drawer
+      if (e.key === 'Escape' && drawerOpen) {
+        e.preventDefault();
+        drawerOpen = false;
         return;
       }
     }
@@ -111,35 +140,36 @@
   </div>
 {:else if loaded}
   <div class="app-shell">
-    <GlobalTabBar {settingsOpen} ontoggleSettings={toggleSettings} />
+    <div class="main-row">
+      <GlobalTabBar expanded={drawerOpen} ontoggle={toggleDrawer} />
 
-    <div class="content-area">
+      {#if drawerOpen}
-      <main class="tab-content">
+        <aside class="sidebar-panel">
-        {#if activeTab === 'sessions'}
+          <div class="panel-header">
-          <ProjectGrid />
+            <h2>{panelTitles[activeTab] ?? ''}</h2>
-        {:else if activeTab === 'docs'}
+            <button class="panel-close" onclick={() => drawerOpen = false} title="Close sidebar (Ctrl+B)">
-          <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 />
+          <div class="panel-content">
+            {#if activeTab === 'sessions'}
+              <ProjectGrid />
+            {:else if activeTab === 'docs'}
+              <DocsTab />
+            {:else if activeTab === 'context'}
+              <ContextTab />
+            {:else if activeTab === 'settings'}
+              <SettingsTab />
+            {/if}
+          </div>
         </aside>
       {/if}
+
+      <main class="workspace">
+        <ProjectGrid />
+      </main>
     </div>
 
     <StatusBar />
@@ -166,62 +196,45 @@
     overflow: hidden;
   }
 
-  .content-area {
+  .main-row {
     flex: 1;
-    position: relative;
+    display: flex;
     overflow: hidden;
   }
 
-  .tab-content {
+  .sidebar-panel {
-    height: 100%;
+    width: 28em;
-    overflow: hidden;
+    max-width: 50%;
-  }
-
-  .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;
+    background: var(--ctp-base);
+    border-right: 1px solid var(--ctp-surface1);
     overflow: hidden;
+    flex-shrink: 0;
   }
 
-  .drawer-header {
+  .panel-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 10px 16px;
+    padding: 8px 12px;
     border-bottom: 1px solid var(--ctp-surface0);
     flex-shrink: 0;
   }
 
-  .drawer-header h2 {
+  .panel-header h2 {
-    font-size: 0.9rem;
+    font-size: 0.8rem;
     font-weight: 600;
     color: var(--ctp-text);
     margin: 0;
   }
 
-  .drawer-close {
+  .panel-close {
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 24px;
+    width: 22px;
-    height: 24px;
+    height: 22px;
     background: transparent;
     border: none;
     border-radius: 4px;
@@ -229,11 +242,21 @@
     cursor: pointer;
   }
 
-  .drawer-close:hover {
+  .panel-close:hover {
     color: var(--ctp-text);
     background: var(--ctp-surface0);
   }
 
+  .panel-content {
+    flex: 1;
+    overflow: hidden;
+  }
+
+  .workspace {
+    flex: 1;
+    overflow: hidden;
+  }
+
   .loading {
     display: flex;
     align-items: center;

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

@@ -2,89 +2,74 @@
   import { getActiveTab, setActiveTab, type WorkspaceTab } from '../../stores/workspace.svelte';
 
   interface Props {
-    settingsOpen?: boolean;
+    expanded?: boolean;
-    ontoggleSettings?: () => void;
+    ontoggle?: () => void;
   }
 
-  let { settingsOpen = false, ontoggleSettings }: Props = $props();
+  let { expanded = false, ontoggle }: 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: 'Ctrl+,' },
   ];
+
+  // SVG icon paths for each tab
+  const icons: Record<WorkspaceTab, string> = {
+    sessions: 'M3 3h7v7H3zM14 3h7v7h-7zM3 14h7v7H3zM14 14h7v7h-7z',
+    docs: 'M6 2h9l5 5v15H4V2h2zm8 0v5h5M8 12h8M8 16h5',
+    context: 'M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 5v5l3 3',
+    settings: 'M10.3 2L9.9 4.4a7 7 0 0 0-1.8 1l-2.2-.9-1.7 3 1.8 1.5a7 7 0 0 0 0 2l-1.8 1.5 1.7 3 2.2-.9a7 7 0 0 0 1.8 1L10.3 18h3.4l.4-2.4a7 7 0 0 0 1.8-1l2.2.9 1.7-3-1.8-1.5a7 7 0 0 0 0-2l1.8-1.5-1.7-3-2.2.9a7 7 0 0 0-1.8-1L13.7 2h-3.4zM12 8a4 4 0 1 1 0 8 4 4 0 0 1 0-8z',
+  };
+
+  function handleTabClick(id: WorkspaceTab) {
+    const current = getActiveTab();
+    if (current === id && expanded) {
+      // Clicking active tab again collapses
+      ontoggle?.();
+    } else {
+      setActiveTab(id);
+      if (!expanded) ontoggle?.();
+    }
+  }
 </script>
 
-<nav class="global-tab-bar">
+<nav class="sidebar-rail">
-  <div class="tabs">
+  {#each tabs as tab}
-    {#each tabs as tab}
+    <button
-      <button
+      class="rail-btn"
-        class="tab-btn"
+      class:active={getActiveTab() === tab.id && expanded}
-        class:active={getActiveTab() === tab.id}
+      onclick={() => handleTabClick(tab.id)}
-        onclick={() => setActiveTab(tab.id)}
+      title="{tab.label} ({tab.shortcut})"
-        title={tab.shortcut}
+    >
-      >
+      <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
-        {tab.label}
+        <path
-      </button>
+          d={icons[tab.id]}
-    {/each}
+          stroke="currentColor"
-  </div>
+          stroke-width="1.5"
-  <button
+          stroke-linecap="round"
-    class="settings-toggle"
+          stroke-linejoin="round"
-    class:active={settingsOpen}
+          fill="none"
-    onclick={ontoggleSettings}
+        />
-    title="Settings (Ctrl+,)"
+      </svg>
-  >
+    </button>
-    <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+  {/each}
-      <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 {
+  .sidebar-rail {
-    display: flex;
-    align-items: center;
-    padding: 4px 8px;
-    background: var(--ctp-mantle);
-    border-bottom: 1px solid var(--ctp-surface0);
-    flex-shrink: 0;
-  }
-
-  .tabs {
     display: flex;
+    flex-direction: column;
     gap: 2px;
-    flex: 1;
+    padding: 6px 4px;
+    background: var(--ctp-mantle);
+    border-right: 1px solid var(--ctp-surface0);
+    flex-shrink: 0;
+    width: 36px;
   }
 
-  .tab-btn {
+  .rail-btn {
-    padding: 4px 14px;
-    background: transparent;
-    border: none;
-    color: var(--ctp-subtext0);
-    font-size: 0.8rem;
-    cursor: pointer;
-    border-radius: 4px 4px 0 0;
-    transition: color 0.15s, background 0.15s;
-  }
-
-  .tab-btn:hover {
-    color: var(--ctp-text);
-    background: var(--ctp-surface0);
-  }
-
-  .tab-btn.active {
-    color: var(--ctp-text);
-    background: var(--ctp-base);
-    border-bottom: 2px solid var(--ctp-blue);
-  }
-
-  .settings-toggle {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -93,18 +78,17 @@
     background: transparent;
     border: none;
     border-radius: 4px;
-    color: var(--ctp-subtext0);
+    color: var(--ctp-overlay1);
     cursor: pointer;
     transition: color 0.15s, background 0.15s;
-    flex-shrink: 0;
   }
 
-  .settings-toggle:hover {
+  .rail-btn:hover {
     color: var(--ctp-text);
     background: var(--ctp-surface0);
   }
 
-  .settings-toggle.active {
+  .rail-btn.active {
     color: var(--ctp-blue);
     background: var(--ctp-surface0);
   }

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

@@ -480,7 +480,7 @@
   .settings-tab {
     padding: 12px 16px;
     overflow-y: auto;
-    flex: 1;
+    height: 100%;
   }
 
   h2 {

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';
+export type WorkspaceTab = 'sessions' | 'docs' | 'context' | 'settings';
 
 export interface TerminalTab {
   id: string;