fix: tool calls ui issues (#590)

This commit is contained in:
Mingholy
2025-09-12 17:52:23 +08:00
committed by GitHub
parent 67e2e270bd
commit b01ddf0aed
7 changed files with 23 additions and 22 deletions

View File

@@ -204,7 +204,7 @@ export const StatsDisplay: React.FC<StatsDisplayProps> = ({
<StatRow title="Tool Calls:">
<Text>
{tools.totalCalls} ({' '}
<Text color={theme.status.success}> {tools.totalSuccess}</Text>{' '}
<Text color={theme.status.success}> {tools.totalSuccess}</Text>{' '}
<Text color={theme.status.error}> {tools.totalFail}</Text> )
</Text>
</StatRow>

View File

@@ -7,7 +7,7 @@ exports[`<SessionSummaryDisplay /> > renders the summary display with a title 1`
│ │
│ Interaction Summary │
│ Session ID: │
│ Tool Calls: 0 ( 0 ✖ 0 ) │
│ Tool Calls: 0 ( 0 ✖ 0 ) │
│ Success Rate: 0.0% │
│ Code Changes: +42 -15 │
│ │

View File

@@ -7,7 +7,7 @@ exports[`<StatsDisplay /> > Code Changes Display > displays Code Changes when li
│ │
│ Interaction Summary │
│ Session ID: test-session-id │
│ Tool Calls: 1 ( 1 ✖ 0 ) │
│ Tool Calls: 1 ( 1 ✖ 0 ) │
│ Success Rate: 100.0% │
│ Code Changes: +42 -18 │
│ │
@@ -28,7 +28,7 @@ exports[`<StatsDisplay /> > Code Changes Display > hides Code Changes when no li
│ │
│ Interaction Summary │
│ Session ID: test-session-id │
│ Tool Calls: 1 ( 1 ✖ 0 ) │
│ Tool Calls: 1 ( 1 ✖ 0 ) │
│ Success Rate: 100.0% │
│ │
│ Performance │
@@ -48,7 +48,7 @@ exports[`<StatsDisplay /> > Conditional Color Tests > renders success rate in gr
│ │
│ Interaction Summary │
│ Session ID: test-session-id │
│ Tool Calls: 10 ( 10 ✖ 0 ) │
│ Tool Calls: 10 ( 10 ✖ 0 ) │
│ Success Rate: 100.0% │
│ │
│ Performance │
@@ -68,7 +68,7 @@ exports[`<StatsDisplay /> > Conditional Color Tests > renders success rate in re
│ │
│ Interaction Summary │
│ Session ID: test-session-id │
│ Tool Calls: 10 ( 5 ✖ 5 ) │
│ Tool Calls: 10 ( 5 ✖ 5 ) │
│ Success Rate: 50.0% │
│ │
│ Performance │
@@ -88,7 +88,7 @@ exports[`<StatsDisplay /> > Conditional Color Tests > renders success rate in ye
│ │
│ Interaction Summary │
│ Session ID: test-session-id │
│ Tool Calls: 10 ( 9 ✖ 1 ) │
│ Tool Calls: 10 ( 9 ✖ 1 ) │
│ Success Rate: 90.0% │
│ │
│ Performance │
@@ -108,7 +108,7 @@ exports[`<StatsDisplay /> > Conditional Rendering Tests > hides Efficiency secti
│ │
│ Interaction Summary │
│ Session ID: test-session-id │
│ Tool Calls: 0 ( 0 ✖ 0 ) │
│ Tool Calls: 0 ( 0 ✖ 0 ) │
│ Success Rate: 0.0% │
│ │
│ Performance │
@@ -132,7 +132,7 @@ exports[`<StatsDisplay /> > Conditional Rendering Tests > hides User Agreement w
│ │
│ Interaction Summary │
│ Session ID: test-session-id │
│ Tool Calls: 2 ( 1 ✖ 1 ) │
│ Tool Calls: 2 ( 1 ✖ 1 ) │
│ Success Rate: 50.0% │
│ │
│ Performance │
@@ -152,7 +152,7 @@ exports[`<StatsDisplay /> > Title Rendering > renders the custom title when a ti
│ │
│ Interaction Summary │
│ Session ID: test-session-id │
│ Tool Calls: 0 ( 0 ✖ 0 ) │
│ Tool Calls: 0 ( 0 ✖ 0 ) │
│ Success Rate: 0.0% │
│ │
│ Performance │
@@ -172,7 +172,7 @@ exports[`<StatsDisplay /> > Title Rendering > renders the default title when no
│ │
│ Interaction Summary │
│ Session ID: test-session-id │
│ Tool Calls: 0 ( 0 ✖ 0 ) │
│ Tool Calls: 0 ( 0 ✖ 0 ) │
│ Success Rate: 0.0% │
│ │
│ Performance │
@@ -192,7 +192,7 @@ exports[`<StatsDisplay /> > renders a table with two models correctly 1`] = `
│ │
│ Interaction Summary │
│ Session ID: test-session-id │
│ Tool Calls: 0 ( 0 ✖ 0 ) │
│ Tool Calls: 0 ( 0 ✖ 0 ) │
│ Success Rate: 0.0% │
│ │
│ Performance │
@@ -221,7 +221,7 @@ exports[`<StatsDisplay /> > renders all sections when all data is present 1`] =
│ │
│ Interaction Summary │
│ Session ID: test-session-id │
│ Tool Calls: 2 ( 1 ✖ 1 ) │
│ Tool Calls: 2 ( 1 ✖ 1 ) │
│ Success Rate: 50.0% │
│ User Agreement: 100.0% (1 reviewed) │
│ │
@@ -250,7 +250,7 @@ exports[`<StatsDisplay /> > renders only the Performance section in its zero sta
│ │
│ Interaction Summary │
│ Session ID: test-session-id │
│ Tool Calls: 0 ( 0 ✖ 0 ) │
│ Tool Calls: 0 ( 0 ✖ 0 ) │
│ Success Rate: 0.0% │
│ │
│ Performance │

View File

@@ -80,6 +80,7 @@ export const ToolGroupMessage: React.FC<ToolGroupMessageProps> = ({
marginLeft={1}
borderDimColor={hasPending}
borderColor={borderColor}
gap={1}
>
{toolCalls.map((tool) => {
const isConfirming = toolAwaitingApproval?.callId === tool.callId;

View File

@@ -84,19 +84,19 @@ describe('<ToolMessage />', () => {
StreamingState.Idle,
);
const output = lastFrame();
expect(output).toContain(''); // Success indicator
expect(output).toContain(''); // Success indicator
expect(output).toContain('test-tool');
expect(output).toContain('A tool for testing');
expect(output).toContain('MockMarkdown:Test result');
});
describe('ToolStatusIndicator rendering', () => {
it('shows for Success status', () => {
it('shows for Success status', () => {
const { lastFrame } = renderWithContext(
<ToolMessage {...baseProps} status={ToolCallStatus.Success} />,
StreamingState.Idle,
);
expect(lastFrame()).toContain('');
expect(lastFrame()).toContain('');
});
it('shows o for Pending status', () => {
@@ -138,7 +138,7 @@ describe('<ToolMessage />', () => {
);
expect(lastFrame()).toContain('⊷');
expect(lastFrame()).not.toContain('MockRespondingSpinner');
expect(lastFrame()).not.toContain('');
expect(lastFrame()).not.toContain('');
});
it('shows paused spinner for Executing status when streamingState is WaitingForConfirmation', () => {
@@ -148,7 +148,7 @@ describe('<ToolMessage />', () => {
);
expect(lastFrame()).toContain('⊷');
expect(lastFrame()).not.toContain('MockRespondingSpinner');
expect(lastFrame()).not.toContain('');
expect(lastFrame()).not.toContain('');
});
it('shows MockRespondingSpinner for Executing status when streamingState is Responding', () => {
@@ -157,7 +157,7 @@ describe('<ToolMessage />', () => {
StreamingState.Responding, // Simulate app still responding
);
expect(lastFrame()).toContain('MockRespondingSpinner');
expect(lastFrame()).not.toContain('');
expect(lastFrame()).not.toContain('');
});
});

View File

@@ -269,7 +269,7 @@ const ToolStatusIndicator: React.FC<ToolStatusIndicatorProps> = ({
/>
)}
{status === ToolCallStatus.Success && (
<Text color={Colors.AccentGreen}></Text>
<Text color={Colors.AccentGreen}></Text>
)}
{status === ToolCallStatus.Confirming && (
<Text color={Colors.AccentYellow}>?</Text>

View File

@@ -288,7 +288,7 @@ const ToolCallItem: React.FC<{
case 'awaiting_approval':
return <Text color={theme.status.warning}>?</Text>;
case 'success':
return <Text color={color}></Text>;
return <Text color={color}></Text>;
case 'failed':
return (
<Text color={color} bold>