"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { cn } from "@stigmer/theme";
import { ExecutionPhaseBadge } from "./ExecutionPhaseBadge";
import { TodoList } from "./TodoList";
/**
 * Displays execution lifecycle phase and, when present, the agent's
 * todo checklist showing multi-step task progress.
 *
 * The phase badge is always visible so the user knows the execution
 * state at a glance. When the agent creates todo items (via the
 * `write_todos` tool), they appear as a compact checklist sorted by
 * activity: in-progress items first, then pending, completed, and
 * cancelled.
 *
 * Renders its content without card chrome (no border, background, or
 * elevation). The consumer controls the container styling.
 *
 * All visual properties flow through `--stgm-*` tokens.
 *
 * @example
 * ```tsx
 * const stream = useExecutionStream(executionId);
 *
 * <div className="rounded-lg border border-border bg-card p-3">
 *   <ExecutionProgress execution={stream.execution} />
 * </div>
 * ```
 */
export function ExecutionProgress({ execution, className, }) {
    if (!execution)
        return null;
    const phase = execution.status?.phase;
    if (phase === undefined)
        return null;
    const todos = execution.status?.todos;
    return (_jsxs("div", { className: cn("flex flex-col gap-2", className), role: "region", "aria-label": "Execution progress", children: [_jsx(ExecutionPhaseBadge, { phase: phase }), todos && _jsx(TodoList, { todos: todos })] }));
}
//# sourceMappingURL=ExecutionProgress.js.map