@linxiraos/pi-stats 1.1.27 → 1.2.0

package/src/client/api.ts

@@ -45,12 +45,34 @@ async function readErrorMessage(res: Response, endpoint: string): Promise<string
 	return `HTTP error ${res.status} on ${endpoint}`;
 }
 
-async function fetchJson<T>(endpoint: string, options?: RequestInit): Promise<T> {
-	const res = await fetch(endpoint, options);
+/**
+ * Response validators keyed by the parsed body they describe. Revalidating a
+ * body sends its ETag; the entry dies with the body when callers drop it.
+ */
+const validators = new WeakMap<object, string>();
+
+/**
+ * Fetch `endpoint` as JSON, revalidating `previous` when it came from an
+ * ETag-bearing response: a 304 resolves to `previous` itself (same reference,
+ * no re-parse).
+ */
+async function fetchJson<T>(endpoint: string, options?: RequestInit, previous?: T): Promise<T> {
+	const etag = typeof previous === "object" && previous !== null ? validators.get(previous) : undefined;
+	let init = options;
+	if (etag) {
+		const headers = new Headers(options?.headers);
+		headers.set("If-None-Match", etag);
+		init = { ...options, headers };
+	}
+	const res = await fetch(endpoint, init);
+	if (res.status === 304 && etag) return previous as T;
 	if (!res.ok) {
 		throw new ApiError(res.status, endpoint, await readErrorMessage(res, endpoint));
 	}
-	return res.json() as Promise<T>;
+	const data = (await res.json()) as T;
+	const nextEtag = res.headers.get("ETag");
+	if (nextEtag && typeof data === "object" && data !== null) validators.set(data, nextEtag);
+	return data;
 }
 
 /**
@@ -182,8 +204,21 @@ export async function getSessions(limit = 100, q?: string, signal?: AbortSignal)
 	return fetchJson<SessionSummary[]>(`${API_BASE}/sessions?${params}`, { signal });
 }
 
-export async function getSessionTrace(file: string, signal?: AbortSignal): Promise<SessionTrace> {
-	return fetchJson<SessionTrace>(`${API_BASE}/session/trace?file=${encodeURIComponent(file)}`, { signal });
+/**
+ * Pass the last trace for `file` as `previous` to revalidate it: an unchanged
+ * trace resolves to that same object without downloading or parsing the body.
+ */
+export async function getSessionTrace(
+	file: string,
+	signal?: AbortSignal,
+	previous?: SessionTrace,
+): Promise<SessionTrace> {
+	// `no-store`: validation is ours (above); the browser cache would only keep a second multi-MB copy.
+	return fetchJson<SessionTrace>(
+		`${API_BASE}/session/trace?file=${encodeURIComponent(file)}`,
+		{ signal, cache: "no-store" },
+		previous,
+	);
 }
 
 /** Fetch one full journal entry for the span drawer. Entries are opaque JSON. */

package/src/client/app/LiveChip.tsx

@@ -1,12 +1,13 @@
 import { RefreshCw } from "lucide-react";
 import { type ReactNode, useEffect, useState } from "react";
 import { formatInteger } from "../data/formatters";
-import { useLive } from "../data/live";
+import { t } from "../i18n";
+import { useLiveStatus } from "../data/live";
 import { Dot } from "../ui";
 
 /** Topbar ingest status; click to sync now. */
 export function LiveChip() {
-	const { sync, indexingHours, connected, requestSync } = useLive();
+	const { sync, indexingHours, connected, requestSync } = useLiveStatus();
 	const now = useNow(sync.phase === "idle" ? 15_000 : null);
 
 	let body: ReactNode;
@@ -15,15 +16,15 @@ export function LiveChip() {
 		body = (
 			<>
 				<Dot tone="warn" />
-				<span>Reconnecting</span>
+				<span>{t("shell.reconnecting")}</span>
 			</>
 		);
-		title = "Lost the live connection to the stats server; retrying";
+		title = t("shell.lost-connection");
 	} else if (sync.phase === "syncing") {
 		body = (
 			<>
 				<RefreshCw size={13} className="spin" />
-				<span>Syncing</span>
+				<span>{t("shell.syncing")}</span>
 				{sync.total > 0 && (
 					<span className="live-chip-count">
 						{formatInteger(sync.current)}/{formatInteger(sync.total)}
@@ -31,33 +32,33 @@ export function LiveChip() {
 				)}
 			</>
 		);
-		title = "Ingesting session files";
+		title = t("shell.ingesting");
 	} else if (sync.phase === "error") {
 		body = (
 			<>
 				<Dot tone="bad" />
-				<span>Sync failed</span>
+				<span>{t("shell.sync-failed")}</span>
 			</>
 		);
-		title = `${sync.error ?? "Sync failed"} — click to retry`;
+		title = `${sync.error ?? t("shell.sync-failed")} — click to retry`;
 	} else if (indexingHours > INDEXING_VISIBLE_HOURS) {
 		body = (
 			<>
 				<RefreshCw size={13} className="spin" />
-				<span>Indexing</span>
+				<span>{t("shell.indexing")}</span>
 				<span className="live-chip-count">{formatInteger(indexingHours)}h left</span>
 			</>
 		);
-		title = "Building hourly rollups; older ranges fill in as it goes";
+		title = t("shell.building-rollups");
 	} else {
 		body = (
 			<>
 				<Dot tone="live" pulse />
-				<span>Live</span>
+				<span>{t("shell.live")}</span>
 				{sync.lastSyncedAt !== null && <span className="live-chip-count">{ago(now - sync.lastSyncedAt)}</span>}
 			</>
 		);
-		title = "Click to sync session files now";
+		title = t("shell.sync-now");
 	}
 
 	return (
@@ -89,7 +90,7 @@ function useNow(intervalMs: number | null): number {
 
 function ago(ms: number): string {
 	const s = Math.max(0, Math.round(ms / 1000));
-	if (s < 45) return "just now";
+	if (s < 45) return t("shell.just-now");
 	const m = Math.round(s / 60);
 	if (m < 60) return `${m}m ago`;
 	const h = Math.round(m / 60);

package/src/client/app/Shell.tsx

@@ -1,7 +1,8 @@
 import { Menu } from "lucide-react";
 import { type ReactNode, useEffect, useState } from "react";
 import { rangeMeta, TIME_RANGES } from "../data/range";
-import { useLive } from "../data/live";
+import { t } from "../i18n";
+import { useLiveStatus } from "../data/live";
 import type { TimeRange } from "../types";
 import { Segmented } from "../ui";
 import { LiveChip } from "./LiveChip";
@@ -18,8 +19,8 @@ export interface ShellProps {
 
 const RANGE_OPTIONS = TIME_RANGES.map((range, i) => ({
 	value: range,
-	label: rangeMeta(range).label,
-	title: `${rangeMeta(range).windowLabel} (${i + 1})`,
+	label: t(rangeMeta(range).labelKey),
+	title: `${t(rangeMeta(range).windowKey)} (${i + 1})`,
 }));
 
 /**
@@ -30,7 +31,7 @@ const RANGE_OPTIONS = TIME_RANGES.map((range, i) => ({
 export function Shell({ section, onSectionChange, range, onRangeChange, children }: ShellProps) {
 	const [menuOpen, setMenuOpen] = useState(false);
 	const scrolled = useScrolled();
-	const { sync } = useLive();
+	const { sync } = useLiveStatus();
 	useShortcuts(onSectionChange, onRangeChange);
 
 	const go = (next: DashboardSection) => {
@@ -51,7 +52,7 @@ export function Shell({ section, onSectionChange, range, onRangeChange, children
 					data-variant="ghost"
 					data-icon="true"
 					onClick={() => setMenuOpen(true)}
-					aria-label="Open navigation"
+					aria-label={t("nav.open-navigation")}
 				>
 					<Menu size={16} />
 				</button>
@@ -78,14 +79,19 @@ export function Shell({ section, onSectionChange, range, onRangeChange, children
 					</svg>
 					<span>zeta</span>
 					<span className="topbar-slash">/</span>
-					<span className="topbar-title">stats</span>
+					<span className="topbar-title">{t("nav.breadcrumb-stats")}</span>
 				</div>
 				<div className="topbar-spacer" />
 				<div className="topbar-actions">
 					<span className="topbar-hide-narrow">
 						<LiveChip />
 					</span>
-					<Segmented options={RANGE_OPTIONS} value={range} onChange={onRangeChange} aria-label="Time range" />
+					<Segmented
+						options={RANGE_OPTIONS}
+						value={range}
+						onChange={onRangeChange}
+						aria-label={t("common.time-range")}
+					/>
 					<ThemeToggle />
 				</div>
 				{progress !== undefined && (
@@ -100,10 +106,10 @@ export function Shell({ section, onSectionChange, range, onRangeChange, children
 			</header>
 
 			{menuOpen && <div className="drawer-scrim" onClick={() => setMenuOpen(false)} role="presentation" />}
-			<nav className="sidebar" data-open={menuOpen} aria-label="Pages">
+			<nav className="sidebar" data-open={menuOpen} aria-label={t("nav.pages")}>
 				{NAV.map(group => (
-					<div key={group.heading} className="nav-group">
-						<div className="nav-heading">{group.heading}</div>
+					<div key={group.headingKey} className="nav-group">
+						<div className="nav-heading">{t(group.headingKey)}</div>
 						{group.items.map(item => (
 							<button
 								key={item.id}
@@ -114,7 +120,7 @@ export function Shell({ section, onSectionChange, range, onRangeChange, children
 								onClick={() => go(item.id)}
 							>
 								<item.icon size={15} />
-								<span className="nav-row-label">{item.label}</span>
+								<span className="nav-row-label">{t(item.labelKey)}</span>
 								<kbd>G {item.hotkey.toUpperCase()}</kbd>
 							</button>
 						))}
@@ -122,10 +128,10 @@ export function Shell({ section, onSectionChange, range, onRangeChange, children
 				))}
 				<div className="sidebar-foot micro">
 					<span>
-						<span className="kbd">1</span>–<span className="kbd">6</span> range
+						<span className="kbd">1</span>–<span className="kbd">6</span> {t("shell.range-suffix")}
 					</span>
 					<span>
-						<span className="kbd">G</span> then letter to jump
+						<span className="kbd">G</span> {t("shell.jump-hint")}
 					</span>
 				</div>
 			</nav>

package/src/client/app/ThemeToggle.tsx

@@ -1,5 +1,6 @@
 import { type LucideIcon, Monitor, Moon, Sun } from "lucide-react";
 import { type ThemePreference, useThemePreference } from "../useSystemTheme";
+import { t } from "../i18n";
 
 const NEXT_PREFERENCE: Record<ThemePreference, ThemePreference> = {
 	system: "light",
@@ -14,9 +15,9 @@ const PREFERENCE_ICON: Record<ThemePreference, LucideIcon> = {
 };
 
 const PREFERENCE_LABEL: Record<ThemePreference, string> = {
-	system: "System theme",
-	light: "Light theme",
-	dark: "Dark theme",
+	system: t("shell.system-theme"),
+	light: t("shell.light-theme"),
+	dark: t("shell.dark-theme"),
 };
 
 /** Cycles system → light → dark. */

package/src/client/app/nav.ts

@@ -12,6 +12,7 @@ import {
 	SquareChartGantt,
 	Wrench,
 } from "lucide-react";
+import type { MessageKey } from "../i18n";
 
 export type DashboardSection =
 	| "overview"
@@ -28,43 +29,45 @@ export type DashboardSection =
 
 export interface NavItem {
 	id: DashboardSection;
-	label: string;
+	/** Message key of the sidebar label; render through `t`. */
+	labelKey: MessageKey;
 	icon: LucideIcon;
 	/** Second key of the `g <key>` jump shortcut. */
 	hotkey: string;
 }
 
 export interface NavGroup {
-	heading: string;
+	/** Message key of the group heading; render through `t`. */
+	headingKey: MessageKey;
 	items: readonly NavItem[];
 }
 
 /** Sidebar structure; the order here is the order on screen. */
 export const NAV: readonly NavGroup[] = [
 	{
-		heading: "Usage",
+		headingKey: "nav.usage",
 		items: [
-			{ id: "overview", label: "Overview", icon: LayoutGrid, hotkey: "o" },
-			{ id: "models", label: "Models", icon: Cpu, hotkey: "m" },
-			{ id: "providers", label: "Providers", icon: PlugZap, hotkey: "p" },
-			{ id: "costs", label: "Costs", icon: Coins, hotkey: "c" },
+			{ id: "overview", labelKey: "nav.overview", icon: LayoutGrid, hotkey: "o" },
+			{ id: "models", labelKey: "nav.models", icon: Cpu, hotkey: "m" },
+			{ id: "providers", labelKey: "nav.providers", icon: PlugZap, hotkey: "p" },
+			{ id: "costs", labelKey: "nav.costs", icon: Coins, hotkey: "c" },
 		],
 	},
 	{
-		heading: "Activity",
+		headingKey: "nav.activity",
 		items: [
-			{ id: "requests", label: "Requests", icon: Activity, hotkey: "r" },
-			{ id: "errors", label: "Errors", icon: CircleAlert, hotkey: "e" },
-			{ id: "traces", label: "Traces", icon: SquareChartGantt, hotkey: "t" },
+			{ id: "requests", labelKey: "nav.requests", icon: Activity, hotkey: "r" },
+			{ id: "errors", labelKey: "nav.errors", icon: CircleAlert, hotkey: "e" },
+			{ id: "traces", labelKey: "nav.traces", icon: SquareChartGantt, hotkey: "t" },
 		],
 	},
 	{
-		heading: "Insights",
+		headingKey: "nav.insights",
 		items: [
-			{ id: "tools", label: "Tools", icon: Wrench, hotkey: "l" },
-			{ id: "frustration", label: "Frustration", icon: Frown, hotkey: "f" },
-			{ id: "projects", label: "Projects", icon: FolderGit2, hotkey: "j" },
-			{ id: "gain", label: "Gain", icon: Sparkles, hotkey: "g" },
+			{ id: "tools", labelKey: "nav.tools", icon: Wrench, hotkey: "l" },
+			{ id: "frustration", labelKey: "nav.frustration", icon: Frown, hotkey: "f" },
+			{ id: "projects", labelKey: "nav.projects", icon: FolderGit2, hotkey: "j" },
+			{ id: "gain", labelKey: "nav.gain", icon: Sparkles, hotkey: "g" },
 		],
 	},
 ];

package/src/client/data/formatters.ts

@@ -1,25 +1,29 @@
-import { format, formatDistanceToNow } from "@linxiraos/pi-utils/dates";
+import { getLocale, t } from "../i18n";
 import type { MessageStats } from "../types";
 
 /**
- * Every number on the dashboard uses one fixed locale. Labels, percents
- * (`toFixed`), durations and dates are English, so following the browser
- * locale mixed conventions (e.g. `1,4 Mr` beside `97.0%` on a tr-TR browser).
+ * One locale drives every number and date, and it is the *product's* — the
+ * host CLI's language injected into the page, not the browser's. Mixing
+ * conventions (e.g. `1,4 Mr` beside `97.0%` on a tr-TR browser) stays
+ * impossible; the difference from the pre-i18n build is only that a `zh-CN`
+ * dashboard now formats in `zh-CN` throughout.
  */
-const NUMBER_LOCALE = "en-US";
+function numberLocale(): string {
+	return getLocale();
+}
 
 export function formatInteger(value: number): string {
-	return value.toLocaleString(NUMBER_LOCALE);
+	return value.toLocaleString(numberLocale());
 }
 
 export function formatCompact(value: number): string {
-	return value.toLocaleString(NUMBER_LOCALE, { notation: "compact" });
+	return value.toLocaleString(numberLocale(), { notation: "compact" });
 }
 
 export function formatCost(value: number, digits?: number): string {
 	if (value === 0) return "$0";
 	const fractionDigits = digits !== undefined ? digits : value > 0 && value < 0.01 ? 4 : 2;
-	return `$${value.toLocaleString(NUMBER_LOCALE, {
+	return `$${value.toLocaleString(numberLocale(), {
 		minimumFractionDigits: fractionDigits,
 		maximumFractionDigits: fractionDigits,
 	})}`;
@@ -83,18 +87,74 @@ export function formatTokensPerSecond(value: number | null): string {
 	return value.toFixed(1);
 }
 
-export function formatRelativeTime(timestamp: number): string {
-	return formatDistanceToNow(new Date(timestamp), { addSuffix: true });
+const RELATIVE_UNITS: readonly [Intl.RelativeTimeFormatUnit, number][] = [
+	["second", 1_000],
+	["minute", 60_000],
+	["hour", 3_600_000],
+	["day", 86_400_000],
+	["month", 2_629_800_000],
+	["year", 31_557_600_000],
+];
+
+const relativeFormatters = new Map<string, Intl.RelativeTimeFormat>();
+const dateFormatters = new Map<string, Intl.DateTimeFormat>();
+
+/** "2 minutes ago" / "2 分钟前" — the ladder picks the largest unit the delta reaches. */
+export function formatRelativeTime(timestamp: number, now = Date.now()): string {
+	const locale = getLocale();
+	let formatter = relativeFormatters.get(locale);
+	if (!formatter) {
+		formatter = new Intl.RelativeTimeFormat(locale, { numeric: "auto" });
+		relativeFormatters.set(locale, formatter);
+	}
+	const delta = timestamp - now;
+	let unitIndex = 0;
+	for (let i = 1; i < RELATIVE_UNITS.length; i++) {
+		if (Math.abs(delta) >= RELATIVE_UNITS[i][1]) unitIndex = i;
+	}
+	const [unit, ms] = RELATIVE_UNITS[unitIndex];
+	return formatter.format(Math.round(delta / ms), unit);
+}
+
+/** Local month/day plus minute ("Sep 28 14:03" / "9月28日 14:03") for chart range captions. */
+export function formatDateTimeShort(timestamp: number): string {
+	const locale = getLocale();
+	const key = `${locale}:mdhm`;
+	let formatter = dateFormatters.get(key);
+	if (!formatter) {
+		formatter = new Intl.DateTimeFormat(locale, {
+			month: "short",
+			day: "numeric",
+			hour: "2-digit",
+			minute: "2-digit",
+			hourCycle: "h23",
+		});
+		dateFormatters.set(key, formatter);
+	}
+	return formatter.format(timestamp);
 }
 
-/** Absolute local date and time to the second ("Sep 28, 14:03:22"). */
+/** Absolute local date and time to the second ("Sep 28, 14:03:22" / "9月28日 14:03:22"). */
 export function formatTimestamp(timestamp: number): string {
-	return format(new Date(timestamp), "MMM d, HH:mm:ss");
+	const locale = getLocale();
+	let formatter = dateFormatters.get(locale);
+	if (!formatter) {
+		formatter = new Intl.DateTimeFormat(locale, {
+			month: "short",
+			day: "numeric",
+			hour: "2-digit",
+			minute: "2-digit",
+			second: "2-digit",
+			hourCycle: "h23",
+		});
+		dateFormatters.set(locale, formatter);
+	}
+	return formatter.format(timestamp);
 }
 
 /** Project folder as stored by ingest (`/work-pi/`), without the slashes. */
 export function formatFolder(folder: string): string {
-	return folder.replace(/^\/+|\/+$/g, "") || "(root)";
+	return folder.replace(/^\/+|\/+$/g, "") || t("common.root");
 }
 
 export function formatBytes(value: number): string {

package/src/client/data/live.tsx

@@ -3,21 +3,17 @@
  * version every query revalidates against, background ingest progress, and
  * the rollup indexing backlog.
  *
- * Any component can `useLive()`; queries (see `useQuery`) refetch whenever
- * `version` advances, so rows ingested in the background repaint the active
- * page without a manual refresh.
+ * The state lives in a module store read through narrow selectors, so a
+ * progress tick only re-renders what shows progress: `useLiveVersion()` for
+ * queries (see `useQuery`), `useLiveStatus()` for the chrome.
  */
 
-import { createContext, type ReactNode, useCallback, useContext, useEffect, useMemo, useState } from "react";
+import { type ReactNode, useEffect, useSyncExternalStore } from "react";
 import * as api from "../api";
 import type { LiveStatus, LiveSyncStatus } from "../types";
 
-export interface LiveState {
-	/**
-	 * Client-side data version; bumps whenever the server's version changes
-	 * (including after reconnecting to a restarted server).
-	 */
-	version: number;
+/** Ingest status shown by the chrome. */
+export interface LiveStatusView {
 	sync: LiveSyncStatus;
 	/** Hours whose rollups are still being built; wide ranges may be incomplete. */
 	indexingHours: number;
@@ -36,50 +32,94 @@ const IDLE_SYNC: LiveSyncStatus = {
 	error: null,
 };
 
-const LiveContext = createContext<LiveState>({
-	version: 0,
-	sync: IDLE_SYNC,
-	indexingHours: 0,
-	connected: false,
-	requestSync: () => {},
-});
+function requestSync(): void {
+	api.requestSync().catch(() => {});
+}
 
-export function LiveProvider({ children }: { children: ReactNode }) {
-	const [status, setStatus] = useState<{ server: LiveStatus | null; version: number }>({ server: null, version: 0 });
-	const [connected, setConnected] = useState(false);
+let lastServerVersion: number | null = null;
+/** Distinct server versions seen (including across server restarts). */
+let seenVersions = 0;
+/**
+ * Client-side data version; bumps whenever the server's version changes.
+ * Lags `seenVersions` by one so the first stream message doesn't refetch what
+ * just loaded.
+ */
+let version = 0;
+let status: LiveStatusView = { sync: IDLE_SYNC, indexingHours: 0, connected: false, requestSync };
+const listeners = new Set<() => void>();
+
+function subscribe(listener: () => void): () => void {
+	listeners.add(listener);
+	return () => listeners.delete(listener);
+}
+
+function emit(): void {
+	for (const listener of listeners) listener();
+}
+
+function sameSync(a: LiveSyncStatus, b: LiveSyncStatus): boolean {
+	return (
+		a.phase === b.phase &&
+		a.current === b.current &&
+		a.total === b.total &&
+		a.processed === b.processed &&
+		a.lastSyncedAt === b.lastSyncedAt &&
+		a.error === b.error
+	);
+}
+
+function receive(next: LiveStatus): void {
+	if (lastServerVersion !== next.version) {
+		lastServerVersion = next.version;
+		seenVersions++;
+	}
+	const nextVersion = Math.max(0, seenVersions - 1);
+	const statusChanged = next.indexingHours !== status.indexingHours || !sameSync(next.sync, status.sync);
+	if (!statusChanged && nextVersion === version) return;
+	version = nextVersion;
+	if (statusChanged) status = { ...status, sync: next.sync, indexingHours: next.indexingHours };
+	emit();
+}
 
+function setConnected(connected: boolean): void {
+	if (connected === status.connected) return;
+	status = { ...status, connected };
+	emit();
+}
+
+const getStatus = (): LiveStatusView => status;
+const getVersion = (): number => version;
+const getDisabledVersion = (): number => -1;
+
+/** Current data version, read outside render (e.g. when a fetch starts). */
+export function currentLiveVersion(): number {
+	return version;
+}
+
+/** Owns the `/api/events` stream; mount once at the app root. */
+export function LiveProvider({ children }: { children: ReactNode }) {
 	useEffect(() => {
 		const source = new EventSource("/api/events");
 		source.onopen = () => setConnected(true);
 		source.onerror = () => setConnected(false);
-		source.onmessage = event => {
-			const next = JSON.parse(event.data) as LiveStatus;
-			setStatus(prev => ({
-				server: next,
-				version: prev.server && prev.server.version === next.version ? prev.version : prev.version + 1,
-			}));
+		source.onmessage = event => receive(JSON.parse(event.data) as LiveStatus);
+		return () => {
+			source.close();
+			setConnected(false);
 		};
-		return () => source.close();
-	}, []);
-
-	const requestSync = useCallback(() => {
-		api.requestSync().catch(() => {});
 	}, []);
+	return children;
+}
 
-	const value = useMemo<LiveState>(
-		() => ({
-			// Start at 0 so the first stream message (version 1) doesn't refetch what just loaded.
-			version: Math.max(0, status.version - 1),
-			sync: status.server?.sync ?? IDLE_SYNC,
-			indexingHours: status.server?.indexingHours ?? 0,
-			connected,
-			requestSync,
-		}),
-		[status, connected, requestSync],
-	);
-	return <LiveContext.Provider value={value}>{children}</LiveContext.Provider>;
+/** Ingest status for the chrome; data-version bumps alone don't re-render. */
+export function useLiveStatus(): LiveStatusView {
+	return useSyncExternalStore(subscribe, getStatus);
 }
 
-export function useLive(): LiveState {
-	return useContext(LiveContext);
+/**
+ * Data version for queries. Disabled (hidden) consumers read a constant -1 so
+ * live traffic never re-renders them.
+ */
+export function useLiveVersion(enabled = true): number {
+	return useSyncExternalStore(subscribe, enabled ? getVersion : getDisabledVersion);
 }