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

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,9 @@ export function createSidebarControlAdapter({ document, window, sessions, worksp
   let statusSourcesStarted = false
   let summaryRoot
   let summarySignature = ''
+  const preview = createSessionSummaryPreview({ document, window, sessions, getUiConversation, getSessions, getSessionStatus, openSession, getPreviewPreferences: () => previewPreferences })
+  let stopTitles = []
+  function clearSummaryEffects() { preview.stop(false); for (const stop of stopTitles) stop(); stopTitles = [] }
   let owned = new Set()
   let vectorOwners = new Set()
   const dirtyVectors = new Map()
@@ -269,6 +274,19 @@ export function createSidebarControlAdapter({ document, window, sessions, worksp
     hint.textContent = '选择会话'
     heading.append(headingLabel, hint)
     popover.append(heading)
+    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)
     for (const item of items) {
       const button = document.createElement('button')
       button.type = 'button'
@@ -276,8 +294,21 @@ export function createSidebarControlAdapter({ document, window, sessions, worksp
       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)
+      button.setAttribute('aria-label', item.title)
+      stopTitles.push(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('pointerenter', 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 +318,21 @@ export function createSidebarControlAdapter({ document, window, sessions, worksp
       }
       button.addEventListener('click', event => {
         event.stopPropagation()
+        preview.stop()
         openSession(item.id)
       })
-      popover.append(button)
+      list.append(button)
     }
+    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) {
+      preview.stop()
+      clearSummaryEffects()
       summaryRoot?.remove()
       summaryRoot = undefined
       summarySignature = ''
@@ -349,10 +384,12 @@ export function createSidebarControlAdapter({ document, window, sessions, worksp
     summaryRoot.hidden = warning.length === 0 && ongoing.length === 0 && done.length === 0
     if (signature === summarySignature) return
     summarySignature = signature
+    clearSummaryEffects()
     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))
+    preview.reanchor(summaryRoot)
   }
 
   function scheduleVectors() {
@@ -487,6 +524,8 @@ export function createSidebarControlAdapter({ document, window, sessions, worksp
       }
       syncSummary(root, next)
     } else {
+      preview.stop()
+      clearSummaryEffects()
       summaryRoot?.remove()
       summaryRoot = undefined
       summarySignature = ''
@@ -508,6 +547,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 +566,10 @@ export function createSidebarControlAdapter({ document, window, sessions, worksp
   }
 
   return {
-    start() {
+    start(preferences = {}) {
+      const keys = ['sessionPreview','previewOngoing','previewWarning','previewDone','previewDoubleClick']
+      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)
@@ -550,7 +594,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,

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'].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,26 @@ 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', '运行中预览', '逐轮查看已完成的回复，最新内容置顶')}
+                  ${previewSetting('previewWarning', '待处理预览（回答与审批）', '查看问题或审批请求，并直接提交选择')}
+                  ${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 +515,8 @@ export function createThemeSettingsOverlay({
       toggle.setAttribute('aria-checked', String(enabled))
       toggle.classList.toggle('is-active', enabled)
     }
+    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

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,91 @@ 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; }

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,23 @@ 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-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; }
+}
+}