Enhance deliverables functionality and UI

- Added support for multiple project drafts in the deliverables view, allowing users to manage and switch between various templates (e.g., thesis chapters, CVs, cover letters).
- Integrated LaTeX rendering capabilities using remark-math and rehype-katex for improved mathematical expression handling.
- Updated CSS styles for deliverable project tabs and rich editor blocks to enhance user experience and visual consistency.

This update significantly improves the usability of the deliverables feature, making it more versatile for users managing multiple projects.

phd-advisor-frontend/package-lock.json

@@ -12,12 +12,15 @@
         "@testing-library/jest-dom": "^6.6.3",
         "@testing-library/react": "^16.3.0",
         "@testing-library/user-event": "^13.5.0",
+        "katex": "^0.16.45",
         "lucide-react": "^0.544.0",
         "react": "^19.1.0",
         "react-dom": "^19.1.0",
         "react-markdown": "^10.1.0",
         "react-scripts": "5.0.1",
+        "rehype-katex": "^7.0.1",
         "remark-gfm": "^4.0.1",
+        "remark-math": "^6.0.0",
         "web-vitals": "^2.1.4"
       }
     },
@@ -3797,6 +3800,12 @@
       "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
       "license": "MIT"
     },
+    "node_modules/@types/katex": {
+      "version": "0.16.8",
+      "resolved": "https://registry.npmjs.org/@types/katex/-/katex-0.16.8.tgz",
+      "integrity": "sha512-trgaNyfU+Xh2Tc+ABIb44a5AYUpicB3uwirOioeOkNPPbmgRNtcWyDeeFRzjPZENO9Vq8gvVqfhaaXWLlevVwg==",
+      "license": "MIT"
+    },
     "node_modules/@types/mdast": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.4.tgz",
@@ -3866,16 +3875,6 @@
       "integrity": "sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ==",
       "license": "MIT"
     },
-    "node_modules/@types/react": {
-      "version": "19.1.9",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.9.tgz",
-      "integrity": "sha512-WmdoynAX8Stew/36uTSVMcLJJ1KRh6L3IZRx1PZ7qJtBqT3dYTgyDTx8H1qoRghErydW7xw9mSJ3wS//tCRpFA==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "csstype": "^3.0.2"
-      }
-    },
     "node_modules/@types/resolve": {
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@@ -6486,13 +6485,6 @@
       "integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==",
       "license": "MIT"
     },
-    "node_modules/csstype": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
-      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "license": "MIT",
-      "peer": true
-    },
     "node_modules/damerau-levenshtein": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
@@ -9017,6 +9009,125 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/hast-util-from-dom": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/hast-util-from-dom/-/hast-util-from-dom-5.0.1.tgz",
+      "integrity": "sha512-N+LqofjR2zuzTjCPzyDUdSshy4Ma6li7p/c3pA78uTwzFgENbgbUrm2ugwsOdcjI1muO+o6Dgzp9p8WHtn/39Q==",
+      "license": "ISC",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "hastscript": "^9.0.0",
+        "web-namespaces": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-from-html": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/hast-util-from-html/-/hast-util-from-html-2.0.3.tgz",
+      "integrity": "sha512-CUSRHXyKjzHov8yKsQjGOElXy/3EKpyX56ELnkHH34vDVw1N1XSQ1ZcAvTyAPtGqLTuKP/uxM+aLkSPqF/EtMw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "devlop": "^1.1.0",
+        "hast-util-from-parse5": "^8.0.0",
+        "parse5": "^7.0.0",
+        "vfile": "^6.0.0",
+        "vfile-message": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-from-html-isomorphic": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/hast-util-from-html-isomorphic/-/hast-util-from-html-isomorphic-2.0.0.tgz",
+      "integrity": "sha512-zJfpXq44yff2hmE0XmwEOzdWin5xwH+QIhMLOScpX91e/NSGPsAzNCvLQDIEPyO2TXi+lBmU6hjLIhV8MwP2kw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "hast-util-from-dom": "^5.0.0",
+        "hast-util-from-html": "^2.0.0",
+        "unist-util-remove-position": "^5.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-from-html/node_modules/entities": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-6.0.1.tgz",
+      "integrity": "sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/hast-util-from-html/node_modules/parse5": {
+      "version": "7.3.0",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.3.0.tgz",
+      "integrity": "sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==",
+      "license": "MIT",
+      "dependencies": {
+        "entities": "^6.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
+    "node_modules/hast-util-from-parse5": {
+      "version": "8.0.3",
+      "resolved": "https://registry.npmjs.org/hast-util-from-parse5/-/hast-util-from-parse5-8.0.3.tgz",
+      "integrity": "sha512-3kxEVkEKt0zvcZ3hCRYI8rqrgwtlIOFMWkbclACvjlDw8Li9S2hk/d51OI0nr/gIpdMHNepwgOKqZ/sy0Clpyg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/unist": "^3.0.0",
+        "devlop": "^1.0.0",
+        "hastscript": "^9.0.0",
+        "property-information": "^7.0.0",
+        "vfile": "^6.0.0",
+        "vfile-location": "^5.0.0",
+        "web-namespaces": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-is-element": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/hast-util-is-element/-/hast-util-is-element-3.0.0.tgz",
+      "integrity": "sha512-Val9mnv2IWpLbNPqc/pUem+a7Ipj2aHacCwgNfTiK0vJKl0LF+4Ba4+v1oPHFpf3bLYmreq0/l3Gud9S5OH42g==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-parse-selector": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/hast-util-parse-selector/-/hast-util-parse-selector-4.0.0.tgz",
+      "integrity": "sha512-wkQCkSYoOGCRKERFWcxMVMOcYE2K1AaNLU8DXS9arxnLOUEWbOXKXiJUNzEpqZ3JOKpnha3jkFrumEjVliDe7A==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/hast-util-to-jsx-runtime": {
       "version": "2.3.6",
       "resolved": "https://registry.npmjs.org/hast-util-to-jsx-runtime/-/hast-util-to-jsx-runtime-2.3.6.tgz",
@@ -9044,6 +9155,22 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/hast-util-to-text": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/hast-util-to-text/-/hast-util-to-text-4.0.2.tgz",
+      "integrity": "sha512-KK6y/BN8lbaq654j7JgBydev7wuNMcID54lkRav1P0CaE1e47P72AWWPiGKXTJU271ooYzcvTAn/Zt0REnvc7A==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/unist": "^3.0.0",
+        "hast-util-is-element": "^3.0.0",
+        "unist-util-find-after": "^5.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/hast-util-whitespace": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-3.0.0.tgz",
@@ -9057,6 +9184,23 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/hastscript": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/hastscript/-/hastscript-9.0.1.tgz",
+      "integrity": "sha512-g7df9rMFX/SPi34tyGCyUBREQoKkapwdY/T04Qn9TDWfHhAYt4/I0gMVirzK5wEzeUqIjEB+LXC/ypb7Aqno5w==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "comma-separated-tokens": "^2.0.0",
+        "hast-util-parse-selector": "^4.0.0",
+        "property-information": "^7.0.0",
+        "space-separated-tokens": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/he": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
@@ -11312,6 +11456,22 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/katex": {
+      "version": "0.16.45",
+      "resolved": "https://registry.npmjs.org/katex/-/katex-0.16.45.tgz",
+      "integrity": "sha512-pQpZbdBu7wCTmQUh7ufPmLr0pFoObnGUoL/yhtwJDgmmQpbkg/0HSVti25Fu4rmd1oCR6NGWe9vqTWuWv3GcNA==",
+      "funding": [
+        "https://opencollective.com/katex",
+        "https://github.com/sponsors/katex"
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "commander": "^8.3.0"
+      },
+      "bin": {
+        "katex": "cli.js"
+      }
+    },
     "node_modules/keyv": {
       "version": "4.5.4",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
@@ -11756,6 +11916,25 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/mdast-util-math": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-math/-/mdast-util-math-3.0.0.tgz",
+      "integrity": "sha512-Tl9GBNeG/AhJnQM221bJR2HPvLOSnLE/T9cJI9tlc6zwQk2nPk/4f0cHkOdEixQPC/j8UtKDdITswvLAy1OZ1w==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.0.0",
+        "longest-streak": "^3.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.1.0",
+        "unist-util-remove-position": "^5.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/mdast-util-mdx-expression": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/mdast-util-mdx-expression/-/mdast-util-mdx-expression-2.0.1.tgz",
@@ -12135,6 +12314,25 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/micromark-extension-math": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-math/-/micromark-extension-math-3.1.0.tgz",
+      "integrity": "sha512-lvEqd+fHjATVs+2v/8kg9i5Q0AP2k85H0WUOwpIVvUML8BapsMvh1XAogmQjOCsLpoKRCVQqEkQBB3NhVBcsOg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/katex": "^0.16.0",
+        "devlop": "^1.0.0",
+        "katex": "^0.16.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/micromark-factory-destination": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/micromark-factory-destination/-/micromark-factory-destination-2.0.1.tgz",
@@ -15451,6 +15649,25 @@
         "node": ">=6"
       }
     },
+    "node_modules/rehype-katex": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/rehype-katex/-/rehype-katex-7.0.1.tgz",
+      "integrity": "sha512-OiM2wrZ/wuhKkigASodFoo8wimG3H12LWQaH8qSPVJn9apWKFSH3YOCtbKpBorTVw/eI7cuT21XBbvwEswbIOA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/katex": "^0.16.0",
+        "hast-util-from-html-isomorphic": "^2.0.0",
+        "hast-util-to-text": "^4.0.0",
+        "katex": "^0.16.0",
+        "unist-util-visit-parents": "^6.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/relateurl": {
       "version": "0.2.7",
       "resolved": "https://registry.npmjs.org/relateurl/-/relateurl-0.2.7.tgz",
@@ -15478,6 +15695,22 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/remark-math": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/remark-math/-/remark-math-6.0.0.tgz",
+      "integrity": "sha512-MMqgnP74Igy+S3WwnhQ7kqGlEerTETXMvJhrUzDikVZ2/uogJCb+WHUg97hK9/jcfc0dkD73s3LN8zU49cTEtA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "mdast-util-math": "^3.0.0",
+        "micromark-extension-math": "^3.0.0",
+        "unified": "^11.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/remark-parse": {
       "version": "11.0.0",
       "resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-11.0.0.tgz",
@@ -17704,20 +17937,6 @@
         "is-typedarray": "^1.0.0"
       }
     },
-    "node_modules/typescript": {
-      "version": "4.9.5",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
-      "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
-      "license": "Apache-2.0",
-      "peer": true,
-      "bin": {
-        "tsc": "bin/tsc",
-        "tsserver": "bin/tsserver"
-      },
-      "engines": {
-        "node": ">=4.2.0"
-      }
-    },
     "node_modules/unbox-primitive": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.1.0.tgz",
@@ -17831,6 +18050,20 @@
         "node": ">=8"
       }
     },
