Expand "Edit Context" capabilities to include multi-file creation and deletion, and overhaul UI components through refactoring and removals

Author: robertpiosik

README.md

@@ -2,10 +2,10 @@
 
 <a href="https://marketplace.visualstudio.com/items?itemName=robertpiosik.gemini-coder" target="_blank"><img src="https://img.shields.io/badge/Install-VS_Code_Marketplace-blue" alt="Get from Visual Studio Code Marketplace" /></a> <a href="https://open-vsx.org/extension/robertpiosik/gemini-coder" target="_blank"><img src="https://img.shields.io/badge/Install-Open_VSX_Registry-a60ee5" alt="Get from Open VSX Registry" /></a> <a href="https://github.com/robertpiosik/CodeWebChat/blob/dev/LICENSE" target="_blank"><img src="https://img.shields.io/badge/License-GPL--3.0-green.svg" alt="License: GPL-3.0" /></a>
 
-Code Web Chat is a versatile, free and open-source (FOSS) AI coding tool that connects VS Code with ChatGPT, AI Studio, DeepSeek, and 10+ other free chatbots.
+Code Web Chat is a community-driven, free and open-source (FOSS) AI coding tool that connects VS Code with ChatGPT, AI Studio, DeepSeek, and 10+ other free chatbots in your favorite browser.
 
 ✅ **Save money**—use generous free tiers and subscription-based billing \
-✅ **Save time**—finish tasks in seconds, not minutes
+✅ **Save time**—get multi-file edits from a single response
 
 Available in <a href="https://marketplace.visualstudio.com/items?itemName=robertpiosik.gemini-coder" target="_blank">VS Code</a>, <a href="https://open-vsx.org/extension/robertpiosik/gemini-coder" target="_blank">Cursor, and other forks</a>.
 
@@ -17,7 +17,11 @@ Available in <a href="https://marketplace.visualstudio.com/items?itemName=robert
 
 Select folders and files for context, type instructions, and pick your favorite chatbot—to continue in the browser, or call a model provider of choice—to stay in the editor.
 
-Once the response is ready, multi-file suggested changes can be applied to the codebase after you review them in a transparent and safe way.
+Once the response is ready, suggested multi-file changes can be applied to the codebase after you review them in a transparent and safe way.
+
+**Non-agentic nature**
+
+CWC works solely on hand-picked context. This design choice doesn't try to remove You from coding and gives you full control over the model's outputs, making as accurate and predictable as possible.
 
 **Guiding principles**
 
@@ -32,11 +36,13 @@ Once the response is ready, multi-file suggested changes can be applied to the c
 
 ## <span style="background-color: #fbb100; color: black; padding: 0.2em 0.6em; border-radius: 999px">Chatbot initialization</span>
 
