✨ Interactive diagnostic issue selection UX

agentic/src/types.ts

@@ -51,6 +51,7 @@ export interface KaiUserInteraction {
       uri: string;
       task: string;
     }[];
+    selectedIssues?: string[];
   };
 }
 

shared/src/index.ts

@@ -3,3 +3,5 @@ export * from "./transformation";
 export * from "./labelSelector";
 export * from "./utils/languageMapping";
 export * from "./utils/diffUtils";
+
+export type { DiagnosticIssue, DiagnosticSummary, DiagnosticMessageValue } from "./types/types";

shared/src/types/types.ts

@@ -89,6 +89,7 @@ export enum ChatMessageType {
   JSON = "JsonChatMessage",
   Tool = "ToolChatMessage",
   ModifiedFile = "ModifiedFileChatMessage",
+  Diagnostic = "DiagnosticChatMessage",
 }
 
 export interface QuickResponse {
@@ -283,3 +284,25 @@ export interface InputOutputCache<K, V, C, O> {
   invalidate(input: K, opts?: O): Promise<void>;
   reset(): Promise<void>;
 }
+
+export const KONVEYOR_OUTPUT_CHANNEL_NAME = "Konveyor";
+
+export interface DiagnosticIssue {
+  id: string;
+  message: string;
+  uri: string;
+  filename: string;
+  selected?: boolean;
+}
+
+export interface DiagnosticSummary {
+  summary: string;
+  issuesByFile: Record<string, DiagnosticIssue[]>;
+  totalIssues: number;
+}
+
+export interface DiagnosticMessageValue {
+  message: string;
+  diagnosticSummary: DiagnosticSummary;
+  tasksData: { uri: string; task: string }[];
+}

tests/e2e/tests/agent_flow_coolstore.test.ts

@@ -95,16 +95,28 @@ providers.forEach((config) => {
           done = true;
           break;
         }
-        // either a Yes/No button or 'Accept all changes' button will be visible throughout the flow
-        const yesButton = resolutionView.locator('button').filter({ hasText: 'Yes' });
+        // either a Yes/No button, Fix All button, or 'Accept all changes' button will be visible throughout the flow
+        const enabledYesButton = resolutionView
+          .locator('button:enabled')
+          .filter({ hasText: 'Yes' });
+        const disabledYesButton = resolutionView
+          .locator('button:disabled')
+          .filter({ hasText: 'Yes' });
+        const enabledFixAllButton = resolutionView
+          .locator('button:enabled')
+          .filter({ hasText: /Fix All/ });
         const acceptChangesLocator = resolutionView.locator(
           'button[aria-label="Accept all changes"]'
         );
-        const yesButtonCount = await yesButton.count();
-        if (yesButtonCount > lastYesButtonCount) {
-          lastYesButtonCount = yesButtonCount;
+
+        const enabledYesButtonCount = await enabledYesButton.count();
+        const disabledYesButtonCount = await disabledYesButton.count();
+        const enabledFixAllButtonCount = await enabledFixAllButton.count();
+
+        if (enabledYesButtonCount > 0 && enabledYesButtonCount > lastYesButtonCount) {
+          lastYesButtonCount = enabledYesButtonCount;
           await vscodeApp.waitDefault();
-          await yesButton.last().click();
+          await enabledYesButton.last().click();
           console.log('Yes button clicked');
           await vscodeApp.getWindow().screenshot({
             path: pathlib.join(
@@ -114,6 +126,18 @@ providers.forEach((config) => {
               `${1000 - maxIterations}-yesNo.png`
             ),
           });
+        } else if (disabledYesButtonCount > 0 && enabledFixAllButtonCount > 0) {
+          await vscodeApp.waitDefault();
+          await enabledFixAllButton.last().click();
+          console.log('Fix All button clicked (yes button was disabled)');
+          await vscodeApp.getWindow().screenshot({
+            path: pathlib.join(
+              SCREENSHOTS_FOLDER,
+              'agentic_flow_coolstore',
+              `${config.model.replace(/[.:]/g, '-')}`,
+              `${1000 - maxIterations}-fixAll.png`
+            ),
+          });
         } else if ((await acceptChangesLocator.count()) > 0) {
           await acceptChangesLocator.last().click();
           console.log('Accept all changes button clicked');

vscode/src/taskManager/utils.ts

@@ -1,12 +1,14 @@
 import { basename } from "path";
 import { TasksList } from "./types";
+import { DiagnosticIssue, DiagnosticSummary } from "@editor-extensions/shared";
 
 /**
- * Summarizes the tasks into a string to be displayed to the user.
+ * Summarizes the tasks into structured data for interactive display.
  * @param tasks - The tasks to summarize.
  */
-export function summarizeTasks(tasks: TasksList): string {
+export function summarizeTasksStructured(tasks: TasksList): DiagnosticSummary {
   const uriToTasksMap = new Map<string, string[]>();
+  const issuesByFile: Record<string, DiagnosticIssue[]> = {};
 
   tasks.currentTasks.forEach((task) => {
     const uri = task.getUri();
@@ -18,8 +20,21 @@ export function summarizeTasks(tasks: TasksList): string {
 
   let summary = "### New issues:\n";
   uriToTasksMap.forEach((taskList, uri) => {
-    summary += `- ${taskList.length} new issues in **${basename(uri)}**.\n`;
+    const filename = basename(uri);
+    summary += `- ${taskList.length} new issues in **${filename}**.\n`;
+
+    // Create structured issues for this file
     const uniqueTasks = Array.from(new Set(taskList));
+    const fileIssues: DiagnosticIssue[] = uniqueTasks.map((task) => ({
+      id: `${uri}-${task}`,
+      message: task.length > 200 ? task.slice(0, 197) + "..." : task,
+      uri,
+      filename,
+    }));
+
+    issuesByFile[filename] = fileIssues;
+
+    // Show first 2 issues in summary
     uniqueTasks.slice(0, Math.min(2, uniqueTasks.length)).forEach((task) => {
       summary += `  - ${task.length > 200 ? task.slice(0, 197) + "..." : task}\n`;
     });
@@ -37,7 +52,19 @@ export function summarizeTasks(tasks: TasksList): string {
     });
   }
 
-  return summary;
+  return {
+    summary,
+    issuesByFile,
+    totalIssues: tasks.currentTasks.length,
+  };
+}
+
+/**
+ * Summarizes the tasks into a string to be displayed to the user.
+ * @param tasks - The tasks to summarize.
+ */
+export function summarizeTasks(tasks: TasksList): string {
+  return summarizeTasksStructured(tasks).summary;
 }
 
 /**

vscode/src/utilities/ModifiedFiles/handleQuickResponse.ts

@@ -9,6 +9,7 @@ export async function handleQuickResponse(
   messageToken: string,
   responseId: string,
   state: ExtensionState,
+  selectedIssues?: string[], // Add selected issues parameter
 ): Promise<void> {
   try {
     try {
@@ -33,17 +34,38 @@ export async function handleQuickResponse(
 
       // Create the workflow message with proper typing
       let interactionType = responseId.startsWith("choice-") ? "choice" : "yesNo";
-      let responseData: { choice: number } | { yesNo: boolean } | { tasks: any; yesNo: boolean } =
-        responseId.startsWith("choice-")
-          ? { choice: parseInt(responseId.split("-")[1]) }
-          : { yesNo: responseId === "yes" };
+      let responseData:
+        | { choice: number }
+        | { yesNo: boolean }
+        | { tasks: any; yesNo: boolean; selectedIssues?: string[] } = responseId.startsWith(
+        "choice-",
+      )
+        ? { choice: parseInt(responseId.split("-")[1]) }
+        : { yesNo: responseId === "yes" };
 
       // Check if this message is related to "tasks" interaction by looking for tasksData in the message value
       if (msg.value && "tasksData" in msg.value) {
         interactionType = "tasks";
+
+        // Filter tasks based on selected issues if any are selected
+        let filteredTasks = msg.value.tasksData as Array<{ uri: string; task: string }>;
+        if (selectedIssues && selectedIssues.length > 0) {
+          // selectedIssues contains individual issue IDs in format: "${uri}-${task}"
+          const selectedIssueIds = new Set(selectedIssues);
+
+          // Filter tasks to only include those that match selected issue IDs
+          filteredTasks = (msg.value.tasksData as Array<{ uri: string; task: string }>).filter(
+            (task) => {
+              const issueId = `${task.uri}-${task.task}`;
+              return selectedIssueIds.has(issueId);
+            },
+          );
+        }
+
         responseData = {
-          tasks: msg.value.tasksData,
+          tasks: filteredTasks,
           yesNo: responseId === "yes",
+          selectedIssues: selectedIssues, // Include selected issues for reference
         };
       }
 
@@ -70,6 +92,7 @@ export async function handleQuickResponse(
         const resolved = state.resolvePendingInteraction(messageToken, {
           responseId: responseId,
           interactionType: interactionType,
+          selectedIssues: selectedIssues, // Include selected issues
         });
 
         if (!resolved) {

vscode/src/utilities/ModifiedFiles/processMessage.ts

@@ -7,11 +7,12 @@ import {
   KaiWorkflowMessageType,
   KaiUserInteraction,
 } from "@editor-extensions/agentic";
-import { flattenCurrentTasks, summarizeTasks, type TasksList } from "../../taskManager";
+import { flattenCurrentTasks, type TasksList } from "../../taskManager";
 import { ExtensionState } from "../../extensionState";
 import { ChatMessageType, ToolMessageValue } from "@editor-extensions/shared";
 import { handleModifiedFileMessage } from "./handleModifiedFile";
 import { MessageQueueManager, handleUserInteractionComplete } from "./queueManager";
+import { summarizeTasksStructured } from "../../taskManager/utils";
 
 // Helper function to wait for analysis completion with timeout
 const waitForAnalysisCompletion = async (state: ExtensionState): Promise<void> => {
@@ -47,8 +48,16 @@ const resetStuckAnalysisFlags = (state: ExtensionState): void => {
 };
 
 // Helper function to create tasks message
-const createTasksMessage = (tasks: TasksList): string => {
-  return `It appears that my fixes caused following issues:\n\n${summarizeTasks(tasks)}\n\nDo you want me to continue fixing them?`;
+const createTasksMessage = (tasks: TasksList): { message: string; diagnosticSummary: any } => {
+  const diagnosticSummary = summarizeTasksStructured(tasks);
+  return {
+    message: `It appears that my fixes caused following issues. Please review the issues below and select which ones you'd like me to fix. `,
+    diagnosticSummary: {
+      summary: diagnosticSummary.summary,
+      issuesByFile: diagnosticSummary.issuesByFile,
+      totalIssues: diagnosticSummary.totalIssues,
+    },
+  };
 };
 
 // Helper function to handle user interaction promises uniformly
@@ -111,12 +120,14 @@ const handleTasksInteraction = async (
   }
   // Show tasks to user and wait for response
   state.mutateData((draft) => {
+    const tasksMessage = createTasksMessage(rawTasks);
     draft.chatMessages.push({
       kind: ChatMessageType.String,
       messageToken: msg.id,
       timestamp: new Date().toISOString(),
       value: {
-        message: createTasksMessage(rawTasks),
+        message: tasksMessage.message,
+        diagnosticSummary: tasksMessage.diagnosticSummary,
         tasksData: flattenCurrentTasks(rawTasks),
       },
       quickResponses: [

vscode/src/webviewMessageHandler.ts

@@ -173,8 +173,8 @@ const actions: {
       vscode.window.showErrorMessage(`Failed to show diff with decorations: ${error}`);
     }
   },
-  QUICK_RESPONSE: async ({ responseId, messageToken }, state) => {
-    handleQuickResponse(messageToken, responseId, state);
+  QUICK_RESPONSE: async ({ responseId, messageToken, selectedIssues }, state) => {
+    handleQuickResponse(messageToken, responseId, state, selectedIssues);
   },
   FILE_RESPONSE: async ({ responseId, messageToken, path, content }, state) => {
     handleFileResponse(messageToken, responseId, path, content, state);

webview-ui/src/App.tsx

@@ -2,7 +2,7 @@
 import React, { useState, useEffect } from "react";
 import { viewType } from "./utils/vscode";
 import AnalysisPage from "./components/AnalysisPage/AnalysisPage";
-import ResolutionPage from "./components/ResolutionsPage/ResolutionsPage";
+import ResolutionPage from "./components/ResolutionsPage/ResolutionsPage.dev";
 import { WebviewType } from "@editor-extensions/shared";
 import { ExtensionStateProvider } from "./context/ExtensionStateContext";
 import { ProfileManagerPage } from "./components/ProfileManager/ProfileManagerPage";