@linxin666/dsh-remote-web-ui 0.1.12 → 0.1.13

package/src/client/update-api.ts

@@ -6,14 +6,34 @@
 
 import type { UpdateRunResult, UpdateStatus } from '../update.ts'
 
+/**
+ * Error thrown when the update status probe fails: carries the HTTP status
+ * so the panel can tell "the update route is not mounted" (404 — the host
+ * process runs an older plugin build) apart from real network failures.
+ */
+export class UpdateStatusError extends Error {
+  /** HTTP status of the failed response (0 when the fetch never returned). */
+  readonly status: number
+  constructor(status: number) {
+    super('update status unavailable (HTTP ' + String(status) + ')')
+    this.status = status
+  }
+}
+
 /**
  * Probe the update status: install mode, owning profile, and the
  * current-vs-latest comparison for every family package.
  * @returns the status snapshot.
  */
 export async function fetchUpdateStatus(): Promise<UpdateStatus> {
-  const response = await fetch('/api/update/status')
-  if (!response.ok) throw new Error('update status unavailable')
+  let response: Response
+  try {
+    response = await fetch('/api/update/status')
+  } catch {
+    // Network-level failure: nothing came back at all.
+    throw new UpdateStatusError(0)
+  }
+  if (!response.ok) throw new UpdateStatusError(response.status)
   return await response.json() as UpdateStatus
 }
 

package/src/index.ts

@@ -96,6 +96,13 @@ export interface Config {
    * tunnel setup. The manual `publicBaseUrl` is ignored while this is on.
    */
   autoTunnel?: boolean
+  /**
+   * Mobile composer behavior: when true (default), a plain Enter in the
+   * phone chat textarea sends the prompt and Shift+Enter inserts a newline.
+   * When false, plain Enter inserts a newline and only the send button
+   * sends (Shift+Enter keeps inserting a newline).
+   */
+  mobileEnterToSend?: boolean
   /** Master switch for the plugin (browser half + host pairing surfaces). */
   enabled?: boolean
 }
@@ -108,6 +115,7 @@ export const Config: z<Config> = z.object({
   requirePairingForLan: z.boolean().default(true),
   publicBaseUrl: z.string(),
   autoTunnel: z.boolean().default(false),
+  mobileEnterToSend: z.boolean().default(true),
   enabled: z.boolean().default(true),
 })
 
@@ -130,6 +138,7 @@ const DEFAULTS: ResolvedConfig = {
   requirePairingForLan: true,
   publicBaseUrl: undefined,
   autoTunnel: false,
+  mobileEnterToSend: true,
   enabled: true,
 }
 
@@ -147,6 +156,7 @@ export function apply(ctx: Context, config?: Config): void {
     requirePairingForLan: config?.requirePairingForLan ?? DEFAULTS.requirePairingForLan,
     publicBaseUrl: config?.publicBaseUrl,
     autoTunnel: config?.autoTunnel ?? DEFAULTS.autoTunnel,
+    mobileEnterToSend: config?.mobileEnterToSend ?? DEFAULTS.mobileEnterToSend,
     enabled: config?.enabled ?? DEFAULTS.enabled,
   }
   // The live source the pairing service and the gate read: the settings
@@ -163,6 +173,7 @@ export function apply(ctx: Context, config?: Config): void {
       requirePairingForLan: value.requirePairingForLan ?? DEFAULTS.requirePairingForLan,
       publicBaseUrl: value.publicBaseUrl,
       autoTunnel: value.autoTunnel ?? DEFAULTS.autoTunnel,
+      mobileEnterToSend: value.mobileEnterToSend ?? DEFAULTS.mobileEnterToSend,
       enabled: value.enabled ?? DEFAULTS.enabled,
     }
   }
