@timbal-ai/timbal-react 0.2.2 → 0.3.0

package/dist/index.cjs

@@ -30,15 +30,24 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
-  ActionBarPrimitive: () => import_react13.ActionBarPrimitive,
+  ARTIFACT_AGENT_INSTRUCTIONS: () => ARTIFACT_AGENT_INSTRUCTIONS,
+  ARTIFACT_FENCE_LANGUAGES: () => ARTIFACT_FENCE_LANGUAGES,
+  ActionBarPrimitive: () => import_react26.ActionBarPrimitive,
+  ArtifactCard: () => ArtifactCard,
+  ArtifactRegistryProvider: () => ArtifactRegistryProvider,
+  ArtifactView: () => ArtifactView,
+  AssistantRuntimeProvider: () => import_react26.AssistantRuntimeProvider,
   AuthGuard: () => AuthGuard,
   Avatar: () => Avatar,
   AvatarFallback: () => AvatarFallback,
   AvatarImage: () => AvatarImage,
   Button: () => Button,
+  ChartArtifactView: () => ChartArtifactView,
+  Composer: () => Composer,
   ComposerAddAttachment: () => ComposerAddAttachment,
   ComposerAttachments: () => ComposerAttachments,
-  ComposerPrimitive: () => import_react13.ComposerPrimitive,
+  ComposerPrimitive: () => import_react26.ComposerPrimitive,
+  DEFAULT_UPLOAD_ACCEPT: () => DEFAULT_UPLOAD_ACCEPT,
   Dialog: () => Dialog,
   DialogClose: () => DialogClose,
   DialogContent: () => DialogContent,
@@ -46,37 +55,72 @@ __export(index_exports, {
   DialogPortal: () => DialogPortal,
   DialogTitle: () => DialogTitle,
   DialogTrigger: () => DialogTrigger,
+  HtmlArtifactView: () => HtmlArtifactView,
+  JsonArtifactView: () => JsonArtifactView,
   MarkdownText: () => MarkdownText,
-  MessagePrimitive: () => import_react13.MessagePrimitive,
+  MessagePrimitive: () => import_react26.MessagePrimitive,
+  QuestionArtifactView: () => QuestionArtifactView,
   SessionProvider: () => SessionProvider,
   Shimmer: () => Shimmer,
+  Suggestions: () => Suggestions,
   SyntaxHighlighter: () => syntax_highlighter_default,
+  TableArtifactView: () => TableArtifactView,
   Thread: () => Thread,
-  ThreadPrimitive: () => import_react13.ThreadPrimitive,
+  ThreadPrimitive: () => import_react26.ThreadPrimitive,
   TimbalChat: () => TimbalChat,
+  TimbalChatShell: () => TimbalChatShell,
   TimbalRuntimeProvider: () => TimbalRuntimeProvider,
+  ToolArtifactFallback: () => ToolArtifactFallback,
   ToolFallback: () => ToolFallback,
   Tooltip: () => Tooltip,
   TooltipContent: () => TooltipContent,
   TooltipIconButton: () => TooltipIconButton,
   TooltipProvider: () => TooltipProvider,
   TooltipTrigger: () => TooltipTrigger,
+  UiArtifactView: () => UiArtifactView,
+  UiCustomNodeRegistryProvider: () => UiCustomNodeRegistryProvider,
+  UiEventProvider: () => UiEventProvider,
+  UiNodeView: () => UiNodeView,
   UserMessageAttachments: () => UserMessageAttachments,
+  WorkforceSelector: () => WorkforceSelector,
   authFetch: () => authFetch,
   buttonVariants: () => buttonVariants,
   clearTokens: () => clearTokens,
   cn: () => cn,
+  createDefaultAttachmentAdapter: () => createDefaultAttachmentAdapter,
+  createUploadAttachmentAdapter: () => createUploadAttachmentAdapter,
+  defaultArtifactRenderers: () => defaultArtifactRenderers,
   fetchCurrentUser: () => fetchCurrentUser,
+  findMarkdownArtifacts: () => findMarkdownArtifacts,
   getAccessToken: () => getAccessToken,
+  getPath: () => getPath,
   getRefreshToken: () => getRefreshToken,
+  isArtifact: () => isArtifact,
+  isArtifactFenceLanguage: () => isArtifactFenceLanguage,
+  isUiBinding: () => isUiBinding,
+  parseArtifactFromToolResult: () => parseArtifactFromToolResult,
+  parseSSELine: () => import_timbal_sdk2.parseSSELine,
   refreshAccessToken: () => refreshAccessToken,
+  resolveAttachmentAdapter: () => resolveAttachmentAdapter,
+  resolveBindable: () => resolveBindable,
   setAccessToken: () => setAccessToken,
+  setPath: () => setPath,
   setRefreshToken: () => setRefreshToken,
-  useComposerRuntime: () => import_react13.useComposerRuntime,
-  useMessageRuntime: () => import_react13.useMessageRuntime,
+  splitMarkdownByArtifacts: () => splitMarkdownByArtifacts,
+  useArtifactRegistry: () => useArtifactRegistry,
+  useComposerRuntime: () => import_react26.useComposerRuntime,
+  useMessageRuntime: () => import_react26.useMessageRuntime,
+  useResolvedSuggestions: () => useResolvedSuggestions,
   useSession: () => useSession,
-  useThread: () => import_react13.useThread,
-  useThreadRuntime: () => import_react13.useThreadRuntime
+  useThread: () => import_react26.useThread,
+  useThreadRuntime: () => import_react26.useThreadRuntime,
+  useTimbalRuntime: () => useTimbalRuntime,
+  useTimbalStream: () => useTimbalStream,
+  useUiCustomNodeRegistry: () => useUiCustomNodeRegistry,
+  useUiDispatch: () => useUiDispatch,
+  useUiEventEmitter: () => useUiEventEmitter,
+  useUiState: () => useUiState,
+  useWorkforces: () => useWorkforces
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -166,13 +210,506 @@ var fetchCurrentUser = async () => {
   }
 };
 
+// src/artifacts/types.ts
+function isArtifact(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value) && typeof value.type === "string";
+}
+
+// src/runtime/reducer.ts
+function createReducerState() {
+  return { parts: [], toolIndexById: /* @__PURE__ */ new Map() };
+}
+function reduceSseEvent(state, event) {
+  switch (event.type) {
+    case "DELTA":
+      return reduceDelta(state, event.item);
+    case "OUTPUT": {
+      const path = event.path;
+      const isNested = typeof path === "string" && path.includes(".");
+      if (!isNested) {
+        const errorMessage = readErrorMessage(event);
+        if (errorMessage) {
+          state.parts.push({ type: "text", text: `**Error:** ${errorMessage}` });
+          return true;
+        }
+      }
+      if (isNested) {
+        return reduceNestedOutput(
+          state,
+          path,
+          event.output
+        );
+      }
+      return reduceOutput(
+        state,
+        event.output
+      );
+    }
+    default:
+      return false;
+  }
+}
+function reduceDelta(state, item) {
+  if (!item) return false;
+  if (item.type === "text_delta" && typeof item.text_delta === "string") {
+    lastTextPart(state).text += item.text_delta;
+    return true;
+  }
+  if (item.type === "thinking_delta" && typeof item.thinking_delta === "string") {
+    lastThinkingPart(state).text += item.thinking_delta;
+    return true;
+  }
+  if (item.type === "tool_use") {
+    const toolCallId = item.id || `tool-${crypto.randomUUID()}`;
+    const inputStr = stringifyInput(item.input);
+    const part = {
+      type: "tool-call",
+      toolCallId,
+      toolName: item.name || "unknown",
+      argsText: inputStr,
+      status: "running"
+    };
+    state.parts.push(part);
+    state.toolIndexById.set(toolCallId, state.parts.length - 1);
+    return true;
+  }
+  if (item.type === "tool_use_delta") {
+    const idx = state.toolIndexById.get(item.id);
+    if (idx !== void 0 && typeof item.input_delta === "string") {
+      state.parts[idx].argsText += item.input_delta;
+      return true;
+    }
+  }
+  return false;
+}
+function reduceNestedOutput(state, path, output) {
+  if (!output || typeof output !== "object") return false;
+  if (!Array.isArray(output.content) && isArtifact(output)) {
+    const toolName = toolNameFromPath(path);
+    if (toolName && attachToolResult(state, { toolName, result: output })) {
+      return true;
+    }
+  }
+  return reduceOutput(state, output, { toolResultsOnly: true, allowOrphan: false });
+}
+function reduceOutput(state, output, options) {
+  if (!output) return false;
+  if (typeof output === "string") {
+    if (state.parts.length === 0) {
+      state.parts.push({ type: "text", text: output });
+      return true;
+    }
+    return false;
+  }
+  if (Array.isArray(output.content)) {
+    let changed = false;
+    const blocks = output.content;
+    for (const block of blocks) {
+      if (block.type === "tool_use") {
+        if (!options?.toolResultsOnly && recordToolUse(state, block)) {
+          changed = true;
+        }
+      } else if (block.type === "tool_result") {
+        if (recordToolResult(state, block, options)) changed = true;
+      } else if (!options?.toolResultsOnly) {
+        if (block.type === "text" && typeof block.text === "string" && !lastTextPart(state).text) {
+          lastTextPart(state).text = block.text;
+          changed = true;
+        } else if (block.type === "thinking" && typeof block.thinking === "string" && !lastThinkingPart(state).text) {
+          lastThinkingPart(state).text = block.thinking;
+          changed = true;
+        }
+      }
+    }
+    return changed;
+  }
+  if (state.parts.length === 0) {
+    state.parts.push({ type: "text", text: JSON.stringify(output) });
+    return true;
+  }
+  return false;
+}
+function recordToolUse(state, block) {
+  const id = block.id || `tool-${crypto.randomUUID()}`;
+  if (state.toolIndexById.has(id)) return false;
+  const inputStr = stringifyInput(block.input);
+  const part = {
+    type: "tool-call",
+    toolCallId: id,
+    toolName: block.name || "unknown",
+    argsText: inputStr,
+    status: "running"
+  };
+  state.parts.push(part);
+  state.toolIndexById.set(id, state.parts.length - 1);
+  return true;
+}
+function recordToolResult(state, block, options) {
+  const allowOrphan = options?.allowOrphan !== false;
+  const id = block.id || block.tool_use_id || "";
+  const { result, resultText } = parseToolResultContent(block.content);
+  const toolName = block.name || void 0;
+  if (id) {
+    const idx = state.toolIndexById.get(id);
+    if (idx !== void 0) {
+      const part2 = state.parts[idx];
+      part2.result = result;
+      if (resultText) part2.resultText = resultText;
+      part2.status = "complete";
+      return true;
+    }
+    if (!allowOrphan) return false;
+  }
+  if (!id && toolName && attachToolResult(state, {
+    toolName,
+    result,
+    resultText
+  })) {
+    return true;
+  }
+  if (!id || !allowOrphan) return false;
+  const part = {
+    type: "tool-call",
+    toolCallId: id,
+    toolName: toolName || "unknown",
+    argsText: "",
+    result,
+    resultText,
+    status: "complete"
+  };
+  state.parts.push(part);
+  state.toolIndexById.set(id, state.parts.length - 1);
+  return true;
+}
+function toolNameFromPath(path) {
+  const segment = path.split(".").pop();
+  return segment && segment !== "agent" && segment !== "llm" ? segment : null;
+}
+function attachToolResult(state, {
+  toolCallId,
+  toolName,
+  result,
+  resultText
+}) {
+  if (toolCallId) {
+    const idx = state.toolIndexById.get(toolCallId);
+    if (idx !== void 0) {
+      const part = state.parts[idx];
+      part.result = result;
+      if (resultText) part.resultText = resultText;
+      part.status = "complete";
+      return true;
+    }
+  }
+  if (toolName) {
+    for (let i = state.parts.length - 1; i >= 0; i--) {
+      const part = state.parts[i];
+      if (part.type === "tool-call" && part.toolName === toolName && part.result === void 0) {
+        part.result = result;
+        if (resultText) part.resultText = resultText;
+        part.status = "complete";
+        return true;
+      }
+    }
+  }
+  return false;
+}
+function parseToolResultContent(content) {
+  if (typeof content === "string") {
+    return { result: content, resultText: content };
+  }
+  if (!Array.isArray(content)) {
+    return { result: content };
+  }
+  const textChunks = [];
+  for (const item of content) {
+    if (typeof item === "string") {
+      textChunks.push(item);
+    } else if (item && typeof item === "object") {
+      const obj = item;
+      if (obj.type === "text" && typeof obj.text === "string") {
+        textChunks.push(obj.text);
+      } else if (obj.type === "thinking" && typeof obj.thinking === "string") {
+        textChunks.push(obj.thinking);
+      }
+    }
+  }
+  return {
+    result: content,
+    resultText: textChunks.length > 0 ? textChunks.join("\n") : void 0
+  };
+}
+function readErrorMessage(event) {
+  const status = event.status;
+  const isErrorStatus = status?.code === "error";
+  const error = event.error;
+  let type = null;
+  let message = null;
+  if (isErrorStatus && typeof status?.message === "string" && status.message.length > 0) {
+    message = status.message;
+  }
+  if (!message && typeof error === "string" && error.length > 0) {
+    message = error;
+  } else if (error && typeof error === "object") {
+    const obj = error;
+    if (typeof obj.type === "string" && obj.type.length > 0) {
+      type = obj.type;
+    }
+    if (!message && typeof obj.message === "string" && obj.message.length > 0) {
+      message = obj.message;
+    }
+  }
+  if (!message && !isErrorStatus) return null;
+  if (!message) return "The agent failed to generate a response.";
+  const compact = compactError(message);
+  return type ? `${type}: ${compact}` : compact;
+}
+var ERROR_MAX_CHARS = 480;
+function compactError(message) {
+  const trimmed = message.split(/\n\s*Traceback \(most recent call last\):/u)[0].trim();
+  if (trimmed.length <= ERROR_MAX_CHARS) return trimmed;
+  return `${trimmed.slice(0, ERROR_MAX_CHARS).trimEnd()}\u2026`;
+}
+function stringifyInput(input) {
+  if (input === void 0 || input === null) return "{}";
+  return typeof input === "string" ? input : JSON.stringify(input);
+}
+function lastTextPart(state) {
+  const last = state.parts[state.parts.length - 1];
+  if (last?.type === "text") return last;
+  const next = { type: "text", text: "" };
+  state.parts.push(next);
+  return next;
+}
+function lastThinkingPart(state) {
+  const last = state.parts[state.parts.length - 1];
+  if (last?.type === "thinking") return last;
+  const next = { type: "thinking", text: "" };
+  state.parts.push(next);
+  return next;
+}
+
+// src/runtime/attachments.ts
+async function extractAttachment(attachment) {
+  const file = attachment.file;
+  let src = null;
+  let contentType;
+  let name = attachment.name ?? file?.name;
+  const content = attachment.content;
+  if (content) {
+    for (const block of content) {
+      if (block.type === "image" && typeof block.image === "string") {
+        src = block.image;
+        if (typeof block.mimeType === "string") {
+          contentType = block.mimeType;
+        }
+        break;
+      }
+      if (block.type === "file" && typeof block.data === "string") {
+        src = block.data;
+        if (typeof block.mimeType === "string") contentType = block.mimeType;
+        break;
+      }
+    }
+  }
+  if (src === null && file) {
+    src = await fileToDataUrl(file);
+    if (!contentType) contentType = file.type || void 0;
+    if (!name) name = file.name;
+  }
+  if (!src) return null;
+  if (!contentType) contentType = mimeFromDataUrl(src);
+  const rawType = String(attachment.type ?? "file");
+  const type = rawType === "image" || rawType === "document" ? rawType : "file";
+  return {
+    id: attachment.id ?? crypto.randomUUID(),
+    type,
+    ...name !== void 0 ? { name } : {},
+    ...contentType !== void 0 ? { contentType } : {},
+    dataUrl: src
+  };
+}
+function fileToDataUrl(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(reader.result);
+    reader.onerror = () => reject(reader.error);
+    reader.readAsDataURL(file);
+  });
+}
+function mimeFromDataUrl(dataUrl) {
+  const match = /^data:([^;,]+)[;,]/.exec(dataUrl);
+  return match?.[1];
+}
+function buildPromptBody({
+  input,
+  attachments,
+  parentId
+}) {
+  const context = { parent_id: parentId };
+  const files = attachments ?? [];
+  if (files.length === 0) {
+    return { prompt: input, context };
+  }
+  const parts = [];
+  if (input) parts.push({ type: "text", text: input });
+  for (const attachment of files) {
+    parts.push({ type: "file", file: attachment.dataUrl });
+  }
+  return { prompt: parts, context };
+}
+
+// src/runtime/upload-adapter.ts
+var DEFAULT_UPLOAD_ACCEPT = "image/*,application/pdf,text/*,.md,.json,.csv,.tsv,.xlsx,.docx";
+function createDefaultAttachmentAdapter({
+  baseUrl = "",
+  uploadUrl,
+  fetch: fetchFn = authFetch,
+  accept = DEFAULT_UPLOAD_ACCEPT
+} = {}) {
+  const base = baseUrl.replace(/\/$/, "");
+  const resolvedUploadUrl = uploadUrl ?? `${base}/files/upload`;
+  return {
+    accept,
+    async add({ file }) {
+      const isImage = file.type.startsWith("image/");
+      const pending = {
+        id: crypto.randomUUID(),
+        type: isImage ? "image" : "file",
+        name: file.name,
+        contentType: file.type || "application/octet-stream",
+        file,
+        status: { type: "requires-action", reason: "composer-send" }
+      };
+      return pending;
+    },
+    async send(attachment) {
+      const fd = new FormData();
+      fd.append("file", attachment.file);
+      const res = await fetchFn(resolvedUploadUrl, { method: "POST", body: fd });
+      if (!res.ok) {
+        const detail = await res.text().catch(() => "");
+        throw new Error(
+          `Attachment upload failed (${res.status}): ${detail || res.statusText}`
+        );
+      }
+      const remoteUrl = await readUploadedUrl(res);
+      const mime = attachment.contentType ?? "application/octet-stream";
+      const filename = attachment.name;
+      const complete = {
+        ...attachment,
+        status: { type: "complete" },
+        content: mime.startsWith("image/") ? [{ type: "image", image: remoteUrl, filename }] : [{ type: "file", data: remoteUrl, mimeType: mime, filename }]
+      };
+      return complete;
+    },
+    async remove() {
+    }
+  };
+}
+var createUploadAttachmentAdapter = createDefaultAttachmentAdapter;
+async function readUploadedUrl(res) {
+  const contentType = res.headers.get("content-type") ?? "";
+  if (contentType.includes("application/json")) {
+    const data = await res.json();
+    const candidate = data.url ?? data.signed_url ?? data.id;
+    if (typeof candidate === "string" && candidate.length > 0) {
+      return candidate;
+    }
+    throw new Error(
+      "Attachment upload response did not include a `url`, `signed_url`, or `id` field."
+    );
+  }
+  const text = (await res.text()).trim();
+  if (!text) {
+    throw new Error("Attachment upload response was empty.");
+  }
+  return text;
+}
+
+// src/runtime/resolve-attachments.ts
+function isAttachmentAdapter(value) {
+  return typeof value === "object" && value !== null && "accept" in value && typeof value.add === "function" && typeof value.send === "function" && typeof value.remove === "function";
+}
+function resolveAttachmentAdapter(attachments, options = {}) {
+  const baseUrl = options.baseUrl ?? "/api";
+  const legacyUploadUrl = options.uploadUrl;
+  const legacyAccept = options.accept;
+  if (attachments === null) return void 0;
+  const legacyEnables = legacyUploadUrl !== void 0 || legacyAccept !== void 0;
+  if (attachments === void 0) {
+    if (!legacyEnables) return void 0;
+    return createDefaultAttachmentAdapter({
+      baseUrl,
+      fetch: options.fetch,
+      uploadUrl: legacyUploadUrl,
+      accept: legacyAccept
+    });
+  }
+  if (attachments === true) {
+    return createDefaultAttachmentAdapter({
+      baseUrl,
+      fetch: options.fetch,
+      uploadUrl: legacyUploadUrl,
+      accept: legacyAccept
+    });
+  }
+  if (isAttachmentAdapter(attachments)) return attachments;
+  const config = attachments;
+  return createDefaultAttachmentAdapter({
+    baseUrl,
+    fetch: options.fetch,
+    uploadUrl: config.uploadUrl ?? legacyUploadUrl,
+    accept: config.accept ?? legacyAccept
+  });
+}
+
 // src/runtime/provider.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-var convertMessage = (message) => ({
