@linxin666/dsh-remote-web-ui 0.1.17 → 0.1.19

package/src/mobile/mobile-styles.ts

@@ -393,6 +393,85 @@ body {
   cursor: pointer;
 }
 
+/* Assistant markdown content (GFM subset; renderer in markdown.ts). */
+.chat-md {
+  white-space: normal;
+}
+.chat-md-collapsed {
+  max-height: 45vh;
+  overflow: hidden;
+  position: relative;
+}
+.chat-md-collapsed::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 28px;
+  background: linear-gradient(transparent, var(--m-bg-raised));
+  pointer-events: none;
+}
+.chat-md-body p { margin: 0 0 8px; }
+.chat-md-body p:last-child { margin-bottom: 0; }
+.chat-md-body h1, .chat-md-body h2, .chat-md-body h3,
+.chat-md-body h4, .chat-md-body h5, .chat-md-body h6 {
+  margin: 12px 0 6px;
+  font-weight: 650;
+  line-height: 1.3;
+}
+.chat-md-body h1 { font-size: 1.35em; }
+.chat-md-body h2 { font-size: 1.25em; }
+.chat-md-body h3 { font-size: 1.15em; }
+.chat-md-body h4, .chat-md-body h5, .chat-md-body h6 { font-size: 1.05em; }
+.chat-md-body code {
+  font-family: var(--m-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
+  font-size: 0.9em;
+  background: var(--m-accent-soft);
+  padding: 1px 5px;
+  border-radius: 4px;
+}
+.chat-md-body pre {
+  margin: 8px 0;
+  padding: 10px;
+  background: #101726;
+  color: #dbe4f5;
+  border-radius: 8px;
+  overflow-x: auto;
+  font-size: 12.5px;
+  line-height: 1.5;
+}
+.chat-md-body pre code {
+  background: transparent;
+  padding: 0;
+  color: inherit;
+}
+.chat-md-body ul, .chat-md-body ol { margin: 4px 0 8px; padding-left: 22px; }
+.chat-md-body li { margin: 2px 0; }
+.chat-md-body blockquote {
+  margin: 8px 0;
+  padding: 4px 10px;
+  border-left: 3px solid var(--m-accent);
+  background: var(--m-accent-soft);
+  border-radius: 0 6px 6px 0;
+  color: var(--m-text-secondary);
+}
+.chat-md-body table {
+  margin: 8px 0;
+  border-collapse: collapse;
+  display: block;
+  overflow-x: auto;
+  font-size: 13px;
+}
+.chat-md-body th, .chat-md-body td {
+  border: 1px solid var(--m-border);
+  padding: 4px 8px;
+}
+.chat-md-body th { background: var(--m-accent-soft); }
+.chat-md-body a { color: var(--m-accent); }
+.chat-md-body hr { border: none; border-top: 1px solid var(--m-border); margin: 10px 0; }
+.chat-md-body img { max-width: 100%; border-radius: 8px; }
+
 /* ── message disclosures (reasoning / tools) ─────────────────────────── */
 
 .chat-disclosure {
@@ -824,11 +903,97 @@ body {
 .chat-disclosure-head:focus-visible,
 .sheet-option:focus-visible,
 .sheet-confirm-danger:focus-visible,
+.sheet-toggle-switch:focus-visible,
 .chat-input:focus-visible {
   outline: none;
   box-shadow: 0 0 0 2px var(--m-bg), 0 0 0 4px var(--m-accent);
 }
 
+/* ── chat context usage chip (chat-tools row) ───────────────────────── */
+
+.chat-context {
+  flex: none;
+  align-self: center;
+  padding: 2px 10px;
+  border: 1px solid var(--m-border);
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--m-text-tertiary) 10%, transparent);
+  color: var(--m-text-tertiary);
+  font-size: 11px;
+  line-height: 1.6;
+  white-space: nowrap;
+}
+
+.chat-context-warn {
+  border-color: var(--m-danger);
+  background: color-mix(in srgb, var(--m-danger) 14%, transparent);
+  color: var(--m-danger);
+}
+
+/* ── display sheet toggle rows ──────────────────────────────────────── */
+
+.sheet-toggle-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 8px;
+  border-bottom: 1px solid var(--m-border);
+}
+
+.sheet-toggle-row:last-child {
+  border-bottom: none;
+}
+
+.sheet-toggle-copy {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.sheet-toggle-title {
+  font-size: 14px;
+}
+
+.sheet-toggle-desc {
+  color: var(--m-text-tertiary);
+  font-size: 12px;
+  line-height: 1.4;
+}
+
+.sheet-toggle-switch {
+  position: relative;
+  flex: none;
+  width: 44px;
+  height: 26px;
+  border: none;
+  border-radius: 999px;
+  background: var(--m-border);
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+}
+
+.sheet-toggle-switch-on {
+  background: var(--m-accent);
+}
+
+.sheet-toggle-switch-knob {
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: #fff;
+  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.2);
+  transition: transform 0.15s ease;
+}
+
+.sheet-toggle-switch-on .sheet-toggle-switch-knob {
+  transform: translateX(18px);
+}
+
 /* Accessibility: collapse every interaction/enter animation for
    reduced-motion users; surface layout itself stays static. */
 @media (prefers-reduced-motion: reduce) {
@@ -848,6 +1013,8 @@ body {
   .sheet,
   .sheet-option,
   .sheet-confirm-danger,
+  .sheet-toggle-switch,
+  .sheet-toggle-switch-knob,
   .chat-input {
     animation: none;
     transition: none;

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

@@ -518,3 +518,124 @@ describe('ChatView scrolling', () => {
     await waitFor(() => { expect(scrollWrites.length).toBe(writesBefore) })
   })
 })
+
+describe('ChatView display toggles and context usage', () => {
+  /** jsdom in this setup ships a bare localStorage object; install a real fake. */
+  const makeStorage = (): Storage => {
+    const map = new Map<string, string>()
+    return {
+      getItem: (key: string) => map.get(key) ?? null,
+      setItem: (key: string, value: string) => { map.set(key, value) },
+      removeItem: (key: string) => { map.delete(key) },
+      clear: () => { map.clear() },
+      key: (index: number) => [...map.keys()][index] ?? null,
+      get length() { return map.size },
+    } as Storage
+  }
+
+  /** A user/message whose source.kind is 'plugin' (injected system message). */
+  const systemEvents = (): Array<{ event: WireEvent }> => [
+    makeEntry('user/message', {
+      id: 'u-plugin',
+      role: 'user',
+      content: [{ type: 'text', text: '系统注入消息' }],
+      source: { kind: 'plugin', name: 'react-extension' },
+    }, 0),
+    makeEntry('user/message', { id: 'u-1', role: 'user', content: [{ type: 'text', text: '普通消息' }] }, 1),
+  ]
+
+  const toolEvents = (): Array<{ event: WireEvent }> => [
+    makeEntry('user/message', { id: 'u-1', role: 'user', content: [{ type: 'text', text: '改文件' }] }, 0),
+    makeEntry('assistant/message', {
+      turn: 0,
+      step: 0,
+      message: { id: 'a-1', role: 'assistant', content: [{ type: 'text', text: '完成' }] },
+    }, 1),
+    makeEntry('tool/call', { turn: 0, step: 0, callId: 'c1', name: 'bash', arguments: '{}' }, 2),
+  ]
+
+  beforeEach(() => {
+    vi.stubGlobal('localStorage', makeStorage())
+  })
+
+  afterEach(() => {
+    vi.unstubAllGlobals()
+  })
+
+  it('hides injected user messages by default and reveals them via the display sheet', async () => {
+    loadHistoryMock.mockResolvedValue(historyPage(systemEvents()))
+    render(<ChatView session={session} onBack={() => {}} />)
+
+    // The plugin-injected message is hidden by default; the real user message shows.
+    expect(await screen.findByText('普通消息')).toBeTruthy()
+    expect(screen.queryByText('系统注入消息')).toBeNull()
+
+    // Open the display sheet and flip the system-message switch on.
+    fireEvent.click(screen.getByRole('button', { name: /显示/ }))
+    const systemSwitch = await screen.findByRole('switch', { name: '系统提示词' })
+    expect(systemSwitch.getAttribute('aria-checked')).toBe('false')
+    fireEvent.click(systemSwitch)
+    expect(await screen.findByText('系统注入消息')).toBeTruthy()
+
+    // Flip it back off: the injected row disappears again.
+    const systemSwitchAfter = screen.getByRole('switch', { name: '系统提示词' })
+    expect(systemSwitchAfter.getAttribute('aria-checked')).toBe('true')
+    fireEvent.click(systemSwitchAfter)
+    expect(screen.queryByText('系统注入消息')).toBeNull()
+  })
+
+  it('hides the tool disclosure when the tool-call toggle is off', async () => {
+    loadHistoryMock.mockResolvedValue(historyPage(toolEvents()))
+    render(<ChatView session={session} onBack={() => {}} />)
+
+    // Tool disclosure visible by default.
+    expect(await screen.findByRole('button', { name: /工具/ })).toBeTruthy()
+
+    fireEvent.click(screen.getByRole('button', { name: /显示/ }))
+    const toolSwitch = await screen.findByRole('switch', { name: '工具调用' })
+    expect(toolSwitch.getAttribute('aria-checked')).toBe('true')
+    fireEvent.click(toolSwitch)
+
+    // The disclosure is gone while reasoning/text remain.
+    expect(screen.queryByRole('button', { name: /工具/ })).toBeNull()
+    expect(screen.getByText('完成')).toBeTruthy()
+  })
+
+  it('renders the context usage chip from request/context plus assistant usage', async () => {
+    loadHistoryMock.mockResolvedValue(historyPage([
+      makeEntry('request/context', { provider: 'fx', model: 'fx-1', contextWindow: 100_000 }, 0),
+      makeEntry('user/message', { id: 'u-1', role: 'user', content: [{ type: 'text', text: 'hi' }] }, 1),
+      makeEntry('assistant/message', {
+        turn: 0,
+        step: 0,
+        message: { id: 'a-1', role: 'assistant', content: [{ type: 'text', text: 'ok' }] },
+        usage: { inputTokens: 30_000, outputTokens: 1_000 },
+      }, 2),
+    ]))
+    render(<ChatView session={session} onBack={() => {}} />)
+    expect(await screen.findByText('上下文 30%')).toBeTruthy()
+  })
+
+  it('adds the warn class when context usage is at or above 80%', async () => {
+    loadHistoryMock.mockResolvedValue(historyPage([
+      makeEntry('request/context', { provider: 'fx', model: 'fx-1', contextWindow: 100_000 }, 0),
+      makeEntry('user/message', { id: 'u-1', role: 'user', content: [{ type: 'text', text: 'hi' }] }, 1),
+      makeEntry('assistant/message', {
+        turn: 0,
+        step: 0,
+        message: { id: 'a-1', role: 'assistant', content: [{ type: 'text', text: 'ok' }] },
+        usage: { inputTokens: 80_000, outputTokens: 0 },
+      }, 2),
+    ]))
+    render(<ChatView session={session} onBack={() => {}} />)
+    const chip = await screen.findByText('上下文 80%')
+    expect(chip.className).toContain('chat-context-warn')
+  })
+
+  it('renders no context chip when there is no usage/context data', async () => {
+    loadHistoryMock.mockResolvedValue(historyPage(turnEvents()))
+    render(<ChatView session={session} onBack={() => {}} />)
+    await screen.findByText('已完成修改')
+    expect(screen.queryByText(/上下文/)).toBeNull()
+  })
+})

package/src/mobile/views/ChatView.tsx

@@ -11,13 +11,14 @@
  *   permission pickers, both as bottom sheets.
  */
 
-import { useCallback, useEffect, useRef, useState, type ReactNode } from 'react'
+import { 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 { renderMarkdown } from '../markdown.ts'
 import { MuxClient } from '../mux.ts'
 import { ThemeToggle } from '../theme-toggle.tsx'
 
@@ -36,6 +37,31 @@ export interface ChatViewProps {
  */
 export const MAX_TAIL_BUFFER_EVENTS = 500
 
+/** 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. */
+const SHOW_SYSTEM_MESSAGES_KEY = 'dsh.mobile.showSystemMessages'
+
+/** Read a boolean from localStorage defensively; falls back to the default. */
+function readStoredBoolean(key: string, fallback: boolean): boolean {
+  try {
+    const raw = localStorage.getItem(key)
+    if (raw === null) return fallback
+    return raw === '1' || raw.toLowerCase() === 'true'
+  } catch {
+    return fallback
+  }
+}
+
+/** Persist a boolean toggle; storage failures are ignored (feature stays non-persistent). */
+function writeStoredBoolean(key: string, value: boolean): void {
+  try {
+    localStorage.setItem(key, value ? '1' : '0')
+  } catch {
+    /* quota / privacy mode: non-persistent is acceptable */
+  }
+}
+
 /** Extract the raw event from one history entry (the fold consumes events only). */
 function eventOf(entry: { event: WireEvent }): WireEvent {
   return entry.event
@@ -126,7 +152,11 @@ export function ChatView({ session, mux, onBack }: ChatViewProps) {
   /** The current model selection for the toolbar chip (best-effort label). */
   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)
+  const [sheet, setSheet] = useState<'model' | 'permission' | 'display' | null>(null)
+  /** Show tool-call disclosures (default on, persisted on the /m origin). */
+  const [showToolCalls, setShowToolCalls] = useState<boolean>(() => readStoredBoolean(SHOW_TOOL_CALLS_KEY, true))
+  /** Show injected system messages (default off, persisted on the /m origin). */
+  const [showSystemMessages, setShowSystemMessages] = useState<boolean>(() => readStoredBoolean(SHOW_SYSTEM_MESSAGES_KEY, false))
   /**
    * Composer preference from the plugin's host settings (default true keeps
    * the legacy Enter-to-send behavior until the preference loads).
@@ -334,6 +364,23 @@ export function ChatView({ session, mux, onBack }: ChatViewProps) {
     : permissions.options.find(option => option.value === permissions.currentValue)?.name
       ?? displayName(permissions.currentValue)
 
+  // Context usage chip: the most recent assistant message carrying both usage and
+  // a positive context window drives the percentage. Scanned from the end so a
+  // newer answer (whose usage may be the last one reported) takes precedence.
+  const contextUsage = useMemo(() => {
+    for (let index = messages.length - 1; index >= 0; index--) {
+      const message = messages[index]
+      const usage = message.usage
+      if (message.kind !== 'assistant' || usage === undefined) continue
+      const window = message.contextWindow
+      if (window === undefined || window <= 0) continue
+      const tokens = usage.inputTokens + (usage.cacheReadTokens ?? 0) + (usage.cacheWriteTokens ?? 0)
+      const pct = Math.round(tokens / window * 100)
+      return { pct }
+    }
+    return undefined
+  }, [messages])
+
   return (
     <div className="chat">
       <header className="mobile-header">
@@ -348,7 +395,14 @@ export function ChatView({ session, mux, onBack }: ChatViewProps) {
             {loading ? '加载中…' : '加载更早的消息'}
           </button>
         )}
-        {messages.map(message => <MessageRow key={message.id} message={message} />)}
+        {messages.map(message => (
+          <MessageRow
+            key={message.id}
+            message={message}
+            showToolCalls={showToolCalls}
+            showSystemMessages={showSystemMessages}
+          />
+        ))}
         {loading && messages.length === 0 && <p className="chat-typing">加载中…</p>}
         {!loading && messages.length === 0 && <p className="chat-typing">还没有消息，发一句话开始吧</p>}
       </div>
@@ -358,6 +412,10 @@ export function ChatView({ session, mux, onBack }: ChatViewProps) {
           <span className="chat-chip-value">{modelLabel}</span>
           <span className="chat-chip-chevron" aria-hidden>›</span>
         </button>
+        <button type="button" className="chat-chip" onClick={() => { setSheet('display') }} aria-haspopup="dialog">
+          <span className="chat-chip-label">显示</span>
+          <span className="chat-chip-chevron" aria-hidden>›</span>
+        </button>
         {permissionLabel !== undefined && (
           <button type="button" className="chat-chip" onClick={() => { setSheet('permission') }} aria-haspopup="dialog">
             <span className="chat-chip-label">权限</span>
@@ -365,6 +423,11 @@ export function ChatView({ session, mux, onBack }: ChatViewProps) {
             <span className="chat-chip-chevron" aria-hidden>›</span>
           </button>
         )}
+        {contextUsage !== undefined && (
+          <div className={"chat-context" + (contextUsage.pct >= 80 ? " chat-context-warn" : "")}>
+            上下文 {contextUsage.pct}%
+          </div>
+        )}
       </div>
       <div className="chat-inputbar">
         <textarea
@@ -403,6 +466,15 @@ export function ChatView({ session, mux, onBack }: ChatViewProps) {
           onClose={() => { setSheet(null) }}
         />
       )}
+      {sheet === 'display' && (
+        <DisplaySheet
+          showToolCalls={showToolCalls}
+          showSystemMessages={showSystemMessages}
+          onToolCalls={(value) => { setShowToolCalls(value); writeStoredBoolean(SHOW_TOOL_CALLS_KEY, value) }}
+          onSystemMessages={(value) => { setShowSystemMessages(value); writeStoredBoolean(SHOW_SYSTEM_MESSAGES_KEY, value) }}
+          onClose={() => { setSheet(null) }}
+        />
+      )}
     </div>
   )
 }
@@ -410,16 +482,30 @@ export function ChatView({ session, mux, onBack }: ChatViewProps) {
 /* ── message rows ─────────────────────────────────────────────────────── */
 
 /** One rendered message row (user bubble or assistant bubble with folds). */
-function MessageRow({ message }: { message: RenderMessage }) {
+function MessageRow({ message, showToolCalls, showSystemMessages }: {
+  message: RenderMessage
+  showToolCalls: boolean
+  showSystemMessages: boolean
+}) {
+  // Injected user messages (sourceKind defined and not 'user') hide behind
+  // the system-message toggle. Assistant messages are never hidden.
+  if (message.kind === 'user'
+    && message.sourceKind !== undefined
+    && message.sourceKind !== 'user'
+    && !showSystemMessages) {
+    return null
+  }
   return (
     <div className={`chat-msg chat-msg-${message.kind}${message.pending === true ? ' chat-msg-pending' : ''}${message.failed === true ? ' chat-msg-failed' : ''}`}>
       {message.kind === 'assistant' && message.reasoning !== undefined && message.reasoning !== '' && (
         <ReasoningDisclosure text={message.reasoning} pending={message.pending === true} />
       )}
-      {message.kind === 'assistant' && message.tools !== undefined && message.tools.length > 0 && (
+      {showToolCalls && message.kind === 'assistant' && message.tools !== undefined && message.tools.length > 0 && (
         <ToolDisclosure tools={message.tools} />
       )}
-      <CollapsibleText text={message.text} />
+      {message.kind === 'assistant'
+        ? <MarkdownText text={message.text} />
+        : <CollapsibleText text={message.text} />}
       {message.failed === true && <span className="chat-msg-failtag">本次回复失败</span>}
       <span className="chat-msg-time">{formatTime(message.time)}</span>
     </div>
@@ -478,6 +564,30 @@ function ToolDisclosure({ tools }: { tools: ToolCallInfo[] }) {
   )
 }
 
+/**
+ * Assistant text rendered as GFM markdown (escape-first, protocol
+ * allow-list — see markdown.ts). Long replies collapse by clamping the
+ * rendered block height instead of slicing the source, so half-cut code
+ * fences or tables never leak malformed markup into the DOM. User
+ * messages stay plain text (CollapsibleText).
+ */
+function MarkdownText({ text }: { text: string }) {
+  const [open, setOpen] = useState(false)
+  const html = useMemo(() => renderMarkdown(text), [text])
+  const long = text.length > LONG_TEXT_LIMIT
+  const collapsed = long && !open
+  return (
+    <div className={'chat-msg-text chat-md' + (collapsed ? ' chat-md-collapsed' : '')}>
+      <div className="chat-md-body" dangerouslySetInnerHTML={{ __html: html }} />
+      {long && (
+        <button type="button" className="chat-msg-toggle" onClick={() => { setOpen(value => !value) }}>
+          {open ? '收起' : '展开全文（' + text.length + ' 字）'}
+        </button>
+      )}
+    </div>
+  )
+}
+
 /** Long assistant text collapses behind an explicit expand toggle. */
 function CollapsibleText({ text }: { text: string }) {
   const [open, setOpen] = useState(false)
@@ -756,3 +866,51 @@ function PermissionSheet({ sessionId, value, onChanged, onClose }: {
     </Sheet>
   )
 }
+
+/** The display-options sheet: tool calls and injected system messages toggles. */
+function DisplaySheet({ showToolCalls, showSystemMessages, onToolCalls, onSystemMessages, onClose }: {
+  showToolCalls: boolean
+  showSystemMessages: boolean
+  onToolCalls(value: boolean): void
+  onSystemMessages(value: boolean): void
+  onClose(): void
+}) {
+  return (
+    <Sheet title="显示" onClose={onClose}>
+      <div role="group" aria-label="显示选项">
+        <div className="sheet-toggle-row">
+          <div className="sheet-toggle-copy">
+            <span className="sheet-toggle-title">工具调用</span>
+            <span className="sheet-toggle-desc">显示助手使用的工具调用</span>
+          </div>
+          <button
+            type="button"
+            role="switch"
+            aria-label="工具调用"
+            aria-checked={showToolCalls}
+            className={`sheet-toggle-switch${showToolCalls ? ' sheet-toggle-switch-on' : ''}`}
+            onClick={() => { onToolCalls(!showToolCalls) }}
+          >
+            <span className="sheet-toggle-switch-knob" aria-hidden />
+          </button>
+        </div>
+        <div className="sheet-toggle-row">
+          <div className="sheet-toggle-copy">
+            <span className="sheet-toggle-title">系统提示词</span>
+            <span className="sheet-toggle-desc">显示注入到对话中的系统消息</span>
+          </div>
+          <button
+            type="button"
+            role="switch"
+            aria-label="系统提示词"
+            aria-checked={showSystemMessages}
+            className={`sheet-toggle-switch${showSystemMessages ? ' sheet-toggle-switch-on' : ''}`}
+            onClick={() => { onSystemMessages(!showSystemMessages) }}
+          >
+            <span className="sheet-toggle-switch-knob" aria-hidden />
+          </button>
+        </div>
+      </div>
+    </Sheet>
+  )
+}