dsh-thoughtdag 0.5.17 → 0.5.19

package/lib/client.js

@@ -1,28 +1,45 @@
 // dsh-thoughtdag client half — the lightest possible browser shim.
-// It renders a floating "对话 | 思维图" switch over the harness UI and, on
-// "思维图", shows a full-screen SAME-ORIGIN iframe at /thoughtdag/ (the SPA
-// is served by the host half on the same web server — no CORS, no second
-// origin). The switch floats on purpose: it is there before any session is
-// open (0.4.18 moved it into the session header, which hid it on the empty
-// page; withdrawn in 0.4.19). While the canvas is up, the SPA shows the same
-// switch in its own top bar, next to the canvas chip, so nothing floats over
-// the canvas toolbar at any width: the pill hides once the SPA has booted
-// and comes back when the canvas closes (0.4.20). All conversation smarts live inside the ThoughtDAG app; this file
-// only opens the door and forwards the current session id so the canvas can
-// offer to mirror it.
+// It puts ThoughtDAG where the harness puts its own pages: an entry in the
+// sidebar's panel list (beside Plugins and Scheduled tasks) that opens the
+// canvas in the main column, through the host's own `main` panel slot and
+// `layout.selectPanel`. The canvas itself is a SAME-ORIGIN iframe at
+// /thoughtdag/ (the SPA is served by the host half on the same web server —
+// no CORS, no second origin). The iframe never lives inside the host's React
+// tree: the main slot renders only the selected panel and would unmount it on
+// every switch, reloading the canvas. So the panel page is a placeholder that
+// fills the main column, and the iframe is a fixed layer laid exactly over
+// it while the page is mounted — the host owns navigation, chrome, locale and
+// theme; the canvas keeps its state across switches.
 //
