@linxiraos/pi-stats 1.1.7 → 1.1.9

package/CHANGELOG.md

@@ -2,13 +2,13 @@
 
 ## [Unreleased]
 
-## [1.1.7] - 2026-09-01
+## [1.1.9] - 2026-09-05
 
-- 版本线随 1.1.7 发布对齐（随本体 v18.0.11 同步与主题/网关更新），包内无独立变更。
+- v18.1.10 sync baseline (stats tracking panel updates).
 
-## [1.1.6] - 2026-08-30
+## [1.1.8] - 2026-09-04
 
-- 同步上游 OMP v18.0.9（`cc14e04f075d`）。
+- OMP sync v18.1.2–v18.1.5: `/trace` tracking panel, compaction summary persistence, and stats-sync worker alignment.
 
 ## [1.1.5] - 2026-08-26
 

package/package.json

@@ -1,96 +1,89 @@
 {
-	"type": "module",
-	"name": "@linxiraos/pi-stats",
-	"version": "1.1.7",
-	"description": "Local observability dashboard for pi AI usage statistics",
-	"homepage": "https://linxira-os.github.io/zeta/",
-	"author": "Can Boluk",
-	"license": "MIT",
-	"repository": {
-		"type": "git",
-		"url": "git+https://github.com/Linxira-OS/linxira-zeta.git",
-		"directory": "packages/stats"
-	},
-	"bugs": {
-		"url": "https://github.com/Linxira-OS/linxira-zeta/issues"
-	},
-	"keywords": [
-		"ai",
-		"observability",
-		"metrics",
-		"dashboard",
-		"llm",
-		"statistics"
-	],
-	"main": "./src/index.ts",
-	"types": "./dist/types/index.d.ts",
-	"bin": {
-		"zeta-stats": "./src/index.ts"
-	},
-	"scripts": {
-		"gen:stats": "bun scripts/generate-client-bundle.ts --generate",
-		"gen:stats:reset": "bun scripts/generate-client-bundle.ts --reset",
-		"build": "bun run build.ts",
-		"dev": "bun run src/index.ts",
-		"check": "biome check . && bun run check:types",
-		"check:types": "tsgo -p tsconfig.json --noEmit && tsgo -p tsconfig.client.json --noEmit",
-		"lint": "biome lint .",
-		"fix": "biome check --write --unsafe .",
-		"fmt": "biome format --write ."
-	},
-	"dependencies": {
-		"@linxiraos/pi-ai": "1.1.7",
-		"@linxiraos/pi-catalog": "1.1.7",
-		"@linxiraos/pi-utils": "1.1.7",
-		"@tailwindcss/node": "^4.3.2",
-		"chart.js": "^4.5.1",
-		"lucide-react": "^1.24.0",
-		"react": "19.2.7",
-		"react-chartjs-2": "^5.3.1",
-		"react-dom": "19.2.7",
-		"tailwindcss": "^4.3.2"
-	},
-	"devDependencies": {
-		"@types/bun": "^1.3.14",
-		"@types/react": "^19.2.17",
-		"@types/react-dom": "^19.2.3",
-		"postcss": "^8.5.16"
-	},
-	"engines": {
-		"bun": ">=1.3.14"
-	},
-	"files": [
-		"src",
-		"build.ts",
-		"tailwind.config.js",
-		"README.md",
-		"CHANGELOG.md",
-		"LICENSE",
-		"THIRD-PARTY-NOTICES.txt",
-		"dist/types",
-		"dist/client"
-	],
-	"exports": {
-		".": {
-			"types": "./dist/types/index.d.ts",
-			"import": "./src/index.ts"
-		},
-		"./*": {
-			"types": "./dist/types/*.d.ts",
-			"import": "./src/*.ts"
-		},
-		"./client": {
-			"types": "./dist/types/client/index.d.ts",
-			"import": "./src/client/index.tsx"
-		},
-		"./client/*": {
-			"types": "./dist/types/client/*.d.ts",
-			"import": "./src/client/*.ts"
-		},
-		"./client/components/*": {
-			"types": "./dist/types/client/components/*.d.ts",
-			"import": "./src/client/components/*.ts"
-		},
-		"./*.js": "./src/*.ts"
-	}
+  "exports": {
+    "./*.js": "./src/*.ts",
+    "./client/components/*": {
+      "import": "./src/client/components/*.ts",
+      "types": "./src/client/components/*.ts"
+    },
+    "./client/*": {
+      "import": "./src/client/*.ts",
+      "types": "./src/client/*.ts"
+    },
+    "./client": {
+      "import": "./src/client/index.tsx",
+      "types": "./src/client/index.tsx"
+    },
+    "./*": {
+      "import": "./src/*.ts",
+      "types": "./src/*.ts"
+    },
+    ".": {
+      "import": "./src/index.ts",
+      "types": "./src/index.ts"
+    }
+  },
+  "files": [
+    "src",
+    "build.ts",
+    "tailwind.config.js",
+    "README.md",
+    "CHANGELOG.md"
+  ],
+  "engines": {
+    "bun": ">=1.3.14"
+  },
+  "devDependencies": {
+    "postcss": "^8.5.16",
+    "@types/react-dom": "^19.2.3",
+    "@types/react": "^19.2.17",
+    "@types/bun": "^1.3.14"
+  },
+  "dependencies": {
+    "@linxiraos/pi-utils": "1.1.9",
+    "@linxiraos/pi-catalog": "1.1.9",
+    "@linxiraos/pi-ai": "1.1.9",
+    "tailwindcss": "^4.3.2",
+    "react-dom": "19.2.7",
+    "react-chartjs-2": "^5.3.1",
+    "react": "19.2.7",
+    "lucide-react": "^1.24.0",
+    "chart.js": "^4.5.1",
+    "@tailwindcss/node": "^4.3.2"
+  },
+  "scripts": {
+    "check:types": "tsgo -p tsconfig.json --noEmit && tsgo -p tsconfig.client.json --noEmit",
+    "check": "tsgo -p tsconfig.json --noEmit",
+    "dev": "bun run src/index.ts",
+    "build": "bun run build.ts",
+    "gen:stats:reset": "bun scripts/generate-client-bundle.ts --reset",
+    "gen:stats": "bun scripts/generate-client-bundle.ts --generate"
+  },
+  "bin": {
+    "zeta-stats": "./src/index.ts"
+  },
+  "types": "./src/index.ts",
+  "main": "./src/index.ts",
+  "keywords": [
+    "ai",
+    "observability",
+    "metrics",
+    "dashboard",
+    "llm",
+    "statistics"
+  ],
+  "bugs": {
+    "url": "https://github.com/Linxira-OS/linxira-zeta/issues"
+  },
+  "repository": {
+    "directory": "packages/stats",
+    "url": "git+https://github.com/Linxira-OS/linxira-zeta.git",
+    "type": "git"
+  },
+  "license": "MIT",
+  "author": "Can Boluk",
+  "homepage": "https://linxira-os.github.io/zeta/",
+  "description": "Local observability dashboard for pi AI usage statistics",
+  "version": "1.1.9",
+  "name": "@linxiraos/pi-stats",
+  "type": "module"
 }

