dsh-remote-plugin 0.6.14 → 0.6.16

package/public/motion.js

@@ -0,0 +1,469 @@
+/* dsh-Remote motion layer: GSAP core + timeline, with reduced-motion and low-cost DOM updates. */
+(function () {
+  'use strict'
+
+  const gsap = window.gsap
+  if (!gsap) return
+
+  const reduceQuery = window.matchMedia?.('(prefers-reduced-motion: reduce)')
+  let reduced = !!reduceQuery?.matches
+  reduceQuery?.addEventListener?.('change', event => { reduced = !!event.matches })
+  const activePulses = new WeakSet()
+
+  function clear(targets) {
+    gsap.set(targets, { clearProps: 'opacity,visibility,transform,willChange' })
+  }
+
+  function motionKey(node) {
+    return node?.dataset?.motionKey || node?.dataset?.id || node?.dataset?.sessionSwipe || node?.dataset?.wbSession || node?.textContent?.slice(0, 80) || ''
+  }
+
+  function motionSignature(items) {
+    return items.map(motionKey).join('|')
+  }
+
+  function view(view) {
+    if (!view) return
+    const children = [...view.children].filter(child => !child.classList.contains('hidden')).slice(0, 6)
+    gsap.killTweensOf([view, ...children])
+    if (reduced) {
+      clear([view, ...children])
+      return
+    }
+    const tl = gsap.timeline({ defaults: { ease: 'power2.out' } })
+    tl.fromTo(view, { autoAlpha: 0, y: 8 }, { autoAlpha: 1, y: 0, duration: 0.22, clearProps: 'transform' })
+      .fromTo(children, { autoAlpha: 0, y: 6 }, { autoAlpha: 1, y: 0, duration: 0.16, stagger: 0.025, clearProps: 'transform' }, '<0.04')
+  }
+
+  function list(container, selector) {
+    if (!container) return
+    const items = [...container.querySelectorAll(selector)]
+    if (!items.length) {
+      delete container.dataset.motionListSignature
+      return
+    }
+    const signature = motionSignature(items)
+    if (container.dataset.motionListSignature === signature) return
+    container.dataset.motionListSignature = signature
+    gsap.killTweensOf(items)
+    if (reduced) {
+      clear(items)
+      return
+    }
+    gsap.fromTo(items, { autoAlpha: 0, y: 8 }, {
+      autoAlpha: 1,
+      y: 0,
+      duration: 0.2,
+      ease: 'power2.out',
+      stagger: { each: 0.025, from: 'start' },
+      clearProps: 'transform'
+    })
+  }
+
+  // FLIP-style reflow without the optional Flip plugin: read all positions,
+  // let the caller render once, then animate only transform/opacity.
+  function relayout(container, selector, render) {
+    if (!container || typeof render !== 'function') return false
+    const existing = [...container.querySelectorAll(selector)]
+    const before = new Map(existing.map(node => [motionKey(node), node.getBoundingClientRect()]))
+    gsap.killTweensOf(existing)
+    render()
+    const next = [...container.querySelectorAll(selector)]
+    if (reduced) {
+      clear(next)
+      return true
+    }
+    const entering = []
+    const moving = []
+    for (const node of next) {
+      const previous = before.get(motionKey(node))
+      if (!previous) {
+        entering.push(node)
+        continue
+      }
+      const current = node.getBoundingClientRect()
+      const x = previous.left - current.left
+      const y = previous.top - current.top
+      if (Math.abs(x) > 0.5 || Math.abs(y) > 0.5) {
+        gsap.set(node, { x, y })
+        moving.push(node)
+      }
+    }
+    if (moving.length) {
+      gsap.to(moving, {
+        x: 0,
+        y: 0,
+        duration: 0.28,
+        ease: 'power2.out',
+        stagger: { each: 0.018, from: 'start' },
+        clearProps: 'transform'
+      })
+    }
+    if (entering.length) {
+      gsap.fromTo(entering, { autoAlpha: 0, y: 8 }, {
+        autoAlpha: 1,
+        y: 0,
+        duration: 0.2,
+        ease: 'power2.out',
+        stagger: { each: 0.025, from: 'start' },
+        clearProps: 'transform'
+      })
+    }
+    return true
+  }
+
+  function bindLongPressReorder(container, selector, options = {}) {
+    if (!container || !selector) return
+    const registry = container.__dshReorderRegistry || (container.__dshReorderRegistry = new Map())
+    const existing = registry.get(selector)
+    if (existing) {
+      existing.options = options
+      return
+    }
+    const LONG_PRESS_MS = 300
+    const MOVE_TOLERANCE = 28
+    const state = { options, press: null, drag: null, suppressClickUntil: 0 }
+    const raf = callback => window.requestAnimationFrame ? window.requestAnimationFrame(callback) : setTimeout(callback, 16)
+    const caf = id => window.cancelAnimationFrame ? window.cancelAnimationFrame(id) : clearTimeout(id)
+    const itemFrom = target => target?.closest?.(selector)
+    const listFrom = item => item?.parentElement || container
+    const groupFrom = item => state.options.groupSelector ? (item.closest(state.options.groupSelector) || container) : container
+    const keyFrom = item => state.options.key ? state.options.key(item) : motionKey(item)
+    const itemsFrom = list => [...list.querySelectorAll(selector)].filter(item => item.parentElement === list)
+    const scrollTargetsFrom = item => {
+      const targets = []
+      let node = item?.parentElement
+      while (node && node !== document.body) {
+        const style = window.getComputedStyle(node)
+        if ((style.overflowY === 'auto' || style.overflowY === 'scroll') && node.scrollHeight > node.clientHeight + 1) targets.push(node)
+        node = node.parentElement
+      }
+      if (document.scrollingElement) targets.push(document.scrollingElement)
+      return targets
+    }
+    const reorderDraggedItems = (drag, clientY) => {
+      const items = itemsFrom(drag.list).filter(item => item !== drag.item)
+      if (!items.length) return
+      const firstRects = new Map(items.map(item => [item, item.getBoundingClientRect()]))
+      let target = null
+      let insertBeforeTarget = false
+      for (const item of items) {
+        const rect = item.getBoundingClientRect()
+        if (clientY < rect.top + rect.height / 2) {
+          target = item
+          insertBeforeTarget = true
+          break
+        }
+        target = item
+      }
+      if (!target) return
+      const reference = insertBeforeTarget ? target : target.nextElementSibling
+      if (reference !== drag.placeholder) drag.list.insertBefore(drag.placeholder, reference || null)
+      if (!reduced) {
+        for (const item of items) {
+          const first = firstRects.get(item)
+          const last = item.getBoundingClientRect()
+          const x = first.left - last.left
+          const y = first.top - last.top
+          if (Math.abs(x) > 0.5 || Math.abs(y) > 0.5) {
+            gsap.fromTo(item, { x, y }, { x: 0, y: 0, duration: 0.16, ease: 'power2.out', clearProps: 'transform' })
+          }
+        }
+      }
+    }
+    const autoScroll = drag => {
+      if (!drag || state.drag !== drag) return
+      const pointerY = drag.pointerY
+      const targets = drag.scrollTargets || []
+      for (const target of targets) {
+        const root = target === document.scrollingElement
+          ? { top: 0, bottom: window.innerHeight }
+          : target.getBoundingClientRect()
+        const threshold = Math.min(78, Math.max(42, (root.bottom - root.top) * 0.14))
+        let delta = 0
+        if (pointerY < root.top + threshold) {
+          const strength = 1 - Math.max(0, pointerY - root.top) / threshold
+          if (target.scrollTop > 0) delta = -Math.ceil(4 + strength * 14)
+        } else if (pointerY > root.bottom - threshold) {
+          const max = target.scrollHeight - target.clientHeight
+          const strength = 1 - Math.max(0, root.bottom - pointerY) / threshold
+          if (target.scrollTop < max) delta = Math.ceil(4 + strength * 14)
+        }
+        if (delta) {
+          target.scrollTop = Math.max(0, Math.min(target.scrollHeight - target.clientHeight, target.scrollTop + delta))
+          reorderDraggedItems(drag, pointerY)
+          break
+        }
+      }
+      drag.scrollRaf = raf(() => autoScroll(drag))
+    }
+    const restoreStyle = (item, style) => {
+      if (style == null) item.removeAttribute('style')
+      else item.setAttribute('style', style)
+    }
+    const orderFrom = drag => {
+      const order = []
+      for (const child of drag.list.children) {
+        if (child === drag.placeholder) order.push(keyFrom(drag.item))
+        else if (child !== drag.item && child.matches?.(selector)) order.push(keyFrom(child))
+      }
+      return order
+    }
+    const animateDrop = (drag, commit) => {
+      const floating = drag.item.getBoundingClientRect()
+      const order = orderFrom(drag)
+      drag.list.insertBefore(drag.item, drag.placeholder)
+      drag.placeholder.remove()
+      restoreStyle(drag.item, drag.originalStyle)
+      const finalRect = drag.item.getBoundingClientRect()
+      const dx = floating.left - finalRect.left
+      const dy = floating.top - finalRect.top
+      if (!reduced && (Math.abs(dx) > 0.5 || Math.abs(dy) > 0.5)) {
+        gsap.fromTo(drag.item, { x: dx, y: dy, scale: 1.02 }, {
+          x: 0,
+          y: 0,
+          scale: 1,
+          duration: 0.24,
+          ease: 'power2.out',
+          clearProps: 'transform'
+        })
+      } else if (reduced) clear(drag.item)
+      if (commit) {
+        const callback = drag.options.onCommit
+        const payload = { item: drag.item, list: drag.list, group: drag.group, order }
+        if (callback) setTimeout(() => callback(payload), reduced ? 0 : 240)
+      }
+    }
+    const restoreDrag = (drag, commit) => {
+      if (!commit) {
+        const originalNext = drag.originalNextSibling?.parentElement === drag.list ? drag.originalNextSibling : null
+        drag.list.insertBefore(drag.placeholder, originalNext)
+      }
+      animateDrop(drag, commit)
+    }
+    const setPageScrollLock = locked => {
+      document.documentElement.classList.toggle('reorder-scroll-lock', locked)
+    }
+
+    const cancelPress = () => {
+      if (!state.press) return
+      clearTimeout(state.press.timer)
+      state.press.item.classList.remove('reorder-pressing')
+      state.press = null
+    }
+    const finishDrag = (commit) => {
+      const drag = state.drag
+      if (!drag) return
+      state.drag = null
+      drag.item.classList.remove('reorder-dragging')
+      drag.item.removeAttribute('aria-grabbed')
+      drag.item.releasePointerCapture?.(drag.pointerId)
+      if (drag.scrollRaf != null) caf(drag.scrollRaf)
+      container.classList.remove('reorder-active')
+      setPageScrollLock(false)
+      if (commit) state.suppressClickUntil = Date.now() + 680
+      restoreDrag(drag, commit)
+    }
+    const activate = () => {
+      const press = state.press
+      if (!press) return
+      state.press = null
+      const rect = press.item.getBoundingClientRect()
+      const originalNextSibling = press.item.nextElementSibling
+      const placeholder = document.createElement('div')
+      placeholder.className = 'reorder-placeholder'
+      placeholder.setAttribute('aria-hidden', 'true')
+      placeholder.style.height = `${rect.height}px`
+      placeholder.style.width = `${rect.width}px`
+      press.item.before(placeholder)
+      state.drag = {
+        ...press,
+        options: state.options,
+        placeholder,
+        originalStyle: press.item.getAttribute('style'),
+        originalNextSibling,
+        startY: press.y,
+        pointerY: press.y,
+        scrollTargets: scrollTargetsFrom(press.item)
+      }
+      press.item.setPointerCapture?.(press.pointerId)
+      press.item.classList.remove('reorder-pressing')
+      press.item.classList.add('reorder-dragging')
+      press.item.setAttribute('aria-grabbed', 'true')
+      press.item.style.position = 'fixed'
+      press.item.style.left = `${rect.left}px`
+      press.item.style.top = `${rect.top}px`
+      press.item.style.width = `${rect.width}px`
+      press.item.style.zIndex = '20'
+      press.item.style.pointerEvents = 'none'
+      if (!reduced) {
+        gsap.set(press.item, { scale: 1.02 })
+        state.drag.yTo = gsap.quickTo(press.item, 'y', { duration: 0.12, ease: 'power2.out' })
+      }
+      container.classList.add('reorder-active')
+      setPageScrollLock(true)
+      const drag = state.drag
+      drag.scrollRaf = raf(() => autoScroll(drag))
+    }
+    const onPointerDown = event => {
+      if (state.press || state.drag) return
+      if (event.button != null && event.button !== 0) return
+      const item = itemFrom(event.target)
+      if (!item || !container.contains(item)) return
+      const currentOptions = state.options || {}
+      if (currentOptions.handleSelector && !event.target.closest(currentOptions.handleSelector)) return
+      if (currentOptions.excludeSelector && event.target.closest(currentOptions.excludeSelector)) return
+      const list = listFrom(item)
+      const group = groupFrom(item)
+      if (!itemsFrom(list).includes(item)) return
+      const press = { item, list, group, pointerId: event.pointerId, x: event.clientX, y: event.clientY, timer: 0 }
+      press.timer = setTimeout(activate, LONG_PRESS_MS)
+      state.press = press
+      item.classList.add('reorder-pressing')
+    }
+    const onPointerMove = event => {
+      const press = state.press
+      if (press && !state.drag) {
+        if (Math.hypot(event.clientX - press.x, event.clientY - press.y) > MOVE_TOLERANCE) cancelPress()
+        return
+      }
+      const drag = state.drag
+      if (!drag || drag.pointerId !== event.pointerId) return
+      event.preventDefault()
+      drag.pointerY = event.clientY
+      if (!reduced) drag.yTo?.(event.clientY - drag.startY)
+      reorderDraggedItems(drag, event.clientY)
+    }
+    const onPointerUp = event => {
+      if (state.press?.pointerId === event.pointerId) cancelPress()
+      if (state.drag?.pointerId === event.pointerId) finishDrag(true)
+    }
+    const onPointerCancel = event => {
+      if (state.press?.pointerId === event.pointerId) cancelPress()
+      if (state.drag?.pointerId === event.pointerId) finishDrag(false)
+    }
+    const touchPoint = event => event.changedTouches?.[0] || event.touches?.[0]
+    const touchPointerEvent = event => {
+      const point = touchPoint(event)
+      if (!point) return null
+      return {
+        target: event.target,
+        button: 0,
+        pointerId: 10000 + point.identifier,
+        clientX: point.clientX,
+        clientY: point.clientY,
+        preventDefault: () => event.preventDefault()
+      }
+    }
+    const onTouchStart = event => {
+      const normalized = touchPointerEvent(event)
+      if (normalized) onPointerDown(normalized)
+    }
+    const onTouchMove = event => {
+      const normalized = touchPointerEvent(event)
+      if (normalized) onPointerMove(normalized)
+    }
+    const onTouchEnd = event => {
+      const normalized = touchPointerEvent(event)
+      if (normalized) onPointerUp(normalized)
+    }
+    const onTouchCancel = event => {
+      const normalized = touchPointerEvent(event)
+      if (normalized) onPointerCancel(normalized)
+    }
+    const onDocumentMove = event => {
+      if (state.drag) event.preventDefault()
+    }
+    const pointerIdFromEvent = event => {
+      if (event.pointerId != null) return event.pointerId
+      const point = touchPoint(event)
+      return point ? 10000 + point.identifier : null
+    }
+    const onDocumentEnd = (event, commit) => {
+      const pointerId = pointerIdFromEvent(event)
+      if (state.press && (pointerId == null || state.press.pointerId === pointerId)) cancelPress()
+      if (state.drag && (pointerId == null || state.drag.pointerId === pointerId)) finishDrag(commit)
+    }
+    const onWindowBlur = () => onDocumentEnd({}, false)
+    const onVisibilityChange = () => {
+      if (document.hidden) onDocumentEnd({}, false)
+    }
+    const onContextMenu = event => {
+      if (state.press || state.drag) event.preventDefault()
+    }
+    const onClick = event => {
+      if (Date.now() >= state.suppressClickUntil) return
+      if (itemFrom(event.target)) {
+        event.preventDefault()
+        event.stopPropagation()
+      }
+    }
+    container.addEventListener('pointerdown', onPointerDown)
+    container.addEventListener('pointermove', onPointerMove)
+    container.addEventListener('pointerup', onPointerUp)
+    container.addEventListener('pointercancel', onPointerCancel)
+    container.addEventListener('lostpointercapture', onPointerCancel)
+    container.addEventListener('touchstart', onTouchStart, { passive: false })
+    container.addEventListener('touchmove', onTouchMove, { passive: false })
+    container.addEventListener('touchend', onTouchEnd, { passive: false })
+    container.addEventListener('touchcancel', onTouchCancel, { passive: false })
+    container.addEventListener('contextmenu', onContextMenu)
+    container.addEventListener('click', onClick, true)
+    document.addEventListener('touchmove', onDocumentMove, { passive: false, capture: true })
+    document.addEventListener('pointermove', onDocumentMove, { passive: false, capture: true })
+    document.addEventListener('pointerup', event => onDocumentEnd(event, true), { passive: false, capture: true })
+    document.addEventListener('pointercancel', event => onDocumentEnd(event, false), { passive: false, capture: true })
+    document.addEventListener('touchend', event => onDocumentEnd(event, true), { passive: false, capture: true })
+    document.addEventListener('touchcancel', event => onDocumentEnd(event, false), { passive: false, capture: true })
+    window.addEventListener('blur', onWindowBlur)
+    document.addEventListener('visibilitychange', onVisibilityChange)
+    registry.set(selector, state)
+  }
+
+  function overlay(node) {
+    if (!node) return
+    const card = node.querySelector('.modal-card, .ds-modal-card, .sheet, .ds-drawer') || node
+    gsap.killTweensOf([node, card])
+    if (reduced) {
+      clear([node, card])
+      return
+    }
+    const isSideDrawer = card.classList.contains('ds-drawer')
+    const isSheet = card.classList.contains('sheet')
+    const tl = gsap.timeline({ defaults: { ease: 'power3.out' } })
+    tl.fromTo(node, { autoAlpha: 0 }, { autoAlpha: 1, duration: 0.16 })
+      .fromTo(card,
+        { autoAlpha: 0, x: isSideDrawer ? 28 : 0, y: isSheet ? 24 : 8, scale: isSideDrawer || isSheet ? 1 : 0.985 },
+        { autoAlpha: 1, x: 0, y: 0, scale: 1, duration: isSheet ? 0.24 : 0.2, clearProps: 'transform' },
+        '<'
+      )
+  }
+
+  function pulse(targets) {
+    if (reduced) return clear(targets)
+    const nodes = typeof targets === 'string' ? document.querySelectorAll(targets) : targets
+    for (const node of nodes || []) {
+      if (activePulses.has(node)) continue
+      activePulses.add(node)
+      gsap.to(node, { scale: 1.12, autoAlpha: 0.62, duration: 0.85, ease: 'sine.inOut', repeat: -1, yoyo: true, transformOrigin: '50% 50%' })
+    }
+  }
+
+  window.DshMotion = { gsap, reduced: () => reduced, view, list, relayout, bindLongPressReorder, overlay, pulse }
+
+  document.addEventListener('DOMContentLoaded', () => {
+    document.querySelectorAll('.view:not(.hidden), .ds-view:not(.hidden)').forEach(node => view(node))
+  }, { once: true })
+
+  const observer = new MutationObserver(records => {
+    for (const record of records) {
+      const node = record.target
+      if (!(node instanceof HTMLElement)) continue
+      const becameVisible = record.oldValue?.split(/\s+/).includes('hidden') && !node.classList.contains('hidden')
+      if (!becameVisible) continue
+      if (node.matches('.view, .ds-view')) view(node)
+      else if (node.matches('.modal, .ds-modal, .sheet, .ds-drawer')) overlay(node)
+    }
+  })
+  observer.observe(document.documentElement, { subtree: true, attributes: true, attributeFilter: ['class'], attributeOldValue: true })
+})()

