Updating docs to match new UI (#3552)

documentation/docs/getting-started/installation.md

@@ -7,7 +7,7 @@ import RateLimits from '@site/src/components/RateLimits';
 import MacDesktopInstallButtons from '@site/src/components/MacDesktopInstallButtons';
 import WindowsDesktopInstallButtons from '@site/src/components/WindowsDesktopInstallButtons';
 import LinuxDesktopInstallButtons from '@site/src/components/LinuxDesktopInstallButtons';
-
+import { PanelLeft } from 'lucide-react';
 
 # Install Goose
 
@@ -291,10 +291,12 @@ Goose works with a set of [supported LLM providers][providers], and you'll need
   <TabItem value="ui" label="Goose Desktop" default>
   **To update your LLM provider and API key:**
 
-    1. Click on the three dots in the top-right corner.
+    1. Click the <PanelLeft className="inline" size={16} /> button in the top-left to open the sidebar.
-    2. Select `Provider Settings` from the menu.
+    2. Click the `Settings` button on the sidebar.
-    2. Choose a provider from the list.
+    3. Click the `Models` tab.
-    3. Click Edit, enter your API key, and click `Set as Active`.
+    4. Click `Configure Providers`
+    5. Choose your provider
+    6. Click `Configure`, enter your API key, and click `Submit`.
 
   </TabItem>
   <TabItem value="cli" label="Goose CLI">
@@ -361,8 +363,8 @@ While core configurations are shared between interfaces, extensions have flexibi
 <Tabs groupId="interface">
     <TabItem value="ui" label="Goose Desktop" default>
         Navigate to shared configurations through:
-        1. Click `...` in the upper right corner
+        1. Click the <PanelLeft className="inline" size={16} /> button in the top-left to open the sidebar.
-        2. Click `Advanced Settings`
+        2. Click the `Settings` button on the sidebar.
     </TabItem>
     <TabItem value="cli" label="Goose CLI">
         Use the following command to manage shared configurations:

documentation/docs/getting-started/providers.md

@@ -5,6 +5,7 @@ title: Configure LLM Provider
 
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import { PanelLeft } from 'lucide-react';
 
 # Supported LLM Providers
 
@@ -57,16 +58,18 @@ To configure your chosen provider or see available options, run `goose configure
 <Tabs groupId="interface">
   <TabItem value="ui" label="Goose Desktop" default>
   **To update your LLM provider and API key:** 
-  1. Click the gear on the Goose Desktop toolbar
+  1. Click the <PanelLeft className="inline" size={16} /> button in the top-left to open the sidebar
-  1. Click `Advanced Settings`
+  2. Click the `Settings` button on the sidebar
-  1. Under `Models`, click `Configure provider`
+  3. Click the `Models` tab
-  1. Click `Configure` on the LLM provider to update
+  4. Click `Configure Providers`
-  1. Add additional configurations (API key, host, etc) then press `submit`
+  5. Click `Configure` on the LLM provider to update
+  6. Add additional configurations (API key, host, etc) then press `submit`
 
   **To change provider model**
-  1. Click the gear on the Goose Desktop toolbar
+  1. Click the <PanelLeft className="inline" size={16} /> button in the top-left to open the sidebar
-  2. Click `Advanced Settings`
+  2. Click the `Settings` button on the sidebar
-  3. Under `Models`, click `Switch models`
+  3. Click the `Models` tab
+  4. Click `Switch models`
   5. Select a Provider from drop down menu
   6. Select a model from drop down menu
   7. Press `Select Model`
@@ -204,8 +207,8 @@ Goose supports using custom OpenAI-compatible endpoints, which is particularly u
 
 <Tabs groupId="interface">
   <TabItem value="ui" label="Goose Desktop" default>
-    1. Click `...` in the upper right corner
+    1. Click the <PanelLeft className="inline" size={16} /> button in the top-left to open the sidebar
-    2. Click `Advanced Settings`
+    2. Click the `Settings` button on the sidebar
     3. Next to `Models`, click the `browse` link
     4. Click the `configure` link in the upper right corner
     5. Press the `+` button next to OpenAI
@@ -252,10 +255,12 @@ To set up Google Gemini with Goose, follow these steps:
   <TabItem value="ui" label="Goose Desktop" default>
   **To update your LLM provider and API key:** 
 
-    1. Click on the three dots in the top-right corner.
+    1. Click the <PanelLeft className="inline" size={16} /> button in the top-left to open the sidebar.
-    2. Select `Provider Settings` from the menu.
+    2. Click the `Settings` button on the sidebar.
-    2. Choose `Google Gemini` as provider from the list.
+    3. Click the `Models` tab.
-    3. Click Edit, enter your API key, and click `Set as Active`.
+    4. Click `Configure Providers`
+    5. Choose `Google Gemini` as provider from the list.
+    6. Click `Configure`, enter your API key, and click `Submit`.
 
   </TabItem>
   <TabItem value="cli" label="Goose CLI">
@@ -507,8 +512,8 @@ ollama run michaelneale/deepseek-r1-goose
 
 <Tabs groupId="interface">
   <TabItem value="ui" label="Goose Desktop" default>
-    3. Click `...` in the top-right corner.
+    3. Click the <PanelLeft className="inline" size={16} /> button in the top-left to open the sidebar.
-    4. Navigate to `Advanced Settings` -> `Browse Models` -> and select `Ollama` from the list.
+    4. Click `Settings` -> `Models` -> `Configure Providers` -> and select `Ollama` from the list.
     5. Enter `michaelneale/deepseek-r1-goose` for the model name.
   </TabItem>
   <TabItem value="cli" label="Goose CLI">

documentation/docs/getting-started/using-extensions.md

@@ -5,6 +5,7 @@ title: Using Extensions
 
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import { PanelLeft } from 'lucide-react';
 
 Extensions are add-ons that provide a way to extend the functionality of Goose by connecting with applications and tools you already use in your workflow. These extensions can be used to add new features, access data and resources, or integrate with other systems.
 
@@ -31,8 +32,8 @@ Here are the built-in extensions:
 
 <Tabs groupId="interface">
   <TabItem value="ui" label="Goose Desktop" default>
-  1. Click `...` in the top right corner of the Goose Desktop.
+  1. Click the <PanelLeft className="inline" size={16} /> button in the top-left to open the sidebar.
-  2. Select `Advanced Settings` from the menu.
+  2. Click the `Extensions` button on the sidebar.
   3. Under `Extensions`, you can toggle the built-in extensions on or off.
   </TabItem>
 
@@ -115,8 +116,8 @@ See available servers in the **[MCP Server Directory](https://www.pulsemcp.com/s
 <Tabs groupId="interface">
   <TabItem value="ui" label="Goose Desktop" default>
  
-  1. Click `...` in the top right corner of the Goose Desktop.
+  1. Click the <PanelLeft className="inline" size={16} /> button in the top-left to open the sidebar.
-  2. Select `Advanced Settings` from the menu.
+  2. Click the `Extensions` button on the sidebar.
   3. Under `Extensions`, click `Add custom extension`.
   4. On the `Add custom extension` modal, enter the necessary details
      - If adding an environment variable, click `Add` button to the right of the variable
@@ -343,8 +344,8 @@ You can enable or disable installed extensions based on your workflow needs.
 
 <Tabs groupId="interface">
   <TabItem value="ui" label="Goose Desktop" default>
-  1. Click the three dots in the top-right corner of the application.
+  1. Click the <PanelLeft className="inline" size={16} /> button in the top-left to open the sidebar.
-  2. Select `Advanced Settings` from the menu, scroll down to the `Extensions` section.
+  2. Click the `Extensions` button on the sidebar.
   2. Use the toggle switch next to each extension to enable or disable it.
 
   </TabItem>
@@ -506,8 +507,8 @@ You can remove installed extensions.
 <Tabs groupId="interface">
   <TabItem value="ui" label="Goose Desktop" default>
 
-  1. Click `...` in the top right corner of the Goose Desktop.
+  1. Click the <PanelLeft className="inline" size={16} /> button in the top-left to open the sidebar.
-  2. Select `Advanced Settings` from the menu.
+  2. Click the `Extensions` button on the sidebar.
   3. Under `Extensions`, find the extension you'd like to remove and click on the settings icon beside it.
   4. In the dialog that appears, click `Remove Extension`.
 

documentation/docs/guides/handling-llm-rate-limits-with-goose.md

@@ -6,6 +6,7 @@ sidebar_position: 8
 
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import { PanelLeft } from 'lucide-react';
 
 
 Rate limiting is the process of restricting the number of requests a user or application can send to an LLM API within a specific timeframe. LLM providers enforce this with the purpose of managing resources and preventing abuse. 
@@ -21,12 +22,13 @@ OpenRouter provides a unified interface for LLMs that allows you to select and s
 
 <Tabs groupId="interface">
   <TabItem value="ui" label="Goose Desktop" default>
-    1. Click on the three dots in the top-right corner.
+    1. Click the <PanelLeft className="inline" size={16} /> button in the top-left to open the sidebar.
-    2. Select `Advanced Settings` from the menu.
+    2. Click the `Settings` button on the sidebar.
-    3. Click on "Browse" in the `Models` section.
+    3. Click the `Models` tab.
-    4. Click on `Configure`
+    3. Click `Configure Providers`.
-    5. Select `OpenRouter` from the list of available providers.
+    5. Click `Configure` under `OpenRouter` to edit your OpenRouter settings.
-    6. Enter your OpenRouter API key in the dialog that appears.
+    6. Enter your OpenRouter API key.
+    7. Click `Submit`.
   </TabItem>
   <TabItem value="cli" label="Goose CLI">
     1. Run the Goose configuration command:

documentation/docs/guides/recipes/storing-recipes.md

@@ -6,6 +6,7 @@ sidebar_label: Saving Recipes
 
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import { PanelLeft, Bot } from 'lucide-react';
 
 This guide covers storing, organizing, and finding Goose recipes when you need to access them again later. 
 
@@ -42,18 +43,22 @@ Before saving recipes, it's important to understand where they can be stored and
   <TabItem value="desktop" label="Goose Desktop" default>
 
 **Save New Recipe:**
+
 1. To create a recipe from your chat session, see: [Create Recipe](/docs/guides/recipes/session-recipes#create-recipe)
 2. Once in the Recipe Editor, click **Save Recipe** to save it to your Recipe Library
 
 **Save Modified Recipe:**
 
 If you're already using a recipe and want to save a modified version:
-1. Click the gear icon ⚙️ in the top right corner
+1. Click the <Bot className="inline" size={16}/> button with your current model at the bottom of the window
-2. Click **Save recipe**
+2. Click **View Recipe**
-3. Enter a name for the recipe
+3. Make any desired edits to the description, instructions, or initial prompts
-4. [Choose to save globally or locally](#recipe-storage-locations) to your current project
 5. Click **Save Recipe**
 
+:::note
+When you modify and save a recipe with a new name, a new recipe and new link are generated. You can still run the original recipe from the recipe library, or using the original link. If you edit a recipe without changing its name, the version in the recipe library is updated, but you can still run the original recipe via link.
+:::
+
   </TabItem>
   <TabItem value="cli" label="Goose CLI">
 
@@ -73,9 +78,9 @@ If you're already using a recipe and want to save a modified version:
   <TabItem value="desktop" label="Goose Desktop" default>
 
 **Access Recipe Library:**
-1. Click the gear icon ⚙️ in the top right corner
+1. Click the <PanelLeft className="inline" size={16} /> button in the top-left to open the sidebar
-2. Click **Recipe Library**
+2. Click `Recipes`
-3. Browse your saved recipes in a list view
+3. Browse the list of your saved recipes  
 4. Each recipe shows its title, description, and whether it's global or local
 
   </TabItem>
@@ -102,20 +107,17 @@ Set up [custom recipe paths](/docs/guides/recipes/session-recipes#configure-reci
   </TabItem>
 </Tabs>
 
-
-
-
 ## Using Saved Recipes
 
 <Tabs groupId="interface">
   <TabItem value="desktop" label="Goose Desktop" default>
 
-1. Click the gear icon ⚙️ in the top right corner
+1. Click the <PanelLeft className="inline" size={16} /> button in the top-left to open the sidebar
-2. Click **Recipe Library**
+2. Click `Recipes`
 3. Find your recipe in the Recipe Library
 4. Choose one of the following:
-   - Click **Use Recipe** to run it immediately
+   - Click `Use` to run it immediately
-   - Click **Preview** to see details first, then click **Load Recipe** to run it
+   - Click `Preview` to see the recipe details first, then click **Load Recipe** to run it
 
   </TabItem>
   <TabItem value="cli" label="Goose CLI">

documentation/docs/guides/smart-context-management.md

@@ -7,6 +7,7 @@ sidebar_label: Smart Context Management
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import { ScrollText } from 'lucide-react';
+import { PanelLeft } from 'lucide-react';
 
 When working with [Large Language Models (LLMs)](/docs/getting-started/providers), there are limits to how much conversation history they can process at once. Goose provides smart context management features to help handle context and conversation limits so you can maintain productive sessions. Here are some key concepts:
 
@@ -48,10 +49,14 @@ When you reach the context limit in Goose Desktop:
 
 You can proactively summarize your conversation before reaching context limits:
 
-1. Click the scroll text icon (<ScrollText className="inline" size={16} />) in the chat interface
+1. Click the scroll text icon <ScrollText className="inline" size={16} /> in the chat interface
 2. Confirm the summarization in the modal
 3. View or edit the generated summary if needed
 
+:::note 
+Before the scroll icon appears, you must send at least one message in the chat. Simply starting a new session won't trigger it.
+:::
+
   </TabItem>
 </Tabs>
 
@@ -151,9 +156,10 @@ This setting is stored as the `GOOSE_MAX_TURNS` environment variable in your [co
 <Tabs groupId="interface">
     <TabItem value="ui" label="Goose Desktop" default>
 
-      1. Click the gear icon `⚙️` on the top toolbar
+      1. Click the <PanelLeft className="inline" size={16} /> button in the top-left to open the sidebar
-      2. Click `Advanced settings`
+      2. Click the `Settings` button on the sidebar
-      3. Scroll to `Conversation Limits` and enter a value for `Max Turns`
+      3. Click the `Chat` tab 
+      4. Scroll to `Conversation Limits` and enter a value for `Max Turns`
         
     </TabItem>
     <TabItem value="cli" label="Goose CLI">
@@ -349,9 +355,10 @@ Display estimated real-time costs of your session at the bottom of the Goose Des
 <Tabs groupId="interface">
     <TabItem value="ui" label="Goose Desktop" default>
 To manage live cost tracking:
-  1. Click the gear icon `⚙️` on the top toolbar
+  1. Click the <PanelLeft className="inline" size={16} /> button in the top-left to open the sidebar
-  2. Click `Advanced settings`
+  2. Click the `Settings` button on the sidebar
-  3. Scroll to `App Settings` and toggle `Cost Tracking` on or off
+  3. Click the `App` tab 
+  4. Toggle `Cost Tracking` on/off
 
 The session cost updates dynamically as tokens are consumed. Hover over the cost to see a detailed breakdown of token usage. If multiple models are used in the session, this includes a cost breakdown by model. Ollama and local deployments always show a cost of $0.00.
 

documentation/docs/guides/using-goosehints.md

@@ -6,6 +6,7 @@ sidebar_label: Using Goosehints
 
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import { FolderKey } from 'lucide-react';
 
 
 `.goosehints` is a text file used to provide additional context about your project and improve the communication with Goose. The use of `goosehints` ensures that Goose understands your requirements better and can execute tasks more effectively.
@@ -36,7 +37,7 @@ You can use both global and local hints at the same time. When both exist, Goose
      #### Local hints file
 
     1. Change the directory to where you'd like to set up the file. You can do this by clicking the directory path on the bottom of the Goose window.
-    2. Click the `Configure goosehints` icon on the bottom right of the Goose window.
+    2. Click the <FolderKey size={16} /> icon on the bottom right of the Goose window.
     4. Enter your local tips into the text area.
     5. Click `Save`.
     6. Restart your session so Goose can read the updated `.goosehints`.