@axis-ds/agentic-ui 1.4.0 → 1.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (62) hide show
  1. package/README.md +42 -1
  2. package/dist/agent-avatar/index.js +6 -16
  3. package/dist/agent-avatar/index.mjs +75 -4
  4. package/dist/approval-card/index.js +6 -16
  5. package/dist/approval-card/index.mjs +86 -4
  6. package/dist/attachment-card/index.js +5 -17
  7. package/dist/attachment-card/index.mjs +101 -4
  8. package/dist/code-block/index.js +2 -3
  9. package/dist/code-block/index.mjs +76 -3
  10. package/dist/constants/a11y-labels.d.mts +86 -0
  11. package/dist/constants/a11y-labels.d.ts +86 -0
  12. package/dist/constants/a11y-labels.js +105 -0
  13. package/dist/{chunk-SCZ4BQ2G.mjs → constants/a11y-labels.mjs} +21 -17
  14. package/dist/context-panel/index.js +2 -3
  15. package/dist/context-panel/index.mjs +99 -3
  16. package/dist/diff-viewer/index.js +8 -17
  17. package/dist/diff-viewer/index.mjs +155 -4
  18. package/dist/feedback-buttons/index.js +7 -16
  19. package/dist/feedback-buttons/index.mjs +65 -4
  20. package/dist/index.js +36 -1732
  21. package/dist/index.mjs +18 -55
  22. package/dist/message-bubble/index.js +5 -15
  23. package/dist/message-bubble/index.mjs +98 -4
  24. package/dist/plan-card/index.js +6 -28
  25. package/dist/plan-card/index.mjs +143 -4
  26. package/dist/recovery-banner/index.js +1 -3
  27. package/dist/recovery-banner/index.mjs +70 -3
  28. package/dist/run-progress/index.js +5 -19
  29. package/dist/run-progress/index.mjs +128 -4
  30. package/dist/source-panel/index.js +5 -15
  31. package/dist/source-panel/index.mjs +88 -4
  32. package/dist/step-timeline/index.js +3 -17
  33. package/dist/step-timeline/index.mjs +69 -4
  34. package/dist/streaming-text/index.js +2 -3
  35. package/dist/streaming-text/index.mjs +59 -3
  36. package/dist/surface-renderer/index.js +1 -3
  37. package/dist/surface-renderer/index.mjs +79 -3
  38. package/dist/thinking-indicator/index.js +3 -5
  39. package/dist/thinking-indicator/index.mjs +45 -3
  40. package/dist/token-usage-indicator/index.js +1 -3
  41. package/dist/token-usage-indicator/index.mjs +81 -3
  42. package/dist/tool-call-card/index.js +5 -18
  43. package/dist/tool-call-card/index.mjs +108 -4
  44. package/package.json +35 -5
  45. package/dist/chunk-42KEAZ2Y.mjs +0 -109
  46. package/dist/chunk-4CMUEGLK.mjs +0 -80
  47. package/dist/chunk-4V4BWBRC.mjs +0 -77
  48. package/dist/chunk-7HTVJ6MK.mjs +0 -94
  49. package/dist/chunk-DPLGRVNQ.mjs +0 -95
  50. package/dist/chunk-FYAMA32G.mjs +0 -50
  51. package/dist/chunk-GQYOOLDL.mjs +0 -63
  52. package/dist/chunk-IOF4OET6.mjs +0 -162
  53. package/dist/chunk-J4FIMXXG.mjs +0 -106
  54. package/dist/chunk-JY7MTMMB.mjs +0 -83
  55. package/dist/chunk-KJVPVBET.mjs +0 -103
  56. package/dist/chunk-OYQX3SL4.mjs +0 -152
  57. package/dist/chunk-QS6GQNSE.mjs +0 -86
  58. package/dist/chunk-R4CMHIRO.mjs +0 -72
  59. package/dist/chunk-SCXUEQLI.mjs +0 -136
  60. package/dist/chunk-UDL4M5RP.mjs +0 -75
  61. package/dist/chunk-WFYQINWD.mjs +0 -115
  62. package/dist/chunk-ZW4Z27AB.mjs +0 -84
package/dist/index.js CHANGED
@@ -1,9 +1,7 @@
1
1
  "use strict";
2
- var __create = Object.create;
3
2
  var __defProp = Object.defineProperty;
4
3
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
4
  var __getOwnPropNames = Object.getOwnPropertyNames;
6
- var __getProtoOf = Object.getPrototypeOf;
7
5
  var __hasOwnProp = Object.prototype.hasOwnProperty;
8
6
  var __export = (target, all) => {
9
7
  for (var name in all)
@@ -17,1741 +15,47 @@ var __copyProps = (to, from, except, desc) => {
17
15
  }
18
16
  return to;
19
17
  };
20
- var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
21
- // If the importer is in node compatibility mode or this is not an ESM
22
- // file that has been converted to a CommonJS file using a Babel-
23
- // compatible transform (i.e. "__esModule" has not been set), then set
24
- // "default" to the CommonJS "module.exports" for node compatibility.
25
- isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
26
- mod
27
- ));
28
18
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
29
-
30
- // src/index.ts
31
19
  var index_exports = {};
32
20
  __export(index_exports, {
33
- AgentAvatar: () => AgentAvatar,
34
- ApprovalCard: () => ApprovalCard,
35
- AttachmentCard: () => AttachmentCard,
36
- CodeBlock: () => CodeBlock,
37
- ContextPanel: () => ContextPanel,
38
- DiffViewer: () => DiffViewer,
39
- FeedbackButtons: () => FeedbackButtons,
40
- MessageBubble: () => MessageBubble,
41
- PlanCard: () => PlanCard,
42
- RecoveryBanner: () => RecoveryBanner,
43
- RunProgress: () => RunProgress,
44
- SourcePanel: () => SourcePanel,
45
- StepTimeline: () => StepTimeline,
46
- StreamingText: () => StreamingText,
47
- SurfaceRenderer: () => SurfaceRenderer,
48
- ThinkingIndicator: () => ThinkingIndicator,
49
- TokenUsageIndicator: () => TokenUsageIndicator,
50
- ToolCallCard: () => ToolCallCard
21
+ AgentAvatar: () => import_agent_avatar.AgentAvatar,
22
+ ApprovalCard: () => import_approval_card.ApprovalCard,
23
+ AttachmentCard: () => import_attachment_card.AttachmentCard,
24
+ CodeBlock: () => import_code_block.CodeBlock,
25
+ ContextPanel: () => import_context_panel.ContextPanel,
26
+ DiffViewer: () => import_diff_viewer.DiffViewer,
27
+ FeedbackButtons: () => import_feedback_buttons.FeedbackButtons,
28
+ MessageBubble: () => import_message_bubble.MessageBubble,
29
+ PlanCard: () => import_plan_card.PlanCard,
30
+ RecoveryBanner: () => import_recovery_banner.RecoveryBanner,
31
+ RunProgress: () => import_run_progress.RunProgress,
32
+ SourcePanel: () => import_source_panel.SourcePanel,
33
+ StepTimeline: () => import_step_timeline.StepTimeline,
34
+ StreamingText: () => import_streaming_text.StreamingText,
35
+ SurfaceRenderer: () => import_surface_renderer.SurfaceRenderer,
36
+ ThinkingIndicator: () => import_thinking_indicator.ThinkingIndicator,
37
+ TokenUsageIndicator: () => import_token_usage_indicator.TokenUsageIndicator,
38
+ ToolCallCard: () => import_tool_call_card.ToolCallCard
51
39
  });
52
40
  module.exports = __toCommonJS(index_exports);
