@linxin666/dsh-remote-web-ui 0.1.6 → 0.1.8

package/lib/types/mobile/views/ChatView.test.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 // @vitest-environment jsdom
 /** ChatView: collapsible message folds, toolbar chips, and the bottom sheets. */
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { afterAll, afterEach, beforeAll, beforeEach, describe, expect, it, vi } from 'vitest';
+import { act, cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { ChatView } from "./ChatView.js";
 // The api module is fully mocked; App.tsx's history wrapper is overridden to
 // feed fixed history pages, its pure helpers (errorText / formatTime) stay real.
@@ -213,3 +213,93 @@ describe('ChatView model sheet', () => {
         expect(await screen.findByText(/重启 dsh web/)).toBeTruthy();
     });
 });
+describe('ChatView scrolling', () => {
+    // Controllable scrollHeight + a write log for the chat-scroll element. The
+    // accessors live on Element.prototype, so patching them here lets every
+    // scrollToBottom assignment drive a deterministic assertion regardless of
+    // when the effect runs relative to mount.
+    let scrollHeightMock = 0;
+    let scrollWrites = [];
+    const origScrollHeight = Object.getOwnPropertyDescriptor(Element.prototype, 'scrollHeight');
+    const origScrollTop = Object.getOwnPropertyDescriptor(Element.prototype, 'scrollTop');
+    /** Minimal mux stand-in: captures the ChatView's frame listener for hand-off. */
+    class FakeMux {
+        listeners = new Set();
+        onFrame(listener) {
+            this.listeners.add(listener);
+            return () => { this.listeners.delete(listener); };
+        }
+        emit(frame) {
+            for (const listener of this.listeners)
+                listener(frame);
+        }
+    }
+    beforeAll(() => {
+        Object.defineProperty(Element.prototype, 'scrollHeight', {
+            configurable: true,
+            get() { return scrollHeightMock; },
+        });
+        Object.defineProperty(Element.prototype, 'scrollTop', {
+            configurable: true,
+            get() { const stored = this['__scrollTop']; return typeof stored === 'number' ? stored : 0; },
+            set(value) { scrollWrites.push(value); this['__scrollTop'] = value; },
+        });
+    });
+    afterAll(() => {
+        if (origScrollHeight)
+            Object.defineProperty(Element.prototype, 'scrollHeight', origScrollHeight);
+        if (origScrollTop)
+            Object.defineProperty(Element.prototype, 'scrollTop', origScrollTop);
+    });
+    beforeEach(() => { scrollHeightMock = 0; scrollWrites = []; });
+    /** A final assistant/message event (non-pending) appended live after the history turn. */
+    const liveFinalEvent = (seq) => makeEntry('assistant/message', {
+        turn: 1,
+        step: 0,
+        message: { id: 'a-2', role: 'assistant', content: [{ type: 'text', text: '实时新消息' }] },
+    }, seq);
+    it('positions to the latest message when a session is opened', async () => {
+        scrollHeightMock = 400;
+        loadHistoryMock.mockResolvedValue(historyPage(turnEvents()));
+        render(_jsx(ChatView, { session: session, onBack: () => { } }));
+        // The tail page renders, then the commit-time effect pins scrollTop to the tail.
+        expect(await screen.findByText('已完成修改')).toBeTruthy();
+        expect(scrollWrites.at(-1)).toBe(400);
+    });
+    it('auto-scrolls to the bottom when a new live message arrives', async () => {
+        scrollHeightMock = 400;
+        loadHistoryMock.mockResolvedValue(historyPage(turnEvents()));
+        const mux = new FakeMux();
+        render(_jsx(ChatView, { session: session, mux: mux, onBack: () => { } }));
+        await screen.findByText('已完成修改');
+        expect(scrollWrites.at(-1)).toBe(400);
+        // A real-time message grows content; the newly appended (non-pending) last
+        // message must still pull the view down to the new bottom.
+        scrollHeightMock = 800;
+        await act(async () => {
+            mux.emit({ type: 'session/event', sessionId: 's-1', event: liveFinalEvent(6).event });
+        });
+        expect(await screen.findByText('实时新消息')).toBeTruthy();
+        expect(scrollWrites.at(-1)).toBe(800);
+    });
+    it('keeps the current scroll position when older messages are loaded', async () => {
+        scrollHeightMock = 400;
+        loadHistoryMock.mockResolvedValue(historyPage(turnEvents(), { hasMore: true }));
+        const mux = new FakeMux();
+        render(_jsx(ChatView, { session: session, mux: mux, onBack: () => { } }));
+        await screen.findByText('已完成修改');
+        // Move to the bottom (streaming), as a stable baseline to preserve.
+        scrollHeightMock = 800;
+        await act(async () => {
+            mux.emit({ type: 'session/event', sessionId: 's-1', event: liveFinalEvent(6).event });
+        });
+        await screen.findByText('实时新消息');
+        const writesBefore = scrollWrites.length;
+        expect(scrollWrites.at(-1)).toBe(800);
+        // Prepend an older page; the last message is untouched, so no re-scroll fires.
+        scrollHeightMock = 900;
+        loadHistoryMock.mockResolvedValueOnce(historyPage(turnEvents(), { hasMore: false }));
+        fireEvent.click(screen.getByRole('button', { name: /加载更早的消息/ }));
+        await waitFor(() => { expect(scrollWrites.length).toBe(writesBefore); });
+    });
+});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@linxin666/dsh-remote-web-ui",
   "description": "Mobile remote control for the dsh web GUI: scan-to-pair QR entry beside the settings button, one-time pairing tokens, live device status, and revocable mobile sessions",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "type": "module",
   "engines": {
     "node": "^22.19.0 || >=24.0.0"

package/src/mobile/mux.test.ts

@@ -0,0 +1,172 @@
+/** mux: live-event client, SSE delivery + stall-driven polling fallback. */
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { MuxClient, type EventSourceLike } from './mux.ts'
+import type { HistoryPage } from './api.ts'
+
+/** A recorded fake EventSource (delivery driven by the test). */
+interface FakeSource extends EventSourceLike {
+  url: string
+  closed: boolean
+  close: () => void
+}
+
+/** Create an EventSource factory that records every opened source. */
+function makeSources(): { factory: (url: string) => EventSourceLike; sources: FakeSource[] } {
+  const sources: FakeSource[] = []
+  const factory = (url: string): EventSourceLike => {
+    const source: FakeSource = {
+      url,
+      onmessage: null,
+      onerror: null,
+      closed: false,
+      close: () => { source.closed = true },
+    }
+    sources.push(source)
+    return source
+  }
+  return { factory, sources }
+}
+
+/** One history page whose events carry sequential ids. */
+function pageOf(seqs: readonly number[]): HistoryPage {
+  return {
+    hasMore: false,
+    events: seqs.map(seq => ({
+      event: { type: 'user/message', seq, time: seq * 1_000, data: { text: String(seq) } },
+    })),
+  } as unknown as HistoryPage
+}
+
+/** A server-request envelope carrying one mux frame (the SSE wire shape). */
+function envelopeWith(payload: unknown): string {
+  return JSON.stringify({ type: 'server-request', rpcId: 'r1', method: 'events.mux', payload })
+}
+
+/** Options common to every test: tight clocks, injected data source. */
+function baseOptions(pollLatest: (sessionId: string) => Promise<HistoryPage>, factory: (url: string) => EventSourceLike) {
+  return { sourceFactory: factory, pollLatest, stallThresholdMs: 800, pollIntervalMs: 400 }
+}
+
+describe('MuxClient polling fallback', () => {
+  beforeEach(() => {
+    vi.useFakeTimers()
+  })
+
+  it('does not poll while the SSE channel is fresh', async () => {
+    const { factory } = makeSources()
+    const pollLatest = vi.fn(async (_sessionId: string) => pageOf([0]))
+    const client = new MuxClient('/m/api/events.mux', baseOptions(pollLatest, factory))
+    const frames: unknown[] = []
+    client.onFrame(frame => { frames.push(frame) })
+    client.start()
+    client.observe('s1')
+    await vi.advanceTimersByTimeAsync(400) // well under the stall threshold
+    expect(pollLatest).not.toHaveBeenCalled()
+    expect(frames).toHaveLength(0)
+    client.stop()
+  })
+
+  it('starts polling after silence and emits appended events as session/event frames', async () => {
+    const { factory } = makeSources()
+    const pages = [pageOf([0]), pageOf([0, 1])]
+    const pollLatest = vi.fn(async (_sessionId: string) => pages.shift() ?? pageOf([]))
+    const client = new MuxClient('/m/api/events.mux', baseOptions(pollLatest, factory))
+    const frames: Array<{ type: string; sessionId: string; event?: { seq: number } }> = []
+    client.onFrame(frame => { frames.push(frame as never) })
+    client.start()
+    client.observe('s1')
+
+    // Nothing live within a poll interval until the stall window passes.
+    await vi.advanceTimersByTimeAsync(400)
+    expect(pollLatest).not.toHaveBeenCalled()
+
+    // Past the stall threshold the first poll runs and emits seq 0.
+    await vi.advanceTimersByTimeAsync(700) // 1100ms total -> first stall-checker tick
+    expect(pollLatest).toHaveBeenCalledWith('s1')
+    expect(frames).toHaveLength(1)
+    expect(frames[0]).toMatchObject({ type: 'session/event', sessionId: 's1' })
+    expect(frames[0]?.event).toMatchObject({ seq: 0 })
+
+    // The next poll emits only the appended event (seq 1), not seq 0 again.
+    await vi.advanceTimersByTimeAsync(400)
+    expect(frames).toHaveLength(2)
+    expect(frames[1]?.event).toMatchObject({ seq: 1 })
+    client.stop()
+  })
+
+  it('keeps the watermark so a repeated page never re-emits old events', async () => {
+    const { factory } = makeSources()
+    // Two calls return the same page: the second must emit nothing.
+    const pollLatest = vi.fn(async (_sessionId: string) => pageOf([0, 1, 2]))
+    const client = new MuxClient('/m/api/events.mux', baseOptions(pollLatest, factory))
+    const frames: Array<{ type: string; event?: { seq: number } }> = []
+    client.onFrame(frame => { frames.push(frame as never) })
+    client.start()
+    client.observe('s1')
+
+    await vi.advanceTimersByTimeAsync(1100) // first poll -> 3 events
+    expect(frames).toHaveLength(3)
+
+    await vi.advanceTimersByTimeAsync(400) // second poll -> same page, nothing new
+    expect(frames).toHaveLength(3)
+    client.stop()
+  })
+
+  it('stops polling when observe is cleared and keeps it stopped', async () => {
+    const { factory } = makeSources()
+    const pollLatest = vi.fn(async (_sessionId: string) => pageOf([0]))
+    const client = new MuxClient('/m/api/events.mux', baseOptions(pollLatest, factory))
+    client.start()
+    client.observe('s1')
+
+    await vi.advanceTimersByTimeAsync(1100)
+    expect(pollLatest).toHaveBeenCalled()
+
+    client.observe(undefined)
+    const callsAfterClear = pollLatest.mock.calls.length
+    await vi.advanceTimersByTimeAsync(2000)
+    expect(pollLatest.mock.calls.length).toBe(callsAfterClear)
+    client.stop()
+  })
+
+  it('stops polling on stop(), closing any live source', async () => {
+    const { factory, sources } = makeSources()
+    const pollLatest = vi.fn(async (_sessionId: string) => pageOf([0]))
+    const client = new MuxClient('/m/api/events.mux', baseOptions(pollLatest, factory))
+    client.start()
+    client.observe('s1')
+
+    await vi.advanceTimersByTimeAsync(1100)
+    expect(pollLatest).toHaveBeenCalled()
+
+    client.stop()
+    const callsAfterStop = pollLatest.mock.calls.length
+    await vi.advanceTimersByTimeAsync(2000)
+    expect(pollLatest.mock.calls.length).toBe(callsAfterStop)
+    expect(sources[0]?.closed).toBe(true)
+  })
+
+  it('returns to SSE when a frame arrives, dropping the fallback poller', async () => {
+    const { factory, sources } = makeSources()
+    const pollLatest = vi.fn(async (_sessionId: string) => pageOf([0]))
+    const client = new MuxClient('/m/api/events.mux', baseOptions(pollLatest, factory))
+    const frames: unknown[] = []
+    client.onFrame(frame => { frames.push(frame) })
+    client.start()
+    client.observe('s1')
+
+    // Stall into polling.
+    await vi.advanceTimersByTimeAsync(1100)
+    expect(pollLatest).toHaveBeenCalledTimes(1)
+
+    // A live mux frame proves SSE delivers again -> fallback stops.
+    sources[0]?.onmessage?.({ data: envelopeWith({ type: 'session/subscribed', sessionId: 's1', lastSeq: 4 }) })
+
+    await vi.advanceTimersByTimeAsync(2000)
+    expect(pollLatest.mock.calls.length).toBe(1) // polling stopped after the live frame
+    const live = frames.filter(frame => (frame as { type?: string })?.type === 'session/subscribed')
+    expect(live).toHaveLength(1)
+    expect(live[0]).toMatchObject({ type: 'session/subscribed', sessionId: 's1' })
+    client.stop()
+  })
+})

package/src/mobile/mux.ts

@@ -7,17 +7,44 @@
  * opens — no subscription handshake is needed. Frames arrive as
  * server-request envelopes whose payload is the mux frame; unknown frame
  * types are dropped so a newer host never breaks this client.
- * EventSource reconnects automatically.
+ *
+ * EventSource reconnects automatically — but only over a tunnel that
+ * actually forwards frames. Public quick tunnels (Cloudflare quick tunnel /
+ * Tailscale Serve) do not transparently pass Server-Sent Events: ordinary
+ * HTTP works, yet the SSE connection stays open or reconnects with zero
+ * bytes, so no live frame ever arrives. That is a transport-layer limit of
+ * the tunnel, not something the host can fix. This client therefore
+ * degrades gracefully: once the SSE channel has silently stalled (no frame
+ * for {@link MuxClientOptions.stallThresholdMs}, or the EventSource reports
+ * an error), it starts polling the open session's history over plain HTTP
+ * (the `/m/api/session.history` RPC — unaffected by the SSE limitation),
+ * and re-emits freshly appended events as `session/event` frames through
+ * the same subscriber contract, so listeners (and the message fold) behave
+ * exactly as if the frames had arrived over SSE. When the SSE channel
+ * delivers again, fallback polling stops and the live stream takes over.
  */
 
 import type { MuxFrame } from '@deepseek-ai/dsh-host-apiproxy/api/events'
 import { muxFrameSchema } from '@deepseek-ai/dsh-host-apiproxy/api/events.schema'
 import { serverRequestSchema } from '@deepseek-ai/dsh-host-apiproxy/api/rpc.schema'
+import { history as fetchHistory, type HistoryPage } from './api.ts'
 
 /** Injectable seams for tests. */
 export interface MuxClientOptions {
   /** EventSource factory (defaults to the browser EventSource). */
   sourceFactory?: (url: string) => EventSourceLike
+  /**
+   * Fetch one history page (tail) for a session — the polling fallback's
+   * data source. Defaults to the mobile `session.history` RPC, which rides
+   * the ordinary HTTP channel (unaffected by SSE-impairing tunnels).
+   */
+  pollLatest?: (sessionId: string) => Promise<HistoryPage>
+  /** Poll cadence while SSE is stalled (default 3000 ms). */
+  pollIntervalMs?: number
+  /** How long SSE must go without a frame before fallback kicks in (default 12000 ms). */
+  stallThresholdMs?: number
+  /** Clock seam for tests (defaults to Date.now). */
+  now?: () => number
 }
 
 /** The EventSource subset this client uses (browser EventSource fits). */
@@ -34,18 +61,47 @@ function browserSource(url: string): EventSourceLike {
   return new EventSource(url) as unknown as EventSourceLike
 }
 
+/** The `session/event` arm of the mux frame union. */
+type SessionEventFrame = Extract<MuxFrame, { type: 'session/event' }>
+
+const DEFAULT_POLL_INTERVAL_MS = 3000
+const DEFAULT_STALL_THRESHOLD_MS = 12000
+/** Poll window: enough recent events to cover a few seconds of agent output. */
+const DEFAULT_POLL_PAGE_SIZE = 50
+
 /**
  * Keep one SSE subscription open, fanning validated frames out to
  * subscribers. EventSource owns reconnection (with its own backoff); this
- * class only manages the subscription lifecycle.
+ * class only manages the subscription lifecycle, plus a polling fallback
+ * that keeps the open session live when the SSE channel cannot deliver.
  */
 export class MuxClient {
   private readonly sourceFactory: (url: string) => EventSourceLike
+  private readonly pollLatest: (sessionId: string) => Promise<HistoryPage>
+  private readonly pollIntervalMs: number
+  private readonly stallThresholdMs: number
+  private readonly now: () => number
   private readonly listeners = new Set<(frame: MuxFrame) => void>()
   private source: EventSourceLike | undefined
   private stopped = false
   private readonly url: string
 
+  /** The session to keep live via fallback polling (undefined = none). */
+  private observeSessionId: string | undefined
+  /** Last epoch ms the SSE channel produced a frame (or the stream opened). */
+  private lastDataAt = 0
+  /**
+   * Whether the SSE channel has ever delivered a frame in this stream (a
+   * delivered frame proves the tunnel forwards SSE; silence alone then means
+   * the agent idle, not a dead channel — only an onerror re-arms fallback).
+   */
+  private sseAlive = false
+  /** Per-session highest event seq already emitted, for poll dedup. */
+  private readonly pollWatermark = new Map<string, number>()
+  private stallTimer: ReturnType<typeof setInterval> | undefined
+  private pollTimer: ReturnType<typeof setInterval> | undefined
+  private polling = false
+
   /**
    * @param url - the mobile events endpoint (browser-relative).
    * @param options - seams.
@@ -53,19 +109,27 @@ export class MuxClient {
   constructor(url = '/m/api/events.mux', options: MuxClientOptions = {}) {
     this.url = url
     this.sourceFactory = options.sourceFactory ?? browserSource
+    this.pollLatest = options.pollLatest ?? ((sessionId) => fetchHistory(sessionId, undefined, DEFAULT_POLL_PAGE_SIZE))
+    this.pollIntervalMs = options.pollIntervalMs ?? DEFAULT_POLL_INTERVAL_MS
+    this.stallThresholdMs = options.stallThresholdMs ?? DEFAULT_STALL_THRESHOLD_MS
+    this.now = options.now ?? (() => Date.now())
   }
 
   /** Open the stream (idempotent; EventSource reconnects until {@link stop}). */
   start(): void {
     this.stopped = false
-    if (this.source !== undefined) return
-    this.connect()
+    this.lastDataAt = this.now()
+    if (this.source === undefined) this.connect()
+    this.startStallChecker()
   }
 
   /** Close for good. */
   stop(): void {
     this.stopped = true
+    this.stopStallChecker()
+    this.stopPolling()
     this.closeSource()
+    this.observeSessionId = undefined
   }
 
   /** Subscribe to validated frames; returns an unsubscribe function. */
@@ -74,7 +138,26 @@ export class MuxClient {
     return () => { this.listeners.delete(listener) }
   }
 
+  /**
+   * Point the fallback at one open session (or `undefined` to stop it).
+   * While the SSE channel is stalled this client polls that session's
+   * history and re-emits new events as `session/event` frames.
+   */
+  observe(sessionId: string | undefined): void {
+    this.observeSessionId = sessionId
+    if (sessionId === undefined) {
+      this.stopPolling()
+      return
+    }
+    // If SSE is already stalled for this session, start patching right away.
+    if (!this.polling && !this.stopped && !this.sseAlive && (this.now() - this.lastDataAt) > this.stallThresholdMs) {
+      this.startPolling()
+    }
+  }
+
   private connect(): void {
+    // A fresh stream starts unknown; only a delivered frame proves it works.
+    this.sseAlive = false
     const source = this.sourceFactory(this.url)
     this.source = source
     source.onmessage = (event) => {
@@ -82,8 +165,77 @@ export class MuxClient {
     }
     source.onerror = () => {
       // EventSource reconnects by itself; when we are closing, detach first
-      // so the native reconnect cannot outlive stop().
-      if (this.stopped && this.source === source) this.closeSource()
+      // so the native reconnect cannot outlive stop(). Otherwise an error is
+      // a strong signal the transport is not delivering — degrade to polling.
+      if (this.stopped && this.source === source) {
+        this.closeSource()
+        return
+      }
+      this.sseAlive = false
+      if (this.observeSessionId !== undefined) this.startPolling()
+    }
+  }
+
+  private startStallChecker(): void {
+    this.stopStallChecker()
+    this.stallTimer = setInterval(() => {
+      if (this.stopped) return
+      if (this.observeSessionId === undefined) return
+      if (this.polling) return
+      // A live SSE channel only goes silent while the agent idles; never
+      // poll against it. Fallback arms again only via onerror or a stream
+      // that has never delivered.
+      if (this.sseAlive) return
+      if ((this.now() - this.lastDataAt) > this.stallThresholdMs) this.startPolling()
+    }, 1000)
+  }
+
+  private stopStallChecker(): void {
+    if (this.stallTimer !== undefined) {
+      clearInterval(this.stallTimer)
+      this.stallTimer = undefined
+    }
+  }
+
+  private startPolling(): void {
+    if (this.polling || this.stopped) return
+    this.polling = true
+    void this.pollTick()
+    this.pollTimer = setInterval(() => { void this.pollTick() }, this.pollIntervalMs)
+  }
+
+  private stopPolling(): void {
+    this.polling = false
+    if (this.pollTimer !== undefined) {
+      clearInterval(this.pollTimer)
+      this.pollTimer = undefined
+    }
+  }
+
+  /**
+   * Fetch the latest history page for the observed session and re-emit any
+   * event above the per-session watermark as a `session/event` frame.
+   * Idempotent by seq: listeners (and the fold) never see a duplicate.
+   */
+  private async pollTick(): Promise<void> {
+    const sessionId = this.observeSessionId
+    if (sessionId === undefined) {
+      this.stopPolling()
+      return
+    }
+    try {
+      const page = await this.pollLatest(sessionId)
+      let maxSeq = this.pollWatermark.get(sessionId) ?? -1
+      for (const entry of page.events) {
+        const event = entry.event
+        const seq = typeof event?.seq === 'number' ? event.seq : -1
+        if (seq <= maxSeq) continue
+        maxSeq = seq
+        this.emit({ type: 'session/event', sessionId: sessionId as SessionEventFrame['sessionId'], event } as SessionEventFrame)
+      }
+      this.pollWatermark.set(sessionId, maxSeq)
+    } catch {
+      // Transient (network, pairing, history paging); the next tick retries.
     }
   }
 
@@ -101,9 +253,19 @@ export class MuxClient {
     if (!envelope.success) return
     const frame = muxFrameSchema.safeParse(envelope.data.payload)
     if (!frame.success) return
+    // A delivered frame proves the SSE channel is live (the tunnel forwards
+    // it) and delivers again — drop any fallback polling so the live stream
+    // takes over without double delivery.
+    this.sseAlive = true
+    this.lastDataAt = this.now()
+    if (this.polling) this.stopPolling()
+    this.emit(frame.data)
+  }
+
+  private emit(frame: MuxFrame): void {
     for (const listener of this.listeners) {
       try {
-        listener(frame.data)
+        listener(frame)
       } catch {
         // A throwing subscriber must not break the emit loop.
       }
@@ -123,4 +285,4 @@ export class MuxClient {
       }
     }
   }
-}
+}

package/src/mobile/views/App.tsx

@@ -94,6 +94,13 @@ export function App() {
     return () => { mux.stop() }
   }, [])
 
