@aryacode/dsh-aryacode-polish 0.3.7 → 0.4.4

package/lib/client.js

@@ -19,11 +19,17 @@ window.__ModuleLoader__.load({
         "label": "Account balance",
         "description": "Show the remaining account balance in the sidebar foot, above the account row.",
         "defaultOn": true
+      },
+      {
+        "key": "openWorkspaceFolder",
+        "label": "Open workspace folder",
+        "description": "Add an “Open workspace folder” row to a Session’s menu that opens its workspace in the file browser.",
+        "defaultOn": true
       }
     ]
     const ROW_ID = "polish"
     const ROW_KEY = "@aryacode/dsh-aryacode-polish" + '#' + ROW_ID
-    const CLIENT_VERSION = "0.3.7"
+    const CLIENT_VERSION = "0.4.4"
 
     /**
      * The two pure decisions behind the balance line: which wallet to show, and how
@@ -60,12 +66,19 @@ window.__ModuleLoader__.load({
     /**
      * Reading the account balance from a plugin face.
      *
-     * The account Remote methods are gated, so the read runs inside a
-     * `remoteAccess.whenAccess('account/watch', …)` grant and the grant is released
-     * as soon as the read settles. Every failure — no service in this Shell, a
-     * refused grant, a failed call — resolves to `undefined` instead of throwing: a
-     * sidebar line is never worth breaking the shell over, and a line that stays
-     * empty is honest about a number it never received.
+     * The account Remote methods are the same ones the shipped account row uses. An
+     * earlier version waited for the host account bundle's own access grant before
+     * reading, on the theory that the grant proves the call is allowed. It does not:
+     * that grant belongs to the bundle that owns the account stream, and a plugin
+     * that waits for it can wait forever — the sidebar line then stays empty with no
+     * error anywhere, which is exactly what a user reports as "I don't see the
+     * balance".
+     *
+     * So this reads directly. The Host still decides: an unauthorised call comes back
+     * `{ ok: false }` (or throws) and this resolves to `undefined`. Every failure — no
+     * account namespace in this Shell, a refused call, a failed call — resolves to
+     * `undefined` instead of throwing, because a sidebar line is never worth breaking
+     * the shell over.
      *
      * This module is inlined into `lib/client.js` by `scripts/build-client.mjs` and
      * imported directly by `test/account.spec.mjs`, so the tested source is the one
@@ -94,63 +107,49 @@ window.__ModuleLoader__.load({
     }
 
     /**
-     * Build the one-shot balance reader.
+     * The account Remote namespace, or undefined when this Shell has none.
      *
-     * @param ctx - the browser plugin context; `ctx.get` resolves an optional service.
-     * @param version - the version this build stamps into the account metadata.
-     * @returns a reader that resolves to the balance view, or undefined when unavailable.
+     * @param ctx - the browser plugin context; the balance surface is registered
+     *   inside `ctx.inject(['remote', 'remote.account'], …)` so this normally resolves.
+     * @returns the namespace, or undefined.
      */
