@ash-qw/dsh-theme-prts 0.1.99 → 0.1.100

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

@@ -1,4 +1,4 @@
-import { PARTICLE_TRAVERSAL_SPEED_DEFAULT, PARTICLE_TRAVERSAL_SPEED_MAX, PARTICLE_TRAVERSAL_SPEED_MIN, PARTICLE_TRAVERSAL_SPEED_STEP, resolveParticleDetail } from './preferences.js'
+import { PARTICLE_TRAVERSAL_SPEED_DEFAULT, PARTICLE_TRAVERSAL_SPEED_MAX, PARTICLE_TRAVERSAL_SPEED_MIN, PARTICLE_TRAVERSAL_SPEED_STEP, SESSION_FLOW_SPEED_DEFAULT, SESSION_FLOW_SPEED_MAX, SESSION_FLOW_SPEED_MIN, SESSION_FLOW_SPEED_STEP, resolveParticleDetail } from './preferences.js'
 
 const SETTINGS_FOCUSABLE = [
   'button:not([disabled])',
@@ -20,7 +20,14 @@ const COMMON_CONTROLS = [
   ['glass', '玻璃材质', [['off', '关闭'], ['soft', '柔和'], ['standard', '标准'], ['clear', '清晰']]],
   ['motion', '动态效果', [['system', '跟随系统'], ['reduced', '减少']]],
   ['sessionFlow', '当前会话流线', [['false', '关闭'], ['true', '开启']]],
-  ['conversationStyle', '会话主题', [['native', '原有'], ['deck-chat', '通讯链路']]],
+  ['sessionGlow', '流线光效', [['false', '关闭'], ['true', '开启']]],
+  ['sessionFlowPalette', '流线色调', [['triad', '三色'], ['rhodes', '青蓝'], ['amber', '金黄'], ['alert', '赤红'], ['custom', '自定义']]],
+]
+
+const SESSION_FLOW_COLOR_CONTROLS = [
+  ['sessionFlowColorBack', '后层'],
+  ['sessionFlowColorCore', '中层'],
+  ['sessionFlowColorFront', '前层'],
 ]
 
 const PARTICLE_OPTIONS = [
@@ -40,8 +47,12 @@ function settingButtons(key, label, options) {
         ? '<small data-prts-setting-note>立即切换会话背景、头像与消息气泡</small>'
       : key === 'sessionFlow'
         ? '<small data-prts-setting-note>仅控制当前会话卡片的三色流线</small>'
+      : key === 'sessionGlow'
+        ? '<small data-prts-setting-note>为流线添加柔和的同色辉光</small>'
+      : key === 'sessionFlowPalette'
+        ? '<small data-prts-setting-note>同时适配日间与夜间模式</small>'
       : ''
-  const sample = value => key === 'texture' || key === 'glass'
+  const sample = value => key === 'texture' || key === 'glass' || key === 'sessionFlowPalette'
     ? `<i data-prts-option-sample="${key}" data-prts-option-sample-value="${value}" aria-hidden="true"></i>`
     : ''
   return `<div data-prts-setting-row="${key}">
@@ -62,6 +73,33 @@ function particleMarkup() {
   </button>`).join('')
 }
 
+function sessionFlowPreviewMarkup() {
+  const filaments = [
+    ['back', 'M 3 29 C 34 8 66 36 101 17 C 126 5 151 27 177 13'],
+    ['core', 'M 3 24 C 30 35 61 7 94 23 C 124 37 148 7 177 20'],
+    ['front', 'M 3 18 C 34 4 66 30 96 12 C 125 -1 148 30 177 24'],
+  ]
+  return `<svg data-prts-session-flow-preview viewBox="0 0 180 42" aria-label="三色流线预览" role="img">
+    ${filaments.map(([strand, path]) => `<g data-prts-session-flow-preview-filament="${strand}">
+      <path data-prts-session-flow-preview-layer="halo" d="${path}"></path>
+      <path data-prts-session-flow-preview-layer="body" d="${path}"></path>
+      <path data-prts-session-flow-preview-layer="core" d="${path}"></path>
+    </g>`).join('')}
+  </svg>`
+}
+
+function sessionFlowColorMarkup() {
+  return `<div data-prts-setting-row="sessionFlowColors" data-prts-session-flow-colors>
+    <span><strong>三色调色盘</strong><small data-prts-setting-note>任意修改后切换为自定义，日夜模式均保持原色</small></span>
+    <div data-prts-session-flow-color-workbench>
+      ${sessionFlowPreviewMarkup()}
+      <div data-prts-session-flow-color-inputs role="group" aria-label="三色流线调色盘">
+        ${SESSION_FLOW_COLOR_CONTROLS.map(([key, label]) => `<label><span>${label}</span><input type="color" value="#ffffff" data-prts-setting-color data-prts-setting-key="${key}" aria-label="${label}流线颜色"><output data-prts-setting-color-output="${key}">#ffffff</output></label>`).join('')}
+      </div>
+    </div>
+  </div>`
+}
+
 export function themeSettingsMarkup() {
   return `<div data-prts-settings-backdrop hidden aria-hidden="true"></div>
     <dialog id="prts-theme-settings" data-prts-theme-settings aria-label="P.R.T.S. 主题设置" aria-hidden="true">
@@ -83,7 +121,14 @@ export function themeSettingsMarkup() {
 
           <section data-prts-settings-common>
             <header><span><small>常用设置</small><strong>主题表现</strong></span></header>
-            <div data-prts-settings-common-grid>${COMMON_CONTROLS.map(([key, label, options]) => settingButtons(key, label, options)).join('')}</div>
+            <div data-prts-settings-common-grid>${COMMON_CONTROLS.map(([key, label, options]) => settingButtons(key, label, options)).join('')}
+              ${sessionFlowColorMarkup()}
+              <label data-prts-setting-row="sessionFlowSpeed" data-prts-setting-range-row data-prts-session-flow-speed>
+                <span><strong>流线速度</strong><small data-prts-setting-note>控制当前会话流线的形变速度</small></span>
+                <div><input type="range" min="0.25" max="2" step="0.25" value="1" data-prts-setting-range data-prts-setting-key="sessionFlowSpeed" aria-label="当前会话流线速度"><output data-prts-session-flow-speed-output>1× · 标准</output></div>
+              </label>
+              ${settingButtons('conversationStyle', '会话主题', [['native', '原有'], ['deck-chat', '通讯链路']])}
+            </div>
           </section>
 
           <details data-prts-settings-advanced>
@@ -143,6 +188,10 @@ export function createThemeSettingsOverlay({
   let currentPersistence = { phase: 'idle', revision: 0 }
   let particleTraversalSpeedDraft
   let particleTraversalSpeedDirty = false
+  let sessionFlowSpeedDraft
+  let sessionFlowSpeedDirty = false
+  let sessionFlowColorDrafts = {}
+  const sessionFlowColorDirty = new Set()
   let savedTimer
   let feedbackTimer
   let feedbackTarget
@@ -192,6 +241,8 @@ export function createThemeSettingsOverlay({
     if (value === isOpen) return isOpen
     if (!value) {
       commitParticleTraversalSpeed()
+      commitSessionFlowSpeed()
+      commitSessionFlowColors()
     }
     isOpen = value
     trigger.setAttribute('aria-expanded', String(isOpen))
@@ -225,6 +276,34 @@ export function createThemeSettingsOverlay({
     )
   }
 
+  function normalizeSessionFlowSpeed(value) {
+    const numeric = Number(value)
+    if (!Number.isFinite(numeric)) return SESSION_FLOW_SPEED_DEFAULT
+    const clamped = Math.min(SESSION_FLOW_SPEED_MAX, Math.max(SESSION_FLOW_SPEED_MIN, numeric))
+    return Math.round(clamped / SESSION_FLOW_SPEED_STEP) * SESSION_FLOW_SPEED_STEP
+  }
+
+  function currentSessionFlowSpeed() {
+    return normalizeSessionFlowSpeed(
+      sessionFlowSpeedDirty ? sessionFlowSpeedDraft : currentPreferences?.sessionFlowSpeed,
+    )
+  }
+
+  function normalizeSessionFlowColor(value, fallback = '#ffffff') {
+    return typeof value === 'string' && /^#[\da-f]{6}$/i.test(value) ? value.toLowerCase() : fallback
+  }
+
+  function currentSessionFlowColor(key) {
+    return normalizeSessionFlowColor(
+      sessionFlowColorDirty.has(key) ? sessionFlowColorDrafts[key] : currentPreferences?.[key],
+      '#ffffff',
+    )
+  }
+
+  function activeSessionFlowPalette() {
+    return sessionFlowColorDirty.size > 0 ? 'custom' : currentPreferences?.sessionFlowPalette
+  }
+
   function conciseNumber(value) {
     return String(Number(Number(value).toFixed(2)))
   }
@@ -243,6 +322,42 @@ export function createThemeSettingsOverlay({
     setText(panel.querySelector('[data-prts-particle-traversal-output]'), particleTraversalLabel(value))
   }
 
+  function sessionFlowSpeedLabel(value) {
+    const speed = normalizeSessionFlowSpeed(value)
+    const description = speed < 1 ? '缓慢' : speed === 1 ? '标准' : speed <= 1.5 ? '快速' : '高速'
+    return `${conciseNumber(speed)}× · ${description}`
+  }
+
+  function renderSessionFlowSpeed() {
+    if (!panel || !currentPreferences) return
+    const value = currentSessionFlowSpeed()
+    const range = panel.querySelector('input[data-prts-setting-range][data-prts-setting-key="sessionFlowSpeed"]')
+    if (range && range.value !== String(value)) range.value = String(value)
+    setText(panel.querySelector('[data-prts-session-flow-speed-output]'), sessionFlowSpeedLabel(value))
+  }
+
+  function renderSessionFlowColors() {
+    if (!panel || !currentPreferences) return
+    for (const [key] of SESSION_FLOW_COLOR_CONTROLS) {
+      const value = currentSessionFlowColor(key)
+      const input = panel.querySelector(`input[data-prts-setting-color][data-prts-setting-key="${key}"]`)
+      if (input && input.value !== value) input.value = value
+      setText(panel.querySelector(`[data-prts-setting-color-output="${key}"]`), value)
+    }
+    const preview = panel.querySelector('[data-prts-session-flow-preview]')
+    if (preview) {
+      preview.dataset.prtsSessionFlowPreviewPalette = activeSessionFlowPalette() || 'triad'
+      preview.style.setProperty('--prts-session-flow-back', currentSessionFlowColor('sessionFlowColorBack'))
+      preview.style.setProperty('--prts-session-flow-core', currentSessionFlowColor('sessionFlowColorCore'))
+      preview.style.setProperty('--prts-session-flow-front', currentSessionFlowColor('sessionFlowColorFront'))
+    }
+    for (const button of panel.querySelectorAll('button[data-prts-setting-key="sessionFlowPalette"]')) {
+      const selected = button.dataset.prtsSettingValue === activeSessionFlowPalette()
+      button.classList.toggle('is-selected', selected)
+      button.setAttribute('aria-pressed', String(selected))
+    }
+  }
+
   function setText(node, value) {
     if (node && node.textContent !== value) node.textContent = value
   }
@@ -260,6 +375,38 @@ export function createThemeSettingsOverlay({
     return true
   }
 
+  function commitSessionFlowSpeed() {
+    if (!sessionFlowSpeedDirty || !currentPreferences) return false
+    const value = currentSessionFlowSpeed()
+    sessionFlowSpeedDirty = false
+    sessionFlowSpeedDraft = value
+    if (value !== normalizeSessionFlowSpeed(currentPreferences.sessionFlowSpeed)) {
+      onPreferenceChange('sessionFlowSpeed', value)
+    } else {
+      renderSessionFlowSpeed()
+    }
+    return true
+  }
+
+  function commitSessionFlowColor(key) {
+    if (!sessionFlowColorDirty.has(key) || !currentPreferences) return false
+    const value = currentSessionFlowColor(key)
+    sessionFlowColorDirty.delete(key)
+    sessionFlowColorDrafts[key] = value
+    if (value !== normalizeSessionFlowColor(currentPreferences[key]) || currentPreferences.sessionFlowPalette !== 'custom') {
+      onPreferenceChange(key, value)
+    } else {
+      renderSessionFlowColors()
+    }
+    return true
+  }
+
+  function commitSessionFlowColors() {
+    let committed = false
+    for (const key of [...sessionFlowColorDirty]) committed = commitSessionFlowColor(key) || committed
+    return committed
+  }
+
   function renderPersistence() {
     const status = panel?.querySelector?.('[data-prts-persistence-status]')
     const error = panel?.querySelector?.('[data-prts-persistence-error]')
@@ -286,8 +433,10 @@ export function createThemeSettingsOverlay({
       const key = button.dataset.prtsSettingKey
       const actual = key === 'particleDetail'
         ? particleDetail
-        : key === 'sessionFlow'
-          ? currentPreferences.sessionFlow !== false
+        : key === 'sessionFlowPalette'
+          ? activeSessionFlowPalette()
+        : key === 'sessionFlow' || key === 'sessionGlow'
+          ? currentPreferences[key] !== false
           : currentPreferences[key]
       const selected = String(actual) === button.dataset.prtsSettingValue
       button.classList.toggle('is-selected', selected)
@@ -305,7 +454,13 @@ export function createThemeSettingsOverlay({
     const particleError = panel.querySelector('[data-prts-particle-error]')
     if (particleError) particleError.hidden = currentStatus?.particle?.phase !== 'error'
     if (!particleTraversalSpeedDirty) particleTraversalSpeedDraft = normalizeParticleTraversalSpeed(currentPreferences.particleTraversalSpeed)
+    if (!sessionFlowSpeedDirty) sessionFlowSpeedDraft = normalizeSessionFlowSpeed(currentPreferences.sessionFlowSpeed)
+    for (const [key] of SESSION_FLOW_COLOR_CONTROLS) {
+      if (!sessionFlowColorDirty.has(key)) sessionFlowColorDrafts[key] = normalizeSessionFlowColor(currentPreferences[key])
+    }
     renderParticleTraversal()
+    renderSessionFlowSpeed()
+    renderSessionFlowColors()
     renderPersistence()
   }
 
@@ -329,6 +484,10 @@ export function createThemeSettingsOverlay({
     if (target.hasAttribute('data-prts-theme-settings-close')) { setOpen(false); return }
     if (target.hasAttribute('data-prts-setting-key')) {
       const raw = target.dataset.prtsSettingValue
+      if (target.dataset.prtsSettingKey === 'sessionFlowPalette') {
+        sessionFlowColorDirty.clear()
+        sessionFlowColorDrafts = {}
+      }
       markFeedback(target)
       onPreferenceChange(target.dataset.prtsSettingKey, raw === 'true' ? true : raw === 'false' ? false : raw)
       return
@@ -339,6 +498,10 @@ export function createThemeSettingsOverlay({
     if (target.hasAttribute('data-prts-reset-confirm-action')) {
       particleTraversalSpeedDirty = false
       particleTraversalSpeedDraft = undefined
+      sessionFlowSpeedDirty = false
+      sessionFlowSpeedDraft = undefined
+      sessionFlowColorDirty.clear()
+      sessionFlowColorDrafts = {}
       setResetConfirmation(false)
       onResetVisual()
     }
@@ -346,6 +509,15 @@ export function createThemeSettingsOverlay({
 
   function onPanelInput(event) {
     const target = event.target
+    if (target?.matches?.('input[data-prts-setting-color]')) {
+      const key = target.dataset.prtsSettingKey
+      const value = normalizeSessionFlowColor(target.value, currentSessionFlowColor(key))
+      sessionFlowColorDrafts[key] = value
+      sessionFlowColorDirty.add(key)
+      renderSessionFlowColors()
+      onPreferencePreview(key, value)
+      return
+    }
     if (!target?.matches?.('input[data-prts-setting-range]')) return
     const value = Number(target.value)
     if (!Number.isFinite(value)) return
@@ -355,6 +527,12 @@ export function createThemeSettingsOverlay({
       renderParticleTraversal()
       onPreferencePreview('particleTraversalSpeed', particleTraversalSpeedDraft)
       return
+    } else if (target.dataset.prtsSettingKey === 'sessionFlowSpeed') {
+      sessionFlowSpeedDraft = normalizeSessionFlowSpeed(value)
+      sessionFlowSpeedDirty = true
+      renderSessionFlowSpeed()
+      onPreferencePreview('sessionFlowSpeed', sessionFlowSpeedDraft)
+      return
     } else {
       return
     }
@@ -378,8 +556,13 @@ export function createThemeSettingsOverlay({
   const renderMediaState = () => renderState()
   const commitFromControl = event => {
     const target = event.target
+    if (target?.matches?.('input[data-prts-setting-color]')) {
+      if (event.type === 'change' || event.type === 'focusout') commitSessionFlowColor(target.dataset.prtsSettingKey)
+      return
+    }
     if (!target?.matches?.('input[data-prts-setting-range]')) return
     if (target.dataset.prtsSettingKey === 'particleTraversalSpeed') commitParticleTraversalSpeed()
+    if (target.dataset.prtsSettingKey === 'sessionFlowSpeed') commitSessionFlowSpeed()
   }
 
   trigger?.addEventListener('click', toggle)
@@ -400,6 +583,10 @@ export function createThemeSettingsOverlay({
       currentStatus = status
       currentPersistence = persistenceState ?? { phase: 'idle', revision: 0 }
       if (!particleTraversalSpeedDirty) particleTraversalSpeedDraft = normalizeParticleTraversalSpeed(preferences?.particleTraversalSpeed)
+      if (!sessionFlowSpeedDirty) sessionFlowSpeedDraft = normalizeSessionFlowSpeed(preferences?.sessionFlowSpeed)
+      for (const [key] of SESSION_FLOW_COLOR_CONTROLS) {
+        if (!sessionFlowColorDirty.has(key)) sessionFlowColorDrafts[key] = normalizeSessionFlowColor(preferences?.[key])
+      }
       renderState()
     },
     open: () => setOpen(true),

package/src/styles/facility-vector.css

@@ -150,42 +150,107 @@ html[data-dsh-prts] [data-prts-session-lifeline] {
   pointer-events: none;
 }
 
-html[data-dsh-prts][data-prts-scheme="light"] [data-prts-session-lifeline] {
-  --prts-lifeline-pink: #c36f99;
-  --prts-lifeline-green: #218d6b;
-  --prts-lifeline-blue: #357ebc;
+html[data-dsh-prts][data-prts-session-flow-palette="rhodes"] [data-prts-session-lifeline] {
+  --prts-lifeline-pink: #b9edf4;
+  --prts-lifeline-green: #5ccddb;
+  --prts-lifeline-blue: #5a9ee6;
+}
+
+html[data-dsh-prts][data-prts-session-flow-palette="amber"] [data-prts-session-lifeline] {
+  --prts-lifeline-pink: #ffe6a3;
+  --prts-lifeline-green: #f0c800;
+  --prts-lifeline-blue: #ee8f42;
+}
+
+html[data-dsh-prts][data-prts-session-flow-palette="alert"] [data-prts-session-lifeline] {
+  --prts-lifeline-pink: #ffc0b8;
+  --prts-lifeline-green: #ee625a;
+  --prts-lifeline-blue: #db5b8c;
+}
+
+html[data-dsh-prts][data-prts-session-flow-palette="custom"] [data-prts-session-lifeline] {
+  --prts-lifeline-pink: var(--prts-session-flow-back);
+  --prts-lifeline-green: var(--prts-session-flow-core);
+  --prts-lifeline-blue: var(--prts-session-flow-front);
 }
 
 html[data-dsh-prts] [data-prts-session-lifeline-filament] {
+  --prts-lifeline-color: currentColor;
+}
+
+html[data-dsh-prts] [data-prts-session-lifeline-layer] {
   fill: none;
-  stroke: currentColor;
-  stroke-width: .8;
+  stroke: var(--prts-lifeline-color);
   stroke-linecap: round;
   stroke-linejoin: round;
   vector-effect: non-scaling-stroke;
   shape-rendering: geometricPrecision;
+  transition: opacity 160ms ease, stroke-width 160ms ease;
 }
 
 html[data-dsh-prts] [data-prts-session-lifeline-filament="back"] {
-  stroke: var(--prts-lifeline-pink);
-  opacity: .74;
-  stroke-width: .85;
+  --prts-lifeline-color: var(--prts-lifeline-pink);
+  opacity: .92;
 }
 
 html[data-dsh-prts] [data-prts-session-lifeline-filament="core"] {
-  stroke: var(--prts-lifeline-green);
-  opacity: .68;
-  stroke-width: .9;
+  --prts-lifeline-color: var(--prts-lifeline-green);
+  opacity: .9;
 }
 
 html[data-dsh-prts] [data-prts-session-lifeline-filament="front"] {
-  stroke: var(--prts-lifeline-blue);
-  opacity: .74;
-  stroke-width: .85;
+  --prts-lifeline-color: var(--prts-lifeline-blue);
+  opacity: .98;
+}
+
+html[data-dsh-prts] [data-prts-session-lifeline-layer="body"] {
+  stroke-width: .9;
+}
+
+html[data-dsh-prts] [data-prts-session-lifeline-layer="halo"],
+html[data-dsh-prts] [data-prts-session-lifeline-layer="core"] {
+  opacity: 0;
+}
+
+html[data-dsh-prts][data-prts-session-glow="off"] :is([data-prts-session-lifeline-layer="halo"], [data-prts-session-lifeline-layer="core"]) {
+  opacity: 0;
+}
+
+html[data-dsh-prts][data-prts-session-glow="on"] [data-prts-session-lifeline-layer="halo"] {
+  stroke-width: 4.25;
+  opacity: .28;
+  filter: blur(1.15px);
+}
+
+html[data-dsh-prts][data-prts-session-glow="on"] [data-prts-session-lifeline-layer="body"] {
+  stroke-width: 1.65;
+  opacity: .98;
+}
+
+html[data-dsh-prts][data-prts-session-glow="on"] [data-prts-session-lifeline-layer="core"] {
+  stroke: color-mix(in srgb, var(--prts-lifeline-color) 18%, #fff);
+  stroke-width: .58;
+  opacity: .96;
+}
+
+html[data-dsh-prts][data-prts-scheme="light"][data-prts-session-glow="on"] [data-prts-session-lifeline-layer="halo"] {
+  stroke: color-mix(in srgb, var(--prts-lifeline-color) 42%, #fff);
+  stroke-width: 4.4;
+  opacity: .45;
+  filter: blur(1.05px);
+}
+
+html[data-dsh-prts][data-prts-scheme="light"][data-prts-session-glow="on"] [data-prts-session-lifeline-layer="body"] {
+  stroke-width: 1.5;
+}
+
+html[data-dsh-prts][data-prts-scheme="light"][data-prts-session-glow="on"] [data-prts-session-lifeline-layer="core"] {
+  stroke: color-mix(in srgb, var(--prts-lifeline-color) 58%, #fff);
+  stroke-width: .52;
 }
 
 html[data-dsh-prts] [data-prts-session-row][aria-selected="true"] [data-prts-session-lifeline] {
-  opacity: .62;
+  opacity: .98;
 }
 
 html[data-dsh-prts] [data-prts-session-row][aria-selected="true"]:hover [data-prts-session-lifeline] {
@@ -197,12 +262,14 @@ html[data-dsh-prts][data-prts-session-flow="off"] [data-prts-session-row] [data-
 }
 
 @media (prefers-reduced-motion: reduce) {
-  html[data-dsh-prts] [data-prts-session-lifeline] {
+  html[data-dsh-prts] [data-prts-session-lifeline],
+  html[data-dsh-prts] [data-prts-session-lifeline-layer] {
     transition-duration: 0s;
   }
 }
 
-html[data-dsh-prts][data-prts-motion="reduced"] [data-prts-session-lifeline] {
+html[data-dsh-prts][data-prts-motion="reduced"] [data-prts-session-lifeline],
+html[data-dsh-prts][data-prts-motion="reduced"] [data-prts-session-lifeline-layer] {
   transition-duration: 0s;
 }
 

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

@@ -260,12 +260,18 @@ html[data-dsh-prts] [data-prts-settings-common] [data-prts-setting-row] {
 }
 
 html[data-dsh-prts] [data-prts-settings-common] [data-prts-setting-row]:nth-child(2n) { border-right: 0; }
-html[data-dsh-prts] [data-prts-settings-common] [data-prts-setting-row]:nth-last-child(-n + 2) { border-bottom: 0; }
 
-html[data-dsh-prts] [data-prts-settings-common] [data-prts-setting-row="conversationStyle"] {
+html[data-dsh-prts] [data-prts-settings-common] :is(
+  [data-prts-setting-row="sessionFlowPalette"],
+  [data-prts-setting-row="sessionFlowColors"],
+  [data-prts-setting-row="sessionFlowSpeed"],
+  [data-prts-setting-row="conversationStyle"]
+) {
   grid-column: 1 / -1;
-  border-top: 1px solid var(--prts-line);
   border-right: 0;
+}
+
+html[data-dsh-prts] [data-prts-settings-common] [data-prts-setting-row="conversationStyle"] {
   border-bottom: 0;
 }
 
@@ -300,6 +306,9 @@ html[data-dsh-prts] [data-prts-settings-common] button[data-prts-setting-key] {
   gap: 5px;
 }
 
+html[data-dsh-prts] [data-prts-setting-row="sessionFlowPalette"] > div { flex-wrap: wrap; }
+html[data-dsh-prts] [data-prts-setting-row="sessionFlowPalette"] button[data-prts-setting-key] { flex-basis: 98px; }
+
 html[data-dsh-prts] [data-prts-option-sample] {
   position: relative;
   width: 22px;
@@ -341,6 +350,67 @@ html[data-dsh-prts] [data-prts-option-sample="glass"][data-prts-option-sample-va
 html[data-dsh-prts] [data-prts-option-sample="glass"][data-prts-option-sample-value="standard"]::after { background: color-mix(in srgb, var(--prts-panel-raised) 62%, transparent); }
 html[data-dsh-prts] [data-prts-option-sample="glass"][data-prts-option-sample-value="clear"]::after { background: color-mix(in srgb, var(--prts-panel-raised) 34%, transparent); backdrop-filter: blur(4px) saturate(1.35); -webkit-backdrop-filter: blur(4px) saturate(1.35); }
 
+html[data-dsh-prts] [data-prts-option-sample="sessionFlowPalette"] {
+  border: 0;
+  background: linear-gradient(90deg, #f7ddeb 0 33%, #65ddb0 33% 66%, #6eb7f3 66%);
+  clip-path: polygon(0 40%, 24% 18%, 48% 54%, 72% 24%, 100% 46%, 100% 68%, 72% 46%, 48% 76%, 24% 40%, 0 62%);
+}
+html[data-dsh-prts] [data-prts-option-sample="sessionFlowPalette"][data-prts-option-sample-value="rhodes"] { background: linear-gradient(90deg, #b9edf4 0 33%, #5ccddb 33% 66%, #5a9ee6 66%); }
+html[data-dsh-prts] [data-prts-option-sample="sessionFlowPalette"][data-prts-option-sample-value="amber"] { background: linear-gradient(90deg, #ffe6a3 0 33%, #f0c800 33% 66%, #ee8f42 66%); }
+html[data-dsh-prts] [data-prts-option-sample="sessionFlowPalette"][data-prts-option-sample-value="alert"] { background: linear-gradient(90deg, #ffc0b8 0 33%, #ee625a 33% 66%, #db5b8c 66%); }
+html[data-dsh-prts] [data-prts-option-sample="sessionFlowPalette"][data-prts-option-sample-value="custom"] { background: linear-gradient(90deg, #d95785 0 33%, #d0a900 33% 66%, #268fbd 66%); }
+
+html[data-dsh-prts] [data-prts-settings-common] [data-prts-setting-row="sessionFlowColors"] {
+  align-items: stretch;
+  padding-block: 9px;
+}
+
+html[data-dsh-prts] [data-prts-settings-common] [data-prts-session-flow-color-workbench] {
+  display: grid;
+  grid-template-columns: minmax(160px, .8fr) minmax(0, 1.2fr);
+  align-items: center;
+  gap: 10px;
+}
+
+html[data-dsh-prts] [data-prts-session-flow-preview] {
+  --prts-lifeline-pink: #f7ddeb;
+  --prts-lifeline-green: #65ddb0;
+  --prts-lifeline-blue: #6eb7f3;
+  width: 100%;
+  height: 54px;
+  display: block;
+  overflow: visible;
+  border: 1px solid var(--prts-line);
+  background: color-mix(in srgb, var(--prts-canvas) 72%, transparent);
+}
+
+html[data-dsh-prts] [data-prts-session-flow-preview][data-prts-session-flow-preview-palette="rhodes"] { --prts-lifeline-pink: #b9edf4; --prts-lifeline-green: #5ccddb; --prts-lifeline-blue: #5a9ee6; }
+html[data-dsh-prts] [data-prts-session-flow-preview][data-prts-session-flow-preview-palette="amber"] { --prts-lifeline-pink: #ffe6a3; --prts-lifeline-green: #f0c800; --prts-lifeline-blue: #ee8f42; }
+html[data-dsh-prts] [data-prts-session-flow-preview][data-prts-session-flow-preview-palette="alert"] { --prts-lifeline-pink: #ffc0b8; --prts-lifeline-green: #ee625a; --prts-lifeline-blue: #db5b8c; }
+html[data-dsh-prts] [data-prts-session-flow-preview][data-prts-session-flow-preview-palette="custom"] { --prts-lifeline-pink: var(--prts-session-flow-back); --prts-lifeline-green: var(--prts-session-flow-core); --prts-lifeline-blue: var(--prts-session-flow-front); }
+
+html[data-dsh-prts] [data-prts-session-flow-preview-filament="back"] { --prts-preview-color: var(--prts-lifeline-pink); }
+html[data-dsh-prts] [data-prts-session-flow-preview-filament="core"] { --prts-preview-color: var(--prts-lifeline-green); }
+html[data-dsh-prts] [data-prts-session-flow-preview-filament="front"] { --prts-preview-color: var(--prts-lifeline-blue); }
+html[data-dsh-prts] [data-prts-session-flow-preview-layer] { fill: none; stroke: var(--prts-preview-color); stroke-linecap: round; stroke-linejoin: round; }
+html[data-dsh-prts] [data-prts-session-flow-preview-layer="body"] { stroke-width: 1.3; opacity: .92; }
+html[data-dsh-prts] [data-prts-session-flow-preview-layer="halo"],
+html[data-dsh-prts] [data-prts-session-flow-preview-layer="core"] { opacity: 0; }
+html[data-dsh-prts][data-prts-session-glow="on"] [data-prts-session-flow-preview-layer="halo"] { stroke-width: 5; opacity: .25; filter: blur(1.2px); }
+html[data-dsh-prts][data-prts-session-glow="on"] [data-prts-session-flow-preview-layer="body"] { stroke-width: 2.2; }
+html[data-dsh-prts][data-prts-session-glow="on"] [data-prts-session-flow-preview-layer="core"] { stroke: color-mix(in srgb, var(--prts-preview-color) 18%, #fff); stroke-width: .72; opacity: .98; }
+html[data-dsh-prts][data-prts-scheme="light"][data-prts-session-glow="on"] [data-prts-session-flow-preview-layer="halo"] { stroke: color-mix(in srgb, var(--prts-preview-color) 42%, #fff); stroke-width: 5.5; opacity: .45; filter: blur(1.3px); }
+html[data-dsh-prts][data-prts-scheme="light"][data-prts-session-glow="on"] [data-prts-session-flow-preview-layer="core"] { stroke: color-mix(in srgb, var(--prts-preview-color) 58%, #fff); }
+
+html[data-dsh-prts] [data-prts-session-flow-color-inputs] {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 5px;
+}
+html[data-dsh-prts] [data-prts-session-flow-color-inputs] label { min-width: 0; display: grid; grid-template-columns: 34px minmax(34px, 1fr); gap: 4px; align-items: center; color: var(--prts-muted); font: 700 8px/1 var(--prts-mono); }
+html[data-dsh-prts] [data-prts-session-flow-color-inputs] input[type="color"] { width: 100%; height: 28px; padding: 2px; border: 1px solid var(--prts-line); border-radius: 0; background: var(--prts-panel-raised); cursor: pointer; }
+html[data-dsh-prts] [data-prts-session-flow-color-inputs] output { grid-column: 1 / -1; color: var(--prts-ink); font: 700 8px/1 var(--prts-mono); text-align: center; text-transform: uppercase; }
+
 html[data-dsh-prts] [data-prts-theme-settings] button[data-prts-setting-key],
 html[data-dsh-prts] [data-prts-retry-save],
 html[data-dsh-prts] [data-prts-reset-visual],
@@ -463,6 +533,13 @@ html[data-dsh-prts] [data-prts-particle-traversal-output] {
   font: 800 8px/1.2 var(--prts-mono);
   text-align: right;
 }
+html[data-dsh-prts] [data-prts-session-flow-speed-output] {
+  min-width: 64px;
+  color: var(--prts-cyan);
+  font: 800 8px/1.2 var(--prts-mono);
+  text-align: right;
+}
+html[data-dsh-prts] [data-prts-session-flow-speed] input[type="range"] { min-width: 120px; }
 html[data-dsh-prts] [data-prts-particle-error] { margin: 8px 0 0; color: var(--prts-yellow); font: 700 8px/1.4 var(--prts-mono); }
 
 html[data-dsh-prts] [data-prts-setting-range-row] {
@@ -625,7 +702,9 @@ html[data-dsh-prts] :is(
   html[data-dsh-prts] [data-prts-settings-common] [data-prts-setting-row] { min-height: 62px; }
   html[data-dsh-prts] [data-prts-settings-common] button[data-prts-setting-key] { min-height: 40px; }
   html[data-dsh-prts] [data-prts-settings-common] [data-prts-setting-row] { border-right: 0; border-bottom: 1px solid var(--prts-line); }
-  html[data-dsh-prts] [data-prts-settings-common] [data-prts-setting-row]:nth-last-child(2) { border-bottom: 1px solid var(--prts-line); }
+  html[data-dsh-prts] [data-prts-settings-common] [data-prts-session-flow-color-workbench] { grid-template-columns: minmax(0, 1fr); }
+  html[data-dsh-prts] [data-prts-settings-common] [data-prts-setting-row]:nth-last-child(2),
+  html[data-dsh-prts] [data-prts-settings-common] [data-prts-setting-row]:nth-last-child(3) { border-bottom: 1px solid var(--prts-line); }
   html[data-dsh-prts] [data-prts-settings-common] [data-prts-setting-row]:last-child { border-bottom: 0; }
   html[data-dsh-prts] [data-prts-settings-advanced-content] { grid-template-columns: minmax(0, 1fr); }
   html[data-dsh-prts] [data-prts-settings-advanced-content] > section + section { border-left: 0; border-top: 1px solid var(--prts-line); }