@aryacode/dsh-aryacode-polish 0.8.1 → 0.9.6

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.1"
+    const CLIENT_VERSION = "0.9.6"
 
 /* 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,594 @@ 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 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 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 rows = workspaceRows(workspaceList, sessionList)
+      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 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 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, { anchor: menu.anchor }))
+                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
+
+      return React.createElement('div', {
+        'data-polish-ws': 'tree',
+        style: {
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '1px',
+          minHeight: 0,
+          height: '100%',
+          overflowY: 'auto',
+          overflowX: 'hidden',
+          padding: '2px 6px 12px',
+        },
+      },
+        React.createElement('div', { 'data-polish-ws': 'header', style: WS_HEADER },
+          React.createElement('span', { style: WS_HEADER_TITLE }, 'Workspaces'),
+          React.createElement('button', {
+            type: 'button',
+            'data-polish-ws-add': 'true',
+            title: 'Add a workspace',
+            'aria-label': 'Add a workspace',
+            style: WS_ADD,
+            onClick: () => { setAdding(true); setNotice('') },
+          }, '+')),
+        notice ? React.createElement('div', { 'data-polish-ws': 'notice', style: WS_NOTICE }, notice) : null,
+        adding && services.sourceFlow
+          ? React.createElement(services.sourceFlow, {
+            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.'),
+          })
+          : null,
+      rows.length === 0
+        ? React.createElement('div', { style: { padding: '8px 6px', color: 'var(--dsw-alias-label-quaternary, #8a8a8a)' } }, 'No workspace yet.')
+        : rows.map(({ workspace, sessions }) => {
+          const open = expanded[workspace.workspaceId] !== false
+          return React.createElement('div', { key: workspace.workspaceId, style: { display: 'flex', flexDirection: 'column' } },
+            React.createElement('div', {
+              'data-polish-ws-row': workspace.workspaceId,
+              style: Object.assign({}, WS_ROW, { fontWeight: 500 }),
+              onClick: () => setExpanded(prev => Object.assign({}, prev, { [workspace.workspaceId]: prev[workspace.workspaceId] === false })),
+              onContextMenu: event => openWorkspaceMenu(event, workspace),
+            },
+            React.createElement(CaretGlyph, { open }),
+            React.createElement(FolderGlyph),
+            React.createElement('span', { style: WS_TITLE, title: workspace.path || workspace.title }, workspaceLabel(workspace)),
+            React.createElement('span', { style: WS_COUNT }, String(sessions.length))),
+            open
+              ? sessions.map(row => React.createElement('div', {
+                key: row.id,
+                'data-polish-ws-session': row.id,
+                style: Object.assign({}, WS_ROW, { paddingLeft: '24px' }),
+                onClick: () => services.openSession(row.id),
+                onContextMenu: event => openMenu(event, row, workspace),
+              },
+              React.createElement('span', { style: WS_TITLE }, row.displayTitle || row.id),
+              React.createElement('button', {
+                type: 'button',
+                'aria-label': 'Session menu',
+                style: Object.assign({}, WS_MENU_ITEM, { width: '20px', height: '20px', padding: 0, justifyContent: 'center', flex: 'none' }),
+                onClick: event => openMenu(event, row, workspace),
+              }, React.createElement(DotsGlyph))))
+              : 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 }),
+                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.
@@ -1768,7 +2362,6 @@ window.__ModuleLoader__.load({
         + '-' + pad(now.getHours()) + pad(now.getMinutes()) + pad(now.getSeconds()) + '.png'
     }
 
-    const SHOT_GLYPH_STYLE = { width: '14px', height: '14px', flex: 'none', display: 'block' }
 
     /**
      * Camera glyph, drawn here so the face depends on no icon package.
@@ -1777,51 +2370,94 @@ window.__ModuleLoader__.load({
     function CameraGlyph() {
       return React.createElement('svg', {
         viewBox: '0 0 16 16',
-        width: 14,
-        height: 14,
+        width: 15,
+        height: 15,
+        fill: 'none',
+        stroke: 'currentColor',
+        strokeWidth: 1,
+        strokeLinecap: 'round',
+        strokeLinejoin: 'round',
+        'aria-hidden': 'true',
+      },
+      React.createElement('path', { d: 'M2.6 5.4h1.9l1-1.5h5l1 1.5h1.9a1 1 0 0 1 1 1v5.7a1 1 0 0 1-1 1H2.6a1 1 0 0 1-1-1V6.4a1 1 0 0 1 1-1Z' }),
+      React.createElement('circle', { cx: 8, cy: 9.3, r: 2.5 }))
+    }
+
+    /** Confirmation tick, drawn at the strip's own glyph size. */
+    function CheckGlyph() {
+      return React.createElement('svg', {
+        viewBox: '0 0 16 16',
+        width: 15,
+        height: 15,
         fill: 'none',
         stroke: 'currentColor',
-        strokeWidth: 1.2,
+        strokeWidth: 1.4,
         strokeLinecap: 'round',
         strokeLinejoin: 'round',
         'aria-hidden': 'true',
-        style: SHOT_GLYPH_STYLE,
       },
-      React.createElement('path', { d: 'M2 5.5h2.2l1-1.5h5.6l1 1.5H14v7H2z' }),
-      React.createElement('circle', { cx: 8, cy: 9, r: 2.2 }))
+      React.createElement('path', { d: 'M3.4 8.6l3 3 6.2-6.6' }))
+    }
+
+    /** Refusal mark, drawn at the strip's own glyph size. */
+    function BangGlyph() {
+      return React.createElement('svg', {
+        viewBox: '0 0 16 16',
+        width: 15,
+        height: 15,
+        fill: 'none',
+        stroke: 'currentColor',
+        strokeWidth: 1.4,
+        strokeLinecap: 'round',
+        strokeLinejoin: 'round',
+        'aria-hidden': 'true',
+      },
+      React.createElement('path', { d: 'M8 3.6v5.2' }),
+      React.createElement('path', { d: 'M8 12v.4' }))
     }
 
     /**
-     * Where the camera button is drawn: the panel's own top-right corner, just
-     * inside the frame and left of the Shell's expand/close controls.
+     * The Shell has no header slot for the panel, so the camera rides the docking
+     * kit's chrome seat: the element at the end of the top-right pane's tab strip
+     * that already holds the presentation and collapse controls. Portalling into
+     * that element, instead of floating over the panel at fixed coordinates, is what
+     * makes the button share the cluster's gap, its vertical centring and whatever
+     * geometry the strip has docked, fullscreened or split.
      */
