@linxin666/dsh-usage 0.3.24 → 0.4.1

package/src/client/UsageFootCard.tsx

@@ -0,0 +1,300 @@
+/**
+ * Sidebar foot card: the compact usage glance seated below the shell sidebar's
+ * Settings row. It is deliberately a GLANCE, not the panel the 2026-09-18
+ * removal took out. Two states, persisted across reloads:
+ *
+ * - expanded (default): a price-first headline (today's estimated spend,
+ *   falling back to today's tokens when nothing priced was recorded), a
+ *   tokens/calls line, up to two configured-provider balances, and an
+ *   updated-at footer;
+ * - collapsed: a one-line strip with the gauge glyph, the spending
+ *   provider's name, the label and the headline value.
+ *
+ * The card body is one button that opens the settings panel on the usage
+ * section, so detail lives in exactly one place; the corner chevron toggles
+ * the collapse state (sibling buttons — buttons inside a button are invalid
+ * HTML).
+ *
+ * Data comes from the same shared store the settings section reads; the card
+ * runs its own relaxed poll loop (30 s, visible-tab only) because the sidebar
+ * foot is permanently mounted. The card disappears while the plugin is
+ * disabled (settings flag) or while the host serves no usage routes (a 404
+ * means the host half is off), matching the section's own gating.
+ * @module @linxin666/dsh-usage/client/UsageFootCard
+ */
+
+import { useEffect, useState, useSyncExternalStore, type ReactNode } from 'react'
+import type { ConfigForm } from '@deepseek-ai/dsh-client-ui-settings/client'
+import { t } from './locales.ts'
+import styles from './usage.module.css'
+import { formatTokens, type UsageSettings } from './UsageSectionCard.tsx'
+import { totalTokens } from '../core/ledger.ts'
+import type { BalanceView, ProviderSnapshotView, UsageOverviewView } from '../core/types.ts'
+import type { UsageStoreInstance } from './usage-store.ts'
+
+/** Props the mount forwards into the React tree. */
+export interface UsageFootCardProps {
+  /** The shared overview store (section and card read the same snapshot). */
+  store: UsageStoreInstance
+  /** Fetch one overview now. */
+  poll: () => void
+  /** Card-body click: open the settings panel on the usage section. */
+  onOpen: () => void
+  /** The shared settings form; the card hides while the plugin is disabled. */
+  settings: ConfigForm<UsageSettings>
+  /** Locale-change source; the plain copy re-renders on a language switch. */
+  locale?: { subscribe(listener: () => void): () => void }
+}
+
+/** Poll cadence of the permanently seated card; the section's 10 s loop stays its own. */
+export const FOOT_CARD_POLL_MS = 30_000
+
+/** localStorage key holding the collapsed flag ('1' = collapsed strip). */
+export const FOOT_CARD_COLLAPSED_KEY = 'dsh-usage.foot-card.collapsed'
+
+/** At most this many provider balances render before a +N overflow marker. */
+const BALANCE_CAP = 2
+
+/** Read the persisted collapsed flag (absent = expanded). */
+export function readFootCardCollapsed(): boolean {
+  try {
+    return window.localStorage.getItem(FOOT_CARD_COLLAPSED_KEY) === '1'
+  } catch {
+    // Storage can be unavailable (privacy modes); the card stays expanded.
+    return false
+  }
+}
+
+/** Persist the collapsed flag; storage failures keep the session state. */
+function writeFootCardCollapsed(collapsed: boolean): void {
+  try {
+    window.localStorage.setItem(FOOT_CARD_COLLAPSED_KEY, collapsed ? '1' : '0')
+  } catch {
+    // Storage unavailable: the state still flips for this session.
+  }
+}
+
+/** Inline gauge glyph, 14px beside the card title. */
+function GaugeIcon(): ReactNode {
+  return (
+    <svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+      <path d="M2.5 12.5a7 7 0 0 1 11 -4.3" />
+      <path d="M8 12.5V8.2l2.9-2.1" />
+      <circle cx="8" cy="12.5" r="1" />
+    </svg>
+  )
+}
+
+/** Disclosure chevrons: down collapses the expanded card, up expands the strip. */
+function ChevronIcon(props: { collapsed: boolean }): ReactNode {
+  return props.collapsed
+    ? (
+      <svg viewBox="0 0 16 16" width="12" height="12" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+        <path d="m4 10 4-4 4 4" />
+      </svg>
+    )
+    : (
+      <svg viewBox="0 0 16 16" width="12" height="12" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+        <path d="m4 6 4 4 4-4" />
+      </svg>
+    )
+}
+
+/** A provider row worth showing a balance for: configured, with a probed balance. */
+function balanceRow(provider: ProviderSnapshotView): boolean {
+  const supported = provider.balanceSupported === true || (provider.balanceSupported === undefined && provider.supported)
+  return provider.credential !== 'none' && supported && provider.balance !== undefined
+}
+
+/** Currency-symbol prefix for the priced balances (CNY/USD), else the ISO code. */
+function formatBalance(balance: BalanceView): string {
+  const currency = balance.currency.toUpperCase()
+  if (currency === 'CNY') return '¥' + balance.totalBalance
+  if (currency === 'USD') return '$' + balance.totalBalance
+  return currency + ' ' + balance.totalBalance
+}
+
+function formatClock(ms: number): string {
+  try {
+    return new Date(ms).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
+  } catch {
+    return ''
+  }
+}
+
+/**
+ * Display name of the provider owning today's priced spend: the day's highest
+ * cost row, else the current session route, resolved through the provider
+ * snapshot (an older host without the day rows falls back to the current
+ * route). Undefined when there is no route to name.
+ */
+function spendProvider(snapshot: UsageOverviewView): string | undefined {
+  let top: UsageOverviewView['usage']['today']['providers'][number] | undefined
+  for (const row of snapshot.usage.today.providers) {
+    if (row.totals.cost <= 0) continue
+    if (top === undefined || row.totals.cost > top.totals.cost) top = row
+  }
+  const route = top?.provider ?? snapshot.current.provider
+  if (route === undefined) return undefined
+  return snapshot.providers.find((entry) => entry.provider === route)?.displayName
+    ?? (route === snapshot.current.provider ? snapshot.current.displayName : undefined)
+    ?? route
+}
+
+/**
+ * The headline triple: today's priced spend, else today's tokens, else zero.
+ * tokenFallback tells the sub-line to keep only the call count instead of
+ * repeating the total the headline already shows; provider names the spender
+ * beside the collapsed cost headline.
+ */
+function headline(snapshot: UsageOverviewView): { label: string; value: string; tokenFallback: boolean; provider?: string } {
+  const totals = snapshot.usage.today.totals
+  if (totals.cost > 0) return { label: t('usage.foot.cost'), value: '¥' + totals.cost.toFixed(2), tokenFallback: false, provider: spendProvider(snapshot) }
+  if (totals.calls > 0) return { label: t('usage.today'), value: formatTokens(totalTokens(totals)) + ' tokens', tokenFallback: true }
+  return { label: t('usage.foot.cost'), value: '¥0.00', tokenFallback: false }
+}
+
+/** The tokens/calls sub-line under the headline; a quiet no-data line on an empty day. */
+function usageLine(snapshot: UsageOverviewView, tokenFallback: boolean): string {
+  const totals = snapshot.usage.today.totals
+  if (totals.calls === 0) return t('usage.foot.noData')
+  const calls = t('usage.calls', { n: totals.calls })
+  return tokenFallback ? calls : formatTokens(totalTokens(totals)) + ' tokens · ' + calls
+}
+
+/** The balance line: up to BALANCE_CAP providers plus a +N overflow marker. */
+function balanceLine(snapshot: UsageOverviewView): string | undefined {
+  const rows = snapshot.providers.filter(balanceRow)
+  if (rows.length === 0) return undefined
+  const shown = rows.slice(0, BALANCE_CAP).map((provider) => provider.displayName + ' ' + formatBalance(provider.balance!))
+  return shown.join(' · ') + (rows.length > BALANCE_CAP ? ' +' + String(rows.length - BALANCE_CAP) : '')
+}
+
+/** Card chrome classes for the current collapse state. */
+function cardClass(collapsed: boolean): string {
+  return collapsed ? styles.footCard + ' ' + styles.footCardCollapsed : styles.footCard
+}
+
+/**
+ * Render the foot card content for the current store snapshot.
+ * @param props - store, poller, settings form and open callback from the mount.
+ * @returns the card, or null while disabled / host-off.
+ */
+export function UsageFootCard(props: UsageFootCardProps): ReactNode {
+  const { store, poll, onOpen, settings, locale } = props
+  const ui = useSyncExternalStore(store.subscribe, store.getSnapshot)
+  // Settings writes and locale switches both re-render the card's copy/visibility.
+  const [, bump] = useState(0)
+  useEffect(() => settings.subscribe(() => bump((count) => count + 1)), [settings])
+  useEffect(() => locale?.subscribe(() => bump((count) => count + 1)), [locale])
+  const enabled = settings.getSnapshot().value?.enabled ?? true
+
+  // The collapse choice is one localStorage flag, read at mount and persisted
+  // on every flip (the old sidebar strip used the same contract shape).
+  const [collapsed, setCollapsed] = useState(readFootCardCollapsed)
+  const toggleCollapsed = (): void => {
+    setCollapsed((current) => {
+      writeFootCardCollapsed(!current)
+      return !current
+    })
+  }
+
+  // The permanently seated card pays a relaxed cadence; a hidden tab pauses.
+  useEffect(() => {
+    if (!enabled) return undefined
+    poll()
+    let timer: number | undefined
+    const start = (): void => {
+      if (timer === undefined && document.visibilityState === 'visible') timer = window.setInterval(poll, FOOT_CARD_POLL_MS)
+    }
+    const onVisibility = (): void => {
+      if (document.visibilityState === 'visible') {
+        poll()
+        start()
+      } else if (timer !== undefined) {
+        window.clearInterval(timer)
+        timer = undefined
+      }
+    }
+    start()
+    document.addEventListener('visibilitychange', onVisibility)
+    return () => {
+      if (timer !== undefined) window.clearInterval(timer)
+      document.removeEventListener('visibilitychange', onVisibility)
+    }
+  }, [poll, enabled])
+
+  if (!enabled) return null
+  const snapshot = ui.snapshot
+  // A 404 means the host half serves no usage routes (plugin off): the card
+  // bows out instead of pinning a permanent error to the sidebar foot.
+  if (snapshot === null && ui.status === 'error' && /failed: 404/.test(ui.error ?? '')) return null
+
+  const toggle = (
+    <button
+      type="button"
+      className={styles.footToggle}
+      data-dsh-part="foot-card-toggle"
+      aria-label={t(collapsed ? 'usage.foot.expand' : 'usage.foot.collapse')}
+      title={t(collapsed ? 'usage.foot.expand' : 'usage.foot.collapse')}
+      onClick={toggleCollapsed}
+    >
+      <ChevronIcon collapsed={collapsed} />
+    </button>
+  )
+
+  if (snapshot === null) {
+    const quiet = ui.status === 'error' ? t('usage.error', { error: ui.error ?? '' }) : t('usage.loading')
+    return (
+      <div className={cardClass(collapsed)} data-dsh-plugin="usage" data-dsh-part="foot-card">
+        <button type="button" className={styles.footMain} data-dsh-part="foot-card-main" aria-label={t('usage.foot.open')} title={t('usage.foot.open')} onClick={onOpen}>
+          {collapsed
+            ? <span className={styles.footStrip} data-dsh-part="foot-card-strip"><GaugeIcon /><span className={styles.footStripValue}>—</span></span>
+            : (
+              <>
+                <span className={styles.footHead}>
+                  <span className={styles.footTitle}><GaugeIcon />{t('usage.title')}</span>
+                </span>
+                <span className={styles.footLine}>{quiet}</span>
+              </>
+            )}
+        </button>
+        {toggle}
+      </div>
+    )
+  }
+
+  const head = headline(snapshot)
+  const balances = balanceLine(snapshot)
+
+  if (collapsed) {
+    return (
+      <div className={cardClass(true)} data-dsh-plugin="usage" data-dsh-part="foot-card">
+        <button type="button" className={styles.footMain} data-dsh-part="foot-card-main" aria-label={t('usage.foot.open')} title={t('usage.foot.open')} onClick={onOpen}>
+          <span className={styles.footStrip} data-dsh-part="foot-card-strip">
+            <GaugeIcon />
+            {head.provider !== undefined && <span className={styles.footStripProvider}>{head.provider}</span>}
+            <span className={styles.footStripLabel}>{head.label}</span>
+            <span className={styles.footStripValue}>{head.value}</span>
+          </span>
+        </button>
+        {toggle}
+      </div>
+    )
+  }
+
+  return (
+    <div className={cardClass(false)} data-dsh-plugin="usage" data-dsh-part="foot-card">
+      <button type="button" className={styles.footMain} data-dsh-part="foot-card-main" aria-label={t('usage.foot.open')} title={t('usage.foot.open')} onClick={onOpen}>
+        <span className={styles.footHead}>
+          <span className={styles.footTitle}><GaugeIcon />{head.label}</span>
+          <span className={styles.footValue}>{head.value}</span>
+        </span>
+        <span className={styles.footLine} data-dsh-part="foot-card-usage">{usageLine(snapshot, head.tokenFallback)}</span>
+        {balances !== undefined && <span className={styles.footLine} data-dsh-part="foot-card-balances">{balances}</span>}
+        <span className={styles.footMeta}>{t('usage.updated', { time: formatClock(snapshot.updatedAt) })}</span>
+      </button>
+      {toggle}
+    </div>
+  )
+}