+    "node_modules/unist-util-find-after": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-find-after/-/unist-util-find-after-5.0.0.tgz",
+      "integrity": "sha512-amQa0Ep2m6hE2g72AugUItjbuM8X8cGQnFoHk0pGfrFeT9GZhzN5SW8nRsiGKK7Aif4CrACPENkA6P/Lw6fHGQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-is": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/unist-util-is": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-6.0.0.tgz",
@@ -17857,6 +18090,20 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/unist-util-remove-position": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-remove-position/-/unist-util-remove-position-5.0.0.tgz",
+      "integrity": "sha512-Hp5Kh3wLxv0PHj9m2yZhhLt58KzPtEYKQQ4yxfYFEO7EvHwzyDYnduhHnY1mDxoqr7VUwVuHXk9RXKIiYS1N8Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-visit": "^5.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/unist-util-stringify-position": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-4.0.0.tgz",
@@ -18070,6 +18317,20 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/vfile-location": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/vfile-location/-/vfile-location-5.0.3.tgz",
+      "integrity": "sha512-5yXvWDEgqeiYiBe1lbxYF7UMAIm/IcopxMHrMQDq3nvKcjPKIhZklUKL+AE7J7uApI4kwe2snsK+eI6UTj9EHg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/vfile-message": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-4.0.3.tgz",
@@ -18137,6 +18398,16 @@
         "minimalistic-assert": "^1.0.0"
       }
     },
+    "node_modules/web-namespaces": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/web-namespaces/-/web-namespaces-2.0.1.tgz",
+      "integrity": "sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/web-vitals": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-2.1.4.tgz",

phd-advisor-frontend/package.json

@@ -7,12 +7,15 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^13.5.0",
+    "katex": "^0.16.45",
     "lucide-react": "^0.544.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-markdown": "^10.1.0",
     "react-scripts": "5.0.1",
+    "rehype-katex": "^7.0.1",
     "remark-gfm": "^4.0.1",
+    "remark-math": "^6.0.0",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

phd-advisor-frontend/src/App.js

