nits(aichat): better ui for tool execution (#6418)

* better conf messages

* nits on tool exec

frontend/src/lib/components/copilot/chat/ToolExecutionDisplay.svelte

@@ -24,7 +24,10 @@
 >
 	<!-- Collapsible Header -->
 	<button
-		class="w-full p-3 bg-surface-secondary hover:bg-surface-hover transition-colors flex items-center justify-between text-left border-b border-gray-200 dark:border-gray-700"
+		class={twMerge(
+			"w-full p-3 bg-surface-secondary hover:bg-surface-hover transition-colors flex items-center justify-between text-left border-b border-gray-200 dark:border-gray-700",
+			message.needsConfirmation ? "opacity-80" : ""
+		)}
 		onclick={() => (isExpanded = !isExpanded)}
 		disabled={!message.showDetails}
 	>
@@ -37,16 +40,13 @@
 				{/if}
 			{/if}
 
-			{#if message.isLoading}
+			{#if message.isLoading && !message.needsConfirmation}
 				<Loader2 class="w-3.5 h-3.5 animate-spin text-blue-500" />
 			{:else if message.error}
 				<span class="text-red-500">✗</span>
 			{:else if !message.isLoading && !message.error}
 				<span class="text-green-500">✓</span>
-			{:else}
-				<span class="text-tertiary">○</span>
 			{/if}
-
 			<span class="text-primary font-medium text-2xs">
 				{message.content}
 			</span>
@@ -57,7 +57,9 @@
 	{#if isExpanded}
 		<div class="p-3 bg-surface space-y-3">
 			<!-- Parameters Section -->
-			<ToolContentDisplay title="Parameters" content={message.parameters} />
+			<div class={message.needsConfirmation ? "opacity-80" : ""}>
+				<ToolContentDisplay title="Parameters" content={message.parameters} />
+			</div>
 
 			<!-- Confirmation Footer -->
 			{#if message.needsConfirmation}
@@ -69,7 +71,7 @@
 				>
 					<Button
 						variant="border"
-						color="red"
+						color="gray"
 						size="xs"
 						on:click={() => {
 							if (message.tool_call_id) {
@@ -80,7 +82,7 @@
 					></Button>
 					<Button
 						variant="border"
-						color="blue"
+						color="green"
 						size="xs"
 						on:click={() => {
 							if (message.tool_call_id) {

frontend/src/lib/components/copilot/chat/api/apiTools.ts

@@ -98,6 +98,7 @@ export function createApiTools(
 		return {
 			def: chatTool,
 			requiresConfirmation: needsConfirmation,
+			confirmationMessage: `Run ${toolName}`,
 			showDetails: true,
 			fn: async ({ args, toolId, toolCallbacks }) => {
 				const toolName = chatTool.function.name

frontend/src/lib/components/copilot/chat/flow/core.ts

@@ -598,6 +598,7 @@ export const flowTools: Tool<FlowAIChatHelpers>[] = [
 			})
 		},
 		requiresConfirmation: true,
+		confirmationMessage: 'Run flow test',
 		showDetails: true
 	},
 	{
@@ -709,6 +710,7 @@ export const flowTools: Tool<FlowAIChatHelpers>[] = [
 			}
 		},
 		requiresConfirmation: true,
+		confirmationMessage: 'Run flow step test',
 		showDetails: true
 	}
 ]

frontend/src/lib/components/copilot/chat/script/core.ts

@@ -916,5 +916,6 @@ export const testRunScriptTool: Tool<ScriptChatHelpers> = {
 		})
 	},
 	requiresConfirmation: true,
+	confirmationMessage: 'Run script test',
 	showDetails: true,
 }

frontend/src/lib/components/copilot/chat/shared.ts

@@ -89,11 +89,11 @@ export async function processToolCall<T>({
 
 		// Add the tool to the display with appropriate status
 		toolCallbacks.setToolStatus(toolCall.id, {
-			...(needsConfirmation ? { content: 'Waiting for confirmation...' } : {}),
+			...(tool?.requiresConfirmation ? { content: tool.confirmationMessage ?? "Waiting for confirmation..." } : {}),
 			parameters: args,
 			isLoading: true,
 			needsConfirmation: needsConfirmation,
-			showDetails: tool?.showDetails
+			showDetails: tool?.showDetails,
 		})
 
 		// If confirmation is needed and we have the callback, wait for it
@@ -173,6 +173,7 @@ export interface Tool<T> {
 	preAction?: (p: { toolCallbacks: ToolCallbacks; toolId: string }) => void
 	setSchema?: (helpers: any) => Promise<void>
 	requiresConfirmation?: boolean
+	confirmationMessage?: string
 	showDetails?: boolean
 }
 
@@ -411,8 +412,10 @@ export async function executeTestRun(config: TestRunConfig): Promise<string> {
 
 		const jobId = await config.jobStarter()
 
+		const contextName = config.contextName.charAt(0).toUpperCase() + config.contextName.slice(1)
+
 		config.toolCallbacks.setToolStatus(config.toolId, {
-			content: `${config.contextName} test started, waiting for completion...`
+			content: `${contextName} test started, waiting for completion...`
 		})
 
 		const job = await pollJobCompletion(
@@ -423,7 +426,7 @@ export async function executeTestRun(config: TestRunConfig): Promise<string> {
 		)
 
 		config.toolCallbacks.setToolStatus(config.toolId, {
-			content: `${config.contextName} test ${job.success ? 'completed successfully' : 'failed'}`,
+			content: `${contextName} test ${job.success ? 'completed successfully' : 'failed'}`,
 			result: formatResult(job.result),
 			logs: formatLogs(job.logs),
 			...(job.success ? {} : { error: getErrorMessage(job.result) })
@@ -433,10 +436,10 @@ export async function executeTestRun(config: TestRunConfig): Promise<string> {
 	} catch (error) {
 		const errorMessage = error instanceof Error ? error.message : 'Unknown error occurred'
 		config.toolCallbacks.setToolStatus(config.toolId, {
-			content: `${config.contextName} test execution failed`,
+			content: `Test execution failed`,
 			error: errorMessage
 		})
-		throw new Error(`Failed to execute ${config.contextName} test run: ${errorMessage}`)
+		throw new Error(`Failed to execute test run: ${errorMessage}`)
 	}
 }