@axis-ds/agentic-ui 1.1.0

package/dist/chunk-2BWCQQLU.mjs

@@ -0,0 +1,136 @@
+import {
+  STATUS_LABELS
+} from "./chunk-HWISMHCP.mjs";
+
+// src/run-progress/index.tsx
+import * as React from "react";
+import { cn } from "@axis-ds/ui-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var statusColors = {
+  pending: "bg-[var(--axis-color-gray-300)]",
+  running: "bg-[var(--axis-color-blue-500)] animate-pulse",
+  complete: "bg-[var(--axis-color-green-500)]",
+  error: "bg-[var(--axis-color-red-500)]"
+};
+var statusIcons = {
+  pending: null,
+  running: /* @__PURE__ */ jsxs("svg", { className: "w-3 h-3 animate-spin", viewBox: "0 0 24 24", fill: "none", children: [
+    /* @__PURE__ */ jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+    /* @__PURE__ */ jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" })
+  ] }),
+  complete: /* @__PURE__ */ jsx("svg", { className: "w-3 h-3", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }),
+  error: /* @__PURE__ */ jsx("svg", { className: "w-3 h-3", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+};
+function RunProgress({
+  status,
+  steps,
+  currentStep,
+  onCancel,
+  onRetry,
+  className
+}) {
+  const progressPercent = React.useMemo(() => {
+    const completed = steps.filter((s) => s.status === "complete").length;
+    return Math.round(completed / steps.length * 100);
+  }, [steps]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "rounded-lg border p-4",
+        "bg-[var(--axis-surface-default)] border-[var(--axis-border-default)]",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-4", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            status === "running" && /* @__PURE__ */ jsx("div", { className: "w-2 h-2 rounded-full bg-[var(--axis-color-blue-500)] animate-pulse" }),
+            /* @__PURE__ */ jsxs("span", { className: "text-sm font-medium text-[var(--axis-text-primary)]", children: [
+              status === "idle" && "\uB300\uAE30 \uC911",
+              status === "running" && "\uC2E4\uD589 \uC911",
+              status === "complete" && "\uC644\uB8CC",
+              status === "error" && "\uC624\uB958 \uBC1C\uC0DD"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("span", { className: "text-xs text-[var(--axis-text-secondary)]", children: [
+            progressPercent,
+            "%"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            role: "progressbar",
+            "aria-valuenow": progressPercent,
+            "aria-valuemin": 0,
+            "aria-valuemax": 100,
+            "aria-label": `\uC2E4\uD589 \uC9C4\uD589\uB960 ${progressPercent}%`,
+            className: "w-full h-1.5 rounded-full bg-[var(--axis-surface-secondary)] mb-4",
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "h-full rounded-full bg-[var(--axis-color-blue-500)] transition-all duration-300",
+                style: { width: `${progressPercent}%` }
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { role: "list", "aria-label": "\uC2E4\uD589 \uB2E8\uACC4", className: "space-y-2", children: steps.map((step, index) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            role: "listitem",
+            "aria-current": currentStep === index ? "step" : void 0,
+            className: cn(
+              "flex items-center gap-3 p-2 rounded-md transition-colors",
+              currentStep === index && "bg-[var(--axis-surface-secondary)]"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "w-5 h-5 rounded-full flex items-center justify-center text-white text-xs",
+                    statusColors[step.status]
+                  ),
+                  "aria-hidden": "true",
+                  children: statusIcons[step.status] || index + 1
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+                /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
+                  STATUS_LABELS[step.status],
+                  ":"
+                ] }),
+                /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-[var(--axis-text-primary)] truncate", children: step.label }),
+                step.description && /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--axis-text-secondary)] truncate", children: step.description })
+              ] })
+            ]
+          },
+          step.id
+        )) }),
+        (onCancel || onRetry) && /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2 mt-4 pt-4 border-t border-[var(--axis-border-default)]", children: [
+          status === "running" && onCancel && /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: onCancel,
+              className: "px-3 py-1.5 text-sm rounded-md bg-[var(--axis-surface-secondary)] text-[var(--axis-text-primary)] hover:bg-[var(--axis-surface-tertiary)]",
+              children: "\uCDE8\uC18C"
+            }
+          ),
+          status === "error" && onRetry && /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: onRetry,
+              className: "px-3 py-1.5 text-sm rounded-md bg-[var(--axis-color-blue-500)] text-white hover:bg-[var(--axis-color-blue-600)]",
+              children: "\uC7AC\uC2DC\uB3C4"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+
+export {
+  RunProgress
+};