@@ -39,7 +39,7 @@ function App() {
   };
 
   const navigateToCanvas = (canvasView) => {
-    if (canvasView === 'insights' || canvasView === 'workspace') {
+    if (['insights', 'workspace', 'deliverables'].includes(canvasView)) {
       localStorage.setItem('canvas-view-v2', canvasView);
     }
     setCurrentView('canvas');

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

@@ -1,16 +1,32 @@
-// Deliverables view — pick a template, fill in structured sections, export.
-// Static "missing" checks run locally. AI checks are stubbed (need LLM endpoint).
+// Deliverables view — multi-project PhD deliverable center.
+// Each "project" is a draft of a template (paper, slides, poster, CV, etc.).
+// You can keep many projects in flight, switch between them, version-rollback,
+// drag in citations from your Bibliography or arXiv, embed images, render math,
+// and export to Markdown / LaTeX / HTML / Print.
+// AI passes are stubbed (need LLM endpoint) but every static signal works today.
 import React, { useState, useMemo, useEffect, useRef } from 'react';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
+import remarkMath from 'remark-math';
+import rehypeKatex from 'rehype-katex';
+import 'katex/dist/katex.min.css';
 import Icon from './CanvasIcon';
 
+// Markdown plugins shared across all rendered blocks. remark-math + rehype-katex
+// give us real LaTeX math (`$...$` inline, `$$...$$` block) inside any preview.
+const REMARK_PLUGINS = [remarkGfm, remarkMath];
+const REHYPE_PLUGINS = [rehypeKatex];
+
 const fireToast = (msg, kind = 'success') =>
   window.dispatchEvent(new CustomEvent('canvas-toast', { detail: { msg, kind } }));
 
-const STORE_KEY = 'canvas-deliverables-v1';
+const STORE_KEY = 'canvas-deliverables-v2';
+const MAX_VERSIONS = 10;
+const newId = (p) => p + Math.random().toString(36).slice(2, 8);
 
-// ---------- Template definitions ----------
+// ============================================================================
+// Templates
+// ============================================================================
 const TEMPLATES = [
   {
     id: 'research-paper',
@@ -27,10 +43,24 @@ const TEMPLATES = [
       { id: 'refs', name: 'References', target: 0, hint: 'Bibliography list. Drop @keys here from the Bibliography widget.', 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'] },
+    ],
+  },
   {
     id: 'nsf-grfp',
     name: 'NSF GRFP',
-    desc: 'Personal Statement (3 pages) + Research Plan (2 pages)',
+    desc: 'Personal Statement (3 pages) + Research Plan (2 pages).',
     icon: 'award',
     mode: 'document',
     sections: [
@@ -66,22 +96,90 @@ const TEMPLATES = [
     ],
   },
   {
-    id: 'thesis-chapter',
-    name: 'Thesis Chapter',
-    desc: 'Standard chapter scaffolding for a dissertation.',
-    icon: 'book',
-    mode: 'paper',
+    id: 'poster',
+    name: 'Conference Poster',
+    desc: '4-quadrant scientific poster: Intro · Methods · Results · Discussion.',
+    icon: 'layout',
+    mode: 'poster',
     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'] },
+      { id: 'title', name: 'Title & Authors', target: 30, hint: 'Title, your name, advisor, affiliation.', checks: [] },
+      { id: 'intro', name: 'Introduction', target: 200, hint: 'Question, gap, why-care.', checks: ['hasGap'] },
+      { id: 'methods', name: 'Methods', target: 200, hint: 'High-level: subjects, design, analysis.', checks: ['hasNumber'] },
+      { id: 'results', name: 'Results', target: 250, hint: 'Headline finding + 1–2 figures.', checks: ['hasFigure', 'hasNumber'] },
+      { id: 'discussion', name: 'Discussion', target: 200, hint: 'What it means + next steps.', checks: ['hasLimit'] },
+      { id: 'refs', name: 'References / Acks', target: 80, hint: '5–10 citations + funding + contact.', checks: ['hasCitation'] },
     ],
   },
+  {
+    id: 'cv',
+    name: 'Academic CV',
+    desc: 'Standard sections: Education · Pubs · Talks · Awards · Service · Skills.',
+    icon: 'user',
+    mode: 'document',
+    sections: [
+      { id: 'header', name: 'Header', target: 40, hint: 'Name, position, affiliation, contact.', checks: [] },
+      { id: 'education', name: 'Education', target: 100, hint: 'Most recent first. Degree · Year · Institution.', checks: [] },
+      { id: 'publications', name: 'Publications', target: 300, hint: 'Drop @keys from Bibliography. Group by type if needed.', checks: ['hasCitation'] },
+      { id: 'talks', name: 'Invited talks & posters', target: 150, hint: 'Title · Venue · Year.', checks: [] },
+      { id: 'awards', name: 'Awards & funding', target: 100, hint: 'Most recent first. Amount + year if applicable.', checks: [] },
+      { id: 'service', name: 'Service & teaching', target: 100, hint: 'Reviewing, mentorship, TA roles.', checks: [] },
+      { id: 'skills', name: 'Skills', target: 60, hint: 'Methods, languages, software.', checks: [] },
+    ],
+  },
+  {
+    id: 'cover-letter',
+    name: 'Cover Letter',
+    desc: 'For job applications, journal submissions, or postdoc inquiries.',
+    icon: 'send',
+    mode: 'document',
+    sections: [
+      { id: 'header', name: 'Header', target: 40, hint: 'Date, recipient, salutation.', checks: [] },
+      { id: 'opener', name: 'Opening paragraph', target: 100, hint: 'Why you\'re writing + the position/journal.', checks: [] },
+      { id: 'body', name: 'Why me', target: 250, hint: 'Specific achievements that match the call. Numbers > adjectives.', checks: ['hasNumber'] },
+      { id: 'fit', name: 'Why this place', target: 150, hint: 'What about this group / journal makes it the right fit.', checks: [] },
+      { id: 'close', name: 'Close', target: 60, hint: 'Thanks + next step + signature.', checks: [] },
+    ],
+  },
+  {
+    id: 'research-statement',
+    name: 'Research Statement',
+    desc: 'For faculty applications: past work, current direction, future arc.',
+    icon: 'sparkles',
+    mode: 'document',
+    sections: [
+      { id: 'overview', name: 'Overview', target: 200, hint: 'One paragraph: your research identity in 2–3 sentences.', checks: [] },
+      { id: 'past', name: 'Past work', target: 600, hint: 'What you\'ve done. Lead with results, cite your own papers.', checks: ['hasCitation', 'hasFinding'] },
+      { id: 'current', name: 'Current direction', target: 400, hint: 'What you\'re working on now and why it matters.', checks: ['hasGap'] },
+      { id: 'future', name: 'Future research', target: 600, hint: '3–5 year arc. 1–2 funding-ready specific aims.', checks: ['hasHypothesis'] },
+      { id: 'broader', name: 'Broader impacts', target: 200, hint: 'Outreach, mentorship, what your group will look like.', checks: ['hasBroaderImpacts'] },
+    ],
+  },
+];
+
+// ============================================================================
+// Slash command catalog — typed at the start of a line in any section editor.
+// ============================================================================
+const SLASH_COMMANDS = [
+  { id: 'h2', label: 'Heading', kind: 'block', icon: 'list', insert: () => '## Heading\n' },
+  { id: 'h3', label: 'Subheading', kind: 'block', icon: 'list', insert: () => '### Subheading\n' },
+  { id: 'list', label: 'Bullet list', kind: 'block', icon: 'list', insert: () => '- ' },
+  { id: 'todo', label: 'To-do', kind: 'block', icon: 'task', insert: () => '- [ ] ' },
+  { id: 'numbered', label: 'Numbered list', kind: 'block', icon: 'list', insert: () => '1. ' },
+  { id: 'quote', label: 'Quote', kind: 'block', icon: 'cite', insert: () => '> ' },
+  { id: 'callout', label: 'Callout', kind: 'block', icon: 'sparkles', insert: () => '> [!note]\n> ' },
+  { id: 'divider', label: 'Divider', kind: 'block', icon: 'list', insert: () => '\n---\n\n' },
+  { id: 'code', label: 'Code block', kind: 'block', icon: 'flask', insert: () => '```\n\n```\n' },
+  { id: 'math', label: 'Equation', kind: 'block', icon: 'flask', insert: () => '$$\nE = mc^2\n$$\n' },
+  { id: 'inline-math', label: 'Inline equation', kind: 'inline', icon: 'flask', insert: () => '$x^2$' },
+  { id: 'image', label: 'Image (paste URL)', kind: 'block', icon: 'download', insert: () => '![caption](https://)' },
+  { id: 'cite', label: 'Citation @key', kind: 'inline', icon: 'book', insert: () => '(@key)' },
+  { id: 'bold', label: 'Bold', kind: 'inline', icon: 'pencil', insert: () => '**bold**' },
+  { id: 'italic', label: 'Italic', kind: 'inline', icon: 'pencil', insert: () => '*italic*' },
 ];
 
-// ---------- Static check rules ----------
+// ============================================================================
+// Static "missing" checks
+// ============================================================================
 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)' },
@@ -89,40 +187,36 @@ const CHECKS = {
   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' },
+  hasBroaderImpacts: { test: (s) => /\b(broader impact|outreach|community|underrepresented|access|teaching)/i.test(s), label: 'Addresses broader impacts' },
+  hasHypothesis: { test: (s) => /\b(hypothes|predict|aim ?\d)/i.test(s), label: 'States a hypothesis or aim' },
   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;
+const readingMinutes = (n) => Math.max(1, Math.round(n / 220));
 
-// ---------- 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');
-};
-
+// ============================================================================
+// Exporters
+// ============================================================================
+const exportMarkdown = (template, sections) => [
+  `# ${template.name}\n`,
+  ...template.sections.map(s => `## ${s.name}\n\n${sections[s.id] || ''}\n`),
+].join('\n');
+const exportLatex = (template, sections) => [
+  '\\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) => [
+  '<!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');
@@ -131,36 +225,119 @@ const downloadFile = (filename, mime, contents) => {
   a.click();
 };
 
-// ---------- Component ----------
+// ============================================================================
+// Project store — multi-project (was: single-template). Migrates v1 if found.
+// ============================================================================
+const loadStore = () => {
+  try {
+    const v2 = JSON.parse(localStorage.getItem(STORE_KEY) || 'null');
+    if (v2) return v2;
+    // Migrate v1: turn each templateId entry into a project.
+    const v1 = JSON.parse(localStorage.getItem('canvas-deliverables-v1') || '{}');
+    if (v1 && v1.templates) {
+      const projects = {};
+      let activeId;
+      Object.entries(v1.templates).forEach(([tid, sec]) => {
+        const id = newId('p-');
+        const { _aiNotes, ...rest } = sec;
+        projects[id] = {
+          id,
+          name: TEMPLATES.find(t => t.id === tid)?.name || tid,
+          templateId: tid,
+          sections: rest,
+          versions: [],
+          aiNotes: _aiNotes || null,
+          createdAt: Date.now(),
+        };
+        if (tid === v1.activeTemplateId) activeId = id;
+      });
+      return { activeProjectId: activeId, projects };
+    }
+  } catch { /* fallthrough */ }
+  return { activeProjectId: null, projects: {} };
+};
+
+// ============================================================================
+// Main view
+// ============================================================================
 const DeliverablesView = ({ allStates }) => {
-  const [store, setStore] = useState(() => {
-    try { return JSON.parse(localStorage.getItem(STORE_KEY) || '{}'); } catch { return {}; }
-  });
+  const [store, setStore] = useState(loadStore);
   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 project = store.projects[store.activeProjectId] || null;
+  const template = project ? TEMPLATES.find(t => t.id === project.templateId) : null;
+  const sections = project?.sections || {};
   const [activeSectionId, setActiveSectionId] = useState(template?.sections[0]?.id);
   const [generatingAi, setGeneratingAi] = useState(false);
+  const [historyOpen, setHistoryOpen] = useState(false);
 
-  // Keep activeSectionId valid when template changes (re-mount from localStorage,
-  // template switch, etc.). Falls back to the first section.
+  // Normalize active section when project/template changes
   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 } } });