-  role: message.role,
-  content: message.content,
-  id: message.id
-});
+function projectAttachment(attachment) {
+  const filename = attachment.name ?? "attachment";
+  const mimeType = attachment.contentType ?? "application/octet-stream";
+  if (attachment.type === "image") {
+    return {
+      id: attachment.id,
+      type: "image",
+      name: filename,
+      contentType: mimeType,
+      status: { type: "complete" },
+      content: [{ type: "image", image: attachment.dataUrl, filename }]
+    };
+  }
+  return {
+    id: attachment.id,
+    type: attachment.type,
+    name: filename,
+    contentType: mimeType,
+    status: { type: "complete" },
+    content: [
+      { type: "file", data: attachment.dataUrl, mimeType, filename }
+    ]
+  };
+}
+var convertMessage = (message) => {
+  const content = message.content.map((part) => {
+    if (part.type === "text") return { type: "text", text: part.text };
+    if (part.type === "thinking") return { type: "reasoning", text: part.text };
+    return {
+      type: "tool-call",
+      toolCallId: part.toolCallId,
+      toolName: part.toolName,
+      argsText: part.argsText,
+      ...part.result !== void 0 ? { result: part.result } : {}
+    };
+  });
+  const attachments = message.attachments && message.attachments.length > 0 ? message.attachments.map(projectAttachment) : void 0;
+  return {
+    role: message.role,
+    content,
+    id: message.id,
+    ...attachments ? { attachments } : {}
+  };
+};
 function findParentId(messages, beforeIndex) {
   const slice = beforeIndex !== void 0 ? messages.slice(0, beforeIndex) : messages;
   for (let i = slice.length - 1; i >= 0; i--) {
@@ -180,18 +717,18 @@ function findParentId(messages, beforeIndex) {
   }
   return null;
 }
-function isTopLevelStart(event) {
-  return event.type === "START" && typeof event.run_id === "string" && typeof event.path === "string" && !event.path.includes(".");
-}
 function getTextFromMessage(message) {
   const part = message.content.find((c) => c.type === "text");
-  return part?.type === "text" ? part.text : null;
+  return part?.type === "text" ? part.text : "";
 }
-function TimbalRuntimeProvider({
+function getAttachmentsFromMessage(message) {
+  return message.attachments?.length ? message.attachments : void 0;
+}
+function useTimbalStream({
   workforceId,
-  children,
   baseUrl = "/api",
-  fetch: fetchFn
+  fetch: fetchFn,
+  debug = false
 }) {
   const [messages, setMessages] = (0, import_react.useState)([]);
   const [isRunning, setIsRunning] = (0, import_react.useState)(false);
@@ -201,40 +738,41 @@ function TimbalRuntimeProvider({
   (0, import_react.useEffect)(() => {
     fetchFnRef.current = fetchFn ?? authFetch;
   }, [fetchFn]);
+  const debugRef = (0, import_react.useRef)(debug);
+  (0, import_react.useEffect)(() => {
+    debugRef.current = debug;
+  }, [debug]);
   (0, import_react.useEffect)(() => {
     messagesRef.current = messages;
   }, [messages]);
   const streamAssistantResponse = (0, import_react.useCallback)(
-    async (input, userId, assistantId, parentId, signal) => {
-      const parts = [];
-      const toolIndexById = /* @__PURE__ */ new Map();
-      const lastTextPart = () => {
-        const last = parts[parts.length - 1];
-        if (last?.type === "text") return last;
-        const next = { type: "text", text: "" };
-        parts.push(next);
-        return next;
-      };
+    async (input, attachments, userId, assistantId, parentId, signal) => {
+      const state = createReducerState();
       const flush = () => {
         setMessages(
-          (prev) => prev.map((m) => m.id === assistantId ? { ...m, content: [...parts] } : m)
+          (prev) => prev.map(
+            (m) => m.id === assistantId ? { ...m, content: [...state.parts] } : m
+          )
         );
       };
       const stampRunId = (runId) => {
         setMessages(
-          (prev) => prev.map((m) => m.id === userId || m.id === assistantId ? { ...m, runId } : m)
+          (prev) => prev.map(
+            (m) => m.id === userId || m.id === assistantId ? { ...m, runId } : m
+          )
         );
       };
       try {
-        const res = await fetchFnRef.current(`${baseUrl}/workforce/${workforceId}/stream`, {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({
-            prompt: input,
-            context: { parent_id: parentId }
-          }),
-          signal
-        });
+        const body = buildPromptBody({ input, attachments, parentId });
+        const res = await fetchFnRef.current(
+          `${baseUrl}/workforce/${workforceId}/stream`,
+          {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify(body),
+            signal
+          }
+        );
         if (!res.ok || !res.body) throw new Error(`Request failed: ${res.status}`);
         const reader = res.body.getReader();
         const decoder = new TextDecoder();
@@ -249,84 +787,34 @@ function TimbalRuntimeProvider({
           for (const line of lines) {
             const event = (0, import_timbal_sdk.parseSSELine)(line);
             if (!event) continue;
-            if (!capturedRunId && isTopLevelStart(event)) {
-              capturedRunId = event.run_id;
-              stampRunId(capturedRunId);
+            if (debugRef.current) {
+              console.debug("[timbal]", event.type, event);
             }
-            switch (event.type) {
-              case "DELTA": {
-                const item = event.item;
-                if (!item) break;
-                if (item.type === "text_delta" && typeof item.text_delta === "string") {
-                  lastTextPart().text += item.text_delta;
-                  flush();
-                } else if (item.type === "tool_use") {
-                  const toolCallId = item.id || `tool-${crypto.randomUUID()}`;
-                  const inputStr = typeof item.input === "string" ? item.input : JSON.stringify(item.input ?? {});
-                  parts.push({
-                    type: "tool-call",
-                    toolCallId,
-                    toolName: item.name || "unknown",
-                    argsText: inputStr
-                  });
-                  toolIndexById.set(toolCallId, parts.length - 1);
-                  flush();
-                } else if (item.type === "tool_use_delta") {
-                  const idx = toolIndexById.get(item.id);
-                  if (idx !== void 0 && typeof item.input_delta === "string") {
-                    parts[idx].argsText += item.input_delta;
-                    flush();
-                  }
-                }
-                break;
-              }
-              case "OUTPUT": {
-                const output = event.output;
-                if (!output) break;
-                if (typeof output === "object" && Array.isArray(output.content)) {
-                  for (const block of output.content) {
-                    if (block.type === "tool_use") {
-                      const id = block.id || `tool-${crypto.randomUUID()}`;
-                      const idx = toolIndexById.get(id);
-                      if (idx !== void 0) {
-                        parts[idx].result = "Tool executed";
-                      } else {
-                        const inputStr = typeof block.input === "string" ? block.input : JSON.stringify(block.input ?? {});
-                        parts.push({
-                          type: "tool-call",
-                          toolCallId: id,
-                          toolName: block.name || "unknown",
-                          argsText: inputStr,
-                          result: "Tool executed"
-                        });
-                        toolIndexById.set(id, parts.length - 1);
-                      }
-                    } else if (block.type === "text" && typeof block.text === "string" && !lastTextPart().text) {
-                      lastTextPart().text = block.text;
-                    }
-                  }
-                  flush();
-                } else if (parts.length === 0) {
-                  const text = typeof output === "string" ? output : JSON.stringify(output);
-                  parts.push({ type: "text", text });
-                  flush();
-                }
-                break;
+            if (!capturedRunId) {
+              const runId = readTopLevelStartRunId(event);
+              if (runId) {
+                capturedRunId = runId;
+                stampRunId(runId);
               }
             }
+            const changed = reduceSseEvent(state, event);
+            if (changed) flush();
           }
         }
         if (buffer.trim()) {
           const event = (0, import_timbal_sdk.parseSSELine)(buffer);
-          if (event?.type === "OUTPUT" && parts.length === 0 && event.output) {
-            const text = typeof event.output === "string" ? event.output : JSON.stringify(event.output);
-            parts.push({ type: "text", text });
-            flush();
+          if (event) {
+            if (debugRef.current) {
+              console.debug("[timbal]", event.type, event);
+            }
+            if (reduceSseEvent(state, event)) flush();
           }
         }
       } catch (err) {
         if (err.name !== "AbortError") {
-          if (parts.length === 0) parts.push({ type: "text", text: "Something went wrong." });
+          if (state.parts.length === 0) {
+            state.parts.push({ type: "text", text: "Something went wrong." });
+          }
           flush();
         }
       } finally {
@@ -336,44 +824,46 @@ function TimbalRuntimeProvider({
     },
     [workforceId, baseUrl]
   );
-  const onNew = (0, import_react.useCallback)(
-    async (message) => {
-      const textPart = message.content.find((c) => c.type === "text");
-      if (!textPart || textPart.type !== "text") return;
-      const input = textPart.text;
+  const send = (0, import_react.useCallback)(
+    async (input, options) => {
       const userId = crypto.randomUUID();
       const assistantId = crypto.randomUUID();
-      let base = messagesRef.current;
-      if (message.parentId !== null) {
-        const parentIdx = base.findIndex((m) => m.id === message.parentId);
-        if (parentIdx >= 0) {
-          base = base.slice(0, parentIdx + 1);
-        }
-      }
-      const parentId = findParentId(base);
+      const base = messagesRef.current;
+      const parentId = options?.parentId !== void 0 ? options.parentId : findParentId(base);
+      const userMessage = {
+        id: userId,
+        role: "user",
+        content: input ? [{ type: "text", text: input }] : [],
+        ...options?.attachments && options.attachments.length > 0 ? { attachments: options.attachments } : {}
+      };
       setMessages([
         ...base,
-        { id: userId, role: "user", content: [{ type: "text", text: input }] }
-      ]);
-      setIsRunning(true);
-      setMessages((prev) => [
-        ...prev,
+        userMessage,
         { id: assistantId, role: "assistant", content: [] }
       ]);
+      setIsRunning(true);
       const controller = new AbortController();
       abortRef.current = controller;
-      await streamAssistantResponse(input, userId, assistantId, parentId, controller.signal);
+      await streamAssistantResponse(
+        input,
+        options?.attachments,
+        userId,
+        assistantId,
+        parentId,
+        controller.signal
+      );
     },
     [streamAssistantResponse]
   );
-  const onReload = (0, import_react.useCallback)(
+  const reload = (0, import_react.useCallback)(
     async (messageId) => {
       const current = messagesRef.current;
       const idx = messageId ? current.findIndex((m) => m.id === messageId) : current.length - 2;
       const userMessage = idx >= 0 ? current[idx] : null;
       if (!userMessage || userMessage.role !== "user") return;
       const input = getTextFromMessage(userMessage);
-      if (!input) return;
+      const messageAttachments = getAttachmentsFromMessage(userMessage);
+      if (!input && !messageAttachments?.length) return;
       const assistantId = crypto.randomUUID();
       const parentId = findParentId(current, idx);
       setMessages((prev) => [
@@ -383,25 +873,115 @@ function TimbalRuntimeProvider({
       setIsRunning(true);
       const controller = new AbortController();
       abortRef.current = controller;
-      await streamAssistantResponse(input, userMessage.id, assistantId, parentId, controller.signal);
+      await streamAssistantResponse(
+        input,
+        messageAttachments,
+        userMessage.id,
+        assistantId,
+        parentId,
+        controller.signal
+      );
     },
     [streamAssistantResponse]
   );
-  const onCancel = (0, import_react.useCallback)(async () => {
+  const cancel = (0, import_react.useCallback)(() => {
+    abortRef.current?.abort();
+  }, []);
+  const clear = (0, import_react.useCallback)(() => {
     abortRef.current?.abort();
+    setMessages([]);
   }, []);
+  return (0, import_react.useMemo)(
+    () => ({ messages, isRunning, send, reload, cancel, clear }),
+    [messages, isRunning, send, reload, cancel, clear]
+  );
+}
+function readTopLevelStartRunId(event) {
+  if (event.type === "START" && typeof event.run_id === "string" && typeof event.path === "string" && !event.path.includes(".")) {
+    return event.run_id;
+  }
+  return null;
+}
+var TimbalStreamContext = (0, import_react.createContext)(null);
+function useTimbalRuntime() {
+  const ctx = (0, import_react.useContext)(TimbalStreamContext);
+  if (!ctx) {
+    throw new Error(
+      "useTimbalRuntime must be used inside a <TimbalRuntimeProvider>."
+    );
+  }
+  return ctx;
+}
+function TimbalRuntimeProvider({
+  workforceId,
+  children,
+  baseUrl = "/api",
+  fetch: fetchFn,
+  attachments,
+  attachmentsUploadUrl,
+  attachmentsAccept,
+  debug
+}) {
+  const stream = useTimbalStream({
+    workforceId,
+    baseUrl,
+    fetch: fetchFn,
+    debug
+  });
+  const attachmentAdapter = (0, import_react.useMemo)(
+    () => resolveAttachmentAdapter(attachments, {
+      baseUrl,
+      fetch: fetchFn,
+      uploadUrl: attachmentsUploadUrl,
+      accept: attachmentsAccept
+    }),
+    [attachments, attachmentsUploadUrl, attachmentsAccept, baseUrl, fetchFn]
+  );
+  const onNew = (0, import_react.useCallback)(
+    async (message) => {
+      const textPart = message.content.find((c) => c.type === "text");
+      const input = textPart && textPart.type === "text" ? textPart.text : "";
+      const auiAttachments = message.attachments;
+      const attachments2 = auiAttachments ? (await Promise.all(auiAttachments.map(extractAttachment))).filter((a) => a !== null) : [];
+      if (!input && attachments2.length === 0) return;
+      const parentId = message.parentId !== null && message.parentId !== void 0 ? findParentIdFromAuiParent(stream.messages, message.parentId) : void 0;
+      await stream.send(input, {
+        attachments: attachments2.length > 0 ? attachments2 : void 0,
+        ...parentId !== void 0 ? { parentId } : {}
+      });
+    },
+    [stream]
+  );
+  const onReload = (0, import_react.useCallback)(
+    async (messageId) => {
+      await stream.reload(messageId);
+    },
+    [stream]
+  );
+  const onCancel = (0, import_react.useCallback)(async () => {
+    stream.cancel();
+  }, [stream]);
   const runtime = (0, import_react2.useExternalStoreRuntime)({
-    isRunning,
-    messages,
+    isRunning: stream.isRunning,
+    messages: stream.messages,
     convertMessage,
     onNew,
     onEdit: onNew,
     onReload,
-    onCancel
+    onCancel,
+    ...attachmentAdapter ? { adapters: { attachments: attachmentAdapter } } : {}
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.AssistantRuntimeProvider, { runtime, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TimbalStreamContext.Provider, { value: stream, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.AssistantRuntimeProvider, { runtime, children }) });
+}
+function findParentIdFromAuiParent(messages, auiParentId) {
+  const idx = messages.findIndex((m) => m.id === auiParentId);
+  if (idx < 0) return null;
+  return findParentId(messages.slice(0, idx + 1));
 }
 
+// src/index.ts
+var import_timbal_sdk2 = require("@timbal-ai/timbal-sdk");
+
 // src/components/attachment.tsx
 var import_react4 = require("react");
 var import_lucide_react2 = require("lucide-react");
@@ -854,78 +1434,1117 @@ var import_react_markdown = require("@assistant-ui/react-markdown");
 var import_remark_gfm = __toESM(require("remark-gfm"), 1);
 var import_remark_math = __toESM(require("remark-math"), 1);
 var import_rehype_katex = __toESM(require("rehype-katex"), 1);
-var import_react7 = require("react");
-var import_lucide_react3 = require("lucide-react");
+var import_react16 = require("react");
+var import_lucide_react4 = require("lucide-react");
 
 // src/components/syntax-highlighter.tsx
-var import_react6 = require("react");
+var import_react15 = require("react");
 var import_core = require("shiki/core");
 var import_javascript = require("shiki/engine/javascript");
-var import_javascript2 = __toESM(require("shiki/langs/javascript.mjs"), 1);
-var import_typescript = __toESM(require("shiki/langs/typescript.mjs"), 1);
-var import_python = __toESM(require("shiki/langs/python.mjs"), 1);
-var import_html = __toESM(require("shiki/langs/html.mjs"), 1);
-var import_css = __toESM(require("shiki/langs/css.mjs"), 1);
-var import_json = __toESM(require("shiki/langs/json.mjs"), 1);
-var import_bash = __toESM(require("shiki/langs/bash.mjs"), 1);
-var import_markdown = __toESM(require("shiki/langs/markdown.mjs"), 1);
-var import_jsx = __toESM(require("shiki/langs/jsx.mjs"), 1);
-var import_tsx = __toESM(require("shiki/langs/tsx.mjs"), 1);
-var import_sql = __toESM(require("shiki/langs/sql.mjs"), 1);
-var import_yaml = __toESM(require("shiki/langs/yaml.mjs"), 1);
-var import_rust = __toESM(require("shiki/langs/rust.mjs"), 1);
-var import_go = __toESM(require("shiki/langs/go.mjs"), 1);
-var import_java = __toESM(require("shiki/langs/java.mjs"), 1);
-var import_c = __toESM(require("shiki/langs/c.mjs"), 1);
-var import_cpp = __toESM(require("shiki/langs/cpp.mjs"), 1);
-var import_vitesse_dark = __toESM(require("shiki/themes/vitesse-dark.mjs"), 1);
-var import_vitesse_light = __toESM(require("shiki/themes/vitesse-light.mjs"), 1);
+
+// src/artifacts/registry.tsx
+var import_react14 = require("react");
+
+// src/artifacts/chart-artifact.tsx
+var import_react6 = require("react");
+
+// src/artifacts/artifact-card.tsx
 var import_jsx_runtime8 = require("react/jsx-runtime");
-var SHIKI_THEME_DARK = "vitesse-dark";
-var SHIKI_THEME_LIGHT = "vitesse-light";
-var highlighterPromise = null;
-function getHighlighter() {
-  if (!highlighterPromise) {
-    highlighterPromise = (0, import_core.createHighlighterCore)({
-      themes: [import_vitesse_dark.default, import_vitesse_light.default],
-      langs: [
-        import_javascript2.default,
-        import_typescript.default,
-        import_python.default,
-        import_html.default,
-        import_css.default,
-        import_json.default,
-        import_bash.default,
-        import_markdown.default,
-        import_jsx.default,
-        import_tsx.default,
-        import_sql.default,
-        import_yaml.default,
-        import_rust.default,
-        import_go.default,
-        import_java.default,
-        import_c.default,
-        import_cpp.default
-      ],
-      engine: (0, import_javascript.createJavaScriptRegexEngine)()
-    });
-  }
-  return highlighterPromise;
-}
-getHighlighter();
-var ShikiSyntaxHighlighter = ({
-  components: { Pre, Code: Code2 },
-  language,
-  code
-}) => {
-  const [html, setHtml] = (0, import_react6.useState)(null);
-  (0, import_react6.useEffect)(() => {
-    let cancelled = false;
-    (async () => {
-      try {
-        const highlighter = await getHighlighter();
-        const loadedLangs = highlighter.getLoadedLanguages();
-        if (!loadedLangs.includes(language)) {
+var ArtifactCard = ({ title, kind, className, bodyClassName, toolbar, children }) => {
+  const hasHeader = Boolean(title || toolbar);
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    "div",
+    {
+      className: cn(
+        "aui-artifact-root my-3 overflow-hidden rounded-xl border border-border/60 bg-background shadow-sm",
+        className
+      ),
+      "data-artifact-kind": kind,
+      children: [
+        hasHeader && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "aui-artifact-header flex items-center gap-2 border-b border-border/40 bg-muted/30 px-3 py-1.5", children: [
+          title && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "aui-artifact-title flex-1 truncate text-xs font-semibold text-foreground/80", children: title }),
+          !title && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "flex-1" }),
+          toolbar
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: cn("aui-artifact-body", bodyClassName), children })
+      ]
+    }
+  );
+};
+
+// src/artifacts/chart-artifact.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var ChartArtifactView = ({
+  artifact
+}) => {
+  const { type: _t, chartType = "bar", data = [] } = artifact;
+  const xKey = artifact.xKey ?? inferXKey(data);
+  const dataKeys = (0, import_react6.useMemo)(() => {
+    if (Array.isArray(artifact.dataKey)) return artifact.dataKey;
+    if (typeof artifact.dataKey === "string") return [artifact.dataKey];
+    return inferDataKeys(data, xKey);
+  }, [artifact.dataKey, data, xKey]);
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ArtifactCard, { title: artifact.title, kind: "chart", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "aui-artifact-chart p-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      ChartSvg,
+      {
+        chartType,
+        data,
+        xKey,
+        dataKeys,
+        unit: artifact.unit
+      }
+    ),
+    dataKeys.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Legend, { dataKeys })
+  ] }) });
+};
+var COLORS = [
+  "var(--primary, #6366f1)",
+  "#22c55e",
+  "#f59e0b",
+  "#ef4444",
+  "#06b6d4",
+  "#a855f7"
+];
+var W = 600;
+var H = 240;
+var PAD = { top: 12, right: 16, bottom: 28, left: 36 };
+var ChartSvg = ({ chartType, data, xKey, dataKeys, unit }) => {
+  if (data.length === 0 || dataKeys.length === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(EmptyState, {});
+  }
+  if (chartType === "pie") {
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(PieChart, { data, xKey, dataKey: dataKeys[0] });
+  }
+  const innerW = W - PAD.left - PAD.right;
+  const innerH = H - PAD.top - PAD.bottom;
+  const all = dataKeys.flatMap((k) => data.map((d) => toNum(d[k])));
+  const maxV = Math.max(0, ...all);
+  const minV = Math.min(0, ...all);
+  const range = maxV - minV || 1;
+  const yScale = (v) => PAD.top + innerH - (v - minV) / range * innerH;
+  const xCount = data.length;
+  const xStep = xCount > 1 ? innerW / (xCount - 1) : innerW;
+  const xPos = (i) => chartType === "bar" ? PAD.left + innerW * (i + 0.5) / xCount : PAD.left + i * xStep;
+  const ticks = niceTicks(minV, maxV);
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+    "svg",
+    {
+      viewBox: `0 0 ${W} ${H}`,
+      className: "aui-artifact-chart-svg w-full",
+      role: "img",
+      "aria-label": "Chart",
+      children: [
+        ticks.map((t, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("g", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            "line",
+            {
+              x1: PAD.left,
+              x2: W - PAD.right,
+              y1: yScale(t),
+              y2: yScale(t),
+              stroke: "currentColor",
+              strokeOpacity: 0.08
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            "text",
+            {
+              x: PAD.left - 6,
+              y: yScale(t),
+              textAnchor: "end",
+              dominantBaseline: "middle",
+              className: "fill-muted-foreground text-[10px]",
+              children: formatTick(t, unit)
+            }
+          )
+        ] }, i)),
+        data.map((d, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          "text",
+          {
+            x: xPos(i),
+            y: H - PAD.bottom + 14,
+            textAnchor: "middle",
+            className: "fill-muted-foreground text-[10px]",
+            children: String(d[xKey] ?? i)
+          },
+          i
+        )),
+        chartType === "bar" && renderBars({ data, dataKeys, xCount, xPos, yScale, minV, innerW }),
+        chartType === "line" && dataKeys.map((k, ki) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          Polyline,
+          {
+            data,
+            dataKey: k,
+            xPos,
+            yScale,
+            color: COLORS[ki % COLORS.length]
+          },
+          k
+        )),
+        chartType === "area" && dataKeys.map((k, ki) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          Area,
+          {
+            data,
+            dataKey: k,
+            xPos,
+            yScale,
+            baseY: yScale(Math.max(0, minV)),
+            color: COLORS[ki % COLORS.length]
+          },
+          k
+        ))
+      ]
+    }
+  );
+};
+function renderBars(args) {
+  const { data, dataKeys, xCount, xPos, yScale, minV, innerW } = args;
+  const groupWidth = innerW / xCount * 0.7;
+  const barWidth = groupWidth / dataKeys.length;
+  const baseY = yScale(Math.max(0, minV));
+  return dataKeys.flatMap(
+    (k, ki) => data.map((d, i) => {
+      const v = toNum(d[k]);
+      const y = yScale(v);
+      const x = xPos(i) - groupWidth / 2 + ki * barWidth;
+      const top = Math.min(y, baseY);
+      const height = Math.abs(y - baseY);
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        "rect",
+        {
+          x,
+          y: top,
+          width: Math.max(1, barWidth - 2),
+          height: Math.max(1, height),
+          rx: 2,
+          fill: COLORS[ki % COLORS.length]
+        },
+        `${k}-${i}`
+      );
+    })
+  );
+}
+var Polyline = ({ data, dataKey, xPos, yScale, color }) => {
+  const points = data.map((d, i) => `${xPos(i)},${yScale(toNum(d[dataKey]))}`).join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    "polyline",
+    {
+      points,
+      fill: "none",
+      stroke: color,
+      strokeWidth: 2,
+      strokeLinejoin: "round",
+      strokeLinecap: "round"
+    }
+  );
+};
+var Area = ({ data, dataKey, xPos, yScale, baseY, color }) => {
+  if (data.length === 0) return null;
+  const top = data.map((d, i) => `${xPos(i)},${yScale(toNum(d[dataKey]))}`).join(" ");
+  const path = `M ${xPos(0)},${baseY} L ${top} L ${xPos(data.length - 1)},${baseY} Z`;
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: path, fill: color, fillOpacity: 0.18 }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Polyline, { data, dataKey, xPos, yScale, color })
+  ] });
+};
+var PieChart = ({ data, xKey, dataKey }) => {
+  const cx = W / 2;
+  const cy = H / 2;
+  const r = Math.min(W, H) / 2 - 16;
+  const total = data.reduce((sum, d) => sum + toNum(d[dataKey]), 0) || 1;
+  let acc = 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    "svg",
+    {
+      viewBox: `0 0 ${W} ${H}`,
+      className: "aui-artifact-chart-svg w-full",
+      role: "img",
+      "aria-label": "Pie chart",
+      children: data.map((d, i) => {
+        const value = toNum(d[dataKey]);
+        const start = acc / total * Math.PI * 2;
+        acc += value;
+        const end = acc / total * Math.PI * 2;
+        return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          PieSlice,
+          {
+            cx,
+            cy,
+            r,
+            start,
+            end,
+            color: COLORS[i % COLORS.length],
+            label: String(d[xKey] ?? i)
+          },
+          i
+        );
+      })
+    }
+  );
+};
+var PieSlice = ({ cx, cy, r, start, end, color, label }) => {
+  const x1 = cx + Math.sin(start) * r;
+  const y1 = cy - Math.cos(start) * r;
+  const x2 = cx + Math.sin(end) * r;
+  const y2 = cy - Math.cos(end) * r;
+  const large = end - start > Math.PI ? 1 : 0;
+  const path = `M ${cx} ${cy} L ${x1} ${y1} A ${r} ${r} 0 ${large} 1 ${x2} ${y2} Z`;
+  const mid = (start + end) / 2;
+  const lx = cx + Math.sin(mid) * (r * 0.65);
+  const ly = cy - Math.cos(mid) * (r * 0.65);
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: path, fill: color, stroke: "var(--background, #fff)", strokeWidth: 1 }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      "text",
+      {
+        x: lx,
+        y: ly,
+        textAnchor: "middle",
+        dominantBaseline: "middle",
+        className: "fill-white text-[10px] font-semibold",
+        children: label
+      }
+    )
+  ] });
+};
+var Legend = ({ dataKeys }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "aui-artifact-chart-legend mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-muted-foreground", children: dataKeys.map((k, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "inline-flex items-center gap-1.5", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    "span",
+    {
+      className: "inline-block size-2 rounded-sm",
+      style: { background: COLORS[i % COLORS.length] },
+      "aria-hidden": true
+    }
+  ),
+  k
+] }, k)) });
+var EmptyState = () => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "aui-artifact-chart-empty flex h-32 items-center justify-center text-xs text-muted-foreground", children: "No data" });
+function inferXKey(data) {
+  if (data.length === 0) return "x";
+  for (const k of Object.keys(data[0])) {
+    if (typeof data[0][k] !== "number") return k;
+  }
+  return Object.keys(data[0])[0] ?? "x";
+}
+function inferDataKeys(data, xKey) {
+  if (data.length === 0) return [];
+  return Object.keys(data[0]).filter(
+    (k) => k !== xKey && typeof data[0][k] === "number"
+  );
+}
+function toNum(value) {
+  const n = typeof value === "number" ? value : Number(value);
+  return Number.isFinite(n) ? n : 0;
+}
+function niceTicks(min, max, count = 4) {
+  if (max === min) return [min];
+  const range = max - min;
+  const step = niceStep(range / count);
+  const start = Math.floor(min / step) * step;
+  const out = [];
+  for (let v = start; v <= max + step / 2; v += step) {
+    out.push(round(v));
+  }
+  return out;
+}
+function niceStep(raw) {
+  const exp = Math.floor(Math.log10(Math.abs(raw))) || 0;
+  const base = Math.pow(10, exp);
+  const norm = raw / base;
+  let nice = 1;
+  if (norm >= 5) nice = 5;
+  else if (norm >= 2) nice = 2;
+  return nice * base;
+}
+function round(v) {
+  return Math.round(v * 1e6) / 1e6;
+}
+function formatTick(v, unit) {
+  const s = Math.abs(v) >= 1e3 ? `${(v / 1e3).toFixed(1)}k` : String(round(v));
+  return unit ? `${s}${unit}` : s;
+}
+
+// src/artifacts/question-artifact.tsx
+var import_react7 = require("react");
+var import_react8 = require("@assistant-ui/react");
+var import_lucide_react3 = require("lucide-react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var QuestionArtifactView = ({
+  artifact
+}) => {
+  const runtime = (0, import_react8.useThreadRuntime)();
+  const [selected, setSelected] = (0, import_react7.useState)([]);
+  const [submitted, setSubmitted] = (0, import_react7.useState)(null);
+  const isMulti = artifact.multi === true;
+  const send = (labels) => {
+    if (labels.length === 0) return;
+    const text = labels.join(", ");
+    setSubmitted(text);
+    runtime.append({ role: "user", content: [{ type: "text", text }] });
+  };
+  const onPick = (option) => {
+    if (submitted) return;
+    if (!isMulti) {
+      send([option.label]);
+      return;
+    }
+    setSelected(
+      (prev) => prev.includes(option.id) ? prev.filter((id) => id !== option.id) : [...prev, option.id]
+    );
+  };
+  const onConfirm = () => {
+    const labels = artifact.options.filter((o) => selected.includes(o.id)).map((o) => o.label);
+    send(labels);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ArtifactCard, { kind: "question", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "aui-artifact-question p-3", children: [
+    artifact.prompt && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "aui-artifact-question-prompt mb-2 text-sm text-foreground/85", children: artifact.prompt }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "aui-artifact-question-options flex flex-col gap-1.5", children: artifact.options.map((option) => {
+      const isSelected = isMulti && selected.includes(option.id);
+      const isDisabled = Boolean(submitted);
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+        "button",
+        {
+          type: "button",
+          disabled: isDisabled,
+          onClick: () => onPick(option),
+          className: cn(
+            "aui-artifact-question-option flex items-center gap-2 rounded-lg border px-3 py-2 text-left text-sm transition-colors",
+            "border-border/60 hover:border-primary/40 hover:bg-muted/40",
+            isSelected && "border-primary/60 bg-primary/5",
+            isDisabled && "cursor-not-allowed opacity-60 hover:border-border/60 hover:bg-transparent"
+          ),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              "span",
+              {
+                className: cn(
+                  "flex size-4 shrink-0 items-center justify-center rounded-full border",
+                  isSelected ? "border-primary bg-primary text-primary-foreground" : "border-border"
+                ),
+                "aria-hidden": true,
+                children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react3.CheckIcon, { className: "size-3" })
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "aui-artifact-question-option-text flex-1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "font-medium text-foreground/90", children: option.label }),
+              option.description && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "text-xs text-muted-foreground", children: option.description })
+            ] })
+          ]
+        },
+        option.id
+      );
+    }) }),
+    isMulti && !submitted && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "mt-2 flex justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      Button,
+      {
+        type: "button",
+        size: "sm",
+        disabled: selected.length === 0,
+        onClick: onConfirm,
+        children: "Confirm"
+      }
+    ) }),
+    submitted && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("p", { className: "aui-artifact-question-submitted mt-2 text-xs text-muted-foreground", children: [
+      "Sent: ",
+      submitted
+    ] })
+  ] }) });
+};
+
+// src/artifacts/html-artifact.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var HtmlArtifactView = ({ artifact }) => {
+  const sandboxed = artifact.sandboxed !== false;
+  const sandbox = sandboxed ? "allow-scripts allow-same-origin allow-forms allow-modals allow-popups allow-pointer-lock" : void 0;
+  const height = artifact.height ?? "320px";
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ArtifactCard, { title: artifact.title, kind: "html", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    "iframe",
+    {
+      title: artifact.title ?? "HTML artifact",
+      srcDoc: artifact.content,
+      sandbox,
+      className: "aui-artifact-html w-full border-0 bg-background",
+      style: { height }
+    }
+  ) });
+};
+
+// src/artifacts/json-artifact.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var JsonArtifactView = ({
+  artifact
+}) => {
+  const data = "data" in artifact ? artifact.data : artifact;
+  const title = artifact.title;
+  let body;
+  try {
+    body = JSON.stringify(data, null, 2);
+  } catch {
+    body = String(data);
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ArtifactCard, { title, kind: "json", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("pre", { className: "aui-artifact-json m-0 max-h-[420px] overflow-auto p-3 font-mono text-[12px] leading-relaxed text-foreground/85", children: body }) });
+};
+
+// src/artifacts/table-artifact.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var TableArtifactView = ({ artifact }) => {
+  const rows = artifact.rows ?? [];
+  const columns = artifact.columns ?? deriveColumns(rows);
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ArtifactCard, { title: artifact.title, kind: "table", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "aui-artifact-table-wrap overflow-x-auto", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("table", { className: "aui-artifact-table w-full border-collapse text-sm", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("tr", { className: "border-b border-border/40 bg-muted/20", children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      "th",
+      {
+        className: "px-3 py-2 text-left text-xs font-semibold uppercase tracking-wider text-muted-foreground",
+        children: col.label ?? col.key
+      },
+      col.key
+    )) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("tbody", { children: rows.map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      "tr",
+      {
+        className: "border-b border-border/30 transition-colors last:border-b-0 hover:bg-muted/20",
+        children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          "td",
+          {
+            className: "px-3 py-2 align-top text-foreground/85",
+            children: formatCell(row[col.key])
+          },
+          col.key
+        ))
+      },
+      i
+    )) })
+  ] }) }) });
+};
+function deriveColumns(rows) {
+  const seen = /* @__PURE__ */ new Set();
+  const cols = [];
+  for (const row of rows) {
+    for (const key of Object.keys(row)) {
+      if (!seen.has(key)) {
+        seen.add(key);
+        cols.push({ key });
+      }
+    }
+  }
+  return cols;
+}
+function formatCell(value) {
+  if (value === null || value === void 0) return "";
+  if (typeof value === "object") return JSON.stringify(value);
+  return String(value);
+}
+
+// src/artifacts/ui/ui-artifact.tsx
+var import_react13 = require("react");
+
+// src/artifacts/ui/types.ts
+function isUiBinding(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value) && typeof value.$bind === "string";
+}
+
+// src/artifacts/ui/state.ts
+function uiStateReducer(state, action) {
+  switch (action.type) {
+    case "set":
+      return setPath(state, action.path, action.value);
+    case "toggle": {
+      const current = getPath(state, action.path);
+      return setPath(state, action.path, !current);
+    }
+    case "replace":
+      return action.state;
+  }
+}
+function getPath(state, path) {
+  if (!path) return void 0;
+  const parts = path.split(".");
+  let cursor = state;
+  for (const part of parts) {
+    if (typeof cursor !== "object" || cursor === null) return void 0;
+    cursor = cursor[part];
+  }
+  return cursor;
+}
+function setPath(state, path, value) {
+  if (!path) return state;
+  const parts = path.split(".");
+  const next = { ...state };
+  let cursor = next;
+  for (let i = 0; i < parts.length - 1; i++) {
+    const key = parts[i];
+    const child = cursor[key];
+    const cloned = typeof child === "object" && child !== null && !Array.isArray(child) ? { ...child } : {};
+    cursor[key] = cloned;
+    cursor = cloned;
+  }
+  cursor[parts[parts.length - 1]] = value;
+  return next;
+}
+function resolveBindable(value, state) {
+  if (isUiBinding(value)) {
+    return getPath(state, value.$bind);
+  }
+  return value;
+}
+
+// src/artifacts/ui/registry.tsx
+var import_react9 = require("react");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var UiStateContext = (0, import_react9.createContext)({});
+var UiDispatchContext = (0, import_react9.createContext)(() => {
+});
+var UiStateProvider = ({ state, dispatch, children }) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(UiStateContext.Provider, { value: state, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(UiDispatchContext.Provider, { value: dispatch, children }) });
+function useUiState() {
+  return (0, import_react9.useContext)(UiStateContext);
+}
+function useUiDispatch() {
+  return (0, import_react9.useContext)(UiDispatchContext);
+}
+var UiEventContext = (0, import_react9.createContext)(
+  null
+);
+var UiEventProvider = ({ onEvent, children }) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(UiEventContext.Provider, { value: onEvent, children });
+function useUiEventEmitter() {
+  return (0, import_react9.useContext)(UiEventContext);
+}
+var UiCustomNodeRegistryContext = (0, import_react9.createContext)({});
+var UiCustomNodeRegistryProvider = ({ renderers, children }) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(UiCustomNodeRegistryContext.Provider, { value: renderers, children });
+function useUiCustomNodeRegistry() {
+  return (0, import_react9.useContext)(UiCustomNodeRegistryContext);
+}
+
+// src/artifacts/ui/nodes.tsx
+var import_react10 = require("react");
+var import_react11 = require("motion/react");
+var import_react12 = require("@assistant-ui/react");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var UiNodeView = ({ node }) => {
+  switch (node.kind) {
+    case "box":
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BoxNode, { node });
+    case "text":
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(TextNode, { node });
+    case "heading":
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(HeadingNode, { node });
+    case "badge":
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BadgeNode, { node });
+    case "button":
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ButtonNode, { node });
+    case "toggle":
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ToggleNode, { node });
+    case "slider":
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SliderNode, { node });
+    case "tooltip":
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(TooltipNode, { node });
+    case "draggable":
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(DraggableNode, { node });
+    case "custom":
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(CustomNode, { node });
+    default:
+      return null;
+  }
+};
+function useActionRunner() {
+  const state = useUiState();
+  const dispatch = useUiDispatch();
+  const runtime = (0, import_react12.useThreadRuntime)();
+  const emit = useUiEventEmitter();
+  return (0, import_react10.useCallback)(
+    (actions) => {
+      if (!actions) return;
+      const list = Array.isArray(actions) ? actions : [actions];
+      for (const action of list) {
+        switch (action.kind) {
+          case "message": {
+            const text = resolveBindable(action.text, state);
+            if (typeof text === "string" && text.length > 0) {
+              runtime?.append({
+                role: "user",
+                content: [{ type: "text", text }]
+              });
+            }
+            break;
+          }
+          case "set": {
+            const value = resolveBindable(action.value, state);
+            dispatch({ type: "set", path: action.path, value });
+            break;
+          }
+          case "toggle": {
+            dispatch({ type: "toggle", path: action.path });
+            break;
+          }
+          case "emit": {
+            emit?.({ name: action.name, payload: action.payload });
+            break;
+          }
+        }
+      }
+    },
+    [state, dispatch, runtime, emit]
+  );
+}
+var ALIGN_CLS = {
+  start: "items-start",
+  center: "items-center",
+  end: "items-end",
+  stretch: "items-stretch"
+};
+var JUSTIFY_CLS = {
+  start: "justify-start",
+  center: "justify-center",
+  end: "justify-end",
+  between: "justify-between",
+  around: "justify-around"
+};
+var BoxNode = ({ node }) => {
+  const dir = node.direction ?? "col";
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    "div",
+    {
+      className: cn(
+        "aui-ui-box flex",
+        dir === "col" ? "flex-col" : "flex-row",
+        node.wrap && "flex-wrap",
+        node.align && ALIGN_CLS[node.align],
+        node.justify && JUSTIFY_CLS[node.justify],
+        node.className
+      ),
+      style: {
+        gap: node.gap !== void 0 ? `${node.gap * 0.25}rem` : void 0,
+        padding: node.padding !== void 0 ? `${node.padding * 0.25}rem` : void 0
+      },
+      children: node.children?.map((child, i) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(UiNodeView, { node: child }, child.id ?? i))
+    }
+  );
+};
+var TEXT_SIZE = {
+  xs: "text-xs",
+  sm: "text-sm",
+  base: "text-base",
+  lg: "text-lg"
+};
+var TEXT_WEIGHT = {
+  normal: "font-normal",
+  medium: "font-medium",
+  semibold: "font-semibold",
+  bold: "font-bold"
+};
+var TextNode = ({ node }) => {
+  const state = useUiState();
+  const value = resolveBindable(node.value, state);
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    "span",
+    {
+      className: cn(
+        "aui-ui-text",
+        node.muted && "text-muted-foreground",
+        node.size && TEXT_SIZE[node.size],
+        node.weight && TEXT_WEIGHT[node.weight],
+        node.className
+      ),
+      children: value === void 0 || value === null ? "" : String(value)
+    }
+  );
+};
+var HEADING_CLS = {
+  1: "text-2xl",
+  2: "text-xl",
+  3: "text-lg",
+  4: "text-base"
+};
+var HeadingNode = ({ node }) => {
+  const state = useUiState();
+  const value = String(resolveBindable(node.value, state) ?? "");
+  const level = node.level ?? 2;
+  const cls = cn(
+    "aui-ui-heading font-semibold text-foreground",
+    HEADING_CLS[level],
+    node.className
+  );
+  switch (level) {
+    case 1:
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("h1", { className: cls, children: value });
+    case 2:
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("h2", { className: cls, children: value });
+    case 3:
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("h3", { className: cls, children: value });
+    case 4:
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("h4", { className: cls, children: value });
+  }
+};
+var BADGE_TONE = {
+  default: "bg-muted text-foreground",
+  primary: "bg-primary/10 text-primary",
+  success: "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400",
+  warn: "bg-amber-500/10 text-amber-600 dark:text-amber-400",
+  danger: "bg-destructive/10 text-destructive"
+};
+var BadgeNode = ({ node }) => {
+  const state = useUiState();
+  const value = String(resolveBindable(node.value, state) ?? "");
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    "span",
+    {
+      className: cn(
+        "aui-ui-badge inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium",
+        BADGE_TONE[node.tone ?? "default"],
+        node.className
+      ),
+      children: value
+    }
+  );
+};
+var ButtonNode = ({ node }) => {
+  const state = useUiState();
+  const run = useActionRunner();
+  const label = String(resolveBindable(node.label, state) ?? "");
+  const disabled = node.disabled !== void 0 ? Boolean(resolveBindable(node.disabled, state)) : false;
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    Button,
+    {
+      variant: node.variant ?? "default",
+      size: node.size ?? "default",
+      disabled,
+      className: node.className,
+      onClick: () => run(node.onClick),
+      children: label
+    }
+  );
+};
+var ToggleNode = ({ node }) => {
+  const state = useUiState();
+  const dispatch = useUiDispatch();
+  const run = useActionRunner();
+  const value = Boolean(getPath(state, node.binding));
+  const label = node.label ? String(resolveBindable(node.label, state) ?? "") : null;
+  const onToggle = () => {
+    dispatch({ type: "toggle", path: node.binding });
+    run(node.onChange);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+    "label",
+    {
+      className: cn(
+        "aui-ui-toggle inline-flex cursor-pointer items-center gap-2 text-sm select-none",
+        node.className
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          "button",
+          {
+            type: "button",
+            role: "switch",
+            "aria-checked": value,
+            onClick: onToggle,
+            className: cn(
+              "relative inline-flex h-5 w-9 shrink-0 items-center rounded-full border transition-colors",
+              value ? "border-primary bg-primary" : "border-border bg-muted hover:bg-muted/80"
+            ),
+            children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+              "span",
+              {
+                className: cn(
+                  "inline-block size-4 transform rounded-full bg-background shadow transition-transform",
+                  value ? "translate-x-4" : "translate-x-0.5"
+                ),
+                "aria-hidden": true
+              }
+            )
+          }
+        ),
+        label && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-foreground/85", children: label })
+      ]
+    }
+  );
+};
+var SliderNode = ({ node }) => {
+  const state = useUiState();
+  const dispatch = useUiDispatch();
+  const run = useActionRunner();
+  const min = node.min ?? 0;
+  const max = node.max ?? 100;
+  const step = node.step ?? 1;
+  const raw = getPath(state, node.binding);
+  const value = typeof raw === "number" ? raw : min;
+  const showValue = node.showValue ?? true;
+  const label = node.label ? String(resolveBindable(node.label, state) ?? "") : null;
+  const onChange = (e) => {
+    const next = Number(e.target.value);
+    dispatch({ type: "set", path: node.binding, value: next });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: cn("aui-ui-slider flex flex-col gap-1", node.className), children: [
+    (label || showValue) && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center justify-between text-xs text-muted-foreground", children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { children: label }),
+      showValue && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "font-mono", children: value })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      "input",
+      {
+        type: "range",
+        min,
+        max,
+        step,
+        value,
+        onChange,
+        onMouseUp: () => run(node.onChange),
+        onKeyUp: (e) => {
+          if (e.key === "Enter" || e.key === " ") run(node.onChange);
+        },
+        onTouchEnd: () => run(node.onChange),
+        className: "aui-ui-slider-input h-1.5 w-full cursor-pointer appearance-none rounded-full bg-muted accent-primary"
+      }
+    )
+  ] });
+};
+var TooltipNode = ({ node }) => {
+  const state = useUiState();
+  const content = String(resolveBindable(node.content, state) ?? "");
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Tooltip, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: cn("aui-ui-tooltip-trigger inline-flex", node.className), children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(UiNodeView, { node: node.child }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(TooltipContent, { side: node.side ?? "top", children: content })
+  ] }) });
+};
+var DraggableNode = ({ node }) => {
+  const run = useActionRunner();
+  const snapBack = node.snapBack ?? true;
+  const axis = node.axis ?? "both";
+  const dragProp = axis === "both" ? true : axis;
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    import_react11.motion.div,
+    {
+      drag: dragProp,
+      dragMomentum: false,
+      dragSnapToOrigin: snapBack,
+      whileDrag: { scale: 1.02, cursor: "grabbing" },
+      onDragEnd: () => run(node.onDragEnd),
+      className: cn(
+        "aui-ui-draggable inline-block cursor-grab touch-none",
+        node.className
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(UiNodeView, { node: node.child })
+    }
+  );
+};
+var CustomNode = ({ node }) => {
+  const state = useUiState();
+  const registry = useUiCustomNodeRegistry();
+  const Renderer = registry[node.name];
+  if (!Renderer) return null;
+  const resolvedProps = resolveProps(node.props ?? {}, state);
+  const children = node.children?.map((child, i) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(UiNodeView, { node: child }, child.id ?? i));
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Renderer, { props: resolvedProps, children });
+};
+function resolveProps(props, state) {
+  const out = {};
+  for (const [k, v] of Object.entries(props)) {
+    out[k] = resolveBindable(v, state);
+  }
+  return out;
+}
+
+// src/artifacts/ui/ui-artifact.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var UiArtifactView = ({ artifact }) => {
+  const [state, dispatch] = (0, import_react13.useReducer)(
+    uiStateReducer,
+    artifact.initialState ?? {}
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ArtifactCard, { title: artifact.title, kind: "ui", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(UiStateProvider, { state, dispatch, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "aui-ui-root p-3", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(UiNodeView, { node: artifact.root }) }) }) });
+};
+
+// src/artifacts/registry.tsx
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var defaultArtifactRenderers = {
+  chart: ChartArtifactView,
+  question: QuestionArtifactView,
+  html: HtmlArtifactView,
+  json: JsonArtifactView,
+  table: TableArtifactView,
+  ui: UiArtifactView
+};
+var ArtifactRegistryContext = (0, import_react14.createContext)(
+  defaultArtifactRenderers
+);
+var ArtifactRegistryProvider = ({ renderers, override, children }) => {
+  const merged = (0, import_react14.useMemo)(() => {
+    if (!renderers) return defaultArtifactRenderers;
+    if (override) return renderers;
+    return { ...defaultArtifactRenderers, ...renderers };
+  }, [renderers, override]);
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ArtifactRegistryContext.Provider, { value: merged, children });
+};
+function useArtifactRegistry() {
+  return (0, import_react14.useContext)(ArtifactRegistryContext);
+}
+var ArtifactView = ({ artifact }) => {
+  const registry = useArtifactRegistry();
+  const Renderer = registry[artifact.type] ?? registry.json;
+  if (!Renderer) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Renderer, { artifact });
+};
+
+// src/artifacts/parse.ts
+var ARTIFACT_FENCE_LANGUAGES = /* @__PURE__ */ new Set([
+  "timbal-artifact",
+  "timbal"
+]);
+function isArtifactFenceLanguage(language) {
+  return typeof language === "string" && ARTIFACT_FENCE_LANGUAGES.has(language);
+}
+function tryParseStructuredText(text) {
+  const trimmed = text.trim();
+  if (!trimmed.startsWith("{") && !trimmed.startsWith("[")) return null;
+  try {
+    return JSON.parse(trimmed);
+  } catch {
+  }
+  try {
+    const asJson = trimmed.replace(/\bTrue\b/g, "true").replace(/\bFalse\b/g, "false").replace(/\bNone\b/g, "null").replace(/'/g, '"');
+    return JSON.parse(asJson);
+  } catch {
+    return null;
+  }
+}
+function parseArtifactFromToolResult(result) {
+  if (result === void 0 || result === null) return null;
+  if (typeof result === "string") {
+    const parsed = tryParseStructuredText(result);
+    if (parsed === null) return null;
+    return parseArtifactFromToolResult(parsed);
+  }
+  if (Array.isArray(result)) {
+    for (const item of result) {
+      if (typeof item === "object" && item !== null && "text" in item) {
+        const text = item.text;
+        if (typeof text === "string") {
+          const fromText = parseArtifactFromToolResult(text);
+          if (fromText) return fromText;
+        }
+      }
+    }
+    return null;
+  }
+  if (typeof result === "object") {
+    const obj = result;
+    if (obj.type === "text" && typeof obj.text === "string") {
+      return parseArtifactFromToolResult(obj.text);
+    }
+    if (obj.type === "thinking" && typeof obj.thinking === "string") {
+      return parseArtifactFromToolResult(obj.thinking);
+    }
+  }
+  return isArtifact(result) ? result : null;
+}
+var FENCE_RE = /```(?:timbal-artifact|timbal)\s*\n([\s\S]*?)\n```/g;
+function findMarkdownArtifacts(markdown) {
+  const matches = [];
+  FENCE_RE.lastIndex = 0;
+  let m;
+  while ((m = FENCE_RE.exec(markdown)) !== null) {
+    const raw = m[0];
+    const body = m[1];
+    try {
+      const parsed = JSON.parse(body);
+      if (isArtifact(parsed)) {
+        matches.push({
+          artifact: parsed,
+          raw,
+          start: m.index,
+          end: m.index + raw.length
+        });
+      }
+    } catch {
+    }
+  }
+  return matches;
+}
+function splitMarkdownByArtifacts(markdown) {
+  const matches = findMarkdownArtifacts(markdown);
+  if (matches.length === 0) return [{ kind: "text", text: markdown }];
+  const segments = [];
+  let cursor = 0;
+  for (const match of matches) {
+    if (match.start > cursor) {
+      segments.push({ kind: "text", text: markdown.slice(cursor, match.start) });
+    }
+    segments.push({ kind: "artifact", artifact: match.artifact });
+    cursor = match.end;
+  }
+  if (cursor < markdown.length) {
+    segments.push({ kind: "text", text: markdown.slice(cursor) });
+  }
+  return segments;
+}
+
+// src/components/syntax-highlighter.tsx
+var import_javascript2 = __toESM(require("shiki/langs/javascript.mjs"), 1);
+var import_typescript = __toESM(require("shiki/langs/typescript.mjs"), 1);
+var import_python = __toESM(require("shiki/langs/python.mjs"), 1);
+var import_html = __toESM(require("shiki/langs/html.mjs"), 1);
+var import_css = __toESM(require("shiki/langs/css.mjs"), 1);
+var import_json = __toESM(require("shiki/langs/json.mjs"), 1);
+var import_bash = __toESM(require("shiki/langs/bash.mjs"), 1);
+var import_markdown = __toESM(require("shiki/langs/markdown.mjs"), 1);
+var import_jsx = __toESM(require("shiki/langs/jsx.mjs"), 1);
+var import_tsx = __toESM(require("shiki/langs/tsx.mjs"), 1);
+var import_sql = __toESM(require("shiki/langs/sql.mjs"), 1);
+var import_yaml = __toESM(require("shiki/langs/yaml.mjs"), 1);
+var import_rust = __toESM(require("shiki/langs/rust.mjs"), 1);
+var import_go = __toESM(require("shiki/langs/go.mjs"), 1);
+var import_java = __toESM(require("shiki/langs/java.mjs"), 1);
+var import_c = __toESM(require("shiki/langs/c.mjs"), 1);
+var import_cpp = __toESM(require("shiki/langs/cpp.mjs"), 1);
+var import_vitesse_dark = __toESM(require("shiki/themes/vitesse-dark.mjs"), 1);
+var import_vitesse_light = __toESM(require("shiki/themes/vitesse-light.mjs"), 1);
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var SHIKI_THEME_DARK = "vitesse-dark";
+var SHIKI_THEME_LIGHT = "vitesse-light";
+var highlighterPromise = null;
+function getHighlighter() {
+  if (!highlighterPromise) {
+    highlighterPromise = (0, import_core.createHighlighterCore)({
+      themes: [import_vitesse_dark.default, import_vitesse_light.default],
+      langs: [
+        import_javascript2.default,
+        import_typescript.default,
+        import_python.default,
+        import_html.default,
+        import_css.default,
+        import_json.default,
+        import_bash.default,
+        import_markdown.default,
+        import_jsx.default,
+        import_tsx.default,
+        import_sql.default,
+        import_yaml.default,
+        import_rust.default,
+        import_go.default,
+        import_java.default,
+        import_c.default,
+        import_cpp.default
+      ],
+      engine: (0, import_javascript.createJavaScriptRegexEngine)()
+    });
+  }
+  return highlighterPromise;
+}
+getHighlighter();
+var ShikiSyntaxHighlighter = ({
+  components: { Pre, Code: Code2 },
+  language,
+  code
+}) => {
+  const [html, setHtml] = (0, import_react15.useState)(null);
+  (0, import_react15.useEffect)(() => {
+    let cancelled = false;
+    (async () => {
+      try {
+        const highlighter = await getHighlighter();
+        const loadedLangs = highlighter.getLoadedLanguages();
+        if (!loadedLangs.includes(language)) {
           if (!cancelled) setHtml(null);
           return;
         }
@@ -945,8 +2564,17 @@ var ShikiSyntaxHighlighter = ({
       cancelled = true;
     };
   }, [code, language]);
+  if (isArtifactFenceLanguage(language)) {
+    try {
+      const parsed = JSON.parse(code);
+      if (isArtifact(parsed)) {
+        return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ArtifactView, { artifact: parsed });
+      }
+    } catch {
+    }
+  }
   if (html) {
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       "div",
       {
         className: "shiki-wrapper [&>pre]:!m-0 [&>pre]:!rounded-t-none [&>pre]:!rounded-b-lg [&>pre]:!border [&>pre]:!border-t-0 [&>pre]:!border-border/50 [&>pre]:!p-3 [&>pre]:!text-xs [&>pre]:!leading-relaxed [&>pre]:overflow-x-auto",
@@ -954,14 +2582,14 @@ var ShikiSyntaxHighlighter = ({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Pre, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Code2, { children: code }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pre, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Code2, { children: code }) });
 };
 var syntax_highlighter_default = ShikiSyntaxHighlighter;
 
 // src/components/markdown-text.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var MarkdownTextImpl = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     import_react_markdown.MarkdownTextPrimitive,
     {
       remarkPlugins: [import_remark_gfm.default, import_remark_math.default],
@@ -974,27 +2602,28 @@ var MarkdownTextImpl = () => {
     }
   );
 };
-var MarkdownText = (0, import_react7.memo)(MarkdownTextImpl);
+var MarkdownText = (0, import_react16.memo)(MarkdownTextImpl);
 var CodeHeader = ({ language, code }) => {
   const { isCopied, copyToClipboard } = useCopyToClipboard();
+  if (isArtifactFenceLanguage(language)) return null;
   const onCopy = () => {
     if (!code || isCopied) return;
     copyToClipboard(code);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "aui-code-header flex items-center justify-between rounded-t-lg border border-b-0 border-border/50 bg-zinc-100 px-4 py-2 dark:bg-zinc-800/80", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "flex items-center gap-2 text-xs font-semibold tracking-wide text-muted-foreground/80 uppercase", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "inline-block h-2 w-2 rounded-full bg-primary/40" }),
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "aui-code-header flex items-center justify-between rounded-t-lg border border-b-0 border-border/50 bg-zinc-100 px-4 py-2 dark:bg-zinc-800/80", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { className: "flex items-center gap-2 text-xs font-semibold tracking-wide text-muted-foreground/80 uppercase", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "inline-block h-2 w-2 rounded-full bg-primary/40" }),
       language
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
       TooltipIconButton,
       {
         tooltip: isCopied ? "Copied!" : "Copy",
         onClick: onCopy,
         className: "transition-colors hover:text-foreground",
         children: [
-          !isCopied && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react3.CopyIcon, { className: "h-3.5 w-3.5" }),
-          isCopied && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react3.CheckIcon, { className: "h-3.5 w-3.5 text-emerald-500" })
+          !isCopied && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react4.CopyIcon, { className: "h-3.5 w-3.5" }),
+          isCopied && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react4.CheckIcon, { className: "h-3.5 w-3.5 text-emerald-500" })
         ]
       }
     )