53
-
54
- // src/run-progress/index.tsx
55
- var React = __toESM(require("react"));
56
- var import_ui_react = require("@axis-ds/ui-react");
57
-
58
- // src/constants/a11y-labels.ts
59
- var STATUS_LABELS = {
60
- pending: "\uB300\uAE30 \uC911",
61
- running: "\uC2E4\uD589 \uC911",
62
- complete: "\uC644\uB8CC",
63
- success: "\uC131\uACF5",
64
- error: "\uC624\uB958",
65
- skipped: "\uAC74\uB108\uB700",
66
- idle: "\uB300\uAE30 \uC911"
67
- };
68
- var SEVERITY_LABELS = {
69
- info: "\uC815\uBCF4",
70
- warning: "\uC8FC\uC758",
71
- error: "\uC624\uB958"
72
- };
73
- var AGENT_STATUS_LABELS = {
74
- online: "\uC628\uB77C\uC778",
75
- busy: "\uC0AC\uC6A9 \uC911",
76
- offline: "\uC624\uD504\uB77C\uC778"
77
- };
78
- var SOURCE_TYPE_LABELS = {
79
- web: "\uC6F9 \uD398\uC774\uC9C0",
80
- file: "\uD30C\uC77C",
81
- database: "\uB370\uC774\uD130\uBCA0\uC774\uC2A4",
82
- api: "API"
83
- };
84
- var MESSAGE_ROLE_LABELS = {
85
- user: "\uC0AC\uC6A9\uC790",
86
- assistant: "\uC5B4\uC2DC\uC2A4\uD134\uD2B8",
87
- system: "\uC2DC\uC2A4\uD15C"
88
- };
89
- var FEEDBACK_LABELS = {
90
- like: "\uC88B\uC544\uC694",
91
- dislike: "\uC2EB\uC5B4\uC694",
92
- none: "\uD53C\uB4DC\uBC31 \uC5C6\uC74C"
93
- };
94
- var ATTACHMENT_TYPE_LABELS = {
95
- image: "\uC774\uBBF8\uC9C0",
96
- document: "\uBB38\uC11C",
97
- code: "\uCF54\uB4DC",
98
- archive: "\uC555\uCD95 \uD30C\uC77C",
99
- other: "\uAE30\uD0C0 \uD30C\uC77C"
100
- };
101
- var DIFF_LABELS = {
102
- added: "\uCD94\uAC00\uB428",
103
- removed: "\uC0AD\uC81C\uB428",
104
- unchanged: "\uBCC0\uACBD \uC5C6\uC74C"
105
- };
106
- var PLAN_STATUS_LABELS = {
107
- draft: "\uCD08\uC548",
108
- pending: "\uC2B9\uC778 \uB300\uAE30",
109
- approved: "\uC2B9\uC778\uB428",
110
- rejected: "\uAC70\uC808\uB428",
111
- executing: "\uC2E4\uD589 \uC911",
112
- completed: "\uC644\uB8CC"
113
- };
114
-
115
- // src/run-progress/index.tsx
116
- var import_jsx_runtime = require("react/jsx-runtime");
117
- var statusColors = {
118
- pending: "bg-[var(--axis-status-neutral-muted)] text-[var(--axis-status-neutral-muted-contrast)]",
119
- running: "bg-[var(--axis-status-running)] text-[var(--axis-status-running-contrast)] animate-pulse",
120
- complete: "bg-[var(--axis-status-success)] text-[var(--axis-status-success-contrast)]",
121
- error: "bg-[var(--axis-status-error)] text-[var(--axis-status-error-contrast)]"
122
- };
123
- var statusIcons = {
124
- pending: null,
125
- running: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { className: "w-3 h-3 animate-spin", viewBox: "0 0 24 24", fill: "none", children: [
126
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
127
- /* @__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" })
128
- ] }),
129
- 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" }) }),
130
- 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" }) })
131
- };
132
- function RunProgress({
133
- status,
134
- steps,
135
- currentStep,
136
- onCancel,
137
- onRetry,
138
- className
139
- }) {
140
- const progressPercent = React.useMemo(() => {
141
- const completed = steps.filter((s) => s.status === "complete").length;
142
- return Math.round(completed / steps.length * 100);
143
- }, [steps]);
144
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
145
- "div",
146
- {
147
- className: (0, import_ui_react.cn)(
148
- "rounded-lg border p-4",
149
- "bg-[var(--axis-surface-default)] border-[var(--axis-border-default)]",
150
- className
151
- ),
152
- children: [
153
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between mb-4", children: [
154
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2", children: [
155
- status === "running" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "w-2 h-2 rounded-full bg-[var(--axis-status-running)] animate-pulse" }),
156
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "text-sm font-medium text-[var(--axis-text-primary)]", children: [
157
- status === "idle" && "\uB300\uAE30 \uC911",
158
- status === "running" && "\uC2E4\uD589 \uC911",
159
- status === "complete" && "\uC644\uB8CC",
160
- status === "error" && "\uC624\uB958 \uBC1C\uC0DD"
161
- ] })
162
- ] }),
163
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "text-xs text-[var(--axis-text-secondary)]", children: [
164
- progressPercent,
165
- "%"
166
- ] })
167
- ] }),
168
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
169
- "div",
170
- {
171
- role: "progressbar",
172
- "aria-valuenow": progressPercent,
173
- "aria-valuemin": 0,
174
- "aria-valuemax": 100,
175
- "aria-label": `\uC2E4\uD589 \uC9C4\uD589\uB960 ${progressPercent}%`,
176
- className: "w-full h-1.5 rounded-full bg-[var(--axis-surface-secondary)] mb-4",
177
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
178
- "div",
179
- {
180
- className: "h-full rounded-full bg-[var(--axis-status-running)] transition-all duration-300",
181
- style: { width: `${progressPercent}%` }
182
- }
183
- )
184
- }
185
- ),
186
- /* @__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)(
187
- "div",
188
- {
189
- role: "listitem",
190
- "aria-current": currentStep === index ? "step" : void 0,
191
- className: (0, import_ui_react.cn)(
192
- "flex items-center gap-3 p-2 rounded-md transition-colors",
193
- currentStep === index && "bg-[var(--axis-surface-secondary)]"
194
- ),
195
- children: [
196
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
197
- "div",
198
- {
199
- className: (0, import_ui_react.cn)(
200
- "w-5 h-5 rounded-full flex items-center justify-center text-xs",
201
- statusColors[step.status]
202
- ),
203
- "aria-hidden": "true",
204
- children: statusIcons[step.status] || index + 1
205
- }
206
- ),
207
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex-1 min-w-0", children: [
208
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "sr-only", children: [
209
- STATUS_LABELS[step.status],
210
- ":"
211
- ] }),
212
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-sm font-medium text-[var(--axis-text-primary)] truncate", children: step.label }),
213
- step.description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-xs text-[var(--axis-text-secondary)] truncate", children: step.description })
214
- ] })
215
- ]
216
- },
217
- step.id
218
- )) }),
219
- (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: [
220
- status === "running" && onCancel && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
221
- "button",
222
- {
223
- onClick: onCancel,
224
- 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)]",
225
- children: "\uCDE8\uC18C"
226
- }
227
- ),
228
- status === "error" && onRetry && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
229
- "button",
230
- {
231
- onClick: onRetry,
232
- className: "px-3 py-1.5 text-sm rounded-md bg-[var(--axis-button-bg-default)] text-[var(--axis-button-text-default)] hover:bg-[var(--axis-button-bg-hover)]",
233
- children: "\uC7AC\uC2DC\uB3C4"
234
- }
235
- )
236
- ] })
237
- ]
238
- }
239
- );
240
- }
241
-
242
- // src/step-timeline/index.tsx
243
- var import_ui_react2 = require("@axis-ds/ui-react");
244
- var import_jsx_runtime2 = require("react/jsx-runtime");
245
- function StepTimeline({
246
- steps,
247
- orientation = "vertical",
248
- className
249
- }) {
250
- const isVertical = orientation === "vertical";
251
- return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
252
- "div",
253
- {
254
- role: "list",
255
- "aria-label": "\uC791\uC5C5 \uD0C0\uC784\uB77C\uC778",
256
- className: (0, import_ui_react2.cn)(
257
- isVertical ? "flex flex-col gap-4" : "flex items-center gap-2",
258
- className
259
- ),
260
- children: steps.map((step, index) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
261
- "div",
262
- {
263
- role: "listitem",
264
- "aria-current": step.status === "running" ? "step" : void 0,
265
- className: (0, import_ui_react2.cn)(
266
- "relative flex",
267
- isVertical ? "items-start gap-3" : "flex-col items-center"
268
- ),
269
- children: [
270
- index < steps.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
271
- "div",
272
- {
273
- "aria-hidden": "true",
274
- className: (0, import_ui_react2.cn)(
275
- "absolute bg-[var(--axis-border-default)]",
276
- 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"
277
- )
278
- }
279
- ),
280
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
281
- "div",
282
- {
283
- "aria-hidden": "true",
284
- className: (0, import_ui_react2.cn)(
285
- "relative z-10 w-5 h-5 rounded-full flex items-center justify-center",
286
- step.status === "complete" && "bg-[var(--axis-status-success)]",
287
- step.status === "running" && "bg-[var(--axis-status-running)] animate-pulse",
288
- step.status === "error" && "bg-[var(--axis-status-error)]",
289
- step.status === "skipped" && "bg-[var(--axis-status-neutral-muted)]",
290
- step.status === "pending" && "bg-[var(--axis-status-neutral-muted)]"
291
- ),
292
- children: step.status === "complete" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { className: "w-3 h-3 text-[var(--axis-status-success-contrast)]", 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" }) })
293
- }
294
- ),
295
- /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: (0, import_ui_react2.cn)(isVertical ? "flex-1" : "text-center mt-2"), children: [
296
- /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "sr-only", children: [
297
- STATUS_LABELS[step.status],
298
- ":"
299
- ] }),
300
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-sm font-medium text-[var(--axis-text-primary)]", children: step.label }),
301
- step.description && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-xs text-[var(--axis-text-secondary)]", children: step.description }),
302
- step.timestamp && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-xs text-[var(--axis-text-tertiary)]", children: step.timestamp.toLocaleTimeString() })
303
- ] })
304
- ]
305
- },
306
- step.id
307
- ))
308
- }
309
- );
310
- }
311
-
312
- // src/thinking-indicator/index.tsx
313
- var import_ui_react3 = require("@axis-ds/ui-react");
314
- var import_jsx_runtime3 = require("react/jsx-runtime");
315
- var sizeStyles = {
316
- sm: "text-xs gap-1",
317
- md: "text-sm gap-1.5",
318
- lg: "text-base gap-2"
319
- };
320
- var dotSizes = {
321
- sm: "w-1 h-1",
322
- md: "w-1.5 h-1.5",
323
- lg: "w-2 h-2"
324
- };
325
- function ThinkingIndicator({
326
- text = "\uC0DD\uAC01 \uC911",
327
- size = "md",
328
- className
329
- }) {
330
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
331
- "div",
332
- {
333
- role: "status",
334
- "aria-live": "polite",
335
- "aria-label": text,
336
- className: (0, import_ui_react3.cn)(
337
- "flex items-center text-[var(--axis-text-secondary)]",
338
- sizeStyles[size],
339
- className
340
- ),
341
- children: [
342
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: text }),
343
- /* @__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)(
344
- "div",
345
- {
346
- className: (0, import_ui_react3.cn)(
347
- "rounded-full bg-current animate-bounce",
348
- dotSizes[size]
349
- ),
350
- style: { animationDelay: `${i * 150}ms` }
351
- },
352
- i
353
- )) })
354
- ]
355
- }
356
- );
357
- }
358
-
359
- // src/approval-card/index.tsx
360
- var React2 = __toESM(require("react"));
361
- var import_ui_react4 = require("@axis-ds/ui-react");
362
- var import_jsx_runtime4 = require("react/jsx-runtime");
363
- var severityStyles = {
364
- info: {
365
- border: "border-l-[var(--axis-status-info)]",
366
- icon: "text-[var(--axis-status-info)]",
367
- bg: "bg-[var(--axis-surface-info)]"
368
- },
369
- warning: {
370
- border: "border-l-[var(--axis-status-warning)]",
371
- icon: "text-[var(--axis-status-warning)]",
372
- bg: "bg-[var(--axis-surface-warning)]"
373
- },
374
- error: {
375
- border: "border-l-[var(--axis-status-error)]",
376
- icon: "text-[var(--axis-status-error)]",
377
- bg: "bg-[var(--axis-surface-error)]"
378
- }
379
- };
380
- var severityIcons = {
381
- 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" }) }),
382
- 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" }) }),
383
- 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" }) })
384
- };
385
- var actionVariantStyles = {
386
- default: "bg-[var(--axis-button-bg-default)] text-[var(--axis-button-text-default)] hover:bg-[var(--axis-button-bg-hover)]",
387
- secondary: "bg-[var(--axis-button-secondary-bg-default)] text-[var(--axis-text-primary)] hover:bg-[var(--axis-button-secondary-bg-hover)]",
388
- ghost: "bg-transparent text-[var(--axis-text-primary)] hover:bg-[var(--axis-surface-secondary)]",
389
- destructive: "bg-[var(--axis-button-destructive-bg-default)] text-[var(--axis-button-destructive-text-default)] hover:bg-[var(--axis-button-destructive-bg-hover)]"
390
- };
391
- function ApprovalCard({
392
- id,
393
- title,
394
- description,
395
- severity = "info",
396
- actions,
397
- children,
398
- className
399
- }) {
400
- const styles = severityStyles[severity];
401
- const generatedId = React2.useId();
402
- const baseId = id || generatedId;
403
- const titleId = `${baseId}-title`;
404
- const descId = `${baseId}-desc`;
405
- const severityLabel = SEVERITY_LABELS[severity];
406
- return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
407
- "div",
408
- {
409
- role: "region",
410
- "aria-labelledby": titleId,
411
- "aria-describedby": description ? descId : void 0,
412
- className: (0, import_ui_react4.cn)(
413
- "rounded-lg border border-l-4 p-4",
414
- "bg-[var(--axis-surface-default)] border-[var(--axis-border-default)]",
415
- styles.border,
416
- className
417
- ),
418
- children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-start gap-3", children: [
419
- /* @__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] }),
420
- /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex-1 min-w-0", children: [
421
- /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "sr-only", children: [
422
- severityLabel,
423
- " \uC54C\uB9BC:"
424
- ] }),
425
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h4", { id: titleId, className: "text-sm font-semibold text-[var(--axis-text-primary)]", children: title }),
426
- description && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { id: descId, className: "mt-1 text-sm text-[var(--axis-text-secondary)]", children: description }),
427
- children && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "mt-3", children }),
428
- /* @__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)(
429
- "button",
430
- {
431
- onClick: action.onClick,
432
- className: (0, import_ui_react4.cn)(
433
- "px-3 py-1.5 text-sm font-medium rounded-md transition-colors",
434
- actionVariantStyles[action.variant || "default"]
435
- ),
436
- children: action.label
437
- },
438
- index
439
- )) })
440
- ] })
441
- ] })
442
- }
443
- );
444
- }
445
-
446
- // src/source-panel/index.tsx
447
- var React3 = __toESM(require("react"));
448
- var import_ui_react5 = require("@axis-ds/ui-react");
449
- var import_jsx_runtime5 = require("react/jsx-runtime");
450
- var sourceIcons = {
451
- 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" }) }),
452
- 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" }) }),
453
- 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" }) }),
454
- 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" }) })
455
- };
456
- function SourcePanel({
457
- sources,
458
- expandable = true,
459
- defaultExpanded = false,
460
- maxItems = 5,
461
- className
462
- }) {
463
- const [isExpanded, setIsExpanded] = React3.useState(defaultExpanded);
464
- const displayedSources = isExpanded ? sources : sources.slice(0, maxItems);
465
- const hasMore = sources.length > maxItems;
466
- const listId = React3.useId();
467
- if (sources.length === 0) return null;
468
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
469
- "div",
470
- {
471
- className: (0, import_ui_react5.cn)(
472
- "rounded-lg border p-3",
473
- "bg-[var(--axis-surface-secondary)] border-[var(--axis-border-default)]",
474
- className
475
- ),
476
- children: [
477
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("h4", { className: "text-xs font-medium text-[var(--axis-text-secondary)] mb-2", children: [
478
- "\uCD9C\uCC98 (",
479
- sources.length,
480
- "\uAC1C)"
481
- ] }),
482
- /* @__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)(
483
- "div",
484
- {
485
- role: "listitem",
486
- className: "flex items-start gap-2 p-2 rounded-md bg-[var(--axis-surface-default)]",
487
- children: [
488
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-[var(--axis-icon-secondary)] mt-0.5", "aria-hidden": "true", children: sourceIcons[source.type] }),
489
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex-1 min-w-0", children: [
490
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "sr-only", children: [
491
- SOURCE_TYPE_LABELS[source.type],
492
- ":"
493
- ] }),
494
- /* @__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)(
495
- "a",
496
- {
497
- href: source.url,
498
- target: "_blank",
499
- rel: "noopener noreferrer",
500
- className: "hover:underline",
501
- "aria-label": `${source.title} (\uC0C8 \uCC3D\uC5D0\uC11C \uC5F4\uB9BC)`,
502
- children: [
503
- source.title,
504
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "sr-only", children: ", \uC0C8 \uCC3D\uC5D0\uC11C \uC5F4\uB9BC" })
505
- ]
506
- }
507
- ) : source.title }),
508
- 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 }),
509
- source.path && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("code", { className: "text-xs text-[var(--axis-text-tertiary)]", children: source.path })
510
- ] }),
511
- source.relevance !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "text-xs text-[var(--axis-text-tertiary)]", children: [
512
- Math.round(source.relevance * 100),
513
- "%"
514
- ] })
515
- ]
516
- },
517
- source.id
518
- )) }),
519
- expandable && hasMore && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
520
- "button",
521
- {
522
- onClick: () => setIsExpanded(!isExpanded),
523
- "aria-expanded": isExpanded,
524
- "aria-controls": listId,
525
- className: "mt-2 text-xs text-[var(--axis-text-brand)] hover:underline",
526
- children: isExpanded ? "\uC811\uAE30" : `${sources.length - maxItems}\uAC1C \uB354 \uBCF4\uAE30`
527
- }
528
- )
529
- ]
530
- }
531
- );
532
- }
533
-
534
- // src/streaming-text/index.tsx
535
- var React4 = __toESM(require("react"));
536
- var import_ui_react6 = require("@axis-ds/ui-react");
537
- var import_jsx_runtime6 = require("react/jsx-runtime");
538
- function StreamingText({
539
- text,
540
- speed = 20,
541
- isComplete = false,
542
- showCursor = true,
543
- onComplete,
544
- "aria-live": ariaLive,
545
- "aria-label": ariaLabel,
546
- className
547
- }) {
548
- const [displayedText, setDisplayedText] = React4.useState("");
549
- const [isStreaming, setIsStreaming] = React4.useState(false);
550
- const prevTextRef = React4.useRef("");
551
- React4.useEffect(() => {
552
- if (isComplete) {
553
- setDisplayedText(text);
554
- setIsStreaming(false);
555
- return;
556
- }
557
- if (text.length > prevTextRef.current.length && text.startsWith(prevTextRef.current)) {
558
- const newText = text.slice(prevTextRef.current.length);
559
- let charIndex = 0;
560
- setIsStreaming(true);
561
- const interval = setInterval(() => {
562
- if (charIndex < newText.length) {
563
- setDisplayedText((prev) => prev + newText[charIndex]);
564
- charIndex++;
565
- } else {
566
- clearInterval(interval);
567
- setIsStreaming(false);
568
- if (onComplete) onComplete();
569
- }
570
- }, speed);
571
- prevTextRef.current = text;
572
- return () => clearInterval(interval);
573
- } else if (text !== prevTextRef.current) {
574
- setDisplayedText("");
575
- prevTextRef.current = "";
576
- }
577
- }, [text, speed, isComplete, onComplete]);
578
- return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
579
- "div",
580
- {
581
- role: "region",
582
- "aria-label": ariaLabel || "AI \uC751\uB2F5",
583
- "aria-live": ariaLive ?? "polite",
584
- "aria-busy": isStreaming,
585
- className: (0, import_ui_react6.cn)("relative", className),
586
- children: [
587
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-[var(--axis-text-primary)] whitespace-pre-wrap", children: displayedText }),
588
- 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" })
589
- ]
590
- }
591
- );
592
- }
593
-
594
- // src/tool-call-card/index.tsx
595
- var React5 = __toESM(require("react"));
596
- var import_ui_react7 = require("@axis-ds/ui-react");
597
- var import_jsx_runtime7 = require("react/jsx-runtime");
598
- var statusConfig = {
599
- pending: {
600
- color: "text-[var(--axis-status-neutral)]",
601
- 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 }) })
602
- },
603
- running: {
604
- color: "text-[var(--axis-status-running)]",
605
- icon: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("svg", { className: "w-4 h-4 animate-spin", viewBox: "0 0 24 24", fill: "none", children: [
606
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
607
- /* @__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" })
608
- ] })
609
- },
610
- success: {
611
- color: "text-[var(--axis-status-success)]",
612
- 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" }) })
613
- },
614
- error: {
615
- color: "text-[var(--axis-status-error)]",
616
- 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" }) })
617
- }
618
- };
619
- function ToolCallCard({
620
- toolName,
621
- description,
622
- status,
623
- input,
624
- output,
625
- error,
626
- duration,
627
- defaultExpanded = false,
628
- "aria-label": ariaLabel,
629
- className
630
- }) {
631
- const [isExpanded, setIsExpanded] = React5.useState(defaultExpanded);
632
- const config = statusConfig[status];
633
- const contentId = React5.useId();
634
- const statusLabel = STATUS_LABELS[status] || status;
635
- return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
636
- "div",
637
- {
638
- className: (0, import_ui_react7.cn)(
639
- "rounded-lg border overflow-hidden",
640
- "bg-[var(--axis-surface-default)] border-[var(--axis-border-default)]",
641
- className
642
- ),
643
- children: [
644
- /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
645
- "button",
646
- {
647
- onClick: () => setIsExpanded(!isExpanded),
648
- "aria-expanded": isExpanded,
649
- "aria-controls": contentId,
650
- "aria-label": ariaLabel || `${toolName} - ${statusLabel}`,
651
- className: "w-full flex items-center justify-between p-3 hover:bg-[var(--axis-surface-secondary)] transition-colors",
652
- children: [
653
- /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center gap-2", children: [
654
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: config.color, "aria-hidden": "true", children: config.icon }),
655
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("code", { className: "text-sm font-mono text-[var(--axis-text-primary)]", children: toolName }),
656
- description && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "text-xs text-[var(--axis-text-secondary)]", children: [
657
- "\u2014 ",
658
- description
659
- ] })
660
- ] }),
661
- /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center gap-2", children: [
662
- duration !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "text-xs text-[var(--axis-text-tertiary)]", children: [
663
- duration,
664
- "ms"
665
- ] }),
666
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
667
- "svg",
668
- {
669
- className: (0, import_ui_react7.cn)(
670
- "w-4 h-4 text-[var(--axis-text-secondary)] transition-transform",
671
- isExpanded && "rotate-180"
672
- ),
673
- fill: "none",
674
- stroke: "currentColor",
675
- viewBox: "0 0 24 24",
676
- children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" })
677
- }
678
- )
679
- ] })
680
- ]
681
- }
682
- ),
683
- isExpanded && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { id: contentId, className: "border-t border-[var(--axis-border-default)] p-3 space-y-3", children: [
684
- input && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { children: [
685
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h5", { className: "text-xs font-medium text-[var(--axis-text-secondary)] mb-1", children: "\uC785\uB825" }),
686
- /* @__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) }) })
687
- ] }),
688
- output !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { children: [
689
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h5", { className: "text-xs font-medium text-[var(--axis-text-secondary)] mb-1", children: "\uCD9C\uB825" }),
690
- /* @__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) }) })
691
- ] }),
692
- error && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { children: [
693
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h5", { className: "text-xs font-medium text-[var(--axis-text-error)] mb-1", children: "\uC5D0\uB7EC" }),
694
- /* @__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 }) })
695
- ] })
696
- ] })
697
- ]
698
- }
699
- );
700
- }
701
-
702
- // src/surface-renderer/index.tsx
703
- var import_ui_react8 = require("@axis-ds/ui-react");
704
- var import_jsx_runtime8 = require("react/jsx-runtime");
705
- function SurfaceRenderer({
706
- surface,
707
- renderCustom,
708
- className
709
- }) {
710
- const renderContent = () => {
711
- switch (surface.type) {
712
- case "text":
713
- return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "prose prose-sm max-w-none text-[var(--axis-text-primary)]", children: String(surface.content) });
714
- case "code":
715
- 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) }) });
716
- case "table": {
717
- const tableData = surface.content;
718
- 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: [
719
- surface.title && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("caption", { className: "sr-only", children: surface.title }),
720
- /* @__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)(
721
- "th",
722
- {
723
- scope: "col",
724
- className: "px-3 py-2 text-left font-medium text-[var(--axis-text-secondary)]",
725
- children: header
726
- },
727
- i
728
- )) }) }),
729
- /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("tbody", { children: tableData.rows.map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
730
- "tr",
731
- {
732
- className: "border-b border-[var(--axis-border-default)] last:border-0",
733
- children: row.map((cell, j) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
734
- "td",
735
- {
736
- className: "px-3 py-2 text-[var(--axis-text-primary)]",
737
- children: cell
738
- },
739
- j
740
- ))
741
- },
742
- i
743
- )) })
744
- ] }) });
745
- }
746
- case "chart":
747
- return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "p-4 text-center text-[var(--axis-text-secondary)]", children: [
748
- "[\uCC28\uD2B8: ",
749
- surface.title || "\uB370\uC774\uD130 \uC2DC\uAC01\uD654",
750
- "]"
751
- ] });
752
- case "form":
753
- return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "p-4 text-center text-[var(--axis-text-secondary)]", children: [
754
- "[\uD3FC: ",
755
- surface.title || "\uC785\uB825 \uC591\uC2DD",
756
- "]"
757
- ] });
758
- case "custom":
759
- if (renderCustom) {
760
- return renderCustom(surface);
761
- }
762
- return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "p-4 text-center text-[var(--axis-text-secondary)]", children: "[\uCEE4\uC2A4\uD140 Surface]" });
763
- default:
764
- return null;
765
- }
766
- };
767
- return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
768
- "div",
769
- {
770
- className: (0, import_ui_react8.cn)(
771
- "rounded-lg border p-4",
772
- "bg-[var(--axis-surface-default)] border-[var(--axis-border-default)]",
773
- className
774
- ),
775
- children: [
776
- surface.title && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h4", { className: "text-sm font-medium text-[var(--axis-text-primary)] mb-3", children: surface.title }),
777
- renderContent()
778
- ]
779
- }
780
- );
781
- }
782
-
783
- // src/recovery-banner/index.tsx
784
- var React6 = __toESM(require("react"));
785
- var import_ui_react9 = require("@axis-ds/ui-react");
786
- var import_jsx_runtime9 = require("react/jsx-runtime");
787
- function RecoveryBanner({
788
- message,
789
- description,
790
- onRetry,
791
- onDismiss,
792
- className
793
- }) {
794
- const titleId = React6.useId();
795
- const descId = React6.useId();
796
- return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
797
- "div",
798
- {
799
- className: (0, import_ui_react9.cn)(
800
- "flex items-start gap-3 p-4 rounded-lg border",
801
- "bg-[var(--axis-surface-error)] border-[var(--axis-status-error-border)]",
802
- className
803
- ),
804
- role: "alert",
805
- "aria-labelledby": titleId,
806
- "aria-describedby": description ? descId : void 0,
807
- children: [
808
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
809
- "svg",
810
- {
811
- className: "w-5 h-5 text-[var(--axis-status-error)] flex-shrink-0 mt-0.5",
812
- fill: "none",
813
- stroke: "currentColor",
814
- viewBox: "0 0 24 24",
815
- "aria-hidden": "true",
816
- children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
817
- "path",
818
- {
819
- strokeLinecap: "round",
820
- strokeLinejoin: "round",
821
- strokeWidth: 2,
822
- 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"
823
- }
824
- )
825
- }
826
- ),
827
- /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex-1 min-w-0", children: [
828
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { id: titleId, className: "text-sm font-medium text-[var(--axis-text-error)]", children: message }),
829
- description && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { id: descId, className: "mt-1 text-sm text-[var(--axis-text-secondary)]", children: description }),
830
- /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex gap-2 mt-3", children: [
831
- onRetry && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
832
- "button",
833
- {
834
- onClick: onRetry,
835
- "aria-describedby": descId,
836
- className: "px-3 py-1.5 text-sm font-medium rounded-md bg-[var(--axis-button-destructive-bg-default)] text-[var(--axis-button-destructive-text-default)] hover:bg-[var(--axis-button-destructive-bg-hover)] transition-colors",
837
- children: "\uC7AC\uC2DC\uB3C4"
838
- }
839
- ),
840
- onDismiss && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
841
- "button",
842
- {
843
- onClick: onDismiss,
844
- 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",
845
- children: "\uBB34\uC2DC"
846
- }
847
- )
848
- ] })
849
- ] })
850
- ]
851
- }
852
- );
853
- }
854
-
855
- // src/agent-avatar/index.tsx
856
- var import_ui_react10 = require("@axis-ds/ui-react");
857
- var import_jsx_runtime10 = require("react/jsx-runtime");
858
- var sizeStyles2 = {
859
- sm: "w-6 h-6 text-xs",
860
- md: "w-8 h-8 text-sm",
861
- lg: "w-10 h-10 text-base",
862
- xl: "w-12 h-12 text-lg"
863
- };
864
- var statusStyles = {
865
- online: "bg-[var(--axis-status-success)]",
866
- busy: "bg-[var(--axis-status-warning)]",
867
- offline: "bg-[var(--axis-status-neutral)]"
868
- };
869
- var typeColors = {
870
- assistant: "bg-[var(--axis-agent-avatar-assistant)]",
871
- tool: "bg-[var(--axis-agent-avatar-tool)]",
872
- system: "bg-[var(--axis-agent-avatar-system)]"
873
- };
874
- function AgentAvatar({
875
- name,
876
- src,
877
- size = "md",
878
- status,
879
- type = "assistant",
880
- className
881
- }) {
882
- const initials = name.split(" ").map((n) => n[0]).join("").slice(0, 2).toUpperCase();
883
- const statusLabel = status ? AGENT_STATUS_LABELS[status] : "";
884
- const ariaLabel = `${name}${statusLabel ? `, ${statusLabel}` : ""}`;
885
- return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
886
- "div",
887
- {
888
- role: "img",
889
- "aria-label": ariaLabel,
890
- className: (0, import_ui_react10.cn)("relative inline-flex", className),
891
- children: [
892
- src ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
893
- "img",
894
- {
895
- src,
896
- alt: "",
897
- "aria-hidden": "true",
898
- className: (0, import_ui_react10.cn)(
899
- "rounded-full object-cover",
900
- sizeStyles2[size]
901
- )
902
- }
903
- ) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
904
- "div",
905
- {
906
- "aria-hidden": "true",
907
- className: (0, import_ui_react10.cn)(
908
- "rounded-full flex items-center justify-center font-medium text-[var(--axis-agent-avatar-text)]",
909
- sizeStyles2[size],
910
- typeColors[type]
911
- ),
912
- children: initials
913
- }
914
- ),
915
- status && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
916
- "span",
917
- {
918
- "aria-hidden": "true",
919
- className: (0, import_ui_react10.cn)(
920
- "absolute bottom-0 right-0 rounded-full border-2 border-[var(--axis-surface-default)]",
921
- size === "sm" ? "w-2 h-2" : "w-3 h-3",
922
- statusStyles[status]
923
- )
924
- }
925
- )
926
- ]
927
- }
928
- );
929
- }
930
-
931
- // src/message-bubble/index.tsx
932
- var import_ui_react11 = require("@axis-ds/ui-react");
933
- var import_jsx_runtime11 = require("react/jsx-runtime");
934
- var roleStyles = {
935
- user: {
936
- container: "flex-row-reverse",
937
- bubble: "bg-[var(--axis-agent-message-user-bg)] text-[var(--axis-agent-message-user-text)] rounded-br-sm"
938
- },
939
- assistant: {
940
- container: "flex-row",
941
- bubble: "bg-[var(--axis-surface-secondary)] text-[var(--axis-text-primary)] rounded-bl-sm"
942
- },
943
- system: {
944
- container: "justify-center",
945
- bubble: "bg-[var(--axis-surface-tertiary)] text-[var(--axis-text-secondary)] text-xs italic"
946
- }
947
- };
948
- var statusIcons2 = {
949
- sending: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("svg", { className: "w-3 h-3 animate-spin", viewBox: "0 0 24 24", fill: "none", children: [
950
- /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
951
- /* @__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" })
952
- ] }),
953
- 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" }) }),
954
- 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" }) })
955
- };
956
- function MessageBubble({
957
- role,
958
- content,
959
- timestamp,
960
- avatar,
961
- status,
962
- actions,
963
- metadata,
964
- className
965
- }) {
966
- const roleLabel = MESSAGE_ROLE_LABELS[role];
967
- const renderAvatar = () => {
968
- if (!avatar) return null;
969
- if (typeof avatar === "string") {
970
- return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
971
- "img",
972
- {
973
- src: avatar,
974
- alt: "",
975
- "aria-hidden": "true",
976
- className: "w-8 h-8 rounded-full object-cover flex-shrink-0"
977
- }
978
- );
979
- }
980
- return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "flex-shrink-0", children: avatar });
981
- };
982
- return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
983
- "div",
984
- {
985
- role: "article",
986
- "aria-label": `${roleLabel} \uBA54\uC2DC\uC9C0`,
987
- className: (0, import_ui_react11.cn)("flex items-start gap-2", roleStyles[role].container, className),
988
- children: [
989
- role !== "system" && renderAvatar(),
990
- /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: (0, import_ui_react11.cn)("max-w-[80%]", role === "system" && "max-w-full"), children: [
991
- /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
992
- "div",
993
- {
994
- className: (0, import_ui_react11.cn)(
995
- "rounded-lg px-3 py-2",
996
- roleStyles[role].bubble
997
- ),
998
- children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "text-sm whitespace-pre-wrap", children: content })
999
- }
1000
- ),
1001
- /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center gap-2 mt-1 px-1", children: [
1002
- timestamp && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
1003
- "time",
1004
- {
1005
- dateTime: timestamp.toISOString(),
1006
- className: "text-xs text-[var(--axis-text-tertiary)]",
1007
- children: timestamp.toLocaleTimeString("ko-KR", { hour: "2-digit", minute: "2-digit" })
1008
- }
1009
- ),
1010
- metadata && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-xs text-[var(--axis-text-tertiary)]", children: metadata }),
1011
- status && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
1012
- "span",
1013
- {
1014
- className: (0, import_ui_react11.cn)(
1015
- "text-[var(--axis-text-tertiary)]",
1016
- status === "error" && "text-[var(--axis-text-error)]"
1017
- ),
1018
- "aria-label": status === "sending" ? "\uC804\uC1A1 \uC911" : status === "sent" ? "\uC804\uC1A1\uB428" : "\uC804\uC1A1 \uC2E4\uD328",
1019
- children: statusIcons2[status]
1020
- }
1021
- )
1022
- ] }),
1023
- actions && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "mt-1", children: actions })
1024
- ] })
1025
- ]
1026
- }
1027
- );
1028
- }
1029
-
1030
- // src/feedback-buttons/index.tsx
1031
- var React7 = __toESM(require("react"));
1032
- var import_ui_react12 = require("@axis-ds/ui-react");
1033
- var import_jsx_runtime12 = require("react/jsx-runtime");
1034
- var sizeStyles3 = {
1035
- sm: "p-1",
1036
- md: "p-1.5"
1037
- };
1038
- var iconSizes = {
1039
- sm: "w-3.5 h-3.5",
1040
- md: "w-4 h-4"
1041
- };
1042
- function FeedbackButtons({
1043
- messageId,
1044
- initialFeedback = "none",
1045
- onFeedback,
1046
- size = "sm",
1047
- className
1048
- }) {
1049
- const [feedback, setFeedback] = React7.useState(initialFeedback);
1050
- const handleFeedback = (type) => {
1051
- const newFeedback = feedback === type ? "none" : type;
1052
- setFeedback(newFeedback);
1053
- onFeedback?.(messageId, newFeedback);
1054
- };
1055
- return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
1056
- "div",
1057
- {
1058
- role: "group",
1059
- "aria-label": "\uBA54\uC2DC\uC9C0 \uD53C\uB4DC\uBC31",
1060
- className: (0, import_ui_react12.cn)("inline-flex items-center gap-1", className),
1061
- children: [
1062
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
1063
- "button",
1064
- {
1065
- onClick: () => handleFeedback("like"),
1066
- "aria-pressed": feedback === "like",
1067
- "aria-label": FEEDBACK_LABELS.like,
1068
- className: (0, import_ui_react12.cn)(
1069
- "rounded-md transition-colors",
1070
- sizeStyles3[size],
1071
- feedback === "like" ? "text-[var(--axis-status-success)] bg-[color:color-mix(in_srgb,var(--axis-status-success)_10%,transparent)]" : "text-[var(--axis-text-tertiary)] hover:text-[var(--axis-text-secondary)] hover:bg-[var(--axis-surface-secondary)]"
1072
- ),
1073
- 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" }) })
1074
- }
1075
- ),
1076
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
1077
- "button",
1078
- {
1079
- onClick: () => handleFeedback("dislike"),
1080
- "aria-pressed": feedback === "dislike",
1081
- "aria-label": FEEDBACK_LABELS.dislike,
1082
- className: (0, import_ui_react12.cn)(
1083
- "rounded-md transition-colors",
1084
- sizeStyles3[size],
1085
- feedback === "dislike" ? "text-[var(--axis-status-error)] bg-[color:color-mix(in_srgb,var(--axis-status-error)_10%,transparent)]" : "text-[var(--axis-text-tertiary)] hover:text-[var(--axis-text-secondary)] hover:bg-[var(--axis-surface-secondary)]"
1086
- ),
1087
- 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" }) })
1088
- }
1089
- )
1090
- ]
1091
- }
1092
- );
1093
- }
1094
-
1095
- // src/code-block/index.tsx
1096
- var React8 = __toESM(require("react"));
1097
- var import_ui_react13 = require("@axis-ds/ui-react");
1098
- var import_jsx_runtime13 = require("react/jsx-runtime");
1099
- function CodeBlock({
1100
- code,
1101
- language,
1102
- filename,
1103
- showLineNumbers = false,
1104
- onCopy,
1105
- maxHeight,
1106
- className
1107
- }) {
1108
- const [copied, setCopied] = React8.useState(false);
1109
- const handleCopy = async () => {
1110
- try {
1111
- await navigator.clipboard.writeText(code);
1112
- setCopied(true);
1113
- onCopy?.(code);
1114
- setTimeout(() => setCopied(false), 2e3);
1115
- } catch {
1116
- }
1117
- };
1118
- const lines = code.split("\n");
1119
- return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
1120
- "div",
1121
- {
1122
- className: (0, import_ui_react13.cn)(
1123
- "rounded-lg border overflow-hidden",
1124
- "bg-[var(--axis-surface-default)] border-[var(--axis-border-default)]",
1125
- className
1126
- ),
1127
- children: [
1128
- /* @__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: [
1129
- /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center gap-2 min-w-0", children: [
1130
- filename && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("code", { className: "text-xs font-mono text-[var(--axis-text-primary)] truncate", children: filename }),
1131
- 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 })
1132
- ] }),
1133
- /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
1134
- "button",
1135
- {
1136
- onClick: handleCopy,
1137
- "aria-label": copied ? "\uBCF5\uC0AC\uB428" : "\uCF54\uB4DC \uBCF5\uC0AC",
1138
- 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",
1139
- children: copied ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
1140
- /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("svg", { className: "w-3.5 h-3.5 text-[var(--axis-status-success)]", 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" }) }),
1141
- /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: "\uBCF5\uC0AC\uB428" })
1142
- ] }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
1143
- /* @__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" }) }),
1144
- /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: "\uBCF5\uC0AC" })
1145
- ] })
1146
- }
1147
- )
1148
- ] }),
1149
- /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
1150
- "div",
1151
- {
1152
- className: "overflow-auto",
1153
- style: maxHeight ? { maxHeight } : void 0,
1154
- 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: [
1155
- /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
1156
- "td",
1157
- {
1158
- className: "select-none text-right pr-4 text-[var(--axis-text-tertiary)] w-8",
1159
- "aria-hidden": "true",
1160
- children: i + 1
1161
- }
1162
- ),
1163
- /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("td", { className: "whitespace-pre", children: line })
1164
- ] }, i)) }) }) : code }) })
1165
- }
1166
- )
1167
- ]
1168
- }
1169
- );
1170
- }
1171
-
1172
- // src/diff-viewer/index.tsx
1173
- var React9 = __toESM(require("react"));
1174
- var import_ui_react14 = require("@axis-ds/ui-react");
1175
- var import_jsx_runtime14 = require("react/jsx-runtime");
1176
- function computeDiff(before, after) {
1177
- const oldLines = before.split("\n");
1178
- const newLines = after.split("\n");
1179
- const m = oldLines.length;
1180
- const n = newLines.length;
1181
- const dp = Array.from({ length: m + 1 }, () => Array(n + 1).fill(0));
1182
- for (let i2 = 1; i2 <= m; i2++) {
1183
- for (let j2 = 1; j2 <= n; j2++) {
1184
- if (oldLines[i2 - 1] === newLines[j2 - 1]) {
1185
- dp[i2][j2] = dp[i2 - 1][j2 - 1] + 1;
1186
- } else {
1187
- dp[i2][j2] = Math.max(dp[i2 - 1][j2], dp[i2][j2 - 1]);
1188
- }
1189
- }
1190
- }
1191
- const result = [];
1192
- let i = m;
1193
- let j = n;
1194
- while (i > 0 || j > 0) {
1195
- if (i > 0 && j > 0 && oldLines[i - 1] === newLines[j - 1]) {
1196
- result.unshift({ type: "unchanged", content: oldLines[i - 1], oldLineNumber: i, newLineNumber: j });
1197
- i--;
1198
- j--;
1199
- } else if (j > 0 && (i === 0 || dp[i][j - 1] >= dp[i - 1][j])) {
1200
- result.unshift({ type: "added", content: newLines[j - 1], newLineNumber: j });
1201
- j--;
1202
- } else if (i > 0) {
1203
- result.unshift({ type: "removed", content: oldLines[i - 1], oldLineNumber: i });
1204
- i--;
1205
- }
1206
- }
1207
- return result;
1208
- }
1209
- var lineTypeStyles = {
1210
- added: "bg-[color:color-mix(in_srgb,var(--axis-diff-added)_10%,transparent)]",
1211
- removed: "bg-[color:color-mix(in_srgb,var(--axis-diff-removed)_10%,transparent)]",
1212
- unchanged: ""
1213
- };
1214
- var lineTypeTextStyles = {
1215
- added: "text-[var(--axis-diff-added-text)]",
1216
- removed: "text-[var(--axis-diff-removed-text)]",
1217
- unchanged: "text-[var(--axis-text-primary)]"
1218
- };
1219
- var lineTypeSymbols = {
1220
- added: "+",
1221
- removed: "-",
1222
- unchanged: " "
1223
- };
1224
- function DiffViewer({
1225
- before,
1226
- after,
1227
- filename,
1228
- viewMode = "unified",
1229
- className
1230
- }) {
1231
- const [mode, setMode] = React9.useState(viewMode);
1232
- const diffLines = React9.useMemo(() => computeDiff(before, after), [before, after]);
1233
- const addedCount = diffLines.filter((l) => l.type === "added").length;
1234
- const removedCount = diffLines.filter((l) => l.type === "removed").length;
1235
- return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
1236
- "div",
1237
- {
1238
- role: "region",
1239
- "aria-label": filename ? `${filename} \uBCC0\uACBD\uC0AC\uD56D` : "\uCF54\uB4DC \uBCC0\uACBD\uC0AC\uD56D",
1240
- className: (0, import_ui_react14.cn)(
1241
- "rounded-lg border overflow-hidden",
1242
- "bg-[var(--axis-surface-default)] border-[var(--axis-border-default)]",
1243
- className
1244
- ),
1245
- children: [
1246
- /* @__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: [
1247
- /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-center gap-2 min-w-0", children: [
1248
- /* @__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" }) }),
1249
- filename && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("code", { className: "text-xs font-mono text-[var(--axis-text-primary)] truncate", children: filename }),
1250
- /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: "text-xs text-[var(--axis-diff-added)]", "aria-label": `${addedCount}\uC904 ${DIFF_LABELS.added}`, children: [
1251
- "+",
1252
- addedCount
1253
- ] }),
1254
- /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: "text-xs text-[var(--axis-diff-removed)]", "aria-label": `${removedCount}\uC904 ${DIFF_LABELS.removed}`, children: [
1255
- "-",
1256
- removedCount
1257
- ] })
1258
- ] }),
1259
- /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-center gap-1 bg-[var(--axis-surface-tertiary)] rounded-md p-0.5", children: [
1260
- /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
1261
- "button",
1262
- {
1263
- onClick: () => setMode("unified"),
1264
- "aria-pressed": mode === "unified",
1265
- className: (0, import_ui_react14.cn)(
1266
- "px-2 py-0.5 text-xs rounded transition-colors",
1267
- 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)]"
1268
- ),
1269
- children: "\uD1B5\uD569"
1270
- }
1271
- ),
1272
- /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
1273
- "button",
1274
- {
1275
- onClick: () => setMode("split"),
1276
- "aria-pressed": mode === "split",
1277
- className: (0, import_ui_react14.cn)(
1278
- "px-2 py-0.5 text-xs rounded transition-colors",
1279
- 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)]"
1280
- ),
1281
- children: "\uBD84\uD560"
1282
- }
1283
- )
1284
- ] })
1285
- ] }),
1286
- /* @__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 }) })
1287
- ]
1288
- }
1289
- );
1290
- }
1291
- function UnifiedView({ lines }) {
1292
- 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: [
1293
- /* @__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 ?? "" }),
1294
- /* @__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 ?? "" }),
1295
- /* @__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] }),
1296
- /* @__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 })
1297
- ] }, i)) }) });
1298
- }
1299
- function SplitView({ lines }) {
1300
- const leftLines = [];
1301
- const rightLines = [];
1302
- for (const line of lines) {
1303
- if (line.type === "unchanged") {
1304
- leftLines.push(line);
1305
- rightLines.push(line);
1306
- } else if (line.type === "removed") {
1307
- leftLines.push(line);
1308
- rightLines.push(null);
1309
- } else {
1310
- leftLines.push(null);
1311
- rightLines.push(line);
1312
- }
1313
- }
1314
- 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) => {
1315
- const rightLine = rightLines[i];
1316
- return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("tr", { children: [
1317
- /* @__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 ?? "" }),
1318
- /* @__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] : "" }),
1319
- /* @__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 ?? "" }),
1320
- /* @__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 ?? "" }),
1321
- /* @__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] : "" }),
1322
- /* @__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 ?? "" })
1323
- ] }, i);
1324
- }) }) });
1325
- }
1326
-
1327
- // src/plan-card/index.tsx
1328
- var React10 = __toESM(require("react"));
1329
- var import_ui_react15 = require("@axis-ds/ui-react");
1330
- var import_jsx_runtime15 = require("react/jsx-runtime");
1331
- var planStatusStyles = {
1332
- draft: {
1333
- border: "border-l-[var(--axis-status-neutral)]",
1334
- badge: "bg-[var(--axis-status-neutral-bg)] text-[var(--axis-status-neutral-strong)]"
1335
- },
1336
- pending: {
1337
- border: "border-l-[var(--axis-status-warning)]",
1338
- badge: "bg-[var(--axis-badge-warning-bg)] text-[var(--axis-badge-warning-text)]"
1339
- },
1340
- approved: {
1341
- border: "border-l-[var(--axis-status-success)]",
1342
- badge: "bg-[var(--axis-badge-success-bg)] text-[var(--axis-badge-success-text)]"
1343
- },
1344
- rejected: {
1345
- border: "border-l-[var(--axis-status-error)]",
1346
- badge: "bg-[var(--axis-badge-error-bg)] text-[var(--axis-badge-error-text)]"
1347
- },
1348
- executing: {
1349
- border: "border-l-[var(--axis-status-running)]",
1350
- badge: "bg-[var(--axis-badge-info-bg)] text-[var(--axis-badge-info-text)]"
1351
- },
1352
- completed: {
1353
- border: "border-l-[var(--axis-status-success)]",
1354
- badge: "bg-[var(--axis-badge-success-bg)] text-[var(--axis-badge-success-text)]"
1355
- }
1356
- };
1357
- var stepStatusIcons = {
1358
- pending: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("svg", { className: "w-4 h-4 text-[var(--axis-status-neutral)]", 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 }) }),
1359
- running: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("svg", { className: "w-4 h-4 text-[var(--axis-status-running)] animate-spin", viewBox: "0 0 24 24", fill: "none", children: [
1360
- /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
1361
- /* @__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" })
1362
- ] }),
1363
- complete: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("svg", { className: "w-4 h-4 text-[var(--axis-status-success)]", 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" }) }),
1364
- error: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("svg", { className: "w-4 h-4 text-[var(--axis-status-error)]", 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" }) }),
1365
- skipped: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("svg", { className: "w-4 h-4 text-[var(--axis-status-neutral)]", 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" }) })
1366
- };
1367
- function PlanCard({
1368
- title,
1369
- steps,
1370
- status = "pending",
1371
- onApprove,
1372
- onEdit,
1373
- onReject,
1374
- className
1375
- }) {
1376
- const styles = planStatusStyles[status];
1377
- const titleId = React10.useId();
1378
- const statusLabel = PLAN_STATUS_LABELS[status];
1379
- const completedCount = steps.filter((s) => s.status === "complete").length;
1380
- return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
1381
- "div",
1382
- {
1383
- role: "region",
1384
- "aria-labelledby": titleId,
1385
- className: (0, import_ui_react15.cn)(
1386
- "rounded-lg border border-l-[length:var(--axis-plan-card-accent-width)] overflow-hidden",
1387
- "bg-[var(--axis-surface-default)] border-[var(--axis-border-default)]",
1388
- styles.border,
1389
- className
1390
- ),
1391
- children: [
1392
- /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "p-4", children: [
1393
- /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center justify-between mb-2", children: [
1394
- /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center gap-2", children: [
1395
- /* @__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" }) }),
1396
- /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("h4", { id: titleId, className: "text-sm font-semibold text-[var(--axis-text-primary)]", children: title })
1397
- ] }),
1398
- /* @__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 })
1399
- ] }),
1400
- /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center gap-2 text-xs text-[var(--axis-text-tertiary)]", children: [
1401
- /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { children: [
1402
- completedCount,
1403
- "/",
1404
- steps.length,
1405
- " \uB2E8\uACC4"
1406
- ] }),
1407
- 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)(
1408
- "div",
1409
- {
1410
- className: "h-full rounded-full bg-[var(--axis-status-success)] transition-all",
1411
- style: { width: `${completedCount / steps.length * 100}%` },
1412
- "aria-hidden": "true"
1413
- }
1414
- ) })
1415
- ] })
1416
- ] }),
1417
- /* @__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) => {
1418
- const stepStatusLabel = STATUS_LABELS[step.status] || step.status;
1419
- return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
1420
- "div",
1421
- {
1422
- role: "listitem",
1423
- "aria-current": step.status === "running" ? "step" : void 0,
1424
- className: "flex items-start gap-3 px-4 py-2.5",
1425
- children: [
1426
- /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { "aria-hidden": "true", className: "mt-0.5 flex-shrink-0", children: stepStatusIcons[step.status] }),
1427
- /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex-1 min-w-0", children: [
1428
- /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: "sr-only", children: [
1429
- stepStatusLabel,
1430
- ":"
1431
- ] }),
1432
- /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "text-sm text-[var(--axis-text-primary)]", children: step.label }),
1433
- step.description && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "text-xs text-[var(--axis-text-secondary)] mt-0.5", children: step.description })
1434
- ] })
1435
- ]
1436
- },
1437
- step.id
1438
- );
1439
- }) }),
1440
- (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: [
1441
- onApprove && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
1442
- "button",
1443
- {
1444
- onClick: onApprove,
1445
- className: "px-3 py-1.5 text-xs font-medium rounded-md bg-[var(--axis-status-success)] text-[var(--axis-status-success-contrast)] hover:bg-[var(--axis-status-success-strong)] transition-colors",
1446
- children: "\uC2B9\uC778"
1447
- }
1448
- ),
1449
- onEdit && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
1450
- "button",
1451
- {
1452
- onClick: onEdit,
1453
- 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",
1454
- children: "\uC218\uC815"
1455
- }
1456
- ),
1457
- onReject && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
1458
- "button",
1459
- {
1460
- onClick: onReject,
1461
- className: "px-3 py-1.5 text-xs font-medium rounded-md text-[var(--axis-status-error)] hover:text-[var(--axis-plan-card-reject-hover-text)] hover:bg-[color:color-mix(in_srgb,var(--axis-status-error)_10%,transparent)] transition-colors",
1462
- children: "\uAC70\uC808"
1463
- }
1464
- )
1465
- ] })
1466
- ]
1467
- }
1468
- );
1469
- }
1470
-
1471
- // src/context-panel/index.tsx
1472
- var React11 = __toESM(require("react"));
1473
- var import_ui_react16 = require("@axis-ds/ui-react");
1474
- var import_jsx_runtime16 = require("react/jsx-runtime");
1475
- function ContextPanel({
1476
- modelInfo,
1477
- systemPrompt,
1478
- attachedFiles,
1479
- settings,
1480
- collapsible = true,
1481
- defaultExpanded = false,
1482
- className
1483
- }) {
1484
- const [isExpanded, setIsExpanded] = React11.useState(defaultExpanded);
1485
- const contentId = React11.useId();
1486
- const hasContent = modelInfo || systemPrompt || attachedFiles && attachedFiles.length > 0 || settings && Object.keys(settings).length > 0;
1487
- if (!hasContent) return null;
1488
- const header = /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex items-center gap-2", children: [
1489
- /* @__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: [
1490
- /* @__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" }),
1491
- /* @__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" })
1492
- ] }),
1493
- /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-xs font-medium text-[var(--axis-text-secondary)]", children: "\uCEE8\uD14D\uC2A4\uD2B8" })
1494
- ] });
1495
- const content = /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { id: contentId, className: "space-y-3 mt-2", children: [
1496
- modelInfo && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { children: [
1497
- /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("h5", { className: "text-xs font-medium text-[var(--axis-text-secondary)] mb-1", children: "\uBAA8\uB378" }),
1498
- /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex items-center gap-2", children: [
1499
- /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("code", { className: "text-sm font-mono text-[var(--axis-text-primary)]", children: modelInfo.name }),
1500
- modelInfo.provider && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-xs text-[var(--axis-text-tertiary)]", children: modelInfo.provider }),
1501
- 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 })
1502
- ] })
1503
- ] }),
1504
- systemPrompt && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { children: [
1505
- /* @__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" }),
1506
- /* @__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 })
1507
- ] }),
1508
- attachedFiles && attachedFiles.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { children: [
1509
- /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("h5", { className: "text-xs font-medium text-[var(--axis-text-secondary)] mb-1", children: [
1510
- "\uCCA8\uBD80 \uD30C\uC77C (",
1511
- attachedFiles.length,
1512
- ")"
1513
- ] }),
1514
- /* @__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: [
1515
- /* @__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" }) }),
1516
- /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "truncate", children: file })
1517
- ] }, i)) })
1518
- ] }),
1519
- settings && Object.keys(settings).length > 0 && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { children: [
1520
- /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("h5", { className: "text-xs font-medium text-[var(--axis-text-secondary)] mb-1", children: "\uC124\uC815" }),
1521
- /* @__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: [
1522
- /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-[var(--axis-text-secondary)]", children: key }),
1523
- /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("code", { className: "font-mono text-[var(--axis-text-primary)]", children: value })
1524
- ] }, key)) })
1525
- ] })
1526
- ] });
1527
- return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
1528
- "div",
1529
- {
1530
- className: (0, import_ui_react16.cn)(
1531
- "rounded-lg border p-3",
1532
- "bg-[var(--axis-surface-secondary)] border-[var(--axis-border-default)]",
1533
- className
1534
- ),
1535
- children: collapsible ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
1536
- /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
1537
- "button",
1538
- {
1539
- onClick: () => setIsExpanded(!isExpanded),
1540
- "aria-expanded": isExpanded,
1541
- "aria-controls": contentId,
1542
- className: "w-full flex items-center justify-between hover:opacity-80 transition-opacity",
1543
- children: [
1544
- header,
1545
- /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
1546
- "svg",
1547
- {
1548
- className: (0, import_ui_react16.cn)(
1549
- "w-4 h-4 text-[var(--axis-text-secondary)] transition-transform",
1550
- isExpanded && "rotate-180"
1551
- ),
1552
- fill: "none",
1553
- stroke: "currentColor",
1554
- viewBox: "0 0 24 24",
1555
- "aria-hidden": "true",
1556
- children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" })
1557
- }
1558
- )
1559
- ]
1560
- }
1561
- ),
1562
- isExpanded && content
1563
- ] }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
1564
- header,
1565
- content
1566
- ] })
1567
- }
1568
- );
1569
- }
1570
-
1571
- // src/token-usage-indicator/index.tsx
1572
- var import_ui_react17 = require("@axis-ds/ui-react");
1573
- var import_jsx_runtime17 = require("react/jsx-runtime");
1574
- function TokenUsageIndicator({
1575
- current,
1576
- max,
1577
- cost,
1578
- warningThreshold = 0.8,
1579
- compact = false,
1580
- className
1581
- }) {
1582
- const ratio = max > 0 ? current / max : 0;
1583
- const percentage = Math.min(Math.round(ratio * 100), 100);
1584
- const getColor = () => {
1585
- if (ratio >= 1) return "bg-[var(--axis-status-error)]";
1586
- if (ratio >= warningThreshold) return "bg-[var(--axis-status-warning)]";
1587
- return "bg-[var(--axis-status-success)]";
1588
- };
1589
- const getTextColor = () => {
1590
- if (ratio >= 1) return "text-[var(--axis-status-error)]";
1591
- if (ratio >= warningThreshold) return "text-[var(--axis-status-warning)]";
1592
- return "text-[var(--axis-text-secondary)]";
1593
- };
1594
- const formatNumber = (n) => n >= 1e3 ? `${(n / 1e3).toFixed(1)}k` : String(n);
1595
- if (compact) {
1596
- return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
1597
- "span",
1598
- {
1599
- role: "meter",
1600
- "aria-valuenow": current,
1601
- "aria-valuemin": 0,
1602
- "aria-valuemax": max,
1603
- "aria-label": `\uD1A0\uD070 \uC0AC\uC6A9\uB7C9: ${current} / ${max}`,
1604
- className: (0, import_ui_react17.cn)("inline-flex items-center gap-1 text-xs", getTextColor(), className),
1605
- children: [
1606
- /* @__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" }) }),
1607
- formatNumber(current),
1608
- "/",
1609
- formatNumber(max),
1610
- cost !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: "text-[var(--axis-text-tertiary)]", children: [
1611
- "($",
1612
- cost.toFixed(4),
1613
- ")"
1614
- ] })
1615
- ]
1616
- }
1617
- );
1618
- }
1619
- return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
1620
- "div",
1621
- {
1622
- role: "meter",
1623
- "aria-valuenow": current,
1624
- "aria-valuemin": 0,
1625
- "aria-valuemax": max,
1626
- "aria-label": `\uD1A0\uD070 \uC0AC\uC6A9\uB7C9: ${current} / ${max} (${percentage}%)`,
1627
- className: (0, import_ui_react17.cn)("space-y-1", className),
1628
- children: [
1629
- /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex items-center justify-between text-xs", children: [
1630
- /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "text-[var(--axis-text-secondary)]", children: "\uD1A0\uD070 \uC0AC\uC6A9\uB7C9" }),
1631
- /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: getTextColor(), children: [
1632
- formatNumber(current),
1633
- " / ",
1634
- formatNumber(max)
1635
- ] })
1636
- ] }),
1637
- /* @__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)(
1638
- "div",
1639
- {
1640
- className: (0, import_ui_react17.cn)("h-full rounded-full transition-all", getColor()),
1641
- style: { width: `${percentage}%` },
1642
- "aria-hidden": "true"
1643
- }
1644
- ) }),
1645
- cost !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "text-xs text-[var(--axis-text-tertiary)] text-right", children: [
1646
- "$",
1647
- cost.toFixed(4)
1648
- ] })
1649
- ]
1650
- }
1651
- );
1652
- }
1653
-
1654
- // src/attachment-card/index.tsx
1655
- var import_ui_react18 = require("@axis-ds/ui-react");
1656
- var import_jsx_runtime18 = require("react/jsx-runtime");
1657
- var typeIcons = {
1658
- 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" }) }),
1659
- 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" }) }),
1660
- 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" }) }),
1661
- 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" }) }),
1662
- 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" }) })
1663
- };
1664
- var formatFileSize = (bytes) => {
1665
- if (bytes < 1024) return `${bytes} B`;
1666
- if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
1667
- return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
1668
- };
1669
- function AttachmentCard({
1670
- type,
1671
- name,
1672
- size,
1673
- url,
1674
- thumbnail,
1675
- status = "complete",
1676
- progress,
1677
- onRemove,
1678
- className
1679
- }) {
1680
- const typeLabel = ATTACHMENT_TYPE_LABELS[type];
1681
- return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
1682
- "div",
1683
- {
1684
- role: "article",
1685
- "aria-label": `${typeLabel}: ${name}`,
1686
- className: (0, import_ui_react18.cn)(
1687
- "flex items-center gap-3 rounded-lg border p-3",
1688
- "bg-[var(--axis-surface-default)] border-[var(--axis-border-default)]",
1689
- status === "error" && "border-[var(--axis-status-error-border)]",
1690
- className
1691
- ),
1692
- children: [
1693
- thumbnail ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
1694
- "img",
1695
- {
1696
- src: thumbnail,
1697
- alt: "",
1698
- "aria-hidden": "true",
1699
- className: "w-10 h-10 rounded object-cover flex-shrink-0"
1700
- }
1701
- ) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
1702
- "div",
1703
- {
1704
- className: "w-10 h-10 rounded flex items-center justify-center flex-shrink-0 bg-[var(--axis-surface-secondary)] text-[var(--axis-icon-secondary)]",
1705
- "aria-hidden": "true",
1706
- children: typeIcons[type]
1707
- }
1708
- ),
1709
- /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex-1 min-w-0", children: [
1710
- /* @__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)(
1711
- "a",
1712
- {
1713
- href: url,
1714
- target: "_blank",
1715
- rel: "noopener noreferrer",
1716
- className: "hover:underline",
1717
- "aria-label": `${name} (\uC0C8 \uCC3D\uC5D0\uC11C \uC5F4\uB9BC)`,
1718
- children: name
1719
- }
1720
- ) : name }),
1721
- /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex items-center gap-2 text-xs text-[var(--axis-text-tertiary)]", children: [
1722
- /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { children: typeLabel }),
1723
- size !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
1724
- /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { "aria-hidden": "true", children: "\xB7" }),
1725
- /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { children: formatFileSize(size) })
1726
- ] }),
1727
- status === "error" && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "text-[var(--axis-text-error)]", children: "\uC5C5\uB85C\uB4DC \uC2E4\uD328" })
1728
- ] }),
1729
- 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)(
1730
- "div",
1731
- {
1732
- className: "h-full rounded-full bg-[var(--axis-status-running)] transition-all",
1733
- style: { width: `${progress}%` },
1734
- role: "progressbar",
1735
- "aria-valuenow": progress,
1736
- "aria-valuemin": 0,
1737
- "aria-valuemax": 100,
1738
- "aria-label": "\uC5C5\uB85C\uB4DC \uC9C4\uD589\uB960"
1739
- }
1740
- ) })
1741
- ] }),
1742
- onRemove && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
1743
- "button",
1744
- {
1745
- onClick: onRemove,
1746
- "aria-label": `${name} \uC0AD\uC81C`,
1747
- 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",
1748
- 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" }) })
1749
- }
1750
- )
1751
- ]
1752
- }
1753
- );
1754
- }
41
+ var import_run_progress = require("./run-progress/index.js");
42
+ var import_step_timeline = require("./step-timeline/index.js");
43
+ var import_thinking_indicator = require("./thinking-indicator/index.js");
44
+ var import_approval_card = require("./approval-card/index.js");
45
+ var import_source_panel = require("./source-panel/index.js");
46
+ var import_streaming_text = require("./streaming-text/index.js");
47
+ var import_tool_call_card = require("./tool-call-card/index.js");
48
+ var import_surface_renderer = require("./surface-renderer/index.js");
49
+ var import_recovery_banner = require("./recovery-banner/index.js");
50
+ var import_agent_avatar = require("./agent-avatar/index.js");
51
+ var import_message_bubble = require("./message-bubble/index.js");
52
+ var import_feedback_buttons = require("./feedback-buttons/index.js");
53
+ var import_code_block = require("./code-block/index.js");
54
+ var import_diff_viewer = require("./diff-viewer/index.js");
55
+ var import_plan_card = require("./plan-card/index.js");
56
+ var import_context_panel = require("./context-panel/index.js");
57
+ var import_token_usage_indicator = require("./token-usage-indicator/index.js");
58
+ var import_attachment_card = require("./attachment-card/index.js");
1755
59
  // Annotate the CommonJS export names for ESM import in node:
1756
60
  0 && (module.exports = {
1757
61
  AgentAvatar,