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

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

@@ -17,6 +17,9 @@ const OWNED_ATTRIBUTES = [
   'data-prts-session-menu',
   'data-prts-session-time',
   'data-prts-session-index',
+  'data-prts-session-state',
+  'data-prts-session-summary-header',
+  'data-prts-session-summary-label',
   'data-prts-facility-face',
   'data-prts-facility-spine',
   'data-prts-facility-vector',
@@ -25,6 +28,54 @@ const OWNED_ATTRIBUTES = [
   'data-prts-spine-vector',
 ]
 
+const SESSION_STATES = Object.freeze(['warning', 'ongoing', 'error', 'done'])
+
+function snapshotOf(source) {
+  try {
+    return source?.getSnapshot?.()
+  } catch {
+    return undefined
+  }
+}
+
+function nativeSessionState(row) {
+  for (const state of SESSION_STATES) {
+    if (row.querySelector(`[data-state="${state}"]:not([data-prts-owned-session-status])`)) return state
+  }
+  return undefined
+}
+
+function resolveSectionHeader(root) {
+  const tree = root?.querySelector?.('[role="tree"]')
+  if (!tree) return {}
+  for (const candidate of root.querySelectorAll('div')) {
+    if (candidate.contains(tree)) continue
+    const label = Array.from(candidate.children).find(child => (
+      child.tagName === 'SPAN'
+      && child.textContent.trim()
+      && !child.querySelector('button, input')
+    ))
+    if (!label || candidate.querySelectorAll('button').length < 1) continue
+    return { header: candidate, label }
+  }
+  return {}
+}
+
+function visibleSessionSummaries(sessions, workspaces) {
+  const list = snapshotOf(sessions?.list)
+  if (!list?.byId) return []
+  const workspaceList = snapshotOf(workspaces?.list)
+  const archived = new Set(workspaceList?.archivedSessionIds ?? [])
+  const ids = Array.isArray(list.ids) ? list.ids : Object.keys(list.byId)
+  return ids.flatMap(id => {
+    const summary = list.byId[id]
+    if (!summary || summary.blank || summary.origin === 'subagent' || archived.has(id)) return []
+    if (summary.running) return [{ id, title: summary.displayTitle || id, state: 'ongoing' }]
+    if (summary.completed === true) return [{ id, title: summary.displayTitle || id, state: 'done' }]
+    return []
+  })
+}
+
 function markSidebarNode(node, attribute, next) {
   if (!node) return
   node.setAttribute(attribute, '')
@@ -119,18 +170,134 @@ function ensureFacilitySpine(document, row, kind, next) {
 }
 
 
-export function createSidebarControlAdapter({ document, window }) {
+export function createSidebarControlAdapter({ document, window, sessions, workspaces }) {
   let observer
   let resizeObserver
   let resizeFrame
   let resizeTimer
   let scanFrame
+  let stopSessionList = () => {}
+  let stopWorkspaceList = () => {}
+  let statusSourcesStarted = false
+  let summaryRoot
+  let summarySignature = ''
   let owned = new Set()
   let vectorOwners = new Set()
   const dirtyVectors = new Map()
   const vectorSizes = new WeakMap()
   const lifelineAnimator = createSessionLifelineAnimator({ document, window })
 
+  function openSession(sessionId) {
+    try {
+      if (typeof sessions?.open === 'function') {
+        sessions.open(sessionId)
+        return
+      }
+    } catch {}
+    const row = Array.from(document.querySelectorAll('[data-prts-session-row]')).find(candidate => (
+      candidate.querySelector('[data-prts-row-title]')?.textContent.trim() === sessionId
+    ))
+    row?.click?.()
+  }
+
+  function statusSignal(document, state) {
+    const signal = document.createElement('span')
+    signal.setAttribute('data-prts-session-summary-signal', state)
+    signal.setAttribute('aria-hidden', 'true')
+    return signal
+  }
+
+  function buildSummaryGroup(state, label, items) {
+    const group = document.createElement('span')
+    group.setAttribute('data-prts-session-summary-group', state)
+
+    const trigger = document.createElement('button')
+    trigger.type = 'button'
+    trigger.setAttribute('data-prts-session-summary-trigger', state)
+    trigger.setAttribute('aria-haspopup', 'menu')
+    trigger.setAttribute('aria-label', `${label} ${items.length}`)
+    trigger.append(statusSignal(document, state))
+    const count = document.createElement('span')
+    count.setAttribute('data-prts-session-summary-count', '')
+    count.textContent = String(items.length)
+    trigger.append(count)
+
+    const popover = document.createElement('span')
+    popover.setAttribute('data-prts-session-summary-popover', state)
+    popover.setAttribute('role', 'menu')
+    popover.setAttribute('aria-label', label)
+    const heading = document.createElement('span')
+    heading.setAttribute('data-prts-session-summary-heading', '')
+    const headingLabel = document.createElement('strong')
+    headingLabel.textContent = label
+    const hint = document.createElement('small')
+    hint.textContent = '选择会话'
+    heading.append(headingLabel, hint)
+    popover.append(heading)
+    for (const item of items) {
+      const button = document.createElement('button')
+      button.type = 'button'
+      button.setAttribute('role', 'menuitem')
+      button.setAttribute('data-prts-session-summary-item', item.id)
+      button.append(statusSignal(document, state))
+      const title = document.createElement('span')
+      title.textContent = item.title
+      button.append(title)
+      button.addEventListener('click', event => {
+        event.stopPropagation()
+        openSession(item.id)
+      })
+      popover.append(button)
+    }
+    group.append(trigger, popover)
+    return group
+  }
+
+  function syncSummary(root, next) {
+    const { header, label } = resolveSectionHeader(root)
+    if (!header || !label) {
+      summaryRoot?.remove()
+      summaryRoot = undefined
+      summarySignature = ''
+      return
+    }
+    header.setAttribute('data-prts-session-summary-header', '')
+    label.setAttribute('data-prts-session-summary-label', '')
+    next.add(header)
+    next.add(label)
+    const fromService = visibleSessionSummaries(sessions, workspaces)
+    const rows = fromService.length ? fromService : Array.from(root.querySelectorAll('[data-prts-session-row]')).flatMap(row => {
+      const state = row.getAttribute('data-prts-session-state')
+      if (state !== 'ongoing' && state !== 'done') return []
+      const title = row.querySelector('[data-prts-row-title]')?.textContent.trim()
+      return title ? [{ id: title, title, state }] : []
+    })
+    const ongoing = rows.filter(item => item.state === 'ongoing')
+    const done = rows.filter(item => item.state === 'done')
+    const signature = JSON.stringify({
+      ongoing: ongoing.map(item => [item.id, item.title]),
+      done: done.map(item => [item.id, item.title]),
+    })
+    if (!summaryRoot) {
+      summaryRoot = document.createElement('span')
+      summaryRoot.setAttribute('data-prts-owned-session-summary', '')
+      summaryRoot.setAttribute('data-prts-session-summary', '')
+      summaryRoot.setAttribute('role', 'group')
+      summaryRoot.setAttribute('aria-label', '会话状态总览')
+      label.insertAdjacentElement('afterend', summaryRoot)
+    } else if (summaryRoot.parentElement !== header) {
+      label.insertAdjacentElement('afterend', summaryRoot)
+    }
+    const labelHidden = Array.from(label.classList).some(name => /hidden/i.test(name))
+    summaryRoot.toggleAttribute('data-prts-summary-search-hidden', labelHidden)
+    summaryRoot.hidden = ongoing.length === 0 && done.length === 0
+    if (signature === summarySignature) return
+    summarySignature = signature
+    summaryRoot.replaceChildren()
+    if (ongoing.length) summaryRoot.append(buildSummaryGroup('ongoing', '运行中的会话', ongoing))
+    if (done.length) summaryRoot.append(buildSummaryGroup('done', '完成未查看', done))
+  }
+
   function scheduleVectors() {
     if (resizeFrame !== undefined) return
     const requestFrame = window?.requestAnimationFrame?.bind(window) ?? (callback => window?.setTimeout?.(callback, 0))
@@ -161,12 +328,17 @@ export function createSidebarControlAdapter({ document, window }) {
 
   function registerVector(owner, options, next, nextVectorOwners) {
     if (!owner) return
+    const previousSessionNotch = owner.querySelector?.(':scope > svg[data-prts-facility-svg]')
+      ?.hasAttribute('data-prts-session-notch') ?? false
     const graphic = ensureFacilityGraphic(document, owner, options)
     if (!graphic) return
     next.add(graphic)
     nextVectorOwners.add(owner)
     if (!vectorOwners.has(owner)) resizeObserver?.observe(owner)
-    if (!vectorSizes.has(owner)) dirtyVectors.set(owner, undefined)
+    if (previousSessionNotch !== Boolean(options.sessionNotch)) vectorSizes.delete(owner)
+    if (!vectorSizes.has(owner)) {
+      dirtyVectors.set(owner, undefined)
+    }
   }
 
   function syncVectorOwners(next) {
@@ -222,15 +394,22 @@ export function createSidebarControlAdapter({ document, window }) {
       for (const row of root.querySelectorAll('div[role="treeitem"][aria-selected]')) {
         const sessionIndex = String(++sessionOrdinal).padStart(2, '0')
         const controls = resolveRowControls(row, 'session')
+        const state = nativeSessionState(row)
         const face = ensureFacilityFace(document, row, 'session', next)
         const spine = ensureFacilitySpine(document, row, 'session', next)
-        registerVector(face, { kind: 'face', topNotch: true, texture: 'pickup' }, next, nextVectorOwners)
+        registerVector(face, { kind: 'face', topNotch: true, sessionNotch: 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)
+        if (state) {
+          row.setAttribute('data-prts-session-state', state)
+          next.add(row)
+        } else {
+          row.removeAttribute('data-prts-session-state')
+        }
         row.dataset.prtsSessionIndex = sessionIndex
         const title = resolveRowTitle(row, 'session', controls.actions)
         markSidebarNode(title, 'data-prts-row-title', next)
@@ -243,6 +422,11 @@ export function createSidebarControlAdapter({ document, window }) {
         markSidebarNode(controls.menu, 'data-prts-session-menu', next)
         registerVector(controls.menu, { kind: 'button' }, next, nextVectorOwners)
       }
+      syncSummary(root, next)
+    } else {
+      summaryRoot?.remove()
+      summaryRoot = undefined
+      summarySignature = ''
     }
     lifelineAnimator.setTarget(activeLifelineRow, activeLifeline)
     for (const node of owned) {
@@ -272,6 +456,9 @@ export function createSidebarControlAdapter({ document, window }) {
     vectorOwners.clear()
     dirtyVectors.clear()
     owned.clear()
+    summaryRoot?.remove()
+    summaryRoot = undefined
+    summarySignature = ''
   }
 
   return {
@@ -294,6 +481,11 @@ export function createSidebarControlAdapter({ document, window }) {
         })
       }
       scan()
+      if (!statusSourcesStarted) {
+        statusSourcesStarted = true
+        stopSessionList = sessions?.list?.subscribe?.(queueScan) ?? (() => {})
+        stopWorkspaceList = workspaces?.list?.subscribe?.(queueScan) ?? (() => {})
+      }
       if (observer || !window?.MutationObserver) return
       const observationRoot = document.querySelector('[data-prts-region="sessions"]')
       if (!observationRoot) return
@@ -302,12 +494,17 @@ export function createSidebarControlAdapter({ document, window }) {
         subtree: true,
         childList: true,
         attributes: true,
-        attributeFilter: ['aria-expanded', 'aria-selected', 'class'],
+        attributeFilter: ['aria-expanded', 'aria-selected', 'class', 'data-state'],
       })
     },
     dispose() {
       observer?.disconnect()
       observer = undefined
+      stopSessionList()
+      stopSessionList = () => {}
+      stopWorkspaceList()
+      stopWorkspaceList = () => {}
+      statusSourcesStarted = false
       if (scanFrame !== undefined) {
         if (window?.cancelAnimationFrame) window.cancelAnimationFrame(scanFrame)
         else window?.clearTimeout?.(scanFrame)

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

@@ -8,8 +8,16 @@ const ROOT_ATTRIBUTES = [
   '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'
@@ -102,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()
   }
 
@@ -718,6 +727,10 @@ export function createThemeController({ document, window, cssText, service, onTr
       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()
     },

package/src/client/theme-controller.js

@@ -8,8 +8,16 @@ const ROOT_ATTRIBUTES = [
   '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',
+}
 
 function themeIdentity(value) {
   if (typeof value === 'string') return value
@@ -37,6 +45,7 @@ export function createThemeController({ document, window, cssText, service }) {
 
   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)
   }
 
   function removeOwnedState() {
@@ -111,6 +120,10 @@ export function createThemeController({ document, window, cssText, service }) {
       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()
     },