package/public/plugin.html

@@ -116,7 +116,7 @@
         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="8" y="8" width="11" height="11" rx="2"/><path d="M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2"/></svg>复制令牌
       </button>
       <button id="plugin-toggle" class="plugin-action" type="button">
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3v9M7.8 5.4a7 7 0 1 0 8.4 0"/></svg><span id="plugin-toggle-label">启动网关</span>
+        <morph-icon id="plugin-toggle-icon" data-morph-state="closed" data-morph-closed="M12 3v9M7.8 5.4a7 7 0 1 0 8.4 0" data-morph-open="M7 7h10v10H7z" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3v9M7.8 5.4a7 7 0 1 0 8.4 0"/></svg></morph-icon><span id="plugin-toggle-label">启动网关</span>
       </button>
     </section>
 
@@ -146,6 +146,9 @@
 
     <footer class="plugin-foot"><span>状态面板 · 需要深入管理时进入控制台</span><a id="plugin-about" href="/remote/admin/" target="_blank" rel="noopener">关于与支持</a></footer>
   </main>
+  <script src="vendor/gsap/gsap.min.js"></script>
+  <script src="motion.js"></script>
+  <script type="module" src="morphicons-init.js"></script>
   <script src="plugin.js"></script>
 </body>
 </html>

package/public/plugin.js

