"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import * as React from "react";
import { ChevronDown, ChevronRight, Wrench } from "lucide-react";
function formatMs(ms) {
  if (ms < 1e3) return `${ms}ms`;
  return `${(ms / 1e3).toFixed(1)}s`;
}
function LoopStepRow({ step }) {
  const [expanded, setExpanded] = React.useState(false);
  const hasTools = step.toolCalls.length > 0;
  return /* @__PURE__ */ jsxs("li", { className: "border-b border-border last:border-0", children: [
    /* @__PURE__ */ jsxs(
      "button",
      {
        type: "button",
        className: "flex w-full items-center gap-2 px-2 py-1.5 text-xs hover:bg-muted/40",
        onClick: () => setExpanded((prev) => !prev),
        "aria-expanded": expanded,
        "aria-label": `Step ${step.stepIndex}`,
        children: [
          expanded ? /* @__PURE__ */ jsx(ChevronDown, { className: "size-3 shrink-0 text-muted-foreground", "aria-hidden": true }) : /* @__PURE__ */ jsx(ChevronRight, { className: "size-3 shrink-0 text-muted-foreground", "aria-hidden": true }),
          /* @__PURE__ */ jsxs("span", { className: "font-medium text-muted-foreground", children: [
            "Step ",
            step.stepIndex
          ] }),
          /* @__PURE__ */ jsx("span", { className: "font-mono text-muted-foreground/60", children: step.modelId }),
          hasTools ? /* @__PURE__ */ jsxs("span", { className: "ml-auto flex items-center gap-1 text-muted-foreground", children: [
            /* @__PURE__ */ jsx(Wrench, { className: "size-3", "aria-hidden": true }),
            step.toolCalls.length
          ] }) : null,
          /* @__PURE__ */ jsx("span", { className: "ml-auto font-mono text-muted-foreground/60", children: step.finishReason }),
          /* @__PURE__ */ jsxs("span", { className: "font-mono text-muted-foreground/60", children: [
            step.usage.inputTokens,
            "\u2191 ",
            step.usage.outputTokens,
            "\u2193"
          ] })
        ]
      }
    ),
    expanded ? /* @__PURE__ */ jsxs("div", { className: "bg-muted/20 px-4 pb-2 pt-1 text-xs", children: [
      step.textDelta ? /* @__PURE__ */ jsxs("div", { className: "mb-2", children: [
        /* @__PURE__ */ jsx("div", { className: "mb-0.5 font-semibold text-muted-foreground", children: "Text" }),
        /* @__PURE__ */ jsx("pre", { className: "max-h-32 overflow-auto whitespace-pre-wrap rounded bg-background p-1.5 font-mono", children: step.textDelta })
      ] }) : null,
      hasTools ? /* @__PURE__ */ jsxs("div", { children: [
        /* @__PURE__ */ jsx("div", { className: "mb-0.5 font-semibold text-muted-foreground", children: "Tool calls" }),
        /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-1", children: step.toolCalls.map((tc, index) => /* @__PURE__ */ jsxs(
          "li",
          {
            className: "rounded border border-border bg-background p-1.5",
            "data-loop-trace-tool-call": tc.toolName,
            children: [
              /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
                /* @__PURE__ */ jsx("span", { className: "font-mono font-semibold", children: tc.toolName }),
                tc.durationMs ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/60", children: formatMs(tc.durationMs) }) : null,
                tc.error ? /* @__PURE__ */ jsxs("span", { className: "text-status-error-fg", children: [
                  "error: ",
                  tc.error.code
                ] }) : null
              ] }),
              tc.args !== void 0 ? /* @__PURE__ */ jsx("pre", { className: "mt-1 max-h-24 overflow-auto whitespace-pre-wrap font-mono text-xs text-muted-foreground", children: JSON.stringify(tc.args, null, 2) }) : null
            ]
          },
          index
        )) })
      ] }) : null
    ] }) : null
  ] });
}
function LoopTracePanel({ trace, className }) {
  const [open, setOpen] = React.useState(false);
  return /* @__PURE__ */ jsxs(
    "section",
    {
      className: `rounded-md border border-border bg-background text-xs${className ? ` ${className}` : ""}`,
      "data-ai-loop-trace-panel": trace.agentId,
      children: [
        /* @__PURE__ */ jsxs(
          "button",
          {
            type: "button",
            className: "flex w-full items-center gap-2 px-3 py-2 hover:bg-muted/40",
            onClick: () => setOpen((prev) => !prev),
            "aria-expanded": open,
            "aria-controls": "loop-trace-steps",
            children: [
              open ? /* @__PURE__ */ jsx(ChevronDown, { className: "size-3 shrink-0 text-muted-foreground", "aria-hidden": true }) : /* @__PURE__ */ jsx(ChevronRight, { className: "size-3 shrink-0 text-muted-foreground", "aria-hidden": true }),
              /* @__PURE__ */ jsx("span", { className: "font-semibold text-muted-foreground", children: "Loop trace" }),
              /* @__PURE__ */ jsxs("span", { className: "ml-1 font-mono text-muted-foreground/60", children: [
                trace.steps.length,
                " step",
                trace.steps.length !== 1 ? "s" : ""
              ] }),
              /* @__PURE__ */ jsx(
                "span",
                {
                  className: "ml-auto font-mono text-muted-foreground/60",
                  "data-loop-trace-stop-reason": trace.stopReason,
                  children: trace.stopReason
                }
              ),
              /* @__PURE__ */ jsx("span", { className: "font-mono text-muted-foreground/60", children: formatMs(trace.totalDurationMs) }),
              /* @__PURE__ */ jsxs("span", { className: "font-mono text-muted-foreground/60", children: [
                trace.totalUsage.inputTokens + trace.totalUsage.outputTokens,
                " tok"
              ] })
            ]
          }
        ),
        open ? /* @__PURE__ */ jsxs("ul", { id: "loop-trace-steps", className: "border-t border-border", role: "list", children: [
          trace.steps.map((step) => /* @__PURE__ */ jsx(LoopStepRow, { step }, step.stepIndex)),
          trace.steps.length === 0 ? /* @__PURE__ */ jsx("li", { className: "px-3 py-2 text-muted-foreground", children: "No steps recorded." }) : null
        ] }) : null
      ]
    }
  );
}
export {
  LoopTracePanel
};
//# sourceMappingURL=LoopTracePanel.js.map
