fix: show autosave failures

.jules/bolt.md

@@ -1,4 +0,0 @@
-## 2023-10-27 - Excalidraw Component Re-render Performance Penalty
-
-**Learning:** Due to the exceptionally high rendering cost of the `@excalidraw/excalidraw` canvas, inline functions passed as props (like `onChange` and `onExcalidrawAPI`) cause severe performance degradation by defeating `React.memo` and triggering full canvas re-renders when parent state changes.
-**Action:** Always strictly memoize all callbacks passed to the Excalidraw component using `useCallback` to preserve prop stability and prevent unnecessary, expensive re-renders.

src/client/App.tsx

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

src/client/components/EditorCanvas.tsx

@@ -1,4 +1,4 @@
-import { memo, useCallback } from "react";
+import { memo } from "react";
 import { Excalidraw } from "@excalidraw/excalidraw";
 import type {
   AppState,
@@ -7,7 +7,6 @@ import type {
   ExcalidrawInitialDataState,
   ExcalidrawProps,
 } from "@excalidraw/excalidraw/types";
-import type { OrderedExcalidrawElement } from "@excalidraw/excalidraw/element/types";
 import "../../../node_modules/@excalidraw/excalidraw/dist/prod/index.css";
 import { type ScenePayload } from "../../core/shared";
 import {
@@ -57,19 +56,6 @@ export const EditorCanvas = memo(function EditorCanvas({
   onExcalidrawAPI,
   renderEmbeddable,
 }: EditorCanvasProps) {
-  const handleChange = useCallback(
-    (
-      elements: readonly OrderedExcalidrawElement[],
-      appState: AppState,
-      files: BinaryFiles,
-    ) => {
-      onEditorActivity();
-      onSceneChange(sceneFromEditor(elements, appState, files));
-      onSelectionStateChange(getCodeBlockSelectionState(elements, appState));
-    },
-    [onEditorActivity, onSceneChange, onSelectionStateChange],
-  );
-
   if (loading || !scene) {
     return <div className="editor-loading">{error ?? "Loading..."}</div>;
   }
@@ -81,7 +67,13 @@ export const EditorCanvas = memo(function EditorCanvas({
         initialData={sceneToInitialData(scene)}
         excalidrawAPI={onExcalidrawAPI}
         renderEmbeddable={renderEmbeddable}
-        onChange={handleChange}
+        onChange={(elements, appState, files) => {
+          onEditorActivity();
+          onSceneChange(sceneFromEditor(elements, appState, files));
+          onSelectionStateChange(
+            getCodeBlockSelectionState(elements, appState),
+          );
+        }}
       />
     </div>
   );

src/client/hooks/useDrawingSession.ts

@@ -231,6 +231,8 @@ export function useDrawingSession() {
           }
           if (isManual) {
             showToast("Saved", 2000);
+          } else {
+            showToast(null);
           }
         })
         .catch((saveError: unknown) => {
@@ -251,6 +253,8 @@ export function useDrawingSession() {
           );
           if (isManual) {
             showToast("Save failed", 2000);
+          } else {
+            showToast("Autosave failed");
           }
           throw saveError;
         })

src/server/http-server.tsx

@@ -12,6 +12,7 @@ export function createServer(options: CreateServerOptions = {}) {
   return {
     port: Number(process.env.PORT ?? "3000"),
     hostname: process.env.HOST ?? "localhost",
+    idleTimeout: 120,
     routes: {
       "/": (request: Request) => {
         const drawing = drawingStore.ensureInitialDrawing();