dsh-session-hover-preview 0.1.0

package/README.md

@@ -0,0 +1,30 @@
+# dsh-session-hover-preview
+
+本地 DeepSeek Harness Web 插件，为右侧当前会话历史增加 Codex 风格的消息导航条。
+
+## 功能
+
+- 在右侧会话历史区域的左侧边缘、页面垂直居中位置显示消息导航条；定位和交互均不依赖左侧 Session 列表。
+- 每条横线对应一条真实用户消息，默认等长；Host 会分页读取完整 Session 历史。
+- Hover 或键盘聚焦某条横线时，该条最长，并按距离向上下两侧逐渐缩短。
+- 点击横线会滚动到对应用户消息；尚未渲染的旧消息会先通过“加载更早”补齐。
+- 切换右侧当前会话或历史更新时会取消旧请求并刷新横线。
+- Markdown 只用于生成安全纯文本标签；触屏和窄屏自动禁用。
+- 只读调用官方 `ApiProxy.sessions.history`，不会恢复或发布 Agent。
+
+## 本地安装
+
+```bash
+cd ~/.dsh
+dsh plugin --profile web add /Users/g/gits/for-nothing/dsh-session-hover-preview
+```
+
+安装后刷新现有的 `http://127.0.0.1:3080`。如果 `dsh web` 已经运行，Host 端新增路由通常需要重启该进程；单独重写 `lib/client.js` 时，只有配套构建 watcher 正在运行才会触发 client HMR。
+
+## 本地检查
+
+```bash
+node --test test/index.test.js
+node --check lib/index.js
+node --check lib/client.js
+```

package/cordis.patch.yml

@@ -0,0 +1,4 @@
+# Local DeepSeek Harness bundle: mount the host/client plugin as a Web roster row.
+- insert:
+    - id: session-hover-preview
+      name: 'dsh-session-hover-preview'

package/lib/client.js

