Refactor Canvas components and enhance user experience

- Updated AppHeader to rename "Deliverables" tab to "Documents" for clarity.
- Enhanced Sidebar functionality by adding support for insights sections and improved search capabilities.
- Introduced new PhD Journey and PhD Resources widgets to assist users in managing their academic progress and resources.
- Improved CanvasDeliverables with additional document templates and updated UI elements for better usability.
- Enhanced CSS styles for consistency and improved visual appeal across the Canvas interface.

These changes collectively enhance the usability and functionality of the Canvas application, making it more intuitive for users to navigate and manage their academic tasks.

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

@@ -71,7 +71,7 @@ const AppHeader = ({
           <button className={`tab ${isOnChat ? 'active' : ''}`} onClick={onNavigateToChat}>Chat</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>
+          <button className={`tab ${tabActive('deliverables') ? 'active' : ''}`} onClick={() => goToCanvas('deliverables')}>Documents</button>
         </div>
       )}
 
@@ -89,7 +89,7 @@ const AppHeader = ({
           <option value="chat">Chat</option>
           <option value="insights">Insights</option>
           <option value="workspace">Workspace</option>
-          <option value="deliverables">Deliverables</option>
+          <option value="deliverables">Documents</option>
         </select>
       )}
 

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

@@ -1,12 +1,10 @@
 import React, { useState, useEffect } from 'react';
 import {
   MessageSquare,
-  Plus,
   SquarePen,
   Search,
   MoreVertical,
   Trash2,
-  Edit3,
   LogOut,
   User,
   Settings,
@@ -28,7 +26,6 @@ const Sidebar = ({
   onSidebarToggle,
   isMobileOpen = false,
   onMobileToggle,
-  onNavigateToCanvas,
   refreshTrigger,
   onCurrentSessionDeleted,
   pageContext = 'chat',
@@ -36,6 +33,7 @@ const Sidebar = ({
   canvasSubview = 'workspace',
   widgetGroups = [],
   deliverableProjects = [],
+  insightSections = [],
 }) => {
   const isOnCanvas = pageContext === 'canvas';
   const [expanded, setExpanded] = useState(() => {
@@ -277,7 +275,9 @@ const Sidebar = ({
                 type="text"
                 placeholder={
                   isOnCanvas
-                    ? (canvasSubview === 'deliverables' ? 'Search drafts...' : 'Search widgets...')
+                    ? (canvasSubview === 'deliverables' ? 'Search drafts...'
+                       : canvasSubview === 'insights' ? 'Search sections...'
+                       : 'Search widgets...')
                     : 'Search chats...'
                 }
                 value={searchTerm}
@@ -312,7 +312,7 @@ const Sidebar = ({
                 if (projects.length === 0) {
                   return (
                     <div className="no-sessions">
-                      {searchTerm ? 'No drafts match' : 'No drafts yet — create one in Deliverables'}
+                      {searchTerm ? 'No drafts match' : 'No drafts yet — create one in Documents'}
                     </div>
                   );
                 }
@@ -400,7 +400,37 @@ const Sidebar = ({
                 });
               }
 
-              // ---------- INSIGHTS / fallback: keep flat list ----------
+              // ---------- INSIGHTS: section list with confidence badges ----------
+              if (canvasSubview === 'insights') {
+                const sections = insightSections.filter(s => !q || s.name.toLowerCase().includes(q));
+                if (sections.length === 0) {
+                  return <div className="no-sessions">{searchTerm ? 'No sections match' : 'No insights yet'}</div>;
+                }
+                return (
+                  <div className="csm-group">
+                    <div className="csm-group-head" style={{ cursor: 'default' }}>
+                      <span className="csm-group-name">Sections</span>
+                      <span className="csm-group-count">{sections.length}</span>
+                    </div>
+                    <div className="csm-group-body">
+                      {sections.map(s => {
+                        const complete = s.taskCount > 0 && s.doneCount === s.taskCount;
+                        return (
+                          <button key={s.id} className={`csm-row ${complete ? 'csm-row-done' : ''}`} onClick={s.onClick}>
+                            <span className="csm-row-bullet"/>
+                            <span className="csm-row-label">{s.name}</span>
+                            {s.taskCount > 0 && (
+                              <span className="csm-row-meta">{s.doneCount}/{s.taskCount}</span>
+                            )}
+                          </button>
+                        );
+                      })}
+                    </div>
+                  </div>
+                );
+              }
+
+              // ---------- Fallback: flat list (legacy) ----------
               const items = canvasItems.filter(it => !q || it.label.toLowerCase().includes(q));
               if (items.length === 0) {
                 return <div className="no-sessions">{searchTerm ? 'No matches' : 'Nothing here yet'}</div>;

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

@@ -4,6 +4,20 @@ import Icon from './CanvasIcon';
 const fireToast = (msg, kind = 'success') =>
   window.dispatchEvent(new CustomEvent('canvas-toast', { detail: { msg, kind } }));
 
+// Critic widgets are scripted in canvas; the *real* critique should happen in
+// the main chat so message history lives in one place (per Daniel's review).
+// "Open in chat" stashes a draft prompt + persona hint then asks CanvasPage to
+// navigate to chat — the chat page can read `canvas-chat-handoff` from localStorage.
+const handoffToChat = (persona, prompt, context = {}) => {
+  try {
+    localStorage.setItem('canvas-chat-handoff', JSON.stringify({
+      at: Date.now(), persona, prompt, ...context,
+    }));
+  } catch { /* ignore */ }
+  window.dispatchEvent(new CustomEvent('canvas-open-in-chat', { detail: { persona, prompt } }));
+  fireToast(`Opening ${persona} in chat — full history will be there.`);
+};
+
 // ---------- Reviewer 2 widget ----------
 export function Reviewer2Widget({ state, setState, openModal }) {
   return (
@@ -27,16 +41,26 @@ export function Reviewer2Widget({ state, setState, openModal }) {
         <div className="bar"><i style={{ width: '92%' }}/></div>
         <span style={{ color: 'var(--canvas-critic)' }}>harsh</span>
       </div>
-      <button
-        className="btn btn-critic"
-        style={{ alignSelf: 'flex-start' }}
-        onClick={() => openModal('reviewer-2', {
-          initial: state.lastDraft,
-          onComplete: (review) => setState({ ...state, lastDraft: review.draft, lastReview: review }),
-        })}
-      >
-        <Icon name="gavel" size={13}/>Get critique
-      </button>
+      <div style={{ display: 'flex', gap: 6, alignSelf: 'flex-start' }}>
+        <button
+          className="btn btn-critic"
+          onClick={() => openModal('reviewer-2', {
+            initial: state.lastDraft,
+            onComplete: (review) => setState({ ...state, lastDraft: review.draft, lastReview: review }),
+          })}
+        >
+          <Icon name="gavel" size={13}/>Get critique
+        </button>
+        <button
+          className="btn"
+          title="Open Reviewer 2 in the main chat (history lives there)"
+          onClick={() => handoffToChat('Reviewer 2', state.lastDraft
+            ? `Critique this draft as Reviewer 2: "${state.lastDraft}"`
+            : 'Open Reviewer 2 and ready a critique.')}
+        >
+          <Icon name="message" size={13}/>Open in chat
+        </button>
+      </div>
     </>
   );
 }
@@ -58,17 +82,26 @@ export function DevilsAdvocateWidget({ state, setState, openModal }) {
           </div>
         ))}
       </div>
-      <button
-        className="btn btn-critic"
-        style={{ alignSelf: 'flex-start' }}
-        onClick={() => openModal('devils-advocate', {
-          claim: state.claim,
-          counters: state.counters,
-          onUpdate: (next) => setState({ ...state, ...next }),
-        })}
-      >
-        <Icon name="scale" size={13}/>Push harder
-      </button>
+      <div style={{ display: 'flex', gap: 6, alignSelf: 'flex-start' }}>
+        <button
+          className="btn btn-critic"
+          onClick={() => openModal('devils-advocate', {
+            claim: state.claim,
+            counters: state.counters,
+            onUpdate: (next) => setState({ ...state, ...next }),
+          })}
+        >
+          <Icon name="scale" size={13}/>Push harder
+        </button>
+        <button
+          className="btn"
+          title="Open Devil's Advocate in the main chat (history lives there)"
+          onClick={() => handoffToChat("Devil's Advocate",
+            `Take the position of devil's advocate on my claim: "${state.claim || 'my current hypothesis'}". Be ruthless.`)}
+        >
+          <Icon name="message" size={13}/>Open in chat
+        </button>
+      </div>
     </>
   );
 }
@@ -98,13 +131,22 @@ export function ScopeRealismWidget({ state, openModal }) {
           </div>
         ))}
       </div>
-      <button
-        className="btn btn-critic"
-        style={{ alignSelf: 'flex-start' }}
-        onClick={() => openModal('scope-realism', { state })}
-      >
-        <Icon name="bullseye" size={13}/>Read full verdict
-      </button>
+      <div style={{ display: 'flex', gap: 6, alignSelf: 'flex-start' }}>
+        <button
+          className="btn btn-critic"
+          onClick={() => openModal('scope-realism', { state })}
+        >
+          <Icon name="bullseye" size={13}/>Read full verdict
+        </button>
+        <button
+          className="btn"
+          title="Open Scope Realism in the main chat (history lives there)"
+          onClick={() => handoffToChat('Scope Realism',
+            `Run a brutal feasibility check on my goal: "${state.target || 'my current research scope'}". Be specific about what's at risk.`)}
+        >
+          <Icon name="message" size={13}/>Open in chat
+        </button>
+      </div>
     </div>
   );
 }

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

@@ -11,6 +11,7 @@ import remarkMath from 'remark-math';
 import rehypeKatex from 'rehype-katex';
 import 'katex/dist/katex.min.css';
 import Icon from './CanvasIcon';
+import { MOD } from './platform';
 
 // Markdown plugins shared across all rendered blocks. remark-math + rehype-katex
 // give us real LaTeX math (`$...$` inline, `$$...$$` block) inside any preview.
@@ -140,6 +141,71 @@ export const TEMPLATES = [
       { id: 'close', name: 'Close', target: 60, hint: 'Thanks + next step + signature.', checks: [] },
     ],
   },
+  {
+    id: 'irb-protocol',
+    name: 'IRB Protocol',
+    desc: 'Standard sections for human-subjects research approval.',
+    icon: 'shield',
+    mode: 'document',
+    sections: [
+      { id: 'overview', name: 'Study overview', target: 200, hint: 'One-paragraph summary of purpose and procedures.', checks: [] },
+      { id: 'background', name: 'Background & significance', target: 400, hint: 'Why this study? What gap does it close?', checks: ['hasGap', 'hasCitation'] },
+      { id: 'aims', name: 'Specific aims & hypotheses', target: 250, hint: '2–3 aims. Each falsifiable.', checks: ['hasHypothesis'] },
+      { id: 'participants', name: 'Participants & recruitment', target: 300, hint: 'Inclusion/exclusion criteria, sample size, recruitment plan.', checks: ['hasNumber'] },
+      { id: 'procedures', name: 'Procedures', target: 500, hint: 'Step-by-step what subjects experience. Time burden in minutes.', checks: ['hasNumber'] },
+      { id: 'risks', name: 'Risks & mitigation', target: 200, hint: 'Anticipated risks (physical, psychological, privacy) + mitigations.', checks: ['hasLimit'] },
+      { id: 'benefits', name: 'Benefits', target: 100, hint: 'Direct + societal benefits. Be honest about minimal direct benefits.', checks: [] },
+      { id: 'consent', name: 'Consent process', target: 200, hint: 'Who consents, when, written or verbal, capacity considerations.', checks: [] },
+      { id: 'data', name: 'Data handling & confidentiality', target: 200, hint: 'Storage, access, identifiers, retention period.', checks: [] },
+    ],
+  },
+  {
+    id: 'meeting-prep',
+    name: 'Advisor Meeting Prep',
+    desc: 'Bring this to your 1:1 — agenda, updates, decisions needed, follow-ups.',
+    icon: 'message',
+    mode: 'document',
+    sections: [
+      { id: 'agenda', name: 'Agenda', target: 80, hint: '3–5 bullets ranked by priority.', checks: [] },
+      { id: 'progress', name: 'Progress since last meeting', target: 200, hint: 'What you actually did, with numbers when possible.', checks: ['hasNumber'] },
+      { id: 'blockers', name: 'Blockers', target: 150, hint: 'What you need from them to move forward.', checks: ['hasLimit'] },
+      { id: 'decisions', name: 'Decisions needed', target: 200, hint: 'Frame as A/B options with your recommendation.', checks: [] },
+      { id: 'questions', name: 'Questions', target: 150, hint: 'Open questions you genuinely want their take on.', checks: [] },
+      { id: 'followup', name: 'Action items (post-meeting)', target: 100, hint: 'Fill in during/after. Owner + due date for each.', checks: [] },
+    ],
+  },
+  {
+    id: 'dissertation-formatting',
+    name: 'Dissertation Formatting Checklist',
+    desc: 'Catch-everything pass before ProQuest submission.',
+    icon: 'shield',
+    mode: 'document',
+    sections: [
+      { id: 'frontmatter', name: 'Front matter', target: 0, hint: 'Title page, copyright, abstract, dedication, acknowledgements, ToC, list of figures/tables.', checks: [] },
+      { id: 'margins', name: 'Margins & spacing', target: 0, hint: 'Verify school requirements. Most: 1" margins, double-spaced body, single-spaced quotes/captions.', checks: ['hasNumber'] },
+      { id: 'fonts', name: 'Fonts & typography', target: 0, hint: 'One body font (Times/Garamond/Cambria) at 12pt. Captions 10–11pt. Headings consistent.', checks: ['hasNumber'] },
+      { id: 'pagenumbers', name: 'Page numbering', target: 0, hint: 'Roman for front matter, Arabic from Intro onward. Check section breaks.', checks: [] },
+      { id: 'figures', name: 'Figures & tables', target: 0, hint: 'Captions below figures, above tables. Numbered. Cited in text before they appear.', checks: ['hasFigure'] },
+      { id: 'citations', name: 'Citations & references', target: 0, hint: 'Consistent style throughout. Every cite has a reference; every reference is cited.', checks: ['hasCitation'] },
+      { id: 'appendices', name: 'Appendices', target: 0, hint: 'Lettered (A, B, C). Each cited in the body at least once.', checks: [] },
+      { id: 'proquest', name: 'ProQuest submission', target: 0, hint: 'PDF/A format, embedded fonts, no broken links, abstract under word limit.', checks: [] },
+    ],
+  },
+  {
+    id: 'faculty-hunt',
+    name: 'Faculty / Advisor Hunt',
+    desc: 'For prospective PhDs or finding committee members — research the people.',
+    icon: 'user',
+    mode: 'document',
+    sections: [
+      { id: 'criteria', name: 'What you\'re looking for', target: 150, hint: 'Research area, methodology, working style, mentorship reputation.', checks: [] },
+      { id: 'shortlist', name: 'Shortlist (5–10 names)', target: 400, hint: 'For each: name, institution, 2–3 representative papers, why they fit.', checks: ['hasCitation'] },
+      { id: 'pubs', name: 'Recent publications', target: 300, hint: 'What have they published in the last 2 years? Drop @keys from Bibliography.', checks: ['hasCitation'] },
+      { id: 'students', name: 'Current/recent students', target: 200, hint: 'Lab size, time-to-defense, where students go after.', checks: ['hasNumber'] },
+      { id: 'reachout', name: 'Outreach plan', target: 200, hint: 'When to email, what to send, who to mention.', checks: [] },
+      { id: 'notes', name: 'Conversation notes', target: 0, hint: 'After meetings/emails — vibes, fit signals, red flags.', checks: [] },
+    ],
+  },
   {
     id: 'research-statement',
     name: 'Research Statement',
@@ -397,7 +463,7 @@ const DeliverablesView = ({ allStates }) => {
       <>
         <div className="page-header">
           <div>
-            <h1 className="page-title">Deliverables</h1>
+            <h1 className="page-title">Documents</h1>
             <div className="page-sub">
               Your one-stop deliverable center. Drafts auto-save. Versions kept for rollback.
               {projectList.length > 0 && ` · ${projectList.length} draft${projectList.length === 1 ? '' : 's'} in flight.`}
@@ -858,8 +924,8 @@ const lineWrap = (text, prefix) =>
   (text ? text.split('\n').map(line => line ? `${prefix}${line}` : line).join('\n') : `${prefix}`);
 
 const TOOLBAR = [
-  { id: 'bold',     icon: 'pencil', label: 'Bold (⌘B)',       run: (sel) => wrap(sel, '**') },
-  { id: 'italic',   icon: 'pencil', label: 'Italic (⌘I)',     run: (sel) => wrap(sel, '*') },
+  { id: 'bold',     icon: 'pencil', label: `Bold (${MOD}+B)`,   run: (sel) => wrap(sel, '**') },
+  { id: 'italic',   icon: 'pencil', label: `Italic (${MOD}+I)`, run: (sel) => wrap(sel, '*') },
   { id: 'code',     icon: 'flask',  label: 'Inline code',      run: (sel) => wrap(sel, '`') },
   { id: 'h2',       icon: 'list',   label: 'Heading',          run: (sel) => `## ${sel || 'Heading'}` },
   { id: 'h3',       icon: 'list',   label: 'Subheading',       run: (sel) => `### ${sel || 'Subheading'}` },

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

@@ -871,7 +871,8 @@ export function PaletteModal({ data, onClose }) {
                   <div className="pi-title">
                     {w.name}
                     {w.critic && <span className="widget-tag" style={{ fontSize: 8.5 }}>WEDGE</span>}
-                    {w.enhanced && !w.stub && <span className="widget-tag widget-tag-enhanced" style={{ fontSize: 8.5 }}>ENHANCED</span>}
+                    {w.critic && <span className="widget-tag widget-tag-chat" style={{ fontSize: 8.5 }} title="Real critique happens in the main chat — this widget is a scratchpad">BEST IN CHAT</span>}
+                    {w.enhanced && !w.stub && !w.critic && <span className="widget-tag widget-tag-enhanced" style={{ fontSize: 8.5 }}>ENHANCED</span>}
                     {w.stub && <span style={{ fontSize: 9, color: 'var(--canvas-text-4)', fontFamily: 'var(--canvas-mono)', marginLeft: 4 }}>SOON</span>}
                   </div>
                   <div className="pi-desc">{w.desc}</div>

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

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import Icon from './CanvasIcon';
+import { MOD } from './platform';
 
 const TOUR_KEY = 'canvas-tour-seen-v1';
 
@@ -12,7 +13,7 @@ const STEPS = [
   {
     title: 'Add widgets from the palette',
     icon: 'plus',
-    body: 'Click "Add widget" on the Workspace view, or hit ⌘K and search. There are 30+ widgets — bibliography, kanban, pomodoro, writing tracker, plus three "anti-yes-man" widgets that push back on your thinking.',
+    body: `Click "Add widget" on the Workspace view, or hit ${MOD}+K and search. There are 30+ widgets — bibliography, kanban, pomodoro, writing tracker, plus three "anti-yes-man" widgets that push back on your thinking.`,
   },
   {
     title: 'Make it yours',

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

@@ -2,6 +2,7 @@ import React, { useState, useEffect, useMemo, useRef } from 'react';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import Icon from './CanvasIcon';
+import { MOD } from './platform';
 
 const fireToast = (msg, kind = 'success') =>
   window.dispatchEvent(new CustomEvent('canvas-toast', { detail: { msg, kind } }));
@@ -1431,13 +1432,193 @@ export function DocumenterWidget({ state, setState }) {
           </div>
         ))}
         {entries.length === 0 && (
-          <EmptyState icon="pencil" title="No entries yet" hint="Drop a line about today. Hit ⌘↵ to log it. Tap Weekly summary anytime."/>
+          <EmptyState icon="pencil" title="No entries yet" hint={`Drop a line about today. Hit ${MOD}+↵ to log it. Tap Weekly summary anytime.`}/>
         )}
       </div>
     </>
   );
 }
 
+// ===== PhD Journey — standard milestones with status + notes =====
+// Captures the "General Journey" list: courses, prelim, lit review, IRB,
+// committee, topic, comps, defense, ProQuest. Each milestone has a status
+// (open/in-progress/completed) and an inline note.
+const PHD_MILESTONES = [
+  { id: 'courses', label: 'Course selection & dissertation credits', hint: 'Plan term-by-term. Check funding constraints.' },
+  { id: 'prelim', label: 'Preliminary exam', hint: 'Department format varies — consult your handbook.' },
+  { id: 'lit-review', label: 'Literature review', hint: 'Coverage + critique. Bibliography widget pairs well here.' },
+  { id: 'topic', label: 'Pick dissertation topic', hint: 'Narrow until your advisor pushes back.' },
+  { id: 'committee', label: 'Select committee', hint: 'Pros/cons of a co-chair: more buy-in, more scheduling.' },
+  { id: 'irb', label: 'IRB approval', hint: 'Allow 6–12 weeks. Pre-fill paperwork early.' },
+  { id: 'data', label: 'Data collection', hint: 'Pilot first. Plan for the inevitable instrument failure.' },
+  { id: 'comps', label: 'Comprehensive exam', hint: 'Department format varies.' },
+  { id: 'analysis', label: 'Data analysis & visualization', hint: 'Make the figures before the prose.' },
+  { id: 'writing', label: 'Write dissertation', hint: 'One chapter at a time. Aim for "good enough to defend".' },
+  { id: 'defense', label: 'Oral defense', hint: 'Slides + practice Q&A. Use the Defense Slides template.' },
+  { id: 'proquest', label: 'Final admin (ProQuest upload)', hint: 'Read the formatting checklist before you start formatting.' },
+];
+
+export function PhdJourneyWidget({ state, setState }) {
+  const statuses = state.statuses || {};
+  const notes = state.notes || {};
+  const [editingId, setEditingId] = useState(null);
+  const completed = PHD_MILESTONES.filter(m => statuses[m.id] === 'completed').length;
+  const total = PHD_MILESTONES.length;
+  const pct = Math.round((completed / total) * 100);
+
+  const cycleStatus = (id) => {
+    const cur = statuses[id] || 'open';
+    const next = cur === 'open' ? 'in-progress' : cur === 'in-progress' ? 'completed' : 'open';
+    setState({ ...state, statuses: { ...statuses, [id]: next } });
+  };
+  const updateNote = (id, text) => setState({ ...state, notes: { ...notes, [id]: text } });
+
+  return (
+    <>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 12, color: 'var(--canvas-text-2)' }}>
+        <span style={{ fontFamily: 'var(--canvas-mono)', fontWeight: 700, fontSize: 16, color: 'var(--canvas-text)' }}>
+          {completed}<span style={{ color: 'var(--canvas-text-3)', fontWeight: 500 }}>/{total}</span>
+        </span>
+        <div className="progress" style={{ flex: 1, height: 6 }}>
+          <i style={{ width: pct + '%' }}/>
+        </div>
+        <span style={{ fontFamily: 'var(--canvas-mono)', fontSize: 11, color: 'var(--canvas-text-3)' }}>{pct}%</span>
+      </div>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
+        {PHD_MILESTONES.map(m => {
+          const status = statuses[m.id] || 'open';
+          const note = notes[m.id] || '';
+          return (
+            <div key={m.id} className={`phd-milestone milestone-${status}`}>
+              <button
+                className="phd-milestone-check"
+                onClick={() => cycleStatus(m.id)}
+                title={`Status: ${status} (click to advance)`}
+              >
+                {status === 'completed' && <Icon name="check" size={11}/>}
+                {status === 'in-progress' && <span className="task-check-dot"/>}
+              </button>
+              <div className="phd-milestone-body" onClick={() => setEditingId(editingId === m.id ? null : m.id)}>
+                <div className="phd-milestone-label">{m.label}</div>
+                {(note || editingId === m.id) ? (
+                  editingId === m.id ? (
+                    <input
+                      className="inline-input"
+                      autoFocus
+                      defaultValue={note}
+                      placeholder={m.hint}
+                      onBlur={(e) => { updateNote(m.id, e.target.value); setEditingId(null); }}
+                      onKeyDown={(e) => { if (e.key === 'Enter') e.target.blur(); if (e.key === 'Escape') setEditingId(null); }}
+                      onClick={(e) => e.stopPropagation()}
+                      style={{ marginTop: 2, fontSize: 11.5 }}
+                    />
+                  ) : (
+                    <div className="phd-milestone-note">{note}</div>
+                  )
+                ) : (
+                  <div className="phd-milestone-hint">{m.hint}</div>
+                )}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </>
+  );
+}
+
+// ===== PhD Resources — curated links + open-source apps =====
+// Static curated list of useful PhD tools and resources, plus user-added links.
+const PHD_RESOURCE_GROUPS = [
+  {
+    label: 'Open-source PhD tools',
+    items: [
+      { name: 'Zotero', href: 'https://www.zotero.org/', desc: 'Reference manager — free and open source' },
+      { name: 'Obsidian', href: 'https://obsidian.md/', desc: 'Local-first knowledge graph for notes' },
+      { name: 'JabRef', href: 'https://www.jabref.org/', desc: 'BibTeX-native reference manager' },
+      { name: 'Pandoc', href: 'https://pandoc.org/', desc: 'Universal document converter' },
+      { name: 'Quarto', href: 'https://quarto.org/', desc: 'Scientific publishing with R/Python/Julia' },
+    ],
+  },
+  {
+    label: 'Writing & formatting',
+    items: [
+      { name: 'Overleaf', href: 'https://www.overleaf.com/', desc: 'Browser LaTeX editor with templates' },
+      { name: 'LaTeX Templates', href: 'https://www.latextemplates.com/', desc: 'Thesis, CV, poster templates' },
+      { name: 'Hemingway Editor', href: 'https://hemingwayapp.com/', desc: 'Plain-language readability check' },
+    ],
+  },
+  {
+    label: 'Community & career',
+    items: [
+      { name: 'Academic Twitter / #PhDChat', href: 'https://twitter.com/search?q=%23PhDChat', desc: 'Peers + advisors discussing the grind' },
+      { name: 'ORCID', href: 'https://orcid.org/', desc: 'Permanent researcher ID for citations + grants' },
+      { name: 'Conferences & CFPs (WikiCFP)', href: 'http://www.wikicfp.com/', desc: 'Upcoming deadlines across fields' },
+    ],
+  },
+];
+
+export function PhdResourcesWidget({ state, setState }) {
+  const customLinks = state.customLinks || [];
+  const [name, setName] = useState('');
+  const [href, setHref] = useState('');
+
+  const addLink = () => {
+    if (!name.trim() || !href.trim()) return;
+    setState({ ...state, customLinks: [...customLinks, { id: 'r' + Date.now(), name: name.trim(), href: href.trim() }] });
+    setName(''); setHref('');
+    fireToast('Resource added');
+  };
+  const removeLink = (id) => setState({ ...state, customLinks: customLinks.filter(l => l.id !== id) });
+
+  return (
+    <>
+      {PHD_RESOURCE_GROUPS.map(g => (
+        <div key={g.label}>
+          <div style={{ fontSize: 10, color: 'var(--canvas-text-4)', textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 600, marginBottom: 6 }}>
+            {g.label}
+          </div>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 4, marginBottom: 10 }}>
+            {g.items.map(it => (
+              <a key={it.name} href={it.href} target="_blank" rel="noopener noreferrer" className="phd-resource-link">
+                <span className="phd-resource-name">{it.name}</span>
+                <span className="phd-resource-desc">{it.desc}</span>
+              </a>
+            ))}
+          </div>
+        </div>
+      ))}
+      {customLinks.length > 0 && (
+        <div>
+          <div style={{ fontSize: 10, color: 'var(--canvas-text-4)', textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 600, marginBottom: 6 }}>
+            Your links
+          </div>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 4, marginBottom: 10 }}>
+            {customLinks.map(l => (
+              <div key={l.id} className="phd-resource-link" style={{ position: 'relative' }}>
+                <a href={l.href} target="_blank" rel="noopener noreferrer" style={{ display: 'flex', flexDirection: 'column', flex: 1, textDecoration: 'none', color: 'inherit' }}>
+                  <span className="phd-resource-name">{l.name}</span>
+                  <span className="phd-resource-desc">{l.href}</span>
+                </a>
+                <button className="icon-btn" onClick={() => removeLink(l.id)} style={{ position: 'absolute', right: 4, top: 4, width: 20, height: 20 }}>
+                  <Icon name="x" size={11}/>
+                </button>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+      <div style={{ display: 'flex', gap: 4 }}>
+        <input className="input" placeholder="Resource name" value={name} onChange={e => setName(e.target.value)} style={{ fontSize: 12, padding: '5px 8px' }}/>
+        <input className="input" placeholder="https://…" value={href} onChange={e => setHref(e.target.value)} style={{ fontSize: 12, padding: '5px 8px', flex: 2 }}/>
+        <button className="btn" onClick={addLink} disabled={!name.trim() || !href.trim()}>
+          <Icon name="plus" size={12}/>Add
+        </button>
+      </div>
+    </>
+  );
+}
+
 // ===== Stub — roadmap preview card =====
 // Shows what's coming for this widget type so adding it from the palette
 // doesn't feel like a dead end.

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

@@ -10,6 +10,7 @@ export const INSIGHTS = [
     id: 'i-progress',
     title: 'Research progress',
     icon: 'graph',
+    category: 'progress',
     confidence: 78,
     summary: 'Primary recordings from 4 of 6 planned animals are complete. Remaining two scheduled for May 18 and May 25. Analysis pipeline working on existing data; first results draft expected June.',
     bullets: [
@@ -18,11 +19,18 @@ export const INSIGHTS = [
       '<strong>Risk:</strong> M3 fixation drift suspected; need re-review with adv.',
     ],
     pinned: true,
+    sources: 12,
+    updatedMinutesAgo: 3,
+    quotes: [
+      '"Animal M4 recording finished today, sorting completes tomorrow." — May 6 lab notes',
+      '"Pipeline is happy with M1, M2; M3 looks drifty." — chat with Reineke advisor',
+    ],
   },
   {
     id: 'i-method',
     title: 'Methodology',
     icon: 'flask',
+    category: 'theory',
     confidence: 64,
     summary: 'GLM with spike-history kernel + visual drive is your declared model. You\'ve resisted committing to a specific predictive-coding formulation; this comes up in every advisor meeting.',
     bullets: [
@@ -30,11 +38,18 @@ export const INSIGHTS = [
       'Open: which predictive-coding variant — Rao & Ballard vs. Bastos top-down',
       'Open: how to operationalize "prediction error" from extracellular spikes',
     ],
+    sources: 8,
+    updatedMinutesAgo: 12,
+    quotes: [
+      '"Need to pick a PC formulation by next 1:1." — meeting notes May 2',
+      '"Bastos lets you predict laminar profile; Rao&Ballard does not." — methodologist chat',
+    ],
   },
   {
     id: 'i-lit',
     title: 'Literature review',
     icon: 'book',
+    category: 'literature',
     confidence: 71,
     summary: 'Strong on canonical predictive coding (Rao & Ballard 1999, Bastos 2012, Keller & Mrsic-Flogel 2018). Thin on recent feedback-circuit anatomy and on counter-evidence — this is showing up as a critique gap.',
     bullets: [
@@ -42,11 +57,18 @@ export const INSIGHTS = [
       '<strong>Gap:</strong> sparse on L5b feedback anatomy (Harris/Shepherd lab)',
       '<strong>Gap:</strong> no engagement with anti-PC critiques (e.g. Heeger 2017)',
     ],
+    sources: 47,
+    updatedMinutesAgo: 22,
+    quotes: [
+      '"Have you read Heeger 2017? It changes a lot." — lit-review aide',
+      '"L5b feedback anatomy is your weak spot." — devil\'s advocate',
+    ],
   },
   {
     id: 'i-questions',
     title: 'Open research questions',
     icon: 'sparkles',
+    category: 'theory',
     confidence: 58,
     summary: 'Three live threads. Question 1 (does L2/3 spiking encode prediction error?) is the dissertation core. Q2 and Q3 are scoped to specific aims.',
     bullets: [
@@ -54,11 +76,18 @@ export const INSIGHTS = [
       '<strong>Q2:</strong> How does this depend on context length (1 vs. 4 vs. 16 trials)?',
       '<strong>Q3:</strong> Is the signal sharpened by feedback from V2/RSC?',
     ],
+    sources: 6,
+    updatedMinutesAgo: 38,
+    quotes: [
+      '"Q1 is what the whole dissertation rests on." — methodologist',
+      '"Q3 is exciting but probably out of scope for the thesis." — Reineke',
+    ],
   },
   {
     id: 'i-next',
     title: 'Next steps',
     icon: 'arrow',
+    category: 'action',
     confidence: 82,
     summary: 'Concrete, near-term actions. Two of these have been on the list for 3+ weeks.',
     bullets: [
@@ -67,17 +96,30 @@ export const INSIGHTS = [
       'Read Heeger 2017 + Aitchison & Lengyel 2017',
       'Schedule pilot with M5 (May 18)',
     ],
+    sources: 5,
+    updatedMinutesAgo: 8,
+    quotes: [
+      '"Aim 2 draft has to land by May 22 or quals slip." — Reineke',
+      '"M3 review keeps getting punted." — last 3 advisor meetings',
+    ],
   },
   {
     id: 'i-blockers',
     title: 'Blockers & risks',
     icon: 'alert',
+    category: 'risk',
     confidence: 70,
     summary: 'One technical, one structural. The structural one is more important and you are deferring it.',
     bullets: [
       '<strong>Technical:</strong> Drift on M3 — may lose 1 animal of data',
       '<strong>Structural:</strong> No clear predictive-coding theory commitment yet → hard to define what counts as evidence',
     ],
+    sources: 4,
+    updatedMinutesAgo: 18,
+    quotes: [
+      '"If M3 is unusable you\'re at n=5 — still publishable but tight." — methodologist',
+      '"Without a theory commitment you can\'t falsify anything." — devil\'s advocate',
+    ],
   },
 ];
 
@@ -103,6 +145,8 @@ export const WIDGET_CATALOG = [
   { 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: 'phd-journey', name: 'PhD Journey', desc: 'Standard PhD milestones — courses → defense → ProQuest', icon: 'flag', cat: 'project', defaultSize: 'M', enhanced: true },
+  { type: 'phd-resources', name: 'PhD Resources', desc: 'Curated open-source tools, handbooks, and community links', icon: 'star', cat: 'research', 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 },
@@ -245,5 +289,14 @@ export const EMPTY_STATE = {
   calendar: { viewMonth: new Date().toISOString().slice(0, 7) },
   activity: {},
   documenter: { entries: [], lastSummary: null },
+  'phd-journey': {
+    // Status per milestone: 'open' | 'in-progress' | 'completed'
+    // Milestones come from the standard PhD journey (course selection → ProQuest)
+    statuses: {},
+    notes: {},
+  },
+  'phd-resources': {
+    customLinks: [],
+  },
 };
 

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

@@ -0,0 +1,5 @@
+// Tiny helper so keyboard shortcut hints adapt to the user's OS.
+// Detect once at module load — we don't expect platform to change mid-session.
+const isMac = typeof navigator !== 'undefined' && /Mac|iPod|iPhone|iPad/.test(navigator.platform);
+export const MOD = isMac ? '⌘' : 'Ctrl';
+export const MOD_LABEL = isMac ? 'Cmd' : 'Ctrl';

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

@@ -14,6 +14,7 @@ import {
   HabitsWidget, GoalsWidget, MeetingsWidget,
   OutlineWidget, HighlightsWidget, LatexWidget,
   CalendarWidget, DocumenterWidget, ActivityWidget,
+  PhdJourneyWidget, PhdResourcesWidget,
   StubWidget,
 } from '../components/canvas/CanvasWidgets';
 import {
@@ -28,6 +29,7 @@ import {
 } from '../components/canvas/CanvasModals';
 import CanvasWelcomeTour from '../components/canvas/CanvasWelcomeTour';
 import DeliverablesView, { TEMPLATES as DELIVERABLE_TEMPLATES } from '../components/canvas/CanvasDeliverables';
+import { MOD } from '../components/canvas/platform';
 import '../styles/CanvasPage.css';
 
 const LAYOUT_KEY = 'canvas-layout-v2';
@@ -57,6 +59,8 @@ function renderWidget(type, state, setState, openModal, allStates) {
     case 'calendar': return <CalendarWidget {...props}/>;
     case 'documenter': return <DocumenterWidget {...props}/>;
     case 'activity': return <ActivityWidget {...props}/>;
+    case 'phd-journey': return <PhdJourneyWidget {...props}/>;
+    case 'phd-resources': return <PhdResourcesWidget {...props}/>;
     default: {
       const meta = WIDGET_CATALOG.find(w => w.type === type);
       return <StubWidget meta={meta}/>;
@@ -100,15 +104,108 @@ function CanvasWidget({ widget, isDragging, isDragOver, onDragStart, onDragOver,
   );
 }
 
-function InsightsView({ widgetStates, setWidgetStates }) {
-  const [pinned, setPinned] = useState(new Set(INSIGHTS.filter(i => i.pinned).map(i => i.id)));
+// ============================================================================
+// Insights view — AI-synthesized highlights with stats bar, filters, and
+// click-to-expand source quotes.
+// ============================================================================
+const INSIGHT_CATEGORIES = [
+  { id: 'all', label: 'All' },
+  { id: 'open', label: 'Open' },
+  { id: 'in-progress', label: 'In progress' },
+  { id: 'completed', label: 'Completed' },
+  { id: 'abandoned', label: 'Abandoned' },
+  { id: 'pinned', label: 'Pinned' },
+  { id: 'high', label: 'High confidence' },
+  { id: 'progress', label: 'Progress' },
+  { id: 'theory', label: 'Theory' },
+  { id: 'literature', label: 'Literature' },
+  { id: 'action', label: 'Actions' },
+  { id: 'risk', label: 'Risks' },
+];
+const CATEGORY_TINT = {
+  progress: 'rgba(16, 185, 129, 0.12)',
+  theory: 'rgba(99, 102, 241, 0.12)',
+  literature: 'rgba(245, 158, 11, 0.12)',
+  action: 'rgba(59, 130, 246, 0.12)',
+  risk: 'rgba(220, 38, 38, 0.12)',
+};
+const CATEGORY_FG = {
+  progress: '#10B981',
+  theory: '#818CF8',
+  literature: '#F59E0B',
+  action: '#3B82F6',
+  risk: '#DC2626',
+};
+const confidenceTier = (c) => c >= 75 ? 'high' : c >= 60 ? 'med' : 'low';
+
+// Task statuses live on each individual bullet within an insight, not on the
+// whole card — Daniel's feedback: "each card is a discrete task, not a set of tasks".
+const TASK_STATUSES = [
+  { id: 'open', label: 'Open', color: 'var(--canvas-text-3)', icon: 'sparkles' },
+  { id: 'in-progress', label: 'In progress', color: '#3B82F6', icon: 'graph' },
+  { id: 'completed', label: 'Completed', color: '#10B981', icon: 'check' },
+  { id: 'abandoned', label: 'Abandoned', color: 'var(--canvas-text-4)', icon: 'x' },
+];
+const TASK_STATUS_KEY = 'canvas-task-status-v1';
+const taskKey = (insId, idx) => `${insId}::${idx}`;
+
+function InsightsView({ widgetStates, setWidgetStates, onNavigateToChat }) {
+  const [pinned, setPinned] = useState(() => new Set(INSIGHTS.filter(i => i.pinned).map(i => i.id)));
+  const [taskStatuses, setTaskStatuses] = useState(() => {
+    try { return JSON.parse(localStorage.getItem(TASK_STATUS_KEY) || '{}'); } catch { return {}; }
+  });
+  const [filter, setFilter] = useState('all');
+  const [sortBy, setSortBy] = useState('confidence');
+  const [expanded, setExpanded] = useState(new Set());
+  const [refreshing, setRefreshing] = useState(false);
+  const [openStatusMenu, setOpenStatusMenu] = useState(null);
+  // 'cards' = current cards-of-tasks layout, 'tasks' = flat task list per Daniel's
+  // "Sections in sidebar, Tasks in the main view" suggestion.
+  const [viewMode, setViewMode] = useState(() => localStorage.getItem('canvas-insights-view') || 'cards');
+  useEffect(() => { localStorage.setItem('canvas-insights-view', viewMode); }, [viewMode]);
+
+  useEffect(() => {
+    localStorage.setItem(TASK_STATUS_KEY, JSON.stringify(taskStatuses));
+  }, [taskStatuses]);
+
+  const taskStatusOf = (insId, idx) => taskStatuses[taskKey(insId, idx)] || 'open';
+  const setTaskStatus = (insId, idx, status) => {
+    setTaskStatuses(prev => ({ ...prev, [taskKey(insId, idx)]: status }));
+    const lbl = TASK_STATUSES.find(s => s.id === status)?.label || status;
+    window.dispatchEvent(new CustomEvent('canvas-toast', { detail: { msg: `Task marked ${lbl}`, kind: 'success' } }));
+  };
+
+  // Roll up to a card-level status: completed if all tasks done, abandoned if all abandoned,
+  // in-progress if any are in-progress, otherwise open.
+  const insightRollup = (ins) => {
+    const states = ins.bullets.map((_, idx) => taskStatusOf(ins.id, idx));
+    const total = states.length;
+    if (total === 0) return { state: 'open', done: 0, total: 0, pct: 0 };
+    const done = states.filter(s => s === 'completed').length;
+    const inProg = states.filter(s => s === 'in-progress').length;
+    const abandoned = states.filter(s => s === 'abandoned').length;
+    let state = 'open';
+    if (done === total) state = 'completed';
+    else if (abandoned === total) state = 'abandoned';
+    else if (inProg > 0 || done > 0) state = 'in-progress';
+    return { state, done, total, inProg, abandoned, pct: Math.round((done / total) * 100) };
+  };
+
   const togglePin = (id) => {
-    const n = new Set(pinned);
-    if (n.has(id)) n.delete(id); else n.add(id);
-    setPinned(n);
+    setPinned(prev => {
+      const n = new Set(prev);
+      if (n.has(id)) n.delete(id); else n.add(id);
+      return n;
+    });
+  };
+  const toggleExpand = (id) => {
+    setExpanded(prev => {
+      const n = new Set(prev);
+      if (n.has(id)) n.delete(id); else n.add(id);
+      return 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;
@@ -128,54 +225,404 @@ function InsightsView({ widgetStates, setWidgetStates }) {
     window.dispatchEvent(new CustomEvent('canvas-toast', { detail: { msg: 'Sent to Kanban (To Do)', kind: 'success' } }));
   };
 
+  // TODO(LLM): real refresh hits the orchestrator and re-synthesizes insights.
+  const handleRefresh = () => {
+    setRefreshing(true);
+    setTimeout(() => setRefreshing(false), 900);
+    window.dispatchEvent(new CustomEvent('canvas-toast', { detail: { msg: 'Refreshing insights… (stub)', kind: 'success' } }));
+  };
+
+  // "Ask follow-up": stash a draft prompt + insight context that the chat page
+  // can pick up on next navigation. Backend hookup TODO: include source-conversation IDs.
+  const askFollowUp = (ins) => {
+    const plain = (ins.bullets[0] || ins.summary || '').replace(/<[^>]+>/g, '');
+    const prompt = `Follow up on the insight "${ins.title}": ${plain}`;
+    try {
+      localStorage.setItem('canvas-chat-handoff', JSON.stringify({
+        at: Date.now(),
+        prompt,
+        insightId: ins.id,
+        insightTitle: ins.title,
+      }));
+    } catch { /* ignore */ }
+    window.dispatchEvent(new CustomEvent('canvas-toast', {
+      detail: { msg: `Follow-up drafted: "${ins.title}" — opening chat`, kind: 'success' },
+    }));
+    // Use the existing navigation prop if present; falls back to the global event.
+    if (onNavigateToChat) onNavigateToChat();
+  };
+
+  const filtered = useMemo(() => {
+    let r = INSIGHTS;
+    if (filter === 'pinned') r = r.filter(i => pinned.has(i.id));
+    else if (filter === 'high') r = r.filter(i => i.confidence >= 75);
+    else if (['open', 'in-progress', 'completed', 'abandoned'].includes(filter)) r = r.filter(i => insightRollup(i).state === filter);
+    else if (filter !== 'all') r = r.filter(i => i.category === filter);
+    if (sortBy === 'confidence') r = [...r].sort((a, b) => b.confidence - a.confidence);
+    if (sortBy === 'recent') r = [...r].sort((a, b) => (a.updatedMinutesAgo || 0) - (b.updatedMinutesAgo || 0));
+    if (sortBy === 'progress') r = [...r].sort((a, b) => insightRollup(b).pct - insightRollup(a).pct);
+    return r;
+  }, [filter, sortBy, pinned, taskStatuses]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Aggregate stats over individual TASKS, not insights (Daniel's framing)
+  const stats = useMemo(() => {
+    const allTasks = INSIGHTS.flatMap(i => i.bullets.map((_, idx) => taskStatusOf(i.id, idx)));
+    const taskTotal = allTasks.length;
+    const completed = allTasks.filter(s => s === 'completed').length;
+    const inProgress = allTasks.filter(s => s === 'in-progress').length;
+    const abandoned = allTasks.filter(s => s === 'abandoned').length;
+    const open = taskTotal - completed - inProgress - abandoned;
+    const totalSources = INSIGHTS.reduce((s, i) => s + (i.sources || 0), 0);
+    const avgConf = Math.round(INSIGHTS.reduce((s, i) => s + i.confidence, 0) / INSIGHTS.length);
+    return {
+      sections: INSIGHTS.length, taskTotal, completed, inProgress, abandoned, open,
+      totalSources, avgConf, pinnedCount: pinned.size,
+    };
+  }, [pinned, taskStatuses]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const lastUpdated = Math.min(...INSIGHTS.map(i => i.updatedMinutesAgo || 0));
+
+  // Empty state — defensive (current data is hardcoded but a real backend could send [])
+  if (INSIGHTS.length === 0) {
+    return (
+      <>
+        <div className="page-header">
+          <div>
+            <h1 className="page-title">Insights</h1>
+            <div className="page-sub">AI-synthesized from your research conversations.</div>
+          </div>
+        </div>
+        <div className="empty-cell">
+          <Icon name="sparkles" size={32} style={{ color: 'var(--canvas-text-4)' }}/>
+          <div style={{ fontSize: 14, color: 'var(--canvas-text-2)', fontWeight: 500 }}>No insights yet</div>
+          <div>Have a conversation with your advisors and insights will appear here.</div>
+        </div>
+      </>
+    );
+  }
+
   return (
     <>
       <div className="page-header">
         <div>
           <h1 className="page-title">Insights</h1>
-          <div className="page-sub">AI-synthesized from your research conversations · {INSIGHTS.length} sections</div>
+          <div className="page-sub">AI-synthesized from your research conversations.</div>
         </div>
-        <div className="page-meta">
-          <span className="dot"/>
-          <span>updated 3 min ago</span>
-          <button className="icon-btn" title="Refresh"><Icon name="refresh" size={14}/></button>
+      </div>
+
+      {/* Stats bar */}
+      <div className="insights-stats">
+        <div className="insights-stat">
+          <span className="insights-stat-value">{stats.completed}/{stats.taskTotal}</span>
+          <span className="insights-stat-label">tasks done</span>
         </div>
+        <div className="insights-stat insights-stat-progress">
+          <div className="insights-progress-bar">
+            <i className="ip-completed" style={{ width: `${(stats.completed / Math.max(1, stats.taskTotal)) * 100}%` }}/>
+            <i className="ip-inprogress" style={{ width: `${(stats.inProgress / Math.max(1, stats.taskTotal)) * 100}%` }}/>
+            <i className="ip-abandoned" style={{ width: `${(stats.abandoned / Math.max(1, stats.taskTotal)) * 100}%` }}/>
+          </div>
+          <span className="insights-stat-label">
+            {stats.completed} done · {stats.inProgress} in progress · {stats.open} open
+            {stats.abandoned > 0 && ` · ${stats.abandoned} abandoned`}
+          </span>
+        </div>
+        <div className="insights-stat">
+          <span className="insights-stat-value">{stats.sections}</span>
+          <span className="insights-stat-label">sections</span>
+        </div>
+        <div className="insights-stat">
+          <span className="insights-stat-value">{stats.avgConf}%</span>
+          <span className="insights-stat-label">avg confidence</span>
+        </div>
+        <span style={{ flex: 1 }}/>
+        <span className="insights-stat-update">
+          <span className="dot"/>
+          updated {lastUpdated} min ago
+        </span>
+        <button className="btn btn-ghost" onClick={handleRefresh} disabled={refreshing}>
+          {refreshing ? <div className="spinner"/> : <Icon name="refresh" size={13}/>}
+          Refresh
+        </button>
       </div>
-      <div className="insight-grid">
-        {INSIGHTS.map(ins => (
-          <div key={ins.id} className="insight">
-            <div className="insight-head">
-              <div className="insight-icon"><Icon name={ins.icon} size={15}/></div>
-              <div className="insight-title">{ins.title}</div>
-              <div className="confidence">
-                <div className="conf-bar"><i style={{ width: ins.confidence + '%' }}/></div>
-                <span>{ins.confidence}%</span>
-              </div>
-            </div>
-            <div className="insight-body">
-              <div>{ins.summary}</div>
-              <ul>
-                {ins.bullets.map((b, i) => <li key={i} dangerouslySetInnerHTML={{ __html: b }}/>)}
-              </ul>
-            </div>
-            <div className="insight-actions">
-              {/* 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'}
+
+      {/* View toggle: Cards (sections with their tasks) vs Tasks (flat list) */}
+      <div className="insights-view-toggle">
+        <button className={viewMode === 'cards' ? 'active' : ''} onClick={() => setViewMode('cards')}>
+          <Icon name="layout" size={12}/>Cards
+        </button>
+        <button className={viewMode === 'tasks' ? 'active' : ''} onClick={() => setViewMode('tasks')}>
+          <Icon name="task" size={12}/>Tasks
+        </button>
+      </div>
+
+      {/* Filter + sort */}
+      <div className="insights-filters">
+        <div className="palette-cats" style={{ marginBottom: 0 }}>
+          {INSIGHT_CATEGORIES.map(c => {
+            const count =
+              c.id === 'all' ? INSIGHTS.length :
+              c.id === 'pinned' ? pinned.size :
+              c.id === 'high' ? INSIGHTS.filter(i => i.confidence >= 75).length :
+              ['open', 'in-progress', 'completed', 'abandoned'].includes(c.id) ? INSIGHTS.filter(i => insightRollup(i).state === c.id).length :
+              INSIGHTS.filter(i => i.category === c.id).length;
+            if (count === 0 && c.id !== 'all') return null;
+            return (
+              <button key={c.id}
+                className={`palette-cat ${filter === c.id ? 'active' : ''}`}
+                onClick={() => setFilter(c.id)}>
+                {c.label}<span style={{ marginLeft: 6, opacity: 0.6 }}>{count}</span>
               </button>
+            );
+          })}
+        </div>
+        <select className="select" style={{ width: 'auto', padding: '4px 8px', fontSize: 11, fontFamily: 'var(--canvas-mono)' }}
+          value={sortBy} onChange={e => setSortBy(e.target.value)}>
+          <option value="confidence">↓ confidence</option>
+          <option value="recent">↓ recent</option>
+          <option value="progress">↓ progress</option>
+        </select>
+      </div>
+
+      {/* Pinned strip — only when there are pins and we're not already filtering by pinned */}
+      {pinned.size > 0 && filter !== 'pinned' && (
+        <div className="insights-pinned-strip">
+          <span style={{ fontSize: 11, color: 'var(--canvas-text-4)', textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 600 }}>
+            Pinned
+          </span>
+          {INSIGHTS.filter(i => pinned.has(i.id)).map(ins => (
+            <button key={ins.id} className="insights-pinned-pill" onClick={() => {
+              const el = document.getElementById(`insight-${ins.id}`);
+              if (el) {
+                el.scrollIntoView({ block: 'center', behavior: 'smooth' });
+                el.style.boxShadow = '0 0 0 2px var(--canvas-accent), 0 0 24px var(--canvas-accent-glow)';
+                setTimeout(() => { el.style.boxShadow = ''; }, 1400);
+              }
+            }}>
+              <Icon name={ins.icon} size={11}/>{ins.title}
+            </button>
+          ))}
+        </div>
+      )}
+
+      {/* TASKS view — flat list of every bullet across insights */}
+      {viewMode === 'tasks' && (() => {
+        const allTasks = filtered.flatMap(ins => ins.bullets.map((b, idx) => ({
+          ins, idx, text: b, status: taskStatusOf(ins.id, idx),
+        })));
+        const statusOrder = { open: 0, 'in-progress': 1, completed: 2, abandoned: 3 };
+        const sorted = [...allTasks].sort((a, b) => statusOrder[a.status] - statusOrder[b.status]);
+        if (sorted.length === 0) {
+          return (
+            <div className="empty-cell">
+              <Icon name="task" size={28} style={{ color: 'var(--canvas-text-4)' }}/>
+              <div style={{ fontSize: 14, color: 'var(--canvas-text-2)', fontWeight: 500 }}>No tasks match this filter</div>
+              <button className="btn btn-ghost" onClick={() => setFilter('all')}>Show all</button>
             </div>
+          );
+        }
+        return (
+          <div className="insights-tasks-list">
+            {sorted.map(({ ins, idx, text, status }) => {
+              const meta = TASK_STATUSES.find(s => s.id === status);
+              const menuKey = `tv::${ins.id}::${idx}`;
+              const menuOpen = openStatusMenu === menuKey;
+              return (
+                <div key={menuKey} className={`insights-task-row task-${status}`}>
+                  <button
+                    className="insight-task-check"
+                    style={{ color: meta.color, borderColor: meta.color + '60' }}
+                    onClick={() => setOpenStatusMenu(menuOpen ? null : menuKey)}
+                    title={`Status: ${meta.label}`}
+                  >
+                    {status === 'completed' && <Icon name="check" size={11}/>}
+                    {status === 'in-progress' && <span className="task-check-dot"/>}
+                    {status === 'abandoned' && <Icon name="x" size={10}/>}
+                  </button>
+                  <div className="insights-task-body">
+                    <button
+                      className="insights-task-section"
+                      onClick={() => {
+                        setViewMode('cards');
+                        setTimeout(() => {
+                          const el = document.getElementById(`insight-${ins.id}`);
+                          if (el) el.scrollIntoView({ block: 'center', behavior: 'smooth' });
+                        }, 60);
+                      }}
+                      title="Jump to this section"
+                    >
+                      <Icon name={ins.icon} size={10}/>{ins.title}
+                    </button>
+                    <span className="insights-task-text" dangerouslySetInnerHTML={{ __html: text }}/>
+                  </div>
+                  <button className="chip" onClick={() => sendToKanban(ins)} title="Send this section's open tasks to Kanban">
+                    <Icon name="task" size={11}/>Kanban
+                  </button>
+                  {menuOpen && (
+                    <div className="insight-status-menu" onMouseLeave={() => setOpenStatusMenu(null)}>
+                      {TASK_STATUSES.map(s => (
+                        <button key={s.id}
+                          className={status === s.id ? 'active' : ''}
+                          onClick={() => { setTaskStatus(ins.id, idx, s.id); setOpenStatusMenu(null); }}>
+                          <Icon name={s.icon} size={11} style={{ color: s.color }}/>
+                          {s.label}
+                        </button>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              );
+            })}
           </div>
-        ))}
-      </div>
+        );
+      })()}
+
+      {/* CARDS view (default) */}
+      {viewMode === 'cards' && (filtered.length === 0 ? (
+        <div className="empty-cell">
+          <Icon name="search" size={28} style={{ color: 'var(--canvas-text-4)' }}/>
+          <div style={{ fontSize: 14, color: 'var(--canvas-text-2)', fontWeight: 500 }}>No insights match this filter</div>
+          <button className="btn btn-ghost" onClick={() => setFilter('all')}>Show all</button>
+        </div>
+      ) : (
+        <div className="insight-grid">
+          {filtered.map(ins => {
+            const isExpanded = expanded.has(ins.id);
+            const isPinned = pinned.has(ins.id);
+            const tier = confidenceTier(ins.confidence);
+            const tint = CATEGORY_TINT[ins.category] || 'var(--canvas-surface-2)';
+            const fg = CATEGORY_FG[ins.category] || 'var(--canvas-accent)';
+            const rollup = insightRollup(ins);
+            return (
+              <div
+                key={ins.id}
+                id={`insight-${ins.id}`}
+                className={`insight ${isPinned ? 'is-pinned' : ''} tier-${tier} status-${rollup.state}`}
+              >
+                <div className="insight-head">
+                  <div className="insight-icon" style={{ background: tint, color: fg }}>
+                    <Icon name={ins.icon} size={16}/>
+                  </div>
+                  <div className="insight-title">{ins.title}</div>
+                  <ConfidenceRing value={ins.confidence}/>
+                </div>
+
+                {/* Per-card progress (rolls up the bullet tasks) */}
+                {rollup.total > 0 && (
+                  <div className="insight-progress">
+                    <div className="insight-progress-meta">
+                      <span className="insight-progress-count">{rollup.done}/{rollup.total} tasks</span>
+                      {rollup.state === 'completed' && <span className="insight-progress-badge done">✓ Resolved</span>}
+                      {rollup.state === 'abandoned' && <span className="insight-progress-badge abandoned">Abandoned</span>}
+                      {rollup.state === 'in-progress' && <span className="insight-progress-badge inprog">In progress</span>}
+                    </div>
+                    <div className="insight-progress-bar">
+                      <i className="ip-completed" style={{ width: `${(rollup.done / rollup.total) * 100}%` }}/>
+                      {rollup.inProg > 0 && <i className="ip-inprogress" style={{ width: `${(rollup.inProg / rollup.total) * 100}%` }}/>}
+                      {rollup.abandoned > 0 && <i className="ip-abandoned" style={{ width: `${(rollup.abandoned / rollup.total) * 100}%` }}/>}
+                    </div>
+                  </div>
+                )}
+
+                <div className="insight-body">
+                  <div>{ins.summary}</div>
+                  <ul className="insight-tasks">
+                    {ins.bullets.map((b, idx) => {
+                      const status = taskStatusOf(ins.id, idx);
+                      const meta = TASK_STATUSES.find(s => s.id === status);
+                      const menuOpen = openStatusMenu === `${ins.id}::${idx}`;
+                      return (
+                        <li key={idx} className={`insight-task task-${status}`}>
+                          <button
+                            className="insight-task-check"
+                            style={{ color: meta.color, borderColor: meta.color + '60' }}
+                            onClick={() => setOpenStatusMenu(menuOpen ? null : `${ins.id}::${idx}`)}
+                            title={`Status: ${meta.label}`}
+                          >
+                            {status === 'completed' && <Icon name="check" size={10}/>}
+                            {status === 'in-progress' && <span className="task-check-dot"/>}
+                            {status === 'abandoned' && <Icon name="x" size={9}/>}
+                          </button>
+                          <span className="insight-task-text" dangerouslySetInnerHTML={{ __html: b }}/>
+                          {menuOpen && (
+                            <div className="insight-status-menu" onMouseLeave={() => setOpenStatusMenu(null)}>
+                              {TASK_STATUSES.map(s => (
+                                <button key={s.id}
+                                  className={status === s.id ? 'active' : ''}
+                                  onClick={() => { setTaskStatus(ins.id, idx, s.id); setOpenStatusMenu(null); }}>
+                                  <Icon name={s.icon} size={11} style={{ color: s.color }}/>
+                                  {s.label}
+                                </button>
+                              ))}
+                            </div>
+                          )}
+                        </li>
+                      );
+                    })}
+                  </ul>
+                </div>
+
+                {/* Detail panel — quotes from sources, only when expanded */}
+                {isExpanded && ins.quotes && (
+                  <div className="insight-detail">
+                    <div className="insight-detail-head">Source quotes · {ins.sources} {ins.sources === 1 ? 'source' : 'sources'}</div>
+                    {ins.quotes.map((q, i) => (
+                      <div key={i} className="insight-quote">{q}</div>
+                    ))}
+                  </div>
+                )}
+
+                <div className="insight-foot">
+                  <span className="insight-foot-meta">
+                    <Icon name="message" size={10}/> {ins.sources}
+                    <span className="insight-dot"/>
+                    updated {ins.updatedMinutesAgo}m ago
+                  </span>
+                </div>
+
+                <div className="insight-actions">
+                  <button className="chip" onClick={() => askFollowUp(ins)} title="Open this insight in a new chat session">
+                    <Icon name="message" size={11}/>Ask follow-up
+                  </button>
+                  <button className="chip" onClick={() => sendToKanban(ins)} title="Add all open tasks from this insight to your Kanban (To Do)">
+                    <Icon name="task" size={11}/>Add to Kanban
+                  </button>
+                  <button className="chip" onClick={() => toggleExpand(ins.id)}>
+                    <Icon name="expand" size={11}/>{isExpanded ? 'Collapse' : 'Source quotes'}
+                  </button>
+                  <button className={`chip ${isPinned ? 'pinned' : ''}`} onClick={() => togglePin(ins.id)}>
+                    <Icon name="pin" size={11}/>{isPinned ? 'Pinned' : 'Pin'}
+                  </button>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      ))}
     </>
   );
 }
 
+// Small SVG ring used for the confidence indicator
+function ConfidenceRing({ value }) {
+  const r = 14;
+  const c = 2 * Math.PI * r;
+  const dash = c * (1 - value / 100);
+  const tier = confidenceTier(value);
+  const color = tier === 'high' ? '#10B981' : tier === 'med' ? '#F59E0B' : '#DC2626';
+  return (
+    <div className={`confidence-ring tier-${tier}`} title={`${value}% confidence (${tier})`}>
+      <svg width="32" height="32" viewBox="0 0 32 32">
+        <circle cx="16" cy="16" r={r} fill="none" stroke="var(--canvas-surface-3)" strokeWidth="3"/>
+        <circle cx="16" cy="16" r={r} fill="none" stroke={color} strokeWidth="3"
+          strokeDasharray={c} strokeDashoffset={dash} strokeLinecap="round"
+          transform="rotate(-90 16 16)"/>
+      </svg>
+      <span style={{ color }}>{value}</span>
+    </div>
+  );
+}
+
 function PresetPicker({ onPick }) {
   return (
     <div className="canvas-presets">
@@ -432,6 +879,13 @@ const CanvasPage = ({ user, authToken, onNavigateToHome, onNavigateToChat, onSig
     openModal('global-search', { states: widgetStates });
   }, [openModal, widgetStates]);
 
+  // Critic widgets dispatch `canvas-open-in-chat` when the user wants real LLM history.
+  useEffect(() => {
+    const handler = () => onNavigateToChat && onNavigateToChat();
+    window.addEventListener('canvas-open-in-chat', handler);
+    return () => window.removeEventListener('canvas-open-in-chat', handler);
+  }, [onNavigateToChat]);
+
   // Esc closes modal, ⌘K opens command palette, ⌘/ opens global content search,
   // ? opens the welcome tour for help (matches the icon in the topbar).
   useEffect(() => {
@@ -484,6 +938,26 @@ const CanvasPage = ({ user, authToken, onNavigateToHome, onNavigateToChat, onSig
     return order.map(c => groups[c]).filter(Boolean);
   }, [layout]);
 
+  // Insights: list of sections — Daniel's feedback said sidebar should show sections here
+  const insightSections = useMemo(() => {
+    let taskMap = {};
+    try { taskMap = JSON.parse(localStorage.getItem(TASK_STATUS_KEY) || '{}'); } catch { /* ignore */ }
+    return INSIGHTS.map(ins => {
+      const states = ins.bullets.map((_, idx) => taskMap[taskKey(ins.id, idx)] || 'open');
+      const done = states.filter(s => s === 'completed').length;
+      return {
+        id: ins.id,
+        name: ins.title,
+        icon: ins.icon,
+        category: ins.category,
+        confidence: ins.confidence,
+        taskCount: ins.bullets.length,
+        doneCount: done,
+        onClick: () => flashScrollTo(`#insight-${ins.id}`),
+      };
+    });
+  }, [view, layout, widgetStates]); // eslint-disable-line react-hooks/exhaustive-deps
+
   // Deliverables: list of projects with sections + history actions
   const deliverableProjects = useMemo(() => {
     try {
@@ -538,6 +1012,7 @@ const CanvasPage = ({ user, authToken, onNavigateToHome, onNavigateToChat, onSig
         canvasSubview={view}
         widgetGroups={widgetGroups}
         deliverableProjects={deliverableProjects}
+        insightSections={insightSections}
       />
       <div className={`canvas-main-area ${isSidebarCollapsed ? 'sidebar-collapsed' : ''}`}>
         <div className="canvas-app-shell">
@@ -551,15 +1026,15 @@ 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={openGlobalSearch} title="Search canvas content (⌘/)">
+            <button className="icon-btn" onClick={openGlobalSearch} title={`Search canvas content (${MOD}+/)`}>
               <Icon name="search" size={16}/>
             </button>
-            <button className="icon-btn" onClick={openCommandPalette} title="Commands (⌘K)">
+            <button className="icon-btn" onClick={openCommandPalette} title={`Commands (${MOD}+K)`}>
               <Icon name="zap" size={16}/>
             </button>
           </AppHeader>
           <div className="canvas-content">
-            {view === 'insights' && <InsightsView widgetStates={widgetStates} setWidgetStates={setWidgetStates}/>}
+            {view === 'insights' && <InsightsView widgetStates={widgetStates} setWidgetStates={setWidgetStates} onNavigateToChat={onNavigateToChat}/>}
             {view === 'workspace' && <WorkspaceView openModal={openModal} layout={layout} setLayout={setLayout} widgetStates={widgetStates} setWidgetStates={setWidgetStates}/>}
             {view === 'deliverables' && <DeliverablesView allStates={widgetStates}/>}
           </div>
@@ -587,8 +1062,8 @@ function ShortcutHint() {
       onMouseEnter={() => setVisible(true)}
       onMouseLeave={() => setVisible(false)}
     >
-      <span><kbd>⌘</kbd><kbd>K</kbd> commands</span>
-      <span><kbd>⌘</kbd><kbd>/</kbd> search</span>
+      <span><kbd>{MOD}</kbd><kbd>K</kbd> commands</span>
+      <span><kbd>{MOD}</kbd><kbd>/</kbd> search</span>
       <span><kbd>?</kbd> help</span>
     </div>
   );

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

@@ -398,6 +398,483 @@
   box-shadow: 0 0 8px var(--canvas-ok);
 }
 
+/* ----- Insights view ----- */
+.canvas-page-with-sidebar .insights-stats {
+  display: flex;
+  gap: 18px;
+  align-items: center;
+  padding: 14px 18px;
+  background: var(--canvas-surface);
+  border: 1px solid var(--canvas-border);
+  border-radius: 10px;
+  margin-bottom: 14px;
+  flex-wrap: wrap;
+}
+.canvas-page-with-sidebar[data-canvas-theme="light"] .insights-stats {
+  background: #ffffff;
+  border-color: rgba(15, 15, 15, 0.06);
+}
+.canvas-page-with-sidebar .insights-stat {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 1px;
+  min-width: 70px;
+}
+.canvas-page-with-sidebar .insights-stat-value {
+  font-family: var(--canvas-mono);
+  font-size: 22px;
+  font-weight: 700;
+  color: var(--canvas-text);
+  letter-spacing: -0.02em;
+  line-height: 1;
+}
+.canvas-page-with-sidebar .insights-stat-label {
+  font-size: 11px;
+  color: var(--canvas-text-3);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  font-weight: 500;
+}
+.canvas-page-with-sidebar .insights-stat-update {
+  font-size: 11px;
+  color: var(--canvas-text-3);
+  font-family: var(--canvas-mono);
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.canvas-page-with-sidebar .insights-filters {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  margin-bottom: 14px;
+  flex-wrap: wrap;
+}
+
+.canvas-page-with-sidebar .insights-pinned-strip {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 14px;
+  margin-bottom: 14px;
+  background: var(--canvas-accent-glow);
+  border: 1px solid rgba(99, 102, 241, 0.18);
+  border-radius: 8px;
+  flex-wrap: wrap;
+}
+.canvas-page-with-sidebar .insights-pinned-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 4px 10px;
+  background: var(--canvas-surface);
+  border: 1px solid var(--canvas-border);
+  border-radius: 999px;
+  font-family: inherit;
+  font-size: 12px;
+  color: var(--canvas-text);
+  cursor: pointer;
+  transition: all .12s;
+}
+.canvas-page-with-sidebar .insights-pinned-pill:hover {
+  border-color: var(--canvas-accent);
+  color: var(--canvas-accent);
+}
+
+/* Cards vs Tasks view toggle on the Insights view */
+.canvas-page-with-sidebar .insights-view-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  margin-bottom: 12px;
+  background: var(--canvas-surface);
+  border: 1px solid var(--canvas-border);
+  border-radius: 7px;
+  padding: 3px;
+}
+.canvas-page-with-sidebar .insights-view-toggle button {
+  background: transparent;
+  border: none;
+  padding: 5px 12px;
+  border-radius: 5px;
+  font-family: inherit;
+  font-size: 12px;
+  color: var(--canvas-text-3);
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  cursor: pointer;
+  transition: background .12s, color .12s;
+}
+.canvas-page-with-sidebar .insights-view-toggle button:hover { color: var(--canvas-text); }
+.canvas-page-with-sidebar .insights-view-toggle button.active {
+  background: var(--canvas-surface-3);
+  color: var(--canvas-text);
+  box-shadow: inset 0 0 0 1px var(--canvas-border-2);
+}
+
+/* Flat task list view */
+.canvas-page-with-sidebar .insights-tasks-list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.canvas-page-with-sidebar .insights-task-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  padding: 10px 12px;
+  background: var(--canvas-surface);
+  border: 1px solid var(--canvas-border);
+  border-radius: 7px;
+  position: relative;
+  transition: background .12s, border-color .12s;
+}
+.canvas-page-with-sidebar .insights-task-row:hover {
+  border-color: var(--canvas-border-2);
+}
+.canvas-page-with-sidebar .insights-task-row.task-completed { opacity: 0.7; }
+.canvas-page-with-sidebar .insights-task-row.task-abandoned { opacity: 0.5; }
+.canvas-page-with-sidebar .insights-task-row.task-completed:hover,
+.canvas-page-with-sidebar .insights-task-row.task-abandoned:hover { opacity: 0.95; }
+.canvas-page-with-sidebar .insights-task-row .insight-task-check { margin-top: 4px; }
+.canvas-page-with-sidebar .insights-task-body {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.canvas-page-with-sidebar .insights-task-section {
+  background: transparent;
+  border: none;
+  color: var(--canvas-text-3);
+  font-family: var(--canvas-mono);
+  font-size: 10.5px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  padding: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  cursor: pointer;
+  align-self: flex-start;
+}
+.canvas-page-with-sidebar .insights-task-section:hover { color: var(--canvas-accent); }
+.canvas-page-with-sidebar .insights-task-text {
+  font-size: 13px;
+  color: var(--canvas-text);
+  line-height: 1.5;
+}
+.canvas-page-with-sidebar .insights-task-row.task-completed .insights-task-text,
+.canvas-page-with-sidebar .insights-task-row.task-abandoned .insights-task-text {
+  text-decoration: line-through;
+  color: var(--canvas-text-3);
+}
+.canvas-page-with-sidebar .insights-task-text strong { color: var(--canvas-text); }
+
+/* Per-card progress bar — replaces the old single status pill */
+.canvas-page-with-sidebar .insight-progress {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 0 0 4px;
+}
+.canvas-page-with-sidebar .insight-progress-meta {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-family: var(--canvas-mono);
+  font-size: 10.5px;
+  color: var(--canvas-text-3);
+}
+.canvas-page-with-sidebar .insight-progress-count { font-weight: 600; }
+.canvas-page-with-sidebar .insight-progress-badge {
+  font-family: var(--canvas-mono);
+  font-size: 9px;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  font-weight: 700;
+  padding: 1px 6px;
+  border-radius: 3px;
+}
+.canvas-page-with-sidebar .insight-progress-badge.done { background: rgba(16,185,129,0.15); color: #10B981; }
+.canvas-page-with-sidebar .insight-progress-badge.inprog { background: rgba(59,130,246,0.15); color: #3B82F6; }
+.canvas-page-with-sidebar .insight-progress-badge.abandoned { background: var(--canvas-surface-2); color: var(--canvas-text-4); }
+
+.canvas-page-with-sidebar .insight-progress-bar {
+  height: 5px;
+  background: var(--canvas-surface-2);
+  border-radius: 3px;
+  overflow: hidden;
+  display: flex;
+}
+.canvas-page-with-sidebar .insight-progress-bar > i {
+  display: block;
+  height: 100%;
+  transition: width .25s;
+}
+.canvas-page-with-sidebar .insight-progress-bar .ip-completed { background: #10B981; }
+.canvas-page-with-sidebar .insight-progress-bar .ip-inprogress { background: #3B82F6; }
+.canvas-page-with-sidebar .insight-progress-bar .ip-abandoned  { background: var(--canvas-text-4); }
+
+/* Per-bullet tasks inside the body */
+.canvas-page-with-sidebar .insight-tasks {
+  list-style: none;
+  padding: 0;
+  margin: 6px 0 0;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.canvas-page-with-sidebar .insight-task {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 2px 0;
+  font-size: 13px;
+  color: var(--canvas-text-2);
+  line-height: 1.5;
+  position: relative;
+}
+.canvas-page-with-sidebar .insight-task.task-completed .insight-task-text {
+  text-decoration: line-through;
+  color: var(--canvas-text-3);
+  opacity: 0.7;
+}
+.canvas-page-with-sidebar .insight-task.task-abandoned .insight-task-text {
+  text-decoration: line-through;
+  color: var(--canvas-text-4);
+  opacity: 0.5;
+}
+.canvas-page-with-sidebar .insight-task.task-in-progress .insight-task-text {
+  color: var(--canvas-text);
+  font-weight: 500;
+}
+.canvas-page-with-sidebar .insight-task-text { flex: 1; }
+.canvas-page-with-sidebar .insight-task-text strong { color: var(--canvas-text); }
+.canvas-page-with-sidebar .insight-task-check {
+  flex-shrink: 0;
+  width: 18px;
+  height: 18px;
+  border-radius: 4px;
+  border: 1.5px solid currentColor;
+  background: transparent;
+  cursor: pointer;
+  display: grid;
+  place-items: center;
+  margin-top: 2px;
+  transition: background .12s;
+}
+.canvas-page-with-sidebar .insight-task-check:hover {
+  background: var(--canvas-surface-2);
+}
+.canvas-page-with-sidebar .insight-task.task-completed .insight-task-check {
+  background: #10B981;
+  color: #fff;
+}
+.canvas-page-with-sidebar .insight-task.task-abandoned .insight-task-check {
+  background: var(--canvas-text-4);
+  color: #fff;
+}
+.canvas-page-with-sidebar .task-check-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: currentColor;
+}
+
+/* Sidebar row for a fully-done section gets struck through */
+.sidebar .csm-row-done .csm-row-label {
+  text-decoration: line-through;
+  color: var(--text-tertiary, #9CA3AF);
+}
+.sidebar .csm-row-done .csm-row-meta {
+  color: #10B981;
+  font-weight: 600;
+}
+
+/* Insight status pill + menu */
+.canvas-page-with-sidebar .insight-status-wrap {
+  position: relative;
+}
+.canvas-page-with-sidebar .insight-status-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 3px 9px;
+  border-radius: 999px;
+  border: 1px solid transparent;
+  background: transparent;
+  font-family: inherit;
+  font-size: 10.5px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  cursor: pointer;
+  transition: background .12s;
+}
+.canvas-page-with-sidebar .insight-status-pill:hover {
+  background: var(--canvas-surface-2);
+}
+.canvas-page-with-sidebar .insight-status-menu {
+  position: absolute;
+  top: calc(100% + 4px);
+  right: 0;
+  z-index: 5;
+  background: var(--canvas-surface);
+  border: 1px solid var(--canvas-border-2);
+  border-radius: 7px;
+  box-shadow: var(--canvas-shadow-lg);
+  padding: 4px;
+  min-width: 150px;
+  display: flex;
+  flex-direction: column;
+}
+.canvas-page-with-sidebar .insight-status-menu button {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: transparent;
+  border: none;
+  padding: 6px 10px;
+  border-radius: 4px;
+  font-family: inherit;
+  font-size: 12px;
+  color: var(--canvas-text);
+  cursor: pointer;
+  text-align: left;
+}
+.canvas-page-with-sidebar .insight-status-menu button:hover {
+  background: var(--canvas-surface-2);
+}
+.canvas-page-with-sidebar .insight-status-menu button.active {
+  background: var(--canvas-accent-glow);
+  color: var(--canvas-accent);
+  font-weight: 600;
+}
+
+/* Card-level status mutes the body when completed/abandoned */
+.canvas-page-with-sidebar .insight.status-completed .insight-body,
+.canvas-page-with-sidebar .insight.status-completed .insight-foot {
+  opacity: 0.65;
+}
+.canvas-page-with-sidebar .insight.status-abandoned {
+  opacity: 0.5;
+}
+.canvas-page-with-sidebar .insight.status-abandoned:hover { opacity: 0.85; }
+
+/* Progress bar in stats — segmented for status mix */
+.canvas-page-with-sidebar .insights-stat-progress {
+  flex: 1;
+  min-width: 180px;
+  max-width: 280px;
+  gap: 4px;
+}
+.canvas-page-with-sidebar .insights-progress-bar {
+  height: 6px;
+  width: 100%;
+  background: var(--canvas-surface-2);
+  border-radius: 3px;
+  overflow: hidden;
+  display: flex;
+}
+.canvas-page-with-sidebar .insights-progress-bar > i {
+  display: block;
+  height: 100%;
+  transition: width .3s;
+}
+.canvas-page-with-sidebar .insights-progress-bar .ip-completed { background: #10B981; }
+.canvas-page-with-sidebar .insights-progress-bar .ip-inprogress { background: #3B82F6; }
+.canvas-page-with-sidebar .insights-progress-bar .ip-abandoned  { background: var(--canvas-text-4); }
+
+/* Confidence ring */
+.canvas-page-with-sidebar .confidence-ring {
+  position: relative;
+  width: 32px;
+  height: 32px;
+  display: grid;
+  place-items: center;
+  flex-shrink: 0;
+}
+.canvas-page-with-sidebar .confidence-ring span {
+  position: absolute;
+  font-family: var(--canvas-mono);
+  font-size: 9.5px;
+  font-weight: 700;
+}
+
+/* Insight card refinements */
+.canvas-page-with-sidebar .insight {
+  transition: border-color .15s, transform .15s, box-shadow .15s;
+}
+.canvas-page-with-sidebar .insight:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
+}
+.canvas-page-with-sidebar .insight.is-pinned {
+  border-color: var(--canvas-accent);
+  background: var(--canvas-surface);
+  box-shadow: 0 0 0 1px var(--canvas-accent-glow);
+}
+.canvas-page-with-sidebar[data-canvas-theme="light"] .insight.is-pinned {
+  background: #ffffff;
+}
+
+/* Insight footer (source count + updated time) */
+.canvas-page-with-sidebar .insight-foot {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 6px 0 0;
+  font-size: 11px;
+  color: var(--canvas-text-3);
+}
+.canvas-page-with-sidebar .insight-foot-meta {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-family: var(--canvas-mono);
+}
+.canvas-page-with-sidebar .insight-dot {
+  width: 3px;
+  height: 3px;
+  border-radius: 50%;
+  background: var(--canvas-text-4);
+}
+
+/* Expanded source-quotes panel */
+.canvas-page-with-sidebar .insight-detail {
+  margin-top: 8px;
+  padding: 10px 12px;
+  background: var(--canvas-bg-2);
+  border-left: 2px solid var(--canvas-accent);
+  border-radius: 0 6px 6px 0;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  animation: canvas-view-in 180ms var(--canvas-ease);
+}
+.canvas-page-with-sidebar[data-canvas-theme="light"] .insight-detail {
+  background: rgba(99, 102, 241, 0.04);
+}
+.canvas-page-with-sidebar .insight-detail-head {
+  font-size: 10.5px;
+  font-family: var(--canvas-mono);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--canvas-accent);
+  font-weight: 600;
+}
+.canvas-page-with-sidebar .insight-quote {
+  font-size: 12.5px;
+  color: var(--canvas-text-2);
+  line-height: 1.5;
+  font-style: italic;
+}
+
 /* Insights */
 .canvas-page-with-sidebar .insight-grid {
   display: grid;
@@ -590,6 +1067,10 @@
   background: rgba(16, 185, 129, 0.15);
   color: #10B981;
 }
+.canvas-modal-backdrop .widget-tag-chat {
+  background: rgba(59, 130, 246, 0.15);
+  color: #3B82F6;
+}
 .canvas-page-with-sidebar .widget-actions { display: flex; gap: 1px; opacity: 0; transition: opacity .12s; }
 .canvas-page-with-sidebar .widget:hover .widget-actions { opacity: 1; }
 .canvas-page-with-sidebar .widget-actions .icon-btn { width: 24px; height: 24px; }
@@ -2454,6 +2935,87 @@ body[data-canvas-theme="light"] .canvas-modal-backdrop .critic-meter .bar { back
   background: rgba(0, 0, 0, 0.04);
 }
 
+/* PhD Journey milestone rows */
+.canvas-page-with-sidebar .phd-milestone {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  padding: 8px 4px;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background .12s;
+}
+.canvas-page-with-sidebar .phd-milestone:hover { background: var(--canvas-surface-2); }
+.canvas-page-with-sidebar .phd-milestone-check {
+  flex-shrink: 0;
+  width: 18px;
+  height: 18px;
+  border-radius: 4px;
+  border: 1.5px solid var(--canvas-text-4);
+  background: transparent;
+  cursor: pointer;
+  display: grid;
+  place-items: center;
+  margin-top: 2px;
+  color: #fff;
+  transition: background .12s, border-color .12s;
+}
+.canvas-page-with-sidebar .phd-milestone.milestone-in-progress .phd-milestone-check {
+  background: #3B82F6;
+  border-color: #3B82F6;
+}
+.canvas-page-with-sidebar .phd-milestone.milestone-completed .phd-milestone-check {
+  background: #10B981;
+  border-color: #10B981;
+}
+.canvas-page-with-sidebar .phd-milestone-body { flex: 1; min-width: 0; }
+.canvas-page-with-sidebar .phd-milestone-label {
+  font-size: 13px;
+  color: var(--canvas-text);
+  font-weight: 500;
+  line-height: 1.4;
+}
+.canvas-page-with-sidebar .phd-milestone.milestone-completed .phd-milestone-label {
+  text-decoration: line-through;
+  color: var(--canvas-text-3);
+}
+.canvas-page-with-sidebar .phd-milestone-hint {
+  font-size: 11.5px;
+  color: var(--canvas-text-4);
+  font-style: italic;
+  margin-top: 2px;
+}
+.canvas-page-with-sidebar .phd-milestone-note {
+  font-size: 11.5px;
+  color: var(--canvas-text-2);
+  margin-top: 2px;
+}
+
+/* PhD Resources link rows */
+.canvas-page-with-sidebar .phd-resource-link {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  padding: 6px 8px;
+  background: transparent;
+  border-radius: 5px;
+  text-decoration: none;
+  color: var(--canvas-text);
+  transition: background .12s;
+}
+.canvas-page-with-sidebar .phd-resource-link:hover {
+  background: var(--canvas-surface-2);
+}
+.canvas-page-with-sidebar .phd-resource-name {
+  font-size: 12.5px;
+  font-weight: 600;
+  color: var(--canvas-accent);
+}
+.canvas-page-with-sidebar .phd-resource-desc {
+  font-size: 11px;
+  color: var(--canvas-text-3);
+}
+
 /* "Coming soon" stub widget — roadmap-preview card, not a dead end */
 .canvas-page-with-sidebar .widget-stub {
   flex: 1;