Use official logo in Goose web (#3012)

Co-authored-by: Sam Bradbury <Sam Bradbury>

crates/goose-cli/src/commands/web.rs

@@ -199,6 +199,16 @@ async fn serve_static(axum::extract::Path(path): axum::extract::Path<String>) ->
             include_str!("../../static/script.js"),
         )
             .into_response(),
+        "img/logo_dark.png" => (
+            [("content-type", "image/png")],
+            include_bytes!("../../../../documentation/static/img/logo_dark.png").to_vec(),
+        )
+            .into_response(),
+        "img/logo_light.png" => (
+            [("content-type", "image/png")],
+            include_bytes!("../../../../documentation/static/img/logo_light.png").to_vec(),
+        )
+            .into_response(),
         _ => (axum::http::StatusCode::NOT_FOUND, "Not found").into_response(),
     }
 }

crates/goose-cli/static/index.html

@@ -12,13 +12,13 @@
             <h1 id="session-title">Goose Chat</h1>
             <div class="status" id="connection-status">Connecting...</div>
         </header>
-        
+
         <div class="chat-container">
             <div class="messages" id="messages">
                 <div class="welcome-message">
                     <h2>Welcome to Goose!</h2>
                     <p>I'm your AI assistant. How can I help you today?</p>
-                    
+
                     <div class="suggestion-pills">
                         <div class="suggestion-pill" onclick="sendSuggestion('What can you do?')">What can you do?</div>
                         <div class="suggestion-pill" onclick="sendSuggestion('Demo writing and reading files')">Demo writing and reading files</div>
@@ -28,10 +28,10 @@
                     </div>
                 </div>
             </div>
-            
+
             <div class="input-container">
-                <textarea 
-                    id="message-input" 
+                <textarea
+                    id="message-input"
                     placeholder="Type your message here..."
                     rows="3"
                     autofocus
@@ -40,7 +40,7 @@
             </div>
         </div>
     </div>
-    
+
     <script src="/static/script.js"></script>
 </body>
 </html>

crates/goose-cli/static/style.css

@@ -50,6 +50,10 @@
         --tool-bg: #f8f9fa;
         --code-bg: #f5f5f5;
     }
+
+    header h1::before {
+        background-image: url('/static/img/logo_light.png');
+    }
 }
 
 * {
@@ -94,8 +98,14 @@ header h1 {
 }
 
 header h1::before {
-    content: "🪿";
-    font-size: 1.5rem;
+    content: "";
+    width: 32px;
+    height: 32px;
+    background-image: url('/static/img/logo_dark.png');
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+    display: inline-block;
 }
 
 .status {
@@ -460,20 +470,20 @@ header h1::before {
         padding: 1rem;
         gap: 1rem;
     }
-    
+
     .message {
         max-width: 90%;
         padding: 0.875rem 1rem;
     }
-    
+
     .input-container {
         padding: 1rem;
     }
-    
+
     header {
         padding: 0.75rem 1rem;
     }
-    
+
     .welcome-message {
         padding: 2rem 1rem;
     }