@ash-cloud/ash-ui 0.0.1

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.
package/dist/index.cjs ADDED
@@ -0,0 +1,2430 @@
1
+ 'use strict';
2
+
3
+ var react = require('react');
4
+ var jsxRuntime = require('react/jsx-runtime');
5
+ var ReactMarkdown = require('react-markdown');
6
+
7
+ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
8
+
9
+ var ReactMarkdown__default = /*#__PURE__*/_interopDefault(ReactMarkdown);
10
+
11
+ // src/components/ToolCallCard.tsx
12
+
13
+ // src/utils.ts
14
+ function formatToolName(name) {
15
+ if (name.startsWith("mcp__")) {
16
+ const parts = name.split("__");
17
+ if (parts.length >= 3) {
18
+ return `mcp:${parts[1]}:${parts.slice(2).join(":")}`;
19
+ }
20
+ }
21
+ return name;
22
+ }
23
+ function parseMcpToolName(name) {
24
+ if (name.startsWith("mcp__")) {
25
+ const parts = name.split("__");
26
+ if (parts.length >= 3 && parts[1] !== void 0) {
27
+ return {
28
+ serverName: parts[1],
29
+ toolName: parts.slice(2).join("__")
30
+ };
31
+ }
32
+ }
33
+ return null;
34
+ }
35
+ function mapToolToActionType(toolName, input) {
36
+ const inputObj = input || {};
37
+ switch (toolName) {
38
+ case "Bash":
39
+ return {
40
+ action: "command_run",
41
+ command: inputObj.command || "",
42
+ description: inputObj.description
43
+ };
44
+ case "Read":
45
+ return {
46
+ action: "file_read",
47
+ path: inputObj.file_path || "",
48
+ offset: inputObj.offset,
49
+ limit: inputObj.limit
50
+ };
51
+ case "Edit":
52
+ return {
53
+ action: "file_edit",
54
+ path: inputObj.file_path || "",
55
+ oldString: inputObj.old_string,
56
+ newString: inputObj.new_string,
57
+ replaceAll: inputObj.replace_all
58
+ };
59
+ case "Write":
60
+ return {
61
+ action: "file_write",
62
+ path: inputObj.file_path || "",
63
+ content: inputObj.content
64
+ };
65
+ case "Grep":
66
+ return {
67
+ action: "search",
68
+ pattern: inputObj.pattern || "",
69
+ path: inputObj.path,
70
+ glob: inputObj.glob,
71
+ type: inputObj.type
72
+ };
73
+ case "Glob":
74
+ return {
75
+ action: "glob",
76
+ pattern: inputObj.pattern || "",
77
+ path: inputObj.path
78
+ };
79
+ case "WebFetch":
80
+ return {
81
+ action: "web_fetch",
82
+ url: inputObj.url || "",
83
+ prompt: inputObj.prompt
84
+ };
85
+ case "WebSearch":
86
+ return {
87
+ action: "web_search",
88
+ query: inputObj.query || ""
89
+ };
90
+ case "TodoWrite": {
91
+ const todos = inputObj.todos || [];
92
+ const stats = {
93
+ total: todos.length,
94
+ completed: todos.filter((t) => t.status === "completed").length,
95
+ inProgress: todos.filter((t) => t.status === "in_progress").length,
96
+ pending: todos.filter((t) => t.status === "pending").length
97
+ };
98
+ return {
99
+ action: "todo_write",
100
+ todos,
101
+ stats
102
+ };
103
+ }
104
+ default: {
105
+ const mcpParts = parseMcpToolName(toolName);
106
+ if (mcpParts) {
107
+ return {
108
+ action: "mcp_tool",
109
+ serverName: mcpParts.serverName,
110
+ toolName: mcpParts.toolName,
111
+ arguments: input
112
+ };
113
+ }
114
+ return {
115
+ action: "generic_tool",
116
+ toolName: formatToolName(toolName),
117
+ arguments: input
118
+ };
119
+ }
120
+ }
121
+ }
122
+ function generateToolSummary(_toolName, _input, actionType) {
123
+ switch (actionType.action) {
124
+ case "command_run": {
125
+ const cmd = actionType.command;
126
+ return cmd.length > 60 ? cmd.substring(0, 57) + "..." : cmd;
127
+ }
128
+ case "file_read":
129
+ return actionType.path;
130
+ case "file_edit":
131
+ return actionType.path;
132
+ case "file_write":
133
+ return actionType.path;
134
+ case "search":
135
+ return `${actionType.pattern}${actionType.path ? ` in ${actionType.path}` : ""}`;
136
+ case "glob":
137
+ return actionType.pattern;
138
+ case "web_fetch":
139
+ return actionType.url;
140
+ case "web_search":
141
+ return actionType.query;
142
+ case "mcp_tool":
143
+ return `${actionType.serverName}:${actionType.toolName}`;
144
+ case "generic_tool":
145
+ return actionType.toolName;
146
+ case "todo_write": {
147
+ const { stats } = actionType;
148
+ if (stats) {
149
+ return `${stats.completed}/${stats.total} completed`;
150
+ }
151
+ return `${actionType.todos.length} tasks`;
152
+ }
153
+ default:
154
+ return "Unknown tool";
155
+ }
156
+ }
157
+ function extractTextContent(content) {
158
+ if (typeof content === "string") return content;
159
+ if (Array.isArray(content)) {
160
+ return content.filter((item) => typeof item?.text === "string").map((item) => item.text).join("\n");
161
+ }
162
+ if (content && typeof content === "object" && "text" in content) {
163
+ return String(content.text);
164
+ }
165
+ return JSON.stringify(content, null, 2);
166
+ }
167
+ function normalizeToolResult(content) {
168
+ if (typeof content === "string") {
169
+ try {
170
+ const parsed = JSON.parse(content);
171
+ return { type: "json", value: parsed };
172
+ } catch {
173
+ return { type: "markdown", value: content };
174
+ }
175
+ }
176
+ if (Array.isArray(content)) {
177
+ const texts = content.filter(
178
+ (item) => item?.type === "text" && typeof item.text === "string"
179
+ ).map((item) => item.text);
180
+ if (texts.length > 0) {
181
+ const joined = texts.join("\n\n");
182
+ try {
183
+ return { type: "json", value: JSON.parse(joined) };
184
+ } catch {
185
+ return { type: "markdown", value: joined };
186
+ }
187
+ }
188
+ }
189
+ return { type: "json", value: content };
190
+ }
191
+ function parseCommandResult(content) {
192
+ const output = extractTextContent(content);
193
+ if (typeof content === "string") {
194
+ try {
195
+ const parsed = JSON.parse(content);
196
+ if (typeof parsed.exitCode === "number") {
197
+ return {
198
+ exitCode: parsed.exitCode,
199
+ output: parsed.output || output,
200
+ success: parsed.exitCode === 0
201
+ };
202
+ }
203
+ } catch {
204
+ }
205
+ }
206
+ return {
207
+ output,
208
+ success: true
209
+ };
210
+ }
211
+ function createToolCall(toolUse) {
212
+ const actionType = mapToolToActionType(toolUse.name, toolUse.input);
213
+ const summary = generateToolSummary(toolUse.name, toolUse.input, actionType);
214
+ return {
215
+ id: toolUse.id,
216
+ toolName: toolUse.name,
217
+ actionType,
218
+ status: "pending",
219
+ summary,
220
+ startedAt: (/* @__PURE__ */ new Date()).toISOString()
221
+ };
222
+ }
223
+ function updateToolCallWithResult(toolCall, content, isError) {
224
+ const updatedToolCall = { ...toolCall };
225
+ const actionType = { ...toolCall.actionType };
226
+ updatedToolCall.status = isError ? "failed" : "success";
227
+ updatedToolCall.completedAt = (/* @__PURE__ */ new Date()).toISOString();
228
+ updatedToolCall.isError = isError;
229
+ if (actionType.action === "command_run") {
230
+ const result = parseCommandResult(content);
231
+ actionType.result = result;
232
+ if (result.exitCode !== void 0 && result.exitCode !== 0) {
233
+ updatedToolCall.status = "failed";
234
+ updatedToolCall.isError = true;
235
+ }
236
+ } else if (actionType.action === "mcp_tool" || actionType.action === "generic_tool") {
237
+ actionType.result = normalizeToolResult(content);
238
+ }
239
+ updatedToolCall.actionType = actionType;
240
+ return updatedToolCall;
241
+ }
242
+ function getActionIcon(actionType) {
243
+ switch (actionType.action) {
244
+ case "command_run":
245
+ return "terminal";
246
+ case "file_read":
247
+ return "file-text";
248
+ case "file_edit":
249
+ return "edit";
250
+ case "file_write":
251
+ return "file-plus";
252
+ case "search":
253
+ return "search";
254
+ case "glob":
255
+ return "folder-search";
256
+ case "web_fetch":
257
+ return "globe";
258
+ case "web_search":
259
+ return "search";
260
+ case "mcp_tool":
261
+ return "plug";
262
+ case "generic_tool":
263
+ return "tool";
264
+ case "todo_write":
265
+ return "list-checks";
266
+ default:
267
+ return "tool";
268
+ }
269
+ }
270
+ function getActionLabel(actionType) {
271
+ switch (actionType.action) {
272
+ case "command_run":
273
+ return "Command";
274
+ case "file_read":
275
+ return "Read";
276
+ case "file_edit":
277
+ return "Edit";
278
+ case "file_write":
279
+ return "Write";
280
+ case "search":
281
+ return "Search";
282
+ case "glob":
283
+ return "Glob";
284
+ case "web_fetch":
285
+ return "Fetch";
286
+ case "web_search":
287
+ return "Search";
288
+ case "mcp_tool":
289
+ return "MCP";
290
+ case "generic_tool":
291
+ return "Tool";
292
+ case "todo_write":
293
+ return "Tasks";
294
+ default:
295
+ return "Tool";
296
+ }
297
+ }
298
+ function formatFileSize(bytes) {
299
+ if (bytes < 1024) return `${bytes} B`;
300
+ if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
301
+ return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
302
+ }
303
+ function formatTimestamp(timestamp) {
304
+ try {
305
+ const date = new Date(timestamp);
306
+ return date.toLocaleTimeString("en-US", {
307
+ hour: "2-digit",
308
+ minute: "2-digit",
309
+ second: "2-digit",
310
+ hour12: false
311
+ });
312
+ } catch {
313
+ return timestamp;
314
+ }
315
+ }
316
+ function truncate(str, maxLength) {
317
+ if (str.length <= maxLength) return str;
318
+ return str.substring(0, maxLength - 3) + "...";
319
+ }
320
+ function cn(...classes) {
321
+ return classes.filter(Boolean).join(" ");
322
+ }
323
+ function groupEntriesForCompactMode(entries, config) {
324
+ const result = [];
325
+ let currentToolGroup = [];
326
+ let toolGroupCounter = 0;
327
+ const flushToolGroup = () => {
328
+ if (currentToolGroup.length > 0) {
329
+ result.push({
330
+ type: "tool_group",
331
+ entries: [...currentToolGroup],
332
+ id: `tool-group-${toolGroupCounter++}`
333
+ });
334
+ currentToolGroup = [];
335
+ }
336
+ };
337
+ for (const entry of entries) {
338
+ if (entry.entryType.type === "tool_call") {
339
+ currentToolGroup.push(entry);
340
+ if (config.breakEveryNToolCalls && config.breakEveryNToolCalls > 0 && currentToolGroup.length >= config.breakEveryNToolCalls) {
341
+ flushToolGroup();
342
+ }
343
+ } else {
344
+ flushToolGroup();
345
+ result.push({ type: "single", entry });
346
+ }
347
+ }
348
+ flushToolGroup();
349
+ return result;
350
+ }
351
+ function extractToolCallsFromGroup(entries) {
352
+ return entries.filter(
353
+ (e) => e.entryType.type === "tool_call"
354
+ ).map((e) => e.entryType.toolCall);
355
+ }
356
+ function parseOptionsFromContent(content) {
357
+ const optionPattern = /(?:\*\*)?Option\s+(\d+)(?:\*\*)?[:\-]\s*([^\n]+)(?:\n((?:(?!\n(?:\*\*)?Option\s+\d).)*?))?/gi;
358
+ const options = [];
359
+ let firstMatchStart = -1;
360
+ let match;
361
+ optionPattern.lastIndex = 0;
362
+ while ((match = optionPattern.exec(content)) !== null) {
363
+ if (firstMatchStart === -1) {
364
+ firstMatchStart = match.index;
365
+ }
366
+ const id = match[1] ?? "";
367
+ const labelRaw = match[2];
368
+ const label = labelRaw ? labelRaw.trim() : "";
369
+ const descriptionRaw = match[3];
370
+ let description;
371
+ if (descriptionRaw) {
372
+ const cleaned = descriptionRaw.split("\n").map((line) => line.trim()).filter((line) => line.length > 0).join(" ");
373
+ if (cleaned) {
374
+ description = cleaned;
375
+ }
376
+ }
377
+ options.push({ id, label, description });
378
+ }
379
+ if (options.length >= 2) {
380
+ const preamble = firstMatchStart > 0 ? content.substring(0, firstMatchStart).trim() : "";
381
+ return { preamble, options };
382
+ }
383
+ const questionPattern = /^(.*?(?:what would you like to do\??|choose an option|select.*?:|here are your options.*?:))\s*\n+((?:\d+\.\s+.+\n?)+)/ims;
384
+ const questionMatch = content.match(questionPattern);
385
+ if (questionMatch && questionMatch[1] && questionMatch[2]) {
386
+ const preamble = questionMatch[1].trim();
387
+ const listSection = questionMatch[2];
388
+ const listPattern = /(\d+)\.\s+([^\n]+)/g;
389
+ let listMatch;
390
+ while ((listMatch = listPattern.exec(listSection)) !== null) {
391
+ const listId = listMatch[1] ?? "";
392
+ const listLabelRaw = listMatch[2];
393
+ const listLabel = listLabelRaw ? listLabelRaw.trim() : "";
394
+ options.push({
395
+ id: listId,
396
+ label: listLabel
397
+ });
398
+ }
399
+ if (options.length >= 2) {
400
+ return { preamble, options };
401
+ }
402
+ }
403
+ return null;
404
+ }
405
+ function SunIcon({ className }) {
406
+ return /* @__PURE__ */ jsxRuntime.jsxs("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
407
+ /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "5" }),
408
+ /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "1", x2: "12", y2: "3" }),
409
+ /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "21", x2: "12", y2: "23" }),
410
+ /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "4.22", y1: "4.22", x2: "5.64", y2: "5.64" }),
411
+ /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "18.36", y1: "18.36", x2: "19.78", y2: "19.78" }),
412
+ /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "1", y1: "12", x2: "3", y2: "12" }),
413
+ /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "21", y1: "12", x2: "23", y2: "12" }),
414
+ /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "4.22", y1: "19.78", x2: "5.64", y2: "18.36" }),
415
+ /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "18.36", y1: "5.64", x2: "19.78", y2: "4.22" })
416
+ ] });
417
+ }
418
+ function MoonIcon({ className }) {
419
+ return /* @__PURE__ */ jsxRuntime.jsx("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" }) });
420
+ }
421
+ function ChevronDownIcon({ className }) {
422
+ return /* @__PURE__ */ jsxRuntime.jsx("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "6 9 12 15 18 9" }) });
423
+ }
424
+ function ChevronRightIcon({ className }) {
425
+ return /* @__PURE__ */ jsxRuntime.jsx("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "9 18 15 12 9 6" }) });
426
+ }
427
+ function ChevronLeftIcon({ className }) {
428
+ return /* @__PURE__ */ jsxRuntime.jsx("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "15 18 9 12 15 6" }) });
429
+ }
430
+ function ChevronUpIcon({ className }) {
431
+ return /* @__PURE__ */ jsxRuntime.jsx("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "18 15 12 9 6 15" }) });
432
+ }
433
+ function TerminalIcon({ className }) {
434
+ return /* @__PURE__ */ jsxRuntime.jsxs("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
435
+ /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "4 17 10 11 4 5" }),
436
+ /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "19", x2: "20", y2: "19" })
437
+ ] });
438
+ }
439
+ function FileIcon({ className }) {
440
+ return /* @__PURE__ */ jsxRuntime.jsxs("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
441
+ /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
442
+ /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "14 2 14 8 20 8" }),
443
+ /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "16", y1: "13", x2: "8", y2: "13" }),
444
+ /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "16", y1: "17", x2: "8", y2: "17" })
445
+ ] });
446
+ }
447
+ function EditIcon({ className }) {
448
+ return /* @__PURE__ */ jsxRuntime.jsxs("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
449
+ /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" }),
450
+ /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" })
451
+ ] });
452
+ }
453
+ function FilePlusIcon({ className }) {
454
+ return /* @__PURE__ */ jsxRuntime.jsxs("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
455
+ /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
456
+ /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "14 2 14 8 20 8" }),
457
+ /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "18", x2: "12", y2: "12" }),
458
+ /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "9", y1: "15", x2: "15", y2: "15" })
459
+ ] });
460
+ }
461
+ function SearchIcon({ className }) {
462
+ return /* @__PURE__ */ jsxRuntime.jsxs("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
463
+ /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "11", cy: "11", r: "8" }),
464
+ /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })
465
+ ] });
466
+ }
467
+ function GlobeIcon({ className }) {
468
+ return /* @__PURE__ */ jsxRuntime.jsxs("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
469
+ /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" }),
470
+ /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "2", y1: "12", x2: "22", y2: "12" }),
471
+ /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" })
472
+ ] });
473
+ }
474
+ function PlugIcon({ className }) {
475
+ return /* @__PURE__ */ jsxRuntime.jsxs("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
476
+ /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 2v6" }),
477
+ /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 6v4a6 6 0 0 0 12 0V6" }),
478
+ /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 16v6" })
479
+ ] });
480
+ }
481
+ function ToolIcon({ className }) {
482
+ return /* @__PURE__ */ jsxRuntime.jsx("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z" }) });
483
+ }
484
+ function FolderSearchIcon({ className }) {
485
+ return /* @__PURE__ */ jsxRuntime.jsxs("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
486
+ /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" }),
487
+ /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "11", cy: "13", r: "3" }),
488
+ /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "15", y1: "16", x2: "17", y2: "18" })
489
+ ] });
490
+ }
491
+ function CodeIcon({ className }) {
492
+ return /* @__PURE__ */ jsxRuntime.jsxs("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
493
+ /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "16 18 22 12 16 6" }),
494
+ /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "8 6 2 12 8 18" })
495
+ ] });
496
+ }
497
+ function CopyIcon({ className }) {
498
+ return /* @__PURE__ */ jsxRuntime.jsxs("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
499
+ /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }),
500
+ /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })
501
+ ] });
502
+ }
503
+ function CheckIcon({ className }) {
504
+ return /* @__PURE__ */ jsxRuntime.jsx("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "20 6 9 17 4 12" }) });
505
+ }
506
+ function XIcon({ className }) {
507
+ return /* @__PURE__ */ jsxRuntime.jsxs("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
508
+ /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
509
+ /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
510
+ ] });
511
+ }
512
+ function LoaderIcon({ className }) {
513
+ return /* @__PURE__ */ jsxRuntime.jsxs("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
514
+ /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "2", x2: "12", y2: "6" }),
515
+ /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "18", x2: "12", y2: "22" }),
516
+ /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "4.93", y1: "4.93", x2: "7.76", y2: "7.76" }),
517
+ /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "16.24", y1: "16.24", x2: "19.07", y2: "19.07" }),
518
+ /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "2", y1: "12", x2: "6", y2: "12" }),
519
+ /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "18", y1: "12", x2: "22", y2: "12" }),
520
+ /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "4.93", y1: "19.07", x2: "7.76", y2: "16.24" }),
521
+ /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "16.24", y1: "7.76", x2: "19.07", y2: "4.93" })
522
+ ] });
523
+ }
524
+ function InfoIcon({ className }) {
525
+ return /* @__PURE__ */ jsxRuntime.jsxs("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
526
+ /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" }),
527
+ /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "16", x2: "12", y2: "12" }),
528
+ /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "8", x2: "12.01", y2: "8" })
529
+ ] });
530
+ }
531
+ function AlertTriangleIcon({ className }) {
532
+ return /* @__PURE__ */ jsxRuntime.jsxs("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
533
+ /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" }),
534
+ /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "9", x2: "12", y2: "13" }),
535
+ /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })
536
+ ] });
537
+ }
538
+ function AlertCircleIcon({ className }) {
539
+ return /* @__PURE__ */ jsxRuntime.jsxs("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
540
+ /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" }),
541
+ /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
542
+ /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })
543
+ ] });
544
+ }
545
+ function BugIcon({ className }) {
546
+ return /* @__PURE__ */ jsxRuntime.jsxs("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
547
+ /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "8", y: "6", width: "8", height: "14", rx: "4" }),
548
+ /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 10h2" }),
549
+ /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 10h2" }),
550
+ /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 14h2" }),
551
+ /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 14h2" }),
552
+ /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 2h6" }),
553
+ /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 2v4" })
554
+ ] });
555
+ }
556
+ function CheckCircleIcon({ className }) {
557
+ return /* @__PURE__ */ jsxRuntime.jsxs("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
558
+ /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" }),
559
+ /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 12l2 2 4-4" })
560
+ ] });
561
+ }
562
+ function XCircleIcon({ className }) {
563
+ return /* @__PURE__ */ jsxRuntime.jsxs("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
564
+ /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" }),
565
+ /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "15", y1: "9", x2: "9", y2: "15" }),
566
+ /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "9", y1: "9", x2: "15", y2: "15" })
567
+ ] });
568
+ }
569
+ function SendIcon({ className }) {
570
+ return /* @__PURE__ */ jsxRuntime.jsxs("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
571
+ /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "22", y1: "2", x2: "11", y2: "13" }),
572
+ /* @__PURE__ */ jsxRuntime.jsx("polygon", { points: "22 2 15 22 11 13 2 9 22 2" })
573
+ ] });
574
+ }
575
+ function PaperclipIcon({ className }) {
576
+ return /* @__PURE__ */ jsxRuntime.jsx("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48" }) });
577
+ }
578
+ function StopCircleIcon({ className }) {
579
+ return /* @__PURE__ */ jsxRuntime.jsxs("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
580
+ /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" }),
581
+ /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "9", y: "9", width: "6", height: "6" })
582
+ ] });
583
+ }
584
+ function MessageSquareIcon({ className }) {
585
+ return /* @__PURE__ */ jsxRuntime.jsx("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" }) });
586
+ }
587
+ function SparklesIcon({ className }) {
588
+ return /* @__PURE__ */ jsxRuntime.jsxs("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
589
+ /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 3l1.5 4.5L18 9l-4.5 1.5L12 15l-1.5-4.5L6 9l4.5-1.5L12 3z" }),
590
+ /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 19l.5 1.5L7 21l-1.5.5L5 23l-.5-1.5L3 21l1.5-.5L5 19z" }),
591
+ /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 11l.5 1.5L21 13l-1.5.5L19 15l-.5-1.5L17 13l1.5-.5L19 11z" })
592
+ ] });
593
+ }
594
+ function BrainIcon({ className }) {
595
+ return /* @__PURE__ */ jsxRuntime.jsxs("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
596
+ /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9.5 2A2.5 2.5 0 0 1 12 4.5v15a2.5 2.5 0 0 1-4.96.44 2.5 2.5 0 0 1-2.96-3.08 3 3 0 0 1-.34-5.58 2.5 2.5 0 0 1 1.32-4.24 2.5 2.5 0 0 1 4.44-1.54" }),
597
+ /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M14.5 2A2.5 2.5 0 0 0 12 4.5v15a2.5 2.5 0 0 0 4.96.44 2.5 2.5 0 0 0 2.96-3.08 3 3 0 0 0 .34-5.58 2.5 2.5 0 0 0-1.32-4.24 2.5 2.5 0 0 0-4.44-1.54" })
598
+ ] });
599
+ }
600
+ function BotIcon({ className }) {
601
+ return /* @__PURE__ */ jsxRuntime.jsxs("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
602
+ /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 8V4H8" }),
603
+ /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "5", y: "8", width: "14", height: "12", rx: "2" }),
604
+ /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M2 14h2" }),
605
+ /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 14h2" }),
606
+ /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 13v2" }),
607
+ /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M15 13v2" })
608
+ ] });
609
+ }
610
+ function UserIcon({ className }) {
611
+ return /* @__PURE__ */ jsxRuntime.jsxs("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
612
+ /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" }),
613
+ /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "7", r: "4" })
614
+ ] });
615
+ }
616
+ function CircleIcon({ className }) {
617
+ return /* @__PURE__ */ jsxRuntime.jsx("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" }) });
618
+ }
619
+ function ListChecksIcon({ className }) {
620
+ return /* @__PURE__ */ jsxRuntime.jsxs("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
621
+ /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10 6h11" }),
622
+ /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10 12h11" }),
623
+ /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10 18h11" }),
624
+ /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 6l2 2 4-4" }),
625
+ /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 12l2 2 4-4" }),
626
+ /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 18l2 2 4-4" })
627
+ ] });
628
+ }
629
+ function ClipboardListIcon({ className }) {
630
+ return /* @__PURE__ */ jsxRuntime.jsxs("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
631
+ /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "8", y: "2", width: "8", height: "4", rx: "1", ry: "1" }),
632
+ /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2" }),
633
+ /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 11h4" }),
634
+ /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 16h4" }),
635
+ /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 11h.01" }),
636
+ /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 16h.01" })
637
+ ] });
638
+ }
639
+ function StatusIndicator({ status, size = "sm", className }) {
640
+ const sizeClasses = {
641
+ sm: "w-2 h-2",
642
+ md: "w-3 h-3",
643
+ lg: "w-4 h-4"
644
+ };
645
+ const statusClasses = {
646
+ pending: "ash-status-pending",
647
+ success: "ash-status-success",
648
+ failed: "ash-status-failed"
649
+ };
650
+ return /* @__PURE__ */ jsxRuntime.jsx(
651
+ "div",
652
+ {
653
+ className: cn(
654
+ "rounded-full flex-shrink-0",
655
+ sizeClasses[size],
656
+ statusClasses[status],
657
+ className
658
+ )
659
+ }
660
+ );
661
+ }
662
+ function ActionIcon({ actionType, className = "w-4 h-4" }) {
663
+ switch (actionType.action) {
664
+ case "command_run":
665
+ return /* @__PURE__ */ jsxRuntime.jsx(TerminalIcon, { className });
666
+ case "file_read":
667
+ return /* @__PURE__ */ jsxRuntime.jsx(FileIcon, { className });
668
+ case "file_edit":
669
+ return /* @__PURE__ */ jsxRuntime.jsx(EditIcon, { className });
670
+ case "file_write":
671
+ return /* @__PURE__ */ jsxRuntime.jsx(FilePlusIcon, { className });
672
+ case "search":
673
+ return /* @__PURE__ */ jsxRuntime.jsx(SearchIcon, { className });
674
+ case "glob":
675
+ return /* @__PURE__ */ jsxRuntime.jsx(FolderSearchIcon, { className });
676
+ case "web_fetch":
677
+ return /* @__PURE__ */ jsxRuntime.jsx(GlobeIcon, { className });
678
+ case "web_search":
679
+ return /* @__PURE__ */ jsxRuntime.jsx(SearchIcon, { className });
680
+ case "mcp_tool":
681
+ return /* @__PURE__ */ jsxRuntime.jsx(PlugIcon, { className });
682
+ case "todo_write":
683
+ return /* @__PURE__ */ jsxRuntime.jsx(ListChecksIcon, { className });
684
+ case "generic_tool":
685
+ default:
686
+ return /* @__PURE__ */ jsxRuntime.jsx(ToolIcon, { className });
687
+ }
688
+ }
689
+ function CodeBlock({
690
+ children,
691
+ maxHeight = 200,
692
+ language,
693
+ showLineNumbers = false,
694
+ className
695
+ }) {
696
+ const [expanded, setExpanded] = react.useState(false);
697
+ const lines = children.split("\n");
698
+ const isLong = lines.length > 10 || children.length > 500;
699
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative", className), children: [
700
+ /* @__PURE__ */ jsxRuntime.jsx(
701
+ "pre",
702
+ {
703
+ className: cn(
704
+ "ash-tool-code-block text-xs font-mono text-white/90 p-3 rounded-xl overflow-x-auto whitespace-pre-wrap break-words",
705
+ !expanded && isLong && "overflow-y-hidden"
706
+ ),
707
+ style: !expanded && isLong ? { maxHeight } : void 0,
708
+ "data-language": language,
709
+ children: showLineNumbers ? /* @__PURE__ */ jsxRuntime.jsx("code", { children: lines.map((line, i) => /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "block", children: [
710
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-block w-8 text-white/30 select-none text-right pr-2", children: i + 1 }),
711
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-white/80", children: line })
712
+ ] }, i)) }) : /* @__PURE__ */ jsxRuntime.jsx("code", { className: "text-white/80", children })
713
+ }
714
+ ),
715
+ isLong && !expanded && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-0 left-0 right-0 h-12 ash-truncate-fade flex items-end justify-center pb-2", children: /* @__PURE__ */ jsxRuntime.jsx(
716
+ "button",
717
+ {
718
+ onClick: () => setExpanded(true),
719
+ className: "text-xs text-[var(--ash-accent)] hover:text-[var(--ash-accent-300)] font-medium transition-colors",
720
+ children: "Show more"
721
+ }
722
+ ) }),
723
+ isLong && expanded && /* @__PURE__ */ jsxRuntime.jsx(
724
+ "button",
725
+ {
726
+ onClick: () => setExpanded(false),
727
+ className: "text-xs text-[var(--ash-accent)] hover:text-[var(--ash-accent-300)] font-medium mt-2 transition-colors",
728
+ children: "Show less"
729
+ }
730
+ )
731
+ ] });
732
+ }
733
+ function JsonDisplay({ value, maxHeight, className }) {
734
+ const formatted = JSON.stringify(value, null, 2);
735
+ return /* @__PURE__ */ jsxRuntime.jsx(CodeBlock, { maxHeight, className, children: formatted });
736
+ }
737
+ function SectionHeader({ children }) {
738
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ash-tool-section-header", children });
739
+ }
740
+ function SectionContent({ children }) {
741
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 py-2", children });
742
+ }
743
+ function CommandRunDetails({ action }) {
744
+ return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
745
+ action.command && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
746
+ /* @__PURE__ */ jsxRuntime.jsx(SectionHeader, { children: "COMMAND" }),
747
+ /* @__PURE__ */ jsxRuntime.jsx(SectionContent, { children: /* @__PURE__ */ jsxRuntime.jsx(CodeBlock, { children: action.command }) })
748
+ ] }),
749
+ action.result?.output && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
750
+ /* @__PURE__ */ jsxRuntime.jsx(SectionHeader, { children: "OUTPUT" }),
751
+ /* @__PURE__ */ jsxRuntime.jsxs(SectionContent, { children: [
752
+ /* @__PURE__ */ jsxRuntime.jsx(CodeBlock, { maxHeight: 300, children: action.result.output }),
753
+ action.result.exitCode !== void 0 && action.result.exitCode !== 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2 text-xs text-red-400", children: [
754
+ "Exit code: ",
755
+ action.result.exitCode
756
+ ] })
757
+ ] })
758
+ ] })
759
+ ] });
760
+ }
761
+ function FileReadDetails({ action }) {
762
+ return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
763
+ /* @__PURE__ */ jsxRuntime.jsx(SectionHeader, { children: "PATH" }),
764
+ /* @__PURE__ */ jsxRuntime.jsxs(SectionContent, { children: [
765
+ /* @__PURE__ */ jsxRuntime.jsx("code", { className: "text-xs font-mono bg-white/10 text-white/90 px-1 py-0.5 rounded", children: action.path }),
766
+ (action.offset !== void 0 || action.limit !== void 0) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-1 text-xs text-white/50", children: [
767
+ action.offset !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
768
+ "Offset: ",
769
+ action.offset
770
+ ] }),
771
+ action.offset !== void 0 && action.limit !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { children: " \xB7 " }),
772
+ action.limit !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
773
+ "Limit: ",
774
+ action.limit
775
+ ] })
776
+ ] })
777
+ ] })
778
+ ] });
779
+ }
780
+ function FileEditDetails({ action }) {
781
+ return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
782
+ /* @__PURE__ */ jsxRuntime.jsx(SectionHeader, { children: "PATH" }),
783
+ /* @__PURE__ */ jsxRuntime.jsx(SectionContent, { children: /* @__PURE__ */ jsxRuntime.jsx("code", { className: "text-xs font-mono bg-white/10 text-white/90 px-1 py-0.5 rounded", children: action.path }) }),
784
+ action.oldString && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
785
+ /* @__PURE__ */ jsxRuntime.jsx(SectionHeader, { children: "OLD" }),
786
+ /* @__PURE__ */ jsxRuntime.jsx(SectionContent, { children: /* @__PURE__ */ jsxRuntime.jsx(CodeBlock, { children: action.oldString }) })
787
+ ] }),
788
+ action.newString && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
789
+ /* @__PURE__ */ jsxRuntime.jsx(SectionHeader, { children: "NEW" }),
790
+ /* @__PURE__ */ jsxRuntime.jsx(SectionContent, { children: /* @__PURE__ */ jsxRuntime.jsx(CodeBlock, { children: action.newString }) })
791
+ ] })
792
+ ] });
793
+ }
794
+ function FileWriteDetails({ action }) {
795
+ return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
796
+ /* @__PURE__ */ jsxRuntime.jsx(SectionHeader, { children: "PATH" }),
797
+ /* @__PURE__ */ jsxRuntime.jsx(SectionContent, { children: /* @__PURE__ */ jsxRuntime.jsx("code", { className: "text-xs font-mono bg-white/10 text-white/90 px-1 py-0.5 rounded", children: action.path }) }),
798
+ action.content && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
799
+ /* @__PURE__ */ jsxRuntime.jsx(SectionHeader, { children: "CONTENT" }),
800
+ /* @__PURE__ */ jsxRuntime.jsx(SectionContent, { children: /* @__PURE__ */ jsxRuntime.jsx(CodeBlock, { maxHeight: 300, children: action.content }) })
801
+ ] })
802
+ ] });
803
+ }
804
+ function SearchDetails({ action }) {
805
+ return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
806
+ /* @__PURE__ */ jsxRuntime.jsx(SectionHeader, { children: "PATTERN" }),
807
+ /* @__PURE__ */ jsxRuntime.jsxs(SectionContent, { children: [
808
+ /* @__PURE__ */ jsxRuntime.jsx("code", { className: "text-xs font-mono bg-white/10 text-white/90 px-1 py-0.5 rounded", children: action.pattern }),
809
+ (action.path || action.glob || action.type) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-1 text-xs text-white/50", children: [
810
+ action.path && /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
811
+ "Path: ",
812
+ action.path
813
+ ] }),
814
+ action.glob && /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
815
+ "Glob: ",
816
+ action.glob
817
+ ] }),
818
+ action.type && /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
819
+ "Type: ",
820
+ action.type
821
+ ] })
822
+ ] })
823
+ ] })
824
+ ] });
825
+ }
826
+ function GlobDetails({ action }) {
827
+ return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
828
+ /* @__PURE__ */ jsxRuntime.jsx(SectionHeader, { children: "PATTERN" }),
829
+ /* @__PURE__ */ jsxRuntime.jsxs(SectionContent, { children: [
830
+ /* @__PURE__ */ jsxRuntime.jsx("code", { className: "text-xs font-mono bg-white/10 text-white/90 px-1 py-0.5 rounded", children: action.pattern }),
831
+ action.path && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-1 text-xs text-white/50", children: [
832
+ "Path: ",
833
+ action.path
834
+ ] })
835
+ ] })
836
+ ] });
837
+ }
838
+ function WebFetchDetails({ action }) {
839
+ return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
840
+ /* @__PURE__ */ jsxRuntime.jsx(SectionHeader, { children: "URL" }),
841
+ /* @__PURE__ */ jsxRuntime.jsxs(SectionContent, { children: [
842
+ /* @__PURE__ */ jsxRuntime.jsx(
843
+ "a",
844
+ {
845
+ href: action.url,
846
+ target: "_blank",
847
+ rel: "noopener noreferrer",
848
+ className: "text-xs text-blue-400 hover:text-blue-300 underline break-all",
849
+ children: action.url
850
+ }
851
+ ),
852
+ action.prompt && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 text-xs text-white/50", children: action.prompt })
853
+ ] })
854
+ ] });
855
+ }
856
+ function WebSearchDetails({ action }) {
857
+ return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
858
+ /* @__PURE__ */ jsxRuntime.jsx(SectionHeader, { children: "QUERY" }),
859
+ /* @__PURE__ */ jsxRuntime.jsx(SectionContent, { children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-white/90", children: action.query }) })
860
+ ] });
861
+ }
862
+ function McpToolDetails({ action }) {
863
+ return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
864
+ /* @__PURE__ */ jsxRuntime.jsx(SectionHeader, { children: "TOOL" }),
865
+ /* @__PURE__ */ jsxRuntime.jsx(SectionContent, { children: /* @__PURE__ */ jsxRuntime.jsxs("code", { className: "text-xs font-mono bg-white/10 text-white/90 px-1 py-0.5 rounded", children: [
866
+ action.serverName,
867
+ ":",
868
+ action.toolName
869
+ ] }) }),
870
+ action.arguments && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
871
+ /* @__PURE__ */ jsxRuntime.jsx(SectionHeader, { children: "ARGS" }),
872
+ /* @__PURE__ */ jsxRuntime.jsx(SectionContent, { children: /* @__PURE__ */ jsxRuntime.jsx(JsonDisplay, { value: action.arguments }) })
873
+ ] }),
874
+ action.result && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
875
+ /* @__PURE__ */ jsxRuntime.jsx(SectionHeader, { children: "RESULT" }),
876
+ /* @__PURE__ */ jsxRuntime.jsx(SectionContent, { children: action.result.type === "markdown" ? /* @__PURE__ */ jsxRuntime.jsx(CodeBlock, { children: String(action.result.value) }) : /* @__PURE__ */ jsxRuntime.jsx(JsonDisplay, { value: action.result.value }) })
877
+ ] })
878
+ ] });
879
+ }
880
+ function GenericToolDetails({ action }) {
881
+ return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
882
+ action.arguments && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
883
+ /* @__PURE__ */ jsxRuntime.jsx(SectionHeader, { children: "ARGS" }),
884
+ /* @__PURE__ */ jsxRuntime.jsx(SectionContent, { children: /* @__PURE__ */ jsxRuntime.jsx(JsonDisplay, { value: action.arguments }) })
885
+ ] }),
886
+ action.result && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
887
+ /* @__PURE__ */ jsxRuntime.jsx(SectionHeader, { children: "RESULT" }),
888
+ /* @__PURE__ */ jsxRuntime.jsx(SectionContent, { children: action.result.type === "markdown" ? /* @__PURE__ */ jsxRuntime.jsx(CodeBlock, { children: String(action.result.value) }) : /* @__PURE__ */ jsxRuntime.jsx(JsonDisplay, { value: action.result.value }) })
889
+ ] })
890
+ ] });
891
+ }
892
+ function TodoWriteDetails({ action }) {
893
+ const { todos, stats } = action;
894
+ return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
895
+ stats && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
896
+ /* @__PURE__ */ jsxRuntime.jsx(SectionHeader, { children: "PROGRESS" }),
897
+ /* @__PURE__ */ jsxRuntime.jsxs(SectionContent, { children: [
898
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
899
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 h-2 bg-white/10 rounded-full overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
900
+ "div",
901
+ {
902
+ className: "h-full bg-emerald-400 rounded-full transition-all duration-500 ease-out",
903
+ style: { width: `${stats.total > 0 ? stats.completed / stats.total * 100 : 0}%` }
904
+ }
905
+ ) }),
906
+ /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-white/60 tabular-nums", children: [
907
+ stats.completed,
908
+ "/",
909
+ stats.total
910
+ ] })
911
+ ] }),
912
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-3 mt-2 text-xs", children: [
913
+ stats.inProgress > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-yellow-400", children: [
914
+ stats.inProgress,
915
+ " in progress"
916
+ ] }),
917
+ stats.pending > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-white/40", children: [
918
+ stats.pending,
919
+ " pending"
920
+ ] })
921
+ ] })
922
+ ] })
923
+ ] }),
924
+ /* @__PURE__ */ jsxRuntime.jsx(SectionHeader, { children: "TASKS" }),
925
+ /* @__PURE__ */ jsxRuntime.jsx(SectionContent, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1.5", children: todos.map((todo, index) => {
926
+ const displayText = todo.status === "in_progress" ? todo.activeForm : todo.content;
927
+ return /* @__PURE__ */ jsxRuntime.jsxs(
928
+ "div",
929
+ {
930
+ className: cn(
931
+ "flex items-start gap-2 py-1 transition-all duration-200",
932
+ todo.status === "completed" && "opacity-50",
933
+ todo.status === "in_progress" && "bg-yellow-500/10 -mx-2 px-2 rounded"
934
+ ),
935
+ children: [
936
+ todo.status === "completed" ? /* @__PURE__ */ jsxRuntime.jsx(CheckCircleIcon, { className: "w-4 h-4 text-emerald-400 shrink-0 mt-0.5" }) : todo.status === "in_progress" ? /* @__PURE__ */ jsxRuntime.jsx(LoaderIcon, { className: "w-4 h-4 text-yellow-400 animate-spin shrink-0 mt-0.5" }) : /* @__PURE__ */ jsxRuntime.jsx(CircleIcon, { className: "w-4 h-4 text-white/30 shrink-0 mt-0.5" }),
937
+ /* @__PURE__ */ jsxRuntime.jsxs(
938
+ "span",
939
+ {
940
+ className: cn(
941
+ "text-sm leading-relaxed",
942
+ todo.status === "completed" ? "text-white/50 line-through" : "text-white/80"
943
+ ),
944
+ children: [
945
+ /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-white/40 mr-1.5", children: [
946
+ index + 1,
947
+ "."
948
+ ] }),
949
+ displayText
950
+ ]
951
+ }
952
+ )
953
+ ]
954
+ },
955
+ `${todo.content}-${index}`
956
+ );
957
+ }) }) })
958
+ ] });
959
+ }
960
+ function ToolDetails({ actionType }) {
961
+ switch (actionType.action) {
962
+ case "command_run":
963
+ return /* @__PURE__ */ jsxRuntime.jsx(CommandRunDetails, { action: actionType });
964
+ case "file_read":
965
+ return /* @__PURE__ */ jsxRuntime.jsx(FileReadDetails, { action: actionType });
966
+ case "file_edit":
967
+ return /* @__PURE__ */ jsxRuntime.jsx(FileEditDetails, { action: actionType });
968
+ case "file_write":
969
+ return /* @__PURE__ */ jsxRuntime.jsx(FileWriteDetails, { action: actionType });
970
+ case "search":
971
+ return /* @__PURE__ */ jsxRuntime.jsx(SearchDetails, { action: actionType });
972
+ case "glob":
973
+ return /* @__PURE__ */ jsxRuntime.jsx(GlobDetails, { action: actionType });
974
+ case "web_fetch":
975
+ return /* @__PURE__ */ jsxRuntime.jsx(WebFetchDetails, { action: actionType });
976
+ case "web_search":
977
+ return /* @__PURE__ */ jsxRuntime.jsx(WebSearchDetails, { action: actionType });
978
+ case "mcp_tool":
979
+ return /* @__PURE__ */ jsxRuntime.jsx(McpToolDetails, { action: actionType });
980
+ case "generic_tool":
981
+ return /* @__PURE__ */ jsxRuntime.jsx(GenericToolDetails, { action: actionType });
982
+ case "todo_write":
983
+ return /* @__PURE__ */ jsxRuntime.jsx(TodoWriteDetails, { action: actionType });
984
+ default:
985
+ return null;
986
+ }
987
+ }
988
+ function hasDetails(actionType) {
989
+ switch (actionType.action) {
990
+ case "command_run":
991
+ return Boolean(actionType.command || actionType.result?.output);
992
+ case "file_read":
993
+ return true;
994
+ case "file_edit":
995
+ return Boolean(actionType.oldString || actionType.newString);
996
+ case "file_write":
997
+ return Boolean(actionType.content);
998
+ case "search":
999
+ return true;
1000
+ case "glob":
1001
+ return true;
1002
+ case "web_fetch":
1003
+ return true;
1004
+ case "web_search":
1005
+ return true;
1006
+ case "mcp_tool":
1007
+ return Boolean(actionType.arguments || actionType.result);
1008
+ case "generic_tool":
1009
+ return Boolean(actionType.arguments || actionType.result);
1010
+ case "todo_write":
1011
+ return actionType.todos.length > 0;
1012
+ default:
1013
+ return false;
1014
+ }
1015
+ }
1016
+ function ToolCallCard({ toolCall, defaultExpanded = false, className }) {
1017
+ const [expanded, setExpanded] = react.useState(defaultExpanded);
1018
+ const { actionType, status, summary } = toolCall;
1019
+ const canExpand = hasDetails(actionType);
1020
+ const statusClasses = {
1021
+ pending: "border-yellow-500/30 ash-tool-status-pending",
1022
+ success: "border-white/10",
1023
+ failed: "border-red-500/30"
1024
+ };
1025
+ return /* @__PURE__ */ jsxRuntime.jsxs(
1026
+ "div",
1027
+ {
1028
+ className: cn(
1029
+ "rounded-xl border bg-[var(--ash-surface-dark,#0a0a0a)] overflow-hidden",
1030
+ statusClasses[status],
1031
+ className
1032
+ ),
1033
+ children: [
1034
+ /* @__PURE__ */ jsxRuntime.jsxs(
1035
+ "button",
1036
+ {
1037
+ onClick: () => canExpand && setExpanded(!expanded),
1038
+ className: cn(
1039
+ "w-full px-4 py-3 flex items-center justify-between transition-colors",
1040
+ canExpand ? "hover:bg-white/5 cursor-pointer" : "cursor-default"
1041
+ ),
1042
+ disabled: !canExpand,
1043
+ children: [
1044
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 min-w-0 flex-1", children: [
1045
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(
1046
+ "w-6 h-6 rounded-lg flex items-center justify-center shrink-0",
1047
+ status === "pending" ? "bg-yellow-500/20" : status === "failed" ? "bg-red-500/20" : "bg-[var(--ash-accent)]/20"
1048
+ ), children: /* @__PURE__ */ jsxRuntime.jsx(
1049
+ ActionIcon,
1050
+ {
1051
+ actionType,
1052
+ className: cn(
1053
+ "w-3.5 h-3.5",
1054
+ status === "pending" ? "text-yellow-400" : status === "failed" ? "text-red-400" : "text-[var(--ash-accent)]"
1055
+ )
1056
+ }
1057
+ ) }),
1058
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-white shrink-0", children: getActionLabel(actionType) }),
1059
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono text-sm truncate text-white/60 min-w-0", children: summary })
1060
+ ] }),
1061
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 shrink-0", children: [
1062
+ /* @__PURE__ */ jsxRuntime.jsx(StatusIndicator, { status, size: "sm" }),
1063
+ canExpand && /* @__PURE__ */ jsxRuntime.jsx(
1064
+ ChevronDownIcon,
1065
+ {
1066
+ className: cn(
1067
+ "w-4 h-4 text-white/40 transition-transform duration-200",
1068
+ expanded && "rotate-180"
1069
+ )
1070
+ }
1071
+ )
1072
+ ] })
1073
+ ]
1074
+ }
1075
+ ),
1076
+ expanded && canExpand && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-t border-white/5 max-h-[400px] overflow-y-auto ash-scrollbar bg-black/20", children: [
1077
+ /* @__PURE__ */ jsxRuntime.jsx(ToolDetails, { actionType }),
1078
+ status === "success" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 py-3 border-t border-white/5 bg-[var(--ash-accent)]/5", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
1079
+ /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { className: "w-4 h-4 text-[var(--ash-accent)]" }),
1080
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-[var(--ash-accent)] font-medium", children: "Completed successfully" })
1081
+ ] }) })
1082
+ ] })
1083
+ ]
1084
+ }
1085
+ );
1086
+ }
1087
+ function OptionCards({ options, onSelect, className }) {
1088
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid gap-2 mt-3", className), style: {
1089
+ gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))"
1090
+ }, children: options.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(
1091
+ "button",
1092
+ {
1093
+ onClick: () => onSelect(option),
1094
+ className: cn(
1095
+ "flex items-start gap-3 p-3 rounded-xl text-left",
1096
+ "bg-white/5 border border-white/10",
1097
+ "hover:bg-[var(--ash-accent)]/10 hover:border-[var(--ash-accent)]/30",
1098
+ "focus:outline-none focus:ring-2 focus:ring-[var(--ash-accent)]/50",
1099
+ "transition-all duration-200 cursor-pointer",
1100
+ "group"
1101
+ ),
1102
+ children: [
1103
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(
1104
+ "flex-shrink-0 w-6 h-6 rounded-lg",
1105
+ "bg-[var(--ash-accent)]/20 text-[var(--ash-accent)]",
1106
+ "flex items-center justify-center",
1107
+ "text-xs font-semibold",
1108
+ "group-hover:bg-[var(--ash-accent)]/30",
1109
+ "transition-colors duration-200"
1110
+ ), children: option.id }),
1111
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
1112
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-medium text-white/90 group-hover:text-white transition-colors", children: option.label }),
1113
+ option.description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-white/50 mt-0.5 line-clamp-2 group-hover:text-white/60 transition-colors", children: option.description })
1114
+ ] }),
1115
+ /* @__PURE__ */ jsxRuntime.jsx(
1116
+ "svg",
1117
+ {
1118
+ className: cn(
1119
+ "w-4 h-4 text-white/30 flex-shrink-0 mt-0.5",
1120
+ "group-hover:text-[var(--ash-accent)] group-hover:translate-x-0.5",
1121
+ "transition-all duration-200"
1122
+ ),
1123
+ fill: "none",
1124
+ viewBox: "0 0 24 24",
1125
+ stroke: "currentColor",
1126
+ strokeWidth: 2,
1127
+ children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" })
1128
+ }
1129
+ )
1130
+ ]
1131
+ },
1132
+ option.id
1133
+ )) });
1134
+ }
1135
+ function parseFilesFromContent(content) {
1136
+ const fileMarker = "[Uploaded files available at /uploads/]";
1137
+ const markerIndex = content.indexOf(fileMarker);
1138
+ if (markerIndex === -1) {
1139
+ return { text: content, files: [] };
1140
+ }
1141
+ const text = content.substring(0, markerIndex).trim();
1142
+ const fileSection = content.substring(markerIndex + fileMarker.length).trim();
1143
+ const files = fileSection.split("\n").filter((line) => line.startsWith("- ")).map((line) => line.substring(2).trim());
1144
+ return { text, files };
1145
+ }
1146
+ function UserMessage({ entry, className }) {
1147
+ const { text, files } = parseFilesFromContent(entry.content);
1148
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex gap-3 justify-end ash-animate-fade-in", className), children: [
1149
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-[85%]", children: [
1150
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-2xl p-4 bg-[var(--ash-accent)] text-[var(--ash-accent-foreground)]", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm leading-relaxed whitespace-pre-wrap", children: text || "(files attached)" }) }),
1151
+ files.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2 pt-2 border-t border-[var(--ash-accent-foreground)]/20", children: [
1152
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs text-[var(--ash-accent-foreground)]/60 mb-1 flex items-center gap-1", children: [
1153
+ /* @__PURE__ */ jsxRuntime.jsx(PaperclipIcon, { className: "w-3 h-3" }),
1154
+ "Attached Files"
1155
+ ] }),
1156
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1", children: files.map((file, index) => /* @__PURE__ */ jsxRuntime.jsx(
1157
+ "span",
1158
+ {
1159
+ className: "inline-flex items-center px-2 py-0.5 rounded-lg bg-[var(--ash-accent-foreground)]/10 text-xs",
1160
+ title: file,
1161
+ children: file.split(" (")[0]
1162
+ },
1163
+ index
1164
+ )) })
1165
+ ] }),
1166
+ entry.timestamp && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-white/40 mt-2", children: formatTimestamp(entry.timestamp) })
1167
+ ] }),
1168
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-7 h-7 rounded-full bg-white/10 flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(UserIcon, { className: "w-4 h-4 text-white/50" }) })
1169
+ ] });
1170
+ }
1171
+ function AssistantMessage({ entry, onOptionSelect, className }) {
1172
+ const parsedOptions = parseOptionsFromContent(entry.content);
1173
+ const handleOptionSelect = (option) => {
1174
+ if (onOptionSelect) {
1175
+ onOptionSelect(`Option ${option.id}: ${option.label}`);
1176
+ }
1177
+ };
1178
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex gap-3 ash-animate-fade-in", className), children: [
1179
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-7 h-7 rounded-full bg-[var(--ash-accent)]/20 flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(BotIcon, { className: "w-4 h-4 text-[var(--ash-accent)]" }) }),
1180
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 max-w-[85%]", children: [
1181
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ash-card-glass rounded-2xl p-4", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ash-message-content prose prose-sm prose-invert max-w-none text-sm leading-relaxed", children: parsedOptions ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
1182
+ parsedOptions.preamble && /* @__PURE__ */ jsxRuntime.jsx(ReactMarkdown__default.default, { children: parsedOptions.preamble }),
1183
+ /* @__PURE__ */ jsxRuntime.jsx(
1184
+ OptionCards,
1185
+ {
1186
+ options: parsedOptions.options,
1187
+ onSelect: handleOptionSelect
1188
+ }
1189
+ )
1190
+ ] }) : /* @__PURE__ */ jsxRuntime.jsx(ReactMarkdown__default.default, { children: entry.content }) }) }),
1191
+ entry.timestamp && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-white/40 mt-2", children: formatTimestamp(entry.timestamp) })
1192
+ ] })
1193
+ ] });
1194
+ }
1195
+ function ThinkingMessage({ entry, className }) {
1196
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex gap-3 ash-animate-fade-in", className), children: [
1197
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-7 h-7 rounded-full bg-purple-500/20 flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(SparklesIcon, { className: "w-4 h-4 text-purple-400" }) }),
1198
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 max-w-[85%]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-2xl p-4 bg-purple-500/10 border border-purple-500/30", children: [
1199
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-purple-400 mb-2 font-medium", children: "Thinking" }),
1200
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-purple-300 italic opacity-80 whitespace-pre-wrap leading-relaxed", children: entry.content })
1201
+ ] }) })
1202
+ ] });
1203
+ }
1204
+ function ToolCallMessage({ entry, defaultExpanded = false, className }) {
1205
+ if (entry.entryType.type !== "tool_call") return null;
1206
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex gap-3 ash-animate-fade-in", className), children: [
1207
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-7 h-7 rounded-full bg-[var(--ash-accent)]/20 flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(BotIcon, { className: "w-4 h-4 text-[var(--ash-accent)]" }) }),
1208
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(ToolCallCard, { toolCall: entry.entryType.toolCall, defaultExpanded }) })
1209
+ ] });
1210
+ }
1211
+ function ErrorMessage({ entry, className }) {
1212
+ if (entry.entryType.type !== "error") return null;
1213
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex gap-3 ash-animate-fade-in", className), children: [
1214
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-7 h-7 rounded-full bg-red-500/20 flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(AlertTriangleIcon, { className: "w-4 h-4 text-red-400" }) }),
1215
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 max-w-[85%]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-2xl p-4 bg-red-500/10 border border-red-500/30", children: [
1216
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-red-400 mb-2 font-medium", children: "Error" }),
1217
+ /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-red-300", children: entry.entryType.message }),
1218
+ entry.entryType.code && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-red-400/70 mt-2 font-mono", children: [
1219
+ "Code: ",
1220
+ entry.entryType.code
1221
+ ] })
1222
+ ] }) })
1223
+ ] });
1224
+ }
1225
+ function MessageEntry({ entry, onOptionSelect, className }) {
1226
+ switch (entry.entryType.type) {
1227
+ case "user_message":
1228
+ return /* @__PURE__ */ jsxRuntime.jsx(UserMessage, { entry, className });
1229
+ case "assistant_message":
1230
+ return /* @__PURE__ */ jsxRuntime.jsx(AssistantMessage, { entry, onOptionSelect, className });
1231
+ case "thinking":
1232
+ return /* @__PURE__ */ jsxRuntime.jsx(ThinkingMessage, { entry, className });
1233
+ case "tool_call":
1234
+ return /* @__PURE__ */ jsxRuntime.jsx(ToolCallMessage, { entry, className });
1235
+ case "error":
1236
+ return /* @__PURE__ */ jsxRuntime.jsx(ErrorMessage, { entry, className });
1237
+ default:
1238
+ return null;
1239
+ }
1240
+ }
1241
+ function LoadingIndicator({ variant = "dots", size = "md", className }) {
1242
+ if (variant === "dots") {
1243
+ const dotSizes = {
1244
+ sm: "w-1 h-1",
1245
+ md: "w-1.5 h-1.5",
1246
+ lg: "w-2 h-2"
1247
+ };
1248
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-1", className), children: [
1249
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("rounded-full bg-[var(--ash-accent)] animate-pulse", dotSizes[size]) }),
1250
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("rounded-full bg-[var(--ash-accent)] animate-pulse", dotSizes[size]), style: { animationDelay: "150ms" } }),
1251
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("rounded-full bg-[var(--ash-accent)] animate-pulse", dotSizes[size]), style: { animationDelay: "300ms" } })
1252
+ ] });
1253
+ }
1254
+ if (variant === "pulse") {
1255
+ const dotSizes = {
1256
+ sm: "w-1.5 h-1.5",
1257
+ md: "w-2 h-2",
1258
+ lg: "w-3 h-3"
1259
+ };
1260
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex items-center gap-1", className), children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("bg-[var(--ash-accent)] rounded-full animate-pulse", dotSizes[size]) }) });
1261
+ }
1262
+ if (variant === "cursor") {
1263
+ const cursorSizes = {
1264
+ sm: "w-1 h-3",
1265
+ md: "w-1.5 h-4",
1266
+ lg: "w-2 h-5"
1267
+ };
1268
+ return /* @__PURE__ */ jsxRuntime.jsx(
1269
+ "span",
1270
+ {
1271
+ className: cn(
1272
+ "inline-block bg-[var(--ash-accent)]/50 ash-tool-status-pending",
1273
+ cursorSizes[size],
1274
+ className
1275
+ )
1276
+ }
1277
+ );
1278
+ }
1279
+ const spinnerSizes = {
1280
+ sm: "w-4 h-4",
1281
+ md: "w-6 h-6",
1282
+ lg: "w-8 h-8"
1283
+ };
1284
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("animate-spin text-[var(--ash-accent)]", spinnerSizes[size], className), children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
1285
+ /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10", className: "opacity-25" }),
1286
+ /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 2a10 10 0 0 1 10 10", strokeLinecap: "round" })
1287
+ ] }) });
1288
+ }
1289
+ function StreamingText({
1290
+ content,
1291
+ isStreaming = false,
1292
+ renderMarkdown = true,
1293
+ className
1294
+ }) {
1295
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative", className), children: renderMarkdown ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ash-message-content prose prose-sm prose-invert max-w-none text-sm leading-relaxed", children: [
1296
+ /* @__PURE__ */ jsxRuntime.jsx(ReactMarkdown__default.default, { children: content }),
1297
+ isStreaming && /* @__PURE__ */ jsxRuntime.jsx(LoadingIndicator, { variant: "cursor", size: "sm", className: "inline-block ml-0.5" })
1298
+ ] }) : /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "whitespace-pre-wrap text-sm leading-relaxed", children: [
1299
+ content,
1300
+ isStreaming && /* @__PURE__ */ jsxRuntime.jsx(LoadingIndicator, { variant: "cursor", size: "sm", className: "inline-block ml-0.5" })
1301
+ ] }) });
1302
+ }
1303
+ function CompactToolStatusLine({
1304
+ toolCall,
1305
+ previousToolCall,
1306
+ animationDuration = 300,
1307
+ className
1308
+ }) {
1309
+ const [isAnimating, setIsAnimating] = react.useState(false);
1310
+ const [displayedToolCall, setDisplayedToolCall] = react.useState(toolCall);
1311
+ const [exitingToolCall, setExitingToolCall] = react.useState(null);
1312
+ const prevToolCallRef = react.useRef(null);
1313
+ react.useEffect(() => {
1314
+ if (toolCall.id !== prevToolCallRef.current) {
1315
+ if (prevToolCallRef.current !== null && previousToolCall) {
1316
+ setExitingToolCall(previousToolCall);
1317
+ setIsAnimating(true);
1318
+ const timer = setTimeout(() => {
1319
+ setDisplayedToolCall(toolCall);
1320
+ setExitingToolCall(null);
1321
+ setIsAnimating(false);
1322
+ }, animationDuration);
1323
+ prevToolCallRef.current = toolCall.id;
1324
+ return () => clearTimeout(timer);
1325
+ } else {
1326
+ setDisplayedToolCall(toolCall);
1327
+ prevToolCallRef.current = toolCall.id;
1328
+ }
1329
+ } else {
1330
+ setDisplayedToolCall(toolCall);
1331
+ }
1332
+ return void 0;
1333
+ }, [toolCall, previousToolCall, animationDuration]);
1334
+ const statusClasses = {
1335
+ pending: "border-yellow-500/30",
1336
+ success: "border-[var(--ash-accent)]/30",
1337
+ failed: "border-red-500/30"
1338
+ };
1339
+ const renderToolCallContent = (tc, isExiting) => /* @__PURE__ */ jsxRuntime.jsxs(
1340
+ "div",
1341
+ {
1342
+ className: cn(
1343
+ "flex items-center gap-3 px-4 py-2.5",
1344
+ isExiting ? "ash-status-line-exit" : isAnimating ? "ash-status-line-enter" : ""
1345
+ ),
1346
+ style: {
1347
+ animationDuration: `${animationDuration}ms`
1348
+ },
1349
+ children: [
1350
+ /* @__PURE__ */ jsxRuntime.jsx(
1351
+ "div",
1352
+ {
1353
+ className: cn(
1354
+ "w-6 h-6 rounded-lg flex items-center justify-center shrink-0",
1355
+ tc.status === "pending" ? "bg-yellow-500/20" : tc.status === "failed" ? "bg-red-500/20" : "bg-[var(--ash-accent)]/20"
1356
+ ),
1357
+ children: /* @__PURE__ */ jsxRuntime.jsx(
1358
+ ActionIcon,
1359
+ {
1360
+ actionType: tc.actionType,
1361
+ className: cn(
1362
+ "w-3.5 h-3.5",
1363
+ tc.status === "pending" ? "text-yellow-400" : tc.status === "failed" ? "text-red-400" : "text-[var(--ash-accent)]"
1364
+ )
1365
+ }
1366
+ )
1367
+ }
1368
+ ),
1369
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-white shrink-0", children: getActionLabel(tc.actionType) }),
1370
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono text-sm truncate text-white/60 flex-1 min-w-0", children: tc.summary }),
1371
+ /* @__PURE__ */ jsxRuntime.jsx(StatusIndicator, { status: tc.status, size: "sm" })
1372
+ ]
1373
+ }
1374
+ );
1375
+ return /* @__PURE__ */ jsxRuntime.jsxs(
1376
+ "div",
1377
+ {
1378
+ className: cn(
1379
+ "relative rounded-xl border bg-[var(--ash-surface-dark,#0a0a0a)] overflow-hidden",
1380
+ statusClasses[displayedToolCall.status],
1381
+ displayedToolCall.status === "pending" && "ash-tool-status-pending",
1382
+ className
1383
+ ),
1384
+ children: [
1385
+ exitingToolCall && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0", children: renderToolCallContent(exitingToolCall, true) }),
1386
+ renderToolCallContent(displayedToolCall, false)
1387
+ ]
1388
+ }
1389
+ );
1390
+ }
1391
+ function calculateGroupStatus(toolCalls) {
1392
+ const hasPending = toolCalls.some((tc) => tc.status === "pending");
1393
+ const hasFailed = toolCalls.some((tc) => tc.status === "failed");
1394
+ const allSuccess = toolCalls.every((tc) => tc.status === "success");
1395
+ if (hasPending) return "pending";
1396
+ if (allSuccess) return "success";
1397
+ if (hasFailed && !hasPending) return toolCalls.some((tc) => tc.status === "success") ? "partial_failure" : "failed";
1398
+ return "pending";
1399
+ }
1400
+ function ToolExecutionGroup({
1401
+ toolCalls,
1402
+ defaultExpanded = false,
1403
+ animationDuration = 300,
1404
+ className
1405
+ }) {
1406
+ const [expanded, setExpanded] = react.useState(defaultExpanded);
1407
+ const activeToolCall = toolCalls[toolCalls.length - 1];
1408
+ const previousToolCall = toolCalls.length > 1 ? toolCalls[toolCalls.length - 2] : null;
1409
+ const groupStatus = react.useMemo(() => calculateGroupStatus(toolCalls), [toolCalls]);
1410
+ const completedCount = toolCalls.filter((tc) => tc.status === "success").length;
1411
+ const failedCount = toolCalls.filter((tc) => tc.status === "failed").length;
1412
+ const totalCount = toolCalls.length;
1413
+ if (!activeToolCall) {
1414
+ return null;
1415
+ }
1416
+ const borderClasses = {
1417
+ pending: "border-yellow-500/30",
1418
+ success: "border-[var(--ash-accent)]/30",
1419
+ partial_failure: "border-orange-500/30",
1420
+ failed: "border-red-500/30"
1421
+ };
1422
+ return /* @__PURE__ */ jsxRuntime.jsxs(
1423
+ "div",
1424
+ {
1425
+ className: cn(
1426
+ "rounded-xl border bg-[var(--ash-surface-dark,#0a0a0a)] overflow-hidden ash-animate-fade-in",
1427
+ borderClasses[groupStatus],
1428
+ groupStatus === "pending" && "ash-tool-status-pending",
1429
+ className
1430
+ ),
1431
+ children: [
1432
+ /* @__PURE__ */ jsxRuntime.jsx(
1433
+ "button",
1434
+ {
1435
+ onClick: () => setExpanded(!expanded),
1436
+ className: cn(
1437
+ "w-full transition-colors hover:bg-white/5 cursor-pointer"
1438
+ ),
1439
+ children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
1440
+ /* @__PURE__ */ jsxRuntime.jsx(
1441
+ CompactToolStatusLine,
1442
+ {
1443
+ toolCall: activeToolCall,
1444
+ previousToolCall,
1445
+ animationDuration,
1446
+ className: "border-0 rounded-none"
1447
+ }
1448
+ ),
1449
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute right-3 top-1/2 -translate-y-1/2 flex items-center gap-2", children: [
1450
+ totalCount > 1 && /* @__PURE__ */ jsxRuntime.jsx(
1451
+ "div",
1452
+ {
1453
+ className: cn(
1454
+ "flex items-center gap-1.5 px-2 py-0.5 rounded-full text-xs font-medium",
1455
+ groupStatus === "pending" ? "bg-yellow-500/20 text-yellow-400" : groupStatus === "success" ? "bg-[var(--ash-accent)]/20 text-[var(--ash-accent)]" : groupStatus === "failed" ? "bg-red-500/20 text-red-400" : "bg-orange-500/20 text-orange-400"
1456
+ ),
1457
+ children: groupStatus === "pending" ? /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
1458
+ completedCount,
1459
+ "/",
1460
+ totalCount
1461
+ ] }) : failedCount > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
1462
+ completedCount,
1463
+ " ok, ",
1464
+ failedCount,
1465
+ " failed"
1466
+ ] }) : /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
1467
+ totalCount,
1468
+ " tools"
1469
+ ] })
1470
+ }
1471
+ ),
1472
+ /* @__PURE__ */ jsxRuntime.jsx(
1473
+ ChevronDownIcon,
1474
+ {
1475
+ className: cn(
1476
+ "w-4 h-4 text-white/40 transition-transform duration-200",
1477
+ expanded && "rotate-180"
1478
+ )
1479
+ }
1480
+ )
1481
+ ] })
1482
+ ] })
1483
+ }
1484
+ ),
1485
+ expanded && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-t border-white/5 bg-black/20", children: [
1486
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-3 space-y-2", children: toolCalls.map((toolCall, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
1487
+ index < toolCalls.length - 1 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-[19px] top-10 bottom-0 w-px bg-white/10" }),
1488
+ /* @__PURE__ */ jsxRuntime.jsx(
1489
+ ToolCallCard,
1490
+ {
1491
+ toolCall,
1492
+ defaultExpanded: false,
1493
+ className: "relative z-10"
1494
+ }
1495
+ )
1496
+ ] }, toolCall.id)) }),
1497
+ groupStatus !== "pending" && /* @__PURE__ */ jsxRuntime.jsx(
1498
+ "div",
1499
+ {
1500
+ className: cn(
1501
+ "px-4 py-3 border-t border-white/5 flex items-center gap-2",
1502
+ groupStatus === "success" ? "bg-[var(--ash-accent)]/5" : groupStatus === "failed" ? "bg-red-500/5" : "bg-orange-500/5"
1503
+ ),
1504
+ children: groupStatus === "success" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
1505
+ /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { className: "w-4 h-4 text-[var(--ash-accent)]" }),
1506
+ /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm text-[var(--ash-accent)] font-medium", children: [
1507
+ "All ",
1508
+ totalCount,
1509
+ " tool",
1510
+ totalCount !== 1 ? "s" : "",
1511
+ " completed successfully"
1512
+ ] })
1513
+ ] }) : groupStatus === "failed" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
1514
+ /* @__PURE__ */ jsxRuntime.jsx(StatusIndicator, { status: "failed", size: "sm" }),
1515
+ /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm text-red-400 font-medium", children: [
1516
+ failedCount,
1517
+ " tool",
1518
+ failedCount !== 1 ? "s" : "",
1519
+ " failed"
1520
+ ] })
1521
+ ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
1522
+ /* @__PURE__ */ jsxRuntime.jsx(StatusIndicator, { status: "failed", size: "sm" }),
1523
+ /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm text-orange-400 font-medium", children: [
1524
+ completedCount,
1525
+ " succeeded, ",
1526
+ failedCount,
1527
+ " failed"
1528
+ ] })
1529
+ ] })
1530
+ }
1531
+ )
1532
+ ] })
1533
+ ]
1534
+ }
1535
+ );
1536
+ }
1537
+
1538
+ // src/types.ts
1539
+ function isCommandRunAction(action) {
1540
+ return action.action === "command_run";
1541
+ }
1542
+ function isFileReadAction(action) {
1543
+ return action.action === "file_read";
1544
+ }
1545
+ function isFileEditAction(action) {
1546
+ return action.action === "file_edit";
1547
+ }
1548
+ function isFileWriteAction(action) {
1549
+ return action.action === "file_write";
1550
+ }
1551
+ function isSearchAction(action) {
1552
+ return action.action === "search";
1553
+ }
1554
+ function isGlobAction(action) {
1555
+ return action.action === "glob";
1556
+ }
1557
+ function isWebFetchAction(action) {
1558
+ return action.action === "web_fetch";
1559
+ }
1560
+ function isWebSearchAction(action) {
1561
+ return action.action === "web_search";
1562
+ }
1563
+ function isMcpToolAction(action) {
1564
+ return action.action === "mcp_tool";
1565
+ }
1566
+ function isGenericToolAction(action) {
1567
+ return action.action === "generic_tool";
1568
+ }
1569
+ function isTodoWriteAction(action) {
1570
+ return action.action === "todo_write";
1571
+ }
1572
+ function isToolCallEntry(entry) {
1573
+ return entry.type === "tool_call";
1574
+ }
1575
+ function isErrorEntry(entry) {
1576
+ return entry.type === "error";
1577
+ }
1578
+ var DEFAULT_DISPLAY_CONFIG = {
1579
+ mode: "inline",
1580
+ breakEveryNToolCalls: 0,
1581
+ defaultExpanded: false,
1582
+ animationDuration: 300
1583
+ };
1584
+ var DisplayModeContext = react.createContext(null);
1585
+ function DisplayModeProvider({ children, initialConfig }) {
1586
+ const [config, setConfigState] = react.useState({
1587
+ ...DEFAULT_DISPLAY_CONFIG,
1588
+ ...initialConfig
1589
+ });
1590
+ const setMode = react.useCallback((mode) => {
1591
+ setConfigState((prev) => ({ ...prev, mode }));
1592
+ }, []);
1593
+ const setConfig = react.useCallback((updates) => {
1594
+ setConfigState((prev) => ({ ...prev, ...updates }));
1595
+ }, []);
1596
+ const toggleMode = react.useCallback(() => {
1597
+ setConfigState((prev) => ({
1598
+ ...prev,
1599
+ mode: prev.mode === "inline" ? "compact" : "inline"
1600
+ }));
1601
+ }, []);
1602
+ const value = react.useMemo(
1603
+ () => ({ config, setMode, setConfig, toggleMode }),
1604
+ [config, setMode, setConfig, toggleMode]
1605
+ );
1606
+ return /* @__PURE__ */ jsxRuntime.jsx(DisplayModeContext.Provider, { value, children });
1607
+ }
1608
+ function useDisplayMode() {
1609
+ const context = react.useContext(DisplayModeContext);
1610
+ if (!context) {
1611
+ return {
1612
+ config: DEFAULT_DISPLAY_CONFIG,
1613
+ setMode: () => {
1614
+ },
1615
+ setConfig: () => {
1616
+ },
1617
+ toggleMode: () => {
1618
+ }
1619
+ };
1620
+ }
1621
+ return context;
1622
+ }
1623
+ function useDisplayConfig() {
1624
+ const { config } = useDisplayMode();
1625
+ return config;
1626
+ }
1627
+ function MessageList({
1628
+ entries,
1629
+ loading,
1630
+ streamingContent,
1631
+ displayConfig: displayConfigProp,
1632
+ onOptionSelect,
1633
+ className
1634
+ }) {
1635
+ const contextConfig = useDisplayConfig();
1636
+ const config = displayConfigProp || contextConfig;
1637
+ const groupedEntries = react.useMemo(() => {
1638
+ if (config.mode === "inline") {
1639
+ return entries.map((entry) => ({
1640
+ type: "single",
1641
+ entry,
1642
+ id: entry.id
1643
+ }));
1644
+ }
1645
+ return groupEntriesForCompactMode(entries, config);
1646
+ }, [entries, config]);
1647
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex-1 overflow-y-auto p-4 space-y-4 ash-scrollbar", className), children: [
1648
+ groupedEntries.map((groupedEntry) => {
1649
+ if (groupedEntry.type === "single") {
1650
+ return /* @__PURE__ */ jsxRuntime.jsx(MessageEntry, { entry: groupedEntry.entry, onOptionSelect }, groupedEntry.entry.id);
1651
+ }
1652
+ const toolCalls = extractToolCallsFromGroup(groupedEntry.entries);
1653
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-3 ash-animate-fade-in", children: [
1654
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-7 h-7 rounded-full bg-[var(--ash-accent)]/20 flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(BotIcon, { className: "w-4 h-4 text-[var(--ash-accent)]" }) }),
1655
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(
1656
+ ToolExecutionGroup,
1657
+ {
1658
+ toolCalls,
1659
+ defaultExpanded: config.defaultExpanded,
1660
+ animationDuration: config.animationDuration
1661
+ }
1662
+ ) })
1663
+ ] }, groupedEntry.id);
1664
+ }),
1665
+ streamingContent && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-3 ash-animate-fade-in", children: [
1666
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-7 h-7 rounded-full bg-[var(--ash-accent)]/20 flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(BotIcon, { className: "w-4 h-4 text-[var(--ash-accent)]" }) }),
1667
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 max-w-[85%]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-xl p-3 bg-white/5 text-white/80", children: /* @__PURE__ */ jsxRuntime.jsx(StreamingText, { content: streamingContent, isStreaming: true }) }) })
1668
+ ] }),
1669
+ loading && !streamingContent && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-3 ash-animate-fade-in", children: [
1670
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-7 h-7 rounded-full bg-[var(--ash-accent)]/20 flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(BotIcon, { className: "w-4 h-4 text-[var(--ash-accent)]" }) }),
1671
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-xl p-3 bg-white/5", children: /* @__PURE__ */ jsxRuntime.jsx(LoadingIndicator, { variant: "dots" }) })
1672
+ ] })
1673
+ ] });
1674
+ }
1675
+ function getLevelIcon(level) {
1676
+ switch (level) {
1677
+ case "info":
1678
+ return /* @__PURE__ */ jsxRuntime.jsx(InfoIcon, { className: "w-3.5 h-3.5" });
1679
+ case "warn":
1680
+ return /* @__PURE__ */ jsxRuntime.jsx(AlertTriangleIcon, { className: "w-3.5 h-3.5" });
1681
+ case "error":
1682
+ return /* @__PURE__ */ jsxRuntime.jsx(AlertCircleIcon, { className: "w-3.5 h-3.5" });
1683
+ case "debug":
1684
+ return /* @__PURE__ */ jsxRuntime.jsx(BugIcon, { className: "w-3.5 h-3.5" });
1685
+ }
1686
+ }
1687
+ function getLevelColor(level) {
1688
+ switch (level) {
1689
+ case "info":
1690
+ return "text-blue-400";
1691
+ case "warn":
1692
+ return "text-yellow-500";
1693
+ case "error":
1694
+ return "text-red-400";
1695
+ case "debug":
1696
+ return "text-white/50";
1697
+ }
1698
+ }
1699
+ function getLevelBgColor(level) {
1700
+ switch (level) {
1701
+ case "info":
1702
+ return "bg-blue-900/20";
1703
+ case "warn":
1704
+ return "bg-yellow-900/20";
1705
+ case "error":
1706
+ return "bg-red-900/20";
1707
+ case "debug":
1708
+ return "bg-white/5";
1709
+ }
1710
+ }
1711
+ function getCategoryLabel(category) {
1712
+ switch (category) {
1713
+ case "setup":
1714
+ return "Setup";
1715
+ case "skills":
1716
+ return "Skills";
1717
+ case "execution":
1718
+ return "Execution";
1719
+ case "process":
1720
+ return "Process";
1721
+ case "startup":
1722
+ return "Startup";
1723
+ }
1724
+ }
1725
+ function LogEntryRow({ log }) {
1726
+ const [isExpanded, setIsExpanded] = react.useState(false);
1727
+ const hasData = log.data && Object.keys(log.data).length > 0;
1728
+ return /* @__PURE__ */ jsxRuntime.jsxs(
1729
+ "div",
1730
+ {
1731
+ className: cn(
1732
+ "px-3 py-2 border-b border-white/10 last:border-b-0",
1733
+ getLevelBgColor(log.level)
1734
+ ),
1735
+ children: [
1736
+ /* @__PURE__ */ jsxRuntime.jsxs(
1737
+ "div",
1738
+ {
1739
+ className: cn("flex items-start gap-2", hasData && "cursor-pointer"),
1740
+ onClick: () => hasData && setIsExpanded(!isExpanded),
1741
+ children: [
1742
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-4 flex-shrink-0 pt-0.5", children: hasData && (isExpanded ? /* @__PURE__ */ jsxRuntime.jsx(ChevronDownIcon, { className: "w-3 h-3 text-white/40" }) : /* @__PURE__ */ jsxRuntime.jsx(ChevronRightIcon, { className: "w-3 h-3 text-white/40" })) }),
1743
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex-shrink-0 pt-0.5", getLevelColor(log.level)), children: getLevelIcon(log.level) }),
1744
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-white/40 font-mono flex-shrink-0 pt-0.5", children: formatTimestamp(log.timestamp) }),
1745
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs px-1.5 py-0.5 rounded bg-white/10 text-white/70 font-medium flex-shrink-0", children: getCategoryLabel(log.category) }),
1746
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-white/80 flex-1 break-words", children: log.message })
1747
+ ]
1748
+ }
1749
+ ),
1750
+ isExpanded && hasData && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 ml-6 pl-4 border-l-2 border-white/20", children: /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "text-xs text-white/50 font-mono whitespace-pre-wrap overflow-x-auto", children: JSON.stringify(log.data, null, 2) }) })
1751
+ ]
1752
+ }
1753
+ );
1754
+ }
1755
+ function LogsPanel({
1756
+ logs,
1757
+ title = "Logs",
1758
+ isLoading,
1759
+ defaultCollapsed = true,
1760
+ maxHeight = 256,
1761
+ className
1762
+ }) {
1763
+ const [isCollapsed, setIsCollapsed] = react.useState(defaultCollapsed);
1764
+ const errorCount = logs.filter((l) => l.level === "error").length;
1765
+ const warnCount = logs.filter((l) => l.level === "warn").length;
1766
+ if (logs.length === 0 && !isLoading) {
1767
+ return null;
1768
+ }
1769
+ return /* @__PURE__ */ jsxRuntime.jsxs(
1770
+ "div",
1771
+ {
1772
+ className: cn(
1773
+ "border-t border-white/10 bg-[var(--ash-surface-dark,#0a0a0a)]",
1774
+ className
1775
+ ),
1776
+ children: [
1777
+ /* @__PURE__ */ jsxRuntime.jsxs(
1778
+ "button",
1779
+ {
1780
+ onClick: () => setIsCollapsed(!isCollapsed),
1781
+ className: "w-full flex items-center justify-between px-4 py-2 hover:bg-white/5 transition-colors",
1782
+ children: [
1783
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
1784
+ /* @__PURE__ */ jsxRuntime.jsx(TerminalIcon, { className: "w-4 h-4 text-white/50" }),
1785
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-white/80", children: title }),
1786
+ /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-white/40", children: [
1787
+ "(",
1788
+ logs.length,
1789
+ ")"
1790
+ ] }),
1791
+ errorCount > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs px-1.5 py-0.5 rounded bg-red-900/50 text-red-400 font-medium", children: [
1792
+ errorCount,
1793
+ " error",
1794
+ errorCount > 1 ? "s" : ""
1795
+ ] }),
1796
+ warnCount > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs px-1.5 py-0.5 rounded bg-yellow-900/50 text-yellow-400 font-medium", children: [
1797
+ warnCount,
1798
+ " warning",
1799
+ warnCount > 1 ? "s" : ""
1800
+ ] }),
1801
+ isLoading && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-white/40 animate-pulse", children: "Loading..." })
1802
+ ] }),
1803
+ isCollapsed ? /* @__PURE__ */ jsxRuntime.jsx(ChevronRightIcon, { className: "w-4 h-4 text-white/40" }) : /* @__PURE__ */ jsxRuntime.jsx(ChevronDownIcon, { className: "w-4 h-4 text-white/40" })
1804
+ ]
1805
+ }
1806
+ ),
1807
+ !isCollapsed && /* @__PURE__ */ jsxRuntime.jsx(
1808
+ "div",
1809
+ {
1810
+ className: "overflow-y-auto border-t border-white/10",
1811
+ style: { maxHeight },
1812
+ children: logs.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 py-6 text-center text-sm text-white/50", children: "No logs yet" }) : logs.map((log, index) => /* @__PURE__ */ jsxRuntime.jsx(LogEntryRow, { log }, `${log.timestamp}-${index}`))
1813
+ }
1814
+ )
1815
+ ]
1816
+ }
1817
+ );
1818
+ }
1819
+ function TodoStatusIcon({ status, className = "w-4 h-4" }) {
1820
+ switch (status) {
1821
+ case "completed":
1822
+ return /* @__PURE__ */ jsxRuntime.jsx(CheckCircleIcon, { className: cn(className, "text-emerald-400") });
1823
+ case "in_progress":
1824
+ return /* @__PURE__ */ jsxRuntime.jsx(LoaderIcon, { className: cn(className, "text-yellow-400 animate-spin") });
1825
+ case "pending":
1826
+ default:
1827
+ return /* @__PURE__ */ jsxRuntime.jsx(CircleIcon, { className: cn(className, "text-white/30") });
1828
+ }
1829
+ }
1830
+ function TodoListItem({ todo, index, compact = false }) {
1831
+ const displayText = todo.status === "in_progress" ? todo.activeForm : todo.content;
1832
+ return /* @__PURE__ */ jsxRuntime.jsxs(
1833
+ "div",
1834
+ {
1835
+ className: cn(
1836
+ "flex items-start gap-2 transition-all duration-200",
1837
+ compact ? "py-1" : "py-1.5",
1838
+ todo.status === "completed" && "opacity-60",
1839
+ todo.status === "in_progress" && "bg-yellow-500/5 -mx-2 px-2 rounded-md"
1840
+ ),
1841
+ children: [
1842
+ /* @__PURE__ */ jsxRuntime.jsx(TodoStatusIcon, { status: todo.status, className: compact ? "w-3.5 h-3.5 mt-0.5" : "w-4 h-4 mt-0.5" }),
1843
+ /* @__PURE__ */ jsxRuntime.jsxs(
1844
+ "span",
1845
+ {
1846
+ className: cn(
1847
+ "flex-1 text-white/80",
1848
+ compact ? "text-xs" : "text-sm",
1849
+ todo.status === "completed" && "line-through text-white/50"
1850
+ ),
1851
+ children: [
1852
+ !compact && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-white/40 mr-1.5", children: [
1853
+ index + 1,
1854
+ "."
1855
+ ] }),
1856
+ displayText
1857
+ ]
1858
+ }
1859
+ )
1860
+ ]
1861
+ }
1862
+ );
1863
+ }
1864
+ function TodoProgress({ completed, total, className }) {
1865
+ const percentage = total > 0 ? Math.round(completed / total * 100) : 0;
1866
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-2", className), children: [
1867
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 h-1.5 bg-white/10 rounded-full overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
1868
+ "div",
1869
+ {
1870
+ className: "h-full bg-emerald-400 rounded-full transition-all duration-500 ease-out",
1871
+ style: { width: `${percentage}%` }
1872
+ }
1873
+ ) }),
1874
+ /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-white/50 tabular-nums min-w-[3rem] text-right", children: [
1875
+ completed,
1876
+ "/",
1877
+ total
1878
+ ] })
1879
+ ] });
1880
+ }
1881
+ function TodoPanel({
1882
+ todos,
1883
+ title,
1884
+ compact = false,
1885
+ showProgress = true,
1886
+ className
1887
+ }) {
1888
+ const stats = react.useMemo(() => {
1889
+ return {
1890
+ total: todos.length,
1891
+ completed: todos.filter((t) => t.status === "completed").length,
1892
+ inProgress: todos.filter((t) => t.status === "in_progress").length,
1893
+ pending: todos.filter((t) => t.status === "pending").length
1894
+ };
1895
+ }, [todos]);
1896
+ if (todos.length === 0) {
1897
+ return null;
1898
+ }
1899
+ return /* @__PURE__ */ jsxRuntime.jsxs(
1900
+ "div",
1901
+ {
1902
+ className: cn(
1903
+ "rounded-lg border border-white/10 bg-white/5 overflow-hidden",
1904
+ className
1905
+ ),
1906
+ children: [
1907
+ (title || showProgress) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("border-b border-white/5", compact ? "px-2 py-1.5" : "px-3 py-2"), children: [
1908
+ title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("font-medium text-white/90 mb-1.5", compact ? "text-xs" : "text-sm"), children: title }),
1909
+ showProgress && /* @__PURE__ */ jsxRuntime.jsx(TodoProgress, { completed: stats.completed, total: stats.total })
1910
+ ] }),
1911
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(compact ? "px-2 py-1.5" : "px-3 py-2"), children: todos.map((todo, index) => /* @__PURE__ */ jsxRuntime.jsx(
1912
+ TodoListItem,
1913
+ {
1914
+ todo,
1915
+ index,
1916
+ compact
1917
+ },
1918
+ `${todo.content}-${index}`
1919
+ )) }),
1920
+ !compact && stats.inProgress > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 py-2 border-t border-white/5 bg-yellow-500/5", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-xs text-yellow-400", children: [
1921
+ /* @__PURE__ */ jsxRuntime.jsx(LoaderIcon, { className: "w-3 h-3 animate-spin" }),
1922
+ /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
1923
+ stats.inProgress,
1924
+ " task",
1925
+ stats.inProgress !== 1 ? "s" : "",
1926
+ " in progress"
1927
+ ] })
1928
+ ] }) })
1929
+ ]
1930
+ }
1931
+ );
1932
+ }
1933
+ var DEFAULT_WORDS = [
1934
+ "Thinking",
1935
+ "Reasoning",
1936
+ "Pondering",
1937
+ "Analyzing",
1938
+ "Considering",
1939
+ "Processing",
1940
+ "Evaluating"
1941
+ ];
1942
+ function TypewriterText({
1943
+ words = DEFAULT_WORDS,
1944
+ typeSpeed = 50,
1945
+ pauseBeforeErase = 800,
1946
+ eraseSpeed = 30,
1947
+ pauseBeforeType = 200,
1948
+ showCursor = true,
1949
+ className,
1950
+ cursorClassName
1951
+ }) {
1952
+ const [displayText, setDisplayText] = react.useState("");
1953
+ const [wordIndex, setWordIndex] = react.useState(0);
1954
+ const [isTyping, setIsTyping] = react.useState(true);
1955
+ const timeoutRef = react.useRef(null);
1956
+ react.useEffect(() => {
1957
+ const currentWord = words[wordIndex] ?? "";
1958
+ if (isTyping) {
1959
+ if (displayText.length < currentWord.length) {
1960
+ timeoutRef.current = setTimeout(() => {
1961
+ setDisplayText(currentWord.slice(0, displayText.length + 1));
1962
+ }, typeSpeed);
1963
+ } else {
1964
+ timeoutRef.current = setTimeout(() => {
1965
+ setIsTyping(false);
1966
+ }, pauseBeforeErase);
1967
+ }
1968
+ } else {
1969
+ if (displayText.length > 0) {
1970
+ timeoutRef.current = setTimeout(() => {
1971
+ setDisplayText(displayText.slice(0, -1));
1972
+ }, eraseSpeed);
1973
+ } else {
1974
+ timeoutRef.current = setTimeout(() => {
1975
+ setWordIndex((prev) => (prev + 1) % words.length);
1976
+ setIsTyping(true);
1977
+ }, pauseBeforeType);
1978
+ }
1979
+ }
1980
+ return () => {
1981
+ if (timeoutRef.current) {
1982
+ clearTimeout(timeoutRef.current);
1983
+ }
1984
+ };
1985
+ }, [displayText, wordIndex, isTyping, words, typeSpeed, pauseBeforeErase, eraseSpeed, pauseBeforeType]);
1986
+ return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn("inline-flex items-center", className), children: [
1987
+ /* @__PURE__ */ jsxRuntime.jsx("span", { children: displayText }),
1988
+ showCursor && /* @__PURE__ */ jsxRuntime.jsx(
1989
+ "span",
1990
+ {
1991
+ className: cn(
1992
+ "w-0.5 h-4 bg-current ml-0.5 animate-pulse",
1993
+ cursorClassName
1994
+ )
1995
+ }
1996
+ )
1997
+ ] });
1998
+ }
1999
+ var ThemeContext = react.createContext(void 0);
2000
+ var DEFAULT_STORAGE_KEY = "ash-ui-theme";
2001
+ function ThemeProvider({
2002
+ children,
2003
+ defaultTheme,
2004
+ storageKey = DEFAULT_STORAGE_KEY,
2005
+ listenToSystemChanges = true
2006
+ }) {
2007
+ const [theme, setThemeState] = react.useState(() => {
2008
+ if (typeof window !== "undefined") {
2009
+ const stored = localStorage.getItem(storageKey);
2010
+ if (stored === "dark" || stored === "light") {
2011
+ return stored;
2012
+ }
2013
+ if (!defaultTheme && window.matchMedia("(prefers-color-scheme: dark)").matches) {
2014
+ return "dark";
2015
+ }
2016
+ }
2017
+ return defaultTheme ?? "light";
2018
+ });
2019
+ const [mounted, setMounted] = react.useState(false);
2020
+ react.useEffect(() => {
2021
+ setMounted(true);
2022
+ }, []);
2023
+ react.useEffect(() => {
2024
+ if (!mounted) return;
2025
+ const root = document.documentElement;
2026
+ if (theme === "dark") {
2027
+ root.classList.add("dark");
2028
+ } else {
2029
+ root.classList.remove("dark");
2030
+ }
2031
+ localStorage.setItem(storageKey, theme);
2032
+ }, [theme, mounted, storageKey]);
2033
+ react.useEffect(() => {
2034
+ if (!listenToSystemChanges || typeof window === "undefined") return;
2035
+ const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
2036
+ const handleChange = (e) => {
2037
+ const stored = localStorage.getItem(storageKey);
2038
+ if (!stored) {
2039
+ setThemeState(e.matches ? "dark" : "light");
2040
+ }
2041
+ };
2042
+ mediaQuery.addEventListener("change", handleChange);
2043
+ return () => mediaQuery.removeEventListener("change", handleChange);
2044
+ }, [storageKey, listenToSystemChanges]);
2045
+ const toggleTheme = react.useCallback(() => {
2046
+ setThemeState((prev) => prev === "light" ? "dark" : "light");
2047
+ }, []);
2048
+ const setTheme = react.useCallback((newTheme) => {
2049
+ setThemeState(newTheme);
2050
+ }, []);
2051
+ if (!mounted) {
2052
+ return /* @__PURE__ */ jsxRuntime.jsx(ThemeContext.Provider, { value: { theme: defaultTheme ?? "light", toggleTheme, setTheme }, children });
2053
+ }
2054
+ return /* @__PURE__ */ jsxRuntime.jsx(ThemeContext.Provider, { value: { theme, toggleTheme, setTheme }, children });
2055
+ }
2056
+ function useTheme() {
2057
+ const context = react.useContext(ThemeContext);
2058
+ if (context === void 0) {
2059
+ throw new Error("useTheme must be used within a ThemeProvider");
2060
+ }
2061
+ return context;
2062
+ }
2063
+
2064
+ // src/design-tokens.ts
2065
+ var colors = {
2066
+ // Primary accent color (lime green)
2067
+ accent: {
2068
+ DEFAULT: "#ccff00",
2069
+ 50: "#f8ffe5",
2070
+ 100: "#eeffb8",
2071
+ 200: "#e0ff85",
2072
+ 300: "#d4ff52",
2073
+ 400: "#ccff00",
2074
+ 500: "#b8e600",
2075
+ 600: "#99cc00",
2076
+ 700: "#739900",
2077
+ 800: "#4d6600",
2078
+ 900: "#263300"
2079
+ },
2080
+ // Surface colors (dark theme)
2081
+ surface: {
2082
+ dark: "#0a0a0a",
2083
+ darker: "#050505",
2084
+ card: "#0c0c0c",
2085
+ elevated: "#111111"
2086
+ },
2087
+ // Text colors
2088
+ text: {
2089
+ primary: "#ffffff",
2090
+ secondary: "rgba(255, 255, 255, 0.7)",
2091
+ muted: "rgba(255, 255, 255, 0.5)",
2092
+ disabled: "rgba(255, 255, 255, 0.3)"
2093
+ },
2094
+ // Border colors
2095
+ border: {
2096
+ DEFAULT: "rgba(255, 255, 255, 0.1)",
2097
+ hover: "rgba(255, 255, 255, 0.2)",
2098
+ accent: "rgba(204, 255, 0, 0.3)",
2099
+ accentHover: "rgba(204, 255, 0, 0.5)"
2100
+ },
2101
+ // Status colors
2102
+ status: {
2103
+ success: "#10b981",
2104
+ warning: "#eab308",
2105
+ error: "#ef4444",
2106
+ info: "#3b82f6"
2107
+ },
2108
+ // User message background
2109
+ user: {
2110
+ bg: "rgba(204, 255, 0, 0.1)",
2111
+ border: "rgba(204, 255, 0, 0.2)"
2112
+ },
2113
+ // Assistant message background
2114
+ assistant: {
2115
+ bg: "rgba(255, 255, 255, 0.05)",
2116
+ border: "rgba(255, 255, 255, 0.1)"
2117
+ }
2118
+ };
2119
+ var spacing = {
2120
+ xs: "4px",
2121
+ sm: "8px",
2122
+ md: "12px",
2123
+ lg: "16px",
2124
+ xl: "24px",
2125
+ "2xl": "32px",
2126
+ "3xl": "48px"
2127
+ };
2128
+ var borderRadius = {
2129
+ sm: "8px",
2130
+ md: "12px",
2131
+ lg: "16px",
2132
+ xl: "20px",
2133
+ "2xl": "24px",
2134
+ full: "9999px"
2135
+ };
2136
+ var shadows = {
2137
+ sm: "0 1px 2px rgba(0, 0, 0, 0.3)",
2138
+ md: "0 4px 6px rgba(0, 0, 0, 0.4)",
2139
+ lg: "0 10px 15px rgba(0, 0, 0, 0.5)",
2140
+ xl: "0 20px 25px rgba(0, 0, 0, 0.6)",
2141
+ glow: {
2142
+ sm: "0 0 10px rgba(204, 255, 0, 0.2)",
2143
+ md: "0 0 20px rgba(204, 255, 0, 0.3)",
2144
+ lg: "0 0 30px rgba(204, 255, 0, 0.5)"
2145
+ },
2146
+ panel: "0 25px 50px rgba(0, 0, 0, 0.5)"
2147
+ };
2148
+ var typography = {
2149
+ fontFamily: {
2150
+ sans: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
2151
+ mono: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace'
2152
+ },
2153
+ fontSize: {
2154
+ xs: "12px",
2155
+ sm: "14px",
2156
+ base: "16px",
2157
+ lg: "18px",
2158
+ xl: "20px",
2159
+ "2xl": "24px"
2160
+ },
2161
+ lineHeight: {
2162
+ tight: "1.25",
2163
+ normal: "1.5",
2164
+ relaxed: "1.75"
2165
+ }
2166
+ };
2167
+ var keyframes = {
2168
+ slideUp: {
2169
+ from: { opacity: "0", transform: "translateY(20px)" },
2170
+ to: { opacity: "1", transform: "translateY(0)" }
2171
+ },
2172
+ fadeIn: {
2173
+ from: { opacity: "0", transform: "translateY(10px)" },
2174
+ to: { opacity: "1", transform: "translateY(0)" }
2175
+ },
2176
+ blink: {
2177
+ "0%, 50%": { opacity: "1" },
2178
+ "51%, 100%": { opacity: "0" }
2179
+ },
2180
+ bounce: {
2181
+ "0%, 80%, 100%": { transform: "scale(0)" },
2182
+ "40%": { transform: "scale(1)" }
2183
+ },
2184
+ pulse: {
2185
+ "0%, 100%": { opacity: "1" },
2186
+ "50%": { opacity: "0.5" }
2187
+ },
2188
+ glowPulse: {
2189
+ "0%, 100%": { boxShadow: "0 0 20px rgba(204, 255, 0, 0.3)" },
2190
+ "50%": { boxShadow: "0 0 40px rgba(204, 255, 0, 0.5)" }
2191
+ }
2192
+ };
2193
+ var keyframesCss = {
2194
+ slideUp: `
2195
+ @keyframes ash-slide-up {
2196
+ from { opacity: 0; transform: translateY(20px); }
2197
+ to { opacity: 1; transform: translateY(0); }
2198
+ }
2199
+ `,
2200
+ fadeIn: `
2201
+ @keyframes ash-fade-in {
2202
+ from { opacity: 0; transform: translateY(10px); }
2203
+ to { opacity: 1; transform: translateY(0); }
2204
+ }
2205
+ `,
2206
+ blink: `
2207
+ @keyframes ash-blink {
2208
+ 0%, 50% { opacity: 1; }
2209
+ 51%, 100% { opacity: 0; }
2210
+ }
2211
+ `,
2212
+ bounce: `
2213
+ @keyframes ash-bounce {
2214
+ 0%, 80%, 100% { transform: scale(0); }
2215
+ 40% { transform: scale(1); }
2216
+ }
2217
+ `,
2218
+ pulse: `
2219
+ @keyframes ash-pulse {
2220
+ 0%, 100% { opacity: 1; }
2221
+ 50% { opacity: 0.5; }
2222
+ }
2223
+ `,
2224
+ glowPulse: `
2225
+ @keyframes ash-glow-pulse {
2226
+ 0%, 100% { box-shadow: 0 0 20px rgba(204, 255, 0, 0.3); }
2227
+ 50% { box-shadow: 0 0 40px rgba(204, 255, 0, 0.5); }
2228
+ }
2229
+ `
2230
+ };
2231
+ var allKeyframesCss = Object.values(keyframesCss).join("\n");
2232
+ var transitions = {
2233
+ fast: "150ms ease-out",
2234
+ normal: "300ms ease-out",
2235
+ slow: "500ms ease-out",
2236
+ spring: "400ms cubic-bezier(0.16, 1, 0.3, 1)"
2237
+ };
2238
+ var zIndex = {
2239
+ base: 0,
2240
+ dropdown: 100,
2241
+ modal: 200,
2242
+ tooltip: 300,
2243
+ widget: 999999
2244
+ };
2245
+ var widget = {
2246
+ launcher: {
2247
+ size: "60px",
2248
+ iconSize: "28px"
2249
+ },
2250
+ panel: {
2251
+ width: "400px",
2252
+ height: "600px",
2253
+ maxHeight: "80vh"
2254
+ },
2255
+ header: {
2256
+ height: "60px"
2257
+ },
2258
+ input: {
2259
+ minHeight: "60px",
2260
+ maxHeight: "150px"
2261
+ },
2262
+ message: {
2263
+ maxWidth: "85%",
2264
+ avatarSize: "32px"
2265
+ },
2266
+ gap: "20px"
2267
+ // Gap from edge of screen
2268
+ };
2269
+ function tokensToCssVariables(prefix = "ash") {
2270
+ const vars = {};
2271
+ vars[`--${prefix}-accent`] = colors.accent.DEFAULT;
2272
+ Object.entries(colors.accent).forEach(([key, value]) => {
2273
+ if (key !== "DEFAULT") vars[`--${prefix}-accent-${key}`] = value;
2274
+ });
2275
+ Object.entries(colors.surface).forEach(([key, value]) => {
2276
+ vars[`--${prefix}-surface-${key}`] = value;
2277
+ });
2278
+ Object.entries(colors.text).forEach(([key, value]) => {
2279
+ vars[`--${prefix}-text-${key}`] = value;
2280
+ });
2281
+ Object.entries(colors.border).forEach(([key, value]) => {
2282
+ if (key !== "DEFAULT") vars[`--${prefix}-border-${key}`] = value;
2283
+ else vars[`--${prefix}-border`] = value;
2284
+ });
2285
+ return vars;
2286
+ }
2287
+ var inlineStyles = {
2288
+ // Glass panel effect
2289
+ glassPanel: {
2290
+ backgroundColor: "rgba(255, 255, 255, 0.05)",
2291
+ backdropFilter: "blur(24px)",
2292
+ WebkitBackdropFilter: "blur(24px)",
2293
+ border: `1px solid ${colors.border.DEFAULT}`
2294
+ },
2295
+ // Accent button
2296
+ accentButton: {
2297
+ backgroundColor: colors.accent.DEFAULT,
2298
+ color: "#000000",
2299
+ border: `1px solid ${colors.accent.DEFAULT}`,
2300
+ boxShadow: shadows.glow.md
2301
+ },
2302
+ // Ghost button
2303
+ ghostButton: {
2304
+ backgroundColor: "transparent",
2305
+ color: colors.text.secondary,
2306
+ border: "1px solid transparent"
2307
+ },
2308
+ // User message bubble
2309
+ userMessage: {
2310
+ backgroundColor: colors.user.bg,
2311
+ border: `1px solid ${colors.user.border}`,
2312
+ borderRadius: borderRadius.lg
2313
+ },
2314
+ // Assistant message bubble
2315
+ assistantMessage: {
2316
+ backgroundColor: colors.assistant.bg,
2317
+ border: `1px solid ${colors.assistant.border}`,
2318
+ borderRadius: borderRadius.lg
2319
+ }
2320
+ };
2321
+
2322
+ exports.ActionIcon = ActionIcon;
2323
+ exports.AlertCircleIcon = AlertCircleIcon;
2324
+ exports.AlertTriangleIcon = AlertTriangleIcon;
2325
+ exports.AssistantMessage = AssistantMessage;
2326
+ exports.BotIcon = BotIcon;
2327
+ exports.BrainIcon = BrainIcon;
2328
+ exports.BugIcon = BugIcon;
2329
+ exports.CheckCircleIcon = CheckCircleIcon;
2330
+ exports.CheckIcon = CheckIcon;
2331
+ exports.ChevronDownIcon = ChevronDownIcon;
2332
+ exports.ChevronLeftIcon = ChevronLeftIcon;
2333
+ exports.ChevronRightIcon = ChevronRightIcon;
2334
+ exports.ChevronUpIcon = ChevronUpIcon;
2335
+ exports.CircleIcon = CircleIcon;
2336
+ exports.ClipboardListIcon = ClipboardListIcon;
2337
+ exports.CodeBlock = CodeBlock;
2338
+ exports.CodeIcon = CodeIcon;
2339
+ exports.CompactToolStatusLine = CompactToolStatusLine;
2340
+ exports.CopyIcon = CopyIcon;
2341
+ exports.DEFAULT_DISPLAY_CONFIG = DEFAULT_DISPLAY_CONFIG;
2342
+ exports.DisplayModeProvider = DisplayModeProvider;
2343
+ exports.EditIcon = EditIcon;
2344
+ exports.ErrorMessage = ErrorMessage;
2345
+ exports.FileIcon = FileIcon;
2346
+ exports.FilePlusIcon = FilePlusIcon;
2347
+ exports.FolderSearchIcon = FolderSearchIcon;
2348
+ exports.GlobeIcon = GlobeIcon;
2349
+ exports.InfoIcon = InfoIcon;
2350
+ exports.JsonDisplay = JsonDisplay;
2351
+ exports.ListChecksIcon = ListChecksIcon;
2352
+ exports.LoaderIcon = LoaderIcon;
2353
+ exports.LoadingIndicator = LoadingIndicator;
2354
+ exports.LogsPanel = LogsPanel;
2355
+ exports.MessageEntry = MessageEntry;
2356
+ exports.MessageList = MessageList;
2357
+ exports.MessageSquareIcon = MessageSquareIcon;
2358
+ exports.MoonIcon = MoonIcon;
2359
+ exports.OptionCards = OptionCards;
2360
+ exports.PaperclipIcon = PaperclipIcon;
2361
+ exports.PlugIcon = PlugIcon;
2362
+ exports.SearchIcon = SearchIcon;
2363
+ exports.SendIcon = SendIcon;
2364
+ exports.SparklesIcon = SparklesIcon;
2365
+ exports.StatusIndicator = StatusIndicator;
2366
+ exports.StopCircleIcon = StopCircleIcon;
2367
+ exports.StreamingText = StreamingText;
2368
+ exports.SunIcon = SunIcon;
2369
+ exports.TerminalIcon = TerminalIcon;
2370
+ exports.ThemeProvider = ThemeProvider;
2371
+ exports.ThinkingMessage = ThinkingMessage;
2372
+ exports.TodoPanel = TodoPanel;
2373
+ exports.ToolCallCard = ToolCallCard;
2374
+ exports.ToolCallMessage = ToolCallMessage;
2375
+ exports.ToolExecutionGroup = ToolExecutionGroup;
2376
+ exports.ToolIcon = ToolIcon;
2377
+ exports.TypewriterText = TypewriterText;
2378
+ exports.UserIcon = UserIcon;
2379
+ exports.UserMessage = UserMessage;
2380
+ exports.XCircleIcon = XCircleIcon;
2381
+ exports.XIcon = XIcon;
2382
+ exports.allKeyframesCss = allKeyframesCss;
2383
+ exports.borderRadius = borderRadius;
2384
+ exports.cn = cn;
2385
+ exports.colors = colors;
2386
+ exports.createToolCall = createToolCall;
2387
+ exports.extractTextContent = extractTextContent;
2388
+ exports.extractToolCallsFromGroup = extractToolCallsFromGroup;
2389
+ exports.formatFileSize = formatFileSize;
2390
+ exports.formatTimestamp = formatTimestamp;
2391
+ exports.formatToolName = formatToolName;
2392
+ exports.generateToolSummary = generateToolSummary;
2393
+ exports.getActionIcon = getActionIcon;
2394
+ exports.getActionLabel = getActionLabel;
2395
+ exports.groupEntriesForCompactMode = groupEntriesForCompactMode;
2396
+ exports.inlineStyles = inlineStyles;
2397
+ exports.isCommandRunAction = isCommandRunAction;
2398
+ exports.isErrorEntry = isErrorEntry;
2399
+ exports.isFileEditAction = isFileEditAction;
2400
+ exports.isFileReadAction = isFileReadAction;
2401
+ exports.isFileWriteAction = isFileWriteAction;
2402
+ exports.isGenericToolAction = isGenericToolAction;
2403
+ exports.isGlobAction = isGlobAction;
2404
+ exports.isMcpToolAction = isMcpToolAction;
2405
+ exports.isSearchAction = isSearchAction;
2406
+ exports.isTodoWriteAction = isTodoWriteAction;
2407
+ exports.isToolCallEntry = isToolCallEntry;
2408
+ exports.isWebFetchAction = isWebFetchAction;
2409
+ exports.isWebSearchAction = isWebSearchAction;
2410
+ exports.keyframes = keyframes;
2411
+ exports.keyframesCss = keyframesCss;
2412
+ exports.mapToolToActionType = mapToolToActionType;
2413
+ exports.normalizeToolResult = normalizeToolResult;
2414
+ exports.parseCommandResult = parseCommandResult;
2415
+ exports.parseMcpToolName = parseMcpToolName;
2416
+ exports.parseOptionsFromContent = parseOptionsFromContent;
2417
+ exports.shadows = shadows;
2418
+ exports.spacing = spacing;
2419
+ exports.tokensToCssVariables = tokensToCssVariables;
2420
+ exports.transitions = transitions;
2421
+ exports.truncate = truncate;
2422
+ exports.typography = typography;
2423
+ exports.updateToolCallWithResult = updateToolCallWithResult;
2424
+ exports.useDisplayConfig = useDisplayConfig;
2425
+ exports.useDisplayMode = useDisplayMode;
2426
+ exports.useTheme = useTheme;
2427
+ exports.widget = widget;
2428
+ exports.zIndex = zIndex;
2429
+ //# sourceMappingURL=index.cjs.map
2430
+ //# sourceMappingURL=index.cjs.map