@@ -267,7 +278,9 @@ export function apply(ctx: Context, config?: Config): void {
   const routes = [
     ...makeRoutes({ service, lanAddresses }),
     ...makeMobileRoutes(),
-    ...(apiProxy !== undefined ? makeMobileApiRoutes({ service, apiProxy }) : []),
+    ...(apiProxy !== undefined
+      ? makeMobileApiRoutes({ service, apiProxy, mobileEnterToSend: () => resolve().mobileEnterToSend })
+      : []),
     ...updateRoutes,
   ]
   const gate = makeGateListener(service, () => resolve().requirePairingForLan, () => resolve().enabled)

package/src/mobile/api.ts

@@ -35,12 +35,23 @@ export interface HistoryPage {
   projections?: SessionProjectionsBlock
 }
 
+/** Read-only display preferences the plugin answers locally on `/m/api`. */
+export interface MobilePreferences {
+  /** Plain Enter sends the drafted prompt (false: Enter inserts a newline). */
+  mobileEnterToSend: boolean
+}
+
 /** The workspace roster (session ids come back per workspace). */
 export async function listWorkspaces(): Promise<WorkspaceView[]> {
   const { items } = await callUnary<{ items: WorkspaceView[] }>('workspace.list', {})
   return items
 }
 
+/** Read-only mobile display preferences (answered by the plugin, not the host proxy). */
+export async function fetchMobilePreferences(): Promise<MobilePreferences> {
+  return await callUnary<MobilePreferences>('mobile.preferences', {})
+}
+
 /** One session.list page; omit the cursor for the first page. */
 export async function listSessions(cursor?: string): Promise<SessionPage> {
   return await callUnary<SessionPage>('session.list', cursor === undefined ? {} : { cursor })
@@ -56,17 +67,18 @@ export async function createSession(
   return await callUnary<CreatedSession>('session.create', options)
 }
 
-/** One history window; omit beforeSeq for the tail page. */
+/** One history window; omit beforeSeq for the tail page, pass a signal to abort. */
 export async function history(
   sessionId: string,
   beforeSeq?: number,
   maxMessages = 30,
+  signal?: AbortSignal,
 ): Promise<HistoryPage> {
   return await callUnary<HistoryPage>('session.history', {
     sessionId,
     maxMessages,
     ...(beforeSeq !== undefined ? { beforeSeq } : {}),
-  })
+  }, signal)
 }
 
 /** Send one text prompt (queued: the agent picks it up in order). */

package/src/mobile/mobile-styles.ts

