Merge branch 'dev'

Author: robertpiosik

README.md

@@ -2,7 +2,7 @@
 
 <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="GPL-3.0 license" /></a>
 
-**The privacy AI coding without agents.** Guide the model to production-grade code with engineer-level control over context. Community-driven, free and open-source.
+**Meet Code Web Chat, the privacy AI coding without agents.** Guide the model to production-grade code with engineer-level control over context. Community-driven, free and open-source.
 
 Works with VS Code, and forks like Cursor, Windsurf, and VSCodium.
 
@@ -35,14 +35,17 @@ Therefore, CWC is designed to align with LLMs' true capabilities—that is, code
 
 🙋 **Guide the model with context**
 
-Unlike coding agents that require detailed instructions to understand your intent and locate relevant files, CWC lets you provide context up front, making prompts simpler and responses faster and more accurate.
+Unlike coding agents that require detailed instructions to understand your intent and locate relevant files, CWC lets you provide full context up front allowing much simpler instructions. This saves money and time—the model doesn't have to make any tool calls, which are distracting "side quests".
 
-Meet the non-agentic workflow—select folders and files, enter prompt, and send message via...
+> [!TIP]
+> LLMs are pattern matchers—they love examples! Include some you believe will help the model understand the goal better.
+
+Meet the CWC's non-agentic workflow—select folders and files, enter instructions, and send message via...
 
 - new chat—to continue in the connected browser
 - API call—to use a model provider of choice
 
