feat(sidebar): Notion-style floating peek card, pin toggle & drag-resize

app/templates/base.html

@@ -5,7 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>FlowDeck — {% block title_prefix %}Home{% endblock %}</title>
   <link rel="icon" type="image/svg+xml" href="/static/favicon.svg">
-  <link rel="stylesheet" href="/static/css/app.css?v=5.0.1">
+  <link rel="stylesheet" href="/static/css/app.css?v=5.1.0">
   <link rel="stylesheet" href="/static/css/design-tokens.css?v=5.2.0">
   <link rel="stylesheet" href="/static/css/components.css?v=5.2.0">
   <link rel="stylesheet" href="/static/css/katex.min.css?v=0.16.11">
@@ -170,7 +170,8 @@
   <aside class="sidebar"
          :class="{ collapsed: sidebarCollapsed && !sidebarPeek, 'mobile-open': mobileSidebarOpen, peeking: sidebarPeek }"
          id="sidebar"
-         @mouseleave="sidebarPeek = false"
+         @mouseleave="!sidebarResizing && (sidebarPeek = false)"
+         x-effect="document.documentElement.classList.toggle('fd-sidebar-collapsed', sidebarCollapsed && !sidebarPeek)"
          x-init="$nextTick(() => { if(typeof initTreeSortable==='function') initTreeSortable(); })">
     <!-- Header + dropdown wrapper -->
     <div style="position:relative;">
@@ -186,8 +187,10 @@
         {% endif %}
       </div>
       <span class="workspace-chevron" :class="{ open: workspaceMenuOpen }">▾</span>
-      <button class="sidebar-collapse-inline" @click.stop="toggleSidebar()" title="Collapse sidebar">
-        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="11 17 6 12 11 7"/><polyline points="18 17 13 12 18 7"/></svg>
+      <button class="sidebar-collapse-inline" @click.stop="toggleSidebar()"
+              :title="sidebarPeek ? 'Pin sidebar open' : 'Close sidebar'">
+        <svg x-show="!sidebarPeek" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="11 17 6 12 11 7"/><polyline points="18 17 13 12 18 7"/></svg>
+        <svg x-show="sidebarPeek" x-cloak width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="13 17 18 12 13 7"/><polyline points="6 17 11 12 6 7"/></svg>
       </button>
     </div>
     <div class="user-menu-dropdown" x-show="workspaceMenuOpen" @click.outside="workspaceMenuOpen = false" x-transition>
@@ -588,8 +591,29 @@
 
     <!-- Customize sidebar overlay + panel (full sidebar takeover) -->
     <div class="customize-overlay" x-show="customizing" @click="toggleCustomize()" x-cloak></div>
+
+    <!-- Right-edge resize handle: click to close, drag to resize -->
+    <div class="sidebar-resize-handle"
+         @mouseenter="sidebarResizeHover = true"
+         @mouseleave="sidebarResizeHover = false"
+         @pointerdown.prevent="startSidebarResize($event)"
+         title=""></div>
   </aside>
 
+  <!-- Resize / close contextual tooltip -->
+  <div class="sidebar-resize-tip"
+       x-show="sidebarResizeHover && (!sidebarCollapsed || sidebarPeek)" x-cloak
+       :style="'left:' + (sidebarWidth + 12) + 'px'">
+    <div class="srt-row">
+      <span class="srt-key">Close</span>
+      <span class="srt-action">Click · <span class="srt-kbd">Ctrl+\</span></span>
+    </div>
+    <div class="srt-row">
+      <span class="srt-key">Resize</span>
+      <span class="srt-action">Drag ↔</span>
+    </div>
+  </div>
+
   <!-- Uncollapse button → inside topbar, no overlap -->
   <!-- (Moved into topbar block below) -->
 
@@ -969,6 +993,7 @@
         window.appState = this;
         this.loadSidebarConfig();
         this.loadAgents();
+        this.initSidebarWidth();
         document.addEventListener('fd-toggle-sidebar', () => this.toggleSidebar());
       },
       agentList: [],
