chore(README, settings): update README for Tracing library (#32)

* chore(settings): fix width

This accounts for the padding of 8px on both sides, which adds up to 16px of total horizontal padding. By subtracting this from the width, the elements will now properly fit within their parent containers without sticking out.

* docs(README): add Boomerang demo gif

* docs(README): add screenshots

* docs(README): update tag line

Author: arthurgousset

README.md

@@ -1,86 +1,41 @@
 # TraceBack
 
-A VS Code extension that brings telemetry data (traces, logs, and metrics) into your code.
+A VS Code extension to debug using [`tracing`](https://docs.rs/tracing/latest/tracing/) logs (🦀+🐞)
 
 ## Demo
 
-![TraceBack demo (v0 4 7)](https://github.com/user-attachments/assets/07701ce5-54a0-42e4-ad6e-a6e77238b6d4)
+![Traceback 0 5 Boomerang demo](https://github.com/user-attachments/assets/6fb626fa-84da-4e62-9963-64f97d9a80bf)
 
 ## Quick Start
 
 1. Install the [extension](https://marketplace.visualstudio.com/items/?itemName=hyperdrive-eng.traceback)
 
-1. Import logs
-
-    <img width="828" alt="image" src="https://github.com/user-attachments/assets/13eeb086-93d9-44fb-aca8-bde34225f37a" />
-
-1. Debug your code with the logs
-
-    <img width="750" alt="select log and debug code" src="https://github.com/user-attachments/assets/9e5c942c-6d40-48ac-8d14-d94ac49c4f6c">
-
-## Usage
-
 1. Open settings
 
-    <img width="84" alt="image" src="https://github.com/user-attachments/assets/c9511b63-28c5-4255-9c62-27063e8068ce" />
-
-1. Import logs (copy/paste, import from file, import from web, import from Axiom.co)
-
-    <img width="828" alt="image" src="https://github.com/user-attachments/assets/13eeb086-93d9-44fb-aca8-bde34225f37a" />
-
-1. Select a repository
-
-    <img width="376" alt="image" src="https://github.com/user-attachments/assets/681d10f6-d4c3-4478-9bf4-7790b272a050" />
-
-1. Set Claude API Key
-
-    <img width="609" alt="image" src="https://github.com/user-attachments/assets/da51c800-1393-47e8-b5de-32026ac23938" />
-
-1. Click on a log
-
-   <img width="1465" alt="image" src="https://github.com/user-attachments/assets/98a0dad4-0164-4034-a064-343ff36a38aa" />
-
-1. Click on a parent
-
-    <img width="1460" alt="image" src="https://github.com/user-attachments/assets/d426cf41-6a11-47bd-8af8-871d0b8bedfb" />
-
-
-## Example 
-
-1. Clone this demo repository: [`hyperdrive-eng/playground`](https://github.com/hyperdrive-eng/playground)
-
-    ```sh
-    git clone https://github.com/hyperdrive-eng/playground.git
-    ```
-
-1. Select the repository in the extension
-
-    <img width="376" alt="image" src="https://github.com/user-attachments/assets/681d10f6-d4c3-4478-9bf4-7790b272a050" />
-
-1. Load demo logs from the repository
-
-    <img width="473" alt="image" src="https://github.com/user-attachments/assets/61f70062-7838-454a-945d-f036d692084b" />
+    ![image](https://github.com/user-attachments/assets/dfb9a791-2694-4883-b890-17460f197244)
 
-1. Click on a log line
+1. Add your Rust [`tracing`](https://docs.rs/tracing/latest/tracing/) logs
 
-    <img width="555" alt="image" src="https://github.com/user-attachments/assets/27d9d5bc-23ed-44f2-918d-cd810c43e987" />
+   ![image](https://github.com/user-attachments/assets/79ac974d-9b1f-40be-82c2-5987a6d1877b)
 
-1. See log in the context of your code
+1. Select your Rust repository
 
-    <img width="1035" alt="image" src="https://github.com/user-attachments/assets/65403c78-abaf-49e2-85c4-9086b2a89d8d" />
+    ![image](https://github.com/user-attachments/assets/22211e44-8210-42df-a8b0-9840e99cb1bb)
 
-1. Click on a parent in the call stack
+1. Set your Claude API Key
 
-    <img width="557" alt="image" src="https://github.com/user-attachments/assets/41cc2d2a-df41-43d8-960f-8bf06eb68770" />
+    ![image](https://github.com/user-attachments/assets/8da0d66e-8b4c-4284-a1c6-3eb519c4a19e)
 
-1. See parent in the context of your code
+## Features
 
-    <img width="771" alt="image" src="https://github.com/user-attachments/assets/37e2ab7b-99d0-4c33-a110-3c84b52534fb" />
+1. Visualise spans associated with a log
 
-1. Click on its parent in the call stack
+    ![image](https://github.com/user-attachments/assets/6f5a2f48-8133-4096-87b6-8e90c65a5abc)
+   
+1. Find the line of code associated with a log
 
-    <img width="558" alt="image" src="https://github.com/user-attachments/assets/3d45bc2f-258a-43c9-939b-eb6d9ad76785" />
+    ![image](https://github.com/user-attachments/assets/6cd4fe76-4ec7-4520-88a6-5524f29ce5fe)
 
-1. See its parent in the context of your code
+1. Navigate the call stack associated with a log
 
-    <img width="546" alt="image" src="https://github.com/user-attachments/assets/4584aedb-8c27-4da4-84c4-78b70bab63c2" />
+    ![image](https://github.com/user-attachments/assets/55041404-91f2-40c0-a905-5a0068633a14)

src/settingsView.ts

@@ -452,7 +452,7 @@ export class SettingsView {
         input[type="text"], 
         input[type="password"],
         textarea {
-          width: 100%;
+          width: calc(100% - 16px);
           padding: 6px 8px;
           margin-bottom: 10px;
           background-color: var(--vscode-input-background);