@gamegeek-saikel/dsh-cost-meter 0.1.0

package/lib/invariant.js

@@ -0,0 +1,38 @@
+//#region src/invariant.ts
+const PACKAGE_NAME = "@gamegeek-saikel/dsh-cost-meter";
+/** Cordis companion plugin name. */
+const name = "cost-meter-invariant";
+/** Service required before the companion can register. */
+const inject = ["invariants"];
+/**
+* Route-disposer symmetry: after the owning fiber of the /cost-meter
+* route unloads, the webserver must no longer answer that path. The probe
+* cycle registers and disposes twice on a reserved path — a leftover from
+* the first cycle makes the second register throw the duplicate error,
+* exactly the asymmetry this package would otherwise share with its host.
+*/
+const install = (ctx, fail) => {
+	ctx.on("internal/plugin", () => {
+		const server = ctx.get("webServer");
+		if (server === void 0) return;
+		const probe = {
+			kind: "exact",
+			path: "/__dsh_fare_meter_invariant_probe__",
+			handler: () => {}
+		};
+		try {
+			server.register(probe)();
+			server.register(probe)();
+		} catch {
+			fail("cost-meter webserver route disposer left a route registered — route tables and fiber lifecycles diverged");
+		}
+	}, { global: true });
+};
+/**
+* Register this package's invariant companion.
+* @param ctx - Cordis context carrying the invariant service.
+* @returns the installed registration's disposer after setup succeeds.
+*/
+const apply = (ctx) => Promise.resolve(ctx.invariants.register(PACKAGE_NAME, install));
+//#endregion
+export { apply, inject, name };

package/lib/types/client/AssistantCostChip.d.ts

@@ -0,0 +1,29 @@
+import type { UseProjection } from '@deepseek-ai/dsh-client-runtime/client';
+import type { SnapshotSelectorHook } from '@deepseek-ai/dsh-client-ui-slots';
+import type { ConversationSnapshot } from '@deepseek-ai/dsh-client-runtime/client';
+import type { PropsLocale } from '@deepseek-ai/dsh-client-ui-slots';
+import type { MessageId } from '@deepseek-ai/dsh-llm/brand';
+import type { SessionCostStep } from '../types.ts';
+export type ChipLocale = PropsLocale<'cost-meter'>['t'];
+export interface AssistantCostChipProps {
+    /** Stable identity of the finalized assistant message the actions address. */
+    messageId: MessageId;
+    useSession: SnapshotSelectorHook<ConversationSnapshot>;
+    useProjection: UseProjection;
+    t: ChipLocale;
+}
+/**
+ * Locate a finalized assistant node by its message id and return its
+ * (turn, step) coordinates, or null when the node is out of window.
+ * @param snapshot - the conversation snapshot.
+ * @param messageId - the addressed message identity.
+ * @returns the step coordinates, or null.
+ */
+export declare function stepOfMessage(snapshot: ConversationSnapshot, messageId: MessageId): {
+    turn: number;
+    step: number;
+} | null;
+/** The projection step for one (turn, step) coordinate, if the ledger has it. */
+export declare function stepOf(steps: readonly SessionCostStep[] | undefined, turn: number, step: number): SessionCostStep | undefined;
+export declare const AssistantCostChip: import("react").MemoExoticComponent<({ messageId, useSession, useProjection, t }: AssistantCostChipProps) => import("react").JSX.Element | null>;
+//# sourceMappingURL=AssistantCostChip.d.ts.map

package/lib/types/client/AssistantCostChip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AssistantCostChip.d.ts","sourceRoot":"","sources":["../../../src/client/AssistantCostChip.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wCAAwC,CAAA;AAC3E,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,kCAAkC,CAAA;AAC5E,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,wCAAwC,CAAA;AAClF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAA;AACnE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAA;AAC3D,OAAO,KAAK,EAA4B,eAAe,EAAE,MAAM,aAAa,CAAA;AAK5E,MAAM,MAAM,UAAU,GAAG,WAAW,CAAC,YAAY,CAAC,CAAC,GAAG,CAAC,CAAA;AAEvD,MAAM,WAAW,sBAAsB;IACrC,8EAA8E;IAC9E,SAAS,EAAE,SAAS,CAAA;IACpB,UAAU,EAAE,oBAAoB,CAAC,oBAAoB,CAAC,CAAA;IACtD,aAAa,EAAE,aAAa,CAAA;IAC5B,CAAC,EAAE,UAAU,CAAA;CACd;AAED;;;;;;GAMG;AACH,wBAAgB,aAAa,CAC3B,QAAQ,EAAE,oBAAoB,EAC9B,SAAS,EAAE,SAAS,GACnB;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CASvC;AAED,iFAAiF;AACjF,wBAAgB,MAAM,CACpB,KAAK,EAAE,SAAS,eAAe,EAAE,GAAG,SAAS,EAC7C,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE,MAAM,GACX,eAAe,GAAG,SAAS,CAE7B;AAED,eAAO,MAAM,iBAAiB,oFAAgF,sBAAsB,wCA8ClI,CAAA"}

