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

package/src/mobile/messages.test.ts

@@ -219,4 +219,110 @@ describe('foldEvents', () => {
     foldEvents([makeEvent('assistant/message', assistantMessageData('a-1', 0, 0, 'world'), 1)], first)
     expect(JSON.stringify(first)).toBe(snapshot)
   })
+
+  it('request/context sets the context window used by a later assistant/message with usage', () => {
+    const events: WireEvent[] = [
+      makeEvent('request/context', { provider: 'fx', model: 'fx-1', contextWindow: 100_000 }, 0),
+      makeEvent('user/message', userMessageData('u-1', 'hi'), 1),
+      makeEvent('assistant/message', {
+        turn: 0,
+        step: 0,
+        message: { id: 'a-1', role: 'assistant', content: [{ type: 'text', text: 'ok' }] },
+        usage: { inputTokens: 10, outputTokens: 5 },
+      }, 2),
+    ]
+    const result = foldEvents(events)
+    const assistant = result.find(message => message.kind === 'assistant')
+    expect(assistant).toMatchObject({
+      usage: { inputTokens: 10, outputTokens: 5 },
+      contextWindow: 100_000,
+    })
+  })
+
+  it('usage without a context window carries no contextWindow', () => {
+    const events: WireEvent[] = [
+      makeEvent('user/message', userMessageData('u-1', 'hi'), 0),
+      makeEvent('assistant/message', {
+        turn: 0,
+        step: 0,
+        message: { id: 'a-1', role: 'assistant', content: [{ type: 'text', text: 'ok' }] },
+        usage: { inputTokens: 10, outputTokens: 5 },
+      }, 1),
+    ]
+    const result = foldEvents(events)
+    const assistant = result.find(message => message.kind === 'assistant')
+    expect(assistant).toMatchObject({ usage: { inputTokens: 10, outputTokens: 5 } })
+    expect(assistant?.contextWindow).toBeUndefined()
+  })
+
+  it('usage and contextWindow are both attached when request/context precedes the message', () => {
+    const events: WireEvent[] = [
+      makeEvent('request/context', { provider: 'fx', model: 'fx-1', contextWindow: 200_000 }, 0),
+      makeEvent('user/message', userMessageData('u-1', 'hi'), 1),
+      makeEvent('assistant/message', {
+        turn: 0,
+        step: 0,
+        message: { id: 'a-1', role: 'assistant', content: [{ type: 'text', text: 'ok' }] },
+        usage: { inputTokens: 30, outputTokens: 2, cacheReadTokens: 8, cacheWriteTokens: 1 },
+      }, 2),
+    ]
+    const result = foldEvents(events)
+    const assistant = result.find(message => message.kind === 'assistant')
+    expect(assistant).toMatchObject({
+      usage: { inputTokens: 30, outputTokens: 2, cacheReadTokens: 8, cacheWriteTokens: 1 },
+      contextWindow: 200_000,
+    })
+  })
+
+  it('assistant/message without usage has no usage field', () => {
+    const events: WireEvent[] = [
+      makeEvent('user/message', userMessageData('u-1', 'hi'), 0),
+      makeEvent('assistant/message', { turn: 0, step: 0, message: { id: 'a-1', role: 'assistant', content: [{ type: 'text', text: 'ok' }] } }, 1),
+    ]
+    const result = foldEvents(events)
+    const assistant = result.find(message => message.kind === 'assistant')
+    expect(assistant?.usage).toBeUndefined()
+    expect(assistant?.contextWindow).toBeUndefined()
+  })
+
+  it('attaches sourceKind from source.kind for a user message', () => {
+    const events: WireEvent[] = [
+      makeEvent('user/message', {
+        id: 'u-plugin',
+        role: 'user',
+        content: [{ type: 'text', text: '系统注入' }],
+        source: { kind: 'plugin', name: 'react-extension' },
+      }, 0),
+    ]
+    const result = foldEvents(events)
+    expect(result[0]).toMatchObject({ id: 'u-plugin', kind: 'user', sourceKind: 'plugin' })
+  })
+
+  it('keeps sourceKind on a replayed/replaced user/message', () => {
+    const first = foldEvents([makeEvent('user/message', {
+      id: 'u-1',
+      role: 'user',
+      content: [{ type: 'text', text: '第一版' }],
+      source: { kind: 'plugin' },
+    }, 0)])
+    const second = foldEvents([makeEvent('user/message', {
+      id: 'u-1',
+      role: 'user',
+      content: [{ type: 'text', text: '第二版' }],
+      source: { kind: 'plugin' },
+    }, 1)], first)
+    expect(second[0]).toMatchObject({ id: 'u-1', text: '第二版', sourceKind: 'plugin' })
+  })
+
+  it('request/context and unknown events are still ignored by the fold', () => {
+    const events: WireEvent[] = [
+      makeEvent('some/future-event', { nope: true }, 0),
+      makeEvent('request/context', { provider: 'fx', model: 'fx-1' }, 1),
+      makeEvent('user/message', userMessageData('u-1', '真实消息'), 2),
+    ]
+    const result = foldEvents(events)
+    // request/context with no window and the unknown event render nothing.
+    expect(result).toHaveLength(1)
+    expect(result[0]).toMatchObject({ id: 'u-1', kind: 'user' })
+  })
 })

package/src/mobile/messages.ts