@@ -0,0 +1,268 @@
+window.__ModuleLoader__.load({
+  id: 'dsh-session-hover-preview',
+  factory: (require) => {
+    const module = { exports: {} }
+    const exports = module.exports
+
+    const inject = ['sessions']
+    const REFRESH_DELAY = 220
+    const DEFAULT_LINE_WIDTH = 10
+    const MAX_LINE_WIDTH = 30
+    const MIN_LINE_WIDTH = 8
+    const WIDTH_STEP = 4
+    const MAX_LOAD_OLDER_PAGES = 100
+
+    const css = `
+[data-dsh-session-history-rail]{position:fixed;z-index:110;display:flex;box-sizing:border-box;width:46px;max-height:min(60vh,480px);padding:8px 4px;flex-direction:column;align-items:flex-start;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;opacity:.62;transition:opacity .16s ease,transform .16s ease;transform:translateX(0)}
+[data-dsh-session-history-rail]::-webkit-scrollbar{display:none}
+[data-dsh-session-history-rail]:hover,[data-dsh-session-history-rail]:focus-within{opacity:.9}
+[data-dsh-session-history-rail][data-hidden]{pointer-events:none;opacity:0;transform:translateX(-4px)}
+[data-dsh-session-history-line]{position:relative;display:block;box-sizing:border-box;width:38px;height:9px;min-height:9px;padding:0;flex:0 0 9px;cursor:pointer;background:transparent;border:0}
+[data-dsh-session-history-line]::before{position:absolute;top:3px;left:0;width:var(--dsh-history-line-width,10px);height:2px;content:"";background:var(--dsw-alias-label-tertiary,#8d9199);border-radius:1px;transition:width .13s ease,background .13s ease}
+[data-dsh-session-history-line]:hover,[data-dsh-session-history-line]:focus-visible{outline:none}
+[data-dsh-session-history-line]:hover::before,[data-dsh-session-history-line]:focus-visible::before{background:var(--dsw-alias-label-primary,#222)}
+@media (prefers-reduced-motion:reduce){[data-dsh-session-history-rail],[data-dsh-session-history-line]::before{transition:none}}
+@media (max-width:760px),(hover:none){[data-dsh-session-history-rail]{display:none!important}}
+`
+
+    function currentSession(ctx) {
+      const state = ctx.sessions.list.getSnapshot()
+      const summary = state.current ? state.byId[state.current] : undefined
+      return summary && !summary.blank ? summary : undefined
+    }
+
+    function conversationViewport() {
+      let element = document.querySelector('[data-slot="conversation.view"]')?.parentElement
+      while (element) {
+        const rect = element.getBoundingClientRect()
+        if (['auto', 'scroll'].includes(getComputedStyle(element).overflowY) && rect.width > 0 && rect.height > 0) return element
+        element = element.parentElement
+      }
+      return undefined
+    }
+
+    async function loadMessages(sessionId, signal) {
+      const response = await fetch('/session-hover-preview', {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ sessionId }),
+        signal,
+      })
+      const body = await response.json()
+      if (!response.ok || !body.ok) throw new Error(body.error || 'history unavailable')
+      return Array.isArray(body.messages)
+        ? body.messages.filter(message => message && typeof message.id === 'string' && typeof message.text === 'string')
+        : []
+    }
+
+    function apply(ctx) {
+      ctx.effect(() => {
+        const style = document.createElement('style')
+        style.dataset.plugin = 'dsh-session-hover-preview'
+        style.textContent = css
+        document.head.appendChild(style)
+
+        const rail = document.createElement('nav')
+        rail.setAttribute('data-dsh-session-history-rail', '')
+        rail.setAttribute('aria-label', '当前会话消息导航')
+        rail.setAttribute('data-hidden', '')
+        document.body.appendChild(rail)
+
+        let request
+        let refreshTimer
+        let refreshToken = 0
+        let currentSessionId = currentSession(ctx)?.id
+        let observedViewport
+
+        const resetLines = () => {
+          for (const line of rail.children) line.style.setProperty('--dsh-history-line-width', `${DEFAULT_LINE_WIDTH}px`)
+        }
+
+        const focusLines = activeIndex => {
+          for (const [index, line] of [...rail.children].entries()) {
+            const width = Math.max(MIN_LINE_WIDTH, MAX_LINE_WIDTH - Math.abs(index - activeIndex) * WIDTH_STEP)
+            line.style.setProperty('--dsh-history-line-width', `${width}px`)
+          }
+        }
+
+        const placeRail = () => {
+          const summary = currentSession(ctx)
+          const viewport = conversationViewport()
+          const rect = viewport?.getBoundingClientRect()
+          if (!summary || rail.childElementCount === 0 || !rect || rect.width === 0 || rect.height === 0) {
+            rail.setAttribute('data-hidden', '')
+            return
+          }
+          const height = rail.offsetHeight
+          const left = Math.max(12, Math.min(rect.left + 12, window.innerWidth - rail.offsetWidth - 12))
+          const center = window.innerHeight / 2
+          const top = Math.max(rect.top + 12, Math.min(center - height / 2, rect.bottom - height - 12))
+          rail.style.left = `${left}px`
+          rail.style.top = `${top}px`
+          rail.removeAttribute('data-hidden')
+        }
+
+        const findMessageElement = messageId => [...document.querySelectorAll('[data-chat-flow-kind="user"][data-chat-anchor-key]')]
+          .find(element => element.getAttribute('data-chat-anchor-key')?.endsWith(`input-message${messageId}`))
+
+        const olderPageControl = () => {
+          const column = document.querySelector('[data-slot="conversation.view"] [data-chat-flow]')
+          const first = column?.firstElementChild
+          if (!column || !first || first.hasAttribute('data-chat-flow-kind')) return undefined
+          const button = [...first.children].find(child => child instanceof HTMLButtonElement)
+          return button ? { button, column } : undefined
+        }
+
+        const waitForOlderPage = (column, previousCount, messageId) => new Promise(resolve => {
+          let finished = false
+          const done = progressed => {
+            if (finished) return
+            finished = true
+            observer.disconnect()
+            clearTimeout(timeout)
+            resolve(progressed)
+          }
+          const observer = new MutationObserver(() => {
+            const count = column.querySelectorAll('[data-chat-flow-kind="user"]').length
+            if (findMessageElement(messageId) || count > previousCount || !olderPageControl()) done(true)
+          })
+          const timeout = setTimeout(() => done(false), 10000)
+          observer.observe(column, { childList: true, subtree: true })
+        })
+
+        const waitForStableLayout = async element => {
+          let previousTop
+          let stableFrames = 0
+          for (let frame = 0; frame < 30 && stableFrames < 2; frame += 1) {
+            await new Promise(resolve => requestAnimationFrame(resolve))
+            const top = element.getBoundingClientRect().top
+            stableFrames = previousTop !== undefined && Math.abs(top - previousTop) < .5 ? stableFrames + 1 : 0
+            previousTop = top
+          }
+        }
+
+        const scrollToMessage = async messageId => {
+          const sessionId = currentSession(ctx)?.id
+          if (!sessionId) return
+          let loadedOlder = false
+          for (let page = 0; page < MAX_LOAD_OLDER_PAGES; page += 1) {
+            const target = findMessageElement(messageId)
+            if (target) {
+              if (loadedOlder) await waitForStableLayout(target)
+              target.scrollIntoView({
+                behavior: matchMedia('(prefers-reduced-motion: reduce)').matches ? 'auto' : 'smooth',
+                block: 'center',
+              })
+              return
+            }
+            if (currentSession(ctx)?.id !== sessionId) return
+            const control = olderPageControl()
+            if (!control) return
+            const previousCount = control.column.querySelectorAll('[data-chat-flow-kind="user"]').length
+            const loaded = waitForOlderPage(control.column, previousCount, messageId)
+            control.button.click()
+            if (!await loaded) return
+            loadedOlder = true
+          }
+        }
+
+        const renderMessages = messages => {
+          rail.replaceChildren()
+          for (const [index, message] of messages.entries()) {
+            const line = document.createElement('button')
+            line.type = 'button'
+            line.setAttribute('data-dsh-session-history-line', '')
+            line.setAttribute('data-message-id', message.id)
+            line.setAttribute('aria-label', `跳转到第 ${index + 1} 条用户消息：${message.text}`)
+            line.style.setProperty('--dsh-history-line-width', `${DEFAULT_LINE_WIDTH}px`)
+            line.addEventListener('pointerenter', () => focusLines(index))
+            line.addEventListener('focus', () => focusLines(index))
+            line.addEventListener('click', event => {
+              event.stopPropagation()
+              void scrollToMessage(message.id)
+            })
+            rail.appendChild(line)
+          }
+          placeRail()
+        }
+
+        const refresh = async () => {
+          refreshTimer = undefined
+          const summary = currentSession(ctx)
+          if (!summary || !conversationViewport()) {
+            request?.abort()
+            rail.replaceChildren()
+            rail.setAttribute('data-hidden', '')
+            return
+          }
+          request?.abort()
+          request = new AbortController()
+          const ownToken = ++refreshToken
+          try {
+            const messages = await loadMessages(summary.id, request.signal)
+            if (ownToken !== refreshToken || currentSession(ctx)?.id !== summary.id) return
+            renderMessages(messages)
+          } catch (error) {
+            if (error?.name === 'AbortError' || ownToken !== refreshToken) return
+            rail.replaceChildren()
+            rail.setAttribute('data-hidden', '')
+          }
+        }
+
+        const scheduleRefresh = (delay = REFRESH_DELAY) => {
+          clearTimeout(refreshTimer)
+          refreshTimer = setTimeout(() => { void refresh() }, delay)
+        }
+
+        const resizeObserver = new ResizeObserver(placeRail)
+        const observeViewport = () => {
+          const viewport = conversationViewport()
+          if (viewport === observedViewport) return
+          resizeObserver.disconnect()
+          observedViewport = viewport
+          if (viewport) {
+            resizeObserver.observe(viewport)
+            if (rail.childElementCount === 0) scheduleRefresh(0)
+          }
+          placeRail()
+        }
+
+        rail.addEventListener('pointerleave', resetLines)
+        rail.addEventListener('focusout', event => {
+          if (!(event.relatedTarget instanceof Node) || !rail.contains(event.relatedTarget)) resetLines()
+        })
+        window.addEventListener('resize', placeRail)
+        const mutationObserver = new MutationObserver(observeViewport)
+        mutationObserver.observe(document.body, { childList: true, subtree: true })
+        const unsubscribe = ctx.sessions.list.subscribe(() => {
+          const nextSessionId = currentSession(ctx)?.id
+          if (nextSessionId !== currentSessionId) {
+            currentSessionId = nextSessionId
+            request?.abort()
+            rail.replaceChildren()
+            rail.setAttribute('data-hidden', '')
+            scheduleRefresh(0)
+          } else scheduleRefresh()
+        })
+        observeViewport()
+        scheduleRefresh(0)
+
+        return () => {
+          clearTimeout(refreshTimer)
+          request?.abort()
+          unsubscribe()
+          mutationObserver.disconnect()
+          resizeObserver.disconnect()
+          rail.removeEventListener('pointerleave', resetLines)
+          window.removeEventListener('resize', placeRail)
+          style.remove()
+          rail.remove()
+        }
+      }, 'dsh-session-hover-preview: mount')
+    }
+
+    exports.inject = inject
+    exports.apply = apply
+    return module.exports
+  },
+})

