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

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

@@ -3,7 +3,7 @@
 import { afterAll, afterEach, beforeAll, beforeEach, describe, expect, it, vi } from 'vitest'
 import { act, cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react'
 import type { SessionModels } from '@deepseek-ai/dsh-host-apiproxy/api/sessions'
-import { ChatView, MAX_TAIL_BUFFER_EVENTS } from './ChatView.tsx'
+import { ChatView, MAX_TAIL_BUFFER_EVENTS, LONG_TEXT_LIMIT } from './ChatView.tsx'
 import { type SessionView } from './App.tsx'
 import type { HistoryPage } from '../api.ts'
 import type { WireEvent } from '../messages.ts'
@@ -15,6 +15,8 @@ vi.mock('../api.ts', () => ({
   models: vi.fn(),
   selectModel: vi.fn(),
   sendCommand: vi.fn(),
+  cancelSession: vi.fn(),
+  fetchPending: vi.fn(),
 }))
 vi.mock('./App.tsx', async importOriginal => {
   const actual = await importOriginal<typeof import('./App.tsx')>()
@@ -24,7 +26,7 @@ vi.mock('./App.tsx', async importOriginal => {
     prompt: vi.fn(async () => {}),
   }
 })
-import { fetchMobilePreferences, models, selectModel, sendCommand } from '../api.ts'
+import { fetchMobilePreferences, models, selectModel, sendCommand, cancelSession, fetchPending } from '../api.ts'
 import { loadHistory, prompt } from './App.tsx'
 
 const session: SessionView = {
@@ -45,6 +47,18 @@ function historyPage(events: Array<{ event: WireEvent }>, extra: Record<string,
   return { events: events as never, hasMore: false, ...extra } as HistoryPage
 }
 
+/** 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)
+  }
+}
+
 /** A full turn: user message, reasoning + text chunks, tool calls, final message. */
 function turnEvents(): Array<{ event: WireEvent }> {
   return [
@@ -72,6 +86,8 @@ const fetchMobilePreferencesMock = vi.mocked(fetchMobilePreferences)
 const modelsMock = vi.mocked(models)
 const selectModelMock = vi.mocked(selectModel)
 const sendCommandMock = vi.mocked(sendCommand)
+const cancelSessionMock = vi.mocked(cancelSession)
+const fetchPendingMock = vi.mocked(fetchPending)
 const loadHistoryMock = vi.mocked(loadHistory)
 const promptMock = vi.mocked(prompt)
 
@@ -95,6 +111,8 @@ beforeEach(() => {
   } satisfies SessionModels)
   selectModelMock.mockResolvedValue({ selected: { provider: 'fx', model: 'fx-2', reasoningEffort: 'high' } })
   sendCommandMock.mockResolvedValue({})
+  cancelSessionMock.mockResolvedValue({ accepted: true })
+  fetchPendingMock.mockResolvedValue({ approvals: [], questions: [] })
 })
 
 afterEach(() => {
@@ -639,3 +657,160 @@ describe('ChatView display toggles and context usage', () => {
     expect(screen.queryByText(/上下文/)).toBeNull()
   })
 })
+
+describe('ChatView stop button (#1041)', () => {
+  /** Emit one session lifecycle frame for the chat's session. */
+  function emitSessionEvent(mux: FakeMux, type: string, seq: number): void {
+    act(() => {
+      mux.emit({ type: 'session/event', sessionId: 's-1', event: makeEntry(type, {}, seq).event })
+    })
+  }
+
+  it('switches the composer primary to a stop button while running and cancels the turn', async () => {
+    loadHistoryMock.mockResolvedValue(historyPage([]))
+    const mux = new FakeMux()
+    render(<ChatView session={session} mux={mux as never} onBack={() => {}} />)
+
+    // Idle: the primary button is the (empty-draft disabled) send button.
+    const sendButton = await screen.findByRole('button', { name: '发送' })
+    expect((sendButton as HTMLButtonElement).disabled).toBe(true)
+
+    // Turn starts: the primary becomes an enabled stop button (square icon).
+    emitSessionEvent(mux, 'turn/start', 1)
+    const stopButton = (await screen.findByRole('button', { name: '停止' })) as HTMLButtonElement
+    expect(stopButton.disabled).toBe(false)
+
+    fireEvent.click(stopButton)
+    await waitFor(() => expect(cancelSessionMock).toHaveBeenCalledWith('s-1'))
+
+    // Turn ends: the primary flips back to send.
+    emitSessionEvent(mux, 'turn/end', 2)
+    expect(await screen.findByRole('button', { name: '发送' })).toBeTruthy()
+  })
+
+  it('disables the stop button while the cancel request is in flight', async () => {
+    loadHistoryMock.mockResolvedValue(historyPage([]))
+    let resolveCancel: (() => void) | undefined
+    cancelSessionMock.mockReturnValue(new Promise<{ accepted: true }>((resolve) => {
+      resolveCancel = () => { resolve({ accepted: true }) }
+    }))
+    const mux = new FakeMux()
+    render(<ChatView session={session} mux={mux as never} onBack={() => {}} />)
+    await screen.findByRole('button', { name: '发送' })
+
+    emitSessionEvent(mux, 'turn/start', 1)
+    const stopButton = (await screen.findByRole('button', { name: '停止' })) as HTMLButtonElement
+    fireEvent.click(stopButton)
+
+    // In flight: disabled and re-labeled; a second tap cannot double-submit.
+    const inflight = (await screen.findByRole('button', { name: '停止中' })) as HTMLButtonElement
+    expect(inflight.disabled).toBe(true)
+    fireEvent.click(inflight)
+    expect(cancelSessionMock).toHaveBeenCalledTimes(1)
+
+    await act(async () => { resolveCancel?.() })
+    emitSessionEvent(mux, 'turn/end', 2)
+    expect(await screen.findByRole('button', { name: '发送' })).toBeTruthy()
+  })
+
+  it('surfaces a cancel failure through the chat error line', async () => {
+    loadHistoryMock.mockResolvedValue(historyPage([]))
+    cancelSessionMock.mockRejectedValue(new Error('cancel exploded'))
+    const mux = new FakeMux()
+    render(<ChatView session={session} mux={mux as never} onBack={() => {}} />)
+    await screen.findByRole('button', { name: '发送' })
+
+    emitSessionEvent(mux, 'turn/start', 1)
+    fireEvent.click(await screen.findByRole('button', { name: '停止' }))
+    expect(await screen.findByText(/cancel exploded/)).toBeTruthy()
+  })
+})
+
+describe('ChatView message visibility and long text folding (#1065)', () => {
+  const toolOnlyEvents = (): 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: [] },
+    }, 1),
+    makeEntry('tool/call', { turn: 0, step: 0, callId: 'c1', name: 'read_file', arguments: '{"path":"/a"}' }, 2),
+  ]
+
+  it('hides assistant message completely (no air bubble) when only tool calls exist and tool toggle is off', async () => {
+    loadHistoryMock.mockResolvedValue(historyPage(toolOnlyEvents()))
+    const { container } = render(<ChatView session={session} onBack={() => {}} />)
+
+    expect(await screen.findByText('查询文件')).toBeTruthy()
+    // By default showToolCalls is true, tool disclosure is visible
+    expect(await screen.findByRole('button', { name: /工具/ })).toBeTruthy()
+
+    // Turn off tool-calls toggle
+    fireEvent.click(screen.getByRole('button', { name: /显示/ }))
+    const toolSwitch = await screen.findByRole('switch', { name: '工具调用' })
+    fireEvent.click(toolSwitch)
+
+    // The tool disclosure is gone, and the entire assistant message bubble is not rendered (no air bubble)
+    expect(screen.queryByRole('button', { name: /工具/ })).toBeNull()
+    const msgElements = container.querySelectorAll('.chat-msg')
+    expect(msgElements.length).toBe(1)
+    expect(msgElements[0]?.classList.contains('chat-msg-user')).toBe(true)
+  })
+
+  it('renders failed tag even if assistant message has no text or reasoning', async () => {
+    loadHistoryMock.mockResolvedValue(historyPage([
+      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: [] },
+      }, 1),
+      makeEntry('turn/end', { turn: 0, reason: { kind: 'error', message: 'timeout' } }, 2),
+    ]))
+    render(<ChatView session={session} onBack={() => {}} />)
+
+    expect(await screen.findByText('测试失败')).toBeTruthy()
+    expect(await screen.findByText('本次回复失败')).toBeTruthy()
+  })
+
+  it('collapses terminal assistant text exceeding LONG_TEXT_LIMIT and toggles open/close', async () => {
+    const longText = 'A'.repeat(LONG_TEXT_LIMIT + 100)
+    loadHistoryMock.mockResolvedValue(historyPage([
+      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: longText }] },
+      }, 1),
+    ]))
+    const { container } = render(<ChatView session={session} onBack={() => {}} />)
+
+    expect(await screen.findByText('生成长文本')).toBeTruthy()
+    const toggleButton = await screen.findByRole('button', { name: new RegExp(`展开全文（${LONG_TEXT_LIMIT + 100} 字）`) })
+    expect(toggleButton).toBeTruthy()
+    expect(container.querySelector('.chat-md-collapsed')).not.toBeNull()
+
+    // Expand
+    fireEvent.click(toggleButton)
+    expect(await screen.findByRole('button', { name: '收起' })).toBeTruthy()
+    expect(container.querySelector('.chat-md-collapsed')).toBeNull()
+  })
+
+  it('does not collapse terminal assistant text within LONG_TEXT_LIMIT', async () => {
+    const shortText = 'B'.repeat(LONG_TEXT_LIMIT)
+    loadHistoryMock.mockResolvedValue(historyPage([
+      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: shortText }] },
+      }, 1),
+    ]))
+    const { container } = render(<ChatView session={session} onBack={() => {}} />)
+
+    expect(await screen.findByText('生成中等文本')).toBeTruthy()
+    expect(screen.queryByRole('button', { name: /展开全文/ })).toBeNull()
+    expect(container.querySelector('.chat-md-collapsed')).toBeNull()
+  })
+})
+

