Enhance fix-all failed files functionality with per-file progress tracking and refine UI consistency using custom theme variables

Author: robertpiosik

README.md

@@ -32,12 +32,12 @@ Code Web Chat is a free and open-source AI coding toolkit. You can use CWC in **
 
 ## Introduction
 
-With its focus on context engineering, CWC proposes a non-agentic workflow, where all the necessary for the task files, includnig useful examples, are picked with engineer's intent. Such guided model is easy to prompt and as accurate as it can get. The tool a perfect companion for all kinds of coding tasks; from mass renamings to complex features.
+With its focus on context engineering, CWC proposes a non-agentic workflow, where all the necessary for the task files, includnig useful examples, are picked with engineer's intent. Such guided model works well with simple prompts and as accurate as it can get. The tool is a perfect companion for all kinds of coding tasks; from mass renamings to complex features.
 
 > [!TIP]
-> Feeling lost in the codebase? Pick context roughly, switch prompt type to _Prune context_, include your task and AI will help narrowing it down to reasonable size.
+> Feeling lost in the codebase? Just pick a broad context, set _Prune context_, type what you're about to do and AI will help narrow it down to a reasonable size.
 
-When pair-programming with Code Web Chat you foster codebase understanding, iterate on changes easier to review, and enter the flow state like in the good old days!
+When pair-programming with Code Web Chat you foster codebase understanding, iterate on changes easy to review, and enter the flow state like in the good old days!
 
 ## Enabling autofill in browser
 

apps/editor/src/views/panel/backend/message-handlers/handle-fix-all-failed-files.ts

@@ -19,7 +19,8 @@ import { Logger } from '@shared/utils/logger'
 import { set_file_fixed_with_intelligent_update } from '@/commands/apply-chat-response-command/utils/preview'
 
 export const handle_fix_all_failed_files = async (
-  panel_provider: PanelProvider
+  panel_provider: PanelProvider,
+  files_to_fix: { file_path: string; workspace_name?: string }[]
 ): Promise<void> => {
   const original_states = panel_provider.context.workspaceState.get<
     OriginalFileState[]
@@ -36,7 +37,13 @@ export const handle_fix_all_failed_files = async (
   }
 
   const failed_files = original_states.filter(
-    (s) => s.apply_failed && !s.fixed_with_intelligent_update
+    (s) =>
+      s.apply_failed &&
+      !s.fixed_with_intelligent_update &&
+      files_to_fix.some(
+        (f) =>
+          f.file_path == s.file_path && f.workspace_name == s.workspace_name
+      )
   )
 
   if (failed_files.length == 0) {
@@ -72,10 +79,6 @@ export const handle_fix_all_failed_files = async (
   }
 
   const max_concurrency = intelligent_update_config.max_concurrency ?? 4
-  const cancel_token_source = axios.CancelToken.source()
-  panel_provider.intelligent_update_cancel_token_sources.push(
-    cancel_token_source
-  )
 
   const default_workspace_path =
     vscode.workspace.workspaceFolders?.[0]?.uri.fsPath
@@ -136,6 +139,13 @@ export const handle_fix_all_failed_files = async (
         const file_path = file_state.file_path
         const workspace_name = file_state.workspace_name
 
+        const cancel_token_source = axios.CancelToken.source()
+        panel_provider.intelligent_update_cancel_token_sources.push({
+          source: cancel_token_source,
+          file_path,
+          workspace_name
+        })
+
         panel_provider.send_message({
           command: 'UPDATE_FILE_PROGRESS',
           file_path,
@@ -268,16 +278,19 @@ export const handle_fix_all_failed_files = async (
             workspace_name,
             is_applying: false
           })
+
+          const index =
+            panel_provider.intelligent_update_cancel_token_sources.findIndex(
+              (s) => s.source === cancel_token_source
+            )
+          if (index > -1) {
+            panel_provider.intelligent_update_cancel_token_sources.splice(
+              index,
+              1
+            )
+          }
         }
       })
     )
   }