package/dist/chunk-3TH7GFBD.mjs

@@ -0,0 +1,83 @@
+import {
+  AGENT_STATUS_LABELS
+} from "./chunk-HWISMHCP.mjs";
+
+// src/agent-avatar/index.tsx
+import { cn } from "@axis-ds/ui-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var sizeStyles = {
+  sm: "w-6 h-6 text-xs",
+  md: "w-8 h-8 text-sm",
+  lg: "w-10 h-10 text-base",
+  xl: "w-12 h-12 text-lg"
+};
+var statusStyles = {
+  online: "bg-[var(--axis-color-green-500)]",
+  busy: "bg-[var(--axis-color-yellow-500)]",
+  offline: "bg-[var(--axis-color-gray-400)]"
+};
+var typeColors = {
+  assistant: "bg-[var(--axis-color-purple-500)]",
+  tool: "bg-[var(--axis-color-blue-500)]",
+  system: "bg-[var(--axis-color-gray-600)]"
+};
+function AgentAvatar({
+  name,
+  src,
+  size = "md",
+  status,
+  type = "assistant",
+  className
+}) {
+  const initials = name.split(" ").map((n) => n[0]).join("").slice(0, 2).toUpperCase();
+  const statusLabel = status ? AGENT_STATUS_LABELS[status] : "";
+  const ariaLabel = `${name}${statusLabel ? `, ${statusLabel}` : ""}`;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "img",
+      "aria-label": ariaLabel,
+      className: cn("relative inline-flex", className),
+      children: [
+        src ? /* @__PURE__ */ jsx(
+          "img",
+          {
+            src,
+            alt: "",
+            "aria-hidden": "true",
+            className: cn(
+              "rounded-full object-cover",
+              sizeStyles[size]
+            )
+          }
+        ) : /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": "true",
+            className: cn(
+              "rounded-full flex items-center justify-center font-medium text-white",
+              sizeStyles[size],
+              typeColors[type]
+            ),
+            children: initials
+          }
+        ),
+        status && /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: cn(
+              "absolute bottom-0 right-0 rounded-full border-2 border-[var(--axis-surface-default)]",
+              size === "sm" ? "w-2 h-2" : "w-3 h-3",
+              statusStyles[status]
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+
+export {
+  AgentAvatar
+};

package/dist/chunk-4PCJFQHQ.mjs

@@ -0,0 +1,66 @@
+// src/agent-avatar/index.tsx
+import { cn } from "@axis-ds/ui-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var sizeStyles = {
+  sm: "w-6 h-6 text-xs",
+  md: "w-8 h-8 text-sm",
+  lg: "w-10 h-10 text-base",
+  xl: "w-12 h-12 text-lg"
+};
+var statusStyles = {
+  online: "bg-[var(--axis-color-green-500)]",
+  busy: "bg-[var(--axis-color-yellow-500)]",
+  offline: "bg-[var(--axis-color-gray-400)]"
+};
+var typeColors = {
+  assistant: "bg-[var(--axis-color-purple-500)]",
+  tool: "bg-[var(--axis-color-blue-500)]",
+  system: "bg-[var(--axis-color-gray-600)]"
+};
+function AgentAvatar({
+  name,
+  src,
+  size = "md",
+  status,
+  type = "assistant",
+  className
+}) {
+  const initials = name.split(" ").map((n) => n[0]).join("").slice(0, 2).toUpperCase();
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative inline-flex", className), children: [
+    src ? /* @__PURE__ */ jsx(
+      "img",
+      {
+        src,
+        alt: name,
+        className: cn(
+          "rounded-full object-cover",
+          sizeStyles[size]
+        )
+      }
+    ) : /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "rounded-full flex items-center justify-center font-medium text-white",
+          sizeStyles[size],
+          typeColors[type]
+        ),
+        children: initials
+      }
+    ),
+    status && /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(
+          "absolute bottom-0 right-0 rounded-full border-2 border-[var(--axis-surface-default)]",
+          size === "sm" ? "w-2 h-2" : "w-3 h-3",
+          statusStyles[status]
+        )
+      }
+    )
+  ] });
+}
+
+export {
+  AgentAvatar
+};

