feat: add error handling to orchestrator and UI tool call display
Adds error callbacks to LLM orchestrator for tool and stream failures, updates UI to show failed tool calls with error details, removes deprecated tool-definitions.ts file, and updates agent prompt to remove `--dangerously-skip-permissions` flag from Claude Code commands.
This commit is contained in:
@@ -520,6 +520,10 @@
|
||||
border-color: #22c55e;
|
||||
}
|
||||
|
||||
.tool-call-card[data-status="failed"] {
|
||||
border-color: #ef4444;
|
||||
}
|
||||
|
||||
.tool-call-header {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
@@ -575,6 +579,11 @@
|
||||
color: #86efac;
|
||||
}
|
||||
|
||||
.tool-call-card[data-status="failed"] .tool-call-status {
|
||||
background-color: rgba(239, 68, 68, 0.2);
|
||||
color: #fca5a5;
|
||||
}
|
||||
|
||||
.status-icon {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@@ -21,7 +21,8 @@ type LogEntry =
|
||||
toolName: string;
|
||||
args: any;
|
||||
result?: any;
|
||||
status: "executing" | "completed";
|
||||
error?: any;
|
||||
status: "executing" | "completed" | "failed";
|
||||
};
|
||||
|
||||
function App() {
|
||||
@@ -138,6 +139,23 @@ function App() {
|
||||
return;
|
||||
}
|
||||
|
||||
// Handle tool errors - update tool call status to failed
|
||||
if (data.type === "error" && data.metadata?.toolCallId) {
|
||||
const { toolCallId, error } = data.metadata as {
|
||||
toolCallId: string;
|
||||
error: any;
|
||||
};
|
||||
|
||||
setLogs((prev) =>
|
||||
prev.map((log) =>
|
||||
log.type === "tool_call" && log.id === toolCallId
|
||||
? { ...log, error, status: "failed" as const }
|
||||
: log
|
||||
)
|
||||
);
|
||||
// Don't return - still add the error message to the log
|
||||
}
|
||||
|
||||
// Map activity log types to UI log types
|
||||
let logType: "system" | "info" | "success" | "error" | "user" | "assistant" = "info";
|
||||
if (data.type === "transcript") logType = "user";
|
||||
@@ -336,6 +354,7 @@ function App() {
|
||||
toolName={log.toolName}
|
||||
args={log.args}
|
||||
result={log.result}
|
||||
error={log.error}
|
||||
status={log.status}
|
||||
/>
|
||||
) : (
|
||||
|
||||
@@ -1,17 +1,19 @@
|
||||
import { useState } from "react";
|
||||
import { ChevronDown, ChevronRight, CheckCircle, Loader2 } from "lucide-react";
|
||||
import { ChevronDown, ChevronRight, CheckCircle, Loader2, XCircle } from "lucide-react";
|
||||
|
||||
export interface ToolCallCardProps {
|
||||
toolName: string;
|
||||
args: any;
|
||||
result?: any;
|
||||
status: "executing" | "completed";
|
||||
error?: any;
|
||||
status: "executing" | "completed" | "failed";
|
||||
}
|
||||
|
||||
export function ToolCallCard({
|
||||
toolName,
|
||||
args,
|
||||
result,
|
||||
error,
|
||||
status,
|
||||
}: ToolCallCardProps) {
|
||||
const [isExpanded, setIsExpanded] = useState(false);
|
||||
@@ -34,6 +36,8 @@ export function ToolCallCard({
|
||||
<div className="tool-call-status">
|
||||
{status === "executing" ? (
|
||||
<Loader2 size={14} className="status-icon spinning" />
|
||||
) : status === "failed" ? (
|
||||
<XCircle size={14} className="status-icon" />
|
||||
) : (
|
||||
<CheckCircle size={14} className="status-icon" />
|
||||
)}
|
||||
@@ -54,6 +58,13 @@ export function ToolCallCard({
|
||||
<pre className="section-content">{JSON.stringify(result, null, 2)}</pre>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{error !== undefined && (
|
||||
<div className="tool-call-section">
|
||||
<div className="section-header">Error</div>
|
||||
<pre className="section-content">{JSON.stringify(error, null, 2)}</pre>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user