@@ -1003,7 +2632,7 @@ var CodeHeader = ({ language, code }) => {
 var useCopyToClipboard = ({
   copiedDuration = 3e3
 } = {}) => {
-  const [isCopied, setIsCopied] = (0, import_react7.useState)(false);
+  const [isCopied, setIsCopied] = (0, import_react16.useState)(false);
   const copyToClipboard = (value) => {
     if (!value) return;
     navigator.clipboard.writeText(value).then(() => {
@@ -1014,7 +2643,7 @@ var useCopyToClipboard = ({
   return { isCopied, copyToClipboard };
 };
 var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownComponents)({
-  h1: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  h1: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     "h1",
     {
       className: cn(
@@ -1024,7 +2653,7 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
       ...props
     }
   ),
-  h2: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  h2: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     "h2",
     {
       className: cn(
@@ -1034,7 +2663,7 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
       ...props
     }
   ),
-  h3: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  h3: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     "h3",
     {
       className: cn(
@@ -1044,7 +2673,7 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
       ...props
     }
   ),
-  h4: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  h4: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     "h4",
     {
       className: cn(
@@ -1054,7 +2683,7 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
       ...props
     }
   ),
-  h5: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  h5: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     "h5",
     {
       className: cn(
@@ -1064,7 +2693,7 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
       ...props
     }
   ),
-  h6: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  h6: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     "h6",
     {
       className: cn(
@@ -1074,7 +2703,7 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
       ...props
     }
   ),
-  p: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  p: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     "p",
     {
       className: cn(
@@ -1084,7 +2713,7 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
       ...props
     }
   ),
-  a: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  a: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     "a",
     {
       className: cn(
@@ -1096,7 +2725,7 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
       ...props
     }
   ),
-  blockquote: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  blockquote: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     "blockquote",
     {
       className: cn(
@@ -1106,7 +2735,7 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
       ...props
     }
   ),
-  ul: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  ul: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     "ul",
     {
       className: cn(
@@ -1116,7 +2745,7 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
       ...props
     }
   ),
-  ol: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  ol: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     "ol",
     {
       className: cn(
@@ -1126,7 +2755,7 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
       ...props
     }
   ),
-  hr: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  hr: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     "hr",
     {
       className: cn(
@@ -1136,14 +2765,14 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
       ...props
     }
   ),
-  table: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "my-4 w-full overflow-x-auto rounded-lg border border-border/50", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  table: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "my-4 w-full overflow-x-auto rounded-lg border border-border/50", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     "table",
     {
       className: cn("aui-md-table w-full border-collapse text-sm", className),
       ...props
     }
   ) }),
-  th: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  th: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     "th",
     {
       className: cn(
@@ -1153,7 +2782,7 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
       ...props
     }
   ),
-  td: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  td: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     "td",
     {
       className: cn(
@@ -1163,7 +2792,7 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
       ...props
     }
   ),
-  tr: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  tr: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     "tr",
     {
       className: cn(
@@ -1173,8 +2802,8 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
       ...props
     }
   ),
-  li: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("li", { className: cn("aui-md-li leading-[1.7]", className), ...props }),
-  sup: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  li: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("li", { className: cn("aui-md-li leading-[1.7]", className), ...props }),
+  sup: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     "sup",
     {
       className: cn(
@@ -1184,7 +2813,7 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
       ...props
     }
   ),
-  pre: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  pre: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     "pre",
     {
       className: cn(
@@ -1196,7 +2825,7 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
   ),
   code: function Code({ className, ...props }) {
     const isCodeBlock = (0, import_react_markdown.useIsMarkdownCodeBlock)();
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       "code",
       {
         className: cn(
@@ -1207,19 +2836,19 @@ var defaultComponents = (0, import_react_markdown.unstable_memoizeMarkdownCompon
       }
     );
   },
-  strong: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("strong", { className: cn("font-semibold text-foreground", className), ...props }),
-  em: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("em", { className: cn("italic", className), ...props }),
+  strong: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("strong", { className: cn("font-semibold text-foreground", className), ...props }),
+  em: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("em", { className: cn("italic", className), ...props }),
   CodeHeader
 });
 
 // src/components/tool-fallback.tsx
-var import_react10 = require("react");
-var import_lucide_react4 = require("lucide-react");
+var import_react19 = require("react");
+var import_lucide_react5 = require("lucide-react");
 
 // src/ui/shimmer.tsx
-var import_react8 = require("motion/react");
-var import_react9 = require("react");
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_react17 = require("motion/react");
+var import_react18 = require("react");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var ShimmerComponent = ({
   children,
   as: Component = "p",
@@ -1227,14 +2856,14 @@ var ShimmerComponent = ({
   duration = 2,
   spread = 2
 }) => {
-  const MotionComponent = import_react8.motion.create(
+  const MotionComponent = import_react17.motion.create(
     Component
   );
-  const dynamicSpread = (0, import_react9.useMemo)(
+  const dynamicSpread = (0, import_react18.useMemo)(
     () => (children?.length ?? 0) * spread,
     [children, spread]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     MotionComponent,
     {
       animate: { backgroundPosition: "0% center" },
@@ -1257,36 +2886,303 @@ var ShimmerComponent = ({
     }
   );
 };
-var Shimmer = (0, import_react9.memo)(ShimmerComponent);
+var Shimmer = (0, import_react18.memo)(ShimmerComponent);
 
 // src/components/tool-fallback.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 var ToolFallbackImpl = ({
   toolName,
+  argsText,
+  result,
   status
 }) => {
-  if (status?.type !== "running") return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center gap-2 py-1 text-sm text-muted-foreground", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react4.WrenchIcon, { className: "size-4" }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Shimmer, { as: "span", duration: 1.8, spread: 2.5, children: `Using tool: ${toolName}` })
-  ] });
+  const isRunning = status?.type === "running";
+  const isError = status?.type === "incomplete" && status.reason !== "cancelled";
+  if (isRunning) {
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "aui-tool-fallback-running flex items-center gap-2 py-1 text-sm text-muted-foreground", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react5.WrenchIcon, { className: "size-4" }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Shimmer, { as: "span", duration: 1.8, spread: 2.5, children: `Using tool: ${toolName}` })
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    ToolPanel,
+    {
+      toolName,
+      argsText,
+      result,
+      isError
+    }
+  );
+};
+var ToolPanel = ({ toolName, argsText, result, isError }) => {
+  const [open, setOpen] = (0, import_react19.useState)(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+    "div",
+    {
+      className: cn(
+        "aui-tool-fallback-root my-2 overflow-hidden rounded-lg border border-border/60 bg-muted/30 text-sm",
+        isError && "border-destructive/50 bg-destructive/5"
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+          "button",
+          {
+            type: "button",
+            onClick: () => setOpen((v) => !v),
+            className: "aui-tool-fallback-header flex w-full items-center gap-2 px-3 py-2 text-left text-muted-foreground transition-colors hover:bg-muted/50",
+            "aria-expanded": open,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react5.WrenchIcon, { className: "size-3.5" }),
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "aui-tool-fallback-name flex-1 truncate font-mono text-xs font-medium text-foreground/80", children: toolName }),
+              isError && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "aui-tool-fallback-status text-xs font-medium text-destructive", children: "error" }),
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                import_lucide_react5.ChevronDownIcon,
+                {
+                  className: cn(
+                    "size-3.5 shrink-0 transition-transform",
+                    open && "rotate-180"
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        open && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "aui-tool-fallback-body grid gap-2 border-t border-border/40 bg-background/50 px-3 py-2.5 text-xs", children: [
+          argsText && argsText !== "{}" && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Section, { label: "Input", value: argsText }),
+          result !== void 0 && result !== null && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Section, { label: "Output", value: formatResult(result) })
+        ] })
+      ]
+    }
+  );
 };
