From a6bcab7fe07eae09ef17bfc2995c7338e92b49e9 Mon Sep 17 00:00:00 2001
From: Zane Staggs <zane@squareup.com>
Date: Wed, 9 Jul 2025 14:24:50 -0700
Subject: [PATCH] fix browser console warnings

---
 ui/desktop/index.html                      |  1 +
 ui/desktop/package-lock.json               | 23 ++++++--------------
 ui/desktop/package.json                    |  2 +-
 ui/desktop/src/components/hub.tsx          |  8 +++----
 ui/desktop/src/components/ui/button.tsx    | 25 +++++++++++-----------
 ui/desktop/src/hooks/use-text-animator.tsx |  2 --
 ui/desktop/src/main.ts                     |  8 +++----
 7 files changed, 29 insertions(+), 40 deletions(-)

diff --git a/ui/desktop/index.html b/ui/desktop/index.html
index 564e1f0e60..3f8c175128 100644
--- a/ui/desktop/index.html
+++ b/ui/desktop/index.html
@@ -2,6 +2,7 @@
 <html>
   <head>
     <meta charset="UTF-8" />
+    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline'; img-src 'self' data: https:; connect-src 'self' http://127.0.0.1:* https://api.github.com https://github.com https://objects.githubusercontent.com; object-src 'none'; frame-src 'none'; font-src 'self' data: https:; media-src 'self' mediastream:; form-action 'none'; base-uri 'self'; manifest-src 'self'; worker-src 'self';" />
     <title>Goose</title>
     <script>
       // Initialize theme before any content loads
diff --git a/ui/desktop/package-lock.json b/ui/desktop/package-lock.json
index 7781d913f9..dbd4db20d3 100644
--- a/ui/desktop/package-lock.json
+++ b/ui/desktop/package-lock.json
@@ -49,7 +49,7 @@
         "react-router-dom": "^7.6.2",
         "react-select": "^5.9.0",
         "react-syntax-highlighter": "^15.6.1",
-        "react-toastify": "^8.0.0",
+        "react-toastify": "^10.0.0",
         "react-window": "^1.8.11",
         "remark-gfm": "^4.0.1",
         "split-type": "^0.3.4",
