fix: Fixed generating indictator not keeping time correctly (#588)

Author: charlesvien

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

@@ -52,6 +52,7 @@ type ConversationItem = Turn | UserShellExecute;
 interface ConversationViewProps {
   events: AcpMessage[];
   isPromptPending: boolean;
+  promptStartedAt?: number | null;
   repoPath?: string | null;
   isCloud?: boolean;
   taskId?: string;
@@ -63,6 +64,7 @@ const SHOW_BUTTON_THRESHOLD = 300;
 export function ConversationView({
   events,
   isPromptPending,
+  promptStartedAt,
   repoPath,
   isCloud = false,
   taskId,
@@ -141,6 +143,7 @@ export function ConversationView({
         </div>
         <SessionFooter
           isPromptPending={isPromptPending}
+          promptStartedAt={promptStartedAt}
           lastGenerationDuration={
             lastTurn?.isComplete ? lastTurn.durationMs : null
           }

apps/twig/src/renderer/features/sessions/components/GeneratingIndicator.tsx

@@ -16,18 +16,22 @@ export function formatDuration(ms: number): string {
   return `${secs}.${centiseconds.toString().padStart(2, "0")}s`;
 }
 
-export function GeneratingIndicator() {
+interface GeneratingIndicatorProps {
+  startedAt?: number | null;
+}
+
+export function GeneratingIndicator({ startedAt }: GeneratingIndicatorProps) {
   const [elapsed, setElapsed] = useState(0);
   const [activityIndex, setActivityIndex] = useState(0);
 
   useEffect(() => {
-    const startTime = Date.now();
+    const startTime = startedAt ?? Date.now();
     const interval = setInterval(() => {
       setElapsed(Date.now() - startTime);
     }, 50);
 
     return () => clearInterval(interval);
-  }, []);
+  }, [startedAt]);
 
   useEffect(() => {
     const interval = setInterval(() => {

apps/twig/src/renderer/features/sessions/components/SessionFooter.tsx

@@ -4,19 +4,21 @@ import { formatDuration, GeneratingIndicator } from "./GeneratingIndicator";
 
 interface SessionFooterProps {
   isPromptPending: boolean;
+  promptStartedAt?: number | null;
   lastGenerationDuration: number | null;
   lastStopReason?: string;
 }
 
 export function SessionFooter({
   isPromptPending,
+  promptStartedAt,
   lastGenerationDuration,
   lastStopReason,
 }: SessionFooterProps) {
   if (isPromptPending) {
     return (
       <Box className="pt-3 pb-1">
-        <GeneratingIndicator />
+        <GeneratingIndicator startedAt={promptStartedAt} />
       </Box>
     );
   }

apps/twig/src/renderer/features/sessions/components/SessionView.tsx

@@ -42,6 +42,7 @@ interface SessionViewProps {
   taskId?: string;
   isRunning: boolean;
   isPromptPending?: boolean;
+  promptStartedAt?: number | null;
   onSendPrompt: (text: string) => void;
   onBashCommand?: (command: string) => void;
   onCancelPrompt: () => void;
@@ -61,6 +62,7 @@ export function SessionView({
   taskId,
   isRunning,
   isPromptPending = false,
+  promptStartedAt,
   onSendPrompt,
   onBashCommand,
   onCancelPrompt,
@@ -301,6 +303,7 @@ export function SessionView({
             <ConversationView
               events={events}
               isPromptPending={isPromptPending}
+              promptStartedAt={promptStartedAt}
               repoPath={repoPath}
               isCloud={isCloud}
               taskId={taskId}

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

@@ -49,6 +49,7 @@ export interface AgentSession {
   status: "connecting" | "connected" | "disconnected" | "error";
   errorMessage?: string;
   isPromptPending: boolean;
+  promptStartedAt: number | null;
   isCloud: boolean;
   logUrl?: string;
   processedLineCount?: number;
@@ -133,9 +134,11 @@ function subscribeToChannel(taskRunId: string) {
             session.events.push(payload as AcpMessage);
 
             // Track isPromptPending from ACP events (handles backend-initiated prompts)
-            const msg = (payload as AcpMessage).message;
+            const acpMsg = payload as AcpMessage;
+            const msg = acpMsg.message;
             if (isJsonRpcRequest(msg) && msg.method === "session/prompt") {
               session.isPromptPending = true;
+              session.promptStartedAt = acpMsg.ts;
             }
             if (
               "id" in msg &&
@@ -146,6 +149,7 @@ function subscribeToChannel(taskRunId: string) {
             ) {
               // This is a prompt response
               session.isPromptPending = false;
+              session.promptStartedAt = null;
             }
 
             // Handle session/update notifications
@@ -462,6 +466,7 @@ function createBaseSession(
     startedAt: Date.now(),
     status: "connecting",
     isPromptPending: false,
+    promptStartedAt: null,
     isCloud,
     currentMode: executionMode ?? "default",
     pendingPermissions: new Map(),
@@ -772,15 +777,21 @@ const useStore = create<SessionStore>()(
       session: AgentSession,
       blocks: ContentBlock[],
     ): Promise<{ stopReason: string }> => {
-      updateSession(session.taskRunId, { isPromptPending: true });
+      updateSession(session.taskRunId, {
+        isPromptPending: true,
+        promptStartedAt: Date.now(),
+      });
 
       try {
         return await trpcVanilla.agent.prompt.mutate({
           sessionId: session.taskRunId,
           prompt: blocks,
         });
       } finally {
-        updateSession(session.taskRunId, { isPromptPending: false });
+        updateSession(session.taskRunId, {
+          isPromptPending: false,
+          promptStartedAt: null,
+        });
       }
     };
 

apps/twig/src/renderer/features/task-detail/components/TaskLogsPanel.tsx

@@ -47,6 +47,7 @@ export function TaskLogsPanel({ taskId, task }: TaskLogsPanelProps) {
 
   const events = session?.events ?? [];
   const isPromptPending = session?.isPromptPending ?? false;
+  const promptStartedAt = session?.promptStartedAt;
 
   const isConnecting = useRef(false);
 
@@ -177,6 +178,7 @@ export function TaskLogsPanel({ taskId, task }: TaskLogsPanelProps) {
             taskId={taskId}
             isRunning={isRunning}
             isPromptPending={isPromptPending}
+            promptStartedAt={promptStartedAt}
             onSendPrompt={handleSendPrompt}
             onBashCommand={handleBashCommand}
             onCancelPrompt={handleCancelPrompt}