@wjj-8283/dsh-temp-workspace 0.1.0

package/src/client.js

@@ -0,0 +1,816 @@
+// @wjj-8283/dsh-temp-workspace — browser half SOURCE (editable).
+//
+// Three responsibilities:
+//   1. Inject a small icon button beside the sidebar's "Add workspace" (+)
+//      button. The workspace section header has no pluggable header-action
+//      slot, so (like dsh-workspace-auto-approval) we decorate the live DOM
+//      with a MutationObserver — React re-renders drop our node and the
+//      observer puts it back.
+//   2. Register a Settings -> Plugins card (settings.plugin.item, keyed by the
+//      settings namespace) that lets the user choose delete timing (immediate
+//      vs. delayed + a delay) and whether to confirm before deleting.
+//   3. On boot, if there are temporary workspaces held for confirmation and
+//      confirmBeforeDelete is on, show a confirm dialog before the host purges
+//      them. There is no generic "ask the human" API for a browser plugin, so
+//      this renders its own fixed-position overlay via a dedicated
+//      react-dom/client root (inline-styled, so it renders regardless of the
+//      app's CSS-module scope).
+//
+// Every data read/write rides the plugin's own fenced /temp-workspace/api route
+// (same idiom as dsh-workspace-auto-approval's /config contract). The host
+// holds the authoritative settings; the card just GETs/POSTs them.
+//
+// This file is plain CJS and is wrapped by ./build.mjs into a
+// window.__ModuleLoader__.load({ id, factory }) bundle at ./lib/client.js. In
+// that bundle `require` is the shell module loader, so react/react-dom/client
+// resolve without bundling.
+const react = require('react')
+const reactDOMClient = require('react-dom/client')
+
+const SETTINGS_NS = 'dsh-temp-workspace'
+
+const ICON_SVG =
+  '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:block;flex:none">' +
+  '<path d="M6 3h12M6 21h12" />' +
+  '<path d="M18 3v3a6 6 0 0 1-6 6 6 6 0 0 1-6-6V3" />' +
+  '<path d="M18 21v-3a6 6 0 0 0-6-6 6 6 0 0 0-6 6v3" />' +
+  '</svg>'
+
+// A "keep/pin" glyph for the permanent-keep row button.
+const KEEP_SVG =
+  '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:block;flex:none">' +
+  '<path d="M9 2h6M9 2v7l-3 4h12l-3-4V2" />' +
+  '<path d="M12 13v9" />' +
+  '</svg>'
+
+const ICON_CLASS = 'dsh-temp-workspace-icon'
+const BUTTON_CLASS = 'dsh-temp-workspace-button'
+const ADD_LABELS = ['Add workspace', '添加工作区']
+
+// Required cordis services: the browser workspace runtime (to open a New
+// Session in the created workspace), the slot registry (for the settings
+// card), and the locale seat (bilingual copy).
+const inject = ['workspaces', 'slots', 'locale']
+
+function apply(ctx) {
+  const workspaces = ctx.get ? ctx.get('workspaces') : ctx.workspaces
+  const slots = ctx.get ? ctx.get('slots') : ctx.slots
+  const locale = ctx.get ? ctx.get('locale') : ctx.locale
+
+  // Keep the module-level activeLocale in sync so every UI text follows the
+  // user's language, and re-render the decorated DOM on a locale switch.
+  const syncLocale = () => {
+    try { activeLocale = locale && locale.getLocale ? (locale.getLocale().active === 'en' ? 'en' : 'zh') : 'zh' } catch { activeLocale = 'zh' }
+  }
+  syncLocale()
+  if (locale && typeof locale.subscribe === 'function') {
+    ctx.effect(() => {
+      const off = locale.subscribe(() => {
+        syncLocale()
+        insertIcon()
+        injectRowButtons(true)
+      })
+      return () => { if (off) off() }
+    }, 'dsh-temp-workspace: locale sync')
+  }
+
+  // ── inject card/dialog CSS once ──────────────────────────────────────────
+  ctx.effect(() => injectStyle(), 'dsh-temp-workspace: styles')
+
+  // ── icon injection (unchanged from the first version) ────────────────────
+  let inserting = false
+  let scheduled = null
+
+  async function createTempWorkspace() {
+    try {
+      const res = await fetch('/temp-workspace/api/create', {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: '{}',
+      })
+      const parsed = (await res.json().catch(() => null)) || {}
+      if (!res.ok || parsed.ok !== true) {
+        throw new Error(parsed?.error?.message || `HTTP ${res.status}`)
+      }
+      const workspace = parsed.value?.workspace
+      if (workspace === undefined || workspace === null) {
+        throw new Error('create returned no workspace')
+      }
+      if (workspaces && typeof workspaces.refresh === 'function') {
+        await workspaces.refresh()
+      }
+      if (workspaces) workspaces.startSession(workspace.workspaceId)
+    } catch (error) {
+      console.error('[temp-workspace] create failed', error)
+    }
+  }
+
+  // ── native-delete hook (client half) ─────────────────────────────────────
+  // DSH's native workspace delete retains the directory and EVERY session log,
+  // so deleting a temp workspace from the sidebar would leave its conversations
+  // behind — they reappear as "Ungrouped" after the next boot. When the deleted
+  // workspace is one of our temp workspaces, route it through the plugin's own
+  // delete route, which reaps the conversations + throwaway dir + marker entry.
+  // The host-side registry hook does the same after a host restart; this client
+  // hook covers the running session (client code reloads on a page refresh).
+  if (workspaces && typeof workspaces.delete === 'function') {
+    const nativeDelete = workspaces.delete.bind(workspaces)
+    workspaces.delete = async (workspaceId) => {
+      const result = await nativeDelete(workspaceId)
+      try {
+        // Refresh the temp marker list first: the native delete removes the
+        // registry record but not the marker entry, so it will still be present
+        // (until either this hook or the host hook reaps it).
+        await fetchTempEntries()
+        if (tempEntries.some((entry) => entry.workspaceId === workspaceId)) {
+          await post('/temp-workspace/api/delete', { workspaceId })
+          if (workspaces && typeof workspaces.refresh === 'function') {
+            await workspaces.refresh()
+          }
+        }
+      } catch (error) {
+        console.error('[temp-workspace] delete cleanup failed', error)
+      }
+      return result
+    }
+  }
+
+  function findAddButton() {
+    const buttons = document.querySelectorAll('button')
+    for (const button of buttons) {
+      const label = button.getAttribute('aria-label')
+      if (label !== null && ADD_LABELS.includes(label)) return button
+    }
+    return null
+  }
+
+  function insertIcon() {
+    if (inserting) return
+    const add = findAddButton()
+    if (add === null) return
+    const container = add.parentElement
+    if (container !== null) {
+      container.style.maxWidth = 'none'
+      container.style.overflow = 'visible'
+    }
+    const title = localeText('iconTitle', 'Temporary workspace')
+    const next = add.nextElementSibling
+    if (next !== null && next.classList.contains(BUTTON_CLASS)) {
+      // Locale changed: refresh the existing button's accessible text.
+      next.setAttribute('aria-label', title)
+      next.setAttribute('title', title)
+      return
+    }
+
+    inserting = true
+    try {
+      const button = document.createElement('button')
+      button.type = 'button'
+      button.className = BUTTON_CLASS
+      button.setAttribute('aria-label', title)
+      button.setAttribute('title', title)
+      button.innerHTML =
+        '<span class="' + ICON_CLASS + '" aria-hidden="true">' + ICON_SVG + '</span>'
+      button.addEventListener('click', (event) => {
+        event.preventDefault()
+        event.stopPropagation()
+        void createTempWorkspace()
+      })
+      const dims = add.getBoundingClientRect()
+      const size = Math.max(dims.width, dims.height) || 28
+      button.style.width = size + 'px'
+      button.style.height = size + 'px'
+      button.style.display = 'inline-flex'
+      button.style.alignItems = 'center'
+      button.style.justifyContent = 'center'
+      button.style.flex = 'none'
+      button.style.padding = '0'
+      button.style.border = 'none'
+      button.style.background = 'transparent'
+      button.style.color = 'inherit'
+      button.style.cursor = 'pointer'
+      button.style.borderRadius = '50%'
+      button.style.marginLeft = '2px'
+      add.insertAdjacentElement('afterend', button)
+    } finally {
+      inserting = false
+    }
+  }
+
+  // ── per-row "permanent keep" button in temp workspace rows ────────────────
+  // A temp workspace renders as a normal workspace row (title "临时工作区") with
+  // a "+" (New Session) button in its hover actions. We inject a small permanent-
+  // keep button next to that "+" so the user can move a temp folder out of the
+  // temp area without going through the boot dialog. Temp workspaces share the
+  // title "临时工作区", which is how their rows are matched.
+  let tempEntries = [] // [{ workspaceId, path }] from /list, cached
+  let rowEntriesFetchedAt = 0
+
+  async function fetchTempEntries() {
+    try {
+      const res = await fetch('/temp-workspace/api/list', { method: 'GET' })
+      const parsed = (await res.json().catch(() => null)) || {}
+      const value = unwrapValue(parsed)
+      if (res.ok && parsed.ok === true && value && Array.isArray(value.entries)) {
+        tempEntries = value.entries.map((e) => ({ workspaceId: e.workspaceId, path: e.path }))
+      }
+    } catch (e) { /* ignore */ }
+  }
+
+  function injectRowButtons(force) {
+    // Refresh temp entries occasionally (or immediately when forced, e.g. on a
+    // locale switch) so newly created temp workspaces / re-renders are caught.
+    if (force || Date.now() - rowEntriesFetchedAt > 5000) {
+      rowEntriesFetchedAt = Date.now()
+      void fetchTempEntries()
+    }
+    if (tempEntries.length === 0) return
+    // All temp workspaces share the title "临时工作区", so the temp-titled rows
+    // correspond 1:1 (in registry/DOM order) to the marker entries. Inject the
+    // permanent-keep button next to each temp row's New Session (+).
+    const keepTitle = localeText('keepTitle', 'Keep permanently (move out of temp)')
+    const keepAria = localeText('keepAria', 'Keep permanently')
+    const rows = document.querySelectorAll('[role="treeitem"]')
+    const tempRows = []
+    for (const row of rows) {
+      // A workspace row's own title lives in its projectText block; a session
+      // row's title is also classed "title", so scope to the project text.
+      const projText = row.querySelector('[class*="projectText"]')
+      const titleEl = projText !== null ? projText.querySelector('[class*="title"]') : null
+      const title = titleEl !== null ? (titleEl.textContent || '').trim() : ''
+      if (title === '临时工作区') tempRows.push(row)
+    }
+    for (let i = 0; i < tempRows.length && i < tempEntries.length; i += 1) {
+      const row = tempRows[i]
+      const entry = tempEntries[i]
+      const actions = row.querySelector('[class*="rowActions"]')
+      if (actions === null) continue
+      const existing = actions.querySelector('.dsh-temp-workspace-keep')
+      if (existing !== null) {
+        // Locale changed: refresh the existing button's accessible text.
+        existing.setAttribute('aria-label', keepAria)
+        existing.setAttribute('title', keepTitle)
+        continue
+      }
+      const plus = row.querySelector('button[aria-label*="新建会话"], button[aria-label*="New session"]') || row.querySelector('button')
+      const btn = document.createElement('button')
+      btn.type = 'button'
+      btn.className = 'dsh-temp-workspace-keep'
+      btn.setAttribute('aria-label', keepAria)
+      btn.setAttribute('title', keepTitle)
+      btn.innerHTML = KEEP_SVG
+      btn.addEventListener('click', (event) => {
+        event.preventDefault()
+        event.stopPropagation()
+        void doPermanentKeep(entry.workspaceId)
+      })
+      const dims = plus ? plus.getBoundingClientRect() : null
+      const size = Math.max(dims ? dims.width : 16, dims ? dims.height : 16) || 16
+      btn.style.width = size + 'px'
+      btn.style.height = size + 'px'
+      btn.style.display = 'inline-flex'
+      btn.style.alignItems = 'center'
+      btn.style.justifyContent = 'center'
+      btn.style.flex = 'none'
+      btn.style.padding = '0'
+      btn.style.border = 'none'
+      btn.style.background = 'transparent'
+      btn.style.color = 'inherit'
+      btn.style.cursor = 'pointer'
+      btn.style.borderRadius = '4px'
+      btn.style.marginLeft = '2px'
+      actions.appendChild(btn)
+    }
+  }
+
+  function schedule() {
+    if (scheduled !== null) return
+    scheduled = requestAnimationFrame(() => {
+      scheduled = null
+      insertIcon()
+      injectRowButtons()
+    })
+  }
+
+  const observer = new MutationObserver(schedule)
+  observer.observe(document.body, { childList: true, subtree: true })
+  insertIcon()
+
+  // Fetch temp entries and inject row buttons once on boot (and refresh via the
+  // observer/5s debounce once the sidebar re-renders).
+  void fetchTempEntries().then(() => injectRowButtons())
+
+  // ── boot confirm popup ───────────────────────────────────────────────────
+  // Ask the host once whether any temp workspace is held for confirmation. If
+  // yes (and the setting is on), render a Modal with Delete / Keep. This keeps
+  // the marker durable: an unanswered dialog leaves the workspaces intact for
+  // the next boot.
+  const disposers = []
+
+  let confirmOpen = false
+  let bootAnswered = false
+
+  async function confirmPending() {
+    // Once the user has answered the boot prompt (keep/delete/permanent-keep),
+    // never re-open it for the rest of this page session.
+    if (bootAnswered) return
+    try {
+      const res = await fetch('/temp-workspace/api/pending', { method: 'GET' })
+      const parsed = (await res.json().catch(() => null)) || {}
+      if (!res.ok || parsed.ok !== true) throw new Error(parsed?.error?.message || `HTTP ${res.status}`)
+      // The route wraps the handler result as { ok, value }; some host builds
+      // nested it one level deeper, so unwrap defensively.
+      const value = unwrapValue(parsed)
+      if (!value || value.pendingCount <= 0) return
+      if (value.confirmBeforeDelete !== true) return
+
+      // Wait for the delayed deletion window before prompting, so the user
+      // still has the configured grace period to avert the popup.
+      const waitMs = Math.max(0, (value.deleteAt ?? 0) - Date.now())
+      if (waitMs > 0) {
+        setTimeout(() => { void confirmPending() }, Math.min(waitMs, 60_000))
+        return
+      }
+      // Only one confirm overlay at a time — the boot retries can otherwise
+      // stack a second dialog next to the first.
+      if (confirmOpen) return
+      confirmOpen = true
+      renderConfirm(value)
+    } catch (error) {
+      console.error('[temp-workspace] confirmPending failed', error)
+    }
+  }
+
+  function renderConfirm(value) {
+    const count = value?.pendingCount ?? value?.pending?.length ?? 0
+    const names = (value?.pending ?? [])
+      .map((p) => (p.path ? String(p.path).split(/[/\\]/).filter(Boolean).pop() : p.workspaceId))
+      .filter(Boolean)
+
+    const body = names.length > 0
+      ? react.createElement('ul', { style: { margin: '0 0 0 18px', padding: 0 } },
+          names.map((n) => react.createElement('li', { key: n, style: { fontSize: 12, lineHeight: 1.7 } }, n)))
+      : null
+
+    const dialog = mountDialog({
+      title: localeText('confirmTitle', 'Temporary workspaces pending'),
+      description: localeText('confirmDesc', `${count} temporary workspace(s) will be deleted together with their conversations unless you keep them.`, { n: count }),
+      onMask: () => { bootAnswered = true; dialog.close(); void post('/temp-workspace/api/keep') },
+      onClose: () => { confirmOpen = false },
+      buttons: [
+        { label: localeText('tmpKeep', 'Keep temporarily'), onClick: () => { bootAnswered = true; dialog.close(); void post('/temp-workspace/api/keep') } },
+        { label: localeText('delete', 'Delete'), primary: true, onClick: () => { bootAnswered = true; dialog.close(); void post('/temp-workspace/api/confirm') } },
+      ],
+      children: body,
+    }, { autoFocusFirst: true })
+  }
+
+  // Permanent keep for one temp workspace: pick the destination folder, then ask
+  // the host to move that workspace's files in and de-temp it.
+  const doPermanentKeep = async (workspaceId) => {
+    if (!workspaces || typeof workspaces.pickDirectory !== 'function') {
+      console.error('[temp-workspace] pickDirectory unavailable')
+      return
+    }
+    try {
+      const target = await workspaces.pickDirectory()
+      if (target === null || target === undefined || target === '') return
+      const payload = workspaceId !== undefined ? { target, workspaceId } : { target }
+      const ok = await post('/temp-workspace/api/permanentKeep', payload)
+      if (ok) { mountRestartNotice(); return }
+      console.error('[temp-workspace] permanent keep failed')
+    } catch (error) {
+      console.error('[temp-workspace] permanent keep failed', error)
+    }
+  }
+
+  // A short success dialog after a permanent keep, suggesting a restart.
+  function mountRestartNotice() {
+    // Non-dismissible: the user must restart for the migration to take effect,
+    // so the only action is "Restart now" — a real host restart.
+    mountDialog({
+      title: localeText('movedTitle', 'Workspace moved'),
+      description: localeText('movedDesc', 'The workspace(s) were moved out of the temporary area and are now permanent. For the migrated conversations to appear under the new workspace, restart the Harness now.'),
+      dismissible: false,
+      buttons: [
+        {
+          label: localeText('restartNow', 'Restart now'),
+          primary: true,
+          onClick: () => {
+            // Real host-level restart (detached helper respawns the DSH entry),
+            // not just a page reload — so the registry re-indexes.
+            void fetch('/temp-workspace/api/restart', { method: 'POST', headers: { 'content-type': 'application/json' }, body: '{}' })
+              .catch((error) => console.error('[temp-workspace] restart failed', error))
+          },
+        },
+      ],
+    })
+  }
+
+  async function post(url, payload) {
+    try {
+      const res = await fetch(url, {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify(payload ?? {}),
+      })
+      const parsed = (await res.json().catch(() => null)) || {}
+      return res.ok && parsed.ok === true
+    } catch (error) {
+      console.error('[temp-workspace] ' + url + ' failed', error)
+      return false
+    }
+  }
+
+  void confirmPending()
+
+  // Re-check a few times after the first tick in case the host registers the
+  // pending set asynchronously (settings registration awaits the loader import
+  // and can outlive the client's first poll). confirmPending re-shows the popup
+  // only once, so an early empty read is harmless; these retries close the gap.
+  const RETRY_DELAYS = [1500, 3000, 6000, 12000]
+  const retries = RETRY_DELAYS.map((delay) => setTimeout(() => { void confirmPending() }, delay))
+  disposers.push(() => { for (const t of retries) clearTimeout(t) })
+
+  // ── Settings -> Plugins card ────────────────────────────────────────────
+  // Self-contained React card, keyed by the settings namespace, reading and
+  // writing its own settings via the host route (identical to the auto-approval
+  // card). It manages state directly rather than through the tab's inject face.
+  const SETTINGS_LIMIT = 24 * 3600 // max delay seconds (24h)
+
+  function SettingsCard() {
+    const [open, setOpen] = react.useState(false)
+    const [state, setState] = react.useState({
+      deleteMode: 'immediate',
+      deleteDelay: 3600,
+      confirmBeforeDelete: true,
+      loading: true,
+      saving: false,
+      status: '',
+    })
+
+    react.useEffect(() => {
+      let alive = true
+      fetch('/temp-workspace/api/config', { method: 'GET' })
+        .then((response) => response.json())
+        .then((data) => {
+          if (!alive) return
+          const v = unwrapValue(data)
+          setState((current) => ({
+            ...current,
+            loading: false,
+            deleteMode: v?.deleteMode ?? current.deleteMode,
+            deleteDelay: Number.isFinite(Number(v?.deleteDelay)) ? Number(v.deleteDelay) : current.deleteDelay,
+            confirmBeforeDelete: v?.confirmBeforeDelete ?? current.confirmBeforeDelete,
+            status: data && data.ok === true ? '' : localeText('loadFail', 'Load failed'),
+          }))
+        })
+        .catch(() => { if (alive) setState((current) => ({ ...current, loading: false, status: localeText('loadFail', 'Load failed') })) })
+
+      const off = locale && typeof locale.subscribe === 'function'
+        ? locale.subscribe(() => setState((current) => ({ ...current, revision: (current.revision || 0) + 1 })))
+        : null
+      return () => { alive = false; if (off) off() }
+    }, [])
+
+    const busy = state.loading || state.saving
+    const valid = state.deleteMode === 'immediate' || state.deleteMode === 'delayed'
+    const delayText = String(state.deleteDelay)
+
+    const update = (patch, successText) => {
+      setState((current) => ({ ...current, saving: true, status: localeText('saving', 'Saving…') }))
+      fetch('/temp-workspace/api/config', {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify(patch),
+      })
+        .then((response) => response.json())
+        .then((data) => {
+          const v = unwrapValue(data)
+          setState((current) => ({
+            ...current,
+            saving: false,
+            status: data && data.ok === true ? successText : ((data && data.error) || localeText('saveFail', 'Save failed')),
+            deleteMode: v?.deleteMode ?? current.deleteMode,
+            deleteDelay: Number.isFinite(Number(v?.deleteDelay)) ? Number(v.deleteDelay) : current.deleteDelay,
+            confirmBeforeDelete: v?.confirmBeforeDelete ?? current.confirmBeforeDelete,
+          }))
+        })
+        .catch(() => setState((current) => ({ ...current, saving: false, status: localeText('saveFail', 'Save failed') })))
+    }
+
+    const reset = () => updateAnyReset()
+
+    const updateAnyReset = () => {
+      setState((current) => ({ ...current, saving: true, status: localeText('saving', 'Saving…') }))
+      fetch('/temp-workspace/api/configReset', {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: '{}',
+      })
+        .then((response) => response.json())
+        .then((data) => {
+          const v = unwrapValue(data)
+          setState((current) => ({
+            ...current,
+            saving: false,
+            status: data && data.ok === true ? localeText('restored', 'Defaults restored') : ((data && data.error) || localeText('saveFail', 'Save failed')),
+            deleteMode: v?.deleteMode ?? 'immediate',
+            deleteDelay: Number.isFinite(Number(v?.deleteDelay)) ? Number(v.deleteDelay) : 3600,
+            confirmBeforeDelete: v?.confirmBeforeDelete ?? true,
+          }))
+        })
+        .catch(() => setState((current) => ({ ...current, saving: false, status: localeText('saveFail', 'Save failed') })))
+    }
+
+    return react.createElement('div', { className: cardCss },
+      react.createElement('button', { type: 'button', className: headCss, onClick: () => setOpen((value) => !value) },
+        react.createElement('span', { className: headTextCss },
+          react.createElement('span', { className: nameCss }, localeText('name', 'Temporary Workspace')),
+          react.createElement('span', { className: descCss }, localeText('desc', 'When and whether temp workspaces are deleted after a restart'))),
+        react.createElement('span', { className: chevronCss + (open ? ' ' + chevronOpenCss : '') }, '▾')),
+      open ? react.createElement('div', { className: bodyCss },
+        react.createElement('fieldset', { className: fieldsetCss },
+          react.createElement('legend', { className: labelCss }, localeText('deleteModeLabel', 'Delete after restart')),
+          react.createElement('label', { className: radioCss },
+            react.createElement('input', { type: 'radio', name: 'tw-delete-mode', value: 'immediate', checked: state.deleteMode === 'immediate', disabled: busy, onChange: () => setState((current) => ({ ...current, deleteMode: 'immediate', status: '' })) }),
+            react.createElement('span', null, localeText('modeImmediate', 'Delete immediately'))),
+          react.createElement('label', { className: radioCss },
+            react.createElement('input', { type: 'radio', name: 'tw-delete-mode', value: 'delayed', checked: state.deleteMode === 'delayed', disabled: busy, onChange: () => setState((current) => ({ ...current, deleteMode: 'delayed', status: '' })) }),
+            react.createElement('span', null, localeText('modeDelayed', 'Delete after a delay'))),
+          state.deleteMode === 'delayed'
+            ? react.createElement('label', { className: delayCss },
+                react.createElement('span', null, localeText('delayLabel', 'Delay (seconds)')),
+                react.createElement('input', {
+                  type: 'number',
+                  min: 0,
+                  max: SETTINGS_LIMIT,
+                  value: delayText,
+                  disabled: busy,
+                  onChange: (event) => setState((current) => ({ ...current, deleteDelay: Number(event.target.value) || 0, status: '' })),
+                }))
+            : null),
+        react.createElement('label', { className: toggleCss },
+          react.createElement('input', { type: 'checkbox', checked: state.confirmBeforeDelete, disabled: busy, onChange: (event) => setState((current) => ({ ...current, confirmBeforeDelete: event.target.checked, status: '' })) }),
+          react.createElement('span', null, localeText('confirmLabel', 'Confirm before deleting'))),
+        react.createElement('div', { className: helpCss }, localeText('confirmHelp', 'When on, a dialog asks before a held temp workspace is removed on the next restart.')),
+        react.createElement('div', { className: actionsCss },
+          react.createElement('button', { type: 'button', className: btnCss, disabled: busy || !valid, onClick: () => update({ deleteMode: state.deleteMode, deleteDelay: state.deleteDelay, confirmBeforeDelete: state.confirmBeforeDelete }, localeText('saved', 'Saved')) }, localeText('save', 'Save')),
+          react.createElement('button', { type: 'button', className: btnCss, disabled: busy, onClick: reset }, localeText('reset', 'Restore defaults'))),
+        state.status ? react.createElement('div', { className: statusCss }, state.status) : null)
+      : null)
+  }
+
+  if (slots) {
+    ctx.effect(() => slots.inject('settings.plugin.item', () => slots.register({
+      name: 'settings.plugin.item',
+      key: SETTINGS_NS,
+      id: 'dsh-temp-workspace-settings',
+      label: localeText('name', 'Temporary Workspace'),
+    }, SettingsCard)), 'dsh-temp-workspace: settings card')
+  }
+
+  // ── cleanup on plugin unload ────────────────────────────────────────────
+  return () => {
+    observer.disconnect()
+    if (scheduled !== null) cancelAnimationFrame(scheduled)
+    for (const dispose of disposers) { try { dispose() } catch { /* noop */ } }
+    const node = document.querySelector('.' + BUTTON_CLASS)
+    if (node !== null) node.remove()
+  }
+}
+
+// ── lightweight inline-styled dialog (no dependency on primitives CSS) ──────
+// Renders a fixed, centered overlay + dialog box through its own react-dom root
+// so it shows regardless of the app's CSS-module scope. Returns `{ close }`.
+function mountDialog(options, settings) {
+  const host = document.createElement('div')
+  host.style.position = 'fixed'
+  host.style.inset = '0'
+  host.style.zIndex = '2147483000'
+  host.style.display = 'flex'
+  host.style.alignItems = 'center'
+  host.style.justifyContent = 'center'
+  host.style.padding = '24px'
+  host.style.fontFamily = 'var(--dsw-font-family, sans-serif)'
+  document.body.appendChild(host)
+
+  const root = reactDOMClient.createRoot(host)
+  const dismissible = options.dismissible !== false
+  let closed = false
+  const close = () => {
+    if (closed) return
+    closed = true
+    // Remove the Escape listener once closed.
+    if (onKey) window.removeEventListener('keydown', onKey)
+    root.unmount()
+    host.remove()
+    if (options.onClose) { try { options.onClose() } catch { /* noop */ } }
+  }
+  // Non-dismissible dialogs only close via an explicit button (onClick). Mask
+  // click and Escape are ignored so the user must act.
+  const onKey = (e) => { if (e.key === 'Escape' && dismissible) close() }
+  window.addEventListener('keydown', onKey)
+
+  const maskStyle = {
+    position: 'absolute', inset: '0',
+    background: 'rgba(0,0,0,0.5)',
+    backdropFilter: 'blur(2px)',
+  }
+  const panelStyle = {
+    position: 'relative',
+    maxWidth: '440px',
+    width: '100%',
+    maxHeight: '80vh',
+    overflow: 'auto',
+    background: 'var(--dsw-alias-bg-layer-3, #1f1f1f)',
+    border: '1px solid var(--dsw-alias-border-l2, rgba(128,128,128,0.3))',
+    borderRadius: '14px',
+    boxShadow: '0 16px 48px rgba(0,0,0,0.4)',
+    padding: '18px 20px',
+    color: 'var(--dsw-alias-label-primary, #eee)',
+  }
+  const btnBase = {
+    height: '32px',
+    border: '1px solid var(--dsw-alias-border-l2, rgba(128,128,128,0.3))',
+    borderRadius: '8px',
+    background: 'transparent',
+    color: 'var(--dsw-alias-label-secondary, #ccc)',
+    fontSize: '13px',
+    padding: '0 14px',
+    cursor: 'pointer',
+  }
+  const primaryBtn = { ...btnBase, background: 'var(--dsw-alias-state-business-primary, #3d9be9)', color: '#fff', border: 'none' }
+
+  root.render(
+    react.createElement('div', null,
+      react.createElement('div', { style: maskStyle, onClick: (ev) => { if (ev.target === ev.currentTarget && dismissible && options.onMask) options.onMask() } }),
+      react.createElement('div', { role: 'dialog', 'aria-modal': 'true', style: panelStyle },
+        options.title ? react.createElement('div', { style: { fontSize: 16, fontWeight: 600, marginBottom: 8 } }, options.title) : null,
+        options.description ? react.createElement('div', { style: { fontSize: 13, lineHeight: 1.6, color: 'var(--dsw-alias-label-tertiary, #aaa)' } }, options.description) : null,
+        options.children ? react.createElement('div', { style: { marginTop: 10 } }, options.children) : null,
+        react.createElement('div', { style: { display: 'flex', gap: 8, justifyContent: 'flex-end', marginTop: 16, flexWrap: 'wrap' } },
+          (options.buttons || []).map((button, i) =>
+            react.createElement('button', {
+              key: i,
+              type: 'button',
+              autoFocus: !!(settings?.autoFocusFirst && i === 0),
+              disabled: !!button.disabled,
+              style: button.primary ? primaryBtn : { ...btnBase, ...(button.disabled ? { opacity: 0.45, cursor: 'default' } : {}) },
+              onClick: () => { if (button.onClick) button.onClick() },
+            }, button.label))),
+      ),
+    )
+  )
+
+  return { close }
+}
+
+// Unwrap the wire envelope: { ok: true, value: X } or the double-nested
+// { ok: true, value: { ok: true, value: X } } some host builds returned.
+function unwrapValue(data) {
+  if (!data || data.ok !== true) return null
+  let value = data.value
+  if (value && typeof value === 'object' && value.ok === true && 'value' in value) value = value.value
+  return value
+}
+
+// ── CSS injection (card + modal) ────────────────────────────────────────────
+let styleInjected = false
+function injectStyle() {
+  if (styleInjected) return
+  styleInjected = true
+  const style = document.createElement('style')
+  style.dataset.plugin = SETTINGS_NS
+  style.textContent = [
+    // settings card, matching the framework's dsw-alias design tokens
+    '.dsh-temp-workspace-card{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-3);border-radius:12px;overflow:hidden}',
+    '.dsh-temp-workspace-head{appearance:none;width:100%;font:inherit;color:inherit;text-align:left;cursor:pointer;background:transparent;border:0;display:flex;align-items:center;gap:12px;padding:14px 16px}',
+    '.dsh-temp-workspace-head-text{display:flex;flex:1;min-width:0;flex-direction:column;gap:4px}',
+    '.dsh-temp-workspace-name{color:var(--dsw-alias-label-primary);font-size:15px;font-weight:600;line-height:1.4}',
+    '.dsh-temp-workspace-desc{color:var(--dsw-alias-label-tertiary);font-size:13px;line-height:1.5}',
+    '.dsh-temp-workspace-chevron{color:var(--dsw-alias-label-tertiary);flex:none;transition:transform .16s}',
+    '.dsh-temp-workspace-chevron-open{transform:rotate(180deg)}',
+    '.dsh-temp-workspace-body{border-top:1px solid var(--dsw-alias-border-l2);padding:14px 16px;display:flex;flex-direction:column;gap:14px}',
+    '.dsh-temp-workspace-fieldset{border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}',
+    '.dsh-temp-workspace-label{color:var(--dsw-alias-label-primary);font-size:13px;font-weight:600}',
+    '.dsh-temp-workspace-radio{display:flex;align-items:center;gap:8px;color:var(--dsw-alias-label-secondary);font-size:12px;cursor:pointer}',
+    '.dsh-temp-workspace-delay{display:flex;align-items:center;gap:10px;color:var(--dsw-alias-label-secondary);font-size:12px}',
+    '.dsh-temp-workspace-delay input{width:110px;box-sizing:border-box;border:1px solid var(--dsw-alias-border-l2);border-radius:7px;background:var(--dsw-alias-bg-module-platform);color:var(--dsw-alias-label-primary);font:inherit;padding:6px 10px}',
+    '.dsh-temp-workspace-toggle{display:flex;align-items:center;gap:8px;color:var(--dsw-alias-label-secondary);font-size:12px;cursor:pointer}',
+    '.dsh-temp-workspace-help{color:var(--dsw-alias-label-tertiary);font-size:11px;line-height:1.5}',
+    '.dsh-temp-workspace-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}',
+    '.dsh-temp-workspace-btn{height:30px;border:1px solid var(--dsw-alias-border-l2);border-radius:7px;background:transparent;color:var(--dsw-alias-label-secondary);font-size:12px;padding:0 12px;cursor:pointer}',
+    '.dsh-temp-workspace-btn:hover:not(:disabled){color:var(--dsw-alias-label-primary);background:var(--dsw-alias-interactive-bg-hover)}',
+    '.dsh-temp-workspace-btn:disabled{opacity:.45;cursor:default}',
+    '.dsh-temp-workspace-status{color:var(--dsw-alias-label-secondary);font-size:11px}',
+  ].join('')
+  document.head.appendChild(style)
+}
+
+// ── locale helper (zh/en dictionaries; follows the active locale) ───────────
+// The active locale comes from ctx.locale (getLocale().active); kept in a
+// module-level var that a locale subscription refreshes, so every UI text
+// rendered through localeText follows the user's language. English is the
+// fallback when the active-locale key is missing.
+let activeLocale = 'zh' // 'zh' | 'en'; synced from ctx.locale
+
+function activeLang(localeRef) {
+  try {
+    const id = (localeRef !== undefined ? localeRef.getLocale().active : activeLocale)
+    return id === 'en' ? 'en' : 'zh'
+  } catch { return 'zh' }
+}
+
+function localeText(key, fallbackEn, vars, localeRef) {
+  const lang = activeLang(localeRef)
+  const dict = lang === 'en' ? enLocale : zhLocale
+  // Fall back to English (the dictionary consulted after the active locale
+  // misses a key), then to the caller's fallback.
+  let text = dict[key] || enLocale[key] || fallbackEn
+  if (vars) for (const [name, value] of Object.entries(vars)) {
+    text = text.replace(new RegExp('\\{' + name + '\\}', 'g'), String(value))
+  }
+  return text
+}
+
+const zhLocale = {
+  name: '临时工作区',
+  desc: '重启后何时、以及是否先确认再删除临时工作区',
+  deleteModeLabel: '重启后何时删除',
+  modeImmediate: '立即删除',
+  modeDelayed: '延迟一段时间后删除',
+  delayLabel: '延迟（秒）',
+  confirmLabel: '删除前确认',
+  confirmHelp: '开启后，下次重启会先弹窗询问，确认后才删除临时工作区。',
+  save: '保存',
+  saved: '已保存',
+  reset: '恢复默认',
+  restored: '已恢复默认',
+  saving: '保存中…',
+  saveFail: '保存失败',
+  loadFail: '读取失败',
+  confirmTitle: '临时工作区待处理',
+  confirmDesc: '有 {n} 个临时工作区：若删除，其中的对话也会一并删除。',
+  delete: '删除',
+  keep: '保留',
+  tmpKeep: '临时保留',
+  close: '关闭',
+  movedTitle: '工作区已移动',
+  movedDesc: '这些工作区已移出临时区域并转为永久工作区。为了让迁移的对话在新工作区下显示，请立即重启 Harness。',
+  restartNow: '立即重启',
+  iconTitle: '临时工作区',
+  keepTitle: '永久保留（移出临时区）',
+  keepAria: '永久保留',
+}
+
+const enLocale = {
+  name: 'Temporary Workspace',
+  desc: 'When and whether temp workspaces are deleted after a restart',
+  deleteModeLabel: 'Delete after a restart',
+  modeImmediate: 'Delete immediately',
+  modeDelayed: 'Delete after a delay',
+  delayLabel: 'Delay (seconds)',
+  confirmLabel: 'Confirm before deleting',
+  confirmHelp: 'When on, a dialog asks before a held temp workspace is removed on the next restart.',
+  save: 'Save',
+  saved: 'Saved',
+  reset: 'Restore defaults',
+  restored: 'Defaults restored',
+  saving: 'Saving…',
+  saveFail: 'Save failed',
+  loadFail: 'Load failed',
+  confirmTitle: 'Temporary workspaces pending',
+  confirmDesc: '{n} temporary workspace(s) will be deleted together with their conversations unless you keep them.',
+  delete: 'Delete',
+  keep: 'Keep',
+  tmpKeep: 'Keep temporarily',
+  close: 'Close',
+  movedTitle: 'Workspace moved',
+  movedDesc: 'The workspace(s) were moved out of the temporary area and are now permanent. For the migrated conversations to appear under the new workspace, restart the Harness now.',
+  restartNow: 'Restart now',
+  iconTitle: 'Temporary workspace',
+  keepTitle: 'Keep permanently (move out of temp)',
+  keepAria: 'Keep permanently',
+}
+
+// ── inline CSS (class strings for the card, keyed off the sidebars' css vars) ──
+const cardCss = 'dsh-temp-workspace-card'
+const headCss = 'dsh-temp-workspace-head'
+const headTextCss = 'dsh-temp-workspace-head-text'
+const nameCss = 'dsh-temp-workspace-name'
+const descCss = 'dsh-temp-workspace-desc'
+const chevronCss = 'dsh-temp-workspace-chevron'
+const chevronOpenCss = 'dsh-temp-workspace-chevron-open'
+const bodyCss = 'dsh-temp-workspace-body'
+const fieldsetCss = 'dsh-temp-workspace-fieldset'
+const labelCss = 'dsh-temp-workspace-label'
+const radioCss = 'dsh-temp-workspace-radio'
+const delayCss = 'dsh-temp-workspace-delay'
+const toggleCss = 'dsh-temp-workspace-toggle'
+const helpCss = 'dsh-temp-workspace-help'
+const actionsCss = 'dsh-temp-workspace-actions'
+const btnCss = 'dsh-temp-workspace-btn'
+const statusCss = 'dsh-temp-workspace-status'
+
+module.exports = { inject, apply }