@linxin666/dsh-remote-web-ui 0.3.4 → 0.3.6

package/src/client/remote.module.css

@@ -484,23 +484,91 @@
   margin-top: 8px;
 }
 
-.fenceRetry {
+.fenceForm {
+  margin-top: 20px;
   width: 100%;
-  margin-top: 24px;
-  padding: 11px 16px;
+}
+
+.fenceInputRow {
+  display: flex;
+  gap: 8px;
+  width: 100%;
+}
+
+.fenceInput {
+  flex: 1;
+  min-width: 0;
+  padding: 10px 14px;
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 10px;
+  background: var(--dsw-alias-bg-layer-2);
+  color: var(--dsw-alias-label-primary);
+  font: inherit;
+  font-size: 13px;
+  transition: border-color 120ms ease, box-shadow 120ms ease;
+}
+
+.fenceInput:focus {
+  outline: none;
+  border-color: var(--dsw-alias-brand-primary);
+  box-shadow: 0 0 0 2px rgba(0, 102, 255, 0.15);
+}
+
+.fencePairButton {
+  flex-shrink: 0;
+  padding: 10px 18px;
   border: 1px solid var(--dsw-alias-brand-primary);
   border-radius: 10px;
   background: var(--dsw-alias-brand-primary);
   color: #fff;
   font: inherit;
+  font-size: 13px;
   font-weight: 500;
   cursor: pointer;
+  transition: filter 120ms ease, opacity 120ms ease;
 }
 
-.fenceRetry:hover {
+.fencePairButton:hover:not(:disabled) {
   filter: brightness(0.96);
 }
 
+.fencePairButton:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+.fencePairButton:focus-visible {
+  outline: 2px solid var(--dsw-alias-brand-primary);
+  outline-offset: 2px;
+}
+
+.fenceError {
+  margin: 10px 0 0;
+  color: var(--dsw-alias-state-error-primary);
+  font-size: 13px;
+  line-height: 1.4;
+  text-align: left;
+}
+
+.fenceRetry {
+  width: 100%;
+  margin-top: 12px;
+  padding: 10px 16px;
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 10px;
+  background: transparent;
+  color: var(--dsw-alias-label-secondary);
+  font: inherit;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 120ms ease, color 120ms ease;
+}
+
+.fenceRetry:hover {
+  background: var(--dsw-alias-interactive-bg-hover);
+  color: var(--dsw-alias-label-primary);
+}
+
 .fenceRetry:focus-visible {
   outline: 2px solid var(--dsw-alias-brand-primary);
   outline-offset: 3px;

package/src/index.ts

@@ -462,6 +462,12 @@ function applyImpl(ctx: Context, config?: Config): void {
     if (!resolve().enabled) return false
     return isPairedDeviceRequest(service, request)
   })
+
+  if (lanAddresses.length > 0) {
+    const urls = lanAddresses.map(ip => `http://${ip}:${String(ctx.webServer.port)}/m/`).join(' , ')
+    console.log(`remote-web-ui: mobile UI reachable on LAN at ${urls}`)
+  }
+
   const sync = (): void => {
     const value = resolve()
     service.config = pairingConfigOf(value)

package/src/mobile/messages.ts

@@ -611,11 +611,19 @@ export function foldEvents(events: readonly WireEvent[], existing?: readonly Ren
  * 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.
+ * indexes alive across folds, applies each event in (near-)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.
+ *
+ * Cost contract: every fold that applies at least one event rebuilds the
+ * snapshot as one fresh O(messages) array copy (React needs the new
+ * identity), and replacement paths locate rows by an O(messages) identity
+ * scan. Both are amortized by the consumer folding bursts as ONE batch on a
+ * fixed cadence (see FOLD_FLUSH_MS in ChatView) instead of per event. An
+ * id-to-index map was measured and deliberately rejected: at realistic
+ * message counts the Map maintenance cost exceeds the identity-scan cost.
  */
 export class EventFolder {
   private state: FoldState

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

@@ -8,7 +8,7 @@
  */
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { act, cleanup, render, screen } from '@testing-library/react'
-import { ChatView, STREAM_RENDER_INTERVAL_MS, LONG_TEXT_LIMIT } from './ChatView.tsx'
+import { ChatView, STREAM_RENDER_INTERVAL_MS, LONG_TEXT_LIMIT, FOLD_FLUSH_MS } from './ChatView.tsx'
 import { type SessionView } from './App.tsx'
 import { renderMarkdown } from '../markdown.ts'
 import type { SessionModels } from '@deepseek-ai/dsh-host-apiproxy/api/sessions'
@@ -150,8 +150,13 @@ describe('ChatView streaming markdown throttle', () => {
     ]
     const full = parts.join('')
 
-    // The first chunk mounts the pending message; the mount render parses it.
-    await act(async () => { chunk(mux, parts[0] ?? '', 6) })
+    // The first chunk mounts the pending message on the next fold flush
+    // (chunk streams fold in batches on the FOLD_FLUSH_MS cadence); the mount
+    // render parses it.
+    await act(async () => {
+      chunk(mux, parts[0] ?? '', 6)
+      vi.advanceTimersByTime(FOLD_FLUSH_MS + 5)
+    })
     const afterMount = renderMarkdownMock.mock.calls.length
     expect(afterMount).toBeGreaterThanOrEqual(1)
 

package/src/mobile/views/ChatView.tsx

@@ -38,6 +38,14 @@ export interface ChatViewProps {
  */
 export const MAX_TAIL_BUFFER_EVENTS = 500
 
+/**
+ * Cadence for folding buffered live events into the message list. Streaming
+ * chunks can arrive at a far higher rate; flushing on this cadence caps fold
+ * and re-render work per second without visible lag, and keeps working in
+ * background tabs where requestAnimationFrame is paused.
+ */
+export const FOLD_FLUSH_MS = 50
+
 /** localStorage key for the tool-call display toggle (persisted on the /m origin). */
 const SHOW_TOOL_CALLS_KEY = 'dsh.mobile.showToolCalls'
 /** localStorage key for the injected-system-message display toggle. */
@@ -147,6 +155,14 @@ export function ChatView({ session, mux, onBack }: ChatViewProps) {
   const liveBufferRef = useRef<WireEvent[]>([])
   /** Incremental folder for this session's stream (indexes stay hot across events). */
   const folderRef = useRef<EventFolder | undefined>(undefined)
+  /**
+   * Live events buffered between fold flushes. Folding every single event
+   * costs one O(messages) snapshot copy per event; flushing at a fixed
+   * cadence folds each burst once while keeping streaming text fluid.
+   */
+  const foldBufferRef = useRef<WireEvent[]>([])
+  /** Timer id of the scheduled fold flush, if any. */
+  const foldFlushTimerRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)
   /** True once the live buffer hit its cap (oldest events were dropped). */
   const liveBufferOverflowRef = useRef(false)
 
@@ -273,7 +289,21 @@ export function ChatView({ session, mux, onBack }: ChatViewProps) {
   // Live frames: fold session events for this session in as they arrive.
   useEffect(() => {
     if (mux === undefined) return
-    return mux.onFrame((frame: MuxFrame) => {
+    /** Fold every buffered live event in one batch and publish the snapshot. */
+    const flushFoldBuffer = (): void => {
+      if (foldFlushTimerRef.current !== undefined) {
+        clearTimeout(foldFlushTimerRef.current)
+        foldFlushTimerRef.current = undefined
+      }
+      const events = foldBufferRef.current
+      if (events.length === 0) return
+      foldBufferRef.current = []
+      setMessages(previous => {
+        const folder = folderRef.current
+        return folder === undefined ? foldEvents(events, previous) : folder.fold(events)
+      })
+    }
+    const unsubscribe = mux.onFrame((frame: MuxFrame) => {
       if (frame.type === 'session/event') {
         if (frame.sessionId !== session.sessionId) return
         const event = frame.event as WireEvent
@@ -298,10 +328,16 @@ export function ChatView({ session, mux, onBack }: ChatViewProps) {
           liveBufferRef.current.push(event)
           return
         }
-        setMessages(previous => {
-          const folder = folderRef.current
-          return folder === undefined ? foldEvents([event], previous) : folder.fold([event])
-        })
+        foldBufferRef.current.push(event)
+        // Only chunk streams batch on the flush cadence; every other event
+        // (final message, turn close, user echo, update/delete) flushes the
+        // buffer synchronously so settled UI states never wait for a timer.
+        const isChunk = event.type === 'assistant/chunk' || event.type === 'message/chunk'
+        if (!isChunk) {
+          flushFoldBuffer()
+        } else if (foldFlushTimerRef.current === undefined) {
+          foldFlushTimerRef.current = setTimeout(flushFoldBuffer, FOLD_FLUSH_MS)
+        }
         return
       }
       // Live projection pushes keep the permission picker current.
@@ -342,6 +378,17 @@ export function ChatView({ session, mux, onBack }: ChatViewProps) {
         return
       }
     })
+    return () => {
+      unsubscribe()
+      // Drop the pending flush: its events belong to the session (or
+      // component instance) being torn down, and the next session reseeds
+      // its folder from a fresh history tail.
+      if (foldFlushTimerRef.current !== undefined) {
+        clearTimeout(foldFlushTimerRef.current)
+        foldFlushTimerRef.current = undefined
+      }
+      foldBufferRef.current = []
+    }
   }, [mux, session.sessionId])
 
   // Weak-network polling fallback: when the assistant is running, poll for