-    const SHOT_ANCHOR_EDGE = 8
-    const SHOT_ANCHOR_BUTTON = 28
-    const SHOT_ANCHOR_CONTROLS = 96
+    const SHOT_CHROME_SELECTOR = '[data-dockkit-strip-chrome]'
 
     /**
-     * Where the open right panel's header ends, in viewport coordinates.
-     * @returns the corner, or undefined when no panel is open.
+     * Mirrors the Shell's own strip control: a 28px box with 6px padding around a
+     * 15px glyph, secondary label colour, transparent until hovered.
      */
-    function shotAnchor() {
-      const panel = document.querySelector('[data-sidebar-right-session][data-sidebar-right-open]')
-      if (panel === null) return undefined
-      const rect = panel.getBoundingClientRect()
-      if (rect.width < 120 || rect.height < 120) return undefined
-      return {
-        top: rect.top + SHOT_ANCHOR_EDGE,
-        left: Math.max(rect.left + SHOT_ANCHOR_EDGE, rect.right - SHOT_ANCHOR_CONTROLS - SHOT_ANCHOR_BUTTON),
-      }
+    const SHOT_BUTTON_STYLE = {
+      display: 'inline-flex',
+      flex: 'none',
+      alignItems: 'center',
+      justifyContent: 'center',
+      width: '28px',
+      height: '28px',
+      padding: '6px',
+      color: 'var(--dsw-alias-label-secondary, #61666b)',
+      lineHeight: 1,
+      background: 'transparent',
+      border: 'none',
+      borderRadius: 'var(--dsw-radius-sm, 6px)',
+      cursor: 'pointer',
+      // Ahead of the Shell's own two controls: the last thing you would reach for,
+      // and never between them and the panel edge.
+      order: -1,
     }
 
     /**
-     * The composer context the overlay button attaches through.
+     * The composer context the chrome button attaches through.
      *
-     * The camera button lives in a root overlay so it can sit in the panel header,
-     * but attaching an image needs the *session-scoped* composer props (`sessionId`
-     * and `inputActions`), which only a session slot receives. The composer dock is
+     * The camera renders inside the panel strip, which is root chrome, but attaching
+     * an image needs the *session-scoped* composer props (`sessionId` and
+     * `inputActions`), which only a session slot receives. The composer dock is
      * therefore kept as an invisible publisher and this store carries its context up
-     * to the overlay; with no open Session the store is empty and the button hides.
+     * to the chrome button; with no open Session the store is empty and the button
+     * does not render.
      */
     const shotStore = (() => {
       const listeners = new Set()
@@ -1839,24 +2475,8 @@ window.__ModuleLoader__.load({
       }
     })()
 
-    const SHOT_BUTTON_STYLE = {
-      position: 'fixed',
-      display: 'inline-flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      width: SHOT_ANCHOR_BUTTON + 'px',
-      height: SHOT_ANCHOR_BUTTON + 'px',
-      padding: '0',
-      border: 'none',
-      borderRadius: 'var(--dsw-radius-sm, 6px)',
-      background: 'transparent',
-      color: 'var(--dsw-alias-label-tertiary, #61666b)',
-      cursor: 'pointer',
-      zIndex: 40,
-    }
-
     /**
-     * Invisible composer-dock entry that publishes the session context the overlay
+     * Invisible composer-dock entry that publishes the session context the chrome
      * button needs, and nothing else.
      * @param props - session slot props (`sessionId`, `inputActions`) plus the
      * late `conversation` lookup.
@@ -1875,29 +2495,35 @@ window.__ModuleLoader__.load({
     }
 
     /**
-     * Camera button pinned to the right panel's top-right corner: photographs the
-     * open tab, copies it, and attaches it to the message being written.
-     * @param props - slot props plus the late `conversation` lookup.
-     * @returns the button, or null while there is nothing to shoot or nowhere to
-     * attach.
+     * Camera button in the right panel's tab strip: photographs the open tab, copies
+     * it, and attaches it to the message being written.
+     * @param props - overlay slot props plus the late `conversation` lookup.
+     * @returns the portalled button, or null while there is no panel or no Session.
      */
     function PanelShotButton(props) {
       const on = useSwitch(props.configForms, 'panelScreenshot', true)
       const context = React.useSyncExternalStore(shotStore.subscribe, shotStore.get)
-      const [anchor, setAnchor] = React.useState(() => shotAnchor())
+      const [host, setHost] = React.useState(undefined)
       const [phase, setPhase] = React.useState('idle')
       const [note, setNote] = React.useState('')
       React.useEffect(() => {
-        const measure = () => setAnchor(shotAnchor())
-        measure()
-        // The panel opens, closes, splits and resizes without any event this
-        // component would otherwise hear, so watch the attribute and the geometry.
-        const observer = new MutationObserver(measure)
-        observer.observe(document.body, { attributes: true, subtree: true, attributeFilter: ['data-sidebar-right-open', 'data-dockkit-pane-active'] })
-        window.addEventListener('resize', measure)
+        // The strip is created, destroyed and re-created as panes open, split and
+        // close, so follow the document rather than measuring it once. Frames are
+        // coalesced because React commits fire many mutations in a row.
+        let frame = 0
+        const find = () => {
+          frame = 0
+          setHost(document.querySelector(SHOT_CHROME_SELECTOR) ?? undefined)
+        }
+        const schedule = () => {
+          if (frame === 0) frame = window.requestAnimationFrame(find)
+        }
+        find()
+        const observer = new MutationObserver(schedule)
+        observer.observe(document.body, { childList: true, subtree: true })
         return () => {
+          if (frame !== 0) window.cancelAnimationFrame(frame)
           observer.disconnect()
-          window.removeEventListener('resize', measure)
         }
       }, [])
       React.useEffect(() => {
@@ -1908,7 +2534,7 @@ window.__ModuleLoader__.load({
         }, 4000)
         return () => clearTimeout(timer)
       }, [note])
-      if (!on || context === undefined || anchor === undefined) return null
+      if (!on || context === undefined || host === undefined) return null
       const take = async () => {
         if (phase === 'busy') return
         const node = panelTarget()
@@ -1944,63 +2570,46 @@ window.__ModuleLoader__.load({
             throw new Error('the composer refused the image')
           }
           setPhase('done')
-          setNote(copied ? 'right panel copied and attached' : 'right panel attached, clipboard refused')
+          setNote(copied ? 'Right panel copied and attached' : 'Right panel attached, clipboard refused')
         } catch (error) {
           setPhase('failed')
           setNote(error instanceof Error ? error.message : String(error))
           console.warn('[aryacode-polish] panel screenshot failed:', error)
         }
       }
-      const label = phase === 'done' ? '✓' : phase === 'failed' ? '!' : '●'
-      return React.createElement(React.Fragment, null,
-        React.createElement('span', {
-          'data-polish-shot-anchor': 'panel',
-          style: { position: 'fixed', top: anchor.top + 'px', left: anchor.left + 'px', width: '0', height: '0' },
-        }),
-        React.createElement('button', {
-          type: 'button',
-          'data-polish-shot': phase,
-          title: note === '' ? 'Screenshot this panel into the chat (also copies it)' : note,
-          'aria-label': 'Screenshot this panel',
-          disabled: phase === 'busy',
-          onClick: () => { void take() },
-          onMouseEnter: (event) => { event.currentTarget.style.background = 'var(--dsw-alias-interactive-bg-hover, rgba(0,0,0,0.06))' },
-          onMouseLeave: (event) => { event.currentTarget.style.background = 'transparent' },
-          style: {
-            ...SHOT_BUTTON_STYLE,
-            top: anchor.top + 'px',
-            left: anchor.left + 'px',
-            color: phase === 'failed'
-              ? 'var(--dsw-alias-label-error, #b42318)'
-              : 'var(--dsw-alias-label-tertiary, #61666b)',
-            opacity: phase === 'busy' ? 0.5 : 1,
-            cursor: phase === 'busy' ? 'progress' : 'pointer',
-            fontSize: '11px',
-          },
+      const tip = note !== ''
+        ? note
+        : phase === 'busy' ? 'Capturing the right panel…' : 'Screenshot this panel into the chat (also copies it)'
+      const glyph = phase === 'done'
+        ? React.createElement(CheckGlyph, null)
+        : phase === 'failed'
+          ? React.createElement(BangGlyph, null)
+          : React.createElement(CameraGlyph, null)
+      const button = React.createElement('button', {
+        type: 'button',
+        'data-polish-shot': phase,
+        'aria-label': 'Screenshot this panel',
+        disabled: phase === 'busy',
+        onClick: () => { void take() },
+        onMouseEnter: (event) => { event.currentTarget.style.background = 'var(--dsw-alias-interactive-bg-hover, rgba(0,0,0,0.06))' },
+        onMouseLeave: (event) => { event.currentTarget.style.background = 'transparent' },
+        style: {
+          ...SHOT_BUTTON_STYLE,
+          color: phase === 'failed'
+            ? 'var(--dsw-alias-label-error, #b42318)'
+            : phase === 'done'
+              ? 'var(--dsw-alias-label-primary, #111418)'
+              : SHOT_BUTTON_STYLE.color,
+          cursor: phase === 'busy' ? 'progress' : 'pointer',
         },
-        phase === 'done' || phase === 'failed'
-          ? React.createElement('span', { 'aria-hidden': 'true' }, label)
-          : React.createElement(CameraGlyph, null)),
-        note === ''
-          ? null
-          : React.createElement('span', {
-            'data-polish-shot-note': phase,
-            style: {
-              position: 'fixed',
-              top: anchor.top + SHOT_ANCHOR_BUTTON + 6 + 'px',
-              left: Math.max(12, anchor.left - 140) + 'px',
-              maxWidth: '260px',
-              padding: '3px 8px',
-              borderRadius: 'var(--dsw-radius-sm, 6px)',
-              background: 'Canvas',
-              boxShadow: 'var(--dsw-elevation-prominent, 0 3px 8px rgba(0,0,0,0.12))',
-              color: phase === 'failed' ? 'var(--dsw-alias-label-error, #b42318)' : 'var(--dsw-alias-label-secondary, #61666b)',
-              fontSize: '12px',
-              lineHeight: '18px',
-              whiteSpace: 'nowrap',
-              zIndex: 41,
-            },
-          }, note))
+      }, glyph)
+      const Tooltip = primitives === undefined ? undefined : primitives.Tooltip
+      return ReactDOM.createPortal(
+        Tooltip === undefined
+          ? button
+          : React.createElement(Tooltip, { label: tip, side: 'bottom', delayMs: 500 }, button),
+        host,
+      )
     }
 
     /**
@@ -2030,6 +2639,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,