feat: Optimistically render conversation items before subscription confirms (#1209)

Adds a generic optimisticItems mechanism to the session store so any conversation item type can be displayed immediately before the real event arrives from the main process. Currently used for user messages, but the OptimisticItem union is designed to be extended for future use cases.

1. Add OptimisticItem type and optimisticItems array to AgentSession store
2. Append an optimistic user message when a prompt is sent, before the server round-trip
3. Clear optimistic items when the real session/prompt event arrives or on error
4. Merge optimistic items into the conversation view between confirmed items and queued messages
5. Add useOptimisticItemsForTask hook and store setters (appendOptimisticItem, clearOptimisticItems, appendEventAndClearOptimisticItems)

Author: charlesvien

apps/code/src/renderer/features/sessions/components/ConversationView.tsx

@@ -1,5 +1,6 @@
 import {
   sessionStoreSetters,
+  useOptimisticItemsForTask,
   usePendingPermissionsForTask,
   useQueuedMessagesForTask,
 } from "@features/sessions/stores/sessionStore";
@@ -68,6 +69,7 @@ export function ConversationView({
   const pendingPermissions = usePendingPermissionsForTask(taskId ?? "");
   const pendingPermissionsCount = pendingPermissions.size;
   const queuedMessages = useQueuedMessagesForTask(taskId);
+  const optimisticItems = useOptimisticItemsForTask(taskId);
 
   const queuedItems = useMemo<Extract<ConversationItem, { type: "queued" }>[]>(
     () =>
@@ -79,13 +81,13 @@ export function ConversationView({
     [queuedMessages],
   );
 
-  const items = useMemo<ConversationItem[]>(
-    () =>
-      queuedItems.length > 0
-        ? [...conversationItems, ...queuedItems]
-        : conversationItems,
-    [conversationItems, queuedItems],
-  );
+  const items = useMemo<ConversationItem[]>(() => {
+    const result: ConversationItem[] = [
+      ...conversationItems,
+      ...optimisticItems,
+    ];
+    return queuedItems.length > 0 ? [...result, ...queuedItems] : result;
+  }, [conversationItems, optimisticItems, queuedItems]);
 
   const handleScrollStateChange = useCallback((isAtBottom: boolean) => {
     setShowScrollButton(!isAtBottom);

apps/code/src/renderer/features/sessions/hooks/useSession.ts

@@ -10,6 +10,7 @@ import {
   type Adapter,
   type AgentSession,
   getConfigOptionByCategory,
+  type OptimisticItem,
   type QueuedMessage,
   useSessionStore,
 } from "../stores/sessionStore";
@@ -98,6 +99,17 @@ export const useQueuedMessagesForTask = (
   });
 };
 
+export const useOptimisticItemsForTask = (
+  taskId: string | undefined,
+): OptimisticItem[] => {
+  return useSessionStore((s) => {
+    if (!taskId) return [];
+    const taskRunId = s.taskIdIndex[taskId];
+    if (!taskRunId) return [];
+    return s.sessions[taskRunId]?.optimisticItems ?? [];
+  });
+};
+
 // --- Config Option Hooks ---
 
 /** Get a config option by category for a task */

apps/code/src/renderer/features/sessions/service/service.test.ts

@@ -50,6 +50,9 @@ const mockSessionStoreSetters = vi.hoisted(() => ({
   getSessionByTaskId: vi.fn(),
   getSessions: vi.fn(() => ({})),
   clearAll: vi.fn(),
+  appendOptimisticItem: vi.fn(),
+  clearOptimisticItems: vi.fn(),
+  replaceOptimisticWithEvent: vi.fn(),
 }));
 
 vi.mock("@features/sessions/stores/sessionStore", () => ({
@@ -205,6 +208,7 @@ const createMockSession = (
   promptStartedAt: null,
   pendingPermissions: new Map(),
   messageQueue: [],
+  optimisticItems: [],
   ...overrides,
 });
 

apps/code/src/renderer/features/sessions/service/service.ts

@@ -819,7 +819,15 @@ export class SessionService {
     const session = sessionStoreSetters.getSessions()[taskRunId];
     if (!session) return;
 
-    sessionStoreSetters.appendEvents(taskRunId, [acpMsg]);
+    const isUserPromptEcho =
+      isJsonRpcRequest(acpMsg.message) &&
+      acpMsg.message.method === "session/prompt";
+
+    if (isUserPromptEcho) {
+      sessionStoreSetters.replaceOptimisticWithEvent(taskRunId, acpMsg);
+    } else {
+      sessionStoreSetters.appendEvents(taskRunId, [acpMsg]);
+    }
     this.updatePromptStateFromEvents(taskRunId, [acpMsg]);
 
     const msg = acpMsg.message;
@@ -997,7 +1005,7 @@ export class SessionService {
       prompt_length_chars: promptText.length,
     });
 
-    return this.sendLocalPrompt(session, blocks);
+    return this.sendLocalPrompt(session, blocks, promptText);
   }
 
   /**
@@ -1044,7 +1052,7 @@ export class SessionService {
     });
 
     try {
-      return await this.sendLocalPrompt(session, blocks);
+      return await this.sendLocalPrompt(session, blocks, combinedText);
     } catch (error) {
       // Log that queued messages were lost due to send failure
       log.error("Failed to send queued messages, messages lost", {
@@ -1059,18 +1067,24 @@ export class SessionService {
   private async sendLocalPrompt(
     session: AgentSession,
     blocks: ContentBlock[],
+    promptText: string,
   ): Promise<{ stopReason: string }> {
     sessionStoreSetters.updateSession(session.taskRunId, {
       isPromptPending: true,
       promptStartedAt: Date.now(),
     });
 
+    sessionStoreSetters.appendOptimisticItem(session.taskRunId, {
+      type: "user_message",
+      content: promptText,
+      timestamp: Date.now(),
+    });
+
     try {
       const result = await trpcClient.agent.prompt.mutate({
         sessionId: session.taskRunId,
         prompt: blocks,
       });
-      // Clear pending state on success
       sessionStoreSetters.updateSession(session.taskRunId, {
         isPromptPending: false,
         promptStartedAt: null,
@@ -1082,6 +1096,8 @@ export class SessionService {
       const errorDetails = (error as { data?: { details?: string } }).data
         ?.details;
 
+      sessionStoreSetters.clearOptimisticItems(session.taskRunId);
+
       if (isFatalSessionError(errorMessage, errorDetails)) {
         log.error("Fatal prompt error, setting session to error state", {
           taskRunId: session.taskRunId,
@@ -2144,6 +2160,7 @@ export class SessionService {
       promptStartedAt: null,
       pendingPermissions: new Map(),
       messageQueue: [],
+      optimisticItems: [],
     };
   }
 

apps/code/src/renderer/features/sessions/stores/sessionStore.ts

@@ -28,6 +28,13 @@ export type TaskRunStatus =
   | "failed"
   | "cancelled";
 
+export type OptimisticItem = {
+  type: "user_message";
+  id: string;
+  content: string;
+  timestamp: number;
+};
+
 export interface AgentSession {
   taskRunId: string;
   taskId: string;
@@ -63,6 +70,7 @@ export interface AgentSession {
   cloudBranch?: string | null;
   /** Number of session/prompt events to skip from polled logs (set during resume) */
   skipPolledPromptCount?: number;
+  optimisticItems: OptimisticItem[];
 }
 
 // --- Config Option Helpers ---
@@ -191,6 +199,7 @@ export {
   useConfigOptionForTask,
   useModeConfigOptionForTask,
   useModelConfigOptionForTask,
+  useOptimisticItemsForTask,
   usePendingPermissionsForTask,
   useQueuedMessagesForTask,
   useSessionForTask,
@@ -334,6 +343,38 @@ export const sessionStoreSetters = {
     return result;
   },
 
+  appendOptimisticItem: (
+    taskRunId: string,
+    item: Omit<OptimisticItem, "id">,
+  ): void => {
+    const id = `optimistic-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
+    useSessionStore.setState((state) => {
+      const session = state.sessions[taskRunId];
+      if (session) {
+        session.optimisticItems.push({ ...item, id });
+      }
+    });
+  },
+
+  clearOptimisticItems: (taskRunId: string): void => {
+    useSessionStore.setState((state) => {
+      const session = state.sessions[taskRunId];
+      if (session) {
+        session.optimisticItems = [];
+      }
+    });
+  },
+
+  replaceOptimisticWithEvent: (taskRunId: string, event: AcpMessage): void => {
+    useSessionStore.setState((state) => {
+      const session = state.sessions[taskRunId];
+      if (session) {
+        session.events.push(event);
+        session.optimisticItems = [];
+      }
+    });
+  },
+
   /** O(1) lookup using taskIdIndex */
   getSessionByTaskId: (taskId: string): AgentSession | undefined => {
     const state = useSessionStore.getState();