"use client";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { memo, useState, useCallback } from "react";
import { cn } from "@stigmer/theme";
import { formatDuration } from "../format-utils.js";
const CATEGORY_LABELS = {
    LLM_AUTHENTICATION_ERROR: "Authentication Error",
    LLM_PERMISSION_DENIED: "Permission Denied",
    LLM_MODEL_NOT_FOUND: "Model Not Found",
    LLM_RATE_LIMIT: "Rate Limit",
    LLM_BAD_REQUEST: "Bad Request",
    LLM_UNPROCESSABLE_REQUEST: "Unprocessable Request",
    LLM_SCHEMA_VALIDATION: "Schema Validation",
    LLM_MISSING_API_KEY: "Missing API Key",
    LLM_API_ERROR: "API Error",
    LLM_UNKNOWN_ERROR: "Unknown Error",
    HTTP_CLIENT_ERROR: "HTTP Client Error",
    WORKFLOW_EXECUTION_FAILED: "Execution Failed",
};
function getCategoryLabel(category) {
    return CATEGORY_LABELS[category] ?? category.replace(/_/g, " ");
}
export const ErrorTab = memo(function ErrorTab({ error, childExecutionId, onNavigateToAgentExecution, className, }) {
    const [showDetail, setShowDetail] = useState(false);
    const toggleDetail = useCallback(() => setShowDetail(v => !v), []);
    const hasDetail = !!error.detail;
    return (_jsxs("div", { className: cn("flex flex-col gap-3", className), children: [_jsxs("div", { className: "rounded-md border border-destructive/30 bg-destructive/5 px-3 py-2", role: "alert", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("p", { className: "text-xs font-medium text-destructive", children: "Error" }), error.category && (_jsx("span", { className: "rounded-sm bg-destructive/10 px-1.5 py-0.5 text-[10px] font-medium text-destructive", children: getCategoryLabel(error.category) }))] }), _jsx("p", { className: "mt-1 whitespace-pre-wrap break-words text-xs text-destructive/80", children: error.message })] }), hasDetail && (_jsxs("div", { children: [_jsxs("button", { type: "button", onClick: toggleDetail, className: "text-[10px] text-muted-foreground hover:text-foreground transition-colors", children: [showDetail ? "Hide" : "Show", " technical details"] }), showDetail && (_jsx("pre", { className: "mt-1 rounded-md border bg-muted/30 p-2 text-[10px] text-muted-foreground whitespace-pre-wrap break-words", children: error.detail }))] })), _jsxs("dl", { className: "grid grid-cols-[auto_1fr] gap-x-3 gap-y-1 text-xs", children: [_jsx("dt", { className: "text-muted-foreground", children: "Attempt" }), _jsxs("dd", { className: "tabular-nums text-foreground", children: [error.attemptNumber, error.maxAttempts > 0 && _jsxs("span", { className: "text-muted-foreground", children: [" / ", error.maxAttempts] })] }), error.durationMs > 0 && (_jsxs(_Fragment, { children: [_jsx("dt", { className: "text-muted-foreground", children: "Duration" }), _jsx("dd", { className: "tabular-nums text-foreground", children: formatDuration(error.durationMs) })] })), _jsx("dt", { className: "text-muted-foreground", children: "Retryable" }), _jsx("dd", { className: "text-foreground", children: error.willRetry ? "Yes" : "No" })] }), onNavigateToAgentExecution && childExecutionId && (_jsx("button", { type: "button", onClick: () => onNavigateToAgentExecution(childExecutionId), className: cn("inline-flex items-center gap-1.5 rounded-md border px-3 py-1.5", "text-xs font-medium transition-colors", "bg-background text-foreground hover:bg-accent"), children: "View Agent Execution" }))] }));
});
//# sourceMappingURL=ErrorTab.js.map