@linxin666/dsh-remote-web-ui 0.2.9 → 0.3.1

package/src/mobile/markdown.ts

@@ -10,14 +10,24 @@
  * @module dsh-remote-web-ui/mobile/markdown
  */
 
-/** Escape HTML special characters. */
+/** HTML special-character map for {@link escapeHtml}. */
+const HTML_ESCAPE_MAP: Record<string, string> = {
+  '&': '&amp;',
+  '<': '&lt;',
+  '>': '&gt;',
+  '"': '&quot;',
+  "'": '&#39;',
+}
+
+/**
+ * Escape HTML special characters. One regex pass replaces all five
+ * characters through the map; the output is identical to five sequential
+ * passes (each replacement string contains none of the escaped characters),
+ * and the common no-special-character case scans the string only once
+ * instead of five times.
+ */
 export function escapeHtml(text: string): string {
-  return text
-    .replace(/&/g, '&amp;')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;')
-    .replace(/"/g, '&quot;')
-    .replace(/'/g, '&#39;')
+  return text.replace(/[&<>"']/g, char => HTML_ESCAPE_MAP[char] ?? char)
 }
 
 /**

package/src/mobile/mobile-styles.ts

@@ -588,16 +588,33 @@ body {
   gap: 8px;
 }
 
-.chat-tool-item {
+.chat-tool-card {
   display: flex;
   flex-direction: column;
-  gap: 2px;
+  gap: 4px;
+  padding: 6px 8px;
+  border: 1px solid var(--m-border);
+  border-radius: 8px;
+  background: var(--m-bg-raised);
 }
 
-.chat-tool-name {
-  color: var(--m-text);
-  font-size: 12.5px;
+.chat-tool-pills {
+  display: flex;
+  gap: 4px;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.chat-tool-pill {
+  display: inline-block;
+  padding: 1px 7px;
+  border-radius: 999px;
+  background: var(--m-accent-soft);
+  color: var(--m-accent);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 11px;
   font-weight: 600;
+  white-space: nowrap;
 }
 
 .chat-tool-args {
@@ -611,8 +628,245 @@ body {
   line-height: 1.5;
   overflow-wrap: break-word;
   white-space: pre-wrap;
+  max-height: 200px;
+  overflow-y: auto;
+}
+
+/* ── turn status indicator (#1017) ───────────────────────────────────── */
+
+.chat-turn-status {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 10px 16px;
+  color: var(--m-accent);
+  font-size: 13px;
+  font-weight: 600;
+  background: linear-gradient(
+    90deg,
+    var(--m-accent) 0%,
+    color-mix(in srgb, var(--m-accent) 60%, #ffffff) 50%,
+    var(--m-accent) 100%
+  );
+  background-size: 200% 100%;
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  animation: dsh-shimmer 1.8s linear infinite;
+}
+
+.chat-turn-dots {
+  display: inline-flex;
+  gap: 3px;
+}
+
+.chat-turn-dots span {
+  display: inline-block;
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: var(--m-accent);
+  animation: dsh-dot-bounce 1.2s ease-in-out infinite;
+}
+
+.chat-turn-dots span:nth-child(2) {
+  animation-delay: 0.15s;
+}
+
+.chat-turn-dots span:nth-child(3) {
+  animation-delay: 0.3s;
+}
+
+@keyframes dsh-shimmer {
+  from { background-position: 200% 0; }
+  to { background-position: -200% 0; }
+}
+
+@keyframes dsh-dot-bounce {
+  0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
+  40% { transform: translateY(-4px); opacity: 1; }
+}
+
+/* ── approval panel (#1025) ──────────────────────────────────────────── */
+
+.chat-approval-panel {
+  margin: 8px 12px;
+  padding: 10px 12px;
+  border: 1px solid var(--m-accent);
+  border-radius: var(--m-radius);
+  background: var(--m-bg-raised);
+  box-shadow: var(--m-shadow);
+}
+
+.chat-approval-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 8px;
 }
 
+.chat-approval-reason {
+  color: var(--m-text-secondary);
+  font-size: 12.5px;
+}
+
+.chat-approval-error {
+  margin: 4px 0;
+  color: var(--m-danger);
+  font-size: 12px;
+}
+
+.chat-approval-actions {
+  display: flex;
+  gap: 8px;
+}
+
+.chat-approval-allow {
+  flex: 1;
+  height: 34px;
+  border: none;
+  border-radius: 8px;
+  background: var(--m-accent);
+  color: #fff;
+  font: inherit;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.chat-approval-allow:disabled {
+  opacity: 0.6;
+}
+
+.chat-approval-reject {
+  flex: 1;
+  height: 34px;
+  border: 1px solid var(--m-border);
+  border-radius: 8px;
+  background: var(--m-bg-raised);
+  color: var(--m-text);
+  font: inherit;
+  font-size: 13px;
+  cursor: pointer;
+}
+
+.chat-approval-reject:disabled {
+  opacity: 0.6;
+}
+
+/* ── question panel (#1025) ──────────────────────────────────────────── */
+
+.chat-question-panel {
+  margin: 8px 12px;
+  padding: 10px 12px;
+  border: 1px solid var(--m-accent);
+  border-radius: var(--m-radius);
+  background: var(--m-bg-raised);
+  box-shadow: var(--m-shadow);
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.chat-question-group {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.chat-question-header {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--m-text);
+}
+
+.chat-question-text {
+  font-size: 13px;
+  color: var(--m-text);
+  line-height: 1.5;
+}
+
+.chat-question-detail {
+  font-size: 12px;
+  color: var(--m-text-secondary);
+  line-height: 1.5;
+}
+
+.chat-question-options {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.chat-question-option {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 8px 10px;
+  border: 1px solid var(--m-border);
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: 13px;
+  transition: border-color 0.12s, background 0.12s;
+}
+
+.chat-question-option input {
+  margin: 2px 0 0;
+  flex: none;
+}
+
+.chat-question-option-selected {
+  border-color: var(--m-accent);
+  background: var(--m-accent-soft);
+}
+
+.chat-question-option-label {
+  color: var(--m-text);
+  font-weight: 500;
+}
+
+.chat-question-option-desc {
+  display: block;
+  color: var(--m-text-tertiary);
+  font-size: 12px;
+}
+
+.chat-question-custom {
+  width: 100%;
+  min-height: 40px;
+  box-sizing: border-box;
+  padding: 8px 10px;
+  border: 1px solid var(--m-border);
+  border-radius: 8px;
+  background: var(--m-bg-input);
+  color: var(--m-text);
+  font: inherit;
+  font-size: 13px;
+  resize: vertical;
+  outline: none;
+}
+
+.chat-question-custom:focus-visible {
+  border-color: var(--m-accent);
+}
+
+.chat-question-submit {
+  height: 36px;
+  border: none;
+  border-radius: 8px;
+  background: var(--m-accent);
+  color: #fff;
+  font: inherit;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.chat-question-submit:disabled {
+  opacity: 0.6;
+}
+
+
 /* ── composer toolbar (model / permission chips) ─────────────────────── */
 
 .chat-tools {
@@ -1053,10 +1307,16 @@ body {
   .sheet-confirm-danger,
   .sheet-toggle-switch,
   .sheet-toggle-switch-knob,
-  .chat-input {
+  .chat-input,
+  .chat-turn-status,
+  .chat-turn-dots span {
     animation: none;
     transition: none;
   }
+  .chat-turn-status {
+    background: none;
+    -webkit-text-fill-color: var(--m-accent);
+  }
 }
 
 /* ── installed-app pairing ───────────────────────────────────────────── */
@@ -1106,4 +1366,64 @@ body {
 .mobile-pairSubmit {
   width: 100%;
 }
+
+/* ── directory browser ─────────────────────────────────────────────── */
+
+.dir-browser {
+  display: flex;
+  flex-direction: column;
+}
+
+.dir-crumbs {
+  display: flex;
+  align-items: center;
+  overflow-x: auto;
+  padding: 12px 16px;
+  background: var(--m-bg-raised);
+  border-bottom: 1px solid var(--m-border);
+  white-space: nowrap;
+}
+
+.dir-crumbs::-webkit-scrollbar {
+  display: none;
+}
+
+.dir-crumb {
+  border: none;
+  background: transparent;
+  padding: 4px 6px;
+  color: var(--m-text);
+  font-size: 14px;
+  cursor: pointer;
+}
+
+.dir-crumb:active {
+  background: var(--m-bg-input);
+  border-radius: 4px;
+}
+
+.dir-crumb-separator {
+  color: var(--m-text-tertiary);
+  margin: 0 4px;
+  font-size: 14px;
+}
+
+.dir-entry {
+  padding-left: 16px;
+}
+
+.dir-entry-hidden {
+  opacity: 0.5;
+}
+
+.dir-select {
+  padding: 16px;
+  background: var(--m-bg);
+  border-top: 1px solid var(--m-border);
+}
+
+.dir-empty {
+  padding: 40px 0;
+}
 `
+

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

@@ -0,0 +1,231 @@
+// @vitest-environment jsdom
+/**
+ * ChatView streaming markdown throttle: a pending assistant message must not
+ * re-parse its whole accumulated text on every chunk. Streaming text
+ * re-parses at most once per STREAM_RENDER_INTERVAL_MS, shows the last
+ * parsed result in between, and renders the exact final HTML (byte-identical
+ * to the plain renderMarkdown output) the moment the turn closes.
+ */
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { act, cleanup, render } from '@testing-library/react'
+import { ChatView, STREAM_RENDER_INTERVAL_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'
+import type { HistoryPage } from '../api.ts'
+import type { WireEvent } from '../messages.ts'
+
+// The api module is fully mocked; App.tsx's history wrapper is overridden to
+// feed a fixed empty history page, its pure helpers stay real.
+vi.mock('../api.ts', () => ({
+  fetchMobilePreferences: vi.fn(),
+  models: vi.fn(),
+  selectModel: vi.fn(),
+  sendCommand: vi.fn(),
+}))
+vi.mock('./App.tsx', async importOriginal => {
+  const actual = await importOriginal<typeof import('./App.tsx')>()
+  return {
+    ...actual,
+    loadHistory: vi.fn(),
+    prompt: vi.fn(async () => {}),
+  }
+})
+// Wrap the real renderer with a call counter: the throttle must cut the
+// number of full-text parses during a chunk stream (each parse is O(n)).
+vi.mock('../markdown.ts', async importOriginal => {
+  const actual = await importOriginal<typeof import('../markdown.ts')>()
+  return { ...actual, renderMarkdown: vi.fn(actual.renderMarkdown) }
+})
+import { fetchMobilePreferences, models } from '../api.ts'
+import { loadHistory } from './App.tsx'
+
+const loadHistoryMock = vi.mocked(loadHistory)
+const fetchMobilePreferencesMock = vi.mocked(fetchMobilePreferences)
+const modelsMock = vi.mocked(models)
+const renderMarkdownMock = vi.mocked(renderMarkdown)
+
+const session: SessionView = {
+  sessionId: 's-1',
+  title: '测试会话',
+  updatedAt: 1_700_000_000_000,
+  running: false,
+  blank: false,
+}
+
+/** 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)
+  }
+}
+
+/** One history entry wrapping a WireEvent (host history-page shape). */
+function makeEntry(type: string, data: unknown, seq: number): { event: WireEvent } {
+  return { event: { type, seq, time: seq * 1_000, data } }
+}
+
+/** Build an empty history page (the live stream supplies all content). */
+function historyPage(): HistoryPage {
+  return { events: [] as never, hasMore: false } as HistoryPage
+}
+
+/**
+ * Emit one live text-delta chunk bound to the stable message id 'a-1' (the
+ * mobile wire shape). A stable id keeps the message row mounted across the
+ * fold, so the tests observe the throttle effect path only.
+ */
+function chunk(mux: FakeMux, text: string, seq: number): void {
+  mux.emit({
+    type: 'session/event',
+    sessionId: 's-1',
+    event: makeEntry('assistant/chunk', { messageId: 'a-1', turn: 0, step: 0, text }, seq).event,
+  })
+}
+
+/** Emit the final assistant message (authoritative text, closes the turn). */
+function finalMessage(mux: FakeMux, text: string, seq: number): void {
+  mux.emit({
+    type: 'session/event',
+    sessionId: 's-1',
+    event: makeEntry('assistant/message', {
+      turn: 0,
+      step: 0,
+      message: { id: 'a-1', role: 'assistant', content: [{ type: 'text', text }] },
+    }, seq).event,
+  })
+}
+
+/** Round-trip HTML through the DOM so a byte comparison is symmetric. */
+function normalize(html: string): string {
+  const element = document.createElement('div')
+  element.innerHTML = html
+  return element.innerHTML
+}
+
+/** The assistant message's markdown body (dangerouslySetInnerHTML target). */
+function body(): HTMLElement {
+  const element = document.querySelector('.chat-msg.chat-msg-assistant .chat-md-body')
+  if (element === null) throw new Error('assistant markdown body not found')
+  return element as HTMLElement
+}
+
+beforeEach(() => {
+  fetchMobilePreferencesMock.mockResolvedValue({ mobileEnterToSend: true })
+  modelsMock.mockResolvedValue({
+    current: { provider: 'fx', model: 'fx-1' },
+    routable: true,
+    groups: [],
+    failures: [],
+  } satisfies SessionModels)
+  loadHistoryMock.mockResolvedValue(historyPage())
+  vi.useFakeTimers()
+})
+
+afterEach(() => {
+  cleanup()
+  vi.useRealTimers()
+  vi.clearAllMocks()
+  vi.restoreAllMocks()
+})
+
+describe('ChatView streaming markdown throttle', () => {
+  it('re-parses pending text at most once per interval and catches up byte-exactly', async () => {
+    const mux = new FakeMux()
+    await act(async () => {
+      render(<ChatView session={session} mux={mux as never} onBack={() => {}} />)
+    })
+
+    const parts = [
+      '第一段 **加粗** 文本与 `行内代码`。\n\n',
+      '第二段 *斜体* 与 <标签> 内容。\n\n',
+      '第三段 ~~删除线~~ 和 [链接](https://example.com/a)。',
+    ]
+    const full = parts.join('')
+
+    // The first chunk mounts the pending message; the mount render parses it.
+    await act(async () => { chunk(mux, parts[0] ?? '', 6) })
+    const afterMount = renderMarkdownMock.mock.calls.length
+    expect(afterMount).toBeGreaterThanOrEqual(1)
+
+    // A burst of further chunks does not re-parse per chunk: at most one
+    // leading parse may run (if the wall-clock gap to the burst exceeded the
+    // window), but never one parse per chunk.
+    await act(async () => {
+      chunk(mux, parts[1] ?? '', 7)
+      chunk(mux, parts[2] ?? '', 8)
+    })
+    expect(renderMarkdownMock.mock.calls.length - afterMount).toBeLessThan(2)
+    // During the window the last parsed result stays visible: the newest
+    // chunk's text has not reached the DOM yet.
+    expect(body().innerHTML).not.toContain('第三段')
+
+    // The trailing render inside the window catches up to the newest text,
+    // byte-identical to a full renderMarkdown of the accumulated text.
+    await act(async () => {
+      vi.advanceTimersByTime(STREAM_RENDER_INTERVAL_MS + 5)
+    })
+    expect(normalize(body().innerHTML)).toBe(normalize(renderMarkdown(full)))
+    expect(renderMarkdownMock.mock.calls.length - afterMount).toBeLessThan(3)
+  })
+
+  it('renders the exact final HTML immediately when the turn closes', async () => {
+    const mux = new FakeMux()
+    await act(async () => {
+      render(<ChatView session={session} mux={mux as never} onBack={() => {}} />)
+    })
+
+    // The final event carries the authoritative text and closes the turn
+    // (pending -> false) in the same synchronous burst as the chunks.
+    const finalText = '最终 **整篇** `渲染` 与 [链接](https://example.com/x) 文本。'
+    await act(async () => {
+      chunk(mux, '流式前缀', 6)
+      chunk(mux, '中间过程', 7)
+      finalMessage(mux, finalText, 8)
+    })
+
+    // No timer advance needed: the closed turn already renders the exact
+    // final HTML (terminal messages keep the immediate-render behavior).
+    expect(normalize(body().innerHTML)).toBe(normalize(renderMarkdown(finalText)))
+  })
+
+  it('keeps the streaming render fresh after window edges and skips the identical final parse', async () => {
+    const mux = new FakeMux()
+    await act(async () => {
+      render(<ChatView session={session} mux={mux as never} onBack={() => {}} />)
+    })
+
+    const first = '第一期内容。'
+    const second = '第二期内容，包含 `code`。'
+    const full = first + second
+
+    // The chunk and the window edge in one tick: the trailing render fires
+    // inside the window and shows the current text.
+    await act(async () => {
+      chunk(mux, first, 6)
+      vi.advanceTimersByTime(STREAM_RENDER_INTERVAL_MS + 5)
+    })
+    expect(normalize(body().innerHTML)).toBe(normalize(renderMarkdown(first)))
+
+    // A later chunk schedules a new trailing render; before it fires the last
+    // parsed result is still on screen.
+    await act(async () => { chunk(mux, second, 7) })
+    expect(body().innerHTML).not.toContain('第二期内容')
+    await act(async () => {
+      vi.advanceTimersByTime(STREAM_RENDER_INTERVAL_MS + 5)
+    })
+    expect(normalize(body().innerHTML)).toBe(normalize(renderMarkdown(full)))
+
+    // Closing the turn with the exact text already rendered must not re-parse
+    // (the row already holds the byte-identical final HTML).
+    const beforeFinal = renderMarkdownMock.mock.calls.length
+    await act(async () => { finalMessage(mux, full, 9) })
+    expect(renderMarkdownMock.mock.calls.length - beforeFinal).toBe(0)
+    expect(normalize(body().innerHTML)).toBe(normalize(renderMarkdown(full)))
+  })
+})