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

package/src/mobile/markdown.ts

@@ -0,0 +1,278 @@
+/**
+ * A compact GFM-subset markdown renderer for the mobile chat: headings,
+ * paragraphs, fenced + inline code, bold/italic/strikethrough, links,
+ * images, lists, blockquotes, hr, and tables. All HTML is escaped before
+ * transformation — the output only ever contains the renderer's own tags.
+ * Dependency-free on purpose (the mobile bundle stays at ~456 KB); the
+ * escape-first + protocol allow-list design mirrors the desktop panel's
+ * preview renderer (dsh-aionui-panel/src/client/preview/markdown.ts).
+ * Pure and exported for tests.
+ * @module dsh-remote-web-ui/mobile/markdown
+ */
+
+/** Escape HTML special characters. */
+export function escapeHtml(text: string): string {
+  return text
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;')
+}
+
+/**
+ * Guard a raw link/image target against dangerous protocols. Returns the
+ * (trimmed) raw string when safe, else null. Only http:, https:, mailto:
+ * and fragment anchors (#...) are allowed; anything with another scheme
+ * — javascript:, data:, vbscript:, etc. — is rejected so the value never
+ * reaches dangerouslySetInnerHTML.
+ */
+export function safeUrl(raw: string): string | null {
+  const trimmed = raw.trim()
+  if (trimmed === '') return null
+  if (trimmed.startsWith('#')) return trimmed
+  const scheme = /^([a-zA-Z][a-zA-Z0-9+.-]*):/.exec(trimmed)
+  if (scheme === null) return trimmed
+  const name = scheme[1].toLowerCase()
+  return name === 'http' || name === 'https' || name === 'mailto' ? trimmed : null
+}
+
+/** Find the ')' closing a link/image target, skipping nested parens. */
+function findCloseParen(text: string, from: number): number {
+  let depth = 0
+  for (let i = from; i < text.length; i += 1) {
+    const char = text[i]
+    if (char === '(') depth += 1
+    else if (char === ')') {
+      if (depth === 0) return i
+      depth -= 1
+    }
+  }
+  return -1
+}
+
+/** Inline pass: code spans, bold, italic, strikethrough, images, links. */
+export function renderInline(text: string): string {
+  let out = ''
+  let i = 0
+  const n = text.length
+  while (i < n) {
+    const char = text[i]
+    // Fenced inline code first.
+    if (char === '`') {
+      const end = text.indexOf('`', i + 1)
+      if (end !== -1) {
+        out += '<code>' + escapeHtml(text.slice(i + 1, end)) + '</code>'
+        i = end + 1
+        continue
+      }
+    }
+    // Image ![alt](src)
+    if (char === '!' && text[i + 1] === '[') {
+      const close = text.indexOf('](', i + 2)
+      if (close !== -1) {
+        const parenEnd = findCloseParen(text, close + 2)
+        if (parenEnd !== -1) {
+          const alt = text.slice(i + 2, close)
+          const src = text.slice(close + 2, parenEnd)
+          const safe = safeUrl(src)
+          if (safe === null) {
+            out += escapeHtml(alt)
+          } else {
+            const srcEsc = escapeHtml(safe).replace(/\s+/g, '%20')
+            out += '<img alt="' + escapeHtml(alt) + '" src="' + srcEsc + '" />'
+          }
+          i = parenEnd + 1
+          continue
+        }
+      }
+    }
+    // Link [text](href)
+    if (char === '[') {
+      const close = text.indexOf('](', i + 1)
+      if (close !== -1) {
+        const parenEnd = findCloseParen(text, close + 2)
+        if (parenEnd !== -1) {
+          const label = text.slice(i + 1, close)
+          const href = text.slice(close + 2, parenEnd)
+          const safe = safeUrl(href)
+          if (safe === null) {
+            out += renderInline(label)
+          } else {
+            out += '<a href="' + escapeHtml(safe) + '" target="_blank" rel="noopener noreferrer">' + renderInline(label) + '</a>'
+          }
+          i = parenEnd + 1
+          continue
+        }
+      }
+    }
+    // Bold **text**
+    if (char === '*' && text[i + 1] === '*') {
+      const end = text.indexOf('**', i + 2)
+      if (end !== -1) {
+        out += '<strong>' + renderInline(text.slice(i + 2, end)) + '</strong>'
+        i = end + 2
+        continue
+      }
+    }
+    // Italic *text*
+    if (char === '*' && text[i - 1] !== '*' && text[i + 1] !== '*') {
+      const end = text.indexOf('*', i + 1)
+      if (end !== -1 && text[end + 1] !== '*') {
+        out += '<em>' + renderInline(text.slice(i + 1, end)) + '</em>'
+        i = end + 1
+        continue
+      }
+    }
+    // Strikethrough ~~text~~
+    if (char === '~' && text[i + 1] === '~') {
+      const end = text.indexOf('~~', i + 2)
+      if (end !== -1) {
+        out += '<del>' + renderInline(text.slice(i + 2, end)) + '</del>'
+        i = end + 2
+        continue
+      }
+    }
+    out += escapeHtml(char)
+    i += 1
+  }
+  return out
+}
+
+/** Render a markdown document to HTML (block pass). */
+export function renderMarkdown(source: string): string {
+  const lines = source.replace(/\r\n/g, '\n').split('\n')
+  const out: string[] = []
+  let i = 0
+  const n = lines.length
+
+  const flushParagraph = (buffer: string[]): void => {
+    if (buffer.length === 0) return
+    out.push('<p>' + renderInline(buffer.join('\n')) + '</p>')
+    buffer.length = 0
+  }
+
+  let paragraph: string[] = []
+  while (i < n) {
+    const line = lines[i]
+
+    // Fenced code block.
+    const fence = /^```([\w+-]*)\s*$/.exec(line)
+    if (fence !== null) {
+      flushParagraph(paragraph)
+      const lang = fence[1] ?? ''
+      i += 1
+      const code: string[] = []
+      while (i < n && !/^```\s*$/.test(lines[i])) {
+        code.push(lines[i])
+        i += 1
+      }
+      i += 1 // closing fence
+      const langAttr = lang === '' ? '' : ' class="language-' + escapeHtml(lang) + '"'
+      out.push('<pre' + langAttr + '><code>' + escapeHtml(code.join('\n')) + '</code></pre>')
+      continue
+    }
+
+    // Heading.
+    const heading = /^(#{1,6})\s+(.*)$/.exec(line)
+    if (heading !== null) {
+      flushParagraph(paragraph)
+      const level = heading[1].length
+      out.push('<h' + level + '>' + renderInline(heading[2] ?? '') + '</h' + level + '>')
+      i += 1
+      continue
+    }
+
+    // Horizontal rule.
+    if (/^\s*(---+|\*\*\*+|___+)\s*$/.test(line)) {
+      flushParagraph(paragraph)
+      out.push('<hr />')
+      i += 1
+      continue
+    }
+
+    // Table: header row then separator row.
+    if (line.includes('|') && i + 1 < n && /^\s*\|?[\s:|-]+\|?\s*$/.test(lines[i + 1]) && lines[i + 1].includes('-')) {
+      flushParagraph(paragraph)
+      const headerCells = splitTableRow(line)
+      i += 2
+      const rows: string[][] = []
+      while (i < n && lines[i].includes('|')) {
+        rows.push(splitTableRow(lines[i]))
+        i += 1
+      }
+      out.push('<table>')
+      out.push('<thead><tr>' + headerCells.map((cell) => '<th>' + renderInline(cell) + '</th>').join('') + '</tr></thead>')
+      if (rows.length > 0) {
+        out.push('<tbody>' + rows.map((row) => '<tr>' + row.map((cell) => '<td>' + renderInline(cell) + '</td>').join('') + '</tr>').join('') + '</tbody>')
+      }
+      out.push('</table>')
+      continue
+    }
+
+    // Blockquote (one level).
+    const quote = /^>\s?(.*)$/.exec(line)
+    if (quote !== null) {
+      flushParagraph(paragraph)
+      const body: string[] = []
+      while (i < n) {
+        const q = /^>\s?(.*)$/.exec(lines[i])
+        if (q === null) break
+        body.push(q[1] ?? '')
+        i += 1
+      }
+      out.push('<blockquote><p>' + body.map((bodyLine) => renderInline(bodyLine)).join('<br />') + '</p></blockquote>')
+      continue
+    }
+
+    // Unordered list.
+    const ul = /^\s*([-*+])\s+(.*)$/.exec(line)
+    if (ul !== null) {
+      flushParagraph(paragraph)
+      const items: string[] = []
+      while (i < n) {
+        const item = /^\s*([-*+])\s+(.*)$/.exec(lines[i])
+        if (item === null) break
+        items.push('<li>' + renderInline(item[2] ?? '') + '</li>')
+        i += 1
+      }
+      out.push('<ul>' + items.join('') + '</ul>')
+      continue
+    }
+
+    // Ordered list.
+    const ol = /^\s*\d+[.)]\s+(.*)$/.exec(line)
+    if (ol !== null) {
+      flushParagraph(paragraph)
+      const items: string[] = []
+      while (i < n) {
+        const item = /^\s*\d+[.)]\s+(.*)$/.exec(lines[i])
+        if (item === null) break
+        items.push('<li>' + renderInline(item[1] ?? '') + '</li>')
+        i += 1
+      }
+      out.push('<ol>' + items.join('') + '</ol>')
+      continue
+    }
+
+    // Blank line: flush the paragraph.
+    if (line.trim() === '') {
+      flushParagraph(paragraph)
+      i += 1
+      continue
+    }
+
+    paragraph.push(line)
+    i += 1
+  }
+  flushParagraph(paragraph)
+  return out.join('\n')
+}
+
+/** Split one table row into cells (respecting the leading/trailing pipes). */
+function splitTableRow(line: string): string[] {
+  const trimmed = line.trim()
+  const inner = trimmed.startsWith('|') ? trimmed.slice(1) : trimmed
+  const withoutTrailing = inner.endsWith('|') ? inner.slice(0, -1) : inner
+  return withoutTrailing.split('|').map((cell) => cell.trim())
+}

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