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:
Mohamed Boudra
2025-10-20 00:05:29 +02:00
parent 853a73cc05
commit 07dae1c520
16 changed files with 95 additions and 188 deletions
+9
View File
@@ -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;
}
+20 -1
View File
@@ -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>