@ash-qw/dsh-theme-prts 1.3.1 → 1.4.1

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

@@ -1,3 +1,4 @@
+import { createSessionSummaryPreview, scrollSummaryTitle } from './session-summary-preview.js'
 import { ensureFacilityGraphic, ensureFacilityTextureDefs, renderFacilityGraphic } from './facility-vector.js'
 import { createSessionLifelineAnimator } from './session-lifeline.js'
 
@@ -189,7 +190,8 @@ function ensureFacilitySpine(document, row, kind, next) {
 }
 
 
-export function createSidebarControlAdapter({ document, window, sessions, workspaces, getSessionStatus, getUiWorkspace }) {
+export function createSidebarControlAdapter({ document, window, sessions, workspaces, getSessionStatus, getUiWorkspace, getUiConversation, getSessions }) {
+  let previewPreferences = {}
   let observer
   let resizeObserver
   let resizeFrame
@@ -201,6 +203,21 @@ export function createSidebarControlAdapter({ document, window, sessions, worksp
   let statusSourcesStarted = false
   let summaryRoot
   let summarySignature = ''
+  let heldPreviewState
+  function dismissHeldPreview(event) {
+    if (!heldPreviewState || (event?.type === 'keydown' && event.key !== 'Escape')) return
+    if (event?.type === 'pointerdown' && (summaryRoot?.contains(event.target) || event.target.closest?.('[data-prts-summary-reply]'))) return
+    heldPreviewState = undefined
+    queueScan()
+  }
+  function enterPreviewState(state) {
+    if (heldPreviewState && heldPreviewState !== state) { heldPreviewState = undefined; queueScan() }
+    preview.enterState(state)
+  }
+  const preview = createSessionSummaryPreview({ document, window, sessions, getUiConversation, getSessions, getSessionStatus, openSession, getPreviewPreferences: () => previewPreferences, onPreviewClosed: () => { if (statusSourcesStarted) queueScan() }, onAnswerSubmitted: state => { heldPreviewState = state; queueScan() } })
+  const stopTitles = new Map()
+  const summaryGroups = new Map()
+  function clearSummaryEffects() { preview.stop(false); for (const stop of stopTitles.values()) stop(); stopTitles.clear(); summaryGroups.clear() }
   let owned = new Set()
   let vectorOwners = new Set()
   const dirtyVectors = new Map()
@@ -216,6 +233,7 @@ export function createSidebarControlAdapter({ document, window, sessions, worksp
   }
 
   function openSession(sessionId) {
+    dismissHeldPreview()
     try {
       const uiWorkspace = getUiWorkspace?.()
       if (typeof uiWorkspace?.openSession === 'function') {
@@ -256,6 +274,8 @@ export function createSidebarControlAdapter({ document, window, sessions, worksp
     count.setAttribute('data-prts-session-summary-count', '')
     count.textContent = String(items.length)
     trigger.append(count)
+    trigger.addEventListener('pointerenter', () => enterPreviewState(state))
+    trigger.addEventListener('focus', () => enterPreviewState(state))
 
     const popover = document.createElement('span')
     popover.setAttribute('data-prts-session-summary-popover', state)
@@ -269,15 +289,73 @@ export function createSidebarControlAdapter({ document, window, sessions, worksp
     hint.textContent = '选择会话'
     heading.append(headingLabel, hint)
     popover.append(heading)
-    for (const item of items) {
+    const reply = document.createElement('section')
+    reply.setAttribute('data-prts-summary-reply', '')
+    reply.setAttribute('role', 'note')
+    reply.setAttribute('popover', 'manual')
+    reply.hidden = true
+    reply.append(document.createElement('strong'), document.createElement('p'))
+    group.addEventListener('pointerleave', () => preview.leave())
+    group.addEventListener('focusout', event => {
+      if (!group.contains(event.relatedTarget)) preview.leave()
+    })
+    const list = document.createElement('span')
+    list.setAttribute('data-prts-summary-list', '')
+    popover.append(list)
+    const entries = new Map()
+    const update = items => {
+      count.textContent = String(items.length)
+      trigger.setAttribute('aria-label', `${label} ${items.length}`)
+      const ids = new Set(items.map(item => item.id))
+      for (const [id, entry] of entries) {
+        if (ids.has(id)) continue
+        stopTitles.get(entry.button)?.()
+        stopTitles.delete(entry.button)
+        entry.button.remove()
+        entries.delete(id)
+      }
+      for (const [index, incoming] of items.entries()) {
+        const existing = entries.get(incoming.id)
+        if (existing) {
+          if (existing.item.title !== incoming.title) {
+            stopTitles.get(existing.button)?.()
+            existing.button.querySelector('[data-prts-summary-title] > span').textContent = incoming.title
+          }
+          Object.assign(existing.item, incoming)
+          let detail = existing.button.querySelector('[data-prts-session-summary-item-status]')
+          if (incoming.statusLabel && !detail) { detail = document.createElement('small'); detail.setAttribute('data-prts-session-summary-item-status',''); existing.button.append(detail) }
+          if (incoming.statusLabel) detail.textContent = incoming.statusLabel
+          else detail?.remove()
+          existing.button.setAttribute('aria-label', incoming.statusLabel ? `${incoming.title}，${incoming.statusLabel}` : incoming.title)
+          if (list.children[index] !== existing.button) list.insertBefore(existing.button, list.children[index] ?? null)
+          continue
+        }
+        const item = {...incoming}
       const button = document.createElement('button')
       button.type = 'button'
       button.setAttribute('role', 'menuitem')
       button.setAttribute('data-prts-session-summary-item', item.id)
       button.append(statusSignal(document, state))
       const title = document.createElement('span')
-      title.textContent = item.title
+      title.setAttribute('data-prts-summary-title', '')
+      const text = document.createElement('span')
+      text.textContent = item.title
+      title.append(text)
       button.append(title)
+      const viewing = document.createElement('em')
+      viewing.setAttribute('data-prts-preview-marker', '')
+      viewing.textContent = '预览中'
+      button.append(viewing)
+      button.setAttribute('aria-label', item.title)
+      stopTitles.set(button, scrollSummaryTitle(button, title, text, window))
+      const showReply = () => {
+        const key = {ongoing:'previewOngoing',warning:'previewWarning',done:'previewDone'}[state]
+        if (previewPreferences[key] === false) { preview.stop(); return }
+        preview.show(item.id, reply, item.title, button)
+      }
+      button.addEventListener('pointermove', showReply)
+      button.addEventListener('pointerleave', () => preview.leave())
+      button.addEventListener('focus', showReply)
       if (item.statusLabel) {
         const detail = document.createElement('small')
         detail.setAttribute('data-prts-session-summary-item-status', '')
@@ -287,17 +365,29 @@ export function createSidebarControlAdapter({ document, window, sessions, worksp
       }
       button.addEventListener('click', event => {
         event.stopPropagation()
+        preview.stop()
         openSession(item.id)
       })
-      popover.append(button)
+      list.insertBefore(button, list.children[index] ?? null)
+      entries.set(item.id, {item, button})
+      }
     }
+    update(items)
+    summaryGroups.set(state, {group, update, dispose: () => {
+      for (const {button} of entries.values()) { stopTitles.get(button)?.(); stopTitles.delete(button) }
+      group.remove()
+    }})
+    popover.append(reply)
     group.append(trigger, popover)
     return group
   }
 
   function syncSummary(root, next) {
     const { header, label } = resolveSectionHeader(root)
-    if (!header || !label) {
+    if (previewPreferences.sessionPreview === false || !header || !label) {
+      heldPreviewState = undefined
+      preview.stop()
+      clearSummaryEffects()
       summaryRoot?.remove()
       summaryRoot = undefined
       summarySignature = ''
@@ -326,10 +416,31 @@ export function createSidebarControlAdapter({ document, window, sessions, worksp
         rows[index] = { ...rows[index], state: nativeRow.state }
       }
     }
-    const warning = rows.filter(item => item.state === 'warning')
-    const ongoing = rows.filter(item => item.state === 'ongoing')
-    const done = rows.filter(item => item.state === 'done')
+    // Do not move the row/menu to another status behind a frozen preview.
+    const pinned = preview.pinnedState()
+    if (pinned?.state) {
+      const item = rows.find(item => item.id === pinned.id)
+      if (item) { item.state = pinned.state; item.statusLabel = undefined }
+    }
+    // While reading a preview, preserve surviving rows' positions and append
+    // newcomers. No persistent ordering: the next idle sync uses host order.
+    const orderedState = state => {
+      const items = rows.filter(item => item.state === state)
+      if (!preview.isOpen() || !summaryRoot) return items
+      const remaining = new Map(items.map(item => [item.id, item]))
+      const stable = []
+      for (const row of summaryRoot.querySelectorAll(`[data-prts-session-summary-group="${state}"] [data-prts-session-summary-item]`)) {
+        const id = row.getAttribute('data-prts-session-summary-item')
+        if (remaining.has(id)) { stable.push(remaining.get(id)); remaining.delete(id) }
+      }
+      return [...stable, ...remaining.values()]
+    }
+    const warning = orderedState('warning')
+    const ongoing = orderedState('ongoing')
+    const done = orderedState('done')
+    if (heldPreviewState && !rows.some(item => item.state === heldPreviewState)) heldPreviewState = undefined
     const signature = JSON.stringify({
+      heldPreviewState,
       warning: warning.map(item => [item.id, item.title, item.statusLabel]),
       ongoing: ongoing.map(item => [item.id, item.title]),
       done: done.map(item => [item.id, item.title]),
@@ -349,10 +460,20 @@ export function createSidebarControlAdapter({ document, window, sessions, worksp
     summaryRoot.hidden = warning.length === 0 && ongoing.length === 0 && done.length === 0
     if (signature === summarySignature) return
     summarySignature = signature
-    summaryRoot.replaceChildren()
-    if (warning.length) summaryRoot.append(buildSummaryGroup('warning', '等待处理的会话', warning))
-    if (ongoing.length) summaryRoot.append(buildSummaryGroup('ongoing', '运行中的会话', ongoing))
-    if (done.length) summaryRoot.append(buildSummaryGroup('done', '完成未查看', done))
+    for (const [state, title, items] of [['warning','等待处理的会话',warning],['ongoing','运行中的会话',ongoing],['done','完成未查看',done]]) {
+      const existing = summaryGroups.get(state)
+      if (!items.length) { existing?.dispose(); summaryGroups.delete(state); continue }
+      if (existing) existing.update(items)
+      else summaryRoot.append(buildSummaryGroup(state, title, items))
+    }
+    let position = 0
+    for (const state of ['warning','ongoing','done']) {
+      const group = summaryGroups.get(state)?.group
+      if (group && summaryRoot.children[position++] !== group) summaryRoot.insertBefore(group, summaryRoot.children[position - 1] ?? null)
+      group?.removeAttribute('data-prts-preview-open')
+    }
+    preview.reanchor(summaryRoot)
+    if (heldPreviewState) summaryRoot.querySelector(`[data-prts-session-summary-group="${heldPreviewState}"]`)?.setAttribute('data-prts-preview-open', '')
   }
 
   function scheduleVectors() {
@@ -487,6 +608,8 @@ export function createSidebarControlAdapter({ document, window, sessions, worksp
       }
       syncSummary(root, next)
     } else {
+      preview.stop()
+      clearSummaryEffects()
       summaryRoot?.remove()
       summaryRoot = undefined
       summarySignature = ''
@@ -508,6 +631,8 @@ export function createSidebarControlAdapter({ document, window, sessions, worksp
   }
 
   function clear() {
+    preview.stop()
+    clearSummaryEffects()
     lifelineAnimator.setTarget(undefined, undefined)
     for (const node of document?.querySelectorAll?.('[data-prts-owned-projection], [data-prts-owned-facility], [data-prts-owned-facility-spine], [data-prts-owned-facility-vector], [data-prts-owned-facility-defs]') ?? []) node.remove()
     for (const node of owned) {
@@ -525,7 +650,10 @@ export function createSidebarControlAdapter({ document, window, sessions, worksp
   }
 
   return {
-    start() {
+    start(preferences = {}) {
+      const keys = ['sessionPreview','previewOngoing','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
       lifelineAnimator.start()
       ensureFacilityTextureDefs(document)
@@ -541,6 +669,8 @@ export function createSidebarControlAdapter({ document, window, sessions, worksp
           flushVectors()
         })
       }
+      document.addEventListener('pointerdown', dismissHeldPreview)
+      document.addEventListener('keydown', dismissHeldPreview)
       scan()
       if (!statusSourcesStarted) {
         statusSourcesStarted = true
@@ -550,7 +680,9 @@ export function createSidebarControlAdapter({ document, window, sessions, worksp
       if (observer || !window?.MutationObserver) return
       const observationRoot = document.querySelector('[data-prts-region="sessions"]')
       if (!observationRoot) return
-      observer = new window.MutationObserver(queueScan)
+      observer = new window.MutationObserver(mutations => {
+        if (mutations.some(mutation => !mutation.target.closest?.('[data-prts-owned-session-summary]'))) queueScan()
+      })
       observer.observe(observationRoot, {
         subtree: true,
         childList: true,
@@ -559,6 +691,9 @@ export function createSidebarControlAdapter({ document, window, sessions, worksp
       })
     },
     dispose() {
+      heldPreviewState = undefined
+      document?.removeEventListener('pointerdown', dismissHeldPreview)
+      document?.removeEventListener('keydown', dismissHeldPreview)
       observer?.disconnect()
       observer = undefined
       stopSessionList()

package/src/client/theme-settings-workbench.js

@@ -40,6 +40,10 @@ const PARTICLE_OPTIONS = [
   ['precise', '精细', 18],
 ]
 
+function previewSetting(key, label, description) {
+  return settingButtons(key, label, []).replace('</strong>', `</strong><small data-prts-preview-setting-description>${description}</small>`)
+}
+
 function settingButtons(key, label, options) {
   const note = key === 'glass'
     ? '<small data-prts-setting-note data-prts-transparency-status hidden>系统当前要求降低透明度</small>'
@@ -60,7 +64,7 @@ function settingButtons(key, label, options) {
       : key === 'sessionFlowPalette'
         ? '<small data-prts-setting-note>同时适配日间与夜间模式</small>'
       : ''
-  if (['cursor', 'railDefaultHidden', 'sessionFlow', 'sessionGlow', 'bakerGroupAvatars', 'conversationEmblem'].includes(key)) return `<div data-prts-setting-row="${key}">
+  if (['cursor', 'railDefaultHidden', 'sessionFlow', 'sessionGlow', 'bakerGroupAvatars', 'conversationEmblem', 'sessionPreview', 'previewOngoing', 'previewWarning', 'previewDone', 'previewDoubleClick', 'previewFollowOngoing', 'previewFollowWarning'].includes(key)) return `<div data-prts-setting-row="${key}">
     <span><strong>${label}</strong>${note}</span>
     <button type="button" role="switch" aria-label="${label}" aria-checked="false" data-prts-setting-switch="${key}" ${key === 'cursor' ? 'data-prts-cursor-switch' : ''}><span aria-hidden="true"></span></button>
   </div>`
@@ -132,6 +136,7 @@ export function themeSettingsMarkup() {
           <button type="button" data-prts-settings-jump="interaction" role="tab" id="prts-tab-interaction" aria-controls="prts-page-interaction" aria-selected="false" tabindex="-1">交互</button>
           <button type="button" data-prts-settings-jump="flow" role="tab" id="prts-tab-flow" aria-controls="prts-page-flow" aria-selected="false" tabindex="-1">会话流线</button>
           <button type="button" data-prts-settings-jump="particles" role="tab" id="prts-tab-particles" aria-controls="prts-page-particles" aria-selected="false" tabindex="-1">粒子效果</button>
+          <button type="button" data-prts-settings-jump="assistance" role="tab" id="prts-tab-assistance" aria-controls="prts-page-assistance" aria-selected="false" tabindex="-1">辅助功能</button>
         </nav>
           <footer data-prts-settings-actions aria-label="全局主题设置操作">
             <div data-prts-persistence-error hidden role="alert">
@@ -142,7 +147,7 @@ export function themeSettingsMarkup() {
 
               <button type="button" data-prts-reset-visual title="恢复全部外观设置" aria-label="恢复全部外观设置">恢复默认</button>
               <div data-prts-reset-confirm hidden role="group" aria-label="确认恢复全部外观设置">
-                <span>重置四个分类的外观参数，保留主题开关、启动动画和徽记配置。</span>
+                <span>重置全部分类的主题设置，保留主题开关、启动动画和徽记配置。</span>
                 <button type="button" data-prts-reset-confirm-action>确认恢复</button>
                 <button type="button" data-prts-reset-cancel>取消</button>
               </div>
@@ -180,6 +185,34 @@ export function themeSettingsMarkup() {
               ${COMMON_CONTROLS.filter(([key]) => ['cursor', 'railDefaultHidden', 'motion'].includes(key)).map(([key, label, options]) => settingButtons(key, label, options)).join('')}
             </div>
           </section>
+          <section data-prts-settings-section="assistance" role="tabpanel" id="prts-page-assistance" aria-labelledby="prts-tab-assistance" tabindex="0" hidden>
+            <header data-prts-section-heading><strong>辅助功能</strong><small>会话状态查看与快捷操作</small></header>
+            <section data-prts-preview-settings>
+              <div data-prts-preview-master>
+                ${previewSetting('sessionPreview', '会话状态预览', '在工作区右侧查看会话进度，无需切换当前会话')}
+              </div>
+              <div data-prts-preview-options>
+                <section data-prts-preview-setting-group>
+                  <header><strong>悬停预览</strong><small>选择哪些状态显示详细浮窗</small></header>
+                  ${previewSetting('previewOngoing', '运行中预览', '逐轮查看已完成的回复，最新内容置顶')}
+                  <div data-prts-preview-details="previewOngoing">
+                  <label data-prts-setting-row="previewReplyLimit"><span><strong>回复条数</strong><small data-prts-preview-setting-description>仅保留最新回复</small></span><select data-prts-preview-reply-limit aria-label="最多显示回复"><option value="5">最新 5 条</option><option value="10">最新 10 条</option><option value="0">不限制</option></select></label>
+                  ${previewSetting('previewFollowOngoing', '运行结束后跟随', '转为待处理或已完成时，自动切换预览')}
+                  </div>
+                  ${previewSetting('previewWarning', '待处理预览（回答与审批）', '查看问题或审批请求，并直接提交选择')}
+                  <div data-prts-preview-details="previewWarning">
+                  ${previewSetting('previewFollowWarning', '待处理结束后跟随', '回答或审批后继续跟随；关闭则留在待处理列表')}
+                  </div>
+                  ${previewSetting('previewDone', '已完成预览', '查看本轮最终回复')}
+
+                </section>
+                <section data-prts-preview-setting-group>
+                  <header><strong>快捷操作</strong></header>
+                  ${previewSetting('previewDoubleClick', '双击浮窗进入会话', '双击正文或空白区域，打开对应会话')}
+                </section>
+              </div>
+            </section>
+          </section>
           <section data-prts-settings-common data-prts-settings-section="flow" role="tabpanel" id="prts-page-flow" aria-labelledby="prts-tab-flow" tabindex="0" hidden>
             <header data-prts-section-heading><strong>会话流线</strong><small>当前会话的流线与辉光</small></header>
             <div data-prts-settings-common-grid>
@@ -490,6 +523,13 @@ export function createThemeSettingsOverlay({
       toggle.setAttribute('aria-checked', String(enabled))
       toggle.classList.toggle('is-active', enabled)
     }
+    const replyLimitSelect = panel.querySelector('[data-prts-preview-reply-limit]')
+    if (replyLimitSelect) replyLimitSelect.value = String(currentPreferences.previewReplyLimit)
+    const replyLimitRow = panel.querySelector('[data-prts-setting-row="previewReplyLimit"]')
+    if (replyLimitRow) replyLimitRow.hidden = currentPreferences.previewOngoing === false
+    for (const details of panel.querySelectorAll('[data-prts-preview-details]')) details.hidden = currentPreferences[details.dataset.prtsPreviewDetails] === false
+    const previewOptions = panel.querySelector('[data-prts-preview-options]')
+    if (previewOptions) previewOptions.hidden = currentPreferences.sessionPreview === false
     for (const key of ['sessionGlow', 'sessionFlowPalette', 'sessionFlowColors', 'sessionFlowSpeed']) {
       const row = panel.querySelector(`[data-prts-setting-row="${key}"]`)
       if (row) row.hidden = currentPreferences.sessionFlow === false
@@ -609,6 +649,7 @@ export function createThemeSettingsOverlay({
 
   function onPanelInput(event) {
     const target = event.target
+    if (target?.matches?.('[data-prts-preview-reply-limit]')) { onPreferenceChange('previewReplyLimit', Number(target.value)); return }
     if (target?.matches?.('input[data-prts-setting-color]')) {
       const key = target.dataset.prtsSettingKey
       const value = normalizeSessionFlowColor(target.value, currentSessionFlowColor(key))

package/src/styles/facility-vector.css

@@ -187,7 +187,7 @@ html[data-dsh-prts] [data-prts-session-summary-popover] {
   opacity: 0;
   visibility: hidden;
   transform: translate3d(0, -4px, 0);
-  transition: opacity 120ms ease, transform 160ms var(--prts-ease-snap), visibility 0s linear 160ms;
+  transition: opacity 70ms ease, transform 90ms var(--prts-ease-snap), visibility 0s linear 90ms;
   pointer-events: none;
 }
 
@@ -201,7 +201,7 @@ html[data-dsh-prts] [data-prts-session-summary-popover]::before {
   height: 16px;
 }
 
-html[data-dsh-prts] [data-prts-session-summary-group]:is(:hover, :has(:focus-visible)) [data-prts-session-summary-popover] {
+html[data-dsh-prts] [data-prts-session-summary-group]:is(:hover, :has(:focus-visible), [data-prts-preview-open]) [data-prts-session-summary-popover] {
   opacity: 1;
   visibility: visible;
   transform: translate3d(0, 0, 0);
@@ -271,7 +271,7 @@ html[data-dsh-prts] [data-prts-session-summary-item-status] {
   font: 700 9px/1 var(--prts-mono);
 }
 
-html[data-dsh-prts] [data-prts-session-summary-item]:is(:hover, :focus-visible) {
+html[data-dsh-prts] [data-prts-session-summary-item]:is(:hover, :focus-visible, [data-prts-preview-active]) {
   background: color-mix(in srgb, currentColor 9%, transparent);
 }
 
@@ -687,3 +687,96 @@ html[data-dsh-prts] :is(
   --prts-facility-outline: var(--prts-yellow);
   background: transparent !important;
 }
+
+html[data-dsh-prts] [data-prts-summary-title] { flex:1; }
+html[data-dsh-prts] [data-prts-summary-title] > span { display:block;width:max-content;min-width:100%; }
+html[data-dsh-prts] [data-prts-summary-reply] {
+  position:fixed;
+  inset:auto;
+  width:296px;
+  color:var(--prts-ink);
+  box-sizing:border-box;
+  margin:0;
+  padding:12px 14px;
+  border:1px solid var(--prts-line);
+  border-radius:8px;
+  background:color-mix(in srgb, var(--prts-panel) 85%, transparent);
+  box-shadow:var(--prts-shadow-glass-overlay);
+}
+html[data-dsh-prts] [data-prts-summary-reply]::before {
+  content:"";
+  position:absolute;
+  top:0;
+  bottom:0;
+  right:100%;
+  width:12px;
+}
+html[data-dsh-prts] [data-prts-summary-reply][hidden] { display:none; }
+html[data-dsh-prts] [data-prts-summary-reply] strong { display:block;color:var(--prts-muted);font:600 10px/1.5 var(--prts-body);letter-spacing:.04em;padding-bottom:8px;border-bottom:1px solid var(--prts-line); }
+html[data-dsh-prts] [data-prts-summary-reply] [data-prts-preview-body] { margin:9px 0 0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;max-height:6.6em;overflow:hidden;white-space:normal;overflow-wrap:anywhere;font:12px/1.65 var(--prts-body); }
+html[data-dsh-prts] [data-prts-summary-list] { display:block;max-height:min(32dvh,260px);overflow-y:auto; }
+
+html[data-dsh-prts] [data-prts-summary-reply][data-prts-preview-question] > strong { color:var(--prts-yellow); }
+html[data-dsh-prts] [data-prts-summary-reply][data-prts-preview-question] > [data-prts-preview-body] { -webkit-line-clamp:2;max-height:3.3em;font-weight:500; }
+html[data-dsh-prts] [data-prts-preview-choices] { display:flex;flex-wrap:wrap;gap:5px;margin-top:10px; }
+html[data-dsh-prts] [data-prts-preview-choices][hidden] { display:none; }
+html[data-dsh-prts] [data-prts-preview-choices] > span {
+  max-width:100%;box-sizing:border-box;padding:3px 7px;border-radius:4px;
+  background:color-mix(in srgb,var(--prts-ink) 7%,transparent);
+  color:var(--prts-muted);font:11px/1.5 var(--prts-body);
+  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
+}
+
+html[data-dsh-prts] [data-prts-preview-actions] { display:flex;gap:6px;flex-wrap:wrap;margin-top:10px; }
+html[data-dsh-prts] [data-prts-preview-actions]:empty { display:none; }
+html[data-dsh-prts] [data-prts-preview-actions] button,
+html[data-dsh-prts] [data-prts-preview-choices] button {
+  font:11px/1.5 var(--prts-body);color:var(--prts-ink);
+  background:color-mix(in srgb,var(--prts-ink) 6%,transparent);
+  border:1px solid var(--prts-line);border-radius:5px;padding:5px 9px;cursor:pointer;
+}
+html[data-dsh-prts] [data-prts-preview-actions] button:hover,
+html[data-dsh-prts] [data-prts-preview-choices] button[aria-pressed="true"] { border-color:var(--prts-yellow);background:color-mix(in srgb,var(--prts-yellow) 12%,transparent); }
+html[data-dsh-prts] [data-prts-preview-actions] button:disabled { opacity:.45;cursor:default; }
+html[data-dsh-prts] [data-prts-preview-editing] { max-height:calc(100dvh - 16px);overflow:auto;background:color-mix(in srgb,var(--prts-panel) 95%,transparent); }
+html[data-dsh-prts] [data-prts-preview-editing] > [data-prts-preview-body] { display:block;max-height:none; }
+html[data-dsh-prts] [data-prts-preview-editing] [data-prts-preview-choices] { flex-direction:column; }
+html[data-dsh-prts] [data-prts-preview-choices] button { text-align:left;white-space:normal;overflow-wrap:anywhere; }
+html[data-dsh-prts] [data-prts-preview-actions] small { width:100%;color:var(--prts-muted);font:11px/1.5 var(--prts-body); }
+html[data-dsh-prts] [data-prts-preview-choices] button small { display:block;margin-top:3px;color:var(--prts-muted);font:10px/1.5 var(--prts-body); }
+html[data-dsh-prts] [data-prts-preview-state="ongoing"] > strong { color:var(--dsw-static-deepseek-450,var(--prts-cyan)); }
+html[data-dsh-prts] [data-prts-preview-state="done"] > strong { color:var(--dsw-alias-state-success-primary,var(--prts-green)); }
+html[data-dsh-prts] [data-prts-preview-state]:not([data-prts-preview-question]) > strong::before {
+  content:"";display:inline-block;width:5px;height:5px;margin-right:7px;background:currentColor;border-radius:50%;vertical-align:1px;
+}
+html[data-dsh-prts] [data-prts-preview-empty] > [data-prts-preview-body] { color:var(--prts-muted); }
+
+html[data-dsh-prts] [data-prts-summary-reply]:not([data-prts-preview-question]) > [data-prts-preview-body] {
+  display:block;max-height:160px;white-space:normal;overflow:auto;overscroll-behavior:contain;
+  scrollbar-width:thin;scrollbar-color:var(--prts-muted) transparent;padding-right:5px;
+}
+html[data-dsh-prts] [data-prts-preview-body] :is(p,ul,ol,blockquote,pre,table,h1,h2,h3,h4,h5,h6) { margin:0 0 8px; }
+html[data-dsh-prts] [data-prts-preview-body] > :last-child { margin-bottom:0; }
+html[data-dsh-prts] [data-prts-preview-body] :is(h1,h2,h3,h4,h5,h6) { font:600 12px/1.6 var(--prts-body);color:var(--prts-ink); }
+html[data-dsh-prts] [data-prts-preview-body] strong { display:inline;font:inherit;font-weight:600;color:inherit;letter-spacing:normal;padding:0;border:0; }
+html[data-dsh-prts] [data-prts-preview-body] :is(ul,ol) { padding-left:18px; }
+html[data-dsh-prts] [data-prts-preview-body] blockquote { padding-left:9px;border-left:2px solid var(--prts-line);color:var(--prts-muted); }
+html[data-dsh-prts] [data-prts-preview-body] table { border-collapse:collapse;font-size:11px;min-width:100%; }
+html[data-dsh-prts] [data-prts-preview-body] :is(th,td) { border:1px solid var(--prts-line);padding:4px 7px;text-align:left;min-width:64px; }
+html[data-dsh-prts] [data-prts-preview-body] code { font:11px/1.6 var(--prts-mono);background:color-mix(in srgb,var(--prts-ink) 6%,transparent);border-radius:3px;padding:1px 3px; }
+html[data-dsh-prts] [data-prts-preview-body] pre { padding:7px;background:color-mix(in srgb,var(--prts-ink) 5%,transparent);border-radius:4px;white-space:pre; }
+html[data-dsh-prts] [data-prts-preview-body] pre code { background:none;padding:0; }
+html[data-dsh-prts] [data-prts-preview-body] a { color:var(--prts-cyan);text-decoration:underline; }
+html[data-dsh-prts] [data-prts-preview-message] + [data-prts-preview-message] { margin-top:5px; }
+html[data-dsh-prts] [data-prts-preview-message] > small { display:block;margin-bottom:6px;color:var(--prts-muted);font:10px/1.5 var(--prts-mono); }
+
+html[data-dsh-prts] [data-prts-reply-entry] { display:flex;align-items:flex-start;gap:8px;width:100%;padding:6px 8px;text-align:left;border:1px solid var(--prts-line);border-radius:5px;background:transparent;color:var(--prts-ink);cursor:pointer; }
+html[data-dsh-prts] [data-prts-reply-entry]:is(:hover,:focus-visible,[data-prts-reply-active]) { background:color-mix(in srgb,var(--prts-ink) 7%,transparent);border-color:var(--prts-muted); }
+html[data-dsh-prts] [data-prts-reply-entry] small { flex:0 0 auto;white-space:nowrap;padding-top:2px;color:var(--prts-muted);font:10px/1.5 var(--prts-mono); }
+html[data-dsh-prts] [data-prts-reply-entry] span { min-width:0;flex:1;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font:12px/1.6 var(--prts-body);overflow-wrap:anywhere; }
+html[data-dsh-prts] [data-prts-reply-detail]:not([data-prts-preview-question]) > [data-prts-preview-body] { max-height:190px; }
+
+html[data-dsh-prts] [data-prts-preview-marker] { display:none;flex:none;margin-left:auto;color:var(--prts-muted);font:600 9px/1.4 var(--prts-body); }
+html[data-dsh-prts] [data-prts-preview-active] > [data-prts-preview-marker] { display:block; }
+html[data-dsh-prts] [data-prts-session-summary-item][data-prts-preview-active] { box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--prts-ink) 30%,transparent);border-top-color:transparent;border-radius:5px;background:color-mix(in srgb,currentColor 9%,transparent); }
+html[data-dsh-prts] [data-prts-preview-session-title] { overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:5px;color:var(--prts-muted);font:400 11px/1.5 var(--prts-body); }

package/src/styles/prts.css

@@ -904,12 +904,6 @@ html[data-dsh-prts] [data-prts-session-row]::before {
   inset: 0 auto 0 0;
   width: var(--prts-spine-width);
   background: var(--prts-line-strong);
-  clip-path: polygon(
-    3px 0, calc(100% - 3px) 0, 100% 3px,
-    100% calc(50% - 5px), calc(100% - 2px) calc(50% - 3px), calc(100% - 2px) calc(50% + 3px), 100% calc(50% + 5px),
-    100% calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 0 calc(100% - 3px),
-    0 calc(50% + 5px), 2px calc(50% + 3px), 2px calc(50% - 3px), 0 calc(50% - 5px), 0 3px
-  );
   transform: scaleX(var(--prts-spine-rest));
   transform-origin: left center;
   transition: transform 220ms var(--prts-ease-spring), background-color 160ms ease;
@@ -935,9 +929,9 @@ html[data-dsh-prts] [data-prts-facility-face] {
     3px 0,
     calc(50% - 25px) 0, calc(50% - 20px) 3.333px, calc(50% + 20px) 3.333px, calc(50% + 25px) 0,
     calc(100% - 3px) 0, 100% 3px,
-    100% calc(50% - 5px), calc(100% - 2px) calc(50% - 3px), calc(100% - 2px) calc(50% + 3px), 100% calc(50% + 5px),
+    100% calc(50% - 5px), calc(100% - .824px) calc(50% - 3px), calc(100% - .824px) calc(50% + 3px), 100% calc(50% + 5px),
     100% calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 0 calc(100% - 3px),
-    0 calc(50% + 5px), 2px calc(50% + 3px), 2px calc(50% - 3px), 0 calc(50% - 5px), 0 3px
+    0 calc(50% + 5px), .824px calc(50% + 3px), .824px calc(50% - 3px), 0 calc(50% - 5px), 0 3px
   );
   transform: translate3d(var(--prts-row-shift), 0, 0);
   transition: transform 220ms var(--prts-ease-spring), border-color 160ms ease, background-color 160ms ease;
@@ -1036,7 +1030,7 @@ html[data-dsh-prts] [data-prts-session-actions] button {
   border-radius: 0 !important;
   background: var(--prts-panel-raised) !important;
   color: var(--prts-muted) !important;
-  clip-path: polygon(3px 0, calc(100% - 3px) 0, 100% 3px, 100% calc(50% - 5px), calc(100% - 2px) calc(50% - 3px), calc(100% - 2px) calc(50% + 3px), 100% calc(50% + 5px), 100% calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 0 calc(100% - 3px), 0 calc(50% + 5px), 2px calc(50% + 3px), 2px calc(50% - 3px), 0 calc(50% - 5px), 0 3px);
+  clip-path: polygon(3px 0, calc(100% - 3px) 0, 100% 3px, 100% calc(50% - 5px), calc(100% - .824px) calc(50% - 3px), calc(100% - .824px) calc(50% + 3px), 100% calc(50% + 5px), 100% calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 0 calc(100% - 3px), 0 calc(50% + 5px), .824px calc(50% + 3px), .824px calc(50% - 3px), 0 calc(50% - 5px), 0 3px);
   cursor: pointer;
 }
 

package/src/styles/refinement.css

@@ -55,9 +55,9 @@ html[data-dsh-prts] [data-prts-workspace-row]::before,
 html[data-dsh-prts] [data-prts-session-row]::before {
   clip-path: polygon(
     1px 0, calc(100% - 1px) 0, 100% 1px,
-    100% calc(50% - 5px), calc(100% - 2px) calc(50% - 3px), calc(100% - 2px) calc(50% + 3px), 100% calc(50% + 5px),
+    100% calc(50% - 5px), 88.235% calc(50% - 3px), 88.235% calc(50% + 3px), 100% calc(50% + 5px),
     100% calc(100% - 1px), calc(100% - 1px) 100%, 1px 100%, 0 calc(100% - 1px),
-    0 calc(50% + 5px), 2px calc(50% + 3px), 2px calc(50% - 3px), 0 calc(50% - 5px), 0 1px
+    0 calc(50% + 5px), 11.765% calc(50% + 3px), 11.765% calc(50% - 3px), 0 calc(50% - 5px), 0 1px
   ) !important;
 }
 
@@ -72,9 +72,9 @@ html[data-dsh-prts] [data-prts-facility-face] {
     1px 0,
     calc(50% - 25px) 0, calc(50% - 20px) 3.333px, calc(50% + 20px) 3.333px, calc(50% + 25px) 0,
     calc(100% - 1px) 0, 100% 1px,
-    100% calc(50% - 5px), calc(100% - 2px) calc(50% - 3px), calc(100% - 2px) calc(50% + 3px), 100% calc(50% + 5px),
+    100% calc(50% - 5px), calc(100% - .824px) calc(50% - 3px), calc(100% - .824px) calc(50% + 3px), 100% calc(50% + 5px),
     100% calc(100% - 1px), calc(100% - 1px) 100%, 1px 100%, 0 calc(100% - 1px),
-    0 calc(50% + 5px), 2px calc(50% + 3px), 2px calc(50% - 3px), 0 calc(50% - 5px), 0 1px
+    0 calc(50% + 5px), .824px calc(50% + 3px), .824px calc(50% - 3px), 0 calc(50% - 5px), 0 1px
   ) !important;
 }
 
@@ -87,9 +87,9 @@ html[data-dsh-prts] [data-prts-facility-face]::after {
     0 0,
     calc(50% - 24px) 0, calc(50% - 19px) 3.333px, calc(50% + 19px) 3.333px, calc(50% + 24px) 0,
     100% 0,
-    100% calc(50% - 4px), calc(100% - 2px) calc(50% - 2px), calc(100% - 2px) calc(50% + 2px), 100% calc(50% + 4px),
+    100% calc(50% - 4px), calc(100% - .824px) calc(50% - 2px), calc(100% - .824px) calc(50% + 2px), 100% calc(50% + 4px),
     100% 100%, 0 100%,
-    0 calc(50% + 4px), 2px calc(50% + 2px), 2px calc(50% - 2px), 0 calc(50% - 4px)
+    0 calc(50% + 4px), .824px calc(50% + 2px), .824px calc(50% - 2px), 0 calc(50% - 4px)
   );
 }
 
@@ -113,9 +113,9 @@ html[data-dsh-prts] [data-prts-session-actions] button {
   background: var(--prts-line) !important;
   clip-path: polygon(
     1px 0, calc(100% - 1px) 0, 100% 1px,
-    100% calc(50% - 5px), calc(100% - 2px) calc(50% - 3px), calc(100% - 2px) calc(50% + 3px), 100% calc(50% + 5px),
+    100% calc(50% - 5px), calc(100% - .824px) calc(50% - 3px), calc(100% - .824px) calc(50% + 3px), 100% calc(50% + 5px),
     100% calc(100% - 1px), calc(100% - 1px) 100%, 1px 100%, 0 calc(100% - 1px),
-    0 calc(50% + 5px), 2px calc(50% + 3px), 2px calc(50% - 3px), 0 calc(50% - 5px), 0 1px
+    0 calc(50% + 5px), .824px calc(50% + 3px), .824px calc(50% - 3px), 0 calc(50% - 5px), 0 1px
   ) !important;
 }
 
@@ -128,9 +128,9 @@ html[data-dsh-prts] [data-prts-session-actions] button::before {
   background: var(--prts-panel-raised);
   clip-path: polygon(
     0 0, 100% 0,
-    100% calc(50% - 4px), calc(100% - 2px) calc(50% - 2px), calc(100% - 2px) calc(50% + 2px), 100% calc(50% + 4px),
+    100% calc(50% - 4px), calc(100% - .824px) calc(50% - 2px), calc(100% - .824px) calc(50% + 2px), 100% calc(50% + 4px),
     100% 100%, 0 100%,
-    0 calc(50% + 4px), 2px calc(50% + 2px), 2px calc(50% - 2px), 0 calc(50% - 4px)
+    0 calc(50% + 4px), .824px calc(50% + 2px), .824px calc(50% - 2px), 0 calc(50% - 4px)
   );
   pointer-events: none;
 }

package/src/styles/theme-settings-workbench.css

@@ -915,3 +915,30 @@ html[data-dsh-prts]{
 [data-prts-avatar-crop] [data-prts-avatar-upload]{padding:6px 10px;font-size:12px}
 }
 @media(max-width:480px){html[data-dsh-prts] [data-prts-conversation-cards]{grid-template-columns:1fr}}
+html[data-dsh-prts] [data-prts-preview-settings] {
+& { border:1px solid var(--prts-line);border-radius:8px;overflow:hidden;background:var(--prts-panel); }
+& [data-prts-setting-row] { display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 0;border:0;background:none; }
+& [data-prts-setting-row] > span { display:grid;gap:5px;min-width:0; }
+& [data-prts-setting-row] strong { font:600 12px/1.5 var(--prts-body); }
+& [data-prts-setting-row="previewReplyLimit"] { padding:0 0 14px;gap:12px; }
+& [data-prts-setting-row="previewReplyLimit"] strong { color:var(--prts-muted);font-size:11px; }
+& [data-prts-preview-reply-limit] { min-width:112px;padding:7px 10px;border:1px solid var(--prts-line);border-radius:5px;background:var(--prts-panel-raised);color:var(--prts-ink);font:400 11px/1.5 var(--prts-body); }
+& [data-prts-preview-reply-limit]:focus-visible { outline:2px solid var(--prts-ink);outline-offset:2px; }
+& [data-prts-preview-details] { padding:0 12px;margin:0 -12px 8px 0;border-radius:5px;background:color-mix(in srgb,var(--prts-ink) 3%,transparent); }
+& [data-prts-preview-details] [data-prts-setting-row] { padding:10px 0; }
+& [data-prts-preview-details] [data-prts-setting-row] strong { font-size:11px; }
+& [data-prts-preview-setting-description] { color:var(--prts-muted);font:400 11px/1.6 var(--prts-body); }
+& [data-prts-preview-master] { padding:8px 20px;background:color-mix(in srgb,var(--prts-yellow) 5%,transparent); }
+& [data-prts-preview-master] [data-prts-setting-row] strong { font-size:14px; }
+& [data-prts-preview-options] { padding:0 20px 6px;border-top:1px solid var(--prts-line); }
+& [data-prts-preview-setting-group] { padding:18px 0 4px; }
+& [data-prts-preview-setting-group] + [data-prts-preview-setting-group] { border-top:1px solid var(--prts-line); }
+& [data-prts-preview-setting-group] > header { display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;margin-bottom:3px; }
+& [data-prts-preview-setting-group] > header strong { color:var(--prts-muted);font:600 11px/1.5 var(--prts-body); }
+& [data-prts-preview-setting-group] > header small { color:var(--prts-muted);font:400 10px/1.5 var(--prts-body); }
+@media(max-width:640px) {
+  & [data-prts-preview-master] { padding-inline:14px; }
+  & [data-prts-preview-options] { padding-inline:14px; }
+  & [data-prts-setting-row] { gap:12px; }
+}
+}