@ash-qw/dsh-theme-prts 0.1.91

package/src/client/index.js

@@ -0,0 +1,359 @@
+import { DEFAULT_PREFERENCES, isSafeMode, loadPreferences, persistPreferences, resetPreferenceGroup, updatePreferenceValue } from './preferences.js'
+import { createHostGeometryAdapter } from './host-geometry-adapter.js'
+import { createComposerGlassAdapter } from './composer-glass-adapter.js'
+import { createAssistantGlassAdapter } from './assistant-glass-adapter.js'
+import { createRc7Adapter } from './rc7-adapter.js'
+import { createHarnessStatusSource, EMPTY_STATUS, projectHarnessStatus } from './status-projection.js'
+import { createPrtsUiStore } from './ui-store.js'
+import { createSettingsPage } from './settings-page.js'
+import { createPrtsStartupSequence, findNativeHarnessLoader } from './startup-sequence.js'
+import { createOperationsShell } from './operations-shell-v2.js'
+import { createThemeController } from './theme-controller-v2.js'
+import { createParticleFieldAdapter } from './particle-field-adapter.js'
+import { createToBottomAdapter } from './to-bottom-adapter.js'
+import { createConversationControlAdapter } from './conversation-control-adapter.js'
+import { createConversationScaleAdapter } from './conversation-scale-adapter.js'
+import { createLayoutStabilityDiagnostics } from './layout-stability-diagnostics.js'
+import { createSidebarControlAdapter } from './sidebar-control-adapter.js'
+import { createFloatingGlassAdapter } from './floating-glass-adapter.js'
+
+export const inject = ['slots', 'theme']
+
+function contextService(ctx, name) {
+  try {
+    const service = ctx?.[name]
+    if (service !== undefined && service !== null) return service
+  } catch {}
+  try {
+    return ctx?.get?.(name)
+  } catch {
+    return undefined
+  }
+}
+
+export function applyPrtsPlugin(ctx, environment) {
+  const {
+    document,
+    window,
+    React,
+    defineStore,
+    cssText = '',
+    assets = {},
+    version = 'development',
+    startupTimings,
+  } = environment
+  const safeMode = isSafeMode(window?.location?.search ?? '')
+  const storage = window?.localStorage
+  const themeService = contextService(ctx, 'theme')
+  const theme = createThemeController({ document, window, cssText, service: themeService })
+  const startup = createPrtsStartupSequence({ document, window, prtsEmblem: assets.prtsEmblem, rhodesEmblem: assets.emblem, timings: startupTimings })
+  const composerGlass = createComposerGlassAdapter({ document, window })
+  const assistantGlass = createAssistantGlassAdapter({ document, window })
+  const particleField = createParticleFieldAdapter({
+    document,
+    window,
+    emblems: assets.emblems,
+    emblemMasks: assets.emblemMasks,
+    heroEmblemMask: assets.heroEmblemMask,
+    onStateChange(next) {
+      status = { ...status, particle: next }
+      sync()
+    },
+  })
+  const sessions = contextService(ctx, 'sessions')
+  const toBottom = createToBottomAdapter({ document, window })
+  const conversationControls = createConversationControlAdapter({ document, window })
+  const conversationScale = createConversationScaleAdapter({ document, window, sessions })
+  const layoutDiagnostics = createLayoutStabilityDiagnostics({ document, window })
+  const sidebarControls = createSidebarControlAdapter({ document, window })
+  const floatingGlass = createFloatingGlassAdapter({ document, window })
+  const adapter = createRc7Adapter({ document })
+  const hostGeometry = createHostGeometryAdapter({ document, window })
+  const connection = contextService(ctx, 'connection')
+  let operations
+  let mountObserver
+  let mountFrame
+  let startupReadyObserver
+  let startupSettleFrame
+  let preferences = loadPreferences(storage)
+  let settingsPersistence = { phase: 'idle', revision: 0 }
+  let status = connection ? projectHarnessStatus({ connection }) : EMPTY_STATUS
+  const bindings = new Set()
+  let revision = 0
+  const stopThemeSync = typeof ctx.on === 'function'
+    ? ctx.on('theme/change', value => value == null ? theme.refresh() : theme.sync(value))
+    : undefined
+  let mountWarningIssued = false
+
+  const sync = () => {
+    revision += 1
+    for (const actions of bindings) actions.sync({ ...preferences }, { ...status }, revision)
+  }
+
+  const cancelMountFrame = () => {
+    if (mountFrame === undefined) return
+    if (window?.cancelAnimationFrame) window.cancelAnimationFrame(mountFrame)
+    else window?.clearTimeout?.(mountFrame)
+    mountFrame = undefined
+  }
+
+  const stopMountWatch = () => {
+    mountObserver?.disconnect()
+    mountObserver = undefined
+    cancelMountFrame()
+  }
+
+  const stopStartupReadyWatch = () => {
+    startupReadyObserver?.disconnect()
+    startupReadyObserver = undefined
+    if (startupSettleFrame === undefined) return
+    if (window?.cancelAnimationFrame) window.cancelAnimationFrame(startupSettleFrame)
+    else window?.clearTimeout?.(startupSettleFrame)
+    startupSettleFrame = undefined
+  }
+
+  const disposeOperations = () => {
+    operations?.dispose()
+    operations = undefined
+  }
+
+  const scheduleMountCheck = () => {
+    if (mountFrame !== undefined) return
+    const run = () => {
+      mountFrame = undefined
+      if (!preferences.enabled || safeMode || operations) return
+      applyVisualState()
+    }
+    mountFrame = window?.requestAnimationFrame?.(run)
+    if (mountFrame === undefined) mountFrame = window?.setTimeout?.(run, 16)
+  }
+
+  const watchMount = () => {
+    if (mountObserver || !window?.MutationObserver || !document?.body) return
+    mountObserver = new window.MutationObserver(scheduleMountCheck)
+    mountObserver.observe(document.body, { childList: true, subtree: true })
+  }
+
+  const disposeVisualState = () => {
+    startup.stop({ restoreFocus: false })
+    stopStartupReadyWatch()
+    stopMountWatch()
+    mountWarningIssued = false
+    disposeOperations()
+    composerGlass.dispose()
+    assistantGlass.dispose()
+    particleField.update({ ...preferences, enabled: false })
+    toBottom.dispose()
+    conversationControls.dispose()
+    conversationScale.dispose()
+    layoutDiagnostics.dispose()
+    sidebarControls.dispose()
+    floatingGlass.dispose()
+    theme.apply({ ...preferences, enabled: false })
+  }
+
+  const applyVisualState = ({ themeAlreadyApplied = false } = {}) => {
+    if (safeMode || !preferences.enabled) {
+      disposeVisualState()
+      return
+    }
+    if (!themeAlreadyApplied) theme.apply(preferences)
+    operations ||= createOperationsShell({
+      document, window, assets, adapter, hostGeometry,
+      onSchemeToggle(next) {
+        theme.setTheme(next)
+      },
+      onThemeDisable() {
+        persistAndApply(updatePreferenceValue(preferences, 'enabled', false))
+      },
+      onPreferenceChange(key, value) {
+        persistAndApply(updatePreferenceValue(preferences, key, value))
+      },
+      onVisualReset() {
+        persistAndApply({
+          ...DEFAULT_PREFERENCES,
+          enabled: preferences.enabled,
+          bootAnimation: preferences.bootAnimation,
+        })
+      },
+      onRetrySave() {
+        retryPersistence()
+      },
+      getConversationScalePreview(value) {
+        return conversationScale.getCalibrationState(value)
+      },
+    })
+    if (!operations.update(preferences, status, settingsPersistence)) {
+      if (!mountWarningIssued) {
+        window?.console?.warn?.(
+          '[dsh-theme-prts] operations shell mount deferred; base theme remains active',
+        )
+        mountWarningIssued = true
+      }
+      disposeOperations()
+      watchMount()
+    } else {
+      mountWarningIssued = false
+      stopMountWatch()
+    }
+    particleField.update(preferences)
+    composerGlass.start()
+    assistantGlass.start()
+    toBottom.start()
+    conversationControls.start()
+    conversationScale.update(preferences)
+    conversationScale.start()
+    layoutDiagnostics.start()
+    sidebarControls.start()
+    floatingGlass.start()
+  }
+
+  const persistAndApply = next => {
+    const wasEnabled = Boolean(preferences.enabled)
+    const result = persistPreferences(storage, next)
+    preferences = result.preferences
+    settingsPersistence = {
+      phase: result.persisted ? 'saved' : 'error',
+      revision: settingsPersistence.revision + 1,
+    }
+    applyVisualState()
+    sync()
+    if (!safeMode && !wasEnabled && preferences.enabled && preferences.bootAnimation) startup.play()
+  }
+
+
+  const retryPersistence = () => {
+    const result = persistPreferences(storage, preferences)
+    preferences = result.preferences
+    settingsPersistence = {
+      phase: result.persisted ? 'saved' : 'error',
+      revision: settingsPersistence.revision + 1,
+    }
+    operations?.update(preferences, status, settingsPersistence)
+    sync()
+  }
+  const statusSource = createHarnessStatusSource({
+    connection,
+    onChange(next) {
+      status = next
+      operations?.update(preferences, status, settingsPersistence)
+      sync()
+    },
+  })
+
+
+  const nativeLoader = !safeMode && preferences.enabled && preferences.bootAnimation
+    ? findNativeHarnessLoader(document)
+    : null
+  if (nativeLoader?.isConnected) {
+    theme.apply(preferences)
+    let visualStatePending = true
+    let visualStateSettled = false
+    let settleFrames = 0
+    const requestSettleFrame = callback => window?.requestAnimationFrame?.(callback)
+      ?? window?.setTimeout?.(callback, 16)
+    const ensureVisualState = () => {
+      if (nativeLoader.isConnected) return false
+      if (visualStatePending) {
+        visualStatePending = false
+        applyVisualState({ themeAlreadyApplied: true })
+        const settle = () => {
+          startupSettleFrame = undefined
+          const particleCanvas = document.querySelector('[data-prts-particle-layer]')
+          const particleReady = !particleCanvas || particleCanvas.hasAttribute('data-prts-particle-ready')
+          settleFrames = particleReady ? settleFrames + 1 : 0
+          if (settleFrames >= 2) {
+            visualStateSettled = true
+            startupReadyObserver?.disconnect()
+            startupReadyObserver = undefined
+            return
+          }
+          startupSettleFrame = requestSettleFrame(settle)
+        }
+        startupSettleFrame = requestSettleFrame(settle)
+      }
+      return visualStateSettled
+    }
+    if (window?.MutationObserver && document?.body) {
+      startupReadyObserver = new window.MutationObserver(ensureVisualState)
+      startupReadyObserver.observe(document.body, { childList: true, subtree: true })
+    }
+    const takeoverStarted = startup.play({
+      waitForReady: true,
+      readyWhen: ensureVisualState,
+    })
+    if (!takeoverStarted) {
+      stopStartupReadyWatch()
+      applyVisualState({ themeAlreadyApplied: true })
+    }
+  } else {
+    applyVisualState()
+  }
+  ctx.effect(() => () => {
+    statusSource.dispose()
+    startup.dispose({ restoreFocus: false })
+    stopStartupReadyWatch()
+    stopMountWatch()
+    disposeOperations()
+    composerGlass.dispose()
+    assistantGlass.dispose()
+    particleField.dispose()
+    toBottom.dispose()
+    conversationControls.dispose()
+    conversationScale.dispose()
+    layoutDiagnostics.dispose()
+    sidebarControls.dispose()
+    floatingGlass.dispose()
+    if (typeof stopThemeSync === 'function') stopThemeSync()
+    theme.dispose()
+    bindings.clear()
+  }, 'dsh-theme-prts: visual cleanup')
+
+  const initialStoreState = { preferences, status, revision }
+  const settingsStore = createPrtsUiStore(defineStore, initialStoreState)
+  const PrtsSettingsPage = createSettingsPage(React, {
+    emblem: assets.emblem,
+    version,
+    safeMode,
+  })
+  const injectActions = actions => {
+    bindings.add(actions)
+    sync()
+    return {
+      updatePreference(key, value) { persistAndApply(updatePreferenceValue(preferences, key, value)) },
+      resetPreferenceGroup(group) {
+        persistAndApply(resetPreferenceGroup(preferences, group))
+      },
+      resetPreferences() {
+        persistAndApply({
+          ...DEFAULT_PREFERENCES,
+          enabled: preferences.enabled,
+          bootAnimation: preferences.bootAnimation,
+        })
+      },
+    }
+  }
+
+  ctx.slots.inject('settings.plugins.tab', () => ctx.slots.register({
+    name: 'settings.plugins.tab',
+    id: 'prts-appearance',
+    order: 20,
+    label: () => 'P.R.T.S.',
+    store: settingsStore,
+    inject: injectActions,
+  }, PrtsSettingsPage))
+}
+
+export function apply(ctx) {
+  const React = require('react')
+  const { defineStore } = require('@deepseek-ai/dsh-client-runtime/client')
+  applyPrtsPlugin(ctx, {
+    document,
+    window,
+    React,
+    defineStore,
+    cssText: PRTS_CSS,
+    assets: PRTS_ASSETS,
+    version: PRTS_VERSION,
+  })
+}

