@ash-qw/dsh-theme-prts 2.1.0 → 2.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ash-qw/dsh-theme-prts",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "private": false,
   "type": "module",
   "description": "Unofficial Arknights P.R.T.S.-inspired UI theme for DeepSeek Harness Web and the official desktop client",

package/src/client/custom-background.js

@@ -18,6 +18,8 @@ export function createBackgroundStore({ window, document }) {
       if (url) root.style.setProperty(`--prts-background-${slot}`, `url("${url}")`)
       else root.style.removeProperty(`--prts-background-${slot}`)
     }
+    const ratio = Number(state.sidebar?.width) / Number(state.sidebar?.height)
+    document.documentElement.style.setProperty('--prts-sidebar-image-ratio', String(Number.isFinite(ratio) && ratio > 0 ? ratio : 1))
     for (const listener of listeners) listener(state)
   }
   const request = async data => {
@@ -52,6 +54,7 @@ export function createBackgroundStore({ window, document }) {
       catch (error) { await refresh().catch(() => {}); throw error }
     },
     dispose() {
+      document.documentElement.style.removeProperty('--prts-sidebar-image-ratio')
       disposed = true; abort?.abort(); events?.close(); listeners.clear(); window.removeEventListener('focus', focus)
       for (const slot of Object.keys(backgroundLabels)) {
         document.documentElement.removeAttribute(`data-prts-background-${slot}`)

package/src/client/host-geometry-adapter.js

@@ -16,6 +16,8 @@ function cssPixels(value) {
 export function createHostGeometryAdapter({ document, window }) {
   const root = document?.documentElement
   let frame
+  let sidebar
+  let previousSidebarWidth
   let resizeObserver
   let frameRequest
   let resizeSettleTimer
@@ -31,6 +33,10 @@ export function createHostGeometryAdapter({ document, window }) {
     if (root.style.getPropertyValue(TOP_INSET_PROPERTY) !== value) {
       root.style.setProperty(TOP_INSET_PROPERTY, value)
     }
+    if (sidebar?.isConnected) {
+      const width = cssPixels(sidebar.getBoundingClientRect().width)
+      if (root.style.getPropertyValue('--prts-sidebar-width') !== width) root.style.setProperty('--prts-sidebar-width', width)
+    }
     return top
   }
 
@@ -62,6 +68,7 @@ export function createHostGeometryAdapter({ document, window }) {
   function onGeometryResize(entries = []) {
     let shouldMeasure = false
     for (const entry of entries) {
+      if (entry.target === sidebar) { shouldMeasure = true; continue }
       if (entry.target !== frame) continue
       const height = Number(entry.contentRect?.height)
       if (!Number.isFinite(height) || height <= 0) {
@@ -91,6 +98,9 @@ export function createHostGeometryAdapter({ document, window }) {
     else root.style.removeProperty(TOP_INSET_PROPERTY)
     previousValue = undefined
     previousPriority = undefined
+    if (previousSidebarWidth) root.style.setProperty('--prts-sidebar-width', previousSidebarWidth)
+    else root.style.removeProperty('--prts-sidebar-width')
+    sidebar = undefined
     frame = undefined
     observedFrameHeight = undefined
     started = false
@@ -105,6 +115,8 @@ export function createHostGeometryAdapter({ document, window }) {
       }
       if (started) dispose()
       frame = nextFrame
+      sidebar = frame.querySelector?.('[data-prts-region="sessions"]')
+      previousSidebarWidth = root.style.getPropertyValue('--prts-sidebar-width')
       previousValue = root.style.getPropertyValue(TOP_INSET_PROPERTY)
       previousPriority = root.style.getPropertyPriority(TOP_INSET_PROPERTY)
       started = true
@@ -112,6 +124,7 @@ export function createHostGeometryAdapter({ document, window }) {
       if (typeof window?.ResizeObserver === 'function') {
         resizeObserver = new window.ResizeObserver(onGeometryResize)
         resizeObserver.observe(frame)
+        if (sidebar) resizeObserver.observe(sidebar)
       }
       window?.addEventListener?.('resize', onWindowResize, { passive: true })
       scheduleSettledMeasure()

package/src/client/opacity-dial.js

@@ -2,7 +2,7 @@
 // See src/vendor/react-bits/LICENSE.md and THIRD_PARTY_NOTICES.md.
 export const BACKGROUND_OPACITY_CONTROLS = Object.freeze([
   { key: 'sidebarOpacity', label: '会话列表侧栏', property: '--prts-sidebar-opacity', value: 94, blurKey: 'sidebarBlur', blurProperty: '--prts-sidebar-blur', blurDefault: 8 },
-  { key: 'railOpacity', label: '设置侧栏', property: '--prts-rail-opacity', value: 70, blurKey: 'railBlur', blurProperty: '--prts-rail-blur', blurDefault: 12, fullBackgroundOnly: true },
+  { key: 'railOpacity', label: '设置侧栏', property: '--prts-rail-opacity', value: 70, blurKey: 'railBlur', blurProperty: '--prts-rail-blur', blurDefault: 12 },
   { key: 'bakerOpacity', label: 'Baker 气泡', property: '--prts-baker-opacity', value: 50, blurKey: 'bakerBlur', blurProperty: '--prts-baker-blur', blurDefault: 8, theme: 'deck-chat' },
   { key: 'classicUserOpacity', label: '经典用户消息', property: '--prts-classic-user-opacity', value: 50, blurKey: 'classicUserBlur', blurProperty: '--prts-classic-user-blur', blurDefault: 8, theme: 'native' },
 ])
@@ -109,8 +109,7 @@ export function mountOpacityDials({ section, window, onChange }) {
     paint(value)
     return {
       update(preferences, active) {
-        container.hidden = Boolean((definition.theme && preferences.conversationStyle !== definition.theme)
-          || (definition.fullBackgroundOnly && preferences.backgroundMode !== 'full'))
+        container.hidden = Boolean(definition.theme && preferences.conversationStyle !== definition.theme)
         saved = 100 - Math.round((preferences[definition.key] ?? (100 - definition.value) / 100) * 100)
         if (!grip && section.ownerDocument.activeElement !== input) paint(saved)
         savedBlur = preferences[definition.blurKey] ?? definition.blurDefault
@@ -127,7 +126,8 @@ export function mountOpacityDials({ section, window, onChange }) {
       const split = preferences.backgroundMode === 'split'
       section.querySelector('[data-prts-opacity-settings]').hidden = preferences.backgroundMode === 'off'
       const conversationImage = full || (split && Boolean(state.conversation))
-      const active = [full || (split && Boolean(state.sidebar)), full,
+      const sidebarImage = full || (split && Boolean(state.sidebar))
+      const active = [sidebarImage, sidebarImage,
         conversationImage && preferences.conversationStyle === 'deck-chat',
         conversationImage && preferences.conversationStyle === 'native']
       controls.forEach((control,i)=>control.update(preferences,active[i]))

package/src/client/operations-shell-v2.js

@@ -1,3 +1,4 @@
+import { SCHEME_COMMIT_PROGRESS } from './theme-controller-v2.js'
 import { createThemeSettingsOverlay, themeSettingsMarkup } from './theme-settings-workbench.js'
 
 const PHONE_RAIL_BREAKPOINT = 640
@@ -83,9 +84,9 @@ export function createOperationsShell({
     try { return window.matchMedia?.('(prefers-reduced-motion: reduce)')?.matches === true } catch { return false }
   }
 
-  function phoneRailGesture() {
+  function phoneRailGesture(pointerType) {
     if (railMode !== 'overlay' || Number(window.innerWidth) > PHONE_RAIL_BREAKPOINT) return false
-    return railPointerQuery?.matches === true
+    return pointerType === 'touch' || railPointerQuery?.matches === true
       || railHoverQuery?.matches === true
       || Number(window.navigator?.maxTouchPoints) > 0
   }
@@ -105,13 +106,16 @@ export function createOperationsShell({
 
   function armRailGesture() {
     railHoldTimer = undefined
-    if (!railPointer || !phoneRailGesture()) return
+    if (!railPointer || !phoneRailGesture('touch')) return
     railPointer.armed = true
     railLauncher?.setAttribute('data-prts-rail-gesture-active', '')
   }
 
+  let railInputType
   function onRailPointerDown(event) {
-    if (!phoneRailGesture() || railPointer || (event.button ?? 0) !== 0) return
+    railInputType = event.pointerType || 'mouse'
+    if (railInputType !== 'touch') return
+    if (!phoneRailGesture(event.pointerType) || railPointer || (event.button ?? 0) !== 0) return
     const pointerId = event.pointerId ?? 1
     railPointer = {
       pointerId,
@@ -159,7 +163,9 @@ export function createOperationsShell({
   }
 
   function onRailClick(event) {
-    if (phoneRailGesture() && Number(event?.detail) > 0) {
+    const inputType = event?.pointerType || railInputType
+    railInputType = undefined
+    if (phoneRailGesture(inputType) && inputType === 'touch' && Number(event?.detail) > 0) {
       event.preventDefault?.()
       return
     }
@@ -262,9 +268,19 @@ export function createOperationsShell({
     }, 1000)
   }
 
+  function flushSchemeProgress(pointer) {
+    if (pointer.frame !== undefined) window.cancelAnimationFrame(pointer.frame)
+    pointer.frame = undefined
+    if (pointer.progress !== undefined) {
+      pointer.gesture?.update?.(pointer.progress)
+      pointer.progress = undefined
+    }
+  }
+
   function settleSchemePointer({ commit = false } = {}) {
     const pointer = schemePointer
     if (!pointer) return
+    flushSchemeProgress(pointer)
     schemePointer = undefined
     try { schemeToggle?.releasePointerCapture?.(pointer.pointerId) } catch {}
     if (!pointer.dragging) return
@@ -313,19 +329,25 @@ export function createOperationsShell({
       }
     }
     event.preventDefault?.()
-    pointer.gesture?.update?.(schemePointerProgress(event))
+    pointer.progress = schemePointerProgress(event)
+    if (pointer.frame === undefined) pointer.frame = window.requestAnimationFrame(() => {
+      pointer.frame = undefined
+      if (schemePointer === pointer) flushSchemeProgress(pointer)
+    })
   }
 
   function onSchemePointerUp(event) {
     const pointer = schemePointer
     if (!pointer || (event.pointerId ?? 1) !== pointer.pointerId) return
-    const commit = pointer.dragging && schemePointerProgress(event) >= .5
+    if (pointer.dragging) pointer.progress = schemePointerProgress(event)
+    const commit = pointer.dragging && schemePointerProgress(event) >= SCHEME_COMMIT_PROGRESS
     settleSchemePointer({ commit })
   }
 
   function cancelSchemePointer() {
     const pointer = schemePointer
     if (!pointer) return
+    if (pointer.frame !== undefined) window.cancelAnimationFrame(pointer.frame)
     if (pointer.dragging) {
       try { pointer.gesture?.cancel?.() } catch {}
     }
@@ -353,7 +375,7 @@ export function createOperationsShell({
     const overlay = railMode === 'overlay'
     const open = overlay && root.hasAttribute('data-prts-rail-open')
     railLauncher.setAttribute('aria-expanded', String(open))
-    const closedLabel = phoneRailGesture() ? '长按并向下滑动打开 P.R.T.S. 导航' : '打开 P.R.T.S. 导航'
+    const closedLabel = phoneRailGesture() ? '打开 P.R.T.S. 导航（触摸时长按并下滑）' : '打开 P.R.T.S. 导航'
     railLauncher.setAttribute('aria-label', open ? '关闭 P.R.T.S. 导航' : closedLabel)
     if (overlay && !open) {
       navRail.setAttribute('aria-hidden', 'true')
@@ -418,12 +440,16 @@ export function createOperationsShell({
   }
 
   function onResponsiveChange() {
+    railInputType = undefined
     clearRailGesture()
     setRailViewport(window.innerWidth)
     syncRailState()
   }
 
+  let railPhoneQuery
   function bindResponsiveQueries() {
+    railPhoneQuery = window.matchMedia?.('(max-width: 640px)')
+    railPhoneQuery?.addEventListener?.('change', onResponsiveChange)
     railViewportQuery = window.matchMedia?.('(min-width: 1180px)')
     railPointerQuery = window.matchMedia?.('(pointer: coarse)')
     railHoverQuery = window.matchMedia?.('(hover: none)')
@@ -507,6 +533,9 @@ export function createOperationsShell({
     schemeToggle?.removeEventListener('lostpointercapture', onSchemeLostPointerCapture)
     window.removeEventListener?.('blur', cancelSchemePointer)
     themeDisable?.removeEventListener('click', disableTheme)
+    railPhoneQuery?.removeEventListener?.('change', onResponsiveChange)
+    railPhoneQuery = undefined
+    railInputType = undefined
     railViewportQuery?.removeEventListener?.('change', onResponsiveChange)
     railPointerQuery?.removeEventListener?.('change', onResponsiveChange)
     railHoverQuery?.removeEventListener?.('change', onResponsiveChange)

package/src/client/preferences.js

@@ -42,7 +42,9 @@ export const DEFAULT_PREFERENCES = Object.freeze({
   particlePattern: 'orthogonal',
   railDefaultHidden: false,
   sessionPreview: true,
+  aiToolsEnabled: true,
   previewOngoing: true,
+  previewTools: true,
   previewWarning: true,
   previewDone: true,
   previewFollowOngoing: true,
@@ -101,7 +103,8 @@ export const PREFERENCE_GROUPS = Object.freeze({
   particles: Object.freeze(['conversationParticleDensity', 'heroParticleDensity', 'particleTraversalSpeed']),
   material: Object.freeze(['glass', 'composerGlass']),
   accessibility: Object.freeze(['motion', 'bootAnimation', 'cursor']),
-  navigation: Object.freeze(['railDefaultHidden', 'sessionPreview', 'previewOngoing', 'previewWarning', 'previewDone', 'previewDoubleClick', 'previewFollowOngoing', 'previewFollowWarning', 'previewReplyLimit']),
+  aiTools: Object.freeze(['aiToolsEnabled']),
+  navigation: Object.freeze(['railDefaultHidden', 'sessionPreview', 'previewOngoing', 'previewTools', 'previewWarning', 'previewDone', 'previewDoubleClick', 'previewFollowOngoing', 'previewFollowWarning', 'previewReplyLimit']),
   conversation: Object.freeze(['sessionFlow', 'sessionGlow', 'sessionFlowPalette', 'sessionFlowColorBack', 'sessionFlowColorCore', 'sessionFlowColorFront', 'sessionFlowSpeed', 'conversationStyle', 'bakerGroupAvatars', 'bakerLoading', 'conversationEmblem']),
 })
 
@@ -237,7 +240,9 @@ export function normalizePreferences(value) {
     sessionFlowColorFront: sessionFlowColors.front,
     sessionFlowSpeed: sessionFlowSpeedOr(input.sessionFlowSpeed, DEFAULT_PREFERENCES.sessionFlowSpeed),
     sessionPreview: booleanOr(input.sessionPreview, DEFAULT_PREFERENCES.sessionPreview),
+    aiToolsEnabled: booleanOr(input.aiToolsEnabled, DEFAULT_PREFERENCES.aiToolsEnabled),
     previewOngoing: booleanOr(input.previewOngoing, DEFAULT_PREFERENCES.previewOngoing),
+    previewTools: booleanOr(input.previewTools, DEFAULT_PREFERENCES.previewTools),
     previewWarning: booleanOr(input.previewWarning, DEFAULT_PREFERENCES.previewWarning),
     previewDone: booleanOr(input.previewDone, DEFAULT_PREFERENCES.previewDone),
     previewReplyLimit: [0, 5, 10, '0', '5', '10'].includes(input.previewReplyLimit) ? Number(input.previewReplyLimit) : 5,

package/src/client/session-summary-preview.js

@@ -39,6 +39,60 @@ export function latestAssistantReply(snapshot) {
   return ''
 }
 
+// Call objects may be mutable on older hosts; compare raw arguments before reuse.
+const toolSummaryCache = new WeakMap()
+function toolSummary(call) {
+  const raw = call.argsRaw ?? call.call?.argsRaw ?? ''
+  const cached = toolSummaryCache.get(call)
+  if (cached?.raw === raw) return cached.text
+  let args
+  try { args = JSON.parse(raw) } catch {}
+  const summary = ['description', 'command', 'cmd', 'file_path', 'filePath', 'path', 'query', 'pattern', 'url']
+    .map(field => args?.[field]).find(value => typeof value === 'string' && value.trim())
+  const normalized = summary?.replace(/\s+/g, ' ').trim()
+  const text = normalized ? normalized.slice(0, 160) + (normalized.length > 160 ? '…' : '') : ''
+  toolSummaryCache.set(call, {raw, text})
+  return text
+}
+
+// Only calls after the latest settled prose belong to the current progress preview.
+export function previewToolCalls(snapshot) {
+  const turn = snapshot?.timeline?.turnOrder?.at(-1)
+  const order = snapshot?.order ?? []
+  const calls = [], seen = new Set()
+  const visit = (call, key) => {
+    if (!call) return
+    const id = call.callId ?? key
+    if (!seen.has(id)) { seen.add(id); calls.push({call, key: id}) }
+    for (const [index, child] of (call.subCalls ?? []).entries()) visit(child, key + ':' + index)
+  }
+  for (let i = order.length - 1; i >= 0; i--) {
+    const node = snapshot.nodes?.get?.(order[i])
+    if (['user', 'steering', 'turn-trigger'].includes(node?.kind)) break
+    if (turn !== undefined && node?.location?.turn?.turn !== turn) continue
+    if (node?.visibility === 'hidden') continue
+    if (node?.kind === 'assistant-step' && node.data?.status === 'settled'
+      && node.data.blocks?.some(block => block.kind === 'text' && block.text?.trim())) break
+    if (node?.kind === 'tool-call') visit(node.data?.root, order[i])
+  }
+  return calls.sort((a, b) => (b.call.callTime ?? b.call.time ?? 0) - (a.call.callTime ?? a.call.time ?? 0)).map(({call, key}) => {
+    const text = toolSummary(call)
+    return {
+      key,
+      name: call.name || call.call?.name || '工具调用',
+      status: call.kind === 'tool-result' ? call.isError ? '失败' : '已完成'
+        : call.phase === 'preparing' ? '准备中' : '执行中',
+      summary: text ? text
+        : call.phase === 'preparing' ? '正在准备调用…' : '暂无操作摘要',
+    }
+  })
+}
+
+export function latestToolCall(snapshot) {
+  const records = previewToolCalls(snapshot)
+  return records.length ? {...records[0], records} : undefined
+}
+
 export function completedPreviewReplies(snapshot) {
   const replies = []
   const latestTurn = snapshot?.timeline?.turnOrder?.at(-1)
@@ -142,8 +196,8 @@ export function createSessionSummaryPreview({ document, window, sessions, getSes
     active = undefined
     if (!old) return
     window.clearTimeout(old.leaveTimer)
-    window.clearTimeout(old.delay)
-    window.clearTimeout(old.refresh)
+    window.cancelAnimationFrame(old.delay)
+    window.cancelAnimationFrame(old.refresh)
     old.unsubscribe?.()
     old.unsubscribeStatus?.()
     if (keepWarm && old.reference && old.source) {
@@ -311,6 +365,39 @@ export function createSessionSummaryPreview({ document, window, sessions, getSes
       body.setAttribute('data-prts-preview-body', '')
       panel.querySelector('p').replaceWith(body)
     }
+    panel.querySelector('[data-prts-preview-tool]')?.remove()
+    const toolSection = panel.ownerDocument.createElement('div')
+    toolSection.setAttribute('data-prts-preview-tool', '')
+    toolSection.hidden = true
+    body.before(toolSection)
+    let previousTool, currentTool
+    const toolEntry = panel.ownerDocument.createElement('button')
+    toolEntry.type = 'button'
+    toolEntry.setAttribute('data-prts-tool-entry', '')
+    const toolHeading = panel.ownerDocument.createElement('small')
+    const toolName = panel.ownerDocument.createElement('span')
+    toolEntry.append(toolHeading, toolName)
+    toolSection.append(toolEntry)
+    const openToolDetail = (refresh = false) => {
+      if (currentTool) showDetail({key: 'latest-tool', tool: currentTool}, 0, toolEntry, refresh)
+    }
+    toolEntry.addEventListener('pointermove', () => openToolDetail())
+    toolEntry.addEventListener('focus', () => openToolDetail())
+    toolEntry.addEventListener('click', () => openToolDetail())
+    const renderTool = tool => {
+      const signature = JSON.stringify(tool)
+      if (signature === previousTool) return
+      previousTool = signature
+      currentTool = tool
+      toolSection.hidden = !tool
+      if (!tool) {
+        if (detailKey === 'latest-tool') hideDetail()
+        return
+      }
+      toolHeading.textContent = '工具 · ' + tool.status + ' · ' + tool.records.length + ' 次'
+      toolName.textContent = tool.name
+      if (detailKey === 'latest-tool') openToolDetail(true)
+    }
     const choices = panel.ownerDocument.createElement('div')
     choices.setAttribute('data-prts-preview-choices', '')
     panel.querySelector('[data-prts-preview-choices]')?.remove()
@@ -450,9 +537,9 @@ export function createSessionSummaryPreview({ document, window, sessions, getSes
       detailEntry?.removeAttribute('data-prts-reply-active')
       detailEntry = undefined
     }
-    const showDetail = (reply, index, item) => {
+    const showDetail = (reply, index, item, refresh = false) => {
       keep()
-      if (detailKey === reply.key && current.detail && !current.detail.hidden) return
+      if (!refresh && detailKey === reply.key && current.detail && !current.detail.hidden) return
       if (!current.detail) {
         const detail = panel.ownerDocument.createElement('section')
         detail.setAttribute('data-prts-summary-reply', '')
@@ -472,10 +559,36 @@ export function createSessionSummaryPreview({ document, window, sessions, getSes
       detailEntry?.removeAttribute('data-prts-reply-active')
       detailEntry = item
       item?.setAttribute('data-prts-reply-active', '')
-      detail.querySelector('strong').textContent = '回复 ' + (reply.ordinal ?? index + 1)
+      detail.toggleAttribute('data-prts-tool-history', Boolean(reply.tool))
+      detail.querySelector('strong').textContent = reply.tool ? '本段工具记录 · ' + reply.tool.records.length + ' 次' : '回复 ' + (reply.ordinal ?? index + 1)
       const content = detail.querySelector('[data-prts-preview-body]')
-      content.innerHTML = current.contentCache(reply.text).html
-      content.scrollTop = 0
+      const scrollTop = refresh ? content.scrollTop : 0
+      let anchorKey, anchorOffset
+      if (refresh && scrollTop > 0) {
+        const anchor = [...content.children].find(row => row.getBoundingClientRect().bottom > content.getBoundingClientRect().top)
+        anchorKey = anchor?.dataset.toolKey
+        anchorOffset = anchor?.getBoundingClientRect().top
+      }
+      if (reply.tool) {
+        content.replaceChildren(...reply.tool.records.map(record => {
+          const row = panel.ownerDocument.createElement('article')
+          row.setAttribute('data-prts-tool-record', '')
+          row.dataset.toolKey = record.key
+          const heading = panel.ownerDocument.createElement('div')
+          const name = panel.ownerDocument.createElement('b')
+          name.textContent = record.name
+          const status = panel.ownerDocument.createElement('small')
+          status.textContent = record.status
+          heading.append(name, status)
+          const summary = panel.ownerDocument.createElement('p')
+          summary.textContent = record.summary
+          row.append(heading, summary)
+          return row
+        }))
+      } else content.innerHTML = current.contentCache(reply.text).html
+      content.scrollTop = scrollTop
+      const retainedAnchor = anchorKey && [...content.children].find(row => row.dataset.toolKey === anchorKey)
+      if (retainedAnchor) content.scrollTop += retainedAnchor.getBoundingClientRect().top - anchorOffset
       detail.hidden = false
       const rect = panel.getBoundingClientRect()
       const width = Math.min(340, window.innerWidth - 16)
@@ -548,11 +661,18 @@ export function createSessionSummaryPreview({ document, window, sessions, getSes
         }))
       }
       choices.hidden = !labels.length
+      const tool = state === 'ongoing' && !question && getPreviewPreferences?.().previewTools !== false ? latestToolCall(source?.getSnapshot()) : undefined
+      renderTool(tool)
+      if (tool) label.textContent = '运行中 · 最新活动'
       panel.setAttribute('aria-label', title + '：' + label.textContent)
       if (state === 'ongoing' && source) {
         const replies = selectReplies(source.getSnapshot(), replyLimit())
-        if (replies === historyKeys) return
-        panel.toggleAttribute('data-prts-preview-empty', !replies.length)
+        panel.toggleAttribute('data-prts-preview-empty', !replies.length && !tool)
+        if (replies === historyKeys) {
+          const emptyText = tool ? '' : '正在处理…'
+          if (!replies.length && body.textContent !== emptyText) body.textContent = emptyText
+          return
+        }
         const previousTop = body.scrollTop
         const scrollAnchor = previousTop > 0 ? [...body.children].find(entry => entry.getBoundingClientRect().bottom > body.getBoundingClientRect().top) : undefined
         const anchorTop = scrollAnchor?.getBoundingClientRect().top
@@ -568,7 +688,7 @@ export function createSessionSummaryPreview({ document, window, sessions, getSes
           }
         }
         if (!historyKeys.length) body.replaceChildren()
-        if (!replies.length) body.textContent = '正在处理，等待本轮正文输出完成…'
+        if (!replies.length) body.textContent = tool ? '' : '正在处理…'
         for (let index = 0; index < replies.length; index++) {
           const reply = replies[index]
           if (retained.has(reply.key)) continue
@@ -580,6 +700,13 @@ export function createSessionSummaryPreview({ document, window, sessions, getSes
           item.setAttribute('data-prts-reply-entry', '')
           const heading = panel.ownerDocument.createElement('small')
           heading.textContent = '回复 ' + reply.ordinal
+          const icon = panel.ownerDocument.createElementNS('http://www.w3.org/2000/svg', 'svg')
+          icon.setAttribute('viewBox', '0 0 16 16')
+          icon.setAttribute('aria-hidden', 'true')
+          const outline = panel.ownerDocument.createElementNS(icon.namespaceURI, 'path')
+          outline.setAttribute('d', 'M3 2.5h10a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H7l-4 2v-2a1 1 0 0 1-1-1v-7a1 1 0 0 1 1-1Z')
+          icon.append(outline)
+          heading.prepend(icon)
           const summary = panel.ownerDocument.createElement('span')
           summary.textContent = current.contentCache(reply.text).summary
           item.append(heading, summary)
@@ -610,7 +737,7 @@ export function createSessionSummaryPreview({ document, window, sessions, getSes
         ? approval
           ? [pending.toolName, pending.displayReason?.['zh-CN'] || pending.displayReason?.zh || pending.reason || pending.displayReason?.en || '请进入会话查看操作详情'].filter(Boolean).join('：')
           : first?.question || pendingQuestionPreview(pending)
-        : source ? excerpt || (state === 'ongoing' ? '正在处理，尚未输出正文…' : '暂无正文回复，可进入会话查看执行记录。') : '正在读取…'
+        : source ? excerpt || (state === 'ongoing' ? '正在处理…' : '暂无正文回复，可进入会话查看执行记录。') : '正在读取…'
       if (previousText !== text || previousQuestion !== question) {
         const extendsReply = previousQuestion === question && previousText && text.startsWith(previousText)
         if (question) body.textContent = text
@@ -631,7 +758,8 @@ export function createSessionSummaryPreview({ document, window, sessions, getSes
     })
     render()
     body.scrollTop = 0
-    current.delay = window.setTimeout(async () => {
+    current.delay = window.requestAnimationFrame(async () => {
+      current.delay = undefined
       try {
         const service = getUiConversation?.()
         const controller = getSessions?.() ?? sessions
@@ -643,11 +771,13 @@ export function createSessionSummaryPreview({ document, window, sessions, getSes
         current.source = source
         current.unsubscribe = source.subscribe(() => {
           if (active !== current || current.refresh !== undefined) return
-          current.refresh = window.setTimeout(() => {
+          current.refresh = window.requestAnimationFrame(() => {
             current.refresh = undefined
-            if (current.state === 'ongoing' && !current.editor && selectReplies(source.getSnapshot(), replyLimit()) === historyKeys) return
+            if (current.state === 'ongoing' && !current.editor
+              && selectReplies(source.getSnapshot(), replyLimit()) === historyKeys
+              && JSON.stringify(getPreviewPreferences?.().previewTools === false ? undefined : latestToolCall(source.getSnapshot())) === previousTool) return
             render()
-          }, 120)
+          })
         })
         render()
       } catch {
@@ -659,7 +789,7 @@ export function createSessionSummaryPreview({ document, window, sessions, getSes
         render()
         if (body.textContent.trim() === '正在读取…') body.textContent = '暂时无法读取回复，可点击会话查看'
       }
-    }, cached ? 0 : 80)
+    })
   }
   function leave() {
     if (!active || active.sticky) return
@@ -673,6 +803,8 @@ export function createSessionSummaryPreview({ document, window, sessions, getSes
     if (!active) return
     const anchor = [...root.querySelectorAll('[data-prts-session-summary-item]')]
       .find(item => item.getAttribute('data-prts-session-summary-item') === active.id)
+    // A read completion (or removed session) has no status row to own a preview.
+    if (!anchor) { stop(); return }
     active.group?.removeAttribute('data-prts-preview-open')
     active.anchor?.removeAttribute('data-prts-preview-active')
     active.anchor = anchor

package/src/client/sidebar-control-adapter.js

@@ -976,7 +976,7 @@ export function createSidebarControlAdapter({ document, window, sessions, worksp
 
   return {
     start(preferences = {}) {
-      const keys = ['sessionPreview','previewOngoing','previewWarning','previewDone','previewDoubleClick', 'previewFollowOngoing', 'previewFollowWarning', 'previewReplyLimit']
+      const keys = ['sessionPreview','previewOngoing','previewTools','previewWarning','previewDone','previewDoubleClick', 'previewFollowOngoing', 'previewFollowWarning', 'previewReplyLimit']
       if (keys.some(key => previewPreferences[key] !== preferences[key])) preview.stop()
       previewPreferences = Object.fromEntries(keys.map(key => [key, preferences[key]]))
       if (!document) return

package/src/client/theme-controller-v2.js

@@ -1,6 +1,8 @@
 import { createCursorAdapter } from './cursor-adapter.js'
 import { normalizePreferences } from './preferences.js'
 
+export const SCHEME_COMMIT_PROGRESS = .15
+
 const ROOT_ATTRIBUTES = [
   'data-dsh-prts',
   'data-prts-scheme',
@@ -244,11 +246,23 @@ export function createThemeController({ document, window, cssText, service, curs
   function updateRevealHud(session) {
     if (!session || session.settled) return
     const percentage = Math.round(revealProgress(session.progress) * 100)
-    if (session.hudEdge) session.hudEdge.dataset.prtsSchemeRevealSide = 'left'
-    root.style.setProperty('--prts-scheme-control-progress', String(session.progress))
-    root.style.setProperty('--prts-scheme-control-meter-height', `${revealProgress(session.progress) * 48}px`)
-    root.style.setProperty('--prts-scheme-control-value-image', revealValueImageUrl(percentage))
-    root.toggleAttribute(TRANSITION_ARMED_ATTRIBUTE, session.interactive && session.progress >= .5)
+    if (session.hudEdge && session.hudEdge.dataset.prtsSchemeRevealSide !== 'left') session.hudEdge.dataset.prtsSchemeRevealSide = 'left'
+    if (session.hudPercentage !== percentage) {
+      session.hudPercentage = percentage
+      const image = revealValueImageUrl(percentage)
+      if (session.hudAnimation?.effect?.setKeyframes) {
+        const frame = {
+          backgroundImage: image + ',linear-gradient(#ffd400,#ffd400)',
+          backgroundSize: '24px 11px,2px ' + (percentage * .48) + 'px',
+        }
+        session.hudAnimation.effect.setKeyframes([frame, frame])
+      } else {
+        root.style.setProperty('--prts-scheme-control-meter-height', `${percentage * .48}px`)
+        root.style.setProperty('--prts-scheme-control-value-image', image)
+      }
+    }
+    const armed = session.interactive && session.progress >= SCHEME_COMMIT_PROGRESS
+    if (root.hasAttribute(TRANSITION_ARMED_ATTRIBUTE) !== armed) root.toggleAttribute(TRANSITION_ARMED_ATTRIBUTE, armed)
   }
 
   function releaseRevealHud(session) {
@@ -361,11 +375,16 @@ export function createThemeController({ document, window, cssText, service, curs
       ], options, '::view-transition-new(prts-scheme-grid)')
       const mark = revealNamedAnimation([
         { offset: 0, translate: revealGroupTranslate(0), rotate: '45deg' },
-        { offset: .49, translate: revealGroupTranslate(session.geometry.width * .49), rotate: '45deg' },
-        { offset: .51, translate: revealGroupTranslate(session.geometry.width * .51), rotate: '225deg' },
+        { offset: SCHEME_COMMIT_PROGRESS - .01, translate: revealGroupTranslate(session.geometry.width * (SCHEME_COMMIT_PROGRESS - .01)), rotate: '45deg' },
+        { offset: SCHEME_COMMIT_PROGRESS + .01, translate: revealGroupTranslate(session.geometry.width * (SCHEME_COMMIT_PROGRESS + .01)), rotate: '225deg' },
         { offset: 1, translate: revealGroupTranslate(session.geometry.width), rotate: '225deg' },
       ], options, '::view-transition-group(prts-scheme-mark)')
       session.scrubAnimations = [clip, edge, node, grid, gridPhase, mark]
+      session.hudAnimation = revealNamedAnimation([{}], options, '::view-transition-new(prts-scheme-node)')
+      session.hudAnimation.pause?.()
+      session.hudAnimation.currentTime = 0
+      session.hudPercentage = undefined
+      updateRevealHud(session)
       for (const animation of session.scrubAnimations) {
         animation.pause?.()
         animation.currentTime = session.progress * session.duration
@@ -377,11 +396,10 @@ export function createThemeController({ document, window, cssText, service, curs
     if (!session || session.settled) return
     session.progress = revealProgress(value)
     session.revealX = session.progress * session.geometry.width
-    root.style.setProperty('--prts-scheme-reveal-x', `${session.revealX}px`)
+    if (!session.scrubAnimations) root.style.setProperty('--prts-scheme-reveal-x', `${session.revealX}px`)
     if (session.scrubAnimations) {
       try {
         for (const animation of session.scrubAnimations) {
-          animation.pause?.()
           animation.currentTime = session.progress * session.duration
         }
       } catch {}
@@ -402,12 +420,19 @@ export function createThemeController({ document, window, cssText, service, curs
     for (const animation of session?.scrubAnimations || []) {
       try { animation?.cancel?.() } catch {}
     }
-    if (session) session.scrubAnimations = undefined
+    session?.hudAnimation?.cancel?.()
+    if (session) {
+      session.scrubAnimations = undefined
+      session.hudAnimation = undefined
+      session.hudPercentage = undefined
+    }
   }
 
   function animateRevealTo(session, value, duration, easing) {
     if (!session || session.settled) return Promise.resolve(false)
     cancelRevealAnimation(session)
+    // Transfer the last HUD value once before the release animation takes over.
+    updateRevealHud(session)
     const targetProgress = revealProgress(value)
     const targetX = revealTargetX(session, targetProgress)
     if (!(duration > 0)) {
@@ -449,8 +474,8 @@ export function createThemeController({ document, window, cssText, service, curs
         { backgroundSize: `2px ${targetProgress * 48}px` },
       ], options, '::view-transition-new(prts-scheme-node)')
       const mark = revealNamedAnimation([
-        { translate: revealGroupTranslate(session.revealX), rotate: session.progress >= .5 ? '225deg' : '45deg' },
-        { translate: revealGroupTranslate(targetX), rotate: targetProgress >= .5 ? '225deg' : '45deg' },
+        { translate: revealGroupTranslate(session.revealX), rotate: session.progress >= SCHEME_COMMIT_PROGRESS ? '225deg' : '45deg' },
+        { translate: revealGroupTranslate(targetX), rotate: targetProgress >= SCHEME_COMMIT_PROGRESS ? '225deg' : '45deg' },
       ], options, '::view-transition-group(prts-scheme-mark)')
       animations = [clip, edge, node, grid, gridPhase, nodeProgress, mark]
     } catch {
@@ -608,7 +633,7 @@ export function createThemeController({ document, window, cssText, service, curs
     let settled = false
     return {
       update(value) { if (!settled) progress = revealProgress(value) },
-      finish(commit = progress >= .5) {
+      finish(commit = progress >= SCHEME_COMMIT_PROGRESS) {
         if (settled) return root.dataset.prtsScheme
         settled = true
         return commit ? setTheme(target, { animate: false }) : source