chore(deps): update dependency aqua:flutter/flutter to v3.44.0

.github/workflows/build-mobile.yml

@@ -231,7 +231,7 @@ jobs:
         run: mise //mobile:codegen:pigeon
 
       - name: Setup Ruby
-        uses: ruby/setup-ruby@afeafc3d1ab54a631816aba4c914a0081c12ff2f # v1.310.0
+        uses: ruby/setup-ruby@6aaa311d81eba98ae12eaffbcb63296ace0efcde # v1.307.0
         with:
           ruby-version: '3.3'
           bundler-cache: true

.github/workflows/codeql-analysis.yml

@@ -57,7 +57,7 @@ jobs:
 
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@9e0d7b8d25671d64c341c19c0152d693099fb5ba # v4.35.5
+        uses: github/codeql-action/init@68bde559dea0fdcac2102bfdf6230c5f70eb485e # v4.35.4
         with:
           languages: ${{ matrix.language }}
           # If you wish to specify custom queries, you can do so here or in a config file.
@@ -70,7 +70,7 @@ jobs:
       # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
       # If this step fails, then you should remove it and run the build manually (see below)
       - name: Autobuild
-        uses: github/codeql-action/autobuild@9e0d7b8d25671d64c341c19c0152d693099fb5ba # v4.35.5
+        uses: github/codeql-action/autobuild@68bde559dea0fdcac2102bfdf6230c5f70eb485e # v4.35.4
 
       # ℹ️ Command-line programs to run using the OS shell.
       # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
@@ -83,6 +83,6 @@ jobs:
       #   ./location_of_script_within_repo/buildscript.sh
 
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@9e0d7b8d25671d64c341c19c0152d693099fb5ba # v4.35.5
+        uses: github/codeql-action/analyze@68bde559dea0fdcac2102bfdf6230c5f70eb485e # v4.35.4
         with:
           category: '/language:${{matrix.language}}'

docs/docs/install/environment-variables.md

@@ -154,33 +154,33 @@ Redis (Sentinel) URL example JSON before encoding:
 
 ## Machine Learning
 
-| Variable                                                    | Description                                                                                                                                                  |           Default            | Containers       |
-| :---------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------------: | :--------------- |
-| `MACHINE_LEARNING_MODEL_TTL`                                | Inactivity time (s) before a model is unloaded (disabled if \<= 0)                                                                                           |            `300`             | machine learning |
-| `MACHINE_LEARNING_MODEL_TTL_POLL_S`                         | Interval (s) between checks for the model TTL (disabled if \<= 0)                                                                                            |             `10`             | machine learning |
-| `MACHINE_LEARNING_CACHE_FOLDER`                             | Directory where models are downloaded                                                                                                                        |           `/cache`           | machine learning |
-| `MACHINE_LEARNING_REQUEST_THREADS`<sup>\*1</sup>            | Thread count of the request thread pool (disabled if \<= 0)                                                                                                  |     number of CPU cores      | machine learning |
-| `MACHINE_LEARNING_MODEL_INTER_OP_THREADS`                   | Number of parallel model operations                                                                                                                          |             `1`              | machine learning |
-| `MACHINE_LEARNING_MODEL_INTRA_OP_THREADS`                   | Number of threads for each model operation                                                                                                                   |             `2`              | machine learning |
-| `MACHINE_LEARNING_WORKERS`<sup>\*2</sup>                    | Number of worker processes to spawn                                                                                                                          |             `1`              | machine learning |
-| `MACHINE_LEARNING_HTTP_KEEPALIVE_TIMEOUT_S`<sup>\*3</sup>   | HTTP Keep-alive time in seconds                                                                                                                              |             `2`              | machine learning |
-| `MACHINE_LEARNING_WORKER_TIMEOUT`                           | Maximum time (s) of unresponsiveness before a worker is killed                                                                                               | `300` (`900` if using ROCm)  | machine learning |
-| `MACHINE_LEARNING_PRELOAD__CLIP__TEXTUAL`                   | Comma-separated list of (textual) CLIP model(s) to preload and cache                                                                                         |                              | machine learning |
-| `MACHINE_LEARNING_PRELOAD__CLIP__VISUAL`                    | Comma-separated list of (visual) CLIP model(s) to preload and cache                                                                                          |                              | machine learning |
-| `MACHINE_LEARNING_PRELOAD__FACIAL_RECOGNITION__RECOGNITION` | Comma-separated list of (recognition) facial recognition model(s) to preload and cache                                                                       |                              | machine learning |
-| `MACHINE_LEARNING_PRELOAD__FACIAL_RECOGNITION__DETECTION`   | Comma-separated list of (detection) facial recognition model(s) to preload and cache                                                                         |                              | machine learning |
-| `MACHINE_LEARNING_PRELOAD__OCR__RECOGNITION`                | Comma-separated list of (recognition) OCR model(s) to preload and cache                                                                                      |                              | machine learning |
-| `MACHINE_LEARNING_PRELOAD__OCR__DETECTION`                  | Comma-separated list of (detection) OCR model(s) to preload and cache                                                                                        |                              | machine learning |
-| `MACHINE_LEARNING_ANN`                                      | Enable ARM-NN hardware acceleration if supported                                                                                                             |            `True`            | machine learning |
-| `MACHINE_LEARNING_ANN_FP16_TURBO`                           | Execute operations in FP16 precision: increasing speed, reducing precision (applies only to ARM-NN)                                                          |           `False`            | machine learning |
-| `MACHINE_LEARNING_ANN_TUNING_LEVEL`                         | ARM-NN GPU tuning level (1: rapid, 2: normal, 3: exhaustive)                                                                                                 |             `2`              | machine learning |
-| `MACHINE_LEARNING_DEVICE_IDS`<sup>\*4</sup>                 | Device IDs to use in multi-GPU environments                                                                                                                  |             `0`              | machine learning |
-| `MACHINE_LEARNING_MAX_BATCH_SIZE__FACIAL_RECOGNITION`       | Set the maximum number of faces that will be processed at once by the facial recognition model                                                               | None (`1` if using OpenVINO) | machine learning |
-| `MACHINE_LEARNING_MAX_BATCH_SIZE__OCR`                      | Set the maximum number of boxes that will be processed at once by the OCR model                                                                              |             `6`              | machine learning |
-| `MACHINE_LEARNING_RKNN`                                     | Enable RKNN hardware acceleration if supported                                                                                                               |            `True`            | machine learning |
-| `MACHINE_LEARNING_RKNN_THREADS`                             | How many threads of RKNN runtime should be spun up while inferencing.                                                                                        |             `1`              | machine learning |
-| `MACHINE_LEARNING_MODEL_ARENA`                              | Pre-allocates CPU memory to avoid memory fragmentation                                                                                                       |             true             | machine learning |
-| `MACHINE_LEARNING_OPENVINO_PRECISION`                       | If set to FP16, uses half-precision floating-point operations for faster inference with reduced accuracy (one of [`FP16`, `FP32`], applies only to OpenVINO) |            `FP32`            | machine learning |
+| Variable                                                    | Description                                                                                                                                                  |             Default             | Containers       |
+| :---------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------- | :-----------------------------: | :--------------- |
+| `MACHINE_LEARNING_MODEL_TTL`                                | Inactivity time (s) before a model is unloaded (disabled if \<= 0)                                                                                           |              `300`              | machine learning |
+| `MACHINE_LEARNING_MODEL_TTL_POLL_S`                         | Interval (s) between checks for the model TTL (disabled if \<= 0)                                                                                            |              `10`               | machine learning |
+| `MACHINE_LEARNING_CACHE_FOLDER`                             | Directory where models are downloaded                                                                                                                        |            `/cache`             | machine learning |
+| `MACHINE_LEARNING_REQUEST_THREADS`<sup>\*1</sup>            | Thread count of the request thread pool (disabled if \<= 0)                                                                                                  |       number of CPU cores       | machine learning |
+| `MACHINE_LEARNING_MODEL_INTER_OP_THREADS`                   | Number of parallel model operations                                                                                                                          |               `1`               | machine learning |
+| `MACHINE_LEARNING_MODEL_INTRA_OP_THREADS`                   | Number of threads for each model operation                                                                                                                   |               `2`               | machine learning |
+| `MACHINE_LEARNING_WORKERS`<sup>\*2</sup>                    | Number of worker processes to spawn                                                                                                                          |               `1`               | machine learning |
+| `MACHINE_LEARNING_HTTP_KEEPALIVE_TIMEOUT_S`<sup>\*3</sup>   | HTTP Keep-alive time in seconds                                                                                                                              |               `2`               | machine learning |
+| `MACHINE_LEARNING_WORKER_TIMEOUT`                           | Maximum time (s) of unresponsiveness before a worker is killed                                                                                               | `120` (`300` if using OpenVINO) | machine learning |
+| `MACHINE_LEARNING_PRELOAD__CLIP__TEXTUAL`                   | Comma-separated list of (textual) CLIP model(s) to preload and cache                                                                                         |                                 | machine learning |
+| `MACHINE_LEARNING_PRELOAD__CLIP__VISUAL`                    | Comma-separated list of (visual) CLIP model(s) to preload and cache                                                                                          |                                 | machine learning |
+| `MACHINE_LEARNING_PRELOAD__FACIAL_RECOGNITION__RECOGNITION` | Comma-separated list of (recognition) facial recognition model(s) to preload and cache                                                                       |                                 | machine learning |
+| `MACHINE_LEARNING_PRELOAD__FACIAL_RECOGNITION__DETECTION`   | Comma-separated list of (detection) facial recognition model(s) to preload and cache                                                                         |                                 | machine learning |
+| `MACHINE_LEARNING_PRELOAD__OCR__RECOGNITION`                | Comma-separated list of (recognition) OCR model(s) to preload and cache                                                                                      |                                 | machine learning |
+| `MACHINE_LEARNING_PRELOAD__OCR__DETECTION`                  | Comma-separated list of (detection) OCR model(s) to preload and cache                                                                                        |                                 | machine learning |
+| `MACHINE_LEARNING_ANN`                                      | Enable ARM-NN hardware acceleration if supported                                                                                                             |             `True`              | machine learning |
+| `MACHINE_LEARNING_ANN_FP16_TURBO`                           | Execute operations in FP16 precision: increasing speed, reducing precision (applies only to ARM-NN)                                                          |             `False`             | machine learning |
+| `MACHINE_LEARNING_ANN_TUNING_LEVEL`                         | ARM-NN GPU tuning level (1: rapid, 2: normal, 3: exhaustive)                                                                                                 |               `2`               | machine learning |
+| `MACHINE_LEARNING_DEVICE_IDS`<sup>\*4</sup>                 | Device IDs to use in multi-GPU environments                                                                                                                  |               `0`               | machine learning |
+| `MACHINE_LEARNING_MAX_BATCH_SIZE__FACIAL_RECOGNITION`       | Set the maximum number of faces that will be processed at once by the facial recognition model                                                               |  None (`1` if using OpenVINO)   | machine learning |
+| `MACHINE_LEARNING_MAX_BATCH_SIZE__OCR`                      | Set the maximum number of boxes that will be processed at once by the OCR model                                                                              |               `6`               | machine learning |
+| `MACHINE_LEARNING_RKNN`                                     | Enable RKNN hardware acceleration if supported                                                                                                               |             `True`              | machine learning |
+| `MACHINE_LEARNING_RKNN_THREADS`                             | How many threads of RKNN runtime should be spun up while inferencing.                                                                                        |               `1`               | machine learning |
+| `MACHINE_LEARNING_MODEL_ARENA`                              | Pre-allocates CPU memory to avoid memory fragmentation                                                                                                       |              true               | machine learning |
+| `MACHINE_LEARNING_OPENVINO_PRECISION`                       | If set to FP16, uses half-precision floating-point operations for faster inference with reduced accuracy (one of [`FP16`, `FP32`], applies only to OpenVINO) |             `FP32`              | machine learning |
 
 \*1: It is recommended to begin with this parameter when changing the concurrency levels of the machine learning service and then tune the other ones.
 

e2e/src/ui/specs/timeline/timeline.e2e-spec.ts

@@ -536,7 +536,7 @@ test.describe('Timeline', () => {
         force: false,
         ids: [assetToTrash.id],
       });
-      await page.locator('#control-bar').getByLabel('Close').click();
+      await page.locator('#asset-selection-app-bar').getByLabel('Close').click();
       await page.getByText('Trash', { exact: true }).click();
       await timelineUtils.waitForTimelineLoad(page);
       await thumbnailUtils.expectInViewport(page, assetToTrash.id);
@@ -676,7 +676,7 @@ test.describe('Timeline', () => {
         ids: [assetToArchive.id],
       });
       await thumbnailUtils.expectThumbnailIsArchive(page, assetToArchive.id);
-      await page.locator('#control-bar').getByLabel('Close').click();
+      await page.locator('#asset-selection-app-bar').getByLabel('Close').click();
       await page.getByRole('link').getByText('Archive').click();
       await timelineUtils.waitForTimelineLoad(page);
       await thumbnailUtils.expectInViewport(page, assetToArchive.id);
@@ -823,7 +823,7 @@ test.describe('Timeline', () => {
       });
       // ensure thumbnail still exists and has favorite icon
       await thumbnailUtils.expectThumbnailIsFavorite(page, assetToFavorite.id);
-      await page.locator('#control-bar').getByLabel('Close').click();
+      await page.locator('#asset-selection-app-bar').getByLabel('Close').click();
       await page.getByRole('link').getByText('Favorites').click();
       await timelineUtils.waitForTimelineLoad(page);
       await pageUtils.goToAsset(page, assetToFavorite.fileCreatedAt);

i18n/en.json

@@ -698,7 +698,6 @@
   "birthdate_saved": "Date of birth saved successfully",
   "birthdate_set_description": "Date of birth is used to calculate the age of this person at the time of a photo.",
   "blurred_background": "Blurred background",
-  "browse_templates": "Browse templates",
   "bugs_and_feature_requests": "Bugs & Feature Requests",
   "build": "Build",
   "build_image": "Build Image",
@@ -977,7 +976,6 @@
   "downloading_asset_filename": "Downloading asset {filename}",
   "downloading_from_icloud": "Downloading from iCloud",
   "downloading_media": "Downloading media",
-  "drag_to_reorder": "Drag to reorder",
   "drop_files_to_upload": "Drop files anywhere to upload",
   "duplicates": "Duplicates",
   "duplicates_description": "Resolve each group by indicating which, if any, are duplicates.",
@@ -2256,7 +2254,6 @@
   "step_delete_confirm": "Are you sure you want to delete this step?",
   "step_details": "Step details",
   "steps": "Steps",
-  "steps_count": "{count, plural, one {# step} other {# steps}}",
   "stop_casting": "Stop casting",
   "stop_motion_photo": "Stop Motion Photo",
   "stop_photo_sharing": "Stop sharing your photos?",
@@ -2418,7 +2415,6 @@
   "use_browser_locale_description": "Format dates, times, and numbers based on your browser locale",
   "use_current_connection": "Use current connection",
   "use_custom_date_range": "Use custom date range instead",
-  "use_template": "Use template",
   "user": "User",
   "user_has_been_deleted": "This user has been deleted.",
   "user_id": "User ID",
@@ -2480,7 +2476,6 @@
   "week": "Week",
   "welcome": "Welcome",
   "welcome_to_immich": "Welcome to Immich",
-  "when": "When",
   "width": "Width",
   "wifi_name": "Wi-Fi Name",
   "workflow": "Workflow",
@@ -2493,7 +2488,6 @@
   "workflow_name": "Workflow name",
   "workflow_navigation_prompt": "Are you sure you want to leave without saving your changes?",
   "workflow_summary": "Workflow summary",
-  "workflow_templates": "Workflow templates",
   "workflow_update_success": "Workflow updated successfully",
   "workflow_updated": "Workflow updated",
   "workflows": "Workflows",

machine-learning/immich_ml/config.py

@@ -6,7 +6,7 @@ from pathlib import Path
 from socket import socket
 
 from gunicorn.arbiter import Arbiter
-from pydantic import BaseModel, Field
+from pydantic import BaseModel
 from pydantic_settings import BaseSettings, SettingsConfigDict
 from rich.console import Console
 from rich.logging import RichHandler
@@ -42,10 +42,6 @@ class MaxBatchSize(BaseModel):
     ocr: int | None = None
 
 
-def default_worker_timeout() -> int:
-    return 900 if os.environ.get("DEVICE") == "rocm" else 300
-
-
 class Settings(BaseSettings):
     model_config = SettingsConfigDict(
         env_prefix="MACHINE_LEARNING_",
@@ -58,7 +54,7 @@ class Settings(BaseSettings):
     model_ttl: int = 300
     model_ttl_poll_s: int = 10
     workers: int = 1
-    worker_timeout: int = Field(default_factory=default_worker_timeout)
+    worker_timeout: int = 300
     http_keepalive_timeout_s: int = 2
     test_full: bool = False
     request_threads: int = os.cpu_count() or 4

machine-learning/immich_ml/models/facial_recognition/recognition.py

@@ -89,10 +89,4 @@ class FaceRecognizer(InferenceModel):
     @property
     def _batch_size_default(self) -> int | None:
         providers = ort.get_available_providers()
-        if (
-            self.model_format == ModelFormat.ONNX
-            and "MIGraphXExecutionProvider" not in providers
-            and "OpenVINOExecutionProvider" not in providers
-        ):
-            return None
-        return 1
+        return None if self.model_format == ModelFormat.ONNX and "OpenVINOExecutionProvider" not in providers else 1

machine-learning/immich_ml/sessions/ort.py

@@ -1,7 +1,6 @@
 from __future__ import annotations
 
 from pathlib import Path
-from threading import Lock
 from typing import Any
 
 import numpy as np
@@ -13,37 +12,6 @@ from immich_ml.schemas import ModelPrecision, SessionNode
 
 from ..config import log, settings
 
-MigraphxInputSignature = tuple[tuple[str, str, tuple[int, ...]], ...]
-
-_migraphx_registry_lock = Lock()
-_migraphx_model_locks: dict[str, Lock] = {}
-_migraphx_compiled_inputs: set[tuple[str, MigraphxInputSignature]] = set()
-
-
-def _migraphx_get_model_lock(model_key: str) -> Lock:
-    with _migraphx_registry_lock:
-        lock = _migraphx_model_locks.get(model_key)
-        if lock is None:
-            lock = Lock()
-            _migraphx_model_locks[model_key] = lock
-        return lock
-
-
-def _migraphx_has_compiled_input(key: tuple[str, MigraphxInputSignature]) -> bool:
-    with _migraphx_registry_lock:
-        return key in _migraphx_compiled_inputs
-
-
-def _migraphx_mark_compiled_input(key: tuple[str, MigraphxInputSignature]) -> None:
-    with _migraphx_registry_lock:
-        _migraphx_compiled_inputs.add(key)
-
-
-def _migraphx_input_signature(
-    input_feed: dict[str, NDArray[np.float32]] | dict[str, NDArray[np.int32]],
-) -> MigraphxInputSignature:
-    return tuple((name, str(value.dtype), tuple(value.shape)) for name, value in sorted(input_feed.items()))
-
 
 class OrtSession:
     session: ort.InferenceSession
@@ -80,21 +48,7 @@ class OrtSession:
         input_feed: dict[str, NDArray[np.float32]] | dict[str, NDArray[np.int32]],
         run_options: Any = None,
     ) -> list[NDArray[np.float32]]:
-        if "MIGraphXExecutionProvider" in self.providers:
-            model_key = self.model_path.resolve().as_posix()
-            input_key = (model_key, _migraphx_input_signature(input_feed))
-            if not _migraphx_has_compiled_input(input_key):
-                model_lock = _migraphx_get_model_lock(model_key)
-                with model_lock:
-                    if not _migraphx_has_compiled_input(input_key):
-                        outputs: list[NDArray[np.float32]] = self.session.run(output_names, input_feed, run_options)
-                        _migraphx_mark_compiled_input(input_key)
-                        return outputs
-
-            outputs = self.session.run(output_names, input_feed, run_options)
-            return outputs
-
-        outputs = self.session.run(output_names, input_feed, run_options)
+        outputs: list[NDArray[np.float32]] = self.session.run(output_names, input_feed, run_options)
         return outputs
 
     @property

machine-learning/pyproject.toml

