feat: add streaming animation to document editor during generation

- Add pulsing glow animation (streamingGlow) on editor border
- Animation activates when agent is running (isLoading state)
- Subtle purple glow effect with inset shadow
- Provides visual feedback that document is being generated

Author: GeneralJerel

apps/app/src/app/canvas/page.tsx

@@ -345,7 +345,10 @@ const DocumentEditor = () => {
           How do WebSockets work?
         </div>
       )}
-      <div className="flex-1 overflow-hidden flex flex-col" style={{ cursor: "text" }}>
+      <div
+        className={`flex-1 overflow-hidden flex flex-col ${isLoading ? "editor-streaming" : ""}`}
+        style={{ cursor: "text" }}
+      >
         <EditorContent
           editor={editor}
           className="h-full p-10 overflow-y-auto"

apps/app/src/app/canvas/style.css

@@ -122,3 +122,21 @@
 .ProseMirror:focus-visible {
   outline: none;
 }
+
+/* Streaming animation for active generation */
+@keyframes streamingGlow {
+  0% {
+    box-shadow: inset 0 0 0 2px rgba(139, 92, 246, 0.3), 0 0 20px rgba(139, 92, 246, 0.1);
+  }
+  50% {
+    box-shadow: inset 0 0 0 2px rgba(139, 92, 246, 0.6), 0 0 30px rgba(139, 92, 246, 0.2);
+  }
+  100% {
+    box-shadow: inset 0 0 0 2px rgba(139, 92, 246, 0.3), 0 0 20px rgba(139, 92, 246, 0.1);
+  }
+}
+
+.editor-streaming {
+  animation: streamingGlow 2s ease-in-out infinite;
+  border-radius: 0.5rem;
+}