@@ -99,6 +99,7 @@ function render(st) {
   primary.textContent = healthy ? '打开控制台' : installed ? '启动网关' : '查看控制台'
   primary.dataset.action = healthy ? 'console' : installed ? 'start' : 'console'
   text('plugin-toggle-label', gateway ? '停止网关' : '启动网关')
+  $('plugin-toggle-icon')?.setAttribute('data-morph-state', gateway ? 'open' : 'closed')
   $('plugin-toggle').classList.toggle('hidden', !installed)
 
   text('plugin-version', st.version ? 'v' + st.version : '—')

package/public/styles.css

@@ -112,8 +112,6 @@ a.mini-btn { text-decoration: none; display: inline-flex; align-items: center; }
 
 /* ---------- 主体 ---------- */
 .main { padding: 12px 12px 20px; max-width: 720px; margin: 0 auto; }
-.view { animation: fadein .18s ease; }
-@keyframes fadein { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; } }
 
 .stat-strip {
   display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px;
@@ -215,6 +213,12 @@ a.mini-btn { text-decoration: none; display: inline-flex; align-items: center; }
   box-sizing: border-box; margin: 8px 2px 0; padding: 6px 8px 4px; border-bottom: 1px solid var(--dsr-line);
   color: var(--dsr-accent-strong); font-size: 11px; font-weight: 700;
 }
