fix gui client initialization when using an external backend (#4669)

Signed-off-by: Ignasi Barrera <nacx@apache.org>

CONTRIBUTING.md

@@ -93,6 +93,28 @@ This command regenerates `ui/desktop/openapi.json` and then runs the UI's
 
 Changes to the API should be made in the Rust source under `crates/goose-server/src/`.
 
+### Debugging
+
+To debug the Goose server, you can run it from your preferred IDE. How to configure the command
+to start the server will depend on your IDE. The command to run is:
+
+```
+export GOOSE_SERVER__SECRET_KEY=test
+cargo run --package goose-server --bin goosed -- agent   # or: `just run-server`
+```
+
+The server will start listening on port `3000` by default, but this can be changed by setting the
+`GOOSE_PORT` environment variable.
+
+Once the server is running, you can start a UI and connect it to the server by running:
+
+```
+just debug-ui
+```
+
+The UI will now be connected to the server you started in your IDE, allowing you to set breakpoints
+and step through the server code as you interact with the UI.
+
 ## Creating a fork
 
 To fork the repository:

Justfile

@@ -196,7 +196,7 @@ run-docs:
 # Run server
 run-server:
     @echo "Running server..."
-    cargo run -p goose-server
+    cargo run -p goose-server --bin goosed agent
 
 # Check if OpenAPI schema is up-to-date
 check-openapi-schema: generate-openapi

ui/desktop/src/goosed.ts

@@ -47,10 +47,20 @@ const checkServerStatus = async (): Promise<boolean> => {
 
 const connectToExternalBackend = async (
   workingDir: string,
-  port: number = 3000
+  port: number = 3000,
+  serverSecret: string
 ): Promise<[number, string, ChildProcess]> => {
   log.info(`Using external goosed backend on port ${port}`);
 
+  // Configure the client BEFORE checking server status
+  client.setConfig({
+    baseUrl: `http://127.0.0.1:${port}`,
+    headers: {
+      'Content-Type': 'application/json',
+      'X-Secret-Key': serverSecret,
+    },
+  });
+
   const isReady = await checkServerStatus();
   if (!isReady) {
     throw new Error(`External goosed server not accessible on port ${port}`);
@@ -94,7 +104,7 @@ export const startGoosed = async (
   dir = path.resolve(path.normalize(dir));
 
   if (process.env.GOOSE_EXTERNAL_BACKEND) {
-    return connectToExternalBackend(dir, 3000);
+    return connectToExternalBackend(dir, 3000, serverSecret);
   }
 
   // Validate that the directory actually exists and is a directory