@@ -68,6 +68,20 @@ export interface RenderMessage {
   readonly toolSummary?: string
   /** Set when the owning turn ended in an error. */
   readonly failed?: boolean
+  /**
+   * Token usage reported by the final assistant event. cacheReadTokens and
+   * cacheWriteTokens are only attached when the wire carried finite values.
+   */
+  readonly usage?: {
+    inputTokens: number
+    outputTokens: number
+    cacheReadTokens?: number
+    cacheWriteTokens?: number
+  }
+  /** Context window for the model that produced this message (from request/context). */
+  readonly contextWindow?: number
+  /** Wire source.kind of a user message (e.g. plugin or user). */
+  readonly sourceKind?: string
 }
 
 /** One tool call attached to an assistant message (callId dedupes repeats). */
@@ -199,6 +213,8 @@ interface FoldState {
   messageTurn: Map<string, number>
   /** Deduped tool names per assistant message id. */
   toolNames: Map<string, Set<string>>
+  /** Context window for the current model (from request/context). */
+  contextWindow?: number
 }
 
 function createState(existing: readonly RenderMessage[] | undefined): FoldState {
@@ -294,6 +310,14 @@ function applyEvent(state: FoldState, event: WireEvent): void {
     case 'tool/call':
       applyToolCall(state, event)
       break
+    case 'request/context': {
+      // Wire shape: { provider, model, contextWindow? }. A present finite
+      // contextWindow seeds every later assistant message that reports usage.
+      const data = isRecord(event.data) ? event.data : {}
+      const window = pickNumber(data['contextWindow'])
+      if (window !== undefined) state.contextWindow = window
+      break
+    }
     // turn/start, session/end-seed, and every other/unknown type render nothing.
     default:
       break
@@ -304,13 +328,28 @@ function applyUserMessage(state: FoldState, event: WireEvent): void {
   const data = isRecord(event.data) ? event.data : {}
   const id = pickString(data['id']) ?? syntheticId('user', event.seq)
   const text = textFromContent(data['content'])
+  const source = isRecord(data['source']) ? data['source'] : {}
+  const sourceKind = pickString(source['kind'])
   const existing = state.byId.get(id)
   if (existing !== undefined) {
     // Idempotent replace (replayed events update in place, never duplicate).
-    replaceMessage(state, existing, { ...existing, text, seq: event.seq, time: event.time })
+    replaceMessage(state, existing, {
+      ...existing,
+      ...(sourceKind !== undefined ? { sourceKind } : {}),
+      text,
+      seq: event.seq,
+      time: event.time,
+    })
     return
   }
-  const message: RenderMessage = { id, kind: 'user', text, seq: event.seq, time: event.time }
+  const message: RenderMessage = {
+    id,
+    kind: 'user',
+    text,
+    ...(sourceKind !== undefined ? { sourceKind } : {}),
+    seq: event.seq,
+    time: event.time,
+  }
   state.messages.push(message)
   state.byId.set(id, message)
 }
@@ -324,6 +363,8 @@ function applyAssistantMessage(state: FoldState, event: WireEvent): void {
   const finalText = textFromContent(messageData['content'])
   const finalReasoning = reasoningFromContent(messageData['content'])
   const key = tsKey(turn, step)
+  const usage = usageFromData(data)
+  const contextWindow = state.contextWindow
 
   // Finalize the matching assistant message (by id, or by turn/step for the
   // streaming partial that chunks built before the final event arrived).
@@ -338,6 +379,8 @@ function applyAssistantMessage(state: FoldState, event: WireEvent): void {
       // The final content block list is authoritative; an adapter that omits
       // reasoning from the final message keeps the streamed reasoning text.
       ...(finalReasoning !== '' ? { reasoning: finalReasoning } : {}),
+      ...(usage !== undefined ? { usage } : {}),
+      ...(usage !== undefined && contextWindow !== undefined ? { contextWindow } : {}),
       seq: event.seq,
       time: event.time,
       pending: false,
@@ -353,6 +396,8 @@ function applyAssistantMessage(state: FoldState, event: WireEvent): void {
     kind: 'assistant',
     text: finalText,
     ...(finalReasoning !== '' ? { reasoning: finalReasoning } : {}),
+    ...(usage !== undefined ? { usage } : {}),
+    ...(usage !== undefined && contextWindow !== undefined ? { contextWindow } : {}),
     seq: event.seq,
     time: event.time,
   }
@@ -365,6 +410,25 @@ function applyAssistantMessage(state: FoldState, event: WireEvent): void {
   if (turn !== undefined) state.messageTurn.set(id, turn)
 }
 
+/**
+ * Extract token usage from an assistant event payload. Only attaches when the
+ * wire carries finite `inputTokens` AND `outputTokens`; the cache fields are
+ * included only for finite numbers.
+ */
+function usageFromData(data: Record<string, unknown>): { inputTokens: number; outputTokens: number; cacheReadTokens?: number; cacheWriteTokens?: number } | undefined {
+  const usageData = data['usage']
+  if (!isRecord(usageData)) return undefined
+  const inputTokens = pickNumber(usageData['inputTokens'])
+  const outputTokens = pickNumber(usageData['outputTokens'])
+  if (inputTokens === undefined || outputTokens === undefined) return undefined
+  const usage: { inputTokens: number; outputTokens: number; cacheReadTokens?: number; cacheWriteTokens?: number } = { inputTokens, outputTokens }
+  const cacheReadTokens = pickNumber(usageData['cacheReadTokens'])
+  const cacheWriteTokens = pickNumber(usageData['cacheWriteTokens'])
+  if (cacheReadTokens !== undefined) usage.cacheReadTokens = cacheReadTokens
+  if (cacheWriteTokens !== undefined) usage.cacheWriteTokens = cacheWriteTokens
+  return usage
+}
+
 function applyChunk(state: FoldState, event: WireEvent): void {
   const target = chunkTarget(event.data)
   if (target === null) return

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()
+  })
+})