package/src/mobile/views/ChatView.tsx

@@ -16,7 +16,7 @@ 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, fetchPending, respondApproval, respondQuestion } from '../api.ts'
+import { fetchMobilePreferences, models, selectModel, sendCommand, cancelSession, fetchPending, respondApproval, respondQuestion } from '../api.ts'
 import type { PendingApproval, PendingQuestionItem } from '../api.ts'
 import { EventFolder, foldEvents, type RenderMessage, type ToolCallInfo, type WireEvent } from '../messages.ts'
 import { renderMarkdown } from '../markdown.ts'
@@ -167,6 +167,8 @@ export function ChatView({ session, mux, onBack }: ChatViewProps) {
   const [mobileEnterToSend, setMobileEnterToSend] = useState(true)
   /** Whether the assistant is currently generating (turn/start..turn/end). */
   const [running, setRunning] = useState(false)
+  /** Whether a stop request is in flight (guards the composer's stop button). */
+  const [stopping, setStopping] = useState(false)
   /** Pending tool approvals awaiting user decision (#1025). */
   const [pendingApprovals, setPendingApprovals] = useState<PendingApproval[]>([])
   /** Pending questions awaiting user answer (#1025). */
@@ -441,6 +443,24 @@ export function ChatView({ session, mux, onBack }: ChatViewProps) {
     )
   }, [input, sending, session.sessionId])
 
