@agent-native/core 0.149.1 → 0.149.2

package/dist/shared/streaming-text-smoothing.js

@@ -25,7 +25,25 @@ function getSegmenter() {
  * together with the new suffix, then splice the results in.
  */
 const SEGMENTER_OVERLAP = 16; // chars — safely covers any real grapheme cluster
-let _segCache = null;
+/**
+ * A single shared slot is not enough: an assistant message and each of its
+ * streaming reasoning blocks segment concurrently, and with one slot every
+ * caller evicts the previous one's entry, so all of them take the full-fallback
+ * branch on every call and the incremental path never fires. Keep the few most
+ * recent entries so concurrent streams each keep their own.
+ */
+const SEGMENTER_CACHE_SLOTS = 8;
+let _segCaches = [];
+/** Move `entry` to the front (most-recently-used) and cap the cache size. */
+function promoteSegmenterCache(entry) {
+    const existing = _segCaches.indexOf(entry);
+    if (existing !== -1)
+        _segCaches.splice(existing, 1);
+    _segCaches.unshift(entry);
+    if (_segCaches.length > SEGMENTER_CACHE_SLOTS) {
+        _segCaches.length = SEGMENTER_CACHE_SLOTS;
+    }
+}
 /**
  * Split `text` into grapheme clusters.
  *
@@ -43,13 +61,23 @@ export function splitStreamingTextGraphemes(text) {
         return Array.from(text);
     }
     // Fast path: exact cache hit
-    if (_segCache && _segCache.text === text) {
-        return _segCache.graphemes;
+    const exact = _segCaches.find((entry) => entry.text === text);
+    if (exact) {
+        promoteSegmenterCache(exact);
+        return exact.graphemes;
+    }
+    // Incremental path: new text extends one of the cached texts. Prefer the
+    // longest match so the re-segmented suffix stays as short as possible.
+    let best = null;
+    for (const entry of _segCaches) {
+        if (!text.startsWith(entry.text))
+            continue;
+        if (!best || entry.text.length > best.text.length)
+            best = entry;
     }
-    // Incremental path: new text extends the cached text
-    if (_segCache && text.startsWith(_segCache.text)) {
-        const prevLen = _segCache.text.length;
-        const cached = _segCache.graphemes;
+    if (best) {
+        const prevLen = best.text.length;
+        const cached = best.graphemes;
         // Walk back over cached graphemes until at least OVERLAP characters have
         // been released, so the re-segmented suffix starts on a known grapheme
         // boundary. Slicing at a fixed character offset instead would cut a
@@ -66,12 +94,14 @@ export function splitStreamingTextGraphemes(text) {
         const suffix = text.slice(overlapStart);
         const newGraphemes = Array.from(segmenter.segment(suffix), (entry) => entry.segment);
         const merged = cached.slice(0, stableCount).concat(newGraphemes);
-        _segCache = { text, graphemes: merged };
+        best.text = text;
+        best.graphemes = merged;
+        promoteSegmenterCache(best);
         return merged;
     }
-    // Full fallback: text is not an append of cached text (reset or replacement)
+    // Full fallback: text is not an append of any cached text (reset or replacement)
     const graphemes = Array.from(segmenter.segment(text), (entry) => entry.segment);
-    _segCache = { text, graphemes };
+    promoteSegmenterCache({ text, graphemes });
     return graphemes;
 }
 /**
@@ -81,7 +111,7 @@ export function splitStreamingTextGraphemes(text) {
  * but avoids holding a reference to the last message's text string.)
  */
 export function resetSegmenterCache() {
-    _segCache = null;
+    _segCaches = [];
 }
 export function initialSmoothStreamingGraphemeCount(graphemes) {
     if (graphemes.length <= SMOOTH_STREAMING_LONG_TEXT_THRESHOLD_GRAPHEMES) {

package/dist/styles/agent-native.css

@@ -153,8 +153,15 @@
   background: inherit;
 }
 
-.message-scroller-viewport--top-fade {
-  --message-scroller-top-fade-size: 48px;
+/* The mask is declared unconditionally and the fade is driven by its size
+   variable. Adding/removing a mask changes the element's paint properties, and
+   the `--top-fade` modifier flips with `hasContentAbove` — which oscillates
+   while a reply streams into an auto-scrolled transcript. Toggling the
+   declaration made Chromium tear down and rebuild this scroller's paint state
+   on every flip; animating a length inside a mask that is always present does
+   not. Keep the fade size at 0 rather than removing the mask. */
+.message-scroller-viewport {
+  --message-scroller-top-fade-size: 0px;
   -webkit-mask-image: linear-gradient(
     to bottom,
     transparent 0,
@@ -175,6 +182,10 @@
   mask-size: 100% 100%;
 }
 
+.message-scroller-viewport--top-fade {
+  --message-scroller-top-fade-size: 48px;
+}
+
 .agent-sidebar-resize-handle {
   background: transparent;
 }
@@ -299,7 +310,11 @@
   max-width: var(--agent-sidebar-width);
   height: 100%;
   transform: var(--agent-sidebar-inner-closed-transform, translateX(100%));
-  will-change: transform;
+  /* No `will-change: transform` here. This element wraps the whole chat
+     transcript and stays mounted for the life of the page, so the hint is never
+     retired — it pins a permanently composited layer whose backing store grows
+     with the transcript. Chromium already promotes a transform transition for
+     the 260ms it runs, which is the entire benefit. */
   transition: transform 260ms var(--ease-drawer);
 }
 
@@ -308,7 +323,6 @@
    when available; these transforms provide the fallback and exit motion. */
 .agent-sidebar-panel[data-agent-sidebar-animation="drawer"] {
   overflow: clip;
-  will-change: transform;
   --agent-shadow: 0 0% 0%;
   --agent-shadow-o: 0.14;
   box-shadow: -12px 0 30px hsl(var(--agent-shadow) / var(--agent-shadow-o));
@@ -337,7 +351,6 @@
     --agent-sidebar-closed-transform,
     translateX(calc(100% + 1px))
   );
-  will-change: transform;
   box-shadow: 0 18px 40px hsl(var(--agent-shadow) / var(--agent-shadow-o));
   transition: transform 260ms var(--ease-drawer);
 }
@@ -973,20 +986,11 @@
 }
 
 /* Tool-call rows are rendered in several disclosure/grouping shapes as the
-   stream grows. Keep the motion wrapper layout-transparent, while its short
-   lived exit clones can travel from the visible stack into the summary row. */
+   stream grows. Keep the layout wrapper transparent. */
 .agent-tool-call-stack {
   display: contents;
 }
 
-.agent-tool-call-stack__exit {
-  box-sizing: border-box;
-  position: fixed;
-  z-index: 2;
-  pointer-events: none;
-  margin: 0 !important;
-}
-
 [data-agent-empty-state="centered"] {
   justify-content: center;
   padding-bottom: clamp(3rem, 8vh, 6rem);
@@ -1030,11 +1034,6 @@
 }
 
 @media (prefers-reduced-motion: no-preference) {
-  .agent-tool-call--entering > .agent-tool-call__content,
-  .agent-tool-call--stack-entering > .agent-tool-call__content {
-    animation: agent-tool-call-enter 220ms var(--ease-out-strong) both;
-  }
-
   .agent-tool-summary__label {
     display: inline-block;
   }
@@ -1071,18 +1070,6 @@
     }
   }
 
