@axis-ds/agentic-ui 1.1.0

package/dist/token-usage-indicator/index.js

@@ -0,0 +1,110 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/token-usage-indicator/index.tsx
+var token_usage_indicator_exports = {};
+__export(token_usage_indicator_exports, {
+  TokenUsageIndicator: () => TokenUsageIndicator
+});
+module.exports = __toCommonJS(token_usage_indicator_exports);
+var import_ui_react = require("@axis-ds/ui-react");
+var import_jsx_runtime = 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_runtime.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_react.cn)("inline-flex items-center gap-1 text-xs", getTextColor(), className),
+        children: [
+          /* @__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: "M13 10V3L4 14h7v7l9-11h-7z" }) }),
+          formatNumber(current),
+          "/",
+          formatNumber(max),
+          cost !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "text-[var(--axis-text-tertiary)]", children: [
+            "($",
+            cost.toFixed(4),
+            ")"
+          ] })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.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_react.cn)("space-y-1", className),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between text-xs", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-[var(--axis-text-secondary)]", children: "\uD1A0\uD070 \uC0AC\uC6A9\uB7C9" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: getTextColor(), children: [
+            formatNumber(current),
+            " / ",
+            formatNumber(max)
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-1.5 rounded-full bg-[var(--axis-surface-secondary)] overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            className: (0, import_ui_react.cn)("h-full rounded-full transition-all", getColor()),
+            style: { width: `${percentage}%` },
+            "aria-hidden": "true"
+          }
+        ) }),
+        cost !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "text-xs text-[var(--axis-text-tertiary)] text-right", children: [
+          "$",
+          cost.toFixed(4)
+        ] })
+      ]
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  TokenUsageIndicator
+});

package/dist/token-usage-indicator/index.mjs

@@ -0,0 +1,6 @@
+import {
+  TokenUsageIndicator
+} from "../chunk-H6VXOP7U.mjs";
+export {
+  TokenUsageIndicator
+};

package/dist/tool-call-card/index.d.mts

@@ -0,0 +1,31 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type ToolStatus = "pending" | "running" | "success" | "error";
+interface ToolCallCardProps {
+    /** 도구 이름 */
+    toolName: string;
+    /** 도구 설명 */
+    description?: string;
+    /** 실행 상태 */
+    status: ToolStatus;
+    /** 입력 파라미터 */
+    input?: Record<string, unknown>;
+    /** 출력 결과 */
+    output?: unknown;
+    /** 에러 메시지 */
+    error?: string;
+    /** 실행 시간 (ms) */
+    duration?: number;
+    /** 펼침 상태 */
+    defaultExpanded?: boolean;
+    /** 접근성 레이블 */
+    "aria-label"?: string;
+    /** 추가 클래스 */
+    className?: string;
+}
+/**
+ * AI 도구 호출 정보를 표시하는 카드 컴포넌트
+ */
+declare function ToolCallCard({ toolName, description, status, input, output, error, duration, defaultExpanded, "aria-label": ariaLabel, className, }: ToolCallCardProps): react_jsx_runtime.JSX.Element;
+
+export { ToolCallCard, type ToolCallCardProps, type ToolStatus };

package/dist/tool-call-card/index.d.ts

@@ -0,0 +1,31 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type ToolStatus = "pending" | "running" | "success" | "error";
+interface ToolCallCardProps {
+    /** 도구 이름 */
+    toolName: string;
+    /** 도구 설명 */
+    description?: string;
+    /** 실행 상태 */
+    status: ToolStatus;
+    /** 입력 파라미터 */
+    input?: Record<string, unknown>;
+    /** 출력 결과 */
+    output?: unknown;
+    /** 에러 메시지 */
+    error?: string;
+    /** 실행 시간 (ms) */
+    duration?: number;
+    /** 펼침 상태 */
+    defaultExpanded?: boolean;
+    /** 접근성 레이블 */
+    "aria-label"?: string;
+    /** 추가 클래스 */
+    className?: string;
+}
+/**
+ * AI 도구 호출 정보를 표시하는 카드 컴포넌트
+ */
+declare function ToolCallCard({ toolName, description, status, input, output, error, duration, defaultExpanded, "aria-label": ariaLabel, className, }: ToolCallCardProps): react_jsx_runtime.JSX.Element;
+
+export { ToolCallCard, type ToolCallCardProps, type ToolStatus };

