Add P5WithEditor component and improve UI/UX

package-lock.json

@@ -8,6 +8,7 @@
       "name": "multimodal-live-api-web-console",
       "version": "0.1.0",
       "dependencies": {
+        "@monaco-editor/react": "^4.7.0",
         "classnames": "^2.5.1",
         "dotenv": "^16.4.1",
         "dotenv-flow": "^4.1.0",
@@ -15,6 +16,7 @@
         "express": "^4.18.2",
         "http-proxy-middleware": "^3.0.3",
         "lodash": "^4.17.21",
+        "lucide-react": "^0.477.0",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-icons": "^5.3.0",
@@ -1993,7 +1995,7 @@
       "version": "0.8.1",
       "resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz",
       "integrity": "sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@jridgewell/trace-mapping": "0.3.9"
       },
@@ -2005,7 +2007,7 @@
       "version": "0.3.9",
       "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.9.tgz",
       "integrity": "sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.0.3",
         "@jridgewell/sourcemap-codec": "^1.4.10"
@@ -2997,6 +2999,29 @@
       "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.5.tgz",
       "integrity": "sha512-Vo+PSpZG2/fmgmiNzYK9qWRh8h/CHrwD0mo1h1DzL4yzHNSfWYujGTYsWGreD000gcgmZ7K4Ys6Tx9TxtsKdDw=="
     },
+    "node_modules/@monaco-editor/loader": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@monaco-editor/loader/-/loader-1.5.0.tgz",
+      "integrity": "sha512-hKoGSM+7aAc7eRTRjpqAZucPmoNOC4UUbknb/VNoTkEIkCPhqV8LfbsgM1webRM7S/z21eHEx9Fkwx8Z/C/+Xw==",
+      "license": "MIT",
+      "dependencies": {
+        "state-local": "^1.0.6"
+      }
+    },
+    "node_modules/@monaco-editor/react": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/@monaco-editor/react/-/react-4.7.0.tgz",
+      "integrity": "sha512-cyzXQCtO47ydzxpQtCGSQGOC8Gk3ZUeBXFAxD+CWXYFo5OqZyZUonFl0DwUlTyAfRHntBfw2p3w4s9R6oe1eCA==",
+      "license": "MIT",
+      "dependencies": {
+        "@monaco-editor/loader": "^1.5.0"
+      },
+      "peerDependencies": {
+        "monaco-editor": ">= 0.25.0 < 1",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/@nicolo-ribaudo/eslint-scope-5-internals": {
       "version": "5.1.1-v1",
       "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz",
@@ -3730,6 +3755,38 @@
         "url": "https://github.com/sponsors/gregberge"
       }
     },
+    "node_modules/@testing-library/dom": {
+      "version": "10.4.0",
+      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.0.tgz",
+      "integrity": "sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/code-frame": "^7.10.4",
+        "@babel/runtime": "^7.12.5",
+        "@types/aria-query": "^5.0.1",
+        "aria-query": "5.3.0",
+        "chalk": "^4.1.0",
+        "dom-accessibility-api": "^0.5.9",
+        "lz-string": "^1.5.0",
+        "pretty-format": "^27.0.2"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@testing-library/dom/node_modules/aria-query": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
+      "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "peer": true,
+      "dependencies": {
+        "dequal": "^2.0.3"
+      }
+    },
     "node_modules/@testing-library/jest-dom": {
       "version": "5.17.0",
       "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.17.0.tgz",
@@ -3847,25 +3904,25 @@
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.11.tgz",
       "integrity": "sha512-DcRjDCujK/kCk/cUe8Xz8ZSpm8mS3mNNpta+jGCA6USEDfktlNvm1+IuZ9eTcDbNk41BHwpHHeW+N1lKCz4zOw==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/@tsconfig/node12": {
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/@tsconfig/node12/-/node12-1.0.11.tgz",
       "integrity": "sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/@tsconfig/node14": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/@tsconfig/node14/-/node14-1.0.3.tgz",
       "integrity": "sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/@tsconfig/node16": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/@tsconfig/node16/-/node16-1.0.4.tgz",
       "integrity": "sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/@types/aria-query": {
       "version": "5.0.4",
@@ -6141,7 +6198,7 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz",
       "integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/cross-spawn": {
       "version": "7.0.5",
@@ -6978,6 +7035,17 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/dequal": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/destroy": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
@@ -7050,7 +7118,7 @@
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz",
       "integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=0.3.1"
       }
@@ -11545,6 +11613,15 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "0.477.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.477.0.tgz",
+      "integrity": "sha512-yCf7aYxerFZAbd8jHJxjwe1j7jEMPptjnaOqdYeirFnEy85cNR3/L+o0I875CYFYya+eEVzZSbNuRk8BZPDpVw==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/lz-string": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
@@ -11588,7 +11665,7 @@
       "version": "1.3.6",
       "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
       "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/makeerror": {
       "version": "1.0.12",
@@ -11777,6 +11854,13 @@
         "mkdirp": "bin/cmd.js"
       }
     },
+    "node_modules/monaco-editor": {
+      "version": "0.52.2",
+      "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.52.2.tgz",
+      "integrity": "sha512-GEQWEZmfkOGLdd3XK8ryrfWz3AIP8YymVXiPHEdewrUq7mh0qrKrfHLNCXcbB6sTnMLnOZ3ztSiKcciFUkIJwQ==",
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -15322,6 +15406,12 @@
       "resolved": "https://registry.npmjs.org/stackframe/-/stackframe-1.3.4.tgz",
       "integrity": "sha512-oeVtt7eWQS+Na6F//S4kJ2K2VbRlS9D43mAlMyVpVWovy9o+jfgH8O9agzANzaiLjclA0oYzUXEM4PurhSUChw=="
     },
+    "node_modules/state-local": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/state-local/-/state-local-1.0.7.tgz",
+      "integrity": "sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w==",
+      "license": "MIT"
+    },
     "node_modules/static-eval": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/static-eval/-/static-eval-2.0.2.tgz",
@@ -16269,7 +16359,7 @@
       "version": "10.9.2",
       "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.2.tgz",
       "integrity": "sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@cspotcode/source-map-support": "^0.8.0",
         "@tsconfig/node10": "^1.0.7",
@@ -16312,7 +16402,7 @@
       "version": "8.3.4",
       "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.4.tgz",
       "integrity": "sha512-ueEepnujpqee2o5aIYnvHU6C0A42MNdsIDeqy5BydrkuC5R1ZuUFnm27EeFJGoEHJQgn3uleRvmTXaJgfXbt4g==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "acorn": "^8.11.0"
       },
