docs: enhance 'Your First Task' guide with clearer instructions and new images

Author: hannesrudolph

docs/getting-started/your-first-task.md

@@ -4,41 +4,64 @@ sidebar_label: Your First Task
 
 # Starting Your First Task with Roo Code
 
-Now that you've [configured your AI provider and model](./connecting-api-provider), you're ready to start using Roo Code! This guide will walk you through your first interaction.
+Now that you've [configured your AI provider and model](./connecting-api-provider), you're ready to start using Roo Code! This guide walks you through your first interaction.
 
 ## Step 1: Open the Roo Code Panel
 
-If the Roo Code panel isn't already visible, click the Roo Code icon (<Codicon name="rocket" />) in the VS Code Activity Bar (the vertical bar on the side of the window). This will open the Roo Code chat interface.  If you don't see the icon, make sure the extension is installed and enabled.
+Click the Roo Code icon (<Codicon name="rocket" />) in the VS Code Activity Bar (vertical bar on the side of the window) to open the chat interface. If you don't see the icon, verify the extension is installed and enabled.
+
+<img src="/img/your-first-task/your-first-task.png" alt="Roo Code icon in VS Code Activity Bar" width="800" />
+
+*The Roo Code icon in the Activity Bar opens the chat interface.*
 
 ## Step 2: Type Your Task
 
-In the Roo Code chat box (at the bottom of the panel), type a description of what you want Roo Code to do.  Be clear and concise.  Here are some examples of good initial tasks:
+Type a clear, concise description of what you want Roo Code to do in the chat box at the bottom of the panel. Examples of effective tasks:
+
+* "Create a file named `hello.txt` containing 'Hello, world!'."
+* "Write a Python function that adds two numbers."
+* "Create an HTML file for a simple website with the title 'Roo test'"
 
-*   "Create a file named `hello.txt` containing 'Hello, world!'."
-*   "Write a Python function that adds two numbers."
-*    "Create an html file for a simple website with the title 'Roo test'"
+No special commands or syntax needed—just use plain English.
 
-You don't need to use any special commands or syntax at this point.  Just write your request in plain English.
+<img src="/img/your-first-task/your-first-task-6.png" alt="Typing a task in the Roo Code chat interface" width="500" />
+*Enter your task in natural language - no special syntax required.*
 
 ## Step 3: Send Your Task
 
-Press Enter, or click the Send icon (<Codicon name="send" />) to the right of the input box.
+Press Enter or click the Send icon (<Codicon name="send" />) to the right of the input box.
 
 ## Step 4: Review and Approve Actions
 
-Roo Code will analyze your request and propose a series of actions.  These actions might include:
+Roo Code analyzes your request and proposes specific actions. These may include:
 
-*   **Reading files:** Roo Code will show you the contents of files it wants to read.
-*   **Writing to files:** Roo Code will show you a diff (a visual representation of the changes) of any proposed file modifications.  You'll see added lines in green and removed lines in red.
-*   **Executing commands:** Roo Code will show you the exact command it wants to run in your terminal.
-*   **Using the Browser:** Roo Code will show you the action it's going to perform (click, type, etc)
-* **Asking a question:** If Roo Code is not sure on how to proceed, it will ask you follow-up questions.
+* **Reading files:** Shows file contents it needs to access
+* **Writing to files:** Displays a diff with proposed changes (added lines in green, removed in red)
+* **Executing commands:** Shows the exact command to run in your terminal
+* **Using the Browser:** Outlines browser actions (click, type, etc.)
+* **Asking questions:** Requests clarification when needed to proceed
 
-**You will have the opportunity to approve or reject each action.**  Roo Code will not perform any action without your explicit permission (unless you've enabled auto-approval in the settings).
+<img src="/img/your-first-task/your-first-task-7.png" alt="Reviewing a proposed file creation action" width="800" />
+*Roo Code shows exactly what action it wants to perform and waits for your approval.*
 
-*   **Approve:** If you're happy with the proposed action, click the "Approve" button (or similar).
-*   **Reject:** If you don't want Roo Code to perform the action, click the "Reject" button. You can provide feedback to help Roo Code understand why you rejected the action.
+**Each action requires your explicit approval** (unless auto-approval is enabled):
+
+* **Approve:** Click the "Approve" button to execute the proposed action
+* **Reject:** Click the "Reject" button and provide feedback if needed
 
 ## Step 5: Iterate
 
-Roo Code works iteratively.  After each action, it will wait for your feedback and then propose the next step.  Continue reviewing and approving (or rejecting) actions until the task is complete.
+Roo Code works iteratively. After each action, it waits for your feedback before proposing the next step. Continue this review-approve cycle until your task is complete.
+
+<img src="/img/your-first-task/your-first-task-8.png" alt="Final result of a completed task showing the iteration process" width="500" />
+*After completing the task, Roo Code shows the final result and awaits your next instruction.*
+
+## Conclusion
+
+You've now completed your first task with Roo Code! Through this process, you've learned:
+
+* How to interact with Roo Code using natural language
+* The approval-based workflow that keeps you in control
+* The iterative approach Roo Code uses to solve problems step-by-step
+
+This iterative, approval-based workflow is at the core of how Roo Code works—letting AI handle the tedious parts of coding while you maintain complete oversight. Now that you understand the basics, you're ready to tackle more complex tasks, explore different [modes](../basic-usage/modes) for specialized workflows, or try the [auto-approval feature](../advanced-usage/auto-approving-actions) to speed up repetitive tasks.