package/src/client/layout-stability-diagnostics.js

@@ -0,0 +1,162 @@
+const USER_TURN_SELECTOR = [
+  '[data-chat-flow-kind="user"]',
+  '[data-chat-flow-kind="user-step"]',
+  '[data-message-role="user"]',
+].join(',')
+
+const RECORD_LIMIT = 240
+
+function nodeLabel(node) {
+  if (!node?.tagName) return ''
+  const role = node.getAttribute?.('data-chat-flow-kind')
+    || node.getAttribute?.('data-message-role')
+    || node.getAttribute?.('data-prts-conversation-control')
+    || node.getAttribute?.('data-prts-to-bottom')
+  return `${node.tagName.toLowerCase()}${role ? `[${role}]` : ''}`
+}
+
+export function createLayoutStabilityDiagnostics({ document, window }) {
+  let frame
+  let performanceObserver
+  let mutationObserver
+  let started = false
+  let lastSample
+  let lastUserInput = 0
+  const records = []
+
+  function enabled() {
+    if (document?.documentElement?.dataset?.prtsDiagnostics === 'layout') return true
+    try {
+      return new URLSearchParams(window?.location?.search ?? '').get('prtsDiagnostics') === 'layout'
+    } catch {
+      return false
+    }
+  }
+
+  function push(type, detail = {}) {
+    records.push({
+      type,
+      time: Number((window?.performance?.now?.() ?? Date.now()).toFixed?.(2) ?? Date.now()),
+      sinceUserInput: Math.max(0, Date.now() - lastUserInput),
+      ...detail,
+    })
+    if (records.length > RECORD_LIMIT) records.splice(0, records.length - RECORD_LIMIT)
+  }
+
+  function visibleAnchor(scroller) {
+    const scrollerBox = scroller?.getBoundingClientRect?.()
+    if (!scrollerBox) return {}
+    for (const turn of scroller.querySelectorAll?.(USER_TURN_SELECTOR) ?? []) {
+      const box = turn.getBoundingClientRect?.()
+      if (box && box.bottom > scrollerBox.top && box.top < scrollerBox.bottom) {
+        return { node: nodeLabel(turn), top: Number(box.top.toFixed(2)) }
+      }
+    }
+    return {}
+  }
+
+  function sample() {
+    frame = undefined
+    if (!started) return
+    const scroller = document?.querySelector?.('[data-prts-region="operation"] [data-conversation-scroll]')
+    if (scroller) {
+      const anchor = visibleAnchor(scroller)
+      const next = {
+        scrollTop: Number(Number(scroller.scrollTop).toFixed(2)),
+        scrollHeight: Number(scroller.scrollHeight),
+        clientHeight: Number(scroller.clientHeight),
+        anchor: anchor.node,
+        anchorTop: anchor.top,
+      }
+      if (lastSample) {
+        const scrollDelta = next.scrollTop - lastSample.scrollTop
+        const heightDelta = next.scrollHeight - lastSample.scrollHeight
+        const anchorDelta = next.anchor === lastSample.anchor && Number.isFinite(next.anchorTop) && Number.isFinite(lastSample.anchorTop)
+          ? Number((next.anchorTop - lastSample.anchorTop).toFixed(2))
+          : undefined
+        if (scrollDelta || heightDelta || anchorDelta) {
+          push('geometry', { scrollDelta, heightDelta, anchorDelta, anchor: next.anchor })
+        }
+      }
+      lastSample = next
+    } else {
+      lastSample = undefined
+    }
+    frame = window?.requestAnimationFrame?.(sample)
+  }
+
+  function onUserInput(event) {
+    lastUserInput = Date.now()
+    push('input', { event: event.type, key: event.key })
+  }
+
+  function startPerformanceObserver() {
+    const PerformanceObserver = window?.PerformanceObserver
+    if (typeof PerformanceObserver !== 'function') return
+    try {
+      performanceObserver = new PerformanceObserver(list => {
+        for (const entry of list.getEntries()) {
+          if (entry.entryType === 'layout-shift') {
+            push('layout-shift', {
+              value: entry.value,
+              recentInput: entry.hadRecentInput,
+              sources: (entry.sources ?? []).map(source => nodeLabel(source.node)).filter(Boolean),
+            })
+          } else if (entry.entryType === 'longtask') {
+            push('long-task', { duration: Number(entry.duration.toFixed(2)) })
+          }
+        }
+      })
+      performanceObserver.observe({ type: 'layout-shift', buffered: true })
+      performanceObserver.observe({ type: 'longtask', buffered: true })
+    } catch {
+      performanceObserver?.disconnect?.()
+      performanceObserver = undefined
+    }
+  }
+
+  return {
+    start() {
+      if (started || !enabled()) return false
+      started = true
+      window.__PRTS_LAYOUT_DIAGNOSTICS__ = records
+      for (const type of ['wheel', 'touchstart', 'pointerdown', 'keydown']) {
+        document?.addEventListener?.(type, onUserInput, { capture: true, passive: true })
+      }
+      if (window?.MutationObserver && document?.body) {
+        mutationObserver = new window.MutationObserver(mutations => {
+          for (const mutation of mutations) {
+            if (mutation.type === 'attributes') {
+              push('adapter-style', {
+                attribute: mutation.attributeName,
+                node: nodeLabel(mutation.target),
+              })
+            }
+          }
+        })
+        mutationObserver.observe(document.body, {
+          subtree: true,
+          attributes: true,
+          attributeFilter: ['data-prts-conversation-control', 'data-prts-to-bottom'],
+        })
+      }
+      startPerformanceObserver()
+      frame = window?.requestAnimationFrame?.(sample)
+      return true
+    },
+    dispose() {
+      started = false
+      if (frame !== undefined) window?.cancelAnimationFrame?.(frame)
+      frame = undefined
+      performanceObserver?.disconnect?.()
+      mutationObserver?.disconnect?.()
+      performanceObserver = undefined
+      mutationObserver = undefined
+      for (const type of ['wheel', 'touchstart', 'pointerdown', 'keydown']) {
+        document?.removeEventListener?.(type, onUserInput, { capture: true })
+      }
+      if (window?.__PRTS_LAYOUT_DIAGNOSTICS__ === records) delete window.__PRTS_LAYOUT_DIAGNOSTICS__
+      lastSample = undefined
+    },
+  }
+}