dsh-design-studio 0.11.0 → 0.13.0

package/lib/core.js

@@ -10,12 +10,14 @@ import fs from 'node:fs'
 import os from 'node:os'
 import path from 'node:path'
 import { fileURLToPath } from 'node:url'
+import { createJsonStringDecoder } from './draft.js'
 
 const HTML_EXT = /\.html?$/i
 const LOCAL_URL = /^(?:https?:\/\/)?(localhost|127\.0\.0\.1|0\.0\.0\.0|\[::1\]):(\d{2,5})(\/[^\s]*)?$/i
 // 命令输出里的本机地址（开发服务器启动时会打印）
 const URL_IN_TEXT = /\bhttps?:\/\/(?:localhost|127\.0\.0\.1|0\.0\.0\.0|\[::1\]):(\d{2,5})(\/[^\s"'`<>)\]]*)?/gi
 const LIVE_MS = 120000 // 事件时间离现在超过这么久就当是重放历史
+const DRAFT_LIVE_MS = 8000 // 草稿写完这么久以内右侧栏才看到：还放一遍（轮询 0.7 秒一次，放一遍三四秒，留足余量）
 const CHANGE_LOG = 20 // 记最近几批文件改动（远程看按它补齐两次轮询之间的改动）
 const DESIGN_SKILL = 'ui-design'
 const ASK_TOOL = 'ask_user_question' // DSH 的提问卡：模型问了、在等用户回答
@@ -196,8 +198,10 @@ export function sameTarget(a, b) {
 }
 
 /** 工具参数（JSON 字符串或对象）里的写文件路径；不是写文件返回 '' */
+const WRITE_TOOL = /^(write|edit|multi_?edit|create_file|str_replace\w*)$/i
+
 function writtenPath(name, args) {
-  if (!/^(write|edit|multi_?edit|create_file|str_replace\w*)$/i.test(String(name || ''))) return ''
+  if (!WRITE_TOOL.test(String(name || ''))) return ''
   let a = args
   if (typeof a === 'string') {
     try { a = JSON.parse(a) } catch { return '' }
@@ -544,7 +548,7 @@ export function askOf(data) {
 /**
  * @param opts.alive (origin) → 这个预览服务器还开着吗（开的太多时旧的会被关掉；发现没了就重开）
  */
-export function createTracker({ open, skipPorts = () => new Set(), now = Date.now, log = () => {}, store = null, history = null, alive = () => true, autoOpen = () => true, beforeRestore = () => {} }) {
+export function createTracker({ open, drafts = null, skipPorts = () => new Set(), now = Date.now, log = () => {}, store = null, history = null, alive = () => true, autoOpen = () => true, beforeRestore = () => {} }) {
   const states = new Map() // sessionId → state
   const cwds = new Map() // sessionId → 最近一次工具的工作目录
   let saved = {}
@@ -673,6 +677,8 @@ export function createTracker({ open, skipPorts = () => new Set(), now = Date.no
     if (size !== undefined) st.size = parseSize(size)
     if (view !== undefined) st.view = view === 'canvas' || view === 'single' ? view : ''
     if (routes !== undefined) st.routes = normRoutes(routes)
+    // 换到别的目录了：正在写的草稿是原来那套的，不再报（不然新设计里同名的那屏会被它挡住）
+    if (st.draft && !(target.kind === 'file' && st.draft.root === target.root)) st.draft = null
     st.target = target
     st.origin = origin
     st.url = urlFor(target, origin)
@@ -713,6 +719,7 @@ export function createTracker({ open, skipPorts = () => new Set(), now = Date.no
   function clear(id) {
     const st = stateOf(id)
     st.target = null
+    st.draft = null
     st.url = ''
     st.label = ''
     st.source = ''
@@ -743,6 +750,165 @@ export function createTracker({ open, skipPorts = () => new Set(), now = Date.no
     setTarget(id, target, { source: 'auto' }).catch((e) => log(e))
   }
 
+  const absOf = (sessionId, p) => path.resolve(cwdOf(sessionId), p.replace(/^~(?=\/|$)/, os.homedir()))
+  // 状态条说「正在写 x」的文件：在现在这套设计的文件夹里；还没有设计时，写什么都算（第一屏还在路上）
+  const ownsFile = (st, abs) => !st.target || (st.target.kind === 'file' && (abs === st.target.file || abs.startsWith(st.target.root + path.sep)))
+
+  /**
+   * 模型边说边推的流（DSH 的 agent/assistant-stream）。写文件时参数要流好几分钟才到 tool/call，
+   * 这里提前从半截参数里认出工具名和文件名，状态条就不会一直「在想」；顺手数一下写了多少行。
+   */
+  function stream(sessionId, frame) {
+    const st = sessionId && frame ? states.get(sessionId) : null
+    if (!st || !st.turn) return
+    if (frame.type === 'start' || frame.type === 'end') {
+      // 这一次说完了：没写完的页面收尾（在看的 iframe 停在写到的地方）
+      if (st.parts) for (const part of st.parts.values()) if (part.draft && drafts) drafts.end(part.draft, part.did)
+      st.parts = null
+      if (frame.type === 'start') {
+        st.tool = ''
+        st.writing = ''
+        st.lines = 0
+        // 写完落了地的留着（右侧栏靠它认出「刚才看着写的就是这屏」，单屏好换过去）；没写完的作废
+        if (st.draft && !(st.draft.file && fs.existsSync(st.draft.file))) st.draft = null
+      }
+      return
+    }
+    const c = frame.type === 'chunk' ? frame.chunk : null
+    if (!c || c.type !== 'tool-call-delta') return
+    const parts = st.parts || (st.parts = new Map())
+    let part = parts.get(c.index)
+    if (!part) {
+      part = { name: '', head: '', tail: '', file: '', lines: 0, last: '', abs: '', dec: null, draft: '', did: 0, prov: '' }
+      parts.set(c.index, part)
+      if (parts.size > 16) {
+        // 挤掉最早的一个：先挑没在写页面的；挤掉的草稿收个尾，别让在看的一直挂着
+        let k = null
+        for (const [i, p] of parts) if (i !== c.index && !(p.draft && p.dec && !p.dec.done)) { k = i; break }
+        if (k === null) for (const i of parts.keys()) if (i !== c.index) { k = i; break }
+        const old = parts.get(k)
+        if (old && old.draft && drafts) drafts.end(old.draft, old.did) // 只收它自己那份：同一个文件后来又开始重写的不动
+        parts.delete(k)
+      }
+    }
+    if (c.name) part.name = String(c.name)
+    if (!part.name) return
+    st.tool = part.name
+    if (!WRITE_TOOL.test(part.name)) return
+    const delta = typeof c.argumentsDelta === 'string' ? c.argumentsDelta : ''
+    if (part.dec) {
+      // 页面正文在流：还原出来的一截直接推给在看的预览
+      const was = part.dec.done
+      const text = part.dec.push(delta)
+      if (text && part.draft && drafts) drafts.push(part.draft, text, part.did)
+      if (part.dec.done) {
+        if (!was && part.draft && drafts) drafts.end(part.draft, part.did)
+        // 有的模型把正文排在文件名前面（DeepSeek V4.1 就这样）：正文写完了，接着从后面认文件名
+        if (!part.file) {
+          part.tail = (part.tail + delta).slice(-16384) // 只留最后一段：文件名在正文后面，前面再大的一块也挤不掉它
+          const p = pathIn(part.tail)
+          if (p) settle(sessionId, st, part, absOf(sessionId, p))
+        }
+      }
+    } else if (!part.skip && part.head.length < 8192 && part.file !== '-') {
+      part.head += delta
+      if (!part.file) {
+        const p = pathIn(part.head)
+        if (p) settle(sessionId, st, part, absOf(sessionId, p))
+      }
+      // 整页写（write 的 content / create 的 file_text）：开一份草稿，边写边给预览
+      const body = part.file !== '-' && drafts ? /"(?:content|file_text)"\s*:\s*"/.exec(part.head) : null
+      if (body) startBody(sessionId, st, part, part.head.slice(body.index + body[0].length))
+    }
+    // 参数是 JSON：内容里的换行是两个字 \n；跨块切开的也算上
+    const seen = (part.last + delta).match(/\\n/g)
+    part.lines += seen ? seen.length : 0
+    part.last = delta.slice(-1)
+    if (part.file !== '-') {
+      if (part.file) st.writing = part.file
+      st.lines = part.lines // 文件名还没到（正文在前）也数行：状态条和占位里的鼠标都靠它动
+    }
+  }
+
+  const pathIn = (text) => {
+    const m = /"(?:file_path|filePath|path)"\s*:\s*"((?:[^"\\]|\\.)*)"/.exec(text)
+    if (!m) return ''
+    try { return JSON.parse(`"${m[1]}"`) } catch { return m[1] }
+  }
+
+  /** 认出了这次写的是哪个文件：记下；正文在前、草稿先挂在临时名字上的，现在对上真名字（不是一屏就作废） */
+  function settle(sessionId, st, part, abs) {
+    part.abs = abs
+    part.file = ownsFile(st, abs) ? path.basename(abs) : '-'
+    if (part.file !== '-') st.lastDir = path.dirname(abs)
+    if (!part.draft || !part.prov) return
+    const d = st.draft
+    const cur = !!d && d.serve === part.draft && !d.file
+    if (part.file !== '-' && HTML_EXT.test(abs) && path.dirname(abs) === part.prov && !/^[._]/.test(part.file)) {
+      if (cur) d.file = abs
+    } else {
+      // 不是一屏（子文件夹里的、探针、样式表）：作废，临时地址也读不到了（右侧栏已经在看后面那份的也作废）
+      if (cur) st.draft = null
+      if (drafts) drafts.drop(part.draft, part.did)
+      part.draft = ''
+    }
+    part.prov = ''
+  }
+
+  let provisional = 0
+  /**
+   * 正文开始流了：要不要开草稿。名字先到的看名字（这套设计第一层的网页）；正文先到的看开头像不像网页，
+   * 先挂在设计文件夹里一个临时名字上（相对地址照样对得上），名字到了再对上。
+   * 还没有设计（第一屏）时先给这个文件夹开预览服务器，草稿从那里看。
+   */
+  function startBody(sessionId, st, part, rest) {
+    const known = !!part.file
+    const over = /(?:^|[^\\])(?:\\\\)*"/.test(rest) // 正文已经流完了（碰到没转义的引号）：不用再等
+    if (!known && rest.length < 64 && !over) return // 正文先到：多攒一点再认是不是网页
+    let ok = known ? HTML_EXT.test(part.abs) : /^\s*<(?:!doctype\s+html|html)\b/i.test(rest)
+    if (ok && !st.target && !st.design) {
+      // 页面开头自己写了设计类型标记（<meta name="dsh-design">）：也是在做设计
+      if (/<meta[^>]*dsh-design/i.test(rest)) st.design = true
+      else if (rest.length <= 3000 && !over) return // 还在开头：等等标记
+      else ok = false // 开头这么长还没有标记：不是在做设计（比如写代码的会话写了个网页），不开
+    }
+    const root = !ok ? '' : st.target && st.target.kind === 'file' ? st.target.root : known ? path.dirname(part.abs) : st.lastDir || ''
+    // 只给「一屏」开：设计文件夹第一层的网页，_ / . 开头的是模型的探针、草稿，不算
+    if (ok && known && (path.dirname(part.abs) !== root || /^[._]/.test(part.file))) ok = false
+    if (ok && !root) ok = false
+    if (known && !ok) {
+      part.skip = true
+      return
+    }
+    // 正文先到的不开草稿也要跟着还原：好知道正文在哪儿结束，后面才认得出文件名
+    part.dec = createJsonStringDecoder()
+    part.tail = ''
+    let draft = null
+    if (ok) {
+      const serve = known ? part.abs : path.join(root, `__ddp_draft_${++provisional}__.html`)
+      part.draft = serve
+      part.prov = known ? '' : root // 挂在临时名字上的：记着它属于哪个文件夹，名字到了自己核对（不管这时右侧栏在看哪份）
+      draft = { file: known ? part.abs : '', serve, root, id: drafts.begin(serve), origin: st.target ? st.origin : '' }
+      part.did = draft.id // 草稿编号：之后推、收尾、作废都核对它（同一个文件又开始重写时，旧的不碰新的）
+      st.draft = draft
+    }
+    const text = part.dec.push(rest)
+    if (draft && text) drafts.push(draft.serve, text, draft.id)
+    if (part.dec.done) {
+      if (draft) drafts.end(draft.serve, draft.id)
+      if (!known) {
+        part.tail = rest // 正文里的引号都转义过（\"），认文件名不会认到正文里去
+        const p = pathIn(rest)
+        if (p) settle(sessionId, st, part, absOf(sessionId, p))
+      }
+    }
+    if (draft && !draft.origin) {
+      open({ kind: 'file', file: draft.serve, root }).then((r) => {
+        if (st.draft === draft) draft.origin = r.origin
+      }, (e) => log(e))
+    }
+  }
+
   /** 会话事件 → 状态；自动发现只在没有目标、或目标也是自动发现的时候动手 */
   function observe(sessionId, event) {
     if (!sessionId || !event) return
@@ -759,12 +925,21 @@ export function createTracker({ open, skipPorts = () => new Set(), now = Date.no
       case 'turn/start':
         if (live) {
           st.turn = true
+          st.turnAt = now() // 右侧栏的状态条从这里开始计时
+          st.tool = ''
           keepVersion(st, '')
         }
         break
       case 'turn/end':
         st.turn = false
+        st.turnAt = 0
+        st.tool = ''
         st.writing = ''
+        st.lines = 0
+        if (st.parts && drafts) for (const part of st.parts.values()) if (part.draft) drafts.end(part.draft, part.did)
+        st.parts = null
+        // 最后一屏整页一下子到、马上就说完了：落了地的草稿留着（快照里刚写完的几秒还报，右侧栏放完它）
+        if (!(st.draft && st.draft.file && fs.existsSync(st.draft.file))) st.draft = null
         st.asking = false
         if (live) {
           keepVersion(st, st.ask)
@@ -778,15 +953,17 @@ export function createTracker({ open, skipPorts = () => new Set(), now = Date.no
         if (d.name === 'preview_page') st.design = true
         if (!live) break
         if (d.name === ASK_TOOL) st.asking = true
+        st.tool = String(d.name || '') // 状态条按它说「正在体检」「正在跑命令」…
         if (d.callId) {
           st.calls.set(d.callId, { name: d.name, args: argsOf(d.arguments) })
           if (st.calls.size > 64) st.calls.delete(st.calls.keys().next().value)
         }
         const p = writtenPath(d.name, d.arguments)
         if (!p) break
-        const abs = path.resolve(cwdOf(sessionId), p.replace(/^~(?=\/|$)/, os.homedir()))
-        if (st.target && st.target.kind === 'file' && (abs === st.target.file || abs.startsWith(st.target.root + path.sep))) {
+        const abs = absOf(sessionId, p)
+        if (ownsFile(st, abs)) {
           st.writing = path.basename(abs)
+          st.lastDir = path.dirname(abs) // 下一页要是正文先到，草稿先挂在这个文件夹里
         }
         if (HTML_EXT.test(abs) && (!st.target || (st.source === 'auto' && st.target.kind === 'file'))) {
           st.pendingHtml = abs // 写完（tool/result）再预览，免得打开一个还不存在的文件
@@ -799,6 +976,8 @@ export function createTracker({ open, skipPorts = () => new Set(), now = Date.no
           if (st.target && saved[sessionId] && saved[sessionId].cwd !== d.meta.cwd) persist(sessionId, st)
         }
         st.writing = ''
+        st.lines = 0
+        st.tool = ''
         if (!live) break
         const pending = st.pendingHtml
         st.pendingHtml = ''
@@ -934,11 +1113,32 @@ export function createTracker({ open, skipPorts = () => new Set(), now = Date.no
     return r
   }
 
+  /** 正在写的那页：预览服务器上的草稿地址 + 它在设计里的名字（和 screens 的 key 一样） */
+  function draftOf(st) {
+    const d = st ? st.draft : null
+    if (!d || !d.origin) return null
+    const relOf = (f) => path.relative(d.root, f).split(path.sep).join('/')
+    const sv = relOf(d.serve || d.file)
+    if (!sv || sv.startsWith('..')) return null
+    // 就挂在这一屏自己的地址上，带个记号（serve.js 认它）：页面里的相对地址照常对得上。
+    // 正文先到的先挂在临时名字上，key 空着（还不知道是哪屏），名字到了再填。
+    // live：还在写、或刚写完（右侧栏这时才看到也值得放一遍：整页一下子到的，预览服务器会一截截放）
+    const rec = drafts && drafts.get(d.serve)
+    const live = !!rec && rec.id === d.id && (!rec.done || Date.now() - (rec.endAt || 0) < DRAFT_LIVE_MS)
+    if (!st.turn && !live) return null // 这一轮说完了：只报刚写完的那份
+    // 页面开头写的设计类型（<meta name="dsh-design" content="miniprogram 390x844">）：真文件还没摆出来时，右侧栏靠它套对外框
+    const mt = rec && /<meta\b[^>]*\bname\s*=\s*["']?dsh-design\b[^>]*>/i.exec(rec.text.slice(0, 6000))
+    const mc = mt && /\bcontent\s*=\s*(?:"([^"]*)"|'([^']*)')/i.exec(mt[0])
+    // lump：写完了、而且是整段一下子到的（右侧栏放完这份再换真文件；一路流着写的落地就换）
+    return { key: d.file ? relOf(d.file) : '', url: `${d.origin}/${sv.split('/').map(encodeURIComponent).join('/')}?__ddp_draft=${d.id}`, live, lump: !!(live && rec.done && rec.lump), meta: mc ? (mc[1] ?? mc[2] ?? '').slice(0, 80) : '' }
+  }
+
   function snapshot(id) {
     const st = states.get(id)
     if (!(st && st.target)) restore(id)
     else if (st.origin && !alive(st.origin)) revive(id, st)
-    if (!st || !st.target) return { target: null, rev: st ? st.rev : 0, openRev: st ? st.openRev : 0, turn: st ? st.turn : false, turns: st ? st.turns || 0 : 0, asking: !!(st && st.asking), writing: '', hint: st && st.hint && fs.existsSync(st.hint) ? st.hint : '', loading: restoring.has(id) }
+    const turnFor = st && st.turn && st.turnAt ? Math.max(0, now() - st.turnAt) : 0
+    if (!st || !st.target) return { target: null, rev: st ? st.rev : 0, openRev: st ? st.openRev : 0, turn: st ? st.turn : false, turnFor, tool: (st && st.turn && st.tool) || '', turns: st ? st.turns || 0 : 0, asking: !!(st && st.asking), writing: (st && st.turn && st.writing) || '', lines: (st && st.turn && st.lines) || 0, draft: draftOf(st), hint: st && st.hint && fs.existsSync(st.hint) ? st.hint : '', loading: restoring.has(id) }
     const { target, url, label, source, rev, openRev, turn, writing, changedAt, kind, size, view, origin } = st
     const file = target.kind === 'file'
     return {
@@ -949,9 +1149,13 @@ export function createTracker({ open, skipPorts = () => new Set(), now = Date.no
       rev,
       openRev,
       turn,
+      turnFor,
+      tool: (turn && st.tool) || '',
       turns: st.turns || 0,
       asking: !!st.asking,
       writing,
+      lines: (turn && st.lines) || 0,
+      draft: draftOf(st),
       changedAt,
       changedFiles: st.changedFiles || [],
       changes: st.changes || [],
@@ -969,5 +1173,5 @@ export function createTracker({ open, skipPorts = () => new Set(), now = Date.no
     }
   }
 
-  return { observe, setTarget, setView, clear, changed, snapshot, cwdOf, stateOf, versions, restoreVersion, editText, editStyle, editDir, keepVersion: (id, label) => keepVersion(stateOf(id), label) }
+  return { observe, stream, setTarget, setView, clear, changed, snapshot, cwdOf, stateOf, versions, restoreVersion, editText, editStyle, editDir, keepVersion: (id, label) => keepVersion(stateOf(id), label) }
 }