dsh-in-hand 1.7.6 → 1.7.8

package/README.md

@@ -252,6 +252,35 @@ PDF / ZIP / MP4）。这是**按内容识别**，不是"按内容放行" ——
 `scripts/check-mobile.mjs` 会在 390 / 360 两个宽度下跑 `window.twSelfCheck()`、切会话
 残留断言与左基线断言。
 
+### v1.7.7：坏图不再留空框、图标不再依赖字体
+
+图片加载失败（宿主文件路由只服务 `~/.dsh/attachments` / `~/.dsh/outbox`，外面的路径
+是 403；外域 URL 也可能不可达）时，v1.7.6 会铺一张 63px 的整宽 ERR 卡片，视觉上仍是一块
+把正文截断的占位框。v1.7.7 换成 36px 单行提示条，并且页面级保证 DOM 里**不留破图 `img`**：
+
+| 改前（63px ERR 占位卡） | 改后（36px 提示条，可点开原图） |
+| --- | --- |
+| ![改前](docs/screenshots/v1.7.7-broken-before.png) | ![改后](docs/screenshots/v1.7.7-broken-after.png) |
+
+会话抽屉里「子代理 N」入口的图标改成内联 SVG（不再用字符，真机上曾出现「廿」这种回退字形）：
+
+![子代理入口图标](docs/screenshots/v1.7.7-subagents-icon.png)
+
+### v1.7.8：长会话不再整屏闪、附件信封不再露标签
+
+图片的骨架流光用 `inset:0` 绝对定位，却忘了给 `.md-imgwrap` 定位，包含块一路退到**视口**。
+长会话里总有还没进入视口的懒加载图，它们永远带着 `.loading`，于是整屏多出一条 1.35s
+无限循环的亮带（用户原话「反复闪屏」），`translateX(55%)` 还把页面从 390 撑到 601。现在
+流光被关进图片盒、不吃点击，离屏图也不再挂任何动画：
+
+| 改前（整屏亮带，可横向滚到 601） | 改后（390，静止） |
+| --- | --- |
+| ![改前](docs/screenshots/v1.7.8-flash-before.png) | ![改后](docs/screenshots/v1.7.8-flash-after.png) |
+
+同一轮的第二个修复：DSH 给模型看的 `<path>…</path><type>image</type><content>…</content>`
+信封，以前在手机上原样显示成 XML（某会话第一条消息整条都是它），现在渲染成图片卡，
+拿不到图时仍是那条 36px 提示条。
+
 ### 页面为什么不做整页重建
 
 页面每 3 秒轮询一次，但**数据没变就完全不碰 DOM**，只刷新右上角时间戳。首版是

package/lib/page.html

@@ -1078,11 +1078,32 @@ html,body{overflow-x:clip}
       手机上「看结果」主要就是看图、看文档：图铺满气泡宽度、点开能放大；
       文档没法内嵌预览，至少把名字 / 大小 / 类型说清楚，再给一个能点开的入口。
       点击目标都不小于 44px —— 这是手机页既定的底线。 */