@@ -16324,7 +16414,7 @@
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz",
       "integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/tsconfig-paths": {
       "version": "3.15.0",
@@ -16509,7 +16599,6 @@
       "version": "5.6.3",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.6.3.tgz",
       "integrity": "sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==",
-      "dev": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -16730,7 +16819,7 @@
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz",
       "integrity": "sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/v8-to-istanbul": {
       "version": "8.1.1",
@@ -18139,7 +18228,7 @@
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz",
       "integrity": "sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=6"
       }

package.json

@@ -2,6 +2,7 @@
   "name": "multimodal-live-api-web-console",
   "version": "0.1.0",
   "dependencies": {
+    "@monaco-editor/react": "^4.7.0",
     "classnames": "^2.5.1",
     "dotenv": "^16.4.1",
     "dotenv-flow": "^4.1.0",
@@ -9,6 +10,7 @@
     "express": "^4.18.2",
     "http-proxy-middleware": "^3.0.3",
     "lodash": "^4.17.21",
+    "lucide-react": "^0.477.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.3.0",

public/index.html

@@ -18,7 +18,7 @@
 	<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/addons/p5.sound.min.js"></script>
 	<script src="https://cdn.jsdelivr.net/gh/molleindustria/p5.play/lib/p5.play.js"></script>
 	<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-	<title>Self-modifying P5.js Sketch</title>
+	<title>Gemini Live API + p5.js</title>
 </head>
 
 <body>
@@ -30,6 +30,9 @@
 		// Function to remove existing sketch instance
 		window.removeSketch = function() {
 			if (mySketch) {
+				if (mySketch._cleanup) {
+					mySketch._cleanup();
+				}
 				mySketch.remove();
 				mySketch = null;
 			}
@@ -45,6 +48,58 @@
 				
 				// Create new sketch instance
 				mySketch = new p5((p) => {
+					// Store container reference in p5 instance
+					p.containerWidth = container.clientWidth;
+					p.containerHeight = container.clientHeight;
+					
+					let resizeTimeout = null;
+					let resizeObserver = null;
+
+					// Update container dimensions when needed
+					const updateContainerSize = () => {
+						const rect = container.getBoundingClientRect();
+						const newWidth = rect.width;
+						const newHeight = rect.height;
+						
+						// Only update if dimensions actually changed
+						if (p.containerWidth !== newWidth || p.containerHeight !== newHeight) {
+							p.containerWidth = newWidth;
+							p.containerHeight = newHeight;
+							if (p.windowResized) {
+								p.windowResized();
+							}
+						}
+					};
+
+					// Debounced resize handler
+					const debouncedResize = () => {
+						if (resizeTimeout) {
+							clearTimeout(resizeTimeout);
+						}
+						resizeTimeout = setTimeout(() => {
+							updateContainerSize();
+							resizeTimeout = null;
+						}, 100); // Debounce for 100ms
+					};
+
+					// Setup resize observer
+					const setupResizeObserver = () => {
+						if (resizeObserver) {
+							resizeObserver.disconnect();
+						}
+						
+						resizeObserver = new ResizeObserver((entries) => {
+							// Avoid processing if container is hidden or detached
+							if (container.offsetParent !== null) {
+								window.requestAnimationFrame(() => {
+									debouncedResize();
+								});
+							}
+						});
+						
+						resizeObserver.observe(container);
+					};
+
 					// Add the sketch code to p5 instance scope
 					const sketchFunction = new Function('p', `
 						with (p) {
@@ -53,7 +108,7 @@
 							// If setup/draw weren't defined, provide defaults
 							if (typeof setup !== 'function') {
 								setup = function() {
-									createCanvas(window.innerWidth, window.innerHeight);
+									createCanvas(containerWidth, containerHeight);
 								}
 							}
 							
@@ -66,7 +121,7 @@
 							// Always ensure we have window resize handling
 							if (typeof windowResized !== 'function') {
 								windowResized = function() {
-									resizeCanvas(window.innerWidth, window.innerHeight);
+									resizeCanvas(containerWidth, containerHeight, true);
 								}
 							}
 							
@@ -84,12 +139,37 @@
 						if (container) {
 							container.innerHTML = "";
 							container.appendChild(p._renderer.canvas);
+							
+							// Fix accessibility tooltip issue
+							if (p._renderer.canvas) {
+								// Remove the default accessibility attributes that cause tooltips
+								p._renderer.canvas.removeAttribute('aria-label');
+								p._renderer.canvas.removeAttribute('role');
+								
+								// Add a custom class to help with styling
+								p._renderer.canvas.classList.add('p5-managed-canvas');
+							}
+							
+							// Setup resize observer after canvas is added
+							setupResizeObserver();
 						}
 					};
 					
 					p.draw = functions.draw.bind(p);
 					p.windowResized = functions.windowResized.bind(p);
-				});
+					
+					// Cleanup when sketch is removed
+					p._cleanup = () => {
+						if (resizeObserver) {
+							resizeObserver.disconnect();
+							resizeObserver = null;
+						}
+						if (resizeTimeout) {
+							clearTimeout(resizeTimeout);
+							resizeTimeout = null;
+						}
+					};
+				}, container);
 				
 				console.log("Successfully created new sketch");
 				return true;
@@ -108,7 +188,7 @@
 			// Create initial empty sketch
 			window.updateSketch(`
 				function setup() {
-					createCanvas(window.innerWidth, window.innerHeight);
+					createCanvas(containerWidth, containerHeight);
 				}
 				
 				function draw() {

src/App.scss

@@ -138,19 +138,92 @@ body {
     position: relative;
     display: flex;
     flex-direction: column;
-    align-items: center;
-    justify-content: center;
+    align-items: flex-start;
+    justify-content: flex-start;
     flex-grow: 1;
     gap: 1rem;
     max-width: 100%;
     overflow: hidden;
+    padding: 20px 40px;
+  }
+
+  .app-title {
+    font-family: "Space Mono", monospace;
+    font-size: 28px;
+    font-weight: 500;
+    color: white;
+    margin-bottom: 0px;
+    text-align: left;
+    display: flex;
+    align-items: baseline;
+    gap: 15px;
+    
+    .subtitle {
+      font-size: 18px;
+      color: #888;
+      font-weight: normal;
+      opacity: 0.8;
+      
+      a {
+        color: inherit;
+        text-decoration: underline;
+        text-underline-offset: 3px;
+        
+        &:hover {
+          opacity: 0.9;
+        }
+      }
+    }
+    
+    @media (max-width: 768px) {
+      font-size: 32px;
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 5px;
+      
+      .subtitle {
+        font-size: 14px;
+      }
+    }
   }
 
   .main-app-area {
     display: flex;
     flex: 1;
-    align-items: center;
-    justify-content: center;
+    align-items: flex-start;
+    justify-content: flex-start;
+    width: 100%;
+    padding: 0;
+  }
+
+  .p5-editor-container {
+    width: 100%;
+    height: calc(100% - 100px);
+    border-radius: 12px;
+    border: 2px solid var(--gray-600);
+    overflow: hidden;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+    background-color: var(--Neutral-10);
+    
+    @media (max-width: 1024px) {
+      width: 100%;
+    }
+    
+    @media (max-width: 768px) {
+      width: 100%;
+      height: calc(100vh - 160px);
+      margin-bottom: 20px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      
+      // Ensure P5Sketch component fills the container on mobile
+      > div {
+        width: 100% !important;
+        height: 100% !important;
+        border-radius: inherit;
+      }
+    }
   }
 
   .function-call {
@@ -180,3 +253,18 @@ body {
     max-width: 320px;
   }
 }
+
+/* Fix for p5.js canvas accessibility tooltips */
+canvas#defaultCanvas0,
+[id^="defaultCanvas"],
+.p5Canvas,
+.p5-managed-canvas {
+  &::before,
+  &::after {
+    display: none !important;
+    content: none !important;
+    opacity: 0 !important;
+    visibility: hidden !important;
+    pointer-events: none !important;
+  }
+}

src/App.tsx

@@ -18,6 +18,7 @@ import { useRef, useState, useEffect } from "react";
 import "./App.scss";
 import { LiveAPIProvider } from "./contexts/LiveAPIContext";
 import SidePanel from "./components/side-panel/SidePanel";
+import { P5WithEditor } from "./components/p5/P5WithEditor";
 import { P5Sketch } from "./components/p5/P5Sketch";
 import ControlTray from "./components/control-tray/ControlTray";
 import { IOSModal } from "./components/ios-modal/IOSModal";
@@ -31,23 +32,37 @@ function App() {
   // either the screen capture, the video or null, if null we hide it
   const [videoStream, setVideoStream] = useState<MediaStream | null>(null);
   const [showIOSModal, setShowIOSModal] = useState(false);
+  const [isMobile, setIsMobile] = useState(window.innerWidth < 768);
 
   useEffect(() => {
-    // Only show the modal on iOS devices
+    const handleResize = () => {
+      setIsMobile(window.innerWidth < 768);
+    };
+
+    window.addEventListener('resize', handleResize);
+    
+    // Check iOS on mount
     if (isIOS()) {
       setShowIOSModal(true);
     }
+
+    return () => window.removeEventListener('resize', handleResize);
   }, []);
 
   return (
     <div className="App">
       <LiveAPIProvider>
         <div className="streaming-console">
-          <SidePanel />
+          <SidePanel initialCollapsed={true} />
           <main>
+            <h1 className="app-title">
+              LiveCoder <span className="subtitle">Built with <a target="_blank" href="https://ai.google.dev/gemini-api/docs/multimodal-live">Google Live API</a> + <a target="_blank" href="https://p5js.org/reference/">p5.js</a></span>
+            </h1>
             <div className="main-app-area">
               {/* APP goes here */}
-              <P5Sketch />
+              <div className="p5-editor-container">
+                {isMobile ? <P5Sketch /> : <P5WithEditor />}
+              </div>
             </div>
 
             <video

src/components/p5/P5Sketch.tsx

@@ -50,8 +50,15 @@ function P5SketchComponent() {
     setConfig({
       model: "models/gemini-2.0-flash-exp",
       generationConfig: {
-        temperature: 0.1, // Lower temperature for more deterministic outputs
-        responseModalities: "text",
+        temperature: 0.1,
+        responseModalities: "audio",
+        speechConfig: {
+          voiceConfig: {
+            prebuiltVoiceConfig: {
+              voiceName: "Puck"
+            }
+          }
+        }
       },
       systemInstruction: {
         parts: [
@@ -66,12 +73,12 @@ When a user requests a sketch:
 
 You can create sketches using:
 - Basic shapes, colors, and animations
-- Mouse and keyboard interaction
+- Mouse and keyboard interaction (mouseX, mouseY, keyPressed, keyCode, etc.)
 - Sound effects (p5.sound library)
 - Sprite-based games (p5.play library)
 - Full window canvas with automatic resizing
 
-Focus on creating visually engaging and interactive experiences.`
+Focus on creating visually engaging and interactive experiences. As soon as the user requests a sketch, confirm you heard them, THEN you should create the sketch and then explain what it does and how to interact with it. Be EXTREMELY brief and pithy.`
           },
         ],
       },
@@ -135,11 +142,13 @@ Focus on creating visually engaging and interactive experiences.`
     <div
       ref={containerRef}
       style={{
-        width: "100vw",
-        height: "100vh",
+        width: "100%",
+        height: "100%",
         alignItems: "center",
         justifyContent: "center",
         display: "flex",
+        position: "relative",
+        background: "#000"
       }}
     />
   );

src/components/p5/P5WithEditor.tsx

@@ -0,0 +1,617 @@
+/**
+ * Copyright 2024 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { SchemaType } from "@google/generative-ai";
+import { useEffect, useRef, memo, useState, useCallback } from "react";
+import { useLiveAPIContext } from "../../contexts/LiveAPIContext";
+import type { ToolCall } from "../../multimodal-live-types";
+import { Editor } from "@monaco-editor/react";
+import "./p5-with-editor.scss";
+import { Send, Code } from "lucide-react";
+
+// Add type definitions for window functions
+declare global {
+  interface Window {
+    initSketch: (container: HTMLElement) => void;
+    updateSketch: (code: string, container: HTMLElement) => boolean;
+    removeSketch: () => void;
+  }
+}
+
+interface SketchArgs {
+  sketch: string;
+}
+
+function P5WithEditorComponent() {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const editorPanelRef = useRef<HTMLDivElement>(null);
+  const { client, setConfig } = useLiveAPIContext();
+  const [editorContent, setEditorContent] = useState<string>("");
+  const [displayedContent, setDisplayedContent] = useState<string>("");
+  const [isResizing, setIsResizing] = useState(false);
+  const [editorWidth, setEditorWidth] = useState(40); // percentage
+  const [editorHeight, setEditorHeight] = useState(50); // percentage for mobile
+  const [isMobile, setIsMobile] = useState(window.innerWidth < 768);
+  const [isSending, setIsSending] = useState(false);
+  const [isAnimatingCode, setIsAnimatingCode] = useState(false);
+  const [cursorPosition, setCursorPosition] = useState<{ lineNumber: number, column: number } | null>(null);
+  const editorRef = useRef<any>(null);
+  const animationTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+  // Function to handle editor mounting
+  const handleEditorDidMount = (editor: any) => {
+    editorRef.current = editor;
+  };
+
+  // Helper function to calculate cursor position from text position
+  const calculateCursorPosition = (text: string, position: number): { lineNumber: number, column: number } => {
+    const textUpToPosition = text.substring(0, position);
+    const lines = textUpToPosition.split('\n');
+    const lineNumber = lines.length;
+    const column = lines[lines.length - 1].length + 1;
+    
+    return { lineNumber, column };
+  };
+
+  // Helper function to animate code reveal
+  const animateCodeReveal = (newCode: string, currentPosition = 0, chunkSize = 3) => {
+    if (currentPosition >= newCode.length) {
+      // Add a small delay before finishing to let the user see the completed code
+      setTimeout(() => {
+        setIsAnimatingCode(false);
+        setCursorPosition(null);
+        
+        // Clear any decorations when animation is complete
+        if (editorRef.current) {
+          try {
+            const model = editorRef.current.getModel();
+            if (model) {
+              editorRef.current.deltaDecorations([], []);
+            }
+          } catch (e) {
+            console.error("Error clearing decorations:", e);
+          }
+        }
+      }, 500);
+      
+      return;
+    }
+
+    setIsAnimatingCode(true);
+    
+    // Calculate next chunk to reveal
+    const nextPosition = Math.min(currentPosition + chunkSize, newCode.length);
+    const nextChunk = newCode.substring(0, nextPosition);
+    
+    // Update displayed content
+    setDisplayedContent(nextChunk);
+    
+    // Update cursor position
+    const cursorPos = calculateCursorPosition(nextChunk, nextPosition);
+    setCursorPosition(cursorPos);
+    
+    // Move editor cursor to the current position if editor is available
+    if (editorRef.current) {
+      try {
+        editorRef.current.setPosition(cursorPos);
+        editorRef.current.revealPositionInCenter(cursorPos);
+        
+        // Add decoration to highlight the current line
+        const model = editorRef.current.getModel();
+        if (model) {
+          const decorations = [{
+            range: {
+              startLineNumber: cursorPos.lineNumber,
+              startColumn: 1,
+              endLineNumber: cursorPos.lineNumber,
+              endColumn: model.getLineMaxColumn(cursorPos.lineNumber)
+            },
+            options: {
+              isWholeLine: true,
+              className: 'current-line-highlight',
+              glyphMarginClassName: 'current-line-glyph'
+            }
+          }];
+          
+          editorRef.current.deltaDecorations([], decorations);
+        }
+      } catch (e) {
+        console.error("Error setting cursor position or decorations:", e);
+      }
+    }
+    
+    // Schedule next chunk reveal with variable speed
+    // Start faster, then slow down a bit for longer code
+    const baseDelay = 5; // Base delay in ms
+    const progressFactor = Math.min(currentPosition / newCode.length * 3, 1); // Slow down as we progress
+    const randomFactor = Math.random() * 10; // Add some randomness
+    
+    // Calculate delay: faster at start, slower as we progress
+    const delay = baseDelay + (progressFactor * 15) + randomFactor;
+    
+    animationTimeoutRef.current = setTimeout(() => {
+      // Increase chunk size as we progress for a more natural typing effect
+      const newChunkSize = Math.floor(chunkSize + (progressFactor * 5));
+      animateCodeReveal(newCode, nextPosition, newChunkSize);
+    }, delay);
+  };
+
+  // Clean up animation timeout on unmount
+  useEffect(() => {
+    return () => {
+      if (animationTimeoutRef.current) {
+        clearTimeout(animationTimeoutRef.current);
+      }
+    };
+  }, []);
+
+  // Helper function to format code for the model
+  const formatCodeForModel = (code: string): string => {
+    // Trim whitespace and ensure it's not too long
+    const trimmedCode = code.trim();
+    
+    // If code is very long, add a note about it
+    if (trimmedCode.length > 5000) {
+      const truncatedCode = trimmedCode.substring(0, 5000);
+      return `${truncatedCode}\n\n// Note: Code was truncated as it was too long. This is just the first part of the code.`;
+    }
+    
+    return trimmedCode;
+  };
+
+  useEffect(() => {
+    const handleResize = () => {
+      setIsMobile(window.innerWidth < 768);
+    };
+
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  // Intercept messages to include the current editor content
+  useEffect(() => {
+    // Store the original send method
+    const originalSend = client.send.bind(client);
+    
+    // Override the send method to include editor content
+    client.send = (parts: any, turnComplete = true) => {
+      // Convert to array if it's not already
+      const partsArray = Array.isArray(parts) ? parts : [parts];
+      
+      // Check if there's text content and we have editor content
+      const hasTextContent = partsArray.some(part => part.text);
+      
+      if (hasTextContent && editorContent) {
+        // Show sending indicator
+        setIsSending(true);
+        
+        // Format the code before sending
+        const formattedCode = formatCodeForModel(editorContent);
+        
+        // Add the current editor content as context
+        partsArray.push({
+          text: `\n\n--- CURRENT P5.JS CODE IN EDITOR ---\n\`\`\`javascript\n${formattedCode}\n\`\`\`\n\nPlease consider this code when responding to my request. If I'm asking for changes or improvements, use this as the starting point.`
+        });
+        
+        // Hide sending indicator after a short delay
+        setTimeout(() => setIsSending(false), 1000);
+      }
+      
+      // Call the original send method with our modified parts
+      return originalSend(partsArray, turnComplete);
+    };
+    
+    // Cleanup: restore the original method when component unmounts
+    return () => {
+      client.send = originalSend;
+    };
+  }, [client, editorContent]);
+
+  useEffect(() => {
+    if (containerRef.current) {
+      window.initSketch(containerRef.current);
+      
+      // Add a test sketch to verify the component is working
+      const testSketch = `
+// Press ▶ Play to connect to the
+// Gemini 2.0 Live API
+// and start chatting to change this code
+
+let boids = [];
+
+function setup() {
+  createCanvas(containerWidth, containerHeight);
+  // Create 30 boids with random positions and velocities
+  for (let i = 0; i < 30; i++) {
+    boids.push({
+      pos: createVector(random(width), random(height)),
+      vel: p5.Vector.random2D().mult(random(2, 3)),
+      col: "#2d2d2d"
+    });
+  }
+}
+
+function draw() {
+  background(30, 30, 30);
+  
+  let mouse = createVector(mouseX, mouseY);
+  
+  for (let boid of boids) {
+    // Update velocity based on simple rules
+    let sep = createVector();
+    let coh = createVector();
+    let ali = createVector();
+    let count = 0;
+    
+    // Calculate all forces in one loop
+    for (let other of boids) {
+      if (other === boid) continue;
+      let d = p5.Vector.dist(boid.pos, other.pos);
+      
+      if (d < 50) {
+        // Separation (avoid others)
+        let diff = p5.Vector.sub(boid.pos, other.pos);
+        diff.div(d);
+        sep.add(diff);
+        
+        // Alignment (match velocity)
+        ali.add(other.vel);
+        
+        // Cohesion (move toward others)
+        coh.add(other.pos);
+        
+        count++;
+      }
+    }
+    
+    if (count > 0) {
+      // Apply flocking behavior
+      sep.mult(0.3);
+      ali.div(count).mult(0.2);
+      coh.div(count).sub(boid.pos).mult(0.1);
+      
+      boid.vel.add(sep).add(ali).add(coh);
+      
+      // Add subtle mouse attraction
+      let mouseForce = p5.Vector.sub(mouse, boid.pos);
+      mouseForce.mult(0.01);
+      boid.vel.add(mouseForce);
+    }
+    
+    // Limit speed and update position
+    boid.vel.limit(4);
+    boid.pos.add(boid.vel);
+    
+    // Wrap around edges
+    boid.pos.x = (boid.pos.x + width) % width;
+    boid.pos.y = (boid.pos.y + height) % height;
+    
+    // Draw boid
+    push();
+    translate(boid.pos.x, boid.pos.y);
+    rotate(boid.vel.heading());
+    fill(boid.col);
+    noStroke();
+    triangle(16, 0, -8, 6, -8, -6);
+    pop();
+  }
+}
+
+function windowResized() {
+  resizeCanvas(containerWidth, containerHeight);
+}
+      `;
+      
+      // Set the editor content and displayed content
+      setEditorContent(testSketch);
+      setDisplayedContent(testSketch);
+      
+      // Update the sketch with the test code
+      window.updateSketch(testSketch, containerRef.current);
+    }
+    
+    // Cleanup on unmount
+    return () => {
+      window.removeSketch();
+    };
+  }, []);
+
+  useEffect(() => {
+    setConfig({
+      model: "models/gemini-2.0-flash-exp",
+      generationConfig: {
+        temperature: 0.1,
+        responseModalities: "audio",
+        speechConfig: {
+          voiceConfig: {
+            prebuiltVoiceConfig: {
+              voiceName: "Puck"
+            }
+          }
+        }
+      },
+      systemInstruction: {
+        parts: [
+          {
+            text: `You are a P5.js creative coding expert that helps users create interactive sketches.
+
+When a user requests a sketch:
+1. Always use the updateSketch function to create or modify sketches
+2. NEVER output code directly in the response - only use the function
+3. After the sketch is created, explain what the sketch does and how to interact with it
+4. If the user's request is unclear, just take your best guess to create a sketch
+
+You can create sketches using:
+- Basic shapes, colors, and animations (do not ever try to import a photo or image)
+- Mouse and keyboard interaction
+- Sound effects (p5.sound library)
+- Sprite-based games (p5.play library)
+- Full window canvas with automatic resizing
+
+Focus on creating visually engaging and interactive experiences. As soon as the user requests a sketch, confirm you heard them, THEN you should create the sketch and then explain what it does and how to interact with it. Be EXTREMELY brief and pithy.`
+          },
+        ],
+      },
+      tools: [
+        {
+          functionDeclarations: [
+            {
+              name: "updateSketch",
+              description: "Create or update the P5.js sketch with new code. The sketch will run in a full-window canvas.",
+              parameters: {
+                type: SchemaType.OBJECT,
+                properties: {
+                  sketch: {
+                    type: SchemaType.STRING,
+                    description: "Complete P5.js sketch code including all variable declarations, setup(), draw(), and any additional functions needed. The code should be a complete, self-contained sketch."
+                  }
+                },
+                required: ["sketch"]
+              }
+            }
+          ],
+        },
+      ],
+    });
+  }, [setConfig]);
+
+  useEffect(() => {
+    const onToolCall = async (toolCall: ToolCall) => {
+      console.log("Received tool call:", toolCall);
+      
+      if (!toolCall.functionCalls || toolCall.functionCalls.length === 0) {
+        console.error("No function calls in tool call");
+        return;
+      }
+      
+      for (const fc of toolCall.functionCalls) {
+        if (fc.name === "updateSketch") {
+          if (!containerRef.current) {
+            console.error("Container ref is not available");
+            await client.sendToolResponse({
+              functionResponses: [
+                {
+                  response: { 
+                    success: false,
+                    message: "Container not available"
+                  },
+                  id: fc.id,
+                },
+              ],
+            });
+            continue;
+          }
+          
+          try {
+            // Parse the arguments from the function call
+            if (!fc.args) {
+              throw new Error("No arguments provided");
+            }
+            
+            const args = fc.args as SketchArgs;
+            if (!args.sketch) {
+              throw new Error("No sketch code provided");
+            }
+            
+            console.log("Sketch code received:", args.sketch);
+            
+            // First update the editor content state (but not displayed yet)
+            setEditorContent(args.sketch);
+            
+            // Clear any existing animation
+            if (animationTimeoutRef.current) {
+              clearTimeout(animationTimeoutRef.current);
+            }
+            
+            // Start the animation to reveal the code
+            animateCodeReveal(args.sketch);
+            
+            // Update the sketch immediately (don't wait for animation)
+            const result = window.updateSketch(args.sketch, containerRef.current);
+            console.log("Sketch update result:", result);
+            
+            // Send the function response back to Gemini
+            await client.sendToolResponse({
+              functionResponses: [
+                {
+                  response: { 
+                    success: result,
+                    message: result ? "Sketch updated successfully" : "Failed to update sketch"
+                  },
+                  id: fc.id,
+                },
+              ],
+            });
+          } catch (error) {
+            console.error("Error handling updateSketch function call:", error);
+            // Send error response back to Gemini
+            await client.sendToolResponse({
+              functionResponses: [
+                {
+                  response: { 
+                    success: false,
+                    message: `Error: ${error}`
+                  },
+                  id: fc.id,
+                },
+              ],
+            });
+          }
+        } else {
+          console.error("Unhandled function call:", fc.name);
+        }
+      }
+    };
+
+    client.on("toolcall", onToolCall);
+    return () => {
+      client.off("toolcall", onToolCall);
+    };
+  }, [client]);
+
+  const handleEditorChange = (value: string | undefined) => {
+    if (!value) {
+      console.warn("Editor value is undefined or empty");
+      return;
+    }
+    
+    // Always update both editor content and displayed content when user types
+    setEditorContent(value);
+    setDisplayedContent(value);
+    
+    if (!containerRef.current) {
+      console.warn("Container ref is not available");
+      return;
+    }
+    
+    try {
+      console.log("Updating sketch from editor");
+      const result = window.updateSketch(value, containerRef.current);
+      console.log("Editor update result:", result);
+    } catch (error) {
+      console.error("Error updating sketch from editor:", error);
+    }
+  };
+
+  const startResizing = useCallback((e: React.MouseEvent) => {
+    setIsResizing(true);
+    e.preventDefault();
+  }, []);
+
+  const stopResizing = useCallback(() => {
+    setIsResizing(false);
+  }, []);
+
+  const resize = useCallback((e: MouseEvent) => {
+    if (isResizing && editorPanelRef.current) {
+      if (isMobile) {
+        // Vertical resizing for mobile
+        const containerHeight = editorPanelRef.current.parentElement?.clientHeight || 0;
+        const newHeight = (e.clientY / containerHeight) * 100;
+        setEditorHeight(Math.min(Math.max(20, newHeight), 80)); // Limit between 20% and 80%
+      } else {
+        // Horizontal resizing for desktop
+        const containerWidth = editorPanelRef.current.parentElement?.clientWidth || 0;
+        const newWidth = (e.clientX / containerWidth) * 100;
+        setEditorWidth(Math.min(Math.max(20, newWidth), 80)); // Limit between 20% and 80%
+        
+        // Force p5.js to update its dimensions
+        if (containerRef.current) {
+          // Small delay to let the DOM update
+          setTimeout(() => {
+            const event = new Event('resize');
+            window.dispatchEvent(event);
+          }, 50);
+        }
+      }
+    }
+  }, [isResizing, isMobile]);
+
+  useEffect(() => {
+    if (isResizing) {
+      window.addEventListener('mousemove', resize);
+      window.addEventListener('mouseup', stopResizing);
+    }
+    return () => {
+      window.removeEventListener('mousemove', resize);
+      window.removeEventListener('mouseup', stopResizing);
+    };
+  }, [isResizing, resize, stopResizing]);
+
+  // Add a new useEffect to handle editor width changes
+  useEffect(() => {
+    if (!isMobile && containerRef.current) {
+      // Force p5.js to update its dimensions when editor width changes
+      const event = new Event('resize');
+      window.dispatchEvent(event);
+    }
+  }, [editorWidth, isMobile]);
+
+  return (
+    <div className="p5-with-editor">
+      {/* Editor Panel */}
+      <div 
+        ref={editorPanelRef}
+        className="editor-panel"
+        style={isMobile ? { height: `${editorHeight}%` } : { width: `${editorWidth}%` }}
+      >
+        <Editor
+          height="100%"
+          defaultLanguage="javascript"
+          value={displayedContent}
+          onChange={handleEditorChange}
+          onMount={handleEditorDidMount}
+          theme="vs-dark"
+          options={{
+            minimap: { enabled: false },
+            fontSize: 14,
+            wordWrap: 'on',
+            automaticLayout: true,
+            readOnly: isAnimatingCode, // Make editor read-only during animation
+            cursorBlinking: isAnimatingCode ? 'smooth' : 'blink',
+            cursorStyle: isAnimatingCode ? 'line' : 'line',
+            cursorWidth: isAnimatingCode ? 3 : 1
+          }}
+        />
+        <div 
+          className="resize-handle"
+          onMouseDown={startResizing}
+        />
+        {isSending && (
+          <div className="sending-indicator">
+            <Send size={16} />
+            <span>Sending code</span>
+          </div>
+        )}
+        {isAnimatingCode && (
+          <div className="animation-indicator">
+            <Code size={16} />
+            <span>Receiving code</span>
+          </div>
+        )}
+      </div>
+      
+      {/* Sketch Panel */}
+      <div className="sketch-panel">
+        <div
+          ref={containerRef}
+          className="sketch-container"
+        />
+      </div>
+    </div>
+  );
+}
+
+export const P5WithEditor = memo(P5WithEditorComponent); 

src/components/p5/p5-with-editor.scss

@@ -0,0 +1,203 @@
+.p5-with-editor {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+  border-radius: 10px;
+  
+  @media (max-width: 768px) {
+    flex-direction: column;
+  }
+
+  .editor-panel {
+    width: 40%;
+    height: 100%;
+    border-right: 1px solid #2d2d2d;
+    background: #1e1e1e;
+    position: relative;
+    
+    @media (max-width: 768px) {
+      width: 100%;
+      height: 50%;
+      border-right: none;
+      border-bottom: 1px solid #2d2d2d;
+    }
+    
+    .resize-handle {
+      position: absolute;
+      right: -5px;
+      top: 0;
+      bottom: 0;
+      width: 10px;
+      cursor: col-resize;
+      z-index: 10;
+      
+      @media (max-width: 768px) {
+        right: 0;
+        top: auto;
+        bottom: -5px;
+        width: 100%;
+        height: 10px;
+        cursor: row-resize;
+      }
+      
+      &:hover {
+        background: rgba(255, 255, 255, 0.1);
+      }
+    }
+    
+    .sending-indicator {
+      position: absolute;
+      top: 10px;
+      right: 10px;
+      background-color: #1f94ff;
+      color: white;
+      padding: 8px 12px;
+      border-radius: 20px;
+      font-size: 13px;
+      font-weight: 500;
+      z-index: 20;
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      box-shadow: 0 2px 10px rgba(31, 148, 255, 0.4);
+      animation: slideInRight 0.3s ease-out, pulseBlue 2s infinite;
+    }
+    
+    .animation-indicator {
+      position: absolute;
+      top: 10px;
+      left: 10px;
+      background-color: #0d9c53;
+      color: white;
+      padding: 8px 12px;
+      border-radius: 20px;
+      font-size: 13px;
+      font-weight: 500;
+      z-index: 20;
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      box-shadow: 0 2px 10px rgba(13, 156, 83, 0.4);
+      animation: slideInLeft 0.3s ease-out, pulseGreen 2s infinite;
+      
+      svg {
+        animation: pulse 1.5s ease infinite;
+      }
+    }
+  }
+
+  .sketch-panel {
+    flex: 1;
+    height: 100%;
+    position: relative;
+    min-width: 0;
+    
+    @media (max-width: 768px) {
+      height: 50%;
+    }
+    
+    .sketch-container {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+      background: #000;
+      overflow: hidden;
+
+      canvas {
+        display: block !important;
+        max-width: 100% !important;
+        max-height: 100% !important;
+        position: relative !important;
+        margin: auto;
+        object-fit: contain;
+      }
+      
+      // Fix for p5.js accessibility tooltips
+      canvas[data-testid],
+      canvas#defaultCanvas0,
+      .p5-managed-canvas {
+        &::before,
+        &::after {
+          display: none !important;
+          content: none !important;
+        }
+      }
+    }
+  }
+}
+
+@keyframes fadeInOut {
+  0% { opacity: 0; }
+  20% { opacity: 1; }
+  80% { opacity: 1; }
+  100% { opacity: 0; }
+}
+
+@keyframes pulseBlue {
+  0% { box-shadow: 0 0 5px rgba(31, 148, 255, 0.4); }
+  50% { box-shadow: 0 0 15px rgba(31, 148, 255, 0.7); }
+  100% { box-shadow: 0 0 5px rgba(31, 148, 255, 0.4); }
+}
+
+@keyframes pulseGreen {
+  0% { box-shadow: 0 0 5px rgba(13, 156, 83, 0.4); }
+  50% { box-shadow: 0 0 15px rgba(13, 156, 83, 0.7); }
+  100% { box-shadow: 0 0 5px rgba(13, 156, 83, 0.4); }
+}
+
+@keyframes slideInRight {
+  from { transform: translateX(20px); opacity: 0; }
+  to { transform: translateX(0); opacity: 1; }
+}
+
+@keyframes slideInLeft {
+  from { transform: translateX(-20px); opacity: 0; }
+  to { transform: translateX(0); opacity: 1; }
+}
+
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+@keyframes pulse {
+  0% { transform: scale(1); }
+  50% { transform: scale(1.2); }
+  100% { transform: scale(1); }
+}
+
+@keyframes ellipsis {
+  0% { content: '.'; }
+  33% { content: '..'; }
+  66% { content: '...'; }
+  100% { content: '.'; }
+}
+
+// Editor line highlighting
+.current-line-highlight {
+  background-color: rgba(13, 156, 83, 0.1) !important;
+  border-left: 2px solid #0d9c53 !important;
+}
+
+.current-line-glyph {
+  background-color: #0d9c53;
+  width: 4px !important;
+  margin-left: 3px;
+}
+
+// Enhance cursor visibility during animation
+:global(.monaco-editor .cursor) {
+  transition: all 0.1s ease;
+}
+
+// Add a subtle typing sound effect visual cue
+@keyframes cursorPulse {
+  0% { opacity: 1; }
+  50% { opacity: 0.5; }
+  100% { opacity: 1; }
+} 

src/components/side-panel/SidePanel.tsx

@@ -30,9 +30,13 @@ const filterOptions = [
   { value: "none", label: "All" },
 ];
 
-export default function SidePanel() {
+interface SidePanelProps {
+  initialCollapsed?: boolean;
+}
+
+export default function SidePanel({ initialCollapsed = false }: SidePanelProps) {
   const { connected, client } = useLiveAPIContext();
-  const [open, setOpen] = useState(window.innerWidth >= 768);
+  const [open, setOpen] = useState(!initialCollapsed && window.innerWidth >= 768);
   const [isMobile, setIsMobile] = useState(window.innerWidth < 768);
   const loggerRef = useRef<HTMLDivElement>(null);
   const loggerLastHeightRef = useRef<number>(-1);
@@ -43,7 +47,9 @@ export default function SidePanel() {
     const handleResize = () => {
       const mobileScreen = window.innerWidth < 768;
       setIsMobile(mobileScreen);
-      setOpen(!mobileScreen);
+      if (!initialCollapsed) {
+        setOpen(!mobileScreen);
+      }
     };
 
     // Initial check
@@ -54,7 +60,7 @@ export default function SidePanel() {
 
     // Cleanup
     return () => window.removeEventListener('resize', handleResize);
-  }, []);
+  }, [initialCollapsed]);
 
   const [textInput, setTextInput] = useState("");
   const [selectedOption, setSelectedOption] = useState<{