chore: bump version to v6.1.0

Currently translated at 100.0% (2003 of 2003 strings)

Co-authored-by: Linos <linos.coding@gmail.com>
Translate-URL: https://hosted.weblate.org/projects/invokeai/web-ui/vi/
Translation: InvokeAI/Web UI

.github/ISSUE_TEMPLATE/BUG_REPORT.yml

@@ -21,6 +21,20 @@ body:
         - label: I have searched the existing issues
           required: true
 
+  - type: dropdown
+    id: install_method
+    attributes:
+      label: Install method
+      description: How did you install Invoke?
+      multiple: false
+      options:
+        - "Invoke's Launcher"
+        - 'Stability Matrix'
+        - 'Pinokio'
+        - 'Manual'
+    validations:
+      required: true
+
   - type: markdown
     attributes:
       value: __Describe your environment__
@@ -76,8 +90,8 @@ body:
     attributes:
       label: Version number
       description: |
-        The version of Invoke you have installed. If it is not the latest version, please update and try again to confirm the issue still exists. If you are testing main, please include the commit hash instead.
-      placeholder: ex. 3.6.1
+        The version of Invoke you have installed. If it is not the [latest version](https://github.com/invoke-ai/InvokeAI/releases/latest), please update and try again to confirm the issue still exists. If you are testing main, please include the commit hash instead.
+      placeholder: ex. v6.0.2
     validations:
       required: true
 
@@ -85,17 +99,17 @@ body:
     id: browser-version
     attributes:
       label: Browser
-      description: Your web browser and version.
+      description: Your web browser and version, if you do not use the Launcher's provided GUI.
       placeholder: ex. Firefox 123.0b3
     validations:
-      required: true
+      required: false
 
   - type: textarea
     id: python-deps
     attributes:
-      label: Python dependencies
+      label: System Information
       description: |
-        If the problem occurred during image generation, click the gear icon at the bottom left corner, click "About", click the copy button and then paste here.
+        Click the gear icon at the bottom left corner, then click "About". Click the copy button and then paste here.
     validations:
       required: false
 

.gitignore

@@ -190,3 +190,5 @@ installer/update.bat
 installer/update.sh
 installer/InvokeAI-Installer/
 .aider*
+
+.claude/

docker/Dockerfile

@@ -5,8 +5,7 @@
 FROM docker.io/node:22-slim AS web-builder
 ENV PNPM_HOME="/pnpm"
 ENV PATH="$PNPM_HOME:$PATH"
-RUN corepack use pnpm@8.x
-RUN corepack enable
+RUN corepack use pnpm@10.x && corepack enable
 
 WORKDIR /build
 COPY invokeai/frontend/web/ ./

docs/contributing/dev-environment.md

@@ -41,7 +41,7 @@ If you just want to use Invoke, you should use the [launcher][launcher link].
      With the modifications made, the install command should look something like this:
 
       ```sh
-      uv pip install -e ".[dev,test,docs,xformers]" --python 3.12 --python-preference only-managed --index=https://download.pytorch.org/whl/cu126 --reinstall
+      uv pip install -e ".[dev,test,docs,xformers]" --python 3.12 --python-preference only-managed --index=https://download.pytorch.org/whl/cu128 --reinstall
       ```
 
 6. At this point, you should have Invoke installed, a venv set up and activated, and the server running. But you will see a warning in the terminal that no UI was found. If you go to the URL for the server, you won't get a UI.
@@ -50,11 +50,11 @@ If you just want to use Invoke, you should use the [launcher][launcher link].
 
       If you only want to edit the docs, you can stop here and skip to the **Documentation** section below.
 
-7. Install the frontend dev toolchain:
+7. Install the frontend dev toolchain, paying attention to versions:
 
-      - [`nodejs`](https://nodejs.org/) (v20+)
+      - [`nodejs`](https://nodejs.org/) (tested on LTS, v22)
 
-      - [`pnpm`](https://pnpm.io/8.x/installation) (must be v8 - not v9!)
+      - [`pnpm`](https://pnpm.io/installation) (tested on v10)
 
 8. Do a production build of the frontend:
 

docs/contributing/frontend/workflows.md

@@ -297,7 +297,7 @@ Migration logic is in [migrations.ts].
 <!-- links -->
 
 [pydantic]: https://github.com/pydantic/pydantic 'pydantic'
-[zod]: https://github.com/colinhacks/zod 'zod/v4'
+[zod]: https://github.com/colinhacks/zod 'zod'
 [openapi-types]: https://github.com/kogosoftwarellc/open-api/tree/main/packages/openapi-types 'openapi-types'
 [reactflow]: https://github.com/xyflow/xyflow 'reactflow'
 [reactflow-concepts]: https://reactflow.dev/learn/concepts/terms-and-definitions

invokeai/app/invocations/primitives.py

@@ -430,6 +430,15 @@ class FluxConditioningOutput(BaseInvocationOutput):
         return cls(conditioning=FluxConditioningField(conditioning_name=conditioning_name))
 
 
+@invocation_output("flux_conditioning_collection_output")
+class FluxConditioningCollectionOutput(BaseInvocationOutput):
+    """Base class for nodes that output a collection of conditioning tensors"""
+
+    collection: list[FluxConditioningField] = OutputField(
+        description="The output conditioning tensors",
+    )
+
+
 @invocation_output("sd3_conditioning_output")
 class SD3ConditioningOutput(BaseInvocationOutput):
     """Base class for nodes that output a single SD3 conditioning tensor"""

invokeai/app/services/model_install/model_install_default.py

@@ -51,6 +51,7 @@ from invokeai.backend.model_manager.metadata import (
 from invokeai.backend.model_manager.metadata.metadata_base import HuggingFaceMetadata
 from invokeai.backend.model_manager.search import ModelSearch
 from invokeai.backend.model_manager.taxonomy import ModelRepoVariant, ModelSourceType
+from invokeai.backend.model_manager.util.lora_metadata_extractor import apply_lora_metadata
 from invokeai.backend.util import InvokeAILogger
 from invokeai.backend.util.catch_sigint import catch_sigint
 from invokeai.backend.util.devices import TorchDevice
@@ -667,6 +668,10 @@ class ModelInstallService(ModelInstallServiceBase):
 
         info = info or self._probe(model_path, config)
 
+        # Apply LoRA metadata if applicable
+        model_images_path = self.app_config.models_path / "model_images"
+        apply_lora_metadata(info, model_path.resolve(), model_images_path)
+
         model_path = model_path.resolve()
 
         # Models in the Invoke-managed models dir should use relative paths.

invokeai/backend/model_manager/util/lora_metadata_extractor.py

@@ -0,0 +1,145 @@
+"""Utility functions for extracting metadata from LoRA model files."""
+
+import json
+import logging
+from pathlib import Path
+from typing import Any, Dict, Optional, Set, Tuple
+
+from PIL import Image
+
+from invokeai.app.util.thumbnails import make_thumbnail
+from invokeai.backend.model_manager.config import AnyModelConfig, ModelType
+
+logger = logging.getLogger(__name__)
+
+
+def extract_lora_metadata(
+    model_path: Path, model_key: str, model_images_path: Path
+) -> Tuple[Optional[str], Optional[Set[str]]]:
+    """
+    Extract metadata for a LoRA model from associated JSON and image files.
+
+    Args:
+        model_path: Path to the LoRA model file
+        model_key: Unique key for the model
+        model_images_path: Path to the model images directory
+
+    Returns:
+        Tuple of (description, trigger_phrases)
+    """
+    model_stem = model_path.stem
+    model_dir = model_path.parent
+
+    # Find and process preview image
+    _process_preview_image(model_stem, model_dir, model_key, model_images_path)
+
+    # Extract metadata from JSON
+    description, trigger_phrases = _extract_json_metadata(model_stem, model_dir)
+
+    return description, trigger_phrases
+
+
+def _process_preview_image(model_stem: str, model_dir: Path, model_key: str, model_images_path: Path) -> bool:
+    """Find and process a preview image for the model, saving it to the model images store."""
+    image_extensions = [".png", ".jpg", ".jpeg", ".webp"]
+
+    for ext in image_extensions:
+        image_path = model_dir / f"{model_stem}{ext}"
+        if image_path.exists():
+            try:
+                # Open the image
+                with Image.open(image_path) as img:
+                    # Create thumbnail and save to model images directory
+                    thumbnail = make_thumbnail(img, 256)
+                    thumbnail_path = model_images_path / f"{model_key}.webp"
+                    thumbnail.save(thumbnail_path, format="webp")
+
+                logger.info(f"Processed preview image {image_path.name} for model {model_key}")
+                return True
+
+            except Exception as e:
+                logger.warning(f"Failed to process preview image {image_path.name}: {e}")
+                return False
+
+    return False
+
+
+def _extract_json_metadata(model_stem: str, model_dir: Path) -> Tuple[Optional[str], Optional[Set[str]]]:
+    """Extract metadata from a JSON file with the same name as the model."""
+    json_path = model_dir / f"{model_stem}.json"
+
+    if not json_path.exists():
+        return None, None
+
+    try:
+        with open(json_path, "r", encoding="utf-8") as f:
+            metadata = json.load(f)
+
+        # Extract description
+        description = _build_description(metadata)
+
+        # Extract trigger phrases
+        trigger_phrases = _extract_trigger_phrases(metadata)
+
+        if description or trigger_phrases:
+            logger.info(f"Applied metadata from {json_path.name}")
+
+        return description, trigger_phrases
+
+    except (json.JSONDecodeError, IOError, Exception) as e:
+        logger.warning(f"Failed to read metadata from {json_path}: {e}")
+        return None, None
+
+
+def _build_description(metadata: Dict[str, Any]) -> Optional[str]:
+    """Build a description from metadata fields."""
+    description_parts = []
+
+    if description := metadata.get("description"):
+        description_parts.append(str(description).strip())
+
+    if notes := metadata.get("notes"):
+        description_parts.append(str(notes).strip())
+
+    return " | ".join(description_parts) if description_parts else None
+
+
+def _extract_trigger_phrases(metadata: Dict[str, Any]) -> Optional[Set[str]]:
+    """Extract trigger phrases from metadata."""
+    if not (activation_text := metadata.get("activation text")):
+        return None
+
+    activation_text = str(activation_text).strip()
+    if not activation_text:
+        return None
+
+    # Split on commas and clean up each phrase
+    phrases = [phrase.strip() for phrase in activation_text.split(",") if phrase.strip()]
+
+    return set(phrases) if phrases else None
+
+
+def apply_lora_metadata(info: AnyModelConfig, model_path: Path, model_images_path: Path) -> None:
+    """
+    Apply extracted metadata to a LoRA model configuration.
+
+    Args:
+        info: The model configuration to update
+        model_path: Path to the LoRA model file
+        model_images_path: Path to the model images directory
+    """
+    # Only process LoRA models
+    if info.type != ModelType.LoRA:
+        return
+
+    # Extract and apply metadata
+    description, trigger_phrases = extract_lora_metadata(model_path, info.key, model_images_path)
+
+    # We don't set cover_image path in the config anymore since images are stored
+    # separately in the model images store by model key
+
+    if description:
+        info.description = description
+
+    if trigger_phrases:
+        info.trigger_phrases = trigger_phrases

invokeai/frontend/web/.eslintignore

@@ -1,10 +0,0 @@
-dist/
-static/
-.husky/
-node_modules/
-patches/
-stats.html
-index.html
-.yarn/
-*.scss
-src/services/api/schema.ts

invokeai/frontend/web/.eslintrc.js

@@ -1,88 +0,0 @@
-module.exports = {
-  extends: ['@invoke-ai/eslint-config-react'],
-  plugins: ['path', 'i18next'],
-  rules: {
-    // TODO(psyche): Enable this rule. Requires no default exports in components - many changes.
-    'react-refresh/only-export-components': 'off',
-    // TODO(psyche): Enable this rule. Requires a lot of eslint-disable-next-line comments.
-    '@typescript-eslint/consistent-type-assertions': 'off',
-    // https://github.com/qdanik/eslint-plugin-path
-    'path/no-relative-imports': ['error', { maxDepth: 0 }],
-    // https://github.com/edvardchen/eslint-plugin-i18next/blob/HEAD/docs/rules/no-literal-string.md
-    // TODO: ENABLE THIS RULE BEFORE v6.0.0
-    // 'i18next/no-literal-string': 'error',
-    // https://eslint.org/docs/latest/rules/no-console
-    'no-console': 'warn',
-    // https://eslint.org/docs/latest/rules/no-promise-executor-return
-    'no-promise-executor-return': 'error',
-    // https://eslint.org/docs/latest/rules/require-await
-    'require-await': 'error',
-    // Restrict setActiveTab calls to only use-navigation-api.tsx
-    'no-restricted-syntax': [
-      'error',
-      {
-        selector: 'CallExpression[callee.name="setActiveTab"]',
-        message:
-          'setActiveTab() can only be called from use-navigation-api.tsx. Use navigationApi.switchToTab() instead.',
-      },
-    ],
-    // TODO: ENABLE THIS RULE BEFORE v6.0.0
-    'react/display-name': 'off',
-    'no-restricted-properties': [
-      'error',
-      {
-        object: 'crypto',
-        property: 'randomUUID',
-        message: 'Use of crypto.randomUUID is not allowed as it is not available in all browsers.',
-      },
-      {
-        object: 'navigator',
-        property: 'clipboard',
-        message:
-          'The Clipboard API is not available by default in Firefox. Use the `useClipboard` hook instead, which wraps clipboard access to prevent errors.',
-      },
-    ],
-    'no-restricted-imports': [
-      'error',
-      {
-        paths: [
-          {
-            name: 'lodash-es',
-            importNames: ['isEqual'],
-            message: 'Please use objectEquals from @observ33r/object-equals instead.',
-          },
-          {
-            name: 'lodash-es',
-            message: 'Please use es-toolkit instead.',
-          },
-          {
-            name: 'es-toolkit',
-            importNames: ['isEqual'],
-            message: 'Please use objectEquals from @observ33r/object-equals instead.',
-          },
-        ],
-      },
-    ],
-  },
-  overrides: [
-    /**
-     * Allow setActiveTab calls only in use-navigation-api.tsx
-     */
-    {
-      files: ['**/use-navigation-api.tsx'],
-      rules: {
-        'no-restricted-syntax': 'off',
-      },
-    },
-    /**
-     * Overrides for stories
-     */
-    {
-      files: ['*.stories.tsx'],
-      rules: {
-        // We may not have i18n available in stories.
-        'i18next/no-literal-string': 'off',
-      },
-    },
-  ],
-};

invokeai/frontend/web/.prettierignore

@@ -14,3 +14,4 @@ static/
 src/theme/css/overlayscrollbars.css
 src/theme_/css/overlayscrollbars.css
 pnpm-lock.yaml
+.claude

invokeai/frontend/web/.prettierrc.js

@@ -1,11 +0,0 @@
-module.exports = {
-  ...require('@invoke-ai/prettier-config-react'),
-  overrides: [
-    {
-      files: ['public/locales/*.json'],
-      options: {
-        tabWidth: 4,
-      },
-    },
-  ],
-};

invokeai/frontend/web/.prettierrc.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "http://json.schemastore.org/prettierrc",
+  "trailingComma": "es5",
+  "printWidth": 120,
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true,
+  "endOfLine": "auto",
+  "overrides": [
+    {
+      "files": ["public/locales/*.json"],
+      "options": {
+        "tabWidth": 4
+      }
+    }
+  ]
+}

invokeai/frontend/web/.storybook/ReduxInit.tsx

@@ -1,21 +1,23 @@
-import { PropsWithChildren, memo, useEffect } from 'react';
-import { modelChanged } from '../src/features/controlLayers/store/paramsSlice';
-import { useAppDispatch } from '../src/app/store/storeHooks';
 import { useGlobalModifiersInit } from '@invoke-ai/ui-library';
+import type { PropsWithChildren } from 'react';
+import { memo, useEffect } from 'react';
+
+import { useAppDispatch } from '../src/app/store/storeHooks';
+import { modelChanged } from '../src/features/controlLayers/store/paramsSlice';
 /**
  * Initializes some state for storybook. Must be in a different component
  * so that it is run inside the redux context.
  */
-export const ReduxInit = memo((props: PropsWithChildren) => {
+export const ReduxInit = memo(({ children }: PropsWithChildren) => {
   const dispatch = useAppDispatch();
   useGlobalModifiersInit();
   useEffect(() => {
     dispatch(
       modelChanged({ model: { key: 'test_model', hash: 'some_hash', name: 'some name', base: 'sd-1', type: 'main' } })
     );
-  }, []);
+  }, [dispatch]);
 
-  return props.children;
+  return children;
 });
 
 ReduxInit.displayName = 'ReduxInit';

invokeai/frontend/web/.storybook/main.ts

@@ -2,19 +2,13 @@ import type { StorybookConfig } from '@storybook/react-vite';
 
 const config: StorybookConfig = {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
-  addons: [
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    '@storybook/addon-interactions',
-    '@storybook/addon-storysource',
-  ],
+  addons: ['@storybook/addon-links', '@storybook/addon-docs'],
+
   framework: {
     name: '@storybook/react-vite',
     options: {},
   },
-  docs: {
-    autodocs: 'tag',
-  },
+
   core: {
     disableTelemetry: true,
   },

invokeai/frontend/web/.storybook/manager.ts

@@ -1,5 +1,5 @@
-import { addons } from '@storybook/manager-api';
-import { themes } from '@storybook/theming';
+import { addons } from 'storybook/manager-api';
+import { themes } from 'storybook/theming';
 
 addons.setConfig({
   theme: themes.dark,

invokeai/frontend/web/.storybook/preview.tsx

@@ -1,17 +1,18 @@
-import { Preview } from '@storybook/react';
-import { themes } from '@storybook/theming';
+import type { Preview } from '@storybook/react-vite';
+import { themes } from 'storybook/theming';
+import { $store } from 'app/store/nanostores/store';
 import i18n from 'i18next';
 import { initReactI18next } from 'react-i18next';
 import { Provider } from 'react-redux';
-import ThemeLocaleProvider from '../src/app/components/ThemeLocaleProvider';
-import { $baseUrl } from '../src/app/store/nanostores/baseUrl';
-import { createStore } from '../src/app/store/store';
+
 // TODO: Disabled for IDE performance issues with our translation JSON
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
 import translationEN from '../public/locales/en.json';
+import ThemeLocaleProvider from '../src/app/components/ThemeLocaleProvider';
+import { $baseUrl } from '../src/app/store/nanostores/baseUrl';
+import { createStore } from '../src/app/store/store';
 import { ReduxInit } from './ReduxInit';
-import { $store } from 'app/store/nanostores/store';
 
 i18n.use(initReactI18next).init({
   lng: 'en',
@@ -46,6 +47,7 @@ const preview: Preview = {
   parameters: {
     docs: {
       theme: themes.dark,
+      codePanel: true,
     },
   },
 };

invokeai/frontend/web/eslint.config.mjs

@@ -0,0 +1,242 @@
+import js from '@eslint/js';
+import typescriptEslint from '@typescript-eslint/eslint-plugin';
+import typescriptParser from '@typescript-eslint/parser';
+import pluginI18Next from 'eslint-plugin-i18next';
+import pluginImport from 'eslint-plugin-import';
+import pluginPath from 'eslint-plugin-path';
+import pluginReact from 'eslint-plugin-react';
+import pluginReactHooks from 'eslint-plugin-react-hooks';
+import pluginReactRefresh from 'eslint-plugin-react-refresh';
+import pluginSimpleImportSort from 'eslint-plugin-simple-import-sort';
+import pluginStorybook from 'eslint-plugin-storybook';
+import pluginUnusedImports from 'eslint-plugin-unused-imports';
+import globals from 'globals';
+
+export default [
+  js.configs.recommended,
+
+  {
+    languageOptions: {
+      parser: typescriptParser,
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+        GlobalCompositeOperation: 'readonly',
+        RequestInit: 'readonly',
+      },
+    },
+
+    files: ['**/*.ts', '**/*.tsx', '**/*.js', '**/*.jsx'],
+
+    plugins: {
+      react: pluginReact,
+      '@typescript-eslint': typescriptEslint,
+      'react-hooks': pluginReactHooks,
+      import: pluginImport,
+      'unused-imports': pluginUnusedImports,
+      'simple-import-sort': pluginSimpleImportSort,
+      'react-refresh': pluginReactRefresh.configs.vite,
+      path: pluginPath,
+      i18next: pluginI18Next,
+      storybook: pluginStorybook,
+    },
+
+    rules: {
+      ...typescriptEslint.configs.recommended.rules,
+      ...pluginReact.configs.recommended.rules,
+      ...pluginReact.configs['jsx-runtime'].rules,
+      ...pluginReactHooks.configs.recommended.rules,
+      ...pluginStorybook.configs.recommended.rules,
+
+      'react/jsx-no-bind': [
+        'error',
+        {
+          allowBind: true,
+        },
+      ],
+
+      'react/jsx-curly-brace-presence': [
+        'error',
+        {
+          props: 'never',
+          children: 'never',
+        },
+      ],
+
+      'react-hooks/exhaustive-deps': 'error',
+
+      curly: 'error',
+      'no-var': 'error',
+      'brace-style': 'error',
+      'prefer-template': 'error',
+      radix: 'error',
+      'space-before-blocks': 'error',
+      eqeqeq: 'error',
+      'one-var': ['error', 'never'],
+      'no-eval': 'error',
+      'no-extend-native': 'error',
+      'no-implied-eval': 'error',
+      'no-label-var': 'error',
+      'no-return-assign': 'error',
+      'no-sequences': 'error',
+      'no-template-curly-in-string': 'error',
+      'no-throw-literal': 'error',
+      'no-unmodified-loop-condition': 'error',
+      'import/no-duplicates': 'error',
+      'import/prefer-default-export': 'off',
+      'unused-imports/no-unused-imports': 'error',
+
+      'unused-imports/no-unused-vars': [
+        'error',
+        {
+          vars: 'all',
+          varsIgnorePattern: '^_',
+          args: 'after-used',
+          argsIgnorePattern: '^_',
+        },
+      ],
+
+      'simple-import-sort/imports': 'error',
+      'simple-import-sort/exports': 'error',
+      '@typescript-eslint/no-unused-vars': 'off',
+
+      '@typescript-eslint/ban-ts-comment': [
+        'error',
+        {
+          'ts-expect-error': 'allow-with-description',
+          'ts-ignore': true,
+          'ts-nocheck': true,
+          'ts-check': false,
+          minimumDescriptionLength: 10,
+        },
+      ],
+
+      '@typescript-eslint/no-empty-interface': [
+        'error',
+        {
+          allowSingleExtends: true,
+        },
+      ],
+
+      '@typescript-eslint/consistent-type-imports': [
+        'error',
+        {
+          prefer: 'type-imports',
+          fixStyle: 'separate-type-imports',
+          disallowTypeAnnotations: true,
+        },
+      ],
+
+      '@typescript-eslint/no-import-type-side-effects': 'error',
+
+      '@typescript-eslint/consistent-type-assertions': [
+        'error',
+        {
+          assertionStyle: 'as',
+        },
+      ],
+
+      'path/no-relative-imports': [
+        'error',
+        {
+          maxDepth: 0,
+        },
+      ],
+
+      'no-console': 'warn',
+      'no-promise-executor-return': 'error',
+      'require-await': 'error',
+
+      'no-restricted-syntax': [
+        'error',
+        {
+          selector: 'CallExpression[callee.name="setActiveTab"]',
+          message:
+            'setActiveTab() can only be called from use-navigation-api.tsx. Use navigationApi.switchToTab() instead.',
+        },
+      ],
+
+      'no-restricted-properties': [
+        'error',
+        {
+          object: 'crypto',
+          property: 'randomUUID',
+          message: 'Use of crypto.randomUUID is not allowed as it is not available in all browsers.',
+        },
+        {
+          object: 'navigator',
+          property: 'clipboard',
+          message:
+            'The Clipboard API is not available by default in Firefox. Use the `useClipboard` hook instead, which wraps clipboard access to prevent errors.',
+        },
+      ],
+
+      // Typescript handles this for us: https://eslint.org/docs/latest/rules/no-redeclare#handled_by_typescript
+      'no-redeclare': 'off',
+
+      'no-restricted-imports': [
+        'error',
+        {
+          paths: [
+            {
+              name: 'lodash-es',
+              importNames: ['isEqual'],
+              message: 'Please use objectEquals from @observ33r/object-equals instead.',
+            },
+            {
+              name: 'lodash-es',
+              message: 'Please use es-toolkit instead.',
+            },
+            {
+              name: 'es-toolkit',
+              importNames: ['isEqual'],
+              message: 'Please use objectEquals from @observ33r/object-equals instead.',
+            },
+          ],
+        },
+      ],
+    },
+
+    settings: {
+      react: {
+        version: 'detect',
+      },
+    },
+  },
+
+  {
+    files: ['**/use-navigation-api.tsx'],
+    rules: {
+      'no-restricted-syntax': 'off',
+    },
+  },
+
+  {
+    files: ['**/*.stories.tsx'],
+    rules: {
+      'i18next/no-literal-string': 'off',
+    },
+  },
+
+  {
+    ignores: [
+      '**/dist/',
+      '**/static/',
+      '**/.husky/',
+      '**/node_modules/',
+      '**/patches/',
+      '**/stats.html',
+      '**/index.html',
+      '**/.yarn/',
+      '**/*.scss',
+      'src/services/api/schema.ts',
+      '.prettierrc.js',
+      '.storybook',
+    ],
+  },
+];

invokeai/frontend/web/knip.ts

@@ -14,6 +14,7 @@ const config: KnipConfig = {
     'src/features/controlLayers/konva/util.ts',
     // Will be using this
     'src/common/hooks/useAsyncState.ts',
+    'src/app/store/use-debounced-app-selector.ts',
   ],
   ignoreBinaries: ['only-allow'],
   paths: {

invokeai/frontend/web/package.json

@@ -47,25 +47,25 @@
     "@fontsource-variable/inter": "^5.2.6",
     "@invoke-ai/ui-library": "^0.0.46",
     "@nanostores/react": "^1.0.0",
-    "@observ33r/object-equals": "^1.1.4",
+    "@observ33r/object-equals": "^1.1.5",
     "@reduxjs/toolkit": "2.8.2",
     "@roarr/browser-log-writer": "^1.3.0",
-    "@xyflow/react": "^12.7.1",
-    "ag-psd": "^28.2.1",
+    "@xyflow/react": "^12.8.2",
+    "ag-psd": "^28.2.2",
     "async-mutex": "^0.5.0",
     "chakra-react-select": "^4.9.2",
     "cmdk": "^1.1.1",
     "compare-versions": "^6.1.1",
-    "dockview": "^4.4.0",
-    "es-toolkit": "^1.39.5",
+    "dockview": "^4.4.1",
+    "es-toolkit": "^1.39.7",
     "filesize": "^10.1.6",
     "fracturedjsonjs": "^4.1.0",
     "framer-motion": "^11.10.0",
-    "i18next": "^25.2.1",
+    "i18next": "^25.3.2",
     "i18next-http-backend": "^3.0.2",
-    "idb-keyval": "6.2.1",
+    "idb-keyval": "6.2.2",
     "jsondiffpatch": "^0.7.3",
-    "konva": "^9.3.20",
+    "konva": "^9.3.22",
     "linkify-react": "^4.3.1",
     "linkifyjs": "^4.3.1",
     "lru-cache": "^11.1.0",
@@ -83,7 +83,7 @@
     "react-dom": "^18.3.1",
     "react-dropzone": "^14.3.8",
     "react-error-boundary": "^5.0.0",
-    "react-hook-form": "^7.58.1",
+    "react-hook-form": "^7.60.0",
     "react-hotkeys-hook": "4.5.0",
     "react-i18next": "^15.5.3",
     "react-icons": "^5.5.0",
@@ -103,7 +103,7 @@
     "use-debounce": "^10.0.5",
     "use-device-pixel-ratio": "^1.1.2",
     "uuid": "^11.1.0",
-    "zod": "^3.25.67",
+    "zod": "^4.0.5",
     "zod-validation-error": "^3.5.2"
   },
   "peerDependencies": {
@@ -111,39 +111,43 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@invoke-ai/eslint-config-react": "^0.0.14",
-    "@invoke-ai/prettier-config-react": "^0.0.7",
-    "@storybook/addon-essentials": "^8.6.12",
-    "@storybook/addon-interactions": "^8.6.12",
-    "@storybook/addon-links": "^8.6.12",
-    "@storybook/addon-storysource": "^8.6.12",
-    "@storybook/manager-api": "^8.6.12",
-    "@storybook/react": "^8.6.12",
-    "@storybook/react-vite": "^8.6.12",
-    "@storybook/theming": "^8.6.12",
+    "@eslint/js": "^9.31.0",
+    "@storybook/addon-docs": "^9.0.17",
+    "@storybook/addon-links": "^9.0.17",
+    "@storybook/react-vite": "^9.0.17",
     "@types/node": "^22.15.1",
     "@types/react": "^18.3.11",
     "@types/react-dom": "^18.3.0",
     "@types/uuid": "^10.0.0",
+    "@typescript-eslint/eslint-plugin": "^8.37.0",
+    "@typescript-eslint/parser": "^8.37.0",
     "@vitejs/plugin-react-swc": "^3.9.0",
     "@vitest/coverage-v8": "^3.1.2",
     "@vitest/ui": "^3.1.2",
     "concurrently": "^9.1.2",
     "csstype": "^3.1.3",
     "dpdm": "^3.14.0",
-    "eslint": "^8.57.1",
-    "eslint-plugin-i18next": "^6.1.1",
-    "eslint-plugin-path": "^1.3.0",
+    "eslint": "^9.31.0",
+    "eslint-plugin-i18next": "^6.1.2",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-path": "^2.0.3",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.5",
+    "eslint-plugin-simple-import-sort": "^12.0.0",
+    "eslint-plugin-storybook": "^9.0.17",
+    "eslint-plugin-unused-imports": "^4.1.4",
+    "globals": "^16.3.0",
     "knip": "^5.61.3",
     "openapi-types": "^12.1.3",
     "openapi-typescript": "^7.6.1",
     "prettier": "^3.5.3",
-    "rollup-plugin-visualizer": "^5.14.0",
-    "storybook": "^8.6.12",
+    "rollup-plugin-visualizer": "^6.0.3",
+    "storybook": "^9.0.17",
     "tsafe": "^1.8.5",
     "type-fest": "^4.40.0",
     "typescript": "^5.8.3",
-    "vite": "^7.0.2",
+    "vite": "^7.0.5",
     "vite-plugin-css-injected-by-js": "^3.5.2",
     "vite-plugin-dts": "^4.5.3",
     "vite-plugin-eslint": "^1.8.1",

invokeai/frontend/web/public/locales/de.json

@@ -711,7 +711,8 @@
         "gaussianBlur": "Gaußsche Unschärfe",
         "sendToUpscale": "An Hochskalieren senden",
         "useCpuNoise": "CPU-Rauschen verwenden",
-        "sendToCanvas": "An Leinwand senden"
+        "sendToCanvas": "An Leinwand senden",
+        "disabledNoRasterContent": "Deaktiviert (kein Rasterinhalt)"
     },
     "settings": {
         "displayInProgress": "Zwischenbilder anzeigen",
@@ -789,7 +790,10 @@
         "pasteSuccess": "Eingefügt in {{destination}}",
         "pasteFailed": "Einfügen fehlgeschlagen",
         "unableToCopy": "Kopieren nicht möglich",
-        "unableToCopyDesc_theseSteps": "diese Schritte"
+        "unableToCopyDesc_theseSteps": "diese Schritte",
+        "noRasterLayers": "Keine Rasterebenen gefunden",
+        "noActiveRasterLayers": "Keine aktiven Rasterebenen",
+        "noVisibleRasterLayers": "Keine sichtbaren Rasterebenen"
     },
     "accessibility": {
         "uploadImage": "Bild hochladen",
@@ -847,7 +851,10 @@
         "assetsWithCount_one": "{{count}} in der Sammlung",
         "assetsWithCount_other": "{{count}} in der Sammlung",
         "deletedBoardsCannotbeRestored": "Gelöschte Ordner können nicht wiederhergestellt werden. Die Auswahl von \"Nur Ordner löschen\" verschiebt Bilder in einen unkategorisierten Zustand.",
-        "updateBoardError": "Fehler beim Aktualisieren des Ordners"
+        "updateBoardError": "Fehler beim Aktualisieren des Ordners",
+        "uncategorizedImages": "Nicht kategorisierte Bilder",
+        "deleteAllUncategorizedImages": "Alle nicht kategorisierten Bilder löschen",
+        "deletedImagesCannotBeRestored": "Gelöschte Bilder können nicht wiederhergestellt werden."
     },
     "queue": {
         "status": "Status",
@@ -1194,6 +1201,9 @@
                 "Die Kantengröße des Kohärenzdurchlaufs."
             ],
             "heading": "Kantengröße"
+        },
+        "rasterLayer": {
+            "heading": "Rasterebene"
         }
     },
     "invocationCache": {
@@ -1431,7 +1441,10 @@
         "autoLayout": "Auto Layout",
         "copyShareLink": "Teilen-Link kopieren",
         "download": "Herunterladen",
-        "convertGraph": "Graph konvertieren"
+        "convertGraph": "Graph konvertieren",
+        "filterByTags": "Nach Tags filtern",
+        "yourWorkflows": "Ihre Arbeitsabläufe",
+        "recentlyOpened": "Kürzlich geöffnet"
     },
     "sdxl": {
         "concatPromptStyle": "Verknüpfen von Prompt & Stil",
@@ -1444,7 +1457,15 @@
     "prompt": {
         "noMatchingTriggers": "Keine passenden Trigger",
         "addPromptTrigger": "Prompt-Trigger hinzufügen",
-        "compatibleEmbeddings": "Kompatible Einbettungen"
+        "compatibleEmbeddings": "Kompatible Einbettungen",
+        "replace": "Ersetzen",
+        "insert": "Einfügen",
+        "discard": "Verwerfen",
+        "generateFromImage": "Prompt aus Bild generieren",
+        "expandCurrentPrompt": "Aktuelle Prompt erweitern",
+        "uploadImageForPromptGeneration": "Bild zur Prompt-Generierung hochladen",
+        "expandingPrompt": "Prompt wird erweitert...",
+        "resultTitle": "Prompt-Erweiterung abgeschlossen"
     },
     "ui": {
         "tabs": {
@@ -1573,30 +1594,30 @@
             "newGlobalReferenceImage": "Neues globales Referenzbild",
             "newRegionalReferenceImage": "Neues regionales Referenzbild",
             "newControlLayer": "Neue Kontroll-Ebene",
-            "newRasterLayer": "Neue Raster-Ebene"
+            "newRasterLayer": "Neue Rasterebene"
         },
         "rectangle": "Rechteck",
         "saveCanvasToGallery": "Leinwand in Galerie speichern",
-        "newRasterLayerError": "Problem beim Erstellen einer Raster-Ebene",
+        "newRasterLayerError": "Problem beim Erstellen einer Rasterebene",
         "saveLayerToAssets": "Ebene in Galerie speichern",
         "deleteReferenceImage": "Referenzbild löschen",
         "referenceImage": "Referenzbild",
         "opacity": "Opazität",
         "removeBookmark": "Lesezeichen entfernen",
-        "rasterLayer": "Raster-Ebene",
-        "rasterLayers_withCount_visible": "Raster-Ebenen ({{count}})",
+        "rasterLayer": "Rasterebene",
+        "rasterLayers_withCount_visible": "Rasterebenen ({{count}})",
         "controlLayers_withCount_visible": "Kontroll-Ebenen ({{count}})",
         "deleteSelected": "Ausgewählte löschen",
         "newRegionalReferenceImageError": "Problem beim Erstellen eines regionalen Referenzbilds",
         "newControlLayerOk": "Kontroll-Ebene erstellt",
         "newControlLayerError": "Problem beim Erstellen einer Kontroll-Ebene",
-        "newRasterLayerOk": "Raster-Layer erstellt",
+        "newRasterLayerOk": "Rasterebene erstellt",
         "moveToFront": "Nach vorne bringen",
         "copyToClipboard": "In die Zwischenablage kopieren",
         "controlLayers_withCount_hidden": "Kontroll-Ebenen ({{count}} ausgeblendet)",
         "clearCaches": "Cache leeren",
         "controlLayer": "Kontroll-Ebene",
-        "rasterLayers_withCount_hidden": "Raster-Ebenen ({{count}} ausgeblendet)",
+        "rasterLayers_withCount_hidden": "Rasterebenen ({{count}} ausgeblendet)",
         "transparency": "Transparenz",
         "canvas": "Leinwand",
         "global": "Global",
@@ -1682,7 +1703,14 @@
             "filterType": "Filtertyp",
             "filter": "Filter"
         },
-        "bookmark": "Lesezeichen für Schnell-Umschalten"
+        "bookmark": "Lesezeichen für Schnell-Umschalten",
+        "asRasterLayer": "Als $t(controlLayers.rasterLayer)",
+        "asRasterLayerResize": "Als $t(controlLayers.rasterLayer) (Größe anpassen)",
+        "rasterLayer_withCount_one": "$t(controlLayers.rasterLayer)",
+        "rasterLayer_withCount_other": "Rasterebenen",
+        "newRasterLayer": "Neue $t(controlLayers.rasterLayer)",
+        "showNonRasterLayers": "Nicht-Rasterebenen anzeigen (Umschalt+H)",
+        "hideNonRasterLayers": "Nicht-Rasterebenen ausblenden (Umschalt+H)"
     },
     "upsell": {
         "shareAccess": "Zugang teilen",

invokeai/frontend/web/public/locales/en.json

@@ -470,6 +470,11 @@
             "togglePanels": {
                 "title": "Toggle Panels",
                 "desc": "Show or hide both left and right panels at once."
+            },
+            "selectGenerateTab": {
+                "title": "Select the Generate Tab",
+                "desc": "Selects the Generate tab.",
+                "key": "1"
             }
         },
         "canvas": {
@@ -574,6 +579,10 @@
                 "title": "Transform",
                 "desc": "Transform the selected layer."
             },
+            "invertMask": {
+                "title": "Invert Mask",
+                "desc": "Invert the selected inpaint mask, creating a new mask with opposite transparency."
+            },
             "applyFilter": {
                 "title": "Apply Filter",
                 "desc": "Apply the pending filter to the selected layer."
@@ -599,6 +608,20 @@
             "toggleNonRasterLayers": {
                 "title": "Toggle Non-Raster Layers",
                 "desc": "Show or hide all non-raster layer categories (Control Layers, Inpaint Masks, Regional Guidance)."
+            },
+            "fitBboxToMasks": {
+                "title": "Fit Bbox To Masks",
+                "desc": "Automatically adjust the generation bounding box to fit visible inpaint masks"
+            },
+            "applySegmentAnything": {
+                "title": "Apply Segment Anything",
+                "desc": "Apply the current Segment Anything mask.",
+                "key": "enter"
+            },
+            "cancelSegmentAnything": {
+                "title": "Cancel Segment Anything",
+                "desc": "Cancel the current Segment Anything operation.",
+                "key": "esc"
             }
         },
         "workflows": {
@@ -728,6 +751,10 @@
             "deleteSelection": {
                 "title": "Delete",
                 "desc": "Delete all selected images. By default, you will be prompted to confirm deletion. If the images are currently in use in the app, you will be warned."
+            },
+            "starImage": {
+                "title": "Star/Unstar Image",
+                "desc": "Star or unstar the selected image."
             }
         }
     },
@@ -1125,7 +1152,23 @@
         "addItem": "Add Item",
         "generateValues": "Generate Values",
         "floatRangeGenerator": "Float Range Generator",
-        "integerRangeGenerator": "Integer Range Generator"
+        "integerRangeGenerator": "Integer Range Generator",
+        "layout": {
+            "autoLayout": "Auto Layout",
+            "layeringStrategy": "Layering Strategy",
+            "networkSimplex": "Network Simplex",
+            "longestPath": "Longest Path",
+            "nodeSpacing": "Node Spacing",
+            "layerSpacing": "Layer Spacing",
+            "layoutDirection": "Layout Direction",
+            "layoutDirectionRight": "Right",
+            "layoutDirectionDown": "Down",
+            "alignment": "Node Alignment",
+            "alignmentUL": "Top Left",
+            "alignmentDL": "Bottom Left",
+            "alignmentUR": "Top Right",
+            "alignmentDR": "Bottom Right"
+        }
     },
     "parameters": {
         "aspect": "Aspect",
@@ -1407,7 +1450,15 @@
         "sentToUpscale": "Sent to Upscale",
         "promptGenerationStarted": "Prompt generation started",
         "uploadAndPromptGenerationFailed": "Failed to upload image and generate prompt",
-        "promptExpansionFailed": "We ran into an issue. Please try prompt expansion again."
+        "promptExpansionFailed": "We ran into an issue. Please try prompt expansion again.",
+        "maskInverted": "Mask Inverted",
+        "maskInvertFailed": "Failed to Invert Mask",
+        "noVisibleMasks": "No Visible Masks",
+        "noVisibleMasksDesc": "Create or enable at least one inpaint mask to invert",
+        "noInpaintMaskSelected": "No Inpaint Mask Selected",
+        "noInpaintMaskSelectedDesc": "Select an inpaint mask to invert",
+        "invalidBbox": "Invalid Bounding Box",
+        "invalidBboxDesc": "The bounding box has no valid dimensions"
     },
     "popovers": {
         "clipSkip": {
@@ -1775,6 +1826,20 @@
                 "Structure controls how closely the output image will keep to the layout of the original. Low structure allows major changes, while high structure strictly maintains the original composition and layout."
             ]
         },
+        "tileSize": {
+            "heading": "Tile Size",
+            "paragraphs": [
+                "Controls the size of tiles used during the upscaling process. Larger tiles use more memory but may produce better results.",
+                "SD1.5 models default to 768, while SDXL models default to 1024. Reduce tile size if you encounter memory issues."
+            ]
+        },
+        "tileOverlap": {
+            "heading": "Tile Overlap",
+            "paragraphs": [
+                "Controls the overlap between adjacent tiles during upscaling. Higher overlap values help reduce visible seams between tiles but use more memory.",
+                "The default value of 128 works well for most cases, but you can adjust based on your specific needs and memory constraints."
+            ]
+        },
         "fluxDevLicense": {
             "heading": "Non-Commercial License",
             "paragraphs": [
@@ -1926,6 +1991,7 @@
         "canvas": "Canvas",
         "bookmark": "Bookmark for Quick Switch",
         "fitBboxToLayers": "Fit Bbox To Layers",
+        "fitBboxToMasks": "Fit Bbox To Masks",
         "removeBookmark": "Remove Bookmark",
         "saveCanvasToGallery": "Save Canvas to Gallery",
         "saveBboxToGallery": "Save Bbox to Gallery",
@@ -1962,7 +2028,6 @@
         "recalculateRects": "Recalculate Rects",
         "clipToBbox": "Clip Strokes to Bbox",
         "outputOnlyMaskedRegions": "Output Only Generated Regions",
-        "saveAllImagesToGallery": "Save All Images to Gallery",
         "addLayer": "Add Layer",
         "duplicate": "Duplicate",
         "moveToFront": "Move to Front",
@@ -1991,6 +2056,7 @@
         "rasterLayer": "Raster Layer",
         "controlLayer": "Control Layer",
         "inpaintMask": "Inpaint Mask",
+        "invertMask": "Invert Mask",
         "regionalGuidance": "Regional Guidance",
         "referenceImageRegional": "Reference Image (Regional)",
         "referenceImageGlobal": "Reference Image (Global)",
@@ -2087,9 +2153,9 @@
         "resetCanvasLayers": "Reset Canvas Layers",
         "resetGenerationSettings": "Reset Generation Settings",
         "replaceCurrent": "Replace Current",
-        "controlLayerEmptyState": "<UploadButton>Upload an image</UploadButton>, drag an image from the <GalleryButton>gallery</GalleryButton> onto this layer, <PullBboxButton>pull the bounding box into this layer</PullBboxButton>, or draw on the canvas to get started.",
-        "referenceImageEmptyStateWithCanvasOptions": "<UploadButton>Upload an image</UploadButton>, drag an image from the <GalleryButton>gallery</GalleryButton> onto this Reference Image or <PullBboxButton>pull the bounding box into this Reference Image</PullBboxButton> to get started.",
-        "referenceImageEmptyState": "<UploadButton>Upload an image</UploadButton> or drag an image from the <GalleryButton>gallery</GalleryButton> onto this Reference Image to get started.",
+        "controlLayerEmptyState": "<UploadButton>Upload an image</UploadButton>, drag an image from the gallery onto this layer, <PullBboxButton>pull the bounding box into this layer</PullBboxButton>, or draw on the canvas to get started.",
+        "referenceImageEmptyStateWithCanvasOptions": "<UploadButton>Upload an image</UploadButton>, drag an image from the gallery onto this Reference Image or <PullBboxButton>pull the bounding box into this Reference Image</PullBboxButton> to get started.",
+        "referenceImageEmptyState": "<UploadButton>Upload an image</UploadButton> or drag an image from the gallery onto this Reference Image to get started.",
         "uploadOrDragAnImage": "Drag an image from the gallery or <UploadButton>upload an image</UploadButton>.",
         "imageNoise": "Image Noise",
         "denoiseLimit": "Denoise Limit",
@@ -2332,7 +2398,8 @@
                 "alert": "Preserving Masked Region"
             },
             "saveAllImagesToGallery": {
-                "alert": "Saving All Images to Gallery"
+                "label": "Send New Generations to Gallery",
+                "alert": "Sending new generations to Gallery, bypassing Canvas"
             },
             "isolatedStagingPreview": "Isolated Staging Preview",
             "isolatedPreview": "Isolated Preview",
@@ -2396,6 +2463,9 @@
         "upscaleModel": "Upscale Model",
         "postProcessingModel": "Post-Processing Model",
         "scale": "Scale",
+        "tileControl": "Tile Control",
+        "tileSize": "Tile Size",
+        "tileOverlap": "Tile Overlap",
         "postProcessingMissingModelWarning": "Visit the <LinkComponent>Model Manager</LinkComponent> to install a post-processing (image to image) model.",
         "missingModelsWarning": "Visit the <LinkComponent>Model Manager</LinkComponent> to install the required models:",
         "mainModelDesc": "Main model (SD1.5 or SDXL architecture)",

invokeai/frontend/web/public/locales/fr.json

@@ -2375,65 +2375,8 @@
     },
     "supportVideos": {
         "watch": "Regarder",
-        "videos": {
-            "upscaling": {
-                "description": "Comment améliorer la résolution des images avec les outils d'Invoke pour les agrandir.",
-                "title": "Upscaling"
-            },
-            "howDoIGenerateAndSaveToTheGallery": {
-                "description": "Étapes pour générer et enregistrer des images dans la galerie.",
-                "title": "Comment générer et enregistrer dans la galerie ?"
-            },
-            "usingControlLayersAndReferenceGuides": {
-                "title": "Utilisation des couche de contrôle et des guides de référence",
-                "description": "Apprenez à guider la création de vos images avec des couche de contrôle et des images de référence."
-            },
-            "exploringAIModelsAndConceptAdapters": {
-                "description": "Plongez dans les modèles d'IA et découvrez comment utiliser les adaptateurs de concepts pour un contrôle créatif.",
-                "title": "Exploration des modèles d'IA et des adaptateurs de concepts"
-            },
-            "howDoIUseControlNetsAndControlLayers": {
-                "title": "Comment utiliser les réseaux de contrôle et les couches de contrôle ?",
-                "description": "Apprenez à appliquer des couches de contrôle et des ControlNets à vos images."
-            },
-            "creatingAndComposingOnInvokesControlCanvas": {
-                "description": "Apprenez à composer des images en utilisant le canvas de contrôle d'Invoke.",
-                "title": "Créer et composer sur le canvas de contrôle d'Invoke"
-            },
-            "howDoIEditOnTheCanvas": {
-                "title": "Comment puis-je modifier sur la toile ?",
-                "description": "Guide pour éditer des images directement sur la toile."
-            },
-            "howDoIDoImageToImageTransformation": {
-                "title": "Comment effectuer une transformation d'image à image ?",
-                "description": "Tutoriel sur la réalisation de transformations d'image à image dans Invoke."
-            },
-            "howDoIUseGlobalIPAdaptersAndReferenceImages": {
-                "title": "Comment utiliser les IP Adapters globaux et les images de référence ?",
-                "description": "Introduction à l'ajout d'images de référence et IP Adapters globaux."
-            },
-            "howDoIUseInpaintMasks": {
-                "title": "Comment utiliser les masques d'inpainting ?",
-                "description": "Comment appliquer des masques de retourche pour la correction et la variation d'image."
-            },
-            "creatingYourFirstImage": {
-                "title": "Créer votre première image",
-                "description": "Introduction à la création d'une image à partir de zéro en utilisant les outils d'Invoke."
-            },
-            "understandingImageToImageAndDenoising": {
-                "title": "Comprendre l'Image-à-Image et le Débruitage",
-                "description": "Aperçu des transformations d'image à image et du débruitage dans Invoke."
-            },
-            "howDoIOutpaint": {
-                "title": "Comment effectuer un outpainting ?",
-                "description": "Guide pour l'extension au-delà des bordures de l'image originale."
-            }
-        },
         "gettingStarted": "Commencer",
-        "studioSessionsDesc1": "Consultez le <StudioSessionsPlaylistLink /> pour des approfondissements sur Invoke.",
-        "studioSessionsDesc2": "Rejoignez notre <DiscordLink /> pour participer aux sessions en direct et poser vos questions. Les sessions sont ajoutée dans la playlist la semaine suivante.",
-        "supportVideos": "Vidéos d'assistance",
-        "controlCanvas": "Contrôler la toile"
+        "supportVideos": "Vidéos d'assistance"
     },
     "modelCache": {
         "clear": "Effacer le cache du modèle",

invokeai/frontend/web/public/locales/it.json

@@ -152,7 +152,7 @@
         "image": "immagine",
         "drop": "Rilascia",
         "unstarImage": "Rimuovi contrassegno immagine",
-        "dropOrUpload": "$t(gallery.drop) o carica",
+        "dropOrUpload": "Rilascia o carica",
         "starImage": "Contrassegna l'immagine",
         "dropToUpload": "$t(gallery.drop) per aggiornare",
         "bulkDownloadRequested": "Preparazione del download",
@@ -197,7 +197,8 @@
         "boardsSettings": "Impostazioni Bacheche",
         "imagesSettings": "Impostazioni Immagini Galleria",
         "assets": "Risorse",
-        "images": "Immagini"
+        "images": "Immagini",
+        "useForPromptGeneration": "Usa per generare il prompt"
     },
     "hotkeys": {
         "searchHotkeys": "Cerca tasti di scelta rapida",
@@ -379,6 +380,15 @@
             "applyTransform": {
                 "title": "Applica trasformazione",
                 "desc": "Applica la trasformazione in sospeso al livello selezionato."
+            },
+            "toggleNonRasterLayers": {
+                "desc": "Mostra o nascondi tutte le categorie di livelli non raster (Livelli di controllo, Maschere di Inpaint, Guida regionale).",
+                "title": "Attiva/disattiva livelli non raster"
+            },
+            "settings": {
+                "behavior": "Comportamento",
+                "display": "Mostra",
+                "grid": "Griglia"
             }
         },
         "workflows": {
@@ -623,7 +633,7 @@
         "installingXModels_one": "Installazione di {{count}} modello",
         "installingXModels_many": "Installazione di {{count}} modelli",
         "installingXModels_other": "Installazione di {{count}} modelli",
-        "includesNModels": "Include {{n}} modelli e le loro dipendenze",
+        "includesNModels": "Include {{n}} modelli e le loro dipendenze.",
         "starterBundleHelpText": "Installa facilmente tutti i modelli necessari per iniziare con un modello base, tra cui un modello principale, controlnet, adattatori IP e altro. Selezionando un pacchetto salterai tutti i modelli che hai già installato.",
         "noDefaultSettings": "Nessuna impostazione predefinita configurata per questo modello. Visita Gestione Modelli per aggiungere impostazioni predefinite.",
         "defaultSettingsOutOfSync": "Alcune impostazioni non corrispondono a quelle predefinite del modello:",
@@ -656,7 +666,27 @@
         "manageModels": "Gestione modelli",
         "hfTokenReset": "Ripristino del gettone HF",
         "relatedModels": "Modelli correlati",
-        "showOnlyRelatedModels": "Correlati"
+        "showOnlyRelatedModels": "Correlati",
+        "installedModelsCount": "{{installed}} di {{total}} modelli installati.",
+        "allNModelsInstalled": "Tutti i {{count}} modelli installati",
+        "nToInstall": "{{count}} da installare",
+        "nAlreadyInstalled": "{{count}} già installati",
+        "bundleAlreadyInstalled": "Pacchetto già installato",
+        "bundleAlreadyInstalledDesc": "Tutti i modelli nel pacchetto {{bundleName}} sono già installati.",
+        "launchpad": {
+            "description": "Per utilizzare la maggior parte delle funzionalità della piattaforma, Invoke richiede l'installazione di modelli. Scegli tra le opzioni di installazione manuale o esplora i modelli di avvio selezionati.",
+            "manualInstall": "Installazione manuale",
+            "urlDescription": "Installa i modelli da un URL o da un percorso file locale. Perfetto per modelli specifici che desideri aggiungere.",
+            "huggingFaceDescription": "Esplora e installa i modelli direttamente dai repository di HuggingFace.",
+            "scanFolderDescription": "Esegui la scansione di una cartella locale per rilevare e installare automaticamente i modelli.",
+            "recommendedModels": "Modelli consigliati",
+            "exploreStarter": "Oppure sfoglia tutti i modelli iniziali disponibili",
+            "welcome": "Benvenuti in Gestione Modelli",
+            "quickStart": "Pacchetti di avvio rapido",
+            "bundleDescription": "Ogni pacchetto include modelli essenziali per ogni famiglia di modelli e modelli base selezionati per iniziare.",
+            "browseAll": "Oppure scopri tutti i modelli disponibili:"
+        },
+        "launchpadTab": "Rampa di lancio"
     },
     "parameters": {
         "images": "Immagini",
@@ -742,7 +772,10 @@
             "modelIncompatibleBboxHeight": "L'altezza del riquadro è {{height}} ma {{model}} richiede multipli di {{multiple}}",
             "modelIncompatibleScaledBboxWidth": "La larghezza scalata del riquadro è {{width}} ma {{model}} richiede multipli di {{multiple}}",
             "modelIncompatibleScaledBboxHeight": "L'altezza scalata del riquadro è {{height}} ma {{model}} richiede multipli di {{multiple}}",
-            "modelDisabledForTrial": "La generazione con {{modelName}} non è disponibile per gli account di prova. Accedi alle impostazioni del tuo account per effettuare l'upgrade."
+            "modelDisabledForTrial": "La generazione con {{modelName}} non è disponibile per gli account di prova. Accedi alle impostazioni del tuo account per effettuare l'upgrade.",
+            "fluxKontextMultipleReferenceImages": "È possibile utilizzare solo 1 immagine di riferimento alla volta con Flux Kontext",
+            "promptExpansionResultPending": "Accetta o ignora il risultato dell'espansione del prompt",
+            "promptExpansionPending": "Espansione del prompt in corso"
         },
         "useCpuNoise": "Usa la CPU per generare rumore",
         "iterations": "Iterazioni",
@@ -884,7 +917,26 @@
         "problemUnpublishingWorkflowDescription": "Si è verificato un problema durante l'annullamento della pubblicazione del flusso di lavoro. Riprova.",
         "workflowUnpublished": "Flusso di lavoro non pubblicato",
         "chatGPT4oIncompatibleGenerationMode": "ChatGPT 4o supporta solo la conversione da testo a immagine e da immagine a immagine. Utilizza altri modelli per le attività di Inpainting e Outpainting.",
-        "imagenIncompatibleGenerationMode": "Google {{model}} supporta solo la generazione da testo a immagine. Utilizza altri modelli per le attività di conversione da immagine a immagine, inpainting e outpainting."
+        "imagenIncompatibleGenerationMode": "Google {{model}} supporta solo la generazione da testo a immagine. Utilizza altri modelli per le attività di conversione da immagine a immagine, inpainting e outpainting.",
+        "noRasterLayers": "Nessun livello raster trovato",
+        "noRasterLayersDesc": "Crea almeno un livello raster da esportare in PSD",
+        "noActiveRasterLayers": "Nessun livello raster attivo",
+        "noActiveRasterLayersDesc": "Abilitare almeno un livello raster da esportare in PSD",
+        "noVisibleRasterLayers": "Nessun livello raster visibile",
+        "noVisibleRasterLayersDesc": "Abilitare almeno un livello raster da esportare in PSD",
+        "invalidCanvasDimensions": "Dimensioni della tela non valide",
+        "canvasTooLarge": "Tela troppo grande",
+        "canvasTooLargeDesc": "Le dimensioni della tela superano le dimensioni massime consentite per l'esportazione in formato PSD. Riduci la larghezza e l'altezza totali della tela e riprova.",
+        "failedToProcessLayers": "Impossibile elaborare i livelli",
+        "psdExportSuccess": "Esportazione PSD completata",
+        "psdExportSuccessDesc": "Esportazione riuscita di {{count}} livelli nel file PSD",
+        "problemExportingPSD": "Problema durante l'esportazione PSD",
+        "noValidLayerAdapters": "Nessun adattatore di livello valido trovato",
+        "fluxKontextIncompatibleGenerationMode": "FLUX Kontext non supporta la generazione di immagini posizionate sulla tela. Riprova utilizzando la sezione Immagine di riferimento e disattiva tutti i livelli raster.",
+        "canvasManagerNotAvailable": "Gestione tela non disponibile",
+        "promptExpansionFailed": "Abbiamo riscontrato un problema. Riprova a eseguire l'espansione del prompt.",
+        "uploadAndPromptGenerationFailed": "Impossibile caricare l'immagine e generare il prompt",
+        "promptGenerationStarted": "Generazione del prompt avviata"
     },
     "accessibility": {
         "invokeProgressBar": "Barra di avanzamento generazione",
@@ -1225,7 +1277,8 @@
         "addLora": "Aggiungi LoRA",
         "defaultVAE": "VAE predefinito",
         "concepts": "Concetti",
-        "lora": "LoRA"
+        "lora": "LoRA",
+        "noCompatibleLoRAs": "Nessun LoRA compatibile"
     },
     "invocationCache": {
         "disable": "Disabilita",
@@ -1683,6 +1736,20 @@
             "paragraphs": [
                 "Controlla quale area viene modificata, in base all'intensità di riduzione del rumore."
             ]
+        },
+        "tileSize": {
+            "heading": "Dimensione riquadro",
+            "paragraphs": [
+                "Controlla la dimensione dei riquadri utilizzati durante il processo di ampliamento. Riquadri più grandi consumano più memoria, ma possono produrre risultati migliori.",
+                "I modelli SD1.5 hanno un valore predefinito di 768, mentre i modelli SDXL hanno un valore predefinito di 1024. Ridurre le dimensioni dei riquadri in caso di problemi di memoria."
+            ]
+        },
+        "tileOverlap": {
+            "heading": "Sovrapposizione riquadri",
+            "paragraphs": [
+                "Controlla la sovrapposizione tra riquadri adiacenti durante l'ampliamento. Valori di sovrapposizione più elevati aiutano a ridurre le giunzioni visibili tra i riquadri, ma consuma più memoria.",
+                "Il valore predefinito di 128 è adatto alla maggior parte dei casi, ma è possibile modificarlo in base alle proprie esigenze specifiche e ai limiti di memoria."
+            ]
         }
     },
     "sdxl": {
@@ -1730,7 +1797,7 @@
         "parameterSet": "Parametro {{parameter}} impostato",
         "parsingFailed": "Analisi non riuscita",
         "recallParameter": "Richiama {{label}}",
-        "canvasV2Metadata": "Tela",
+        "canvasV2Metadata": "Livelli Tela",
         "guidance": "Guida",
         "seamlessXAxis": "Asse X senza giunte",
         "seamlessYAxis": "Asse Y senza giunte",
@@ -1901,7 +1968,16 @@
     "prompt": {
         "compatibleEmbeddings": "Incorporamenti compatibili",
         "addPromptTrigger": "Aggiungi Trigger nel prompt",
-        "noMatchingTriggers": "Nessun Trigger corrispondente"
+        "noMatchingTriggers": "Nessun Trigger corrispondente",
+        "discard": "Scarta",
+        "insert": "Inserisci",
+        "replace": "Sostituisci",
+        "resultSubtitle": "Scegli come gestire il prompt espanso:",
+        "resultTitle": "Espansione del prompt completata",
+        "expandingPrompt": "Espansione del prompt...",
+        "uploadImageForPromptGeneration": "Carica l'immagine per la generazione del prompt",
+        "expandCurrentPrompt": "Espandi il prompt corrente",
+        "generateFromImage": "Genera prompt dall'immagine"
     },
     "controlLayers": {
         "addLayer": "Aggiungi Livello",
@@ -2212,7 +2288,11 @@
                 "label": "Preserva la regione mascherata"
             },
             "isolatedLayerPreview": "Anteprima livello isolato",
-            "isolatedLayerPreviewDesc": "Se visualizzare solo questo livello quando si eseguono operazioni come il filtraggio o la trasformazione."
+            "isolatedLayerPreviewDesc": "Se visualizzare solo questo livello quando si eseguono operazioni come il filtraggio o la trasformazione.",
+            "saveAllImagesToGallery": {
+                "alert": "Invia le nuove generazioni alla Galleria, bypassando la Tela",
+                "label": "Invia le nuove generazioni alla Galleria"
+            }
         },
         "transform": {
             "reset": "Reimposta",
@@ -2262,7 +2342,8 @@
             "newRegionalGuidance": "Nuova Guida Regionale",
             "copyToClipboard": "Copia negli appunti",
             "copyCanvasToClipboard": "Copia la tela negli appunti",
-            "copyBboxToClipboard": "Copia il riquadro di delimitazione negli appunti"
+            "copyBboxToClipboard": "Copia il riquadro di delimitazione negli appunti",
+            "newResizedControlLayer": "Nuovo livello di controllo ridimensionato"
         },
         "newImg2ImgCanvasFromImage": "Nuova Immagine da immagine",
         "copyRasterLayerTo": "Copia $t(controlLayers.rasterLayer) in",
@@ -2299,10 +2380,10 @@
         "replaceCurrent": "Sostituisci corrente",
         "mergeDown": "Unire in basso",
         "mergingLayers": "Unione dei livelli",
-        "controlLayerEmptyState": "<UploadButton>Carica un'immagine</UploadButton>, trascina un'immagine dalla <GalleryButton>galleria</GalleryButton> su questo livello, <PullBboxButton>trascina il riquadro di delimitazione in questo livello</PullBboxButton> oppure disegna sulla tela per iniziare.",
+        "controlLayerEmptyState": "<UploadButton>Carica un'immagine</UploadButton>, trascina un'immagine dalla galleria su questo livello, <PullBboxButton>trascina il riquadro di delimitazione in questo livello</PullBboxButton> oppure disegna sulla tela per iniziare.",
         "useImage": "Usa immagine",
         "resetGenerationSettings": "Ripristina impostazioni di generazione",
-        "referenceImageEmptyState": "Per iniziare, <UploadButton>carica un'immagine</UploadButton>, trascina un'immagine dalla <GalleryButton>galleria</GalleryButton>, oppure <PullBboxButton>trascina il riquadro di delimitazione in questo livello</PullBboxButton> su questo livello.",
+        "referenceImageEmptyState": "Per iniziare, <UploadButton>carica un'immagine</UploadButton> oppure trascina un'immagine dalla galleria su questa Immagine di riferimento.",
         "asRasterLayer": "Come $t(controlLayers.rasterLayer)",
         "asRasterLayerResize": "Come $t(controlLayers.rasterLayer) (Ridimensiona)",
         "asControlLayer": "Come $t(controlLayers.controlLayer)",
@@ -2352,7 +2433,18 @@
         "denoiseLimit": "Limite di riduzione del rumore",
         "addImageNoise": "Aggiungi $t(controlLayers.imageNoise)",
         "addDenoiseLimit": "Aggiungi $t(controlLayers.denoiseLimit)",
-        "imageNoise": "Rumore dell'immagine"
+        "imageNoise": "Rumore dell'immagine",
+        "exportCanvasToPSD": "Esporta la tela in PSD",
+        "ruleOfThirds": "Mostra la regola dei terzi",
+        "showNonRasterLayers": "Mostra livelli non raster (Shift+H)",
+        "hideNonRasterLayers": "Nascondi livelli non raster (Shift+H)",
+        "referenceImageEmptyStateWithCanvasOptions": "<UploadButton>Carica un'immagine</UploadButton>, trascina un'immagine dalla galleria su questa immagine di riferimento o <PullBboxButton>trascina il riquadro di delimitazione in questa immagine di riferimento</PullBboxButton> per iniziare.",
+        "uploadOrDragAnImage": "Trascina un'immagine dalla galleria o <UploadButton>carica un'immagine</UploadButton>.",
+        "autoSwitch": {
+            "switchOnStart": "All'inizio",
+            "switchOnFinish": "Alla fine",
+            "off": "Spento"
+        }
     },
     "ui": {
         "tabs": {
@@ -2366,6 +2458,55 @@
             "upscaling": "Amplia",
             "upscalingTab": "$t(ui.tabs.upscaling) $t(common.tab)",
             "gallery": "Galleria"
+        },
+        "launchpad": {
+            "workflowsTitle": "Approfondisci i flussi di lavoro.",
+            "upscalingTitle": "Amplia e aggiungi dettagli.",
+            "canvasTitle": "Modifica e perfeziona sulla tela.",
+            "generateTitle": "Genera immagini da prompt testuali.",
+            "modelGuideText": "Vuoi scoprire quali prompt funzionano meglio per ciascun modello?",
+            "modelGuideLink": "Consulta la nostra guida ai modelli.",
+            "workflows": {
+                "description": "I flussi di lavoro sono modelli riutilizzabili che automatizzano le attività di generazione delle immagini, consentendo di eseguire rapidamente operazioni complesse e di ottenere risultati coerenti.",
+                "learnMoreLink": "Scopri di più sulla creazione di flussi di lavoro",
+                "browseTemplates": {
+                    "title": "Sfoglia i modelli di flusso di lavoro",
+                    "description": "Scegli tra flussi di lavoro predefiniti per le attività comuni"
+                },
+                "createNew": {
+                    "title": "Crea un nuovo flusso di lavoro",
+                    "description": "Avvia un nuovo flusso di lavoro da zero"
+                },
+                "loadFromFile": {
+                    "title": "Carica flusso di lavoro da file",
+                    "description": "Carica un flusso di lavoro per iniziare con una configurazione esistente"
+                }
+            },
+            "upscaling": {
+                "uploadImage": {
+                    "title": "Carica l'immagine da ampliare",
+                    "description": "Fai clic o trascina un'immagine per ingrandirla (JPG, PNG, WebP fino a 100 MB)"
+                },
+                "replaceImage": {
+                    "title": "Sostituisci l'immagine corrente",
+                    "description": "Fai clic o trascina una nuova immagine per sostituire quella corrente"
+                },
+                "imageReady": {
+                    "title": "Immagine pronta",
+                    "description": "Premere Invoke per iniziare l'ampliamento"
+                },
+                "readyToUpscale": {
+                    "title": "Pronto per ampliare!",
+                    "description": "Configura le impostazioni qui sotto, quindi fai clic sul pulsante Invoke per iniziare ad ampliare l'immagine."
+                },
+                "upscaleModel": "Modello per l'ampliamento",
+                "model": "Modello",
+                "scale": "Scala",
+                "helpText": {
+                    "promptAdvice": "Durante l'ampliamento, utilizza un prompt che descriva il mezzo e lo stile. Evita di descrivere dettagli specifici del contenuto dell'immagine.",
+                    "styleAdvice": "L'ampliamento funziona meglio con lo stile generale dell'immagine."
+                }
+            }
         }
     },
     "upscaling": {
@@ -2386,7 +2527,10 @@
         "exceedsMaxSizeDetails": "Il limite massimo di ampliamento è {{maxUpscaleDimension}}x{{maxUpscaleDimension}} pixel. Prova un'immagine più piccola o diminuisci la scala selezionata.",
         "upscale": "Amplia",
         "incompatibleBaseModel": "Architettura del modello principale non supportata per l'ampliamento",
-        "incompatibleBaseModelDesc": "L'ampliamento è supportato solo per i modelli di architettura SD1.5 e SDXL. Cambia il modello principale per abilitare l'ampliamento."
+        "incompatibleBaseModelDesc": "L'ampliamento è supportato solo per i modelli di architettura SD1.5 e SDXL. Cambia il modello principale per abilitare l'ampliamento.",
+        "tileControl": "Controllo del riquadro",
+        "tileSize": "Dimensione del riquadro",
+        "tileOverlap": "Sovrapposizione riquadro"
     },
     "upsell": {
         "inviteTeammates": "Invita collaboratori",
@@ -2436,7 +2580,8 @@
         "positivePromptColumn": "'prompt' o 'positive_prompt'",
         "noTemplates": "Nessun modello",
         "acceptedColumnsKeys": "Colonne/chiavi accettate:",
-        "promptTemplateCleared": "Modello di prompt cancellato"
+        "promptTemplateCleared": "Modello di prompt cancellato",
+        "togglePromptPreviews": "Attiva/disattiva le anteprime dei prompt"
     },
     "newUserExperience": {
         "gettingStartedSeries": "Desideri maggiori informazioni? Consulta la nostra <LinkComponent>Getting Started Series</LinkComponent> per suggerimenti su come sfruttare appieno il potenziale di Invoke Studio.",
@@ -2452,8 +2597,9 @@
         "watchRecentReleaseVideos": "Guarda i video su questa versione",
         "watchUiUpdatesOverview": "Guarda le novità dell'interfaccia",
         "items": [
-            "Inpainting: livelli di rumore per maschera e limiti di denoise.",
-            "Canvas: proporzioni più intelligenti per SDXL e scorrimento e zoom migliorati."
+            "Genera immagini più velocemente con le nuove Rampe di lancio e una scheda Genera semplificata.",
+            "Modifica con prompt utilizzando Flux Kontext Dev.",
+            "Esporta in PSD, nascondi sovrapposizioni in blocco, organizza modelli e immagini: il tutto in un'interfaccia riprogettata e pensata per il controllo."
         ]
     },
     "system": {
@@ -2485,64 +2631,18 @@
     "supportVideos": {
         "gettingStarted": "Iniziare",
         "supportVideos": "Video di supporto",
-        "videos": {
-            "usingControlLayersAndReferenceGuides": {
-                "title": "Utilizzo di livelli di controllo e guide di riferimento",
-                "description": "Scopri come guidare la creazione delle tue immagini con livelli di controllo e immagini di riferimento."
-            },
-            "creatingYourFirstImage": {
-                "description": "Introduzione alla creazione di un'immagine da zero utilizzando gli strumenti di Invoke.",
-                "title": "Creazione della tua prima immagine"
-            },
-            "understandingImageToImageAndDenoising": {
-                "description": "Panoramica delle trasformazioni immagine-a-immagine e della riduzione del rumore in Invoke.",
-                "title": "Comprendere immagine-a-immagine e riduzione del rumore"
-            },
-            "howDoIDoImageToImageTransformation": {
-                "description": "Tutorial su come eseguire trasformazioni da immagine a immagine in Invoke.",
-                "title": "Come si esegue la trasformazione da immagine-a-immagine?"
-            },
-            "howDoIUseInpaintMasks": {
-                "title": "Come si usano le maschere Inpaint?",
-                "description": "Come applicare maschere inpaint per la correzione e la variazione delle immagini."
-            },
-            "howDoIOutpaint": {
-                "description": "Guida all'outpainting oltre i confini dell'immagine originale.",
-                "title": "Come posso eseguire l'outpainting?"
-            },
-            "exploringAIModelsAndConceptAdapters": {
-                "description": "Approfondisci i modelli di intelligenza artificiale e scopri come utilizzare gli adattatori concettuali per il controllo creativo.",
-                "title": "Esplorazione dei modelli di IA e degli adattatori concettuali"
-            },
-            "upscaling": {
-                "title": "Ampliamento",
-                "description": "Come ampliare le immagini con gli strumenti di Invoke per migliorarne la risoluzione."
-            },
-            "creatingAndComposingOnInvokesControlCanvas": {
-                "description": "Impara a comporre immagini utilizzando la tela di controllo di Invoke.",
-                "title": "Creare e comporre sulla tela di controllo di Invoke"
-            },
-            "howDoIGenerateAndSaveToTheGallery": {
-                "description": "Passaggi per generare e salvare le immagini nella galleria.",
-                "title": "Come posso generare e salvare nella Galleria?"
-            },
-            "howDoIEditOnTheCanvas": {
-                "title": "Come posso apportare modifiche sulla tela?",
-                "description": "Guida alla modifica delle immagini direttamente sulla tela."
-            },
-            "howDoIUseControlNetsAndControlLayers": {
-                "title": "Come posso utilizzare le Reti di Controllo e i Livelli di Controllo?",
-                "description": "Impara ad applicare livelli di controllo e reti di controllo alle tue immagini."
-            },
-            "howDoIUseGlobalIPAdaptersAndReferenceImages": {
-                "title": "Come si utilizzano gli adattatori IP globali e le immagini di riferimento?",
-                "description": "Introduzione all'aggiunta di immagini di riferimento e adattatori IP globali."
-            }
-        },
-        "controlCanvas": "Tela di Controllo",
         "watch": "Guarda",
-        "studioSessionsDesc1": "Dai un'occhiata a <StudioSessionsPlaylistLink /> per approfondimenti su Invoke.",
-        "studioSessionsDesc2": "Unisciti al nostro <DiscordLink /> per partecipare alle sessioni live e fare domande. Le sessioni vengono caricate sulla playlist la settimana successiva."
+        "studioSessionsDesc": "Unisciti al nostro <DiscordLink /> per partecipare alle sessioni live e porre domande. Le sessioni vengono caricate nella playlist la settimana successiva.",
+        "videos": {
+            "gettingStarted": {
+                "title": "Introduzione a Invoke",
+                "description": "Serie video completa che copre tutto ciò che devi sapere per iniziare a usare Invoke, dalla creazione della tua prima immagine alle tecniche avanzate."
+            },
+            "studioSessions": {
+                "title": "Sessioni in studio",
+                "description": "Sessioni approfondite che esplorano le funzionalità avanzate di Invoke, i flussi di lavoro creativi e le discussioni della community."
+            }
+        }
     },
     "modelCache": {
         "clear": "Cancella la cache del modello",

invokeai/frontend/web/public/locales/ja.json

@@ -141,7 +141,7 @@
         "loading": "ロード中",
         "currentlyInUse": "この画像は現在下記の機能を使用しています:",
         "drop": "ドロップ",
-        "dropOrUpload": "$t(gallery.drop) またはアップロード",
+        "dropOrUpload": "ドロップまたはアップロード",
         "deleteImage_other": "画像 {{count}} 枚を削除",
         "deleteImagePermanent": "削除された画像は復元できません。",
         "download": "ダウンロード",
@@ -193,7 +193,8 @@
         "images": "画像",
         "assetsTab": "プロジェクトで使用するためにアップロードされたファイル。",
         "imagesTab": "Invoke内で作成および保存された画像。",
-        "assets": "アセット"
+        "assets": "アセット",
+        "useForPromptGeneration": "プロンプト生成に使用する"
     },
     "hotkeys": {
         "searchHotkeys": "ホットキーを検索",
@@ -363,6 +364,16 @@
             "selectRectTool": {
                 "title": "矩形ツール",
                 "desc": "矩形ツールを選択します。"
+            },
+            "settings": {
+                "behavior": "行動",
+                "display": "ディスプレイ",
+                "grid": "グリッド",
+                "debug": "デバッグ"
+            },
+            "toggleNonRasterLayers": {
+                "title": "非ラスターレイヤーの切り替え",
+                "desc": "ラスター以外のレイヤー カテゴリ (コントロール レイヤー、インペイント マスク、地域ガイダンス) を表示または非表示にします。"
             }
         },
         "workflows": {
@@ -630,7 +641,7 @@
         "restoreDefaultSettings": "クリックするとモデルのデフォルト設定が使用されます.",
         "hfTokenSaved": "ハギングフェイストークンを保存しました",
         "imageEncoderModelId": "画像エンコーダーモデルID",
-        "includesNModels": "{{n}}個のモデルとこれらの依存関係を含みます",
+        "includesNModels": "{{n}}個のモデルとこれらの依存関係を含みます。",
         "learnMoreAboutSupportedModels": "私たちのサポートしているモデルについて更に学ぶ",
         "modelImageUpdateFailed": "モデル画像アップデート失敗",
         "scanFolder": "スキャンフォルダ",
@@ -654,7 +665,30 @@
         "manageModels": "モデル管理",
         "hfTokenReset": "ハギングフェイストークンリセット",
         "relatedModels": "関連のあるモデル",
-        "showOnlyRelatedModels": "関連している"
+        "showOnlyRelatedModels": "関連している",
+        "installedModelsCount": "{{total}} モデルのうち {{installed}} 個がインストールされています。",
+        "allNModelsInstalled": "{{count}} 個のモデルがすべてインストールされています",
+        "nToInstall": "{{count}}個をインストールする",
+        "nAlreadyInstalled": "{{count}} 個すでにインストールされています",
+        "bundleAlreadyInstalled": "バンドルがすでにインストールされています",
+        "bundleAlreadyInstalledDesc": "{{bundleName}} バンドル内のすべてのモデルはすでにインストールされています。",
+        "launchpadTab": "ランチパッド",
+        "launchpad": {
+            "welcome": "モデルマネジメントへようこそ",
+            "description": "Invoke プラットフォームのほとんどの機能を利用するには、モデルのインストールが必要です。手動インストールオプションから選択するか、厳選されたスターターモデルをご覧ください。",
+            "manualInstall": "マニュアルインストール",
+            "urlDescription": "URLまたはローカルファイルパスからモデルをインストールします。特定のモデルを追加したい場合に最適です。",
+            "huggingFaceDescription": "HuggingFace リポジトリからモデルを直接参照してインストールします。",
+            "scanFolderDescription": "ローカルフォルダをスキャンしてモデルを自動的に検出し、インストールします。",
+            "recommendedModels": "推奨モデル",
+            "exploreStarter": "または、利用可能なすべてのスターターモデルを参照してください",
+            "quickStart": "クイックスタートバンドル",
+            "bundleDescription": "各バンドルには各モデルファミリーの必須モデルと、開始するための厳選されたベースモデルが含まれています。",
+            "browseAll": "または、利用可能なすべてのモデルを参照してください。",
+            "stableDiffusion15": "Stable Diffusion1.5",
+            "sdxl": "SDXL",
+            "fluxDev": "FLUX.1 dev"
+        }
     },
     "parameters": {
         "images": "画像",
@@ -720,7 +754,10 @@
             "fluxModelIncompatibleBboxHeight": "$t(parameters.invoke.fluxRequiresDimensionsToBeMultipleOf16), bboxの高さは{{height}}です",
             "noFLUXVAEModelSelected": "FLUX生成にVAEモデルが選択されていません",
             "noT5EncoderModelSelected": "FLUX生成にT5エンコーダモデルが選択されていません",
-            "modelDisabledForTrial": "{{modelName}} を使用した生成はトライアルアカウントではご利用いただけません.アカウント設定にアクセスしてアップグレードしてください。"
+            "modelDisabledForTrial": "{{modelName}} を使用した生成はトライアルアカウントではご利用いただけません.アカウント設定にアクセスしてアップグレードしてください。",
+            "fluxKontextMultipleReferenceImages": "Flux Kontext では一度に 1 つの参照画像しか使用できません",
+            "promptExpansionPending": "プロンプト拡張が進行中",
+            "promptExpansionResultPending": "プロンプト拡張結果を受け入れるか破棄してください"
         },
         "aspect": "縦横比",
         "lockAspectRatio": "縦横比を固定",
@@ -875,7 +912,26 @@
         "imageNotLoadedDesc": "画像を見つけられません",
         "parameterNotSetDesc": "{{parameter}}を呼び出せません",
         "chatGPT4oIncompatibleGenerationMode": "ChatGPT 4oは,テキストから画像への生成と画像から画像への生成のみをサポートしています.インペインティングおよび,アウトペインティングタスクには他のモデルを使用してください.",
-        "imagenIncompatibleGenerationMode": "Google {{model}} はテキストから画像への変換のみをサポートしています. 画像から画像への変換, インペインティング,アウトペインティングのタスクには他のモデルを使用してください."
+        "imagenIncompatibleGenerationMode": "Google {{model}} はテキストから画像への変換のみをサポートしています. 画像から画像への変換, インペインティング,アウトペインティングのタスクには他のモデルを使用してください.",
+        "noRasterLayers": "ラスターレイヤーが見つかりません",
+        "noRasterLayersDesc": "PSDにエクスポートするには、少なくとも1つのラスターレイヤーを作成します",
+        "noActiveRasterLayers": "アクティブなラスターレイヤーがありません",
+        "noActiveRasterLayersDesc": "PSD にエクスポートするには、少なくとも 1 つのラスター レイヤーを有効にします",
+        "noVisibleRasterLayers": "表示されるラスター レイヤーがありません",
+        "noVisibleRasterLayersDesc": "PSD にエクスポートするには、少なくとも 1 つのラスター レイヤーを有効にします",
+        "invalidCanvasDimensions": "キャンバスのサイズが無効です",
+        "canvasTooLarge": "キャンバスが大きすぎます",
+        "canvasTooLargeDesc": "キャンバスのサイズがPSDエクスポートの最大許容サイズを超えています。キャンバス全体の幅と高さを小さくしてから、もう一度お試しください。",
+        "failedToProcessLayers": "レイヤーの処理に失敗しました",
+        "psdExportSuccess": "PSDエクスポート完了",
+        "psdExportSuccessDesc": "{{count}} 個のレイヤーを PSD ファイルに正常にエクスポートしました",
+        "problemExportingPSD": "PSD のエクスポート中に問題が発生しました",
+        "canvasManagerNotAvailable": "キャンバスマネージャーは利用できません",
+        "noValidLayerAdapters": "有効なレイヤーアダプタが見つかりません",
+        "fluxKontextIncompatibleGenerationMode": "Flux Kontext はテキストから画像への変換のみをサポートしています。画像から画像への変換、インペインティング、アウトペインティングのタスクには他のモデルを使用してください。",
+        "promptGenerationStarted": "プロンプト生成が開始されました",
+        "uploadAndPromptGenerationFailed": "画像のアップロードとプロンプトの生成に失敗しました",
+        "promptExpansionFailed": "プロンプト拡張に失敗しました"
     },
     "accessibility": {
         "invokeProgressBar": "進捗バー",
@@ -1014,7 +1070,8 @@
         "lora": "LoRA",
         "defaultVAE": "デフォルトVAE",
         "noLoRAsInstalled": "インストールされているLoRAはありません",
-        "noRefinerModelsInstalled": "インストールされているSDXLリファイナーモデルはありません"
+        "noRefinerModelsInstalled": "インストールされているSDXLリファイナーモデルはありません",
+        "noCompatibleLoRAs": "互換性のあるLoRAはありません"
     },
     "nodes": {
         "addNode": "ノードを追加",
@@ -1708,7 +1765,16 @@
     "prompt": {
         "addPromptTrigger": "プロンプトトリガーを追加",
         "compatibleEmbeddings": "互換性のある埋め込み",
-        "noMatchingTriggers": "一致するトリガーがありません"
+        "noMatchingTriggers": "一致するトリガーがありません",
+        "generateFromImage": "画像からプロンプトを生成する",
+        "expandCurrentPrompt": "現在のプロンプトを展開",
+        "uploadImageForPromptGeneration": "プロンプト生成用の画像をアップロードする",
+        "expandingPrompt": "プロンプトを展開しています...",
+        "resultTitle": "プロンプト拡張完了",
+        "resultSubtitle": "拡張プロンプトの処理方法を選択します:",
+        "replace": "交換する",
+        "insert": "挿入する",
+        "discard": "破棄する"
     },
     "ui": {
         "tabs": {
@@ -1716,7 +1782,61 @@
             "canvas": "キャンバス",
             "workflows": "ワークフロー",
             "models": "モデル",
-            "gallery": "ギャラリー"
+            "gallery": "ギャラリー",
+            "generation": "生成",
+            "workflowsTab": "$t(ui.tabs.workflows) $t(common.tab)",
+            "modelsTab": "$t(ui.tabs.models) $t(common.tab)",
+            "upscaling": "アップスケーリング",
+            "upscalingTab": "$t(ui.tabs.upscaling) $t(common.tab)"
+        },
+        "launchpad": {
+            "upscaling": {
+                "model": "モデル",
+                "scale": "スケール",
+                "helpText": {
+                    "promptAdvice": "アップスケールする際は、媒体とスタイルを説明するプロンプトを使用してください。画像内の具体的なコンテンツの詳細を説明することは避けてください。",
+                    "styleAdvice": "アップスケーリングは、画像の全体的なスタイルに最適です。"
+                },
+                "uploadImage": {
+                    "title": "アップスケール用の画像をアップロードする",
+                    "description": "アップスケールするには、画像をクリックまたはドラッグします（JPG、PNG、WebP、最大100MB）"
+                },
+                "replaceImage": {
+                    "title": "現在の画像を置き換える",
+                    "description": "新しい画像をクリックまたはドラッグして、現在の画像を置き換えます"
+                },
+                "imageReady": {
+                    "title": "画像準備完了",
+                    "description": "アップスケールを開始するにはInvokeを押してください"
+                },
+                "readyToUpscale": {
+                    "title": "アップスケールの準備ができました!",
+                    "description": "以下の設定を構成し、「Invoke」ボタンをクリックして画像のアップスケールを開始します。"
+                },
+                "upscaleModel": "アップスケールモデル"
+            },
+            "workflowsTitle": "ワークフローを詳しく見てみましょう。",
+            "upscalingTitle": "アップスケールして詳細を追加します。",
+            "canvasTitle": "キャンバス上で編集および調整します。",
+            "generateTitle": "テキストプロンプトから画像を生成します。",
+            "modelGuideText": "各モデルに最適なプロンプトを知りたいですか?",
+            "modelGuideLink": "モデルガイドをご覧ください。",
+            "workflows": {
+                "description": "ワークフローは、画像生成タスクを自動化する再利用可能なテンプレートであり、複雑な操作を迅速に実行して一貫した結果を得ることができます。",
+                "learnMoreLink": "ワークフローの作成について詳しく見る",
+                "browseTemplates": {
+                    "title": "ワークフローテンプレートを参照する",
+                    "description": "一般的なタスク用にあらかじめ構築されたワークフローから選択する"
+                },
+                "createNew": {
+                    "title": "新規ワークフローを作成する",
+                    "description": "新しいワークフローをゼロから始める"
+                },
+                "loadFromFile": {
+                    "title": "ファイルからワークフローを読み込む",
+                    "description": "既存の設定から開始するためのワークフローをアップロードする"
+                }
+            }
         }
     },
     "controlLayers": {
@@ -1732,7 +1852,16 @@
             "cropCanvasToBbox": "キャンバスをバウンディングボックスでクロップ",
             "newGlobalReferenceImage": "新規全域参照画像",
             "newRegionalReferenceImage": "新規領域参照画像",
-            "canvasGroup": "キャンバス"
+            "canvasGroup": "キャンバス",
+            "saveToGalleryGroup": "ギャラリーに保存",
+            "saveCanvasToGallery": "キャンバスをギャラリーに保存",
+            "saveBboxToGallery": "Bボックスをギャラリーに保存",
+            "newControlLayer": "新規コントロールレイヤー",
+            "newRasterLayer": "新規ラスターレイヤー",
+            "newInpaintMask": "新規インペイントマスク",
+            "copyToClipboard": "クリップボードにコピー",
+            "copyCanvasToClipboard": "キャンバスをクリップボードにコピー",
+            "copyBboxToClipboard": "Bボックスをクリップボードにコピー"
         },
         "regionalGuidance": "領域ガイダンス",
         "globalReferenceImage": "全域参照画像",
@@ -1743,7 +1872,11 @@
             "transform": "変形",
             "apply": "適用",
             "cancel": "キャンセル",
-            "reset": "リセット"
+            "reset": "リセット",
+            "fitMode": "フィットモード",
+            "fitModeContain": "含む",
+            "fitModeCover": "カバー",
+            "fitModeFill": "満たす"
         },
         "cropLayerToBbox": "レイヤーをバウンディングボックスでクロップ",
         "convertInpaintMaskTo": "$t(controlLayers.inpaintMask)を変換",
@@ -1754,7 +1887,8 @@
             "rectangle": "矩形",
             "move": "移動",
             "eraser": "消しゴム",
-            "bbox": "Bbox"
+            "bbox": "Bbox",
+            "view": "ビュー"
         },
         "saveCanvasToGallery": "キャンバスをギャラリーに保存",
         "saveBboxToGallery": "バウンディングボックスをギャラリーへ保存",
@@ -1774,25 +1908,386 @@
         "removeBookmark": "ブックマークを外す",
         "savedToGalleryOk": "ギャラリーに保存しました",
         "controlMode": {
-            "prompt": "プロンプト"
+            "prompt": "プロンプト",
+            "controlMode": "コントロールモード",
+            "balanced": "バランス（推奨）",
+            "control": "コントロール",
+            "megaControl": "メガコントロール"
         },
         "prompt": "プロンプト",
         "settings": {
             "snapToGrid": {
                 "off": "オフ",
-                "on": "オン"
-            }
+                "on": "オン",
+                "label": "グリッドにスナップ"
+            },
+            "preserveMask": {
+                "label": "マスクされた領域を保持",
+                "alert": "マスクされた領域の保存"
+            },
+            "isolatedStagingPreview": "分離されたステージングプレビュー",
+            "isolatedPreview": "分離されたプレビュー",
+            "isolatedLayerPreview": "分離されたレイヤーのプレビュー",
+            "isolatedLayerPreviewDesc": "フィルタリングや変換などの操作を実行するときに、このレイヤーのみを表示するかどうか。",
+            "invertBrushSizeScrollDirection": "ブラシサイズのスクロール反転",
+            "pressureSensitivity": "圧力感度"
         },
         "filter": {
             "filter": "フィルター",
             "spandrel_filter": {
-                "model": "モデル"
+                "model": "モデル",
+                "label": "img2imgモデル",
+                "description": "選択したレイヤーでimg2imgモデルを実行します。",
+                "autoScale": "オートスケール",
+                "autoScaleDesc": "選択したモデルは、目標スケールに達するまで実行されます。",
+                "scale": "ターゲットスケール"
             },
             "apply": "適用",
             "reset": "リセット",
-            "cancel": "キャンセル"
+            "cancel": "キャンセル",
+            "filters": "フィルター",
+            "filterType": "フィルタータイプ",
+            "autoProcess": "オートプロセス",
+            "process": "プロセス",
+            "advanced": "アドバンスド",
+            "processingLayerWith": "{{type}} フィルターを使用した処理レイヤー。",
+            "forMoreControl": "さらに細かく制御するには、以下の「詳細設定」をクリックしてください。",
+            "canny_edge_detection": {
+                "label": "キャニーエッジ検出",
+                "description": "Canny エッジ検出アルゴリズムを使用して、選択したレイヤーからエッジ マップを生成します。",
+                "low_threshold": "低閾値",
+                "high_threshold": "高閾値"
+            },
+            "color_map": {
+                "label": "カラーマップ",
+                "description": "選択したレイヤーからカラーマップを作成します。",
+                "tile_size": "タイルサイズ"
+            },
+            "content_shuffle": {
+                "label": "コンテンツシャッフル",
+                "description": "選択したレイヤーのコンテンツを、「液化」効果と同様にシャッフルします。",
+                "scale_factor": "スケール係数"
+            },
+            "depth_anything_depth_estimation": {
+                "label": "デプスエニシング",
+                "description": "デプスエニシングモデルを使用して、選択したレイヤーから深度マップを生成します。",
+                "model_size": "モデルサイズ",
+                "model_size_small": "スモール",
+                "model_size_small_v2": "スモールv2",
+                "model_size_base": "ベース",
+                "model_size_large": "ラージ"
+            },
+            "dw_openpose_detection": {
+                "label": "DW オープンポーズ検出",
+                "description": "DW Openpose モデルを使用して、選択したレイヤー内の人間のポーズを検出します。",
+                "draw_hands": "手を描く",
+                "draw_face": "顔を描く",
+                "draw_body": "体を描く"
+            },
+            "hed_edge_detection": {
+                "label": "HEDエッジ検出",
+                "description": "HED エッジ検出モデルを使用して、選択したレイヤーからエッジ マップを生成します。",
+                "scribble": "落書き"
+            },
+            "lineart_anime_edge_detection": {
+                "label": "線画アニメのエッジ検出",
+                "description": "線画アニメエッジ検出モデルを使用して、選択したレイヤーからエッジ マップを生成します。"
+            },
+            "lineart_edge_detection": {
+                "label": "線画エッジ検出",
+                "description": "線画エッジ検出モデルを使用して、選択したレイヤーからエッジ マップを生成します。",
+                "coarse": "粗い"
+            },
+            "mediapipe_face_detection": {
+                "label": "メディアパイプ顔検出",
+                "description": "メディアパイプ顔検出モデルを使用して、選択したレイヤー内の顔を検出します。",
+                "max_faces": "マックスフェイス",
+                "min_confidence": "最小信頼度"
+            },
+            "mlsd_detection": {
+                "label": "線分検出",
+                "description": "MLSD 線分検出モデルを使用して、選択したレイヤーから線分マップを生成します。",
+                "score_threshold": "スコア閾値",
+                "distance_threshold": "距離閾値"
+            },
+            "normal_map": {
+                "label": "ノーマルマップ",
+                "description": "選択したレイヤーからノーマルマップを生成します。"
+            },
+            "pidi_edge_detection": {
+                "label": "PiDiNetエッジ検出",
+                "description": "PiDiNet エッジ検出モデルを使用して、選択したレイヤーからエッジ マップを生成します。",
+                "scribble": "落書き",
+                "quantize_edges": "エッジを量子化する"
+            },
+            "img_blur": {
+                "label": "画像をぼかす",
+                "description": "選択したレイヤーをぼかします。",
+                "blur_type": "ぼかしの種類",
+                "blur_radius": "半径",
+                "gaussian_type": "ガウス分布",
+                "box_type": "ボックス"
+            },
+            "img_noise": {
+                "label": "ノイズ画像",
+                "description": "選択したレイヤーにノイズを追加します。",
+                "noise_type": "ノイズの種類",
+                "noise_amount": "総計",
+                "gaussian_type": "ガウス分布",
+                "salt_and_pepper_type": "塩コショウ",
+                "noise_color": "カラーノイズ",
+                "size": "ノイズサイズ"
+            },
+            "adjust_image": {
+                "label": "画像を調整する",
+                "description": "画像の選択したチャンネルを調整します。",
+                "channel": "チャンネル",
+                "value_setting": "バリュー",
+                "scale_values": "スケールバリュー",
+                "red": "赤（RGBA）",
+                "green": "緑（RGBA）",
+                "blue": "青（RGBA）",
+                "alpha": "アルファ（RGBA）",
+                "cyan": "シアン（CMYK）",
+                "magenta": "マゼンタ（CMYK）",
+                "yellow": "黄色（CMYK）",
+                "black": "黒（CMYK）",
+                "hue": "色相（HSV）",
+                "saturation": "彩度（HSV）",
+                "value": "値（HSV）",
+                "luminosity": "明度（LAB）",
+                "a": "A（ラボ）",
+                "b": "B（ラボ）",
+                "y": "Y（YCbCr）",
+                "cb": "Cb（YCbCr）",
+                "cr": "Cr（YCbCr）"
+            }
         },
-        "weight": "重み"
+        "weight": "重み",
+        "bookmark": "クイックスイッチのブックマーク",
+        "exportCanvasToPSD": "キャンバスをPSDにエクスポート",
+        "savedToGalleryError": "ギャラリーへの保存中にエラーが発生しました",
+        "regionCopiedToClipboard": "{{region}} をクリップボードにコピーしました",
+        "copyRegionError": "{{region}} のコピー中にエラーが発生しました",
+        "newGlobalReferenceImageOk": "作成されたグローバル参照画像",
+        "newGlobalReferenceImageError": "グローバル参照イメージの作成中に問題が発生しました",
+        "newRegionalReferenceImageOk": "地域参照画像の作成",
+        "newRegionalReferenceImageError": "地域参照画像の作成中に問題が発生しました",
+        "newControlLayerOk": "制御レイヤーの作成",
+        "newControlLayerError": "制御層の作成中に問題が発生しました",
+        "newRasterLayerOk": "ラスターレイヤーを作成しました",
+        "newRasterLayerError": "ラスターレイヤーの作成中に問題が発生しました",
+        "pullBboxIntoLayerOk": "Bbox をレイヤーにプル",
+        "pullBboxIntoLayerError": "BBox をレイヤーにプルする際に問題が発生しました",
+        "pullBboxIntoReferenceImageOk": "Bbox が ReferenceImage にプルされました",
+        "pullBboxIntoReferenceImageError": "BBox を ReferenceImage にプルする際に問題が発生しました",
+        "regionIsEmpty": "選択した領域は空です",
+        "mergeVisible": "マージを可視化",
+        "mergeVisibleOk": "マージされたレイヤー",
+        "mergeVisibleError": "レイヤーの結合エラー",
+        "mergingLayers": "レイヤーのマージ",
+        "clearHistory": "履歴をクリア",
+        "bboxOverlay": "Bboxオーバーレイを表示",
+        "ruleOfThirds": "三分割法を表示",
+        "newSession": "新しいセッション",
+        "clearCaches": "キャッシュをクリア",
+        "recalculateRects": "長方形を再計算する",
+        "clipToBbox": "ストロークをBboxにクリップ",
+        "outputOnlyMaskedRegions": "生成された領域のみを出力する",
+        "width": "幅",
+        "autoNegative": "オートネガティブ",
+        "enableAutoNegative": "オートネガティブを有効にする",
+        "disableAutoNegative": "オートネガティブを無効にする",
+        "deletePrompt": "プロンプトを削除",
+        "deleteReferenceImage": "参照画像を削除",
+        "showHUD": "HUDを表示",
+        "maskFill": "マスク塗りつぶし",
+        "addPositivePrompt": "$t(controlLayers.prompt) を追加します",
+        "addNegativePrompt": "$t(controlLayers.negativePrompt)を追加します",
+        "addReferenceImage": "$t(controlLayers.referenceImage)を追加します",
+        "addImageNoise": "$t(controlLayers.imageNoise)を追加します",
+        "addRasterLayer": "$t(controlLayers.rasterLayer)を追加します",
+        "addControlLayer": "$t(controlLayers.controlLayer)を追加します",
+        "addInpaintMask": "$t(controlLayers.inpaintMask)を追加します",
+        "addRegionalGuidance": "$t(controlLayers.regionalGuidance)を追加します",
+        "addGlobalReferenceImage": "$t(controlLayers.globalReferenceImage)を追加します",
+        "addDenoiseLimit": "$t(controlLayers.denoiseLimit)を追加します",
+        "controlLayer": "コントロールレイヤー",
+        "inpaintMask": "インペイントマスク",
+        "referenceImageRegional": "参考画像（地域別）",
+        "referenceImageGlobal": "参考画像（グローバル）",
+        "asRasterLayer": "$t(controlLayers.rasterLayer) として",
+        "asRasterLayerResize": "$t(controlLayers.rasterLayer) として (リサイズ)",
+        "asControlLayer": "$t(controlLayers.controlLayer) として",
+        "asControlLayerResize": "$t(controlLayers.controlLayer) として (リサイズ)",
+        "referenceImage": "参照画像",
+        "sendingToCanvas": "キャンバスに生成をのせる",
+        "sendingToGallery": "生成をギャラリーに送る",
+        "sendToGallery": "ギャラリーに送る",
+        "sendToGalleryDesc": "Invokeを押すとユニークな画像が生成され、ギャラリーに保存されます。",
+        "sendToCanvas": "キャンバスに送る",
+        "newLayerFromImage": "画像から新規レイヤー",
+        "newCanvasFromImage": "画像から新規キャンバス",
+        "newImg2ImgCanvasFromImage": "画像からの新規 Img2Img",
+        "copyToClipboard": "クリップボードにコピー",
+        "sendToCanvasDesc": "Invokeを押すと、進行中の作品がキャンバス上にステージされます。",
+        "viewProgressInViewer": "<Btn>画像ビューア</Btn>で進行状況と出力を表示します。",
+        "viewProgressOnCanvas": "<Btn>キャンバス</Btn> で進行状況とステージ出力を表示します。",
+        "rasterLayer_withCount_other": "ラスターレイヤー",
+        "controlLayer_withCount_other": "コントロールレイヤー",
+        "regionalGuidance_withCount_hidden": "地域ガイダンス（{{count}} 件非表示）",
+        "controlLayers_withCount_hidden": "コントロールレイヤー（{{count}} 個非表示）",
+        "rasterLayers_withCount_hidden": "ラスター レイヤー ({{count}} 個非表示)",
+        "globalReferenceImages_withCount_hidden": "グローバル参照画像（{{count}} 枚非表示）",
+        "regionalGuidance_withCount_visible": "地域ガイダンス ({{count}})",
+        "controlLayers_withCount_visible": "コントロールレイヤー ({{count}})",
+        "rasterLayers_withCount_visible": "ラスターレイヤー（{{count}}）",
+        "globalReferenceImages_withCount_visible": "グローバル参照画像 ({{count}})",
+        "layer_other": "レイヤー",
+        "layer_withCount_other": "レイヤー ({{count}})",
+        "convertRasterLayerTo": "$t(controlLayers.rasterLayer) を変換する",
+        "convertControlLayerTo": "$t(controlLayers.controlLayer) を変換する",
+        "convertRegionalGuidanceTo": "$t(controlLayers.regionalGuidance) を変換する",
+        "copyRasterLayerTo": "$t(controlLayers.rasterLayer)をコピーする",
+        "copyControlLayerTo": "$t(controlLayers.controlLayer) をコピーする",
+        "copyRegionalGuidanceTo": "$t(controlLayers.regionalGuidance)をコピーする",
+        "newRasterLayer": "新しい $t(controlLayers.rasterLayer)",
+        "newControlLayer": "新しい $t(controlLayers.controlLayer)",
+        "newInpaintMask": "新しい $t(controlLayers.inpaintMask)",
+        "newRegionalGuidance": "新しい $t(controlLayers.regionalGuidance)",
+        "pasteTo": "貼り付け先",
+        "pasteToAssets": "アセット",
+        "pasteToAssetsDesc": "アセットに貼り付け",
+        "pasteToBbox": "Bボックス",
+        "pasteToBboxDesc": "新しいレイヤー（Bbox内）",
+        "pasteToCanvas": "キャンバス",
+        "pasteToCanvasDesc": "新しいレイヤー（キャンバス内）",
+        "pastedTo": "{{destination}} に貼り付けました",
+        "transparency": "透明性",
+        "enableTransparencyEffect": "透明効果を有効にする",
+        "disableTransparencyEffect": "透明効果を無効にする",
+        "hidingType": "{{type}} を非表示",
+        "showingType": "{{type}}を表示",
+        "showNonRasterLayers": "非ラスターレイヤーを表示 (Shift+H)",
+        "hideNonRasterLayers": "非ラスターレイヤーを非表示にする (Shift+H)",
+        "dynamicGrid": "ダイナミックグリッド",
+        "logDebugInfo": "デバッグ情報をログに記録する",
+        "locked": "ロックされています",
+        "unlocked": "ロック解除",
+        "deleteSelected": "選択項目を削除",
+        "stagingOnCanvas": "ステージング画像",
+        "replaceLayer": "レイヤーの置き換え",
+        "pullBboxIntoLayer": "Bboxをレイヤーに引き込む",
+        "pullBboxIntoReferenceImage": "Bboxを参照画像に取り込む",
+        "showProgressOnCanvas": "キャンバスに進捗状況を表示",
+        "useImage": "画像を使う",
+        "negativePrompt": "ネガティブプロンプト",
+        "beginEndStepPercentShort": "開始/終了 %",
+        "newGallerySession": "新しいギャラリーセッション",
+        "newGallerySessionDesc": "これにより、キャンバスとモデル選択以外のすべての設定がクリアされます。生成した画像はギャラリーに送信されます。",
+        "newCanvasSession": "新規キャンバスセッション",
+        "newCanvasSessionDesc": "これにより、キャンバスとモデル選択以外のすべての設定がクリアされます。生成はキャンバス上でステージングされます。",
+        "resetCanvasLayers": "キャンバスレイヤーをリセット",
+        "resetGenerationSettings": "生成設定をリセット",
+        "replaceCurrent": "現在のものを置き換える",
+        "controlLayerEmptyState": "<UploadButton>画像をアップロード</UploadButton>、<GalleryButton>ギャラリー</GalleryButton>からこのレイヤーに画像をドラッグ、<PullBboxButton>境界ボックスをこのレイヤーにプル</PullBboxButton>、またはキャンバスに描画して開始します。",
+        "referenceImageEmptyStateWithCanvasOptions": "開始するには、<UploadButton>画像をアップロード</UploadButton>するか、<GalleryButton>ギャラリー</GalleryButton>からこの参照画像に画像をドラッグするか、<PullBboxButton>境界ボックスをこの参照画像にプル</PullBboxButton>します。",
+        "referenceImageEmptyState": "開始するには、<UploadButton>画像をアップロード</UploadButton>するか、<GalleryButton>ギャラリー</GalleryButton>からこの参照画像に画像をドラッグします。",
+        "uploadOrDragAnImage": "ギャラリーから画像をドラッグするか、<UploadButton>画像をアップロード</UploadButton>します。",
+        "imageNoise": "画像ノイズ",
+        "denoiseLimit": "ノイズ除去制限",
+        "warnings": {
+            "problemsFound": "問題が見つかりました",
+            "unsupportedModel": "選択したベースモデルではレイヤーがサポートされていません",
+            "controlAdapterNoModelSelected": "制御レイヤーモデルが選択されていません",
+            "controlAdapterIncompatibleBaseModel": "互換性のない制御レイヤーベースモデル",
+            "controlAdapterNoControl": "コントロールが選択/描画されていません",
+            "ipAdapterNoModelSelected": "参照画像モデルが選択されていません",
+            "ipAdapterIncompatibleBaseModel": "互換性のない参照画像ベースモデル",
+            "ipAdapterNoImageSelected": "参照画像が選択されていません",
+            "rgNoPromptsOrIPAdapters": "テキストプロンプトや参照画像はありません",
+            "rgNegativePromptNotSupported": "選択されたベースモデルでは否定プロンプトはサポートされていません",
+            "rgReferenceImagesNotSupported": "選択されたベースモデルでは地域の参照画像はサポートされていません",
+            "rgAutoNegativeNotSupported": "選択したベースモデルでは自動否定はサポートされていません",
+            "rgNoRegion": "領域が描画されていません",
+            "fluxFillIncompatibleWithControlLoRA": "コントロールLoRAはFLUX Fillと互換性がありません"
+        },
+        "errors": {
+            "unableToFindImage": "画像が見つかりません",
+            "unableToLoadImage": "画像を読み込めません"
+        },
+        "ipAdapterMethod": {
+            "ipAdapterMethod": "モード",
+            "full": "スタイルと構成",
+            "fullDesc": "視覚スタイル (色、テクスチャ) と構成 (レイアウト、構造) を適用します。",
+            "style": "スタイル（シンプル）",
+            "styleDesc": "レイアウトを考慮せずに視覚スタイル（色、テクスチャ）を適用します。以前は「スタイルのみ」と呼ばれていました。",
+            "composition": "構成のみ",
+            "compositionDesc": "参照スタイルを無視してレイアウトと構造を複製します。",
+            "styleStrong": "スタイル（ストロング）",
+            "styleStrongDesc": "構成への影響をわずかに抑えて、強力なビジュアル スタイルを適用します。",
+            "stylePrecise": "スタイル（正確）",
+            "stylePreciseDesc": "被写体の影響を排除し、正確な視覚スタイルを適用します。"
+        },
+        "fluxReduxImageInfluence": {
+            "imageInfluence": "イメージの影響力",
+            "lowest": "最低",
+            "low": "低",
+            "medium": "中",
+            "high": "高",
+            "highest": "最高"
+        },
+        "fill": {
+            "fillColor": "塗りつぶし色",
+            "fillStyle": "塗りつぶしスタイル",
+            "solid": "固体",
+            "grid": "グリッド",
+            "crosshatch": "クロスハッチ",
+            "vertical": "垂直",
+            "horizontal": "水平",
+            "diagonal": "対角線"
+        },
+        "selectObject": {
+            "selectObject": "オブジェクトを選択",
+            "pointType": "ポイントタイプ",
+            "invertSelection": "選択範囲を反転",
+            "include": "含む",
+            "exclude": "除外",
+            "neutral": "ニュートラル",
+            "apply": "適用",
+            "reset": "リセット",
+            "saveAs": "名前を付けて保存",
+            "cancel": "キャンセル",
+            "process": "プロセス",
+            "help1": "ターゲットオブジェクトを1つ選択します。<Bold>含める</Bold>ポイントと<Bold>除外</Bold>ポイントを追加して、レイヤーのどの部分がターゲットオブジェクトの一部であるかを示します。",
+            "help2": "対象オブジェクト内に<Bold>含める</Bold>ポイントを1つ選択するところから始めます。ポイントを追加して選択範囲を絞り込みます。ポイントが少ないほど、通常はより良い結果が得られます。",
+            "help3": "選択を反転して、ターゲットオブジェクト以外のすべてを選択します。",
+            "clickToAdd": "レイヤーをクリックしてポイントを追加します",
+            "dragToMove": "ポイントをドラッグして移動します",
+            "clickToRemove": "ポイントをクリックして削除します"
+        },
+        "HUD": {
+            "bbox": "Bボックス",
+            "scaledBbox": "スケールされたBボックス",
+            "entityStatus": {
+                "isFiltering": "{{title}} はフィルタリング中です",
+                "isTransforming": "{{title}}は変化しています",
+                "isLocked": "{{title}}はロックされています",
+                "isHidden": "{{title}}は非表示になっています",
+                "isDisabled": "{{title}}は無効です",
+                "isEmpty": "{{title}} は空です"
+            }
+        },
+        "stagingArea": {
+            "accept": "受け入れる",
+            "discardAll": "すべて破棄",
+            "discard": "破棄する",
+            "previous": "前へ",
+            "next": "次へ",
+            "saveToGallery": "ギャラリーに保存",
+            "showResultsOn": "結果を表示",
+            "showResultsOff": "結果を隠す"
+        }
     },
     "stylePresets": {
         "clearTemplateSelection": "選択したテンプレートをクリア",
@@ -1810,13 +2305,56 @@
         "nameColumn": "'name'",
         "type": "タイプ",
         "private": "プライベート",
-        "name": "名称"
+        "name": "名称",
+        "active": "アクティブ",
+        "copyTemplate": "テンプレートをコピー",
+        "deleteImage": "画像を削除",
+        "deleteTemplate": "テンプレートを削除",
+        "deleteTemplate2": "このテンプレートを削除してもよろしいですか? 元に戻すことはできません。",
+        "exportPromptTemplates": "プロンプトテンプレートをエクスポートする（CSV）",
+        "editTemplate": "テンプレートを編集",
+        "exportDownloaded": "エクスポートをダウンロードしました",
+        "exportFailed": "生成とCSVのダウンロードができません",
+        "importTemplates": "プロンプトテンプレートのインポート（CSV/JSON）",
+        "acceptedColumnsKeys": "受け入れられる列/キー:",
+        "positivePromptColumn": "'プロンプト'または'ポジティブプロンプト'",
+        "insertPlaceholder": "プレースホルダーを挿入",
+        "negativePrompt": "ネガティブプロンプト",
+        "noTemplates": "テンプレートがありません",
+        "noMatchingTemplates": "マッチするテンプレートがありません",
+        "promptTemplatesDesc1": "プロンプトテンプレートは、プロンプトボックスに書き込むプロンプトにテキストを追加します。",
+        "promptTemplatesDesc2": "テンプレート内でプロンプトを含める場所を指定するには <Pre>{{placeholder}}</Pre> のプレースホルダーの文字列を使用します。",
+        "promptTemplatesDesc3": "プレースホルダーを省略すると、テンプレートはプロンプトの末尾に追加されます。",
+        "positivePrompt": "ポジティブプロンプト",
+        "shared": "共有",
+        "sharedTemplates": "テンプレートを共有",
+        "templateDeleted": "プロンプトテンプレートを削除しました",
+        "unableToDeleteTemplate": "プロンプトテンプレートを削除できません",
+        "updatePromptTemplate": "プロンプトテンプレートをアップデート",
+        "useForTemplate": "プロンプトテンプレートに使用する",
+        "viewList": "テンプレートリストを表示",
+        "viewModeTooltip": "現在選択されているテンプレートでは、プロンプトはこのようになります。プロンプトを編集するには、テキストボックス内の任意の場所をクリックしてください。",
+        "togglePromptPreviews": "プロンプトプレビューを切り替える"
     },
     "upscaling": {
         "upscaleModel": "アップスケールモデル",
         "postProcessingModel": "ポストプロセスモデル",
         "upscale": "アップスケール",
-        "scale": "スケール"
+        "scale": "スケール",
+        "creativity": "創造性",
+        "exceedsMaxSize": "アップスケール設定が最大サイズ制限を超えています",
+        "exceedsMaxSizeDetails": "アップスケールの上限は{{max Upscale Dimension}} x {{max Upscale Dimension}}ピクセルです。画像を小さくするか、スケールの選択範囲を小さくしてください。",
+        "structure": "構造",
+        "postProcessingMissingModelWarning": "後処理 (img2img) モデルをインストールするには、<LinkComponent>モデル マネージャー</LinkComponent> にアクセスしてください。",
+        "missingModelsWarning": "必要なモデルをインストールするには、<LinkComponent>モデル マネージャー</LinkComponent> にアクセスしてください。",
+        "mainModelDesc": "メインモデル（SD1.5またはSDXLアーキテクチャ）",
+        "tileControlNetModelDesc": "選択したメインモデルアーキテクチャのタイルコントロールネットモデル",
+        "upscaleModelDesc": "アップスケール（img2img）モデル",
+        "missingUpscaleInitialImage": "アップスケール用の初期画像がありません",
+        "missingUpscaleModel": "アップスケールモデルがありません",
+        "missingTileControlNetModel": "有効なタイル コントロールネットモデルがインストールされていません",
+        "incompatibleBaseModel": "アップスケーリングにサポートされていないメインモデルアーキテクチャです",
+        "incompatibleBaseModelDesc": "アップスケーリングはSD1.5およびSDXLアーキテクチャモデルでのみサポートされています。アップスケーリングを有効にするには、メインモデルを変更してください。"
     },
     "sdxl": {
         "denoisingStrength": "ノイズ除去強度",
@@ -1891,7 +2429,34 @@
             "minimum": "最小",
             "publish": "公開",
             "unpublish": "非公開",
-            "publishedWorkflowInputs": "インプット"
+            "publishedWorkflowInputs": "インプット",
+            "workflowLocked": "ワークフローがロックされました",
+            "workflowLockedPublished": "公開済みのワークフローは編集用にロックされています。\nワークフローを非公開にして編集したり、コピーを作成したりできます。",
+            "workflowLockedDuringPublishing": "公開の構成中にワークフローがロックされます。",
+            "selectOutputNode": "出力ノードを選択",
+            "changeOutputNode": "出力ノードの変更",
+            "unpublishableInputs": "これらの公開できない入力は省略されます",
+            "noPublishableInputs": "公開可能な入力はありません",
+            "noOutputNodeSelected": "出力ノードが選択されていません",
+            "cannotPublish": "ワークフローを公開できません",
+            "publishWarnings": "警告",
+            "errorWorkflowHasUnsavedChanges": "ワークフローに保存されていない変更があります",
+            "errorWorkflowHasUnpublishableNodes": "ワークフローにはバッチ、ジェネレータ、またはメタデータ抽出ノードがあります",
+            "errorWorkflowHasInvalidGraph": "ワークフロー グラフが無効です (詳細については [呼び出し] ボタンにマウスを移動してください)",
+            "errorWorkflowHasNoOutputNode": "出力ノードが選択されていません",
+            "warningWorkflowHasNoPublishableInputFields": "公開可能な入力フィールドが選択されていません - 公開されたワークフローはデフォルト値のみで実行されます",
+            "warningWorkflowHasUnpublishableInputFields": "ワークフローには公開できない入力がいくつかあります。これらは公開されたワークフローから省略されます",
+            "publishFailed": "公開失敗",
+            "publishFailedDesc": "ワークフローの公開中に問題が発生しました。もう一度お試しください。",
+            "publishSuccess": "ワークフローを公開しています",
+            "publishSuccessDesc": "<LinkComponent>プロジェクト ダッシュボード</LinkComponent> をチェックして進捗状況を確認してください。",
+            "publishInProgress": "公開中",
+            "publishedWorkflowIsLocked": "公開されたワークフローはロックされています",
+            "publishingValidationRun": "公開検証実行",
+            "publishingValidationRunInProgress": "公開検証の実行が進行中です。",
+            "publishedWorkflowsLocked": "公開済みのワークフローはロックされており、編集または実行できません。このワークフローを編集または実行するには、ワークフローを非公開にするか、コピーを保存してください。",
+            "selectingOutputNode": "出力ノードの選択",
+            "selectingOutputNodeDesc": "ノードをクリックして、ワークフローの出力ノードとして選択します。"
         },
         "chooseWorkflowFromLibrary": "ライブラリからワークフローを選択",
         "unnamedWorkflow": "名前のないワークフロー",
@@ -1954,15 +2519,23 @@
             "models": "モデル",
             "canvas": "キャンバス",
             "metadata": "メタデータ",
-            "queue": "キュー"
+            "queue": "キュー",
+            "logNamespaces": "ログのネームスペース",
+            "dnd": "ドラッグ&ドロップ",
+            "config": "構成",
+            "generation": "生成",
+            "events": "イベント"
         },
         "logLevel": {
             "debug": "Debug",
             "info": "Info",
             "error": "Error",
             "fatal": "Fatal",
-            "warn": "Warn"
-        }
+            "warn": "Warn",
+            "logLevel": "ログレベル",
+            "trace": "追跡"
+        },
+        "enableLogging": "ログを有効にする"
     },
     "dynamicPrompts": {
         "promptsPreview": "プロンプトプレビュー",
@@ -1978,5 +2551,34 @@
         "dynamicPrompts": "ダイナミックプロンプト",
         "loading": "ダイナミックプロンプトを生成...",
         "maxPrompts": "最大プロンプト"
+    },
+    "upsell": {
+        "inviteTeammates": "チームメートを招待",
+        "professional": "プロフェッショナル",
+        "professionalUpsell": "InvokeのProfessional Editionでご利用いただけます。詳細については、こちらをクリックするか、invoke.com/pricingをご覧ください。",
+        "shareAccess": "共有アクセス"
+    },
+    "newUserExperience": {
+        "toGetStartedLocal": "始めるには、Invoke の実行に必要なモデルをダウンロードまたはインポートしてください。次に、ボックスにプロンプトを入力し、<StrongComponent>Invoke</StrongComponent> をクリックして最初の画像を生成します。プロンプトテンプレートを選択すると、結果が向上します。画像は <StrongComponent>Gallery</StrongComponent> に直接保存するか、<StrongComponent>Canvas</StrongComponent> で編集するかを選択できます。",
+        "toGetStarted": "開始するには、ボックスにプロンプトを入力し、<StrongComponent>Invoke</StrongComponent> をクリックして最初の画像を生成します。プロンプトテンプレートを選択すると、結果が向上します。画像は <StrongComponent>Gallery</StrongComponent> に直接保存するか、<StrongComponent>Canvas</StrongComponent> で編集するかを選択できます。",
+        "toGetStartedWorkflow": "開始するには、左側のフィールドに入力し、<StrongComponent>Invoke</StrongComponent> をクリックして画像を生成します。他のワークフローも試してみたい場合は、ワークフロータイトルの横にある<StrongComponent>フォルダアイコン</StrongComponent> をクリックすると、試せる他のテンプレートのリストが表示されます。",
+        "gettingStartedSeries": "さらに詳しいガイダンスが必要ですか? Invoke Studio の可能性を最大限に引き出すためのヒントについては、<LinkComponent>入門シリーズ</LinkComponent>をご覧ください。",
+        "lowVRAMMode": "最高のパフォーマンスを得るには、<LinkComponent>低 VRAM ガイド</LinkComponent>に従ってください。",
+        "noModelsInstalled": "モデルがインストールされていないようです。<DownloadStarterModelsButton>スターターモデルバンドルをダウンロード</DownloadStarterModelsButton>するか、<ImportModelsButton>モデルをインポート</ImportModelsButton>してください。"
+    },
+    "whatsNew": {
+        "whatsNewInInvoke": "Invokeの新機能",
+        "items": [
+            "インペインティング: マスクごとのノイズ レベルとノイズ除去の制限。",
+            "キャンバス: SDXL のアスペクト比がスマートになり、スクロールによるズームが改善されました。"
+        ],
+        "readReleaseNotes": "リリースノートを読む",
+        "watchRecentReleaseVideos": "最近のリリースビデオを見る",
+        "watchUiUpdatesOverview": "Watch UI アップデートの概要"
+    },
+    "supportVideos": {
+        "supportVideos": "サポートビデオ",
+        "gettingStarted": "はじめる",
+        "watch": "ウォッチ"
     }
 }

invokeai/frontend/web/public/locales/vi.json

@@ -74,7 +74,7 @@
         "bulkDownloadFailed": "Tải Xuống Thất Bại",
         "bulkDownloadRequestFailed": "Có Vấn Đề Khi Đang Chuẩn Bị Tải Xuống",
         "download": "Tải Xuống",
-        "dropOrUpload": "$t(gallery.drop) Hoặc Tải Lên",
+        "dropOrUpload": "Kéo Thả Hoặc Tải Lên",
         "currentlyInUse": "Hình ảnh này hiện đang sử dụng các tính năng sau:",
         "deleteImagePermanent": "Ảnh đã xoá không thể phục hồi.",
         "exitSearch": "Thoát Tìm Kiếm Hình Ảnh",
@@ -111,7 +111,7 @@
         "noImageSelected": "Không Có Ảnh Được Chọn",
         "noImagesInGallery": "Không Có Ảnh Để Hiển Thị",
         "assetsTab": "Tài liệu bạn đã tải lên để dùng cho dự án của mình.",
-        "imagesTab": "hình bạn vừa được tạo và lưu trong Invoke.",
+        "imagesTab": "Ảnh bạn vừa được tạo và lưu trong Invoke.",
         "loading": "Đang Tải",
         "oldestFirst": "Cũ Nhất Trước",
         "exitCompare": "Ngừng So Sánh",
@@ -122,7 +122,8 @@
         "boardsSettings": "Thiết Lập Bảng",
         "imagesSettings": "Cài Đặt Ảnh Trong Thư Viện Ảnh",
         "assets": "Tài Nguyên",
-        "images": "Hình Ảnh"
+        "images": "Hình Ảnh",
+        "useForPromptGeneration": "Dùng Để Tạo Sinh Lệnh"
     },
     "common": {
         "ipAdapter": "IP Adapter",
@@ -254,9 +255,18 @@
         "options_withCount_other": "{{count}} thiết lập"
     },
     "prompt": {
-        "addPromptTrigger": "Thêm Prompt Trigger",
+        "addPromptTrigger": "Thêm Trigger Cho Lệnh",
         "compatibleEmbeddings": "Embedding Tương Thích",
-        "noMatchingTriggers": "Không có trigger phù hợp"
+        "noMatchingTriggers": "Không có trigger phù hợp",
+        "generateFromImage": "Tạo sinh lệnh từ ảnh",
+        "expandCurrentPrompt": "Mở Rộng Lệnh Hiện Tại",
+        "uploadImageForPromptGeneration": "Tải Ảnh Để Tạo Sinh Lệnh",
+        "expandingPrompt": "Đang mở rộng lệnh...",
+        "resultTitle": "Mở Rộng Lệnh Hoàn Tất",
+        "resultSubtitle": "Chọn phương thức mở rộng lệnh:",
+        "replace": "Thay Thế",
+        "insert": "Chèn",
+        "discard": "Huỷ Bỏ"
     },
     "queue": {
         "resume": "Tiếp Tục",
@@ -453,6 +463,16 @@
             "applyFilter": {
                 "title": "Áp Dụng Bộ Lộc",
                 "desc": "Áp dụng bộ lọc đang chờ sẵn cho layer được chọn."
+            },
+            "settings": {
+                "behavior": "Hành Vi",
+                "display": "Hiển Thị",
+                "grid": "Lưới",
+                "debug": "Gỡ Lỗi"
+            },
+            "toggleNonRasterLayers": {
+                "title": "Bật/Tắt Layer Không Thuộc Dạng Raster",
+                "desc": "Hiện hoặc ẩn tất cả layer không thuộc dạng raster (Layer Điều Khiển Được, Lớp Phủ Inpaint, Chỉ Dẫn Khu Vực)."
             }
         },
         "workflows": {
@@ -695,7 +715,7 @@
         "cancel": "Huỷ",
         "huggingFace": "HuggingFace (HF)",
         "huggingFacePlaceholder": "chủ-sỡ-hữu/tên-model",
-        "includesNModels": "Thêm vào {{n}} model và dependency của nó",
+        "includesNModels": "Thêm vào {{n}} model và dependency của nó.",
         "localOnly": "chỉ ở trên máy chủ",
         "manual": "Thủ Công",
         "convertToDiffusersHelpText4": "Đây là quá trình diễn ra chỉ một lần. Nó có thể tốn tầm 30-60 giây tuỳ theo thông số kỹ thuật của máy tính.",
@@ -742,7 +762,7 @@
         "simpleModelPlaceholder": "Url hoặc đường đẫn đến tệp hoặc thư mục chứa diffusers trong máy chủ",
         "selectModel": "Chọn Model",
         "spandrelImageToImage": "Hình Ảnh Sang Hình Ảnh (Spandrel)",
-        "starterBundles": "Quà Tân Thủ",
+        "starterBundles": "Gói Khởi Đầu",
         "vae": "VAE",
         "urlOrLocalPath": "URL / Đường Dẫn",
         "triggerPhrases": "Từ Ngữ Kích Hoạt",
@@ -794,7 +814,30 @@
         "manageModels": "Quản Lý Model",
         "hfTokenReset": "Làm Mới HF Token",
         "relatedModels": "Model Liên Quan",
-        "showOnlyRelatedModels": "Liên Quan"
+        "showOnlyRelatedModels": "Liên Quan",
+        "installedModelsCount": "Đã tải {{installed}} trên {{total}} model.",
+        "allNModelsInstalled": "Đã tải tất cả {{count}} model",
+        "nToInstall": "Còn {{count}} để tải",
+        "nAlreadyInstalled": "Có {{count}} đã tải",
+        "bundleAlreadyInstalled": "Gói đã được cài sẵn",
+        "bundleAlreadyInstalledDesc": "Tất cả model trong gói {{bundleName}} đã được cài sẵn.",
+        "launchpadTab": "Launchpad",
+        "launchpad": {
+            "welcome": "Chào mừng đến Trình Quản Lý Model",
+            "description": "Invoke yêu cầu tải model nhằm tối ưu hoá các tính năng trên nền tảng. Chọn tải các phương án thủ công hoặc khám phá các model khởi đầu thích hợp.",
+            "manualInstall": "Tải Thủ Công",
+            "urlDescription": "Tải model bằng URL hoặc đường dẫn trên máy. Phù hợp để cụ thể model muốn thêm vào.",
+            "huggingFaceDescription": "Duyệt và cài đặt model từ các repository trên HuggingFace.",
+            "scanFolderDescription": "Quét một thư mục trên máy để tự động tra và tải model.",
+            "recommendedModels": "Model Khuyến Nghị",
+            "exploreStarter": "Hoặc duyệt tất cả model khởi đầu có sẵn",
+            "quickStart": "Gói Khởi Đầu Nhanh",
+            "bundleDescription": "Các gói đều bao gồm những model cần thiết cho từng nhánh model và những model cơ sở đã chọn lọc để bắt đầu.",
+            "browseAll": "Hoặc duyệt tất cả model có sẵn:",
+            "stableDiffusion15": "Stable Diffusion 1.5",
+            "sdxl": "SDXL",
+            "fluxDev": "FLUX.1 dev"
+        }
     },
     "metadata": {
         "guidance": "Hướng Dẫn",
@@ -802,7 +845,7 @@
         "imageDetails": "Chi Tiết Ảnh",
         "createdBy": "Được Tạo Bởi",
         "parsingFailed": "Lỗi Cú Pháp",
-        "canvasV2Metadata": "Canvas",
+        "canvasV2Metadata": "Layer Canvas",
         "parameterSet": "Dữ liệu tham số {{parameter}}",
         "positivePrompt": "Lệnh Tích Cực",
         "recallParameter": "Gợi Nhớ {{label}}",
@@ -1474,6 +1517,20 @@
                 "Lát khối liền mạch bức ảnh theo trục ngang."
             ],
             "heading": "Lát Khối Liền Mạch Trục X"
+        },
+        "tileSize": {
+            "heading": "Kích Thước Khối",
+            "paragraphs": [
+                "Điều chỉnh kích thước của khối trong quá trình upscale. Khối càng lớn, bộ nhớ được sử dụng càng nhiều, nhưng có thể tạo sinh ảnh tốt hơn.",
+                "Model SD1.5 mặt định là 768, trong khi SDXL mặc định là 1024. Giảm kích thước khối nếu các gặp vấn đề bộ nhớ."
+            ]
+        },
+        "tileOverlap": {
+            "heading": "Chồng Chéo Khối",
+            "paragraphs": [
+                "Điều chỉnh sự chồng chéo giữa các khối liền kề trong quá trình upscale. Giá trị chồng chép lớn giúp giảm sự rõ nét của các chỗ nối nhau, nhưng ngốn nhiều bộ nhớ hơn.",
+                "Giá trị mặc định (128) hoạt động tốt với đa số trường hợp, nhưng bạn có thể điều chỉnh cho phù hợp với nhu cầu cụ thể và hạn chế về bộ nhớ."
+            ]
         }
     },
     "models": {
@@ -1487,7 +1544,8 @@
         "defaultVAE": "VAE Mặc Định",
         "noMatchingModels": "Không có Model phù hợp",
         "noModelsAvailable": "Không có model",
-        "selectModel": "Chọn Model"
+        "selectModel": "Chọn Model",
+        "noCompatibleLoRAs": "Không Có LoRAs Tương Thích"
     },
     "parameters": {
         "postProcessing": "Xử Lý Hậu Kỳ (Shift + U)",
@@ -1538,7 +1596,10 @@
             "modelIncompatibleBboxHeight": "Chiều dài hộp giới hạn là {{height}} nhưng {{model}} yêu cầu bội số của {{multiple}}",
             "modelIncompatibleScaledBboxHeight": "Chiều dài hộp giới hạn theo tỉ lệ là {{height}} nhưng {{model}} yêu cầu bội số của {{multiple}}",
             "modelIncompatibleScaledBboxWidth": "Chiều rộng hộp giới hạn theo tỉ lệ là {{width}} nhưng {{model}} yêu cầu bội số của {{multiple}}",
-            "modelDisabledForTrial": "Tạo sinh với {{modelName}} là không thể với tài khoản trial. Vào phần thiết lập tài khoản để nâng cấp."
+            "modelDisabledForTrial": "Tạo sinh với {{modelName}} là không thể với tài khoản trial. Vào phần thiết lập tài khoản để nâng cấp.",
+            "fluxKontextMultipleReferenceImages": "Chỉ có thể dùng 1 Ảnh Mẫu cùng lúc với Flux Kontext",
+            "promptExpansionPending": "Trong quá trình mở rộng lệnh",
+            "promptExpansionResultPending": "Hãy chấp thuận hoặc huỷ bỏ kết quả mở rộng lệnh của bạn"
         },
         "cfgScale": "Thang CFG",
         "useSeed": "Dùng Hạt Giống",
@@ -1869,7 +1930,8 @@
             "canvasGroup": "Canvas",
             "copyCanvasToClipboard": "Sao Chép Canvas Vào Clipboard",
             "copyToClipboard": "Sao Chép Vào Clipboard",
-            "copyBboxToClipboard": "Sao Chép Hộp Giới Hạn Vào Clipboard"
+            "copyBboxToClipboard": "Sao Chép Hộp Giới Hạn Vào Clipboard",
+            "newResizedControlLayer": "Layer Điều Khiển Được Đã Chỉnh Kích Thước Mới"
         },
         "stagingArea": {
             "saveToGallery": "Lưu Vào Thư Viện Ảnh",
@@ -2050,7 +2112,11 @@
             },
             "isolatedLayerPreviewDesc": "Có hay không hiển thị riêng layer này khi thực hiện các thao tác như lọc hay biến đổi.",
             "isolatedStagingPreview": "Xem Trước Tổng Quan Phần Cô Lập",
-            "isolatedPreview": "Xem Trước Phần Cô Lập"
+            "isolatedPreview": "Xem Trước Phần Cô Lập",
+            "saveAllImagesToGallery": {
+                "label": "Chuyển Sản Phẩm Tạo Sinh Mới Vào Thư Viện Ảnh",
+                "alert": "Đang chuyển sản phẩm tạo sinh mới vào Thư Viện Ảnh, bỏ qua Canvas"
+            }
         },
         "tool": {
             "eraser": "Tẩy",
@@ -2062,8 +2128,8 @@
             "colorPicker": "Chọn Màu"
         },
         "mergingLayers": "Đang gộp layer",
-        "controlLayerEmptyState": "<UploadButton>Tải lên ảnh</UploadButton>, kéo thả ảnh từ <GalleryButton>thư viện</GalleryButton> vào layer này, <PullBboxButton>kéo hộp giới hạn vào layer này</PullBboxButton>, hoặc vẽ trên canvas để bắt đầu.",
-        "referenceImageEmptyState": "<UploadButton>Tải lên hình ảnh</UploadButton>, kéo ảnh từ <GalleryButton>thư viện ảnh</GalleryButton> vào layer này, hoặc <PullBboxButton>kéo hộp giới hạn vào layer này</PullBboxButton> để bắt đầu.",
+        "controlLayerEmptyState": "<UploadButton>Tải lên ảnh</UploadButton>, kéo thả ảnh từ thư viện ảnh vào layer này, <PullBboxButton>kéo hộp giới hạn vào layer này</PullBboxButton>, hoặc vẽ trên canvas để bắt đầu.",
+        "referenceImageEmptyState": "<UploadButton>Tải lên hình ảnh</UploadButton> hoặc kéo ảnh từ thư viện ảnh vào Ảnh Mẫu để bắt đầu.",
         "useImage": "Dùng Hình Ảnh",
         "resetCanvasLayers": "Khởi Động Lại Layer Canvas",
         "asRasterLayer": "Như $t(controlLayers.rasterLayer)",
@@ -2115,7 +2181,18 @@
         "addDenoiseLimit": "Thêm $t(controlLayers.denoiseLimit)",
         "imageNoise": "Độ Nhiễu Hình Ảnh",
         "denoiseLimit": "Giới Hạn Khử Nhiễu",
-        "addImageNoise": "Thêm $t(controlLayers.imageNoise)"
+        "addImageNoise": "Thêm $t(controlLayers.imageNoise)",
+        "referenceImageEmptyStateWithCanvasOptions": "<UploadButton>Tải lên hình ảnh</UploadButton>, kéo ảnh từ thư viện ảnh vào Ảnh Mẫu này, hoặc <PullBboxButton>kéo hộp giới hạn vào Ảnh Mẫu này</PullBboxButton> để bắt đầu.",
+        "uploadOrDragAnImage": "Kéo ảnh từ thư viện ảnh hoặc <UploadButton>tải lên ảnh</UploadButton>.",
+        "exportCanvasToPSD": "Xuất Canvas Thành File PSD",
+        "ruleOfThirds": "Hiển Thị Quy Tắc Một Phần Ba",
+        "showNonRasterLayers": "Hiển Thị Layer Không Thuộc Dạng Raster (Shift + H)",
+        "hideNonRasterLayers": "Ẩn Layer Không Thuộc Dạng Raster (Shift + H)",
+        "autoSwitch": {
+            "off": "Tắt",
+            "switchOnStart": "Khi Bắt Đầu",
+            "switchOnFinish": "Khi Kết Thúc"
+        }
     },
     "stylePresets": {
         "negativePrompt": "Lệnh Tiêu Cực",
@@ -2161,7 +2238,8 @@
         "deleteImage": "Xoá Hình Ảnh",
         "exportPromptTemplates": "Xuất Mẫu Trình Bày Cho Lệnh Ra (CSV)",
         "templateDeleted": "Mẫu trình bày cho lệnh đã được xoá",
-        "unableToDeleteTemplate": "Không thể xoá mẫu trình bày cho lệnh"
+        "unableToDeleteTemplate": "Không thể xoá mẫu trình bày cho lệnh",
+        "togglePromptPreviews": "Bật/Tắt Xem Trước Lệnh"
     },
     "system": {
         "enableLogging": "Bật Chế Độ Ghi Log",
@@ -2257,7 +2335,26 @@
         "workflowUnpublished": "Workflow Đã Được Ngừng Đăng Tải",
         "problemUnpublishingWorkflow": "Có Vấn Đề Khi Ngừng Đăng Tải Workflow",
         "chatGPT4oIncompatibleGenerationMode": "ChatGPT 4o chỉ hỗ trợ Từ Ngữ Sang Hình Ảnh và Hình Ảnh Sang Hình Ảnh. Hãy dùng model khác cho các tác vụ Inpaint và Outpaint.",
-        "imagenIncompatibleGenerationMode": "Google {{model}} chỉ hỗ trợ Từ Ngữ Sang Hình Ảnh. Dùng các model khác cho Hình Ảnh Sang Hình Ảnh, Inpaint và Outpaint."
+        "imagenIncompatibleGenerationMode": "Google {{model}} chỉ hỗ trợ Từ Ngữ Sang Hình Ảnh. Dùng các model khác cho Hình Ảnh Sang Hình Ảnh, Inpaint và Outpaint.",
+        "fluxKontextIncompatibleGenerationMode": "FLUX Kontext không hỗ trợ tạo sinh từ hình ảnh từ canvas. Thử sử dụng Ảnh Mẫu và tắt các Layer Dạng Raster.",
+        "noRasterLayers": "Không Tìm Thấy Layer Dạng Raster",
+        "noRasterLayersDesc": "Tạo ít nhất một layer dạng raster để xuất file PSD",
+        "noActiveRasterLayers": "Không Có Layer Dạng Raster Hoạt Động",
+        "noActiveRasterLayersDesc": "Khởi động ít nhất một layer dạng raster để xuất file PSD",
+        "noVisibleRasterLayers": "Không Có Layer Dạng Raster Hiển Thị",
+        "noVisibleRasterLayersDesc": "Khởi động ít nhất một layer dạng raster để xuất file PSD",
+        "invalidCanvasDimensions": "Kích Thước Canvas Không Phù Hợp",
+        "canvasTooLarge": "Canvas Quá Lớn",
+        "canvasTooLargeDesc": "Kích thước canvas vượt mức tối đa cho phép để xuất file PSD. Giảm cả chiều dài và chiều rộng chủa canvas và thử lại.",
+        "failedToProcessLayers": "Thất Bại Khi Xử Lý Layer",
+        "psdExportSuccess": "Xuất File PSD Hoàn Tất",
+        "psdExportSuccessDesc": "Thành công xuất {{count}} layer sang file PSD",
+        "problemExportingPSD": "Có Vấn Đề Khi Xuất File PSD",
+        "canvasManagerNotAvailable": "Trình Quản Lý Canvas Không Có Sẵn",
+        "noValidLayerAdapters": "Không có Layer Adaper Phù Hợp",
+        "promptGenerationStarted": "Trình tạo sinh lệnh khởi động",
+        "uploadAndPromptGenerationFailed": "Thất bại khi tải lên ảnh để tạo sinh lệnh",
+        "promptExpansionFailed": "Có vấn đề xảy ra. Hãy thử mở rộng lệnh lại."
     },
     "ui": {
         "tabs": {
@@ -2271,6 +2368,55 @@
             "queue": "Queue (Hàng Đợi)",
             "workflows": "Workflow (Luồng Làm Việc)",
             "workflowsTab": "$t(common.tab) $t(ui.tabs.workflows)"
+        },
+        "launchpad": {
+            "workflowsTitle": "Đi sâu hơn với Workflow.",
+            "upscalingTitle": "Upscale và thêm chi tiết.",
+            "canvasTitle": "Biên tập và làm đẹp trên Canvas.",
+            "generateTitle": "Tạo sinh ảnh từ lệnh chữ.",
+            "modelGuideText": "Muốn biết lệnh nào tốt nhất cho từng model chứ?",
+            "modelGuideLink": "Xem thêm Hướng Dẫn Model.",
+            "workflows": {
+                "description": "Workflow là các template tái sử dụng được sẽ tự động hoá các tác vụ tạo sinh ảnh, cho phép bạn nhanh chóng thực hiện cách thao tác phức tạp và nhận được kết quả nhất quán.",
+                "learnMoreLink": "Học thêm cách tạo ra workflow",
+                "browseTemplates": {
+                    "title": "Duyệt Template Workflow",
+                    "description": "Chọn từ các workflow có sẵn cho những tác vụ cơ bản"
+                },
+                "createNew": {
+                    "title": "Tạo workflow mới",
+                    "description": "Tạo workflow mới từ ban đầu"
+                },
+                "loadFromFile": {
+                    "title": "Tải workflow từ tệp",
+                    "description": "Tải lên workflow để bắt đầu với những thiết lập sẵn có"
+                }
+            },
+            "upscaling": {
+                "uploadImage": {
+                    "title": "Tải Ảnh Để Upscale",
+                    "description": "Nhấp hoặc kéo ảnh để upscale (JPG, PNG, WebP lên đến 100MB)"
+                },
+                "replaceImage": {
+                    "title": "Thay Thế Ảnh Hiện Tại",
+                    "description": "Nhấp hoặc kéo ảnh mới để thay thế cái hiện tại"
+                },
+                "imageReady": {
+                    "title": "Ảnh Đã Sẵn Sàng",
+                    "description": "Bấm 'Kích Hoạt' để chuẩn bị upscale"
+                },
+                "readyToUpscale": {
+                    "title": "Chuẩn bị upscale!",
+                    "description": "Điều chỉnh thiết lập bên dưới, sau đó bấm vào nút 'Khởi Động' để chuẩn bị upscale ảnh."
+                },
+                "upscaleModel": "Model Upscale",
+                "model": "Model",
+                "helpText": {
+                    "promptAdvice": "Khi upscale, dùng lệnh để mô tả phương thức và phong cách. Tránh mô tả các chi tiết cụ thể trong ảnh.",
+                    "styleAdvice": "Upscale thích hợp nhất cho phong cách chung của ảnh."
+                },
+                "scale": "Kích Thước"
+            }
         }
     },
     "workflows": {
@@ -2423,7 +2569,10 @@
         "postProcessingMissingModelWarning": "Đến <LinkComponent>Trình Quản Lý Model</LinkComponent> để tải model xử lý hậu kỳ (ảnh sang ảnh).",
         "missingModelsWarning": "Đến <LinkComponent>Trình Quản Lý Model</LinkComponent> để tải model cần thiết:",
         "incompatibleBaseModel": "Phiên bản model chính không được hỗ trợ để upscale",
-        "incompatibleBaseModelDesc": "Upscale chỉ hỗ trợ cho model phiên bản SD1.5 và SDXL. Đổi model chính để bật lại tính năng upscale."
+        "incompatibleBaseModelDesc": "Upscale chỉ hỗ trợ cho model phiên bản SD1.5 và SDXL. Đổi model chính để bật lại tính năng upscale.",
+        "tileControl": "Điều Chỉnh Khối",
+        "tileSize": "Kích Thước Khối",
+        "tileOverlap": "Chồng Chéo Khối"
     },
     "newUserExperience": {
         "toGetStartedLocal": "Để bắt đầu, hãy chắc chắn đã tải xuống hoặc thêm vào model cần để chạy Invoke. Sau đó, nhập lệnh vào hộp và nhấp chuột vào <StrongComponent>Kích Hoạt</StrongComponent> để tạo ra bức ảnh đầu tiên. Chọn một mẫu trình bày cho lệnh để cải thiện kết quả. Bạn có thể chọn để lưu ảnh trực tiếp vào <StrongComponent>Thư Viện Ảnh</StrongComponent> hoặc chỉnh sửa chúng ở <StrongComponent>Canvas</StrongComponent>.",
@@ -2439,8 +2588,9 @@
         "watchRecentReleaseVideos": "Xem Video Phát Hành Mới Nhất",
         "watchUiUpdatesOverview": "Xem Tổng Quan Về Những Cập Nhật Cho Giao Diện Người Dùng",
         "items": [
-            "Nvidia 50xx GPUs: Invoke sử dụng PyTorch 2.7.0, thứ tối quan trọng cho những GPU trên.",
-            "Mối Quan Hệ Model: Kết nối LoRA với model chính, và LoRA đó sẽ được hiển thị đầu danh sách."
+            "Tạo sinh ảnh nhanh hơn với Launchpad và thẻ Tạo Sinh đã cơ bản hoá.",
+            "Biên tập với lệnh bằng Flux Kontext Dev.",
+            "Xuất ra file PSD, ẩn số lượng lớn lớp phủ, sắp xếp model & ảnh — tất cả cho một giao diện đã thiết kế lại để chuyên điều khiển."
         ]
     },
     "upsell": {
@@ -2452,64 +2602,18 @@
     "supportVideos": {
         "supportVideos": "Video Hỗ Trợ",
         "gettingStarted": "Bắt Đầu Làm Quen",
-        "studioSessionsDesc1": "Xem thử <StudioSessionsPlaylistLink /> để hiểu rõ Invoke hơn.",
-        "studioSessionsDesc2": "Đến <DiscordLink /> để tham gia vào phiên trực tiếp và hỏi câu hỏi. Các phiên được tải lên danh sách phát vào các tuần.",
+        "watch": "Xem",
+        "studioSessionsDesc": "Tham gia <DiscordLink /> để xem các buổi phát trực tiếp và đặt câu hỏi. Các phiên được đăng lên trên playlist các tuần tiếp theo.",
         "videos": {
-            "howDoIDoImageToImageTransformation": {
-                "title": "Làm Sao Để Tôi Dùng Trình Biến Đổi Hình Ảnh Sang Hình Ảnh?",
-                "description": "Hướng dẫn cách thực hiện biến đổi ảnh sang ảnh trong Invoke."
+            "gettingStarted": {
+                "title": "Bắt Đầu Với Invoke",
+                "description": "Hoàn thành các video bao hàm mọi thứ bạn cần biết để bắt đầu với Invoke, từ tạo bức ảnh đầu tiên đến các kỹ thuật phức tạp khác."
             },
-            "howDoIUseGlobalIPAdaptersAndReferenceImages": {
-                "description": "Giới thiệu về ảnh mẫu và IP adapter toàn vùng.",
-                "title": "Làm Sao Để Tôi Dùng IP Adapter Toàn Vùng Và Ảnh Mẫu?"
-            },
-            "creatingAndComposingOnInvokesControlCanvas": {
-                "description": "Học cách sáng tạo ảnh bằng trình điều khiển canvas của Invoke.",
-                "title": "Sáng Tạo Trong Trình Kiểm Soát Canvas Của Invoke"
-            },
-            "upscaling": {
-                "description": "Cách upscale ảnh bằng bộ công cụ của Invoke để nâng cấp độ phân giải.",
-                "title": "Upscale (Nâng Cấp Chất Lượng Hình Ảnh)"
-            },
-            "howDoIGenerateAndSaveToTheGallery": {
-                "title": "Làm Sao Để Tôi Tạo Sinh Và Lưu Vào Thư Viện Ảnh?",
-                "description": "Các bước để tạo sinh và lưu ảnh vào thư viện ảnh."
-            },
-            "howDoIEditOnTheCanvas": {
-                "description": "Hướng dẫn chỉnh sửa ảnh trực tiếp trên canvas.",
-                "title": "Làm Sao Để Tôi Chỉnh Sửa Trên Canvas?"
-            },
-            "howDoIUseControlNetsAndControlLayers": {
-                "title": "Làm Sao Để Tôi Dùng ControlNet và Layer Điều Khiển Được?",
-                "description": "Học cách áp dụng layer điều khiển được và controlnet vào ảnh của bạn."
-            },
-            "howDoIUseInpaintMasks": {
-                "title": "Làm Sao Để Tôi Dùng Lớp Phủ Inpaint?",
-                "description": "Cách áp dụng lớp phủ inpaint vào chỉnh sửa và thay đổi ảnh."
-            },
-            "howDoIOutpaint": {
-                "title": "Làm Sao Để Tôi Outpaint?",
-                "description": "Hướng dẫn outpaint bên ngoài viền ảnh gốc."
-            },
-            "creatingYourFirstImage": {
-                "description": "Giới thiệu về cách tạo ảnh từ ban đầu bằng công cụ Invoke.",
-                "title": "Tạo Hình Ảnh Đầu Tiên Của Bạn"
-            },
-            "usingControlLayersAndReferenceGuides": {
-                "description": "Học cách chỉ dẫn ảnh được tạo ra bằng layer điều khiển được và ảnh mẫu.",
-                "title": "Dùng Layer Điều Khiển Được và Chỉ Dẫn Mẫu"
-            },
-            "understandingImageToImageAndDenoising": {
-                "title": "Hiểu Rõ Trình Hình Ảnh Sang Hình Ảnh Và Trình Khử Nhiễu",
-                "description": "Tổng quan về trình biến đổi ảnh sang ảnh và trình khử nhiễu trong Invoke."
-            },
-            "exploringAIModelsAndConceptAdapters": {
-                "title": "Khám Phá Model AI Và Khái Niệm Về Adapter",
-                "description": "Đào sâu vào model AI và cách dùng những adapter để điều khiển một cách sáng tạo."
+            "studioSessions": {
+                "title": "Phiên Studio",
+                "description": "Đào sâu vào các phiên họp để khám phá những tính năng nâng cao của Invoke, sáng tạo workflow, và thảo luận cộng đồng."
             }
-        },
-        "controlCanvas": "Điều Khiển Canvas",
-        "watch": "Xem"
+        }
     },
     "modelCache": {
         "clearSucceeded": "Cache Model Đã Được Dọn",

invokeai/frontend/web/src/app/components/App.tsx

@@ -30,16 +30,16 @@ const App = ({ config = DEFAULT_CONFIG, studioInitAction }: Props) => {
   }, [clearStorage]);
 
   return (
-    <ErrorBoundary onReset={handleReset} FallbackComponent={AppErrorBoundaryFallback}>
-      <ThemeLocaleProvider>
+    <ThemeLocaleProvider>
+      <ErrorBoundary onReset={handleReset} FallbackComponent={AppErrorBoundaryFallback}>
         <Box id="invoke-app-wrapper" w="100dvw" h="100dvh" position="relative" overflow="hidden">
           <AppContent />
           {!didStudioInit && <Loading />}
         </Box>
         <GlobalHookIsolator config={config} studioInitAction={studioInitAction} />
         <GlobalModalIsolator />
-      </ThemeLocaleProvider>
-    </ErrorBoundary>
+      </ErrorBoundary>
+    </ThemeLocaleProvider>
   );
 };
 

invokeai/frontend/web/src/app/components/GlobalHookIsolator.tsx

@@ -2,6 +2,7 @@ import { useGlobalModifiersInit } from '@invoke-ai/ui-library';
 import { setupListeners } from '@reduxjs/toolkit/query';
 import type { StudioInitAction } from 'app/hooks/useStudioInitAction';
 import { useStudioInitAction } from 'app/hooks/useStudioInitAction';
+import { useSyncLangDirection } from 'app/hooks/useSyncLangDirection';
 import { useSyncQueueStatus } from 'app/hooks/useSyncQueueStatus';
 import { useLogger } from 'app/logging/useLogger';
 import { useSyncLoggingConfig } from 'app/logging/useSyncLoggingConfig';
@@ -15,6 +16,8 @@ import { useDndMonitor } from 'features/dnd/useDndMonitor';
 import { useDynamicPromptsWatcher } from 'features/dynamicPrompts/hooks/useDynamicPromptsWatcher';
 import { useStarterModelsToast } from 'features/modelManagerV2/hooks/useStarterModelsToast';
 import { useWorkflowBuilderWatcher } from 'features/nodes/components/sidePanel/workflow/IsolatedWorkflowBuilderWatcher';
+import { useSyncExecutionState } from 'features/nodes/hooks/useNodeExecutionState';
+import { useSyncNodeErrors } from 'features/nodes/store/util/fieldValidators';
 import { useReadinessWatcher } from 'features/queue/store/readiness';
 import { configChanged } from 'features/system/store/configSlice';
 import { selectLanguage } from 'features/system/store/systemSelectors';
@@ -47,10 +50,13 @@ export const GlobalHookIsolator = memo(
     useCloseChakraTooltipsOnDragFix();
     useNavigationApi();
     useDndMonitor();
+    useSyncNodeErrors();
+    useSyncLangDirection();
 
     // Persistent subscription to the queue counts query - canvas relies on this to know if there are pending
     // and/or in progress canvas sessions.
     useGetQueueCountsByDestinationQuery(queueCountArg);
+    useSyncExecutionState();
 
     useEffect(() => {
       i18n.changeLanguage(language);

invokeai/frontend/web/src/app/components/GlobalModalIsolator.tsx

@@ -1,10 +1,6 @@
 import { GlobalImageHotkeys } from 'app/components/GlobalImageHotkeys';
 import ChangeBoardModal from 'features/changeBoardModal/components/ChangeBoardModal';
 import { CanvasPasteModal } from 'features/controlLayers/components/CanvasPasteModal';
-import {
-  NewCanvasSessionDialog,
-  NewGallerySessionDialog,
-} from 'features/controlLayers/components/NewSessionConfirmationAlertDialog';
 import { CanvasManagerProviderGate } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
 import { DeleteImageModal } from 'features/deleteImageModal/components/DeleteImageModal';
 import { FullscreenDropzone } from 'features/dnd/FullscreenDropzone';
@@ -50,8 +46,6 @@ export const GlobalModalIsolator = memo(() => {
       <RefreshAfterResetModal />
       <DeleteBoardModal />
       <GlobalImageHotkeys />
-      <NewGallerySessionDialog />
-      <NewCanvasSessionDialog />
       <ImageContextMenu />
       <FullscreenDropzone />
       <VideosModal />

invokeai/frontend/web/src/app/components/InvokeAIUI.tsx

@@ -317,7 +317,7 @@ const InvokeAIUI = ({
     if (import.meta.env.MODE === 'development') {
       window.$store = $store;
     }
-    () => {
+    return () => {
       $store.set(undefined);
       if (import.meta.env.MODE === 'development') {
         window.$store = undefined;

invokeai/frontend/web/src/app/components/ThemeLocaleProvider.tsx

@@ -3,43 +3,39 @@ import 'overlayscrollbars/overlayscrollbars.css';
 import '@xyflow/react/dist/base.css';
 import 'common/components/OverlayScrollbars/overlayscrollbars.css';
 
-import { ChakraProvider, DarkMode, extendTheme, theme as _theme, TOAST_OPTIONS } from '@invoke-ai/ui-library';
+import { ChakraProvider, DarkMode, extendTheme, theme as baseTheme, TOAST_OPTIONS } from '@invoke-ai/ui-library';
+import { useStore } from '@nanostores/react';
+import { $direction } from 'app/hooks/useSyncLangDirection';
 import type { ReactNode } from 'react';
-import { memo, useEffect, useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
+import { memo, useMemo } from 'react';
 
 type ThemeLocaleProviderProps = {
   children: ReactNode;
 };
 
+const buildTheme = (direction: 'ltr' | 'rtl') => {
+  return extendTheme({
+    ...baseTheme,
+    direction,
+    shadows: {
+      ...baseTheme.shadows,
+      selected:
+        'inset 0px 0px 0px 3px var(--invoke-colors-invokeBlue-500), inset 0px 0px 0px 4px var(--invoke-colors-invokeBlue-800)',
+      hoverSelected:
+        'inset 0px 0px 0px 3px var(--invoke-colors-invokeBlue-400), inset 0px 0px 0px 4px var(--invoke-colors-invokeBlue-800)',
+      hoverUnselected:
+        'inset 0px 0px 0px 2px var(--invoke-colors-invokeBlue-300), inset 0px 0px 0px 3px var(--invoke-colors-invokeBlue-800)',
+      selectedForCompare:
+        'inset 0px 0px 0px 3px var(--invoke-colors-invokeGreen-300), inset 0px 0px 0px 4px var(--invoke-colors-invokeGreen-800)',
+      hoverSelectedForCompare:
+        'inset 0px 0px 0px 3px var(--invoke-colors-invokeGreen-200), inset 0px 0px 0px 4px var(--invoke-colors-invokeGreen-800)',
+    },
+  });
+};
+
 function ThemeLocaleProvider({ children }: ThemeLocaleProviderProps) {
-  const { i18n } = useTranslation();
-
-  const direction = i18n.dir();
-
-  const theme = useMemo(() => {
-    return extendTheme({
-      ..._theme,
-      direction,
-      shadows: {
-        ..._theme.shadows,
-        selected:
-          'inset 0px 0px 0px 3px var(--invoke-colors-invokeBlue-500), inset 0px 0px 0px 4px var(--invoke-colors-invokeBlue-800)',
-        hoverSelected:
-          'inset 0px 0px 0px 3px var(--invoke-colors-invokeBlue-400), inset 0px 0px 0px 4px var(--invoke-colors-invokeBlue-800)',
-        hoverUnselected:
-          'inset 0px 0px 0px 2px var(--invoke-colors-invokeBlue-300), inset 0px 0px 0px 3px var(--invoke-colors-invokeBlue-800)',
-        selectedForCompare:
-          'inset 0px 0px 0px 3px var(--invoke-colors-invokeGreen-300), inset 0px 0px 0px 4px var(--invoke-colors-invokeGreen-800)',
-        hoverSelectedForCompare:
-          'inset 0px 0px 0px 3px var(--invoke-colors-invokeGreen-200), inset 0px 0px 0px 4px var(--invoke-colors-invokeGreen-800)',
-      },
-    });
-  }, [direction]);
-
-  useEffect(() => {
-    document.body.dir = direction;
-  }, [direction]);
+  const direction = useStore($direction);
+  const theme = useMemo(() => buildTheme(direction), [direction]);
 
   return (
     <ChakraProvider theme={theme} toastOptions={TOAST_OPTIONS}>

invokeai/frontend/web/src/app/hooks/useStudioInitAction.ts

@@ -21,7 +21,6 @@ import { $isStylePresetsMenuOpen, activeStylePresetIdChanged } from 'features/st
 import { toast } from 'features/toast/toast';
 import { navigationApi } from 'features/ui/layouts/navigation-api';
 import { LAUNCHPAD_PANEL_ID, WORKSPACE_PANEL_ID } from 'features/ui/layouts/shared';
-import { activeTabCanvasRightPanelChanged } from 'features/ui/store/uiSlice';
 import { useLoadWorkflowWithDialog } from 'features/workflowLibrary/components/LoadWorkflowConfirmationAlertDialog';
 import { atom } from 'nanostores';
 import { useCallback, useEffect } from 'react';
@@ -165,7 +164,6 @@ export const useStudioInitAction = (action?: StudioInitAction) => {
           // Go to the generate tab, open the launchpad
           await navigationApi.focusPanel('generate', LAUNCHPAD_PANEL_ID);
           store.dispatch(paramsReset());
-          store.dispatch(activeTabCanvasRightPanelChanged('gallery'));
           break;
         case 'canvas':
           // Go to the canvas tab, open the launchpad

invokeai/frontend/web/src/app/hooks/useSyncLangDirection.ts

@@ -0,0 +1,36 @@
+import { useAssertSingleton } from 'common/hooks/useAssertSingleton';
+import { atom } from 'nanostores';
+import { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+
+/**
+ * Global atom storing the language direction, to be consumed by the Chakra theme.
+ *
+ * Why do we need this? We have a kind of catch-22:
+ * - The Chakra theme needs to know the language direction to apply the correct styles.
+ * - The language direction is determined by i18n and the language selection.
+ * - We want our error boundary to be themed.
+ * - It's possible that i18n can throw if the language selection is invalid or not supported.
+ *
+ * Previously, we had the logic in this file in the theme provider, which wrapped the error boundary. The error
+ * was properly themed. But then, if i18n threw in the theme provider, the error boundary does not catch the
+ * error. The app would crash to a white screen.
+ *
+ * We tried swapping the component hierarchy so that the error boundary wraps the theme provider, but then the
+ * error boundary isn't themed!
+ *
+ * The solution is to move this i18n direction logic out of the theme provider and into a hook that we can use
+ * within the error boundary. The error boundary will be themed, _and_ catch any i18n errors.
+ */
+export const $direction = atom<'ltr' | 'rtl'>('ltr');
+
+export const useSyncLangDirection = () => {
+  useAssertSingleton('useSyncLangDirection');
+  const { i18n, t } = useTranslation();
+
+  useEffect(() => {
+    const direction = i18n.dir();
+    $direction.set(direction);
+    document.body.dir = direction;
+  }, [i18n, t]);
+};

invokeai/frontend/web/src/app/logging/logger.ts

@@ -2,7 +2,7 @@ import { createLogWriter } from '@roarr/browser-log-writer';
 import { atom } from 'nanostores';
 import type { Logger, MessageSerializer } from 'roarr';
 import { ROARR, Roarr } from 'roarr';
-import { z } from 'zod/v4';
+import { z } from 'zod';
 
 const serializeMessage: MessageSerializer = (message) => {
   return JSON.stringify(message);

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/modelSelected.ts

@@ -1,7 +1,7 @@
 import { logger } from 'app/logging/logger';
 import type { AppStartListening } from 'app/store/middleware/listenerMiddleware';
 import { bboxSyncedToOptimalDimension, rgRefImageModelChanged } from 'features/controlLayers/store/canvasSlice';
-import { selectIsStaging } from 'features/controlLayers/store/canvasStagingAreaSlice';
+import { buildSelectIsStaging, selectCanvasSessionId } from 'features/controlLayers/store/canvasStagingAreaSlice';
 import { loraDeleted } from 'features/controlLayers/store/lorasSlice';
 import { modelChanged, syncedToOptimalDimension, vaeSelected } from 'features/controlLayers/store/paramsSlice';
 import { refImageModelChanged, selectReferenceImageEntities } from 'features/controlLayers/store/refImagesSlice';
@@ -152,7 +152,8 @@ export const addModelSelectedListener = (startAppListening: AppStartListening) =
       if (modelBase !== state.params.model?.base) {
         // Sync generate tab settings whenever the model base changes
         dispatch(syncedToOptimalDimension());
-        if (!selectIsStaging(state)) {
+        const isStaging = buildSelectIsStaging(selectCanvasSessionId(state))(state);
+        if (!isStaging) {
           // Canvas tab only syncs if not staging
           dispatch(bboxSyncedToOptimalDimension());
         }

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/modelsLoaded.ts

@@ -15,7 +15,11 @@ import { refImageModelChanged, selectRefImagesSlice } from 'features/controlLaye
 import { selectCanvasSlice } from 'features/controlLayers/store/selectors';
 import { getEntityIdentifier, isFLUXReduxConfig, isIPAdapterConfig } from 'features/controlLayers/store/types';
 import { modelSelected } from 'features/parameters/store/actions';
-import { postProcessingModelChanged, upscaleModelChanged } from 'features/parameters/store/upscaleSlice';
+import {
+  postProcessingModelChanged,
+  tileControlnetModelChanged,
+  upscaleModelChanged,
+} from 'features/parameters/store/upscaleSlice';
 import {
   zParameterCLIPEmbedModel,
   zParameterSpandrelImageToImageModel,
@@ -28,6 +32,7 @@ import type { AnyModelConfig } from 'services/api/types';
 import {
   isCLIPEmbedModelConfig,
   isControlLayerModelConfig,
+  isControlNetModelConfig,
   isFluxReduxModelConfig,
   isFluxVAEModelConfig,
   isIPAdapterModelConfig,
@@ -71,6 +76,7 @@ export const addModelsLoadedListener = (startAppListening: AppStartListening) =>
       handleControlAdapterModels(models, state, dispatch, log);
       handlePostProcessingModel(models, state, dispatch, log);
       handleUpscaleModel(models, state, dispatch, log);
+      handleTileControlNetModel(models, state, dispatch, log);
       handleIPAdapterModels(models, state, dispatch, log);
       handleT5EncoderModels(models, state, dispatch, log);
       handleCLIPEmbedModels(models, state, dispatch, log);
@@ -345,6 +351,46 @@ const handleUpscaleModel: ModelHandler = (models, state, dispatch, log) => {
   }
 };
 
+const handleTileControlNetModel: ModelHandler = (models, state, dispatch, log) => {
+  const selectedTileControlNetModel = state.upscale.tileControlnetModel;
+  const controlNetModels = models.filter(isControlNetModelConfig);
+
+  // If the currently selected model is available, we don't need to do anything
+  if (selectedTileControlNetModel && controlNetModels.some((m) => m.key === selectedTileControlNetModel.key)) {
+    return;
+  }
+
+  // The only way we have to identify a model as a tile model is by its name containing 'tile' :)
+  const tileModel = controlNetModels.find((m) => m.name.toLowerCase().includes('tile'));
+
+  // If we have a tile model, select it
+  if (tileModel) {
+    log.debug(
+      { selectedTileControlNetModel, tileModel },
+      'No selected tile ControlNet model or selected model is not available, selecting tile model'
+    );
+    dispatch(tileControlnetModelChanged(tileModel));
+    return;
+  }
+
+  // Otherwise, select the first available ControlNet model
+  const firstModel = controlNetModels[0] || null;
+  if (firstModel) {
+    log.debug(
+      { selectedTileControlNetModel, firstModel },
+      'No tile ControlNet model found, selecting first available ControlNet model'
+    );
+    dispatch(tileControlnetModelChanged(firstModel));
+    return;
+  }
+
+  // No available models, we should clear the selected model - but only if we have one selected
+  if (selectedTileControlNetModel) {
+    log.debug({ selectedTileControlNetModel }, 'Selected tile ControlNet model is not available, clearing');
+    dispatch(tileControlnetModelChanged(null));
+  }
+};
+
 const handleT5EncoderModels: ModelHandler = (models, state, dispatch, log) => {
   const selectedT5EncoderModel = state.params.t5EncoderModel;
   const t5EncoderModels = models.filter((m) => isT5EncoderModelConfig(m));

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/setDefaultSettings.ts

@@ -1,7 +1,7 @@
 import type { AppStartListening } from 'app/store/middleware/listenerMiddleware';
 import { isNil } from 'es-toolkit';
 import { bboxHeightChanged, bboxWidthChanged } from 'features/controlLayers/store/canvasSlice';
-import { selectIsStaging } from 'features/controlLayers/store/canvasStagingAreaSlice';
+import { buildSelectIsStaging, selectCanvasSessionId } from 'features/controlLayers/store/canvasStagingAreaSlice';
 import {
   heightChanged,
   setCfgRescaleMultiplier,
@@ -115,7 +115,8 @@ export const addSetDefaultSettingsListener = (startAppListening: AppStartListeni
         }
         const setSizeOptions = { updateAspectRatio: true, clamp: true };
 
-        const isStaging = selectIsStaging(getState());
+        const isStaging = buildSelectIsStaging(selectCanvasSessionId(state))(state);
+
         const activeTab = selectActiveTab(getState());
         if (activeTab === 'generate') {
           if (isParameterWidth(width)) {

invokeai/frontend/web/src/app/store/store.ts

@@ -31,7 +31,7 @@ import { diff } from 'jsondiffpatch';
 import dynamicMiddlewares from 'redux-dynamic-middlewares';
 import type { SerializeFunction, UnserializeFunction } from 'redux-remember';
 import { rememberEnhancer, rememberReducer } from 'redux-remember';
-import undoable from 'redux-undo';
+import undoable, { newHistory } from 'redux-undo';
 import { serializeError } from 'serialize-error';
 import { api } from 'services/api';
 import { authToastMiddleware } from 'services/api/authToastMiddleware';
@@ -118,6 +118,7 @@ const unserialize: UnserializeFunction = (data, key) => {
   if (!persistConfig) {
     throw new Error(`No persist config for slice "${key}"`);
   }
+  let state;
   try {
     const { initialState, migrate } = persistConfig;
     const parsed = JSON.parse(data);
@@ -141,13 +142,21 @@ const unserialize: UnserializeFunction = (data, key) => {
       },
       `Rehydrated slice "${key}"`
     );
-    return transformed;
+    state = transformed;
   } catch (err) {
     log.warn(
       { error: serializeError(err as Error) },
       `Error rehydrating slice "${key}", falling back to default initial state`
     );
-    return persistConfig.initialState;
+    state = persistConfig.initialState;
+  }
+
+  // If the slice is undoable, we need to wrap it in a new history - only nodes and canvas are undoable at the moment.
+  // TODO(psyche): make this automatic & remove the hard-coding for specific slices.
+  if (key === nodesSlice.name || key === canvasSlice.name) {
+    return newHistory([], state, []);
+  } else {
+    return state;
   }
 };
 

invokeai/frontend/web/src/common/components/InformationalPopover/constants.ts

@@ -67,6 +67,8 @@ export type Feature =
   | 'scale'
   | 'creativity'
   | 'structure'
+  | 'tileSize'
+  | 'tileOverlap'
   | 'optimizedDenoising'
   | 'fluxDevLicense';
 

invokeai/frontend/web/src/common/components/Picker/Picker.tsx

@@ -11,9 +11,13 @@ import {
   Text,
 } from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
+import { createSelector } from '@reduxjs/toolkit';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
 import { typedMemo } from 'common/util/typedMemo';
 import { NO_DRAG_CLASS, NO_WHEEL_CLASS } from 'features/nodes/types/constants';
+import { selectPickerCompactViewStates } from 'features/ui/store/uiSelectors';
+import { pickerCompactViewStateChanged } from 'features/ui/store/uiSlice';
 import type { AnyStore, ReadableAtom, Task, WritableAtom } from 'nanostores';
 import { atom, computed } from 'nanostores';
 import type { StoreValues } from 'nanostores/computed';
@@ -140,6 +144,10 @@ const NoMatchesFallbackWrapper = typedMemo(({ children }: PropsWithChildren) =>
 NoMatchesFallbackWrapper.displayName = 'NoMatchesFallbackWrapper';
 
 type PickerProps<T extends object> = {
+  /**
+   * Unique identifier for this picker instance. Used to persist compact view state.
+   */
+  pickerId?: string;
   /**
    * The options to display in the picker. This can be a flat array of options or an array of groups.
    */
@@ -204,10 +212,18 @@ type PickerProps<T extends object> = {
   initialGroupStates?: GroupStatusMap;
 };
 
+const buildSelectIsCompactView = (pickerId?: string) =>
+  createSelector([selectPickerCompactViewStates], (compactViewStates) => {
+    if (!pickerId) {
+      return true;
+    }
+    return compactViewStates[pickerId] ?? true;
+  });
+
 export type PickerContextState<T extends object> = {
   $optionsOrGroups: WritableAtom<OptionOrGroup<T>[]>;
   $groupStatusMap: WritableAtom<GroupStatusMap>;
-  $compactView: WritableAtom<boolean>;
+  isCompactView: boolean;
   $activeOptionId: WritableAtom<string | undefined>;
   $filteredOptions: WritableAtom<OptionOrGroup<T>[]>;
   $flattenedFilteredOptions: ReadableAtom<T[]>;
@@ -233,6 +249,7 @@ export type PickerContextState<T extends object> = {
   OptionComponent: React.ComponentType<{ option: T } & BoxProps>;
   NextToSearchBar?: React.ReactNode;
   searchable?: boolean;
+  pickerId?: string;
 };
 
 /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
@@ -503,6 +520,7 @@ const countOptions = <T extends object>(optionsOrGroups: OptionOrGroup<T>[]) =>
 
 export const Picker = typedMemo(<T extends object>(props: PickerProps<T>) => {
   const {
+    pickerId,
     getOptionId,
     optionsOrGroups,
     handleRef,
@@ -521,12 +539,12 @@ export const Picker = typedMemo(<T extends object>(props: PickerProps<T>) => {
   } = props;
   const rootRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
+
   const { $groupStatusMap, $areAllGroupsDisabled, toggleGroup } = useTogglableGroups(
     optionsOrGroups,
     initialGroupStates
   );
   const $activeOptionId = useAtom(getFirstOptionId(optionsOrGroups, getOptionId));
-  const $compactView = useAtom(true);
   const $optionsOrGroups = useAtom(optionsOrGroups);
   const $totalOptionCount = useComputed([$optionsOrGroups], countOptions);
   const $filteredOptions = useAtom<OptionOrGroup<T>[]>([]);
@@ -538,6 +556,9 @@ export const Picker = typedMemo(<T extends object>(props: PickerProps<T>) => {
   const $searchTerm = useAtom('');
   const $selectedItemId = useComputed([$selectedItem], (item) => (item ? getOptionId(item) : undefined));
 
+  const selectIsCompactView = useMemo(() => buildSelectIsCompactView(pickerId), [pickerId]);
+  const isCompactView = useAppSelector(selectIsCompactView);
+
   const onSelectById = useCallback(
     (id: string) => {
       const options = $filteredOptions.get();
@@ -565,7 +586,7 @@ export const Picker = typedMemo(<T extends object>(props: PickerProps<T>) => {
       ({
         $optionsOrGroups,
         $groupStatusMap,
-        $compactView,
+        isCompactView,
         $activeOptionId,
         $filteredOptions,
         $flattenedFilteredOptions,
@@ -591,11 +612,12 @@ export const Picker = typedMemo(<T extends object>(props: PickerProps<T>) => {
         $hasOptions,
         $hasFilteredOptions,
         $filteredOptionsCount,
+        pickerId,
       }) satisfies PickerContextState<T>,
     [
       $optionsOrGroups,
       $groupStatusMap,
-      $compactView,
+      isCompactView,
       $activeOptionId,
       $filteredOptions,
       $flattenedFilteredOptions,
@@ -619,6 +641,7 @@ export const Picker = typedMemo(<T extends object>(props: PickerProps<T>) => {
       $hasOptions,
       $hasFilteredOptions,
       $filteredOptionsCount,
+      pickerId,
     ]
   );
 
@@ -869,15 +892,17 @@ GroupToggleButtons.displayName = 'GroupToggleButtons';
 
 const CompactViewToggleButton = typedMemo(<T extends object>() => {
   const { t } = useTranslation();
-  const { $compactView } = usePickerContext<T>();
-  const compactView = useStore($compactView);
+  const dispatch = useAppDispatch();
+  const { isCompactView, pickerId } = usePickerContext<T>();
 
   const onClick = useCallback(() => {
-    $compactView.set(!$compactView.get());
-  }, [$compactView]);
+    if (pickerId) {
+      dispatch(pickerCompactViewStateChanged({ pickerId, isCompact: !isCompactView }));
+    }
+  }, [dispatch, pickerId, isCompactView]);
 
-  const label = compactView ? t('common.fullView') : t('common.compactView');
-  const icon = compactView ? <PiArrowsOutLineVerticalBold /> : <PiArrowsInLineVerticalBold />;
+  const label = isCompactView ? t('common.fullView') : t('common.compactView');
+  const icon = isCompactView ? <PiArrowsOutLineVerticalBold /> : <PiArrowsInLineVerticalBold />;
 
   return <IconButton aria-label={label} tooltip={label} size="sm" variant="ghost" icon={icon} onClick={onClick} />;
 });
@@ -924,8 +949,7 @@ const listSx = {
 } satisfies SystemStyleObject;
 
 const PickerList = typedMemo(<T extends object>() => {
-  const { getOptionId, $compactView, $filteredOptions } = usePickerContext<T>();
-  const compactView = useStore($compactView);
+  const { getOptionId, isCompactView, $filteredOptions } = usePickerContext<T>();
   const filteredOptions = useStore($filteredOptions);
 
   if (filteredOptions.length === 0) {
@@ -934,10 +958,10 @@ const PickerList = typedMemo(<T extends object>() => {
 
   return (
     <ScrollableContent>
-      <Flex sx={listSx} data-is-compact={compactView}>
+      <Flex sx={listSx} data-is-compact={isCompactView}>
         {filteredOptions.map((optionOrGroup, i) => {
           if (isGroup(optionOrGroup)) {
-            const withDivider = !compactView && i < filteredOptions.length - 1;
+            const withDivider = !isCompactView && i < filteredOptions.length - 1;
             return (
               <React.Fragment key={optionOrGroup.id}>
                 <PickerGroup group={optionOrGroup} />
@@ -1079,14 +1103,13 @@ const groupHeaderSx = {
 
 const PickerGroupHeader = typedMemo(<T extends object>({ group }: { group: Group<T> }) => {
   const { t } = useTranslation();
-  const { $compactView } = usePickerContext<T>();
-  const compactView = useStore($compactView);
+  const { isCompactView } = usePickerContext<T>();
   const color = getGroupColor(group);
   const name = getGroupName(group);
   const count = getGroupCount(group, t);
 
   return (
-    <Flex sx={groupHeaderSx} data-is-compact={compactView}>
+    <Flex sx={groupHeaderSx} data-is-compact={isCompactView}>
       <Flex gap={2} alignItems="center">
         <Text fontSize="sm" fontWeight="semibold" color={color} noOfLines={1}>
           {name}

invokeai/frontend/web/src/common/hooks/useImageUploadButton.tsx

@@ -6,7 +6,7 @@ import { selectAutoAddBoardId } from 'features/gallery/store/gallerySelectors';
 import { selectIsClientSideUploadEnabled } from 'features/system/store/configSlice';
 import { toast } from 'features/toast/toast';
 import { memo, useCallback } from 'react';
-import type { FileRejection } from 'react-dropzone';
+import type { Accept, FileRejection } from 'react-dropzone';
 import { useDropzone } from 'react-dropzone';
 import { useTranslation } from 'react-i18next';
 import { PiUploadBold } from 'react-icons/pi';
@@ -15,6 +15,18 @@ import type { ImageDTO } from 'services/api/types';
 import { assert } from 'tsafe';
 import type { SetOptional } from 'type-fest';
 
+const addUpperCaseReducer = (acc: string[], ext: string) => {
+  acc.push(ext);
+  acc.push(ext.toUpperCase());
+  return acc;
+};
+
+export const dropzoneAccept: Accept = {
+  'image/png': ['.png'].reduce(addUpperCaseReducer, [] as string[]),
+  'image/jpeg': ['.jpg', '.jpeg', '.png'].reduce(addUpperCaseReducer, [] as string[]),
+  'image/webp': ['.webp'].reduce(addUpperCaseReducer, [] as string[]),
+};
+
 import { useClientSideUpload } from './useClientSideUpload';
 type UseImageUploadButtonArgs =
   | {
@@ -164,11 +176,7 @@ export const useImageUploadButton = ({
     getInputProps: getUploadInputProps,
     open: openUploader,
   } = useDropzone({
-    accept: {
-      'image/png': ['.png'],
-      'image/jpeg': ['.jpg', '.jpeg', '.png'],
-      'image/webp': ['.webp'],
-    },
+    accept: dropzoneAccept,
     onDropAccepted,
     onDropRejected,
     disabled: isDisabled,

invokeai/frontend/web/src/common/util/stopPropagation.ts

@@ -1,3 +1,5 @@
-export const preventDefault = (e: React.MouseEvent) => {
+import type { MouseEvent } from 'react';
+
+export const preventDefault = (e: MouseEvent) => {
   e.preventDefault();
 };

invokeai/frontend/web/src/common/util/typedMemo.ts

@@ -1,10 +1,11 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
+import type React from 'react';
 import { memo } from 'react';
 
 /**
  * A typed version of React.memo, useful for components that take generics.
  */
-export const typedMemo: <T extends keyof JSX.IntrinsicElements | React.JSXElementConstructor<any>>(
+export const typedMemo: <T extends keyof React.JSX.IntrinsicElements | React.JSXElementConstructor<any>>(
   component: T,
   propsAreEqual?: (prevProps: React.ComponentProps<T>, nextProps: React.ComponentProps<T>) => boolean
 ) => T & { displayName?: string } = memo;

invokeai/frontend/web/src/common/util/zodUtils.ts

@@ -1,4 +1,4 @@
-import type { z } from 'zod/v4';
+import type { z } from 'zod';
 
 /**
  * Helper to create a type guard from a zod schema. The type guard will infer the schema's TS type.

invokeai/frontend/web/src/features/changeBoardModal/components/ChangeBoardModal.tsx

@@ -1,7 +1,6 @@
 import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui-library';
 import { Combobox, ConfirmationAlertDialog, Flex, FormControl, Text } from '@invoke-ai/ui-library';
 import { createSelector } from '@reduxjs/toolkit';
-import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { useAssertSingleton } from 'common/hooks/useAssertSingleton';
 import {
@@ -14,7 +13,7 @@ import { useTranslation } from 'react-i18next';
 import { useListAllBoardsQuery } from 'services/api/endpoints/boards';
 import { useAddImagesToBoardMutation, useRemoveImagesFromBoardMutation } from 'services/api/endpoints/images';
 
-const selectImagesToChange = createMemoizedSelector(
+const selectImagesToChange = createSelector(
   selectChangeBoardModalSlice,
   (changeBoardModal) => changeBoardModal.image_names
 );

invokeai/frontend/web/src/features/controlLayers/components/CanvasAlerts/CanvasAlertsSaveAllImagesToGallery.tsx

@@ -13,7 +13,7 @@ export const CanvasAlertsSaveAllImagesToGallery = memo(() => {
   }
 
   return (
-    <Alert status="info" borderRadius="base" fontSize="sm" shadow="md" w="fit-content">
+    <Alert status="warning" borderRadius="base" fontSize="sm" shadow="md" w="fit-content">
       <AlertIcon />
       <AlertTitle>{t('controlLayers.settings.saveAllImagesToGallery.alert')}</AlertTitle>
     </Alert>

invokeai/frontend/web/src/features/controlLayers/components/CanvasAlerts/CanvasAlertsSelectedEntityStatus.tsx

@@ -57,21 +57,21 @@ const CanvasAlertsSelectedEntityStatusContent = memo(({ entityIdentifier, adapte
   const alert = useMemo<AlertData | null>(() => {
     if (isFiltering) {
       return {
-        status: 'info',
+        status: 'warning',
         title: t('controlLayers.HUD.entityStatus.isFiltering', { title }),
       };
     }
 
     if (isTransforming) {
       return {
-        status: 'info',
+        status: 'warning',
         title: t('controlLayers.HUD.entityStatus.isTransforming', { title }),
       };
     }
 
     if (isEmpty) {
       return {
-        status: 'info',
+        status: 'warning',
         title: t('controlLayers.HUD.entityStatus.isEmpty', { title }),
       };
     }

invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBar.tsx

@@ -3,6 +3,7 @@ import { EntityListGlobalActionBarAddLayerMenu } from 'features/controlLayers/co
 import { EntityListSelectedEntityActionBarDuplicateButton } from 'features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarDuplicateButton';
 import { EntityListSelectedEntityActionBarFill } from 'features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarFill';
 import { EntityListSelectedEntityActionBarFilterButton } from 'features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarFilterButton';
+import { EntityListSelectedEntityActionBarInvertMaskButton } from 'features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarInvertMaskButton';
 import { EntityListSelectedEntityActionBarOpacity } from 'features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarOpacity';
 import { EntityListSelectedEntityActionBarSelectObjectButton } from 'features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarSelectObjectButton';
 import { EntityListSelectedEntityActionBarTransformButton } from 'features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarTransformButton';
@@ -21,6 +22,7 @@ export const EntityListSelectedEntityActionBar = memo(() => {
         <EntityListSelectedEntityActionBarSelectObjectButton />
         <EntityListSelectedEntityActionBarFilterButton />
         <EntityListSelectedEntityActionBarTransformButton />
+        <EntityListSelectedEntityActionBarInvertMaskButton />
         <EntityListSelectedEntityActionBarSaveToAssetsButton />
         <EntityListSelectedEntityActionBarDuplicateButton />
         <EntityListNonRasterLayerToggle />

invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarInvertMaskButton.tsx

@@ -0,0 +1,39 @@
+import { IconButton } from '@invoke-ai/ui-library';
+import { useAppSelector } from 'app/store/storeHooks';
+import { useCanvasIsBusy } from 'features/controlLayers/hooks/useCanvasIsBusy';
+import { useInvertMask } from 'features/controlLayers/hooks/useInvertMask';
+import { selectSelectedEntityIdentifier } from 'features/controlLayers/store/selectors';
+import { isInpaintMaskEntityIdentifier } from 'features/controlLayers/store/types';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { PiSelectionInverseBold } from 'react-icons/pi';
+
+export const EntityListSelectedEntityActionBarInvertMaskButton = memo(() => {
+  const { t } = useTranslation();
+  const selectedEntityIdentifier = useAppSelector(selectSelectedEntityIdentifier);
+  const isBusy = useCanvasIsBusy();
+  const invertMask = useInvertMask();
+
+  if (!selectedEntityIdentifier) {
+    return null;
+  }
+
+  if (!isInpaintMaskEntityIdentifier(selectedEntityIdentifier)) {
+    return null;
+  }
+
+  return (
+    <IconButton
+      onClick={invertMask}
+      isDisabled={isBusy}
+      minW={8}
+      variant="link"
+      alignSelf="stretch"
+      aria-label={t('controlLayers.invertMask')}
+      tooltip={t('controlLayers.invertMask')}
+      icon={<PiSelectionInverseBold />}
+    />
+  );
+});
+
+EntityListSelectedEntityActionBarInvertMaskButton.displayName = 'EntityListSelectedEntityActionBarInvertMaskButton';

invokeai/frontend/web/src/features/controlLayers/components/ControlLayer/ControlLayerSettingsEmptyState.tsx

@@ -5,7 +5,6 @@ import { useEntityIdentifierContext } from 'features/controlLayers/contexts/Enti
 import { usePullBboxIntoLayer } from 'features/controlLayers/hooks/saveCanvasHooks';
 import { useCanvasIsBusy } from 'features/controlLayers/hooks/useCanvasIsBusy';
 import { replaceCanvasEntityObjectsWithImage } from 'features/imageActions/actions';
-import { activeTabCanvasRightPanelChanged } from 'features/ui/store/uiSlice';
 import { memo, useCallback, useMemo } from 'react';
 import { Trans } from 'react-i18next';
 import type { ImageDTO } from 'services/api/types';
@@ -21,9 +20,6 @@ export const ControlLayerSettingsEmptyState = memo(() => {
     [dispatch, entityIdentifier, getState]
   );
   const uploadApi = useImageUploadButton({ onUpload, allowMultiple: false });
-  const onClickGalleryButton = useCallback(() => {
-    dispatch(activeTabCanvasRightPanelChanged('gallery'));
-  }, [dispatch]);
   const pullBboxIntoLayer = usePullBboxIntoLayer(entityIdentifier);
 
   const components = useMemo(
@@ -31,14 +27,11 @@ export const ControlLayerSettingsEmptyState = memo(() => {
       UploadButton: (
         <Button isDisabled={isBusy} size="sm" variant="link" color="base.300" {...uploadApi.getUploadButtonProps()} />
       ),
-      GalleryButton: (
-        <Button onClick={onClickGalleryButton} isDisabled={isBusy} size="sm" variant="link" color="base.300" />
-      ),
       PullBboxButton: (
         <Button onClick={pullBboxIntoLayer} isDisabled={isBusy} size="sm" variant="link" color="base.300" />
       ),
     }),
-    [isBusy, onClickGalleryButton, pullBboxIntoLayer, uploadApi]
+    [isBusy, pullBboxIntoLayer, uploadApi]
   );
 
   return (

invokeai/frontend/web/src/features/controlLayers/components/NewSessionConfirmationAlertDialog.tsx

@@ -1,131 +0,0 @@
-import { Checkbox, ConfirmationAlertDialog, Flex, FormControl, FormLabel, Text } from '@invoke-ai/ui-library';
-import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import { useAssertSingleton } from 'common/hooks/useAssertSingleton';
-import { buildUseBoolean } from 'common/hooks/useBoolean';
-import { canvasSessionReset, generateSessionReset } from 'features/controlLayers/store/canvasStagingAreaSlice';
-import {
-  selectSystemShouldConfirmOnNewSession,
-  shouldConfirmOnNewSessionToggled,
-} from 'features/system/store/systemSlice';
-import { activeTabCanvasRightPanelChanged } from 'features/ui/store/uiSlice';
-import { memo, useCallback } from 'react';
-import { useTranslation } from 'react-i18next';
-
-const [useNewGallerySessionDialog] = buildUseBoolean(false);
-const [useNewCanvasSessionDialog] = buildUseBoolean(false);
-
-const useNewGallerySession = () => {
-  const dispatch = useAppDispatch();
-  const shouldConfirmOnNewSession = useAppSelector(selectSystemShouldConfirmOnNewSession);
-  const newSessionDialog = useNewGallerySessionDialog();
-
-  const newGallerySessionImmediate = useCallback(() => {
-    dispatch(generateSessionReset());
-    dispatch(activeTabCanvasRightPanelChanged('gallery'));
-  }, [dispatch]);
-
-  const newGallerySessionWithDialog = useCallback(() => {
-    if (shouldConfirmOnNewSession) {
-      newSessionDialog.setTrue();
-      return;
-    }
-    newGallerySessionImmediate();
-  }, [newGallerySessionImmediate, newSessionDialog, shouldConfirmOnNewSession]);
-
-  return { newGallerySessionImmediate, newGallerySessionWithDialog };
-};
-
-const useNewCanvasSession = () => {
-  const dispatch = useAppDispatch();
-  const shouldConfirmOnNewSession = useAppSelector(selectSystemShouldConfirmOnNewSession);
-  const newSessionDialog = useNewCanvasSessionDialog();
-
-  const newCanvasSessionImmediate = useCallback(() => {
-    dispatch(canvasSessionReset());
-    dispatch(activeTabCanvasRightPanelChanged('layers'));
-  }, [dispatch]);
-
-  const newCanvasSessionWithDialog = useCallback(() => {
-    if (shouldConfirmOnNewSession) {
-      newSessionDialog.setTrue();
-      return;
-    }
-
-    newCanvasSessionImmediate();
-  }, [newCanvasSessionImmediate, newSessionDialog, shouldConfirmOnNewSession]);
-
-  return { newCanvasSessionImmediate, newCanvasSessionWithDialog };
-};
-
-export const NewGallerySessionDialog = memo(() => {
-  useAssertSingleton('NewGallerySessionDialog');
-  const { t } = useTranslation();
-  const dispatch = useAppDispatch();
-
-  const dialog = useNewGallerySessionDialog();
-  const { newGallerySessionImmediate } = useNewGallerySession();
-
-  const shouldConfirmOnNewSession = useAppSelector(selectSystemShouldConfirmOnNewSession);
-  const onToggleConfirm = useCallback(() => {
-    dispatch(shouldConfirmOnNewSessionToggled());
-  }, [dispatch]);
-
-  return (
-    <ConfirmationAlertDialog
-      isOpen={dialog.isTrue}
-      onClose={dialog.setFalse}
-      title={t('controlLayers.newGallerySession')}
-      acceptCallback={newGallerySessionImmediate}
-      acceptButtonText={t('common.ok')}
-      useInert={false}
-    >
-      <Flex direction="column" gap={3}>
-        <Text>{t('controlLayers.newGallerySessionDesc')}</Text>
-        <Text>{t('common.areYouSure')}</Text>
-        <FormControl>
-          <FormLabel>{t('common.dontAskMeAgain')}</FormLabel>
-          <Checkbox isChecked={!shouldConfirmOnNewSession} onChange={onToggleConfirm} />
-        </FormControl>
-      </Flex>
-    </ConfirmationAlertDialog>
-  );
-});
-
-NewGallerySessionDialog.displayName = 'NewGallerySessionDialog';
-
-export const NewCanvasSessionDialog = memo(() => {
-  useAssertSingleton('NewCanvasSessionDialog');
-  const { t } = useTranslation();
-
-  const dispatch = useAppDispatch();
-
-  const dialog = useNewCanvasSessionDialog();
-  const { newCanvasSessionImmediate } = useNewCanvasSession();
-
-  const shouldConfirmOnNewSession = useAppSelector(selectSystemShouldConfirmOnNewSession);
-  const onToggleConfirm = useCallback(() => {
-    dispatch(shouldConfirmOnNewSessionToggled());
-  }, [dispatch]);
-
-  return (
-    <ConfirmationAlertDialog
-      isOpen={dialog.isTrue}
-      onClose={dialog.setFalse}
-      title={t('controlLayers.newCanvasSession')}
-      acceptCallback={newCanvasSessionImmediate}
-      acceptButtonText={t('common.ok')}
-      useInert={false}
-    >
-      <Flex direction="column" gap={3}>
-        <Text>{t('controlLayers.newCanvasSessionDesc')}</Text>
-        <Text>{t('common.areYouSure')}</Text>
-        <FormControl>
-          <FormLabel>{t('common.dontAskMeAgain')}</FormLabel>
-          <Checkbox isChecked={!shouldConfirmOnNewSession} onChange={onToggleConfirm} />
-        </FormControl>
-      </Flex>
-    </ConfirmationAlertDialog>
-  );
-});
-
-NewCanvasSessionDialog.displayName = 'NewCanvasSessionDialog';

invokeai/frontend/web/src/features/controlLayers/components/RefImage/RefImageList.tsx

@@ -126,6 +126,7 @@ const AddRefImageDropTargetAndButton = memo(() => {
     </Flex>
   );
 });
+AddRefImageDropTargetAndButton.displayName = 'AddRefImageDropTargetAndButton';
 
 const BboxButton = memo(() => {
   const { t } = useTranslation();
@@ -145,4 +146,4 @@ const BboxButton = memo(() => {
     />
   );
 });
-AddRefImageDropTargetAndButton.displayName = 'AddRefImageDropTargetAndButton';
+BboxButton.displayName = 'BboxButton';

invokeai/frontend/web/src/features/controlLayers/components/RefImage/RefImageNoImageState.tsx

@@ -6,7 +6,6 @@ import type { SetGlobalReferenceImageDndTargetData } from 'features/dnd/dnd';
 import { setGlobalReferenceImageDndTarget } from 'features/dnd/dnd';
 import { DndDropTarget } from 'features/dnd/DndDropTarget';
 import { setGlobalReferenceImage } from 'features/imageActions/actions';
-import { activeTabCanvasRightPanelChanged } from 'features/ui/store/uiSlice';
 import { memo, useCallback, useMemo } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import type { ImageDTO } from 'services/api/types';
@@ -22,9 +21,6 @@ export const RefImageNoImageState = memo(() => {
     [dispatch, id]
   );
   const uploadApi = useImageUploadButton({ onUpload, allowMultiple: false });
-  const onClickGalleryButton = useCallback(() => {
-    dispatch(activeTabCanvasRightPanelChanged('gallery'));
-  }, [dispatch]);
 
   const dndTargetData = useMemo<SetGlobalReferenceImageDndTargetData>(
     () => setGlobalReferenceImageDndTarget.getData({ id }),
@@ -34,9 +30,8 @@ export const RefImageNoImageState = memo(() => {
   const components = useMemo(
     () => ({
       UploadButton: <Button size="sm" variant="link" color="base.300" {...uploadApi.getUploadButtonProps()} />,
-      GalleryButton: <Button onClick={onClickGalleryButton} size="sm" variant="link" color="base.300" />,
     }),
-    [onClickGalleryButton, uploadApi]
+    [uploadApi]
   );
 
   return (

invokeai/frontend/web/src/features/controlLayers/components/RefImage/RefImageNoImageStateWithCanvasOptions.tsx

@@ -8,7 +8,6 @@ import type { SetGlobalReferenceImageDndTargetData } from 'features/dnd/dnd';
 import { setGlobalReferenceImageDndTarget } from 'features/dnd/dnd';
 import { DndDropTarget } from 'features/dnd/DndDropTarget';
 import { setGlobalReferenceImage } from 'features/imageActions/actions';
-import { activeTabCanvasRightPanelChanged } from 'features/ui/store/uiSlice';
 import { memo, useCallback, useMemo } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import type { ImageDTO } from 'services/api/types';
@@ -25,9 +24,6 @@ export const RefImageNoImageStateWithCanvasOptions = memo(() => {
     [dispatch, id]
   );
   const uploadApi = useImageUploadButton({ onUpload, allowMultiple: false });
-  const onClickGalleryButton = useCallback(() => {
-    dispatch(activeTabCanvasRightPanelChanged('gallery'));
-  }, [dispatch]);
   const pullBboxIntoIPAdapter = usePullBboxIntoGlobalReferenceImage(id);
 
   const dndTargetData = useMemo<SetGlobalReferenceImageDndTargetData>(
@@ -40,14 +36,11 @@ export const RefImageNoImageStateWithCanvasOptions = memo(() => {
       UploadButton: (
         <Button isDisabled={isBusy} size="sm" variant="link" color="base.300" {...uploadApi.getUploadButtonProps()} />
       ),
-      GalleryButton: (
-        <Button onClick={onClickGalleryButton} isDisabled={isBusy} size="sm" variant="link" color="base.300" />
-      ),
       PullBboxButton: (
         <Button onClick={pullBboxIntoIPAdapter} isDisabled={isBusy} size="sm" variant="link" color="base.300" />
       ),
     }),
-    [isBusy, onClickGalleryButton, pullBboxIntoIPAdapter, uploadApi]
+    [isBusy, pullBboxIntoIPAdapter, uploadApi]
   );
 
   return (

invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RegionalGuidanceIPAdapterSettingsEmptyState.tsx

@@ -9,7 +9,6 @@ import type { SetRegionalGuidanceReferenceImageDndTargetData } from 'features/dn
 import { setRegionalGuidanceReferenceImageDndTarget } from 'features/dnd/dnd';
 import { DndDropTarget } from 'features/dnd/DndDropTarget';
 import { setRegionalGuidanceReferenceImage } from 'features/imageActions/actions';
-import { activeTabCanvasRightPanelChanged } from 'features/ui/store/uiSlice';
 import { memo, useCallback, useMemo } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { PiXBold } from 'react-icons/pi';
@@ -31,9 +30,6 @@ export const RegionalGuidanceIPAdapterSettingsEmptyState = memo(({ referenceImag
     [dispatch, entityIdentifier, referenceImageId]
   );
   const uploadApi = useImageUploadButton({ onUpload, allowMultiple: false });
-  const onClickGalleryButton = useCallback(() => {
-    dispatch(activeTabCanvasRightPanelChanged('gallery'));
-  }, [dispatch]);
   const onDeleteIPAdapter = useCallback(() => {
     dispatch(rgRefImageDeleted({ entityIdentifier, referenceImageId }));
   }, [dispatch, entityIdentifier, referenceImageId]);
@@ -53,14 +49,11 @@ export const RegionalGuidanceIPAdapterSettingsEmptyState = memo(({ referenceImag
       UploadButton: (
         <Button isDisabled={isBusy} size="sm" variant="link" color="base.300" {...uploadApi.getUploadButtonProps()} />
       ),
-      GalleryButton: (
-        <Button onClick={onClickGalleryButton} isDisabled={isBusy} size="sm" variant="link" color="base.300" />
-      ),
       PullBboxButton: (
         <Button onClick={pullBboxIntoIPAdapter} isDisabled={isBusy} size="sm" variant="link" color="base.300" />
       ),
     }),
-    [isBusy, onClickGalleryButton, pullBboxIntoIPAdapter, uploadApi]
+    [isBusy, pullBboxIntoIPAdapter, uploadApi]
   );
 
   return (

invokeai/frontend/web/src/features/controlLayers/components/Settings/CanvasSettingsSaveAllImagesToGalleryCheckbox.tsx

@@ -16,7 +16,7 @@ export const CanvasSettingsSaveAllImagesToGalleryCheckbox = memo(() => {
   }, [dispatch]);
   return (
     <FormControl w="full">
-      <FormLabel flexGrow={1}>{t('controlLayers.saveAllImagesToGallery')}</FormLabel>
+      <FormLabel flexGrow={1}>{t('controlLayers.settings.saveAllImagesToGallery.label')}</FormLabel>
       <Checkbox isChecked={saveAllImagesToGallery} onChange={onChange} />
     </FormControl>
   );

invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/context.tsx

@@ -1,585 +0,0 @@
-import { useStore } from '@nanostores/react';
-import { useAppStore } from 'app/store/storeHooks';
-import { getOutputImageName } from 'features/controlLayers/components/SimpleSession/shared';
-import { selectStagingAreaAutoSwitch } from 'features/controlLayers/store/canvasSettingsSlice';
-import {
-  buildSelectSessionQueueItems,
-  canvasQueueItemDiscarded,
-  canvasSessionReset,
-} from 'features/controlLayers/store/canvasStagingAreaSlice';
-import type { ProgressImage } from 'features/nodes/types/common';
-import type { Atom, MapStore, StoreValue, WritableAtom } from 'nanostores';
-import { atom, computed, effect, map, subscribeKeys } from 'nanostores';
-import type { PropsWithChildren } from 'react';
-import { createContext, memo, useCallback, useContext, useEffect, useMemo, useState } from 'react';
-import { getImageDTOSafe } from 'services/api/endpoints/images';
-import { queueApi } from 'services/api/endpoints/queue';
-import type { ImageDTO, S } from 'services/api/types';
-import { $socket } from 'services/events/stores';
-import { assert, objectEntries } from 'tsafe';
-
-export type ProgressData = {
-  itemId: number;
-  progressEvent: S['InvocationProgressEvent'] | null;
-  progressImage: ProgressImage | null;
-  imageDTO: ImageDTO | null;
-  imageLoaded: boolean;
-};
-
-const getInitialProgressData = (itemId: number): ProgressData => ({
-  itemId,
-  progressEvent: null,
-  progressImage: null,
-  imageDTO: null,
-  imageLoaded: false,
-});
-
-export const useProgressData = ($progressData: ProgressDataMap, itemId: number): ProgressData => {
-  const getInitialValue = useCallback(
-    () => $progressData.get()[itemId] ?? getInitialProgressData(itemId),
-    [$progressData, itemId]
-  );
-  const [value, setValue] = useState(getInitialValue);
-  useEffect(() => {
-    const unsub = subscribeKeys($progressData, [itemId], (data) => {
-      const progressData = data[itemId];
-      if (!progressData) {
-        return;
-      }
-      setValue(progressData);
-    });
-    return () => {
-      unsub();
-    };
-  }, [$progressData, itemId]);
-
-  return value;
-};
-
-const setProgress = ($progressData: ProgressDataMap, data: S['InvocationProgressEvent']) => {
-  const progressData = $progressData.get();
-  const current = progressData[data.item_id];
-  if (current) {
-    const next = { ...current };
-    next.progressEvent = data;
-    if (data.image) {
-      next.progressImage = data.image;
-    }
-    $progressData.set({
-      ...progressData,
-      [data.item_id]: next,
-    });
-  } else {
-    $progressData.set({
-      ...progressData,
-      [data.item_id]: {
-        itemId: data.item_id,
-        progressEvent: data,
-        progressImage: data.image ?? null,
-        imageDTO: null,
-        imageLoaded: false,
-      },
-    });
-  }
-};
-
-export type ProgressDataMap = MapStore<Record<number, ProgressData | undefined>>;
-
-type CanvasSessionContextValue = {
-  session: { id: string; type: 'simple' | 'advanced' };
-  $items: Atom<S['SessionQueueItem'][]>;
-  $itemCount: Atom<number>;
-  $hasItems: Atom<boolean>;
-  $isPending: Atom<boolean>;
-  $progressData: ProgressDataMap;
-  $selectedItemId: WritableAtom<number | null>;
-  $selectedItem: Atom<S['SessionQueueItem'] | null>;
-  $selectedItemIndex: Atom<number | null>;
-  $selectedItemOutputImageDTO: Atom<ImageDTO | null>;
-  selectNext: () => void;
-  selectPrev: () => void;
-  selectFirst: () => void;
-  selectLast: () => void;
-  onImageLoad: (itemId: number) => void;
-  discard: (itemId: number) => void;
-  discardAll: () => void;
-};
-
-const CanvasSessionContext = createContext<CanvasSessionContextValue | null>(null);
-
-export const CanvasSessionContextProvider = memo(
-  ({ id, type, children }: PropsWithChildren<{ id: string; type: 'simple' | 'advanced' }>) => {
-    /**
-     * For best performance and interop with the Canvas, which is outside react but needs to interact with the react
-     * app, all canvas session state is packaged as nanostores atoms. The trickiest part is syncing the queue items
-     * with a nanostores atom.
-     */
-    const session = useMemo(() => ({ type, id }), [type, id]);
-
-    /**
-     * App store
-     */
-    const store = useAppStore();
-
-    const socket = useStore($socket);
-
-    /**
-     * Track the last completed item. Used to implement autoswitch.
-     */
-    const $lastCompletedItemId = useState(() => atom<number | null>(null))[0];
-
-    /**
-     * Track the last started item. Used to implement autoswitch.
-     */
-    const $lastStartedItemId = useState(() => atom<number | null>(null))[0];
-
-    /**
-     * Manually-synced atom containing queue items for the current session. This is populated from the RTK Query cache
-     * and kept in sync with it via a redux subscription.
-     */
-    const $items = useState(() => atom<S['SessionQueueItem'][]>([]))[0];
-
-    /**
-     * An internal flag used to work around race conditions with auto-switch switching to queue items before their
-     * output images have fully loaded.
-     */
-    const $lastLoadedItemId = useState(() => atom<number | null>(null))[0];
-
-    /**
-     * An ephemeral store of progress events and images for all items in the current session.
-     */
-    const $progressData = useState(() => map<StoreValue<ProgressDataMap>>({}))[0];
-
-    /**
-     * The currently selected queue item's ID, or null if one is not selected.
-     */
-    const $selectedItemId = useState(() => atom<number | null>(null))[0];
-
-    /**
-     * The number of items. Computed from the queue items array.
-     */
-    const $itemCount = useState(() => computed([$items], (items) => items.length))[0];
-
-    /**
-     * Whether there are any items. Computed from the queue items array.
-     */
-    const $hasItems = useState(() => computed([$items], (items) => items.length > 0))[0];
-
-    /**
-     * Whether there are any pending or in-progress items. Computed from the queue items array.
-     */
-    const $isPending = useState(() =>
-      computed([$items], (items) => items.some((item) => item.status === 'pending' || item.status === 'in_progress'))
-    )[0];
-
-    /**
-     * The currently selected queue item, or null if one is not selected.
-     */
-    const $selectedItem = useState(() =>
-      computed([$items, $selectedItemId], (items, selectedItemId) => {
-        if (items.length === 0) {
-          return null;
-        }
-        if (selectedItemId === null) {
-          return null;
-        }
-        return items.find(({ item_id }) => item_id === selectedItemId) ?? null;
-      })
-    )[0];
-
-    /**
-     * The currently selected queue item's index in the list of items, or null if one is not selected.
-     */
-    const $selectedItemIndex = useState(() =>
-      computed([$items, $selectedItemId], (items, selectedItemId) => {
-        if (items.length === 0) {
-          return null;
-        }
-        if (selectedItemId === null) {
-          return null;
-        }
-        return items.findIndex(({ item_id }) => item_id === selectedItemId) ?? null;
-      })
-    )[0];
-
-    /**
-     * The currently selected queue item's output image name, or null if one is not selected or there is no output
-     * image recorded.
-     */
-    const $selectedItemOutputImageDTO = useState(() =>
-      computed([$selectedItemId, $progressData], (selectedItemId, progressData) => {
-        if (selectedItemId === null) {
-          return null;
-        }
-        const datum = progressData[selectedItemId];
-        if (!datum) {
-          return null;
-        }
-        return datum.imageDTO;
-      })
-    )[0];
-
-    /**
-     * A redux selector to select all queue items from the RTK Query cache.
-     */
-    const selectQueueItems = useMemo(() => buildSelectSessionQueueItems(session.id), [session.id]);
-
-    const discard = useCallback(
-      (itemId: number) => {
-        store.dispatch(canvasQueueItemDiscarded({ itemId }));
-      },
-      [store]
-    );
-
-    const discardAll = useCallback(() => {
-      store.dispatch(canvasSessionReset());
-    }, [store]);
-
-    const selectNext = useCallback(() => {
-      const selectedItemId = $selectedItemId.get();
-      if (selectedItemId === null) {
-        return;
-      }
-      const items = $items.get();
-      const currentIndex = items.findIndex((item) => item.item_id === selectedItemId);
-      const nextIndex = (currentIndex + 1) % items.length;
-      const nextItem = items[nextIndex];
-      if (!nextItem) {
-        return;
-      }
-      $selectedItemId.set(nextItem.item_id);
-    }, [$items, $selectedItemId]);
-
-    const selectPrev = useCallback(() => {
-      const selectedItemId = $selectedItemId.get();
-      if (selectedItemId === null) {
-        return;
-      }
-      const items = $items.get();
-      const currentIndex = items.findIndex((item) => item.item_id === selectedItemId);
-      const prevIndex = (currentIndex - 1 + items.length) % items.length;
-      const prevItem = items[prevIndex];
-      if (!prevItem) {
-        return;
-      }
-      $selectedItemId.set(prevItem.item_id);
-    }, [$items, $selectedItemId]);
-
-    const selectFirst = useCallback(() => {
-      const items = $items.get();
-      const first = items.at(0);
-      if (!first) {
-        return;
-      }
-      $selectedItemId.set(first.item_id);
-    }, [$items, $selectedItemId]);
-
-    const selectLast = useCallback(() => {
-      const items = $items.get();
-      const last = items.at(-1);
-      if (!last) {
-        return;
-      }
-      $selectedItemId.set(last.item_id);
-    }, [$items, $selectedItemId]);
-
-    const onImageLoad = useCallback(
-      (itemId: number) => {
-        const progressData = $progressData.get();
-        const current = progressData[itemId];
-        if (current) {
-          const next = { ...current, imageLoaded: true };
-          $progressData.setKey(itemId, next);
-        } else {
-          $progressData.setKey(itemId, {
-            ...getInitialProgressData(itemId),
-            imageLoaded: true,
-          });
-        }
-        if (
-          $lastCompletedItemId.get() === itemId &&
-          selectStagingAreaAutoSwitch(store.getState()) === 'switch_on_finish'
-        ) {
-          $selectedItemId.set(itemId);
-          $lastCompletedItemId.set(null);
-        }
-      },
-      [$lastCompletedItemId, $progressData, $selectedItemId, store]
-    );
-
-    // Set up socket listeners
-    useEffect(() => {
-      if (!socket) {
-        return;
-      }
-
-      const onProgress = (data: S['InvocationProgressEvent']) => {
-        if (data.destination !== session.id) {
-          return;
-        }
-        setProgress($progressData, data);
-      };
-
-      const onQueueItemStatusChanged = (data: S['QueueItemStatusChangedEvent']) => {
-        if (data.destination !== session.id) {
-          return;
-        }
-        if (data.status === 'completed') {
-          $lastCompletedItemId.set(data.item_id);
-        }
-        if (data.status === 'in_progress') {
-          $lastStartedItemId.set(data.item_id);
-        }
-      };
-
-      socket.on('invocation_progress', onProgress);
-      socket.on('queue_item_status_changed', onQueueItemStatusChanged);
-
-      return () => {
-        socket.off('invocation_progress', onProgress);
-        socket.off('queue_item_status_changed', onQueueItemStatusChanged);
-      };
-    }, [$lastCompletedItemId, $lastStartedItemId, $progressData, $selectedItemId, session.id, socket]);
-
-    // Set up state subscriptions and effects
-    useEffect(() => {
-      let _prevItems: readonly S['SessionQueueItem'][] = [];
-      // Seed the $items atom with the initial query cache state
-      $items.set(selectQueueItems(store.getState()));
-
-      // Manually keep the $items atom in sync as the query cache is updated
-      const unsubReduxSyncToItemsAtom = store.subscribe(() => {
-        const prevItems = $items.get();
-        const items = selectQueueItems(store.getState());
-        if (items !== prevItems) {
-          _prevItems = prevItems;
-          $items.set(items);
-        }
-      });
-
-      // Handle cases that could result in a nonexistent queue item being selected.
-      const unsubEnsureSelectedItemIdExists = effect(
-        [$items, $selectedItemId, $lastStartedItemId],
-        (items, selectedItemId, lastStartedItemId) => {
-          if (items.length === 0) {
-            // If there are no items, cannot have a selected item.
-            $selectedItemId.set(null);
-          } else if (selectedItemId === null && items.length > 0) {
-            // If there is no selected item but there are items, select the first one.
-            $selectedItemId.set(items[0]?.item_id ?? null);
-            return;
-          } else if (
-            selectStagingAreaAutoSwitch(store.getState()) === 'switch_on_start' &&
-            items.findIndex(({ item_id }) => item_id === lastStartedItemId) !== -1
-          ) {
-            $selectedItemId.set(lastStartedItemId);
-            $lastStartedItemId.set(null);
-          } else if (selectedItemId !== null && items.findIndex(({ item_id }) => item_id === selectedItemId) === -1) {
-            // If an item is selected and it is not in the list of items, un-set it. This effect will run again and we'll
-            // the above case, selecting the first item if there are any.
-            let prevIndex = _prevItems.findIndex(({ item_id }) => item_id === selectedItemId);
-            if (prevIndex >= items.length) {
-              prevIndex = items.length - 1;
-            }
-            const nextItem = items[prevIndex];
-            $selectedItemId.set(nextItem?.item_id ?? null);
-          }
-
-          if (items !== _prevItems) {
-            _prevItems = items;
-          }
-        }
-      );
-
-      // Clean up the progress data when a queue item is discarded.
-      const unsubCleanUpProgressData = $items.subscribe(async (items) => {
-        const progressData = $progressData.get();
-
-        const toDelete: number[] = [];
-        const toUpdate: ProgressData[] = [];
-
-        for (const [id, datum] of objectEntries(progressData)) {
-          if (!datum) {
-            toDelete.push(id);
-            continue;
-          }
-          const item = items.find(({ item_id }) => item_id === datum.itemId);
-          if (!item) {
-            toDelete.push(datum.itemId);
-          } else if (item.status === 'canceled' || item.status === 'failed') {
-            toUpdate.push({
-              ...datum,
-              progressEvent: null,
-              progressImage: null,
-              imageDTO: null,
-            });
-          }
-        }
-
-        for (const item of items) {
-          const datum = progressData[item.item_id];
-
-          if (datum) {
-            if (datum.imageDTO) {
-              continue;
-            }
-            const outputImageName = getOutputImageName(item);
-            if (!outputImageName) {
-              continue;
-            }
-            const imageDTO = await getImageDTOSafe(outputImageName);
-            if (!imageDTO) {
-              continue;
-            }
-            toUpdate.push({
-              ...datum,
-              imageDTO,
-            });
-          } else {
-            const outputImageName = getOutputImageName(item);
-            if (!outputImageName) {
-              continue;
-            }
-            const imageDTO = await getImageDTOSafe(outputImageName);
-            if (!imageDTO) {
-              continue;
-            }
-            toUpdate.push({
-              ...getInitialProgressData(item.item_id),
-              imageDTO,
-            });
-          }
-        }
-
-        for (const itemId of toDelete) {
-          $progressData.setKey(itemId, undefined);
-        }
-
-        for (const datum of toUpdate) {
-          $progressData.setKey(datum.itemId, datum);
-        }
-      });
-
-      // We only want to auto-switch to completed queue items once their images have fully loaded to prevent flashes
-      // of fallback content and/or progress images. The only surefire way to determine when images have fully loaded
-      // is via the image elements' `onLoad` callback. Images set `$lastLoadedItemId` to their queue item ID in their
-      // `onLoad` handler, and we listen for that here. If auto-switch is enabled, we then switch the to the item.
-      //
-      // TODO: This isn't perfect... we set $lastLoadedItemId in the mini preview component, but the full view
-      // component still needs to retrieve the image from the browser cache... can result in a flash of the progress
-      // image...
-      const unsubHandleAutoSwitch = $lastLoadedItemId.listen((lastLoadedItemId) => {
-        if (lastLoadedItemId === null) {
-          return;
-        }
-        if (selectStagingAreaAutoSwitch(store.getState()) === 'switch_on_finish') {
-          $selectedItemId.set(lastLoadedItemId);
-        }
-        $lastLoadedItemId.set(null);
-      });
-
-      // Create an RTK Query subscription. Without this, the query cache selector will never return anything bc RTK
-      // doesn't know we care about it.
-      const { unsubscribe: unsubQueueItemsQuery } = store.dispatch(
-        queueApi.endpoints.listAllQueueItems.initiate({ destination: session.id })
-      );
-
-      // const unsubListener = store.dispatch(
-      //   addAppListener({
-      //     matcher: queueApi.endpoints.cancelQueueItem.matchFulfilled,
-      //     effect: ({ payload }, { getState }) => {
-      //       const { item_id } = payload;
-
-      //       const items = selectQueueItems(getState());
-      //       if (items.length === 0) {
-      //         $selectedItemId.set(null);
-      //       } else if ($selectedItemId.get() === null) {
-      //         $selectedItemId.set(items[0].item_id);
-      //       }
-      //     },
-      //   })
-      // );
-
-      // Clean up all subscriptions and top-level (i.e. non-computed/derived state)
-      return () => {
-        unsubHandleAutoSwitch();
-        unsubQueueItemsQuery();
-        unsubReduxSyncToItemsAtom();
-        unsubEnsureSelectedItemIdExists();
-        unsubCleanUpProgressData();
-        $items.set([]);
-        $progressData.set({});
-        $selectedItemId.set(null);
-      };
-    }, [
-      $items,
-      $lastLoadedItemId,
-      $lastStartedItemId,
-      $progressData,
-      $selectedItemId,
-      selectQueueItems,
-      session.id,
-      store,
-    ]);
-
-    const value = useMemo<CanvasSessionContextValue>(
-      () => ({
-        session,
-        $items,
-        $hasItems,
-        $isPending,
-        $progressData,
-        $selectedItemId,
-        $selectedItem,
-        $selectedItemIndex,
-        $selectedItemOutputImageDTO,
-        $itemCount,
-        selectNext,
-        selectPrev,
-        selectFirst,
-        selectLast,
-        onImageLoad,
-        discard,
-        discardAll,
-      }),
-      [
-        $items,
-        $hasItems,
-        $isPending,
-        $progressData,
-        $selectedItem,
-        $selectedItemId,
-        $selectedItemIndex,
-        session,
-        $selectedItemOutputImageDTO,
-        $itemCount,
-        selectNext,
-        selectPrev,
-        selectFirst,
-        selectLast,
-        onImageLoad,
-        discard,
-        discardAll,
-      ]
-    );
-
-    return <CanvasSessionContext.Provider value={value}>{children}</CanvasSessionContext.Provider>;
-  }
-);
-CanvasSessionContextProvider.displayName = 'CanvasSessionContextProvider';
-
-export const useCanvasSessionContext = () => {
-  const ctx = useContext(CanvasSessionContext);
-  assert(ctx !== null, "'useCanvasSessionContext' must be used within a CanvasSessionContextProvider");
-  return ctx;
-};
-
-export const useOutputImageDTO = (item: S['SessionQueueItem']) => {
-  const ctx = useCanvasSessionContext();
-  const $imageDTO = useState(() =>
-    computed([ctx.$progressData], (progressData) => progressData[item.item_id]?.imageDTO ?? null)
-  )[0];
-  const imageDTO = useStore($imageDTO);
-
-  return imageDTO;
-};

invokeai/frontend/web/src/features/controlLayers/components/StagingArea/QueueItemCircularProgress.tsx

@@ -1,10 +1,11 @@
 import type { CircularProgressProps, SystemStyleObject } from '@invoke-ai/ui-library';
 import { CircularProgress, Tooltip } from '@invoke-ai/ui-library';
-import { useCanvasSessionContext, useProgressData } from 'features/controlLayers/components/SimpleSession/context';
-import { getProgressMessage } from 'features/controlLayers/components/SimpleSession/shared';
+import { getProgressMessage } from 'features/controlLayers/components/StagingArea/shared';
 import { memo } from 'react';
 import type { S } from 'services/api/types';
 
+import { useProgressDatum } from './context';
+
 const circleStyles: SystemStyleObject = {
   circle: {
     transitionProperty: 'none',
@@ -18,8 +19,7 @@ const circleStyles: SystemStyleObject = {
 type Props = { itemId: number; status: S['SessionQueueItem']['status'] } & CircularProgressProps;
 
 export const QueueItemCircularProgress = memo(({ itemId, status, ...rest }: Props) => {
-  const { $progressData } = useCanvasSessionContext();
-  const { progressEvent } = useProgressData($progressData, itemId);
+  const { progressEvent } = useProgressDatum(itemId);
 
   if (status !== 'in_progress') {
     return null;

invokeai/frontend/web/src/features/controlLayers/components/StagingArea/QueueItemNumber.tsx

@@ -1,8 +1,9 @@
 import type { TextProps } from '@invoke-ai/ui-library';
 import { Text } from '@invoke-ai/ui-library';
-import { DROP_SHADOW } from 'features/controlLayers/components/SimpleSession/shared';
 import { memo } from 'react';
 
+import { DROP_SHADOW } from './shared';
+
 export const QueueItemNumber = memo(({ number, ...rest }: { number: number } & TextProps) => {
   return <Text pointerEvents="none" userSelect="none" filter={DROP_SHADOW} {...rest}>{`#${number}`}</Text>;
 });

invokeai/frontend/web/src/features/controlLayers/components/StagingArea/QueueItemPreviewMini.tsx

@@ -1,25 +1,23 @@
 import type { SystemStyleObject } from '@invoke-ai/ui-library';
 import { Flex } from '@invoke-ai/ui-library';
+import { useStore } from '@nanostores/react';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import {
-  useCanvasSessionContext,
-  useOutputImageDTO,
-  useProgressData,
-} from 'features/controlLayers/components/SimpleSession/context';
-import { QueueItemCircularProgress } from 'features/controlLayers/components/SimpleSession/QueueItemCircularProgress';
-import { QueueItemNumber } from 'features/controlLayers/components/SimpleSession/QueueItemNumber';
-import { QueueItemProgressImage } from 'features/controlLayers/components/SimpleSession/QueueItemProgressImage';
-import { QueueItemStatusLabel } from 'features/controlLayers/components/SimpleSession/QueueItemStatusLabel';
-import { getQueueItemElementId } from 'features/controlLayers/components/SimpleSession/shared';
+import { QueueItemCircularProgress } from 'features/controlLayers/components/StagingArea/QueueItemCircularProgress';
+import { QueueItemProgressImage } from 'features/controlLayers/components/StagingArea/QueueItemProgressImage';
+import { QueueItemStatusLabel } from 'features/controlLayers/components/StagingArea/QueueItemStatusLabel';
+import { getQueueItemElementId } from 'features/controlLayers/components/StagingArea/shared';
 import {
   selectStagingAreaAutoSwitch,
   settingsStagingAreaAutoSwitchChanged,
 } from 'features/controlLayers/store/canvasSettingsSlice';
 import { DndImage } from 'features/dnd/DndImage';
 import { toast } from 'features/toast/toast';
-import { memo, useCallback } from 'react';
+import { memo, useCallback, useMemo } from 'react';
 import type { S } from 'services/api/types';
 
+import { useOutputImageDTO, useStagingAreaContext } from './context';
+import { QueueItemNumber } from './QueueItemNumber';
+
 const sx = {
   cursor: 'pointer',
   userSelect: 'none',
@@ -41,19 +39,19 @@ const sx = {
 type Props = {
   item: S['SessionQueueItem'];
   index: number;
-  isSelected: boolean;
 };
 
-export const QueueItemPreviewMini = memo(({ item, isSelected, index }: Props) => {
+export const QueueItemPreviewMini = memo(({ item, index }: Props) => {
+  const ctx = useStagingAreaContext();
   const dispatch = useAppDispatch();
-  const ctx = useCanvasSessionContext();
-  const { imageLoaded } = useProgressData(ctx.$progressData, item.item_id);
-  const imageDTO = useOutputImageDTO(item);
+  const $isSelected = useMemo(() => ctx.buildIsSelectedComputed(item.item_id), [ctx, item.item_id]);
+  const isSelected = useStore($isSelected);
+  const imageDTO = useOutputImageDTO(item.item_id);
   const autoSwitch = useAppSelector(selectStagingAreaAutoSwitch);
 
   const onClick = useCallback(() => {
-    ctx.$selectedItemId.set(item.item_id);
-  }, [ctx.$selectedItemId, item.item_id]);
+    ctx.select(item.item_id);
+  }, [ctx, item.item_id]);
 
   const onDoubleClick = useCallback(() => {
     if (autoSwitch !== 'off') {
@@ -65,7 +63,7 @@ export const QueueItemPreviewMini = memo(({ item, isSelected, index }: Props) =>
   }, [autoSwitch, dispatch]);
 
   const onLoad = useCallback(() => {
-    ctx.onImageLoad(item.item_id);
+    ctx.onImageLoaded(item.item_id);
   }, [ctx, item.item_id]);
 
   return (
@@ -77,8 +75,8 @@ export const QueueItemPreviewMini = memo(({ item, isSelected, index }: Props) =>
       onDoubleClick={onDoubleClick}
     >
       <QueueItemStatusLabel item={item} position="absolute" margin="auto" />
-      {imageDTO && <DndImage imageDTO={imageDTO} onLoad={onLoad} asThumbnail position="absolute" />}
-      {!imageLoaded && <QueueItemProgressImage itemId={item.item_id} position="absolute" />}
+      {imageDTO && <DndImage imageDTO={imageDTO} position="absolute" onLoad={onLoad} />}
+      <QueueItemProgressImage itemId={item.item_id} position="absolute" />
       <QueueItemNumber number={index + 1} position="absolute" top={0} left={1} />
       <QueueItemCircularProgress itemId={item.item_id} status={item.status} position="absolute" top={1} right={2} />
     </Flex>

invokeai/frontend/web/src/features/controlLayers/components/StagingArea/QueueItemProgressImage.tsx

@@ -1,15 +1,15 @@
 import type { ImageProps } from '@invoke-ai/ui-library';
 import { Image } from '@invoke-ai/ui-library';
-import { useCanvasSessionContext, useProgressData } from 'features/controlLayers/components/SimpleSession/context';
 import { memo } from 'react';
 
+import { useProgressDatum } from './context';
+
 type Props = { itemId: number } & ImageProps;
 
 export const QueueItemProgressImage = memo(({ itemId, ...rest }: Props) => {
-  const ctx = useCanvasSessionContext();
-  const { progressImage } = useProgressData(ctx.$progressData, itemId);
+  const { progressImage, imageLoaded } = useProgressDatum(itemId);
 
-  if (!progressImage) {
+  if (!progressImage || imageLoaded) {
     return null;
   }
 

invokeai/frontend/web/src/features/controlLayers/components/StagingArea/QueueItemStatusLabel.tsx

@@ -1,16 +1,16 @@
 import type { TextProps } from '@invoke-ai/ui-library';
 import { Text } from '@invoke-ai/ui-library';
-import { useCanvasSessionContext, useProgressData } from 'features/controlLayers/components/SimpleSession/context';
 import { memo } from 'react';
 import type { S } from 'services/api/types';
 
+import { useProgressDatum } from './context';
+
 type Props = { item: S['SessionQueueItem'] } & TextProps;
 
 export const QueueItemStatusLabel = memo(({ item, ...rest }: Props) => {
-  const ctx = useCanvasSessionContext();
-  const { progressImage, imageLoaded } = useProgressData(ctx.$progressData, item.item_id);
+  const { progressImage } = useProgressDatum(item.item_id);
 
-  if (progressImage || imageLoaded) {
+  if (progressImage) {
     return null;
   }
 

invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaAutoSwitchButtons.tsx

@@ -1,5 +1,7 @@
 import { IconButton } from '@invoke-ai/ui-library';
+import { useStore } from '@nanostores/react';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { useCanvasManager } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
 import {
   selectStagingAreaAutoSwitch,
   settingsStagingAreaAutoSwitchChanged,
@@ -8,6 +10,9 @@ import { memo, useCallback } from 'react';
 import { PiCaretLineRightBold, PiCaretRightBold, PiMoonBold } from 'react-icons/pi';
 
 export const StagingAreaAutoSwitchButtons = memo(() => {
+  const canvasManager = useCanvasManager();
+  const shouldShowStagedImage = useStore(canvasManager.stagingArea.$shouldShowStagedImage);
+
   const autoSwitch = useAppSelector(selectStagingAreaAutoSwitch);
   const dispatch = useAppDispatch();
 
@@ -29,6 +34,7 @@ export const StagingAreaAutoSwitchButtons = memo(() => {
         icon={<PiMoonBold />}
         colorScheme={autoSwitch === 'off' ? 'invokeBlue' : 'base'}
         onClick={onClickOff}
+        isDisabled={!shouldShowStagedImage}
       />
       <IconButton
         aria-label="Switch on start"
@@ -36,6 +42,7 @@ export const StagingAreaAutoSwitchButtons = memo(() => {
         icon={<PiCaretRightBold />}
         colorScheme={autoSwitch === 'switch_on_start' ? 'invokeBlue' : 'base'}
         onClick={onClickSwitchOnStart}
+        isDisabled={!shouldShowStagedImage}
       />
       <IconButton
         aria-label="Switch on finish"
@@ -43,6 +50,7 @@ export const StagingAreaAutoSwitchButtons = memo(() => {
         icon={<PiCaretLineRightBold />}
         colorScheme={autoSwitch === 'switch_on_finish' ? 'invokeBlue' : 'base'}
         onClick={onClickSwitchOnFinished}
+        isDisabled={!shouldShowStagedImage}
       />
     </>
   );

invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaItemsList.tsx

@@ -1,16 +1,16 @@
 import { Box, Flex, forwardRef } from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
 import { logger } from 'app/logging/logger';
-import { useCanvasSessionContext } from 'features/controlLayers/components/SimpleSession/context';
-import { QueueItemPreviewMini } from 'features/controlLayers/components/SimpleSession/QueueItemPreviewMini';
-import { useCanvasManagerSafe } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
+import { QueueItemPreviewMini } from 'features/controlLayers/components/StagingArea/QueueItemPreviewMini';
+import { useCanvasManager } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
 import { useOverlayScrollbars } from 'overlayscrollbars-react';
 import type { CSSProperties, RefObject } from 'react';
-import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import type { Components, ItemContent, ListRange, VirtuosoHandle, VirtuosoProps } from 'react-virtuoso';
+import { memo, useCallback, useEffect, useRef, useState } from 'react';
+import type { Components, ComputeItemKey, ItemContent, ListRange, VirtuosoHandle, VirtuosoProps } from 'react-virtuoso';
 import { Virtuoso } from 'react-virtuoso';
 import type { S } from 'services/api/types';
 
+import { useStagingAreaContext } from './context';
 import { getQueueItemElementId } from './shared';
 
 const log = logger('system');
@@ -20,8 +20,6 @@ const virtuosoStyles = {
   height: '72px',
 } satisfies CSSProperties;
 
-type VirtuosoContext = { selectedItemId: number | null };
-
 /**
  * Scroll the item at the given index into view if it is not currently visible.
  */
@@ -132,28 +130,26 @@ const useScrollableStagingArea = (rootRef: RefObject<HTMLDivElement>) => {
 };
 
 export const StagingAreaItemsList = memo(() => {
-  const canvasManager = useCanvasManagerSafe();
-  const ctx = useCanvasSessionContext();
+  const canvasManager = useCanvasManager();
+
+  const ctx = useStagingAreaContext();
   const virtuosoRef = useRef<VirtuosoHandle>(null);
   const rangeRef = useRef<ListRange>({ startIndex: 0, endIndex: 0 });
   const rootRef = useRef<HTMLDivElement>(null);
 
   const items = useStore(ctx.$items);
-  const selectedItemId = useStore(ctx.$selectedItemId);
 
-  const context = useMemo(() => ({ selectedItemId }), [selectedItemId]);
   const scrollerRef = useScrollableStagingArea(rootRef);
 
   useEffect(() => {
-    if (!canvasManager) {
-      return;
-    }
-
-    return canvasManager.stagingArea.connectToSession(ctx.$selectedItemId, ctx.$progressData, ctx.$isPending);
-  }, [canvasManager, ctx.$progressData, ctx.$selectedItemId, ctx.$isPending]);
+    return canvasManager.stagingArea.connectToSession(ctx.$items, ctx.$selectedItem);
+  }, [canvasManager, ctx.$progressData, ctx.$items, ctx.$selectedItem]);
 
   useEffect(() => {
-    return ctx.$selectedItemIndex.listen((index) => {
+    return ctx.$selectedItemIndex.listen((selectedItemIndex) => {
+      if (selectedItemIndex === null) {
+        return;
+      }
       if (!virtuosoRef.current) {
         return;
       }
@@ -162,11 +158,7 @@ export const StagingAreaItemsList = memo(() => {
         return;
       }
 
-      if (index === null) {
-        return;
-      }
-
-      scrollIntoView(index, rootRef.current, virtuosoRef.current, rangeRef.current);
+      scrollIntoView(selectedItemIndex, rootRef.current, virtuosoRef.current, rangeRef.current);
     });
   }, [ctx.$selectedItemIndex]);
 
@@ -176,40 +168,46 @@ export const StagingAreaItemsList = memo(() => {
 
   return (
     <Box data-overlayscrollbars-initialize="" ref={rootRef} position="relative" w="full" h="full">
-      <Virtuoso<S['SessionQueueItem'], VirtuosoContext>
+      <Virtuoso<S['SessionQueueItem']>
         ref={virtuosoRef}
-        context={context}
         data={items}
         horizontalDirection
         style={virtuosoStyles}
+        computeItemKey={computeItemKey}
+        increaseViewportBy={2048}
         itemContent={itemContent}
         components={components}
         rangeChanged={onRangeChanged}
         // Virtuoso expects the ref to be of HTMLElement | null | Window, but overlayscrollbars doesn't allow Window
-        scrollerRef={scrollerRef as VirtuosoProps<S['SessionQueueItem'], VirtuosoContext>['scrollerRef']}
+        scrollerRef={scrollerRef as VirtuosoProps<S['SessionQueueItem'], void>['scrollerRef']}
       />
     </Box>
   );
 });
 StagingAreaItemsList.displayName = 'StagingAreaItemsList';
 
-const itemContent: ItemContent<S['SessionQueueItem'], VirtuosoContext> = (index, item, { selectedItemId }) => (
-  <QueueItemPreviewMini
-    key={`${item.item_id}-mini`}
-    item={item}
-    index={index}
-    isSelected={selectedItemId === item.item_id}
-  />
+const computeItemKey: ComputeItemKey<S['SessionQueueItem'], void> = (_, item: S['SessionQueueItem']) => {
+  return item.item_id;
+};
+
+const itemContent: ItemContent<S['SessionQueueItem'], void> = (index, item) => (
+  <QueueItemPreviewMini key={`${item.item_id}-mini`} item={item} index={index} />
 );
 
 const listSx = {
   '& > * + *': {
     pl: 2,
   },
+  '&[data-disabled="true"]': {
+    filter: 'grayscale(1) opacity(0.5)',
+  },
 };
 
-const components: Components<S['SessionQueueItem'], VirtuosoContext> = {
+const components: Components<S['SessionQueueItem']> = {
   List: forwardRef(({ context: _, ...rest }, ref) => {
-    return <Flex ref={ref} sx={listSx} {...rest} />;
+    const canvasManager = useCanvasManager();
+    const shouldShowStagedImage = useStore(canvasManager.stagingArea.$shouldShowStagedImage);
+
+    return <Flex ref={ref} sx={listSx} data-disabled={!shouldShowStagedImage} {...rest} />;
   }),
 };

invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaToolbar.tsx

@@ -1,6 +1,5 @@
 import { ButtonGroup, Flex } from '@invoke-ai/ui-library';
-import { useStore } from '@nanostores/react';
-import { useCanvasSessionContext } from 'features/controlLayers/components/SimpleSession/context';
+import { useStagingAreaContext } from 'features/controlLayers/components/StagingArea/context';
 import { StagingAreaToolbarAcceptButton } from 'features/controlLayers/components/StagingArea/StagingAreaToolbarAcceptButton';
 import { StagingAreaToolbarDiscardAllButton } from 'features/controlLayers/components/StagingArea/StagingAreaToolbarDiscardAllButton';
 import { StagingAreaToolbarDiscardSelectedButton } from 'features/controlLayers/components/StagingArea/StagingAreaToolbarDiscardSelectedButton';
@@ -10,17 +9,13 @@ import { StagingAreaToolbarNextButton } from 'features/controlLayers/components/
 import { StagingAreaToolbarPrevButton } from 'features/controlLayers/components/StagingArea/StagingAreaToolbarPrevButton';
 import { StagingAreaToolbarSaveSelectedToGalleryButton } from 'features/controlLayers/components/StagingArea/StagingAreaToolbarSaveSelectedToGalleryButton';
 import { StagingAreaToolbarToggleShowResultsButton } from 'features/controlLayers/components/StagingArea/StagingAreaToolbarToggleShowResultsButton';
-import { useCanvasManager } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
 import { memo } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 
 import { StagingAreaAutoSwitchButtons } from './StagingAreaAutoSwitchButtons';
 
 export const StagingAreaToolbar = memo(() => {
-  const canvasManager = useCanvasManager();
-  const shouldShowStagedImage = useStore(canvasManager.stagingArea.$shouldShowStagedImage);
-
-  const ctx = useCanvasSessionContext();
+  const ctx = useStagingAreaContext();
 
   useHotkeys('meta+left', ctx.selectFirst, { preventDefault: true });
   useHotkeys('meta+right', ctx.selectLast, { preventDefault: true });
@@ -28,22 +23,22 @@ export const StagingAreaToolbar = memo(() => {
   return (
     <Flex gap={2}>
       <ButtonGroup borderRadius="base" shadow="dark-lg">
-        <StagingAreaToolbarPrevButton isDisabled={!shouldShowStagedImage} />
+        <StagingAreaToolbarPrevButton />
         <StagingAreaToolbarImageCountButton />
-        <StagingAreaToolbarNextButton isDisabled={!shouldShowStagedImage} />
+        <StagingAreaToolbarNextButton />
       </ButtonGroup>
       <ButtonGroup borderRadius="base" shadow="dark-lg">
         <StagingAreaToolbarAcceptButton />
         <StagingAreaToolbarToggleShowResultsButton />
         <StagingAreaToolbarSaveSelectedToGalleryButton />
         <StagingAreaToolbarMenu />
-        <StagingAreaToolbarDiscardSelectedButton isDisabled={!shouldShowStagedImage} />
+        <StagingAreaToolbarDiscardSelectedButton />
       </ButtonGroup>
       <ButtonGroup borderRadius="base" shadow="dark-lg">
         <StagingAreaAutoSwitchButtons />
       </ButtonGroup>
       <ButtonGroup borderRadius="base" shadow="dark-lg">
-        <StagingAreaToolbarDiscardAllButton isDisabled={!shouldShowStagedImage} />
+        <StagingAreaToolbarDiscardAllButton />
       </ButtonGroup>
     </Flex>
   );

invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaToolbarAcceptButton.tsx

@@ -1,64 +1,32 @@
 import { IconButton } from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
-import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { useIsRegionFocused } from 'common/hooks/focus';
-import { useCanvasSessionContext } from 'features/controlLayers/components/SimpleSession/context';
+import { useStagingAreaContext } from 'features/controlLayers/components/StagingArea/context';
 import { useCanvasManager } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
-import { rasterLayerAdded } from 'features/controlLayers/store/canvasSlice';
-import { canvasSessionReset } from 'features/controlLayers/store/canvasStagingAreaSlice';
-import { selectBboxRect, selectSelectedEntityIdentifier } from 'features/controlLayers/store/selectors';
-import type { CanvasRasterLayerState } from 'features/controlLayers/store/types';
-import { imageNameToImageObject } from 'features/controlLayers/store/util';
 import { useCancelQueueItemsByDestination } from 'features/queue/hooks/useCancelQueueItemsByDestination';
-import { memo, useCallback } from 'react';
+import { memo } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
 import { PiCheckBold } from 'react-icons/pi';
 
 export const StagingAreaToolbarAcceptButton = memo(() => {
-  const ctx = useCanvasSessionContext();
-  const dispatch = useAppDispatch();
+  const ctx = useStagingAreaContext();
   const canvasManager = useCanvasManager();
-  const bboxRect = useAppSelector(selectBboxRect);
-  const selectedEntityIdentifier = useAppSelector(selectSelectedEntityIdentifier);
   const shouldShowStagedImage = useStore(canvasManager.stagingArea.$shouldShowStagedImage);
   const isCanvasFocused = useIsRegionFocused('canvas');
-  const selectedItemImageDTO = useStore(ctx.$selectedItemOutputImageDTO);
   const cancelQueueItemsByDestination = useCancelQueueItemsByDestination();
+  const acceptSelectedIsEnabled = useStore(ctx.$acceptSelectedIsEnabled);
 
   const { t } = useTranslation();
 
-  const acceptSelected = useCallback(() => {
-    if (!selectedItemImageDTO) {
-      return;
-    }
-    const { x, y, width, height } = bboxRect;
-    const imageObject = imageNameToImageObject(selectedItemImageDTO.image_name, { width, height });
-    const overrides: Partial<CanvasRasterLayerState> = {
-      position: { x, y },
-      objects: [imageObject],
-    };
-
-    dispatch(rasterLayerAdded({ overrides, isSelected: selectedEntityIdentifier?.type === 'raster_layer' }));
-    dispatch(canvasSessionReset());
-    cancelQueueItemsByDestination.trigger(ctx.session.id, { withToast: false });
-  }, [
-    selectedItemImageDTO,
-    bboxRect,
-    dispatch,
-    selectedEntityIdentifier?.type,
-    cancelQueueItemsByDestination,
-    ctx.session.id,
-  ]);
-
   useHotkeys(
     ['enter'],
-    acceptSelected,
+    ctx.acceptSelected,
     {
       preventDefault: true,
-      enabled: isCanvasFocused && shouldShowStagedImage && selectedItemImageDTO !== null,
+      enabled: isCanvasFocused && shouldShowStagedImage && acceptSelectedIsEnabled,
     },
-    [isCanvasFocused, shouldShowStagedImage, selectedItemImageDTO]
+    [ctx.acceptSelected, isCanvasFocused, shouldShowStagedImage, acceptSelectedIsEnabled]
   );
 
   return (
@@ -66,9 +34,9 @@ export const StagingAreaToolbarAcceptButton = memo(() => {
       tooltip={`${t('common.accept')} (Enter)`}
       aria-label={`${t('common.accept')} (Enter)`}
       icon={<PiCheckBold />}
-      onClick={acceptSelected}
+      onClick={ctx.acceptSelected}
       colorScheme="invokeBlue"
-      isDisabled={!selectedItemImageDTO || !shouldShowStagedImage || cancelQueueItemsByDestination.isDisabled}
+      isDisabled={!acceptSelectedIsEnabled || !shouldShowStagedImage || cancelQueueItemsByDestination.isDisabled}
       isLoading={cancelQueueItemsByDestination.isLoading}
     />
   );

invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaToolbarDiscardAllButton.tsx

@@ -1,28 +1,28 @@
 import { IconButton } from '@invoke-ai/ui-library';
-import { useCanvasSessionContext } from 'features/controlLayers/components/SimpleSession/context';
+import { useStore } from '@nanostores/react';
+import { useStagingAreaContext } from 'features/controlLayers/components/StagingArea/context';
+import { useCanvasManager } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
 import { useCancelQueueItemsByDestination } from 'features/queue/hooks/useCancelQueueItemsByDestination';
-import { memo, useCallback } from 'react';
+import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiTrashSimpleBold } from 'react-icons/pi';
 
-export const StagingAreaToolbarDiscardAllButton = memo(({ isDisabled }: { isDisabled?: boolean }) => {
-  const ctx = useCanvasSessionContext();
+export const StagingAreaToolbarDiscardAllButton = memo(() => {
+  const canvasManager = useCanvasManager();
+  const shouldShowStagedImage = useStore(canvasManager.stagingArea.$shouldShowStagedImage);
+
+  const ctx = useStagingAreaContext();
   const { t } = useTranslation();
   const cancelQueueItemsByDestination = useCancelQueueItemsByDestination();
 
-  const discardAll = useCallback(() => {
-    ctx.discardAll();
-    cancelQueueItemsByDestination.trigger(ctx.session.id, { withToast: false });
-  }, [cancelQueueItemsByDestination, ctx]);
-
   return (
     <IconButton
       tooltip={`${t('controlLayers.stagingArea.discardAll')} (Esc)`}
       aria-label={t('controlLayers.stagingArea.discardAll')}
       icon={<PiTrashSimpleBold />}
-      onClick={discardAll}
+      onClick={ctx.discardAll}
       colorScheme="error"
-      isDisabled={isDisabled || cancelQueueItemsByDestination.isDisabled}
+      isDisabled={cancelQueueItemsByDestination.isDisabled || !shouldShowStagedImage}
       isLoading={cancelQueueItemsByDestination.isLoading}
     />
   );

invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaToolbarDiscardSelectedButton.tsx

@@ -1,34 +1,30 @@
 import { IconButton } from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
-import { useCanvasSessionContext } from 'features/controlLayers/components/SimpleSession/context';
+import { useStagingAreaContext } from 'features/controlLayers/components/StagingArea/context';
+import { useCanvasManager } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
 import { useCancelQueueItem } from 'features/queue/hooks/useCancelQueueItem';
-import { memo, useCallback } from 'react';
+import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiXBold } from 'react-icons/pi';
 
-export const StagingAreaToolbarDiscardSelectedButton = memo(({ isDisabled }: { isDisabled?: boolean }) => {
-  const ctx = useCanvasSessionContext();
+export const StagingAreaToolbarDiscardSelectedButton = memo(() => {
+  const canvasManager = useCanvasManager();
+  const shouldShowStagedImage = useStore(canvasManager.stagingArea.$shouldShowStagedImage);
+
+  const ctx = useStagingAreaContext();
   const cancelQueueItem = useCancelQueueItem();
-  const selectedItemId = useStore(ctx.$selectedItemId);
+  const discardSelectedIsEnabled = useStore(ctx.$discardSelectedIsEnabled);
 
   const { t } = useTranslation();
 
-  const discardSelected = useCallback(async () => {
-    if (selectedItemId === null) {
-      return;
-    }
-    ctx.discard(selectedItemId);
-    await cancelQueueItem.trigger(selectedItemId, { withToast: false });
-  }, [selectedItemId, ctx, cancelQueueItem]);
-
   return (
     <IconButton
       tooltip={t('controlLayers.stagingArea.discard')}
       aria-label={t('controlLayers.stagingArea.discard')}
       icon={<PiXBold />}
-      onClick={discardSelected}
+      onClick={ctx.discardSelected}
       colorScheme="invokeBlue"
-      isDisabled={selectedItemId === null || cancelQueueItem.isDisabled || isDisabled}
+      isDisabled={!discardSelectedIsEnabled || cancelQueueItem.isDisabled || !shouldShowStagedImage}
       isLoading={cancelQueueItem.isLoading}
     />
   );

invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaToolbarImageCountButton.tsx

@@ -1,23 +1,27 @@
 import { Button } from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
-import { useCanvasSessionContext } from 'features/controlLayers/components/SimpleSession/context';
+import { useStagingAreaContext } from 'features/controlLayers/components/StagingArea/context';
+import { useCanvasManager } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
 import { memo, useMemo } from 'react';
 
 export const StagingAreaToolbarImageCountButton = memo(() => {
-  const ctx = useCanvasSessionContext();
-  const selectItemIndex = useStore(ctx.$selectedItemIndex);
+  const canvasManager = useCanvasManager();
+  const shouldShowStagedImage = useStore(canvasManager.stagingArea.$shouldShowStagedImage);
+
+  const ctx = useStagingAreaContext();
+  const selectedItem = useStore(ctx.$selectedItem);
   const itemCount = useStore(ctx.$itemCount);
 
   const counterText = useMemo(() => {
-    if (itemCount > 0 && selectItemIndex !== null) {
-      return `${selectItemIndex + 1} of ${itemCount}`;
+    if (itemCount > 0 && selectedItem !== null) {
+      return `${selectedItem.index + 1} of ${itemCount}`;
     } else {
       return `0 of 0`;
     }
-  }, [itemCount, selectItemIndex]);
+  }, [itemCount, selectedItem]);
 
   return (
-    <Button colorScheme="base" pointerEvents="none" minW={28}>
+    <Button colorScheme="base" pointerEvents="none" minW={28} isDisabled={!shouldShowStagedImage}>
       {counterText}
     </Button>
   );

invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaToolbarMenu.tsx

@@ -1,12 +1,23 @@
 import { IconButton, Menu, MenuButton, MenuList } from '@invoke-ai/ui-library';
+import { useStore } from '@nanostores/react';
 import { StagingAreaToolbarNewLayerFromImageMenuItems } from 'features/controlLayers/components/StagingArea/StagingAreaToolbarMenuNewLayerFromImage';
+import { useCanvasManager } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
 import { memo } from 'react';
 import { PiDotsThreeVerticalBold } from 'react-icons/pi';
 
 export const StagingAreaToolbarMenu = memo(() => {
+  const canvasManager = useCanvasManager();
+  const shouldShowStagedImage = useStore(canvasManager.stagingArea.$shouldShowStagedImage);
+
   return (
     <Menu>
-      <MenuButton as={IconButton} icon={<PiDotsThreeVerticalBold />} colorScheme="invokeBlue" />
+      <MenuButton
+        tooltip="Image Actions"
+        as={IconButton}
+        icon={<PiDotsThreeVerticalBold />}
+        colorScheme="invokeBlue"
+        isDisabled={!shouldShowStagedImage}
+      />
       <MenuList>
         <StagingAreaToolbarNewLayerFromImageMenuItems />
       </MenuList>

invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaToolbarMenuNewLayerFromImage.tsx

@@ -2,7 +2,7 @@ import { MenuGroup, MenuItem } from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
 import { useAppStore } from 'app/store/storeHooks';
 import { NewLayerIcon } from 'features/controlLayers/components/common/icons';
-import { useCanvasSessionContext } from 'features/controlLayers/components/SimpleSession/context';
+import { useStagingAreaContext } from 'features/controlLayers/components/StagingArea/context';
 import { useCanvasManager } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
 import { createNewCanvasEntityFromImage } from 'features/imageActions/actions';
 import { toast } from 'features/toast/toast';
@@ -15,8 +15,8 @@ const uploadImageArg = { image_category: 'general', is_intermediate: true, silen
 export const StagingAreaToolbarNewLayerFromImageMenuItems = memo(() => {
   const canvasManager = useCanvasManager();
   const { t } = useTranslation();
-  const ctx = useCanvasSessionContext();
-  const selectedItemOutputImageDTO = useStore(ctx.$selectedItemOutputImageDTO);
+  const ctx = useStagingAreaContext();
+  const selectedItemImageDTO = useStore(ctx.$selectedItemImageDTO);
   const store = useAppStore();
   const shouldShowStagedImage = useStore(canvasManager.stagingArea.$shouldShowStagedImage);
 
@@ -29,11 +29,11 @@ export const StagingAreaToolbarNewLayerFromImageMenuItems = memo(() => {
   }, [t]);
 
   const onClickNewRasterLayerFromImage = useCallback(async () => {
-    if (!selectedItemOutputImageDTO) {
+    if (!selectedItemImageDTO) {
       return;
     }
     const { dispatch, getState } = store;
-    const imageDTO = await copyImage(selectedItemOutputImageDTO.image_name, uploadImageArg);
+    const imageDTO = await copyImage(selectedItemImageDTO.image_name, uploadImageArg);
     createNewCanvasEntityFromImage({
       imageDTO,
       type: 'raster_layer',
@@ -42,14 +42,14 @@ export const StagingAreaToolbarNewLayerFromImageMenuItems = memo(() => {
       overrides: { isEnabled: false }, // We are adding the layer while staging, it should be disabled by default
     });
     toastSentToCanvas();
-  }, [selectedItemOutputImageDTO, store, toastSentToCanvas]);
+  }, [selectedItemImageDTO, store, toastSentToCanvas]);
 
   const onClickNewControlLayerFromImage = useCallback(async () => {
-    if (!selectedItemOutputImageDTO) {
+    if (!selectedItemImageDTO) {
       return;
     }
     const { dispatch, getState } = store;
-    const imageDTO = await copyImage(selectedItemOutputImageDTO.image_name, uploadImageArg);
+    const imageDTO = await copyImage(selectedItemImageDTO.image_name, uploadImageArg);
 
     createNewCanvasEntityFromImage({
       imageDTO,
@@ -59,14 +59,14 @@ export const StagingAreaToolbarNewLayerFromImageMenuItems = memo(() => {
       overrides: { isEnabled: false }, // We are adding the layer while staging, it should be disabled by default
     });
     toastSentToCanvas();
-  }, [selectedItemOutputImageDTO, store, toastSentToCanvas]);
+  }, [selectedItemImageDTO, store, toastSentToCanvas]);
 
   const onClickNewInpaintMaskFromImage = useCallback(async () => {
-    if (!selectedItemOutputImageDTO) {
+    if (!selectedItemImageDTO) {
       return;
     }
     const { dispatch, getState } = store;
-    const imageDTO = await copyImage(selectedItemOutputImageDTO.image_name, uploadImageArg);
+    const imageDTO = await copyImage(selectedItemImageDTO.image_name, uploadImageArg);
 
     createNewCanvasEntityFromImage({
       imageDTO,
@@ -76,14 +76,14 @@ export const StagingAreaToolbarNewLayerFromImageMenuItems = memo(() => {
       overrides: { isEnabled: false }, // We are adding the layer while staging, it should be disabled by default
     });
     toastSentToCanvas();
-  }, [selectedItemOutputImageDTO, store, toastSentToCanvas]);
+  }, [selectedItemImageDTO, store, toastSentToCanvas]);
 
   const onClickNewRegionalGuidanceFromImage = useCallback(async () => {
-    if (!selectedItemOutputImageDTO) {
+    if (!selectedItemImageDTO) {
       return;
     }
     const { dispatch, getState } = store;
-    const imageDTO = await copyImage(selectedItemOutputImageDTO.image_name, uploadImageArg);
+    const imageDTO = await copyImage(selectedItemImageDTO.image_name, uploadImageArg);
 
     createNewCanvasEntityFromImage({
       imageDTO,
@@ -93,35 +93,35 @@ export const StagingAreaToolbarNewLayerFromImageMenuItems = memo(() => {
       overrides: { isEnabled: false }, // We are adding the layer while staging, it should be disabled by default
     });
     toastSentToCanvas();
-  }, [selectedItemOutputImageDTO, store, toastSentToCanvas]);
+  }, [selectedItemImageDTO, store, toastSentToCanvas]);
 
   return (
     <MenuGroup title="New Layer From Image">
       <MenuItem
         icon={<NewLayerIcon />}
         onClickCapture={onClickNewInpaintMaskFromImage}
-        isDisabled={!selectedItemOutputImageDTO || !shouldShowStagedImage}
+        isDisabled={!selectedItemImageDTO || !shouldShowStagedImage}
       >
         {t('controlLayers.inpaintMask')}
       </MenuItem>
       <MenuItem
         icon={<NewLayerIcon />}
         onClickCapture={onClickNewRegionalGuidanceFromImage}
-        isDisabled={!selectedItemOutputImageDTO || !shouldShowStagedImage}
+        isDisabled={!selectedItemImageDTO || !shouldShowStagedImage}
       >
         {t('controlLayers.regionalGuidance')}
       </MenuItem>
       <MenuItem
         icon={<NewLayerIcon />}
         onClickCapture={onClickNewControlLayerFromImage}
-        isDisabled={!selectedItemOutputImageDTO || !shouldShowStagedImage}
+        isDisabled={!selectedItemImageDTO || !shouldShowStagedImage}
       >
         {t('controlLayers.controlLayer')}
       </MenuItem>
       <MenuItem
         icon={<NewLayerIcon />}
         onClickCapture={onClickNewRasterLayerFromImage}
-        isDisabled={!selectedItemOutputImageDTO || !shouldShowStagedImage}
+        isDisabled={!selectedItemImageDTO || !shouldShowStagedImage}
       >
         {t('controlLayers.rasterLayer')}
       </MenuItem>

invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaToolbarNextButton.tsx

@@ -1,14 +1,18 @@
 import { IconButton } from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
 import { useIsRegionFocused } from 'common/hooks/focus';
-import { useCanvasSessionContext } from 'features/controlLayers/components/SimpleSession/context';
+import { useStagingAreaContext } from 'features/controlLayers/components/StagingArea/context';
+import { useCanvasManager } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
 import { memo, useCallback } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
 import { PiArrowRightBold } from 'react-icons/pi';
 
-export const StagingAreaToolbarNextButton = memo(({ isDisabled }: { isDisabled?: boolean }) => {
-  const ctx = useCanvasSessionContext();
+export const StagingAreaToolbarNextButton = memo(() => {
+  const canvasManager = useCanvasManager();
+  const shouldShowStagedImage = useStore(canvasManager.stagingArea.$shouldShowStagedImage);
+
+  const ctx = useStagingAreaContext();
   const itemCount = useStore(ctx.$itemCount);
   const isCanvasFocused = useIsRegionFocused('canvas');
 
@@ -23,9 +27,9 @@ export const StagingAreaToolbarNextButton = memo(({ isDisabled }: { isDisabled?:
     ctx.selectNext,
     {
       preventDefault: true,
-      enabled: isCanvasFocused && !isDisabled && itemCount > 1,
+      enabled: isCanvasFocused && shouldShowStagedImage && itemCount > 1,
     },
-    [isCanvasFocused, isDisabled, itemCount, ctx.selectNext]
+    [isCanvasFocused, shouldShowStagedImage, itemCount, ctx.selectNext]
   );
 
   return (
@@ -35,7 +39,7 @@ export const StagingAreaToolbarNextButton = memo(({ isDisabled }: { isDisabled?:
       icon={<PiArrowRightBold />}
       onClick={selectNext}
       colorScheme="invokeBlue"
-      isDisabled={itemCount <= 1 || isDisabled}
+      isDisabled={itemCount <= 1 || !shouldShowStagedImage}
     />
   );
 });

invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaToolbarPrevButton.tsx

@@ -1,14 +1,17 @@
 import { IconButton } from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
 import { useIsRegionFocused } from 'common/hooks/focus';
-import { useCanvasSessionContext } from 'features/controlLayers/components/SimpleSession/context';
+import { useStagingAreaContext } from 'features/controlLayers/components/StagingArea/context';
+import { useCanvasManager } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
 import { memo, useCallback } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
 import { PiArrowLeftBold } from 'react-icons/pi';
 
-export const StagingAreaToolbarPrevButton = memo(({ isDisabled }: { isDisabled?: boolean }) => {
-  const ctx = useCanvasSessionContext();
+export const StagingAreaToolbarPrevButton = memo(() => {
+  const canvasManager = useCanvasManager();
+  const shouldShowStagedImage = useStore(canvasManager.stagingArea.$shouldShowStagedImage);
+  const ctx = useStagingAreaContext();
   const itemCount = useStore(ctx.$itemCount);
   const isCanvasFocused = useIsRegionFocused('canvas');
 
@@ -23,9 +26,9 @@ export const StagingAreaToolbarPrevButton = memo(({ isDisabled }: { isDisabled?:
     ctx.selectPrev,
     {
       preventDefault: true,
-      enabled: isCanvasFocused && !isDisabled && itemCount > 1,
+      enabled: isCanvasFocused && shouldShowStagedImage && itemCount > 1,
     },
-    [isCanvasFocused, isDisabled, itemCount, ctx.selectPrev]
+    [isCanvasFocused, shouldShowStagedImage, itemCount, ctx.selectPrev]
   );
 
   return (
@@ -35,7 +38,7 @@ export const StagingAreaToolbarPrevButton = memo(({ isDisabled }: { isDisabled?:
       icon={<PiArrowLeftBold />}
       onClick={selectPrev}
       colorScheme="invokeBlue"
-      isDisabled={itemCount <= 1 || isDisabled}
+      isDisabled={itemCount <= 1 || !shouldShowStagedImage}
     />
   );
 });

invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaToolbarSaveSelectedToGalleryButton.tsx

@@ -2,7 +2,7 @@ import { IconButton } from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
 import { useAppSelector } from 'app/store/storeHooks';
 import { withResultAsync } from 'common/util/result';
-import { useCanvasSessionContext } from 'features/controlLayers/components/SimpleSession/context';
+import { useStagingAreaContext } from 'features/controlLayers/components/StagingArea/context';
 import { useCanvasManager } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
 import { selectAutoAddBoardId } from 'features/gallery/store/gallerySelectors';
 import { toast } from 'features/toast/toast';
@@ -16,14 +16,14 @@ const TOAST_ID = 'SAVE_STAGING_AREA_IMAGE_TO_GALLERY';
 export const StagingAreaToolbarSaveSelectedToGalleryButton = memo(() => {
   const canvasManager = useCanvasManager();
   const autoAddBoardId = useAppSelector(selectAutoAddBoardId);
-  const ctx = useCanvasSessionContext();
-  const selectedItemOutputImageDTO = useStore(ctx.$selectedItemOutputImageDTO);
+  const ctx = useStagingAreaContext();
+  const selectedItemImageDTO = useStore(ctx.$selectedItemImageDTO);
   const shouldShowStagedImage = useStore(canvasManager.stagingArea.$shouldShowStagedImage);
 
   const { t } = useTranslation();
 
   const saveSelectedImageToGallery = useCallback(async () => {
-    if (!selectedItemOutputImageDTO) {
+    if (!selectedItemImageDTO) {
       return;
     }
 
@@ -31,7 +31,7 @@ export const StagingAreaToolbarSaveSelectedToGalleryButton = memo(() => {
     // the gallery without borking the canvas, which may need this image to exist.
     const result = await withResultAsync(async () => {
       // Create a new file with the same name, which we will upload
-      await copyImage(selectedItemOutputImageDTO.image_name, {
+      await copyImage(selectedItemImageDTO.image_name, {
         // Image should show up in the Images tab
         image_category: 'general',
         is_intermediate: false,
@@ -55,7 +55,7 @@ export const StagingAreaToolbarSaveSelectedToGalleryButton = memo(() => {
         status: 'error',
       });
     }
-  }, [autoAddBoardId, selectedItemOutputImageDTO, t]);
+  }, [autoAddBoardId, selectedItemImageDTO, t]);
 
   return (
     <IconButton
@@ -64,7 +64,7 @@ export const StagingAreaToolbarSaveSelectedToGalleryButton = memo(() => {
       icon={<PiFloppyDiskBold />}
       onClick={saveSelectedImageToGallery}
       colorScheme="invokeBlue"
-      isDisabled={!selectedItemOutputImageDTO || !shouldShowStagedImage}
+      isDisabled={!selectedItemImageDTO || !shouldShowStagedImage}
     />
   );
 });

invokeai/frontend/web/src/features/controlLayers/components/StagingArea/__mocks__/mockStagingAreaApp.ts

@@ -0,0 +1,172 @@
+import { merge } from 'es-toolkit';
+import type { StagingAreaAppApi } from 'features/controlLayers/components/StagingArea/state';
+import type { AutoSwitchMode } from 'features/controlLayers/store/canvasSettingsSlice';
+import type { ImageDTO, S } from 'services/api/types';
+import type { PartialDeep } from 'type-fest';
+import { vi } from 'vitest';
+
+export const createMockStagingAreaApp = (): StagingAreaAppApi & {
+  // Additional methods for testing
+  _triggerItemsChanged: (items: S['SessionQueueItem'][]) => void;
+  _triggerQueueItemStatusChanged: (data: S['QueueItemStatusChangedEvent']) => void;
+  _triggerInvocationProgress: (data: S['InvocationProgressEvent']) => void;
+  _setAutoSwitchMode: (mode: AutoSwitchMode) => void;
+  _setImageDTO: (imageName: string, imageDTO: ImageDTO | null) => void;
+} => {
+  const itemsChangedHandlers = new Set<(items: S['SessionQueueItem'][]) => void>();
+  const queueItemStatusChangedHandlers = new Set<(data: S['QueueItemStatusChangedEvent']) => void>();
+  const invocationProgressHandlers = new Set<(data: S['InvocationProgressEvent']) => void>();
+
+  let autoSwitchMode: AutoSwitchMode = 'switch_on_start';
+  const imageDTOs = new Map<string, ImageDTO | null>();
+
+  return {
+    onDiscard: vi.fn(),
+    onDiscardAll: vi.fn(),
+    onAccept: vi.fn(),
+    onSelect: vi.fn(),
+    onSelectPrev: vi.fn(),
+    onSelectNext: vi.fn(),
+    onSelectFirst: vi.fn(),
+    onSelectLast: vi.fn(),
+    getAutoSwitch: vi.fn(() => autoSwitchMode),
+    onAutoSwitchChange: vi.fn(),
+    getImageDTO: vi.fn((imageName: string) => {
+      return Promise.resolve(imageDTOs.get(imageName) || null);
+    }),
+    onItemsChanged: vi.fn((handler) => {
+      itemsChangedHandlers.add(handler);
+      return () => itemsChangedHandlers.delete(handler);
+    }),
+    onQueueItemStatusChanged: vi.fn((handler) => {
+      queueItemStatusChangedHandlers.add(handler);
+      return () => queueItemStatusChangedHandlers.delete(handler);
+    }),
+    onInvocationProgress: vi.fn((handler) => {
+      invocationProgressHandlers.add(handler);
+      return () => invocationProgressHandlers.delete(handler);
+    }),
+
+    // Testing helper methods
+    _triggerItemsChanged: (items: S['SessionQueueItem'][]) => {
+      itemsChangedHandlers.forEach((handler) => handler(items));
+    },
+    _triggerQueueItemStatusChanged: (data: S['QueueItemStatusChangedEvent']) => {
+      queueItemStatusChangedHandlers.forEach((handler) => handler(data));
+    },
+    _triggerInvocationProgress: (data: S['InvocationProgressEvent']) => {
+      invocationProgressHandlers.forEach((handler) => handler(data));
+    },
+    _setAutoSwitchMode: (mode: AutoSwitchMode) => {
+      autoSwitchMode = mode;
+    },
+    _setImageDTO: (imageName: string, imageDTO: ImageDTO | null) => {
+      imageDTOs.set(imageName, imageDTO);
+    },
+  };
+};
+
+export const createMockQueueItem = (overrides: PartialDeep<S['SessionQueueItem']> = {}): S['SessionQueueItem'] =>
+  merge(
+    {
+      item_id: 1,
+      batch_id: 'test-batch-id',
+      session_id: 'test-session',
+      queue_id: 'test-queue-id',
+      status: 'pending',
+      priority: 0,
+      origin: null,
+      destination: 'test-session',
+      error_type: null,
+      error_message: null,
+      error_traceback: null,
+      created_at: '2024-01-01T00:00:00Z',
+      updated_at: '2024-01-01T00:00:00Z',
+      started_at: null,
+      completed_at: null,
+      field_values: null,
+      retried_from_item_id: null,
+      is_api_validation_run: false,
+      published_workflow_id: null,
+      session: {
+        id: 'test-session',
+        graph: {},
+        execution_graph: {},
+        executed: [],
+        executed_history: [],
+        results: {
+          'test-node-id': {
+            image: {
+              image_name: 'test-image.png',
+            },
+          },
+        },
+        errors: {},
+        prepared_source_mapping: {},
+        source_prepared_mapping: {
+          canvas_output: ['test-node-id'],
+        },
+      },
+      workflow: null,
+    },
+    overrides
+  ) as S['SessionQueueItem'];
+
+export const createMockImageDTO = (overrides: Partial<ImageDTO> = {}): ImageDTO => ({
+  image_name: 'test-image.png',
+  image_url: 'http://test.com/test-image.png',
+  thumbnail_url: 'http://test.com/test-image-thumb.png',
+  image_origin: 'internal',
+  image_category: 'general',
+  width: 512,
+  height: 512,
+  created_at: '2024-01-01T00:00:00Z',
+  updated_at: '2024-01-01T00:00:00Z',
+  deleted_at: null,
+  is_intermediate: false,
+  starred: false,
+  has_workflow: false,
+  session_id: 'test-session',
+  node_id: 'test-node-id',
+  board_id: null,
+  ...overrides,
+});
+
+export const createMockProgressEvent = (
+  overrides: PartialDeep<S['InvocationProgressEvent']> = {}
+): S['InvocationProgressEvent'] =>
+  merge(
+    {
+      timestamp: Date.now(),
+      queue_id: 'test-queue-id',
+      item_id: 1,
+      batch_id: 'test-batch-id',
+      session_id: 'test-session',
+      origin: null,
+      destination: 'test-session',
+      invocation: {},
+      invocation_source_id: 'test-invocation-source-id',
+      message: 'Processing...',
+      percentage: 50,
+      image: null,
+    } as S['InvocationProgressEvent'],
+    overrides
+  );
+
+export const createMockQueueItemStatusChangedEvent = (
+  overrides: PartialDeep<S['QueueItemStatusChangedEvent']> = {}
+): S['QueueItemStatusChangedEvent'] =>
+  merge(
+    {
+      timestamp: Date.now(),
+      queue_id: 'test-queue-id',
+      item_id: 1,
+      batch_id: 'test-batch-id',
+      origin: null,
+      destination: 'test-session',
+      status: 'completed',
+      error_type: null,
+      error_message: null,
+    } as S['QueueItemStatusChangedEvent'],
+    overrides
+  );

invokeai/frontend/web/src/features/controlLayers/components/StagingArea/context.tsx

@@ -0,0 +1,132 @@
+import { useStore } from '@nanostores/react';
+import { useAppStore } from 'app/store/storeHooks';
+import {
+  selectStagingAreaAutoSwitch,
+  settingsStagingAreaAutoSwitchChanged,
+} from 'features/controlLayers/store/canvasSettingsSlice';
+import { rasterLayerAdded } from 'features/controlLayers/store/canvasSlice';
+import {
+  buildSelectCanvasQueueItems,
+  canvasQueueItemDiscarded,
+  canvasSessionReset,
+} from 'features/controlLayers/store/canvasStagingAreaSlice';
+import { selectBboxRect, selectSelectedEntityIdentifier } from 'features/controlLayers/store/selectors';
+import type { CanvasRasterLayerState } from 'features/controlLayers/store/types';
+import { imageNameToImageObject } from 'features/controlLayers/store/util';
+import type { PropsWithChildren } from 'react';
+import { createContext, memo, useContext, useEffect, useMemo, useState } from 'react';
+import { getImageDTOSafe } from 'services/api/endpoints/images';
+import { queueApi } from 'services/api/endpoints/queue';
+import type { S } from 'services/api/types';
+import { $socket } from 'services/events/stores';
+import { assert } from 'tsafe';
+
+import type { ProgressData, StagingAreaAppApi } from './state';
+import { getInitialProgressData, StagingAreaApi } from './state';
+
+const StagingAreaContext = createContext<StagingAreaApi | null>(null);
+
+export const StagingAreaContextProvider = memo(({ children, sessionId }: PropsWithChildren<{ sessionId: string }>) => {
+  const store = useAppStore();
+  const socket = useStore($socket);
+  const stagingAreaAppApi = useMemo<StagingAreaAppApi>(() => {
+    const selectQueueItems = buildSelectCanvasQueueItems(sessionId);
+
+    const _stagingAreaAppApi: StagingAreaAppApi = {
+      getAutoSwitch: () => selectStagingAreaAutoSwitch(store.getState()),
+      getImageDTO: (imageName: string) => getImageDTOSafe(imageName),
+      onInvocationProgress: (handler) => {
+        socket?.on('invocation_progress', handler);
+        return () => {
+          socket?.off('invocation_progress', handler);
+        };
+      },
+      onQueueItemStatusChanged: (handler) => {
+        socket?.on('queue_item_status_changed', handler);
+        return () => {
+          socket?.off('queue_item_status_changed', handler);
+        };
+      },
+      onItemsChanged: (handler) => {
+        let prev: S['SessionQueueItem'][] = [];
+        return store.subscribe(() => {
+          const next = selectQueueItems(store.getState());
+          if (prev !== next) {
+            prev = next;
+            handler(next);
+          }
+        });
+      },
+      onDiscard: ({ item_id, status }) => {
+        store.dispatch(canvasQueueItemDiscarded({ itemId: item_id }));
+        if (status === 'in_progress' || status === 'pending') {
+          store.dispatch(queueApi.endpoints.cancelQueueItem.initiate({ item_id }, { track: false }));
+        }
+      },
+      onDiscardAll: () => {
+        store.dispatch(canvasSessionReset());
+        store.dispatch(
+          queueApi.endpoints.cancelQueueItemsByDestination.initiate({ destination: sessionId }, { track: false })
+        );
+      },
+      onAccept: (item, imageDTO) => {
+        const bboxRect = selectBboxRect(store.getState());
+        const { x, y, width, height } = bboxRect;
+        const imageObject = imageNameToImageObject(imageDTO.image_name, { width, height });
+        const selectedEntityIdentifier = selectSelectedEntityIdentifier(store.getState());
+        const overrides: Partial<CanvasRasterLayerState> = {
+          position: { x, y },
+          objects: [imageObject],
+        };
+
+        store.dispatch(rasterLayerAdded({ overrides, isSelected: selectedEntityIdentifier?.type === 'raster_layer' }));
+        store.dispatch(canvasSessionReset());
+        store.dispatch(
+          queueApi.endpoints.cancelQueueItemsByDestination.initiate({ destination: sessionId }, { track: false })
+        );
+      },
+      onAutoSwitchChange: (mode) => {
+        store.dispatch(settingsStagingAreaAutoSwitchChanged(mode));
+      },
+    };
+
+    return _stagingAreaAppApi;
+  }, [sessionId, socket, store]);
+
+  const [stagingAreaApi] = useState(() => new StagingAreaApi());
+
+  useEffect(() => {
+    stagingAreaApi.connectToApp(sessionId, stagingAreaAppApi);
+
+    // We need to subscribe to the queue items query manually to ensure the staging area actually gets the items
+    const { unsubscribe: unsubQueueItemsQuery } = store.dispatch(
+      queueApi.endpoints.listAllQueueItems.initiate({ destination: sessionId })
+    );
+
+    return () => {
+      stagingAreaApi.cleanup();
+      unsubQueueItemsQuery();
+    };
+  }, [sessionId, stagingAreaApi, stagingAreaAppApi, store]);
+
+  return <StagingAreaContext.Provider value={stagingAreaApi}>{children}</StagingAreaContext.Provider>;
+});
+StagingAreaContextProvider.displayName = 'StagingAreaContextProvider';
+
+export const useStagingAreaContext = () => {
+  const ctx = useContext(StagingAreaContext);
+  assert(ctx !== null, "'useStagingAreaContext' must be used within a StagingAreaContextProvider");
+  return ctx;
+};
+
+export const useOutputImageDTO = (itemId: number) => {
+  const ctx = useStagingAreaContext();
+  const allProgressData = useStore(ctx.$progressData, { keys: [itemId] });
+  return allProgressData[itemId]?.imageDTO ?? null;
+};
+
+export const useProgressDatum = (itemId: number): ProgressData => {
+  const ctx = useStagingAreaContext();
+  const allProgressData = useStore(ctx.$progressData, { keys: [itemId] });
+  return allProgressData[itemId] ?? getInitialProgressData(itemId);
+};

invokeai/frontend/web/src/features/controlLayers/components/StagingArea/shared.test.ts

@@ -0,0 +1,205 @@
+import type { S } from 'services/api/types';
+import { describe, expect, it } from 'vitest';
+
+import { getOutputImageName, getProgressMessage, getQueueItemElementId } from './shared';
+
+describe('StagingAreaApi Utility Functions', () => {
+  describe('getProgressMessage', () => {
+    it('should return default message when no data provided', () => {
+      expect(getProgressMessage()).toBe('Generating');
+      expect(getProgressMessage(null)).toBe('Generating');
+    });
+
+    it('should format progress message when data is provided', () => {
+      const progressEvent: S['InvocationProgressEvent'] = {
+        item_id: 1,
+        destination: 'test-session',
+        node_id: 'test-node',
+        source_node_id: 'test-source-node',
+        progress: 0.5,
+        message: 'Processing image...',
+        image: null,
+      } as unknown as S['InvocationProgressEvent'];
+
+      const result = getProgressMessage(progressEvent);
+      expect(result).toBe('Processing image...');
+    });
+  });
+
+  describe('getQueueItemElementId', () => {
+    it('should generate correct element ID for queue item', () => {
+      expect(getQueueItemElementId(0)).toBe('queue-item-preview-0');
+      expect(getQueueItemElementId(5)).toBe('queue-item-preview-5');
+      expect(getQueueItemElementId(99)).toBe('queue-item-preview-99');
+    });
+  });
+
+  describe('getOutputImageName', () => {
+    it('should extract image name from completed queue item', () => {
+      const queueItem: S['SessionQueueItem'] = {
+        item_id: 1,
+        status: 'completed',
+        priority: 0,
+        destination: 'test-session',
+        created_at: '2024-01-01T00:00:00Z',
+        updated_at: '2024-01-01T00:00:00Z',
+        started_at: '2024-01-01T00:00:01Z',
+        completed_at: '2024-01-01T00:01:00Z',
+        error: null,
+        session: {
+          id: 'test-session',
+          source_prepared_mapping: {
+            canvas_output: ['output-node-id'],
+          },
+          results: {
+            'output-node-id': {
+              image: {
+                image_name: 'test-output.png',
+              },
+            },
+          },
+        },
+      } as unknown as S['SessionQueueItem'];
+
+      expect(getOutputImageName(queueItem)).toBe('test-output.png');
+    });
+
+    it('should return null when no canvas output node found', () => {
+      const queueItem = {
+        item_id: 1,
+        status: 'completed',
+        priority: 0,
+        destination: 'test-session',
+        created_at: '2024-01-01T00:00:00Z',
+        updated_at: '2024-01-01T00:00:00Z',
+        started_at: '2024-01-01T00:00:01Z',
+        completed_at: '2024-01-01T00:01:00Z',
+        error: null,
+        session: {
+          id: 'test-session',
+          source_prepared_mapping: {
+            some_other_node: ['other-node-id'],
+          },
+          results: {
+            'other-node-id': {
+              type: 'image_output',
+              image: {
+                image_name: 'test-output.png',
+              },
+              width: 512,
+              height: 512,
+            },
+          },
+        },
+      } as unknown as S['SessionQueueItem'];
+
+      expect(getOutputImageName(queueItem)).toBe(null);
+    });
+
+    it('should return null when output node has no results', () => {
+      const queueItem: S['SessionQueueItem'] = {
+        item_id: 1,
+        status: 'completed',
+        priority: 0,
+        destination: 'test-session',
+        created_at: '2024-01-01T00:00:00Z',
+        updated_at: '2024-01-01T00:00:00Z',
+        started_at: '2024-01-01T00:00:01Z',
+        completed_at: '2024-01-01T00:01:00Z',
+        error: null,
+        session: {
+          id: 'test-session',
+          source_prepared_mapping: {
+            canvas_output: ['output-node-id'],
+          },
+          results: {},
+        },
+      } as unknown as S['SessionQueueItem'];
+
+      expect(getOutputImageName(queueItem)).toBe(null);
+    });
+
+    it('should return null when results contain no image fields', () => {
+      const queueItem: S['SessionQueueItem'] = {
+        item_id: 1,
+        status: 'completed',
+        priority: 0,
+        destination: 'test-session',
+        created_at: '2024-01-01T00:00:00Z',
+        updated_at: '2024-01-01T00:00:00Z',
+        started_at: '2024-01-01T00:00:01Z',
+        completed_at: '2024-01-01T00:01:00Z',
+        error: null,
+        session: {
+          id: 'test-session',
+          source_prepared_mapping: {
+            canvas_output: ['output-node-id'],
+          },
+          results: {
+            'output-node-id': {
+              text: 'some text output',
+              number: 42,
+            },
+          },
+        },
+      } as unknown as S['SessionQueueItem'];
+
+      expect(getOutputImageName(queueItem)).toBe(null);
+    });
+
+    it('should handle multiple outputs and return first image', () => {
+      const queueItem: S['SessionQueueItem'] = {
+        item_id: 1,
+        status: 'completed',
+        priority: 0,
+        destination: 'test-session',
+        created_at: '2024-01-01T00:00:00Z',
+        updated_at: '2024-01-01T00:00:00Z',
+        started_at: '2024-01-01T00:00:01Z',
+        completed_at: '2024-01-01T00:01:00Z',
+        error: null,
+        session: {
+          id: 'test-session',
+          source_prepared_mapping: {
+            canvas_output: ['output-node-id'],
+          },
+          results: {
+            'output-node-id': {
+              text: 'some text',
+              first_image: {
+                image_name: 'first-image.png',
+              },
+              second_image: {
+                image_name: 'second-image.png',
+              },
+            },
+          },
+        },
+      } as unknown as S['SessionQueueItem'];
+
+      const result = getOutputImageName(queueItem);
+      expect(result).toBe('first-image.png');
+    });
+
+    it('should handle empty session mapping', () => {
+      const queueItem: S['SessionQueueItem'] = {
+        item_id: 1,
+        status: 'completed',
+        priority: 0,
+        destination: 'test-session',
+        created_at: '2024-01-01T00:00:00Z',
+        updated_at: '2024-01-01T00:00:00Z',
+        started_at: '2024-01-01T00:00:01Z',
+        completed_at: '2024-01-01T00:01:00Z',
+        error: null,
+        session: {
+          id: 'test-session',
+          source_prepared_mapping: {},
+          results: {},
+        },
+      } as unknown as S['SessionQueueItem'];
+
+      expect(getOutputImageName(queueItem)).toBe(null);
+    });
+  });
+});

invokeai/frontend/web/src/features/controlLayers/components/StagingArea/state.test.ts

@@ -0,0 +1,799 @@
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+
+import {
+  createMockImageDTO,
+  createMockProgressEvent,
+  createMockQueueItem,
+  createMockQueueItemStatusChangedEvent,
+  createMockStagingAreaApp,
+} from './__mocks__/mockStagingAreaApp';
+import { StagingAreaApi } from './state';
+
+describe('StagingAreaApi', () => {
+  let api: StagingAreaApi;
+  let mockApp: ReturnType<typeof createMockStagingAreaApp>;
+  const sessionId = 'test-session';
+
+  beforeEach(() => {
+    mockApp = createMockStagingAreaApp();
+    api = new StagingAreaApi();
+    api.connectToApp(sessionId, mockApp);
+  });
+
+  afterEach(() => {
+    api.cleanup();
+  });
+
+  describe('Constructor and Setup', () => {
+    it('should initialize with correct session ID', () => {
+      expect(api._sessionId).toBe(sessionId);
+    });
+
+    it('should set up event subscriptions', () => {
+      expect(mockApp.onItemsChanged).toHaveBeenCalledWith(expect.any(Function));
+      expect(mockApp.onQueueItemStatusChanged).toHaveBeenCalledWith(expect.any(Function));
+      expect(mockApp.onInvocationProgress).toHaveBeenCalledWith(expect.any(Function));
+    });
+
+    it('should initialize atoms with default values', () => {
+      expect(api.$lastStartedItemId.get()).toBe(null);
+      expect(api.$lastCompletedItemId.get()).toBe(null);
+      expect(api.$items.get()).toEqual([]);
+      expect(api.$progressData.get()).toEqual({});
+      expect(api.$selectedItemId.get()).toBe(null);
+    });
+  });
+
+  describe('Computed Values', () => {
+    it('should compute item count correctly', () => {
+      expect(api.$itemCount.get()).toBe(0);
+
+      const items = [createMockQueueItem({ item_id: 1 })];
+      api.$items.set(items);
+      expect(api.$itemCount.get()).toBe(1);
+    });
+
+    it('should compute hasItems correctly', () => {
+      expect(api.$hasItems.get()).toBe(false);
+
+      const items = [createMockQueueItem({ item_id: 1 })];
+      api.$items.set(items);
+      expect(api.$hasItems.get()).toBe(true);
+    });
+
+    it('should compute isPending correctly', () => {
+      expect(api.$isPending.get()).toBe(false);
+
+      const items = [
+        createMockQueueItem({ item_id: 1, status: 'pending' }),
+        createMockQueueItem({ item_id: 2, status: 'completed' }),
+      ];
+      api.$items.set(items);
+      expect(api.$isPending.get()).toBe(true);
+    });
+
+    it('should compute selectedItem correctly', () => {
+      expect(api.$selectedItem.get()).toBe(null);
+
+      const items = [createMockQueueItem({ item_id: 1 }), createMockQueueItem({ item_id: 2 })];
+      api.$items.set(items);
+      api.$selectedItemId.set(1);
+
+      const selectedItem = api.$selectedItem.get();
+      expect(selectedItem).not.toBe(null);
+      expect(selectedItem?.item.item_id).toBe(1);
+      expect(selectedItem?.index).toBe(0);
+    });
+
+    it('should compute selectedItemImageDTO correctly', () => {
+      const items = [createMockQueueItem({ item_id: 1 })];
+      const imageDTO = createMockImageDTO();
+
+      api.$items.set(items);
+      api.$selectedItemId.set(1);
+      api.$progressData.setKey(1, {
+        itemId: 1,
+        progressEvent: null,
+        progressImage: null,
+        imageDTO,
+        imageLoaded: false,
+      });
+
+      expect(api.$selectedItemImageDTO.get()).toBe(imageDTO);
+    });
+
+    it('should compute selectedItemIndex correctly', () => {
+      const items = [createMockQueueItem({ item_id: 1 }), createMockQueueItem({ item_id: 2 })];
+      api.$items.set(items);
+      api.$selectedItemId.set(2);
+
+      expect(api.$selectedItemIndex.get()).toBe(1);
+    });
+  });
+
+  describe('Selection Methods', () => {
+    beforeEach(() => {
+      const items = [
+        createMockQueueItem({ item_id: 1 }),
+        createMockQueueItem({ item_id: 2 }),
+        createMockQueueItem({ item_id: 3 }),
+      ];
+      api.$items.set(items);
+    });
+
+    it('should select item by ID', () => {
+      api.select(2);
+      expect(api.$selectedItemId.get()).toBe(2);
+      expect(mockApp.onSelect).toHaveBeenCalledWith(2);
+    });
+
+    it('should select next item', () => {
+      api.$selectedItemId.set(1);
+      api.selectNext();
+      expect(api.$selectedItemId.get()).toBe(2);
+      expect(mockApp.onSelectNext).toHaveBeenCalled();
+    });
+
+    it('should wrap to first item when selecting next from last', () => {
+      api.$selectedItemId.set(3);
+      api.selectNext();
+      expect(api.$selectedItemId.get()).toBe(1);
+    });
+
+    it('should select previous item', () => {
+      api.$selectedItemId.set(2);
+      api.selectPrev();
+      expect(api.$selectedItemId.get()).toBe(1);
+      expect(mockApp.onSelectPrev).toHaveBeenCalled();
+    });
+
+    it('should wrap to last item when selecting previous from first', () => {
+      api.$selectedItemId.set(1);
+      api.selectPrev();
+      expect(api.$selectedItemId.get()).toBe(3);
+    });
+
+    it('should select first item', () => {
+      api.selectFirst();
+      expect(api.$selectedItemId.get()).toBe(1);
+      expect(mockApp.onSelectFirst).toHaveBeenCalled();
+    });
+
+    it('should select last item', () => {
+      api.selectLast();
+      expect(api.$selectedItemId.get()).toBe(3);
+      expect(mockApp.onSelectLast).toHaveBeenCalled();
+    });
+
+    it('should do nothing when no items exist', () => {
+      api.$items.set([]);
+      api.selectNext();
+      api.selectPrev();
+      api.selectFirst();
+      api.selectLast();
+
+      expect(api.$selectedItemId.get()).toBe(null);
+    });
+
+    it('should do nothing when no item is selected', () => {
+      api.$selectedItemId.set(null);
+      api.selectNext();
+      api.selectPrev();
+
+      expect(api.$selectedItemId.get()).toBe(null);
+    });
+  });
+
+  describe('Discard Methods', () => {
+    beforeEach(() => {
+      const items = [
+        createMockQueueItem({ item_id: 1 }),
+        createMockQueueItem({ item_id: 2 }),
+        createMockQueueItem({ item_id: 3 }),
+      ];
+      api.$items.set(items);
+    });
+
+    it('should discard selected item and select next', () => {
+      api.$selectedItemId.set(2);
+      const selectedItem = api.$selectedItem.get();
+
+      api.discardSelected();
+
+      expect(api.$selectedItemId.get()).toBe(3);
+      expect(mockApp.onDiscard).toHaveBeenCalledWith(selectedItem?.item);
+    });
+
+    it('should discard selected item and clamp to last valid index', () => {
+      api.$selectedItemId.set(3);
+      const selectedItem = api.$selectedItem.get();
+
+      api.discardSelected();
+
+      // The logic clamps to the next index, so when discarding last item (index 2),
+      // it tries to select index 3 which clamps to index 2 (item 3)
+      expect(api.$selectedItemId.get()).toBe(3);
+      expect(mockApp.onDiscard).toHaveBeenCalledWith(selectedItem?.item);
+    });
+
+    it('should set selectedItemId to null when discarding last item', () => {
+      api.$items.set([createMockQueueItem({ item_id: 1 })]);
+      api.$selectedItemId.set(1);
+
+      api.discardSelected();
+
+      // When there's only one item, after clamping we get the same item, so it stays selected
+      expect(api.$selectedItemId.get()).toBe(1);
+    });
+
+    it('should do nothing when no item is selected', () => {
+      api.$selectedItemId.set(null);
+      api.discardSelected();
+
+      expect(mockApp.onDiscard).not.toHaveBeenCalled();
+    });
+
+    it('should discard all items', () => {
+      api.$selectedItemId.set(2);
+      api.discardAll();
+
+      expect(api.$selectedItemId.get()).toBe(null);
+      expect(mockApp.onDiscardAll).toHaveBeenCalled();
+    });
+
+    it('should compute discardSelectedIsEnabled correctly', () => {
+      expect(api.$discardSelectedIsEnabled.get()).toBe(false);
+
+      api.$selectedItemId.set(1);
+      expect(api.$discardSelectedIsEnabled.get()).toBe(true);
+    });
+  });
+
+  describe('Accept Methods', () => {
+    beforeEach(() => {
+      const items = [createMockQueueItem({ item_id: 1 })];
+      api.$items.set(items);
+      api.$selectedItemId.set(1);
+    });
+
+    it('should accept selected item when image is available', () => {
+      const imageDTO = createMockImageDTO();
+      api.$progressData.setKey(1, {
+        itemId: 1,
+        progressEvent: null,
+        progressImage: null,
+        imageDTO,
+        imageLoaded: false,
+      });
+
+      const selectedItem = api.$selectedItem.get();
+      api.acceptSelected();
+
+      expect(mockApp.onAccept).toHaveBeenCalledWith(selectedItem?.item, imageDTO);
+    });
+
+    it('should do nothing when no image is available', () => {
+      api.$progressData.setKey(1, {
+        itemId: 1,
+        progressEvent: null,
+        progressImage: null,
+        imageDTO: null,
+        imageLoaded: false,
+      });
+
+      api.acceptSelected();
+
+      expect(mockApp.onAccept).not.toHaveBeenCalled();
+    });
+
+    it('should do nothing when no item is selected', () => {
+      api.$selectedItemId.set(null);
+      api.acceptSelected();
+
+      expect(mockApp.onAccept).not.toHaveBeenCalled();
+    });
+
+    it('should compute acceptSelectedIsEnabled correctly', () => {
+      expect(api.$acceptSelectedIsEnabled.get()).toBe(false);
+
+      const imageDTO = createMockImageDTO();
+      api.$progressData.setKey(1, {
+        itemId: 1,
+        progressEvent: null,
+        progressImage: null,
+        imageDTO,
+        imageLoaded: false,
+      });
+
+      expect(api.$acceptSelectedIsEnabled.get()).toBe(true);
+    });
+  });
+
+  describe('Progress Event Handling', () => {
+    it('should handle invocation progress events', () => {
+      const progressEvent = createMockProgressEvent({
+        item_id: 1,
+        destination: sessionId,
+      });
+
+      api.onInvocationProgressEvent(progressEvent);
+
+      const progressData = api.$progressData.get();
+      expect(progressData[1]?.progressEvent).toBe(progressEvent);
+    });
+
+    it('should ignore events for different sessions', () => {
+      const progressEvent = createMockProgressEvent({
+        item_id: 1,
+        destination: 'different-session',
+      });
+
+      api.onInvocationProgressEvent(progressEvent);
+
+      const progressData = api.$progressData.get();
+      expect(progressData[1]).toBeUndefined();
+    });
+
+    it('should update existing progress data', () => {
+      api.$progressData.setKey(1, {
+        itemId: 1,
+        progressEvent: null,
+        progressImage: null,
+        imageDTO: createMockImageDTO(),
+        imageLoaded: false,
+      });
+
+      const progressEvent = createMockProgressEvent({
+        item_id: 1,
+        destination: sessionId,
+      });
+
+      api.onInvocationProgressEvent(progressEvent);
+
+      const progressData = api.$progressData.get();
+      expect(progressData[1]?.progressEvent).toBe(progressEvent);
+      expect(progressData[1]?.imageDTO).toBeTruthy();
+    });
+  });
+
+  describe('Queue Item Status Change Handling', () => {
+    it('should handle completed status and set last completed item', () => {
+      const statusEvent = createMockQueueItemStatusChangedEvent({
+        item_id: 1,
+        destination: sessionId,
+        status: 'completed',
+      });
+
+      api.onQueueItemStatusChangedEvent(statusEvent);
+
+      expect(api.$lastCompletedItemId.get()).toBe(1);
+    });
+
+    it('should handle in_progress status with switch_on_start', () => {
+      mockApp._setAutoSwitchMode('switch_on_start');
+
+      const statusEvent = createMockQueueItemStatusChangedEvent({
+        item_id: 1,
+        destination: sessionId,
+        status: 'in_progress',
+      });
+
+      api.onQueueItemStatusChangedEvent(statusEvent);
+
+      expect(api.$lastStartedItemId.get()).toBe(1);
+    });
+
+    it('should ignore events for different sessions', () => {
+      const statusEvent = createMockQueueItemStatusChangedEvent({
+        item_id: 1,
+        destination: 'different-session',
+        status: 'completed',
+      });
+
+      api.onQueueItemStatusChangedEvent(statusEvent);
+
+      expect(api.$lastCompletedItemId.get()).toBe(null);
+    });
+  });
+
+  describe('Items Changed Event Handling', () => {
+    it('should update items and auto-select first item', async () => {
+      const items = [createMockQueueItem({ item_id: 1 }), createMockQueueItem({ item_id: 2 })];
+
+      await api.onItemsChangedEvent(items);
+
+      expect(api.$items.get()).toBe(items);
+      expect(api.$selectedItemId.get()).toBe(1);
+    });
+
+    it('should clear selection when no items', async () => {
+      api.$selectedItemId.set(1);
+
+      await api.onItemsChangedEvent([]);
+
+      expect(api.$selectedItemId.get()).toBe(null);
+    });
+
+    it('should not change selection if item already selected', async () => {
+      api.$selectedItemId.set(2);
+
+      const items = [createMockQueueItem({ item_id: 1 }), createMockQueueItem({ item_id: 2 })];
+
+      await api.onItemsChangedEvent(items);
+
+      expect(api.$selectedItemId.get()).toBe(2);
+    });
+
+    it('should load images for completed items', async () => {
+      const imageDTO = createMockImageDTO({ image_name: 'test-image.png' });
+      mockApp._setImageDTO('test-image.png', imageDTO);
+
+      const items = [
+        createMockQueueItem({
+          item_id: 1,
+          status: 'completed',
+        }),
+      ];
+
+      await api.onItemsChangedEvent(items);
+
+      const progressData = api.$progressData.get();
+      expect(progressData[1]?.imageDTO).toBe(imageDTO);
+    });
+
+    it('should handle auto-switch on completion', async () => {
+      mockApp._setAutoSwitchMode('switch_on_finish');
+      api.$lastCompletedItemId.set(1);
+
+      const imageDTO = createMockImageDTO({ image_name: 'test-image.png' });
+      mockApp._setImageDTO('test-image.png', imageDTO);
+
+      const items = [
+        createMockQueueItem({
+          item_id: 1,
+          status: 'completed',
+        }),
+      ];
+
+      await api.onItemsChangedEvent(items);
+
+      // Wait for async image loading - the loadImage promise needs to complete
+      await new Promise((resolve) => {
+        setTimeout(resolve, 50);
+        api.onImageLoaded(1);
+      });
+
+      expect(api.$selectedItemId.get()).toBe(1);
+      // The lastCompletedItemId should be reset after the loadImage promise resolves
+      expect(api.$lastCompletedItemId.get()).toBe(null);
+    });
+
+    it('should clean up progress data for removed items', async () => {
+      api.$progressData.setKey(999, {
+        itemId: 999,
+        progressEvent: null,
+        progressImage: null,
+        imageDTO: null,
+        imageLoaded: false,
+      });
+
+      const items = [createMockQueueItem({ item_id: 1 })];
+
+      await api.onItemsChangedEvent(items);
+
+      const progressData = api.$progressData.get();
+      expect(progressData[999]).toBeUndefined();
+    });
+
+    it('should clear progress data for canceled/failed items', async () => {
+      api.$progressData.setKey(1, {
+        itemId: 1,
+        progressEvent: createMockProgressEvent({ item_id: 1 }),
+        progressImage: null,
+        imageDTO: createMockImageDTO(),
+        imageLoaded: false,
+      });
+
+      const items = [createMockQueueItem({ item_id: 1, status: 'canceled' })];
+
+      await api.onItemsChangedEvent(items);
+
+      const progressData = api.$progressData.get();
+      expect(progressData[1]?.progressEvent).toBe(null);
+      expect(progressData[1]?.progressImage).toBe(null);
+      expect(progressData[1]?.imageDTO).toBe(null);
+    });
+  });
+
+  describe('Image Loading', () => {
+    it('should handle image loading for completed items', () => {
+      api.$items.set([createMockQueueItem({ item_id: 1 })]);
+      const imageDTO = createMockImageDTO({ image_name: 'test-image.png' });
+      mockApp._setImageDTO('test-image.png', imageDTO);
+      api.onImageLoaded(1);
+      const progressData = api.$progressData.get();
+      expect(progressData[1]?.imageLoaded).toBe(true);
+    });
+  });
+
+  describe('Auto Switch', () => {
+    it('should set auto switch mode', () => {
+      api.setAutoSwitch('switch_on_finish');
+      expect(mockApp.onAutoSwitchChange).toHaveBeenCalledWith('switch_on_finish');
+    });
+
+    it('should auto-switch on finish when the image loads', async () => {
+      mockApp._setAutoSwitchMode('switch_on_finish');
+      api.$lastCompletedItemId.set(1);
+
+      const imageDTO = createMockImageDTO({ image_name: 'test-image.png' });
+      mockApp._setImageDTO('test-image.png', imageDTO);
+
+      const items = [
+        createMockQueueItem({
+          item_id: 1,
+          status: 'completed',
+        }),
+      ];
+
+      await api.onItemsChangedEvent(items);
+      await new Promise((resolve) => {
+        setTimeout(resolve, 50);
+        api.onImageLoaded(1);
+      });
+      expect(api.$selectedItemId.get()).toBe(1);
+      expect(api.$lastCompletedItemId.get()).toBe(null);
+    });
+  });
+
+  describe('Utility Methods', () => {
+    it('should build isSelected computed correctly', () => {
+      const isSelected = api.buildIsSelectedComputed(1);
+      expect(isSelected.get()).toBe(false);
+
+      api.$selectedItemId.set(1);
+      expect(isSelected.get()).toBe(true);
+    });
+  });
+
+  describe('Cleanup', () => {
+    it('should reset all state on cleanup', () => {
+      api.$selectedItemId.set(1);
+      api.$items.set([createMockQueueItem({ item_id: 1 })]);
+      api.$lastStartedItemId.set(1);
+      api.$lastCompletedItemId.set(1);
+      api.$progressData.setKey(1, {
+        itemId: 1,
+        progressEvent: null,
+        progressImage: null,
+        imageDTO: null,
+        imageLoaded: false,
+      });
+
+      api.cleanup();
+
+      expect(api.$selectedItemId.get()).toBe(null);
+      expect(api.$items.get()).toEqual([]);
+      expect(api.$lastStartedItemId.get()).toBe(null);
+      expect(api.$lastCompletedItemId.get()).toBe(null);
+      expect(api.$progressData.get()).toEqual({});
+    });
+  });
+
+  describe('Edge Cases and Error Handling', () => {
+    describe('Selection with Empty or Single Item Lists', () => {
+      it('should handle selection operations with single item', () => {
+        const items = [createMockQueueItem({ item_id: 1 })];
+        api.$items.set(items);
+        api.$selectedItemId.set(1);
+
+        // Navigation should wrap around to the same item
+        api.selectNext();
+        expect(api.$selectedItemId.get()).toBe(1);
+
+        api.selectPrev();
+        expect(api.$selectedItemId.get()).toBe(1);
+      });
+
+      it('should handle selection operations with empty list', () => {
+        api.$items.set([]);
+
+        api.selectFirst();
+        api.selectLast();
+        api.selectNext();
+        api.selectPrev();
+
+        expect(api.$selectedItemId.get()).toBe(null);
+      });
+    });
+
+    describe('Progress Data Edge Cases', () => {
+      it('should handle progress updates with image data', () => {
+        const progressEvent = createMockProgressEvent({
+          item_id: 1,
+          destination: sessionId,
+          image: { width: 512, height: 512, dataURL: 'foo' },
+        });
+
+        api.onInvocationProgressEvent(progressEvent);
+
+        const progressData = api.$progressData.get();
+        expect(progressData[1]?.progressImage).toBe(progressEvent.image);
+        expect(progressData[1]?.progressEvent).toBe(progressEvent);
+      });
+
+      it('should preserve imageDTO when updating progress', () => {
+        const imageDTO = createMockImageDTO();
+        api.$progressData.setKey(1, {
+          itemId: 1,
+          progressEvent: null,
+          progressImage: null,
+          imageDTO,
+          imageLoaded: false,
+        });
+
+        const progressEvent = createMockProgressEvent({
+          item_id: 1,
+          destination: sessionId,
+        });
+
+        api.onInvocationProgressEvent(progressEvent);
+
+        const progressData = api.$progressData.get();
+        expect(progressData[1]?.imageDTO).toBe(imageDTO);
+        expect(progressData[1]?.progressEvent).toBe(progressEvent);
+      });
+    });
+
+    describe('Auto-Switch Edge Cases', () => {
+      it('should handle auto-switch when item is not in current items list', async () => {
+        mockApp._setAutoSwitchMode('switch_on_start');
+        api.$lastStartedItemId.set(999); // Non-existent item
+
+        const items = [createMockQueueItem({ item_id: 1 })];
+        await api.onItemsChangedEvent(items);
+
+        // Should not switch to non-existent item
+        expect(api.$selectedItemId.get()).toBe(1);
+        expect(api.$lastStartedItemId.get()).toBe(999);
+      });
+
+      it('should handle auto-switch on finish when image loading fails', async () => {
+        mockApp._setAutoSwitchMode('switch_on_finish');
+        api.$lastCompletedItemId.set(1);
+
+        const items = [
+          createMockQueueItem({
+            item_id: 1,
+            status: 'completed',
+            session: {
+              id: sessionId,
+              source_prepared_mapping: { canvas_output: ['test-node-id'] },
+              results: {
+                'test-node-id': {
+                  type: 'image_output',
+                  image: { image_name: 'test-image.png' },
+                  width: 512,
+                  height: 512,
+                },
+              },
+            },
+          }),
+        ];
+
+        await api.onItemsChangedEvent(items);
+
+        // Wait a while but do not load the image
+        await new Promise((resolve) => {
+          setTimeout(resolve, 150);
+        });
+
+        // Should not switch when image loading fails
+        expect(api.$selectedItemId.get()).toBe(1);
+        expect(api.$lastCompletedItemId.get()).toBe(1);
+      });
+    });
+
+    describe('Concurrent Operations', () => {
+      it('should handle rapid item changes', async () => {
+        const items1 = [createMockQueueItem({ item_id: 1 })];
+        const items2 = [createMockQueueItem({ item_id: 2 })];
+
+        // Fire multiple events rapidly
+        const promise1 = api.onItemsChangedEvent(items1);
+        const promise2 = api.onItemsChangedEvent(items2);
+
+        await Promise.all([promise1, promise2]);
+
+        // Should end up with the last set of items
+        expect(api.$items.get()).toBe(items2);
+        // The selectedItemId retains the old value (1) but $selectedItem will be null
+        // because item 1 is no longer in the items list
+        expect(api.$selectedItemId.get()).toBe(1);
+        expect(api.$selectedItem.get()).toBe(null);
+      });
+
+      it('should handle multiple progress events for same item', () => {
+        const event1 = createMockProgressEvent({
+          item_id: 1,
+          destination: sessionId,
+          percentage: 0.3,
+        });
+        const event2 = createMockProgressEvent({
+          item_id: 1,
+          destination: sessionId,
+          percentage: 0.7,
+        });
+
+        api.onInvocationProgressEvent(event1);
+        api.onInvocationProgressEvent(event2);
+
+        const progressData = api.$progressData.get();
+        expect(progressData[1]?.progressEvent).toBe(event2);
+      });
+    });
+
+    describe('Memory Management', () => {
+      it('should clean up progress data for large number of items', async () => {
+        // Create progress data for many items
+        for (let i = 1; i <= 1000; i++) {
+          api.$progressData.setKey(i, {
+            itemId: i,
+            progressEvent: null,
+            progressImage: null,
+            imageDTO: null,
+            imageLoaded: false,
+          });
+        }
+
+        // Only keep a few items
+        const items = [createMockQueueItem({ item_id: 1 }), createMockQueueItem({ item_id: 2 })];
+
+        await api.onItemsChangedEvent(items);
+
+        const progressData = api.$progressData.get();
+        const progressDataKeys = Object.keys(progressData);
+
+        // Should only have progress data for current items
+        expect(progressDataKeys.length).toBeLessThanOrEqual(2);
+        expect(progressData[1]).toBeDefined();
+        expect(progressData[2]).toBeDefined();
+      });
+    });
+
+    describe('Event Subscription Management', () => {
+      it('should handle multiple subscriptions and unsubscriptions', () => {
+        const api2 = new StagingAreaApi();
+        api2.connectToApp(sessionId, mockApp);
+        const api3 = new StagingAreaApi();
+        api3.connectToApp(sessionId, mockApp);
+
+        // All should be subscribed
+        expect(mockApp.onItemsChanged).toHaveBeenCalledTimes(3);
+
+        api2.cleanup();
+        api3.cleanup();
+
+        // Should not affect original api
+        expect(api.$items.get()).toBeDefined();
+      });
+
+      it('should handle events after cleanup', () => {
+        api.cleanup();
+
+        // These should not crash
+        const progressEvent = createMockProgressEvent({
+          item_id: 1,
+          destination: sessionId,
+        });
+
+        api.onInvocationProgressEvent(progressEvent);
+
+        // State should remain clean - but the event handler still works
+        // so it will add progress data even after cleanup
+        const progressData = api.$progressData.get();
+        expect(progressData[1]).toBeDefined();
+      });
+    });
+  });
+});

invokeai/frontend/web/src/features/controlLayers/components/StagingArea/state.ts

@@ -0,0 +1,416 @@
+import { clamp } from 'es-toolkit';
+import type { AutoSwitchMode } from 'features/controlLayers/store/canvasSettingsSlice';
+import type { ProgressImage } from 'features/nodes/types/common';
+import type { MapStore } from 'nanostores';
+import { atom, computed, map } from 'nanostores';
+import type { ImageDTO, S } from 'services/api/types';
+import { objectEntries } from 'tsafe';
+
+import { getOutputImageName } from './shared';
+
+/**
+ * Interface for the app-level API that the StagingAreaApi depends on.
+ * This provides the connection between the staging area and the rest of the application.
+ */
+export type StagingAreaAppApi = {
+  onDiscard?: (item: S['SessionQueueItem']) => void;
+  onDiscardAll?: () => void;
+  onAccept?: (item: S['SessionQueueItem'], imageDTO: ImageDTO) => void;
+  onSelect?: (itemId: number) => void;
+  onSelectPrev?: () => void;
+  onSelectNext?: () => void;
+  onSelectFirst?: () => void;
+  onSelectLast?: () => void;
+  getAutoSwitch: () => AutoSwitchMode;
+  onAutoSwitchChange?: (mode: AutoSwitchMode) => void;
+  getImageDTO: (imageName: string) => Promise<ImageDTO | null>;
+  onItemsChanged: (handler: (data: S['SessionQueueItem'][]) => Promise<void> | void) => () => void;
+  onQueueItemStatusChanged: (handler: (data: S['QueueItemStatusChangedEvent']) => Promise<void> | void) => () => void;
+  onInvocationProgress: (handler: (data: S['InvocationProgressEvent']) => Promise<void> | void) => () => void;
+};
+
+/** Progress data for a single queue item */
+export type ProgressData = {
+  itemId: number;
+  progressEvent: S['InvocationProgressEvent'] | null;
+  progressImage: ProgressImage | null;
+  imageDTO: ImageDTO | null;
+  imageLoaded: boolean;
+};
+
+/** Combined data for the currently selected item */
+export type SelectedItemData = {
+  item: S['SessionQueueItem'];
+  index: number;
+  progressData: ProgressData;
+};
+
+/** Creates initial progress data for a queue item */
+export const getInitialProgressData = (itemId: number): ProgressData => ({
+  itemId,
+  progressEvent: null,
+  progressImage: null,
+  imageDTO: null,
+  imageLoaded: false,
+});
+type ProgressDataMap = Record<number, ProgressData | undefined>;
+
+/**
+ * API for managing the Canvas Staging Area - a view of the image generation queue.
+ * Provides reactive state management for pending, in-progress, and completed images.
+ * Users can accept images to place on canvas, discard them, navigate between items,
+ * and configure auto-switching behavior.
+ */
+export class StagingAreaApi {
+  /** The current session ID. */
+  _sessionId: string | null = null;
+
+  /** The app API */
+  _app: StagingAreaAppApi | null = null;
+
+  /** A set of subscriptions to be cleaned up when we are finished with a session */
+  _subscriptions = new Set<() => void>();
+
+  /** Item ID of the last started item. Used for auto-switch on start. */
+  $lastStartedItemId = atom<number | null>(null);
+
+  /** Item ID of the last completed item. Used for auto-switch on completion. */
+  $lastCompletedItemId = atom<number | null>(null);
+
+  /** All queue items for the current session. */
+  $items = atom<S['SessionQueueItem'][]>([]);
+
+  /** Progress data for all items including events, images, and ImageDTOs. */
+  $progressData = map<ProgressDataMap>({});
+
+  /** ID of the currently selected queue item, or null if none selected. */
+  $selectedItemId = atom<number | null>(null);
+
+  /** Total number of items in the queue. */
+  $itemCount = computed([this.$items], (items) => items.length);
+
+  /** Whether there are any items in the queue. */
+  $hasItems = computed([this.$items], (items) => items.length > 0);
+
+  /** Whether there are any pending or in-progress items. */
+  $isPending = computed([this.$items], (items) =>
+    items.some((item) => item.status === 'pending' || item.status === 'in_progress')
+  );
+
+  /** The currently selected queue item with its index and progress data, or null if none selected. */
+  $selectedItem = computed(
+    [this.$items, this.$selectedItemId, this.$progressData],
+    (items, selectedItemId, progressData) => {
+      if (items.length === 0) {
+        return null;
+      }
+      if (selectedItemId === null) {
+        return null;
+      }
+      const item = items.find(({ item_id }) => item_id === selectedItemId);
+      if (!item) {
+        return null;
+      }
+
+      return {
+        item,
+        index: items.findIndex(({ item_id }) => item_id === selectedItemId),
+        progressData: progressData[selectedItemId] || getInitialProgressData(selectedItemId),
+      };
+    }
+  );
+
+  /** The ImageDTO of the currently selected item, or null if none available. */
+  $selectedItemImageDTO = computed([this.$selectedItem], (selectedItem) => {
+    return selectedItem?.progressData.imageDTO ?? null;
+  });
+
+  /** The index of the currently selected item, or null if none selected. */
+  $selectedItemIndex = computed([this.$selectedItem], (selectedItem) => {
+    return selectedItem?.index ?? null;
+  });
+
+  /** Selects a queue item by ID. */
+  select = (itemId: number) => {
+    this.$selectedItemId.set(itemId);
+    this._app?.onSelect?.(itemId);
+  };
+
+  /** Selects the next item in the queue, wrapping to the first item if at the end. */
+  selectNext = () => {
+    const selectedItem = this.$selectedItem.get();
+    if (selectedItem === null) {
+      return;
+    }
+    const items = this.$items.get();
+    const nextIndex = (selectedItem.index + 1) % items.length;
+    const nextItem = items[nextIndex];
+    if (!nextItem) {
+      return;
+    }
+    this.$selectedItemId.set(nextItem.item_id);
+    this._app?.onSelectNext?.();
+  };
+
+  /** Selects the previous item in the queue, wrapping to the last item if at the beginning. */
+  selectPrev = () => {
+    const selectedItem = this.$selectedItem.get();
+    if (selectedItem === null) {
+      return;
+    }
+    const items = this.$items.get();
+    const prevIndex = (selectedItem.index - 1 + items.length) % items.length;
+    const prevItem = items[prevIndex];
+    if (!prevItem) {
+      return;
+    }
+    this.$selectedItemId.set(prevItem.item_id);
+    this._app?.onSelectPrev?.();
+  };
+
+  /** Selects the first item in the queue. */
+  selectFirst = () => {
+    const items = this.$items.get();
+    const first = items.at(0);
+    if (!first) {
+      return;
+    }
+    this.$selectedItemId.set(first.item_id);
+    this._app?.onSelectFirst?.();
+  };
+
+  /** Selects the last item in the queue. */
+  selectLast = () => {
+    const items = this.$items.get();
+    const last = items.at(-1);
+    if (!last) {
+      return;
+    }
+    this.$selectedItemId.set(last.item_id);
+    this._app?.onSelectLast?.();
+  };
+
+  /** Discards the currently selected item and selects the next available item. */
+  discardSelected = () => {
+    const selectedItem = this.$selectedItem.get();
+    if (selectedItem === null) {
+      return;
+    }
+    const items = this.$items.get();
+    const nextIndex = clamp(selectedItem.index + 1, 0, items.length - 1);
+    const nextItem = items[nextIndex];
+    if (nextItem) {
+      this.$selectedItemId.set(nextItem.item_id);
+    } else {
+      this.$selectedItemId.set(null);
+    }
+    this._app?.onDiscard?.(selectedItem.item);
+  };
+
+  /** Whether the discard selected action is enabled. */
+  $discardSelectedIsEnabled = computed([this.$selectedItem], (selectedItem) => {
+    if (selectedItem === null) {
+      return false;
+    }
+    return true;
+  });
+
+  /** Connects to the app, registering listeners and such */
+  connectToApp = (sessionId: string, app: StagingAreaAppApi) => {
+    if (this._sessionId !== sessionId) {
+      this.cleanup();
+      this._sessionId = sessionId;
+    }
+    this._app = app;
+
+    this._subscriptions.add(this._app.onItemsChanged(this.onItemsChangedEvent));
+    this._subscriptions.add(this._app.onQueueItemStatusChanged(this.onQueueItemStatusChangedEvent));
+    this._subscriptions.add(this._app.onInvocationProgress(this.onInvocationProgressEvent));
+  };
+
+  /** Discards all items in the queue. */
+  discardAll = () => {
+    this.$selectedItemId.set(null);
+    this._app?.onDiscardAll?.();
+  };
+
+  /** Accepts the currently selected item if an image is available. */
+  acceptSelected = () => {
+    const selectedItem = this.$selectedItem.get();
+    if (selectedItem === null) {
+      return;
+    }
+    const progressData = this.$progressData.get();
+    const datum = progressData[selectedItem.item.item_id];
+    if (!datum || !datum.imageDTO) {
+      return;
+    }
+    this._app?.onAccept?.(selectedItem.item, datum.imageDTO);
+  };
+
+  /** Whether the accept selected action is enabled. */
+  $acceptSelectedIsEnabled = computed([this.$selectedItem, this.$progressData], (selectedItem, progressData) => {
+    if (selectedItem === null) {
+      return false;
+    }
+    const datum = progressData[selectedItem.item.item_id];
+    return !!datum && !!datum.imageDTO;
+  });
+
+  /** Sets the auto-switch mode. */
+  setAutoSwitch = (mode: AutoSwitchMode) => {
+    this._app?.onAutoSwitchChange?.(mode);
+  };
+
+  /** Handles invocation progress events from the WebSocket. */
+  onInvocationProgressEvent = (data: S['InvocationProgressEvent']) => {
+    if (data.destination !== this._sessionId) {
+      return;
+    }
+    setProgress(this.$progressData, data);
+  };
+
+  /** Handles queue item status change events from the WebSocket. */
+  onQueueItemStatusChangedEvent = (data: S['QueueItemStatusChangedEvent']) => {
+    if (data.destination !== this._sessionId) {
+      return;
+    }
+    if (data.status === 'completed') {
+      /**
+       * There is an unpleasant bit of indirection here. When an item is completed, and auto-switch is set to
+       * switch_on_finish, we want to load the image and switch to it. In this socket handler, we don't have
+       * access to the full queue item, which we need to get the output image and load it. We get the full
+       * queue items as part of the list query, so it's rather inefficient to fetch it again here.
+       *
+       * To reduce the number of extra network requests, we instead store this item as the last completed item.
+       * Then when the image loads, it calls onImageLoaded and we switch to it then.
+       */
+      this.$lastCompletedItemId.set(data.item_id);
+    }
+    if (data.status === 'in_progress' && this._app?.getAutoSwitch() === 'switch_on_start') {
+      this.$lastStartedItemId.set(data.item_id);
+    }
+  };
+
+  /**
+   * Handles queue items changed events. Updates items, manages progress data,
+   * handles auto-selection, and implements auto-switch behavior.
+   */
+  onItemsChangedEvent = async (items: S['SessionQueueItem'][]) => {
+    const oldItems = this.$items.get();
+
+    if (items === oldItems) {
+      return;
+    }
+
+    if (items.length === 0) {
+      // If there are no items, cannot have a selected item.
+      this.$selectedItemId.set(null);
+    } else if (this.$selectedItemId.get() === null && items.length > 0) {
+      // If there is no selected item but there are items, select the first one.
+      this.$selectedItemId.set(items[0]?.item_id ?? null);
+    }
+
+    const progressData = this.$progressData.get();
+
+    for (const [id, datum] of objectEntries(progressData)) {
+      if (!datum || !items.find(({ item_id }) => item_id === datum.itemId)) {
+        this.$progressData.setKey(id, undefined);
+        continue;
+      }
+    }
+
+    for (const item of items) {
+      const datum = progressData[item.item_id];
+
+      if (item.status === 'canceled' || item.status === 'failed') {
+        this.$progressData.setKey(item.item_id, {
+          ...(datum ?? getInitialProgressData(item.item_id)),
+          progressEvent: null,
+          progressImage: null,
+          imageDTO: null,
+        });
+        continue;
+      }
+
+      if (item.status === 'in_progress') {
+        if (this.$lastStartedItemId.get() === item.item_id && this._app?.getAutoSwitch() === 'switch_on_start') {
+          this.$selectedItemId.set(item.item_id);
+          this.$lastStartedItemId.set(null);
+        }
+        continue;
+      }
+
+      if (item.status === 'completed') {
+        if (datum?.imageDTO) {
+          continue;
+        }
+        const outputImageName = getOutputImageName(item);
+        if (!outputImageName) {
+          continue;
+        }
+        const imageDTO = await this._app?.getImageDTO(outputImageName);
+        if (!imageDTO) {
+          continue;
+        }
+
+        this.$progressData.setKey(item.item_id, {
+          ...(datum ?? getInitialProgressData(item.item_id)),
+          imageDTO,
+        });
+      }
+    }
+
+    this.$items.set(items);
+  };
+
+  onImageLoaded = (itemId: number) => {
+    const item = this.$items.get().find(({ item_id }) => item_id === itemId);
+    if (!item) {
+      return;
+    }
+    // This is the load logic mentioned in the comment in the QueueItemStatusChangedEvent handler above.
+    if (this.$lastCompletedItemId.get() === item.item_id && this._app?.getAutoSwitch() === 'switch_on_finish') {
+      this.$selectedItemId.set(item.item_id);
+      this.$lastCompletedItemId.set(null);
+    }
+    const datum = this.$progressData.get()[item.item_id];
+    this.$progressData.setKey(item.item_id, {
+      ...(datum ?? getInitialProgressData(item.item_id)),
+      imageLoaded: true,
+    });
+  };
+
+  /** Creates a computed value that returns true if the given item ID is selected. */
+  buildIsSelectedComputed = (itemId: number) => {
+    return computed([this.$selectedItemId], (selectedItemId) => {
+      return selectedItemId === itemId;
+    });
+  };
+
+  /** Cleans up all state and unsubscribes from all events. */
+  cleanup = () => {
+    this.$lastStartedItemId.set(null);
+    this.$lastCompletedItemId.set(null);
+    this.$items.set([]);
+    this.$progressData.set({});
+    this.$selectedItemId.set(null);
+    this._subscriptions.forEach((unsubscribe) => unsubscribe());
+    this._subscriptions.clear();
+  };
+}
+
+/** Updates progress data for a queue item with the latest progress event. */
+const setProgress = ($progressData: MapStore<ProgressDataMap>, data: S['InvocationProgressEvent']) => {
+  const progressData = $progressData.get();
+  const current = progressData[data.item_id];
+  const next = { ...(current ?? getInitialProgressData(data.item_id)) };
+  next.progressEvent = data;
+  if (data.image) {
+    next.progressImage = data.image;
+  }
+  $progressData.set({
+    ...progressData,
+    [data.item_id]: next,
+  });
+};

invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolChooser.tsx

@@ -4,6 +4,7 @@ import { ToolBrushButton } from 'features/controlLayers/components/Tool/ToolBrus
 import { ToolColorPickerButton } from 'features/controlLayers/components/Tool/ToolColorPickerButton';
 import { ToolMoveButton } from 'features/controlLayers/components/Tool/ToolMoveButton';
 import { ToolRectButton } from 'features/controlLayers/components/Tool/ToolRectButton';
+import React from 'react';
 
 import { ToolEraserButton } from './ToolEraserButton';
 import { ToolViewButton } from './ToolViewButton';

invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbar.tsx

@@ -3,6 +3,7 @@ import { CanvasSettingsPopover } from 'features/controlLayers/components/Setting
 import { ToolColorPicker } from 'features/controlLayers/components/Tool/ToolFillColorPicker';
 import { ToolSettings } from 'features/controlLayers/components/Tool/ToolSettings';
 import { CanvasToolbarFitBboxToLayersButton } from 'features/controlLayers/components/Toolbar/CanvasToolbarFitBboxToLayersButton';
+import { CanvasToolbarFitBboxToMasksButton } from 'features/controlLayers/components/Toolbar/CanvasToolbarFitBboxToMasksButton';
 import { CanvasToolbarNewSessionMenuButton } from 'features/controlLayers/components/Toolbar/CanvasToolbarNewSessionMenuButton';
 import { CanvasToolbarRedoButton } from 'features/controlLayers/components/Toolbar/CanvasToolbarRedoButton';
 import { CanvasToolbarResetViewButton } from 'features/controlLayers/components/Toolbar/CanvasToolbarResetViewButton';
@@ -12,6 +13,7 @@ import { CanvasToolbarUndoButton } from 'features/controlLayers/components/Toolb
 import { useCanvasDeleteLayerHotkey } from 'features/controlLayers/hooks/useCanvasDeleteLayerHotkey';
 import { useCanvasEntityQuickSwitchHotkey } from 'features/controlLayers/hooks/useCanvasEntityQuickSwitchHotkey';
 import { useCanvasFilterHotkey } from 'features/controlLayers/hooks/useCanvasFilterHotkey';
+import { useCanvasInvertMaskHotkey } from 'features/controlLayers/hooks/useCanvasInvertMaskHotkey';
 import { useCanvasResetLayerHotkey } from 'features/controlLayers/hooks/useCanvasResetLayerHotkey';
 import { useCanvasToggleNonRasterLayersHotkey } from 'features/controlLayers/hooks/useCanvasToggleNonRasterLayersHotkey';
 import { useCanvasTransformHotkey } from 'features/controlLayers/hooks/useCanvasTransformHotkey';
@@ -27,6 +29,7 @@ export const CanvasToolbar = memo(() => {
   useNextPrevEntityHotkeys();
   useCanvasTransformHotkey();
   useCanvasFilterHotkey();
+  useCanvasInvertMaskHotkey();
   useCanvasToggleNonRasterLayersHotkey();
 
   return (
@@ -37,6 +40,7 @@ export const CanvasToolbar = memo(() => {
         <CanvasToolbarScale />
         <CanvasToolbarResetViewButton />
         <CanvasToolbarFitBboxToLayersButton />
+        <CanvasToolbarFitBboxToMasksButton />
       </Flex>
       <Divider orientation="vertical" />
       <Flex alignItems="center" h="full">

invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbarFitBboxToMasksButton.tsx

@@ -0,0 +1,45 @@
+import { IconButton } from '@invoke-ai/ui-library';
+import { useAutoFitBBoxToMasks } from 'features/controlLayers/hooks/useAutoFitBBoxToMasks';
+import { useCanvasIsBusy } from 'features/controlLayers/hooks/useCanvasIsBusy';
+import { useVisibleEntityCountByType } from 'features/controlLayers/hooks/useVisibleEntityCountByType';
+import { useRegisteredHotkeys } from 'features/system/components/HotkeysModal/useHotkeyData';
+import { memo, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { PiSelectionAllDuotone } from 'react-icons/pi';
+
+export const CanvasToolbarFitBboxToMasksButton = memo(() => {
+  const { t } = useTranslation();
+  const isBusy = useCanvasIsBusy();
+  const fitBBoxToMasks = useAutoFitBBoxToMasks();
+
+  // Check if there are any visible inpaint masks
+  const visibleMaskCount = useVisibleEntityCountByType('inpaint_mask');
+  const hasVisibleMasks = visibleMaskCount > 0;
+
+  const onClick = useCallback(() => {
+    fitBBoxToMasks();
+  }, [fitBBoxToMasks]);
+
+  // Register hotkey for Shift+B
+  useRegisteredHotkeys({
+    id: 'fitBboxToMasks',
+    category: 'canvas',
+    callback: fitBBoxToMasks,
+    options: { enabled: !isBusy && hasVisibleMasks },
+    dependencies: [fitBBoxToMasks, isBusy, hasVisibleMasks],
+  });
+
+  return (
+    <IconButton
+      onClick={onClick}
+      variant="link"
+      alignSelf="stretch"
+      aria-label={t('controlLayers.fitBboxToMasks')}
+      tooltip={t('controlLayers.fitBboxToMasks')}
+      icon={<PiSelectionAllDuotone />}
+      isDisabled={isBusy || !hasVisibleMasks}
+    />
+  );
+});
+
+CanvasToolbarFitBboxToMasksButton.displayName = 'CanvasToolbarFitBboxToMasksButton';

invokeai/frontend/web/src/features/controlLayers/components/Transform/TransformFitToBboxButtons.tsx

@@ -6,7 +6,7 @@ import { memo, useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import type { Equals } from 'tsafe';
 import { assert } from 'tsafe';
-import { z } from 'zod/v4';
+import { z } from 'zod';
 
 const zMode = z.enum(['fill', 'contain', 'cover']);
 type Mode = z.infer<typeof zMode>;

invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityPreviewImage.tsx

@@ -7,7 +7,7 @@ import { useEntityAdapter } from 'features/controlLayers/contexts/EntityAdapterC
 import { useEntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext';
 import { TRANSPARENCY_CHECKERBOARD_PATTERN_DARK_DATAURL } from 'features/controlLayers/konva/patterns/transparency-checkerboard-pattern';
 import { selectCanvasSlice, selectEntity } from 'features/controlLayers/store/selectors';
-import { memo, useEffect, useMemo, useRef } from 'react';
+import React, { memo, useEffect, useMemo, useRef } from 'react';
 import { useSelector } from 'react-redux';
 
 const ChakraCanvas = chakra.canvas;

invokeai/frontend/web/src/features/controlLayers/hooks/useAutoFitBBoxToMasks.ts

@@ -0,0 +1,40 @@
+import { useAppSelector } from 'app/store/storeHooks';
+import { useCanvasManager } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
+import { fitRectToGrid } from 'features/controlLayers/konva/util';
+import { selectMaskBlur } from 'features/controlLayers/store/paramsSlice';
+import { useCallback } from 'react';
+
+export const useAutoFitBBoxToMasks = () => {
+  const canvasManager = useCanvasManager();
+  const maskBlur = useAppSelector(selectMaskBlur);
+
+  const fitBBoxToMasks = useCallback(() => {
+    // Get the rect of all visible inpaint masks
+    const visibleRect = canvasManager.compositor.getVisibleRectOfType('inpaint_mask');
+
+    // Can't fit the bbox to nothing
+    if (visibleRect.height === 0 || visibleRect.width === 0) {
+      return;
+    }
+
+    // Account for mask blur expansion and add 8px padding
+    const padding = 8;
+    const totalPadding = maskBlur + padding;
+
+    const expandedRect = {
+      x: visibleRect.x - totalPadding,
+      y: visibleRect.y - totalPadding,
+      width: visibleRect.width + totalPadding * 2,
+      height: visibleRect.height + totalPadding * 2,
+    };
+
+    // Apply grid fitting using the bbox grid size
+    const gridSize = canvasManager.stateApi.getBboxGridSize();
+    const rect = fitRectToGrid(expandedRect, gridSize);
+
+    // Update the generation bbox
+    canvasManager.stateApi.setGenerationBbox(rect);
+  }, [canvasManager, maskBlur]);
+
+  return fitBBoxToMasks;
+};

invokeai/frontend/web/src/features/controlLayers/hooks/useCanvasDeleteLayerHotkey.ts

@@ -1,10 +1,10 @@
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { getFocusedRegion } from 'common/hooks/focus';
 import { useAssertSingleton } from 'common/hooks/useAssertSingleton';
 import { useCanvasIsBusy } from 'features/controlLayers/hooks/useCanvasIsBusy';
 import { entityDeleted } from 'features/controlLayers/store/canvasSlice';
 import { selectSelectedEntityIdentifier } from 'features/controlLayers/store/selectors';
 import { useRegisteredHotkeys } from 'features/system/components/HotkeysModal/useHotkeyData';
-import { selectActiveTabCanvasRightPanel } from 'features/ui/store/uiSelectors';
 import { useCallback } from 'react';
 
 export function useCanvasDeleteLayerHotkey() {
@@ -12,14 +12,13 @@ export function useCanvasDeleteLayerHotkey() {
   const dispatch = useAppDispatch();
   const selectedEntityIdentifier = useAppSelector(selectSelectedEntityIdentifier);
   const isBusy = useCanvasIsBusy();
-  const canvasRightPanelTab = useAppSelector(selectActiveTabCanvasRightPanel);
 
   const deleteSelectedLayer = useCallback(() => {
-    if (selectedEntityIdentifier === null || isBusy || canvasRightPanelTab !== 'layers') {
+    if (selectedEntityIdentifier === null || isBusy || getFocusedRegion() !== 'layers') {
       return;
     }
     dispatch(entityDeleted({ entityIdentifier: selectedEntityIdentifier }));
-  }, [canvasRightPanelTab, dispatch, isBusy, selectedEntityIdentifier]);
+  }, [dispatch, isBusy, selectedEntityIdentifier]);
 
   useRegisteredHotkeys({
     id: 'deleteSelected',

invokeai/frontend/web/src/features/controlLayers/hooks/useCanvasInvertMaskHotkey.tsx

@@ -0,0 +1,36 @@
+import { useAppSelector } from 'app/store/storeHooks';
+import { useAssertSingleton } from 'common/hooks/useAssertSingleton';
+import { useCanvasIsBusy } from 'features/controlLayers/hooks/useCanvasIsBusy';
+import { useInvertMask } from 'features/controlLayers/hooks/useInvertMask';
+import { selectSelectedEntityIdentifier } from 'features/controlLayers/store/selectors';
+import { isInpaintMaskEntityIdentifier } from 'features/controlLayers/store/types';
+import { useRegisteredHotkeys } from 'features/system/components/HotkeysModal/useHotkeyData';
+import { useMemo } from 'react';
+
+export const useCanvasInvertMaskHotkey = () => {
+  useAssertSingleton('useCanvasInvertMaskHotkey');
+  const selectedEntityIdentifier = useAppSelector(selectSelectedEntityIdentifier);
+  const isBusy = useCanvasIsBusy();
+  const invertMask = useInvertMask();
+
+  const isEnabled = useMemo(() => {
+    if (!selectedEntityIdentifier) {
+      return false;
+    }
+    if (!isInpaintMaskEntityIdentifier(selectedEntityIdentifier)) {
+      return false;
+    }
+    if (isBusy) {
+      return false;
+    }
+    return true;
+  }, [selectedEntityIdentifier, isBusy]);
+
+  useRegisteredHotkeys({
+    id: 'invertMask',
+    category: 'canvas',
+    callback: invertMask,
+    options: { enabled: isEnabled, preventDefault: true },
+    dependencies: [invertMask, isEnabled],
+  });
+};

invokeai/frontend/web/src/features/controlLayers/hooks/useInvertMask.ts

@@ -0,0 +1,103 @@
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { useCanvasManager } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
+import { canvasToBlob, canvasToImageData } from 'features/controlLayers/konva/util';
+import { entityRasterized } from 'features/controlLayers/store/canvasSlice';
+import { selectSelectedEntityIdentifier } from 'features/controlLayers/store/selectors';
+import { imageDTOToImageObject } from 'features/controlLayers/store/util';
+import { toast } from 'features/toast/toast';
+import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { uploadImage } from 'services/api/endpoints/images';
+
+export const useInvertMask = () => {
+  const { t } = useTranslation();
+  const dispatch = useAppDispatch();
+  const canvasManager = useCanvasManager();
+  const selectedEntityIdentifier = useAppSelector(selectSelectedEntityIdentifier);
+
+  const invertMask = useCallback(async () => {
+    try {
+      const bboxRect = canvasManager.stateApi.getBbox().rect;
+
+      const adapters = canvasManager.compositor.getVisibleAdaptersOfType('inpaint_mask');
+
+      if (adapters.length === 0) {
+        toast({
+          id: 'NO_VISIBLE_MASKS',
+          title: t('toast.noVisibleMasks'),
+          description: t('toast.noVisibleMasksDesc'),
+          status: 'warning',
+        });
+        return;
+      }
+
+      const fullCanvas = document.createElement('canvas');
+      fullCanvas.width = bboxRect.width;
+      fullCanvas.height = bboxRect.height;
+      const fullCtx = fullCanvas.getContext('2d');
+
+      if (!fullCtx) {
+        throw new Error('Failed to get canvas context');
+      }
+
+      fullCtx.fillStyle = 'rgba(0, 0, 0, 0)';
+      fullCtx.fillRect(0, 0, bboxRect.width, bboxRect.height);
+
+      const visibleMasksRect = canvasManager.compositor.getVisibleRectOfType('inpaint_mask');
+
+      if (visibleMasksRect.width > 0 && visibleMasksRect.height > 0) {
+        const compositeCanvas = canvasManager.compositor.getCompositeCanvas(adapters, visibleMasksRect);
+
+        const offsetX = visibleMasksRect.x - bboxRect.x;
+        const offsetY = visibleMasksRect.y - bboxRect.y;
+        fullCtx.drawImage(compositeCanvas, offsetX, offsetY);
+      }
+
+      const imageData = canvasToImageData(fullCanvas);
+      const data = imageData.data;
+
+      for (let i = 3; i < data.length; i += 4) {
+        data[i] = 255 - (data[i] ?? 0); // Invert alpha
+      }
+
+      fullCtx.putImageData(imageData, 0, 0);
+
+      const blob = await canvasToBlob(fullCanvas);
+      const imageDTO = await uploadImage({
+        file: new File([blob], 'inverted-mask.png', { type: 'image/png' }),
+        image_category: 'general',
+        is_intermediate: true,
+        silent: true,
+      });
+
+      const imageObject = imageDTOToImageObject(imageDTO);
+
+      if (selectedEntityIdentifier) {
+        dispatch(
+          entityRasterized({
+            entityIdentifier: selectedEntityIdentifier,
+            imageObject,
+            position: { x: bboxRect.x, y: bboxRect.y },
+            replaceObjects: true,
+            isSelected: true,
+          })
+        );
+      }
+
+      toast({
+        id: 'MASK_INVERTED',
+        title: t('toast.maskInverted'),
+        status: 'success',
+      });
+    } catch (error) {
+      toast({
+        id: 'MASK_INVERT_FAILED',
+        title: t('toast.maskInvertFailed'),
+        description: String(error),
+        status: 'error',
+      });
+    }
+  }, [canvasManager, dispatch, selectedEntityIdentifier, t]);
+
+  return invertMask;
+};

invokeai/frontend/web/src/features/controlLayers/konva/CanvasEntity/CanvasEntityAdapterBase.ts

@@ -16,7 +16,6 @@ import {
   selectIsolatedLayerPreview,
   selectIsolatedStagingPreview,
 } from 'features/controlLayers/store/canvasSettingsSlice';
-import { selectIsStaging } from 'features/controlLayers/store/canvasStagingAreaSlice';
 import {
   buildSelectIsSelected,
   getSelectIsTypeHidden,
@@ -283,7 +282,7 @@ export abstract class CanvasEntityAdapterBase<T extends CanvasEntityState, U ext
     this.subscriptions.add(
       this.manager.stateApi.createStoreSubscription(selectIsolatedStagingPreview, this.syncVisibility)
     );
-    this.subscriptions.add(this.manager.stateApi.createStoreSubscription(selectIsStaging, this.syncVisibility));
+    this.subscriptions.add(this.manager.stagingArea.$isStaging.listen(this.syncVisibility));
     this.subscriptions.add(this.manager.stateApi.$filteringAdapter.listen(this.syncVisibility));
     this.subscriptions.add(this.manager.stateApi.$transformingAdapter.listen(this.syncVisibility));
     this.subscriptions.add(this.manager.stateApi.$segmentingAdapter.listen(this.syncVisibility));
@@ -462,7 +461,7 @@ export abstract class CanvasEntityAdapterBase<T extends CanvasEntityState, U ext
        * This allows the user to easily see how the new generation fits in with the rest of the canvas without the
        * other layer types getting in the way.
        */
-      const isStaging = this.manager.stateApi.runSelector(selectIsStaging);
+      const isStaging = this.manager.stagingArea.$isStaging.get();
       const isRasterLayer = isRasterLayerEntityIdentifier(this.entityIdentifier);
       if (isStaging && !isRasterLayer) {
         this.setVisibility(false);

invokeai/frontend/web/src/features/controlLayers/konva/CanvasStageModule.ts

@@ -339,7 +339,9 @@ export class CanvasStageModule extends CanvasModuleBase {
 
   onStageMouseWheel = (e: KonvaEventObject<WheelEvent>) => {
     e.evt.preventDefault();
-    this._snapTimeout && window.clearTimeout(this._snapTimeout);
+    if (this._snapTimeout !== null) {
+      window.clearTimeout(this._snapTimeout);
+    }
 
     if (e.evt.ctrlKey || e.evt.metaKey) {
       return;

invokeai/frontend/web/src/features/controlLayers/konva/CanvasStagingAreaModule.ts

@@ -1,15 +1,15 @@
 import { Mutex } from 'async-mutex';
-import type { ProgressData, ProgressDataMap } from 'features/controlLayers/components/SimpleSession/context';
+import type { SelectedItemData } from 'features/controlLayers/components/StagingArea/state';
 import type { CanvasManager } from 'features/controlLayers/konva/CanvasManager';
 import { CanvasModuleBase } from 'features/controlLayers/konva/CanvasModuleBase';
 import { CanvasObjectImage } from 'features/controlLayers/konva/CanvasObject/CanvasObjectImage';
 import { getPrefixedId } from 'features/controlLayers/konva/util';
-import { selectIsStaging } from 'features/controlLayers/store/canvasStagingAreaSlice';
 import type { CanvasImageState } from 'features/controlLayers/store/types';
 import Konva from 'konva';
 import type { Atom } from 'nanostores';
 import { atom, effect } from 'nanostores';
 import type { Logger } from 'roarr';
+import type { S } from 'services/api/types';
 
 // To get pixel sizes corresponding to our theme tokens, first find the theme token CSS var in browser dev tools.
 // For example `var(--invoke-space-8)` is equivalent to using `8` as a space prop in a component.
@@ -121,14 +121,12 @@ export class CanvasStagingAreaModule extends CanvasModuleBase {
     this.image = null;
 
     /**
-     * When we change this flag, we need to re-render the staging area, which hides or shows the staged image.
-     */
-    this.subscriptions.add(this.$shouldShowStagedImage.listen(this.render));
-
-    /**
-     * Rerender when the image source changes.
+     * Rerender when the anything important changes.
      */
     this.subscriptions.add(this.$imageSrc.listen(this.render));
+    this.subscriptions.add(this.$shouldShowStagedImage.listen(this.render));
+    this.subscriptions.add(this.$isPending.listen(this.render));
+    this.subscriptions.add(this.$isStaging.listen(this.render));
 
     /**
      * Sync the $isStaging flag with the redux state. $isStaging is used by the manager to determine the global busy
@@ -138,8 +136,7 @@ export class CanvasStagingAreaModule extends CanvasModuleBase {
      * even if the user disabled this in the last staging session.
      */
     this.subscriptions.add(
-      this.manager.stateApi.createStoreSubscription(selectIsStaging, (isStaging, oldIsStaging) => {
-        this.$isStaging.set(isStaging);
+      this.$isStaging.listen((isStaging, oldIsStaging) => {
         if (isStaging && !oldIsStaging) {
           this.$shouldShowStagedImage.set(true);
         }
@@ -150,46 +147,49 @@ export class CanvasStagingAreaModule extends CanvasModuleBase {
   initialize = () => {
     this.log.debug('Initializing module');
     this.render();
-    this.$isStaging.set(this.manager.stateApi.runSelector(selectIsStaging));
   };
 
-  connectToSession = (
-    $selectedItemId: Atom<number | null>,
-    $progressData: ProgressDataMap,
-    $isPending: Atom<boolean>
-  ) => {
-    const cb = (selectedItemId: number | null, progressData: Record<number, ProgressData | undefined>) => {
-      if (!selectedItemId) {
+  connectToSession = ($items: Atom<S['SessionQueueItem'][]>, $selectedItem: Atom<SelectedItemData | null>) => {
+    const imageSrcListener = (selectedItem: SelectedItemData | null) => {
+      if (!selectedItem) {
         this.$imageSrc.set(null);
         return;
       }
 
-      const datum = progressData[selectedItemId];
-
-      if (datum?.imageDTO) {
-        this.$imageSrc.set({ type: 'imageName', data: datum.imageDTO.image_name });
+      if (selectedItem.progressData.imageDTO) {
+        this.$imageSrc.set({ type: 'imageName', data: selectedItem.progressData.imageDTO.image_name });
         return;
-      } else if (datum?.progressImage) {
-        this.$imageSrc.set({ type: 'dataURL', data: datum.progressImage.dataURL });
+      } else if (selectedItem.progressData?.progressImage) {
+        this.$imageSrc.set({ type: 'dataURL', data: selectedItem.progressData.progressImage.dataURL });
         return;
       } else {
         this.$imageSrc.set(null);
       }
     };
+    const unsubImageSrc = effect([$selectedItem], imageSrcListener);
 
-    // Run the effect & forcibly render once to initialize
-    cb($selectedItemId.get(), $progressData.get());
+    const isPendingListener = (items: S['SessionQueueItem'][]) => {
+      this.$isPending.set(items.some((item) => item.status === 'pending' || item.status === 'in_progress'));
+    };
+    const unsubIsPending = effect([$items], isPendingListener);
+
+    const isStagingListener = (items: S['SessionQueueItem'][]) => {
+      this.$isStaging.set(items.length > 0);
+    };
+    const unsubIsStaging = effect([$items], isStagingListener);
+
+    // Run the effects & forcibly render once to initialize
+    isStagingListener($items.get());
+    isPendingListener($items.get());
+    imageSrcListener($selectedItem.get());
     this.render();
 
-    // Sync the $isPending flag with the computed
-    const unsubIsPending = effect([$isPending], (isPending) => {
-      this.$isPending.set(isPending);
-    });
-
-    const unsubImageSrc = effect([$selectedItemId, $progressData], cb);
-
     return () => {
+      this.$isStaging.set(false);
+      unsubIsStaging();
+      this.$isPending.set(false);
       unsubIsPending();
+      this.$imageSrc.set(null);
       unsubImageSrc();
     };
   };

invokeai/frontend/web/src/features/controlLayers/store/canvasSettingsSlice.ts

@@ -2,9 +2,10 @@ import type { PayloadAction, Selector } from '@reduxjs/toolkit';
 import { createSelector, createSlice } from '@reduxjs/toolkit';
 import type { PersistConfig, RootState } from 'app/store/store';
 import { zRgbaColor } from 'features/controlLayers/store/types';
-import { z } from 'zod/v4';
+import { z } from 'zod';
 
 const zAutoSwitchMode = z.enum(['off', 'switch_on_start', 'switch_on_finish']);
+export type AutoSwitchMode = z.infer<typeof zAutoSwitchMode>;
 
 const zCanvasSettingsState = z.object({
   /**

invokeai/frontend/web/src/features/controlLayers/store/canvasStagingAreaSlice.ts

@@ -1,19 +1,21 @@
 import { createSelector, createSlice, type PayloadAction } from '@reduxjs/toolkit';
 import { EMPTY_ARRAY } from 'app/store/constants';
 import type { PersistConfig, RootState } from 'app/store/store';
+import { useAppSelector } from 'app/store/storeHooks';
 import { deepClone } from 'common/util/deepClone';
-import { canvasReset } from 'features/controlLayers/store/actions';
+import { getPrefixedId } from 'features/controlLayers/konva/util';
+import { useMemo } from 'react';
 import { queueApi } from 'services/api/endpoints/queue';
 
 type CanvasStagingAreaState = {
-  generateSessionId: string | null;
-  canvasSessionId: string | null;
+  _version: 1;
+  canvasSessionId: string;
   canvasDiscardedQueueItems: number[];
 };
 
 const INITIAL_STATE: CanvasStagingAreaState = {
-  generateSessionId: null,
-  canvasSessionId: null,
+  _version: 1,
+  canvasSessionId: getPrefixedId('canvas'),
   canvasDiscardedQueueItems: [],
 };
 
@@ -23,46 +25,38 @@ export const canvasSessionSlice = createSlice({
   name: 'canvasSession',
   initialState: getInitialState(),
   reducers: {
-    generateSessionIdChanged: (state, action: PayloadAction<{ id: string }>) => {
-      const { id } = action.payload;
-      state.generateSessionId = id;
-    },
-    generateSessionReset: (state) => {
-      state.generateSessionId = null;
-    },
     canvasQueueItemDiscarded: (state, action: PayloadAction<{ itemId: number }>) => {
       const { itemId } = action.payload;
       if (!state.canvasDiscardedQueueItems.includes(itemId)) {
         state.canvasDiscardedQueueItems.push(itemId);
       }
     },
-    canvasSessionIdChanged: (state, action: PayloadAction<{ id: string }>) => {
-      const { id } = action.payload;
-      state.canvasSessionId = id;
-      state.canvasDiscardedQueueItems = [];
+    canvasSessionReset: {
+      reducer: (state, action: PayloadAction<{ canvasSessionId: string }>) => {
+        const { canvasSessionId } = action.payload;
+        state.canvasSessionId = canvasSessionId;
+        state.canvasDiscardedQueueItems = [];
+      },
+      prepare: () => {
+        return {
+          payload: {
+            canvasSessionId: getPrefixedId('canvas'),
+          },
+        };
+      },
     },
-    canvasSessionReset: (state) => {
-      state.canvasSessionId = null;
-      state.canvasDiscardedQueueItems = [];
-    },
-  },
-  extraReducers(builder) {
-    builder.addCase(canvasReset, (state) => {
-      state.canvasSessionId = null;
-    });
   },
 });
 
-export const {
-  generateSessionIdChanged,
-  generateSessionReset,
-  canvasSessionIdChanged,
-  canvasSessionReset,
-  canvasQueueItemDiscarded,
-} = canvasSessionSlice.actions;
+export const { canvasSessionReset, canvasQueueItemDiscarded } = canvasSessionSlice.actions;
 
 /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
 const migrate = (state: any): any => {
+  if (!('_version' in state)) {
+    state._version = 1;
+    state.canvasSessionId = state.canvasSessionId ?? getPrefixedId('canvas');
+  }
+
   return state;
 };
 
@@ -74,13 +68,14 @@ export const canvasStagingAreaPersistConfig: PersistConfig<CanvasStagingAreaStat
 };
 
 export const selectCanvasSessionSlice = (s: RootState) => s[canvasSessionSlice.name];
-
 export const selectCanvasSessionId = createSelector(selectCanvasSessionSlice, ({ canvasSessionId }) => canvasSessionId);
-export const selectGenerateSessionId = createSelector(
+
+const selectDiscardedItems = createSelector(
   selectCanvasSessionSlice,
-  ({ generateSessionId }) => generateSessionId
+  ({ canvasDiscardedQueueItems }) => canvasDiscardedQueueItems
 );
-export const buildSelectSessionQueueItems = (sessionId: string) =>
+
+export const buildSelectCanvasQueueItems = (sessionId: string) =>
   createSelector(
     [queueApi.endpoints.listAllQueueItems.select({ destination: sessionId }), selectDiscardedItems],
     ({ data }, discardedItems) => {
@@ -93,21 +88,12 @@ export const buildSelectSessionQueueItems = (sessionId: string) =>
     }
   );
 
-export const selectIsStaging = (state: RootState) => {
-  const sessionId = selectCanvasSessionId(state);
-  if (!sessionId) {
-    return false;
-  }
-  const { data } = queueApi.endpoints.listAllQueueItems.select({ destination: sessionId })(state);
-  if (!data) {
-    return false;
-  }
-  const discardedItems = selectDiscardedItems(state);
-  return data.some(
-    ({ status, item_id }) => status !== 'canceled' && status !== 'failed' && !discardedItems.includes(item_id)
-  );
+export const buildSelectIsStaging = (sessionId: string) =>
+  createSelector([buildSelectCanvasQueueItems(sessionId)], (queueItems) => {
+    return queueItems.length > 0;
+  });
+export const useCanvasIsStaging = () => {
+  const sessionId = useAppSelector(selectCanvasSessionId);
+  const selector = useMemo(() => buildSelectIsStaging(sessionId), [sessionId]);
+  return useAppSelector(selector);
 };
-const selectDiscardedItems = createSelector(
-  selectCanvasSessionSlice,
-  ({ canvasDiscardedQueueItems }) => canvasDiscardedQueueItems
-);

invokeai/frontend/web/src/features/controlLayers/store/filters.ts

@@ -4,7 +4,7 @@ import { zModelIdentifierField } from 'features/nodes/types/common';
 import { Graph } from 'features/nodes/util/graph/generation/Graph';
 import type { ControlLoRAModelConfig, ControlNetModelConfig, T2IAdapterModelConfig } from 'services/api/types';
 import { assert } from 'tsafe';
-import { z } from 'zod/v4';
+import { z } from 'zod';
 
 const zAjustImageChannels = z.enum([
   'Red (RGBA)',
@@ -146,7 +146,7 @@ const zNoiseFilterConfig = z.object({
 });
 export type NoiseFilterConfig = z.infer<typeof zNoiseFilterConfig>;
 
-const zFilterConfig = z.discriminatedUnion('type', [
+const _zFilterConfig = z.discriminatedUnion('type', [
   zAdjustImageFilterConfig,
   zCannyEdgeDetectionFilterConfig,
   zColorMapFilterConfig,
@@ -164,7 +164,7 @@ const zFilterConfig = z.discriminatedUnion('type', [
   zBlurFilterConfig,
   zNoiseFilterConfig,
 ]);
-export type FilterConfig = z.infer<typeof zFilterConfig>;
+export type FilterConfig = z.infer<typeof _zFilterConfig>;
 
 const zFilterType = z.enum([
   'adjust_image',

invokeai/frontend/web/src/features/controlLayers/store/types.test.ts

@@ -21,7 +21,7 @@ import type { Invocation } from 'services/api/types';
 import type { Equals } from 'tsafe';
 import { assert } from 'tsafe';
 import { describe, test } from 'vitest';
-import type { z } from 'zod/v4';
+import type { z } from 'zod';
 
 import type {
   CanvasEntityIdentifier,

invokeai/frontend/web/src/features/controlLayers/store/types.ts

@@ -31,7 +31,7 @@ import {
 } from 'features/parameters/types/parameterSchemas';
 import { getImageDTOSafe } from 'services/api/endpoints/images';
 import type { JsonObject } from 'type-fest';
-import { z } from 'zod/v4';
+import { z } from 'zod';
 
 const zId = z.string().min(1);
 const zName = z.string().min(1).nullable();
@@ -82,8 +82,8 @@ const zIPMethodV2 = z.enum(['full', 'style', 'composition', 'style_strong', 'sty
 export type IPMethodV2 = z.infer<typeof zIPMethodV2>;
 export const isIPMethodV2 = (v: unknown): v is IPMethodV2 => zIPMethodV2.safeParse(v).success;
 
-const zTool = z.enum(['brush', 'eraser', 'move', 'rect', 'view', 'bbox', 'colorPicker']);
-export type Tool = z.infer<typeof zTool>;
+const _zTool = z.enum(['brush', 'eraser', 'move', 'rect', 'view', 'bbox', 'colorPicker']);
+export type Tool = z.infer<typeof _zTool>;
 
 const zPoints = z.array(z.number()).refine((points) => points.length % 2 === 0, {
   message: 'Must have an even number of coordinate components',
@@ -106,23 +106,23 @@ export const RGBA_BLACK: RgbaColor = { r: 0, g: 0, b: 0, a: 1 };
 
 const zOpacity = z.number().gte(0).lte(1);
 
-const zDimensions = z.object({
+const _zDimensions = z.object({
   width: z.number().int().positive(),
   height: z.number().int().positive(),
 });
-export type Dimensions = z.infer<typeof zDimensions>;
+export type Dimensions = z.infer<typeof _zDimensions>;
 
 const zCoordinate = z.object({
   x: z.number(),
   y: z.number(),
 });
 export type Coordinate = z.infer<typeof zCoordinate>;
-const zCoordinateWithPressure = z.object({
+const _zCoordinateWithPressure = z.object({
   x: z.number(),
   y: z.number(),
   pressure: z.number(),
 });
-export type CoordinateWithPressure = z.infer<typeof zCoordinateWithPressure>;
+export type CoordinateWithPressure = z.infer<typeof _zCoordinateWithPressure>;
 
 const SAM_POINT_LABELS = {
   background: -1,
@@ -154,12 +154,12 @@ export const SAM_POINT_LABEL_STRING_TO_NUMBER: Record<SAMPointLabelString, SAMPo
   foreground: 1,
 };
 
-const zSAMPoint = z.object({
+const _zSAMPoint = z.object({
   x: z.number().int().gte(0),
   y: z.number().int().gte(0),
   label: zSAMPointLabel,
 });
-type SAMPoint = z.infer<typeof zSAMPoint>;
+type SAMPoint = z.infer<typeof _zSAMPoint>;
 export type SAMPointWithId = SAMPoint & { id: string };
 
 const zRect = z.object({
@@ -170,10 +170,10 @@ const zRect = z.object({
 });
 export type Rect = z.infer<typeof zRect>;
 
-const zRectWithRotation = zRect.extend({
+const _zRectWithRotation = zRect.extend({
   rotation: z.number(),
 });
-export type RectWithRotation = z.infer<typeof zRectWithRotation>;
+export type RectWithRotation = z.infer<typeof _zRectWithRotation>;
 
 const zCanvasBrushLineState = z.object({
   id: zId,
@@ -402,13 +402,13 @@ export type BoundingBoxScaleMethod = z.infer<typeof zBoundingBoxScaleMethod>;
 export const isBoundingBoxScaleMethod = (v: unknown): v is BoundingBoxScaleMethod =>
   zBoundingBoxScaleMethod.safeParse(v).success;
 
-const zCanvasEntityState = z.discriminatedUnion('type', [
+const _zCanvasEntityState = z.discriminatedUnion('type', [
   zCanvasRasterLayerState,
   zCanvasControlLayerState,
   zCanvasRegionalGuidanceState,
   zCanvasInpaintMaskState,
 ]);
-export type CanvasEntityState = z.infer<typeof zCanvasEntityState>;
+export type CanvasEntityState = z.infer<typeof _zCanvasEntityState>;
 
 const zCanvasEntityType = z.union([
   zCanvasRasterLayerState.shape.type,
@@ -433,7 +433,7 @@ export type LoRA = {
 
 export type EphemeralProgressImage = { sessionId: string; image: ProgressImage };
 
-export const zAspectRatioID = z.enum(['Free', '21:9', '9:21', '16:9', '3:2', '4:3', '1:1', '3:4', '2:3', '9:16']);
+export const zAspectRatioID = z.enum(['Free', '21:9', '16:9', '3:2', '4:3', '1:1', '3:4', '2:3', '9:16', '9:21']);
 export type AspectRatioID = z.infer<typeof zAspectRatioID>;
 export const isAspectRatioID = (v: unknown): v is AspectRatioID => zAspectRatioID.safeParse(v).success;
 export const ASPECT_RATIO_MAP: Record<Exclude<AspectRatioID, 'Free'>, { ratio: number; inverseID: AspectRatioID }> = {
@@ -469,7 +469,7 @@ export const CHATGPT_ASPECT_RATIOS: Record<ChatGPT4oAspectRatio, Dimensions> = {
   '2:3': { width: 1024, height: 1536 },
 } as const;
 
-export const zFluxKontextAspectRatioID = z.enum(['21:9', '4:3', '1:1', '3:4', '9:21', '16:9', '9:16']);
+export const zFluxKontextAspectRatioID = z.enum(['21:9', '16:9', '4:3', '1:1', '3:4', '9:16', '9:21']);
 type FluxKontextAspectRatio = z.infer<typeof zFluxKontextAspectRatioID>;
 export const isFluxKontextAspectRatioID = (v: unknown): v is z.infer<typeof zFluxKontextAspectRatioID> =>
   zFluxKontextAspectRatioID.safeParse(v).success;

invokeai/frontend/web/src/features/dnd/FullscreenDropzone.tsx

@@ -20,7 +20,7 @@ import { useTranslation } from 'react-i18next';
 import { uploadImages } from 'services/api/endpoints/images';
 import { useBoardName } from 'services/api/hooks/useBoardName';
 import type { UploadImageArg } from 'services/api/types';
-import { z } from 'zod/v4';
+import { z } from 'zod';
 
 const ACCEPTED_IMAGE_TYPES = ['image/png', 'image/jpg', 'image/jpeg', 'image/webp'];
 const ACCEPTED_FILE_EXTENSIONS = ['.png', '.jpg', '.jpeg', '.webp'];
@@ -41,13 +41,13 @@ const zUploadFile = z
   // )
   .refine(
     (file) => {
-      return ACCEPTED_IMAGE_TYPES.includes(file.type);
+      return ACCEPTED_IMAGE_TYPES.includes(file.type.toLowerCase());
     },
     { message: `File type is not supported` }
   )
   .refine(
     (file) => {
-      return ACCEPTED_FILE_EXTENSIONS.some((ext) => file.name.endsWith(ext));
+      return ACCEPTED_FILE_EXTENSIONS.some((ext) => file.name.toLowerCase().endsWith(ext));
     },
     { message: `File extension is not supported` }
   );

invokeai/frontend/web/src/features/dynamicPrompts/store/dynamicPromptsSlice.ts

@@ -2,7 +2,7 @@ import type { PayloadAction, Selector } from '@reduxjs/toolkit';
 import { createSelector, createSlice } from '@reduxjs/toolkit';
 import type { PersistConfig, RootState } from 'app/store/store';
 import { buildZodTypeGuard } from 'common/util/zodUtils';
-import { z } from 'zod/v4';
+import { z } from 'zod';
 
 const zSeedBehaviour = z.enum(['PER_ITERATION', 'PER_PROMPT']);
 export const isSeedBehaviour = buildZodTypeGuard(zSeedBehaviour);