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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ash-qw/dsh-theme-prts",
-  "version": "0.1.98",
+  "version": "0.1.100",
   "private": false,
   "type": "module",
   "description": "Unofficial Arknights P.R.T.S.-inspired UI theme for DeepSeek Harness Web",
@@ -59,7 +59,7 @@
   ],
   "scripts": {
     "build": "node scripts/build.mjs",
-    "test": "node --test tests/*.test.mjs",
+    "test": "node --test --test-concurrency=1 tests/*.test.mjs",
     "test:e2e": "playwright test",
     "check": "npm run build && npm test",
     "pack:plugin": "npm run check && npm pack",

package/src/client/composer-glass-adapter.js

@@ -61,6 +61,14 @@ function markPopup(popup, kind) {
   }
 }
 
+function hasVisibleText(element) {
+  if (typeof element?.innerText === 'string') return element.innerText.trim().length > 0
+  const clone = element?.cloneNode?.(true)
+  if (!clone) return false
+  for (const hidden of clone.querySelectorAll?.('[hidden], [aria-hidden="true"]') ?? []) hidden.remove()
+  return clone.textContent?.trim().length > 0
+}
+
 function fallbackComposerForms(document) {
   const forms = new Set()
   for (const root of document?.querySelectorAll?.(FALLBACK_COMPOSER_ROOT_SELECTOR) ?? []) {
@@ -147,12 +155,14 @@ export function createComposerGlassAdapter({ document, window }) {
       for (const trigger of composer.querySelectorAll('button[aria-haspopup="menu"], button[aria-haspopup="listbox"]')) {
         const menu = linkedMenu(document, trigger)
           ?? trigger.parentElement?.querySelector('[role="menu"][aria-busy], [role="listbox"][aria-busy]')
-        const isModel = trigger.matches('[class*="_7KE1Ra_"]')
-          || menu?.hasAttribute('aria-busy')
         const isCommands = trigger.getAttribute('aria-haspopup') === 'listbox'
           || trigger.getAttribute('aria-label') === 'Commands'
           || trigger.matches('[class*="uV2eYG_add"]')
-        const kind = isModel ? 'model' : isCommands ? 'action' : 'action'
+        const isModel = !isCommands && (
+          menu?.hasAttribute('aria-busy')
+          || (trigger.getAttribute('aria-haspopup') === 'menu' && hasVisibleText(trigger))
+        )
+        const kind = isModel ? 'model' : 'action'
         mark(trigger, CONTROL_ATTRIBUTE, kind)
         markPopup(menu, kind)
       }

package/src/client/facility-vector.js

@@ -1,4 +1,5 @@
 import { createFacilityPath } from './facility-geometry.js'
+import { configureSessionLifeline } from './session-lifeline.js'
 
 const SVG_NS = 'http://www.w3.org/2000/svg'
 const SILHOUETTE_TRACK_WIDTH = 512
@@ -117,6 +118,22 @@ function appendSessionPickup(document, graphic) {
   clip.append(svgNode(document, 'path', { 'data-prts-facility-clip': '' }))
   defs.append(clip)
 
+  const lifeline = svgNode(document, 'g', {
+    'data-prts-session-lifeline': '',
+    'clip-path': `url(#${clipId})`,
+  })
+  for (const strand of ['back', 'core', 'front']) {
+    const filament = svgNode(document, 'g', {
+      'data-prts-session-lifeline-filament': strand,
+    })
+    for (const layer of ['halo', 'body', 'core']) {
+      filament.append(svgNode(document, 'path', {
+        'data-prts-session-lifeline-layer': layer,
+      }))
+    }
+    lifeline.append(filament)
+  }
+
   const pickup = svgNode(document, 'g', {
     'data-prts-session-pickup': '',
     'clip-path': `url(#${clipId})`,
@@ -146,9 +163,22 @@ function appendSessionPickup(document, graphic) {
   })
 
   graphic.insertBefore(defs, graphic.firstChild)
+  graphic.insertBefore(lifeline, graphic.querySelector('[data-prts-facility-layer="outline"]'))
   graphic.insertBefore(pickup, graphic.querySelector('[data-prts-facility-layer="outline"]'))
 }
 
+function clamp(value, min, max) {
+  return Math.min(max, Math.max(min, value))
+}
+
+function sessionLifelineGeometry(width, height) {
+  const start = clamp(width * .04, 8, 12)
+  const end = Math.max(start + 1, width - 8)
+  const baseline = height * .56
+  const lift = clamp(height * .35, 10, 14)
+  return { start, end, baseline, lift }
+}
+
 export function ensureFacilityGraphic(document, owner, { kind, topNotch = false, texture = 'none' } = {}) {
   if (!owner) return null
   let graphic = owner.querySelector?.(':scope > svg[data-prts-facility-svg]')
@@ -200,6 +230,8 @@ export function renderFacilityGraphic(owner, { width, height } = {}) {
   }
 
   const size = `${Number(width.toFixed(3))}x${Number(height.toFixed(3))}`
+  const lifeline = graphic.querySelector('[data-prts-session-lifeline]')
+  const lifelineGeometry = lifeline ? sessionLifelineGeometry(width, height) : undefined
   if (owner.getAttribute('data-prts-facility-size') !== size) {
     graphic.setAttribute('viewBox', `0 0 ${Number(width.toFixed(3))} ${Number(height.toFixed(3))}`)
     for (const layer of graphic.querySelectorAll('[data-prts-facility-layer], [data-prts-facility-clip]')) layer.setAttribute('d', path)
@@ -223,6 +255,9 @@ export function renderFacilityGraphic(owner, { width, height } = {}) {
         bar.setAttribute('y', String(Number((center - barHeight / 2).toFixed(3))))
       }
     }
+    if (lifeline) {
+      configureSessionLifeline(lifeline, lifelineGeometry)
+    }
     owner.setAttribute('data-prts-facility-size', size)
   }
   setReady(owner, true)

package/src/client/index.js

@@ -193,8 +193,24 @@ export function applyPrtsPlugin(ctx, environment) {
         persistAndApply(updatePreferenceValue(preferences, key, value))
       },
       onPreferencePreview(key, value) {
-        if (key !== 'particleTraversalSpeed') return
-        particleField.update(updatePreferenceValue(preferences, key, value))
+        if (key === 'particleTraversalSpeed') {
+          particleField.update(updatePreferenceValue(preferences, key, value))
+          return
+        }
+        if (key === 'sessionFlowSpeed') {
+          const preview = updatePreferenceValue(preferences, key, value)
+          document.documentElement.dataset.prtsSessionFlowSpeed = String(preview.sessionFlowSpeed)
+          return
+        }
+        const sessionFlowColorProperties = {
+          sessionFlowColorBack: '--prts-session-flow-back',
+          sessionFlowColorCore: '--prts-session-flow-core',
+          sessionFlowColorFront: '--prts-session-flow-front',
+        }
+        if (sessionFlowColorProperties[key]) {
+          document.documentElement.dataset.prtsSessionFlowPalette = 'custom'
+          document.documentElement.style.setProperty(sessionFlowColorProperties[key], String(value))
+        }
       },
       onVisualReset() {
         persistAndApply({

package/src/client/preferences.js

@@ -4,9 +4,20 @@ export const PARTICLE_TRAVERSAL_SPEED_MIN = 0
 export const PARTICLE_TRAVERSAL_SPEED_MAX = 2
 export const PARTICLE_TRAVERSAL_SPEED_STEP = 0.25
 export const PARTICLE_TRAVERSAL_SPEED_DEFAULT = 1
+export const SESSION_FLOW_SPEED_MIN = 0.25
+export const SESSION_FLOW_SPEED_MAX = 2
+export const SESSION_FLOW_SPEED_STEP = 0.25
+export const SESSION_FLOW_SPEED_DEFAULT = 1
+
+export const SESSION_FLOW_PALETTES = Object.freeze({
+  triad: Object.freeze({ back: '#f7ddeb', core: '#65ddb0', front: '#6eb7f3' }),
+  rhodes: Object.freeze({ back: '#b9edf4', core: '#5ccddb', front: '#5a9ee6' }),
+  amber: Object.freeze({ back: '#ffe6a3', core: '#f0c800', front: '#ee8f42' }),
+  alert: Object.freeze({ back: '#ffc0b8', core: '#ee625a', front: '#db5b8c' }),
+})
 
 export const DEFAULT_PREFERENCES = Object.freeze({
-  version: 9,
+  version: 12,
   enabled: false,
   preset: 'standard-tactical',
   texture: 'full',
@@ -18,6 +29,13 @@ export const DEFAULT_PREFERENCES = Object.freeze({
   particleTraversalSpeed: PARTICLE_TRAVERSAL_SPEED_DEFAULT,
   particlePattern: 'orthogonal',
   railDefaultHidden: false,
+  sessionFlow: true,
+  sessionGlow: true,
+  sessionFlowPalette: 'triad',
+  sessionFlowColorBack: SESSION_FLOW_PALETTES.triad.back,
+  sessionFlowColorCore: SESSION_FLOW_PALETTES.triad.core,
+  sessionFlowColorFront: SESSION_FLOW_PALETTES.triad.front,
+  sessionFlowSpeed: SESSION_FLOW_SPEED_DEFAULT,
   conversationStyle: 'native',
 })
 
@@ -60,7 +78,7 @@ export const PREFERENCE_GROUPS = Object.freeze({
   material: Object.freeze(['glass']),
   accessibility: Object.freeze(['motion', 'bootAnimation']),
   navigation: Object.freeze(['railDefaultHidden']),
-  conversation: Object.freeze(['conversationStyle']),
+  conversation: Object.freeze(['sessionFlow', 'sessionGlow', 'sessionFlowPalette', 'sessionFlowColorBack', 'sessionFlowColorCore', 'sessionFlowColorFront', 'sessionFlowSpeed', 'conversationStyle']),
 })
 
 const TEXTURES = new Set(['off', 'restrained', 'full'])
@@ -69,6 +87,8 @@ const MOTIONS = new Set(['system', 'reduced'])
 const PARTICLE_DENSITIES = new Set(['sparse', 'light', 'standard', 'dense', 'ultra'])
 const PRESETS = new Set([...Object.keys(VISUAL_PRESETS), 'custom'])
 const CONVERSATION_STYLES = new Set(['native', 'deck-chat'])
+const SESSION_FLOW_PALETTE_IDS = new Set([...Object.keys(SESSION_FLOW_PALETTES), 'custom'])
+const SESSION_FLOW_COLOR_KEYS = new Set(['sessionFlowColorBack', 'sessionFlowColorCore', 'sessionFlowColorFront'])
 const PRESET_LINKED_KEYS = new Set(Object.keys(VISUAL_PRESETS['standard-tactical']))
 
 
@@ -98,6 +118,10 @@ function enumOr(value, allowed, fallback) {
   return allowed.has(value) ? value : fallback
 }
 
+function colorOr(value, fallback) {
+  return typeof value === 'string' && /^#[\da-f]{6}$/i.test(value) ? value.toLowerCase() : fallback
+}
+
 function particleTraversalSpeedOr(value, fallback) {
   const numeric = Number(value)
   if (!Number.isFinite(numeric)) return fallback
@@ -105,6 +129,13 @@ function particleTraversalSpeedOr(value, fallback) {
   return Math.round(clamped / PARTICLE_TRAVERSAL_SPEED_STEP) * PARTICLE_TRAVERSAL_SPEED_STEP
 }
 
+function sessionFlowSpeedOr(value, fallback) {
+  const numeric = Number(value)
+  if (!Number.isFinite(numeric)) return fallback
+  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 normalizeGlass(input) {
   if (input.glassEnabled === false || input.glass === 'off') return 'off'
   if (input.glass === 'liquid') return 'clear'
@@ -131,8 +162,16 @@ export function normalizePreferences(value) {
     : input.preset
   const particlePreset = VISUAL_PRESETS[input.preset] ?? DEFAULT_PREFERENCES
   const legacyDensities = legacyParticleDensities(input)
+  const sessionFlowPalette = enumOr(input.sessionFlowPalette, SESSION_FLOW_PALETTE_IDS, DEFAULT_PREFERENCES.sessionFlowPalette)
+  const paletteColors = SESSION_FLOW_PALETTES[sessionFlowPalette]
+  const customColors = {
+    back: colorOr(input.sessionFlowColorBack, DEFAULT_PREFERENCES.sessionFlowColorBack),
+    core: colorOr(input.sessionFlowColorCore, DEFAULT_PREFERENCES.sessionFlowColorCore),
+    front: colorOr(input.sessionFlowColorFront, DEFAULT_PREFERENCES.sessionFlowColorFront),
+  }
+  const sessionFlowColors = paletteColors ?? customColors
   const normalized = {
-    version: 9,
+    version: 12,
     enabled: booleanOr(input.enabled, DEFAULT_PREFERENCES.enabled),
     preset: enumOr(migratedPreset, PRESETS, DEFAULT_PREFERENCES.preset),
     texture: enumOr(input.texture, TEXTURES, DEFAULT_PREFERENCES.texture),
@@ -147,6 +186,13 @@ export function normalizePreferences(value) {
     ),
     particlePattern: 'orthogonal',
     railDefaultHidden: booleanOr(input.railDefaultHidden, DEFAULT_PREFERENCES.railDefaultHidden),
+    sessionFlow: booleanOr(input.sessionFlow, DEFAULT_PREFERENCES.sessionFlow),
+    sessionGlow: booleanOr(input.sessionGlow, DEFAULT_PREFERENCES.sessionGlow),
+    sessionFlowPalette,
+    sessionFlowColorBack: sessionFlowColors.back,
+    sessionFlowColorCore: sessionFlowColors.core,
+    sessionFlowColorFront: sessionFlowColors.front,
+    sessionFlowSpeed: sessionFlowSpeedOr(input.sessionFlowSpeed, DEFAULT_PREFERENCES.sessionFlowSpeed),
     conversationStyle: enumOr(input.conversationStyle, CONVERSATION_STYLES, DEFAULT_PREFERENCES.conversationStyle),
   }
   normalized.preset = matchedVisualPreset(normalized)
@@ -173,6 +219,26 @@ export function updatePreferenceValue(value, key, nextValue) {
   if (key === 'preset') return applyVisualPreset(value, nextValue)
   if (key === 'particleDetail') return applyParticleDetail(value, nextValue)
   const current = normalizePreferences(value)
+  if (key === 'sessionFlowPalette') {
+    const palette = enumOr(nextValue, SESSION_FLOW_PALETTE_IDS, current.sessionFlowPalette)
+    const colors = SESSION_FLOW_PALETTES[palette]
+    return normalizePreferences({
+      ...current,
+      sessionFlowPalette: palette,
+      ...(colors ? {
+        sessionFlowColorBack: colors.back,
+        sessionFlowColorCore: colors.core,
+        sessionFlowColorFront: colors.front,
+      } : {}),
+    })
+  }
+  if (SESSION_FLOW_COLOR_KEYS.has(key)) {
+    return normalizePreferences({
+      ...current,
+      sessionFlowPalette: 'custom',
+      [key]: colorOr(nextValue, current[key]),
+    })
+  }
   if (key === 'conversationParticleDensity' || key === 'heroParticleDensity') {
     const density = enumOr(nextValue, PARTICLE_DENSITIES, current[key])
     return normalizePreferences({ ...current, [key]: density })
@@ -194,7 +260,7 @@ export function loadPreferences(storage) {
     const raw = storage?.getItem(PRTS_STORAGE_KEY)
     if (raw === null || raw === undefined) return { ...DEFAULT_PREFERENCES }
     const parsed = JSON.parse(raw)
-    if (![1, 2, 3, 4, 5, 6, 7, 8, 9].includes(parsed?.version)) return { ...DEFAULT_PREFERENCES }
+    if (![1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].includes(parsed?.version)) return { ...DEFAULT_PREFERENCES }
     return normalizePreferences(parsed)
   } catch {
     return { ...DEFAULT_PREFERENCES }

package/src/client/session-lifeline.js

@@ -0,0 +1,270 @@
+const HOVER_SETTLE = 180
+const STATIC_TIME = 2.4
+const POINT_COUNT = 9
+const DEFAULT_FLOW_SPEED = 1
+
+function clamp(value, min, max) {
+  return Math.min(max, Math.max(min, value))
+}
+
+function number(value) {
+  return Number(value.toFixed(3))
+}
+
+function readGeometry(lifeline) {
+  const start = Number(lifeline?.getAttribute?.('data-prts-lifeline-start'))
+  const end = Number(lifeline?.getAttribute?.('data-prts-lifeline-end'))
+  const baseline = Number(lifeline?.getAttribute?.('data-prts-lifeline-baseline'))
+  const lift = Number(lifeline?.getAttribute?.('data-prts-lifeline-lift'))
+  if (![start, end, baseline, lift].every(Number.isFinite) || end <= start || lift <= 0) return null
+  return { start, end, baseline, lift }
+}
+
+function filamentNodes(lifeline) {
+  if (!lifeline) return []
+  if (lifeline.matches?.('[data-prts-session-lifeline-filament]')) return [lifeline]
+  return Array.from(lifeline.querySelectorAll?.('[data-prts-session-lifeline-filament]') ?? [])
+}
+
+function setFilamentPath(filament, path) {
+  const layers = Array.from(filament?.querySelectorAll?.('[data-prts-session-lifeline-layer]') ?? [])
+  if (layers.length === 0) {
+    filament?.setAttribute?.('d', path)
+    return
+  }
+  layers.forEach(layer => layer.setAttribute('d', path))
+}
+
+function createSmoothPath(points) {
+  if (points.length < 2) return ''
+  const commands = [`M ${number(points[0].x)} ${number(points[0].y)}`]
+  for (let index = 0; index < points.length - 1; index += 1) {
+    const previous = points[Math.max(0, index - 1)]
+    const current = points[index]
+    const next = points[index + 1]
+    const following = points[Math.min(points.length - 1, index + 2)]
+    const firstControl = {
+      x: current.x + (next.x - previous.x) / 6,
+      y: current.y + (next.y - previous.y) / 6,
+    }
+    const secondControl = {
+      x: next.x - (following.x - current.x) / 6,
+      y: next.y - (following.y - current.y) / 6,
+    }
+    commands.push([
+      'C',
+      number(firstControl.x),
+      number(firstControl.y),
+      number(secondControl.x),
+      number(secondControl.y),
+      number(next.x),
+      number(next.y),
+    ].join(' '))
+  }
+  return commands.join(' ')
+}
+
+function sampleFlow(u, time, strand) {
+  const edgeEnvelope = Math.sin(Math.PI * u) ** .88
+  const slowTurn = Math.sin(time * .43 + u * Math.PI * 1.16 + Math.sin(time * .13) * .48)
+  const crossCurrent = Math.sin(time * -.29 + u * Math.PI * 2.42 + .7)
+  const fineCurrent = Math.sin(time * .19 + u * Math.PI * 3.76 - .9)
+  const sharedFlow = slowTurn * .52 + crossCurrent * .24 + fineCurrent * .08
+
+  const fan = Math.sin(Math.PI * u) ** 1.35
+  const separation = strand * (.15 + Math.sin(time * .31 + u * Math.PI * 1.48 + strand * .8) * .1)
+  const independentDrift = Math.sin(time * (.36 + strand * .021) + u * Math.PI * 2.18 + strand * 1.35) * .055
+  return edgeEnvelope * clamp(sharedFlow + fan * separation + independentDrift, -.9, .9)
+}
+
+export function createSessionLifelinePath(geometry, time = STATIC_TIME, strength = 1, strand = 0) {
+  const { start, end, baseline, lift } = geometry
+  const span = end - start
+  const tension = clamp(strength, 0, 1)
+  const points = []
+  for (let index = 0; index < POINT_COUNT; index += 1) {
+    const u = index / (POINT_COUNT - 1)
+    points.push({
+      x: start + span * u,
+      y: baseline - lift * sampleFlow(u, time, strand) * tension,
+    })
+  }
+  return createSmoothPath(points)
+}
+
+export function configureSessionLifeline(lifeline, { start, end, baseline, lift }) {
+  if (!lifeline) return false
+  const geometry = { start, end, baseline, lift }
+  lifeline.setAttribute('data-prts-lifeline-start', String(number(start)))
+  lifeline.setAttribute('data-prts-lifeline-end', String(number(end)))
+  lifeline.setAttribute('data-prts-lifeline-baseline', String(number(baseline)))
+  lifeline.setAttribute('data-prts-lifeline-lift', String(number(lift)))
+  filamentNodes(lifeline).forEach((filament, index, filaments) => {
+    const strand = filaments.length === 1 ? 0 : index - (filaments.length - 1) / 2
+    setFilamentPath(filament, createSessionLifelinePath(geometry, STATIC_TIME, 1, strand))
+  })
+  return true
+}
+
+export function createSessionLifelineAnimator({ document, window }) {
+  const requestFrame = window?.requestAnimationFrame?.bind(window)
+    ?? (callback => window?.setTimeout?.(() => callback(Date.now()), 1000 / 60))
+  const cancelFrame = window?.cancelAnimationFrame?.bind(window)
+    ?? window?.clearTimeout?.bind(window)
+  const reducedMotion = window?.matchMedia?.('(prefers-reduced-motion: reduce)')
+  const MotionObserver = window?.MutationObserver
+
+  let frame
+  let lastTime
+  let flowTime = STATIC_TIME
+  let strength = 1
+  let row
+  let lifeline
+  let filaments = []
+  let hovered = false
+  let motionObserver
+
+  function render() {
+    const geometry = readGeometry(lifeline)
+    if (!geometry || filaments.length === 0) return false
+    filaments.forEach((filament, index) => {
+      const strand = filaments.length === 1 ? 0 : index - (filaments.length - 1) / 2
+      setFilamentPath(filament, createSessionLifelinePath(geometry, flowTime, strength, strand))
+    })
+    return true
+  }
+
+  function canAnimate() {
+    return Boolean(
+      row?.isConnected
+      && lifeline?.isConnected
+      && row.getAttribute('aria-selected') === 'true'
+      && document?.visibilityState !== 'hidden'
+      && document?.documentElement?.dataset?.prtsSessionFlow !== 'off'
+      && document?.documentElement?.dataset?.prtsMotion !== 'reduced'
+      && !reducedMotion?.matches
+    )
+  }
+
+  function currentFlowSpeed() {
+    const value = Number(document?.documentElement?.dataset?.prtsSessionFlowSpeed)
+    return Number.isFinite(value) ? clamp(value, .25, 2) : DEFAULT_FLOW_SPEED
+  }
+
+  function cancel() {
+    if (frame !== undefined) cancelFrame?.(frame)
+    frame = undefined
+    lastTime = undefined
+  }
+
+  function needsFrame() {
+    return canAnimate() && (!hovered || strength > 0)
+  }
+
+  function schedule() {
+    if (frame !== undefined || !needsFrame()) return
+    frame = requestFrame?.(tick)
+  }
+
+  function tick(time) {
+    frame = undefined
+    if (!canAnimate()) {
+      lastTime = undefined
+      return
+    }
+    const now = Number.isFinite(time) ? time : Date.now()
+    if (lastTime === undefined) lastTime = now
+    const elapsed = Math.min(100, Math.max(0, now - lastTime))
+    lastTime = now
+    flowTime += elapsed / 1000 * currentFlowSpeed()
+    const target = hovered ? 0 : 1
+    if (strength !== target) {
+      const step = elapsed / HOVER_SETTLE
+      strength = target > strength
+        ? Math.min(target, strength + step)
+        : Math.max(target, strength - step)
+    }
+    render()
+    schedule()
+  }
+
+  function motionReduced() {
+    return document?.documentElement?.dataset?.prtsMotion === 'reduced' || reducedMotion?.matches
+  }
+
+  function syncMotion() {
+    if (canAnimate()) {
+      schedule()
+      return
+    }
+    cancel()
+    if (lifeline && motionReduced()) {
+      flowTime = STATIC_TIME
+      strength = 1
+      render()
+    }
+  }
+
+  function onPointerEnter() {
+    hovered = true
+    syncMotion()
+  }
+
+  function onPointerLeave() {
+    hovered = false
+    syncMotion()
+  }
+
+  function detachRow() {
+    row?.removeEventListener?.('pointerenter', onPointerEnter)
+    row?.removeEventListener?.('pointerleave', onPointerLeave)
+  }
+
+  function attachObservers() {
+    document?.addEventListener?.('visibilitychange', syncMotion)
+    reducedMotion?.addEventListener?.('change', syncMotion)
+    if (!motionObserver && typeof MotionObserver === 'function' && document?.documentElement) {
+      motionObserver = new MotionObserver(syncMotion)
+      motionObserver.observe(document.documentElement, {
+        attributes: true,
+        attributeFilter: ['data-prts-motion', 'data-prts-session-flow', 'data-prts-session-flow-speed'],
+      })
+    }
+  }
+
+  return {
+    start() {
+      attachObservers()
+      syncMotion()
+    },
+    setTarget(nextRow, nextLifeline) {
+      if (row === nextRow && lifeline === nextLifeline) {
+        syncMotion()
+        return
+      }
+      cancel()
+      detachRow()
+      row = nextRow
+      lifeline = nextLifeline
+      filaments = filamentNodes(lifeline)
+      hovered = Boolean(row?.matches?.(':hover'))
+      flowTime = STATIC_TIME
+      strength = hovered ? 0 : 1
+      row?.addEventListener?.('pointerenter', onPointerEnter)
+      row?.addEventListener?.('pointerleave', onPointerLeave)
+      render()
+      syncMotion()
+    },
+    dispose() {
+      cancel()
+      detachRow()
+      row = undefined
+      lifeline = undefined
+      filaments = []
+      motionObserver?.disconnect()
+      motionObserver = undefined
+      document?.removeEventListener?.('visibilitychange', syncMotion)
+      reducedMotion?.removeEventListener?.('change', syncMotion)
+    },
+  }
+}

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

@@ -1,4 +1,5 @@
 import { ensureFacilityGraphic, ensureFacilityTextureDefs, renderFacilityGraphic } from './facility-vector.js'
+import { createSessionLifelineAnimator } from './session-lifeline.js'
 
 const OWNED_ATTRIBUTES = [
   'data-prts-row-title',
@@ -128,6 +129,7 @@ export function createSidebarControlAdapter({ document, window }) {
   let vectorOwners = new Set()
   const dirtyVectors = new Map()
   const vectorSizes = new WeakMap()
+  const lifelineAnimator = createSessionLifelineAnimator({ document, window })
 
   function scheduleVectors() {
     if (resizeFrame !== undefined) return
@@ -191,6 +193,8 @@ export function createSidebarControlAdapter({ document, window }) {
     const root = document?.querySelector?.('[data-prts-region="sessions"] [data-slot="sidebar.workspaces"]')
     const next = new Set()
     const nextVectorOwners = new Set()
+    let activeLifelineRow
+    let activeLifeline
     if (root) {
       for (const projection of root.querySelectorAll('[data-prts-owned-projection]')) projection.remove()
       for (const row of root.querySelectorAll('div[role="treeitem"][aria-expanded]')) {
@@ -222,6 +226,10 @@ export function createSidebarControlAdapter({ document, window }) {
         const spine = ensureFacilitySpine(document, row, 'session', next)
         registerVector(face, { kind: 'face', topNotch: true, texture: 'pickup' }, next, nextVectorOwners)
         registerVector(spine, { kind: 'spine' }, next, nextVectorOwners)
+        if (!activeLifelineRow && row.getAttribute('aria-selected') === 'true') {
+          activeLifelineRow = row
+          activeLifeline = face.querySelector('[data-prts-session-lifeline]')
+        }
         markSidebarNode(row, 'data-prts-session-row', next)
         row.dataset.prtsSessionIndex = sessionIndex
         const title = resolveRowTitle(row, 'session', controls.actions)
@@ -236,6 +244,7 @@ export function createSidebarControlAdapter({ document, window }) {
         registerVector(controls.menu, { kind: 'button' }, next, nextVectorOwners)
       }
     }
+    lifelineAnimator.setTarget(activeLifelineRow, activeLifeline)
     for (const node of owned) {
       if (next.has(node)) continue
       if (node.hasAttribute?.('data-prts-owned-projection')
@@ -252,6 +261,7 @@ export function createSidebarControlAdapter({ document, window }) {
   }
 
   function clear() {
+    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) {
       for (const attribute of OWNED_ATTRIBUTES) node.removeAttribute?.(attribute)
@@ -267,6 +277,7 @@ export function createSidebarControlAdapter({ document, window }) {
   return {
     start() {
       if (!document) return
+      lifelineAnimator.start()
       ensureFacilityTextureDefs(document)
       const ResizeObserver = window?.ResizeObserver
       if (!resizeObserver && typeof ResizeObserver === 'function') {
@@ -311,6 +322,7 @@ export function createSidebarControlAdapter({ document, window }) {
       resizeFrame = undefined
       if (resizeTimer !== undefined) window?.clearTimeout?.(resizeTimer)
       resizeTimer = undefined
+      lifelineAnimator.dispose()
       clear()
     },
   }

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

@@ -7,8 +7,17 @@ const ROOT_ATTRIBUTES = [
   'data-prts-glass',
   'data-prts-motion',
   'data-prts-particle-pattern',
+  'data-prts-session-flow',
+  'data-prts-session-glow',
+  'data-prts-session-flow-palette',
+  'data-prts-session-flow-speed',
   'data-prts-conversation-style',
 ]
+const SESSION_FLOW_COLOR_PROPERTIES = {
+  '--prts-session-flow-back': 'sessionFlowColorBack',
+  '--prts-session-flow-core': 'sessionFlowColorCore',
+  '--prts-session-flow-front': 'sessionFlowColorFront',
+}
 
 const TRANSITION_ATTRIBUTE = 'data-prts-scheme-transition'
 const TRANSITION_MODE_ATTRIBUTE = 'data-prts-scheme-transition-mode'
@@ -101,6 +110,7 @@ export function createThemeController({ document, window, cssText, service, onTr
 
   function clearThemeState() {
     for (const attribute of ROOT_ATTRIBUTES) root.removeAttribute(attribute)
+    for (const property of Object.keys(SESSION_FLOW_COLOR_PROPERTIES)) root.style.removeProperty(property)
     clearTransitionState()
   }
 
@@ -716,6 +726,11 @@ export function createThemeController({ document, window, cssText, service, onTr
       root.dataset.prtsGlass = preferences.glass
       root.dataset.prtsMotion = preferences.motion
       root.dataset.prtsParticlePattern = 'orthogonal'
+      root.dataset.prtsSessionFlow = preferences.sessionFlow ? 'on' : 'off'
+      root.dataset.prtsSessionGlow = preferences.sessionGlow ? 'on' : 'off'
+      root.dataset.prtsSessionFlowPalette = preferences.sessionFlowPalette
+      root.dataset.prtsSessionFlowSpeed = String(preferences.sessionFlowSpeed)
+      for (const [property, key] of Object.entries(SESSION_FLOW_COLOR_PROPERTIES)) root.style.setProperty(property, preferences[key])
       root.dataset.prtsConversationStyle = preferences.conversationStyle
       refresh()
     },