@djangocfg/ui-tools 2.1.445 → 2.1.446

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-tools",
-  "version": "2.1.445",
+  "version": "2.1.446",
   "description": "Heavy React tools with lazy loading - for Electron, Vite, CRA, Next.js apps",
   "keywords": [
     "ui-tools",
@@ -334,8 +334,8 @@
     "test:watch": "vitest"
   },
   "peerDependencies": {
-    "@djangocfg/i18n": "^2.1.445",
-    "@djangocfg/ui-core": "^2.1.445",
+    "@djangocfg/i18n": "^2.1.446",
+    "@djangocfg/ui-core": "^2.1.446",
     "consola": "^3.4.2",
     "lodash-es": "^4.18.1",
     "lucide-react": "^0.545.0",
@@ -418,9 +418,9 @@
     "@maplibre/maplibre-gl-geocoder": "^1.7.0"
   },
   "devDependencies": {
-    "@djangocfg/i18n": "^2.1.445",
-    "@djangocfg/typescript-config": "^2.1.445",
-    "@djangocfg/ui-core": "^2.1.445",
+    "@djangocfg/i18n": "^2.1.446",
+    "@djangocfg/typescript-config": "^2.1.446",
+    "@djangocfg/ui-core": "^2.1.446",
     "@types/lodash-es": "^4.17.12",
     "@types/mapbox__mapbox-gl-draw": "^1.4.8",
     "@types/node": "^25.2.3",

package/src/tools/chat/composer/Composer.tsx

@@ -622,7 +622,10 @@ export const Composer = forwardRef<HTMLDivElement, ComposerProps>(function Compo
           {...dragProps}
           onKeyDownCapture={handleSlashKeyDownCapture}
           className={cn(
-            'relative border-t border-border bg-background/95',
+            // No border-t: the composer's own rounded field separates it from
+            // the transcript — a hard rule above the input reads as chrome
+            // (ChatGPT/Claude float the composer the same way).
+            'relative bg-background/95',
             sz.containerPadding,
             ap.containerPadding,
             className,
@@ -744,7 +747,9 @@ export const Composer = forwardRef<HTMLDivElement, ComposerProps>(function Compo
         {...dragProps}
         onKeyDownCapture={handleSlashKeyDownCapture}
         className={cn(
-          'relative border-t border-border bg-background/95',
+          // No border-t: the composer's own rounded field separates it from
+          // the transcript (same rationale as the inline layout above).
+          'relative bg-background/95',
           sz.containerPadding,
           ap.containerPadding,
           className,

package/src/tools/chat/messages/MessageList.tsx

@@ -191,23 +191,84 @@ 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.
+  // Jump to bottom on the first non-empty messages batch. A SINGLE rAF +
+  // scrollToIndex is not enough when the list mounts with a long transcript
+  // (opening / switching a contact): virtuoso measures the dynamic bubble
+  // heights ASYNCHRONOUSLY, seconds after the data lands — until then the
+  // scroller reports scrollHeight === clientHeight (gap 0), so any "stop when
+  // the bottom sticks" exit fires on that transient zero and the late height
+  // growth is never corrected (live incident 2026-07-03: contact switch left
+  // a 112-message room at scrollTop 0 / blank until measured). The landing is
+  // therefore a PHASE, not a one-shot: ONE scrollToIndex seeds the tail
+  // render, then per-frame DIRECT scrollTop writes chase every height change
+  // for the whole landing window (~2.5s) — ending early ONLY on real user
+  // scroll intent, never on a momentarily-zero gap. Direct writes are
+  // ordinary scrolls to virtuoso — repeating scrollToIndex instead re-enters
+  // its initial-location seek and blanks the list (zero rows,
+  // visibility:hidden).
   useEffect(() => {
     if (didInitialScrollRef.current) return;
     if (messages.length === 0) return;
     didInitialScrollRef.current = true;
-    const id = requestAnimationFrame(() => {
-      virtuosoRef.current?.scrollToIndex({
-        index: 'LAST',
-        align: 'end',
-        offset: BOTTOM_GAP_PX,
-        behavior: 'auto',
-      });
-    });
-    return () => cancelAnimationFrame(id);
+    let raf = 0;
+    let framesLeft = 150;
+    let seeded = false;
+    let userTookOver = false;
+    const cancelOnUserScroll = () => {
+      userTookOver = true;
+    };
+    // Real scroll intent (wheel / touch / keys) ends the landing phase — the
+    // user reading history must never be yanked back down. Programmatic
+    // scrollTop writes fire none of these, so our own corrections don't
+    // self-cancel.
+    const scroller = scrollerRef.current;
+    const scrollerEl =
+      scroller != null && scroller !== window && scroller instanceof HTMLElement
+        ? scroller
+        : null;
+    scrollerEl?.addEventListener('wheel', cancelOnUserScroll, { passive: true });
+    scrollerEl?.addEventListener('touchstart', cancelOnUserScroll, { passive: true });
+    scrollerEl?.addEventListener('keydown', cancelOnUserScroll);
+    const land = () => {
+      framesLeft -= 1;
+      if (userTookOver || framesLeft <= 0) return;
+      if (!seeded) {
+        // ONE virtuoso-level jump renders the tail items into the window.
+        // Never re-issue it per frame: repeated scrollToIndex on a list whose
+        // bubble heights are still being measured keeps virtuoso in its
+        // initial-location seek (zero rows, visibility:hidden) — the exact
+        // blank-transcript deadlock initialTopMostItemIndex causes.
+        seeded = true;
+        virtuosoRef.current?.scrollToIndex({
+          index: 'LAST',
+          align: 'end',
+          offset: BOTTOM_GAP_PX,
+          behavior: 'auto',
+        });
+        raf = requestAnimationFrame(land);
+        return;
+      }
+      // Correction frames: as measurements land and the total height grows,
+      // keep pinning the bottom with DIRECT scrollTop writes (an ordinary
+      // scroll to virtuoso, no seek mode). A zero gap does NOT end the phase —
+      // it is usually the not-yet-measured state, and the growth we exist to
+      // chase arrives after it.
+      const el = scrollerRef.current;
+      if (el != null && el !== window && el instanceof HTMLElement) {
+        const gap = el.scrollHeight - el.clientHeight - el.scrollTop;
+        if (gap > 4) {
+          el.scrollTop = el.scrollHeight - el.clientHeight;
+        }
+      }
+      raf = requestAnimationFrame(land);
+    };
+    raf = requestAnimationFrame(land);
+    return () => {
+      cancelAnimationFrame(raf);
+      scrollerEl?.removeEventListener('wheel', cancelOnUserScroll);
+      scrollerEl?.removeEventListener('touchstart', cancelOnUserScroll);
+      scrollerEl?.removeEventListener('keydown', cancelOnUserScroll);
+    };
   }, [messages.length]);
 
   // Force-scroll to bottom whenever the consumer bumps `scrollAnchorId`
@@ -400,16 +461,26 @@ export const MessageList = forwardRef<MessageListHandle, MessageListProps>(funct
       // 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.
+      // the cluster bottom-aligned. The mount-time imperative scroll
+      // already lands us at the bottom on open, which is what users
+      // actually want.
+      //
+      // No `initialTopMostItemIndex` — when the list mounts WITH
+      // history already present (a resumed engine / remounted chat),
+      // virtuoso enters its initial-location seek: it renders ZERO rows
+      // and keeps the item list `visibility: hidden` until the seek
+      // settles — and with dynamic unmeasured bubble heights that seek
+      // can never settle, leaving the whole transcript permanently
+      // blank (0 items, no error). The mount-time imperative
+      // `scrollToIndex('LAST')` effect below covers the land-at-bottom
+      // job for both mount paths (empty-then-fill AND mount-with-data),
+      // at worst costing one frame of top-anchored paint.
       //
       // 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}
       atBottomThreshold={atBottomThreshold}
       followOutput={(isAtBottom) => (isAtBottom ? 'auto' : false)}
       scrollerRef={(el) => {