package/dist/chunk-657RY6MM.mjs

@@ -0,0 +1,106 @@
+import {
+  MESSAGE_ROLE_LABELS
+} from "./chunk-SCZ4BQ2G.mjs";
+
+// src/message-bubble/index.tsx
+import { cn } from "@axis-ds/ui-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var roleStyles = {
+  user: {
+    container: "flex-row-reverse",
+    bubble: "bg-[var(--axis-color-blue-500)] text-white rounded-br-sm"
+  },
+  assistant: {
+    container: "flex-row",
+    bubble: "bg-[var(--axis-surface-secondary)] text-[var(--axis-text-primary)] rounded-bl-sm"
+  },
+  system: {
+    container: "justify-center",
+    bubble: "bg-[var(--axis-surface-tertiary)] text-[var(--axis-text-secondary)] text-xs italic"
+  }
+};
+var statusIcons = {
+  sending: /* @__PURE__ */ jsxs("svg", { className: "w-3 h-3 animate-spin", viewBox: "0 0 24 24", fill: "none", children: [
+    /* @__PURE__ */ jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+    /* @__PURE__ */ jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" })
+  ] }),
+  sent: /* @__PURE__ */ jsx("svg", { className: "w-3 h-3", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }),
+  error: /* @__PURE__ */ jsx("svg", { className: "w-3 h-3", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4m0 4h.01" }) })
+};
+function MessageBubble({
+  role,
+  content,
+  timestamp,
+  avatar,
+  status,
+  actions,
+  metadata,
+  className
+}) {
+  const roleLabel = MESSAGE_ROLE_LABELS[role];
+  const renderAvatar = () => {
+    if (!avatar) return null;
+    if (typeof avatar === "string") {
+      return /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: avatar,
+          alt: "",
+          "aria-hidden": "true",
+          className: "w-8 h-8 rounded-full object-cover flex-shrink-0"
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx("div", { className: "flex-shrink-0", children: avatar });
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "article",
+      "aria-label": `${roleLabel} \uBA54\uC2DC\uC9C0`,
+      className: cn("flex items-start gap-2", roleStyles[role].container, className),
+      children: [
+        role !== "system" && renderAvatar(),
+        /* @__PURE__ */ jsxs("div", { className: cn("max-w-[80%]", role === "system" && "max-w-full"), children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "rounded-lg px-3 py-2",
+                roleStyles[role].bubble
+              ),
+              children: /* @__PURE__ */ jsx("div", { className: "text-sm whitespace-pre-wrap", children: content })
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mt-1 px-1", children: [
+            timestamp && /* @__PURE__ */ jsx(
+              "time",
+              {
+                dateTime: timestamp.toISOString(),
+                className: "text-xs text-[var(--axis-text-tertiary)]",
+                children: timestamp.toLocaleTimeString("ko-KR", { hour: "2-digit", minute: "2-digit" })
+              }
+            ),
+            metadata && /* @__PURE__ */ jsx("span", { className: "text-xs text-[var(--axis-text-tertiary)]", children: metadata }),
+            status && /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "text-[var(--axis-text-tertiary)]",
+                  status === "error" && "text-[var(--axis-text-error)]"
+                ),
+                "aria-label": status === "sending" ? "\uC804\uC1A1 \uC911" : status === "sent" ? "\uC804\uC1A1\uB428" : "\uC804\uC1A1 \uC2E4\uD328",
+                children: statusIcons[status]
+              }
+            )
+          ] }),
+          actions && /* @__PURE__ */ jsx("div", { className: "mt-1", children: actions })
+        ] })
+      ]
+    }
+  );
+}
+
+export {
+  MessageBubble
+};

package/dist/chunk-7UGSLEYG.mjs