@@ -14972,25 +14972,16 @@
       }
     },
     "node_modules/react-toastify": {
-      "version": "8.2.0",
-      "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-8.2.0.tgz",
-      "integrity": "sha512-Pg2Ju7NngAamarFvLwqrFomJ57u/Ay6i6zfLurt/qPynWkAkOthu6vxfqYpJCyNhHRhR4hu7+bySSeWWJu6PAg==",
+      "version": "10.0.6",
+      "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-10.0.6.tgz",
+      "integrity": "sha512-yYjp+omCDf9lhZcrZHKbSq7YMuK0zcYkDFTzfRFgTXkTFHZ1ToxwAonzA4JI5CxA91JpjFLmwEsZEgfYfOqI1A==",
       "license": "MIT",
       "dependencies": {
-        "clsx": "^1.1.1"
+        "clsx": "^2.1.0"
       },
       "peerDependencies": {
-        "react": ">=16",
-        "react-dom": ">=16"
-      }
-    },
-    "node_modules/react-toastify/node_modules/clsx": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
-      "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
+        "react": ">=18",
+        "react-dom": ">=18"
       }
     },
     "node_modules/react-transition-group": {
diff --git a/ui/desktop/package.json b/ui/desktop/package.json
index 7ad7def669..bf888b0fb8 100644
--- a/ui/desktop/package.json
+++ b/ui/desktop/package.json
@@ -74,7 +74,7 @@
     "react-router-dom": "^7.6.2",
     "react-select": "^5.9.0",
     "react-syntax-highlighter": "^15.6.1",
-    "react-toastify": "^8.0.0",
+    "react-toastify": "^10.0.0",
     "react-window": "^1.8.11",
     "remark-gfm": "^4.0.1",
     "split-type": "^0.3.4",
diff --git a/ui/desktop/src/components/hub.tsx b/ui/desktop/src/components/hub.tsx
index f368281832..d7f8c94f6c 100644
--- a/ui/desktop/src/components/hub.tsx
+++ b/ui/desktop/src/components/hub.tsx
@@ -92,7 +92,7 @@ export default function Hub({
           <>
             {setIsGoosehintsModalOpen && (
               <Tooltip delayDuration={500}>
-                <TooltipTrigger className="w-full">
+                <TooltipTrigger asChild className="w-full">
                   <Button
                     onClick={() => setIsGoosehintsModalOpen(true)}
                     className="px-3"
@@ -114,7 +114,7 @@ export default function Hub({
             {recipeConfig ? (
               <>
                 <Tooltip delayDuration={500}>
-                  <TooltipTrigger className="w-full">
+                  <TooltipTrigger asChild className="w-full">
                     <Button
                       onClick={() => {
                         window.electron.createChatWindow(
@@ -141,7 +141,7 @@ export default function Hub({
                 </Tooltip>
 
                 <Tooltip delayDuration={500}>
-                  <TooltipTrigger className="w-full">
+                  <TooltipTrigger asChild className="w-full">
                     <Button className="px-3" variant="ghost" size="sm" shape="round">
                       <div className="flex gap-2 items-center text-text-default">
                         <Save className="w-4 h-4" />
@@ -156,7 +156,7 @@ export default function Hub({
               </>
             ) : (
               <Tooltip delayDuration={500}>
-                <TooltipTrigger className="w-full">
+                <TooltipTrigger asChild className="w-full">
                   <Button
                     onClick={() => {
                       window.electron.logInfo('Make Agent button clicked');
diff --git a/ui/desktop/src/components/ui/button.tsx b/ui/desktop/src/components/ui/button.tsx
index 12985ea1c7..04cc74cb62 100644
--- a/ui/desktop/src/components/ui/button.tsx
+++ b/ui/desktop/src/components/ui/button.tsx
@@ -77,27 +77,26 @@ const buttonVariants = cva(
   }
 );
 
-function Button({
-  className,
-  variant,
-  size,
-  asChild = false,
-  shape = 'pill',
-  ...props
-}: React.ComponentProps<'button'> &
-  VariantProps<typeof buttonVariants> & {
-    asChild?: boolean;
-    shape?: 'pill' | 'round';
-  }) {
+const Button = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<'button'> &
+    VariantProps<typeof buttonVariants> & {
+      asChild?: boolean;
+      shape?: 'pill' | 'round';
+    }
+>(({ className, variant, size, asChild = false, shape = 'pill', ...props }, ref) => {
   const Comp = asChild ? Slot : 'button';
 
   return (
     <Comp
       data-slot="button"
       className={cn(buttonVariants({ variant, size, shape, className }))}
+      ref={ref}
       {...props}
     />
   );
-}
+});
+
+Button.displayName = 'Button';
 
 export { Button, buttonVariants };
diff --git a/ui/desktop/src/hooks/use-text-animator.tsx b/ui/desktop/src/hooks/use-text-animator.tsx
index 506033ec25..54ec673f69 100644
--- a/ui/desktop/src/hooks/use-text-animator.tsx
+++ b/ui/desktop/src/hooks/use-text-animator.tsx
@@ -147,11 +147,9 @@ export class TextAnimator {
   }
 
   animate() {
-    console.log('Starting text animation');
     this.reset();
 
     const chars = this.splitter.getChars();
-    console.log('Split characters:', chars.length);
 
     chars.forEach((char, position) => {
       const initialHTML = char.innerHTML;
diff --git a/ui/desktop/src/main.ts b/ui/desktop/src/main.ts
index 0ed2774346..9c7d5f96fd 100644
--- a/ui/desktop/src/main.ts
+++ b/ui/desktop/src/main.ts
@@ -1479,8 +1479,8 @@ app.whenReady().then(async () => {
           "default-src 'self';" +
           // Allow inline styles since we use them in our React components
           "style-src 'self' 'unsafe-inline';" +
-          // Scripts only from our app
-          "script-src 'self';" +
+          // Scripts from our app and inline scripts (for theme initialization)
+          "script-src 'self' 'unsafe-inline';" +
           // Images from our app and data: URLs (for base64 images)
           "img-src 'self' data: https:;" +
           // Connect to our local API and specific external services
@@ -1489,8 +1489,8 @@ app.whenReady().then(async () => {
           "object-src 'none';" +
           // Don't allow any frames
           "frame-src 'none';" +
-          // Font sources
-          "font-src 'self';" +
+          // Font sources - allow self, data URLs, and external fonts
+          "font-src 'self' data: https:;" +
           // Media sources - allow microphone
           "media-src 'self' mediastream:;" +
           // Form actions