fix(desktop): preserve generation elapsed time

Author: hqhq1025

apps/desktop/src/main/generation-ipc.test.ts

@@ -125,7 +125,7 @@ describe('withInFlightGenerationForDesign', () => {
     const controller = new AbortController();
     const otherController = new AbortController();
     const inFlight = new Map<string, AbortController>();
-    const inFlightByDesign = new Map<string, string>();
+    const inFlightByDesign = new Map<string, { generationId: string; startedAt: number }>();
     let releaseFirst!: () => void;
     const firstDone = new Promise<void>((resolve) => {
       releaseFirst = resolve;
@@ -143,7 +143,7 @@ describe('withInFlightGenerationForDesign', () => {
       },
     );
 
-    await vi.waitFor(() => expect(inFlightByDesign.get('design-1')).toBe('gen-1'));
+    await vi.waitFor(() => expect(inFlightByDesign.get('design-1')?.generationId).toBe('gen-1'));
     await expect(
       withInFlightGenerationForDesign(
         'gen-2',
@@ -167,7 +167,7 @@ describe('withInFlightGenerationForDesign', () => {
 
   it('allows different designs to run concurrently', async () => {
     const inFlight = new Map<string, AbortController>();
-    const inFlightByDesign = new Map<string, string>();
+    const inFlightByDesign = new Map<string, { generationId: string; startedAt: number }>();
     const firstController = new AbortController();
     const secondController = new AbortController();
 
@@ -196,7 +196,7 @@ describe('withInFlightGenerationForDesign', () => {
   it('clears the design lock when cancellation removes the generation', async () => {
     const controller = makeController();
     const inFlight = new Map([['gen-1', controller]]);
-    const inFlightByDesign = new Map([['design-1', 'gen-1']]);
+    const inFlightByDesign = new Map([['design-1', { generationId: 'gen-1', startedAt: 1234 }]]);
     const logIpc = { info: vi.fn() };
 
     cancelGenerationRequest('gen-1', inFlight, logIpc, inFlightByDesign);
@@ -207,15 +207,15 @@ describe('withInFlightGenerationForDesign', () => {
 });
 
 describe('listInFlightGenerations', () => {
-  it('returns design/generation pairs from the main-process in-flight registry', () => {
+  it('returns design/generation start times from the main-process in-flight registry', () => {
     const inFlightByDesign = new Map([
-      ['design-b', 'gen-b'],
-      ['design-a', 'gen-a'],
+      ['design-b', { generationId: 'gen-b', startedAt: 2000 }],
+      ['design-a', { generationId: 'gen-a', startedAt: 1000 }],
     ]);
 
     expect(listInFlightGenerations(inFlightByDesign)).toEqual([
-      { designId: 'design-a', generationId: 'gen-a' },
-      { designId: 'design-b', generationId: 'gen-b' },
+      { designId: 'design-a', generationId: 'gen-a', startedAt: 1000 },
+      { designId: 'design-b', generationId: 'gen-b', startedAt: 2000 },
     ]);
   });
 });

apps/desktop/src/main/generation-ipc.ts

@@ -4,11 +4,16 @@ export interface CancellationLogger {
   info: (event: string, payload: { id: string }) => void;
 }
 
+export interface InFlightGeneration {
+  generationId: string;
+  startedAt: number;
+}
+
 export function cancelGenerationRequest(
   raw: unknown,
   inFlight: Map<string, AbortController>,
   logIpc: CancellationLogger,
-  inFlightByDesign?: Map<string, string>,
+  inFlightByDesign?: Map<string, InFlightGeneration>,
 ): void {
   if (typeof raw !== 'string') {
     throw new CodesignError(
@@ -23,8 +28,8 @@ export function cancelGenerationRequest(
   controller.abort();
   inFlight.delete(raw);
   if (inFlightByDesign !== undefined) {
-    for (const [designId, generationId] of inFlightByDesign) {
-      if (generationId === raw) inFlightByDesign.delete(designId);
+    for (const [designId, generation] of inFlightByDesign) {
+      if (generation.generationId === raw) inFlightByDesign.delete(designId);
     }
   }
   logIpc.info('generate.cancelled', { id: raw });
@@ -50,32 +55,33 @@ export async function withInFlightGenerationForDesign<T>(
   id: string,
   designId: string,
   inFlight: Map<string, AbortController>,
-  inFlightByDesign: Map<string, string>,
+  inFlightByDesign: Map<string, InFlightGeneration>,
   controller: AbortController,
   run: () => Promise<T>,
 ): Promise<T> {
   const existing = inFlightByDesign.get(designId);
-  if (existing !== undefined && existing !== id) {
+  if (existing !== undefined && existing.generationId !== id) {
     throw new CodesignError(
       'A generation is already running for this design. Wait for it to finish or stop it before continuing.',
       'GENERATION_ALREADY_RUNNING',
     );
   }
-  inFlightByDesign.set(designId, id);
+  const startedAt = existing?.startedAt ?? Date.now();
+  inFlightByDesign.set(designId, { generationId: id, startedAt });
   try {
     return await withInFlightGeneration(id, inFlight, controller, run);
   } finally {
-    if (inFlightByDesign.get(designId) === id) {
+    if (inFlightByDesign.get(designId)?.generationId === id) {
       inFlightByDesign.delete(designId);
     }
   }
 }
 
 export function listInFlightGenerations(
-  inFlightByDesign: ReadonlyMap<string, string>,
-): Array<{ designId: string; generationId: string }> {
+  inFlightByDesign: ReadonlyMap<string, InFlightGeneration>,
+): Array<{ designId: string; generationId: string; startedAt: number }> {
   return [...inFlightByDesign.entries()]
-    .map(([designId, generationId]) => ({ designId, generationId }))
+    .map(([designId, generation]) => ({ designId, ...generation }))
     .sort((a, b) => a.designId.localeCompare(b.designId));
 }
 

apps/desktop/src/main/ipc/generate.ts

@@ -469,7 +469,7 @@ export function registerGenerateIpc({ db, getMainWindow }: RegisterGenerateIpcDe
 
   /** In-flight requests: generationId → AbortController */
   const inFlight = new Map<string, AbortController>();
-  const inFlightByDesign = new Map<string, string>();
+  const inFlightByDesign = new Map<string, { generationId: string; startedAt: number }>();
 
   const armTimeout = (id: string, controller: AbortController) =>
     armGenerationTimeout(

apps/desktop/src/preload/index.ts

@@ -263,7 +263,7 @@ export interface AgentStreamEvent {
 
 export interface GenerationStatusResult {
   schemaVersion: 1;
-  running: Array<{ designId: string; generationId: string }>;
+  running: Array<{ designId: string; generationId: string; startedAt: number }>;
 }
 
 /**

apps/desktop/src/renderer/src/components/Sidebar.test.ts

@@ -1,5 +1,10 @@
 import { afterEach, describe, expect, it, vi } from 'vitest';
-import { getTextareaLineHeight, shouldSubmitPromptKey } from './chat/PromptInput';
+import {
+  elapsedSecondsSince,
+  formatElapsedSeconds,
+  getTextareaLineHeight,
+  shouldSubmitPromptKey,
+} from './chat/PromptInput';
 
 afterEach(() => {
   vi.unstubAllGlobals();
@@ -66,3 +71,15 @@ describe('shouldSubmitPromptKey', () => {
     expect(shouldSubmitPromptKey({ key: 'Enter' }, true)).toBe(false);
   });
 });
+
+describe('elapsed generation timer helpers', () => {
+  it('derives elapsed seconds from the generation start timestamp', () => {
+    expect(elapsedSecondsSince(10_000, 35_400)).toBe(25);
+    expect(elapsedSecondsSince(10_000, 9_000)).toBe(0);
+  });
+
+  it('formats elapsed seconds as seconds first and mm:ss after a minute', () => {
+    expect(formatElapsedSeconds(25)).toBe('25s');
+    expect(formatElapsedSeconds(65)).toBe('1:05');
+  });
+});

apps/desktop/src/renderer/src/components/chat/PromptInput.tsx

@@ -64,6 +64,20 @@ export function getTextareaLineHeight(el: HTMLTextAreaElement): number {
   return fontSize * leading;
 }
 
+export function elapsedSecondsSince(
+  startedAt: number | null | undefined,
+  now = Date.now(),
+): number {
+  if (startedAt === null || startedAt === undefined) return 0;
+  return Math.max(0, Math.floor((now - startedAt) / 1000));
+}
+
+export function formatElapsedSeconds(elapsedSec: number): string {
+  return elapsedSec < 60
+    ? `${elapsedSec}s`
+    : `${Math.floor(elapsedSec / 60)}:${String(elapsedSec % 60).padStart(2, '0')}`;
+}
+
 function resizeTextarea(el: HTMLTextAreaElement): void {
   const rowHeight = getTextareaLineHeight(el);
   el.style.height = 'auto';
@@ -117,6 +131,12 @@ export const PromptInput = forwardRef<PromptInputHandle, PromptInputProps>(funct
   const taRef = useRef<HTMLTextAreaElement>(null);
   const compositionActiveRef = useRef(false);
   const generationStage = useCodesignStore((s) => s.generationStage);
+  const generationStartedAt = useCodesignStore((s) => {
+    const currentDesignId = s.currentDesignId;
+    return currentDesignId === null
+      ? null
+      : (s.generationByDesign[currentDesignId]?.startedAt ?? null);
+  });
 
   const runningLabel = isGenerating
     ? (() => {
@@ -145,18 +165,15 @@ export const PromptInput = forwardRef<PromptInputHandle, PromptInputProps>(funct
       setElapsedSec(0);
       return;
     }
-    const start = Date.now();
-    setElapsedSec(0);
+    const start = generationStartedAt ?? Date.now();
+    setElapsedSec(elapsedSecondsSince(start));
     const id = setInterval(() => {
-      setElapsedSec(Math.floor((Date.now() - start) / 1000));
+      setElapsedSec(elapsedSecondsSince(start));
     }, 500);
     return () => clearInterval(id);
-  }, [isGenerating]);
+  }, [generationStartedAt, isGenerating]);
 
-  const elapsedText =
-    elapsedSec < 60
-      ? `${elapsedSec}s`
-      : `${Math.floor(elapsedSec / 60)}:${String(elapsedSec % 60).padStart(2, '0')}`;
+  const elapsedText = formatElapsedSeconds(elapsedSec);
 
   useEffect(() => {
     if (taRef.current) resizeTextarea(taRef.current);

apps/desktop/src/renderer/src/store.generationStage.test.ts

@@ -113,7 +113,7 @@ describe('generationStage transitions', () => {
       codesign: mockCodesignApi({
         generationStatus: vi.fn(async () => ({
           schemaVersion: 1,
-          running: [{ designId: DEFAULT_DESIGN.id, generationId: 'gen-main' }],
+          running: [{ designId: DEFAULT_DESIGN.id, generationId: 'gen-main', startedAt: 1234 }],
         })),
       }),
       setTimeout,
@@ -123,6 +123,7 @@ describe('generationStage transitions', () => {
 
     expect(useCodesignStore.getState().generationByDesign[DEFAULT_DESIGN.id]).toEqual({
       generationId: 'gen-main',
+      startedAt: 1234,
       stage: 'thinking',
     });
     expect(useCodesignStore.getState().isGenerating).toBe(true);

apps/desktop/src/renderer/src/store.ts

@@ -110,7 +110,10 @@ export interface CodesignState {
   previewSourceByDesign: Record<string, string>;
   /** Most-recent-first list of design ids in the preview pool. */
   recentDesignIds: string[];
-  generationByDesign: Record<string, { generationId: string; stage: GenerationStage }>;
+  generationByDesign: Record<
+    string,
+    { generationId: string; stage: GenerationStage; startedAt?: number }
+  >;
   isGenerating: boolean;
   activeGenerationId: string | null;
   /** Design id that owns the in-flight generation. Lets the user switch to

apps/desktop/src/renderer/src/store/slices/generation.ts

@@ -114,7 +114,7 @@ function startGenerationForDesign(set: SetState, designId: string, generationId:
   set((state) => {
     const generationByDesign = {
       ...state.generationByDesign,
-      [designId]: { generationId, stage: 'sending' as GenerationStage },
+      [designId]: { generationId, stage: 'sending' as GenerationStage, startedAt: Date.now() },
     };
     return {
       generationByDesign,
@@ -135,12 +135,15 @@ function markGenerationRunningForDesign(
 ): void {
   set((state) => {
     const current = state.generationByDesign[designId];
-    if (current?.generationId === generationId && current.stage === stage) return {};
+    if (current?.generationId === generationId && current.stage === stage && current.startedAt) {
+      return {};
+    }
     const generationByDesign = {
       ...state.generationByDesign,
       [designId]: {
         generationId,
         stage,
+        startedAt: current?.startedAt ?? Date.now(),
       },
     };
     return {
@@ -156,16 +159,20 @@ function markGenerationRunningForDesign(
 
 function reconcileGenerationStatus(
   set: SetState,
-  running: Array<{ designId: string; generationId: string }>,
+  running: Array<{ designId: string; generationId: string; startedAt?: number }>,
 ): void {
   set((state) => {
     const next: CodesignState['generationByDesign'] = {};
     for (const item of running) {
       const existing = state.generationByDesign[item.designId];
       next[item.designId] =
         existing?.generationId === item.generationId
-          ? existing
-          : { generationId: item.generationId, stage: 'thinking' };
+          ? { ...existing, startedAt: existing.startedAt ?? item.startedAt ?? Date.now() }
+          : {
+              generationId: item.generationId,
+              stage: 'thinking',
+              startedAt: item.startedAt ?? Date.now(),
+            };
     }
     return {
       generationByDesign: next,
@@ -199,7 +206,7 @@ function updateGenerationStageById(
     if (current?.generationId !== generationId) return {};
     const generationByDesign = {
       ...state.generationByDesign,
-      [designId]: { generationId, stage },
+      [designId]: { generationId, stage, startedAt: current.startedAt ?? Date.now() },
     };
     return {
       generationByDesign,