"use client";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { memo, useMemo } from "react";
import { cn } from "@stigmer/theme";
import { formatMicroUsd, formatTokenCount } from "../format-utils";
import { useExecutionStream } from "../../execution/useExecutionStream";
import { useConversationStoreRef } from "../../internal/store";
import { MessageThread } from "../../execution/MessageThread";
/**
 * Agent Call tab in the execution inspector.
 *
 * When the task is running and childExecutionId is known, subscribes to
 * the child AgentExecution stream and renders a live MessageThread.
 * When complete or ID is unavailable, shows a static summary.
 *
 * Subscription lifecycle follows DD-LIVE-006: only subscribes when the tab
 * is active and the task is running. Unsubscribes on unmount or deactivation.
 */
export const AgentCallTab = memo(function AgentCallTab({ agentCall, taskStatus, isTabActive = true, onNavigateToAgentExecution, className, }) {
    const isRunning = taskStatus === "running" || taskStatus === "waiting_approval";
    const hasChildId = !!agentCall.childExecutionId;
    const shouldSubscribe = isTabActive && isRunning && hasChildId;
    const effectiveId = shouldSubscribe ? agentCall.childExecutionId : null;
    const store = useConversationStoreRef();
    const { execution: streamExecution, isStreaming, isConnecting, error: streamError } = useExecutionStream(effectiveId, { store });
    const emptyExecutions = useMemo(() => [], []);
    const BZ = BigInt(0);
    if (isRunning && hasChildId) {
        return (_jsxs("div", { className: cn("flex flex-col gap-2", className), children: [_jsxs("div", { className: "flex items-center gap-2 text-[11px]", children: [isConnecting && (_jsx("span", { className: "text-muted-foreground", children: "Connecting to agent stream..." })), isStreaming && (_jsxs("span", { className: "text-primary", children: [_jsx("span", { className: "mr-1 inline-block size-1.5 animate-pulse rounded-full bg-primary" }), "Live"] })), streamError && (_jsx("span", { className: "text-destructive", children: "Stream error" })), _jsx("span", { className: "ml-auto text-muted-foreground", children: agentCall.agentSlug })] }), _jsx("div", { className: "min-h-0 flex-1 overflow-y-auto rounded border border-border", children: _jsx(MessageThread, { executions: emptyExecutions, activeStreamExecution: streamExecution ?? undefined, className: "max-h-[50vh]" }) }), onNavigateToAgentExecution && (_jsx("button", { type: "button", onClick: () => onNavigateToAgentExecution(agentCall.childExecutionId), className: "self-start rounded border border-border px-2.5 py-1.5 text-xs font-medium text-primary hover:bg-muted", children: "Open Full Session" }))] }));
    }
    if (isRunning && !hasChildId) {
        return (_jsxs("div", { className: cn("flex flex-col items-center justify-center gap-2 py-8", className), children: [_jsx("div", { className: "size-5 animate-spin rounded-full border-2 border-muted border-t-primary" }), _jsx("p", { className: "text-xs text-muted-foreground", children: "Waiting for agent to start..." }), _jsx("p", { className: "text-[11px] text-muted-foreground", children: agentCall.agentSlug })] }));
    }
    return (_jsxs("div", { className: cn("flex flex-col gap-3", className), children: [_jsxs("dl", { className: "grid grid-cols-[auto_1fr] gap-x-3 gap-y-1.5 text-xs", children: [_jsx("dt", { className: "text-muted-foreground", children: "Agent" }), _jsx("dd", { className: "font-medium text-foreground", children: agentCall.agentSlug }), agentCall.agentPhase && (_jsxs(_Fragment, { children: [_jsx("dt", { className: "text-muted-foreground", children: "Phase" }), _jsx("dd", { className: "text-foreground", children: agentCall.agentPhase })] })), agentCall.messagesCount > 0 && (_jsxs(_Fragment, { children: [_jsx("dt", { className: "text-muted-foreground", children: "Messages" }), _jsx("dd", { className: "tabular-nums text-foreground", children: agentCall.messagesCount })] })), agentCall.toolCallsCount > 0 && (_jsxs(_Fragment, { children: [_jsx("dt", { className: "text-muted-foreground", children: "Tool calls" }), _jsx("dd", { className: "tabular-nums text-foreground", children: agentCall.toolCallsCount })] })), agentCall.currentToolName && (_jsxs(_Fragment, { children: [_jsx("dt", { className: "text-muted-foreground", children: "Current tool" }), _jsx("dd", { className: "text-foreground", children: agentCall.currentToolName })] })), agentCall.tokensConsumed > BZ && (_jsxs(_Fragment, { children: [_jsx("dt", { className: "text-muted-foreground", children: "Tokens" }), _jsx("dd", { className: "tabular-nums text-foreground", children: formatTokenCount(agentCall.tokensConsumed) })] })), agentCall.costMicros > BZ && (_jsxs(_Fragment, { children: [_jsx("dt", { className: "text-muted-foreground", children: "Cost" }), _jsx("dd", { className: "tabular-nums text-foreground", children: formatMicroUsd(agentCall.costMicros) })] }))] }), agentCall.error && (_jsx("div", { className: "rounded-md border border-destructive/30 bg-destructive/5 px-3 py-2", role: "alert", children: _jsx("p", { className: "text-xs text-destructive", children: agentCall.error }) })), onNavigateToAgentExecution && agentCall.childExecutionId && (_jsx("button", { type: "button", onClick: () => onNavigateToAgentExecution(agentCall.childExecutionId), className: "self-start rounded border border-border px-2.5 py-1.5 text-xs font-medium text-primary hover:bg-muted", children: "View Agent Execution" }))] }));
});
//# sourceMappingURL=AgentCallTab.js.map