-  @keyframes agent-tool-call-enter {
-    from {
-      opacity: 0;
-      transform: translateY(0.375rem);
-    }
-
-    to {
-      opacity: 1;
-      transform: translateY(0);
-    }
-  }
-
   @supports (view-transition-name: agent-native-chat) {
     .agent-native-chat-view-transition {
       contain: layout;

package/dist/templates/chat/changelog/2026-08-10-full-page-chat-now-uses-the-available-width-up-to-1000px-for.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-08-10
+---
+
+Full-page chat now uses the available width up to 1000px for more comfortable prompts and responses.

package/docs/content/template-chat.mdx

@@ -13,7 +13,7 @@ If you want a finished domain product shape, start from [Calendar](/docs/templat
   <Screen
     surface="desktop"
     html={
-      "<div style='min-height:560px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;padding:56px 40px'><div style='display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;width:min(700px,92%);min-height:430px'><div style='height:34px'></div><div style='text-align:center'><h1 style='margin:0'>How can I help?</h1><p class='wf-muted' style='margin:10px 0 0'>Chat about anything. Add actions, components, pages, jobs, or your own backend.</p></div><div class='wf-card' style='width:100%;min-height:150px;display:flex;flex-direction:column;gap:18px'><span class='wf-muted'>Message the agent...</span><div style='flex:1'></div><div style='display:flex;align-items:center;gap:10px'><span data-icon='plus' aria-label='Attach'></span><div style='flex:1'></div><span class='wf-pill'>GPT-5.6 Luna · Auto</span><span class='wf-pill'>Act</span><button class='primary'>↑</button></div></div><div style='height:34px'></div></div></div>"
+      "<div style='min-height:560px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;padding:56px 40px'><div style='display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;width:min(700px,92%);min-height:430px'><div style='height:34px'></div><div style='text-align:center'><h1 style='margin:0'>How can I help?</h1><p class='wf-muted' style='margin:10px 0 0'>Chat about anything. Add actions, components, pages, jobs, or your own backend.</p></div><div class='wf-card' style='width:100%;min-height:150px;display:flex;flex-direction:column;gap:18px'><span class='wf-muted'>Message the agent...</span><div style='flex:1'></div><div style='display:flex;align-items:center;gap:10px'><span data-icon='plus' aria-label='Attach'></span><div style='flex:1'></div><span class='wf-pill'>GPT-5.6 Luna · High</span><span class='wf-pill'>Act</span><button class='primary'>↑</button></div></div><div style='height:34px'></div></div></div>"
     }
   />
 </WireframeBlock>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agent-native/core",
-  "version": "0.149.1",
+  "version": "0.149.2",
   "description": "Framework for agent-native application development — where AI agents and UI share SQL state, actions, and context",
   "homepage": "https://github.com/BuilderIO/agent-native#readme",
   "bugs": {
@@ -414,7 +414,7 @@
     "yjs": "^13.6.31",
     "zod": "^4.3.6",
     "@agent-native/recap-cli": "0.5.4",
-    "@agent-native/toolkit": "^0.13.8"
+    "@agent-native/toolkit": "^0.13.9"
   },
   "devDependencies": {
     "@ai-sdk/anthropic": "^3.0.71",

package/src/templates/chat/changelog/2026-08-10-full-page-chat-now-uses-the-available-width-up-to-1000px-for.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-08-10
+---
+
+Full-page chat now uses the available width up to 1000px for more comfortable prompts and responses.