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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ash-qw/dsh-theme-prts",
-  "version": "0.1.97",
+  "version": "0.1.99",
   "private": false,
   "type": "module",
   "description": "Unofficial Arknights P.R.T.S.-inspired UI theme for DeepSeek Harness Web",

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

@@ -2,8 +2,13 @@ const CONTROL_ATTRIBUTE = 'data-prts-glass-control'
 const MENU_ATTRIBUTE = 'data-prts-glass-menu'
 const FALLBACK_COMPOSER_ATTRIBUTE = 'data-prts-composer-fallback'
 const COMPOSER_SIGNAL_ATTRIBUTE = 'data-prts-composer-signal'
+const FALLBACK_COMPOSER_ROOT_SELECTOR = [
+  '[data-slot="conversation.composer"]',
+  '[data-composer-seat]',
+].join(', ')
 const COMPOSER_RELEVANCE_SELECTOR = [
   '[data-composer-card]',
+  FALLBACK_COMPOSER_ROOT_SELECTOR,
   'form textarea',
   'button[aria-haspopup="menu"]',
   'button[aria-haspopup="listbox"]',
@@ -56,6 +61,18 @@ function markPopup(popup, kind) {
   }
 }
 
+function fallbackComposerForms(document) {
+  const forms = new Set()
+  for (const root of document?.querySelectorAll?.(FALLBACK_COMPOSER_ROOT_SELECTOR) ?? []) {
+    if (root.querySelector('[data-composer-card]')) continue
+    for (const textarea of root.querySelectorAll('form textarea')) {
+      const form = textarea.closest('form')
+      if (form && root.contains(form)) forms.add(form)
+    }
+  }
+  return forms
+}
+
 export function createComposerGlassAdapter({ document, window }) {
   let observer
   let scanFrame
@@ -104,17 +121,17 @@ export function createComposerGlassAdapter({ document, window }) {
       signal.remove?.()
       ownedSignals.delete(signal)
     }
+    const fallbackForms = fallbackComposerForms(document)
     for (const form of [...ownedFallbacks]) {
-      if (!form.isConnected || form.hasAttribute('data-composer-card')) {
-        form.removeAttribute?.(FALLBACK_COMPOSER_ATTRIBUTE)
-        ownedFallbacks.delete(form)
-      }
+      if (form.isConnected && fallbackForms.has(form) && !form.hasAttribute('data-composer-card')) continue
+      form.removeAttribute?.(FALLBACK_COMPOSER_ATTRIBUTE)
+      ownedFallbacks.delete(form)
+      if (form.hasAttribute('data-composer-card')) continue
+      const signal = form.querySelector?.(`:scope > [${COMPOSER_SIGNAL_ATTRIBUTE}]`)
+      if (!ownedSignals.has(signal)) continue
+      signal.remove?.()
+      ownedSignals.delete(signal)
     }
-    const fallbackForms = new Set(
-      [...(document?.querySelectorAll?.('form textarea') ?? [])]
-        .map(textarea => textarea.closest('form'))
-        .filter(form => form && !form.querySelector('[data-composer-card]')),
-    )
     for (const form of fallbackForms) {
       form.setAttribute(FALLBACK_COMPOSER_ATTRIBUTE, '')
       ownedFallbacks.add(form)

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,16 @@ 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']) {
+    lifeline.append(svgNode(document, 'path', {
+      'data-prts-session-lifeline-filament': strand,
+    }))
+  }
+
   const pickup = svgNode(document, 'g', {
     'data-prts-session-pickup': '',
     'clip-path': `url(#${clipId})`,
@@ -146,9 +157,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 +224,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 +249,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

@@ -44,7 +44,6 @@ export function applyPrtsPlugin(ctx, environment) {
   const safeMode = isSafeMode(window?.location?.search ?? '')
   const storage = window?.localStorage
   const themeService = contextService(ctx, 'theme')
-  const startup = createPrtsStartupSequence({ document, window, prtsEmblem: assets.prtsEmblem, rhodesEmblem: assets.emblem, timings: startupTimings })
   const composerGlass = createComposerGlassAdapter({ document, window })
   const assistantGlass = createAssistantGlassAdapter({
     document,
@@ -62,6 +61,19 @@ export function applyPrtsPlugin(ctx, environment) {
       sync()
     },
   })
+  const startup = createPrtsStartupSequence({
+    document,
+    window,
+    prtsEmblem: assets.prtsEmblem,
+    rhodesEmblem: assets.emblem,
+    timings: startupTimings,
+    onActiveChange(active) {
+      particleField.setStartupActive(active)
+    },
+    onReady() {
+      particleField.setStartupActive(false)
+    },
+  })
   const theme = createThemeController({
     document,
     window,
@@ -144,6 +156,7 @@ export function applyPrtsPlugin(ctx, environment) {
   }
 
   const disposeVisualState = () => {
+    particleField.update({ ...preferences, enabled: false })
     startup.stop({ restoreFocus: false })
     stopStartupReadyWatch()
     stopMountWatch()
@@ -151,7 +164,6 @@ export function applyPrtsPlugin(ctx, environment) {
     disposeOperations()
     composerGlass.dispose()
     assistantGlass.dispose()
-    particleField.update({ ...preferences, enabled: false })
     toBottom.dispose()
     conversationControls.dispose()
     layoutDiagnostics.dispose()
@@ -227,9 +239,11 @@ export function applyPrtsPlugin(ctx, environment) {
       phase: result.persisted ? 'saved' : 'error',
       revision: settingsPersistence.revision + 1,
     }
+    const shouldPlayStartup = !safeMode && !wasEnabled && preferences.enabled && preferences.bootAnimation
+    if (shouldPlayStartup) particleField.setStartupActive(true)
     applyVisualState()
     sync()
-    if (!safeMode && !wasEnabled && preferences.enabled && preferences.bootAnimation) startup.play()
+    if (shouldPlayStartup && !startup.play()) particleField.setStartupActive(false)
   }
 
 
@@ -302,13 +316,13 @@ export function applyPrtsPlugin(ctx, environment) {
   }
   ctx.effect(() => () => {
     statusSource.dispose()
+    particleField.dispose()
     startup.dispose({ restoreFocus: false })
     stopStartupReadyWatch()
     stopMountWatch()
     disposeOperations()
     composerGlass.dispose()
     assistantGlass.dispose()
-    particleField.dispose()
     toBottom.dispose()
     conversationControls.dispose()
     layoutDiagnostics.dispose()

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

@@ -27,7 +27,10 @@ function markup(emblem) {
           <svg data-prts-scheme-icon="dark" viewBox="0 0 24 24" aria-hidden="true"><path d="M20.2 15.4A8.4 8.4 0 0 1 8.6 3.8 8.5 8.5 0 1 0 20.2 15.4Z"></path></svg>
           <small>明暗</small>
         </button>
-        <button type="button" data-prts-theme-disable aria-label="关闭 P.R.T.S. 主题"><b aria-hidden="true">×</b><small>关闭主题</small></button>
+        <button type="button" data-prts-theme-disable aria-label="退出 P.R.T.S.，返回 Harness 原生界面">
+          <svg data-prts-theme-disable-icon viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3v8"></path><path d="M7.1 6.8a7 7 0 1 0 9.8 0"></path></svg>
+          <small>退出 P.R.T.S.</small>
+        </button>
       </div>
     </nav>
     ${themeSettingsMarkup()}

package/src/client/particle-field-adapter.js

@@ -326,7 +326,7 @@ export function createParticleFieldAdapter({ document, window, emblem = '', embl
   const rhodesIndex = Math.max(0, emblemSequence.findIndex(entry => entry.key === 'rhodes-island'))
   const suppliedHeroMask = normalizeEmblemMasks(heroEmblemMask ? [heroEmblemMask] : [], window).get('rhodes-island-hero')
   const empty = { mounted: false, hero: false, side: -1, transition: null, anchor: { horizontalProgress: 0, verticalProgress: 0 }, phase: 'error', error: '徽记资源异常' }
-  if (!document || !window) return { update() {}, setSchemeTransitionActive() {}, inspect: () => empty, dispose() {} }
+  if (!document || !window) return { update() {}, setStartupActive() {}, setSchemeTransitionActive() {}, inspect: () => empty, dispose() {} }
 
   let preferences = {}
   let operation
@@ -396,6 +396,7 @@ export function createParticleFieldAdapter({ document, window, emblem = '', embl
   let pauseStartedAt
   let hydrationPaused = false
   let schemeTransitionPaused = false
+  let startupPaused = false
   let hydrationTimer
   let hydrationFrame
   let hydrationStableFrames = 0
@@ -429,7 +430,7 @@ export function createParticleFieldAdapter({ document, window, emblem = '', embl
     : preferences.conversationParticleDensity
   const densityProfile = density => PARTICLE_DENSITY_PROFILES[density] ?? PARTICLE_DENSITY_PROFILES.standard
   const particleRadius = density => densityProfile(density ?? activeDensity()).radius
-  const canRenderFrame = () => !disposed && documentVisible && canvasVisible && !hydrationPaused && !schemeTransitionPaused && !resizing
+  const canRenderFrame = () => !disposed && documentVisible && canvasVisible && !hydrationPaused && !startupPaused && !schemeTransitionPaused && !resizing
   const layoutWidth = () => width
   const layoutHeight = () => height
   const layoutShiftX = () => 0
@@ -707,6 +708,7 @@ export function createParticleFieldAdapter({ document, window, emblem = '', embl
   }
 
   function buildParticles() {
+    if (startupPaused) return false
     const selected = populationSource()
     if (!selected.length) {
       reportState({ phase: 'error', error: '徽记资源异常' })
@@ -1646,14 +1648,17 @@ export function createParticleFieldAdapter({ document, window, emblem = '', embl
       cancelFrame()
       return
     }
-    if (pauseStartedAt !== undefined) {
-      resumePausedTimelines(now)
-      if (canvas && particles.length) {
-        syncCanvasBackingStore()
-        cancelFrame()
-        draw(now)
-        return
-      }
+    const resumedFromPause = pauseStartedAt !== undefined
+    if (resumedFromPause) resumePausedTimelines(now)
+    let particlesBuilt = false
+    if (canvas && !particles.length && maskRecords.length) {
+      particlesBuilt = buildParticles()
+    }
+    if (canvas && particles.length && (resumedFromPause || particlesBuilt)) {
+      syncCanvasBackingStore()
+      cancelFrame()
+      draw(now)
+      return
     }
     scheduleFrame()
   }
@@ -1819,6 +1824,12 @@ export function createParticleFieldAdapter({ document, window, emblem = '', embl
   if (!mediaQuery?.addEventListener) mediaQuery?.addListener?.(mediaListener)
   document.addEventListener?.('visibilitychange', onVisibilityChange)
   return {
+    setStartupActive(active) {
+      const next = Boolean(active)
+      if (startupPaused === next) return
+      startupPaused = next
+      updateFrameGate()
+    },
     setSchemeTransitionActive(active) {
       const next = Boolean(active)
       if (schemeTransitionPaused === next) return
@@ -1903,12 +1914,13 @@ export function createParticleFieldAdapter({ document, window, emblem = '', embl
           : transition?.toCount !== undefined
             ? Math.round(transition.fromCount + (transition.toCount - transition.fromCount) * easeInOut(transition.progress))
             : particles.length,
-        targetParticles: transition?.toCount ?? targetParticleCount(),
+        targetParticles: startupPaused && !particles.length ? 0 : transition?.toCount ?? targetParticleCount(),
         density: activeDensity() || 'standard',
         firstFrameReady: canvas?.hasAttribute('data-prts-particle-ready') === true,
         hydrationPaused,
         sleeping: Boolean(context && particles.length && frame === undefined && canRenderFrame() && !motionReduced() && !phoneStatic()),
         schemeTransitionPaused,
+        startupPaused,
         pointer: {
           active: pointerActive,
           clientX: pointerClientX,

package/src/client/preferences.js

@@ -18,7 +18,8 @@ export const DEFAULT_PREFERENCES = Object.freeze({
   particleTraversalSpeed: PARTICLE_TRAVERSAL_SPEED_DEFAULT,
   particlePattern: 'orthogonal',
   railDefaultHidden: false,
-  conversationStyle: 'deck-chat',
+  sessionFlow: true,
+  conversationStyle: 'native',
 })
 
 export const VISUAL_PRESETS = Object.freeze({
@@ -147,6 +148,7 @@ export function normalizePreferences(value) {
     ),
     particlePattern: 'orthogonal',
     railDefaultHidden: booleanOr(input.railDefaultHidden, DEFAULT_PREFERENCES.railDefaultHidden),
+    sessionFlow: booleanOr(input.sessionFlow, DEFAULT_PREFERENCES.sessionFlow),
     conversationStyle: enumOr(input.conversationStyle, CONVERSATION_STYLES, DEFAULT_PREFERENCES.conversationStyle),
   }
   normalized.preset = matchedVisualPreset(normalized)

package/src/client/session-lifeline.js

@@ -0,0 +1,255 @@
+const HOVER_SETTLE = 180
+const STATIC_TIME = 2.4
+const POINT_COUNT = 9
+
+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 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
+    filament.setAttribute('d', 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
+      filament.setAttribute('d', 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 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
+    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'],
+      })
+    }
+  }
+
+  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()
     },
   }