@aryacode/dsh-aryacode-polish 0.8.2 → 0.10.0

package/lib/client.js

@@ -43,11 +43,17 @@ window.__ModuleLoader__.load({
         "label": "Right-panel screenshot",
         "description": "Copy the open right panel into the chat as an image, and onto the clipboard.",
         "defaultOn": true
+      },
+      {
+        "key": "betterWorkspace",
+        "label": "Better workspace",
+        "description": "Replace the sidebar workspace list with our own tree: workspaces with their sessions, a right-click menu on a workspace (open, copy path, remove), and the shipped session menu inside it.",
+        "defaultOn": true
       }
     ]
     const ROW_ID = "polish"
     const ROW_KEY = "@aryacode/dsh-aryacode-polish" + '#' + ROW_ID
-    const CLIENT_VERSION = "0.8.2"
+    const CLIENT_VERSION = "0.10.0"
 
 /* html2canvas 1.4.1 — MIT, vendored from vendor/html2canvas.min.js.
  * A UMD build, so it assigns itself to globalThis; face.js reads it lazily. */
@@ -193,6 +199,904 @@ window.__ModuleLoader__.load({
         clearTimeout(timer)
       }
     }
+    /**
+     * Better workspace - our own sidebar browser, registered into `sidebar.workspaces`
+     * at `priority: -1` so it shadows the shipped one while the switch is on.
+     *
+     * Two rules shape this file:
+     *
+     * 1. No `children` declaration. A child-hole declaration is exclusive: the shipped
+     *    entry already owns `session.menu.item` and its siblings, so re-declaring them
+     *    throws and the seat is silently dropped. We read the shipped occupants off the
+     *    slots service instead and render them ourselves, reproducing the two props the
+     *    renderer would have synthesised - `t` (bound to the occupant's own namespace)
+     *    and `useMenuOpenState` (the row's open-state pair, through the owner's declared
+     *    hook factory).
+     *
+     * 2. The stock browser has to come back the moment the switch goes off, so the seat
+     *    is added and disposed with the switch rather than always registered.
+     */
+
+    /** Session rows read newest first, then by title, so the tree never reshuffles. */
+    function sessionRank(a, b) {
+      const left = a && a.updatedAt
+      const right = b && b.updatedAt
+      // Only a real timestamp may reorder: SessionSummary carries none in this Shell,
+      // and the Host's own list order is the display order.
+      if (typeof left === 'number' && typeof right === 'number' && left !== right) return right - left
+      return 0
+    }
+
+    /** Pair each workspace with the session summaries it owns, in display order. */
+    function workspaceRows(workspaces, sessions) {
+      const byId = new Map()
+      for (const session of sessions || []) {
+        if (session && session.id !== undefined) byId.set(String(session.id), session)
+      }
+      return (workspaces || []).map(workspace => ({
+        workspace,
+        sessions: (workspace && workspace.sessionIds ? workspace.sessionIds : [])
+          .map(id => byId.get(String(id)))
+          .filter(Boolean)
+          .sort(sessionRank),
+      }))
+    }
+
+    /** Snapshot of an observable source (`{ subscribe, getSnapshot }`) as React state. */
+    function useLive(source) {
+      const read = React.useCallback(() => {
+        try {
+          return source.getSnapshot()
+        } catch {
+          return undefined
+        }
+      }, [source])
+      const subscribe = React.useCallback(listener => {
+        try {
+          return source.subscribe(listener)
+        } catch {
+          return () => {}
+        }
+      }, [source])
+      return React.useSyncExternalStore(subscribe, read, read)
+    }
+
+    /**
+     * The shipped `sidebar.workspaces` registration, which is the only place the child
+     * menu declaration lives. Returns undefined before the shipped package has
+     * registered or after we shadow it away at a different priority.
+     */
+    function shippedBrowserEntry(slots) {
+      try {
+        const entries = slots.entries('sidebar.workspaces') || []
+        return entries.find(entry => entry && entry.options && !(Number(entry.options.priority) < 0)) || undefined
+      } catch {
+        return undefined
+      }
+    }
+
+    /** Everything a row menu needs to render the shipped occupant list faithfully. */
+    function menuRuntime(ctx, slots, standard) {
+      const owner = shippedBrowserEntry(slots)
+      const children = owner && owner.children ? owner.children : undefined
+      const spec = children ? children['sidebar.workspaces.session.menu.item'] : undefined
+      const hooks = spec && spec.inject ? spec.inject.hooks : undefined
+      let injected = {}
+      if (owner && typeof owner.inject === 'function') {
+        try {
+          injected = owner.inject(standard) || {}
+        } catch {
+          injected = {}
+        }
+      }
+      let locale
+      try {
+        locale = ctx.get('locale')
+      } catch {
+        locale = undefined
+      }
+      return {
+        hooks,
+        injected,
+        standard,
+        bindHook: (hookContext) => {
+          if (!hooks || typeof hooks.menuOpenState !== 'function') return () => hookContext
+          try {
+            return hooks.menuOpenState(standard, hookContext)
+          } catch {
+            return () => hookContext
+          }
+        },
+        /**
+         * The standard hooks the shipped rows call. The slot renderer synthesises them
+         * from the Shell's own sources; we derive the same answers from the snapshots we
+         * already subscribe to, so Pin/Rename/Fork/Archive render instead of throwing.
+         */
+        standards: (workspacesSnapshot) => {
+          const snapshot = workspacesSnapshot || {}
+          const pinned = new Set(snapshot.pinnedSessionIds || [])
+          const archived = new Set(snapshot.archivedSessionIds || [])
+          const shortcuts = hooks && hooks.shortcuts && typeof hooks.shortcuts.getSnapshot === 'function'
+            ? hooks.shortcuts.getSnapshot()
+            : []
+          return {
+            usePinned: selector => (selector ? selector(pinned) : pinned),
+            useArchived: selector => (selector ? selector(archived) : archived),
+            // Access is the Shell's answer to give; offering the row and letting the
+            // call fail is friendlier than hiding a menu that would have worked.
+            useSessionAccess: () => true,
+            useShortcuts: selector => (selector ? selector(shortcuts) : shortcuts),
+          }
+        },
+        injectFor: (entry, standard) => {
+          const own = entry && typeof entry.inject === 'function' ? entry.inject(standard) : undefined
+          return Object.assign({}, injected, own || {})
+        },
+        translate: (ns) => {
+          if (locale && typeof locale.bind === 'function') {
+            try {
+              return locale.bind(ns)
+            } catch {
+              return undefined
+            }
+          }
+          return undefined
+        },
+      }
+    }
+
+    /** One shipped occupant, mounted per row so it keeps its own state across renders. */
+    function ShippedMenuRow({ entry, session, runtime, workspacesSnapshot }) {
+      const menuOpenState = React.useState([false, () => {}])
+      const useMenuOpenState = React.useMemo(
+        () => runtime.bindHook(menuOpenState),
+        [runtime, menuOpenState],
+      )
+      const t = React.useMemo(() => runtime.translate(entry.locale), [runtime, entry.locale])
+      runtime.workspacesSnapshot = workspacesSnapshot
+      const props = Object.assign({}, session, runtime.injectFor(entry, runtime.standard), runtime.standards(runtime.workspacesSnapshot), { useMenuOpenState })
+      if (t !== undefined) props.t = t
+      return React.createElement(entry.component, props)
+    }
+
+    /**
+     * Keeps one broken third-party row from blanking the whole tree. Built lazily so
+     * this file stays importable from a plain Node test, where React is absent.
+     */
+    function rowBoundary() {
+      if (typeof React === 'undefined') {
+        return function Passthrough(props) {
+          return props.children
+        }
+      }
+      return class RowBoundary extends React.Component {
+        constructor(props) {
+          super(props)
+          this.state = { failed: false }
+        }
+
+        static getDerivedStateFromError() {
+          return { failed: true }
+        }
+
+        render() {
+          return this.state.failed ? null : this.props.children
+        }
+      }
+    }
+
+    /** Our own chrome for a row menu: the shipped occupants, in their declared order. */
+    function rowMenuEntries(slots) {
+      try {
+        return (slots.entries('sidebar.workspaces.session.menu.item') || [])
+          .slice()
+          .sort((a, b) => (Number(a.options && a.options.order) || 0) - (Number(b.options && b.options.order) || 0))
+      } catch {
+        return []
+      }
+    }
+
+    const WS_FONT = 'calc(var(--dsh-content-font-size-secondary, 13px) - 1px)'
+    const WS_ROW = {
+      display: 'flex',
+      alignItems: 'center',
+      gap: '6px',
+      boxSizing: 'border-box',
+      width: '100%',
+      height: '28px',
+      padding: '0 6px',
+      border: 'none',
+      borderRadius: 'var(--dsw-radius-sm, 6px)',
+      background: 'transparent',
+      color: 'var(--dsw-alias-label-secondary, #61666b)',
+      fontSize: WS_FONT,
+      font: 'inherit',
+      cursor: 'pointer',
+      textAlign: 'left',
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+    }
+    const WS_TITLE = { flex: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis' }
+    const WS_COUNT = { flex: 'none', color: 'var(--dsw-alias-label-quaternary, #8a8a8a)', fontVariantNumeric: 'tabular-nums' }
+    const WS_MENU = {
+      position: 'fixed',
+      zIndex: 1200,
+      minWidth: '180px',
+      padding: '4px',
+      borderRadius: 'var(--dsw-radius-md, 8px)',
+      border: '0.5px solid var(--dsw-alias-border-l2, rgba(0,0,0,0.12))',
+      backgroundColor: 'Canvas',
+      backgroundImage:
+        'linear-gradient(var(--dsw-specific-menu, rgba(248,249,250,0.94)), var(--dsw-specific-menu, rgba(248,249,250,0.94)))',
+      boxShadow: 'var(--dsw-elevation-prominent, 0 3px 8px rgba(0,0,0,0.06))',
+      color: 'var(--dsw-alias-label-secondary, #61666b)',
+      fontSize: WS_FONT,
+    }
+    const WS_MENU_ITEM = {
+      display: 'flex',
+      alignItems: 'center',
+      gap: '8px',
+      boxSizing: 'border-box',
+      width: '100%',
+      height: '28px',
+      padding: '0 8px',
+      border: 'none',
+      borderRadius: 'var(--dsw-radius-sm, 6px)',
+      background: 'transparent',
+      color: 'inherit',
+      font: 'inherit',
+      cursor: 'pointer',
+      textAlign: 'left',
+      whiteSpace: 'nowrap',
+    }
+
+    function CaretGlyph({ open }) {
+      return React.createElement('svg', {
+        viewBox: '0 0 16 16',
+        width: 12,
+        height: 12,
+        fill: 'none',
+        stroke: 'currentColor',
+        strokeWidth: 1.4,
+        strokeLinecap: 'round',
+        strokeLinejoin: 'round',
+        'aria-hidden': true,
+        style: { flex: 'none', transform: open ? 'rotate(90deg)' : 'none', transition: 'transform 120ms ease' },
+      }, React.createElement('path', { d: 'M6 3.5 10.5 8 6 12.5' }))
+    }
+
+    function FolderGlyph() {
+      return React.createElement('svg', {
+        viewBox: '0 0 16 16',
+        width: 14,
+        height: 14,
+        fill: 'none',
+        stroke: 'currentColor',
+        strokeWidth: 1.1,
+        strokeLinecap: 'round',
+        strokeLinejoin: 'round',
+        'aria-hidden': true,
+        style: { flex: 'none' },
+      }, React.createElement('path', { d: 'M2 4.5h4l1.2 1.5H14v6.2a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1z' }))
+    }
+
+    function DotsGlyph() {
+      return React.createElement('svg', {
+        viewBox: '0 0 16 16',
+        width: 14,
+        height: 14,
+        fill: 'currentColor',
+        'aria-hidden': true,
+      }, [3.5, 8, 12.5].map(x => React.createElement('circle', { key: x, cx: x, cy: 8, r: 1.1 })))
+    }
+
+    /** A small anchored menu; every row is the caller's, so the tree owns no policy. */
+    function RowMenu({ anchor, onClose, children }) {
+      const style = Object.assign({}, WS_MENU, {
+        top: Math.round(anchor.top),
+        left: Math.round(anchor.left),
+      })
+      React.useEffect(() => {
+        const close = event => {
+          if (event && event.type === 'keydown' && event.key !== 'Escape') return
+          onClose()
+        }
+        const pointer = event => {
+          if (event && event.target && event.target.closest && event.target.closest('[data-polish-ws-menu]')) return
+          onClose()
+        }
+        document.addEventListener('pointerdown', pointer, true)
+        document.addEventListener('keydown', close, true)
+        return () => {
+          document.removeEventListener('pointerdown', pointer, true)
+          document.removeEventListener('keydown', close, true)
+        }
+      }, [onClose])
+      return ReactDOM.createPortal(
+        React.createElement('div', { 'data-polish-ws-menu': 'row', style }, children),
+        document.body,
+      )
+    }
+
+    function workspaceLabel(workspace) {
+      const title = workspace && typeof workspace.title === 'string' ? workspace.title.trim() : ''
+      const id = String((workspace && workspace.workspaceId) || '')
+      // The Host sets the default workspace's title to its own id, so a title that
+      // merely repeats the id is not a name a reader wants to see.
+      if (title && title !== id) return title
+      const words = id.replace(/[-_]+/g, ' ').trim()
+      if (!words) return 'Workspace'
+      return words.charAt(0).toUpperCase() + words.slice(1)
+    }
+
+    function filterTree(rows, query, pinned) {
+      const needle = String(query || '').trim().toLowerCase()
+      const ordered = rows.map(({ workspace, sessions }) => {
+        const hoisted = []
+        const rest = []
+        ;(sessions || []).forEach(row => {
+          if (pinned && pinned.has(row.id)) hoisted.push(row)
+          else rest.push(row)
+        })
+        return { workspace, sessions: hoisted.concat(rest) }
+      })
+      if (!needle) return ordered
+      const matched = []
+      ordered.forEach(({ workspace, sessions }) => {
+        const label = workspaceLabel(workspace).toLowerCase()
+        if (label.includes(needle)) {
+          matched.push({ workspace, sessions })
+          return
+        }
+        const hits = sessions.filter(row => String(row.displayTitle || row.id).toLowerCase().includes(needle))
+        if (hits.length > 0) matched.push({ workspace, sessions: hits })
+      })
+      return matched
+    }
+
+    /**
+     * The rows a keyboard walk visits, in the order they are drawn. A filter opens every
+     * group it kept, because a match you cannot see is not a match.
+     */
+    function flattenRows(rows, expanded, query) {
+      const filtering = String(query || '').trim().length > 0
+      const flat = []
+      rows.forEach(({ workspace, sessions }) => {
+        flat.push({ kind: 'workspace', id: workspace.workspaceId, workspaceId: workspace.workspaceId })
+        const open = filtering || expanded[workspace.workspaceId] !== false
+        if (!open) return
+        ;(sessions || []).forEach(row => {
+          flat.push({ kind: 'session', id: row.id, workspaceId: workspace.workspaceId })
+        })
+      })
+      return flat
+    }
+
+    function moveBefore(list, movingId, beforeId) {
+      const from = list.findIndex(item => item.id === movingId)
+      const to = list.findIndex(item => item.id === beforeId)
+      if (from < 0 || to < 0 || from === to) return list
+      const next = list.slice()
+      const [moving] = next.splice(from, 1)
+      const target = next.findIndex(item => item.id === beforeId)
+      next.splice(target < 0 ? next.length : target, 0, moving)
+      return next
+    }
+
+    const WS_FILTER = {
+      margin: '2px 2px 6px',
+      padding: '4px 8px',
+      border: '0.5px solid var(--dsw-alias-border-l2, rgba(0, 0, 0, 0.12))',
+      borderRadius: 'var(--dsw-radius-sm)',
+      background: 'transparent',
+      color: 'var(--dsw-alias-label-primary, inherit)',
+      font: 'inherit',
+      fontSize: 'calc(var(--dsh-content-font-size-secondary, 13px) - 2px)',
+      outline: 'none',
+    }
+
+    const WS_ROW_ACTION = {
+      flex: 'none',
+      width: '20px',
+      height: '20px',
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      padding: 0,
+      border: 'none',
+      borderRadius: 'var(--dsw-radius-sm)',
+      background: 'transparent',
+      color: 'var(--dsw-alias-label-tertiary)',
+      cursor: 'pointer',
+    }
+
+    const WS_DOT = {
+      flex: 'none',
+      width: '6px',
+      height: '6px',
+      borderRadius: '50%',
+      marginRight: '2px',
+      background: 'var(--dsw-alias-label-success, #12b76a)',
+    }
+
+    const WS_PIN = {
+      flex: 'none',
+      fontSize: '9px',
+      lineHeight: 1,
+      color: 'var(--dsw-alias-label-quaternary, #8a8a8a)',
+    }
+
+    const WS_PIN_COUNT = WS_PIN
+
+    const WS_COUNT_NOTE = {
+      margin: '2px 4px 0',
+      fontSize: 'calc(var(--dsh-content-font-size-secondary, 13px) - 3px)',
+      color: 'var(--dsw-alias-label-quaternary, #8a8a8a)',
+    }
+
+    function BetterWorkspace(props) {
+      const services = props.services || {}
+      const { ctx, slots } = services
+      const standard = { wide: props.wide === true, expandSidebar: props.expandSidebar }
+      const [expanded, setExpanded] = React.useState({})
+      const [menu, setMenu] = React.useState(null)
+      const [armed, setArmed] = React.useState(null)
+      const [adding, setAdding] = React.useState(false)
+      const [notice, setNotice] = React.useState('')
+      const [query, setQuery] = React.useState('')
+      const [cursor, setCursor] = React.useState(-1)
+      const [hover, setHover] = React.useState(null)
+      const [drag, setDrag] = React.useState(null)
+      const [dropping, setDropping] = React.useState(null)
+      const filterRef = React.useRef(null)
+
+      const workspaceState = useLive(services.workspacesLive)
+      const sessionState = useLive(services.sessionsLive)
+      const workspaceList = (workspaceState && (workspaceState.items || workspaceState.workspaces)) || []
+      const sessionList = sessionState && sessionState.ids && sessionState.byId
+        ? sessionState.ids.map(id => sessionState.byId[id]).filter(Boolean)
+        : (sessionState && (sessionState.items || sessionState.sessions)) || []
+      const pinned = React.useMemo(
+        () => new Set((workspaceState && workspaceState.pinnedSessionIds) || []),
+        [workspaceState],
+      )
+      const allRows = workspaceRows(workspaceList, sessionList)
+      const rows = filterTree(allRows, query, pinned)
+      const walk = flattenRows(rows, expanded, query)
+      const runtime = React.useMemo(() => menuRuntime(ctx, slots, standard), [ctx, slots, standard.wide])
+      const RowBoundary = React.useMemo(() => rowBoundary(), [])
+      const entries = React.useMemo(() => rowMenuEntries(slots), [slots, workspaceList.length, sessionList.length])
+      const totalCount = allRows.reduce((sum, row) => sum + row.sessions.length, 0)
+      const shownCount = rows.reduce((sum, row) => sum + row.sessions.length, 0)
+      const allFolded = rows.length > 0 && rows.every(row => expanded[row.workspace.workspaceId] === false)
+
+      React.useEffect(() => {
+        if (cursor >= walk.length) setCursor(walk.length - 1)
+      }, [walk.length, cursor])
+
+      React.useEffect(() => {
+        const onShortcut = (event) => {
+          const node = event.target
+          const typing = node && (node.tagName === 'INPUT' || node.tagName === 'TEXTAREA' || node.isContentEditable)
+          if (event.key === '/' && !typing) {
+            event.preventDefault()
+            if (filterRef.current && filterRef.current.focus) filterRef.current.focus()
+          }
+        }
+        document.addEventListener('keydown', onShortcut)
+        return () => document.removeEventListener('keydown', onShortcut)
+      }, [])
+
+      const openMenu = (event, row, workspace) => {
+        event.preventDefault()
+        event.stopPropagation()
+        setMenu({ kind: 'session', row, workspace, anchor: { top: event.clientY, left: event.clientX } })
+      }
+      const openWorkspaceMenu = (event, workspace) => {
+        event.preventDefault()
+        event.stopPropagation()
+        setArmed(null)
+        setMenu({ kind: 'workspace', workspace, anchor: { top: event.clientY, left: event.clientX } })
+      }
+      const closeMenu = React.useCallback(() => setMenu(null), [])
+
+      const toggleWorkspace = (workspaceId) => {
+        setExpanded((prev) => {
+          const next = Object.assign({}, prev)
+          next[workspaceId] = prev[workspaceId] === false
+          return next
+        })
+      }
+      const foldAll = () => {
+        if (allFolded) { setExpanded({}); return }
+        const next = {}
+        rows.forEach((row) => { next[row.workspace.workspaceId] = false })
+        setExpanded(next)
+      }
+
+      const reorderWorkspace = async (movingId, beforeId) => {
+        if (!services.reorderWorkspace || !movingId || movingId === beforeId) return
+        try { await services.reorderWorkspace(movingId, beforeId) } catch { setNotice('Could not reorder workspaces.') }
+      }
+      const reorderSession = async (workspaceId, movingId, beforeId) => {
+        if (!services.reorderSession || !movingId || movingId === beforeId) return
+        try { await services.reorderSession(workspaceId, movingId, beforeId) } catch { setNotice('Could not reorder sessions.') }
+      }
+      const dropOnWorkspace = (targetId) => {
+        const moving = drag
+        setDrag(null)
+        setDropping(null)
+        if (!moving || moving.kind !== 'workspace') return
+        void reorderWorkspace(moving.id, targetId)
+      }
+      const dropOnSession = (workspaceId, targetId) => {
+        const moving = drag
+        setDrag(null)
+        setDropping(null)
+        if (!moving || moving.kind !== 'session' || moving.id === targetId) return
+        if (moving.workspaceId !== workspaceId) { setNotice('A session stays in the workspace it belongs to.'); return }
+        void reorderSession(workspaceId, moving.id, targetId)
+      }
+
+      const activate = (item) => {
+        if (!item) return
+        if (item.kind === 'workspace') toggleWorkspace(item.workspaceId)
+        else services.openSession(item.id)
+      }
+      const onKeyDown = (event) => {
+        if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+          if (walk.length === 0) return
+          event.preventDefault()
+          const step = event.key === 'ArrowDown' ? 1 : -1
+          setCursor(Math.min(walk.length - 1, Math.max(0, cursor + step)))
+          return
+        }
+        if (event.key === 'Enter') {
+          if (cursor < 0) return
+          event.preventDefault()
+          activate(walk[cursor])
+          return
+        }
+        if (event.key === 'Escape') {
+          if (query) { setQuery(''); return }
+          if (menu) { closeMenu(); return }
+          setCursor(-1)
+        }
+      }
+
+      const workspaceMenu = menu && menu.kind === 'workspace'
+        ? React.createElement(RowMenu, { anchor: menu.anchor, onClose: closeMenu },
+          React.createElement('button', {
+            type: 'button',
+            style: WS_MENU_ITEM,
+            onClick: async () => {
+              closeMenu()
+              try { await services.openFolder(menu.workspace.path) } catch {}
+            },
+          }, 'Open in File Explorer'),
+          React.createElement('button', {
+            type: 'button',
+            style: WS_MENU_ITEM,
+            onClick: async () => {
+              closeMenu()
+              try { await navigator.clipboard.writeText(menu.workspace.path) } catch {}
+            },
+          }, 'Copy path'),
+          React.createElement('button', {
+            type: 'button',
+            style: Object.assign({}, WS_MENU_ITEM, { color: 'var(--dsw-alias-label-error, #d92d20)' }),
+            onClick: async () => {
+              const workspace = menu.workspace
+              if (!armed || armed !== workspace.workspaceId) {
+                setArmed(workspace.workspaceId)
+                setMenu(Object.assign({}, menu))
+                return
+              }
+              closeMenu()
+              try { await services.removeWorkspace(workspace.workspaceId) } catch {}
+            },
+          }, armed && armed === menu.workspace.workspaceId ? 'Remove workspace?' : 'Remove workspace'))
+        : null
+
+      const sessionMenu = menu && menu.kind === 'session'
+        ? React.createElement(RowMenu, { anchor: menu.anchor, onClose: closeMenu },
+          entries.map((entry, index) => React.createElement(RowBoundary, { key: (entry.options && entry.options.id) || index },
+            React.createElement(ShippedMenuRow, {
+              entry,
+              runtime,
+              workspacesSnapshot: workspaceState,
+              session: { sessionId: menu.row.id, displayTitle: menu.row.displayTitle, session: menu.row },
+            }))))
+        : null
+
+      const children = []
+
+      children.push(React.createElement('div', { key: 'header', 'data-polish-ws': 'header', style: WS_HEADER },
+        React.createElement('span', { style: WS_HEADER_TITLE }, 'Workspaces'),
+        React.createElement('button', {
+          key: 'fold',
+          type: 'button',
+          'data-polish-ws-fold': 'true',
+          title: allFolded ? 'Expand all' : 'Collapse all',
+          'aria-label': allFolded ? 'Expand all workspaces' : 'Collapse all workspaces',
+          style: WS_ADD,
+          onClick: foldAll,
+        }, allFolded ? '⌄' : '⌃'),
+        React.createElement('button', {
+          key: 'add',
+          type: 'button',
+          'data-polish-ws-add': 'true',
+          title: 'Add a workspace',
+          'aria-label': 'Add a workspace',
+          style: WS_ADD,
+          onClick: () => { setAdding(true); setNotice('') },
+        }, '+')))
+
+      children.push(React.createElement('input', {
+        key: 'filter',
+        ref: filterRef,
+        'data-polish-ws-filter': 'true',
+        type: 'search',
+        value: query,
+        placeholder: 'Filter workspaces and sessions',
+        'aria-label': 'Filter workspaces and sessions',
+        style: WS_FILTER,
+        onChange: (event) => { setQuery(event.target.value); setCursor(-1) },
+        onKeyDown: (event) => {
+          if (event.key === 'Escape') { event.stopPropagation(); setQuery('') }
+        },
+      }))
+
+      if (notice) {
+        children.push(React.createElement('div', { key: 'notice', 'data-polish-ws': 'notice', style: WS_NOTICE }, notice))
+      }
+
+      if (adding && services.sourceFlow) {
+        children.push(React.createElement(services.sourceFlow, {
+          key: 'flow',
+          configForms: services.configForms(),
+          open: true,
+          onPicked: async (path) => {
+            if (!path) return
+            try {
+              await services.createWorkspace(path)
+              setAdding(false)
+            } catch (error) {
+              setNotice((error && error.message) || 'Could not add that folder.')
+            }
+          },
+          onCancel: () => setAdding(false),
+          onError: (message) => setNotice(message || 'Could not add that folder.'),
+        }))
+      }
+
+      if (rows.length === 0) {
+        children.push(React.createElement('div', {
+          key: 'empty',
+          style: { padding: '8px 6px', color: 'var(--dsw-alias-label-quaternary, #8a8a8a)' },
+        }, query ? 'Nothing matches "' + query + '".' : 'No workspace yet.'))
+      }
+
+      let index = -1
+      rows.forEach((group) => {
+        const workspace = group.workspace
+        const sessions = group.sessions
+        index += 1
+        const open = expanded[workspace.workspaceId] !== false
+        const focused = cursor === index
+        const hovered = hover === 'workspace:' + workspace.workspaceId
+        const dropHere = dropping === 'workspace:' + workspace.workspaceId
+
+        children.push(React.createElement('div', {
+          key: 'workspace:' + workspace.workspaceId,
+          style: { display: 'flex', flexDirection: 'column' },
+        },
+        React.createElement('div', {
+          'data-polish-ws-row': workspace.workspaceId,
+          draggable: true,
+          title: workspace.path || workspaceLabel(workspace),
+          style: Object.assign({}, WS_ROW, {
+            fontWeight: 500,
+            background: dropHere
+              ? 'var(--dsw-alias-interactive-bg-hover, rgba(0, 0, 0, 0.05))'
+              : (focused ? 'var(--dsw-alias-interactive-bg-hover, rgba(0, 0, 0, 0.04))' : undefined),
+            boxShadow: focused ? 'inset 0 0 0 1px var(--dsw-alias-border-l2, rgba(0, 0, 0, 0.12))' : undefined,
+          }),
+          onClick: () => toggleWorkspace(workspace.workspaceId),
+          onContextMenu: (event) => openWorkspaceMenu(event, workspace),
+          onMouseEnter: () => setHover('workspace:' + workspace.workspaceId),
+          onMouseLeave: () => setHover(null),
+          onDragStart: () => setDrag({ kind: 'workspace', id: workspace.workspaceId }),
+          onDragOver: (event) => {
+            if (!drag || drag.kind !== 'workspace' || drag.id === workspace.workspaceId) return
+            event.preventDefault()
+            setDropping('workspace:' + workspace.workspaceId)
+          },
+          onDragLeave: () => setDropping(null),
+          onDrop: (event) => { event.preventDefault(); dropOnWorkspace(workspace.workspaceId) },
+        },
+        React.createElement(CaretGlyph, { open }),
+        React.createElement(FolderGlyph),
+        React.createElement('span', { style: WS_TITLE }, workspaceLabel(workspace)),
+        React.createElement('span', { style: WS_COUNT }, String(sessions.length)),
+        hovered || focused
+          ? React.createElement('button', {
+            type: 'button',
+            'data-polish-ws-menu': 'workspace',
+            'aria-label': 'Workspace menu',
+            style: WS_ROW_ACTION,
+            onClick: (event) => openWorkspaceMenu(event, workspace),
+          }, React.createElement(DotsGlyph))
+          : null)))
+
+        if (open) {
+          sessions.forEach((row) => {
+            index += 1
+            const rowFocused = cursor === index
+            const rowHovered = hover === 'session:' + row.id
+            const lifted = dropping === 'session:' + row.id
+            children.push(React.createElement('div', {
+              key: 'session:' + row.id,
+              'data-polish-ws-session': row.id,
+              draggable: true,
+              style: Object.assign({}, WS_ROW, {
+                paddingLeft: '24px',
+                opacity: drag && drag.kind === 'session' && drag.id === row.id ? 0.5 : undefined,
+                background: lifted
+                  ? 'var(--dsw-alias-interactive-bg-hover, rgba(0, 0, 0, 0.05))'
+                  : (rowFocused ? 'var(--dsw-alias-interactive-bg-hover, rgba(0, 0, 0, 0.04))' : undefined),
+                boxShadow: rowFocused ? 'inset 0 0 0 1px var(--dsw-alias-border-l2, rgba(0, 0, 0, 0.12))' : undefined,
+              }),
+              onClick: () => services.openSession(row.id),
+              onContextMenu: (event) => openMenu(event, row, workspace),
+              onMouseEnter: () => setHover('session:' + row.id),
+              onMouseLeave: () => setHover(null),
+              onDragStart: () => setDrag({ kind: 'session', id: row.id, workspaceId: workspace.workspaceId }),
+              onDragOver: (event) => {
+                if (!drag || drag.kind !== 'session' || drag.id === row.id) return
+                event.preventDefault()
+                setDropping('session:' + row.id)
+              },
+              onDragLeave: () => setDropping(null),
+              onDrop: (event) => { event.preventDefault(); dropOnSession(workspace.workspaceId, row.id) },
+            },
+            row.running ? React.createElement('span', { style: WS_DOT, title: 'Running' }) : null,
+            pinned.has(row.id) ? React.createElement('span', { style: WS_PIN, title: 'Pinned' }, '\u2605') : null,
+            React.createElement('span', { style: WS_TITLE }, row.displayTitle || row.id),
+            rowHovered || rowFocused
+              ? React.createElement('button', {
+                type: 'button',
+                'data-polish-ws-menu': 'session',
+                'aria-label': 'Session menu',
+                style: WS_ROW_ACTION,
+                onClick: (event) => openMenu(event, row, workspace),
+              }, React.createElement(DotsGlyph))
+              : null))
+          })
+        }
+      })
+
+      return React.createElement('div', {
+        'data-polish-ws': 'tree',
+        tabIndex: 0,
+        role: 'tree',
+        'aria-label': 'Workspaces',
+        onKeyDown: onKeyDown,
+        style: {
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '1px',
+          minHeight: 0,
+          height: '100%',
+          overflowY: 'auto',
+          overflowX: 'hidden',
+          padding: '2px 6px 12px',
+          outline: 'none',
+        },
+      },
+      children,
+      shownCount < totalCount
+        ? React.createElement('div', { key: 'count', style: WS_COUNT_NOTE }, String(shownCount) + ' of ' + String(totalCount) + ' sessions')
+        : null,
+      sessionMenu,
+      workspaceMenu)
+    }
+
+    /**
+     * Add and dispose the seat with the switch. A `single` slot renders its LOWEST
+     * priority occupant, so presence is the only way to stand aside: without this the
+     * stock browser would be shadowed even while the switch is off.
+     */
+    function installWorkspaceSeat(ctx, configForms, extras = {}) {
+      let dispose
+      let unlisten
+      const scope = () => {
+        try {
+          return configForms()
+        } catch {
+          return undefined
+        }
+      }
+      const readSwitch = () => {
+        const forms = scope()
+        if (!forms || typeof forms.get !== 'function') return true
+        const live = forms.get(ROW_ID)
+        if (!live || typeof live.getSnapshot !== 'function') return true
+        let snapshot
+        try {
+          snapshot = live.getSnapshot()
+        } catch {
+          return true
+        }
+        const value = snapshot && (snapshot.value || (snapshot.state && snapshot.state.value))
+        if (!value || typeof value !== 'object') return true
+        if (value.betterWorkspace === undefined) return true
+        return value.betterWorkspace === true || (value.betterWorkspace && value.betterWorkspace.get && value.betterWorkspace.get() === true)
+      }
+      const install = () => {
+        if (dispose !== undefined) return
+        try {
+          dispose = ctx.inject(
+            ['slots', 'sessions', 'workspaces', 'uiWorkspace', 'locale', 'remote', 'remote.session'],
+            (seated) => {
+              const services = {
+                ctx: seated,
+                configForms,
+                sourceFlow: extras.sourceFlow,
+                slots: seated.slots,
+                workspacesLive: seated.workspaces.list,
+                sessionsLive: seated.sessions.list,
+                openSession: (id) => seated.uiWorkspace.openSession(id),
+                createWorkspace: (path) => seated.workspaces.create({ path }),
+                reorderWorkspace: (movingId, beforeId) => seated.workspaces.insertBefore(movingId, beforeId),
+                reorderSession: (workspaceId, movingId, beforeId) => seated.workspaces.insertSessionBefore(workspaceId, movingId, beforeId),
+                removeWorkspace: (id) => seated.workspaces.delete(id),
+                openFolder: async (path) => {
+                  const answer = await seated.remote.session.openWorkspacePath({ path })
+                  if (answer && answer.ok === false) throw new Error('cannot open the folder')
+                },
+              }
+              seated.slots.inject('sidebar.workspaces', () => seated.slots.register({
+                name: 'sidebar.workspaces',
+                priority: -1,
+                inject: () => ({ services }),
+              }, BetterWorkspace))
+            },
+          )
+        } catch (error) {
+          console.warn('[aryacode-polish] better workspace seat skipped:', error && error.message)
+          dispose = undefined
+        }
+      }
+      const sync = () => {
+        if (readSwitch()) {
+          install()
+          return
+        }
+        if (typeof dispose === 'function') {
+          try {
+            dispose()
+          } catch {}
+        }
+        dispose = undefined
+      }
+      sync()
+      const forms = scope()
+      if (forms && typeof forms.get === 'function') {
+        const live = forms.get(ROW_ID)
+        if (live && typeof live.subscribe === 'function') {
+          unlisten = live.subscribe(() => sync())
+        }
+      }
+      return () => {
+        if (typeof unlisten === 'function') unlisten()
+        if (typeof dispose === 'function') dispose()
+      }
+    }
+    const WS_HEADER = { display: 'flex', alignItems: 'center', gap: '6px', padding: '2px 4px 4px' }
+    const WS_HEADER_TITLE = { flex: 1, minWidth: 0, fontSize: 'calc(' + "var(--dsh-content-font-size-secondary, 13px)" + ' - 2px)', letterSpacing: '0.02em', textTransform: 'uppercase', color: 'var(--dsw-alias-label-quaternary, #8a8a8a)' }
+    const WS_ADD = { flex: 'none', width: '20px', height: '20px', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', padding: 0, border: 'none', background: 'transparent', color: 'var(--dsw-alias-label-tertiary)', fontSize: '15px', lineHeight: 1, borderRadius: 'var(--dsw-radius-sm)', cursor: 'pointer' }
+    const WS_NOTICE = { margin: '0 4px 6px', fontSize: 'calc(' + "var(--dsh-content-font-size-secondary, 13px)" + ' - 2px)', color: 'var(--dsw-alias-label-secondary)' }
 
     /**
      * AryaCode Polish — the browser face.
@@ -2045,6 +2949,9 @@ window.__ModuleLoader__.load({
             return undefined
           }
         }
+        // The Better workspace seat shadows the shipped browser at a different priority,
+        // so it must be present only while its switch is on.
+        installWorkspaceSeat(ctx, configForms, { sourceFlow: WorkspaceSourceFlow })
         ctx.slots.inject('plugins.row.config', () => ctx.slots.register({
           name: 'plugins.row.config',
           key: ROW_KEY,