package/src/client/App.tsx

@@ -13,11 +13,12 @@ import {
 	ProvidersRoute,
 	RequestsRoute,
 	ToolsRoute,
+	TracesRoute,
 } from "./routes";
 import { RequestDrawer } from "./ui/RequestDrawer";
 
 export default function App() {
-	const { section, setSection, range, setRange } = useHashRoute();
+	const { section, setSection, range, setRange, session, setSession } = useHashRoute();
 	const [refreshTrigger, setRefreshTrigger] = useState(0);
 	const [selectedRequestId, setSelectedRequestId] = useState<number | null>(null);
 	const [updatedAt, setUpdatedAt] = useState<number | null>(() => Date.now());
@@ -63,6 +64,15 @@ export default function App() {
 						onRequestClick={setSelectedRequestId}
 					/>
 				);
+			case "traces":
+				return (
+					<TracesRoute
+						active={isActive}
+						session={session}
+						onOpenSession={setSession}
+						refreshTrigger={refreshTrigger}
+					/>
+				);
 			case "errors":
 				return (
 					<ErrorsRoute

package/src/client/api.ts

@@ -8,6 +8,8 @@ import type {
 	OverviewStats,
 	ProviderDashboardStats,
 	RequestDetails,
+	SessionSummary,
+	SessionTrace,
 	TimeRange,
 	ToolDashboardStats,
 } from "./types";
@@ -116,3 +118,24 @@ export async function getProviderDashboardStats(
 		signal,
 	});
 }