-
-  const index =
-    panel_provider.intelligent_update_cancel_token_sources.indexOf(
-      cancel_token_source
-    )
-  if (index > -1) {
-    panel_provider.intelligent_update_cancel_token_sources.splice(index, 1)
-  }
 }

apps/editor/src/views/panel/backend/message-handlers/handle-hash-sign-quick-pick/handle-hash-sign-quick-pick.ts

@@ -45,7 +45,13 @@ const hash_sign_quick_pick = async (params: {
     },
     {
       label: skill_label,
-      description: 'Reference an installed skill'
+      description: 'Reference an installed skill',
+      buttons: [
+        {
+          iconPath: new vscode.ThemeIcon('globe'),
+          tooltip: 'Discover skills at skills.sh'
+        }
+      ]
     }
   ]
 
@@ -85,6 +91,13 @@ const hash_sign_quick_pick = async (params: {
         quick_pick.onDidTriggerButton(() => {
           quick_pick.hide()
         })
+        quick_pick.onDidTriggerItemButton(async (e) => {
+          if (e.item.label === skill_label) {
+            await vscode.env.openExternal(
+              vscode.Uri.parse('https://skills.sh/')
+            )
+          }
+        })
         quick_pick.onDidAccept(() => {
           is_accepted = true
           resolve(quick_pick.selectedItems[0])

apps/editor/src/views/panel/backend/panel-provider.ts

@@ -736,7 +736,7 @@ export class PanelProvider implements vscode.WebviewViewProvider {
           } else if (message.command == 'REQUEST_CAN_UNDO') {
             handle_request_can_undo(this)
           } else if (message.command == 'FIX_ALL_FAILED_FILES') {
-            await handle_fix_all_failed_files(this)
+            await handle_fix_all_failed_files(this, message.files)
           } else if (
             message.command == 'GET_PRUNE_CONTEXT_INSTRUCTIONS_PREFIX'
           ) {

apps/editor/src/views/panel/frontend/Main/MainView/MainView.module.scss

@@ -30,7 +30,7 @@
 
   > span {
     font-size: 12px;
-    color: var(--vscode-descriptionForeground);
+    color: var(--cwc-text-color-dimmed);
   }
 }
 

apps/editor/src/views/panel/frontend/Panel.tsx

@@ -603,9 +603,10 @@ export const Panel = () => {
                     content: file.content
                   })
                 }}
-                on_fix_all_failed={() => {
+                on_fix_all_failed={(files) => {
                   post_message(vscode, {
-                    command: 'FIX_ALL_FAILED_FILES'
+                    command: 'FIX_ALL_FAILED_FILES',
+                    files
                   })
                 }}
               />

apps/editor/src/views/panel/types/messages.ts

@@ -365,6 +365,7 @@ export interface CancelIntelligentUpdateFileInPreviewMessage extends BaseMessage
 
 export interface FixAllFailedFilesMessage extends BaseMessage {
   command: 'FIX_ALL_FAILED_FILES'
+  files: { file_path: string; workspace_name?: string }[]
 }
 
 export interface CommitChangesMessage extends BaseMessage {

packages/ui/.storybook/styles.css

@@ -5,7 +5,7 @@
   --vscode-editor-font-size: 15px;
   --vscode-foreground: #f3eff5;
   --vscode-errorForeground: #f48771;
-  --vscode-descriptionForeground: rgba(243, 239, 245, 0.7);
+  --cwc-text-color-dimmed: rgba(243, 239, 245, 0.7);
   --vscode-icon-foreground: #c5c5c5;
   --vscode-focusBorder: #263354;
   --vscode-selection-background: rgba(243, 239, 245, 0.31);

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

@@ -21,7 +21,7 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  gap: 8px;
+  gap: 12px;
   padding: 0 6px;
   height: 24px;
   cursor: pointer;

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

@@ -15,7 +15,7 @@
   &::before {
     font-family: 'codicon';
     content: '\eab2';
-    font-size: 13px;
+    font-size: 15px;
     position: absolute;
     top: 50%;
     left: 50%;