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

package/package.json

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

package/src/client/facility-geometry.js

@@ -7,6 +7,9 @@ export const FACILITY_GEOMETRY = Object.freeze({
   topOpening: 50,
   topInner: 40,
   topDepth: 10 / 3,
+  sessionTopOpening: 50,
+  sessionTopInner: 36.5,
+  sessionTopDepth: 4.5,
 })
 
 function number(value) {
@@ -17,7 +20,7 @@ function point(x, y) {
   return `${number(x)} ${number(y)}`
 }
 
-export function createFacilityPath({ width, height, topNotch = false } = {}) {
+export function createFacilityPath({ width, height, topNotch = false, sessionNotch = false } = {}) {
   if (!Number.isFinite(width) || !Number.isFinite(height) || width <= 2 || height <= FACILITY_GEOMETRY.sideOpening + 2) return ''
 
   const halfStroke = FACILITY_GEOMETRY.stroke / 2
@@ -29,12 +32,15 @@ export function createFacilityPath({ width, height, topNotch = false } = {}) {
   const centerY = height / 2
   const points = [point(left + FACILITY_GEOMETRY.corner, top)]
 
-  if (topNotch && width >= FACILITY_GEOMETRY.topOpening + FACILITY_GEOMETRY.corner * 2 + FACILITY_GEOMETRY.stroke) {
+  const topOpening = sessionNotch ? FACILITY_GEOMETRY.sessionTopOpening : FACILITY_GEOMETRY.topOpening
+  const topInner = sessionNotch ? FACILITY_GEOMETRY.sessionTopInner : FACILITY_GEOMETRY.topInner
+  const topDepth = sessionNotch ? FACILITY_GEOMETRY.sessionTopDepth : FACILITY_GEOMETRY.topDepth
+  if (topNotch && width >= topOpening + FACILITY_GEOMETRY.corner * 2 + FACILITY_GEOMETRY.stroke) {
     points.push(
-      point(centerX - FACILITY_GEOMETRY.topOpening / 2, top),
-      point(centerX - FACILITY_GEOMETRY.topInner / 2, top + FACILITY_GEOMETRY.topDepth),
-      point(centerX + FACILITY_GEOMETRY.topInner / 2, top + FACILITY_GEOMETRY.topDepth),
-      point(centerX + FACILITY_GEOMETRY.topOpening / 2, top),
+      point(centerX - topOpening / 2, top),
+      point(centerX - topInner / 2, top + topDepth),
+      point(centerX + topInner / 2, top + topDepth),
+      point(centerX + topOpening / 2, top),
     )
   }
 

package/src/client/facility-vector.js

@@ -1,4 +1,4 @@
-import { createFacilityPath } from './facility-geometry.js'
+import { createFacilityPath, FACILITY_GEOMETRY } from './facility-geometry.js'
 import { configureSessionLifeline } from './session-lifeline.js'
 
 const SVG_NS = 'http://www.w3.org/2000/svg'
@@ -167,6 +167,28 @@ function appendSessionPickup(document, graphic) {
   graphic.insertBefore(pickup, graphic.querySelector('[data-prts-facility-layer="outline"]'))
 }
 
+function appendSessionStatusUnderlay(document, graphic) {
+  const surface = graphic.querySelector('[data-prts-facility-layer="surface"]')
+  if (!surface) return
+  if (!graphic.querySelector('[data-prts-session-status-underlay]')) {
+    graphic.insertBefore(svgNode(document, 'path', {
+      'data-prts-session-status-underlay': '',
+      'aria-hidden': 'true',
+      transform: 'translate(3 2)',
+      'shape-rendering': 'geometricPrecision',
+    }), surface)
+  }
+  if (!graphic.querySelector('[data-prts-session-idle-indicator]')) {
+    graphic.insertBefore(svgNode(document, 'rect', {
+      'data-prts-session-idle-indicator': '',
+      'aria-hidden': 'true',
+      y: '2.5',
+      width: '50',
+      height: '2.5',
+    }), surface)
+  }
+}
+
 function clamp(value, min, max) {
   return Math.min(max, Math.max(min, value))
 }
@@ -179,7 +201,7 @@ function sessionLifelineGeometry(width, height) {
   return { start, end, baseline, lift }
 }
 
-export function ensureFacilityGraphic(document, owner, { kind, topNotch = false, texture = 'none' } = {}) {
+export function ensureFacilityGraphic(document, owner, { kind, topNotch = false, sessionNotch = false, texture = 'none' } = {}) {
   if (!owner) return null
   let graphic = owner.querySelector?.(':scope > svg[data-prts-facility-svg]')
   if (!graphic) {
@@ -205,9 +227,13 @@ export function ensureFacilityGraphic(document, owner, { kind, topNotch = false,
     owner.insertBefore(graphic, owner.firstChild)
   }
   if (texture === 'silhouette' && !graphic.querySelector('[data-prts-facility-silhouette]')) appendSilhouetteScene(document, graphic)
-  if (texture === 'pickup' && !graphic.querySelector('[data-prts-session-pickup]')) appendSessionPickup(document, graphic)
+  if (texture === 'pickup') {
+    appendSessionStatusUnderlay(document, graphic)
+    if (!graphic.querySelector('[data-prts-session-pickup]')) appendSessionPickup(document, graphic)
+  }
   graphic.setAttribute('data-prts-facility-svg', kind)
   graphic.toggleAttribute('data-prts-top-notch', Boolean(topNotch))
+  graphic.toggleAttribute('data-prts-session-notch', Boolean(sessionNotch))
   if (!owner.hasAttribute('data-prts-facility-texture')) owner.setAttribute('data-prts-facility-texture', texture)
   return graphic
 }
@@ -222,19 +248,24 @@ function setReady(owner, ready) {
 export function renderFacilityGraphic(owner, { width, height } = {}) {
   const graphic = owner?.querySelector?.(':scope > svg[data-prts-facility-svg]')
   const topNotch = graphic?.hasAttribute('data-prts-top-notch')
-  const path = createFacilityPath({ width, height, topNotch })
+  const sessionNotch = graphic?.hasAttribute('data-prts-session-notch')
+  const path = createFacilityPath({ width, height, topNotch, sessionNotch })
   if (!graphic || !path) {
     owner?.removeAttribute?.('data-prts-facility-size')
     setReady(owner, false)
     return false
   }
 
-  const size = `${Number(width.toFixed(3))}x${Number(height.toFixed(3))}`
+  const size = `${Number(width.toFixed(3))}x${Number(height.toFixed(3))}:${topNotch ? 't' : '-'}${sessionNotch ? 's' : '-'}`
   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)
+    const statusUnderlay = graphic.querySelector('[data-prts-session-status-underlay]')
+    statusUnderlay?.setAttribute('d', createFacilityPath({ width, height }))
+    const idleIndicator = graphic.querySelector('[data-prts-session-idle-indicator]')
+    idleIndicator?.setAttribute('x', String(Number((width / 2 - 25).toFixed(3))))
     const silhouette = graphic.querySelector('[data-prts-facility-silhouette]')
     if (silhouette) {
       const availableHeight = Math.max(1, height - 2)

package/src/client/index.js

@@ -86,7 +86,12 @@ export function applyPrtsPlugin(ctx, environment) {
   const toBottom = createToBottomAdapter({ document, window })
   const conversationControls = createConversationControlAdapter({ document, window })
   const layoutDiagnostics = createLayoutStabilityDiagnostics({ document, window })
-  const sidebarControls = createSidebarControlAdapter({ document, window })
+  const sidebarControls = createSidebarControlAdapter({
+    document,
+    window,
+    sessions: contextService(ctx, 'sessions'),
+    workspaces: contextService(ctx, 'workspaces'),
+  })
   const floatingGlass = createFloatingGlassAdapter({ document, window })
   const adapter = createRc7Adapter({ document })
   const hostGeometry = createHostGeometryAdapter({ document, window })

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/styles/facility-vector.css

@@ -17,6 +17,241 @@ html[data-dsh-prts] [data-prts-facility-svg] {
   pointer-events: none;
 }
 
+/* A pure status-colored card underlay sits behind the stable face. Its small
+   right-down offset is visible through the top notch and along two outer edges. */
+html[data-dsh-prts] [data-prts-session-status-underlay] {
+  fill: var(--prts-session-status-color, transparent);
+  opacity: 0;
+}
+
+html[data-dsh-prts] [data-prts-session-state="ongoing"] {
+  --prts-session-status-color: var(--dsw-static-deepseek-450, var(--prts-cyan));
+}
+
+html[data-dsh-prts] [data-prts-session-state="done"] {
+  --prts-session-status-color: var(--dsw-alias-state-success-primary, var(--prts-green));
+}
+
+html[data-dsh-prts] [data-prts-session-state="warning"] {
+  --prts-session-status-color: var(--dsw-alias-state-warn-primary, var(--prts-yellow));
+}
+
+html[data-dsh-prts] [data-prts-session-state="error"] {
+  --prts-session-status-color: var(--dsw-alias-state-error-primary, var(--prts-red));
+}
+
+html[data-dsh-prts] [data-prts-session-state] [data-prts-session-status-underlay] {
+  opacity: 1;
+}
+
+html[data-dsh-prts] [data-prts-session-idle-indicator] {
+  fill: var(--prts-dim);
+}
+
+html[data-dsh-prts] [data-prts-session-state] [data-prts-session-idle-indicator] {
+  opacity: 0;
+}
+
+/* Workspace status summary. */
+html[data-dsh-prts] [data-prts-session-summary-header] {
+  position: relative;
+  z-index: 18;
+  overflow: visible !important;
+}
+
+html[data-dsh-prts] [data-prts-session-summary-label] {
+  margin-right: 2px;
+}
+
+html[data-dsh-prts] [data-prts-session-summary] {
+  position: static;
+  z-index: 19;
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  gap: 3px;
+  color: var(--prts-muted);
+  font-family: var(--prts-mono);
+}
+
+html[data-dsh-prts] [data-prts-session-summary][data-prts-summary-search-hidden] {
+  display: none;
+}
+
+html[data-dsh-prts] [data-prts-session-summary-group] {
+  position: static;
+  display: inline-flex;
+}
+
+html[data-dsh-prts] [data-prts-session-summary-trigger] {
+  min-width: 30px;
+  height: 22px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  padding: 0 6px;
+  border: 1px solid color-mix(in srgb, currentColor 38%, transparent);
+  border-radius: 0;
+  background: color-mix(in srgb, currentColor 7%, transparent);
+  color: inherit;
+  font: 700 9px/1 var(--prts-mono);
+  cursor: pointer;
+}
+
+html[data-dsh-prts] [data-prts-session-summary-group="ongoing"] {
+  --prts-summary-state-color: var(--dsw-static-deepseek-450, var(--prts-cyan));
+  color: var(--prts-summary-state-color);
+}
+
+html[data-dsh-prts] [data-prts-session-summary-group="done"] {
+  --prts-summary-state-color: var(--dsw-alias-state-success-primary, var(--prts-green));
+  color: var(--prts-summary-state-color);
+}
+
+html[data-dsh-prts] [data-prts-session-summary-trigger]:is(:hover, :focus-visible) {
+  background: color-mix(in srgb, currentColor 14%, var(--prts-panel));
+}
+
+html[data-dsh-prts] [data-prts-session-summary-signal] {
+  position: relative;
+  width: 9px;
+  height: 9px;
+  display: inline-block;
+  flex: 0 0 9px;
+  color: inherit;
+}
+
+html[data-dsh-prts] [data-prts-session-summary-signal="ongoing"]::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 2px;
+  height: 2px;
+  background: currentColor;
+  box-shadow:
+    3.5px 0 currentColor,
+    7px 0 currentColor,
+    7px 3.5px currentColor,
+    7px 7px currentColor,
+    3.5px 7px currentColor,
+    0 7px currentColor,
+    0 3.5px currentColor;
+}
+
+html[data-dsh-prts] [data-prts-session-summary-signal="done"]::before {
+  content: "";
+  position: absolute;
+  inset: 1px;
+  background: currentColor;
+  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
+}
+
+html[data-dsh-prts] [data-prts-session-summary-popover] {
+  position: absolute;
+  z-index: 40;
+  top: calc(100% + 6px);
+  right: 0;
+  left: 0;
+  width: auto;
+  display: block;
+  padding: 8px;
+  border: 1px solid color-mix(in srgb, currentColor 44%, var(--prts-line));
+  background: var(--prts-glass-dense, var(--prts-panel));
+  box-shadow: var(--prts-shadow-glass-overlay);
+  color: var(--prts-ink);
+  opacity: 0;
+  visibility: hidden;
+  transform: translate3d(0, -4px, 0);
+  transition: opacity 120ms ease, transform 160ms var(--prts-ease-snap), visibility 0s linear 160ms;
+  pointer-events: none;
+}
+
+html[data-dsh-prts] [data-prts-session-summary-popover]::before {
+  content: "";
+  position: absolute;
+  right: 0;
+  bottom: 100%;
+  left: 0;
+  /* Cover the space from the vertically centered trigger to the popover. */
+  height: 16px;
+}
+
+html[data-dsh-prts] [data-prts-session-summary-group]:is(:hover, :has(:focus-visible)) [data-prts-session-summary-popover] {
+  opacity: 1;
+  visibility: visible;
+  transform: translate3d(0, 0, 0);
+  transition-delay: 0s;
+  pointer-events: auto;
+}
+
+@media (hover: none) {
+  html[data-dsh-prts] [data-prts-session-summary-group]:focus-within [data-prts-session-summary-popover] {
+    opacity: 1;
+    visibility: visible;
+    transform: translate3d(0, 0, 0);
+    transition-delay: 0s;
+    pointer-events: auto;
+  }
+}
+
+html[data-dsh-prts] [data-prts-session-summary-heading] {
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 0 6px 6px;
+  color: currentColor;
+  font: 700 10px/1 var(--prts-mono);
+}
+
+html[data-dsh-prts] [data-prts-session-summary-heading] small {
+  color: var(--prts-dim);
+  font-size: 9px;
+  font-weight: 500;
+}
+
+html[data-dsh-prts] [data-prts-session-summary-item] {
+  width: 100%;
+  height: 34px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0 7px;
+  border: 0;
+  border-top: 1px solid var(--prts-line);
+  border-radius: 0;
+  background: transparent;
+  color: var(--prts-ink);
+  cursor: pointer;
+}
+
+html[data-dsh-prts] [data-prts-session-summary-item] [data-prts-session-summary-signal] {
+  color: var(--prts-summary-state-color);
+}
+
+html[data-dsh-prts] [data-prts-session-summary-item] > span:not([data-prts-session-summary-signal]) {
+  min-width: 0;
+  overflow: hidden;
+  font-size: 11px;
+  text-align: left;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+html[data-dsh-prts] [data-prts-session-summary-item]:is(:hover, :focus-visible) {
+  background: color-mix(in srgb, currentColor 9%, transparent);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html[data-dsh-prts] [data-prts-session-summary-popover] {
+    animation: none;
+    transition-duration: 0s;
+  }
+}
+
 html[data-dsh-prts] [data-prts-facility-layer="surface"] {
   fill: var(--prts-facility-surface, var(--prts-panel-raised));
 }