-var ToolFallback = (0, import_react10.memo)(
+var Section = ({ label, value }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "aui-tool-fallback-section", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "aui-tool-fallback-section-label mb-0.5 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground", children: label }),
+  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("pre", { className: "aui-tool-fallback-section-value overflow-x-auto whitespace-pre-wrap break-words font-mono text-[11px] leading-relaxed text-foreground/85", children: value })
+] });
+function formatResult(result) {
+  if (typeof result === "string") return result;
+  try {
+    return JSON.stringify(result, null, 2);
+  } catch {
+    return String(result);
+  }
+}
+var ToolFallback = (0, import_react19.memo)(
   ToolFallbackImpl
 );
 ToolFallback.displayName = "ToolFallback";
 
+// src/artifacts/tool-artifact.tsx
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var ToolArtifactFallback = (props) => {
+  const registry = useArtifactRegistry();
+  const isRunning = props.status?.type === "running";
+  if (!isRunning) {
+    const artifact = parseArtifactFromToolResult(props.result);
+    if (artifact) {
+      const Renderer = registry[artifact.type];
+      if (Renderer) {
+        return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Renderer, { artifact });
+      }
+    }
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ToolFallback, { ...props });
+};
+
+// src/components/composer.tsx
+var import_react20 = require("@assistant-ui/react");
+var import_lucide_react6 = require("lucide-react");
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var Composer = ({
+  placeholder = "Send a message...",
+  showAttachments = true,
+  toolbar,
+  sendTooltip = "Send message",
+  noAutoFocus,
+  className
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    import_react20.ComposerPrimitive.Root,
+    {
+      className: cn(
+        "aui-composer-root relative mt-3 flex w-full flex-col",
+        className
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+        import_react20.ComposerPrimitive.AttachmentDropzone,
+        {
+          className: "aui-composer-attachment-dropzone flex w-full flex-col rounded-2xl border border-input bg-background px-1 pt-2 outline-none transition-shadow has-[textarea:focus-visible]:border-ring has-[textarea:focus-visible]:ring-2 has-[textarea:focus-visible]:ring-ring/20 data-[dragging=true]:border-ring data-[dragging=true]:border-dashed data-[dragging=true]:bg-accent/50",
+          children: [
+            showAttachments && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ComposerAttachments, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ComposerInput, { placeholder, autoFocus: !noAutoFocus }),
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+              ComposerToolbar,
+              {
+                showAttachments,
+                toolbar,
+                sendTooltip
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+var ComposerInput = ({
+  placeholder,
+  autoFocus
+}) => {
+  const composer = (0, import_react20.useComposerRuntime)();
+  const onKeyDown = (e) => {
+    if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing) {
+      e.preventDefault();
+      composer.send();
+    }
+  };
+  const onInput = (e) => {
+    const el = e.currentTarget;
+    el.style.height = "auto";
+    el.style.height = `${Math.min(el.scrollHeight, 240)}px`;
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    import_react20.ComposerPrimitive.Input,
+    {
+      placeholder,
+      className: "aui-composer-input mb-1 max-h-60 min-h-12 w-full resize-none bg-transparent px-4 pt-2 pb-3 text-sm outline-none placeholder:text-muted-foreground focus-visible:ring-0",
+      rows: 1,
+      autoFocus,
+      "aria-label": "Message input",
+      onKeyDown,
+      onInput
+    }
+  );
+};
+var ComposerToolbar = ({ showAttachments, toolbar, sendTooltip }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "aui-composer-action-wrapper relative mx-2 mb-2 flex items-center gap-1", children: [
+    showAttachments && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ComposerAddAttachment, {}),
+    toolbar,
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex-1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ComposerSendOrCancel, { sendTooltip })
+  ] });
+};
+var ComposerSendOrCancel = ({ sendTooltip }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react20.AuiIf, { condition: (s) => !s.thread.isRunning, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react20.ComposerPrimitive.Send, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      TooltipIconButton,
+      {
+        tooltip: sendTooltip,
+        side: "bottom",
+        type: "submit",
+        variant: "default",
+        size: "icon",
+        className: "aui-composer-send size-8 rounded-full",
+        "aria-label": "Send message",
+        children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react6.ArrowUpIcon, { className: "aui-composer-send-icon size-4" })
+      }
+    ) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react20.AuiIf, { condition: (s) => s.thread.isRunning, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react20.ComposerPrimitive.Cancel, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      Button,
+      {
+        type: "button",
+        variant: "default",
+        size: "icon",
+        className: "aui-composer-cancel size-8 rounded-full",
+        "aria-label": "Stop generating",
+        children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react6.SquareIcon, { className: "aui-composer-cancel-icon size-3 fill-current" })
+      }
+    ) }) })
+  ] });
+};
+
+// src/components/suggestions.tsx
+var import_react21 = require("react");
+var import_react22 = require("@assistant-ui/react");
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var Suggestions = ({
+  suggestions,
+  layout = "grid",
+  className
+}) => {
+  const items = useResolvedSuggestions(suggestions);
+  if (!items || items.length === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    "div",
+    {
+      className: cn(
+        "aui-thread-suggestions w-full pb-4",
+        layout === "grid" ? "grid gap-2 @md:grid-cols-2" : "flex gap-2 overflow-x-auto pb-1 [&::-webkit-scrollbar]:hidden",
+        className
+      ),
+      children: items.map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(SuggestionChip, { suggestion: s, compact: layout === "row" }, s.title + i))
+    }
+  );
+};
+var SuggestionChip = ({
+  suggestion,
+  compact
+}) => {
+  const runtime = (0, import_react22.useThreadRuntime)();
+  const onClick = () => {
+    const text = suggestion.prompt ?? suggestion.title;
+    runtime.append({ role: "user", content: [{ type: "text", text }] });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "aui-thread-suggestion-display fade-in slide-in-from-bottom-2 animate-in fill-mode-both duration-200", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+    Button,
+    {
+      variant: "ghost",
+      onClick,
+      className: cn(
+        "aui-thread-suggestion h-auto rounded-2xl border text-left text-sm transition-colors hover:bg-muted",
+        compact ? "shrink-0 flex-row items-center gap-2 whitespace-nowrap px-3 py-2" : "w-full flex-wrap items-start justify-start gap-1 px-4 py-3 @md:flex-col"
+      ),
+      children: [
+        suggestion.icon && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "aui-thread-suggestion-icon shrink-0 text-muted-foreground", children: suggestion.icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "aui-thread-suggestion-text-1 font-medium", children: suggestion.title }),
+        suggestion.description && !compact && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "aui-thread-suggestion-text-2 text-muted-foreground", children: suggestion.description })
+      ]
+    }
+  ) });
+};
+function useResolvedSuggestions(source) {
+  const [resolved, setResolved] = (0, import_react21.useState)(
+    () => Array.isArray(source) ? source : void 0
+  );
+  (0, import_react21.useEffect)(() => {
+    if (!source) {
+      setResolved(void 0);
+      return;
+    }
+    if (Array.isArray(source)) {
+      setResolved(source);
+      return;
+    }
+    let cancelled = false;
+    Promise.resolve().then(() => source()).then((value) => {
+      if (!cancelled) setResolved(value);
+    }).catch(() => {
+      if (!cancelled) setResolved([]);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [source]);
+  return (0, import_react21.useMemo)(() => resolved, [resolved]);
+}
+
 // src/components/thread.tsx
-var import_react11 = require("@assistant-ui/react");
-var import_lucide_react5 = require("lucide-react");
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_react23 = require("@assistant-ui/react");
+var import_lucide_react7 = require("lucide-react");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 var Thread = ({
   className,
   maxWidth = "44rem",
   welcome,
   suggestions,
   composerPlaceholder = "Send a message...",
-  components
+  components,
+  artifacts,
+  onArtifactEvent
 }) => {
   const WelcomeSlot = components?.Welcome ?? ThreadWelcome;
   const ComposerSlot = components?.Composer ?? Composer;
@@ -1294,59 +3190,79 @@ var Thread = ({
   const AssistantMessageSlot = components?.AssistantMessage ?? AssistantMessage;
   const EditComposerSlot = components?.EditComposer ?? EditComposer;
   const ScrollToBottomSlot = components?.ScrollToBottom ?? ThreadScrollToBottom;
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-    import_react11.ThreadPrimitive.Root,
+  const SuggestionsSlot = components?.Suggestions ?? Suggestions;
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    ArtifactRegistryProvider,
     {
-      className: cn(
-        "aui-root aui-thread-root @container flex h-full flex-col bg-background",
-        className
-      ),
-      style: { ["--thread-max-width"]: maxWidth },
-      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
-        import_react11.ThreadPrimitive.Viewport,
+      renderers: artifacts?.renderers,
+      override: artifacts?.override,
+      children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(UiEventProvider, { onEvent: onArtifactEvent ?? (() => {
+      }), children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        import_react23.ThreadPrimitive.Root,
         {
-          turnAnchor: "bottom",
-          className: "aui-thread-viewport relative flex flex-1 flex-col overflow-x-auto overflow-y-scroll px-4 pt-4",
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(WelcomeSlot, { config: welcome, suggestions }),
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-              import_react11.ThreadPrimitive.Messages,
-              {
-                components: {
-                  UserMessage: UserMessageSlot,
-                  EditComposer: EditComposerSlot,
-                  AssistantMessage: AssistantMessageSlot
-                }
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react11.ThreadPrimitive.ViewportFooter, { className: "aui-thread-viewport-footer sticky bottom-0 mx-auto mt-auto flex w-full max-w-(--thread-max-width) flex-col gap-4 overflow-visible rounded-t-3xl bg-background pb-4 md:pb-6", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ScrollToBottomSlot, {}),
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ComposerSlot, { placeholder: composerPlaceholder })
-            ] })
-          ]
+          className: cn(
+            "aui-root aui-thread-root @container flex h-full flex-col bg-background",
+            className
+          ),
+          style: { ["--thread-max-width"]: maxWidth },
+          children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+            import_react23.ThreadPrimitive.Viewport,
+            {
+              turnAnchor: "bottom",
+              className: "aui-thread-viewport relative flex flex-1 flex-col overflow-x-auto overflow-y-scroll px-4 pt-4",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                  WelcomeSlot,
+                  {
+                    config: welcome,
+                    suggestions,
+                    Suggestions: SuggestionsSlot
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                  import_react23.ThreadPrimitive.Messages,
+                  {
+                    components: {
+                      UserMessage: UserMessageSlot,
+                      EditComposer: EditComposerSlot,
+                      AssistantMessage: AssistantMessageSlot
+                    }
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_react23.ThreadPrimitive.ViewportFooter, { className: "aui-thread-viewport-footer sticky bottom-0 mx-auto mt-auto flex w-full max-w-(--thread-max-width) flex-col gap-4 overflow-visible rounded-t-3xl bg-background pb-4 md:pb-6", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ScrollToBottomSlot, {}),
+                  /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ComposerSlot, { placeholder: composerPlaceholder })
+                ] })
+              ]
+            }
+          )
         }
-      )
+      ) })
     }
   );
 };
 var ThreadScrollToBottom = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react11.ThreadPrimitive.ScrollToBottom, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react23.ThreadPrimitive.ScrollToBottom, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     TooltipIconButton,
     {
       tooltip: "Scroll to bottom",
       variant: "outline",
       className: "aui-thread-scroll-to-bottom absolute -top-12 z-10 self-center rounded-full p-4 disabled:invisible dark:bg-background dark:hover:bg-accent",
-      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react5.ArrowDownIcon, {})
+      children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react7.ArrowDownIcon, {})
     }
   ) });
 };
