Created basic agent framework and segregated the code into different files

vscode/.gitignore

@@ -33,5 +33,4 @@ user_config.json
 #Ignore lock files
 
 package-lock.json
-yarn.lock
-
+yarn.lock

vscode/README.md

@@ -1,8 +1,3 @@
-<p align="center">
-  <a href="" rel="noopener">
- <img height=180px src="/vscode/media/icon.png"></a>
-</p>
-<h1 align="center">CommandDash (Beta)</h1>
 <div align="center">
 <h3> Your Flutter AI Autopilot with Gemini Code & Vision</h3>
 
@@ -11,23 +6,25 @@
 <img src="/assets/docs/poster.jpg"></a>
 
 -----------------
-CommandDash is a command-based coding assistant. It has built in agents that not only help you write code, but also auto run and debug it - performing various Flutter development tasks for you.
+CommandDash is a command-based coding assistant. It provides built in agents that that can automate various Flutter development tasks for you.
 
 ##### ✨ Powered by Gemini 
 ##### 🤝 Dart Analyzer Inside
 ##### 👨🏼‍💻 For and by Flutter Engineers
 
-Currently in Beta, CommandDash is being built in open-sourced with the community.
+Currently in Beta, CommandDash is being built in [open-sourced](https://github.com/CommandDash/commanddash) with the community.
 
 -----------------
 ## Getting Started
 
-##### 1. Create Free Gemini API Key
+##### 1. Create Gemini API Key
 Visit [Makersuite by Google](https://makersuite.google.com/) and create your free API Key.
+
+*Note: Gemini offers both free and paid plans.*
 ##### 2. Add the key in CommandDash Panel
-Paste your API key in the input field in CommandDash Panel.
+Paste your API key in the input field in Dash Panel.
 
-That's it. You're ready to use Dash AI. ✅
+That's it. You're ready to use CommandDash. ✅
 
 ## Features
 
@@ -36,71 +33,35 @@ That's it. You're ready to use Dash AI. ✅
 <img src="/assets/docs/multi-code-attachment.gif" alt="Multi code chat with VSCode inside Gemini" width="500"/>
 </p>
 
-Attach multiple code snippets from different files in your inline chat. With full-context passed to Gemini, receive accurate responses and amend code across multiple files.
+Select and attach multiple code snippets from different files in your inline chat using **"Attach Snippet to Dash"** from the right-click menu. 
+
+🤝 With full-context passed to Gemini, receive accurate responses and update code across multiple files.
 
 ### 🚀 @Agents and /Commands
 
 Use built in agents and commands to autopilot different kinds of tasks.
 
-Currently, we support:
-
-#### 1. `@workspace` agent.
-Ask anything related to Flutter or Dart and get instant answers. Query your workspace using `@workspace` command.
-
-#### 2. `/refactor` command.
-<p align="center">
-<img src="/assets/docs/refactor-command.png" alt="Multi code chat with VSCode inside Gemini" width="500"/>
-</p>
-
-More, coming very soon.
+Currently, we offer following agents and commands:
 
-### ✨ Generate Inline Code
+#### 1. `@workspace`
+Directly query across your workspace and find relevant files related to a feature. Leverage this command to build an understand of the codebase you are working with. 
 
-#### 1. **Code Block Completion**
+#### 2. `@test`
+Generate unit, widget and integration tests with full-context for your Flutter/Dart project. 
 
-Complete methods, classes or any other code blocks by running `Inline Code Generation` from the menu or via `cmd+shift+R`.
+✅ Also, attach previously existing tests as references to help Gemini learn your testing style and choice of libraries. 
 
-Specify details with comments for better accuracy. For example,
+#### 3. `@flutter`
+✨ Use `/doc` command answer your Flutter/Dart questions from trusted sources including official docs.
 
-```dart
-class Cart {
-  // Properties
-  List<Item> items = [];
+#### 4. `/refactor` and `/document`
 
-  void addItem(Item item) {
-    items.add(item);
-  }
+Modify your existing code with instructions and apply the changes.
 
-  void removeItem(Item item) {
-    items.remove(item);
-  }
-  // get total price method
-  **[cmd+shift+R]**
-}
-```
-
-completes the next lines with:
-``` dart
-  double getTotalPrice() {
-    double total = 0;
-    for (Item item in items) {
-      total += item.price;
-    }
-    return total;
-  }
-```
-
-#### 2. **Widget from Image or Description**
-
-Use Gemini's multimodal capabilities to create widget from a image with added description. 
-
-Command: `Dash AI Create: Widget from Image or Description`
-
-#### 3. **Code from Blueprint**
-
-Get complete code from a blueprint of a class or function with the behaviour of functions, state management and architecture of your choice.
+<p align="center">
+<img src="/assets/docs/refactor-command.png" alt="Refactoring code with CommandDash" width="500"/>
+</p>
 
-Command: `Dash AI Create: Code from Blueprint`
 
 ## FAQs
 
@@ -109,14 +70,14 @@ Command: `Dash AI Create: Code from Blueprint`
 
 2. **Do I need to pay to use CommandDash?**
 
-- Gemini PRO is currently in early access and is completely free to use for upto 60 requests for minute. Please check the [pricing](https://ai.google.dev/pricing) here.
+- Gemini PRO offers both free and paid plans. Please check the [pricing](https://ai.google.dev/pricing) here.
 
-3. **I am an Android Studio user. Can I use Dash AI?**
+3. **I am an Android Studio user. Can I use CommandDash?**
 - We are coming soon for IntelliJ-based IDEs. *🤫 Secret: most of our core logic is written in Dart, allowing us to ship on any platform very very fast!*
 
 ## Contributing
 
-A coding assistant for all is best built when all of us contribute. You can make contributions to the VSCODE or IntelliJ extension or also to [CommandDash CLI](https://github.com/Welltested-AI/commanddash) shared between the extensions.
+A coding assistant for all is best built when all of us contribute. You can make contributions to the VSCODE or IntelliJ extension or also to [agents engine](https://github.com/CommandDash/packages) shared between the extensions.
 
 ### Ways to contribute
 
@@ -134,4 +95,4 @@ Connect with like minded people building with Flutter and using AI to do so, eve
 
 ## License
 
-Dash AI is released under the Apache License Version 2.0. See the [LICENSE](LICENSE) file for more information.
+CommandDash is released under the Apache License Version 2.0. See the [LICENSE](LICENSE) file for more information.

vscode/media/agent-provider/agent-provider.js

@@ -0,0 +1,15 @@
+class AgentProvider {
+  constructor(json) {
+    this.json = json;
+  }
+  getInputs(inputString) {
+    for (const item of this.json) {
+      for (const command of item.supported_commands) {
+        if (command.slug === inputString) {
+          return JSON.parse(JSON.stringify(command));
+        }
+      }
+    }
+    return [];
+  }
+}

vscode/media/agent-ui-builder/agent-ui-builder.js

@@ -0,0 +1,118 @@
+class AgentUIBuilder {
+    constructor(ref) {
+        this.ref = ref;
+
+        this.onStringInput = this.onStringInput.bind(this);
+        this.buildAgentUI = this.buildAgentUI.bind(this);
+
+        this.container = document.createElement("div");
+
+        this.codeInputIds = [];
+    }
+
+    buildAgentUI() {
+        const { text_field_layout, registered_inputs, slug } = agentInputsJson[0];
+        let textHtml = text_field_layout;
+        registered_inputs.forEach(input => {
+            const inputElement = this.createInputElement(input);
+            this.container.appendChild(inputElement);
+            textHtml = textHtml.replace(`<${input.id}>`, inputElement.outerHTML);
+        });
+
+        this.container.innerHTML = `<span class="inline-block text-pink-500" contenteditable="false">${slug}&nbsp;</span>${textHtml}`;
+        this.ref.appendChild(this.container);
+        this.registerCodeInputListener();
+    }
+
+    createInputElement(input) {
+        const { id, display_text, type, optional } = input;
+        const _optional = optional ? "(O)" : "";
+        if (type === "string_input") {
+            const inputContainer = document.createElement("span");
+            const inputSpan = document.createElement("span");
+            inputContainer.innerHTML = `<span contenteditable="false" class="bg-black text-white px-[7px] border border-black rounded-tl-[4px] rounded-bl-[4px] inline-block">${_optional} ${display_text}</span>`;
+            inputContainer.classList.add("inline-block");
+
+            inputSpan.id = id;
+            inputSpan.contentEditable = true;
+            inputSpan.tabIndex = 0;
+            inputSpan.classList.add("px-2", "inline-block", "rounded-tr-[4px]", "rounded-br-[4px]", "string_input", id, "mb-1", "ml-[1px]", "mr-[1px]");
+            inputSpan.textContent = '\u200B';
+
+            this.ref.addEventListener('input', (event) => this.onStringInput(event, id));
+            this.ref.addEventListener('paste', () => this.onTextPaste(id));
+
+            inputContainer.appendChild(inputSpan);
+
+            requestAnimationFrame(() => {
+                if (!optional) {
+                    const input = document.getElementById(id);
+                    const selection = window.getSelection();
+                    const range = document.createRange();
+                    range.selectNodeContents(input);
+                    range.collapse(false);
+                    selection.removeAllRanges();
+                    selection.addRange(range);
+                }
+            });
+
+            return inputContainer;
+        }
+
+        if (type === "code_input") {
+            const codeContainer = document.createElement("span");
+            const codePlaceholder = document.createElement("span");
+
+            codeContainer.classList.add("code-input-container");
+
+            codePlaceholder.id = id;
+            codePlaceholder.contentEditable = "false";
+            codePlaceholder.tabIndex = 0;
+            codePlaceholder.classList.add("ml-1", "mb-1", "px-[7px]", "inline-flex", "cursor-pointer", "rounded-[4px]", "mt-1", "code_input", "items-center");
+            codePlaceholder.textContent = `${_optional} ${display_text}`;
+            codeContainer.id = "code-container";
+            codeContainer.appendChild(codePlaceholder);
+            this.codeInputIds.push(id);
+
+            // this.ref.addEventListener("click", this.onCodeInputClick);
+
+            return codeContainer;
+        }
+    }
+
+    registerCodeInputListener() {
+        this.codeInputIds.forEach((_codeInputId) => {
+            const codeInput = document.getElementById(_codeInputId);
+            codeInput.addEventListener("focus", () => {
+                codeInputId = _codeInputId;
+            });
+        });
+    }
+
+    onTextPaste(id) {
+        const inputSpan = document.getElementById(id);
+        inputSpan.dispatchEvent(new Event('input', { bubbles: true }));
+    }
+
+    onStringInput(event, id) {
+        const sel = window.getSelection();
+        const inputSpan = document.getElementById(id);
+        if (event.target === inputSpan || (sel.anchorNode && sel.anchorNode.parentNode && sel.anchorNode.parentNode.classList.contains(id))) {
+            const inputIndex = agentInputsJson[0].registered_inputs.findIndex(_input => _input.id === id);
+            if (inputIndex !== -1) {
+                agentInputsJson[0].registered_inputs[inputIndex].value = inputSpan.textContent.trim();
+            }
+        }
+    }
+
+    onCodeInput(chipsData, chipName) {
+        const firstCodeInput = agentInputsJson[0].registered_inputs.find(input => input.type === "code_input" && ( codeInputId === 0 ? input.value === undefined : input.id === codeInputId));
+
+        if (firstCodeInput) {
+            const codeInputSpan = document.getElementById(firstCodeInput.id);
+            firstCodeInput.value = JSON.stringify(chipsData);
+            codeInputSpan.innerHTML = `<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">${dartIcon}</svg><span class="ml-1" id="${firstCodeInput.id}">${chipName}</span>`;
+            codeInputId = 0;
+        }
+    }
+}