"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { memo } from "react";
import { cn } from "@stigmer/theme";
import { WorkflowTaskKind } from "@stigmer/protos/ai/stigmer/agentic/workflow/v1/enum_pb";
import { formatDuration } from "./format-utils";
const STATUS_CONFIG = {
    pending: { icon: "○", colorClass: "text-muted-foreground" },
    running: { icon: "●", colorClass: "text-foreground" },
    completed: { icon: "✓", colorClass: "text-success" },
    failed: { icon: "✕", colorClass: "text-destructive" },
    skipped: { icon: "⊘", colorClass: "text-muted-foreground" },
    retrying: { icon: "↻", colorClass: "text-muted-foreground" },
    waiting_approval: { icon: "◉", colorClass: "text-warning" },
};
const TASK_KIND_SHORT_LABEL = new Map([
    [WorkflowTaskKind.agent_call, "agent"],
    [WorkflowTaskKind.llm_call, "llm"],
    [WorkflowTaskKind.http_call, "http"],
    [WorkflowTaskKind.grpc_call, "grpc"],
    [WorkflowTaskKind.transform, "transform"],
    [WorkflowTaskKind.human_input, "approval"],
    [WorkflowTaskKind.validate, "validate"],
    [WorkflowTaskKind.emit_event, "event"],
    [WorkflowTaskKind.notification, "notify"],
    [WorkflowTaskKind.eval, "eval"],
    [WorkflowTaskKind.switch_case, "switch"],
    [WorkflowTaskKind.for_each, "loop"],
    [WorkflowTaskKind.fork, "fork"],
    [WorkflowTaskKind.listen, "listen"],
    [WorkflowTaskKind.wait, "wait"],
]);
/**
 * Sidebar panel showing the status of each task in the workflow
 * execution. Tasks are ordered by their first appearance in the
 * event stream.
 *
 * Clicking a task row invokes `onSelectTask` which can be used
 * to scroll the timeline to events for that task.
 */
export const WorkflowExecutionTaskPanel = memo(function WorkflowExecutionTaskPanel({ taskStates, totalTasks, selectedTaskName, onSelectTask, className, }) {
    const tasks = Array.from(taskStates.values());
    const completedCount = tasks.filter((t) => t.status === "completed" || t.status === "skipped").length;
    return (_jsxs("div", { className: cn("flex flex-col", className), children: [_jsxs("div", { className: "flex items-center justify-between px-3 py-2", children: [_jsx("h3", { className: "text-xs font-semibold uppercase tracking-wider text-muted-foreground", children: "Tasks" }), totalTasks > 0 && (_jsxs("span", { className: "text-xs tabular-nums text-muted-foreground", children: [completedCount, "/", totalTasks] }))] }), tasks.length === 0 ? (_jsx("p", { className: "px-3 py-4 text-xs text-muted-foreground", children: "No tasks started" })) : (_jsx("div", { className: "flex flex-col", children: tasks.map((task) => {
                    const config = STATUS_CONFIG[task.status];
                    const kindLabel = TASK_KIND_SHORT_LABEL.get(task.taskKind) ?? "";
                    const isSelected = selectedTaskName === task.taskName;
                    return (_jsxs("button", { type: "button", onClick: () => onSelectTask?.(task.taskName), className: cn("flex items-center gap-2 px-3 py-1.5 text-left text-xs transition-colors", "hover:bg-muted/50", isSelected && "bg-muted"), children: [_jsx("span", { className: cn("shrink-0 text-xs", config.colorClass), "aria-hidden": "true", children: config.icon }), _jsx("span", { className: "min-w-0 flex-1 truncate text-foreground", children: task.taskName }), kindLabel && (_jsx("span", { className: "shrink-0 text-[10px] text-muted-foreground", children: kindLabel })), task.durationMs > 0 && (_jsx("span", { className: "shrink-0 tabular-nums text-[10px] text-muted-foreground", children: formatDuration(task.durationMs) }))] }, task.taskName));
                }) }))] }));
});
//# sourceMappingURL=WorkflowExecutionTaskPanel.js.map