-var ThreadWelcome = ({ config, suggestions }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react11.AuiIf, { condition: (s) => s.thread.isEmpty, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "aui-thread-welcome-root mx-auto my-auto flex w-full max-w-(--thread-max-width) grow flex-col", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "aui-thread-welcome-center flex w-full grow flex-col items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "aui-thread-welcome-message flex size-full flex-col items-center justify-center px-4 text-center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "fade-in animate-in fill-mode-both relative mb-6 flex size-14 items-center justify-center duration-300", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "animate-ai-ring-glow absolute inset-0 rounded-2xl bg-gradient-to-br from-primary/15 to-primary/5 ring-1 ring-primary/15" }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "animate-ai-pulse-ring absolute inset-0" }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+var ThreadWelcome = ({
+  config,
+  suggestions,
+  Suggestions: SuggestionsSlot = Suggestions
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react23.AuiIf, { condition: (s) => s.thread.isEmpty, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "aui-thread-welcome-root mx-auto my-auto flex w-full max-w-(--thread-max-width) grow flex-col", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "aui-thread-welcome-center flex w-full grow flex-col items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "aui-thread-welcome-message flex size-full flex-col items-center justify-center px-4 text-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "fade-in animate-in fill-mode-both relative mb-6 flex size-14 items-center justify-center duration-300", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "animate-ai-ring-glow absolute inset-0 rounded-2xl bg-gradient-to-br from-primary/15 to-primary/5 ring-1 ring-primary/15" }),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "animate-ai-pulse-ring absolute inset-0" }),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
           "svg",
           {
             xmlns: "http://www.w3.org/2000/svg",
@@ -1357,139 +3273,74 @@ var ThreadWelcome = ({ config, suggestions }) => {
             strokeLinecap: "round",
             strokeLinejoin: "round",
             className: "animate-ai-breathe relative size-7 text-primary/75",
-            children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("path", { d: "M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z" })
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h1", { className: "aui-thread-welcome-message-inner fade-in slide-in-from-bottom-1 animate-in fill-mode-both font-semibold text-2xl duration-200", children: config?.heading ?? "How can I help you today?" }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "aui-thread-welcome-message-inner fade-in slide-in-from-bottom-1 animate-in fill-mode-both text-muted-foreground mt-2 delay-75 duration-200", children: config?.subheading ?? "Send a message to start a conversation." })
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("h1", { className: "aui-thread-welcome-message-inner fade-in slide-in-from-bottom-1 animate-in fill-mode-both font-semibold text-2xl duration-200", children: config?.heading ?? "How can I help you today?" }),
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { className: "aui-thread-welcome-message-inner fade-in slide-in-from-bottom-1 animate-in fill-mode-both text-muted-foreground mt-2 delay-75 duration-200", children: config?.subheading ?? "Send a message to start a conversation." })
     ] }) }),
