@dianshuv/copilot-api 0.2.3 → 0.4.0

package/README.md

@@ -10,6 +10,11 @@
 
 - **Responses API endpoint**: `/v1/responses` passthrough for codex models (e.g., `gpt-5.2-codex`, `gpt-5.3-codex`) used by tools like OpenCode. Includes stream ID synchronization for `@ai-sdk/openai` compatibility.
 - **SubagentStart marker support**: Detects `__SUBAGENT_MARKER__` injected by Claude Code hooks to override `X-Initiator` header to `"agent"` for subagent requests, ensuring correct credit tier usage. Includes a ready-to-use Claude plugin (`claude-plugin/`).
+- **Token analytics tab**: The `/history` page includes a Tokens tab with per-model token usage summary table and cumulative ECharts line chart for visualizing API consumption over time.
+- **Real-time history updates**: The `/history` UI uses WebSocket for live updates instead of polling, with automatic fallback to polling and exponential backoff reconnection.
+- **Graceful shutdown**: 4-phase shutdown sequence — stops accepting requests, waits for in-flight requests to complete, sends abort signal, then force-closes. Configurable via `--shutdown-graceful-wait` and `--shutdown-abort-wait`.
+- **Stream repetition detection**: Detects when models get stuck in repetitive output loops using KMP-based pattern matching and logs a warning.
+- **Stale request reaping**: Automatically force-fails requests that exceed a configurable maximum age (default 600s) to prevent resource leaks.
 
 ## Quick Start
 
@@ -97,7 +102,7 @@ copilot-api start
 | `/usage` | GET | Copilot usage stats |
 | `/token` | GET | Current Copilot token |
 | `/health` | GET | Health check |
-| `/history` | GET | Request history Web UI (enabled by default) |
+| `/history` | GET | Request history Web UI with token analytics (enabled by default) |
 | `/history/api/*` | GET/DELETE | History API endpoints |
 
 ## Using with Claude Code

package/dist/main.mjs

@@ -50,7 +50,10 @@ const state = {
 	autoTruncate: true,
 	compressToolResults: false,
 	redirectAnthropic: false,
-	rewriteAnthropicTools: true
+	rewriteAnthropicTools: true,
+	staleRequestMaxAge: 600,
+	shutdownGracefulWait: 60,
+	shutdownAbortWait: 120
 };
 
 //#endregion