+  /**
+   * Stop the active turn (desktop parity: the composer's primary button
+   * becomes a stop button while running). The turn/end frame arriving over
+   * mux flips the button back; a failed request surfaces through the chat
+   * error line.
+   */
+  const stopTurn = useCallback(() => {
+    if (stopping) return
+    setStopping(true)
+    void cancelSession(session.sessionId).then(
+      () => { setStopping(false) },
+      (reason: unknown) => {
+        setStopping(false)
+        setError(errorText(reason))
+      },
+    )
+  }, [stopping, session.sessionId])
+
   const modelLabel = currentModel?.model ?? '模型'
   const permissionLabel = permissions === undefined
     ? undefined
@@ -547,8 +567,18 @@ export function ChatView({ session, mux, onBack }: ChatViewProps) {
             }
           }}
         />
-        <button type="button" className="chat-send" disabled={sending || input.trim() === ''} onClick={() => { void send() }}>
-          {sending ? '发送中…' : '发送'}
+        <button
+          type="button"
+          className={running ? 'chat-send chat-send-stop' : 'chat-send'}
+          {...(running ? { 'aria-label': stopping ? '停止中' : '停止' } : {})}
+          disabled={running ? stopping : sending || input.trim() === ''}
+          onClick={() => { if (running) void stopTurn(); else void send() }}
+        >
+          {running ? (
+            <svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true" focusable="false">
+              <rect x="3" y="3" width="10" height="10" rx="3" fill="currentColor" />
+            </svg>
+          ) : sending ? '发送中…' : '发送'}
         </button>
       </div>
       {sheet === 'model' && (
@@ -595,13 +625,21 @@ const MessageRow = memo(function MessageRow({ message, showToolCalls, showSystem
   showSystemMessages: boolean
 }) {
   // Injected user messages (sourceKind defined and not 'user') hide behind
-  // the system-message toggle. Assistant messages are never hidden.
+  // the system-message toggle.
   if (message.kind === 'user'
     && message.sourceKind !== undefined
     && message.sourceKind !== 'user'
     && !showSystemMessages) {
     return null
   }
+  const hasReasoning = message.kind === 'assistant' && message.reasoning !== undefined && message.reasoning !== ''
+  const hasTools = showToolCalls && message.kind === 'assistant' && message.tools !== undefined && message.tools.length > 0
+  const hasText = message.text !== ''
+  const hasFailTag = message.failed === true
+
+  if (!hasReasoning && !hasTools && !hasText && !hasFailTag) {
+    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 !== '' && (
@@ -750,7 +788,7 @@ function MarkdownText({ text, pending }: { text: string; pending: boolean }) {
       if (timerRef.current !== undefined) clearTimeout(timerRef.current)
     }
   }, [])
-  const long = text.length > LONG_TEXT_LIMIT
+  const long = !pending && text.length > LONG_TEXT_LIMIT
   const collapsed = long && !open
   return (
     <div className={'chat-msg-text chat-md' + (collapsed ? ' chat-md-collapsed' : '')}>
@@ -781,7 +819,7 @@ function CollapsibleText({ text }: { text: string }) {
   )
 }
 
-const LONG_TEXT_LIMIT = 1600
+export const LONG_TEXT_LIMIT = 6000
 const LONG_TEXT_PREVIEW = 800
 
 /** Latest non-empty line of a streaming reasoning buffer. */

package/src/mobile-api.ts

@@ -53,6 +53,7 @@ const MOBILE_ALLOWLIST = new Set([
   'session.models',
   'session.selectModel',
   'session.rename',
+  'session.cancel',
 ])
 
 /**
@@ -63,6 +64,8 @@ const MOBILE_ALLOWLIST = new Set([
 const MOBILE_PREFERENCES_METHOD = 'mobile.preferences'
 const MOBILE_PENDING_METHOD = 'mobile.pending'
 const MOBILE_RESPOND_METHOD = 'mobile.respond'
+/** Execute a slash command through the host command registry (#1125). */
+const MOBILE_COMMAND_METHOD = 'mobile.command'
 
 /** One session.list page (thin phones load incrementally). */
 const SESSION_PAGE_SIZE = 20
@@ -101,6 +104,19 @@ export interface MobileApiDeps {
   mobileEnterToSend: () => boolean
   /** SSE keep-alive ping cadence for the mux stream (default 15000 ms; test seam). */
   eventsHeartbeatMs?: number
+  /**
+   * Optional command dispatcher for executing slash commands on the mobile
+   * surface. When absent, `mobile.command` returns an error; the mobile UI
+   * can still fall back to `session.prompt` (which sends the line to the
+   * model, not the command registry).
+   */
+  commandDispatcher?: {
+    execute(
+      sessionId: string,
+      line: string,
+      signal: AbortSignal,
+    ): Promise<{ ok: true; result: unknown } | { error: string }>
+  }
 }
 
 /** Mobile API route paths. */
@@ -160,6 +176,7 @@ export function makeMobileApiRoutes(deps: MobileApiDeps): WebRoute[] {
     const local = method === MOBILE_PREFERENCES_METHOD 
       || method === MOBILE_PENDING_METHOD 
       || method === MOBILE_RESPOND_METHOD
+      || method === MOBILE_COMMAND_METHOD
     if (!MOBILE_ALLOWLIST.has(method) && !local) {
       writeJson(res, 403, { ok: false, error: { code: 'forbidden', message: `method ${method} is not exposed to the mobile surface` } })
       return
@@ -212,6 +229,49 @@ export function makeMobileApiRoutes(deps: MobileApiDeps): WebRoute[] {
             result: { ok: false, error: { code: 'internal', message } },
           })
         }
+      } else if (method === MOBILE_COMMAND_METHOD) {
+        const payload = parsed.payload as { sessionId?: string; line?: string } | undefined
+        const sessionId = payload?.sessionId
+        const line = payload?.line
+        if (typeof sessionId !== 'string' || typeof line !== 'string') {
+          writeJson(res, 200, {
+            type: 'server-response',
+            rpcId,
+            result: { ok: false, error: { code: 'bad-request', message: 'missing sessionId or line' } },
+          })
+        } else if (deps.commandDispatcher === undefined) {
+          writeJson(res, 200, {
+            type: 'server-response',
+            rpcId,
+            result: { ok: false, error: { code: 'unavailable', message: 'command dispatcher is not available' } },
+          })
+        } else {
+          try {
+            const abort = new AbortController()
+            res.on('close', () => { if (!res.writableEnded) abort.abort() })
+            const outcome = await deps.commandDispatcher.execute(sessionId, line, abort.signal)
+            if ('error' in outcome) {
+              writeJson(res, 200, {
+                type: 'server-response',
+                rpcId,
+                result: { ok: false, error: { code: outcome.error, message: outcome.error } },
+              })
+            } else {
+              writeJson(res, 200, {
+                type: 'server-response',
+                rpcId,
+                result: { ok: true, value: { matched: true, result: outcome.result } },
+              })
+            }
+          } catch (error) {
+            const message = error instanceof Error ? error.message : String(error)
+            writeJson(res, 200, {
+              type: 'server-response',
+              rpcId,
+              result: { ok: false, error: { code: 'internal', message } },
+            })
+          }
+        }
       }
       return
     }
@@ -353,5 +413,6 @@ async function dispatch(apiProxy: ApiProxy, method: string, payload: unknown, rp
   if (method === 'session.models') return wrap(await apiProxy.sessions.models(request as never))
   if (method === 'session.selectModel') return wrap(await apiProxy.sessions.selectModel(request as never))
   if (method === 'session.rename') return wrap(await apiProxy.sessions.rename(request as never))
+  if (method === 'session.cancel') return wrap(await apiProxy.sessions.cancel(request as never))
   throw new Error(`unhandled allowlisted method ${method}`)
 }

package/src/mobile-routes.ts

@@ -8,6 +8,7 @@
 import { readFile } from 'node:fs/promises'
 import { existsSync } from 'node:fs'
 import { fileURLToPath } from 'node:url'
+import { gzipSync } from 'node:zlib'
 import type { IncomingMessage, ServerResponse } from 'node:http'
 import type { WebRoute } from '@deepseek-ai/dsh-host-webserver'
 
@@ -147,7 +148,8 @@ export function makeMobileRoutes(): WebRoute[] {
   // The bundle is immutable for the process lifetime (a rebuild requires a
   // host restart), so the body is read from disk once, not per phone.
   let bundleBody: string | undefined
-  const handleBundle = async (_req: IncomingMessage, res: ServerResponse): Promise<void> => {
+  let bundleGzip: Buffer | undefined
+  const handleBundle = async (req: IncomingMessage, res: ServerResponse): Promise<void> => {
     if (bundleBody === undefined) {
       const path = mobileBundlePath()
       if (!existsSync(path)) {
@@ -156,12 +158,32 @@ export function makeMobileRoutes(): WebRoute[] {
       }
       try {
         bundleBody = await readFile(path, 'utf8')
+        bundleGzip = gzipSync(Buffer.from(bundleBody, 'utf8'))
       } catch {
         writeStatic(res, 500, 'text/plain', 'failed to read the mobile bundle')
         return
       }
     }
-    writeStatic(res, 200, 'text/javascript', bundleBody)
+    const acceptEncoding = req.headers['accept-encoding'] ?? ''
+    const acceptsGzip = typeof acceptEncoding === 'string' && acceptEncoding.includes('gzip') && bundleGzip !== undefined
+    if (acceptsGzip) {
+      res.writeHead(200, {
+        'content-type': 'text/javascript; charset=utf-8',
+        'content-encoding': 'gzip',
+        'cache-control': 'no-cache',
+        vary: 'Accept-Encoding',
+        'referrer-policy': 'no-referrer',
+      })
+      res.end(bundleGzip)
+    } else {
+      res.writeHead(200, {
+        'content-type': 'text/javascript; charset=utf-8',
+        'cache-control': 'no-cache',
+        vary: 'Accept-Encoding',
+        'referrer-policy': 'no-referrer',
+      })
+      res.end(bundleBody)
+    }
   }
 
   let workerBody: string | undefined

package/src/mount-once.ts

@@ -1,7 +1,7 @@
 // Generated by scripts/sync-shared.mjs from shared/host/mount-once.ts. Do not edit this copy; edit the shared source and run "node scripts/sync-shared.mjs".
 /**
  * Host single-instance guard shared by the plugin family. The family bundle
- * (dsh-web-ui-all / dsh-skins) namespaces every child row id (web-ui-*), so
+ * (dsh-web-all / dsh-skins) namespaces every child row id (web-ui-*), so
  * the loader accepts a standalone install of the same package side by side;
  * without this guard the second instance would still re-register the same
  * webserver routes, tools, settings namespaces, and system-prompt sections
@@ -15,7 +15,7 @@
  * return value as the fiber disposer, so the unmarker is returned, not run.
  */
 
-const MOUNTED = Symbol.for('dsh-web-ui.mounted-plugins')
+const MOUNTED = Symbol.for('dsh-web.mounted-plugins')
 
 interface MountRegistry {
   [MOUNTED]?: Set<string>

package/src/update.ts

@@ -1,6 +1,6 @@
 /**
- * Remote update support for the dsh-web-ui family — host half. Detects the
- * installed aggregate package (@linxin666/dsh-web-ui-all), or the directly
+ * Remote update support for the dsh-web family — host half. Detects the
+ * installed aggregate package (@linxin666/dsh-web-all), or the directly
  * installed family packages when the aggregate is absent, probes npm for newer
  * releases, and runs `pnpm update --latest` inside the owning dsh profile.
  *
@@ -16,15 +16,21 @@ import { spawn } from 'node:child_process'
 /** npm registry base used for version probes. */
 export const NPM_REGISTRY = 'https://registry.npmjs.org'
 
-/** The family scope every dsh-web-ui package is published under. */
+/** The family scope every dsh-web package is published under. */
 export const FAMILY_SCOPE = '@linxin666/'
 
 /** The aggregate package that is the canonical update entry point. */
-export const AGGREGATE_PACKAGE = '@linxin666/dsh-web-ui-all'
+export const AGGREGATE_PACKAGE = '@linxin666/dsh-web-all'
 
 /** Fallback anchor: this plugin's own package when the aggregate is absent. */
 export const SELF_PACKAGE = '@linxin666/dsh-remote-web-ui'
 
+/** GitHub repository used to surface human-readable release notes. */
+export const UPDATE_RELEASE_REPO = 'zhu1090093659/dsh-web'
+
+/** Release-notes cache freshness window (host process). */
+export const RELEASE_NOTES_CACHE_TTL_MS = 10 * 60_000
+
 /** A profile manifest `name` prefix (e.g. `dsh-profile-web`). */
 const PROFILE_NAME_PREFIX = 'dsh-profile-'
 
@@ -168,6 +174,18 @@ export interface UpdatePackageStatus {
   outdated: boolean
 }
 
+/** Structured release-note sections shown in the update panel. */
+export interface UpdateReleaseNotes {
+  /** Version the notes describe. */
+  version: string
+  /** New feature bullets. */
+  features: string[]
+  /** Bug-fix bullets. */
+  fixes: string[]
+  /** Other-change bullets. */
+  other: string[]
+}
+
 /** The full update-status snapshot served to the browser half. */
 export interface UpdateStatus {
   /** npm = registry-managed (updatable); link = local dev install; missing = no anchor package. */
@@ -180,6 +198,8 @@ export interface UpdateStatus {
   packages: UpdatePackageStatus[]
   /** True when any package has a newer npm release. */
   outdated: boolean
+  /** Human-readable release notes for the target release, when available. */
+  notes?: UpdateReleaseNotes
   /** Whole-check failure (e.g. registry unreachable). */
   error?: string
 }
@@ -192,6 +212,8 @@ export interface UpdateCheckDeps {
   resolve(specifier: string): string | undefined
   /** Probe one package's latest npm version; undefined on failure. */
   fetchLatest(name: string): Promise<string | undefined>
+  /** Fetch structured release notes for one target version, when available. */
+  fetchReleaseNotes?(version: string): Promise<UpdateReleaseNotes | undefined>
 }
 
 /**
@@ -313,6 +335,92 @@ export async function fetchLatestVersion(
   }
 }
 
+/** Normalize one release-note bullet. */
+function cleanNoteItem(text: string): string {
+  // Keep the visible label and drop Markdown link targets; issue references
+  // become plain #123 because the panel has no Markdown renderer.
+  return text.replace(/\[([^\]]+)\]\([^)]*\)/g, '$1').replace(/^[-*]\s+/, '').trim()
+}
+
+/** Determine the section kind for a Markdown heading line. */
+function noteSectionOf(line: string): keyof Pick<UpdateReleaseNotes, 'features' | 'fixes' | 'other'> | undefined {
+  const heading = /^#{1,6}\s+(.+)$/.exec(line.trim())
+  if (heading === null) return undefined
+  const title = heading[1].replace(/[:：].*$/, '').trim().toLowerCase()
+  if (title === '新功能' || title === 'new features') return 'features'
+  if (title === '修复' || title === 'bug fixes' || title === 'bugfixes') return 'fixes'
+  if (title === '其他改动' || title === 'other changes') return 'other'
+  return undefined
+}
+
+/**
+ * Parse the GitHub Release body into the three conventional sections.
+ *
+ * The committed release notes are bilingual: Chinese is the default view and
+ * English lives inside a `<details>` block. Prefer the Chinese sections when
+ * present and fall back to the whole body for English-only releases. Bullets
+ * are escaped as plain text for the panel (no Markdown renderer).
+ */
+function parseReleaseNotesSource(version: string, source: string): UpdateReleaseNotes | undefined {
+  const notes: UpdateReleaseNotes = { version, features: [], fixes: [], other: [] }
+  let current: keyof Pick<UpdateReleaseNotes, 'features' | 'fixes' | 'other'> | undefined
+  for (const rawLine of source.split(/\r?\n/)) {
+    const line = rawLine.trim()
+    const section = noteSectionOf(line)
+    if (section !== undefined) {
+      current = section
+      continue
+    }
+    if (current === undefined || !/^-\s+/.test(line)) continue
+    const item = cleanNoteItem(line)
+    if (item !== '') notes[current].push(item)
+  }
+  if (notes.features.length === 0 && notes.fixes.length === 0 && notes.other.length === 0) return undefined
+  return notes
+}
+
+export function parseReleaseNotesBody(version: string, body: string): UpdateReleaseNotes | undefined {
+  // The committed release notes put Chinese in the default view and English in
+  // a <details> block. Parse only the default view first, then fall back to
+  // the full body for English-only releases.
+  return parseReleaseNotesSource(version, body.split('<details>')[0] ?? body)
+    ?? parseReleaseNotesSource(version, body)
+}
+
+/**
+ * Fetch and parse the GitHub Release for one `dsh-web` version.
+ * @param version - the npm release version (without the `v` prefix).
+ * @param fetchImpl - injected fetch; global `fetch` in the host.
+ * @param timeoutMs - hard timeout for the GitHub API probe.
+ * @returns structured notes, or undefined when unavailable.
+ */
+export async function fetchGitHubReleaseNotes(
+  version: string,
+  fetchImpl: (url: string, init?: RequestInit) => Promise<{ ok: boolean; json(): Promise<unknown> }> = fetch,
+  timeoutMs = 10_000,
+): Promise<UpdateReleaseNotes | undefined> {
+  const controller = new AbortController()
+  const timer = setTimeout(() => { controller.abort() }, timeoutMs)
+  try {
+    const response = await fetchImpl(
+      `https://api.github.com/repos/${UPDATE_RELEASE_REPO}/releases/tags/v${version}`,
+      {
+        headers: { accept: 'application/vnd.github+json', 'user-agent': 'dsh-web-update' },
+        signal: controller.signal,
+      },
+    )
+    if (!response.ok) return undefined
+    const body = await response.json()
+    if (typeof body !== 'object' || body === null) return undefined
+    const text = (body as Record<string, unknown>).body
+    return typeof text === 'string' ? parseReleaseNotesBody(version, text) : undefined
+  } catch {
+    return undefined
+  } finally {
+    clearTimeout(timer)
+  }
+}
+
 /**
  * Sentinel for an installed version that could not be read (missing manifest
  * or resolve failure). It is a real-looking version so `checkUpdates` can
@@ -392,12 +500,17 @@ export async function checkUpdates(deps: UpdateCheckDeps): Promise<UpdateStatus>
   // Registry unreachable: every probe failed — report the outage distinctly
   // instead of a misleading "all up to date" (the panel needs the reason).
   const error = probeFailures === names.length && names.length > 0 ? 'registry-unreachable' : undefined
+  const targetVersion = packages.find(packageStatus => packageStatus.latest !== undefined)?.latest
+  const notes = targetVersion !== undefined && deps.fetchReleaseNotes !== undefined
+    ? await deps.fetchReleaseNotes(targetVersion).catch(() => undefined)
+    : undefined
   return {
     mode: linked ? 'link' : 'npm',
     profileName: profile.name,
     anchor,
     packages,
     outdated: packages.some(packageStatus => packageStatus.outdated),
+    ...(notes !== undefined ? { notes } : {}),
     ...(error !== undefined ? { error } : {}),
   }
 }