perf: optimize editorcanvas memoization and debounce shiki highlighting

.jules/sentinel.md

@@ -1,5 +0,0 @@
-## 2025-06-07 - [Added Security Headers via Caddy]
-
-**Vulnerability:** Missing HTTP security headers (CSP, X-Frame-Options, X-Content-Type-Options, Referrer-Policy).
-**Learning:** The application does not apply security headers in the Bun application server but instead relies on the Caddy reverse proxy to inject them in the `Caddyfile`.
-**Prevention:** Always configure security headers at the reverse proxy level (`Caddyfile`) instead of within the backend API routing code to ensure all routes, including static files, are properly protected.

Caddyfile

@@ -6,12 +6,6 @@
 :80 {
   encode zstd gzip
 
-  header {
-    X-Frame-Options "SAMEORIGIN"
-    X-Content-Type-Options "nosniff"
-    Referrer-Policy "strict-origin-when-cross-origin"
-  }
-
   handle /mcp {
     reverse_proxy 127.0.0.1:3001
   }

src/client/App.tsx

@@ -307,6 +307,10 @@ function PrivateApp() {
     [],
   );
 
+  const handleExcalidrawAPI = useCallback((api: ExcalidrawImperativeAPI) => {
+    excalidrawApiRef.current = api;
+  }, []);
+
   return (
     <div className="app-shell" ref={appShellRef}>
       {toastMessage && (
@@ -332,9 +336,7 @@ function PrivateApp() {
           onSceneChange={handleSceneChange}
           onSelectionStateChange={handleCodeBlockSelectionChange}
           onEditorActivity={scheduleThemeTokenSync}
-          onExcalidrawAPI={(api) => {
+          onExcalidrawAPI={handleExcalidrawAPI}
-            excalidrawApiRef.current = api;
-          }}
           renderEmbeddable={renderCodeBlockEmbeddable}
         />
         <CodeBlockSidebar

src/client/components/CodeBlockSidebar.tsx

@@ -30,20 +30,24 @@ function CodeBlockEditor({
 
   useEffect(() => {
     let cancelled = false;
-    void renderHighlightedCodeBlockHtml(draft.code, draft.language)
+
-      .then((nextHtml) => {
+    const timeoutId = setTimeout(() => {
-        if (!cancelled) {
+      void renderHighlightedCodeBlockHtml(draft.code, draft.language)
-          setHtml(nextHtml);
+        .then((nextHtml) => {
-        }
+          if (!cancelled) {
-      })
+            setHtml(nextHtml);
-      .catch(() => {
+          }
-        if (!cancelled) {
+        })
-          setHtml(null);
+        .catch(() => {
-        }
+          if (!cancelled) {
-      });
+            setHtml(null);
+          }
+        });
+    }, 100);
 
     return () => {
       cancelled = true;
+      clearTimeout(timeoutId);
     };
   }, [draft.code, draft.language]);