-Constructed message consists of the user's prompt, edit format instructions, and the selected context, as shown in the example:
+Constructed message looks like the following example:
 
 ```
 Implement a subtract function.

packages/shared/src/constants/dictionary.ts

@@ -83,7 +83,7 @@ export const dictionary = {
     URL_OVERRIDE_DIFFERENT_DOMAIN: (preset_name: string) =>
       `URL override for preset "${preset_name}" was discarded because it uses a different domain.`,
     CONTEXT_SIZE_WARNING: (threshold: string, percentage: number) =>
-      `Context exceeds threshold of ${threshold} tokens by ${percentage}%. Excessive context size degrades output quality and increase resource usage.`,
+      `Context exceeds threshold of ${threshold} tokens by ${percentage}%. Excessive context size affects accuracy and cost-efficiency.`,
     FAILED_TO_CREATE_FILE: (file_path: string) =>
       `Failed to create file: ${file_path}`,
     FAILED_TO_APPLY_CHANGES_TO_FILE: (file_path: string) =>

packages/ui/src/components/editor/common/Dropdown/Dropdown.module.scss

@@ -1,43 +1,36 @@
 .dropdown {
   position: relative;
-  width: 100%;
 }
 
 .button {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: var(--padding-8px);
   background: var(--vscode-input-background);
   color: var(--vscode-input-foreground);
   border: 1px solid var(--cwc-border-color);
   padding: var(--padding-4px) var(--padding-8px);
   border-radius: var(--border-radius-4px);
   cursor: pointer;
   width: 100%;
-  text-align: left;
 
   &:hover {
-    background: var(--vscode-list-hoverBackground);
+    border-color: var(--cwc-border-color-hover);
   }
 
-  &[data-is-open='true'] {
+  &--open {
     border-color: var(--vscode-focusBorder);
-    outline: 1px solid var(--vscode-focusBorder);
-    outline-offset: -1px;
+
+    &:hover {
+      border-color: var(--vscode-focusBorder);
+    }
   }
 }
 
 .chevron {
-  transition: transform 0.2s ease;
   color: var(--vscode-icon-foreground);
-}
 
-.chevron_open {
-  transform: rotate(180deg);
-}
-
-.menu_override {
-  left: 0;
-  right: auto;
+  &--open {
+    transform: rotate(180deg);
+  }
 }

packages/ui/src/components/editor/common/Dropdown/Dropdown.stories.tsx

@@ -7,7 +7,7 @@ export default {
 
 const sample_options: Dropdown.Option<string>[] = [
   { value: 'option1', label: 'Option 1' },
-  { value: 'option2', label: 'Option 2' },
+  { value: 'option2', label: 'This is a much longer option label' },
   { value: 'option3', label: 'Option 3' }
 ]
 

packages/ui/src/components/editor/common/Dropdown/Dropdown.tsx

@@ -1,4 +1,4 @@
-import { useState, useRef, useEffect } from 'react'
+import { useState, useRef, useEffect, useLayoutEffect, useMemo } from 'react'
 import cn from 'classnames'
 import { DropdownMenu } from '../DropdownMenu'
 import styles from './Dropdown.module.scss'
@@ -13,22 +13,39 @@ export namespace Dropdown {
     options: Option<T>[]
     value: T
     onChange: (value: T) => void
-    className?: string
-    max_width?: number
   }
 }
 
-export const Dropdown = <T extends string>({
-  options,
-  value,
-  onChange,
-  className,
-  max_width
-}: Dropdown.Props<T>) => {
+export const Dropdown = <T extends string>(props: Dropdown.Props<T>) => {
   const [is_open, set_is_open] = useState(false)
   const dropdown_ref = useRef<HTMLDivElement>(null)
+  const button_ref = useRef<HTMLButtonElement>(null)
+  const [width, set_width] = useState<number>()
 
-  const selected_option = options.find((opt) => opt.value === value)
+  const longest_label = useMemo(
+    () =>
+      props.options.reduce(
+        (longest, option) =>
+          option.label.length > longest.length ? option.label : longest,
+        ''
+      ),
+    [props.options]
+  )
+
+  useLayoutEffect(() => {
+    if (button_ref.current && longest_label) {
+      const canvas = document.createElement('canvas')
+      const context = canvas.getContext('2d')
+      if (context) {
+        const button_style = window.getComputedStyle(button_ref.current)
+        context.font = button_style.font
+        const text_width = context.measureText(longest_label).width
+        set_width(text_width + 40)
+      }
+    }
+  }, [longest_label])
+
+  const selected_option = props.options.find((opt) => opt.value == props.value)
 
   const handle_click_outside = (event: MouseEvent) => {
     if (
@@ -46,40 +63,33 @@ export const Dropdown = <T extends string>({
     }
   }, [])
 
-  const menu_items: DropdownMenu.Item[] = options.map((option) => ({
+  const menu_items: DropdownMenu.Item[] = props.options.map((option) => ({
     label: option.label,
-    is_selected: option.value === value,
+    is_selected: option.value == props.value,
     on_click: () => {
-      onChange(option.value)
+      props.onChange(option.value)
       set_is_open(false)
     }
   }))
 
-  const style = max_width ? { maxWidth: `${max_width}px` } : undefined
+  const style = width ? { width: `${width}px` } : undefined
 
   return (
-    <div
-      className={cn(styles.dropdown, className)}
-      ref={dropdown_ref}
-      style={style}
-    >
+    <div className={styles.dropdown} ref={dropdown_ref} style={style}>
       <button
-        className={styles.button}
+        ref={button_ref}
+        className={cn(styles.button, { [styles['button--open']]: is_open })}
         onClick={() => set_is_open(!is_open)}
-        data-is-open={is_open}
       >
         <span>{selected_option?.label ?? 'Select...'}</span>
         <span
-          className={cn(
-            'codicon codicon-chevron-down',
+          className={cn('codicon codicon-chevron-down', [
             styles.chevron,
-            is_open && styles.chevron_open
-          )}
+            { [styles['chevron--open']]: is_open }
+          ])}
         />
       </button>
-      {is_open && (
-        <DropdownMenu items={menu_items} className={styles.menu_override} />
-      )}
+      {is_open && <DropdownMenu items={menu_items} />}
     </div>
   )
 }

packages/ui/src/components/editor/common/DropdownMenu/DropdownMenu.tsx

@@ -1,5 +1,5 @@
+import { useState } from 'react'
 import styles from './DropdownMenu.module.scss'
-import cn from 'classnames'
 
 export namespace DropdownMenu {
   export type Item = {
@@ -11,24 +11,24 @@ export namespace DropdownMenu {
 
   export type Props = {
     items: Item[]
-    on_mouse_enter?: React.MouseEventHandler<HTMLDivElement>
-    className?: string
   }
 }
 
-export const DropdownMenu: React.FC<DropdownMenu.Props> = ({
-  items,
-  on_mouse_enter,
-  className
-}) => {
+export const DropdownMenu: React.FC<DropdownMenu.Props> = (props) => {
+  const [is_preselection_respected, set_is_preselection_respected] =
+    useState<boolean>(true)
+
   return (
-    <div className={cn(styles.menu, className)} onMouseEnter={on_mouse_enter}>
-      {items.map((item, index) => (
+    <div className={styles.menu}>
+      {props.items.map((item, index) => (
         <div
           key={index}
           className={styles.item}
           onClick={item.on_click}
-          data-selected={item.is_selected}
+          data-selected={item.is_selected && is_preselection_respected}
+          onMouseEnter={() => {
+            set_is_preselection_respected(false)
+          }}
         >
           <span>{item.label}</span>
           {item.shortcut && (

packages/ui/src/components/editor/common/Input/Input.module.scss

@@ -7,8 +7,11 @@
   width: 100%;
   outline: none;
 
+  &:hover {
+    border-color: var(--cwc-border-color-hover);
+  }
+
   &:focus {
-    outline: 1px solid var(--vscode-focusBorder);
-    outline-offset: -1px;
+    border-color: var(--vscode-focusBorder);
   }
 }

packages/ui/src/components/editor/panel/ResponsePreview/ResponsePreview.module.scss

@@ -39,20 +39,12 @@
   &--small {
     font-size: 13px;
   }
-
-  // &::after {
-  //   position: absolute;
-  //   content: '';
-  //   width: 100%;
-  //   height: 4px;
-  //   bottom: 0;
-  //   left: 0;
-  //   background: var(--vscode-sideBar-background);
-  // }
 }
 
 .list {
-  display: block;
+  display: flex;
+  flex-direction: column;
+  gap: var(--padding-4px);
 
   > div:first-child {
     margin-top: 0;
@@ -67,10 +59,15 @@
     align-items: center;
     justify-content: space-between;
     gap: var(--padding-8px);
-    padding: 0 var(--padding-12px);
-    height: var(--list-item-height);
+    border: 1px solid var(--cwc-border-color-dimmed);
+    padding: 0 var(--padding-8px);
+    margin: 0 var(--padding-12px);
+    height: 34px;
+    border-radius: 8px;
+
     &:hover {
       background-color: var(--vscode-list-hoverBackground);
+      border-color: var(--cwc-border-color);
 
       .list__file__actions {
         display: flex;

packages/ui/src/components/editor/panel/ResponsePreview/ResponsePreview.tsx

@@ -203,18 +203,6 @@ export const ResponsePreview: FC<Props> = (props) => {
                           }}
                         />
                       )}
-                      <IconButton
-                        codicon_icon="diff-single"
-                        title="Open Changes"
-                        on_click={(e) => {
-                          e.stopPropagation()
-                          set_last_clicked_file_index(index)
-                          props.on_focus_file({
-                            file_path: file.file_path,
-                            workspace_name: file.workspace_name
-                          })
-                        }}
-                      />
                       <IconButton
                         codicon_icon="go-to-file"
                         title="Go To File"

packages/ui/src/components/editor/panel/ResponsePreview/components/TextItem.module.scss

@@ -27,7 +27,6 @@
     max-height: 50px;
     overflow: hidden;
     position: relative;
-    color: var(--vscode-descriptionForeground);
 
     &:hover {
       color: inherit;