package/src/client/UsageSectionCard.tsx

@@ -9,7 +9,7 @@
  */
 
 import { useEffect, useRef, useState, useSyncExternalStore, type ReactNode } from 'react'
-import type { SettingsScope } from '@deepseek-ai/dsh-client-ui-settings/client'
+import type { ConfigForm, ConfigFormSnapshot } from '@deepseek-ai/dsh-client-ui-settings/client'
 import type { UsageStoreInstance } from './usage-store.ts'
 import { t } from './locales.ts'
 import styles from './usage.module.css'
@@ -32,8 +32,8 @@ export interface UsageSectionFace {
   poll: () => void
   /** Force a host probe cycle now (resolves with the fresh overview). */
   refresh: () => void
-  /** Whether a forced refresh is in flight (component-local state mirrors it). */
-  settings: SettingsScope<UsageSettings>
+  /** The shared configuration form this section's settings row reads and writes. */
+  settings: ConfigForm<UsageSettings>
 }
 
 export interface UsageSectionProps extends UsageSectionFace {
@@ -153,9 +153,10 @@ export function UsageSectionCard(props: UsageSectionProps): ReactNode {
   const settingsValue = settingsSnapshot.value ?? {}
   const [tab, setTab] = useState<'usage' | 'plans' | 'bank'>('usage')
   const [refreshing, setRefreshing] = useState(false)
-  // The enable checkbox writes through the settings scope, so subscribing here
-  // keeps the flag below live: the poll starts and stops with it instead of
-  // waiting for an unrelated render.
+  // The enable checkbox writes through the shared form, so subscribing here
+  // keeps the flag below live: the form republishes the Host's accepted value,
+  // and the poll starts and stops with it instead of waiting for an unrelated
+  // render.
   const [, bumpSettings] = useState(0)
   useEffect(() => settings.subscribe(() => bumpSettings((count) => count + 1)), [settings])
   const enabled = settingsValue.enabled ?? true
@@ -533,13 +534,39 @@ function PlanCard(props: { provider: ProviderSnapshotView; current?: string }):
   )
 }
 
