Skip to content

Commit 1be5f2d

Browse files
committed
🤖 Add custom formatting for status_set tool calls
Created StatusSetToolCall component following existing tool call patterns: - Shows emoji and message in collapsed header - Displays full result details when expanded - Uses same ToolContainer/ToolHeader primitives as other tools - Added type definitions (StatusSetToolArgs, StatusSetToolResult) - Registered in ToolMessage.tsx routing Visual format: - Header: [▶] [emoji] message [status] - Expanded: Shows success/error details Generated with `cmux`
1 parent 8864a5f commit 1be5f2d

File tree

3 files changed

+90
-0
lines changed

3 files changed

+90
-0
lines changed

src/components/Messages/ToolMessage.tsx

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { FileEditToolCall } from "../tools/FileEditToolCall";
77
import { FileReadToolCall } from "../tools/FileReadToolCall";
88
import { ProposePlanToolCall } from "../tools/ProposePlanToolCall";
99
import { TodoToolCall } from "../tools/TodoToolCall";
10+
import { StatusSetToolCall } from "../tools/StatusSetToolCall";
1011
import type {
1112
BashToolArgs,
1213
BashToolResult,
@@ -22,6 +23,8 @@ import type {
2223
ProposePlanToolResult,
2324
TodoWriteToolArgs,
2425
TodoWriteToolResult,
26+
StatusSetToolArgs,
27+
StatusSetToolResult,
2528
} from "@/types/tools";
2629

2730
interface ToolMessageProps {
@@ -73,6 +76,11 @@ function isTodoWriteTool(toolName: string, args: unknown): args is TodoWriteTool
7376
return TOOL_DEFINITIONS.todo_write.schema.safeParse(args).success;
7477
}
7578

79+
function isStatusSetTool(toolName: string, args: unknown): args is StatusSetToolArgs {
80+
if (toolName !== "status_set") return false;
81+
return TOOL_DEFINITIONS.status_set.schema.safeParse(args).success;
82+
}
83+
7684
export const ToolMessage: React.FC<ToolMessageProps> = ({ message, className, workspaceId }) => {
7785
// Route to specialized components based on tool name
7886
if (isBashTool(message.toolName, message.args)) {
@@ -164,6 +172,18 @@ export const ToolMessage: React.FC<ToolMessageProps> = ({ message, className, wo
164172
);
165173
}
166174

175+
if (isStatusSetTool(message.toolName, message.args)) {
176+
return (
177+
<div className={className}>
178+
<StatusSetToolCall
179+
args={message.args}
180+
result={message.result as StatusSetToolResult | undefined}
181+
status={message.status}
182+
/>
183+
</div>
184+
);
185+
}
186+
167187
// Fallback to generic tool call
168188
return (
169189
<div className={className}>
Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import React from "react";
2+
import type { StatusSetToolArgs, StatusSetToolResult } from "@/types/tools";
3+
import {
4+
ToolContainer,
5+
ToolHeader,
6+
ExpandIcon,
7+
StatusIndicator,
8+
ToolDetails,
9+
} from "./shared/ToolPrimitives";
10+
import { useToolExpansion, getStatusDisplay, type ToolStatus } from "./shared/toolUtils";
11+
import { TooltipWrapper, Tooltip } from "../Tooltip";
12+
13+
interface StatusSetToolCallProps {
14+
args: StatusSetToolArgs;
15+
result?: StatusSetToolResult;
16+
status?: ToolStatus;
17+
}
18+
19+
export const StatusSetToolCall: React.FC<StatusSetToolCallProps> = ({
20+
args,
21+
result,
22+
status = "pending",
23+
}) => {
24+
const { expanded, toggleExpanded } = useToolExpansion(false); // Collapsed by default
25+
const statusDisplay = getStatusDisplay(status);
26+
27+
return (
28+
<ToolContainer expanded={expanded}>
29+
<ToolHeader onClick={toggleExpanded}>
30+
<ExpandIcon expanded={expanded}></ExpandIcon>
31+
<TooltipWrapper inline>
32+
<span>{args.emoji}</span>
33+
<Tooltip>status_set</Tooltip>
34+
</TooltipWrapper>
35+
<span className="text-sm text-muted-foreground">{args.message}</span>
36+
<StatusIndicator status={status}>{statusDisplay}</StatusIndicator>
37+
</ToolHeader>
38+
39+
{expanded && result && (
40+
<ToolDetails>
41+
{result.success ? (
42+
<div className="text-sm text-muted-foreground">
43+
Status updated: {result.emoji} {result.message}
44+
</div>
45+
) : (
46+
<div className="text-sm text-red-400">Error: {result.error}</div>
47+
)}
48+
</ToolDetails>
49+
)}
50+
</ToolContainer>
51+
);
52+
};

src/types/tools.ts

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -157,3 +157,21 @@ export interface TodoWriteToolResult {
157157
success: true;
158158
count: number;
159159
}
160+
161+
// Status Set Tool Types
162+
export interface StatusSetToolArgs {
163+
emoji: string;
164+
message: string;
165+
}
166+
167+
export type StatusSetToolResult =
168+
| {
169+
success: true;
170+
emoji: string;
171+
message: string;
172+
}
173+
| {
174+
success: false;
175+
error: string;
176+
};
177+

0 commit comments

Comments
 (0)