+.session-workspace-group { flex: 0 0 auto; display: flex; flex-direction: column; gap: 0; }
+.session-group-label { touch-action: pan-y; user-select: none; }
+.session-group-drag-handle { flex: 0 0 auto; color: var(--dsr-muted); opacity: .52; font-size: 14px; line-height: 1; letter-spacing: -3px; }
+.session-workspace-group.reorder-pressing { outline: 1px solid var(--dsr-accent-line); border-radius: var(--dsr-radius); }
+.session-workspace-group.reorder-dragging { position: relative; z-index: 5; opacity: .76; outline: 1px solid var(--dsr-accent-strong); box-shadow: 0 10px 24px var(--dsr-shadow); touch-action: none; }
+.session-workspace-group .session-card { touch-action: pan-y; }
 .session-group-icon { flex: 0 0 auto; color: var(--dsr-accent-2); font-size: 12px; }
 .session-group-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .session-list.workspace-sorted .sc-workspace { display: none; }
@@ -255,11 +259,18 @@ a.mini-btn { text-decoration: none; display: inline-flex; align-items: center; }
 .workbench-bar.bound .wb-toggle[aria-expanded="true"] .wb-chevron { transform: rotate(180deg); }
 .wb-panel { background: var(--dsr-bg-2); border: 1px solid var(--dsr-line); border-top: none; border-radius: 0 0 var(--dsr-radius) var(--dsr-radius); padding: 8px; display: flex; flex-direction: column; gap: 6px; }
 .wb-project { background: var(--dsr-panel); border: 1px solid var(--dsr-line); border-radius: 10px; overflow: hidden; }