@@ -0,0 +1,75 @@
+// src/recovery-banner/index.tsx
+import * as React from "react";
+import { cn } from "@axis-ds/ui-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function RecoveryBanner({
+  message,
+  description,
+  onRetry,
+  onDismiss,
+  className
+}) {
+  const titleId = React.useId();
+  const descId = React.useId();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex items-start gap-3 p-4 rounded-lg border",
+        "bg-[var(--axis-surface-error)] border-[var(--axis-color-red-200)]",
+        className
+      ),
+      role: "alert",
+      "aria-labelledby": titleId,
+      "aria-describedby": description ? descId : void 0,
+      children: [
+        /* @__PURE__ */ jsx(
+          "svg",
+          {
+            className: "w-5 h-5 text-[var(--axis-color-red-500)] flex-shrink-0 mt-0.5",
+            fill: "none",
+            stroke: "currentColor",
+            viewBox: "0 0 24 24",
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: 2,
+                d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsx("p", { id: titleId, className: "text-sm font-medium text-[var(--axis-text-error)]", children: message }),
+          description && /* @__PURE__ */ jsx("p", { id: descId, className: "mt-1 text-sm text-[var(--axis-text-secondary)]", children: description }),
+          /* @__PURE__ */ jsxs("div", { className: "flex gap-2 mt-3", children: [
+            onRetry && /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: onRetry,
+                "aria-describedby": descId,
+                className: "px-3 py-1.5 text-sm font-medium rounded-md bg-[var(--axis-color-red-500)] text-white hover:bg-[var(--axis-color-red-600)] transition-colors",
+                children: "\uC7AC\uC2DC\uB3C4"
+              }
+            ),
+            onDismiss && /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: onDismiss,
+                className: "px-3 py-1.5 text-sm font-medium rounded-md bg-transparent text-[var(--axis-text-primary)] hover:bg-[var(--axis-surface-secondary)] transition-colors",
+                children: "\uBB34\uC2DC"
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
+export {
+  RecoveryBanner
+};

package/dist/chunk-D6GHMPBC.mjs

@@ -0,0 +1,76 @@
+// src/approval-card/index.tsx
+import { cn } from "@axis-ds/ui-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var severityStyles = {
+  info: {
+    border: "border-l-[var(--axis-color-blue-500)]",
+    icon: "text-[var(--axis-color-blue-500)]",
+    bg: "bg-[var(--axis-surface-info)]"
+  },
+  warning: {
+    border: "border-l-[var(--axis-color-yellow-500)]",
+    icon: "text-[var(--axis-color-yellow-500)]",
+    bg: "bg-[var(--axis-surface-warning)]"
+  },
+  error: {
+    border: "border-l-[var(--axis-color-red-500)]",
+    icon: "text-[var(--axis-color-red-500)]",
+    bg: "bg-[var(--axis-surface-error)]"
+  }
+};
+var severityIcons = {
+  info: /* @__PURE__ */ jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
+  warning: /* @__PURE__ */ jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" }) }),
+  error: /* @__PURE__ */ jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) })
+};
+var actionVariantStyles = {
+  default: "bg-[var(--axis-button-bg-default)] text-white hover:bg-[var(--axis-button-bg-hover)]",
+  secondary: "bg-[var(--axis-button-secondary-bg-default)] text-[var(--axis-text-primary)] hover:bg-[var(--axis-button-secondary-bg-hover)]",
+  ghost: "bg-transparent text-[var(--axis-text-primary)] hover:bg-[var(--axis-surface-secondary)]",
+  destructive: "bg-[var(--axis-button-destructive-bg-default)] text-white hover:bg-[var(--axis-button-destructive-bg-hover)]"
+};
+function ApprovalCard({
+  title,
+  description,
+  severity = "info",
+  actions,
+  children,
+  className
+}) {
+  const styles = severityStyles[severity];
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "rounded-lg border border-l-4 p-4",
+        "bg-[var(--axis-surface-default)] border-[var(--axis-border-default)]",
+        styles.border,
+        className
+      ),
+      children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
+        /* @__PURE__ */ jsx("div", { className: cn("flex-shrink-0 mt-0.5", styles.icon), children: severityIcons[severity] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsx("h4", { className: "text-sm font-semibold text-[var(--axis-text-primary)]", children: title }),
+          description && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-[var(--axis-text-secondary)]", children: description }),
+          children && /* @__PURE__ */ jsx("div", { className: "mt-3", children }),
+          /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2 mt-4", children: actions.map((action, index) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: action.onClick,
+              className: cn(
+                "px-3 py-1.5 text-sm font-medium rounded-md transition-colors",
+                actionVariantStyles[action.variant || "default"]
+              ),
+              children: action.label
+            },
+            index
+          )) })
+        ] })
+      ] })
+    }
+  );
+}
+
+export {
+  ApprovalCard
+};

