@axis-ds/agentic-ui 1.1.0

package/dist/index.js

@@ -0,0 +1,1774 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  AgentAvatar: () => AgentAvatar,
+  ApprovalCard: () => ApprovalCard,
+  AttachmentCard: () => AttachmentCard,
+  CodeBlock: () => CodeBlock,
+  ContextPanel: () => ContextPanel,
+  DiffViewer: () => DiffViewer,
+  FeedbackButtons: () => FeedbackButtons,
+  MessageBubble: () => MessageBubble,
+  PlanCard: () => PlanCard,
+  RecoveryBanner: () => RecoveryBanner,
+  RunProgress: () => RunProgress,
+  SourcePanel: () => SourcePanel,
+  StepTimeline: () => StepTimeline,
+  StreamingText: () => StreamingText,
+  SurfaceRenderer: () => SurfaceRenderer,
+  ThinkingIndicator: () => ThinkingIndicator,
+  TokenUsageIndicator: () => TokenUsageIndicator,
+  ToolCallCard: () => ToolCallCard
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/run-progress/index.tsx
+var React = __toESM(require("react"));
+var import_ui_react = require("@axis-ds/ui-react");
+
+// src/constants/a11y-labels.ts
+var STATUS_LABELS = {
+  pending: "\uB300\uAE30 \uC911",
+  running: "\uC2E4\uD589 \uC911",
+  complete: "\uC644\uB8CC",
+  success: "\uC131\uACF5",
+  error: "\uC624\uB958",
+  skipped: "\uAC74\uB108\uB700",
+  idle: "\uB300\uAE30 \uC911"
+};
+var SEVERITY_LABELS = {
+  info: "\uC815\uBCF4",
+  warning: "\uC8FC\uC758",
+  error: "\uC624\uB958"
+};
+var AGENT_STATUS_LABELS = {
+  online: "\uC628\uB77C\uC778",
+  busy: "\uC0AC\uC6A9 \uC911",
+  offline: "\uC624\uD504\uB77C\uC778"
+};
+var SOURCE_TYPE_LABELS = {
+  web: "\uC6F9 \uD398\uC774\uC9C0",
+  file: "\uD30C\uC77C",
+  database: "\uB370\uC774\uD130\uBCA0\uC774\uC2A4",
+  api: "API"
+};
+var MESSAGE_ROLE_LABELS = {
+  user: "\uC0AC\uC6A9\uC790",
+  assistant: "\uC5B4\uC2DC\uC2A4\uD134\uD2B8",
+  system: "\uC2DC\uC2A4\uD15C"
+};
+var FEEDBACK_LABELS = {
+  like: "\uC88B\uC544\uC694",
+  dislike: "\uC2EB\uC5B4\uC694",
+  none: "\uD53C\uB4DC\uBC31 \uC5C6\uC74C"
+};
+var ATTACHMENT_TYPE_LABELS = {
+  image: "\uC774\uBBF8\uC9C0",
+  document: "\uBB38\uC11C",
+  code: "\uCF54\uB4DC",
+  archive: "\uC555\uCD95 \uD30C\uC77C",
+  other: "\uAE30\uD0C0 \uD30C\uC77C"
+};
+var DIFF_LABELS = {
+  added: "\uCD94\uAC00\uB428",
+  removed: "\uC0AD\uC81C\uB428",
+  unchanged: "\uBCC0\uACBD \uC5C6\uC74C"
+};
+var PLAN_STATUS_LABELS = {
+  draft: "\uCD08\uC548",
+  pending: "\uC2B9\uC778 \uB300\uAE30",
+  approved: "\uC2B9\uC778\uB428",
+  rejected: "\uAC70\uC808\uB428",
+  executing: "\uC2E4\uD589 \uC911",
+  completed: "\uC644\uB8CC"
+};
+
+// src/run-progress/index.tsx
+var import_jsx_runtime = require("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__ */ (0, import_jsx_runtime.jsxs)("svg", { className: "w-3 h-3 animate-spin", viewBox: "0 0 24 24", fill: "none", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" })
+  ] }),
+  complete: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: "w-3 h-3", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }),
+  error: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: "w-3 h-3", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      className: (0, import_ui_react.cn)(
+        "rounded-lg border p-4",
+        "bg-[var(--axis-surface-default)] border-[var(--axis-border-default)]",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between mb-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2", children: [
+            status === "running" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "w-2 h-2 rounded-full bg-[var(--axis-color-blue-500)] animate-pulse" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsxs)("span", { className: "text-xs text-[var(--axis-text-secondary)]", children: [
+            progressPercent,
+            "%"
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(
+              "div",
+              {
+                className: "h-full rounded-full bg-[var(--axis-color-blue-500)] transition-all duration-300",
+                style: { width: `${progressPercent}%` }
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { role: "list", "aria-label": "\uC2E4\uD589 \uB2E8\uACC4", className: "space-y-2", children: steps.map((step, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "div",
+          {
+            role: "listitem",
+            "aria-current": currentStep === index ? "step" : void 0,
+            className: (0, import_ui_react.cn)(
+              "flex items-center gap-3 p-2 rounded-md transition-colors",
+              currentStep === index && "bg-[var(--axis-surface-secondary)]"
+            ),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "div",
+                {
+                  className: (0, import_ui_react.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__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex-1 min-w-0", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "sr-only", children: [
+                  STATUS_LABELS[step.status],
+                  ":"
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-sm font-medium text-[var(--axis-text-primary)] truncate", children: step.label }),
+                step.description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-xs text-[var(--axis-text-secondary)] truncate", children: step.description })
+              ] })
+            ]
+          },
+          step.id
+        )) }),
+        (onCancel || onRetry) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex justify-end gap-2 mt-4 pt-4 border-t border-[var(--axis-border-default)]", children: [
+          status === "running" && onCancel && /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+
+// src/step-timeline/index.tsx
+var import_ui_react2 = require("@axis-ds/ui-react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function StepTimeline({
+  steps,
+  orientation = "vertical",
+  className
+}) {
+  const isVertical = orientation === "vertical";
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    {
+      role: "list",
+      "aria-label": "\uC791\uC5C5 \uD0C0\uC784\uB77C\uC778",
+      className: (0, import_ui_react2.cn)(
+        isVertical ? "flex flex-col gap-4" : "flex items-center gap-2",
+        className
+      ),
+      children: steps.map((step, index) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+        "div",
+        {
+          role: "listitem",
+          "aria-current": step.status === "running" ? "step" : void 0,
+          className: (0, import_ui_react2.cn)(
+            "relative flex",
+            isVertical ? "items-start gap-3" : "flex-col items-center"
+          ),
+          children: [
+            index < steps.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              "div",
+              {
+                "aria-hidden": "true",
+                className: (0, import_ui_react2.cn)(
+                  "absolute bg-[var(--axis-border-default)]",
+                  isVertical ? "left-2.5 top-6 w-0.5 h-full -translate-x-1/2" : "top-2.5 left-6 h-0.5 w-full"
+                )
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              "div",
+              {
+                "aria-hidden": "true",
+                className: (0, import_ui_react2.cn)(
+                  "relative z-10 w-5 h-5 rounded-full flex items-center justify-center",
+                  step.status === "complete" && "bg-[var(--axis-color-green-500)]",
+                  step.status === "running" && "bg-[var(--axis-color-blue-500)] animate-pulse",
+                  step.status === "error" && "bg-[var(--axis-color-red-500)]",
+                  step.status === "skipped" && "bg-[var(--axis-color-gray-300)]",
+                  step.status === "pending" && "bg-[var(--axis-color-gray-300)]"
+                ),
+                children: step.status === "complete" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { className: "w-3 h-3 text-white", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 3, d: "M5 13l4 4L19 7" }) })
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: (0, import_ui_react2.cn)(isVertical ? "flex-1" : "text-center mt-2"), children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "sr-only", children: [
+                STATUS_LABELS[step.status],
+                ":"
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-sm font-medium text-[var(--axis-text-primary)]", children: step.label }),
+              step.description && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-xs text-[var(--axis-text-secondary)]", children: step.description }),
+              step.timestamp && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-xs text-[var(--axis-text-tertiary)]", children: step.timestamp.toLocaleTimeString() })
+            ] })
+          ]
+        },
+        step.id
+      ))
+    }
+  );
+}
+
+// src/thinking-indicator/index.tsx
+var import_ui_react3 = require("@axis-ds/ui-react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var sizeStyles = {
+  sm: "text-xs gap-1",
+  md: "text-sm gap-1.5",
+  lg: "text-base gap-2"
+};
+var dotSizes = {
+  sm: "w-1 h-1",
+  md: "w-1.5 h-1.5",
+  lg: "w-2 h-2"
+};
+function ThinkingIndicator({
+  text = "\uC0DD\uAC01 \uC911",
+  size = "md",
+  className
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "div",
+    {
+      role: "status",
+      "aria-live": "polite",
+      "aria-label": text,
+      className: (0, import_ui_react3.cn)(
+        "flex items-center text-[var(--axis-text-secondary)]",
+        sizeStyles[size],
+        className
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: text }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "flex gap-0.5", "aria-hidden": "true", children: [0, 1, 2].map((i) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "div",
+          {
+            className: (0, import_ui_react3.cn)(
+              "rounded-full bg-current animate-bounce",
+              dotSizes[size]
+            ),
+            style: { animationDelay: `${i * 150}ms` }
+          },
+          i
+        )) })
+      ]
+    }
+  );
+}
+
+// src/approval-card/index.tsx
+var React2 = __toESM(require("react"));
+var import_ui_react4 = require("@axis-ds/ui-react");
+var import_jsx_runtime4 = require("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__ */ (0, import_jsx_runtime4.jsx)("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime4.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__ */ (0, import_jsx_runtime4.jsx)("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime4.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__ */ (0, import_jsx_runtime4.jsx)("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime4.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({
+  id,
+  title,
+  description,
+  severity = "info",
+  actions,
+  children,
+  className
+}) {
+  const styles = severityStyles[severity];
+  const generatedId = React2.useId();
+  const baseId = id || generatedId;
+  const titleId = `${baseId}-title`;
+  const descId = `${baseId}-desc`;
+  const severityLabel = SEVERITY_LABELS[severity];
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "div",
+    {
+      role: "region",
+      "aria-labelledby": titleId,
+      "aria-describedby": description ? descId : void 0,
+      className: (0, import_ui_react4.cn)(
+        "rounded-lg border border-l-4 p-4",
+        "bg-[var(--axis-surface-default)] border-[var(--axis-border-default)]",
+        styles.border,
+        className
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-start gap-3", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: (0, import_ui_react4.cn)("flex-shrink-0 mt-0.5", styles.icon), "aria-hidden": "true", children: severityIcons[severity] }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "sr-only", children: [
+            severityLabel,
+            " \uC54C\uB9BC:"
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h4", { id: titleId, className: "text-sm font-semibold text-[var(--axis-text-primary)]", children: title }),
+          description && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { id: descId, className: "mt-1 text-sm text-[var(--axis-text-secondary)]", children: description }),
+          children && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "mt-3", children }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex flex-wrap gap-2 mt-4", children: actions.map((action, index) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "button",
+            {
+              onClick: action.onClick,
+              className: (0, import_ui_react4.cn)(
+                "px-3 py-1.5 text-sm font-medium rounded-md transition-colors",
+                actionVariantStyles[action.variant || "default"]
+              ),
+              children: action.label
+            },
+            index
+          )) })
+        ] })
+      ] })
+    }
+  );
+}
+
+// src/source-panel/index.tsx
+var React3 = __toESM(require("react"));
+var import_ui_react5 = require("@axis-ds/ui-react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var sourceIcons = {
+  web: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" }) }),
+  file: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" }) }),
+  database: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4" }) }),
+  api: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" }) })
+};
+function SourcePanel({
+  sources,
+  expandable = true,
+  defaultExpanded = false,
+  maxItems = 5,
+  className
+}) {
+  const [isExpanded, setIsExpanded] = React3.useState(defaultExpanded);
+  const displayedSources = isExpanded ? sources : sources.slice(0, maxItems);
+  const hasMore = sources.length > maxItems;
+  const listId = React3.useId();
+  if (sources.length === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    "div",
+    {
+      className: (0, import_ui_react5.cn)(
+        "rounded-lg border p-3",
+        "bg-[var(--axis-surface-secondary)] border-[var(--axis-border-default)]",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("h4", { className: "text-xs font-medium text-[var(--axis-text-secondary)] mb-2", children: [
+          "\uCD9C\uCC98 (",
+          sources.length,
+          "\uAC1C)"
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { id: listId, role: "list", "aria-label": "\uCD9C\uCC98 \uBAA9\uB85D", className: "space-y-2", children: displayedSources.map((source) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+          "div",
+          {
+            role: "listitem",
+            className: "flex items-start gap-2 p-2 rounded-md bg-[var(--axis-surface-default)]",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-[var(--axis-icon-secondary)] mt-0.5", "aria-hidden": "true", children: sourceIcons[source.type] }),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex-1 min-w-0", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "sr-only", children: [
+                  SOURCE_TYPE_LABELS[source.type],
+                  ":"
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-sm font-medium text-[var(--axis-text-primary)] truncate", children: source.url ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+                  "a",
+                  {
+                    href: source.url,
+                    target: "_blank",
+                    rel: "noopener noreferrer",
+                    className: "hover:underline",
+                    "aria-label": `${source.title} (\uC0C8 \uCC3D\uC5D0\uC11C \uC5F4\uB9BC)`,
+                    children: [
+                      source.title,
+                      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "sr-only", children: ", \uC0C8 \uCC3D\uC5D0\uC11C \uC5F4\uB9BC" })
+                    ]
+                  }
+                ) : source.title }),
+                source.snippet && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-xs text-[var(--axis-text-secondary)] line-clamp-2 mt-0.5", children: source.snippet }),
+                source.path && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("code", { className: "text-xs text-[var(--axis-text-tertiary)]", children: source.path })
+              ] }),
+              source.relevance !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "text-xs text-[var(--axis-text-tertiary)]", children: [
+                Math.round(source.relevance * 100),
+                "%"
+              ] })
+            ]
+          },
+          source.id
+        )) }),
+        expandable && hasMore && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "button",
+          {
+            onClick: () => setIsExpanded(!isExpanded),
+            "aria-expanded": isExpanded,
+            "aria-controls": listId,
+            className: "mt-2 text-xs text-[var(--axis-text-brand)] hover:underline",
+            children: isExpanded ? "\uC811\uAE30" : `${sources.length - maxItems}\uAC1C \uB354 \uBCF4\uAE30`
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/streaming-text/index.tsx
+var React4 = __toESM(require("react"));
+var import_ui_react6 = require("@axis-ds/ui-react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function StreamingText({
+  text,
+  speed = 20,
+  isComplete = false,
+  showCursor = true,
+  onComplete,
+  "aria-live": ariaLive,
+  "aria-label": ariaLabel,
+  className
+}) {
+  const [displayedText, setDisplayedText] = React4.useState("");
+  const [isStreaming, setIsStreaming] = React4.useState(false);
+  const prevTextRef = React4.useRef("");
+  React4.useEffect(() => {
+    if (isComplete) {
+      setDisplayedText(text);
+      setIsStreaming(false);
+      return;
+    }
+    if (text.length > prevTextRef.current.length && text.startsWith(prevTextRef.current)) {
+      const newText = text.slice(prevTextRef.current.length);
+      let charIndex = 0;
+      setIsStreaming(true);
+      const interval = setInterval(() => {
+        if (charIndex < newText.length) {
+          setDisplayedText((prev) => prev + newText[charIndex]);
+          charIndex++;
+        } else {
+          clearInterval(interval);
+          setIsStreaming(false);
+          if (onComplete) onComplete();
+        }
+      }, speed);
+      prevTextRef.current = text;
+      return () => clearInterval(interval);
+    } else if (text !== prevTextRef.current) {
+      setDisplayedText("");
+      prevTextRef.current = "";
+    }
+  }, [text, speed, isComplete, onComplete]);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    "div",
+    {
+      role: "region",
+      "aria-label": ariaLabel || "AI \uC751\uB2F5",
+      "aria-live": ariaLive ?? "polite",
+      "aria-busy": isStreaming,
+      className: (0, import_ui_react6.cn)("relative", className),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-[var(--axis-text-primary)] whitespace-pre-wrap", children: displayedText }),
+        showCursor && isStreaming && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "inline-block w-0.5 h-4 ml-0.5 bg-[var(--axis-text-primary)] animate-pulse", "aria-hidden": "true" })
+      ]
+    }
+  );
+}
+
+// src/tool-call-card/index.tsx
+var React5 = __toESM(require("react"));
+var import_ui_react7 = require("@axis-ds/ui-react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var statusConfig = {
+  pending: {
+    color: "text-[var(--axis-color-gray-400)]",
+    icon: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("circle", { cx: "12", cy: "12", r: "10", strokeWidth: 2 }) })
+  },
+  running: {
+    color: "text-[var(--axis-color-blue-500)]",
+    icon: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("svg", { className: "w-4 h-4 animate-spin", viewBox: "0 0 24 24", fill: "none", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.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__ */ (0, import_jsx_runtime7.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) })
+  },
+  error: {
+    color: "text-[var(--axis-color-red-500)]",
+    icon: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime7.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,
+  "aria-label": ariaLabel,
+  className
+}) {
+  const [isExpanded, setIsExpanded] = React5.useState(defaultExpanded);
+  const config = statusConfig[status];
+  const contentId = React5.useId();
+  const statusLabel = STATUS_LABELS[status] || status;
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    "div",
+    {
+      className: (0, import_ui_react7.cn)(
+        "rounded-lg border overflow-hidden",
+        "bg-[var(--axis-surface-default)] border-[var(--axis-border-default)]",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+          "button",
+          {
+            onClick: () => setIsExpanded(!isExpanded),
+            "aria-expanded": isExpanded,
+            "aria-controls": contentId,
+            "aria-label": ariaLabel || `${toolName} - ${statusLabel}`,
+            className: "w-full flex items-center justify-between p-3 hover:bg-[var(--axis-surface-secondary)] transition-colors",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: config.color, "aria-hidden": "true", children: config.icon }),
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("code", { className: "text-sm font-mono text-[var(--axis-text-primary)]", children: toolName }),
+                description && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "text-xs text-[var(--axis-text-secondary)]", children: [
+                  "\u2014 ",
+                  description
+                ] })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center gap-2", children: [
+                duration !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "text-xs text-[var(--axis-text-tertiary)]", children: [
+                  duration,
+                  "ms"
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                  "svg",
+                  {
+                    className: (0, import_ui_react7.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__ */ (0, import_jsx_runtime7.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" })
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        isExpanded && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { id: contentId, className: "border-t border-[var(--axis-border-default)] p-3 space-y-3", children: [
+          input && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h5", { className: "text-xs font-medium text-[var(--axis-text-secondary)] mb-1", children: "\uC785\uB825" }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("pre", { className: "text-xs p-2 rounded bg-[var(--axis-surface-secondary)] overflow-x-auto", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("code", { className: "text-[var(--axis-text-primary)]", children: JSON.stringify(input, null, 2) }) })
+          ] }),
+          output !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h5", { className: "text-xs font-medium text-[var(--axis-text-secondary)] mb-1", children: "\uCD9C\uB825" }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("pre", { className: "text-xs p-2 rounded bg-[var(--axis-surface-secondary)] overflow-x-auto", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("code", { className: "text-[var(--axis-text-primary)]", children: typeof output === "string" ? output : JSON.stringify(output, null, 2) }) })
+          ] }),
+          error && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h5", { className: "text-xs font-medium text-[var(--axis-text-error)] mb-1", children: "\uC5D0\uB7EC" }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("pre", { className: "text-xs p-2 rounded bg-[var(--axis-surface-error)] overflow-x-auto", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("code", { className: "text-[var(--axis-text-error)]", children: error }) })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/surface-renderer/index.tsx
+var import_ui_react8 = require("@axis-ds/ui-react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function SurfaceRenderer({
+  surface,
+  renderCustom,
+  className
+}) {
+  const renderContent = () => {
+    switch (surface.type) {
+      case "text":
+        return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "prose prose-sm max-w-none text-[var(--axis-text-primary)]", children: String(surface.content) });
+      case "code":
+        return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("pre", { className: "p-3 rounded-md bg-[var(--axis-surface-secondary)] overflow-x-auto", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("code", { className: "text-sm font-mono text-[var(--axis-text-primary)]", children: String(surface.content) }) });
+      case "table":
+        const tableData = surface.content;
+        return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "overflow-x-auto", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("table", { role: "table", className: "w-full text-sm", children: [
+          surface.title && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("caption", { className: "sr-only", children: surface.title }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("tr", { className: "border-b border-[var(--axis-border-default)]", children: tableData.headers.map((header, i) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            "th",
+            {
+              scope: "col",
+              className: "px-3 py-2 text-left font-medium text-[var(--axis-text-secondary)]",
+              children: header
+            },
+            i
+          )) }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("tbody", { children: tableData.rows.map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            "tr",
+            {
+              className: "border-b border-[var(--axis-border-default)] last:border-0",
+              children: row.map((cell, j) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                "td",
+                {
+                  className: "px-3 py-2 text-[var(--axis-text-primary)]",
+                  children: cell
+                },
+                j
+              ))
+            },
+            i
+          )) })
+        ] }) });
+      case "chart":
+        return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "p-4 text-center text-[var(--axis-text-secondary)]", children: [
+          "[\uCC28\uD2B8: ",
+          surface.title || "\uB370\uC774\uD130 \uC2DC\uAC01\uD654",
+          "]"
+        ] });
+      case "form":
+        return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "p-4 text-center text-[var(--axis-text-secondary)]", children: [
+          "[\uD3FC: ",
+          surface.title || "\uC785\uB825 \uC591\uC2DD",
+          "]"
+        ] });
+      case "custom":
+        if (renderCustom) {
+          return renderCustom(surface);
+        }
+        return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "p-4 text-center text-[var(--axis-text-secondary)]", children: "[\uCEE4\uC2A4\uD140 Surface]" });
+      default:
+        return null;
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    "div",
+    {
+      className: (0, import_ui_react8.cn)(
+        "rounded-lg border p-4",
+        "bg-[var(--axis-surface-default)] border-[var(--axis-border-default)]",
+        className
+      ),
+      children: [
+        surface.title && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h4", { className: "text-sm font-medium text-[var(--axis-text-primary)] mb-3", children: surface.title }),
+        renderContent()
+      ]
+    }
+  );
+}
+
+// src/recovery-banner/index.tsx
+var React6 = __toESM(require("react"));
+var import_ui_react9 = require("@axis-ds/ui-react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function RecoveryBanner({
+  message,
+  description,
+  onRetry,
+  onDismiss,
+  className
+}) {
+  const titleId = React6.useId();
+  const descId = React6.useId();
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+    "div",
+    {
+      className: (0, import_ui_react9.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__ */ (0, import_jsx_runtime9.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__ */ (0, import_jsx_runtime9.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__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { id: titleId, className: "text-sm font-medium text-[var(--axis-text-error)]", children: message }),
+          description && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { id: descId, className: "mt-1 text-sm text-[var(--axis-text-secondary)]", children: description }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex gap-2 mt-3", children: [
+            onRetry && /* @__PURE__ */ (0, import_jsx_runtime9.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__ */ (0, import_jsx_runtime9.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"
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/agent-avatar/index.tsx
+var import_ui_react10 = require("@axis-ds/ui-react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var sizeStyles2 = {
+  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__ */ (0, import_jsx_runtime10.jsxs)(
+    "div",
+    {
+      role: "img",
+      "aria-label": ariaLabel,
+      className: (0, import_ui_react10.cn)("relative inline-flex", className),
+      children: [
+        src ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          "img",
+          {
+            src,
+            alt: "",
+            "aria-hidden": "true",
+            className: (0, import_ui_react10.cn)(
+              "rounded-full object-cover",
+              sizeStyles2[size]
+            )
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          "div",
+          {
+            "aria-hidden": "true",
+            className: (0, import_ui_react10.cn)(
+              "rounded-full flex items-center justify-center font-medium text-white",
+              sizeStyles2[size],
+              typeColors[type]
+            ),
+            children: initials
+          }
+        ),
+        status && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: (0, import_ui_react10.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]
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/message-bubble/index.tsx
+var import_ui_react11 = require("@axis-ds/ui-react");
+var import_jsx_runtime11 = require("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 statusIcons2 = {
+  sending: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("svg", { className: "w-3 h-3 animate-spin", viewBox: "0 0 24 24", fill: "none", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" })
+  ] }),
+  sent: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("svg", { className: "w-3 h-3", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }),
+  error: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("svg", { className: "w-3 h-3", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime11.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__ */ (0, import_jsx_runtime11.jsx)(
+        "img",
+        {
+          src: avatar,
+          alt: "",
+          "aria-hidden": "true",
+          className: "w-8 h-8 rounded-full object-cover flex-shrink-0"
+        }
+      );
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "flex-shrink-0", children: avatar });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+    "div",
+    {
+      role: "article",
+      "aria-label": `${roleLabel} \uBA54\uC2DC\uC9C0`,
+      className: (0, import_ui_react11.cn)("flex items-start gap-2", roleStyles[role].container, className),
+      children: [
+        role !== "system" && renderAvatar(),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: (0, import_ui_react11.cn)("max-w-[80%]", role === "system" && "max-w-full"), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            "div",
+            {
+              className: (0, import_ui_react11.cn)(
+                "rounded-lg px-3 py-2",
+                roleStyles[role].bubble
+              ),
+              children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "text-sm whitespace-pre-wrap", children: content })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center gap-2 mt-1 px-1", children: [
+            timestamp && /* @__PURE__ */ (0, import_jsx_runtime11.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__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-xs text-[var(--axis-text-tertiary)]", children: metadata }),
+            status && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              "span",
+              {
+                className: (0, import_ui_react11.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: statusIcons2[status]
+              }
+            )
+          ] }),
+          actions && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "mt-1", children: actions })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/feedback-buttons/index.tsx
+var React7 = __toESM(require("react"));
+var import_ui_react12 = require("@axis-ds/ui-react");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var sizeStyles3 = {
+  sm: "p-1",
+  md: "p-1.5"
+};
+var iconSizes = {
+  sm: "w-3.5 h-3.5",
+  md: "w-4 h-4"
+};
+function FeedbackButtons({
+  messageId,
+  initialFeedback = "none",
+  onFeedback,
+  size = "sm",
+  className
+}) {
+  const [feedback, setFeedback] = React7.useState(initialFeedback);
+  const handleFeedback = (type) => {
+    const newFeedback = feedback === type ? "none" : type;
+    setFeedback(newFeedback);
+    onFeedback?.(messageId, newFeedback);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+    "div",
+    {
+      role: "group",
+      "aria-label": "\uBA54\uC2DC\uC9C0 \uD53C\uB4DC\uBC31",
+      className: (0, import_ui_react12.cn)("inline-flex items-center gap-1", className),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          "button",
+          {
+            onClick: () => handleFeedback("like"),
+            "aria-pressed": feedback === "like",
+            "aria-label": FEEDBACK_LABELS.like,
+            className: (0, import_ui_react12.cn)(
+              "rounded-md transition-colors",
+              sizeStyles3[size],
+              feedback === "like" ? "text-[var(--axis-color-green-500)] bg-[var(--axis-color-green-500)]/10" : "text-[var(--axis-text-tertiary)] hover:text-[var(--axis-text-secondary)] hover:bg-[var(--axis-surface-secondary)]"
+            ),
+            children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("svg", { className: iconSizes[size], fill: feedback === "like" ? "currentColor" : "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M14 9V5a3 3 0 00-3-3l-4 9v11h11.28a2 2 0 002-1.7l1.38-9a2 2 0 00-2-2.3H14zm-9 11H3a2 2 0 01-2-2v-7a2 2 0 012-2h2" }) })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          "button",
+          {
+            onClick: () => handleFeedback("dislike"),
+            "aria-pressed": feedback === "dislike",
+            "aria-label": FEEDBACK_LABELS.dislike,
+            className: (0, import_ui_react12.cn)(
+              "rounded-md transition-colors",
+              sizeStyles3[size],
+              feedback === "dislike" ? "text-[var(--axis-color-red-500)] bg-[var(--axis-color-red-500)]/10" : "text-[var(--axis-text-tertiary)] hover:text-[var(--axis-text-secondary)] hover:bg-[var(--axis-surface-secondary)]"
+            ),
+            children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("svg", { className: iconSizes[size], fill: feedback === "dislike" ? "currentColor" : "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M10 15V19a3 3 0 003 3l4-9V2H5.72a2 2 0 00-2 1.7l-1.38 9a2 2 0 002 2.3H10zm9-13h2a2 2 0 012 2v7a2 2 0 01-2 2h-2" }) })
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/code-block/index.tsx
+var React8 = __toESM(require("react"));
+var import_ui_react13 = require("@axis-ds/ui-react");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function CodeBlock({
+  code,
+  language,
+  filename,
+  showLineNumbers = false,
+  onCopy,
+  maxHeight,
+  className
+}) {
+  const [copied, setCopied] = React8.useState(false);
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(code);
+      setCopied(true);
+      onCopy?.(code);
+      setTimeout(() => setCopied(false), 2e3);
+    } catch {
+    }
+  };
+  const lines = code.split("\n");
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+    "div",
+    {
+      className: (0, import_ui_react13.cn)(
+        "rounded-lg border overflow-hidden",
+        "bg-[var(--axis-surface-default)] border-[var(--axis-border-default)]",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center justify-between px-3 py-2 border-b border-[var(--axis-border-default)] bg-[var(--axis-surface-secondary)]", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center gap-2 min-w-0", children: [
+            filename && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("code", { className: "text-xs font-mono text-[var(--axis-text-primary)] truncate", children: filename }),
+            language && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "text-xs px-1.5 py-0.5 rounded bg-[var(--axis-surface-tertiary)] text-[var(--axis-text-tertiary)]", children: language })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            "button",
+            {
+              onClick: handleCopy,
+              "aria-label": copied ? "\uBCF5\uC0AC\uB428" : "\uCF54\uB4DC \uBCF5\uC0AC",
+              className: "flex items-center gap-1 px-2 py-1 text-xs rounded-md text-[var(--axis-text-secondary)] hover:bg-[var(--axis-surface-tertiary)] transition-colors",
+              children: copied ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("svg", { className: "w-3.5 h-3.5 text-[var(--axis-color-green-500)]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: "\uBCF5\uC0AC\uB428" })
+              ] }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("svg", { className: "w-3.5 h-3.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: "\uBCF5\uC0AC" })
+              ] })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          "div",
+          {
+            className: "overflow-auto",
+            style: maxHeight ? { maxHeight } : void 0,
+            children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("pre", { className: "p-3 text-sm leading-relaxed", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("code", { className: "text-[var(--axis-text-primary)] font-mono", children: showLineNumbers ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("table", { className: "border-collapse w-full", role: "presentation", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("tbody", { children: lines.map((line, i) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("tr", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                "td",
+                {
+                  className: "select-none text-right pr-4 text-[var(--axis-text-tertiary)] w-8",
+                  "aria-hidden": "true",
+                  children: i + 1
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("td", { className: "whitespace-pre", children: line })
+            ] }, i)) }) }) : code }) })
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/diff-viewer/index.tsx
+var React9 = __toESM(require("react"));
+var import_ui_react14 = require("@axis-ds/ui-react");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+function computeDiff(before, after) {
+  const oldLines = before.split("\n");
+  const newLines = after.split("\n");
+  const m = oldLines.length;
+  const n = newLines.length;
+  const dp = Array.from({ length: m + 1 }, () => Array(n + 1).fill(0));
+  for (let i2 = 1; i2 <= m; i2++) {
+    for (let j2 = 1; j2 <= n; j2++) {
+      if (oldLines[i2 - 1] === newLines[j2 - 1]) {
+        dp[i2][j2] = dp[i2 - 1][j2 - 1] + 1;
+      } else {
+        dp[i2][j2] = Math.max(dp[i2 - 1][j2], dp[i2][j2 - 1]);
+      }
+    }
+  }
+  const result = [];
+  let i = m;
+  let j = n;
+  while (i > 0 || j > 0) {
+    if (i > 0 && j > 0 && oldLines[i - 1] === newLines[j - 1]) {
+      result.unshift({ type: "unchanged", content: oldLines[i - 1], oldLineNumber: i, newLineNumber: j });
+      i--;
+      j--;
+    } else if (j > 0 && (i === 0 || dp[i][j - 1] >= dp[i - 1][j])) {
+      result.unshift({ type: "added", content: newLines[j - 1], newLineNumber: j });
+      j--;
+    } else if (i > 0) {
+      result.unshift({ type: "removed", content: oldLines[i - 1], oldLineNumber: i });
+      i--;
+    }
+  }
+  return result;
+}
+var lineTypeStyles = {
+  added: "bg-[var(--axis-color-green-500)]/10",
+  removed: "bg-[var(--axis-color-red-500)]/10",
+  unchanged: ""
+};
+var lineTypeTextStyles = {
+  added: "text-[var(--axis-color-green-600)]",
+  removed: "text-[var(--axis-color-red-600)]",
+  unchanged: "text-[var(--axis-text-primary)]"
+};
+var lineTypeSymbols = {
+  added: "+",
+  removed: "-",
+  unchanged: " "
+};
+function DiffViewer({
+  before,
+  after,
+  filename,
+  viewMode = "unified",
+  className
+}) {
+  const [mode, setMode] = React9.useState(viewMode);
+  const diffLines = React9.useMemo(() => computeDiff(before, after), [before, after]);
+  const addedCount = diffLines.filter((l) => l.type === "added").length;
+  const removedCount = diffLines.filter((l) => l.type === "removed").length;
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+    "div",
+    {
+      role: "region",
+      "aria-label": filename ? `${filename} \uBCC0\uACBD\uC0AC\uD56D` : "\uCF54\uB4DC \uBCC0\uACBD\uC0AC\uD56D",
+      className: (0, import_ui_react14.cn)(
+        "rounded-lg border overflow-hidden",
+        "bg-[var(--axis-surface-default)] border-[var(--axis-border-default)]",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-center justify-between px-3 py-2 border-b border-[var(--axis-border-default)] bg-[var(--axis-surface-secondary)]", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-center gap-2 min-w-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("svg", { className: "w-4 h-4 text-[var(--axis-icon-secondary)]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 12h16M4 18h7" }) }),
+            filename && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("code", { className: "text-xs font-mono text-[var(--axis-text-primary)] truncate", children: filename }),
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: "text-xs text-[var(--axis-color-green-500)]", "aria-label": `${addedCount}\uC904 ${DIFF_LABELS.added}`, children: [
+              "+",
+              addedCount
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: "text-xs text-[var(--axis-color-red-500)]", "aria-label": `${removedCount}\uC904 ${DIFF_LABELS.removed}`, children: [
+              "-",
+              removedCount
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-center gap-1 bg-[var(--axis-surface-tertiary)] rounded-md p-0.5", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              "button",
+              {
+                onClick: () => setMode("unified"),
+                "aria-pressed": mode === "unified",
+                className: (0, import_ui_react14.cn)(
+                  "px-2 py-0.5 text-xs rounded transition-colors",
+                  mode === "unified" ? "bg-[var(--axis-surface-default)] text-[var(--axis-text-primary)] shadow-sm" : "text-[var(--axis-text-tertiary)] hover:text-[var(--axis-text-secondary)]"
+                ),
+                children: "\uD1B5\uD569"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              "button",
+              {
+                onClick: () => setMode("split"),
+                "aria-pressed": mode === "split",
+                className: (0, import_ui_react14.cn)(
+                  "px-2 py-0.5 text-xs rounded transition-colors",
+                  mode === "split" ? "bg-[var(--axis-surface-default)] text-[var(--axis-text-primary)] shadow-sm" : "text-[var(--axis-text-tertiary)] hover:text-[var(--axis-text-secondary)]"
+                ),
+                children: "\uBD84\uD560"
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "overflow-auto", children: mode === "unified" ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(UnifiedView, { lines: diffLines }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SplitView, { lines: diffLines }) })
+      ]
+    }
+  );
+}
+function UnifiedView({ lines }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("table", { className: "w-full text-xs font-mono border-collapse", role: "presentation", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("tbody", { children: lines.map((line, i) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("tr", { className: lineTypeStyles[line.type], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("td", { className: "select-none text-right px-2 py-0.5 text-[var(--axis-text-tertiary)] w-10 border-r border-[var(--axis-border-default)]", children: line.oldLineNumber ?? "" }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("td", { className: "select-none text-right px-2 py-0.5 text-[var(--axis-text-tertiary)] w-10 border-r border-[var(--axis-border-default)]", children: line.newLineNumber ?? "" }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("td", { className: (0, import_ui_react14.cn)("select-none w-4 text-center py-0.5", lineTypeTextStyles[line.type]), children: lineTypeSymbols[line.type] }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("td", { className: (0, import_ui_react14.cn)("px-2 py-0.5 whitespace-pre", lineTypeTextStyles[line.type]), children: line.content })
+  ] }, i)) }) });
+}
+function SplitView({ lines }) {
+  const leftLines = [];
+  const rightLines = [];
+  for (const line of lines) {
+    if (line.type === "unchanged") {
+      leftLines.push(line);
+      rightLines.push(line);
+    } else if (line.type === "removed") {
+      leftLines.push(line);
+      rightLines.push(null);
+    } else {
+      leftLines.push(null);
+      rightLines.push(line);
+    }
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("table", { className: "w-full text-xs font-mono border-collapse", role: "presentation", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("tbody", { children: leftLines.map((leftLine, i) => {
+    const rightLine = rightLines[i];
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("tr", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("td", { className: (0, import_ui_react14.cn)("select-none text-right px-2 py-0.5 text-[var(--axis-text-tertiary)] w-10 border-r border-[var(--axis-border-default)]", leftLine ? lineTypeStyles[leftLine.type] : ""), children: leftLine?.oldLineNumber ?? "" }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("td", { className: (0, import_ui_react14.cn)("select-none w-4 text-center py-0.5", leftLine ? lineTypeTextStyles[leftLine.type] : ""), children: leftLine ? lineTypeSymbols[leftLine.type] : "" }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("td", { className: (0, import_ui_react14.cn)("px-2 py-0.5 whitespace-pre w-1/2 border-r border-[var(--axis-border-default)]", leftLine ? (0, import_ui_react14.cn)(lineTypeStyles[leftLine.type], lineTypeTextStyles[leftLine.type]) : ""), children: leftLine?.content ?? "" }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("td", { className: (0, import_ui_react14.cn)("select-none text-right px-2 py-0.5 text-[var(--axis-text-tertiary)] w-10 border-r border-[var(--axis-border-default)]", rightLine ? lineTypeStyles[rightLine.type] : ""), children: rightLine?.newLineNumber ?? "" }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("td", { className: (0, import_ui_react14.cn)("select-none w-4 text-center py-0.5", rightLine ? lineTypeTextStyles[rightLine.type] : ""), children: rightLine ? lineTypeSymbols[rightLine.type] : "" }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("td", { className: (0, import_ui_react14.cn)("px-2 py-0.5 whitespace-pre w-1/2", rightLine ? (0, import_ui_react14.cn)(lineTypeStyles[rightLine.type], lineTypeTextStyles[rightLine.type]) : ""), children: rightLine?.content ?? "" })
+    ] }, i);
+  }) }) });
+}
+
+// src/plan-card/index.tsx
+var React10 = __toESM(require("react"));
+var import_ui_react15 = require("@axis-ds/ui-react");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var planStatusStyles = {
+  draft: {
+    border: "border-l-[var(--axis-color-gray-400)]",
+    badge: "bg-[var(--axis-color-gray-100)] text-[var(--axis-color-gray-600)]"
+  },
+  pending: {
+    border: "border-l-[var(--axis-color-yellow-500)]",
+    badge: "bg-[var(--axis-color-yellow-500)]/10 text-[var(--axis-color-yellow-600)]"
+  },
+  approved: {
+    border: "border-l-[var(--axis-color-green-500)]",
+    badge: "bg-[var(--axis-color-green-500)]/10 text-[var(--axis-color-green-600)]"
+  },
+  rejected: {
+    border: "border-l-[var(--axis-color-red-500)]",
+    badge: "bg-[var(--axis-color-red-500)]/10 text-[var(--axis-color-red-600)]"
+  },
+  executing: {
+    border: "border-l-[var(--axis-color-blue-500)]",
+    badge: "bg-[var(--axis-color-blue-500)]/10 text-[var(--axis-color-blue-600)]"
+  },
+  completed: {
+    border: "border-l-[var(--axis-color-green-500)]",
+    badge: "bg-[var(--axis-color-green-500)]/10 text-[var(--axis-color-green-600)]"
+  }
+};
+var stepStatusIcons = {
+  pending: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("svg", { className: "w-4 h-4 text-[var(--axis-color-gray-400)]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("circle", { cx: "12", cy: "12", r: "10", strokeWidth: 2 }) }),
+  running: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("svg", { className: "w-4 h-4 text-[var(--axis-color-blue-500)] animate-spin", viewBox: "0 0 24 24", fill: "none", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" })
+  ] }),
+  complete: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("svg", { className: "w-4 h-4 text-[var(--axis-color-green-500)]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }),
+  error: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("svg", { className: "w-4 h-4 text-[var(--axis-color-red-500)]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }),
+  skipped: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("svg", { className: "w-4 h-4 text-[var(--axis-color-gray-400)]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13 5l7 7-7 7M5 5l7 7-7 7" }) })
+};
+function PlanCard({
+  title,
+  steps,
+  status = "pending",
+  onApprove,
+  onEdit,
+  onReject,
+  className
+}) {
+  const styles = planStatusStyles[status];
+  const titleId = React10.useId();
+  const statusLabel = PLAN_STATUS_LABELS[status];
+  const completedCount = steps.filter((s) => s.status === "complete").length;
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+    "div",
+    {
+      role: "region",
+      "aria-labelledby": titleId,
+      className: (0, import_ui_react15.cn)(
+        "rounded-lg border border-l-4 overflow-hidden",
+        "bg-[var(--axis-surface-default)] border-[var(--axis-border-default)]",
+        styles.border,
+        className
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "p-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center justify-between mb-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("svg", { className: "w-4 h-4 text-[var(--axis-icon-secondary)]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("h4", { id: titleId, className: "text-sm font-semibold text-[var(--axis-text-primary)]", children: title })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: (0, import_ui_react15.cn)("text-xs px-2 py-0.5 rounded-full font-medium", styles.badge), children: statusLabel })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center gap-2 text-xs text-[var(--axis-text-tertiary)]", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { children: [
+              completedCount,
+              "/",
+              steps.length,
+              " \uB2E8\uACC4"
+            ] }),
+            steps.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "flex-1 h-1 rounded-full bg-[var(--axis-surface-secondary)] overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+              "div",
+              {
+                className: "h-full rounded-full bg-[var(--axis-color-green-500)] transition-all",
+                style: { width: `${completedCount / steps.length * 100}%` },
+                "aria-hidden": "true"
+              }
+            ) })
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { role: "list", "aria-label": "\uC2E4\uD589 \uB2E8\uACC4", className: "border-t border-[var(--axis-border-default)] divide-y divide-[var(--axis-border-default)]", children: steps.map((step) => {
+          const stepStatusLabel = STATUS_LABELS[step.status] || step.status;
+          return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+            "div",
+            {
+              role: "listitem",
+              "aria-current": step.status === "running" ? "step" : void 0,
+              className: "flex items-start gap-3 px-4 py-2.5",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { "aria-hidden": "true", className: "mt-0.5 flex-shrink-0", children: stepStatusIcons[step.status] }),
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex-1 min-w-0", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: "sr-only", children: [
+                    stepStatusLabel,
+                    ":"
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "text-sm text-[var(--axis-text-primary)]", children: step.label }),
+                  step.description && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "text-xs text-[var(--axis-text-secondary)] mt-0.5", children: step.description })
+                ] })
+              ]
+            },
+            step.id
+          );
+        }) }),
+        (status === "pending" || status === "draft") && (onApprove || onEdit || onReject) && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex gap-2 p-3 border-t border-[var(--axis-border-default)] bg-[var(--axis-surface-secondary)]", children: [
+          onApprove && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+            "button",
+            {
+              onClick: onApprove,
+              className: "px-3 py-1.5 text-xs font-medium rounded-md bg-[var(--axis-color-green-500)] text-white hover:bg-[var(--axis-color-green-600)] transition-colors",
+              children: "\uC2B9\uC778"
+            }
+          ),
+          onEdit && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+            "button",
+            {
+              onClick: onEdit,
+              className: "px-3 py-1.5 text-xs font-medium rounded-md bg-[var(--axis-button-secondary-bg-default)] text-[var(--axis-text-primary)] hover:bg-[var(--axis-button-secondary-bg-hover)] transition-colors",
+              children: "\uC218\uC815"
+            }
+          ),
+          onReject && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+            "button",
+            {
+              onClick: onReject,
+              className: "px-3 py-1.5 text-xs font-medium rounded-md text-[var(--axis-color-red-500)] hover:bg-[var(--axis-color-red-500)]/10 transition-colors",
+              children: "\uAC70\uC808"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+
+// src/context-panel/index.tsx
+var React11 = __toESM(require("react"));
+var import_ui_react16 = require("@axis-ds/ui-react");
+var import_jsx_runtime16 = require("react/jsx-runtime");
+function ContextPanel({
+  modelInfo,
+  systemPrompt,
+  attachedFiles,
+  settings,
+  collapsible = true,
+  defaultExpanded = false,
+  className
+}) {
+  const [isExpanded, setIsExpanded] = React11.useState(defaultExpanded);
+  const contentId = React11.useId();
+  const hasContent = modelInfo || systemPrompt || attachedFiles && attachedFiles.length > 0 || settings && Object.keys(settings).length > 0;
+  if (!hasContent) return null;
+  const header = /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("svg", { className: "w-4 h-4 text-[var(--axis-icon-secondary)]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-xs font-medium text-[var(--axis-text-secondary)]", children: "\uCEE8\uD14D\uC2A4\uD2B8" })
+  ] });
+  const content = /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { id: contentId, className: "space-y-3 mt-2", children: [
+    modelInfo && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("h5", { className: "text-xs font-medium text-[var(--axis-text-secondary)] mb-1", children: "\uBAA8\uB378" }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("code", { className: "text-sm font-mono text-[var(--axis-text-primary)]", children: modelInfo.name }),
+        modelInfo.provider && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-xs text-[var(--axis-text-tertiary)]", children: modelInfo.provider }),
+        modelInfo.version && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-xs px-1.5 py-0.5 rounded bg-[var(--axis-surface-tertiary)] text-[var(--axis-text-tertiary)]", children: modelInfo.version })
+      ] })
+    ] }),
+    systemPrompt && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("h5", { className: "text-xs font-medium text-[var(--axis-text-secondary)] mb-1", children: "\uC2DC\uC2A4\uD15C \uD504\uB86C\uD504\uD2B8" }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "text-xs text-[var(--axis-text-primary)] p-2 rounded bg-[var(--axis-surface-secondary)] line-clamp-3 whitespace-pre-wrap", children: systemPrompt })
+    ] }),
+    attachedFiles && attachedFiles.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("h5", { className: "text-xs font-medium text-[var(--axis-text-secondary)] mb-1", children: [
+        "\uCCA8\uBD80 \uD30C\uC77C (",
+        attachedFiles.length,
+        ")"
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "space-y-1", children: attachedFiles.map((file, i) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex items-center gap-1.5 text-xs text-[var(--axis-text-primary)]", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("svg", { className: "w-3 h-3 text-[var(--axis-icon-secondary)]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "truncate", children: file })
+      ] }, i)) })
+    ] }),
+    settings && Object.keys(settings).length > 0 && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("h5", { className: "text-xs font-medium text-[var(--axis-text-secondary)] mb-1", children: "\uC124\uC815" }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "space-y-1", children: Object.entries(settings).map(([key, value]) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex items-center justify-between text-xs", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-[var(--axis-text-secondary)]", children: key }),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("code", { className: "font-mono text-[var(--axis-text-primary)]", children: value })
+      ] }, key)) })
+    ] })
+  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    "div",
+    {
+      className: (0, import_ui_react16.cn)(
+        "rounded-lg border p-3",
+        "bg-[var(--axis-surface-secondary)] border-[var(--axis-border-default)]",
+        className
+      ),
+      children: collapsible ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+          "button",
+          {
+            onClick: () => setIsExpanded(!isExpanded),
+            "aria-expanded": isExpanded,
+            "aria-controls": contentId,
+            className: "w-full flex items-center justify-between hover:opacity-80 transition-opacity",
+            children: [
+              header,
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                "svg",
+                {
+                  className: (0, import_ui_react16.cn)(
+                    "w-4 h-4 text-[var(--axis-text-secondary)] transition-transform",
+                    isExpanded && "rotate-180"
+                  ),
+                  fill: "none",
+                  stroke: "currentColor",
+                  viewBox: "0 0 24 24",
+                  "aria-hidden": "true",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" })
+                }
+              )
+            ]
+          }
+        ),
+        isExpanded && content
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
+        header,
+        content
+      ] })
+    }
+  );
+}
+
+// src/token-usage-indicator/index.tsx
+var import_ui_react17 = require("@axis-ds/ui-react");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+function TokenUsageIndicator({
+  current,
+  max,
+  cost,
+  warningThreshold = 0.8,
+  compact = false,
+  className
+}) {
+  const ratio = max > 0 ? current / max : 0;
+  const percentage = Math.min(Math.round(ratio * 100), 100);
+  const getColor = () => {
+    if (ratio >= 1) return "bg-[var(--axis-color-red-500)]";
+    if (ratio >= warningThreshold) return "bg-[var(--axis-color-yellow-500)]";
+    return "bg-[var(--axis-color-green-500)]";
+  };
+  const getTextColor = () => {
+    if (ratio >= 1) return "text-[var(--axis-color-red-500)]";
+    if (ratio >= warningThreshold) return "text-[var(--axis-color-yellow-500)]";
+    return "text-[var(--axis-text-secondary)]";
+  };
+  const formatNumber = (n) => n >= 1e3 ? `${(n / 1e3).toFixed(1)}k` : String(n);
+  if (compact) {
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+      "span",
+      {
+        role: "meter",
+        "aria-valuenow": current,
+        "aria-valuemin": 0,
+        "aria-valuemax": max,
+        "aria-label": `\uD1A0\uD070 \uC0AC\uC6A9\uB7C9: ${current} / ${max}`,
+        className: (0, import_ui_react17.cn)("inline-flex items-center gap-1 text-xs", getTextColor(), className),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("svg", { className: "w-3 h-3", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13 10V3L4 14h7v7l9-11h-7z" }) }),
+          formatNumber(current),
+          "/",
+          formatNumber(max),
+          cost !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: "text-[var(--axis-text-tertiary)]", children: [
+            "($",
+            cost.toFixed(4),
+            ")"
+          ] })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+    "div",
+    {
+      role: "meter",
+      "aria-valuenow": current,
+      "aria-valuemin": 0,
+      "aria-valuemax": max,
+      "aria-label": `\uD1A0\uD070 \uC0AC\uC6A9\uB7C9: ${current} / ${max} (${percentage}%)`,
+      className: (0, import_ui_react17.cn)("space-y-1", className),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex items-center justify-between text-xs", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "text-[var(--axis-text-secondary)]", children: "\uD1A0\uD070 \uC0AC\uC6A9\uB7C9" }),
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: getTextColor(), children: [
+            formatNumber(current),
+            " / ",
+            formatNumber(max)
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "h-1.5 rounded-full bg-[var(--axis-surface-secondary)] overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          "div",
+          {
+            className: (0, import_ui_react17.cn)("h-full rounded-full transition-all", getColor()),
+            style: { width: `${percentage}%` },
+            "aria-hidden": "true"
+          }
+        ) }),
+        cost !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "text-xs text-[var(--axis-text-tertiary)] text-right", children: [
+          "$",
+          cost.toFixed(4)
+        ] })
+      ]
+    }
+  );
+}
+
+// src/attachment-card/index.tsx
+var import_ui_react18 = require("@axis-ds/ui-react");
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var typeIcons = {
+  image: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" }) }),
+  document: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" }) }),
+  code: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" }) }),
+  archive: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4" }) }),
+  other: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" }) })
+};
+var formatFileSize = (bytes) => {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+};
+function AttachmentCard({
+  type,
+  name,
+  size,
+  url,
+  thumbnail,
+  status = "complete",
+  progress,
+  onRemove,
+  className
+}) {
+  const typeLabel = ATTACHMENT_TYPE_LABELS[type];
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+    "div",
+    {
+      role: "article",
+      "aria-label": `${typeLabel}: ${name}`,
+      className: (0, import_ui_react18.cn)(
+        "flex items-center gap-3 rounded-lg border p-3",
+        "bg-[var(--axis-surface-default)] border-[var(--axis-border-default)]",
+        status === "error" && "border-[var(--axis-color-red-500)]/30",
+        className
+      ),
+      children: [
+        thumbnail ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          "img",
+          {
+            src: thumbnail,
+            alt: "",
+            "aria-hidden": "true",
+            className: "w-10 h-10 rounded object-cover flex-shrink-0"
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          "div",
+          {
+            className: "w-10 h-10 rounded flex items-center justify-center flex-shrink-0 bg-[var(--axis-surface-secondary)] text-[var(--axis-icon-secondary)]",
+            "aria-hidden": "true",
+            children: typeIcons[type]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "text-sm font-medium text-[var(--axis-text-primary)] truncate", children: url ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+            "a",
+            {
+              href: url,
+              target: "_blank",
+              rel: "noopener noreferrer",
+              className: "hover:underline",
+              "aria-label": `${name} (\uC0C8 \uCC3D\uC5D0\uC11C \uC5F4\uB9BC)`,
+              children: name
+            }
+          ) : name }),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex items-center gap-2 text-xs text-[var(--axis-text-tertiary)]", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { children: typeLabel }),
+            size !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { "aria-hidden": "true", children: "\xB7" }),
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { children: formatFileSize(size) })
+            ] }),
+            status === "error" && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "text-[var(--axis-text-error)]", children: "\uC5C5\uB85C\uB4DC \uC2E4\uD328" })
+          ] }),
+          status === "uploading" && progress !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "mt-1.5 h-1 rounded-full bg-[var(--axis-surface-secondary)] overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+            "div",
+            {
+              className: "h-full rounded-full bg-[var(--axis-color-blue-500)] transition-all",
+              style: { width: `${progress}%` },
+              role: "progressbar",
+              "aria-valuenow": progress,
+              "aria-valuemin": 0,
+              "aria-valuemax": 100,
+              "aria-label": "\uC5C5\uB85C\uB4DC \uC9C4\uD589\uB960"
+            }
+          ) })
+        ] }),
+        onRemove && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          "button",
+          {
+            onClick: onRemove,
+            "aria-label": `${name} \uC0AD\uC81C`,
+            className: "flex-shrink-0 p-1 rounded-md text-[var(--axis-text-tertiary)] hover:text-[var(--axis-text-secondary)] hover:bg-[var(--axis-surface-secondary)] transition-colors",
+            children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+          }
+        )
+      ]
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AgentAvatar,
+  ApprovalCard,
+  AttachmentCard,
+  CodeBlock,
+  ContextPanel,
+  DiffViewer,
+  FeedbackButtons,
+  MessageBubble,
+  PlanCard,
+  RecoveryBanner,
+  RunProgress,
+  SourcePanel,
+  StepTimeline,
+  StreamingText,
+  SurfaceRenderer,
+  ThinkingIndicator,
+  TokenUsageIndicator,
+  ToolCallCard
+});