-    function makeBalanceReader(ctx, version, { timeoutMs = 10000 } = {}) {
-      const service = name => {
-        try {
-          return ctx.get(name)
-        } catch {
-          return undefined
-        }
+    function accountService(ctx) {
+      try {
+        const remote = ctx.remote !== undefined ? ctx.remote : ctx.get('remote')
+        const account = remote !== undefined && remote !== null ? remote.account : undefined
+        return account !== undefined && account !== null && typeof account.getBalance === 'function' ? account : undefined
+      } catch {
+        return undefined
       }
-      return async () => {
-        const access = service('remoteAccess')
-        const remote = service('remote')
-        if (access === undefined || remote === undefined) return undefined
-        const metadata = clientMetadata(version)
-        return await new Promise(resolve => {
-          let settled = false
-          let stop
-          const timer = setTimeout(() => finish(undefined), timeoutMs)
-          const finish = value => {
-            if (settled) return
-            settled = true
-            clearTimeout(timer)
-            resolve(value)
-            if (typeof stop === 'function') {
-              try {
-                stop()
-              } catch {
-                /* the grant may already have been released */
-              }
-            }
-          }
-          // The read starts before the yield so an effect runner that stops at the
-          // first yielded disposer still performs the call.
-          stop = access.whenAccess('account/watch', function* () {
-            void (async () => {
-              try {
-                const result = await remote.account.getBalance(metadata)
-                const value = result !== undefined && result.ok === true ? result.value : undefined
-                finish(value !== undefined && value.status === 'ready' ? value : undefined)
-              } catch {
-                finish(undefined)
-              }
-            })()
-            yield () => {
-              if (!settled) {
-                settled = true
-                clearTimeout(timer)
-                resolve(undefined)
-              }
-            }
-          })
-        })
+    }
+
+    /**
+     * Read the balance once.
+     *
+     * @param ctx - the browser plugin context.
+     * @param version - the version this build stamps into the account metadata.
+     * @param options - `timeoutMs` bounds a call that never settles.
+     * @returns the ready balance view, or undefined when there is no number to show.
+     */
+    async function readBalance(ctx, version, { timeoutMs = 15000 } = {}) {
+      const account = accountService(ctx)
+      if (account === undefined) return undefined
+      const call = (async () => {
+        const result = await account.getBalance(clientMetadata(version))
+        if (result === undefined || result === null || result.ok !== true) return undefined
+        const value = result.value
+        return value !== undefined && value !== null && value.status === 'ready' ? value : undefined
+      })().catch(() => undefined)
+      let timer
+      const timeout = new Promise(resolve => {
+        timer = setTimeout(() => resolve(undefined), timeoutMs)
+        // A pending balance read must not keep a Node process alive during tests.
+        if (typeof timer === 'object' && timer !== null && typeof timer.unref === 'function') timer.unref()
+      })
+      try {
+        return await Promise.race([call, timeout])
+      } finally {
+        clearTimeout(timer)
       }
     }
 
@@ -171,6 +170,20 @@ window.__ModuleLoader__.load({
      */
 
     const React = require('react')
+    const ReactDOM = require('react-dom')
+
+    /**
+     * The Shell's own UI primitives. Guarded because the menu row degrades to a plain
+     * button when a Shell answers no primitives, and a bundle that throws on load
+     * would take every other surface down with it.
+     */
+    const primitives = (() => {
+      try {
+        return require('@deepseek-ai/dsh-client-ui-primitives')
+      } catch {
+        return undefined
+      }
+    })()
 
     /** Shared spacing for the page's prose. */
     const SPACING = { margin: '0 0 10px', opacity: 0.85, lineHeight: '1.5' }
@@ -340,23 +353,131 @@ window.__ModuleLoader__.load({
       return Number.isFinite(count) ? new Intl.NumberFormat('en-US').format(count) + ' tok' : ''
     }
 
-    /** One label/value line of the breakdown card. */
+    /**
+     * One label/value line of the breakdown card.
+     *
+     * Native stat dialogs are a two-column `<dl>`; a flex div per row looks the same
+     * until the labels differ in width, so this emits the grid's own children.
+     *
+     * @param label - the row name.
+     * @param value - the reading.
+     * @param key - React key.
+     * @returns the `dt`/`dd` pair.
+     */
     function detailRow(label, value, key) {
-      return React.createElement('div', {
-        key,
-        style: { display: 'flex', justifyContent: 'space-between', gap: '16px', padding: '2px 0' },
-      },
-      React.createElement('span', { style: { opacity: 0.75 } }, label),
-      React.createElement('span', null, value))
+      return React.createElement(React.Fragment, { key },
+        React.createElement('dt', null, label),
+        React.createElement('dd', null, value))
     }
 
     /** The small text under the card that keeps the number honest. */
     const COST_FOOTNOTE = 'Based on recorded usage and published rates. Your provider\'s bill is authoritative.'
 
+    /**
+     * The dock pill's skin, copied from the harness statistics pills
+     * (`StatsPills.module.css`) so this one sits in the row instead of looking
+     * foreign: same size, same tertiary color, same 14px glyph, never wrapped.
+     */
+    const PILL_ANCHOR_STYLE = {
+      display: 'inline-flex',
+      minWidth: 0,
+      fontSize: 'calc(var(--dsh-content-font-size-secondary, 13px) - 1px)',
+      lineHeight: 'calc(20px + var(--dsh-content-font-delta-secondary, 0px))',
+    }
+
+    /** The resting pill; hover and open states swap only background and color. */
+    const PILL_STYLE = {
+      display: 'inline-flex',
+      alignItems: 'center',
+      gap: '6px',
+      boxSizing: 'border-box',
+      maxWidth: '100%',
+      padding: '1px 8px',
+      border: 'none',
+      borderRadius: 'var(--dsw-radius-sm, 4px)',
+      background: 'transparent',
+      color: 'var(--dsw-alias-label-tertiary, inherit)',
+      font: 'inherit',
+      fontVariantNumeric: 'tabular-nums',
+      lineHeight: 'inherit',
+      whiteSpace: 'nowrap',
+      cursor: 'pointer',
+    }
+
+    /** The label half of the pill, cut with an ellipsis rather than wrapped. */
+    const PILL_LABEL_STYLE = { minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }
+
+    /** The dialog surface, copied from the harness `stat-dialog.module.css` skin. */
+    const PANEL_STYLE = {
+      position: 'fixed',
+      zIndex: 1100,
+      boxSizing: 'border-box',
+      width: 'max-content',
+      minWidth: 'min(300px, calc(100vw - 24px))',
+      maxWidth: 'min(440px, calc(100vw - 24px))',
+      padding: '16px',
+      border: 0,
+      borderRadius: 'var(--dsw-radius-lg, 12px)',
+      background: 'var(--dsw-specific-menu, Canvas)',
+      backdropFilter: 'var(--dsw-menu-backdrop-filter, none)',
+      boxShadow: 'var(--dsw-elevation-prominent, 0 10px 30px rgba(0, 0, 0, 0.18))',
+      fontSize: '12px',
+      lineHeight: '18px',
+      color: 'var(--dsw-alias-label-secondary, inherit)',
+      cursor: 'default',
+    }
+
+    /** Dialog heading row: section name left, headline value right. */
+    const PANEL_TITLE_STYLE = {
+      display: 'flex',
+      justifyContent: 'space-between',
+      gap: '16px',
+      marginBottom: '8px',
+      color: 'var(--dsw-alias-label-primary, inherit)',
+      fontWeight: 500,
+    }
+
+    /** The rule under a section heading. */
+    const PANEL_RULE_STYLE = { marginBottom: '10px', borderTop: '0.5px solid var(--dsw-alias-border-l2, currentColor)' }
+
+    /** The two-column readings grid. */
+    const PANEL_DETAILS_STYLE = {
+      display: 'grid',
+      gridTemplateColumns: 'minmax(76px, auto) minmax(0, 1fr)',
+      gap: '6px 16px',
+      margin: 0,
+      color: 'var(--dsw-alias-label-tertiary, inherit)',
+    }
+
+    /**
+     * A 14px coin glyph, the same weight as the harness pill icons. Drawn inline
+     * because a plugin face cannot require the icon package without adding it to the
+     * frozen module list.
+     * @returns the svg element.
+     */
+    function CoinGlyph() {
+      return React.createElement('svg', {
+        width: 14,
+        height: 14,
+        viewBox: '0 0 16 16',
+        fill: 'none',
+        stroke: 'currentColor',
+        strokeWidth: 1.3,
+        'aria-hidden': true,
+        style: { flex: 'none' },
+      },
+      React.createElement('circle', { cx: 8, cy: 8, r: 6.2 }),
+      React.createElement('path', { d: 'M9.6 6.1c-.35-.5-1.85-.86-2.6-.3-.9.66-.35 1.5.75 1.72 1.1.22 2.1.5 1.85 1.5-.3 1.2-2.6 1.3-3.4.5' }),
+      React.createElement('path', { d: 'M8 4.4v7.2' }))
+    }
+
     /**
      * The composer-dock pill, and the breakdown card it opens.
+     *
      * Reads the priced projection the Host registers, so no rate table or money
-     * arithmetic runs in the browser.
+     * arithmetic runs in the browser. The pill is skinned from the harness's own
+     * statistics pill so it joins that row instead of standing out of it.
+     *
      * @param props - standard session props plus our lazy `configForms`.
      * @returns the pill, or nothing while the feature is off or the session has no usage.
      */
@@ -364,22 +485,49 @@ window.__ModuleLoader__.load({
       const switched = useSwitch(props.configForms, 'sessionCost', true)
       const usage = typeof props.useProjection === 'function' ? props.useProjection('polishCost') : undefined
       const [open, setOpen] = React.useState(false)
+      const [hovered, setHovered] = React.useState(false)
+      const [pos, setPos] = React.useState(null)
       const root = React.useRef(null)
+      const panel = React.useRef(null)
+
+      // Anchored like the native dialogs: fixed in the viewport, clamped to a 12px
+      // margin so a pill near the window edge cannot push the card off screen.
+      React.useEffect(() => {
+        if (!open) {
+          setPos(null)
+          return undefined
+        }
+        if (root.current === null || typeof window === 'undefined') return undefined
+        const rect = root.current.getBoundingClientRect()
+        const width = Math.min(440, window.innerWidth - 24)
+        setPos({
+          left: Math.max(12, Math.min(rect.left, window.innerWidth - 12 - width)),
+          bottom: Math.max(12, window.innerHeight - rect.top + 8),
+        })
+        return undefined
+      }, [open])
 
       React.useEffect(() => {
         if (!open) return undefined
-        const close = event => {
-          if (root.current !== null && !root.current.contains(event.target)) setOpen(false)
+        const onPointer = event => {
+          const insidePill = root.current !== null && root.current.contains(event.target)
+          const insidePanel = panel.current !== null && panel.current.contains(event.target)
+          if (!insidePill && !insidePanel) setOpen(false)
+        }
+        const onKey = event => { if (event.key === 'Escape') setOpen(false) }
+        document.addEventListener('pointerdown', onPointer)
+        document.addEventListener('keydown', onKey)
+        return () => {
+          document.removeEventListener('pointerdown', onPointer)
+          document.removeEventListener('keydown', onKey)
         }
-        document.addEventListener('pointerdown', close)
-        return () => document.removeEventListener('pointerdown', close)
       }, [open])
 
       if (!switched) return null
       const tokens = typeof usage?.tokens === 'number' ? usage.tokens : 0
       if (tokens === 0) return null
       const money = formatMoney(usage.costUsd)
-      const label = money === '' ? 'Not priced' : (usage.incomplete ? '≈' + money + ' partially priced' : '≈' + money)
+      const unpriced = usage.incomplete === true || money === ''
       const cacheHit = tokens === 0 ? 0 : Math.round((usage.cacheRead ?? 0) / tokens * 100)
       const models = Array.isArray(usage.models) ? usage.models : []
 
@@ -401,7 +549,7 @@ window.__ModuleLoader__.load({
         style: {
           display: 'flex',
           height: '6px',
-          margin: '10px 0 12px',
+          margin: '0 0 12px',
           borderRadius: '999px',
           overflow: 'hidden',
           background: 'color-mix(in srgb, CanvasText 10%, transparent)',
@@ -412,49 +560,27 @@ window.__ModuleLoader__.load({
       segment(usage.cacheWrite, 62, 'bar-cache-write'),
       segment(usage.output, 82, 'bar-output'))
 
-      return React.createElement('div', {
-        ref: root,
-        style: { position: 'relative', display: 'inline-flex', alignItems: 'center' },
+      const reading = money === '' ? 'Not priced' : '≈' + money
+      const full = reading + (unpriced ? ' — partially priced: some usage has no published rate' : '')
+      const pillStyle = { ...PILL_STYLE, ...(hovered || open
+        ? { background: 'var(--dsw-alias-interactive-bg-hover, rgba(127,127,127,0.12))', color: 'var(--dsw-alias-label-secondary, inherit)' }
+        : {}) }
+
+      const card = React.createElement('div', {
+        ref: panel,
+        role: 'dialog',
+        'aria-label': 'Estimated session cost',
+        'data-polish-cost-card': '',
+        style: { ...PANEL_STYLE, ...(pos === null ? { left: 12, bottom: 12, visibility: 'hidden' } : pos) },
       },
-      React.createElement('button', {
-        type: 'button',
-        onClick: () => setOpen(!open),
-        title: 'Estimated session cost',
-        style: {
-          background: 'transparent',
-          border: 'none',
-          color: 'inherit',
-          cursor: 'pointer',
-          font: 'inherit',
-          padding: '0 2px',
-          opacity: 0.8,
-        },
-      }, label),
-      open
-        ? React.createElement('div', {
-          style: {
-            position: 'absolute',
-            bottom: '100%',
-            left: 0,
-            marginBottom: '8px',
-            width: '320px',
-            padding: '14px',
-            borderRadius: '10px',
-            border: '1px solid color-mix(in srgb, CanvasText 16%, transparent)',
-            background: 'Canvas',
-            color: 'CanvasText',
-            boxShadow: '0 10px 30px color-mix(in srgb, CanvasText 18%, transparent)',
-            fontSize: '12px',
-            lineHeight: '1.5',
-            zIndex: 40,
-          },
-        },
-        React.createElement('div', {
-          style: { display: 'flex', justifyContent: 'space-between', gap: '16px', fontWeight: 500 },
-        },
-        React.createElement('span', null, 'Estimated session cost'),
-        React.createElement('span', null, label)),
-        bar,
+      React.createElement('div', { style: PANEL_TITLE_STYLE },
+        React.createElement('span', { style: { display: 'inline-flex', alignItems: 'center', gap: '6px', minWidth: 0 } },
+          React.createElement(CoinGlyph),
+          'Estimated session cost'),
+        React.createElement('span', { style: { fontVariantNumeric: 'tabular-nums' } }, money === '' ? 'Not priced' : money)),
+      React.createElement('div', { style: PANEL_RULE_STYLE, 'aria-hidden': true }),
+      bar,
+      React.createElement('dl', { style: PANEL_DETAILS_STYLE },
         detailRow('Cache hit', cacheHit + '%', 'cache-hit'),
         detailRow('Uncached input', formatTokens(usage.uncached), 'uncached'),
         detailRow('Cached input', formatTokens(usage.cacheRead), 'cached'),
@@ -462,13 +588,39 @@ window.__ModuleLoader__.load({
         detailRow('Output', formatTokens(usage.output), 'output'),
         detailRow('Model', modelName, 'model'),
         detailRow('Provider', providerName, 'provider'),
-        detailRow('Requests', String(usage.requests ?? 0), 'requests'),
-        React.createElement('div', { style: { borderTop: '1px solid color-mix(in srgb, CanvasText 12%, transparent)', margin: '8px 0' } }),
-        detailRow('Estimated session cost', money === '' ? 'Not priced' : money, 'cost'),
-        React.createElement('p', { style: { margin: '10px 0 0', opacity: 0.7, fontSize: '11px' } }, COST_FOOTNOTE))
-        : null)
+        detailRow('Requests', String(usage.requests ?? 0), 'requests')),
+      unpriced
+        ? React.createElement('p', { style: { margin: '10px 0 0', color: 'var(--dsw-alias-label-tertiary, inherit)' } },
+          'Partially priced: some usage in this session has no published rate, so this is a lower bound.')
+        : null,
+      React.createElement('p', { style: { margin: '10px 0 0', color: 'var(--dsw-alias-label-tertiary, inherit)' } }, COST_FOOTNOTE))
+
+      return React.createElement('span', { ref: root, style: PILL_ANCHOR_STYLE, 'data-composer-stat': 'polish-cost' },
+        React.createElement('button', {
+          type: 'button',
+          className: undefined,
+          'aria-haspopup': 'dialog',
+          'aria-expanded': open,
+          'aria-label': full,
+          title: full,
+          onClick: () => setOpen(!open),
+          onMouseEnter: () => setHovered(true),
+          onMouseLeave: () => setHovered(false),
+          style: pillStyle,
+        },
+        React.createElement(CoinGlyph),
+        React.createElement('span', { style: PILL_LABEL_STYLE }, reading),
+        unpriced ? React.createElement('span', { style: { color: 'var(--dsw-alias-separator-primary, inherit)' } }, '*') : null),
+        open && typeof document !== 'undefined' ? ReactDOM.createPortal(card, document.body) : null)
     }
 
+    /**
+     * How long to wait before trying the balance again, in milliseconds. A Shell that
+     * has not finished signing in answers the first read with nothing, and a line that
+     * gives up after one attempt would stay empty for the life of the page.
+     */
+    const BALANCE_RETRY_DELAYS = [1500, 5000, 15000, 30000]
+
     /**
      * The remaining-balance line in the sidebar foot.
      *
@@ -486,15 +638,43 @@ window.__ModuleLoader__.load({
       React.useEffect(() => {
         if (!enabled || typeof read !== 'function') return undefined
         let live = true
-        Promise.resolve()
-          .then(() => read())
-          .then(view => {
-            if (live) setWallet(walletOf(view))
-          }, () => {
-            if (live) setWallet(undefined)
-          })
+        let attempt = 0
+        let timer
+        const look = () => {
+          Promise.resolve()
+            .then(() => read())
+            .then(view => {
+              if (!live) return
+              const next = walletOf(view)
+              if (next !== undefined) {
+                setWallet(next)
+                return
+              }
+              if (attempt < BALANCE_RETRY_DELAYS.length) {
+                timer = setTimeout(look, BALANCE_RETRY_DELAYS[attempt])
+                attempt += 1
+              }
+            }, () => {
+              if (!live) return
+              if (attempt < BALANCE_RETRY_DELAYS.length) {
+                timer = setTimeout(look, BALANCE_RETRY_DELAYS[attempt])
+                attempt += 1
+              }
+            })
+        }
+        look()
+        // A window that was hidden through sign-in comes back with an answer the
+        // first attempt could not have had; retry from the start when it regains focus.
+        const onFocus = () => {
+          attempt = 0
+          clearTimeout(timer)
+          look()
+        }
+        if (typeof window !== 'undefined') window.addEventListener('focus', onFocus)
         return () => {
           live = false
+          clearTimeout(timer)
+          if (typeof window !== 'undefined') window.removeEventListener('focus', onFocus)
         }
       }, [enabled, read])
       if (!enabled) return null
@@ -523,6 +703,74 @@ window.__ModuleLoader__.load({
       }, props.wide === false ? money : 'Balance ' + money)
     }
 
+    /**
+     * The workspace a Session belongs to.
+     *
+     * Occupants of `sidebar.workspaces.session.menu.item` address their data by
+     * Session id and must not bind or retain the Session, so the workspace is read
+     * from the Workspace snapshot at render time and never memoized.
+     *
+     * @param workspaces - the Shell's Workspace service, when it is loaded.
+     * @param sessionId - the row's Session.
+     * @returns the owning workspace, or undefined when it cannot be resolved.
+     */
+    function workspaceOf(workspaces, sessionId) {
+      if (workspaces === undefined || workspaces === null || sessionId === undefined) return undefined
+      let items
+      try {
+        items = workspaces.list.getSnapshot().items
+      } catch {
+        return undefined
+      }
+      if (!Array.isArray(items)) return undefined
+      return items.find(item => Array.isArray(item.sessionIds)
+        && item.sessionIds.indexOf(sessionId) !== -1
+        && typeof item.path === 'string'
+        && item.path !== '')
+    }
+
+    /**
+     * "Open workspace folder": one row in a Session's "…" menu.
+     *
+     * It renders nothing when the switch is off or the Session has no workspace the
+     * Host could open, because a menu row that cannot act is worse than no row.
+     *
+     * @param props - the row's Session id, our lazy `configForms`/`workspaces`, the
+     *   opener, and the slot's injected `useMenuOpenState` hook.
+     * @returns the menu row, or null.
+     */
+    function OpenFolderMenuItem(props) {
+      const enabled = useSwitch(props.configForms, 'openWorkspaceFolder', true)
+      // Hooks run unconditionally; the row simply renders nothing when it cannot act.
+      const menu = typeof props.useMenuOpenState === 'function' ? props.useMenuOpenState() : undefined
+      const closeMenu = Array.isArray(menu) && typeof menu[1] === 'function' ? menu[1] : undefined
+      const workspace = enabled ? workspaceOf(props.workspaces, props.sessionId) : undefined
+      if (!enabled || workspace === undefined) return null
+      const label = 'Open workspace folder'
+      const onSelect = () => {
+        if (closeMenu !== undefined) closeMenu(false)
+        const open = props.openFolder
+        if (typeof open !== 'function') return
+        void Promise.resolve()
+          .then(() => open(workspace))
+          .catch(error => {
+            // A menu row that silently does nothing is unfixable in the field, so the
+            // failure is reported instead of dropped. This is the only diagnostic the
+            // bundle writes.
+            if (typeof console !== 'undefined' && typeof console.warn === 'function') {
+              console.warn('[aryacode-polish] open workspace folder failed:', error && error.message ? error.message : error)
+            }
+          })
+      }
+      if (primitives !== undefined && typeof primitives.MenuItemButton === 'function') {
+        const icon = typeof primitives.IconFolderOpenRegular === 'function'
+          ? React.createElement(primitives.IconFolderOpenRegular)
+          : undefined
+        return React.createElement(primitives.MenuItemButton, { icon, onSelect }, label)
+      }
+      return React.createElement('button', { type: 'button', role: 'menuitem', onClick: onSelect }, label)
+    }
+
     return {
       inject: ['slots'],
       /**
@@ -548,13 +796,43 @@ window.__ModuleLoader__.load({
           order: 2,
           inject: () => ({ configForms }),
         }, CostPill))
-        const loadBalance = makeBalanceReader(ctx, CLIENT_VERSION)
-        ctx.slots.inject('sidebar.footer.action', () => ctx.slots.register({
-          name: 'sidebar.footer.action',
-          id: 'polish-balance',
-          order: 3,
-          inject: () => ({ configForms, loadBalance }),
-        }, BalanceLine))
+        // The account Remote namespace is optional: a Shell with no account still gets
+        // the Configure page and the cost pill, and only loses the balance line.
+        ctx.inject(['remote', 'remote.account'], (accountCtx) => {
+          const loadBalance = () => readBalance(accountCtx, CLIENT_VERSION)
+          accountCtx.slots.inject('sidebar.footer.action', () => accountCtx.slots.register({
+            name: 'sidebar.footer.action',
+            id: 'polish-balance',
+            order: 3,
+            inject: () => ({ configForms, loadBalance }),
+          }, BalanceLine))
+        })
+        // The Workspace service and the Session Remote are both required for the menu
+        // row: it reads the folder from the first and opens it through the second.
+        // They are declared on the inject list because a Remote namespace may not be
+        // read through `ctx.get` — the Shell's guard refuses it.
+        ctx.inject(['workspaces', 'remote', 'remote.session'], (workspaceCtx) => {
+          const openFolder = async (workspace) => {
+            const remote = workspaceCtx.remote.session
+            // A Remote method answers an envelope (`{ ok, value }`), not the bare
+            // return value; a Shell that answered a plain boolean is tolerated too.
+            const answer = await remote.canOpenWorkspacePath()
+            const available = answer !== null && typeof answer === 'object'
+              ? answer.ok === true && answer.value === true
+              : answer === true
+            if (!available) throw new Error('this Host cannot open a folder')
+            const result = await remote.openWorkspacePath({ path: workspace.path })
+            if (result !== null && typeof result === 'object' && 'ok' in result && result.ok !== true) {
+              throw new Error('the Host refused to open the folder')
+            }
+          }
+          workspaceCtx.slots.inject('sidebar.workspaces.session.menu.item', () => workspaceCtx.slots.register({
+            name: 'sidebar.workspaces.session.menu.item',
+            id: 'polish-open-folder',
+            order: 460,
+            inject: () => ({ configForms, openFolder, workspaces: workspaceCtx.get('workspaces') }),
+          }, OpenFolderMenuItem))
+        })
       },
     }
   },