@djangocfg/ui-tools 2.1.371 → 2.1.373

package/dist/index.cjs

@@ -7,7 +7,7 @@ var chunkKNDLV4PI_cjs = require('./chunk-KNDLV4PI.cjs');
 var chunk5I5QNGUG_cjs = require('./chunk-5I5QNGUG.cjs');
 var chunkYW5IVWHQ_cjs = require('./chunk-YW5IVWHQ.cjs');
 var chunk76NNDZH6_cjs = require('./chunk-76NNDZH6.cjs');
-var chunk2SKR4U5S_cjs = require('./chunk-2SKR4U5S.cjs');
+var chunkTAEHNX4W_cjs = require('./chunk-TAEHNX4W.cjs');
 var chunkYXZ6GU7H_cjs = require('./chunk-YXZ6GU7H.cjs');
 var chunkFVVF7VCD_cjs = require('./chunk-FVVF7VCD.cjs');
 var chunk7EYHNP3E_cjs = require('./chunk-7EYHNP3E.cjs');
@@ -373,7 +373,7 @@ var LazyTree = createLazyComponent(
   }
 );
 var LazyChat = createLazyComponent(
-  () => import('./ChatRoot-HOQ37WRE.cjs').then((m) => ({ default: m.ChatRoot })),
+  () => import('./ChatRoot-3LA3DSNY.cjs').then((m) => ({ default: m.ChatRoot })),
   {
     displayName: "LazyChat",
     fallback: /* @__PURE__ */ jsxRuntime.jsx(LoadingFallback, { minHeight: 320, text: "Loading chat\u2026" })
@@ -410,7 +410,7 @@ async function* parseSSE(response, options = {}) {
     throw new Error("SSE response has no body");
   }
   const map = options.map ?? DEFAULT_MAP;
-  const idleMs = options.idleTimeoutMs ?? chunk2SKR4U5S_cjs.LIMITS.sseIdleMs;
+  const idleMs = options.idleTimeoutMs ?? chunkTAEHNX4W_cjs.LIMITS.sseIdleMs;
   const reader = response.body.getReader();
   const decoder = new TextDecoder();
   let buffer = "";
@@ -613,7 +613,7 @@ function createMockTransport(opts = {}) {
     async createSession(_opts) {
       await sleep(latency);
       return {
-        sessionId: chunk2SKR4U5S_cjs.createId("s"),
+        sessionId: chunkTAEHNX4W_cjs.createId("s"),
         messages: history.length ? [...history] : void 0,
         hasMore: false,
         cursor: null,
@@ -630,12 +630,12 @@ function createMockTransport(opts = {}) {
         throw new Error("mock transport scripted failure");
       }
       history.push({
-        id: chunk2SKR4U5S_cjs.createId("u"),
+        id: chunkTAEHNX4W_cjs.createId("u"),
         role: "user",
         content,
         createdAt: Date.now()
       });
-      const messageId = chunk2SKR4U5S_cjs.createId("a");
+      const messageId = chunkTAEHNX4W_cjs.createId("a");
       yield { type: "message_start", messageId, sessionId: _sid };
       const reply = replies[turn % replies.length];
       turn += 1;
@@ -664,7 +664,7 @@ function createMockTransport(opts = {}) {
       turn += 1;
       const text = typeof reply === "string" ? reply : reply.filter((e) => e.type === "chunk").map((e) => e.delta).join("");
       return {
-        id: chunk2SKR4U5S_cjs.createId("a"),
+        id: chunkTAEHNX4W_cjs.createId("a"),
         role: "assistant",
         content: text || DEFAULT_REPLY,
         createdAt: Date.now()
@@ -864,9 +864,9 @@ function AudioToggle({
   alwaysShow = false,
   className
 }) {
-  const muted = chunk2SKR4U5S_cjs.useChatAudioPrefs((s) => s.muted);
-  const setMuted = chunk2SKR4U5S_cjs.useChatAudioPrefs((s) => s.setMuted);
-  const ctx = chunk2SKR4U5S_cjs.useChatContextOptional();
+  const muted = chunkTAEHNX4W_cjs.useChatAudioPrefs((s) => s.muted);
+  const setMuted = chunkTAEHNX4W_cjs.useChatAudioPrefs((s) => s.setMuted);
+  const ctx = chunkTAEHNX4W_cjs.useChatContextOptional();
   if (ctx && !ctx.hasAudio && !alwaysShow) return null;
   const Icon = muted ? lucideReact.VolumeX : lucideReact.Volume2;
   const label = muted ? "Unmute chat sounds" : "Mute chat sounds";
@@ -2180,151 +2180,151 @@ Object.defineProperty(exports, "useCronWeekDays", {
 });
 Object.defineProperty(exports, "Attachments", {
   enumerable: true,
-  get: function () { return chunk2SKR4U5S_cjs.Attachments; }
+  get: function () { return chunkTAEHNX4W_cjs.Attachments; }
 });
 Object.defineProperty(exports, "AttachmentsGrid", {
   enumerable: true,
-  get: function () { return chunk2SKR4U5S_cjs.AttachmentsGrid; }
+  get: function () { return chunkTAEHNX4W_cjs.AttachmentsGrid; }
 });
 Object.defineProperty(exports, "AttachmentsList", {
   enumerable: true,
-  get: function () { return chunk2SKR4U5S_cjs.AttachmentsList; }
+  get: function () { return chunkTAEHNX4W_cjs.AttachmentsList; }
 });
 Object.defineProperty(exports, "CHAT_EVENT_NAME", {
   enumerable: true,
-  get: function () { return chunk2SKR4U5S_cjs.CHAT_EVENT_NAME; }
+  get: function () { return chunkTAEHNX4W_cjs.CHAT_EVENT_NAME; }
 });
 Object.defineProperty(exports, "CSS_VARS", {
   enumerable: true,
-  get: function () { return chunk2SKR4U5S_cjs.CSS_VARS; }
+  get: function () { return chunkTAEHNX4W_cjs.CSS_VARS; }
 });
 Object.defineProperty(exports, "ChatProvider", {
   enumerable: true,
-  get: function () { return chunk2SKR4U5S_cjs.ChatProvider; }
+  get: function () { return chunkTAEHNX4W_cjs.ChatProvider; }
 });
 Object.defineProperty(exports, "ChatRoot", {
   enumerable: true,
-  get: function () { return chunk2SKR4U5S_cjs.ChatRoot; }
+  get: function () { return chunkTAEHNX4W_cjs.ChatRoot; }
 });
 Object.defineProperty(exports, "Composer", {
   enumerable: true,
-  get: function () { return chunk2SKR4U5S_cjs.Composer; }
+  get: function () { return chunkTAEHNX4W_cjs.Composer; }
 });
 Object.defineProperty(exports, "DEFAULT_LABELS", {
   enumerable: true,
-  get: function () { return chunk2SKR4U5S_cjs.DEFAULT_LABELS; }
+  get: function () { return chunkTAEHNX4W_cjs.DEFAULT_LABELS; }
 });
 Object.defineProperty(exports, "DEFAULT_SIDEBAR", {
   enumerable: true,
-  get: function () { return chunk2SKR4U5S_cjs.DEFAULT_SIDEBAR; }
+  get: function () { return chunkTAEHNX4W_cjs.DEFAULT_SIDEBAR; }
 });
 Object.defineProperty(exports, "DEFAULT_Z_INDEX", {
   enumerable: true,
-  get: function () { return chunk2SKR4U5S_cjs.DEFAULT_Z_INDEX; }
+  get: function () { return chunkTAEHNX4W_cjs.DEFAULT_Z_INDEX; }
 });
 Object.defineProperty(exports, "EmptyState", {
   enumerable: true,
-  get: function () { return chunk2SKR4U5S_cjs.EmptyState; }
+  get: function () { return chunkTAEHNX4W_cjs.EmptyState; }
 });
 Object.defineProperty(exports, "ErrorBanner", {
   enumerable: true,
-  get: function () { return chunk2SKR4U5S_cjs.ErrorBanner; }
+  get: function () { return chunkTAEHNX4W_cjs.ErrorBanner; }
 });
 Object.defineProperty(exports, "HOTKEYS", {
   enumerable: true,
-  get: function () { return chunk2SKR4U5S_cjs.HOTKEYS; }
+  get: function () { return chunkTAEHNX4W_cjs.HOTKEYS; }
 });
 Object.defineProperty(exports, "JumpToLatest", {
   enumerable: true,
-  get: function () { return chunk2SKR4U5S_cjs.JumpToLatest; }
+  get: function () { return chunkTAEHNX4W_cjs.JumpToLatest; }
 });
 Object.defineProperty(exports, "LIMITS", {
   enumerable: true,
-  get: function () { return chunk2SKR4U5S_cjs.LIMITS; }
+  get: function () { return chunkTAEHNX4W_cjs.LIMITS; }
 });
 Object.defineProperty(exports, "MessageActions", {
   enumerable: true,
-  get: function () { return chunk2SKR4U5S_cjs.MessageActions; }
+  get: function () { return chunkTAEHNX4W_cjs.MessageActions; }
 });
 Object.defineProperty(exports, "MessageBubble", {
   enumerable: true,
-  get: function () { return chunk2SKR4U5S_cjs.MessageBubble; }
+  get: function () { return chunkTAEHNX4W_cjs.MessageBubble; }
 });
 Object.defineProperty(exports, "MessageList", {
   enumerable: true,
-  get: function () { return chunk2SKR4U5S_cjs.MessageList; }
+  get: function () { return chunkTAEHNX4W_cjs.MessageList; }
 });
 Object.defineProperty(exports, "STORAGE_KEYS", {
   enumerable: true,
-  get: function () { return chunk2SKR4U5S_cjs.STORAGE_KEYS; }
+  get: function () { return chunkTAEHNX4W_cjs.STORAGE_KEYS; }
 });
 Object.defineProperty(exports, "Sources", {
   enumerable: true,
-  get: function () { return chunk2SKR4U5S_cjs.Sources; }
+  get: function () { return chunkTAEHNX4W_cjs.Sources; }
 });
 Object.defineProperty(exports, "StreamingIndicator", {
   enumerable: true,
-  get: function () { return chunk2SKR4U5S_cjs.StreamingIndicator; }
+  get: function () { return chunkTAEHNX4W_cjs.StreamingIndicator; }
 });
 Object.defineProperty(exports, "ToolCalls", {
   enumerable: true,
-  get: function () { return chunk2SKR4U5S_cjs.ToolCalls; }
+  get: function () { return chunkTAEHNX4W_cjs.ToolCalls; }
 });
 Object.defineProperty(exports, "createId", {
   enumerable: true,
-  get: function () { return chunk2SKR4U5S_cjs.createId; }
+  get: function () { return chunkTAEHNX4W_cjs.createId; }
 });
 Object.defineProperty(exports, "createTokenBuffer", {
   enumerable: true,
-  get: function () { return chunk2SKR4U5S_cjs.createTokenBuffer; }
+  get: function () { return chunkTAEHNX4W_cjs.createTokenBuffer; }
 });
 Object.defineProperty(exports, "deriveInitials", {
   enumerable: true,
-  get: function () { return chunk2SKR4U5S_cjs.deriveInitials; }
+  get: function () { return chunkTAEHNX4W_cjs.deriveInitials; }
 });
 Object.defineProperty(exports, "getChatLogger", {
   enumerable: true,
-  get: function () { return chunk2SKR4U5S_cjs.getChatLogger; }
+  get: function () { return chunkTAEHNX4W_cjs.getChatLogger; }
 });
 Object.defineProperty(exports, "initialState", {
   enumerable: true,
-  get: function () { return chunk2SKR4U5S_cjs.initialState; }
+  get: function () { return chunkTAEHNX4W_cjs.initialState; }
 });
 Object.defineProperty(exports, "reducer", {
   enumerable: true,
-  get: function () { return chunk2SKR4U5S_cjs.reducer; }
+  get: function () { return chunkTAEHNX4W_cjs.reducer; }
 });
 Object.defineProperty(exports, "resolvePersona", {
   enumerable: true,
-  get: function () { return chunk2SKR4U5S_cjs.resolvePersona; }
+  get: function () { return chunkTAEHNX4W_cjs.resolvePersona; }
 });
 Object.defineProperty(exports, "useChat", {
   enumerable: true,
-  get: function () { return chunk2SKR4U5S_cjs.useChat; }
+  get: function () { return chunkTAEHNX4W_cjs.useChat; }
 });
 Object.defineProperty(exports, "useChatAudio", {
   enumerable: true,
-  get: function () { return chunk2SKR4U5S_cjs.useChatAudio; }
+  get: function () { return chunkTAEHNX4W_cjs.useChatAudio; }
 });
 Object.defineProperty(exports, "useChatAudioPrefs", {
   enumerable: true,
-  get: function () { return chunk2SKR4U5S_cjs.useChatAudioPrefs; }
+  get: function () { return chunkTAEHNX4W_cjs.useChatAudioPrefs; }
 });
 Object.defineProperty(exports, "useChatComposer", {
   enumerable: true,
-  get: function () { return chunk2SKR4U5S_cjs.useChatComposer; }
+  get: function () { return chunkTAEHNX4W_cjs.useChatComposer; }
 });
 Object.defineProperty(exports, "useChatContext", {
   enumerable: true,
-  get: function () { return chunk2SKR4U5S_cjs.useChatContext; }
+  get: function () { return chunkTAEHNX4W_cjs.useChatContext; }
 });
 Object.defineProperty(exports, "useChatContextOptional", {
   enumerable: true,
-  get: function () { return chunk2SKR4U5S_cjs.useChatContextOptional; }
+  get: function () { return chunkTAEHNX4W_cjs.useChatContextOptional; }
 });
 Object.defineProperty(exports, "useChatLayout", {
   enumerable: true,
-  get: function () { return chunk2SKR4U5S_cjs.useChatLayout; }
+  get: function () { return chunkTAEHNX4W_cjs.useChatLayout; }
 });
 Object.defineProperty(exports, "TreeError", {
   enumerable: true,

package/dist/index.d.cts

@@ -2413,9 +2413,12 @@ interface MessageListProps {
      */
     noVirtualize?: boolean;
     /**
-     * Initial item height estimate fed to Virtuoso's first-paint pass.
-     * The library re-measures every item after mount; this just tightens
-     * the initial scrollbar before measurements land. Default `120`.
+     * @deprecated No-op as of 2.1.373. We intentionally let Virtuoso run
+     * its first-item probe pass: cmdop bubbles vary from 40px (one-line
+     * user message) to 800px (markdown with code blocks), so any single
+     * estimate fed here forces a measure/reshape loop on every render.
+     * The kept prop avoids a breaking-change bump for hosts that still
+     * pass it explicitly.
      */
     defaultItemHeight?: number;
     /**

package/dist/index.d.ts

@@ -2413,9 +2413,12 @@ interface MessageListProps {
      */
     noVirtualize?: boolean;
     /**
-     * Initial item height estimate fed to Virtuoso's first-paint pass.
-     * The library re-measures every item after mount; this just tightens
-     * the initial scrollbar before measurements land. Default `120`.
+     * @deprecated No-op as of 2.1.373. We intentionally let Virtuoso run
+     * its first-item probe pass: cmdop bubbles vary from 40px (one-line
+     * user message) to 800px (markdown with code blocks), so any single
+     * estimate fed here forces a measure/reshape loop on every render.
+     * The kept prop avoids a breaking-change bump for hosts that still
+     * pass it explicitly.
      */
     defaultItemHeight?: number;
     /**

package/dist/index.mjs

@@ -5,8 +5,8 @@ export { NativeProvider, StreamProvider, VideoControls, VideoErrorFallback, Vide
 export { ImageViewer } from './chunk-OBRSGM64.mjs';
 export { generateContentKey, useAudioCache, useBlobUrlCleanup, useImageCache, useMediaCacheStore, useVideoCache, useVideoPlayerSettings } from './chunk-C6GXVH5J.mjs';
 export { CronSchedulerProvider, CustomInput, DayChips, MonthDayGrid, SchedulePreview, ScheduleTypeSelector, TimeSelector, buildCron, humanizeCron, isValidCron, parseCron, useCronCustom, useCronMonthDays, useCronPreview, useCronScheduler, useCronSchedulerContext, useCronTime, useCronType, useCronWeekDays } from './chunk-PVAX67JG.mjs';
-import { LIMITS, createId, useChatAudioPrefs, useChatContextOptional } from './chunk-MVAT6OPZ.mjs';
-export { Attachments, AttachmentsGrid, AttachmentsList, CHAT_EVENT_NAME, CSS_VARS, ChatProvider, ChatRoot, Composer, DEFAULT_LABELS, DEFAULT_SIDEBAR, DEFAULT_Z_INDEX, EmptyState, ErrorBanner, HOTKEYS, JumpToLatest, LIMITS, MessageActions, MessageBubble, MessageList, STORAGE_KEYS, Sources, StreamingIndicator, ToolCalls, createId, createTokenBuffer, deriveInitials, getChatLogger, initialState, reducer, resolvePersona, useChat, useChatAudio, useChatAudioPrefs, useChatComposer, useChatContext, useChatContextOptional, useChatLayout } from './chunk-MVAT6OPZ.mjs';
+import { LIMITS, createId, useChatAudioPrefs, useChatContextOptional } from './chunk-PSM3DUTC.mjs';
+export { Attachments, AttachmentsGrid, AttachmentsList, CHAT_EVENT_NAME, CSS_VARS, ChatProvider, ChatRoot, Composer, DEFAULT_LABELS, DEFAULT_SIDEBAR, DEFAULT_Z_INDEX, EmptyState, ErrorBanner, HOTKEYS, JumpToLatest, LIMITS, MessageActions, MessageBubble, MessageList, STORAGE_KEYS, Sources, StreamingIndicator, ToolCalls, createId, createTokenBuffer, deriveInitials, getChatLogger, initialState, reducer, resolvePersona, useChat, useChatAudio, useChatAudioPrefs, useChatComposer, useChatContext, useChatContextOptional, useChatLayout } from './chunk-PSM3DUTC.mjs';
 export { TreeError, TreeSkeleton, createDemoTree } from './chunk-B6IR5KSC.mjs';
 export { DEFAULT_TREE_APPEARANCE, DEFAULT_TREE_LABELS, TreeRoot as Tree, TreeChevron, TreeContent, TreeEmpty, TreeIcon, TreeIndentGuides, TreeLabel, TreeProvider, TreeRoot, TreeRow, TreeSearchInput, appearanceToStyle, clearTreeState, createChildCache, flattenTree, loadTreeState, resolveAppearance, resolveChildren, saveTreeState, useTreeActions, useTreeContext, useTreeExpansion, useTreeFocus, useTreeKeyboard, useTreeLabels, useTreeRows, useTreeSearch, useTreeSelection, useTreeTypeAhead } from './chunk-ZL7FH4NW.mjs';
 import { PlaygroundProvider } from './chunk-Y6UTOBF6.mjs';
@@ -348,7 +348,7 @@ var LazyTree = createLazyComponent(
   }
 );
 var LazyChat = createLazyComponent(
-  () => import('./ChatRoot-DYMCNGOB.mjs').then((m) => ({ default: m.ChatRoot })),
+  () => import('./ChatRoot-RIETBE55.mjs').then((m) => ({ default: m.ChatRoot })),
   {
     displayName: "LazyChat",
     fallback: /* @__PURE__ */ jsx(LoadingFallback, { minHeight: 320, text: "Loading chat\u2026" })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-tools",
-  "version": "2.1.371",
+  "version": "2.1.373",
   "description": "Heavy React tools with lazy loading - for Electron, Vite, CRA, Next.js apps",
   "keywords": [
     "ui-tools",
@@ -156,8 +156,8 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/i18n": "^2.1.371",
-    "@djangocfg/ui-core": "^2.1.371",
+    "@djangocfg/i18n": "^2.1.373",
+    "@djangocfg/ui-core": "^2.1.373",
     "consola": "^3.4.2",
     "lodash-es": "^4.18.1",
     "lucide-react": "^0.545.0",
@@ -211,10 +211,10 @@
     "material-file-icons": "^2.4.0"
   },
   "devDependencies": {
-    "@djangocfg/i18n": "^2.1.371",
+    "@djangocfg/i18n": "^2.1.373",
     "@djangocfg/playground": "workspace:*",
-    "@djangocfg/typescript-config": "^2.1.371",
-    "@djangocfg/ui-core": "^2.1.371",
+    "@djangocfg/typescript-config": "^2.1.373",
+    "@djangocfg/ui-core": "^2.1.373",
     "@types/lodash-es": "^4.17.12",
     "@types/mapbox__mapbox-gl-draw": "^1.4.8",
     "@types/node": "^24.7.2",

package/src/tools/Chat/Chat.story.tsx

@@ -1110,3 +1110,174 @@ export const Playground = () => {
     </div>
   );
 };
+
+// ---------------------------------------------------------------------------
+// 15) WailsLikeVirtualization — stress-test for the virtuoso integration
+//
+// Mirrors the cmdop-desktop (Wails) chat use case that drove the
+// plan64 migration:
+//   - 200 pre-loaded history bubbles of varying heights (short, long
+//     prose, code blocks, tool calls) — exercises Virtuoso's dynamic
+//     measurement path and the bug where bubbles "disappeared" when
+//     scrolling to the bottom.
+//   - Streamed reply with token-by-token deltas — exercises
+//     `followOutput` sticky-bottom behaviour.
+//   - Tool call mid-stream — exercises bubble-resize during streaming
+//     (the second virtuoso jitter source).
+//
+// Use this story to verify:
+//   1. Mount → viewport lands at the last bubble, not the top.
+//   2. Scroll up → JumpToLatest pill appears; click → smooth jump.
+//   3. Sit at the bottom → streaming reply tracks without flicker.
+//   4. Drag scrollbar to the very bottom → bubbles stay visible (no
+//      empty viewport).
+// ---------------------------------------------------------------------------
+
+function makeWailsLikeHistory(count: number): ChatMessage[] {
+  // Mix of bubble shapes so virtuoso has to measure heterogeneous
+  // heights instead of locking onto one cheap estimate.
+  const SHORT_USER = 'Quick ping — can you check the latest deploy?';
+  const SHORT_AI = 'Yes, all clear. CI passed, no regressions.';
+  const LONG_PROSE =
+    'Sure, here is the rundown.\n\nThe service has been migrated to the new transport layer. The reducer split is in plan64 phase 4, and the audio cues now respect `prefers-reduced-motion`.\n\n' +
+    'A few things to double-check before we sign off:\n\n' +
+    '- The auto-scroll behaviour on streaming chunks\n' +
+    '- Tool-call panels expanding mid-stream\n' +
+    '- The mention popup positioning inside the composer\n\n' +
+    'Let me know if any of those need a second pass.';
+  const CODE_REPLY =
+    'Here is the snippet you asked for:\n\n```ts\n' +
+    'export function createWailsTransport(): ChatTransport {\n' +
+    '  return {\n' +
+    '    async *stream(sid, content, { signal }) {\n' +
+    '      const queue = createAsyncQueue<ChatStreamEvent>();\n' +
+    '      const off = subscribeChatStreamEvents(sid, (e) => queue.push(e));\n' +
+    '      try {\n' +
+    '        await ChatService.SendMessage(sid, content);\n' +
+    '        for await (const evt of queue) {\n' +
+    '          yield evt;\n' +
+    '          if (isTerminalStreamEvent(evt)) break;\n' +
+    '        }\n' +
+    '      } finally {\n' +
+    '        off(); queue.close();\n' +
+    '      }\n' +
+    '    },\n' +
+    '  };\n' +
+    '}\n' +
+    '```\n\nDoes that match what you had in mind?';
+
+  const shapes: Array<(i: number) => ChatMessage> = [
+    (i) => ({
+      id: `u${i}`,
+      role: 'user',
+      content: SHORT_USER,
+      createdAt: Date.now() - (count - i) * 10_000,
+    }),
+    (i) => ({
+      id: `a${i}`,
+      role: 'assistant',
+      content: SHORT_AI,
+      createdAt: Date.now() - (count - i) * 10_000,
+    }),
+    (i) => ({
+      id: `a${i}`,
+      role: 'assistant',
+      content: LONG_PROSE,
+      createdAt: Date.now() - (count - i) * 10_000,
+    }),
+    (i) => ({
+      id: `a${i}`,
+      role: 'assistant',
+      content: CODE_REPLY,
+      createdAt: Date.now() - (count - i) * 10_000,
+    }),
+    (i) => ({
+      id: `a${i}`,
+      role: 'assistant',
+      content: 'Running diagnostics…',
+      createdAt: Date.now() - (count - i) * 10_000,
+      toolCalls: [
+        {
+          id: `t${i}`,
+          name: 'read_file',
+          input: { path: `/var/log/app-${i}.log`, lines: 50 },
+          output: { ok: true, bytes: 4096 + (i % 7) * 512 },
+          status: 'success',
+          startedAt: Date.now() - (count - i) * 10_000,
+          endedAt: Date.now() - (count - i) * 10_000 + 250,
+        },
+      ],
+    }),
+  ];
+
+  return Array.from({ length: count }, (_, i) => shapes[i % shapes.length](i));
+}
+
+export const WailsLikeVirtualization = () => {
+  const [count] = useSelect('history', {
+    options: ['50', '200', '500', '1000'] as const,
+    defaultValue: '200',
+    label: 'History size',
+  });
+
+  // Pre-seeded history simulating a long-running cmdop session.
+  // `resumeSession` is the key bit: the mock transport returns these
+  // as `SessionInfo.messages` so they're available at mount time
+  // (mirrors `ChatService.GetHistoryPaginated` on the Wails side).
+  const history = useMemo(() => makeWailsLikeHistory(Number(count)), [count]);
+
+  const transport = useMemo(() => {
+    const sequence: ChatStreamEvent[] = [
+      { type: 'chunk', delta: 'Let me pull the latest stats.\n\n' },
+      {
+        type: 'tool_call_start',
+        toolId: 'live-1',
+        name: 'fetch_metrics',
+        input: { window: '15m' },
+      },
+      { type: 'tool_call_delta', toolId: 'live-1', delta: 'connecting…\n' },
+      { type: 'tool_call_delta', toolId: 'live-1', delta: 'fetched 3214 rows\n' },
+      {
+        type: 'tool_call_end',
+        toolId: 'live-1',
+        output: { rows: 3214, p95_ms: 142, errors: 0 },
+        status: 'success',
+      },
+      {
+        type: 'chunk',
+        delta:
+          'All green:\n\n- **3214 rows** in the last 15 min\n- **p95 latency**: 142 ms\n- **errors**: 0\n\n',
+      },
+      {
+        type: 'chunk',
+        delta:
+          'If you want to stress-test virtualization, scroll up and check the JumpToLatest pill — it should appear once you move out of the sticky-bottom zone.',
+      },
+      { type: 'message_end' },
+    ];
+    return createMockTransport({
+      replies: [sequence, sequence, sequence],
+      latencyMs: 25,
+      // Mock transport returns `initialMessages` from `createSession`
+      // as `SessionInfo.messages` — mimics the Wails path where the
+      // default chat session resumes with its on-disk history.
+      initialMessages: history,
+    });
+  }, [history]);
+
+  return (
+    <Frame h={620} w={520}>
+      <ChatRoot
+        transport={transport}
+        config={{
+          greeting: `Wails-like session — ${history.length} bubbles preloaded`,
+          description:
+            'Stress test for the virtuoso integration: long history, dynamic bubble heights, streaming tool calls. Scroll to the bottom; bubbles must stay visible. Streaming should follow without flicker.',
+          placeholder: 'Send a message to trigger a streamed reply…',
+          user: { name: 'Mark', initials: 'MO' },
+          assistant: { name: 'cmdop', initials: 'CM' },
+        }}
+      />
+    </Frame>
+  );
+};

package/src/tools/Chat/components/MessageList.tsx

@@ -55,9 +55,12 @@ export interface MessageListProps {
    */
   noVirtualize?: boolean;
   /**
-   * Initial item height estimate fed to Virtuoso's first-paint pass.
-   * The library re-measures every item after mount; this just tightens
-   * the initial scrollbar before measurements land. Default `120`.
+   * @deprecated No-op as of 2.1.373. We intentionally let Virtuoso run
+   * its first-item probe pass: cmdop bubbles vary from 40px (one-line
+   * user message) to 800px (markdown with code blocks), so any single
+   * estimate fed here forces a measure/reshape loop on every render.
+   * The kept prop avoids a breaking-change bump for hosts that still
+   * pass it explicitly.
    */
   defaultItemHeight?: number;
   /**
@@ -85,17 +88,26 @@ export const MessageList = forwardRef<MessageListHandle, MessageListProps>(funct
     className,
     itemClassName,
     noVirtualize = false,
-    defaultItemHeight = 120,
+    defaultItemHeight: _deprecatedDefaultItemHeight,
     onAtBottomChange,
   },
   ref,
 ) {
+  void _deprecatedDefaultItemHeight;
   const ctx = useChatContextOptional();
   const messages = messagesProp ?? ctx?.messages ?? [];
   const isLoadingMore = isLoadingMoreProp ?? ctx?.isLoadingMore ?? false;
   const { copyToClipboard } = useCopy();
 
   const virtuosoRef = useRef<VirtuosoHandle | null>(null);
+  // Track whether we've already landed on the bottom for the initial
+  // history. Virtuoso's `initialTopMostItemIndex` only fires on first
+  // mount and uses the `messages` length at that moment. Chats almost
+  // always mount with `messages=[]` and then receive history one
+  // dispatch later — so we ALSO fire an imperative scroll when the
+  // first non-empty batch arrives. Subsequent updates fall through to
+  // `followOutput` (sticky-bottom while the user is at bottom).
+  const didInitialScrollRef = useRef(false);
 
   useImperativeHandle(
     ref,
@@ -132,6 +144,24 @@ export const MessageList = forwardRef<MessageListHandle, MessageListProps>(funct
   );
 
   const itemRenderer = renderItem ?? defaultRenderItem;
+  // Jump to bottom on the first non-empty messages batch. Wrapped in
+  // rAF so virtuoso has measured the new items before we ask it to
+  // scroll — otherwise the call happens while the list is still
+  // mid-layout and lands on the wrong offset.
+  useEffect(() => {
+    if (didInitialScrollRef.current) return;
+    if (messages.length === 0) return;
+    didInitialScrollRef.current = true;
+    const id = requestAnimationFrame(() => {
+      virtuosoRef.current?.scrollToIndex({
+        index: 'LAST',
+        align: 'end',
+        behavior: 'auto',
+      });
+    });
+    return () => cancelAnimationFrame(id);
+  }, [messages.length]);
+
   // Virtuoso may invoke `computeItemKey` for an index briefly out of
   // sync with `data` during fast state churn (streaming chunks +
   // Strict Mode double-mount). `m` arrives undefined in that window.
@@ -212,19 +242,31 @@ export const MessageList = forwardRef<MessageListHandle, MessageListProps>(funct
       data={messages}
       computeItemKey={computeItemKey}
       itemContent={(index, m) => (m ? itemRenderer(m, index) : null)}
-      defaultItemHeight={defaultItemHeight}
-      // Sticky-bottom: keep the viewport anchored to the latest message
-      // unless the user scrolled up. `'smooth'` while streaming would
-      // jank; Virtuoso defaults to `'auto'` which is what we want.
+      // No `defaultItemHeight` — Virtuoso uses its first-item probe
+      // pass. We previously fed it `120` which was wildly low for
+      // chat bubbles (markdown + code blocks reach 500px+) and forced
+      // virtuoso into a measure/reshape loop on every render: predicted
+      // height << real height → page recompute → measure → repeat,
+      // visible as jittery scrolling and bubbles "blinking" in and out.
+      // The probe pass costs one extra render on mount; that's cheaper
+      // than perpetual reshape.
+      //
+      // No `alignToBottom` — it only matters when the list is shorter
+      // than the viewport (centers items near the bottom). Combined
+      // with dynamic bubble heights it triggered the same measure loop:
+      // virtuoso recomputes top padding on every size change to keep
+      // the cluster bottom-aligned. `initialTopMostItemIndex` + the
+      // mount-time imperative scroll already land us at the bottom on
+      // open, which is what users actually want.
+      //
+      // No `increaseViewportBy` overscan — virtuoso's default (~0px)
+      // is the right call for chat: every overscanned bubble re-renders
+      // on every streaming token delta, so a 400px buffer means 3–4
+      // extra bubbles re-rendering at 60Hz during a stream. Default
+      // keeps the working set tight.
+      initialTopMostItemIndex={messages.length > 0 ? messages.length - 1 : 0}
       followOutput={(isAtBottom) => (isAtBottom ? 'auto' : false)}
       atBottomStateChange={onAtBottomChange}
-      // Pad the list so a short conversation still hugs the bottom of
-      // the viewport (Telegram / iMessage feel) instead of stacking at
-      // the top.
-      alignToBottom
-      // Top-of-list pagination — fire when the topmost item enters the
-      // viewport. Virtuoso pauses this until `data` grows, so loadMore
-      // implementations don't need their own debounce.
       startReached={startReachedHandler}
       // Spinner while older history is loading. Rendering it as the
       // Header keeps it inside the virtualized scroll, so it doesn't
@@ -245,10 +287,6 @@ export const MessageList = forwardRef<MessageListHandle, MessageListProps>(funct
             }
           : EMPTY_COMPONENTS
       }
-      // Item height is dynamic; Virtuoso re-measures on resize. We
-      // bias the initial overscan a bit so streaming-token re-layout
-      // doesn't leave gaps before the next measurement lands.
-      increaseViewportBy={{ top: 200, bottom: 400 }}
     />
   );
 });

package/dist/ChatRoot-DYMCNGOB.mjs

@@ -1,5 +0,0 @@
-export { ChatRoot } from './chunk-MVAT6OPZ.mjs';
-import './chunk-NWUT327A.mjs';
-import './chunk-N2XQF2OL.mjs';
-//# sourceMappingURL=ChatRoot-DYMCNGOB.mjs.map
-//# sourceMappingURL=ChatRoot-DYMCNGOB.mjs.map