+/**
+ * The compact settings row. Both controls write through the shared form the
+ * moment the user changes them, and the Host answers each write with a
+ * boolean: a refused (or transport-failed) write is surfaced as a failed save,
+ * because a value that did not land must never read as applied.
+ */
 function SettingsRow(props: {
   settings: UsageSectionProps['settings']
-  snapshot?: { writable: boolean }
+  snapshot?: ConfigFormSnapshot<UsageSettings>
   value: UsageSettings
 }): ReactNode {
   const { settings, snapshot, value } = props
   const disabled = snapshot === undefined || !snapshot.writable
+  const [failure, setFailure] = useState<string | undefined>(undefined)
+
+  const write = (field: 'enabled' | 'pollIntervalSec', next: boolean | number): void => {
+    setFailure(undefined)
+    let answer: Promise<boolean>
+    try {
+      answer = settings.set(field, next)
+    } catch (error) {
+      setFailure(error instanceof Error ? error.message : String(error))
+      return
+    }
+    // false is the contract's refusal/skip answer (the Host rejected the value,
+    // the entry is not writable, or the write was dropped); a rejecting
+    // transport reports through the same failed-save surface.
+    Promise.resolve(answer).then(
+      (accepted) => { if (!accepted) setFailure('') },
+      (error: unknown) => { setFailure(error instanceof Error ? error.message : String(error)) },
+    )
+  }
+
   return (
     <div className={styles.card} data-dsh-part="settings-row">
       <span className={styles.cardTitle}>{t('usage.config.title')}</span>
@@ -549,7 +576,7 @@ function SettingsRow(props: {
             type="checkbox"
             checked={value.enabled ?? true}
             disabled={disabled}
-            onChange={(event) => { void settings.set('enabled', event.target.checked) }}
+            onChange={(event) => { write('enabled', event.target.checked) }}
           />
           {t('usage.config.enabled')}
         </label>
@@ -563,11 +590,16 @@ function SettingsRow(props: {
             disabled={disabled}
             onChange={(event) => {
               const parsed = Number(event.target.value)
-              if (Number.isFinite(parsed) && parsed >= 30 && parsed <= 3600) void settings.set('pollIntervalSec', Math.round(parsed))
+              if (Number.isFinite(parsed) && parsed >= 30 && parsed <= 3600) write('pollIntervalSec', Math.round(parsed))
             }}
           />
         </label>
       </div>
+      {failure !== undefined && (
+        <span className={styles.errorLine} role="status">
+          {t('usage.config.saveFailed')}{failure === '' ? '' : ' - ' + failure}
+        </span>
+      )}
     </div>
   )
 }

package/src/client/foot-card-mount.tsx

@@ -0,0 +1,112 @@
+/**
+ * Sidebar foot card mounting.
+ *
+ * The foot's only slot (sidebar.footer.action) stacks ABOVE the Settings row
+ * and cannot host a block, so the card container is inserted into the shell's
+ * foot area directly above the Settings seat — keeping Settings the foot's
+ * terminal row instead of hanging a card off the sidebar floor. It self-heals
+ * with the page-wide body-mutation hub: a React re-render that displaces the
+ * container re-seats it on the next frame, and a whole-pane rebuild is noticed
+ * by the same body-level watcher the family entry rows use.
+ *
+ * The container is a plain div carrying its own React root, so it can never
+ * disturb the shell's reconciliation.
+ * @module @linxin666/dsh-usage/client/foot-card-mount
+ */
+
+import { createElement } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { subscribeBodyInvalidations } from './body-mutations.ts'
+import { UsageFootCard, type UsageFootCardProps } from './UsageFootCard.tsx'
+
+/** Stable data attribute identifying the injected card container. */
+export const FOOT_CARD_SELECTOR = '[data-dsh-usage-foot-card]'
+
+/** The shell sidebar's foot area (footer actions + the Settings row), when mounted. */
+function footArea(): HTMLElement | undefined {
+  const column = document.querySelector<HTMLElement>('[data-pane="sidebar"], [class*="sidebarCol"]')
+  return column?.querySelector<HTMLElement>('[class*="footArea"]') ?? undefined
+}
+
+/**
+ * Open the settings panel on the usage section. The shell owns the panel's
+ * open state and exposes no service for it, so the card replays the user's
+ * own path: activate the sidebar Settings trigger, then pick the nav row
+ * carrying the section's (localized) label. Every step degrades silently —
+ * with the panel already open only the nav pick runs, and a missing row
+ * leaves the panel on its default section.
+ * @param label - the usage section's nav label in the active locale.
+ */
+export function openUsageSettings(label: () => string): void {
+  /** Click the nav row carrying the usage label inside the open panel. */
+  const pick = (panel: Element): void => {
+    const wanted = label()
+    for (const row of panel.querySelectorAll<HTMLButtonElement>('nav button')) {
+      if (row.textContent !== null && row.textContent.includes(wanted)) {
+        row.click()
+        return
+      }
+    }
+    // Panel open but the usage row is gone (plugin toggled off): stay put.
+  }
+  // A panel that is already open must never be toggled shut by the trigger;
+  // only the nav pick runs.
+  const open = document.querySelector('[role="dialog"]')
+  if (open !== null) {
+    pick(open)
+    return
+  }
+  const column = document.querySelector<HTMLElement>('[data-pane="sidebar"], [class*="sidebarCol"]')
+  const trigger = column?.querySelector<HTMLButtonElement>('[class*="settingsArea"] button')
+  trigger?.click()
+  let tries = 0
+  const attempt = (): void => {
+    const panel = document.querySelector('[role="dialog"]')
+    if (panel !== null) {
+      pick(panel)
+      return
+    }
+    tries += 1
+    // The panel mounts on the shell's next frames; wait briefly, then give up.
+    if (tries <= 20) window.setTimeout(attempt, 50)
+  }
+  window.setTimeout(attempt, 0)
+}
+
+/**
+ * Mount the sidebar foot card directly above the Settings row.
+ * @param props - the store/poll/settings/open inputs of the apply body.
+ * @returns disposer removing the container and its observers.
+ */
+export function mountUsageFootCard(props: UsageFootCardProps): () => void {
+  // DOM-level idempotency: whatever path mounted a card before this call (a
+  // duplicated apply, an HMR re-injection), never mount a second one.
+  if (typeof document !== 'undefined' && document.querySelector(FOOT_CARD_SELECTOR) !== null) {
+    return () => {}
+  }
+  const container = document.createElement('div')
+  container.setAttribute('data-dsh-usage-foot-card', '')
+  const root: Root = createRoot(container)
+  root.render(createElement(UsageFootCard, props))
+
+  /** Keep the container directly above the Settings seat inside the foot area. */
+  const place = (): void => {
+    const foot = footArea()
+    if (foot === undefined) return
+    const settings = foot.querySelector<HTMLElement>('[class*="settingsArea"]')
+    if (settings !== null) {
+      if (container.nextElementSibling !== settings) foot.insertBefore(container, settings)
+      return
+    }
+    // No Settings seat to anchor against (shell change): fall back to the tail.
+    if (foot.lastElementChild !== container) foot.append(container)
+  }
+  place()
+  const unsubscribeBody = subscribeBodyInvalidations(place)
+
+  return () => {
+    unsubscribeBody()
+    root.unmount()
+    container.remove()
+  }
+}

package/src/client/index.ts

@@ -1,25 +1,26 @@
 /**
  * dsh-usage browser half — seats the first-level 使用统计 settings section
- * (below the Workshop entry) and polls the host overview only while the
- * section is open. All provider probing and credential handling happens in
- * the host half; this bundle only renders the overview document.
+ * (below the Workshop entry) plus the compact usage glance card below the
+ * sidebar's Settings row. The section polls the host overview only while it
+ * is open; the foot card runs its own relaxed loop because the sidebar foot
+ * is permanently mounted. All provider probing and credential handling
+ * happens in the host half; this bundle only renders the overview document.
  * @module @linxin666/dsh-usage/client
  */
 
 import type { Context as ClientContext } from '@deepseek-ai/cordis'
-import type { SettingsScope, SettingsScopeSpec } from '@deepseek-ai/dsh-client-ui-settings/client'
+import type { ConfigForm } from '@deepseek-ai/dsh-client-ui-settings/client'
 // Type-only: pulls the locale plugin's Context merge (ctx.locale).
 import type {} from '@deepseek-ai/dsh-client-locale/client'
-// Type-only: pulls the settings-surface Context merge (ctx.settingsScope).
+// Type-only: pulls the shared-forms Context merge (ctx.configForms).
 import type {} from '@deepseek-ai/dsh-client-ui-settings/client'
 import type {} from '@deepseek-ai/dsh-client-ui-slots'
 // Type-only: pulls the ctx.slots merge (the renderer owns the slot registry since 0.1.2).
 import type {} from '@deepseek-ai/dsh-client-ui-renderer/client'
 import { createUsageStore, type UsageStoreInstance } from './usage-store.ts'
-import { mountSidebarEntry } from './sidebar-entry.ts'
-import { mountUsagePanel } from './sidebar-panel-mount.tsx'
 import { UsageSectionCard, type UsageSectionFace, type UsageSettings } from './UsageSectionCard.tsx'
-import { NS, en, zh } from './locales.ts'
+import { mountUsageFootCard, openUsageSettings } from './foot-card-mount.tsx'
+import { NS, en, zh, t } from './locales.ts'
 import type { UsageOverviewView } from '../core/types.ts'
 
 /** The host usage API as the browser sees it (same-origin JSON endpoints). */
@@ -45,27 +46,39 @@ const usageApi: UsageHttpApi = {
   refresh: () => usageFetch('/api/dsh-usage/refresh', 'POST'),
 }
 
-/** Settings namespace the section edits (the host plugin registers it). */
+/** Settings namespace the section edits (dsh-web-settings maps it onto this row's profile entry id). */
 const USAGE_SETTINGS_NS = 'dsh-usage'
 
 /** First-level nav position: directly below the Workshop section (order 150). */
 const SECTION_ORDER = 151
 
 /** Required services. */
-export const inject = ['slots', 'locale', 'connection', 'settingsScope', 'remote']
+export const inject = ['slots', 'locale', 'connection', 'configForms', 'remote']
 
 export type { UsageSectionProps, UsageSectionFace } from './UsageSectionCard.tsx'
 export type { UsageUiState } from './usage-store.ts'
 export type { UsageSettings }
 
+/**
+ * One settings namespace a family card binds. The 0.1.7 client exports no spec
+ * type (the form controller takes it privately), so the binder's input shape is
+ * restated here.
+ */
+export interface UsageSettingsBindSpec<T> {
+  /** Settings namespace registered by the owning host plugin. */
+  namespace: string
+  /** Narrow one wire section; undefined keeps the last accepted value. */
+  decode?: (section: unknown) => T | undefined
+}
+
 declare module '@deepseek-ai/cordis' {
   interface Context {
     /**
-     * Optional rc.6 compatibility binder provided by dsh-web-settings;
-     * absent when that group plugin is not installed, so callers fall back to
-     * the official settings scope.
+     * Optional family settings binder provided by dsh-web-settings; absent when
+     * that group plugin is not installed, so callers fall back to the native
+     * per-entry forms (`ctx.configForms`).
      */
-    webUiSettings?: { bind<S>(spec: SettingsScopeSpec<S>): SettingsScope<S> }
+    webUiSettings?: { bind<S>(spec: UsageSettingsBindSpec<S>): ConfigForm<S> }
   }
 }
 
@@ -84,8 +97,16 @@ export function apply(ctx: ClientContext): void {
     }
   }, 'dsh-usage: dictionaries')
 
-  const binder = ctx.get('webUiSettings') ?? ctx.settingsScope
-  const settingsScope = binder.bind<UsageSettings>({ namespace: USAGE_SETTINGS_NS })
+  // The family binder is what maps this namespace onto the row's profile entry
+  // id and hands back the native form. Without the group plugin the client can
+  // only address an entry id it already knows: the namespace itself is one when
+  // the profile keeps the family spelling. Any other entry id leaves the form
+  // unavailable, which renders the row's controls disabled — the Host's own
+  // generated page for the row still edits the same Config.
+  const binder = ctx.get('webUiSettings')
+  const settingsForm = binder !== undefined
+    ? binder.bind<UsageSettings>({ namespace: USAGE_SETTINGS_NS })
+    : ctx.configForms.get<UsageSettings>(USAGE_SETTINGS_NS)
 
   // One store instance per apply body; the section mounts and unmounts with
   // the settings page, and the store survives between visits so the last
@@ -122,27 +143,26 @@ export function apply(ctx: ClientContext): void {
     })
   }
 
