@linxin666/dsh-remote-web-ui 0.2.0 → 0.2.1

package/src/mobile/messages.test.ts

@@ -1,6 +1,6 @@
 /** foldEvents: message-list folding from a session event stream. */
 import { describe, expect, it } from 'vitest'
-import { foldEvents, type WireEvent } from './messages.ts'
+import { EventFolder, foldEvents, type WireEvent } from './messages.ts'
 
 /** Assemble one event with an auto-incrementing seq / time. */
 function makeEvent(
@@ -326,3 +326,54 @@ describe('foldEvents', () => {
     expect(result[0]).toMatchObject({ id: 'u-1', kind: 'user' })
   })
 })
+
+describe('EventFolder incremental folding', () => {
+  it('matches a one-shot fold when events arrive one at a time', () => {
+    const stream: WireEvent[] = [
+      makeEvent('user/message', userMessageData('u-1', 'hi'), 0),
+      textChunk(0, 0, '你', 1),
+      textChunk(0, 0, '好', 2),
+      makeEvent('assistant/message', assistantMessageData('a-1', 0, 0, '你好'), 3),
+      makeEvent('message/update', { id: 'u-1', text: '更新' }, 4),
+    ]
+    const oneShot = foldEvents(stream)
+    const folder = new EventFolder()
+    let incremental: ReturnType<typeof foldEvents> = []
+    for (const event of stream) incremental = folder.fold([event])
+    expect(incremental).toEqual(oneShot)
+  })
+
+  it('replays and re-folds are no-ops and reuse the previous snapshot identity', () => {
+    const folder = new EventFolder(foldEvents([
+      makeEvent('user/message', userMessageData('u-1', 'hi'), 0),
+      textChunk(0, 0, '你', 1),
+    ]))
+    const first = folder.fold([textChunk(0, 0, '好', 2)])
+    expect(first[first.length - 1]).toMatchObject({ text: '你好', pending: true })
+    // Same event again (wire replay or a double-invoked state updater): no change, same identity.
+    const replay = folder.fold([textChunk(0, 0, '好', 2)])
+    expect(replay).toBe(first)
+    // A no-op batch over an already folded stream also keeps the identity.
+    expect(folder.fold([])).toBe(first)
+  })
+
+  it('prepends older pages and keeps folding live events on top', () => {
+    const folder = new EventFolder(foldEvents([
+      makeEvent('user/message', userMessageData('u-2', '第二页'), 10),
+    ]))
+    folder.prepend(foldEvents([makeEvent('user/message', userMessageData('u-1', '第一页'), 5)]))
+    const withLive = folder.fold([textChunk(0, 0, '新', 11)])
+    expect(withLive.map(message => message.id)).toEqual(['u-1', 'u-2', 'assistant,0.0#11'])
+    // The live fold must not lose the prepended rows on later events.
+    const later = folder.fold([textChunk(0, 0, '续', 12)])
+    expect(later.map(message => message.id)).toEqual(['u-1', 'u-2', 'assistant,0.0#11'])
+    expect(later[2]).toMatchObject({ text: '新续', pending: true })
+  })
+
+  it('seed replaces the whole stream', () => {
+    const folder = new EventFolder(foldEvents([makeEvent('user/message', userMessageData('u-1', '旧'), 0)]))
+    folder.seed(foldEvents([makeEvent('user/message', userMessageData('u-2', '新'), 5)]))
+    expect(folder.snapshot().map(message => message.id)).toEqual(['u-2'])
+    expect(folder.fold([textChunk(0, 0, '追加', 6)]).map(message => message.id)).toEqual(['u-2', 'assistant,0.0#6'])
+  })
+})

package/src/mobile/messages.ts

@@ -191,16 +191,6 @@ function chunkTarget(data: unknown): { text: string; kind: 'text' | 'reasoning';
   return result
 }
 
