Project-N-E-K-O
diff --git a/‎frontend/react-neko-chat/src/App.test.tsx‎
Lines changed: 30 additions & 955 deletions b/‎frontend/react-neko-chat/src/App.test.tsx‎
Lines changed: 30 additions & 955 deletions
diff --git a/‎frontend/react-neko-chat/src/App.tsx‎
Lines changed: 55 additions & 179 deletions b/‎frontend/react-neko-chat/src/App.tsx‎
Lines changed: 55 additions & 179 deletions
diff --git a/‎frontend/react-neko-chat/src/CompactExportHistoryPanel.test.tsx‎
Lines changed: 92 additions & 0 deletions b/‎frontend/react-neko-chat/src/CompactExportHistoryPanel.test.tsx‎
Lines changed: 92 additions & 0 deletions
@@ -62,6 +62,98 @@ describe('CompactExportHistoryPanel', () => {
     expect(container.querySelector('.compact-export-history-resize-bar.is-active')).not.toBeNull();
   });
 
+  it('flags the anchor as resizing so content height locks to max (no reflow on shrink)', () => {
+    const { container, rerender } = renderPanel({ previewOpen: false, visibilityState: 'open', historyResizeActive: false });
+    const anchor = container.querySelector('.compact-export-history-anchor');
+    expect(anchor?.getAttribute('data-compact-export-history-resizing')).toBe('false');
+    rerender(<CompactExportHistoryPanel {...createPanelProps({ previewOpen: false, visibilityState: 'open', historyResizeActive: true })} />);
+    expect(anchor?.getAttribute('data-compact-export-history-resizing')).toBe('true');
+  });
+
+  it('re-pins the history list to the bottom on geometry refresh only while shrinking and auto-following', () => {
+    // 方向化钉底：只有「缩小」（可视窗口高度变小）才强制把可视窗口锚回下端；「增高」方向交给浏览器
+    // 自然 clamp（每帧强写 scrollTop 会与正被揭出的上方新气泡重排打架→展开抖动）；非 auto-following 一律不动。
+    const scrollTopValues: number[] = [];
+    const scrollTopByElement = new WeakMap<HTMLElement, number>();
+    // 可控的可视窗口高度，模拟拖动 resize bar 时 clientHeight 的逐帧变化。
+    let mockClientHeight = 300;
+    const scrollHeightDescriptor = Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'scrollHeight');
+    const clientHeightDescriptor = Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'clientHeight');
+    const scrollTopDescriptor = Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'scrollTop');
+
+    Object.defineProperty(HTMLElement.prototype, 'scrollHeight', {
+      configurable: true,
+      // resizing 态内容锚定在 max，scrollHeight 在一次拖动里保持不变。
+      get() {
+        return this.classList.contains('compact-export-history-scroll') ? 640 : 0;
+      },
+    });
+    Object.defineProperty(HTMLElement.prototype, 'clientHeight', {
+      configurable: true,
+      get() {
+        return this.classList.contains('compact-export-history-scroll') ? mockClientHeight : 0;
+      },
+    });
+    Object.defineProperty(HTMLElement.prototype, 'scrollTop', {
+      configurable: true,
+      get() {
+        return scrollTopByElement.get(this) ?? 0;
+      },
+      set(value: number) {
+        scrollTopByElement.set(this, value);
+        if (this.classList.contains('compact-export-history-scroll')) {
+          scrollTopValues.push(value);
+        }
+      },
+    });
+
+    try {
+      // auto-following off：即便缩小也不该把视口从用户当前滚动位置拽走。
+      const { rerender } = renderPanel({ previewOpen: false, visibilityState: 'open', autoScrollToBottom: false });
+      scrollTopValues.length = 0;
+      mockClientHeight = 200; // 缩小
+      act(() => {
+        window.dispatchEvent(new CustomEvent('neko:compact-interaction-geometry-refresh'));
+      });
+      expect(scrollTopValues).not.toContain(440);
+
+      // auto-following on，但方向是「增高」：不强制钉底，交给浏览器自然 clamp（消除展开抖动）。
+      // 上一次 refresh 已把方向基线（lastGeometryClientHeight）更新到 200，这里从 200 → 360 是增高。
+      rerender(<CompactExportHistoryPanel {...createPanelProps({ previewOpen: false, visibilityState: 'open', autoScrollToBottom: true })} />);
+      scrollTopValues.length = 0;
+      mockClientHeight = 360; // 增高
+      act(() => {
+        window.dispatchEvent(new CustomEvent('neko:compact-interaction-geometry-refresh'));
+      });
+      expect(scrollTopValues).toHaveLength(0);
+
+      // auto-following on，方向是「缩小」：钉底到 scrollHeight - clientHeight = 640 - 200 = 440。
+      // 上一帧 refresh 已把基线更新到 360，这里 360 → 200 是缩小。
+      scrollTopValues.length = 0;
+      mockClientHeight = 200; // 缩小
+      act(() => {
+        window.dispatchEvent(new CustomEvent('neko:compact-interaction-geometry-refresh'));
+      });
+      expect(scrollTopValues).toContain(440);
+    } finally {
+      if (scrollHeightDescriptor) {
+        Object.defineProperty(HTMLElement.prototype, 'scrollHeight', scrollHeightDescriptor);
+      } else {
+        Reflect.deleteProperty(HTMLElement.prototype, 'scrollHeight');
+      }
+      if (clientHeightDescriptor) {
+        Object.defineProperty(HTMLElement.prototype, 'clientHeight', clientHeightDescriptor);
+      } else {
+        Reflect.deleteProperty(HTMLElement.prototype, 'clientHeight');
+      }
+      if (scrollTopDescriptor) {
+        Object.defineProperty(HTMLElement.prototype, 'scrollTop', scrollTopDescriptor);
+      } else {
+        Reflect.deleteProperty(HTMLElement.prototype, 'scrollTop');
+      }
+    }
+  });
+
   it('drops the history resize bar hit-region when a choice prompt sits above', () => {
     const { container } = renderPanel({ previewOpen: false, visibilityState: 'open', choiceLayerAbove: true });
     const bar = container.querySelector('.compact-export-history-resize-bar');