@@ -1017,11 +1020,11 @@ const patchClaude = defineCommand({
 
 //#endregion
 //#region package.json
-var version = "0.2.3";
+var version = "0.4.0";
 
 //#endregion
 //#region src/lib/adaptive-rate-limiter.ts
-const DEFAULT_CONFIG = {
+const DEFAULT_CONFIG$1 = {
 	baseRetryIntervalSeconds: 10,
 	maxRetryIntervalSeconds: 120,
 	requestIntervalSeconds: 10,
@@ -1050,7 +1053,7 @@ var AdaptiveRateLimiter = class {
 	recoveryStepIndex = 0;
 	constructor(config = {}) {
 		this.config = {
-			...DEFAULT_CONFIG,
+			...DEFAULT_CONFIG$1,
 			...config
 		};
 	}
@@ -1272,6 +1275,16 @@ var AdaptiveRateLimiter = class {
 		return new Promise((resolve) => setTimeout(resolve, ms));
 	}
 	/**
+	* Reject all currently queued requests during shutdown.
+	* Returns the number of requests that were rejected.
+	*/
+	rejectQueued() {
+		const count = this.queue.length;
+		for (const request of this.queue) request.reject(/* @__PURE__ */ new Error("Server is shutting down"));
+		this.queue = [];
+		return count;
+	}
+	/**
 	* Get current status for debugging/monitoring
 	*/
 	getStatus() {
@@ -1289,15 +1302,21 @@ let rateLimiterInstance = null;
 */
 function initAdaptiveRateLimiter(config = {}) {
 	rateLimiterInstance = new AdaptiveRateLimiter(config);
-	const baseRetry = config.baseRetryIntervalSeconds ?? DEFAULT_CONFIG.baseRetryIntervalSeconds;
-	const maxRetry = config.maxRetryIntervalSeconds ?? DEFAULT_CONFIG.maxRetryIntervalSeconds;
-	const interval = config.requestIntervalSeconds ?? DEFAULT_CONFIG.requestIntervalSeconds;
-	const recovery = config.recoveryTimeoutMinutes ?? DEFAULT_CONFIG.recoveryTimeoutMinutes;
-	const successes = config.consecutiveSuccessesForRecovery ?? DEFAULT_CONFIG.consecutiveSuccessesForRecovery;
-	const steps = config.gradualRecoverySteps ?? DEFAULT_CONFIG.gradualRecoverySteps;
+	const baseRetry = config.baseRetryIntervalSeconds ?? DEFAULT_CONFIG$1.baseRetryIntervalSeconds;
+	const maxRetry = config.maxRetryIntervalSeconds ?? DEFAULT_CONFIG$1.maxRetryIntervalSeconds;
+	const interval = config.requestIntervalSeconds ?? DEFAULT_CONFIG$1.requestIntervalSeconds;
+	const recovery = config.recoveryTimeoutMinutes ?? DEFAULT_CONFIG$1.recoveryTimeoutMinutes;
+	const successes = config.consecutiveSuccessesForRecovery ?? DEFAULT_CONFIG$1.consecutiveSuccessesForRecovery;
+	const steps = config.gradualRecoverySteps ?? DEFAULT_CONFIG$1.gradualRecoverySteps;
 	consola.info(`[RateLimiter] Initialized (backoff: ${baseRetry}s-${maxRetry}s, interval: ${interval}s, recovery: ${recovery}min or ${successes} successes, gradual: [${steps.join("s, ")}s])`);
 }
 /**
+* Get the rate limiter instance
+*/
+function getAdaptiveRateLimiter() {
+	return rateLimiterInstance;
+}
+/**
 * Execute a request with adaptive rate limiting.
 * If rate limiter is not initialized, executes immediately.
 * Returns the result along with queue wait time.
@@ -1310,6 +1329,292 @@ async function executeWithAdaptiveRateLimit(fn) {
 	return rateLimiterInstance.execute(fn);
 }
 
+//#endregion
+//#region src/lib/context/request.ts
+let idCounter = 0;
+function createRequestContext(opts) {
+	const id = `req_${Date.now()}_${++idCounter}`;
+	const startTime = Date.now();
+	const onEvent = opts.onEvent;
+	let _state = "pending";
+	let _originalRequest = null;
+	let _response = null;
+	let settled = false;
+	function emit(event) {
+		try {
+			onEvent(event);
+		} catch {}
+	}
+	const ctx = {
+		id,
+		tuiLogId: opts.tuiLogId,
+		startTime,
+		endpoint: opts.endpoint,
+		get state() {
+			return _state;
+		},
+		get durationMs() {
+			return Date.now() - startTime;
+		},
+		get settled() {
+			return settled;
+		},
+		get originalRequest() {
+			return _originalRequest;
+		},
+		get response() {
+			return _response;
+		},
+		setOriginalRequest(req) {
+			_originalRequest = req;
+			emit({
+				type: "updated",
+				context: ctx,
+				field: "originalRequest"
+			});
+		},
+		transition(newState) {
+			const previousState = _state;
+			_state = newState;
+			emit({
+				type: "state_changed",
+				context: ctx,
+				previousState
+			});
+		},
+		complete(response) {
+			if (settled) return;
+			settled = true;
+			_response = response;
+			_state = "completed";
+			emit({
+				type: "completed",
+				context: ctx,
+				entry: ctx.toHistoryEntry()
+			});
+		},
+		fail(model, error) {
+			if (settled) return;
+			settled = true;
+			_response = {
+				success: false,
+				model,
+				usage: {
+					input_tokens: 0,
+					output_tokens: 0
+				},
+				error: error instanceof Error ? error.message : String(error),
+				content: null
+			};
+			_state = "failed";
+			emit({
+				type: "failed",
+				context: ctx,
+				entry: ctx.toHistoryEntry()
+			});
+		},
+		toHistoryEntry() {
+			const entry = {
+				id,
+				endpoint: opts.endpoint,
+				timestamp: startTime,
+				durationMs: Date.now() - startTime,
+				request: {
+					model: _originalRequest?.model,
+					messages: _originalRequest?.messages,
+					stream: _originalRequest?.stream,
+					tools: _originalRequest?.tools,
+					system: _originalRequest?.system
+				}
+			};
+			if (_response) entry.response = _response;
+			return entry;
+		}
+	};
+	return ctx;
+}
+
+//#endregion
+//#region src/lib/context/manager.ts
+/**
+* RequestContextManager — Active request management
+*
+* Manages all in-flight RequestContext instances. Publishes events for
+* WebSocket push and history persistence.
+*/
+let _manager = null;
+function initRequestContextManager(staleMaxAgeSec) {
+	_manager = createRequestContextManager(staleMaxAgeSec);
+	return _manager;
+}
+const REAPER_INTERVAL_MS = 6e4;
+const DEFAULT_STALE_MAX_AGE_SEC = 600;
+function createRequestContextManager(staleMaxAgeSec) {
+	const maxAgeSec = staleMaxAgeSec ?? DEFAULT_STALE_MAX_AGE_SEC;
+	const activeContexts = /* @__PURE__ */ new Map();
+	const listeners = /* @__PURE__ */ new Set();
+	let reaperTimer = null;
+	function runReaperOnce() {
+		if (maxAgeSec <= 0) return;
+		const maxAgeMs = maxAgeSec * 1e3;
+		for (const [id, ctx] of activeContexts) if (ctx.durationMs > maxAgeMs) {
+			consola.warn(`[context] Force-failing stale request ${id} (endpoint: ${ctx.endpoint}, model: ${ctx.originalRequest?.model ?? "unknown"}, state: ${ctx.state}, age: ${Math.round(ctx.durationMs / 1e3)}s, max: ${maxAgeSec}s)`);
+			ctx.fail(ctx.originalRequest?.model ?? "unknown", /* @__PURE__ */ new Error(`Request exceeded maximum age of ${maxAgeSec}s (stale context reaper)`));
+		}
+	}
+	function startReaper() {
+		if (reaperTimer) return;
+		reaperTimer = setInterval(runReaperOnce, REAPER_INTERVAL_MS);
+	}
+	function stopReaper() {
+		if (reaperTimer) {
+			clearInterval(reaperTimer);
+			reaperTimer = null;
+		}
+	}
+	function emit(event) {
+		for (const listener of listeners) try {
+			listener(event);
+		} catch {}
+	}
+	function handleContextEvent(rawEvent) {
+		const { type, context } = rawEvent;
+		switch (type) {
+			case "state_changed":
+				if (rawEvent.previousState) emit({
+					type: "state_changed",
+					context,
+					previousState: rawEvent.previousState
+				});
+				break;
+			case "updated":
+				if (rawEvent.field) emit({
+					type: "updated",
+					context,
+					field: rawEvent.field
+				});
+				break;
+			case "completed":
+				if (rawEvent.entry) emit({
+					type: "completed",
+					context,
+					entry: rawEvent.entry
+				});
+				activeContexts.delete(context.id);
+				break;
+			case "failed":
+				if (rawEvent.entry) emit({
+					type: "failed",
+					context,
+					entry: rawEvent.entry
+				});
+				activeContexts.delete(context.id);
+				break;
+			default: break;
+		}
+	}
+	return {
+		create(opts) {
+			const ctx = createRequestContext({
+				endpoint: opts.endpoint,
+				tuiLogId: opts.tuiLogId,
+				onEvent: handleContextEvent
+			});
+			activeContexts.set(ctx.id, ctx);
+			emit({
+				type: "created",
+				context: ctx
+			});
+			return ctx;
+		},
+		get(id) {
+			return activeContexts.get(id);
+		},
+		getAll() {
+			return Array.from(activeContexts.values());
+		},
+		get activeCount() {
+			return activeContexts.size;
+		},
+		on(_event, listener) {
+			listeners.add(listener);
+		},
+		off(_event, listener) {
+			listeners.delete(listener);
+		},
+		startReaper,
+		stopReaper,
+		_runReaperOnce: runReaperOnce
+	};
+}
+
+//#endregion
+//#region src/lib/history-ws.ts
+/**
+* WebSocket support for History API.
+* Enables real-time updates when new requests are recorded.
+*/
+const clients = /* @__PURE__ */ new Set();
+function getClientCount() {
+	return clients.size;
+}
+function closeAllClients() {
+	for (const client of clients) try {
+		client.close(1001, "Server shutting down");
+	} catch {}
+	clients.clear();
+}
+function broadcast(message) {
+	const data = JSON.stringify(message);
+	for (const client of clients) try {
+		if (client.readyState === WebSocket.OPEN) client.send(data);
+		else clients.delete(client);
+	} catch (error) {
+		consola.debug("WebSocket send failed, removing client:", error);
+		clients.delete(client);
+	}
+}
+function notifyEntryAdded(summary) {
+	if (clients.size === 0) return;
+	broadcast({
+		type: "entry_added",
+		data: summary,
+		timestamp: Date.now()
+	});
+}
+function notifyEntryUpdated(summary) {
+	if (clients.size === 0) return;
+	broadcast({
+		type: "entry_updated",
+		data: summary,
+		timestamp: Date.now()
+	});
+}
+function notifyStatsUpdated(stats) {
+	if (clients.size === 0) return;
+	broadcast({
+		type: "stats_updated",
+		data: stats,
+		timestamp: Date.now()
+	});
+}
+function notifyHistoryCleared() {
+	if (clients.size === 0) return;
+	broadcast({
+		type: "history_cleared",
+		data: null,
+		timestamp: Date.now()
+	});
+}
+function notifySessionDeleted(sessionId) {
+	if (clients.size === 0) return;
+	broadcast({
+		type: "session_deleted",
+		data: { sessionId },
+		timestamp: Date.now()
+	});
+}
+
 //#endregion
 //#region src/lib/history.ts
 function generateId$1() {
@@ -1389,6 +1694,13 @@ function recordRequest(endpoint, request) {
 			if (historyState.entries.filter((e) => e.sessionId === removed.sessionId).length === 0) historyState.sessions.delete(removed.sessionId);
 		}
 	}
+	notifyEntryAdded({
+		id: entry.id,
+		endpoint,
+		model: request.model,
+		stream: request.stream,
+		timestamp: entry.timestamp
+	});
 	return entry.id;
 }
 function recordResponse(id, response, durationMs) {
@@ -1403,6 +1715,20 @@ function recordResponse(id, response, durationMs) {
 			session.totalOutputTokens += response.usage.output_tokens;
 			session.lastActivity = Date.now();
 		}
+		notifyEntryUpdated({
+			id: entry.id,
+			endpoint: entry.endpoint,
+			model: response.model,
+			success: response.success,
+			durationMs,
+			inputTokens: response.usage.input_tokens,
+			outputTokens: response.usage.output_tokens
+		});
+		notifyStatsUpdated({
+			totalRequests: historyState.entries.length,
+			totalInputTokens: session?.totalInputTokens ?? 0,
+			totalOutputTokens: session?.totalOutputTokens ?? 0
+		});
 	}
 }
 function getHistory(options = {}) {
@@ -1477,12 +1803,14 @@ function clearHistory() {
 	historyState.entries = [];
 	historyState.sessions = /* @__PURE__ */ new Map();
 	historyState.currentSessionId = generateId$1();
+	notifyHistoryCleared();
 }
 function deleteSession(sessionId) {
 	if (!historyState.sessions.has(sessionId)) return false;
 	historyState.entries = historyState.entries.filter((e) => e.sessionId !== sessionId);
 	historyState.sessions.delete(sessionId);
 	if (historyState.currentSessionId === sessionId) historyState.currentSessionId = generateId$1();
+	notifySessionDeleted(sessionId);
 	return true;
 }
 function getStats() {
@@ -1533,6 +1861,37 @@ function getStats() {
 		activeSessions
 	};
 }
+function getTokenStats() {
+	const models = {};
+	const timeline = [];
+	for (const entry of historyState.entries) {
+		if (!entry.response) continue;
+		const model = entry.response.model || entry.request.model;
+		const inputTokens = entry.response.usage.input_tokens;
+		const outputTokens = entry.response.usage.output_tokens;
+		const existing = models[model];
+		if (existing) {
+			existing.inputTokens += inputTokens;
+			existing.outputTokens += outputTokens;
+			existing.requestCount++;
+		} else models[model] = {
+			inputTokens,
+			outputTokens,
+			requestCount: 1
+		};
+		timeline.push({
+			timestamp: entry.timestamp,
+			model,
+			inputTokens,
+			outputTokens
+		});
+	}
+	timeline.sort((a, b) => a.timestamp - b.timestamp);
+	return {
+		models,
+		timeline
+	};
+}
 function exportHistory(format = "json") {
 	if (format === "json") return JSON.stringify({
 		sessions: Array.from(historyState.sessions.values()),
@@ -1700,6 +2059,142 @@ function generateEnvScript(envVars, commandToRun = "") {
 	return commandBlock || commandToRun;
 }
 
+//#endregion
+//#region src/lib/shutdown.ts
+const DRAIN_POLL_INTERVAL_MS = 500;
+const DRAIN_PROGRESS_INTERVAL_MS = 5e3;
+let serverInstance = null;
+let _isShuttingDown = false;
+let shutdownResolve = null;
+let shutdownAbortController = null;
+function getIsShuttingDown() {
+	return _isShuttingDown;
+}
+function setServerInstance(server) {
+	serverInstance = server;
+}
+function formatActiveRequestsSummary(requests) {
+	const now = Date.now();
+	const lines = requests.map((req) => {
+		const age = Math.round((now - req.startTime) / 1e3);
+		const model = req.model || "unknown";
+		const tags = req.tags?.length ? ` [${req.tags.join(", ")}]` : "";
+		return `  ${req.method} ${req.path} ${model} (${req.status}, ${age}s)${tags}`;
+	});
+	return `Waiting for ${requests.length} active request(s):\n${lines.join("\n")}`;
+}
+async function drainActiveRequests(timeoutMs, tracker, opts) {
+	const pollInterval = opts?.pollIntervalMs ?? DRAIN_POLL_INTERVAL_MS;
+	const progressInterval = opts?.progressIntervalMs ?? DRAIN_PROGRESS_INTERVAL_MS;
+	const deadline = Date.now() + timeoutMs;
+	let lastProgressLog = 0;
+	while (Date.now() < deadline) {
+		const active = tracker.getActiveRequests();
+		if (active.length === 0) return "drained";
+		const now = Date.now();
+		if (now - lastProgressLog >= progressInterval) {
+			lastProgressLog = now;
+			consola.info(formatActiveRequestsSummary(active));
+		}
+		await new Promise((resolve) => setTimeout(resolve, pollInterval));
+	}
+	return "timeout";
+}
+async function gracefulShutdown(signal, deps) {
+	const tracker = deps?.tracker;
+	const server = deps?.server ?? serverInstance;
+	const rateLimiter = deps?.rateLimiter !== void 0 ? deps.rateLimiter : getAdaptiveRateLimiter();
+	const stopRefresh = deps?.stopTokenRefreshFn ?? (() => {});
+	const closeWsClients = deps?.closeAllClientsFn ?? closeAllClients;
+	const getWsCount = deps?.getClientCountFn ?? getClientCount;
+	const gracefulWaitMs = deps?.gracefulWaitMs ?? state.shutdownGracefulWait * 1e3;
+	const abortWaitMs = deps?.abortWaitMs ?? state.shutdownAbortWait * 1e3;
+	const drainOpts = {
+		pollIntervalMs: deps?.drainPollIntervalMs ?? DRAIN_POLL_INTERVAL_MS,
+		progressIntervalMs: deps?.drainProgressIntervalMs ?? DRAIN_PROGRESS_INTERVAL_MS
+	};
+	_isShuttingDown = true;
+	shutdownAbortController = new AbortController();
+	consola.info(`Received ${signal}, shutting down gracefully...`);
+	try {
+		deps?.contextManager?.stopReaper();
+	} catch {}
+	stopRefresh();
+	const wsClients = getWsCount();
+	if (wsClients > 0) {
+		closeWsClients();
+		consola.info(`Disconnected ${wsClients} WebSocket client(s)`);
+	}
+	if (rateLimiter) {
+		const rejected = rateLimiter.rejectQueued();
+		if (rejected > 0) consola.info(`Rejected ${rejected} queued request(s) from rate limiter`);
+	}
+	if (server) {
+		server.close(false).catch((error) => {
+			consola.error("Error stopping listener:", error);
+		});
+		consola.info("Stopped accepting new connections");
+	}
+	if (tracker) {
+		const activeCount = tracker.getActiveRequests().length;
+		if (activeCount > 0) {
+			consola.info(`Phase 2: Waiting up to ${gracefulWaitMs / 1e3}s for ${activeCount} active request(s)...`);
+			try {
+				if (await drainActiveRequests(gracefulWaitMs, tracker, drainOpts) === "drained") {
+					consola.info("All requests completed naturally");
+					finalize(tracker);
+					return;
+				}
+			} catch (error) {
+				consola.error("Error during Phase 2 drain:", error);
+			}
+			const remaining = tracker.getActiveRequests().length;
+			consola.info(`Phase 3: Sending abort signal to ${remaining} remaining request(s), waiting up to ${abortWaitMs / 1e3}s...`);
+			shutdownAbortController.abort();
+			try {
+				if (await drainActiveRequests(abortWaitMs, tracker, drainOpts) === "drained") {
+					consola.info("All requests completed after abort signal");
+					finalize(tracker);
+					return;
+				}
+			} catch (error) {
+				consola.error("Error during Phase 3 drain:", error);
+			}
+			const forceRemaining = tracker.getActiveRequests().length;
+			consola.warn(`Phase 4: Force-closing ${forceRemaining} remaining request(s)`);
+			if (server) try {
+				await server.close(true);
+			} catch (error) {
+				consola.error("Error force-closing server:", error);
+			}
+		}
+		finalize(tracker);
+	} else {
+		consola.info("Shutdown complete");
+		shutdownResolve?.();
+	}
+}
+function finalize(tracker) {
+	tracker.destroy();
+	consola.info("Shutdown complete");
+	shutdownResolve?.();
+}
+function setupShutdownHandlers() {
+	const handler = (signal) => {
+		if (_isShuttingDown) {
+			consola.warn("Second signal received, forcing immediate exit");
+			process.exit(1);
+		}
+		gracefulShutdown(signal).catch((error) => {
+			consola.error("Fatal error during shutdown:", error);
+			shutdownResolve?.();
+			process.exit(1);
+		});
+	};
+	process.on("SIGINT", () => handler("SIGINT"));
+	process.on("SIGTERM", () => handler("SIGTERM"));
+}
+
 //#endregion
 //#region src/lib/tui/console-renderer.ts
 const CLEAR_LINE = "\x1B[2K\r";
@@ -2060,6 +2555,7 @@ const requestTracker = new RequestTracker();
 */
 function tuiLogger() {
 	return async (c, next) => {
+		if (getIsShuttingDown()) return c.json({ error: "Server is shutting down" }, 503);
 		const method = c.req.method;
 		const path = c.req.path;
 		const isHistoryAccess = path.startsWith("/history");
@@ -2783,6 +3279,127 @@ function createTruncationResponseMarkerOpenAI(result) {
 	return `\n\n---\n[Auto-truncated: ${result.removedMessageCount} messages removed, ${result.originalTokens} → ${result.compactedTokens} tokens (${percentage}% reduction)]`;
 }
 
+//#endregion
+//#region src/lib/repetition-detector.ts
+/**
+* Stream repetition detector.
+*
+* Uses the KMP failure function (prefix function) to detect repeated patterns
+* in streaming text output. When a model gets stuck in a repetitive loop,
+* it wastes tokens producing the same content over and over. This detector
+* identifies such loops early so the caller can take action (log warning,
+* abort stream, etc.).
+*
+* The algorithm works by maintaining a sliding buffer of recent text and
+* computing the longest proper prefix that is also a suffix — if this
+* length exceeds `(text.length - period) >= minRepetitions * period`,
+* it means a pattern of length `period` has repeated enough times.
+*/
+const DEFAULT_CONFIG = {
+	minPatternLength: 10,
+	minRepetitions: 3,
+	maxBufferSize: 5e3
+};
+var RepetitionDetector = class {
+	buffer = "";
+	config;
+	detected = false;
+	constructor(config) {
+		this.config = {
+			...DEFAULT_CONFIG,
+			...config
+		};
+	}
+	/**
+	* Feed a text chunk into the detector.
+	* Returns `true` if repetition has been detected (now or previously).
+	* Once detected, subsequent calls return `true` without further analysis.
+	*/
+	feed(text) {
+		if (this.detected) return true;
+		if (!text) return false;
+		this.buffer += text;
+		if (this.buffer.length > this.config.maxBufferSize) this.buffer = this.buffer.slice(-this.config.maxBufferSize);
+		const minRequired = this.config.minPatternLength * this.config.minRepetitions;
+		if (this.buffer.length < minRequired) return false;
+		this.detected = detectRepetition(this.buffer, this.config.minPatternLength, this.config.minRepetitions);
+		return this.detected;
+	}
+	/** Reset detector state for a new stream */
+	reset() {
+		this.buffer = "";
+		this.detected = false;
+	}
+	/** Whether repetition has been detected */
+	get isDetected() {
+		return this.detected;
+	}
+};
+/**
+* Detect if the tail of `text` contains a repeating pattern.
+*
+* Uses the KMP prefix function: for a string S, the prefix function π[i]
+* gives the length of the longest proper prefix of S[0..i] that is also
+* a suffix. If π[n-1] ≥ (n - period) where period = n - π[n-1], then
+* the string is composed of a repeating unit of length `period`.
+*
+* We check the suffix of the buffer (last `checkLength` chars) to detect
+* if a pattern of at least `minPatternLength` chars repeats at least
+* `minRepetitions` times.
+*/
+function detectRepetition(text, minPatternLength, minRepetitions) {
+	const minWindow = minPatternLength * minRepetitions;
+	const maxWindow = Math.min(text.length, 2e3);
+	const windowSizes = [
+		minWindow,
+		Math.floor(maxWindow * .5),
+		maxWindow
+	].filter((w) => w >= minWindow && w <= text.length);
+	for (const windowSize of windowSizes) {
+		const window = text.slice(-windowSize);
+		const period = findRepeatingPeriod(window);
+		if (period >= minPatternLength) {
+			if (Math.floor(window.length / period) >= minRepetitions) return true;
+		}
+	}
+	return false;
+}
+/**
+* Find the shortest repeating period in a string using KMP prefix function.
+* Returns the period length, or the string length if no repetition found.
+*/
+function findRepeatingPeriod(s) {
+	const n = s.length;
+	if (n === 0) return 0;
+	const pi = new Int32Array(n);
+	for (let i = 1; i < n; i++) {
+		let j = pi[i - 1] ?? 0;
+		while (j > 0 && s[i] !== s[j]) j = pi[j - 1] ?? 0;
+		if (s[i] === s[j]) j++;
+		pi[i] = j;
+	}
+	const period = n - pi[n - 1];
+	if (period < n && n % period === 0) return period;
+	if (period < n && pi[n - 1] >= period) return period;
+	return n;
+}
+/**
+* Create a repetition detector callback for use in stream processing.
+* Returns a function that accepts text deltas and logs a warning on first detection.
+*/
+function createStreamRepetitionChecker(label, config) {
+	const detector = new RepetitionDetector(config);
+	let warned = false;
+	return (textDelta) => {
+		const isRepetitive = detector.feed(textDelta);
+		if (isRepetitive && !warned) {
+			warned = true;
+			consola.warn(`[RepetitionDetector] ${label}: Repetitive output detected in stream`);
+		}
+		return isRepetitive;
+	};
+}
+
 //#endregion
 //#region src/services/copilot/create-chat-completions.ts
 const createChatCompletions = async (payload, options) => {
@@ -3119,6 +3736,7 @@ function createStreamAccumulator() {
 async function handleStreamingResponse$1(opts) {
 	const { stream, response, payload, ctx } = opts;
 	const acc = createStreamAccumulator();
+	const checkRepetition = createStreamRepetitionChecker(`openai:${payload.model}`);
 	try {
 		if (state.verbose && ctx.truncateResult?.wasCompacted) {
 			const marker = createTruncationResponseMarkerOpenAI(ctx.truncateResult);
@@ -3142,7 +3760,7 @@ async function handleStreamingResponse$1(opts) {
 		}
 		for await (const chunk of response) {
 			consola.debug("Streaming chunk:", JSON.stringify(chunk));
-			parseStreamChunk(chunk, acc);
+			parseStreamChunk(chunk, acc, checkRepetition);
 			await stream.writeSSE(chunk);
 		}
 		recordStreamSuccess(acc, payload.model, ctx);
@@ -3158,7 +3776,7 @@ async function handleStreamingResponse$1(opts) {
 		throw error;
 	}
 }
-function parseStreamChunk(chunk, acc) {
+function parseStreamChunk(chunk, acc, checkRepetition) {
 	if (!chunk.data || chunk.data === "[DONE]") return;
 	try {
 		const parsed = JSON.parse(chunk.data);
@@ -3169,7 +3787,10 @@ function parseStreamChunk(chunk, acc) {
 		}
 		const choice = parsed.choices[0];
 		if (choice) {
-			if (choice.delta.content) acc.content += choice.delta.content;
+			if (choice.delta.content) {
+				acc.content += choice.delta.content;
+				checkRepetition(choice.delta.content);
+			}
 			if (choice.delta.tool_calls) for (const tc of choice.delta.tool_calls) {
 				const idx = tc.index;
 				if (!acc.toolCallMap.has(idx)) acc.toolCallMap.set(idx, {
@@ -3360,6 +3981,11 @@ function handleDeleteSession(c) {
 		message: "Session deleted"
 	});
 }
+function handleGetTokenStats(c) {
+	if (!isHistoryEnabled()) return c.json({ error: "History recording is not enabled" }, 400);
+	const stats = getTokenStats();
+	return c.json(stats);
+}
 
 //#endregion
 //#region src/routes/history/ui/script.ts
@@ -3903,11 +4529,274 @@ document.addEventListener('keydown', (e) => {
   }
 });
 
-// Auto-refresh every 10 seconds
-setInterval(() => {
+// Auto-refresh every 10 seconds (fallback when WebSocket is not available)
+let autoRefreshTimer = setInterval(() => {
   loadStats();
   loadSessions();
 }, 10000);
+
+// WebSocket real-time updates
+let reconnectAttempts = 0;
+function connectWebSocket() {
+  const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+  const wsUrl = protocol + '//' + window.location.host + '/history/ws';
+
+  try {
+    const ws = new WebSocket(wsUrl);
+
+    ws.onopen = function() {
+      console.log('[History] WebSocket connected');
+      reconnectAttempts = 0;
+      // Disable polling when WS is active
+      clearInterval(autoRefreshTimer);
+    };
+
+    ws.onmessage = function(event) {
+      try {
+        const msg = JSON.parse(event.data);
+        switch (msg.type) {
+          case 'entry_added':
+          case 'entry_updated':
+            loadSessions();
+            loadStats();
+            break;
+          case 'stats_updated':
+            loadStats();
+            break;
+          case 'history_cleared':
+          case 'session_deleted':
+            loadSessions();
+            loadStats();
+            break;
+        }
+      } catch (e) {
+        console.warn('[History] Failed to parse WS message:', e);
+      }
+    };
+
+    ws.onclose = function() {
+      console.log('[History] WebSocket disconnected, falling back to polling');
+      // Re-enable polling as fallback (clear first to avoid duplicates)
+      clearInterval(autoRefreshTimer);
+      autoRefreshTimer = setInterval(() => {
+        loadStats();
+        loadSessions();
+      }, 10000);
+      // Reconnect with exponential backoff, max 10 attempts
+      if (reconnectAttempts < 10) {
+        const delay = Math.min(5000 * Math.pow(2, reconnectAttempts), 60000);
+        reconnectAttempts++;
+        setTimeout(connectWebSocket, delay);
+      }
+    };
+
+    ws.onerror = function() {
+      // Will trigger onclose
+    };
+  } catch (e) {
+    console.warn('[History] WebSocket not available:', e);
+  }
+}
+
+// Start WebSocket connection
+connectWebSocket();
+
+// Tab switching
+function switchTab(tab) {
+  document.querySelectorAll('.tab-item').forEach(t => t.classList.remove('active'));
+  document.querySelector('.tab-item[data-tab="' + tab + '"]').classList.add('active');
+
+  document.querySelectorAll('.tab-panel').forEach(p => p.style.display = 'none');
+  const panel = document.getElementById('tab-' + tab);
+  panel.style.display = tab === 'requests' ? 'flex' : 'block';
+
+  if (tab === 'tokens') {
+    panel.setAttribute('data-loaded', 'true');
+    loadTokenStats();
+  }
+}
+
+async function loadTokenStats() {
+  const container = document.getElementById('tokens-table-container');
+  container.innerHTML = '<div class="loading">Loading...</div>';
+
+  try {
+    const res = await fetch('/history/api/token-stats');
+    const data = await res.json();
+    if (data.error) {
+      container.innerHTML = '<div class="empty-state"><h3>History Not Enabled</h3><p>Start server with --history</p></div>';
+      return;
+    }
+
+    const modelNames = Object.keys(data.models);
+    if (modelNames.length === 0) {
+      container.innerHTML = '<div class="empty-state"><h3>No token data</h3><p>Make some API requests first</p></div>';
+      document.getElementById('chart-fallback').style.display = 'block';
+      document.getElementById('chart-fallback').textContent = 'No data available for chart.';
+      return;
+    }
+
+    // Sort models by total tokens descending
+    modelNames.sort((a, b) => {
+      const totalA = data.models[a].inputTokens + data.models[a].outputTokens;
+      const totalB = data.models[b].inputTokens + data.models[b].outputTokens;
+      return totalB - totalA;
+    });
+
+    // Reset chart fallback state
+    document.getElementById('chart-fallback').style.display = 'none';
+    document.getElementById('token-chart').style.display = '';
+
+    // Render table
+    let totalInput = 0, totalOutput = 0, totalReqs = 0;
+    let rows = '';
+    for (const model of modelNames) {
+      const m = data.models[model];
+      const total = m.inputTokens + m.outputTokens;
+      totalInput += m.inputTokens;
+      totalOutput += m.outputTokens;
+      totalReqs += m.requestCount;
+      rows += '<tr>'
+        + '<td>' + escapeHtml(model) + '</td>'
+        + '<td class="number">' + formatNumber(m.inputTokens) + '</td>'
+        + '<td class="number">' + formatNumber(m.outputTokens) + '</td>'
+        + '<td class="number">' + formatNumber(total) + '</td>'
+        + '<td class="number">' + m.requestCount + '</td>'
+        + '</tr>';
+    }
+
+    container.innerHTML = '<table class="tokens-table">'
+      + '<thead><tr><th>Model</th><th class="number">Input Tokens</th><th class="number">Output Tokens</th><th class="number">Total Tokens</th><th class="number">Requests</th></tr></thead>'
+      + '<tbody>' + rows + '</tbody>'
+      + '<tfoot><tr><td>Total</td>'
+      + '<td class="number">' + formatNumber(totalInput) + '</td>'
+      + '<td class="number">' + formatNumber(totalOutput) + '</td>'
+      + '<td class="number">' + formatNumber(totalInput + totalOutput) + '</td>'
+      + '<td class="number">' + totalReqs + '</td>'
+      + '</tr></tfoot></table>';
+
+    // Render chart
+    renderTokenChart(data.timeline, modelNames);
+  } catch (e) {
+    container.innerHTML = '<div class="empty-state">Error: ' + e.message + '</div>';
+  }
+}
+
+let tokenChart = null;
+let tokenChartListenersAdded = false;
+
+function renderTokenChart(timeline, modelNames) {
+  if (typeof echarts === 'undefined') {
+    document.getElementById('chart-fallback').style.display = 'block';
+    document.getElementById('token-chart').style.display = 'none';
+    return;
+  }
+
+  const chartDom = document.getElementById('token-chart');
+  const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+
+  if (tokenChart) {
+    tokenChart.dispose();
+  }
+  tokenChart = echarts.init(chartDom, isDark ? 'dark' : null);
+
+  // Group timeline by model and compute cumulative totals
+  const seriesData = {};
+  for (const name of modelNames) {
+    seriesData[name] = [];
+  }
+
+  // Build cumulative data per model (timeline is already sorted by backend)
+  const cumulative = {};
+  for (const name of modelNames) {
+    cumulative[name] = 0;
+  }
+
+  for (const point of timeline) {
+    const total = point.inputTokens + point.outputTokens;
+    cumulative[point.model] += total;
+    seriesData[point.model].push([point.timestamp, cumulative[point.model]]);
+  }
+
+  const colors = ['#58a6ff', '#3fb950', '#f85149', '#d29922', '#a371f7', '#39c5cf', '#f778ba', '#79c0ff', '#7ee787', '#ffa657'];
+
+  const series = modelNames.map((name, i) => ({
+    name: name,
+    type: 'line',
+    data: seriesData[name],
+    smooth: true,
+    symbol: 'circle',
+    symbolSize: 4,
+    lineStyle: { width: 2 },
+    itemStyle: { color: colors[i % colors.length] },
+    areaStyle: { opacity: 0.05 },
+  }));
+
+  const style = getComputedStyle(document.documentElement);
+  const textColor = style.getPropertyValue('--text').trim();
+  const borderColor = style.getPropertyValue('--border').trim();
+  const bgColor = style.getPropertyValue('--bg').trim();
+
+  const option = {
+    backgroundColor: 'transparent',
+    tooltip: {
+      trigger: 'item',
+      backgroundColor: bgColor,
+      borderColor: borderColor,
+      textStyle: { color: textColor, fontSize: 12 },
+      formatter: function(params) {
+        const d = new Date(params.data[0]);
+        const time = d.toLocaleDateString() + ' ' + d.toLocaleTimeString();
+        return '<b>' + params.seriesName + '</b><br/>'
+          + time + '<br/>'
+          + 'Cumulative: ' + formatNumber(params.data[1]) + ' tokens';
+      }
+    },
+    legend: {
+      data: modelNames,
+      textStyle: { color: textColor, fontSize: 12 },
+      top: 0,
+    },
+    grid: {
+      left: 60,
+      right: 20,
+      top: 40,
+      bottom: 40,
+    },
+    xAxis: {
+      type: 'time',
+      axisLine: { lineStyle: { color: borderColor } },
+      axisLabel: { color: textColor, fontSize: 11 },
+      splitLine: { show: false },
+    },
+    yAxis: {
+      type: 'value',
+      axisLine: { lineStyle: { color: borderColor } },
+      axisLabel: {
+        color: textColor,
+        fontSize: 11,
+        formatter: function(v) { return formatNumber(v); }
+      },
+      splitLine: { lineStyle: { color: borderColor, opacity: 0.3 } },
+    },
+    series: series,
+  };
+
+  tokenChart.setOption(option);
+
+  // Add global listeners only once
+  if (!tokenChartListenersAdded) {
+    tokenChartListenersAdded = true;
+    window.addEventListener('resize', function() {
+      if (tokenChart) tokenChart.resize();
+    });
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function() {
+      if (document.getElementById('tab-tokens').getAttribute('data-loaded') === 'true') {
+        loadTokenStats();
+      }
+    });
+  }
+}
 `;
 
 //#endregion
@@ -3948,10 +4837,39 @@ body {
   color: var(--text);
   line-height: 1.4;
   font-size: 13px;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Tab bar */
+.tab-bar {
+  display: flex;
+  gap: 0;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg-secondary);
+  padding: 0 16px;
+  flex-shrink: 0;
+}
+.tab-item {
+  padding: 10px 20px;
+  cursor: pointer;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text-muted);
+  border-bottom: 2px solid transparent;
+  transition: all 0.15s;
+  user-select: none;
+}
+.tab-item:hover { color: var(--text); }
+.tab-item.active {
+  color: var(--primary);
+  border-bottom-color: var(--primary);
 }
+.tab-panel { flex: 1; overflow: hidden; }
 
 /* Layout */
-.layout { display: flex; height: 100vh; }
+.layout { display: flex; height: 100%; }
 .sidebar {
   width: 280px;
   border-right: 1px solid var(--border);
@@ -4286,11 +5204,67 @@ input::placeholder { color: var(--text-dim); }
   white-space: pre-wrap;
   word-break: break-word;
 }
+
+/* Tokens tab */
+.tokens-container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+}
+.tokens-header {
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg-secondary);
+}
+.tokens-header h1 { font-size: 16px; font-weight: 600; }
+.tokens-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+}
+.tokens-table th {
+  text-align: left;
+  padding: 10px 16px;
+  border-bottom: 2px solid var(--border);
+  color: var(--text-muted);
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  font-weight: 600;
+}
+.tokens-table td {
+  padding: 10px 16px;
+  border-bottom: 1px solid var(--border);
+}
+.tokens-table tr:hover td { background: var(--bg-secondary); }
+.tokens-table .number { text-align: right; font-family: 'SF Mono', Monaco, 'Courier New', monospace; }
+.tokens-table tfoot td {
+  font-weight: 600;
+  border-top: 2px solid var(--border);
+}
+.chart-section { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 16px; }
+.chart-title { font-size: 14px; font-weight: 600; margin-bottom: 12px; }
+.chart-container { flex: 1; min-height: 400px; }
+.chart-fallback {
+  padding: 40px 20px;
+  text-align: center;
+  color: var(--text-muted);
+  background: var(--bg-secondary);
+  border-radius: 8px;
+  border: 1px solid var(--border);
+}
 `;
 
 //#endregion
 //#region src/routes/history/ui/template.ts
 const template = `
+<div class="tab-bar">
+  <div class="tab-item active" onclick="switchTab('requests')" data-tab="requests">Requests</div>
+  <div class="tab-item" onclick="switchTab('tokens')" data-tab="tokens">Tokens</div>
+</div>
+
+<div id="tab-requests" class="tab-panel">
 <div class="layout">
   <!-- Sidebar: Sessions -->
   <div class="sidebar">
@@ -4354,6 +5328,25 @@ const template = `
     </div>
   </div>
 </div>
+</div>
+
+<div id="tab-tokens" class="tab-panel" style="display:none" data-loaded="false">
+  <div class="tokens-container">
+    <div class="tokens-header">
+      <h1>Token Analytics</h1>
+    </div>
+    <div id="tokens-table-container">
+      <div class="loading">Loading...</div>
+    </div>
+    <div class="chart-section">
+      <h2 class="chart-title">Cumulative Token Usage</h2>
+      <div class="chart-container" id="token-chart"></div>
+      <div class="chart-fallback" id="chart-fallback" style="display:none">
+        ECharts library failed to load. Token chart is unavailable.
+      </div>
+    </div>
+  </div>
+</div>
 
 <!-- Raw JSON Modal -->
 <div class="modal-overlay" id="raw-modal" onclick="closeRawModal(event)">
@@ -4382,6 +5375,7 @@ function getHistoryUI() {
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Copilot API - Request History</title>
   <link rel="icon" href="data:,">
+  <script defer src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"><\/script>
   <style>${styles}</style>
 </head>
 <body>
@@ -4398,10 +5392,16 @@ historyRoutes.get("/api/entries", handleGetEntries);
 historyRoutes.get("/api/entries/:id", handleGetEntry);
 historyRoutes.delete("/api/entries", handleDeleteEntries);
 historyRoutes.get("/api/stats", handleGetStats);
+historyRoutes.get("/api/token-stats", handleGetTokenStats);
 historyRoutes.get("/api/export", handleExport);
 historyRoutes.get("/api/sessions", handleGetSessions);
 historyRoutes.get("/api/sessions/:id", handleGetSession);
 historyRoutes.delete("/api/sessions/:id", handleDeleteSession);
+historyRoutes.get("/ws", (c) => {
+	if (c.req.header("Upgrade") !== "websocket") return c.text("Expected WebSocket upgrade", 426);
+	if (c.env?.server?.upgrade(c.req.raw)) return new Response(null, { status: 101 });
+	return c.text("WebSocket upgrade failed", 500);
+});
 historyRoutes.get("/", (c) => {
 	return c.html(getHistoryUI());
 });
@@ -5853,6 +6853,7 @@ function prependMarkerToAnthropicResponse$1(response, marker) {
 async function handleDirectAnthropicStreamingResponse(opts) {
 	const { stream, response, anthropicPayload, ctx } = opts;
 	const acc = createAnthropicStreamAccumulator();
+	const checkRepetition = createStreamRepetitionChecker(`anthropic:${anthropicPayload.model}`);
 	try {
 		for await (const rawEvent of response) {
 			consola.debug("Direct Anthropic raw stream event:", JSON.stringify(rawEvent));
@@ -5866,6 +6867,7 @@ async function handleDirectAnthropicStreamingResponse(opts) {
 				continue;
 			}
 			processAnthropicEvent(event, acc);
+			if (event.type === "content_block_delta" && event.delta.type === "text_delta") checkRepetition(event.delta.text);
 			await stream.writeSSE({
 				event: rawEvent.event || event.type,
 				data: rawEvent.data
@@ -6065,6 +7067,7 @@ async function handleStreamingResponse(opts) {
 		toolCalls: {}
 	};
 	const acc = createAnthropicStreamAccumulator();
+	const checkRepetition = createStreamRepetitionChecker(`translated:${anthropicPayload.model}`);
 	try {
 		if (ctx.truncateResult?.wasCompacted) {
 			const marker = createTruncationResponseMarkerOpenAI(ctx.truncateResult);
@@ -6076,7 +7079,8 @@ async function handleStreamingResponse(opts) {
 			response,
 			toolNameMapping,
 			streamState,
-			acc
+			acc,
+			checkRepetition
 		});
 		recordStreamingResponse(acc, anthropicPayload.model, ctx);
 		completeTracking(ctx.trackingId, acc.inputTokens, acc.outputTokens, ctx.queueWaitMs);
@@ -6132,7 +7136,7 @@ async function sendTruncationMarkerEvent(stream, streamState, marker) {
 	streamState.contentBlockIndex++;
 }
 async function processStreamChunks(opts) {
-	const { stream, response, toolNameMapping, streamState, acc } = opts;
+	const { stream, response, toolNameMapping, streamState, acc, checkRepetition } = opts;
 	for await (const rawEvent of response) {
 		consola.debug("Copilot raw stream event:", JSON.stringify(rawEvent));
 		if (rawEvent.data === "[DONE]") break;
@@ -6149,6 +7153,7 @@ async function processStreamChunks(opts) {
 		for (const event of events) {
 			consola.debug("Translated Anthropic event:", JSON.stringify(event));
 			processAnthropicEvent(event, acc);
+			if (event.type === "content_block_delta" && event.delta.type === "text_delta") checkRepetition(event.delta.text);
 			await stream.writeSSE({
 				event: event.type,
 				data: JSON.stringify(event)
@@ -6632,6 +7637,7 @@ async function runServer(options) {
 		consola.info(`History recording enabled (${limitText} entries)`);
 	}
 	initTui({ enabled: true });
+	initRequestContextManager(state.staleRequestMaxAge).startReaper();
 	await ensurePaths();
 	await cacheVSCodeVersion();
 	if (options.githubToken) {
@@ -6671,11 +7677,12 @@ async function runServer(options) {
 		}
 	}
 	consola.box(`🌐 Usage Viewer: https://ericc-ch.github.io/copilot-api?endpoint=${serverUrl}/usage${options.history ? `\n📜 History UI: ${serverUrl}/history` : ""}`);
-	serve({
+	setupShutdownHandlers();
+	setServerInstance(serve({
 		fetch: server.fetch,
 		port: options.port,
 		hostname: options.host
-	});
+	}));
 }
 const start = defineCommand({
 	meta: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dianshuv/copilot-api",
-  "version": "0.2.3",
+  "version": "0.4.0",
   "description": "Turn GitHub Copilot into OpenAI/Anthropic API compatible server. Usable with Claude Code!",
   "author": "dianshuv",
   "type": "module",