+  // Keep the live-event client pointed at the session currently on screen so
+  // its polling fallback can keep that chat fresh over SSE-impairing tunnels
+  // (quick tunnel / Tailscale Serve do not forward Server-Sent Events).
+  useEffect(() => {
+    muxRef.current?.observe(route.kind === 'chat' ? route.session.sessionId : undefined)
+  }, [route])
+
   const back = useCallback(() => {
     setRoute(previous => {
       if (previous.kind === 'chat') return { kind: 'sessions', workspace: previous.workspace }

package/src/mobile/views/ChatView.test.tsx

@@ -1,7 +1,7 @@
 // @vitest-environment jsdom
 /** ChatView: collapsible message folds, toolbar chips, and the bottom sheets. */
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
-import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { afterAll, afterEach, beforeAll, beforeEach, describe, expect, it, vi } from 'vitest'
+import { act, cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react'
 import type { SessionModels } from '@deepseek-ai/dsh-host-apiproxy/api/sessions'
 import { ChatView } from './ChatView.tsx'
 import { type SessionView } from './App.tsx'
@@ -230,7 +230,6 @@ describe('ChatView model sheet', () => {
       expect(selectModelMock).toHaveBeenCalledWith('s-1', { provider: 'fx', model: 'fx-2', reasoningEffort: 'high' })
     })
   })
-
   it('explains a transport 403 on the model channel as a stale host', async () => {
     loadHistoryMock.mockResolvedValue(historyPage(turnEvents()))
     modelsMock.mockRejectedValue(new Error('HTTP 403'))
@@ -241,3 +240,99 @@ describe('ChatView model sheet', () => {
     expect(await screen.findByText(/重启 dsh web/)).toBeTruthy()
   })
 })
+
+describe('ChatView scrolling', () => {
+  // Controllable scrollHeight + a write log for the chat-scroll element. The
+  // accessors live on Element.prototype, so patching them here lets every
+  // scrollToBottom assignment drive a deterministic assertion regardless of
+  // when the effect runs relative to mount.
+  let scrollHeightMock = 0
+  let scrollWrites: number[] = []
+
+  const origScrollHeight = Object.getOwnPropertyDescriptor(Element.prototype, 'scrollHeight')
+  const origScrollTop = Object.getOwnPropertyDescriptor(Element.prototype, 'scrollTop')
+
+  /** Minimal mux stand-in: captures the ChatView's frame listener for hand-off. */
+  class FakeMux {
+    listeners = new Set<(frame: unknown) => void>()
+    onFrame(listener: (frame: unknown) => void): () => void {
+      this.listeners.add(listener)
+      return () => { this.listeners.delete(listener) }
+    }
+    emit(frame: unknown): void {
+      for (const listener of this.listeners) listener(frame)
+    }
+  }
+
+  beforeAll(() => {
+    Object.defineProperty(Element.prototype, 'scrollHeight', {
+      configurable: true,
+      get() { return scrollHeightMock },
+    })
+    Object.defineProperty(Element.prototype, 'scrollTop', {
+      configurable: true,
+      get(this: Element) { const stored = (this as unknown as Record<string, unknown>)['__scrollTop']; return typeof stored === 'number' ? stored : 0 },
+      set(this: Element, value: number) { scrollWrites.push(value); (this as unknown as Record<string, unknown>)['__scrollTop'] = value },
+    })
+  })
+  afterAll(() => {
+    if (origScrollHeight) Object.defineProperty(Element.prototype, 'scrollHeight', origScrollHeight)
+    if (origScrollTop) Object.defineProperty(Element.prototype, 'scrollTop', origScrollTop)
+  })
+
+  beforeEach(() => { scrollHeightMock = 0; scrollWrites = [] })
+
+  /** A final assistant/message event (non-pending) appended live after the history turn. */
+  const liveFinalEvent = (seq: number) => makeEntry('assistant/message', {
+    turn: 1,
+    step: 0,
+    message: { id: 'a-2', role: 'assistant', content: [{ type: 'text', text: '实时新消息' }] },
+  }, seq)
+
+  it('positions to the latest message when a session is opened', async () => {
+    scrollHeightMock = 400
+    loadHistoryMock.mockResolvedValue(historyPage(turnEvents()))
+    render(<ChatView session={session} onBack={() => {}} />)
+    // The tail page renders, then the commit-time effect pins scrollTop to the tail.
+    expect(await screen.findByText('已完成修改')).toBeTruthy()
+    expect(scrollWrites.at(-1)).toBe(400)
+  })
+
+  it('auto-scrolls to the bottom when a new live message arrives', async () => {
+    scrollHeightMock = 400
+    loadHistoryMock.mockResolvedValue(historyPage(turnEvents()))
+    const mux = new FakeMux()
+    render(<ChatView session={session} mux={mux as never} onBack={() => {}} />)
+    await screen.findByText('已完成修改')
+    expect(scrollWrites.at(-1)).toBe(400)
+    // A real-time message grows content; the newly appended (non-pending) last
+    // message must still pull the view down to the new bottom.
+    scrollHeightMock = 800
+    await act(async () => {
+      mux.emit({ type: 'session/event', sessionId: 's-1', event: liveFinalEvent(6).event })
+    })
+    expect(await screen.findByText('实时新消息')).toBeTruthy()
+    expect(scrollWrites.at(-1)).toBe(800)
+  })
+
+  it('keeps the current scroll position when older messages are loaded', async () => {
+    scrollHeightMock = 400
+    loadHistoryMock.mockResolvedValue(historyPage(turnEvents(), { hasMore: true }))
+    const mux = new FakeMux()
+    render(<ChatView session={session} mux={mux as never} onBack={() => {}} />)
+    await screen.findByText('已完成修改')
+    // Move to the bottom (streaming), as a stable baseline to preserve.
+    scrollHeightMock = 800
+    await act(async () => {
+      mux.emit({ type: 'session/event', sessionId: 's-1', event: liveFinalEvent(6).event })
+    })
+    await screen.findByText('实时新消息')
+    const writesBefore = scrollWrites.length
+    expect(scrollWrites.at(-1)).toBe(800)
+    // Prepend an older page; the last message is untouched, so no re-scroll fires.
+    scrollHeightMock = 900
+    loadHistoryMock.mockResolvedValueOnce(historyPage(turnEvents(), { hasMore: false }))
+    fireEvent.click(screen.getByRole('button', { name: /加载更早的消息/ }))
+    await waitFor(() => { expect(scrollWrites.length).toBe(writesBefore) })
+  })
+})