@lantos1618/better-ui 0.7.1 → 0.8.0

package/dist/components/index.js

@@ -179,16 +179,24 @@ function ChatProvider({ endpoint = "/api/chat", tools, toolStateStore: externalS
   const [threads, setThreads] = (0, import_react2.useState)([]);
   const [activeThreadId, setActiveThreadId] = (0, import_react2.useState)(threadId);
   (0, import_react2.useEffect)(() => {
-    if (persistence) {
-      persistence.listThreads().then(setThreads).catch((err) => console.warn("[better-ui] persistence error:", err));
-    }
+    if (!persistence) return;
+    let cancelled = false;
+    persistence.listThreads().then((t) => {
+      if (!cancelled) setThreads(t);
+    }).catch((err) => console.warn("[better-ui] persistence error:", err));
+    return () => {
+      cancelled = true;
+    };
   }, [persistence]);
   (0, import_react2.useEffect)(() => {
-    if (persistence && activeThreadId) {
-      persistence.getMessages(activeThreadId).then((msgs) => {
-        setMessages(msgs);
-      }).catch((err) => console.warn("[better-ui] persistence error:", err));
-    }
+    if (!persistence || !activeThreadId) return;
+    let cancelled = false;
+    persistence.getMessages(activeThreadId).then((msgs) => {
+      if (!cancelled) setMessages(msgs);
+    }).catch((err) => console.warn("[better-ui] persistence error:", err));
+    return () => {
+      cancelled = true;
+    };
   }, [persistence, activeThreadId, setMessages]);
   const prevStatusRef = (0, import_react2.useRef)(status);
   (0, import_react2.useEffect)(() => {
@@ -212,9 +220,10 @@ function ChatProvider({ endpoint = "/api/chat", tools, toolStateStore: externalS
   }, [persistence, setMessages, toolStateStore]);
   const switchThreadFn = (0, import_react2.useCallback)(async (id) => {
     if (!persistence) throw new Error("Persistence not configured");
-    setActiveThreadId(id);
-    setMessages([]);
+    const msgs = await persistence.getMessages(id);
     toolStateStore.clear();
+    setMessages(msgs);
+    setActiveThreadId(id);
   }, [persistence, setMessages, toolStateStore]);
   const deleteThreadFn = (0, import_react2.useCallback)(async (id) => {
     if (!persistence) throw new Error("Persistence not configured");
@@ -237,8 +246,11 @@ function ChatProvider({ endpoint = "/api/chat", tools, toolStateStore: externalS
         stateContext[entry.toolName] = entry.output;
       }
     }
-    dirty.clear();
-    return Object.keys(stateContext).length > 0 ? stateContext : null;
+    if (Object.keys(stateContext).length > 0) {
+      dirty.clear();
+      return stateContext;
+    }
+    return null;
   }, [toolStateStore]);
   const executeToolDirect = (0, import_react2.useCallback)(async (toolName, toolInput, toolCallId) => {
     const currentVersion = (versionRef.current.get(toolCallId) || 0) + 1;
@@ -420,6 +432,33 @@ var import_ai2 = require("ai");
 // src/components/ToolResult.tsx
 var import_react4 = require("react");
 var import_jsx_runtime2 = require("react/jsx-runtime");
+var ToolViewErrorBoundary = class extends import_react4.Component {
+  constructor() {
+    super(...arguments);
+    this.state = { error: null };
+  }
+  static getDerivedStateFromError(error) {
+    return { error };
+  }
+  componentDidCatch(error, info) {
+    console.error(`[better-ui] View for tool "${this.props.toolName}" threw:`, error, info);
+  }
+  render() {
+    if (this.state.error) {
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "bg-[var(--bui-error-muted,rgba(220,38,38,0.08))] border border-[var(--bui-error-border,rgba(153,27,27,0.5))] rounded-xl p-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { className: "w-4 h-4 text-[var(--bui-error-fg,#f87171)] shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "text-[var(--bui-error-fg,#f87171)] text-sm font-medium", children: [
+            this.props.toolName,
+            " view error"
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-[var(--bui-error-fg,#f87171)]/70 text-xs mt-1", children: this.state.error.message })
+      ] });
+    }
+    return this.props.children;
+  }
+};
 function useIsFollowup(toolStateStore, toolCallId) {
   const subscribe = (0, import_react4.useCallback)(
     (listener) => toolStateStore.subscribeAll(listener),
@@ -602,7 +641,7 @@ function ToolResult({
       )
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: className || "", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: className || "", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ToolViewErrorBoundary, { toolName, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     toolDef.View,
     {
       data: resolvedOutput,
@@ -610,7 +649,7 @@ function ToolResult({
       onAction: getOnAction(toolCallId, toolName),
       error: storeState?.error ? new Error(storeState.error) : null
     }
-  ) });
+  ) }) });
 }
 
 // src/components/Markdown.tsx

package/dist/components/index.mjs

@@ -121,16 +121,24 @@ function ChatProvider({ endpoint = "/api/chat", tools, toolStateStore: externalS
   const [threads, setThreads] = useState([]);
   const [activeThreadId, setActiveThreadId] = useState(threadId);
   useEffect(() => {
-    if (persistence) {
-      persistence.listThreads().then(setThreads).catch((err) => console.warn("[better-ui] persistence error:", err));
-    }
+    if (!persistence) return;
+    let cancelled = false;
+    persistence.listThreads().then((t) => {
+      if (!cancelled) setThreads(t);
+    }).catch((err) => console.warn("[better-ui] persistence error:", err));
+    return () => {
+      cancelled = true;
+    };
   }, [persistence]);
   useEffect(() => {
-    if (persistence && activeThreadId) {
-      persistence.getMessages(activeThreadId).then((msgs) => {
-        setMessages(msgs);
-      }).catch((err) => console.warn("[better-ui] persistence error:", err));
-    }
+    if (!persistence || !activeThreadId) return;
+    let cancelled = false;
+    persistence.getMessages(activeThreadId).then((msgs) => {
+      if (!cancelled) setMessages(msgs);
+    }).catch((err) => console.warn("[better-ui] persistence error:", err));
+    return () => {
+      cancelled = true;
+    };
   }, [persistence, activeThreadId, setMessages]);
   const prevStatusRef = useRef(status);
   useEffect(() => {
@@ -154,9 +162,10 @@ function ChatProvider({ endpoint = "/api/chat", tools, toolStateStore: externalS
   }, [persistence, setMessages, toolStateStore]);
   const switchThreadFn = useCallback2(async (id) => {
     if (!persistence) throw new Error("Persistence not configured");
-    setActiveThreadId(id);
-    setMessages([]);
+    const msgs = await persistence.getMessages(id);
     toolStateStore.clear();
+    setMessages(msgs);
+    setActiveThreadId(id);
   }, [persistence, setMessages, toolStateStore]);
   const deleteThreadFn = useCallback2(async (id) => {
     if (!persistence) throw new Error("Persistence not configured");
@@ -179,8 +188,11 @@ function ChatProvider({ endpoint = "/api/chat", tools, toolStateStore: externalS
         stateContext[entry.toolName] = entry.output;
       }
     }
-    dirty.clear();
-    return Object.keys(stateContext).length > 0 ? stateContext : null;
+    if (Object.keys(stateContext).length > 0) {
+      dirty.clear();
+      return stateContext;
+    }
+    return null;
   }, [toolStateStore]);
   const executeToolDirect = useCallback2(async (toolName, toolInput, toolCallId) => {
     const currentVersion = (versionRef.current.get(toolCallId) || 0) + 1;
@@ -364,8 +376,35 @@ import {
 } from "ai";
 
 // src/components/ToolResult.tsx
-import { useEffect as useEffect2, useRef as useRef2, useSyncExternalStore as useSyncExternalStore2, useCallback as useCallback3 } from "react";
+import { Component, useEffect as useEffect2, useRef as useRef2, useSyncExternalStore as useSyncExternalStore2, useCallback as useCallback3 } from "react";
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var ToolViewErrorBoundary = class extends Component {
+  constructor() {
+    super(...arguments);
+    this.state = { error: null };
+  }
+  static getDerivedStateFromError(error) {
+    return { error };
+  }
+  componentDidCatch(error, info) {
+    console.error(`[better-ui] View for tool "${this.props.toolName}" threw:`, error, info);
+  }
+  render() {
+    if (this.state.error) {
+      return /* @__PURE__ */ jsxs("div", { className: "bg-[var(--bui-error-muted,rgba(220,38,38,0.08))] border border-[var(--bui-error-border,rgba(153,27,27,0.5))] rounded-xl p-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx2("svg", { className: "w-4 h-4 text-[var(--bui-error-fg,#f87171)] shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx2("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" }) }),
+          /* @__PURE__ */ jsxs("span", { className: "text-[var(--bui-error-fg,#f87171)] text-sm font-medium", children: [
+            this.props.toolName,
+            " view error"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx2("p", { className: "text-[var(--bui-error-fg,#f87171)]/70 text-xs mt-1", children: this.state.error.message })
+      ] });
+    }
+    return this.props.children;
+  }
+};
 function useIsFollowup(toolStateStore, toolCallId) {
   const subscribe = useCallback3(
     (listener) => toolStateStore.subscribeAll(listener),
@@ -548,7 +587,7 @@ function ToolResult({
       )
     ] });
   }
-  return /* @__PURE__ */ jsx2("div", { className: className || "", children: /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx2("div", { className: className || "", children: /* @__PURE__ */ jsx2(ToolViewErrorBoundary, { toolName, children: /* @__PURE__ */ jsx2(
     toolDef.View,
     {
       data: resolvedOutput,
@@ -556,7 +595,7 @@ function ToolResult({
       onAction: getOnAction(toolCallId, toolName),
       error: storeState?.error ? new Error(storeState.error) : null
     }
-  ) });
+  ) }) });
 }
 
 // src/components/Markdown.tsx

package/dist/mcp/index.js

@@ -296,7 +296,7 @@ var MCPServer = class {
       jsonrpc: "2.0",
       id: message.id,
       result: {
-        protocolVersion: "2024-11-05",
+        protocolVersion: "2025-11-25",
         capabilities: {
           tools: {}
         },

package/dist/mcp/index.mjs

@@ -133,7 +133,7 @@ var MCPServer = class {
       jsonrpc: "2.0",
       id: message.id,
       result: {
-        protocolVersion: "2024-11-05",
+        protocolVersion: "2025-11-25",
         capabilities: {
           tools: {}
         },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lantos1618/better-ui",
-  "version": "0.7.1",
+  "version": "0.8.0",
   "description": "A minimal, type-safe AI-first UI framework for building tools",
   "main": "dist/index.js",
   "module": "dist/index.mjs",