-.wb-project-head { display: flex; align-items: center; gap: 7px; padding: 9px 10px; cursor: pointer; }
+.wb-project-head { display: flex; align-items: center; gap: 7px; padding: 9px 10px; cursor: pointer; touch-action: pan-y; user-select: none; }
+.wb-drag-handle, .wb-session-drag-handle { flex: none; color: var(--dsr-muted); opacity: .52; font-size: 14px; line-height: 1; letter-spacing: -3px; }
+.wb-project.reorder-pressing, .wb-session.reorder-pressing { outline: 1px solid var(--dsr-accent-line); }
+.wb-project.reorder-dragging, .wb-session.reorder-dragging { position: relative; z-index: 5; opacity: .76; outline: 1px solid var(--dsr-accent-strong); box-shadow: 0 10px 24px var(--dsr-shadow); touch-action: none; }
+.wb-panel.reorder-active { user-select: none; }
+.reorder-placeholder { flex: 0 0 auto; box-sizing: border-box; border: 1px dashed var(--dsr-accent-line); border-radius: 8px; background: var(--dsr-accent-soft); opacity: .72; }
+html.reorder-scroll-lock { overscroll-behavior: none; }
+html.reorder-scroll-lock body { overscroll-behavior: none; }
 .wb-project-title { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .wb-new { padding: 3px 9px; font-size: 12px; }
 .wb-sessions { display: flex; flex-direction: column; gap: 4px; padding: 0 6px 6px; }
-.wb-session { width: 100%; display: flex; align-items: center; gap: 8px; background: var(--dsr-bg-2); border: 1px solid var(--dsr-line); border-radius: 8px; padding: 7px 9px; text-align: left; color: var(--dsr-text); font: inherit; }
+.wb-session { width: 100%; display: flex; align-items: center; gap: 8px; background: var(--dsr-bg-2); border: 1px solid var(--dsr-line); border-radius: 8px; padding: 7px 9px; text-align: left; color: var(--dsr-text); font: inherit; touch-action: pan-y; user-select: none; }
 .wb-session-title { flex: 1; min-width: 0; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .wb-session-meta { flex-shrink: 0; font-size: 11px; color: var(--dsr-muted); }
 .wb-empty { font-size: 12px; color: var(--dsr-muted); text-align: center; padding: 10px 0; }
@@ -317,6 +328,9 @@ body.in-session .view {
   font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
 }
 .session-sub { font-size: 12px; color: var(--dsr-muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.session-head .mini-btn { flex: none; padding: 7px 9px; }
+.text-input { width: 100%; box-sizing: border-box; min-height: 42px; padding: 10px 12px; border: 1px solid var(--dsr-line); border-radius: 10px; background: var(--dsr-bg-2); color: var(--dsr-text); font: inherit; outline: none; }
+.text-input:focus { border-color: var(--dsr-accent-line); }
 .cards {
   display: flex; flex-direction: column; gap: 8px; margin-top: 8px;
   flex-shrink: 0; max-height: 42vh; overflow-y: auto;
@@ -333,6 +347,8 @@ body.in-session .view {
 .subagent-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
 .subagent-toggle .card-title { margin: 0; }
 .subagent-toggle-icon { color: var(--dsr-muted); font-size: 16px; line-height: 1; }
+.subagent-toggle-icon morph-icon,
+.subagent-toggle-icon morph-icon svg { width: 16px; height: 16px; display: block; }
 .subagent-list { padding: 0 12px 10px; border-top: 1px solid var(--dsr-line); }
 .queue-dock { margin: 0 0 10px; border: 1px solid var(--dsr-line); border-radius: 12px; background: var(--dsr-surface); overflow: hidden; }
 .queue-dock-head { display: flex; align-items: center; gap: 8px; padding: 9px 12px; color: var(--dsr-muted); font-size: 12px; font-weight: 700; border-bottom: 1px solid var(--dsr-line); }
@@ -704,6 +720,81 @@ button.overview-attention-item, button.overview-session-item { cursor:pointer; }
   background: var(--dsr-panel); border: 1px solid var(--dsr-line); border-radius: var(--dsr-radius);
   margin-bottom: 10px; overflow: hidden;
 }
+.model-settings-shell { padding: 14px; }
+.model-settings-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--dsr-line); }
+.model-settings-head .setting-actions { flex-wrap: nowrap; }
+.model-settings-status { padding: 12px 0 2px; font-size: 12px; }
+.model-settings-status.error { color: var(--dsr-error); white-space: pre-wrap; overflow-wrap: anywhere; }
+.model-settings-list { display: flex; flex-direction: column; gap: 8px; padding-top: 10px; }
+.model-provider-card { border: 1px solid var(--dsr-line); border-radius: 12px; background: var(--dsr-bg-2); overflow: hidden; }
+.model-provider-head { display: flex; align-items: center; gap: 8px; padding: 11px 12px; }
+.model-provider-identity { display: flex; align-items: center; gap: 7px; min-width: 0; flex: 1; }
+.model-provider-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; }
+.model-provider-route { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--dsr-muted); font-size: 11px; }
+.model-provider-dot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--dsr-muted); }
+.model-provider-dot.configured { background: var(--dsr-success); box-shadow: 0 0 8px var(--dsr-success); }
+.model-provider-dot.unknown { background: var(--dsr-info); }
+.model-editor { display: flex; flex-direction: column; gap: 12px; padding: 13px 14px 14px; background: var(--dsr-panel); border-top: 1px solid var(--dsr-line); }
+.model-editor-title { display: flex; align-items: baseline; gap: 8px; }
+.model-editor-title strong { font-size: 14px; }
+.model-editor-title code { color: var(--dsr-muted); font-size: 11px; overflow-wrap: anywhere; }
+.model-field { display: flex; flex-direction: column; gap: 5px; }
+.model-field > label, .model-field-label { color: var(--dsr-muted); font-size: 12px; }
+.model-input { box-sizing: border-box; width: 100%; min-height: 36px; padding: 8px 10px; border: 1px solid var(--dsr-line); border-radius: 9px; background: var(--dsr-bg-2); color: var(--dsr-text); font: inherit; font-size: 13px; outline: none; }
+.model-input:focus { border-color: var(--dsr-accent-line); box-shadow: 0 0 0 2px var(--dsr-accent-soft); }
+.model-input::placeholder { color: var(--dsr-muted); opacity: .85; }
+.model-input[type=password] { letter-spacing: .04em; }
+.model-inline { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 9px; }
+.model-catalog { display: flex; flex-direction: column; gap: 8px; padding-top: 3px; border-top: 1px solid var(--dsr-line); }
+.model-catalog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
+.model-catalog-title { font-size: 12px; color: var(--dsr-muted); }
+.model-catalog-hint { margin-top: 2px; font-size: 11px; color: var(--dsr-muted); line-height: 1.45; }
+.model-catalog-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
+.model-list { display: flex; flex-direction: column; gap: 6px; }
+.model-entry-card { display: flex; flex-direction: column; gap: 8px; padding: 9px; border: 1px solid var(--dsr-line); border-radius: 9px; background: var(--dsr-bg-2); }
+.model-entry { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto; gap: 6px; align-items: center; }
+.model-entry .model-input { min-width: 0; min-height: 32px; padding: 6px 8px; font-size: 12px; }
+.model-entry-remove { width: 30px; height: 30px; padding: 0; border: 1px solid var(--dsr-line); border-radius: 8px; background: transparent; color: var(--dsr-muted); cursor: pointer; }
+.model-entry-remove:active { color: var(--dsr-error); border-color: var(--dsr-error); }
+.model-empty { padding: 10px; border: 1px dashed var(--dsr-line); border-radius: 9px; color: var(--dsr-muted); font-size: 12px; text-align: center; }
+.model-reasoning { display: flex; flex-direction: column; gap: 7px; padding-top: 8px; border-top: 1px solid var(--dsr-line); }
+.model-reasoning-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
+.model-reasoning-list { display: flex; flex-direction: column; gap: 6px; }
+.model-reasoning-entry { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: 6px; align-items: center; }
+.model-reasoning-entry .model-input { min-width: 0; min-height: 32px; padding: 6px 8px; font-size: 12px; }
+.model-reasoning-default { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px; color: var(--dsr-muted); font-size: 12px; }
+.model-reasoning-default .model-input { min-height: 32px; padding: 6px 8px; font-size: 12px; }
+.model-discovery { display: flex; flex-direction: column; gap: 7px; padding: 9px; border: 1px solid var(--dsr-info-line); border-radius: 9px; background: var(--dsr-info-soft); }
+.model-discovery-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--dsr-info); font-size: 12px; }
+.model-discovery-list { display: flex; flex-direction: column; gap: 4px; max-height: 180px; overflow-y: auto; }
+.model-discovery-row { display: flex; align-items: center; gap: 7px; min-height: 30px; font-size: 12px; }
+.model-discovery-row input { flex: 0 0 auto; }
+.model-discovery-row code { min-width: 0; overflow-wrap: anywhere; color: var(--dsr-text); }
+.model-editor-actions { display: flex; justify-content: flex-end; gap: 8px; padding-top: 2px; }
+.model-editor-error { margin: 0; color: var(--dsr-error); font-size: 12px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
+.model-readonly { color: var(--dsr-warning); font-size: 12px; }
+.feature-test-shell { padding: 14px; }
+.feature-test-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--dsr-line); }
+.feature-test-note { margin-top: 12px; padding: 10px 11px; border: 1px solid var(--dsr-info-line); border-radius: 9px; background: var(--dsr-info-soft); color: var(--dsr-info); font-size: 12px; line-height: 1.55; }
+.feature-test-actions { display: flex; flex-wrap: wrap; gap: 7px; padding: 12px 0 8px; }
+.feature-test-status { min-height: 20px; padding: 4px 0; font-size: 12px; }
+.feature-test-status.error { color: var(--dsr-error); }
+.feature-test-status.ok { color: var(--dsr-success); }
+.feature-test-summary { margin-top: 6px; color: var(--dsr-text); font-size: 12px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
+.feature-test-log { max-height: 420px; min-height: 170px; margin: 10px 0 0; padding: 11px; overflow: auto; border: 1px solid var(--dsr-line); border-radius: 9px; background: var(--dsr-bg-2); color: var(--dsr-text); font: 11px/1.55 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
+@media (max-width: 520px) {
+  .model-settings-head { flex-direction: column; }
+  .model-settings-head .setting-actions { width: 100%; justify-content: flex-start; }
+  .model-inline { grid-template-columns: 1fr; }
+  .model-entry { grid-template-columns: minmax(0, 1fr) auto; }
+  .model-entry .model-name-input { grid-column: 1 / -1; grid-row: 2; }
+  .model-reasoning-entry { grid-template-columns: minmax(0, 1fr) auto; }
+  .model-reasoning-entry .model-input:nth-child(2), .model-reasoning-entry .model-input:nth-child(3) { grid-column: 1 / -1; }
+  .model-reasoning-entry .model-entry-remove { grid-column: 2; grid-row: 1; }
+  .model-reasoning-default { grid-template-columns: 1fr; gap: 4px; }
+  .feature-test-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .feature-test-actions .mini-btn { width: 100%; }
+}
 .setting-row {
   display: flex; align-items: center; justify-content: space-between; gap: 10px;
   padding: 13px 14px;
@@ -711,6 +802,7 @@ button.overview-attention-item, button.overview-session-item { cursor:pointer; }
 .setting-row > div:first-child { flex: 1; min-width: 0; }
 .setting-row + .setting-row { border-top: 1px solid var(--dsr-line); }
 .setting-name { font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.dsh-experimental-badge { display: inline-block; margin-left: 6px; padding: 2px 6px; border: 1px solid var(--dsr-warning-line); border-radius: 999px; color: var(--dsr-warning); background: var(--dsr-warning-soft); font-size: 10px; font-weight: 700; vertical-align: 2px; }
 .setting-desc { font-size: 12px; color: var(--dsr-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .setting-desc.expanded { white-space: normal; overflow: visible; text-overflow: clip; word-break: break-word; }
 .setting-select { min-width: 112px; max-width: 145px; padding: 7px 9px; border-radius: 10px; border: 1px solid var(--dsr-line); background: var(--dsr-bg-2); color: var(--dsr-text); font: inherit; font-size: 12px; }
@@ -845,7 +937,6 @@ button.overview-attention-item, button.overview-session-item { cursor:pointer; }
   background: var(--dsr-bg-2); border-top: 1px solid var(--dsr-line); border-radius: 20px 20px 0 0;
   padding: 8px 12px calc(12px + env(safe-area-inset-bottom, 0px));
   box-shadow: 0 -10px 34px var(--dsr-shadow);
-  animation: sheet-up .22s cubic-bezier(.2,.8,.3,1);
 }
 .sheet-handle { width: 38px; height: 4px; border-radius: 999px; background: var(--dsr-line); margin: 2px auto 10px; }
 .sheet-title { font-size: 14px; font-weight: 700; padding: 0 6px 8px; }
@@ -867,7 +958,6 @@ button.overview-attention-item, button.overview-session-item { cursor:pointer; }
 .sheet-item-name { font-size: 14px; font-weight: 600; }
 .sheet-item-desc { font-size: 12px; color: var(--dsr-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 @keyframes sheet-fade { from { opacity: 0 } to { opacity: 1 } }
-@keyframes sheet-up { from { transform: translateY(24px); opacity: .6 } to { transform: translateY(0); opacity: 1 } }
 
 /* ---------- 应用内选择抽屉 ---------- */
 .custom-select-native {