package/dist/tool-call-card/index.js

@@ -0,0 +1,158 @@
+"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/tool-call-card/index.tsx
+var tool_call_card_exports = {};
+__export(tool_call_card_exports, {
+  ToolCallCard: () => ToolCallCard
+});
+module.exports = __toCommonJS(tool_call_card_exports);
+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"
+};
+
+// src/tool-call-card/index.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var statusConfig = {
+  pending: {
+    color: "text-[var(--axis-color-gray-400)]",
+    icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "12", r: "10", strokeWidth: 2 }) })
+  },
+  running: {
+    color: "text-[var(--axis-color-blue-500)]",
+    icon: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { className: "w-4 h-4 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" })
+    ] })
+  },
+  success: {
+    color: "text-[var(--axis-color-green-500)]",
+    icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: "w-4 h-4", 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: {
+    color: "text-[var(--axis-color-red-500)]",
+    icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: "w-4 h-4", 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 ToolCallCard({
+  toolName,
+  description,
+  status,
+  input,
+  output,
+  error,
+  duration,
+  defaultExpanded = false,
+  "aria-label": ariaLabel,
+  className
+}) {
+  const [isExpanded, setIsExpanded] = React.useState(defaultExpanded);
+  const config = statusConfig[status];
+  const contentId = React.useId();
+  const statusLabel = STATUS_LABELS[status] || status;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      className: (0, import_ui_react.cn)(
+        "rounded-lg border overflow-hidden",
+        "bg-[var(--axis-surface-default)] border-[var(--axis-border-default)]",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.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_runtime.jsxs)("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: config.color, "aria-hidden": "true", children: config.icon }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("code", { className: "text-sm font-mono text-[var(--axis-text-primary)]", children: toolName }),
+                description && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "text-xs text-[var(--axis-text-secondary)]", children: [
+                  "\u2014 ",
+                  description
+                ] })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2", children: [
+                duration !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "text-xs text-[var(--axis-text-tertiary)]", children: [
+                  duration,
+                  "ms"
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "svg",
+                  {
+                    className: (0, import_ui_react.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_runtime.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" })
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        isExpanded && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { id: contentId, className: "border-t border-[var(--axis-border-default)] p-3 space-y-3", children: [
+          input && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h5", { className: "text-xs font-medium text-[var(--axis-text-secondary)] mb-1", children: "\uC785\uB825" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("pre", { className: "text-xs p-2 rounded bg-[var(--axis-surface-secondary)] overflow-x-auto", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("code", { className: "text-[var(--axis-text-primary)]", children: JSON.stringify(input, null, 2) }) })
+          ] }),
+          output !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h5", { className: "text-xs font-medium text-[var(--axis-text-secondary)] mb-1", children: "\uCD9C\uB825" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("pre", { className: "text-xs p-2 rounded bg-[var(--axis-surface-secondary)] overflow-x-auto", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("code", { className: "text-[var(--axis-text-primary)]", children: typeof output === "string" ? output : JSON.stringify(output, null, 2) }) })
+          ] }),
+          error && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h5", { className: "text-xs font-medium text-[var(--axis-text-error)] mb-1", children: "\uC5D0\uB7EC" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("pre", { className: "text-xs p-2 rounded bg-[var(--axis-surface-error)] overflow-x-auto", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("code", { className: "text-[var(--axis-text-error)]", children: error }) })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ToolCallCard
+});

package/dist/tool-call-card/index.mjs