-  // };
+  }, [project?.id, template, activeSectionId]);
+
+  // ---------- Project ops ----------
+  const createProject = (templateId, name) => {
+    const id = newId('p-');
+    const t = TEMPLATES.find(x => x.id === templateId);
+    setStore(s => ({
+      activeProjectId: id,
+      projects: {
+        ...s.projects,
+        [id]: { id, name: name || `${t.name} draft`, templateId, sections: {}, versions: [], aiNotes: null, createdAt: Date.now() },
+      },
+    }));
+    fireToast(`New ${t.name} draft created`);
+  };
+  const switchProject = (id) => setStore(s => ({ ...s, activeProjectId: id }));
+  const renameProject = (name) => {
+    if (!project) return;
+    setStore(s => ({ ...s, projects: { ...s.projects, [project.id]: { ...s.projects[project.id], name } } }));
+  };
+  const deleteProject = () => {
+    if (!project) return;
+    if (!window.confirm(`Delete "${project.name}"? This can't be undone.`)) return;
+    setStore(s => {
+      const { [project.id]: _, ...rest } = s.projects;
+      const nextActive = Object.keys(rest)[0] || null;
+      return { activeProjectId: nextActive, projects: rest };
+    });
+  };
+  const closeProject = () => setStore(s => ({ ...s, activeProjectId: null }));
+
+  // ---------- Section ops + auto-versioning ----------
+  const updateSection = (id, value) => {
+    setStore(s => {
+      const proj = s.projects[project.id];
+      const oldText = proj.sections[id] || '';
+      // Snapshot a version every time a section gains/loses ≥80 chars (rough save cadence)
+      const shouldSnap = Math.abs(value.length - oldText.length) >= 80;
+      const newVersions = shouldSnap
+        ? [{ at: Date.now(), sectionId: id, snapshot: { ...proj.sections } }, ...proj.versions].slice(0, MAX_VERSIONS)
+        : proj.versions;
+      return {
+        ...s,
+        projects: {
+          ...s.projects,
+          [project.id]: { ...proj, sections: { ...proj.sections, [id]: value }, versions: newVersions },
+        },
+      };
+    });
+  };
+
+  const restoreVersion = (v) => {
+    if (!window.confirm('Restore this version? Current text will be replaced.')) return;
+    setStore(s => ({
+      ...s,
+      projects: { ...s.projects, [project.id]: { ...s.projects[project.id], sections: v.snapshot } },
+    }));
+    fireToast('Restored');
+  };
+
+  // ---------- AI pass (stub) ----------
+  // TODO(LLM): POST {project, sections, canvas} → {notes:[{sectionId,msg}]}
   const runAiPass = () => {
     setGeneratingAi(true);
     setTimeout(() => {
@@ -171,32 +348,36 @@ const DeliverablesView = ({ allStates }) => {
         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 } },
-      }));
+      setStore(s => ({ ...s, projects: { ...s.projects, [project.id]: { ...s.projects[project.id], 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);
-  };
+  // ---------- Insertables: Bibliography + Highlights + Outline + Drafts + arXiv search ----------
+  const localInsertables = 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 updateSection = (id, value) => {
-    setStore(prev => ({
-      ...prev,
-      templates: {
-        ...prev.templates,
-        [activeId]: { ...(prev.templates?.[activeId] || {}), [id]: value },
-      },
-    }));
+  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);
   };
 
+  // ---------- Export ----------
   const exportAs = (format) => {
-    const filename = `${template.name.replace(/\s+/g, '_')}.${format === 'latex' ? 'tex' : format === 'markdown' ? 'md' : 'html'}`;
+    const filename = `${project.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)
@@ -205,58 +386,74 @@ const DeliverablesView = ({ allStates }) => {
     fireToast(`Exported ${filename}`);
   };
 
-  // Aggregated word count
+  // ---------- Aggregates ----------
   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;
+  const projectList = Object.values(store.projects).sort((a, b) => (b.createdAt || 0) - (a.createdAt || 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) {
+  // ---------- Empty state: project picker / template picker ----------
+  if (!project) {
     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 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.`}
+            </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>
-          ))}
+
+        {/* Existing projects, if any */}
+        {projectList.length > 0 && (
+          <div className="canvas-presets" style={{ marginBottom: 24 }}>
+            <div className="canvas-presets-head">
+              <div className="canvas-presets-title">Continue working</div>
+              <div className="canvas-presets-sub">Drafts you've started.</div>
+            </div>
+            <div className="canvas-presets-grid">
+              {projectList.map(p => {
+                const t = TEMPLATES.find(t => t.id === p.templateId);
+                if (!t) return null;
+                const wc = t.sections.reduce((sum, s) => sum + wordCount(p.sections[s.id]), 0);
+                const target = t.sections.reduce((sum, s) => sum + s.target, 0);
+                return (
+                  <button key={p.id} className="canvas-preset-card" onClick={() => switchProject(p.id)}>
+                    <div className="canvas-preset-icon"><Icon name={t.icon} size={18}/></div>
+                    <div className="canvas-preset-content">
+                      <div className="canvas-preset-name">{p.name}</div>
+                      <div className="canvas-preset-desc">{t.name} · {wc}/{target} words</div>
+                      <div className="canvas-preset-meta">opened {new Date(p.createdAt).toLocaleDateString()}</div>
+                    </div>
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+        )}
+
+        {/* Templates */}
+        <div className="canvas-presets">
+          <div className="canvas-presets-head">
+            <div className="canvas-presets-title">{projectList.length > 0 ? 'Or start a new draft' : 'Pick a template'}</div>
+            <div className="canvas-presets-sub">9 templates · paper, slides, poster, CV, cover letter, and more.</div>
+          </div>
+          <div className="canvas-presets-grid">
+            {TEMPLATES.map(t => (
+              <button key={t.id} className="canvas-preset-card" onClick={() => createProject(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 · {t.mode}</div>
+                </div>
+              </button>
+            ))}
+          </div>
         </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);
-            };
-        */}
+
+        {/* TODO(LLM): "Upload project brief → AI generates a custom outline" */}
         <div className="canvas-presets" style={{ marginTop: 18 }}>
           <div className="canvas-presets-head">
             <div className="canvas-presets-title">From a project brief</div>
@@ -270,51 +467,118 @@ const DeliverablesView = ({ allStates }) => {
     );
   }
 
-  const aiNotes = sections._aiNotes;
+  // ============================================================================
+  // Editor: project tabs + header + per-mode editor
+  // ============================================================================
+  const aiNotes = project.aiNotes;
+
+  const ProjectTabs = (
+    <div className="deliverable-projects">
+      {projectList.map(p => {
+        const t = TEMPLATES.find(x => x.id === p.templateId);
+        return (
+          <button
+            key={p.id}
+            className={`deliverable-project-tab ${p.id === project.id ? 'active' : ''}`}
+            onClick={() => switchProject(p.id)}
+            title={`${t?.name || ''} · ${wordCount(Object.values(p.sections || {}).join(' '))} words`}
+          >
+            <Icon name={t?.icon || 'book'} size={12}/>
+            <span>{p.name}</span>
+          </button>
+        );
+      })}
+      <details className="canvas-export-menu deliverable-new-project">
+        <summary className="deliverable-project-tab"><Icon name="plus" size={12}/>New</summary>
+        <div className="canvas-export-menu-list">
+          {TEMPLATES.map(t => (
+            <button key={t.id} onClick={() => createProject(t.id)}>
+              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
+                <Icon name={t.icon} size={12}/>{t.name}
+              </span>
+            </button>
+          ))}
+        </div>
+      </details>
+    </div>
+  );
 
-  // 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 className="btn btn-ghost" style={{ padding: '4px 8px', fontSize: 12, marginBottom: 4, color: 'var(--canvas-text-3)' }} onClick={closeProject}>
+          <Icon name="back" size={12}/>All drafts
         </button>
-        <h1 className="page-title">{template.name}</h1>
+        <input
+          className="page-title page-title-editable"
+          value={project.name}
+          onChange={(e) => renameProject(e.target.value)}
+        />
         <div className="page-sub">
-          {totalWords} / {totalTarget} words · {template.sections.length} {template.mode === 'slides' ? 'slides' : 'sections'}
+          {template.name} · {totalWords} / {totalTarget} words · ~{readingMinutes(totalWords)} min read · {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={() => setHistoryOpen(o => !o)} title="Version history">
+          <Icon name="reset" size={13}/>History · {project.versions.length}
+        </button>
         <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>
-              <button onClick={() => window.print()}>Print / Save as PDF</button>
-            </div>
-          </details>
-        </div>
+        <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>
+            <button onClick={() => window.print()}>Print / Save as PDF</button>
+          </div>
+        </details>
+        <button className="btn btn-ghost" onClick={deleteProject} title="Delete this draft" style={{ color: 'var(--canvas-danger)' }}>
+          <Icon name="trash" size={13}/>
+        </button>
       </div>
     </div>
   );
 
+  const HistoryPanel = historyOpen && (
+    <div className="deliverable-history">
+      <div className="deliverable-history-head">
+        <span>Version history · {project.versions.length}</span>
+        <button className="icon-btn" onClick={() => setHistoryOpen(false)}><Icon name="x" size={13}/></button>
+      </div>
+      {project.versions.length === 0 ? (
+        <div style={{ padding: 14, color: 'var(--canvas-text-3)', fontSize: 12 }}>
+          Snapshots auto-save every ~80 characters of edits.
+        </div>
+      ) : (
+        project.versions.map((v, i) => {
+          const sec = template.sections.find(s => s.id === v.sectionId);
+          return (
+            <button key={i} className="deliverable-history-row" onClick={() => restoreVersion(v)}>
+              <span className="tag-pill">{sec?.name || v.sectionId}</span>
+              <span style={{ flex: 1 }}>{new Date(v.at).toLocaleString()}</span>
+              <Icon name="reset" size={11} style={{ color: 'var(--canvas-text-3)' }}/>
+            </button>
+          );
+        })
+      )}
+    </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}
+      <ArxivSearch onPick={insertIntoActive}/>
+      <div style={{ fontSize: 11, color: 'var(--canvas-text-4)', textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 600, marginTop: 14, marginBottom: 6 }}>
+        From canvas · {localInsertables.length}
       </div>
-      {insertables.length === 0 && (
+      {localInsertables.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.
+          Add a Bibliography, Highlights, Outline, or Writing widget to your canvas to surface its content here.
         </div>
       )}
-      {insertables.map((it, i) => (
+      {localInsertables.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>
@@ -324,20 +588,47 @@ const DeliverablesView = ({ allStates }) => {
     </div>
   );
 
-  // ---------- SLIDES MODE — PowerPoint / Google Slides feel ----------
+  // ---------- POSTER MODE — 4-quadrant + 2 banner sections ----------
+  if (template.mode === 'poster') {
+    const layout = template.sections;
+    return (
+      <>
+        {ProjectTabs}
+        {Header}
+        {HistoryPanel}
+        <div className="poster-grid">
+          <div className="poster-banner">
+            <PosterPanel section={layout[0]} sections={sections} updateSection={updateSection}/>
+          </div>
+          <PosterPanel section={layout[1]} sections={sections} updateSection={updateSection}/>
+          <PosterPanel section={layout[2]} sections={sections} updateSection={updateSection}/>
+          <PosterPanel section={layout[3]} sections={sections} updateSection={updateSection}/>
+          <PosterPanel section={layout[4]} sections={sections} updateSection={updateSection}/>
+          <div className="poster-banner">
+            <PosterPanel section={layout[5]} sections={sections} updateSection={updateSection}/>
+          </div>
+        </div>
+        <div style={{ marginTop: 16, display: 'flex', justifyContent: 'flex-end' }}>
+          {InsertPanel}
+        </div>
+      </>
+    );
+  }
+
+  // ---------- SLIDES MODE — 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 (
       <>
+        {ProjectTabs}
         {Header}
+        {HistoryPanel}
         <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
@@ -361,8 +652,6 @@ const DeliverablesView = ({ allStates }) => {
               );
             })}
           </div>
-
-          {/* Big slide canvas */}
           <div>
             <div className="slide-canvas-wrap">
               <div className="slide-canvas">
@@ -379,8 +668,6 @@ const DeliverablesView = ({ allStates }) => {
                 <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 }}>
@@ -392,12 +679,11 @@ const DeliverablesView = ({ allStates }) => {
                   {wordCount(text)}{active.target ? `/${active.target}` : ''} words
                 </span>
               </div>
-              <textarea
-                className="textarea"
+              <SlashTextarea
                 value={text}
-                onChange={e => updateSection(active.id, e.target.value)}
+                onChange={(v) => updateSection(active.id, v)}
                 placeholder={active.hint}
-                style={{ minHeight: 110, fontSize: 13, lineHeight: 1.6 }}
+                rows={6}
               />
               {(active.checks || []).length > 0 && (
                 <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
@@ -415,27 +701,30 @@ const DeliverablesView = ({ allStates }) => {
                 </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 className="notion-callout">
+                  <Icon name="sparkles" size={14}/>
+                  <div>
+                    <div className="notion-callout-label">AI suggestion · stub</div>
+                    <div>{aiForSlide.msg}</div>
+                  </div>
                 </div>
               )}
             </div>
           </div>
-
           {InsertPanel}
         </div>
       </>
     );
   }
 
-  // ---------- PAPER / DOCUMENT MODE — Notion-style single-surface page ----------
+  // ---------- PAPER / DOCUMENT MODE — Notion single-surface page ----------
   const paperLike = template.mode === 'paper';
   return (
     <>
+      {ProjectTabs}
       {Header}
+      {HistoryPanel}
       <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 => {
@@ -455,25 +744,23 @@ const DeliverablesView = ({ allStates }) => {
           })}
         </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>
+            <h1 className="notion-page-title">{project.name}</h1>
             <div className="notion-page-meta">
-              {totalWords} words · {template.sections.length} sections{paperLike ? ' · academic paper' : ''}
+              {totalWords} words · ~{readingMinutes(totalWords)} min read · {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
+                  <RichBlock
                     value={text}
                     onChange={(v) => updateSection(s.id, v)}
                     placeholder={`Start writing ${s.name.toLowerCase()}…`}
+                    hint={s.hint}
                     serif={paperLike}
                   />
                   {(s.checks || []).length > 0 && (
@@ -517,24 +804,356 @@ const DeliverablesView = ({ allStates }) => {
   );
 };
 
-// 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 }) {
+// ============================================================================
+// RichBlock — Notion-style click-to-edit + Docs-style floating toolbar.
+//   • Idle: shows rendered markdown (with KaTeX math) — looks like a real doc
+//   • Click: switches to a textarea source view
+//   • While editing: floating toolbar above with Bold / Italic / H2 / list / link / cite / math
+//   • Slash commands still work via the underlying textarea
+// ============================================================================
+const wrap = (text, l, r = l) => `${l}${text || 'text'}${r}`;
+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: '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'}` },
+  { id: 'list',     icon: 'list',   label: 'Bullet list',      run: (sel) => lineWrap(sel, '- ') },
+  { id: 'numbered', icon: 'list',   label: 'Numbered list',    run: (sel) => lineWrap(sel, '1. ') },
+  { id: 'quote',    icon: 'cite',   label: 'Block quote',      run: (sel) => lineWrap(sel, '> ') },
+  { id: 'link',     icon: 'link',   label: 'Link',             run: (sel) => `[${sel || 'link text'}](https://)` },
+  { id: 'cite',     icon: 'book',   label: 'Citation @key',    run: (sel) => `(@${sel || 'key'})` },
+  { id: 'math',     icon: 'flask',  label: 'Inline math (LaTeX)', run: (sel) => `$${sel || 'x^2'}$` },
+  { id: 'math-block', icon: 'flask', label: 'Math block',       run: (sel) => `\n$$\n${sel || 'E = mc^2'}\n$$\n` },
+];
+
+function RichBlock({ value, onChange, placeholder, serif, hint }) {
+  const [editing, setEditing] = useState(false);
+  const [slash, setSlash] = useState(null);
+  const taRef = useRef(null);
+  const containerRef = useRef(null);
+
+  // Auto-grow when editing
+  useEffect(() => {
+    if (!editing || !taRef.current) return;
+    taRef.current.style.height = 'auto';
+    taRef.current.style.height = taRef.current.scrollHeight + 'px';
+  }, [value, editing]);
+
+  // Click outside to leave edit mode
+  useEffect(() => {
+    if (!editing) return;
+    const onDocClick = (e) => {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        setEditing(false);
+        setSlash(null);
+      }
+    };
+    document.addEventListener('mousedown', onDocClick);
+    return () => document.removeEventListener('mousedown', onDocClick);
+  }, [editing]);
+
+  const applyToolbar = (cmd) => {
+    const ta = taRef.current;
+    if (!ta) return;
+    const { selectionStart: s, selectionEnd: e } = ta;
+    const before = value.slice(0, s);
+    const sel = value.slice(s, e);
+    const after = value.slice(e);
+    const replacement = cmd.run(sel);
+    const next = before + replacement + after;
+    onChange(next);
+    // Reposition cursor at end of inserted text
+    setTimeout(() => {
+      if (taRef.current) {
+        const pos = before.length + replacement.length;
+        taRef.current.setSelectionRange(pos, pos);
+        taRef.current.focus();
+      }
+    }, 0);
+  };
+
+  const onTextChange = (e) => {
+    const val = e.target.value;
+    const cursor = e.target.selectionStart;
+    onChange(val);
+    const before = val.slice(0, cursor);
+    const m = before.match(/(?:^|\n)(\/[\w-]*)$/);
+    if (m) {
+      const q = m[1].slice(1).toLowerCase();
+      const choices = SLASH_COMMANDS.filter(c => c.label.toLowerCase().includes(q) || c.id.includes(q)).slice(0, 8);
+      setSlash({ start: cursor - m[1].length, query: q, choices, idx: 0 });
+    } else {
+      setSlash(null);
+    }
+  };
+
+  const insertSlash = (cmd) => {
+    if (!slash) return;
+    const before = value.slice(0, slash.start);
+    const after = value.slice(slash.start + 1 + slash.query.length);
+    const inserted = cmd.insert();
+    onChange(before + inserted + after);
+    setSlash(null);
+    setTimeout(() => {
+      if (taRef.current) {
+        const pos = before.length + inserted.length;
+        taRef.current.setSelectionRange(pos, pos);
+        taRef.current.focus();
+      }
+    }, 0);
+  };
+
+  const onKeyDown = (e) => {
+    // ⌘B / ⌘I keyboard shortcuts (Word/Docs convention)
+    if ((e.metaKey || e.ctrlKey) && !e.shiftKey) {
+      if (e.key.toLowerCase() === 'b') { e.preventDefault(); applyToolbar(TOOLBAR.find(t => t.id === 'bold')); return; }
+      if (e.key.toLowerCase() === 'i') { e.preventDefault(); applyToolbar(TOOLBAR.find(t => t.id === 'italic')); return; }
+    }
+    if (slash && slash.choices.length > 0) {
+      if (e.key === 'ArrowDown') { e.preventDefault(); setSlash(s => ({ ...s, idx: Math.min(s.choices.length - 1, s.idx + 1) })); }
+      else if (e.key === 'ArrowUp') { e.preventDefault(); setSlash(s => ({ ...s, idx: Math.max(0, s.idx - 1) })); }
+      else if (e.key === 'Enter' || e.key === 'Tab') { e.preventDefault(); insertSlash(slash.choices[slash.idx]); }
+      else if (e.key === 'Escape') setSlash(null);
+    }
+  };
+
+  return (
+    <div ref={containerRef} className="rich-block">
+      {/* Floating toolbar — only when actively editing */}
+      {editing && (
+        <div className="rich-toolbar" onMouseDown={(e) => e.preventDefault() /* keep textarea focused */}>
+          {TOOLBAR.map(t => (
+            <button key={t.id} title={t.label} onClick={() => applyToolbar(t)}>
+              {t.id === 'bold' && <strong>B</strong>}
+              {t.id === 'italic' && <em>I</em>}
+              {t.id === 'code' && <span style={{ fontFamily: 'var(--canvas-mono)', fontSize: 11 }}>{'<>'}</span>}
+              {t.id === 'h2' && <span style={{ fontWeight: 700 }}>H2</span>}
+              {t.id === 'h3' && <span style={{ fontWeight: 700, fontSize: 11 }}>H3</span>}
+              {t.id === 'list' && '•'}
+              {t.id === 'numbered' && <span style={{ fontFamily: 'var(--canvas-mono)', fontSize: 11 }}>1.</span>}
+              {t.id === 'quote' && '"'}
+              {t.id === 'link' && <Icon name="link" size={12}/>}
+              {t.id === 'cite' && '@'}
+              {t.id === 'math' && <span style={{ fontFamily: 'serif', fontStyle: 'italic' }}>x</span>}
+              {t.id === 'math-block' && <span style={{ fontFamily: 'serif' }}>∑</span>}
+            </button>
+          ))}
+        </div>
+      )}
+
+      {editing ? (
+        <div style={{ position: 'relative' }}>
+          <textarea
+            ref={taRef}
+            className={`notion-text ${serif ? 'serif' : ''}`}
+            value={value}
+            onChange={onTextChange}
+            onKeyDown={onKeyDown}
+            placeholder={placeholder}
+            autoFocus
+            rows={1}
+          />
+          {slash && slash.choices.length > 0 && (
+            <div className="slash-menu">
+              <div className="slash-menu-head">Insert block</div>
+              {slash.choices.map((c, i) => (
+                <button key={c.id}
+                  onMouseEnter={() => setSlash(s => ({ ...s, idx: i }))}
+                  onClick={() => insertSlash(c)}
+                  className={i === slash.idx ? 'active' : ''}>
+                  <Icon name={c.icon} size={13}/>
+                  <span style={{ flex: 1 }}>{c.label}</span>
+                  <span className="slash-menu-kind">{c.kind}</span>
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+      ) : (
+        <div
+          className={`rich-rendered ${serif ? 'serif' : ''}`}
+          onClick={() => setEditing(true)}
+          onFocus={() => setEditing(true)}
+          tabIndex={0}
+        >
+          {value ? (
+            <ReactMarkdown remarkPlugins={REMARK_PLUGINS} rehypePlugins={REHYPE_PLUGINS}>{value}</ReactMarkdown>
+          ) : (
+            <span className="rich-placeholder">{hint || placeholder || 'Click to edit'}</span>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ============================================================================
+// SlashTextarea — auto-grows; `/` opens a block-insert popover.
+// ============================================================================
+function SlashTextarea({ value, onChange, placeholder, serif, notion, rows = 1 }) {
   const ref = useRef(null);
+  const [slash, setSlash] = useState(null); // { start, query, choices, idx }
+
   useEffect(() => {
-    if (!ref.current) return;
+    if (!ref.current || !notion) return;
     ref.current.style.height = 'auto';
     ref.current.style.height = ref.current.scrollHeight + 'px';
-  }, [value]);
+  }, [value, notion]);
+
+  const onTextChange = (e) => {
+    const val = e.target.value;
+    const cursor = e.target.selectionStart;
+    onChange(val);
+    const before = val.slice(0, cursor);
+    const m = before.match(/(?:^|\n)(\/[\w-]*)$/);
+    if (m) {
+      const q = m[1].slice(1).toLowerCase();
+      const choices = SLASH_COMMANDS.filter(c => c.label.toLowerCase().includes(q) || c.id.includes(q)).slice(0, 8);
+      setSlash({ start: cursor - m[1].length, query: q, choices, idx: 0 });
+    } else {
+      setSlash(null);
+    }
+  };
+
+  const insertCmd = (cmd) => {
+    if (!slash) return;
+    const before = value.slice(0, slash.start);
+    const after = value.slice(slash.start + 1 + slash.query.length);
+    const inserted = cmd.insert();
+    onChange(before + inserted + after);
+    setSlash(null);
+    setTimeout(() => {
+      if (ref.current) {
+        const pos = before.length + inserted.length;
+        ref.current.setSelectionRange(pos, pos);
+        ref.current.focus();
+      }
+    }, 0);
+  };
+
+  const onKeyDown = (e) => {
+    if (!slash || slash.choices.length === 0) return;
+    if (e.key === 'ArrowDown') { e.preventDefault(); setSlash(s => ({ ...s, idx: Math.min(s.choices.length - 1, s.idx + 1) })); }
+    if (e.key === 'ArrowUp') { e.preventDefault(); setSlash(s => ({ ...s, idx: Math.max(0, s.idx - 1) })); }
+    if (e.key === 'Enter' || e.key === 'Tab') { e.preventDefault(); insertCmd(slash.choices[slash.idx]); }
+    if (e.key === 'Escape') setSlash(null);
+  };
+
+  return (
+    <div style={{ position: 'relative' }}>
+      <textarea
+        ref={ref}
+        className={notion ? `notion-text ${serif ? 'serif' : ''}` : 'textarea'}
+        value={value}
+        onChange={onTextChange}
+        onKeyDown={onKeyDown}
+        placeholder={placeholder}
+        rows={rows}
+        style={notion ? undefined : { minHeight: 110, fontFamily: 'var(--canvas-sans)', fontSize: 13, lineHeight: 1.6 }}
+      />
+      {slash && slash.choices.length > 0 && (
+        <div className="slash-menu">
+          <div className="slash-menu-head">Insert block</div>
+          {slash.choices.map((c, i) => (
+            <button key={c.id}
+              onMouseEnter={() => setSlash(s => ({ ...s, idx: i }))}
+              onClick={() => insertCmd(c)}
+              className={i === slash.idx ? 'active' : ''}>
+              <Icon name={c.icon} size={13}/>
+              <span style={{ flex: 1 }}>{c.label}</span>
+              <span className="slash-menu-kind">{c.kind}</span>
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ============================================================================
+// Poster panel — single-section block in the poster layout
+// ============================================================================
+function PosterPanel({ section, sections, updateSection }) {
+  if (!section) return null;
+  const text = sections[section.id] || '';
+  return (
+    <div className="poster-panel">
+      <div className="poster-panel-head">{section.name}</div>
+      <RichBlock
+        value={text}
+        onChange={(v) => updateSection(section.id, v)}
+        placeholder={section.hint}
+        hint={section.hint}
+      />
+    </div>
+  );
+}
+
+// ============================================================================
+// arXiv search — public ATOM API, CORS-enabled.
+// ============================================================================
+function ArxivSearch({ onPick }) {
+  const [q, setQ] = useState('');
+  const [busy, setBusy] = useState(false);
+  const [results, setResults] = useState([]);
+
+  const search = async () => {
+    if (!q.trim()) return;
+    setBusy(true);
+    try {
+      const url = `https://export.arxiv.org/api/query?search_query=all:${encodeURIComponent(q)}&max_results=5`;
+      const res = await fetch(url);
+      const xml = await res.text();
+      const doc = new DOMParser().parseFromString(xml, 'text/xml');
+      const entries = Array.from(doc.getElementsByTagName('entry')).map(e => {
+        const id = e.getElementsByTagName('id')[0]?.textContent?.split('/').pop() || '';
+        const title = e.getElementsByTagName('title')[0]?.textContent?.trim() || '';
+        const authors = Array.from(e.getElementsByTagName('author')).map(a => a.getElementsByTagName('name')[0]?.textContent?.trim()).filter(Boolean);
+        const year = (e.getElementsByTagName('published')[0]?.textContent || '').slice(0, 4);
+        return { id, title, authors, year };
+      });
+      setResults(entries);
+    } catch (e) {
+      fireToast('arXiv search failed', 'danger');
+    } finally {
+      setBusy(false);
+    }
+  };
+
   return (
-    <textarea
-      ref={ref}
-      className={`notion-text ${serif ? 'serif' : ''}`}
-      value={value}
-      onChange={(e) => onChange(e.target.value)}
-      placeholder={placeholder}
-      rows={1}
-    />
+    <div>
+      <div style={{ fontSize: 11, color: 'var(--canvas-text-4)', textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 600, marginBottom: 6 }}>
+        Search arXiv
+      </div>
+      <div style={{ display: 'flex', gap: 4 }}>
+        <input className="input" placeholder="Predictive coding…" value={q}
+          onChange={e => setQ(e.target.value)}
+          onKeyDown={e => { if (e.key === 'Enter') search(); }}
+          style={{ fontSize: 12, padding: '5px 8px' }}/>
+        <button className="icon-btn" onClick={search} disabled={!q.trim() || busy} title="Search arXiv">
+          {busy ? <div className="spinner"/> : <Icon name="search" size={13}/>}
+        </button>
+      </div>
+      {results.length > 0 && (
+        <div style={{ marginTop: 6, display: 'flex', flexDirection: 'column', gap: 2 }}>
+          {results.map(r => {
+            const a = r.authors[0] ? r.authors[0].split(' ').pop() : 'Unknown';
+            const snippet = ` (${a}, ${r.year}; arXiv:${r.id})`;
+            return (
+              <button key={r.id} className="canvas-insert-row" onClick={() => onPick(snippet)}>
+                <span className="tag-pill">arXiv</span>
+                <span style={{ flex: 1, fontSize: 11.5, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }} title={r.title}>{r.title}</span>
+                <Icon name="plus" size={12} style={{ color: 'var(--canvas-text-3)' }}/>
+              </button>
+            );
+          })}
+        </div>
+      )}
+    </div>
   );
 }
 

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

@@ -1609,6 +1609,374 @@ body[data-canvas-theme="light"] .canvas-modal-backdrop .critic-meter .bar { back
 .canvas-page-with-sidebar .paper-empty { color: #9ca3af; font-style: italic; font-size: 12px; }
 .canvas-page-with-sidebar .paper-section { margin-bottom: 4px; }
 
+/* ----- Deliverable project tabs (Overleaf-style multi-draft) ----- */
+.canvas-page-with-sidebar .deliverable-projects {
+  display: flex;
+  gap: 4px;
+  flex-wrap: wrap;
+  align-items: center;
+  margin-bottom: 14px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid var(--canvas-border);
+}
+.canvas-page-with-sidebar .deliverable-project-tab {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 11px;
+  border-radius: 6px;
+  background: transparent;
+  border: 1px solid transparent;
+  color: var(--canvas-text-2);
+  font-family: inherit;
+  font-size: 12.5px;
+  cursor: pointer;
+  transition: background .12s, color .12s, border-color .12s;
+}
+.canvas-page-with-sidebar .deliverable-project-tab:hover {
+  background: var(--canvas-surface-2);
+  color: var(--canvas-text);
+}
+.canvas-page-with-sidebar .deliverable-project-tab.active {
+  background: var(--canvas-surface-2);
+  border-color: var(--canvas-border);
+  color: var(--canvas-text);
+  font-weight: 600;
+}
+.canvas-page-with-sidebar .deliverable-new-project { position: relative; }
+.canvas-page-with-sidebar .deliverable-new-project summary {
+  list-style: none;
+  cursor: pointer;
+  color: var(--canvas-text-3);
+}
+.canvas-page-with-sidebar .deliverable-new-project summary::-webkit-details-marker { display: none; }
+.canvas-page-with-sidebar .deliverable-new-project[open] summary { background: var(--canvas-surface-2); color: var(--canvas-text); }
+
+/* Editable project title — looks like the page-title but is an input */
+.canvas-page-with-sidebar .page-title-editable {
+  background: transparent;
+  border: none;
+  outline: none;
+  width: 100%;
+  font-family: inherit;
+  font-size: 28px;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  margin: 0;
+  padding: 2px 0;
+  color: var(--canvas-text);
+}
+.canvas-page-with-sidebar .page-title-editable:focus {
+  background: rgba(255, 255, 255, 0.03);
+  border-radius: 4px;
+  padding: 2px 6px;
+  margin: 0 -6px;
+}
+.canvas-page-with-sidebar[data-canvas-theme="light"] .page-title-editable:focus {
+  background: rgba(0, 0, 0, 0.025);
+}
+
+/* Version history dropdown panel */
+.canvas-page-with-sidebar .deliverable-history {
+  background: var(--canvas-surface);
+  border: 1px solid var(--canvas-border);
+  border-radius: 8px;
+  margin-bottom: 16px;
+  padding: 6px;
+  max-height: 320px;
+  overflow-y: auto;
+}
+.canvas-page-with-sidebar .deliverable-history-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 4px 8px 8px;
+  font-size: 11px;
+  font-family: var(--canvas-mono);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--canvas-text-3);
+  border-bottom: 1px solid var(--canvas-border);
+  margin-bottom: 4px;
+}
+.canvas-page-with-sidebar .deliverable-history-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 6px 8px;
+  background: transparent;
+  border: none;
+  border-radius: 4px;
+  color: var(--canvas-text-2);
+  font-family: inherit;
+  font-size: 12px;
+  cursor: pointer;
+}
+.canvas-page-with-sidebar .deliverable-history-row:hover {
+  background: var(--canvas-surface-2);
+  color: var(--canvas-text);
+}
+
+/* Slash menu (block-insert popover) */
+.canvas-page-with-sidebar .slash-menu {
+  position: absolute;
+  bottom: calc(100% + 4px);
+  left: 0;
+  z-index: 30;
+  background: var(--canvas-surface);
+  border: 1px solid var(--canvas-border-2);
+  border-radius: 8px;
+  box-shadow: var(--canvas-shadow-lg);
+  padding: 4px;
+  min-width: 240px;
+  max-height: 280px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+}
+.canvas-page-with-sidebar .slash-menu-head {
+  font-size: 10px;
+  font-family: var(--canvas-mono);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--canvas-text-4);
+  padding: 6px 8px 4px;
+}
+.canvas-page-with-sidebar .slash-menu button {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: transparent;
+  border: none;
+  padding: 6px 8px;
+  border-radius: 4px;
+  font-family: inherit;
+  font-size: 12.5px;
+  color: var(--canvas-text);
+  text-align: left;
+  cursor: pointer;
+}
+.canvas-page-with-sidebar .slash-menu button:hover,
+.canvas-page-with-sidebar .slash-menu button.active {
+  background: var(--canvas-surface-2);
+}
+.canvas-page-with-sidebar .slash-menu-kind {
+  font-family: var(--canvas-mono);
+  font-size: 9.5px;
+  color: var(--canvas-text-4);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+/* Poster mode — 4-quadrant grid, banners on top and bottom */
+.canvas-page-with-sidebar .poster-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 14px;
+  background: var(--canvas-surface);
+  border: 1px solid var(--canvas-border);
+  border-radius: 10px;
+  padding: 18px;
+}
+.canvas-page-with-sidebar .poster-banner { grid-column: 1 / -1; }
+.canvas-page-with-sidebar .poster-panel {
+  background: var(--canvas-bg-2);
+  border: 1px solid var(--canvas-border);
+  border-radius: 8px;
+  padding: 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.canvas-page-with-sidebar[data-canvas-theme="light"] .poster-panel {
+  background: #ffffff;
+  border-color: rgba(15, 15, 15, 0.08);
+}
+.canvas-page-with-sidebar .poster-panel-head {
+  font-size: 13px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--canvas-accent);
+  border-bottom: 2px solid var(--canvas-accent-glow);
+  padding-bottom: 6px;
+}
+.canvas-page-with-sidebar .poster-panel textarea {
+  flex: 1;
+  min-height: 120px;
+  background: transparent;
+  border: none;
+  outline: none;
+  resize: none;
+  font-family: inherit;
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--canvas-text);
+  padding: 0;
+}
+@media (max-width: 768px) {
+  .canvas-page-with-sidebar .poster-grid { grid-template-columns: 1fr; }
+}
+
+/* ----- Rich editor block (click-to-edit + floating toolbar + LaTeX math) ----- */
+.canvas-page-with-sidebar .rich-block {
+  position: relative;
+  margin-top: 4px;
+}
+
+.canvas-page-with-sidebar .rich-toolbar {
+  position: absolute;
+  bottom: calc(100% + 6px);
+  left: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1px;
+  padding: 4px;
+  background: var(--canvas-surface);
+  border: 1px solid var(--canvas-border-2);
+  border-radius: 8px;
+  box-shadow: var(--canvas-shadow-lg);
+  z-index: 20;
+  animation: canvas-view-in 140ms var(--canvas-ease);
+}
+.canvas-page-with-sidebar .rich-toolbar button {
+  background: transparent;
+  border: none;
+  width: 30px;
+  height: 28px;
+  border-radius: 4px;
+  display: grid;
+  place-items: center;
+  color: var(--canvas-text-2);
+  font-family: inherit;
+  font-size: 13px;
+  cursor: pointer;
+  transition: background .12s, color .12s;
+}
+.canvas-page-with-sidebar .rich-toolbar button:hover {
+  background: var(--canvas-surface-2);
+  color: var(--canvas-text);
+}
+
+/* Rendered block (idle state — looks like real document text) */
+.canvas-page-with-sidebar .rich-rendered {
+  cursor: text;
+  padding: 4px 0;
+  border-radius: 4px;
+  transition: background .12s;
+  outline: none;
+}
+.canvas-page-with-sidebar .rich-rendered:hover {
+  background: rgba(255, 255, 255, 0.02);
+}
+.canvas-page-with-sidebar[data-canvas-theme="light"] .rich-rendered:hover {
+  background: rgba(0, 0, 0, 0.02);
+}
+.canvas-page-with-sidebar .rich-rendered:focus-visible {
+  background: rgba(0, 0, 0, 0.025);
+  box-shadow: 0 0 0 2px var(--canvas-accent-glow);
+}
+.canvas-page-with-sidebar .rich-placeholder {
+  color: var(--canvas-text-4);
+  font-style: italic;
+}
+
+/* Inside the rendered block: typography matching the page */
+.canvas-page-with-sidebar .rich-rendered > * { margin: 0; }
+.canvas-page-with-sidebar .rich-rendered > * + * { margin-top: 12px; }
+.canvas-page-with-sidebar .rich-rendered p {
+  font-size: 16px;
+  line-height: 1.65;
+  color: var(--canvas-text);
+}
+.canvas-page-with-sidebar .rich-rendered.serif p {
+  font-family: 'Georgia', 'Times New Roman', serif;
+  font-size: 14.5px;
+  line-height: 1.7;
+  text-align: justify;
+}
+.canvas-page-with-sidebar .rich-rendered h1,
+.canvas-page-with-sidebar .rich-rendered h2,
+.canvas-page-with-sidebar .rich-rendered h3,
+.canvas-page-with-sidebar .rich-rendered h4 {
+  font-weight: 700;
+  letter-spacing: -0.01em;
+  color: var(--canvas-text);
+  margin-top: 16px;
+}
+.canvas-page-with-sidebar .rich-rendered h1 { font-size: 24px; }
+.canvas-page-with-sidebar .rich-rendered h2 { font-size: 19px; }
+.canvas-page-with-sidebar .rich-rendered h3 { font-size: 16px; }
+.canvas-page-with-sidebar .rich-rendered ul,
+.canvas-page-with-sidebar .rich-rendered ol {
+  padding-left: 22px;
+  font-size: 16px;
+  line-height: 1.65;
+  color: var(--canvas-text);
+}
+.canvas-page-with-sidebar .rich-rendered.serif ul,
+.canvas-page-with-sidebar .rich-rendered.serif ol {
+  font-family: 'Georgia', serif;
+  font-size: 14.5px;
+}
+.canvas-page-with-sidebar .rich-rendered li { margin-bottom: 4px; }
+.canvas-page-with-sidebar .rich-rendered blockquote {
+  border-left: 3px solid var(--canvas-accent);
+  padding: 4px 14px;
+  color: var(--canvas-text-2);
+  margin-left: 0;
+  background: rgba(99, 102, 241, 0.04);
+  border-radius: 0 4px 4px 0;
+}
+.canvas-page-with-sidebar .rich-rendered code {
+  background: var(--canvas-surface-2);
+  padding: 1px 5px;
+  border-radius: 3px;
+  font-family: var(--canvas-mono);
+  font-size: 13px;
+}
+.canvas-page-with-sidebar .rich-rendered pre {
+  background: var(--canvas-bg-2);
+  border: 1px solid var(--canvas-border);
+  border-radius: 6px;
+  padding: 12px;
+  overflow-x: auto;
+  font-family: var(--canvas-mono);
+  font-size: 13px;
+}
+.canvas-page-with-sidebar .rich-rendered pre code { background: none; padding: 0; }
+.canvas-page-with-sidebar .rich-rendered a {
+  color: var(--canvas-accent);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.canvas-page-with-sidebar .rich-rendered strong { color: var(--canvas-text); font-weight: 700; }
+.canvas-page-with-sidebar .rich-rendered em { color: var(--canvas-text); }
+.canvas-page-with-sidebar .rich-rendered img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 4px;
+  margin: 8px 0;
+  display: block;
+}
+
+/* KaTeX math overrides — match document text size */
+.canvas-page-with-sidebar .rich-rendered .katex {
+  font-size: 1.05em;
+  color: var(--canvas-text);
+}
+.canvas-page-with-sidebar .rich-rendered .katex-display {
+  margin: 16px 0;
+  padding: 8px 12px;
+  background: var(--canvas-bg-2);
+  border-radius: 6px;
+  overflow-x: auto;
+}
+.canvas-page-with-sidebar[data-canvas-theme="light"] .rich-rendered .katex-display {
+  background: rgba(0, 0, 0, 0.025);
+}
+
 /* ----- Notion-style single-surface deliverable editor ----- */
 .canvas-page-with-sidebar .notion-deliverable-grid {
   display: grid;