Draft 1

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

@@ -28,9 +28,13 @@ const AppHeader = ({
     if (onNavigateToCanvas) onNavigateToCanvas(view);
   };
 
+  // Accept either 'canvas' (all canvas tabs highlight equally) or a more specific
+  // 'canvas-<subview>' from CanvasPage so only the active one highlights.
   const isOnHome = currentPage === 'home';
   const isOnChat = currentPage === 'chat';
-  const isOnCanvas = currentPage === 'canvas';
+  const isOnCanvas = currentPage === 'canvas' || currentPage.startsWith('canvas-');
+  const canvasSub = currentPage.startsWith('canvas-') ? currentPage.slice(7) : null;
+  const tabActive = (sub) => isOnCanvas && (canvasSub === null ? false : canvasSub === sub);
 
   return (
     <header className="floating-header app-header">
@@ -62,8 +66,9 @@ const AppHeader = ({
 
       <div className="canvas-tabs chat-view-tabs">
         <button className={`tab ${isOnChat ? 'active' : ''}`} onClick={onNavigateToChat}>Chat</button>
-        <button className={`tab ${isOnCanvas ? 'active' : ''}`} onClick={() => goToCanvas('insights')}>Insights</button>
-        <button className={`tab ${isOnCanvas ? 'active' : ''}`} onClick={() => goToCanvas('workspace')}>Workspace</button>
+        <button className={`tab ${tabActive('insights') ? 'active' : ''}`} onClick={() => goToCanvas('insights')}>Insights</button>
+        <button className={`tab ${tabActive('workspace') ? 'active' : ''}`} onClick={() => goToCanvas('workspace')}>Workspace</button>
+        <button className={`tab ${tabActive('deliverables') ? 'active' : ''}`} onClick={() => goToCanvas('deliverables')}>Deliverables</button>
       </div>
 
       <div className="header-right">

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

@@ -0,0 +1,540 @@
+// Deliverables view — pick a template, fill in structured sections, export.
+// Static "missing" checks run locally. AI checks are stubbed (need LLM endpoint).
+import React, { useState, useMemo, useEffect, useRef } from 'react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import Icon from './CanvasIcon';
+
+const fireToast = (msg, kind = 'success') =>
+  window.dispatchEvent(new CustomEvent('canvas-toast', { detail: { msg, kind } }));
+
+const STORE_KEY = 'canvas-deliverables-v1';
+
+// ---------- Template definitions ----------
+const TEMPLATES = [
+  {
+    id: 'research-paper',
+    name: 'Research Paper',
+    desc: 'Abstract → Introduction → Methods → Results → Discussion → References',
+    icon: 'book',
+    mode: 'paper',
+    sections: [
+      { id: 'abstract', name: 'Abstract', target: 250, hint: 'One paragraph: question, method, finding, implication.', checks: ['hasNumber', 'hasFinding'] },
+      { id: 'intro', name: 'Introduction', target: 1000, hint: 'Frame the problem, state the gap, name your contribution.', checks: ['hasGap', 'hasCitation'] },
+      { id: 'methods', name: 'Methods', target: 800, hint: 'Reproducibility-first: subjects, materials, procedure, analysis.', checks: ['hasCitation', 'hasNumber'] },
+      { id: 'results', name: 'Results', target: 800, hint: 'Lead with the effect. Numbers + figure refs. No interpretation here.', checks: ['hasNumber', 'hasFigure'] },
+      { id: 'discussion', name: 'Discussion', target: 1000, hint: 'What it means, what it doesn\'t, limits, future work.', checks: ['hasLimit', 'hasCitation'] },
+      { id: 'refs', name: 'References', target: 0, hint: 'Bibliography list. Drop @keys here from the Bibliography widget.', checks: [] },
+    ],
+  },
+  {
+    id: 'nsf-grfp',
+    name: 'NSF GRFP',
+    desc: 'Personal Statement (3 pages) + Research Plan (2 pages)',
+    icon: 'award',
+    mode: 'document',
+    sections: [
+      { id: 'personal', name: 'Personal Statement', target: 1500, hint: 'Background, experiences, broader impacts. Write as a story.', checks: ['hasBroaderImpacts'] },
+      { id: 'research', name: 'Research Plan', target: 1000, hint: 'Question, hypothesis, approach, intellectual merit.', checks: ['hasHypothesis', 'hasMerit'] },
+    ],
+  },
+  {
+    id: 'conference-abstract',
+    name: 'Conference Abstract',
+    desc: 'Single section, 250 words. Lead with the result.',
+    icon: 'send',
+    mode: 'document',
+    sections: [
+      { id: 'abs', name: 'Abstract', target: 250, hint: 'One paragraph. Lead with finding, end with implication.', checks: ['hasFinding', 'hasNumber'] },
+    ],
+  },
+  {
+    id: 'defense-slides',
+    name: 'Defense Slides',
+    desc: 'Title → Outline → Background → Question → Methods → Results → Discussion → Q&A',
+    icon: 'kanban',
+    mode: 'slides',
+    sections: [
+      { id: 'title', name: 'Title slide', target: 30, hint: 'Title, your name, advisor, date.', checks: [] },
+      { id: 'outline', name: 'Outline', target: 60, hint: '5–7 bullet points covering the talk arc.', checks: [] },
+      { id: 'background', name: 'Background', target: 200, hint: 'Just enough context to follow the question.', checks: ['hasCitation'] },
+      { id: 'question', name: 'Question', target: 80, hint: 'Single sentence, falsifiable.', checks: [] },
+      { id: 'methods', name: 'Methods', target: 200, hint: 'High-level. Save details for backup slides.', checks: ['hasNumber'] },
+      { id: 'results', name: 'Results', target: 300, hint: 'One slide per finding. Lead with the headline.', checks: ['hasFigure', 'hasNumber'] },
+      { id: 'discussion', name: 'Discussion', target: 200, hint: 'Implications + limits + next steps.', checks: ['hasLimit'] },
+      { id: 'qa', name: 'Anticipated Q&A', target: 300, hint: 'Hardest 5 questions and your answers.', checks: [] },
+    ],
+  },
+  {
+    id: 'thesis-chapter',
+    name: 'Thesis Chapter',
+    desc: 'Standard chapter scaffolding for a dissertation.',
+    icon: 'book',
+    mode: 'paper',
+    sections: [
+      { id: 'overview', name: 'Overview', target: 200, hint: 'What this chapter does and why it\'s here.', checks: [] },
+      { id: 'background', name: 'Background', target: 1500, hint: 'Lit review focused on this chapter\'s question.', checks: ['hasCitation'] },
+      { id: 'methods', name: 'Methods', target: 1500, hint: 'Reproducibility-first.', checks: ['hasCitation', 'hasNumber'] },
+      { id: 'results', name: 'Results', target: 2000, hint: 'Findings + figures.', checks: ['hasFigure', 'hasNumber'] },
+      { id: 'discussion', name: 'Discussion', target: 1500, hint: 'How it fits the larger thesis.', checks: ['hasLimit'] },
+    ],
+  },
+];
+
+// ---------- Static check rules ----------
+const CHECKS = {
+  hasNumber: { test: (s) => /\d/.test(s), label: 'Mentions at least one number' },
+  hasCitation: { test: (s) => /@\w+/.test(s), label: 'Cites at least one source (@key)' },
+  hasFinding: { test: (s) => /\b(we (find|show|report|demonstrate)|finding|result)/i.test(s), label: 'States a finding' },
+  hasGap: { test: (s) => /\b(gap|lack|missing|unknown|unclear|despite)/i.test(s), label: 'Names a gap' },
+  hasFigure: { test: (s) => /\b(fig(ure)?|table)\.?\s*\d/i.test(s), label: 'References a figure or table' },
+  hasLimit: { test: (s) => /\b(limit|caveat|however|future work|did not|cannot)/i.test(s), label: 'Acknowledges a limit' },
+  hasBroaderImpacts: { test: (s) => /\b(broader impact|outreach|community|underrepresented|access)/i.test(s), label: 'Addresses broader impacts' },
+  hasHypothesis: { test: (s) => /\b(hypothes|predict)/i.test(s), label: 'States a hypothesis or prediction' },
+  hasMerit: { test: (s) => /\b(intellectual merit|novel|advances|contribut)/i.test(s), label: 'Frames intellectual merit' },
+};
+
+const wordCount = (s) => (s || '').trim().split(/\s+/).filter(Boolean).length;
+
+// ---------- Exporters ----------
+const exportMarkdown = (template, sections) => {
+  return [
+    `# ${template.name}\n`,
+    ...template.sections.map(s => `## ${s.name}\n\n${sections[s.id] || ''}\n`),
+  ].join('\n');
+};
+const exportLatex = (template, sections) => {
+  return [
+    '\\documentclass{article}',
+    `\\title{${template.name}}`,
+    '\\begin{document}',
+    '\\maketitle',
+    ...template.sections.map(s => `\n\\section{${s.name}}\n${sections[s.id] || ''}\n`),
+    '\\end{document}',
+  ].join('\n');
+};
+const exportHtml = (template, sections) => {
+  return [
+    '<!doctype html>',
+    `<html><head><title>${template.name}</title></head><body>`,
+    `<h1>${template.name}</h1>`,
+    ...template.sections.map(s => `<section><h2>${s.name}</h2><p>${(sections[s.id] || '').replace(/\n/g, '<br>')}</p></section>`),
+    '</body></html>',
+  ].join('\n');
+};
+
+const downloadFile = (filename, mime, contents) => {
+  const blob = new Blob([contents], { type: mime });
+  const a = document.createElement('a');
+  a.href = URL.createObjectURL(blob);
+  a.download = filename;
+  a.click();
+};
+
+// ---------- Component ----------
+const DeliverablesView = ({ allStates }) => {
+  const [store, setStore] = useState(() => {
+    try { return JSON.parse(localStorage.getItem(STORE_KEY) || '{}'); } catch { return {}; }
+  });
+  useEffect(() => { localStorage.setItem(STORE_KEY, JSON.stringify(store)); }, [store]);
+
+  const activeId = store.activeTemplateId;
+  const template = TEMPLATES.find(t => t.id === activeId);
+  const sections = (store.templates && store.templates[activeId]) || {};
+  const [activeSectionId, setActiveSectionId] = useState(template?.sections[0]?.id);
+  const [generatingAi, setGeneratingAi] = useState(false);
+
+  // Keep activeSectionId valid when template changes (re-mount from localStorage,
+  // template switch, etc.). Falls back to the first section.
+  useEffect(() => {
+    if (!template) return;
+    const valid = template.sections.some(s => s.id === activeSectionId);
+    if (!valid) setActiveSectionId(template.sections[0].id);
+  }, [activeId, template, activeSectionId]);
+
+  // TODO(LLM): wire `runAiPass` to backend that returns per-section "missing" notes.
+  // const runAiPass = async () => {
+  //   const res = await fetch(`${process.env.REACT_APP_API_URL}/api/canvas/deliverable-check`, {
+  //     method: 'POST',
+  //     body: JSON.stringify({ template: template.id, sections, canvas: allStates }),
+  //   });
+  //   const { notes } = await res.json();
+  //   setStore({ ...store, templates: { ...store.templates, [activeId]: { ...sections, _aiNotes: notes } } });
+  // };
+  const runAiPass = () => {
+    setGeneratingAi(true);
+    setTimeout(() => {
+      const notes = template.sections.map(s => {
+        const text = sections[s.id] || '';
+        const wc = wordCount(text);
+        if (wc === 0) return { sectionId: s.id, msg: `Empty — start with: "${s.hint}"` };
+        if (wc < s.target * 0.3) return { sectionId: s.id, msg: `Thin (${wc} words). Target ${s.target}.` };
+        return { sectionId: s.id, msg: `Looks reasonable for length (${wc} words). LLM-pass would suggest specifics here.` };
+      });
+      setStore(prev => ({
+        ...prev,
+        templates: { ...prev.templates, [activeId]: { ...sections, _aiNotes: notes } },
+      }));
+      setGeneratingAi(false);
+      fireToast('AI pass complete (stub)');
+    }, 700);
+  };
+
+  const pickTemplate = (id) => {
+    setStore({ ...store, activeTemplateId: id });
+    setActiveSectionId(TEMPLATES.find(t => t.id === id).sections[0].id);
+  };
+
+  const updateSection = (id, value) => {
+    setStore(prev => ({
+      ...prev,
+      templates: {
+        ...prev.templates,
+        [activeId]: { ...(prev.templates?.[activeId] || {}), [id]: value },
+      },
+    }));
+  };
+
+  const exportAs = (format) => {
+    const filename = `${template.name.replace(/\s+/g, '_')}.${format === 'latex' ? 'tex' : format === 'markdown' ? 'md' : 'html'}`;
+    const mime = format === 'html' ? 'text/html' : 'text/plain';
+    const contents = format === 'markdown' ? exportMarkdown(template, sections)
+      : format === 'latex' ? exportLatex(template, sections)
+      : exportHtml(template, sections);
+    downloadFile(filename, mime, contents);
+    fireToast(`Exported ${filename}`);
+  };
+
+  // Aggregated word count
+  const totalWords = template ? template.sections.reduce((sum, s) => sum + wordCount(sections[s.id]), 0) : 0;
+  const totalTarget = template ? template.sections.reduce((sum, s) => sum + s.target, 0) : 0;
+
+  // Insertable elements from the canvas (citations, quotes, outline nodes, chapter drafts)
+  const insertables = useMemo(() => {
+    const items = [];
+    (allStates?.bibliography?.entries || []).forEach(e => items.push({ kind: 'cite', label: `${e.title}`, snippet: ` (${e.authors}, ${e.year}; @${e.key})` }));
+    (allStates?.highlights?.items || []).forEach(h => items.push({ kind: 'quote', label: h.text.slice(0, 60), snippet: `"${h.text}"${h.citeKey ? ` (@${h.citeKey})` : ''}` }));
+    (allStates?.outline?.items || []).forEach(o => items.push({ kind: 'outline', label: o.text || '(empty)', snippet: '\n' + '  '.repeat(o.depth) + '- ' + (o.text || '') }));
+    (allStates?.writing?.chapters || []).forEach(c => items.push({ kind: 'draft', label: c.name, snippet: c.draft || '' }));
+    return items;
+  }, [allStates]);
+
+  const insertIntoActive = (snippet) => {
+    if (!activeSectionId) return;
+    const cur = sections[activeSectionId] || '';
+    updateSection(activeSectionId, cur + (cur && !cur.endsWith('\n') ? ' ' : '') + snippet);
+    fireToast('Inserted into ' + template.sections.find(s => s.id === activeSectionId)?.name);
+  };
+
+  // Empty state — pick a template
+  if (!template) {
+    return (
+      <>
+        <div className="page-header">
+          <div>
+            <h1 className="page-title">Deliverables</h1>
+            <div className="page-sub">Pick a template; bring elements in from your canvas; export when ready.</div>
+          </div>
+        </div>
+        <div className="canvas-presets-grid">
+          {TEMPLATES.map(t => (
+            <button key={t.id} className="canvas-preset-card" onClick={() => pickTemplate(t.id)}>
+              <div className="canvas-preset-icon"><Icon name={t.icon} size={18}/></div>
+              <div className="canvas-preset-content">
+                <div className="canvas-preset-name">{t.name}</div>
+                <div className="canvas-preset-desc">{t.desc}</div>
+                <div className="canvas-preset-meta">{t.sections.length} sections</div>
+              </div>
+            </button>
+          ))}
+        </div>
+        {/* TODO(LLM): "Upload project brief → AI generates a custom outline" button.
+            Wire to backend that returns a synthesized template:
+            const onUpload = async (file) => {
+              const text = await file.text();
+              const res = await fetch(`${API}/api/canvas/outline-from-brief`, { method:'POST', body: text });
+              const { template, sections } = await res.json();
+              // Inject as a new template into TEMPLATES at runtime, then pickTemplate(template.id);
+            };
+        */}
+        <div className="canvas-presets" style={{ marginTop: 18 }}>
+          <div className="canvas-presets-head">
+            <div className="canvas-presets-title">From a project brief</div>
+            <div className="canvas-presets-sub">Upload your brief and the AI will draft a custom outline. <em>(Needs LLM endpoint — coming soon.)</em></div>
+          </div>
+          <button className="btn" disabled title="Needs LLM endpoint">
+            <Icon name="download" size={13} style={{ transform: 'rotate(180deg)' }}/>Upload project brief
+          </button>
+        </div>
+      </>
+    );
+  }
+
+  const aiNotes = sections._aiNotes;
+
+  // Shared header + insertables panel — used by all editor modes.
+  const Header = (
+    <div className="page-header">
+      <div>
+        <button className="btn btn-ghost" style={{ padding: '4px 8px', fontSize: 12, marginBottom: 4, color: 'var(--canvas-text-3)' }} onClick={() => setStore({ ...store, activeTemplateId: undefined })}>
+          <Icon name="back" size={12}/>Templates
+        </button>
+        <h1 className="page-title">{template.name}</h1>
+        <div className="page-sub">
+          {totalWords} / {totalTarget} words · {template.sections.length} {template.mode === 'slides' ? 'slides' : 'sections'}
+        </div>
+      </div>
+      <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', alignItems: 'flex-start' }}>
+        <button className="btn btn-ghost" onClick={runAiPass} disabled={generatingAi} title="AI check (stub)">
+          {generatingAi ? <><div className="spinner"/></> : <Icon name="sparkles" size={13}/>}
+          AI check
+        </button>
+        <div style={{ position: 'relative' }}>
+          <details className="canvas-export-menu">
+            <summary className="btn btn-primary"><Icon name="download" size={13}/>Export</summary>
+            <div className="canvas-export-menu-list">
+              <button onClick={() => exportAs('markdown')}>Markdown (.md)</button>
+              <button onClick={() => exportAs('latex')}>LaTeX (.tex)</button>
+              <button onClick={() => exportAs('html')}>HTML (.html)</button>
+            </div>
+          </details>
+        </div>
+      </div>
+    </div>
+  );
+
+  const InsertPanel = (
+    <div className="deliverable-insertables">
+      <div style={{ fontSize: 11, color: 'var(--canvas-text-4)', textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 600, marginBottom: 8 }}>
+        From canvas · {insertables.length}
+      </div>
+      {insertables.length === 0 && (
+        <div style={{ padding: 12, fontSize: 11.5, color: 'var(--canvas-text-3)', background: 'var(--canvas-surface)', border: '1px dashed var(--canvas-border-2)', borderRadius: 7 }}>
+          Add a Bibliography, Highlights, Outline, or Writing widget to your canvas; their content shows up here for one-click insert.
+        </div>
+      )}
+      {insertables.map((it, i) => (
+        <button key={i} onClick={() => insertIntoActive(it.snippet)} className="canvas-insert-row">
+          <span className="tag-pill">{it.kind}</span>
+          <span style={{ flex: 1, fontSize: 11.5, color: 'var(--canvas-text)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{it.label}</span>
+          <Icon name="plus" size={12} style={{ color: 'var(--canvas-text-3)' }}/>
+        </button>
+      ))}
+    </div>
+  );
+
+  // ---------- SLIDES MODE — PowerPoint / Google Slides feel ----------
+  if (template.mode === 'slides') {
+    const activeIdx = template.sections.findIndex(s => s.id === activeSectionId);
+    const active = template.sections[activeIdx] || template.sections[0];
+    const text = sections[active.id] || '';
+    const aiForSlide = aiNotes && aiNotes.find(n => n.sectionId === active.id);
+    // Render body as bullet points if it contains line breaks; otherwise as a paragraph.
+    const lines = text.split(/\n+/).map(l => l.trim()).filter(Boolean);
+
+    return (
+      <>
+        {Header}
+        <div className="deliverable-slides-grid">
+          {/* Slide thumbnails */}
+          <div className="slide-thumbs">
+            <div style={{ fontSize: 10, color: 'var(--canvas-text-4)', textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 600, padding: '0 4px 6px' }}>
+              {template.sections.length} slides
+            </div>
+            {template.sections.map((s, i) => {
+              const t = sections[s.id] || '';
+              const tLines = t.split(/\n+/).map(l => l.trim()).filter(Boolean);
+              return (
+                <button key={s.id}
+                  className={`slide-thumb ${s.id === active.id ? 'active' : ''}`}
+                  onClick={() => setActiveSectionId(s.id)}
+                  title={s.name}>
+                  <div className="slide-thumb-num">{i + 1}</div>
+                  <div className="slide-thumb-canvas">
+                    <div className="slide-thumb-title">{s.name}</div>
+                    <div className="slide-thumb-body">
+                      {tLines.slice(0, 3).map((l, j) => <div key={j}>• {l.slice(0, 30)}</div>)}
+                    </div>
+                  </div>
+                </button>
+              );
+            })}
+          </div>
+
+          {/* Big slide canvas */}
+          <div>
+            <div className="slide-canvas-wrap">
+              <div className="slide-canvas">
+                <div className="slide-canvas-title">{active.name}</div>
+                <div className="slide-canvas-body">
+                  {lines.length === 0 ? (
+                    <div className="slide-placeholder">{active.hint}</div>
+                  ) : lines.length === 1 ? (
+                    <div className="slide-paragraph">{lines[0]}</div>
+                  ) : (
+                    <ul>{lines.map((l, j) => <li key={j}>{l}</li>)}</ul>
+                  )}
+                </div>
+                <div className="slide-canvas-footer">{activeIdx + 1} / {template.sections.length}</div>
+              </div>
+            </div>
+
+            {/* Edit pane below the canvas (so the slide stays the focus) */}
+            <div style={{ marginTop: 14, display: 'flex', flexDirection: 'column', gap: 8 }}>
+              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                <span style={{ fontSize: 11, color: 'var(--canvas-text-4)', textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 600 }}>
+                  Slide content
+                </span>
+                <span style={{ fontSize: 11, color: 'var(--canvas-text-3)' }}>· One bullet per line</span>
+                <span style={{ flex: 1 }}/>
+                <span style={{ fontFamily: 'var(--canvas-mono)', fontSize: 10, color: 'var(--canvas-text-3)' }}>
+                  {wordCount(text)}{active.target ? `/${active.target}` : ''} words
+                </span>
+              </div>
+              <textarea
+                className="textarea"
+                value={text}
+                onChange={e => updateSection(active.id, e.target.value)}
+                placeholder={active.hint}
+                style={{ minHeight: 110, fontSize: 13, lineHeight: 1.6 }}
+              />
+              {(active.checks || []).length > 0 && (
+                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
+                  {active.checks.map(c => {
+                    const check = CHECKS[c];
+                    if (!check) return null;
+                    const passed = check.test(text);
+                    return (
+                      <span key={c} className="check-pill" data-passed={passed}>
+                        {passed ? <Icon name="check" size={10}/> : <span style={{ width: 10, height: 10, borderRadius: 2, border: '1px solid currentColor' }}/>}
+                        {check.label}
+                      </span>
+                    );
+                  })}
+                </div>
+              )}
+              {aiForSlide && (
+                <div className="review" style={{ borderLeftColor: 'var(--canvas-accent)' }}>
+                  <span className="review-tag" style={{ color: 'var(--canvas-accent)' }}>AI suggestion · stub</span>
+                  {aiForSlide.msg}
+                </div>
+              )}
+            </div>
+          </div>
+
+          {InsertPanel}
+        </div>
+      </>
+    );
+  }
+
+  // ---------- PAPER / DOCUMENT MODE — Notion-style single-surface page ----------
+  const paperLike = template.mode === 'paper';
+  return (
+    <>
+      {Header}
+      <div className="notion-deliverable-grid">
+        {/* TOC sidebar — subtle, no boxes */}
+        <div className="notion-toc">
+          <div className="notion-toc-label">On this page</div>
+          {template.sections.map(s => {
+            const wc = wordCount(sections[s.id]);
+            return (
+              <button key={s.id}
+                className={`notion-toc-link ${activeSectionId === s.id ? 'active' : ''}`}
+                onClick={() => {
+                  setActiveSectionId(s.id);
+                  const el = document.getElementById(`notion-section-${s.id}`);
+                  if (el) el.scrollIntoView({ block: 'start', behavior: 'smooth' });
+                }}>
+                <span className="notion-toc-link-text">{s.name}</span>
+                {wc > 0 && <span className="notion-toc-link-count">{wc}</span>}
+              </button>
+            );
+          })}
+        </div>
+
+        {/* The page itself — what you see is what you edit */}
+        <div className={`notion-page-wrap ${paperLike ? 'paper' : ''}`}>
+          <div className={`notion-page ${paperLike ? 'serif' : ''}`}>
+            <h1 className="notion-page-title">{template.name}</h1>
+            <div className="notion-page-meta">
+              {totalWords} words · {template.sections.length} sections{paperLike ? ' · academic paper' : ''}
+            </div>
+            {template.sections.map(s => {
+              const text = sections[s.id] || '';
+              const aiForSection = aiNotes ? aiNotes.find(n => n.sectionId === s.id) : null;
+              const failed = (s.checks || []).filter(c => CHECKS[c] && !CHECKS[c].test(text));
+              return (
+                <div key={s.id} id={`notion-section-${s.id}`} className="notion-block">
+                  <h2 className={`notion-h2 ${paperLike ? 'serif' : ''}`}>{s.name}</h2>
+                  {!text && <div className="notion-hint">{s.hint}</div>}
+                  <NotionTextarea
+                    value={text}
+                    onChange={(v) => updateSection(s.id, v)}
+                    placeholder={`Start writing ${s.name.toLowerCase()}…`}
+                    serif={paperLike}
+                  />
+                  {(s.checks || []).length > 0 && (
+                    <div className="notion-block-meta">
+                      {s.checks.map(c => {
+                        const check = CHECKS[c];
+                        if (!check) return null;
+                        const passed = check.test(text);
+                        return (
+                          <span key={c} className="check-pill" data-passed={passed}>
+                            {passed ? <Icon name="check" size={10}/> : <span style={{ width: 10, height: 10, borderRadius: 2, border: '1px solid currentColor' }}/>}
+                            {check.label}
+                          </span>
+                        );
+                      })}
+                      {s.target > 0 && (
+                        <span className="check-pill" data-passed={wordCount(text) >= s.target * 0.7}>
+                          {wordCount(text)} / {s.target} words
+                        </span>
+                      )}
+                    </div>
+                  )}
+                  {aiForSection && (
+                    <div className="notion-callout">
+                      <Icon name="sparkles" size={14}/>
+                      <div>
+                        <div className="notion-callout-label">AI suggestion · stub</div>
+                        <div>{aiForSection.msg}</div>
+                      </div>
+                    </div>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        </div>
+
+        {InsertPanel}
+      </div>
+    </>
+  );
+};
+
+// Auto-growing textarea styled to be invisible on the Notion page —
+// looks like body text until the user clicks in.
+function NotionTextarea({ value, onChange, placeholder, serif }) {
+  const ref = useRef(null);
+  useEffect(() => {
+    if (!ref.current) return;
+    ref.current.style.height = 'auto';
+    ref.current.style.height = ref.current.scrollHeight + 'px';
+  }, [value]);
+  return (
+    <textarea
+      ref={ref}
+      className={`notion-text ${serif ? 'serif' : ''}`}
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
+      placeholder={placeholder}
+      rows={1}
+    />
+  );
+}
+
+export default DeliverablesView;

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

@@ -1,4 +1,4 @@
-import React, { useState, useMemo } from 'react';
+import React, { useState, useMemo, useRef } from 'react';
 import Icon from './CanvasIcon';
 import { WIDGET_CATALOG, CATEGORIES } from './canvasData';
 
@@ -506,14 +506,72 @@ export function BudgetItemModal({ data, onClose }) {
   );
 }
 
-// ---------- Note ----------
+// ---------- Note (with @mention autocomplete) ----------
 export function NoteModal({ data, onClose }) {
   const init = data.initial || {};
   const [text, setT] = useState(init.text || '');
   const [tag, setG] = useState(init.tag || '');
   const [linkTo, setL] = useState(init.linkTo || '');
+  const [mention, setMention] = useState(null); // { start, query, choices }
+  const [mentionIdx, setMentionIdx] = useState(0);
+  const taRef = useRef(null);
   const editing = !!init.id;
 
+  // Pull mention sources from the persisted canvas state so the modal stays self-contained.
+  const mentionSources = useMemo(() => {
+    try {
+      const all = JSON.parse(localStorage.getItem('canvas-states-v2') || '{}');
+      const out = [];
+      (all.bibliography?.entries || []).forEach(e => out.push({ key: '@' + e.key, label: e.title, kind: 'cite' }));
+      (all.writing?.chapters || []).forEach(c => out.push({ key: '@' + c.name.replace(/\s+/g, '-'), label: c.name, kind: 'chapter' }));
+      (all.kanban?.cards || []).forEach(c => out.push({ key: '@' + c.title.slice(0, 30).replace(/\s+/g, '-'), label: c.title, kind: 'task' }));
+      return out;
+    } catch { return []; }
+  }, []);
+
+  const onTextChange = (e) => {
+    const val = e.target.value;
+    const cursor = e.target.selectionStart;
+    setT(val);
+    // Look back from cursor for an @mention being typed
+    const before = val.slice(0, cursor);
+    const m = before.match(/@(\S*)$/);
+    if (m) {
+      const q = m[1].toLowerCase();
+      const choices = mentionSources
+        .filter(s => s.label.toLowerCase().includes(q) || s.key.toLowerCase().includes('@' + q))
+        .slice(0, 6);
+      setMention({ start: cursor - m[0].length, query: m[1], choices });
+      setMentionIdx(0);
+    } else {
+      setMention(null);
+    }
+  };
+
+  const insertMention = (item) => {
+    if (!mention) return;
+    const before = text.slice(0, mention.start);
+    const after = text.slice(mention.start + 1 + mention.query.length); // +1 for the @
+    const inserted = item.key + ' ';
+    setT(before + inserted + after);
+    setMention(null);
+    setTimeout(() => {
+      if (taRef.current) {
+        const pos = before.length + inserted.length;
+        taRef.current.setSelectionRange(pos, pos);
+        taRef.current.focus();
+      }
+    }, 0);
+  };
+
+  const onKeyDown = (e) => {
+    if (!mention || mention.choices.length === 0) return;
+    if (e.key === 'ArrowDown') { e.preventDefault(); setMentionIdx(i => Math.min(mention.choices.length - 1, i + 1)); }
+    if (e.key === 'ArrowUp') { e.preventDefault(); setMentionIdx(i => Math.max(0, i - 1)); }
+    if (e.key === 'Enter' || e.key === 'Tab') { e.preventDefault(); insertMention(mention.choices[mentionIdx]); }
+    if (e.key === 'Escape') setMention(null);
+  };
+
   const submit = () => {
     if (!text.trim()) return;
     data.onSave({ text: text.trim(), tag: tag.trim(), linkTo: linkTo.trim() });
@@ -532,8 +590,39 @@ export function NoteModal({ data, onClose }) {
       </div>
       <div className="modal-body">
         <div className="form-grid">
-          <div className="form-row">
-            <textarea className="textarea" autoFocus style={{ minHeight: 140, fontFamily: 'var(--canvas-mono)', fontSize: 12.5 }} value={text} onChange={e => setT(e.target.value)} placeholder="What's the thought? Markdown welcome."/>
+          <div className="form-row" style={{ position: 'relative' }}>
+            <textarea ref={taRef} className="textarea" autoFocus
+              style={{ minHeight: 140, fontFamily: 'var(--canvas-mono)', fontSize: 12.5 }}
+              value={text} onChange={onTextChange} onKeyDown={onKeyDown}
+              placeholder="What's the thought? Markdown welcome. Type @ to mention citations, chapters, tasks."/>
+            {mention && mention.choices.length > 0 && (
+              <div style={{
+                position: 'absolute',
+                top: '100%', left: 0, right: 0,
+                background: 'var(--canvas-surface)',
+                border: '1px solid var(--canvas-border-2)',
+                borderRadius: 7,
+                marginTop: 4,
+                boxShadow: 'var(--canvas-shadow-lg)',
+                zIndex: 10,
+                maxHeight: 200,
+                overflowY: 'auto',
+              }}>
+                {mention.choices.map((c, i) => (
+                  <button key={c.key + i} onMouseEnter={() => setMentionIdx(i)} onClick={() => insertMention(c)}
+                    style={{
+                      width: '100%', display: 'flex', alignItems: 'center', gap: 8,
+                      padding: '6px 10px', textAlign: 'left',
+                      background: i === mentionIdx ? 'var(--canvas-surface-2)' : 'transparent',
+                      color: 'var(--canvas-text)', border: 'none', cursor: 'pointer', fontSize: 12,
+                    }}>
+                    <span className="tag-pill">{c.kind}</span>
+                    <span style={{ fontFamily: 'var(--canvas-mono)', color: 'var(--canvas-accent)' }}>{c.key}</span>
+                    <span style={{ flex: 1, color: 'var(--canvas-text-3)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{c.label}</span>
+                  </button>
+                ))}
+              </div>
+            )}
           </div>
           <div className="form-grid two">
             <div className="form-row">
@@ -802,6 +891,126 @@ export function PaletteModal({ data, onClose }) {
   );
 }
 
+// ---------- Global content search (notes / quotes / citations / kanban / deadlines / outline) ----------
+export function GlobalSearchModal({ data, onClose }) {
+  const [q, setQ] = useState('');
+  const [idx, setIdx] = useState(0);
+  const states = data.states || {};
+
+  const items = useMemo(() => {
+    if (!q.trim()) return [];
+    const ql = q.toLowerCase();
+    const out = [];
+    // Notes
+    (states.notes?.items || []).forEach(n => {
+      if ((n.text || '').toLowerCase().includes(ql) || (n.tag || '').toLowerCase().includes(ql) || (n.linkTo || '').toLowerCase().includes(ql)) {
+        out.push({ kind: 'Note', label: (n.text || '').slice(0, 80), sub: n.tag ? `#${n.tag}` : '', icon: 'notes', widgetType: 'notes' });
+      }
+    });
+    // Citations
+    (states.bibliography?.entries || []).forEach(e => {
+      const blob = `${e.title} ${e.authors} ${e.journal} ${e.key}`.toLowerCase();
+      if (blob.includes(ql)) out.push({ kind: 'Citation', label: e.title, sub: `${e.authors} (${e.year})`, icon: 'book', widgetType: 'bibliography' });
+    });
+    // Kanban
+    (states.kanban?.cards || []).forEach(c => {
+      if (`${c.title} ${c.meta || ''}`.toLowerCase().includes(ql)) {
+        out.push({ kind: 'Task', label: c.title, sub: `${c.priority?.toUpperCase()} · ${c.meta || ''}`, icon: 'kanban', widgetType: 'kanban' });
+      }
+    });
+    // Deadlines
+    (states.deadlines || []).forEach(d => {
+      if (`${d.title} ${d.tag}`.toLowerCase().includes(ql)) {
+        out.push({ kind: 'Deadline', label: d.title, sub: `${d.date} · ${d.tag}`, icon: 'calendar', widgetType: 'deadlines' });
+      }
+    });
+    // Highlights
+    (states.highlights?.items || []).forEach(h => {
+      if (`${h.text} ${h.citeKey}`.toLowerCase().includes(ql)) {
+        out.push({ kind: 'Quote', label: `"${h.text}"`.slice(0, 80), sub: h.citeKey ? `@${h.citeKey}` : '', icon: 'cite', widgetType: 'highlights' });
+      }
+    });
+    // Outline
+    (states.outline?.items || []).forEach(o => {
+      if ((o.text || '').toLowerCase().includes(ql)) {
+        out.push({ kind: 'Outline', label: o.text, sub: `depth ${o.depth}`, icon: 'list', widgetType: 'outline' });
+      }
+    });
+    // Documenter
+    (states.documenter?.entries || []).forEach(e => {
+      if ((e.text || '').toLowerCase().includes(ql)) {
+        out.push({ kind: 'Journal', label: e.text.slice(0, 80), sub: e.date, icon: 'pencil', widgetType: 'documenter' });
+      }
+    });
+    return out.slice(0, 30);
+  }, [q, states]);
+
+  const jumpTo = (it) => {
+    const el = document.querySelector(`[data-widget-id^="w-"][data-widget-type="${it.widgetType}"]`)
+      || document.querySelector(`.widget`); // fallback: scroll to first
+    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);
+    }
+    onClose();
+  };
+
+  return (
+    <div className="canvas-modal" style={{ maxWidth: 600 }} onClick={(e) => e.stopPropagation()}>
+      <div style={{ padding: '16px 18px 8px', borderBottom: '1px solid var(--canvas-border)', display: 'flex', alignItems: 'center', gap: 10 }}>
+        <Icon name="search" size={16} style={{ color: 'var(--canvas-text-3)' }}/>
+        <input
+          autoFocus
+          value={q}
+          onChange={e => { setQ(e.target.value); setIdx(0); }}
+          onKeyDown={(e) => {
+            if (e.key === 'ArrowDown') { e.preventDefault(); setIdx(i => Math.min(items.length - 1, i + 1)); }
+            if (e.key === 'ArrowUp') { e.preventDefault(); setIdx(i => Math.max(0, i - 1)); }
+            if (e.key === 'Enter' && items[idx]) jumpTo(items[idx]);
+          }}
+          placeholder="Search across notes, citations, tasks, quotes, deadlines…"
+          style={{ flex: 1, background: 'transparent', border: 'none', outline: 'none', color: 'var(--canvas-text)', fontSize: 15, padding: '4px 0' }}
+        />
+        <kbd style={{ fontFamily: 'var(--canvas-mono)', fontSize: 10, color: 'var(--canvas-text-3)', background: 'var(--canvas-surface-2)', padding: '2px 6px', borderRadius: 4 }}>esc</kbd>
+      </div>
+      <div style={{ maxHeight: 420, overflowY: 'auto', padding: 6 }}>
+        {!q.trim() && (
+          <div style={{ padding: 30, textAlign: 'center', color: 'var(--canvas-text-3)', fontSize: 13 }}>
+            Type to search across your canvas content.
+          </div>
+        )}
+        {q.trim() && items.length === 0 && (
+          <div style={{ padding: 30, textAlign: 'center', color: 'var(--canvas-text-3)', fontSize: 13 }}>
+            No matches for "{q}".
+          </div>
+        )}
+        {items.map((it, i) => (
+          <button key={i} onClick={() => jumpTo(it)} onMouseEnter={() => setIdx(i)}
+            style={{
+              width: '100%', display: 'flex', alignItems: 'center', gap: 12,
+              padding: '8px 12px', borderRadius: 7, textAlign: 'left',
+              background: idx === i ? 'var(--canvas-surface-2)' : 'transparent',
+              color: 'var(--canvas-text)', border: 'none', cursor: 'pointer',
+            }}>
+            <div style={{ width: 24, height: 24, borderRadius: 5, background: 'var(--canvas-surface-2)', display: 'grid', placeItems: 'center', color: 'var(--canvas-accent)' }}>
+              <Icon name={it.icon} size={13}/>
+            </div>
+            <div style={{ flex: 1, minWidth: 0 }}>
+              <div style={{ fontSize: 13, fontWeight: 500, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{it.label}</div>
+              <div style={{ fontSize: 11, color: 'var(--canvas-text-3)' }}>{it.sub}</div>
+            </div>
+            <span style={{ fontFamily: 'var(--canvas-mono)', fontSize: 9.5, color: 'var(--canvas-text-4)', textTransform: 'uppercase', letterSpacing: '0.06em' }}>{it.kind}</span>
+          </button>
+        ))}
+      </div>
+      <div style={{ padding: '8px 14px', borderTop: '1px solid var(--canvas-border)', display: 'flex', gap: 14, fontSize: 10.5, color: 'var(--canvas-text-3)', fontFamily: 'var(--canvas-mono)' }}>
+        <span>↑↓ navigate</span><span>↵ jump</span><span>esc close</span>
+      </div>
+    </div>
+  );
+}
+
 // ---------- Command palette ----------
 export function CommandPaletteModal({ data, onClose }) {
   const [q, setQ] = useState('');

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

@@ -5,12 +5,64 @@ import Icon from './CanvasIcon';
 
 const fireToast = (msg, kind = 'success') =>
   window.dispatchEvent(new CustomEvent('canvas-toast', { detail: { msg, kind } }));
+const fireActivity = (source, msg) =>
+  window.dispatchEvent(new CustomEvent('canvas-activity', { detail: { source, msg } }));
+
+// Cross-widget drag-drop helpers — one mime type, JSON payload tagged by `kind`.
+const X_MIME = 'application/x-canvas-item';
+const setDragPayload = (e, kind, payload) => {
+  e.dataTransfer.setData(X_MIME, JSON.stringify({ kind, payload }));
+  e.dataTransfer.effectAllowed = 'copy';
+};
+const readDragPayload = (e) => {
+  try { return JSON.parse(e.dataTransfer.getData(X_MIME)); } catch { return null; }
+};
 
 // ===== Bibliography =====
 export function BibliographyWidget({ state, setState, openModal }) {
   const formats = ['APA', 'MLA', 'Chicago', 'BibTeX'];
   const fmt = state.format || 'APA';
   const [sortBy, setSortBy] = useState('year');
+  const [dropOver, setDropOver] = useState(false);
+
+  const onDrop = async (e) => {
+    e.preventDefault();
+    setDropOver(false);
+    const data = readDragPayload(e);
+    if (!data || data.kind !== 'paper') return;
+    const p = data.payload;
+    // If we have a DOI, hit CrossRef and build a real citation; else stub from title.
+    const titleStr = p.title || 'Untitled';
+    let entry = {
+      key: 'cite' + Date.now(),
+      authors: 'Unknown',
+      title: titleStr.replace(/^.*?— /, ''),
+      journal: '',
+      year: new Date().getFullYear(),
+      cited: 0,
+      doi: p.doi || '',
+    };
+    if (p.doi) {
+      try {
+        const cleaned = p.doi.trim().replace(/^https?:\/\/(dx\.)?doi\.org\//, '');
+        const res = await fetch(`https://api.crossref.org/works/${encodeURIComponent(cleaned)}`);
+        if (res.ok) {
+          const json = await res.json();
+          const w = json.message;
+          entry.authors = (w.author || []).map(a => `${a.family || ''}, ${(a.given || '').charAt(0)}.`).join('; ') || entry.authors;
+          entry.title = (w.title && w.title[0]) || entry.title;
+          entry.journal = (w['container-title'] && w['container-title'][0]) || '';
+          entry.year = (w.issued && w.issued['date-parts'] && w.issued['date-parts'][0][0]) || entry.year;
+          const firstAuthor = (entry.authors.split(',')[0] || 'cite').toLowerCase().replace(/[^a-z]/g, '');
+          entry.key = firstAuthor + entry.year;
+        }
+      } catch { /* fall through with stub */ }
+    }
+    setState({ ...state, entries: [...state.entries, entry] });
+    fireToast(`@${entry.key} added from Reading Queue`);
+    fireActivity('Bibliography', `Added @${entry.key} (from Reading Queue)`);
+  };
+
   const setFmt = (f) => setState({ ...state, format: f });
 
   const formatEntry = (e) => {
@@ -46,7 +98,19 @@ export function BibliographyWidget({ state, setState, openModal }) {
   });
 
   return (
-    <>
+    <div
+      onDragOver={(e) => { if (e.dataTransfer.types.includes(X_MIME)) { e.preventDefault(); setDropOver(true); } }}
+      onDragLeave={() => setDropOver(false)}
+      onDrop={onDrop}
+      style={{ display: 'flex', flexDirection: 'column', gap: 10, position: 'relative', flex: 1 }}
+      className={dropOver ? 'canvas-drop-active' : ''}
+    >
+      {dropOver && (
+        <div className="canvas-drop-overlay">
+          <Icon name="plus" size={18}/>
+          <span>Drop to add citation</span>
+        </div>
+      )}
       <div style={{ display: 'flex', alignItems: 'center', gap: 8, justifyContent: 'space-between' }}>
         <div className="format-tabs">
           {formats.map(f => (
@@ -78,10 +142,12 @@ export function BibliographyWidget({ state, setState, openModal }) {
           </div>
         ))}
         {sorted.length === 0 && (
-          <div style={{ padding: 18, textAlign: 'center', color: 'var(--canvas-text-3)', fontSize: 12 }}>No citations yet.</div>
+          <div style={{ padding: 18, textAlign: 'center', color: 'var(--canvas-text-3)', fontSize: 12 }}>
+            No citations yet. Add one or drag a paper from the Reading Queue.
+          </div>
         )}
       </div>
-    </>
+    </div>
   );
 }
 
@@ -313,6 +379,7 @@ export function WritingWidget({ state, setState }) {
       _sessionDelta: 0,
     });
     fireToast(`Saved · ${words} words in ${active.name}`);
+    fireActivity('Writing', `Saved ${words} words to "${active.name}"`);
   };
 
   const addChapter = () => {
@@ -606,11 +673,15 @@ export function ReadingQueueWidget({ state, setState, openModal }) {
     <>
       <div className="dl-list">
         {state.map((p, i) => (
-          <div key={i} className="dl-row" style={{ padding: '7px 9px', position: 'relative' }}>
+          <div key={i} className="dl-row"
+            draggable
+            onDragStart={(e) => setDragPayload(e, 'paper', p)}
+            title="Drag to Bibliography to add as citation"
+            style={{ padding: '7px 9px', position: 'relative', cursor: 'grab' }}>
             <span style={{ width: 4, height: 28, borderRadius: 2, background: colors[p.priority], flexShrink: 0 }}/>
             <div className="dl-info" onClick={() => edit(p, i)} style={{ cursor: 'pointer' }}>
               <div className="dl-title" style={{ fontSize: 12 }}>{p.title}</div>
-              <div className="dl-sub">{p.priority} · ~{p.time}</div>
+              <div className="dl-sub">{p.priority} · ~{p.time}{p.doi ? ' · ' + p.doi : ''}</div>
             </div>
             <button className="icon-btn" style={{width:24,height:24}} title="Mark read" onClick={() => remove(i, p)}>
               <Icon name="check" size={13}/>
@@ -1100,6 +1171,257 @@ export function LatexWidget({ state, setState }) {
   );
 }
 
+// ===== Calendar — month grid with deadlines (red) and writing days (green) =====
+export function CalendarWidget({ state, setState, allStates = {} }) {
+  const monthStr = state.viewMonth || new Date().toISOString().slice(0, 7);
+  const [year, month] = monthStr.split('-').map(Number);
+  const first = new Date(year, month - 1, 1);
+  const startWeekday = first.getDay(); // Sunday-indexed
+  const daysInMonth = new Date(year, month, 0).getDate();
+
+  // Source data from cross-widget state
+  const deadlines = (allStates.deadlines || []).reduce((m, d) => {
+    const k = d.date.slice(0, 10);
+    (m[k] ||= []).push({ kind: 'deadline', ...d });
+    return m;
+  }, {});
+  const writing = ((allStates.writing && allStates.writing.dailyTotals) || {});
+  const kanbanCards = (allStates.kanban && allStates.kanban.cards) || [];
+
+  const cells = [];
+  for (let i = 0; i < startWeekday; i++) cells.push(null);
+  for (let d = 1; d <= daysInMonth; d++) {
+    const dateStr = `${year}-${String(month).padStart(2, '0')}-${String(d).padStart(2, '0')}`;
+    cells.push({ d, dateStr });
+  }
+  while (cells.length % 7) cells.push(null);
+
+  const shiftMonth = (delta) => {
+    const next = new Date(year, month - 1 + delta, 1);
+    setState({ ...state, viewMonth: next.toISOString().slice(0, 7) });
+  };
+  const monthLabel = first.toLocaleDateString('en-US', { month: 'long', year: 'numeric' });
+  const today = new Date().toISOString().slice(0, 10);
+
+  return (
+    <>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+        <button className="icon-btn" onClick={() => shiftMonth(-1)}><Icon name="chevron" size={14} style={{ transform: 'rotate(180deg)' }}/></button>
+        <div style={{ flex: 1, fontWeight: 600, fontSize: 13 }}>{monthLabel}</div>
+        <button className="icon-btn" onClick={() => shiftMonth(1)}><Icon name="chevron" size={14}/></button>
+      </div>
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 3, fontSize: 10, color: 'var(--canvas-text-4)', textTransform: 'uppercase', letterSpacing: '0.06em', textAlign: 'center', fontFamily: 'var(--canvas-mono)' }}>
+        {['S', 'M', 'T', 'W', 'T', 'F', 'S'].map((d, i) => <div key={i}>{d}</div>)}
+      </div>
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 3 }}>
+        {cells.map((c, i) => {
+          if (!c) return <div key={i} style={{ aspectRatio: '1' }}/>;
+          const dls = deadlines[c.dateStr] || [];
+          const words = writing[c.dateStr] || 0;
+          const dueCards = kanbanCards.filter(card => (card.meta || '').includes(c.dateStr));
+          const isToday = c.dateStr === today;
+          return (
+            <div key={i}
+              title={[
+                ...dls.map(d => `Deadline: ${d.title}`),
+                ...(words ? [`${words} words written`] : []),
+                ...dueCards.map(d => `Task: ${d.title}`),
+              ].join('\n') || c.dateStr}
+              style={{
+                aspectRatio: '1',
+                border: `1px solid ${isToday ? 'var(--canvas-accent)' : 'var(--canvas-border)'}`,
+                background: isToday ? 'var(--canvas-accent-glow)' : 'var(--canvas-bg-2)',
+                borderRadius: 4,
+                padding: 3,
+                display: 'flex',
+                flexDirection: 'column',
+                gap: 1,
+                fontSize: 10,
+                position: 'relative',
+              }}
+            >
+              <span style={{ fontFamily: 'var(--canvas-mono)', color: isToday ? 'var(--canvas-accent)' : 'var(--canvas-text-2)', fontWeight: isToday ? 700 : 500 }}>
+                {c.d}
+              </span>
+              <div style={{ display: 'flex', gap: 2, flexWrap: 'wrap', marginTop: 'auto' }}>
+                {dls.length > 0 && <span style={{ width: 5, height: 5, borderRadius: '50%', background: 'var(--canvas-danger)' }}/>}
+                {words > 0 && <span style={{ width: 5, height: 5, borderRadius: '50%', background: 'var(--canvas-ok)' }}/>}
+                {dueCards.length > 0 && <span style={{ width: 5, height: 5, borderRadius: '50%', background: 'var(--canvas-warn)' }}/>}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+      <div style={{ display: 'flex', gap: 12, fontSize: 10, color: 'var(--canvas-text-3)', flexWrap: 'wrap' }}>
+        <span><span style={{ display: 'inline-block', width: 6, height: 6, borderRadius: '50%', background: 'var(--canvas-danger)', marginRight: 4 }}/>Deadlines</span>
+        <span><span style={{ display: 'inline-block', width: 6, height: 6, borderRadius: '50%', background: 'var(--canvas-ok)', marginRight: 4 }}/>Writing</span>
+        <span><span style={{ display: 'inline-block', width: 6, height: 6, borderRadius: '50%', background: 'var(--canvas-warn)', marginRight: 4 }}/>Tasks</span>
+      </div>
+    </>
+  );
+}
+
+// ===== Activity Feed — surfaces recent edits across all widgets =====
+// Activity entries are written by other widgets via window.dispatchEvent('canvas-activity').
+// We persist a rolling buffer of the last 100 events in this widget's own state.
+export function ActivityWidget({ state, setState }) {
+  const events = state.events || [];
+  useEffect(() => {
+    const handler = (e) => {
+      const entry = { id: 'a' + Date.now() + Math.random(), at: Date.now(), ...e.detail };
+      setState(prev => {
+        const next = { ...(prev || {}), events: [entry, ...((prev && prev.events) || [])].slice(0, 100) };
+        return next;
+      });
+    };
+    window.addEventListener('canvas-activity', handler);
+    return () => window.removeEventListener('canvas-activity', handler);
+    // setState ref is stable
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const fmt = (t) => {
+    const d = Date.now() - t;
+    if (d < 60_000) return 'just now';
+    if (d < 3600_000) return Math.floor(d / 60_000) + 'm ago';
+    if (d < 86400_000) return Math.floor(d / 3600_000) + 'h ago';
+    return Math.floor(d / 86400_000) + 'd ago';
+  };
+
+  return (
+    <>
+      <div className="note-list">
+        {events.length === 0 && (
+          <div style={{ padding: 18, textAlign: 'center', color: 'var(--canvas-text-3)', fontSize: 12 }}>
+            No activity yet. Edits across widgets will show up here.
+          </div>
+        )}
+        {events.map(e => (
+          <div key={e.id} className="note-row" style={{ padding: '7px 9px' }}>
+            <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
+              <span className="tag-pill">{e.source}</span>
+              <span style={{ fontSize: 12, flex: 1 }}>{e.msg}</span>
+              <span style={{ fontFamily: 'var(--canvas-mono)', fontSize: 10, color: 'var(--canvas-text-3)' }}>{fmt(e.at)}</span>
+            </div>
+          </div>
+        ))}
+      </div>
+      {events.length > 0 && (
+        <button className="add-tiny" onClick={() => setState({ ...state, events: [] })}>Clear feed</button>
+      )}
+    </>
+  );
+}
+
+// ===== Daily Documenter — date-stamped journal with stub AI weekly summary =====
+export function DocumenterWidget({ state, setState }) {
+  const entries = state.entries || [];
+  const [draft, setDraft] = useState('');
+  const today = new Date().toISOString().slice(0, 10);
+  const [generating, setGenerating] = useState(false);
+
+  const append = () => {
+    if (!draft.trim()) return;
+    const entry = { id: 'doc' + Date.now(), date: today, text: draft.trim(), at: Date.now() };
+    setState({ ...state, entries: [entry, ...entries] });
+    setDraft('');
+    window.dispatchEvent(new CustomEvent('canvas-activity', {
+      detail: { source: 'Documenter', msg: `Logged: ${draft.trim().slice(0, 50)}…` },
+    }));
+    fireToast('Entry saved');
+  };
+
+  const remove = (id) => setState({ ...state, entries: entries.filter(e => e.id !== id) });
+
+  // TODO(LLM): wire to /api/summarize-week with last 7 days of entries.
+  // Backend call shape (commented because endpoint isn't ready):
+  // const generateSummary = async () => {
+  //   const last7 = entries.filter(e => Date.now() - e.at < 7*86400_000);
+  //   const res = await fetch(`${process.env.REACT_APP_API_URL}/api/canvas/summarize`, {
+  //     method: 'POST',
+  //     body: JSON.stringify({ entries: last7 }),
+  //   });
+  //   const { summary } = await res.json();
+  //   setState({ ...state, lastSummary: { at: Date.now(), text: summary } });
+  // };
+  const generateSummary = () => {
+    // Stub: echo back a structured summary built from the local entries so the UI
+    // shape is real even though no LLM is hooked up yet.
+    setGenerating(true);
+    setTimeout(() => {
+      const last7 = entries.filter(e => Date.now() - e.at < 7 * 86400_000);
+      const text = last7.length === 0
+        ? 'No entries in the last 7 days.'
+        : `**This week** · ${last7.length} entries logged.\n\n` +
+          '_LLM summary will replace this once the backend endpoint is wired._\n\n' +
+          last7.slice(0, 3).map(e => `- ${e.date}: ${e.text.slice(0, 80)}${e.text.length > 80 ? '…' : ''}`).join('\n');
+      setState({ ...state, lastSummary: { at: Date.now(), text } });
+      setGenerating(false);
+      fireToast('Weekly summary generated (stub)');
+    }, 600);
+  };
+
+  // Group entries by date
+  const grouped = entries.reduce((m, e) => { (m[e.date] ||= []).push(e); return m; }, {});
+  const dates = Object.keys(grouped).sort().reverse();
+
+  return (
+    <>
+      <div className="form-grid">
+        <textarea
+          className="textarea"
+          placeholder={`What did you do today? (${today})`}
+          rows={3}
+          style={{ minHeight: 50, fontSize: 12.5 }}
+          value={draft}
+          onChange={e => setDraft(e.target.value)}
+          onKeyDown={e => { if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) append(); }}
+        />
+        <div style={{ display: 'flex', gap: 6 }}>
+          <button className="btn btn-primary" onClick={append} disabled={!draft.trim()}>
+            <Icon name="plus" size={13}/>Log entry
+          </button>
+          <button className="btn" onClick={generateSummary} disabled={entries.length === 0 || generating}>
+            {generating ? <><div className="spinner"/>Summarizing</> : <><Icon name="sparkles" size={13}/>Weekly summary</>}
+          </button>
+        </div>
+      </div>
+      {state.lastSummary && (
+        <div className="review" style={{ borderLeftColor: 'var(--canvas-accent)' }}>
+          <span className="review-tag" style={{ color: 'var(--canvas-accent)' }}>
+            Generated {new Date(state.lastSummary.at).toLocaleString()} · stub
+          </span>
+          <div className="canvas-md">
+            <ReactMarkdown remarkPlugins={[remarkGfm]}>{state.lastSummary.text}</ReactMarkdown>
+          </div>
+        </div>
+      )}
+      <div className="note-list" style={{ maxHeight: 260 }}>
+        {dates.map(date => (
+          <div key={date}>
+            <div style={{ fontSize: 10, color: 'var(--canvas-text-4)', textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 600, fontFamily: 'var(--canvas-mono)', padding: '6px 2px 2px' }}>
+              {new Date(date).toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric' })}
+            </div>
+            {grouped[date].map(e => (
+              <div key={e.id} className="note-row" style={{ position: 'relative' }}>
+                <div className="note-text">{e.text}</div>
+                <div className="row-actions">
+                  <button className="icon-btn" onClick={() => remove(e.id)}><Icon name="trash" size={11}/></button>
+                </div>
+              </div>
+            ))}
+          </div>
+        ))}
+        {entries.length === 0 && (
+          <div style={{ padding: 18, textAlign: 'center', color: 'var(--canvas-text-3)', fontSize: 12 }}>
+            No entries yet. Drop a quick line about today.
+          </div>
+        )}
+      </div>
+    </>
+  );
+}
+
 // ===== Stub =====
 export function StubWidget({ meta }) {
   return (

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

@@ -100,6 +100,9 @@ export const WIDGET_CATALOG = [
   { type: 'gantt', name: 'Milestone Timeline', desc: 'Proposal → IRB → defense', icon: 'flag', cat: 'project', defaultSize: 'L', stub: true },
   { type: 'meeting-log', name: 'Meeting Log', desc: 'Per-stakeholder, last contact, actions', icon: 'message', cat: 'project', defaultSize: 'M' },
   { type: 'goals', name: 'Goals / OKRs', desc: 'Quarterly milestones with progress sliders', icon: 'bullseye', cat: 'project', defaultSize: 'M' },
+  { type: 'calendar', name: 'Calendar', desc: 'Month grid with deadlines and writing days', icon: 'calendar', cat: 'project', defaultSize: 'M', enhanced: true },
+  { type: 'activity', name: 'Activity Feed', desc: 'Chronological log of edits across widgets', icon: 'graph', cat: 'project', defaultSize: 'M', enhanced: true },
+  { type: 'documenter', name: 'Daily Documenter', desc: 'Date-stamped journal · AI weekly summary (LLM stub)', icon: 'pencil', cat: 'project', defaultSize: 'M', enhanced: true },
 
   { type: 'mood', name: 'Mood / Burnout Check-in', desc: 'Daily slider, trend graph', icon: 'smile', cat: 'wellness', defaultSize: 'S', stub: true },
   { type: 'sleep', name: 'Sleep & Energy', desc: 'Correlate with productive days', icon: 'heart', cat: 'wellness', defaultSize: 'S', stub: true },
@@ -137,9 +140,70 @@ export const CATEGORIES = [
   { id: 'critic', label: 'Anti-yes-man', critic: true },
 ];
 
-// Workspace starts empty — users add widgets from the palette.
+// Workspace starts empty — users add widgets from the palette or pick a preset.
 export const DEFAULT_LAYOUT = [];
 
+// Curated starter layouts. Each preset assigns its own widget IDs so reseeding
+// won't collide with manually-added widgets.
+const presetIds = (types) => types.map((t, i) => ({ id: `pre-${t.type}-${i}`, ...t }));
+export const WORKSPACE_PRESETS = [
+  {
+    id: 'day1-phd',
+    name: 'Day-1 PhD',
+    desc: 'Get oriented: reading queue, bibliography, notes, deadlines, kanban, pomodoro.',
+    icon: 'sparkles',
+    layout: presetIds([
+      { type: 'reading-queue', size: 'M' },
+      { type: 'bibliography', size: 'M' },
+      { type: 'notes', size: 'M' },
+      { type: 'deadlines', size: 'S' },
+      { type: 'pomodoro', size: 'S' },
+      { type: 'kanban', size: 'L' },
+    ]),
+  },
+  {
+    id: 'writing-sprint',
+    name: 'Writing Sprint',
+    desc: 'Focus mode for drafting: writing pad, outline, LaTeX, highlights, pomodoro.',
+    icon: 'pencil',
+    layout: presetIds([
+      { type: 'writing', size: 'M' },
+      { type: 'outline', size: 'M' },
+      { type: 'pomodoro', size: 'S' },
+      { type: 'latex', size: 'M' },
+      { type: 'highlights', size: 'M' },
+      { type: 'bibliography', size: 'M' },
+    ]),
+  },
+  {
+    id: 'quals-prep',
+    name: 'Quals Prep',
+    desc: 'Lit-review heavy: bibliography, reading queue, notes, highlights, kanban.',
+    icon: 'book',
+    layout: presetIds([
+      { type: 'bibliography', size: 'L' },
+      { type: 'reading-queue', size: 'M' },
+      { type: 'notes', size: 'M' },
+      { type: 'highlights', size: 'M' },
+      { type: 'kanban', size: 'M' },
+    ]),
+  },
+  {
+    id: 'defense-mode',
+    name: 'Defense Mode',
+    desc: 'Final stretch: writing, outline, anti-yes-man critics, deadlines.',
+    icon: 'gavel',
+    layout: presetIds([
+      { type: 'writing', size: 'M' },
+      { type: 'outline', size: 'M' },
+      { type: 'reviewer-2', size: 'M', critic: true },
+      { type: 'devils-advocate', size: 'M', critic: true },
+      { type: 'scope-realism', size: 'M', critic: true },
+      { type: 'deadlines', size: 'S' },
+    ]),
+  },
+];
+
 // Initial state when a widget is first added — minimal scaffolding, no demo content.
 export const EMPTY_STATE = {
   bibliography: { format: 'APA', entries: [] },
@@ -178,5 +242,8 @@ export const EMPTY_STATE = {
   outline: { items: [], expanded: {} },
   highlights: { items: [] },
   latex: { source: '', displayMode: true },
+  calendar: { viewMonth: new Date().toISOString().slice(0, 7) },
+  activity: {},
+  documenter: { entries: [], lastSummary: null },
 };
 

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

@@ -6,13 +6,14 @@ import Sidebar from '../components/Sidebar';
 import AppHeader from '../components/AppHeader';
 import Icon from '../components/canvas/CanvasIcon';
 import {
-  INSIGHTS, WIDGET_CATALOG, DEFAULT_LAYOUT, EMPTY_STATE,
+  INSIGHTS, WIDGET_CATALOG, DEFAULT_LAYOUT, EMPTY_STATE, WORKSPACE_PRESETS,
 } from '../components/canvas/canvasData';
 import {
   BibliographyWidget, KanbanWidget, PomodoroWidget, WritingWidget,
   DeadlinesWidget, BudgetWidget, ReadingQueueWidget, NotesWidget,
   HabitsWidget, GoalsWidget, MeetingsWidget,
   OutlineWidget, HighlightsWidget, LatexWidget,
+  CalendarWidget, DocumenterWidget, ActivityWidget,
   StubWidget,
 } from '../components/canvas/CanvasWidgets';
 import {
@@ -23,17 +24,18 @@ import {
   AddCitationModal, AddTaskModal, AddDeadlineModal, LogWordsModal,
   ConfirmRemoveModal, ReadingPaperModal, BudgetItemModal,
   NoteModal, HabitModal, GoalModal, MeetingModal,
-  PaletteModal, CommandPaletteModal,
+  PaletteModal, CommandPaletteModal, GlobalSearchModal,
 } from '../components/canvas/CanvasModals';
 import CanvasWelcomeTour from '../components/canvas/CanvasWelcomeTour';
+import DeliverablesView from '../components/canvas/CanvasDeliverables';
 import '../styles/CanvasPage.css';
 
 const LAYOUT_KEY = 'canvas-layout-v2';
 const STATES_KEY = 'canvas-states-v2';
 const VIEW_KEY = 'canvas-view-v2';
 
-function renderWidget(type, state, setState, openModal) {
-  const props = { state, setState, openModal };
+function renderWidget(type, state, setState, openModal, allStates) {
+  const props = { state, setState, openModal, allStates };
   switch (type) {
     case 'bibliography': return <BibliographyWidget {...props}/>;
     case 'kanban': return <KanbanWidget {...props}/>;
@@ -52,6 +54,9 @@ function renderWidget(type, state, setState, openModal) {
     case 'outline': return <OutlineWidget {...props}/>;
     case 'highlights': return <HighlightsWidget {...props}/>;
     case 'latex': return <LatexWidget {...props}/>;
+    case 'calendar': return <CalendarWidget {...props}/>;
+    case 'documenter': return <DocumenterWidget {...props}/>;
+    case 'activity': return <ActivityWidget {...props}/>;
     default: {
       const meta = WIDGET_CATALOG.find(w => w.type === type);
       return <StubWidget meta={meta}/>;
@@ -59,7 +64,7 @@ function renderWidget(type, state, setState, openModal) {
   }
 }
 
-function CanvasWidget({ widget, isDragging, isDragOver, onDragStart, onDragOver, onDragEnd, onDrop, state, setState, onRemove, onResize, openModal }) {
+function CanvasWidget({ widget, isDragging, isDragOver, onDragStart, onDragOver, onDragEnd, onDrop, state, setState, onRemove, onResize, openModal, allStates }) {
   const meta = WIDGET_CATALOG.find(w => w.type === widget.type);
   if (!meta) return null;
   const sizes = ['S', 'M', 'L'];
@@ -69,6 +74,7 @@ function CanvasWidget({ widget, isDragging, isDragOver, onDragStart, onDragOver,
     <div
       className={`widget size-${widget.size} ${meta.critic ? 'critic' : ''} ${isDragging ? 'dragging' : ''} ${isDragOver ? 'drag-over' : ''}`}
       data-widget-id={widget.id}
+      data-widget-type={widget.type}
       onDragOver={(e) => { e.preventDefault(); onDragOver(widget.id); }}
       onDrop={(e) => { e.preventDefault(); onDrop(widget.id); }}
     >
@@ -88,13 +94,13 @@ function CanvasWidget({ widget, isDragging, isDragOver, onDragStart, onDragOver,
         </div>
       </div>
       <div className="widget-body">
-        {renderWidget(widget.type, state, setState, openModal)}
+        {renderWidget(widget.type, state, setState, openModal, allStates)}
       </div>
     </div>
   );
 }
 
-function InsightsView() {
+function InsightsView({ widgetStates, setWidgetStates }) {
   const [pinned, setPinned] = useState(new Set(INSIGHTS.filter(i => i.pinned).map(i => i.id)));
   const togglePin = (id) => {
     const n = new Set(pinned);
@@ -102,6 +108,26 @@ function InsightsView() {
     setPinned(n);
   };
 
+  // Strip HTML, take first 80 chars for the kanban card title.
+  const insightToTaskTitle = (ins) => {
+    const plain = (ins.bullets[0] || ins.summary || ins.title).replace(/<[^>]+>/g, '');
+    return plain.length > 80 ? plain.slice(0, 77) + '…' : plain;
+  };
+
+  const sendToKanban = (ins) => {
+    if (!setWidgetStates) return;
+    const kanban = widgetStates.kanban || EMPTY_STATE.kanban;
+    const card = {
+      id: 'k' + Date.now(),
+      col: 'todo',
+      title: insightToTaskTitle(ins),
+      priority: 'med',
+      meta: `from Insights · ${ins.title}`,
+    };
+    setWidgetStates(s => ({ ...s, kanban: { ...kanban, cards: [...kanban.cards, card] } }));
+    window.dispatchEvent(new CustomEvent('canvas-toast', { detail: { msg: 'Sent to Kanban (To Do)', kind: 'success' } }));
+  };
+
   return (
     <>
       <div className="page-header">
@@ -133,9 +159,11 @@ function InsightsView() {
               </ul>
             </div>
             <div className="insight-actions">
-              <button className="chip"><Icon name="message" size={11}/>Ask follow-up</button>
-              <button className="chip"><Icon name="task" size={11}/>To task</button>
-              <button className="chip"><Icon name="cite" size={11}/>Cite</button>
+              {/* TODO(LLM): wire "Ask follow-up" to chat endpoint with insight context */}
+              <button className="chip" disabled title="Needs LLM endpoint"><Icon name="message" size={11}/>Ask follow-up</button>
+              <button className="chip" onClick={() => sendToKanban(ins)}><Icon name="task" size={11}/>To task</button>
+              {/* TODO(LLM): wire "Cite" to search Bibliography for the source paper */}
+              <button className="chip" disabled title="Coming soon"><Icon name="cite" size={11}/>Cite</button>
               <button className="chip"><Icon name="expand" size={11}/>Expand</button>
               <button className={`chip ${pinned.has(ins.id) ? 'pinned' : ''}`} onClick={() => togglePin(ins.id)}>
                 <Icon name="pin" size={11}/>{pinned.has(ins.id) ? 'Pinned' : 'Pin'}
@@ -148,6 +176,29 @@ function InsightsView() {
   );
 }
 
+function PresetPicker({ onPick }) {
+  return (
+    <div className="canvas-presets">
+      <div className="canvas-presets-head">
+        <div className="canvas-presets-title">Start from a preset</div>
+        <div className="canvas-presets-sub">Or skip and add widgets one at a time.</div>
+      </div>
+      <div className="canvas-presets-grid">
+        {WORKSPACE_PRESETS.map(p => (
+          <button key={p.id} className="canvas-preset-card" onClick={() => onPick(p)}>
+            <div className="canvas-preset-icon"><Icon name={p.icon} size={18}/></div>
+            <div className="canvas-preset-content">
+              <div className="canvas-preset-name">{p.name}</div>
+              <div className="canvas-preset-desc">{p.desc}</div>
+              <div className="canvas-preset-meta">{p.layout.length} widgets</div>
+            </div>
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}
+
 function WorkspaceView({ openModal, layout, setLayout, widgetStates, setWidgetStates }) {
   const [dragId, setDragId] = useState(null);
   const [dragOverId, setDragOverId] = useState(null);
@@ -166,8 +217,11 @@ function WorkspaceView({ openModal, layout, setLayout, widgetStates, setWidgetSt
     onDragEnd();
   };
 
-  const setWState = (type) => (newState) => {
-    setWidgetStates(s => ({ ...s, [type]: newState }));
+  const setWState = (type) => (updater) => {
+    setWidgetStates(s => ({
+      ...s,
+      [type]: typeof updater === 'function' ? updater(s[type]) : updater,
+    }));
   };
 
   const removeWidget = (id, label) => {
@@ -187,11 +241,23 @@ function WorkspaceView({ openModal, layout, setLayout, widgetStates, setWidgetSt
     const id = 'w-' + Date.now();
     setLayout(l => [...l, { id, type: meta.type, size: meta.defaultSize, critic: meta.critic }]);
     if (EMPTY_STATE[meta.type]) {
-      // Always reset to a fresh empty state when a widget is added (even if previously removed)
       setWidgetStates(s => ({ ...s, [meta.type]: JSON.parse(JSON.stringify(EMPTY_STATE[meta.type])) }));
     }
   };
 
+  const applyPreset = (preset) => {
+    setLayout(preset.layout.map(w => ({ ...w })));
+    // Seed empty state for any widget types not already present
+    const seeds = {};
+    preset.layout.forEach(w => {
+      if (!widgetStates[w.type] && EMPTY_STATE[w.type]) {
+        seeds[w.type] = JSON.parse(JSON.stringify(EMPTY_STATE[w.type]));
+      }
+    });
+    if (Object.keys(seeds).length) setWidgetStates(s => ({ ...s, ...seeds }));
+    window.dispatchEvent(new CustomEvent('canvas-toast', { detail: { msg: `${preset.name} preset loaded`, kind: 'success' } }));
+  };
+
   const reset = () => {
     if (!window.confirm('Reset workspace? All widgets and content will be cleared.')) return;
     setLayout([]);
@@ -214,12 +280,14 @@ function WorkspaceView({ openModal, layout, setLayout, widgetStates, setWidgetSt
           })}><Icon name="plus" size={13}/>Add widget</button>
         </div>
       </div>
+      {layout.length === 0 && (
+        <PresetPicker onPick={applyPreset}/>
+      )}
       <div className="workspace">
         {layout.length === 0 && (
           <div className="empty-cell">
-            <Icon name="layout" size={32} style={{ color: 'var(--canvas-text-4)' }}/>
-            <div style={{ fontSize: 14, color: 'var(--canvas-text-2)', fontWeight: 500 }}>Empty workspace</div>
-            <div>Add widgets from the palette to start composing your canvas.</div>
+            <Icon name="layout" size={28} style={{ color: 'var(--canvas-text-4)' }}/>
+            <div style={{ fontSize: 14, color: 'var(--canvas-text-2)', fontWeight: 500 }}>Or build from scratch</div>
             <button className="btn btn-primary" onClick={() => openModal('palette', { layout, onAdd: addWidget })} style={{ marginTop: 6 }}>
               <Icon name="plus" size={13}/>Add your first widget
             </button>
@@ -240,6 +308,7 @@ function WorkspaceView({ openModal, layout, setLayout, widgetStates, setWidgetSt
             onRemove={removeWidget}
             onResize={resizeWidget}
             openModal={openModal}
+            allStates={widgetStates}
           />
         ))}
       </div>
@@ -268,6 +337,7 @@ function ModalRouter({ modal, onClose }) {
     case 'goal':            content = <GoalModal data={modal.data} onClose={onClose}/>; break;
     case 'meeting':         content = <MeetingModal data={modal.data} onClose={onClose}/>; break;
     case 'command':         content = <CommandPaletteModal data={modal.data} onClose={onClose}/>; break;
+    case 'global-search':   content = <GlobalSearchModal data={modal.data} onClose={onClose}/>; break;
     default: return null;
   }
   return <div className="canvas-modal-backdrop" onClick={handleBackdropClick}>{content}</div>;
@@ -358,7 +428,11 @@ const CanvasPage = ({ user, authToken, onNavigateToHome, onNavigateToChat, onSig
     });
   }, [openModal, layout, toggleTheme, exportWorkspace]);
 
-  // Esc closes modal, ⌘K opens command palette
+  const openGlobalSearch = useCallback(() => {
+    openModal('global-search', { states: widgetStates });
+  }, [openModal, widgetStates]);
+
+  // Esc closes modal, ⌘K opens command palette, ⌘/ opens global content search
   useEffect(() => {
     const k = (e) => {
       if (e.key === 'Escape') closeModal();
@@ -366,10 +440,14 @@ const CanvasPage = ({ user, authToken, onNavigateToHome, onNavigateToChat, onSig
         e.preventDefault();
         openCommandPalette();
       }
+      if ((e.metaKey || e.ctrlKey) && e.key === '/') {
+        e.preventDefault();
+        openGlobalSearch();
+      }
     };
     window.addEventListener('keydown', k);
     return () => window.removeEventListener('keydown', k);
-  }, [closeModal, openCommandPalette]);
+  }, [closeModal, openCommandPalette, openGlobalSearch]);
 
   const canvasSidebarItems = layout.map(w => {
     const meta = WIDGET_CATALOG.find(m => m.type === w.type);
@@ -406,7 +484,7 @@ const CanvasPage = ({ user, authToken, onNavigateToHome, onNavigateToChat, onSig
       <div className={`canvas-main-area ${isSidebarCollapsed ? 'sidebar-collapsed' : ''}`}>
         <div className="canvas-app-shell">
           <AppHeader
-            currentPage="canvas"
+            currentPage={`canvas-${view}`}
             onNavigateToHome={onNavigateToHome}
             onNavigateToChat={onNavigateToChat}
             onNavigateToCanvas={(v) => setView(v || 'workspace')}
@@ -415,14 +493,17 @@ const CanvasPage = ({ user, authToken, onNavigateToHome, onNavigateToChat, onSig
             <button className="icon-btn" onClick={() => setTourForceShow(n => n + 1)} title="Show tour">
               <HelpCircle size={18}/>
             </button>
-            <button className="icon-btn" onClick={openCommandPalette} title="Search & commands (⌘K)">
+            <button className="icon-btn" onClick={openGlobalSearch} title="Search canvas content (⌘/)">
               <Icon name="search" size={16}/>
             </button>
+            <button className="icon-btn" onClick={openCommandPalette} title="Commands (⌘K)">
+              <Icon name="zap" size={16}/>
+            </button>
           </AppHeader>
           <div className="canvas-content">
-            {view === 'insights'
-              ? <InsightsView/>
-              : <WorkspaceView openModal={openModal} layout={layout} setLayout={setLayout} widgetStates={widgetStates} setWidgetStates={setWidgetStates}/>}
+            {view === 'insights' && <InsightsView widgetStates={widgetStates} setWidgetStates={setWidgetStates}/>}
+            {view === 'workspace' && <WorkspaceView openModal={openModal} layout={layout} setLayout={setLayout} widgetStates={widgetStates} setWidgetStates={setWidgetStates}/>}
+            {view === 'deliverables' && <DeliverablesView allStates={widgetStates}/>}
           </div>
         </div>
       </div>

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

@@ -321,8 +321,8 @@
   gap: 24px;
   margin-bottom: 22px;
 }
-.canvas-page-with-sidebar .page-title { font-size: 22px; font-weight: 600; letter-spacing: -0.015em; margin: 0; color: var(--canvas-text); }
-.canvas-page-with-sidebar .page-sub { color: var(--canvas-text-3); font-size: 13px; margin-top: 4px; }
+.canvas-page-with-sidebar .page-title { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; margin: 0; color: var(--canvas-text); }
+.canvas-page-with-sidebar .page-sub { color: var(--canvas-text-3); font-size: 13px; margin-top: 6px; }
 .canvas-page-with-sidebar .page-meta {
   font-family: var(--canvas-mono);
   font-size: 11px;
@@ -435,37 +435,43 @@
 .canvas-page-with-sidebar .workspace {
   display: grid;
   grid-template-columns: repeat(6, minmax(0, 1fr));
-  gap: 14px;
+  gap: 18px;
   align-items: start;
 }
+/* Notion-inspired widget treatment: hairline borders, generous padding,
+   no hard chrome — the content is the page, the frame is barely there. */
 .canvas-page-with-sidebar .widget {
   background: var(--canvas-surface);
-  border: 1px solid var(--canvas-border);
-  border-radius: var(--canvas-r-md);
+  border: 1px solid transparent;
+  border-radius: 6px;
   display: flex;
   flex-direction: column;
   min-height: 200px;
   position: relative;
   overflow: hidden;
-  transition: border-color .15s, transform .15s, box-shadow .15s;
+  transition: background .15s, border-color .15s, box-shadow .15s;
+}
+.canvas-page-with-sidebar[data-canvas-theme="light"] .widget {
+  background: #FFFFFF;
+  border-color: rgba(15, 15, 15, 0.06);
 }
 .canvas-page-with-sidebar .widget.size-S { grid-column: span 2; }
 .canvas-page-with-sidebar .widget.size-M { grid-column: span 3; }
 .canvas-page-with-sidebar .widget.size-L { grid-column: span 6; }
 .canvas-page-with-sidebar .widget.dragging { opacity: 0.4; }
-.canvas-page-with-sidebar .widget.drag-over { box-shadow: 0 0 0 2px var(--canvas-accent), 0 0 24px var(--canvas-accent-glow); }
-.canvas-page-with-sidebar .widget:hover { border-color: var(--canvas-border-2); }
-.canvas-page-with-sidebar .widget.critic { border-color: var(--canvas-critic-glow); }
-.canvas-page-with-sidebar .widget.critic:hover { border-color: var(--canvas-critic); }
-.canvas-page-with-sidebar .widget.critic::before {
-  content: '';
-  position: absolute;
-  top: 0; left: 0; right: 0;
-  height: 1px;
-  background: linear-gradient(90deg, transparent, var(--canvas-critic), transparent);
-  opacity: 0.7;
+.canvas-page-with-sidebar .widget.drag-over {
+  box-shadow: 0 0 0 2px var(--canvas-accent), 0 4px 14px var(--canvas-accent-glow);
+}
+.canvas-page-with-sidebar .widget:hover {
+  background: var(--canvas-surface-2);
+}
+.canvas-page-with-sidebar[data-canvas-theme="light"] .widget:hover {
+  background: rgba(0, 0, 0, 0.015);
+  border-color: rgba(15, 15, 15, 0.08);
 }
-.canvas-page-with-sidebar[data-canvas-theme="light"] .widget { box-shadow: 0 1px 2px rgba(20,30,50,0.03); }
+.canvas-page-with-sidebar .widget.critic { border-color: rgba(167, 139, 250, 0.18); }
+.canvas-page-with-sidebar[data-canvas-theme="light"] .widget.critic { border-color: rgba(139, 92, 246, 0.18); }
+.canvas-page-with-sidebar .widget.critic:hover { border-color: var(--canvas-critic); }
 
 /* Preserve 3-S / 2-M / 1-L per row at every desktop width.
    On phones (≤768px) just stack everything full-width for readability. */
@@ -476,11 +482,12 @@
   .canvas-page-with-sidebar .widget.size-L { grid-column: 1 / -1; }
 }
 
+/* Notion-style header: drag grip is hover-only, title is plain text. */
 .canvas-page-with-sidebar .widget-head {
   display: flex;
   align-items: center;
   gap: 8px;
-  padding: 12px 14px 10px;
+  padding: 14px 16px 8px;
   cursor: grab;
 }
 .canvas-page-with-sidebar .widget-head:active { cursor: grabbing; }
@@ -488,18 +495,26 @@
   color: var(--canvas-text-4);
   display: grid;
   place-items: center;
-  width: 16px;
+  width: 14px;
+  opacity: 0;
+  transition: opacity .15s;
 }
-.canvas-page-with-sidebar .widget-head:hover .drag-grip { color: var(--canvas-text-2); }
+.canvas-page-with-sidebar .widget:hover .widget-head .drag-grip { opacity: 0.6; }
 .canvas-page-with-sidebar .widget-icon {
-  width: 22px;
-  height: 22px;
+  width: 18px;
+  height: 18px;
   display: grid;
   place-items: center;
-  color: var(--canvas-accent);
+  color: var(--canvas-text-3);
 }
 .canvas-page-with-sidebar .widget.critic .widget-icon { color: var(--canvas-critic); }
-.canvas-page-with-sidebar .widget-title { font-weight: 600; font-size: 13px; flex: 1; letter-spacing: -0.005em; color: var(--canvas-text); }
+.canvas-page-with-sidebar .widget-title {
+  font-weight: 600;
+  font-size: 13.5px;
+  flex: 1;
+  letter-spacing: -0.005em;
+  color: var(--canvas-text);
+}
 .canvas-page-with-sidebar .widget-tag,
 .canvas-modal-backdrop .widget-tag {
   font-size: 9.5px;
@@ -533,14 +548,82 @@
 .canvas-page-with-sidebar .size-pill:hover { background: var(--canvas-surface-3); color: var(--canvas-text); }
 
 .canvas-page-with-sidebar .widget-body {
-  padding: 4px 14px 14px;
+  padding: 4px 16px 18px;
   flex: 1;
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  gap: 12px;
   min-height: 0;
 }
 
+/* Preset picker (shown above the empty workspace) */
+.canvas-page-with-sidebar .canvas-presets {
+  margin-bottom: 18px;
+}
+.canvas-page-with-sidebar .canvas-presets-head {
+  margin-bottom: 10px;
+}
+.canvas-page-with-sidebar .canvas-presets-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--canvas-text);
+}
+.canvas-page-with-sidebar .canvas-presets-sub {
+  font-size: 12.5px;
+  color: var(--canvas-text-3);
+  margin-top: 2px;
+}
+.canvas-page-with-sidebar .canvas-presets-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  gap: 10px;
+}
+.canvas-page-with-sidebar .canvas-preset-card {
+  background: transparent;
+  border: 1px solid rgba(15, 15, 15, 0.10);
+  border-radius: 8px;
+  padding: 16px;
+  display: flex;
+  gap: 12px;
+  text-align: left;
+  cursor: pointer;
+  transition: background .15s, border-color .15s;
+  font-family: inherit;
+  color: var(--canvas-text);
+}
+.canvas-page-with-sidebar[data-canvas-theme="light"] .canvas-preset-card {
+  border-color: rgba(15, 15, 15, 0.12);
+}
+.canvas-page-with-sidebar .canvas-preset-card:hover {
+  background: var(--canvas-surface-2);
+  border-color: rgba(15, 15, 15, 0.15);
+}
+.canvas-page-with-sidebar[data-canvas-theme="light"] .canvas-preset-card:hover {
+  background: rgba(0, 0, 0, 0.025);
+}
+.canvas-page-with-sidebar .canvas-preset-icon {
+  width: 32px;
+  height: 32px;
+  border-radius: 6px;
+  background: var(--canvas-surface-2);
+  color: var(--canvas-text-2);
+  display: grid;
+  place-items: center;
+  flex-shrink: 0;
+  font-size: 16px;
+}
+.canvas-page-with-sidebar .canvas-preset-content { flex: 1; min-width: 0; }
+.canvas-page-with-sidebar .canvas-preset-name { font-size: 13.5px; font-weight: 600; color: var(--canvas-text); }
+.canvas-page-with-sidebar .canvas-preset-desc { font-size: 11.5px; color: var(--canvas-text-3); margin-top: 3px; line-height: 1.45; }
+.canvas-page-with-sidebar .canvas-preset-meta {
+  font-family: var(--canvas-mono);
+  font-size: 10px;
+  color: var(--canvas-text-4);
+  margin-top: 6px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
 .canvas-page-with-sidebar .empty-cell {
   border: 1.5px dashed var(--canvas-border-2);
   border-radius: var(--canvas-r-md);
@@ -1184,6 +1267,597 @@ body[data-canvas-theme="light"] .canvas-modal-backdrop .critic-meter .bar { back
 .canvas-page-with-sidebar .row-actions .icon-btn svg { width: 12px; height: 12px; }
 .canvas-page-with-sidebar .tag-pill { display: inline-block; font-family: var(--canvas-mono); font-size: 9.5px; padding: 1px 6px; border-radius: 3px; background: var(--canvas-accent-glow); color: var(--canvas-accent); text-transform: uppercase; letter-spacing: 0.06em; }
 
+/* ----- Deliverables view ----- */
+
+/* Paper / document mode — three-column layout that collapses on narrow screens */
+.canvas-page-with-sidebar .deliverable-grid {
+  display: grid;
+  grid-template-columns: 180px minmax(0, 1fr) 240px;
+  gap: 16px;
+  align-items: start;
+}
+.canvas-page-with-sidebar .deliverable-nav {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  position: sticky;
+  top: 0;
+}
+
+/* Slides mode — thumbs on left, big canvas in middle, panel on right */
+.canvas-page-with-sidebar .deliverable-slides-grid {
+  display: grid;
+  grid-template-columns: 160px minmax(0, 1fr) 240px;
+  gap: 16px;
+  align-items: start;
+}
+@media (max-width: 1280px) {
+  .canvas-page-with-sidebar .deliverable-slides-grid { grid-template-columns: 140px minmax(0, 1fr); }
+  .canvas-page-with-sidebar .deliverable-slides-grid > .deliverable-insertables { display: none; }
+}
+@media (max-width: 768px) {
+  .canvas-page-with-sidebar .deliverable-slides-grid { grid-template-columns: 1fr; }
+  .canvas-page-with-sidebar .slide-thumbs { display: none; }
+}
+
+/* Slide thumbnails column */
+.canvas-page-with-sidebar .slide-thumbs {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  position: sticky;
+  top: 0;
+  max-height: calc(100vh - 100px);
+  overflow-y: auto;
+  padding-right: 4px;
+}
+.canvas-page-with-sidebar .slide-thumb {
+  display: flex;
+  align-items: stretch;
+  gap: 6px;
+  padding: 0;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  font-family: inherit;
+  text-align: left;
+}
+.canvas-page-with-sidebar .slide-thumb-num {
+  width: 18px;
+  font-family: var(--canvas-mono);
+  font-size: 10px;
+  color: var(--canvas-text-3);
+  padding-top: 4px;
+  flex-shrink: 0;
+  text-align: right;
+}
+.canvas-page-with-sidebar .slide-thumb-canvas {
+  flex: 1;
+  background: #fff;
+  border: 1px solid var(--canvas-border-2);
+  border-radius: 4px;
+  aspect-ratio: 16 / 9;
+  padding: 5px 6px;
+  overflow: hidden;
+  color: #111;
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  transition: all .15s;
+}
+.canvas-page-with-sidebar .slide-thumb:hover .slide-thumb-canvas {
+  border-color: var(--canvas-accent);
+  transform: translateY(-1px);
+}
+.canvas-page-with-sidebar .slide-thumb.active .slide-thumb-canvas {
+  border: 2px solid var(--canvas-accent);
+  box-shadow: 0 0 0 2px var(--canvas-accent-glow);
+  padding: 4px 5px;
+}
+.canvas-page-with-sidebar .slide-thumb.active .slide-thumb-num { color: var(--canvas-accent); font-weight: 700; }
+.canvas-page-with-sidebar .slide-thumb-title {
+  font-size: 8px;
+  font-weight: 700;
+  color: #1a1a1a;
+  letter-spacing: -0.01em;
+  line-height: 1.1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.canvas-page-with-sidebar .slide-thumb-body {
+  font-size: 6.5px;
+  color: #555;
+  line-height: 1.25;
+  overflow: hidden;
+  flex: 1;
+}
+
+/* Big slide canvas */
+.canvas-page-with-sidebar .slide-canvas-wrap {
+  background: var(--canvas-surface-2);
+  border: 1px solid var(--canvas-border);
+  border-radius: 10px;
+  padding: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.canvas-page-with-sidebar .slide-canvas {
+  position: relative;
+  width: 100%;
+  max-width: 720px;
+  aspect-ratio: 16 / 9;
+  background: #fff;
+  border-radius: 6px;
+  box-shadow: 0 12px 32px rgba(0,0,0,0.18), 0 4px 10px rgba(0,0,0,0.10);
+  padding: 36px 44px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  color: #111;
+  overflow: hidden;
+}
+.canvas-page-with-sidebar .slide-canvas::before {
+  content: '';
+  position: absolute;
+  top: 0; left: 0; right: 0;
+  height: 4px;
+  background: linear-gradient(90deg, var(--canvas-accent), var(--canvas-critic));
+}
+.canvas-page-with-sidebar .slide-canvas-title {
+  font-size: 26px;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  color: #0f172a;
+  line-height: 1.15;
+}
+.canvas-page-with-sidebar .slide-canvas-body {
+  flex: 1;
+  font-size: 15px;
+  color: #1f2937;
+  line-height: 1.55;
+  overflow: hidden;
+}
+.canvas-page-with-sidebar .slide-canvas-body ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.canvas-page-with-sidebar .slide-canvas-body ul li {
+  position: relative;
+  padding-left: 22px;
+}
+.canvas-page-with-sidebar .slide-canvas-body ul li::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 9px;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--canvas-accent);
+}
+.canvas-page-with-sidebar .slide-paragraph {
+  font-size: 17px;
+  line-height: 1.6;
+}
+.canvas-page-with-sidebar .slide-placeholder {
+  color: #9ca3af;
+  font-style: italic;
+  font-size: 14px;
+}
+.canvas-page-with-sidebar .slide-canvas-footer {
+  position: absolute;
+  bottom: 14px;
+  right: 18px;
+  font-family: var(--canvas-mono);
+  font-size: 10px;
+  color: #9ca3af;
+}
+
+/* Section-check pill (used in both modes) */
+.canvas-page-with-sidebar .check-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  padding: 3px 9px;
+  border-radius: 999px;
+  background: var(--canvas-surface-2);
+  color: var(--canvas-text-3);
+  font-family: var(--canvas-sans);
+}
+.canvas-page-with-sidebar .check-pill[data-passed="true"] {
+  background: rgba(16, 185, 129, 0.15);
+  color: #10B981;
+}
+
+/* Document-page preview (Google Docs feel) */
+.canvas-page-with-sidebar .doc-page {
+  background: #ffffff;
+  color: #1a1a1a;
+  padding: 56px 72px;
+  border-radius: 4px;
+  box-shadow: 0 4px 14px rgba(0,0,0,0.10), 0 1px 4px rgba(0,0,0,0.06);
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+  max-width: 800px;
+  margin: 0 auto;
+  width: 100%;
+}
+.canvas-page-with-sidebar .doc-title {
+  font-size: 28px;
+  font-weight: 700;
+  margin: 0 0 24px;
+  letter-spacing: -0.02em;
+  color: #0f172a;
+}
+.canvas-page-with-sidebar .doc-h2 {
+  font-size: 18px;
+  font-weight: 700;
+  margin: 24px 0 8px;
+  color: #0f172a;
+}
+.canvas-page-with-sidebar .doc-body { font-size: 14px; line-height: 1.7; color: #1f2937; }
+.canvas-page-with-sidebar .doc-body p { margin: 0 0 12px; }
+.canvas-page-with-sidebar .doc-body strong { color: #0f172a; }
+.canvas-page-with-sidebar .doc-section { margin-bottom: 8px; }
+
+/* Paper-page preview (Overleaf feel — serif, two-column body) */
+.canvas-page-with-sidebar .paper-page {
+  background: #fdfbf7;
+  color: #1a1a1a;
+  padding: 64px 72px;
+  border-radius: 4px;
+  box-shadow: 0 4px 14px rgba(0,0,0,0.10), 0 1px 4px rgba(0,0,0,0.06);
+  font-family: 'Georgia', 'Times New Roman', serif;
+  max-width: 820px;
+  margin: 0 auto;
+  width: 100%;
+}
+.canvas-page-with-sidebar .paper-page-head {
+  text-align: center;
+  border-bottom: 1px solid #d1d5db;
+  padding-bottom: 16px;
+  margin-bottom: 22px;
+}
+.canvas-page-with-sidebar .paper-title {
+  font-size: 22px;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+  color: #0f172a;
+}
+.canvas-page-with-sidebar .paper-byline {
+  font-size: 12px;
+  color: #6b7280;
+  font-style: italic;
+  margin-top: 6px;
+}
+.canvas-page-with-sidebar .paper-h2 {
+  font-size: 14px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: #0f172a;
+  margin: 22px 0 8px;
+}
+.canvas-page-with-sidebar .paper-body { font-size: 13px; line-height: 1.65; color: #1f2937; text-align: justify; }
+.canvas-page-with-sidebar .paper-body p { margin: 0 0 10px; text-indent: 1.5em; }
+.canvas-page-with-sidebar .paper-body p:first-child { text-indent: 0; }
+.canvas-page-with-sidebar .paper-empty { color: #9ca3af; font-style: italic; font-size: 12px; }
+.canvas-page-with-sidebar .paper-section { margin-bottom: 4px; }
+
+/* ----- Notion-style single-surface deliverable editor ----- */
+.canvas-page-with-sidebar .notion-deliverable-grid {
+  display: grid;
+  grid-template-columns: 200px minmax(0, 1fr) 240px;
+  gap: 28px;
+  align-items: start;
+}
+@media (max-width: 1280px) {
+  .canvas-page-with-sidebar .notion-deliverable-grid { grid-template-columns: 200px minmax(0, 1fr); }
+  .canvas-page-with-sidebar .notion-deliverable-grid > .deliverable-insertables { display: none; }
+}
+@media (max-width: 768px) {
+  .canvas-page-with-sidebar .notion-deliverable-grid { grid-template-columns: 1fr; }
+  .canvas-page-with-sidebar .notion-toc { display: none; }
+}
+
+/* Subtle TOC */
+.canvas-page-with-sidebar .notion-toc {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  position: sticky;
+  top: 0;
+  padding: 4px 0;
+}
+.canvas-page-with-sidebar .notion-toc-label {
+  font-size: 11px;
+  color: var(--canvas-text-4);
+  font-weight: 500;
+  padding: 4px 6px 8px;
+  letter-spacing: 0;
+  text-transform: none;
+}
+.canvas-page-with-sidebar .notion-toc-link {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: transparent;
+  border: none;
+  padding: 5px 8px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-family: inherit;
+  font-size: 13px;
+  color: var(--canvas-text-2);
+  text-align: left;
+  transition: background .12s, color .12s;
+}
+.canvas-page-with-sidebar .notion-toc-link:hover {
+  background: rgba(255, 255, 255, 0.04);
+  color: var(--canvas-text);
+}
+.canvas-page-with-sidebar[data-canvas-theme="light"] .notion-toc-link:hover {
+  background: rgba(0, 0, 0, 0.04);
+}
+.canvas-page-with-sidebar .notion-toc-link.active {
+  background: rgba(255, 255, 255, 0.06);
+  color: var(--canvas-text);
+  font-weight: 500;
+}
+.canvas-page-with-sidebar[data-canvas-theme="light"] .notion-toc-link.active {
+  background: rgba(0, 0, 0, 0.05);
+}
+.canvas-page-with-sidebar .notion-toc-link-text {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.canvas-page-with-sidebar .notion-toc-link-count {
+  font-family: var(--canvas-mono);
+  font-size: 10px;
+  color: var(--canvas-text-4);
+}
+
+/* The page itself */
+.canvas-page-with-sidebar .notion-page-wrap {
+  display: flex;
+  justify-content: center;
+}
+.canvas-page-with-sidebar .notion-page {
+  background: var(--canvas-surface);
+  width: 100%;
+  max-width: 760px;
+  padding: 60px 80px;
+  border-radius: 4px;
+  color: var(--canvas-text);
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+}
+.canvas-page-with-sidebar[data-canvas-theme="light"] .notion-page {
+  background: #ffffff;
+  border: 1px solid rgba(15, 15, 15, 0.06);
+  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
+}
+.canvas-page-with-sidebar .notion-page.serif {
+  font-family: 'Georgia', 'Times New Roman', serif;
+}
+.canvas-page-with-sidebar .notion-page-wrap.paper .notion-page {
+  background: #fdfbf7;
+}
+.canvas-page-with-sidebar[data-canvas-theme="light"] .notion-page-wrap.paper .notion-page {
+  background: #fdfbf7;
+}
+.canvas-page-with-sidebar .notion-page-title {
+  font-size: 40px;
+  font-weight: 700;
+  margin: 0 0 6px;
+  letter-spacing: -0.025em;
+  line-height: 1.15;
+  color: var(--canvas-text);
+}
+.canvas-page-with-sidebar .notion-page-meta {
+  font-size: 12.5px;
+  color: var(--canvas-text-3);
+  margin: 0 0 36px;
+}
+
+.canvas-page-with-sidebar .notion-block {
+  margin: 24px 0;
+  position: relative;
+}
+.canvas-page-with-sidebar .notion-h2 {
+  font-size: 24px;
+  font-weight: 700;
+  letter-spacing: -0.015em;
+  margin: 0 0 8px;
+  color: var(--canvas-text);
+}
+.canvas-page-with-sidebar .notion-h2.serif {
+  font-size: 16px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  font-weight: 700;
+}
+.canvas-page-with-sidebar .notion-hint {
+  font-size: 13.5px;
+  color: var(--canvas-text-4);
+  font-style: italic;
+  margin: 4px 0 6px;
+}
+
+/* The textarea, styled as Notion body text */
+.canvas-page-with-sidebar .notion-text {
+  display: block;
+  width: 100%;
+  background: transparent;
+  border: none;
+  outline: none;
+  resize: none;
+  padding: 4px 0;
+  margin: 0;
+  font-family: inherit;
+  font-size: 16px;
+  line-height: 1.6;
+  color: var(--canvas-text);
+  overflow: hidden;
+  min-height: 28px;
+}
+.canvas-page-with-sidebar .notion-text.serif {
+  font-family: 'Georgia', 'Times New Roman', serif;
+  font-size: 14.5px;
+  line-height: 1.7;
+}
+.canvas-page-with-sidebar .notion-text::placeholder {
+  color: var(--canvas-text-4);
+}
+.canvas-page-with-sidebar .notion-text:focus {
+  background: rgba(0, 0, 0, 0.02);
+  border-radius: 3px;
+  padding: 4px 6px;
+  margin: 0 -6px;
+}
+.canvas-page-with-sidebar[data-canvas-theme="light"] .notion-text:focus {
+  background: rgba(0, 0, 0, 0.025);
+}
+
+/* Inline meta (check pills + word count) sits below the block */
+.canvas-page-with-sidebar .notion-block-meta {
+  margin-top: 10px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+/* Notion-style callout box for AI suggestions */
+.canvas-page-with-sidebar .notion-callout {
+  margin-top: 12px;
+  background: rgba(99, 102, 241, 0.06);
+  border-radius: 4px;
+  padding: 14px 16px;
+  display: flex;
+  gap: 10px;
+  font-size: 13.5px;
+  line-height: 1.55;
+  color: var(--canvas-text);
+}
+.canvas-page-with-sidebar[data-canvas-theme="light"] .notion-callout {
+  background: rgba(99, 102, 241, 0.07);
+}
+.canvas-page-with-sidebar .notion-callout > svg {
+  color: var(--canvas-accent);
+  flex-shrink: 0;
+  margin-top: 2px;
+}
+.canvas-page-with-sidebar .notion-callout-label {
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--canvas-accent);
+  font-weight: 600;
+  margin-bottom: 2px;
+}
+
+/* Export dropdown — uses native <details> for zero-state-management */
+.canvas-page-with-sidebar .canvas-export-menu summary {
+  list-style: none;
+}
+.canvas-page-with-sidebar .canvas-export-menu summary::-webkit-details-marker {
+  display: none;
+}
+.canvas-page-with-sidebar .canvas-export-menu[open] summary {
+  filter: brightness(1.05);
+}
+.canvas-page-with-sidebar .canvas-export-menu-list {
+  position: absolute;
+  top: calc(100% + 4px);
+  right: 0;
+  background: var(--canvas-surface);
+  border: 1px solid var(--canvas-border-2);
+  border-radius: 6px;
+  box-shadow: var(--canvas-shadow-lg);
+  padding: 4px;
+  min-width: 180px;
+  display: flex;
+  flex-direction: column;
+  z-index: 30;
+}
+.canvas-page-with-sidebar .canvas-export-menu-list button {
+  text-align: left;
+  background: transparent;
+  border: none;
+  padding: 7px 10px;
+  border-radius: 4px;
+  font-size: 13px;
+  cursor: pointer;
+  color: var(--canvas-text);
+}
+.canvas-page-with-sidebar .canvas-export-menu-list button:hover {
+  background: rgba(255, 255, 255, 0.05);
+}
+.canvas-page-with-sidebar[data-canvas-theme="light"] .canvas-export-menu-list button:hover {
+  background: rgba(0, 0, 0, 0.05);
+}
+
+/* Old paper/doc preview styles can stay below for the slides bottom-info case */
+
+/* Responsive breakpoints for paper/document mode */
+@media (max-width: 1280px) {
+  .canvas-page-with-sidebar .deliverable-grid { grid-template-columns: 160px minmax(0, 1fr); }
+  .canvas-page-with-sidebar .deliverable-grid > .deliverable-insertables { display: none; }
+}
+@media (max-width: 768px) {
+  .canvas-page-with-sidebar .deliverable-grid { grid-template-columns: 1fr; }
+  .canvas-page-with-sidebar .doc-page,
+  .canvas-page-with-sidebar .paper-page { padding: 32px 24px; }
+}
+
+/* Insertable row in the right rail of Deliverables */
+.canvas-page-with-sidebar .canvas-insert-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 8px;
+  background: transparent;
+  border: none;
+  border-radius: 4px;
+  text-align: left;
+  cursor: pointer;
+  font-family: inherit;
+  color: var(--canvas-text);
+  transition: background .12s;
+}
+.canvas-page-with-sidebar .canvas-insert-row:hover {
+  background: rgba(255, 255, 255, 0.05);
+}
+.canvas-page-with-sidebar[data-canvas-theme="light"] .canvas-insert-row:hover {
+  background: rgba(0, 0, 0, 0.04);
+}
+
+/* Cross-widget drop overlay — shows over the target widget body during drag */
+.canvas-page-with-sidebar .canvas-drop-overlay {
+  position: absolute;
+  inset: -4px;
+  background: var(--canvas-accent-glow);
+  border: 2px dashed var(--canvas-accent);
+  border-radius: 9px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--canvas-accent);
+  z-index: 5;
+  pointer-events: none;
+}
+.canvas-page-with-sidebar .canvas-drop-active { outline: none; }
+
 /* Compact markdown rendering inside note rows */
 .canvas-page-with-sidebar .canvas-md p { margin: 0 0 4px; }
 .canvas-page-with-sidebar .canvas-md p:last-child { margin-bottom: 0; }