-  const face = (): UsageSectionFace => ({ store, poll, refresh, settings: settingsScope })
-
-  // Sidebar surface (issue #1592): the entry row seats the panel's controls
-  // (refresh, collapse chevron); the collapsible panel directly under it reads
-  // the same overview document. The mount owns the persisted open state; the
-  // entry row mirrors it as highlight and chevron direction.
-  const panel = mountUsagePanel({ store, poll })
-  const disposeEntry = mountSidebarEntry({
-    onToggle: () => { panel.toggle() },
-    onRefresh: () => { refresh() },
-    isOpen: () => panel.isOpen(),
-    subscribeOpen: (listener) => panel.subscribe(listener),
-  }, ctx.locale)
+  const face = (): UsageSectionFace => ({ store, poll, refresh, settings: settingsForm })
+
+  // Sidebar foot card: the compact usage glance seated below the shell's
+  // Settings row. It shares the section's store and poll path (the sequence
+  // guard absorbs interleaved calls), runs its own relaxed poll loop, and
+  // opens the settings panel on the usage section when clicked.
+  const disposeFootCard = mountUsageFootCard({
+    store,
+    poll,
+    settings: settingsForm,
+    onOpen: () => { openUsageSettings(() => t('usage.title')) },
+    locale: ctx.locale,
+  })
   ctx.effect(() => () => {
     try {
-      disposeEntry()
+      disposeFootCard()
     } catch {
-      // Entry row already gone (teardown race).
+      // Card container already gone (teardown race).
     }
-    panel.dispose()
-  }, 'dsh-usage: sidebar panel')
+  }, 'dsh-usage: sidebar foot card')
 
   ctx.slots.inject('settings.section', () => {
     try {