fix(chat): Change the UI on output console and add spinner for writing process from agentic (#6936)

## Problem
1. On previous output console, the UI shows bash, now it need to be
shell
2. For writing the file, there is no spinner so it has perceived latency
illusion.

![image](https://github.com/user-attachments/assets/64ec9dbb-5717-4d7a-8a59-398e75c78af2)
3. For build failed case, the build log won't show up in code block and
not formatted


## Solution
1. Updated the console UI text to "shell".
2. Identified the issue where the toolUseEvent wasn't stopping during
file writing, preventing the spinner from appearing in the chat.
Resolved by adding an if statement to handle the toolUseInput case
appropriately.
3. Formatted the output for stderr.
<img width="442" alt="Screenshot 2025-04-03 at 5 31 13 PM"
src="https://github.com/user-attachments/assets/04bacb39-4945-484a-bc51-c3bda159b14e"
/>

---


- Treat all work as PUBLIC. Private `feature/x` branches will not be
squash-merged at release time.
- Your code changes must meet the guidelines in
[CONTRIBUTING.md](https://github.com/aws/aws-toolkit-vscode/blob/master/CONTRIBUTING.md#guidelines).
- License: I confirm that my contribution is made under the terms of the
Apache 2.0 license.

Author: Randall-Jiang

package-lock.json

@@ -64,7 +64,7 @@
         "husky": "^9.0.7",
         "prettier": "^3.3.3",
         "prettier-plugin-sh": "^0.14.0",
-        "pretty-quick": "^4.0.0",
+        "pretty-quick": "^4.1.1",
         "ts-node": "^10.9.1",
         "typescript": "^5.0.4",
         "webpack": "^5.95.0",

package.json

@@ -524,7 +524,7 @@
         "@aws-sdk/s3-request-presigner": "<3.731.0",
         "@aws-sdk/smithy-client": "<3.731.0",
         "@aws-sdk/util-arn-parser": "<3.731.0",
-        "@aws/mynah-ui": "^4.27.0",
+        "@aws/mynah-ui": "^4.28.0",
         "@gerhobbelt/gitignore-parser": "^0.2.0-9",
         "@iarna/toml": "^2.2.5",
         "@smithy/fetch-http-handler": "^5.0.1",

packages/core/package.json

@@ -27,18 +27,16 @@ import { ChatItemType } from '../../../../amazonq/commons/model'
 import { ChatItemAction, ChatItemButton, ProgressField } from '@aws/mynah-ui'
 import * as CodeWhispererConstants from '../../../../codewhisperer/models/constants'
 import { TriggerPayload } from '../../../../codewhispererChat/controllers/chat/model'
-import {
-    CodeWhispererStreamingServiceException,
-    GenerateAssistantResponseCommandOutput,
-} from '@amzn/codewhisperer-streaming'
+import { GenerateAssistantResponseCommandOutput } from '@amzn/codewhisperer-streaming'
 import { Session } from '../../session/session'
 import { CodeReference } from '../../../../amazonq/webview/ui/apps/amazonqCommonsConnector'
-import { getHttpStatusCode, getRequestId, getTelemetryReasonDesc, ToolkitError } from '../../../../shared/errors'
+import { getTelemetryReasonDesc, ToolkitError } from '../../../../shared/errors'
 import { sleep, waitUntil } from '../../../../shared/utilities/timeoutUtils'
 import { keys } from '../../../../shared/utilities/tsUtils'
 import { cancellingProgressField, testGenCompletedField } from '../../../models/constants'
 import { testGenState } from '../../../../codewhisperer/models/model'
 import { TelemetryHelper } from '../../../../codewhisperer/util/telemetryHelper'
+import { extractErrorInfo } from '../../../../shared/utilities/messageUtil'
 
 export type UnrecoverableErrorType = 'no-project-found' | 'no-open-file-found' | 'invalid-file-type'
 
@@ -249,26 +247,19 @@ export class Messenger {
             { timeout: 60000, truthy: true }
         )
             .catch((error: any) => {
-                let errorMessage = 'Error reading chat stream.'
-                let statusCode = undefined
-                let requestID = undefined
-                if (error instanceof CodeWhispererStreamingServiceException) {
-                    errorMessage = error.message
-                    statusCode = getHttpStatusCode(error) ?? 0
-                    requestID = getRequestId(error)
-                }
+                const errorInfo = extractErrorInfo(error)
                 let message = 'This error is reported to the team automatically. Please try sending your message again.'
-                if (errorMessage !== undefined) {
-                    message += `\n\nDetails: ${errorMessage}`
+                if (errorInfo.errorMessage !== undefined) {
+                    message += `\n\nDetails: ${errorInfo.errorMessage}`
                 }
 
-                if (statusCode !== undefined) {
-                    message += `\n\nStatus Code: ${statusCode}`
+                if (errorInfo.statusCode !== undefined) {
+                    message += `\n\nStatus Code: ${errorInfo.statusCode}`
                 }
 
-                if (requestID !== undefined) {
-                    messageId = requestID
-                    message += `\n\nRequest ID: ${requestID}`
+                if (errorInfo.requestId !== undefined) {
+                    messageId = errorInfo.requestId
+                    message += `\n\nRequest ID: ${errorInfo.requestId}`
                 }
                 this.sendMessage(message.trim(), tabID, 'answer')
             })

packages/core/src/amazonqTest/chat/controller/messenger/messenger.ts

@@ -20,7 +20,6 @@ import { EditorContextCommandType } from '../../../commands/registerCommands'
 import { ChatResponseStream as qdevChatResponseStream } from '@amzn/amazon-q-developer-streaming-client'
 import {
     ChatResponseStream as cwChatResponseStream,
-    CodeWhispererStreamingServiceException,
     SupplementaryWebLink,
     ToolUse,
 } from '@amzn/codewhisperer-streaming'
@@ -29,7 +28,7 @@ import { ChatSession } from '../../../clients/chat/v0/chat'
 import { ChatException } from './model'
 import { CWCTelemetryHelper } from '../telemetryHelper'
 import { ChatPromptCommandType, DocumentReference, TriggerPayload } from '../model'
-import { getHttpStatusCode, getRequestId, ToolkitError } from '../../../../shared/errors'
+import { ToolkitError } from '../../../../shared/errors'
 import { keys } from '../../../../shared/utilities/tsUtils'
 import { getLogger } from '../../../../shared/logger/logger'
 import { FeatureAuthState } from '../../../../codewhisperer/util/authUtil'
@@ -46,6 +45,7 @@ import { ToolType, ToolUtils } from '../../../tools/toolUtils'
 import { ChatStream } from '../../../tools/chatStream'
 import path from 'path'
 import { CommandValidation } from '../../../tools/executeBash'
+import { extractErrorInfo } from '../../../../shared/utilities/messageUtil'
 import { noWriteTools, tools } from '../../../constants'
 import { Change } from 'diff'
 import { FsWriteParams } from '../../../tools/fsWrite'
@@ -279,6 +279,9 @@ export class Messenger {
                         } else {
                             // TODO: Handle the error
                         }
+                    } else if (cwChatEvent.toolUseEvent?.stop === undefined && toolUseInput !== '') {
+                        // This is for the case when writing tool is executed. The toolUseEvent is non stop but in toolUseInput is not empty. In this case we need show user the current spinner UI.
+                        this.sendInitalStream(tabID, triggerID, undefined)
                     }
 
                     if (
@@ -340,26 +343,21 @@ export class Messenger {
             { timeout: 600000, truthy: true }
         )
             .catch((error: any) => {
-                let errorMessage = 'Error reading chat stream.'
-                let statusCode = undefined
-                let requestID = undefined
-
-                if (error instanceof CodeWhispererStreamingServiceException) {
-                    errorMessage = error.message
-                    statusCode = getHttpStatusCode(error) ?? 0
-                    requestID = getRequestId(error)
-                }
-
+                const errorInfo = extractErrorInfo(error)
                 this.showChatExceptionMessage(
-                    { errorMessage, statusCode: statusCode?.toString(), sessionID: undefined },
+                    {
+                        errorMessage: errorInfo.errorMessage,
+                        statusCode: errorInfo.statusCode?.toString(),
+                        sessionID: undefined,
+                    },
                     tabID,
-                    requestID
+                    errorInfo.requestId
                 )
-                getLogger().error(`error: ${errorMessage} tabID: ${tabID} requestID: ${requestID}`)
+                getLogger().error(`error: ${errorInfo.errorMessage} tabID: ${tabID} requestID: ${errorInfo.requestId}`)
 
                 followUps = []
                 relatedSuggestions = []
-                this.telemetryHelper.recordMessageResponseError(triggerPayload, tabID, statusCode ?? 0)
+                this.telemetryHelper.recordMessageResponseError(triggerPayload, tabID, errorInfo.statusCode ?? 0)
             })
             .finally(async () => {
                 if (

packages/core/src/codewhispererChat/controllers/chat/messenger/messenger.ts

@@ -328,7 +328,7 @@ export class ExecuteBash {
 
     public queueDescription(updates: Writable): void {
         updates.write(`I will run the following shell command:\n`)
-        updates.write('```bash\n' + this.command + '\n```')
+        updates.write('```shell\n' + this.command + '\n```')
         updates.end()
     }
 }

packages/core/src/codewhispererChat/tools/executeBash.ts

@@ -0,0 +1,31 @@
+/*!
+ * Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { CodeWhispererStreamingServiceException } from '@amzn/codewhisperer-streaming'
+import { getHttpStatusCode, getRequestId } from '../errors'
+
+export interface MessageErrorInfo {
+    errorMessage: string
+    statusCode?: number
+    requestId?: string
+}
+
+export function extractErrorInfo(error: any): MessageErrorInfo {
+    let errorMessage = 'Error reading chat stream.'
+    let statusCode = undefined
+    let requestId = undefined
+
+    if (error instanceof CodeWhispererStreamingServiceException) {
+        errorMessage = error.message
+        statusCode = getHttpStatusCode(error) ?? 0
+        requestId = getRequestId(error)
+    }
+
+    return {
+        errorMessage,
+        statusCode,
+        requestId,
+    }
+}