package/lib/types/client/AssistantCostChip.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Per-reply cost chip: the anchored cost of ONE finalized reply. Rendered
+ * through the assistant-actions slot but visually joined to the reply's
+ * timing row (01:51 · 用时 · 首 token · tok/s): a flex `order` places it
+ * after the clock text, and the type matches the clock's (label-tertiary,
+ * 14px) with a dot separator, so it reads as part of the same metadata run.
+ * The `messageId` owner prop maps to the assistant node's (turn, step),
+ * which addresses the projection's step ledger — the cost is the anchored
+ * snapshot value, never a current-price recompute. Unpriced replies render
+ * `—` (the Cost tab explains why).
+ */
+import { memo, useEffect, useState } from 'react';
+import { bandForTime, peakOffPeakMultiplier } from "./cost-math.js";
+import { currencySymbol, displayCurrency, formatMoney, formatMultiplier } from "./format.js";
+import css from './AssistantCostChip.module.css';
+/**
+ * Locate a finalized assistant node by its message id and return its
+ * (turn, step) coordinates, or null when the node is out of window.
+ * @param snapshot - the conversation snapshot.
+ * @param messageId - the addressed message identity.
+ * @returns the step coordinates, or null.
+ */
+export function stepOfMessage(snapshot, messageId) {
+    const nodes = snapshot.chat.legacy.nodes;
+    for (let i = nodes.length - 1; i >= 0; i -= 1) {
+        const node = nodes[i];
+        if (node?.kind === 'assistant' && node.messageId === messageId && node.turn !== undefined) {
+            return { turn: node.turn, step: node.step };
+        }
+    }
+    return null;
+}
+/** The projection step for one (turn, step) coordinate, if the ledger has it. */
+export function stepOf(steps, turn, step) {
+    return steps?.find(entry => entry.turn === turn && entry.step === step);
+}
+export const AssistantCostChip = memo(function AssistantCostChip({ messageId, useSession, useProjection, t }) {
+    const currency = displayCurrency(t);
+    const projectionKey = currency === 'USD' ? 'sessionCostUsd' : 'sessionCost';
+    const step = useSession(snapshot => stepOfMessage(snapshot, messageId));
+    const cost = useProjection(projectionKey);
+    const ledger = step === null ? undefined : stepOf(cost?.steps, step.turn, step.step);
+    const [response, setResponse] = useState(null);
+    useEffect(() => {
+        let alive = true;
+        void fetch(`/cost-meter?currency=${currency}`, { cache: 'no-store' })
+            .then(res => (res.ok ? res.json() : null))
+            .then((data) => {
+            if (!alive || data === null)
+                return;
+            setResponse(data);
+        })
+            .catch(() => { });
+        return () => {
+            alive = false;
+        };
+    }, [currency]);
+    if (ledger === undefined || ledger.cost === null) {
+        if (ledger === undefined)
+            return null;
+        // Unpriced reply: show the dash; the native title explains why.
+        const reason = ledger.unpricedReason === 'NO_MODEL' ? t('reason.NO_MODEL') : t('reason.NO_PRICE');
+        return (_jsx("span", { className: css.unpriced, "data-cost-chip": true, title: reason, "data-testid": "cost-chip-unpriced", children: t('chip.unpriced') }));
+    }
+    const amount = `${currencySymbol(currency)}${formatMoney(ledger.cost)}`;
+    const band = bandForTime(Date.now());
+    const ratio = peakOffPeakMultiplier(response?.pricebook?.current ?? null, ledger.provider, ledger.model);
+    const bandLabel = band === 'peak'
+        ? ratio === null ? t('band.peak') : t('price.peakRatio', { multiplier: formatMultiplier(ratio) })
+        : band === 'offPeak'
+            ? ratio === null ? t('band.offPeak') : t('price.offPeakRatio', { multiplier: formatMultiplier(1 / ratio) })
+            : null;
+    return (_jsxs("span", { className: css.root, "data-cost-chip": true, title: t('chip.title', { amount }), "data-testid": "cost-chip", children: [amount, bandLabel !== null && _jsx("span", { className: css.bandBadge, "data-band": band, "data-testid": "cost-chip-band", children: bandLabel })] }));
+});

package/lib/types/client/CostPluginCard.d.ts

@@ -0,0 +1,10 @@
+import type { PropsLocale } from '@deepseek-ai/dsh-client-ui-slots';
+import type { SettingsScope } from '@deepseek-ai/dsh-client-runtime/client';
+export type PluginCardLocale = PropsLocale<'cost-meter'>['t'];
+export interface CostPluginCardProps {
+    /** The bound settings scope for the `cost-meter` namespace. */
+    scope: SettingsScope<unknown>;
+    t: PluginCardLocale;
+}
+export declare const CostPluginCard: import("react").MemoExoticComponent<({ scope, t }: CostPluginCardProps) => import("react").JSX.Element>;
+//# sourceMappingURL=CostPluginCard.d.ts.map

