@aryacode/dsh-aryacode-polish 0.3.7 → 0.3.9

package/CHANGELOG.md

@@ -1,5 +1,39 @@
 # Changelog
 
+## [0.3.9] - 2026-10-27
+
+### Changed
+
+- **The cost pill now looks like it belongs in the composer.** It was a foreign
+  widget next to the harness pills: two lines of text ("≈$0.538 partially
+  priced") in the row's flow. It now wears the same skin as the statistics pills
+  — the same 13 px-minus-one scale, 20 px line height, `1px 8px` padding, tertiary
+  label colour, tabular digits, a 14 px glyph, and `white-space: nowrap`, so it
+  reads as one line at the same size as its neighbours.
+- The "partially priced" caveat moved out of the pill and into the card, where it
+  can be read. The pill keeps a single `*` marker for the same fact.
+- The breakdown card is now the harness's own stat-dialog: same panel width
+  clamp, 16 px padding, `--dsw-radius-lg` corners, menu backdrop, prominent
+  elevation, 12/18 type, a two-column definition list with tabular figures, and
+  a portaled `position: fixed` panel measured from the pill so it cannot be
+  clipped by the composer scroller. It closes on outside click and on Escape.
+
+## [0.3.8] - 2026-10-27
+
+### Fixed
+
+- **The balance line never showed a number.** It waited for the host account
+  bundle's own access grant before reading, on the theory that the grant proves
+  the call is allowed. That grant belongs to the bundle that owns the account
+  stream, so for a plugin it can simply never arrive — the read hit its timeout,
+  resolved to nothing, and the sidebar looked empty with no error anywhere. The
+  line now reads the account Remote directly inside
+  `ctx.inject(['remote', 'remote.account'], …)`, and the Host still decides: an
+  unauthorised call comes back refused and the line stays hidden.
+- The read retries on its own (1.5 s, 5 s, 15 s, 30 s, and again whenever the
+  window regains focus), so a Shell that is still signing in at first paint no
+  longer leaves a permanently blank line.
+
 ## [0.3.7] - 2026-10-27
 
 ### Fixed

package/client/account.js

@@ -1,12 +1,19 @@
 /**
  * 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
@@ -35,62 +42,48 @@ export function clientMetadata(version) {
 }
 
 /**
- * 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.
  */
-export function makeBalanceReader(ctx, version, { timeoutMs = 10000 } = {}) {
-  const service = name => {
-    try {
-      return ctx.get(name)
-    } catch {
-      return undefined
-    }
+export 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.
+ */
+export 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)
   }
 }

package/client/face.js

@@ -15,6 +15,7 @@
  */
 
 const React = require('react')
+const ReactDOM = require('react-dom')
 
 /** Shared spacing for the page's prose. */
 const SPACING = { margin: '0 0 10px', opacity: 0.85, lineHeight: '1.5' }
@@ -184,23 +185,131 @@ function formatTokens(value) {
   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.
  */
@@ -208,22 +317,49 @@ function CostPill(props) {
   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 : []
 
@@ -245,7 +381,7 @@ function CostPill(props) {
     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)',
@@ -256,49 +392,27 @@ function CostPill(props) {
   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'),
@@ -306,13 +420,39 @@ function CostPill(props) {
     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.
  *
@@ -330,15 +470,43 @@ function BalanceLine(props) {
   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
@@ -392,12 +560,16 @@ return {
       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))
+    })
   },
 }

package/lib/client.js

@@ -23,7 +23,7 @@ window.__ModuleLoader__.load({
     ]
     const ROW_ID = "polish"
     const ROW_KEY = "@aryacode/dsh-aryacode-polish" + '#' + ROW_ID
-    const CLIENT_VERSION = "0.3.7"
+    const CLIENT_VERSION = "0.3.9"
 
     /**
      * The two pure decisions behind the balance line: which wallet to show, and how
@@ -60,12 +60,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 +101,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 +164,7 @@ window.__ModuleLoader__.load({
      */
 
     const React = require('react')
+    const ReactDOM = require('react-dom')
 
     /** Shared spacing for the page's prose. */
     const SPACING = { margin: '0 0 10px', opacity: 0.85, lineHeight: '1.5' }
@@ -340,23 +334,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 +466,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 +530,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 +541,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 +569,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 +619,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
@@ -548,13 +709,17 @@ 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))
+        })
       },
     }
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aryacode/dsh-aryacode-polish",
-  "version": "0.3.7",
+  "version": "0.3.9",
   "description": "AryaCode Polish: one install for the small things that make AryaCode feel finished. One Plugins row, one switch per quality-of-life feature.",
   "keywords": [
     "dsh",