Enhance Canvas sidebar and deliverables functionality

- Introduced a new sidebar structure for the Canvas page, allowing users to navigate between Insights, Workspace, and Deliverables with improved organization.
- Implemented expandable sections for deliverable projects, enabling users to view and manage project details more effectively.
- Added an auto-save indicator next to project titles to inform users of save status in real-time.
- Updated CSS styles for the sidebar and deliverables view to enhance visual consistency and user experience.

These changes significantly improve the usability and functionality of the Canvas interface, making project management more intuitive.

phd-advisor-frontend/src/components/Sidebar.js

@@ -11,7 +11,9 @@ import {
   User,
   Settings,
   PanelLeft,
-  FileText
+  FileText,
+  ChevronRight,
+  Clock
 } from 'lucide-react';
 import CopyrightNotice from './CopyrightNotice';
 import '../styles/Sidebar.css';
@@ -30,9 +32,22 @@ const Sidebar = ({
   refreshTrigger,
   onCurrentSessionDeleted,
   pageContext = 'chat',
-  canvasItems = []
+  canvasItems = [],
+  canvasSubview = 'workspace',
+  widgetGroups = [],
+  deliverableProjects = [],
 }) => {
   const isOnCanvas = pageContext === 'canvas';
+  const [expanded, setExpanded] = useState(() => {
+    try { return JSON.parse(localStorage.getItem('sidebar-expanded-v1') || '{}'); } catch { return {}; }
+  });
+  const toggleExpanded = (key) => {
+    setExpanded(prev => {
+      const next = { ...prev, [key]: !prev[key] };
+      localStorage.setItem('sidebar-expanded-v1', JSON.stringify(next));
+      return next;
+    });
+  };
   const [chatSessions, setChatSessions] = useState([]);
   const [searchTerm, setSearchTerm] = useState('');
   const [isLoading, setIsLoading] = useState(true);
@@ -260,7 +275,11 @@ const Sidebar = ({
               <Search size={16} className="search-icon" />
               <input
                 type="text"
-                placeholder={isOnCanvas ? 'Search widgets...' : 'Search chats...'}
+                placeholder={
+                  isOnCanvas
+                    ? (canvasSubview === 'deliverables' ? 'Search drafts...' : 'Search widgets...')
+                    : 'Search chats...'
+                }
                 value={searchTerm}
                 onChange={(e) => setSearchTerm(e.target.value)}
                 className="search-input"
@@ -279,39 +298,123 @@ const Sidebar = ({
           </div>
         )}
 
-        {/* Canvas widgets list (when on canvas) */}
+        {/* Canvas sidebar — subview-aware (Insights / Workspace / Deliverables) */}
         {isOnCanvas ? (
-          <div className="chat-sessions">
-            {(() => {
-              const filtered = canvasItems.filter(it =>
-                !searchTerm || it.label.toLowerCase().includes(searchTerm.toLowerCase())
-              );
-              if (filtered.length === 0) {
-                return (
-                  <div className="no-sessions">
-                    {!isCollapsed && (searchTerm ? 'No widgets match' : 'No widgets yet')}
-                  </div>
+          <div className="canvas-sidebar-menu">
+            {!isCollapsed && (() => {
+              const q = searchTerm.toLowerCase();
+
+              // ---------- DELIVERABLES: project list with expandable section dropdown ----------
+              if (canvasSubview === 'deliverables') {
+                const projects = deliverableProjects.filter(p =>
+                  !q || p.name.toLowerCase().includes(q) || p.sections.some(s => s.name.toLowerCase().includes(q))
                 );
+                if (projects.length === 0) {
+                  return (
+                    <div className="no-sessions">
+                      {searchTerm ? 'No drafts match' : 'No drafts yet — create one in Deliverables'}
+                    </div>
+                  );
+                }
+                return projects.map(p => {
+                  const open = expanded[`p-${p.id}`] ?? p.isActive;
+                  const totalWords = p.sections.reduce((s, x) => s + x.wc, 0);
+                  return (
+                    <div key={p.id} className={`csm-project ${p.isActive ? 'active' : ''}`}>
+                      <button
+                        className="csm-project-head"
+                        onClick={() => toggleExpanded(`p-${p.id}`)}
+                      >
+                        <ChevronRight size={12} className={`csm-chevron ${open ? 'open' : ''}`}/>
+                        <FileText size={13}/>
+                        <span className="csm-project-name">{p.name}</span>
+                        {p.versions > 0 && (
+                          <span className="csm-versions" title={`${p.versions} version${p.versions === 1 ? '' : 's'} saved`}>
+                            <Clock size={10}/>{p.versions}
+                          </span>
+                        )}
+                      </button>
+                      {open && (
+                        <div className="csm-project-body">
+                          <button className="csm-row" onClick={p.onOpen}>
+                            <span className="csm-row-icon">📂</span>
+                            <span>Open editor</span>
+                          </button>
+                          {p.sections.map(s => (
+                            <button key={s.id} className="csm-row csm-row-section" onClick={s.onClick}>
+                              <span className="csm-row-bullet"/>
+                              <span className="csm-row-label">{s.name}</span>
+                              {s.wc > 0 && <span className="csm-row-meta">{s.wc}</span>}
+                            </button>
+                          ))}
+                          <div className="csm-row csm-row-foot">
+                            <Clock size={11}/>
+                            <span>{p.versions} version{p.versions === 1 ? '' : 's'} · auto-saved</span>
+                          </div>
+                          <div className="csm-row csm-row-foot">
+                            <span style={{ color: 'var(--text-tertiary, #9CA3AF)' }}>{totalWords} words total</span>
+                          </div>
+                        </div>
+                      )}
+                    </div>
+                  );
+                });
+              }
+
+              // ---------- WORKSPACE: widgets grouped by category ----------
+              if (canvasSubview === 'workspace') {
+                const groups = widgetGroups
+                  .map(g => ({
+                    ...g,
+                    items: g.items.filter(it => !q || it.label.toLowerCase().includes(q)),
+                  }))
+                  .filter(g => g.items.length > 0);
+                if (groups.length === 0) {
+                  return (
+                    <div className="no-sessions">
+                      {searchTerm ? 'No widgets match' : 'Workspace is empty — add widgets'}
+                    </div>
+                  );
+                }
+                return groups.map(g => {
+                  const open = expanded[`g-${g.id}`] ?? true;
+                  return (
+                    <div key={g.id} className="csm-group">
+                      <button className="csm-group-head" onClick={() => toggleExpanded(`g-${g.id}`)}>
+                        <ChevronRight size={11} className={`csm-chevron ${open ? 'open' : ''}`}/>
+                        <span className="csm-group-name">{g.label}</span>
+                        <span className="csm-group-count">{g.items.length}</span>
+                      </button>
+                      {open && (
+                        <div className="csm-group-body">
+                          {g.items.map(it => (
+                            <button key={it.id} className={`csm-row ${it.critic ? 'critic' : ''}`} onClick={it.onClick}>
+                              <span className="csm-row-bullet"/>
+                              <span className="csm-row-label">{it.label}</span>
+                            </button>
+                          ))}
+                        </div>
+                      )}
+                    </div>
+                  );
+                });
+              }
+
+              // ---------- INSIGHTS / fallback: keep flat list ----------
+              const items = canvasItems.filter(it => !q || it.label.toLowerCase().includes(q));
+              if (items.length === 0) {
+                return <div className="no-sessions">{searchTerm ? 'No matches' : 'Nothing here yet'}</div>;
               }
               return (
                 <div className="sessions-list">
-                  {filtered.map((it) => (
-                    <div
-                      key={it.id}
-                      className={`session-item ${isCollapsed ? 'collapsed' : ''}`}
-                      onClick={it.onClick}
-                      title={isCollapsed ? it.label : ''}
-                    >
+                  {items.map((it) => (
+                    <div key={it.id} className="session-item" onClick={it.onClick}>
                       <div className="session-content">
-                        <div className="session-icon">
-                          <FileText size={16} />
+                        <div className="session-icon"><FileText size={16}/></div>
+                        <div className="session-details">
+                          <div className="session-title">{it.label}</div>
+                          {it.sub && <div className="session-meta"><span>{it.sub}</span></div>}
                         </div>
-                        {!isCollapsed && (
-                          <div className="session-details">
-                            <div className="session-title">{it.label}</div>
-                            {it.sub && <div className="session-meta"><span>{it.sub}</span></div>}
-                          </div>
-                        )}
                       </div>
                     </div>
                   ))}

phd-advisor-frontend/src/components/canvas/CanvasDeliverables.js

@@ -27,7 +27,7 @@ const newId = (p) => p + Math.random().toString(36).slice(2, 8);
 // ============================================================================
 // Templates
 // ============================================================================
-const TEMPLATES = [
+export const TEMPLATES = [
   {
     id: 'research-paper',
     name: 'Research Paper',
@@ -509,11 +509,14 @@ const DeliverablesView = ({ allStates }) => {
         <button className="btn btn-ghost" style={{ padding: '4px 8px', fontSize: 12, marginBottom: 4, color: 'var(--canvas-text-3)' }} onClick={closeProject}>
           <Icon name="back" size={12}/>All drafts
         </button>
-        <input
-          className="page-title page-title-editable"
-          value={project.name}
-          onChange={(e) => renameProject(e.target.value)}
-        />
+        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+          <input
+            className="page-title page-title-editable"
+            value={project.name}
+            onChange={(e) => renameProject(e.target.value)}
+          />
+          <SaveIndicator project={project}/>
+        </div>
         <div className="page-sub">
           {template.name} · {totalWords} / {totalTarget} words · ~{readingMinutes(totalWords)} min read · {template.sections.length} {template.mode === 'slides' ? 'slides' : 'sections'}
         </div>
@@ -804,6 +807,45 @@ const DeliverablesView = ({ allStates }) => {
   );
 };
 
+// ============================================================================
+// Auto-save indicator. Drafts persist to localStorage on every keystroke,
+// so we show a transient "Saving…" pill when the project changes, settling
+// to "Saved · Xs ago" while idle.
+// ============================================================================
+function SaveIndicator({ project }) {
+  const [savedAt, setSavedAt] = useState(Date.now());
+  const [pulse, setPulse] = useState(false);
+  const sectionsKey = JSON.stringify(project?.sections || {});
+  useEffect(() => {
+    setPulse(true);
+    const t1 = setTimeout(() => setPulse(false), 300);
+    const t2 = setTimeout(() => setSavedAt(Date.now()), 350);
+    return () => { clearTimeout(t1); clearTimeout(t2); };
+  }, [sectionsKey]);
+
+  // Tick the relative-time string
+  const [, force] = useState(0);
+  useEffect(() => {
+    const i = setInterval(() => force(n => n + 1), 5000);
+    return () => clearInterval(i);
+  }, []);
+
+  const ago = (() => {
+    const d = Math.floor((Date.now() - savedAt) / 1000);
+    if (d < 5) return 'just now';
+    if (d < 60) return `${d}s ago`;
+    if (d < 3600) return `${Math.floor(d / 60)}m ago`;
+    return `${Math.floor(d / 3600)}h ago`;
+  })();
+
+  return (
+    <span className={`save-indicator ${pulse ? 'saving' : ''}`}>
+      <span className="save-indicator-dot"/>
+      {pulse ? 'Saving…' : `Saved · ${ago}`}
+    </span>
+  );
+}
+
 // ============================================================================
 // RichBlock — Notion-style click-to-edit + Docs-style floating toolbar.
 //   • Idle: shows rendered markdown (with KaTeX math) — looks like a real doc

phd-advisor-frontend/src/pages/CanvasPage.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useState, useEffect, useCallback, useMemo } from 'react';
 import { HelpCircle } from 'lucide-react';
 import { useTheme } from '../contexts/ThemeContext';
 import { useAppConfig } from '../contexts/AppConfigContext';
@@ -27,7 +27,7 @@ import {
   PaletteModal, CommandPaletteModal, GlobalSearchModal,
 } from '../components/canvas/CanvasModals';
 import CanvasWelcomeTour from '../components/canvas/CanvasWelcomeTour';
-import DeliverablesView from '../components/canvas/CanvasDeliverables';
+import DeliverablesView, { TEMPLATES as DELIVERABLE_TEMPLATES } from '../components/canvas/CanvasDeliverables';
 import '../styles/CanvasPage.css';
 
 const LAYOUT_KEY = 'canvas-layout-v2';
@@ -455,22 +455,72 @@ const CanvasPage = ({ user, authToken, onNavigateToHome, onNavigateToChat, onSig
     return () => window.removeEventListener('keydown', k);
   }, [closeModal, openCommandPalette, openGlobalSearch]);
 
-  const canvasSidebarItems = layout.map(w => {
-    const meta = WIDGET_CATALOG.find(m => m.type === w.type);
-    return {
-      id: w.id,
-      label: meta?.name || w.type,
-      sub: meta?.cat || '',
-      onClick: () => {
-        const el = document.querySelector(`[data-widget-id="${w.id}"]`);
-        if (el) {
-          el.scrollIntoView({ block: 'center', behavior: 'smooth' });
-          el.style.boxShadow = '0 0 0 2px var(--canvas-accent), 0 0 24px var(--canvas-accent-glow)';
-          setTimeout(() => { el.style.boxShadow = ''; }, 1400);
-        }
-      },
-    };
-  });
+  // Highlight a widget when picked from the sidebar
+  const flashScrollTo = (selector) => {
+    const el = document.querySelector(selector);
+    if (!el) return;
+    el.scrollIntoView({ block: 'center', behavior: 'smooth' });
+    el.style.boxShadow = '0 0 0 2px var(--canvas-accent), 0 0 24px var(--canvas-accent-glow)';
+    setTimeout(() => { el.style.boxShadow = ''; }, 1400);
+  };
+
+  // Workspace: group widgets by category for the new sidebar
+  const widgetGroups = useMemo(() => {
+    const groups = {};
+    layout.forEach(w => {
+      const meta = WIDGET_CATALOG.find(m => m.type === w.type);
+      if (!meta) return;
+      const cat = meta.cat;
+      (groups[cat] ||= { id: cat, label: cat, items: [] }).items.push({
+        id: w.id,
+        label: meta.name,
+        icon: meta.icon,
+        critic: meta.critic,
+        onClick: () => flashScrollTo(`[data-widget-id="${w.id}"]`),
+      });
+    });
+    // Order: critic last
+    const order = ['research', 'writing', 'project', 'wellness', 'career', 'data', 'practical', 'critic'];
+    return order.map(c => groups[c]).filter(Boolean);
+  }, [layout]);
+
+  // Deliverables: list of projects with sections + history actions
+  const deliverableProjects = useMemo(() => {
+    try {
+      const dStore = JSON.parse(localStorage.getItem('canvas-deliverables-v2') || '{}');
+      const projects = Object.values(dStore.projects || {});
+      return projects.map(p => {
+        const t = DELIVERABLE_TEMPLATES.find(x => x.id === p.templateId);
+        return {
+          id: p.id,
+          name: p.name,
+          icon: t?.icon || 'book',
+          versions: p.versions?.length || 0,
+          isActive: p.id === dStore.activeProjectId,
+          sections: (t?.sections || []).map(s => ({
+            id: s.id,
+            name: s.name,
+            wc: ((p.sections || {})[s.id] || '').trim().split(/\s+/).filter(Boolean).length,
+            onClick: () => {
+              if (p.id !== dStore.activeProjectId) {
+                // Open this project first; section scroll happens after a tick.
+                const next = { ...dStore, activeProjectId: p.id };
+                localStorage.setItem('canvas-deliverables-v2', JSON.stringify(next));
+                window.dispatchEvent(new Event('storage'));
+              }
+              setTimeout(() => flashScrollTo(`#notion-section-${s.id}`), 80);
+            },
+          })),
+          onOpen: () => {
+            const next = { ...dStore, activeProjectId: p.id };
+            localStorage.setItem('canvas-deliverables-v2', JSON.stringify(next));
+            window.dispatchEvent(new Event('storage'));
+          },
+        };
+      });
+    } catch { return []; }
+    // re-derive when view or layout changes (layout proxy for "user did something")
+  }, [view, layout, widgetStates]); // eslint-disable-line react-hooks/exhaustive-deps
 
   return (
     <div className="canvas-page-with-sidebar" data-canvas-theme={theme}>
@@ -485,7 +535,9 @@ const CanvasPage = ({ user, authToken, onNavigateToHome, onNavigateToChat, onSig
         onSelectSession={(id) => onNavigateToChat && onNavigateToChat(id)}
         onNewChat={() => onNavigateToChat && onNavigateToChat()}
         pageContext="canvas"
-        canvasItems={canvasSidebarItems}
+        canvasSubview={view}
+        widgetGroups={widgetGroups}
+        deliverableProjects={deliverableProjects}
       />
       <div className={`canvas-main-area ${isSidebarCollapsed ? 'sidebar-collapsed' : ''}`}>
         <div className="canvas-app-shell">

phd-advisor-frontend/src/styles/CanvasPage.css

@@ -1609,6 +1609,159 @@ body[data-canvas-theme="light"] .canvas-modal-backdrop .critic-meter .bar { back
 .canvas-page-with-sidebar .paper-empty { color: #9ca3af; font-style: italic; font-size: 12px; }
 .canvas-page-with-sidebar .paper-section { margin-bottom: 4px; }
 
+/* ----- Canvas-mode app sidebar menu (Insights / Workspace / Deliverables) ----- */
+/* These rules live in the *app* sidebar (not the canvas-page-with-sidebar scope)
+   because they apply to .sidebar from components.css when the user is on canvas. */
+.canvas-sidebar-menu {
+  flex: 1;
+  overflow-y: auto;
+  padding: 8px 8px 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.canvas-sidebar-menu .no-sessions {
+  padding: 18px 12px;
+  font-size: 12px;
+  color: var(--text-tertiary, #9CA3AF);
+  text-align: center;
+}
+
+/* --- Workspace: widget groups --- */
+.canvas-sidebar-menu .csm-group { display: flex; flex-direction: column; gap: 1px; margin-bottom: 4px; }
+.canvas-sidebar-menu .csm-group-head {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 8px;
+  background: transparent;
+  border: none;
+  border-radius: 5px;
+  font-family: inherit;
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  font-weight: 600;
+  color: var(--text-tertiary, #9CA3AF);
+  cursor: pointer;
+}
+.canvas-sidebar-menu .csm-group-head:hover { background: var(--bg-secondary, #f3f4f6); color: var(--text-secondary, #6b7280); }
+.dark .canvas-sidebar-menu .csm-group-head:hover { background: var(--bg-secondary-dark, #374151); }
+.canvas-sidebar-menu .csm-group-name { flex: 1; text-align: left; }
+.canvas-sidebar-menu .csm-group-count {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 10px;
+  color: var(--text-tertiary, #9CA3AF);
+}
+.canvas-sidebar-menu .csm-group-body { display: flex; flex-direction: column; gap: 1px; padding: 2px 0 6px 8px; }
+
+/* --- Deliverables: project blocks --- */
+.canvas-sidebar-menu .csm-project {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  border-radius: 6px;
+  margin-bottom: 4px;
+}
+.canvas-sidebar-menu .csm-project.active { background: rgba(99, 102, 241, 0.06); }
+.dark .canvas-sidebar-menu .csm-project.active { background: rgba(129, 140, 248, 0.10); }
+.canvas-sidebar-menu .csm-project-head {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  padding: 8px 10px;
+  background: transparent;
+  border: none;
+  border-radius: 5px;
+  font-family: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text-primary, #111827);
+  cursor: pointer;
+  text-align: left;
+}
+.canvas-sidebar-menu .csm-project-head:hover { background: var(--bg-secondary, #f3f4f6); }
+.dark .canvas-sidebar-menu .csm-project-head { color: var(--text-primary-dark, #f9fafb); }
+.dark .canvas-sidebar-menu .csm-project-head:hover { background: var(--bg-secondary-dark, #374151); }
+.canvas-sidebar-menu .csm-project.active .csm-project-name { color: var(--accent-primary, #6366F1); font-weight: 600; }
+.canvas-sidebar-menu .csm-project-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.canvas-sidebar-menu .csm-versions {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 10px;
+  color: var(--text-tertiary, #9CA3AF);
+  padding: 1px 5px;
+  border-radius: 3px;
+  background: var(--bg-secondary, #f3f4f6);
+}
+.dark .canvas-sidebar-menu .csm-versions { background: var(--bg-secondary-dark, #374151); }
+.canvas-sidebar-menu .csm-project-body {
+  padding: 2px 0 8px 22px;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+
+/* --- Shared row (used in groups and project bodies) --- */
+.canvas-sidebar-menu .csm-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 5px 10px 5px 6px;
+  background: transparent;
+  border: none;
+  border-radius: 4px;
+  font-family: inherit;
+  font-size: 12.5px;
+  color: var(--text-secondary, #6b7280);
+  text-align: left;
+  cursor: pointer;
+}
+.canvas-sidebar-menu .csm-row:hover {
+  background: var(--bg-secondary, #f3f4f6);
+  color: var(--text-primary, #111827);
+}
+.dark .canvas-sidebar-menu .csm-row { color: var(--text-secondary-dark, #9ca3af); }
+.dark .canvas-sidebar-menu .csm-row:hover { background: var(--bg-secondary-dark, #374151); color: var(--text-primary-dark, #f9fafb); }
+.canvas-sidebar-menu .csm-row.critic { color: #8B5CF6; }
+.dark .canvas-sidebar-menu .csm-row.critic { color: #A78BFA; }
+.canvas-sidebar-menu .csm-row-bullet {
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  background: currentColor;
+  opacity: 0.45;
+  flex-shrink: 0;
+  margin-left: 4px;
+}
+.canvas-sidebar-menu .csm-row-icon { font-size: 11px; opacity: 0.85; }
+.canvas-sidebar-menu .csm-row-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.canvas-sidebar-menu .csm-row-meta {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 9.5px;
+  color: var(--text-tertiary, #9CA3AF);
+}
+.canvas-sidebar-menu .csm-row-foot {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 3px 8px;
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 9.5px;
+  color: var(--text-tertiary, #9CA3AF);
+  cursor: default;
+}
+.canvas-sidebar-menu .csm-row-foot:hover { background: transparent; color: var(--text-tertiary, #9CA3AF); }
+
+/* Chevron rotates open/closed */
+.canvas-sidebar-menu .csm-chevron {
+  transition: transform 0.15s ease;
+  color: var(--text-tertiary, #9CA3AF);
+}
+.canvas-sidebar-menu .csm-chevron.open { transform: rotate(90deg); }
+
 /* ----- Deliverable project tabs (Overleaf-style multi-draft) ----- */
 .canvas-page-with-sidebar .deliverable-projects {
   display: flex;
@@ -1652,6 +1805,41 @@ body[data-canvas-theme="light"] .canvas-modal-backdrop .critic-meter .bar { back
 .canvas-page-with-sidebar .deliverable-new-project summary::-webkit-details-marker { display: none; }
 .canvas-page-with-sidebar .deliverable-new-project[open] summary { background: var(--canvas-surface-2); color: var(--canvas-text); }
 
+/* Auto-save indicator next to the project title */
+.canvas-page-with-sidebar .save-indicator {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11.5px;
+  color: var(--canvas-text-3);
+  font-family: var(--canvas-mono);
+  white-space: nowrap;
+  padding: 4px 8px;
+  border-radius: 999px;
+  background: var(--canvas-surface-2);
+  transition: background .2s, color .2s;
+}
+.canvas-page-with-sidebar .save-indicator-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--canvas-ok);
+  box-shadow: 0 0 6px rgba(16, 185, 129, 0.4);
+  transition: background .2s;
+}
+.canvas-page-with-sidebar .save-indicator.saving {
+  background: var(--canvas-accent-glow);
+  color: var(--canvas-accent);
+}
+.canvas-page-with-sidebar .save-indicator.saving .save-indicator-dot {
+  background: var(--canvas-accent);
+  animation: save-pulse 0.6s ease infinite;
+}
+@keyframes save-pulse {
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50% { opacity: 0.4; transform: scale(0.85); }
+}
+
 /* Editable project title — looks like the page-title but is an input */
 .canvas-page-with-sidebar .page-title-editable {
   background: transparent;