@ash-cloud/ash-ui 0.0.1

package/dist/index.js

@@ -0,0 +1,2318 @@
+import { createContext, useState, useRef, useEffect, useMemo, useCallback, useContext } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import ReactMarkdown from 'react-markdown';
+
+// src/components/ToolCallCard.tsx
+
+// src/utils.ts
+function formatToolName(name) {
+  if (name.startsWith("mcp__")) {
+    const parts = name.split("__");
+    if (parts.length >= 3) {
+      return `mcp:${parts[1]}:${parts.slice(2).join(":")}`;
+    }
+  }
+  return name;
+}
+function parseMcpToolName(name) {
+  if (name.startsWith("mcp__")) {
+    const parts = name.split("__");
+    if (parts.length >= 3 && parts[1] !== void 0) {
+      return {
+        serverName: parts[1],
+        toolName: parts.slice(2).join("__")
+      };
+    }
+  }
+  return null;
+}
+function mapToolToActionType(toolName, input) {
+  const inputObj = input || {};
+  switch (toolName) {
+    case "Bash":
+      return {
+        action: "command_run",
+        command: inputObj.command || "",
+        description: inputObj.description
+      };
+    case "Read":
+      return {
+        action: "file_read",
+        path: inputObj.file_path || "",
+        offset: inputObj.offset,
+        limit: inputObj.limit
+      };
+    case "Edit":
+      return {
+        action: "file_edit",
+        path: inputObj.file_path || "",
+        oldString: inputObj.old_string,
+        newString: inputObj.new_string,
+        replaceAll: inputObj.replace_all
+      };
+    case "Write":
+      return {
+        action: "file_write",
+        path: inputObj.file_path || "",
+        content: inputObj.content
+      };
+    case "Grep":
+      return {
+        action: "search",
+        pattern: inputObj.pattern || "",
+        path: inputObj.path,
+        glob: inputObj.glob,
+        type: inputObj.type
+      };
+    case "Glob":
+      return {
+        action: "glob",
+        pattern: inputObj.pattern || "",
+        path: inputObj.path
+      };
+    case "WebFetch":
+      return {
+        action: "web_fetch",
+        url: inputObj.url || "",
+        prompt: inputObj.prompt
+      };
+    case "WebSearch":
+      return {
+        action: "web_search",
+        query: inputObj.query || ""
+      };
+    case "TodoWrite": {
+      const todos = inputObj.todos || [];
+      const stats = {
+        total: todos.length,
+        completed: todos.filter((t) => t.status === "completed").length,
+        inProgress: todos.filter((t) => t.status === "in_progress").length,
+        pending: todos.filter((t) => t.status === "pending").length
+      };
+      return {
+        action: "todo_write",
+        todos,
+        stats
+      };
+    }
+    default: {
+      const mcpParts = parseMcpToolName(toolName);
+      if (mcpParts) {
+        return {
+          action: "mcp_tool",
+          serverName: mcpParts.serverName,
+          toolName: mcpParts.toolName,
+          arguments: input
+        };
+      }
+      return {
+        action: "generic_tool",
+        toolName: formatToolName(toolName),
+        arguments: input
+      };
+    }
+  }
+}
+function generateToolSummary(_toolName, _input, actionType) {
+  switch (actionType.action) {
+    case "command_run": {
+      const cmd = actionType.command;
+      return cmd.length > 60 ? cmd.substring(0, 57) + "..." : cmd;
+    }
+    case "file_read":
+      return actionType.path;
+    case "file_edit":
+      return actionType.path;
+    case "file_write":
+      return actionType.path;
+    case "search":
+      return `${actionType.pattern}${actionType.path ? ` in ${actionType.path}` : ""}`;
+    case "glob":
+      return actionType.pattern;
+    case "web_fetch":
+      return actionType.url;
+    case "web_search":
+      return actionType.query;
+    case "mcp_tool":
+      return `${actionType.serverName}:${actionType.toolName}`;
+    case "generic_tool":
+      return actionType.toolName;
+    case "todo_write": {
+      const { stats } = actionType;
+      if (stats) {
+        return `${stats.completed}/${stats.total} completed`;
+      }
+      return `${actionType.todos.length} tasks`;
+    }
+    default:
+      return "Unknown tool";
+  }
+}
+function extractTextContent(content) {
+  if (typeof content === "string") return content;
+  if (Array.isArray(content)) {
+    return content.filter((item) => typeof item?.text === "string").map((item) => item.text).join("\n");
+  }
+  if (content && typeof content === "object" && "text" in content) {
+    return String(content.text);
+  }
+  return JSON.stringify(content, null, 2);
+}
+function normalizeToolResult(content) {
+  if (typeof content === "string") {
+    try {
+      const parsed = JSON.parse(content);
+      return { type: "json", value: parsed };
+    } catch {
+      return { type: "markdown", value: content };
+    }
+  }
+  if (Array.isArray(content)) {
+    const texts = content.filter(
+      (item) => item?.type === "text" && typeof item.text === "string"
+    ).map((item) => item.text);
+    if (texts.length > 0) {
+      const joined = texts.join("\n\n");
+      try {
+        return { type: "json", value: JSON.parse(joined) };
+      } catch {
+        return { type: "markdown", value: joined };
+      }
+    }
+  }
+  return { type: "json", value: content };
+}
+function parseCommandResult(content) {
+  const output = extractTextContent(content);
+  if (typeof content === "string") {
+    try {
+      const parsed = JSON.parse(content);
+      if (typeof parsed.exitCode === "number") {
+        return {
+          exitCode: parsed.exitCode,
+          output: parsed.output || output,
+          success: parsed.exitCode === 0
+        };
+      }
+    } catch {
+    }
+  }
+  return {
+    output,
+    success: true
+  };
+}
+function createToolCall(toolUse) {
+  const actionType = mapToolToActionType(toolUse.name, toolUse.input);
+  const summary = generateToolSummary(toolUse.name, toolUse.input, actionType);
+  return {
+    id: toolUse.id,
+    toolName: toolUse.name,
+    actionType,
+    status: "pending",
+    summary,
+    startedAt: (/* @__PURE__ */ new Date()).toISOString()
+  };
+}
+function updateToolCallWithResult(toolCall, content, isError) {
+  const updatedToolCall = { ...toolCall };
+  const actionType = { ...toolCall.actionType };
+  updatedToolCall.status = isError ? "failed" : "success";
+  updatedToolCall.completedAt = (/* @__PURE__ */ new Date()).toISOString();
+  updatedToolCall.isError = isError;
+  if (actionType.action === "command_run") {
+    const result = parseCommandResult(content);
+    actionType.result = result;
+    if (result.exitCode !== void 0 && result.exitCode !== 0) {
+      updatedToolCall.status = "failed";
+      updatedToolCall.isError = true;
+    }
+  } else if (actionType.action === "mcp_tool" || actionType.action === "generic_tool") {
+    actionType.result = normalizeToolResult(content);
+  }
+  updatedToolCall.actionType = actionType;
+  return updatedToolCall;
+}
+function getActionIcon(actionType) {
+  switch (actionType.action) {
+    case "command_run":
+      return "terminal";
+    case "file_read":
+      return "file-text";
+    case "file_edit":
+      return "edit";
+    case "file_write":
+      return "file-plus";
+    case "search":
+      return "search";
+    case "glob":
+      return "folder-search";
+    case "web_fetch":
+      return "globe";
+    case "web_search":
+      return "search";
+    case "mcp_tool":
+      return "plug";
+    case "generic_tool":
+      return "tool";
+    case "todo_write":
+      return "list-checks";
+    default:
+      return "tool";
+  }
+}
+function getActionLabel(actionType) {
+  switch (actionType.action) {
+    case "command_run":
+      return "Command";
+    case "file_read":
+      return "Read";
+    case "file_edit":
+      return "Edit";
+    case "file_write":
+      return "Write";
+    case "search":
+      return "Search";
+    case "glob":
+      return "Glob";
+    case "web_fetch":
+      return "Fetch";
+    case "web_search":
+      return "Search";
+    case "mcp_tool":
+      return "MCP";
+    case "generic_tool":
+      return "Tool";
+    case "todo_write":
+      return "Tasks";
+    default:
+      return "Tool";
+  }
+}
+function formatFileSize(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+function formatTimestamp(timestamp) {
+  try {
+    const date = new Date(timestamp);
+    return date.toLocaleTimeString("en-US", {
+      hour: "2-digit",
+      minute: "2-digit",
+      second: "2-digit",
+      hour12: false
+    });
+  } catch {
+    return timestamp;
+  }
+}
+function truncate(str, maxLength) {
+  if (str.length <= maxLength) return str;
+  return str.substring(0, maxLength - 3) + "...";
+}
+function cn(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+function groupEntriesForCompactMode(entries, config) {
+  const result = [];
+  let currentToolGroup = [];
+  let toolGroupCounter = 0;
+  const flushToolGroup = () => {
+    if (currentToolGroup.length > 0) {
+      result.push({
+        type: "tool_group",
+        entries: [...currentToolGroup],
+        id: `tool-group-${toolGroupCounter++}`
+      });
+      currentToolGroup = [];
+    }
+  };
+  for (const entry of entries) {
+    if (entry.entryType.type === "tool_call") {
+      currentToolGroup.push(entry);
+      if (config.breakEveryNToolCalls && config.breakEveryNToolCalls > 0 && currentToolGroup.length >= config.breakEveryNToolCalls) {
+        flushToolGroup();
+      }
+    } else {
+      flushToolGroup();
+      result.push({ type: "single", entry });
+    }
+  }
+  flushToolGroup();
+  return result;
+}
+function extractToolCallsFromGroup(entries) {
+  return entries.filter(
+    (e) => e.entryType.type === "tool_call"
+  ).map((e) => e.entryType.toolCall);
+}
+function parseOptionsFromContent(content) {
+  const optionPattern = /(?:\*\*)?Option\s+(\d+)(?:\*\*)?[:\-]\s*([^\n]+)(?:\n((?:(?!\n(?:\*\*)?Option\s+\d).)*?))?/gi;
+  const options = [];
+  let firstMatchStart = -1;
+  let match;
+  optionPattern.lastIndex = 0;
+  while ((match = optionPattern.exec(content)) !== null) {
+    if (firstMatchStart === -1) {
+      firstMatchStart = match.index;
+    }
+    const id = match[1] ?? "";
+    const labelRaw = match[2];
+    const label = labelRaw ? labelRaw.trim() : "";
+    const descriptionRaw = match[3];
+    let description;
+    if (descriptionRaw) {
+      const cleaned = descriptionRaw.split("\n").map((line) => line.trim()).filter((line) => line.length > 0).join(" ");
+      if (cleaned) {
+        description = cleaned;
+      }
+    }
+    options.push({ id, label, description });
+  }
+  if (options.length >= 2) {
+    const preamble = firstMatchStart > 0 ? content.substring(0, firstMatchStart).trim() : "";
+    return { preamble, options };
+  }
+  const questionPattern = /^(.*?(?:what would you like to do\??|choose an option|select.*?:|here are your options.*?:))\s*\n+((?:\d+\.\s+.+\n?)+)/ims;
+  const questionMatch = content.match(questionPattern);
+  if (questionMatch && questionMatch[1] && questionMatch[2]) {
+    const preamble = questionMatch[1].trim();
+    const listSection = questionMatch[2];
+    const listPattern = /(\d+)\.\s+([^\n]+)/g;
+    let listMatch;
+    while ((listMatch = listPattern.exec(listSection)) !== null) {
+      const listId = listMatch[1] ?? "";
+      const listLabelRaw = listMatch[2];
+      const listLabel = listLabelRaw ? listLabelRaw.trim() : "";
+      options.push({
+        id: listId,
+        label: listLabel
+      });
+    }
+    if (options.length >= 2) {
+      return { preamble, options };
+    }
+  }
+  return null;
+}
+function SunIcon({ className }) {
+  return /* @__PURE__ */ jsxs("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "5" }),
+    /* @__PURE__ */ jsx("line", { x1: "12", y1: "1", x2: "12", y2: "3" }),
+    /* @__PURE__ */ jsx("line", { x1: "12", y1: "21", x2: "12", y2: "23" }),
+    /* @__PURE__ */ jsx("line", { x1: "4.22", y1: "4.22", x2: "5.64", y2: "5.64" }),
+    /* @__PURE__ */ jsx("line", { x1: "18.36", y1: "18.36", x2: "19.78", y2: "19.78" }),
+    /* @__PURE__ */ jsx("line", { x1: "1", y1: "12", x2: "3", y2: "12" }),
+    /* @__PURE__ */ jsx("line", { x1: "21", y1: "12", x2: "23", y2: "12" }),
+    /* @__PURE__ */ jsx("line", { x1: "4.22", y1: "19.78", x2: "5.64", y2: "18.36" }),
+    /* @__PURE__ */ jsx("line", { x1: "18.36", y1: "5.64", x2: "19.78", y2: "4.22" })
+  ] });
+}
+function MoonIcon({ className }) {
+  return /* @__PURE__ */ jsx("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx("path", { d: "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" }) });
+}
+function ChevronDownIcon({ className }) {
+  return /* @__PURE__ */ jsx("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx("polyline", { points: "6 9 12 15 18 9" }) });
+}
+function ChevronRightIcon({ className }) {
+  return /* @__PURE__ */ jsx("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx("polyline", { points: "9 18 15 12 9 6" }) });
+}
+function ChevronLeftIcon({ className }) {
+  return /* @__PURE__ */ jsx("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx("polyline", { points: "15 18 9 12 15 6" }) });
+}
+function ChevronUpIcon({ className }) {
+  return /* @__PURE__ */ jsx("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx("polyline", { points: "18 15 12 9 6 15" }) });
+}
+function TerminalIcon({ className }) {
+  return /* @__PURE__ */ jsxs("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+    /* @__PURE__ */ jsx("polyline", { points: "4 17 10 11 4 5" }),
+    /* @__PURE__ */ jsx("line", { x1: "12", y1: "19", x2: "20", y2: "19" })
+  ] });
+}
+function FileIcon({ className }) {
+  return /* @__PURE__ */ jsxs("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+    /* @__PURE__ */ jsx("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
+    /* @__PURE__ */ jsx("polyline", { points: "14 2 14 8 20 8" }),
+    /* @__PURE__ */ jsx("line", { x1: "16", y1: "13", x2: "8", y2: "13" }),
+    /* @__PURE__ */ jsx("line", { x1: "16", y1: "17", x2: "8", y2: "17" })
+  ] });
+}
+function EditIcon({ className }) {
+  return /* @__PURE__ */ jsxs("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+    /* @__PURE__ */ jsx("path", { d: "M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" }),
+    /* @__PURE__ */ jsx("path", { d: "M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" })
+  ] });
+}
+function FilePlusIcon({ className }) {
+  return /* @__PURE__ */ jsxs("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+    /* @__PURE__ */ jsx("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
+    /* @__PURE__ */ jsx("polyline", { points: "14 2 14 8 20 8" }),
+    /* @__PURE__ */ jsx("line", { x1: "12", y1: "18", x2: "12", y2: "12" }),
+    /* @__PURE__ */ jsx("line", { x1: "9", y1: "15", x2: "15", y2: "15" })
+  ] });
+}
+function SearchIcon({ className }) {
+  return /* @__PURE__ */ jsxs("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+    /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "8" }),
+    /* @__PURE__ */ jsx("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })
+  ] });
+}
+function GlobeIcon({ className }) {
+  return /* @__PURE__ */ jsxs("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ jsx("line", { x1: "2", y1: "12", x2: "22", y2: "12" }),
+    /* @__PURE__ */ 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" })
+  ] });
+}
+function PlugIcon({ className }) {
+  return /* @__PURE__ */ jsxs("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+    /* @__PURE__ */ jsx("path", { d: "M12 2v6" }),
+    /* @__PURE__ */ jsx("path", { d: "M6 6v4a6 6 0 0 0 12 0V6" }),
+    /* @__PURE__ */ jsx("path", { d: "M12 16v6" })
+  ] });
+}
+function ToolIcon({ className }) {
+  return /* @__PURE__ */ jsx("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ 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" }) });
+}
+function FolderSearchIcon({ className }) {
+  return /* @__PURE__ */ jsxs("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+    /* @__PURE__ */ 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" }),
+    /* @__PURE__ */ jsx("circle", { cx: "11", cy: "13", r: "3" }),
+    /* @__PURE__ */ jsx("line", { x1: "15", y1: "16", x2: "17", y2: "18" })
+  ] });
+}
+function CodeIcon({ className }) {
+  return /* @__PURE__ */ jsxs("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+    /* @__PURE__ */ jsx("polyline", { points: "16 18 22 12 16 6" }),
+    /* @__PURE__ */ jsx("polyline", { points: "8 6 2 12 8 18" })
+  ] });
+}
+function CopyIcon({ className }) {
+  return /* @__PURE__ */ jsxs("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+    /* @__PURE__ */ jsx("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }),
+    /* @__PURE__ */ jsx("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })
+  ] });
+}
+function CheckIcon({ className }) {
+  return /* @__PURE__ */ jsx("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" }) });
+}
+function XIcon({ className }) {
+  return /* @__PURE__ */ jsxs("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+    /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+    /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+  ] });
+}
+function LoaderIcon({ className }) {
+  return /* @__PURE__ */ jsxs("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+    /* @__PURE__ */ jsx("line", { x1: "12", y1: "2", x2: "12", y2: "6" }),
+    /* @__PURE__ */ jsx("line", { x1: "12", y1: "18", x2: "12", y2: "22" }),
+    /* @__PURE__ */ jsx("line", { x1: "4.93", y1: "4.93", x2: "7.76", y2: "7.76" }),
+    /* @__PURE__ */ jsx("line", { x1: "16.24", y1: "16.24", x2: "19.07", y2: "19.07" }),
+    /* @__PURE__ */ jsx("line", { x1: "2", y1: "12", x2: "6", y2: "12" }),
+    /* @__PURE__ */ jsx("line", { x1: "18", y1: "12", x2: "22", y2: "12" }),
+    /* @__PURE__ */ jsx("line", { x1: "4.93", y1: "19.07", x2: "7.76", y2: "16.24" }),
+    /* @__PURE__ */ jsx("line", { x1: "16.24", y1: "7.76", x2: "19.07", y2: "4.93" })
+  ] });
+}
+function InfoIcon({ className }) {
+  return /* @__PURE__ */ jsxs("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ jsx("line", { x1: "12", y1: "16", x2: "12", y2: "12" }),
+    /* @__PURE__ */ jsx("line", { x1: "12", y1: "8", x2: "12.01", y2: "8" })
+  ] });
+}
+function AlertTriangleIcon({ className }) {
+  return /* @__PURE__ */ jsxs("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+    /* @__PURE__ */ 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" }),
+    /* @__PURE__ */ jsx("line", { x1: "12", y1: "9", x2: "12", y2: "13" }),
+    /* @__PURE__ */ jsx("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })
+  ] });
+}
+function AlertCircleIcon({ className }) {
+  return /* @__PURE__ */ jsxs("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ jsx("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
+    /* @__PURE__ */ jsx("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })
+  ] });
+}
+function BugIcon({ className }) {
+  return /* @__PURE__ */ jsxs("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+    /* @__PURE__ */ jsx("rect", { x: "8", y: "6", width: "8", height: "14", rx: "4" }),
+    /* @__PURE__ */ jsx("path", { d: "M3 10h2" }),
+    /* @__PURE__ */ jsx("path", { d: "M19 10h2" }),
+    /* @__PURE__ */ jsx("path", { d: "M3 14h2" }),
+    /* @__PURE__ */ jsx("path", { d: "M19 14h2" }),
+    /* @__PURE__ */ jsx("path", { d: "M9 2h6" }),
+    /* @__PURE__ */ jsx("path", { d: "M12 2v4" })
+  ] });
+}
+function CheckCircleIcon({ className }) {
+  return /* @__PURE__ */ jsxs("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ jsx("path", { d: "M9 12l2 2 4-4" })
+  ] });
+}
+function XCircleIcon({ className }) {
+  return /* @__PURE__ */ jsxs("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ jsx("line", { x1: "15", y1: "9", x2: "9", y2: "15" }),
+    /* @__PURE__ */ jsx("line", { x1: "9", y1: "9", x2: "15", y2: "15" })
+  ] });
+}
+function SendIcon({ className }) {
+  return /* @__PURE__ */ jsxs("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+    /* @__PURE__ */ jsx("line", { x1: "22", y1: "2", x2: "11", y2: "13" }),
+    /* @__PURE__ */ jsx("polygon", { points: "22 2 15 22 11 13 2 9 22 2" })
+  ] });
+}
+function PaperclipIcon({ className }) {
+  return /* @__PURE__ */ jsx("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ 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" }) });
+}
+function StopCircleIcon({ className }) {
+  return /* @__PURE__ */ jsxs("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ jsx("rect", { x: "9", y: "9", width: "6", height: "6" })
+  ] });
+}
+function MessageSquareIcon({ className }) {
+  return /* @__PURE__ */ jsx("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ 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" }) });
+}
+function SparklesIcon({ className }) {
+  return /* @__PURE__ */ jsxs("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+    /* @__PURE__ */ jsx("path", { d: "M12 3l1.5 4.5L18 9l-4.5 1.5L12 15l-1.5-4.5L6 9l4.5-1.5L12 3z" }),
+    /* @__PURE__ */ jsx("path", { d: "M5 19l.5 1.5L7 21l-1.5.5L5 23l-.5-1.5L3 21l1.5-.5L5 19z" }),
+    /* @__PURE__ */ jsx("path", { d: "M19 11l.5 1.5L21 13l-1.5.5L19 15l-.5-1.5L17 13l1.5-.5L19 11z" })
+  ] });
+}
+function BrainIcon({ className }) {
+  return /* @__PURE__ */ jsxs("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+    /* @__PURE__ */ 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" }),
+    /* @__PURE__ */ 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" })
+  ] });
+}
+function BotIcon({ className }) {
+  return /* @__PURE__ */ jsxs("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+    /* @__PURE__ */ jsx("path", { d: "M12 8V4H8" }),
+    /* @__PURE__ */ jsx("rect", { x: "5", y: "8", width: "14", height: "12", rx: "2" }),
+    /* @__PURE__ */ jsx("path", { d: "M2 14h2" }),
+    /* @__PURE__ */ jsx("path", { d: "M20 14h2" }),
+    /* @__PURE__ */ jsx("path", { d: "M9 13v2" }),
+    /* @__PURE__ */ jsx("path", { d: "M15 13v2" })
+  ] });
+}
+function UserIcon({ className }) {
+  return /* @__PURE__ */ jsxs("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+    /* @__PURE__ */ jsx("path", { d: "M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" }),
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "7", r: "4" })
+  ] });
+}
+function CircleIcon({ className }) {
+  return /* @__PURE__ */ jsx("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }) });
+}
+function ListChecksIcon({ className }) {
+  return /* @__PURE__ */ jsxs("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+    /* @__PURE__ */ jsx("path", { d: "M10 6h11" }),
+    /* @__PURE__ */ jsx("path", { d: "M10 12h11" }),
+    /* @__PURE__ */ jsx("path", { d: "M10 18h11" }),
+    /* @__PURE__ */ jsx("path", { d: "M3 6l2 2 4-4" }),
+    /* @__PURE__ */ jsx("path", { d: "M3 12l2 2 4-4" }),
+    /* @__PURE__ */ jsx("path", { d: "M3 18l2 2 4-4" })
+  ] });
+}
+function ClipboardListIcon({ className }) {
+  return /* @__PURE__ */ jsxs("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+    /* @__PURE__ */ jsx("rect", { x: "8", y: "2", width: "8", height: "4", rx: "1", ry: "1" }),
+    /* @__PURE__ */ 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" }),
+    /* @__PURE__ */ jsx("path", { d: "M12 11h4" }),
+    /* @__PURE__ */ jsx("path", { d: "M12 16h4" }),
+    /* @__PURE__ */ jsx("path", { d: "M8 11h.01" }),
+    /* @__PURE__ */ jsx("path", { d: "M8 16h.01" })
+  ] });
+}
+function StatusIndicator({ status, size = "sm", className }) {
+  const sizeClasses = {
+    sm: "w-2 h-2",
+    md: "w-3 h-3",
+    lg: "w-4 h-4"
+  };
+  const statusClasses = {
+    pending: "ash-status-pending",
+    success: "ash-status-success",
+    failed: "ash-status-failed"
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "rounded-full flex-shrink-0",
+        sizeClasses[size],
+        statusClasses[status],
+        className
+      )
+    }
+  );
+}
+function ActionIcon({ actionType, className = "w-4 h-4" }) {
+  switch (actionType.action) {
+    case "command_run":
+      return /* @__PURE__ */ jsx(TerminalIcon, { className });
+    case "file_read":
+      return /* @__PURE__ */ jsx(FileIcon, { className });
+    case "file_edit":
+      return /* @__PURE__ */ jsx(EditIcon, { className });
+    case "file_write":
+      return /* @__PURE__ */ jsx(FilePlusIcon, { className });
+    case "search":
+      return /* @__PURE__ */ jsx(SearchIcon, { className });
+    case "glob":
+      return /* @__PURE__ */ jsx(FolderSearchIcon, { className });
+    case "web_fetch":
+      return /* @__PURE__ */ jsx(GlobeIcon, { className });
+    case "web_search":
+      return /* @__PURE__ */ jsx(SearchIcon, { className });
+    case "mcp_tool":
+      return /* @__PURE__ */ jsx(PlugIcon, { className });
+    case "todo_write":
+      return /* @__PURE__ */ jsx(ListChecksIcon, { className });
+    case "generic_tool":
+    default:
+      return /* @__PURE__ */ jsx(ToolIcon, { className });
+  }
+}
+function CodeBlock({
+  children,
+  maxHeight = 200,
+  language,
+  showLineNumbers = false,
+  className
+}) {
+  const [expanded, setExpanded] = useState(false);
+  const lines = children.split("\n");
+  const isLong = lines.length > 10 || children.length > 500;
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
+    /* @__PURE__ */ jsx(
+      "pre",
+      {
+        className: cn(
+          "ash-tool-code-block text-xs font-mono text-white/90 p-3 rounded-xl overflow-x-auto whitespace-pre-wrap break-words",
+          !expanded && isLong && "overflow-y-hidden"
+        ),
+        style: !expanded && isLong ? { maxHeight } : void 0,
+        "data-language": language,
+        children: showLineNumbers ? /* @__PURE__ */ jsx("code", { children: lines.map((line, i) => /* @__PURE__ */ jsxs("span", { className: "block", children: [
+          /* @__PURE__ */ jsx("span", { className: "inline-block w-8 text-white/30 select-none text-right pr-2", children: i + 1 }),
+          /* @__PURE__ */ jsx("span", { className: "text-white/80", children: line })
+        ] }, i)) }) : /* @__PURE__ */ jsx("code", { className: "text-white/80", children })
+      }
+    ),
+    isLong && !expanded && /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 left-0 right-0 h-12 ash-truncate-fade flex items-end justify-center pb-2", children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: () => setExpanded(true),
+        className: "text-xs text-[var(--ash-accent)] hover:text-[var(--ash-accent-300)] font-medium transition-colors",
+        children: "Show more"
+      }
+    ) }),
+    isLong && expanded && /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: () => setExpanded(false),
+        className: "text-xs text-[var(--ash-accent)] hover:text-[var(--ash-accent-300)] font-medium mt-2 transition-colors",
+        children: "Show less"
+      }
+    )
+  ] });
+}
+function JsonDisplay({ value, maxHeight, className }) {
+  const formatted = JSON.stringify(value, null, 2);
+  return /* @__PURE__ */ jsx(CodeBlock, { maxHeight, className, children: formatted });
+}
+function SectionHeader({ children }) {
+  return /* @__PURE__ */ jsx("div", { className: "ash-tool-section-header", children });
+}
+function SectionContent({ children }) {
+  return /* @__PURE__ */ jsx("div", { className: "px-3 py-2", children });
+}
+function CommandRunDetails({ action }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    action.command && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(SectionHeader, { children: "COMMAND" }),
+      /* @__PURE__ */ jsx(SectionContent, { children: /* @__PURE__ */ jsx(CodeBlock, { children: action.command }) })
+    ] }),
+    action.result?.output && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(SectionHeader, { children: "OUTPUT" }),
+      /* @__PURE__ */ jsxs(SectionContent, { children: [
+        /* @__PURE__ */ jsx(CodeBlock, { maxHeight: 300, children: action.result.output }),
+        action.result.exitCode !== void 0 && action.result.exitCode !== 0 && /* @__PURE__ */ jsxs("div", { className: "mt-2 text-xs text-red-400", children: [
+          "Exit code: ",
+          action.result.exitCode
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function FileReadDetails({ action }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(SectionHeader, { children: "PATH" }),
+    /* @__PURE__ */ jsxs(SectionContent, { children: [
+      /* @__PURE__ */ jsx("code", { className: "text-xs font-mono bg-white/10 text-white/90 px-1 py-0.5 rounded", children: action.path }),
+      (action.offset !== void 0 || action.limit !== void 0) && /* @__PURE__ */ jsxs("div", { className: "mt-1 text-xs text-white/50", children: [
+        action.offset !== void 0 && /* @__PURE__ */ jsxs("span", { children: [
+          "Offset: ",
+          action.offset
+        ] }),
+        action.offset !== void 0 && action.limit !== void 0 && /* @__PURE__ */ jsx("span", { children: " \xB7 " }),
+        action.limit !== void 0 && /* @__PURE__ */ jsxs("span", { children: [
+          "Limit: ",
+          action.limit
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function FileEditDetails({ action }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(SectionHeader, { children: "PATH" }),
+    /* @__PURE__ */ jsx(SectionContent, { children: /* @__PURE__ */ jsx("code", { className: "text-xs font-mono bg-white/10 text-white/90 px-1 py-0.5 rounded", children: action.path }) }),
+    action.oldString && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(SectionHeader, { children: "OLD" }),
+      /* @__PURE__ */ jsx(SectionContent, { children: /* @__PURE__ */ jsx(CodeBlock, { children: action.oldString }) })
+    ] }),
+    action.newString && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(SectionHeader, { children: "NEW" }),
+      /* @__PURE__ */ jsx(SectionContent, { children: /* @__PURE__ */ jsx(CodeBlock, { children: action.newString }) })
+    ] })
+  ] });
+}
+function FileWriteDetails({ action }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(SectionHeader, { children: "PATH" }),
+    /* @__PURE__ */ jsx(SectionContent, { children: /* @__PURE__ */ jsx("code", { className: "text-xs font-mono bg-white/10 text-white/90 px-1 py-0.5 rounded", children: action.path }) }),
+    action.content && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(SectionHeader, { children: "CONTENT" }),
+      /* @__PURE__ */ jsx(SectionContent, { children: /* @__PURE__ */ jsx(CodeBlock, { maxHeight: 300, children: action.content }) })
+    ] })
+  ] });
+}
+function SearchDetails({ action }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(SectionHeader, { children: "PATTERN" }),
+    /* @__PURE__ */ jsxs(SectionContent, { children: [
+      /* @__PURE__ */ jsx("code", { className: "text-xs font-mono bg-white/10 text-white/90 px-1 py-0.5 rounded", children: action.pattern }),
+      (action.path || action.glob || action.type) && /* @__PURE__ */ jsxs("div", { className: "mt-1 text-xs text-white/50", children: [
+        action.path && /* @__PURE__ */ jsxs("span", { children: [
+          "Path: ",
+          action.path
+        ] }),
+        action.glob && /* @__PURE__ */ jsxs("span", { children: [
+          "Glob: ",
+          action.glob
+        ] }),
+        action.type && /* @__PURE__ */ jsxs("span", { children: [
+          "Type: ",
+          action.type
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function GlobDetails({ action }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(SectionHeader, { children: "PATTERN" }),
+    /* @__PURE__ */ jsxs(SectionContent, { children: [
+      /* @__PURE__ */ jsx("code", { className: "text-xs font-mono bg-white/10 text-white/90 px-1 py-0.5 rounded", children: action.pattern }),
+      action.path && /* @__PURE__ */ jsxs("div", { className: "mt-1 text-xs text-white/50", children: [
+        "Path: ",
+        action.path
+      ] })
+    ] })
+  ] });
+}
+function WebFetchDetails({ action }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(SectionHeader, { children: "URL" }),
+    /* @__PURE__ */ jsxs(SectionContent, { children: [
+      /* @__PURE__ */ jsx(
+        "a",
+        {
+          href: action.url,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          className: "text-xs text-blue-400 hover:text-blue-300 underline break-all",
+          children: action.url
+        }
+      ),
+      action.prompt && /* @__PURE__ */ jsx("div", { className: "mt-2 text-xs text-white/50", children: action.prompt })
+    ] })
+  ] });
+}
+function WebSearchDetails({ action }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(SectionHeader, { children: "QUERY" }),
+    /* @__PURE__ */ jsx(SectionContent, { children: /* @__PURE__ */ jsx("span", { className: "text-sm text-white/90", children: action.query }) })
+  ] });
+}
+function McpToolDetails({ action }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(SectionHeader, { children: "TOOL" }),
+    /* @__PURE__ */ jsx(SectionContent, { children: /* @__PURE__ */ jsxs("code", { className: "text-xs font-mono bg-white/10 text-white/90 px-1 py-0.5 rounded", children: [
+      action.serverName,
+      ":",
+      action.toolName
+    ] }) }),
+    action.arguments && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(SectionHeader, { children: "ARGS" }),
+      /* @__PURE__ */ jsx(SectionContent, { children: /* @__PURE__ */ jsx(JsonDisplay, { value: action.arguments }) })
+    ] }),
+    action.result && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(SectionHeader, { children: "RESULT" }),
+      /* @__PURE__ */ jsx(SectionContent, { children: action.result.type === "markdown" ? /* @__PURE__ */ jsx(CodeBlock, { children: String(action.result.value) }) : /* @__PURE__ */ jsx(JsonDisplay, { value: action.result.value }) })
+    ] })
+  ] });
+}
+function GenericToolDetails({ action }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    action.arguments && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(SectionHeader, { children: "ARGS" }),
+      /* @__PURE__ */ jsx(SectionContent, { children: /* @__PURE__ */ jsx(JsonDisplay, { value: action.arguments }) })
+    ] }),
+    action.result && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(SectionHeader, { children: "RESULT" }),
+      /* @__PURE__ */ jsx(SectionContent, { children: action.result.type === "markdown" ? /* @__PURE__ */ jsx(CodeBlock, { children: String(action.result.value) }) : /* @__PURE__ */ jsx(JsonDisplay, { value: action.result.value }) })
+    ] })
+  ] });
+}
+function TodoWriteDetails({ action }) {
+  const { todos, stats } = action;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    stats && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(SectionHeader, { children: "PROGRESS" }),
+      /* @__PURE__ */ jsxs(SectionContent, { children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ jsx("div", { className: "flex-1 h-2 bg-white/10 rounded-full overflow-hidden", children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "h-full bg-emerald-400 rounded-full transition-all duration-500 ease-out",
+              style: { width: `${stats.total > 0 ? stats.completed / stats.total * 100 : 0}%` }
+            }
+          ) }),
+          /* @__PURE__ */ jsxs("span", { className: "text-xs text-white/60 tabular-nums", children: [
+            stats.completed,
+            "/",
+            stats.total
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex gap-3 mt-2 text-xs", children: [
+          stats.inProgress > 0 && /* @__PURE__ */ jsxs("span", { className: "text-yellow-400", children: [
+            stats.inProgress,
+            " in progress"
+          ] }),
+          stats.pending > 0 && /* @__PURE__ */ jsxs("span", { className: "text-white/40", children: [
+            stats.pending,
+            " pending"
+          ] })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(SectionHeader, { children: "TASKS" }),
+    /* @__PURE__ */ jsx(SectionContent, { children: /* @__PURE__ */ jsx("div", { className: "space-y-1.5", children: todos.map((todo, index) => {
+      const displayText = todo.status === "in_progress" ? todo.activeForm : todo.content;
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "flex items-start gap-2 py-1 transition-all duration-200",
+            todo.status === "completed" && "opacity-50",
+            todo.status === "in_progress" && "bg-yellow-500/10 -mx-2 px-2 rounded"
+          ),
+          children: [
+            todo.status === "completed" ? /* @__PURE__ */ jsx(CheckCircleIcon, { className: "w-4 h-4 text-emerald-400 shrink-0 mt-0.5" }) : todo.status === "in_progress" ? /* @__PURE__ */ jsx(LoaderIcon, { className: "w-4 h-4 text-yellow-400 animate-spin shrink-0 mt-0.5" }) : /* @__PURE__ */ jsx(CircleIcon, { className: "w-4 h-4 text-white/30 shrink-0 mt-0.5" }),
+            /* @__PURE__ */ jsxs(
+              "span",
+              {
+                className: cn(
+                  "text-sm leading-relaxed",
+                  todo.status === "completed" ? "text-white/50 line-through" : "text-white/80"
+                ),
+                children: [
+                  /* @__PURE__ */ jsxs("span", { className: "text-white/40 mr-1.5", children: [
+                    index + 1,
+                    "."
+                  ] }),
+                  displayText
+                ]
+              }
+            )
+          ]
+        },
+        `${todo.content}-${index}`
+      );
+    }) }) })
+  ] });
+}
+function ToolDetails({ actionType }) {
+  switch (actionType.action) {
+    case "command_run":
+      return /* @__PURE__ */ jsx(CommandRunDetails, { action: actionType });
+    case "file_read":
+      return /* @__PURE__ */ jsx(FileReadDetails, { action: actionType });
+    case "file_edit":
+      return /* @__PURE__ */ jsx(FileEditDetails, { action: actionType });
+    case "file_write":
+      return /* @__PURE__ */ jsx(FileWriteDetails, { action: actionType });
+    case "search":
+      return /* @__PURE__ */ jsx(SearchDetails, { action: actionType });
+    case "glob":
+      return /* @__PURE__ */ jsx(GlobDetails, { action: actionType });
+    case "web_fetch":
+      return /* @__PURE__ */ jsx(WebFetchDetails, { action: actionType });
+    case "web_search":
+      return /* @__PURE__ */ jsx(WebSearchDetails, { action: actionType });
+    case "mcp_tool":
+      return /* @__PURE__ */ jsx(McpToolDetails, { action: actionType });
+    case "generic_tool":
+      return /* @__PURE__ */ jsx(GenericToolDetails, { action: actionType });
+    case "todo_write":
+      return /* @__PURE__ */ jsx(TodoWriteDetails, { action: actionType });
+    default:
+      return null;
+  }
+}
+function hasDetails(actionType) {
+  switch (actionType.action) {
+    case "command_run":
+      return Boolean(actionType.command || actionType.result?.output);
+    case "file_read":
+      return true;
+    case "file_edit":
+      return Boolean(actionType.oldString || actionType.newString);
+    case "file_write":
+      return Boolean(actionType.content);
+    case "search":
+      return true;
+    case "glob":
+      return true;
+    case "web_fetch":
+      return true;
+    case "web_search":
+      return true;
+    case "mcp_tool":
+      return Boolean(actionType.arguments || actionType.result);
+    case "generic_tool":
+      return Boolean(actionType.arguments || actionType.result);
+    case "todo_write":
+      return actionType.todos.length > 0;
+    default:
+      return false;
+  }
+}
+function ToolCallCard({ toolCall, defaultExpanded = false, className }) {
+  const [expanded, setExpanded] = useState(defaultExpanded);
+  const { actionType, status, summary } = toolCall;
+  const canExpand = hasDetails(actionType);
+  const statusClasses = {
+    pending: "border-yellow-500/30 ash-tool-status-pending",
+    success: "border-white/10",
+    failed: "border-red-500/30"
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "rounded-xl border bg-[var(--ash-surface-dark,#0a0a0a)] overflow-hidden",
+        statusClasses[status],
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => canExpand && setExpanded(!expanded),
+            className: cn(
+              "w-full px-4 py-3 flex items-center justify-between transition-colors",
+              canExpand ? "hover:bg-white/5 cursor-pointer" : "cursor-default"
+            ),
+            disabled: !canExpand,
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 min-w-0 flex-1", children: [
+                /* @__PURE__ */ jsx("div", { className: cn(
+                  "w-6 h-6 rounded-lg flex items-center justify-center shrink-0",
+                  status === "pending" ? "bg-yellow-500/20" : status === "failed" ? "bg-red-500/20" : "bg-[var(--ash-accent)]/20"
+                ), children: /* @__PURE__ */ jsx(
+                  ActionIcon,
+                  {
+                    actionType,
+                    className: cn(
+                      "w-3.5 h-3.5",
+                      status === "pending" ? "text-yellow-400" : status === "failed" ? "text-red-400" : "text-[var(--ash-accent)]"
+                    )
+                  }
+                ) }),
+                /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-white shrink-0", children: getActionLabel(actionType) }),
+                /* @__PURE__ */ jsx("span", { className: "font-mono text-sm truncate text-white/60 min-w-0", children: summary })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 shrink-0", children: [
+                /* @__PURE__ */ jsx(StatusIndicator, { status, size: "sm" }),
+                canExpand && /* @__PURE__ */ jsx(
+                  ChevronDownIcon,
+                  {
+                    className: cn(
+                      "w-4 h-4 text-white/40 transition-transform duration-200",
+                      expanded && "rotate-180"
+                    )
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        expanded && canExpand && /* @__PURE__ */ jsxs("div", { className: "border-t border-white/5 max-h-[400px] overflow-y-auto ash-scrollbar bg-black/20", children: [
+          /* @__PURE__ */ jsx(ToolDetails, { actionType }),
+          status === "success" && /* @__PURE__ */ jsx("div", { className: "px-4 py-3 border-t border-white/5 bg-[var(--ash-accent)]/5", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(CheckIcon, { className: "w-4 h-4 text-[var(--ash-accent)]" }),
+            /* @__PURE__ */ jsx("span", { className: "text-sm text-[var(--ash-accent)] font-medium", children: "Completed successfully" })
+          ] }) })
+        ] })
+      ]
+    }
+  );
+}
+function OptionCards({ options, onSelect, className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("grid gap-2 mt-3", className), style: {
+    gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))"
+  }, children: options.map((option) => /* @__PURE__ */ jsxs(
+    "button",
+    {
+      onClick: () => onSelect(option),
+      className: cn(
+        "flex items-start gap-3 p-3 rounded-xl text-left",
+        "bg-white/5 border border-white/10",
+        "hover:bg-[var(--ash-accent)]/10 hover:border-[var(--ash-accent)]/30",
+        "focus:outline-none focus:ring-2 focus:ring-[var(--ash-accent)]/50",
+        "transition-all duration-200 cursor-pointer",
+        "group"
+      ),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: cn(
+          "flex-shrink-0 w-6 h-6 rounded-lg",
+          "bg-[var(--ash-accent)]/20 text-[var(--ash-accent)]",
+          "flex items-center justify-center",
+          "text-xs font-semibold",
+          "group-hover:bg-[var(--ash-accent)]/30",
+          "transition-colors duration-200"
+        ), children: option.id }),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-white/90 group-hover:text-white transition-colors", children: option.label }),
+          option.description && /* @__PURE__ */ jsx("div", { className: "text-xs text-white/50 mt-0.5 line-clamp-2 group-hover:text-white/60 transition-colors", children: option.description })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "svg",
+          {
+            className: cn(
+              "w-4 h-4 text-white/30 flex-shrink-0 mt-0.5",
+              "group-hover:text-[var(--ash-accent)] group-hover:translate-x-0.5",
+              "transition-all duration-200"
+            ),
+            fill: "none",
+            viewBox: "0 0 24 24",
+            stroke: "currentColor",
+            strokeWidth: 2,
+            children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" })
+          }
+        )
+      ]
+    },
+    option.id
+  )) });
+}
+function parseFilesFromContent(content) {
+  const fileMarker = "[Uploaded files available at /uploads/]";
+  const markerIndex = content.indexOf(fileMarker);
+  if (markerIndex === -1) {
+    return { text: content, files: [] };
+  }
+  const text = content.substring(0, markerIndex).trim();
+  const fileSection = content.substring(markerIndex + fileMarker.length).trim();
+  const files = fileSection.split("\n").filter((line) => line.startsWith("- ")).map((line) => line.substring(2).trim());
+  return { text, files };
+}
+function UserMessage({ entry, className }) {
+  const { text, files } = parseFilesFromContent(entry.content);
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex gap-3 justify-end ash-animate-fade-in", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "max-w-[85%]", children: [
+      /* @__PURE__ */ jsx("div", { className: "rounded-2xl p-4 bg-[var(--ash-accent)] text-[var(--ash-accent-foreground)]", children: /* @__PURE__ */ jsx("p", { className: "text-sm leading-relaxed whitespace-pre-wrap", children: text || "(files attached)" }) }),
+      files.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mt-2 pt-2 border-t border-[var(--ash-accent-foreground)]/20", children: [
+        /* @__PURE__ */ jsxs("div", { className: "text-xs text-[var(--ash-accent-foreground)]/60 mb-1 flex items-center gap-1", children: [
+          /* @__PURE__ */ jsx(PaperclipIcon, { className: "w-3 h-3" }),
+          "Attached Files"
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1", children: files.map((file, index) => /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "inline-flex items-center px-2 py-0.5 rounded-lg bg-[var(--ash-accent-foreground)]/10 text-xs",
+            title: file,
+            children: file.split(" (")[0]
+          },
+          index
+        )) })
+      ] }),
+      entry.timestamp && /* @__PURE__ */ jsx("div", { className: "text-xs text-white/40 mt-2", children: formatTimestamp(entry.timestamp) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "w-7 h-7 rounded-full bg-white/10 flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsx(UserIcon, { className: "w-4 h-4 text-white/50" }) })
+  ] });
+}
+function AssistantMessage({ entry, onOptionSelect, className }) {
+  const parsedOptions = parseOptionsFromContent(entry.content);
+  const handleOptionSelect = (option) => {
+    if (onOptionSelect) {
+      onOptionSelect(`Option ${option.id}: ${option.label}`);
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex gap-3 ash-animate-fade-in", className), children: [
+    /* @__PURE__ */ jsx("div", { className: "w-7 h-7 rounded-full bg-[var(--ash-accent)]/20 flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsx(BotIcon, { className: "w-4 h-4 text-[var(--ash-accent)]" }) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 max-w-[85%]", children: [
+      /* @__PURE__ */ jsx("div", { className: "ash-card-glass rounded-2xl p-4", children: /* @__PURE__ */ jsx("div", { className: "ash-message-content prose prose-sm prose-invert max-w-none text-sm leading-relaxed", children: parsedOptions ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        parsedOptions.preamble && /* @__PURE__ */ jsx(ReactMarkdown, { children: parsedOptions.preamble }),
+        /* @__PURE__ */ jsx(
+          OptionCards,
+          {
+            options: parsedOptions.options,
+            onSelect: handleOptionSelect
+          }
+        )
+      ] }) : /* @__PURE__ */ jsx(ReactMarkdown, { children: entry.content }) }) }),
+      entry.timestamp && /* @__PURE__ */ jsx("div", { className: "text-xs text-white/40 mt-2", children: formatTimestamp(entry.timestamp) })
+    ] })
+  ] });
+}
+function ThinkingMessage({ entry, className }) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex gap-3 ash-animate-fade-in", className), children: [
+    /* @__PURE__ */ jsx("div", { className: "w-7 h-7 rounded-full bg-purple-500/20 flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsx(SparklesIcon, { className: "w-4 h-4 text-purple-400" }) }),
+    /* @__PURE__ */ jsx("div", { className: "flex-1 max-w-[85%]", children: /* @__PURE__ */ jsxs("div", { className: "rounded-2xl p-4 bg-purple-500/10 border border-purple-500/30", children: [
+      /* @__PURE__ */ jsx("div", { className: "text-xs text-purple-400 mb-2 font-medium", children: "Thinking" }),
+      /* @__PURE__ */ jsx("div", { className: "text-sm text-purple-300 italic opacity-80 whitespace-pre-wrap leading-relaxed", children: entry.content })
+    ] }) })
+  ] });
+}
+function ToolCallMessage({ entry, defaultExpanded = false, className }) {
+  if (entry.entryType.type !== "tool_call") return null;
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex gap-3 ash-animate-fade-in", className), children: [
+    /* @__PURE__ */ jsx("div", { className: "w-7 h-7 rounded-full bg-[var(--ash-accent)]/20 flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsx(BotIcon, { className: "w-4 h-4 text-[var(--ash-accent)]" }) }),
+    /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(ToolCallCard, { toolCall: entry.entryType.toolCall, defaultExpanded }) })
+  ] });
+}
+function ErrorMessage({ entry, className }) {
+  if (entry.entryType.type !== "error") return null;
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex gap-3 ash-animate-fade-in", className), children: [
+    /* @__PURE__ */ jsx("div", { className: "w-7 h-7 rounded-full bg-red-500/20 flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsx(AlertTriangleIcon, { className: "w-4 h-4 text-red-400" }) }),
+    /* @__PURE__ */ jsx("div", { className: "flex-1 max-w-[85%]", children: /* @__PURE__ */ jsxs("div", { className: "rounded-2xl p-4 bg-red-500/10 border border-red-500/30", children: [
+      /* @__PURE__ */ jsx("div", { className: "text-xs text-red-400 mb-2 font-medium", children: "Error" }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-red-300", children: entry.entryType.message }),
+      entry.entryType.code && /* @__PURE__ */ jsxs("p", { className: "text-xs text-red-400/70 mt-2 font-mono", children: [
+        "Code: ",
+        entry.entryType.code
+      ] })
+    ] }) })
+  ] });
+}
+function MessageEntry({ entry, onOptionSelect, className }) {
+  switch (entry.entryType.type) {
+    case "user_message":
+      return /* @__PURE__ */ jsx(UserMessage, { entry, className });
+    case "assistant_message":
+      return /* @__PURE__ */ jsx(AssistantMessage, { entry, onOptionSelect, className });
+    case "thinking":
+      return /* @__PURE__ */ jsx(ThinkingMessage, { entry, className });
+    case "tool_call":
+      return /* @__PURE__ */ jsx(ToolCallMessage, { entry, className });
+    case "error":
+      return /* @__PURE__ */ jsx(ErrorMessage, { entry, className });
+    default:
+      return null;
+  }
+}
+function LoadingIndicator({ variant = "dots", size = "md", className }) {
+  if (variant === "dots") {
+    const dotSizes = {
+      sm: "w-1 h-1",
+      md: "w-1.5 h-1.5",
+      lg: "w-2 h-2"
+    };
+    return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-1", className), children: [
+      /* @__PURE__ */ jsx("span", { className: cn("rounded-full bg-[var(--ash-accent)] animate-pulse", dotSizes[size]) }),
+      /* @__PURE__ */ jsx("span", { className: cn("rounded-full bg-[var(--ash-accent)] animate-pulse", dotSizes[size]), style: { animationDelay: "150ms" } }),
+      /* @__PURE__ */ jsx("span", { className: cn("rounded-full bg-[var(--ash-accent)] animate-pulse", dotSizes[size]), style: { animationDelay: "300ms" } })
+    ] });
+  }
+  if (variant === "pulse") {
+    const dotSizes = {
+      sm: "w-1.5 h-1.5",
+      md: "w-2 h-2",
+      lg: "w-3 h-3"
+    };
+    return /* @__PURE__ */ jsx("div", { className: cn("flex items-center gap-1", className), children: /* @__PURE__ */ jsx("span", { className: cn("bg-[var(--ash-accent)] rounded-full animate-pulse", dotSizes[size]) }) });
+  }
+  if (variant === "cursor") {
+    const cursorSizes = {
+      sm: "w-1 h-3",
+      md: "w-1.5 h-4",
+      lg: "w-2 h-5"
+    };
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(
+          "inline-block bg-[var(--ash-accent)]/50 ash-tool-status-pending",
+          cursorSizes[size],
+          className
+        )
+      }
+    );
+  }
+  const spinnerSizes = {
+    sm: "w-4 h-4",
+    md: "w-6 h-6",
+    lg: "w-8 h-8"
+  };
+  return /* @__PURE__ */ jsx("div", { className: cn("animate-spin text-[var(--ash-accent)]", spinnerSizes[size], className), children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10", className: "opacity-25" }),
+    /* @__PURE__ */ jsx("path", { d: "M12 2a10 10 0 0 1 10 10", strokeLinecap: "round" })
+  ] }) });
+}
+function StreamingText({
+  content,
+  isStreaming = false,
+  renderMarkdown = true,
+  className
+}) {
+  return /* @__PURE__ */ jsx("div", { className: cn("relative", className), children: renderMarkdown ? /* @__PURE__ */ jsxs("div", { className: "ash-message-content prose prose-sm prose-invert max-w-none text-sm leading-relaxed", children: [
+    /* @__PURE__ */ jsx(ReactMarkdown, { children: content }),
+    isStreaming && /* @__PURE__ */ jsx(LoadingIndicator, { variant: "cursor", size: "sm", className: "inline-block ml-0.5" })
+  ] }) : /* @__PURE__ */ jsxs("p", { className: "whitespace-pre-wrap text-sm leading-relaxed", children: [
+    content,
+    isStreaming && /* @__PURE__ */ jsx(LoadingIndicator, { variant: "cursor", size: "sm", className: "inline-block ml-0.5" })
+  ] }) });
+}
+function CompactToolStatusLine({
+  toolCall,
+  previousToolCall,
+  animationDuration = 300,
+  className
+}) {
+  const [isAnimating, setIsAnimating] = useState(false);
+  const [displayedToolCall, setDisplayedToolCall] = useState(toolCall);
+  const [exitingToolCall, setExitingToolCall] = useState(null);
+  const prevToolCallRef = useRef(null);
+  useEffect(() => {
+    if (toolCall.id !== prevToolCallRef.current) {
+      if (prevToolCallRef.current !== null && previousToolCall) {
+        setExitingToolCall(previousToolCall);
+        setIsAnimating(true);
+        const timer = setTimeout(() => {
+          setDisplayedToolCall(toolCall);
+          setExitingToolCall(null);
+          setIsAnimating(false);
+        }, animationDuration);
+        prevToolCallRef.current = toolCall.id;
+        return () => clearTimeout(timer);
+      } else {
+        setDisplayedToolCall(toolCall);
+        prevToolCallRef.current = toolCall.id;
+      }
+    } else {
+      setDisplayedToolCall(toolCall);
+    }
+    return void 0;
+  }, [toolCall, previousToolCall, animationDuration]);
+  const statusClasses = {
+    pending: "border-yellow-500/30",
+    success: "border-[var(--ash-accent)]/30",
+    failed: "border-red-500/30"
+  };
+  const renderToolCallContent = (tc, isExiting) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex items-center gap-3 px-4 py-2.5",
+        isExiting ? "ash-status-line-exit" : isAnimating ? "ash-status-line-enter" : ""
+      ),
+      style: {
+        animationDuration: `${animationDuration}ms`
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "w-6 h-6 rounded-lg flex items-center justify-center shrink-0",
+              tc.status === "pending" ? "bg-yellow-500/20" : tc.status === "failed" ? "bg-red-500/20" : "bg-[var(--ash-accent)]/20"
+            ),
+            children: /* @__PURE__ */ jsx(
+              ActionIcon,
+              {
+                actionType: tc.actionType,
+                className: cn(
+                  "w-3.5 h-3.5",
+                  tc.status === "pending" ? "text-yellow-400" : tc.status === "failed" ? "text-red-400" : "text-[var(--ash-accent)]"
+                )
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-white shrink-0", children: getActionLabel(tc.actionType) }),
+        /* @__PURE__ */ jsx("span", { className: "font-mono text-sm truncate text-white/60 flex-1 min-w-0", children: tc.summary }),
+        /* @__PURE__ */ jsx(StatusIndicator, { status: tc.status, size: "sm" })
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "relative rounded-xl border bg-[var(--ash-surface-dark,#0a0a0a)] overflow-hidden",
+        statusClasses[displayedToolCall.status],
+        displayedToolCall.status === "pending" && "ash-tool-status-pending",
+        className
+      ),
+      children: [
+        exitingToolCall && /* @__PURE__ */ jsx("div", { className: "absolute inset-0", children: renderToolCallContent(exitingToolCall, true) }),
+        renderToolCallContent(displayedToolCall, false)
+      ]
+    }
+  );
+}
+function calculateGroupStatus(toolCalls) {
+  const hasPending = toolCalls.some((tc) => tc.status === "pending");
+  const hasFailed = toolCalls.some((tc) => tc.status === "failed");
+  const allSuccess = toolCalls.every((tc) => tc.status === "success");
+  if (hasPending) return "pending";
+  if (allSuccess) return "success";
+  if (hasFailed && !hasPending) return toolCalls.some((tc) => tc.status === "success") ? "partial_failure" : "failed";
+  return "pending";
+}
+function ToolExecutionGroup({
+  toolCalls,
+  defaultExpanded = false,
+  animationDuration = 300,
+  className
+}) {
+  const [expanded, setExpanded] = useState(defaultExpanded);
+  const activeToolCall = toolCalls[toolCalls.length - 1];
+  const previousToolCall = toolCalls.length > 1 ? toolCalls[toolCalls.length - 2] : null;
+  const groupStatus = useMemo(() => calculateGroupStatus(toolCalls), [toolCalls]);
+  const completedCount = toolCalls.filter((tc) => tc.status === "success").length;
+  const failedCount = toolCalls.filter((tc) => tc.status === "failed").length;
+  const totalCount = toolCalls.length;
+  if (!activeToolCall) {
+    return null;
+  }
+  const borderClasses = {
+    pending: "border-yellow-500/30",
+    success: "border-[var(--ash-accent)]/30",
+    partial_failure: "border-orange-500/30",
+    failed: "border-red-500/30"
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "rounded-xl border bg-[var(--ash-surface-dark,#0a0a0a)] overflow-hidden ash-animate-fade-in",
+        borderClasses[groupStatus],
+        groupStatus === "pending" && "ash-tool-status-pending",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => setExpanded(!expanded),
+            className: cn(
+              "w-full transition-colors hover:bg-white/5 cursor-pointer"
+            ),
+            children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+              /* @__PURE__ */ jsx(
+                CompactToolStatusLine,
+                {
+                  toolCall: activeToolCall,
+                  previousToolCall,
+                  animationDuration,
+                  className: "border-0 rounded-none"
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "absolute right-3 top-1/2 -translate-y-1/2 flex items-center gap-2", children: [
+                totalCount > 1 && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "flex items-center gap-1.5 px-2 py-0.5 rounded-full text-xs font-medium",
+                      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"
+                    ),
+                    children: groupStatus === "pending" ? /* @__PURE__ */ jsxs("span", { children: [
+                      completedCount,
+                      "/",
+                      totalCount
+                    ] }) : failedCount > 0 ? /* @__PURE__ */ jsxs("span", { children: [
+                      completedCount,
+                      " ok, ",
+                      failedCount,
+                      " failed"
+                    ] }) : /* @__PURE__ */ jsxs("span", { children: [
+                      totalCount,
+                      " tools"
+                    ] })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  ChevronDownIcon,
+                  {
+                    className: cn(
+                      "w-4 h-4 text-white/40 transition-transform duration-200",
+                      expanded && "rotate-180"
+                    )
+                  }
+                )
+              ] })
+            ] })
+          }
+        ),
+        expanded && /* @__PURE__ */ jsxs("div", { className: "border-t border-white/5 bg-black/20", children: [
+          /* @__PURE__ */ jsx("div", { className: "p-3 space-y-2", children: toolCalls.map((toolCall, index) => /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+            index < toolCalls.length - 1 && /* @__PURE__ */ jsx("div", { className: "absolute left-[19px] top-10 bottom-0 w-px bg-white/10" }),
+            /* @__PURE__ */ jsx(
+              ToolCallCard,
+              {
+                toolCall,
+                defaultExpanded: false,
+                className: "relative z-10"
+              }
+            )
+          ] }, toolCall.id)) }),
+          groupStatus !== "pending" && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "px-4 py-3 border-t border-white/5 flex items-center gap-2",
+                groupStatus === "success" ? "bg-[var(--ash-accent)]/5" : groupStatus === "failed" ? "bg-red-500/5" : "bg-orange-500/5"
+              ),
+              children: groupStatus === "success" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(CheckIcon, { className: "w-4 h-4 text-[var(--ash-accent)]" }),
+                /* @__PURE__ */ jsxs("span", { className: "text-sm text-[var(--ash-accent)] font-medium", children: [
+                  "All ",
+                  totalCount,
+                  " tool",
+                  totalCount !== 1 ? "s" : "",
+                  " completed successfully"
+                ] })
+              ] }) : groupStatus === "failed" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(StatusIndicator, { status: "failed", size: "sm" }),
+                /* @__PURE__ */ jsxs("span", { className: "text-sm text-red-400 font-medium", children: [
+                  failedCount,
+                  " tool",
+                  failedCount !== 1 ? "s" : "",
+                  " failed"
+                ] })
+              ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(StatusIndicator, { status: "failed", size: "sm" }),
+                /* @__PURE__ */ jsxs("span", { className: "text-sm text-orange-400 font-medium", children: [
+                  completedCount,
+                  " succeeded, ",
+                  failedCount,
+                  " failed"
+                ] })
+              ] })
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+
+// src/types.ts
+function isCommandRunAction(action) {
+  return action.action === "command_run";
+}
+function isFileReadAction(action) {
+  return action.action === "file_read";
+}
+function isFileEditAction(action) {
+  return action.action === "file_edit";
+}
+function isFileWriteAction(action) {
+  return action.action === "file_write";
+}
+function isSearchAction(action) {
+  return action.action === "search";
+}
+function isGlobAction(action) {
+  return action.action === "glob";
+}
+function isWebFetchAction(action) {
+  return action.action === "web_fetch";
+}
+function isWebSearchAction(action) {
+  return action.action === "web_search";
+}
+function isMcpToolAction(action) {
+  return action.action === "mcp_tool";
+}
+function isGenericToolAction(action) {
+  return action.action === "generic_tool";
+}
+function isTodoWriteAction(action) {
+  return action.action === "todo_write";
+}
+function isToolCallEntry(entry) {
+  return entry.type === "tool_call";
+}
+function isErrorEntry(entry) {
+  return entry.type === "error";
+}
+var DEFAULT_DISPLAY_CONFIG = {
+  mode: "inline",
+  breakEveryNToolCalls: 0,
+  defaultExpanded: false,
+  animationDuration: 300
+};
+var DisplayModeContext = createContext(null);
+function DisplayModeProvider({ children, initialConfig }) {
+  const [config, setConfigState] = useState({
+    ...DEFAULT_DISPLAY_CONFIG,
+    ...initialConfig
+  });
+  const setMode = useCallback((mode) => {
+    setConfigState((prev) => ({ ...prev, mode }));
+  }, []);
+  const setConfig = useCallback((updates) => {
+    setConfigState((prev) => ({ ...prev, ...updates }));
+  }, []);
+  const toggleMode = useCallback(() => {
+    setConfigState((prev) => ({
+      ...prev,
+      mode: prev.mode === "inline" ? "compact" : "inline"
+    }));
+  }, []);
+  const value = useMemo(
+    () => ({ config, setMode, setConfig, toggleMode }),
+    [config, setMode, setConfig, toggleMode]
+  );
+  return /* @__PURE__ */ jsx(DisplayModeContext.Provider, { value, children });
+}
+function useDisplayMode() {
+  const context = useContext(DisplayModeContext);
+  if (!context) {
+    return {
+      config: DEFAULT_DISPLAY_CONFIG,
+      setMode: () => {
+      },
+      setConfig: () => {
+      },
+      toggleMode: () => {
+      }
+    };
+  }
+  return context;
+}
+function useDisplayConfig() {
+  const { config } = useDisplayMode();
+  return config;
+}
+function MessageList({
+  entries,
+  loading,
+  streamingContent,
+  displayConfig: displayConfigProp,
+  onOptionSelect,
+  className
+}) {
+  const contextConfig = useDisplayConfig();
+  const config = displayConfigProp || contextConfig;
+  const groupedEntries = useMemo(() => {
+    if (config.mode === "inline") {
+      return entries.map((entry) => ({
+        type: "single",
+        entry,
+        id: entry.id
+      }));
+    }
+    return groupEntriesForCompactMode(entries, config);
+  }, [entries, config]);
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex-1 overflow-y-auto p-4 space-y-4 ash-scrollbar", className), children: [
+    groupedEntries.map((groupedEntry) => {
+      if (groupedEntry.type === "single") {
+        return /* @__PURE__ */ jsx(MessageEntry, { entry: groupedEntry.entry, onOptionSelect }, groupedEntry.entry.id);
+      }
+      const toolCalls = extractToolCallsFromGroup(groupedEntry.entries);
+      return /* @__PURE__ */ jsxs("div", { className: "flex gap-3 ash-animate-fade-in", children: [
+        /* @__PURE__ */ jsx("div", { className: "w-7 h-7 rounded-full bg-[var(--ash-accent)]/20 flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsx(BotIcon, { className: "w-4 h-4 text-[var(--ash-accent)]" }) }),
+        /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(
+          ToolExecutionGroup,
+          {
+            toolCalls,
+            defaultExpanded: config.defaultExpanded,
+            animationDuration: config.animationDuration
+          }
+        ) })
+      ] }, groupedEntry.id);
+    }),
+    streamingContent && /* @__PURE__ */ jsxs("div", { className: "flex gap-3 ash-animate-fade-in", children: [
+      /* @__PURE__ */ jsx("div", { className: "w-7 h-7 rounded-full bg-[var(--ash-accent)]/20 flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsx(BotIcon, { className: "w-4 h-4 text-[var(--ash-accent)]" }) }),
+      /* @__PURE__ */ jsx("div", { className: "flex-1 max-w-[85%]", children: /* @__PURE__ */ jsx("div", { className: "rounded-xl p-3 bg-white/5 text-white/80", children: /* @__PURE__ */ jsx(StreamingText, { content: streamingContent, isStreaming: true }) }) })
+    ] }),
+    loading && !streamingContent && /* @__PURE__ */ jsxs("div", { className: "flex gap-3 ash-animate-fade-in", children: [
+      /* @__PURE__ */ jsx("div", { className: "w-7 h-7 rounded-full bg-[var(--ash-accent)]/20 flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsx(BotIcon, { className: "w-4 h-4 text-[var(--ash-accent)]" }) }),
+      /* @__PURE__ */ jsx("div", { className: "rounded-xl p-3 bg-white/5", children: /* @__PURE__ */ jsx(LoadingIndicator, { variant: "dots" }) })
+    ] })
+  ] });
+}
+function getLevelIcon(level) {
+  switch (level) {
+    case "info":
+      return /* @__PURE__ */ jsx(InfoIcon, { className: "w-3.5 h-3.5" });
+    case "warn":
+      return /* @__PURE__ */ jsx(AlertTriangleIcon, { className: "w-3.5 h-3.5" });
+    case "error":
+      return /* @__PURE__ */ jsx(AlertCircleIcon, { className: "w-3.5 h-3.5" });
+    case "debug":
+      return /* @__PURE__ */ jsx(BugIcon, { className: "w-3.5 h-3.5" });
+  }
+}
+function getLevelColor(level) {
+  switch (level) {
+    case "info":
+      return "text-blue-400";
+    case "warn":
+      return "text-yellow-500";
+    case "error":
+      return "text-red-400";
+    case "debug":
+      return "text-white/50";
+  }
+}
+function getLevelBgColor(level) {
+  switch (level) {
+    case "info":
+      return "bg-blue-900/20";
+    case "warn":
+      return "bg-yellow-900/20";
+    case "error":
+      return "bg-red-900/20";
+    case "debug":
+      return "bg-white/5";
+  }
+}
+function getCategoryLabel(category) {
+  switch (category) {
+    case "setup":
+      return "Setup";
+    case "skills":
+      return "Skills";
+    case "execution":
+      return "Execution";
+    case "process":
+      return "Process";
+    case "startup":
+      return "Startup";
+  }
+}
+function LogEntryRow({ log }) {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const hasData = log.data && Object.keys(log.data).length > 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "px-3 py-2 border-b border-white/10 last:border-b-0",
+        getLevelBgColor(log.level)
+      ),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn("flex items-start gap-2", hasData && "cursor-pointer"),
+            onClick: () => hasData && setIsExpanded(!isExpanded),
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "w-4 flex-shrink-0 pt-0.5", children: hasData && (isExpanded ? /* @__PURE__ */ jsx(ChevronDownIcon, { className: "w-3 h-3 text-white/40" }) : /* @__PURE__ */ jsx(ChevronRightIcon, { className: "w-3 h-3 text-white/40" })) }),
+              /* @__PURE__ */ jsx("div", { className: cn("flex-shrink-0 pt-0.5", getLevelColor(log.level)), children: getLevelIcon(log.level) }),
+              /* @__PURE__ */ jsx("span", { className: "text-xs text-white/40 font-mono flex-shrink-0 pt-0.5", children: formatTimestamp(log.timestamp) }),
+              /* @__PURE__ */ 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) }),
+              /* @__PURE__ */ jsx("span", { className: "text-sm text-white/80 flex-1 break-words", children: log.message })
+            ]
+          }
+        ),
+        isExpanded && hasData && /* @__PURE__ */ jsx("div", { className: "mt-2 ml-6 pl-4 border-l-2 border-white/20", children: /* @__PURE__ */ jsx("pre", { className: "text-xs text-white/50 font-mono whitespace-pre-wrap overflow-x-auto", children: JSON.stringify(log.data, null, 2) }) })
+      ]
+    }
+  );
+}
+function LogsPanel({
+  logs,
+  title = "Logs",
+  isLoading,
+  defaultCollapsed = true,
+  maxHeight = 256,
+  className
+}) {
+  const [isCollapsed, setIsCollapsed] = useState(defaultCollapsed);
+  const errorCount = logs.filter((l) => l.level === "error").length;
+  const warnCount = logs.filter((l) => l.level === "warn").length;
+  if (logs.length === 0 && !isLoading) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "border-t border-white/10 bg-[var(--ash-surface-dark,#0a0a0a)]",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => setIsCollapsed(!isCollapsed),
+            className: "w-full flex items-center justify-between px-4 py-2 hover:bg-white/5 transition-colors",
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx(TerminalIcon, { className: "w-4 h-4 text-white/50" }),
+                /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-white/80", children: title }),
+                /* @__PURE__ */ jsxs("span", { className: "text-xs text-white/40", children: [
+                  "(",
+                  logs.length,
+                  ")"
+                ] }),
+                errorCount > 0 && /* @__PURE__ */ jsxs("span", { className: "text-xs px-1.5 py-0.5 rounded bg-red-900/50 text-red-400 font-medium", children: [
+                  errorCount,
+                  " error",
+                  errorCount > 1 ? "s" : ""
+                ] }),
+                warnCount > 0 && /* @__PURE__ */ jsxs("span", { className: "text-xs px-1.5 py-0.5 rounded bg-yellow-900/50 text-yellow-400 font-medium", children: [
+                  warnCount,
+                  " warning",
+                  warnCount > 1 ? "s" : ""
+                ] }),
+                isLoading && /* @__PURE__ */ jsx("span", { className: "text-xs text-white/40 animate-pulse", children: "Loading..." })
+              ] }),
+              isCollapsed ? /* @__PURE__ */ jsx(ChevronRightIcon, { className: "w-4 h-4 text-white/40" }) : /* @__PURE__ */ jsx(ChevronDownIcon, { className: "w-4 h-4 text-white/40" })
+            ]
+          }
+        ),
+        !isCollapsed && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "overflow-y-auto border-t border-white/10",
+            style: { maxHeight },
+            children: logs.length === 0 ? /* @__PURE__ */ jsx("div", { className: "px-4 py-6 text-center text-sm text-white/50", children: "No logs yet" }) : logs.map((log, index) => /* @__PURE__ */ jsx(LogEntryRow, { log }, `${log.timestamp}-${index}`))
+          }
+        )
+      ]
+    }
+  );
+}
+function TodoStatusIcon({ status, className = "w-4 h-4" }) {
+  switch (status) {
+    case "completed":
+      return /* @__PURE__ */ jsx(CheckCircleIcon, { className: cn(className, "text-emerald-400") });
+    case "in_progress":
+      return /* @__PURE__ */ jsx(LoaderIcon, { className: cn(className, "text-yellow-400 animate-spin") });
+    case "pending":
+    default:
+      return /* @__PURE__ */ jsx(CircleIcon, { className: cn(className, "text-white/30") });
+  }
+}
+function TodoListItem({ todo, index, compact = false }) {
+  const displayText = todo.status === "in_progress" ? todo.activeForm : todo.content;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex items-start gap-2 transition-all duration-200",
+        compact ? "py-1" : "py-1.5",
+        todo.status === "completed" && "opacity-60",
+        todo.status === "in_progress" && "bg-yellow-500/5 -mx-2 px-2 rounded-md"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(TodoStatusIcon, { status: todo.status, className: compact ? "w-3.5 h-3.5 mt-0.5" : "w-4 h-4 mt-0.5" }),
+        /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: cn(
+              "flex-1 text-white/80",
+              compact ? "text-xs" : "text-sm",
+              todo.status === "completed" && "line-through text-white/50"
+            ),
+            children: [
+              !compact && /* @__PURE__ */ jsxs("span", { className: "text-white/40 mr-1.5", children: [
+                index + 1,
+                "."
+              ] }),
+              displayText
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function TodoProgress({ completed, total, className }) {
+  const percentage = total > 0 ? Math.round(completed / total * 100) : 0;
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2", className), children: [
+    /* @__PURE__ */ jsx("div", { className: "flex-1 h-1.5 bg-white/10 rounded-full overflow-hidden", children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "h-full bg-emerald-400 rounded-full transition-all duration-500 ease-out",
+        style: { width: `${percentage}%` }
+      }
+    ) }),
+    /* @__PURE__ */ jsxs("span", { className: "text-xs text-white/50 tabular-nums min-w-[3rem] text-right", children: [
+      completed,
+      "/",
+      total
+    ] })
+  ] });
+}
+function TodoPanel({
+  todos,
+  title,
+  compact = false,
+  showProgress = true,
+  className
+}) {
+  const stats = useMemo(() => {
+    return {
+      total: todos.length,
+      completed: todos.filter((t) => t.status === "completed").length,
+      inProgress: todos.filter((t) => t.status === "in_progress").length,
+      pending: todos.filter((t) => t.status === "pending").length
+    };
+  }, [todos]);
+  if (todos.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "rounded-lg border border-white/10 bg-white/5 overflow-hidden",
+        className
+      ),
+      children: [
+        (title || showProgress) && /* @__PURE__ */ jsxs("div", { className: cn("border-b border-white/5", compact ? "px-2 py-1.5" : "px-3 py-2"), children: [
+          title && /* @__PURE__ */ jsx("div", { className: cn("font-medium text-white/90 mb-1.5", compact ? "text-xs" : "text-sm"), children: title }),
+          showProgress && /* @__PURE__ */ jsx(TodoProgress, { completed: stats.completed, total: stats.total })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: cn(compact ? "px-2 py-1.5" : "px-3 py-2"), children: todos.map((todo, index) => /* @__PURE__ */ jsx(
+          TodoListItem,
+          {
+            todo,
+            index,
+            compact
+          },
+          `${todo.content}-${index}`
+        )) }),
+        !compact && stats.inProgress > 0 && /* @__PURE__ */ jsx("div", { className: "px-3 py-2 border-t border-white/5 bg-yellow-500/5", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs text-yellow-400", children: [
+          /* @__PURE__ */ jsx(LoaderIcon, { className: "w-3 h-3 animate-spin" }),
+          /* @__PURE__ */ jsxs("span", { children: [
+            stats.inProgress,
+            " task",
+            stats.inProgress !== 1 ? "s" : "",
+            " in progress"
+          ] })
+        ] }) })
+      ]
+    }
+  );
+}
+var DEFAULT_WORDS = [
+  "Thinking",
+  "Reasoning",
+  "Pondering",
+  "Analyzing",
+  "Considering",
+  "Processing",
+  "Evaluating"
+];
+function TypewriterText({
+  words = DEFAULT_WORDS,
+  typeSpeed = 50,
+  pauseBeforeErase = 800,
+  eraseSpeed = 30,
+  pauseBeforeType = 200,
+  showCursor = true,
+  className,
+  cursorClassName
+}) {
+  const [displayText, setDisplayText] = useState("");
+  const [wordIndex, setWordIndex] = useState(0);
+  const [isTyping, setIsTyping] = useState(true);
+  const timeoutRef = useRef(null);
+  useEffect(() => {
+    const currentWord = words[wordIndex] ?? "";
+    if (isTyping) {
+      if (displayText.length < currentWord.length) {
+        timeoutRef.current = setTimeout(() => {
+          setDisplayText(currentWord.slice(0, displayText.length + 1));
+        }, typeSpeed);
+      } else {
+        timeoutRef.current = setTimeout(() => {
+          setIsTyping(false);
+        }, pauseBeforeErase);
+      }
+    } else {
+      if (displayText.length > 0) {
+        timeoutRef.current = setTimeout(() => {
+          setDisplayText(displayText.slice(0, -1));
+        }, eraseSpeed);
+      } else {
+        timeoutRef.current = setTimeout(() => {
+          setWordIndex((prev) => (prev + 1) % words.length);
+          setIsTyping(true);
+        }, pauseBeforeType);
+      }
+    }
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, [displayText, wordIndex, isTyping, words, typeSpeed, pauseBeforeErase, eraseSpeed, pauseBeforeType]);
+  return /* @__PURE__ */ jsxs("span", { className: cn("inline-flex items-center", className), children: [
+    /* @__PURE__ */ jsx("span", { children: displayText }),
+    showCursor && /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(
+          "w-0.5 h-4 bg-current ml-0.5 animate-pulse",
+          cursorClassName
+        )
+      }
+    )
+  ] });
+}
+var ThemeContext = createContext(void 0);
+var DEFAULT_STORAGE_KEY = "ash-ui-theme";
+function ThemeProvider({
+  children,
+  defaultTheme,
+  storageKey = DEFAULT_STORAGE_KEY,
+  listenToSystemChanges = true
+}) {
+  const [theme, setThemeState] = useState(() => {
+    if (typeof window !== "undefined") {
+      const stored = localStorage.getItem(storageKey);
+      if (stored === "dark" || stored === "light") {
+        return stored;
+      }
+      if (!defaultTheme && window.matchMedia("(prefers-color-scheme: dark)").matches) {
+        return "dark";
+      }
+    }
+    return defaultTheme ?? "light";
+  });
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+  useEffect(() => {
+    if (!mounted) return;
+    const root = document.documentElement;
+    if (theme === "dark") {
+      root.classList.add("dark");
+    } else {
+      root.classList.remove("dark");
+    }
+    localStorage.setItem(storageKey, theme);
+  }, [theme, mounted, storageKey]);
+  useEffect(() => {
+    if (!listenToSystemChanges || typeof window === "undefined") return;
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const handleChange = (e) => {
+      const stored = localStorage.getItem(storageKey);
+      if (!stored) {
+        setThemeState(e.matches ? "dark" : "light");
+      }
+    };
+    mediaQuery.addEventListener("change", handleChange);
+    return () => mediaQuery.removeEventListener("change", handleChange);
+  }, [storageKey, listenToSystemChanges]);
+  const toggleTheme = useCallback(() => {
+    setThemeState((prev) => prev === "light" ? "dark" : "light");
+  }, []);
+  const setTheme = useCallback((newTheme) => {
+    setThemeState(newTheme);
+  }, []);
+  if (!mounted) {
+    return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: { theme: defaultTheme ?? "light", toggleTheme, setTheme }, children });
+  }
+  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: { theme, toggleTheme, setTheme }, children });
+}
+function useTheme() {
+  const context = useContext(ThemeContext);
+  if (context === void 0) {
+    throw new Error("useTheme must be used within a ThemeProvider");
+  }
+  return context;
+}
+
+// src/design-tokens.ts
+var colors = {
+  // Primary accent color (lime green)
+  accent: {
+    DEFAULT: "#ccff00",
+    50: "#f8ffe5",
+    100: "#eeffb8",
+    200: "#e0ff85",
+    300: "#d4ff52",
+    400: "#ccff00",
+    500: "#b8e600",
+    600: "#99cc00",
+    700: "#739900",
+    800: "#4d6600",
+    900: "#263300"
+  },
+  // Surface colors (dark theme)
+  surface: {
+    dark: "#0a0a0a",
+    darker: "#050505",
+    card: "#0c0c0c",
+    elevated: "#111111"
+  },
+  // Text colors
+  text: {
+    primary: "#ffffff",
+    secondary: "rgba(255, 255, 255, 0.7)",
+    muted: "rgba(255, 255, 255, 0.5)",
+    disabled: "rgba(255, 255, 255, 0.3)"
+  },
+  // Border colors
+  border: {
+    DEFAULT: "rgba(255, 255, 255, 0.1)",
+    hover: "rgba(255, 255, 255, 0.2)",
+    accent: "rgba(204, 255, 0, 0.3)",
+    accentHover: "rgba(204, 255, 0, 0.5)"
+  },
+  // Status colors
+  status: {
+    success: "#10b981",
+    warning: "#eab308",
+    error: "#ef4444",
+    info: "#3b82f6"
+  },
+  // User message background
+  user: {
+    bg: "rgba(204, 255, 0, 0.1)",
+    border: "rgba(204, 255, 0, 0.2)"
+  },
+  // Assistant message background
+  assistant: {
+    bg: "rgba(255, 255, 255, 0.05)",
+    border: "rgba(255, 255, 255, 0.1)"
+  }
+};
+var spacing = {
+  xs: "4px",
+  sm: "8px",
+  md: "12px",
+  lg: "16px",
+  xl: "24px",
+  "2xl": "32px",
+  "3xl": "48px"
+};
+var borderRadius = {
+  sm: "8px",
+  md: "12px",
+  lg: "16px",
+  xl: "20px",
+  "2xl": "24px",
+  full: "9999px"
+};
+var shadows = {
+  sm: "0 1px 2px rgba(0, 0, 0, 0.3)",
+  md: "0 4px 6px rgba(0, 0, 0, 0.4)",
+  lg: "0 10px 15px rgba(0, 0, 0, 0.5)",
+  xl: "0 20px 25px rgba(0, 0, 0, 0.6)",
+  glow: {
+    sm: "0 0 10px rgba(204, 255, 0, 0.2)",
+    md: "0 0 20px rgba(204, 255, 0, 0.3)",
+    lg: "0 0 30px rgba(204, 255, 0, 0.5)"
+  },
+  panel: "0 25px 50px rgba(0, 0, 0, 0.5)"
+};
+var typography = {
+  fontFamily: {
+    sans: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    mono: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace'
+  },
+  fontSize: {
+    xs: "12px",
+    sm: "14px",
+    base: "16px",
+    lg: "18px",
+    xl: "20px",
+    "2xl": "24px"
+  },
+  lineHeight: {
+    tight: "1.25",
+    normal: "1.5",
+    relaxed: "1.75"
+  }
+};
+var keyframes = {
+  slideUp: {
+    from: { opacity: "0", transform: "translateY(20px)" },
+    to: { opacity: "1", transform: "translateY(0)" }
+  },
+  fadeIn: {
+    from: { opacity: "0", transform: "translateY(10px)" },
+    to: { opacity: "1", transform: "translateY(0)" }
+  },
+  blink: {
+    "0%, 50%": { opacity: "1" },
+    "51%, 100%": { opacity: "0" }
+  },
+  bounce: {
+    "0%, 80%, 100%": { transform: "scale(0)" },
+    "40%": { transform: "scale(1)" }
+  },
+  pulse: {
+    "0%, 100%": { opacity: "1" },
+    "50%": { opacity: "0.5" }
+  },
+  glowPulse: {
+    "0%, 100%": { boxShadow: "0 0 20px rgba(204, 255, 0, 0.3)" },
+    "50%": { boxShadow: "0 0 40px rgba(204, 255, 0, 0.5)" }
+  }
+};
+var keyframesCss = {
+  slideUp: `
+    @keyframes ash-slide-up {
+      from { opacity: 0; transform: translateY(20px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+  `,
+  fadeIn: `
+    @keyframes ash-fade-in {
+      from { opacity: 0; transform: translateY(10px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+  `,
+  blink: `
+    @keyframes ash-blink {
+      0%, 50% { opacity: 1; }
+      51%, 100% { opacity: 0; }
+    }
+  `,
+  bounce: `
+    @keyframes ash-bounce {
+      0%, 80%, 100% { transform: scale(0); }
+      40% { transform: scale(1); }
+    }
+  `,
+  pulse: `
+    @keyframes ash-pulse {
+      0%, 100% { opacity: 1; }
+      50% { opacity: 0.5; }
+    }
+  `,
+  glowPulse: `
+    @keyframes ash-glow-pulse {
+      0%, 100% { box-shadow: 0 0 20px rgba(204, 255, 0, 0.3); }
+      50% { box-shadow: 0 0 40px rgba(204, 255, 0, 0.5); }
+    }
+  `
+};
+var allKeyframesCss = Object.values(keyframesCss).join("\n");
+var transitions = {
+  fast: "150ms ease-out",
+  normal: "300ms ease-out",
+  slow: "500ms ease-out",
+  spring: "400ms cubic-bezier(0.16, 1, 0.3, 1)"
+};
+var zIndex = {
+  base: 0,
+  dropdown: 100,
+  modal: 200,
+  tooltip: 300,
+  widget: 999999
+};
+var widget = {
+  launcher: {
+    size: "60px",
+    iconSize: "28px"
+  },
+  panel: {
+    width: "400px",
+    height: "600px",
+    maxHeight: "80vh"
+  },
+  header: {
+    height: "60px"
+  },
+  input: {
+    minHeight: "60px",
+    maxHeight: "150px"
+  },
+  message: {
+    maxWidth: "85%",
+    avatarSize: "32px"
+  },
+  gap: "20px"
+  // Gap from edge of screen
+};
+function tokensToCssVariables(prefix = "ash") {
+  const vars = {};
+  vars[`--${prefix}-accent`] = colors.accent.DEFAULT;
+  Object.entries(colors.accent).forEach(([key, value]) => {
+    if (key !== "DEFAULT") vars[`--${prefix}-accent-${key}`] = value;
+  });
+  Object.entries(colors.surface).forEach(([key, value]) => {
+    vars[`--${prefix}-surface-${key}`] = value;
+  });
+  Object.entries(colors.text).forEach(([key, value]) => {
+    vars[`--${prefix}-text-${key}`] = value;
+  });
+  Object.entries(colors.border).forEach(([key, value]) => {
+    if (key !== "DEFAULT") vars[`--${prefix}-border-${key}`] = value;
+    else vars[`--${prefix}-border`] = value;
+  });
+  return vars;
+}
+var inlineStyles = {
+  // Glass panel effect
+  glassPanel: {
+    backgroundColor: "rgba(255, 255, 255, 0.05)",
+    backdropFilter: "blur(24px)",
+    WebkitBackdropFilter: "blur(24px)",
+    border: `1px solid ${colors.border.DEFAULT}`
+  },
+  // Accent button
+  accentButton: {
+    backgroundColor: colors.accent.DEFAULT,
+    color: "#000000",
+    border: `1px solid ${colors.accent.DEFAULT}`,
+    boxShadow: shadows.glow.md
+  },
+  // Ghost button
+  ghostButton: {
+    backgroundColor: "transparent",
+    color: colors.text.secondary,
+    border: "1px solid transparent"
+  },
+  // User message bubble
+  userMessage: {
+    backgroundColor: colors.user.bg,
+    border: `1px solid ${colors.user.border}`,
+    borderRadius: borderRadius.lg
+  },
+  // Assistant message bubble
+  assistantMessage: {
+    backgroundColor: colors.assistant.bg,
+    border: `1px solid ${colors.assistant.border}`,
+    borderRadius: borderRadius.lg
+  }
+};
+
+export { ActionIcon, AlertCircleIcon, AlertTriangleIcon, AssistantMessage, BotIcon, BrainIcon, BugIcon, CheckCircleIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CircleIcon, ClipboardListIcon, CodeBlock, CodeIcon, CompactToolStatusLine, CopyIcon, DEFAULT_DISPLAY_CONFIG, DisplayModeProvider, EditIcon, ErrorMessage, FileIcon, FilePlusIcon, FolderSearchIcon, GlobeIcon, InfoIcon, JsonDisplay, ListChecksIcon, LoaderIcon, LoadingIndicator, LogsPanel, MessageEntry, MessageList, MessageSquareIcon, MoonIcon, OptionCards, PaperclipIcon, PlugIcon, SearchIcon, SendIcon, SparklesIcon, StatusIndicator, StopCircleIcon, StreamingText, SunIcon, TerminalIcon, ThemeProvider, ThinkingMessage, TodoPanel, ToolCallCard, ToolCallMessage, ToolExecutionGroup, ToolIcon, TypewriterText, UserIcon, UserMessage, XCircleIcon, XIcon, allKeyframesCss, borderRadius, cn, colors, createToolCall, extractTextContent, extractToolCallsFromGroup, formatFileSize, formatTimestamp, formatToolName, generateToolSummary, getActionIcon, getActionLabel, groupEntriesForCompactMode, inlineStyles, isCommandRunAction, isErrorEntry, isFileEditAction, isFileReadAction, isFileWriteAction, isGenericToolAction, isGlobAction, isMcpToolAction, isSearchAction, isTodoWriteAction, isToolCallEntry, isWebFetchAction, isWebSearchAction, keyframes, keyframesCss, mapToolToActionType, normalizeToolResult, parseCommandResult, parseMcpToolName, parseOptionsFromContent, shadows, spacing, tokensToCssVariables, transitions, truncate, typography, updateToolCallWithResult, useDisplayConfig, useDisplayMode, useTheme, widget, zIndex };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map