package/dist/chunk-DPENLPBM.mjs

@@ -0,0 +1,105 @@
+// src/tool-call-card/index.tsx
+import * as React from "react";
+import { cn } from "@axis-ds/ui-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var statusConfig = {
+  pending: {
+    color: "text-[var(--axis-color-gray-400)]",
+    icon: /* @__PURE__ */ jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10", strokeWidth: 2 }) })
+  },
+  running: {
+    color: "text-[var(--axis-color-blue-500)]",
+    icon: /* @__PURE__ */ jsxs("svg", { className: "w-4 h-4 animate-spin", viewBox: "0 0 24 24", fill: "none", children: [
+      /* @__PURE__ */ jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+      /* @__PURE__ */ jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" })
+    ] })
+  },
+  success: {
+    color: "text-[var(--axis-color-green-500)]",
+    icon: /* @__PURE__ */ jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) })
+  },
+  error: {
+    color: "text-[var(--axis-color-red-500)]",
+    icon: /* @__PURE__ */ jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+  }
+};
+function ToolCallCard({
+  toolName,
+  description,
+  status,
+  input,
+  output,
+  error,
+  duration,
+  defaultExpanded = false,
+  className
+}) {
+  const [isExpanded, setIsExpanded] = React.useState(defaultExpanded);
+  const config = statusConfig[status];
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "rounded-lg border overflow-hidden",
+        "bg-[var(--axis-surface-default)] border-[var(--axis-border-default)]",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => setIsExpanded(!isExpanded),
+            className: "w-full flex items-center justify-between p-3 hover:bg-[var(--axis-surface-secondary)] transition-colors",
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx("span", { className: config.color, children: config.icon }),
+                /* @__PURE__ */ jsx("code", { className: "text-sm font-mono text-[var(--axis-text-primary)]", children: toolName }),
+                description && /* @__PURE__ */ jsxs("span", { className: "text-xs text-[var(--axis-text-secondary)]", children: [
+                  "\u2014 ",
+                  description
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                duration !== void 0 && /* @__PURE__ */ jsxs("span", { className: "text-xs text-[var(--axis-text-tertiary)]", children: [
+                  duration,
+                  "ms"
+                ] }),
+                /* @__PURE__ */ jsx(
+                  "svg",
+                  {
+                    className: cn(
+                      "w-4 h-4 text-[var(--axis-text-secondary)] transition-transform",
+                      isExpanded && "rotate-180"
+                    ),
+                    fill: "none",
+                    stroke: "currentColor",
+                    viewBox: "0 0 24 24",
+                    children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" })
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        isExpanded && /* @__PURE__ */ jsxs("div", { className: "border-t border-[var(--axis-border-default)] p-3 space-y-3", children: [
+          input && /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("h5", { className: "text-xs font-medium text-[var(--axis-text-secondary)] mb-1", children: "\uC785\uB825" }),
+            /* @__PURE__ */ jsx("pre", { className: "text-xs p-2 rounded bg-[var(--axis-surface-secondary)] overflow-x-auto", children: /* @__PURE__ */ jsx("code", { className: "text-[var(--axis-text-primary)]", children: JSON.stringify(input, null, 2) }) })
+          ] }),
+          output !== void 0 && /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("h5", { className: "text-xs font-medium text-[var(--axis-text-secondary)] mb-1", children: "\uCD9C\uB825" }),
+            /* @__PURE__ */ jsx("pre", { className: "text-xs p-2 rounded bg-[var(--axis-surface-secondary)] overflow-x-auto", children: /* @__PURE__ */ jsx("code", { className: "text-[var(--axis-text-primary)]", children: typeof output === "string" ? output : JSON.stringify(output, null, 2) }) })
+          ] }),
+          error && /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("h5", { className: "text-xs font-medium text-[var(--axis-text-error)] mb-1", children: "\uC5D0\uB7EC" }),
+            /* @__PURE__ */ jsx("pre", { className: "text-xs p-2 rounded bg-[var(--axis-surface-error)] overflow-x-auto", children: /* @__PURE__ */ jsx("code", { className: "text-[var(--axis-text-error)]", children: error }) })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
+export {
+  ToolCallCard
+};