dsh-better-workspace 0.34.0 → 0.35.0

package/dsh.plugin.json

@@ -1,6 +1,6 @@
 {
   "id": "dsh-external/dsh-better-workspace",
-  "version": "0.34.0",
+  "version": "0.35.0",
   "main": "./src/index.js",
   "description": "侧边栏工作区树:按官方磁盘目录嵌套(官方 workspace-tree 语义),可选按名称中的 / 分组(默认关闭,设置里开启);新会话页的工作区选择器同树。Workspace tree for the DSH sidebar workspace list, nested by official disk folders with optional \"/\"-name grouping; the New Session workspace picker shows the same tree.",
   "engines": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-better-workspace",
-  "version": "0.34.0",
+  "version": "0.35.0",
   "description": "侧边栏工作区树:按官方磁盘目录嵌套(官方 workspace-tree 语义),可选按名称中的 / 分组(默认关闭,设置里开启);新会话页的工作区选择器同树(同一份视图选项即时同步);添加工作区走官方目录流。Workspace tree for the DSH sidebar: disk-path nesting (official workspace-tree semantics), with optional \"/\"-name grouping (off by default), and the same tree in the New Session workspace picker; add-workspace rides the official directory flow.",
   "type": "module",
   "repository": {

package/src/client.js

@@ -3905,6 +3905,148 @@ window.__ModuleLoader__.load({
       return String(r.n) + (FALLBACK_UNITS[r.unit] || '')
     }
 
+    // Port of ui-workspace rows/AnimatedRows.tsx — the package entry exports
+    // only apply/inject, so the component cannot be required (same discipline
+    // as the row-style port). FLIP glide + entry/exit fades for keyed rows:
+    // armed by the first pointer/key input, skipped when membership, order,
+    // readiness or the reset key did not change. Deltas from upstream: the
+    // plugin tree rolls its own indent var (--bw-indent, not
+    // --dsh-workspace-indent), the exit overlay is viewport-FIXED because no
+    // positioned ancestor is guaranteed here (clone math subtracts the
+    // overlay rect either way), and the list div takes an attrs passthrough
+    // (data-bw-density / data-bw-count) plus innerRef (autoStyle samples it).
+    const ROW_FADE_MS = 100
+    const ROW_GLIDE_MS = 200
+    const sameRowKeys = (previous, next) => previous.length === next.length
+      && previous.every((key, index) => key === next[index])
+    const intersectsViewport = (rect, viewport) => rect.bottom > viewport.top && rect.top < viewport.bottom
+      && rect.right > viewport.left && rect.left < viewport.right
+    class AnimatedRows extends React.Component {
+      constructor(props) {
+        super(props)
+        this.armed = false
+        this.list = { current: null }
+        this.overlay = React.createRef()
+        this.movements = new Map()
+        this.exits = new Map()
+      }
+      getSnapshotBeforeUpdate(previous) {
+        const list = this.list.current
+        if (!this.armed || sameRowKeys(previous.rowKeys, this.props.rowKeys) || previous.resetKey !== this.props.resetKey
+          || !previous.ready || !this.props.ready || list === null
+          || typeof list.animate !== 'function'
+          || window.matchMedia('(prefers-reduced-motion: reduce)').matches) return null
+        const viewport = list.getBoundingClientRect()
+        const positions = this.readPositions()
+        const nextKeys = new Set(this.props.rowKeys)
+        const removed = new Map()
+        for (const [key, row] of positions) {
+          if (nextKeys.has(key) || !intersectsViewport(row.rect, viewport)) continue
+          const clone = row.element.cloneNode(true)
+          clone.removeAttribute('data-row-key')
+          clone.inert = true
+          clone.style.setProperty('--bw-indent', getComputedStyle(row.element).getPropertyValue('--bw-indent'))
+          removed.set(key, Object.assign({}, row, { element: clone }))
+        }
+        return { positions, removed }
+      }
+      componentDidUpdate(previous, _state, snapshot) {
+        if (snapshot === null) {
+          if (!sameRowKeys(previous.rowKeys, this.props.rowKeys) || previous.resetKey !== this.props.resetKey
+            || previous.ready !== this.props.ready) this.clear()
+          return
+        }
+        this.cancelMovements()
+        const list = this.list.current
+        const overlay = this.overlay.current
+        const viewport = list.getBoundingClientRect()
+        const origin = overlay.getBoundingClientRect()
+        const positions = this.readPositions()
+        for (const [key, row] of positions) {
+          this.removeExit(key)
+          const previousRow = snapshot.positions.get(key)
+          if (!intersectsViewport(row.rect, viewport)
+            && (previousRow === undefined || !intersectsViewport(previousRow.rect, viewport))) continue
+          if (previousRow === undefined) {
+            this.move(row.element, [{ opacity: 0 }, { opacity: 1 }], ROW_FADE_MS)
+            continue
+          }
+          const dx = previousRow.rect.left - row.rect.left
+          const dy = previousRow.rect.top - row.rect.top
+          if (dx === 0 && dy === 0 && previousRow.opacity === 1) continue
+          this.move(row.element, [
+            { transform: 'translate(' + String(dx) + 'px, ' + String(dy) + 'px)', opacity: previousRow.opacity },
+            { transform: 'translate(0, 0)', opacity: 1 },
+          ], ROW_GLIDE_MS)
+        }
+        for (const [key, row] of snapshot.removed) {
+          const { element } = row
+          this.removeExit(key)
+          Object.assign(element.style, {
+            position: 'absolute', margin: '0', transform: 'none', boxSizing: 'border-box',
+            left: String(row.rect.left - origin.left) + 'px',
+            top: String(row.rect.top - origin.top) + 'px',
+            width: String(row.rect.width) + 'px', height: String(row.rect.height) + 'px',
+          })
+          overlay.append(element)
+          const animation = element.animate([{ opacity: row.opacity }, { opacity: 0 }], {
+            duration: ROW_FADE_MS, easing: 'ease-out', fill: 'forwards',
+          })
+          this.exits.set(key, { element, animation })
+          animation.onfinish = () => { this.removeExit(key) }
+        }
+      }
+      componentWillUnmount() { this.clear() }
+      readPositions() {
+        const list = this.list.current
+        const rows = list.querySelectorAll('[data-row-key]')
+        return new Map(Array.from(rows, (element) => [element.dataset.rowKey, {
+          element,
+          rect: element.getBoundingClientRect(),
+          opacity: this.movements.has(element) ? Number(getComputedStyle(element).opacity) : 1,
+        }]))
+      }
+      move(element, keyframes, duration) {
+        const animation = element.animate(keyframes, { duration, easing: 'ease-out' })
+        this.movements.set(element, animation)
+        animation.onfinish = () => { this.movements.delete(element); animation.cancel() }
+      }
+      cancelMovements() {
+        for (const animation of this.movements.values()) {
+          animation.onfinish = null
+          animation.cancel()
+        }
+        this.movements.clear()
+      }
+      removeExit(key) {
+        const exit = this.exits.get(key)
+        if (exit === undefined) return
+        exit.animation.onfinish = null
+        exit.animation.cancel()
+        exit.element.remove()
+        this.exits.delete(key)
+      }
+      clear() {
+        this.cancelMovements()
+        for (const key of Array.from(this.exits.keys())) this.removeExit(key)
+      }
+      render() {
+        const attrs = this.props.attrs || {}
+        return [
+          E('div', Object.assign({
+            key: 'list',
+            ref: (el) => { this.list.current = el; if (this.props.innerRef) this.props.innerRef.current = el },
+            className: this.props.className,
+            role: 'tree',
+            'aria-label': this.props.label,
+            onPointerDownCapture: () => { this.armed = true },
+            onKeyDownCapture: () => { this.armed = true },
+          }, attrs), this.props.children),
+          E('div', { key: 'exits', ref: this.overlay, className: 'bw-rows-exits', 'aria-hidden': 'true' }),
+        ]
+      }
+    }
+
     const pendingKindOf = (pending, id) => {
       if (!pending) return undefined
       const p = typeof pending.get === 'function' ? pending.get(id) : pending[id]
@@ -4570,6 +4712,7 @@ window.__ModuleLoader__.load({
       '.bw-menu-block{display:block;width:100%}',
       '.bw-menu-inline{display:inline-block;width:auto;flex:none}',
       '.bw-tree{--bw-row-h:34px;--bw-session-h:32px;flex:1;overflow-y:auto;overflow-x:hidden;padding:2px 6px 12px;min-height:0}',
+      '.bw-rows-exits{position:fixed;inset:0;contain:strict;overflow:clip;pointer-events:none}',
       '.bw-tree[data-bw-density="compact"]{--bw-row-h:28px;--bw-session-h:26px}',
       '.bw-tree[data-bw-density="roomy"]{--bw-row-h:40px;--bw-session-h:38px}',
       '.bw-row{display:flex;align-items:center;gap:6px;height:var(--bw-row-h,34px);padding:0 8px;padding-inline-start:calc(8px + var(--bw-indent,0px));border-radius:var(--dsw-radius-md,8px);cursor:pointer;user-select:none;font-size:14px;line-height:20px;color:var(--dsw-alias-label-primary,#e6e6e6);position:relative}',
@@ -4651,7 +4794,11 @@ window.__ModuleLoader__.load({
       // cancels it, so text still starts and truncates where it did.
       '.bw-row-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:3px;margin:-3px}',
       '.bw-session-row .bw-row-label{padding:0;margin:0 6px 0 4px}',
-      '.bw-session-row .bw-row-label[data-scrolled]{mask-image:linear-gradient(to right,transparent,#000 12px);-webkit-mask-image:linear-gradient(to right,transparent,#000 12px)}',
+      /* Marquee: Chromium keeps painting the ellipsis at the right edge of a
+         scrolling ellipsis element (engine behavior; official rows share it).
+         Switch to clip while scrolling — the fade masks carry both edges and
+         the full heading reads cleanly; the resting state keeps ellipsis. */
+      '.bw-session-row .bw-row-label[data-scrolled]{text-overflow:clip;mask-image:linear-gradient(to right,transparent,#000 12px);-webkit-mask-image:linear-gradient(to right,transparent,#000 12px)}',
       '.bw-session-row .bw-row-label[data-clipped]{mask-image:linear-gradient(to left,transparent,#000 12px);-webkit-mask-image:linear-gradient(to left,transparent,#000 12px)}',
       '.bw-session-row .bw-row-label[data-scrolled][data-clipped]{mask-image:linear-gradient(to right,transparent,#000 12px,#000 calc(100% - 12px),transparent);-webkit-mask-image:linear-gradient(to right,transparent,#000 12px,#000 calc(100% - 12px),transparent)}',
       '.bw-row-count{flex:none;display:none;font-size:12px;color:var(--dsw-alias-label-quaternary,#8a8a8a)}',
@@ -5872,7 +6019,7 @@ window.__ModuleLoader__.load({
       }
     }
 
-    function FolderRow({ node, depth, expanded, onToggle, onContextMenu, dropInto, dragEvents, custStyle, iconMode, pulse, active, t }) {
+    function FolderRow({ node, depth, expanded, onToggle, onContextMenu, dropInto, dragEvents, custStyle, iconMode, pulse, active, dataRowKey, t }) {
       const total = countWorkspaces(node)
       const iconEl = iconOf(iconMode, expanded)
       // Hidden status dots breathe on the icon; with the icon hidden (mode
@@ -5882,6 +6029,7 @@ window.__ModuleLoader__.load({
         : iconEl
       return E('div', {
         className: cls('bw-row', 'bw-container-row', dropInto && 'bw-drop-into', dropInto && 'bw-drop-into-strong'),
+        'data-row-key': dataRowKey,
         style: { '--bw-indent': (depth * 12) + 'px', ...(custStyle || {}), ...(pulse ? { '--bw-pulse-color': PULSE_COLORS[pulse] || PULSE_COLORS.ongoing } : null) },
         onClick: onToggle,
         onContextMenu: onContextMenu,
@@ -5900,13 +6048,14 @@ window.__ModuleLoader__.load({
       )
     }
 
-    function WorkspaceRow({ workspace, depth, count, sessionsOpen, onToggle, onStart, onMenu, onContextMenu, currentInside, menuOpen, dropHalf, dropInto, dragEvents, custStyle, iconMode, pulse, newSessionLabel, newSessionAria, menuAria, hoverBody, t }) {
+    function WorkspaceRow({ workspace, depth, count, sessionsOpen, onToggle, onStart, onMenu, onContextMenu, currentInside, menuOpen, dropHalf, dropInto, dragEvents, custStyle, iconMode, pulse, newSessionLabel, newSessionAria, menuAria, hoverBody, dataRowKey, t }) {
       const iconEl = iconOf(iconMode, sessionsOpen)
       const iconChild = pulse
         ? E(PulseGlow, { state: pulse }, iconEl || (typeof ui.StateDot === 'function' ? E(ui.StateDot, { state: pulse, size: 10 }) : null))
         : iconEl
       let row = E('div', {
         className: cls('bw-row', 'bw-container-row', currentInside && 'bw-row-current', menuOpen && 'menu-open', dropHalf === 'before' && 'bw-drop-before', dropHalf === 'after' && 'bw-drop-after', dropInto && 'bw-drop-into', dropInto && 'bw-drop-into-strong'),
+        'data-row-key': dataRowKey,
         style: { '--bw-indent': (depth * 12) + 'px', ...(custStyle || {}), ...(pulse ? { '--bw-pulse-color': PULSE_COLORS[pulse] || PULSE_COLORS.ongoing } : null) },
         onClick: onToggle,
         onContextMenu: onContextMenu,
@@ -5937,7 +6086,7 @@ window.__ModuleLoader__.load({
             'aria-keyshortcuts': newSessionAria,
             title: newSessionLabel || t('session.new'),
             onClick: (e) => { e.stopPropagation(); onStart() },
-          }, icon('IconPlusOutline16')),
+          }, icon('IconNewChatOutline16')),
         ),
       )
       // Official workspace hover card (Rows.tsx WorkspaceHoverContent): the
@@ -6041,7 +6190,7 @@ window.__ModuleLoader__.load({
       return { titleRef, onPointerEnter, onPointerLeave }
     }
 
-    function SessionRow({ node, depth, current, onOpen, onContextMenu, now, dropHalf, dragEvents, custStyle, breathing, sessionActions, scheduleSeat, t }) {
+    function SessionRow({ node, depth, current, onOpen, onContextMenu, now, dropHalf, dragEvents, custStyle, breathing, sessionActions, scheduleSeat, dataRowKey, t }) {
       const state = sessionStateOf(node)
       const status = state === null ? null : {
         state,
@@ -6081,58 +6230,28 @@ window.__ModuleLoader__.load({
       }
       const archivedTitle = official('row.archived')
       const pinnedTitle = official('row.pinned')
-      // In-row "..." menu (official Rows.tsx): the ellipsis button anchors a
-      // primitives Menu whose entries are the SAME shared list the
-      // right-click menu builds (sessionActions.menuItems) and whose trailing
-      // children are the shipped menu.item seat occupants; picks dispatch
-      // through the SAME handler (sessionActions.pick), so the two surfaces
-      // cannot drift. Hosts without the primitives Menu keep the old
-      // open-context-menu trigger button.
-      const inlineMenu = !node.blank && sessionActions && typeof ui.Menu === 'function'
-        && typeof sessionActions.menuItems === 'function' && typeof sessionActions.pick === 'function'
-      const [menuOpen, setMenuOpen] = React.useState(false)
-      const menuOpenPair = React.useMemo(() => [menuOpen, setMenuOpen], [menuOpen])
-      const menuSeatChildren = inlineMenu && Array.isArray(sessionActions.menuSeat)
-        ? sessionActions.menuSeat.map((seat, index) => E(ShippedSeatOccupant, {
-          key: 'menu-seat-' + index,
-          seat,
-          ownerProps: { sessionId: node.id, displayTitle: node.leaf || node.title },
-          t: seat.t,
-          // The menu.item hook-context factory (ui-slots) hands occupants
-          // the open-state pair; reproduced here for the in-row menu.
-          useMenuOpenState: () => menuOpenPair,
-        }))
-        : null
-      // The shipped row.action seat renders the OFFICIAL pin/archive quick
-      // buttons; our own fallback buttons step aside so the row never shows
-      // two sets (same rule as the schedule mark's leading cell).
+      // Row-trailing quick actions: the shipped row.action seat renders the
+      // OFFICIAL pin/archive buttons; our own fallback buttons render only
+      // where the seat has no entries, so the row never shows two sets. The
+      // in-row "..." menu (added v0.34.0) is RETIRED (issue #12): the context
+      // menu already carries every entry, and the menu.item occupants depend
+      // on slot-level inject hooks (useShortcuts on 0.2.1-rc.2) that an
+      // in-row reproduction cannot supply — one missing hook took the whole
+      // sidebar down. Each seat occupant sits in a QuietBoundary so a broken
+      // seat degrades to a missing button, never a blank panel.
       const quickSeatUsed = Array.isArray(sessionActions.rowActionSeat) && sessionActions.rowActionSeat.length > 0
-      const strip = !node.blank && sessionActions && (inlineMenu || sessionActions.trigger || (sessionActions.quick && !quickSeatUsed))
+      const strip = !node.blank && sessionActions && sessionActions.quick && (quickSeatUsed || sessionActions.pin || sessionActions.archive)
         ? E('span', { className: 'bw-row-actions', onClick: (e) => e.stopPropagation() },
-            inlineMenu ? E(ui.Menu, {
-              open: menuOpen,
-              onClose: () => setMenuOpen(false),
-              portal: true,
-              closeOnPointerLeave: true,
-              dense: true,
-              anchor: E('button', {
-                type: 'button',
-                className: 'bw-row-btn',
-                'aria-label': official('actions.session.aria', { name: node.leaf || node.title }) || '...',
-                title: sessionActions.triggerTitle,
-                onClick: () => setMenuOpen((open) => !open),
-              }, icon('IconEllipsisOutline16', 15)),
-              items: sessionActions.menuItems(node),
-              onSelect: (id) => { setMenuOpen(false); sessionActions.pick(node, id) },
-            }, menuSeatChildren)
-            : sessionActions.trigger ? E('button', {
-              type: 'button',
-              className: 'bw-icon-btn',
-              'aria-label': official('actions.session.aria', { name: node.leaf || node.title }) || '...',
-              title: sessionActions.triggerTitle,
-              onClick: (e) => sessionActions.openMenu(node, e),
-            }, icon('IconEllipsisOutline16', 15)) : null,
-            !quickSeatUsed && sessionActions.quick && sessionActions.pin && !node.archived ? E('button', {
+            quickSeatUsed
+              ? sessionActions.rowActionSeat.map((seat, index) => E(QuietBoundary, { key: 'row-action-seat-' + index },
+                E(ShippedSeatOccupant, {
+                  key: 'row-action-seat-' + index,
+                  seat,
+                  ownerProps: { sessionId: node.id, displayTitle: node.leaf || node.title },
+                  t: seat.t,
+                })))
+              : null,
+            !quickSeatUsed && sessionActions.pin && !node.archived ? E('button', {
               type: 'button',
               className: 'bw-icon-btn',
               'aria-label': official(node.pinned ? 'menu.unpinSession' : 'menu.pinSession') || '',
@@ -6157,8 +6276,8 @@ window.__ModuleLoader__.load({
       let row = E('div', {
         className: cls('bw-row', 'bw-session-row', current && 'bw-row-current',
           node.archived && 'bw-row-archived',
-          menuOpen && 'menu-open',
           dropHalf === 'before' && 'bw-drop-before', dropHalf === 'after' && 'bw-drop-after'),
+        'data-row-key': dataRowKey,
         style: { '--bw-indent': (depth * 12) + 'px', ...(custStyle || {}) },
         onClick: () => {
           if (node.archived) {
@@ -6215,7 +6334,6 @@ window.__ModuleLoader__.load({
           content: sessionActions.hoverBody(node, status, state),
           openDelayMs: 800,
           grouped: true,
-          disabled: menuOpen,
           // copyText present REQUIRES both labels (primitives HoverCard
           // contract): copy only renders where the official copy survives.
         }, copyText && copyLabel && copiedLabel ? { copyText, copyLabel, copiedLabel } : {}))
@@ -6228,9 +6346,10 @@ window.__ModuleLoader__.load({
      * titles). Deliberately NOT styled like a workspace folder — no folder
      * icon, tertiary color — so a session level never reads as a workspace.
      */
-    function SessionGroupRow({ name, depth, expanded, count, onToggle, onContextMenu, dropInto, dragEvents, custStyle, pulse, t }) {
+    function SessionGroupRow({ name, depth, expanded, count, onToggle, onContextMenu, dropInto, dragEvents, custStyle, pulse, dataRowKey, t }) {
       return E('div', {
         className: cls('bw-row', 'bw-sgroup-row', dropInto && 'bw-drop-into', dropInto && 'bw-drop-into-strong'),
+        'data-row-key': dataRowKey,
         style: { '--bw-indent': (depth * 12) + 'px', ...(custStyle || {}) },
         onClick: onToggle,
         onContextMenu: onContextMenu,
@@ -7099,7 +7218,14 @@ window.__ModuleLoader__.load({
     /* --------- settings → plug-ins card (accordion like official cards) --------- */
 
     function BetterWorkspacePluginCard(props) {
-      const { useStore, actions, t } = props
+      const { useStore: injectedUseStore, actions: injectedActions, localStore: localStoreProp, t } = props
+      // Issue #13: same private-store switch as the browser seat — the card
+      // keeps working no matter what a shadowing occupant does to the props.
+      const localStoreFace = typeof localStoreProp === 'function' ? localStoreProp() : null
+      const useStore = localStoreFace && typeof localStoreFace.useStore === 'function'
+        ? localStoreFace.useStore
+        : injectedUseStore
+      const actions = localStoreFace && localStoreFace.actions ? localStoreFace.actions : injectedActions
       // The bundle page (plugins.bundle.config, dsh 0.1.6-alpha.2+) renders
       // this card inline with view: 'page' — no accordion chrome there, the
       // settings body sits directly under a one-line title.
@@ -7402,7 +7528,8 @@ window.__ModuleLoader__.load({
       const {
         wide, expandSidebar,
         useSessions, useSessionPendingInteraction, useSessionStatus, useWorkspaces,
-        useStore, actions,
+        useStore: injectedUseStore, actions: injectedActions,
+        localStore: localStoreProp,
         startSession, open, renameSession, forkSession, renameWorkspace, deleteWorkspace,
         archiveSession, createWorkspace, pinSession, unpinSession, unarchiveSession,
         insertWorkspaceBefore, insertSessionBefore,
@@ -7414,6 +7541,17 @@ window.__ModuleLoader__.load({
         presetFaceOf,
         t,
       } = props
+      // Issue #13: local reads and writes go through OUR store instance, never
+      // the renderer-synthesized props — a shadowing occupant can swap those
+      // props for its own store (issue #13). Host projections (useSessions /
+      // useWorkspaces) stay on the injected props; only the plugin's OWN view
+      // state switches. Names keep their original spelling so the component
+      // body needs no other change.
+      const localStoreFace = typeof localStoreProp === 'function' ? localStoreProp() : null
+      const useStore = localStoreFace && typeof localStoreFace.useStore === 'function'
+        ? localStoreFace.useStore
+        : injectedUseStore
+      const actions = localStoreFace && localStoreFace.actions ? localStoreFace.actions : injectedActions
       // v0.32.2: resolve the stable getter ONCE per render (see
       // browserInjected for why this is a function and not a value prop).
       // Every consumer below keeps reading this local, so a late-arriving
@@ -7627,13 +7765,14 @@ window.__ModuleLoader__.load({
       // The shipped schedule mark's seat occupant (see scheduleSeatOf); absent
       // whenever the Schedule overlay is off, which is the shipped default.
       const scheduleSeat = typeof scheduleSeatReader === 'function' ? scheduleSeatReader() : null
-      // The shipped session-row seats (official Rows.tsx): menu.item
-      // occupants become the in-row menu's trailing children, row.action
-      // occupants become the official pin/archive quick buttons (our own
+      // The shipped session-row seats (official Rows.tsx): row.action
+      // occupants render the official pin/archive quick buttons (our own
       // fallback buttons step aside), session.row.hover decorates the hover
-      // card. All read off the ledger like the schedule mark.
+      // card. The menu.item seat is deliberately NOT read anymore: its
+      // occupants need slot-level inject hooks (useShortcuts on 0.2.1-rc.2)
+      // and the in-row menu they anchored was retired in issue #12. All read
+      // off the ledger like the schedule mark.
       const seatEntriesOf = typeof seatEntriesReader === 'function' ? seatEntriesReader : null
-      const rowMenuSeat = seatEntriesOf ? seatEntriesOf('sidebar.workspaces.session.menu.item') : []
       const rowActionSeat = seatEntriesOf ? seatEntriesOf('sidebar.workspaces.session.row.action') : []
       const hoverSeat = seatEntriesOf ? seatEntriesOf('sidebar.session.row.hover') : []
       /** Effective catalog row of one shipped command (current keybinding, label). */
@@ -8284,22 +8423,13 @@ window.__ModuleLoader__.load({
           }
           : undefined,
         openMenu: (node, e) => openCtx('session', node, e),
-        // In-row "..." menu (official Rows.tsx): the SAME shared entry list
-        // (sessionMenuEntriesFor) and the SAME pick dispatch the right-click
-        // menu uses, so the two surfaces cannot drift. menuSeat carries the
-        // shipped menu.item occupants (rendered as Menu children);
-        // rowActionSeat the official quick buttons (our own buttons step
-        // aside while it has entries). An id the shared dispatcher does not
-        // own (bw extensions: move-group / customize) falls back to the
-        // ctx surface's handler through a transient payload.
-        menuItems: (node) => (typeof sessionMenuEntriesFor === 'function' ? sessionMenuEntriesFor(node) : []),
-        menuSeat: rowMenuSeat,
+        // Row-trailing quick actions: the shipped row.action seat carries the
+        // official pin/archive buttons; our own buttons render only where the
+        // seat is empty. The in-row "..." menu is RETIRED (issue #12 — its
+        // menu.item occupants need slot-level inject hooks an in-row
+        // reproduction cannot supply); the context menu keeps every entry
+        // through sessionMenuEntriesFor + handleCtxPick.
         rowActionSeat,
-        pick: (node, id) => {
-          if (typeof pickSessionAction === 'function' && pickSessionAction(node, id)) return
-          setCtx({ kind: 'session', payload: node, x: 0, y: 0 })
-          if (typeof handleCtxPick === 'function') handleCtxPick(id)
-        },
         rename: (node) => setDialog({ kind: 'sess-rename', session: node }),
         hoverBody: (node, status) => sessionHoverBody(node, status),
         explainArchived: () => {
@@ -9274,6 +9404,17 @@ window.__ModuleLoader__.load({
             )]
           : [E('div', { key: 'empty', className: 'bw-empty' }, searching ? t('empty.search') : (phase === 'pending' ? '…' : t('empty')))]
       }
+      // Keyed-row handoff for AnimatedRows: every body row carries a stable
+      // data-row-key (the element's React key when present, array index
+      // otherwise) and the key list feeds the component's sameRows guard.
+      bodyRows = bodyRows.filter((el) => el !== null && el !== false && el !== undefined)
+      const bodyRowKeys = []
+      bodyRows = bodyRows.map((el, index) => {
+        if (!el || typeof el !== 'object') return el
+        const rowKey = el.key != null ? String(el.key) : 'row-' + index
+        bodyRowKeys.push(rowKey)
+        return React.cloneElement(el, { 'data-row-key': rowKey, dataRowKey: rowKey })
+      })
 
       /* ------------------------- context menu ------------------------ */
 
@@ -9886,13 +10027,17 @@ window.__ModuleLoader__.load({
             disabled: flowBusy,
           }, icon('IconProjectAddOutline16')) : null,
         ),
-        E('div', {
-          ref: treeRef,
+        E(AnimatedRows, {
           className: 'bw-tree',
-          role: 'tree',
-          'aria-label': t('title'),
-          'data-bw-density': density,
-          ...(showCount ? { 'data-bw-count': '' } : {}),
+          label: t('title'),
+          rowKeys: bodyRowKeys,
+          // Drag reorders rows itself; animating under it fights the gesture.
+          ready: drag === null,
+          // View-replacing switches (search, filter, density, count) settle
+          // instead of gliding — official resetKey semantics.
+          resetKey: JSON.stringify([density, showCount, searching, archivedOnly, normalizedQuery]),
+          innerRef: treeRef,
+          attrs: { 'data-bw-density': density, ...(showCount ? { 'data-bw-count': '' } : {}) },
         }, bodyRows),
         dialogElement,
         (ctx !== null && typeof ui.Menu === 'function') ? E(ui.Menu, {
@@ -10159,6 +10304,10 @@ window.__ModuleLoader__.load({
         // closure live, so every render and every menu build re-asks; hosts
         // without the service keep returning null, which simply hides the row.
         presetFaceOf: () => presetFace,
+        // Issue #13: the PRIVATE store face — a stable getter like presetFaceOf
+        // (the slot renderer caches inject results; keep the same discipline
+        // even though this face never changes).
+        localStore: () => ({ useStore: useViewStore, actions: viewInstance.actions }),
         // The shipped sidebar's OWN face (dsh 0.1.7-rc.2): the shortcut request
         // channel and the catalog of effective keybindings. Both belong to the
         // entry this seat shadows, so they are read off the ledger and consumed
@@ -10273,6 +10422,22 @@ window.__ModuleLoader__.load({
       // One shared store handle: the browser and the settings page must see the
       // same persisted state (expansion, folder list, prefs, styling).
       const viewStore = createViewStore()
+      // Issue #13 hardening: our OWN store instance. The renderer synthesizes
+      // props.useStore/actions from the seat's store handle — and a third-party
+      // occupant wrapper (im-connect, issue #13) that shadows the workspace seat
+      // replaces those props with ITS channel store, silently severing every
+      // local read and write. The bundle therefore keeps one PRIVATE instance,
+      // handed to the components through the inject face: local state no longer
+      // depends on what the renderer (or anything shadowing it) put into props.
+      // Same persist key, so on a healthy host both instances hydrate the same
+      // snapshot; the renderer-side instance simply never writes again (no
+      // consumer dispatches it) and ours becomes the only live one.
+      const viewInstance = viewStore.create()
+      const useViewStore = typeof React.useSyncExternalStore === 'function'
+        ? (selector) => React.useSyncExternalStore(
+          viewInstance.subscribe,
+          () => { try { return selector(viewInstance.getSnapshot()) } catch (error) { return undefined } })
+        : null
 
       // Cold-restart title fallback (see the title-cache block). Hydration
       // reads localStorage synchronously here, before the first render, so a
@@ -10348,6 +10513,9 @@ window.__ModuleLoader__.load({
           key: 'dsh-better-workspace',
           locale: NS,
           store: viewStore,
+          // Issue #13: the settings card reads/writes through our PRIVATE store
+          // instance too (same rationale as the browser seat).
+          inject: () => ({ localStore: () => ({ useStore: useViewStore, actions: viewInstance.actions }) }),
         },
         BetterWorkspacePluginCard,
       ))