added graphics

docs/manual/vsc-extension.md

@@ -1,19 +1,24 @@
----
----
-
 # Containerlab VS Code Extension
 
-The lab-as-code approach taken by Containerlab means labs are written in YAML. This means you need a text editor to write and modify your labs. It also means you have to manage your labs via the command-line.
+The lab-as-code approach taken by Containerlab means labs are "written" in YAML in a text editor or IDE. It also means you have to manage your labs via the command-line.
 
-VS Code is a fine text editor used by many for this purpose, and with the YAML schema provided by Containerlab the topology writing experience is made even easier. 
+[VS Code](https://code.visualstudio.com/download) is a powerful text editor used by many for this purpose, and with the YAML schema provided by Containerlab the topology writing experience is made even easier.
 
 We decided to further improve the experience with VS Code with a Containerlab [VS Code extension](https://marketplace.visualstudio.com/items?itemName=srl-labs.vscode-containerlab).
 
-The Containerlab VS Code extension aims to greatly simplify and improve the labbing workflow, allowing you do do everything you need to lab from directly in VS Code.
+The Containerlab VS Code extension aims to greatly simplify and improve the labbing workflow, allowing you to perform essential lab operations within VS Code.
+
+If you prefer to sit back and watch a video about this extension, say no more!
+
+-{{youtube(url='https://www.youtube.com/embed/NIw1PbfCyQ4')}}-
+
+/// admonition | Support
+If you have any questions about this extension, please join us in the [Containerlab Discord](https://discord.gg/vAyddtaEV9).
+///
 
 ## Features
 
-The extension is feature rich while providing flexibility way you can interact with such features. This is all discussed below.
+The Containerlab extension packs a lot of features hidden under the icons or context menus. Here is a list of the main features, and we are always looking for new feature requests:
 
 ### Explorer
 
@@ -25,21 +30,19 @@ The explorer will discover all labs in your local directory (and subdirectories)
 
 The explorer is a Treeview and for running labs, you can expand the labs to see running containers and you can expand running containers to see their interfaces.
 
-** Video of explorer interaction **
-
 ### Editor
 
 In the editor title actions when a Containerlab topology is open, there is a 'run' action and a 'graph' button.
 
 This allows easy deployment and graphing of the lab from within the editor context.
 
-** Some picture/video of editor action interaction **
+![editor-actions](https://gitlab.com/rdodin/pics/-/wikis/uploads/c095d277e032ad0754b5f61f4a9057f2/CleanShot_2025-02-04_at_13.56.21_2x.png)
 
 #### Command palette
 
-When you have a topology open and active in the editor you can execute common actions from the command palette.
+When you have a topology open and active in the editor you can execute common actions from the command palette that you can open up with `CTRL+SHIFT+P`/`CMD+SHIFT+P`.
 
-** Command palette picture/video **
+![palette](https://gitlab.com/rdodin/pics/-/wikis/uploads/be8d2c2d7d806dedd76c2b7a924d153d/CleanShot_2025-02-04_at_13.58.39_2x.png)
 
 #### Keybindings
 
@@ -56,14 +59,14 @@ We have also set some default keybindings you can use to interact with the lab w
 
 Integrated into the extension as a 'graph' action is the [TopoViewer](https://github.com/asadarafat/topoViewer) project by @asadarafat.
 
-TopoViewer is an interactive way to visualize your containerlab topologies.
-
-** Topoviewer video/picture **
+TopoViewer is an interactive way to visualize your containerlab topologies. The topology must be running for the TopoViewer to be able to visualize it.
 
 ### Packet capture
 
 In the explorer you can expand running labs and containers to view all the discovered interfaces for that container. You can either right click on the interface and start a packet capture or click the shark icon on the interface label.
 
+Packet capture relies on the [Edgeshark integration](wireshark.md#edgeshark-integration). Install Edgeshark first, and then use the context menu or the fin icon next to the interface name.
+
 ## Settings reference
 
 Below is a reference to the available settings that can be modified in the Containerlab VS Code extension.
@@ -86,7 +89,7 @@ Whether or not to append `sudo` to any commands executed by the extension.
 
 ### `containerlab.refreshInterval`
 
-The time interval (in milliseonds) for which the extension automatically refreshes.
+The time interval (in milliseconds) for which the extension automatically refreshes.
 
 On each refresh the extension will discover all local and running labs, as well as containers and interfaces of containers belonging to running labs.
 
@@ -109,10 +112,11 @@ By default this setting is empty, it should be used to override the [default map
 | `object` | `undefined` |
 
 #### Example
+
 ```json
 {
     "nokia_srl": "sr_cli",
 }
 ```
 
-In the settings UI, simply set the 'Item' field to the kind and the 'Value' field to `nokia_srl` and the command to `sr_cli`.
+In the settings UI, simply set the 'Item' field to the kind and the 'Value' field to `nokia_srl` and the command to `sr_cli`.