@@ -765,6 +765,9 @@ body {
   min-width: 0;
   min-height: 40px;
   max-height: 120px;
+  /* Grow with the content (still bounded by min/max-height); browsers
+     without field-sizing support ignore this line and keep the old size. */
+  field-sizing: content;
   padding: 9px 12px;
   border: 1px solid var(--m-border);
   border-radius: 10px;

package/src/mobile/views/App.tsx

@@ -42,6 +42,12 @@ export interface RenderMessage {
   toolSummary?: string
 }
 
+/** Read the optional workspace target carried from the pairing QR flow. */
+export function mobileWorkspaceTarget(search: string): string | undefined {
+  const value = new URLSearchParams(search).get('workspace')
+  return value === null || value === '' ? undefined : value
+}
+
 /** Map a list row to the surface model; the title comes from projections when present. */
 export function toSessionView(item: {
   sessionId: string
@@ -83,6 +89,9 @@ export function formatTime(epochMs: number): string {
  */
 export function App() {
   const [route, setRoute] = useState<Route>({ kind: 'workspaces' })
+  const [initialWorkspaceId, setInitialWorkspaceId] = useState<string | undefined>(
+    () => mobileWorkspaceTarget(window.location.search),
+  )
   const muxRef = useRef<MuxClient | undefined>(undefined)
 
   // The mux stream lives for the page lifetime: session events keep the
@@ -113,10 +122,20 @@ export function App() {
     setRoute({ kind: 'chat', session, workspace })
   }, [])
 
+  const openWorkspace = useCallback((workspace: WorkspaceRow) => {
+    if (initialWorkspaceId !== undefined) {
+      const url = new URL(window.location.href)
+      url.searchParams.delete('workspace')
+      window.history.replaceState(null, '', `${url.pathname}${url.search}${url.hash}`)
+      setInitialWorkspaceId(undefined)
+    }
+    setRoute({ kind: 'sessions', workspace })
+  }, [initialWorkspaceId])
+
   return (
     <div className="mobile">
       {route.kind === 'workspaces'
-        ? <WorkspaceRoster onPick={(workspace) => { setRoute({ kind: 'sessions', workspace }) }} />
+        ? <WorkspaceRoster initialWorkspaceId={initialWorkspaceId} onPick={openWorkspace} />
         : route.kind === 'sessions'
           ? (
             <SessionListView
@@ -152,8 +171,8 @@ export function staleHostHint(message: string): string | undefined {
 }
 
 /** Fetch one history page (tail by default) — thin wrapper so views share the call shape. */
-export function loadHistory(sessionId: string, beforeSeq?: number) {
-  return fetchHistory(sessionId, beforeSeq)
+export function loadHistory(sessionId: string, beforeSeq?: number, signal?: AbortSignal) {
+  return fetchHistory(sessionId, beforeSeq, undefined, signal)
 }
 
 export { listSessions, listWorkspaces, prompt }

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

@@ -3,7 +3,7 @@
 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 { ChatView, MAX_TAIL_BUFFER_EVENTS } from './ChatView.tsx'
 import { type SessionView } from './App.tsx'
 import type { HistoryPage } from '../api.ts'
 import type { WireEvent } from '../messages.ts'
@@ -11,6 +11,7 @@ import type { WireEvent } from '../messages.ts'
 // 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.
 vi.mock('../api.ts', () => ({
+  fetchMobilePreferences: vi.fn(),
   models: vi.fn(),
   selectModel: vi.fn(),
   sendCommand: vi.fn(),
@@ -23,8 +24,8 @@ vi.mock('./App.tsx', async importOriginal => {
     prompt: vi.fn(async () => {}),
   }
 })
-import { models, selectModel, sendCommand } from '../api.ts'
-import { loadHistory } from './App.tsx'
+import { fetchMobilePreferences, models, selectModel, sendCommand } from '../api.ts'
+import { loadHistory, prompt } from './App.tsx'
 
 const session: SessionView = {
   sessionId: 's-1',
@@ -67,12 +68,16 @@ function turnEvents(): Array<{ event: WireEvent }> {
   ]
 }
 
+const fetchMobilePreferencesMock = vi.mocked(fetchMobilePreferences)
 const modelsMock = vi.mocked(models)
 const selectModelMock = vi.mocked(selectModel)
 const sendCommandMock = vi.mocked(sendCommand)
 const loadHistoryMock = vi.mocked(loadHistory)
+const promptMock = vi.mocked(prompt)
 
 beforeEach(() => {
+  fetchMobilePreferencesMock.mockResolvedValue({ mobileEnterToSend: true })
+  promptMock.mockResolvedValue(undefined)
   modelsMock.mockResolvedValue({
     current: { provider: 'fx', model: 'fx-1' },
     routable: true,
@@ -95,6 +100,7 @@ beforeEach(() => {
 afterEach(() => {
   cleanup()
   vi.clearAllMocks()
+  vi.restoreAllMocks()
 })
 
 describe('ChatView message folds', () => {
@@ -187,6 +193,115 @@ describe('ChatView message folds', () => {
   })
 })
 
+describe('ChatView initial-load race', () => {
+  /** 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)
+    }
+  }
+
+  it('keeps live events that arrive while the tail page is still loading', async () => {
+    let resolveHistory: (page: HistoryPage) => void = () => {}
+    loadHistoryMock.mockReturnValue(new Promise<HistoryPage>((resolve) => { resolveHistory = resolve }))
+    const mux = new FakeMux()
+    render(<ChatView session={session} mux={mux as never} onBack={() => {}} />)
+
+    // A live turn starts before the snapshot resolves: chunk, tool call, final.
+    await act(async () => {
+      mux.emit({ type: 'session/event', sessionId: 's-1', event: makeEntry('assistant/chunk', { turn: 1, step: 0, chunk: { type: 'text-delta', text: '正在' } }, 6).event })
+      mux.emit({ type: 'session/event', sessionId: 's-1', event: makeEntry('tool/call', { turn: 1, step: 0, callId: 'c9', name: 'bash', arguments: '{"cmd":"ls"}' }, 7).event })
+      mux.emit({ type: 'session/event', sessionId: 's-1', event: makeEntry('assistant/message', { turn: 1, step: 0, message: { id: 'a-9', role: 'assistant', content: [{ type: 'text', text: '实时新消息' }] } }, 8).event })
+    })
+    // The snapshot predates those events; resolving it must not drop them.
+    await act(async () => { resolveHistory(historyPage(turnEvents())) })
+
+    expect(await screen.findByText('实时新消息')).toBeTruthy()
+    // The history turn's tool disclosure plus the live one both render.
+    expect((await screen.findAllByRole('button', { name: /工具/ })).length).toBe(2)
+  })
+
+  it('caps the tail-load live buffer and re-pulls the history tail after an overflow', async () => {
+    const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+    let resolveHistory: (page: HistoryPage) => void = () => {}
+    loadHistoryMock
+      .mockReturnValueOnce(new Promise<HistoryPage>((resolve) => { resolveHistory = resolve }))
+      // The overflow follow-up load resolves a page newer than the buffered burst.
+      .mockResolvedValueOnce(historyPage([
+        makeEntry('assistant/message', {
+          id: 'a-refetch',
+          role: 'assistant',
+          content: [{ type: 'text', text: '补拉恢复' }],
+        }, 700),
+      ]))
+    const mux = new FakeMux()
+    render(<ChatView session={session} mux={mux as never} onBack={() => {}} />)
+
+    // 501 live final messages arrive before the snapshot resolves: the first one
+    // is dropped by the 500-event cap, the remaining 500 stay buffered.
+    await act(async () => {
+      for (let index = 0; index <= MAX_TAIL_BUFFER_EVENTS; index++) {
+        mux.emit({
+          type: 'session/event',
+          sessionId: 's-1',
+          event: makeEntry('assistant/message', {
+            id: `a-burst-${index}`,
+            role: 'assistant',
+            content: [{ type: 'text', text: `突发消息 ${index}` }],
+          }, 100 + index).event,
+        })
+      }
+    })
+
+    // The overflow is logged exactly once, and the cap mentions the limit.
+    expect(warnSpy).toHaveBeenCalledTimes(1)
+    expect(String(warnSpy.mock.calls[0]?.[0])).toContain(String(MAX_TAIL_BUFFER_EVENTS))
+
+    await act(async () => { resolveHistory(historyPage(turnEvents())) })
+
+    // The capped buffer keeps the render bounded: the dropped oldest burst
+    // message is gone, while the newest buffered one survives the snapshot fold.
+    expect(await screen.findByText('突发消息 500')).toBeTruthy()
+    expect(screen.queryByText('突发消息 0')).toBeNull()
+
+    // The overflow triggered exactly one follow-up tail load, still carrying the
+    // same abort signal as the initial load.
+    await waitFor(() => { expect(loadHistoryMock).toHaveBeenCalledTimes(2) })
+    expect(loadHistoryMock.mock.calls[1]?.[0]).toBe('s-1')
+    expect(loadHistoryMock.mock.calls[1]?.[1]).toBeUndefined()
+    expect(loadHistoryMock.mock.calls[1]?.[2]).toBeInstanceOf(AbortSignal)
+    expect(loadHistoryMock.mock.calls[1]?.[2]).toBe(loadHistoryMock.mock.calls[0]?.[2])
+
+    // The re-pulled page folds into the already-rendered messages.
+    expect(await screen.findByText('补拉恢复')).toBeTruthy()
+  })
+
+  it('passes an AbortSignal to loadHistory and aborts it on unmount', async () => {
+    let capturedSignal: AbortSignal | undefined
+    loadHistoryMock.mockImplementation((_sessionId, _beforeSeq, signal) => {
+      capturedSignal = signal
+      return Promise.resolve(historyPage(turnEvents()))
+    })
+    const view = render(<ChatView session={session} onBack={() => {}} />)
+
+    expect(await screen.findByText('已完成修改')).toBeTruthy()
+    expect(loadHistoryMock).toHaveBeenCalledTimes(1)
+    expect(loadHistoryMock.mock.calls[0]?.[0]).toBe('s-1')
+    expect(loadHistoryMock.mock.calls[0]?.[1]).toBeUndefined()
+    expect(loadHistoryMock.mock.calls[0]?.[2]).toBeInstanceOf(AbortSignal)
+    expect(capturedSignal).toBeInstanceOf(AbortSignal)
+    expect(capturedSignal?.aborted).toBe(false)
+
+    view.unmount()
+    expect(capturedSignal?.aborted).toBe(true)
+  })
+})
+
 describe('ChatView model sheet', () => {
   it('labels the toolbar chip with the current model and selects a new one', async () => {
     loadHistoryMock.mockResolvedValue(historyPage(turnEvents()))
@@ -241,6 +356,73 @@ describe('ChatView model sheet', () => {
   })
 })
 
+describe('ChatView composer', () => {
+  const inputBox = (): HTMLTextAreaElement => screen.getByRole('textbox') as HTMLTextAreaElement
+
+  /** Dispatch one keydown through the React tree and return the real event. */
+  const pressEnter = (input: HTMLTextAreaElement, shiftKey = false): KeyboardEvent => {
+    const event = new KeyboardEvent('keydown', { key: 'Enter', bubbles: true, cancelable: true, shiftKey })
+    input.dispatchEvent(event)
+    return event
+  }
+
+  it('sends on Enter by default and keeps Shift+Enter inserting a newline', async () => {
+    loadHistoryMock.mockResolvedValue(historyPage(turnEvents()))
+    render(<ChatView session={session} onBack={() => {}} />)
+    await screen.findByText('已完成修改')
+
+    const input = inputBox()
+    expect(input.getAttribute('enterKeyHint')).toBe('send')
+    expect(input.getAttribute('placeholder')).toContain('Enter 发送')
+
+    fireEvent.change(input, { target: { value: '第一行' } })
+    const enter = pressEnter(input)
+    expect(enter.defaultPrevented).toBe(true)
+    await waitFor(() => {
+      expect(promptMock).toHaveBeenCalledWith('s-1', '第一行')
+    })
+
+    // Shift+Enter stays a newline gesture and never sends.
+    promptMock.mockClear()
+    const shifted = pressEnter(input, true)
+    expect(shifted.defaultPrevented).toBe(false)
+    expect(promptMock).not.toHaveBeenCalled()
+  })
+
+  it('inserts a newline on Enter and sends only from the button when the preference is false', async () => {
+    fetchMobilePreferencesMock.mockResolvedValue({ mobileEnterToSend: false })
+    loadHistoryMock.mockResolvedValue(historyPage(turnEvents()))
+    render(<ChatView session={session} onBack={() => {}} />)
+    await screen.findByText('已完成修改')
+
+    const input = inputBox()
+    await waitFor(() => { expect(input.getAttribute('enterKeyHint')).toBe('enter') })
+    expect(input.getAttribute('placeholder')).not.toContain('Enter 发送')
+
+    // The handler no longer prevents Enter, so the browser's default inserts
+    // a newline (emulated here through the controlled value) and no send fires.
+    fireEvent.change(input, { target: { value: '第一行' } })
+    const enter = pressEnter(input)
+    expect(enter.defaultPrevented).toBe(false)
+    fireEvent.change(input, { target: { value: '第一行\n' } })
+    expect(input.value).toBe('第一行\n')
+    expect(promptMock).not.toHaveBeenCalled()
+
+    // The send button still sends the full multi-line draft.
+    fireEvent.change(input, { target: { value: '第一行\n第二行' } })
+    fireEvent.click(screen.getByRole('button', { name: '发送' }))
+    await waitFor(() => {
+      expect(promptMock).toHaveBeenCalledWith('s-1', '第一行\n第二行')
+    })
+
+    // Shift+Enter keeps inserting a newline in either mode.
+    promptMock.mockClear()
+    const shifted = pressEnter(input, true)
+    expect(shifted.defaultPrevented).toBe(false)
+    expect(promptMock).not.toHaveBeenCalled()
+  })
+})
+
 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

package/src/mobile/views/ChatView.tsx

@@ -16,7 +16,7 @@ import type { MuxFrame } from '@deepseek-ai/dsh-host-apiproxy/api/events'
 import type { SessionModels } from '@deepseek-ai/dsh-host-apiproxy/api/sessions'
 import { loadHistory, prompt, type SessionView } from './App.tsx'
 import { errorText, formatTime, staleHostHint } from './App.tsx'
-import { models, selectModel, sendCommand } from '../api.ts'
+import { fetchMobilePreferences, models, selectModel, sendCommand } from '../api.ts'
 import { foldEvents, type RenderMessage, type ToolCallInfo, type WireEvent } from '../messages.ts'
 import { MuxClient } from '../mux.ts'
 import { ThemeToggle } from '../theme-toggle.tsx'
@@ -29,6 +29,13 @@ export interface ChatViewProps {
   onBack(): void
 }
 
+/**
+ * Hard cap on live events buffered while the initial history tail page is in
+ * flight. Beyond this the oldest buffered event is dropped and a follow-up
+ * history tail re-pull closes the seam.
+ */
+export const MAX_TAIL_BUFFER_EVENTS = 500
+
 /** Extract the raw event from one history entry (the fold consumes events only). */
 function eventOf(entry: { event: WireEvent }): WireEvent {
   return entry.event
@@ -101,6 +108,18 @@ export function ChatView({ session, mux, onBack }: ChatViewProps) {
   const [sending, setSending] = useState(false)
   const scrollRef = useRef<HTMLDivElement | undefined>(undefined)
   const pendingRef = useRef(false)
+  /**
+   * True while the initial tail page is in flight. Live events arriving in
+   * that window go to {@link liveBufferRef} instead of the message list: the
+   * tail load replaces the list wholesale, so a directly folded event would
+   * flash once, be discarded by the snapshot, and then be skipped forever by
+   * the seq watermark.
+   */
+  const tailLoadingRef = useRef(true)
+  /** Live session events buffered while the initial tail page loads. */
+  const liveBufferRef = useRef<WireEvent[]>([])
+  /** True once the live buffer hit its cap (oldest events were dropped). */
+  const liveBufferOverflowRef = useRef(false)
 
   /** The session's permission select (absent = capability not composed). */
   const [permissions, setPermissions] = useState<PermissionSelectValue | undefined>(undefined)
@@ -108,17 +127,49 @@ export function ChatView({ session, mux, onBack }: ChatViewProps) {
   const [currentModel, setCurrentModel] = useState<{ provider: string; model: string; reasoningEffort?: string } | undefined>(undefined)
   /** Which bottom sheet is open. */
   const [sheet, setSheet] = useState<'model' | 'permission' | null>(null)
+  /**
+   * Composer preference from the plugin's host settings (default true keeps
+   * the legacy Enter-to-send behavior until the preference loads).
+   */
+  const [mobileEnterToSend, setMobileEnterToSend] = useState(true)
+
+  // Read-only mobile display preferences ride the plugin's local
+  // `/m/api` method; a failure keeps the default (Enter sends).
+  useEffect(() => {
+    let cancelled = false
+    void fetchMobilePreferences().then(
+      (preferences) => {
+        if (!cancelled) setMobileEnterToSend(preferences.mobileEnterToSend !== false)
+      },
+      () => { /* keep the default */ },
+    )
+    return () => { cancelled = true }
+  }, [])
 
   // Tail page on open (content loads only when the session is opened).
   useEffect(() => {
     let cancelled = false
+    const controller = new AbortController()
+    // A stuck history load must not keep the chat empty (or the live buffer
+    // growing) forever: abort it and surface the transport error.
+    const timeout = setTimeout(() => {
+      controller.abort(new DOMException('history load timed out', 'TimeoutError'))
+    }, 15_000)
+    tailLoadingRef.current = true
+    liveBufferRef.current = []
+    liveBufferOverflowRef.current = false
     setLoading(true)
     setError(undefined)
     setMessages([])
-    void loadHistory(session.sessionId).then(
+    void loadHistory(session.sessionId, undefined, controller.signal).then(
       (page) => {
         if (cancelled) return
-        setMessages(foldEvents(page.events.map(eventOf)))
+        // Buffered live events re-fold on top of the snapshot; the watermark
+        // drops any the snapshot already includes, so nothing is lost or doubled.
+        const buffered = liveBufferRef.current
+        liveBufferRef.current = []
+        tailLoadingRef.current = false
+        setMessages(foldEvents(buffered, foldEvents(page.events.map(eventOf))))
         setHasOlder(page.hasMore)
         setLoading(false)
         // The history-tail projection baseline seeds the permission picker.
@@ -126,9 +177,31 @@ export function ChatView({ session, mux, onBack }: ChatViewProps) {
         // plugin (augmentation), so the base SDK map is indexed loosely.
         const projections = page.projections?.values as Record<string, unknown> | undefined
         setPermissions(parsePermissionSelect(projections?.['permissions']))
+        // The buffer overflowed while waiting (oldest events were dropped), so
+        // re-pull the freshest history page to close the gap on top of what is
+        // already rendered. Best-effort: a failure here only logs, it must not
+        // replace the loaded state with an error.
+        if (liveBufferOverflowRef.current) {
+          void loadHistory(session.sessionId, undefined, controller.signal).then(
+            (fresh) => {
+              if (cancelled) return
+              setMessages(previous => foldEvents(fresh.events.map(eventOf), previous))
+              liveBufferOverflowRef.current = false
+            },
+            (reason: unknown) => {
+              if (cancelled) return
+              console.warn('history tail re-pull after live buffer overflow failed', reason)
+            },
+          )
+        }
       },
       (reason: unknown) => {
         if (cancelled) return
+        // Load failed: flush the buffer so the live stream still renders.
+        const buffered = liveBufferRef.current
+        liveBufferRef.current = []
+        tailLoadingRef.current = false
+        if (buffered.length > 0) setMessages(foldEvents(buffered))
         setError(errorText(reason))
         setLoading(false)
       },
@@ -141,7 +214,11 @@ export function ChatView({ session, mux, onBack }: ChatViewProps) {
       },
       () => { /* chip falls back to a plain label */ },
     )
-    return () => { cancelled = true }
+    return () => {
+      cancelled = true
+      clearTimeout(timeout)
+      controller.abort()
+    }
   }, [session.sessionId])
 
   // Live frames: fold session events for this session in as they arrive.
@@ -150,7 +227,24 @@ export function ChatView({ session, mux, onBack }: ChatViewProps) {
     return mux.onFrame((frame: MuxFrame) => {
       if (frame.type === 'session/event') {
         if (frame.sessionId !== session.sessionId) return
-        setMessages(previous => foldEvents([frame.event as WireEvent], previous))
+        const event = frame.event as WireEvent
+        if (tailLoadingRef.current) {
+          if (liveBufferRef.current.length >= MAX_TAIL_BUFFER_EVENTS) {
+            // Bound the tail-load window: drop the oldest buffered event and
+            // remember that a follow-up history re-pull is needed. Warn once
+            // per load, not for every subsequent overflow.
+            liveBufferRef.current.shift()
+            if (!liveBufferOverflowRef.current) {
+              console.warn(
+                `history tail is slow: live buffer reached ${MAX_TAIL_BUFFER_EVENTS} events; oldest buffered events will be re-fetched`,
+              )
+              liveBufferOverflowRef.current = true
+            }
+          }
+          liveBufferRef.current.push(event)
+          return
+        }
+        setMessages(previous => foldEvents([event], previous))
         return
       }
       // Live projection pushes keep the permission picker current.
@@ -277,11 +371,11 @@ export function ChatView({ session, mux, onBack }: ChatViewProps) {
           className="chat-input"
           rows={1}
           value={input}
-          placeholder="输入消息，Enter 发送…"
-          enterKeyHint="send"
+          placeholder={mobileEnterToSend ? '输入消息，Enter 发送…' : '输入消息，Enter 换行，点按钮发送…'}
+          enterKeyHint={mobileEnterToSend ? 'send' : 'enter'}
           onChange={(event) => { setInput(event.target.value) }}
           onKeyDown={(event) => {
-            if (event.key === 'Enter' && !event.shiftKey) {
+            if (mobileEnterToSend && event.key === 'Enter' && !event.shiftKey) {
               event.preventDefault()
               void send()
             }