package/lib/index.js

@@ -0,0 +1,182 @@
+/**
+ * Host half for the session hover-preview plugin.
+ *
+ * It exposes one same-origin, read-only endpoint backed by the official
+ * ApiProxy history seam. Reading history does not resume or publish an Agent.
+ */
+export const name = 'dsh-session-hover-preview'
+export const inject = ['webServer', 'apiProxy']
+
+const MAX_BODY_BYTES = 16 * 1024
+const HISTORY_PAGE_MESSAGES = 50
+const PREVIEW_CHARS = 360
+
+function writeJson(res, status, body) {
+  res.writeHead(status, {
+    'content-type': 'application/json; charset=utf-8',
+    'cache-control': 'no-store',
+  })
+  res.end(JSON.stringify(body))
+}
+
+function isLoopback(hostname) {
+  if (hostname === 'localhost' || hostname === '[::1]') return true
+  const parts = hostname.split('.')
+  return parts.length === 4
+    && parts[0] === '127'
+    && parts.every(part => /^\d{1,3}$/.test(part) && Number(part) <= 255)
+}
+
+function trustedRequest(req) {
+  const host = typeof req.headers.host === 'string' ? req.headers.host : undefined
+  if (!host) return false
+  let hostUrl
+  try { hostUrl = new URL(`http://${host}`) } catch { return false }
+  if (!isLoopback(hostUrl.hostname)) return false
+  if (req.headers['sec-fetch-site'] === 'cross-site') return false
+  const origin = typeof req.headers.origin === 'string' ? req.headers.origin : undefined
+  if (!origin) return true
+  try { return new URL(origin).host === hostUrl.host } catch { return false }
+}
+
+async function readBody(req) {
+  const chunks = []
+  let size = 0
+  for await (const chunk of req) {
+    const bytes = typeof chunk === 'string' ? Buffer.from(chunk) : Buffer.from(chunk)
+    size += bytes.length
+    if (size > MAX_BODY_BYTES) throw new Error('request body too large')
+    chunks.push(bytes)
+  }
+  if (chunks.length === 0) return {}
+  return JSON.parse(Buffer.concat(chunks).toString('utf8'))
+}
+
+function normalizedText(value) {
+  return value
+    .replace(/```[\s\S]*?```/g, match => match.replace(/^```[^\n]*\n?|```$/g, ' '))
+    .replace(/`([^`]+)`/g, '$1')
+    .replace(/!\[([^\]]*)\]\([^)]*\)/g, '$1')
+    .replace(/\[([^\]]+)\]\([^)]*\)/g, '$1')
+    .replace(/^\s{0,3}(?:#{1,6}|>|[-*+] |\d+[.)] )\s*/gm, '')
+    .replace(/[*_~]/g, '')
+    .replace(/\s+/g, ' ')
+    .trim()
+}
+
+function textFromBlocks(blocks) {
+  if (!Array.isArray(blocks)) return ''
+  return normalizedText(blocks
+    .filter(block => block && block.type === 'text' && typeof block.text === 'string')
+    .map(block => block.text)
+    .join('\n'))
+}
+
+function clamp(value) {
+  const chars = Array.from(value)
+  return chars.length <= PREVIEW_CHARS ? value : `${chars.slice(0, PREVIEW_CHARS).join('')}…`
+}
+
+function previewFrom(events) {
+  const turns = []
+  let current
+  for (const entry of events) {
+    const event = entry?.event
+    if (!event || typeof event !== 'object') continue
+    if (event.type === 'user/message' && event.data?.source?.kind === 'user') {
+      const text = textFromBlocks(event.data.content)
+      if (!text) continue
+      current = { user: text, assistant: '' }
+      turns.push(current)
+      continue
+    }
+    if (event.type === 'assistant/message' && current) {
+      const text = textFromBlocks(event.data?.message?.content)
+      if (text) current.assistant = text
+    }
+  }
+  const complete = turns.findLast(turn => turn.user && turn.assistant)
+  const latest = turns.at(-1)
+  const selected = complete ?? latest ?? { user: '', assistant: '' }
+  return { user: clamp(selected.user), assistant: clamp(selected.assistant) }
+}
+
+function userMessagesFrom(events) {
+  return events.flatMap(entry => {
+    const event = entry?.event
+    if (event?.type !== 'user/message' || event.data?.source?.kind !== 'user' || typeof event.data.id !== 'string') return []
+    const text = textFromBlocks(event.data.content)
+    return text ? [{ id: event.data.id, text: clamp(text) }] : []
+  })
+}
+
+async function readAllHistory(apiProxy, sessionId) {
+  const pages = []
+  let beforeSeq
+  while (true) {
+    const response = await apiProxy.sessions.history({
+      rpcId: crypto.randomUUID(),
+      payload: {
+        sessionId,
+        maxMessages: HISTORY_PAGE_MESSAGES,
+        ...(beforeSeq === undefined ? {} : { beforeSeq }),
+      },
+    })
+    if (!response.result.ok) return response.result
+    const { events, hasMore } = response.result.value
+    pages.unshift(events)
+    if (!hasMore) return { ok: true, value: pages.flat() }
+    const nextBeforeSeq = events[0]?.event?.seq
+    if (typeof nextBeforeSeq !== 'number' || nextBeforeSeq === beforeSeq) {
+      return {
+        ok: false,
+        error: { code: 'history-pagination-invalid', message: 'history pagination did not advance' },
+      }
+    }
+    beforeSeq = nextBeforeSeq
+  }
+}
+
+export function apply(ctx) {
+  ctx.effect(() => ctx.webServer.register({
+    kind: 'exact',
+    path: '/session-hover-preview',
+    handler: async (req, res) => {
+      if (!trustedRequest(req)) {
+        writeJson(res, 403, { ok: false, error: 'forbidden' })
+        return
+      }
+      if (req.method !== 'POST') {
+        writeJson(res, 405, { ok: false, error: 'method not allowed' })
+        return
+      }
+      try {
+        const payload = await readBody(req)
+        if (typeof payload.sessionId !== 'string' || payload.sessionId.length === 0) {
+          writeJson(res, 400, { ok: false, error: 'sessionId is required' })
+          return
+        }
+        const history = await readAllHistory(ctx.apiProxy, payload.sessionId)
+        if (!history.ok) {
+          writeJson(res, history.error.code === 'session-not-found' ? 404 : 500, {
+            ok: false,
+            error: history.error.message,
+          })
+          return
+        }
+        writeJson(res, 200, {
+          ok: true,
+          preview: previewFrom(history.value),
+          messages: userMessagesFrom(history.value),
+        })
+      } catch (error) {
+        const status = error instanceof SyntaxError
+          ? 400
+          : error instanceof Error && error.message === 'request body too large'
+            ? 413
+            : 500
+        writeJson(res, status, { ok: false, error: error instanceof Error ? error.message : String(error) })
+      }
+    },
+  }), 'dsh-session-hover-preview: route')
+}

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "dsh-session-hover-preview",
+  "version": "0.1.0",
+  "description": "Codex-style user-message navigation for the current DeepSeek Harness conversation history",
+  "type": "module",
+  "main": "lib/index.js",
+  "files": [
+    "lib",
+    "cordis.patch.yml",
+    "README.md"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "exports": {
+    ".": "./lib/index.js",
+    "./client": "./lib/client.js",
+    "./cordis.patch.yml": "./cordis.patch.yml",
+    "./package.json": "./package.json"
+  },
+  "dsh": {
+    "bundle": {
+      "patch": "./cordis.patch.yml"
+    },
+    "client": {
+      "inject": [
+        "@deepseek-ai/dsh-client-runtime",
+        "@deepseek-ai/dsh-client-ui-workspace"
+      ],
+      "platform": "web"
+    }
+  },
+  "peerDependencies": {
+    "@deepseek-ai/cordis": "^4.0.1",
+    "@deepseek-ai/dsh-client-runtime": "^0.1.1-rc.2",
+    "@deepseek-ai/dsh-client-ui-workspace": "^0.1.1-rc.2",
+    "@deepseek-ai/dsh-host-apiproxy": "^0.1.1-rc.2",
+    "@deepseek-ai/dsh-host-webserver": "^0.1.1-rc.2"
+  }
+}