@@ -10,7 +10,7 @@ dependencies = [
     "fastapi>=0.95.2,<1.0",
     "gunicorn>=21.1.0",
     "huggingface-hub>=1.0,<2.0",
-    "insightface>=0.7.3,<2.0",
+    "insightface>=0.7.3,<1.0",
     "numpy>=2.4.0,<3.0",
     "opencv-python-headless>=4.7.0.72,<5.0",
     "orjson>=3.9.5",

machine-learning/test_main.py

@@ -35,37 +35,7 @@ from immich_ml.sessions.ort import OrtSession
 from immich_ml.sessions.rknn import RknnSession, run_inference
 
 
-class FakeLock:
-    def __init__(self) -> None:
-        self.enter = mock.Mock()
-        self.exit = mock.Mock()
-
-    def __enter__(self) -> None:
-        self.enter()
-
-    def __exit__(self, *args: object) -> None:
-        self.exit(*args)
-
-
 class TestBase:
-    def test_sets_default_worker_timeout(self, monkeypatch: MonkeyPatch) -> None:
-        monkeypatch.delenv("DEVICE", raising=False)
-        monkeypatch.delenv("MACHINE_LEARNING_WORKER_TIMEOUT", raising=False)
-
-        assert Settings().worker_timeout == 300
-
-    def test_sets_rocm_default_worker_timeout(self, monkeypatch: MonkeyPatch) -> None:
-        monkeypatch.setenv("DEVICE", "rocm")
-        monkeypatch.delenv("MACHINE_LEARNING_WORKER_TIMEOUT", raising=False)
-
-        assert Settings().worker_timeout == 900
-
-    def test_worker_timeout_env_override(self, monkeypatch: MonkeyPatch) -> None:
-        monkeypatch.setenv("DEVICE", "rocm")
-        monkeypatch.setenv("MACHINE_LEARNING_WORKER_TIMEOUT", "1200")
-
-        assert Settings().worker_timeout == 1200
-
     def test_sets_default_cache_dir(self) -> None:
         encoder = OpenClipTextualEncoder("ViT-B-32__openai")
 
@@ -443,52 +413,6 @@ class TestOrtSession:
 
         assert sess_options is session.sess_options
 
-    def test_serializes_rocm_first_run_for_new_input_signature(self, mocker: MockerFixture) -> None:
-        lock = FakeLock()
-        get_model_lock = mocker.patch("immich_ml.sessions.ort._migraphx_get_model_lock", return_value=lock)
-        mocker.patch("immich_ml.sessions.ort._migraphx_compiled_inputs", set())
-        mocker.patch("immich_ml.sessions.ort.Path.mkdir")
-        session = OrtSession("/cache/ViT-B-32__openai/model.onnx", providers=["MIGraphXExecutionProvider"])
-        input_feed = {"input": np.random.rand(1, 3, 224, 224).astype(np.float32)}
-
-        session.run(None, input_feed)
-        session.run(None, input_feed)
-
-        lock.enter.assert_called_once()
-        lock.exit.assert_called_once()
-        get_model_lock.assert_called_once()
-        session.session.run.assert_has_calls([mock.call(None, input_feed, None), mock.call(None, input_feed, None)])
-
-    def test_serializes_rocm_run_for_each_new_input_signature(self, mocker: MockerFixture) -> None:
-        lock = FakeLock()
-        mocker.patch("immich_ml.sessions.ort._migraphx_get_model_lock", return_value=lock)
-        mocker.patch("immich_ml.sessions.ort._migraphx_compiled_inputs", set())
-        mocker.patch("immich_ml.sessions.ort.Path.mkdir")
-        session = OrtSession("/cache/ViT-B-32__openai/model.onnx", providers=["MIGraphXExecutionProvider"])
-        input_feed = {"input": np.random.rand(1, 3, 224, 224).astype(np.float32)}
-        new_shape_input_feed = {"input": np.random.rand(2, 3, 224, 224).astype(np.float32)}
-
-        session.run(None, input_feed)
-        session.run(None, new_shape_input_feed)
-
-        assert lock.enter.call_count == 2
-        assert lock.exit.call_count == 2
-        session.session.run.assert_has_calls(
-            [mock.call(None, input_feed, None), mock.call(None, new_shape_input_feed, None)]
-        )
-
-    def test_does_not_serialize_non_rocm_run(self, mocker: MockerFixture) -> None:
-        lock = FakeLock()
-        get_model_lock = mocker.patch("immich_ml.sessions.ort._migraphx_get_model_lock", return_value=lock)
-        session = OrtSession("/cache/ViT-B-32__openai/model.onnx", providers=["CPUExecutionProvider"])
-        input_feed = {"input": np.random.rand(1, 3, 224, 224).astype(np.float32)}
-
-        session.run(None, input_feed)
-
-        get_model_lock.assert_not_called()
-        lock.enter.assert_not_called()
-        session.session.run.assert_called_once_with(None, input_feed, None)
-
 
 class TestAnnSession:
     def test_creates_ann_session(self, ann_session: mock.Mock, info: mock.Mock) -> None:
@@ -959,34 +883,6 @@ class TestFaceRecognition:
         onnx.load.assert_not_called()
         onnx.save.assert_not_called()
 
-    def test_recognition_does_not_add_batch_axis_for_migraphx(
-        self, ort_session: mock.Mock, path: mock.Mock, mocker: MockerFixture
-    ) -> None:
-        onnx = mocker.patch("immich_ml.models.facial_recognition.recognition.onnx", autospec=True)
-        update_dims = mocker.patch(
-            "immich_ml.models.facial_recognition.recognition.update_inputs_outputs_dims", autospec=True
-        )
-        mocker.patch("immich_ml.models.base.InferenceModel.download")
-        mocker.patch("immich_ml.models.facial_recognition.recognition.ArcFaceONNX")
-        mocker.patch(
-            "immich_ml.models.facial_recognition.recognition.ort.get_available_providers",
-            return_value=["MIGraphXExecutionProvider", "CPUExecutionProvider"],
-        )
-        path.return_value.__truediv__.return_value.__truediv__.return_value.suffix = ".onnx"
-
-        inputs = [SimpleNamespace(name="input.1", shape=(1, 3, 224, 224))]
-        outputs = [SimpleNamespace(name="output.1", shape=(1, 800))]
-        ort_session.return_value.get_inputs.return_value = inputs
-        ort_session.return_value.get_outputs.return_value = outputs
-
-        face_recognizer = FaceRecognizer("buffalo_s", cache_dir=path)
-        face_recognizer.load()
-
-        assert face_recognizer.batch_size == 1
-        update_dims.assert_not_called()
-        onnx.load.assert_not_called()
-        onnx.save.assert_not_called()
-
     def test_set_custom_max_batch_size(self, mocker: MockerFixture) -> None:
         mocker.patch.object(settings, "max_batch_size", MaxBatchSize(facial_recognition=2))
 

machine-learning/uv.lock

@@ -1004,7 +1004,7 @@ requires-dist = [
     { name = "fastapi", specifier = ">=0.95.2,<1.0" },
     { name = "gunicorn", specifier = ">=21.1.0" },
     { name = "huggingface-hub", specifier = ">=1.0,<2.0" },
-    { name = "insightface", specifier = ">=0.7.3,<2.0" },
+    { name = "insightface", specifier = ">=0.7.3,<1.0" },
     { name = "numpy", specifier = ">=2.4.0,<3.0" },
     { name = "onnxruntime", marker = "extra == 'armnn'", specifier = ">=1.23.2,<2" },
     { name = "onnxruntime", marker = "extra == 'cpu'", specifier = ">=1.23.2,<2" },

mise.toml

@@ -16,7 +16,7 @@ config_roots = [
 
 [tools]
 node = "24.15.0"
-"aqua:flutter/flutter" = "3.41.9"
+"aqua:flutter/flutter" = "3.44.0"
 pnpm = "10.33.4"
 terragrunt = "1.0.3"
 opentofu = "1.11.6"
@@ -73,6 +73,7 @@ run = "bash ./bin/generate-dart-sdk.sh"
 env = { SHARP_IGNORE_GLOBAL_LIBVIPS = true }
 run = [
   { task = "//:plugins" },
+  { task = "//server:build" },
   { task = "//server:install" },
   { task = "//server:build" },
   { task = "//server:sync-open-api" },

mobile/lib/providers/infrastructure/action.provider.dart

@@ -14,7 +14,6 @@ import 'package:immich_mobile/providers/backup/asset_upload_progress.provider.da
 import 'package:immich_mobile/providers/infrastructure/asset.provider.dart';
 import 'package:immich_mobile/providers/infrastructure/asset_viewer/asset.provider.dart' show assetExifProvider;
 import 'package:immich_mobile/providers/infrastructure/tag.provider.dart';
-import 'package:immich_mobile/providers/server_info.provider.dart';
 import 'package:immich_mobile/providers/timeline/multiselect.provider.dart';
 import 'package:immich_mobile/providers/user.provider.dart';
 import 'package:immich_mobile/providers/websocket.provider.dart';
@@ -22,7 +21,6 @@ import 'package:immich_mobile/routing/router.dart';
 import 'package:immich_mobile/services/action.service.dart';
 import 'package:immich_mobile/services/download.service.dart';
 import 'package:immich_mobile/services/foreground_upload.service.dart';
-import 'package:immich_mobile/utils/semver.dart';
 import 'package:immich_mobile/widgets/asset_grid/delete_dialog.dart';
 import 'package:logging/logging.dart';
 import 'package:openapi/api.dart';
@@ -538,22 +536,14 @@ class ActionNotifier extends Notifier<void> {
       return ActionResult(count: ids.length, success: false, error: 'Expected single asset for applying edits');
     }
 
-    Future<void> editReady;
-    if (ref.read(serverInfoProvider).serverVersion >= const SemVer(major: 3, minor: 0, patch: 0)) {
-      editReady = ref.read(websocketProvider.notifier).waitForEvent("AssetEditReadyV2", (dynamic data) {
-        final eventAsset = SyncAssetV2.fromJson(data["asset"]);
-        return eventAsset?.id == ids.first;
-      }, const Duration(seconds: 10));
-    } else {
-      editReady = ref.read(websocketProvider.notifier).waitForEvent("AssetEditReadyV1", (dynamic data) {
-        final eventAsset = SyncAssetV1.fromJson(data["asset"]);
-        return eventAsset?.id == ids.first;
-      }, const Duration(seconds: 10));
-    }
+    final completer = ref.read(websocketProvider.notifier).waitForEvent("AssetEditReadyV1", (dynamic data) {
+      final eventAsset = SyncAssetV1.fromJson(data["asset"]);
+      return eventAsset?.id == ids.first;
+    }, const Duration(seconds: 10));
 
     try {
       await _service.applyEdits(ids.first, edits);
-      await editReady;
+      await completer;
       return const ActionResult(count: 1, success: true);
     } catch (error, stack) {
       _logger.severe('Failed to apply edits to assets', error, stack);

mobile/lib/widgets/photo_view/src/core/photo_view_core.dart

@@ -139,6 +139,8 @@ class PhotoViewCoreState extends State<PhotoViewCore>
 
   PhotoViewHeroAttributes? get heroAttributes => widget.heroAttributes;
 
+  late ScaleBoundaries cachedScaleBoundaries = widget.scaleBoundaries;
+
   void handleScaleAnimation() {
     scale = _scaleAnimation!.value;
   }
@@ -301,7 +303,7 @@ class PhotoViewCoreState extends State<PhotoViewCore>
     controller.scaleAnimationBuilder(_animateControllerScale);
     controller.rotationAnimationBuilder(_animateControllerRotation);
 
-    _updateScaleBoundaries();
+    cachedScaleBoundaries = widget.scaleBoundaries;
 
     _scaleAnimationController = AnimationController(vsync: this)
       ..addListener(handleScaleAnimation)
@@ -332,29 +334,14 @@ class PhotoViewCoreState extends State<PhotoViewCore>
     widget.onTapDown?.call(context, details, controller.value);
   }
 
-  void _updateScaleBoundaries() {
-    final prev = controller.scaleBoundaries;
-    if (prev == widget.scaleBoundaries) {
-      return;
-    }
-
-    if (prev != null && controller.scale != null && prev.initialScale > 0) {
-      final ratio = widget.scaleBoundaries.initialScale / prev.initialScale;
-      controller.setScaleInvisibly(controller.scale! * ratio);
-    } else {
-      markNeedsScaleRecalc = true;
-    }
-    controller.scaleBoundaries = widget.scaleBoundaries;
-  }
-
-  @override
-  void didUpdateWidget(PhotoViewCore oldWidget) {
-    super.didUpdateWidget(oldWidget);
-    _updateScaleBoundaries();
-  }
-
   @override
   Widget build(BuildContext context) {
+    // Check if we need a recalc on the scale
+    if (widget.scaleBoundaries != cachedScaleBoundaries) {
+      markNeedsScaleRecalc = true;
+      cachedScaleBoundaries = widget.scaleBoundaries;
+    }
+
     return StreamBuilder(
       stream: controller.outputStateStream,
       initialData: controller.prevValue,

mobile/lib/widgets/photo_view/src/photo_view_wrappers.dart

@@ -145,6 +145,7 @@ class _ImageWrapperState extends State<ImageWrapper> {
         _lastStack = null;
 
         _didLoadSynchronously = synchronousCall;
+        widget.controller.scaleBoundaries = scaleBoundaries;
       }
 
       synchronousCall && !_didLoadSynchronously ? setupCB() : setState(setupCB);

mobile/openapi/README.md

@@ -206,7 +206,6 @@ Class | Method | HTTP request | Description
 *PeopleApi* | [**updatePerson**](doc//PeopleApi.md#updateperson) | **PUT** /people/{id} | Update person
 *PluginsApi* | [**getPlugin**](doc//PluginsApi.md#getplugin) | **GET** /plugins/{id} | Retrieve a plugin
 *PluginsApi* | [**searchPluginMethods**](doc//PluginsApi.md#searchpluginmethods) | **GET** /plugins/methods | Retrieve plugin methods
-*PluginsApi* | [**searchPluginTemplates**](doc//PluginsApi.md#searchplugintemplates) | **GET** /plugins/templates | Retrieve workflow templates
 *PluginsApi* | [**searchPlugins**](doc//PluginsApi.md#searchplugins) | **GET** /plugins | List all plugins
 *QueuesApi* | [**emptyQueue**](doc//QueuesApi.md#emptyqueue) | **DELETE** /queues/{name}/jobs | Empty a queue
 *QueuesApi* | [**getQueue**](doc//QueuesApi.md#getqueue) | **GET** /queues/{name} | Retrieve a queue
@@ -492,8 +491,6 @@ Class | Method | HTTP request | Description
  - [PlacesResponseDto](doc//PlacesResponseDto.md)
  - [PluginMethodResponseDto](doc//PluginMethodResponseDto.md)
  - [PluginResponseDto](doc//PluginResponseDto.md)
- - [PluginTemplateResponseDto](doc//PluginTemplateResponseDto.md)
- - [PluginTemplateStepResponseDto](doc//PluginTemplateStepResponseDto.md)
  - [PurchaseResponse](doc//PurchaseResponse.md)
  - [PurchaseUpdate](doc//PurchaseUpdate.md)
  - [QueueCommand](doc//QueueCommand.md)

mobile/openapi/lib/api.dart

@@ -237,8 +237,6 @@ part 'model/pin_code_setup_dto.dart';
 part 'model/places_response_dto.dart';
 part 'model/plugin_method_response_dto.dart';
 part 'model/plugin_response_dto.dart';
-part 'model/plugin_template_response_dto.dart';
-part 'model/plugin_template_step_response_dto.dart';
 part 'model/purchase_response.dart';
 part 'model/purchase_update.dart';
 part 'model/queue_command.dart';

mobile/openapi/lib/api/plugins_api.dart

@@ -204,57 +204,6 @@ class PluginsApi {
     return null;
   }
 
-  /// Retrieve workflow templates
-  ///
-  /// Retrieve workflow templates provided by installed plugins
-  ///
-  /// Note: This method returns the HTTP [Response].
-  Future<Response> searchPluginTemplatesWithHttpInfo() async {
-    // ignore: prefer_const_declarations
-    final apiPath = r'/plugins/templates';
-
-    // ignore: prefer_final_locals
-    Object? postBody;
-
-    final queryParams = <QueryParam>[];
-    final headerParams = <String, String>{};
-    final formParams = <String, String>{};
-
-    const contentTypes = <String>[];
-
-
-    return apiClient.invokeAPI(
-      apiPath,
-      'GET',
-      queryParams,
-      postBody,
-      headerParams,
-      formParams,
-      contentTypes.isEmpty ? null : contentTypes.first,
-    );
-  }
-
-  /// Retrieve workflow templates
-  ///
-  /// Retrieve workflow templates provided by installed plugins
-  Future<List<PluginTemplateResponseDto>?> searchPluginTemplates() async {
-    final response = await searchPluginTemplatesWithHttpInfo();
-    if (response.statusCode >= HttpStatus.badRequest) {
-      throw ApiException(response.statusCode, await _decodeBodyBytes(response));
-    }
-    // When a remote server returns no body with a status of 204, we shall not decode it.
-    // At the time of writing this, `dart:convert` will throw an "Unexpected end of input"
-    // FormatException when trying to decode an empty string.
-    if (response.body.isNotEmpty && response.statusCode != HttpStatus.noContent) {
-      final responseBody = await _decodeBodyBytes(response);
-      return (await apiClient.deserializeAsync(responseBody, 'List<PluginTemplateResponseDto>') as List)
-        .cast<PluginTemplateResponseDto>()
-        .toList(growable: false);
-
-    }
-    return null;
-  }
-
   /// List all plugins
   ///
   /// Retrieve a list of plugins available to the authenticated user.

mobile/openapi/lib/api_client.dart

@@ -520,10 +520,6 @@ class ApiClient {
           return PluginMethodResponseDto.fromJson(value);
         case 'PluginResponseDto':
           return PluginResponseDto.fromJson(value);
-        case 'PluginTemplateResponseDto':
-          return PluginTemplateResponseDto.fromJson(value);
-        case 'PluginTemplateStepResponseDto':
-          return PluginTemplateStepResponseDto.fromJson(value);
         case 'PurchaseResponse':
           return PurchaseResponse.fromJson(value);
         case 'PurchaseUpdate':

mobile/openapi/lib/model/plugin_template_response_dto.dart

@@ -1,135 +0,0 @@
-//
-// AUTO-GENERATED FILE, DO NOT MODIFY!
-//
-// @dart=2.18
-
-// ignore_for_file: unused_element, unused_import
-// ignore_for_file: always_put_required_named_parameters_first
-// ignore_for_file: constant_identifier_names
-// ignore_for_file: lines_longer_than_80_chars
-
-part of openapi.api;
-
-class PluginTemplateResponseDto {
-  /// Returns a new [PluginTemplateResponseDto] instance.
-  PluginTemplateResponseDto({
-    required this.description,
-    required this.key,
-    this.steps = const [],
-    required this.title,
-    required this.trigger,
-  });
-
-  /// Template description
-  String description;
-
-  /// Template key (unique across all templates)
-  String key;
-
-  /// Workflow steps
-  List<PluginTemplateStepResponseDto> steps;
-
-  /// Template title
-  String title;
-
-  WorkflowTrigger trigger;
-
-  @override
-  bool operator ==(Object other) => identical(this, other) || other is PluginTemplateResponseDto &&
-    other.description == description &&
-    other.key == key &&
-    _deepEquality.equals(other.steps, steps) &&
-    other.title == title &&
-    other.trigger == trigger;
-
-  @override
-  int get hashCode =>
-    // ignore: unnecessary_parenthesis
-    (description.hashCode) +
-    (key.hashCode) +
-    (steps.hashCode) +
-    (title.hashCode) +
-    (trigger.hashCode);
-
-  @override
-  String toString() => 'PluginTemplateResponseDto[description=$description, key=$key, steps=$steps, title=$title, trigger=$trigger]';
-
-  Map<String, dynamic> toJson() {
-    final json = <String, dynamic>{};
-      json[r'description'] = this.description;
-      json[r'key'] = this.key;
-      json[r'steps'] = this.steps;
-      json[r'title'] = this.title;
-      json[r'trigger'] = this.trigger;
-    return json;
-  }
-
-  /// Returns a new [PluginTemplateResponseDto] instance and imports its values from
-  /// [value] if it's a [Map], null otherwise.
-  // ignore: prefer_constructors_over_static_methods
-  static PluginTemplateResponseDto? fromJson(dynamic value) {
-    upgradeDto(value, "PluginTemplateResponseDto");
-    if (value is Map) {
-      final json = value.cast<String, dynamic>();
-
-      return PluginTemplateResponseDto(
-        description: mapValueOfType<String>(json, r'description')!,
-        key: mapValueOfType<String>(json, r'key')!,
-        steps: PluginTemplateStepResponseDto.listFromJson(json[r'steps']),
-        title: mapValueOfType<String>(json, r'title')!,
-        trigger: WorkflowTrigger.fromJson(json[r'trigger'])!,
-      );
-    }
-    return null;
-  }
-
-  static List<PluginTemplateResponseDto> listFromJson(dynamic json, {bool growable = false,}) {
-    final result = <PluginTemplateResponseDto>[];
-    if (json is List && json.isNotEmpty) {
-      for (final row in json) {
-        final value = PluginTemplateResponseDto.fromJson(row);
-        if (value != null) {
-          result.add(value);
-        }
-      }
-    }
-    return result.toList(growable: growable);
-  }
-
-  static Map<String, PluginTemplateResponseDto> mapFromJson(dynamic json) {
-    final map = <String, PluginTemplateResponseDto>{};
-    if (json is Map && json.isNotEmpty) {
-      json = json.cast<String, dynamic>(); // ignore: parameter_assignments
-      for (final entry in json.entries) {
-        final value = PluginTemplateResponseDto.fromJson(entry.value);
-        if (value != null) {
-          map[entry.key] = value;
-        }
-      }
-    }
-    return map;
-  }
-
-  // maps a json object with a list of PluginTemplateResponseDto-objects as value to a dart map
-  static Map<String, List<PluginTemplateResponseDto>> mapListFromJson(dynamic json, {bool growable = false,}) {
-    final map = <String, List<PluginTemplateResponseDto>>{};
-    if (json is Map && json.isNotEmpty) {
-      // ignore: parameter_assignments
-      json = json.cast<String, dynamic>();
-      for (final entry in json.entries) {
-        map[entry.key] = PluginTemplateResponseDto.listFromJson(entry.value, growable: growable,);
-      }
-    }
-    return map;
-  }
-
-  /// The list of required keys that must be present in a JSON.
-  static const requiredKeys = <String>{
-    'description',
-    'key',
-    'steps',
-    'title',
-    'trigger',
-  };
-}
-

mobile/openapi/lib/model/plugin_template_step_response_dto.dart

@@ -1,131 +0,0 @@
-//
-// AUTO-GENERATED FILE, DO NOT MODIFY!
-//
-// @dart=2.18
-
-// ignore_for_file: unused_element, unused_import
-// ignore_for_file: always_put_required_named_parameters_first
-// ignore_for_file: constant_identifier_names
-// ignore_for_file: lines_longer_than_80_chars
-
-part of openapi.api;
-
-class PluginTemplateStepResponseDto {
-  /// Returns a new [PluginTemplateStepResponseDto] instance.
-  PluginTemplateStepResponseDto({
-    this.config = const {},
-    this.enabled,
-    required this.method,
-  });
-
-  /// Step configuration
-  Map<String, Object>? config;
-
-  /// Whether the step is enabled
-  ///
-  /// Please note: This property should have been non-nullable! Since the specification file
-  /// does not include a default value (using the "default:" property), however, the generated
-  /// source code must fall back to having a nullable type.
-  /// Consider adding a "default:" property in the specification file to hide this note.
-  ///
-  bool? enabled;
-
-  /// Step plugin method
-  String method;
-
-  @override
-  bool operator ==(Object other) => identical(this, other) || other is PluginTemplateStepResponseDto &&
-    _deepEquality.equals(other.config, config) &&
-    other.enabled == enabled &&
-    other.method == method;
-
-  @override
-  int get hashCode =>
-    // ignore: unnecessary_parenthesis
-    (config == null ? 0 : config!.hashCode) +
-    (enabled == null ? 0 : enabled!.hashCode) +
-    (method.hashCode);
-
-  @override
-  String toString() => 'PluginTemplateStepResponseDto[config=$config, enabled=$enabled, method=$method]';
-
-  Map<String, dynamic> toJson() {
-    final json = <String, dynamic>{};
-    if (this.config != null) {
-      json[r'config'] = this.config;
-    } else {
-    //  json[r'config'] = null;
-    }
-    if (this.enabled != null) {
-      json[r'enabled'] = this.enabled;
-    } else {
-    //  json[r'enabled'] = null;
-    }
-      json[r'method'] = this.method;
-    return json;
-  }
-
-  /// Returns a new [PluginTemplateStepResponseDto] instance and imports its values from
-  /// [value] if it's a [Map], null otherwise.
-  // ignore: prefer_constructors_over_static_methods
-  static PluginTemplateStepResponseDto? fromJson(dynamic value) {
-    upgradeDto(value, "PluginTemplateStepResponseDto");
-    if (value is Map) {
-      final json = value.cast<String, dynamic>();
-
-      return PluginTemplateStepResponseDto(
-        config: mapCastOfType<String, Object>(json, r'config'),
-        enabled: mapValueOfType<bool>(json, r'enabled'),
-        method: mapValueOfType<String>(json, r'method')!,
-      );
-    }
-    return null;
-  }
-
-  static List<PluginTemplateStepResponseDto> listFromJson(dynamic json, {bool growable = false,}) {
-    final result = <PluginTemplateStepResponseDto>[];
-    if (json is List && json.isNotEmpty) {
-      for (final row in json) {
-        final value = PluginTemplateStepResponseDto.fromJson(row);
-        if (value != null) {
-          result.add(value);
-        }
-      }
-    }
-    return result.toList(growable: growable);
-  }
-
-  static Map<String, PluginTemplateStepResponseDto> mapFromJson(dynamic json) {
-    final map = <String, PluginTemplateStepResponseDto>{};
-    if (json is Map && json.isNotEmpty) {
-      json = json.cast<String, dynamic>(); // ignore: parameter_assignments
-      for (final entry in json.entries) {
-        final value = PluginTemplateStepResponseDto.fromJson(entry.value);
-        if (value != null) {
-          map[entry.key] = value;
-        }
-      }
-    }
-    return map;
-  }
-
-  // maps a json object with a list of PluginTemplateStepResponseDto-objects as value to a dart map
-  static Map<String, List<PluginTemplateStepResponseDto>> mapListFromJson(dynamic json, {bool growable = false,}) {
-    final map = <String, List<PluginTemplateStepResponseDto>>{};
-    if (json is Map && json.isNotEmpty) {
-      // ignore: parameter_assignments
-      json = json.cast<String, dynamic>();
-      for (final entry in json.entries) {
-        map[entry.key] = PluginTemplateStepResponseDto.listFromJson(entry.value, growable: growable,);
-      }
-    }
-    return map;
-  }
-
-  /// The list of required keys that must be present in a JSON.
-  static const requiredKeys = <String>{
-    'config',
-    'method',
-  };
-}
-

open-api/immich-openapi-specs.json

@@ -8818,50 +8818,6 @@
         "x-immich-permission": "plugin.read"
       }
     },
-    "/plugins/templates": {
-      "get": {
-        "description": "Retrieve workflow templates provided by installed plugins",
-        "operationId": "searchPluginTemplates",
-        "parameters": [],
-        "responses": {
-          "200": {
-            "content": {
-              "application/json": {
-                "schema": {
-                  "items": {
-                    "$ref": "#/components/schemas/PluginTemplateResponseDto"
-                  },
-                  "type": "array"
-                }
-              }
-            },
-            "description": ""
-          }
-        },
-        "security": [
-          {
-            "bearer": []
-          },
-          {
-            "cookie": []
-          },
-          {
-            "api_key": []
-          }
-        ],
-        "summary": "Retrieve workflow templates",
-        "tags": [
-          "Plugins"
-        ],
-        "x-immich-history": [
-          {
-            "version": "v3.0.0",
-            "state": "Added"
-          }
-        ],
-        "x-immich-permission": "plugin.read"
-      }
-    },
     "/plugins/{id}": {
       "get": {
         "description": "Retrieve information about a specific plugin by its ID.",
@@ -20175,64 +20131,6 @@
         ],
         "type": "object"
       },
-      "PluginTemplateResponseDto": {
-        "properties": {
-          "description": {
-            "description": "Template description",
-            "type": "string"
-          },
-          "key": {
-            "description": "Template key (unique across all templates)",
-            "type": "string"
-          },
-          "steps": {
-            "description": "Workflow steps",
-            "items": {
-              "$ref": "#/components/schemas/PluginTemplateStepResponseDto"
-            },
-            "type": "array"
-          },
-          "title": {
-            "description": "Template title",
-            "type": "string"
-          },
-          "trigger": {
-            "$ref": "#/components/schemas/WorkflowTrigger",
-            "description": "Workflow trigger"
-          }
-        },
-        "required": [
-          "description",
-          "key",
-          "steps",
-          "title",
-          "trigger"
-        ],
-        "type": "object"
-      },
-      "PluginTemplateStepResponseDto": {
-        "properties": {
-          "config": {
-            "additionalProperties": {},
-            "description": "Step configuration",
-            "nullable": true,
-            "type": "object"
-          },
-          "enabled": {
-            "description": "Whether the step is enabled",
-            "type": "boolean"
-          },
-          "method": {
-            "description": "Step plugin method",
-            "type": "string"
-          }
-        },
-        "required": [
-          "config",
-          "method"
-        ],
-        "type": "object"
-      },
       "PurchaseResponse": {
         "properties": {
           "hideBuyButtonUntil": {
@@ -20895,14 +20793,7 @@
             "description": "Total number of matching assets",
             "maximum": 9007199254740991,
             "minimum": 0,
-            "type": "integer",
-            "x-immich-history": [
-              {
-                "version": "v3.0.0",
-                "state": "Deprecated"
-              }
-            ],
-            "x-immich-state": "Deprecated"
+            "type": "integer"
           }
         },
         "required": [

packages/plugin-core/manifest.json

@@ -5,36 +5,6 @@
   "description": "Core workflow capabilities for Immich",
   "author": "Immich Team",
   "wasmPath": "dist/plugin.wasm",
-  "templates": [
-    {
-      "name": "auto-archive-screenshots",
-      "title": "Auto-archive screenshots",
-      "description": "Archive uploads with \"screenshot\" in the filename and optionally add them to an album",
-      "trigger": "AssetCreate",
-      "steps": [
-        {
-          "method": "immich-plugin-core#assetFileFilter",
-          "config": {
-            "pattern": "screenshot",
-            "matchType": "contains",
-            "caseSensitive": false
-          }
-        },
-        {
-          "method": "immich-plugin-core#assetAddToAlbums",
-          "config": {
-            "albumIds": []
-          }
-        },
-        {
-          "method": "immich-plugin-core#assetArchive",
-          "config": {
-            "inverse": false
-          }
-        }
-      ]
-    }
-  ],
   "methods": [
     {
       "name": "assetFileFilter",

packages/plugin-core/src/index.ts

@@ -100,11 +100,6 @@ export const assetTrash = () => {
 
 export const assetAddToAlbums = () => {
   return wrapper<WorkflowType.AssetV1, { albumIds: string[] }>(({ config, data, functions }) => {
-    if (config.albumIds.length === 0) {
-      // noop
-      return {};
-    }
-
     if (config.albumIds.length === 1) {
       functions.albumAddAssets(config.albumIds[0], [data.asset.id]);
       return {};

packages/sdk/src/fetch-client.ts

@@ -1514,28 +1514,6 @@ export type PluginResponseDto = {
     /** Plugin version */
     version: string;
 };
-export type PluginTemplateStepResponseDto = {
-    /** Step configuration */
-    config: {
-        [key: string]: any;
-    } | null;
-    /** Whether the step is enabled */
-    enabled?: boolean;
-    /** Step plugin method */
-    method: string;
-};
-export type PluginTemplateResponseDto = {
-    /** Template description */
-    description: string;
-    /** Template key (unique across all templates) */
-    key: string;
-    /** Workflow steps */
-    steps: PluginTemplateStepResponseDto[];
-    /** Template title */
-    title: string;
-    /** Workflow trigger */
-    trigger: WorkflowTrigger;
-};
 export type QueueResponseDto = {
     /** Whether the queue is paused */
     isPaused: boolean;
@@ -5264,17 +5242,6 @@ export function searchPluginMethods({ description, enabled, id, name, pluginName
         ...opts
     }));
 }
-/**
- * Retrieve workflow templates
- */
-export function searchPluginTemplates(opts?: Oazapfts.RequestOpts) {
-    return oazapfts.ok(oazapfts.fetchJson<{
-        status: 200;
-        data: PluginTemplateResponseDto[];
-    }>("/plugins/templates", {
-        ...opts
-    }));
-}
 /**
  * Retrieve a plugin
  */

pnpm-lock.yaml

@@ -758,8 +758,8 @@ importers:
         specifier: workspace:*
         version: link:../packages/sdk
       '@immich/ui':
-        specifier: ^0.79.0
-        version: 0.79.0(@sveltejs/kit@2.60.1(@opentelemetry/api@1.9.1)(@sveltejs/vite-plugin-svelte@7.1.2(svelte@5.55.8(@typescript-eslint/types@8.59.4))(vite@8.0.13(@types/node@24.12.4)(esbuild@0.28.0)(jiti@2.7.0)(sass@1.99.0)(terser@5.47.1)(tsx@4.22.3)(yaml@2.9.0)))(svelte@5.55.8(@typescript-eslint/types@8.59.4))(typescript@6.0.3)(vite@8.0.13(@types/node@24.12.4)(esbuild@0.28.0)(jiti@2.7.0)(sass@1.99.0)(terser@5.47.1)(tsx@4.22.3)(yaml@2.9.0)))(svelte@5.55.8(@typescript-eslint/types@8.59.4))
+        specifier: ^0.77.0
+        version: 0.77.3(@sveltejs/kit@2.60.1(@opentelemetry/api@1.9.1)(@sveltejs/vite-plugin-svelte@7.1.2(svelte@5.55.8(@typescript-eslint/types@8.59.4))(vite@8.0.13(@types/node@24.12.4)(esbuild@0.28.0)(jiti@2.7.0)(sass@1.99.0)(terser@5.47.1)(tsx@4.22.3)(yaml@2.9.0)))(svelte@5.55.8(@typescript-eslint/types@8.59.4))(typescript@6.0.3)(vite@8.0.13(@types/node@24.12.4)(esbuild@0.28.0)(jiti@2.7.0)(sass@1.99.0)(terser@5.47.1)(tsx@4.22.3)(yaml@2.9.0)))(svelte@5.55.8(@typescript-eslint/types@8.59.4))
       '@mapbox/mapbox-gl-rtl-text':
         specifier: 0.4.0
         version: 0.4.0
@@ -3204,8 +3204,8 @@ packages:
     resolution: {integrity: sha512-O1SJ+BbeFVsUTF4af1MfagJZM+lPgLjI8lQ3SZNjpo8SGJReSbUl2ii03OKuGni/G0yp2GnRLpOTNSHYGtVrcg==}
     hasBin: true
 
-  '@immich/ui@0.79.0':
-    resolution: {integrity: sha512-UEQZrP8CTc4Kth1xCV8/6Xmk1P51GQKISC7vKqcrM0BO0fxCaNwJK8Ocn6R8baVqH52JYfPb1yQR9bweBnCjXw==}
+  '@immich/ui@0.77.3':
+    resolution: {integrity: sha512-h3jrYE3JyGDOwXF7A4tVUHenP0L7TsDV22FyFInBTdwlWjjXoknwE1HWeTvvLxLeMuO5SHCZ9Q2D2al84xVjNw==}
     peerDependencies:
       '@sveltejs/kit': ^2.13.0
       svelte: ^5.0.0
@@ -15879,7 +15879,7 @@ snapshots:
       pg-connection-string: 2.13.0
       postgres: 3.4.9
 
-  '@immich/ui@0.79.0(@sveltejs/kit@2.60.1(@opentelemetry/api@1.9.1)(@sveltejs/vite-plugin-svelte@7.1.2(svelte@5.55.8(@typescript-eslint/types@8.59.4))(vite@8.0.13(@types/node@24.12.4)(esbuild@0.28.0)(jiti@2.7.0)(sass@1.99.0)(terser@5.47.1)(tsx@4.22.3)(yaml@2.9.0)))(svelte@5.55.8(@typescript-eslint/types@8.59.4))(typescript@6.0.3)(vite@8.0.13(@types/node@24.12.4)(esbuild@0.28.0)(jiti@2.7.0)(sass@1.99.0)(terser@5.47.1)(tsx@4.22.3)(yaml@2.9.0)))(svelte@5.55.8(@typescript-eslint/types@8.59.4))':
+  '@immich/ui@0.77.3(@sveltejs/kit@2.60.1(@opentelemetry/api@1.9.1)(@sveltejs/vite-plugin-svelte@7.1.2(svelte@5.55.8(@typescript-eslint/types@8.59.4))(vite@8.0.13(@types/node@24.12.4)(esbuild@0.28.0)(jiti@2.7.0)(sass@1.99.0)(terser@5.47.1)(tsx@4.22.3)(yaml@2.9.0)))(svelte@5.55.8(@typescript-eslint/types@8.59.4))(typescript@6.0.3)(vite@8.0.13(@types/node@24.12.4)(esbuild@0.28.0)(jiti@2.7.0)(sass@1.99.0)(terser@5.47.1)(tsx@4.22.3)(yaml@2.9.0)))(svelte@5.55.8(@typescript-eslint/types@8.59.4))':
     dependencies:
       '@internationalized/date': 3.12.1
       '@mdi/js': 7.4.47

server/src/controllers/plugin.controller.ts

@@ -6,7 +6,6 @@ import {
   PluginMethodSearchDto,
   PluginResponseDto,
   PluginSearchDto,
-  PluginTemplateResponseDto,
 } from 'src/dtos/plugin.dto';
 import { Permission } from 'src/enum';
 import { Authenticated } from 'src/middleware/auth.guard';
@@ -40,17 +39,6 @@ export class PluginController {
     return this.service.searchMethods(dto);
   }
 
-  @Get('templates')
-  @Authenticated({ permission: Permission.PluginRead })
-  @Endpoint({
-    summary: 'Retrieve workflow templates',
-    description: 'Retrieve workflow templates provided by installed plugins',
-    history: HistoryBuilder.v3(),
-  })
-  searchPluginTemplates(): Promise<PluginTemplateResponseDto[]> {
-    return this.service.searchTemplates();
-  }
-
   @Get(':id')
   @Authenticated({ permission: Permission.PluginRead })
   @Endpoint({

server/src/dtos/plugin-manifest.dto.ts

@@ -1,6 +1,6 @@
 import { createZodDto } from 'nestjs-zod';
 import { JsonSchemaSchema } from 'src/dtos/json-schema.dto';
-import { WorkflowTriggerSchema, WorkflowTypeSchema } from 'src/enum';
+import { WorkflowTypeSchema } from 'src/enum';
 import z from 'zod';
 
 const pluginNameRegex = /^[a-z0-9-]+[a-z0-9]$/;
@@ -23,24 +23,6 @@ const PluginManifestMethodSchema = z
   })
   .meta({ id: 'PluginManifestMethodDto' });
 
-const PluginManifestTemplateStepSchema = z
-  .object({
-    method: z.string().min(1).describe('Step plugin method (pluginName#methodName)'),
-    config: z.record(z.string(), z.unknown()).nullable().optional().describe('Step configuration'),
-    enabled: z.boolean().optional().describe('Whether the step is enabled'),
-  })
-  .meta({ id: 'PluginManifestTemplateStepDto' });
-
-const PluginManifestTemplateSchema = z
-  .object({
-    name: z.string().min(1).describe('Template name (must be unique within the manifest)'),
-    title: z.string().min(1).describe('Template title'),
-    description: z.string().min(1).describe('Template description'),
-    trigger: WorkflowTriggerSchema.describe('Workflow trigger'),
-    steps: z.array(PluginManifestTemplateStepSchema).describe('Workflow steps'),
-  })
-  .meta({ id: 'PluginManifestTemplateDto' });
-
 const PluginManifestSchema = z
   .object({
     name: z
@@ -57,14 +39,6 @@ const PluginManifestSchema = z
     wasmPath: z.string().min(1).describe('WASM file path'),
     author: z.string().min(1).describe('Plugin author'),
     methods: z.array(PluginManifestMethodSchema).optional().default([]).describe('Plugin methods'),
-    templates: z
-      .array(PluginManifestTemplateSchema)
-      .optional()
-      .default([])
-      .refine((templates) => new Set(templates.map((t) => t.name)).size === templates.length, {
-        error: 'Template names must be unique within the manifest',
-      })
-      .describe('Workflow templates'),
   })
   .meta({ id: 'PluginManifestDto' });
 

server/src/dtos/plugin.dto.ts

@@ -1,7 +1,7 @@
 import { createZodDto } from 'nestjs-zod';
 import { JsonSchemaDto } from 'src/dtos/json-schema.dto';
-import { WorkflowTrigger, WorkflowTriggerSchema, WorkflowType, WorkflowTypeSchema } from 'src/enum';
-import { asPluginKey } from 'src/utils/workflow';
+import { WorkflowTriggerSchema, WorkflowType, WorkflowTypeSchema } from 'src/enum';
+import { asMethodString } from 'src/utils/workflow';
 import z from 'zod';
 
 const PluginSearchSchema = z
@@ -43,24 +43,6 @@ const PluginResponseSchema = z
   })
   .meta({ id: 'PluginResponseDto' });
 
-const PluginTemplateStepResponseSchema = z
-  .object({
-    method: z.string().describe('Step plugin method'),
-    config: z.record(z.string(), z.unknown()).nullable().describe('Step configuration'),
-    enabled: z.boolean().optional().describe('Whether the step is enabled'),
-  })
-  .meta({ id: 'PluginTemplateStepResponseDto' });
-
-const PluginTemplateResponseSchema = z
-  .object({
-    key: z.string().describe('Template key (unique across all templates)'),
-    title: z.string().describe('Template title'),
-    description: z.string().describe('Template description'),
-    trigger: WorkflowTriggerSchema.describe('Workflow trigger'),
-    steps: z.array(PluginTemplateStepResponseSchema).describe('Workflow steps'),
-  })
-  .meta({ id: 'PluginTemplateResponseDto' });
-
 const PluginMethodSearchSchema = z
   .object({
     id: z.uuidv4().optional().describe('Plugin method ID'),
@@ -79,33 +61,6 @@ export class PluginSearchDto extends createZodDto(PluginSearchSchema) {}
 export class PluginResponseDto extends createZodDto(PluginResponseSchema) {}
 export class PluginMethodSearchDto extends createZodDto(PluginMethodSearchSchema) {}
 export class PluginMethodResponseDto extends createZodDto(PluginMethodResponseSchema) {}
-export class PluginTemplateResponseDto extends createZodDto(PluginTemplateResponseSchema) {}
-
-export type PluginTemplate = {
-  name: string;
-  title: string;
-  description: string;
-  trigger: WorkflowTrigger;
-  steps: Array<{
-    method: string;
-    config?: Record<string, unknown> | null;
-    enabled?: boolean;
-  }>;
-};
-
-export const mapTemplate = (plugin: { name: string }, template: PluginTemplate): PluginTemplateResponseDto => {
-  return {
-    key: asPluginKey({ pluginName: plugin.name, name: template.name }),
-    title: template.title,
-    description: template.description,
-    trigger: template.trigger,
-    steps: template.steps.map((step) => ({
-      method: step.method,
-      config: step.config ?? null,
-      enabled: step.enabled,
-    })),
-  };
-};
 
 type Plugin = {
   id: string;
@@ -146,7 +101,7 @@ export function mapPlugin(plugin: Plugin): PluginResponseDto {
 
 export const mapMethod = (method: PluginMethod): PluginMethodResponseDto => {
   return {
-    key: asPluginKey({ pluginName: method.pluginName, name: method.name }),
+    key: asMethodString({ pluginName: method.pluginName, methodName: method.name }),
     name: method.name,
     title: method.title,
     hostFunctions: method.hostFunctions,

server/src/dtos/search.dto.ts

@@ -186,11 +186,7 @@ const SearchAlbumResponseSchema = z
 
 const SearchAssetResponseSchema = z
   .object({
-    total: z
-      .int()
-      .min(0)
-      .describe('Total number of matching assets')
-      .meta(new HistoryBuilder().deprecated('v3.0.0').getExtensions()),
+    total: z.int().min(0).describe('Total number of matching assets'),
     count: z.int().min(0).describe('Number of assets in this page'),
     items: z.array(AssetResponseSchema),
     facets: z.array(SearchFacetResponseSchema),

server/src/queries/plugin.repository.sql

@@ -35,7 +35,6 @@ select
   "plugin"."version",
   "plugin"."createdAt",
   "plugin"."updatedAt",
-  "plugin"."templates",
   (
     select
       coalesce(json_agg(agg), '[]')
@@ -61,42 +60,6 @@ from
 order by
   "plugin"."name"
 
--- PluginRepository.getByHash
-select
-  "plugin"."id",
-  "plugin"."name",
-  "plugin"."title",
-  "plugin"."description",
-  "plugin"."author",
-  "plugin"."version",
-  "plugin"."createdAt",
-  "plugin"."updatedAt",
-  "plugin"."templates",
-  (
-    select
-      coalesce(json_agg(agg), '[]')
-    from
-      (
-        select
-          "plugin_method"."name",
-          "plugin_method"."title",
-          "plugin_method"."description",
-          "plugin_method"."types",
-          "plugin_method"."schema",
-          "plugin_method"."hostFunctions",
-          "plugin_method"."uiHints",
-          "plugin"."name" as "pluginName"
-        from
-          "plugin_method"
-        where
-          "plugin_method"."pluginId" = "plugin"."id"
-      ) as agg
-  ) as "methods"
-from
-  "plugin"
-where
-  "plugin"."sha256hash" = $1
-
 -- PluginRepository.getByName
 select
   "plugin"."id",
@@ -107,7 +70,6 @@ select
   "plugin"."version",
   "plugin"."createdAt",
   "plugin"."updatedAt",
-  "plugin"."templates",
   (
     select
       coalesce(json_agg(agg), '[]')
@@ -143,7 +105,6 @@ select
   "plugin"."version",
   "plugin"."createdAt",
   "plugin"."updatedAt",
-  "plugin"."templates",
   (
     select
       coalesce(json_agg(agg), '[]')

server/src/repositories/database.repository.ts

@@ -274,7 +274,6 @@ export class DatabaseRepository {
       columns: { ignoreExtra: true },
       functions: { ignoreExtra: false },
       parameters: { ignoreExtra: true },
-      extensions: { ignoreExtra: true },
     });
 
     return drift;

server/src/repositories/plugin.repository.ts

@@ -81,7 +81,6 @@ export class PluginRepository {
       'plugin.version',
       'plugin.createdAt',
       'plugin.updatedAt',
-      'plugin.templates',
       jsonArrayFrom(
         eb
           .selectFrom('plugin_method')
@@ -103,11 +102,6 @@ export class PluginRepository {
       .execute();
   }
 
-  @GenerateSql({ params: [DummyValue.STRING] })
-  getByHash(hash: Buffer) {
-    return this.queryBuilder().where('plugin.sha256hash', '=', hash).executeTakeFirst();
-  }
-
   @GenerateSql({ params: [DummyValue.STRING] })
   getByName(name: string) {
     return this.queryBuilder().where('plugin.name', '=', name).executeTakeFirst();
@@ -157,8 +151,6 @@ export class PluginRepository {
             author: eb.ref('excluded.author'),
             version: eb.ref('excluded.version'),
             wasmBytes: eb.ref('excluded.wasmBytes'),
-            templates: eb.ref('excluded.templates'),
-            sha256hash: eb.ref('excluded.sha256hash'),
           })),
         )
         .returning(['id', 'name'])

server/src/repositories/workflow.repository.ts

@@ -47,7 +47,6 @@ export class WorkflowRepository {
   @GenerateSql({ params: [DummyValue.UUID] })
   search(dto: WorkflowSearchDto & { ownerId?: string }) {
     return this.queryBuilder()
-      .$if(!!dto.id, (qb) => qb.where('id', '=', dto.id!))
       .$if(!!dto.ownerId, (qb) => qb.where('ownerId', '=', dto.ownerId!))
       .$if(!!dto.trigger, (qb) => qb.where('trigger', '=', dto.trigger!))
       .$if(dto.enabled !== undefined, (qb) => qb.where('enabled', '=', dto.enabled!))

server/src/schema/migrations/1779806699547-AddPluginTemplates.ts

@@ -1,13 +0,0 @@
-import { Kysely, sql } from 'kysely';
-
-export async function up(db: Kysely<any>): Promise<void> {
-  await sql`ALTER TABLE "plugin" ADD "templates" jsonb NOT NULL DEFAULT '[]';`.execute(db);
-  await sql`ALTER TABLE "plugin" ADD "sha256hash" bytea NOT NULL DEFAULT decode('20464b37ad726d03d878d38d873c40a52d1fdfb754feda956ebb464afd689e2f', 'hex');`.execute(db);
-  await sql`ALTER TABLE "plugin" ALTER COLUMN "sha256hash" DROP DEFAULT;`.execute(db);
-  await sql`ALTER TABLE "plugin" ALTER COLUMN "templates" DROP DEFAULT;`.execute(db);
-}
-
-export async function down(db: Kysely<any>): Promise<void> {
-  await sql`ALTER TABLE "plugin" DROP COLUMN "templates";`.execute(db);
-  await sql`ALTER TABLE "plugin" DROP COLUMN "sha256hash";`.execute(db);
-}

server/src/schema/tables/plugin.table.ts

@@ -8,7 +8,6 @@ import {
   Unique,
   UpdateDateColumn,
 } from '@immich/sql-tools';
-import { PluginTemplate } from 'src/dtos/plugin.dto';
 
 @Unique({ columns: ['name', 'version'] })
 @Table('plugin')
@@ -37,12 +36,6 @@ export class PluginTable {
   @Column({ type: 'bytea' })
   wasmBytes!: Buffer;
 
-  @Column({ type: 'jsonb' })
-  templates!: PluginTemplate[];
-
-  @Column({ type: 'bytea' })
-  sha256hash!: Buffer;
-
   @CreateDateColumn()
   createdAt!: Generated<Timestamp>;
 

server/src/services/plugin.service.ts

@@ -2,12 +2,10 @@ import { BadRequestException, Injectable } from '@nestjs/common';
 import {
   mapMethod,
   mapPlugin,
-  mapTemplate,
   PluginMethodResponseDto,
   PluginMethodSearchDto,
   PluginResponseDto,
   PluginSearchDto,
-  PluginTemplateResponseDto,
 } from 'src/dtos/plugin.dto';
 import { BaseService } from 'src/services/base.service';
 import { isMethodCompatible } from 'src/utils/workflow';
@@ -33,9 +31,4 @@ export class PluginService extends BaseService {
       .filter((method) => !dto.trigger || isMethodCompatible(method, dto.trigger))
       .map((method) => mapMethod(method));
   }
-
-  async searchTemplates(): Promise<PluginTemplateResponseDto[]> {
-    const plugins = await this.pluginRepository.search();
-    return plugins.flatMap((plugin) => plugin.templates.map((template) => mapTemplate(plugin, template)));
-  }
 }

server/src/services/workflow-execution.service.ts

@@ -11,7 +11,6 @@ import { PluginManifestDto } from 'src/dtos/plugin-manifest.dto';
 import {
   BootstrapEventPriority,
   DatabaseLock,
-  ImmichEnvironment,
   ImmichWorker,
   JobName,
   JobStatus,
@@ -44,8 +43,8 @@ export class WorkflowExecutionService extends BaseService {
       // TODO avoid importing plugins in each worker
       // Can this use system metadata similar to geocoding?
 
-      const { environment, resourcePaths, plugins } = this.configRepository.getEnv();
-      await this.importFolder(resourcePaths.corePlugin, { force: environment === ImmichEnvironment.Development });
+      const { resourcePaths, plugins } = this.configRepository.getEnv();
+      await this.importFolder(resourcePaths.corePlugin, { force: true });
 
       if (plugins.external.allow && plugins.external.installFolder) {
         await this.importFolders(plugins.external.installFolder);
@@ -167,19 +166,7 @@ export class WorkflowExecutionService extends BaseService {
   private async importFolder(folder: string, options?: { force?: boolean }) {
     try {
       const manifestPath = join(folder, 'manifest.json');
-      const bytes = await this.storageRepository.readFile(manifestPath);
-      const contents = bytes.toString('utf8');
-      const sha256hash = this.cryptoRepository.hashSha256(contents) as Buffer;
-
-      if (!options?.force) {
-        const match = await this.pluginRepository.getByHash(sha256hash);
-        if (match) {
-          this.logger.log(`Plugin up to date (name=${match.name}@${match.version}, hash=${sha256hash.toString('hex')}`);
-          return;
-        }
-      }
-
-      const dto = JSON.parse(contents);
+      const dto = await this.storageRepository.readJsonFile(manifestPath);
       const result = PluginManifestDto.schema.safeParse(dto);
       if (!result.success) {
         const issues = result.error.issues.map((issue) => `  - [${issue.path.join('.')}] ${issue.message}`).join('\n');
@@ -189,21 +176,22 @@ export class WorkflowExecutionService extends BaseService {
       const manifest = result.data;
 
       const existing = await this.pluginRepository.getByName(manifest.name);
+      if (existing && existing.version === manifest.version && options?.force !== true) {
+        return;
+      }
+
       const wasmPath = `${folder}/${manifest.wasmPath}`;
       const wasmBytes = await this.storageRepository.readFile(wasmPath);
 
       const plugin = await this.pluginRepository.upsert(
         {
-          // NOTE: new properties here need to be added to the on conflict clause in the repository
           enabled: true,
           name: manifest.name,
           title: manifest.title,
           description: manifest.description,
           author: manifest.author,
           version: manifest.version,
-          templates: manifest.templates,
           wasmBytes,
-          sha256hash,
         },
         manifest.methods,
       );

server/src/utils/workflow.ts

@@ -50,8 +50,8 @@ export const resolveMethod = (methods: PluginMethodSearchResponse[], method: str
   return methods.find((method) => method.pluginName === pluginName && method.name === methodName);
 };
 
-export const asPluginKey = (method: { pluginName: string; name: string }) => {
-  return `${method.pluginName}#${method.name}`;
+export const asMethodString = (method: { pluginName: string; methodName: string }) => {
+  return `${method.pluginName}#${method.methodName}`;
 };
 
 const METHOD_REGEX = /^(?<name>[^@#\s]+)(?:@(?<version>[^#\s]*))?#(?<method>[^@#\s]+)$/;

server/test/medium/specs/services/plugin.service.spec.ts

@@ -11,7 +11,6 @@ import { getKyselyDB } from 'test/utils';
 let defaultDatabase: Kysely<DB>;
 
 const wasmBytes = Buffer.from('some-wasm-binary-data');
-const sha256hash = Buffer.from('some-manifest-hash');
 
 const setup = (db?: Kysely<DB>) => {
   return newMediumService(PluginService, {
@@ -47,9 +46,7 @@ describe(PluginService.name, () => {
           description: 'A test plugin',
           author: 'Test Author',
           version: '1.0.0',
-          templates: [],
           wasmBytes,
-          sha256hash,
         },
         [],
       );
@@ -78,9 +75,7 @@ describe(PluginService.name, () => {
           description: 'A plugin with multiple methods',
           author: 'Test Author',
           version: '1.0.0',
-          templates: [],
           wasmBytes,
-          sha256hash,
         },
         [
           {
@@ -135,9 +130,7 @@ describe(PluginService.name, () => {
           description: 'First plugin',
           author: 'Author 1',
           version: '1.0.0',
-          templates: [],
           wasmBytes,
-          sha256hash,
         },
         [
           {
@@ -157,9 +150,7 @@ describe(PluginService.name, () => {
           description: 'Second plugin',
           author: 'Author 2',
           version: '2.0.0',
-          templates: [],
           wasmBytes,
-          sha256hash,
         },
         [
           {
@@ -192,9 +183,7 @@ describe(PluginService.name, () => {
           description: 'Plugin with multiple methods',
           author: 'Test Author',
           version: '1.0.0',
-          templates: [],
           wasmBytes,
-          sha256hash,
         },
         [
           {
@@ -253,8 +242,6 @@ describe(PluginService.name, () => {
           description: 'A single plugin',
           author: 'Test Author',
           version: '1.0.0',
-          templates: [],
-          sha256hash,
           wasmBytes,
         },
         [

server/test/medium/specs/services/workflow.service.spec.ts

@@ -21,7 +21,6 @@ const setup = (db?: Kysely<DB>) => {
 };
 
 const wasmBytes = Buffer.from('random-wasm-bytes');
-const sha256hash = Buffer.from('some-manifest-hash');
 
 beforeAll(async () => {
   defaultDatabase = await getKyselyDB();
@@ -42,9 +41,7 @@ describe(WorkflowService.name, () => {
         description: 'A test core plugin for workflow tests',
         author: 'Test Author',
         version: '1.0.0',
-        templates: [],
         wasmBytes,
-        sha256hash,
       },
       [
         {

web/package.json

@@ -27,7 +27,7 @@
     "@formatjs/icu-messageformat-parser": "^3.0.0",
     "@immich/justified-layout-wasm": "^0.4.3",
     "@immich/sdk": "workspace:*",
-    "@immich/ui": "^0.79.0",
+    "@immich/ui": "^0.77.0",
     "@mapbox/mapbox-gl-rtl-text": "0.4.0",
     "@mdi/js": "^7.4.47",
     "@noble/hashes": "^2.2.0",

web/src/lib/commands.ts

@@ -1,35 +1,17 @@
 import { defaultProvider, screencastManager, themeManager, ThemePreference, type ActionItem } from '@immich/ui';
 import {
   mdiAccountMultipleOutline,
-  mdiAccountOutline,
-  mdiArchiveArrowDownOutline,
   mdiBookshelf,
   mdiCog,
-  mdiContentDuplicate,
-  mdiCrosshairsGps,
-  mdiFolderOutline,
-  mdiHeartOutline,
-  mdiImageAlbum,
-  mdiImageMultipleOutline,
-  mdiImageSizeSelectLarge,
   mdiKeyboard,
-  mdiLink,
-  mdiLockOutline,
-  mdiMagnify,
-  mdiMapOutline,
   mdiServer,
-  mdiStateMachine,
   mdiSync,
-  mdiTagMultipleOutline,
   mdiThemeLightDark,
-  mdiToolboxOutline,
-  mdiTrashCanOutline,
 } from '@mdi/js';
 import type { MessageFormatter } from 'svelte-i18n';
 import { goto } from '$app/navigation';
 import { page } from '$app/state';
 import { authManager } from '$lib/managers/auth-manager.svelte';
-import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
 import { Route } from '$lib/route';
 import { copyToClipboard } from '$lib/utils';
 
@@ -67,133 +49,7 @@ export const getPagesProvider = ($t: MessageFormatter) => {
     },
   ].map((route) => ({ ...route, $if: () => authManager.authenticated && authManager.user.isAdmin }));
 
-  const userPages: ActionItem[] = [
-    {
-      title: $t('photos'),
-      icon: mdiImageMultipleOutline,
-      onAction: () => goto(Route.photos()),
-    },
-    {
-      title: $t('explore'),
-      icon: mdiMagnify,
-      onAction: () => goto(Route.explore()),
-      $if: () => authManager.authenticated && featureFlagsManager.value.search,
-    },
-
-    {
-      title: $t('map'),
-      icon: mdiMapOutline,
-      onAction: () => goto(Route.map()),
-      $if: () => authManager.authenticated && featureFlagsManager.value.map,
-    },
-    {
-      title: $t('people'),
-      description: $t('people_feature_description'),
-      icon: mdiAccountOutline,
-      onAction: () => goto(Route.people()),
-      $if: () => authManager.authenticated && authManager.preferences.people.enabled,
-    },
-    {
-      title: $t('shared_links'),
-      icon: mdiLink,
-      onAction: () => goto(Route.sharedLinks()),
-      $if: () => authManager.authenticated && authManager.preferences.sharedLinks.enabled,
-    },
-    {
-      title: $t('recently_added'),
-      icon: mdiMagnify,
-      onAction: () => goto(Route.recentlyAdded()),
-      $if: () => authManager.authenticated,
-    },
-    {
-      title: $t('sharing'),
-      icon: mdiAccountMultipleOutline,
-      onAction: () => goto(Route.sharing()),
-      $if: () => authManager.authenticated,
-    },
-    {
-      title: $t('favorites'),
-      icon: mdiHeartOutline,
-      onAction: () => goto(Route.favorites()),
-      $if: () => authManager.authenticated,
-    },
-    {
-      title: $t('albums'),
-      description: $t('albums_feature_description'),
-      icon: mdiImageAlbum,
-      onAction: () => goto(Route.albums()),
-      $if: () => authManager.authenticated,
-    },
-    {
-      title: $t('tags'),
-      description: $t('tag_feature_description'),
-      icon: mdiTagMultipleOutline,
-      onAction: () => goto(Route.tags()),
-      $if: () => authManager.authenticated && authManager.preferences.tags.enabled,
-    },
-    {
-      title: $t('folders'),
-      description: $t('folders_feature_description'),
-      icon: mdiFolderOutline,
-      onAction: () => goto(Route.folders()),
-      $if: () => authManager.authenticated && authManager.preferences.folders.enabled,
-    },
-    {
-      title: $t('utilities'),
-      icon: mdiToolboxOutline,
-      onAction: () => goto(Route.utilities()),
-      $if: () => authManager.authenticated,
-    },
-    {
-      title: $t('archive'),
-      icon: mdiArchiveArrowDownOutline,
-      onAction: () => goto(Route.archive()),
-      $if: () => authManager.authenticated,
-    },
-    {
-      title: $t('locked_folder'),
-      icon: mdiLockOutline,
-      onAction: () => goto(Route.locked()),
-      $if: () => authManager.authenticated,
-    },
-    {
-      title: $t('trash'),
-      icon: mdiTrashCanOutline,
-      onAction: () => goto(Route.trash()),
-      $if: () => authManager.authenticated && featureFlagsManager.value.trash,
-    },
-    {
-      title: $t('admin.user_settings'),
-      icon: mdiCog,
-      onAction: () => goto(Route.userSettings()),
-      $if: () => authManager.authenticated,
-    },
-  ].map((route) => ({ $if: () => authManager.authenticated, ...route }));
-
-  const utilityPages: ActionItem[] = [
-    {
-      title: $t('review_duplicates'),
-      icon: mdiContentDuplicate,
-      onAction: () => goto(Route.duplicatesUtility()),
-    },
-    {
-      title: $t('review_large_files'),
-      icon: mdiImageSizeSelectLarge,
-      onAction: () => goto(Route.largeFileUtility()),
-    },
-    {
-      title: $t('manage_geolocation'),
-      icon: mdiCrosshairsGps,
-      onAction: () => goto(Route.geolocationUtility()),
-    },
-    {
-      title: $t('workflows'),
-      icon: mdiStateMachine,
-      onAction: () => goto(Route.workflows()),
-    },
-  ].map((route) => ({ ...route, $if: () => authManager.authenticated }));
-
-  return defaultProvider({ name: $t('page'), actions: [...userPages, ...utilityPages, ...adminPages] });
+  return defaultProvider({ name: $t('page'), actions: adminPages });
 };
 
 const getMyImmichLink = () => {

web/src/lib/components/AdaptiveImage.svelte

@@ -149,35 +149,29 @@
     return { width: 1, height: 1 };
   });
 
-  const { insetInlineStart, top, displayWidth, displayHeight, rasterWidth, rasterHeight, rasterScale } = $derived.by(
-    () => {
-      const scaleFn = objectFit === 'cover' ? scaleToCover : scaleToFit;
-      const { width, height } = scaleFn(imageDimensions, container);
-      if (maxRasterPixels === 0) {
-        return {
-          insetInlineStart: (container.width - width) / 2 + 'px',
-          top: (container.height - height) / 2 + 'px',
-          displayWidth: width + 'px',
-          displayHeight: height + 'px',
-          rasterWidth: width + 'px',
-          rasterHeight: height + 'px',
-          rasterScale: 1,
-        };
-      }
-      const nativeRatio = imageDimensions.width / width;
-      const budgetRatio = Math.sqrt(maxRasterPixels / Math.max(width * height, 1));
-      const rasterRatio = Math.max(1, Math.min(nativeRatio, budgetRatio));
+  const { insetInlineStart, top, rasterWidth, rasterHeight, rasterScale } = $derived.by(() => {
+    const scaleFn = objectFit === 'cover' ? scaleToCover : scaleToFit;
+    const { width, height } = scaleFn(imageDimensions, container);
+    if (maxRasterPixels === 0) {
       return {
         insetInlineStart: (container.width - width) / 2 + 'px',
         top: (container.height - height) / 2 + 'px',
-        displayWidth: width + 'px',
-        displayHeight: height + 'px',
-        rasterWidth: width * rasterRatio + 'px',
-        rasterHeight: height * rasterRatio + 'px',
-        rasterScale: 1 / rasterRatio,
+        rasterWidth: width + 'px',
+        rasterHeight: height + 'px',
+        rasterScale: 1,
       };
-    },
-  );
+    }
+    const nativeRatio = imageDimensions.width / width;
+    const budgetRatio = Math.sqrt(maxRasterPixels / Math.max(width * height, 1));
+    const rasterRatio = Math.max(1, Math.min(nativeRatio, budgetRatio));
+    return {
+      insetInlineStart: (container.width - width) / 2 + 'px',
+      top: (container.height - height) / 2 + 'px',
+      rasterWidth: width * rasterRatio + 'px',
+      rasterHeight: height * rasterRatio + 'px',
+      rasterScale: 1 / rasterRatio,
+    };
+  });
 
   const { status } = $derived(adaptiveImageLoader);
   const alt = $derived(status.urls.preview ? $getAltText(toTimelineAsset(asset)) : '');
@@ -222,78 +216,69 @@
   {@render backdrop?.()}
 
   <div
-    class="pointer-events-none absolute overflow-hidden"
+    class="pointer-events-none absolute"
     style:inset-inline-start={insetInlineStart}
     style:top
-    style:width={displayWidth}
-    style:height={displayHeight}
+    style:width={rasterWidth}
+    style:height={rasterHeight}
+    style:transform="scale({rasterScale})"
+    style:transform-origin="0 0"
+    style:will-change={maxRasterPixels > 0 ? 'transform' : undefined}
   >
-    <div
-      style:width={rasterWidth}
-      style:height={rasterHeight}
-      style:transform="scale({rasterScale})"
-      style:transform-origin="0 0"
-      style:will-change={maxRasterPixels > 0 ? 'transform' : undefined}
-    >
-      {#if show.alphaBackground}
-        <AlphaBackground />
-      {/if}
+    {#if show.alphaBackground}
+      <AlphaBackground />
+    {/if}
 
-      {#if show.thumbhash}
-        {#if asset.thumbhash}
-          <!-- Thumbhash / spinner layer  -->
-          <Thumbhash base64ThumbHash={asset.thumbhash} class="absolute size-full" />
-        {:else if show.spinner}
-          <DelayedLoadingSpinner />
-        {/if}
+    {#if show.thumbhash}
+      {#if asset.thumbhash}
+        <!-- Thumbhash / spinner layer  -->
+        <Thumbhash base64ThumbHash={asset.thumbhash} class="absolute size-full" />
+      {:else if show.spinner}
+        <DelayedLoadingSpinner />
       {/if}
+    {/if}
 
-      {#if show.thumbnail}
-        <ImageLayer
-          {adaptiveImageLoader}
-          width={rasterWidth}
-          height={rasterHeight}
-          quality="thumbnail"
-          src={status.urls.thumbnail}
-          alt=""
-          role="presentation"
-          bind:ref={thumbnailElement}
-        />
-      {/if}
+    {#if show.thumbnail}
+      <ImageLayer
+        {adaptiveImageLoader}
+        width={rasterWidth}
+        height={rasterHeight}
+        quality="thumbnail"
+        src={status.urls.thumbnail}
+        alt=""
+        role="presentation"
+        bind:ref={thumbnailElement}
+      />
+    {/if}
 
-      {#if show.brokenAsset}
-        <BrokenAsset class="absolute size-full text-xl" />
-      {/if}
+    {#if show.brokenAsset}
+      <BrokenAsset class="absolute size-full text-xl" />
+    {/if}
 
-      {#if show.preview}
-        <ImageLayer
-          {adaptiveImageLoader}
-          {alt}
-          width={rasterWidth}
-          height={rasterHeight}
-          quality="preview"
-          src={status.urls.preview}
-          bind:ref={previewElement}
-        />
-      {/if}
+    {#if show.preview}
+      <ImageLayer
+        {adaptiveImageLoader}
+        {alt}
+        width={rasterWidth}
+        height={rasterHeight}
+        {overlays}
+        quality="preview"
+        src={status.urls.preview}
+        bind:ref={previewElement}
+      />
+    {/if}
 
-      {#if show.original}
-        <ImageLayer
-          {adaptiveImageLoader}
-          {alt}
-          width={rasterWidth}
-          height={rasterHeight}
-          quality="original"
-          src={status.urls.original}
-          bind:ref={originalElement}
-        />
-      {/if}
-    </div>
-
-    {#if overlays}
-      <div class="pointer-events-none absolute inset-0">
-        {@render overlays()}
-      </div>
+    {#if show.original}
+      <ImageLayer
+        {adaptiveImageLoader}
+        {alt}
+        width={rasterWidth}
+        height={rasterHeight}
+        {overlays}
+        quality="original"
+        src={status.urls.original}
+        bind:ref={originalElement}
+      />
     {/if}
   </div>
 </div>

web/src/lib/components/ImageLayer.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import Image from '$lib/components/Image.svelte';
   import type { AdaptiveImageLoader, ImageQuality } from '$lib/utils/adaptive-image-loader.svelte';
+  import type { Snippet } from 'svelte';
 
   type Props = {
     adaptiveImageLoader: AdaptiveImageLoader;
@@ -11,9 +12,20 @@
     ref?: HTMLImageElement;
     width: string;
     height: string;
+    overlays?: Snippet;
   };
 
-  let { adaptiveImageLoader, quality, src, alt = '', role, ref = $bindable(), width, height }: Props = $props();
+  let {
+    adaptiveImageLoader,
+    quality,
+    src,
+    alt = '',
+    role,
+    ref = $bindable(),
+    width,
+    height,
+    overlays,
+  }: Props = $props();
 </script>
 
 {#key adaptiveImageLoader}
@@ -30,5 +42,6 @@
       draggable={false}
       data-testid={quality}
     />
+    {@render overlays?.()}
   </div>
 {/key}

web/src/lib/components/album-page/AlbumViewer.svelte

@@ -103,7 +103,7 @@
       {/if}
     </AssetSelectControlBar>
   {:else}
-    <ControlAppBar>
+    <ControlAppBar showBackButton={false}>
       {#snippet leading()}
         <a data-sveltekit-preload-data="hover" class="ms-4" href="/">
           <Logo variant={mediaQueryManager.maxMd ? 'icon' : 'inline'} class="min-w-10" />

web/src/lib/components/pages/SharedLinkPage.svelte

@@ -91,7 +91,7 @@
     </div>
   </main>
   <header>
-    <ControlAppBar>
+    <ControlAppBar showBackButton={false}>
       {#snippet leading()}
         <a data-sveltekit-preload-data="hover" class="ms-4" href="/">
           <Logo variant="inline" />

web/src/lib/components/share-page/IndividualSharedViewer.svelte

@@ -18,7 +18,7 @@
   import { toTimelineAsset } from '$lib/utils/timeline-util';
   import { getAssetInfo, type SharedLinkResponseDto } from '@immich/sdk';
   import { IconButton, Logo, toastManager } from '@immich/ui';
-  import { mdiDownload, mdiFileImagePlusOutline, mdiSelectAll } from '@mdi/js';
+  import { mdiArrowLeft, mdiDownload, mdiFileImagePlusOutline, mdiSelectAll } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import ControlAppBar from '../shared-components/ControlAppBar.svelte';
   import GalleryViewer from '../shared-components/gallery-viewer/GalleryViewer.svelte';
@@ -97,7 +97,7 @@
         {/if}
       </AssetSelectControlBar>
     {:else}
-      <ControlAppBar>
+      <ControlAppBar onClose={() => goto(Route.photos())} backIcon={mdiArrowLeft} showBackButton={false}>
         {#snippet leading()}
           <a data-sveltekit-preload-data="hover" class="ms-4" href="/">
             <Logo variant={mediaQueryManager.maxMd ? 'icon' : 'inline'} class="min-w-10" />

web/src/lib/components/shared-components/ControlAppBar.svelte

@@ -1,49 +1,97 @@
 <script lang="ts">
-  import { ControlBar, ControlBarContent, ControlBarHeader, ControlBarOverflow, ControlBarTitle } from '@immich/ui';
+  import { browser } from '$app/environment';
+  import { IconButton } from '@immich/ui';
   import { mdiClose } from '@mdi/js';
-  import type { Snippet } from 'svelte';
-  import type { ClassValue } from 'svelte/elements';
+  import { onDestroy, onMount, type Snippet } from 'svelte';
+  import { t } from 'svelte-i18n';
+  import { fly } from 'svelte/transition';
 
   interface Props {
+    showBackButton?: boolean;
     backIcon?: string;
-    class?: ClassValue;
+    tailwindClasses?: string;
+    forceDark?: boolean;
+    multiRow?: boolean;
     onClose?: () => void;
-    title?: Snippet | string;
     leading?: Snippet;
     children?: Snippet;
     trailing?: Snippet;
   }
 
-  let { backIcon = mdiClose, class: className = '', onClose, title, leading, children, trailing }: Props = $props();
+  let {
+    showBackButton = true,
+    backIcon = mdiClose,
+    tailwindClasses = '',
+    forceDark = false,
+    multiRow = false,
+    onClose = () => {},
+    leading,
+    children,
+    trailing,
+  }: Props = $props();
+
+  let appBarBorder = $state('border border-subtle');
+
+  const onScroll = () => {
+    if (window.scrollY > 80) {
+      appBarBorder = 'border border-gray-200 bg-gray-50 dark:border-gray-600';
+
+      if (forceDark) {
+        appBarBorder = 'border border-gray-600';
+      }
+    } else {
+      appBarBorder = 'border border-subtle';
+    }
+  };
+
+  onMount(() => {
+    if (browser) {
+      document.addEventListener('scroll', onScroll, { passive: true });
+    }
+  });
+
+  onDestroy(() => {
+    if (browser) {
+      document.removeEventListener('scroll', onScroll);
+    }
+  });
 </script>
 
-<div class="absolute top-0 w-full bg-transparent p-2" id="control-bar">
-  <ControlBar closeIcon={backIcon} {onClose} shape="round" class={className}>
-    {#if title || leading}
-      <ControlBarHeader>
-        {#if title}
-          <ControlBarTitle>
-            {#if typeof title === 'string'}
-              {title}
-            {:else}
-              {@render title()}
-            {/if}
-          </ControlBarTitle>
-        {/if}
-        {@render leading?.()}
-      </ControlBarHeader>
-    {/if}
+<div in:fly={{ y: 10, duration: 200 }} class="absolute top-0 w-full bg-transparent">
+  <nav
+    id="asset-selection-app-bar"
+    class={[
+      'grid',
+      multiRow && 'grid-cols-[100%] md:grid-cols-[25%_50%_25%]',
+      !multiRow && 'grid-cols-[10%_80%_10%] sm:grid-cols-[25%_50%_25%]',
+      'justify-between lg:grid-cols-[25%_50%_25%]',
+      appBarBorder,
+      'm-2 place-items-center rounded-full p-2 transition-all max-md:p-0',
+      tailwindClasses,
+      forceDark ? 'bg-immich-dark-gray! text-white' : 'bg-light-50 dark:bg-immich-dark-gray',
+    ]}
+  >
+    <div class="flex place-items-center justify-self-start sm:gap-6 dark:text-immich-dark-fg {forceDark ? 'dark' : ''}">
+      {#if showBackButton}
+        <IconButton
+          aria-label={$t('close')}
+          onclick={onClose}
+          color="secondary"
+          shape="round"
+          variant="ghost"
+          icon={backIcon}
+          size="large"
+        />
+      {/if}
+      {@render leading?.()}
+    </div>
 
-    {#if children}
-      <ControlBarContent>
-        {@render children()}
-      </ControlBarContent>
-    {/if}
+    <div class="w-full">
+      {@render children?.()}
+    </div>
 
-    {#if trailing}
-      <ControlBarOverflow>
-        {@render trailing()}
-      </ControlBarOverflow>
-    {/if}
-  </ControlBar>
+    <div class="me-4 flex place-items-center gap-1 justify-self-end max-[350px]:me-0 max-[350px]:gap-0">
+      {@render trailing?.()}
+    </div>
+  </nav>
 </div>

web/src/lib/components/timeline/AssetLayout.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
+  import { filterIsInOrNearViewport } from '$lib/managers/timeline-manager/utils.svelte';
   import type { ViewerAsset } from '$lib/managers/timeline-manager/viewer-asset.svelte';
   import type { VirtualScrollManager } from '$lib/managers/VirtualScrollManager/VirtualScrollManager.svelte';
   import { uploadAssetsStore } from '$lib/stores/upload';
@@ -30,14 +31,11 @@
 
   const transitionDuration = $derived(manager.suspendTransitions && !$isUploading ? 0 : 150);
   const scaleDuration = $derived(transitionDuration === 0 ? 0 : transitionDuration + 100);
-
-  const firstInOrNearViewport = $derived(viewerAssets.findIndex((a) => a.isInOrNearViewport));
-  const lastInOrNearViewport = $derived(viewerAssets.findLastIndex((a) => a.isInOrNearViewport));
 </script>
 
 <!-- Image grid -->
 <div data-image-grid class="relative overflow-clip" style:height={height + 'px'} style:width={width + 'px'}>
-  {#each viewerAssets.slice(firstInOrNearViewport, lastInOrNearViewport + 1) as viewerAsset (viewerAsset.id)}
+  {#each filterIsInOrNearViewport(viewerAssets) as viewerAsset (viewerAsset.id)}
     {@const position = viewerAsset.position!}
     {@const asset = viewerAsset.asset!}
 

web/src/lib/components/timeline/AssetSelectControlBar.svelte

@@ -7,18 +7,19 @@
 
   type Props = {
     children?: Snippet;
+    forceDark?: boolean;
   };
 
-  let { children }: Props = $props();
+  let { children, forceDark }: Props = $props();
 
   const onClose = () => assetMultiSelectManager.clear();
 
   const assets = $derived(assetMultiSelectManager.assets);
 </script>
 
-<ControlAppBar {onClose} backIcon={mdiClose}>
+<ControlAppBar {onClose} {forceDark} backIcon={mdiClose} tailwindClasses="bg-white shadow-md">
   {#snippet leading()}
-    <div class="font-medium text-primary">
+    <div class="font-medium {forceDark ? 'text-immich-dark-primary' : 'text-primary'}">
       <p class="block sm:hidden">{assets.length}</p>
       <p class="hidden sm:block">{$t('selected_count', { values: { count: assets.length } })}</p>
     </div>

web/src/lib/managers/edit/edit-manager.svelte.ts

@@ -127,7 +127,7 @@ export class EditManager {
 
     try {
       // Setup the websocket listener before sending the edit request
-      const editCompleted = waitForWebsocketEvent('AssetEditReadyV2', (event) => event.asset.id === assetId, 10_000);
+      const editCompleted = waitForWebsocketEvent('AssetEditReadyV1', (event) => event.asset.id === assetId, 10_000);
 
       await (edits.length === 0
         ? removeAssetEdits({ id: assetId })

web/src/lib/managers/plugin-manager.svelte.ts

@@ -1,10 +1,8 @@
 import {
   getWorkflowTriggers,
   searchPluginMethods,
-  searchPluginTemplates,
   WorkflowTrigger,
   type PluginMethodResponseDto,
-  type PluginTemplateResponseDto,
   type WorkflowTriggerResponseDto,
 } from '@immich/sdk';
 import { t } from 'svelte-i18n';
@@ -18,7 +16,6 @@ class PluginManager {
   #methodMap = new SvelteMap<string, PluginMethodResponseDto>();
   #methods = $state<PluginMethodResponseDto[]>([]);
   #triggers = $state<WorkflowTriggerResponseDto[]>([]);
-  #templates = $state<PluginTemplateResponseDto[]>([]);
 
   constructor() {
     eventManager.on({
@@ -36,10 +33,6 @@ class PluginManager {
     return this.#triggers;
   }
 
-  get templates() {
-    return this.#templates;
-  }
-
   ready() {
     return this.initialize();
   }
@@ -77,11 +70,7 @@ class PluginManager {
   }
 
   private async load() {
-    const [methods, triggers, templates] = await Promise.all([
-      searchPluginMethods({}),
-      getWorkflowTriggers(),
-      searchPluginTemplates(),
-    ]);
+    const [methods, triggers] = await Promise.all([searchPluginMethods({}), getWorkflowTriggers()]);
 
     this.#methods = methods;
     for (const method of this.#methods) {
@@ -89,7 +78,6 @@ class PluginManager {
     }
 
     this.#triggers = triggers;
-    this.#templates = templates;
   }
 }
 

web/src/lib/managers/timeline-manager/timeline-day.svelte.ts

@@ -17,13 +17,13 @@ export class TimelineDay {
 
   height = $state(0);
   width = $state(0);
+  isInOrNearViewport = $derived.by(() => this.viewerAssets.some((viewAsset) => viewAsset.isInOrNearViewport));
 
   #top: number = $state(0);
   #start: number = $state(0);
   #row = $state(0);
   #col = $state(0);
   #deferredLayout = false;
-  #lastInOrNearViewport = -1;
 
   constructor(timelineMonth: TimelineMonth, index: number, day: number, groupTitle: string, orderBy: AssetOrderBy) {
     this.index = index;
@@ -154,13 +154,4 @@ export class TimelineDay {
   get absoluteTimelineDayTop() {
     return this.timelineMonth.top + this.#top;
   }
-
-  get isInOrNearViewport() {
-    if (this.#lastInOrNearViewport !== -1 && this.viewerAssets[this.#lastInOrNearViewport].isInOrNearViewport) {
-      return true;
-    }
-
-    this.#lastInOrNearViewport = this.viewerAssets.findIndex((viewAsset) => viewAsset.isInOrNearViewport);
-    return this.#lastInOrNearViewport !== -1;
-  }
 }

web/src/lib/modals/PluginMethodPicker.svelte

@@ -12,7 +12,7 @@
   const { trigger, selectedKey, onClose }: Props = $props();
 </script>
 
-<BasicModal title={$t('add_step')} {onClose} size="medium">
+<BasicModal title={$t('add_step')} {onClose}>
   {#await searchPluginMethods({ trigger })}
     <div class="flex w-full place-content-center place-items-center">
       <LoadingSpinner />

web/src/lib/modals/WorkflowAddStepModal.svelte

@@ -38,7 +38,7 @@
 </script>
 
 {#if method}
-  <FormModal title={$t('add_step')} {onClose} {onSubmit} disabled={!method} size="medium">
+  <FormModal title={$t('add_step')} {onClose} {onSubmit} disabled={!method} size="small">
     <div class="flex items-center justify-between gap-2">
       <div class="grow text-start">
         <Text fontWeight="medium">{method.title}</Text>

web/src/lib/modals/WorkflowEditStepModal.svelte

@@ -35,7 +35,7 @@
 </script>
 
 {#if method}
-  <FormModal title={$t('step_details')} {onClose} {onSubmit} disabled={!method} size="medium">
+  <FormModal title={$t('step_details')} {onClose} {onSubmit} disabled={!method} size="small">
     <div class="flex items-center justify-between gap-2">
       <div class="grow text-start">
         <Text fontWeight="medium">{method.title}</Text>

web/src/lib/modals/WorkflowTemplatePicker.svelte

@@ -1,66 +0,0 @@
-<script lang="ts">
-  import { pluginManager } from '$lib/managers/plugin-manager.svelte';
-  import { handleCreateWorkflow } from '$lib/services/workflow.service';
-  import { type PluginTemplateResponseDto } from '@immich/sdk';
-  import { FormModal, Icon, ListButton, Text } from '@immich/ui';
-  import { mdiFlashOutline } from '@mdi/js';
-  import { t } from 'svelte-i18n';
-
-  type Props = {
-    onClose: () => void;
-  };
-
-  const { onClose }: Props = $props();
-
-  let selected = $state<PluginTemplateResponseDto>();
-
-  const onSubmit = async () => {
-    if (!selected) {
-      return;
-    }
-
-    const success = await handleCreateWorkflow({
-      trigger: selected.trigger,
-      steps: selected.steps,
-      name: selected.title,
-      description: selected.description,
-      enabled: false,
-    });
-
-    if (success) {
-      onClose();
-    }
-  };
-
-  const isSelected = (template: PluginTemplateResponseDto) => selected?.key === template.key;
-</script>
-
-<FormModal
-  title={$t('workflow_templates')}
-  {onClose}
-  {onSubmit}
-  disabled={!selected}
-  size="medium"
-  submitText={$t('use_template')}
->
-  <div class="flex flex-col gap-2">
-    {#each pluginManager.templates as template (template.key)}
-      <ListButton
-        selected={isSelected(template)}
-        onclick={() => (selected = isSelected(template) ? undefined : template)}
-      >
-        <div class="flex w-full items-center gap-3 text-start">
-          <div
-            class="flex size-9 shrink-0 items-center justify-center rounded-lg bg-immich-primary/10 text-immich-primary dark:bg-immich-dark-primary/15 dark:text-immich-dark-primary"
-          >
-            <Icon icon={mdiFlashOutline} size="18" />
-          </div>
-          <div class="min-w-0 grow">
-            <Text fontWeight="medium">{template.title}</Text>
-            <Text size="tiny" color="muted">{template.description}</Text>
-          </div>
-        </div>
-      </ListButton>
-    {/each}
-  </div>
-</FormModal>

web/src/lib/modals/WorkflowTriggerPicker.svelte

@@ -17,7 +17,7 @@
   const onSubmit = () => onClose(selected);
 </script>
 
-<FormModal title={$t('trigger')} {onClose} {onSubmit} size="medium">
+<FormModal title={$t('trigger')} {onClose} {onSubmit} size="small">
   <div class="flex flex-col gap-2">
     {#each pluginManager.triggers as item (item.trigger)}
       <ListButton selected={selected === item.trigger} onclick={() => (selected = item.trigger)}>

web/src/lib/services/workflow.service.ts

@@ -10,11 +10,10 @@ import {
   type WorkflowUpdateDto,
 } from '@immich/sdk';
 import { modalManager, toastManager, type ActionItem } from '@immich/ui';
-import { mdiCodeJson, mdiDelete, mdiFileDocumentMultipleOutline, mdiPause, mdiPencil, mdiPlay, mdiPlus } from '@mdi/js';
+import { mdiCodeJson, mdiDelete, mdiPause, mdiPencil, mdiPlay, mdiPlus } from '@mdi/js';
 import type { MessageFormatter } from 'svelte-i18n';
 import { goto } from '$app/navigation';
 import { eventManager } from '$lib/managers/event-manager.svelte';
-import WorkflowTemplatePicker from '$lib/modals/WorkflowTemplatePicker.svelte';
 import { Route } from '$lib/route';
 import { handleError } from '$lib/utils/handle-error';
 import { getFormatter } from '$lib/utils/i18n';
@@ -34,13 +33,7 @@ export const getWorkflowsActions = ($t: MessageFormatter) => {
       }),
   };
 
-  const UseTemplate: ActionItem = {
-    title: $t('browse_templates'),
-    icon: mdiFileDocumentMultipleOutline,
-    onAction: () => modalManager.show(WorkflowTemplatePicker, {}),
-  };
-
-  return { Create, UseTemplate };
+  return { Create };
 };
 
 export const getWorkflowActions = ($t: MessageFormatter, workflow: WorkflowResponseDto) => {
@@ -79,16 +72,14 @@ export const getWorkflowShowSchemaAction = (
   onAction: onToggle,
 });
 
-export const handleCreateWorkflow = async (dto: WorkflowCreateDto) => {
+const handleCreateWorkflow = async (dto: WorkflowCreateDto) => {
   const $t = await getFormatter();
 
   try {
     const response = await createWorkflow({ workflowCreateDto: dto });
     eventManager.emit('WorkflowCreate', response);
-    return true;
   } catch (error) {
     handleError(error, $t('errors.unable_to_create'));
-    return false;
   }
 };
 

web/src/lib/stores/websocket.ts

@@ -5,7 +5,7 @@ import {
   type NotificationDto,
   type ServerVersionResponseDto,
   type SyncAssetEditV1,
-  type SyncAssetV2,
+  type SyncAssetV1,
 } from '@immich/sdk';
 import { io, type Socket } from 'socket.io-client';
 import { get, writable } from 'svelte/store';
@@ -41,7 +41,7 @@ export interface Events {
   AppRestartV1: (event: AppRestartEvent) => void;
 
   MaintenanceStatusV1: (event: MaintenanceStatusResponseDto) => void;
-  AssetEditReadyV2: (data: { asset: SyncAssetV2; edit: SyncAssetEditV1[] }) => void;
+  AssetEditReadyV1: (data: { asset: SyncAssetV1; edit: SyncAssetEditV1[] }) => void;
 }
 
 const websocket: Socket<Events> = io({

web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
   import { goto, invalidate, onNavigate } from '$app/navigation';
   import { scrollMemoryClearer } from '$lib/actions/scroll-memory';
+  import AlbumDescription from './AlbumDescription.svelte';
   import AlbumMap from '$lib/components/album-page/AlbumMap.svelte';
   import AlbumSummary from '$lib/components/album-page/AlbumSummary.svelte';
+  import AlbumTitle from './AlbumTitle.svelte';
   import ActivityStatus from '$lib/components/asset-viewer/ActivityStatus.svelte';
   import ActivityViewer from '$lib/components/asset-viewer/ActivityViewer.svelte';
   import HeaderActionButton from '$lib/components/HeaderActionButton.svelte';
@@ -76,8 +78,6 @@
   import { t } from 'svelte-i18n';
   import { fly } from 'svelte/transition';
   import type { PageData } from './$types';
-  import AlbumDescription from './AlbumDescription.svelte';
-  import AlbumTitle from './AlbumTitle.svelte';
 
   interface Props {
     data: PageData;
@@ -499,7 +499,7 @@
       </AssetSelectControlBar>
     {:else}
       {#if viewMode === AlbumPageViewMode.VIEW}
-        <ControlAppBar backIcon={mdiArrowLeft} onClose={() => goto(Route.albums())}>
+        <ControlAppBar showBackButton backIcon={mdiArrowLeft} onClose={() => goto(Route.albums())}>
           {#snippet trailing()}
             <ActionButton action={Cast} />
 

web/src/routes/(user)/memory/[[photos=photos]]/[[assetId=id]]/MemoryViewer.svelte

@@ -2,8 +2,11 @@
   import { afterNavigate, goto } from '$app/navigation';
   import { page } from '$app/state';
   import { shortcuts } from '$lib/actions/shortcut';
+  import MemoryPhotoViewer from './MemoryPhotoViewer.svelte';
+  import MemoryVideoViewer from './MemoryVideoViewer.svelte';
   import ButtonContextMenu from '$lib/components/shared-components/context-menu/ButtonContextMenu.svelte';
   import MenuOption from '$lib/components/shared-components/context-menu/MenuOption.svelte';
+  import ControlAppBar from '$lib/components/shared-components/ControlAppBar.svelte';
   import GalleryViewer from '$lib/components/shared-components/gallery-viewer/GalleryViewer.svelte';
   import ArchiveAction from '$lib/components/timeline/actions/ArchiveAction.svelte';
   import ChangeDate from '$lib/components/timeline/actions/ChangeDateAction.svelte';
@@ -34,7 +37,6 @@
     mdiChevronLeft,
     mdiChevronRight,
     mdiChevronUp,
-    mdiClose,
     mdiDotsVertical,
     mdiHeart,
     mdiHeartOutline,
@@ -52,8 +54,6 @@
   import { t } from 'svelte-i18n';
   import type { Attachment } from 'svelte/attachments';
   import { Tween } from 'svelte/motion';
-  import MemoryPhotoViewer from './MemoryPhotoViewer.svelte';
-  import MemoryVideoViewer from './MemoryVideoViewer.svelte';
 
   let memoryGallery: HTMLElement | undefined = $state();
   let memoryWrapper: HTMLElement | undefined = $state();
@@ -328,7 +328,7 @@
 
 {#if assetMultiSelectManager.selectionActive}
   <div class="dark sticky top-0 z-1">
-    <AssetSelectControlBar>
+    <AssetSelectControlBar forceDark>
       {@const Actions = getAssetBulkActions($t)}
       <CreateSharedLink />
       <IconButton
@@ -365,31 +365,22 @@
 
 <section
   id="memory-viewer"
-  class="dark w-full bg-immich-dark-gray text-white"
+  class="w-full bg-immich-dark-gray"
   bind:this={memoryWrapper}
   bind:clientHeight={viewport.height}
   bind:clientWidth={viewport.width}
 >
   {#if current}
-    <div class="dark grid grid-cols-[100%] p-2 max-md:h-auto max-md:flex-col md:grid-cols-[25%_50%_25%] md:p-4">
-      {#if current}
-        <div class="flex items-center gap-2 md:gap-6">
-          <IconButton
-            shape="round"
-            variant="ghost"
-            color="secondary"
-            icon={mdiClose}
-            aria-label={$t('close')}
-            size="large"
-            onclick={() => goto(Route.photos())}
-          />
+    <ControlAppBar onClose={() => goto(Route.photos())} forceDark multiRow>
+      {#snippet leading()}
+        {#if current}
           <p class="text-lg">
             {$memoryLaneTitle(current.memory)}
           </p>
-        </div>
-      {/if}
+        {/if}
+      {/snippet}
 
-      <div class="dark flex w-full place-content-center place-items-center gap-2">
+      <div class="dark flex place-content-center place-items-center gap-2">
         <IconButton
           shape="round"
           variant="ghost"
@@ -447,7 +438,7 @@
           </media-mute-button>
         {/if}
       </div>
-    </div>
+    </ControlAppBar>
 
     {#if galleryInView}
       <div
@@ -471,7 +462,7 @@
       </div>
     {/if}
     <!-- Viewer -->
-    <section class="overflow-hidden pt-6 md:pt-0" bind:clientHeight={viewerHeight}>
+    <section class="overflow-hidden pt-32 md:pt-20" bind:clientHeight={viewerHeight}>
       <div
         class="ms-[-100%] box-border flex h-[calc(100vh-224px)] w-[300%] items-center justify-center gap-10 overflow-hidden md:h-[calc(100vh-180px)]"
       >

web/src/routes/(user)/partners/[userId]/[[photos=photos]]/[[assetId=id]]/+page.svelte

@@ -47,7 +47,7 @@
     <DownloadAction />
   </AssetSelectControlBar>
 {:else}
-  <ControlAppBar backIcon={mdiArrowLeft} onClose={() => goto(Route.sharing())}>
+  <ControlAppBar showBackButton backIcon={mdiArrowLeft} onClose={() => goto(Route.sharing())}>
     {#snippet leading()}
       <p class="whitespace-nowrap text-immich-fg dark:text-immich-dark-fg">
         {$t('partner_list_user_photos', { values: { user: data.partner.name } })}

web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/+page.svelte

@@ -5,6 +5,9 @@
   import { listNavigation } from '$lib/actions/list-navigation';
   import { scrollMemoryClearer } from '$lib/actions/scroll-memory';
   import ImageThumbnail from '$lib/components/assets/thumbnail/ImageThumbnail.svelte';
+  import EditNameInput from './EditNameInput.svelte';
+  import MergeFaceSelector from './MergeFaceSelector.svelte';
+  import UnmergeFaceSelector from './UnmergeFaceSelector.svelte';
   import OnEvents from '$lib/components/OnEvents.svelte';
   import ButtonContextMenu from '$lib/components/shared-components/context-menu/ButtonContextMenu.svelte';
   import MenuOption from '$lib/components/shared-components/context-menu/MenuOption.svelte';
@@ -51,9 +54,6 @@
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
   import type { PageData } from './$types';
-  import EditNameInput from './EditNameInput.svelte';
-  import MergeFaceSelector from './MergeFaceSelector.svelte';
-  import UnmergeFaceSelector from './UnmergeFaceSelector.svelte';
 
   interface Props {
     data: PageData;
@@ -493,7 +493,7 @@
     </AssetSelectControlBar>
   {:else}
     {#if viewMode === PersonPageViewMode.VIEW_ASSETS}
-      <ControlAppBar backIcon={mdiArrowLeft} onClose={() => goto(previousRoute)}>
+      <ControlAppBar showBackButton backIcon={mdiArrowLeft} onClose={() => goto(previousRoute)}>
         {#snippet trailing()}
           <ContextMenuButton
             items={[SelectFeaturePhoto, HidePerson, ShowPerson, SetDateOfBirth, Merge, Favorite, Unfavorite]}

web/src/routes/(user)/search/[[photos=photos]]/[[assetId=id]]/+page.svelte

@@ -387,7 +387,8 @@
     {:else}
       <div class="fixed inset-s-0 top-0 z-2 w-full">
         <ControlAppBar onClose={() => goto(previousRoute)} backIcon={mdiArrowLeft}>
-          <div class="mx-auto w-full max-w-2xl pe-2">
+          <div class="absolute bg-light"></div>
+          <div class="w-full flex-1 ps-4">
             <SearchBar grayTheme={false} value={terms?.query ?? ''} searchQuery={terms} />
           </div>
         </ControlAppBar>

web/src/routes/(user)/workflows/+page.svelte

@@ -4,24 +4,26 @@
   import UserPageLayout from '$lib/components/layouts/UserPageLayout.svelte';
   import OnEvents from '$lib/components/OnEvents.svelte';
   import EmptyPlaceholder from '$lib/components/shared-components/EmptyPlaceholder.svelte';
+  import { pluginManager } from '$lib/managers/plugin-manager.svelte';
   import { Route } from '$lib/route';
   import { getWorkflowActions, getWorkflowsActions, getWorkflowShowSchemaAction } from '$lib/services/workflow.service';
   import { getWorkflowForShare, type WorkflowResponseDto } from '@immich/sdk';
   import {
-    Badge,
     Button,
     Card,
+    CardBody,
     CardDescription,
     CardHeader,
     CardTitle,
     CodeBlock,
     Container,
-    Icon,
     IconButton,
     MenuItemType,
     menuManager,
+    Text,
+    VStack,
   } from '@immich/ui';
-  import { mdiClose, mdiDotsVertical, mdiFlashOutline } from '@mdi/js';
+  import { mdiClose, mdiDotsVertical } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import { SvelteSet } from 'svelte/reactivity';
   import type { PageData } from './$types';
@@ -44,6 +46,20 @@
     }
   };
 
+  const getTriggerLabel = (triggerType: string) => {
+    const labels: Record<string, string> = {
+      AssetCreate: $t('asset_created'),
+      PersonRecognized: $t('person_recognized'),
+    };
+    return labels[triggerType] || triggerType;
+  };
+
+  const formatTimestamp = (createdAt: string) =>
+    new Intl.DateTimeFormat(undefined, {
+      dateStyle: 'medium',
+      timeStyle: 'short',
+    }).format(new Date(createdAt));
+
   const showWorkflowMenu = (event: MouseEvent, workflow: WorkflowResponseDto) => {
     const { ToggleEnabled, Edit, Delete } = getWorkflowActions($t, workflow);
     void menuManager.show({
@@ -59,7 +75,7 @@
     });
   };
 
-  const { Create, UseTemplate } = $derived(getWorkflowsActions($t));
+  const { Create } = $derived(getWorkflowsActions($t));
 
   const onWorkflowCreate = async (response: WorkflowResponseDto) => {
     await goto(Route.viewWorkflow(response));
@@ -76,7 +92,13 @@
 
 <OnEvents {onWorkflowCreate} {onWorkflowUpdate} {onWorkflowDelete} />
 
-<UserPageLayout title={data.meta.title} actions={[UseTemplate, Create]} scrollbar={false}>
+{#snippet chipItem(title: string)}
+  <span class="rounded-xl border border-gray-200/80 bg-light px-3 py-1.5 text-sm dark:border-gray-600">
+    <span class="font-medium text-dark">{title}</span>
+  </span>
+{/snippet}
+
+<UserPageLayout title={data.meta.title} actions={[Create]} scrollbar={false}>
   <section class="flex place-content-center sm:mx-4">
     <Container center size="large" class="pb-28">
       {#if workflows.length === 0}
@@ -89,77 +111,92 @@
           class="mx-auto mt-10"
         />
       {:else}
-        <div class="my-6 flex flex-col gap-3">
+        <div class="my-6 grid gap-6">
           {#each workflows as workflow (workflow.id)}
-            <Card class="group shadow-none transition-colors hover:border-primary">
-              <CardHeader>
-                <a
-                  href={Route.viewWorkflow({ id: workflow.id })}
-                  class="flex items-center gap-4"
-                  class:opacity-55={!workflow.enabled}
-                >
-                  <div
-                    class={`flex size-11 shrink-0 items-center justify-center rounded-xl ${
-                      workflow.enabled
-                        ? 'bg-immich-primary/10 text-immich-primary dark:bg-immich-dark-primary/15 dark:text-immich-dark-primary'
-                        : 'bg-gray-100 text-gray-400 dark:bg-gray-800 dark:text-gray-500'
-                    }`}
-                  >
-                    <Icon icon={mdiFlashOutline} size="20" />
+            <Card class="border border-light-200">
+              <CardHeader
+                class={`flex flex-row gap-4 px-8 py-6 sm:items-center sm:gap-6 ${
+                  workflow.enabled
+                    ? 'bg-linear-to-r from-green-50 to-white dark:from-green-800/50 dark:to-green-950/45'
+                    : 'bg-neutral-50 dark:bg-neutral-900'
+                }`}
+              >
+                <div class="flex-1">
+                  <div class="flex items-center gap-3">
+                    <span class="rounded-full {workflow.enabled ? 'size-3 bg-success' : 'size-3 rounded-full bg-muted'}"
+                    ></span>
+                    <CardTitle>{workflow.name || $t('workflow')}</CardTitle>
                   </div>
+                  {#if workflow.description}
+                    <CardDescription class="mt-1 text-sm">{workflow.description}</CardDescription>
+                  {/if}
+                </div>
 
-                  <div class="min-w-0 flex-1">
-                    <div class="flex items-center gap-2">
-                      <CardTitle class="truncate font-semibold text-dark group-hover:text-primary">
-                        {workflow.name || $t('workflow')}
-                      </CardTitle>
-
-                      {#if !workflow.enabled}
-                        <Badge size="small" color="secondary">
-                          {$t('disabled')}
-                        </Badge>
-                      {/if}
-                    </div>
-
-                    {#if workflow.description}
-                      <CardDescription class="mt-0.5 truncate">
-                        {workflow.description}
-                      </CardDescription>
-                    {/if}
+                <div class="flex items-center gap-4">
+                  <div class="hidden text-right sm:block">
+                    <Text size="tiny">{$t('created_at')}</Text>
+                    <Text size="small" fontWeight="medium">
+                      {formatTimestamp(workflow.createdAt)}
+                    </Text>
                   </div>
-
                   <IconButton
                     shape="round"
                     variant="ghost"
                     color="secondary"
                     icon={mdiDotsVertical}
                     aria-label={$t('menu')}
-                    onclick={(event: MouseEvent) => {
-                      event.preventDefault();
-                      event.stopPropagation();
-                      showWorkflowMenu(event, workflow);
-                    }}
+                    onclick={(event: MouseEvent) => showWorkflowMenu(event, workflow)}
                   />
-                </a>
+                </div>
+              </CardHeader>
+
+              <CardBody class="space-y-6">
+                <div class="grid gap-4 md:grid-cols-3">
+                  <!-- Trigger Section -->
+                  <div class="rounded-2xl border border-light-200 bg-light-50 p-4">
+                    <div class="mb-3">
+                      <Text size="tiny" color="muted" fontWeight="medium">{$t('trigger')}</Text>
+                    </div>
+                    {@render chipItem(getTriggerLabel(workflow.trigger))}
+                  </div>
+
+                  <!-- Actions Section -->
+                  <div class="rounded-2xl border border-light-200 bg-light-50 p-4">
+                    <div class="mb-3">
+                      <Text size="tiny" color="muted" fontWeight="medium">{$t('steps')}</Text>
+                    </div>
+
+                    <div>
+                      {#if workflow.steps.length === 0}
+                        <span class="text-sm text-light-600">
+                          {$t('no_steps')}
+                        </span>
+                      {:else}
+                        <div class="flex flex-wrap gap-2">
+                          {#each workflow.steps as step, i (i)}
+                            {@render chipItem(pluginManager.getMethodLabel(step.method))}
+                          {/each}
+                        </div>
+                      {/if}
+                    </div>
+                  </div>
+                </div>
 
                 {#if expandedIds.has(workflow.id)}
                   {#await getWorkflowForShare({ id: workflow.id }) then result}
-                    <div class="border-t border-gray-200 p-4 dark:border-gray-800">
+                    <VStack gap={2} class="w-full rounded-2xl border border-light-200 bg-light-50 p-4">
                       <CodeBlock code={JSON.stringify(result, null, 2)} lineNumbers />
                       <Button
-                        class="mt-2"
                         leadingIcon={mdiClose}
                         fullWidth
                         variant="ghost"
                         color="secondary"
-                        onclick={() => toggleExpanded(workflow.id)}
+                        onclick={() => toggleExpanded(workflow.id)}>{$t('close')}</Button
                       >
-                        {$t('close')}
-                      </Button>
-                    </div>
+                    </VStack>
                   {/await}
                 {/if}
-              </CardHeader>
+              </CardBody>
             </Card>
           {/each}
         </div>

web/src/routes/(user)/workflows/[workflowId]/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { beforeNavigate, goto, invalidate } from '$app/navigation';
+  import { goto, invalidate } from '$app/navigation';
   import OnEvents from '$lib/components/OnEvents.svelte';
   import { pluginManager } from '$lib/managers/plugin-manager.svelte';
   import WorkflowAddStepModal from '$lib/modals/WorkflowAddStepModal.svelte';
@@ -8,7 +8,7 @@
   import { Route } from '$lib/route';
   import { handleUpdateWorkflow } from '$lib/services/workflow.service';
   import { getTriggerDescription, getTriggerName } from '$lib/utils/workflow';
-  import type { WorkflowResponseDto, WorkflowStepDto, WorkflowUpdateDto } from '@immich/sdk';
+  import type { WorkflowResponseDto, WorkflowStepDto } from '@immich/sdk';
   import {
     ActionBar,
     AppShell,
@@ -29,40 +29,26 @@
     IconButton,
     Input,
     modalManager,
+    Stack,
     Switch,
+    Text,
     Textarea,
     VStack,
+    type ActionItem,
   } from '@immich/ui';
   import {
     mdiArrowLeft,
-    mdiCodeJson,
     mdiContentSave,
     mdiFlashOutline,
     mdiFormatListBulletedSquare,
     mdiInformationOutline,
     mdiPencilOutline,
     mdiPlus,
+    mdiTrashCanOutline,
   } from '@mdi/js';
-  import { cloneDeep, isEqual } from 'lodash-es';
-  import { flushSync } from 'svelte';
   import { t } from 'svelte-i18n';
   import type { PageData } from './$types';
-  import WorkflowJsonEditor from './WorkflowJsonEditor.svelte';
-  import WorkflowStepCard from './WorkflowStepCard.svelte';
-  import WorkflowStepDragImage from './WorkflowStepDragImage.svelte';
-  import WorkflowSummary from './WorkflowSummary.svelte';
-
-  type WorkflowJsonContent = Required<
-    Pick<WorkflowUpdateDto, 'description' | 'enabled' | 'name' | 'steps' | 'trigger'>
-  >;
-
-  type EditMode = 'visual' | 'json';
-  type StepDragImage = {
-    description?: string;
-    isFilter: boolean;
-    label: string;
-    stepNumber: number;
-  };
+  import HeaderActionButton from '$lib/components/HeaderActionButton.svelte';
 
   type Props = {
     data: PageData;
@@ -71,27 +57,6 @@
   let { data }: Props = $props();
 
   let { id, enabled, name, description, trigger, steps } = $derived(data.workflow);
-  let savedWorkflow = $state(cloneDeep(data.workflow));
-  let allowNavigation = $state(false);
-  let isShowingNavigationDialog = $state(false);
-  let isSaving = $state(false);
-  let editMode = $state<EditMode>('visual');
-  let draggedIndex = $state<number | null>(null);
-  let dragHandleHoverIndex = $state<number | null>(null);
-  let dragImageElement = $state<HTMLElement | null>(null);
-  let dragImage = $state<StepDragImage>({ isFilter: false, label: '', stepNumber: 1 });
-  let dropTargetIndex = $state<number | null>(null);
-
-  const workflowSummary = $derived({ name, description, trigger, steps });
-  const workflowJsonContent = $derived<WorkflowJsonContent>({ description, enabled, name, steps, trigger });
-
-  const hasChanges = $derived(
-    enabled !== savedWorkflow.enabled ||
-      name !== savedWorkflow.name ||
-      description !== savedWorkflow.description ||
-      !isEqual(trigger, savedWorkflow.trigger) ||
-      !isEqual(steps, savedWorkflow.steps),
-  );
 
   const handleAddStep = async () => {
     const step = await modalManager.show(WorkflowAddStepModal, { trigger });
@@ -100,90 +65,13 @@
     }
   };
 
-  const handleInsertStep = async (index: number) => {
-    const step = await modalManager.show(WorkflowAddStepModal, { trigger });
-    if (step) {
-      steps = [...steps.slice(0, index), step, ...steps.slice(index)];
-    }
-  };
-
-  const replaceStep = (index: number, step: WorkflowStepDto) => {
-    steps = steps.map((current, i) => (i === index ? cloneDeep(step) : current));
-  };
-
-  const handleEditStep = async (index: number) => {
-    const step = steps[index];
-    if (!step) {
-      return;
-    }
-
-    const result = await modalManager.show(WorkflowEditStepModal, { trigger, step: cloneDeep(step) });
+  const handleEditStep = async (step: WorkflowStepDto) => {
+    const result = await modalManager.show(WorkflowEditStepModal, { trigger, step });
     if (result) {
-      replaceStep(index, result);
+      Object.assign(step, result);
     }
   };
 
-  const handleDragStart = (index: number, event: DragEvent) => {
-    draggedIndex = index;
-    if (event.dataTransfer) {
-      event.dataTransfer.effectAllowed = 'move';
-      event.dataTransfer.setData('text/plain', String(index));
-
-      const step = steps[index];
-      const method = step ? pluginManager.getMethod(step.method) : undefined;
-      dragImage = {
-        description: method?.description,
-        isFilter: method?.uiHints?.includes('filter') ?? false,
-        label: step ? pluginManager.getMethodLabel(step.method) : '',
-        stepNumber: index + 1,
-      };
-      flushSync();
-
-      if (dragImageElement) {
-        event.dataTransfer.setDragImage(dragImageElement, 16, 22);
-      }
-    }
-  };
-
-  const handleDragOver = (index: number, event: DragEvent) => {
-    if (draggedIndex === null) {
-      return;
-    }
-    event.preventDefault();
-    if (event.dataTransfer) {
-      event.dataTransfer.dropEffect = 'move';
-    }
-    if (dropTargetIndex !== index) {
-      dropTargetIndex = index;
-    }
-  };
-
-  const handleDragLeave = (index: number) => {
-    if (dropTargetIndex === index) {
-      dropTargetIndex = null;
-    }
-  };
-
-  const handleDrop = (index: number, event: DragEvent) => {
-    event.preventDefault();
-    const from = draggedIndex;
-    draggedIndex = null;
-    dropTargetIndex = null;
-    if (from === null || from === index) {
-      return;
-    }
-    const next = [...steps];
-    const [moved] = next.splice(from, 1);
-    next.splice(index, 0, moved);
-    steps = next;
-  };
-
-  const handleDragEnd = () => {
-    draggedIndex = null;
-    dragHandleHoverIndex = null;
-    dropTargetIndex = null;
-  };
-
   const handleDeleteStep = async (index: number) => {
     const confirmed = await modalManager.showDialog({ title: $t('step_delete'), prompt: $t('step_delete_confirm') });
     if (confirmed) {
@@ -192,16 +80,11 @@
     }
   };
 
-  const handleJsonContentChange = (content: WorkflowJsonContent) => {
-    enabled = content.enabled;
-    name = content.name;
-    description = content.description;
-    trigger = content.trigger;
-    steps = cloneDeep(content.steps);
+  const onClose = async () => {
+    // check for pending changes
+    await goto(Route.workflows());
   };
 
-  const onClose = () => goto(Route.workflows());
-
   const onChangeTrigger = async () => {
     const newTrigger = await modalManager.show(WorkflowTriggerPicker, { selected: trigger });
     if (newTrigger) {
@@ -212,228 +95,163 @@
   const onWorkflowUpdate = async (response: WorkflowResponseDto) => {
     if (id === response.id) {
       data.workflow = response;
-      savedWorkflow = cloneDeep(response);
       await invalidate('workflow:data');
     }
   };
 
-  const confirmNavigation = async () => {
-    if (!hasChanges) {
-      return true;
-    }
-
-    if (isShowingNavigationDialog) {
-      return false;
-    }
-
-    try {
-      isShowingNavigationDialog = true;
-      return await modalManager.showDialog({
-        prompt: $t('workflow_navigation_prompt'),
-        confirmColor: 'primary',
-      });
-    } finally {
-      isShowingNavigationDialog = false;
-    }
+  const Done: ActionItem = {
+    title: $t('save'),
+    icon: mdiContentSave,
+    color: 'primary',
+    onAction: () => handleUpdateWorkflow(id, { enabled, name, description, trigger, steps }),
   };
-
-  const saveWorkflow = async () => {
-    if (!hasChanges || isSaving) {
-      return;
-    }
-
-    isSaving = true;
-    try {
-      const submitted = { enabled, name, description, trigger, steps: cloneDeep(steps) };
-      const saved = await handleUpdateWorkflow(id, submitted);
-
-      if (saved) {
-        Object.assign(savedWorkflow, submitted);
-      }
-    } finally {
-      isSaving = false;
-    }
-  };
-
-  beforeNavigate(({ cancel, to, willUnload }) => {
-    if (!hasChanges || allowNavigation) {
-      return;
-    }
-
-    cancel();
-
-    if (willUnload || !to) {
-      return;
-    }
-
-    void confirmNavigation().then((confirmed) => {
-      if (confirmed) {
-        allowNavigation = true;
-        void goto(to.url);
-      }
-    });
-  });
 </script>
 
 <OnEvents {onWorkflowUpdate} />
 
-<AppShell class="">
+<AppShell>
   <AppShellBar>
     <ActionBar static {onClose} translations={{ close: $t('back') }} closeIcon={mdiArrowLeft}>
       <ControlBarHeader>
         <ControlBarTitle>{data.workflow.name}</ControlBarTitle>
         <ControlBarDescription>{data.workflow.description}</ControlBarDescription>
       </ControlBarHeader>
-      <ControlBarContent class="flex items-center justify-end gap-6">
-        <div class="flex gap-1 rounded-full border border-light-200 bg-light p-1" role="group">
-          <Button
-            variant={editMode === 'visual' ? 'filled' : 'ghost'}
-            color={editMode === 'visual' ? 'primary' : 'secondary'}
-            size="small"
-            leadingIcon={mdiFormatListBulletedSquare}
-            aria-pressed={editMode === 'visual'}
-            onclick={() => (editMode = 'visual')}
-            shape="round"
-          >
-            {$t('visual')}
-          </Button>
-          <Button
-            variant={editMode === 'json' ? 'filled' : 'ghost'}
-            color={editMode === 'json' ? 'primary' : 'secondary'}
-            size="small"
-            leadingIcon={mdiCodeJson}
-            aria-pressed={editMode === 'json'}
-            onclick={() => (editMode = 'json')}
-            shape="round"
-          >
-            JSON
-          </Button>
-        </div>
-
-        <Button
-          variant="filled"
-          size="small"
-          color="primary"
-          leadingIcon={mdiContentSave}
-          disabled={!hasChanges || isSaving}
-          loading={isSaving}
-          onclick={saveWorkflow}
-        >
-          {$t('save')}
-        </Button>
+      <ControlBarContent class="flex justify-end">
+        <HeaderActionButton action={Done} variant="filled" />
       </ControlBarContent>
     </ActionBar>
   </AppShellBar>
 
   <Container size="medium" class="pt-8 pb-24" center>
     <VStack gap={4}>
-      {#if editMode === 'visual'}
-        <Card class="shadow-none" expandable>
-          <CardHeader>
-            <div class="flex place-items-start gap-3">
-              <Icon icon={mdiInformationOutline} size="20" class="mt-1" />
-              <div class="flex flex-col">
-                <CardTitle>
-                  {$t('workflow_info')}
-                </CardTitle>
-              </div>
+      <Card expandable>
+        <CardHeader>
+          <div class="flex place-items-start gap-3">
+            <Icon icon={mdiInformationOutline} size="20" class="mt-1" />
+            <div class="flex flex-col">
+              <CardTitle>
+                {$t('workflow_info')}
+              </CardTitle>
             </div>
-          </CardHeader>
+          </div>
+        </CardHeader>
 
-          <CardBody>
-            <VStack gap={4}>
-              <div class="relative w-full overflow-hidden rounded-xl border p-4" class:bg-primary-50={enabled}>
-                <Field label={enabled ? $t('enabled') : $t('disabled')} color={enabled ? 'primary' : 'secondary'}>
-                  <Switch bind:checked={enabled} />
-                </Field>
-              </div>
-
-              <Field label={$t('name')} required>
-                <Input
-                  placeholder={$t('workflow_name')}
-                  bind:value={() => name ?? '', (value) => (name = value || null)}
-                />
+        <CardBody>
+          <VStack gap={4}>
+            <div class="relative w-full overflow-hidden rounded-xl border p-4" class:bg-primary-50={enabled}>
+              <Field label={enabled ? $t('enabled') : $t('disabled')} color={enabled ? 'primary' : 'secondary'}>
+                <Switch bind:checked={enabled} />
               </Field>
-              <Field label={$t('description')} for="workflow-description">
-                <Textarea
-                  id="workflow-description"
-                  grow
-                  placeholder={$t('workflow_description')}
-                  bind:value={() => description ?? '', (value) => (description = value || null)}
-                />
-              </Field>
-            </VStack>
-          </CardBody>
-        </Card>
+            </div>
 
-        <div class="my-4 h-px w-[98%] bg-light-200"></div>
-
-        <Card class="shadow-none">
-          <CardHeader>
-            <div class="flex items-center gap-3">
-              <div class="flex size-10 shrink-0 items-center justify-center rounded-lg bg-success-50">
-                <Icon icon={mdiFlashOutline} size="20" class="text-success" />
-              </div>
-              <div class="flex min-w-0 flex-1 flex-col">
-                <CardTitle class="truncate">{getTriggerName($t, trigger)}</CardTitle>
-                <CardDescription class="truncate">{getTriggerDescription($t, trigger)}</CardDescription>
-              </div>
-
-              <IconButton
-                icon={mdiPencilOutline}
-                aria-label={$t('edit')}
-                variant="ghost"
-                shape="round"
-                color="secondary"
-                size="small"
-                onclick={onChangeTrigger}
+            <Field label={$t('name')} required>
+              <Input
+                placeholder={$t('workflow_name')}
+                bind:value={() => name ?? '', (value) => (name = value || null)}
               />
+            </Field>
+            <Field label={$t('description')} for="workflow-description">
+              <Textarea
+                id="workflow-description"
+                grow
+                placeholder={$t('workflow_description')}
+                bind:value={() => description ?? '', (value) => (description = value || null)}
+              />
+            </Field>
+          </VStack>
+        </CardBody>
+      </Card>
+
+      <div class="my-4 h-px w-[98%] bg-light-200"></div>
+
+      <Card>
+        <CardHeader class="bg-success-50">
+          <div class="flex items-start gap-3">
+            <Icon icon={mdiFlashOutline} size="20" class="mt-1 text-success" />
+            <div class="flex grow flex-col">
+              <CardTitle class="text-left text-success">{$t('trigger')}</CardTitle>
+              <CardDescription>{$t('trigger_description')}</CardDescription>
             </div>
-          </CardHeader>
-        </Card>
+            <div class="flex items-center justify-end">
+              <Button leadingIcon={mdiPencilOutline} size="small" color="secondary" onclick={onChangeTrigger}>
+                {$t('edit')}
+              </Button>
+            </div>
+          </div>
+        </CardHeader>
 
-        {#each steps as step, index (index)}
-          <WorkflowStepCard
-            {step}
-            {index}
-            isDragging={draggedIndex === index}
-            isDragHandleHovered={dragHandleHoverIndex === index}
-            isDropTarget={dropTargetIndex === index && draggedIndex !== null && draggedIndex !== index}
-            onEdit={handleEditStep}
-            onDelete={handleDeleteStep}
-            onInsertBefore={handleInsertStep}
-            onDragStart={handleDragStart}
-            onDragEnd={handleDragEnd}
-            onDragOver={handleDragOver}
-            onDragLeave={handleDragLeave}
-            onDrop={handleDrop}
-            onDragHandleEnter={(i) => (dragHandleHoverIndex = i)}
-            onDragHandleLeave={() => (dragHandleHoverIndex = null)}
-          />
-        {/each}
+        <CardBody>
+          <div class="flex flex-col items-start">
+            <Text>{getTriggerName($t, trigger)}</Text>
+            <Text size="small" color="muted">{getTriggerDescription($t, trigger)}</Text>
+          </div>
+        </CardBody>
+      </Card>
 
-        <Button
-          size="small"
-          fullWidth
-          variant="ghost"
-          leadingIcon={mdiPlus}
-          class="border border-dashed"
-          onclick={handleAddStep}
-        >
-          {$t('add_step')}
-        </Button>
-      {:else}
-        <WorkflowJsonEditor jsonContent={workflowJsonContent} onContentChange={handleJsonContentChange} />
-      {/if}
+      <Card>
+        <CardHeader class="bg-primary-50">
+          <div class="flex items-start gap-3">
+            <Icon icon={mdiFormatListBulletedSquare} size="20" class="mt-1 text-primary" />
+            <CardTitle class="text-left text-primary">{$t('steps')}</CardTitle>
+          </div>
+        </CardHeader>
+
+        <CardBody>
+          {#if steps.length === 0}
+            <Button leadingIcon={mdiPlus} onclick={handleAddStep}>{$t('add_step')}</Button>
+          {:else}
+            <Stack gap={2}>
+              {#each steps as step, index (index)}
+                {@const method = pluginManager.getMethod(step.method)}
+                {#if index > 0}
+                  <hr />
+                {/if}
+                <div
+                  // {@attach dragAndDrop({
+                  //   index,
+                  //   onDragStart: handleFilterDragStart,
+                  //   onDragEnter: handleFilterDragEnter,
+                  //   onDrop: handleFilterDrop,
+                  //   onDragEnd: handleFilterDragEnd,
+                  //   isDragging: draggedIndex === index,
+                  //   isDragOver: dragOverIndex === index,
+                  // })}
+                  class="flex cursor-move justify-between gap-2 rounded-2xl border-2 border-dashed bg-light-50 p-4 transition-all hover:border-light-300"
+                >
+                  <div class="flex flex-col gap-1">
+                    <Text>{pluginManager.getMethodLabel(step.method)}</Text>
+                    {#if method?.description}
+                      <Text color="muted" size="small">{method.description}</Text>
+                    {/if}
+                  </div>
+                  <div class="flex gap-1">
+                    <IconButton
+                      icon={mdiPencilOutline}
+                      aria-label={$t('edit')}
+                      variant="ghost"
+                      shape="round"
+                      color="secondary"
+                      onclick={() => handleEditStep(step)}
+                    />
+                    <IconButton
+                      icon={mdiTrashCanOutline}
+                      aria-label={$t('delete')}
+                      variant="ghost"
+                      shape="round"
+                      color="danger"
+                      onclick={() => handleDeleteStep(index)}
+                    />
+                  </div>
+                </div>
+              {/each}
+
+              <Button size="small" fullWidth variant="ghost" leadingIcon={mdiPlus} onclick={handleAddStep}>
+                {$t('add_step')}
+              </Button>
+            </Stack>
+          {/if}
+        </CardBody>
+      </Card>
     </VStack>
   </Container>
-
-  <WorkflowStepDragImage
-    bind:ref={dragImageElement}
-    description={dragImage.description}
-    isFilter={dragImage.isFilter}
-    label={dragImage.label}
-    stepNumber={dragImage.stepNumber}
-  />
-  <WorkflowSummary workflow={workflowSummary} />
 </AppShell>

web/src/routes/(user)/workflows/[workflowId]/WorkflowJsonEditor.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
-  import { WorkflowTrigger, type WorkflowStepDto, type WorkflowUpdateDto } from '@immich/sdk';
+  import type { WorkflowResponseDto } from '@immich/sdk';
   import {
+    Button,
     Card,
     CardBody,
     CardDescription,
@@ -12,91 +13,40 @@
     VStack,
   } from '@immich/ui';
   import { mdiCodeJson } from '@mdi/js';
-  import { isEqual } from 'lodash-es';
-  import { untrack } from 'svelte';
   import { JSONEditor, Mode, type Content, type OnChangeStatus } from 'svelte-jsoneditor';
-  import { t } from 'svelte-i18n';
-
-  type WorkflowJsonContent = Required<
-    Pick<WorkflowUpdateDto, 'description' | 'enabled' | 'name' | 'steps' | 'trigger'>
-  >;
 
   type Props = {
-    jsonContent: WorkflowJsonContent;
-    onContentChange: (content: WorkflowJsonContent) => void;
+    jsonContent: WorkflowResponseDto;
+    onApply: () => void;
+    onContentChange: (content: WorkflowResponseDto) => void;
   };
 
-  let { jsonContent, onContentChange }: Props = $props();
+  let { jsonContent, onApply, onContentChange }: Props = $props();
 
-  let content: Content = $state({ json: jsonContent });
+  let content: Content = $derived({ json: jsonContent });
+  let canApply = $state(false);
   let editorClass = $derived(themeManager.value === Theme.Dark ? 'jse-theme-dark' : '');
 
-  const isWorkflowStep = (value: unknown): value is WorkflowStepDto => {
-    if (!value || typeof value !== 'object') {
-      return false;
-    }
-
-    const step = value as Partial<WorkflowStepDto>;
-    return (
-      typeof step.method === 'string' &&
-      (step.config === null || (typeof step.config === 'object' && !Array.isArray(step.config))) &&
-      (step.enabled === undefined || typeof step.enabled === 'boolean')
-    );
-  };
-
-  const isWorkflowJsonContent = (value: unknown): value is WorkflowJsonContent => {
-    if (!value || typeof value !== 'object') {
-      return false;
-    }
-
-    const workflow = value as Partial<WorkflowJsonContent>;
-    return (
-      typeof workflow.enabled === 'boolean' &&
-      (workflow.name === null || typeof workflow.name === 'string') &&
-      (workflow.description === null || typeof workflow.description === 'string') &&
-      Object.values(WorkflowTrigger).includes(workflow.trigger as WorkflowTrigger) &&
-      Array.isArray(workflow.steps) &&
-      workflow.steps.every(isWorkflowStep)
-    );
-  };
-
-  const parseContent = (updated: Content) => {
-    if ('json' in updated) {
-      return updated.json;
-    }
-
-    return JSON.parse(updated.text);
-  };
-
-  $effect(() => {
-    const nextContent = jsonContent;
-    let isSynced = false;
-
-    try {
-      isSynced = isEqual(
-        untrack(() => parseContent(content)),
-        nextContent,
-      );
-    } catch {
-      // The editor can be temporarily invalid while typing in text mode.
-    }
-
-    if (!isSynced) {
-      content = { json: nextContent };
-    }
-  });
-
   const handleChange = (updated: Content, _: Content, status: OnChangeStatus) => {
     if (status.contentErrors) {
       return;
     }
 
-    const parsed = parseContent(updated);
-    if (!isWorkflowJsonContent(parsed)) {
-      return;
-    }
+    canApply = true;
 
-    onContentChange(parsed);
+    if ('text' in updated && updated.text !== undefined) {
+      try {
+        const parsed = JSON.parse(updated.text);
+        onContentChange(parsed);
+      } catch (error_) {
+        console.error('Invalid JSON in text mode:', error_);
+      }
+    }
+  };
+
+  const handleApply = () => {
+    onApply();
+    canApply = false;
   };
 </script>
 
@@ -107,16 +57,17 @@
         <div class="flex items-start gap-3">
           <Icon icon={mdiCodeJson} size="20" class="mt-1" />
           <div class="flex flex-col">
-            <CardTitle>{$t('workflow_json')}</CardTitle>
-            <CardDescription>{$t('workflow_json_help')}</CardDescription>
+            <CardTitle>Workflow JSON</CardTitle>
+            <CardDescription>Edit the workflow configuration directly in JSON format</CardDescription>
           </div>
         </div>
+        <Button size="small" color="primary" onclick={handleApply} disabled={!canApply}>Apply Changes</Button>
       </div>
     </CardHeader>
     <CardBody>
       <VStack gap={2}>
         <div class="h-[600px] w-full overflow-hidden rounded-lg border {editorClass}">
-          <JSONEditor bind:content onChange={handleChange} mainMenuBar={false} mode={Mode.text} />
+          <JSONEditor {content} onChange={handleChange} mainMenuBar={false} mode={Mode.text} />
         </div>
       </VStack>
     </CardBody>

web/src/routes/(user)/workflows/[workflowId]/WorkflowStepCard.svelte

@@ -1,195 +0,0 @@
-<script lang="ts">
-  import { pluginManager } from '$lib/managers/plugin-manager.svelte';
-  import type { WorkflowStepDto } from '@immich/sdk';
-  import { Badge, Card, CardBody, CardDescription, CardHeader, CardTitle, Icon, IconButton } from '@immich/ui';
-  import {
-    mdiAutoFix,
-    mdiDragVertical,
-    mdiFilterVariant,
-    mdiPencilOutline,
-    mdiPlus,
-    mdiTrashCanOutline,
-  } from '@mdi/js';
-  import { t } from 'svelte-i18n';
-
-  type Props = {
-    step: WorkflowStepDto;
-    index: number;
-    isDragging: boolean;
-    isDragHandleHovered: boolean;
-    isDropTarget: boolean;
-    onEdit: (index: number) => void;
-    onDelete: (index: number) => void;
-    onInsertBefore: (index: number) => void;
-    onDragStart: (index: number, event: DragEvent) => void;
-    onDragEnd: () => void;
-    onDragOver: (index: number, event: DragEvent) => void;
-    onDragLeave: (index: number) => void;
-    onDrop: (index: number, event: DragEvent) => void;
-    onDragHandleEnter: (index: number) => void;
-    onDragHandleLeave: () => void;
-  };
-
-  let {
-    step,
-    index,
-    isDragging,
-    isDragHandleHovered,
-    isDropTarget,
-    onEdit,
-    onDelete,
-    onInsertBefore,
-    onDragStart,
-    onDragEnd,
-    onDragOver,
-    onDragLeave,
-    onDrop,
-    onDragHandleEnter,
-    onDragHandleLeave,
-  }: Props = $props();
-
-  const method = $derived(pluginManager.getMethod(step.method));
-  const isFilter = $derived(method?.uiHints?.includes('filter') ?? false);
-  const configEntries = $derived(
-    Object.entries(step.config ?? {}).filter(([, value]) => value !== null && value !== undefined && value !== ''),
-  );
-
-  const truncate = (input: string, max = 24) => (input.length > max ? input.slice(0, max - 1) + '…' : input);
-
-  const formatConfigValue = (value: unknown): string => {
-    if (value === null || value === undefined) {
-      return '—';
-    }
-    if (typeof value === 'boolean') {
-      return value ? 'on' : 'off';
-    }
-    if (typeof value === 'number') {
-      return String(value);
-    }
-    if (typeof value === 'string') {
-      return `"${truncate(value)}"`;
-    }
-    if (Array.isArray(value)) {
-      if (value.length === 0) {
-        return $t('none');
-      }
-      const items = value.map((v) => (v !== null && typeof v === 'object' ? '{…}' : String(v)));
-      const joined = items.join(' · ');
-      if (joined.length <= 28) {
-        return `"${joined}"`;
-      }
-      return $t('items_count', { values: { count: value.length } });
-    }
-    return '{…}';
-  };
-</script>
-
-<div class="group/step-row flex w-full flex-col">
-  <div class="-mt-4 ml-18 flex w-full items-center gap-4">
-    <div class="relative flex w-1 shrink-0 justify-start">
-      <div class="h-10 w-0.5 bg-light-200"></div>
-      <button
-        type="button"
-        class="absolute top-1/2 left-1/2 z-10 -translate-1/2 cursor-pointer rounded-full border border-dashed border-primary-200 bg-light p-0.5 text-primary opacity-0 transition-opacity group-hover/step-row:opacity-100 hover:bg-primary-50"
-        aria-label={$t('add_step')}
-        title={$t('add_step')}
-        onclick={() => onInsertBefore(index)}
-      >
-        <Icon icon={mdiPlus} size="14" />
-      </button>
-    </div>
-  </div>
-
-  <div
-    class="w-full transition-all"
-    class:opacity-40={isDragging}
-    class:scale-[0.99]={isDragging}
-    ondragover={(event) => onDragOver(index, event)}
-    ondragleave={() => onDragLeave(index)}
-    ondrop={(event) => onDrop(index, event)}
-    role="listitem"
-  >
-    <Card
-      class="shadow-none transition-colors {isDropTarget
-        ? 'border-primary ring-2 ring-primary-200'
-        : isDragHandleHovered
-          ? 'border-dashed border-primary'
-          : ''}"
-    >
-      <CardHeader>
-        <div class="flex items-center gap-2">
-          <!-- svelte-ignore a11y_no_static_element_interactions -->
-          <div
-            class="flex shrink-0 cursor-grab items-center justify-center rounded-md border border-transparent p-1 text-light-400 select-none hover:border-primary-200 hover:bg-primary-50 hover:text-primary active:cursor-grabbing"
-            aria-label={$t('drag_to_reorder')}
-            draggable="true"
-            onmouseenter={() => onDragHandleEnter(index)}
-            onmouseleave={onDragHandleLeave}
-            ondragstart={(event) => onDragStart(index, event)}
-            ondragend={onDragEnd}
-            title={$t('drag_to_reorder')}
-          >
-            <Icon icon={mdiDragVertical} size="20" />
-          </div>
-          <div
-            class="flex size-10 shrink-0 items-center justify-center rounded-lg"
-            class:bg-primary-50={isFilter}
-            class:bg-warning-50={!isFilter}
-          >
-            <Icon
-              icon={isFilter ? mdiFilterVariant : mdiAutoFix}
-              size="20"
-              class={isFilter ? 'text-primary' : 'text-warning'}
-            />
-          </div>
-          <div class="flex min-w-0 flex-1 flex-col">
-            <CardTitle class="truncate">
-              <span class="mr-1 font-bold text-light-500">{index + 1}</span>
-              {pluginManager.getMethodLabel(step.method)}
-            </CardTitle>
-            {#if method?.description}
-              <CardDescription class="truncate">{method.description}</CardDescription>
-            {/if}
-          </div>
-          <div class="flex shrink-0 items-center gap-1">
-            <IconButton
-              icon={mdiPencilOutline}
-              aria-label={$t('edit')}
-              variant="ghost"
-              shape="round"
-              color="secondary"
-              size="small"
-              onclick={() => onEdit(index)}
-            />
-            <IconButton
-              icon={mdiTrashCanOutline}
-              aria-label={$t('delete')}
-              variant="ghost"
-              shape="round"
-              color="danger"
-              size="small"
-              onclick={() => onDelete(index)}
-            />
-          </div>
-        </div>
-      </CardHeader>
-
-      {#if configEntries.length > 0}
-        <CardBody class="py-3">
-          <div class="flex flex-wrap items-center gap-1.5">
-            {#each configEntries as [key, value] (key)}
-              <Badge
-                color={isFilter ? 'info' : 'warning'}
-                shape="round"
-                size="small"
-                class="border font-mono {isFilter ? 'border-primary-200' : 'border-warning-200'}"
-              >
-                <span class="opacity-60">{key}</span>{formatConfigValue(value)}
-              </Badge>
-            {/each}
-          </div>
-        </CardBody>
-      {/if}
-    </Card>
-  </div>
-</div>

web/src/routes/(user)/workflows/[workflowId]/WorkflowStepDragImage.svelte

@@ -1,43 +0,0 @@
-<script lang="ts">
-  import { Icon } from '@immich/ui';
-  import { mdiAutoFix, mdiFilterVariant } from '@mdi/js';
-
-  type Props = {
-    ref?: HTMLElement | null;
-    description?: string;
-    isFilter: boolean;
-    label: string;
-    stepNumber: number;
-  };
-
-  let { ref = $bindable(null), description, isFilter, label, stepNumber }: Props = $props();
-</script>
-
-<div
-  bind:this={ref}
-  aria-hidden="true"
-  class="pointer-events-none fixed top-[-1000px] left-0 flex w-80 items-center gap-2.5 rounded-lg border border-light-200 bg-light px-3 py-2.5 text-sm/5 text-dark shadow-2xl"
->
-  <div
-    class="flex size-8 shrink-0 items-center justify-center rounded-lg"
-    class:bg-primary-50={isFilter}
-    class:bg-warning-50={!isFilter}
-  >
-    <Icon
-      icon={isFilter ? mdiFilterVariant : mdiAutoFix}
-      size="18"
-      class={isFilter ? 'text-primary' : 'text-warning'}
-    />
-  </div>
-
-  <div class="min-w-0 flex-1">
-    <div class="flex min-w-0 items-center gap-2">
-      <span class="shrink-0 font-bold text-light-500">#{stepNumber}</span>
-      <span class="truncate font-bold">{label}</span>
-    </div>
-
-    {#if description}
-      <div class="mt-0.5 truncate text-xs/4 text-light-500">{description}</div>
-    {/if}
-  </div>
-</div>

web/src/routes/(user)/workflows/[workflowId]/WorkflowSummary.svelte

@@ -1,176 +1,137 @@
 <script lang="ts">
-  import { pluginManager } from '$lib/managers/plugin-manager.svelte';
   import { getTriggerName } from '$lib/utils/workflow';
-  import type { WorkflowStepDto, WorkflowTrigger } from '@immich/sdk';
+  import type { WorkflowResponseDto } from '@immich/sdk';
   import { Icon, IconButton, Text } from '@immich/ui';
-  import { mdiCheck, mdiClose, mdiContentCopy, mdiViewDashboardOutline } from '@mdi/js';
+  import { mdiClose, mdiFlashOutline, mdiPlayCircleOutline, mdiViewDashboardOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
-  import { fly } from 'svelte/transition';
-
-  type WorkflowSummaryData = {
-    name: string | null;
-    description: string | null;
-    trigger: WorkflowTrigger;
-    steps: WorkflowStepDto[];
-  };
 
   type Props = {
-    workflow: WorkflowSummaryData;
+    workflow: WorkflowResponseDto;
   };
 
   let { workflow }: Props = $props();
+  const { trigger, steps } = $derived(workflow);
 
   let isOpen = $state(false);
-  let justCopied = $state(false);
-  let copyTimer: ReturnType<typeof setTimeout> | undefined;
-  let panelElement = $state<HTMLElement | undefined>(undefined);
+  let position = $state({ x: 0, y: 0 });
+  let isDragging = $state(false);
+  let dragOffset = $state({ x: 0, y: 0 });
+  let containerEl: HTMLDivElement | undefined = $state();
 
-  $effect(() => {
-    if (!isOpen) {
+  const handleMouseDown = (e: MouseEvent) => {
+    if (!containerEl) {
       return;
     }
-
-    const handleKeydown = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') {
-        event.stopPropagation();
-        event.preventDefault();
-        isOpen = false;
-      }
+    isDragging = true;
+    const rect = containerEl.getBoundingClientRect();
+    dragOffset = {
+      x: e.clientX - rect.left,
+      y: e.clientY - rect.top,
     };
-
-    const handlePointerDown = (event: PointerEvent) => {
-      if (panelElement && event.target instanceof Node && !panelElement.contains(event.target)) {
-        isOpen = false;
-      }
-    };
-
-    document.addEventListener('keydown', handleKeydown, { capture: true });
-    document.addEventListener('pointerdown', handlePointerDown);
-
-    return () => {
-      document.removeEventListener('keydown', handleKeydown, { capture: true });
-      document.removeEventListener('pointerdown', handlePointerDown);
-    };
-  });
-
-  const formatConfigValue = (value: unknown): string => {
-    if (value === null || value === undefined) {
-      return '—';
-    }
-    if (typeof value === 'boolean') {
-      return value ? 'true' : 'false';
-    }
-    if (typeof value === 'number') {
-      return String(value);
-    }
-    if (typeof value === 'string') {
-      return `"${value}"`;
-    }
-    if (Array.isArray(value)) {
-      if (value.length === 0) {
-        return '[]';
-      }
-      return '[' + value.map((v) => (v !== null && typeof v === 'object' ? '{…}' : String(v))).join(', ') + ']';
-    }
-    if (typeof value === 'object') {
-      return JSON.stringify(value);
-    }
-    return String(value);
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('mouseup', handleMouseUp);
   };
 
-  const getConfigEntries = (config: WorkflowStepDto['config']) =>
-    Object.entries(config ?? {}).filter(([, value]) => value !== null && value !== undefined && value !== '');
-
-  const asciiSummary = $derived.by(() => {
-    const lines: string[] = [];
-    const title = workflow.name ?? $t('no_name');
-    lines.push(`${title}`);
-    if (workflow.description) {
-      lines.push(workflow.description);
-    }
-
-    lines.push('', '  WHEN', `    ⚡ ${getTriggerName($t, workflow.trigger)}`, '', '  THEN');
-
-    if (workflow.steps.length === 0) {
-      lines.push(`    ${$t('no_steps')}`);
-      return lines.join('\n');
-    }
-
-    for (const [i, step] of workflow.steps.entries()) {
-      const method = pluginManager.getMethod(step.method);
-      const isFilter = method?.uiHints?.includes('filter') ?? false;
-      const type = isFilter ? $t('filter') : $t('action');
-      const label = pluginManager.getMethodLabel(step.method);
-      lines.push(`    [${i + 1}] ${type.toUpperCase()} · ${label}`);
-      for (const [key, value] of getConfigEntries(step.config)) {
-        lines.push(`          ${key} = ${formatConfigValue(value)}`);
-      }
-      if (i < workflow.steps.length - 1) {
-        lines.push('');
-      }
-    }
-
-    return lines.join('\n');
-  });
-
-  const handleCopy = async () => {
-    try {
-      await navigator.clipboard.writeText(asciiSummary);
-      justCopied = true;
-      if (copyTimer) {
-        clearTimeout(copyTimer);
-      }
-      copyTimer = setTimeout(() => (justCopied = false), 1500);
-    } catch {
-      // ignore — clipboard may be unavailable
+  const handleMouseMove = (e: MouseEvent) => {
+    if (!isDragging) {
+      return;
     }
+    position = {
+      x: e.clientX - dragOffset.x,
+      y: e.clientY - dragOffset.y,
+    };
   };
+
+  const handleMouseUp = () => {
+    isDragging = false;
+    document.removeEventListener('mousemove', handleMouseMove);
+    document.removeEventListener('mouseup', handleMouseUp);
+  };
+
+  $effect(() => {
+    // Initialize position to bottom-right on mount
+    if (globalThis.window && position.x === 0 && position.y === 0) {
+      position = {
+        x: globalThis.innerWidth - 280,
+        y: globalThis.innerHeight - 400,
+      };
+    }
+  });
 </script>
 
 {#if isOpen}
-  <aside
-    bind:this={panelElement}
-    class="fixed inset-y-20 right-4 bottom-4 hidden max-w-lg flex-col overflow-hidden rounded-2xl border border-light-200 bg-light shadow-2xl sm:flex"
-    transition:fly={{ x: 400, duration: 250 }}
-    aria-label={$t('workflow_summary')}
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div
+    bind:this={containerEl}
+    class="fixed hidden w-64 select-none hover:cursor-grab sm:block"
+    style="left: {position.x}px; top: {position.y}px;"
+    class:cursor-grabbing={isDragging}
+    onmousedown={handleMouseDown}
   >
-    <!-- Header -->
-    <div class="flex shrink-0 items-center justify-between border-b border-light-200 px-4 py-2.5">
-      <Text size="small" fontWeight="semi-bold" color="muted">{$t('workflow_summary')}</Text>
-      <div class="flex items-center gap-1">
-        <IconButton
-          icon={justCopied ? mdiCheck : mdiContentCopy}
-          size="small"
-          variant="ghost"
-          color={justCopied ? 'success' : 'secondary'}
-          title={$t('copy_to_clipboard')}
-          aria-label={$t('copy_to_clipboard')}
-          onclick={handleCopy}
-        />
-        <IconButton
-          icon={mdiClose}
-          size="small"
-          variant="ghost"
-          color="secondary"
-          title="Close summary"
-          aria-label="Close summary"
-          onclick={() => (isOpen = false)}
-        />
+    <div
+      class="rounded-xl border-2 border-transparent bg-light-50 p-4 shadow-sm transition-all hover:border-dashed hover:border-light-300 hover:shadow-xl"
+    >
+      <div class="mb-4 flex cursor-grab items-center justify-between select-none">
+        <Text size="small" fontWeight="semi-bold">{$t('workflow_summary')}</Text>
+        <div class="flex items-center gap-1">
+          <IconButton
+            icon={mdiClose}
+            size="small"
+            variant="ghost"
+            color="secondary"
+            title="Close summary"
+            aria-label="Close summary"
+            onclick={(e: MouseEvent) => {
+              e.stopPropagation();
+              isOpen = false;
+            }}
+          />
+        </div>
+      </div>
+
+      <div class="space-y-2">
+        <!-- Trigger -->
+        <div class="rounded-lg border bg-light-100 p-3">
+          <div class="mb-1 flex items-center gap-2">
+            <Icon icon={mdiFlashOutline} size="18" class="text-primary" />
+            <Text size="tiny" fontWeight="semi-bold">{$t('trigger')}</Text>
+          </div>
+          <p class="truncate pl-5 text-sm">{getTriggerName($t, trigger)}</p>
+        </div>
+
+        <!-- Connector -->
+        <div class="flex justify-center">
+          <div class="h-3 w-0.5 bg-light-400"></div>
+        </div>
+
+        <!-- Steps -->
+        {#if steps.length > 0}
+          <div class="rounded-lg border bg-light-100 p-3">
+            <div class="mb-2 flex items-center gap-2">
+              <Icon icon={mdiPlayCircleOutline} size="18" class="text-success" />
+              <Text size="tiny" fontWeight="semi-bold">{$t('actions')}</Text>
+            </div>
+            <div class="space-y-1 pl-5">
+              {#each steps as step, index (index)}
+                <div class="flex items-center gap-2">
+                  <span
+                    class="flex size-4 shrink-0 items-center justify-center rounded-full bg-light-200 text-[10px] font-medium"
+                    >{index + 1}</span
+                  >
+                  <p class="truncate text-sm">{step.method}</p>
+                </div>
+              {/each}
+            </div>
+          </div>
+        {/if}
       </div>
     </div>
-
-    <!-- ASCII body — what you see is what you copy -->
-    <div class="flex-1 overflow-auto p-4">
-      <pre
-        class="m-0 overflow-auto rounded-lg border border-light-200 bg-light-100 px-4 py-3 font-mono text-xs/relaxed whitespace-pre">{asciiSummary}</pre>
-    </div>
-  </aside>
+  </div>
 {:else}
   <button
     type="button"
     class="fixed right-6 bottom-6 hidden size-14 items-center justify-center rounded-full bg-primary text-light shadow-lg transition-colors hover:bg-primary/90 sm:flex"
     title={$t('workflow_summary')}
-    aria-label={$t('workflow_summary')}
     onclick={() => (isOpen = true)}
   >
     <Icon icon={mdiViewDashboardOutline} size="24" />