package/lib/types/client/CostPluginCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CostPluginCard.d.ts","sourceRoot":"","sources":["../../../src/client/CostPluginCard.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAA;AACnE,OAAO,KAAK,EAAE,aAAa,EAAyB,MAAM,wCAAwC,CAAA;AAKlG,MAAM,MAAM,gBAAgB,GAAG,WAAW,CAAC,YAAY,CAAC,CAAC,GAAG,CAAC,CAAA;AAE7D,MAAM,WAAW,mBAAmB;IAClC,+DAA+D;IAC/D,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,CAAA;IAC7B,CAAC,EAAE,gBAAgB,CAAA;CACpB;AAyBD,eAAO,MAAM,cAAc,qDAA8C,mBAAmB,iCAsN1F,CAAA"}

package/lib/types/client/CostPluginCard.js

@@ -0,0 +1,124 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Plugin configuration card (设置 → 插件 → cost-meter): the standard
+ * DSH plugin-card shape (collapsible header, disclosure body, save/discard
+ * footer) over the `cost-meter` settings namespace. Every editable
+ * field binds the settings scope (`ctx.settingsScope.bind`) — the same
+ * transport the shipped llm-deepseek / bash / web-search cards use — so the
+ * card looks, stages, and persists like every other plugin configuration.
+ * The JSON textareas carry the two structured fields (per-model price
+ * overrides, OpenRouter aliases); the refresh button is a plain action.
+ */
+import { memo, useEffect, useState, useSyncExternalStore } from 'react';
+import { Button, IconChevronDownOutline14 } from '@deepseek-ai/dsh-client-ui-primitives';
+import { formatTime } from "./format.js";
+import css from './CostPluginCard.module.css';
+const json = (value) => JSON.stringify(value ?? {}, null, 2);
+export const CostPluginCard = memo(function CostPluginCard({ scope, t }) {
+    const snapshot = useSyncExternalStore((listener) => scope.subscribe(listener), () => scope.getSnapshot());
+    const [open, setOpen] = useState(false);
+    const [busy, setBusy] = useState(false);
+    const [status, setStatus] = useState(null);
+    const [error, setError] = useState(null);
+    const [staged, setStaged] = useState(null);
+    const [response, setResponse] = useState(null);
+    // Seed the staged form from the latest accepted section.
+    const value = snapshot.value;
+    useEffect(() => {
+        setStaged({
+            overridesText: json(value?.overrides),
+            aliasesText: json(value?.aliases),
+            cacheReadDiscount: String(value?.cacheReadDiscount ?? 0.25),
+            fxMode: value?.fxMode ?? 'auto',
+            manualRate: String(value?.manualRate ?? 7.2),
+            balanceEnabled: value?.balanceEnabled ?? true,
+            openRouterEnabled: value?.openRouterEnabled ?? true,
+        });
+    }, [value]);
+    // Snapshot info for the header hint (source/time, no version numbers).
+    useEffect(() => {
+        let alive = true;
+        const load = () => {
+            void fetch('/cost-meter', { cache: 'no-store' })
+                .then(res => (res.ok ? res.json() : null))
+                .then((data) => {
+                if (!alive || data === null)
+                    return;
+                setResponse(data);
+            })
+                .catch(() => { });
+        };
+        load();
+        return () => {
+            alive = false;
+        };
+    }, []);
+    const current = response?.pricebook.current ?? null;
+    const source = current === null
+        ? t('source.none')
+        : t(`source.${current.source}`);
+    const write = async (field, fieldValue) => {
+        setBusy(true);
+        setStatus(null);
+        setError(null);
+        try {
+            await scope.set(field, fieldValue);
+            setStatus(t('settings.saved'));
+        }
+        catch (cause) {
+            setError(cause instanceof Error ? cause.message : String(cause));
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    const save = () => {
+        if (staged === null)
+            return;
+        setError(null);
+        let overrides;
+        let aliases;
+        try {
+            overrides = JSON.parse(staged.overridesText);
+            aliases = JSON.parse(staged.aliasesText);
+        }
+        catch (cause) {
+            setError(cause instanceof Error ? cause.message : String(cause));
+            return;
+        }
+        void write('overrides', overrides);
+        void write('aliases', aliases);
+        const discount = Number(staged.cacheReadDiscount);
+        if (Number.isFinite(discount) && discount >= 0 && discount <= 1)
+            void write('cacheReadDiscount', discount);
+        const rate = Number(staged.manualRate);
+        if (Number.isFinite(rate) && rate > 0)
+            void write('manualRate', rate);
+        if (staged.fxMode === 'auto' || staged.fxMode === 'manual')
+            void write('fxMode', staged.fxMode);
+        void write('balanceEnabled', staged.balanceEnabled);
+        void write('openRouterEnabled', staged.openRouterEnabled);
+    };
+    const refresh = () => {
+        setBusy(true);
+        setStatus(null);
+        setError(null);
+        void fetch('/cost-meter', {
+            method: 'POST',
+            headers: { 'content-type': 'application/json' },
+            body: JSON.stringify({ action: 'refresh' }),
+        })
+            .then(res => (res.ok ? res.json() : null))
+            .then((data) => {
+            if (data !== null)
+                setResponse(data);
+            setStatus(t('settings.saved'));
+        })
+            .catch((cause) => setError(cause instanceof Error ? cause.message : String(cause)))
+            .finally(() => setBusy(false));
+    };
+    const hint = current === null
+        ? t('settings.noSnapshot')
+        : `${t('settings.current', { source, time: formatTime(current.effectiveAt) })}`;
+    return (_jsxs("li", { className: css.card + (open ? ` ${css.cardOpen}` : ''), "data-testid": "cost-plugin-card", children: [_jsxs("button", { type: "button", className: css.header, onClick: () => setOpen(prev => !prev), "aria-expanded": open, children: [_jsxs("span", { className: css.headText, children: [_jsx("span", { className: css.name, children: t('settings.title') }), _jsx("span", { className: css.description, children: hint })] }), error !== null && _jsx("span", { className: css.pending, children: t('settings.error', { error }) }), _jsx(IconChevronDownOutline14, { className: css.chevron + (open ? ` ${css.chevronOpen}` : '') })] }), open && (_jsxs("div", { className: css.body, children: [_jsxs("div", { className: css.field, children: [_jsx("div", { className: css.head, children: _jsx("span", { className: css.label, children: t('settings.discount') }) }), _jsx("input", { className: css.input, type: "number", min: 0, max: 1, step: 0.01, value: staged?.cacheReadDiscount ?? '', onChange: event => setStaged(prev => prev === null ? prev : { ...prev, cacheReadDiscount: event.target.value }) })] }), _jsxs("div", { className: css.field, children: [_jsx("div", { className: css.head, children: _jsx("span", { className: css.label, children: t('settings.fx') }) }), _jsxs("div", { className: css.inline, children: [_jsxs("select", { className: css.select, value: staged?.fxMode ?? 'auto', onChange: event => setStaged(prev => prev === null ? prev : { ...prev, fxMode: event.target.value }), children: [_jsx("option", { value: "auto", children: t('settings.fx.auto') }), _jsx("option", { value: "manual", children: t('settings.fx.manual') })] }), _jsx("input", { className: css.input, type: "number", min: 0.001, step: 0.01, value: staged?.manualRate ?? '', onChange: event => setStaged(prev => prev === null ? prev : { ...prev, manualRate: event.target.value }) })] })] }), _jsx("label", { className: css.field, children: _jsxs("div", { className: css.head, children: [_jsx("span", { className: css.label, children: t('settings.balance') }), _jsx("input", { className: css.checkbox, type: "checkbox", checked: staged?.balanceEnabled ?? true, onChange: event => setStaged(prev => prev === null ? prev : { ...prev, balanceEnabled: event.target.checked }) })] }) }), _jsx("label", { className: css.field, children: _jsxs("div", { className: css.head, children: [_jsx("span", { className: css.label, children: t('settings.openrouter') }), _jsx("input", { className: css.checkbox, type: "checkbox", checked: staged?.openRouterEnabled ?? true, onChange: event => setStaged(prev => prev === null ? prev : { ...prev, openRouterEnabled: event.target.checked }) })] }) }), _jsxs("div", { className: css.field, children: [_jsx("div", { className: css.head, children: _jsx("span", { className: css.label, children: t('settings.overrides') }) }), _jsx("textarea", { className: css.textarea, value: staged?.overridesText ?? '', spellCheck: false, onChange: event => setStaged(prev => prev === null ? prev : { ...prev, overridesText: event.target.value }) }), _jsx("div", { className: css.hint, children: t('settings.jsonHint') })] }), _jsxs("div", { className: css.field, children: [_jsx("div", { className: css.head, children: _jsx("span", { className: css.label, children: t('settings.aliases') }) }), _jsx("textarea", { className: css.textarea, value: staged?.aliasesText ?? '', spellCheck: false, onChange: event => setStaged(prev => prev === null ? prev : { ...prev, aliasesText: event.target.value }) })] }), _jsxs("div", { className: css.footer, children: [status !== null && _jsx("span", { className: css.status, children: status }), _jsx("span", { className: css.spacer }), _jsx(Button, { variant: "outline", onClick: () => setStaged(null), children: t('settings.discard') }), _jsx(Button, { variant: "primary", onClick: save, disabled: busy || snapshot.status !== 'ready', children: t('settings.save') }), _jsx(Button, { variant: "outline", onClick: refresh, disabled: busy, children: busy ? t('settings.refreshing') : t('settings.refresh') })] })] }))] }));
+});

package/lib/types/client/CostView.d.ts

@@ -0,0 +1,10 @@
+import type { UseProjection } from '@deepseek-ai/dsh-client-runtime/client';
+import type { PropsLocale } from '@deepseek-ai/dsh-client-ui-slots';
+export type CostViewLocale = PropsLocale<'cost-meter'>['t'];
+export interface CostViewProps {
+    useProjection: UseProjection;
+    sessionId: string;
+    t: CostViewLocale;
+}
+export declare const CostView: import("react").MemoExoticComponent<({ useProjection, sessionId, t }: CostViewProps) => import("react").JSX.Element>;
+//# sourceMappingURL=CostView.d.ts.map

package/lib/types/client/CostView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CostView.d.ts","sourceRoot":"","sources":["../../../src/client/CostView.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wCAAwC,CAAA;AAC3E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAA;AAMnE,MAAM,MAAM,cAAc,GAAG,WAAW,CAAC,YAAY,CAAC,CAAC,GAAG,CAAC,CAAA;AAE3D,MAAM,WAAW,aAAa;IAC5B,aAAa,EAAE,aAAa,CAAA;IAC5B,SAAS,EAAE,MAAM,CAAA;IACjB,CAAC,EAAE,cAAc,CAAA;CAClB;AAOD,eAAO,MAAM,QAAQ,wEAA2D,aAAa,iCAkH3F,CAAA"}

package/lib/types/client/CostView.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Cost view tab: the whole conversation's anchored cost ledger — the total
+ * (main session + subagent sessions, host-aggregated), the three billed
+ * categories (uncached input incl. cache writes, cache reads, output), a
+ * per-subagent breakdown, and the per-reply list (turn, time, model, token
+ * split, step cost, anchored snapshot version and effective time). Reads the
+ * `sessionCost` projection plus the host-aggregated subagent totals; nothing
+ * is recomputed at current prices.
+ */
+import { memo, useEffect, useState } from 'react';
+import { bandForTime, combineTotals, peakOffPeakMultiplier, subagentSpend } from "./cost-math.js";
+import { currencySymbol, displayCurrency, formatMoney, formatMultiplier, formatTime } from "./format.js";
+import css from './CostView.module.css';
+/** Map an unpriced reason to its localized copy. */
+function reasonText(step, t) {
+    return t(`reason.${step.unpricedReason ?? 'NO_PRICE'}`);
+}
+export const CostView = memo(function CostView({ useProjection, sessionId, t }) {
+    const currency = displayCurrency(t);
+    const projectionKey = currency === 'USD' ? 'sessionCostUsd' : 'sessionCost';
+    const cost = useProjection(projectionKey);
+    const [response, setResponse] = useState(null);
+    const symbol = currencySymbol(currency);
+    useEffect(() => {
+        let alive = true;
+        void fetch(`/cost-meter?session=${encodeURIComponent(sessionId)}&currency=${currency}`, { cache: 'no-store' })
+            .then(res => (res.ok ? res.json() : null))
+            .then((data) => {
+            if (!alive || data === null)
+                return;
+            setResponse(data);
+        })
+            .catch(() => { });
+        return () => {
+            alive = false;
+        };
+    }, [sessionId, currency]);
+    if (cost === undefined || cost.steps.length === 0) {
+        return _jsx("div", { className: css.root, "data-testid": "cost-view-empty", children: t('view.empty') });
+    }
+    const rows = cost.steps;
+    const combined = combineTotals(cost.totals, response?.subagents);
+    const totals = combined ?? cost.totals;
+    const subSpend = subagentSpend(response?.subagents);
+    const money = (value) => value === null ? '—' : `${symbol}${formatMoney(value)}`;
+    return (_jsxs("div", { className: css.root, "data-testid": "cost-view", children: [_jsxs("section", { className: css.summary, children: [_jsxs("div", { className: css.totalRow, children: [_jsx("span", { className: css.totalLabel, children: t('view.total') }), _jsx("span", { className: css.totalValue, children: money(totals.cost) })] }), _jsxs("div", { className: css.categories, children: [_jsxs("span", { children: [t('view.uncached'), ": ", money(totals.uncachedCost)] }), _jsxs("span", { children: [t('view.cacheRead'), ": ", money(totals.cacheReadCost)] }), _jsxs("span", { children: [t('view.output'), ": ", money(totals.outputCost)] })] }), totals.unpricedSteps > 0 && (_jsx("div", { className: css.unpricedNote, children: t('view.unpriced', { count: String(totals.unpricedSteps) }) })), response !== null && response.subagents.length > 0 && (_jsxs("section", { className: css.subagents, "data-testid": "cost-view-subagents", children: [_jsx("div", { className: css.unpricedNote, children: t('line.subagent', { amount: `${symbol}${formatMoney(subSpend)}` }) }), _jsx("ol", { className: css.stepList, children: response.subagents.map(sub => (_jsxs("li", { className: css.step, children: [_jsxs("div", { className: css.stepHead, children: [_jsx("span", { className: css.stepTurn, children: sub.sessionId.slice(0, 8) }), _jsx("span", { className: css.stepCost, children: money(sub.totals.cost) })] }), _jsxs("div", { className: css.stepBody, children: [_jsxs("span", { children: [t('view.uncached'), ": ", money(sub.totals.uncachedCost)] }), _jsxs("span", { children: [t('view.cacheRead'), ": ", money(sub.totals.cacheReadCost)] }), _jsxs("span", { children: [t('view.output'), ": ", money(sub.totals.outputCost)] })] })] }, sub.sessionId))) })] }))] }), _jsxs("section", { className: css.steps, children: [_jsx("h3", { className: css.stepsTitle, children: t('view.steps') }), _jsx("ol", { className: css.stepList, children: rows.map((step) => {
+                            const stepBand = bandForTime(Date.now());
+                            const stepRatio = peakOffPeakMultiplier(response?.pricebook?.current ?? null, step.provider, step.model);
+                            const stepBandLabel = stepBand === 'peak'
+                                ? stepRatio === null ? t('band.peak') : t('price.peakRatio', { multiplier: formatMultiplier(stepRatio) })
+                                : stepBand === 'offPeak'
+                                    ? stepRatio === null ? t('band.offPeak') : t('price.offPeakRatio', { multiplier: formatMultiplier(1 / stepRatio) })
+                                    : null;
+                            return (_jsxs("li", { className: css.step, "data-testid": "cost-step", "data-band": stepBand === 'single' ? undefined : stepBand, children: [_jsxs("div", { className: css.stepHead, children: [_jsx("span", { className: css.stepTurn, children: t('step.turn', { turn: String(step.turn) }) }), _jsx("span", { className: css.stepModel, children: t('step.model', { model: step.model }) }), _jsx("span", { className: css.stepTime, children: formatTime(step.time) }), _jsxs("span", { className: css.stepCost, children: [money(step.cost), stepBandLabel !== null && _jsx("span", { className: css.bandBadge, "data-band": stepBand, "data-testid": "cost-step-band", children: stepBandLabel })] })] }), _jsxs("div", { className: css.stepBody, children: [_jsx("span", { className: css.stepTokens, children: t('step.tokens', {
+                                                    uncached: String(step.uncachedInputTokens),
+                                                    read: String(step.cacheReadTokens),
+                                                    write: String(step.cacheWriteTokens),
+                                                    output: String(step.outputTokens),
+                                                }) }), _jsx("span", { className: css.stepMeta, children: step.priced && step.snapshotVersion !== null
+                                                    ? t('step.snapshot', {
+                                                        time: formatTime(step.snapshotEffectiveAt ?? step.time),
+                                                    })
+                                                    : t('step.unpriced', { reason: reasonText(step, t) }) })] })] }, `${step.turn}:${step.step}`));
+                        }) })] })] }));
+});

package/lib/types/client/SessionCostLine.d.ts

@@ -0,0 +1,21 @@
+import type { UseProjection } from '@deepseek-ai/dsh-client-runtime/client';
+import type { SnapshotSelectorHook } from '@deepseek-ai/dsh-client-ui-slots';
+import type { ConversationSnapshot } from '@deepseek-ai/dsh-client-runtime/client';
+import type { PropsLocale } from '@deepseek-ai/dsh-client-ui-slots';
+import type { SessionCostProjection } from '../types.ts';
+/** Host route serving the balance snapshot and the pricebook view. */
+export declare const ENDPOINT = "/cost-meter";
+/** Balance refresh interval in milliseconds. */
+export declare const REFRESH_MS = 60000;
+/** Session-cost namespace key domain for the locale seat. */
+export type CostLocale = PropsLocale<'cost-meter'>['t'];
+export interface SessionCostLineProps {
+    useSession: SnapshotSelectorHook<ConversationSnapshot>;
+    useProjection: UseProjection;
+    sessionId: string;
+    t: CostLocale;
+}
+/** The tooltip's cost detail rows from the anchored projection. Never throws. */
+export declare function costDetail(cost: SessionCostProjection | undefined, model: string | undefined, t: CostLocale, currency?: 'CNY' | 'USD'): string[];
+export declare const SessionCostLine: import("react").MemoExoticComponent<({ useProjection, sessionId, t }: SessionCostLineProps) => import("react").JSX.Element | null>;
+//# sourceMappingURL=SessionCostLine.d.ts.map

package/lib/types/client/SessionCostLine.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SessionCostLine.d.ts","sourceRoot":"","sources":["../../../src/client/SessionCostLine.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wCAAwC,CAAA;AAC3E,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,kCAAkC,CAAA;AAC5E,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,wCAAwC,CAAA;AAClF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAA;AACnE,OAAO,KAAK,EAA6C,qBAAqB,EAAE,MAAM,aAAa,CAAA;AAKnG,sEAAsE;AACtE,eAAO,MAAM,QAAQ,gBAAgB,CAAA;AACrC,gDAAgD;AAChD,eAAO,MAAM,UAAU,QAAS,CAAA;AAEhC,6DAA6D;AAC7D,MAAM,MAAM,UAAU,GAAG,WAAW,CAAC,YAAY,CAAC,CAAC,GAAG,CAAC,CAAA;AAEvD,MAAM,WAAW,oBAAoB;IACnC,UAAU,EAAE,oBAAoB,CAAC,oBAAoB,CAAC,CAAA;IACtD,aAAa,EAAE,aAAa,CAAA;IAC5B,SAAS,EAAE,MAAM,CAAA;IACjB,CAAC,EAAE,UAAU,CAAA;CACd;AAaD,iFAAiF;AACjF,wBAAgB,UAAU,CAAC,IAAI,EAAE,qBAAqB,GAAG,SAAS,EAAE,KAAK,EAAE,MAAM,GAAG,SAAS,EAAE,CAAC,EAAE,UAAU,EAAE,QAAQ,GAAE,KAAK,GAAG,KAAa,GAAG,MAAM,EAAE,CA2BvJ;AAED,eAAO,MAAM,eAAe,wEAAkE,oBAAoB,wCA0GhH,CAAA"}

package/lib/types/client/SessionCostLine.js

@@ -0,0 +1,173 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Composer-dock readout: the current session's anchored spend (the
+ * `sessionCost` projection — price-snapshot-anchored, never recomputed at
+ * current prices) plus the DeepSeek account balance (host
+ * `/cost-meter` route), refreshed every minute. The hover detail
+ * breaks the spend into the three billed categories (uncached input incl.
+ * cache writes, cache reads, output) and names the anchored price snapshot.
+ *
+ * The component is deliberately defensive: every derived string is computed
+ * inside a guarded block so a single bad field can never take down the whole
+ * dock entry (the slot system retires crashed entries).
+ */
+import { memo, useEffect, useMemo, useState } from 'react';
+import { Tooltip } from '@deepseek-ai/dsh-client-ui-primitives';
+import { combineTotals, subagentSpend } from "./cost-math.js";
+import { currencySymbol, displayCurrency, formatMoney, formatTime } from "./format.js";
+import css from './SessionCostLine.module.css';
+/** Host route serving the balance snapshot and the pricebook view. */
+export const ENDPOINT = '/cost-meter';
+/** Balance refresh interval in milliseconds. */
+export const REFRESH_MS = 60_000;
+/** Compose the tooltip's balance detail from an ok snapshot. */
+function balanceTooltip(balance, t) {
+    if (balance.balance === null)
+        return t('balance.failed');
+    const symbol = currencySymbol(balance.balance.currency);
+    const amount = `${symbol}${formatMoney(balance.balance.total)}`;
+    const granted = `${symbol}${formatMoney(balance.balance.granted)}`;
+    const toppedUp = `${symbol}${formatMoney(balance.balance.toppedUp)}`;
+    const detail = t('balance.detail', { amount, granted, toppedUp });
+    return balance.isAvailable ? detail : `${detail} · ${t('balance.suspended')}`;
+}
+/** The tooltip's cost detail rows from the anchored projection. Never throws. */
+export function costDetail(cost, model, t, currency = 'CNY') {
+    const rows = [];
+    try {
+        if (cost === undefined)
+            return rows;
+        const symbol = currencySymbol(currency);
+        const totals = cost.totals;
+        if (totals !== undefined && totals.pricedSteps > 0) {
+            rows.push(t('cost.label', { amount: `${symbol}${formatMoney(totals.cost)}` }));
+            rows.push(t('view.uncached') + ` ${symbol}${formatMoney(totals.uncachedCost)}`);
+            rows.push(t('view.cacheRead') + ` ${symbol}${formatMoney(totals.cacheReadCost)}`);
+            rows.push(t('view.output') + ` ${symbol}${formatMoney(totals.outputCost)}`);
+        }
+        if (model !== undefined)
+            rows.push(t('step.model', { model }));
+        const steps = cost.steps;
+        if (steps !== undefined && steps.length > 0) {
+            const last = steps[steps.length - 1];
+            if (last !== undefined && last.snapshotVersion !== null) {
+                rows.push(t('pill.detail.snapshot', { time: formatTime(last.snapshotEffectiveAt ?? last.time) }));
+            }
+        }
+        if (totals !== undefined && totals.unpricedSteps > 0) {
+            rows.push(t('view.unpriced', { count: String(totals.unpricedSteps) }));
+        }
+    }
+    catch {
+        /* a malformed field must never take down the dock entry */
+    }
+    return rows;
+}
+export const SessionCostLine = memo(function SessionCostLine({ useProjection, sessionId, t }) {
+    const currency = displayCurrency(t);
+    const projectionKey = currency === 'USD' ? 'sessionCostUsd' : 'sessionCost';
+    const cost = useProjection(projectionKey);
+    const [response, setResponse] = useState(null);
+    const [failed, setFailed] = useState(false);
+    useEffect(() => {
+        let alive = true;
+        let timer;
+        const endpoint = `${ENDPOINT}?session=${encodeURIComponent(sessionId)}&currency=${currency}`;
+        const load = () => {
+            void fetch(endpoint, { cache: 'no-store' })
+                .then((res) => {
+                if (!res.ok)
+                    throw new Error(`HTTP ${res.status}`);
+                return res.json();
+            })
+                .then((data) => {
+                if (!alive)
+                    return;
+                setResponse(data);
+                setFailed(false);
+            })
+                .catch(() => {
+                if (alive)
+                    setFailed(true);
+            });
+        };
+        load();
+        timer = window.setInterval(load, REFRESH_MS);
+        return () => {
+            alive = false;
+            if (timer !== undefined)
+                window.clearInterval(timer);
+        };
+    }, [sessionId, currency]);
+    const balance = response?.balance;
+    const balanceEnabled = response?.pricebook?.balanceEnabled !== false;
+    const subagents = response?.subagents;
+    const combined = combineTotals(cost?.totals, subagents);
+    const subSpend = subagentSpend(subagents);
+    // The dock readout must never vanish on a session switch: switching
+    // sessions re-binds the projection hook, and until the new session's
+    // baseline has carried the sessionCost key useProjection returns
+    // undefined (capability absent - never a usable signal). Treat a
+    // missing ledger as a zero ledger so the row renders CNY 0.00
+    // instead of disappearing while the baseline is in flight.
+    const mainSpend = cost?.totals?.cost ?? 0;
+    const parts = [];
+    try {
+        const symbol = currencySymbol(currency);
+        // Breakdown first (cached input, uncached input, output — combined with
+        // subagents), then the main session total, then the subagent total, then
+        // the balance.
+        if (combined !== undefined && combined.pricedSteps > 0) {
+            parts.push(t('line.cacheRead', { amount: `${symbol}${formatMoney(combined.cacheReadCost)}` }));
+            parts.push(t('line.uncached', { amount: `${symbol}${formatMoney(combined.uncachedCost)}` }));
+            parts.push(t('line.output', { amount: `${symbol}${formatMoney(combined.outputCost)}` }));
+        }
+        parts.push(t('cost.label', { amount: `${symbol}${formatMoney(mainSpend)}` }));
+        if (subSpend > 0) {
+            parts.push(t('line.subagent', { amount: `${symbol}${formatMoney(subSpend)}` }));
+        }
+        if (balanceEnabled && balance?.ok === true && balance.balance !== null) {
+            parts.push(t('balance.label', { amount: `${currencySymbol(balance.balance.currency)}${formatMoney(balance.balance.total)}` }));
+        }
+        else if (balanceEnabled && failed) {
+            parts.push(t('balance.failed'));
+        }
+    }
+    catch {
+        /* keep the row alive */
+    }
+    if (parts.length === 0)
+        return null;
+    const model = cost?.model?.model;
+    const tooltipParts = useMemo(() => {
+        const rows = [];
+        try {
+            rows.push(...costDetail(cost, model, t, currency));
+            if (subSpend > 0) {
+                rows.push(t('line.subagent', { amount: `${currencySymbol(currency)}${formatMoney(subSpend)}` }));
+            }
+            const pricebook = response?.pricebook;
+            if (pricebook !== undefined && pricebook.current !== null) {
+                const source = pricebook.current.source;
+                if (source === 'official' || source === 'fallback' || source === 'manual' || source === 'openrouter') {
+                    rows.push(t('pill.detail.source', { source: t(`source.${source}`) }));
+                }
+            }
+            if (balanceEnabled && balance?.ok === true)
+                rows.push(balanceTooltip(balance, t));
+            if (response !== null) {
+                rows.push(t('refreshedAt', { time: formatTime(balance?.ok === true ? balance.fetchedAt : Date.now()) }));
+            }
+        }
+        catch {
+            /* keep the row alive */
+        }
+        return rows;
+    }, [cost, model, t, balance, balanceEnabled, response, subSpend, currency]);
+    const line = parts.join(' · ');
+    const tooltip = tooltipParts.filter(Boolean).join(' · ');
+    if (tooltip.length === 0) {
+        return _jsx("div", { className: css.root, "data-testid": "session-cost-line", children: line });
+    }
+    return (_jsx(Tooltip, { label: tooltip, side: "top", delayMs: 500, children: _jsx("div", { className: css.root, "data-testid": "session-cost-line", children: line }) }));
+});

package/lib/types/client/SessionCostPill.d.ts

@@ -0,0 +1,13 @@
+import type { UseProjection } from '@deepseek-ai/dsh-client-runtime/client';
+import type { SnapshotSelectorHook } from '@deepseek-ai/dsh-client-ui-slots';
+import type { ConversationSnapshot } from '@deepseek-ai/dsh-client-runtime/client';
+import type { PropsLocale } from '@deepseek-ai/dsh-client-ui-slots';
+export type PillLocale = PropsLocale<'cost-meter'>['t'];
+export interface SessionCostPillProps {
+    useSession: SnapshotSelectorHook<ConversationSnapshot>;
+    useProjection: UseProjection;
+    sessionId: string;
+    t: PillLocale;
+}
+export declare const SessionCostPill: import("react").MemoExoticComponent<({ useSession, useProjection, sessionId, t }: SessionCostPillProps) => import("react").JSX.Element | null>;
+//# sourceMappingURL=SessionCostPill.d.ts.map

package/lib/types/client/SessionCostPill.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SessionCostPill.d.ts","sourceRoot":"","sources":["../../../src/client/SessionCostPill.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wCAAwC,CAAA;AAC3E,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,kCAAkC,CAAA;AAC5E,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,wCAAwC,CAAA;AAClF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAA;AASnE,MAAM,MAAM,UAAU,GAAG,WAAW,CAAC,YAAY,CAAC,CAAC,GAAG,CAAC,CAAA;AAEvD,MAAM,WAAW,oBAAoB;IACnC,UAAU,EAAE,oBAAoB,CAAC,oBAAoB,CAAC,CAAA;IACtD,aAAa,EAAE,aAAa,CAAA;IAC5B,SAAS,EAAE,MAAM,CAAA;IACjB,CAAC,EAAE,UAAU,CAAA;CACd;AA6BD,eAAO,MAAM,eAAe,oFAA8E,oBAAoB,wCAgI5H,CAAA"}