+export async function getSessions(limit = 100, q?: string, signal?: AbortSignal): Promise<SessionSummary[]> {
+	const params = new URLSearchParams({ limit: String(limit) });
+	if (q) params.set("q", q);
+	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 });
+}
+
+/** Fetch one full journal entry for the span drawer. Entries are opaque JSON. */
+export async function getSessionEntryDetail(
+	file: string,
+	id: string,
+	signal?: AbortSignal,
+): Promise<{ entry: unknown }> {
+	return fetchJson<{ entry: unknown }>(
+		`${API_BASE}/session/entry?file=${encodeURIComponent(file)}&id=${encodeURIComponent(id)}`,
+		{ signal },
+	);
+}

package/src/client/app/routes.ts

@@ -5,6 +5,7 @@ import {
 	Cpu,
 	Folder,
 	LayoutDashboard,
+	ListTree,
 	Plug,
 	Smile,
 	TrendingUp,
@@ -15,6 +16,7 @@ import type React from "react";
 export type DashboardSection =
 	| "overview"
 	| "requests"
+	| "traces"
 	| "errors"
 	| "models"
 	| "providers"
@@ -42,6 +44,11 @@ export const routes: DashboardRoute[] = [
 		label: "Requests",
 		icon: Activity,
 	},
+	{
+		id: "traces",
+		label: "Traces",
+		icon: ListTree,
+	},
 	{
 		id: "errors",
 		label: "Errors",

package/src/client/data/useHashRoute.ts

@@ -5,6 +5,7 @@ import type { TimeRange } from "../types";
 const VALID_SECTIONS: DashboardSection[] = [
 	"overview",
 	"requests",
+	"traces",
 	"errors",
 	"models",
 	"providers",
@@ -17,7 +18,7 @@ const VALID_SECTIONS: DashboardSection[] = [
 
 const VALID_RANGES: TimeRange[] = ["1h", "24h", "7d", "30d", "90d", "all"];
 
-function parseHash(hash: string): { section: DashboardSection; range: TimeRange } {
+function parseHash(hash: string): { section: DashboardSection; range: TimeRange; session: string | null } {
 	const cleanHash = hash.replace(/^#\/?/, "");
 	const [pathPart, queryPart] = cleanHash.split("?");
 
@@ -26,15 +27,22 @@ function parseHash(hash: string): { section: DashboardSection; range: TimeRange
 		: "overview";
 
 	let range: TimeRange = "24h";
+	let session: string | null = null;
 	if (queryPart) {
 		const params = new URLSearchParams(queryPart);
 		const rangeParam = params.get("range") as TimeRange;
 		if (VALID_RANGES.includes(rangeParam)) {
 			range = rangeParam;
 		}
+		session = params.get("s");
 	}
 
-	return { section, range };
+	return { section, range, session };
+}
+
+function buildHash(section: string, range: TimeRange, session?: string | null): string {
+	const sessionPart = session ? `&s=${encodeURIComponent(session)}` : "";
+	return `/${section}?range=${range}${sessionPart}`;
 }
 
 export function useHashRoute() {
@@ -51,31 +59,39 @@ export function useHashRoute() {
 		};
 	}, []);
 
-	const updateHash = useCallback((section: string, range: TimeRange) => {
-		window.location.hash = `/${section}?range=${range}`;
+	const updateHash = useCallback((section: string, range: TimeRange, session?: string | null) => {
+		window.location.hash = buildHash(section, range, session);
 	}, []);
 
 	const setSection = useCallback(
 		(newSection: DashboardSection) => {
-			updateHash(newSection, route.range);
+			// The deep-linked session only applies to the traces view.
+			updateHash(newSection, route.range, newSection === "traces" ? route.session : null);
 		},
-		[route.range, updateHash],
+		[route.range, route.session, updateHash],
 	);
 
 	const setRange = useCallback(
 		(newRange: string) => {
 			const nextRange = VALID_RANGES.includes(newRange as TimeRange) ? (newRange as TimeRange) : "24h";
-			updateHash(route.section, nextRange);
+			updateHash(route.section, nextRange, route.session);
+		},
+		[route.section, route.session, updateHash],
+	);
+
+	const setSession = useCallback(
+		(file: string | null) => {
+			updateHash(route.section, route.range, file);
 		},
-		[route.section, updateHash],
+		[route.section, route.range, updateHash],
 	);
 
 	useEffect(() => {
 		const currentHash = window.location.hash;
 		const parsed = parseHash(currentHash);
-		const expectedHash = `#/${parsed.section}?range=${parsed.range}`;
+		const expectedHash = `#${buildHash(parsed.section, parsed.range, parsed.session)}`;
 		if (currentHash !== expectedHash) {
-			window.location.hash = `/${parsed.section}?range=${parsed.range}`;
+			window.location.hash = buildHash(parsed.section, parsed.range, parsed.session);
 		}
 	}, []);
 
@@ -84,5 +100,7 @@ export function useHashRoute() {
 		setSection,
 		range: route.range,
 		setRange,
+		session: route.session,
+		setSession,
 	};
 }

package/src/client/routes/ProvidersRoute.tsx

@@ -234,6 +234,7 @@ function PeakHoursPanel({ hourly, providers }: { hourly: ProviderHourlyPoint[];
 	const chartTheme = CHART_THEMES[theme];
 
 	const { tokensByHour, peakHour } = useMemo(() => {
+		// oxlint-disable-next-line unicorn/no-new-array -- length preallocation
 		const tokens = new Array<number>(24).fill(0);
 		for (const point of hourly) {
 			if (provider !== ALL_PROVIDERS && point.provider !== provider) continue;

package/src/client/routes/TracesRoute.tsx

@@ -0,0 +1,182 @@
+/**
+ * Traces section: root-session list (subagents folded in) that opens the
+ * flamegraph trace viewer for a selected session.
+ */
+
+import { useMemo, useState } from "react";
+import { getSessions } from "../api";
+import { formatCompact, formatCost, formatDurationMs, formatRelativeTime } from "../data/formatters";
+import { useResource } from "../data/useResource";
+import { TraceView } from "../traces/TraceView";
+import type { SessionSummary } from "../types";
+import { AsyncBoundary, DataTable, Panel } from "../ui";
+
+export interface TracesRouteProps {
+	active: boolean;
+	session: string | null;
+	onOpenSession: (file: string | null) => void;
+	refreshTrigger: number;
+}
+
+function ModelChips({ models }: { models: string[] }) {
+	const shown = models.slice(0, 3);
+	return (
+		<div style={{ display: "flex", gap: 4, flexWrap: "wrap" }}>
+			{shown.map(model => (
+				<span
+					key={model}
+					className="stats-text-muted truncate"
+					style={{
+						fontSize: 10,
+						border: "1px solid var(--border)",
+						borderRadius: 999,
+						padding: "1px 6px",
+						maxWidth: 140,
+					}}
+				>
+					{model}
+				</span>
+			))}
+			{models.length > 3 && (
+				<span className="stats-text-muted" style={{ fontSize: 10 }}>
+					+{models.length - 3}
+				</span>
+			)}
+		</div>
+	);
+}
+
+export function TracesRoute({ active, session, onOpenSession, refreshTrigger }: TracesRouteProps) {
+	const [filter, setFilter] = useState("");
+
+	const {
+		data: sessions,
+		error,
+		loading,
+	} = useResource(["sessions", refreshTrigger], signal => getSessions(200, undefined, signal), {
+		pollMs: 30000,
+		enabled: active && session === null,
+	});
+
+	const filtered = useMemo(() => {
+		if (!sessions) return [];
+		const needle = filter.trim().toLowerCase();
+		if (!needle) return sessions;
+		return sessions.filter(
+			row =>
+				(row.title ?? "").toLowerCase().includes(needle) ||
+				row.folder.toLowerCase().includes(needle) ||
+				row.models.some(model => model.toLowerCase().includes(needle)),
+		);
+	}, [sessions, filter]);
+
+	const columns = useMemo(
+		() => [
+			{
+				key: "title",
+				header: "Title",
+				render: (item: SessionSummary) => (
+					<div className="stats-font-medium stats-text-primary truncate" style={{ maxWidth: 280 }}>
+						{item.title ?? item.file.split("/").pop()}
+					</div>
+				),
+			},
+			{
+				key: "folder",
+				header: "Project",
+				render: (item: SessionSummary) => (
+					<span className="stats-text-muted truncate" style={{ maxWidth: 160, display: "inline-block" }}>
+						{item.folder.split("/").slice(-2).join("/")}
+					</span>
+				),
+			},
+			{
+				key: "started",
+				header: "Started",
+				render: (item: SessionSummary) => formatRelativeTime(item.startedAt),
+			},
+			{
+				key: "duration",
+				header: "Duration",
+				numeric: true,
+				render: (item: SessionSummary) => formatDurationMs(item.endedAt - item.startedAt),
+			},
+			{ key: "requests", header: "Requests", numeric: true, render: (item: SessionSummary) => item.requests },
+			{ key: "toolCalls", header: "Tools", numeric: true, render: (item: SessionSummary) => item.toolCalls },
+			{ key: "subagents", header: "Agents", numeric: true, render: (item: SessionSummary) => item.subagents },
+			{
+				key: "tokens",
+				header: "Tokens",
+				numeric: true,
+				render: (item: SessionSummary) => formatCompact(item.totalTokens),
+			},
+			{ key: "cost", header: "Cost", numeric: true, render: (item: SessionSummary) => formatCost(item.costTotal) },
+			{ key: "models", header: "Models", render: (item: SessionSummary) => <ModelChips models={item.models} /> },
+		],
+		[],
+	);
+
+	const renderMobileCard = (item: SessionSummary, onClick?: () => void) => (
+		<div className="stats-mobile-card" onClick={onClick}>
+			<div className="stats-mobile-card-header">
+				<div className="stats-font-semibold stats-text-primary truncate">
+					{item.title ?? item.file.split("/").pop()}
+				</div>
+			</div>
+			<div className="stats-mobile-card-grid">
+				<div>
+					<div className="stats-mobile-card-label">Started</div>
+					<div className="stats-mobile-card-value">{formatRelativeTime(item.startedAt)}</div>
+				</div>
+				<div>
+					<div className="stats-mobile-card-label">Duration</div>
+					<div className="stats-mobile-card-value">{formatDurationMs(item.endedAt - item.startedAt)}</div>
+				</div>
+				<div>
+					<div className="stats-mobile-card-label">Requests</div>
+					<div className="stats-mobile-card-value">{item.requests}</div>
+				</div>
+				<div>
+					<div className="stats-mobile-card-label">Cost</div>
+					<div className="stats-mobile-card-value">{formatCost(item.costTotal)}</div>
+				</div>
+			</div>
+		</div>
+	);
+
+	if (session !== null) {
+		return <TraceView file={session} active={active} onBack={() => onOpenSession(null)} />;
+	}
+
+	return (
+		<div className="stats-route-container">
+			<Panel
+				title="Sessions"
+				subtitle="Recent sessions with subagent activity folded in — click one to open its trace"
+				actions={
+					<input
+						type="search"
+						value={filter}
+						onChange={event => setFilter(event.target.value)}
+						placeholder="Filter by title, project, model…"
+						aria-label="Filter sessions"
+						spellCheck={false}
+						className="stats-trace-input"
+						style={{ width: 220 }}
+					/>
+				}
+			>
+				<AsyncBoundary loading={loading} error={error} data={sessions}>
+					<DataTable
+						columns={columns}
+						data={filtered}
+						keyExtractor={item => item.file}
+						onRowClick={item => onOpenSession(item.file)}
+						renderMobileCard={renderMobileCard}
+						emptyText="No sessions found — run a Sync to index recent activity"
+					/>
+				</AsyncBoundary>
+			</Panel>
+		</div>
+	);
+}

package/src/client/routes/index.ts

@@ -8,3 +8,4 @@ export * from "./ProjectsRoute";
 export * from "./ProvidersRoute";
 export * from "./RequestsRoute";
 export * from "./ToolsRoute";
+export * from "./TracesRoute";