-// Same pattern as dsh-synapse: window.__ModuleLoader__.load with a module
-// whose inject lists the client services it reads (sessions) and whose apply
-// touches the DOM.
+// Hosts without the panel slot (older harnesses) get the previous door: a
+// floating 对话 | 思维图 pill over the chat and a full-window overlay (0.4.19
+// to 0.5.18; its placement was the subject of #55, #61, #63 and #73 — every
+// spot in a stranger's chrome collides with something, which is why the
+// panel entry replaces it wherever the host offers one).
+//
+// All conversation smarts live inside the ThoughtDAG app; this file only
+// opens the door and forwards the current session id so the canvas can offer
+// to mirror it. Same pattern as dsh-synapse: window.__ModuleLoader__.load
+// with a module whose inject lists the client services it reads and whose
+// apply touches the DOM.
 
 window.__ModuleLoader__.load({
   id: 'dsh-thoughtdag',
-  factory: () => {
+  factory: (require) => {
     const module = { exports: {} }
 
-    // uiWorkspace: the harness's directory picker (the OS dialog when the
-    // harness runs on this machine, its in-app browser when reached remotely)
-    module.exports.inject = ['sessions', 'uiWorkspace']
+    // the host's React, for the two slot components (the sidebar glyph and
+    // the panel page); absent on a host that lends none, which also has no
+    // panel slot to fill
+    let React = null
+    try { React = require('react') } catch { React = null }
+
+    // sessions: the current session for the canvas to mirror. uiWorkspace: the
+    // harness's directory picker (the OS dialog when the harness runs on this
+    // machine, its in-app browser when reached remotely). slots / locale /
+    // layout: the panel entry, its label in the host's language, and the
+    // switch back to the conversation.
+    module.exports.inject = ['sessions', 'uiWorkspace', 'slots', 'locale', 'layout']
     module.exports.apply = ctx => {
       const currentSession = () => {
         const snapshot = ctx.sessions.list.getSnapshot()
@@ -32,32 +49,37 @@ window.__ModuleLoader__.load({
         return session === undefined ? null : { id, title: session.displayTitle ?? null, cwd: session.cwd ?? null }
       }
 
-      const style = document.createElement('style')
-      // The map overlay starts below the window's top strip: the desktop host
-      // publishes --dsh-frame-top-clearance on its root (48px under the
-      // hiddenInset traffic lights on macOS, the caption height on Windows,
-      // 0 in native fullscreen). In that strip the plugin draws a title band
-      // of its own: the ThoughtDAG name, the 对话|思维图 switch and the canvas's
-      // name, draggable like the host's own chrome rows (data-window-drag),
-      // starting past the traffic lights (--dsh-frame-leading-clearance while
-      // the sidebar is collapsed, 84px otherwise, since the overlay covers the
-      // sidebar too) and stopping short of the Windows caption buttons. So
-      // the lights and the window controls are never covered, and nothing of
-      // the host's session header shows through (#39). A browser tab has no
-      // clearance: no band, the overlay fills the window, the canvas keeps its
-      // own switch.
-      // The floating pill sits in the window's top strip, centre-right, on every platform: 12px down in a
-      // browser tab, vertically centred in the host's own strip on the desktop (40px on Windows, 48px on
-      // macOS). It is no-drag, so the strip's drag region never takes its clicks (#55: pinned half into the
-      // drag region without no-drag, its upper half was swallowed; moved below the strip, it landed in the
-      // host's session header). Centre-right keeps it clear of the host's menu on the left and the window
-      // controls on the right.
-      style.textContent = '.dsh-td-switch{position:fixed;z-index:120;top:12px;left:60%;display:flex;align-items:center;gap:2px;transform:translateX(-50%);-webkit-app-region:no-drag;border:1px solid #d1d5db;border-radius:999px;background:rgba(255,255,255,.96);padding:3px;backdrop-filter:blur(10px)}.dsh-td-switch button{height:28px;border:0;border-radius:999px;background:transparent;padding:0 11px;color:#6b7280;font:600 12px Inter,system-ui,sans-serif;cursor:pointer;white-space:nowrap}.dsh-td-switch button:hover{background:#f3f4f6;color:#111827}.dsh-td-switch button.active{background:#111827;color:#fff}.dsh-td-switch .dsh-td-mark{display:inline-block;width:8px;height:8px;border-radius:50%;background:#6d5dfc;box-shadow:0 -7px 0 #a99cff,0 7px 0 #f0a35a;margin:0 6px 0 8px;flex:none}.dsh-td-switch[hidden]{display:none}html[data-platform] .dsh-td-switch,html[data-windows-titlebar] .dsh-td-switch{top:max(2px,calc((var(--dsh-frame-top-clearance,40px) - 36px) / 2))}.dsh-td-bar{position:fixed;z-index:121;top:0;left:0;right:0;height:var(--dsh-frame-top-clearance,0px);display:flex;align-items:center;gap:14px;padding:0 16px;box-sizing:border-box;background:#faf9f7;border-bottom:1px solid #e7e2d9;font:500 12px Inter,system-ui,sans-serif;color:#6b7280;overflow:hidden;-webkit-app-region:drag;user-select:none}.dsh-td-bar[hidden]{display:none}html[data-platform="darwin"] .dsh-td-bar{padding-left:max(var(--dsh-frame-leading-clearance,0px),84px)}html[data-windows-titlebar] .dsh-td-bar{padding-right:calc(100% - env(titlebar-area-width,100%) + 16px)}.dsh-td-bar .dsh-td-brand{display:flex;align-items:center;gap:7px;color:#111827;font-weight:600;font-size:13px;white-space:nowrap}.dsh-td-bar .dsh-td-brand i{display:inline-block;width:8px;height:8px;border-radius:50%;background:#6d5dfc;box-shadow:0 -7px 0 #a99cff,0 7px 0 #f0a35a}.dsh-td-bar .dsh-td-switch{position:static;transform:none;-webkit-app-region:no-drag}.dsh-td-bar .dsh-td-title{min-width:0;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#6b7280}.dsh-td-overlay{position:fixed;z-index:100;inset:var(--dsh-frame-top-clearance,0px) 0 0 0;background:#faf9f7}.dsh-td-overlay[hidden]{display:none}.dsh-td-overlay iframe{display:block;width:100%;height:100%;border:0}'
-      document.head.append(style)
+      // The sheet is OWNED: the host's module loader claims every untagged
+      // <style> for whichever plugin is materializing at that moment and
+      // removes it again when that plugin is replaced or reloaded; untagged,
+      // this sheet went with a stranger and the overlay collapsed into the
+      // document flow (#70). data-plugin names the owner, data-plugin-css the
+      // sheet; and apply reuses what an earlier run left, so nothing doubles.
+      const CSS_ID = 'dsh-thoughtdag/client.css'
+      let style = document.head.querySelector(`style[data-plugin-css="${CSS_ID}"]`)
+      if (!style) {
+        style = document.createElement('style')
+        style.setAttribute('data-plugin', 'dsh-thoughtdag')
+        style.setAttribute('data-plugin-css', CSS_ID)
+        document.head.append(style)
+      }
+      // Panel mode: .dsh-td-page is the placeholder the host renders in its
+      // main column; on macOS it pads by the window's top strip (the host's
+      // own entry pages do the same) so the canvas toolbar never sits under
+      // the traffic lights. .dsh-td-overlay is the iframe's fixed layer, laid
+      // over the page by place() — no inset of its own.
+      // Fallback mode (no panel slot): the floating pill in the window's top
+      // strip, the macOS title band over the strip while the canvas is up
+      // (#39), the overlay filling the window below the strip.
+      style.textContent = '.dsh-td-page{display:block;width:100%;height:100%;min-height:100%;box-sizing:border-box}html[data-platform="darwin"] .dsh-td-page{padding-top:var(--dsh-frame-top-clearance,0px)}.dsh-td-overlay{position:fixed;z-index:100;background:#faf9f7}.dsh-td-overlay[hidden]{display:none}.dsh-td-overlay iframe{display:block;width:100%;height:100%;border:0}.dsh-td-overlay.dsh-td-full{inset:var(--dsh-frame-top-clearance,0px) 0 0 0}.dsh-td-switch{position:fixed;z-index:120;top:12px;left:60%;display:flex;align-items:center;gap:2px;transform:translateX(-50%);-webkit-app-region:no-drag;border:1px solid #d1d5db;border-radius:999px;background:rgba(255,255,255,.96);padding:3px;backdrop-filter:blur(10px)}.dsh-td-switch button{height:28px;border:0;border-radius:999px;background:transparent;padding:0 11px;color:#6b7280;font:600 12px Inter,system-ui,sans-serif;cursor:pointer;white-space:nowrap}.dsh-td-switch button:hover{background:#f3f4f6;color:#111827}.dsh-td-switch button.active{background:#111827;color:#fff}.dsh-td-switch .dsh-td-mark{display:inline-block;width:8px;height:8px;border-radius:50%;background:#6d5dfc;box-shadow:0 -7px 0 #a99cff,0 7px 0 #f0a35a;margin:0 6px 0 8px;flex:none}.dsh-td-switch[hidden]{display:none}html[data-platform] .dsh-td-switch,html[data-windows-titlebar] .dsh-td-switch{top:max(2px,calc((var(--dsh-frame-top-clearance,40px) - 36px) / 2))}.dsh-td-bar{position:fixed;z-index:121;top:0;left:0;right:0;height:var(--dsh-frame-top-clearance,0px);display:flex;align-items:center;gap:14px;padding:0 16px;box-sizing:border-box;background:#faf9f7;border-bottom:1px solid #e7e2d9;font:500 12px Inter,system-ui,sans-serif;color:#6b7280;overflow:hidden;-webkit-app-region:drag;user-select:none}.dsh-td-bar[hidden]{display:none}html[data-platform="darwin"] .dsh-td-bar{padding-left:max(var(--dsh-frame-leading-clearance,0px),84px)}html[data-windows-titlebar] .dsh-td-bar{padding-right:calc(100% - env(titlebar-area-width,100%) + 16px)}.dsh-td-bar .dsh-td-brand{display:flex;align-items:center;gap:7px;color:#111827;font-weight:600;font-size:13px;white-space:nowrap}.dsh-td-bar .dsh-td-brand i{display:inline-block;width:8px;height:8px;border-radius:50%;background:#6d5dfc;box-shadow:0 -7px 0 #a99cff,0 7px 0 #f0a35a}.dsh-td-bar .dsh-td-switch{position:static;transform:none;-webkit-app-region:no-drag}.dsh-td-bar .dsh-td-title{min-width:0;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#6b7280}'
 
-      const host = document.createElement('div')
-      host.innerHTML = '<div class="dsh-td-switch" role="group" aria-label="view switch"><i class="dsh-td-mark" title="ThoughtDAG"></i><button type="button" data-view="dialog" class="active" aria-pressed="true">对话</button><button type="button" data-view="map" aria-pressed="false">思维图</button></div><div class="dsh-td-bar" data-window-drag hidden><span class="dsh-td-brand"><i></i>ThoughtDAG</span><div class="dsh-td-switch" role="group" aria-label="view switch"><button type="button" data-view="dialog" aria-pressed="false">对话</button><button type="button" data-view="map" class="active" aria-pressed="true">思维图</button></div><span class="dsh-td-title"></span></div><section class="dsh-td-overlay" hidden><iframe title="ThoughtDAG" data-src="/thoughtdag/"></iframe></section>'
-      document.body.append(host)
+      let host = document.body.querySelector(':scope > [data-dsh-thoughtdag]')
+      if (!host) {
+        host = document.createElement('div')
+        host.setAttribute('data-dsh-thoughtdag', '')
+        document.body.append(host)
+      }
+      host.innerHTML = '<div class="dsh-td-switch" role="group" aria-label="view switch" hidden><i class="dsh-td-mark" title="ThoughtDAG"></i><button type="button" data-view="dialog" class="active" aria-pressed="true">对话</button><button type="button" data-view="map" aria-pressed="false">思维图</button></div><div class="dsh-td-bar" data-window-drag hidden><span class="dsh-td-brand"><i></i>ThoughtDAG</span><div class="dsh-td-switch" role="group" aria-label="view switch"><button type="button" data-view="dialog" aria-pressed="false">对话</button><button type="button" data-view="map" class="active" aria-pressed="true">思维图</button></div><span class="dsh-td-title"></span></div><section class="dsh-td-overlay" hidden><iframe title="ThoughtDAG" data-src="/thoughtdag/"></iframe></section>'
 
       // the plugin's version, for the canvas's update dialog and release history
       let pluginVersion = null
@@ -66,52 +88,139 @@ window.__ModuleLoader__.load({
       const switchEl = host.querySelector(':scope > .dsh-td-switch')
       const bar = host.querySelector('.dsh-td-bar')
       const barTitle = bar.querySelector('.dsh-td-title')
-      // the desktop host marks its root; the band exists only there, and only while the strip has height (not in native fullscreen)
+      const dialogBtn = host.querySelector('[data-view="dialog"]')
+      const mapBtn = host.querySelector('[data-view="map"]')
+      const overlay = host.querySelector('.dsh-td-overlay')
+      const frame = host.querySelector('iframe')
+      // the desktop host marks its root; the strip is the window's top band (not in native fullscreen)
       const desktop = () => document.documentElement.dataset.platform !== undefined || document.documentElement.hasAttribute('data-windows-titlebar')
       const strip = () => parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--dsh-frame-top-clearance')) || 0
+      const send = (type, payload) => frame.contentWindow?.postMessage({ source: 'dsh-thoughtdag', type, ...payload }, location.origin)
+      const syncCurrent = () => send('td:current-session', { session: currentSession() })
+      // the SPA boots on first open, never while hidden: a canvas that
+      // measures itself inside a display:none frame fits its view to a 0×0
+      // box and shows nothing when revealed
+      const ensureSrc = () => { if (!frame.src) frame.src = frame.dataset.src + (pluginVersion ? (frame.dataset.src.includes('?') ? '&' : '?') + 'dv=' + encodeURIComponent(pluginVersion) : '') }
+
+      // ── panel mode: the host's sidebar entry and main-column page ──
+      const PANEL_ID = 'thoughtdag'
+      const NS = 'dsh-thoughtdag'
+      let panelMode = false
+      // the page element while the panel is selected (null otherwise)
+      let pageEl = null
+      let pageObserver = null
+      const place = () => {
+        if (!pageEl) return
+        let box = pageEl
+        // the page fills its column; should a host give it no height, the
+        // nearest ancestor with one is the column
+        for (let i = 0; i < 3 && box.getBoundingClientRect().height < 40 && box.parentElement; i++) box = box.parentElement
+        const r = box.getBoundingClientRect()
+        const pad = box === pageEl ? parseFloat(getComputedStyle(pageEl).paddingTop) || 0 : 0
+        overlay.style.left = r.left + 'px'
+        overlay.style.top = (r.top + pad) + 'px'
+        overlay.style.width = r.width + 'px'
+        overlay.style.height = Math.max(0, r.height - pad) + 'px'
+      }
+      const openPanel = el => {
+        pageEl = el
+        ensureSrc()
+        overlay.classList.remove('dsh-td-full')
+        overlay.hidden = false
+        place()
+        pageObserver = new ResizeObserver(place)
+        pageObserver.observe(el)
+        if (el.parentElement) pageObserver.observe(el.parentElement)
+        syncCurrent()
+        // no band: the host's own column is the canvas's edge; the SPA shows its own switch
+        send('td:view', { shown: true, bar: false, desktop: desktop(), panel: true })
+        window.setTimeout(() => { if (pageEl) { syncCurrent(); send('td:view', { shown: true, bar: false, desktop: desktop(), panel: true }) } }, 400)
+      }
+      const closePanel = () => {
+        pageEl = null
+        pageObserver?.disconnect()
+        pageObserver = null
+        overlay.hidden = true
+        send('td:view', { shown: false, bar: false, desktop: desktop(), panel: true })
+      }
+      // set once the host has declared the panel slots and taken our entries; a
+      // host that never declares them (older harnesses) gets the fallback below
+      let registered = false
+      if (React && ctx.slots && ctx.layout && ctx.locale && typeof ctx.effect === 'function') {
+        try {
+          const h = React.createElement
+          // the three-dot mark, as the sidebar glyph
+          const PanelIcon = ({ size }) => h('svg', { width: size ?? 16, height: size ?? 16, viewBox: '0 0 16 16', 'aria-hidden': 'true' },
+            h('circle', { cx: 8, cy: 3, r: 2.2, fill: '#a99cff' }),
+            h('circle', { cx: 8, cy: 8, r: 2.2, fill: '#6d5dfc' }),
+            h('circle', { cx: 8, cy: 13, r: 2.2, fill: '#f0a35a' }))
+          // the page: a placeholder the iframe layer is laid over while mounted
+          const PanelPage = () => {
+            const ref = React.useRef(null)
+            React.useEffect(() => {
+              if (ref.current) openPanel(ref.current)
+              return () => closePanel()
+            }, [])
+            return h('div', { ref, className: 'dsh-td-page', 'data-td-page': '' })
+          }
+          ctx.effect(() => ctx.locale.register(NS, { zh: { panel: 'ThoughtDAG' }, en: { panel: 'ThoughtDAG' } }), 'dsh-thoughtdag: dictionaries')
+          const t = ctx.locale.bind(NS)
+          ctx.slots.inject('main', () => ctx.slots.register({ name: 'main', key: PANEL_ID, locale: NS, inject: () => ({}) }, PanelPage))
+          ctx.slots.inject('sidebar.panellist', () => { const dispose = ctx.slots.register({ name: 'sidebar.panellist', id: PANEL_ID, order: 30, locale: NS, label: () => t('panel') }, PanelIcon); registered = true; return dispose })
+          panelMode = true
+        } catch (error) {
+          console.warn('[dsh-thoughtdag] panel entry unavailable, using the floating switch:', error)
+          panelMode = false
+        }
+      }
+
+      // ── fallback mode: the floating pill and the full-window overlay ──
+      let spaReady = false
       // the band only on macOS: there the strip under the traffic lights is transparent and the host's session
       // header would show through the overlay (#39). On Windows the strip is the host's own chrome (its menu,
       // the caption buttons), opaque and above us; a band there painted over the host's menu (#55). With no
       // band the overlay starts below the chrome and the canvas shows its own switch.
-      const barUp = () => document.documentElement.dataset.platform === 'darwin' && strip() > 0
-      let spaReady = false
-      const dialogBtn = host.querySelector('[data-view="dialog"]')
-      const mapBtn = host.querySelector('[data-view="map"]')
-      const overlay = host.querySelector('.dsh-td-overlay')
-      const frame = host.querySelector('iframe')
-
+      const barUp = () => !panelMode && document.documentElement.dataset.platform === 'darwin' && strip() > 0
       const setView = map => {
         dialogBtn.classList.toggle('active', !map)
         dialogBtn.setAttribute('aria-pressed', String(!map))
         mapBtn.classList.toggle('active', map)
         mapBtn.setAttribute('aria-pressed', String(map))
       }
-      const close = () => { overlay.hidden = true; bar.hidden = true; switchEl.hidden = false; setView(false); send('td:view', { shown: false, bar: false, desktop: desktop() }) }
+      const closeFallback = () => { overlay.hidden = true; bar.hidden = true; switchEl.hidden = false; setView(false); send('td:view', { shown: false, bar: false, desktop: desktop() }) }
       const showBand = () => { bar.hidden = !barUp(); send('td:view', { shown: true, bar: !bar.hidden, desktop: desktop() }) }
-      window.addEventListener('resize', () => { if (!overlay.hidden) showBand() })
-      bar.querySelector('[data-view="dialog"]').addEventListener('click', () => close())
-      const send = (type, payload) => frame.contentWindow?.postMessage({ source: 'dsh-thoughtdag', type, ...payload }, location.origin)
-
-      const syncCurrent = () => {
-        const session = currentSession()
-        send('td:current-session', { session })
-      }
-
-      mapBtn.addEventListener('click', () => {
+      const openFallback = () => {
+        overlay.classList.add('dsh-td-full')
+        overlay.style.left = overlay.style.top = overlay.style.width = overlay.style.height = ''
         overlay.hidden = false
         setView(true)
         bar.hidden = !barUp()
         if (spaReady || !bar.hidden) switchEl.hidden = true
-        // the SPA boots on first open, never while hidden: a canvas that
-        // measures itself inside a display:none frame fits its view to a 0×0
-        // box and shows nothing when revealed
-        if (!frame.src) frame.src = frame.dataset.src + (pluginVersion ? (frame.dataset.src.includes('?') ? '&' : '?') + 'dv=' + encodeURIComponent(pluginVersion) : '')
+        ensureSrc()
         syncCurrent()
         showBand()
         // let the SPA boot, then re-sync so its listener is ready
         window.setTimeout(() => { syncCurrent(); showBand() }, 400)
-      })
-      dialogBtn.addEventListener('click', close)
+      }
+      let fallbackOn = false
+      const enableFallback = () => {
+        if (fallbackOn) return
+        fallbackOn = true
+        panelMode = false
+        switchEl.hidden = false
+        window.addEventListener('resize', () => { if (!overlay.hidden) showBand() })
+        bar.querySelector('[data-view="dialog"]').addEventListener('click', closeFallback)
+        mapBtn.addEventListener('click', openFallback)
+        dialogBtn.addEventListener('click', closeFallback)
+      }
+      if (!panelMode) enableFallback()
+      // the slot system takes registrations only once the host declares the
+      // slot; a host that has not declared sidebar.panellist within a moment
+      // of our apply has no panel list at all, so the floating switch returns
+      else window.setTimeout(() => { if (!registered) { console.warn('[dsh-thoughtdag] no sidebar panel list on this host, using the floating switch'); enableFallback() } }, 2500)
+
+      // back to the conversation: the host's own navigation in panel mode, the overlay's close otherwise
+      const close = () => { if (panelMode) { try { ctx.layout.selectPanel(null) } catch { closePanel() } } else closeFallback() }
 
       window.addEventListener('message', event => {
         if (event.origin !== location.origin || event.data?.source !== 'dsh-thoughtdag') return
@@ -132,12 +241,13 @@ window.__ModuleLoader__.load({
           return
         }
         if (event.data.type === 'td:request-current') {
-          // the SPA has booted and shows its own switch: the pill steps aside
+          // the SPA has booted and shows its own switch: in fallback mode the pill steps aside
           spaReady = true
-          if (!overlay.hidden) { switchEl.hidden = true; showBand() }
+          if (!panelMode && !overlay.hidden) { switchEl.hidden = true; showBand() }
+          if (panelMode && pageEl) send('td:view', { shown: true, bar: false, desktop: desktop(), panel: true })
           return syncCurrent()
         }
-        // the canvas names its project: the band shows it
+        // the canvas names its project: the band shows it (fallback mode only)
         if (event.data.type === 'td:title') { barTitle.textContent = typeof event.data.name === 'string' ? event.data.name : ''; return }
         // the canvas forked or continued a session: stage it and go back to the
         // chat, which now shows exactly the context the canvas produced

package/lib/index.js

@@ -81,6 +81,10 @@ export const inject = ['webServer', 'sessions', 'sessionController', 'agents', '
 const __dirname = fileURLToPath(new URL('.', import.meta.url))
 const require = createRequire(import.meta.url)
 const APP_DIR = resolve(__dirname, '../dist-app')
+// the path rules for the canvas's local backup (#66); the route below shells
+// this, and it is required HERE because the handler needs it in scope — inside
+// agentsHttp() it would be a function-local binding the handler cannot see
+const { writeBackup, BackupRequestError } = require(resolve(__dirname, 'runtime', 'backup-write.cjs'))
 
 // The plugin's own version travels into the canvas's URL (?dv=), so the
 // update dialog and the release history know which release runs here, as
@@ -422,7 +426,13 @@ function contentOf(body) {
   throw new HttpError(400, 'body needs text or blocks')
 }
 
-const SOURCE = { kind: 'plugin', plugin: 'dsh-thoughtdag' }
+// The attribution on every message this plugin injects. The kind is this
+// producer's OWN: the harness's v4 session format refuses the bare shared
+// literal 'plugin' (its validator throws "format v4 message requires a
+// producer-owned source kind" before the Session adopts the event, so the
+// targeted turn dies and nothing is persisted, #69); only the v3→v4 migration
+// ever rewrote it. scripts/test-inject-source.mjs holds this line to that rule.
+const SOURCE = { kind: 'plugin:dsh-thoughtdag', plugin: 'dsh-thoughtdag' }
 
 // ── the other agents' session files on this machine ────────────────────
 
@@ -1217,6 +1227,22 @@ export async function apply(ctx, config) {
         const body = req.method === 'POST' ? await readJson(req, MAX_WRITE_BODY_BYTES).catch(() => null) : null
         if (await agentsHttp().handle(req, res, path, body)) return
       }
+      // ── the canvas's local backup, written by THIS host (#66) ──
+      // The File System Access API needs a directory handle, and Chromium's own
+      // picker never returns inside the harness frame on Windows, so the canvas
+      // cannot write the file itself there. It keeps the absolute path the
+      // harness's own picker handed it and asks this endpoint to write instead.
+      // The path rules live in runtime/backup-write.cjs so they can be tested
+      // without a harness: scripts/test-backup-write.mjs.
+      if (path === '/backup' && req.method === 'POST') {
+        const body = await readJson(req, MAX_WRITE_BODY_BYTES).catch(() => null)
+        try {
+          return sendJson(res, 200, { file: await writeBackup(body) })
+        } catch (error) {
+          if (error instanceof BackupRequestError) return sendJson(res, 400, { error: error.message })
+          return sendJson(res, 500, { error: 'could not write the backup: ' + (error instanceof Error ? error.message : String(error)) })
+        }
+      }
       // ── model connection (the SPA's proxy protocol, on the harness's providers) ──
       if (path === '/models' && req.method === 'GET') return sendJson(res, 200, await modelsPayload(ctx, registeredProviders))
       // the canvas registers its browser-stored interfaces at boot (and after a change): the list answers with them in it

package/lib/runtime/backup-write.cjs

@@ -0,0 +1,56 @@
+// The canvas's local backup, written by the HOST (#66).
+//
+// The File System Access API needs a directory handle, and Chromium's own
+// picker never returns inside the harness frame on Windows — the canvas cannot
+// write the file itself there. So the canvas keeps the absolute path the
+// harness's own picker handed it and asks the host to write instead.
+//
+// This lives beside the agent runtimes rather than inline in the plugin, so the
+// path rules can be tested without a harness: scripts/test-backup-write.mjs.
+// Pure Node, no harness context.
+'use strict';
+const { mkdir, writeFile } = require('node:fs/promises');
+const { dirname, isAbsolute, resolve, sep } = require('node:path');
+
+/** An error the endpoint should report as 400 rather than 500. */
+class BackupRequestError extends Error {}
+
+/**
+ * Write one canvas backup under `dir`.
+ *
+ * @param {{ dir: unknown, name: unknown, json: unknown }} body the request body
+ * @returns {Promise<string>} the absolute file written
+ * @throws {BackupRequestError} when the request itself is not writable
+ */
+async function writeBackup(body) {
+  const dir = typeof body?.dir === 'string' ? body.dir : '';
+  const name = typeof body?.name === 'string' ? body.name : '';
+  const json = typeof body?.json === 'string' ? body.json : null;
+  // an absolute path is the whole safety property: a relative one would resolve
+  // against the plugin's cwd, which the canvas cannot know.
+  // isAbsolute, NOT resolve(dir).startsWith(sep) — on Windows a drive path
+  // starts with "C:" and would never match the separator, so that test refuses
+  // every real request there while passing on POSIX.
+  if (!dir || !isAbsolute(dir) || !name || json === null) {
+    throw new BackupRequestError('dir must be an absolute path; name and json are required');
+  }
+  // `name` is a RELATIVE path the canvas chose (native canvases at the folder
+  // root, session mirrors under cli/), so it is sanitized segment by segment
+  const parts = name.replace(/\\/g, '/').split('/').filter((p) => p && p !== '.' && p !== '..');
+  if (parts.length === 0) throw new BackupRequestError('name must have at least one path segment');
+  const last = parts[parts.length - 1].replace(/[<>:"|?*\u0000-\u001f]/g, '_').slice(0, 120);
+  if (!last) throw new BackupRequestError('name resolves to an empty file name');
+  const target = resolve(dir, ...parts.slice(0, -1), last);
+  // Belt and braces, and it has to agree with the gate above: compare against
+  // resolve(dir) — NOT resolve(dir) + sep, which would reject a Windows path
+  // for the same reason the startsWith(sep) test did.
+  const inside = resolve(dir);
+  if (target !== inside && !target.startsWith(inside.endsWith(sep) ? inside : inside + sep)) {
+    throw new BackupRequestError('name escapes the backup directory');
+  }
+  await mkdir(dirname(target), { recursive: true });
+  await writeFile(target, json, 'utf8');
+  return target;
+}
+
+module.exports = { writeBackup, BackupRequestError };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-thoughtdag",
-  "version": "0.5.17",
+  "version": "0.5.19",
   "description": "ThoughtDAG for DeepSeek Harness: turn the current DSH session into an editable thought graph on an infinite canvas. Source, releases and issues: github.com/chenxiachan/thoughtdag",
   "author": "Xia Chen",
   "repository": {

package/dist-app/assets/http-bridge-CeoNZsls.js

@@ -1 +0,0 @@
-import{I as f}from"./index-Bmw4g-fF.js";async function y(l){if(window.desktopAgents)return!0;const r=l.replace(/\/+$/,"");let i;try{const e=await fetch(r+"/agents/available",{credentials:"same-origin"});if(!e.ok)return!1;i=await e.json()}catch{return!1}const s=async(e,t)=>{const n=await fetch(r+e,{method:"POST",headers:{"Content-Type":"application/json"},credentials:"same-origin",body:JSON.stringify(t??{})});if(!n.ok)throw new Error(`${e}: ${n.status}`);return n.json()},c=[];let o=null;const d=()=>{o||(o=new EventSource(r+"/agents/events"),o.onmessage=e=>{try{const t=JSON.parse(e.data);for(const n of c)n(t)}catch{}})},w=f,g={nativePicker:w},p=()=>new Promise(e=>{if(!w)return e(null);const t=`cwd-${Date.now().toString(36)}-${Math.random().toString(36).slice(2,8)}`,n=u=>{const a=u.data;u.origin!==window.location.origin||a?.source!=="dsh-thoughtdag"||a.type!=="td:picked-cwd"||a.requestId!==t||(window.removeEventListener("message",n),a.unsupported&&(g.nativePicker=!1),e(typeof a.path=="string"&&a.path?a.path:null))};window.addEventListener("message",n),window.parent.postMessage({source:"dsh-thoughtdag",type:"td:pick-cwd",requestId:t},window.location.origin)});return window.desktopAgents={capabilities:g,available:async()=>i,models:async e=>(await fetch(r+"/agents/models"+(e?`?runtime=${encodeURIComponent(e)}`:""),{credentials:"same-origin"})).json(),run:async e=>(d(),(await s("/agents/run",e)).runId),abort:async e=>(await s("/agents/abort",{runId:e})).ok,answer:async(e,t,n)=>(await s("/agents/answer",{runId:e,requestId:t,response:n})).ok,workspace:async e=>(await s("/agents/workspace",{canvasId:e})).dir,pickCwd:()=>p(),guardWrite:async(e,t)=>(await s("/agents/guard",{cwd:e,config:t})).ok,writeMaterials:async(e,t)=>s("/agents/materials",{cwd:e,files:t}),onEvent:e=>{c.push(e),d()}},!0}export{y as installAgentsHttpBridge};