-    suggestions && suggestions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ThreadSuggestions, { suggestions })
-  ] }) });
-};
-var ThreadSuggestions = ({ suggestions }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "aui-thread-welcome-suggestions grid w-full @md:grid-cols-2 gap-2 pb-4", children: suggestions.map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ThreadSuggestionItem, { title: s.title, description: s.description }, i)) });
-};
-var ThreadSuggestionItem = ({ title, description }) => {
-  const runtime = (0, import_react11.useThreadRuntime)();
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "aui-thread-welcome-suggestion-display fade-in slide-in-from-bottom-2 animate-in fill-mode-both duration-200", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
-    Button,
-    {
-      variant: "ghost",
-      className: "aui-thread-welcome-suggestion h-auto w-full @md:flex-col flex-wrap items-start justify-start gap-1 rounded-2xl border px-4 py-3 text-left text-sm transition-colors hover:bg-muted",
-      onClick: () => runtime.append({
-        role: "user",
-        content: [{ type: "text", text: title }]
-      }),
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "aui-thread-welcome-suggestion-text-1 font-medium", children: title }),
-        description && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "aui-thread-welcome-suggestion-text-2 text-muted-foreground", children: description })
-      ]
-    }
-  ) });
-};
-var Composer = ({ placeholder }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react11.ComposerPrimitive.Root, { className: "aui-composer-root relative mt-3 flex w-full flex-col", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react11.ComposerPrimitive.AttachmentDropzone, { className: "aui-composer-attachment-dropzone flex w-full flex-col rounded-2xl border border-input bg-background px-1 pt-2 outline-none transition-shadow has-[textarea:focus-visible]:border-ring has-[textarea:focus-visible]:ring-2 has-[textarea:focus-visible]:ring-ring/20 data-[dragging=true]:border-ring data-[dragging=true]:border-dashed data-[dragging=true]:bg-accent/50", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ComposerAttachments, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-      import_react11.ComposerPrimitive.Input,
-      {
-        placeholder: placeholder ?? "Send a message...",
-        className: "aui-composer-input mb-1 max-h-32 min-h-14 w-full resize-none bg-transparent px-4 pt-2 pb-3 text-sm outline-none placeholder:text-muted-foreground focus-visible:ring-0",
-        rows: 1,
-        autoFocus: true,
-        "aria-label": "Message input"
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ComposerAction, {})
+    suggestions && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(SuggestionsSlot, { suggestions })
   ] }) });
 };