-/** Max message seq across an existing list, or -1 for an empty list. */
-function watermarkOf(existing: readonly RenderMessage[] | undefined): number {
-  if (existing === undefined) return -1
-  let maxSeq = -1
-  for (const message of existing) {
-    if (message.seq > maxSeq) maxSeq = message.seq
-  }
-  return maxSeq
-}
-
 /** Mutable fold state; message objects are immutable and swapped on change. */
 interface FoldState {
   messages: RenderMessage[]
@@ -215,6 +205,8 @@ interface FoldState {
   toolNames: Map<string, Set<string>>
   /** Context window for the current model (from request/context). */
   contextWindow?: number
+  /** Highest seq folded so far; the replay/watermark gate. */
+  maxSeq: number
 }
 
 function createState(existing: readonly RenderMessage[] | undefined): FoldState {
@@ -226,8 +218,10 @@ function createState(existing: readonly RenderMessage[] | undefined): FoldState
     turnStepMessage: new Map(),
     messageTurn: new Map(),
     toolNames: new Map(),
+    maxSeq: -1,
   }
   for (const message of messages) {
+    if (message.seq > state.maxSeq) state.maxSeq = message.seq
     state.byId.set(message.id, message)
     if (message.kind !== 'assistant') continue
     // Rebuild the (turn, step) and turn index maps lost when `existing` was
@@ -287,6 +281,7 @@ function retargetTurnStep(state: FoldState, key: string | undefined, oldMessage:
 
 /** Fold one event into the working state. Assumes the event passes the watermark. */
 function applyEvent(state: FoldState, event: WireEvent): void {
+  if (event.seq > state.maxSeq) state.maxSeq = event.seq
   switch (event.type) {
     case 'user/message':
       applyUserMessage(state, event)
@@ -608,17 +603,65 @@ function applyTurnEnd(state: FoldState, event: WireEvent): void {
  * @returns messages sorted by seq.
  */
 export function foldEvents(events: readonly WireEvent[], existing?: readonly RenderMessage[]): RenderMessage[] {
-  const sorted = [...events].sort((a, b) => a.seq - b.seq)
-  const watermark = watermarkOf(existing)
-  const state = createState(existing)
-  for (const event of sorted) {
-    if (event.seq <= watermark) continue
-    applyEvent(state, event)
-  }
-  // Incremental tails (the live-stream hot path) are appended in seq order
-  // or updated in place, so the list is usually ordered already — verify in
-  // O(n) and skip the O(n log n) re-sort when it is.
-  const out = state.messages
+  return new EventFolder(existing).fold(events)
+}
+
+/**
+ * Incremental folder for one message stream. Live chat folds one event at a
+ * time; rebuilding the five index maps by scanning every message per event
+ * made that path O(n) per event (O(n * events) per turn). A folder keeps the
+ * indexes alive across folds, applies each event in O(1) map operations, and
+ * returns the previous snapshot identity unchanged when nothing applied, so
+ * React skips the re-render entirely. Replayed events are no-ops: the maxSeq
+ * watermark advanced by the first application skips them, which also makes a
+ * double-invoked React state updater harmless.
+ */
+export class EventFolder {
+  private state: FoldState
+  private snapshotList: RenderMessage[] | undefined
+
+  /** @param initial - seed rows (history tail load); omit for an empty stream. */
+  constructor(initial?: readonly RenderMessage[]) {
+    this.state = createState(initial)
+  }
+
+  /** Fold one batch incrementally; returns the current snapshot list. */
+  fold(events: readonly WireEvent[]): RenderMessage[] {
+    const sorted = [...events].sort((a, b) => a.seq - b.seq)
+    let applied = false
+    for (const event of sorted) {
+      if (event.seq <= this.state.maxSeq) continue
+      applyEvent(this.state, event)
+      applied = true
+    }
+    if (!applied && this.snapshotList !== undefined) return this.snapshotList
+    this.snapshotList = snapshotOf(this.state)
+    return this.snapshotList
+  }
+
+  /** Replace the whole stream (history reload / session switch). */
+  seed(messages: readonly RenderMessage[]): void {
+    this.state = createState(messages)
+    this.snapshotList = undefined
+  }
+
+  /** Prepend an older history page (exact seam; no overlapping seqs). */
+  prepend(older: readonly RenderMessage[]): void {
+    this.state = createState([...older, ...this.state.messages])
+    this.snapshotList = undefined
+  }
+
+  /** Current snapshot list; a fresh copy whenever the folder changed. */
+  snapshot(): RenderMessage[] {
+    if (this.snapshotList !== undefined) return this.snapshotList
+    this.snapshotList = snapshotOf(this.state)
+    return this.snapshotList
+  }
+}
+
+/** Copy the folder's rows and keep them seq-ordered (skips re-sorting the common ordered case). */
+function snapshotOf(state: FoldState): RenderMessage[] {
+  const out = [...state.messages]
   let ordered = true
   for (let index = 1; index < out.length; index += 1) {
     const prev = out[index - 1]!
@@ -628,5 +671,5 @@ export function foldEvents(events: readonly WireEvent[], existing?: readonly Ren
       break
     }
   }
-  return ordered ? out : [...out].sort((a, b) => a.seq - b.seq || (a.id < b.id ? -1 : 1))
+  return ordered ? out : out.sort((a, b) => a.seq - b.seq || (a.id < b.id ? -1 : 1))
 }

package/src/mobile/mobile-styles.ts

@@ -252,6 +252,43 @@ body {
   padding: 8px 16px;
 }
 
+.mobile-create {
+  display: grid;
+  gap: 8px;
+}
+
+.mobile-preset {
+  display: grid;
+  gap: 4px;
+}
+
+.mobile-presetLabel {
+  color: var(--m-text-secondary);
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.mobile-presetSelect {
+  width: 100%;
+  height: 40px;
+  padding: 0 36px 0 12px;
+  border: 1px solid var(--m-border);
+  border-radius: 10px;
+  background: var(--m-bg-input);
+  color: var(--m-text);
+  font: inherit;
+}
+
+.mobile-presetSelect:disabled {
+  opacity: 0.6;
+}
+
+.mobile-presetDescription {
+  margin: 0;
+  color: var(--m-text-tertiary);
+  font-size: 12px;
+}
+
 /* ── buttons ─────────────────────────────────────────────────────────── */
 
 .mobile-button {
@@ -896,6 +933,7 @@ body {
 .mobile-row:focus-visible,
 .mobile-button:focus-visible,
 .mobile-new:focus-visible,
+.mobile-presetSelect:focus-visible,
 .chat-send:focus-visible,
 .chat-chip:focus-visible,
 .chat-msg-toggle:focus-visible,

package/src/mobile/views/ChatView.tsx

@@ -11,13 +11,13 @@
  *   permission pickers, both as bottom sheets.
  */
 
-import { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from 'react'
+import { memo, useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from 'react'
 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 { fetchMobilePreferences, models, selectModel, sendCommand } from '../api.ts'
-import { foldEvents, type RenderMessage, type ToolCallInfo, type WireEvent } from '../messages.ts'
+import { EventFolder, foldEvents, type RenderMessage, type ToolCallInfo, type WireEvent } from '../messages.ts'
 import { renderMarkdown } from '../markdown.ts'
 import { MuxClient } from '../mux.ts'
 import { ThemeToggle } from '../theme-toggle.tsx'
@@ -144,6 +144,8 @@ export function ChatView({ session, mux, onBack }: ChatViewProps) {
   const tailLoadingRef = useRef(true)
   /** Live session events buffered while the initial tail page loads. */
   const liveBufferRef = useRef<WireEvent[]>([])
+  /** Incremental folder for this session's stream (indexes stay hot across events). */
+  const folderRef = useRef<EventFolder | undefined>(undefined)
   /** True once the live buffer hit its cap (oldest events were dropped). */
   const liveBufferOverflowRef = useRef(false)
 
@@ -188,6 +190,7 @@ export function ChatView({ session, mux, onBack }: ChatViewProps) {
     tailLoadingRef.current = true
     liveBufferRef.current = []
     liveBufferOverflowRef.current = false
+    folderRef.current = undefined
     setLoading(true)
     setError(undefined)
     setMessages([])
@@ -199,7 +202,9 @@ export function ChatView({ session, mux, onBack }: ChatViewProps) {
         const buffered = liveBufferRef.current
         liveBufferRef.current = []
         tailLoadingRef.current = false
-        setMessages(foldEvents(buffered, foldEvents(page.events.map(eventOf))))
+        const folder = new EventFolder(foldEvents(page.events.map(eventOf)))
+        folderRef.current = folder
+        setMessages(folder.fold(buffered))
         setHasOlder(page.hasMore)
         setLoading(false)
         // The history-tail projection baseline seeds the permission picker.
@@ -215,7 +220,9 @@ export function ChatView({ session, mux, onBack }: ChatViewProps) {
           void loadHistory(session.sessionId, undefined, controller.signal).then(
             (fresh) => {
               if (cancelled) return
-              setMessages(previous => foldEvents(fresh.events.map(eventOf), previous))
+              const folder = folderRef.current
+              const freshEvents = fresh.events.map(eventOf)
+              setMessages(previous => folder === undefined ? foldEvents(freshEvents, previous) : folder.fold(freshEvents))
               liveBufferOverflowRef.current = false
             },
             (reason: unknown) => {
@@ -231,7 +238,10 @@ export function ChatView({ session, mux, onBack }: ChatViewProps) {
         const buffered = liveBufferRef.current
         liveBufferRef.current = []
         tailLoadingRef.current = false
-        if (buffered.length > 0) setMessages(foldEvents(buffered))
+        if (buffered.length > 0) {
+          const folder = folderRef.current
+          setMessages(folder === undefined ? foldEvents(buffered) : folder.fold(buffered))
+        }
         setError(errorText(reason))
         setLoading(false)
       },
@@ -274,7 +284,10 @@ export function ChatView({ session, mux, onBack }: ChatViewProps) {
           liveBufferRef.current.push(event)
           return
         }
-        setMessages(previous => foldEvents([event], previous))
+        setMessages(previous => {
+          const folder = folderRef.current
+          return folder === undefined ? foldEvents([event], previous) : folder.fold([event])
+        })
         return
       }
       // Live projection pushes keep the permission picker current.
@@ -330,7 +343,13 @@ export function ChatView({ session, mux, onBack }: ChatViewProps) {
         pendingRef.current = false
         setLoading(false)
         const older = foldEvents(page.events.map(eventOf))
-        setMessages(previous => [...older, ...previous])
+        const folder = folderRef.current
+        if (folder === undefined) {
+          setMessages(previous => [...older, ...previous])
+        } else {
+          folder.prepend(older)
+          setMessages(folder.snapshot())
+        }
         setHasOlder(page.hasMore)
       },
       (reason: unknown) => {
@@ -481,8 +500,12 @@ export function ChatView({ session, mux, onBack }: ChatViewProps) {
 
 /* ── message rows ─────────────────────────────────────────────────────── */
 
-/** One rendered message row (user bubble or assistant bubble with folds). */
-function MessageRow({ message, showToolCalls, showSystemMessages }: {
+/**
+ * One rendered message row (user bubble or assistant bubble with folds).
+ * Memoized: live streaming updates exactly one message object per frame, so
+ * unchanged rows skip re-rendering their markdown/sub-components.
+ */
+const MessageRow = memo(function MessageRow({ message, showToolCalls, showSystemMessages }: {
   message: RenderMessage
   showToolCalls: boolean
   showSystemMessages: boolean
@@ -510,7 +533,7 @@ function MessageRow({ message, showToolCalls, showSystemMessages }: {
       <span className="chat-msg-time">{formatTime(message.time)}</span>
     </div>
   )
-}
+})
 
 /** Collapsed-by-default reasoning disclosure (web-UI Think-row parity). */
 function ReasoningDisclosure({ text, pending }: { text: string; pending: boolean }) {

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

@@ -10,12 +10,14 @@ import { type SessionView } from './App.tsx'
 vi.mock('../api.ts', () => ({
   listSessions: vi.fn(),
   listWorkspaces: vi.fn(),
+  listAgentPresets: vi.fn(),
   createSession: vi.fn(),
 }))
-import { createSession, listSessions, listWorkspaces } from '../api.ts'
+import { createSession, listAgentPresets, listSessions, listWorkspaces } from '../api.ts'
 
 const listSessionsMock = vi.mocked(listSessions)
 const listWorkspacesMock = vi.mocked(listWorkspaces)
+const listAgentPresetsMock = vi.mocked(listAgentPresets)
 const createSessionMock = vi.mocked(createSession)
 
 const workspace: WorkspaceRow = {
@@ -49,6 +51,7 @@ function renderList(props: Partial<SessionListViewProps> = {}): void {
 beforeEach(() => {
   listSessionsMock.mockResolvedValue({ items: [], hasMore: false })
   listWorkspacesMock.mockResolvedValue([workspace])
+  listAgentPresetsMock.mockResolvedValue({ presets: [], authorable: false, hasDocument: false })
   createSessionMock.mockResolvedValue({ sessionId: 's-new' })
 })
 
@@ -111,6 +114,71 @@ describe('SessionListView creation', () => {
     expect(await screen.findByText('新会话')).toBeTruthy()
   })
 
+  it('creates the session with the selected agent preset', async () => {
+    listAgentPresetsMock.mockResolvedValue({
+      presets: [
+        { id: 'router-standard', name: 'Router Standard', trust: 'system', isDefault: true },
+        { id: 'router-spec', name: 'Router Spec', description: '规格驱动模式', trust: 'system', isDefault: false },
+      ],
+      authorable: false,
+      hasDocument: false,
+    })
+    renderList()
+
+    const picker = await screen.findByRole('combobox', { name: 'Agent 模式' })
+    expect((picker as HTMLSelectElement).value).toBe('router-standard')
+    fireEvent.change(picker, { target: { value: 'router-spec' } })
+    fireEvent.click(screen.getByRole('button', { name: '+ 新建会话' }))
+
+    await waitFor(() => {
+      expect(createSessionMock).toHaveBeenCalledWith({ workspaceId: 'w-1', agentPreset: 'router-spec' })
+    })
+    expect(await screen.findByText('规格驱动模式')).toBeTruthy()
+  })
+
+  it('skips a broken default preset and disables it in the picker', async () => {
+    listAgentPresetsMock.mockResolvedValue({
+      presets: [
+        { id: 'broken-default', trust: 'system', isDefault: true, broken: 'missing plugin' },
+        { id: 'local-router', name: 'Local Router', trust: 'user', isDefault: false },
+      ],
+      authorable: false,
+      hasDocument: false,
+    })
+    renderList()
+
+    const picker = await screen.findByRole('combobox', { name: 'Agent 模式' }) as HTMLSelectElement
+    expect(picker.value).toBe('local-router')
+    expect(screen.getByRole('option', { name: 'broken-default（默认）（不可用）' }).hasAttribute('disabled')).toBe(true)
+    expect(screen.getByRole('option', { name: 'Local Router（本地）' })).toBeTruthy()
+  })
+
+  it('keeps default session creation available when the preset roster fails', async () => {
+    listAgentPresetsMock.mockRejectedValue(new Error('preset roster unavailable'))
+    renderList()
+    await screen.findByText(/还没有会话/)
+
+    const button = await screen.findByRole('button', { name: '+ 新建会话' })
+    await waitFor(() => { expect(button.hasAttribute('disabled')).toBe(false) })
+    fireEvent.click(button)
+
+    await waitFor(() => {
+      expect(createSessionMock).toHaveBeenCalledWith({ workspaceId: 'w-1' })
+    })
+  })
+
+  it('waits for the preset roster before enabling session creation', async () => {
+    let resolvePresets: (value: Awaited<ReturnType<typeof listAgentPresets>>) => void = () => {}
+    listAgentPresetsMock.mockReturnValue(new Promise(resolve => { resolvePresets = resolve }))
+    renderList()
+
+    const button = screen.getByRole('button', { name: '+ 新建会话' })
+    expect(button.hasAttribute('disabled')).toBe(true)
+
+    resolvePresets({ presets: [], authorable: false, hasDocument: false })
+    await waitFor(() => { expect(button.hasAttribute('disabled')).toBe(false) })
+  })
+
   it('keeps the button disabled while a creation is in flight', async () => {
     let resolveCreate: (value: { sessionId: string }) => void = () => {}
     createSessionMock.mockReturnValue(new Promise(resolve => { resolveCreate = resolve }))

package/src/mobile/views/SessionListView.tsx

@@ -13,8 +13,9 @@
 
 import { useCallback, useEffect, useRef, useState } from 'react'
 import type { WorkspaceView as WorkspaceRow } from '@deepseek-ai/dsh-host-apiproxy/api/workspace'
+import type { AgentPresetEntry } from '@deepseek-ai/dsh-host-apiproxy/api/agent-presets'
 import type { SessionSummary } from '@deepseek-ai/dsh-host-apiproxy/api/sessions'
-import { createSession, listSessions, listWorkspaces } from '../api.ts'
+import { createSession, listAgentPresets, listSessions, listWorkspaces } from '../api.ts'
 import { errorText, formatTime, staleHostHint, toSessionView, type SessionView } from './App.tsx'
 import { ThemeToggle } from '../theme-toggle.tsx'
 
@@ -45,6 +46,9 @@ export function SessionListView({ workspace, onBack, onPick }: SessionListViewPr
   const [error, setError] = useState<string | undefined>(undefined)
   const [creating, setCreating] = useState(false)
   const [createError, setCreateError] = useState<string | undefined>(undefined)
+  const [presets, setPresets] = useState<readonly AgentPresetEntry[]>([])
+  const [selectedPreset, setSelectedPreset] = useState<string | undefined>(undefined)
+  const [presetsLoading, setPresetsLoading] = useState(true)
   const cursorRef = useRef<string | undefined>(undefined)
   const busyRef = useRef(false)
 
@@ -74,6 +78,27 @@ export function SessionListView({ workspace, onBack, onPick }: SessionListViewPr
     return () => { cancelled = true }
   }, [workspace])
 
+  useEffect(() => {
+    let cancelled = false
+    setPresets([])
+    setSelectedPreset(undefined)
+    setPresetsLoading(true)
+    void listAgentPresets().then(
+      (roster) => {
+        if (cancelled) return
+        const usable = roster.presets.filter(preset => preset.broken === undefined)
+        setPresets(roster.presets)
+        setSelectedPreset((usable.find(preset => preset.isDefault) ?? usable[0])?.id)
+        setPresetsLoading(false)
+      },
+      () => {
+        if (cancelled) return
+        setPresetsLoading(false)
+      },
+    )
+    return () => { cancelled = true }
+  }, [workspace])
+
   /** Pull the next page and append the rows that belong to this workspace. */
   const loadMore = useCallback(() => {
     if (busyRef.current) return
@@ -102,7 +127,10 @@ export function SessionListView({ workspace, onBack, onPick }: SessionListViewPr
     if (creating) return
     setCreating(true)
     setCreateError(undefined)
-    void createSession({ workspaceId: workspace.workspaceId }).then(
+    void createSession({
+      workspaceId: workspace.workspaceId,
+      ...(selectedPreset !== undefined ? { agentPreset: selectedPreset } : {}),
+    }).then(
       (created) => {
         setCreating(false)
         const view: SessionView = {
@@ -120,9 +148,10 @@ export function SessionListView({ workspace, onBack, onPick }: SessionListViewPr
         setCreateError(errorText(reason))
       },
     )
-  }, [creating, workspace, onPick])
+  }, [creating, workspace, onPick, selectedPreset])
 
   const createHint = createError !== undefined ? staleHostHint(createError) : undefined
+  const selectedPresetEntry = presets.find(preset => preset.id === selectedPreset)
 
   return (
     <div className="mobile">
@@ -132,11 +161,35 @@ export function SessionListView({ workspace, onBack, onPick }: SessionListViewPr
         <ThemeToggle />
       </header>
       {error !== undefined && <p className="mobile-error mobile-pad">{error}</p>}
-      <div className="mobile-pad">
+      <div className="mobile-create mobile-pad">
+        {presets.length > 0 && (
+          <label className="mobile-preset">
+            <span className="mobile-presetLabel">Agent 模式</span>
+            <select
+              className="mobile-presetSelect"
+              value={selectedPreset ?? ''}
+              disabled={selectedPreset === undefined}
+              onChange={(event) => { setSelectedPreset(event.target.value) }}
+            >
+              {selectedPreset === undefined && <option value="">无可用 Agent 模式</option>}
+              {presets.map(preset => (
+                <option key={preset.id} value={preset.id} disabled={preset.broken !== undefined}>
+                  {preset.name ?? preset.id}
+                  {preset.isDefault ? '（默认）' : ''}
+                  {preset.trust === 'user' ? '（本地）' : ''}
+                  {preset.broken !== undefined ? '（不可用）' : ''}
+                </option>
+              ))}
+            </select>
+          </label>
+        )}
+        {selectedPresetEntry?.description !== undefined && (
+          <p className="mobile-presetDescription">{selectedPresetEntry.description}</p>
+        )}
         <button
           type="button"
           className="mobile-new"
-          disabled={creating}
+          disabled={creating || presetsLoading}
           onClick={() => { void handleCreate() }}
         >
           {creating ? '创建中…' : '+ 新建会话'}

package/src/mobile/views/WorkspaceView.tsx

@@ -27,6 +27,8 @@ export interface WorkspaceViewProps {
 export function WorkspaceView({ initialWorkspaceId, onPick }: WorkspaceViewProps) {
   const [items, setItems] = useState<WorkspaceRow[] | undefined>(undefined)
   const [error, setError] = useState<string | undefined>(undefined)
+  // Bumped by the retry button to re-run the roster fetch effect.
+  const [reload, setReload] = useState(0)
 
   useEffect(() => {
     let cancelled = false
@@ -48,7 +50,7 @@ export function WorkspaceView({ initialWorkspaceId, onPick }: WorkspaceViewProps
       },
     )
     return () => { cancelled = true }
-  }, [initialWorkspaceId, onPick])
+  }, [initialWorkspaceId, onPick, reload])
 
   if (error !== undefined) {
     return (
@@ -59,7 +61,7 @@ export function WorkspaceView({ initialWorkspaceId, onPick }: WorkspaceViewProps
         </header>
         <div className="mobile-empty">
           <p className="mobile-error">加载失败：{error}</p>
-          <button type="button" className="mobile-button" onClick={() => { setError(undefined); setItems(undefined) }}>
+          <button type="button" className="mobile-button" onClick={() => { setError(undefined); setItems(undefined); setReload(n => n + 1) }}>
             重试
           </button>
         </div>

package/src/mobile-api.ts

@@ -28,9 +28,16 @@ import type { PairingService } from './pairing.ts'
 import { readBoundedJson, writeJson } from './http.ts'
 import { readCookie } from './gate.ts'
 
-/** Methods the phone surface may call. Everything else is refused. */
+/**
+ * Methods the phone surface may call. Everything else is refused HERE — but
+ * note the paired-device cookie also passes the global api/gate for the full
+ * ApiProxy surface (gate.ts), so a paired phone is a full-control credential:
+ * the allowlist only constrains this /m/api proxy, not the cookie's reach.
+ * stop() revokes every device; there is no per-device revocation yet.
+ */
 const MOBILE_ALLOWLIST = new Set([
   'workspace.list',
+  'agentPreset.list',
   'session.create',
   'session.list',
   'session.history',
@@ -292,6 +299,7 @@ async function dispatch(apiProxy: ApiProxy, method: string, payload: unknown, rp
     result: response.result,
   })
   if (method === 'workspace.list') return wrap(await apiProxy.workspace.list(request as never))
+  if (method === 'agentPreset.list') return wrap(await apiProxy.agentPresets.list(request as never))
   if (method === 'session.create') return wrap(await apiProxy.sessions.create(request as never))
   if (method === 'session.history') return wrap(await apiProxy.sessions.history(request as never))
   if (method === 'session.search') return wrap(await apiProxy.sessions.search(request as never, signal ?? new AbortController().signal))

package/src/routes.ts

@@ -222,7 +222,16 @@ export function makeRoutes(deps: PairRoutesDeps): WebRoute[] {
   const ACCEPT_MAX_ATTEMPTS = 10
   const ACCEPT_WINDOW_MS = 30_000
   const rateLimitAccept = (req: IncomingMessage): boolean => {
-    const ip = (req.socket as { remoteAddress?: string } | undefined)?.remoteAddress ?? 'unknown'
+    const socketIp = (req.socket as { remoteAddress?: string } | undefined)?.remoteAddress ?? 'unknown'
+    // Behind the auto-tunnel every internet client arrives from 127.0.0.1,
+    // so a single shared bucket would let one attacker keep the legitimate
+    // owner rate-limited. Partition the availability bucket by the first
+    // client-visible XFF hop (set by the tunnel edge): XFF is untrusted for
+    // authentication and only separates buckets, it never grants access.
+    const forwarded = typeof req.headers['x-forwarded-for'] === 'string'
+      ? (req.headers['x-forwarded-for'].split(',')[0] ?? '').trim()
+      : undefined
+    const ip = forwarded === undefined || forwarded === '' ? socketIp : socketIp + '|' + forwarded
     const nowMs = Date.now()
     // The map lives as long as the plugin: prune expired windows once the
     // table grows past a modest size so distinct source IPs (LAN clients,
@@ -306,6 +315,9 @@ export function makeRoutes(deps: PairRoutesDeps): WebRoute[] {
       writeJson(res, result.code === 'used' ? 409 : 404, { ok: false, code: result.code })
       return
     }
+    // No Secure attribute: LAN pairing runs over plain HTTP (the cookie must
+    // work there), and the same cookie rides HTTPS on the tunnel. Lax keeps
+    // top-level navigations working while blocking cross-site subrequests.
     res.writeHead(200, {
       'content-type': 'application/json; charset=utf-8',
       'set-cookie': [
@@ -356,7 +368,15 @@ export function makeRoutes(deps: PairRoutesDeps): WebRoute[] {
       return
     }
     const deviceId = readCookie(req.headers.cookie, service.config.cookieName)
-    writeJson(res, 200, { ok: true, paired: deviceId !== undefined && service.hasDevice(deviceId), ...service.snapshot() })
+    const paired = deviceId !== undefined && service.hasDevice(deviceId)
+    const snapshot = service.snapshot()
+    // Unpaired LAN/tunnel clients get only the pairing-relevant fields; the
+    // token expiry, device roster, and public tunnel URL are an oracle for
+    // targeting and timing and stay behind a live device cookie.
+    const visible = paired
+      ? snapshot
+      : { phase: snapshot.phase, lanAvailable: snapshot.lanAvailable, lanAddresses: snapshot.lanAddresses }
+    writeJson(res, 200, { ok: true, paired, ...visible })
   }
 
   const handleEvents = (req: IncomingMessage, res: ServerResponse): void => {