feat: add generation cancel job functionality and improve job handling

- Introduced `generationCancelJob` command ID in `commands/ids.ts`.
- Added `GenerationCancelJobPayload` type in `commands/payloads.ts`.
- Enhanced job status to include "cancelled" in `editor/state.ts`.
- Updated `runGenerationJob` to accept an `AbortSignal` and handle cancellation.
- Implemented cancellation logic in `runGenerate` and related functions.
- Added tests for job cancellation in `operations/generation/workflow.test.ts`.
- Improved layer rendering logic to prevent stack overflow in `editor/document-indexes.ts`.
- Added raster size assertions in `platform/browser/rasterLimits.ts` for image processing limits.
- Enhanced image file handling to check for size limits in `platform/browser/imageFiles.ts`.
- Updated UI components to reflect job cancellation state in `view/GenerationJobStatus.tsx` and `view/bottom-controls/GenerateActionControls.tsx`.

commands/generation.test.ts

@@ -12,6 +12,7 @@ import {
   generationFailJobCommand,
   generationStartJobCommand,
   generationSucceedJobCommand,
+  generationCancelJobCommand,
 } from "./generation";
 
 describe("generation commands", () => {
@@ -40,6 +41,16 @@ describe("generation commands", () => {
     expect(next.editor.generation.compareMode).toBe("split");
   });
 
+  test("bounds retained candidate source memory as well as candidate count", () => {
+    const largeSource = "x".repeat(34 * 1024 * 1024);
+    const first = { ...generationCandidate("candidate-1"), source: largeSource };
+    const second = { ...generationCandidate("candidate-2"), source: largeSource };
+    const withFirst = generationAddCandidateCommand.execute({ state: createInitialAppState("Test") }, { candidate: first });
+    const withSecond = generationAddCandidateCommand.execute({ state: withFirst }, { candidate: second });
+
+    expect(withSecond.editor.generation.candidates.map((candidate) => candidate.id)).toEqual(["candidate-2"]);
+  });
+
   test("clears the candidate session and resets comparison", () => {
     const withCandidate = generationAddCandidateCommand.execute(
       { state: createInitialAppState("Test") },
@@ -159,6 +170,13 @@ describe("generation commands", () => {
 
     expect(failed.editor.generation.jobs[0]).toMatchObject({ id: "job-1", status: "failed", error: "Backend unavailable", finishedAt: 125 });
   });
+
+  test("records explicit cancellation separately from failure", () => {
+    const running = generationStartJobCommand.execute({ state: createInitialAppState("Test") }, { jobId: "job-1", kind: "generate", label: "Generating", startedAt: 100 });
+    const cancelled = generationCancelJobCommand.execute({ state: running }, { jobId: "job-1", finishedAt: 110 });
+
+    expect(cancelled.editor.generation.jobs[0]).toMatchObject({ id: "job-1", status: "cancelled", finishedAt: 110 });
+  });
 });
 
 function documentWithSourceLayer() {

commands/generation.ts

@@ -43,10 +43,12 @@ export type GenerationReplaceCandidatePixelsPayload = {
 export type GenerationStartJobPayload = { jobId: GenerationJobId; kind: GenerationJobKind; label: string; startedAt: number };
 export type GenerationSucceedJobPayload = { jobId: GenerationJobId; finishedAt: number };
 export type GenerationFailJobPayload = { jobId: GenerationJobId; finishedAt: number; error: string };
+export type GenerationCancelJobPayload = { jobId: GenerationJobId; finishedAt: number };
 export type GenerationSetResourcesPayload = { options: GenerationOptions };
 export type GenerationFailResourcesPayload = { error: string };
 
 const maxCandidates = 12;
+const maxCandidateSourceBytes = 96 * 1024 * 1024;
 const maxJobs = 20;
 const generationCompareModes = new Set<GenerationCompareMode>(["result", "before", "split"]);
 
@@ -55,7 +57,7 @@ export const generationAddCandidateCommand: Command<GenerationAddCandidatePayloa
   name: "Add generation candidate",
   history: { mode: "ignore" },
   execute({ state }, payload) {
-    const candidates = [payload.candidate, ...state.editor.generation.candidates.filter((candidate) => candidate.id !== payload.candidate.id)].slice(0, maxCandidates);
+    const candidates = retainCandidateBudget([payload.candidate, ...state.editor.generation.candidates.filter((candidate) => candidate.id !== payload.candidate.id)]);
     return {
       ...state,
       editor: {
@@ -277,6 +279,15 @@ export const generationFailJobCommand: Command<GenerationFailJobPayload> = {
   },
 };
 
+export const generationCancelJobCommand: Command<GenerationCancelJobPayload> = {
+  id: commandIds.generationCancelJob,
+  name: "Cancel generation job",
+  history: { mode: "ignore" },
+  execute({ state }, payload) {
+    return settleJob(state, payload.jobId, payload.finishedAt, "cancelled");
+  },
+};
+
 export const generationLoadResourcesCommand: Command = {
   id: commandIds.generationLoadResources,
   name: "Load generation resources",
@@ -318,6 +329,7 @@ export const generationCommands = [
   generationStartJobCommand,
   generationSucceedJobCommand,
   generationFailJobCommand,
+  generationCancelJobCommand,
   generationLoadResourcesCommand,
   generationSetResourcesCommand,
   generationFailResourcesCommand,
@@ -331,13 +343,31 @@ function updateResources(state: AppState, resources: GenerationState["resources"
   return { ...state, editor: { ...state.editor, generation: { ...state.editor.generation, resources } } };
 }
 
-function settleJob(state: AppState, jobId: GenerationJobId, finishedAt: number, status: "succeeded" | "failed", error?: string): AppState {
+function settleJob(state: AppState, jobId: GenerationJobId, finishedAt: number, status: "succeeded" | "failed" | "cancelled", error?: string): AppState {
   if (!Number.isFinite(finishedAt)) return state;
   const job = state.editor.generation.jobs.find((candidate) => candidate.id === jobId);
   if (!job || job.status !== "running" || finishedAt < job.startedAt) return state;
   return updateJobs(state, state.editor.generation.jobs.map((candidate) => candidate.id === jobId ? { ...candidate, status, finishedAt, error } : candidate));
 }
 
+function retainCandidateBudget(candidates: GenerationCandidate[]): GenerationCandidate[] {
+  const retained: GenerationCandidate[] = [];
+  let bytes = 0;
+  for (const candidate of candidates) {
+    const candidateBytes = candidateRetainedBytes(candidate);
+    if (retained.length > 0 && bytes + candidateBytes > maxCandidateSourceBytes) continue;
+    retained.push(candidate);
+    bytes += candidateBytes;
+    if (retained.length >= maxCandidates) break;
+  }
+  return retained;
+}
+
+function candidateRetainedBytes(candidate: GenerationCandidate): number {
+  return [candidate.source, candidate.inputImage, candidate.maskImage, candidate.inpaint?.inputImage, candidate.inpaint?.maskImage]
+    .reduce((total, source) => total + (source?.length ?? 0) * 2, 0);
+}
+
 type LayerLocation = {
   artboardId: ArtboardId;
   layer: Layer;

commands/ids.ts

@@ -48,6 +48,7 @@ export const commandIds = {
   generationStartJob: "generation.startJob",
   generationSucceedJob: "generation.succeedJob",
   generationFailJob: "generation.failJob",
+  generationCancelJob: "generation.cancelJob",
   generationLoadResources: "generation.loadResources",
   generationSetResources: "generation.setResources",
   generationFailResources: "generation.failResources",

commands/payloads.ts

@@ -34,6 +34,7 @@ import type {
   GenerationStartJobPayload,
   GenerationSucceedJobPayload,
   GenerationFailJobPayload,
+  GenerationCancelJobPayload,
   GenerationSetResourcesPayload,
   GenerationFailResourcesPayload,
 } from "./generation";
@@ -106,6 +107,7 @@ export type CommandPayloads = {
   [commandIds.generationStartJob]: GenerationStartJobPayload;
   [commandIds.generationSucceedJob]: GenerationSucceedJobPayload;
   [commandIds.generationFailJob]: GenerationFailJobPayload;
+  [commandIds.generationCancelJob]: GenerationCancelJobPayload;
   [commandIds.generationLoadResources]: void;
   [commandIds.generationSetResources]: GenerationSetResourcesPayload;
   [commandIds.generationFailResources]: GenerationFailResourcesPayload;