-var ComposerAction = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "aui-composer-action-wrapper relative mx-2 mb-2 flex items-center justify-end", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react11.AuiIf, { condition: (s) => !s.thread.isRunning, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react11.ComposerPrimitive.Send, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-      TooltipIconButton,
-      {
-        tooltip: "Send message",
-        side: "bottom",
-        type: "submit",
-        variant: "default",
-        size: "icon",
-        className: "aui-composer-send size-8 rounded-full",
-        "aria-label": "Send message",
-        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react5.ArrowUpIcon, { className: "aui-composer-send-icon size-4" })
-      }
-    ) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react11.AuiIf, { condition: (s) => s.thread.isRunning, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react11.ComposerPrimitive.Cancel, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-      Button,
-      {
-        type: "button",
-        variant: "default",
-        size: "icon",
-        className: "aui-composer-cancel size-8 rounded-full",
-        "aria-label": "Stop generating",
-        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react5.SquareIcon, { className: "aui-composer-cancel-icon size-3 fill-current" })
-      }
-    ) }) })
-  ] });
-};
 var MessageError = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react11.MessagePrimitive.Error, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react11.ErrorPrimitive.Root, { className: "aui-message-error-root mt-2 rounded-md border border-destructive bg-destructive/10 p-3 text-destructive text-sm dark:bg-destructive/5 dark:text-red-200", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react11.ErrorPrimitive.Message, { className: "aui-message-error-message line-clamp-2" }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react23.MessagePrimitive.Error, { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react23.ErrorPrimitive.Root, { className: "aui-message-error-root mt-2 rounded-md border border-destructive bg-destructive/10 p-3 text-destructive text-sm dark:bg-destructive/5 dark:text-red-200", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react23.ErrorPrimitive.Message, { className: "aui-message-error-message line-clamp-2" }) }) });
 };
 var AssistantMessage = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
-    import_react11.MessagePrimitive.Root,
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+    import_react23.MessagePrimitive.Root,
     {
       className: "aui-assistant-message-root fade-in slide-in-from-bottom-1 relative mx-auto w-full max-w-(--thread-max-width) animate-in py-3 duration-150",
       "data-role": "assistant",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "aui-assistant-message-content wrap-break-word px-2 text-foreground leading-relaxed", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-            import_react11.MessagePrimitive.Parts,
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "aui-assistant-message-content wrap-break-word px-2 text-foreground leading-relaxed", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+            import_react23.MessagePrimitive.Parts,
             {
               components: {
                 Text: MarkdownText,
-                tools: { Fallback: ToolFallback }
+                tools: { Fallback: ToolArtifactFallback }
               }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(MessageError, {})
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(MessageError, {})
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "aui-assistant-message-footer mt-1 ml-2 flex", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(AssistantActionBar, {}) })
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "aui-assistant-message-footer mt-1 ml-2 flex", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(AssistantActionBar, {}) })
       ]
     }
   );
 };
 var AssistantActionBar = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
-    import_react11.ActionBarPrimitive.Root,
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+    import_react23.ActionBarPrimitive.Root,
     {
       hideWhenRunning: true,
       autohide: "not-last",
       autohideFloat: "single-branch",
       className: "aui-assistant-action-bar-root col-start-3 row-start-2 -ml-1 flex gap-1 text-muted-foreground data-floating:absolute data-floating:rounded-md data-floating:border data-floating:bg-background data-floating:p-1 data-floating:shadow-sm",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react11.ActionBarPrimitive.Copy, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(TooltipIconButton, { tooltip: "Copy", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react11.AuiIf, { condition: (s) => s.message.isCopied, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react5.CheckIcon, {}) }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react11.AuiIf, { condition: (s) => !s.message.isCopied, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react5.CopyIcon, {}) })
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react23.ActionBarPrimitive.Copy, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(TooltipIconButton, { tooltip: "Copy", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react23.AuiIf, { condition: (s) => s.message.isCopied, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react7.CheckIcon, {}) }),
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react23.AuiIf, { condition: (s) => !s.message.isCopied, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react7.CopyIcon, {}) })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react11.ActionBarPrimitive.Reload, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(TooltipIconButton, { tooltip: "Refresh", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react5.RefreshCwIcon, {}) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react11.ActionBarMorePrimitive.Root, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react11.ActionBarMorePrimitive.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react23.ActionBarPrimitive.Reload, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TooltipIconButton, { tooltip: "Refresh", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react7.RefreshCwIcon, {}) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_react23.ActionBarMorePrimitive.Root, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react23.ActionBarMorePrimitive.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
             TooltipIconButton,
             {
               tooltip: "More",
               className: "data-[state=open]:bg-accent",
-              children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react5.MoreHorizontalIcon, {})
+              children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react7.MoreHorizontalIcon, {})
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-            import_react11.ActionBarMorePrimitive.Content,
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+            import_react23.ActionBarMorePrimitive.Content,
             {
               side: "bottom",
               align: "start",
               className: "aui-action-bar-more-content z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
-              children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react11.ActionBarPrimitive.ExportMarkdown, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react11.ActionBarMorePrimitive.Item, { className: "aui-action-bar-more-item flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react5.DownloadIcon, { className: "size-4" }),
+              children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react23.ActionBarPrimitive.ExportMarkdown, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_react23.ActionBarMorePrimitive.Item, { className: "aui-action-bar-more-item flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react7.DownloadIcon, { className: "size-4" }),
                 "Export as Markdown"
               ] }) })
             }
@@ -1500,65 +3351,372 @@ var AssistantActionBar = () => {
   );
 };
 var UserMessage = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
-    import_react11.MessagePrimitive.Root,
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+    import_react23.MessagePrimitive.Root,
     {
       className: "aui-user-message-root fade-in slide-in-from-bottom-1 mx-auto grid w-full max-w-(--thread-max-width) animate-in auto-rows-auto grid-cols-[minmax(72px,1fr)_auto] content-start gap-y-2 px-2 py-3 duration-150 [&:where(>*)]:col-start-2",
       "data-role": "user",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(UserMessageAttachments, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "aui-user-message-content-wrapper relative col-start-2 min-w-0", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "aui-user-message-content wrap-break-word rounded-2xl bg-muted px-4 py-2.5 text-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react11.MessagePrimitive.Parts, {}) }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "aui-user-action-bar-wrapper absolute top-1/2 left-0 -translate-x-full -translate-y-1/2 pr-2", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(UserActionBar, {}) })
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(UserMessageAttachments, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "aui-user-message-content-wrapper relative col-start-2 min-w-0", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "aui-user-message-content wrap-break-word rounded-2xl bg-muted px-4 py-2.5 text-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react23.MessagePrimitive.Parts, {}) }),
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "aui-user-action-bar-wrapper absolute top-1/2 left-0 -translate-x-full -translate-y-1/2 pr-2", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(UserActionBar, {}) })
         ] })
       ]
     }
   );
 };
 var UserActionBar = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-    import_react11.ActionBarPrimitive.Root,
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    import_react23.ActionBarPrimitive.Root,
     {
       hideWhenRunning: true,
       autohide: "not-last",
       className: "aui-user-action-bar-root flex flex-col items-end",
-      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react11.ActionBarPrimitive.Edit, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(TooltipIconButton, { tooltip: "Edit", className: "aui-user-action-edit p-4", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react5.PencilIcon, {}) }) })
+      children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react23.ActionBarPrimitive.Edit, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TooltipIconButton, { tooltip: "Edit", className: "aui-user-action-edit p-4", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react7.PencilIcon, {}) }) })
     }
   );
 };
 var EditComposer = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react11.MessagePrimitive.Root, { className: "aui-edit-composer-wrapper mx-auto flex w-full max-w-(--thread-max-width) flex-col px-2 py-3", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react11.ComposerPrimitive.Root, { className: "aui-edit-composer-root ml-auto flex w-full max-w-[85%] flex-col rounded-2xl bg-muted", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-      import_react11.ComposerPrimitive.Input,
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react23.MessagePrimitive.Root, { className: "aui-edit-composer-wrapper mx-auto flex w-full max-w-(--thread-max-width) flex-col px-2 py-3", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_react23.ComposerPrimitive.Root, { className: "aui-edit-composer-root ml-auto flex w-full max-w-[85%] flex-col rounded-2xl bg-muted", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+      import_react23.ComposerPrimitive.Input,
       {
         className: "aui-edit-composer-input min-h-14 w-full resize-none bg-transparent p-4 text-foreground text-sm outline-none",
         autoFocus: true
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "aui-edit-composer-footer mx-3 mb-3 flex items-center gap-2 self-end", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react11.ComposerPrimitive.Cancel, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Button, { variant: "ghost", size: "sm", children: "Cancel" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react11.ComposerPrimitive.Send, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Button, { size: "sm", children: "Update" }) })
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "aui-edit-composer-footer mx-3 mb-3 flex items-center gap-2 self-end", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react23.ComposerPrimitive.Cancel, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Button, { variant: "ghost", size: "sm", children: "Cancel" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react23.ComposerPrimitive.Send, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Button, { size: "sm", children: "Update" }) })
     ] })
   ] }) });
 };
 
 // src/components/chat.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 function TimbalChat({
   workforceId,
   baseUrl,
   fetch: fetch2,