-.md-imgwrap{display:block;width:100%;max-width:100%;padding:0;margin:var(--sp-2) 0;border:0;
-  min-height:44px;background:none;text-align:left;border-radius:var(--dsw-radius-md);overflow:hidden}
-.md-img{display:block;width:100%;height:auto;border:1px solid var(--line);
+/* v1.7.7：图片盒子的三条硬约束 ——
+   ① 宽度永远不超过气泡（max-width + height:auto，横图竖图都不撑宽）；
+   ② min-height:0：没拿到 intrinsic size 之前**不占位撑高**，加载完再长出来，
+      避免"先铺一块 44px 空气、再跳一下"的布局抖动；
+   ③ 圆角与边框在图片盒子上，加载失败换成提示条时形状/位置不变。 */
+.md-imgwrap{display:block;position:relative;width:100%;max-width:100%;min-height:0;padding:0;margin:var(--sp-2) 0;border:0;
+  background:none;text-align:left;border-radius:var(--dsw-radius-md);overflow:hidden}
+.md-img{display:block;width:100%;max-width:100%;height:auto;min-height:0;border:1px solid var(--line);
   border-radius:var(--dsw-radius-md);background:var(--panel2)}
 .md-imgwrap:active .md-img{opacity:.86}
+/* v1.7.7：图片加载失败 → 一条 36px 的提示条（≤44px），可点打开原图 / 重试。
+   绝不再留一个破图空框把正文截成两半；文字单行 ellipsis，不换行、不撑宽。 */
+.imgerr{display:flex;align-items:center;gap:var(--sp-2);width:100%;max-width:100%;min-width:0;
+  height:36px;max-height:44px;margin:var(--sp-2) 0;padding:0 var(--sp-3);
+  border:1px solid var(--line);border-radius:var(--dsw-radius-md);background:var(--panel2);
+  color:var(--dim);font-size:var(--fs-2);line-height:1;text-align:left;text-decoration:none;overflow:hidden}
+.imgerr svg{width:16px;height:16px;flex:0 0 auto;fill:none;stroke:currentColor;
+  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
+.imgerr .t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.imgerr:active{background:var(--panel);color:var(--fg)}
+/* 抽屉里的字符图标（＋ / ›）现在都是内联 SVG：不再依赖字体里有没有那个字形。 */
+.pill .pico{width:16px;height:16px;flex:0 0 auto;color:var(--dim);fill:none;stroke:currentColor;
+  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
+.pill .pchev{width:12px;height:12px;flex:0 0 auto;fill:none;stroke:currentColor;
+  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
+.pill .hint{display:flex;align-items:center;gap:4px}
 .filecard{display:flex;align-items:flex-start;gap:var(--sp-3);width:100%;min-width:0;min-height:52px;margin:var(--sp-2) 0;
   padding:var(--sp-2) var(--sp-3);border:1px solid var(--line);border-radius:var(--dsw-radius-md);
   background:var(--panel2);color:var(--fg);text-align:left;text-decoration:none}
@@ -1219,12 +1240,17 @@ html,body{overflow-x:clip}
 @keyframes nudge{0%,100%{transform:translateX(0)}30%{transform:translateX(-2px)}70%{transform:translateX(2px)}}
 
 /* 图片：先落一块纸纹，显影时轻轻放大一点。注意 .loading 是 JS **之后**才加的 ——
-   JS 不跑时 .md-img 完全可见，绝不留隐形图。 */
+   JS 不跑时 .md-img 完全可见，绝不留隐形图。
+   2026-10-22（v1.7.8）：.md-imgwrap 必须 position:relative —— 否则下面这条
+   `inset:0` 的绝对定位流光会以**视口**为包含块：长会话里只要有一张懒加载图片
+   还没进入视口，它就一直带着 .loading，于是整屏出现一条 1.35s 无限循环的亮带
+   （用户报的"反复闪屏"），还把它自己的 translateX(55%) 算进文档宽度，
+   把 390 的页面撑到 601（横向可滚）。同时流光绝不能吃点击。 */
 .md-img{transition:opacity var(--mo-slow) var(--mo-ease),transform var(--mo-slow) var(--mo-ease)}
 .md-imgwrap.loading .md-img{opacity:0;transform:scale(1.012)}
 .md-imgwrap.done .md-img{opacity:1;transform:none}
 .md-imgwrap.loading::after{
-  content:'';position:absolute;inset:0;
+  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
   background:linear-gradient(100deg,transparent 18%,var(--mo-ink) 42%,transparent 62%);
   animation:sheen 1.35s var(--mo-ease) infinite;
 }
@@ -2098,6 +2124,74 @@ function probePath(p){
   } catch (e) { /* 忽略 */ }
   return holder
 }
+/** 破图提示条里的图标。走 createElementNS —— markdown 渲染段内不拼 HTML 字符串
+ *  （契约测试会扫这一段），所以这里也不破例。 */
+function brokenImgIconNode(){
+  var NS = 'http://www.w3.org/2000/svg'
+  var svg = document.createElementNS(NS, 'svg')
+  svg.setAttribute('viewBox', '0 0 24 24')
+  svg.setAttribute('aria-hidden', 'true')
+  // 相框 + 山形 + 一道斜杠：一眼读作"图裂了"，不依赖任何字体字形。
+  var ds = ['M4 5h16v14H4z', 'M4 16.5l4.5-4.5 3.5 3.5 3-3 4.5 4.5', 'M3.5 3.5l17 17']
+  for (var i = 0; i < ds.length; i++) {
+    var p = document.createElementNS(NS, 'path')
+    p.setAttribute('d', ds[i])
+    svg.appendChild(p)
+  }
+  return svg
+}
+
+/** 图能不能"打开原图"：只有同源路由 / http(s) 才给 <a>；data: / blob: 只能就地重试。 */
+function canReopenImage(url){
+  var s = String(url || '')
+  return /^https?:\/\//i.test(s) || s.charAt(0) === '/'
+}
+
+/** 图片加载失败的兜底 UI（v1.7.7）。
+ *
+ *  以前这里换成一张整宽的 .filecard（63px、两行说明）：视觉上仍是一块"占位框"，
+ *  把一段话从中间截断。现在统一成一条 **36px 单行提示条**：
+ *    · 能打开原地址的给 <a target=_blank>（"图片未能加载 · 打开原图"）；
+ *    · data: / blob: 这类重开没意义的给 <button>，点一下就地重新加载。
+ *  高度写死在 CSS（36px / max 44px），文字单行 ellipsis，所以不会再撑高正文。
+ */
+function brokenImgBar(url, alt){
+  var reopen = canReopenImage(url)
+  var el = document.createElement(reopen ? 'a' : 'button')
+  el.className = 'imgerr'
+  if (reopen) {
+    el.href = url
+    el.target = '_blank'
+    el.rel = 'noopener noreferrer'
+  } else {
+    el.type = 'button'
+    el.addEventListener('click', function(){
+      if (!el.parentNode) return
+      var fresh = imgNode(url, alt)
+      el.parentNode.replaceChild(fresh, el)
+    })
+  }
+  el.setAttribute('aria-label', (alt ? alt + '：' : '') + '图片未能加载，' + (reopen ? '点一下打开原图' : '点一下重试'))
+  el.title = (alt ? alt + ' · ' : '') + (url || '')
+  el.appendChild(brokenImgIconNode())
+  var t = document.createElement('span')
+  t.className = 't'
+  t.textContent = '图片未能加载 · ' + (reopen ? '打开原图' : '点一下重试')
+  el.appendChild(t)
+  return el
+}
+
+/** 把失败的 <img>（连同它的 .md-imgwrap）换成提示条。幂等：已被换掉就什么都不做。 */
+function swapBrokenImg(img, url, alt){
+  if (!img || !img.parentNode) return false
+  var wrap = img.closest ? img.closest('.md-imgwrap') : null
+  if (wrap && !wrap.parentNode) return false      // 已经换过一次了，别再动
+  var target = wrap || img
+  if (!target.parentNode) return false
+  target.parentNode.replaceChild(brokenImgBar(url, alt), target)
+  return true
+}
+
 function imgNode(url, alt){
   var wrap = document.createElement('button')
   wrap.type = 'button'
@@ -2108,13 +2202,17 @@ function imgNode(url, alt){
   img.loading = 'lazy'
   img.decoding = 'async'
   img.alt = alt || ''
+  // 事件必须**先挂再赋 src**：同一条坏 URL 第二次出现时（浏览器已经记住这次失败），
+  // error 可能在赋值那一刻就排队，挂晚了就再也收不到，页面上只留一个破图空框。
+  img.addEventListener('error', function(){ swapBrokenImg(img, url, alt) })
   img.src = url
-  img.addEventListener('error', function(){
-    if (!wrap.parentNode) return
-    wrap.parentNode.replaceChild(brokenFileNode(alt || '图片'), wrap)
-  })
   wrap.appendChild(img)
   wrap.addEventListener('click', function(){ openLightbox(url, alt) })
+  // 兜底二：命中"失败缓存"时 complete 会立刻为 true 且 naturalWidth 还是 0，
+  // 而那一次 error 可能已经错过 —— 追加进 DOM 之后补一刀（此时 wrap 已有父节点）。
+  setTimeout(function(){
+    if (img.complete && !img.naturalWidth) swapBrokenImg(img, url, alt)
+  }, 0)
   return wrap
 }
 function fileCard(url, label, kind){
@@ -2343,12 +2441,54 @@ function blocksInto(el, text){
   return el
 }
 
+/* DSH 把「用户贴了一个附件」序列化成一段**信封文本**给模型看：
+     <path>C:\…\a.png</path><type>image</type><content>image/png image, 1398x1542 px, 437517 bytes</content>
+   这段协议在手机上也原样显示过 —— 用户看到的是 XML 标签（2026-10-22 的
+   「Token Router 说明书与印刷 PDF」会话，第一条消息整条都是它）。v1.7.8 解析成
+   真正的图片 / 文件卡（同样走 imgNode 的失败兜底），文本里不再留标签。 */
+var ENVELOPE_RE = /<path>([\s\S]*?)<\/path>\s*<type>\s*(image|file)\s*<\/type>\s*<content>([\s\S]*?)<\/content>/g
+function splitAttachmentEnvelopes(text){
+  var images = [], files = []
+  var clean = String(text == null ? '' : text).replace(ENVELOPE_RE, function(all, p, kind, meta){
+    var path = String(p || '').trim()
+    if (!path) return ''
+    var info = { path:path, meta:String(meta || '').replace(/\s+/g, ' ').trim() }
+    if (kind === 'image') images.push(info)
+    else files.push(info)
+    return ''
+  })
+  return {
+    text: clean.replace(/\n{3,}/g, '\n\n').replace(/^\s+|\s+$/g, ''),
+    images: images,
+    files: files
+  }
+}
+function envelopeAttachmentsNode(env){
+  var wrap = document.createElement('div'); wrap.className = 'message-attachments'
+  var i
+  for (i = 0; i < env.images.length; i++) {
+    var a = env.images[i]
+    var node = imgNode(fileUrlFor(a.path), baseName(a.path))
+    if (a.meta) node.title = (node.title ? node.title + ' · ' : '') + a.meta
+    wrap.appendChild(node)
+  }
+  for (i = 0; i < env.files.length; i++) {
+    var f = env.files[i]
+    wrap.appendChild(fileCard(fileUrlFor(f.path), baseName(f.path), '文件'))
+  }
+  return wrap.children.length ? wrap : null
+}
+
 function bubNode(text, opts){
   var o = opts || {}
   var wrap = document.createElement('div'); wrap.className = 'bubwrap'
   var b = document.createElement('div')
   b.className = 'bub'
   var s = String(text == null ? '' : text)
+  var env = splitAttachmentEnvelopes(s)
+  if (env.images.length || env.files.length) s = env.text
+  var attach = envelopeAttachmentsNode(env)
+  if (attach) b.appendChild(attach)
   var parts = s.split('```')
   if (parts.length > 1) {
     for (var i = 0; i < parts.length; i++) {
@@ -3009,6 +3149,14 @@ var ICON_CTX  = '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 7h12M4
 var ICON_DOWN = '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5v14M6 13l6 6 6-6"/></svg>'
 var ICON_UP   = '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 19V5M6 11l6-6 6 6"/></svg>'
 var ICON_CLOSE = '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18"/></svg>'
+// v1.7.7：抽屉（会话列表）里原来用字符当图标的两处 —— `＋ 开一个新会话` 与
+// `工具轨迹 ›` 这类行尾箭头。真机上曾把某个字符渲染成「廿」这种错误字形
+// （回退字体里恰好有这个码位），所以连同新加的「子代理」入口图标一起换成 SVG：
+// 只依赖 path，不依赖设备上装了哪个字体。class 由 CSS 定尺寸（16 / 12px）。
+var ICON_USERS = '<svg class="pico" viewBox="0 0 24 24" aria-hidden="true"><circle cx="9" cy="8" r="3.2"/>' +
+  '<path d="M3.4 19c.5-3.2 2.8-5 5.6-5s5.1 1.8 5.6 5"/><path d="M16 5.4a3 3 0 0 1 0 5.6M17.2 14.4c2 .5 3.2 2.1 3.5 4.6"/></svg>'
+var ICON_PLUS  = '<svg class="pico" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg>'
+var ICON_GO    = '<svg class="pchev" viewBox="0 0 24 24" aria-hidden="true"><path d="M9 6l6 6-6 6"/></svg>'
 function syncSend(){
   var b = $('send')
   // 只读的子代理视图：发送键永久禁用（宿主不接受往子代理会话里写 prompt）。
@@ -3705,6 +3853,12 @@ function renderAttachmentTray(){
     var chip = document.createElement('div'); chip.className = 'attach-chip' + (a.status === 'error' ? ' bad' : '')
     if (a.kind === 'image') {
       var thumb = document.createElement('img'); thumb.className = 'thumb'; thumb.src = a.previewURL; thumb.alt = ''
+      // 预览图（blob:）也可能失败：删掉它，留格式徽标占位，绝不在 32px 的框里显示破图标。
+      thumb.addEventListener('error', function(){
+        if (!thumb.parentNode) return
+        var badge = document.createElement('span'); badge.className = 'kind'; badge.textContent = 'IMG'
+        thumb.parentNode.replaceChild(badge, thumb)
+      })
       chip.appendChild(thumb)
     } else {
       var kind = document.createElement('span'); kind.className = 'kind'; kind.textContent = kindLabel(a.name)
@@ -3877,19 +4031,20 @@ async function openSessions(){
   h += '<button class="pill" data-act="chatonly"><span class="label">只看对话</span><span class="hint" id="chatOnlyHint">' +
     (S.chatOnly ? '已隐藏工具步骤' : '显示工具步骤') + '</span></button>'
   h += '<div id="sessionList"></div><div class="workbench-nav"><h3>工作台</h3>' +
-    '<button class="pill navpill" data-act="workspace"><span class="label">工作区</span><span class="hint">新建时选择 ›</span></button>' +
-    '<button class="pill navpill" data-act="plugins"><span class="label">插件</span><span class="hint">工具轨迹 ›</span></button>' +
-    '<button class="pill navpill" data-act="automation"><span class="label">自动化</span><span class="hint">后台任务 ›</span></button></div><h3>操作</h3>'
+    '<button class="pill navpill" data-act="workspace"><span class="label">工作区</span><span class="hint">新建时选择' + ICON_GO + '</span></button>' +
+    '<button class="pill navpill" data-act="plugins"><span class="label">插件</span><span class="hint">工具轨迹' + ICON_GO + '</span></button>' +
+    '<button class="pill navpill" data-act="automation"><span class="label">自动化</span><span class="hint">后台任务' + ICON_GO + '</span></button></div><h3>操作</h3>'
   // 子代理不混进上面的会话列表：这里给唯一的入口，点开是二级页。
   if (agents.length) {
-    h += '<button class="pill" data-act="subagents"><span class="label">子代理 ' + agents.length +
-      '</span><span class="hint">单独查看 ›</span></button>'
+    h += '<button class="pill" data-act="subagents">' + ICON_USERS +
+      '<span class="label">子代理 ' + agents.length +
+      '</span><span class="hint">单独查看' + ICON_GO + '</span></button>'
   }
-  h += '<button class="pill" data-act="new">＋ 开一个新会话</button>'
-  h += '<button class="pill" data-act="poker">实验功能：德州扑克</button>'
+  h += '<button class="pill" data-act="new">' + ICON_PLUS + '<span class="label">开一个新会话</span></button>'
+  h += '<button class="pill" data-act="poker"><span class="label">实验功能：德州扑克</span></button>'
   h += '<button class="pill" data-act="theme"><span class="label">' +
     (document.documentElement.getAttribute('data-theme') === 'dark' ? '切换到亮色' : '切换到暗色') +
-    '</span><span class="hint">外观 ›</span></button>'
+    '</span><span class="hint">外观' + ICON_GO + '</span></button>'
   openSheet(h)
   bindSheetClose()
   function paintSessions(query){
@@ -5172,8 +5327,11 @@ window.fetch = function (u, o) {
     }
 
     /* 4c. 图片：没加载完的才标 .loading（骨架流光），加载完 .done 显影。
-           注意 .loading 是这里**加上**的 —— JS 不跑时图片本来就直接可见。 */
+           注意 .loading 是这里**加上**的 —— JS 不跑时图片本来就直接可见。
+           2026-10-22（v1.7.8）：只给**贴着视口**的图挂流光。长会话里几十张懒加载图
+           永远在视口外，以前它们会一直挂着 .loading，流光动画也就永远在跑（闪屏）。 */
     var wraps = doc.querySelectorAll('.md-imgwrap')
+    var vh = window.innerHeight || 800
     for (var j = 0; j < wraps.length; j++) {
       var w = wraps[j]
       if (w.classList.contains('done')) continue
@@ -5183,7 +5341,10 @@ window.fetch = function (u, o) {
         w.classList.remove('loading')
         w.classList.add('done')
       } else {
-        w.classList.add('loading')
+        var wr = w.getBoundingClientRect()
+        var near = wr.bottom > -vh && wr.top < vh * 2
+        if (near) w.classList.add('loading')
+        else w.classList.remove('loading')
       }
     }
 
@@ -5198,6 +5359,12 @@ window.fetch = function (u, o) {
     if (!w) return
     w.classList.remove('loading')
     w.classList.add('done')
+    // v1.7.7 兜底三：任何一条路径（包括以后新加的渲染代码）插进来的图，
+    // 只要 error 之后 naturalWidth 还是 0，就在这里统一换成提示条。
+    // 这样"页面上不留破图 img"是页面级的不变量，而不是某个函数的自觉。
+    if (e.type === 'error' && !im.naturalWidth) {
+      swapBrokenImg(im, im.getAttribute('src') || '', im.alt || '')
+    }
   }
   doc.addEventListener('load', settle, true)
   doc.addEventListener('error', settle, true)

package/lib/sw.js

@@ -44,7 +44,10 @@ const SHELL = ['/taskwatch', '/taskwatch/icon-192.png', '/taskwatch/icon-512.png
 // 那次重载是 cache-first 时代的补丁（旧外壳永远不会自己变新）。现在页面已经是
 // **网络优先**（见下面 fetch 里的注释），每次导航本来就取新版，这个补丁既没必要、
 // 又足以把整站打死。别再加回来。
-const CACHE = 'taskwatch-v16'
+// v17（v1.7.7）：页面换了正文图片的兜底渲染（坏图 → 44px 以内提示条）与抽屉图标
+//     （字符字形 → 内联 SVG）。外壳里的 icon-192 也是预缓存的，一起升号清掉旧壳。
+// v18（v1.7.8）：图片流光的包含块修好（长会话不再整屏闪）+ 附件信封改成图片卡。
+const CACHE = 'taskwatch-v18'
 
 const JSON_HEADERS = { 'content-type': 'application/json; charset=utf-8', 'cache-control': 'no-store' }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-in-hand",
-  "version": "1.7.6",
+  "version": "1.7.8",
   "description": "掌上 DSH：DeepSeek Harness 的手机端，不用装 App——会话、实时对话、交付文件、后台任务与待批准。 / DSH in hand: the phone client for DeepSeek Harness with no app to install.",
   "type": "module",
   "main": "lib/index.js",