@@ -0,0 +1,7 @@
+import {
+  ToolCallCard
+} from "../chunk-FAJF5RCY.mjs";
+import "../chunk-SCZ4BQ2G.mjs";
+export {
+  ToolCallCard
+};

package/package.json

@@ -0,0 +1,130 @@
+{
+  "name": "@axis-ds/agentic-ui",
+  "version": "1.1.0",
+  "description": "AXIS Design System - Agentic UI Components for AI/LLM Applications",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./run-progress": {
+      "types": "./dist/run-progress/index.d.ts",
+      "import": "./dist/run-progress/index.mjs",
+      "require": "./dist/run-progress/index.js"
+    },
+    "./approval-card": {
+      "types": "./dist/approval-card/index.d.ts",
+      "import": "./dist/approval-card/index.mjs",
+      "require": "./dist/approval-card/index.js"
+    },
+    "./streaming-text": {
+      "types": "./dist/streaming-text/index.d.ts",
+      "import": "./dist/streaming-text/index.mjs",
+      "require": "./dist/streaming-text/index.js"
+    },
+    "./tool-call-card": {
+      "types": "./dist/tool-call-card/index.d.ts",
+      "import": "./dist/tool-call-card/index.mjs",
+      "require": "./dist/tool-call-card/index.js"
+    },
+    "./message-bubble": {
+      "types": "./dist/message-bubble/index.d.ts",
+      "import": "./dist/message-bubble/index.mjs",
+      "require": "./dist/message-bubble/index.js"
+    },
+    "./feedback-buttons": {
+      "types": "./dist/feedback-buttons/index.d.ts",
+      "import": "./dist/feedback-buttons/index.mjs",
+      "require": "./dist/feedback-buttons/index.js"
+    },
+    "./code-block": {
+      "types": "./dist/code-block/index.d.ts",
+      "import": "./dist/code-block/index.mjs",
+      "require": "./dist/code-block/index.js"
+    },
+    "./diff-viewer": {
+      "types": "./dist/diff-viewer/index.d.ts",
+      "import": "./dist/diff-viewer/index.mjs",
+      "require": "./dist/diff-viewer/index.js"
+    },
+    "./plan-card": {
+      "types": "./dist/plan-card/index.d.ts",
+      "import": "./dist/plan-card/index.mjs",
+      "require": "./dist/plan-card/index.js"
+    },
+    "./context-panel": {
+      "types": "./dist/context-panel/index.d.ts",
+      "import": "./dist/context-panel/index.mjs",
+      "require": "./dist/context-panel/index.js"
+    },
+    "./token-usage-indicator": {
+      "types": "./dist/token-usage-indicator/index.d.ts",
+      "import": "./dist/token-usage-indicator/index.mjs",
+      "require": "./dist/token-usage-indicator/index.js"
+    },
+    "./attachment-card": {
+      "types": "./dist/attachment-card/index.d.ts",
+      "import": "./dist/attachment-card/index.mjs",
+      "require": "./dist/attachment-card/index.js"
+    }
+  },
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "dependencies": {
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.0",
+    "framer-motion": "^11.0.0",
+    "tailwind-merge": "^2.5.0",
+    "@axis-ds/tokens": "1.1.0",
+    "@axis-ds/ui-react": "1.1.0"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@types/react": "^18.2.0",
+    "@vitejs/plugin-react": "^5.1.2",
+    "jsdom": "^27.4.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.7.0",
+    "vitest": "^2.1.0"
+  },
+  "keywords": [
+    "react",
+    "agentic",
+    "ai",
+    "llm",
+    "components",
+    "design-system",
+    "axis"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/thoughtandaction/axis.git",
+    "directory": "packages/axis-agentic-ui"
+  },
+  "homepage": "https://axis.minu.best",
+  "scripts": {
+    "build": "tsup src/index.ts src/*/index.tsx --format cjs,esm --dts --external react",
+    "dev": "tsup src/index.ts --format cjs,esm --dts --watch --external react",
+    "clean": "rm -rf dist",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "type-check": "tsc --noEmit"
+  }
+}