+  attachments,
+  attachmentsUploadUrl,
+  attachmentsAccept,
+  debug,
   ...threadProps
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(TimbalRuntimeProvider, { workforceId, baseUrl, fetch: fetch2, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Thread, { ...threadProps }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    TimbalRuntimeProvider,
+    {
+      workforceId,
+      baseUrl,
+      fetch: fetch2,
+      attachments,
+      attachmentsUploadUrl,
+      attachmentsAccept,
+      debug,
+      children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Thread, { ...threadProps })
+    }
+  );
+}
+
+// src/artifacts/agent-instructions.ts
+var ARTIFACT_AGENT_INSTRUCTIONS = `
+## Rich artifacts (Timbal chat UI)
+
+When you need charts, tables, choice widgets, or interactive controls, return a **JSON artifact object** instead of plain prose. The chat UI renders these automatically.
+
+### Delivery channels (either works)
+
+1. **Tool result (preferred)** \u2014 return a single JSON object (or a JSON string) from a tool. The object must include a string \`type\` field.
+2. **Inline markdown fence** \u2014 embed the same JSON inside a fenced block:
+
+\`\`\`timbal-artifact
+{"type":"chart","data":[{"month":"Jan","sales":120}]}
+\`\`\`
+
+The alias \`\`\`timbal\`\`\` is also accepted.
+
+### Built-in artifact types
+
+| \`type\` | Use for |
+|---|---|
+| \`chart\` | Bar, line, area, or pie charts. Fields: \`data\`, optional \`chartType\`, \`xKey\`, \`dataKey\`, \`title\`, \`unit\`. |
+| \`table\` | Tabular data. Fields: \`rows\`, optional \`columns\`, \`title\`. |
+| \`question\` | In-thread multiple choice. Fields: \`options: [{ id, label, description? }]\`, optional \`prompt\`, \`multi\`. User replies are sent back as a normal user message. |
+| \`html\` | Custom HTML/CSS/JS in an iframe. Fields: \`content\` (HTML document or fragment), optional \`title\`, \`height\`, \`sandboxed\` (default \`true\`; set \`false\` for unrestricted scripts/CDN). |
+| \`json\` | Fallback structured view. Fields: \`data\`, optional \`title\`. |
+| \`ui\` | **Interactive UI** composed from a fixed node palette (hover, click, drag). See below. |
+
+### When to use \`type: "html"\`
+
+Use \`html\` when the user wants a **rich visual or interactive page** that does not fit the \`ui\` palette \u2014 e.g. styled layouts, SVG graphics, CSS animations, canvas, small games, calculators, or multi-section mockups. Pass a full HTML document or a body fragment in \`content\`.
+
+- Inline \`<style>\`, \`<script>\`, SVG, and canvas are supported.
+- Default \`sandboxed: true\` runs in an isolated iframe with scripts enabled.
+- Set \`sandboxed: false\` only for trusted content that needs external CDN scripts/styles or full DOM freedom.
+- Prefer \`ui\` when controls should send chat messages or host events; prefer \`html\` for self-contained mini-apps and visual demos.
+
+### When to use \`type: "ui"\`
+
+Use a \`ui\` artifact when the user should **hover, click, drag, or adjust controls** in-thread and those actions should integrate with the chat runtime (messages, \`onArtifactEvent\`). For standalone visual/interactive HTML, use \`html\` instead.
+
+Each \`ui\` artifact has:
+
+- \`initialState\` \u2014 optional object seeding local state (per widget instance).
+- \`root\` \u2014 a single node tree (see node kinds below).
+- optional \`title\` \u2014 card heading.
+
+**Bindings:** anywhere a primitive is accepted, you may use \`{ "$bind": "dotted.path" }\` to read from \`initialState\` / local state (e.g. \`{ "$bind": "qty" }\`).
+
+**Actions:** nodes may attach \`onClick\`, \`onChange\`, or \`onDragEnd\` with one action or an array:
+
+| Action | Shape | Effect |
+|---|---|---|
+| User message | \`{ "kind": "message", "text": "..." }\` or \`{ "kind": "message", "text": { "$bind": "path" } }\` | Sends text as the next user message. |
+| Set state | \`{ "kind": "set", "path": "foo", "value": 1 }\` | Writes local widget state. |
+| Toggle boolean | \`{ "kind": "toggle", "path": "enabled" }\` | Flips a boolean at \`path\`. |
+| Host event | \`{ "kind": "emit", "name": "event-name", "payload": { ... } }\` | Bubbles to the host app (\`onArtifactEvent\` on \`<Thread>\`). |
+
+### \`ui\` node palette (\`root.kind\`)
+
+| \`kind\` | Purpose | Key fields |
+|---|---|---|
+| \`box\` | Layout container | \`children\`, \`direction\` (\`row\`/\`col\`), \`gap\`, \`padding\`, \`align\`, \`justify\`, \`wrap\` |
+| \`text\` | Body text | \`value\`, optional \`muted\`, \`size\`, \`weight\` |
+| \`heading\` | Heading | \`value\`, optional \`level\` (1\u20134) |
+| \`badge\` | Pill label | \`value\`, optional \`tone\` (\`default\`, \`primary\`, \`success\`, \`warn\`, \`danger\`) |
+| \`button\` | Clickable button | \`label\`, optional \`variant\`, \`size\`, \`disabled\`, \`onClick\` |
+| \`toggle\` | Boolean switch | \`binding\` (state path), optional \`label\`, \`onChange\` |
+| \`slider\` | Numeric range | \`binding\`, optional \`min\`, \`max\`, \`step\`, \`label\`, \`showValue\`, \`onChange\` |
+| \`tooltip\` | Hover tooltip | \`content\`, \`child\` (single node), optional \`side\` |
+| \`draggable\` | Drag gesture | \`child\`, optional \`axis\` (\`x\`/\`y\`/\`both\`), \`snapBack\`, \`onDragEnd\` |
+| \`custom\` | Host-registered widget | \`name\`, optional \`props\`, \`children\` \u2014 only if the app registered that name |
+
+### Example \`ui\` artifact
+
+\`\`\`json
+{
+  "type": "ui",
+  "title": "Configure plan",
+  "initialState": { "qty": 1, "premium": false },
+  "root": {
+    "kind": "box",
+    "direction": "col",
+    "gap": 3,
+    "children": [
+      { "kind": "heading", "value": "Choose quantity", "level": 3 },
+      {
+        "kind": "tooltip",
+        "content": "Drag to adjust quantity",
+        "child": {
+          "kind": "slider",
+          "binding": "qty",
+          "min": 1,
+          "max": 50,
+          "label": "Quantity",
+          "onChange": { "kind": "emit", "name": "qty-changed" }
+        }
+      },
+      { "kind": "toggle", "binding": "premium", "label": "Premium support" },
+      {
+        "kind": "button",
+        "label": "Confirm",
+        "onClick": { "kind": "message", "text": { "$bind": "qty" } }
+      }
+    ]
+  }
 }
+\`\`\`
+
+### Rules
+
+- Always set \`type\` to a built-in value above unless the app documented a custom type.
+- Prefer \`ui\` over \`html\` when actions must bubble to the host chat (\`message\`, \`emit\`).
+- Prefer \`question\` for simple A/B/C choices; use \`ui\` when you need sliders, toggles, drag, or multi-control layouts.
+- Keep \`data\` arrays reasonably small (charts/tables).
+
+### After calling an artifact tool (critical)
+
+When you call a tool that returns an artifact (\`make_chart\`, \`ask_question\`, \`show_table\`, \`show_html\`, \`make_ui_demo\`, etc.):
+
+1. **Do not** paste, quote, paraphrase as JSON, or fence the tool return value in your assistant message. The chat UI already renders it from the tool result.
+2. **Do not** emit a matching \`\`\`timbal-artifact\`\`\` block for the same payload \u2014 pick **one** channel (tool result only).
+3. Your follow-up text should be **empty**, or at most **one short sentence** (e.g. "Pick an option above." / "Try the controls."). Never include \`type\`, \`options\`, \`data\`, or dict/JSON syntax.
+4. Treat the widget as visible to the user; refer to it as "above" / "the chart" / "the choices" \u2014 never reproduce its contents.
+`.trim();
 
 // src/index.ts
-var import_react13 = require("@assistant-ui/react");
+var import_react26 = require("@assistant-ui/react");
+
+// src/hooks/use-workforces.ts
+var import_react24 = require("react");
+function useWorkforces(options = {}) {
+  const { baseUrl = "/api", fetch: fetchFn, pickInitial } = options;
+  const [workforces, setWorkforces] = (0, import_react24.useState)([]);
+  const [selectedId, setSelectedId] = (0, import_react24.useState)("");
+  const [isLoading, setIsLoading] = (0, import_react24.useState)(true);
+  const [error, setError] = (0, import_react24.useState)(null);
+  const fetchFnRef = (0, import_react24.useRef)(fetchFn ?? authFetch);
+  (0, import_react24.useEffect)(() => {
+    fetchFnRef.current = fetchFn ?? authFetch;
+  }, [fetchFn]);
+  const pickInitialRef = (0, import_react24.useRef)(pickInitial);
+  (0, import_react24.useEffect)(() => {
+    pickInitialRef.current = pickInitial;
+  }, [pickInitial]);
+  const load = (0, import_react24.useMemo)(() => {
+    return async () => {
+      setIsLoading(true);
+      setError(null);
+      try {
+        const res = await fetchFnRef.current(`${baseUrl}/workforce`);
+        if (!res.ok) throw new Error(`Failed to load workforces (${res.status})`);
+        const data = await res.json();
+        setWorkforces(data);
+        setSelectedId((current) => {
+          if (current && data.some((w) => idOf(w) === current)) return current;
+          const initial = pickInitialRef.current?.(data) ?? data.find((w) => w.type === "agent") ?? data[0];
+          return initial ? idOf(initial) : "";
+        });
+      } catch (err) {
+        setError(err instanceof Error ? err : new Error(String(err)));
+      } finally {
+        setIsLoading(false);
+      }
+    };
+  }, [baseUrl]);
+  (0, import_react24.useEffect)(() => {
+    load();
+  }, [load]);
+  const selected = (0, import_react24.useMemo)(
+    () => workforces.find((w) => idOf(w) === selectedId),
+    [workforces, selectedId]
+  );
+  return {
+    workforces,
+    selectedId,
+    setSelectedId,
+    selected,
+    isLoading,
+    error,
+    refresh: load
+  };
+}
+function idOf(item) {
+  return item.id ?? item.uid ?? item.name ?? "";
+}
+
+// src/components/workforce-selector.tsx
+var import_lucide_react8 = require("lucide-react");
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var WorkforceSelector = ({
+  workforces,
+  value,
+  onChange,
+  hideWhenSingle = true,
+  className,
+  placeholder = "Select agent"
+}) => {
+  if (workforces.length === 0) return null;
+  if (hideWhenSingle && workforces.length === 1) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: cn("aui-workforce-selector relative inline-flex items-center", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+      "select",
+      {
+        className: "aui-workforce-selector-input h-7 cursor-pointer appearance-none rounded-md border-none bg-transparent pr-5 pl-1.5 text-xs font-medium text-muted-foreground shadow-none outline-none ring-0 transition-colors hover:text-foreground focus:ring-0",
+        value,
+        onChange: (e) => onChange(e.target.value),
+        "aria-label": placeholder,
+        children: [
+          !value && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("option", { value: "", children: placeholder }),
+          workforces.map((w) => {
+            const id = idOf2(w);
+            return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("option", { value: id, children: w.name ?? id }, id);
+          })
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react8.ChevronDownIcon, { className: "aui-workforce-selector-icon pointer-events-none absolute right-1 size-3 text-muted-foreground" })
+  ] });
+};
+function idOf2(item) {
+  return item.id ?? item.uid ?? item.name ?? "";
+}
+
+// src/components/chat-shell.tsx
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var TimbalChatShell = ({
+  workforceId,
+  brand,
+  headerActions,
+  hideWorkforceSelector,
+  className,
+  headerClassName,
+  baseUrl,
+  fetch: fetch2,
+  ...chatProps
+}) => {
+  const {
+    workforces,
+    selectedId,
+    setSelectedId
+  } = useWorkforces({ baseUrl, fetch: fetch2 });
+  const effectiveId = workforceId ?? selectedId;
+  const showSelector = !hideWorkforceSelector && !workforceId && workforces.length > 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+    "div",
+    {
+      className: cn(
+        "aui-chat-shell flex h-screen flex-col overflow-hidden",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+          "header",
+          {
+            className: cn(
+              "aui-chat-shell-header flex shrink-0 items-center justify-between border-b border-border/50 bg-background/90 px-5 py-2 backdrop-blur-md",
+              headerClassName
+            ),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex items-center", children: [
+                brand,
+                showSelector && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "mx-3.5 h-3.5 w-px bg-border" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                    WorkforceSelector,
+                    {
+                      workforces,
+                      value: selectedId,
+                      onChange: setSelectedId
+                    }
+                  )
+                ] })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "flex items-center gap-0.5", children: headerActions })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          TimbalChat,
+          {
+            workforceId: effectiveId,
+            baseUrl,
+            fetch: fetch2,
+            className: "min-h-0 flex-1",
+            ...chatProps
+          },
+          effectiveId
+        )
+      ]
+    }
+  );
+};
 
 // src/auth/provider.tsx
-var import_react12 = require("react");
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_react25 = require("react");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 function isInsideIframe() {
   try {
     return typeof window !== "undefined" && window.self !== window.top;
@@ -1566,9 +3724,9 @@ function isInsideIframe() {
     return true;
   }
 }
-var SessionContext = (0, import_react12.createContext)(void 0);
+var SessionContext = (0, import_react25.createContext)(void 0);
 var useSession = () => {
-  const context = (0, import_react12.useContext)(SessionContext);
+  const context = (0, import_react25.useContext)(SessionContext);
   if (context === void 0) {
     throw new Error("useSession must be used within a SessionProvider");
   }
@@ -1578,10 +3736,10 @@ var SessionProvider = ({
   children,
   enabled = true
 }) => {
-  const [user, setUser] = (0, import_react12.useState)(null);
-  const [loading, setLoading] = (0, import_react12.useState)(enabled);
-  const [embedded] = (0, import_react12.useState)(isInsideIframe);
-  (0, import_react12.useEffect)(() => {
+  const [user, setUser] = (0, import_react25.useState)(null);
+  const [loading, setLoading] = (0, import_react25.useState)(enabled);
+  const [embedded] = (0, import_react25.useState)(isInsideIframe);
+  (0, import_react25.useEffect)(() => {
     if (!enabled) {
       setLoading(false);
       return;
@@ -1642,7 +3800,7 @@ var SessionProvider = ({
       messageCleanup?.();
     };
   }, [enabled, embedded]);
-  const logout = (0, import_react12.useCallback)(() => {
+  const logout = (0, import_react25.useCallback)(() => {
     clearTokens();
     setUser(null);
     const returnTo = encodeURIComponent(
@@ -1652,7 +3810,7 @@ var SessionProvider = ({
       () => window.location.href = `/api/auth/login?return_to=${returnTo}`
     );
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     SessionContext.Provider,
     {
       value: {
@@ -1668,8 +3826,8 @@ var SessionProvider = ({
 };
 
 // src/auth/guard.tsx
-var import_lucide_react6 = require("lucide-react");
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_lucide_react9 = require("lucide-react");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 var AuthGuard = ({
   children,
   requireAuth = false,
@@ -1680,7 +3838,7 @@ var AuthGuard = ({
     return children;
   }
   if (loading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "flex items-center justify-center h-screen", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react6.Loader2, { className: "w-8 h-8 animate-spin" }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "flex items-center justify-center h-screen", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lucide_react9.Loader2, { className: "w-8 h-8 animate-spin" }) });
   }
   if (requireAuth && !isAuthenticated && !isEmbedded) {
     const returnTo = encodeURIComponent(
@@ -1693,15 +3851,24 @@ var AuthGuard = ({
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  ARTIFACT_AGENT_INSTRUCTIONS,
+  ARTIFACT_FENCE_LANGUAGES,
   ActionBarPrimitive,
+  ArtifactCard,
+  ArtifactRegistryProvider,
+  ArtifactView,
+  AssistantRuntimeProvider,
   AuthGuard,
   Avatar,
   AvatarFallback,
   AvatarImage,
   Button,
+  ChartArtifactView,
+  Composer,
   ComposerAddAttachment,
   ComposerAttachments,
   ComposerPrimitive,
+  DEFAULT_UPLOAD_ACCEPT,
   Dialog,
   DialogClose,
   DialogContent,
@@ -1709,35 +3876,70 @@ var AuthGuard = ({
   DialogPortal,
   DialogTitle,
   DialogTrigger,
+  HtmlArtifactView,
+  JsonArtifactView,
   MarkdownText,
   MessagePrimitive,
+  QuestionArtifactView,
   SessionProvider,
   Shimmer,
+  Suggestions,
   SyntaxHighlighter,
+  TableArtifactView,
   Thread,
   ThreadPrimitive,
   TimbalChat,
+  TimbalChatShell,
   TimbalRuntimeProvider,
+  ToolArtifactFallback,
   ToolFallback,
   Tooltip,
   TooltipContent,
   TooltipIconButton,
   TooltipProvider,
   TooltipTrigger,
+  UiArtifactView,
+  UiCustomNodeRegistryProvider,
+  UiEventProvider,
+  UiNodeView,
   UserMessageAttachments,
+  WorkforceSelector,
   authFetch,
   buttonVariants,
   clearTokens,
   cn,
+  createDefaultAttachmentAdapter,
+  createUploadAttachmentAdapter,
+  defaultArtifactRenderers,
   fetchCurrentUser,
+  findMarkdownArtifacts,
   getAccessToken,
+  getPath,
   getRefreshToken,
+  isArtifact,
+  isArtifactFenceLanguage,
+  isUiBinding,
+  parseArtifactFromToolResult,
+  parseSSELine,
   refreshAccessToken,
+  resolveAttachmentAdapter,
+  resolveBindable,
   setAccessToken,
+  setPath,
   setRefreshToken,
+  splitMarkdownByArtifacts,
+  useArtifactRegistry,
   useComposerRuntime,
   useMessageRuntime,
+  useResolvedSuggestions,
   useSession,
   useThread,
-  useThreadRuntime
+  useThreadRuntime,
+  useTimbalRuntime,
+  useTimbalStream,
+  useUiCustomNodeRegistry,
+  useUiDispatch,
+  useUiEventEmitter,
+  useUiState,
+  useWorkforces
 });