d8dfun/claudecodeui
1
0
Fork 0
mirror of https://github.com/siteboon/claudecodeui.git synced 2026-06-17 13:52:07 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(chat): unify session gateway with stable IDs and a single WS protocol

Browse Source 
The frontend previously juggled placeholder IDs, provider-native IDs, and session_created handoffs, which caused race conditions and provider-specific branching. This introduces app-allocated session IDs, a chat run registry with event replay, delta sidebar updates, and one kind-based websocket contract so the UI can treat every provider the same while JSONL remains the source of truth.
This commit is contained in:
Haileyesus
2026-06-11 18:47:19 +03:00
parent 3d948217ef
commit f5eac2ec12
40 changed files with 2451 additions and 1226 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/app/AppContent.tsx
View File

@@ -1,4 +1,4 @@
import { useEffect, useRef } from 'react';
import { useEffect } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
@@ -24,8 +24,7 @@ function AppContentInner() {
const { sessionId } = useParams<{ sessionId?: string }>();
const { t } = useTranslation('common');
const { isMobile } = useDeviceSettings({ trackPWA: false });
const { ws, sendMessage, latestMessage, isConnected } = useWebSocket();
const wasConnectedRef = useRef(false);
const { ws, sendMessage, subscribe } = useWebSocket();
const {
processingSessions,
@@ -52,7 +51,7 @@ function AppContentInner() {
} = useProjectsState({
sessionId,
navigate,
latestMessage,
subscribe,
isMobile,
activeSessions: processingSessions,
});
@@ -96,23 +95,9 @@ function AppContentInner() {
};
}, [navigate, refreshProjectsSilently, setActiveTab, setSidebarOpen]);
// Permission recovery: query pending permissions on WebSocket reconnect or session change
useEffect(() => {
const isReconnect = isConnected && !wasConnectedRef.current;
if (isReconnect) {
wasConnectedRef.current = true;
} else if (!isConnected) {
wasConnectedRef.current = false;
}
if (isConnected && selectedSession?.id) {
sendMessage({
type: 'get-pending-permissions',
sessionId: selectedSession.id
});
}
}, [isConnected, selectedSession?.id, sendMessage]);
// Pending tool permissions are recovered through the `chat.subscribe` flow:
// the `chat_subscribed` ack carries them on session open and on reconnect,
// so no separate permission-recovery message is needed here.
// Adjust the app container to stay above the virtual keyboard on iOS Safari.
// On Chrome for Android the layout viewport already shrinks when the keyboard opens,
@@ -177,7 +162,6 @@ function AppContentInner() {
setActiveTab={setActiveTab}
ws={ws}
sendMessage={sendMessage}
latestMessage={latestMessage}
isMobile={isMobile}
onMenuClick={() => setSidebarOpen(true)}
isLoading={isLoadingProjects}

195
src/components/chat/hooks/useChatComposerState.ts
View File

@@ -12,7 +12,6 @@ import type {
import { useDropzone } from 'react-dropzone';
import { authenticatedFetch } from '../../../utils/api';
import { PENDING_SESSION_ID } from '../../../hooks/useSessionProtection';
import type { MarkSessionProcessing } from '../../../hooks/useSessionProtection';
import { grantClaudeToolPermission } from '../utils/chatPermissions';
import { safeLocalStorage } from '../utils/chatStorage';
@@ -45,6 +44,14 @@ interface UseChatComposerStateArgs {
sendMessage: (message: unknown) => void;
sendByCtrlEnter?: boolean;
onSessionProcessing?: MarkSessionProcessing;
/**
* Invoked with the freshly allocated session id when the user sends the
* first message of a brand-new conversation. The backend allocates the id
* via POST /api/providers/sessions BEFORE the websocket send, so the id is
* stable for the conversation's whole lifetime — the consumer navigates to
* /session/:id and records it as the current session.
*/
onSessionEstablished?: (sessionId: string) => void;
onInputFocusChange?: (focused: boolean) => void;
onFileOpen?: (filePath: string, diffInfo?: unknown) => void;
onShowSettings?: () => void;
@@ -171,6 +178,7 @@ export function useChatComposerState({
sendMessage,
sendByCtrlEnter,
onSessionProcessing,
onSessionEstablished,
onInputFocusChange,
onFileOpen,
onShowSettings,
@@ -597,8 +605,49 @@ export function useChatComposerState({
}
}
const effectiveSessionId =
currentSessionId || selectedSession?.id || sessionStorage.getItem('cursorSessionId');
const resolvedProjectPath = selectedProject.fullPath || selectedProject.path || '';
// The conversation always has a stable backend-allocated session id
// BEFORE the first websocket send: brand-new chats allocate one here
// via the session gateway. There is no client-visible session-id
// handoff later — this id stays valid for the conversation's lifetime.
let targetSessionId = selectedSession?.id || currentSessionId || null;
if (!targetSessionId) {
try {
const response = await authenticatedFetch('/api/providers/sessions', {
method: 'POST',
body: JSON.stringify({
provider,
projectPath: resolvedProjectPath,
}),
});
if (!response.ok) {
throw new Error(`Failed to create session (${response.status})`);
}
const body = await response.json();
targetSessionId = body?.data?.sessionId || null;
} catch (error) {
const message = error instanceof Error ? error.message : 'Unknown error';
console.error('Session creation failed:', error);
addMessage({
type: 'error',
content: `Failed to start a new session: ${message}`,
timestamp: new Date(),
});
return;
}
if (!targetSessionId) {
addMessage({
type: 'error',
content: 'Failed to start a new session: no session id returned.',
timestamp: new Date(),
});
return;
}
onSessionEstablished?.(targetSessionId);
}
const userMessage: ChatMessage = {
type: 'user',
@@ -609,10 +658,9 @@ export function useChatComposerState({
addMessage(userMessage);
// Mark this request as processing in the per-session activity map (the
// single source of truth the indicator derives from). A brand-new
// conversation has no session id yet, so it is tracked under the
// pending placeholder until `session_created` announces the real id.
onSessionProcessing?.(effectiveSessionId || PENDING_SESSION_ID, {
// single source of truth the indicator derives from). The id is always
// concrete at this point — no pending placeholder exists anymore.
onSessionProcessing?.(targetSessionId, {
statusText: null,
canInterrupt: true,
});
@@ -648,87 +696,37 @@ export function useChatComposerState({
};
const toolsSettings = getToolsSettings();
const resolvedProjectPath = selectedProject.fullPath || selectedProject.path || '';
const sessionSummary = getNotificationSessionSummary(selectedSession, currentInput);
if (provider === 'cursor') {
sendMessage({
type: 'cursor-command',
command: messageContent,
sessionId: effectiveSessionId,
options: {
cwd: resolvedProjectPath,
projectPath: resolvedProjectPath,
sessionId: effectiveSessionId,
resume: Boolean(effectiveSessionId),
model: cursorModel,
skipPermissions: toolsSettings?.skipPermissions || false,
sessionSummary,
toolsSettings,
},
});
} else if (provider === 'codex') {
sendMessage({
type: 'codex-command',
command: messageContent,
sessionId: effectiveSessionId,
options: {
cwd: resolvedProjectPath,
projectPath: resolvedProjectPath,
sessionId: effectiveSessionId,
resume: Boolean(effectiveSessionId),
model: codexModel,
sessionSummary,
permissionMode: permissionMode === 'plan' ? 'default' : permissionMode,
},
});
} else if (provider === 'gemini') {
sendMessage({
type: 'gemini-command',
command: messageContent,
sessionId: effectiveSessionId,
options: {
cwd: resolvedProjectPath,
projectPath: resolvedProjectPath,
sessionId: effectiveSessionId,
resume: Boolean(effectiveSessionId),
model: geminiModel,
sessionSummary,
permissionMode,
toolsSettings,
},
});
} else if (provider === 'opencode') {
sendMessage({
type: 'opencode-command',
command: messageContent,
sessionId: effectiveSessionId,
options: {
cwd: resolvedProjectPath,
projectPath: resolvedProjectPath,
sessionId: effectiveSessionId,
resume: Boolean(effectiveSessionId),
model: opencodeModel,
sessionSummary,
},
});
} else {
sendMessage({
type: 'claude-command',
command: messageContent,
options: {
projectPath: resolvedProjectPath,
cwd: resolvedProjectPath,
sessionId: effectiveSessionId,
resume: Boolean(effectiveSessionId),
toolsSettings,
permissionMode,
model: claudeModel,
sessionSummary,
images: uploadedImages,
},
});
}
const model =
provider === 'cursor'
? cursorModel
: provider === 'codex'
? codexModel
: provider === 'gemini'
? geminiModel
: provider === 'opencode'
? opencodeModel
: claudeModel;
// One message shape for every provider. The backend resolves the
// provider, project path, and provider-native resume id from the
// session row; `options` only carries composer-level preferences.
sendMessage({
type: 'chat.send',
sessionId: targetSessionId,
content: messageContent,
options: {
model,
// Codex has no plan mode; downgrade rather than sending an
// unsupported value to its runtime.
permissionMode: provider === 'codex' && permissionMode === 'plan' ? 'default' : permissionMode,
toolsSettings,
skipPermissions: toolsSettings?.skipPermissions || false,
sessionSummary,
images: uploadedImages,
},
});
setInput('');
inputValueRef.current = '';
@@ -756,6 +754,7 @@ export function useChatComposerState({
opencodeModel,
isLoading,
onSessionProcessing,
onSessionEstablished,
permissionMode,
provider,
resetCommandMenuState,
@@ -918,29 +917,19 @@ export function useChatComposerState({
return;
}
const cursorSessionId =
typeof window !== 'undefined' ? sessionStorage.getItem('cursorSessionId') : null;
const candidateSessionIds = [
currentSessionId,
provider === 'cursor' ? cursorSessionId : null,
selectedSession?.id || null,
];
const targetSessionId =
candidateSessionIds.find((sessionId) => Boolean(sessionId)) || null;
const targetSessionId = selectedSession?.id || currentSessionId || null;
if (!targetSessionId) {
console.warn('Abort requested but no concrete session ID is available yet.');
console.warn('Abort requested but no session ID is available.');
return;
}
// The backend resolves the provider from the session row, so no provider
// field is needed here.
sendMessage({
type: 'abort-session',
type: 'chat.abort',
sessionId: targetSessionId,
provider,
});
}, [canAbortSession, currentSessionId, provider, selectedSession?.id, sendMessage]);
}, [canAbortSession, currentSessionId, selectedSession?.id, sendMessage]);
const handleGrantToolPermission = useCallback(
(suggestion: { entry: string; toolName: string }) => {
@@ -965,7 +954,7 @@ export function useChatComposerState({
validIds.forEach((requestId) => {
sendMessage({
type: 'claude-permission-response',
type: 'chat.permission-response',
requestId,
allow: Boolean(decision?.allow),
updatedInput: decision?.updatedInput,

90
src/components/chat/hooks/useChatProviderState.ts
View File

@@ -17,17 +17,35 @@ const FALLBACK_DEFAULT_MODEL: Record<LLMProvider, string> = {
opencode: 'anthropic/claude-sonnet-4-5',
};
const getPermissionModesForProvider = (provider: LLMProvider): PermissionMode[] => {
if (provider === 'codex') {
return ['default', 'acceptEdits', 'bypassPermissions'];
}
if (provider === 'claude') {
return ['default', 'auto', 'acceptEdits', 'bypassPermissions', 'plan'];
}
if (provider === 'opencode') {
return ['default'];
}
return ['default', 'acceptEdits', 'bypassPermissions', 'plan'];
/**
* Fallback permission-mode matrix used only until the backend capability
* matrix (`GET /api/providers/capabilities`) has loaded. The backend is the
* source of truth; this mirror exists so the composer renders sensibly on
* first paint and when the capabilities request fails.
*/
const FALLBACK_PERMISSION_MODES: Record<LLMProvider, PermissionMode[]> = {
claude: ['default', 'auto', 'acceptEdits', 'bypassPermissions', 'plan'],
cursor: ['default', 'acceptEdits', 'bypassPermissions', 'plan'],
codex: ['default', 'acceptEdits', 'bypassPermissions'],
gemini: ['default', 'acceptEdits', 'bypassPermissions', 'plan'],
opencode: ['default'],
};
type ProviderCapabilities = {
provider: LLMProvider;
permissionModes: string[];
defaultPermissionMode: string;
supportsImages: boolean;
supportsAbort: boolean;
supportsPermissionRequests: boolean;
supportsTokenUsage: boolean;
};
type ProviderCapabilitiesApiResponse = {
success?: boolean;
data?: {
providers?: ProviderCapabilities[];
};
};
interface UseChatProviderStateArgs {
@@ -76,6 +94,17 @@ export function useChatProviderState({ selectedSession, selectedProject }: UseCh
return localStorage.getItem('opencode-model') || FALLBACK_DEFAULT_MODEL.opencode;
});
/**
* Backend-owned capability matrix keyed by provider. Drives the permission
* mode picker (and is the extension point for future per-provider UI
* differences) so the frontend stays free of hardcoded provider branching.
* Null until `/api/providers/capabilities` resolves; the static fallback
* map covers that window.
*/
const [providerCapabilities, setProviderCapabilities] = useState<
Partial<Record<LLMProvider, ProviderCapabilities>> | null
>(null);
const [providerModelCatalog, setProviderModelCatalog] = useState<
Partial<Record<LLMProvider, ProviderModelsDefinition>>
>({});
@@ -181,6 +210,41 @@ export function useChatProviderState({ selectedSession, selectedProject }: UseCh
void loadProviderModels();
}, [loadProviderModels]);
useEffect(() => {
let cancelled = false;
const loadCapabilities = async () => {
try {
const response = await authenticatedFetch('/api/providers/capabilities');
const body = (await response.json()) as ProviderCapabilitiesApiResponse;
if (cancelled || !body.success || !Array.isArray(body.data?.providers)) {
return;
}
const byProvider: Partial<Record<LLMProvider, ProviderCapabilities>> = {};
for (const capabilities of body.data.providers) {
byProvider[capabilities.provider] = capabilities;
}
setProviderCapabilities(byProvider);
} catch (error) {
console.error('Error loading provider capabilities:', error);
}
};
void loadCapabilities();
return () => {
cancelled = true;
};
}, []);
const getPermissionModesForProvider = useCallback((targetProvider: LLMProvider): PermissionMode[] => {
const capabilityModes = providerCapabilities?.[targetProvider]?.permissionModes;
if (capabilityModes && capabilityModes.length > 0) {
return capabilityModes as PermissionMode[];
}
return FALLBACK_PERMISSION_MODES[targetProvider] ?? ['default'];
}, [providerCapabilities]);
const pickStoredOrCurrent = (
storageKey: string,
current: string,
@@ -269,7 +333,7 @@ export function useChatProviderState({ selectedSession, selectedProject }: UseCh
const savedMode = localStorage.getItem(`permissionMode-${selectedSession.id}`) as PermissionMode | null;
const validModes = getPermissionModesForProvider(provider);
setPermissionMode(savedMode && validModes.includes(savedMode) ? savedMode : 'default');
}, [selectedSession?.id, provider]);
}, [selectedSession?.id, provider, getPermissionModesForProvider]);
useEffect(() => {
if (!selectedSession?.__provider || selectedSession.__provider === provider) {
@@ -327,7 +391,7 @@ export function useChatProviderState({ selectedSession, selectedProject }: UseCh
if (selectedSession?.id) {
localStorage.setItem(`permissionMode-${selectedSession.id}`, nextMode);
}
}, [permissionMode, provider, selectedSession?.id]);
}, [permissionMode, provider, selectedSession?.id, getPermissionModesForProvider]);
const selectProviderModel = useCallback(async (
targetProvider: LLMProvider,

469
src/components/chat/hooks/useChatRealtimeHandlers.ts
View File

@@ -1,67 +1,34 @@
import { useEffect, useRef } from 'react';
import { useEffect } from 'react';
import type { Dispatch, MutableRefObject, SetStateAction } from 'react';
import { usePaletteOps } from '../../../contexts/PaletteOpsContext';
import type { ServerEvent } from '../../../contexts/WebSocketContext';
import { showCompletionTitleIndicator } from '../../../utils/pageTitleNotification';
import { playChatCompletionSound } from '../../../utils/notificationSound';
import { PENDING_SESSION_ID } from '../../../hooks/useSessionProtection';
import type { MarkSessionIdle, MarkSessionProcessing } from '../../../hooks/useSessionProtection';
import type { PendingPermissionRequest, SessionNavigationOptions } from '../types/types';
import type { PendingPermissionRequest } from '../types/types';
import type { ProjectSession, LLMProvider } from '../../../types/app';
import type { SessionStore, NormalizedMessage } from '../../../stores/useSessionStore';
type LatestChatMessage = {
type?: string;
kind?: string;
data?: any;
message?: any;
delta?: string;
sessionId?: string;
session_id?: string;
requestId?: string;
toolName?: string;
input?: unknown;
context?: unknown;
error?: string;
tool?: any;
toolId?: string;
result?: any;
exitCode?: number;
isProcessing?: boolean;
actualSessionId?: string;
event?: string;
status?: any;
isNewSession?: boolean;
resultText?: string;
isError?: boolean;
success?: boolean;
reason?: string;
provider?: string;
content?: string;
text?: string;
tokens?: number;
canInterrupt?: boolean;
tokenBudget?: unknown;
newSessionId?: string;
aborted?: boolean;
[key: string]: any;
};
interface UseChatRealtimeHandlersArgs {
latestMessage: LatestChatMessage | null;
subscribe: (listener: (event: ServerEvent) => void) => () => void;
provider: LLMProvider;
selectedSession: ProjectSession | null;
currentSessionId: string | null;
setCurrentSessionId: (sessionId: string | null) => void;
setTokenBudget: (budget: Record<string, unknown> | null) => void;
setPendingPermissionRequests: Dispatch<SetStateAction<PendingPermissionRequest[]>>;
streamTimerRef: MutableRefObject<number | null>;
accumulatedStreamRef: MutableRefObject<string>;
/** When each session's `check-session-status` was last sent; guards stale idle replies. */
/**
* Highest live `seq` observed per session. Essential for reconnect catch-up:
* `chat.subscribe` sends this value as `lastSeq` so the server replays only
* the events this client actually missed. Written here on every sequenced
* frame; read wherever a `chat.subscribe` is sent (session open, reconnect).
*/
lastSeqRef: MutableRefObject<Map<string, number>>;
/** When each session's `chat.subscribe` was last sent; guards stale idle acks. */
statusCheckSentAtRef: MutableRefObject<Map<string, number>>;
onSessionProcessing?: MarkSessionProcessing;
onSessionIdle?: MarkSessionIdle;
onNavigateToSession?: (sessionId: string, options?: SessionNavigationOptions) => void;
onWebSocketReconnect?: () => void;
sessionStore: SessionStore;
}
@@ -70,293 +37,259 @@ interface UseChatRealtimeHandlersArgs {
/* Hook */
/* ------------------------------------------------------------------ */
/**
* Routes server events into the session store and processing-state map.
*
* This is intentionally a thin reducer over the unified `kind`-based
* protocol: every frame is keyed by the stable app session id, so there is
* no session-id handoff, no provider branching, and no navigation here.
* Sidebar events (`session_upserted`, `loading_progress`) are handled by
* `useProjectsState`, not in this hook.
*/
export function useChatRealtimeHandlers({
latestMessage,
subscribe,
provider,
selectedSession,
currentSessionId,
setCurrentSessionId,
setTokenBudget,
setPendingPermissionRequests,
streamTimerRef,
accumulatedStreamRef,
lastSeqRef,
statusCheckSentAtRef,
onSessionProcessing,
onSessionIdle,
onNavigateToSession,
onWebSocketReconnect,
sessionStore,
}: UseChatRealtimeHandlersArgs) {
const paletteOps = usePaletteOps();
const lastProcessedMessageRef = useRef<LatestChatMessage | null>(null);
useEffect(() => {
if (!latestMessage) return;
if (lastProcessedMessageRef.current === latestMessage) return;
lastProcessedMessageRef.current = latestMessage;
const handleEvent = (msg: ServerEvent) => {
if (!msg.kind) {
return;
}
const activeViewSessionId =
selectedSession?.id || currentSessionId || null;
const activeViewSessionId = selectedSession?.id || currentSessionId || null;
const sid = (typeof msg.sessionId === 'string' && msg.sessionId) || activeViewSessionId;
/* ---------------------------------------------------------------- */
/* Legacy messages (no `kind` field) — handle and return */
/* ---------------------------------------------------------------- */
// Record replay progress for every sequenced live event.
if (sid && typeof msg.seq === 'number') {
const known = lastSeqRef.current.get(sid) ?? 0;
if (msg.seq > known) {
lastSeqRef.current.set(sid, msg.seq);
}
}
const msg = latestMessage as any;
if (!msg.kind) {
const messageType = String(msg.type || '');
switch (messageType) {
case 'websocket-reconnected':
switch (msg.kind) {
case 'websocket_reconnected':
onWebSocketReconnect?.();
return;
case 'pending-permissions-response': {
const permSessionId = msg.sessionId;
const isCurrentPermSession =
permSessionId === currentSessionId || (selectedSession && permSessionId === selectedSession.id);
if (permSessionId && !isCurrentPermSession) return;
setPendingPermissionRequests(msg.data || []);
return;
}
case 'chat_subscribed': {
// Ack for chat.subscribe: authoritative processing state plus any
// pending tool-permission prompts for the run.
if (!sid) return;
case 'session-status': {
const statusSessionId = msg.sessionId;
if (!statusSessionId) return;
const status = msg.status;
if (status) {
onSessionProcessing?.(statusSessionId, {
statusText: status.text || null,
canInterrupt: status.can_interrupt !== false,
});
return;
}
// Reply to check-session-status (or unsolicited processing update)
if (msg.isProcessing) {
onSessionProcessing?.(statusSessionId);
return;
onSessionProcessing?.(sid);
} else {
// Idle ack: ignore it if a newer request started after the
// subscribe was sent — the ack describes the older state.
onSessionIdle?.(sid, {
ifStartedBefore: statusCheckSentAtRef.current.get(sid),
});
}
// Idle reply: ignore it if a newer request started after the check
// was sent — the reply describes the older request.
onSessionIdle?.(statusSessionId, {
ifStartedBefore: statusCheckSentAtRef.current.get(statusSessionId),
});
const isViewedSession = sid === activeViewSessionId;
if (isViewedSession && Array.isArray(msg.pendingPermissions)) {
setPendingPermissionRequests(msg.pendingPermissions as PendingPermissionRequest[]);
}
return;
}
case 'protocol_error': {
console.error('[Chat] Protocol error:', msg.code, msg.error);
if (sid) {
// Surface the failure in the conversation and stop the spinner —
// the run never started (or was rejected), so no `complete` follows.
onSessionIdle?.(sid);
sessionStore.appendRealtime(sid, {
id: `protocol_error_${Date.now()}`,
sessionId: sid,
timestamp: new Date().toISOString(),
provider,
kind: 'error',
content: String(msg.error || 'Request failed'),
} as NormalizedMessage);
}
return;
}
// Sidebar/global events — owned by useProjectsState.
case 'session_upserted':
case 'loading_progress':
return;
default:
// Unknown legacy message type — ignore
return;
break;
}
}
/* ---------------------------------------------------------------- */
/* NormalizedMessage handling (has `kind` field) */
/* ---------------------------------------------------------------- */
/* -------------------------------------------------------------- */
/* Provider NormalizedMessage handling */
/* -------------------------------------------------------------- */
const sid = msg.sessionId || activeViewSessionId;
// --- Streaming: buffer for performance ---
if (msg.kind === 'stream_delta') {
const text = msg.content || '';
if (!text) return;
accumulatedStreamRef.current += text;
if (!streamTimerRef.current) {
streamTimerRef.current = window.setTimeout(() => {
streamTimerRef.current = null;
if (sid) {
sessionStore.updateStreaming(sid, accumulatedStreamRef.current, provider);
}
}, 100);
}
// Also route to store for non-active sessions
if (sid && sid !== activeViewSessionId) {
sessionStore.appendRealtime(sid, msg as NormalizedMessage);
}
return;
}
if (msg.kind === 'stream_end') {
if (streamTimerRef.current) {
clearTimeout(streamTimerRef.current);
streamTimerRef.current = null;
}
if (sid) {
if (accumulatedStreamRef.current) {
sessionStore.updateStreaming(sid, accumulatedStreamRef.current, provider);
// --- Streaming: buffer for performance ---
if (msg.kind === 'stream_delta') {
const text = (msg.content as string) || '';
if (!text) return;
accumulatedStreamRef.current += text;
if (!streamTimerRef.current) {
streamTimerRef.current = window.setTimeout(() => {
streamTimerRef.current = null;
if (sid) {
sessionStore.updateStreaming(sid, accumulatedStreamRef.current, provider);
}
}, 100);
}
sessionStore.finalizeStreaming(sid);
}
accumulatedStreamRef.current = '';
return;
}
// --- All other messages: route to store ---
const shouldPersist =
msg.kind !== 'session_created'
&& msg.kind !== 'complete'
&& msg.kind !== 'status'
&& msg.kind !== 'permission_request'
&& msg.kind !== 'permission_cancelled';
if (sid && shouldPersist) {
sessionStore.appendRealtime(sid, msg as NormalizedMessage);
}
// --- UI side effects for specific kinds ---
switch (msg.kind) {
case 'session_created': {
const newSessionId = msg.newSessionId;
if (!newSessionId) break;
// We no longer synthesize client-side placeholder IDs. Until the provider
// announces `session_created`, the active id is expected to be null.
if (!currentSessionId) {
setCurrentSessionId(newSessionId);
setPendingPermissionRequests((prev) =>
prev.map((r) => (r.sessionId ? r : { ...r, sessionId: newSessionId })),
);
// Also route to store for non-active sessions
if (sid && sid !== activeViewSessionId) {
sessionStore.appendRealtime(sid, msg as unknown as NormalizedMessage);
}
// The in-flight request now has a concrete session id: migrate the
// processing entry from the pending placeholder.
onSessionIdle?.(PENDING_SESSION_ID);
onSessionProcessing?.(newSessionId);
onNavigateToSession?.(newSessionId);
break;
return;
}
case 'complete': {
// Flush any remaining streaming state
if (msg.kind === 'stream_end') {
if (streamTimerRef.current) {
clearTimeout(streamTimerRef.current);
streamTimerRef.current = null;
}
if (sid && accumulatedStreamRef.current) {
sessionStore.updateStreaming(sid, accumulatedStreamRef.current, provider);
if (sid) {
if (accumulatedStreamRef.current) {
sessionStore.updateStreaming(sid, accumulatedStreamRef.current, provider);
}
sessionStore.finalizeStreaming(sid);
}
accumulatedStreamRef.current = '';
return;
}
// `complete` is the unified terminal event — every provider run ends
// with exactly one, regardless of success, failure, or abort. The
// indicator derives from the processing map, so deleting the entry
// hides it immediately and atomically.
onSessionIdle?.(sid);
onSessionIdle?.(PENDING_SESSION_ID);
setPendingPermissionRequests([]);
// --- All other messages: route to store ---
const shouldPersist =
msg.kind !== 'complete'
&& msg.kind !== 'status'
&& msg.kind !== 'permission_request'
&& msg.kind !== 'permission_cancelled';
if (sid && shouldPersist) {
sessionStore.appendRealtime(sid, msg as unknown as NormalizedMessage);
}
// --- UI side effects for specific kinds ---
switch (msg.kind) {
case 'complete': {
// Flush any remaining streaming state
if (streamTimerRef.current) {
clearTimeout(streamTimerRef.current);
streamTimerRef.current = null;
}
if (sid && accumulatedStreamRef.current) {
sessionStore.updateStreaming(sid, accumulatedStreamRef.current, provider);
sessionStore.finalizeStreaming(sid);
}
accumulatedStreamRef.current = '';
// `complete` is the unified terminal event — every provider run ends
// with exactly one, regardless of success, failure, or abort. The
// indicator derives from the processing map, so deleting the entry
// hides it immediately and atomically.
onSessionIdle?.(sid);
setPendingPermissionRequests([]);
if (msg.aborted) {
// Abort was requested — the complete event confirms it. No
// further UI action is needed beyond clearing the entry above.
break;
}
// Celebrate only successful runs (failed runs end with success: false).
if (msg.success !== false) {
showCompletionTitleIndicator();
void playChatCompletionSound();
}
// The session id is stable for the whole conversation (allocated
// before the first send), so the only follow-up is syncing the
// viewed conversation with the now-persisted transcript.
if (sid && sid === activeViewSessionId) {
void sessionStore.refreshFromServer(sid);
}
// Handle aborted case
if (msg.aborted) {
// Abort was requested — the complete event confirms it
// No special UI action needed beyond clearing the processing entry above
// The backend already sent any abort-related messages
break;
}
// Celebrate only successful runs (failed runs end with success: false).
if (msg.success !== false) {
showCompletionTitleIndicator();
void playChatCompletionSound();
}
// 'error' is an informational message row, not a terminal event —
// providers emit it for mid-run stderr output too. Run teardown is
// always signalled by the unified 'complete' that follows.
const actualSessionId =
typeof msg.actualSessionId === 'string' && msg.actualSessionId.trim().length > 0
? msg.actualSessionId
: null;
const isVisibleSession =
Boolean(
sid
&& sid === activeViewSessionId,
);
if (actualSessionId && sid && actualSessionId !== sid) {
sessionStore.replaceSessionId(sid, actualSessionId);
onSessionIdle?.(actualSessionId);
if (isVisibleSession) {
setCurrentSessionId(actualSessionId);
void sessionStore.refreshFromServer(actualSessionId);
}
if (isVisibleSession) {
onNavigateToSession?.(actualSessionId, { replace: true });
setTimeout(() => { void paletteOps.refreshProjects(); }, 500);
}
break;
}
if (sid && isVisibleSession) {
void sessionStore.refreshFromServer(sid);
}
break;
}
// 'error' is an informational message row, not a terminal event —
// providers emit it for mid-run stderr output too. Run teardown is
// always signalled by the unified 'complete' that follows.
case 'permission_request': {
if (!msg.requestId) break;
setPendingPermissionRequests((prev) => {
if (prev.some((r: PendingPermissionRequest) => r.requestId === msg.requestId)) return prev;
return [...prev, {
requestId: msg.requestId,
toolName: msg.toolName || 'UnknownTool',
input: msg.input,
context: msg.context,
sessionId: sid || null,
receivedAt: new Date(),
}];
});
onSessionProcessing?.(sid || PENDING_SESSION_ID);
break;
}
case 'permission_cancelled': {
if (msg.requestId) {
setPendingPermissionRequests((prev) => prev.filter((r: PendingPermissionRequest) => r.requestId !== msg.requestId));
}
break;
}
case 'status': {
if (msg.text === 'token_budget' && msg.tokenBudget) {
setTokenBudget(msg.tokenBudget as Record<string, unknown>);
} else if (msg.text) {
onSessionProcessing?.(sid || PENDING_SESSION_ID, {
statusText: msg.text,
canInterrupt: msg.canInterrupt !== false,
case 'permission_request': {
if (!msg.requestId) break;
setPendingPermissionRequests((prev) => {
if (prev.some((r: PendingPermissionRequest) => r.requestId === msg.requestId)) return prev;
return [...prev, {
requestId: msg.requestId as string,
toolName: (msg.toolName as string) || 'UnknownTool',
input: msg.input,
context: msg.context,
sessionId: sid || null,
receivedAt: new Date(),
}];
});
if (sid) {
onSessionProcessing?.(sid);
}
break;
}
break;
}
// text, tool_use, tool_result, thinking, interactive_prompt, task_notification
// → already routed to store above, no UI side effects needed
default:
break;
}
case 'permission_cancelled': {
if (msg.requestId) {
setPendingPermissionRequests((prev) => prev.filter((r: PendingPermissionRequest) => r.requestId !== msg.requestId));
}
break;
}
case 'status': {
if (msg.text === 'token_budget' && msg.tokenBudget) {
setTokenBudget(msg.tokenBudget as Record<string, unknown>);
} else if (msg.text && sid) {
onSessionProcessing?.(sid, {
statusText: msg.text as string,
canInterrupt: msg.canInterrupt !== false,
});
}
break;
}
// text, tool_use, tool_result, thinking, interactive_prompt, task_notification
// → already routed to store above, no UI side effects needed
default:
break;
}
};
return subscribe(handleEvent);
}, [
latestMessage,
subscribe,
provider,
selectedSession,
currentSessionId,
setCurrentSessionId,
setTokenBudget,
setPendingPermissionRequests,
streamTimerRef,
accumulatedStreamRef,
lastSeqRef,
statusCheckSentAtRef,
onSessionProcessing,
onSessionIdle,
onNavigateToSession,
onWebSocketReconnect,
sessionStore,
paletteOps,
]);
}

41
src/components/chat/hooks/useChatSessionState.ts
View File

@@ -2,7 +2,6 @@ import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } fr
import type { MutableRefObject } from 'react';
import { authenticatedFetch } from '../../../utils/api';
import { PENDING_SESSION_ID } from '../../../hooks/useSessionProtection';
import type { MarkSessionIdle, SessionActivityMap } from '../../../hooks/useSessionProtection';
import type { Project, ProjectSession, LLMProvider } from '../../../types/app';
import type { SessionStore, NormalizedMessage } from '../../../stores/useSessionStore';
@@ -25,8 +24,10 @@ interface UseChatSessionStateArgs {
processingSessions?: SessionActivityMap;
onSessionIdle?: MarkSessionIdle;
resetStreamingState: () => void;
/** When each session's `check-session-status` was last sent; guards stale idle replies. */
/** When each session's `chat.subscribe` was last sent; guards stale idle acks. */
statusCheckSentAtRef: MutableRefObject<Map<string, number>>;
/** Highest live seq observed per session; sent as `lastSeq` on subscribe. */
lastSeqRef: MutableRefObject<Map<string, number>>;
sessionStore: SessionStore;
}
@@ -102,6 +103,7 @@ export function useChatSessionState({
onSessionIdle,
resetStreamingState,
statusCheckSentAtRef,
lastSeqRef,
sessionStore,
}: UseChatSessionStateArgs) {
const [currentSessionId, setCurrentSessionId] = useState<string | null>(selectedSession?.id || null);
@@ -168,10 +170,8 @@ export function useChatSessionState({
* - No coupling to unrelated external update signals.
*/
resetStreamingState();
onSessionIdle?.(PENDING_SESSION_ID);
setCurrentSessionId(null);
setPendingUserMessage(null);
sessionStorage.removeItem('cursorSessionId');
messagesOffsetRef.current = 0;
setHasMoreMessages(false);
setTotalMessages(0);
@@ -208,9 +208,10 @@ export function useChatSessionState({
const activeSessionId = selectedSession?.id || currentSessionId || null;
// The activity indicator always reflects the latest status of the session
// being viewed (or of the pending not-yet-created session on a fresh
// draft) — never stale local UI state from the last time it was open.
const sessionActivity = processingSessions?.get(activeSessionId ?? PENDING_SESSION_ID) ?? null;
// being viewed — never stale local UI state from the last time it was
// open. Session ids are concrete before any send, so no pending
// placeholder entry exists anymore.
const sessionActivity = (activeSessionId && processingSessions?.get(activeSessionId)) || null;
const isProcessing = sessionActivity !== null;
const canAbortSession = isProcessing && sessionActivity.canInterrupt;
@@ -440,15 +441,15 @@ export function useChatSessionState({
// Main session loading effect — store-based
useEffect(() => {
if (!selectedSession || !selectedProject) {
// A new provider run can be in flight before the router has a canonical
// selectedSession. Keep the draft view intact until complete/error.
if (processingSessionsRef.current?.has(PENDING_SESSION_ID)) {
// A freshly created session can be mid-run before the router has a
// canonical selectedSession (the URL effect synthesizes one on the
// next render). Keep the active view intact instead of wiping it.
if (currentSessionId && processingSessionsRef.current?.has(currentSessionId)) {
return;
}
resetStreamingState();
setCurrentSessionId(null);
sessionStorage.removeItem('cursorSessionId');
messagesOffsetRef.current = 0;
setHasMoreMessages(false);
setTotalMessages(0);
@@ -489,16 +490,21 @@ export function useChatSessionState({
}
setCurrentSessionId(selectedSession.id);
if (provider === 'cursor') {
sessionStorage.setItem('cursorSessionId', selectedSession.id);
}
// Reconcile processing state with the server. Recording the send time
// lets the reply handler discard idle replies that a newer request has
// Subscribe to the session's live run (if any): the ack reconciles the
// processing indicator, re-attaches a mid-flight stream to this socket,
// and replays any live events missed since `lastSeq`. Recording the send
// time lets the ack handler discard idle acks that a newer request has
// since outdated.
if (ws) {
statusCheckSentAtRef.current.set(selectedSession.id, Date.now());
sendMessage({ type: 'check-session-status', sessionId: selectedSession.id, provider });
sendMessage({
type: 'chat.subscribe',
sessions: [{
sessionId: selectedSession.id,
lastSeq: lastSeqRef.current.get(selectedSession.id) ?? 0,
}],
});
}
lastLoadedSessionKeyRef.current = sessionKey;
@@ -527,6 +533,7 @@ export function useChatSessionState({
selectedSession?.id,
sendMessage,
statusCheckSentAtRef,
lastSeqRef,
ws,
sessionStore,
]);

1
src/components/chat/types/types.ts
View File

@@ -112,7 +112,6 @@ export interface ChatInterfaceProps {
selectedSession: ProjectSession | null;
ws: WebSocket | null;
sendMessage: (message: unknown) => void;
latestMessage: any;
onFileOpen?: (filePath: string, diffInfo?: any) => void;
onInputFocusChange?: (focused: boolean) => void;
onSessionProcessing?: MarkSessionProcessing;

40
src/components/chat/view/ChatInterface.tsx
View File

@@ -2,6 +2,7 @@ import React, { useCallback, useEffect, useMemo, useRef } from 'react';
import { useTranslation } from 'react-i18next';
import { useTasksSettings } from '../../../contexts/TasksSettingsContext';
import { useWebSocket } from '../../../contexts/WebSocketContext';
import PermissionContext from '../../../contexts/PermissionContext';
import { QuickSettingsPanel } from '../../quick-settings-panel';
import type { ChatInterfaceProps, Provider } from '../types/types';
@@ -22,7 +23,6 @@ function ChatInterface({
selectedSession,
ws,
sendMessage,
latestMessage,
onFileOpen,
onInputFocusChange,
onSessionProcessing,
@@ -40,14 +40,19 @@ function ChatInterface({
onShowAllTasks,
}: ChatInterfaceProps) {
const { tasksEnabled, isTaskMasterInstalled } = useTasksSettings();
const { subscribe } = useWebSocket();
const { t } = useTranslation('chat');
const sessionStore = useSessionStore();
const streamTimerRef = useRef<number | null>(null);
const accumulatedStreamRef = useRef('');
// When each session's `check-session-status` was last sent; idle replies
// older than a later local request are discarded as stale.
// When each session's `chat.subscribe` was last sent; idle acks older than
// a later local request are discarded as stale.
const statusCheckSentAtRef = useRef(new Map<string, number>());
// Highest live `seq` observed per session. Written by the realtime handler
// on every sequenced frame, read whenever a `chat.subscribe` is sent so the
// server replays only the events this client actually missed.
const lastSeqRef = useRef(new Map<string, number>());
const resetStreamingState = useCallback(() => {
if (streamTimerRef.current) {
@@ -126,9 +131,18 @@ function ChatInterface({
onSessionIdle,
resetStreamingState,
statusCheckSentAtRef,
lastSeqRef,
sessionStore,
});
// Brand-new conversation: the composer allocated a stable session id via
// the session gateway before the first send. Record it locally and put it
// in the URL — this id never changes again, so there is no later handoff.
const handleSessionEstablished = useCallback((sessionId: string) => {
setCurrentSessionId(sessionId);
onNavigateToSession?.(sessionId);
}, [setCurrentSessionId, onNavigateToSession]);
const {
input,
setInput,
@@ -191,6 +205,7 @@ function ChatInterface({
sendMessage,
sendByCtrlEnter,
onSessionProcessing,
onSessionEstablished: handleSessionEstablished,
onInputFocusChange,
onFileOpen,
onShowSettings,
@@ -201,9 +216,9 @@ function ChatInterface({
});
// On WebSocket reconnect, re-fetch the current session's messages from the
// server so missed streaming events are shown, then re-check the session's
// processing status — the authoritative reply restores or clears the
// activity indicator depending on whether the run is still active.
// server so missed streaming events are shown, then re-subscribe — the
// `chat_subscribed` ack restores or clears the activity indicator, replays
// missed live events, and re-attaches a still-running stream to this socket.
const handleWebSocketReconnect = useCallback(async () => {
if (!selectedProject || !selectedSession) return;
const providerVal =
@@ -217,23 +232,28 @@ function ChatInterface({
projectPath: selectedProject.fullPath || selectedProject.path || '',
});
statusCheckSentAtRef.current.set(selectedSession.id, Date.now());
sendMessage({ type: 'check-session-status', sessionId: selectedSession.id, provider: providerVal });
sendMessage({
type: 'chat.subscribe',
sessions: [{
sessionId: selectedSession.id,
lastSeq: lastSeqRef.current.get(selectedSession.id) ?? 0,
}],
});
}, [selectedProject, selectedSession, sendMessage, sessionStore]);
useChatRealtimeHandlers({
latestMessage,
subscribe,
provider,
selectedSession,
currentSessionId,
setCurrentSessionId,
setTokenBudget,
setPendingPermissionRequests,
streamTimerRef,
accumulatedStreamRef,
lastSeqRef,
statusCheckSentAtRef,
onSessionProcessing,
onSessionIdle,
onNavigateToSession,
onWebSocketReconnect: handleWebSocketReconnect,
sessionStore,
});

1
src/components/main-content/types/types.ts
View File

@@ -44,7 +44,6 @@ export type MainContentProps = {
setActiveTab: Dispatch<SetStateAction<AppTab>>;
ws: WebSocket | null;
sendMessage: (message: unknown) => void;
latestMessage: unknown;
isMobile: boolean;
onMenuClick: () => void;
isLoading: boolean;

2
src/components/main-content/view/MainContent.tsx
View File

@@ -37,7 +37,6 @@ function MainContent({
setActiveTab,
ws,
sendMessage,
latestMessage,
isMobile,
onMenuClick,
isLoading,
@@ -126,7 +125,6 @@ function MainContent({
selectedSession={selectedSession}
ws={ws}
sendMessage={sendMessage}
latestMessage={latestMessage}
onFileOpen={handleFileOpen}
onInputFocusChange={onInputFocusChange}
onSessionProcessing={onSessionProcessing}