-Install the Connector browser extension and never copy&paste again.
+Install an [open-source](https://github.com/robertpiosik/CodeWebChat/tree/dev/packages/browser) browser extension and never copy&paste again.
 
 - [Chrome Web Store](https://chromewebstore.google.com/detail/code-web-chat-connector/ljookipcanaglfaocjbgdicfbdhhjffp)
 - [Firefox Add-ons](https://addons.mozilla.org/en-US/firefox/addon/code-web-chat-connector/)
 
+The browser extension uses a simple [content script](https://github.com/robertpiosik/CodeWebChat/blob/dev/packages/browser/src/content-scripts/send-prompt-content-script/send-prompt-content-script.ts) to change model, and other settings on your behalf.
+
 **Supported chatbots:**
 
 - AI Studio
@@ -56,14 +62,14 @@ Install the Connector browser extension and never copy&paste again.
 - Yuanbao
 - Z.AI
 
-> <small>**Legal Disclaimer:** The extension does only basic web interactions to start a new conversation. The injected _Apply response with CWC_ button is not a means of automatic output extraction, it's an alias for the original _copy to clipboard_ button.</small>
+> <small>**Legal disclaimer:** The injected _Apply response with CWC_ button is not a means of automatic output extraction, it's an alias for the original _copy to clipboard_ button.</small>
 
 ## <span style="background-color: #fbb100; color: black; padding: 0.2em 0.6em; border-radius: 999px">API Tools</span>
 
-CWC is not limited to chatbot initializations. To use built-in API tools, bring your own keys (BYOK) for any OpenAI-API compatible model provider.
+CWC is not limited to chatbot initializations. To use built-in API tools, bring your own key (BYOK) for any OpenAI-API compatible model provider.
 
 **🛠️ Edit Context** \
-Modify files based on natural language instructions.
+Modify, create or delete files based on natural language instructions.
 
 **🛠️ Code Completions** \
 Get accurate code-at-cursor from state-of-the-art reasoning models.
@@ -101,15 +107,15 @@ The tool **does not** collect telemetry.
 
 ## <span style="background-color: #fbb100; color: black; padding: 0.2em 0.6em; border-radius: 999px">Community</span>
 
-If you have a question about CWC, or want to help others, you're always welcome to join the conversation:
+If you have a question, or want to help others, you're always welcome to join the community:
 
-- [GitHub Discussions](https://github.com/robertpiosik/CodeWebChat/discussions)
 - [Discord](https://discord.gg/KJySXsrSX5)
 - [Reddit](https://www.reddit.com/r/CodeWebChat)
+- [Discussions](https://github.com/robertpiosik/CodeWebChat/discussions)
 
 ## <span style="background-color: #fbb100; color: black; padding: 0.2em 0.6em; border-radius: 999px">Donations</span>
 
-[Buy me a coffee](https://buymeacoffee.com/robertpiosik)
+If you enjoy using Code Web Chat, [buying a $3 coffee](https://buymeacoffee.com/robertpiosik) is a great way to show your support for the project.
 
 **BTC:** bc1qfzajl0fc4347knr6n5hhuk52ufr4sau04su5te
 

docs/api-tools/context-edit.mdx

@@ -3,7 +3,7 @@ title: Context edit
 sidebar_position: 2
 ---
 
-Modify files based on natural language instructions.
+Modify, create or delete files based on natural language instructions.
 
 ✓ Multi-file updates in a single API call \
 ✓ Efficient in output tokens—requests diffs

docs/api-tools/index.mdx

@@ -13,7 +13,7 @@ Get accurate code-at-cursor from state-of-the-art reasoning models.
 
 ### [Context edit](./context-edit)
 
-Modify files based on natural language instructions.
+Modify, create or delete files based on natural language instructions.
 
 ### [Intelligent update](./intelligent-update)
 

packages/browser/src/views/popup/Popup.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 import browser from 'webextension-polyfill'
 import { HtmlParser } from '../../utils/html-parser'
 import { StoredWebsite, use_websites_store } from './hooks/use-websites-store'

packages/shared/src/constants/dictionary.ts

@@ -310,7 +310,7 @@ export const dictionary = {
       'Get accurate code-at-cursor from state-of-the-art reasoning models.',
     EDIT_CONTEXT_LABEL: 'Edit Context',
     EDIT_CONTEXT_SUBTITLE:
-      'Modify files based on natural language instructions.',
+      'Modify, create or delete files based on natural language instructions.',
     INTELLIGENT_UPDATE_LABEL: 'Intelligent Update',
     INTELLIGENT_UPDATE_SUBTITLE:
       'Integrate truncated code blocks and fix malformed diffs.',

packages/ui/.storybook/variables.css

@@ -21,4 +21,30 @@
   --vscode-list-hoverBackground: #e8e8e8;
   --vscode-list-inactiveSelectionBackground: #e4e6f1;
   --vscode-button-separator: #808080;
+  --vscode-inputOption-activeBackground: #cce5ff;
+  --vscode-inputOption-activeForeground: #000;
+  --vscode-button-secondaryForeground: #333;
+  --vscode-button-secondaryBackground: #f3f3f3;
+  --vscode-button-secondaryHoverBackground: #e0e0e0;
+  --vscode-gitDecoration-untrackedResourceForeground: #3fb950;
+  --vscode-gitDecoration-deletedResourceForeground: #f85149;
+  --vscode-gitDecoration-addedResourceForeground: #3fb950;
+  --vscode-activityWarningBadge-foreground: #fff;
+  --vscode-activityWarningBadge-background: #f9a825;
+  --vscode-checkbox-background: #fff;
+  --vscode-checkbox-border: #ccc;
+  --vscode-inputOption-activeBorder: #007fd4;
+  --vscode-dropdown-border: #ccc;
+  --vscode-dropdown-background: #fff;
+  --vscode-menu-foreground: #616161;
+  --vscode-menu-selectionBackground: #007fd4;
+  --vscode-menu-selectionForeground: #fff;
+  --vscode-input-placeholderForeground: #a0a0a0;
+  --vscode-menu-background: #fff;
+  --vscode-menu-border: #ccc;
+  --vscode-widget-shadow: rgba(0, 0, 0, 0.16);
+  --vscode-scrollbar-shadow: rgba(0, 0, 0, 0.5);
+  --vscode-editorGroup-border: #ccc;
+  --vscode-list-activeSelectionBackground: #094771;
+  --vscode-list-activeSelectionForeground: #fff;
 }