Optimize chat composer context updates

Cursor Agent committed 4 months ago

Commit 487295d1 parent b489ea55 files · +211 −25Browse files

Unified · Split

5 files

apps/web/src/components/ChatView.tsx +3 −2
apps/web/src/components/chat/ChatComposer.tsx +20 −23
apps/web/src/lib/contextWindow.ts +29 −0
apps/web/src/storeSelectors.test.ts +108 −0
apps/web/src/storeSelectors.ts +51 −0

apps/web/src/components/ChatView.tsx+3−2

                     draftId={draftId}
                     activeThreadId={activeThreadId}
                     activeThreadEnvironmentId={activeThread?.environmentId}
-                    activeThread={activeThread}
+                    activeThreadSessionProviderInstanceId={
+                      activeThread?.session?.providerInstanceId
+                    }
                     isServerThread={isServerThread}
                     isLocalDraftThread={isLocalDraftThread}
                     phase={phase}
                     providerStatuses={providerStatuses as ServerProvider[]}
                     activeProjectDefaultModelSelection={activeProject?.defaultModelSelection}
                     activeThreadModelSelection={activeThread?.modelSelection}
-                    activeThreadActivities={activeThread?.activities}
                     resolvedTheme={resolvedTheme}
                     settings={settings}
                     keybindings={keybindings}

apps/web/src/components/chat/ChatComposer.tsx+20−23

 import type { SessionPhase, Thread } from "../../types";
 import type { PendingUserInputDraftAnswer } from "../../pendingUserInput";
 import type { PendingApproval, PendingUserInput } from "../../session-logic";
-import {
+import { type ContextWindowSnapshot, formatProviderDisplayName } from "../../lib/contextWindow";
-  deriveLatestContextWindowSnapshot,
-  formatProviderDisplayName,
-} from "../../lib/contextWindow";
 import { formatProviderSkillDisplayName } from "../../providerSkillPresentation";
 import { searchProviderSkills } from "../../providerSkillSearch";
 import { useMediaQuery } from "../../hooks/useMediaQuery";
 import type { ReviewCommentContext } from "../../reviewCommentContext";