@@ -989,6 +1014,12 @@
       sidebarCollapsed: false,
       sidebarPeek: false,
       mobileSidebarOpen: false,
+      sidebarWidth: 240,
+      sidebarResizing: false,
+      sidebarResizeHover: false,
+      sidebarResizeMoved: false,
+      sidebarResizeStartX: 0,
+      sidebarResizeStartW: 0,
       showInvite: true,
       // -- Toast notifications --
       toasts: [],
@@ -1348,6 +1379,62 @@
         this.sidebarCollapsed = !this.sidebarCollapsed;
       },
 
+      closeSidebar() {
+        if (this.sidebarPeek) { this.sidebarPeek = false; return; }
+        this.sidebarCollapsed = true;
+      },
+
+      // ── Sidebar width: persisted, applies to fixed + floating ──
+      initSidebarWidth() {
+        var saved = parseInt(localStorage.getItem('fd.sidebarWidth') || '', 10);
+        if (!isNaN(saved) && saved >= 200 && saved <= 560) {
+          this.sidebarWidth = saved;
+          this.applySidebarWidth();
+        } else {
+          var el = document.getElementById('sidebar');
+          if (el) {
+            var w = el.getBoundingClientRect().width;
+            if (w > 0) { this.sidebarWidth = Math.round(w); }
+          }
+        }
+      },
+      applySidebarWidth() {
+        document.documentElement.style.setProperty('--sidebar-width', this.sidebarWidth + 'px');
+      },
+      startSidebarResize(e) {
+        e.preventDefault();
+        var self = this;
+        this.sidebarResizing = true;
+        this.sidebarResizeMoved = false;
+        this.sidebarResizeStartX = e.clientX;
+        var el = document.getElementById('sidebar');
+        this.sidebarResizeStartW = el ? el.getBoundingClientRect().width : this.sidebarWidth;
+        document.body.classList.add('fd-sidebar-resizing');
+
+        function onMove(ev) {
+          var dx = ev.clientX - self.sidebarResizeStartX;
+          if (Math.abs(dx) > 3) { self.sidebarResizeMoved = true; }
+          var w = Math.max(200, Math.min(560, self.sidebarResizeStartW + dx));
+          self.sidebarWidth = w;
+          self.applySidebarWidth();
+        }
+        function onUp() {
+          document.removeEventListener('pointermove', onMove);
+          document.removeEventListener('pointerup', onUp);
+          document.removeEventListener('pointercancel', onUp);
+          document.body.classList.remove('fd-sidebar-resizing');
+          self.sidebarResizing = false;
+          if (self.sidebarResizeMoved) {
+            try { localStorage.setItem('fd.sidebarWidth', String(Math.round(self.sidebarWidth))); } catch (err) {}
+          } else {
+            self.closeSidebar();
+          }
+        }
+        document.addEventListener('pointermove', onMove);
+        document.addEventListener('pointerup', onUp);
+        document.addEventListener('pointercancel', onUp);
+      },
+
       showContextMenu(event, pageId, pageName) {
         var x = event.clientX, y = event.clientY;
         // Prevent menu from overflowing right edge

app/templates/local_workspace.html

@@ -2495,7 +2495,6 @@ console.log('FLOWDECK v2.4.6 — IIFE done, _wsInitData keys:', Object.keys(wind
 
   <!-- Breadcrumb + toolbar row (Library-style) -->
   <div class="breadcrumb-row">
-    <button class="btn-icon nav-arrow" x-show="sidebarCollapsed" x-cloak @click="sidebarCollapsed = false" title="Show sidebar">{{ fd_icon("chevron-right",14) }}</button>
     <a href="/workspaces" class="btn-icon nav-arrow" title="All workspaces">{{ fd_icon("home",14) }}</a>
     <button class="btn-icon nav-arrow" @click="goBack()" title="Back" :disabled="!canGoBack">{{ fd_icon("chevron-left",14) }}</button>
     <button class="btn-icon nav-arrow" @click="goForward()" title="Forward" :disabled="!canGoForward">{{ fd_icon("chevron-right",14) }}</button>