+import { useStore } from "../../store";
+import { createContextWindowSnapshotSelectorByRef } from "../../storeSelectors";
 const IMAGE_SIZE_LIMIT_LABEL = `${Math.round(PROVIDER_SEND_TURN_MAX_IMAGE_BYTES / (1024 * 1024))}MB`;
 const ComposerFooterPrimaryActions = memo(function ComposerFooterPrimaryActions(props: {
   compact: boolean;
-  activeContextWindow: ReturnType<typeof deriveLatestContextWindowSnapshot>;
+  activeContextWindow: ContextWindowSnapshot | null;
   activeThreadProviderDisplayName: string | null;
   isPreparingWorktree: boolean;
   pendingAction: {
   // Thread context
   activeThreadId: ThreadId | null;
   activeThreadEnvironmentId: EnvironmentId | undefined;
-  activeThread: Thread | undefined;
+  activeThreadSessionProviderInstanceId: ProviderInstanceId | undefined;
   isServerThread: boolean;
   isLocalDraftThread: boolean;
   activeProjectDefaultModelSelection: ModelSelection | null | undefined;
   activeThreadModelSelection: ModelSelection | null | undefined;
-  // Context window
-  activeThreadActivities: Thread["activities"] | undefined;
   // Misc
   resolvedTheme: "light" | "dark";
   settings: UnifiedSettings;
     draftId,
     activeThreadId,
     activeThreadEnvironmentId: _activeThreadEnvironmentId,
-    activeThread,
+    activeThreadSessionProviderInstanceId,
     isServerThread: _isServerThread,
     isLocalDraftThread: _isLocalDraftThread,
     phase,
     providerStatuses,
     activeProjectDefaultModelSelection,
     activeThreadModelSelection,
-    activeThreadActivities,
     resolvedTheme,
     settings,
     keybindings,
   );
   const selectedProviderByThreadId = composerDraft.activeProvider ?? null;
   const threadProvider =
-    activeThread?.session?.providerInstanceId ??
+    activeThreadSessionProviderInstanceId ??
     activeThreadModelSelection?.instanceId ??
     activeProjectDefaultModelSelection?.instanceId ??
     null;
     ) ?? ProviderDriverKind.make("codex");
   const selectedProvider: ProviderDriverKind = lockedProvider ?? unlockedSelectedProvider;
   const lockedContinuationGroupKey = useMemo((): string | null => {
-    if (!lockedProvider || !activeThread) return null;
+    if (!lockedProvider || !activeThreadId) return null;
     const lockedInstanceId =
-      activeThread.session?.providerInstanceId ?? activeThreadModelSelection?.instanceId;
+      activeThreadSessionProviderInstanceId ?? activeThreadModelSelection?.instanceId;
     if (!lockedInstanceId) return null;
     return (
       providerInstanceEntries.find((entry) => entry.instanceId === lockedInstanceId)
         ?.continuationGroupKey ?? null
     );
   }, [
-    activeThread,
+    activeThreadId,
+    activeThreadSessionProviderInstanceId,
     activeThreadModelSelection?.instanceId,
     lockedProvider,
     providerInstanceEntries,
   const selectedInstanceId = useMemo<ProviderInstanceId>(() => {
     const candidates: Array<string | null | undefined> = [
       composerDraft.activeProvider,
-      activeThread?.session?.providerInstanceId,
+      activeThreadSessionProviderInstanceId,
       activeThreadModelSelection?.instanceId,
       activeProjectDefaultModelSelection?.instanceId,
     ];
     );
   }, [
     activeProjectDefaultModelSelection?.instanceId,
-    activeThread?.session?.providerInstanceId,
+    activeThreadSessionProviderInstanceId,
     activeThreadModelSelection?.instanceId,
     composerDraft.activeProvider,
     explicitSelectedInstanceId,
   // ------------------------------------------------------------------
   // Context window
   // ------------------------------------------------------------------
-  const activeContextWindow = useMemo(
+  const contextWindowSelector = useMemo(
-    () => deriveLatestContextWindowSnapshot(activeThreadActivities ?? []),
+    () => createContextWindowSnapshotSelectorByRef(routeThreadRef),
-    [activeThreadActivities],
+    [routeThreadRef],
   );
+  const activeContextWindow = useStore(contextWindowSelector);
   const activeThreadProviderDisplayName = useMemo(() => {
     if (!activeThreadModelSelection) return null;
     const entry = providerStatuses.find(
         );
       },
       addTerminalContext: (selection: TerminalContextSelection) => {
-        if (!activeThread) return;
+        if (!activeThreadId) return;
         const snapshot = composerEditorRef.current?.readSnapshot() ?? {
           value: promptRef.current,
           cursor: composerCursor,
           insertion.prompt,
           {
             id: randomUUID(),
-            threadId: activeThread.id,
+            threadId: activeThreadId,
             createdAt: new Date().toISOString(),
             ...selection,
           },
       }),
     }),
     [
-      activeThread,
+      activeThreadId,
       composerDraftTarget,
       composerCursor,
       composerTerminalContexts,

apps/web/src/lib/contextWindow.ts+29−0

@@ -95,6 +95,35 @@ export function deriveLatestContextWindowSnapshot( · 94 unmodified lines
95	return null;	95	return null;
96	}	96	}
97		97
		98	export function contextWindowSnapshotsEqual(
		99	left: ContextWindowSnapshot \| null,
		100	right: ContextWindowSnapshot \| null,
		101	): boolean {
		102	if (left === right) return true;
		103	if (left === null \|\| right === null) return false;
		104	return (
		105	left.usedTokens === right.usedTokens &&
		106	left.totalProcessedTokens === right.totalProcessedTokens &&
		107	left.maxTokens === right.maxTokens &&
		108	left.remainingTokens === right.remainingTokens &&
		109	left.usedPercentage === right.usedPercentage &&
		110	left.remainingPercentage === right.remainingPercentage &&
		111	left.inputTokens === right.inputTokens &&
		112	left.cachedInputTokens === right.cachedInputTokens &&
		113	left.outputTokens === right.outputTokens &&
		114	left.reasoningOutputTokens === right.reasoningOutputTokens &&
		115	left.lastUsedTokens === right.lastUsedTokens &&
		116	left.lastInputTokens === right.lastInputTokens &&
		117	left.lastCachedInputTokens === right.lastCachedInputTokens &&
		118	left.lastOutputTokens === right.lastOutputTokens &&
		119	left.lastReasoningOutputTokens === right.lastReasoningOutputTokens &&
		120	left.toolUses === right.toolUses &&
		121	left.durationMs === right.durationMs &&
		122	left.compactsAutomatically === right.compactsAutomatically &&
		123	left.updatedAt === right.updatedAt
		124	);
		125	}
		126
98	export function formatContextWindowTokens(value: number \| null): string {	127	export function formatContextWindowTokens(value: number \| null): string {
99	if (value === null \|\| !Number.isFinite(value)) {	128	if (value === null \|\| !Number.isFinite(value)) {
100	return "0";	129	return "0";

apps/web/src/storeSelectors.test.ts+108−0

@@ -0,0 +1,108 @@
	1	import {
	2	EnvironmentId,
	3	EventId,
	4	type OrchestrationThreadActivity,
	5	ThreadId,
	6	TurnId,
	7	} from "@t3tools/contracts";
	8	import { describe, expect, it } from "vite-plus/test";
	9
	10	import { type AppState, type EnvironmentState } from "./store";
	11	import { createContextWindowSnapshotSelectorByRef } from "./storeSelectors";
	12
	13	const environmentId = EnvironmentId.make("environment-local");
	14	const threadId = ThreadId.make("thread-1");
	15	const threadRef = { environmentId, threadId };
	16
	17	function makeActivity(id: string, kind: string, payload: unknown): OrchestrationThreadActivity {
	18	return {
	19	id: EventId.make(id),
	20	tone: "info",
	21	kind,
	22	summary: kind,
	23	payload,
	24	turnId: TurnId.make("turn-1"),
	25	createdAt: `2026-06-17T16:00:${id.padStart(2, "0")}.000Z`,
	26	};
	27	}
	28
	29	function makeState(activities: ReadonlyArray<OrchestrationThreadActivity>): AppState {
	30	const environmentState: EnvironmentState = {
	31	projectIds: [],
	32	projectById: {},
	33	threadIds: [threadId],
	34	threadIdsByProjectId: {},
	35	threadShellById: {},
	36	threadSessionById: {},
	37	threadTurnStateById: {},
	38	messageIdsByThreadId: {},
	39	messageByThreadId: {},
	40	activityIdsByThreadId: {
	41	[threadId]: activities.map((activity) => activity.id),
	42	},
	43	activityByThreadId: {
	44	[threadId]: Object.fromEntries(
	45	activities.map((activity) => [activity.id, activity] as const),
	46	) as Record<string, OrchestrationThreadActivity>,
	47	},
	48	proposedPlanIdsByThreadId: {},
	49	proposedPlanByThreadId: {},
	50	turnDiffIdsByThreadId: {},
	51	turnDiffSummaryByThreadId: {},
	52	sidebarThreadSummaryById: {},
	53	bootstrapComplete: true,
	54	};
	55	return {
	56	activeEnvironmentId: environmentId,
	57	environmentStateById: {
	58	[environmentId]: environmentState,
	59	},
	60	};
	61	}
	62
	63	describe("storeSelectors", () => {
	64	it("reuses the context window snapshot when unrelated activities append", () => {
	65	const contextActivity = makeActivity("1", "context-window.updated", {
	66	usedTokens: 42_000,
	67	maxTokens: 258_000,
	68	totalProcessedTokens: 90_000,
	69	});
	70	const selector = createContextWindowSnapshotSelectorByRef(threadRef);
	71
	72	const first = selector(makeState([contextActivity]));
	73	const second = selector(
	74	makeState([contextActivity, makeActivity("2", "tool.completed", { toolName: "profile" })]),
	75	);
	76
	77	expect(first).not.toBeNull();
	78	expect(second).toBe(first);
	79	});
	80
	81	it("returns a new context window snapshot when context usage changes", () => {
	82	const selector = createContextWindowSnapshotSelectorByRef(threadRef);
	83	const first = selector(
	84	makeState([
	85	makeActivity("1", "context-window.updated", {
	86	usedTokens: 42_000,
	87	maxTokens: 258_000,
	88	}),
	89	]),
	90	);
	91	const second = selector(
	92	makeState([
	93	makeActivity("1", "context-window.updated", {
	94	usedTokens: 42_000,
	95	maxTokens: 258_000,
	96	}),
	97	makeActivity("2", "context-window.updated", {
	98	usedTokens: 43_000,
	99	maxTokens: 258_000,
	100	}),
	101	]),
	102	);
	103
	104	expect(first).not.toBeNull();
	105	expect(second).not.toBe(first);
	106	expect(second?.usedTokens).toBe(43_000);
	107	});
	108	});

apps/web/src/storeSelectors.ts+51−0

@@ -1,4 +1,9 @@
1	import { type ScopedProjectRef, type ScopedThreadRef, type ThreadId } from "@t3tools/contracts";	1	import { type ScopedProjectRef, type ScopedThreadRef, type ThreadId } from "@t3tools/contracts";
		2	import {
		3	contextWindowSnapshotsEqual,
		4	deriveLatestContextWindowSnapshot,
		5	type ContextWindowSnapshot,
		6	} from "./lib/contextWindow";
2	import { selectEnvironmentState, type AppState, type EnvironmentState } from "./store";	7	import { selectEnvironmentState, type AppState, type EnvironmentState } from "./store";
3	import { type Project, type Thread } from "./types";	8	import { type Project, type Thread } from "./types";
4	import { getThreadFromEnvironmentState } from "./threadDerivation";	9	import { getThreadFromEnvironmentState } from "./threadDerivation";
@@ -45,6 +50,52 @@ export function createThreadSelectorByRef( · 40 unmodified lines
45	return createScopedThreadSelector(() => ref);	50	return createScopedThreadSelector(() => ref);
46	}	51	}
47		52
		53	export function createContextWindowSnapshotSelectorByRef(
		54	ref: ScopedThreadRef \| null \| undefined,
		55	): (state: AppState) => ContextWindowSnapshot \| null {
		56	let previousEnvironmentState: EnvironmentState \| undefined;
		57	let previousThreadId: ThreadId \| undefined;
		58	let previousActivityIds: readonly string[] \| undefined;
		59	let previousSnapshot: ContextWindowSnapshot \| null = null;
		60
		61	return (state) => {
		62	if (!ref) {
		63	previousEnvironmentState = undefined;
		64	previousThreadId = undefined;
		65	previousActivityIds = undefined;
		66	previousSnapshot = null;
		67	return null;
		68	}
		69
		70	const environmentState = selectEnvironmentState(state, ref.environmentId);
		71	const activityIds = environmentState.activityIdsByThreadId[ref.threadId];
		72	if (
		73	previousEnvironmentState === environmentState &&
		74	previousThreadId === ref.threadId &&
		75	previousActivityIds === activityIds
		76	) {
		77	return previousSnapshot;
		78	}
		79
		80	const activities =
		81	activityIds?.flatMap((activityId) => {
		82	const activity = environmentState.activityByThreadId[ref.threadId]?.[activityId];
		83	return activity ? [activity] : [];
		84	}) ?? [];
		85	const nextSnapshot = deriveLatestContextWindowSnapshot(activities);
		86	previousEnvironmentState = environmentState;
		87	previousThreadId = ref.threadId;
		88	previousActivityIds = activityIds;
		89
		90	if (contextWindowSnapshotsEqual(previousSnapshot, nextSnapshot)) {
		91	return previousSnapshot;
		92	}
		93
		94	previousSnapshot = nextSnapshot;
		95	return nextSnapshot;
		96	};
		97	}
		98
48	export function createThreadSelectorAcrossEnvironments(	99	export function createThreadSelectorAcrossEnvironments(
49	threadId: ThreadId \| null \| undefined,	100	threadId: ThreadId \| null \| undefined,
50	): (state: AppState) => Thread \| undefined {	101	): (state: AppState) => Thread \| undefined {